/* The public marketing pages — the cinematic face of the same product UI as
   Create, not a separate template.

   Everything a visitor carries from here into Create comes from `brand.css`,
   which these pages load first: the fonts (Fraunces for display, the system
   sans for everything read or acted on), the palette, the radii, the lift, the
   pill buttons, the eyebrow and the focus ring. The only values set below are
   the creator's own canvas overrides (`.creator-page` in `creator.css`), so
   Landing and Create stand on the same near-black plum ground. This file lays
   pages out; it does not define a second brand. */

:root {
  --night: #0a0712;
  --surface: #140e21;
  --surface-sunken: #0d0918;
  --display: var(--display-fraunces);
  --public-shell: 1200px;
  --gutter: 24px;
  --gold-hairline: rgb(224 183 116 / 42%);
  --gold-rim: 0 0 0 1px rgb(224 183 116 / 12%);
}

html { scroll-behavior: smooth; }
img { display: block; }
/* Only the anchors that carry no class of their own — the footer's links and a
   support address set inside running text — take the surrounding ink. Every
   classed link (buttons, text links, nav, locale) keeps its own colour. */
.public-footer a, main a[href^="mailto:"]:not([class]) { color: inherit; }
.public-shell { width: min(calc(100% - var(--gutter) * 2), var(--public-shell)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Display sizes are larger than the creator's — this is marketing — but the
   face, weight and tracking are the creator's own. */
h1 { margin: 20px 0; font-size: clamp(2.7rem, 5.2vw, 4.5rem); letter-spacing: -0.015em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; text-wrap: balance; }
h3 { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.25; }
p { margin: 0; }
.public-lede { color: var(--ink-dim); max-width: 54ch; font-size: clamp(1.04rem, 1.5vw, 1.2rem); }
/* The editorial eyebrow, as `brand.css` draws it: a short rose rule and the
   label beside it, in its own casing. No border, no fill, no pill. */
.public-eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin: 0; color: var(--ink-dim); font-size: .86rem; letter-spacing: .02em; }
.public-eyebrow::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--rose); }

/* Native disclosures: the FAQ keeps a quiet chevron; the language control uses
   the creator's caret. */
.public-header summary, .faq-item summary { list-style: none; cursor: pointer; }
.public-header summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--gold-dim); border-bottom: 1.5px solid var(--gold-dim); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.faq-item[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

/* --- header: the creator's `.site-header`, with navigation added ------------ */

.public-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line-soft); background: rgb(10 7 18 / 88%); backdrop-filter: blur(12px); }
.public-header-inner { min-height: 4.25rem; display: flex; align-items: center; gap: 26px; }
.public-wordmark { min-height: var(--touch); margin-right: auto; }
.public-nav { display: flex; align-items: center; gap: 26px; white-space: nowrap; }
.public-nav a { display: inline-flex; min-height: var(--touch); align-items: center; color: var(--ink-dim); font-size: .92rem; text-decoration: none; }
.public-nav a:hover { color: var(--ink); }
.public-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline 2px var(--rose); text-underline-offset: 9px; }
/* The primary action, at the height of the language pill beside it. */
.public-nav-cta { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .5rem 1.15rem; border-radius: 999px; background: linear-gradient(180deg, var(--rose-bright), var(--rose-deep)); color: var(--rose-ink); box-shadow: var(--lift-sm); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease; }
.public-nav-cta:hover { background: linear-gradient(180deg, #f68fa3, var(--rose)); }

/* The language control: the creator's `.lang-trigger` and `.lang-menu`, drawn
   as a native disclosure so these pages need no script. */
.locale-menu { position: relative; }
.locale-menu summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: .34rem .75rem .34rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-sunken); color: var(--ink-dim); font-size: .82rem; line-height: 1.1; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.locale-menu summary:hover { border-color: var(--line-strong); color: var(--ink); }
.locale-menu summary::after { content: '▾'; color: var(--ink-faint); font-size: .7em; line-height: 1; transition: transform 120ms ease; }
.locale-menu details[open] > summary::after { transform: rotate(180deg); }
.locale-flag { font-size: 1em; line-height: 1; }
.locale-menu ul { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: max(10rem, 100%); margin: 0; padding: 4px; list-style: none; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--lift); }
.locale-menu a { display: flex; align-items: center; gap: .5rem; min-height: var(--touch); padding: 0 .7rem; border-radius: var(--radius-sm); color: var(--ink-dim); font-size: .88rem; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.locale-menu a:hover { background: var(--wash-ink); color: var(--ink); }

.public-menu { display: none; }
.public-menu > summary { display: grid; place-items: center; width: var(--touch); height: var(--touch); border: 1px solid var(--line); border-radius: 999px; background: var(--surface-sunken); }
.public-menu > summary:hover { border-color: var(--line-strong); }
.public-menu-bars, .public-menu-bars::before, .public-menu-bars::after { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform .2s ease, background-color .2s ease; }
.public-menu-bars { position: relative; }
.public-menu-bars::before, .public-menu-bars::after { content: ''; position: absolute; left: 0; }
.public-menu-bars::before { top: -5px; }
.public-menu-bars::after { top: 5px; }
.public-menu[open] .public-menu-bars { background: transparent; }
.public-menu[open] .public-menu-bars::before { transform: translateY(5px) rotate(45deg); }
.public-menu[open] .public-menu-bars::after { transform: translateY(-5px) rotate(-45deg); }
.public-menu-panel { position: absolute; top: 100%; left: 0; right: 0; display: grid; gap: 18px; padding: 4px var(--gutter) 22px; border-bottom: 1px solid var(--line-soft); background: var(--surface-sunken); box-shadow: var(--lift); }
.public-menu-nav { display: grid; }
.public-menu-nav a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-family: var(--display); font-size: 1.22rem; text-decoration: none; }
.public-menu-nav a[aria-current="page"] { color: var(--rose-bright); }
.public-menu-panel .public-button { width: 100%; }

