/**
 * The public landing page — v2
 *
 * One page, eight bands, scoped behind `.page-landing`. It is the only screen a
 * stranger sees before the product, so it has to read as the same thing the
 * sign-in card belongs to: the same teal ground and gradient wash, the same
 * cream face at the same radii, the same red action and the same 20x20 stroked
 * alphabet. Nothing here restates a component — the buttons, badges, icons and
 * the card face are the shared ones.
 *
 * WHAT CHANGED FROM v1. The page used to make every list a grid of cards: three
 * step cards, six feature cards, ten FAQ cards, a final CTA card. Twenty-odd
 * shadowed cream rectangles on one page is not emphasis, it is wallpaper, and
 * the two things that actually deserved a card — the pairing mock and the wish
 * mock, which are pictures of the product — were indistinguishable from the
 * copy around them. So the argument now runs in rules and columns on the bare
 * ground, the two mocks kept their cards, and the one claim the product rests
 * on gets a whole cream band and the largest type on the page.
 *
 * Four decisions are worth knowing before editing:
 *
 * 1. GOLD IS NOT BODY TEXT ON THIS PAGE. The page ground carries two radial
 *    washes, and where the gold wash peaks the ground lightens to roughly
 *    #2e5850. `--color-gold` measures 4.55:1 against that, which clears AA by
 *    0.05 — too thin to spend on an eyebrow, and it fails outright once the
 *    gold is sitting on its own tint. So eyebrows, notes, the hero's free-and-
 *    always flag and footer links on the teal ground are cream (7.0:1 at the
 *    same worst point), and gold is kept for what it is good at: rules, the
 *    step numerals at 23px+, icons, borders and hover.
 *
 * 2. NOTHING ON THE RED BAND IS TRANSLUCENT WHITE. White on --color-red-dark is
 *    5.2:1; the same white at 86% opacity is 4.2:1 and fails. The band redefines
 *    the surface contract with full white for both text ramps rather than
 *    letting a muted paragraph land under the threshold.
 *
 * 3. LINKS ON THIS PAGE'S CREAM ARE `--color-red-deep`, NOT `--color-red-dark`.
 *    The card face is a gradient and its dark end is #f2ecdc; red-dark measures
 *    4.43:1 there, which fails. Red-deep is 6.3:1. The surface contract is
 *    redefined once, in the block below, exactly as 4-components-cards.css does
 *    it — no component is re-coloured.
 *
 * 4. THREE NEW TYPE STEPS, all display sizes this page alone needs:
 *    `--landing-display-2xl` is the hero, `--landing-quote` the claim band and
 *    `--landing-quote-sm` the plain-answers heading. Everything else resolves
 *    to a token. They live on `.page-landing` rather than `:root` because no
 *    other screen has headlines this large.
 *
 * German runs about 30% longer than English. Every headline wraps, every button
 * label wraps below 640, every name in the hero mock truncates, and no row on
 * the page is sized by its content.
 */

/* ============================================
   PAGE SCOPE AND RHYTHM

   Six custom properties drive the whole page: the measure, the gutter, the band
   height and the three display sizes. They are redefined twice, at 1024 and
   640, and nothing else in the file repeats a breakpoint for spacing.
   ============================================ */

.page-landing {
    --landing-max: 1160px;
    --landing-gutter: var(--space-10);      /* 40px */
    --landing-section-y: 6.5rem;            /* 104px */
    --landing-display-2xl: 4.75rem;         /* 76px — hero, this page only */
    --landing-h2: 3.25rem;                  /* 52px — section titles */
    --landing-quote: 4rem;                  /* 64px — the claim band */
    --landing-quote-sm: 2.75rem;            /* 44px — the plain answers */

    /* Headings take the ground they sit on. Cream on teal, ink on cream — the
       same split the surface contract makes for body text, given a name so the
       section title rule does not have to be written twice. */
    --landing-heading: var(--color-cream);

    display: flex;
    flex-direction: column;
    /* The cream bands run edge to edge; the ground behind them is the body. */
    width: 100%;
}

