/* Wideframe brand v2 (Oct 2026). Source of truth for every non-admin page.
   Figma kit: https://www.figma.com/design/M9MIh87EHdFzuXaUJDhfKG
   Load AFTER a page's inline <style> so these rules win:
     <link rel="stylesheet" href="/brand.css">
   Components are prefixed wf- so they never collide with legacy classes.
   The "Legacy hooks" section restyles class names that page JS and
   /blog/copy-markdown.js depend on. Never rename those hooks. */

:root{
  color-scheme:dark;
  --bg:#050505; --raised:#0D0D0D; --stage:#0A0A0A;
  --glass:rgba(255,255,255,.03); --glass-hover:rgba(255,255,255,.05); --nav:rgba(5,5,5,.72);
  --ink:#EAEAEA; --ink2:rgba(234,234,234,.62); --ink3:rgba(234,234,234,.38);
  --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.22);
  --teal:#24837B; --teal-light:#3AA99F; --danger:#F87171; --ok:#4ADE80; --yc:#FF5100;
  --r-tag:5px; --r-control:6px; --r-surface:8px; --r-stage:4px;
  --gutter:40px;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,monospace;
  --app-mono:"Roboto Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ── Base ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;cursor:auto}
::selection{background:#fff;color:#050505}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
h1,h2,h3,h4{text-wrap:balance}
p,h1,h2,h3,h4,span,li,div,td,th{cursor:inherit}

/* ── Type ───────────────────────────────────────────── */
.wf-h1{font-size:28px;line-height:1.2;font-weight:400;letter-spacing:-.025em;color:var(--ink)}
.wf-h2{font-size:28px;line-height:1.2;font-weight:400;letter-spacing:-.025em;color:var(--ink)}
.wf-h3{font-size:22px;line-height:1.25;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.wf-h4{font-size:17px;line-height:1.4;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.wf-lead{font-size:18px;line-height:1.5;color:var(--ink2)}
.wf-body{font-size:15px;line-height:1.5;color:var(--ink2)}
.wf-small{font-size:14px;line-height:1.5;color:var(--ink2)}
.wf-caption{font-size:12px;line-height:1.4;color:var(--ink3)}
.wf-lab{font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.wf-muted{color:var(--ink3)}
.wf-link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
.wf-link:hover{text-decoration-color:var(--ink)}

/* ── Layout ─────────────────────────────────────────── */
.wf-wrap{padding-inline:var(--gutter)}
.wf-rail{display:grid;grid-template-columns:300px 1fr;gap:64px}
.wf-sec{padding-top:140px}
.wf-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px}
.wf-sec-head .wf-sub{font-size:15px;color:var(--ink2);margin-top:8px;max-width:520px}
@media (max-width:900px){
  :root{--gutter:20px}
  .wf-rail{grid-template-columns:1fr;gap:24px}
  .wf-sec{padding-top:96px}
}

/* ── Nav pill ───────────────────────────────────────── */
.wf-nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:18px;height:44px;padding:0 6px 0 10px;
  background:var(--nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r-surface);
  font-size:13px;color:var(--ink2);white-space:nowrap;transition:opacity .4s ease}
.wf-nav a{color:inherit;text-decoration:none}
.wf-nav a:not(.wf-btn):hover{color:var(--ink)}
.wf-nav .wf-nav-logo{display:flex;align-items:center;color:var(--ink);margin-right:6px}
.wf-nav>*{flex:none}
.wf-nav .wf-nav-logo img,.wf-nav .wf-nav-logo svg{height:19px;width:auto;max-width:none;display:block}
.wf-nav-sep{width:1px;height:16px;background:var(--line)}
.wf-nav.nav-hidden{opacity:0;pointer-events:none}
@media (max-width:640px){ .wf-nav .wf-nav-link{display:none} .wf-nav .wf-nav-sep{display:none} }

/* ── Buttons ────────────────────────────────────────── */
.wf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 14px;border-radius:var(--r-control);
  font:500 13.5px/1 var(--sans);letter-spacing:0;text-transform:none;border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s}
.wf-btn.sm{height:28px;padding:0 11px;font-size:12.5px}
.wf-btn.lg{height:40px;padding:0 18px;font-size:14px}
.wf-btn.primary,.wf-btn.primary:hover,.wf-btn.primary:focus-visible{background:#fff;color:#050505}
.wf-btn.primary:hover{background:#d9d9d9}
.wf-btn.secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.wf-btn.secondary:hover{background:rgba(255,255,255,.06)}
.wf-btn:disabled,.wf-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* ── Small parts ────────────────────────────────────── */
.wf-tag{display:inline-flex;align-items:center;font-size:12px;color:var(--ink2);padding:3px 8px;border:1px solid var(--line);border-radius:var(--r-tag);background:var(--glass);text-decoration:none}
a.wf-tag:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.wf-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-control);font-size:12px;color:var(--ink)}
.wf-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(36,131,123,.15);flex:none}
.wf-yc{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-control);font-size:12px;color:var(--ink2);text-decoration:none}
.wf-yc b{width:14px;height:14px;background:var(--yc);color:#fff;font:700 9px/14px var(--sans);text-align:center;border-radius:2px}

/* ── Surfaces ───────────────────────────────────────── */
.wf-card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:28px}
a.wf-card{display:block;color:inherit;text-decoration:none;transition:background .2s,border-color .2s}
a.wf-card:hover{background:var(--glass-hover);border-color:rgba(255,255,255,.16)}
.wf-panel{background:var(--stage);border:1px solid var(--line);border-radius:var(--r-surface);padding:24px}
.wf-stage{position:relative;background:var(--stage);border:1px solid var(--line);border-radius:var(--r-stage);overflow:hidden}
.wf-quote blockquote{margin:0;font-size:13px;line-height:1.5;color:var(--ink2)}
.wf-quote figcaption{margin-top:10px;font-size:12px;line-height:1.4}
.wf-quote figcaption b{display:block;font-weight:500;color:var(--ink)}
.wf-quote figcaption span{color:var(--ink3)}