/* --- footer: the creator's `.site-footer` ----------------------------------- */

.public-footer { border-top: 1px solid var(--line-soft); }
.public-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: 40px; color: var(--ink-faint); font-size: .86rem; }
.public-footer-brand { display: grid; gap: 12px; max-width: 46ch; }
.public-footer-brand .wordmark-art { --wordmark-height: 1.7rem; opacity: .9; }
.public-footer-inner nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.public-footer-inner nav a { display: inline-flex; min-height: var(--touch); align-items: center; text-decoration: none; }
.public-footer-inner a:hover { color: var(--ink); }
.public-footer-social-row { margin: 0 0 0 -11px; }
.public-footer-social { display: inline-flex; width: var(--touch); height: var(--touch); align-items: center; justify-content: center; }

/* --- actions: `.btn-primary`, `.btn-ghost` and a plain text link ------------- */

.public-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.public-button, .public-button-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .75rem 1.7rem; border: 1px solid transparent; border-radius: 999px; font-size: .98rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; }
.public-button { background: linear-gradient(180deg, var(--rose-bright), var(--rose-deep)); color: var(--rose-ink); box-shadow: var(--lift-sm); }
.public-button:hover { background: linear-gradient(180deg, #f68fa3, var(--rose)); }
.public-button-ghost { border-color: var(--line-strong); background: var(--wash-ink); color: var(--ink); }
.public-button-ghost:hover { border-color: var(--rose); color: var(--rose-bright); }
.public-button:active, .public-button-ghost:active { transform: translateY(1px); }
.public-text-link { color: var(--ink); font-weight: 600; text-decoration: underline 1px var(--gold-hairline); text-underline-offset: 6px; }
.public-text-link:hover { color: var(--rose-bright); text-decoration-color: var(--rose); }
.public-inline-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.public-inline-links a, .public-actions .public-text-link, .support-email { display: inline-flex; min-height: var(--touch); align-items: center; }

/* --- shared primitives ------------------------------------------------------ */

.public-section { padding-block: clamp(64px, 7.5vw, 104px); }
/* Consecutive marketing sections share one gap rather than stacking two. */
.public-section:is(.home-occasion, .home-process, .home-pricing, .home-trust, .home-faq, .story-personal, .story-occasions, .hiw-tiers, .hiw-faq) { padding-top: 0; }
.section-head { max-width: 780px; margin: 0 auto; text-align: center; }
.section-head > p { color: var(--ink-dim); font-size: 1.1rem; margin: 20px auto 0; max-width: 62ch; }
.section-actions { justify-content: center; margin-top: 40px; }

/* The creator's `.card` / `.plate` surface, which every card here is cut from. */
.home-facts ul, .trust-cards li, .info-card, .journey-step-card, .tier-card, .story-chapter, .occasion-card, .story-touches {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--lift);
}

/* The creator's circled numeral (`.step-counter .numeral`), at marketing size. */
.process-step-number, .journey-step-marker, .story-chapter-number { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--rose-deep); border-radius: 999px; background: radial-gradient(circle, rgb(228 101 127 / 16%), var(--night) 72%); color: var(--rose-bright); font-family: var(--display); font-size: 1.35rem; box-shadow: 0 0 0 6px var(--night); }

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