/*
 * Every cream surface on this page, named once, redefining the surface contract
 * for its contents exactly as 4-components-cards.css does for the shared ones.
 * A new landing surface joins this list and inherits correct text, borders and
 * links; it never picks a colour of its own.
 */
.page-landing :is(
    .landing-band-cream,
    .landing-draw-card,
    .landing-wish-card
) {
    --surface-text: var(--text-on-light);
    --surface-text-muted: var(--text-on-light-muted);
    --surface-border: var(--border-on-light);
    --surface-hover: rgba(26, 77, 77, 0.06);
    --surface-link: var(--color-red-deep);
    --surface-link-hover: var(--color-red-deep);
    --surface-success: var(--color-success);
    --surface-warning: var(--color-gold-ink);
    --surface-danger: var(--color-danger);
    --surface-info: var(--color-info);
    --landing-heading: var(--text-on-light);

    color: var(--surface-text);
}

/* A link on a cream surface is underlined, as it is inside every card in the
   product. Hover thickens the rule rather than lightening the colour, because
   there is no redder red that still clears AA on this face. */
.page-landing :is(
    .landing-band-cream,
    .landing-draw-card,
    .landing-wish-card
) a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-landing :is(
    .landing-band-cream,
    .landing-draw-card,
    .landing-wish-card
) a:not(.btn):hover {
    text-decoration-thickness: 2px;
}

.landing-section {
    position: relative;
    padding-block: var(--landing-section-y);
}

.landing-inner {
    width: 100%;
    max-width: var(--landing-max);
    margin-inline: auto;
    padding-inline: var(--landing-gutter);
}

/*
 * A cream band is full-bleed: the teal ground stops, the cream starts, and the
 * measure inside it is the same as everywhere else. It uses --color-canvas, the
 * dense-surface tint, rather than the card gradient — a gradient stretched over
 * 1440px reads as a mistake.
 */
.landing-band-cream {
    background: var(--color-canvas);
}

/* ============================================
   SECTION HEAD

   Eyebrow, title, lede. Left-aligned on every band and at every width, because
   every other screen in the product is, and a centred column here would be the
   one place the page stopped feeling like the app it sells.
   ============================================ */

/*
 * The eyebrow carries a short rule before it. On teal that rule is gold; on
 * cream it is the accent red — each surface's accent, and in both cases a
 * graphic rather than text, which is the only way either colour is allowed to
 * appear at this size.
 */
.landing-eyebrow {
    display: block;
    margin-bottom: var(--space-5);
    color: var(--color-cream);
}

.landing-eyebrow::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 2px;
    margin-right: var(--space-3);
    vertical-align: 0.3em;
    background: var(--color-gold);
}

.page-landing .landing-band-cream .landing-eyebrow {
    color: var(--color-gold-ink);
}

.page-landing .landing-band-cream .landing-eyebrow::before {
    background: var(--color-red);
}

.landing-section-title {
    max-width: 18ch;
    margin-bottom: var(--space-5);
    color: var(--landing-heading);
    font-family: var(--font-display);
    font-size: var(--landing-h2);
    font-weight: var(--font-weight-normal);
    letter-spacing: -0.6px;
    line-height: var(--line-height-display);
    text-wrap: balance;
}

.landing-section-lede {
    max-width: 50ch;
    color: var(--surface-text-muted);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
}

/* ============================================
   TOP BAR

   Solid rather than translucent: the ground behind it is a texture and two
   washes, and content sliding under a blurred bar reads as a rendering fault.
   It sticks, so the one action the page is asking for is never more than a
   thumb away.
   ============================================ */

.landing-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-teal-panel);
    border-bottom: 1px solid var(--border-on-dark);
}

.landing-topbar-inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    max-width: var(--landing-max);
    min-height: 64px;
    margin-inline: auto;
    padding-inline: var(--landing-gutter);
    padding-block: var(--space-2);
}

/*
 * Prefixed with .page-landing so these actually win: 2-base.css paints every
 * anchor with `a:not(.btn)`, which is one class and one element, and a bare
 * `.landing-wordmark` is one class and loses. The wordmark and the section
 * links were rendering gold because of it — legible on the solid panel, but not
 * what the rule below says, and a rule that does not do what it says is the
 * kind of thing the next person spends an afternoon on.
 */
