/* slopmop.lol — site layer on top of the Slop Mop design system (_ds/slopmop).
   Tokens only: no raw colours, no gradients, no glows. Sections separate by hairline and space. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-card); color: var(--text-body); font: var(--type-body); }
img, svg, video { max-width: 100%; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--surface-card); padding: 8px 12px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--space-8); }
.measure { max-width: var(--site-measure); }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font: var(--type-mono); color: var(--text-faint); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: var(--type-mono-label); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: lowercase; color: var(--text-faint); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mop-500); }
.muted { color: var(--text-muted); }

/* ---------- type ---------- */
.h-hero { margin: 0; font: var(--weight-bold) clamp(40px, 6.4vw, 76px)/1.04 var(--font-display); letter-spacing: -0.02em; }
.h-1 { margin: 0; font: var(--weight-bold) clamp(32px, 4.4vw, 52px)/1.08 var(--font-display); letter-spacing: -0.015em; }
.h-2 { margin: 0; font: var(--weight-bold) clamp(26px, 3vw, 36px)/1.15 var(--font-display); letter-spacing: var(--tracking-tight); }
.h-3 { margin: 0; font: var(--weight-semibold) var(--text-lg)/1.3 var(--font-display); }
.lede { margin: 0; font: var(--weight-regular) var(--text-lg)/1.55 var(--font-body); color: var(--text-muted); text-wrap: pretty; }
.prose p, .prose li { color: var(--text-muted); text-wrap: pretty; }
.prose h2 { font: var(--type-title); margin: var(--space-10) 0 var(--space-5); color: var(--text-body); }
.prose h3 { font: var(--weight-semibold) var(--text-lg)/1.3 var(--font-display); margin: var(--space-9) 0 var(--space-4); color: var(--text-body); }
.prose strong { color: var(--text-body); font-weight: var(--weight-semibold); }

/* ---------- buttons & badges ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 var(--space-7);
  border-radius: var(--radius-sm); border: 1px solid transparent; font: var(--weight-semibold) var(--text-md)/1 var(--font-body);
  cursor: pointer; text-decoration: none !important; transition: var(--transition-ui); white-space: nowrap; }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.btn-sm { height: 36px; padding: 0 var(--space-6); font-size: var(--text-sm); }
.btn-primary { background: var(--mop-500); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--mop-300); }
.btn-solid { background: var(--surface-inverse); color: var(--text-inverse); }
.btn-solid:hover { background: var(--ink-800); }
.btn-secondary { background: var(--surface-card); color: var(--text-body); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--paper-100); }
.btn:active { box-shadow: var(--shadow-inset-crease); }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--radius-xs);
  font: var(--type-mono-label); font-size: var(--text-3xs); letter-spacing: var(--tracking-wide); white-space: nowrap; border: 1px solid; }
.badge-live { background: var(--blue-100); color: var(--blue-700); border-color: var(--blue-200); }
.badge-soon { background: var(--flag-unsure-wash); color: var(--ink-700); border-color: var(--border-default); }
.badge-paid { background: var(--mop-100); color: var(--mop-900); border-color: var(--mop-500); }

/* ---------- announcement bar & nav ---------- */
.ph-bar { display: block; background: var(--surface-inverse); color: var(--text-inverse); text-align: center; padding: 9px var(--space-6); font: var(--type-ui); }
.ph-bar:hover { text-decoration: none; background: var(--ink-800); }
.ph-bar b { color: var(--mop-300); font-weight: var(--weight-semibold); }
.nav { position: sticky; top: 0; z-index: 50; background: var(--surface-card); border-bottom: 1px solid var(--border-hairline); }
.nav .wrap { display: flex; align-items: center; gap: var(--space-8); height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text-body); font: var(--weight-semibold) 20px/1 var(--font-display); letter-spacing: var(--tracking-tight); text-decoration: none !important; }
.brand img { width: 23px; height: 23px; }
.brand .dot { font: var(--type-mono); color: var(--text-faint); margin-left: -4px; }
.nav-links { display: flex; gap: var(--space-7); margin-left: auto; }
.nav-links a { color: var(--text-muted); font: var(--type-ui); font-size: 14px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text-body); text-decoration: none; }
.nav-cta { margin-left: var(--space-2); }
.nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card); cursor: pointer; }
.nav-toggle span { display: block; width: 16px; height: 2px; margin: 3px auto; background: var(--text-body); }
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links, .nav-cta { display: none; }
  .nav.open .nav-links { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; gap: 0; background: var(--surface-card); border-bottom: 1px solid var(--border-hairline); padding: var(--space-4) var(--space-8) var(--space-6); }
  .nav.open .nav-links a { padding: 10px 0; font-size: var(--text-md); }
  .nav.open .nav-cta { display: inline-flex; position: absolute; top: 12px; right: 72px; }
}

/* ---------- sections ---------- */
.section { padding: var(--space-13) 0; border-top: 1px solid var(--border-hairline); }
.section.flush { border-top: 0; }
.section-head { display: grid; gap: var(--space-6); margin-bottom: var(--space-11); }
.section-head.center { justify-items: center; text-align: center; }
.section-head.center .lede { max-width: 60ch; }
.sunken { background: var(--surface-page); }
@media (max-width: 640px) { .section { padding: var(--space-12) 0; } .wrap { padding: 0 var(--space-6); } .section-head { margin-bottom: var(--space-9); } }

/* ---------- hero ---------- */
.hero { padding: var(--space-13) 0 0; text-align: center; overflow: hidden; }
.hero .h-hero { text-wrap: balance; }
.hero .h-hero .hl { box-shadow: inset 0 -0.2em 0 var(--mop-300); }
.h-sub { margin: var(--space-6) 0 0; font: var(--weight-semibold) clamp(22px, 3vw, 36px)/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--text-body); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 0.28em; }
.net-word { display: inline-flex; align-items: center; gap: 0.18em; color: var(--text-body); }
.net-word .net-logo { width: 0.82em; height: 0.82em; display: inline-grid; place-items: center; border-radius: var(--radius-lg); background: var(--surface-inverse); padding: 0.14em; }
.net-word .net-logo img { width: 100%; height: 100%; filter: invert(1); }
.net-word .stop { margin-left: -0.18em; }
.net-word .word { display: inline-block; transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.net-word.swap .word, .net-word.swap .net-logo { opacity: 0; transform: translateY(8px); }
.net-word .net-logo { transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.hero .lede { max-width: 56ch; margin: var(--space-8) auto 0; text-wrap: balance; }
.hero-tag { margin: var(--space-5) auto 0; font: var(--type-body); color: var(--text-body); }
.hero-tag strong { font-weight: var(--weight-semibold); }
.hero-ctas { display: flex; gap: var(--space-5); justify-content: center; flex-wrap: wrap; margin-top: var(--space-9); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-9); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 var(--space-5) 0 var(--space-4); border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); font: var(--type-ui); cursor: pointer; transition: var(--transition-ui); }
.chip img { width: 16px; height: 16px; }
.chip:hover { background: var(--paper-100); }
.chip[aria-pressed="true"] { border-color: var(--text-body); box-shadow: 0 0 0 1px var(--text-body); }
.chip .badge { height: 18px; }
.hero-meta { margin-top: var(--space-6); }
.stack { position: relative; max-width: 1080px; margin: var(--space-11) auto 0; padding-top: 44px; min-height: 560px; text-align: left; }
.stack-pause { position: absolute; right: 0; top: 0; }