.public-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(580px, calc(100vh - 68px), 780px); padding-block: clamp(64px, 8vw, 104px) clamp(120px, 12vw, 170px); }
.public-hero-inner { position: relative; }
.public-hero-copy { max-width: 620px; }
.public-hero-copy h1, .public-hero-copy .public-lede { text-shadow: 0 2px 24px rgb(8 5 18 / 70%); }
/* The 404's one picture: the game's own signpost, at its authored size. */
.not-found-sign { display: block; width: 104px; height: auto; margin-block: 24px 16px; }
.public-hero-art { position: absolute; inset: 0 0 0 28%; z-index: -1; margin: 0; overflow: hidden; }
.public-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.public-hero-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, var(--night) 0%, rgb(10 7 18 / 82%) 16%, rgb(10 7 18 / 30%) 46%, rgb(10 7 18 / 4%) 72%),
  linear-gradient(0deg, var(--night) 0%, rgb(10 7 18 / 55%) 20%, rgb(10 7 18 / 0%) 46%),
  linear-gradient(180deg, rgb(10 7 18 / 45%) 0%, rgb(10 7 18 / 0%) 18%); }
.home-hero .public-hero-art img { transform: scale(1.18); transform-origin: 72% 22%; }
.public-hero-art figcaption { position: absolute; z-index: 1; right: max(24px, calc((100vw - var(--public-shell)) / 2)); bottom: clamp(150px, 14vw, 190px); max-width: 34ch; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgb(10 7 18 / 66%); color: var(--ink-dim); font-size: .8rem; line-height: 1.4; }

/* --- home ------------------------------------------------------------------- */

.home-facts { position: relative; z-index: 2; margin-top: clamp(-128px, -9vw, -88px); }
.home-facts ul { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--radius-lg); backdrop-filter: blur(8px); }
.home-facts li { padding: 24px 22px; }
.home-facts li + li { border-left: 1px solid var(--line-soft); }
.home-facts h3 { font-size: 1.16rem; }
.home-facts p { color: var(--ink-faint); font-size: .92rem; line-height: 1.55; }

.section-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 7vw, 110px); align-items: start; }
.section-body { color: var(--ink-dim); font-size: 1.12rem; max-width: 64ch; }
.section-split .public-actions { margin-top: 22px; }

/* What CoupleLore is: the copy, then three pairs of "yours" and "in the game",
   each drawn from the product's own files. */