/* ── Forms ──────────────────────────────────────────── */
.wf-input{height:40px;padding:0 12px;background:var(--glass);border:1px solid var(--line-strong);border-radius:var(--r-control);color:var(--ink);font:400 14px var(--sans);outline:none;transition:border-color .2s}
.wf-input::placeholder{color:var(--ink3)}
.wf-input:focus{border-color:rgba(255,255,255,.5)}
.wf-error{color:var(--danger);font-size:12px}
.wf-success{color:var(--ok);font-size:12px}

/* ── FAQ ────────────────────────────────────────────── */
.wf-faq-item{border-top:1px solid var(--line)}
.wf-faq-item:last-child{border-bottom:1px solid var(--line)}

/* ── Footer ─────────────────────────────────────────── */
.wf-foot{position:relative;overflow:hidden;margin-top:80px;padding:80px var(--gutter) 30px;border-top:1px solid var(--line)}
.wf-foot>*:not(.wf-pfield){position:relative;z-index:1}
.wf-foot-top{display:grid;grid-template-columns:300px 1fr;gap:64px}
.wf-foot-logo{color:var(--ink)}
.wf-foot-logo img,.wf-foot-logo svg{height:36px;width:auto;max-width:none;display:block}
.wf-fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-size:13px}
.wf-fcols b{display:block;font-weight:500;margin-bottom:10px;color:var(--ink)}
.wf-fcols a{display:block;color:var(--ink2);margin-bottom:6px;text-decoration:none}
.wf-fcols a:hover{color:var(--ink)}
.wf-foot-bot{display:flex;justify-content:space-between;gap:16px;margin-top:80px;font-size:12px;color:var(--ink3)}
.wf-foot-bot a{color:inherit;text-decoration:none}
@media (max-width:900px){ .wf-foot-top{grid-template-columns:1fr;gap:32px} .wf-fcols{grid-template-columns:1fr 1fr} }