.page-landing .landing-wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    color: var(--color-cream);
}

.page-landing .landing-wordmark:hover {
    color: var(--color-cream);
}

.landing-wordmark img {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.landing-wordmark-text {
    font-family: var(--font-display);
    font-size: var(--display-sm);
    letter-spacing: var(--tracking-display);
    line-height: 1;
    white-space: nowrap;
}

.landing-topbar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-inline-start: var(--space-4);
}

.page-landing .landing-topbar-link {
    color: var(--color-cream);
    font-size: var(--font-size-base);
    white-space: nowrap;
}

.page-landing .landing-topbar-link:hover {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.landing-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-inline-start: auto;
}

/*
 * Sign in is a text link rather than a second button. Two buttons in a 64px bar
 * make the reader choose between them, and the page has one thing to ask.
 */
.page-landing .landing-topbar-signin {
    color: var(--color-cream);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.page-landing .landing-topbar-signin:hover {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ============================================
   HERO

   Two columns at 1440: the argument on the left, one picture of the product on
   the right. The picture is a real pairing list rather than an illustration,
   because what this page has to explain is that somebody draws names and nobody
   sees the result.
   ============================================ */

.landing-hero {
    padding-top: var(--space-12);
}

.landing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--space-16) calc(var(--space-16) + var(--space-2));
}

/* The flag and the kicker share a line and wrap together on a phone. */
.landing-hero-flags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
}

/*
 * "Free, always", as a bordered pill on its own tint. The text is cream, not
 * gold: gold on a gold tint over the teal ground measures 3.5:1, which is the
 * exact trap decision 1 above exists to keep the page out of.
 */
.landing-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 13px 5px 10px;
    border: 1px solid rgba(225, 193, 110, 0.55);   /* --color-gold, as a border */
    border-radius: var(--radius-full);
    background: var(--color-warning-tint);
    color: var(--color-cream);
    font-size: 0.71875rem;   /* 11.5px — the eyebrow step */
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.landing-flag .icon {
    flex: 0 0 auto;
    color: var(--color-gold);
}

/* The kicker is the phrase somebody typed into a search box, kept as text
   rather than folded into the headline. It takes no rule: the flag beside it
   is already the graphic on that line. */
.landing-hero-kicker {
    color: var(--color-cream);
}

.landing-hero-title {
    margin-bottom: var(--space-6);
    color: var(--color-cream);
    font-family: var(--font-display);
    font-size: var(--landing-display-2xl);
    font-weight: var(--font-weight-normal);
    letter-spacing: -1px;
    line-height: 1;
    text-wrap: balance;
}

.landing-hero-lede {
    max-width: 48ch;
    color: var(--text-on-dark-muted);
    font-size: 1.25rem;   /* 20px — one step above the section ledes */
    line-height: 1.55;
    text-wrap: pretty;
}

.landing-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

/*
 * The quiet half of the hero pair. It was a second large button in v1, which
 * gave a reader two equally loud things to press and made the red one mean
 * less. An arrow says "further down this page" without competing.
 */
.page-landing .landing-cta-quiet {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-cream);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.page-landing .landing-cta-quiet:hover {
    color: var(--color-gold);
}

.page-landing .landing-cta-quiet .icon {
    flex: 0 0 auto;
    transition: transform var(--duration-fast) var(--easing);
}

.page-landing .landing-cta-quiet:hover .icon {
    transform: translateX(3px);
}

