/* ==========================================================================
   LabBee, Bench Paper
   The page is a lab notebook sheet: ruled ground, a margin rail carrying the
   section number and ruler ticks, and the app's own dark screens dropped onto
   it. Depth is hairlines, never shadow. Colour is spent on state and category,
   never on decoration.
   ========================================================================== */

@font-face { font-family:'Plex Sans'; src:url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');  font-weight:400; font-display:swap; }
@font-face { font-family:'Plex Sans'; src:url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');   font-weight:500; font-display:swap; }
@font-face { font-family:'Plex Sans'; src:url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');  font-weight:400; font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');   font-weight:500; font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }

/* tokens lifted from lib/design/tokens.dart so site and app agree exactly */
:root {
  --paper:#FAF9F6; --paper-2:#F4F1EA; --card:#FFFFFF;
  --ink:#15171C; --ink-2:#565C64; --ink-3:#8B9199;
  --rule:#E4E0D8; --rule-2:#CDC6B7;
  --margin-red:#C8896F;
  --accent:#1B4FD8; --accent-deep:#12379B;
  --run:#17A05E; --warn:#E8890C; --stop:#D93A4E;
  --panel:#0B0F14; --panel-2:#131A22; --panel-rule:#263241;
  --panel-ink:#E9EEF4; --panel-ink-2:#93A2B1;
  --t0:#D93A4E; --t1:#E8890C; --t2:#C9A800; --t3:#17A05E; --t4:#2A7FD4; --t5:#7B5BD6;
  --rail: 78px;
  --gutter: clamp(18px, 4vw, 52px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  color:var(--ink);
  font-family:'Plex Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:17px; line-height:1.55; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  /* faint graph paper, 22px squares */
  background-image:
    linear-gradient(to right, rgba(21,23,28,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,23,28,.030) 1px, transparent 1px);
  background-size:22px 22px;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:100;font-family:'Plex Mono',monospace;font-size:13px}
.skip:focus{left:0;top:0}

/* ── the sheet: margin rail + content ─────────────────────────────────────── */
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}

.sheet{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  border-left:1px solid var(--rule);
}
.rail{
  position:relative;
  border-right:1px solid var(--margin-red);
  padding-top:6px;
}
/* ruler ticks down the margin */
.rail::before{
  content:'';
  position:absolute; right:-1px; top:0; bottom:0; width:9px;
  background-image:repeating-linear-gradient(to bottom,var(--rule-2) 0 1px,transparent 1px 18px);
}
.rail span{
  font-family:'Plex Mono',monospace;
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2);
  writing-mode:vertical-rl;
  display:block; padding-left:12px;
}
.body{ padding:0 0 0 clamp(20px,3.4vw,46px); min-width:0; }

section{padding-block:clamp(64px,7.5vw,104px)}
section:first-of-type{padding-top:clamp(38px,5vw,64px)}

@media (max-width:780px){
  :root{--rail:38px}
  .rail span{font-size:10px;padding-left:8px}
  .body{padding-left:18px}
}

/* ── type ─────────────────────────────────────────────────────────────────── */
h1,h2,h3{font-weight:400;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,7vw,86px);line-height:.98}
h2{font-size:clamp(28px,4.2vw,50px);line-height:1.06}
h3{font-size:19px;line-height:1.3;font-weight:500;letter-spacing:-.006em}

.kicker{
  font-family:'Plex Mono',monospace;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 18px;
}
.lede{font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--ink-2);max-width:50ch;margin:20px 0 0}
p{max-width:60ch;margin:0 0 14px}
.mono{font-family:'Plex Mono',monospace;font-variant-numeric:tabular-nums}

