/* ai-cur.com

   Brand system (founder's identity sheet): navy #0D1B2A, blue #2563EB,
   teal #10B981, geometric sans wordmark with the hyphen carried in blue.
   Amber is added for one purpose only, marking money the product is holding
   back (open charges, unattributed spend), because the ledger needs a state
   the three brand colours do not carry.

   The layout takes its cues from the artifact the product makes: a
   reconciliation statement that cites its sources. Ruled rather than carded,
   tabular figures, a document grid with a section rail, and a real footnote
   apparatus, because every claim here is meant to be checkable by the reader.
   Committed to a light world on purpose; every colour is painted explicitly. */

:root{
  color-scheme:light;

  --paper:#ffffff;
  --paper-2:#f5f8fb;
  --paper-3:#eaf0f6;
  --navy-deep:#0D1B2A;

  --ink:#0D1B2A;
  --ink-2:#4c5a6b;
  --ink-3:#7d8b9c;

  --rule:#e1e8ef;
  --rule-2:#c7d2de;

  --accent:#2563EB;
  --accent-2:#1a49bd;
  --accent-soft:#eaf0fe;

  --teal:#10B981;
  --teal-2:#0b7f5a;
  --teal-soft:#e6f7f1;

  --flag:#B45309;          /* held back: open charges, unattributed, gaps */
  --flag-soft:#fdf3e7;

  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-soft)}

p{margin:0 0 1.15em;max-width:68ch}
a{color:var(--accent);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
cite{font-style:normal}

.wrap{max-width:1120px;margin:0 auto;padding:0 34px}

/* ── type ───────────────────────────────────────────────────────────── */

h1,h2{font-weight:600;letter-spacing:-.03em;text-wrap:balance;margin:0 0 20px}
h1{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.07;margin-bottom:0;max-width:16em}
h2{font-size:clamp(1.75rem,2.9vw,2.4rem);line-height:1.14;max-width:19em}
h3{font-size:1.15rem;font-weight:600;letter-spacing:-.012em;line-height:1.3;margin:0 0 8px}

.lede{font-size:1.18rem;line-height:1.55;color:var(--ink-2);max-width:40em;text-wrap:pretty}
.small{font-size:15.5px;color:var(--ink-2)}

.label{
  display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.num{display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--accent);letter-spacing:.1em}

/* ── wordmark and header ────────────────────────────────────────────── */

.mark{
  font-size:1.42rem;font-weight:600;letter-spacing:-.035em;color:var(--ink);
  display:inline-flex;align-items:baseline;
}
.mark:hover{text-decoration:none}
/* The analytics mark from the brand sheet, sized off the wordmark so the
   lockup holds at any type scale. aria-hidden: the anchor already reads
   "ai-cur", and a decorative sibling would make a screen reader say the
   brand twice. */
.mark .mk{height:1.55em;width:auto;margin-right:.42em;align-self:center;flex:none}
.mark i{font-style:normal;color:var(--accent);padding:0 .02em}

header{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
header .wrap{display:flex;align-items:center;gap:30px;height:66px;position:relative}
header .mark{margin-right:auto}
.navlinks{display:flex;gap:24px}
.navlinks a{
  font-family:var(--mono);font-size:12.5px;font-weight:400;letter-spacing:.02em;
  color:var(--ink-2);padding:3px 0;border-bottom:1px solid transparent;
}
.navlinks a:hover{color:var(--ink);border-bottom-color:var(--rule-2);text-decoration:none}
.navlinks a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.navlinks a.signin{color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:6px;padding:5px 12px;margin-left:8px}
.navlinks a.signin:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);padding:6px 0}
.menu summary::-webkit-details-marker{display:none}

@media (max-width:1040px){
  header .wrap>.navlinks{display:none}
  .menu{display:block}
  .menu[open] .navlinks{
    display:flex;flex-direction:column;position:absolute;left:0;right:0;top:66px;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:20px 34px 24px;gap:16px;
  }
  .menu[open] .navlinks a{font-size:15px}
}

/* ── buttons ────────────────────────────────────────────────────────── */

