/* ============================================================================
   Stamp Foundation - site.css
   One stylesheet for every page. Written from scratch 2026-09-06.

   THE IDEA: the site is one day on Stamp, told in the real app screens.
   The screens are the hero. Everything else is white space, one hairline,
   and type. Green only where you can tap. Gold once.

   HOUSE RULES ENFORCED HERE, do not break them:
     - Exactly ONE shadow exists on this site and it lives under a device
       frame (.device). Nothing else casts a shadow. If you find yourself
       adding box-shadow to a card, you have taken a wrong turn.
     - Zero gradients. Surfaces are flat colour or nothing.
     - Every colour resolves to a token below, and every token is lifted
       verbatim from LIGHT_C in stamp/context/ThemeContext.tsx. No new hues.
     - Light only. There is no dark theme and no toggle: the product is
       bright, so the site is bright.
   ========================================================================== */

/* --- Tokens ---------------------------------------------------------------
   Values mirror LIGHT_C in stamp/context/ThemeContext.tsx exactly.
   Contrast on white: ink 15.0:1, ink-soft 7.8:1, green 6.4:1, deep 10.4:1.
   Gold is 3.68:1, which is AA-large only. It appears in exactly two roles:
   the brand tagline (brand-locked, WCAG-exempt by standing decision) and
   display numerals at 3rem+. Never body copy. -------------------------- */
:root {
  --paper:      #FFFFFF;
  --paper-2:    #F8FDF5;
  --wash:       #EFF9EC;
  --line:       #C4E0C0;
  --line-soft:  #DDEEDC;
  --ink:        #1A2E1A;
  --ink-soft:   #3A5A3A;
  --green:      #2D6A4F;
  --green-deep: #1B4332;
  --gold:       #A87E28;
  --error:      #B42424;   /* LIGHT_C.errorText, form validation only */

  --shell: 1180px;   /* outer content width */
  --read:  62ch;     /* hard cap on body measure */
  --gut:   clamp(16px, 5vw, 40px);
  --band:  clamp(72px, 10vw, 148px);  /* vertical rhythm between sections */
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: 'wdth' 100;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* --- Type scale --------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 650; color: var(--green-deep); text-wrap: balance; }

.display {
  font-size: clamp(2.6rem, 6.4vw, 4.5rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 88;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--ink);
  max-width: 12ch;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.032em; line-height: 1.03; max-width: 18ch; }
h2 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); letter-spacing: -0.028em; line-height: 1.08; max-width: 20ch; }
h3 { font-size: 1.28rem; letter-spacing: -0.018em; line-height: 1.25; }
h4 { font-size: 1.0625rem; letter-spacing: -0.01em; }

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 48ch;
}
p, li, dd { max-width: var(--read); text-wrap: pretty; }
.small { font-size: 0.9375rem; }
.tiny  { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); max-width: 92ch; }
strong { font-weight: 650; color: var(--green-deep); }
em { font-style: italic; }

/* Gold, used twice on the whole site. See token note. */
.tagline { color: var(--gold); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; }
.figure {
  max-width: none;
  font-size: clamp(3.2rem, 8vw, 5.6rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 84;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--gold);
}

/* --- Links -------------------------------------------------------------
   No arrow characters glued to link text anywhere. A link is a link: green,
   underlined, thickening on hover. That is the whole treatment. ---------- */
a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a.plain { text-decoration: none; }
a.plain:hover { text-decoration: none; }

.more {
  display: inline-block;
  font-weight: 650;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

:focus-visible { outline: 2.5px solid var(--green); outline-offset: 3px; border-radius: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: #fff; padding: 12px 18px;
  font-weight: 650; text-decoration: none; border-radius: 0 0 10px 0;
}
.skip-link:focus-visible { left: 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Layout ------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 760px; }
section { padding: var(--band) 0; }
.band { background: var(--paper-2); }
.band-wash { background: var(--wash); }

.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* --- Header -------------------------------------------------------------
   Sticky, one hairline, no frosted-glass theatre. On small screens it stays
   a real bar with real links that scroll horizontally: never a hamburger,
   never a dead end. (Standing rule: compact bar at top at <=720px.) ------ */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .shell {
  display: flex; align-items: center; gap: 20px;
  min-height: 66px; padding-top: 10px; padding-bottom: 10px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.mark { width: 42px; height: 42px; flex: 0 0 42px; display: block; }
.mark circle { fill: var(--green); }
.mark path { fill: #fff; }
.brand-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--green-deep); line-height: 1.05; }

.site-nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: 0 0 auto;
  padding: 8px 12px; border-radius: 8px;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--green-deep); background: var(--wash); text-decoration: none; }
