/* The fonts ship with the site: no third-party origin, so the CSP can be
   default-src 'self'. Paths are relative to this file, i.e. assets/fonts/. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/caveat-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ------------------------------------------------------------------
   perbo v2 — evolved from Variant B "Butter". The brand yellow is a
   ground, not an accent: the top bar and hero are one block of it,
   everything below is paper. Light only: the token set below is the
   light half of the app's tokens.css, inlined, so no dark block can
   reach the ink artwork placed on the butter ground.
   ------------------------------------------------------------------ */
:root{
  color-scheme:light;

  /* --- surfaces and ink --- */
  --paper:#fbfaf6;
  --surface:#fffdf8;
  --canvas:#f2efe8;
  --soft:#f6f3ec;
  --rail:#efebe1;
  --ink:#2e1a17;
  --text:#5c4741;
  --muted:#776860;
  --faint:#75655e;
  --on-ink:#f7f4ee;
  --disc:#ffffff;
  --line:rgba(46,26,23,.14);
  --line-strong:rgba(46,26,23,.24);
  --shadow:0 14px 60px #2e1a1710;

  /* --- accents, states --- */
  --amber:#a8762e;
  --amber-text:#8a5e1f;
  --amber-paper:#f7f1e6;
  --accent:#925d24;
  --accent-soft:#f5e8cd;
  --green:#4f6b4a;
  --green-paper:#f1f2ea;
  --red:#8a3d31;
  --red-paper:#f8ebe6;
  --red-line:#b77566;
  --blue:#3e6b85;
  --handwriting:#6b4a38;
  --terminal:#35302f;
  --terminal-text:#e8e2d6;

  /* --- type and motion --- */
  --font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",monospace;
  /* the same curve the motion tokens call --ease-smooth-out */
  --ease:var(--ease-smooth-out);
  --motion:180ms;

  /* --- the perbo logo palette --- */
  --perbo-yellow:#f0db8a;
  --perbo-cup:#b1916b;
  --perbo-lid:#332222;
  --perbo-cream:#fdfbf4;
  /* derived, for type and lines on the butter ground */
  --lid-soft:rgba(51,34,34,.72);
  --lid-faint:rgba(51,34,34,.55);
  --lid-line:rgba(51,34,34,.30);

  /* --- theme hooks the motion.css snippets read --- */
  --tabs-text-muted:var(--muted);
  --tabs-text-active:var(--perbo-lid);
  --tabs-bar-bg:transparent;
  --tabs-pill-bg:var(--perbo-yellow);

  /* --- geometry, hand-cut --- */
  --page:1140px;
  --hero-foot:0px;
  --card-radius:12px 9px 13px 10px;
  --btn-radius:9px 7px 10px 7px;
  --chip-radius:7px 5px 8px 5px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.62 var(--font);
  -webkit-font-smoothing:antialiased;
}
/* height:auto keeps the intrinsic height attribute from fighting the CSS width */
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3{margin:0 0 .5em}
p{margin:0 0 1em}
h1{font-size:clamp(34px,5.2vw,58px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
h2{font-size:clamp(23px,2.9vw,33px);font-weight:600;letter-spacing:-.025em;line-height:1.18}
h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
:focus-visible{outline:3px solid var(--amber);outline-offset:4px}
::selection{background:var(--accent-soft)}
.wrap{max-width:var(--page);margin:0 auto;padding:0 clamp(16px,3.6vw,32px)}
.lbl{font:500 10.5px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.mono{font-family:var(--mono)}
.handwritten{font-family:"Caveat",cursive;font-weight:500;font-size:19px;color:var(--handwriting)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--perbo-lid);color:var(--perbo-cream);padding:12px 18px;border-radius:var(--btn-radius)}
.skip:focus{left:12px;top:12px}
.mark{background:var(--perbo-yellow);color:var(--perbo-lid);padding:.04em .22em;border-radius:5px 3px 6px 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:11px 20px;text-decoration:none;
  font-weight:600;font-size:15px;line-height:1.2;
  border:1.5px solid transparent;border-radius:var(--btn-radius);
  transition:transform var(--motion) var(--ease),background var(--motion) linear;
}
.btn:hover{transform:translateY(-1px)}
.btn--ink{background:var(--perbo-lid);color:var(--perbo-cream);border-color:var(--perbo-lid)}
.btn--line{background:transparent;color:var(--perbo-lid);border-color:var(--perbo-lid)}
.btn--line:hover{background:rgba(51,34,34,.07)}
.btn--butter{background:var(--perbo-yellow);color:var(--perbo-lid);border-color:var(--perbo-lid)}
.btn--butter:hover{filter:brightness(1.04)}
.btn--paper{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn--paper:hover{background:var(--canvas)}

/* ================= the butter block: top bar + hero ================= */
/* the bar and the hero are one yellow ground, with no line between them.
   The ring turns charcoal there because amber on butter is too quiet. */
.bar :focus-visible,.hero :focus-visible{outline:3px solid var(--perbo-lid);outline-offset:3px}

.bar{position:sticky;top:0;z-index:40;background:var(--perbo-yellow);color:var(--perbo-lid)}
.bar__in{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:6px 2px}
.brand img.word{height:22px;width:auto}
.brand img.cup{height:28px;width:auto}
.bar__nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.navlink,.navbtn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:9px 13px;background:transparent;border:0;
  font:600 15px/1.2 var(--font);color:var(--perbo-lid);text-decoration:none;
  border-radius:var(--btn-radius);
}
.navlink:hover,.navbtn:hover{background:rgba(51,34,34,.08)}
.navbtn svg{transition:transform var(--motion) var(--ease)}
.navbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.drop{position:relative}
.drop__panel{
  display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:284px;z-index:5;
  background:var(--perbo-cream);border:1.5px solid var(--perbo-lid);
  border-radius:var(--card-radius);padding:8px;
}
/* aria-expanded stays the source of truth for showing the panel; .is-closing
   holds it painted for the snippet's close duration after that flips back. */
.navbtn[aria-expanded="true"]+.drop__panel,
.drop__panel.is-closing{display:block}
/* the bridge over the 6px gap: the pointer reaches the panel without
   ever leaving .drop, so travelling down from the button cannot close it */
.drop__panel::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.drop__item{display:block;padding:10px 12px;text-decoration:none;border-radius:var(--chip-radius);color:var(--perbo-lid)}
.drop__item:hover{background:rgba(51,34,34,.07)}
.drop__item b{display:block;font-weight:600;font-size:15px}
.drop__item span{display:block;font-size:13px;color:var(--lid-soft);line-height:1.45}
.bar__right{display:flex;align-items:center;gap:2px}
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;background:transparent;color:var(--perbo-lid);
  border-radius:var(--btn-radius);text-decoration:none;
}
.iconbtn:hover{background:rgba(51,34,34,.08)}
.iconbtn svg{width:19px;height:19px}
.menubtn{display:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-bottom:44px;background:var(--paper);color:var(--perbo-lid)}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;bottom:var(--hero-foot);background:var(--perbo-yellow)}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,26vw,360px);
  column-gap:40px;padding-top:clamp(28px,4vw,52px)}
