/* The public landing page (#79, D-026; redesign #508, D-144). Everything here is scoped to #landing, so the signed-in app keeps
   app.css alone. The page reads as one evening: warm paper at the top, dusk through the middle, night at the end.
   The date reveal is laid out here in its finished state; landing.js adds .is-live and moves the cards as the page
   scrolls. Without JavaScript, or with reduced motion, the finished layout is what people see. The colours and the text font
   are app.css's tokens (D-147); this file keeps only its layout values and the one title font. */

/* The section bar's title: the only place Bagel Fat One is used. The file holds just the characters of "Wildcard Dates". */
@font-face { font-family: "Bagel Fat One"; font-style: normal; font-weight: 400; font-display: swap; src: url(/bagel-fat-one-title.woff2) format("woff2"); }

#landing {
  --l-gutter: clamp(16px, 4vw, 56px);
  --l-max: 78rem;
  --l-display: clamp(2.9rem, 8.4vw, 7.6rem);
  --l-shadow: 0 1px 1px color-mix(in srgb, var(--chocolate) 8%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--chocolate) 45%, transparent),
    0 34px 60px -28px color-mix(in srgb, var(--chocolate) 40%, transparent);
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}
/* The landing runs edge to edge; the app's screens keep body's column. */
body:has(> #landing:not([hidden])) { max-width: none; padding: 0; }

#landing main { margin: 0; display: block; }
#landing :is(h1, h2, h3, p, figure, ol, ul) { margin: 0; }
#landing h1, #landing h2 { font-family: var(--font); font-weight: 400; letter-spacing: -0.025em; line-height: 0.98; text-wrap: balance; }
#landing h3 { font-family: var(--font); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
#landing em { font-style: italic; color: var(--wine); }
:where(#landing) img { display: block; max-width: 100%; height: auto; }
#landing .eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
#landing .note { font-size: 0.9rem; }
#landing > :not(main), #landing main > section { padding-inline: max(var(--l-gutter), calc((100% - var(--l-max)) / 2)); }

/* The one call to action, the same everywhere on the page: Silk on Wine, and Chocolate on Rose over the dark sections. */
#landing .btn.join { background: var(--wine); border: 0; color: var(--silk); font-weight: 600; padding: 13px 24px; border-radius: 999px;
  box-shadow: 0 2px 0 var(--chocolate); transition: transform 0.15s ease, box-shadow 0.15s ease; }
#landing .btn.join:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--chocolate); }
#landing .btn.join:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--chocolate); }
#landing .btn.join.big { font-size: 1.12rem; padding: 17px 32px; }
#landing .btn.join.big::after { content: "→"; display: inline-block; margin-left: 10px; transition: transform 0.2s ease; }
#landing .btn.join.big:hover::after { transform: translateX(4px); }
#landing .closing .btn.join, #landing .example-date .btn.join { background: var(--rose); color: var(--chocolate); }
/* On the night sections the button glows, so it is the brightest thing on screen. */
#landing .closing .btn.join { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rose) 22%, transparent), 0 14px 34px -8px color-mix(in srgb, var(--rose) 70%, transparent); }
#landing .closing .btn.join:hover { box-shadow: 0 0 0 9px color-mix(in srgb, var(--rose) 26%, transparent), 0 18px 40px -8px color-mix(in srgb, var(--rose) 80%, transparent); }
#landing :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Section bar: sticks to the top, names the page's sections and marks the one in view (landing.js sets
   aria-current). It stays light the whole way down. The waitlist button in it is always on screen. */
:root:has(#landing:not([hidden])) { scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { :root:has(#landing:not([hidden])) { scroll-behavior: smooth; } }
#landing .nav { position: sticky; top: 0; z-index: 20; padding-block: 10px; gap: 16px; flex-wrap: nowrap;
  background: color-mix(in srgb, var(--silk) 95%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--chocolate) 8%, transparent); }