.landing-hero-note {
    max-width: 46ch;
    margin-top: var(--space-6);
    color: var(--text-on-dark-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* --- the pairing mock --------------------------------------------------- */

.landing-hero-visual {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/*
 * One clay render, resting on the card's top edge. It is in normal flow with a
 * negative bottom margin rather than positioned absolutely: an absolute render
 * over this card covered the status pill in its corner, and a decoration that
 * can cover a live element is a decoration that will, on some string length,
 * in some language, that nobody screenshotted.
 */
.landing-hero-ornament {
    width: 72px;
    height: auto;
    margin-left: var(--space-6);
    margin-bottom: -10px;
    pointer-events: none;
    user-select: none;
}

.landing-draw-card {
    align-self: stretch;
    padding: var(--space-6);
    background: var(--card-face);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
}

.landing-draw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-on-light-hairline);
}

.landing-draw-title {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    letter-spacing: var(--tracking-display);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-draw-list {
    display: flex;
    flex-direction: column;
}

/*
 * Four columns: face, giver, arrow, receiver. Both names are min-width 0 and
 * truncate, so a German full name lengthens the ellipsis rather than the card.
 */
.landing-draw-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 20px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border-on-light-hairline);
    /* The three rows deal in, once, on load. `both` so a delayed row is not
       painted at full opacity and then snatched back to the start. */
    animation: fadeInUp var(--duration-slow) var(--easing) both;
}

.landing-draw-row:nth-child(2) {
    animation-delay: 180ms;
}

.landing-draw-row:nth-child(3) {
    animation-delay: 360ms;
}

.landing-draw-row:last-child {
    border-bottom: none;
}

.landing-draw-face {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    color: var(--color-cream);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
}

.landing-draw-face-0 { background: var(--avatar-tone-0); }
.landing-draw-face-1 { background: var(--avatar-tone-1); }
.landing-draw-face-2 { background: var(--avatar-tone-2); }

.landing-draw-name,
.landing-draw-target {
    min-width: 0;
    overflow: hidden;
    font-size: var(--font-size-base);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-draw-name {
    font-weight: var(--font-weight-semibold);
}

.landing-draw-target {
    color: var(--surface-text-muted);
}

.landing-draw-arrow {
    display: grid;
    place-items: center;
    color: var(--color-gold-ink);
}

/* The third row is the point of the picture: the pairing exists and is not
   readable. A tint and a lock, not a blur — a blur photographs as a bug. */
.landing-draw-sealed {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-warning-tint);
    color: var(--color-gold-ink);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
}

.landing-draw-sealed .icon {
    flex: 0 0 auto;
}

.landing-draw-foot {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-on-light-hairline);
    color: var(--surface-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* ============================================
   HOW IT WORKS — THE BLEEDING BAND

   Copy in a 440px rail on the measure, and one capture of the running product
   running off the right edge of the page. A picture of a wide screen shown
   whole inside a 560px column is a thumbnail, and a thumbnail proves nothing;
   this one is shown at the size where its own text can be read, and the section
   clips whatever does not fit. Nothing here can make the body scroll sideways.
   ============================================ */

.landing-bleed {
    overflow: hidden;
    border-top: 1px solid var(--border-on-dark);
}

.landing-bleed-grid {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-16);
}

/*
 * The steps: a numeral, a title and a line, separated by rules rather than made
 * into three cards. The rule above each one and one under the last closes the
 * list without a box around it.
 */
.landing-steps {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-10);
}

.landing-step {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--space-5);
    padding-block: var(--space-5);
    border-top: 1px solid var(--border-on-dark);
}

.landing-step:last-child {
    border-bottom: 1px solid var(--border-on-dark);
}

/* 28px serif: gold is legible here, and this is the size decision 1 keeps it
   for. It is aria-hidden in the markup — the <ol> carries the sequence. */
.landing-step-number {
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 1.75rem;   /* 28px */
    line-height: var(--line-height-tight);
}

.landing-step-title {
    margin-bottom: var(--space-1);
    color: var(--color-cream);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: normal;
    line-height: var(--line-height-tight);
}

.landing-step-text {
    color: var(--surface-text-muted);
    line-height: var(--line-height-normal);
}

/* ============================================
   PRODUCT SCREENSHOTS

   Real screens, captured from the running application against seeded data. The
   image carries its own intrinsic size so it reserves its space before it loads
   and cannot shift the section under it.
   ============================================ */

.landing-shot {
    margin: 0;
}

