/* ============================================================
   Periscreen — the landing (index.html, fr/index.html)
   On top of assets/styles.css (Optexia's tokens, header, footer, buttons).

   Two inspirations, one identity (Optexia's Archivo + Plex Mono, paper and teal-black, orange):
   - remix.run: a sticky glass header with indexed sections, huge stretched type, dark
     "night" bands with a faint starfield, hairline-divided panels, a 3D screen that
     flattens as you scroll, a giant wordmark at the very end;
   - ollivere.co: one idea per screen, centered statements on paper, a visual gag that acts
     on the words (the second screen wakes up from its screensaver and "watch you work" is
     struck out), and a train of cards that rolls sideways as you scroll.

   The board and the demo visuals are drawn as SCREENS: a dark glass surface in both themes,
   with their own palette (--s-*). Everything moving is decorative, CSS-first, and stops
   under prefers-reduced-motion; scroll-driven effects are progressive (@supports), the page
   reads the same without them. No inline style: the CSP forbids it.
   ============================================================ */

:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --head-h: 72px;
  --stand: #b9c3c0;
  --stand-2: #98a5a2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --stand: #1c3135; --stand-2: #13262a; }
}
:root[data-theme="dark"] { --stand: #1c3135; --stand-2: #13262a; }

/* The screen palette: the app's dark board, tinted with Optexia's teal and orange. */
.screen {
  --s-bg: #061416;
  --s-text: #e3ebe9;
  --s-dim: #a3b8b7;
  --s-faint: #7b9695;
  --s-line: rgba(255, 255, 255, 0.09);
  --s-line-2: rgba(255, 255, 255, 0.16);
  --s-glass: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  --s-teal: #6cc4c4;
  --s-teal-soft: rgba(108, 196, 196, 0.14);
  --s-accent: #f2873f;
  --s-accent-soft: rgba(242, 135, 63, 0.14);
  --s-sand: #e9c46a;
  --s-red: #e2705f;
  --s-shadow: 0 18px 40px -18px rgba(2, 8, 10, 0.75);
  color: var(--s-text);
}

/* Night bands (the local-first section, the Pro card): Optexia's dark tokens, in both themes —
   every child reads them, so text, lines and links flip together. */
.night, .price-card--pro {
  --bg: #0a1c1f; --bg-alt: #061416; --ink: #e3ebe9; --muted: #a3b8b7; --faint: rgba(227, 235, 233, 0.32);
  --line: rgba(227, 235, 233, 0.12); --line-2: rgba(227, 235, 233, 0.28);
  --orange-ink: #f2873f; --logo-t: #7db9be; --ok: #7fd1b3; --error: #ff8a7a;
  color-scheme: dark;
  background-color: color-mix(in oklab, var(--bg) 90%, transparent);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .night { --bg: #020b0c; }
}
:root[data-theme="dark"] .night { --bg: #020b0c; }

/* The 3D backdrop (assets/backdrop.js, after remix.run): a fixed canvas behind the page. */
.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
.backdrop.on { opacity: 1; }
main, .foot { position: relative; z-index: 1; }

/* Reveal on scroll: only when the page script runs (assets/theme.js sets html.js). */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

/* ---------------------------------------------------------- */
/* Header: sticky glass, indexed links (remix.run)              */
/* ---------------------------------------------------------- */

.top {
  position: sticky; top: 0; z-index: 20;
  min-height: var(--head-h);
  background-color: color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
@supports (animation-timeline: scroll()) {
  .top { border-bottom-color: transparent; background-color: transparent; animation: head-solid linear both; animation-timeline: scroll(); animation-range: 0 90px; }
}
@keyframes head-solid {
  to { border-bottom-color: var(--line); background-color: color-mix(in oklab, var(--bg) 82%, transparent); }
}
.nav-n { font: 500 0.72rem var(--mono); color: var(--orange-ink); margin-right: 0.45em; vertical-align: 0.12em; }
section[id] { scroll-margin-top: calc(var(--head-h) + 8px); }

/* ---------------------------------------------------------- */
/* Sections                                                     */
/* ---------------------------------------------------------- */

.section { padding: clamp(80px, 13vh, 150px) var(--gut) clamp(24px, 4vh, 48px); }
.section-head { max-width: 46rem; margin-bottom: clamp(30px, 5vh, 56px); }
.section h2 { font-size: clamp(2rem, 1rem + 3vw, 3.6rem); font-stretch: 122%; font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 1rem; }
.section-sub { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.22rem); max-width: 40rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font: 500 0.82rem var(--mono); color: var(--orange-ink); text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 1.2rem;
}
.eyebrow-n { padding: 2px 7px; border: 1px solid currentColor; border-radius: 6px; }
.mono-chip {
  font: 500 0.88em var(--mono); white-space: nowrap;
  padding: 1px 7px; border-radius: 6px;
  border: 1px solid var(--line-2); background: color-mix(in oklab, var(--bg) 90%, var(--ink));
}
.band { background: color-mix(in oklab, var(--bg-alt) 86%, transparent); }
.soon { color: var(--orange-ink); }

/* ---------------------------------------------------------- */
/* Hero: one centered statement, then the second screen          */
/* ---------------------------------------------------------- */

.hero {
  display: grid; justify-items: center; text-align: center;
  padding: clamp(36px, 7vh, 80px) var(--gut) 0;
  overflow-x: clip;
}
.hero-copy { display: grid; justify-items: center; max-width: 64rem; }
.hero .eyebrow { margin-bottom: 1.3rem; }
.live-dot { flex: none; align-self: flex-start; margin-top: 0.3em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 var(--orange); animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--orange) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
.hero-title {
  font-size: clamp(2.3rem, 1rem + 3.25vw, 4.5rem);
  font-stretch: 125%; font-weight: 640; line-height: 0.98; letter-spacing: -0.04em;
  max-width: 20ch; margin: 0 0 1.4rem;
  text-wrap: balance;
}
/* The gag: "watch you work" is struck out when the second screen wakes up (≈ 2 s). */
/* A background line, not a pseudo-element: it follows the words when they wrap on two lines. */
.hero-title .strike {
  background: linear-gradient(var(--orange), var(--orange)) 0 58% / 0% 0.075em no-repeat;
  animation: strike-fade 0.5s var(--ease) 2.05s both, strike-draw 0.6s var(--ease) 1.95s both;
}
@keyframes strike-draw { to { background-size: 100% 0.075em; } }
@keyframes strike-fade { from { color: var(--ink); } to { color: var(--muted); } }
.hero-title .accent { color: var(--orange-ink); }
.hero-sub { color: var(--muted); font-size: clamp(1.06rem, 1rem + 0.3vw, 1.25rem); max-width: 47rem; text-wrap: balance; }
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 1.7rem; }
.hero-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
  list-style: none; margin: 1.8rem 0 0; padding: 9px 18px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font: 400 0.9rem/1.5 var(--mono); color: var(--muted);
}
.hero-meta li { display: flex; align-items: center; gap: 10px; }
.hero-meta li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--orange); }

