/* Control-panel layout on a soft UI surface. One grey; depth from stacked faint
   shadows plus a white top highlight (raised) or inset shadows (pressed). Type and
   the primary button stay solid black. Left-aligned throughout: the page reads like
   an instrument, not a centred landing page. */

@font-face{font-family:"Satoshi";src:url("/fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:light;
  --surface:#f5f5f5;
  --ink:#000;
  --muted:#4d4d4d;
  --faint:#8c8c8c;
  --soft:
    0 .7px .7px -.67px rgba(0,0,0,.08), 0 1.8px 1.8px -1.33px rgba(0,0,0,.08),
    0 3.6px 3.6px -2px rgba(0,0,0,.07), 0 6.9px 6.9px -2.67px rgba(0,0,0,.07),
    0 13.6px 13.6px -3.33px rgba(0,0,0,.05), 0 30px 30px -4px rgba(0,0,0,.02),
    inset 0 3px 1px 0 #fff;
  --soft-sm:
    0 .7px .7px -.67px rgba(0,0,0,.1), 0 1.8px 1.8px -1.33px rgba(0,0,0,.09),
    0 3.6px 3.6px -2px rgba(0,0,0,.08), 0 10px 14px -4px rgba(0,0,0,.08),
    inset 0 2px 1px 0 #fff;
  --press:inset 0 2px 5px rgba(0,0,0,.09), inset 0 -2px 1px #fff;
  --font:"Satoshi",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--surface); color:var(--ink); font-family:var(--font); font-size:1rem; line-height:1.5}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
h1,h2,h3{text-wrap:balance}
a:focus-visible{outline:2px solid var(--ink); outline-offset:4px}

.frame{max-width:80rem; margin-inline:auto; padding-inline:1.25rem}
@media (min-width:640px){.frame{padding-inline:2.5rem}}

/* Buttons and pills */
.btn{display:inline-flex; align-items:center; justify-content:center; font-weight:500; font-size:.95rem;
  text-decoration:none; border-radius:12px; padding:.85rem 1.4rem; transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:.6rem 1.1rem; font-size:.9rem}
.btn-ink{background:var(--ink); color:#fff; box-shadow:0 8px 16px -6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18)}
.btn-soft{background:var(--surface); box-shadow:var(--soft-sm)}
.pill{display:inline-block; font-size:.85rem; font-weight:500; padding:.5rem 1rem; border-radius:999px; box-shadow:var(--soft-sm)}
.chip{font-weight:500; text-decoration:none; padding:.75rem 1.3rem; border-radius:999px; box-shadow:var(--soft-sm)}

/* Nav */
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding-block:1.25rem}
.wordmark{font-weight:700; font-size:1.15rem; text-decoration:none; letter-spacing:-.02em}
.wordmark span{color:var(--faint)}

/* Hero */
.hero{display:grid; gap:3.5rem; align-items:center; padding-block:4rem 6rem}
@media (min-width:1000px){.hero{grid-template-columns:1.2fr .8fr; gap:4rem; min-height:calc(100svh - 5rem); padding-block:2rem 5rem}}
.hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:1.75rem}
.hero h1{font-weight:500; font-size:clamp(2.5rem,4.8vw,4.25rem); line-height:1.05; letter-spacing:-.025em}
.hero h1 span{display:block}
.hero-sub{font-size:1.1rem; line-height:1.6; color:var(--muted); max-width:32rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.9rem}

/* Console */
.console{border-radius:28px; padding:1rem; box-shadow:var(--soft); display:flex; flex-direction:column; gap:1rem; width:100%; max-width:30rem; justify-self:center}
.screen{border-radius:20px; box-shadow:var(--press); padding:1.25rem; display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center}
.readout{font-size:.78rem; font-weight:500; color:var(--faint)}
.gauge{display:flex; flex-direction:column; align-items:center; gap:.6rem}
.dial{position:relative; width:7.5rem; height:7.5rem; border-radius:50%; box-shadow:var(--soft)}
.tick{position:absolute; left:50%; top:50%; width:.35rem; height:.35rem; margin:-.175rem; border-radius:50%; background:var(--faint);
  transform:rotate(var(--a)) translateY(-2.9rem)}
.t1{--a:-120deg} .t2{--a:-60deg} .t3{--a:0deg} .t4{--a:60deg} .t5{--a:120deg}
/* needle points up at 0deg; -120deg = low end, +120deg = high end */
.needle{position:absolute; left:50%; bottom:50%; width:.4rem; height:2.5rem; margin-left:-.2rem; border-radius:999px; background:var(--ink);
  transform-origin:50% 100%; transform:rotate(80deg)}