.btn{
  display:inline-block;padding:11px 20px;border-radius:7px;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.02em;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  transition:background .14s,border-color .14s,color .14s;
}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
header .btn{padding:9px 16px;font-size:12.5px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ── hero ───────────────────────────────────────────────────────────── */

.hero{padding:78px 0 62px;border-bottom:1px solid var(--rule)}
.hero .eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:26px;
}
.hero h1{max-width:none}
.hero h1 em{color:var(--accent);font-style:normal}
.hero .cols{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:0 64px;align-items:start;margin-top:42px;
}
.hero .cols>div{padding-top:22px;border-top:1px solid var(--rule-2)}
.hero .sub{font-size:1.15rem;color:var(--ink-2);max-width:36em;margin:0}
.hero .actions{margin-top:26px}
@media (max-width:900px){
  .hero .cols{grid-template-columns:1fr;gap:34px;margin-top:34px}
  .hero h1{font-size:clamp(2.2rem,7vw,2.9rem)}
}

/* the hero's ledger stub: the product's own artifact, not a stock illustration */
.stub .label{margin-bottom:14px}
.stub table{min-width:0;font-size:15px}
.stub td{padding:9px 0;border-bottom:1px solid var(--rule)}
.stub .tcap{margin-top:14px}
.stub table.ledger td:first-child{width:auto}

/* the citation, set as evidence rather than decoration */
.cite-block{margin:0;padding:22px 0 0;border-top:2px solid var(--accent)}
.cite-block p{font-size:1.38rem;line-height:1.34;font-weight:500;letter-spacing:-.02em;margin:0 0 14px;max-width:20em}
.cite-block footer{font-family:var(--mono);font-size:11.5px;line-height:1.6;letter-spacing:.02em;color:var(--ink-3)}
.cite-block footer a{color:var(--ink-2)}

/* ── the surfaces band ──────────────────────────────────────────────── */

.band{border-bottom:1px solid var(--rule);background:var(--paper-2);padding:17px 0}
.band .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px}
.band .label{display:inline;color:var(--ink-3)}
.band b{font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--ink-2)}

/* ── sections, on a document grid ───────────────────────────────────── */

section{padding:74px 0;border-bottom:1px solid var(--rule)}
section.tint{background:var(--paper-2)}
section:last-of-type{border-bottom:0}

.sec{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 60px;align-items:start}
.rail{position:sticky;top:96px}
.rail .num{margin-bottom:7px}
.rail .label{line-height:1.45}
@media (max-width:900px){
  .sec{grid-template-columns:minmax(0,1fr);gap:20px}
  .rail{position:static;display:flex;gap:14px;align-items:baseline}
  .rail .num,.rail .label{display:inline}
  .rail .num{margin:0}
}

/* a grid track defaults to min-width:auto, so a wide table inside it widens
   the whole page instead of scrolling in its own container */
.sec>*{min-width:0}
.body>:last-child{margin-bottom:0}
.pad{margin-top:44px}

/* ── figures (headline statistics) ──────────────────────────────────── */

.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;margin:38px 0 24px;border-top:1px solid var(--rule-2)}
.figures>div{padding:24px 26px 22px 0;border-right:1px solid var(--rule)}
.figures>div:last-child{border-right:0;padding-right:0}
.figures b{
  display:block;font-size:2.95rem;font-weight:600;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-bottom:12px;color:var(--ink);
}
.figures p{font-size:15.5px;line-height:1.5;color:var(--ink-2);margin:0;max-width:none}
@media (max-width:800px){
  .figures{grid-template-columns:1fr}
  .figures>div{border-right:0;border-bottom:1px solid var(--rule);padding:20px 0}
  .figures>div:last-child{border-bottom:0}
}

/* ── tables ─────────────────────────────────────────────────────────── */

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:34px 0 0}
table{border-collapse:collapse;width:100%;font-size:16px;min-width:520px}
th,td{text-align:left;padding:13px 18px 13px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
thead th{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--rule-2);padding-bottom:10px;
}
tbody th{font-weight:600;white-space:nowrap}
td small,th small{display:block;font-size:13px;font-weight:400;color:var(--ink-3);margin-top:4px}
th small a{color:var(--ink-3);text-decoration:underline;text-decoration-color:var(--rule-2)}
th small a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:0}
th.n{text-align:right}

/* the ledger: rules carry the arithmetic */
table.ledger td:first-child{width:46%}
table.ledger .basis{font-family:var(--mono);font-size:13px;color:var(--ink-3);white-space:nowrap}
table.ledger tr.sum td{border-top:1px solid var(--ink);border-bottom:2px solid var(--ink);font-weight:600;padding-top:14px}
table.ledger tr.sum .n{font-size:17px}
table.ledger tr.held td{color:var(--flag);border-bottom:0}
table.ledger tr.held td:first-child{font-weight:500}
table.ledger tr.credit .n{color:var(--teal-2)}
.tcap{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-3);margin:14px 0 0;max-width:none}

