/* Rufineer site: maroon on warm white.
 *
 *   tokens         colours, type and spacing, light first; dark below
 *   chrome         top bar, drawer, footer
 *   docs layout    sidebar, page head, sections, pager
 *   content        code, tables, callouts, examples, recipes, changelog, Excel mocks
 *   home, about    the two marketing pages
 *
 * Code blocks are dark in both themes (an editor); Excel output is light
 * in both themes (a worksheet). Everything else follows the theme. */

:root{
  --paper:#FBF8F6; --surface:#FFFFFF; --sunk:#F4EEEC;
  --ink:#241619; --ink-2:#4B3A3F; --muted:#7A686D;
  --rule:#EADFDD; --rule-2:#DDCDCB;
  --maroon:#7B1E2E; --maroon-2:#962B3D; --maroon-deep:#420E19; --maroon-soft:#F6E9EB;
  --on-maroon:#FBF1F2; --on-maroon-2:#E7C7CC;
  --wash:#F7E4C6; --ok:#2E7D4F; --warn:#9A6500; --bad:#B3261E;
  --focus:#C2415A;

  /* code (dark editor, both themes) */
  --code-bg:#1E1316; --code-bar:#2A1C20; --code-rule:#3A2A2F; --code-ink:#EFE6E7; --code-muted:#9B888C;
  --t-kw:#F4A3B3; --t-time:#EDC27B; --t-unit:#C3B0F4; --t-str:#F2A884; --t-com:#8F7C81;
  --t-doc:#C99AA4; --t-mod:#93C8F3; --t-phase:#72D6C7; --t-fn:#FFFFFF; --t-num:#FFE6BA;
  --t-err:#FF8B7B; --t-warn:#F3C35E; --t-ok:#8FD8A6; --t-param:#BBA9AE; --t-numwash:rgba(237,194,123,.16);

  /* worksheet (light, both themes) */
  --sheet-bg:#FFFFFF; --sheet-ink:#1E1A1B; --sheet-rule:#E3DCDA; --sheet-head:#F3EEEC; --sheet-muted:#8A7B7F;
  --sheet-link:#1D5DBF; --sheet-input:#FFF3D6; --sheet-band:#7B1E2E;

  --display:"Bricolage Grotesque", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --body:"IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius:10px; --radius-s:6px;
  --shadow:0 1px 2px rgba(66,14,25,.06), 0 8px 24px -12px rgba(66,14,25,.18);
  --topbar:60px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#141012; --surface:#1C1618; --sunk:#221B1D;
    --ink:#F2E9EA; --ink-2:#D5C6C9; --muted:#A08D92;
    --rule:#33282B; --rule-2:#433539;
    --maroon:#E58696; --maroon-2:#F0A0AE; --maroon-deep:#2A0B12; --maroon-soft:#2E1D21;
    --on-maroon:#FBF1F2; --on-maroon-2:#D9B3BA;
    --wash:#4A3A22; --ok:#7BCB98; --warn:#E9B54F; --bad:#FF8B7B; --focus:#F0A0AE;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#141012; --surface:#1C1618; --sunk:#221B1D;
  --ink:#F2E9EA; --ink-2:#D5C6C9; --muted:#A08D92;
  --rule:#33282B; --rule-2:#433539;
  --maroon:#E58696; --maroon-2:#F0A0AE; --maroon-deep:#2A0B12; --maroon-soft:#2E1D21;
  --on-maroon:#FBF1F2; --on-maroon-2:#D9B3BA;
  --wash:#4A3A22; --ok:#7BCB98; --warn:#E9B54F; --bad:#FF8B7B; --focus:#F0A0AE;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar) + 16px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:var(--maroon); text-decoration-color:color-mix(in srgb, var(--maroon) 35%, transparent); text-underline-offset:3px}
a:hover{text-decoration-color:var(--maroon)}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
h1,h2,h3,h4{font-family:var(--display); color:var(--ink); text-wrap:balance; letter-spacing:-.015em}
code{font-family:var(--mono); font-size:.84em; background:var(--maroon-soft); color:var(--ink); padding:.1em .38em; border-radius:5px}
img{max-width:100%}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--maroon); margin:0; font-weight:600}
.lead{font-size:19px; line-height:1.55; color:var(--ink-2); max-width:62ch; margin:0 0 1.2em}
.new{font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--maroon); background:var(--maroon-soft); border-radius:20px; padding:1px 8px; vertical-align:middle; white-space:nowrap; letter-spacing:.02em}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; z-index:50; background:var(--surface); padding:8px 12px; border-radius:6px}
.skip:focus{left:12px}

/* ------------------------------------------------------------- top bar */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; height:var(--topbar);
  display:flex; align-items:center; gap:18px; padding-inline:24px;
  background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em}
