/*! Rotulus © 2026 Eric Mathusek. rotulus.io stylesheet — one file, no build. */

/* ── Fonts ──────────────────────────────────────────────────────────── */
/* Self-hosted copies of the Google Fonts files (SIL OFL 1.1; the licences sit beside them in /assets/fonts/):
   Poppins 500 and 600 (v24), Inter 400–600 (v20, one variable file), Caveat 500 (v23). Latin and latin-ext only,
   with Google's unicode-ranges, so a page downloads only the subsets its text uses. latin-ext comes first, as in
   Google's CSS: for the few code points in both ranges, the face declared last (latin) is tried first. */
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500-latin-ext.af5fda16.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500-latin.cd36de20.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:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin-ext.bb1f2d58.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin.f4e80d9d.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:Inter;font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-latin-ext.34b9c504.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-latin.3100e775.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(/assets/fonts/caveat-500-latin-ext.ca0bf8aa.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Caveat;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/caveat-500-latin.edbfb1a7.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;}

/* ── Tokens ─────────────────────────────────────────────────────────── */
/* Light theme (the default). Every colour the stylesheet uses is a token here;
   no rule below names a literal colour (site-probe checks this). */
:root{--ink:#061A2F;--navy:#0B2A4A;--signal:#3E86F5;--mist:#9CC4FF;--paper:#FFFFFF;
  color-scheme:light dark;
  --t1:var(--ink);--t2:#3B4A5C;--t3:#5B6B7E;--line:#E3E9F1;--line-strong:var(--navy);
  --bg:var(--paper);--surface:var(--paper);--bg2:#F4F7FB;--steps-end:#F4F7FB;--quote-bg:var(--paper);
  --nav-bg:rgba(255,255,255,.88);
  --hero-a:#DCE9FF;--hero-a0:rgba(220,233,255,0);--hero-b:#EAF2FF;--hero-b0:rgba(234,242,255,0);
  --btn:#1F63D1;--btn-hover:#174FA8;--link:var(--btn);--link-hover:var(--btn-hover);--mark:#CFE1FF;
  --on-accent:var(--paper);--cta-hover:#EAF2FF;--icon:var(--navy);
  --band-bg:var(--ink);--band-fg:var(--paper);--band-fg2:var(--mist);--band-line:rgba(156,196,255,.25);
  --warn-bg:#FFF3CD;--warn-fg:#5A4300;--warn-line:#F1D27A;--err:#B42318;
  --frame:#000000;--edge:transparent;
  --shadow-c:rgba(6,26,47,.18);--shadow-sm-c:rgba(6,26,47,.1);
  --logo-light:block;--logo-dark:none;
  --font-h:Poppins,Inter,system-ui,sans-serif;--font-b:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--font-hand:Caveat,"Segoe Print",cursive;
  --r:14px;--r-lg:24px;--shadow:0 18px 50px var(--shadow-c);--shadow-sm:0 4px 18px var(--shadow-sm-c);
  --z-under:-1;--z-note:1;--z-nav:10;--z-skip:20;}