.what-intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.what-intro .public-actions { margin-top: 22px; }
.transform-cards { list-style: none; margin: clamp(40px, 5vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Fixed row heights, so "yours", "in the game" and the copy line up across all
   three cards however tall each source happens to be. */
.transform-card { display: grid; grid-template-rows: 150px 240px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--lift); }
.transform-source { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 34px 20px 22px; border-bottom: 1px solid var(--line-soft); background: var(--surface-sunken); }
/* The one mark between the two halves: the creator's circled numeral, carrying
   a caret instead of a number. */
.transform-source::after { content: '▾'; position: absolute; left: 50%; bottom: -15px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; transform: translateX(-50%); border: 1px solid var(--rose-deep); border-radius: 999px; background: var(--night); color: var(--rose-bright); font-size: .8rem; line-height: 1; }
.transform-result { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 20px 20px; background: radial-gradient(circle at 50% 58%, var(--wash-rose), transparent 66%); }
.transform-label { position: absolute; top: 13px; left: 16px; color: var(--ink-faint); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.transform-label-game { color: var(--gold-dim); }
.transform-photo { width: 68px; height: 68px; border: 1px solid var(--line-strong); border-radius: 999px; object-fit: cover; }
.transform-snapshot { width: 122px; height: auto; aspect-ratio: 3 / 2; border: 1px solid var(--line-strong); border-radius: 10px; object-fit: cover; }
.transform-typed { max-width: 26ch; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--night); color: var(--ink-dim); font-size: .92rem; line-height: 1.45; }
/* The embrace pose is drawn at the game's 1x frame size and shown smaller, so
   it is downscaled smoothly rather than point-sampled. */
.transform-couple { width: auto; max-width: 100%; height: 188px; filter: drop-shadow(0 14px 18px rgb(0 0 0 / 50%)); }
.transform-heads { display: flex; align-items: center; gap: 6px; }
.transform-heads img { width: 112px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 14px 18px rgb(0 0 0 / 50%)); }
.transform-frame { position: relative; width: 230px; isolation: isolate; filter: drop-shadow(0 16px 22px rgb(0 0 0 / 55%)); }
.transform-frame .memory-frame { width: 100%; height: auto; image-rendering: pixelated; }
.transform-frame .memory-photo { position: absolute; z-index: -1; top: 20.3%; left: 13.2%; width: 73.5%; height: 57.6%; object-fit: cover; }
.transform-note { position: relative; width: 190px; filter: drop-shadow(0 14px 20px rgb(0 0 0 / 50%)); }
.transform-note img { width: 100%; height: auto; }
/* The words sit on the parchment itself, tilted with the sheet. */
.transform-note-text { position: absolute; top: 28%; left: 29.5%; width: 48%; transform: rotate(-3deg); color: #5a3b30; font-family: var(--display); font-size: .72rem; line-height: 1.28; text-align: center; }
.transform-copy { padding: 22px 22px 24px; }
.transform-copy h3 { font-size: 1.14rem; }
.transform-copy p { color: var(--ink-dim); font-size: .94rem; }

/* A real couple photo leads; the same photo, hung in the castle's memory frame,
   is the in-game result. */
.couple-showcase { position: relative; max-width: 470px; margin: 40px 0 0; padding: 11px 11px 58px; }
.couple-showcase-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--gold-rim), var(--lift); }
.couple-showcase-memory { position: absolute; right: -14px; bottom: 0; width: 36%; isolation: isolate; filter: drop-shadow(0 18px 26px rgb(0 0 0 / 65%)); }
.couple-showcase-memory .memory-frame { width: 100%; height: auto; }
.couple-showcase-memory .memory-photo { position: absolute; z-index: -1; top: 20.3%; left: 13.2%; width: 73.5%; height: 57.6%; object-fit: cover; }

.scene-grid { margin-top: clamp(44px, 6vw, 72px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(230px, 25vw, 360px); gap: 20px; }
/* About's supporting note: deliberately small and subordinate to the paragraph
   it sits under, and centred because a block image ignores the section head's
   text-align. The only rule the two marketing pages needed. */
.about-note { width: min(180px, 46vw); height: auto; margin: clamp(22px, 3vw, 30px) auto 0; }
/* The atmospheric divider carries no copy, so it keeps the closing band's art
   treatment without its vertical weight. */
.about-band { padding-block: clamp(120px, 15vw, 200px); border-top: 0; }
.scene-card { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--lift); }
.scene-night, .scene-forest { grid-column: span 7; }
.scene-hall, .scene-blossom { grid-column: span 5; }
.scene-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.scene-card:hover img { transform: scale(1.035); }
.scene-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 5 18 / 88%) 0%, rgb(8 5 18 / 0%) 48%); pointer-events: none; }
.scene-card figcaption { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 18px; font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.25; }
.scene-card figcaption::before { content: ''; display: block; width: 28px; height: 2px; margin-bottom: 10px; background: var(--gold); }

/* One story, three occasions: the three finales side by side, then the words. */
.occasion-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(28px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(circle at 20% 50%, var(--wash-rose), transparent 60%), var(--surface); box-shadow: var(--gold-rim), var(--lift); }
.occasion-trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.occasion-trio figure { margin: 0; }
.occasion-trio img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.occasion-trio figcaption { margin-top: 10px; color: var(--ink-dim); font-size: .88rem; line-height: 1.35; text-align: center; }
.occasion-copy h2 { margin-top: 14px; }
.occasion-copy > p:not(.public-eyebrow) { color: var(--ink-dim); font-size: 1.08rem; margin-top: 18px; }
.occasion-copy .public-actions { margin-top: 20px; }