.site-head .btn { flex: 0 0 auto; white-space: nowrap; }

/* --- Buttons -------------------------------------------------------------
   Green means tappable. That is the only place solid green appears. ------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border: 1px solid var(--green); border-radius: 11px;
  background: var(--green); color: #fff;
  font-size: 1rem; font-weight: 650; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--green-deep); border-color: var(--green-deep); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-quiet { background: transparent; color: var(--green); }
.btn-quiet:hover { background: var(--wash); color: var(--green-deep); }
.btn-sm { padding: 9px 16px; font-size: 0.9375rem; border-radius: 9px; }

/* --- The device frame ----------------------------------------------------
   Drawn entirely in CSS. No image of a phone, no external asset. The screen
   aspect (1080x2346) is the real capture ratio, which sits within a hair of
   an iPhone 15 Pro's 1179x2556, so the frame reads true.
   The screenshots already contain their own status bar and island, so the
   frame deliberately draws NEITHER. It is bezel, corner radius and two
   side keys. This is the one element on the site allowed a shadow. ------- */
.device {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1080 / 2346;
  background: var(--ink);
  border-radius: 13.4%/6.2%;
  padding: 2.6%;
  box-shadow: 0 2px 6px rgba(20, 40, 20, .07), 0 26px 60px -18px rgba(20, 40, 20, .30);
}
.device img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  border-radius: 11%/5%;
  background: var(--paper-2);
}
.device-lg { max-width: 400px; }
.device-sm { max-width: 264px; }

/* --- Hero ----------------------------------------------------------------
   Text left, app right. No divider, no panel, no gradient, no glow
   (the 52% hairline collided with the lede; removed 2026-10-13). ------- */
.hero { position: relative; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 104px); overflow: hidden; }
.hero .shell { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero .display { margin-bottom: 22px; }
.hero .lede { margin-bottom: 30px; }
.hero-phone { justify-self: center; }

.notify { max-width: 460px; }
.notify-row { display: flex; gap: 10px; flex-wrap: wrap; }
.notify input[type="email"] {
  flex: 1 1 200px; min-width: 0;
  padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper); color: var(--ink);
}
.notify input[type="email"]::placeholder { color: var(--ink-soft); opacity: .8; }
.notify input[type="email"]:focus-visible { border-color: var(--green); }
.notify .note { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 12px; max-width: 46ch; }
.nstatus { font-size: 0.9375rem; font-weight: 500; margin-top: 12px; min-height: 1.4em; }
.nstatus.ok  { color: var(--green); }
.nstatus.err { color: var(--error); }
.notify-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.avail { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; font-size: 0.9375rem; color: var(--ink-soft); }
.avail span { display: inline-flex; align-items: center; gap: 7px; }
.avail svg { width: 16px; height: 16px; fill: var(--green); }

/* --- The day -------------------------------------------------------------
   One hairline runs the length of the story. Times hang on it. Phones and
   copy alternate sides. The rule is the only structure; there are no cards
   in this section at all. ------------------------------------------------ */
.day { position: relative; }
.day-intro { margin-bottom: clamp(48px, 6vw, 88px); }
.day-line { position: relative; }
.day-line::before {
  content: ""; position: absolute;
  left: 92px; top: 0; bottom: 0; width: 1px;
  background: var(--line);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 3.5vw, 56px) 0;
}
.step-time {
  grid-column: 1; align-self: center;
  position: relative; z-index: 1;
  text-align: right; padding-right: 20px;
  font-size: 0.875rem; font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--green);
}
.step-time::after {                   /* the marker, sat on the rule */
  content: ""; position: absolute; right: -4.5px; top: 50%; margin-top: -4.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--paper-2);
}
/* All three cells sit on row 1 explicitly. Without this, a flipped step's
   copy (column 2, declared after the art in column 3) gets auto-placed onto
   a second row and drops below the phone. */
.step-time, .step-art, .step-copy { grid-row: 1; }
.step-art { grid-column: 2; display: flex; justify-content: center; }
.step .device { max-width: 300px; }

/* One step shows two screens because the feature IS the pair: your circle's
   view of your profile, and a stranger's. */
.pair { display: flex; gap: clamp(12px, 2vw, 22px); align-items: flex-start; width: 100%; justify-content: center; }
.pair .device { max-width: 232px; }
.pair .device:last-child { margin-top: 34px; }
.step-copy { grid-column: 3; }
.step-copy h3 { margin-bottom: 12px; }
.step-copy p + p { margin-top: 14px; }
.step-copy p { color: var(--ink); }