/* Dark theme. ONE block written twice: system dark (unless the visitor chose
   light) and the toggle's explicit dark. The two declaration lists MUST stay
   identical — edit both together; site-probe fails when they differ. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){color-scheme:dark;
    --t1:#FFFFFF;--t2:#C0D0E4;--t3:#9DB3CF;--line:#1E3F66;--line-strong:var(--mist);
    --bg:var(--ink);--surface:var(--navy);--bg2:#123A63;--steps-end:var(--navy);--quote-bg:#123A63;
    --nav-bg:rgba(6,26,47,.88);
    --hero-a:#103766;--hero-a0:rgba(16,55,102,0);--hero-b:#0D2E52;--hero-b0:rgba(13,46,82,0);
    --link:#8CBBFF;--link-hover:#C2DBFF;--mark:rgba(62,134,245,.42);
    --icon:var(--mist);
    --band-bg:var(--navy);
    --warn-bg:#3A2E05;--warn-fg:#FFE08A;--warn-line:#6B5413;--err:#FFA095;
    --edge:#1E3F66;
    --shadow-c:rgba(0,0,0,.5);--shadow-sm-c:rgba(0,0,0,.35);
    --logo-light:none;--logo-dark:block;}
}
:root[data-theme="dark"]{color-scheme:dark;
    --t1:#FFFFFF;--t2:#C0D0E4;--t3:#9DB3CF;--line:#1E3F66;--line-strong:var(--mist);
    --bg:var(--ink);--surface:var(--navy);--bg2:#123A63;--steps-end:var(--navy);--quote-bg:#123A63;
    --nav-bg:rgba(6,26,47,.88);
    --hero-a:#103766;--hero-a0:rgba(16,55,102,0);--hero-b:#0D2E52;--hero-b0:rgba(13,46,82,0);
    --link:#8CBBFF;--link-hover:#C2DBFF;--mark:rgba(62,134,245,.42);
    --icon:var(--mist);
    --band-bg:var(--navy);
    --warn-bg:#3A2E05;--warn-fg:#FFE08A;--warn-line:#6B5413;--err:#FFA095;
    --edge:#1E3F66;
    --shadow-c:rgba(0,0,0,.5);--shadow-sm-c:rgba(0,0,0,.35);
    --logo-light:none;--logo-dark:block;}
:root[data-theme="light"]{color-scheme:light;}

/* ── Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font-b);font-size:17px;line-height:1.55;color:var(--t1);background:var(--bg);}
img,svg{max-width:100%;height:auto;display:block;}
a{color:var(--link);text-underline-offset:3px;}
a:hover{color:var(--link-hover);}
h1,h2,h3{font-family:var(--font-h);font-weight:600;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em;color:var(--t1);}
/* rem in the preferred value, so browser zoom and the default-size setting scale headings (1.4.4). */
h1{font-size:clamp(2.375rem,1.6rem + 3vw,4rem);}
h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.375rem);}
h3{font-size:22px;}
p{margin:0 0 1em;}
[hidden]{display:none !important;}
.wrap{max-width:1184px;margin:0 auto;padding:0 16px;}
.page-narrow{max-width:820px;padding-top:56px;padding-bottom:80px;}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin:0 0 10px;}
.lede{font-size:20px;color:var(--t2);}
.small{font-size:15px;color:var(--t2);}
code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;background:var(--bg2);padding:.1em .35em;border-radius:5px;}
mark{background:none;color:inherit;background-image:linear-gradient(transparent 62%,var(--mark) 62%,var(--mark) 92%,transparent 92%);padding:0 .06em;}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:4px;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.skip{position:absolute;left:16px;top:-60px;z-index:var(--z-skip);background:var(--ink);color:var(--on-accent);padding:10px 14px;border-radius:8px;}
.skip:focus{top:12px;}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-b);font-weight:600;text-decoration:none;border-radius:12px;padding:14px 22px;font-size:17px;line-height:1;border:2px solid transparent;transition:background .12s,color .12s,border-color .12s;}
.btn-primary{background:var(--btn);color:var(--on-accent);}
.btn-primary:hover{background:var(--btn-hover);color:var(--on-accent);}
.btn-ghost{background:transparent;color:var(--t1);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--line-strong);color:var(--t1);}
.btn-lg{padding:18px 28px;font-size:18px;}
.btn-sm{padding:10px 16px;font-size:15px;}
.btn .arrow{width:18px;height:18px;flex-shrink:0;}