.process-steps { position: relative; list-style: none; margin: clamp(48px, 6vw, 68px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.process-steps::before { content: ''; position: absolute; top: 28px; left: 10%; right: 10%; border-top: 1px dashed var(--line-strong); }
.process-steps li { position: relative; display: grid; justify-items: center; gap: 16px; text-align: center; }
.process-step-title { max-width: 18ch; font-weight: 600; line-height: 1.4; }

.offer-panel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 64px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(700px 360px at 100% 0%, var(--wash-gold), transparent 60%), radial-gradient(600px 400px at 0% 100%, var(--wash-rose), transparent 60%), var(--surface); box-shadow: var(--gold-rim), var(--lift); }
.offer-copy > p:not(.offer-note) { color: var(--ink-dim); font-size: 1.08rem; margin-top: 20px; }
.offer-copy .public-actions { margin-top: 28px; }
.offer-note { margin-top: 22px; color: var(--ink-faint); font-size: .92rem; max-width: 58ch; }
.tier-cards-label { margin: 0 0 16px; color: var(--gold-dim); font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.tier-cards ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tier-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 14px 24px; border-radius: var(--radius); background: var(--surface-sunken); text-align: center; container-type: inline-size; }
/* One unbreakable line, never larger than its card can hold (D-284): the size is
   capped at what `--price-chars` characters of the display face fit in the
   card's own width (~0.58em each), so a five-character USD price keeps its
   size and a ten-character ISO-coded one stays inside its card instead of
   spilling into the next. */
.tier-card-price { font-family: var(--display); font-size: min(clamp(1.8rem, 2.8vw, 2.4rem), calc(100cqi / (var(--price-chars, 5) * 0.58))); line-height: 1; color: var(--gold); white-space: nowrap; }
.tier-card-label { font-weight: 600; line-height: 1.35; }
/* What a face option is, next to the prices it explains. */
.face-explainer { margin-top: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-sunken); }
.face-explainer h3 { font-size: 1.08rem; }
.face-explainer > p { color: var(--ink-dim); font-size: .93rem; }
.face-options-demo { margin: 16px 0 0; display: grid; gap: 8px; }
.face-options-row { display: flex; gap: 8px; }
.face-options-row img { width: 58px; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--night); image-rendering: pixelated; }
.face-options-demo figcaption { color: var(--ink-faint); font-size: .8rem; }

.trust-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.trust-intro > p { color: var(--ink-dim); font-size: 1.08rem; margin-top: 20px; }
.trust-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.trust-cards li { padding: 28px 26px; border-radius: var(--radius); }
.trust-cards h3 { margin-bottom: 12px; }
.trust-cards p { color: var(--ink-dim); font-size: .96rem; }
.trust-cards p + p { margin-top: 12px; }

/* One reading column of native disclosures; the question is the control. */
.faq-accordion { max-width: 880px; margin: clamp(36px, 5vw, 52px) auto 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 18px 8px; font-family: var(--display); font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.35; transition: color .2s ease; }
.faq-item summary:hover, .faq-item[open] > summary { color: var(--rose-bright); }
.faq-answer { padding: 0 56px 26px 8px; }
.faq-answer p { max-width: 70ch; color: var(--ink-dim); }

.public-closing { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(96px, 12vw, 164px); text-align: center; border-top: 1px solid var(--line-soft); background: radial-gradient(ellipse at 50% 0%, var(--wash-rose), transparent 60%), var(--surface-sunken); }
.public-closing h2 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); }
.public-closing p { color: var(--ink-dim); max-width: 58ch; margin: 22px auto 0; font-size: 1.08rem; }
.public-closing .public-actions { justify-content: center; }
.public-closing-art { background: var(--night); }
.public-closing-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.public-closing-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgb(10 7 18 / 50%), rgb(10 7 18 / 80%) 78%), linear-gradient(180deg, var(--night) 0%, rgb(10 7 18 / 0%) 22%, rgb(10 7 18 / 0%) 78%, var(--night) 100%); }

/* --- story ------------------------------------------------------------------- */

.story-hero .public-hero-art img { object-position: 60% 40%; }
.story-hero, .hiw-hero { min-height: clamp(540px, calc(100vh - 150px), 720px); padding-bottom: clamp(64px, 7vw, 96px); }

/* Five chapters: three across, then two — the dragon keeps its own card and no
   picture, because none is shown until the recipient meets it. */
