/* ============================================================
   MGO Data · shared stylesheet for all pages
   Brand: dark base, periwinkle accent, green reserved for STATUS only.
   Fonts: Inter (UI), Newsreader italic (accents), JetBrains Mono
   (numbered section labels + timestamps only, kept minimal so the
   site reads premium, not developer-ish).
   ============================================================ */

:root{
  --ink-950:#0A0B0E;--ink-900:#0F1116;--surface-800:#14161C;--surface-700:#1A1D24;
  --line:rgba(232,236,248,.08);--line-strong:rgba(232,236,248,.16);
  --text-100:#F2F4F8;--text-60:rgba(242,244,248,.62);--text-40:rgba(242,244,248,.40);
  --signal-500:#7B87FF;--signal-600:#5E6BF2;--signal-200:#C3C9FF;--signal-glow:rgba(123,135,255,.22);
  --live-400:#5FE3A1;--amber:#F0B44A;--flag-400:#FF7A7A;
  --sans:'Inter',system-ui,sans-serif;--serif:'Newsreader',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --r-card:16px;--r-card-lg:22px;--r-pill:999px;--container:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink-950);color:var(--text-100);font-family:var(--sans);font-weight:400;line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
@media(min-width:900px){.wrap{padding:0 48px}}

.serif{font-family:var(--serif);font-style:italic;font-weight:400}
h1,h2{letter-spacing:-.025em;line-height:1.06;font-weight:650}
h1{font-size:clamp(2.9rem,6.4vw,4.9rem);letter-spacing:-.032em}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.35rem;font-weight:600;letter-spacing:-.012em}
.lead{font-size:clamp(1.08rem,2vw,1.24rem);color:var(--text-60);line-height:1.68}
.muted{color:var(--text-60)}.dim{color:var(--text-40)}
.center{text-align:center}

/* numbered section labels, the [001] pattern */
.seclabel{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal-200);display:inline-flex;align-items:center;gap:10px}
.seclabel::before{content:attr(data-num);color:var(--text-40)}

/* status language: green = live/working, amber = pending/coming. Nothing else is green. */
.dot{width:7px;height:7px;border-radius:50%;background:var(--live-400);box-shadow:0 0 8px var(--live-400);flex:none;display:inline-block}
.statuspill{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 12px}
.statuspill.live{background:rgba(95,227,161,.12);color:var(--live-400)}
.statuspill.soon{background:rgba(240,180,74,.12);color:var(--amber)}
.statuspill.holder{background:rgba(240,180,74,.12);color:var(--amber);border:1px dashed rgba(240,180,74,.45)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill);padding:15px 26px;font-weight:600;font-size:15.5px;cursor:pointer;border:1px solid transparent;transition:.18s;font-family:var(--sans)}
.btn-primary{background:var(--signal-500);color:#0a0b12}
.btn-primary:hover{background:var(--signal-600);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--text-100)}
.btn-ghost:hover{border-color:var(--signal-500)}
.btn-lg{padding:18px 32px;font-size:16.5px}

section{padding:104px 0;position:relative}
@media(max-width:700px){section{padding:68px 0}}
.bg-900{background:var(--ink-900)}
.sechead{max-width:760px}
.sechead h2{margin:16px 0 14px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.fluid,.marquee-track{animation:none!important}}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(10,11,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.02em;flex:none}
.brand .brand-icon{width:26px;height:26px;border-radius:7px;flex:none}
.brand .co{font-weight:450;color:var(--text-60)}
.nav-links{display:flex;gap:30px}
.nav-links a{color:var(--text-60);font-size:14.5px;font-weight:500;transition:.15s;position:relative;padding:6px 0}
.nav-links a:hover{color:var(--text-100)}
.nav-links a[aria-current="page"]{color:var(--text-100)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--signal-500)}
.nav-acts{display:flex;align-items:center;gap:10px;flex:none}
.nav-cta{padding:10px 20px;font-size:14px}
.menu-btn{display:none;background:none;border:0;color:var(--text-100);font-size:24px;cursor:pointer;line-height:1}
@media(max-width:920px){.nav-links{display:none}.nav-acts .btn-ghost{display:none}.menu-btn{display:block}}
/* desktop: true 3-column nav so the tab group is centered on the page,
   independent of the brand and action widths */
