/* perillo.ai — landing
   Design authority: docs/design/colour-and-voice.md + docs/design/the-mark.md.
   Tokens below are the perilla palette verbatim — Shade (dark) is the default
   ground, Underside (light) follows the viewer. Change the specs first, then
   mirror here. No blue exists in this palette: where the plant runs out, we stop.

   Type: the logotype face is an open question in the-mark.md; everything here
   is set in a stand-in humanist serif (Source Serif 4) with the system mono
   stack for chrome, per "product is monospace-first". */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/source-serif-var.woff2') format('woff2');
}

/* ── perilla tokens — Shade (dark, the default) ───────────────────────── */
:root{
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --ground:#0B0D09; --panel:#1E231A; --raised:#2D3427;
  --rule:#454F3B; --rule-2:#58654C;
  --ink:#DEE4D4; --soft:#A0B88A; --faint:#8BA078;

  --leaf:#82A96C; --on-leaf:#0B0D09;
  --shiso:#9B6F97;
  --vein:#B76F89;
  --seed:#C9A46B;

  --sel:rgba(130,169,108,.30);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#EEF1E7; --panel:#FFFFFF; --raised:#DCE2D1;
    --rule:#ADBA98; --rule-2:#8D9F71;
    --ink:#1E2718; --soft:#4C5545; --faint:#5C6753;

    --leaf:#4C7038; --on-leaf:#FFFFFF;
    --shiso:#9B6F97;
    --vein:#9B4A66;
    --seed:#8A6620;

    --sel:rgba(76,112,56,.22);
  }
}
:root[data-theme="light"]{
  --ground:#EEF1E7; --panel:#FFFFFF; --raised:#DCE2D1;
  --rule:#ADBA98; --rule-2:#8D9F71;
  --ink:#1E2718; --soft:#4C5545; --faint:#5C6753;

  --leaf:#4C7038; --on-leaf:#FFFFFF;
  --shiso:#9B6F97;
  --vein:#9B4A66;
  --seed:#8A6620;

  --sel:rgba(76,112,56,.22);
}
:root[data-theme="dark"]{
  --ground:#0B0D09; --panel:#1E231A; --raised:#2D3427;
  --rule:#454F3B; --rule-2:#58654C;
  --ink:#DEE4D4; --soft:#A0B88A; --faint:#8BA078;

  --leaf:#82A96C; --on-leaf:#0B0D09;
  --shiso:#9B6F97;
  --vein:#B76F89;
  --seed:#C9A46B;

  --sel:rgba(130,169,108,.30);
}

/* ── base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--serif);background:var(--ground);color:var(--ink);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--sel)}
h1,h2{font-weight:600;letter-spacing:-.008em;text-wrap:balance}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--leaf);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--shiso);outline-offset:2px;border-radius:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 clamp(18px,3.5vw,32px)}

/* centered content columns — measure is capped by the column, not per block */
.col{max-width:680px;margin:0 auto}
.wide{max-width:960px;margin:0 auto}

.prose{color:var(--soft);font-size:16.5px}
.prose p{margin-bottom:15px}
.prose strong{color:var(--ink);font-weight:600}

/* ── nav — the lockup (the-mark.md §5: gap .38×cap, mark 1.9×cap) ─────── */
.nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0}
.lockup{display:inline-flex;align-items:center;font-size:23px;gap:.266em;color:var(--ink)}
.lockup:hover{text-decoration:none}
.lockup svg{height:1.33em;width:auto;color:var(--leaf)}
.lockup .name{font-family:var(--serif);font-weight:600;letter-spacing:-.005em}

/* ── buttons / inputs ─────────────────────────────────────────────────── */
.btn{font-family:var(--mono);font-size:13px;height:38px;padding:0 18px;border-radius:8px;
  border:1px solid var(--leaf);background:var(--leaf);color:var(--on-leaf);cursor:pointer;
  display:inline-flex;align-items:center;white-space:nowrap;font-weight:600;letter-spacing:.01em}
.btn:hover{filter:brightness(1.07);text-decoration:none}
.input{font-family:var(--mono);font-size:13.5px;color:var(--ink);height:38px;
  border:1px solid var(--rule-2);border-radius:6px;background:var(--raised);
  padding:0 13px;min-width:0}
.input::placeholder{color:var(--faint)}