.story-chapters { list-style: none; margin: clamp(44px, 6vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.story-chapter { grid-column: span 2; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); }
/* Chapter 4 is a text-only interlude: a full-width band between the castle and
   the finale, so it never reserves an empty picture area. The finale follows
   as a wide banner. */
.story-chapter:nth-child(4), .story-chapter:nth-child(5) { grid-column: 1 / -1; }
.story-chapter:nth-child(4) img, .story-chapter:nth-child(5) img { aspect-ratio: 3 / 1; }
.story-chapter:nth-child(4) img { object-position: 50% 75%; }
.story-chapter:nth-child(5) img { object-position: 50% 85%; }
.story-chapter img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line); }
.story-chapter-body { position: relative; display: grid; gap: 10px; padding: 26px 26px 28px; }
.story-chapter img + .story-chapter-body .story-chapter-number { margin-top: -54px; }
.story-chapter-body p { color: var(--ink-dim); }
.story-chapter-dragon { border-left: 2px solid var(--rose-deep); background: radial-gradient(circle at 0% 50%, var(--wash-rose), transparent 55%), var(--surface); }
.story-chapter-dragon .story-chapter-body { grid-template-columns: 56px minmax(0, 1fr); column-gap: 22px; row-gap: 6px; align-items: center; padding: 26px 28px; }
.story-chapter-dragon .story-chapter-number { grid-row: span 2; }
.story-chapter-dragon h3 { margin: 0; align-self: end; }
.story-chapter-dragon p { align-self: start; max-width: 70ch; }

.story-touches { list-style: none; margin: 0; padding: 8px 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-radius: var(--radius-lg); }
.story-touches li { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.story-touches li:nth-last-child(-n + 2) { border-bottom: 0; }
.story-touches h3 { font-size: 1.12rem; }
.story-touches p { color: var(--ink-dim); font-size: .95rem; }

.occasion-cards { list-style: none; margin: clamp(44px, 6vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.occasion-card { overflow: hidden; border-radius: var(--radius-lg); }
.occasion-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid var(--line); }
.occasion-card div { padding: 24px 24px 26px; }
.occasion-card p { color: var(--ink-dim); }

/* --- how it works -------------------------------------------------------------- */

.hiw-hero .public-hero-art { inset: 0 0 0 34%; }
.hiw-hero .public-hero-art img { object-position: 10% 40%; }
.journey-steps { position: relative; list-style: none; max-width: 960px; margin: clamp(48px, 6vw, 68px) auto 0; padding: 0; display: grid; gap: 18px; }
.journey-steps::before { content: ''; position: absolute; top: 28px; bottom: 28px; left: 27px; border-left: 1px dashed var(--line-strong); }
.journey-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 26px; align-items: start; }
.journey-step-card { padding: 26px 30px; border-radius: var(--radius); }
.journey-step-card p { color: var(--ink-dim); }

/* --- help (shares the shell) ----------------------------------------------------- */

.public-page-hero { max-width: var(--public-shell); padding-block: clamp(72px, 10vw, 128px); }
.public-page-hero .public-lede { max-width: 68ch; }
.help-contact, .support-sections, .help-problem { border-top: 1px solid var(--line-soft); }
.help-contact, .help-problem { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 9vw, 130px); align-items: start; }
.help-contact > div:first-child > p { color: var(--ink-dim); margin-top: 18px; }
.support-email { display: inline-block; margin-top: 24px; color: var(--rose-bright); font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 700; text-underline-offset: 5px; overflow-wrap: anywhere; }
.help-contact-note { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--lift); }
.help-contact-note h3:not(:first-child) { margin-top: 26px; }
.help-contact-note p, .help-problem div { color: var(--ink-dim); }
.help-problem div { display: grid; gap: 22px; }
.support-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 7vw; }
.support-sections article { padding: 30px 0; border-top: 1px solid var(--line-soft); }
.support-sections p { color: var(--ink-dim); }
.info-card { padding: clamp(28px, 4vw, 46px); border-radius: var(--radius-lg); }

/* --- legal ------------------------------------------------------------------------ */

.policy-page { border-top: 1px solid var(--line-soft); }
.policy-article { max-width: 860px; padding-block: clamp(56px, 9vw, 110px); }
.policy-header { padding-bottom: clamp(34px, 6vw, 62px); border-bottom: 1px solid var(--line-soft); }
/* A policy title's longest word must fit the column whole. German titles are
   single compounds ("Datenschutzerklärung", 20 letters) wider than a phone's
   column at H1 size, and hyphenation depends on a dictionary the browser may not
   have. So the size is capped at what the longest word fits — the same rule the
   price cards use for a price (`--price-chars`), from a count the renderer
   writes. Short-worded titles and every desktop width keep the ordinary H1 size;
   break-word is only a last resort below any phone we lay out for. */