/* browser windows in the hero stack */
.win { position: absolute; left: 0; right: 0; top: 44px; margin: 0 auto; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); overflow: hidden; transition: transform var(--dur-slow) var(--ease-standard), top var(--dur-slow) var(--ease-standard); }
.win.back-1 { transform: scale(0.95); top: 22px; z-index: 1; }
.win.back-2 { transform: scale(0.9); top: 0; z-index: 0; }
.win.front { position: relative; z-index: 2; }
.win-bar { display: flex; align-items: center; gap: var(--space-5); height: 40px; padding: 0 var(--space-6); border-bottom: 1px solid var(--border-hairline); background: var(--surface-page); }
.win-dots { display: flex; gap: 6px; } .win-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-200); }
.win-url { flex: 1; max-width: 420px; margin: 0 auto; height: 24px; border-radius: var(--radius-sm); background: var(--surface-card); border: 1px solid var(--border-hairline); font: var(--type-mono); display: flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--text-faint); }
.win-url img { width: 12px; height: 12px; opacity: .6; }
.win-ext { display: flex; align-items: center; gap: 6px; }
.win-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); padding: var(--space-8); background: var(--mini-feed); height: 620px; overflow: hidden; align-items: start; }
.win-feed { display: grid; gap: var(--space-5); align-content: start; }
.win-bar .badge { margin-left: auto; }
.win-bar .badge + .win-ext { margin-left: 0; }
@media (max-width: 900px) {
  .win-body { grid-template-columns: 1fr; }
  .win-body .win-panel { display: none; }
  .win-body { height: auto; max-height: 560px; }
  .stack { min-height: 0; }
}

/* generic mock post (per-network skins below) */
.post { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-card); }
.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--paper-300); display: grid; place-items: center; font: var(--weight-semibold) 13px/1 var(--font-body); color: var(--ink-600); flex: 0 0 auto; }
.post-who { display: grid; gap: 1px; min-width: 0; }
.post-name { font: var(--weight-semibold) 14px/1.25 var(--font-body); color: var(--text-body); }
.post-meta { font: var(--weight-regular) 12px/1.3 var(--font-body); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--text-faint); }
.post-body { font: var(--weight-regular) 14px/1.5 var(--font-body); color: var(--text-body); white-space: pre-line; }
.post-title { font: var(--weight-semibold) 17px/1.3 var(--font-body); margin: 0 0 6px; }
.post-foot { display: flex; gap: var(--space-6); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-hairline); font: var(--weight-regular) 12px/1 var(--font-body); color: var(--text-faint); }
.post.x .avatar, .post.reddit .avatar { width: 36px; height: 36px; }
.post.reddit { border-radius: var(--radius-lg); }
.post.reddit .vote { display: flex; flex-direction: column; align-items: center; gap: 2px; font: var(--weight-semibold) 12px/1 var(--font-body); color: var(--text-muted); }
.post.article { padding: var(--space-8); }
.post.article .kicker { font: var(--type-mono-label); letter-spacing: var(--tracking-caps); color: var(--text-faint); text-transform: uppercase; margin-bottom: 8px; }
.post.article .post-title { font: var(--weight-bold) 26px/1.2 Georgia, "Times New Roman", serif; }
.post.article .post-body { font: var(--weight-regular) 16px/1.65 Georgia, "Times New Roman", serif; color: var(--ink-700); }
.byline { display: flex; align-items: center; gap: 10px; margin: 12px 0 16px; font: var(--weight-regular) 13px/1 var(--font-body); color: var(--text-faint); }
.byline .avatar { width: 28px; height: 28px; font-size: 11px; }
.vchip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--radius-xs); border: 1px solid; font: var(--weight-medium) 12px/1 var(--font-body); margin-left: auto; }
.vchip.red { background: var(--red-100); color: var(--red-700); border-color: var(--red-500); }
.vchip.yellow { background: var(--mop-100); color: var(--mop-900); border-color: var(--mop-500); }
.vchip.blue { background: var(--blue-100); color: var(--blue-700); border-color: var(--blue-200); }
.vchip b { font: var(--weight-medium) 11px/1 var(--font-mono); }
.rowlist { display: grid; }
.rowlist .row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-hairline); font: var(--weight-semibold) 15px/1.35 Georgia, serif; }
.rowlist .thumb { width: 56px; height: 40px; border-radius: var(--radius-xs); background: var(--paper-300); flex: 0 0 auto; }
.rowlist .row > :last-child { margin-left: auto; }
.dim { opacity: .45; }

/* ---------- founder quote ---------- */
.quote { padding: var(--space-13) 0; border-top: 1px solid var(--border-hairline); }
.quote blockquote { margin: 0; font: var(--weight-semibold) clamp(24px, 3vw, 36px)/1.3 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--text-body); text-wrap: pretty; }
.quote blockquote .lead-in { color: var(--text-body); }
.quote blockquote .rest { color: var(--ink-500); }
.quote-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-10); }
.who { display: flex; align-items: center; gap: var(--space-5); }
.who img { width: 48px; height: 48px; border-radius: 50%; background: var(--paper-200); }
.who b { display: block; font: var(--weight-semibold) var(--text-md)/1.3 var(--font-body); }
.who span { font: var(--type-body-sm); color: var(--text-faint); }

/* ---------- problem + asset carousel ---------- */
.problem-title { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.3em; }
.logo-cluster { display: inline-flex; align-items: center; }
.logo-cluster span { width: 1.05em; height: 1.05em; border-radius: 30%; background: var(--surface-card); border: 1px solid var(--border-default); display: grid; place-items: center; margin-left: -0.28em; box-shadow: var(--shadow-card); }
.logo-cluster span:first-child { margin-left: 0; }
.logo-cluster img { width: 55%; height: 55%; }
.problem-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-11); align-items: end; }
.problem-points { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.problem-points li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-4); color: var(--text-muted); }
.problem-points b { color: var(--text-body); font-weight: var(--weight-semibold); }
.problem-points .n { font: var(--type-mono); color: var(--text-faint); padding-top: 2px; }
.turn { margin-top: var(--space-9); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.turn p { margin: 0; font: var(--weight-semibold) var(--text-lg)/1.3 var(--font-display); }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; gap: var(--space-9); } }