.landing-shot-frame {
    display: block;
    /*
     * 145% of a column that is itself a fraction of the measure: the picture
     * starts on the grid and ends past the edge of the page at every width this
     * rule applies to, so the square corner where it is cut is never on screen.
     * `object-fit:cover` with a top-left origin means the crop takes the bottom
     * of the screen rather than scaling the whole thing down — the app's own
     * text stays at a readable size, which is the entire reason a screenshot is
     * here.
     */
    width: 145%;
    max-width: none;
    height: 600px;
    object-fit: cover;
    object-position: top left;
    border: 1px solid var(--border-on-dark);
    border-right: 0;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.landing-shot-caption {
    margin-top: var(--space-5);
    max-width: 52ch;
    color: var(--text-on-dark-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* ============================================
   THE CLAIM

   One sentence, one paragraph of evidence, a whole band. This is the thing the
   product is for, and in v1 it was the first of six feature cards — which is
   precisely where a reader's eye is moving fastest.
   ============================================ */

.landing-claim {
    overflow: hidden;
    padding-block: 7.5rem;   /* 120px — the one band that is taller than the rest */
}

.landing-claim-ornament {
    position: absolute;
    bottom: -40px;
    left: -56px;
    width: 200px;
    height: auto;
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.landing-claim-quote {
    max-width: 20ch;
    color: var(--landing-heading);
    font-family: var(--font-display);
    font-size: var(--landing-quote);
    font-weight: var(--font-weight-normal);
    letter-spacing: -0.8px;
    line-height: 1.04;
    text-wrap: balance;
}

/* The same object one step down, for the band that has a list under it. */
.landing-claim-quote-sm {
    max-width: 24ch;
    font-size: var(--landing-quote-sm);
    letter-spacing: -0.5px;
    line-height: var(--line-height-tight);
}

.landing-claim-body {
    max-width: 52ch;
    margin-top: var(--space-8);
    color: var(--surface-text-muted);
    font-size: var(--font-size-md);
    line-height: 1.65;
}

/* ============================================
   FEATURES

   Three columns of rules, not a grid of cards. Every cell takes a rule above
   it, and the cells on the last row take one below, so the block closes.
   ============================================ */

.landing-features-eyebrow {
    margin-bottom: var(--space-12);
}

.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-16);
}

.landing-feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block: var(--space-8);
    border-top: 1px solid var(--border-on-dark);
}

/* The last row, at three columns. The count is restated at each breakpoint
   below, because "the last row" is a different set of cells at each one. */
.landing-feature:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--border-on-dark);
}

/* A 22px stroked glyph is a graphic, not text, so gold is free to be gold. */
.landing-feature-icon {
    display: grid;
    place-items: center;
    color: var(--color-gold);
}

.landing-feature-title {
    color: var(--color-cream);
    font-family: var(--font-display);
    font-size: var(--display-sm);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--tracking-display);
    line-height: var(--line-height-tight);
}

.landing-feature-text {
    color: var(--surface-text-muted);
    line-height: var(--line-height-normal);
}

/* ============================================
   LANGUAGES

   Not a section any more, a row of chips under the card that claims five
   languages. Its entries are real links — the URL scheme never redirects by
   Accept-Language, so this list is the only way somebody reaches their own
   language — which is why the anchor gets the chip rather than a span inside it.
   ============================================ */

.landing-language-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-10);
}

.page-landing .landing-language-list a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-full);
    color: var(--text-on-dark);
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
}

.page-landing .landing-language-list a:hover {
    background: var(--surface-hover);
    color: var(--text-on-dark);
}

/* The language you are already reading is stated, not just highlighted. */
.page-landing .landing-language-list a[aria-current='page'] {
    border-color: var(--color-gold);
    color: var(--color-cream);
    font-weight: var(--font-weight-semibold);
}

/* ============================================
   FOR YOUR GUESTS

   Copy on the left, one mock of what a participant actually touches on the
   right, on the cream band so the page alternates ground.
   ============================================ */

.landing-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    align-items: center;
    gap: var(--space-16) calc(var(--space-16) + var(--space-2));
}

/* --- the wishlist mock --------------------------------------------------- */

.landing-wish-card {
    padding: var(--space-6);
    background: var(--color-card);
    border-radius: var(--radius-card);
    box-shadow: 0 18px 44px rgba(13, 59, 46, 0.14);
}

.landing-wish-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-on-light-hairline);
}

.landing-wish-head .landing-draw-face {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
}

