:root{
  --bg:#F7F8FA;--surface:#FFFFFF;--surface-2:#F1F4F8;--ink:#0A0E14;
  --muted:#4E5865;--muted-2:#5C6673;--line:#E3E7EB;--line2:#EDF0F3;--line-strong:#C9D0D8;
  --accent:#8A5A0A;--accent-hover:#6F4706;--accent-soft:#FAF0D6;--accent-bright:#4C74FF;
  --ok:#0B6247;--ok-soft:#E4F3EC;--warn:#8A5A00;--warn-soft:#FBF1DA;
  --gold:#C58A00;--teal:#0F7A55;--violet:#5A6470;--coral:#8A5A0A;
  --white:#FFFFFF;--max:1160px;
  --font:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --font-d:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --font-b:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --font-m:'Inter Tight','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.mono{font-family:var(--font-m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);font-weight:600;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.h1{font-family:var(--font);font-size:clamp(38px,5.2vw,60px);line-height:1.04;letter-spacing:-.04em;font-weight:600;text-wrap:balance;overflow-wrap:anywhere}
.h2{font-family:var(--font);font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.035em;font-weight:600;text-wrap:balance;overflow-wrap:anywhere}
.h3{font-size:19px;line-height:1.35;letter-spacing:-.01em;font-weight:600}
.grad,.serif{font-family:var(--font);font-style:normal;letter-spacing:-.035em;color:var(--accent);font-weight:600}
section{position:relative}
.sec{padding:clamp(40px,4.4vw,64px) 0}
.sec-tight{padding:clamp(32px,3.6vw,48px) 0}
.center{text-align:center}
.eyebrow{display:block;margin-bottom:14px}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--muted);max-width:60ch}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;letter-spacing:-.02em;flex:none;color:var(--ink)}
.brand img{width:auto;height:26px;padding:0;background:transparent;border-radius:0;object-fit:contain}
.nav{display:flex;gap:2px;align-items:center;margin-left:auto}
.nav a{font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted);padding:8px 11px;border-radius:6px}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a[aria-current="page"],.nav a.active{color:var(--accent)}
.header-actions{display:flex;gap:10px;align-items:center;flex:none}
.header-actions .btn{min-height:40px;padding:0 16px;font-size:14px}
.menu-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;color:var(--ink);flex:none}
.menu-btn:hover{border-color:var(--line-strong)}
.menu-btn svg{width:18px;height:18px}
@media(max-width:980px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--surface);border-bottom:1px solid var(--line);padding:12px 20px 18px;z-index:70}
  .nav.open a{padding:12px 10px;font-size:16px}
  .header-actions .btn-ghost{display:none}
  .menu-btn{display:inline-flex}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;background:var(--accent);color:#FFFFFF;border:1px solid var(--accent);border-radius:8px;font-family:var(--font);font-size:14.5px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--ink);color:var(--ink)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.btn-lg{min-height:50px;padding:0 24px;font-size:16px}
.btn-block{width:100%}

