/* CTN Studio — shared stylesheet.
   Static site: plain CSS, no build step. Every page links this one file. */

/* Fonts are served from this site (no Google Fonts request, so no visitor IP goes to Google).
   Geist and Geist Mono 1.7.2, variable (all weights in one file), SIL Open Font License 1.1: see ../fonts/OFL.txt */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #05090E;
  --text: #F2F5F8;
  --text-2: #B5CFE0;
  --muted: #8A96A3;
  --faint: #5E6B78;
  --dim: #56626F;          /* second half of two-tone headings (3:1 on --bg, large text only) */
  --ghost: #17212B;        /* the hero's background word */
  --line: #1A242E;
  --btn: #151C24;
  --card: #0A1017;
  --orange: #F28C38;

  /* Light theme (everything after the hero). Contrast on --day-bg, checked against WCAG AA:
     ink 15.9:1, ink-2 8.7:1, body 7.6:1, quiet 4.6:1 (labels, inactive words), accent-ink 4.6:1 (orange text and icons).
     The bright --orange is only 2.3:1 on light, so on the light part it is used for fills and lines, never for text. */
  --day-bg: #F6F8FA;
  --day-ink: #0B1E31;
  --day-ink-2: #2E4A63;
  --day-body: #3E5266;
  --day-quiet: #627384;
  --day-line: #D7DEE6;
  --day-accent-ink: #B4560F;

  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --max: 1320px;
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x lives on html, never on body: on body it breaks window scroll listeners */
/* The page is dark at the top (hero) and light below it. The two-colour html background means overscrolling
   past the top shows dark and past the bottom shows light; the sections paint their own backgrounds. */
html { overflow-x: hidden; background: linear-gradient(var(--bg) 50%, var(--day-bg) 50%); }
body { font-family: var(--sans); color: var(--text); -webkit-font-smoothing: antialiased; }
.night, .stage { background: var(--bg); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 4px; font-size: 14px; }
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 40px; }

/* ---------- Nav ---------- */
.nav { height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.brand img { width: 26px; height: 26px; }
.links { display: flex; gap: 34px; font-size: 13px; color: var(--muted); }
.links a { position: relative; padding: 6px 0; }
.links a:hover, .links a[aria-current] { color: var(--text); }
.links a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--text); }
.nav-end { justify-self: end; }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: 4px; font-size: 14px; font-weight: 500; transition: background-color .15s; }
.btn-light { background: var(--text); color: var(--bg); }
.btn-light:hover { background: #FFFFFF; }
.more { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.more span { color: var(--orange); transition: transform .2s; }
.more:hover span { transform: translateX(3px); }

/* ---------- Hero ---------- */
.stage { position: relative; height: calc(100vh - 76px); min-height: 740px; max-height: 1000px; overflow: hidden; }
.title {
  position: absolute; left: 0; right: 0; top: 1.5vh; z-index: 1;
  text-align: center; font-weight: 300; font-size: clamp(84px, 13.4vw, 206px);
  line-height: .86; letter-spacing: -.06em; user-select: none;
}
/* Second line reads clearly while the logo is hidden, then steps back into a ghost when it appears */
.title .l2 { display: block; color: var(--dim); transition: color .9s ease; }
.mark-on .title .l2 { color: var(--ghost); }

/* The 3D logo: hidden until the visitor flips the switch (opacity is driven by mark3d.js) */
#mark3d, .mark-fallback {
  position: absolute; left: 50%; top: -3%; z-index: 2; transform: translateX(-50%);
  width: min(46vw, 660px); aspect-ratio: 1; pointer-events: none;
}
#mark3d { opacity: 0; }
.no-gl #mark3d { display: none; }
/* Flat SVG logo, used only when WebGL or three.js is unavailable */
.mark-fallback { display: none; padding: 25%; }
.no-gl .mark-fallback {
  display: block; opacity: 0; transform: translateX(-50%) scale(.9) rotate(-6deg);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}
.no-gl.mark-on .mark-fallback { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); }

/* Bottom of the hero: intro on the left, the logo switch centred under the headline */
.hud { position: absolute; left: 0; right: 0; bottom: 200px; z-index: 3; }
.hud-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 40px; }

/* Intro: a margin note with an orange tick, the first half of the sentence in white */
.intro { position: relative; max-width: 390px; padding-left: 22px; border-left: 1px solid var(--line); }
.intro::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 30px; background: var(--orange); }
.intro p { font-size: 17px; line-height: 1.5; letter-spacing: -.005em; color: var(--muted); }
.intro p span { color: var(--text); }
.intro .ctas { display: flex; align-items: baseline; gap: 30px; margin-top: 30px; }

