/* marketing/site.css
   ---------------------------------------------------------------------------
   The Jedah site, in the KEYED brand system (brand sheet, 2026-08-18).

   THE SITE WEARS THE BRAND; THE APP WEARS CIVIC. These are different design
   systems on purpose. The brand sheet is paper and ink -- warm mat, mono-caps
   labels, hairlines, film grain, the amber eye. Civic is the product's own UI.
   Where the site SHOWS the product (the hero window, the loop cards), that
   artwork uses Civic's colours, because it is a picture of the app and a
   picture that recolours its subject is lying about it. Everything around the
   picture is brand.

   Every value here traces to the sheet: --mat/--ink/--hair/--panel and both
   themes are copied verbatim; the grounds (#1B1310, #E4D6B8, #E8A45A) and the
   brand palette (#8C6A4E body, #5A4130 cut, #E8A45A eye, #222B46 detail) are
   its swatches. Type is the sheet's stacks -- system sans + ui-monospace.
   NO WEBFONTS: nothing on this site phones a font CDN.

   No build step. One stylesheet, one small script, static HTML. */

/* DESERT AS BASE, BLUE AS ACCENT (Peter, 2026-08-25 -- "that light tan color,
   desert"). The page stands on the sheet's own SAND ground pairing -- b-sand:
   #E4D6B8 with #35211A ink -- and the navy #222B46 is the accent: solid
   buttons, selection, the band. The saturated amber #E8A45A stays what the
   sheet made it: the EYE -- small moments, not the ground. (A first pass read
   "orange" as the amber and painted the whole page with it; corrected.)
   Dark mode: navy base, sand accents. Every value is from the sheet. */
:root {
  --mat:#E4D6B8; --ink:#35211A;
  --hair:rgba(53,33,26,.18); --panel:rgba(53,33,26,.05);
  --blend:multiply; --filmop:.24;
  /* brand palette, from the sheet's swatches */
  --body:#8C6A4E; --cut:#5A4130; --eye:#E8A45A; --detail:#222B46;
  /* the sheet's #1B1310 dark ground was removed (read as maroon); the band now
     stands on the navy the sheet already owns */
  --ground-dark:#222B46; --ground-dark-ink:#EAD9C0;
  --ground-sand:#E4D6B8; --ground-sand-ink:#35211A;
  --steel:#A9BED4;
  /* derived, used sparingly */
  --ink-soft:rgba(53,33,26,.85); --ink-dim:rgba(53,33,26,.6);
  --accent:#222B46; --accent-ink:#EAD9C0;
  color-scheme:light;
}
/* NO DARK MODE, DELIBERATELY (Peter, 2026-08-25 -- "swap the tan and blue").
   A dark variant inverted the pairing to navy-base/sand-accent, which is
   exactly the opposite of the direction. Rather than maintain a second theme
   that exists to disagree with the first, the site has ONE look: desert base,
   navy accents, in every OS theme. The brand sheet's toggle went with it -- a
   toggle between two identical themes is a lie with a button. */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body {
  background:var(--mat); color:var(--ink);
  font-family:ui-sans-serif,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--accent); color:var(--accent-ink); }

/* The sheet's film grain, verbatim. Fixed, non-interactive. */
.film { position:fixed; inset:-60%; z-index:40; pointer-events:none;
  opacity:var(--filmop); mix-blend-mode:var(--blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size:200px 200px; }

/* ---- the sheet's type voices -------------------------------------------- */
.cap { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; opacity:.55; font-weight:400; }
h1,h2,h3 { font-weight:400; }
h1 { font-size:clamp(28px,4.6vw,44px); line-height:1.15; letter-spacing:-0.01em; }
h2 { font-size:clamp(20px,3vw,26px); line-height:1.3; }
h3 { font-size:16px; }
.lede { max-width:56ch; font-size:15px; line-height:1.65; color:var(--ink-soft); }
.mono { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
a { color:inherit; }
code { font-family:ui-monospace,Menlo,monospace; font-size:.92em;
  background:var(--panel); padding:1px 5px; border-radius:4px; }

/* ---- layout --------------------------------------------------------------- */
main { max-width:1160px; margin:0 auto; padding:0 26px 14vh; }
section { margin-bottom:12vh; }
.row { display:grid; gap:14px; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:840px){ .g3,.g4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .g2,.g3,.g4 { grid-template-columns:1fr; } }

/* ---- nav ------------------------------------------------------------------ */
.nav { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--mat) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--hair); }
.nav-in { max-width:1160px; margin:0 auto; padding:14px 26px;
  display:flex; align-items:center; gap:22px; }
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-brand svg { width:26px; height:26px; display:block; }
.nav-brand b { font-weight:500; font-size:14px; letter-spacing:.02em; }
.nav-links { display:flex; gap:18px; margin-left:auto; align-items:center; }
.nav-links a { text-decoration:none; font-size:13px; opacity:.75; }
.nav-links a:hover { opacity:1; }
@media (max-width:720px){ .nav-links a.optional { display:none; } }
.btn { display:inline-block; padding:10px 18px; border:1px solid var(--ink);
  border-radius:999px; text-decoration:none; font-size:13.5px; line-height:1;
  color:var(--ink); background:transparent; }