/* chips/cards */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);white-space:nowrap;color:var(--muted)}
.chip.g{background:var(--ok-soft);border-color:#C6E3D6;color:var(--ok)}
.chip.k{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.t{background:var(--accent-soft);border-color:#EBD9AC;color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px}
a.card:hover{border-color:var(--accent)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}

/* hero */
.hero{padding:clamp(48px,7vw,88px) 0 clamp(52px,7vw,96px);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(32px,5vw,64px);align-items:center}
.hero p.lead{max-width:38rem;margin-top:20px}
.hero-actions{display:flex;gap:16px 22px;align-items:center;flex-wrap:wrap;margin-top:26px}
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;color:var(--muted)}
.glow-card{background:var(--block,#0B1220);color:#F7F8FA;border:1px solid #1E293B;border-radius:12px;position:relative;overflow:hidden}
.glow-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field .hint{font-size:13px;color:var(--muted)}
.chk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:15px;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:12px 14px;cursor:pointer}
.chk:hover{border-color:var(--accent)}
.chk input{margin-top:3px;accent-color:var(--accent)}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-row label{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:10px 14px;cursor:pointer;font-size:15px}
.radio-row input{accent-color:var(--accent)}

/* questionnaire */
.steps-bar{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.steps-bar span{font-family:var(--font-m);font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.steps-bar span.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.qstep{display:none}
.qstep.on{display:block}
.qnav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
.summary{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:18px;font-size:15px}
.summary dl{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 16px;margin:0}
.summary dt{color:var(--muted)}
.summary dd{margin:0;font-weight:500}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.post-card{display:flex;flex-direction:column;gap:10px;padding:26px}
.post-card .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.prose{max-width:760px;margin:0 auto;font-size:17.5px;line-height:1.75}
.prose h2{font-size:30px;line-height:1.15;letter-spacing:-.025em;margin:44px 0 14px;font-weight:600}
.prose h3{font-size:20px;line-height:1.35;margin:32px 0 10px;letter-spacing:-.01em;font-weight:600}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose li{margin:6px 0}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 8px 8px 0}
.prose .lead{font-size:20px;color:var(--muted)}
.prose img{border-radius:10px;margin:24px 0}
.article-head{padding:56px 0 28px;border-bottom:1px solid var(--line)}
.article-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:13px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 22px;margin:28px 0;font-size:15px}
.toc a{color:var(--accent)}

/* legal */
.legal{padding:56px 0 96px}
.legal .prose h2{margin-top:36px;font-size:26px}
.legal .prose h3{font-size:19px}
.updated{color:var(--muted);font-size:14px}

/* footer */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:44px 0 26px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px}
.foot nav{display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.foot nav a,.foot a{font-size:13.5px;color:var(--muted)}
.foot a:hover{color:var(--accent)}
.site-footer .mono{color:var(--muted-2)}
.foot .tagline{margin-top:10px;font-size:13.5px;color:var(--muted);max-width:240px}
.foot .addr{font-size:13px;color:var(--muted-2)}
.site-footer .brand{color:var(--ink)}
.copy{margin-top:32px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted-2);font-size:11.5px}

/* misc */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,64px);align-items:start}
.met{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.met .card{padding:26px;display:flex;flex-direction:column;gap:8px}
.met .big{font-size:clamp(40px,4.6vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-size:17px;font-weight:600;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:24px}
.faq summary::-webkit-details-marker{display:none}
.cta{background:var(--accent);color:#FFFFFF;border:1px solid var(--accent);border-radius:12px;padding:clamp(40px,5vw,64px) 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;position:relative;overflow:hidden}
.cta .btn{background:#FFFFFF;color:var(--accent);border-color:#FFFFFF}
.cta .btn:hover{background:#F2F5FF;border-color:#F2F5FF;color:var(--accent-hover)}
.note{font-size:14px;color:var(--muted)}
.stars{color:#C58A00;letter-spacing:3px;font-size:15px;display:inline-block}
.accent-text{color:var(--accent)}
.cal-embed{min-height:640px;width:100%;border:0;border-radius:10px;background:var(--surface)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}

@media(max-width:980px){
  .wrap{padding:0 20px}
  .h1{font-size:40px}.h2{font-size:32px}
  .hero-grid,.split,.blog-grid,.g2,.g3,.g4,.met,.steps,.foot{grid-template-columns:minmax(0,1fr)}
  .sec{padding:64px 0}
  .chk-grid{grid-template-columns:minmax(0,1fr)}
  .summary dl{grid-template-columns:1fr}
  .summary dt{margin-top:8px}
}
@media(max-width:560px){
  .brand span{display:none}
  .header-actions .btn{padding:0 12px;font-size:13px}
}

/* one-question-at-a-time quiz */
.quiz-top{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.quiz-progress{flex:1;height:4px;border-radius:2px;background:var(--line2);overflow:hidden}
.quiz-progress > span{display:block;height:100%;width:0;border-radius:2px;background:var(--accent);transition:width .3s ease}
.quiz-count{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.q-title{font-size:28px;line-height:1.15;letter-spacing:-.025em;font-weight:600;margin-bottom:6px}
.q-hint{color:var(--muted);font-size:15px;margin-bottom:18px}
.q-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 4px}
.q-option{display:flex;align-items:center;gap:10px;text-align:left;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:14px 16px;font:inherit;font-size:15px;cursor:pointer;color:var(--ink);transition:border-color .15s,background-color .15s,color .15s}
.q-option:hover{border-color:var(--accent)}
.q-option.sel{border-color:var(--accent);background:var(--accent);color:#fff}
.q-option .box{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:11px;line-height:1;color:transparent}
.q-option.single .box{border-radius:50%}
.q-option.sel .box{border-color:#fff;background:#fff;color:var(--accent)}
.q-input{width:100%;font:inherit;font-size:18px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink)}
.q-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea.q-input{font-size:16px;line-height:1.6;resize:vertical}
.q-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.q-back{background:none;border:0;color:var(--muted);font:inherit;font-size:15px;cursor:pointer;padding:8px 0}
.q-back:hover{color:var(--ink)}
.q-error{color:#B42318;font-size:14px;margin-top:12px;min-height:20px}
.review dl{display:grid;grid-template-columns:170px minmax(0,1fr);gap:10px 16px;margin:0;font-size:15px}
.review dt{color:var(--muted)}
.review dd{margin:0;font-weight:500}
.q-success{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
@media(max-width:520px){
  .q-options{grid-template-columns:minmax(0,1fr)}
  .q-title{font-size:23px}
  .review dl{grid-template-columns:1fr}
}

/* theme toggle */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;flex:none}
.theme-btn:hover{border-color:var(--line-strong)}
.theme-btn svg{width:17px;height:17px}

/* dark mode */
html[data-theme="dark"]{
  --bg:#0A0E14;--surface:#111722;--surface-2:#151C28;--ink:#F3F6F9;
  --muted:#A8B3BF;--muted-2:#8F9BA8;--line:#26303D;--line2:#1C2431;--line-strong:#394657;
  --accent:#E0A83C;--accent-hover:#F0BC5C;--accent-soft:#2E2510;--accent-bright:#E0A83C;
  --ok:#5FD3A3;--ok-soft:#12261F;--warn:#E0B266;--warn-soft:#2C2618;
  --gold:#E0B266;--white:#111722;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .site-header{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .nav.open{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .brand{color:var(--ink)}
html[data-theme="dark"] .menu-btn,html[data-theme="dark"] .theme-btn{background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .btn{background:var(--accent);color:#0A0E14;border-color:var(--accent)}
html[data-theme="dark"] .btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#0A0E14}
html[data-theme="dark"] .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
html[data-theme="dark"] .btn-ghost:hover{background:var(--surface);border-color:var(--ink);color:var(--ink)}
html[data-theme="dark"] .card{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] a.card:hover{border-color:var(--accent)}
html[data-theme="dark"] .chip{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .chip.g{background:var(--ok-soft);border-color:#24503C;color:var(--ok)}
html[data-theme="dark"] .chip.t{background:var(--accent-soft);border-color:#4A3A18;color:var(--accent)}
html[data-theme="dark"] .chip.k{background:var(--accent);color:#0A0E14;border-color:var(--accent)}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
html[data-theme="dark"] .chk,html[data-theme="dark"] .radio-row label{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
html[data-theme="dark"] .q-option{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
html[data-theme="dark"] .q-option:hover{border-color:var(--accent)}
html[data-theme="dark"] .q-option.sel{background:var(--accent);color:#0A0E14;border-color:var(--accent)}
html[data-theme="dark"] .q-option.sel .box{background:#0A0E14;color:var(--accent);border-color:#0A0E14}
html[data-theme="dark"] .q-input{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
html[data-theme="dark"] .summary{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .steps-bar span{background:var(--surface);border-color:var(--line);color:var(--muted)}
html[data-theme="dark"] .steps-bar span.on{background:var(--accent);color:#0A0E14;border-color:var(--accent)}
html[data-theme="dark"] .site-footer{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .foot nav a,html[data-theme="dark"] .foot a{color:var(--muted)}
html[data-theme="dark"] .foot a:hover{color:var(--accent)}
html[data-theme="dark"] .article-head,html[data-theme="dark"] .faq details,html[data-theme="dark"] .legal .prose h2{border-color:var(--line)}
html[data-theme="dark"] .toc{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .prose a{color:var(--accent)}
html[data-theme="dark"] .prose blockquote{background:var(--surface);border-color:var(--accent)}
html[data-theme="dark"] section[style*="background:#fff"],html[data-theme="dark"] .sec[style*="background:#fff"]{background:var(--surface) !important}
html[data-theme="dark"] [style*="background:#FBFAF7"],html[data-theme="dark"] [style*="background:#F0EADC"]{background:var(--bg) !important}
html[data-theme="dark"] [style*="background:#F1EEE5"]{background:var(--surface-2) !important}
html[data-theme="dark"] [style*="background:#F6EDD8"]{background:var(--accent-soft) !important}
html[data-theme="dark"] [style*="color:#0B0B0C"]{color:var(--ink) !important}
html[data-theme="dark"] [style*="color:#3b3831"]{color:var(--ink) !important}
html[data-theme="dark"] [style*="color:#5F5B52"]{color:var(--muted) !important}
html[data-theme="dark"] .muted{color:var(--muted)}
html[data-theme="dark"] .mono{color:var(--muted-2)}
html[data-theme="dark"] .lead,html[data-theme="dark"] .prose .lead{color:var(--muted)}
html[data-theme="dark"] .cta{background:#2A200C;border-color:#2A200C}
html[data-theme="dark"] .cta .btn{background:#fff;color:#6F4706;border-color:#fff}

/* seamless: transitions, skeletons, progress */
@keyframes exoRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card,.post-card,.met>.card,.steps>.card,.blog-grid>.post-card,.cta,.h1,.h2,.lead{animation:exoRise .36s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes exoPulse{0%,100%{opacity:.55}50%{opacity:1}}
.skeleton{background:var(--line2);animation:exoPulse 1.4s ease-in-out infinite;border-radius:6px;color:transparent !important}
.skeleton-title{height:24px;width:55%;margin-bottom:16px}
.skeleton-line{height:12px;margin:10px 0}
.skeleton-line.short{width:70%}
.skeleton-block{border-radius:10px}
#exo-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:9999;opacity:0;transition:width .3s ease,opacity .2s ease;pointer-events:none}
#exo-progress.on{opacity:1}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s}
.site-header{view-transition-name:site-header;animation:none !important}
::view-transition-group(site-header){animation:none}
::view-transition-old(site-header),::view-transition-new(site-header){animation:none;mix-blend-mode:normal}
.brand img{filter:none}
@media (prefers-reduced-motion: reduce){
  .card,.post-card,.met>.card,.steps>.card,.blog-grid>.post-card,.cta,.h1,.h2,.lead{animation:none}
  .skeleton{animation:none}
  html{scroll-behavior:auto}
}

/* LinkedIn tile */
.header-actions a[aria-label="ExohushAI on LinkedIn"]{background:#0A66C2}

/* overflow safety */
html,body{max-width:100%;overflow-x:clip}
.h1,.h2,.h3{overflow-wrap:break-word}
@media(max-width:520px){.header-actions a[aria-label="ExohushAI on LinkedIn"]{display:none !important}}

/* ============================================================================
   EDITORIAL THEME: bone canvas, ink type, hairline borders, one gold accent.
   Single weight (400); hierarchy comes from size and tracking.
   ========================================================================== */
:root{
  --bg:#F4F2F0; --surface:#FFFFFF; --surface-2:#F4F2F0; --surface-wash:#F4F2F0;
  --ink:#0C0A08; --ink-soft:#241F1C; --obsidian:#1A1919;
  --muted:#6D6C6B; --muted-2:#6D6C6B;
  --line:#E5E7EB; --line2:#EEEDEA; --line-strong:#D3D3D3;
  --accent:#1F4BFF; --accent-hover:#1539D6; --accent-soft:rgba(31,75,255,.07); --accent-bright:#4C74FF;
  --accent-ink:#5C3F0C;
  --ok:#0B6247; --ok-soft:#E7F5EE; --warn:#5C3F0C; --warn-soft:#FCF4E4;
  --gold:#1F4BFF; --teal:#0B6247; --violet:#6D6C6B; --coral:#5C3F0C;
  --white:#FFFFFF; --max:1200px;
  --font:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --font-d:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --font-ed:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --font-b:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --font-m:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --r-sm:6px; --r-md:10px; --r-lg:12px; --r-xl:16px;
}
html[data-theme="dark"]{
  --bg:#121110; --surface:#1A1919; --surface-2:#201E1C;
  --ink:#F4F2F0; --muted:#B9B4AF; --muted-2:#B9B4AF;
  --line:#2E2B28; --line2:#262320; --line-strong:#3A3632;
  --accent:#5B7BFF; --accent-hover:#7C95FF; --accent-soft:rgba(91,123,255,.14); --accent-ink:#AFC0FF;
  --ok:#5FD3A3; --ok-soft:#12261F;
}
body{font-family:var(--font);font-size:16px;line-height:1.55;letter-spacing:-.004em;background:var(--bg);color:var(--ink)}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}

/* type: one weight, sizes do the work */
.h1{font-family:var(--font-ed);font-weight:400;font-size:clamp(37px,4.9vw,61px);line-height:1.06;letter-spacing:-.021em;font-variation-settings:"SOFT" 0,"WONK" 0;font-optical-sizing:auto}
.h1 .ln{display:block}
.h2{font-family:var(--font-ed);font-weight:400;font-size:clamp(27px,3vw,41px);line-height:1.1;letter-spacing:-.016em;font-variation-settings:"SOFT" 0,"WONK" 0;font-optical-sizing:auto}
.h3{font-family:var(--font-ed);font-weight:400;font-size:23px;line-height:1.2;letter-spacing:-.012em;font-variation-settings:"SOFT" 0,"WONK" 0}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--muted);max-width:56ch}
.mono{font-family:var(--font-m);font-size:10px;letter-spacing:.18em}
.eyebrow,.label{font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400}
.label{display:block}
.grad,.accent-text{color:var(--accent-ink)}
.muted{color:var(--muted)}
.note{font-size:13.5px;line-height:1.55;color:var(--muted)}
body ::selection{background:var(--accent);color:var(--ink)}

/* shell */
.site-header{background:rgba(244,242,240,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
html[data-theme="dark"] .site-header{background:rgba(18,17,16,.92);border-color:var(--line)}
.brand span{font-family:var(--font-d);font-weight:400;font-size:17px;letter-spacing:-.01em}
.brand img{background:transparent;border:0;padding:0;border-radius:0;box-sizing:content-box;filter:drop-shadow(0 1px 1px rgba(12,10,8,.3))}
@media (max-width:640px){.brand img{height:30px}}
html[data-theme="dark"] .brand img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.nav a{font-size:14px;color:var(--muted);padding:7px 10px;border-radius:var(--r-sm)}
.nav a:hover{background:var(--surface);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.menu-btn,.theme-btn{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink)}
.wrap{max-width:var(--max)}

/* buttons */
.btn{background:var(--accent);color:var(--ink);border:1px solid var(--accent);border-radius:var(--r-sm);font-family:var(--font);font-weight:400;font-size:14.5px;letter-spacing:.01em;min-height:46px}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--ink)}
.btn-ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink);color:var(--ink)}
html[data-theme="dark"] .btn-ghost{border-color:var(--ink);color:var(--ink)}
html[data-theme="dark"] .btn-ghost:hover{background:var(--surface-2)}
.btn-light{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-light:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--bg)}
.btn-lg{min-height:50px;padding:0 24px;font-size:15px}
.btn-sm{min-height:38px;padding:0 14px;font-size:13px}

/* cards, metrics, stars */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:none}
a.card:hover{border-color:var(--ink)}
.met .big{font-weight:400;font-size:clamp(34px,4vw,48px);letter-spacing:-.03em;color:var(--ink)}
.met>.card .mono{color:var(--muted)}
.stars{color:var(--accent);letter-spacing:.16em;font-size:12px}
section[style*="background:#fff"]{background:var(--surface) !important}

/* call-to-action band */
.cta{background:var(--accent);border:1px solid var(--accent);border-radius:var(--r-xl)}
.cta h2,.cta .h2{color:var(--ink)}
.cta p{color:#3A2A08 !important}
.cta .btn{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cta .btn:hover{background:var(--ink-soft);border-color:var(--ink-soft)}

/* prose */
.prose{font-size:17px;line-height:1.7;max-width:70ch}
.prose h2{font-family:var(--font-ed);font-weight:400;font-size:30px;letter-spacing:-.025em;margin:44px 0 14px}
.prose h3{font-family:var(--font-ed);font-weight:400;font-size:20px;letter-spacing:-.01em;margin:30px 0 10px}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{background:var(--surface);border-left:2px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0}

/* faq, blog, chips, footer */
.faq summary{font-weight:400;font-size:16px}
.faq summary .plus{font-family:var(--font-m);color:var(--muted)}
.post-card{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:none}
.chip{border-radius:4px;border:1px solid var(--line);background:var(--surface-2);font-family:var(--font-m);font-size:9.5px;letter-spacing:.1px;text-transform:uppercase;padding:3px 7px;color:var(--muted)}
.chip.g,.chip.t,.chip.k{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
.pill{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface)}
.site-footer{background:var(--surface);border-top:1px solid var(--line)}
.foot .label{display:block;margin-bottom:10px}
.foot nav{display:flex;flex-direction:column;gap:2px}
.foot nav a{min-height:26px;font-size:13.5px}
.foot .addr{color:var(--muted)}
.copy{border-top:1px solid var(--line)}

/* hero blocks */
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.hero-aside{display:flex;justify-content:flex-end;min-width:0}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:2px}
.hero-meta span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.hero-meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* product panel */
.panel{width:100%;max-width:520px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line)}
.panel-bar .dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none}
.panel-bar .t{margin-left:8px;font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.panel-bar .live{margin-left:auto;font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}
.panel-body{padding:6px 14px}
.act{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 0}
.act+.act{border-top:1px solid var(--line)}
.act .av{font-family:var(--font-m);font-size:11px;color:var(--muted);flex:none;width:34px}
.act .who{font-size:13.5px}
.act .what{font-size:12.5px;color:var(--muted)}
.act .st{font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 6px;white-space:nowrap}
.transcript{margin:2px 0 12px 45px;padding:12px 14px;border-left:1px solid var(--line)}
.transcript .line{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:baseline;padding:3px 0}
.transcript .k{font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.transcript .k.g{color:var(--accent-ink)}
.transcript p{font-size:12.5px;line-height:1.5}
.panel-note{padding:12px 14px;border-top:1px solid var(--line);font-size:11px;line-height:1.5;color:var(--muted)}

/* spec strip */
.spec{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.spec-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;padding:16px 0}
.spec-label{font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.spec-item{font-size:14px;color:var(--muted)}
.spec-item b{font-weight:400;color:var(--ink);font-family:var(--font-d);font-size:16px;letter-spacing:-.01em}
.spec-note{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:auto}

/* buying paths */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.path{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);transition:border-color .3s ease-out}
.path:hover{border-color:var(--ink)}
.path .n{font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.path h3{font-family:var(--font-ed);font-weight:400;font-size:22px;line-height:1.15;letter-spacing:-.02em}
.path p{font-size:14.5px;line-height:1.55;color:var(--muted)}
.path .of{margin-top:auto;padding-top:14px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.12px;text-transform:uppercase;color:var(--accent-ink)}
.path.featured{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.path.featured h3{color:var(--bg)}
.path.featured .n,.path.featured p{color:#B9B4AF}
.path.featured .of{color:var(--accent)}

/* coverage matrix */
.matrix{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);overflow:hidden}
.matrix table{width:100%;border-collapse:collapse}
.matrix caption{caption-side:top;text-align:left;padding:18px 20px;border-bottom:1px solid var(--line);font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.matrix th,.matrix td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
.matrix thead th{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400;white-space:nowrap}
.matrix tbody th{font-family:var(--font-d);font-size:17px;letter-spacing:-.01em;font-weight:400}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix td.c{width:72px;text-align:center}
.matrix .i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.matrix .dash{color:var(--line-strong)}

/* package rows */
.pkg-list{margin-top:28px;border-top:1px solid var(--line)}
.pkg-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}
.pkg-row .num{font-family:var(--font-m);font-size:11px;color:var(--muted);width:24px;padding-top:6px}
.pkg-row .name{font-family:var(--font-d);font-size:22px;letter-spacing:-.02em}
.pkg-row .desc{font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:4px;max-width:62ch}
.pkg-row .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pkg-row .tag{font-family:var(--font-m);font-size:9.5px;letter-spacing:.1px;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 7px}
.pkg-row .go{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);white-space:nowrap;padding-top:7px}

/* inverted compare */
.compare{background:var(--obsidian);color:#F4F2F0;border-radius:var(--r-xl);padding:clamp(28px,4vw,48px)}
.compare .label{color:#8F8A85}
.compare h2{color:#F4F2F0;margin-top:14px;max-width:24ch}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);margin-top:32px}
.cmp-col{background:var(--obsidian);padding:22px}
.cmp-col.on{background:#22201E}
.cmp-col h3{font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8F8A85;margin-bottom:14px;font-weight:400}
.cmp-col.on h3{color:var(--accent)}
.cmp ul{list-style:none;margin:0;padding:0}
.cmp li{display:flex;gap:10px;font-size:14px;line-height:1.5;padding:10px 0;border-top:1px solid rgba(255,255,255,.08);color:#C9C4BF}
.cmp li:first-child{border-top:0}
.cmp .on li{color:#F4F2F0}
.cmp .m{flex:none;width:12px;color:#7A7570}
.cmp .cmp-col:not(.on) .m{font-size:15px;line-height:1;width:14px;color:#A8A29A}
.cmp .on .m{color:var(--accent)}

/* quotes + close */
.quote{display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.quote blockquote{font-size:15px;line-height:1.55;flex:1}
.quote figcaption{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:12px}
.quote .rate{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.close{background:var(--accent);border-radius:var(--r-xl);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.close h2{max-width:22ch}
.close p{font-size:15.5px;line-height:1.55;margin-top:12px;max-width:46ch;color:#3A2A08}
.close-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.close .small{font-size:13px;color:#4A3708}

@media(max-width:1040px){
  .paths{grid-template-columns:1fr}
  .close{grid-template-columns:1fr}
  .matrix{overflow-x:auto}
  .matrix table{min-width:640px}
}
@media(max-width:760px){
  .hero-aside{justify-content:flex-start}
  .panel{max-width:none}
  .spec-note{margin-left:0}
}
@media(max-width:600px){
  .pkg-row{grid-template-columns:auto minmax(0,1fr)}
  .pkg-row .go{grid-column:2}
  .cmp{grid-template-columns:1fr}
}

/* harmonise legacy component treatments with the editorial system */
.chip.k{border:0;background:none;padding:0;color:var(--accent-ink);font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.chip.k::after{content:" →"}
.glow-card{background:var(--obsidian);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);color:#F4F2F0}
.glow-card::before{height:1px;background:var(--accent)}
.glow-card .mono,.glow-card .eyebrow{color:#B9B4AF}
.glow-card h2,.glow-card h3,.glow-card .h2,.glow-card .h3{color:#F4F2F0;font-family:var(--font-ed);font-weight:400}
.glow-card p,.glow-card li{color:#C9C4BF}
.glow-card .chip{border-color:rgba(255,255,255,.2);color:#E7E2DC;background:transparent}
.glow-card .dot{background:var(--accent)}
.link-arrow{color:var(--accent-ink);font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.stars{color:var(--accent-ink)}
.met>.card .big{color:var(--ink)}

/*dashboard-css*/
.db{--db-ok:#0B6247;--db-pend:#8A5A12;--db-flag:#8C2F2F;--db-next:#5C3F0C;display:flex;flex-direction:column;gap:14px}
html[data-theme="dark"] .db{--db-ok:#5FD3A3;--db-pend:#F0C67C;--db-flag:#F0ADA7;--db-next:#E0A83C}
.db-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.db-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
.db-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.db-kpi-top .db-sys{font-size:9px;padding:2px 7px;letter-spacing:.07em}
.db-kpi-label{display:block;font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.db-kpi-value{font-family:var(--font-d);font-size:clamp(24px,2.4vw,32px);line-height:1.12;letter-spacing:-.02em;margin-top:8px}
.db-kpi-sub{font-size:12.5px;color:var(--muted);margin-top:5px}
.db-kpi-sub b{color:var(--ink);font-weight:400}
.db-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,320px);gap:10px;align-items:stretch}
.db-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.db-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
.db-head{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}
.db-title{margin:0;font-family:var(--font-m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:400;color:var(--ink)}
.db-sys{font-family:var(--font-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-strong);border-radius:999px;padding:3px 9px;white-space:nowrap}
.db-rev{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.db-rev-num{font-family:var(--font-d);font-size:clamp(30px,3vw,38px);letter-spacing:-.03em;line-height:1}
.db-rev-of{font-size:12.5px;color:var(--muted)}
.db-track{height:8px;border-radius:999px;background:var(--line);margin-top:14px;overflow:hidden}
.db-track{height:9px}
.db-track span{display:block;height:100%;background:var(--ink);border-radius:999px}
.db-sub{font-family:var(--font-m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:20px 0 8px;font-weight:400}
.db-rows{list-style:none;margin:0;padding:0}
.db-rows li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:7px 0;border-top:1px solid var(--line)}
.db-rows li:first-child{border-top:0}
.db-rows li span:last-child{font-variant-numeric:tabular-nums;color:var(--ink)}
.db-rows-lg li{font-size:13.5px;padding:8px 0}
.db-appts,.db-msgs,.db-bars,.db-svcs{list-style:none;margin:0;padding:0}
.db-appts li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px}
.db-appts li:first-child{border-top:0}
.db-appts li.is-next{background:color-mix(in srgb,var(--db-next) 8%,transparent);border-radius:6px;padding:10px;margin:0 -10px;border-top-color:transparent}
.db-time{font-family:var(--font-m);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.db-appt{color:var(--ink)}
.db-dot-sep{color:var(--line-strong)}
.db-chip{font-family:var(--font-m);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.db-chip.next{color:#FFF8EC;background:var(--db-next);border-color:var(--db-next)}
.db-chip.ok{color:var(--db-ok);background:color-mix(in srgb,var(--db-ok) 12%,transparent);border-color:color-mix(in srgb,var(--db-ok) 32%,transparent)}
.db-chip.pend{color:var(--db-pend);background:color-mix(in srgb,var(--db-pend) 16%,transparent);border-color:color-mix(in srgb,var(--db-pend) 34%,transparent)}
html[data-theme="dark"] .db-chip.pend{background:color-mix(in srgb,var(--db-pend) 20%,transparent);border-color:color-mix(in srgb,var(--db-pend) 45%,transparent)}
.db-counts{display:flex;gap:8px;margin-left:auto}
.db-count{font-family:var(--font-m);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:999px}
.db-count.ok{color:var(--db-ok);background:color-mix(in srgb,var(--db-ok) 10%,transparent)}
.db-count.pend{color:var(--db-pend);background:color-mix(in srgb,var(--db-pend) 14%,transparent)}
.db-msg{padding:11px 12px;border-radius:8px;margin-bottom:8px;border:1px solid transparent}
.db-msg:last-child{margin-bottom:0}
.db-msg.ok{background:color-mix(in srgb,var(--db-ok) 7%,transparent);border-color:color-mix(in srgb,var(--db-ok) 22%,transparent)}
.db-msg.pend{background:color-mix(in srgb,var(--db-pend) 8%,transparent);border-color:color-mix(in srgb,var(--db-pend) 26%,transparent)}
html[data-theme="dark"] .db-msg.pend{background:color-mix(in srgb,var(--db-pend) 14%,transparent);border-color:color-mix(in srgb,var(--db-pend) 40%,transparent)}
.db-msg-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.db-msg-name{font-size:13.5px;color:var(--ink)}
.db-ago{font-family:var(--font-m);font-size:10px;color:var(--muted);white-space:nowrap}
.db-q{margin:3px 0 0;font-size:13px;color:var(--muted)}
.db-res{margin:6px 0 0;font-size:12.5px;color:var(--db-ok)}
.db-msg.pend .db-res{color:var(--db-pend)}
.db-rating{display:flex;align-items:baseline;gap:6px}
.db-rating-num{font-family:var(--font-d);font-size:clamp(30px,3vw,38px);line-height:1;letter-spacing:-.03em}
.db-rating-star{color:var(--accent);font-size:18px}
.db-rating-sub{margin:6px 0 16px;font-size:12.5px;color:var(--muted)}
.db-bars li{display:grid;grid-template-columns:26px minmax(0,1fr) 30px;align-items:center;gap:10px;padding:3px 0}
.db-bar-lab{font-family:var(--font-m);font-size:10px;color:var(--muted)}
.db-bar{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.db-bar span{display:block;height:100%;min-width:3px;background:var(--accent);border-radius:999px}
.db-bar-num{font-family:var(--font-m);font-size:10.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.db-review{margin-top:14px;padding:11px 12px;border-radius:8px;border:1px solid transparent}
.db-review.ok{background:color-mix(in srgb,var(--db-ok) 7%,transparent);border-color:color-mix(in srgb,var(--db-ok) 20%,transparent)}
.db-review.flag{background:color-mix(in srgb,var(--db-flag) 7%,transparent);border-color:color-mix(in srgb,var(--db-flag) 22%,transparent)}
.db-quote{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.db-by{margin:6px 0 0;font-family:var(--font-m);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.db-flag{margin:6px 0 0;font-family:var(--font-m);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--db-flag)}
.db-svcs li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.db-svcs li:first-child{border-top:0}
.db-dot{width:7px;height:7px;border-radius:50%;background:var(--db-ok)}
.db-svc{color:var(--ink)}
.db-role{font-family:var(--font-m);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right}
.db-svcs li.is-off .db-dot{background:transparent;border:1px solid var(--line-strong)}
.db-svcs li.is-off .db-svc{color:var(--muted)}
.db-foot{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
@media (max-width:1120px){.db-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.db-grid>.db-col:first-child{grid-column:1/-1}}
@media (max-width:900px){.db-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.db-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.db-kpis{grid-template-columns:minmax(0,1fr)}.db-appts li{grid-template-columns:44px minmax(0,1fr);row-gap:5px}.db-appts .db-chip{grid-column:2;justify-self:start}.db-counts{margin-left:0}}
/* anchor jumps must clear the sticky header */
section[id],#main{scroll-margin-top:88px}

/*calculator-css*/
.calc-wrap{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:start}
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,2.4vw,28px)}
.calc-fields{display:flex;flex-direction:column;gap:22px}
.calc-field{display:block}
.calc-field .row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:10px}
.calc-field .name{font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.calc-field .val{font-family:var(--font-d);font-size:20px;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.calc-field input[type="range"]{width:100%;appearance:none;height:22px;background:transparent;cursor:pointer}
.calc-field input[type="range"]::-webkit-slider-runnable-track{height:2px;background:var(--line-strong);border-radius:2px}
.calc-field input[type="range"]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;background:var(--ink);border:0}
.calc-scale{display:flex;justify-content:space-between;margin-top:-4px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.08em;color:var(--muted)}
.calc-field input[type="range"]::-moz-range-track{height:2px;background:var(--line-strong);border-radius:2px}
.calc-field input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ink);border:0}
.calc-field input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.calc-money{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:9px 12px;background:transparent}
.calc-money span{font-family:var(--font-m);font-size:12px;color:var(--muted)}
.calc-money input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-family:var(--font-d);font-size:18px;letter-spacing:-.01em}
.calc-money input:focus{outline:none}
.calc-money:focus-within{border-color:var(--ink)}
.calc-out{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.calc-lab{display:block;font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.calc-big{font-family:var(--font-d);font-size:clamp(38px,4.4vw,54px);line-height:1;letter-spacing:-.035em;margin-top:10px;font-variant-numeric:tabular-nums}
.calc-sub{margin:10px 0 0;font-size:14.5px;color:var(--muted)}
.calc-sub b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}
@media (max-width:900px){.calc-wrap{grid-template-columns:minmax(0,1fr)}}

/* the dashboard reads as an embedded screen, not page furniture */
.db-shell{background:color-mix(in srgb,var(--ink) 5%,var(--bg));border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(12px,1.6vw,18px)}
.db-shell-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 14px}
.db-shell-bar .t{font-family:var(--font-m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.db-shell-bar .dots{display:flex;gap:5px}
.db-shell-bar .dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);display:block}

/* handoff panel: how each system feeds the next one */
.db-handoff{list-style:none;margin:0;padding:0}
.db-handoff li{padding:10px 0;border-top:1px solid var(--line)}
.db-handoff li:first-child{border-top:0;padding-top:0}
.db-handoff .pair{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);flex-wrap:wrap}
.db-handoff .pair .arw{color:var(--accent-ink);font-family:var(--font-m);font-size:11px}
.db-handoff .passes{margin:4px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
.handoff-table{width:100%;border-collapse:collapse;font-size:13.5px}
.handoff-table th{font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:400;padding:0 14px 10px 0}
.handoff-table td{padding:11px 14px 11px 0;border-top:1px solid var(--line);vertical-align:top}
.handoff-table tr td:first-child{white-space:nowrap}
.handoff-table .arw{color:var(--accent-ink);font-family:var(--font-m);font-size:11px;padding:0 6px}
.handoff-table .sys{color:var(--ink)}
.handoff-table .passes{color:var(--muted)}
@media (max-width:620px){.handoff-table,.handoff-table tbody,.handoff-table tr,.handoff-table td{display:block;width:100%}.handoff-table thead{display:none}.handoff-table tr{padding:12px 0;border-top:1px solid var(--line)}.handoff-table td{border:0;padding:0 0 4px}.handoff-table tr td:first-child{white-space:normal}}

/*engage-css*/
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none;background:transparent}
.progress i{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear}
html.has-reveal [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
html.has-reveal [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.has-reveal [data-reveal]{opacity:1;transform:none;transition:none}.progress i{transition:none}}

.pick{display:flex;flex-direction:column;gap:18px}
.pick-tabs{display:flex;gap:8px;flex-wrap:wrap}
.pick-tab{appearance:none;background:var(--bg);border:1px solid var(--line-strong);border-radius:999px;padding:9px 16px;font-family:var(--font);font-size:13.5px;color:var(--ink);cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.pick-tab:hover{background:var(--surface);border-color:var(--ink)}
.pick-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pick-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pick-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,3vw,44px);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(22px,2.6vw,34px);background:var(--surface)}
.pick-h{font-family:var(--font-ed);font-size:clamp(23px,2.5vw,31px);line-height:1.16;letter-spacing:-.012em;margin:0 0 12px;font-variation-settings:"SOFT" 0,"WONK" 0}
.pick-p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 18px;max-width:52ch}
.pick-cost{margin:0;padding-left:14px;border-left:2px solid var(--accent);font-size:13.5px;line-height:1.5;color:var(--ink);max-width:50ch}
.pick-side{display:flex;flex-direction:column;gap:18px;border-left:1px solid var(--line);padding-left:clamp(18px,2.4vw,32px)}
.pick-sys{font-family:var(--font-d);font-size:20px;letter-spacing:-.01em;margin-top:2px}
.pick-week{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.pick-week li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.pick-week li::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
@media (max-width:820px){.pick-panel{grid-template-columns:minmax(0,1fr)}.pick-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}}
@media (max-width:560px){.pick-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.pick-tabs::-webkit-scrollbar{display:none}.pick-tab{flex:none;white-space:nowrap}}

.pick-artifact{margin:22px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.pick-artifact .mono{display:block;margin-bottom:8px}
.pick-sample{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.pick-effort{margin:12px 0 0;font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.vs{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.vs table{width:100%;border-collapse:collapse;min-width:720px;font-size:14px}
.vs th,.vs td{padding:13px 16px;text-align:left;border-top:1px solid var(--line);vertical-align:top;font-weight:400}
.vs thead th{border-top:0;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:14px}
.vs tbody th{color:var(--ink);white-space:nowrap;background:var(--surface);position:sticky;left:0}
.vs td{color:var(--muted)}
.vs .col-us{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--ink)}
.vs thead th.col-us{color:var(--ink)}
.vs .mark{color:var(--accent-ink);margin-right:6px;font-family:var(--font-m);font-size:12px}
.vs-scroll-hint{display:none;margin-top:10px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){.vs-scroll-hint{display:block}}

/*book-steps-css*/
.book-steps{display:flex;gap:20px;margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.book-steps span{display:flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.book-steps i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong);font-style:normal;font-size:10px;font-family:var(--font-m)}
.book-steps span.on{color:var(--ink)}
.book-steps span.on i{background:var(--ink);border-color:var(--ink);color:var(--bg)}
@media (max-width:520px){.book-steps{gap:12px}.book-steps span{font-size:9px}}

/*motion-css*/
/* tinted neutrals: greys with a warm cast, so they look chosen rather than default */
:root{--muted:#605B57;--muted-2:#6E6862;--line:#E7E3DE;--line-strong:#D8D3CD}

/* split headlines rise out of a mask, ease-out so they arrive fast and settle */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block}
html.has-split [data-split] .wi{transform:translateY(115%);will-change:transform}
html.has-split [data-split] .wi{transition:transform .85s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
html.has-split [data-split].is-revealed .wi{transform:none}

/* parallax hooks */
[data-parallax]{transform:translate3d(0,var(--py,0px),0);will-change:transform}

/* magnetic buttons and tilted panels */
[data-magnet]{transition:transform .35s cubic-bezier(.16,1,.3,1)}
[data-tilt]{transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform}

/* pointer glow inside the hero */
[data-glow]{position:relative;isolation:isolate}
[data-glow]::before{content:"";position:absolute;inset:-10% -5% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(420px 320px at var(--mx,30%) var(--my,20%), color-mix(in srgb,var(--accent) 22%,transparent), transparent 70%);
  opacity:.9;transition:opacity .4s ease}

/* paper grain, dialled down to a texture rather than a filter */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="dark"] .grain{opacity:.07;mix-blend-mode:screen}


/* skeleton: the calendar holds its shape while the embed loads */
.cal-skeleton{display:flex;flex-direction:column;gap:14px;padding:8px 2px}
.cal-skeleton .sk{border-radius:8px;background:linear-gradient(100deg,var(--line) 20%,color-mix(in srgb,var(--line) 45%,var(--surface)) 40%,var(--line) 60%);background-size:220% 100%;animation:shimmer 1.4s ease-out infinite}
.cal-skeleton .sk.t{height:16px;width:42%}
.cal-skeleton .sk.grid{height:320px;width:100%}
.cal-skeleton .sk.row{height:44px;width:100%}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.cal-embed{animation:fadeIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* empty state: a zero in the calculator gets an answer, not a blank */
.calc-empty{display:none;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font-size:13.5px;color:var(--ink)}
[data-calc-empty]{display:none}

@media (prefers-reduced-motion: reduce){
  html.has-split [data-split] .wi{transition:none;transform:none}
  [data-parallax]{transform:none}
    .cal-skeleton .sk{animation:none}
  [data-glow]::before{display:none}
}

/*chapters-css*/
.washed{background:color-mix(in srgb,var(--ink) 3%,var(--bg))}
/* chapter label: the page is a story, so each beat is numbered */
.chapter{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.chapter i{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line-strong);border-radius:50%;
  font-family:var(--font-m);font-style:normal;font-size:10px;letter-spacing:.04em;color:var(--muted)}
.chapter span{font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.chapter::after{content:"";flex:1;height:1px;background:var(--line);min-width:24px}
.chapter:has(.chapter-next)::after{display:none}
.chapter-next{margin-left:auto;padding-left:14px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .2s}
.chapter-next span{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.chapter-next:hover{color:var(--ink)}
.chapter-next:hover span{transform:translateX(3px)}
.chapter.on-dark ~ .chapter-next{color:#4A3708}
@media (max-width:640px){.chapter-next{display:none}}
.chapter.on-dark i{border-color:rgba(12,10,8,.35);color:#4A3708}
.chapter.on-dark span{color:#4A3708}
.chapter.on-dark::after{background:rgba(12,10,8,.2)}

/* the spine: where you are in the argument, and what is left */
.chapter-rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:2px;
  opacity:0;transition:opacity .4s ease;pointer-events:none}
.chapter-rail.is-visible{opacity:1;pointer-events:auto}
.chapter-rail a{display:flex;align-items:center;gap:10px;padding:5px 0;text-decoration:none;color:var(--muted)}
.chapter-rail i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);
  font-family:var(--font-m);font-style:normal;font-size:9px;transition:background .25s,border-color .25s,color .25s}
.chapter-rail span{font-family:var(--font-m);font-size:9px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.chapter-rail a:hover i,.chapter-rail a:focus-visible i{border-color:var(--ink);color:var(--ink)}
.chapter-rail a:hover span,.chapter-rail a:focus-visible span{opacity:1;transform:none}
.chapter-rail a[aria-current="true"] i{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chapter-rail a[aria-current="true"] span{opacity:1;transform:none;color:var(--ink)}
@media (max-width:1520px){.chapter-rail{display:none}}
.chapter-rail span{max-width:132px;overflow:hidden;text-overflow:ellipsis}

/* the hand-off between beats */
.bridge{display:flex;align-items:center;gap:10px;margin-top:16px;padding:9px 0;text-decoration:none;
  font-size:14px;color:var(--muted);border-top:1px solid var(--line);max-width:52ch}
.bridge b{font-family:var(--font-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:400}
.bridge em{font-style:normal;color:var(--ink)}
.bridge::after{content:"→";margin-left:auto;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.bridge:hover::after{transform:translateX(4px)}

/*pkg-bento-css*/
.pkg-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.pkg-cell{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);text-decoration:none;color:inherit;transition:border-color .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.pkg-cell:hover{border-color:var(--ink);transform:translateY(-2px)}
.pkg-cell .num{font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;color:var(--muted)}
.pkg-cell .name{font-family:var(--font-d);font-size:22px;letter-spacing:-.015em;margin-bottom:6px}
.pkg-cell .desc{font-size:14px;line-height:1.55;color:var(--muted)}
.pkg-cell .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
.pkg-cell .go{display:none}
.pkg-cell.is-featured{grid-column:span 2;padding:24px;background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pkg-cell.is-featured .name{font-size:clamp(26px,2.6vw,34px);color:var(--bg)}
.pkg-cell.is-featured .desc{color:color-mix(in srgb,var(--bg) 78%,transparent);font-size:15px;max-width:46ch}
.pkg-cell.is-featured .num{color:color-mix(in srgb,var(--bg) 60%,transparent)}
.pkg-cell.is-featured .tag{background:transparent;border-color:rgba(244,242,240,.28);color:var(--bg)}
.pkg-cell.is-featured .go{display:block;font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);padding-top:6px}
@media (max-width:980px){.pkg-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.pkg-cell.is-featured{grid-column:1/-1}}
@media (max-width:620px){.pkg-bento{grid-template-columns:minmax(0,1fr)}}

/* the long comparison folds down to the six rows that decide it */
.vs-toggle{margin-top:14px;appearance:none;background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-m);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);text-decoration:underline;text-underline-offset:4px}
html.vs-collapsed .vs-extra{display:none}

/*calc-stats-css*/
.calc-loss{margin:8px 0 0;font-size:14px;color:var(--muted)}
.calc-loss b{color:var(--flag,#8C2F2F);font-weight:400;font-variant-numeric:tabular-nums}
.calc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.calc-stats dt{font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.calc-stats dd{margin:6px 0 0;font-family:var(--font-d);font-size:19px;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.calc-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);max-width:52ch}
.calc-foot{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--ink);max-width:52ch}
@media (max-width:560px){.calc-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/*db-compact-css*/
/* the dashboard is a preview, so it is sized to read as one screen rather than a scroll */
.db-shell{padding:9px}
.db-shell-bar{margin:0 4px 10px}
.db-kpis{gap:10px}
.db-kpi{padding:9px 11px}
.db-kpi-label{font-size:9px;letter-spacing:.12em}
.db-kpi-value{font-size:clamp(19px,1.75vw,24px);margin-top:3px}
.db-kpi-sub{font-size:11.5px;margin-top:3px}
.db-grid{gap:10px}
.db-col{gap:10px}
/* the right column holds one card now, so it stretches to the grid and pins the quote to its base */
.db-col:last-child .db-card{flex:1;display:flex;flex-direction:column}
.db-col:last-child .db-card .db-review:last-child{margin-top:auto}
.db-card{padding:10px 12px;border-radius:8px}
.db-head{margin-bottom:7px}
.db-title{font-size:9.5px;letter-spacing:.11em}
.db-rev-num{font-size:clamp(22px,2vw,28px)}
.db-rev-of{font-size:11.5px}
.db-track{height:6px;margin-top:9px}
.db-sub{margin:9px 0 3px;font-size:9px}
.db-rows li{font-size:13px;padding:2.5px 0}
.db-appts li{font-size:12.5px;padding:5px 0;grid-template-columns:42px minmax(0,1fr) auto;gap:9px}
.db-appts li.is-next{padding:6px 8px;margin:0 -8px}
.db-time{font-size:11px}
.db-chip{font-size:9px;padding:2.5px 7px}
.db-msg{padding:7px 9px;margin-bottom:5px}
.db-msg-name{font-size:13px}
.db-ago{font-size:9px}
.db-q{font-size:12px;margin:2px 0 0}
.db-res{font-size:12px;margin:4px 0 0}
.db-rating-num{font-size:clamp(22px,2vw,28px)}
.db-rating-star{font-size:15px}
.db-rating-sub{margin:3px 0 10px;font-size:11.5px}
.db-bars li{padding:1px 0}
.db-bar{height:4px}
.db-review{margin-top:7px;padding:7px 9px}
.db-quote{font-size:12px;line-height:1.45}
.db-by{margin:4px 0 0;font-size:9px}
.db-handoff li{padding:5px 0}
.db-handoff .pair{font-size:11.5px}
.db-handoff .passes{font-size:11px;margin-top:2px}
.db-foot{margin:6px 0 0;font-size:11px}

/*depth-css*/
/* shade: the demos sit above the page instead of being printed on it */
.panel,.db-shell,.calc,.pick-panel{
  box-shadow:0 1px 2px rgba(12,10,8,.05), 0 10px 24px -14px rgba(12,10,8,.28), 0 36px 60px -40px rgba(12,10,8,.35)}
html[data-theme="dark"] .panel,html[data-theme="dark"] .db-shell,html[data-theme="dark"] .calc,html[data-theme="dark"] .pick-panel{
  box-shadow:0 1px 2px rgba(0,0,0,.55), 0 14px 34px -18px rgba(0,0,0,.8)}
/* a soft ground behind the dashboard so it reads as a screen on a desk */
#dashboard .wrap{position:relative}
#dashboard .wrap::before{content:"";position:absolute;left:8%;right:8%;top:34%;height:320px;z-index:0;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 50%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 72%);
  filter:blur(6px);opacity:.55}
#dashboard .demo-link,#dashboard .note,#dashboard .bridge,#dashboard .chapter,#dashboard .h2,#dashboard .lead{position:relative;z-index:1}

/* the demos are doors: hovering says so, clicking continues the conversation */
.demo-link{display:block;position:relative;text-decoration:none;color:inherit;border-radius:var(--r-xl);
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.demo-link:hover,.demo-link:focus-visible{transform:translateY(-3px)}
.demo-link:hover .panel,.demo-link:hover .db-shell{box-shadow:0 2px 3px rgba(12,10,8,.06), 0 18px 40px -18px rgba(12,10,8,.36), 0 48px 80px -48px rgba(12,10,8,.45)}
.demo-link:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.demo-hint{position:absolute;left:50%;bottom:-16px;transform:translate(-50%,10px);opacity:0;pointer-events:none;z-index:3;
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--bg);
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(12,10,8,.55);transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.demo-hint i{font-style:normal}
.demo-link:hover .demo-hint,.demo-link:focus-visible .demo-hint{opacity:1;transform:translate(-50%,0)}

/* the hand-off between chapters is a button now, not a footnote */
.bridge{display:inline-flex;width:max-content;max-width:100%;align-items:center;gap:12px;margin-top:22px;padding:13px 18px;text-decoration:none;
  font-size:14.5px;color:var(--ink);border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);
  box-shadow:0 1px 2px rgba(12,10,8,.04);transition:border-color .25s,background .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.bridge b{font-family:var(--font-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:400}
.bridge em{font-style:normal}
.bridge::after{content:"→";margin-left:4px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.bridge:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink);transform:translateY(-1px)}
.bridge:hover b{color:var(--accent-ink)}
.bridge:hover::after{transform:translateX(3px)}
.bridge:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bridge.is-cta{background:var(--ink);border-color:var(--ink);color:var(--bg);font-family:var(--font);
  font-size:13px;letter-spacing:.07em;text-transform:uppercase;padding:15px 26px;gap:0;
  box-shadow:0 10px 24px -14px rgba(12,10,8,.55)}
.bridge.is-quiet{background:transparent;border-color:transparent;color:var(--muted);padding:15px 4px;font-size:14px;box-shadow:none}
.bridge.is-quiet::after{content:"→"}
.bridge.is-quiet:hover{background:transparent;border-color:transparent;color:var(--ink);transform:none}
.bridge.is-quiet:hover::after{transform:translateX(3px)}
.bridge.is-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
html[data-theme="dark"] .bridge.is-cta{background:var(--accent);border-color:var(--accent);color:var(--ink)}
html[data-theme="dark"] .bridge.is-cta:hover{background:var(--bg);border-color:var(--bg);color:var(--ink)}

/* the header next-link gets a visible hit area too */
.chapter-next{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.chapter-next:hover{border-color:var(--ink);background:var(--surface-2)}

/* sections settle into place, but never trap a fast scroll */
@media (prefers-reduced-motion: no-preference) and (min-width:900px){
  html.home{scroll-snap-type:y proximity}
  html.home main > section{scroll-snap-align:start;scroll-snap-stop:normal;scroll-margin-top:88px}
  html.home main > section.no-snap{scroll-snap-align:none}
}
@media (prefers-reduced-motion: reduce){html{scroll-snap-type:none}}

/*fit-css*/
/* the fields and the result sit side by side, so the section is one screen tall */
.calc-inputs{display:flex;flex-direction:column}
.calc-fields{margin-top:clamp(22px,2.4vw,30px)}
.calc .calc-out{margin-top:0;padding-top:0;border-top:0}
.calc{align-self:center}
.calc-actions{grid-column:1;grid-row:2;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
@media (max-width:900px){.calc-actions{grid-column:auto;grid-row:auto;margin-top:22px}}
@media (max-width:1000px){.calc{align-self:stretch}.calc .calc-out{margin-top:0;padding-top:0;border-top:0}}

/* every chapter owns a screen: it fills the viewport, and its content is centred inside */
@media (min-width:1000px){
  html.home main > section:not(.spec){min-height:calc(100svh - 88px);display:flex;flex-direction:column;justify-content:center}
  html.home main > section:not(.spec) > .wrap{width:100%}
}

/* a little air back from the picker and the dashboard so both stay inside that screen */
.pick{gap:14px}
.pick-panel{padding:clamp(20px,2.3vw,26px)}
.pick-p{margin-bottom:14px}
.pick-artifact{margin-top:16px;padding:14px 16px}
.pick-effort{margin-top:10px}

/* short screens (1366x768 laptops): tighten the densest chapters so they still land inside one screen */
@media (min-width:900px) and (max-height:1000px){
  .sec{padding-top:clamp(26px,3vw,38px);padding-bottom:clamp(26px,3vw,38px)}
  .sec-tight{padding-top:clamp(22px,2.6vw,32px);padding-bottom:clamp(22px,2.6vw,32px)}
  #dashboard .h2{font-size:clamp(20px,1.9vw,24px)}
  #dashboard .lead{font-size:14.5px;margin-top:7px;max-width:74ch}
  .db-shell{padding:6px}
  .db-kpi{padding:7px 9px}
  .db-kpi-top,.db-kpi-lab{font-size:8.5px}
  .db-kpi-value{font-size:clamp(16px,1.4vw,19px)}
  .db-kpi-note{font-size:10.5px}
  .db-card{padding:8px 11px}
  .db-foot{display:none}
  .db-review{padding:8px 10px}
  .db-review+.db-review{margin-top:6px}
  .note[data-sample]{font-size:11px}
  .db-card-h{font-size:9px}
  .db-appts li{font-size:12px;padding:4px 0;grid-template-columns:38px minmax(0,1fr) auto}
  .db-rows li{font-size:12px;padding:2px 0}
  .db-msg{padding:6px 8px;margin-bottom:4px}
  .db-msg-q,.db-msg-res{font-size:11.5px}
  .db-rev-num{font-size:clamp(19px,1.7vw,24px)}
  .db-quote{font-size:11.5px}
  .pick-panel{padding:14px 16px}
  .pick-tab{padding:7px 13px;font-size:12.5px}
  .pick-week{gap:6px}
  .pick-effort{display:none}
  .pick-h{font-size:clamp(19px,2vw,24px)}
  .pick-p{font-size:13.8px;line-height:1.55;margin-bottom:12px}
  .pick-artifact{margin-top:12px;padding:12px 14px}
  .pick-sample{font-size:13.5px}
  .pick-week li{font-size:12.5px}
  .pkg-cell .desc{font-size:12.8px;line-height:1.45}
  .pkg-cell{padding:16px}
  .pkg-cell .tags{margin-top:10px}
  .pkg-cell .name{font-size:clamp(19px,2vw,24px)}
  /* room the sections were spending on themselves */
  .sec{padding-top:26px;padding-bottom:26px}
  .sec-tight{padding-top:22px;padding-bottom:22px}
  .hero{padding-top:36px;padding-bottom:34px}
  .hero .h1{font-size:clamp(32px,3.4vw,48px)}
  .hero .lead{margin-top:14px;font-size:17px;line-height:1.5}
  .hero-actions{margin-top:20px}
  .sla-head{margin-top:18px}
  #dashboard{padding-top:16px!important;padding-bottom:16px!important}
  /* the picker */
  .pick-h{font-size:clamp(18px,1.8vw,21px);margin-bottom:8px}
  .pick-p{font-size:13px;line-height:1.45;margin-bottom:10px}
  .pick-cost{font-size:12.5px;line-height:1.45}
  .pick-artifact{margin-top:10px;padding:10px 12px}
  .pick-sample{font-size:12.8px;line-height:1.5}
  .pick-week{gap:5px}
  .pick-week li{font-size:12px;line-height:1.4}
  .pick-sys{font-size:18px}
  .pick-tab{padding:6px 12px;font-size:12px;margin:0}
  /* the dashboard */
  #dashboard .h2{font-size:19px;margin-top:6px!important}
  #dashboard .lead{font-size:13.5px;margin-top:6px!important}
  .db-shell{padding:5px}
  .db-grid{gap:7px}
  .pkg-cell .pain{font-size:8.6px;letter-spacing:.1em;margin-bottom:6px;line-height:1.35}
  .pkg-cell.is-featured .pain{margin-bottom:7px}
  .pkg-bento{gap:9px;margin-top:16px}
  .pkg-cell{padding:12px}
  .pkg-cell .name{margin-bottom:5px}
  .pkg-cell .desc{font-size:11.6px;line-height:1.4}
  .pkg-cell .tags{padding-top:9px;gap:4px}
  .pkg-cell .tag{font-size:8px;padding:2px 6px}
  #packages .h2{font-size:19px;max-width:30ch!important}
  .pkg-cell.is-featured .name{font-size:clamp(19px,1.9vw,23px)}
  .pkg-cell.is-featured .desc{font-size:12.2px;line-height:1.4;max-width:56ch}
  .db-shell{padding:4px}
  .calc-actions{margin-top:2px}
  .bridge{margin-top:14px}
  .db-kpis{gap:8px}
  .db-col{gap:8px}
  .db-kpi{padding:7px 9px}
  .db-kpi-value{font-size:15px}
  .db-card{padding:7px 9px}
  .db-card-h{margin-bottom:4px}
  .db-rev-num{margin-top:2px}
  .db-rows li{font-size:11.5px;padding:1px 0}
  .db-appts li{font-size:11.5px;padding:2px 0}
  .db-msg{padding:4px 7px;margin-bottom:2px}
  .db-kpi-note{font-size:10px}
  .db-msg-q,.db-msg-res{font-size:11px;line-height:1.4}
  .db-msg-name{font-size:12px}
  .db-quote{font-size:11px;line-height:1.4}
  .db-bar{height:3px}
  .db-review{margin-top:5px;padding:6px 8px}
  .db-rev-num{font-size:18px}
  /* the packages */
  .pkg-cell{padding:14px}
  .pkg-cell .name{font-size:clamp(17px,1.8vw,21px)}
  .pkg-cell .desc{font-size:12.2px;line-height:1.42;margin-top:6px}
  .pkg-cell .tag{font-size:8.5px}
  /* the comparison */
  .vs td,.vs th{padding:7px 10px;font-size:12.5px}
}

/*glass-css*/
/* Something for the glass to refract: a warm ambient field behind the whole document. */
html{background:var(--bg)}
html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(44% 38% at 84% 8%,  color-mix(in srgb, var(--gold) 62%, transparent), transparent 62%),
    radial-gradient(30% 26% at 70% 34%, color-mix(in srgb, var(--gold) 34%, transparent), transparent 66%),
    radial-gradient(40% 36% at 4% 88%,  color-mix(in srgb, var(--ink) 20%, transparent), transparent 62%),
    radial-gradient(34% 30% at 30% 8%,  color-mix(in srgb, #8FA9C9 26%, transparent), transparent 68%),
    radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 74%);
  filter:saturate(1.12) blur(0.2px)}
html[data-theme="dark"]::before{
  background:
    radial-gradient(58% 48% at 82% 4%,  color-mix(in srgb, var(--gold) 22%, transparent), transparent 66%),
    radial-gradient(50% 46% at 4% 92%, color-mix(in srgb, #000 55%, transparent), transparent 64%),
    radial-gradient(52% 44% at 50% 50%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 74%)}

/* sections stop being opaque slabs, so the field reads through them */
.sec,.sec-tight{background:transparent}
.sec.washed,.sec-tight.washed{background:color-mix(in srgb, var(--ink) 2.6%, transparent)}
.spec{background:color-mix(in srgb, var(--surface) 55%, transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}

/* the glass itself: translucent paper, a blurred backdrop, and a lit top edge */
.panel,.db-shell,.calc,.pick-panel{
  background-color:color-mix(in srgb, var(--surface) 52%, transparent);
  background-image:linear-gradient(158deg, rgba(255,255,255,.62), rgba(255,255,255,.10) 34%, rgba(255,255,255,0) 62%);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);
  backdrop-filter:blur(26px) saturate(1.7);
  border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(12,10,8,.04),
             0 1px 2px rgba(12,10,8,.05), 0 14px 34px -18px rgba(12,10,8,.28), 0 44px 76px -50px rgba(12,10,8,.36)}
.pick-artifact,.calc-money{background:color-mix(in srgb, var(--surface) 45%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.db-shell{background-color:color-mix(in srgb, var(--surface) 44%, transparent)}
.db-card,.db-kpi{background-color:color-mix(in srgb, var(--surface) 68%, transparent);
  background-image:linear-gradient(158deg, rgba(255,255,255,.55), rgba(255,255,255,0) 46%);
  border-color:rgba(255,255,255,.62)}
html[data-theme="dark"] .panel,html[data-theme="dark"] .db-shell,html[data-theme="dark"] .calc,
html[data-theme="dark"] .pick-panel,html[data-theme="dark"] .db-card,html[data-theme="dark"] .db-kpi{
  background:color-mix(in srgb, #1B1A19 58%, transparent);
  border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 16px 40px -20px rgba(0,0,0,.85)}

/* the header is the most obvious glass in the room */
.site-header{background:color-mix(in srgb, var(--bg) 60%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid color-mix(in srgb, var(--line) 80%, transparent)}
html[data-theme="dark"] .site-header{background:color-mix(in srgb, #141312 66%, transparent)}

/* the pills pick it up a little, so the language is consistent */
.chapter-next,.pick-tab,.bridge{background:color-mix(in srgb, var(--surface) 62%, transparent)}

/* blur is expensive and phones have less to give: keep the tint, drop the filter */
@media (max-width:900px){
  .panel,.db-shell,.calc,.pick-panel,.spec,.site-header{-webkit-backdrop-filter:none;backdrop-filter:none}
  .panel,.db-shell,.calc,.pick-panel,.pick-artifact,.calc-money{background-color:color-mix(in srgb, var(--surface) 88%, transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-header{background:color-mix(in srgb, var(--bg) 94%, transparent)}
  .spec{background:color-mix(in srgb, var(--surface) 92%, transparent)}
}

/* no support, no problem: fall back to the flat paper look */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .panel,.db-shell,.calc,.pick-panel,.db-card,.db-kpi,.spec,.site-header,.chapter-next,.pick-tab,.bridge{
    background:var(--surface)!important}
  .site-header{background:var(--bg)!important}
}

/*copy-and-type-css*/
/* pain first, then the system that removes it */
.pkg-cell .pain{font-family:var(--font-m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-ink);line-height:1.45;margin-bottom:10px}
.pkg-cell.is-featured .pain{color:var(--accent);margin-bottom:12px}
.pkg-cell .name{margin-bottom:8px}
.pkg-cell.is-featured .desc{max-width:52ch}

/* desktop body: a touch larger, with the leading to match */
@media (min-width:1000px){
  body{font-size:16.5px;line-height:1.62}
  .lead{line-height:1.5}
}

/* the service strip: one aligned column on phones instead of a wrapped sentence */
@media (max-width:760px){
  .spec-row{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:18px 0}
  .spec-label{grid-column:1/-1;margin-bottom:8px}
  .spec-item{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;text-align:right}
  .spec-item b{color:var(--ink);white-space:nowrap}
  .spec-note{grid-column:1/-1;margin-left:0;padding-top:10px;border-top:1px solid var(--line)}
}

/*mobile-pass*/
@media (max-width:760px){
  /* taps first: full width actions, comfortable height */
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
  .hero-actions .btn{width:100%;justify-content:center;min-height:48px}
  .calc-actions{flex-direction:column;align-items:stretch;gap:10px}
  .calc-actions .bridge{justify-content:center}
  /* the footer was 1000px of stacked links; two columns halves it */
  .foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .foot-brand{grid-column:1/-1}
  .site-footer{padding:34px 0 22px}
  .foot .tagline{max-width:none}
  /* section rhythm */
  .sec,.sec-tight{padding-top:34px;padding-bottom:34px}
  .spec-row{padding:16px 0}
  .h2{font-size:clamp(25px,6.4vw,32px)}
  .pick-panel{padding:18px}
  .pkg-cell{padding:18px}
  .pkg-cell.is-featured{padding:20px}
}

/*harmony-css*/
/* the bulleted list and the contact card that lived in inline styles on book and contact */
.ticks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--muted)}
.ticks .dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:.62em}
.ticks strong{color:var(--ink);font-weight:400}
.card-pad{padding:22px;display:flex;flex-direction:column;gap:9px}

/* the questionnaire was a widget with its own type; it now speaks the site's language */
.q-title{font-family:var(--font-ed);font-weight:400;font-size:clamp(23px,2.3vw,29px);
  line-height:1.12;letter-spacing:-.015em;margin-bottom:8px;text-wrap:balance}
.q-hint{font-size:15px;line-height:1.55;color:var(--muted);margin-bottom:18px}
.q-input{font-size:17px;padding:13px 15px;border-radius:var(--r-sm);background:var(--surface)}
.q-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--ink)}
.q-option{border-radius:var(--r-sm);font-size:15px}
.q-option:has(input:checked){border-color:var(--ink)}
.q-actions{margin-top:24px}
.q-back{color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.q-back:hover{color:var(--ink)}
.quiz-count{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.quiz-progress{height:3px;border-radius:999px;background:var(--line);overflow:hidden}
.quiz-progress span{display:block;height:100%;background:var(--ink);transition:width .35s cubic-bezier(.16,1,.3,1)}
.book-steps{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.book-steps span{display:flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.book-steps i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);
  font-style:normal;font-size:11px;color:var(--muted);background:transparent}
.book-steps .on{color:var(--ink)}
.book-steps .on i{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/*article-nav-css*/
/* the pillar page uses the same article measure as a blog post, with a slim on-page nav
   instead of a card floating above the first heading */
.toc-inline{margin:0 0 30px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.toc-inline > span{display:block;margin-bottom:12px}
.toc-inline ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 26px;font-size:14.5px}
.toc-inline a{color:var(--muted);text-decoration:none}
.toc-inline a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.toc-inline ol{grid-template-columns:minmax(0,1fr)}}


/*post-image-css*/
.post-figure{margin:0 0 34px}
.post-figure img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  aspect-ratio:16/9;object-fit:cover;background:var(--surface-2)}
.post-figure figcaption{margin-top:9px;font-family:var(--font-m);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);line-height:1.5}
@media (max-width:600px){.post-figure{margin-bottom:26px}.post-figure img{border-radius:var(--r-md)}}

/*blog-index-css*/
.blog-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.blog-empty{margin:28px 0 0;font-size:15px;color:var(--muted)}
.post-card{padding:0;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.post-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.pc-media{display:block;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.pc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.post-card:hover .pc-media img{transform:scale(1.03)}
.pc-fallback{display:grid;place-items:center;height:100%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,var(--surface-2)),var(--surface-2) 62%);
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.pc-body{display:flex;flex-direction:column;gap:11px;padding:20px 22px 22px;flex:1}
.pc-body h2{margin:0}
.pc-body p{margin:0}
.pc-more{margin-top:auto;padding-top:10px}
@media (max-width:620px){.pc-body{padding:16px 18px 18px}.blog-filters{margin-bottom:20px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.blog-filters::-webkit-scrollbar{display:none}.blog-filters .pick-tab{flex:none;white-space:nowrap}}

/*places-css*/
.place-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.place{margin:0;display:flex;flex-direction:column;gap:0}
.place img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--r-lg);background:var(--surface-2)}
.place figcaption{display:flex;flex-direction:column;gap:6px;padding:14px 2px 0}
.place figcaption .mono{color:var(--accent-ink)}
.place figcaption strong{font-family:var(--font-ed);font-weight:400;font-size:19px;letter-spacing:-.01em;line-height:1.2}
.place figcaption span:last-child{font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:900px){.place-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.place-grid{grid-template-columns:minmax(0,1fr);gap:22px}.place img{aspect-ratio:16/9}}

/*article-body-css*/
/* the article body used to override .wrap padding with an inline style, which left the text
   flush against the screen edges on phones */
.article-body{padding-top:40px;padding-bottom:72px}
@media (max-width:600px){.article-body{padding-top:26px;padding-bottom:54px}}

/*saas-hero-css*/
.badge-live{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  background:color-mix(in srgb,var(--gold) 10%,transparent);
  font-family:var(--font-m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink)}
.badge-live i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent);
  animation:sla-pulse 2.6s ease-in-out infinite}
@keyframes sla-pulse{0%,100%{opacity:1}50%{opacity:.45}}

.sla-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:26px;padding-bottom:9px;
  border-bottom:1px solid var(--line);max-width:560px;
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase}
.sla-head span:first-child{color:var(--ink)}
.sla-head span:last-child{color:var(--muted-2)}
.sla-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px;max-width:560px}
.sla{display:flex;flex-direction:column;gap:6px;padding:14px 15px 13px;border-radius:var(--r-md);
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.sla-n{font-family:var(--font-ed);font-size:clamp(23px,2.1vw,29px);line-height:1;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:3px}
.sla-n .u{font-family:var(--font-m);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sla-l{font-family:var(--font-m);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.sla-note{margin:10px 0 0;font-family:var(--font-m);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2)}
html[data-theme="dark"] .sla{background:color-mix(in srgb,#1B1A19 60%,transparent);border-color:rgba(255,255,255,.1)}

/* soft product glow behind the hero, the way a SaaS landing page frames its demo */
.hero{position:relative;overflow:clip}
.hero::before{content:"";position:absolute;inset:-10% -5% auto -5%;height:70%;pointer-events:none;z-index:0;
  background:radial-gradient(58% 60% at 72% 30%, color-mix(in srgb,var(--gold) 22%,transparent), transparent 68%),
             radial-gradient(40% 44% at 18% 10%, color-mix(in srgb,#9DB7D9 16%,transparent), transparent 70%)}
.hero > .wrap{position:relative;z-index:1}

@media (max-width:760px){
  .sla-head{margin-top:20px;max-width:none}
  .sla-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px;max-width:none}
  .sla{padding:11px 12px}
  .sla-l{font-size:8px}
}

/* laptop tier: 1366x768 and 1280x800 need a tighter hero to stay one screen */
@media (min-width:900px) and (max-height:800px){
  .hero .h1{font-size:clamp(29px,3.1vw,43px)}
  .hero{padding-top:30px;padding-bottom:28px}
  .sla{padding:10px 11px}
  .sla-n{font-size:20px}
  .sla-l{font-size:7.6px}
  .sla-head{margin-top:12px;padding-bottom:7px}
  .hero-actions{margin-top:16px}
  .hero .lead{margin-top:12px;font-size:16px;line-height:1.45}
  /* the demo panel, not the copy, sets the hero height at this size */
  .act{padding:8px 0}
  .transcript{margin:0 0 9px 45px;padding:9px 12px}
  .transcript p{font-size:12px;line-height:1.42}
  .panel-body{padding:4px 12px}
}

/*chrome-css*/

.foot{grid-template-columns:1.5fr .9fr .9fr 1fr .9fr}
.foot-brand{display:flex;flex-direction:column;gap:10px}
.foot .addr{font-size:12.5px;color:var(--muted-2);margin:0}
@media(max-width:900px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.foot-brand{grid-column:1/-1}.foot nav,.foot nav a,.foot a{font-size:12.5px}}
.motto{margin:26px 0 0;padding-left:20px;border-left:1px solid var(--accent);font-size:clamp(19px,2.2vw,24px);line-height:1.4;color:var(--accent-ink);max-width:34ch}
.callout{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:22px}
.callout .mono{margin-bottom:8px}
.checklist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.checklist li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:9px}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:760px){.kpi{grid-template-columns:1fr}}
.kpi .card{display:flex;flex-direction:column;gap:6px;padding:24px}
.kpi .v{font-family:var(--font-d);font-size:clamp(30px,3.6vw,40px);line-height:1;font-weight:400;color:var(--ink);letter-spacing:-.03em}
.kpi .l{font-size:14px;line-height:1.45}
.kpi .who{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.pkg-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.pkg-nav{grid-template-columns:1fr}}
.foot nav{gap:2px}
.foot nav a{display:inline-flex;align-items:center;min-height:26px}
.phone{display:inline-flex;align-items:center;min-height:26px}


/*theme*/
/* ============================================================================
   Cobalt: the site-wide theme layer.
   Appended after the chrome CSS by scripts/build-pages.mjs, so it wins the cascade.

   Direction: flat editorial. Rules instead of shadows, tables instead of stat cards,
   square corners, one blue accent, no gold.

   SPACING IS ONE SCALE.
   Every gap is a multiple of 4. Every section shares one block padding. Every text
   stack runs label, heading, lead, action at the same intervals. Do not add inline
   margins or paddings to sections, headings or leads; if a case is missing, add it
   to the rhythm rules below so the whole site moves together.
   ========================================================================== */

:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F4F6FA;
  --surface-wash:#F7F9FC;

  --ink:#0B0D12;
  --ink-soft:#1B2130;
  --obsidian:#0B0D12;

  --muted:#5A6270;
  --muted-2:#7B8494;

  --line:rgba(11,13,18,.10);
  --line2:rgba(11,13,18,.06);
  --line-strong:rgba(11,13,18,.20);

  --accent:#1F4BFF;
  --accent-hover:#1539D6;
  --accent-soft:rgba(31,75,255,.07);
  --accent-ink:#123099;
  --accent-bright:#4C74FF;

  --ok:#0B6B3A;
  --ok-soft:#E8F4EE;
  --warn:#8A4B00;
  --warn-soft:#FDF3E4;

  --gold:#1F4BFF;          /* the glow tokens now follow the accent */
  --teal:#1F4BFF;
  --violet:#5A6270;
  --coral:#B3261E;

  --r-sm:2px;
  --r-md:4px;
  --r-lg:6px;
  --r-xl:6px;

  --font:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --font-d:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --font-b:var(--font);
  --font-m:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --font-ed:'Inter Tight','Segoe UI',system-ui,sans-serif;

  /* ---------------------------------------------------------- spacing scale */
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:24px;
  --s6:32px;
  --s7:48px;
  --s8:64px;

  --sec-pad:32px;          /* block padding, every section */
  --stack-1:8px;           /* chapter label to heading */
  --stack-2:12px;          /* heading to lead, lead to note */
  --stack-3:24px;          /* lead to action row, heading to grid */
  --gut:16px;              /* every grid gutter */
  --card-pad:24px;         /* every card interior */
  --card-pad-tight:16px;   /* dense interiors: table cells, dashboard tiles */
}

/* ---------------------------------------------------------------- type */
body{
  background:var(--bg);
  font-size:16.5px;
  line-height:1.62;
  letter-spacing:-.005em;
}
h1,.h1,h2,.h2,h3,.h3,.pick-h,.pkg-cell .name,.place figcaption strong{
  font-family:var(--font-d);
  font-weight:500;
  letter-spacing:-.032em;
  line-height:1.04;
}
h1,.h1{font-size:clamp(40px,5vw,66px);letter-spacing:-.038em}
h2,.h2{font-size:clamp(27px,3vw,42px);letter-spacing:-.032em;line-height:1.05}
h3,.h3{font-size:22px;letter-spacing:-.024em}
.lead{color:var(--muted);font-size:17.5px;line-height:1.6}
.mono,.label,.spec-label,.sla-l,.sla-head,.chapter span,.quiz-count,.book-steps span{
  letter-spacing:.15em;
}

/* ---------------------------------------------------------------- rhythm
   One block padding, one text stack, one gutter, everywhere. */
main > section,
main > section.hero,
main > .sec,
main > .sec-tight,
body > section.sec,
body > section.sec-tight,
section#dashboard.sec,
section#dashboard.sec.washed{
  padding-block:var(--sec-pad);
}

main > section .chapter{margin-bottom:0}
main > section .chapter + h2,
main > section .chapter + .h2,
main > section .kicker + h2,
main > section .kicker + .h2,
main > section .badge-live + h1,
main > section .badge-live + .h1{
  margin-top:var(--stack-1);
}
main > section h1,
main > section .h1,
main > section h2,
main > section .h2,
main > section h3,
main > section .h3{
  margin-top:0;
  margin-bottom:0;
}
main > section h1 + .lead,
main > section .h1 + .lead,
main > section h2 + .lead,
main > section .h2 + .lead,
main > section h2 + p,
main > section .h2 + p{
  margin-top:var(--stack-2);
}
main > section .lead + .note,
main > section .lead + p.note,
main > section p.note + p.note{
  margin-top:var(--stack-2);
}
main > section .hero-actions,
main > section .actions,
main > section .lead + .hero-actions,
main > section .lead + .actions,
main > section .note + .hero-actions,
main > section .calc-actions,
main > section .close-actions{
  margin-top:var(--stack-3);
}
main > section .grid,
main > section .cards,
main > section .pkg-grid,
main > section .db-shell,
main > section .pick-panel{
  margin-top:var(--stack-3);
}
main > section .sla-head{margin-top:var(--s6)}

/* the laptop tier compressed this section to 16px to make it fit; hold the
   global padding and take the difference out of the tiles instead */
section#dashboard{padding-block:var(--sec-pad)!important}
section#dashboard .h2{margin-top:var(--stack-1)!important}
section#dashboard .lead{margin-top:var(--stack-2)!important}

/* one gutter for every grid on the site */
.grid,
.cards,
.db-grid,
.pkg-grid,
.home-places,
.place-grid,
.post-grid,
.faq-grid,
.quiz-grid{
  gap:var(--gut);
}

/* one interior padding for every card, and none on shells that own their rows */
.card,
.pkg-cell,
.pick-panel,
.calc,
.post-card,
.close{
  padding:var(--card-pad);
}
.quote .card,
.pick-panel{
  padding:var(--card-pad-tight);
}
.panel,
.db-shell,
.calc,
.db-card{
  padding:0;
}

/* ---------------------------------------------------------------- surfaces */
/* No glass on content panels: flat white with a hairline. The mesh provides depth. */
.panel,.db-shell,.calc,.pick-panel,.card,.post-card,.pkg-cell,.place,.quote .card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.panel:hover,.post-card:hover,.pkg-cell:hover{border-color:var(--line-strong);transform:none}
.db-card,.db-kpi{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  background-image:none;
}

/* the only glass left: the sticky header and the ambient band */
.site-header{
  background:color-mix(in srgb,var(--bg) 76%,transparent);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
}
html[data-theme="dark"] .site-header{background:rgba(9,11,15,.72)}

/* the ambient field, in blue */
html::before{
  background:
    radial-gradient(46% 40% at 82% 4%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 64%),
    radial-gradient(34% 32% at 12% 8%, color-mix(in srgb,#7FA2FF 20%,transparent), transparent 66%),
    radial-gradient(40% 36% at 30% 96%, color-mix(in srgb,var(--ink) 8%,transparent), transparent 64%);
}
html[data-theme="dark"]::before{
  background:
    radial-gradient(46% 40% at 82% 4%, color-mix(in srgb,var(--accent) 30%,transparent), transparent 66%),
    radial-gradient(34% 32% at 10% 92%, rgba(0,0,0,.5), transparent 66%);
}

/* ---------------------------------------------------------------- controls */
.btn,.btn-lg,.q-option,.q-input,.calc-money,.chapter-next,.bridge,.pick-tab,.chip,.tag,
.toc-inline,.book-steps i{
  border-radius:var(--r-sm);
}
.btn{
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  font-weight:500;
  letter-spacing:-.005em;
  box-shadow:none;
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);filter:none;transform:none;color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.bridge{
  background:transparent;
  border:1px solid var(--line-strong);
}
.bridge:hover{background:var(--surface-2);border-color:var(--ink);transform:none}
.bridge.is-cta{background:var(--ink);border-color:var(--ink);color:#fff}
.bridge.is-cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.chip,.tag{border-radius:var(--r-sm);border-color:var(--line);background:transparent}
.chip.g{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}

/* ---------------------------------------------------------------- hero */
/* labels are text, not chips: no border, no fill, no dot */
.badge-live{
  border:0;
  padding:0;
  background:none;
  color:var(--accent);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.15em;
}
.panel-bar .dot,.panel-bar .dots{display:none}
.panel-bar .live,
.panel-bar .t{background:none;border:0;padding:0;border-radius:0;color:var(--muted);font-size:9px;letter-spacing:.16em}
.panel-bar .live{color:var(--accent);margin-left:auto}
.chapter i{border:0;background:none;padding:0;color:var(--accent)}
.db-chip{border:0;background:none;padding:0}
.tag,.chip{border:0;background:none;padding:0}
.tag{color:var(--muted)}
.badge-live i{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.accent-text{color:var(--accent)}
.hero-copy h1{margin-top:var(--s4)}
.hero-copy .lead{margin-top:var(--s4)}

/* the guarantees become a ruled table, not four cards */
.sla-head{
  padding:10px 0 9px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line);
  max-width:none;
  color:var(--muted);
}
.sla-head span:first-child{color:var(--ink)}
.sla-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:0;
  max-width:none;
}
.sla{
  background:transparent;
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  padding:18px 20px 6px 0;
}
.sla:last-child{border-right:0}
.sla-n{font-family:var(--font-d);font-weight:500;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.04em;color:var(--ink)}
.sla-n .u{font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;color:var(--accent)}
.sla-l{color:var(--muted);font-size:8.5px;letter-spacing:.14em}

/* hero glow: cooler and further back */
.hero::before{
  background:
    radial-gradient(52% 56% at 74% 26%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 70%),
    radial-gradient(38% 42% at 14% 8%, color-mix(in srgb,#7FA2FF 14%,transparent), transparent 72%);
}

/* the demo panel reads as a table */
.panel-bar{border-bottom:1px solid var(--line);padding:12px 16px}
.panel-bar .dot{background:var(--line-strong)}
.panel-body{padding:0 16px 8px}
.act{border-top:1px solid var(--line2);padding:12px 0}
.act:first-child{border-top:0}
.act .st{font-family:var(--font-m);font-size:8px;letter-spacing:.12em;color:var(--muted-2);border:0;padding:0}
.panel-note{border-top:1px solid var(--line);padding:12px 16px;font-size:11px;margin:0}

/* ---------------------------------------------------------------- dashboard */
.db-shell-bar{border-bottom:1px solid var(--line);padding:12px 16px}
.db-kpi-lab,.db-card-h,.db-rows li span,.db-appts .db-time,.db-q{letter-spacing:.03em}
.db-kpi-value,.db-rev-num,.db-rating-num,.calc-big,.calc-stats dd{font-family:var(--font-d);font-weight:500;letter-spacing:-.035em}
.db-bar{background:var(--line);border-radius:0}
.db-bar span{background:var(--accent);border-radius:0}
.db-chip{border-radius:var(--r-sm);border-color:var(--line)}
.db-msg{border-radius:var(--r-sm);background:var(--surface-2)}
.db-review{border-radius:var(--r-sm)}

/* ---------------------------------------------------------------- sections */
.washed,.sec.washed,.sec-tight.washed{background:var(--surface-wash)}
.chapter i{border-radius:2px;border-color:var(--line-strong)}
.chapter-rail a span{letter-spacing:.14em}
.spec{border-color:var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.spec-label,.spec-note{color:var(--muted)}
.spec-item b{font-family:var(--font-d);font-weight:500;letter-spacing:-.02em}

/* comparison table */
.vs th{background:var(--surface-2);border-color:var(--line)}
.vs td{border-color:var(--line2)}
.vs .is-us{background:var(--accent-soft)}

/* photos */
.place,.post-figure img{border-radius:var(--r-md)}
.place figcaption strong{font-weight:500}

/* footer */
.site-footer{border-top:1px solid var(--line);background:var(--surface)}
.foot .label{color:var(--muted-2)}
.foot a:hover{color:var(--accent)}

/* dark mode keeps the same geometry, inverted */
html[data-theme="dark"]{
  --bg:#0A0C10;
  --surface:#0E1116;
  --surface-2:#12161D;
  --surface-wash:#0C0F14;
  --ink:#F2F4F7;
  --ink-soft:#D7DCE4;
  --muted:rgba(242,244,247,.66);
  --muted-2:rgba(242,244,247,.45);
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.24);
  --accent:#5B7BFF;
  --accent-hover:#7C95FF;
  --accent-soft:rgba(91,123,255,.14);
  --accent-ink:#AFC0FF;
}
html[data-theme="dark"] .btn{color:#06080C}
html[data-theme="dark"] .btn-ghost{color:var(--ink);border-color:var(--line-strong);background:transparent}
html[data-theme="dark"] .btn-ghost:hover{color:var(--ink);border-color:var(--ink);background:transparent}
html[data-theme="dark"] .btn:hover{color:#06080C}
html[data-theme="dark"] .bridge.is-cta{background:var(--accent);border-color:var(--accent);color:#06080C}
html[data-theme="dark"] .sla-n .u,
html[data-theme="dark"] .accent-text{color:var(--accent-ink)}

/* ---------------------------------------------------------------- markets strip */
.markets-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:0;
}
.markets-kicker{display:block;margin-bottom:var(--stack-1);color:var(--accent);letter-spacing:.18em}
.markets-head .h2{margin:0}
.markets-head .note{margin:0;max-width:40ch;text-align:right}
.home-places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s4)}
.hp{position:relative;margin:0;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2)}
.hp img{display:block;width:100%;height:auto;aspect-ratio:16/6.4;object-fit:cover;filter:saturate(.92)}
.hp figcaption{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  padding:34px 14px 12px;color:#fff;
  background:linear-gradient(to top, rgba(6,8,14,.88), rgba(6,8,14,.42) 55%, transparent)
}
.hp figcaption span{font-family:var(--font-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px}
.hp figcaption span::before{content:"";width:5px;height:5px;background:var(--accent);display:block}
.hp figcaption em{font-style:normal;font-family:var(--font-d);font-weight:500;font-size:13.5px;letter-spacing:-.01em;opacity:.92}

/* the blog filter row needs a visible pressed state in this theme too */
.blog-filters .pick-tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
html[data-theme="dark"] .blog-filters .pick-tab[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#06080C}

/* ---------------------------------------------------------------- small screens */
@media (max-width:760px){
  :root{--sec-pad:24px;--card-pad:16px;--gut:12px;--stack-3:20px}
  body{padding-bottom:54px}      /* clearance for the free-plan Netlify badge */
  .sla-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sla{padding:14px 12px 4px 0}
  .sla:nth-child(2n){border-right:0;padding-left:14px}
  .sla:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sla-n{font-size:30px}
  .sla-l{color:#4B5361}
  .markets-head .note{text-align:left;max-width:none;margin-top:var(--s2)}
  .home-places{grid-template-columns:minmax(0,1fr);margin-top:var(--s3)}
  .hp img{aspect-ratio:16/7}
}

/* ---------------------------------------------------------------- no ornamental boxes
   A border is an affordance or a data edge. It is not decoration. Anything that is one
   clickable block of content reads as a rule and a hover wash instead of a card. */
.pkg-cell,
.card.sol,
.quote .card,
.card.met{
  border:0;
  border-radius:0;
  background:transparent;
  padding:var(--s5) 0;
  border-top:1px solid var(--line);
  box-shadow:none;
}
.pkg-cell:hover,
.card.sol:hover{
  background:var(--accent-soft);
  border-top-color:var(--accent);
}
.pkg-cell.is-featured{border-top:2px solid var(--accent)}
.pkg-cell .num,
.card.met .k{color:var(--accent)}

/* the solutions list keeps its internal grid, without inline gaps */
.card.sol{gap:var(--s4)}
@media (max-width:760px){
  .pkg-cell,.card.sol{padding:var(--s4) 0}
}

/* the list rows keep an affordance in the resting state, not only on hover */
.sol > * + *{margin-top:var(--s3)}
.sol .sol-go{
  margin-top:var(--s4);display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.sol:hover .sol-go{text-decoration:underline;text-underline-offset:3px}
.chip.k{
  border:0;background:none;padding:0;color:var(--accent);
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}

/* boxless labels need a separator, or they run together */
.chip + .chip::before,
.tag + .tag::before{
  content:"·";
  margin-right:7px;
  color:var(--muted-2);
}
@media (max-width:760px){
  .chip + .chip::before{content:"·";margin-right:6px}
}

/* the dark summary panel had no interior padding once its inline styles went */
.glow-card{
  padding:var(--card-pad);
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.14);
}
.glow-card::before{height:2px}
.glow-card > * + *{margin-top:var(--s3)}
.glow-card > div > div + div{margin-top:var(--s2)}
.glow-card .dot{
  width:5px;height:5px;border-radius:0;background:var(--accent);
  margin:8px 10px 0 0;flex:0 0 auto;box-shadow:none;
}
.glow-card p{color:rgba(244,242,240,.62)!important;font-size:12.5px!important;margin-top:var(--s4)!important;line-height:1.5}

/* an accent chip is accent text, not a tinted pill */
.chip.g,.tag.g{background:none;border:0;color:var(--accent);padding:0}

/* metadata inside a list row is one voice: no single tag shouting in accent */
.sol .chip,.sol .chip.g,.pkg-cell .chip,.pkg-cell .chip.g{color:var(--muted)}