#landing .nav .logo { font-family: "Bagel Fat One", var(--font); font-weight: 400; font-size: 1.2rem; color: inherit; text-decoration: none; white-space: nowrap; }
#landing .nav .btn.join { padding: 8px 16px; font-size: 0.92rem; white-space: nowrap; }
.section-links { gap: clamp(12px, 2.4vw, 32px); flex-wrap: nowrap; }
.section-links a { color: var(--ink-soft); text-decoration: none; font-size: 0.86rem; font-weight: 500; padding-block: 6px; border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease; white-space: nowrap; }
.section-links a:hover, .section-links a[aria-current="true"] { color: var(--ink); }
.section-links a[aria-current="true"] { border-bottom-color: var(--red); }
#landing #notice { margin-inline: max(var(--l-gutter), calc((100% - var(--l-max)) / 2)); }

/* Hero: poster-scale type beside a hand of photo cards. */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center;
  min-height: min(84svh, 820px); padding-block: clamp(16px, 4vh, 48px) clamp(48px, 9vh, 96px); }
.hero-text { display: grid; gap: 18px; justify-items: start; }
.hero h1 { font-size: var(--l-display); }
#landing .hero h1 em { color: var(--red); }
.hero-promise { font-family: var(--font); font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.15; }
.hero .sub { color: var(--ink-soft); max-width: 46ch; font-size: 1.05rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.hero-small { font-size: 0.85rem; color: var(--ink-soft); }
/* The hero's sample calendar: the app's own calendar classes (app.css) with the dates in rose hearts. Sizes follow the
   grid's width, so a date's number, heart and tag always fit inside its square. Every day has the same stack (a
   heart-sized box holding the number, then a tag line); a day that is not a date leaves the heart and tag empty, so
   all the numbers line up. landing.js moves the dates when the pace changes. */
.hero-cal { width: min(100%, 540px); justify-self: center; display: grid; gap: 14px; background: var(--sheet); border-radius: 12px; box-shadow: var(--l-shadow); padding: 20px; }
.hero-cal .mini-stub, .hero-cal .cal-grid { margin: 0; }
.hero-cal .mode-pill { justify-self: center; flex-wrap: wrap; justify-content: center; }
.cal-sample { container-type: inline-size; }
.hero-cal .cal-day { height: auto; aspect-ratio: 1; justify-content: center; gap: 0.5cqw; padding: 2px; overflow: hidden; }
.hero-cal .cal-day.night { background: var(--silk); }
.hero-cal .cal-heart-wrap { position: relative; width: 7.4cqw; height: 7.4cqw; display: grid; place-items: center; }
.hero-cal .cal-heart { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; fill: var(--rose); stroke: var(--rose); }
.hero-cal .cal-num { position: relative; margin-top: -0.5cqw; font-size: 2.8cqw; line-height: 1; font-weight: 500; color: var(--ink-soft); }
.hero-cal .cal-day.night .cal-num { color: var(--wine); font-weight: 700; }
.hero-cal .cal-tag { font-size: 2.3cqw; line-height: 1.05; font-weight: 600; text-align: center; white-space: normal; color: var(--ink-soft); }
.hero-cal .cal-day:not(.night) :is(.cal-heart, .cal-tag) { visibility: hidden; }
/* The card back: a wine sunburst, the brand's mark, no suits or pips. Shared by the reveal and the closing card. */
.card-back, .deck-spare, .closing-card { background: var(--wine)
  repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--silk) 9%, transparent) 0deg 5deg, transparent 5deg 10deg);
  border-radius: 8px; box-shadow: inset 0 0 0 7px var(--wine), inset 0 0 0 8px color-mix(in srgb, var(--silk) 55%, transparent), var(--l-shadow); }
.mono { position: absolute; inset: 0; margin: auto; width: 38%; aspect-ratio: 3 / 4; border-radius: 50%; display: grid; place-items: center;
  background: var(--wine); border: 1.5px solid color-mix(in srgb, var(--silk) 70%, transparent); color: var(--silk); font-family: var(--font); font-style: italic; font-size: calc(var(--cw) * 0.2); }

/* The date reveal. Finished layout first: three stop cards in a row, faces up. */
.reveal { --cw: clamp(150px, min(20vw, 27svh), 270px); --peel: 0;
  background: linear-gradient(to bottom, var(--paper), var(--rose)); padding-block: clamp(48px, 8vh, 96px); }
