/* AEGIS study site. Rules: DESIGN.md at the repository root.
 * Fonts are self-hosted (static/fonts, SIL OFL 1.1): the protocol promises that no
 * third party receives participants' IP addresses. */

/* ---- fonts ------------------------------------------------------------------------------- */
@font-face { font-family: "Anek Bangla Variable"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(fonts/anek-bangla-bengali-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1; }
@font-face { font-family: "Anek Bangla Variable"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(fonts/anek-bangla-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Hind Siliguri"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(fonts/hind-siliguri-bengali-400-normal.woff2) format("woff2");
  unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1; }
@font-face { font-family: "Hind Siliguri"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(fonts/hind-siliguri-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Hind Siliguri"; font-style: normal; font-display: swap; font-weight: 600;
  src: url(fonts/hind-siliguri-bengali-600-normal.woff2) format("woff2");
  unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1; }
@font-face { font-family: "Hind Siliguri"; font-style: normal; font-display: swap; font-weight: 600;
  src: url(fonts/hind-siliguri-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---- tokens (DESIGN.md §3–§5) -------------------------------------------------------------- */
:root {
  --color-dominant: #0F2B3A;
  --color-accent: #22C3D6;
  --color-accent-ink: #0A7482;
  --color-paper: #F6F4EE;
  --color-surface: #FFFFFF;
  --color-muted: #5A6770;
  --color-line: rgba(15, 43, 58, 0.14);
  --color-line-dark: rgba(246, 244, 238, 0.16);
  --color-status-allow: #0CA30C;
  --color-status-monitor: #FAB219;
  --color-status-block: #D03B3B;

  --font-display: "Anek Bangla Variable", sans-serif;
  --font-body: "Hind Siliguri", sans-serif;
  --font-mono: "JetBrains Mono Variable", monospace;

  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-6: 48px; --space-8: 64px; --space-12: 96px; --space-18: 144px;

  --size-body: 16px;
  --size-heading: clamp(32px, 9vw, 48px);
  --size-hero: clamp(72px, 20vw, 144px);
  --size-meta: 13px;

  --radius: 2px;
  --gutter: 16px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---- base ---------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--size-body)/1.7 var(--font-body); color: var(--color-dominant);
       background: var(--color-paper); }
a { color: var(--color-accent-ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
h1, h2 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; margin: 0 0 var(--space-3); }
h1 { font-size: var(--size-heading); }
h2 { font-size: var(--size-body); font-family: var(--font-body); font-weight: 600; margin: var(--space-4) 0 var(--space-1); }
h1 .light { font-weight: 200; }
p { margin: 0 0 var(--space-2); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
main { max-width: 1200px; margin: 0 auto; padding: var(--space-4) var(--gutter) var(--space-12); }
.muted { color: var(--color-muted); }
.meta { font: 700 var(--size-meta)/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.measure { max-width: 68ch; }
.rule { border: 0; border-top: 1px solid var(--color-line); margin: var(--space-6) 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
        stroke-linecap: square; vertical-align: -3px; }

/* ---- masthead and journey steps ------------------------------------------------------------ */
.masthead { border-bottom: 1px solid var(--color-line); background: var(--color-paper); }
.masthead .wrap { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-1); font: 800 var(--size-body)/1 var(--font-display);
         color: var(--color-dominant); text-decoration: none; }
.brand svg { width: 24px; height: 24px; }
.steps { display: flex; gap: var(--space-1); margin: 0 0 0 auto; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; align-items: center; gap: var(--space-1); font-size: var(--size-meta); color: var(--color-muted);
            line-height: 1.7; white-space: nowrap; }
.steps li::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center;
                    width: 24px; height: 24px; border: 1px solid var(--color-line); border-radius: 50%;
                    font: 700 12px/1 var(--font-mono); }
.steps li + li::after { order: -1; content: ""; width: 24px; height: 1px; background: var(--color-line); }
.steps li.done { color: var(--color-dominant); }
.steps li.done::before { content: "✓"; background: var(--color-dominant); border-color: var(--color-dominant); color: var(--color-paper); }
.steps li.now { color: var(--color-dominant); font-weight: 600; }
.steps li.now::before { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-dominant); }
.steps li.done + li::after, .steps li.now::after { background: var(--color-dominant); }
.steps-compact { display: none; margin-left: auto; align-items: center; gap: var(--space-1); }
.steps-compact .bars { display: flex; gap: 4px; }
.steps-compact .bars i { width: 16px; height: 4px; background: var(--color-line); }
.steps-compact .bars i.on { background: var(--color-dominant); }
.steps-compact .bars i.now { background: var(--color-accent); }
@media (max-width: 899px) { .steps { display: none; } .steps-compact { display: flex; } }

/* ---- buttons ------------------------------------------------------------------------------- */
.btn, button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 48px; padding: 0 var(--space-3); font: 600 var(--size-body)/1 var(--font-body);
  border: 1px solid var(--color-dominant); border-radius: var(--radius); background: var(--color-dominant);
  color: var(--color-paper); cursor: pointer; text-decoration: none; }
.btn:hover, button:hover { background: #163C50; }
.btn.primary, button.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-dominant); }
.btn.primary:hover, button.primary:hover { background: #4DD3E2; }
.btn.secondary, button.secondary { background: transparent; color: var(--color-dominant); border-color: var(--color-line); }
.btn.secondary:hover, button.secondary:hover { border-color: var(--color-dominant); }
.btn.small, button.small { min-height: 40px; padding: 0 var(--space-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ---- form fields --------------------------------------------------------------------------- */
label { display: block; margin: var(--space-3) 0 var(--space-1); font-weight: 600; }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  display: block; width: 100%; min-height: 48px; padding: var(--space-1) var(--space-2); font: 400 var(--size-body)/1.6 var(--font-body);
  color: var(--color-dominant); background: var(--color-surface); border: 1px solid rgba(15, 43, 58, 0.32);
  border-radius: var(--radius); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 0; border-color: var(--color-dominant); }
textarea { min-height: 96px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
@media (max-width: 599px) { .row { grid-template-columns: 1fr; } }

/* Ticks and choices: the real input lies (invisible) over the whole row, so it is the element
   that is clicked or tapped, by people and by scripts alike. */
.check, .chip, .radio > label, .starpick > label { position: relative; }
.check input, .chip input, .radio input, .starpick input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.check { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-2) 0;
         font-weight: 400; border-bottom: 1px solid var(--color-line); }
.check .box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px;
              border: 1.5px solid var(--color-dominant); border-radius: var(--radius); background: var(--color-surface);
              transition: background .2s var(--ease-out); }
.check .box svg { width: 16px; height: 16px; stroke: var(--color-dominant); stroke-width: 3; fill: none;
                  stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s var(--ease-out) .05s; }
.check input:checked + .box { background: var(--color-accent); border-color: var(--color-accent); }
.check input:checked + .box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .box { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.check .req { margin-left: var(--space-1); font-size: var(--size-meta); color: var(--color-muted); }

.chips, .radio, .starpick { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chip span, .radio > label > span, .starpick > label > span {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 48px; padding: 0 var(--space-2);
  border: 1px solid rgba(15, 43, 58, 0.32); border-radius: var(--radius); background: var(--color-surface);
  font-weight: 400; transition: background .15s, border-color .15s; }
.chip, .radio > label, .starpick > label { margin: 0; font-weight: 400; }
.chip:hover span, .radio > label:hover > span, .starpick > label:hover > span { border-color: var(--color-dominant); }
.chip input:checked + span, .radio input:checked + span, .starpick input:checked + span {
  background: var(--color-dominant); border-color: var(--color-dominant); color: var(--color-paper); }
.chip input:focus-visible + span, .radio input:focus-visible + span, .starpick input:focus-visible + span {
  outline: 2px solid var(--color-accent); outline-offset: 2px; }
.chip.quiet span { border-style: dashed; color: var(--color-muted); }

/* ---- messages ------------------------------------------------------------------------------ */
.error, .warning, .notice { display: flex; gap: var(--space-1); align-items: flex-start; margin: var(--space-2) 0;
  padding: var(--space-2); border-left: 4px solid; background: var(--color-surface); }
.error { border-color: var(--color-status-block); }
.warning { border-color: var(--color-status-monitor); }
.notice { border-color: var(--color-status-allow); }

/* ---- the task bar: the page's one dark band (DESIGN.md §7) ---------------------------------- */
.task { position: sticky; top: 0; z-index: 5; background: var(--color-dominant); color: var(--color-paper); }
.task .inner { max-width: 1200px; margin: 0 auto; padding: var(--space-2) var(--gutter);
               display: flex; gap: var(--space-2) var(--space-4); align-items: center; flex-wrap: wrap; }
.task .text { flex: 1 1 480px; line-height: 1.9; }
.task .text strong { color: var(--color-accent); font-weight: 600; margin-right: var(--space-1); }
.task b { display: inline-block; padding: 0 var(--space-1); line-height: 1.6; font: 700 var(--size-body)/1.6 "JetBrains Mono Variable", "Hind Siliguri", monospace;
          color: var(--color-accent); border: 1px solid rgba(34, 195, 214, 0.5); border-radius: var(--radius);
          user-select: none; -webkit-user-select: none; }
.task .hint { display: block; font-size: var(--size-meta); color: rgba(246, 244, 238, 0.72); line-height: 1.7; }
.task .side { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.task .segs { display: flex; gap: 4px; }
.task .seg { width: 24px; height: 4px; background: var(--color-line-dark); position: relative; overflow: hidden; }
.task .seg.done, .task .seg.skipped { background: var(--color-paper); }
.task .seg.skipped { opacity: .45; }
.task .seg.current::after { content: ""; position: absolute; inset: 0; background: var(--color-accent);
                            transform-origin: left; animation: seg-fill .6s var(--ease-out) both; }
.task .tick { display: inline-flex; align-items: center; gap: 4px; font-size: var(--size-meta); color: var(--color-paper);
              animation: tick-in 3s var(--ease-out) both; }
.task .tick svg { stroke: var(--color-status-allow); }
.task .btn.secondary, .task button.secondary { color: var(--color-paper); border-color: var(--color-line-dark); }
.task .btn.secondary:hover, .task button.secondary:hover { border-color: var(--color-paper); background: transparent; }
.task form { margin: 0; }
@keyframes seg-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tick-in { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: .6; } }

/* ---- shop chrome --------------------------------------------------------------------------- */
.shopbar { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.shopbar .inner { max-width: 1200px; margin: 0 auto; padding: var(--space-2) var(--gutter);
                  display: flex; gap: var(--space-2) var(--space-3); align-items: center; flex-wrap: wrap; }
.shopbar .logo { font: 800 var(--size-body)/1 var(--font-display); color: var(--color-dominant); text-decoration: none; }
.shopbar .logo span { font-weight: 200; }
.shopbar form { display: flex; gap: var(--space-1); flex: 1 1 320px; max-width: 560px; }
.shopbar form input { min-height: 40px; }
.shopbar .links { display: flex; gap: var(--space-3); align-items: center; margin-left: auto; }
.shopbar .links a { color: var(--color-dominant); text-decoration: none; font-weight: 600; display: inline-flex; gap: var(--space-1); align-items: center; }
.shopbar .links a:hover { text-decoration: underline; }
.shopbar .count { font-family: var(--font-mono); font-size: var(--size-meta); }
.cats { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 0 var(--space-3); flex-wrap: wrap; }
.cats a { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-dominant); text-decoration: none;
          border-bottom: 2px solid transparent; }
.cats a:hover { border-bottom-color: var(--color-dominant); }
.cats a.on { border-bottom-color: var(--color-accent); font-weight: 600; }

/* Products: a list with aligned columns, so price and rating can be compared (DESIGN.md §7) */
.plist { border-top: 1px solid var(--color-dominant); }
.plist-head, .product { display: grid; grid-template-columns: 48px minmax(0, 1fr) 160px 128px 80px;
                        gap: var(--space-2); align-items: center; }
.plist-head { padding: var(--space-1) 0; border-bottom: 1px solid var(--color-line); }
.plist-head .r, .product .price, .product .stars { text-align: right; }
.product { min-height: 64px; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-line); }
.product .thumb { display: grid; place-items: center; width: 48px; height: 48px; background: var(--color-dominant);
                  color: var(--color-accent); font: 800 var(--size-body)/1 var(--font-display); text-decoration: none; }
.product .name { font-weight: 600; color: var(--color-dominant); text-decoration: none; }
.product .name:hover { text-decoration: underline; }
.product .cat { color: var(--color-muted); font-size: var(--size-meta); }
.price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.stars { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 719px) {
  .plist-head { display: none; }
  .product { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "t n p" "t c s"; gap: 0 var(--space-2); }
  .product .thumb { grid-area: t; } .product .name { grid-area: n; } .product .cat { grid-area: c; }
  .product .price { grid-area: p; } .product .stars { grid-area: s; }
}

/* Product page: picture block and facts side by side */
.pd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.pd .visual { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--color-dominant);
              color: var(--color-accent); font: 200 var(--size-hero)/1 var(--font-display); }
.pd .figure { display: flex; gap: var(--space-4); align-items: baseline; flex-wrap: wrap; margin-bottom: var(--space-3); }
.pd .figure .price { font-size: 48px; font-weight: 400; line-height: 1.15; }
@media (max-width: 719px) { .pd { grid-template-columns: 1fr; gap: var(--space-3); } .pd .visual { aspect-ratio: 16 / 7; font-size: 72px; } }

/* Tables (cart) */
table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--color-dominant); }
th { text-align: left; padding: var(--space-1) var(--space-1) var(--space-1) 0; }
td { padding: var(--space-2) var(--space-1) var(--space-2) 0; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
td a { color: var(--color-dominant); font-weight: 600; }
.qty { display: flex; gap: var(--space-1); align-items: center; margin: 0; }
.qty input { width: 88px; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
         padding: var(--space-3) 0; border-bottom: 1px solid var(--color-dominant); }
.total .price { font-size: 48px; font-weight: 400; line-height: 1.15; }
@media (max-width: 599px) { td { display: block; border: 0; padding: var(--space-1) 0; } tr { display: block; padding: var(--space-1) 0; border-bottom: 1px solid var(--color-line); } }

/* ---- page layouts --------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-8); align-items: start; }
.split .rail { position: sticky; top: var(--space-3); border-top: 2px solid var(--color-dominant); padding-top: var(--space-2); }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; gap: var(--space-4); } .split .rail { position: static; } }
.narrow { max-width: 560px; }
.lead { font-size: var(--size-body); color: var(--color-muted); max-width: 68ch; }

/* Landing */
.hero { position: relative; overflow: hidden; background: var(--color-dominant); color: var(--color-paper); }
.hero .wrap { position: relative; z-index: 1; padding-top: var(--space-12); padding-bottom: var(--space-8); }
.hero .kicker { color: var(--color-accent); font-weight: 600; margin-bottom: var(--space-3); }
.hero h1 { max-width: 16ch; margin-bottom: var(--space-3); }
.hero p { max-width: 56ch; color: rgba(246, 244, 238, 0.82); }
.hero .warning { color: var(--color-dominant); max-width: 56ch; }
.hero .btn.secondary { color: var(--color-paper); border-color: var(--color-line-dark); }
.hero .btn.secondary:hover { border-color: var(--color-paper); }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-art .grid line { stroke: var(--color-line-dark); stroke-width: 1; }
.hero-art .scan { fill: var(--color-accent); opacity: .5; animation: scan 6s linear infinite; }
.hero-art .frame { fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: .8; }
.hero-art .panel-label { font: 700 12px var(--font-mono); letter-spacing: .12em; fill: rgba(246, 244, 238, 0.6); }
.hero-art .rec { fill: var(--color-accent); animation: blink 1.6s ease-in-out infinite; }
.hero-art .path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
                  stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.8s var(--ease-out) .5s forwards; }
.hero-art .path.human { stroke: var(--color-accent); }
.hero-art .path.bot { stroke: rgba(246, 244, 238, 0.5); stroke-width: 2; animation-delay: .8s; }
.hero-art .end { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.hero-art .end.bot { stroke: rgba(246, 244, 238, 0.6); }
.hero-art .click { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.hero-art .mover.human { fill: var(--color-accent); }
.hero-art .mover.bot { fill: var(--color-paper); }
.hero-art .mover, .hero-art .click { opacity: 0; animation: fade-in .4s ease-out 2.2s forwards; }
.hero-art .tag { font: 600 16px var(--font-body); }
.hero-art .tag.human { fill: var(--color-accent); }
.hero-art .tag.bot, .hero-art .legend-text { fill: rgba(246, 244, 238, 0.7); }
.hero-art .legend-text { font: 400 16px var(--font-body); }
.hero-art .legend-text.human { fill: var(--color-accent); }
.hero-art .tag, .hero-art .legend { opacity: 0; animation: fade-in .6s ease-out 1.6s forwards; }
@keyframes fade-in { to { opacity: 1; } }
@keyframes scan { from { transform: translateY(-10%); } to { transform: translateY(110%); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes dash { to { stroke-dashoffset: -64; } }
@media (max-width: 899px) { .hero-art { opacity: .35; } .hero-art .legend, .hero-art .tag { display: none; }
                            .hero .wrap { padding-top: var(--space-8); } }

.stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start;
         gap: var(--space-6); margin-top: var(--space-8); padding-top: var(--space-3); }
.stats::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--color-line-dark);
                 transform-origin: left; }
.stats .n { display: block; font: 800 48px/1.15 var(--font-display); color: var(--color-paper); }
.stats .n .light { font-weight: 200; }
.stats .l { color: rgba(246, 244, 238, 0.72); }
@media (max-width: 599px) { .stats { grid-template-columns: 1fr 1fr; gap: var(--space-3); } }

.how { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); }
.how ol { list-style: none; margin: 0; padding: 0; counter-reset: how; }
.how li { counter-increment: how; display: grid; grid-template-columns: 64px 1fr; align-items: baseline;
          padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
.how li:last-child { border-bottom: 1px solid var(--color-line); }
.how li::before { content: "0" counter(how); font: 700 var(--size-meta)/1 var(--font-mono); letter-spacing: .08em; color: var(--color-accent-ink); }
@media (max-width: 719px) { .how { grid-template-columns: 1fr; gap: var(--space-2); } }

/* Consent */
.doc { max-width: 68ch; }
.doc h1 { display: none; }
.doc h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--size-body); margin-top: var(--space-4); }
.doc ul, .doc ol { padding-left: var(--space-3); }
.doc table { margin: var(--space-2) 0; }
.consent-form { max-width: 68ch; }
.consent-form h2 { margin-top: var(--space-6); }
.code-field input { font: 700 24px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; min-height: 64px; max-width: 360px; }
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { display: flex; gap: var(--space-1); padding: var(--space-1) 0; border-bottom: 1px solid var(--color-line); }
.rail-list svg { margin-top: 5px; color: var(--color-accent-ink); }