/* ── hero — the one centered moment ───────────────────────────────────── */
.hero{padding:80px 0 92px;text-align:center}
.hero h1{font-size:clamp(34px,5.6vw,58px);line-height:1.12;max-width:19ch;margin:0 auto}
.hero h1 .alive{color:var(--leaf)}
.hero .thesis{font-size:clamp(16px,2.1vw,19px);color:var(--soft);max-width:50ch;margin:24px auto 34px}
.hero .thesis strong{color:var(--ink);font-weight:600}

/* ── sections — full-width hairlines, centered columns ────────────────── */
section{padding:68px 0}
section{border-top:1px solid var(--rule)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.11em;color:var(--faint)}
.sec-head{margin-bottom:22px}
.sec-head h2{font-size:clamp(23px,3.1vw,31px);margin-top:10px}

/* the standing on the hero — early access, said once and quietly */
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;color:var(--soft);border:1px solid var(--rule);border-radius:999px;
  padding:6px 14px;margin-bottom:26px}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--leaf)}

/* the understanding debt — the questions, then the turn */
.qlog{background:var(--panel);border:1px solid var(--rule);border-radius:8px;
  padding:24px 26px;font-family:var(--mono);font-size:clamp(14.5px,2vw,17px);line-height:2.15}
.qlog .p{color:var(--faint);user-select:none}
.qlog .q3{color:var(--leaf)}
.pivot{margin-top:30px;font-size:17px;color:var(--soft)}
.pivot strong{color:var(--ink);font-weight:600}

/* ── waitlist ─────────────────────────────────────────────────────────── */
.waitlist .panel{border:1px solid var(--rule);border-radius:8px;background:var(--panel);
  padding:38px clamp(22px,4vw,42px)}
.waitlist h2{font-size:clamp(23px,3vw,29px);margin:10px 0 12px}
.form-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;max-width:520px}
.form-row .input{flex:1 1 240px}
/* display:flex above outranks the [hidden] default, so say it again */
.form-row[hidden]{display:none}
.btn[disabled]{opacity:.55;cursor:default}
.btn[disabled]:hover{filter:none}
.micro{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:13px}
/* the answer to a submission, in the two colours the palette already spends on
   a path that ran and a thing refused */