@media(min-width:921px){
  .nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .nav-links{justify-self:center}
  .nav-acts{justify-self:end}
}

/* mobile sheet */
.sheet{display:none;position:fixed;inset:0;z-index:99;background:var(--ink-950);flex-direction:column;padding:28px;overflow:auto}
.sheet.open{display:flex}
.sheet a.navline{padding:17px 0;font-size:22px;font-weight:550;border-bottom:1px solid var(--line)}
.sheet .close-row{display:flex;justify-content:flex-end}
.sheet .close-row button{background:none;border:0;color:#fff;font-size:28px;cursor:pointer}

/* ---------- hero + moving periwinkle gradient (KEEP: Brandon likes this) ---------- */
.fluid{position:absolute;inset:-20%;z-index:0;background:
 radial-gradient(40% 50% at 20% 25%,hsl(233 55% 16%),transparent 60%),
 radial-gradient(45% 55% at 80% 20%,hsl(237 65% 28%/.55),transparent 60%),
 radial-gradient(50% 60% at 65% 80%,hsl(250 60% 22%/.5),transparent 60%),
 radial-gradient(30% 40% at 30% 75%,hsl(0 0% 100%/.05),transparent 60%),
 radial-gradient(60% 70% at 50% 50%,hsl(233 45% 12%/.6),transparent 70%);
 background-color:var(--ink-950);background-size:220% 220%;animation:fluid 16s ease-in-out infinite;filter:saturate(1.05)}
@keyframes fluid{0%{background-position:0% 0%}25%{background-position:60% 30%}50%{background-position:100% 70%}75%{background-position:35% 100%}100%{background-position:0% 0%}}

.hero{position:relative;overflow:hidden;padding:110px 0 84px;text-align:center}
.hero .wrap{position:relative;z-index:1;max-width:900px}
.hero .eyebrow-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:8px 18px;font-size:13.5px;color:var(--text-60);background:rgba(20,22,28,.5)}
.hero h1{margin:26px auto 22px;max-width:16ch}
.hero .lead{max-width:58ch;margin:0 auto}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.hero .microline{font-size:13.5px;color:var(--text-40);margin-top:18px}

/* interior page hero */
.page-hero{position:relative;overflow:hidden;padding:96px 0 72px;text-align:center}
.page-hero .fluid{opacity:.6}
.page-hero .wrap{position:relative;z-index:1;max-width:820px}
.page-hero h1{font-size:clamp(2.5rem,5.4vw,4rem)}
.page-hero .lead{margin:18px auto 0;max-width:58ch}

/* ---------- DT 1.5 workspace preview panel (themed product panel, not a terminal) ---------- */
.workpanel{position:relative;z-index:1;max-width:820px;margin:56px auto 0;background:linear-gradient(180deg,var(--surface-700),var(--surface-800));border:1px solid var(--line-strong);border-radius:var(--r-card-lg);overflow:hidden;box-shadow:0 40px 100px -34px rgba(0,0,0,.75),0 0 0 1px rgba(123,135,255,.05);text-align:left}
.wp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);background:rgba(10,11,14,.35)}
.wp-title{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px}
.wp-title .brand-icon{width:20px;height:20px;border-radius:6px}
.wp-tag{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-40);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px}
.wp-body{padding:10px 12px 14px;min-height:300px}
.wp-row{display:flex;align-items:center;gap:14px;padding:13px 12px;border-radius:12px;opacity:0;transform:translateY(8px);animation:wpIn .5s forwards}
.wp-row+.wp-row{border-top:1px solid var(--line)}
.wp-row:hover{background:rgba(123,135,255,.05)}
@keyframes wpIn{to{opacity:1;transform:none}}
.wp-time{font-family:var(--mono);font-size:12px;color:var(--text-40);flex:none;width:44px}
.wp-lane{flex:none;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--signal-200);background:rgba(123,135,255,.12);border-radius:var(--r-pill);padding:4px 11px;width:96px;text-align:center}
.wp-text{flex:1;font-size:14px;color:var(--text-60)}
.wp-state{flex:none;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 10px}
.wp-state.done{background:rgba(95,227,161,.12);color:var(--live-400)}
.wp-state.review{background:rgba(240,180,74,.12);color:var(--amber)}
.wp-state.soon{background:rgba(240,180,74,.12);color:var(--amber);border:1px dashed rgba(240,180,74,.45)}
@media(max-width:640px){.wp-time{display:none}.wp-lane{width:auto}}