.policy-header { container-type: inline-size; }
.policy-header h1 { font-size: min(clamp(2.7rem, 5.2vw, 4.5rem), calc(100cqi / (var(--title-word-chars, 1) * 0.58))); overflow-wrap: break-word; }
.policy-meta { margin-top: 16px; color: var(--ink-dim); font-size: .9rem; overflow-wrap: anywhere; }
.policy-section { padding-block: clamp(34px, 6vw, 58px); border-bottom: 1px solid var(--line-soft); }
.policy-section h2 { font-family: var(--body); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; letter-spacing: 0; line-height: 1.25; }
.policy-section p, .policy-section li { color: var(--ink-dim); overflow-wrap: anywhere; }
.policy-section p { margin-top: 18px; }
.policy-section ul { margin: 18px 0 0; padding-left: 1.2rem; }
.policy-section li + li { margin-top: 8px; }

/* --- responsive ----------------------------------------------------------------------- */

/* A long price set needs the full panel width sooner than a short one: below
   this the cards beside the copy would hold its price only at a small size. */
@media (max-width: 1280px) {
  .offer-panel:has(.tier-cards--long) { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .home-facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-facts li:nth-child(3) { border-left: 0; }
  .home-facts li:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
  .trust-layout { grid-template-columns: 1fr; }
  .story-chapters { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; }
  .story-chapter, .story-chapter:nth-child(4), .story-chapter:nth-child(5) { grid-column: auto; }
  .story-chapter:nth-child(4) img, .story-chapter:nth-child(5) img { aspect-ratio: 16 / 9; }
}

/* Below this width the bar would crowd; the header becomes the creator's own:
   wordmark and language pill, plus the menu for the extra pages. */
@media (max-width: 1000px) {
  .public-header-inner { gap: 10px; }
  .public-nav, .public-nav-cta { display: none; }
  .public-menu { display: block; }
}

@media (max-width: 900px) {
  .public-hero { min-height: 0; }
  .public-hero-art, .hiw-hero .public-hero-art { inset: 0; }
  .public-hero-art::after, .hiw-hero .public-hero-art::after { background: linear-gradient(90deg, rgb(10 7 18 / 90%) 0%, rgb(10 7 18 / 55%) 55%, rgb(10 7 18 / 30%) 100%), linear-gradient(0deg, var(--night) 0%, rgb(10 7 18 / 0%) 45%); }
  .process-steps { grid-template-columns: 1fr; gap: 14px; max-width: 520px; margin-inline: auto; }
  .process-steps::before { top: 28px; bottom: 28px; left: 27px; right: auto; border-top: 0; border-left: 1px dashed var(--line-strong); }
  .process-steps li { grid-template-columns: 56px 1fr; justify-items: start; align-items: center; gap: 20px; text-align: left; }
  .process-step-title { max-width: none; }
  .offer-panel, .occasion-feature, .section-split, .what-intro { grid-template-columns: 1fr; }
  .transform-cards { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .occasion-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .public-hero { display: block; padding-block: 0 56px; }
  .public-hero-art, .hiw-hero .public-hero-art { position: relative; inset: auto; height: clamp(230px, 64vw, 380px); margin-bottom: clamp(-96px, -18vw, -64px); }
  .public-hero-art::after, .hiw-hero .public-hero-art::after { background: linear-gradient(0deg, var(--night) 4%, rgb(10 7 18 / 55%) 38%, rgb(10 7 18 / 0%) 70%), linear-gradient(180deg, rgb(10 7 18 / 35%), rgb(10 7 18 / 0%) 30%); }
  .home-hero .public-hero-art img { transform: none; object-position: 72% 30%; }
  .public-hero-art figcaption { top: 12px; bottom: auto; right: 12px; left: auto; max-width: 70%; padding: 5px 11px; font-size: .72rem; }
  .public-hero-copy h1 { margin-block: 18px 16px; font-size: clamp(2.3rem, 10vw, 3.1rem); text-wrap: pretty; }
  .public-actions { margin-top: 26px; }
  .public-hero .public-actions, .public-closing .public-actions, .offer-copy .public-actions { flex-direction: column; align-items: stretch; }
  .public-closing .public-actions .public-text-link { align-self: center; }
  .public-button, .public-button-ghost { white-space: normal; }
  .public-section { padding-block: 64px; }
  h2 { font-size: clamp(1.9rem, 8.2vw, 2.4rem); }
  .home-facts { margin-top: 8px; }
  .home-facts ul { grid-template-columns: 1fr; padding: 4px 6px; }
  .home-facts li { padding: 18px 14px; }
  .home-facts li + li { border-left: 0; border-top: 1px solid var(--line-soft); }
  .couple-showcase { max-width: none; margin-top: 28px; padding-bottom: 48px; }
  .couple-showcase-memory { right: 0; width: 40%; }
  .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px; }
  .scene-night, .scene-forest { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .scene-hall, .scene-blossom { grid-column: span 1; aspect-ratio: 4 / 5; }
  .scene-card figcaption { left: 14px; right: 14px; bottom: 12px; font-size: 1rem; }
  .occasion-feature { padding: 18px; }
  .occasion-trio { gap: 8px; }
  .occasion-trio figcaption { font-size: .78rem; }
  .offer-panel { padding: 28px 18px; }
  .tier-cards ul { gap: 8px; }
  .tier-card { padding: 20px 6px 18px; gap: 12px; }
  .tier-card-label { font-size: .88rem; }
  /* Three cards of a long price set do not fit a phone at a readable size:
     one card per row instead of a smaller price. */
  .tier-cards--long ul { grid-template-columns: 1fr; }
  .tier-cards--long .tier-card { padding: 18px 16px; }
  /* The same answer for a label with one word wider than a third of a phone
     (German "Gesichtsvarianten"): a row each, phones only. Desktop cards and the
     offer panel are untouched — unlike a long price, the words fit there. */
  .tier-cards--wordy ul { grid-template-columns: 1fr; }
  .tier-cards--wordy .tier-card { padding: 18px 16px; }
  .trust-cards { grid-template-columns: 1fr; }
  .trust-cards li { padding: 24px 22px; }
  .faq-item summary { min-height: 60px; padding: 16px 2px; gap: 16px; }
  .faq-answer { padding: 0 2px 22px; }
  .story-chapters { grid-template-columns: 1fr; gap: 16px; }
  .story-chapter-body { padding: 22px 20px 24px; }
  .story-touches { grid-template-columns: 1fr; padding: 4px 20px; }
  .story-touches li:nth-last-child(2) { border-bottom: 1px solid var(--line-soft); }
  .journey-steps::before { left: 21px; }
  .journey-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .journey-step-marker { width: 44px; height: 44px; font-size: 1.1rem; box-shadow: 0 0 0 5px var(--night); }
  .journey-step-card { padding: 22px 20px; }
  .help-contact, .help-problem, .support-sections { grid-template-columns: 1fr; gap: 30px; }
  .help-contact-note { padding: 24px 20px; }
  .public-page-hero { padding-block: 54px 64px; }
  .public-footer-inner { flex-direction: column; align-items: flex-start; padding-block: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene-card img, .faq-item summary, .locale-menu summary::after, .faq-item summary::after, .public-menu-bars, .public-menu-bars::before, .public-menu-bars::after { transition: none; }
  .scene-card:hover img { transform: none; }
}

/* Home hero: a real gameplay screen of the two characters. The key art it
   replaced was zoomed towards its top-right towers; this frame's subject is
   the couple, lower and near the middle, so it is shown unzoomed and framed on
   them at every width. More specific than both `.home-hero` image rules. */
.home-hero .public-hero-art img.home-hero-shot { transform: none; object-position: 46% 78%; }

/* On a phone the art fills its box by height, so framing cannot lift the pair;
   the shared rule pulls the copy ~70px up over the art, which put the eyebrow
   on their legs. Home keeps only a small overlap, so the eyebrow starts below
   their feet. Other heroes keep the shared value. */
@media (max-width: 760px) {
  .home-hero .public-hero-art, .story-hero .public-hero-art { margin-bottom: -16px; }
}

/* Marketing consent (D-321): present only where the Meta Pixel is configured. */
.consent-banner { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; max-width: 760px; margin-inline: auto; padding: 16px 20px; border: 1px solid var(--gold-hairline); border-radius: 16px; background: var(--surface); color: var(--ink); font-size: .92rem; box-shadow: 0 12px 40px rgb(0 0 0 / 45%); }
.consent-banner p { margin: 0; flex: 1 1 280px; }
.consent-actions { display: flex; gap: 12px; }
.consent-actions button, .consent-settings { min-height: var(--touch); padding: 0 18px; border-radius: 999px; font: inherit; cursor: pointer; }
/* Reject and Accept are equals: same size, same style, no colour nudging either way. */
.consent-accept, .consent-decline { border: 1px solid var(--gold-hairline); background: transparent; color: var(--ink); }
.consent-banner a { color: inherit; text-decoration: underline; }
.consent-settings { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
.consent-banner button:focus-visible, .consent-settings:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }