/* ===========================================================================
   voicer — claymation skin.

   The site's structure stays in style.css + pages.css; this file repaints it.
   Two jobs, in this order:

     1. Re-point the site's own tokens (--bg, --surface, --text, --violet …)
        at the Clay Kit's palette, which carries most rules across on its own
        because style.css was written against var()s.
     2. Override, by hand, every rule that hardcodes a colour or a neon effect.
        Token re-pointing cannot reach those, and a single missed one shows up
        as a glowing purple edge on a page made of clay — so they are all
        listed below, grouped by the file and section they come from.

   Palette and type come from assets/clay/clay.css (the shared Clay Kit, kept
   byte-identical to ~/Dev/clay-templates so it can be re-synced). Pictures come
   from assets/clay/img (the shared clay library). Load order in every page is:
   clay.css → style.css → pages.css → this file.

   Light first, because clay renders read best on paper; the kiln-dark palette
   follows the reader's own setting.
   =========================================================================== */

/* ---------- 0. readable clay -------------------------------------------------
   The kit's pigments are mixed for large shapes and photographs. Small text is
   a different job: on paper, terracotta reads at 3.1 : 1 and the faint grey at
   3.0 : 1, both under the 4.5 : 1 that body copy needs, and white lettering on
   a terracotta button lands at 4.0 : 1. Every one of those was measured on the
   rendered page, not guessed (scripts/check_site_contrast.py).

   So the pigments are fired one shade deeper here, and the faint grey darkened,
   which clears 4.5 : 1 everywhere while still reading as the same clay. In the
   kiln-dark palette the pigments are already light enough to read — what fails
   there is white lettering on top of one, so the ink flips to near-black
   instead, which is what a pale clay button wants anyway.

   These override the vendored assets/clay/clay.css rather than editing it, so
   the kit stays byte-identical and can be re-synced from ~/Dev/clay-templates. */
:root {
  --terracotta: #9C4F30;
  --moss:       #546C3D;
  --plum:       #885476;
  --sky:        #436884;
  --faint:      #686274;
}
body[data-accent="moss"] { --accent: var(--moss); --accent-lip: rgba(38, 52, 24, .6); }
body[data-accent="plum"] { --accent: var(--plum); --accent-lip: rgba(62, 34, 52, .6); }
body[data-accent="sky"]  { --accent: var(--sky);  --accent-lip: rgba(26, 44, 58, .6); }

@media (prefers-color-scheme: dark) {
  :root {
    /* The kit's own kiln-dark pigments read fine as text; keep them. */
    --terracotta: #E07C51;
    --moss:       #8CAE68;
    --plum:       #B3789F;
    --sky:        #6C9AC0;
    --faint:      #918A9C;
    /* …but white on a pale pigment is 2.9 : 1. Dark lettering it is. */
    --accent-ink: #1A171F;
  }
}

/* ---------- 1. the site's tokens, re-pointed at clay ---------------------- */
:root {
  --bg:           var(--paper);
  --bg-2:         var(--panel);
  --surface:      var(--panel);
  --surface-2:    var(--panel-2);
  --border:       var(--line);
  --border-soft:  var(--line);

  --text:         var(--ink);
  --text-soft:    var(--muted);
  --text-dim:     var(--faint);

  /* The old accent names still appear all over style.css and pages.css. They
     keep their names and take clay pigments, so every rule that referenced
     "violet" or "cyan" now reads as terracotta or sky without being touched. */
  --violet:  var(--terracotta);
  --indigo:  var(--sand);
  --cyan:    var(--sky);
  --magenta: var(--plum);
  --teal:    var(--moss);

  --grad-primary: linear-gradient(120deg, var(--terracotta) 0%, var(--sand) 100%);
  --grad-warm:    linear-gradient(120deg, var(--terracotta) 0%, var(--plum) 100%);
  --grad-text:    none;

  --glow-violet: var(--shadow-2);
  --glow-cyan:   var(--shadow-2);

  /* Clay is modelled, not cut: everything is rounder and the shadow is the
     soft one a lamp throws on a table, not a neon bloom. */
  --radius:    var(--r-l);
  --radius-sm: var(--r-s);
  --shadow:    var(--shadow-3);
  --ease:      cubic-bezier(.22, 1, .36, 1);
}

