/* ============================================================
   Lingset public site — marketing homepage (Atelier v2), privacy
   policy, and the waitlist landings. Server-rendered (app/site);
   Alpine hydrates the homepage demos (static/site.js).

   Ported from the design project ("French Tools"): brand/tokens.css
   (.bw-salut world), home/base.css, home/atelier.css,
   home/atelier2.css, and the privacy policy page's document styles
   (scoped .pp). Prototype scaffolding (direction switcher, tweaks
   panel) is dropped.
   ============================================================ */

/* ---- self-hosted fonts (vendored from the SPA's @fontsource packages) ---- */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/instrument-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/space-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/space-mono-latin-700-normal.woff2") format("woff2"); }

/* ---- document base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff7ec; }
html { scroll-behavior: smooth; }
button, input { font-family: inherit; }

/* The nav is sticky, so anchor targets need clearance — without this the browser scrolls
   the target to the viewport's very top, hidden underneath the nav pill. */
#at-join { scroll-margin-top: 130px; }

/* Alpine: hide alternate island states until it boots (each island's first state has no
   x-cloak, so the no-JS page shows exactly one state per demo). */
[x-cloak] { display: none !important; }

/* ---- Salut brand world (token values mirror theme.css; design names) ---- */
.bw-salut {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg: #fff7ec;          /* Crème */
  --bg-2: #fffaf2;
  --surface: #ffffff;
  --ink: #372d44;         /* Encre */
  --ink-soft: #5b5168;
  --muted: #8a8194;
  --line: #372d44;
  --hairline: #ece4d8;

  --signature: oklch(0.74 0.13 40);     /* Abricot — coral */
  --signature-ink: #372d44;
  --signature-soft: oklch(0.93 0.05 40);
  --support: oklch(0.86 0.11 95);        /* Tournesol — sunflower */
  --support-soft: oklch(0.95 0.05 95);
  --mint: oklch(0.8 0.11 155);           /* Menthe */
  --mint-soft: oklch(0.94 0.04 155);
  --sky: oklch(0.78 0.09 245);           /* Ciel */
  --sky-soft: oklch(0.94 0.03 245);

  --good: oklch(0.66 0.13 155);
  --good-soft: oklch(0.92 0.06 155);

  --ink-bg: #372d44;

  --bw: 2px;
  --radius-lg: 24px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 4px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-lg: 6px 7px 0 var(--ink);
}
.bw-salut a { color: inherit; }
.bw-salut a:hover { color: oklch(0.62 0.155 40); }

/* ---- waitlist form core (visual dress comes from .at-wl) ---- */
/* The wrapper (form + its error/dev-link note) owns the width: without a definite width the
   form's flex row sizes to its min-content (the input's intrinsic size + the nowrap button),
   which is wider than a phone — as a column-flex item in the finale it would overflow. */
/* The waitlist honeypot (see site.waitlist_join). Taken out of the flow entirely — absolute,
   off-screen, zero-sized, unclickable — so it can't widen the row, catch a tap or take focus,
   while still being a rendered field a form-filling bot will happily complete. Deliberately
   NOT `display: none` / `hidden`: the bots worth catching skip what isn't rendered. */