/* Optional "Try it in your browser" slot (TRY_URL). */
.try-slot { margin-top: 1.4rem; max-width: 30rem; }
.try-slot[hidden] { display: none; }
.try-note { font-size: 0.92rem; color: var(--muted); margin-top: 8px; }

/* ---------------------------------------------------------- */
/* The second screen: a monitor on its stand                     */
/* ---------------------------------------------------------- */

.board-scene {
  width: min(100%, 1060px);
  margin: clamp(36px, 6vh, 64px) auto 0;
  perspective: 1800px;
  transform-origin: 50% 0; /* pivots on its top edge: the screen peeks under the hero at any tilt */
  text-align: left;
}
/* remix.run's 3D screen: tilted back, it flattens as it scrolls into view. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 721px) {
    .board-scene { animation: scene-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 48%; }
  }
}
@keyframes scene-rise {
  from { transform: perspective(1800px) rotateX(24deg) scale(0.92); }
  to { transform: none; }
}
.monitor {
  --rx: 0deg; --ry: 0deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.35s var(--ease);
}
.monitor.is-live { transition: none; }
.monitor-screen {
  position: relative;
  padding: clamp(7px, 1.1vw, 13px);
  border-radius: clamp(14px, 2vw, 24px);
  background: linear-gradient(180deg, #172427, #0b1214);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 50px 90px -40px rgba(6, 20, 22, 0.65), 0 18px 30px -20px rgba(6, 20, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.monitor-stand {
  position: relative;
  width: 18%; height: clamp(26px, 4.4vw, 58px); margin: 0 auto;
  background: linear-gradient(90deg, var(--stand-2), var(--stand) 50%, var(--stand-2));
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
.monitor-stand::after {
  content: ""; position: absolute; left: -60%; right: -60%; bottom: -6px; height: 8px;
  border-radius: 50%; background: var(--stand-2);
}

/* The real app, captured by tools/capture-screenshots.mjs --landing (site/README.md, "The screens"). */
.board {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: clamp(9px, 1.3vw, 14px);
  overflow: hidden;
  background: #4b0f9e; /* the app's default background, while the image loads */
}
.board-shot { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The screensaver it used to be: a logo bouncing corner to corner, then the board wakes up. */
.screensaver {
  position: absolute; inset: clamp(7px, 1.1vw, 13px);
  border-radius: clamp(9px, 1.3vw, 14px);
  background: #030809;
  container-type: size;
  overflow: hidden;
  pointer-events: none;
  animation: ss-out 0.45s var(--ease) 2s forwards;
}
@keyframes ss-out { to { opacity: 0; visibility: hidden; } }
.ss-x { display: block; width: max-content; animation: ss-x 2.9s linear infinite alternate; }
.ss-logo {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.6em; font: 500 clamp(0.7rem, 0.5rem + 0.8vw, 1.05rem) var(--mono); letter-spacing: 0.06em;
  color: var(--s-teal);
  animation: ss-y 1.7s linear infinite alternate, ss-hue 3.4s steps(1) infinite;
}
.ss-logo svg { width: 2em; height: 2em; }
@keyframes ss-x { to { transform: translateX(calc(100cqw - 100%)); } }
@keyframes ss-y { to { transform: translateY(calc(100cqh - 100%)); } }
@keyframes ss-hue { 0% { color: var(--s-teal); } 50% { color: var(--s-accent); } }

/* ---------------------------------------------------------- */
/* Manifesto: one idea per screen (ollivere.co)                  */
/* ---------------------------------------------------------- */

.manifesto {
  display: grid; justify-items: center; gap: clamp(28px, 5vh, 48px);
  padding: clamp(110px, 20vh, 230px) var(--gut) clamp(60px, 10vh, 120px);
  text-align: center;
  overflow-x: clip; /* the clicking cursor comes from the right */
}
.manifesto-line { max-width: 32ch; font-size: clamp(1.2rem, 0.95rem + 1.1vw, 1.9rem); line-height: 1.35; color: var(--muted); text-wrap: balance; }
.manifesto-title { max-width: 17ch; font-size: clamp(2.1rem, 0.9rem + 4.6vw, 5rem); font-stretch: 122%; font-weight: 620; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.manifesto-title em { position: relative; font-style: normal; color: var(--orange-ink); white-space: nowrap; }
/* A cursor comes and clicks the word. */
.manifesto-title em::after {
  content: ""; position: absolute; right: -0.36em; bottom: -0.3em; width: 0.42em; height: 0.56em;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 62%, 58% 66%, 82% 100%, 66% 100%, 42% 70%, 0 92%);
  animation: cursor-click 3.2s var(--ease) infinite;
}
.manifesto-title em::before {
  content: ""; position: absolute; right: -0.12em; bottom: 0.2em; width: 0.5em; height: 0.5em;
  border: 2px solid var(--orange); border-radius: 50%; opacity: 0; transform: translate(50%, 50%) scale(0.2);
  animation: cursor-ripple 3.2s var(--ease) infinite;
}
@keyframes cursor-click {
  0% { transform: translate(0.9em, 0.7em); opacity: 0; }
  25% { transform: translate(0, 0); opacity: 1; }
  34% { transform: translate(0, 0) scale(0.85); }
  42%, 80% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(0.9em, 0.7em); opacity: 0; }
}
@keyframes cursor-ripple {
  0%, 32% { opacity: 0; transform: translate(50%, 50%) scale(0.2); }
  36% { opacity: 1; }
  60%, 100% { opacity: 0; transform: translate(50%, 50%) scale(2.4); }
}