.reveal-stage { display: grid; gap: clamp(20px, 4vh, 40px); justify-items: center; text-align: center; }
.reveal-copy { display: grid; gap: 12px; justify-items: center; max-width: 40rem; }
.reveal h2 { font-size: clamp(2.3rem, 5.6vw, 4.8rem); }
.reveal-captions { list-style: none; padding: 0; display: grid; gap: 4px; font-size: 1.15rem; color: var(--ink); }
.reveal-table { position: relative; width: 100%; }
.stops { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 3vw, 40px); }
.stop-card { width: var(--cw); aspect-ratio: 5 / 7; perspective: 1400px; }
.stop-card:nth-child(1) { transform: rotate(-4deg); }
.stop-card:nth-child(2) { transform: translateY(-12px) rotate(1.5deg); }
.stop-card:nth-child(3) { transform: rotate(4deg); }
.card-inner { position: relative; height: 100%; transform-style: preserve-3d; }
.card-face, .card-back { position: absolute; inset: 0; backface-visibility: hidden; }
.card-back { display: none; }
.card-face { background: var(--sheet); border-radius: 8px; box-shadow: var(--l-shadow); padding: 9% 8% 8%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 6px; text-align: left; box-sizing: border-box; }
.card-time { font-size: max(0.56rem, calc(var(--cw) * 0.043)); font-weight: 600; letter-spacing: 0.08em; white-space: nowrap; text-transform: uppercase; color: var(--red); }
.card-face h3 { font-size: calc(var(--cw) * 0.1); }
/* Stretched by the grid row, not height: 100%: Safari on iOS resolved that against the whole card and the photo covered the note. */
.card-face img { width: 100%; height: auto; min-height: 0; align-self: stretch; aspect-ratio: auto; object-fit: cover; border-radius: 3px; }
.card-note { font-size: max(0.72rem, calc(var(--cw) * 0.052)); line-height: 1.3; color: var(--ink-soft); }
.deck-spare, .route { display: none; }
.reveal-cta { margin-top: 4px; }

/* Live: the section is tall, the stage sticks, and landing.js positions each card from the scroll position. */
.reveal.is-live { height: 420vh; padding-block: 0; }
.reveal.is-live .reveal-stage { position: sticky; top: 0; height: 100svh; box-sizing: border-box; padding-block: clamp(84px, 13vh, 136px) clamp(20px, 5vh, 48px);
  grid-template-rows: auto 1fr auto; gap: clamp(12px, 3vh, 32px); }
.reveal.is-live .reveal-captions { position: relative; min-height: 3.2em; width: min(36rem, 100%); }
.reveal.is-live .reveal-captions li { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; }
.reveal.is-live .reveal-captions li.on { opacity: 1; transform: none; }
.reveal.is-live .reveal-table { height: 100%; }
.reveal.is-live .stops { display: block; height: 100%; }
.reveal.is-live .stop-card, .reveal.is-live .deck-spare { position: absolute; left: 50%; top: 50%; width: var(--cw); margin: calc(var(--cw) * -0.7) 0 0 calc(var(--cw) / -2);
  transform: none; will-change: transform; }
