/* Plippo Baby — baby.plippo.app
 *
 * The app's own register, not a generic marketing skin: the cocoa night field and terracotta
 * accent are the free "cream" theme's actual values (BrandThemes.CREAM — darkStops
 * #3A2E24/#241C15/#14100C, accent #D8916B), because someone who installs from this page should
 * recognise what they opened. Low-stimulus for the same reason the app is: it gets read at
 * 3 a.m. as often as at noon.
 */

:root {
    --field-1: #3a2e24;
    --field-2: #241c15;
    --field-3: #14100c;
    --accent: #d8916b;
    /* The accent is a FILL. As text on this field it measures ~3.2:1, so type uses the lifted
       ink instead — the same split the app makes between `accentColor` and `onGlassAccent`. */
    --accent-ink: #f0b492;
    --ink: #f6efe9;
    --ink-dim: #c9b8ab;
    --ink-faint: #9c8878;
    --card: rgba(255, 255, 255, 0.055);
    --card-line: rgba(255, 255, 255, 0.11);
    --radius: 20px;
    --maxw: 1080px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        "Noto Sans", "Noto Sans Arabic", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation: none !important;
        transition: none !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--field-3);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* The field: two soft blooms over the cocoa gradient — the app's `brandBackground`. */
    background-image:
        radial-gradient(900px 620px at 12% -8%, rgba(216, 145, 107, 0.16), transparent 62%),
        radial-gradient(760px 560px at 92% 8%, rgba(216, 145, 107, 0.09), transparent 58%),
        linear-gradient(170deg, var(--field-1) 0%, var(--field-2) 46%, var(--field-3) 100%);
    /* Deliberately NOT `background-attachment: fixed`: iOS Safari mishandles it (jank, and a
       blank repaint that reproduced in a headless capture here), and the blooms read the same
       scrolling with the page. */
    background-repeat: no-repeat;
}

/* Arabic and any other RTL locale: the script sets dir="rtl" on <html>; everything below is
   written in logical properties so the whole page mirrors without a second stylesheet. */
[dir="rtl"] body {
    background-image:
        radial-gradient(900px 620px at 88% -8%, rgba(216, 145, 107, 0.16), transparent 62%),
        radial-gradient(760px 560px at 8% 8%, rgba(216, 145, 107, 0.09), transparent 58%),
        linear-gradient(190deg, var(--field-1) 0%, var(--field-2) 46%, var(--field-3) 100%);
}

/* CJK line-breaking. The script sets <html lang>, so these apply to the whole page once a
   reader lands in one of these locales.
   - `line-break: strict` enforces kinsoku: a line may not begin with a long-vowel mark or a
     small kana. Without it the Japanese hero broke as スマ / ートフォン, which reads as badly
     as splitting an English word across lines with no hyphen.
   - Korean puts spaces between phrases, so `keep-all` stops a break INSIDE a word while still
     wrapping at the spaces. */
:lang(ja),
:lang(zh-Hans) {
    line-break: strict;
    overflow-wrap: normal;
}

:lang(ko) {
    word-break: keep-all;
    line-break: strict;
}

/* `balance` optimises for even line lengths, which fights the breaking rules above and is
   worth far less in scripts with no word spaces. */
:lang(ja) h1,
:lang(ja) h2,
:lang(zh-Hans) h1,
:lang(zh-Hans) h2,
:lang(ko) h1,
:lang(ko) h2 {
    text-wrap: normal;
}

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 22px;
}

/* ---------- header ---------- */

header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(20, 16, 12, 0.72);
    border-block-end: 1px solid var(--card-line);
}

.bar {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 62px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    font-size: 17px;
}

/* The app's own launcher mark (owner, 2026-09-14), not an emoji in a tinted tile. The SVG
   carries its own cream ground and rounded corners — the same file the tab icon uses — so the
   gradient that used to sit behind the emoji is gone rather than left showing as a border. */
.brand .mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: block;
    flex: none;
}

nav.links {
    display: flex;
    gap: 20px;
    margin-inline-start: auto;
    align-items: center;
}

nav.links a {
    color: var(--ink-dim);
    text-decoration: none;
    font-size: 14.5px;
}

nav.links a:hover {
    color: var(--ink);
}

@media (max-width: 720px) {
    nav.links a {
        display: none;
    }
}

.langpick {
    position: relative;
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}

nav.links + .langpick {
    margin-inline-start: 0;
}

.langpick select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--card);
    border: 1px solid var(--card-line);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    padding: 7px 30px 7px 12px;
    border-radius: 11px;
    cursor: pointer;
}

[dir="rtl"] .langpick select {
    padding: 7px 12px 7px 30px;
}

.langpick::after {
    content: "";
    position: absolute;
    inset-inline-end: 12px;
    width: 7px;
    height: 7px;
    /* PHYSICAL borders on purpose. The logical pair flips under dir="rtl" and turns the
       down-caret into a side-chevron — a down-caret means "opens downwards" in both
       directions, so the shape must not mirror even though its position does. */
    border-right: 2px solid var(--ink-faint);
    border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg) translateY(-2px);
    pointer-events: none;
}

.langpick select:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 2px;
}

/* ---------- hero ---------- */

.hero {
    padding-block: clamp(56px, 11vw, 104px) clamp(40px, 8vw, 72px);
    text-align: center;
}

.eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-ink);
    border: 1px solid rgba(216, 145, 107, 0.34);
    background: rgba(216, 145, 107, 0.09);
    padding: 6px 13px;
    border-radius: 999px;
    margin-block-end: 22px;
}

h1 {
    font-size: clamp(34px, 6.2vw, 58px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
    font-weight: 700;
    text-wrap: balance;
}

.lede {
    font-size: clamp(17px, 2.2vw, 20px);
    color: var(--ink-dim);
    max-width: 620px;
    margin: 0 auto 30px;
    text-wrap: pretty;
}

.cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

[hidden] {
    display: none !important;
}

.store {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--card);
    border: 1px solid var(--card-line);
    color: var(--ink);
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
}

.store:hover {
    border-color: rgba(216, 145, 107, 0.5);
    background: rgba(216, 145, 107, 0.1);
}

.store[aria-disabled="true"] {
    opacity: 0.62;
    cursor: default;
    pointer-events: none;
}

/* The one line that tells a parent who ALREADY has their baby that this app is for them too
   (2026-08-25). The hero leads "From the first positive test", the app name leads with pregnancy,
   and the store listing has said "already have your baby? start there" in fifteen languages since
   the listing pass — the site was the only surface still silent about it, which is the surface
   where the decision is actually made. Weighted between the lede and the store buttons: more than
   a footnote, less than the promise above it. */
.hero-start {
    margin-block-start: 14px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}

.hero-note {
    margin-block-start: 18px;
    font-size: 14px;
    color: var(--ink-faint);
}

/* ---------- sections ---------- */

section {
    padding-block: clamp(44px, 8vw, 80px);
}

.section-head {
    max-width: 660px;
    margin-block-end: 34px;
}

.hero + section .section-head,
section.centered .section-head {
    margin-inline: auto;
    text-align: center;
}

h2 {
    font-size: clamp(24px, 3.6vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    font-weight: 700;
    text-wrap: balance;
}

h3 {
    font-size: 17px;
    margin: 0 0 7px;
    font-weight: 650;
}

.sub {
    color: var(--ink-dim);
    margin: 0;
    font-size: 16.5px;
    text-wrap: pretty;
}

.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.card {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
    padding: 22px;
}

.card p {
    margin: 0;
    color: var(--ink-dim);
    font-size: 15px;
}

.card .ico {
    font-size: 22px;
    display: block;
    margin-block-end: 12px;
}

/* the two-chapter arc */
.arc {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    align-items: stretch;
}

.arc .card {
    padding: 26px;
}

.arc h3 {
    font-size: 19px;
    color: var(--accent-ink);
}

.arc ul {
    margin: 14px 0 0;
    padding-inline-start: 20px;
    color: var(--ink-dim);
    font-size: 15px;
}

.arc li {
    margin-block-end: 5px;
}

/* privacy block */
.privacy-block {
    background: linear-gradient(160deg, rgba(216, 145, 107, 0.12), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(216, 145, 107, 0.28);
    border-radius: 26px;
    padding: clamp(26px, 4.6vw, 44px);
}

.claims {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 13px;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.claims li {
    padding-inline-start: 30px;
    position: relative;
    color: var(--ink-dim);
    font-size: 15.5px;
}

.claims li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: var(--accent-ink);
    font-weight: 700;
}

/* pricing */
.plans {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
    max-width: 780px;
    margin-inline: auto;
}

.plan {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--radius);
    padding: 26px;
}

.plan.pro {
    border-color: rgba(216, 145, 107, 0.42);
    background: linear-gradient(165deg, rgba(216, 145, 107, 0.13), rgba(255, 255, 255, 0.04));
}

.plan .price {
    font-size: 27px;
    font-weight: 700;
    margin-block: 8px 4px;
}

.plan .price .was {
    /* The standing price, struck through beside the launch price. Muted and a size down so
       the number that is actually charged stays the one the eye lands on. */
    font-size: 18px;
    font-weight: 500;
    color: var(--ink-faint);
    margin-inline-end: 6px;
    text-decoration-thickness: 1.5px;
}

.plan .launch {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-ink);
    border: 1px solid rgba(216, 145, 107, 0.4);
    background: rgba(216, 145, 107, 0.12);
    padding: 3px 9px;
    border-radius: 999px;
}

.plan .price-note {
    margin-block-start: 10px;
    font-size: 13.5px;
    color: var(--ink-faint);
}