/* Survey */
.question { margin: 0; padding: var(--space-3) 0; border: 0; border-top: 1px solid var(--color-line); }
.question legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-2); font-weight: 600; }
.question legend + * { clear: both; }

/* Done */
.done-mark { width: 96px; height: 96px; margin-bottom: var(--space-4); }
.done-mark path { fill: none; stroke: var(--color-dominant); stroke-width: 3; }
.done-mark .ok { stroke: var(--color-accent-ink); stroke-width: 5; stroke-dasharray: 80; stroke-dashoffset: 80;
                 animation: draw .8s var(--ease-out) .7s forwards; }
.done-mark .outline { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.2s var(--ease-out) forwards; }
.code-hero { font: 700 clamp(32px, 9vw, 80px)/1.15 var(--font-mono); letter-spacing: .04em; margin: var(--space-1) 0 var(--space-4);
             white-space: nowrap; }

/* ---- motion: only outside the shop (DESIGN.md §9–§10) --------------------------------------- */
.rise { animation: rise .8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.btn .arrow { transition: transform .25s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important;
                           animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .hero-art .scan, .hero-art .mover, .hero-art .click { display: none; }
  .reveal { animation: none !important; }
}

/* landing details */
.hero .lang-label { margin: var(--space-4) 0 0; color: rgba(246, 244, 238, 0.72); }
.hero .lang-label + .actions { margin-top: var(--space-1); }
.how { padding-top: var(--space-6); }
.how h2, .section-title { margin: 0; font: 800 var(--size-heading)/1.15 var(--font-display); }
.rail-title { font-weight: 600; margin-bottom: var(--space-1); }
.rail-note { margin-top: var(--space-2); }

/* Self-made ticket on the consent page */
.ticket { display: grid; gap: var(--space-1); margin: var(--space-2) 0; padding: var(--space-3);
          background: var(--color-dominant); color: var(--color-paper); border-left: 4px solid var(--color-accent); }
.ticket-label { color: rgba(246, 244, 238, 0.72); }
.ticket-code { font: 700 clamp(32px, 9vw, 48px)/1.15 var(--font-mono); letter-spacing: .06em; color: var(--color-accent);
               white-space: nowrap; }
.ticket-note { display: flex; gap: var(--space-1); align-items: flex-start; }
.ticket-note svg { margin-top: 5px; color: var(--color-status-monitor); }
.ticket-actions { margin-top: var(--space-1); }

/* ---- motion on the pages around the shop (body.in-flow), DESIGN.md §9 -------------------------
   Text, decoration and feedback after a choice only. Controls never move before they are used,
   and nothing here runs on the shop's task pages (body.in-shop). */

/* Landing: headline word by word, kicker bar, stats line drawn and numbers rising */
.in-flow .words .w { display: inline-block; animation: word .8s var(--ease-out) both;
                     animation-delay: calc(120ms + var(--i) * 70ms); }
@keyframes word { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hero .kicker { display: flex; align-items: center; gap: var(--space-2); }
.hero .kicker::before { content: ""; width: 32px; height: 2px; background: var(--color-accent); flex: none; }
.in-flow .hero .kicker::before { transform-origin: left; animation: grow .8s var(--ease-out) both; }
.in-flow .stats::before { animation: grow 1.2s var(--ease-out) .6s both; }
.in-flow .stat { animation: rise .8s var(--ease-out) both; }
.in-flow .stat:nth-child(1) { animation-delay: .8s; }
.in-flow .stat:nth-child(2) { animation-delay: .9s; }
.in-flow .stat:nth-child(3) { animation-delay: 1s; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* "How it works": each step appears as it scrolls into view (where supported) */
@supports (animation-timeline: view()) {
  .in-flow .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
.how li { position: relative; }
.how li::after { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--color-accent); }

/* Journey steps: finished steps tick in one after another, the current one pulses three times */
.in-flow .steps li.done::before { animation: pop .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 120ms); }
.in-flow .steps li.now::before { animation: ring 1.6s ease-out .4s 3; }
@keyframes pop { from { transform: scale(0); } 60% { transform: scale(1.2); } to { transform: scale(1); } }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(34, 195, 214, 0.6); } to { box-shadow: 0 0 0 12px rgba(34, 195, 214, 0); } }