.wl-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.bw-salut .wl-wrap { width: 100%; max-width: 470px; min-width: 0; }
.bw-salut .wl { display: flex; align-items: stretch; gap: 10px; max-width: 460px; }
.bw-salut .wl input { flex: 1; min-width: 0; font-size: 15px; outline: none; font-family: inherit; }
.bw-salut .wl button { cursor: pointer; white-space: nowrap; font-family: inherit; }
.bw-salut .wl-done { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.bw-salut .wl-done .wl-tick {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: oklch(0.5 0.12 155); color: #fff; font-size: 12px;
}

/* ============================================================
   Atelier — playful product-craft: hard shadows, tilt, stickers,
   mini-UI inside tiles. (home/atelier.css)
   ============================================================ */
.at {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.at ::selection { background: var(--support-soft); }
.at .at-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.at .mono { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

/* ---- nav ---- */
.at-nav { position: sticky; top: 14px; z-index: 50; padding: 0 clamp(14px, 3vw, 28px); }
.at-nav-in {
  max-width: 1080px; margin: 0 auto; background: var(--surface);
  border: var(--bw) solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 10px 12px 10px 20px;
}
.at-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.at-nav-links { display: flex; gap: 26px; font-weight: 600; font-size: 15px; }
.at-nav-links a { text-decoration: none; color: var(--ink-soft); }
.at-nav-links a:hover { color: var(--ink); }
.at-btn {
  appearance: none; cursor: pointer; border: var(--bw) solid var(--ink);
  background: var(--signature); color: var(--signature-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  border-radius: 999px; padding: 10px 20px; box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
}
a.at-btn { display: inline-block; text-decoration: none; }
/* Buttons-as-links keep the button's own ink at rest AND on hover — otherwise the
   page-level link hover (.bw-salut a:hover, coral-on-coral) and the doc pages' red links
   (.pp a) bleed into the button text. */
.bw-salut a.at-btn,
.bw-salut a.at-btn:hover { color: var(--signature-ink); }
.at-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.at-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ---- hero ---- */
.at-hero { padding: clamp(48px, 8vh, 96px) 0 clamp(48px, 8vh, 90px); }
.at-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.at-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--support-soft); border: var(--bw) solid var(--ink); border-radius: 999px;
  padding: 7px 14px; margin-bottom: 26px;
}
.at-kicker .d { width: 8px; height: 8px; border-radius: 50%; background: var(--signature); }
.at-h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.05em;
  font-size: clamp(46px, 5.4vw, 82px); line-height: 1.0; margin: 0 0 20px; text-wrap: balance;
}
.at-h1 .dot { color: var(--signature); }
.at-sub { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-soft); margin: 0 0 30px; max-width: 30em; text-wrap: pretty; }
.at-sub b { color: var(--ink); }

.at .wl.at-wl { max-width: 470px; background: var(--surface); border: var(--bw) solid var(--ink); border-radius: 999px; box-shadow: var(--shadow); padding: 6px; gap: 6px; }
/* The input is borderless inside the pill, so the pill itself carries the visible focus
   state — a soft ring whenever the field (or button) has focus. */
.at .wl.at-wl:focus-within { box-shadow: var(--shadow), 0 0 0 3px var(--signature-soft); }
/* One-shot attention pulse when the nav CTA lands on the form (site.js re-arms it per
   click); an expanding coral ring that fades out. */
@media (prefers-reduced-motion: no-preference) {
  .at .wl.at-wl.wl-attn { animation: wlattn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes wlattn {
    0% { box-shadow: var(--shadow), 0 0 0 0 oklch(0.74 0.13 40 / 0.55); }
    70% { box-shadow: var(--shadow), 0 0 0 14px oklch(0.74 0.13 40 / 0); }
    100% { box-shadow: var(--shadow), 0 0 0 0 oklch(0.74 0.13 40 / 0); }
  }
}
.at .wl.at-wl input { border: 0; background: transparent; padding: 10px 16px; font-size: 15.5px; color: var(--ink); }
.at .wl.at-wl input::placeholder { color: var(--muted); }
.at .wl.at-wl button {
  border: var(--bw) solid var(--ink); background: var(--signature); color: var(--signature-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; border-radius: 999px;
  padding: 10px 20px; transition: transform 0.15s;
}
.at .wl.at-wl button:hover { transform: translateY(-1px); }
.at .wl.at-wl button:disabled { opacity: 0.7; transform: none; cursor: default; }
.at .at-wl-note { margin-top: 13px; font-size: 13.5px; color: var(--muted); }
.at .wl-done.at-wl { background: var(--good-soft); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); padding: 14px 20px; font-size: 15px; }

/* ---- band ---- */
.at-band { background: var(--ink-bg); color: var(--bg-2); padding: 16px 0; border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); }
.at-band-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; align-items: center; }
.at-band .it { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.at-band .it .d { width: 9px; height: 9px; border-radius: 50%; }

/* ---- tool tiles ---- */
.at-tools { padding: clamp(56px, 9vh, 104px) 0; }
.at-sec-head { text-align: center; max-width: 620px; margin: 0 auto clamp(36px, 6vh, 60px); }
.at-h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; margin: 10px 0 14px; text-wrap: balance; }
.at-lead { color: var(--ink-soft); font-size: 17px; line-height: 1.55; margin: 0; text-wrap: pretty; }
.at-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); }
.at-tile {
  border: var(--bw) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 18px;
  transition: transform 0.2s, box-shadow 0.2s; background: var(--surface);
}
.at-tile:hover { transform: translate(-2px, -2px); box-shadow: 6px 7px 0 var(--ink); }
.at-tile h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: 24px; margin: 0; }
.at-tile > p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.at-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.at-mini {
  border: var(--bw) solid var(--ink); border-radius: var(--radius); background: var(--bg-2);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px;
}
.at-mini .row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.at-chip { border: var(--bw) solid var(--ink); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; }
.at-chip.hot { background: var(--signature); color: var(--signature-ink); }
.at-mini .fr { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; }
.at-mini .fr u { text-decoration: none; border-bottom: 2.5px dotted var(--signature); }
.at-mini .quiet { color: var(--muted); font-size: 12px; }
.at-mini del { color: var(--muted); text-decoration-color: var(--signature); }
.at-mini .fix { color: var(--good); font-weight: 700; }