.mark{display:inline-grid; place-items:center; width:30px; height:30px; color:#7B1E2E; flex:none}
.mark svg{width:30px; height:30px; display:block}
:root[data-theme="dark"] .mark{color:#962B3D}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mark{color:#962B3D} }
.mobileonly{display:none}
.iconbtn.account[aria-current]{color:var(--maroon); border-color:var(--maroon)}
.ver{font-family:var(--mono); font-size:11.5px; color:var(--muted); border:1px solid var(--rule-2); padding:1px 8px; border-radius:20px; text-decoration:none; white-space:nowrap}
.ver:hover{color:var(--maroon); border-color:var(--maroon)}
.toplinks{margin-left:auto; display:flex; align-items:center; gap:4px}
.toplinks a{color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:500; padding:6px 11px; border-radius:8px; white-space:nowrap}
.toplinks a:hover{color:var(--ink); background:var(--sunk)}
.toplinks a.on{color:var(--maroon); background:var(--maroon-soft)}
.topactions{display:flex; align-items:center; gap:8px}
.iconbtn{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:8px; border:1px solid var(--rule); background:var(--surface); color:var(--ink-2); cursor:pointer; padding:0}
.iconbtn:hover{color:var(--maroon); border-color:var(--rule-2)}
.iconbtn svg{width:17px; height:17px}
.menubtn{display:none}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:9px; border:1px solid var(--rule-2); background:var(--surface); color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; line-height:1.2; cursor:pointer; font-family:var(--body); transition:transform .15s ease, background .15s ease, border-color .15s ease}
.btn:hover{border-color:var(--maroon); color:var(--maroon)}
.btn.primary{background:var(--maroon); border-color:var(--maroon); color:var(--on-maroon)}
.btn.primary:hover{background:var(--maroon-2); border-color:var(--maroon-2); color:var(--on-maroon); transform:translateY(-1px)}
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .btn.primary:hover{color:#2A0B12}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.primary{color:#2A0B12} }
.btn.small{padding:7px 13px; font-size:14px}
.btn svg{width:16px; height:16px}

/* ------------------------------------------------------------- layout */
.shell{display:grid; grid-template-columns:250px minmax(0,1fr); gap:56px; max-width:1240px; margin:0 auto; padding-inline:24px}
.shell.noside{grid-template-columns:minmax(0,1fr); max-width:980px}
main{min-width:0; padding-block:40px 72px}
.side{position:sticky; top:calc(var(--topbar) + env(safe-area-inset-top,0px)); align-self:start; max-height:calc(100vh - var(--topbar)); overflow-y:auto; padding-block:28px 48px; scrollbar-width:thin}
.navgroup{margin-bottom:22px}
.navgroup > p{font-size:11px; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); margin:0 0 8px; font-weight:600; font-family:var(--mono)}
.navgroup ul{list-style:none; margin:0; padding:0}
.navgroup a{display:flex; align-items:baseline; gap:8px; padding:5px 10px; border-radius:7px; color:var(--ink-2); text-decoration:none; font-size:14.5px; line-height:1.35}
.navgroup a:hover{color:var(--ink); background:var(--sunk)}
.navgroup a.here{color:var(--maroon); background:var(--maroon-soft); font-weight:600}
.navgroup ul.sub{margin:4px 0 8px 14px; padding-left:10px; border-left:1px solid var(--rule)}
.navgroup ul.sub a{font-size:13.5px; padding:3px 8px; color:var(--muted)}
.navgroup ul.sub a:hover{color:var(--ink); background:none}
.navgroup ul.sub a.on{color:var(--maroon); font-weight:600}
.navgroup .num{font-family:var(--mono); font-size:11px; color:var(--muted); min-width:1.6em}
.onpage{display:none}

.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13.5px; color:var(--muted); margin:0 0 18px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--maroon)}
.crumbs span[aria-hidden]{opacity:.6}
.pagehead{max-width:780px; padding-bottom:10px; border-bottom:1px solid var(--rule); margin-bottom:8px}
.pagehead h1{font-size:clamp(34px,4.6vw,50px); line-height:1.04; margin:.18em 0 .3em; font-weight:700}
.pagehead .lead{margin-bottom:.9em}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
.meta span{font-size:13px; color:var(--ink-2); background:var(--sunk); border:1px solid var(--rule); border-radius:20px; padding:3px 11px}
.meta b{color:var(--maroon); font-weight:600}

