/* loupfeed.com — shared design system.
   One stylesheet behind the platform page and every product page. */

:root{
  --brand:#FFD23F; --brand-tint:#FFF7DB; --brand-deep:#a16207; --ink:#1A1A1A;
  --bg:#ffffff; --bg-warm:#FDFCFA; --mut:#6b7280; --ink-2:#3f3f46;
  --line:rgba(26,26,26,.08); --line-2:rgba(26,26,26,.14);
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --gap:20px;
  --mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'InterVariable',Inter,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- atoms ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;border-radius:var(--r-sm);padding:12px 20px;font-size:15px;transition:transform .12s ease, box-shadow .12s ease;cursor:pointer;border:0}
.btn:hover{transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{box-shadow:0 6px 18px rgba(26,26,26,.25)}
.btn-brand{background:var(--brand);color:var(--ink)}
.btn-brand:hover{box-shadow:0 6px 18px rgba(255,210,63,.5)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-onink{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--brand-tint);color:var(--ink);border:1px solid rgba(26,26,26,.12);border-radius:999px;padding:5px 13px;font-size:13px;font-weight:600}
.pill .dot{width:8px;height:8px;border-radius:99px;background:var(--brand);border:1px solid rgba(26,26,26,.4)}
.kicker{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-deep)}
h2{font-size:34px;letter-spacing:-1.2px;font-weight:800;margin-top:10px}
h3{letter-spacing:-.2px}
.lead{margin-top:12px;color:var(--ink-2);max-width:40rem;font-size:16.5px}
section{padding:76px 0}
.band{background:var(--bg-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ic{width:40px;height:40px;border-radius:11px;background:var(--brand-tint);border:1px solid rgba(26,26,26,.1);display:grid;place-items:center;flex:none}
.ic-sm{width:34px;height:34px;border-radius:9px}
.code{background:var(--ink);color:#e5e7eb;border-radius:var(--r-md);padding:20px 22px;font-family:var(--mono);font-size:13px;line-height:1.85;overflow-x:auto;box-shadow:0 14px 34px rgba(26,26,26,.18);white-space:pre}
.code .c{color:#9ca3af}.code .y{color:var(--brand)}.code .g{color:#4ade80}.code .r{color:#fca5a5}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:40px}
.split.top{align-items:start}
.cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.chip{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.plat{font-size:10.5px;font-weight:700;letter-spacing:.04em;border:1px solid var(--line-2);border-radius:999px;padding:3px 9px;color:var(--mut);background:#fff}
.plat.on{background:var(--brand-tint);color:var(--ink);border-color:rgba(26,26,26,.2)}
.mono{font-family:var(--mono)}
.src{display:inline-flex;gap:6px;align-items:center;font-family:var(--mono);font-size:11px;background:var(--brand-tint);border:1px solid rgba(26,26,26,.12);padding:4px 9px;border-radius:6px}

/* ---------- nav ---------- */
nav{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:50}
.nav-i{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-links{display:flex;gap:22px;font-size:14.5px;font-weight:500;color:var(--ink-2);align-items:center}
.nav-links a:hover{color:var(--ink)}
.nav-links a.here{color:var(--ink);font-weight:700}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.5px}
.logo .mark{width:32px;height:32px;border-radius:9px;background:var(--brand);display:grid;place-items:center}

/* ---------- hero ---------- */
header{padding:80px 0 52px;background:
    radial-gradient(900px 340px at 82% -10%, rgba(255,210,63,.32), transparent 70%),
    radial-gradient(620px 280px at 2% 6%, rgba(255,210,63,.13), transparent 70%)}
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
h1{font-size:52px;line-height:1.06;letter-spacing:-2px;font-weight:800;margin-top:18px}
h1 .hl{background:linear-gradient(transparent 62%, var(--brand) 62%)}
.sub{margin-top:20px;font-size:18.5px;color:var(--ink-2);max-width:34rem}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--mut)}
.hero-note code{font-family:var(--mono);background:#f4f4f5;padding:2px 7px;border-radius:6px;font-size:12.5px}
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mut);font-weight:600}
.crumb a:hover{color:var(--ink)}

/* ---------- mock chrome (browser + phone), shared by every page ---------- */
.browser{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 18px 46px rgba(26,26,26,.11);overflow:hidden}
.browser .bar{display:flex;gap:5px;padding:10px 13px;border-bottom:1px solid var(--line);align-items:center}
.browser .bar i{width:9px;height:9px;border-radius:99px;background:#e4e4e7;display:block}
.browser .bar span{font-size:11px;color:var(--mut);margin-left:8px;font-family:var(--mono)}
.browser .body{padding:16px}
.mockrow{height:10px;border-radius:5px;background:#f1f1f2;margin:9px 0}
.mockmask{height:10px;border-radius:5px;margin:9px 0;background:repeating-linear-gradient(115deg,#e6e6e9 0 7px,#f3f3f5 7px 14px)}
.mockbtn{display:inline-block;background:#3b82f6;color:#fff;border-radius:8px;padding:8px 15px;font-size:12px;font-weight:600;position:relative;margin-top:8px}
.mockbtn.anchored{box-shadow:0 0 0 3.5px var(--brand),0 0 0 5px rgba(26,26,26,.3)}
.pin{position:absolute;top:-12px;right:-12px;width:23px;height:23px;border-radius:99px;background:var(--brand);border:2.5px solid var(--ink);font-size:11.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 3px 8px rgba(26,26,26,.25)}
.pin.pulse{animation:pulse 3.6s ease-in-out infinite}
@keyframes pulse{0%,72%,100%{transform:scale(1)}80%{transform:scale(1.16)}}

.phone{width:150px;height:286px;background:#fff;border:7px solid var(--ink);border-radius:26px;box-shadow:0 22px 50px rgba(26,26,26,.22);overflow:hidden;position:relative;flex:none}
.phone .notch{height:16px;display:grid;place-items:center}
.phone .notch i{width:44px;height:5px;border-radius:99px;background:var(--ink);display:block}
.phone .body{padding:8px 10px}
.phone .prow{height:8px;border-radius:4px;background:#f1f1f2;margin:7px 0}
.phone .pmask{height:8px;border-radius:4px;margin:7px 0;background:repeating-linear-gradient(115deg,#e6e6e9 0 6px,#f3f3f5 6px 12px)}
.phone .ptile{height:38px;border-radius:8px;background:#f6f6f7;margin-top:9px;position:relative}
.phone .ptile.on{background:#fff;box-shadow:0 0 0 2.5px var(--brand),0 0 0 4px rgba(26,26,26,.3)}
.phone .pin{width:20px;height:20px;font-size:10.5px;top:-10px;right:-8px}
.phone .pbar{position:absolute;left:10px;right:10px;bottom:9px;background:var(--ink);color:#fff;font-size:8.5px;font-weight:700;border-radius:7px;padding:5px 8px;text-align:center}

/* ---------- generic card grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:40px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:40px}
.card-b{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:#fff}
.card-b h3{font-size:16px;margin-top:13px}
.card-b p{font-size:13.5px;color:var(--mut);margin-top:8px}
.card-b code,.prod code,.feature code,.lead code{font-family:var(--mono);font-size:12px;background:var(--brand-tint);padding:1px 6px;border-radius:5px}

/* bulleted lists inside cards — never flex, so inline <code> flows */
.blist{list-style:none;display:grid;gap:7px;font-size:13px;color:var(--ink-2);margin-top:14px}
.blist li{position:relative;padding-left:16px}
.blist li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:99px;background:var(--brand);border:1px solid rgba(26,26,26,.35)}

/* icon + text rows */
.points{display:grid;gap:18px;margin-top:26px}
.point{display:flex;gap:13px;align-items:flex-start}
.point h4{font-size:15px;margin-bottom:3px}
.point p{font-size:13.5px;color:var(--mut)}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:40px}
.step{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.step .n{width:30px;height:30px;border-radius:9px;background:var(--brand);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:14px;border:1.5px solid rgba(26,26,26,.35)}
.step h3{font-size:15.5px;margin:13px 0 6px}
.step p{font-size:13.5px;color:var(--mut)}

/* product cards (home + cross-links) */
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:40px}
.prod{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:#fff;display:flex;flex-direction:column;transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease}
.prod:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 12px 30px rgba(26,26,26,.07)}
.prod-h{display:flex;align-items:center;gap:13px}
.prod h3{font-size:18px}
.prod .tagline{font-size:14px;color:var(--mut);margin-top:12px}
.prod .more{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.prod .more .arw{transition:transform .15s ease}
.prod:hover .more .arw{transform:translateX(3px)}
.platforms{display:flex;gap:6px;margin-left:auto}

/* compact cross-link row at the bottom of product pages */
.xlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:36px}
.xlink{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:#fff;transition:border-color .15s ease,transform .15s ease}
.xlink:hover{border-color:var(--line-2);transform:translateY(-2px)}
.xlink h3{font-size:15px;margin-top:11px}
.xlink p{font-size:13px;color:var(--mut);margin-top:6px}
.xlink .go{margin-top:12px;font-size:13px;font-weight:700}

/* spec table */
.spec{width:100%;border-collapse:collapse;margin-top:26px;font-size:13.5px}
.spec th,.spec td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:800}
.spec td:first-child{font-weight:700;white-space:nowrap}
.spec td code{font-family:var(--mono);font-size:12px;background:var(--brand-tint);padding:1px 6px;border-radius:5px}
.spec-scroll{overflow-x:auto}

/* closing band + footer */
.close-band{background:var(--ink);border-radius:22px;padding:52px 44px;color:#fff;display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.close-band h2{margin-top:0;font-size:32px}
.close-band p{color:#d4d4d8;margin-top:12px;font-size:15.5px}
.close-band .cta{margin-top:0;justify-content:flex-end}
footer{background:var(--ink);color:#a1a1aa;padding:44px 0;font-size:13.5px;margin-top:76px}
.f-i{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .logo{color:#fff}
footer a:hover{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:900px){
  header{padding-top:56px}
  .hero{grid-template-columns:1fr;gap:44px}
  h1{font-size:38px}
  h2{font-size:28px}
  .prods,.grid-2,.grid-3,.split,.xlinks{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .close-band{grid-template-columns:1fr;padding:36px 26px}
  .close-band .cta{justify-content:flex-start}
  .nav-links a:not(.btn){display:none}
}
@media (max-width:560px){
  .prod-h{flex-wrap:wrap}
  .prod-h h3{flex:1 1 auto}
  .platforms{margin-left:0;order:3;flex-basis:100%;margin-top:6px}
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- product previews on the home page ----------
   Each product card leads with a small live mock instead of a wall of text,
   so the four lines are scannable before a word is read. */
.pv{position:relative;height:138px;border:1px solid var(--line);border-radius:12px;
    background:var(--bg-warm);overflow:hidden;padding:13px;margin-bottom:20px}
.pv .r{height:8px;border-radius:4px;background:#ececed;margin:7px 0}
.pv .m{height:8px;border-radius:4px;margin:7px 0;
       background:repeating-linear-gradient(115deg,#e2e2e5 0 6px,#f0f0f2 6px 12px)}
.pv .btn-mock{display:inline-block;background:#3b82f6;color:#fff;border-radius:7px;
              padding:6px 12px;font-size:11px;font-weight:600;position:relative;margin-top:10px;
              box-shadow:0 0 0 3px var(--brand),0 0 0 4.5px rgba(26,26,26,.3)}
.pv .pin-mock{position:absolute;top:-10px;right:-10px;width:20px;height:20px;border-radius:99px;
              background:var(--brand);border:2px solid var(--ink);font-size:10.5px;font-weight:800;
              display:grid;place-items:center;box-shadow:0 2px 6px rgba(26,26,26,.25)}
.pv .bubble{position:absolute;right:13px;top:34px;width:132px;background:#fff;
            border:1.5px solid rgba(26,26,26,.16);border-radius:9px;padding:8px;
            box-shadow:0 10px 24px rgba(26,26,26,.18);font-size:10px;color:var(--ink-2);line-height:1.4}
/* replay */
.pv .track-mock{height:6px;border-radius:3px;background:#ececed;overflow:hidden;margin-top:12px}
.pv .track-mock i{display:block;height:100%;width:58%;background:var(--brand);border-right:2px solid var(--ink)}
.pv .ev{font-size:10px;color:var(--mut);margin-top:9px;display:flex;gap:8px}
.pv .ev b{font-family:var(--mono);font-size:9.5px;color:var(--ink-2)}
/* crashes */
.pv .err{display:inline-flex;align-items:center;gap:6px;background:#FEE2E2;border:1px solid #FCA5A5;
         color:#B91C1C;font-size:9.5px;font-weight:800;border-radius:999px;padding:2px 8px}
.pv .fr{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:9.5px;
        padding:5px 8px;border-radius:5px;color:var(--mut);margin-top:5px;background:#fff;border:1px solid var(--line)}
.pv .fr.hot{background:var(--brand-tint);color:var(--ink);font-weight:700;border-color:rgba(26,26,26,.14)}
/* demos */
.pv .stage-mock{position:absolute;inset:13px;border-radius:9px;background:#fff;border:1px solid var(--line);overflow:hidden}
.pv .stage-mock .top{height:16px;border-bottom:1px solid var(--line);display:flex;gap:5px;align-items:center;padding:0 8px}
.pv .stage-mock .top i{height:4px;width:20px;border-radius:2px;background:#e9e9eb;display:block}
.pv .tile{position:absolute;left:12px;top:30px;width:62px;height:36px;border-radius:6px;background:#f6f6f7}
.pv .tile.b{left:82px}
.pv .go-mock{position:absolute;right:12px;bottom:12px;background:var(--ink);color:#fff;font-size:9px;
             font-weight:700;border-radius:5px;padding:4px 9px}
/* tip lands inside the button, body trails off it — otherwise the cursor
   sits across the label and reads as a rendering glitch. */
.pv .cur{position:absolute;right:14px;bottom:2px;width:13px;height:13px}

/* the scannable strip directly under the hero */
.strip-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:44px}
.s4{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;
    padding:12px 14px;background:#fff;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.s4:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(26,26,26,.07)}
.s4 .ic{width:30px;height:30px;border-radius:8px}
.s4 b{font-size:13.5px;display:block;letter-spacing:-.2px}
.s4 span{font-size:11.5px;color:var(--mut)}
@media (max-width:900px){
  .strip-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .strip-4{grid-template-columns:1fr}
}


/* ——————————————————————————————————————————————————————————————
 THE PALETTE — dark, site-wide.
 Lives here rather than in each page because the last time it was
 per-page it drifted: a page that missed a rule shipped white text on a
 white panel. One definition, and the contrast audit checks every page
 against it.
 Contrast ratios are matched to the light original rather than inverted,
 surfaces sit one step above the background and are defined by an inset
 ring, and nothing carries a shadow — a shadow on a dark ground reads as
 dirt.
 —————————————————————————————————————————————————————————————— */
:root{
  color-scheme:dark;
  --brand:#FFD23F; --brand-tint:rgba(255,210,63,.12); --brand-deep:#FCD34D;
  --ink:#FAFAFA; --ink-2:#D4D4D8; --mut:#A1A1AA;
  --bg:#0B0B0C; --bg-warm:#0F0F11; --surface:#141417; --surface-2:#1B1B1F;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
}
body{background:var(--bg);color:var(--ink)}
nav{background:rgba(11,11,12,.82);border-bottom-color:var(--line)}
.logo{color:var(--ink)}
.nav-links a:not(.btn){color:var(--mut)}
.nav-links a:not(.btn):hover,.nav-links a.here{color:var(--ink)}
.btn-ink{background:var(--ink);color:#141417}
.btn-ghost{color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}
header{background:var(--bg)}
section{background:var(--bg)}
section.band{background:var(--bg-warm)}
h1,h2,h3{color:var(--ink)}
.hl{background:linear-gradient(transparent 62%,rgba(255,210,63,.28) 0)}
.crumb,.crumb a{color:var(--mut)}
.lead{color:var(--ink-2)}
code,.mono{color:var(--ink-2)}

/* Surfaces sit one step above the page and are defined by a ring, never a shadow. */
.card-b,.chip,.plat,.browser,.phone,.maprow,.code{
  background:var(--surface);border-color:var(--line);box-shadow:none}
.card-b{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.chip,.plat{color:var(--ink-2)}
.browser{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.phone{border-color:#27272A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.phone .ptile{background:var(--surface-2)}
.phone .ptile.on{background:var(--surface-2);box-shadow:0 0 0 2.5px var(--brand)}
.phone .pbar{background:var(--ink);color:#141417}
.mockbtn{background:#2563eb;color:#fff}
.blist li::before{color:var(--brand)}
hr,.divider{border-color:var(--line)}
footer{background:var(--bg);border-top-color:var(--line)}
.kicker{color:var(--brand-deep)}
.demo-view{position:relative;height:196px;border:1px solid var(--line);border-radius:10px;background:var(--bg-warm);overflow:hidden}
.demo-nav{height:26px;border-bottom:1px solid var(--line);display:flex;gap:7px;align-items:center;padding:0 12px}
.demo-nav i{height:6px;width:30px;border-radius:3px;background:#3F3F46;display:block}
.demo-card{position:absolute;left:18px;top:52px;width:112px;height:64px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line)}
.demo-card.b{left:146px}
.demo-cta{position:absolute;right:18px;bottom:20px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;border-radius:7px;padding:7px 13px}
.cursor{position:absolute;left:30px;top:70px;width:17px;height:17px;z-index:4;animation:travel 9s ease-in-out infinite}
.ripple{position:absolute;width:30px;height:30px;border-radius:99px;border:2px solid var(--brand);opacity:0;right:22px;bottom:14px;animation:ripple 9s infinite}
@keyframes travel{
  0%,6%{transform:translate(0,0)}
  22%{transform:translate(120px,-18px)}
  32%{transform:translate(96px,44px)}
  48%,62%{transform:translate(232px,74px)}
  100%{transform:translate(232px,74px)}
}
@keyframes ripple{0%,46%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.6)}}
/* ——— the two traps this palette sets ———
   1. --ink is now near-white, so anywhere it was a FOREGROUND on brand or on
      ink the meaning inverts: a yellow button with `color:var(--ink)` becomes
      white-on-yellow. Those places need an explicit dark value.
   2. Several components hardcode `background:#fff` and would otherwise stay
      white while inheriting light text.
   Both are corrected below, and both were found by measuring contrast on the
   rendered page rather than by looking at it. */

/* Surfaces that were hardcoded white. */
.chip,.plat,.browser,.phone,.card-b,.prod,.xlink,.s4,
.pv .bubble,.pv .fr,.pv .stage-mock,.maplist,.trait,.code{
  background:var(--surface);border-color:var(--line);box-shadow:none;color:var(--ink-2)}
.card-b,.prod,.xlink,.s4{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.prod:hover,.xlink:hover,.s4:hover{box-shadow:inset 0 0 0 1px rgba(255,210,63,.35)}
.phone .ptile{background:var(--surface-2)}
.phone .ptile.on{background:var(--surface-2);box-shadow:0 0 0 2.5px var(--brand)}
.phone .pbar{background:var(--brand);color:#141417}
.pv .bubble{color:var(--ink-2)}
.pv .fr.hot{background:var(--brand-tint);color:var(--ink)}

/* Headings and links on those surfaces. */
.prod h3,.xlink h3,.card-b h3,.s4 h3{color:var(--ink)}
.prod .tagline,.xlink p,.card-b p,.trait p{color:var(--ink-2)}
.prod .more,.xlink .go,.go{color:var(--brand-deep)}

/* --ink as a foreground: needs an explicit dark value, not the token. */
.btn-brand{background:var(--brand);color:#141417}
.btn-brand:hover{box-shadow:none}
.btn-ink{background:var(--ink);color:#141417}
.btn-onink{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.demo-cta{background:var(--brand);color:#141417}
.mockbtn{background:#2563eb;color:#fff}

/* The closing band was `background:var(--ink); color:#fff` — a white panel
   with white text once the token flipped. */
.close-band{background:var(--surface);color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.close-band h2{color:var(--ink)}
.close-band p{color:var(--ink-2)}

/* Inline code sat on a brand tint with light-theme ink. */
.card-b code,.prod code,.feature code,.lead code,.blist code{
  background:var(--brand-tint);color:var(--ink)}

/* Icons were stroked with the light theme's ink on a dark tint. */
.ic{background:var(--brand-tint);border-color:var(--line);color:var(--ink)}

/* ——— stragglers the audit caught on the home page ——— */
/* `.go-mock` was ink-on-white; ink is now the light colour, so it needs the
   brand as its ground and a dark label. */
.pv .go-mock{background:var(--brand);color:#141417}
/* A blue mock button needs a darker blue to carry white text on dark. */
.pv .btn-mock{background:#1d4ed8;color:#fff}
/* The install snippet sat on a light-theme grey. */
.hero-note code{background:var(--surface-2);color:var(--ink-2)}
/* `.code` blocks were `background:var(--ink)` — the light token now. */
.code{background:var(--surface);color:var(--ink-2)}

/* Remaining `background:var(--ink)` survivors — the token is the light text
   colour now, so anything using it as a ground has to say what it means. */
.phone .notch i{background:#3F3F46}
footer{background:var(--bg-warm);color:var(--mut);border-top:1px solid var(--line)}
.pv .warn,.badge-err{background:rgba(248,113,113,.16);border-color:rgba(248,113,113,.4);color:#FCA5A5}