.hero__copy{grid-column:1;grid-row:1;max-width:41ch}
.hero__film{grid-column:1/-1;grid-row:3;padding-top:22px}
/* the cup sits top-right beside the headline; the key idea runs full width under both */
.hero__cup{grid-column:2;grid-row:1;display:flex;justify-content:flex-end;align-items:flex-start}
/* the cup illustration is full-colour brand artwork: never filtered */
.hero__cup img{width:clamp(240px,26vw,360px);max-width:100%;transform:rotate(-5deg);margin-top:6px;pointer-events:none}
.eyebrow{font-weight:600;font-size:14px;letter-spacing:.01em;color:var(--lid-soft);margin:0 0 12px}
.hero h1{color:var(--perbo-lid);margin-bottom:16px;text-wrap:balance}
.hero__sub{font-size:17px;line-height:1.55;color:var(--lid-soft);margin-bottom:22px}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.hero__fine{font-size:13.5px;color:var(--lid-faint);margin:0}
/* 18 Texts reveal, on the copy under the headline. The eyebrow and the h1
   are deliberately not lines: a .t-stagger-line is transparent until the
   deferred script adds .is-shown, and with the headline in that set nothing
   contentful is on the first screen until then — measured as first paint
   slipping from 0.9s to 1.2-2.0s and Lighthouse performance from 100 to
   95-99. The snippet's own 500ms + 40ms scale is also cut, so the three
   lines finish 336ms in. Without JS the document keeps .js-off and no line
   ever takes the hidden start state. */
.hero__copy{--stagger-dur:280ms;--stagger-stagger:28ms}
.hero__copy .t-stagger-line--3{transition-delay:calc(var(--stagger-stagger) * 2)}
.js-off .t-stagger-line{opacity:1;transform:none;filter:none}
.hero__note{grid-column:1/-1;grid-row:2;max-width:62ch;font-size:15.5px;line-height:1.6;color:var(--lid-soft);margin:30px 0 0;
  padding-top:22px;border-top:1.5px solid var(--lid-line)}
.works{grid-column:1/-1;grid-row:4;display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;
  margin-top:30px;padding-top:18px;border-top:1.5px solid var(--lid-line)}
.works__lbl{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--lid-faint)}
.works__item{display:inline-flex;align-items:center;gap:7px;font:500 13px/1 var(--font);color:var(--lid-soft)}
.works__item svg{width:15px;height:15px;flex:none}