.landing-wish-owner {
    min-width: 0;
    overflow: hidden;
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* text-overflow does not inherit, so the caption asks for its own ellipsis
   rather than being silently cut by the owner's overflow:hidden. */
.landing-wish-caption {
    display: block;
    overflow: hidden;
    color: var(--surface-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-wish-list {
    display: flex;
    flex-direction: column;
}

.landing-wish-item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border-on-light-hairline);
    line-height: var(--line-height-normal);
}

.landing-wish-item:last-child {
    border-bottom: none;
}

.landing-wish-item::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-gold);
    transform: translateY(-2px);
}

.landing-wish-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    min-width: 0;
    color: var(--surface-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.landing-wish-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   PLAINLY

   Four answers in two columns, under a heading that says why they are worded
   the way they are. Two of them are admissions rather than promises.
   ============================================ */

.landing-assurances {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-16);
    margin-top: var(--space-12);
}

.landing-assurance {
    padding-block: var(--space-6);
    border-top: 1px solid var(--border-on-dark);
}

.landing-assurance:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--border-on-dark);
}

.landing-assurance-title {
    margin-bottom: var(--space-2);
    color: var(--color-cream);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: normal;
    line-height: var(--line-height-tight);
}

.landing-assurance-text {
    max-width: 48ch;
    color: var(--surface-text-muted);
    line-height: var(--line-height-normal);
}

/* ============================================
   FAQ

   Native <details>, in a two-column band: the heading holds the left rail and
   the questions run down the right. The chevron turning is the whole animation
   budget of this section — it is feedback for a press, it lasts
   --duration-fast, and it collapses to nothing under prefers-reduced-motion
   with the rest of the durations.
   ============================================ */

.landing-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--space-16) calc(var(--space-16) + var(--space-2));
}

.landing-faq-head .landing-section-title {
    margin-bottom: 0;
    font-size: var(--landing-quote-sm);
    letter-spacing: -0.5px;
}

.landing-faq {
    display: flex;
    flex-direction: column;
}

.landing-faq > li {
    border-top: 1px solid var(--border-on-dark);
}

.landing-faq > li:last-child {
    border-bottom: 1px solid var(--border-on-dark);
}

.landing-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-6);
    cursor: pointer;
    color: var(--color-cream);
    font-family: var(--font-display);
    font-size: 1.5rem;   /* 24px */
    letter-spacing: var(--tracking-display);
    line-height: var(--line-height-tight);
    list-style: none;
}

.landing-faq-question::-webkit-details-marker {
    display: none;
}

.landing-faq-question::marker {
    content: '';
}

.landing-faq-question:hover {
    color: var(--color-gold);
}

.landing-faq-chevron {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--color-gold);
    transition: transform var(--duration-fast) var(--easing);
}

.landing-faq-item[open] .landing-faq-chevron {
    transform: rotate(180deg);
}

.landing-faq-answer {
    max-width: 64ch;
    padding-bottom: var(--space-8);
    color: var(--surface-text-muted);
    font-size: var(--font-size-md);
    line-height: 1.65;
}

.landing-faq-answer p + p {
    margin-top: var(--space-3);
}

/* ============================================
   FINAL CALL TO ACTION

   A full-bleed red band rather than a card in the middle of the page. The
   surface contract is redefined for it, and both text ramps are full white:
   white on --color-red-dark is 5.2:1 and the same white at 86% is 4.2:1, so
   there is no muted step available here that clears AA.
   ============================================ */

.landing-band-red {
    --surface-text: var(--text-on-dark);
    --surface-text-muted: var(--text-on-dark);
    --surface-link: var(--text-on-dark);
    --surface-link-hover: var(--text-on-dark);
    --surface-border: rgba(255, 255, 255, 0.32);

    position: relative;
    overflow: hidden;
    padding-block: 7rem;   /* 112px */
    background: var(--color-red-dark);
    color: var(--surface-text);
}

.landing-final-ornament {
    position: absolute;
    top: -24px;
    right: 9%;
    width: 72px;
    height: auto;
    opacity: 0.65;
    pointer-events: none;
    user-select: none;
}