/* ------------------------------------------------------------- sections */
.doc{padding-top:48px; max-width:780px}
.doc h2{font-size:30px; line-height:1.12; margin:.1em 0 .65em; font-weight:700}
.doc h3{font-size:19.5px; margin:1.7em 0 .5em; font-weight:600; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.doc p, .doc li{max-width:68ch}
.doc ul, .doc ol{padding-left:1.25em}
.doc li{margin:.35em 0}
.doc li::marker{color:var(--maroon)}
.doc b, .doc strong{font-weight:600; color:var(--ink)}
.count{font-family:var(--mono); font-size:12px; color:var(--muted); font-weight:400}
.kwlist{display:flex; flex-wrap:wrap; gap:6px; max-width:none!important}
.principles li::marker, .steps li::marker{font-family:var(--mono); color:var(--maroon); font-size:.85em}

/* tutorial steps: "3. Operations" gets a number badge */
.doc.step h2{display:flex; align-items:center; gap:14px}
.stepno{flex:none; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--maroon); color:var(--on-maroon); font-family:var(--mono); font-size:16px; font-weight:600; letter-spacing:0}
:root[data-theme="dark"] .stepno{color:#2A0B12}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .stepno{color:#2A0B12} }
.doc.step{position:relative}
.learn{line-height:1.9; color:var(--muted); font-size:14px; margin:-.2em 0 1.3em; padding:10px 12px; background:var(--sunk); border:1px solid var(--rule); border-radius:var(--radius)}
.learn code{font-size:.9em; background:var(--surface); border:1px solid var(--rule)}

/* ------------------------------------------------------------- code */
.code{position:relative; background:var(--code-bg); color:var(--code-ink); border:1px solid var(--code-rule); border-radius:var(--radius); margin:16px 0 22px; overflow:hidden; box-shadow:var(--shadow)}
.code .bar{display:flex; align-items:center; gap:10px; min-height:36px; padding:0 8px 0 14px; background:var(--code-bar); border-bottom:1px solid var(--code-rule); font-family:var(--mono); font-size:12px; color:var(--code-muted)}
.code .bar .lang{letter-spacing:.06em; text-transform:uppercase; font-size:10.5px}
.code .bar .file{color:var(--code-ink)}
.code .bar .dots{display:flex; gap:5px; margin-right:2px}
.code .bar .dots i{width:9px; height:9px; border-radius:50%; background:var(--code-rule)}
.copy{margin-left:auto; display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid transparent; color:var(--code-muted); font-family:var(--mono); font-size:11.5px; padding:4px 8px; border-radius:6px; cursor:pointer}
.copy:hover{color:var(--code-ink); border-color:var(--code-rule)}
.copy svg{width:13px; height:13px}
.code pre{margin:0; padding:16px 18px; font-family:var(--mono); font-size:13.4px; line-height:1.65; color:var(--code-ink); tab-size:2; overflow-x:auto}
.code code{background:none; padding:0; font-size:inherit; border-radius:0; color:inherit}
.t-kw{color:var(--t-kw); font-weight:600}
.t-time,.t-pipe{color:var(--t-time)}
.t-pipe{font-weight:600}
.t-ctl{color:var(--t-kw)}
.t-unit{color:var(--t-unit)}
.t-str{color:var(--t-str)}
.t-com{color:var(--t-com); font-style:italic}
.t-doc{color:var(--t-doc); font-style:italic}
.t-ann{color:var(--t-time)}
.t-mod{color:var(--t-mod)}
.t-phase{color:var(--t-phase)}
.t-fn{color:var(--t-fn); font-weight:600}
.t-decl{font-weight:600; color:#FFFFFF}
.t-param{color:var(--t-param)}
.t-num{color:var(--t-num); background:var(--t-numwash); border-radius:3px; padding:0 2px}
.t-op{color:var(--t-time)}
.t-err{color:var(--t-err); font-weight:600}
.t-warn{color:var(--t-warn); font-weight:600}
.t-ok{color:var(--t-ok); font-weight:600}
.t-kwish{color:var(--t-kw)}
.t-xlf{color:inherit}
.t-row{color:var(--code-muted)}
/* terminal output and compiler messages */
.code[data-lang="plain"] pre, .code[data-lang="err"] pre{color:#E6D9DB}
.code[data-lang="shell"] pre::before{content:""}
/* Excel output reads as a worksheet: light in both themes */
.code[data-lang="xl"]{--code-bg:var(--sheet-bg); --code-bar:var(--sheet-head); --code-rule:var(--sheet-rule); --code-ink:var(--sheet-ink); --code-muted:var(--sheet-muted); --t-mod:var(--sheet-link); --t-row:var(--sheet-muted)}
.code[data-lang="xl"] .t-mod{color:var(--sheet-link)}
.code[data-lang="xl"] pre{font-size:12.6px; background-image:linear-gradient(to bottom, transparent calc(100% - 1px), var(--sheet-rule) 0); background-size:100% 1.65em; background-position:0 16px}

/* ------------------------------------------------------------- tables */
.tbl{overflow-x:auto; margin:14px 0 22px; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:15px}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule); vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:600; background:var(--sunk)}
tbody tr:hover td, table tr:hover td{background:color-mix(in srgb, var(--maroon-soft) 45%, transparent)}
td code{white-space:nowrap}
table.map td:first-child{width:46%; color:var(--ink-2)}
table.index td:first-child a{font-weight:600; text-decoration:none}
table.concepts td:first-child{white-space:nowrap; font-weight:600}
table.concepts td:first-child a{text-decoration:none}
table.results td:not(:first-child), table.results th:not(:first-child){text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
table.results th{white-space:normal!important; vertical-align:bottom}
table.results td, table.results th{padding-inline:10px}
table.results td:first-child{min-width:10em}
table.results .fails{color:var(--bad); font-weight:700}
table.cover td{font-size:14.5px}
table.cover td:first-child{min-width:150px}
table.cover td:nth-child(2){color:var(--muted); font-size:13.5px; min-width:150px}
table.cover td:nth-child(3){min-width:260px}
table.cover td:nth-child(4){min-width:200px}
table.cover td.since{font-family:var(--mono); font-size:12px; white-space:nowrap; color:var(--maroon)}

/* ------------------------------------------------------------- callouts */
.try{margin:16px 0 20px; padding:14px 16px 14px 18px; border:1px solid color-mix(in srgb, var(--maroon) 25%, var(--rule)); background:var(--maroon-soft); border-radius:var(--radius); position:relative}
.try::before{content:"Try it"; display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--maroon); font-weight:600; margin-bottom:4px}
.try > :first-child{margin-top:0} .try > :last-child{margin-bottom:0}
.design-note{display:block; margin-top:.8em; padding:10px 14px; border-radius:var(--radius-s); background:var(--sunk); border:1px dashed var(--rule-2); font-size:.92em; color:var(--ink-2)}

/* ------------------------------------------------------------- examples */
.srcfile{display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; font-size:14px; color:var(--muted); margin-top:-.2em}
.srcfile code{background:none; padding:0; color:var(--ink-2); word-break:break-all}
.facts{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1px; margin:20px 0 10px; border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; background:var(--rule)}
.facts div{padding:12px 16px; background:var(--surface)}
.facts::after{content:""; background:var(--surface); grid-column:auto / -1}
.facts dt{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--maroon); font-weight:600}
.facts dd{margin:3px 0 0; font-size:15px}
.files{border:1px solid var(--code-rule); border-radius:var(--radius); background:var(--code-bg); overflow:hidden; box-shadow:var(--shadow)}
.files .code{border:0; margin:0; border-radius:0; box-shadow:none}
.tabs{display:flex; gap:2px; overflow-x:auto; padding:8px 8px 0; background:var(--code-bar); border-bottom:1px solid var(--code-rule)}
.tab{font-family:var(--mono); font-size:12px; background:none; border:1px solid transparent; border-bottom:0; color:var(--code-muted); padding:8px 12px; border-radius:7px 7px 0 0; cursor:pointer; white-space:nowrap}
.tab:hover{color:var(--code-ink)}
.tab[aria-selected="true"]{background:var(--code-bg); color:var(--code-ink); border-color:var(--code-rule); margin-bottom:-1px}
.needs li{margin:.5em 0}
.example h1, #examples h1{font-size:clamp(32px,4.4vw,46px); line-height:1.05; margin:.2em 0 .3em}
.page .example{padding-top:8px}

/* ------------------------------------------------------------- recipes */
.recipe{padding:22px 0 10px; border-top:1px solid var(--rule)}
.recipe:first-of-type{border-top:0}
.recipe h3{margin:0 0 .35em; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px}
.recipe > p{margin:.2em 0}
.recipe .code{margin:12px 0 8px}
.recipe .note{color:var(--ink-2); font-size:15px}
.seen{font-family:var(--mono); font-size:11px; font-weight:400; color:var(--muted); border:1px solid var(--rule); border-radius:20px; padding:1px 9px; white-space:nowrap}

/* ------------------------------------------------------------- changelog */
.release{position:relative; padding:0 0 4px 26px; margin:0 0 26px; border-left:1px solid var(--rule)}
.release::before{content:""; position:absolute; left:-6px; top:8px; width:11px; height:11px; border-radius:50%; background:var(--surface); border:2px solid var(--rule-2)}
.release:first-child::before{background:var(--maroon); border-color:var(--maroon)}
.release h3{margin-top:0}
.release .date{font-family:var(--mono); font-size:12px; color:var(--muted); font-weight:400}