/* ── Nav ────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-row{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:16px;}
.nav-brand img{width:174px;height:60px;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{color:var(--t1);text-decoration:none;font-weight:500;}
.nav-links a:not(.btn):hover{color:var(--link);}
.nav-links .btn{color:var(--on-accent);}
.nav-links .btn-ghost{color:var(--t1);background:var(--surface);border-color:var(--line);}
.nav-links .btn-ghost:hover{color:var(--t1);background:var(--surface);border-color:var(--line-strong);}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;}
.nav-toggle-bar{display:block;height:0;border-top:2px solid var(--t1);border-radius:2px;}
/* Lockups: both are in the markup; the theme's display tokens show exactly one. */
.logo-light{display:var(--logo-light);}
.logo-dark{display:var(--logo-dark);}
/* Theme toggle: the icon names the CURRENT choice (monitor = follow the system). */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--t1);font:inherit;font-weight:500;cursor:pointer;}
.theme-toggle:hover{border-color:var(--line-strong);}
.theme-toggle svg{width:20px;height:20px;flex:none;}
.theme-toggle .ti,.theme-name{display:none;}
.theme-toggle .ti-auto{display:block;}
:root[data-theme="light"] .theme-toggle .ti-auto,:root[data-theme="dark"] .theme-toggle .ti-auto{display:none;}
:root[data-theme="light"] .theme-toggle .ti-sun,:root[data-theme="dark"] .theme-toggle .ti-moon{display:block;}
.theme-name::after{content:": System";}
:root[data-theme="light"] .theme-name::after{content:": Light";}
:root[data-theme="dark"] .theme-name::after{content:": Dark";}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{background:radial-gradient(900px 520px at 12% 0%,var(--hero-a) 0%,var(--hero-a0) 60%),radial-gradient(700px 480px at 92% 20%,var(--hero-b) 0%,var(--hero-b0) 60%),var(--bg);padding:72px 0 40px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;}
.hero p.lede{max-width:34ch;}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:28px 0 10px;}
.hero-fine{font-size:15px;color:var(--t2);margin:0;}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:36px 0 0;padding:0;list-style:none;color:var(--t2);font-size:15px;}
.hero-facts li{display:flex;align-items:center;gap:8px;}
.hero-facts svg{width:18px;height:18px;color:var(--signal);}

/* Layered mockup: show display behind, operator window in front */
.mock{position:relative;min-height:420px;}
.mock-shot{position:absolute;border-radius:var(--r);box-shadow:0 0 0 1px var(--edge),var(--shadow);overflow:hidden;background:var(--frame);}
.mock-shot img{width:100%;height:100%;object-fit:cover;object-position:left top;}
.mock-back{right:0;top:0;width:78%;aspect-ratio:16/10;transform:rotate(3deg);}
.mock-front{left:0;bottom:0;width:72%;aspect-ratio:16/10;transform:rotate(-2deg);}
.note-hand{position:absolute;font-family:var(--font-hand);font-size:26px;color:var(--t1);line-height:1;white-space:nowrap;}
.note-hand svg{position:absolute;width:64px;height:40px;color:var(--t1);}
.note-hand.n-back{right:4%;top:-34px;}
.note-hand.n-back svg{left:-70px;top:14px;transform:scaleX(-1) rotate(10deg);}
.note-hand.n-front{left:2%;bottom:-36px;}
.note-hand.n-front svg{left:120px;top:-30px;transform:rotate(-120deg);}
@media (prefers-reduced-motion: no-preference){
  .mock-front{animation:float 4s ease-in-out 1 forwards;}
  @keyframes float{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-8px)}}
}
@media (prefers-reduced-motion: reduce){.mock-front{animation:none;}html{scroll-behavior:auto;}}

/* Windows High Contrast / forced colours: the highlighted H1 words keep a system colour,
   and the bars of the menu button are borders (a background would be replaced by Canvas). */
@media (forced-colors: active){
  mark{forced-color-adjust:none;color:CanvasText;background:none;}
  .nav-toggle-bar{border-top-color:CanvasText;}
}