/* ---------------------------------------------------------- */
/* Act without switching windows: a hairline-divided panel       */
/* ---------------------------------------------------------- */

.demo-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-2); border-radius: 24px; overflow: hidden;
  background: color-mix(in oklab, var(--bg) 94%, var(--ink));
}
.demo-card { padding: clamp(18px, 2.4vw, 30px); min-width: 0; }
.demo-card + .demo-card { border-left: 1px solid var(--line-2); }
.demo-card h3 { font-size: 1.4rem; font-stretch: 114%; margin: 22px 0 8px; }
.demo-card > p { color: var(--muted); }
.demo-visual { position: relative; height: clamp(190px, 17vw, 240px); overflow: hidden; border-radius: 14px; background: #4b0f9e; border: 1px solid var(--line-2); }

.demo-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.demo-note { display: block; margin-top: 6px; font: 400 0.84rem var(--mono); color: var(--muted); }

/* ---------------------------------------------------------- */
/* How it works: three outlined numbers on a rail                */
/* ---------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: clamp(2.2rem, 3.4vw, 3.1rem); border-top: 1px dashed var(--line-2); }
.step { position: relative; }
.step-n {
  display: inline-block; padding-right: 0.25em; background: var(--bg);
  font: 700 clamp(4.4rem, 3rem + 3.6vw, 6.4rem)/1 var(--sans); font-stretch: 125%; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--ink);
  margin-bottom: 0.9rem;
}
.step:nth-child(2) .step-n { -webkit-text-stroke-color: var(--orange); }
.step h3 { font-size: 1.4rem; font-stretch: 114%; margin-bottom: 0.5rem; }
.step p:not(.step-n) { color: var(--muted); max-width: 30rem; }

/* ---------------------------------------------------------- */
/* Local-first: a night band with a faint starfield (remix.run)  */
/* ---------------------------------------------------------- */

.night { position: relative; overflow: hidden; padding-bottom: clamp(80px, 13vh, 150px); margin-top: clamp(80px, 13vh, 150px); }
.night::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(227, 235, 233, 0.55), transparent 60%),
    radial-gradient(1px 1px at 68% 12%, rgba(227, 235, 233, 0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 64%, rgba(242, 135, 63, 0.6), transparent 60%),
    radial-gradient(1px 1px at 36% 78%, rgba(227, 235, 233, 0.45), transparent 60%),
    radial-gradient(1px 1px at 52% 42%, rgba(108, 196, 196, 0.5), transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 10%, rgba(108, 196, 196, 0.12), transparent 70%),
    radial-gradient(ellipse 45% 55% at 5% 95%, rgba(242, 135, 63, 0.1), transparent 70%);
  background-size: 260px 260px, 340px 340px, 420px 420px, 300px 300px, 380px 380px, 100% 100%, 100% 100%;
}
.private-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.private-note { margin-top: 1rem; color: var(--muted); font-size: 0.98rem; max-width: 40rem; }
.ai-pitch {
  margin-top: 2rem; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 18px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
}
.ai-pitch h3 { font-size: 1.25rem; font-stretch: 110%; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 10px; }
.ai-spark { flex: none; width: 11px; height: 11px; background: var(--orange); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.ai-pitch p { color: var(--muted); }
.ai-pitch em { font-style: normal; color: var(--ink); font-weight: 600; }
.private-stats { margin: 0; display: grid; font-family: var(--mono); }
.pstat { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-2); }
.pstat dt { font-size: 0.92rem; color: var(--muted); }
.pstat dd { margin: 0; font: 600 clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem)/1 var(--sans); font-stretch: 125%; color: var(--orange-ink); }