.marquee { position: relative; margin-top: var(--space-9); overflow: hidden; }
.marquee-track { display: flex; gap: var(--space-6); width: max-content; padding: var(--space-2) var(--space-8) var(--space-6); will-change: transform; }
.marquee-nav { position: absolute; top: 130px; z-index: 3; box-shadow: var(--shadow-raised); opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.marquee-nav.prev { left: var(--space-8); } .marquee-nav.next { right: var(--space-8); }
.marquee:hover .marquee-nav, .marquee:focus-within .marquee-nav { opacity: 1; }
@media (hover: none) { .marquee-nav { opacity: 1; } }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-default); background: var(--surface-card); display: inline-grid; place-items: center; cursor: pointer; color: var(--text-body); transition: var(--transition-ui); flex: 0 0 auto; }
.icon-btn:hover { background: var(--paper-100); }
.icon-btn svg { width: 16px; height: 16px; }
.asset { width: 380px; flex: 0 0 auto; scroll-snap-align: start; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.asset-stage { height: 260px; background: var(--surface-page); border-bottom: 1px solid var(--border-hairline); display: grid; place-items: center; padding: var(--space-6); overflow: hidden; }
.asset-stage > [data-island] { width: 100%; display: grid; place-items: center; }
.asset-text { padding: var(--space-6) var(--space-7) var(--space-7); display: grid; gap: 4px; }
.asset-text b { font: var(--type-heading); font-size: var(--text-md); }
.asset-text span { font: var(--type-body-sm); color: var(--text-muted); }
.asset-text .mono { margin-top: 6px; font-size: var(--text-3xs); }
@media (max-width: 640px) { .asset { width: 300px; } .asset-stage { height: 230px; } }

/* ---------- the nine tells (dark) ---------- */
.dark { background: var(--surface-page); color: var(--text-body); border-top: 0; }
.dark .lede, .dark .muted { color: var(--text-muted); }
.tells { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--space-11); align-items: start; }
.tell-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.tell-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; color: var(--text-body); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 6px 16px 6px 6px; font: var(--type-ui); font-size: 14px; cursor: pointer; transition: var(--transition-ui); }
.tell-btn:hover { background: var(--surface-card); }
.tell-btn .plus { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-default); display: grid; place-items: center; font: var(--type-mono); color: var(--text-muted); flex: 0 0 auto; }
.tell-btn .code { margin-left: auto; font: var(--type-mono-label); color: var(--text-faint); }
.tell-item.open .tell-btn { display: none; }
.tell-open { display: none; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: var(--shadow-raised); }
.tell-item.open .tell-open { display: grid; gap: 8px; }
.tell-open b { font: var(--type-heading); font-size: var(--text-lg); }
.tell-open p { margin: 0; color: var(--text-muted); font: var(--type-body-sm); }
.tell-open .ex { font: var(--type-mono); color: var(--text-faint); }
.tell-stage { position: sticky; top: 96px; display: grid; gap: var(--space-6); }
.tell-card { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-raised); }
.tell-card-top { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 0; }
.tell-sample { padding: var(--space-8); border-right: 1px solid var(--border-hairline); display: grid; gap: var(--space-6); align-content: start; }
.tell-sample .post { background: var(--surface-card); }
.tell-sample mark { background: var(--mop-200); color: var(--ink-900); border-radius: 2px; padding: 0 2px; }
.tell-print { padding: var(--space-6); display: grid; place-items: center; }
.tell-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-5) var(--space-8); border-top: 1px solid var(--border-hairline); background: var(--surface-raised-foot); }
.tell-nav { display: flex; gap: var(--space-4); }
.dark .icon-btn { background: var(--surface-card); color: var(--text-body); }
.tell-mob { display: none; }
@media (max-width: 980px) {
  .tells .tell-list, .tells .tell-card-head { display: none; }
  .tell-stage { gap: var(--space-5); }
  .tell-mob { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: var(--space-4); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-raised); }
  .tell-mob .icon-btn { width: 40px; height: 40px; }
  .tell-mob-text { display: grid; gap: 4px; text-align: center; min-height: 112px; align-content: center; }
  .tell-mob-text .mono { color: var(--text-faint); font: var(--type-mono-label); }
  .tell-mob-text b { font: var(--type-heading); font-size: var(--text-lg); }
  .tell-mob-text p { margin: 0; color: var(--text-muted); font: var(--type-body-sm); }
  /* post across the top; verdict and a small Slopprint side by side under it */
  .tells .tell-card-top { grid-template-columns: minmax(0, 1fr) 112px; gap: var(--space-5); padding: var(--space-6); align-items: center; }
  .tells .tell-sample { display: contents; }
  .tells .tell-sample .post { grid-column: 1 / -1; }
  .tells .tell-verdict { display: grid; justify-items: start; gap: 6px; }
  .tells .tell-print { padding: 0; }
  .tells .tell-print svg { width: 112px; height: auto; }
  .tells .tell-print svg text { display: none; }
}
@media (max-width: 980px) { .tells { grid-template-columns: 1fr; } .tell-stage { position: static; } .tell-card-top { grid-template-columns: 1fr; } .tell-sample { border-right: 0; border-bottom: 1px solid var(--border-hairline); } }

/* ---------- counter-signals ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.card { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-8); display: grid; gap: var(--space-5); align-content: start; }
.card h3 { margin: 0; font: var(--type-heading); font-size: var(--text-lg); }
.card p { margin: 0; color: var(--text-muted); font: var(--type-body-sm); font-size: 14px; }
.bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--blue-500); border-radius: 3px; }
.bar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); font: var(--type-ui); }
.bar-row .mono { font-size: var(--text-3xs); }
@media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; } }

/* ---------- process flow ---------- */
.flow { position: relative; display: grid; gap: var(--space-12); padding: var(--space-6) 0; }
.flow-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow-path path { fill: none; stroke: var(--border-default); stroke-width: 2; }
.flow-path path.drawn { stroke: var(--blue-500); }
.flow-step { position: relative; z-index: 1; width: min(520px, 100%); display: grid; gap: var(--space-5); }
.flow-step:nth-child(odd of .flow-step) { justify-self: start; }
.flow-step:nth-child(even of .flow-step) { justify-self: end; }
.flow-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); overflow: hidden;
  opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.flow-step.in .flow-card { opacity: 1; transform: none; }
.flow-card-head { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--border-hairline); }
.flow-num { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-inverse); color: var(--text-inverse); display: grid; place-items: center; font: var(--weight-medium) 12px/1 var(--font-mono); flex: 0 0 auto; }
.flow-card-head b { display: block; font: var(--type-heading); font-size: var(--text-lg); }
.flow-card-head p { margin: 2px 0 0; color: var(--text-muted); font: var(--type-body-sm); font-size: 14px; }
.flow-card-head .badge { margin-left: auto; }
.flow-visual { padding: var(--space-7); background: var(--surface-page); display: grid; gap: var(--space-4); }
.flow-node { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-card); border: 2px solid var(--border-strong); top: 26px; z-index: 2; }
.flow-step:nth-child(odd of .flow-step) .flow-node { right: -7px; }
.flow-step:nth-child(even of .flow-step) .flow-node { left: -7px; }
.flow-step.in .flow-node { border-color: var(--blue-500); }
.weights { display: grid; gap: 6px; }
.weights div { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; font: var(--type-label); color: var(--text-muted); }
.weights .bar i { background: var(--mop-500); }
.weights .bar.counter i { background: var(--blue-500); }
.mini-feed { display: grid; gap: 6px; }
.mini-feed .mp { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); font: var(--type-label); color: var(--text-muted); }
.mini-feed .mp .ln { flex: 1; height: 6px; border-radius: 3px; background: var(--paper-300); }
.mini-feed .mp .mono { font-size: var(--text-3xs); }
.viewport-line { display: flex; align-items: center; gap: 8px; font: var(--type-mono-label); color: var(--blue-700); }
.viewport-line::before, .viewport-line::after { content: ""; flex: 1; border-top: 1px dashed var(--blue-500); }
@media (max-width: 900px) { .flow-step { width: 100%; justify-self: stretch !important; } .flow-path, .flow-node { display: none; } .flow { gap: var(--space-8); } }
@media (prefers-reduced-motion: reduce) { .flow-card { opacity: 1; transform: none; transition: none; } }