/* ---------- marquee ---------- */
.marquee{background:var(--ink-900);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden;display:flex;align-items:center;gap:24px}
.marquee .lbl{flex:none;padding-left:24px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-40)}
.marquee-vp{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;white-space:nowrap;animation:marq 36s linear infinite;font-size:14.5px;font-weight:500;color:var(--text-40)}
.marquee-track span{padding:0 22px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- cards ---------- */
.cardgrid{display:grid;gap:18px;margin-top:40px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.g3,.g5{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.g2,.g3,.g5{grid-template-columns:1fr}}
.card{background:var(--surface-800);border:1px solid var(--line);border-radius:var(--r-card-lg);padding:30px;transition:.22s}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.card .idx{font-family:var(--mono);font-size:12px;color:var(--text-40)}
.card h3{margin:12px 0 10px}
.card p{font-size:15px;color:var(--text-60)}

/* two-path cards */
.pathcard{background:linear-gradient(180deg,var(--surface-700),var(--surface-800));border:1px solid var(--line-strong);border-radius:26px;padding:38px;display:flex;flex-direction:column;gap:14px;position:relative;transition:.22s}
.pathcard:hover{transform:translateY(-4px);border-color:var(--signal-500)}
.pathcard .who{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-200)}
.pathcard h3{font-size:1.7rem}
.pathcard p{color:var(--text-60);font-size:15.5px;flex:1}
.pathcard ul{list-style:none;margin:2px 0 10px}
.pathcard li{padding:9px 0 9px 24px;border-top:1px solid var(--line);color:var(--text-60);font-size:14.5px;position:relative}
.pathcard li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:9px;border-radius:3px;background:var(--signal-glow);border:1px solid var(--signal-500)}
.pathcard .btn{align-self:flex-start}

/* numbered work rows */
.workrow{display:grid;grid-template-columns:.92fr 1.08fr;gap:36px;padding:38px 0;border-top:1px solid var(--line)}
@media(max-width:820px){.workrow{grid-template-columns:1fr;gap:16px}}
.workrow .num{font-family:var(--mono);color:var(--signal-200);font-size:13px;letter-spacing:.08em}
.workrow h3{margin:10px 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:9px;align-content:flex-start}
.chip{background:var(--surface-800);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;font-size:13.5px;color:var(--text-60)}

/* capability board (DT 1.5 live vs rolling out) */
.capband{margin-top:40px;border:1px solid var(--line-strong);border-radius:var(--r-card-lg);overflow:hidden}
.caphead{padding:16px 24px;border-bottom:1px solid var(--line);background:rgba(20,22,28,.6);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.caphead .t{font-weight:600;font-size:15px}
.caprow{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:20px 24px;border-bottom:1px solid var(--line);background:var(--surface-800)}
.caprow:last-child{border-bottom:0}
.caprow .cap-name{font-weight:600;font-size:15px}
.caprow p{font-size:14.5px;color:var(--text-60)}
@media(max-width:640px){.caprow{grid-template-columns:1fr;gap:8px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:22px;border-top:1px solid var(--line-strong)}
.step .n{font-family:var(--mono);color:var(--signal-200);font-size:12.5px;letter-spacing:.1em}
.step h3{margin:10px 0 8px;font-size:1.1rem}
.step p{font-size:14.5px;color:var(--text-60)}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;align-items:start}
@media(max-width:900px){.prices{grid-template-columns:1fr}}
.pcard{background:var(--surface-800);border:1px solid var(--line);border-radius:var(--r-card-lg);padding:30px}
.pcard.raised{background:var(--surface-700);border:1px solid var(--signal-500);position:relative}
.pcard .tag{position:absolute;top:-12px;left:26px;background:var(--signal-500);color:#0a0b12;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:var(--r-pill)}
.pcard .pname{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-40)}
.pcard .price{font-size:2.4rem;font-weight:650;letter-spacing:-.02em;margin:12px 0 4px}
.pcard .price small{font-size:1rem;color:var(--text-40);font-weight:400}
.pcard p{color:var(--text-60);font-size:14.5px;margin:8px 0 18px}
.pcard ul{list-style:none;margin:0 0 24px}
.pcard li{padding:8px 0 8px 22px;border-top:1px solid var(--line);color:var(--text-60);font-size:14px;position:relative}
.pcard li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:9px;border-radius:3px;background:var(--signal-glow);border:1px solid var(--signal-500)}
.pcard .btn{width:100%}