/* ---------- the hero film: the attention story, in four cards ---------- */
.film{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fcard{
  position:relative;background:var(--perbo-cream);color:var(--perbo-lid);
  border:1.5px solid var(--perbo-lid);border-radius:var(--card-radius);padding:12px 13px 13px;
}
.fcard--spec{grid-column:1;grid-row:1}
.fcard--graph{grid-column:2;grid-row:1}
.fcard--review{grid-column:3;grid-row:1}
.fcard--you{grid-column:4;grid-row:1}
.fcard__label{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.fcard__foot{font:500 10px/1.4 var(--mono);color:var(--lid-faint);margin-top:9px}
.tline{font:500 10.5px/1.75 var(--mono);color:var(--lid-soft);white-space:nowrap;overflow:hidden;max-width:100%}
.fnote{font-family:"Caveat",cursive;font-weight:500;font-size:17px;line-height:1.1;
  color:var(--handwriting);margin:8px 0 0}
.stamp{position:absolute;right:-12px;top:-14px;width:46px;transform:rotate(-8deg)}
/* the film's small graph: three nodes filling in turn */
.fgraph{width:100%;max-width:100%;height:auto;margin:2px 0 0}
.fedge{fill:none;stroke:var(--perbo-lid);stroke-width:1.6;stroke-linecap:round;opacity:.65}
.gnode{fill:var(--amber);stroke:var(--perbo-lid);stroke-width:1.6}
.glabel{font-family:var(--mono);font-size:9px;fill:var(--lid-faint);text-anchor:middle}
.sees{font:500 11px/1.5 var(--mono);color:var(--perbo-lid);margin-bottom:7px}
.struck{position:relative;display:inline-block;font:400 11px/1.5 var(--mono);color:var(--lid-faint)}
.struck::after{content:"";position:absolute;left:-3px;right:-3px;top:52%;height:1.5px;
  background:var(--perbo-lid);transform-origin:left center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font:500 10px/1 var(--mono);letter-spacing:.03em;
  border:1.5px solid var(--perbo-lid);border-radius:var(--chip-radius);
  padding:6px 8px;background:var(--perbo-cream);color:var(--perbo-lid);
}
.chip img{width:12px;height:12px;object-fit:contain;flex:none}
.chip--you{background:var(--perbo-yellow)}
.chip b{font-weight:500;opacity:.55}
.chip--b1{--fx:-84px;--fy:-24px}
.chip--b2{--fx:-300px;--fy:-24px}
.chip--b3{--fx:-262px;--fy:-58px}
.chip--you{--fx:170px;--fy:-50px}
.fcard--you .fcard__label{margin-bottom:10px}
.you__big{font:600 26px/1 var(--font);letter-spacing:-.02em;margin:0 0 8px;color:var(--perbo-lid)}
.tally{display:inline-block;font:500 12px/1.35 var(--mono);color:var(--perbo-lid);
  background:var(--perbo-yellow);border:1.5px solid var(--perbo-lid);
  border-radius:var(--chip-radius);padding:7px 10px;margin:0}

@media (prefers-reduced-motion: no-preference){
  .fcard--spec{animation:c1 12s var(--ease) infinite}
  .fcard--graph{animation:c2 12s var(--ease) infinite}
  .fcard--review{animation:c3 12s var(--ease) infinite}
  .fcard--you{animation:c4 12s var(--ease) infinite}
  .stamp{animation:stampIn 12s var(--ease) infinite}
  .tline{animation:typeIn 12s steps(28,end) infinite}
  .tline+.tline{animation-name:typeIn2}
  .tline+.tline+.tline{animation-name:typeIn3}
  .gnode--1{animation:nodeFill 12s var(--ease) infinite}
  .gnode--2{animation:nodeFill2 12s var(--ease) infinite}
  .gnode--3{animation:nodeFill3 12s var(--ease) infinite}
  .struck::after{animation:strike 12s var(--ease) infinite}
  .chip--b1{animation:chipFly1 12s var(--ease) infinite}
  .chip--b2{animation:chipFly2 12s var(--ease) infinite}
  .chip--b3{animation:chipFly3 12s var(--ease) infinite}
  .chip--you{animation:chipToYou 12s var(--ease) infinite}
  .tally{animation:tallyIn 12s var(--ease) infinite}
}
@keyframes c1{
  0%{opacity:0;transform:translateY(12px);filter:blur(2px)}
  4%,95%{opacity:1;transform:none;filter:blur(0)}
  99%,100%{opacity:0;transform:translateY(-6px);filter:blur(2px)}
}
@keyframes c2{
  0%,16%{opacity:0;transform:translateX(14px);filter:blur(2px)}
  21%,95%{opacity:1;transform:none;filter:blur(0)}
  99%,100%{opacity:0;transform:translateY(-6px);filter:blur(2px)}
}
@keyframes c3{
  0%,42%{opacity:0;transform:translateY(14px);filter:blur(2px)}
  47%,95%{opacity:1;transform:none;filter:blur(0)}
  99%,100%{opacity:0;transform:translateY(-6px);filter:blur(2px)}
}
@keyframes c4{
  0%,74%{opacity:0;transform:translateY(14px);filter:blur(2px)}
  79%,95%{opacity:1;transform:none;filter:blur(0)}
  99%,100%{opacity:0;transform:translateY(-6px);filter:blur(2px)}
}
@keyframes stampIn{
  0%,9%{opacity:0;transform:rotate(-8deg) scale(1.7)}
  11.5%{opacity:1;transform:rotate(-8deg) scale(.86)}
  13%{transform:rotate(-8deg) scale(1.08)}
  15%,95%{opacity:1;transform:rotate(-8deg) scale(1)}
  99%,100%{opacity:0;transform:rotate(-8deg) scale(1)}
}
@keyframes typeIn{0%,1%{max-width:0}5%,96%{max-width:100%}99%,100%{max-width:0}}
@keyframes typeIn2{0%,4%{max-width:0}8%,96%{max-width:100%}99%,100%{max-width:0}}
@keyframes typeIn3{0%,7%{max-width:0}11%,96%{max-width:100%}99%,100%{max-width:0}}
@keyframes nodeFill{0%,24%{fill:var(--perbo-cream)}28%,96%{fill:var(--amber)}99%,100%{fill:var(--perbo-cream)}}
@keyframes nodeFill2{0%,30%{fill:var(--perbo-cream)}34%,96%{fill:var(--amber)}99%,100%{fill:var(--perbo-cream)}}
@keyframes nodeFill3{0%,36%{fill:var(--perbo-cream)}40%,96%{fill:var(--amber)}99%,100%{fill:var(--perbo-cream)}}
@keyframes strike{0%,49%{transform:scaleX(0)}54%,95%{transform:scaleX(1)}99%,100%{transform:scaleX(0)}}
@keyframes chipFly1{
  0%,55%{opacity:0;transform:translate(0,6px) scale(.94)}
  58%,62%{opacity:1;transform:none}
  68%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.86)}
  68.1%,100%{opacity:0;transform:translate(0,6px) scale(.94)}
}
@keyframes chipFly2{
  0%,57%{opacity:0;transform:translate(0,6px) scale(.94)}
  60%,64%{opacity:1;transform:none}
  70%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.86)}
  70.1%,100%{opacity:0;transform:translate(0,6px) scale(.94)}
}
@keyframes chipFly3{
  0%,59%{opacity:0;transform:translate(0,6px) scale(.94)}
  62%,66%{opacity:1;transform:none}
  72%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.86)}
  72.1%,100%{opacity:0;transform:translate(0,6px) scale(.94)}
}
@keyframes chipToYou{
  0%,61%{opacity:0;transform:translate(0,6px) scale(.94)}
  64%,74%{opacity:1;transform:none}
  79%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.9)}
  79.1%,100%{opacity:0;transform:translate(0,6px) scale(.94)}
}
@keyframes tallyIn{
  0%,82%{opacity:0;transform:translateY(8px) scale(.96)}
  86%,96%{opacity:1;transform:none}
  99%,100%{opacity:0;transform:none}
}