/* ------------------------------------------------------------- stats, cards */
.stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:12px; margin:8px 0 20px; max-width:880px}
.stats div{border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:2px}
.stats b{font-family:var(--display); font-size:30px; color:var(--maroon); font-variant-numeric:tabular-nums; line-height:1.1}
.stats span{font-size:14px; color:var(--ink-2)}
.cards{display:grid; gap:14px; margin:10px 0 14px}
.cards.three{grid-template-columns:repeat(auto-fill, minmax(250px,1fr))}
.card{display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); color:var(--ink-2); text-decoration:none; font-size:14.8px; line-height:1.5; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease}
.card b{color:var(--ink); font-size:16.5px; font-family:var(--display); font-weight:600; letter-spacing:-.01em}
.card .k{font-family:var(--mono); font-size:10.5px; color:var(--maroon); text-transform:uppercase; letter-spacing:.1em; font-weight:600}
.card:hover{border-color:color-mix(in srgb, var(--maroon) 45%, var(--rule)); transform:translateY(-2px); box-shadow:var(--shadow)}
.card:hover b{color:var(--maroon)}

/* ------------------------------------------------------------- pager */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:64px; max-width:780px}
.pager a{display:flex; flex-direction:column; gap:3px; padding:16px 18px; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); text-decoration:none; color:var(--ink); font-weight:600; font-family:var(--display); font-size:17px}
.pager a span{font-family:var(--mono); font-size:10.5px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.1em}
.pager a.next{text-align:right; grid-column:2}
.pager a:hover{border-color:var(--maroon); color:var(--maroon)}