/* even steps flip: copy left, phone right */
.step.flip .step-art  { grid-column: 3; }
.step.flip .step-copy { grid-column: 2; }

/* the four games, folded into the evening step */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 0 32px; margin-top: 28px; max-width: var(--read); border-bottom: 1px solid var(--line-soft); }
.games div { padding: 14px 0 16px; border-top: 1px solid var(--line-soft); }
.games dt { font-weight: 650; color: var(--green-deep); margin-bottom: 3px; }
.games dd { font-size: 0.9375rem; color: var(--ink-soft); }

/* --- Hairline lists (rules, features, pledge) ----------------------------
   Deliberately NOT cards. A rule between rows, nothing else. ------------- */
.rows { border-bottom: 1px solid var(--line-soft); }
.rows > div, .rows > li { border-top: 1px solid var(--line-soft); padding: 22px 0 26px; list-style: none; }
.rows dt, .rows h3, .rows .rt { font-size: 1.0625rem; font-weight: 650; color: var(--green-deep); margin-bottom: 6px; }
.rows dd, .rows .rd { font-size: 0.9375rem; color: var(--ink); }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.two-col > * { min-width: 0; }

.pledge-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(40px, 5vw, 72px); }
.pledge-cols h3 { margin-bottom: 20px; }
.pl { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; }
.pl svg { width: 17px; height: 17px; margin-top: 5px; flex: 0 0 auto; }
.pl-yes svg { color: var(--green); }
.pl-no svg  { color: var(--ink-soft); }
.pl p { font-size: 0.9375rem; color: var(--ink); max-width: 46ch; }
.pl strong { display: block; color: var(--green-deep); font-size: 1rem; margin-bottom: 3px; }

/* --- Tables (charity) --------------------------------------------------- */
.tbl { font-size: 0.9375rem; }
.tbl caption { text-align: left; font-size: 0.9375rem; color: var(--ink-soft); padding-bottom: 14px; }
.tbl th { text-align: left; font-weight: 650; color: var(--green-deep); padding: 0 20px 12px 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.tbl td { padding: 22px 20px 22px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); }
.tbl td:first-child, .tbl th:first-child { width: 56%; }
.tbl td:nth-child(2), .tbl th:nth-child(2) { width: 12%; }
.tbl td:first-child { color: var(--green-deep); font-weight: 650; font-size: 1.0625rem; }
.tbl td p { max-width: 46ch; font-size: 0.9375rem; margin-top: 6px; font-weight: 400; color: var(--ink); }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
.tbl tfoot td { border-bottom: 0; font-weight: 650; color: var(--green-deep); }
.tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- The screen gallery -------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); gap: clamp(36px, 4vw, 60px) clamp(24px, 3vw, 40px); }
.gallery figure { display: flex; flex-direction: column; align-items: center; }
.gallery figcaption { margin-top: 22px; text-align: center; }
.gallery figcaption b { display: block; font-size: 1.0625rem; font-weight: 650; color: var(--green-deep); margin-bottom: 6px; }
.gallery figcaption span { display: block; font-size: 0.9375rem; color: var(--ink-soft); max-width: 34ch; margin: 0 auto; }

/* --- The film ------------------------------------------------------------
   Never autoplays. Poster plus one control; sound only once you press it. */
.film { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.film-stage { position: relative; width: 100%; max-width: 300px; }
.film-panel {
  position: relative; width: 100%; aspect-ratio: 9 / 16;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: var(--paper-2);
}
.film-panel video { width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer; border-radius: 20px;
}
.play span {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--paper); color: var(--green);
  display: grid; place-items: center;
  transition: transform .16s ease;
}
.play:hover span { transform: scale(1.06); }
.play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; }
.play[hidden] { display: none; }

/* --- Price + figure blocks ----------------------------------------------- */
.figure-row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.figure-row .figure + p { margin-top: 16px; text-wrap: balance; }