/* ================= paper sections ================= */
.section{padding:clamp(56px,7vw,92px) 0}
.section--soft{background:var(--soft)}
.head{max-width:60ch;margin-bottom:clamp(24px,3vw,40px)}
.head .lbl{display:block;margin-bottom:12px}
.head p{color:var(--text);font-size:17px;margin:0}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--card-radius);
  padding:24px;box-shadow:var(--shadow)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card p.term{color:var(--terminal-text)}
.card p{color:var(--text);font-size:15px;line-height:1.6;margin:0}
.card img.icon{width:32px;height:32px;object-fit:contain;margin-bottom:14px}
.card .icon--glyph{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;font:600 14px/1 var(--mono);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--chip-radius);margin-bottom:14px}
.card h3{margin-bottom:8px}
.card .lbl{display:block;margin-bottom:10px}

/* ---------- the shared desktop mock language ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.tab{
  min-height:44px;height:auto;padding:10px 18px;background:var(--surface);color:var(--muted);
  border:1.5px solid var(--line);border-radius:var(--btn-radius);
  font:600 15px/1.2 var(--font);display:inline-flex;align-items:center;gap:9px;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--perbo-yellow);color:var(--perbo-lid);border-color:var(--perbo-lid)}
.tab__tag{font:500 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:lowercase;
  border:1.5px solid var(--line-strong);border-radius:5px 3px 6px 3px;padding:4px 5px;color:var(--muted)}
.tab[aria-selected="true"] .tab__tag{border-color:var(--perbo-lid);color:var(--lid-soft)}
.lbl .tab__tag{display:inline-block;margin-left:8px;vertical-align:middle}
.faq__a p .tab__tag{display:inline-block;margin-right:8px;vertical-align:baseline}
/* 16 Tabs sliding: the yellow plate moves off the tab and onto the pill,
   which JS measures onto the selected tab. With no JS there is no pill,
   so the plate stays where it was. */
.tabs{padding:0}
.js-on .tab[aria-selected="true"]{background:transparent;border-color:transparent}
.tabs .t-tabs-pill{
  top:0;background:var(--tabs-pill-bg);border:1.5px solid var(--perbo-lid);
  border-radius:var(--btn-radius);
  /* height joins the snippet's transform and width: the tabs wrap onto a
     second row at phone widths, so the pill changes row and size at once */
  transition:transform var(--tabs-dur) var(--tabs-ease),
             width var(--tabs-dur) var(--tabs-ease),
             height var(--tabs-dur) var(--tabs-ease);
}
.mock{display:flex;background:var(--surface);border:1.5px solid var(--line-strong);
  border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow);min-height:376px}
.mock__rail{width:64px;flex:none;background:var(--rail);border-right:1.5px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 0}
.mock__rail img{width:22px;height:22px;object-fit:contain;opacity:.45}
.mock__rail img.is-on{opacity:1}
.railitem{position:relative;display:block;line-height:0}
.railitem--badge::after{content:"";position:absolute;right:-4px;top:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--amber);border:1.5px solid var(--rail)}
.mock__spacer{flex:1}
.mock__body{flex:1;min-width:0;display:flex;flex-direction:column}
.mock__bar{min-height:48px;flex:none;display:flex;align-items:center;gap:10px;padding:8px 14px;
  border-bottom:1.5px solid var(--line);flex-wrap:wrap}
.disc{width:26px;height:26px;border-radius:50%;background:var(--disc);display:grid;place-items:center;flex:none}
.disc img{width:18px;height:18px;object-fit:contain}
.mock__title{font:500 11.5px/1.4 var(--mono);color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis}
.mock__chip{font:500 10.5px/1 var(--mono);letter-spacing:.04em;padding:5px 7px;
  border:1.5px solid var(--line-strong);border-radius:var(--chip-radius);color:var(--text);background:var(--canvas)}