/* ---------- home featured case studies (section two of the home page).
   Four numbered cards, big result lines, one visual block each.
   All content REAL: live audit, real client logo, reserved slots,
   publishing standard. No invented metrics live here, ever. ---------- */
.csfeat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
@media(max-width:1080px){.csfeat{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.csfeat{grid-template-columns:1fr}}
.csf{position:relative;display:flex;flex-direction:column;min-height:420px;border:1px solid var(--line-strong);border-radius:var(--r-card-lg);background:linear-gradient(180deg,var(--surface-700),var(--surface-800));padding:22px 22px 24px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
a.csf{color:inherit}
.csf:hover,.csf:focus-visible{transform:translateY(-5px);border-color:var(--signal-500);box-shadow:0 34px 80px -36px rgba(0,0,0,.8),0 0 0 1px rgba(123,135,255,.12)}
.csf-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.csf-num{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--text-40)}
.csf-visual{position:relative;height:150px;flex:none;border-radius:14px;border:1px solid var(--line);margin-bottom:18px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(120% 140% at 18% 8%,rgba(123,135,255,.30),rgba(123,135,255,.05) 55%,transparent 78%),var(--ink-900)}
.csf-visual.reserved{border-style:dashed;border-color:rgba(240,180,74,.4);background:repeating-linear-gradient(-45deg,rgba(240,180,74,.045) 0 12px,transparent 12px 24px),var(--ink-900)}
.csf-big{font-size:clamp(1.3rem,1.6vw,1.5rem);font-weight:650;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px}
.csf p{font-size:13.5px;color:var(--text-60);line-height:1.6}
.csf .go{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600;color:var(--signal-200);display:inline-flex;align-items:center;gap:7px}
.csf .go::after{content:"\2192";transition:transform .2s}
.csf:hover .go::after{transform:translateX(4px)}
.mini-findings{display:flex;flex-direction:column;gap:7px;width:94%}
.mini-findings .mf{display:flex;gap:7px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--text-60);background:rgba(10,11,14,.72);border:1px solid var(--line);border-radius:8px;padding:6px 8px;white-space:nowrap;overflow:hidden}
.mini-findings .mf .tx{overflow:hidden;text-overflow:ellipsis}
.mini-findings .mf .sev{margin-top:0}
.statuspill.std{background:rgba(123,135,255,.12);color:var(--signal-200)}

/* case study cards */
.csgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
@media(max-width:820px){.csgrid{grid-template-columns:1fr}}
.cscard{background:var(--surface-800);border:1px solid var(--line);border-radius:var(--r-card-lg);padding:32px;transition:.2s}
.cscard.placeholder{border-style:dashed;border-color:rgba(240,180,74,.35);background:rgba(240,180,74,.03)}
.cscard .cs-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.cscard h3{margin-bottom:10px}
.cscard p{color:var(--text-60);font-size:15px}
.findlist{margin-top:18px}
.findrow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--text-60)}
.sev{font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:3px 9px;border-radius:7px;flex:none;margin-top:2px;text-transform:uppercase}
.sev.hi{background:rgba(255,122,122,.14);color:var(--flag-400)}
.sev.med{background:rgba(240,180,74,.14);color:var(--amber)}
.sev.ok{background:rgba(95,227,161,.13);color:var(--live-400)}
.sev.info{background:rgba(123,135,255,.13);color:var(--signal-200)}

/* faq */
.faq{max-width:820px;margin-top:36px}
details{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:var(--surface-800);overflow:hidden}
summary{cursor:pointer;list-style:none;padding:19px 24px;font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--signal-200);font-size:20px;font-weight:400}
details[open] summary::after{content:"\2212"}
details p{padding:0 24px 20px;color:var(--text-60);font-size:15px}