/* ── source apparatus ───────────────────────────────────────────────── */

a.ref{
  font-family:var(--mono);font-size:.72em;font-weight:500;color:var(--accent);
  text-decoration:none;padding:0 1px 0 2px;vertical-align:super;line-height:0;
}
a.ref:hover{text-decoration:underline}
ol.sources{
  list-style:none;margin:38px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);
  max-width:74ch;
}
ol.sources li{
  position:relative;padding:0 0 9px 26px;
  font-size:14px;line-height:1.55;color:var(--ink-2);
}
ol.sources .sn{
  position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:11px;font-weight:500;color:var(--accent);
}
ol.sources li:target{background:var(--accent-soft)}
ol.sources cite{font-style:italic}

/* ── notes and asides ───────────────────────────────────────────────── */

.note{
  border-left:2px solid var(--rule-2);padding:2px 0 2px 18px;margin:30px 0;
  font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:66ch;
}
.note b{color:var(--ink);font-weight:600}
.note.flag{border-left-color:var(--flag)}
.note.flag b{color:var(--flag)}
.note.teal{border-left-color:var(--teal)}

.pull{margin:34px 0;padding:0 0 0 22px;border-left:2px solid var(--accent)}
.pull p{font-size:1.24rem;font-weight:500;letter-spacing:-.018em;line-height:1.42;margin:0 0 10px;max-width:24em}
.pull footer{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-3)}

/* ── ordered steps ──────────────────────────────────────────────────── */

.steps{list-style:none;margin:38px 0 0;padding:0;counter-reset:st;border-top:1px solid var(--rule-2)}
.steps>li{
  counter-increment:st;display:grid;grid-template-columns:46px minmax(0,1fr);
  gap:0 20px;padding:24px 0;border-bottom:1px solid var(--rule);
}
.steps>li::before{
  content:counter(st,decimal-leading-zero);
  grid-column:1;grid-row:1;
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent);padding-top:4px;
}
/* every real child sits in the text column; without this the pseudo-element
   takes the first cell and the paragraph wraps inside the 46px number gutter */
.steps>li>*{grid-column:2}
.steps h3{margin-bottom:5px}
.steps p{margin:0;font-size:16px;color:var(--ink-2)}

/* ── plain column set ───────────────────────────────────────────────── */

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:0}
.cols>div{padding:24px 26px 22px 0;border-top:1px solid var(--rule-2)}
.cols h3{margin-bottom:6px}
.cols p{font-size:15.5px;color:var(--ink-2);margin:0;max-width:none}
.cols .label{margin-bottom:12px;color:var(--accent)}
.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ── plain lists ────────────────────────────────────────────────────── */

ul.plain{list-style:none;padding:0;margin:26px 0}
ul.plain li{padding:12px 0;border-bottom:1px solid var(--rule);max-width:70ch;font-size:16.5px}
ul.plain li:first-child{border-top:1px solid var(--rule)}
ul.plain b{font-weight:600}
ul.ticks{list-style:none;padding:0;margin:26px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px 30px}
ul.ticks li{font-size:15.5px;color:var(--ink-2);padding-left:20px;position:relative}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--teal)}

/* ── question and answer ────────────────────────────────────────────── */

.qa{margin:0;padding:34px 0;border-bottom:1px solid var(--rule)}
.qa:first-of-type{border-top:1px solid var(--rule-2)}
.qa .q{display:grid;grid-template-columns:46px minmax(0,1fr);gap:0 20px;margin-bottom:14px}
.qa .q .num{padding-top:7px}
.qa h3{font-size:1.36rem;font-weight:600;letter-spacing:-.025em;line-height:1.26;margin:0;max-width:22em}
.qa .a{padding-left:66px}
.qa .a>:last-child{margin-bottom:0}
.qa .concede{font-weight:600;color:var(--ink)}
@media (max-width:700px){.qa .a{padding-left:0}.qa .q{grid-template-columns:1fr;gap:6px}.qa .q .num{padding:0}}

/* ── figures and captures ───────────────────────────────────────────── */