/* ── Feature rows ───────────────────────────────────────────────────── */
.features{padding:48px 0 24px;overflow-x:clip;}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:56px 0;}
.feature:nth-child(even) .feature-art{order:-1;}
.feature h2{margin-bottom:14px;}
.feature p{color:var(--t2);max-width:52ch;}
.feature ul{color:var(--t2);padding-left:20px;margin:0 0 1em;}
.feature-art{position:relative;}
.feature-art .blob{position:absolute;inset:8% -4% 6% -4%;border-radius:40px;background:var(--bg2);z-index:var(--z-under);}
.feature-art .tilt{border-radius:var(--r);box-shadow:0 0 0 1px var(--edge),var(--shadow);overflow:hidden;background:var(--frame);transform:rotate(-2deg);}
.feature-art .tilt.r{transform:rotate(2deg);}
.feature-art .tilt img{width:100%;}
.feature-art .note-hand{z-index:var(--z-note);}
.feature-art .note-hand.tl{left:-6px;top:-30px;}
.feature-art .note-hand.tl svg{left:110px;top:18px;transform:rotate(30deg);}
.feature-art .note-hand.br{right:0;bottom:-34px;}
.feature-art .note-hand.br svg{left:-70px;top:-20px;transform:rotate(200deg);}
.learn{font-weight:600;}

/* Two-laptop illustration for Show Sync: primary, link arrow, primary's Show Sync window */
.pair{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;}
.pair .tilt{transform:none;}
.pair .arrow-link{display:flex;align-items:center;justify-content:center;color:var(--signal);}
.pair .arrow-link svg{width:60px;height:18px;}

/* Controller / inputs illustration */
.inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.inputs .tile{background:var(--surface);box-shadow:0 0 0 1px var(--edge),var(--shadow-sm);border-radius:var(--r);padding:22px 16px;text-align:center;color:var(--t1);font-weight:600;font-size:15px;}
.inputs .tile svg{width:44px;height:44px;margin:0 auto 10px;color:var(--icon);}

/* ── Dark band ──────────────────────────────────────────────────────── */
.band{background:var(--band-bg);color:var(--band-fg);padding:72px 0;box-shadow:inset 0 1px 0 var(--edge),inset 0 -1px 0 var(--edge);}
.band h2{color:var(--band-fg);text-align:center;margin-bottom:40px;}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;list-style:none;}
.facts li{text-align:center;padding:0 12px;border-left:1px solid var(--band-line);}
.facts li:first-child{border-left:0;}
.facts strong{display:block;font-family:var(--font-h);font-size:clamp(22px,2.6vw,30px);line-height:1.2;margin-bottom:8px;color:var(--band-fg);}
.facts span{color:var(--band-fg2);font-size:16px;}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;}
.quote{background:var(--quote-bg);color:var(--t1);border-radius:var(--r);padding:26px;}
.quote footer{margin-top:14px;font-size:15px;color:var(--t2);}

/* ── Get started ────────────────────────────────────────────────────── */
.steps{padding:80px 0;background:linear-gradient(180deg,var(--bg) 0%,var(--steps-end) 100%);}
.steps-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:36px;}
.steps-head h2{margin:0;}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.step img{width:100%;aspect-ratio:1/1;border-radius:var(--r-lg);background:var(--navy);box-shadow:0 0 0 1px var(--edge);}
.step h3{margin:18px 0 8px;}
.step p{color:var(--t2);margin:0;}

/* ── CTA card ───────────────────────────────────────────────────────── */
.cta{padding:40px 0 80px;}
.cta-card{border-radius:var(--r-lg);padding:56px 40px;background:linear-gradient(120deg,var(--btn) 0%,var(--navy) 100%);color:var(--on-accent);box-shadow:0 0 0 1px var(--edge);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:center;}
/* The global ring (--signal) is 1.58:1 on the blue card; the white token is 5.6:1 or better on it. */
.cta-card :focus-visible{outline-color:var(--on-accent);}
.cta-card h2{color:var(--on-accent);margin-bottom:10px;}
.cta-card p{color:var(--on-accent);margin:0 0 22px;}
.cta-card .btn-primary{background:var(--paper);color:var(--navy);}
.cta-card .btn-primary:hover{background:var(--cta-hover);color:var(--navy);}
.cta-card .fine{font-size:14px;color:var(--on-accent);margin:14px 0 0;}
.cta-card p a{color:var(--on-accent);text-decoration:underline;}
.cta-mark{width:200px;height:200px;margin:0 auto;}
.cta-buttons{display:flex;flex-wrap:wrap;gap:12px;}
.btn-outline-light{background:transparent;color:var(--on-accent);border-color:var(--on-accent);}
.btn-outline-light:hover{background:var(--paper);color:var(--navy);}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);padding:56px 0 24px;background:var(--bg);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;}
.footer-brand p{color:var(--t2);margin:14px 0 6px;max-width:34ch;}
.footer-meta{font-size:15px;}
.footer-h{font-family:var(--font-b);font-size:15px;font-weight:600;margin:0 0 12px;color:var(--t1);}
.footer ul{list-style:none;margin:0;padding:0;}
.footer li{margin:0 0 10px;}
.footer li a{color:var(--t2);text-decoration:none;}
.footer li a:hover{color:var(--link);text-decoration:underline;}
.footer-line{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--t2);}