/* story / about */
.storyblock{max-width:740px;margin:0 auto}
.storyblock p{font-size:clamp(1.05rem,1.8vw,1.2rem);color:var(--text-60);margin-bottom:22px;line-height:1.75}
.storyblock p strong{color:var(--text-100);font-weight:600}
.pullquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.35;color:var(--text-100);border-left:3px solid var(--signal-500);padding-left:26px;margin:36px 0}

/* forms (book page) */
.formcard{max-width:680px;margin:44px auto 0;background:var(--surface-800);border:1px solid var(--line-strong);border-radius:var(--r-card-lg);padding:38px}
@media(max-width:640px){.formcard{padding:26px 20px}}
.field{margin-bottom:20px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px}
.field .hint{font-weight:400;color:var(--text-40);font-size:12.5px;margin-left:6px}
.field input,.field select,.field textarea{width:100%;background:var(--ink-900);border:1px solid var(--line-strong);border-radius:12px;padding:13px 15px;color:var(--text-100);font-size:15px;font-family:var(--sans)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid rgba(123,135,255,.4);border-color:var(--signal-500)}
.formnote{font-size:13px;color:var(--text-40);margin-top:14px}
.formnote.warn{color:var(--amber)}

/* client logo strip: desaturated light marks on the dark surface,
   full color on hover. No metrics live here, ever. */
.logostrip{margin-top:40px;display:flex;align-items:center;gap:36px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-card-lg);background:var(--surface-800);padding:24px 30px}
.logostrip .lbl{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-40)}
.clientlogo{position:relative;display:inline-flex;height:44px}
.clientlogo img{height:44px;width:auto;display:block}
.clientlogo .mono{opacity:.78;transition:opacity .25s}
.clientlogo .color{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.clientlogo:hover .mono,.clientlogo:focus-visible .mono{opacity:0}
.clientlogo:hover .color,.clientlogo:focus-visible .color{opacity:1}
/* larger logo variant for client cards + card-level hover trigger,
   so the greyscale-to-color reveal fires when hovering the whole card */
.clientlogo.lg,.clientlogo.lg img{height:58px}
.cscard.client:hover .clientlogo .mono,.csf:hover .clientlogo .mono,.cscard.client:focus-within .clientlogo .mono,.csf:focus-visible .clientlogo .mono{opacity:0}
.cscard.client:hover .clientlogo .color,.csf:hover .clientlogo .color,.cscard.client:focus-within .clientlogo .color,.csf:focus-visible .clientlogo .color{opacity:1}
.cscard.client{border-color:var(--line-strong)}
.cscard.client:hover{border-color:var(--signal-500)}
.cscard.client .clientlogo{margin:4px 0 18px}

/* notices */
.honesty{margin-top:34px;padding:20px 24px;background:var(--surface-800);border:1px solid var(--line);border-left:3px solid var(--signal-500);border-radius:12px;color:var(--text-60);font-size:14.5px}
.honesty b{color:var(--text-100)}

/* final CTA */
.finalcta{position:relative;overflow:hidden;text-align:center}
.finalcta .fluid{opacity:.55}
.finalcta .wrap{position:relative;z-index:1;max-width:780px}
.finalcta h2{font-size:clamp(2.2rem,5vw,3.6rem);margin:16px 0 18px}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 36px;color:var(--text-40);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:36px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-grid .tag{margin-top:14px;max-width:36ch;line-height:1.6}
.foot-col .h{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-60);margin-bottom:14px}
.foot-col a{display:block;padding:5px 0;color:var(--text-40);transition:.15s}
.foot-col a:hover{color:var(--text-100)}
.foot-base{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}

/* ============================================================
   Mobile refinements. Every rule below is scoped to a max-width
   media query on purpose: desktop rendering must not change.
   ============================================================ */