.reveal.is-live .deck-spare { display: block; aspect-ratio: 5 / 7; }
.reveal.is-live .card-back { --cut: calc(var(--peel) * var(--cw) * 0.38); display: block;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
/* The lifted corner: the card's pale underside folded back over the cut, darkest along the crease. */
.flap { display: none; }
.reveal.is-live .flap, .closing-card .flap { display: block; position: absolute; right: 0; bottom: 0; width: var(--cut); height: var(--cut);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(to bottom right, var(--sheet) 0%, color-mix(in srgb, var(--silk) 80%, var(--rose)) 28%, color-mix(in srgb, var(--silk) 55%, var(--chocolate)) 50%, transparent 50%); }
.reveal.is-live .card-face { transform: rotateY(180deg); }
.reveal.is-live .route { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route path { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 0; }
.reveal.is-live .reveal-cta { opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.35s ease; }
.reveal.is-live .reveal-cta.on { opacity: 1; transform: none; }

/* How it works: big numerals on a dusk wash, each step over a small piece of the real product. */
.how { background: linear-gradient(to bottom, var(--rose), color-mix(in srgb, var(--rose) 74%, var(--wine))); padding-block: clamp(72px, 12vh, 140px); display: grid; gap: clamp(32px, 6vh, 64px); }
.how-head { display: grid; gap: 14px; max-width: 52rem; }
.how h2 { font-size: clamp(2.3rem, 5.4vw, 4.6rem); }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.how-step { display: grid; grid-template-rows: auto auto auto 1fr; gap: 12px; align-content: start; min-width: 0; }
.step-n { font-family: var(--font); font-size: clamp(3.4rem, 6vw, 5.4rem); line-height: 0.8; color: var(--wine); border-top: 1.5px solid var(--ink); padding-top: 18px; margin-top: 12px; }
.how-step h3 { font-size: 1.45rem; }
.how-step p { color: var(--ink); max-width: 36ch; }

.step-visual { height: 15.5rem; box-sizing: border-box; background: var(--sheet); border-radius: 10px; box-shadow: var(--l-shadow); padding: 18px; display: grid; align-content: start; gap: 10px; }
.survey-card { transform: rotate(-1.5deg); }
.plan-stack { transform: rotate(1deg); }
.how-step .step-visual p { color: var(--ink); max-width: none; }
.sv-title { font-family: var(--font); font-size: 1.15rem; margin-bottom: 4px; }
.sv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sv-label { width: 4.6rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.chip { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 0.85rem; }
/* The survey example's "Open to" chips are the one place Fresh Blue is a fill (D-147). */
.sv-row:not(.no) .chip:not(.dark) { background: color-mix(in srgb, var(--blue) 34%, var(--silk)); border-color: color-mix(in srgb, var(--blue) 60%, var(--chocolate)); }
.chip.dark { background: var(--ink); border-color: var(--ink); color: var(--silk); }
.sv-row.no .sv-label { color: var(--ink-soft); }
.sv-row.no .chip { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--chocolate) 45%, transparent); color: var(--ink-soft); }
.plan-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.92rem;
  padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.plan-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.plan-row b { font-variant-numeric: tabular-nums; margin-right: 4px; }
.tick { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wine); border: 1.5px solid var(--wine); border-radius: 4px;
  padding: 3px 6px; white-space: nowrap; }
.tick::before { content: "✓ "; }
.plan-note { font-family: var(--font); font-style: italic; color: var(--ink-soft) !important; text-align: right; }

/* See it all / Surprise me: two real radios, and the panel under them follows the checked one (no script). */
.step-visual.mode { padding: 14px; gap: 12px; }
.mode-pill { justify-self: start; position: relative; display: inline-flex; background: var(--paper); border-radius: 999px; padding: 4px; font-size: 0.88rem; border: 1px solid var(--line); }
.mode-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode-pill label { padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 0.88rem; cursor: pointer; color: var(--ink-soft); }
.mode-pill input:checked + label { background: var(--ink); color: var(--silk); }
.mode-pill input:focus-visible + label { outline: 3px solid var(--wine); outline-offset: 2px; }
.mode-panel { display: none; font-size: 0.88rem; }
.mode:has(#mode-all:checked) .mode-all-panel { display: grid; }
.mode:has(#mode-surprise:checked) .mode-surprise-panel { display: grid; }
.mode-all-panel { gap: 6px; align-content: start; }
.mode-all-panel b { font-variant-numeric: tabular-nums; display: inline-block; width: 3.2em; }
.msg-head { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red) !important; }
.msg-foot { font-family: var(--font); font-style: italic; color: var(--ink-soft) !important; margin-top: 4px !important; }
.mode-surprise-panel { perspective: 900px; }
/* The tonight card turns over on "I've arrived" to show the stop, the way the app reveals it on the night. */
.flip-card { all: unset; position: relative; display: block; height: 10.4rem; cursor: pointer; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.flip-card[aria-pressed="true"] { transform: rotateY(180deg); }
.flip-card:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; border-radius: 10px; }
.flip-front, .flip-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; box-sizing: border-box; }
/* The Surprise me card: a Wine card back with a Silk sunburst and inset border, a Rose heading and button. */
.flip-front { background: var(--wine) repeating-conic-gradient(from 0deg at 100% 100%, color-mix(in srgb, var(--silk) 9%, transparent) 0deg 5deg, transparent 5deg 10deg);
  box-shadow: inset 0 0 0 5px var(--wine), inset 0 0 0 6px color-mix(in srgb, var(--silk) 55%, transparent);
  color: var(--silk); padding: 16px; display: grid; align-content: start; justify-items: start; gap: 8px; }