/* ---------- type: rounded headings on a plain text face ------------------ */
body { font-family: var(--text-face, var(--text-stack, system-ui)), "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3, h4,
.brand, .price-amt, .stat .big, .flow-num, .step .n, .persona-av {
  font-family: var(--display);
  letter-spacing: -0.015em;
}
h1, h2 { font-weight: 800; }

/* One accent word per heading, in pigment rather than a gradient — a gradient
   fill reads as glass, and nothing here is glass. */
.grad-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
}

/* ---------- 2a. style.css — the animated neon background ----------------- */
/* Four fixed layers of purple/cyan glow and a grid. Replaced by a sheet of
   clay: a warm wash, one soft pigment bloom, and the paper grain. The mesh and
   the particle canvas are simply switched off — a starfield on a clay table is
   the wrong kind of hand-made. */
.bg-layer {
  background:
    radial-gradient(1100px 620px at 8% -10%, color-mix(in srgb, var(--terracotta) 16%, transparent), transparent 62%),
    radial-gradient(900px 620px at 96% 2%, color-mix(in srgb, var(--moss) 13%, transparent), transparent 62%),
    var(--paper);
}
/* Hidden, and its neon gradients cleared as well: display:none still leaves the
   colours in the computed style, and the check that sweeps every page for a
   missed neon rule (scripts/check_site_clay.py) reads computed values. Leaving
   them would mean the sweep can never be clean, so a real leak would hide in
   the noise. */
.bg-mesh { display: none; background: none; animation: none; }
#particles { display: none; }
.bg-grid {
  background-image: url("../assets/clay/img/clay-texture.webp");
  background-size: 620px 620px;
  background-repeat: repeat;
  opacity: 0.16;
  mix-blend-mode: multiply;
  mask-image: none;
  -webkit-mask-image: none;
}

/* ---------- 2b. style.css — section tag, buttons, nav, cards, footer ----- */
.section-tag {
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: var(--r-pill);
}

.btn { border-radius: var(--r-pill); font-family: var(--display); font-weight: 700; }
.btn-primary {
  color: var(--accent-ink);
  background: var(--accent);
  background-size: auto;
  animation: none;
  /* the pressed lip along the bottom is what makes a clay button look pressed */
  box-shadow: inset 0 -4px 0 var(--accent-lip), var(--shadow-2);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 -4px 0 var(--accent-lip), var(--shadow-3);
}
.btn-primary:active { box-shadow: inset 0 -2px 0 var(--accent-lip); }
.btn-ghost {
  color: var(--ink);
  background: var(--panel-2);
  border-color: var(--line-lit);
  backdrop-filter: none;
  box-shadow: inset 0 -3px 0 var(--line);
}
.btn-ghost:hover { background: var(--panel); transform: translateY(-2px); }

.nav.scrolled {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.brand .logo {
  background: var(--accent);
  background-size: auto;
  animation: none;
  border-radius: 12px;
  box-shadow: inset 0 -3px 0 var(--accent-lip);
}
.brand .logo i { background: var(--accent-ink); }
.nav-links a:hover { background: var(--accent-soft); color: var(--ink); }
.nav-links a.active::after { background: var(--accent); }
.nav-toggle { background: var(--panel-2); border-color: var(--line-lit); border-radius: 12px; }
.nav-toggle span { background: var(--ink); }

.card {
  background: var(--panel);
  border-color: var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
}
/* the cursor-following violet spotlight */
.card::before { background: none; }
.card:hover {
  border-color: var(--line-lit);
  background: var(--panel-2);
  box-shadow: var(--shadow-2);
}
/* Every little icon tile: a thumbed pat of clay rather than a gradient chip. */
.card .ico,
.share-step .si,
.privacy-lock,
.share-card .linkrow .lic {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 40% 55% 48% 52% / 52% 44% 56% 48%;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--accent) 18%, transparent);
}

.footer { background: none; border-top-color: var(--line); }
.footer a:hover { color: var(--accent); }

.pill {
  background: var(--panel-2);
  border-color: var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
}

/* ---------- 2c. pages.css — sections ------------------------------------- */
.alt { background: color-mix(in srgb, var(--terracotta) 5%, transparent); }
.strip { border-color: var(--line); }

.flow-step, .step, .share-step, .flow-num, .privacy-point { border-radius: var(--r-m); }
.flow-num, .step .n, .persona-av {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 -3px 0 var(--accent-lip);
}
.flow-arrow { color: var(--faint); }