/* ------------------------------------------------------------- Excel mocks (tutorial sheets) */
.xlmock{margin:18px 0 8px; border:1px solid var(--sheet-rule); border-radius:var(--radius); overflow:hidden; background:var(--sheet-bg); color:var(--sheet-ink); box-shadow:var(--shadow)}
.xlbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 14px; font-size:13px; border-bottom:1px solid var(--sheet-rule); background:var(--sheet-head)}
.xlfile{font-family:var(--mono); color:var(--sheet-ink)}
.xlsheet{color:var(--sheet-muted)}
.xlsheet::before{content:"›"; margin-right:8px}
.xlname{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--sheet-band); border:1px solid color-mix(in srgb, var(--sheet-band) 35%, transparent); border-radius:5px; padding:1px 7px}
.xlscroll{overflow-x:auto}
.xlgrid{border-collapse:collapse; font-family:"Carlito", Calibri, "IBM Plex Sans", sans-serif; font-size:14px; width:auto; min-width:100%}
.xlgrid th, .xlgrid td{border:1px solid var(--sheet-rule); padding:3px 10px; white-space:nowrap; text-transform:none; letter-spacing:0; font-weight:400; font-family:inherit; color:var(--sheet-ink); background:var(--sheet-bg)}
.xlgrid tr:hover td{background:var(--sheet-bg)}
.xlgrid tr th:first-child{background:var(--sheet-head); color:var(--sheet-muted); font-size:12px; text-align:center; width:32px}
.xlcols th{background:var(--sheet-head)!important; color:var(--sheet-muted)!important; font-size:12px; text-align:center}
.xltitle{font-weight:700!important}
.xlhead td{background:#1B5E35!important; color:#FFFFFF!important; font-weight:700!important}
.xlgrid td.n{text-align:right; font-variant-numeric:tabular-nums; background:var(--sheet-input); color:var(--sheet-link)}
.xlgrid td.xloff{color:var(--sheet-muted); font-style:italic; background:var(--sheet-bg)}
.xlhead td.xloff{background:#5E7F6A!important; color:#E9F0EB!important; font-style:italic}
.xltabs{display:flex; gap:2px; overflow-x:auto; padding:0 8px; border-top:1px solid var(--sheet-rule); background:var(--sheet-head)}
.xltab{font-size:12.5px; padding:6px 12px; color:var(--sheet-muted); white-space:nowrap; border-right:1px solid var(--sheet-rule)}
.xltab.on{background:var(--sheet-bg); color:#1B5E35; font-weight:700; border-bottom:2px solid #1B5E35; margin-top:-1px}
.xlmock figcaption{font-size:13.5px; color:var(--sheet-muted); padding:9px 14px; border-top:1px solid var(--sheet-rule); background:var(--sheet-bg)}

/* ------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--rule); background:var(--sunk); margin-top:40px}
.footin{max-width:1240px; margin:0 auto; padding:44px 24px 32px; display:grid; grid-template-columns:1.4fr repeat(4, minmax(0,1fr)); gap:32px}
.footin h4{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; font-weight:600}
.footin ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.footin a{color:var(--ink-2); text-decoration:none; font-size:14.5px}
.footin a:hover{color:var(--maroon)}
.footin .about p{color:var(--muted); font-size:14px; max-width:34ch; margin:12px 0 0}
.footbase{max-width:1240px; margin:0 auto; padding:16px 24px 28px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; color:var(--muted); font-size:13px; border-top:1px solid var(--rule)}

/* ================================================================ HOME */
.home{overflow-x:clip}
.hero{position:relative; background:var(--maroon-deep); color:var(--on-maroon); overflow:hidden; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:96px 28px;
  mask-image:radial-gradient(ellipse 80% 90% at 75% 40%, #000 30%, transparent 85%)}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(900px 480px at 85% 10%, rgba(229,134,150,.28), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(0,0,0,.35), transparent 60%)}
.heroin{max-width:1240px; margin:0 auto; padding:72px 24px 80px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:56px; align-items:center}
.hero .eyebrow{color:#F0A0AE}
.hero h1{color:#FFFFFF; font-size:clamp(42px,6vw,76px); line-height:.98; letter-spacing:-.035em; margin:.28em 0 .35em; font-weight:700}
.hero h1 em{font-style:normal; color:#F0A0AE}
.hero .lead{color:var(--on-maroon-2); font-size:19.5px}
.hero .ctas{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 22px}
.hero .btn.primary{background:#FBF1F2; border-color:#FBF1F2; color:#420E19}
.hero .btn.primary:hover{background:#FFFFFF; color:#420E19}
.hero .btn.ghost{background:transparent; border-color:rgba(251,241,242,.3); color:#FBF1F2}
.hero .btn.ghost:hover{border-color:#FBF1F2; color:#FFFFFF}
.ticks{display:flex; flex-wrap:wrap; gap:8px 18px; margin:0; padding:0; list-style:none; font-size:14px; color:var(--on-maroon-2)}
.ticks li{display:flex; align-items:center; gap:7px}
.ticks svg{width:15px; height:15px; color:#F0A0AE; flex:none}

/* the editor → workbook visual */
.stage{position:relative; display:grid; gap:0}
.win{border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08)}
.win .code{margin:0; border:0; border-radius:0; box-shadow:none}
.win .code .bar{background:#2A1C20}
.win.editor{position:relative; z-index:2; width:100%}
.win .code pre{font-size:12.2px; padding:14px 16px}
.win.sheet{position:relative; z-index:1; width:90%; margin:16px 0 0 10%; background:var(--sheet-bg); color:var(--sheet-ink)}
.sheetbar{display:flex; align-items:center; gap:10px; padding:9px 14px; background:#1B5E35; color:#EAF3EC; font-size:12.5px; font-family:var(--mono)}
.sheetbar b{font-weight:600}
.sheetbar .chk{margin-left:auto; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); padding:2px 9px; border-radius:20px}
.sheetbar .chk i{width:7px; height:7px; border-radius:50%; background:#8FE0A8}
.fx{display:flex; align-items:center; gap:10px; padding:6px 12px; border-bottom:1px solid var(--sheet-rule); font-family:var(--mono); font-size:12px; color:var(--sheet-ink); background:#FFFFFF; overflow-x:auto; white-space:nowrap}
.fx .ref{color:var(--sheet-muted); min-width:42px}
.fx .eq{color:var(--sheet-muted); font-style:italic}
.minisheet{width:100%; border-collapse:collapse; font-family:"Carlito", Calibri, "IBM Plex Sans", sans-serif; font-size:13px; color:var(--sheet-ink); background:#FFFFFF}
.minisheet th, .minisheet td{border:1px solid var(--sheet-rule); padding:3px 8px; white-space:nowrap; text-transform:none; letter-spacing:0; font-family:inherit; font-size:13px; font-weight:400; color:var(--sheet-ink); background:#FFFFFF}
.minisheet tr:hover td{background:#FFFFFF}
.minisheet thead th{background:var(--sheet-head); color:var(--sheet-muted); text-align:center; font-size:11.5px}
.minisheet tbody th{background:var(--sheet-head); color:var(--sheet-muted); text-align:center; width:28px; font-size:11.5px}
.minisheet .sec td{background:#F7F1F1; color:#7B1E2E; font-weight:700; font-size:12px}
.minisheet .imp{color:#1D5DBF}
.minisheet .in{background:#FFF3D6; color:#1D5DBF}
.minisheet .num{text-align:right; font-variant-numeric:tabular-nums}
.minisheet .sel{outline:2px solid #1B5E35; outline-offset:-2px}
.minisheet .unit{color:var(--sheet-muted); font-size:12px}
.sheetwrap{overflow-x:auto}

/* home bands */
.band{max-width:1240px; margin:0 auto; padding:88px 24px 0}
.band > header{max-width:720px; margin-bottom:34px}
.band h2{font-size:clamp(30px,3.6vw,44px); line-height:1.05; margin:.25em 0 .35em; font-weight:700; letter-spacing:-.025em}
.band > header p:not(.eyebrow){color:var(--ink-2); font-size:18px; margin:0; max-width:60ch}

.failures{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.failure{border:1px solid var(--rule); border-radius:14px; background:var(--surface); overflow:hidden; display:flex; flex-direction:column}
.failure .was{padding:20px 20px 16px; border-bottom:1px dashed var(--rule-2)}
.failure .was .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bad); font-weight:600}
.failure h3{font-size:20px; margin:.35em 0 .3em}
.failure .was p{margin:0; color:var(--ink-2); font-size:15px}
.failure .fix{padding:16px 20px 20px; background:var(--maroon-soft); flex:1}
.failure .fix .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--maroon); font-weight:600}
.failure .fix p{margin:.35em 0 0; font-size:15px; color:var(--ink)}

.how{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; counter-reset:how}
.how li{list-style:none; border:1px solid var(--rule); border-radius:14px; background:var(--surface); padding:22px; display:flex; flex-direction:column; gap:10px}
.how ol{margin:0; padding:0}
.how .n{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--maroon-deep); color:var(--on-maroon); font-family:var(--mono); font-weight:600}
.how h3{margin:0; font-size:21px}
.how p{margin:0; color:var(--ink-2); font-size:15px}
.how .code{margin:4px 0 0; box-shadow:none}
.how .code pre{font-size:12.5px; padding:12px 14px}

.features{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:16px; overflow:hidden}
.feature{background:var(--surface); padding:26px 24px; display:flex; flex-direction:column; gap:8px}
.feature .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--maroon-soft); color:var(--maroon)}
.feature .ic svg{width:21px; height:21px}
.feature h3{margin:8px 0 0; font-size:19px}
.feature p{margin:0; color:var(--ink-2); font-size:15px}
.feature code{font-size:.82em}

.tuts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px}
/* An odd card out takes the whole row rather than sitting alone in half of it. */
.tuts .tut:last-child:nth-child(odd){grid-column:1 / -1}
.tut{position:relative; display:flex; flex-direction:column; gap:12px; padding:28px; border-radius:16px; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--rule); overflow:hidden; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.tut:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--maroon) 40%, var(--rule))}
.tut .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--maroon); font-weight:600}
.tut h3{font-size:24px; margin:0; line-height:1.1; padding-right:84px}
.tut p{margin:0; color:var(--ink-2); font-size:15.5px}
.tut .spec{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.tut .spec span{font-family:var(--mono); font-size:12px; color:var(--ink-2); background:var(--sunk); border:1px solid var(--rule); border-radius:20px; padding:2px 10px}
.tut .go{margin-top:auto; padding-top:8px; font-weight:600; color:var(--maroon); display:inline-flex; align-items:center; gap:6px}
.tut .go svg{width:16px; height:16px; transition:transform .15s ease}
.tut:hover .go svg{transform:translateX(3px)}
.tut .art{position:absolute; right:-6px; top:-6px; width:112px; height:112px; opacity:.9; color:var(--maroon-soft)}

.newgrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.bandhead{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:12px 24px; margin-bottom:26px}
.bandhead h2{margin-bottom:0}

.rules{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 40px; margin:0; padding:0; list-style:none; counter-reset:rule}
.rules li{counter-increment:rule; display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 12px; padding:18px 0; border-top:1px solid var(--rule)}
.rules li::before{content:counter(rule, decimal-leading-zero); grid-row:span 2; font-family:var(--mono); font-size:13px; color:var(--maroon); font-weight:600; padding-top:3px}
.rules b{font-family:var(--display); font-size:18px; font-weight:600; color:var(--ink)}
.rules span{color:var(--ink-2); font-size:15px}

.cta{max-width:1240px; margin:96px auto 0; padding-inline:24px}
.ctabox{position:relative; overflow:hidden; border-radius:22px; background:var(--maroon-deep); color:var(--on-maroon); padding:52px 48px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:32px; align-items:center; isolation:isolate}
.ctabox::before{content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size:96px 28px; mask-image:linear-gradient(to left, #000, transparent 70%)}
.ctabox h2{color:#FFFFFF; font-size:clamp(28px,3.4vw,40px); margin:.2em 0 .3em; line-height:1.05}
.ctabox p{color:var(--on-maroon-2); margin:0; max-width:52ch}
.ctabox .eyebrow{color:#F0A0AE}
.access{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:20px}
.access .label{margin:0; display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#F0A0AE; margin-bottom:8px}
.addr{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.addr code{flex:1; min-width:0; background:rgba(0,0,0,.25); color:#FFFFFF; font-size:14px; padding:10px 12px; border-radius:9px; user-select:all; overflow-wrap:anywhere}
.access{display:grid; gap:10px}
.access .btn{background:#FBF1F2; border-color:#FBF1F2; color:#420E19; justify-content:center}
.access .btn:hover{background:#FFFFFF; color:#420E19}
.access .btn.ghost{background:transparent; border-color:rgba(251,241,242,.35); color:#FBF1F2}
.access .btn.ghost:hover{border-color:#FBF1F2; color:#FFFFFF}
.access small{display:block; margin-top:10px; color:var(--on-maroon-2); font-size:13px}

/* ============================================================= DOWNLOAD */
.dlhero{background:var(--maroon-deep); color:var(--on-maroon); position:relative; overflow:hidden; isolation:isolate}
.dlhero::before{content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size:96px 28px; mask-image:radial-gradient(ellipse at 80% 20%, #000, transparent 70%)}
.dlhero .in{max-width:1080px; margin:0 auto; padding:64px 24px 120px}
.dlhero h1{color:#FFFFFF; font-size:clamp(36px,5vw,58px); line-height:1; letter-spacing:-.03em; margin:.3em 0 .35em}
.dlhero .lead{color:var(--on-maroon-2); max-width:56ch}
.dlhero .eyebrow{color:#F0A0AE}
.dlbody{max-width:1080px; margin:0 auto; padding:0 24px}
.dlbody .doc{max-width:760px}
.platforms{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:-84px; position:relative}
.platform{background:var(--surface); border:1px solid var(--rule); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow)}
.platform .pic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--maroon-soft); color:var(--maroon)}
.platform .pic svg{width:24px; height:24px}
.platform h3{margin:8px 0 0; font-family:var(--display); font-size:24px; letter-spacing:-.02em}
.platform .file{margin:0; font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.platform .btn{justify-content:center; margin-top:10px}
.platform .needs{margin:4px 0 0; font-size:13.5px; color:var(--ink-2)}
.platform.here{border-color:var(--maroon); box-shadow:0 0 0 1px var(--maroon), var(--shadow)}
.dlsteps{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:14px}
.dlsteps li{display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:14px}
.dlsteps .n{grid-row:span 2; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--maroon); color:var(--on-maroon); font-family:var(--mono); font-weight:600; font-size:14px}
:root[data-theme="dark"] .dlsteps .n{color:#2A0B12}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .dlsteps .n{color:#2A0B12} }
.dlsteps b{font-family:var(--display); font-size:18px}
.dlsteps span:last-child{color:var(--ink-2)}
.dlbody .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}

/* ============================================================== ACCOUNT */
.acct{max-width:880px; margin:0 auto; padding:40px 24px 72px; display:grid; gap:20px}
.acct.narrow{max-width:460px; padding-top:56px}
.acct.wide{max-width:1240px}
.acct h1{font-family:var(--display); font-size:clamp(28px,3.4vw,38px); letter-spacing:-.025em; line-height:1.05; margin:.15em 0 .2em}
.acct h2{font-family:var(--display); font-size:21px; letter-spacing:-.015em; margin:0 0 12px}
.acct .muted, .acct .aside{color:var(--muted)}
.acct .aside{font-size:14.5px; margin:4px 0 0}
.acct .lede{color:var(--ink-2); margin:0 0 4px}
.acct .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.acct table.keys .btn{white-space:nowrap}
.acct .link-btn{font:inherit; color:var(--maroon); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--maroon) 35%, transparent); text-underline-offset:3px}
.acctcard{background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:24px}
.accthead{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
.accthead p{margin:0}
.acctactions{display:flex; gap:8px; align-items:center}
.acctactions form{margin:0}
.form{display:grid; gap:14px; margin-top:14px}
.form.inline{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); align-items:end}
.form.inline .btn{justify-self:start}
.form.search{grid-template-columns:minmax(0,360px) auto}
.field{display:grid; gap:6px; font-size:14px; font-weight:600; color:var(--ink-2)}
.field input, .actions input, .actions select{font:inherit; font-weight:400; font-size:15px; color:var(--ink); background:var(--paper); border:1px solid var(--rule-2); border-radius:8px; padding:9px 11px; min-width:0; width:100%}
.field input:focus, .actions input:focus, .actions select:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:transparent}
.mono, .field input.mono{font-family:var(--mono); letter-spacing:.02em}
.notice{margin:0; padding:10px 14px; border-radius:9px; font-size:14.5px}
.notice.ok{background:color-mix(in srgb, var(--ok) 12%, var(--surface)); color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent)}
.notice.err{background:color-mix(in srgb, var(--bad) 10%, var(--surface)); color:var(--bad); border:1px solid color-mix(in srgb, var(--bad) 30%, transparent)}
.standing{display:grid; gap:2px; padding:20px 24px; border-radius:14px; background:var(--maroon-deep); color:var(--on-maroon)}
.standing .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#F0A0AE; font-weight:600}
.standing b{font-family:var(--display); font-size:26px; letter-spacing:-.02em; color:#FFFFFF}
.standing span:last-child{color:var(--on-maroon-2); max-width:70ch}
.standing code{background:rgba(255,255,255,.12); color:#FFFFFF}
.standing.ended{background:var(--sunk); color:var(--ink); border:1px solid var(--rule-2)}
.standing.ended .k{color:var(--bad)} .standing.ended b{color:var(--ink)} .standing.ended span:last-child{color:var(--ink-2)}
.standing.ended code{background:var(--maroon-soft); color:var(--ink)}
.newkey{border:1px solid color-mix(in srgb, var(--maroon) 35%, var(--rule)); background:var(--maroon-soft); border-radius:12px; padding:18px; margin-bottom:16px; display:grid; gap:10px; justify-items:start}
.newkey .k{margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--maroon); font-weight:600}
.keysteps{margin:0; padding-left:20px; color:var(--ink-2); font-size:14.5px}
pre.key{margin:6px 0; white-space:pre-wrap; word-break:break-all; font-family:var(--mono); font-size:13px; line-height:1.55; background:var(--surface); color:var(--ink); border:1px solid var(--rule-2); border-radius:8px; padding:10px 12px; max-width:100%; user-select:all}
table.keys td, table.admin td{vertical-align:top}
table.keys details summary{cursor:pointer; color:var(--maroon); font-weight:600}
.chip{display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.04em; padding:1px 8px; border-radius:20px; background:var(--sunk); color:var(--muted); vertical-align:middle}
.chip.ok{background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok)}
.chip.trial{background:var(--maroon-soft); color:var(--maroon)}
.actions{display:grid; gap:8px; min-width:300px}
.actions form{display:flex; gap:6px; align-items:center; margin:0; flex-wrap:wrap}
.actions input{width:auto; flex:1; font-size:13.5px; padding:6px 9px}
.actions select{width:auto; font-size:13.5px; padding:6px 9px}

/* ================================================================ ABOUT */
.abouthero{background:var(--maroon-deep); color:var(--on-maroon); position:relative; overflow:hidden; isolation:isolate}
.abouthero::before{content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size:96px 28px; mask-image:radial-gradient(ellipse at 80% 20%, #000, transparent 70%)}
.abouthero .in{max-width:980px; margin:0 auto; padding:72px 24px 64px}
.abouthero h1{color:#FFFFFF; font-size:clamp(38px,5.4vw,64px); line-height:1; letter-spacing:-.03em; margin:.3em 0 .35em}
.abouthero .lead{color:var(--on-maroon-2)}
.abouthero .eyebrow{color:#F0A0AE}
.aboutbody{max-width:980px; margin:0 auto; padding:24px 24px 0}
.aboutbody .doc{max-width:none}
.story{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start}
.story > :only-child{grid-column:1 / -1}
.story p:not(.eyebrow){font-size:17.5px; line-height:1.7}
.person{border:1px solid var(--rule); border-radius:16px; background:var(--surface); padding:22px; position:sticky; top:calc(var(--topbar) + 24px)}
.avatar{width:64px; height:64px; border-radius:16px; background:var(--maroon-deep); color:var(--on-maroon); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.02em}
.person h3{margin:14px 0 2px; font-size:21px}
.person .role{color:var(--muted); font-size:14px; margin:0 0 12px}
.person ul{list-style:none; margin:0; padding:12px 0 0; border-top:1px solid var(--rule); display:grid; gap:8px; font-size:14px; color:var(--ink-2)}
.person li{display:flex; gap:8px; align-items:baseline}
.person li::before{content:""; flex:none; width:6px; height:6px; border-radius:2px; background:var(--maroon); transform:translateY(-2px)}
.beliefs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:8px}
.belief{border:1px solid var(--rule); border-radius:14px; padding:20px; background:var(--surface)}
.belief h3{margin:0 0 .3em; font-size:18.5px}
.belief p{margin:0; color:var(--ink-2); font-size:15px}
.road{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:0}
.road li{display:grid; grid-template-columns:130px minmax(0,1fr); gap:18px; padding:16px 0; border-top:1px solid var(--rule)}
.road .when{font-family:var(--mono); font-size:12.5px; color:var(--maroon); font-weight:600; padding-top:2px}
.road b{display:block; font-family:var(--display); font-size:18px; font-weight:600}
.road span{color:var(--ink-2); font-size:15px}
.road li.done .when::after{content:" ✓"; color:var(--ok)}

/* ================================================================ responsive */
@media (max-width: 1080px){
  .tuts{grid-template-columns:minmax(0,1fr)}
  .heroin{grid-template-columns:minmax(0,1fr); gap:40px; padding-block:56px 64px}
  .win.editor, .win.sheet{width:100%}
  .win.sheet{margin:14px 0 0 0}
  .footin{grid-template-columns:repeat(3, minmax(0,1fr))}
  .footin .about{grid-column:1 / -1}
}
@media (max-width: 980px){
  .shell{grid-template-columns:minmax(0,1fr); gap:0; padding-inline:16px}
  .side{display:none}
  .onpage{display:block; margin:0 0 12px; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); padding:10px 14px}
  .onpage summary{cursor:pointer; font-weight:600; font-size:15px}
  .onpage .navgroup{margin:10px 0 0}
  .top{padding-inline:16px; gap:10px}
  .toplinks{display:none}
  .menubtn{display:inline-grid}
  .top.open .toplinks{display:flex; position:absolute; top:var(--topbar); left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; padding:10px 16px 16px; background:var(--paper); border-bottom:1px solid var(--rule); box-shadow:var(--shadow)}
  .top.open .toplinks a{padding:10px 12px}
  .top.open .toplinks .mobileonly{display:block}
  .topactions .btn{padding:8px 10px}
  .topactions .btn span{display:none}
  .fails, .how, .features, .newgrid{grid-template-columns:minmax(0,1fr)}
  .tuts{grid-template-columns:minmax(0,1fr)}
  .rules{grid-template-columns:minmax(0,1fr)}
  .ctabox{grid-template-columns:minmax(0,1fr); padding:36px 24px}
  .story{grid-template-columns:minmax(0,1fr)}
  .person{position:static}
  .beliefs{grid-template-columns:minmax(0,1fr)}
  .band, .cta, .heroin, .footin, .footbase, .aboutbody, .abouthero .in, .dlbody, .dlhero .in{padding-inline:16px}
  .platforms{grid-template-columns:minmax(0,1fr)}
  .acct{padding-inline:16px}
  .form.search{grid-template-columns:minmax(0,1fr)}
  .band{padding-top:64px}
}
@media (max-width: 560px){
  body{font-size:16px}
  .doc h2{font-size:25px}
  .lead, .hero .lead{font-size:17px}
  .code pre{font-size:12.4px}
  .pager{grid-template-columns:1fr}
  .pager a.next{grid-column:1}
  .footin{grid-template-columns:repeat(2, minmax(0,1fr))}
  .road li{grid-template-columns:minmax(0,1fr); gap:4px}
  .ver{display:none}
  .stepno{width:34px; height:34px; font-size:14px}
}

/* Home: the audit band (render.rs audit_band). The worksheet stays light in both themes, as Excel does. */
.auditband{--r1:#1F5FD1; --r2:#1E8A3A; --r3:#8B3FC4; --r4:#C8321F}
.auditgrid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center}
.auditcopy h2{margin-top:.25em}
.auditcopy > p:not(.eyebrow){color:var(--ink-2); font-size:18px; margin:0 0 18px; max-width:52ch}
.auditpoints{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px}
.auditpoints li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); font-size:15px; line-height:1.45}
.auditpoints svg{width:16px; height:16px; color:var(--ok); flex:none; margin-top:3px}
.auditpoints b{color:var(--ink); font-weight:600}
.auditshow{position:relative; display:grid}
.auditsheet{width:88%; margin:0}
.auditsheet .minisheet td.r1, .auditsheet .minisheet td.r2, .auditsheet .minisheet td.r3, .auditsheet .minisheet td.r4{outline-offset:-2px; outline-width:2px; outline-style:solid}
.minisheet td.r1{outline-color:var(--r1); background:rgba(31,95,209,.07)}
.minisheet td.r2{outline-color:var(--r2); background:rgba(30,138,58,.07)}
.minisheet td.r3{outline-color:var(--r3); background:rgba(139,63,196,.07)}
.minisheet td.r4{outline-color:var(--r4); background:rgba(200,50,31,.07)}
.auditshow i{font-style:normal; font-weight:600}
.auditshow i.c1{color:var(--r1)} .auditshow i.c2{color:var(--r2)} .auditshow i.c3{color:var(--r3)} .auditshow i.c4{color:var(--r4)}
.auditcard{
  position:relative; z-index:2; width:min(400px, 66%); margin:-28px 0 0 auto; padding:16px 18px; display:grid; gap:12px;
  background:var(--surface); border:1px solid var(--rule-2); border-radius:14px; box-shadow:0 30px 60px -24px rgba(66,14,25,.45);
}
.auditcard .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.auditcard .ahead{display:grid; gap:2px}
.auditcard .ahead b{font-size:17px}
.auditcard .where{font-family:var(--mono); font-size:12px; color:var(--muted)}
.auditcard .avalue{font-family:var(--mono); font-size:26px; font-weight:600; font-variant-numeric:tabular-nums}
.auditcard .avalue small{font-size:13px; color:var(--muted); font-weight:400}
.auditcard .asec{display:grid; gap:4px; border-top:1px solid var(--rule); padding-top:10px}
.auditcard code{font-family:var(--mono); font-size:12px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; background:none; padding:0; color:var(--ink)}
.auditcard code.faint{color:var(--muted)}
.auditcard .alink{font-size:14px; color:var(--maroon); font-weight:600}
.auditcard .alink em{font-style:normal; font-weight:400; color:var(--muted); font-size:12.5px; margin-left:6px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .auditband{--r1:#6F9DFF; --r2:#5CCC7C; --r3:#C08AF0; --r4:#FF8A73} }
:root[data-theme="dark"] .auditband{--r1:#6F9DFF; --r2:#5CCC7C; --r3:#C08AF0; --r4:#FF8A73}
/* (The worksheet is light in both themes: its outlines keep the light colours.) */
.auditsheet{--r1:#1F5FD1; --r2:#1E8A3A; --r3:#8B3FC4; --r4:#C8321F}
@media (max-width: 980px){
  .auditgrid{grid-template-columns:minmax(0,1fr); gap:28px}
  .auditsheet{width:100%}
  .auditcard{width:100%; margin:14px 0 0}
}
@media (max-width: 560px){
  /* Only the audited period's column on a phone (AK and AM hidden). */
  .auditsheet .minisheet tr > :nth-child(5), .auditsheet .minisheet tr > :nth-child(7){display:none}
}

/* Home: what the checks prove, and what they don't. */
.checks{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:22px}
.checkcol{border:1px solid var(--rule); border-radius:14px; background:var(--surface); padding:20px 22px}
.checkcol h3{font-size:18px; margin:0 0 12px}
.checkcol.yours{background:var(--sunk)}
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.checklist li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); font-size:15px; line-height:1.45}
.checklist svg{width:16px; height:16px; color:var(--ok); flex:none; margin-top:3px}
.checklist .dash{width:16px; flex:none; color:var(--muted); text-align:center}
.checknote{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--rule-2); color:var(--ink); font-size:15px; line-height:1.5}

/* Home: pricing. */
.prices{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:16px}
.price{border:1px solid var(--rule); border-radius:14px; background:var(--surface); padding:22px; display:grid; gap:12px; align-content:start}
.price .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--maroon); font-weight:600}
.price h3{font-size:26px; margin:0; letter-spacing:-.01em}
.price .btn{justify-self:start}
.price .buy{margin:4px 0 0; padding:14px 16px; border-radius:10px; background:var(--maroon-soft); color:var(--ink); font-size:15px; line-height:1.5}
@media (max-width: 860px){ .checks, .prices{grid-template-columns:minmax(0,1fr)} }


/* ============================================================ CLI + VS CODE
 * Terminal sessions (commands and their output), the install command on
 * Home, and the code blocks inside the Install page's cards. */
.code[data-lang="term"] pre{color:#E6D9DB}
.code[data-lang="term"] .t-com{user-select:none}
.heroinstall{margin:26px 0 0; max-width:520px}
.heroinstall .code{margin:0 0 10px; box-shadow:none; border-color:rgba(251,241,242,.18)}
.heroinstall .code pre{padding:12px 16px; font-size:14px}
.heroinstall .code pre::before{content:"$ "; color:var(--code-muted)}
.heroinstall p{margin:0; font-size:14.5px; color:var(--on-maroon-2)}
.heroinstall a{color:#F0A0AE}
.hero .heroinstall + .ctas{margin-top:22px}
.platform .code{margin:10px 0 2px; box-shadow:none}
.platform .code .bar{min-height:30px}
.platform .code pre{padding:11px 14px; font-size:12.6px; white-space:pre-wrap; word-break:break-all}