.landing-final-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-16) var(--space-12);
}

.landing-final-eyebrow {
    display: block;
    margin-bottom: var(--space-5);
    color: var(--surface-text);
}

.landing-final-title {
    max-width: 14ch;
    margin-bottom: var(--space-5);
    font-family: var(--font-display);
    font-size: var(--landing-quote);
    font-weight: var(--font-weight-normal);
    letter-spacing: -0.8px;
    line-height: 1;
}

.landing-final-lede {
    max-width: 44ch;
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
}

.landing-final-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

/*
 * The one button on the page that is not red, because it is standing on red.
 * Cream face, ink label — the same pair the sign-in card uses, which is the
 * page this button leads to.
 */
.page-landing .landing-final-button {
    background: var(--color-cream);
    color: var(--color-ink);
}

.page-landing .landing-final-button:hover {
    background: var(--color-white);
    color: var(--color-ink);
}

.page-landing .landing-final-signin {
    color: var(--surface-link);
    font-size: var(--font-size-base);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================
   FOOTER
   ============================================ */

.landing-footer {
    border-top: 1px solid var(--border-on-dark);
    padding-block: var(--space-12) var(--space-8);
}

.landing-footer-grid {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.landing-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
}

.landing-footer-blurb {
    max-width: 40ch;
    color: var(--text-on-dark-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.landing-footer-langs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/*
 * Cream rather than the surface link gold: at 13px on the lightest part of the
 * page's gradient wash gold measures 4.55:1, and a footer is exactly where a
 * reader is least able to spare it. Gold returns on hover, where the underline
 * is carrying the meaning anyway.
 */
.page-landing .landing-footer-langs a {
    color: var(--color-cream);
    font-size: var(--font-size-base);
}

.page-landing .landing-footer-langs a:hover {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
 * The language you are reading.
 *
 * The list named five languages and marked none of them, so it answered "what
 * else is there" but not "where am I" — on the page whose whole argument is
 * that everyone sees their own language. Weight and the gold carry it, and
 * aria-current carries it to a screen reader; it stays a link, because
 * following it is a legitimate way to reload the page you are on.
 */
.page-landing .landing-footer-langs a.is-current {
    color: var(--color-gold);
    font-weight: var(--font-weight-semibold);
}

.landing-footer-base {
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-on-dark);
    color: var(--text-on-dark-muted);
    font-size: var(--font-size-sm);
}

/* ============================================
   1024 AND BELOW

   Every two-column band becomes one column, the bleeding screenshot stops
   bleeding and is shown whole, and the feature rules close after two cells
   instead of three.
   ============================================ */

@media (max-width: 1024px) {
    .page-landing {
        --landing-gutter: var(--space-8);
        --landing-section-y: 4.5rem;
        --landing-display-2xl: 3rem;        /* 48px */
        --landing-h2: var(--display-md);    /* 34px */
        --landing-quote: var(--display-md); /* 34px */
        --landing-quote-sm: 1.75rem;        /* 28px */
    }

    .landing-topbar-nav {
        display: none;
    }

    .landing-hero-grid,
    .landing-bleed-grid,
    .landing-split,
    .landing-faq-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: var(--space-10);
    }

    .landing-section-title,
    .landing-claim-quote {
        max-width: 26ch;
    }

    .landing-hero-visual {
        width: 100%;
        max-width: 520px;
    }

    .landing-split-visual .landing-wish-card {
        max-width: 480px;
    }

    /* Shown whole, inside the measure: there is no page edge left to run off. */
    .landing-shot-frame {
        width: 100%;
        height: auto;
        border-right: 1px solid var(--border-on-dark);
        border-radius: var(--radius-card);
    }

    .landing-claim {
        padding-block: 5rem;
    }

    .landing-claim-ornament {
        width: 150px;
        left: -40px;
    }

    .landing-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-10);
    }

    .landing-feature:nth-last-child(-n + 3) {
        border-bottom: none;
    }

    .landing-feature:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--border-on-dark);
    }

    .landing-assurances {
        column-gap: var(--space-10);
    }

    .landing-band-red {
        padding-block: 5rem;
    }

    .landing-final-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: var(--space-8);
    }
}