ul.check li::before {
  color: var(--moss);
  background: color-mix(in srgb, var(--moss) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--moss) 32%, transparent);
  border-radius: 50%;
}

.cta-inner {
  background:
    radial-gradient(700px 320px at 50% -20%, var(--accent-soft), transparent 62%),
    var(--panel);
  border-color: var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-2);
}

.share-step:hover { border-color: var(--line-lit); }
.share-card {
  background: var(--panel);
  border-color: var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
}
.share-card .bubble { background: var(--panel-2); border-color: var(--line); border-radius: 18px 18px 18px 6px; }
.share-card .linkrow {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--r-s);
}
.share-card .linkrow .lu { color: var(--accent); }
.share-card .listen .mini-wave i { background: var(--accent); }

.privacy-inner {
  border: 1px solid color-mix(in srgb, var(--moss) 30%, transparent);
  border-radius: var(--r-l);
  background:
    radial-gradient(640px 300px at 50% -12%, color-mix(in srgb, var(--moss) 13%, transparent), transparent 62%),
    var(--panel);
}
.privacy-lock {
  background: color-mix(in srgb, var(--moss) 18%, transparent);
  border-color: color-mix(in srgb, var(--moss) 34%, transparent);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--moss) 20%, transparent);
}
.privacy-point { background: var(--panel-2); border-color: var(--line); }

.persona-tags span { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
.badge-host {
  color: var(--moss);
  background: color-mix(in srgb, var(--moss) 14%, transparent);
  border-color: color-mix(in srgb, var(--moss) 32%, transparent);
}

.price-card.featured {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(180deg, var(--accent-soft), var(--panel));
  box-shadow: var(--shadow-2);
}
.price-name { color: var(--accent); font-family: var(--display); }
.price-tag {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent-lip);
}

.field input, .field textarea, .field select {
  background: var(--panel-2);
  border-color: var(--line-lit);
  color: var(--ink);
  border-radius: var(--r-s);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-success {
  background: color-mix(in srgb, var(--moss) 12%, transparent);
  border-color: color-mix(in srgb, var(--moss) 36%, transparent);
  color: var(--moss);
}

.ps-card.problem {
  border-color: color-mix(in srgb, var(--plum) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--plum) 8%, transparent), var(--panel));
}
.ps-card.solution {
  border-color: color-mix(in srgb, var(--moss) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--moss) 8%, transparent), var(--panel));
}
.ps-card.problem .ps-kicker { color: var(--plum); }
.ps-card.solution .ps-kicker { color: var(--moss); }
.ps-card ul.check li::before {
  color: var(--moss);
  background: color-mix(in srgb, var(--moss) 14%, transparent);
  border-color: color-mix(in srgb, var(--moss) 32%, transparent);
}
.ps-card.problem ul li::before {
  color: var(--plum);
  background: color-mix(in srgb, var(--plum) 14%, transparent);
  border-color: color-mix(in srgb, var(--plum) 32%, transparent);
}