.mock__state{font:500 10.5px/1 var(--mono);color:var(--amber-text);margin-left:auto}
.mock__dots{margin-left:auto;display:flex;gap:4px}
.mock__dots i{width:5px;height:5px;border-radius:50%;background:var(--line-strong);display:block}
.mock__pane{padding:20px;flex:1;min-width:0}
.pane__top{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.pane__top .lbl{margin:0}
.pill{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--mono);
  letter-spacing:.05em;padding:6px 8px;border-radius:var(--chip-radius);
  border:1.5px solid var(--line-strong);background:var(--canvas);color:var(--muted)}
.pill img{width:13px;height:13px;object-fit:contain}
.pill--on{background:var(--amber-paper);border-color:var(--amber);color:var(--amber-text)}
.row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:11px 0;
  border-top:1.5px solid var(--line)}
.row:first-of-type{border-top:0}
.row--spaced{margin-top:16px}
.row .k{font:500 10.5px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.row .v{font-size:14px;color:var(--ink);line-height:1.5}
.row .v.mono{font-family:var(--mono);font-size:12.5px;color:var(--text)}
.pane__note{margin:16px 0 0;font-size:13.5px;color:var(--muted)}
.pane__note--close{margin-top:14px}
.pane__foot{margin:16px 0 0;font:500 10.5px/1.5 var(--mono);letter-spacing:.05em;color:var(--faint);
  padding-top:12px;border-top:1.5px solid var(--line)}
.stepper{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.step{font:500 11px/1 var(--mono);color:var(--muted);padding:9px 10px;border:1.5px solid transparent;
  border-radius:var(--chip-radius);white-space:nowrap}
.step--done{color:var(--text)}
.step--now{border-color:var(--ink);background:var(--canvas);color:var(--ink)}
.step__sep{color:var(--faint);font-size:11px}
.find{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-top:1.5px solid var(--line)}
.find:first-of-type{border-top:0}
.find img{width:17px;height:17px;object-fit:contain;margin-top:2px;flex:none}
.find__t{font-size:14px;color:var(--ink);line-height:1.45;margin:0 0 5px}
.find__r{font:500 10px/1 var(--mono);letter-spacing:.05em;padding:5px 7px;border-radius:var(--chip-radius);
  border:1.5px solid var(--line-strong);color:var(--muted);display:inline-block}
.find__r--rem{border-color:var(--green);color:var(--green);background:var(--green-paper)}
.find__r--esc{border-color:var(--amber);color:var(--amber-text);background:var(--amber-paper)}
.find__r--blk{border-color:var(--red-line);color:var(--red);background:var(--red-paper)}
.prcard{border:1.5px solid var(--line-strong);border-radius:var(--card-radius);padding:18px;background:var(--canvas)}
.prcard h3{margin-bottom:6px}
.prcard .prmeta{font:400 12px/1.4 var(--mono);color:var(--muted)}
.prhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.prhead img{width:26px;height:26px;object-fit:contain}

/* ---------- the execution graph, drawn as SVG so it scales ---------- */
.graph{width:100%;max-width:100%;height:auto;display:block}
.gbox{fill:var(--surface);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.gbox--run{fill:var(--amber-paper);stroke:var(--amber)}
.gname{font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:-.015em;fill:var(--ink)}
.gmeta{font-family:var(--mono);font-size:10.5px;fill:var(--muted)}
.gchip{fill:var(--canvas);stroke:var(--line-strong);stroke-width:1.5}
.gchip--run{fill:var(--amber-paper);stroke:var(--amber)}
.gchip--done{fill:var(--green-paper);stroke:var(--green)}
.gchiptext{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;fill:var(--muted)}
.gchiptext--run{fill:var(--amber-text)}
.gchiptext--done{fill:var(--green)}
.gedge{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;opacity:.55}
.garrow{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.graph__foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:14px;
  padding-top:14px;border-top:1.5px solid var(--line)}
.graph__size{font:500 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
/* the mock's own primary button: a span, because nothing in a mock is clickable */
.gobtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:9px 14px;background:var(--ink);color:var(--on-ink);
  border:1.5px solid var(--ink);border-radius:var(--btn-radius);font:600 13px/1.2 var(--font)}
.gobtn img{width:16px;height:16px;object-fit:contain;flex:none}

/* ---------- planning mode ---------- */
.pm__split{display:grid;grid-template-columns:minmax(0,1fr) 316px;flex:1;min-width:0}
.pm__split .mock__pane{padding:18px 20px}
.pm__under{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:20px 28px;
  margin-top:20px;padding-top:20px;border-top:1.5px solid var(--line)}
.pm__cap{font:500 11px/1.6 var(--mono);letter-spacing:.04em;color:var(--amber-text);margin:0 0 10px}
.pm__copy p:last-child{margin:0;color:var(--text);font-size:15px;line-height:1.6}
.pm__iv{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--card-radius);padding:18px}
.pm__iv img{width:26px;height:26px;object-fit:contain;margin-bottom:10px}
.pm__iv h3{margin-bottom:8px}
.pm__iv p{margin:0;color:var(--text);font-size:14px;line-height:1.6}

/* spec pane */
.doc{border:1.5px solid var(--line);border-radius:var(--card-radius);background:var(--canvas);padding:16px}
.doc__t{font:600 16px/1.3 var(--font);letter-spacing:-.015em;margin:0 0 5px;color:var(--ink)}
.doc__s{font:400 11px/1.4 var(--mono);color:var(--muted);margin:0 0 14px}
.req{display:flex;gap:11px;padding:9px 0;border-top:1.5px solid var(--line)}
.req__id{font:500 10.5px/1.6 var(--mono);color:var(--amber-text);flex:none;
  background:var(--amber-paper);border:1.5px solid var(--amber);border-radius:5px 3px 6px 3px;
  padding:0 5px;height:22px;display:inline-flex;align-items:center}
.req__b{font-size:13.5px;line-height:1.5;color:var(--text)}

/* explorer pane */
.filterbox{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line-strong);
  border-radius:var(--chip-radius);background:var(--surface);padding:9px 11px;margin-bottom:12px;
  font:400 11.5px/1 var(--mono);color:var(--faint)}
.filterbox svg{width:13px;height:13px;flex:none;color:var(--faint)}
.tri{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tri .lbl{margin-right:2px}
.seg{font:500 10px/1 var(--mono);letter-spacing:.05em;padding:6px 8px;border:1.5px solid var(--line-strong);
  border-radius:var(--chip-radius);color:var(--muted);background:var(--surface)}
.seg--on{background:var(--amber-paper);border-color:var(--amber);color:var(--amber-text)}
.tree{border:1.5px solid var(--line);border-radius:var(--card-radius);background:var(--canvas);padding:4px 12px}
.tree__row{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1.5px solid var(--line)}
.tree__row:first-child{border-top:0}
.tree__p{font:500 11.5px/1.3 var(--mono);color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ind1{padding-left:13px}
.ind2{padding-left:26px}
.ind3{padding-left:39px}
.tree__n{margin-left:auto;font:500 10px/1 var(--mono);letter-spacing:.09em;color:var(--faint);flex:none}
.tick{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:5px 3px 6px 3px;
  border:1.5px solid var(--amber);background:var(--amber-paper)}
.tick img{width:12px;height:12px;object-fit:contain}
.tick--no{border-color:var(--red-line);background:var(--red-paper)}
.tree__row--allow .tree__p{color:var(--ink)}
.tree__row--deny .tree__p{color:var(--muted);text-decoration:line-through}
.chk{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:12.5px;color:var(--text)}
.chk i{width:16px;height:16px;flex:none;border:1.5px solid var(--line-strong);border-radius:4px;background:var(--surface)}
.standing{margin-top:14px;padding-top:12px;border-top:1.5px solid var(--line)}
.standing .lbl{display:block;margin-bottom:7px}
.standing p{font:400 10.5px/1.7 var(--mono);color:var(--muted);margin:0}

/* impact pane */
.impact__copy{font-size:12.5px;line-height:1.6;color:var(--text);margin:0 0 14px}
.warn{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;padding:10px 0;border-top:1.5px solid var(--line)}
.warn:first-of-type{border-top:0}
.warn__s{font:500 11.5px/1.4 var(--mono);color:var(--ink);background:var(--amber-paper);
  border:1.5px solid var(--amber);border-radius:5px 3px 6px 3px;padding:2px 6px}
.warn__a{font-size:11.5px;color:var(--muted)}
.warn__p{font:400 11.5px/1.4 var(--mono);color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis}
.warn__kind{font:500 9.5px/1 var(--mono);letter-spacing:.06em;color:var(--red);background:var(--red-paper);
  border:1.5px solid var(--red-line);border-radius:5px 3px 6px 3px;padding:4px 5px}
.impact__act{margin-top:16px;padding-top:14px;border-top:1.5px solid var(--line)}
.impact__foot{margin:10px 0 0;font:500 10.5px/1.5 var(--mono);letter-spacing:.05em;color:var(--faint)}

/* the docked interview column */
.iv{border-left:1.5px solid var(--line);background:var(--soft);display:flex;flex-direction:column;min-width:0}
.iv__head{padding:13px 14px;border-bottom:1.5px solid var(--line)}
.iv__who{display:block;font:600 12px/1.35 var(--font);color:var(--ink);margin-bottom:6px}
.iv__can{display:block;font:400 9.5px/1.65 var(--mono);color:var(--muted)}
.iv__body{padding:13px 14px;display:flex;flex-direction:column;gap:11px;flex:1}
.turn{border-radius:var(--chip-radius)}
.turn__k{display:block;font:500 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;
  color:var(--faint);margin-bottom:5px}
.turn p{margin:0;font-size:12px;line-height:1.55;color:var(--text)}
.turn--you{background:var(--surface);border:1.5px solid var(--line);padding:9px 10px}
.turn--agent p{color:var(--ink)}
.refusal{border:1.5px solid var(--red-line);background:var(--red-paper);border-radius:var(--chip-radius);padding:9px 10px}
.refusal__t{margin:0 0 4px;font:600 11.5px/1.3 var(--font);color:var(--red)}
.refusal p:last-child{margin:0;font-size:11.5px;line-height:1.5;color:var(--text)}
.editcard{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:var(--card-radius);padding:10px}
.editcard__k{margin:0 0 5px;font:500 9.5px/1 var(--mono);letter-spacing:.09em;color:var(--amber-text)}
.editcard__t{margin:0 0 8px;font:600 12.5px/1.3 var(--font);color:var(--ink)}
.erow{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:6px 0;border-top:1.5px solid var(--line)}
.erow .k{font:500 9px/1.5 var(--mono);letter-spacing:.08em;color:var(--faint)}
.erow .v{font:400 10.5px/1.6 var(--mono);color:var(--text)}
.erow s{color:var(--faint)}
.editcard__edges{margin:7px 0 9px;font:400 9.5px/1.5 var(--mono);color:var(--muted)}
.editcard__btns{display:flex;flex-wrap:wrap;gap:6px}
.minibtn{display:inline-flex;align-items:center;font:500 10px/1 var(--mono);letter-spacing:.04em;
  padding:7px 9px;border:1.5px solid var(--line-strong);border-radius:var(--chip-radius);
  background:var(--canvas);color:var(--text)}
.iv__composer{padding:12px 14px;border-top:1.5px solid var(--line);background:var(--surface)}
.iv__input{border:1.5px solid var(--line-strong);border-radius:var(--chip-radius);background:var(--canvas);
  padding:10px 11px;font:400 11px/1.3 var(--mono);color:var(--faint);margin-bottom:9px}
.iv__go{width:100%}
.iv__cap{margin:9px 0 0;font-size:10.5px;line-height:1.55;color:var(--muted)}

/* the flow line and its margin note */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:24px;padding-top:20px;
  border-top:1.5px solid var(--line)}
.flow__s{display:inline-flex;align-items:center;gap:7px;font:500 11.5px/1 var(--mono);
  color:var(--text);white-space:nowrap}
.flow__s img{width:17px;height:17px;object-fit:contain;flex:none}
.flow__a{color:var(--faint);font-size:12px}
.flow__note{margin:14px 0 0}

/* ---------- run it anywhere ---------- */
.term{background:var(--terminal);color:var(--terminal-text);border-radius:var(--chip-radius);
  padding:11px 12px;font:500 12.5px/1.5 var(--mono);margin:0 0 14px;overflow:auto}
.card p.term__note{font:400 11.5px/1.5 var(--mono);color:var(--muted);margin:9px 0 12px}
.cardlink{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--amber-text);
  text-decoration:none;border-bottom:1.5px solid var(--line-strong)}
.cardlink:hover{color:var(--ink);border-bottom-color:var(--ink)}
.download{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.download p{margin:0;font-size:13.5px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq__h{margin:0}
.faq{max-width:820px;border-top:1.5px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:60px;padding:16px 2px;background:transparent;border:0;border-bottom:1.5px solid var(--line);
  text-align:left;font:600 17px/1.35 var(--font);color:var(--ink);letter-spacing:-.015em;
}
.faq__q:hover{color:var(--amber-text)}
.faq__q i{flex:none;width:18px;height:18px;position:relative}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;background:var(--ink);
  transition:transform var(--motion) var(--ease)}
.faq__q i::before{left:0;right:0;top:8px;height:1.5px}
.faq__q i::after{top:0;bottom:0;left:8px;width:1.5px}
.faq__q[aria-expanded="true"] i::after{transform:scaleY(0)}
.faq__a{
  display:grid;grid-template-rows:0fr;opacity:0;max-width:68ch;
  transition:grid-template-rows var(--resize-dur) var(--resize-ease),
             opacity var(--resize-dur) var(--resize-ease);
}
.faq__a[data-open="true"]{grid-template-rows:1fr;opacity:1}
/* the padding and the rule under the answer sit inside the collapsing row,
   so a closed answer leaves nothing behind */
.faq__a__in{overflow:hidden;min-height:0;padding:2px 2px 20px;
  border-bottom:1.5px solid var(--line)}
.faq__a p{margin:0;color:var(--text);font-size:15.5px}
@media (prefers-reduced-motion: reduce){
  .faq__a{transition:none}
}

/* ---------- footer ---------- */
.foot{border-top:1.5px solid var(--line);background:var(--canvas);padding:clamp(40px,5vw,64px) 0 26px}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,.62fr));gap:28px}
.founder{background:var(--perbo-yellow);color:var(--perbo-lid);border:1.5px solid var(--perbo-lid);
  border-radius:var(--card-radius);padding:22px}