.flip-front .msg-head { color: var(--rose) !important; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.tease-line { font-size: 0.95rem; line-height: 1.4; }
.arrive { margin-top: 4px; background: var(--rose); color: var(--chocolate); border-radius: 999px; padding: 7px 14px; font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--chocolate) 60%, transparent); }
.flip-card:hover .arrive { transform: translateY(-1px); }
.flip-back { transform: rotateY(180deg); background: var(--sheet); box-shadow: var(--l-shadow); padding: 6px; display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 10px;
  align-items: center; }
.flip-back img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.reveal-line { font-size: 0.9rem; line-height: 1.35; display: grid; gap: 8px; padding-right: 6px; }
.again { font-size: 0.7rem; color: var(--ink-soft); }
.mode:has(#mode-all:checked) .mode-all-panel { animation: fade-up 0.4s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }

/* One example date, shown the way the app will show it, as dusk turns to night. */
.example-date { background: linear-gradient(to bottom, color-mix(in srgb, var(--rose) 74%, var(--wine)), var(--chocolate));
  padding-block: clamp(48px, 8vh, 96px) clamp(72px, 12vh, 140px);
  display: grid; gap: clamp(20px, 4vh, 36px); justify-items: center; text-align: center; }
.example-head { display: grid; gap: 12px; justify-items: center; }
.example-date h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
#landing .example-date em { color: var(--silk); }
#landing .example-date .eyebrow { color: var(--chocolate); }
.example-date .note { color: var(--chocolate); }
.date-card { width: min(100%, 34rem); text-align: left; background: var(--sheet); border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 2px color-mix(in srgb, var(--chocolate) 10%, transparent), 0 30px 70px -24px color-mix(in srgb, var(--chocolate) 65%, transparent); }
.dc-top { background: var(--wine) repeating-conic-gradient(from 0deg at 85% 0%, color-mix(in srgb, var(--silk) 8%, transparent) 0deg 5deg, transparent 5deg 10deg); color: var(--silk);
  padding: 16px 22px 18px; display: grid; gap: 2px; }
.dc-when, .dc-time { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.dc-when { color: var(--rose); }
.dc-top h3 { font-size: clamp(1.7rem, 3.4vw, 2.1rem); font-weight: 400; font-style: italic; }
.dc-where { color: color-mix(in srgb, var(--silk) 85%, var(--chocolate)); font-size: 0.95rem; }
.dc-note { margin: 16px 22px 2px !important; padding: 11px 14px; background: var(--paper); border-radius: 10px; font-family: var(--font); font-size: 0.98rem; line-height: 1.4;
  position: relative; }
.dc-note::after { content: "From your planner"; display: block; margin-top: 6px; font-family: var(--font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); }
.dc-stops { list-style: none; padding: 4px 22px 0 !important; display: grid; }
.dc-stops li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding-block: 10px; position: relative; }
.dc-stops li + li { border-top: 1px dashed var(--line); }
.dc-stops img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.dc-stops div { display: grid; gap: 3px; }
.dc-time { color: var(--red); }
.dc-stops h4 { margin: 0; font-family: var(--font); font-size: 1.05rem; font-weight: 600; line-height: 1.2; }
.dc-stops p { color: var(--ink-soft); font-size: 0.86rem; line-height: 1.35; }
.dc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 22px 0; padding: 12px 0 16px;
  border-top: 1.5px solid var(--ink); font-size: 0.92rem; }

/* Night: the last card and the waitlist, with the questions under it. */
/* Night: the waitlist call to action and the questions side by side. The call to action sticks while the questions scroll,
   so at the very bottom of the page both are on screen. */
.closing { background: radial-gradient(ellipse 50% 60% at 25% 40%, color-mix(in srgb, var(--wine) 55%, var(--chocolate)) 0%, var(--chocolate) 100%); color: var(--silk);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start;
  padding-block: clamp(72px, 12vh, 140px) clamp(48px, 8vh, 96px); }