/* ---------- integrations ---------- */
.integrations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.int-group { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); background: var(--surface-card); padding: var(--space-6); display: grid; gap: var(--space-4); align-content: start; box-shadow: var(--shadow-card); }
.int-group h3 { margin: 0 0 var(--space-2); font: var(--type-mono-label); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); color: var(--text-faint); text-transform: lowercase; }
.int { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) 0; }
.int + .int { border-top: 1px solid var(--border-hairline); }
.int .lg { width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--border-hairline); background: var(--surface-page); display: grid; place-items: center; flex: 0 0 auto; }
.int .lg img { width: 20px; height: 20px; }
.int .lg .glyph { font: var(--weight-bold) 15px/1 var(--font-display); color: var(--ink-700); }
.int span.nm { font: var(--type-ui); font-size: 14px; }
.int .badge { margin-left: auto; }
.int.soon .lg img { opacity: .55; }
@media (max-width: 980px) { .integrations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .integrations { grid-template-columns: 1fr; } }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); max-width: 900px; margin: 0 auto; }
.plan { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); padding: var(--space-9); display: grid; gap: var(--space-6); align-content: start; box-shadow: var(--shadow-card); }
.plan.featured { border-color: var(--text-body); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.plan-name { display: flex; align-items: center; gap: 8px; font: var(--weight-semibold) var(--text-xl)/1.2 var(--font-display); }
.plan-name img { width: 24px; height: 24px; }
.plan-price { font: var(--weight-bold) var(--text-4xl)/1 var(--font-display); letter-spacing: var(--tracking-tight); }
.plan-price small { font: var(--type-body-sm); color: var(--text-faint); margin-left: 6px; letter-spacing: 0; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font: var(--type-body-sm); font-size: 14px; color: var(--text-muted); }
.plan li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--blue-500); }
.plan .btn { width: 100%; }
.plan-alt { margin: calc(var(--space-4) * -1) 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: var(--type-body-sm); color: var(--text-muted); }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--border-hairline); }
.faq details { border-bottom: 1px solid var(--border-hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-7) 0; font: var(--weight-semibold) var(--text-lg)/1.35 var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: var(--type-mono); font-size: 18px; color: var(--text-faint); transition: transform var(--dur-fast) var(--ease-standard); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 var(--space-7); display: grid; gap: var(--space-5); max-width: 68ch; }
.faq .a p { margin: 0; color: var(--text-muted); }

/* ---------- closing band ---------- */
.band { padding: var(--space-13) 0 var(--space-12); border-top: 1px solid var(--border-hairline); overflow: hidden; }
.band-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.32em; row-gap: 0.1em; font: var(--weight-bold) clamp(36px, 6.2vw, 84px)/1.05 var(--font-display); letter-spacing: -0.025em; }
.band-line img { width: 0.9em; height: 0.9em; }
.band-line .sep { color: var(--mop-500); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border-hairline); padding: var(--space-12) 0 0; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-11); align-items: start; padding-bottom: var(--space-11); }
.footer-brand p { margin: var(--space-5) 0 0; color: var(--text-muted); max-width: 40ch; font: var(--type-body-sm); font-size: 14px; }
.footer-brand .made { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--space-7); font: var(--type-body-sm); color: var(--text-muted); }
.footer-brand .made img { width: 32px; height: 32px; border-radius: 50%; }
.subscribe label { display: block; font: var(--type-heading); margin-bottom: var(--space-4); }
.subscribe .row { display: flex; gap: var(--space-4); }
.subscribe input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font: var(--type-body); background: var(--surface-card); color: var(--text-body); }
.subscribe input:focus { outline: none; box-shadow: var(--shadow-focus); }
.subscribe .note { margin-top: var(--space-4); font: var(--type-mono); color: var(--text-faint); }
.subscribe .note:empty { display: none; }
.subscribe .note.err { color: var(--red-700); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); gap: var(--space-9); padding: var(--space-10) 0; border-top: 1px solid var(--border-hairline); }
.footer-cols h3 { margin: 0 0 var(--space-5); font: var(--type-heading); }
.footer-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footer-cols a { color: var(--text-muted); font: var(--type-body-sm); font-size: 14px; }
.footer-cols a:hover { color: var(--text-body); }
.footer-cols .badge { margin-left: 6px; vertical-align: 1px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-7) 0 var(--space-9); border-top: 1px solid var(--border-hairline); font: var(--type-body-sm); color: var(--text-faint); }
.socials { display: flex; gap: var(--space-3); }
.socials a { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline); display: grid; place-items: center; }
.socials a:not([href]) { display: none; }
.socials img { width: 15px; height: 15px; opacity: .75; }
.legal-links { display: flex; gap: var(--space-7); flex-wrap: wrap; }
.legal-links a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-default); }
.credit { font: var(--type-mono); color: var(--text-faint); }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr; gap: var(--space-9); } .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- video dialog ---------- */
dialog.tour { padding: 0; border: 0; border-radius: var(--radius-lg); max-width: min(960px, 92vw); width: 100%; background: var(--surface-inverse); box-shadow: var(--shadow-pop); }
dialog.tour::backdrop { background: rgba(22, 24, 26, .72); }
dialog.tour video { display: block; width: 100%; height: auto; }
dialog.tour .close { position: absolute; top: 10px; right: 10px; z-index: 2; }

/* ---------- inner pages ---------- */
.page-head { padding: var(--space-12) 0 var(--space-11); border-bottom: 1px solid var(--border-hairline); background: var(--surface-page); }
.page-head .wrap > * + * { margin-top: var(--space-6); }
.page-head .h-1 { max-width: 20ch; }
.page-head .lede { max-width: 62ch; }
.page-body { padding: var(--space-11) 0 var(--space-13); }
.page-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-11); align-items: start; }
.toc { position: sticky; top: 96px; display: grid; gap: 8px; font: var(--type-body-sm); }
.toc b { font: var(--type-mono-label); letter-spacing: var(--tracking-caps); color: var(--text-faint); text-transform: lowercase; margin-bottom: 4px; }
.toc a { color: var(--text-muted); }
.prose { max-width: 70ch; }
.prose > :first-child { margin-top: 0; }
.prose section + section { margin-top: var(--space-11); padding-top: var(--space-11); border-top: 1px solid var(--border-hairline); }
.prose section > h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: 6px; }
.kv { display: grid; border-top: 1px solid var(--border-hairline); margin: var(--space-6) 0; }
.kv > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-hairline); }
.kv dt, .kv .k { font: var(--type-ui); font-size: 14px; color: var(--text-body); }
.kv dd, .kv .v { margin: 0; font: var(--type-body-sm); font-size: 14px; color: var(--text-muted); }
.callout { border: 1px solid var(--border-hairline); background: var(--surface-page); border-radius: var(--radius-md); padding: var(--space-7); margin: var(--space-7) 0; }
.callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; }
.demo { border: 1px solid var(--border-hairline); background: var(--surface-page); border-radius: var(--radius-lg); padding: var(--space-8); margin: var(--space-7) 0; display: grid; place-items: center; gap: var(--space-5); }
.steps { counter-reset: s; list-style: none; padding: 0 !important; display: grid; gap: var(--space-6) !important; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: var(--space-5); }
.steps li::before { content: counter(s, decimal-leading-zero); font: var(--type-mono); color: var(--text-faint); padding-top: 3px; }
@media (max-width: 860px) { .page-grid { grid-template-columns: 1fr; } .toc { display: none; } .kv > div { grid-template-columns: 1fr; gap: 4px; } }