figure{margin:38px 0 0}
.frame{border:1px solid var(--rule-2);border-radius:8px;overflow:hidden;background:#fff}
figcaption{font-size:15.5px;color:var(--ink-2);margin-top:14px;max-width:70ch;line-height:1.55}
figcaption b{color:var(--ink);font-weight:600}
.shots{display:grid;grid-template-columns:minmax(0,1fr);gap:52px;margin-top:8px}
.shots>*{min-width:0}
@media (max-width:760px){
  .frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .frame img{width:680px;max-width:none}
}

/* ── closing call to action ─────────────────────────────────────────── */

.close{background:var(--navy-deep);border-bottom:0;padding:82px 0;color:#fff}
.close h2{color:#fff;max-width:16em}
.close .lede,.close p{color:#b7c4d2}
.close .lede{margin-bottom:0}
.close a{color:#8fb4ff}
.close .actions{margin-top:32px}
.close .btn.ghost{color:#fff;border-color:#3b5064}
.close .btn.ghost:hover{border-color:#fff;color:#fff}
.close .figures{border-top-color:#2b3d4f}
.close .figures>div{border-right-color:#22323f}
.close .figures b{color:#fff}
.close .figures p{color:#b7c4d2}
@media (max-width:800px){.close .figures>div{border-bottom-color:#22323f}}

/* ── footer ─────────────────────────────────────────────────────────── */

footer{border-top:1px solid var(--rule);padding:46px 0 54px;background:var(--paper)}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:34px 40px}
footer .mark{margin:0 0 12px}
footer p{font-size:14px;color:var(--ink-3);margin:0 0 10px;max-width:42ch;line-height:1.55}
footer .tag{color:var(--ink-2);font-size:14.5px}
footer nav{display:flex;flex-direction:column;gap:9px}
footer nav a{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
footer .label{margin-bottom:14px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}footer .col-a{grid-column:1/-1}}

/* ── W2 additions (site-rc/rc3 and rc4) ─────────────────────────────────
   Appended to the live stylesheet so the privacy, terms and refunds pages
   render exactly as they do today. These components put the running app at
   the centre of each section: a capture in a light frame, the words beside
   it, and no ruled ledger. */

.lead-in{padding:84px 0 70px;border-bottom:1px solid var(--rule);background:linear-gradient(180deg,#fff 0%,var(--paper-2) 100%)}
.lead-in .split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.lead-in h1{font-size:clamp(2.3rem,4.4vw,3.5rem);max-width:12em}
.lead-in h1 em{font-style:normal;color:var(--accent)}
.lead-in .sub{font-size:1.2rem;color:var(--ink-2);margin:22px 0 0;max-width:30em}
.kicker{display:inline-block;font-size:14px;font-weight:600;color:var(--teal-2);background:var(--teal-soft);border-radius:999px;padding:4px 12px;margin-bottom:22px}
.fineprint{font-size:14.5px;color:var(--ink-3);margin:16px 0 0}

.pane{margin:0;border-radius:12px;background:#fff;border:1px solid var(--rule-2);box-shadow:0 18px 50px -24px rgba(13,27,42,.35);overflow:hidden}
.pane img{width:100%;height:auto}
.pane figcaption{margin:0;padding:12px 16px 14px;border-top:1px solid var(--rule);font-size:14.5px;background:var(--paper)}

.feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.feature.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.feature.flip>.words{order:2}
.feature h2{font-size:clamp(1.6rem,2.6vw,2.15rem)}
.feature p{color:var(--ink-2)}
.feature .more{font-weight:600}
.stack>*+*{margin-top:22px}

.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px;padding:0;list-style:none}
.caps li{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:20px 20px 18px}
.caps h3{margin-bottom:6px}
.caps p{font-size:15.5px;color:var(--ink-2);margin:0}
.caps .soon{display:inline-block;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-top:8px}

.centered{text-align:center}
.centered h2,.centered .lede{margin-left:auto;margin-right:auto}

.worked{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:34px 0 0}
.worked>div{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:22px}
.worked b{display:block;font-size:2.2rem;line-height:1.05;letter-spacing:-.035em;font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:10px}
.worked p{font-size:15.5px;color:var(--ink-2);margin:0}
.worked .over b{color:var(--accent)}

.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.paths{list-style:none;padding:0}
.paths>*{border-top:3px solid var(--accent);background:#fff;border-radius:0 0 10px 10px;padding:22px;box-shadow:0 1px 0 var(--rule)}
.paths>.free{border-top-color:var(--teal)}
.paths h3{font-size:1.3rem}
.paths p{font-size:15.5px;color:var(--ink-2)}
.paths ul{margin:10px 0 0;padding-left:18px;font-size:15.5px;color:var(--ink-2)}

@media (max-width:900px){
  .lead-in{padding:54px 0 48px}
  .lead-in .split,.feature,.feature.flip{grid-template-columns:minmax(0,1fr);gap:30px}
  .feature.flip>.words{order:0}
  .caps,.worked,.paths{grid-template-columns:minmax(0,1fr)}
}
.pane.after{margin-top:34px}

/* The live privacy page carries a table outside any .scroll wrapper, and the base
   table rule sets min-width:520px, so at phone width that page is wider than the
   screen (scrollWidth 554 at 390 on ai-cur.com as served at da431e0). The legal pages
   stay byte-identical, so the repair lives here: a bare table scrolls inside itself. */
@media (max-width:600px){
  main :not(.scroll)>table{display:block;min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ── dark scheme, follows the system setting (no script on this site) ─────────
   Same brand: navy paper, the blue and teal lifted for contrast on it, amber
   only for money held back. Captures stay light, framed, so they read as
   screens rather than glare. */

/* ── dark scheme, the default; the header switch turns the page light ────────
   Same brand: navy paper, the blue and teal lifted for contrast on it, amber
   only for money held back. Captures stay light, framed. */
:root:not(:has(#light:checked)):not(:has(#light:target)){
    color-scheme:dark;
    --paper:#0D1B2A;
    --paper-2:#12243a;
    --paper-3:#182e47;
    --navy-deep:#07111d;
    --ink:#eef3f8;
    --ink-2:#b7c4d2;
    --ink-3:#8797a8;
    --rule:#23374b;
    --rule-2:#31485f;
    --accent:#6b9bff;
    --accent-2:#9dbcff;
    --accent-soft:#16294a;
    --teal:#34d39e;
    --teal-2:#8ce8c9;
    --teal-soft:#0f3a30;
    --flag:#f2a75f;
    --flag-soft:#3a2810;
}
:root:not(:has(#light:checked)):not(:has(#light:target)) header{background:rgba(13,27,42,.92)}
:root:not(:has(#light:checked)):not(:has(#light:target)) .mark .mk{filter:brightness(0) invert(1)}   /* the navy mark as a white silhouette */
:root:not(:has(#light:checked)):not(:has(#light:target)) .btn{background:#2563EB;border-color:#2563EB;color:#fff}
:root:not(:has(#light:checked)):not(:has(#light:target)) .btn:hover{background:#1a49bd;border-color:#1a49bd}
:root:not(:has(#light:checked)):not(:has(#light:target)) .navlinks a.signin{background:transparent;border-color:#2563EB;color:#fff}
:root:not(:has(#light:checked)):not(:has(#light:target)) .navlinks a.signin:hover{background:#2563EB;border-color:#2563EB;color:#fff}
:root:not(:has(#light:checked)):not(:has(#light:target)) .frame,:root:not(:has(#light:checked)):not(:has(#light:target)) .pane,:root:not(:has(#light:checked)):not(:has(#light:target)) .caps li,:root:not(:has(#light:checked)):not(:has(#light:target)) .worked>div,:root:not(:has(#light:checked)):not(:has(#light:target)) .paths>*{background:var(--paper-2)}
:root:not(:has(#light:checked)):not(:has(#light:target)) .lead-in{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
:root:not(:has(#light:checked)):not(:has(#light:target)) .close{background:var(--navy-deep)}
:root:not(:has(#light:checked)):not(:has(#light:target)) .frame img,:root:not(:has(#light:checked)):not(:has(#light:target)) .pane img{opacity:.96}

/* ── the theme switch: dark is the default, the Light switch is a checkbox, no script.
   The choice lasts for the page you are on; the site sets no cookie and runs no script. */
.theme-switch{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.theme-label{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);cursor:pointer;padding:5px 10px;border:1px solid var(--rule-2);border-radius:6px;margin-right:12px;user-select:none}
.theme-label:hover{color:var(--ink);border-color:var(--ink)}
:root:has(#light:checked) .theme-label,:root:has(#light:target) .theme-label::before{content:"Dark"}
:root:has(#light:checked) .theme-label,:root:has(#light:target) .theme-label{font-size:0}
:root:has(#light:checked) .theme-label,:root:has(#light:target) .theme-label::before{font-size:12.5px}

/* ── W3 additions (site-rc/rc5) ──────────────────────────────────────────
   RC5 answers every question the product answers, so pages are longer and
   need a way to find a section: a chapter list at the top of a page (plain
   links, not a <nav>, because navigation between pages stays pages), a
   standing tag saying which plan holds each capability, and a card grid for
   the capabilities the demo cannot show, which answer in words. No web fonts
   are loaded: Figtree is used where the machine has it, the system face
   otherwise (charter rule 4, no third-party asset). */

.standing{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal-2);background:var(--teal-soft);border-radius:999px;padding:3px 10px;margin:0 0 14px}
.standing.team{color:var(--accent-2);background:var(--accent-soft)}
.standing.business{color:var(--ink);background:var(--paper-3)}

.toc{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.toc a{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);border:1px solid var(--rule-2);
  border-radius:999px;padding:5px 12px}
.toc a:hover{color:var(--ink);border-color:var(--ink);text-decoration:none}

.chapter{padding:56px 0 20px;border-bottom:0}
.chapter h2{margin-bottom:8px}
.chapter .lede{margin:0}

section.group{padding:56px 0}
.group .feature{align-items:start}
.group h3{font-size:clamp(1.35rem,2.2vw,1.7rem);letter-spacing:-.02em;line-height:1.2;margin-bottom:14px}
.group .view{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:6px}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
.cards>article{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:22px 22px 18px}
.cards h3{margin-bottom:10px}
.cards p{font-size:16px;color:var(--ink-2);margin:0 0 10px}
.cards p:last-child{margin-bottom:0}
@media (max-width:900px){.cards{grid-template-columns:minmax(0,1fr)}}

table.compare{min-width:640px;font-size:15.5px}
table.compare td,table.compare th{padding-right:22px}

.flow{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:fl}
.flow li{counter-increment:fl;border-top:3px solid var(--accent);padding:18px 4px 0 0}
.flow li::before{content:counter(fl,decimal-leading-zero);display:block;font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:8px}
.flow h3{margin-bottom:6px}
.flow p{font-size:15.5px;color:var(--ink-2);margin:0}
@media (max-width:900px){.flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.flow{grid-template-columns:minmax(0,1fr)}}

.reads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:26px}
.reads>article{border-top:1px solid var(--rule);padding:18px 0 8px}
.reads h3{margin-bottom:6px}
.reads p{font-size:16px;color:var(--ink-2);margin:0 0 8px}
@media (max-width:800px){.reads{grid-template-columns:minmax(0,1fr)}}

/* ── the phone pass, 2026-09-16 ─────────────────────────────────────────
   Seen on a phone: the wordmark and the Sign up button wrapped onto two lines,
   the ghost button rendered solid blue in the dark scheme (the dark .btn rule
   outranks .btn.ghost), desktop type and padding at 390px, and the captures
   shrunk to strips nobody can read. Each is fixed here, last in the file so
   it wins by order. */
:root:not(:has(#light:checked)):not(:has(#light:target)) .btn.ghost{background:transparent;color:#fff;border-color:#3b5064}
:root:not(:has(#light:checked)):not(:has(#light:target)) .btn.ghost:hover{background:transparent;border-color:#fff;color:#fff}
.mark span,header .btn,.theme-label,.navlinks a{white-space:nowrap}
@media (max-width:700px){
  .wrap{padding:0 18px}
  header .wrap{gap:12px;height:58px}
  .mark{font-size:1.35rem}
  .mark .mk{height:1.4em;margin-right:.3em}
  header .btn{padding:8px 12px;font-size:12px}
  .theme-label{padding:4px 8px;margin-right:0;font-size:12px}
  .menu[open] .navlinks{top:58px;padding:16px 18px 20px;gap:14px}
  .lead-in{padding:34px 0 36px}
  .lead-in h1,h1{font-size:2rem;line-height:1.1}
  h2{font-size:1.5rem;line-height:1.18;margin-bottom:14px}
  .feature h2{font-size:1.4rem}
  h3{font-size:1.05rem}
  .lead-in .sub{font-size:1.02rem;margin-top:14px}
  .lede{font-size:1.02rem}
  body{font-size:16px}
  p{margin-bottom:.9em}
  .kicker{font-size:12.5px;padding:3px 10px;margin-bottom:14px}
  section{padding:40px 0}
  .close{padding:46px 0}
  .actions{gap:10px;margin-top:20px}
  .actions .btn{flex:1 1 100%;text-align:center}
  .lead-in .split,.feature,.feature.flip{gap:20px}
  .caps{margin-top:20px;gap:12px}
  .caps li{padding:16px 16px 14px}
  .paths{margin-top:20px;gap:12px}
  .paths>*{padding:18px}
  /* a capture keeps a readable width and pans inside its own frame */
  .pane{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pane img{width:720px;max-width:none;display:block}
  .pane figcaption{font-size:13.5px;padding:10px 12px}
  .pad{margin-top:26px}
}