/* ── Particle field ─────────────────────────────────── */
.wf-pfield{position:absolute;inset:0;z-index:0;pointer-events:none}

/* ════════════════════════════════════════════════════
   Legacy hooks. Old markup keeps working on the new look.
   ════════════════════════════════════════════════════ */

/* Buttons: Space Mono uppercase squares become rounded Inter buttons */
.btn-primary,.btn-primary-filled{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border-radius:var(--r-control);
  font:500 13.5px/1 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-primary:hover{background:rgba(255,255,255,.06);color:var(--ink);border-color:var(--line-strong)}
.btn-primary-filled{background:#fff;color:#050505;border:1px solid #fff}
.btn-primary-filled:hover{background:#d9d9d9;color:#050505;border-color:#d9d9d9}
.btn-primary .bracket-corner,.btn-primary-filled .bracket-corner{display:none}

/* Bracket corners are retired */
.bracket-corner{display:none!important}

/* Mono stays for small labels only; tone it down */
.mono{font-family:var(--mono)}

/* Article typography */
.article-body h2{font-size:28px;font-weight:400;letter-spacing:-.025em;color:var(--ink)}
.article-body h3{font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.article-body p,.article-body ul,.article-body ol,.article-body td{color:var(--ink2)}
.article-body strong{color:var(--ink)}
.article-body a{color:var(--ink);text-decoration-color:rgba(255,255,255,.3)}
.article-body th{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink3);border-bottom-color:var(--line)}
.article-body td{border-bottom-color:rgba(255,255,255,.06)}
.article-body table{border:1px solid var(--line);border-radius:var(--r-surface);border-collapse:separate;border-spacing:0;overflow:hidden}
.article-body tr:last-child td{border-bottom:0}

/* Callouts and panels: hairline, rounded, glass */
.toc,.tool-rating-card,.verdict-box,.workflow-steps,.procon-panel,.author-bio-box,.editors-take{border-color:var(--line)!important;border-radius:var(--r-surface);background:var(--glass)}
.toc a{color:var(--ink2)}
.toc a:hover{color:var(--ink)}
.editors-take{border:1px solid var(--line);border-left:2px solid var(--teal)}
.editors-take p{color:var(--ink2)}
.verdict-box-col:first-child,.procon-col:first-child{border-color:var(--line)}
.workflow-step{border-top-color:rgba(255,255,255,.06)}
.workflow-step-title,.tool-rating-name,.author-bio-name{color:var(--ink)}
.workflow-step-desc,.author-bio-text,.verdict-box-col li,.procon-col li{color:var(--ink2)}
.workflow-step-num,.ai-disclosure{color:var(--ink3)}
.author-bio-avatar{border-color:var(--line-strong);border-radius:50%;background:var(--raised);color:var(--ink2)}
.tool-rating-bar-track{background:rgba(255,255,255,.08)}
.editors-take-label,.verdict-box-col-label,.procon-col-label,.workflow-steps-label,.tool-rating-verdict,.tool-rating-bar-label,.author-bio-title{
  font-family:var(--sans)!important;font-size:12px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;color:var(--ink3)!important}

/* Inline email form */
.inline-email-input{height:40px;padding:0 12px;background:var(--glass);border:1px solid var(--line-strong);border-radius:var(--r-control);color:var(--ink);font:400 14px var(--sans)}
.inline-email-input::placeholder{color:var(--ink3)}
#cta-form{gap:8px}

/* FAQ (blog, pricing, landing pages) */
.faq-item{border-top-color:var(--line)}

/* Listing cards (blog index, skills index) */
.post-card,.skill-card{border-color:var(--line)!important;border-radius:var(--r-surface);background:var(--glass)}
.post-card:hover,.skill-card:hover{background:var(--glass-hover)}

/* Onboarding answers */
.option-card{border-color:var(--line)!important;border-radius:var(--r-surface)!important;background:var(--glass)!important}
.option-card:hover{background:var(--glass-hover)!important;border-color:rgba(255,255,255,.18)!important}
.option-card.selected{border-color:#fff!important;background:rgba(255,255,255,.08)!important}

/* Old arbitrary-value greys from Tailwind markup, pulled onto tokens.
   The :root prefix outranks the Tailwind CDN's runtime stylesheet. */
:root .border-\[\#1a1a1a\],:root .border-\[\#111\],:root .border-\[\#111111\],:root .border-\[\#222\],:root .border-\[\#222222\],:root .border-\[\#333\]{border-color:var(--line)}
:root .bg-\[\#0a0a0a\],:root .bg-\[\#111\],:root .bg-\[\#111111\]{background-color:var(--stage)}
/* fully bordered legacy boxes (TLDR, CTA, cards) get surface corners */
:root .border.border-\[\#1a1a1a\],:root .border.border-\[\#222\],:root .border.border-\[\#222222\]{border-radius:var(--r-surface)}
:root .text-\[\#888\],:root .text-\[\#888888\],:root .text-\[\#b0b0b0\],:root .text-\[\#999\]{color:var(--ink2)}
:root .text-\[\#666\],:root .text-\[\#666666\],:root .text-\[\#555\],:root .text-\[\#555555\],:root .text-\[\#444\]{color:var(--ink3)}

@media (prefers-reduced-motion:reduce){
  .fade-in-up,.reveal{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}

/* ── Legacy type: retire Space Mono uppercase outside true labels ── */
/* v1 set metadata, breadcrumbs, buttons and panel labels in Space Mono caps.
   v2 keeps Space Mono for .wf-lab only; everything else reads in Inter. */
:root .mono,:root .font-mono{font-family:var(--sans);letter-spacing:0;font-weight:500}
:root .mono.uppercase,:root .mono .uppercase,:root .uppercase.tracking-wider,:root .uppercase.tracking-widest{text-transform:none;letter-spacing:0}
:root .mono.text-\[9px\],:root .mono.text-\[10px\],:root .mono.text-\[11px\],:root .mono.text-xs{font-size:12px}
:root .ai-disclosure,:root .author-bio-avatar,:root .workflow-step-num,:root .tool-rating-bar-score,
:root .editors-take .label,:root .workflow-steps .steps-label,:root .workflow-steps .step-num,:root .verdict-box .verdict-label,
:root .tool-rating-card .tool-name,:root .tool-rating-card .rating-value,:root .pro-con-panel .col-label,
:root .procon-col li::before,:root .check-list li::before{font-family:var(--sans);letter-spacing:0;text-transform:none}
:root .editors-take .label,:root .workflow-steps .steps-label,:root .verdict-box .verdict-label,:root .pro-con-panel .col-label{font-size:12px;font-weight:500;color:var(--ink3)}
:root .ai-disclosure{font-size:12px}

/* Blog filter tabs: segmented, sentence case, Inter */
:root .filter-tab{font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink3);
  height:32px;padding:0 12px;border:1px solid transparent;border-radius:var(--r-control);background:transparent;transition:color .15s,background .15s,border-color .15s}
:root .filter-tab:hover{color:var(--ink)}
:root .filter-tab.active{color:var(--ink);background:var(--glass);border-color:var(--line)}
:root #filter-tabs{gap:4px}

/* "Copy page" control injected by /blog/copy-markdown.js */
:root .copy-page-btn,:root .copy-page-chevron{background:var(--glass);border-color:var(--line);color:var(--ink2);font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;height:28px}
:root .copy-page-btn{padding:0 10px;border-radius:var(--r-control) 0 0 var(--r-control)}
:root .copy-page-chevron{border-radius:0 var(--r-control) var(--r-control) 0}
:root .copy-page-btn:hover,:root .copy-page-chevron:hover{color:var(--ink);background:var(--glass-hover);border-color:var(--line-strong)}
:root .copy-page-dropdown{background:var(--raised);border-color:var(--line);border-radius:var(--r-surface);overflow:hidden}
:root .copy-page-dropdown button{background:transparent;color:var(--ink2)}
:root .copy-page-dropdown button:hover{background:var(--glass-hover);color:var(--ink)}
:root .copy-page-dropdown button+button{border-top-color:var(--line)}

/* Blog index: card meta + kicker in Inter */
.post-meta,.blog-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--ink3);margin-bottom:16px}
.blog-kicker{font-size:13px;margin-bottom:24px}
.post-meta-dot{color:rgba(234,234,234,.22)}
.post-read{font-size:13px;font-weight:500;color:var(--ink2)}
.post-card:hover .post-read{color:var(--ink)}

/* Blog post header (markup from scripts/brand/blog-header.mjs) */
.post-crumbs{display:flex;align-items:center;gap:8px;margin-bottom:32px;font-size:13px;color:var(--ink3)}
.post-crumbs a{color:var(--ink3);text-decoration:none;transition:color .15s}
.post-crumbs a:hover{color:var(--ink)}
.post-crumbs .post-crumb-here{color:var(--ink2)}
.post-title{font-size:clamp(30px,3.6vw,42px);line-height:1.12;font-weight:400;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.post-tldr-label,.post-label{font-size:12px;font-weight:500;color:var(--ink3);margin-bottom:10px}
.toc .post-label{margin-bottom:14px}
.post-fine{font-size:12px;color:var(--ink3);margin-top:12px}
/* Copy page sits in the breadcrumb row; keep it compact and aligned */
:root .copy-page-wrapper{height:28px}
:root .copy-page-btn svg,:root .copy-page-chevron svg{opacity:.8}

/* ════════════════════════════════════════════════════
   Legacy page components (pricing, dtc, vs, onboarding family)
   ════════════════════════════════════════════════════ */
/* Headings: v2 headings are Regular weight with tight tracking */
:root :is(h1,h2).font-medium,:root :is(h1,h2).font-semibold{font-weight:400;letter-spacing:-.025em}
:root .bracket-corner-box{display:none!important}

/* Pricing: plan cards, banner, checklist, trust row, billing timeline, testimonial, FAQ */
:root .plan-card{border-color:var(--line);border-radius:var(--r-surface);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}
:root .plan-card.featured{border-color:rgba(255,255,255,.28)}
:root .plan-banner{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;background:#fff;color:#050505}
:root .check-list li::before{font-family:var(--sans);color:var(--teal-light)}
:root .check-divider{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink3)}
:root .trust-stack{border-color:var(--line);border-radius:var(--r-control);background:var(--glass);overflow:hidden;font-family:var(--sans)}
:root .trust-stack span{letter-spacing:0;text-transform:none;border-right-color:var(--line);font-family:var(--sans);font-size:12px;color:var(--ink2)}
:root .bill-grid{border-color:var(--line);border-radius:var(--r-surface);background:var(--glass);overflow:hidden}
:root .bill-cell{border-color:var(--line)}
:root .bill-cell .when{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink3)}
:root .rail-card{border-color:var(--line);border-radius:var(--r-surface);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:root .progress-dots .dot{border-radius:50%;width:6px;height:6px;border-color:rgba(255,255,255,.25)}
:root .faq-item{border-color:var(--line)}
:root .faq-q{font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
:root .faq-q .faq-toggle{font-family:var(--sans);color:var(--ink3)}
:root .faq-a,:root .faq-answer{color:var(--ink2)}

/* Landing pages (dtc, vs): modals, terminal panels, compare tables */
:root .modal-overlay>div,:root .modal-box,:root .modal-content{border-radius:var(--r-surface)}
:root .modal-input{font-family:var(--sans);border-radius:var(--r-control);border-color:var(--line-strong);background:var(--glass)}
:root .modal-status{font-family:var(--sans);letter-spacing:0;text-transform:none}
:root .compare-table{border-radius:var(--r-surface);overflow:hidden}
:root .compare-table th,:root .compare-table td:first-child{font-family:var(--sans);letter-spacing:0;text-transform:none}
:root .versus .v-head,:root .term-head,:root .term-body{font-family:var(--sans);letter-spacing:0;text-transform:none}
:root .feature-num{font-family:var(--mono)}
/* v1 viewfinder corner marks (absolute w-4 h-4 two-sided borders) are retired */
:root .absolute.w-4.h-4.border-white.opacity-30{display:none}

/* Skills library (scripts/build-skills-library.mjs) */
:root .skill-card{border-radius:var(--r-surface)}
:root .icon-tile{border-color:var(--line);border-radius:var(--r-control)}
:root .card-desc{color:var(--ink2)}
:root .tag,:root .source-badge{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink2);border-color:var(--line);background:var(--glass);border-radius:var(--r-tag)}
:root .search-input,:root .ctrl-btn{background:var(--glass);border-color:var(--line);border-radius:var(--r-control)}
:root .search-input:focus,:root .ctrl-btn:hover,:root .ctrl-btn.active{border-color:var(--line-strong)}
:root .filter-menu{background:var(--raised);border-color:var(--line);border-radius:var(--r-surface)}
:root .skillmd{border-color:var(--line);border-radius:var(--r-surface);background:var(--stage);overflow:hidden}
:root .skillmd-label{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink3);border-bottom-color:var(--line)}
:root .skillmd code{font-family:var(--app-mono);font-size:12.5px;color:var(--ink2)}
:root .copy-btn{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink2);border-color:var(--line-strong);border-radius:var(--r-control);padding:4px 10px}
:root .copy-btn:hover{color:var(--ink);border-color:rgba(255,255,255,.4)}
:root :not(.chip-group)>.chip{font-family:var(--sans);font-size:12px;color:var(--ink2);border-color:var(--line);background:var(--glass);border-radius:var(--r-tag)}
:root .sub{color:var(--ink2)}

/* Author box layout (older-layout posts never had these rules inline) */
:root .author-bio-box{display:flex;gap:20px;align-items:flex-start;padding:24px;margin:32px 0;border:1px solid var(--line)}
:root .author-bio-avatar{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;border:1px solid var(--line-strong)}
:root .author-bio-info{flex:1}
:root .author-bio-name{font-weight:500;font-size:15px;margin-bottom:2px}
:root .author-bio-title{margin-bottom:10px}
:root .author-bio-text{font-size:14px;line-height:1.6;margin:0}
@media (max-width:640px){:root .author-bio-box{flex-direction:column;align-items:center;text-align:center}}

/* ── Onboarding family (/onboarding, -2, -3, /start, /download, /survey) ── */
/* Only visual properties change here. Display/visibility rules that the step machine
   relies on (.step, .step.active, .ag-hidden, .tw-*) are left to each page. */
:root .progress-bar{height:2px;background:var(--teal-light)}
:root #back-btn,:root #step-counter{font-family:var(--sans);font-size:13px;letter-spacing:0;color:var(--ink3)}
:root #back-btn:hover{color:var(--ink)}
:root .step-box{border:1px solid var(--line);border-radius:12px;background:rgba(10,10,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:root .question-text{font-weight:400;letter-spacing:-.025em}
:root #intro-headline{font-weight:400;letter-spacing:-.025em}
:root .option-card{border-radius:var(--r-surface)!important;padding:14px 16px}
:root .checkmark{border-radius:50%;border-color:rgba(255,255,255,.3)}
:root .option-card.selected .checkmark{border-color:#fff;background:#fff}
:root .onboarding-input{font-family:var(--sans);font-size:15px;border-radius:var(--r-control);border-color:var(--line-strong);background:var(--glass);padding:12px 14px}
:root .onboarding-input:focus{border-color:rgba(255,255,255,.5)}
:root .onboarding-input::placeholder{color:var(--ink3)}
:root .check-bullet::before{font-family:var(--sans);color:var(--teal-light)}
/* activation / success screens */
:root .activation-kicker,:root .pipeline-stage-label,:root .capability-chip-label,:root .learns-item-label{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink3)}
:root .capability-chip-label,:root .learns-item-label{color:var(--ink)}
:root .activation-prompt-shell,:root .pipeline-stage,:root .footage-prompt-panel,:root .learns-item,:root .capability-chip{border-color:var(--line);border-radius:var(--r-surface);background:var(--glass)}
:root .capability-chip{border-radius:var(--r-control)}
:root .activation-prompt-text{font-family:var(--app-mono)}
:root .source-tile,:root .train-source-tile{border-color:var(--line);border-radius:var(--r-surface);background:var(--glass)}
:root .source-tile:hover,:root .train-source-tile:hover{border-color:rgba(255,255,255,.22);background:var(--glass-hover)}
:root .source-tile.is-selected,:root .train-source-tile.is-selected{border-color:#fff;background:rgba(255,255,255,.08)}
:root .source-tile-desc,:root .train-source-tile span,:root .pipeline-stage-sub,:root .learns-item-desc,:root .capability-chip-desc{color:var(--ink2)}
:root .agent-vision-preview{border-radius:var(--r-surface)}
:root .vision-tag{font-family:var(--sans);font-size:11px;letter-spacing:0;border-radius:var(--r-tag)}
:root .vision-timestamp,:root .vision-status{font-family:var(--sans);letter-spacing:0}
:root .act-list-glyph{border-radius:50%}
/* onboarding-2 (split layout + rail) */
:root .rail-cell{border-color:var(--line)}
:root .chip-group .chip{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;border-color:var(--line);border-radius:var(--r-control);background:var(--glass);color:var(--ink2)}
:root .chip-group .chip:hover{border-color:rgba(255,255,255,.22);color:var(--ink)}
:root .chip-group .chip.selected{border-color:#fff;background:rgba(255,255,255,.08);color:var(--ink)}
:root .pay-skeleton{border-radius:var(--r-control)}
:root #eligibility-gate{border-color:var(--line);border-radius:var(--r-surface)}
/* /start, /download */
:root .tile-brand,:root .tile-form,:root .download-card{border-color:var(--line);border-radius:var(--r-surface);background:var(--glass)}
:root .feature-item{border-color:var(--line)}
:root .ack-row input[type="checkbox"]{border-radius:4px}
/* /survey */
:root .skip-link{font-family:var(--sans);letter-spacing:0;text-transform:none}
:root .btn-start{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:var(--r-control);font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none;background:#fff;color:#050505;border:1px solid #fff}
:root .btn-start:hover{background:#d9d9d9;color:#050505;border-color:#d9d9d9}
:root .rail-cell{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink2)}
:root .skip-link{font-size:13px;color:var(--ink3)}
:root #mac-label,:root #mac-dot+span{font-family:var(--sans);letter-spacing:0;text-transform:none}

/* Legal pages (/privacy, /terms) */
:root main>h1.font-bold{font-weight:400;letter-spacing:-.025em}
:root main section>h2.font-bold{font-weight:500;letter-spacing:-.01em}
:root main .space-y-8.mono{font-weight:400;font-size:15px;line-height:1.65}

/* Markdown viewer (/blog/markdown) */
:root .toolbar{background:var(--nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
:root .toolbar-back,:root .toolbar-title,:root .toolbar-btn{font-family:var(--sans);letter-spacing:0;text-transform:none}
:root .toolbar-btn{border-radius:var(--r-control);border-color:var(--line-strong)}
:root .md-content{font-family:var(--app-mono)}
:root .loading,:root .error{font-family:var(--sans);letter-spacing:0;text-transform:none}

/* Legacy buttons: beat Tailwind's display/padding utilities (block, py-*, px-*) so the
   label is always vertically centred at a fixed height. Full width when markup asks. */
:root .btn-primary,:root .btn-primary-filled{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;line-height:1;font-size:14px;box-sizing:border-box}
:root .btn-primary:is(.block,.w-full),:root .btn-primary-filled:is(.block,.w-full){display:flex;width:100%}
:root nav .btn-primary,:root nav .btn-primary-filled{height:28px;padding:0 11px;font-size:12.5px}