.prose code, code { font: var(--type-mono); font-size: 0.9em; color: var(--text-body); background: var(--surface-sunken); border-radius: var(--radius-xs); padding: 1px 4px; }
@media (max-width: 640px) {
  .win.back-1, .win.back-2, .win-dots { display: none; }
  .stack { padding-top: 48px; }
  .win.front { top: 0; }
  .win-body { padding: var(--space-5); }
}

/* ---------- round 2 ---------- */
.brand img { width: 26px; height: 26px; border-radius: 6px; }
.chips-grid { display: grid; grid-template-columns: repeat(4, max-content); justify-content: center; }
@media (max-width: 760px) { .chips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chips-grid .chip { justify-content: flex-start; } }

/* quote: words darken as it scrolls up */
.reveal span { color: var(--ink-300); transition: color var(--dur-fast) linear; }
.reveal span.on { color: var(--text-body); }
@media (prefers-reduced-motion: reduce) { .reveal span { color: var(--text-body); } }

/* carousel: the code label always sits at the bottom */
.asset-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.asset-text .mono { margin-top: auto; padding-top: 10px; }
.sens-wrap { width: 328px; max-width: 100%; }

/* trust */
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--space-12); align-items: center; }
.trust-copy { display: grid; gap: var(--space-7); justify-items: start; }
.never { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.never li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; color: var(--text-muted); }
.never li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--blue-500); }
.never b { color: var(--text-body); font-weight: var(--weight-semibold); }
.trust-visual { display: grid; gap: 0; justify-items: stretch; }
.tv-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-6); display: grid; gap: 10px; position: relative; }
.tv-label { font: var(--type-mono-label); letter-spacing: var(--tracking-caps); color: var(--text-faint); text-transform: lowercase; }
.tv-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; font: var(--type-body-sm); }
.tv-row code { justify-self: start; }
.redact { justify-self: start; font: var(--type-mono); font-size: 11px; color: var(--ink-600); background: var(--texture-hatch), var(--paper-200); border: 1px dashed var(--border-default); border-radius: var(--radius-xs); padding: 1px 8px; }
.tv-kept { background: var(--surface-page); }
.tv-arrow { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 28px; position: relative; }
.tv-arrow::before { content: ""; width: 2px; height: 34px; background: var(--border-strong); }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr; gap: var(--space-10); } }

.bar.grow i { width: 0; transition: width 1100ms var(--ease-out); }
.bar.grow.in i { width: var(--w); }
@media (prefers-reduced-motion: reduce) { .bar.grow i { width: var(--w); transition: none; } }

/* tells: nav on top */
.tell-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) var(--space-6) var(--space-4) var(--space-8); border-bottom: 1px solid var(--border-hairline); background: var(--surface-raised-foot); }

/* horizontal flow */
.flow-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-11); }
.hflow { position: relative; }
.hflow-sticky { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; align-items: center; overflow: hidden; }
.hflow-track { position: relative; display: flex; gap: var(--space-9); align-items: flex-start; padding: 56px 0 var(--space-8); will-change: transform; }
.hflow-line { position: absolute; left: 0; top: 0; height: 40px; width: 100%; overflow: visible; pointer-events: none; }
.hflow-line line { stroke-width: 2; }
.hflow-line .base { stroke: var(--border-default); }
.hflow-line .drawn { stroke: var(--blue-500); }
.hstep { position: relative; flex: 0 0 380px; }
.hnode { position: absolute; top: -40px; left: 28px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-page); border: 2px solid var(--border-strong); transform: translate(-50%, -50%); transition: background var(--dur-fast), border-color var(--dur-fast); }
.hstep.passed .hnode { background: var(--blue-500); border-color: var(--blue-500); }
.hstep .flow-card { opacity: 1; transform: none; }
.hstep .flow-visual { min-height: 230px; align-content: start; }
.hflow.static .hflow-sticky { position: static; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--space-8); }
.hflow.static .hstep { scroll-snap-align: start; }
.hflow.static .hstep .hnode { background: var(--blue-500); border-color: var(--blue-500); }
@media (max-width: 900px) { .flow-head { grid-template-columns: 1fr; gap: var(--space-6); } .hstep { flex-basis: 300px; } }

/* closing band */
.band-logo { display: flex; align-items: center; gap: 0.3em; font: var(--weight-bold) clamp(48px, 8vw, 104px)/1 var(--font-display); letter-spacing: -0.03em; }
.band-logo img { width: 0.95em; height: 0.95em; border-radius: 0.2em; }
.band-line { margin-top: var(--space-6); display: block; font: var(--weight-bold) clamp(28px, 4.4vw, 56px)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--ink-400); }
.band-line .hl { color: var(--text-body); box-shadow: inset 0 -0.18em 0 var(--mop-300); }

/* ---------- inner pages, round 2 ---------- */
.page-head.ph-dark { background: var(--surface-page); color: var(--text-body); border-bottom: 0; padding: var(--space-12) 0; }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-11); align-items: center; }
.ph-copy > * + * { margin-top: var(--space-6); }
.ph-copy .h-1 { max-width: 18ch; }
.ph-visual { justify-self: end; max-width: 100%; }
.ph-visual [data-island] { box-shadow: var(--shadow-pop); border-radius: var(--radius-md); overflow: hidden; }
.ph-popup { transform: none; }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-11); }
.glance-tile { border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); padding: var(--space-6); display: grid; gap: 4px; align-content: start; }
.glance-tile b { font: var(--weight-semibold) var(--text-lg)/1.25 var(--font-display); color: var(--text-body); }
.glance-tile span:last-child { font: var(--type-body-sm); color: var(--text-muted); }
.glance-tile .mono { color: var(--mop-500); text-transform: lowercase; }
.promise { width: 380px; max-width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); padding: var(--space-8); display: grid; gap: 10px; box-shadow: var(--shadow-pop); }
.promise p { margin: 0; font: var(--weight-semibold) var(--text-lg)/1.35 var(--font-display); color: var(--text-muted); }
.promise p.last { color: var(--text-body); box-shadow: inset 0 -0.3em 0 var(--mop-200); justify-self: start; }
[data-theme="dark"] .promise p.last { box-shadow: inset 0 -0.3em 0 var(--mop-200); }
.tv-stack { width: 400px; max-width: 100%; display: grid; }
.repo { width: 420px; max-width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); overflow: hidden; box-shadow: var(--shadow-pop); }
.repo-head { display: flex; align-items: center; gap: 10px; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-hairline); background: var(--surface-raised-foot); }
[data-theme="dark"] .repo-head img { filter: invert(1); }
.repo-head .badge { margin-left: auto; }
.repo-row { display: grid; grid-template-columns: 30px 90px 1fr; gap: 10px; align-items: center; padding: 10px var(--space-6); border-bottom: 1px solid var(--border-hairline); font: var(--type-body-sm); }
.repo-row:last-child { border-bottom: 0; }
.prose { counter-reset: sec; }
.prose > section { counter-increment: sec; }
.prose > section > h2::before, .prose > section > .mono:first-child + h2::before { content: counter(sec, decimal-leading-zero); display: block; font: var(--type-mono-label); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); color: var(--mop-700); margin-bottom: 8px; }
.prose > section > h2 { padding-top: 0; }
.prose .kv { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 0 var(--space-6); background: var(--surface-card); box-shadow: var(--shadow-card); }
.prose .kv > div:last-child { border-bottom: 0; }
.toc a { padding: 4px 0 4px 12px; border-left: 2px solid var(--border-hairline); }
.toc a:hover { border-left-color: var(--mop-500); color: var(--text-body); text-decoration: none; }
.demo > [data-island] { width: 100%; display: grid; justify-items: center; }
@media (max-width: 980px) { .ph-grid { grid-template-columns: 1fr; } .ph-visual { justify-self: start; } .ph-popup { transform: none; margin: 0; } .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .glance { grid-template-columns: 1fr; } .ph-visual { display: none; } }