.dial::after{content:""; position:absolute; left:50%; top:50%; width:1.1rem; height:1.1rem; margin:-.55rem; border-radius:50%; background:var(--surface); box-shadow:var(--soft-sm)}
.traces{display:flex; flex-direction:column; gap:.55rem}
.trace{height:.85rem; border-radius:999px; box-shadow:var(--soft-sm); width:100%}
.trace.short{width:62%} .trace.mid{width:80%}
.trace.fail{width:90%; background:var(--ink); box-shadow:0 6px 12px -6px rgba(0,0,0,.5)}

.switches{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.switches li{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.8rem 1rem; border-radius:16px; box-shadow:var(--soft-sm); font-weight:500; font-size:.92rem}
.sw{position:relative; flex-shrink:0; width:2.6rem; height:1.5rem; border-radius:999px; box-shadow:var(--press)}
.sw::after{content:""; position:absolute; top:.2rem; left:.2rem; width:1.1rem; height:1.1rem; border-radius:50%; background:var(--surface); box-shadow:var(--soft-sm)}
.sw.on{background:var(--ink)} .sw.on::after{transform:translateX(1.1rem)}

/* The one orchestrated moment: fallbacks switch on, the failing trace clears, the dial swings up */
@media (prefers-reduced-motion:no-preference){
  .needle{transform:rotate(-70deg); animation:swing 1.2s cubic-bezier(.3,1.35,.5,1) 1.9s forwards}
  .sw.flip{animation:swbg .3s ease 1.5s forwards}
  .sw.flip::after{animation:knob .3s ease 1.5s forwards}
  .trace.fail{animation:clear .5s ease 1.8s forwards}
}
@media (prefers-reduced-motion:reduce){
  .sw.flip{background:var(--ink)} .sw.flip::after{transform:translateX(1.1rem)}
  .trace.fail{background:transparent; box-shadow:var(--soft-sm)}
}
@keyframes swing{from{transform:rotate(-70deg)} to{transform:rotate(80deg)}}
@keyframes swbg{to{background:var(--ink)}}
@keyframes knob{to{transform:translateX(1.1rem)}}
@keyframes clear{to{background:transparent; box-shadow:var(--soft-sm)}}

/* Hero visual (drawn by field.js): dot waves behind, dithered dashboard in front */
.hero{position:relative; isolation:isolate}
.waves{position:absolute; z-index:-1; top:0; bottom:0; overflow:hidden; left:50%; width:100vw; transform:translateX(-50%); pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%)}
.waves canvas{width:100%; height:100%; display:block}
/* Depth behind the waves, monochrome only: a white bloom behind the headline and
   the call card, and a slightly deeper floor where the waves roll, so the hero
   reads as a lit room with a horizon rather than a flat sheet. */
.hero::before{content:""; position:absolute; z-index:-2; top:-6rem; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%); pointer-events:none;
  background:
    radial-gradient(ellipse 45% 55% at 28% 42%, rgba(255,255,255,1), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 30% 45% at 76% 48%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    /* horizon: a darker band where the waves meet the distance */
    radial-gradient(ellipse 90% 6% at 50% 50%, rgba(0,0,0,.05), rgba(0,0,0,0) 100%),
    /* floor shading under the near waves */
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.06) 80%, rgba(0,0,0,0) 100%),
    /* vignette: the edges fall off so the centre reads as lit */
    radial-gradient(ellipse 85% 75% at 50% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,.15) 100%),
    /* sky to floor: a touch darker overhead, brightest at the horizon, deeper on the floor */
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.05) 75%, rgba(0,0,0,.1) 100%)}
html,body{overflow-x:clip}

/* Sections */
.note{padding-block:4rem}
.track-section,.scope{padding-block:6.25rem}
.statement{font-size:clamp(1.35rem,2.4vw,1.9rem); font-weight:500; line-height:1.35; letter-spacing:-.015em; max-width:34ch}
.founder{display:flex; align-items:center; gap:.6rem; color:var(--muted); margin-top:2.25rem}
.founder-line{color:var(--ink)}
.avatar{flex-shrink:0; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:.65rem; font-weight:700; box-shadow:var(--soft-sm)}
@media (min-width:1000px){.note{display:grid; grid-template-columns:1fr auto; align-items:end; gap:3rem} .founder{margin-top:0}}

.section-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.75rem 2rem; margin-bottom:3.5rem}
.section-head h2,.scope h2{font-weight:500; font-size:clamp(2rem,4vw,3.25rem); line-height:1.1; letter-spacing:-.015em}
.section-head p{color:var(--muted)}