/* ============================================
   640 AND BELOW

   One column throughout, buttons full width, and every horizontal pair that
   could be squeezed by a 30% longer German string is allowed to stack.
   ============================================ */

@media (max-width: 640px) {
    .page-landing {
        --landing-gutter: var(--space-4);
        --landing-section-y: 3.5rem;
        --landing-display-2xl: 2.375rem;    /* 38px */
        --landing-h2: 1.75rem;              /* 28px */
        --landing-quote: 1.875rem;          /* 30px */
        --landing-quote-sm: 1.625rem;       /* 26px */
    }

    /*
     * The bar fits a wordmark, a text link and one button at 390 with German
     * labels, and not much more. Wrapping is the safety net: a label longer
     * than the one measured pushes the actions onto a second line and makes the
     * bar taller, rather than pushing the page sideways.
     */
    .landing-topbar-inner {
        flex-wrap: wrap;
        min-height: 56px;
        gap: var(--space-2) var(--space-3);
    }

    .landing-wordmark img {
        width: 30px;
        height: 30px;
    }

    .landing-wordmark-text {
        font-size: var(--font-size-lg);
    }

    .landing-hero {
        padding-top: var(--space-8);
    }

    .landing-hero-title,
    .landing-section-title,
    .landing-claim-quote,
    .landing-final-title {
        max-width: none;
    }

    .landing-hero-lede {
        font-size: var(--font-size-md);
    }

    .landing-cta-row {
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-4);
    }

    .landing-cta-row .btn {
        width: 100%;
    }

    .landing-hero-visual {
        max-width: none;
    }

    .landing-hero-ornament {
        margin-left: var(--space-3);
        width: 60px;
    }

    .landing-draw-card {
        padding: var(--space-5);
    }

    /* The face, the giver and the receiver no longer fit one 358px line with
       German names in them. The arrow turns down the page and the pair becomes
       two rows, which is what the row was saying anyway. */
    .landing-draw-row {
        grid-template-columns: 32px minmax(0, 1fr);
        row-gap: var(--space-2);
    }

    .landing-draw-arrow {
        grid-column: 1;
        justify-self: center;
        transform: rotate(90deg);
    }

    .landing-draw-target,
    .landing-draw-sealed-cell {
        grid-column: 2;
    }

    .landing-step {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: var(--space-4);
        padding-block: var(--space-4);
    }

    .landing-step-number {
        font-size: var(--font-size-lg);
    }

    .landing-claim {
        padding-block: var(--landing-section-y);
    }

    .landing-claim-ornament {
        width: 110px;
        bottom: -20px;
        left: -28px;
    }

    .landing-features-eyebrow {
        margin-bottom: var(--space-8);
    }

    .landing-feature-grid,
    .landing-assurances {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-feature {
        padding-block: var(--space-6);
    }

    .landing-feature:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    .landing-feature:last-child,
    .landing-assurance:last-child {
        border-bottom: 1px solid var(--border-on-dark);
    }

    .landing-assurance:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    .landing-faq-question {
        gap: var(--space-4);
        padding-block: var(--space-5);
        font-size: var(--font-size-lg);
    }

    .landing-faq-answer {
        padding-bottom: var(--space-6);
        font-size: var(--font-size-base);
    }

    .landing-final-ornament {
        right: 6%;
        width: 56px;
    }

    .landing-final-actions {
        align-self: stretch;
    }

    .page-landing .landing-final-button {
        width: 100%;
    }

    .landing-footer {
        padding-block: var(--space-10) var(--space-8);
    }

    .landing-footer-grid {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-6);
    }
}

/*
 * A reader who has asked for less motion gets the chevron's state and the
 * pairing rows, just not the movement. The durations collapse in
 * 1-variables.css, but an animation-delay does not, so the deal-in is turned
 * off here rather than left to run at zero duration three hundred
 * milliseconds late.
 */
@media (prefers-reduced-motion: reduce) {
    .landing-draw-row {
        animation: none;
    }

    .landing-faq-chevron,
    .page-landing .landing-cta-quiet .icon {
        transition: none;
    }
}