/* ---------- round 3 ---------- */
.ph-bar[hidden] { display: none; }
.plan { display: flex; flex-direction: column; }
.plan .btn { margin-top: auto; }
.plan ul { margin-bottom: var(--space-4); }
.tell-sample mark.t-red { background: var(--red-200); color: var(--text-body); }
.tell-sample mark.t-yellow { background: var(--mop-200); color: var(--text-body); }
.tell-sample mark.t-blue { background: var(--blue-200); color: var(--text-body); }
.tell-verdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tell-verdict .mono { color: var(--text-muted); }
.bd3 { display: grid; gap: var(--space-6); width: 100%; }
.bd3-pick { justify-self: center; width: min(100%, 420px); }
.bd3-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-7); align-items: start; }
.bd3-post, .bd3-panel { display: grid; gap: 8px; }
.vote-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--space-7); align-items: start; width: 100%; }
.vd-feed { display: grid; }
.vd-controls { display: grid; gap: var(--space-5); }
.vd-result { margin: 0; font: var(--type-body-sm); color: var(--text-muted); }
.vd-result b { color: var(--text-body); font-weight: var(--weight-semibold); }
.vote-exs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-7) 0; }
.vote-ex { display: grid; gap: var(--space-4); align-content: start; border: 1px solid var(--border-hairline); background: var(--surface-page); border-radius: var(--radius-lg); padding: var(--space-5); }
.vote-ex .post { padding: var(--space-5); }
.vote-ex .post-body { font-size: 13px; }
@media (max-width: 1100px) { .vote-exs { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .bd3-grid, .vote-demo { grid-template-columns: 1fr; } .bd3-panel { justify-items: center; } }

/* help: animated "turning it off" */
.offdemo { position: relative; width: 100%; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.od-pop { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); overflow: hidden; }
.od-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-hairline); font: var(--weight-semibold) 15px/1 var(--font-display); }
.od-head img { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; border-radius: 4px; }
.od-sw { width: 36px; height: 20px; border-radius: 10px; background: var(--mop-500); position: relative; transition: background var(--dur-slow) var(--ease-standard); }
.od-sw::after { content: ""; position: absolute; top: 2px; left: 18px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); transition: left var(--dur-slow) var(--ease-snap); }
.od-body { padding: 12px 14px; display: grid; gap: 8px; font: var(--type-body-sm); color: var(--text-muted); transition: opacity var(--dur-slow); }
.od-badge { display: inline-grid; place-items: center; min-width: 22px; height: 16px; padding: 0 4px; border-radius: 4px; background: var(--red-500); color: #fff; font: var(--weight-medium) 10px/1 var(--font-mono); transition: background var(--dur-slow); }
.od-badge .off { display: none; }
.od-feed { display: grid; gap: 8px; transition: filter var(--dur-slow), opacity var(--dur-slow); }
.od-row { display: flex; align-items: center; gap: 10px; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 10px 12px; font: var(--type-body-sm); }
.od-row .ln { flex: 1; height: 6px; border-radius: 3px; background: var(--paper-300); }
.od-mop { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.od-mop img { width: 15px; height: 15px; }
.od-mop.red { background: var(--red-100); } .od-mop.yellow { background: var(--mop-100); } .od-mop.blue { background: var(--blue-100); }
.od-cursor { position: absolute; left: 60%; top: 85%; width: 18px; height: 18px; pointer-events: none; z-index: 2; transition: left 800ms var(--ease-standard), top 800ms var(--ease-standard); }
.od-cursor svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.od-cap { grid-column: 1 / -1; margin: 0; font: var(--type-mono); color: var(--text-faint); min-height: 1.5em; }
.offdemo.s1 .od-cursor { left: 262px; top: 18px; }
.offdemo.s2 .od-sw { background: var(--ink-300); } .offdemo.s2 .od-sw::after { left: 2px; }
.offdemo.s2 .od-badge { background: var(--ink-400); } .offdemo.s2 .od-badge .on { display: none; } .offdemo.s2 .od-badge .off { display: inline; }
.offdemo.s2 .od-body { opacity: .45; }
.offdemo.s3 .od-feed { filter: grayscale(1); opacity: .5; }
.offdemo.s3 .od-cursor { left: 70%; top: 92%; }
@media (max-width: 760px) { .offdemo { grid-template-columns: 1fr; } .offdemo.s1 .od-cursor { left: 262px; top: 18px; } }
.prose { max-width: 900px; }
.prose p, .prose ul, .prose ol, .prose h2, .prose h3, .prose .kv, .prose .callout { max-width: 70ch; }
.vote-exs { grid-template-columns: 1fr; }
.vote-ex { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "k k" "post vote" "post res"; column-gap: var(--space-7); }
.vote-ex > .mono { grid-area: k; } .vote-ex > .post { grid-area: post; } .vote-ex > div:not(.post) { grid-area: vote; } .vote-ex > .vd-result { grid-area: res; }
@media (max-width: 760px) { .vote-ex { grid-template-columns: 1fr; grid-template-areas: "k" "post" "vote" "res"; } }
@media (max-width: 860px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .demo { padding: var(--space-5); overflow-x: auto; justify-items: start; }
  .demo > [data-island] { justify-items: start; }
}

/* ---------- round 4: brand colour for the selected network ---------- */
.net-word { color: var(--c, var(--text-body)); transition: color var(--dur-base) var(--ease-standard); }
.net-word .net-logo { background: var(--c, var(--surface-inverse)); transition: background var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.net-word .stop { color: var(--text-body); }
.chip-logo { width: 16px; height: 16px; flex: 0 0 auto; background: var(--ink-400); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background var(--dur-fast) var(--ease-standard); }
.chip { color: var(--text-muted); }
.chip[aria-pressed="true"] { color: var(--text-body); border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.chip[aria-pressed="true"] .chip-logo { background: var(--c); }
.chip:hover .chip-logo { background: var(--c); }

/* ---------- round 5 ---------- */
.btn-gh img { filter: none; transition: filter var(--dur-fast) var(--ease-standard); }
.btn-gh:hover { background: #16181A; color: #fff; box-shadow: 0 0 0 1px var(--mop-500); }
.btn-gh:hover img { filter: invert(1); }

/* ---------- XL welcome (/xl/welcome, Polar's success URL) ---------- */
.xl-steps { width: 320px; max-width: 100%; margin: 0; padding: var(--space-6); list-style: none; display: grid; gap: 10px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-pop); }
.xl-steps li { display: flex; align-items: center; gap: 12px; font: var(--weight-semibold) var(--text-lg)/1.3 var(--font-display); color: var(--text-faint); }
.xl-steps .mono { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-default); font-size: 12px; }
.xl-steps li.done { color: var(--text-muted); }
.xl-steps li.done .mono { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.xl-steps li.now { color: var(--text-body); }
.xl-steps li.now .mono { background: var(--mop-500); border-color: var(--mop-500); color: #16181A; }
.xl-next { max-width: 760px; }
.xl-how { margin: var(--space-8) 0; padding: 0; list-style: none; counter-reset: xl; display: grid; gap: var(--space-5); }
.xl-how li { counter-increment: xl; display: grid; grid-template-columns: 36px 1fr; gap: var(--space-5); align-items: start; font: var(--type-body); color: var(--text-muted); }
.xl-how li::before { content: counter(xl); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken); border: 1px solid var(--border-default); font: var(--type-mono); color: var(--text-body); }
.xl-how b { color: var(--text-body); }
.xl-small { font: var(--type-body-sm); color: var(--text-faint); }


/* about: two cards per row, one on phones */
.cards-3.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .cards-3.cards-2 { grid-template-columns: 1fr; } }

/* footer bottom links: a comfortable tap target on phones */
@media (max-width: 640px) { .legal-links a { display: inline-block; padding: 10px 0; } }

/* ---------- contact page ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-11); align-items: start; }
.contact-form { display: grid; gap: var(--space-6); max-width: 640px; }
.contact-form .field { display: grid; gap: 6px; }
.contact-form label { font: var(--type-ui); font-weight: var(--weight-semibold); color: var(--text-body); }
.contact-form input, .contact-form textarea { width: 100%; font: var(--type-body); color: var(--text-body); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 14px; }
.contact-form textarea { resize: vertical; min-height: 160px; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 1px; border-color: var(--blue-500); }
.contact-form input[aria-invalid="true"] { border-color: var(--red-500); }
.field-err { margin: 0; font: var(--type-body-sm); color: var(--red-700); }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-actions { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.contact-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.contact-status { margin: 0; font: var(--type-body-sm); color: var(--text-muted); }
.contact-status.err { color: var(--red-700); }
.contact-done { padding: var(--space-9); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); }
.contact-done .lede { margin-bottom: 0; }
.contact-side { display: grid; gap: var(--space-5); }
.contact-side .card { padding: var(--space-7); }
.contact-side h3 { margin: 0 0 6px; font: var(--type-heading); font-size: var(--text-lg); }
.contact-side p, .contact-side address { margin: 0; font: var(--type-body-sm); font-style: normal; color: var(--text-muted); line-height: 1.6; }
.contact-side .xl-small { margin-top: var(--space-4); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-9); } }

/* ---------- cookie banner ---------- */
.consent { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: var(--space-6); padding: var(--space-5) var(--space-6); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1; font: var(--type-body-sm); color: var(--text-muted); }
.consent p b { color: var(--text-body); }
.consent-btns { display: flex; gap: var(--space-4); flex: 0 0 auto; }
.consent-btns .btn { min-width: 92px; justify-content: center; }
@media (max-width: 640px) { .consent { flex-direction: column; align-items: stretch; gap: var(--space-5); } .consent-btns .btn { flex: 1; } }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 640px) { .legal-links .link-btn { padding: 10px 0; } }
.legal-links .link-btn { color: var(--text-muted); text-decoration-color: var(--border-default); font: inherit; }

/* ---------- account deleted ---------- */
.gone { display: grid; gap: var(--space-10); max-width: 960px; }
.gone-cards { margin: 0; }
.gone-cards .card h3 { margin: 0 0 var(--space-4); font: var(--type-heading); font-size: var(--text-lg); }
.gone-cards .card p, .gone-cards .card li { font: var(--type-body-sm); color: var(--text-muted); line-height: 1.6; }
.gone-cards .card p { margin: 0; }
.gone-cards .card ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.gone-cards .card li b { color: var(--text-body); }
.gone-remove .h-2, .gone-form .h-2 { margin: 0 0 var(--space-5); }
.gone-form { max-width: 640px; }
.gone-form .h-2 { margin-bottom: 0; }
.gone-form .lede-sm { margin: 0; font: var(--type-body); color: var(--text-muted); }
.opt { font-weight: 400; color: var(--text-faint); font-size: .8em; }
.gone-foot { margin: 0; padding-top: var(--space-7); border-top: 1px solid var(--border-hairline); font: var(--type-body-sm); color: var(--text-muted); }

/* ---------- hero: browsers it works in ---------- */
.browsers { margin-top: var(--space-7); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.browsers > .mono { font: var(--type-mono-label); color: var(--text-faint); }
.browsers ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-6); }
.browsers li { display: flex; align-items: center; gap: 8px; font: var(--type-ui); font-size: 13px; color: var(--text-muted); }
.browsers img { width: 22px; height: 22px; }
@media (max-width: 640px) { .browsers ul { gap: var(--space-4) var(--space-5); } .browsers li { font-size: 12px; } .browsers img { width: 20px; height: 20px; } }
.hero-meta { margin-top: var(--space-5); }
.browsers li.soon img { opacity: .55; }
.browsers li .badge { margin-left: -2px; }

/* ---------- proof band: the token count and where Slop Mop has been written about ---------- */
.proof { padding: var(--space-9) 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); background: var(--surface-card); }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-9); align-items: center; }
.proof-stat { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-6); row-gap: 4px; align-items: center; color: var(--text-body); text-decoration: none; }
.proof-stat b { grid-row: span 2; font: var(--weight-bold) clamp(44px, 6vw, 64px)/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink-900); }
.proof-what { font: var(--weight-semibold) var(--text-md)/1.35 var(--font-display); }
.proof-stat .mono { display: inline-flex; align-items: center; gap: 6px; font: var(--type-mono); font-size: var(--text-2xs); color: var(--text-faint); }
.proof-stat .mono svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-standard); }
.proof-press { display: grid; gap: var(--space-4); justify-items: end; }
.proof-press .mono { font-size: var(--text-2xs); color: var(--text-faint); }
.proof-press ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); justify-content: flex-end; }
.proof-press a { display: inline-flex; align-items: center; gap: 8px; font: var(--weight-semibold) var(--text-sm)/1 var(--font-body); color: var(--text-muted); text-decoration: none; }
.proof-press img { filter: grayscale(1); opacity: .65; transition: filter var(--dur-fast), opacity var(--dur-fast); }
.proof-press a:hover { color: var(--text-body); } .proof-press a:hover img { filter: none; opacity: 1; }
@media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr; } .proof-press { justify-items: start; } .proof-press ul { justify-content: flex-start; } }