/* ── Download page ──────────────────────────────────────────────────── */
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0 48px;}
.dl-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--bg2);}
.dl-card h2{margin-bottom:4px;}
.dl-req{color:var(--t2);font-size:15px;margin-bottom:18px;}
.dl-card .btn{width:100%;justify-content:center;text-align:center;white-space:normal;}
.dl-meta{margin:14px 0 6px;color:var(--t2);font-size:15px;}
.dl-sha summary{cursor:pointer;color:var(--t2);font-size:15px;}
.sha{display:block;word-break:break-all;font-size:13px;margin-top:8px;}
.dl-date{color:var(--t2);}
.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px;}
.note{border-left:4px solid var(--signal);padding:4px 0 4px 18px;}
.note h3{margin-bottom:6px;}
.note p{color:var(--t2);margin:0;}
.req{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:16px;}
.req th,.req td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.req thead th{font-size:14px;color:var(--t3);font-weight:600;}
.req tbody th{font-weight:600;white-space:nowrap;}

/* ── Legal pages ────────────────────────────────────────────────────── */
.legal h1{font-size:clamp(1.875rem,1.4rem + 2vw,2.75rem);}
.legal h2{font-size:24px;margin-top:40px;}
.legal table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:15px;}
.legal th,.legal td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
.legal a{overflow-wrap:anywhere;}
.legal blockquote{margin:0 0 20px;padding:12px 18px;border-left:4px solid var(--mist);background:var(--bg2);}
.draft-banner{background:var(--warn-bg);color:var(--warn-fg);border:1px solid var(--warn-line);border-radius:10px;padding:12px 16px;margin-bottom:24px;font-weight:600;}
.notices{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.45;background:var(--bg2);padding:18px;border-radius:var(--r);overflow:auto;}

/* ── Features page ──────────────────────────────────────────────────── */
.see-all{text-align:center;margin:16px 0 0;font-weight:600;}
.see-all a{display:inline-flex;align-items:center;gap:8px;}
.see-all .arrow{width:18px;height:18px;flex:none;}
.features-page{padding-top:56px;padding-bottom:80px;}
.features-page .lede{max-width:52ch;}
.feature-jump{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;}
.feature-jump a{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg2);color:var(--t1);text-decoration:none;font-size:15px;font-weight:500;line-height:1.3;}
.feature-jump a:hover{border-color:var(--line-strong);color:var(--t1);}
.feature-group{padding-top:56px;scroll-margin-top:72px;}
.feature-group h2{margin-bottom:20px;}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.feature-item{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;background:var(--surface);}
.feature-item h3{font-size:19px;margin-bottom:8px;}
.feature-item p{color:var(--t2);font-size:16px;margin:0;}
.features-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:64px;}

/* ── Demo page ──────────────────────────────────────────────────────── */
.demo-list{padding-left:22px;margin:0 0 8px;}
.demo-list li{margin:0 0 6px;}
.demo-cta{margin:32px 0 14px;}
.beta-page h2{margin-top:44px;}
.beta-alt{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:28px 0 0;}