/* ── nav ──────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:saturate(150%) blur(9px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;gap:26px;height:58px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;margin-right:auto}
.brand img{width:25px;height:25px}
.navlink{font-family:'Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.navlink:hover{color:var(--ink)}
@media (max-width:820px){.navlink{display:none}}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .16s,color .16s}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.note{font-family:'Plex Mono',monospace;font-size:12.5px;color:var(--ink-3);line-height:1.5;max-width:44ch;margin:16px 0 0}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,68px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:38px}}

/* the live demo: the app's own timer card, rebuilt in HTML */
.demo{
  background:var(--panel);border:1px solid var(--panel-rule);
  padding:26px 26px 24px;position:relative;overflow:hidden;
}
.demo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--demo-color,var(--run));
  transform-origin:left;transform:scaleX(var(--demo-progress,.4));
  transition:transform 1s linear,background .3s
}
.demo-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.demo-label{color:var(--panel-ink);font-weight:500;font-size:17px}
.demo-state{font-family:'Plex Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--demo-color,var(--run))}
.demo-time{
  font-family:'Plex Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(58px,9vw,94px);font-weight:600;line-height:1.02;
  color:var(--panel-ink);margin:10px 0 4px;letter-spacing:-.03em;
}
.demo-sub{font-family:'Plex Mono',monospace;font-size:12px;color:var(--panel-ink-2)}
.demo-strip{
  display:flex;gap:0;margin-top:18px;border:1px solid var(--panel-rule);
}
.demo-strip b{
  flex:1;text-align:center;font-family:'Plex Mono',monospace;font-weight:400;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--panel-ink-2);padding:8px 4px;border-right:1px solid var(--panel-rule)
}
.demo-strip b:last-child{border-right:0}
.demo-strip b[data-on="1"]{color:var(--panel);background:var(--demo-color,var(--run))}
.demo-cap{font-family:'Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}

/* honest fact strip */
.facts{display:flex;flex-wrap:wrap;margin:38px 0 0;padding:0;border:1px solid var(--rule);background:var(--card)}
.facts li{list-style:none;flex:1 1 auto;text-align:center;white-space:nowrap;font-family:'Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:11px 14px;border-right:1px solid var(--rule)}
.facts li:last-child{border-right:0}

/* ── formula divider: real maths as ornament ──────────────────────────────── */
.formulas{
  display:flex;flex-wrap:wrap;gap:0;border-block:1px solid var(--rule);
  background:var(--paper-2);
}
/* Plex Mono ships without Greek (no ε, no μ). Falling back to Plex Sans keeps
   those glyphs inside the same superfamily, so the substitution is invisible;
   a generic monospace fallback would not be. */
.formulas span{
  font-family:'Plex Mono','Plex Sans',monospace;font-size:13px;color:var(--ink-3);
  padding:13px 20px;border-right:1px solid var(--rule);white-space:nowrap;
  flex:1 1 auto;text-align:center;
}
.formulas span:last-child{border-right:0}

/* ── lists ────────────────────────────────────────────────────────────────── */
.hexlist{list-style:none;padding:0;margin:26px 0 0;max-width:58ch}
.hexlist li{position:relative;padding-left:24px;margin-bottom:13px;color:var(--ink-2)}
.hexlist li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:10px;background:var(--accent);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.hexlist strong{color:var(--ink);font-weight:500}

/* ── split ────────────────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr .82fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
/* two screenshots side by side must share a baseline, not float to centre;
   different natural heights otherwise stagger and read as a mistake */
.split--shots{grid-template-columns:1fr 1fr;align-items:start}
.screen{background:var(--panel);border:1px solid var(--panel-rule)}
.screen img{width:100%}
.screen figcaption{font-family:'Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--panel-ink-2);padding:9px 13px;border-top:1px solid var(--panel-rule);background:var(--panel-2)}

/* ── state chips ──────────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0}
.chip{list-style:none;font-family:'Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border:1px solid currentColor}
.chip--run{color:var(--run)}.chip--warn{color:var(--warn)}.chip--stop{color:var(--stop)}.chip--done{color:var(--ink-3)}

/* ── tool grid ────────────────────────────────────────────────────────────── */
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-top:36px}
.tool{position:relative;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--card);padding:16px 16px 15px 20px;transition:background .15s}
.tool:hover{background:var(--paper-2)}
.tool::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tape,var(--rule-2))}
.tool h3{font-size:15.5px;margin-bottom:3px}
.tool p{margin:0;font-family:'Plex Mono','Plex Sans',monospace;font-size:11.5px;color:var(--ink-3)}
.tool--soon{background:transparent}
.tool--soon h3{color:var(--ink-2)}
.tool--soon::before{background:var(--rule-2)}
.tag-soon{float:right;font-family:'Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule-2);padding:1px 5px}

/* ── quote / callout ──────────────────────────────────────────────────────── */
.callout{border-left:3px solid var(--accent);padding:2px 0 2px 20px;margin:30px 0 0;max-width:58ch}
.callout p{margin:0;font-size:19px;line-height:1.45}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq{margin-top:34px;border-top:1px solid var(--rule);max-width:820px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:19px 40px 19px 0;font-size:17.5px;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:'Plex Mono',monospace;font-size:19px;color:var(--ink-3)}
.faq details[open] summary::after{content:'−'}
.faq details>div{padding:0 0 20px}
.faq p{margin:0 0 10px;color:var(--ink-2);max-width:64ch}
.faq p:last-child{margin:0}

/* ── footer ───────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule);background:var(--paper-2);padding-block:48px 36px;margin-top:24px}
.foot-grid{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-start}
.foot h4{font-family:'Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:500}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:8px}
.foot a{color:var(--ink-2);text-decoration:none;font-size:15px}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot-base{margin-top:38px;padding-top:20px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-family:'Plex Mono',monospace;font-size:11.5px;color:var(--ink-3)}

/* ── prose pages ──────────────────────────────────────────────────────────── */
.prose{max-width:720px;padding-block:clamp(40px,6vw,76px)}
.prose h2{font-size:clamp(21px,2.5vw,27px);margin-top:46px}
.prose h2+p{margin-top:14px}
.prose p,.prose li{color:var(--ink-2)}
.prose li{margin-bottom:9px}
.prose ul{padding-left:20px}
.prose strong{color:var(--ink);font-weight:500}
.prose .updated{font-family:'Plex Mono',monospace;font-size:12px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}

/* ── one orchestrated entrance ────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
.rise:nth-child(1){animation-delay:.02s}
.rise:nth-child(2){animation-delay:.09s}
.rise:nth-child(3){animation-delay:.16s}
.rise:nth-child(4){animation-delay:.23s}
.rise:nth-child(5){animation-delay:.30s}