/* ---- tap-to-card flow ---- */
.at-flow { padding: 0 0 clamp(64px, 10vh, 110px); }
.at-flow-in {
  border: var(--bw) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  background: var(--support-soft); padding: clamp(26px, 4vw, 48px);
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: clamp(14px, 2vw, 26px); align-items: center;
}
.at-flow-step { display: flex; flex-direction: column; gap: 12px; }
.at-flow-step .cap { color: var(--ink-soft); }
.at-flow-card { background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; font-size: 14.5px; }
.at-flow-card .fr { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.at-arrow { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--ink); }
.at-sched-dots { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--ink-soft); }
.at-sched-dots .p { border: var(--bw) solid var(--ink); background: var(--surface); border-radius: 999px; padding: 3px 9px; }
.at-sched-dots .p.done { background: var(--mint); }

/* ---- finale ---- */
.at-fin { padding: 0 0 110px; }
.at-fin-in {
  border: var(--bw) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  background: var(--ink-bg); color: var(--bg-2); text-align: center;
  padding: clamp(48px, 8vh, 84px) clamp(22px, 5vw, 60px);
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.at-fin .at-h2 { color: #fffaf2; margin: 0; }
.at-fin p { margin: 0; color: rgba(255, 250, 242, 0.75); font-size: 16.5px; max-width: 30em; }
.at-fin .at2-consent { font-size: 12.5px; color: rgba(255, 250, 242, 0.6); }
.at-fin .at2-consent a { color: rgba(255, 250, 242, 0.85); }
.at-fin .wl.at-wl, .at-fin .wl-done.at-wl { margin: 0 auto; }
.at-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 0 60px; color: var(--muted); font-size: 13.5px; flex-wrap: wrap; }

@media (max-width: 920px) {
  .at-nav-links { display: none; }
  /* minmax(0, …), not bare 1fr: a bare 1fr track's floor is the content's min-content, and
     the waitlist row (input's intrinsic size + the nowrap button) is wider than a phone —
     the track must be allowed to shrink to the viewport. */
  .at-hero-in { grid-template-columns: minmax(0, 1fr); }
  .at-grid { grid-template-columns: minmax(0, 1fr); }
  .at-flow-in { grid-template-columns: minmax(0, 1fr); }
  .at-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ============================================================
   Atelier v2 additions: interactive persona demo, tap-to-card
   flow, gradeable review stack, "why it sticks" stats.
   (home/atelier2.css)
   ============================================================ */
.at { --sec: clamp(88px, 13vh, 150px); }
.at .at-wrap { max-width: 1160px; }
.at .at-hero { padding-top: clamp(56px, 9vh, 104px); padding-bottom: clamp(72px, 11vh, 120px); }
.at .at-hero-in { gap: clamp(40px, 6vw, 96px); }
.at .at-band { padding-top: 19px; padding-bottom: 19px; }
.at .at-tools { padding-top: var(--sec); padding-bottom: 0; }
.at .at-grid { gap: clamp(22px, 2.8vw, 34px); }
.at .at-tile > .at-mini, .at .at-tile > .at2-review { margin-top: auto; }
.at .at-flow { padding-top: clamp(64px, 9vh, 104px); padding-bottom: 0; }
.at .at-flow-in { background: var(--surface); padding: clamp(32px, 4.5vw, 56px); column-gap: clamp(22px, 3vw, 44px); row-gap: 28px; }
.at .at2-flow-label { text-align: center; color: var(--muted); margin-bottom: 18px; }
.at .at2-why { padding-top: var(--sec); padding-bottom: 0; }
.at .at-fin { padding-top: var(--sec); padding-bottom: 0; }
.at .at-foot { padding-top: 34px; padding-bottom: 96px; }

/* ---- hero chat demo (styled after the app's Write thread) ---- */
.at2-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px; border-bottom: 1px solid var(--hairline); background: var(--bg-2);
}
.at2-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: var(--bw) solid var(--ink); background: var(--signature-soft);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink);
}
.at2-head .nm { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; line-height: 1.2; }
.at2-head .sub { font-size: 12px; color: var(--muted); line-height: 1.3; }
.at2-head .try { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--signature); text-align: right; }
.at2-body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 12px; }
.at2-bubble-user {
  align-self: flex-end; max-width: 88%;
  background: var(--ink); color: #fdf6ea;
  border-radius: 16px 16px 5px 16px; padding: 11px 15px;
  font-size: 14px; line-height: 1.5;
}
.at2-reply {
  align-self: stretch; margin-right: 9%;
  border: var(--bw) solid var(--ink); border-radius: 16px 16px 16px 5px;
  background: var(--surface); padding: 12px 15px 11px;
}
.at2-rlabel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.at2-rlabel .reg { color: var(--signature); }
.at2-fr-block { min-height: 152px; display: flex; flex-direction: column; }
.at2-fr {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em;
  font-size: 19px; line-height: 1.35; margin: 0 0 8px;
}
.at2-fr u { text-decoration: none; border-bottom: 2.5px dotted var(--signature); }
.at2-note { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.at2-hint { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hairline); font-size: 11.5px; color: var(--muted); }
.at2-hint .spark { color: var(--signature); }
.at2-compo { display: flex; align-items: center; gap: 9px; padding: 0 18px 18px; }
.at2-compo .field {
  flex: 1; display: flex; align-items: center; gap: 8px;
  border: var(--bw) solid var(--ink); border-radius: 999px; background: var(--surface);
  padding: 10px 16px; font-size: 13.5px; color: var(--muted);
}
.at2-compo .cur { display: inline-block; width: 2px; height: 15px; background: var(--signature); flex: none; }
.at2-compo .send {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--signature); border: var(--bw) solid var(--ink);
  display: grid; place-items: center; color: var(--ink); font-size: 15px;
  box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .at2-compo .cur { animation: at2blink 1.1s steps(1) infinite; }
  @keyframes at2blink { 50% { opacity: 0; } }
}