@media(max-width:920px){
  /* bigger tap target for the hamburger without shifting layout */
  .menu-btn{padding:10px 12px;margin:-10px -12px -10px -4px}
  .sheet a.navline{padding:18px 0}
  .sheet .close-row button{padding:10px 12px;margin:-6px -12px 0 0}
}
@media(max-width:700px){
  .hero{padding:84px 0 64px}
  .page-hero{padding:76px 0 56px}
  .workpanel{margin-top:42px}
  .marquee{gap:16px}
  .marquee .lbl{padding-left:20px;font-size:11px}
  .logostrip{gap:18px 26px;padding:20px 22px}
  .csf{min-height:0}
  .csfeat{gap:14px;margin-top:36px}
  .foot-base{justify-content:flex-start}
}
@media(max-width:480px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  h1{font-size:clamp(2.35rem,11vw,2.9rem)}
  .hero .lead,.page-hero .lead{font-size:1.05rem}
  .cta-row .btn{flex:1 1 100%}
  .btn-lg{padding:16px 24px;font-size:15.5px}
  .wp-row{flex-wrap:wrap;row-gap:7px;padding:12px 10px}
  .wp-text{flex:1 1 100%;order:3}
  .wp-body{min-height:0}
  .pathcard{padding:28px 22px}
  .card{padding:24px 20px}
  .cscard{padding:24px 20px}
  .csf{padding:20px 18px 22px}
  .workrow{padding:30px 0}
  .caprow{padding:16px 18px}
  .caphead{padding:14px 18px}
  summary{padding:16px 18px}
  details p{padding:0 18px 18px}
  .honesty{padding:16px 18px}
  .findrow{flex-wrap:wrap}
  .prices{gap:22px}
  .pcard .tag{left:20px}
}

/* ============================================================
   Get Started page (get-started.html) only. Every class below is
   new and gs- or code-prefixed so nothing above can regress.
   ============================================================ */
.gs-steps{margin-top:40px;display:flex;flex-direction:column;gap:0}
.gs-step{display:grid;grid-template-columns:88px 1fr;gap:26px;padding:34px 0;border-top:1px solid var(--line)}
.gs-step:last-child{border-bottom:1px solid var(--line)}
@media(max-width:640px){.gs-step{grid-template-columns:1fr;gap:10px;padding:26px 0}}
.gs-step>div{min-width:0}/* grid items default to min-width:auto, which lets wide tables/code expand the page on mobile */
.gs-step .sn{font-family:var(--mono);color:var(--signal-200);font-size:12.5px;letter-spacing:.1em;padding-top:4px;white-space:nowrap}
.gs-step h3{margin:0 0 8px;font-size:1.2rem}
.gs-step p{font-size:15px;color:var(--text-60)}
.gs-step p+p{margin-top:8px}
.gs-step .statuspill{margin-left:10px;vertical-align:2px}
.codeblock{position:relative;background:var(--ink-950);border:1px solid var(--line-strong);border-radius:12px;margin-top:14px;overflow:hidden}
.codeblock .cb-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px 8px 16px;border-bottom:1px solid var(--line);background:rgba(20,22,28,.6)}
.codeblock .cb-lang{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-40)}
.codeblock pre{margin:0;padding:15px 18px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.75;color:var(--text-100);-webkit-overflow-scrolling:touch}
.codeblock code{font-family:inherit}
.codeblock .c-dim{color:var(--text-40)}
.codeblock .c-out{color:var(--text-60)}
.copybtn{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--text-60);background:transparent;border:1px solid var(--line-strong);border-radius:8px;padding:4px 12px;cursor:pointer;transition:.15s;flex:none}
.copybtn:hover{color:var(--text-100);border-color:var(--signal-500)}
.copybtn.copied{color:var(--live-400);border-color:rgba(95,227,161,.5)}
.tablewrap{overflow-x:auto;margin-top:14px;border:1px solid var(--line-strong);border-radius:12px}
table.gstable{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.gstable th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-40);text-align:left;padding:12px 16px;background:rgba(20,22,28,.6);border-bottom:1px solid var(--line)}
.gstable td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--text-60);vertical-align:top}
.gstable tr:last-child td{border-bottom:0}
.gstable td:first-child{font-family:var(--mono);font-size:13px;color:var(--text-100);white-space:nowrap}
.gstable .pill-cell{white-space:nowrap}
.gs-tracknote{font-size:13.5px;color:var(--text-40);margin-top:10px}
@media(max-width:480px){
  table.gstable{min-width:0;font-size:12.5px}
  .gstable th,.gstable td{padding:9px 10px}
  .gstable td:first-child{white-space:normal;overflow-wrap:anywhere}
}