.founder__id{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.founder__id img.cup{width:64px;height:auto}
.founder__id img.word{height:26px;width:auto}
.founder p{font-size:14.5px;line-height:1.6;color:var(--lid-soft);margin:0 0 8px}
.founder .quote{font-family:"Caveat",cursive;font-weight:500;font-size:34px;line-height:.6;color:var(--lid-faint);display:block;margin-bottom:6px}
.founder .sign{font-family:"Caveat",cursive;font-weight:500;font-size:22px;color:var(--perbo-lid);margin:0}
.fcol h3{font-size:13px;font-weight:600;margin-bottom:12px}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin-bottom:9px}
.fcol a{font-size:14.5px;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.fcol a:hover{color:var(--ink);text-decoration:underline}
.fcol a img{width:15px;height:15px;object-fit:contain;flex:none}
.foot__bottom{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  margin-top:clamp(28px,4vw,46px);padding-top:20px;border-top:1.5px solid var(--line)}
.foot__bottom p,.foot__bottom a{font-size:13.5px;color:var(--muted);margin:0}
.foot__bottom a{text-decoration:none}
.foot__bottom a:hover{color:var(--ink);text-decoration:underline}
.copy{display:inline-flex;align-items:center;gap:8px}
.copy img{width:17px;height:17px;object-fit:contain;flex:none}

/* ================= responsive ================= */
@media (max-width:1000px){
  .hero__in{grid-template-columns:minmax(0,1fr) clamp(200px,24vw,280px)}
  .hero__cup img{width:clamp(200px,24vw,280px)}
  .grid3{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr;gap:24px}
  .founder{grid-column:1/-1}
  .pm__under{grid-template-columns:1fr;gap:18px}
}
@media (max-width:940px){
  /* the four-pane mock stacks: tabs above, pane, then the interview below */
  .pm__split{grid-template-columns:minmax(0,1fr)}
  .iv{border-left:0;border-top:1.5px solid var(--line)}
}
@media (max-width:900px){
  /* the menu stays laid out and hides with visibility, so it can animate both
     ways and is still out of the tab order while closed */
  .bar__nav{
    display:flex;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--perbo-cream);border:1.5px solid var(--perbo-lid);
    border-radius:var(--card-radius);padding:8px;margin:0 clamp(16px,3.6vw,32px);
    opacity:0;visibility:hidden;filter:blur(var(--blur-small));
    transform:translateY(calc(var(--distance-base) * -1));
    transition:opacity var(--duration-medium) var(--ease-smooth-out),
               transform var(--duration-medium) var(--ease-smooth-out),
               filter var(--duration-medium) var(--ease-smooth-out),
               visibility 0s linear var(--duration-medium);
  }
  .bar__nav[data-open="true"]{
    opacity:1;visibility:visible;filter:blur(0);transform:none;
    transition:opacity var(--duration-slow) var(--ease-smooth-out),
               transform var(--duration-slow) var(--ease-smooth-out),
               filter var(--duration-slow) var(--ease-smooth-out),
               visibility 0s linear 0s;
  }
  .navlink,.navbtn{justify-content:space-between;width:100%}
  /* the panel is static here, so the dropdown snippet's hidden start state
     must not reach it */
  .drop__panel.t-dropdown{
    position:static;min-width:0;border:0;padding:0 0 6px 10px;background:transparent;
    opacity:1;transform:none;pointer-events:auto;transition:none;
  }
  .drop__panel.t-dropdown.is-closing{display:none}
  .drop__panel.t-dropdown::before{content:none}
  .menubtn{display:inline-flex}
}
@media (max-width:900px) and (prefers-reduced-motion: reduce){
  .bar__nav,.bar__nav[data-open="true"]{transition:none}
}
@media (max-width:880px){
  .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero__copy,.hero__film{grid-column:1}
  .hero__copy{grid-row:1;max-width:none}
  .hero__cup{grid-column:1;grid-row:2;margin:14px 0 0}
  .hero__cup img{width:160px}
  .hero__note{grid-column:1;grid-row:3;max-width:none;margin-top:22px;padding-top:18px}
  .hero__film{grid-row:4;padding-top:22px}
  .works{grid-row:5}
  .hero{--hero-foot:0px;padding-bottom:36px}
  .film{grid-template-columns:1fr}
  .fcard--spec,.fcard--graph,.fcard--review,.fcard--you{grid-column:1;grid-row:auto}
  .chip--b1,.chip--b2,.chip--b3{--fx:14px;--fy:-196px}
  .chip--you{--fx:0px;--fy:96px}
  .mock{min-height:0}
}
@media (max-width:640px){
  .grid3{grid-template-columns:1fr}
  /* the rail turns into a strip across the top so the panes keep their width */
  .mock{flex-direction:column}
  .mock__rail{width:auto;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
    gap:16px;padding:11px 14px;border-right:0;border-bottom:1.5px solid var(--line)}
  .mock__spacer{flex:0 0 auto;width:8px}
  .mock__pane,.pm__split .mock__pane{padding:16px}
  .row{grid-template-columns:1fr;gap:4px;padding:10px 0}
  .foot__grid{grid-template-columns:1fr}
  .stamp{width:40px;right:-8px;top:-12px}
  .tab{padding:10px 14px;font-size:14px}
}