/* ---- look-up tile demo ---- */
.at2-cmd { appearance: none; cursor: pointer; transition: transform 0.15s, background 0.15s; }
.at2-cmd:hover { transform: translateY(-1px); }
.at2-lookup-out { min-height: 66px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }

/* ---- hero persona demo ---- */
.at2-stage { position: relative; display: flex; justify-content: center; }
.at2-stage .at-sticker {
  position: absolute; bottom: -20px; left: -6px; z-index: 3; transform: rotate(-5deg);
  background: var(--support); border: var(--bw) solid var(--ink); border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: 10px 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em;
}
.at2-demo {
  position: relative; z-index: 2; width: 100%; max-width: 460px;
  background: var(--surface); border: var(--bw) solid var(--ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transform: rotate(-1.5deg);
}
.at2-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.at2-chip {
  appearance: none; cursor: pointer; border: var(--bw) solid var(--ink);
  background: var(--surface); border-radius: 999px; padding: 6px 13px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink);
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.at2-chip:hover { transform: translateY(-1px); }
.at2-chip.hot { background: var(--signature); color: var(--signature-ink); }
@media (prefers-reduced-motion: no-preference) {
  .at2-fade { animation: at2fade 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes at2fade { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
}

/* ---- tap-a-word ---- */
.tap-word {
  appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; color: inherit; border-bottom: 2.5px dotted var(--signature);
  position: relative;
}
.tap-word:hover { background: var(--signature-soft); }
@media (prefers-reduced-motion: no-preference) {
  .tap-word.pulse { animation: at2pulse 1.6s ease-in-out infinite; }
  @keyframes at2pulse {
    0%, 100% { background: transparent; }
    50% { background: var(--signature-soft); }
  }
}

/* flow states */
.at2-slot {
  border: var(--bw) dashed var(--muted); border-radius: var(--radius);
  padding: 16px; font-size: 13px; color: var(--muted); text-align: center;
  min-height: 74px; display: grid; place-items: center;
}
@media (prefers-reduced-motion: no-preference) {
  .at2-pop { animation: at2pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
  @keyframes at2pop { from { opacity: 0; transform: scale(0.82) rotate(-2deg); } to { opacity: 1; transform: none; } }
}
.at-sched-dots .p { transition: background 0.3s, transform 0.3s; }
.at-sched-dots.wait .p { background: var(--surface); }
.at-sched-dots.go .p.done { background: var(--mint); }
@media (prefers-reduced-motion: no-preference) {
  .at-sched-dots.go .p.done { animation: at2dot 0.35s ease backwards; }
  .at-sched-dots.go .p.done:nth-child(2) { animation-delay: 0.18s; }
  .at-sched-dots.go .p.done:nth-child(3) { animation-delay: 0.36s; }
  @keyframes at2dot { from { transform: scale(0.7); background: var(--surface); } }
}

/* ---- review demo (inside Remember tile) ---- */
.at2-review { display: flex; flex-direction: column; gap: 10px; }
.at2-rstage { position: relative; min-height: 96px; }
.at2-rcard {
  position: absolute; inset: 0;
  background: var(--surface); border: var(--bw) solid var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 13px 16px; display: flex; flex-direction: column; gap: 5px; justify-content: center;
  transition: transform 0.28s cubic-bezier(0.5, 0, 0.9, 0.4), opacity 0.28s;
}
.at2-rcard .q { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.at2-rcard .a { font-size: 13px; color: var(--good); font-weight: 700; }
.at2-rcard .q .blank { display: inline-block; min-width: 58px; border-bottom: 3px solid var(--signature); transform: translateY(-2px); }
.at2-rcard.leave-again { transform: translateX(-115%) rotate(-7deg); opacity: 0; }
.at2-rcard.leave-good { transform: translateX(115%) rotate(7deg); opacity: 0; }
.at2-rcard.leave-easy { transform: translateY(-110%) rotate(3deg); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .at2-rcard.enter { animation: at2pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
}
.at2-grades { display: flex; gap: 7px; }
.at2-grade {
  appearance: none; cursor: pointer; flex: 1; border: var(--bw) solid var(--ink);
  background: var(--surface); border-radius: 999px; padding: 8px 4px; min-height: 38px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  transition: transform 0.15s, background 0.15s;
}
.at2-grade:hover { transform: translateY(-1px); }
.at2-grade.g-again:hover { background: var(--signature-soft); }
.at2-grade.g-good { background: var(--mint-soft); }
.at2-grade.g-good:hover { background: var(--mint); }
.at2-grade.g-easy:hover { background: var(--sky-soft); }
.at2-rnext { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--ink-soft); min-height: 16px; }
.at2-rnext b { color: var(--good); }

/* ---- why it sticks (open section — no outer box) ---- */
.at2-why-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.at2-stats {
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface); border: var(--bw) solid var(--ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 12px clamp(22px, 2.6vw, 34px);
}
.at2-stat {
  display: grid; grid-template-columns: minmax(128px, auto) 1fr; gap: 20px; align-items: center;
  padding: 20px 0; border-bottom: var(--bw) dashed var(--hairline);
}
.at2-stat:last-child { border-bottom: 0; }
.at2-stat .n {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(34px, 3.4vw, 50px); line-height: 1; color: var(--ink);
}
.at2-stat .n em { font-style: normal; color: var(--signature); }
.at2-stat .d { font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.at2-timeline { display: flex; align-items: center; margin-top: 26px; }
.at2-timeline .p {
  border: var(--bw) solid var(--ink); background: var(--bg-2); border-radius: 999px;
  padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; white-space: nowrap;
}
.at2-timeline .c { height: 2px; background: var(--ink); opacity: 0.25; }
.at2-timeline .c1 { width: 6px; } .at2-timeline .c2 { width: 12px; }
.at2-timeline .c3 { width: 22px; } .at2-timeline .c4 { width: 38px; } .at2-timeline .c5 { width: 58px; }
.at2-timeline .p.last { background: var(--mint); }
.at2-timeline-cap { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 920px) {
  .at2-why-grid { grid-template-columns: 1fr; }
  .at2-demo { margin: 0 auto; transform: none; }
  .at2-stage .at-sticker { bottom: -18px; left: 2px; }
  .at2-timeline { flex-wrap: wrap; gap: 6px; }
  .at2-timeline .c { display: none; }
}

/* ============================================================
   Document pages — privacy policy + waitlist landings.
   (Lingset - Privacy Policy.html, restated on the salut tokens.)
   ============================================================ */
.pp { max-width: 760px; margin: 0 auto; padding: clamp(56px, 9vh, 104px) clamp(20px, 4vw, 48px) 40px; }
.pp .pp-head { border-bottom: var(--bw) solid var(--ink); padding-bottom: 28px; margin-bottom: 12px; }
.pp .at-kicker { margin-bottom: 22px; }
.pp h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(38px, 5vw, 56px); line-height: 1.02; margin: 0 0 14px; }
.pp .pp-updated { color: var(--muted); font-size: 14px; }
.pp .pp-lede { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 26px 0 0; text-wrap: pretty; }
.pp .pp-lede b { color: var(--ink); }
.pp section { padding: 30px 0 6px; border-bottom: 1px solid var(--hairline); }
.pp section:last-of-type { border-bottom: 0; }
.pp h2 { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; font-size: 23px; margin: 0 0 12px; }
.pp h2 .n { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--signature); }
.pp p, .pp li { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; text-wrap: pretty; }
.pp p b, .pp li b { color: var(--ink); font-weight: 650; }
.pp ul { margin: 0 0 14px; padding-left: 22px; }
.pp li { margin-bottom: 8px; }
.pp .pp-callout {
  background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 18px 22px; margin: 6px 0 20px; font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
.pp .pp-callout b { color: var(--ink); }
.pp a { color: #c25f3d; }
.pp a:hover { color: var(--ink); }
.pp-foot {
  max-width: 760px; margin: 0 auto; padding: 20px clamp(20px, 4vw, 48px) 80px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--muted); font-size: 13.5px; border-top: var(--bw) solid var(--ink);
}

/* waitlist confirm/unsubscribe landings share the document dress */
.pp .pp-actions { margin-top: 26px; }

/* ---- server-rendered chrome bits (were inline styles / React components in the SPA) ---- */
.at-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -0.05em; color: var(--ink); line-height: 1; }
.at-wordmark b { color: #e8835f; font-weight: 800; }
.at2-lookup-dim { font-weight: 400; font-size: 13.5px; color: var(--ink-soft); }
.at2-flow-cap { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.at-foot-brand { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   v3 hero — the tutor phone loop. (home/atelier3.css)
   ============================================================ */
.at .at-hero { padding-top: clamp(48px, 8vh, 88px); }
.hxa-stage { position: relative; display: flex; justify-content: center; }
.hxa-phone {
  width: 382px; max-width: 100%;
  background: var(--bg-2); border: 3px solid var(--ink); border-radius: 48px;
  box-shadow: var(--shadow-lg); transform: rotate(-2deg);
  overflow: hidden; display: flex; flex-direction: column;
}
.hxa-status { display: flex; justify-content: space-between; align-items: center; padding: 16px 26px 8px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--ink); }
.hxa-status .pips { display: flex; gap: 4px; }
.hxa-status .pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: 0.8; }
.hxa-phone .at2-head { background: transparent; }
.hxa-msgs { padding: 16px 16px 4px; display: flex; flex-direction: column; gap: 11px; min-height: 326px; }
.hxa-msgs .at2-reply { margin-right: 6%; }
.hxa-msgs .at2-fr { font-size: 17px; margin-bottom: 6px; }
.hxa-msgs del { color: var(--muted); text-decoration-color: var(--signature); }
.hxa-msgs .fix { color: var(--good); font-weight: 700; }
.hxa-typing {
  align-self: flex-start; border: var(--bw) solid var(--ink); background: var(--surface);
  border-radius: 16px 16px 16px 5px; padding: 13px 16px; display: flex; gap: 5px;
}
.hxa-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .hxa-typing i { animation: hxty 1s ease-in-out infinite; }
  .hxa-typing i:nth-child(2) { animation-delay: 0.15s; }
  .hxa-typing i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes hxty { 50% { transform: translateY(-4px); opacity: 0.5; } }
}
.hxa-cardchip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  border: var(--bw) solid var(--ink); background: var(--support-soft); border-radius: 999px;
  padding: 7px 14px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
}
.hxa-cardchip .spark { color: var(--signature); }
.hxa-stage .at-sticker {
  position: absolute; right: -20px; bottom: 70px; z-index: 3; transform: rotate(7deg);
  background: var(--support); border: var(--bw) solid var(--ink); border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: 10px 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em;
}
@media (max-width: 920px) {
  .hxa-phone { transform: none; }
  .hxa-stage .at-sticker { right: 2px; bottom: -18px; }
}