#landing .closing em { color: var(--rose); }
.closing-cta { grid-column: 1; grid-row: 1; position: sticky; top: 96px; display: grid; justify-items: start; gap: 20px; }
.closing h2 { font-size: clamp(3rem, 6.4vw, 6rem); }
.closing-cta > p { color: color-mix(in srgb, var(--silk) 80%, var(--chocolate)); max-width: 32ch; font-size: 1.1rem; }
.closing-cta .hero-small { color: color-mix(in srgb, var(--silk) 68%, var(--chocolate)); font-size: 0.85rem; }
.closing-card { --cut: 28px; position: relative; width: 96px; aspect-ratio: 5 / 7; transform: rotate(-6deg); margin-bottom: 4px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.closing-card .mono { font-size: 1.3rem; }
.faq { grid-column: 2; grid-row: 1; display: grid; gap: 8px; }
.faq h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 8px; }
.faq details { border-bottom: 1px solid color-mix(in srgb, var(--silk) 22%, transparent); padding: 16px 0; }
.faq summary { cursor: pointer; font-family: var(--font); font-size: 1.2rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font); color: var(--rose); font-size: 1.4rem; line-height: 1; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 10px; color: color-mix(in srgb, var(--silk) 80%, var(--chocolate)); max-width: 60ch; }
.faq details a { color: var(--blue); }
/* A spare slot (D-263) with an empty question or answer is not shown; the copy editor still shows it. */
body:not(.copy-editor) .faq details:has(summary:empty, p:empty) { display: none; }

#landing .footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 20px 28px; font-size: 0.85rem;
  background: var(--chocolate); color: color-mix(in srgb, var(--silk) 68%, var(--chocolate)); border-top: 1px solid color-mix(in srgb, var(--silk) 14%, transparent); }
#landing .footer a { color: var(--blue); }

@media (max-width: 48rem) {
  #landing { --l-display: clamp(3.2rem, 15vw, 5rem); }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
  .reveal { --cw: min(41vw, 27svh, 190px); }
  .how-step .step-visual { order: 1; margin-top: 4px; }
  .reveal.is-live { height: 380vh; }
  .reveal.is-live .reveal-stage { padding-top: 84px; }
  .reveal-captions { font-size: 1.02rem; }
  .steps { grid-template-columns: 1fr; }
  .step-visual { height: auto; min-height: 13rem; }
  .dc-top { padding-inline: 18px; }
  .dc-note { margin-inline: 18px !important; }
  .dc-stops { padding-inline: 18px !important; }
  .dc-stops li { gap: 12px; }
  .dc-foot { margin-inline: 18px; }
  .section-links { display: none; }
  .closing { grid-template-columns: 1fr; }
  .closing-cta, .faq { grid-column: auto; grid-row: auto; }
  .closing-cta { position: static; }
  .flip-card { height: 9.6rem; }

  /* Hero (#671, #732): the promise, the paragraph, then the sample calendar; the buttons are in the bar and at the end. */
  #landing .hero { padding-block: 12px 40px; gap: 0; }
  #landing .hero .cta-row, #landing .hero .hero-small, #landing .reveal-cta { display: none; }
  #landing .hero-cal { width: 100%; margin-top: 28px; padding: 14px; }

  /* Top bar: one line from 320px. Sign in is quiet text, the Join pill is tighter. */
  #landing .nav { gap: 10px; }
  #landing .nav .logo { font-size: 1.05rem; }
  #landing .nav .links { flex-wrap: nowrap; gap: 4px; }
  #landing .nav .btn { font-size: 0.86rem; white-space: nowrap; }
  #landing .nav .btn.join { padding: 8px 14px; }
  #landing #sign-in-nav { border: 0; background: transparent; padding: 8px; }
}
@media (max-width: 22.5rem) {
  #landing .nav { gap: 6px; }
  #landing .nav .logo { font-size: 0.9rem; }
  #landing .nav .links { gap: 0; }
  #landing .nav .btn { font-size: 0.8rem; }
  #landing .nav .btn.join { padding: 7px 11px; }
  #landing #sign-in-nav { padding: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  #landing *, #landing *::before, #landing *::after { transition: none !important; animation: none !important; }
}