/* ── Pricing page ───────────────────────────────────────────────────── */
.price-grid{display:grid;justify-items:center;gap:24px;margin:32px 0 28px;}
.price-card{width:100%;max-width:560px;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;background:var(--surface);color:var(--t1);box-shadow:0 0 0 1px var(--edge),var(--shadow-sm);}
.price-card h2{font-size:26px;margin-bottom:6px;}
.price-amount{font-family:var(--font-h);font-size:22px;font-weight:600;color:var(--t2);margin:0 0 20px;}
.price-includes{list-style:none;margin:0 0 26px;padding:0;}
.price-includes li{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;}
.price-includes svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--signal);}
.price-actions{display:flex;flex-wrap:wrap;gap:12px;}
/* Nothing to buy yet: a span styled as a quiet button. Text stays ≥ 4.5:1. */
.btn.is-disabled{background:var(--bg2);color:var(--t2);border-color:var(--line);border-style:dashed;cursor:not-allowed;}
.btn.is-disabled:hover{background:var(--bg2);color:var(--t2);border-color:var(--line);}
.price-free{max-width:560px;margin:0 auto 48px;padding:4px 0 4px 18px;border-left:4px solid var(--signal);background:var(--bg);color:var(--t2);}
.price-free strong{color:var(--t1);}
.faq-list{margin:0 0 28px;}
.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:0 0 12px;}
.faq summary{cursor:pointer;color:var(--t1);font-weight:600;padding:16px 20px;border-radius:var(--r);}
.faq p{color:var(--t2);margin:0;padding:0 20px 18px;}

/* ── Support page ───────────────────────────────────────────────────── */
kbd{font-family:ui-monospace,Consolas,monospace;font-size:.86em;color:var(--t1);background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:.05em .4em;white-space:nowrap;}
.support-page h2{margin-top:44px;}
.support-steps li{margin:0 0 12px;}
.support-src{color:var(--t2);font-size:15px;}
.sf-intro{color:var(--t2);font-size:15px;margin:0 0 18px;}
.survey-form h2{font-size:1.25rem;margin:28px 0 12px;}
.survey-form h2:first-of-type{margin-top:8px;}
.survey-form select.sf-input{padding-right:12px;}
.support-form{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;color:var(--t1);background:var(--surface);margin:0 0 16px;}
.sf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;}
/* Side-by-side fields share row tracks (label / hint / input / error), so a longer hint never pushes one box below its neighbour. */
.sf-row:not(.sf-row-choices){grid-template-rows:repeat(4,auto);}
.sf-row:not(.sf-row-choices)>.sf-field{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;}
.sf-row:not(.sf-row-choices)>.sf-field>*{margin-top:0;}
/* The control and its error keep tracks 3 and 4 even when a field has no hint, so a select beside a hinted text box lines up with it. */
.sf-row:not(.sf-row-choices)>.sf-field>.sf-input{grid-row:3;}
.sf-row:not(.sf-row-choices)>.sf-field>.sf-error{grid-row:4;}
.sf-row-choices{align-items:start;}
.sf-field{margin:0 0 22px;min-width:0;}
fieldset.sf-field{border:0;padding:0;}
.sf-field>label,.sf-field>legend{display:block;font-weight:600;margin:0 0 6px;padding:0;color:var(--t1);}
.sf-hint{font-size:15px;color:var(--t2);margin:0 0 8px;}
.sf-input{display:block;width:100%;min-height:46px;font:inherit;color:var(--t1);background:var(--bg);border:1.5px solid var(--t3);border-radius:10px;padding:10px 12px;}
textarea.sf-input{min-height:170px;resize:vertical;line-height:1.5;}
.sf-input[aria-invalid="true"]{border-color:var(--err);border-width:2px;}
.sf-options{display:grid;gap:6px;}
.sf-option{display:flex;align-items:flex-start;gap:10px;min-height:32px;padding:4px 0;cursor:pointer;color:var(--t1);}
.sf-option input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--btn);}
.sf-file{display:block;max-width:100%;font:inherit;font-size:15px;color:var(--t2);}
.sf-file::file-selector-button{font:inherit;font-weight:600;color:var(--t1);background:var(--bg);border:1.5px solid var(--t3);border-radius:10px;padding:9px 16px;margin-right:14px;cursor:pointer;}
.sf-file::file-selector-button:hover{border-color:var(--btn);}
.sf-error{color:var(--err);font-size:15px;font-weight:600;margin:6px 0 0;}
.sf-error:empty{display:none;}
.sf-hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.sf-alert:not(:empty){color:var(--warn-fg);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:12px 16px;margin:0 0 20px;}
.sf-alert p{margin:0 0 6px;}
.sf-alert p:last-child{margin:0;}
.sf-alert a{color:var(--warn-fg);text-decoration:underline;}
.sf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:4px 0 14px;}
.sf-actions .btn{cursor:pointer;font-family:var(--font-b);}
.sf-actions .btn[disabled]{cursor:progress;}
.sf-status{margin:0;color:var(--t2);}
.sf-privacy{margin:0;font-size:15px;}
.sf-success{border:1px solid var(--line);border-left:4px solid var(--signal);border-radius:var(--r);padding:20px 24px;color:var(--t1);background:var(--surface);margin:0 0 16px;}
.sf-success h3{margin-bottom:6px;}
.sf-success p{margin:0;}
.sf-alt{color:var(--t2);}
.sf-email-only{margin:0 0 8px;}