/* ---------------------------------------------------------- */
/* Widget library: stickers                                      */
/* ---------------------------------------------------------- */

.chip-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 10px; max-width: 64rem; }
.chip {
  --r: -1.5deg;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 13px;
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bg);
  box-shadow: 0 3px 0 var(--ink);
  font-size: 1rem; font-weight: 520;
  transform: rotate(var(--r));
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.chip:nth-child(3n + 1) { --r: 1.2deg; }
.chip:nth-child(4n + 2) { --r: -0.6deg; }
.chip:nth-child(5n) { --r: 2deg; }
.chip:hover { transform: rotate(0) translateY(-2px); box-shadow: 0 5px 0 var(--orange); }
.chip svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--logo-t); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chip:nth-child(3n) svg { stroke: var(--orange); }
.chip-tag { font: 500 0.7rem var(--mono); color: var(--bg); background: var(--orange-ink); padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.chip--more { font: 400 0.92rem var(--mono); color: var(--muted); border-style: dashed; border-color: var(--line-2); box-shadow: none; }
.works-with { margin-top: clamp(28px, 5vh, 48px); font: 400 0.95rem/1.7 var(--mono); color: var(--muted); max-width: 64rem; }
.works-label { color: var(--orange-ink); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; margin-right: 0.6em; }

/* ---------------------------------------------------------- */
/* Boards for your craft: a train of cards (ollivere.co)         */
/* ---------------------------------------------------------- */

.craft-track {
  display: flex; gap: clamp(14px, 2vw, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px 2px 34px; margin: 0 -2px;
  scrollbar-width: thin;
}
.craft-track:focus-visible { outline-offset: 6px; }
.craft-card {
  position: relative; flex: none; width: min(84vw, 330px); scroll-snap-align: start;
  padding: 22px 22px 24px; border: 1.5px solid var(--ink); border-radius: 20px; background: var(--bg);
}
/* The coupling between two wagons, and their wheels. */
.craft-card + .craft-card::before { content: ""; position: absolute; left: calc(-1 * clamp(14px, 2vw, 24px) - 1.5px); width: clamp(14px, 2vw, 24px); top: 62%; border-top: 2px solid var(--ink); }
.craft-card::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -15px; height: 14px;
  background: radial-gradient(circle at 7px 7px, var(--ink) 5px, var(--bg) 5.5px, var(--bg) 7px, transparent 7.5px) left / 14px 14px no-repeat,
              radial-gradient(circle at 7px 7px, var(--ink) 5px, var(--bg) 5.5px, var(--bg) 7px, transparent 7.5px) right / 14px 14px no-repeat;
}
.craft-role { font: 500 0.85rem var(--mono); color: var(--orange-ink); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.craft-card h3 { font-size: 1.35rem; font-stretch: 114%; margin-bottom: 0.6rem; }
.craft-card > p { color: var(--muted); margin-bottom: 1rem; }
.craft-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.craft-stack li { font: 400 0.82rem var(--mono); color: var(--muted); padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 999px; }
/* Wide screens: the section pins and the train rolls sideways with the scroll. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1000px) and (min-height: 640px) {
    .craft-section { height: 240vh; padding-top: 0; padding-bottom: 0; view-timeline: --craft block; }
    .craft-pin {
      position: sticky; top: var(--head-h);
      height: calc(100vh - var(--head-h)); display: flex; flex-direction: column; justify-content: center;
      overflow: hidden; container-type: inline-size;
    }
    .craft-track { overflow: visible; width: max-content; scroll-snap-type: none; animation: craft-roll linear both; animation-timeline: --craft; animation-range: contain 0% contain 100%; }
    .craft-card { width: 340px; }
  }
}
@keyframes craft-roll { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100cqw)); } }

/* ---------------------------------------------------------- */
/* Pricing                                                      */
/* ---------------------------------------------------------- */

.price-early { max-width: 62rem; margin: 0 0 22px; padding: 14px 18px; border: 1px solid var(--orange); border-radius: 14px; background: color-mix(in oklab, var(--orange) 8%, var(--bg)); }
.price-early strong { color: var(--orange-ink); }
.price-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 22px; align-items: stretch; max-width: 62rem; }
.price-card { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line-2); border-radius: 24px; }
.price-card--pro { position: relative; overflow: hidden; border-color: var(--line-2); box-shadow: 0 40px 70px -40px rgba(6, 20, 22, 0.7); }
.price-card--pro::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 100% 0, rgba(242, 135, 63, 0.18), transparent 70%), radial-gradient(ellipse 50% 50% at 0 100%, rgba(108, 196, 196, 0.12), transparent 70%); }
.price-card--pro > * { position: relative; }
.price-card--pro .btn-primary { background: var(--orange); border-color: var(--orange); color: #1a0d03; }
.price-card--pro .btn-primary::after { color: #1a0d03; }
.price-card--pro .btn-primary:hover { background: #f2873f; }
.price-badge { display: inline-block; font: 500 0.78rem var(--mono); letter-spacing: 0.04em; color: var(--orange-ink); border: 1px solid var(--orange); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.price-name { font-size: 1.5rem; font-stretch: 114%; margin-bottom: 6px; }
.price-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 18px; }
.price-amount { font: 640 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--sans); font-stretch: 125%; letter-spacing: -0.04em; }
.price-period { font: 400 0.9rem var(--mono); color: var(--muted); }
.price-list { list-style: none; margin: 0 0 6px; padding: 0; }
.price-list li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--line); color: var(--muted); }
.price-list li::before { content: ""; position: absolute; left: 2px; top: 1.1em; width: 7px; height: 7px; background: var(--orange); }
.price-fine { margin-top: 10px; font-size: 0.92rem; color: var(--muted); }
.download-slot { margin-top: 22px; padding-top: 22px; border-top: 1px dashed var(--line-2); display: grid; gap: 10px; }
.download-cta { width: 100%; }
.download-note { font: 400 0.88rem var(--mono); color: var(--muted); text-align: center; }