.stops{display:grid; gap:1.5rem; margin-top:1.25rem}
@media (min-width:860px){.stops{grid-template-columns:4fr 4fr 3fr; gap:1.5rem}}
.stops li{padding:1.75rem; border-radius:22px; box-shadow:var(--soft); transition:transform .25s ease, opacity .25s ease}
.stops:has(.is-active) li{opacity:.55}
.stops li.is-active{opacity:1; transform:translateY(-4px)}
.rail{cursor:ew-resize}
.when{font-size:.85rem; font-weight:500; color:var(--faint)}
.stops h3{font-weight:500; font-size:1.35rem; letter-spacing:-.01em; margin:.4rem 0 .6rem}
.stops li p:last-child{color:var(--muted); line-height:1.6}
.promise{margin-top:2.5rem; color:var(--muted); line-height:1.7; font-size:.95rem}
/* Scope bank */
.scope{display:grid; gap:2.5rem}
@media (min-width:1000px){.scope{grid-template-columns:1.5fr 1fr; align-items:stretch; column-gap:4rem; padding-block:8rem}}
/* Scope as a live trace: one request, one line per layer, filling in as it passes */
.scope-lede{color:var(--muted); font-size:1.05rem; line-height:1.6; max-width:24rem; margin-top:1.25rem}
.trace-card{margin:0; border-radius:28px; padding:1.75rem 2rem 2rem; background:var(--surface); box-shadow:var(--soft);
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.9rem; min-width:0}
.trace-head{display:flex; align-items:center; gap:.6rem; color:var(--faint); padding-bottom:1.25rem; margin-bottom:.75rem;
  border-bottom:1px dashed color-mix(in srgb,#000 12%,transparent)}
.trace-clock{margin-left:auto; font-variant-numeric:tabular-nums}
.tlist{display:flex; flex-direction:column}
.tr{display:grid; grid-template-columns:22px 9.5rem 1fr auto; align-items:center; gap:.9rem; padding:.95rem 0;
  border-bottom:1px solid color-mix(in srgb,#000 5%,transparent); transition:opacity .35s ease}
.tr:last-child{border-bottom:0}
.tr .px{width:22px; height:22px}
.tn{font-family:var(--font); font-weight:500; font-size:.98rem}
.td{color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tt{color:var(--faint); font-variant-numeric:tabular-nums}
.tr.warn .td,.tr.warn .tt{color:var(--ink); text-decoration:line-through; text-decoration-color:color-mix(in srgb,#000 35%,transparent)}
.trace-card.is-playing .tr{opacity:.18} .trace-card.is-playing .tr.on{opacity:1}
.trace-card.is-playing .tr:not(.on) .td{visibility:hidden}
.trace-bar{display:flex; gap:3px; margin-top:1.5rem; height:10px}
.trace-bar i{flex:1; background:color-mix(in srgb,#000 8%,transparent)}
.trace-bar i.f{background:var(--ink)}
@media (max-width:640px){.tr{grid-template-columns:22px 1fr auto} .td{grid-column:2 / -1; grid-row:2; white-space:normal}}
.scope-out{color:var(--muted); grid-column:1/-1}
@media (min-width:1000px){.scope-out{grid-column:2}}

/* Facts */
.facts{display:grid; gap:1.25rem; padding-block:1rem 4rem}
@media (min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts p{border-radius:20px; box-shadow:var(--press); padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.25rem}
.facts strong{font-weight:500; font-size:2.2rem; letter-spacing:-.015em; line-height:1.1}
.facts span{color:var(--muted)}
.footer{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem; padding-block:2.5rem; font-size:.9rem; color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
.explain{display:flex; flex-direction:column; min-width:0; gap:2rem}
@media (min-width:1000px){.explain{justify-content:space-between; padding-block:1.75rem 2rem}}
.explain h2{line-height:1}
.badge-band{margin-top:4rem; padding:3.5rem 1.5rem; border-radius:28px; box-shadow:var(--press); display:flex; flex-direction:column; align-items:center; gap:2rem}
.badge-band > p{margin:0; color:var(--muted); font-weight:500}
.founder-card{display:flex; align-items:center; gap:1.25rem; width:100%; margin-bottom:1.5rem}
.portrait{width:5.5rem; height:5.5rem; border-radius:50%; box-shadow:var(--soft); background:#fff; display:grid; place-items:center; font-weight:500; font-size:1.4rem; overflow:hidden; flex:none}
.portrait img{width:100%; height:100%; object-fit:cover}
.founder-card p{margin:0; display:flex; flex-direction:column}
.founder-card strong{font-weight:500; font-size:1.3rem}
.founder-card span{color:var(--muted)}

/* ---------- Inkflowers additions ---------- */

.pill{background:var(--surface)}
/* Hero with no side card: one centred column */
@media (min-width:1000px){.hero{grid-template-columns:1fr}}
.hero-copy{align-items:center; text-align:center; margin-inline:auto}
.hero h1{max-width:16ch}
.hero-sub{margin-inline:auto}
.hero-actions{justify-content:center}
.hero-copy .pill{margin-bottom:-.25rem}
/* four stops instead of three */
@media (min-width:860px){.stops{grid-template-columns:repeat(4,1fr)}}
/* trace rows: a plain pressed square stands in for the pixel icons */
.tr .px{display:block; border-radius:5px; box-shadow:var(--press)}
.tr:nth-child(5) .px{background:var(--ink); box-shadow:none}

.contact{text-align:center}
.contact h2{font-weight:500; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.15; letter-spacing:-.015em}
.contact p{margin-top:-1rem}
#contact{padding-block:2rem 3rem}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Engagement journey: stacked by default, pinned and scroll-driven once journey.js runs */
.journey{padding-block:4rem}
.journey-stage{display:flex; flex-direction:column; align-items:center; text-align:center; padding:2rem 1.25rem}
.journey-stage h3{font-weight:500; font-size:clamp(2.6rem,5vw,4rem); letter-spacing:-.025em; line-height:1}
.journey-stage p{margin-top:.9rem; font-size:1.1rem; color:var(--muted)}
.journey-stage svg{width:min(100%,80rem); height:auto; margin-top:1rem}
.journey-nav{display:none}
.scope-canvas{display:block; width:min(100%,80rem); aspect-ratio:1280 / 520; margin-top:1rem}

.journey.is-pinned{height:400vh; padding:0}
.journey.is-pinned .journey-pin{position:sticky; top:0; height:100svh; overflow:hidden}
.journey.is-pinned .journey-stage{position:absolute; inset:0 0 5rem; justify-content:center; opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s}
.journey.is-pinned .journey-stage.is-active{opacity:1; visibility:visible; transition:opacity .45s ease .2s}
.journey.is-pinned .journey-nav{display:flex; position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); gap:4px; padding:5px;
  border-radius:14px; box-shadow:var(--press); background:var(--surface)}
.journey-nav button{font:inherit; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.78rem; letter-spacing:.06em;
  color:var(--faint); background:transparent; border:0; border-radius:10px; padding:.7rem 1.1rem; cursor:pointer; white-space:nowrap}
.journey-nav button[aria-current]{color:var(--ink); background:var(--surface); box-shadow:var(--soft-sm)}
.journey-nav button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media (max-width:560px){.journey-nav button{padding:.6rem .55rem; font-size:.68rem}}

/* Drawing in: lines trace from start to end, dots and test checks fade up in sequence */
@media (prefers-reduced-motion:no-preference){
  .journey.is-pinned .journey-stage path{stroke-dasharray:1; stroke-dashoffset:1;
    transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1) calc(var(--i,0) * 22ms)}
  /* hand over flows outward, so its lines draw from their far end back toward the team */
  .journey.is-pinned .journey-stage[data-stage="3"] path{stroke-dashoffset:-1}
  .journey.is-pinned .journey-stage.is-active path{stroke-dashoffset:0}
  .journey.is-pinned .journey-stage circle,.journey.is-pinned .journey-stage rect{opacity:0;
    transition:opacity .5s ease calc(var(--i,0) * 12ms)}
  .journey.is-pinned .journey-stage.is-active circle,.journey.is-pinned .journey-stage.is-active rect{opacity:1}
  /* Measure runs in three beats: lines reach the tests, the tests fill, then lines leave for ready to ship */
  .journey.is-pinned .journey-stage[data-stage="2"] .j-in path{transition-duration:1.1s; transition-delay:calc(var(--i) * 30ms)}
  .journey.is-pinned .journey-stage[data-stage="2"] .j-checks rect{transition-duration:.2s; transition-delay:calc(1.2s + var(--i) * 18ms)}
  .journey.is-pinned .journey-stage[data-stage="2"] .j-out path{transition-duration:1.1s; transition-delay:calc(2.2s + var(--i) * 30ms)}
  .journey.is-pinned .journey-stage[data-stage="2"] .j-fails,
  .journey.is-pinned .journey-stage[data-stage="2"] text.j-end,
  .journey.is-pinned .journey-stage[data-stage="2"] rect.j-end{opacity:0; transition:opacity .4s ease}
  .journey.is-pinned .journey-stage[data-stage="2"].is-active .j-fails{opacity:1; transition-delay:2.1s}
  .journey.is-pinned .journey-stage[data-stage="2"].is-active text.j-end,
  .journey.is-pinned .journey-stage[data-stage="2"].is-active rect.j-end{opacity:1; transition-delay:3.4s}
  .journey.is-pinned .journey-stage h3,.journey.is-pinned .journey-stage p{transform:translateY(10px); transition:transform .6s ease}
  .journey.is-pinned .journey-stage.is-active h3,.journey.is-pinned .journey-stage.is-active p{transform:none}
}

/* Every layer: chrome glyphs */
.layers{padding-block:6.25rem}
.metal-defs{position:absolute}
.glyphs{display:grid; gap:.75rem; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.glyphs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.glyphs{grid-template-columns:repeat(6,minmax(0,1fr))}}
.glyph-btn{font:inherit; color:inherit; border:0; cursor:pointer; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; gap:.45rem; padding:1.1rem .5rem .9rem; border-radius:16px;
  background:var(--surface); box-shadow:var(--soft-sm); text-align:center;
  transition:background .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease}
.glyph-btn:hover{transform:translateY(-2px)}
.glyph-btn:focus-visible{outline:2px solid var(--ink); outline-offset:4px}
.glyphs svg{width:3.25rem; height:3.25rem}
.glyph{fill:none; stroke:url(#metal); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; filter:url(#metal-drop)}
.glyphs strong{font-weight:500; font-size:.92rem}
.glyphs span{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.75rem; color:var(--faint); transition:color .35s ease}
.glyph-btn[aria-pressed="true"]{background:var(--ink); color:#fff; box-shadow:0 10px 18px -10px rgba(0,0,0,.5); transform:translateY(-2px)}
.glyph-btn[aria-pressed="true"] .glyph{filter:none}
.glyph-btn[aria-pressed="true"] span{color:#bdbdbd}
.layer-panels{margin-top:1.75rem; display:grid}
.layer-panel{grid-area:1 / 1}
.layer-panel[hidden]{display:block; visibility:hidden; opacity:0}
.layer-panel{transition:opacity .35s ease; display:flex; flex-direction:column}
.layer-panel .trace-bar{margin-top:auto; padding-top:1.5rem; height:auto}
.layer-panel .trace-bar i{height:10px}

/* Contact: inset panel with a chrome code bracket */
.contact-panel{border-radius:32px; padding:3rem 1.75rem; box-shadow:var(--press); display:grid; gap:2rem; align-items:center}
@media (min-width:900px){.contact-panel{grid-template-columns:1fr auto; padding:4rem 4.5rem; gap:3rem}}
.contact-copy{display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem}
.contact-copy h2{font-weight:500; font-size:clamp(2.2rem,5vw,4rem); line-height:1.04; letter-spacing:-.025em}
.contact-copy p{color:var(--muted); font-size:1.1rem}
.contact-actions{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem}
.contact-email{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.85rem; color:var(--faint); text-underline-offset:3px}
.contact-mark{width:min(100%,26rem); height:auto; justify-self:center}
.glyph-xl{stroke-width:30; filter:url(#metal-drop)}

/* Eval run */
.evals{display:grid; gap:3rem; align-items:center; padding-block:6rem}
@media (min-width:1000px){.evals{grid-template-columns:1fr 1.15fr; gap:4rem}}
.evals-copy{display:flex; flex-direction:column; gap:1.25rem}
.evals-tag{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.82rem; color:var(--faint)}
.evals-score{width:min(100%,32rem); height:auto}
.evals h2{font-weight:500; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.1; letter-spacing:-.015em}
.evals-lede{color:var(--muted); font-size:1.05rem; max-width:26rem}
.eval-card{margin:0; border-radius:28px; padding:1.75rem 2rem 2rem; background:var(--surface); box-shadow:var(--soft);
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.9rem; min-width:0}
.elist{display:flex; flex-direction:column}
.elist li{display:grid; grid-template-columns:1.5rem 1fr auto; gap:.9rem; align-items:center; padding:.9rem 0;
  border-bottom:1px solid color-mix(in srgb,#000 5%,transparent)}
.elist li:last-child{border-bottom:0}
.elist li span:nth-child(2){color:var(--muted); min-width:0}
.elist li span:nth-child(3){color:var(--faint); font-variant-numeric:tabular-nums}
.elist li.fail span{color:var(--ink)}
.elist li.fail span:nth-child(2){text-decoration:line-through; text-decoration-color:color-mix(in srgb,#000 35%,transparent)}