/* ---------- footer: Ask AI under the newsletter box, page-updated line ---------- */
.footer-side { display: grid; gap: var(--space-8); }
.ask-ai-label { margin: 0 0 var(--space-4); font: var(--type-heading); color: var(--text-body); }
.ask-ai-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ask-ai-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.ask-ai-btn img { filter: grayscale(1); opacity: .55; transition: filter var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); }
.ask-ai-btn:hover, .ask-ai-btn:focus-visible { border-color: var(--ink-900); transform: translateY(-1px); }
.ask-ai-btn:hover img, .ask-ai-btn:focus-visible img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ask-ai-btn, .ask-ai-btn img, .proof-press img { transition: none; } }

/* ---------- footer: copyright on the left, theme switcher right of the link columns ---------- */
.socials:not(:has(a[href])) { display: none; }
.footer-bottom > span { margin-right: auto; text-align: left; }
.footer-cols { grid-template-columns: repeat(3, minmax(0, 180px)) minmax(0, 1fr); }
.theme-pick { justify-self: end; align-self: start; display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px solid var(--border-hairline); }
.theme-pick[hidden] { display: none; }
.theme-pick button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 4px; font: var(--weight-medium) 13px/1 var(--font-body); color: var(--text-muted); }
.theme-pick button svg { width: 15px; height: 15px; }
.theme-pick button:hover { color: var(--text-body); }
.theme-pick button[aria-checked="true"] { background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-card), 0 0 0 1px var(--border-hairline); }
.theme-pick button:focus-visible { box-shadow: var(--shadow-focus); }
@media (max-width: 860px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .theme-pick { grid-column: 1 / -1; justify-self: start; } }