/* First launch of an unsigned build (src/test/install-help.test.ts). */
.install-help { max-width: 62rem; margin-top: 22px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 14px; color: var(--muted); font-size: 0.98rem; }
.install-help summary { cursor: pointer; color: var(--ink); }
.install-help-body { display: grid; gap: 10px; margin-top: 12px; }
.install-help ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 6px; }
.install-help strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------- */
/* FAQ                                                          */
/* ---------------------------------------------------------- */

.faq { max-width: 54rem; border-bottom: 1px solid var(--line-2); }
.faq-item { border-top: 1px solid var(--line-2); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem); font-weight: 560; font-stretch: 108%;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--orange), var(--orange)) center / 100% 2px no-repeat, linear-gradient(var(--orange), var(--orange)) center / 2px 100% no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 22px; color: var(--muted); max-width: 46rem; }
.faq-more { margin-top: 1.4rem; color: var(--muted); }

/* ---------------------------------------------------------- */
/* The beta program: the form                                   */
/* ---------------------------------------------------------- */

.beta { margin-top: clamp(80px, 13vh, 150px); padding-bottom: clamp(80px, 13vh, 150px); }
.beta-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem 6vw; align-items: start; }
.beta-intro h2 { font-size: clamp(2.4rem, 1.2rem + 4vw, 5.2rem); font-stretch: 125%; line-height: 0.96; letter-spacing: -0.04em; text-wrap: balance; }
.beta-intro p { margin-top: 1.2rem; color: var(--muted); font-size: 1.12rem; max-width: 30rem; }
.beta-points { list-style: none; margin: 1.4rem 0 0; padding: 0; font: 400 0.92rem/1.45 var(--mono); max-width: 30rem; }
.beta-points li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.beta-points li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 0.45em; background: var(--orange); }