/* ---------- 2d. pages.css — the comparison matrix ------------------------ */
.matrix-wrap { background: var(--panel); border-color: var(--line); border-radius: var(--r-m); }
table.matrix thead th {
  background: var(--panel-2);
  backdrop-filter: none;
  font-family: var(--display);
}
table.matrix th.col-voicer, table.matrix td.col-voicer {
  background: var(--accent-soft);
  border-left: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
table.matrix tbody tr:hover td, table.matrix tbody tr:hover th { background: color-mix(in srgb, var(--ink) 4%, transparent); }
table.matrix tbody tr:hover td.col-voicer { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.yes { color: var(--moss); }
.no  { color: var(--plum); }
/* measured: #A8762A read at 3.59 : 1 on the panel — one shade deeper clears 4.5 */
.partial { color: #805A20; }

/* ---------- 2e. pages.css — the generated capability groups --------------- */
.capgroup { background: var(--panel); border-color: var(--line); border-radius: var(--r-m); }
.capgroup[open] { background: var(--panel-2); }
.capgroup > summary { color: var(--ink); font-family: var(--display); }
.capgroup > summary:hover { background: var(--accent-soft); }
.capgroup > summary:focus-visible { outline-color: var(--accent); }
.capgroup > summary::after { color: var(--faint); }
.capgroup[open] > summary::after { color: var(--accent); }
.capcount {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--muted);
}
.capblurb { border-bottom-color: var(--line); }
.caplist h4 { color: var(--ink); font-family: var(--display); }
.capwhere { border-color: var(--line-lit); color: var(--faint); }

/* ---------- 2f. the FAQ page and the voice-guide button ------------------ */
/* Both are built in JavaScript, so their colours arrive as inline neon or as
   classes declared in the page's own <style>. Repainted here by name. */
.faq-search input, .faq-search { border-radius: var(--r-pill); }
.faq-cats button, .faq-cats .chip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: var(--r-pill);
  font-family: var(--display);
}
.faq-cats button.active, .faq-cats .chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
/* The voice-guide widget (js/voice-assistant.js) builds its own stylesheet.
   It is written in these same tokens now, so there is nothing to override. */

/* ---------- 3. clay pictures ---------------------------------------------- */
/* A slot is a picture with a caption's worth of breathing room. Objects from
   the library are cut out on nothing, so they sit straight on the paper; the
   scenes are framed like a photograph pinned to the wall. */
.clay-cut {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(33, 30, 39, 0.16));
}
.clay-cut-s  { max-width: 140px; }
.clay-cut-m  { max-width: 220px; }
.clay-cut-l  { max-width: 320px; }

.clay-figure { margin: 0; display: grid; justify-items: center; gap: 14px; }
.clay-figure figcaption { color: var(--faint); font-size: 0.85rem; text-align: center; }

.clay-photo {
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  background: var(--panel);
}
.clay-photo img { display: block; width: 100%; height: auto; }

/* A card that leads with a cut-out instead of an emoji tile. */
.card.clay-lead { text-align: center; }
.card.clay-lead .clay-cut { margin: 0 auto 16px; }

/* The hero's picture: wide, cropped short, and warmed at the foot so the
   headline above it stays the loudest thing on the page. */
.hero-clay {
  position: relative;
  margin: 44px auto 0;
  max-width: 1000px;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
}
.hero-clay img { display: block; width: 100%; height: auto; }
.hero-clay::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--paper) 80%, transparent));
  pointer-events: none;
}

/* The strip of little clay objects that replaces the emoji row. */
.clay-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 4vw, 44px); }
.clay-row figure { margin: 0; width: 108px; display: grid; justify-items: center; gap: 8px; }
.clay-row img { width: 84px; height: auto; filter: drop-shadow(0 12px 16px rgba(33, 30, 39, 0.16)); }
.clay-row figcaption { font-size: 0.82rem; color: var(--muted); text-align: center; line-height: 1.3; }

/* The arrow between pipeline steps is rotated a quarter turn on a phone. A
   rotation does not change the space an element reserves, so its un-rotated
   width kept pushing the document 60-70px wider than the screen — the page
   really did scroll sideways, hidden only by body{overflow-x:hidden}. Giving
   it a square box the rotation fits inside settles it. */
@media (max-width: 760px) {
  .flow-arrow { width: 44px; height: 44px; margin-inline: auto; }
}

/* ---------- 4. motion: stop-motion, not gliding ---------------------------- */
/* The kit's rule, applied to the reveal-on-scroll the site already has: a card
   arrives in three steps on a 12-frames-a-second clock instead of easing in,
   so it reads as re-shot frames rather than a slide. */
.reveal { transform: translateY(18px); transition: opacity .45s steps(3, end), transform .45s steps(3, end); }
.reveal.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
}

/* ---------- 5. kiln dark ---------------------------------------------------
   The clay kit ships its own dark palette on :root, so the tokens above follow
   it with nothing more to say. Only the two places that assume paper need a
   word: the texture sheet (a dark sheet, lightened instead of multiplied) and
   the hero's foot-warmer. */
@media (prefers-color-scheme: dark) {
  .bg-grid {
    background-image: url("../assets/clay/img/clay-texture-dark.webp");
    mix-blend-mode: screen;
    opacity: 0.12;
  }
  .clay-cut, .clay-row img { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55)); }
  .partial { color: #D8B27A; }
}

/* A persona's name carries a small badge inside the same heading; on a narrow
   card the pair overflowed the line box instead of wrapping. */
.persona-meta h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.25; }