.btn:hover { background:var(--panel); }
.btn-solid { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-solid:hover { background:var(--steel); border-color:var(--steel); color:#222B46; }
.btn-sm { padding:8px 14px; font-size:12.5px; }

/* ---- hero ------------------------------------------------------------------ */
.hero { padding:9vh 0 4vh; display:grid; gap:34px; }
.hero-mark svg { width:76px; height:76px; display:block; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-note { font-family:ui-monospace,Menlo,monospace; font-size:11px; opacity:.55; }

/* THE PRODUCT WINDOW. A picture of the live panel, drawn in the product's own
   Civic colours, sitting on the brand's paper. These hexes are Civic tokens by
   VALUE (bg-app #fcfcfd, text #1c2024/#60646c, border #d9d9e0, iris #5b5bd6
   family, amber chip) -- deliberately NOT var(--ink)/var(--mat): the window
   must not re-theme with the site, because dark mode does not change what the
   product looks like. */
.window { border:1px solid var(--hair); border-radius:14px; overflow:hidden;
  background:#fcfcfd; color:#1c2024; box-shadow:0 24px 60px -32px rgba(46,33,24,.45);
  font-size:13px; line-height:1.5; max-width:500px; }
.window * { box-sizing:border-box; }
.win-head { display:flex; align-items:center; gap:8px; padding:10px 14px 8px; }
.win-dots { display:flex; gap:6px; }
.win-dots i { width:10px; height:10px; border-radius:99px; display:block; }
.win-name { font-weight:600; font-size:14px; margin-left:4px; }
.win-tabs { margin-left:auto; display:flex; gap:3px; padding:3px;
  background:#f9f9fb; border:1px solid #d9d9e0; border-radius:9px; }
.win-tabs span { padding:4px 11px; font-size:12px; font-weight:600; border-radius:7px; color:#60646c; }
.win-tabs .on { background:#fff; color:#5753c6; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.win-sub { display:flex; align-items:center; gap:7px; padding:0 14px 9px;
  font-size:11px; color:#60646c; border-bottom:1px solid #e0e1e6; }
.win-live { width:6px; height:6px; border-radius:99px; background:#30a46c; }
.win-body { display:flex; min-height:290px; }
.win-cues { flex:1; padding:12px 14px; display:flex; flex-direction:column; gap:9px; }
.cue { border:1px solid #e0e1e6; border-radius:11px; padding:9px 11px; background:#fff; }
.cue-tag { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.02em;
  padding:2px 8px; border-radius:99px; margin-bottom:5px;
  background:#f0f1fe; color:#5753c6; }
.cue.amber .cue-tag { background:#fff1e0; color:#a35a00; }
.cue p { font-size:12.5px; color:#1c2024; }
.win-rail { width:104px; flex-shrink:0; border-left:1px solid #e0e1e6;
  padding:14px 10px; display:flex; flex-direction:column; gap:0; }
.rl { display:flex; gap:7px; flex:1; }
.rl i { width:9px; height:9px; border-radius:99px; background:#d9d9e0; flex-shrink:0; margin-top:1px; position:relative; }
.rl.done i, .rl.cur i { background:#5b5bd6; }
.rl.cur i { box-shadow:0 0 0 3px #f0f1fe; }
.rl b { font-weight:500; font-size:9.5px; line-height:1.3; color:#60646c; }
.rl.cur b { color:#5753c6; font-weight:600; }
.rl .stem { position:absolute; left:4px; top:11px; bottom:-2px; width:2px; background:#d9d9e0; }
.rl.done .stem { background:#5b5bd6; }
.win-notes { border-top:1px solid #e0e1e6; padding:9px 14px 12px; }
.win-notetabs { display:flex; gap:1px; margin-bottom:-1px; position:relative; }
.win-notetabs span { font-size:11px; font-weight:600; padding:5px 12px; color:#60646c;
  border:1px solid transparent; border-bottom:none; border-radius:9px 9px 0 0; }
.win-notetabs .on { background:#fcfcfd; border-color:#d9d9e0; color:#1c2024; }
.win-notearea { border:1px solid #d9d9e0; border-radius:0 9px 9px 9px;
  padding:9px 11px; font-size:12px; color:#8b8d98; min-height:44px; background:#fcfcfd; }

/* ---- the loop (before / during / after) ------------------------------------ */
.step { border:1px solid var(--hair); border-radius:12px; padding:20px; background:var(--panel); }
.step .cap { display:block; margin-bottom:10px; }
.step h3 { margin-bottom:8px; }
.step p { font-size:13.5px; color:var(--ink-soft); }
.step .art { margin:14px 0 4px; }

/* small Civic vignettes inside loop cards -- same rule as .window */
.mini { border:1px solid #d9d9e0; border-radius:10px; background:#fcfcfd; color:#1c2024;
  padding:10px 12px; font-size:11.5px; line-height:1.5; }
.mini .bar { height:7px; border-radius:99px; background:#e0e1e6; margin:6px 0; position:relative; overflow:hidden; }
.mini .bar i { position:absolute; inset:0; width:72%; background:#5b5bd6; border-radius:99px; display:block; }
.mini .bar.b2 i { width:46%; }
.mini .bar.warn i { width:58%; background:#e8a45a; }
.mini .kv { display:flex; justify-content:space-between; color:#60646c; font-size:10.5px; }
.mini .kv b { color:#1c2024; font-weight:600; }

/* ---- non-negotiables -------------------------------------------------------- */
.rule { border-top:1px solid var(--hair); padding:18px 0 4px; display:grid;
  grid-template-columns:28px 1fr; gap:14px; }
.rule .arrow { opacity:.5; }
.rule h3 { margin-bottom:6px; }
.rule p { font-size:13.5px; color:var(--ink-soft); max-width:64ch; }

/* ---- pricing ---------------------------------------------------------------- */
.tier { border:1px solid var(--hair); border-radius:12px; padding:22px; display:flex; flex-direction:column; }
.tier.hi { border-color:var(--ink); }
.tier h3 { margin-bottom:2px; }
.tier .price { margin:8px 0 14px; }
.tier .price b { font-size:30px; font-weight:400; }
.tier .price span { font-size:12px; opacity:.6; }
.tier ul { list-style:none; margin:0 0 18px; flex:1; }
.tier li { font-size:13px; padding:6px 0; border-top:1px solid var(--hair); color:var(--ink-soft); }
.tier li:first-child { border-top:none; }
.tier .btn { text-align:center; }

/* ---- FAQ ---------------------------------------------------------------------- */
details { border-top:1px solid var(--hair); }
details:last-of-type { border-bottom:1px solid var(--hair); }
summary { cursor:pointer; padding:15px 2px; font-size:14.5px; list-style:none; display:flex; gap:12px; }
summary::-webkit-details-marker { display:none; }
summary::before { content:"+"; font-family:ui-monospace,Menlo,monospace; opacity:.5; }
details[open] summary::before { content:"\2212"; }
details p { padding:0 2px 16px 26px; font-size:13.5px; color:var(--ink-soft); max-width:68ch; }
details p + p { margin-top:8px; }

/* ---- dark band (uses the sheet's dark ground, not the theme) ----------------- */
.band { background:var(--ground-dark); color:var(--ground-dark-ink); border-radius:14px;
  padding:34px 30px; }
.band .cap { opacity:.55; color:var(--steel); }
.band .lede { color:rgba(234,217,192,.85); }

/* ---- footer -------------------------------------------------------------------- */
footer { border-top:1px solid var(--hair); }
.foot-in { max-width:1160px; margin:0 auto; padding:34px 26px 20px; }
.foot-grid { display:flex; gap:30px; flex-wrap:wrap; align-items:flex-start; }
.foot-grid nav { display:grid; gap:8px; }
.foot-grid a { font-size:13px; text-decoration:none; opacity:.7; }
.foot-grid a:hover { opacity:1; }
.foot-brand { margin-right:auto; }
.foot-brand svg { width:30px; height:30px; }
.end { padding:22px 16px 26px; text-align:center; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.5; }

/* ---- legal / prose pages --------------------------------------------------------- */
.prose { max-width:78ch; }
.prose h1 { margin:8vh 0 10px; }
.prose h2 { margin:34px 0 10px; font-size:19px; }
.prose h3 { margin:22px 0 8px; }
.prose p, .prose li { font-size:14px; color:var(--ink-soft); margin-bottom:12px; }
.prose ul, .prose ol { padding-left:22px; margin-bottom:14px; }
.prose table { width:100%; border-collapse:collapse; font-size:13px; margin:14px 0; }
.prose th, .prose td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--hair); }
.prose th { font-family:ui-monospace,Menlo,monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.55; font-weight:400; }

@media (prefers-reduced-motion: reduce) {
  .cue-cycle { animation:none !important; }
}

/* --- HR-SaaS SCAFFOLD (Peter, 2026-08-25: "more like other HR sites, same
   design file"). The LAYOUT patterns of a recruiting-SaaS site -- split hero,
   proof strip, feature grid, comparison table, personas -- rendered entirely
   in the KEYED vocabulary. What was deliberately NOT copied from that genre:
   fabricated customer logos and invented testimonials. The proof strip carries
   real platforms and real measured numbers instead, because a compliance-first
   product cannot open with a lie. --- */

/* split hero: copy left, product right */
.hero-split { display:grid; grid-template-columns: 1.05fr .95fr; gap:44px; align-items:center;
  padding:7vh 0 3vh; }
@media (max-width:900px){ .hero-split { grid-template-columns:1fr; } }
.hero-split .window { justify-self:end; width:100%; }
@media (max-width:900px){ .hero-split .window { justify-self:start; } }

/* proof strip: platforms + true numbers */
.proof { border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:16px 0; margin:5vh 0 10vh; display:flex; flex-wrap:wrap; gap:10px 26px;
  align-items:center; justify-content:space-between; }
.proof .cap { opacity:.5; }
.plats { display:flex; flex-wrap:wrap; gap:8px; }
.plat { font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.06em;
  padding:5px 12px; border:1px solid var(--hair); border-radius:999px; color:var(--ink-soft); }

/* stat chips */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:840px){ .stats { grid-template-columns:repeat(2,1fr); } }
.stat { border:1px solid var(--hair); border-radius:12px; padding:16px 18px; background:var(--panel); }
.stat b { display:block; font-size:26px; font-weight:400; letter-spacing:-.01em; }
.stat span { font-size:12px; color:var(--ink-dim); }

/* feature grid */
.feat { border:1px solid var(--hair); border-radius:12px; padding:18px; background:var(--panel); }
.feat svg { width:22px; height:22px; display:block; margin-bottom:12px; color:var(--accent); }
.feat h3 { margin-bottom:6px; }
.feat p { font-size:13px; color:var(--ink-soft); }

/* comparison table */
.compare { width:100%; border-collapse:collapse; font-size:13px; margin-top:22px; }
.compare th, .compare td { text-align:left; padding:12px 12px; border-bottom:1px solid var(--hair);
  vertical-align:top; }
.compare thead th { font-family:ui-monospace,Menlo,monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.55; font-weight:400; }
.compare td:first-child { color:var(--ink-dim); font-size:12.5px; width:26%; }
.compare .yes { color:var(--ink); font-weight:500; }
.compare .col-hi { background:color-mix(in srgb, var(--accent) 7%, transparent); }
.compare .dim { color:var(--ink-dim); }
@media (max-width:720px){ .compare { font-size:12px; } .compare th, .compare td { padding:9px 8px; } }

/* personas */
.who { border-top:1px solid var(--hair); padding-top:18px; }
.who .cap { display:block; margin-bottom:8px; color:var(--accent); opacity:.8; }
.who p { font-size:13.5px; color:var(--ink-soft); }

/* --- SCENE PLATES (layout blend, 2026-08-25). Layout A's poster plates carry
   the hero and the note band; the SaaS sections run between them. The scenes
   are brand/jedha-scenes.js geometry re-paletted into KEYED by
   assets/build-scenes.mjs -- hue retargeted per family, lightness preserved --
   so the landscapes and the chrome are one system. --- */
.plate { position:relative; width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; }
.plate-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.plate-in { position:relative; max-width:1160px; margin:0 auto; padding:0 26px; }
/* hero: type sits in the lower third, the poster rule; the fade hands the
   plate to the page's own sand so ink text stays readable without a box */
.plate-hero { min-height:80vh; display:flex; align-items:flex-end; }
.plate-fade { position:absolute; inset:0;
  background:linear-gradient(to top, var(--mat) 5%, color-mix(in srgb, var(--mat) 84%, transparent) 32%, transparent 60%); }
.plate-hero .plate-in { display:grid; grid-template-columns:1.05fr .95fr; gap:44px;
  align-items:end; width:100%; padding-top:16vh; padding-bottom:7vh; }
@media (max-width:900px){ .plate-hero .plate-in { grid-template-columns:1fr; } }
.plate-hero .window { justify-self:end; width:100%; }
@media (max-width:900px){ .plate-hero .window { justify-self:start; } }
/* night plate: the scene is already navy after the remap; the tint only
   steadies contrast behind the copy */
.plate-night { color:#EAD9C0; margin-bottom:12vh; }
.plate-night .plate-tint { position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(34,43,70,.42), rgba(34,43,70,.72)); }
.plate-in-pad { padding-top:clamp(3rem,7vw,5.5rem); padding-bottom:clamp(3rem,7vw,5.5rem); }
.plate-night h2 { color:#EAD9C0; }