/* ---------- 404: the butter ground, the cup, one way back ---------- */
.bar__right--end{margin-left:auto}
.nf{position:relative;overflow:hidden;background:var(--perbo-yellow);color:var(--perbo-lid);
  display:flex;align-items:center;min-height:calc(100vh - 64px);padding:clamp(40px,7vw,86px) 0}
.nf :focus-visible{outline:3px solid var(--perbo-lid);outline-offset:3px}
.nf__in{width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:clamp(20px,5vw,56px)}
.nf__copy{flex:1 1 320px;max-width:44ch}
.nf__eyebrow{display:block;font:500 11px/1 var(--mono);letter-spacing:.09em;
  color:var(--lid-faint);margin-bottom:14px}
.nf h1{color:var(--perbo-lid);margin-bottom:14px}
.nf__lead{font-size:17px;line-height:1.55;color:var(--lid-soft);margin:0 0 24px}
.nf__cup img{width:200px;transform:rotate(-5deg);pointer-events:none}
@media (max-width:640px){.nf__cup img{width:150px}}

/* ---------- privacy: one column of paper, nothing else ---------- */
.priv{padding:clamp(40px,6vw,76px) 0 clamp(56px,7vw,92px)}
.priv__in{max-width:62ch}
.priv__eyebrow{display:block;font:500 11px/1 var(--mono);letter-spacing:.09em;
  color:var(--muted);margin-bottom:16px}
.priv h1{margin-bottom:20px}
.priv h2{font-size:19px;margin:32px 0 10px}
.priv p{color:var(--text);font-size:16px;margin:0 0 14px}
.priv p:last-child{margin-bottom:0}
.priv a{color:var(--amber-text)}