/* --- FAQ ----------------------------------------------------------------- */
.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 64px); }
.faq-group > h3 { margin-bottom: 8px; }
details { border-bottom: 1px solid var(--line-soft); }
details summary {
  cursor: pointer; list-style: none;
  padding: 20px 40px 20px 0; position: relative;
  font-size: 1.0625rem; font-weight: 650; color: var(--green-deep);
}
details summary::-webkit-details-marker { display: none; }
details summary::after,
details summary::before {
  content: ""; position: absolute; right: 8px; top: 50%;
  background: var(--green); border-radius: 1px;
}
details summary::after  { width: 15px; height: 1.5px; margin-top: -0.75px; }
details summary::before { width: 1.5px; height: 15px; margin-top: -7.5px; margin-right: 6.75px; }
details[open] summary::before { display: none; }
details .a { padding: 0 40px 24px 0; }
details .a p { color: var(--ink); }
details .a p + p { margin-top: 12px; }

/* --- Documents (legal + utility pages) -----------------------------------
   One measure for the whole document page: the header brand, the title, the
   body and the footer all start on the same left edge. --------------------- */
.doc .doc-head .shell,
.doc main .shell,
.doc .site-foot .shell { max-width: 860px; }
.doc-head { padding: clamp(52px, 7vw, 96px) 0 clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line-soft); }
.doc-head .lede { margin-top: 14px; font-size: 1rem; max-width: 60ch; }
.doc main { padding: clamp(40px, 5vw, 64px) 0 var(--band); }
.doc main .shell { max-width: 760px; }
.doc article section { padding: 0 0 34px; }
.doc article h2 { font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 12px; max-width: none; }
.doc article h3 { font-size: 1.0625rem; margin: 20px 0 8px; }
.doc article p { color: var(--ink); max-width: 68ch; }
.doc article p + p { margin-top: 14px; }
.doc article ul, .doc article ol { margin: 12px 0 0 20px; color: var(--ink); max-width: 68ch; }
.doc article li { margin-bottom: 8px; max-width: 68ch; }
.doc article table { margin: 16px 0; font-size: 0.9375rem; }
.doc article th { text-align: left; font-weight: 650; color: var(--green-deep); padding: 0 16px 10px 0; border-bottom: 1px solid var(--line); }
.doc article td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); vertical-align: top; }
.interim-note, .callout, .note-box {
  background: var(--wash); border-left: 2px solid var(--green);
  padding: 18px 22px; margin-bottom: 32px;
}
.interim-note p, .callout p, .note-box p { color: var(--ink); max-width: 62ch; }

/* --- Footer -------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line-soft); background: var(--paper-2); padding: clamp(48px, 6vw, 80px) 0 clamp(36px, 4vw, 56px); }
.site-foot .brand { margin-bottom: 4px; }
.site-foot .foot-top { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-start; margin-bottom: 36px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; max-width: 640px; }
.foot-links a { font-size: 0.9375rem; color: var(--ink-soft); text-decoration: none; }
.foot-links a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.foot-mail { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 0.9375rem; }
.site-foot .tiny { border-top: 1px solid var(--line-soft); padding-top: 24px; }

/* --- Consent banner ------------------------------------------------------ */
#stamp-cookie-banner {
  position: fixed; z-index: 150; left: 24px; right: auto; bottom: 24px; max-width: 420px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px;
}
#stamp-cookie-banner[hidden] { display: none; }
#stamp-cookie-banner p { font-size: 0.875rem; color: var(--ink-soft); margin-bottom: 14px; }
.stamp-cookie-buttons { display: flex; gap: 10px; }
#stamp-cookie-banner button {
  flex: 1 1 0; padding: 10px 16px; border-radius: 9px; cursor: pointer;
  font-size: 0.9375rem; font-weight: 650;
  border: 1px solid var(--green); background: transparent; color: var(--green);
}
#stamp-cookie-accept { background: var(--green); color: #fff; }

/* --- The single motion ---------------------------------------------------
   .rise: a soft rise, once, on first intersection. This is the only thing
   that moves on the whole site apart from hover and focus. --------------- */
.rise { opacity: 1; }                 /* visible unless JS opts in, so no flash */
.js .rise { opacity: 0; transform: translateY(18px); }
.js .rise.in { opacity: 1; transform: none; transition: opacity .62s cubic-bezier(.16,1,.3,1), transform .62s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .rise, .js .rise, .js .rise.in { opacity: 1; transform: none; transition: none; }
  .btn, .play span, .site-nav a { transition: none; }
}

/* --- Clock voice: display numerals. Defined for the day rebuild; unused for now. */
.clock {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-stretch: 75%; font-variation-settings: 'wdth' 75;
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(4rem, 14vw, 10rem);
  color: var(--green-deep); line-height: 0.95;
}