/* ---------- on-this-page nav: the section being read ---------- */
.toc a { transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.toc a[aria-current="true"] { border-left-color: var(--mop-500); color: var(--text-body); font-weight: var(--weight-semibold); }

/* ---------- dark theme: the design system flips the ramps under [data-theme="dark"]; these are the site's own exceptions ---------- */
/* host-site mockups keep the host's light look, so Slop Mop's pieces inside them stay light too */
[data-theme="dark"] .win { color-scheme: light; --ink-900:#16181A;--ink-800:#24282B;--ink-700:#3B4045;--ink-600:#565C63;--ink-500:#6E757D;--ink-400:#8D949B;--ink-300:#B2B8BE;--ink-200:#D3D7DB;--ink-100:#E6E9EC;--ink-050:#F1F3F5;--paper-000:#FFFFFF;--paper-100:#F7F8F9;--paper-200:#EFF1F3;--paper-300:#E4E7EA;--mop-900:#7A5A00;--mop-700:#B58400;--mop-500:#F5B400;--mop-300:#FFD24A;--mop-200:#FFE9A8;--mop-100:#FFF6DC;--red-700:#9B211A;--red-500:#D93025;--red-200:#F6C6C2;--red-100:#FDECEA;--blue-700:#1A4E8A;--blue-500:#2F6FBF;--blue-200:#C6DCF4;--blue-100:#EDF3FB;--surface-page:var(--paper-100);--surface-card:var(--paper-000);--surface-sunken:var(--paper-200);--surface-inverse:var(--ink-900);--surface-accent:var(--mop-500);--text-body:var(--ink-900);--text-muted:var(--ink-600);--text-faint:var(--ink-500);--text-inverse:var(--paper-000);--text-on-accent:var(--ink-900);--text-link:var(--blue-700);--border-hairline:var(--ink-100);--border-default:var(--ink-200);--border-strong:var(--ink-400);--border-accent:var(--mop-500);--flag-warn:var(--mop-500);--flag-warn-wash:var(--mop-100);--flag-danger:var(--red-500);--flag-danger-wash:var(--red-100);--flag-clean:var(--blue-500);--flag-unsure:var(--ink-400);--flag-unsure-wash:var(--paper-200);--focus-ring:var(--blue-500);--focus-ring-halo:var(--blue-200);--text-on-solid:#FFFFFF;--surface-raised:var(--paper-000);--surface-raised-foot:var(--paper-100);--chart-grid:var(--ink-200);--track:var(--paper-200);--mini-feed:#F4F2EE;--mini-feed-on:#E9E5DD;--mini-post:var(--paper-000);--fold-crease:var(--ink-200);--fold-face:var(--paper-200);--fold-shade:rgba(22,24,26,.08);--shadow-card:0 1px 2px rgba(22,24,26,.05);--shadow-raised:0 2px 8px rgba(22,24,26,.08);--shadow-pop:0 8px 24px rgba(22,24,26,.14); }
/* one-colour logos are black SVGs: knock them out to white on dark surfaces (brand-colour "-color" logos stay as they are) */
[data-theme="dark"] :where(img[src*="logos/"]:not([src*="-color"])) { filter: invert(1); }
[data-theme="dark"] .win :where(img[src*="logos/"]) { filter: none; }
[data-theme="dark"] .socials img, [data-theme="dark"] .btn-gh img { filter: invert(1); }
[data-theme="dark"] .proof-press img { filter: grayscale(1) invert(1); }
[data-theme="dark"] .proof-press a:hover img { filter: invert(1); }
[data-theme="dark"] .ask-ai-btn img { filter: grayscale(1) invert(1); opacity: .6; }
[data-theme="dark"] .ask-ai-btn:hover img, [data-theme="dark"] .ask-ai-btn:focus-visible img { filter: none; opacity: 1; }
[data-theme="dark"] .ask-ai-btn:is(:hover, :focus-visible) img:is([src$="chatgpt.svg"], [src$="grok.svg"]) { filter: invert(1); }

/* ---------- footer: near-black in both themes. It carries data-theme="dark", so everything inside uses the dark tokens. ---------- */
.footer { background: var(--paper-100); color: var(--text-body); border-top: 1px solid var(--border-hairline); }
html[data-theme="dark"] .footer { background: var(--mini-feed-on); }

/* ---------- band: install on the left, a silent looping preview on the right ---------- */
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-11); align-items: center; }
.band-logo { font-size: clamp(32px, 4vw, 48px); }
.band-line { font-size: clamp(26px, 3.2vw, 40px); margin-top: var(--space-5); }
.band-copy .lede { margin-top: var(--space-6); max-width: 46ch; }
.band-copy .ctas { margin-top: var(--space-8); display: flex; gap: var(--space-5); flex-wrap: wrap; }
.band-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--ink-900); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-raised); object-fit: cover; }
@media (max-width: 860px) { .band-grid { grid-template-columns: 1fr; gap: var(--space-9); } }

/* footer: cookie settings sits in the Legal column as a link */
.footer-cols .link-btn { all: unset; cursor: pointer; color: var(--text-muted); font: var(--type-body-sm); font-size: 14px; }
.footer-cols .link-btn:hover { color: var(--text-body); }
.footer-cols .link-btn:focus-visible { box-shadow: var(--shadow-focus); border-radius: 2px; }

/* Ask AI on the dark footer: every mark as the same flat silhouette, so none shouts louder; colour comes back on hover */
.footer .ask-ai-btn img { filter: grayscale(1) brightness(0) invert(1); opacity: .55; }

/* ---------- /ask-ai: the brief for AI assistants (an orphan page, built from ask-ai.md) ---------- */
.ask-brief { padding-top: var(--space-6); }
.ask-brief h1 { margin: 0 0 var(--space-6); font: var(--weight-bold) clamp(36px, 5vw, 56px)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--text-body); }
.ask-brief li + li { margin-top: 6px; }

/* hero: X and Medium brand in ink (--text-body), so they flip to light text in dark mode; their logo tile flips too,
   so the knocked-out white logo goes back to black there */
[data-theme="dark"] .net-word[data-ink] .net-logo img { filter: none; }

/* interactive tell figures (assets/figures/), each sized from inside its frame */
.tell-fig { margin: var(--space-6) 0; max-width: 70ch; }
.tell-fig iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; background: transparent; }