.plan .price small {
    /* Spaced here rather than in the string: a translation that drops a leading
       space would silently print "8,99 €einmal". */
    margin-inline-start: 5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-faint);
}

.plan ul {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    font-size: 15px;
    color: var(--ink-dim);
}

.plan li {
    padding-inline-start: 24px;
    position: relative;
    margin-block-end: 8px;
}

.plan li::before {
    content: "·";
    position: absolute;
    inset-inline-start: 8px;
    color: var(--accent-ink);
    font-weight: 700;
}

.plan .tag {
    display: inline-block;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-block-end: 4px;
}

/* faq */
.faq {
    max-width: 720px;
    margin-inline: auto;
}

details {
    border-block-end: 1px solid var(--card-line);
    padding-block: 16px;
}

summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 16.5px;
    list-style: none;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: "+";
    margin-inline-start: auto;
    color: var(--accent-ink);
    font-weight: 400;
    font-size: 21px;
    line-height: 1;
    flex: none;
}

details[open] summary::after {
    content: "−";
}

details p {
    margin: 11px 0 0;
    color: var(--ink-dim);
    font-size: 15.5px;
}

/* ---------- long-form pages (privacy, support) ---------- */

.doc {
    max-width: 740px;
    margin-inline: auto;
    padding-block: clamp(40px, 7vw, 72px);
}

.doc h1 {
    font-size: clamp(28px, 4.6vw, 40px);
    text-align: start;
}

.doc h2 {
    font-size: 21px;
    margin-block: 38px 10px;
}

.doc p,
.doc li {
    color: var(--ink-dim);
    font-size: 16px;
}

.doc ul {
    padding-inline-start: 22px;
}

.doc li {
    margin-block-end: 7px;
}

.doc strong {
    color: var(--ink);
    font-weight: 650;
}

.doc a {
    color: var(--accent-ink);
}

.meta {
    font-size: 14px;
    color: var(--ink-faint);
    margin-block-end: 30px;
}

.callout {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-inline-start: 3px solid var(--accent);
    border-radius: 14px;
    padding: 18px 20px;
    margin-block: 24px;
}

.callout p {
    margin: 0;
}

/* ---------- footer ---------- */

footer {
    border-block-start: 1px solid var(--card-line);
    padding-block: 34px 46px;
    margin-block-start: 30px;
}

.foot {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 26px;
    align-items: center;
    font-size: 14.5px;
    color: var(--ink-faint);
}

.foot a {
    color: var(--ink-dim);
    text-decoration: none;
}

.foot a:hover {
    color: var(--ink);
}

.foot .spacer {
    margin-inline-start: auto;
}

/* The price comparison. No new hue: the field only ever carries three browns, three inks and
   one accent, so the subscription climbs away in the faint ink and the flat line is the one in
   brand colour. Line and dot take --accent (a fill); the label takes --accent-ink, which is the
   split this file already documents for accent-as-text.
   `direction: ltr` on the numbers because they are Latin runs inside an SVG that inherits the
   page direction: on the Arabic build `text-anchor: end` otherwise resolves to the run's left
   edge and pushes the label out of the viewBox. */
.pricechart {
    max-width: 620px;
    margin: 26px auto 0;
}

.pricechart svg {
    display: block;
    width: 100%;
    height: auto;
}

.pricechart text {
    direction: ltr;
    unicode-bidi: isolate;
}

.pricechart .axis {
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1;
}

.pricechart .grid {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.pricechart .tick,
.pricechart .xlab {
    fill: var(--ink-faint);
    font-size: 11px;
    text-anchor: end;
}

.pricechart .xlab {
    text-anchor: middle;
}

.pricechart .lineThem {
    fill: none;
    stroke: var(--ink-faint);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.pricechart .dotThem {
    fill: var(--ink-faint);
}

.pricechart .valThem {
    fill: var(--ink-dim);
    font-size: 15px;
    font-weight: 600;
    text-anchor: end;
}

.pricechart .lineUs {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.pricechart .dotUs {
    fill: var(--accent);
}

.pricechart .valUs {
    fill: var(--accent-ink);
    font-size: 15px;
    font-weight: 700;
    text-anchor: end;
}

.pricechart figcaption {
    margin-block-start: 10px;
    font-size: 13px;
    color: var(--ink-faint);
    text-align: center;
}

.pricelegend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: center;
    align-items: center;
    margin-block: 14px 0;
    font-size: 14px;
    color: var(--ink-dim);
}

.pricelegend .key {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pricelegend .k {
    width: 18px;
    height: 3px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.pricelegend .k.them {
    background: var(--ink-faint);
}

.pricelegend .k.us {
    background: var(--accent);
}

.fineprint {
    max-width: 640px;
    margin: 16px auto 0;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--card-line);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-faint);
    text-align: start;
}

.disclaimer {
    margin-block-start: 18px;
    font-size: 13px;
    color: var(--ink-faint);
    max-width: 640px;
}