/* --- Utilities ----------------------------------------------------------- */
.stack-sm > * + * { margin-top: 12px; }
.stack   > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 34px; }
.mt-sm { margin-top: 16px; } .mt { margin-top: 28px; } .mt-lg { margin-top: 48px; }
.mb { margin-bottom: 28px; } .mb-lg { margin-bottom: clamp(40px, 5vw, 64px); }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center p, .center .lede { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   RESPONSIVE. Verified to 375px with zero horizontal overflow.
   ========================================================================== */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero .display, .hero .lede { max-width: none; }
  .hero-phone { order: 2; }

  .step { grid-template-columns: 68px minmax(0, 1fr); gap: 20px 24px; padding: 34px 0; align-items: start; }
  .day-line::before { left: 68px; }
  
  .step-art, .step.flip .step-art { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  .step-copy, .step.flip .step-copy { grid-column: 2; grid-row: 1; text-align: left; margin-bottom: 8px; }
  .step.flip .step-copy p, .step.flip .step-copy h3, .step.flip .games { margin-left: 0; }
  .step-time { grid-row: 1; padding-right: 14px; align-self: start; padding-top: 4px; }
  .device { max-width: 320px; }

  .film { grid-template-columns: minmax(0, 1fr); }
  .figure-row { grid-template-columns: minmax(0, 1fr); }
  .site-foot .foot-top { flex-direction: column; }
}

@media (max-width: 720px) {
  /* Compact bar, still a real bar: every link is present and reachable by
     scrolling the row sideways. No hamburger, no hidden destinations. */
  html { scroll-padding-top: 112px; }
  .site-head .shell { min-height: 0; gap: 4px 12px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 0; }
  .brand { order: 1; }
  .site-head .btn { order: 2; margin-left: auto !important; }
  .site-nav {
    order: 3; flex: 1 0 100%; margin-left: 0; margin-right: calc(var(--gut) * -1);
    padding-right: 32px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  .site-nav a:first-child { margin-left: -9px; }
  .brand-name { font-size: 1.25rem; }
  .mark { width: 36px; height: 36px; flex: 0 0 36px; }
  .tagline { display: none; }
  .site-nav a { padding: 9px 9px; font-size: 0.875rem; }

  .gallery { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
  #stamp-cookie-banner { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .step { grid-template-columns: 56px minmax(0, 1fr); gap: 16px 16px; }
  .day-line::before { left: 56px; }
  .step-time { font-size: 0.8125rem; padding-right: 10px; }
  
  .device, .step .device { max-width: 100%; }
  .pair { gap: 10px; }
  .pair .device { max-width: 50%; }
  .pair .device:last-child { margin-top: 18px; }
  .device-sm { max-width: 100%; }
  .tbl td:first-child { width: auto; }
  .tbl thead { display: none; }
  .tbl td, .tbl th { display: block; padding: 4px 0; border: 0; }
  .tbl tbody tr { display: block; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
  .tbl tfoot tr { display: block; padding-top: 18px; }
  .tbl .num { display: inline-block; margin-right: 12px; }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .gallery .device { max-width: 260px; }
  .games { grid-template-columns: minmax(0, 1fr); }
}

/* --- Password reset form (reset.html only) -------------------------------
   The page's password logic is untouched; these are its styles only. ----- */
.doc .card { border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px, 4vw, 40px); max-width: 480px; }
.doc .card h1 { font-size: 1.5rem; max-width: none; margin-bottom: 10px; }
.doc .card .sub { color: var(--ink-soft); font-size: 0.9375rem; margin-bottom: 24px; }
.doc .card label { display: block; font-size: 0.9375rem; font-weight: 650; color: var(--green-deep); margin-bottom: 6px; }
.doc .card input {
  width: 100%; padding: 13px 16px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--ink);
}
.doc .card input:focus-visible { border-color: var(--green); }
.doc .card .hint { font-size: 0.8125rem; color: var(--ink-soft); margin-bottom: 20px; }
.doc .card .primary {
  width: 100%; padding: 13px 22px; border: 1px solid var(--green); border-radius: 11px;
  background: var(--green); color: #fff; font-weight: 650; cursor: pointer;
}
.doc .card .primary:hover { background: var(--green-deep); border-color: var(--green-deep); }
.doc .card .primary:disabled { opacity: .55; cursor: default; }
.doc .card .msg { margin-top: 18px; font-size: 0.9375rem; color: var(--ink-soft); }
.doc .card .msg.ok { color: var(--green); }
.doc .card .msg.err { color: var(--error); }
.doc .card .return { margin-top: 16px; font-size: 0.9375rem; color: var(--ink-soft); }