.micro[data-state="ok"]{color:var(--leaf)}
.micro[data-state="bad"]{color:var(--vein)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);padding:28px 0 48px}
.foot{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.foot .leafmark{color:var(--leaf);display:inline-flex}
.foot .leafmark svg{height:18px;width:auto}

/* ── the path figure (#road) ──────────────────────────────────────────── */
.rd-lede{color:var(--soft);margin:14px 0 0;font-size:17px}
.rd-lede .rd-c{font-family:var(--mono);font-size:14px;color:var(--ink);
  background:var(--raised);padding:1px 5px;border-radius:3px}
/* the provenance line: smaller, and it carries the dates that can be checked */
.rd-note{color:var(--faint);margin:14px 0 0;font-size:14px;line-height:1.55;
  border-left:2px solid var(--rule);padding-left:13px}
.rd-note b{color:var(--soft);font-weight:600}
.rd-figure{margin-top:30px}

.rd-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:var(--soft);margin-bottom:10px}
.rd-sp{flex:1 1 auto}
.rd-run{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.rd-run b{font-weight:600}
.rd-mk{display:inline-block;width:9px;height:9px;flex:0 0 auto}
.rd-tri{background:var(--leaf);clip-path:polygon(100% 50%, 0 0, 0 100%)}
.rd-src,.rd-hint{color:var(--faint);font-size:10.5px}
.rd-src .rd-hot{color:var(--seed);font-weight:600}

.rd-scroll{overflow-x:auto;overflow-y:hidden;
  border:1px solid var(--rule);border-radius:10px;background:var(--ground);
  -webkit-overflow-scrolling:touch}
.rd-scroll:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
/* the top padding is the band the span runs in */
.rd-strip{position:relative;width:max-content;padding:52px 22px 20px}
.rd-steps{display:flex;gap:104px;align-items:flex-start}

.rd-step{flex:0 0 604px;width:604px;min-width:0;
  border:1px solid var(--rule);border-radius:9px;background:var(--panel);
  overflow:hidden;transition:border-color .35s, box-shadow .35s, opacity .35s;
  opacity:.5;cursor:pointer}
/* the step being read is not a thing to click: it is already here */
.rd-step.on{opacity:1;border-color:var(--rule-2);box-shadow:0 0 0 2px var(--sel);
  cursor:default}
.rd-step:not(.on):hover{opacity:.78;border-color:var(--rule-2)}
.rd-step:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
/* a stop that changed nothing says so in shiso, because that is Perillo
   speaking and not the diff */
.rd-step.untouched.on{box-shadow:0 0 0 2px rgba(155,111,151,.34)}
.rd-fh{display:flex;align-items:baseline;gap:6px;padding:7px 10px;
  background:var(--raised);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;color:var(--faint);white-space:nowrap;
  overflow:hidden}
.rd-fh b{color:var(--ink);font-weight:600}
.rd-fh .d{margin-left:auto;font-size:9.5px;letter-spacing:.02em}
.rd-fh .d .a{color:var(--leaf)} .rd-fh .d .r{color:var(--vein)}
.rd-fh .d.none{color:var(--shiso)}
.rd-code{font-family:var(--mono);font-size:11.5px;line-height:19px;padding:5px 0}
.rd-r{display:grid;grid-template-columns:30px 30px 13px minmax(0,1fr);
  height:19px;align-items:center}
.rd-r .g{text-align:right;font-size:9.5px;color:var(--faint);padding-right:5px;
  font-variant-numeric:tabular-nums}
.rd-r .s{text-align:center;font-size:11px;color:var(--faint)}
.rd-r .c{white-space:pre;overflow:hidden;padding-right:9px;color:var(--soft)}
.rd-r.add{background:rgba(130,169,108,.17)}
.rd-r.add .g{background:rgba(130,169,108,.20)}
.rd-r.add .s{color:var(--leaf)}
.rd-r.del{background:rgba(183,111,137,.17)}
.rd-r.del .g{background:rgba(183,111,137,.20)}
.rd-r.del .s{color:var(--vein)}
:root:not([data-theme="dark"]) .rd-r.add{background:rgba(76,112,56,.16)}
:root:not([data-theme="dark"]) .rd-r.del{background:rgba(155,74,102,.16)}
.rd-r.hit .c{color:var(--ink)}
.rd-r.hit .g{color:var(--soft)}
/* both ends of the span wear one wash, so the pair reads as a pair */
.rd-r.pair{background:rgba(201,164,107,.17)}
.rd-r.pair .g{background:rgba(201,164,107,.24);color:var(--seed)}
.rd-r.pair .c{color:var(--ink)}

.rd-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:visible}
.rd-wires path{fill:none}
.rd-wires .w{stroke-width:1.6;opacity:.85}
.rd-wires .hd{stroke:none;opacity:.95}
.rd-wires .mk{opacity:.95}
/* THE SPAN: a value travelling, not a call being made. It takes seed, which is
   what the palette already spends on provenance -- where a thing came from. */
/* the span crosses the ordinary wires because every gutter already carries
   one. Rather than pretend otherwise, it is drawn last and laid on a casing
   of the board's own ground, so each crossing reads as one line passing over
   another -- the convention every wiring diagram uses -- instead of two lines
   colliding. */
.rd-wires .spancase{stroke:var(--ground);stroke-width:7;opacity:1}
.rd-wires .span{stroke:var(--seed);stroke-width:1.6;opacity:.95}
.rd-wires .spanlab{fill:var(--seed);font-family:ui-monospace,Menlo,monospace;
  font-size:10.5px;font-weight:600}
.rd-wires .spanbg{fill:var(--ground)}

.rd-teach{margin-top:14px;border-left:2px solid var(--shiso);
  background:var(--panel);border-radius:0 9px 9px 0;padding:12px 16px 14px}
.rd-th{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;color:var(--faint);margin-bottom:7px}
.rd-at{color:var(--ink)}
.rd-prov{color:var(--faint)}
.rd-tx{margin:0;font-size:15.5px;line-height:1.62;color:var(--soft);
  max-width:74ch;min-height:3.4em}
.rd-tx code{font-family:var(--mono);font-size:12.5px;color:var(--ink);
  background:var(--raised);padding:1px 4px;border-radius:3px}
.rd-tx b{color:var(--ink);font-weight:600}

@media (max-width:620px){
  .rd-steps{gap:76px}
  .rd-step{flex-basis:300px;width:300px}
}
@media (prefers-reduced-motion:reduce){ .rd-step{transition:none} }