/* Text-only calls to action: a big underlined main link with an orange arrow, and a quiet second link */
.cta-main { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--text); font-size: 18px; font-weight: 500; white-space: nowrap; }
.cta-main span { color: var(--orange); transition: transform .25s; }
.cta-main:hover span { transform: translate(3px, -3px); }
.cta-sub { font-size: 15px; color: var(--muted); white-space: nowrap; transition: color .2s; }
.cta-sub:hover { color: var(--text); }

/* The logo switch: a round power button right below where the logo lands */
.switch { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sw-label { font: 500 13px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.pwr {
  width: 58px; height: 58px; border-radius: 50%; border: 1px solid #2A3540; background: var(--btn); cursor: pointer;
  display: grid; place-items: center; color: var(--text-2); transition: color .3s, border-color .3s, background-color .3s;
}
.pwr svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.pwr:hover { border-color: var(--dim); }
.pwr[aria-checked="true"] { color: var(--bg); background: var(--orange); border-color: var(--orange); }

/* Built with passion: a closing signature in the headline's thin style */
.passion { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 3; }
.passion-line {
  padding-top: 34px; border-top: 1px solid var(--line); text-align: center; text-wrap: balance;
  font-size: clamp(38px, 5.3vw, 76px); font-weight: 300; line-height: 1; letter-spacing: -.05em; color: var(--dim);
}
.passion-line b { font-weight: 300; color: var(--text); }
.passion-line i { font-style: normal; color: var(--orange); }

/* ---------- Statement band: words light up as it scrolls through ---------- */
.statement { padding: 170px 0 190px; text-align: center; }
.statement p {
  max-width: 1100px; margin: 0 auto; font-size: clamp(30px, 3.7vw, 54px); font-weight: 500;
  line-height: 1.08; letter-spacing: -.028em; text-transform: uppercase;
}
.statement .w { color: #1E2832; transition: color .35s ease; }
.statement .w.on { color: var(--text); }

/* ---------- Section headings ---------- */
.h2 { font-size: clamp(34px, 4.1vw, 60px); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase; }
.h2 span { color: var(--dim); }
.sec-lede { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 430px; }

/* ---------- Why CTN: feature selector ---------- */
.why { padding: 30px 0 170px; }
.why-title { margin-bottom: 72px; }
.sel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.sel-list { border-top: 1px solid var(--line); }
.sel-item { position: relative; display: block; width: 100%; padding: 26px 0 28px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sel-item .t { display: block; font-size: 30px; font-weight: 300; line-height: 1.1; letter-spacing: -.03em; color: var(--dim); transition: color .3s; }
.sel-item:hover .t, .sel-item[aria-selected="true"] .t { color: var(--text); }
/* The orange line under the active word is the auto-advance timer */
.sel-item .bar { position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: var(--orange); }
.sel-item[aria-selected="true"] .bar { animation: progress var(--dur, 5s) linear forwards; }
.sel-list:not(.inview) .sel-item .bar { animation-play-state: paused; }
.sel-list.stopped .sel-item[aria-selected="true"] .bar { animation: none; width: 100%; }
@keyframes progress { to { width: 100%; } }
.sel-panel { border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 22px; min-height: 380px; }
.sel-pane:not([hidden]) { animation: paneIn .45s ease; }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } }
.sel-pane p { margin-top: 24px; max-width: 470px; font-size: 18px; line-height: 1.55; color: var(--text-2); }

/* Pictures inside the panel, one per word (decorative, invented content) */
.vis { position: relative; height: 300px; border: 1px solid var(--line); border-radius: 4px; background: #070C12; overflow: hidden; display: grid; place-items: center; }
.vis svg { width: 82%; height: auto; overflow: visible; }

/* Direct: a chat window replaying a made-up conversation, seen from the visitor's side */
.chat { position: absolute; inset: 0; display: flex; flex-direction: column; }
.chat svg { width: auto; overflow: visible; }
.win-bar { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #0B121A; border-bottom: 1px solid var(--line); flex: none; }
.win-bar i { width: 8px; height: 8px; border-radius: 50%; background: #1F2B37; }
.c-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
.c-av { width: 30px; height: 30px; border-radius: 50%; background: #102840; display: grid; place-items: center; flex: none; }
.c-av img { width: 17px; height: 17px; }
.c-name { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.c-status { font-size: 11px; line-height: 1.2; color: #5FB58A; }
.c-status.typing-now { color: var(--orange); }
.c-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 14px 12px; }
.c-day { align-self: center; margin-bottom: 4px; padding: 3px 9px; border-radius: 6px; background: #121A23; font-size: 10.5px; color: var(--muted); }
.m { max-width: 78%; padding: 7px 11px 6px; border-radius: 14px; font-size: 13px; line-height: 1.38; animation: pop .28s cubic-bezier(.3, 1.3, .5, 1) both; }
.m.me { align-self: flex-end; background: var(--orange); color: #1A0F05; border-bottom-right-radius: 4px; }
.m.them { align-self: flex-start; background: #1A232D; color: var(--text); border-bottom-left-radius: 4px; }
.m .meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 2px; font-size: 10px; opacity: .65; }
.m .meta svg { width: 15px; height: 9px; }
.m .lnk { text-decoration: underline; text-underline-offset: 2px; }
.m.typing { display: flex; gap: 4px; padding: 10px 12px; }
.m.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.m.typing i:nth-child(2) { animation-delay: .15s; }
.m.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.c-input { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); flex: none; }
.c-field { flex: 1; height: 30px; display: flex; align-items: center; padding: 0 12px; border-radius: 15px; background: #121A23; font-size: 12px; color: var(--faint); }
.c-send { width: 30px; height: 30px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; flex: none; }
.c-send svg { width: 14px; height: 14px; }
/* Original / Mobile-first / Fast: real photos (free Unsplash licence, credits in index.html), toned down slightly to sit in the dark page */
.vis .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.9) saturate(.95); }
.vis .photo-bright { filter: brightness(1.25); }

/* ---------- FAQ ---------- */
.faq { padding: 150px 0 190px; border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-side .sec-lede { margin-top: 26px; }
.faq-side .more { margin-top: 30px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 0; font-size: 19px; font-weight: 500; letter-spacing: -.015em; color: #D3DAE1; cursor: pointer; transition: color .15s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover, .faq-list details[open] summary { color: var(--text); }
.pm { position: relative; width: 14px; height: 14px; flex: none; color: var(--muted); transition: color .2s; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .3s ease; }
.pm::after { transform: rotate(90deg); }
details[open] .pm { color: var(--orange); }
details[open] .pm::after { transform: rotate(0deg); }
.ans { padding: 0 48px 30px 0; max-width: 640px; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
/* Smooth open/close where supported; older browsers simply open instantly */
details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
details[open]::details-content { block-size: auto; }

/* ---------- Dark to light: the hero fades into the light page ---------- */
/* Eased (sine in-out) stops so the fade has no hard band; it sits below the hero so no text is on the mid-grey. */
/* Each part overlaps the one above by 1px: on scaled displays (125%, 150%) a shared edge can otherwise
   let the page background show through as a thin line. */
.to-day, .day { margin-top: -1px; }
.to-day {
  height: clamp(150px, 24vh, 260px);
  background: linear-gradient(to bottom,
    #05090E 0%, #0B0F14 10%, #1C2025 20%, #373A3F 30%, #585C60 40%, #7E8184 50%,
    #A3A5A8 60%, #C4C7C9 70%, #DFE1E3 80%, #F0F2F4 90%, #F6F8FA 100%);
}

/* ---------- Light part of the page ---------- */
/* Re-points the colour tokens, so every section below reads them in their light version.
   "Lights off" (the wall switch) swaps the same tokens back to dark, see further down. */
.day {
  --text: var(--day-ink);
  --text-2: var(--day-ink-2);
  --muted: var(--day-body);
  --faint: var(--day-quiet);
  --dim: var(--day-quiet);
  --line: var(--day-line);
  --card: #FFFFFF;
  --btn: #ECF0F4;
  --accent-ink: var(--day-accent-ink);
  --w-unlit: #808D9A;            /* statement words not lit yet: 3.2:1, then they light up to ink */
  --summary: var(--day-ink-2);
  --panel-border: #E1E7ED;
  --panel-shadow: 0 1px 2px rgba(11, 30, 49, .05), 0 14px 34px rgba(11, 30, 49, .07);
  background: var(--day-bg);
  color: var(--text);
}
.day :focus-visible { outline-color: var(--accent-ink); }
.day .statement { padding-top: 70px; }
.day .statement .w { color: var(--w-unlit); }
.day .statement .w.on { color: var(--text); }
.day .sel-item .bar { background: var(--accent-ink); }
.day .sel-panel { border-color: var(--panel-border); box-shadow: var(--panel-shadow); }
.day .sel-pane p { color: var(--text-2); }
.day .more span, .day details[open] .pm { color: var(--accent-ink); }
.day .faq { border-top-color: var(--line); padding-bottom: 130px; }
.day .faq-list summary { color: var(--summary); }
.day .faq-list summary:hover, .day .faq-list details[open] summary { color: var(--text); }
.day .ans { color: var(--muted); }
/* The chat window is a screen inside the page: it keeps the dark colours */
.day .chat {
  --text: #F2F5F8; --text-2: #B5CFE0; --muted: #8A96A3; --faint: #5E6B78; --line: #1A242E;
  color: var(--text);
}

/* ---------- Lights off: the same sections in dark (contrast on --bg: text 18:1, body 6.4:1, quiet 4.5:1, unlit words 3:1, orange 8.2:1) ---------- */
html.lights-off { background: var(--bg); }
.lights-off .to-day, .lights-off .to-night { background: var(--bg); }
.lights-off .day {
  --text: #F2F5F8;
  --text-2: #B5CFE0;
  --muted: #8A96A3;
  --faint: #6E7A87;
  --dim: #6E7A87;
  --line: #1A242E;
  --card: #0A1017;
  --btn: #151C24;
  --accent-ink: var(--orange);
  --w-unlit: #56626F;
  --summary: #D3DAE1;
  --panel-border: #1A242E;
  --panel-shadow: none;
  background: var(--bg);
}
/* While switching, colours glide instead of jumping (main.js adds the class for a moment) */
.theme-anim .day, .theme-anim .day * {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease !important;
}

/* ---------- The wall switch, on the left of the statement ---------- */
/* A realistic European wall switch: square plate, recessed frame, big rocker that tilts in 3D.
   White with the lights on, anthracite with the lights off. */
.statement .wrap { position: relative; }
.statement .wrap p { max-width: min(1100px, calc(100% - 300px)); }
.lswitch { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lswitch small { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.ws { --p1: #FFFFFF; --p2: #EEF1F4; --p3: #E2E6EA; --edge: rgba(11, 30, 49, .10); --hi: rgba(255, 255, 255, .9); --drop: rgba(11, 30, 49, .22);
      display: block; padding: 0; border: 0; background: none; cursor: pointer; perspective: 260px; border-radius: 15px; }
.lights-off .ws { --p1: #3A4048; --p2: #2C3138; --p3: #22262C; --edge: rgba(0, 0, 0, .45); --hi: rgba(255, 255, 255, .12); --drop: rgba(0, 0, 0, .6); }
.ws .plate {
  position: relative; width: 96px; height: 96px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--p1) 0%, var(--p2) 62%, var(--p3) 100%);
  box-shadow: inset 0 1px 0 var(--hi), inset 0 -2px 3px var(--edge),
              0 1px 1px rgba(11, 30, 49, .10), 0 4px 8px rgba(11, 30, 49, .10), 0 14px 28px rgba(11, 30, 49, .16);
}
.lights-off .ws .plate { box-shadow: inset 0 1px 0 var(--hi), inset 0 -2px 3px var(--edge), 0 1px 1px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .45), 0 16px 32px rgba(0, 0, 0, .5); }
.ws .plate::before { content: ""; position: absolute; inset: 11px; border-radius: 9px; background: linear-gradient(180deg, var(--p3), var(--p2)); box-shadow: inset 0 1px 3px rgba(11, 30, 49, .22), inset 0 0 0 1px var(--edge); }
.ws .rocker {
  position: relative; width: 64px; height: 64px; border-radius: 7px;
  background: linear-gradient(180deg, var(--p1) 0%, var(--p2) 100%);
  box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px rgba(11, 30, 49, .05), 0 5px 4px -2px var(--drop);
  transform: rotateX(7deg);
  transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), box-shadow .16s ease;
}
/* Light falls on the half that sticks out: the lower half while the top is pressed (lights on), the upper half when off */
.ws .rocker::before, .ws .rocker::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: opacity .16s; }
.ws .rocker::after { background: linear-gradient(180deg, rgba(11, 30, 49, .09) 0%, rgba(11, 30, 49, 0) 55%); }
.ws .rocker::before { background: linear-gradient(0deg, rgba(11, 30, 49, .10) 0%, rgba(11, 30, 49, 0) 55%); opacity: 0; }
.ws[aria-checked="true"] .rocker { transform: rotateX(-7deg); box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px rgba(11, 30, 49, .05), 0 -3px 4px -2px var(--drop); }
.ws[aria-checked="true"] .rocker::after { opacity: 0; }
.ws[aria-checked="true"] .rocker::before { opacity: 1; }

/* ---------- Footer: the page fades back to dark ---------- */
.to-night, .foot { margin-top: -1px; }
.to-night {
  height: clamp(150px, 24vh, 260px);
  background: linear-gradient(to bottom,
    #F6F8FA 0%, #F0F2F4 10%, #DFE1E3 20%, #C4C7C9 30%, #A3A5A8 40%, #7E8184 50%,
    #585C60 60%, #373A3F 70%, #1C2025 80%, #0B0F14 90%, #05090E 100%);
}
.foot { background: var(--bg); color: var(--text); padding: 40px 0 36px; }
.foot-cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-bottom: 64px; }
.foot-title { font-size: clamp(48px, 6.2vw, 96px); font-weight: 300; line-height: .95; letter-spacing: -.05em; }
.foot-title span { display: block; color: var(--dim); }
.foot-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot-bar nav, .foot-legal { display: flex; gap: 26px; }
.foot-bar a:not(.brand):hover { color: var(--text); }
.foot-bar .brand { color: var(--text); }

/* ---------- Legal pages (privacy notice, legal notice) ---------- */
.to-day.short { height: 90px; }
.legal { padding: 70px 0 130px; }
.legal .wrap > * { max-width: 780px; }
.legal .updated { margin-top: 20px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.legal .intro-p { margin-top: 32px; font-size: 19px; line-height: 1.6; color: var(--text-2); }
.legal section { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal h2 { font-size: 21px; font-weight: 500; letter-spacing: -.015em; color: var(--text); }
.legal p, .legal li { margin-top: 14px; font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.legal ul { padding-left: 20px; }
.legal li::marker { color: var(--faint); }
.legal a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.legal dl { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px 28px; margin-top: 22px; }
.legal dt { padding-top: 4px; font: 500 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.legal dd { font-size: 16.5px; line-height: 1.6; color: var(--text); }
/* Blanks the owner still has to fill in: impossible to miss, and never meant to go live */
.todo { padding: 1px 7px; border-radius: 4px; background: #FFE3CB; color: #7A3A06; font-weight: 500; }

/* ---------- Reveal on scroll (only when JS runs) ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .sel { grid-template-columns: 1fr; gap: 40px; }
  .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Not enough room beside the statement: the switch sits centred above it */
  .lswitch { position: static; transform: none; margin: 0 auto 44px; }
  .statement .wrap p { max-width: 1100px; }
  .faq-side { position: static; }
}
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .nav { display: flex; justify-content: space-between; gap: 16px; }
  .links { display: none; }
  .nav .btn-light { height: 38px; padding: 0 14px; font-size: 13px; }
  .title { font-size: 16.5vw; top: 10px; }
  #mark3d, .mark-fallback { width: 92vw; top: -20vw; }
  .stage { height: auto; min-height: 0; max-height: none; padding-bottom: 170px; }
  .hud { position: static; padding: calc(30vw + 96px) 0 0; }
  .hud-row { grid-template-columns: 1fr; gap: 56px; }
  .switch { order: -1; }
  .statement { padding: 110px 0 120px; }
  .why { padding-bottom: 120px; }
  .why-title { margin-bottom: 44px; }
  .sel-item { padding: 20px 0 22px; }
  .sel-item .t { font-size: 25px; }
  .sel-panel { min-height: 0; padding: 16px; }
  .sel-pane p { margin-top: 18px; font-size: 16.5px; }
  .vis { height: 270px; }
  .faq { padding: 110px 0 130px; }
  .faq-list summary { font-size: 17px; padding: 24px 0; }
  .ans { padding-right: 0; }
  .day .faq { padding-bottom: 90px; }
  .legal { padding: 50px 0 90px; }
  .legal dl { grid-template-columns: 1fr; gap: 4px; }
  .legal dd + dt { margin-top: 14px; }
  .foot-cta { flex-direction: column; align-items: flex-start; gap: 32px; padding-bottom: 48px; }
  .foot-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .statement .w, .js .rv, details::details-content, .title .l2, .pwr, .sel-item .t, .ws .rocker, .ws .rocker::before, .ws .rocker::after { transition: none; }
  .theme-anim .day, .theme-anim .day * { transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .sel-pane:not([hidden]), .m, .m.typing i { animation: none; }
}