.beta-form {
  display: grid; gap: 1.2rem;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line-2); border-radius: 24px;
  background: var(--bg);
  box-shadow: 0 30px 60px -45px rgba(6, 20, 22, 0.5);
}
.beta-form label { display: block; font-weight: 540; }
.beta-form label > input:not([type="radio"]):not([type="checkbox"]), .beta-form label > select { display: block; margin-top: 8px; }
.beta-form .optional { margin-left: 0.4em; font: 400 0.85rem var(--mono); color: var(--muted); }
.beta-form input[type="email"], .beta-form input[type="text"], .beta-form select {
  width: 100%; font: 400 1.05rem/1.4 var(--sans); color: var(--ink);
  background: color-mix(in oklab, var(--bg) 70%, var(--bg-alt));
  border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px;
}
.beta-form input:focus-visible, .beta-form select:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.beta-form [aria-invalid="true"] { border-color: var(--error); }
.choices, .chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices legend, .chips legend { font-weight: 540; margin-bottom: 10px; padding: 0; }
.choices { display: grid; gap: 8px; }
.beta-form .choice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; font-weight: 400; cursor: pointer; }
.choice input { margin: 0.2em 0 0; accent-color: var(--orange); width: 1.05em; height: 1.05em; flex: none; }
.choice span { display: block; }
.choice small { display: block; color: var(--muted); font-size: 0.92rem; }
.choice:has(input:checked) { border-color: var(--orange); background: color-mix(in oklab, var(--orange) 9%, transparent); }
.chips { display: block; }
.chips legend { display: block; }
.beta-form .chips label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; margin: 0 8px 8px 0; border: 1px solid var(--line-2); border-radius: 999px; font-weight: 400; cursor: pointer; }
.chips input { margin: 0; accent-color: var(--orange); }
.chips label:has(input:checked) { border-color: var(--orange); background: color-mix(in oklab, var(--orange) 12%, transparent); }
.chips .soon { font: 400 0.8rem var(--mono); }
.beta-only[hidden] { display: none; }
.consent { font-size: 0.93rem; color: var(--muted); }
.beta-form .btn { justify-self: start; }
.status { min-height: 1.4em; font: 400 0.98rem var(--mono); }
.status.ok { color: var(--ok); }
.status.error { color: var(--error); }
.beta-form.sent > :not(.status) { display: none; }
.beta-form.sent .status { font-size: 1.15rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.beta-fallback { display: grid; gap: 12px; }

/* ---------------------------------------------------------- */
/* Footer: the giant wordmark (remix.run)                        */
/* ---------------------------------------------------------- */

.foot { overflow: hidden; }
.foot-mark {
  flex-basis: 100%; max-width: none !important; margin-top: clamp(20px, 5vh, 56px);
  font: 800 min(13.6vw, 14rem)/0.9 var(--sans); font-stretch: 125%; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px var(--line-2);
  text-align: center; white-space: nowrap; user-select: none;
}
.foot-mark em { font-style: normal; -webkit-text-stroke-color: color-mix(in oklab, var(--orange) 70%, transparent); }

/* Local-preview-only reminder of unconfigured founder knobs (see app.js). */
.dev-banner { position: sticky; top: 0; z-index: 100; padding: 8px 16px; font: 500 0.8rem var(--mono); text-align: center; color: #1a1204; background: #e9c46a; }

/* ---------------------------------------------------------- */
/* Smaller screens (mobile first: no horizontal scroll at 375 px) */
/* ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .private-panel, .beta-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-card + .demo-card { border-left: 0; border-top: 1px solid var(--line-2); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps::before { display: none; }
}
@media (max-width: 760px) {
  :root { --head-h: 62px; }
  .price-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .monitor-stand { width: 26%; }
  .hero-meta { flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 18px; font-size: 0.84rem; }
  .hero-meta li { display: block; }
  .hero-meta li::before { display: inline-block; margin-right: 9px; vertical-align: 0.15em; }
}
@media (max-width: 480px) {
  .live-dot { display: none; }
}

/* ---------------------------------------------------------- */
/* Reduced motion — everything settles, nothing loops            */
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .screensaver { display: none; }
  .live-dot { animation: none; }
  .manifesto-title em::after { animation: none; transform: none; opacity: 1; }
  .manifesto-title em::before { animation: none; opacity: 0; }
}