/* ── Responsive ─────────────────────────────────────────────────────── */
/* Zoomed to a very short viewport the sticky bar would take a large share of it (1.4.10). */
@media (max-height:500px){
  .nav{position:relative;}
  html{scroll-padding-top:0;}
}
/* The nav folds into the toggle before the page layout does. With Pricing the
   expanded row needs a ~1025px viewport (788px of links + the lockup + gutters
   + a 15px scrollbar, measured with the web fonts); 1080px leaves room for a
   fallback font. Below that the menu folds into the toggle. */
@media (max-width:1080px){
  .nav-toggle{display:flex;}
  .nav-links{display:none;position:absolute;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 16px 16px;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 4px;}
  .nav-links .btn{margin-top:8px;justify-content:center;}
  /* In the open menu the toggle is a labelled row like the links. */
  .theme-toggle{width:auto;height:auto;justify-content:flex-start;border:0;border-radius:4px;padding:12px 4px;}
  .theme-name{display:inline;}
}
@media (max-width:980px){
  .hero-grid,.feature,.cta-card{grid-template-columns:1fr;}
  .feature:nth-child(even) .feature-art{order:0;}
  .feature-art{margin-top:12px;}
  .mock{min-height:0;margin-top:48px;}
  .mock-shot{position:relative;width:100%;transform:none;}
  .mock-back{display:none;}
  .note-hand.n-back{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  body{font-size:16px;}
  /* The notes sit in normal flow under their screenshot (no overlap at any width); the arrows are dropped. */
  .feature-art .note-hand{position:static;display:block;margin:34px 0;white-space:normal;}
  .feature-art .note-hand svg{display:none;}
  .hero{padding-top:44px;}
  .facts,.quotes,.step-grid,.dl-grid,.note-grid,.inputs,.feature-grid{grid-template-columns:1fr;}
  .facts li{border-left:0;border-top:1px solid var(--band-line);padding:16px 0;}
  .facts li:first-child{border-top:0;}
  .cta-card{padding:36px 24px;}
  .price-card{padding:24px 20px;}
  .sf-row{grid-template-columns:minmax(0,1fr);}
  .support-form{padding:22px 16px;}
  .footer-grid{grid-template-columns:1fr;}
  .note-hand{font-size:22px;}
  .pair{grid-template-columns:minmax(0,1fr);}
  .pair .arrow-link{height:84px;}
  .pair .arrow-link svg{width:72px;height:22px;transform:rotate(90deg);}
  .cta-mark{width:112px;height:112px;}
  .btn{white-space:normal;line-height:1.25;}
  .req{font-size:14px;}
  .req th,.req td{padding:8px 6px;overflow-wrap:break-word;}
  .req tbody th{white-space:normal;overflow-wrap:normal;}
  .btn .arrow{flex:none;}
  .sha{overflow-wrap:anywhere;}
}