/* Feedback after a tick or a choice: a ring spreads from the box (the target itself does not move) */
.check .box { position: relative; }
.check input:checked + .box::after, .chip input:checked + span::after, .radio input:checked + span::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  animation: ring .6s ease-out 1; }
.chip span, .radio > label > span { position: relative; }

/* Ticket: the panel opens, then the code prints character by character */
.in-flow .ticket { animation: open .6s var(--ease-out) both; }
.in-flow .ticket-code { animation: type 1s steps(10, end) .45s both; }
.in-flow .ticket-note { animation: rise .6s var(--ease-out) 1.4s both; }
@keyframes open { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Done page: shield drawn, a burst around it, the code printed */
.done-badge { position: relative; width: 96px; height: 96px; margin-bottom: var(--space-4); }
.done-badge .done-mark { margin: 0; position: relative; z-index: 1; }
.done-badge::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-accent);
                      opacity: 0; }
.in-flow .done-badge::before { animation: halo 1.4s ease-out 1.6s 2; }
@keyframes halo { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
.spark { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; opacity: 0;
         background: var(--color-accent); transform: rotate(calc(var(--i) * 30deg)); }
.spark:nth-child(even) { background: var(--color-dominant); width: 6px; height: 6px; margin: -3px; }
.in-flow .spark { animation: spark 1s var(--ease-out) 1.5s both; }
@keyframes spark { 0% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(0); }
                   20% { opacity: 1; }
                   100% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(-84px); } }
.in-flow .code-hero { animation: type 1.1s steps(10, end) 1.2s both; }