/* ==========================================================
THE INDEX — ali-kamran.com design system
----------------------------------------------------------
Colour #1A0DAB ultramarine. Ink on the page, field in the feed.
Display Archivo 700/800, tight tracking.
Data JetBrains Mono. Labels, dates, sources, captions.
Structure Numbered sections. SERP native lists.
Mono rail on research and article pages.
Underline Solid = it links. Dashed = it does not. No exceptions.
Rail Index, date, source, scope. Empty beats filler.
----------------------------------------------------------
This file REPLACES styles.css, bone-ink.css and the page
scoped block in index.html. Do not layer it on top of them.
========================================================== */
/* ==========================================================
THE INDEX — ali-kamran.com
Colour #1A0DAB ultramarine
Display Archivo Data JetBrains Mono
Rule solid underline = it links. dashed = it does not.
Preview only. Not in public/.
========================================================== */
/* ----------------------------------------------------------
FONTS — self hosted, no third party request.
Self hosted from fonts/, relative to this file in public/.
---------------------------------------------------------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
src:url('fonts/archivo-variable.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
src:url('fonts/archivo-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
src:url('fonts/jetbrains-mono-variable.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
src:url('fonts/jetbrains-mono-variable-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
:root{
--gr:#FFFFFF; --sf:#F0F1F7; --sunk:#E7E9F3;
--ik:#0C0C14; --mt:#585C6E; --rl:#DBDEEA; --rl-str:#B9BED4;
--ac:#1A0DAB; --deep:#0D0568; --on:#FFFFFF;
/* v2 additions. --abyss is v2's dark ground; it is NOT --deep, which is
the darker accent used for button hovers. Different jobs, different names. */
--abyss:#07032B; --mid:#12089B; --ice:#E8E9FB; --signal:#FF4438;
--dsp:'Archivo','Helvetica Neue',Arial,sans-serif;
--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--maxw:1080px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *,*::before,*::after{animation:none!important;transition:none!important;}}
body{background:var(--gr); color:var(--ik); font-family:var(--dsp); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px;}
h1,h2,h3,h4{line-height:1.04; letter-spacing:-.035em; font-weight:800; text-wrap:balance;}
a{color:inherit;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ac); outline-offset:3px;}
/* ---- the underline rule ---- */
.u{color:var(--ac); text-decoration:none; border-bottom:2px solid var(--ac); padding-bottom:1px;}
.u:hover{background:rgba(26,13,171,.07);}
.mark{color:var(--ac); border-bottom:2px dashed var(--ac); padding-bottom:1px;}
.article-link{color:var(--ac); text-decoration:none; border-bottom:1px solid var(--ac);}
.article-link:hover{background:rgba(26,13,171,.07);}
/* ---- section index ---- */
/* Alternating folds instead of rules. A section only draws a top border
when it sits on the same ground as the one above it. */
section{padding:104px 0; border-top:none;}
section[data-tone="tint"]{background:var(--sf);}
main > section:first-of-type{padding-top:80px;}
section:first-of-type{border-top:none;}
.sec-ix{display:flex; align-items:baseline; gap:13px; font-family:var(--dsp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mt); margin-bottom:20px;}
.sec-ix b{color:var(--ac); font-weight:700;}
.sec-title{font-size:clamp(28px,4vw,42px); margin-bottom:20px;}
.lede{font-size:18px; color:var(--mt); line-height:1.62; max-width:62ch;}
.lede b{color:var(--ik); font-weight:700;}
.lede + .lede{margin-top:15px;}
/* ---- buttons ---- */
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}
.btn{display:inline-block; padding:13px 24px; font-size:15px; font-weight:600; text-decoration:none;
border:1px solid transparent; letter-spacing:-.012em; border-radius:2px;
transition:background .14s ease, border-color .14s ease, color .14s ease, transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .16s;}
.btn.solid{background:var(--ac); color:var(--on); border-color:var(--ac); box-shadow:6px 6px 0 rgba(26,13,171,.18);}
.btn.solid:hover{background:var(--deep); border-color:var(--deep); transform:translate(-2px,-2px); box-shadow:9px 9px 0 rgba(26,13,171,.24);}
.btn.ghost{border-color:var(--rl-str); color:var(--ik);}
.btn.ghost:hover{border-color:var(--ac); color:var(--ac); transform:translateY(-2px);}
/* ---- header ---- */
/* The slash appears ONCE per lockup. Where the wordmark is spelled out,
this separator IS the mark. The standalone SVG mark is only for places
with no wordmark: favicon, app tile, carousel corner. Never both. */
.brand i,
@media(max-width:900px){
.nav-links.open{display:flex;}
.nav-links li{width:100%; padding:11px 0; border-bottom:1px solid var(--rl);}
.nav-links li:last-child{border-bottom:none; padding-top:14px;}
}
/* ---- 01 hero ---- */
.hero{padding:78px 0 84px;}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:54px; align-items:start;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr; gap:40px;}}
.hero h1{font-size:clamp(36px,5.4vw,62px); letter-spacing:-.045em; line-height:1; margin-bottom:24px;}
.hero .lede{max-width:52ch;}
/* the SERP panel */
.serp{border:1px solid var(--ik);}
.serp-q{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--on); background:var(--ik); padding:11px 15px; line-height:1.5;}
.serp-body{padding:6px 15px 14px;}
.res{display:grid; grid-template-columns:26px 1fr; gap:10px; padding:14px 0; border-bottom:1px solid var(--rl);}
.res:last-of-type{border-bottom:none;}
.res .n{font-family:var(--mono); font-size:12px; color:var(--mt); padding-top:4px; font-variant-numeric:tabular-nums;}
.res .t{font-size:16.5px; color:var(--ac); font-weight:600; letter-spacing:-.015em; border-bottom:1px solid var(--ac); display:inline; line-height:1.55;}
.res .url{font-family:var(--mono); font-size:11px; color:var(--mt); margin-top:5px;}
.res.out .n{color:var(--ac); font-weight:700;}
.res.out .t{color:var(--mt); font-weight:400; border-bottom:1px dashed var(--mt);}
.serp-cap{font-family:var(--mono); font-size:10.5px; color:var(--mt); line-height:1.55; padding:12px 15px 0; border-top:1px solid var(--rl); margin-top:2px;}
/* ---- 02 the five ---- */
.five{max-width:820px;}
.entry{display:grid; grid-template-columns:34px 1fr; gap:14px; padding:22px 0; border-bottom:1px solid var(--rl);}
.entry:first-of-type{border-top:1px solid var(--ik);}
.entry .n{font-family:var(--mono); font-size:12px; color:var(--ac); font-weight:700; padding-top:5px; font-variant-numeric:tabular-nums;}
.entry .q{font-size:19px; font-weight:700; letter-spacing:-.025em; line-height:1.3; margin-bottom:8px;}
.entry .a{font-size:15.5px; color:var(--mt); line-height:1.6; max-width:64ch;}
.entry .a b{color:var(--ik); font-weight:700;}
.five-note{margin-top:22px; font-size:15.5px; color:var(--mt); max-width:62ch;}
/* ---- 03 who ---- */
.who-grid{display:grid; grid-template-columns:196px 1fr; gap:44px; align-items:start;}
@media(max-width:760px){.who-grid{grid-template-columns:1fr; gap:26px;}}
.who-photo{width:196px; height:240px; object-fit:cover; display:block; background:var(--sf); border:1px solid var(--rl);}
.who-meta{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mt); margin-top:10px; line-height:1.7;}
.who p{color:var(--mt); margin-bottom:15px; max-width:64ch; font-size:16.5px;}
.who .name{font-size:27px; font-weight:800; letter-spacing:-.03em; margin-bottom:16px; color:var(--ik);}
/* ---- 04 proof ---- */
.proofhead{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:baseline; padding-bottom:11px; border-bottom:1px solid var(--ik);}
.proofhead .pl{font-family:var(--dsp); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ac); font-weight:700;}
.proofhead .pa{font-size:14.5px; color:var(--mt);}
.proofhead .pa b{color:var(--ik); font-weight:700;}
.figs{display:grid; grid-template-columns:repeat(3,1fr);}
@media(max-width:660px){.figs{grid-template-columns:1fr;}}
.figs .fig{border-right:1px solid var(--rl); padding:20px 26px 22px 0;}
.figs .fig + .fig{padding-left:26px;}
.figs .fig:last-child{border-right:none; padding-right:0;}
@media(max-width:660px){.figs .fig,.figs .fig + .fig{border-right:none; border-bottom:1px solid var(--rl); padding:20px 0 22px;}}
.figs .fig .k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mt);}
.figs .fig .v{font-size:46px; font-weight:800; letter-spacing:-.045em; line-height:1; margin:9px 0 7px; font-variant-numeric:tabular-nums;}
.figs .fig .d{font-family:var(--mono); font-size:11px; color:var(--mt); line-height:1.45;}
.caveat{font-family:var(--mono); font-size:11px; color:var(--mt); line-height:1.6; margin-top:18px; padding-left:12px; border-left:2px solid var(--rl); max-width:62ch;}
.breadth{margin-top:24px; padding-top:15px; border-top:1px solid var(--rl); display:flex; gap:9px 20px; flex-wrap:wrap; align-items:baseline;}
.breadth .bl{font-family:var(--dsp); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--mt); white-space:nowrap;}
.breadth .bv{font-size:15px; font-weight:700; letter-spacing:-.015em;}
.breadth .bv i{color:var(--mt); font-style:normal; font-weight:400; padding:0 4px;}
.proof-body{margin-top:26px; color:var(--mt); font-size:16.5px; max-width:70ch;}
.proof-body b{color:var(--ik);}
/* ---- 05 testimonials ---- */
.quotes{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--ik);}
@media(max-width:820px){.quotes{grid-template-columns:1fr;}}
.quote{padding:24px 26px 26px 0; border-right:1px solid var(--rl);}
.quote:last-child{border-right:none; padding-left:26px;}
@media(max-width:820px){.quote{border-right:none; border-bottom:1px solid var(--rl); padding:24px 0 26px;} .quote:last-child{padding-left:0; border-bottom:none;}}
.quote p{font-size:16.5px; line-height:1.62; color:var(--ik); margin-bottom:16px;}
.quote .who-q{display:flex; align-items:center; gap:11px;}
.quote img{width:38px; height:38px; object-fit:cover; border:1px solid var(--rl);}
.quote .nm{font-weight:700; font-size:14.5px; letter-spacing:-.015em;}
.quote .rl-q{font-family:var(--mono); font-size:10.5px; color:var(--mt);}
.case-link{margin-top:30px; padding-top:20px; border-top:1px solid var(--ik); display:flex; justify-content:space-between; gap:16px; align-items:baseline; flex-wrap:wrap;}
.case-link .cl-lab{font-family:var(--dsp); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--mt);}
.case-link .cl-t{font-size:20px; font-weight:800; letter-spacing:-.03em;}
/* ---- 06 process ---- */
.steps{border-top:1px solid var(--ik); margin-bottom:34px;}
.step{display:grid; grid-template-columns:34px 1fr; gap:14px; padding:20px 0; border-bottom:1px solid var(--rl);}
.step .n{font-family:var(--mono); font-size:12px; color:var(--ac); font-weight:700; padding-top:4px;}
.step h3{font-size:18px; letter-spacing:-.025em; margin-bottom:7px;}
.step p{font-size:15.5px; color:var(--mt); line-height:1.6; max-width:66ch;}
.audit-box{border:1px solid var(--ik); padding:26px 26px 28px; background:var(--sf);}
.price{font-size:38px; font-weight:800; letter-spacing:-.04em; margin-bottom:16px;}
.price small{font-family:var(--mono); font-size:13px; font-weight:400; color:var(--mt); letter-spacing:0;}
.audit-list{list-style:none; display:grid; gap:9px; margin-bottom:16px;}
/* absolute marker, not a grid column: an li mixing an element with a bare
text run would push that text into the marker column. See .article-body li. */
.audit-list li{font-size:15.5px; color:var(--ik); position:relative; padding-left:20px;}
.audit-list li::before{position:absolute; left:0; top:0; content:"—"; color:var(--ac); font-family:var(--mono); font-size:13px;}
.audit-meta{font-size:14.5px; color:var(--mt); line-height:1.6;}
.audit-meta b{color:var(--ik);}
.retainer{margin-top:32px; padding-top:24px; border-top:1px solid var(--rl);}
.retainer h3{font-size:21px; margin-bottom:12px; letter-spacing:-.03em;}
.retainer p{font-size:15.5px; color:var(--mt); line-height:1.62; max-width:74ch;}
.agency-note{margin-top:20px; padding:14px 16px; background:var(--sunk); font-size:14px; color:var(--mt); line-height:1.6;}
/* ---- 07 fit ---- */
.fit-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--ik);}
@media(max-width:820px){.fit-grid{grid-template-columns:1fr;}}
.fit-col{padding:22px 26px 26px 0; border-right:1px solid var(--rl);}
.fit-col:last-child{border-right:none; padding-left:26px;}
@media(max-width:820px){.fit-col{border-right:none; padding:22px 0 26px; border-bottom:1px solid var(--rl);} .fit-col:last-child{padding-left:0; border-bottom:none;}}
.fit-col h3{font-family:var(--dsp); font-size:11px; letter-spacing:.15em; text-transform:uppercase; margin-bottom:16px; font-weight:700;}
.fit-col.good h3{color:var(--ac);}
.fit-col.bad h3{color:var(--mt);}
.fit-list{list-style:none; display:grid; gap:11px;}
.fit-list li{font-size:15.5px; color:var(--mt); line-height:1.55; position:relative; padding-left:18px;}
.fit-col.good .fit-list li::before{position:absolute; left:0; top:0; content:"+"; color:var(--ac); font-family:var(--mono); font-weight:700;}
.fit-col.bad .fit-list li::before{position:absolute; left:0; top:0; content:"–"; color:var(--mt); font-family:var(--mono);}
/* ---- 08 faq ---- */
.faq{max-width:820px; border-top:1px solid var(--ik);}
.faq details{border-bottom:1px solid var(--rl);}
.faq summary{cursor:pointer; padding:18px 0; font-size:17px; font-weight:700; letter-spacing:-.025em; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:baseline;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--ac); font-weight:700; font-size:17px;}
.faq details[open] summary::after{content:"–";}
.faq .answer{padding:0 0 20px; font-size:15.5px; color:var(--mt); line-height:1.65; max-width:70ch;}
.faq .answer b{color:var(--ik);}
/* ---- 09 contact ---- */
.contact h2{font-size:clamp(26px,3.6vw,38px); max-width:24ch; margin-bottom:18px;}
.status{font-family:var(--dsp); font-size:12px; color:var(--mt); letter-spacing:.04em;}
/* ---- footer ---- */
@media(max-width:760px){}
@media(max-width:520px){}
.footer-brand i,
/* ==========================================================
ARTICLE + RESEARCH TEMPLATE
The TOC and the rail are the same column. One left column
carries metadata first, contents second. Covers blog/,
guides/ and research/.
========================================================== */
.article-head{padding:56px 0 30px; border-bottom:1px solid var(--rl);}
.kicker{display:flex; align-items:baseline; gap:12px; font-family:var(--dsp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mt); margin-bottom:18px;}
.kicker b{color:var(--ac); font-weight:700;}
.article-head h1{font-size:clamp(34px,5.2vw,58px); letter-spacing:-.045em; line-height:1; margin-bottom:20px; max-width:18ch;}
.dek{font-size:19px; line-height:1.55; color:var(--mt); max-width:60ch;}
.byline{display:flex; align-items:center; gap:12px; margin-top:26px;}
.byline img{width:40px; height:40px; object-fit:cover; border:1px solid var(--rl);}
.byline-name{font-size:14.5px; font-weight:700; letter-spacing:-.015em;}
.byline-name a{color:var(--ac); text-decoration:none; border-bottom:1px solid var(--ac);}
.byline-role{font-family:var(--mono); font-size:11px; color:var(--mt); margin-top:2px;}
.article-grid{display:grid; grid-template-columns:200px minmax(0,1fr); gap:52px; padding:44px 0 72px; align-items:start;}
@media(max-width:900px){.article-grid{grid-template-columns:1fr; gap:34px;}}
.rail{position:sticky; top:88px; align-self:start;}
@media(max-width:900px){.rail{position:static; border-bottom:1px solid var(--rl); padding-bottom:24px;}}
.rail-meta{display:grid; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--ik);}
@media(max-width:900px){.rail-meta{grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:16px 20px;}}
.rail-meta div{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; line-height:1.5;}
.rail-meta .k{color:var(--mt); display:block;}
.rail-meta .v{color:var(--ik); font-weight:700; display:block; margin-top:2px;}
.rail-meta .v.live{color:var(--ac);}
.rail-toc{margin-top:20px;}
.rail-toc .lab{font-family:var(--dsp); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mt); margin-bottom:11px;}
.rail-toc ol{list-style:none; counter-reset:toc; display:grid; gap:1px;}
.rail-toc li{counter-increment:toc;}
.rail-toc a{display:grid; grid-template-columns:22px 1fr; gap:6px; padding:5px 0; font-size:13px; color:var(--mt); text-decoration:none; line-height:1.35; letter-spacing:-.01em;}
.rail-toc a::before{content:counter(toc) "."; font-family:var(--mono); font-size:11px; color:var(--rl-str);}
.rail-toc a:hover{color:var(--ac);} .rail-toc a:hover::before{color:var(--ac);}
.article-body{min-width:0; max-width:68ch; font-size:17.5px; line-height:1.68;}
.article-body > * + *{margin-top:20px;}
.article-body h2{font-size:clamp(23px,3vw,29px); letter-spacing:-.03em; margin-top:52px; padding-top:20px; border-top:1px solid var(--rl); line-height:1.15;}
.article-body h2:first-child{margin-top:0; padding-top:0; border-top:none;}
.article-body h3{font-size:19px; letter-spacing:-.025em; margin-top:34px;}
.article-body p{color:var(--mt);}
.article-body p b,.article-body li b{color:var(--ik); font-weight:700;}
.article-body a{color:var(--ac); text-decoration:none; border-bottom:1px solid var(--ac);}
.article-body a:hover{background:rgba(26,13,171,.08);}
.article-body ul,.article-body ol{padding-left:0; list-style:none; counter-reset:li; display:grid; gap:11px; color:var(--mt);}
/* NOT grid. An mixing an element with a bare text run puts that text
into the 26px marker column and renders it one word per line. */
.article-body li{position:relative; padding-left:26px;}
.article-body ul > li::before{position:absolute; left:0; top:0; content:"—"; font-family:var(--mono); font-size:14px; color:var(--ac);}
.article-body ol > li{counter-increment:li;}
.article-body ol > li::before{position:absolute; left:0; top:2px; content:counter(li) "."; font-family:var(--mono); font-size:13px; color:var(--ac);}
.article-body :not(pre) > code{font-family:var(--mono); font-size:.86em; color:var(--ac); background:var(--sf); padding:2px 5px;}
.article-body pre{background:var(--ik); color:var(--gr); padding:18px 20px; overflow-x:auto; font-size:13.5px; line-height:1.6;}
.article-body pre code{font-family:var(--mono); color:inherit; background:none; padding:0;}
.article-body figure{margin:0;}
.article-body figure img{max-width:100%; height:auto; display:block; border:1px solid var(--rl);}
.article-body figcaption{font-family:var(--mono); font-size:11px; color:var(--mt); line-height:1.55; margin-top:9px; padding-left:11px; border-left:2px solid var(--rl);}
/* exhibits and callouts */
.box{border:1px solid var(--rl); border-left:3px solid var(--rl); padding:18px 20px; background:var(--sf);}
.box .box-label{font-family:var(--dsp); font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; font-weight:700;}
.box p{font-size:15.5px; line-height:1.6;}
.box.info{border-left-color:var(--ac);} .box.info .box-label{color:var(--ac);}
.box.warn{border-left-color:var(--ik);} .box.warn .box-label{color:var(--ik);}
.box.good{border-left-color:var(--ac); background:var(--gr);} .box.good .box-label{color:var(--ac);}
.takeaway{border:none; border-left:3px solid var(--ac); background:none; padding:4px 0 4px 18px;}
.takeaway .box-label{font-family:var(--dsp); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ac); font-weight:700; margin-bottom:7px;}
.takeaway p{font-size:17px; color:var(--ik); line-height:1.55;}
.article-endcap{border-top:2px solid var(--ik); padding:34px 0 72px;}
.further-reading .box-label{font-family:var(--dsp); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mt); margin-bottom:14px;}
.further-reading a{display:grid; grid-template-columns:24px 1fr; gap:8px; padding:11px 0; border-bottom:1px solid var(--rl); text-decoration:none; font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--ik);}
.further-reading a::before{content:"→"; font-family:var(--mono); color:var(--ac);}
.further-reading a:hover{color:var(--ac);}
/* ==========================================================
COMPATIBILITY LAYER
Maps the markup already on the 30+ existing pages onto the
system above, so those pages convert by swapping one
stylesheet link instead of rewriting their HTML.
Replaces styles.css AND bone-ink.css. Never layer on top.
========================================================== */
/* --- article header: the old card becomes a flat ruled head --- */
.article-hero{padding:0;border-top:none;}
.article-hero-card{border:none;background:none;}
.article-hero-pad{padding:56px 0 30px!important;border-bottom:1px solid var(--rl);}
.hero-banner-panel{display:none!important;}
.article-hero h1{font-size:clamp(34px,5.2vw,58px);letter-spacing:-.045em;line-height:1;margin-bottom:20px;max-width:18ch;}
.case-kicker{display:block;font-family:var(--dsp);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);font-weight:700;margin-bottom:18px;}
.byline-avatar{width:40px;height:40px;object-fit:cover;border:1px solid var(--rl);border-radius:0;}
/* --- old TOC aside becomes the rail --- */
.article-layout{padding:0;border-top:none;}
.toc-sticky{position:sticky;top:88px;align-self:start;}
@media(max-width:900px){.toc-sticky{position:static;border-bottom:1px solid var(--rl);padding-bottom:24px;}}
.toc-label{font-family:var(--dsp);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt);margin-bottom:11px;}
.toc-sticky ul{list-style:none;counter-reset:toc;display:grid;gap:1px;padding:0;margin:0;}
.toc-sticky li{counter-increment:toc;display:block;}
.toc-sticky li::before{content:none;}
.toc-sticky a{display:grid;grid-template-columns:22px 1fr;gap:6px;padding:5px 0;font-size:13px;color:var(--mt);text-decoration:none;line-height:1.35;letter-spacing:-.01em;border-bottom:none;}
.toc-sticky a::before{content:counter(toc) ".";font-family:var(--mono);font-size:11px;color:var(--rl-str);}
.toc-sticky a:hover{color:var(--ac);background:none;} .toc-sticky a:hover::before{color:var(--ac);}
/* --- data tables --- */
.tbl-title{font-family:var(--dsp);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt);margin-bottom:9px;}
.tbl-scroll{overflow-x:auto;border:1px solid var(--rl);}
.tbl{border-collapse:collapse;width:100%;font-size:14.5px;}
.tbl th,.tbl td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--rl);vertical-align:top;}
.tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mt);font-weight:700;background:var(--sf);white-space:nowrap;}
.tbl td{color:var(--mt);}
.tbl td:first-child{color:var(--ik);font-weight:600;}
.tbl tr:last-child td{border-bottom:none;}
.tbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ik);}
.tbl .up{color:var(--ac);font-weight:700;}
/* --- self-check checklists --- */
/* The real markup is , so the
grid belongs on the label, not the li. On the li its single child sat
in the 22px column and rendered one word per line. */
.checklist-item{display:block;padding:11px 0;border-bottom:1px solid var(--rl);}
.checklist-item::before{content:none;}
.checklist-item > label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;cursor:pointer;}
input.chk{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid var(--rl-str);background:var(--gr);cursor:pointer;margin-top:3px;position:relative;}
input.chk:hover{border-color:var(--ac);}
input.chk:checked{background:var(--ac);border-color:var(--ac);}
input.chk:checked::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:9px;border:solid var(--gr);border-width:0 2px 2px 0;transform:rotate(45deg);}
input.chk:checked ~ span{color:var(--mt);text-decoration:line-through;text-decoration-color:var(--rl-str);}
.self-check-progress{border:1px solid var(--rl);background:var(--sf);padding:14px 16px;}
.self-check-progress .bar-track{background:var(--rl);height:4px;}
.self-check-progress .bar-fill{background:var(--ac);height:4px;}
/* --- FAQ answers inside articles --- */
.article-body details{border-bottom:1px solid var(--rl);}
.article-body summary{cursor:pointer;padding:16px 0;font-weight:700;letter-spacing:-.02em;list-style:none;}
.article-body summary::-webkit-details-marker{display:none;}
.article-body .answer{padding:0 0 18px;font-size:15.5px;color:var(--mt);line-height:1.65;}
/* --- old button names --- */
.btn.gold{background:var(--ac);color:var(--on);border-color:var(--ac);}
.btn.gold:hover{background:var(--deep);border-color:var(--deep);}
/* --- nav dropdown --- */
.nav-links li.has-dropdown{position:relative;}
.nav-links li.has-dropdown > a::after{content:"\25BE";margin-left:5px;font-size:10px;color:var(--mt);}
.dropdown{display:none;position:absolute;top:100%;left:0;min-width:180px;background:var(--gr);border:1px solid var(--rl);list-style:none;padding:6px 0;z-index:30;}
.nav-links li.has-dropdown:hover .dropdown,.nav-links li.has-dropdown:focus-within .dropdown{display:block;}
.dropdown li{width:auto;padding:0;border:none;}
.dropdown a{display:block;padding:9px 16px;font-size:13.5px;white-space:nowrap;color:var(--mt);}
.dropdown a:hover{color:var(--ac);background:var(--sf);border-bottom:none;}
@media(max-width:900px){.dropdown{display:block;position:static;border:none;padding:6px 0 0 14px;}}
/* --- footer variants used on existing pages --- */
.footer-brand-col{grid-column:auto;}
.social-icons{display:flex;gap:12px;margin-top:16px;}
.social-icons a{color:var(--mt);padding:0;display:inline-block;}
.social-icons a:hover{color:var(--ac);}
.footer-bottom,.foot-line{margin-top:36px;padding-top:18px;border-top:1px solid var(--rl);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--mt);}
/* --- section labels on non-article pages --- */
.sec-label{display:flex;align-items:baseline;gap:13px;font-family:var(--dsp);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);font-weight:700;margin-bottom:20px;}
.sec-label::after{content:none;}
/* ==========================================================
LISTING PAGES — blog, guides, all-posts, all-guides, research
The cards become a numbered ruled index. The numbering comes
from a CSS counter, so no markup changes on any listing page.
========================================================== */
.res-hero{padding:56px 0 26px;border-top:none;border-bottom:none;}
.res-hero .sec-title{max-width:20ch;}
.res-hero .dek{margin-top:16px;}
/* Listing pages: real cards in a grid.
Each card carries its own border, so there are no stacked full width
rules running down the page. The section rule above the grid is the
only horizontal line here. */
.float-grid{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
counter-reset:idx; margin-top:32px;
}
@media(max-width:820px){.float-grid{grid-template-columns:1fr;}}
.float-grid + .float-grid{margin-top:18px;}
.float-card{
display:grid; align-content:start; gap:0;
border:1px solid var(--rl); background:var(--gr);
padding:22px 24px 24px; text-decoration:none; color:inherit;
transition:border-color .12s ease, background .12s ease;
}
.float-card:hover{border-color:var(--ac); background:var(--sf);}
.float-card:hover .panel-title{color:var(--ac);}
.float-card:hover .arrow{color:var(--ac);}
.float-card::before{content:none;}
.card-panel{display:contents;}
.panel-top-row{display:flex; align-items:baseline; gap:10px; margin-bottom:11px;}
.panel-top-row::before{
counter-increment:idx; content:counter(idx,decimal-leading-zero);
font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--rl-str);
}
.panel-chip{font-family:var(--dsp); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ac); font-weight:700;}
.panel-mark{display:none;}
.panel-title{font-size:20px; font-weight:700; letter-spacing:-.03em; line-height:1.24; color:var(--ik);}
.card-body{margin-top:9px;}
.card-excerpt{font-size:14.8px; line-height:1.56; color:var(--mt);}
.card-meta{
font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--mt);
margin-top:14px; padding-top:12px; border-top:1px solid var(--rl);
display:flex; align-items:baseline; gap:9px;
}
.arrow{color:var(--rl-str); margin-left:auto;}
.float-grid.lead{grid-template-columns:1fr;}
.float-grid.lead .float-card{border-width:2px; border-color:var(--ik); padding:28px 30px 30px;}
.float-grid.lead .panel-title{font-size:29px; letter-spacing:-.038em;}
.float-grid.lead .card-excerpt{font-size:16px;}
.study-group + .study-group{margin-top:44px;}
.study-group-label{
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:var(--mt);margin-top:34px;padding-top:14px;border-top:1px solid var(--rl);
}
.study-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);font-weight:700;}
/* pager + view all */
.res-pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:28px;}
.res-pager button{
font-family:var(--mono);font-size:12px;min-width:34px;padding:7px 10px;cursor:pointer;
background:var(--gr);color:var(--mt);border:1px solid var(--rl);
}
.res-pager button:hover{border-color:var(--ac);color:var(--ac);}
.res-pager button[aria-current="true"],.res-pager button.active{background:var(--ac);border-color:var(--ac);color:var(--on);font-weight:700;}
.res-pager button[disabled]{opacity:.4;cursor:default;}
.res-pager button[disabled]:hover{border-color:var(--rl);color:var(--mt);}
.res-viewall{margin-top:22px;}
.res-viewall a{font-family:var(--dsp);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);text-decoration:none;border-bottom:1px solid var(--ac);padding-bottom:2px;}
/* ==========================================================
LEGACY VARIABLE ALIASES
416 inline style="" attributes across the site reference
variables from styles.css and bone-ink.css. Deleting those
files without this block breaks every one of them silently.
Each old name is mapped onto its nearest role in the system.
========================================================== */
:root{
/* old dark theme */
--ink:#0C0C14;
/* --paper was the light TEXT colour on the old dark theme. 22 pages still
use it inline as emphasis; on light grounds white-on-white is invisible,
so it now maps to ink. */
--paper:#0C0C14; --gold:#1A0DAB; --orange:#1A0DAB;
--green-bright:#1A0DAB; --line:#DBDEEA; --dim:#585C6E;
/* bone & ink */
--bk-bone:#FFFFFF; --bk-bone-raised:#F0F1F7; --bk-bone-sunken:#F0F1F7;
--bk-ink:#0C0C14; --bk-ink-soft:#585C6E; --bk-rule:#DBDEEA;
--bk-surface-dark:#0C0C14;
--bk-rust:#1A0DAB;
/* rust-light was the on-dark accent, so it maps to the lifted blue,
not #1A0DAB, which would fail contrast on a dark panel */
--bk-rust-light:#8478FF;
--bk-serif:'Archivo','Helvetica Neue',Arial,sans-serif;
--bk-sans:'Archivo','Helvetica Neue',Arial,sans-serif;
}
/* ==========================================================
TAIL UTILITIES
Small classes repeating across the article and archive
pages. These take every blog/, guides/ and research/ page
to full coverage.
========================================================== */
.nav-cta-item{list-style:none;}
.author-strip{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--rl);}
.author-strip img{width:40px;height:40px;object-fit:cover;border:1px solid var(--rl);}
.author-strip .name{font-size:14.5px;font-weight:700;letter-spacing:-.015em;color:var(--ik);}
.role{font-family:var(--mono);font-size:11px;color:var(--mt);margin-top:2px;line-height:1.5;}
.role a{color:var(--ac)!important;text-decoration:none;border-bottom:1px solid var(--ac);}
/* the old decorative hero watermark: hidden with its parent */
.hb-chip,.hb-mark{display:none!important;}
/* table helpers */
.tbl-hint,.tbl-src{font-family:var(--mono);font-size:10.5px;color:var(--mt);line-height:1.55;margin-top:9px;padding-left:11px;border-left:2px solid var(--rl);}
.tbl .flat{color:var(--mt);} .tbl .down{color:var(--mt);} .tbl .base{color:var(--ik);font-weight:700;}
.tbl .group{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ac);background:var(--sf);}
.term{font-weight:700;color:var(--ik);}
/* archive lists on all-posts / all-guides */
.archive-list{border-top:1px solid var(--ik);counter-reset:arc;}
.archive-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rl);}
.archive-row::before{counter-increment:arc;content:counter(arc,decimal-leading-zero) ".";font-family:var(--mono);font-size:11.5px;color:var(--rl-str);}
.archive-row a{font-size:16.5px;font-weight:600;letter-spacing:-.022em;color:var(--ik);text-decoration:none;border-bottom:1px solid transparent;}
.archive-row:hover a{color:var(--ac);border-bottom-color:var(--ac);}
.archive-meta{font-family:var(--mono);font-size:11px;color:var(--mt);white-space:nowrap;}
@media(max-width:620px){.archive-row{grid-template-columns:34px minmax(0,1fr);}.archive-meta{grid-column:2;}}
/* guides listing uses an alternate panel tint */
.panel-alt .panel-chip{color:var(--mt);}
.checkable{cursor:pointer;}
.bar-label{font-family:var(--mono);font-size:10.5px;color:var(--mt);}
.bar-reset{font-family:var(--mono);font-size:11px;color:var(--ac);background:none;border:none;cursor:pointer;text-decoration:underline;}
/* ==========================================================
SERVICE, GUIDE AND FORM COMPONENTS
Covers generative-engine-optimization-services.html,
guides/what-is-generative-engine-optimization.html and ask.html
========================================================== */
/* shared page hero used by the service and case pages */
.case-hero{padding:56px 0 30px;border-top:none;border-bottom:1px solid var(--rl);}
.case-hero h1{font-size:clamp(34px,5.2vw,58px);letter-spacing:-.045em;line-height:1;margin-bottom:20px;max-width:18ch;}
/* p.lead, not .lead: the research index uses class="float-grid lead"
for its lead study group, and an unscoped rule capped it at 60ch. */
p.lead{font-size:19px;line-height:1.55;color:var(--mt);max-width:60ch;}
/* fact pills: a mono spec row, not decorative chips */
.meta-pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin-top:28px;border-top:1px solid var(--ik);}
.meta-pills .pill{border-bottom:1px solid var(--rl);}
.pill{padding:13px 18px 15px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mt);}
.pill b{display:block;font-family:var(--dsp);font-size:15px;letter-spacing:-.02em;text-transform:none;color:var(--ik);font-weight:700;margin-top:5px;}
/* sticky section index bar */
.toc-bar{position:sticky;top:66px;z-index:15;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--rl);}
.toc-list{display:flex;gap:22px;list-style:none;overflow-x:auto;padding:13px 0;margin:0;counter-reset:tb;}
.toc-list li{counter-increment:tb;white-space:nowrap;}
.toc-list a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt);text-decoration:none;}
.toc-list a::before{content:counter(tb,decimal-leading-zero) " ";color:var(--rl-str);}
.toc-list a:hover{color:var(--ac);}
/* numbered phases */
/* .phase is a SECTION on case-study and the services page, not a step
block. Making it a grid squeezed .wrap into a 52px column. */
section.phase{padding:64px 0;border-top:1px solid var(--rl);}
.phase > .wrap > * + *{margin-top:18px;}
.phase-num,.idx{display:block;font-family:var(--dsp);font-size:11px;font-weight:700;color:var(--ac);letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;}
.phase h2{font-size:clamp(26px,3.6vw,36px);letter-spacing:-.035em;margin-bottom:18px;}
.phase h4{font-size:17px;letter-spacing:-.025em;margin-bottom:6px;}
.phase h3{font-size:19px;letter-spacing:-.028em;margin-bottom:7px;}
.phase p{font-size:16px;color:var(--mt);line-height:1.65;}
/* audit flow */
.aud-flow{display:grid;gap:0;border-top:1px solid var(--ik);margin-top:22px;counter-reset:af;}
.aud-step{counter-increment:af;display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--rl);}
.aud-step::before{content:counter(af,decimal-leading-zero) ".";font-family:var(--mono);font-size:12px;color:var(--ac);font-weight:700;padding-top:4px;}
.aud-step h3,.aud-step h4{font-size:18px;letter-spacing:-.025em;margin-bottom:6px;}
.aud-step p{font-size:15.5px;color:var(--mt);line-height:1.6;}
/* section list */
.section-list{list-style:none;counter-reset:sl;border-top:1px solid var(--ik);}
.section-list-item{counter-increment:sl;display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--rl);}
.section-list-item::before{content:counter(sl,decimal-leading-zero) ".";font-family:var(--mono);font-size:12px;color:var(--rl-str);}
/* the GEO explainer flow: SEO territory vs GEO territory */
.flow{display:grid;gap:0;border-top:1px solid var(--ik);margin-top:20px;}
.flow-step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--rl);position:relative;}
.flow-step.is-geo{background:var(--sf);padding-left:18px;grid-template-columns:34px minmax(0,1fr);}
.flow-n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ac);padding-top:4px;}
.flow-step h4{font-size:18px;letter-spacing:-.025em;margin-bottom:7px;line-height:1.3;}
.flow-step p{font-size:15.5px;color:var(--mt);line-height:1.6;}
.flow-tag{font-family:var(--dsp);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
padding:3px 7px;margin-left:8px;white-space:nowrap;vertical-align:middle;}
.flow-tag.seo{color:var(--mt);border:1px solid var(--rl-str);}
.flow-tag.geo{color:var(--on);background:var(--ac);}
.narrow{max-width:60ch;}
/* forms: ask.html */
.ask-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start;padding:44px 0 72px;}
@media(max-width:860px){.ask-grid{grid-template-columns:1fr;gap:32px;}}
.form-card{border:1px solid var(--ik);padding:26px 26px 28px;display:grid;gap:18px;}
.form-field{display:grid;gap:7px;}
.form-field label{font-family:var(--dsp);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt);}
.form-field input,.form-field textarea,.form-field select{
font-family:var(--dsp);font-size:16px;color:var(--ik);background:var(--gr);
border:1px solid var(--rl-str);padding:11px 12px;width:100%;border-radius:0;}
.form-field textarea{min-height:130px;resize:vertical;line-height:1.55;}
.form-field input:focus,.form-field textarea:focus{outline:2px solid var(--ac);outline-offset:1px;border-color:var(--ac);}
.form-note{font-family:var(--dsp);font-size:11px;color:var(--mt);line-height:1.55;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.ask-sidebar{display:grid;gap:18px;}
.sidebar-cta{border:1px solid var(--rl);background:var(--sf);padding:20px;}
.av{width:40px;height:40px;object-fit:cover;border:1px solid var(--rl);}
/* ==========================================================
ABOUT PAGE
========================================================== */
.about-hero{padding:56px 0 34px;border-top:none;border-bottom:1px solid var(--rl);}
.about-hero-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:46px;align-items:start;}
@media(max-width:760px){.about-hero-grid{grid-template-columns:1fr;gap:26px;}}
.about-kicker{font-family:var(--dsp);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);font-weight:700;margin-bottom:16px;}
.about-photo-wrap{width:220px;}
.about-photo{width:220px;height:270px;object-fit:cover;display:block;border:1px solid var(--rl);background:var(--sf);}
.intro{font-size:19px;line-height:1.55;color:var(--mt);max-width:60ch;}
.intro b{color:var(--ik);font-weight:700;}
.story p{color:var(--mt);margin-bottom:16px;max-width:66ch;}
.story b{color:var(--ik);}
.role-path{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt);}
/* principles: a labelled spec list, not cards */
.principles{list-style:none;border-top:1px solid var(--ik);}
.principles li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--rl);}
@media(max-width:620px){.principles li{grid-template-columns:1fr;gap:6px;}}
.p-label{font-family:var(--dsp);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ac);font-weight:700;padding-top:4px;}
.p-body{font-size:15.5px;line-height:1.6;color:var(--mt);}
.p-body b{color:var(--ik);font-weight:700;}
/* highlights */
.hl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;border-top:none;margin-top:26px;}
.hl-card{padding:22px 24px 24px;border:1px solid var(--rl);background:var(--gr);}
.hl-card h4{margin-top:0;}
.hl-card h4{font-size:17px;letter-spacing:-.025em;margin-bottom:8px;}
.hl-card p{font-size:15px;color:var(--mt);line-height:1.55;}
.about-cta{margin-top:36px;padding-top:26px;border-top:2px solid var(--ik);}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.tag{font-family:var(--dsp);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mt);border:1px solid var(--rl-str);padding:4px 9px;}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;}
/* ==========================================================
CASE STUDY charts and stats
========================================================== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;border-top:1px solid var(--ik);margin-top:24px;}
.stat-card{padding:22px 26px 24px 0;border-right:1px solid var(--rl);}
.stat-card + .stat-card{padding-left:26px;}
.stat-card:last-child{border-right:none;}
.stat-card:last-child{border-right:none;}
.stat-card .n{font-size:42px;font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ik);}
.stat-card .n.warn{color:var(--mt);}
.stat-card .label{font-family:var(--mono);font-size:10.5px;color:var(--mt);line-height:1.5;margin-top:9px;}
.case-client-logo{max-height:26px;width:auto;opacity:.75;}
.chart-card{border:1px solid var(--rl);padding:22px 24px 24px;background:var(--gr);}
.chart-card .label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt);margin-bottom:16px;}
.bars{display:flex;align-items:flex-end;gap:14px;height:190px;padding-top:10px;}
.bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:7px;}
.bar-val{font-family:var(--mono);font-size:11.5px;color:var(--ik);font-variant-numeric:tabular-nums;order:-1;}
.bar-fill{width:100%;background:var(--ac);min-height:3px;}
.bar-col:last-child .bar-fill{background:var(--ik);}
.bar-tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt);}
.axis-label{font-family:var(--mono);font-size:10px;color:var(--mt);margin-top:12px;}
.data-table,.table-scroll{overflow-x:auto;}
.data-table table{border-collapse:collapse;width:100%;font-size:14.5px;}
.data-table th,.data-table td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--rl);}
.data-table th{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mt);background:var(--sf);}
.alt{background:var(--sf);}
.sub{font-family:var(--mono);font-size:11px;color:var(--mt);}
.end-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);}
/* ==========================================================
AI CRAWLER CHECK tool
========================================================== */
.tool-hero{padding:56px 0 30px;border-bottom:1px solid var(--rl);}
.check-form{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px;max-width:520px;}
.check-form input{flex:1;min-width:200px;font-family:var(--mono);font-size:15px;color:var(--ik);
background:var(--gr);border:1px solid var(--rl-str);padding:12px 13px;border-radius:0;}
.check-form input:focus{outline:2px solid var(--ac);outline-offset:1px;border-color:var(--ac);}
.check-form button{background:var(--ac);color:var(--on);border:none;padding:12px 22px;font-family:var(--dsp);
font-size:15px;font-weight:700;cursor:pointer;}
.check-form button:hover{background:var(--deep);}
.check-status{font-family:var(--mono);font-size:12px;color:var(--mt);margin-top:12px;}
.results{margin-top:34px;}
.res-domain{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ik);font-weight:700;padding-bottom:12px;border-bottom:2px solid var(--ik);}
.res-domain span{color:var(--mt);font-weight:400;}
.res-block{margin-top:26px;}
.res-block-label{font-family:var(--dsp);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ac);font-weight:700;margin-bottom:10px;}
.res-row{display:grid;grid-template-columns:18px minmax(0,1fr);gap:11px;padding:11px 0;border-bottom:1px solid var(--rl);align-items:start;}
.res-dot{width:9px;height:9px;margin-top:7px;background:var(--ac);}
.res-dot.no{background:none;border:1px dashed var(--mt);width:11px;height:11px;}
.res-dot.yes{background:var(--ac);}
.res-row-body b{font-size:15.5px;font-weight:700;letter-spacing:-.02em;}
.res-row-note{font-family:var(--mono);font-size:11px;color:var(--mt);margin-top:4px;line-height:1.5;}
.res-disclaimer{font-family:var(--mono);font-size:11px;color:var(--mt);line-height:1.6;margin-top:22px;padding-left:12px;border-left:2px solid var(--rl);}
.res-cta{margin-top:26px;padding-top:22px;border-top:1px solid var(--ik);}
/* ==========================================================
AI VISIBILITY AUDIT — the mock report pages
========================================================== */
.doc-page{background:var(--gr);border:1px solid var(--rl-str);padding:34px 36px 38px;}
.doc-kicker{font-family:var(--dsp);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);font-weight:700;}
.doc-h1{font-size:34px;font-weight:800;letter-spacing:-.04em;margin-top:8px;}
.doc-meta{font-family:var(--mono);font-size:10.5px;color:var(--mt);margin-top:7px;}
.doc-rule{height:2px;background:var(--ik);margin:20px 0 22px;}
.doc-priority{font-family:var(--dsp);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ac);font-weight:700;margin-bottom:9px;}
.doc-finding-title{font-size:20px;font-weight:700;letter-spacing:-.028em;line-height:1.3;margin-bottom:16px;}
.doc-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--rl);}
@media(max-width:620px){.doc-row{grid-template-columns:1fr;gap:5px;}}
.dr-label{font-family:var(--dsp);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mt);padding-top:3px;}
.dr-val{font-size:15px;line-height:1.6;color:var(--mt);}
.dr-val b{color:var(--ik);}
.doc-body-text{font-size:15px;line-height:1.65;color:var(--mt);}
.doc-chart-title{font-size:16px;font-weight:700;letter-spacing:-.02em;}
.doc-chart-sub{font-family:var(--mono);font-size:10.5px;color:var(--mt);margin-top:4px;margin-bottom:14px;}
.doc-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ac);border:1px solid var(--ac);padding:3px 7px;}
.doc-table{border-collapse:collapse;width:100%;font-size:14px;}
.doc-table th,.doc-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rl);}
.doc-table th{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mt);background:var(--sf);}
.eng-table{border-collapse:collapse;width:100%;font-size:14px;}
.eng-table th,.eng-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rl);}
.eng-table th{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mt);background:var(--sf);}
.yes{color:var(--ac);font-weight:700;} .no{color:var(--mt);} .done{color:var(--ac);font-weight:700;}
/* horizontal bar chart */
.bar-chart{display:grid;gap:9px;}
.bar-row{display:grid;grid-template-columns:150px minmax(0,1fr) 52px;gap:12px;align-items:center;font-size:13.5px;}
@media(max-width:620px){.bar-row{grid-template-columns:100px minmax(0,1fr) 44px;}}
.bar-name{color:var(--mt);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;}
.bar-row .bar-fill{height:14px;background:var(--ac);width:100%;}
.bar-pct{font-family:var(--mono);font-size:11.5px;color:var(--ik);text-align:right;font-variant-numeric:tabular-nums;}
.bar-legend,.donut-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;}
.lg-item{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;color:var(--mt);}
.lg-dot{width:9px;height:9px;background:var(--ac);}
.donut-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;}
@media(max-width:620px){.donut-wrap{grid-template-columns:1fr;}}
.dl-row{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mt);padding:5px 0;}
.dl-row b{color:var(--ik);margin-left:auto;font-family:var(--mono);font-size:12px;}
/* Swatch colour is NOT set here. The donut segments and these swatches
must stay on one ramp, and the donut's colours live in inline SVG
stroke attributes, so _convert.py rewrites both from a single RAMP.
An !important here would silently desync the legend from the chart. */
.dl-swatch{width:11px;height:11px;flex-shrink:0;}
/* document timeline */
.doc-timeline{display:grid;gap:0;border-top:1px solid var(--rl);}
.tl-item{display:grid;grid-template-columns:16px 108px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rl);align-items:start;}
@media(max-width:620px){.tl-item{grid-template-columns:16px minmax(0,1fr);}.tl-when{grid-column:2;}}
.tl-dot{width:9px;height:9px;background:var(--ac);margin-top:6px;}
.tl-when{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mt);padding-top:3px;}
.tl-what{font-size:15px;font-weight:700;letter-spacing:-.02em;}
.tl-detail{font-size:14px;color:var(--mt);line-height:1.55;margin-top:3px;}
/* screenshot frames */
.shot-frame{border:1px solid var(--rl-str);background:var(--gr);}
.shot-chrome{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid var(--rl);background:var(--sf);}
.shot-doc-icon{width:11px;height:14px;background:var(--ac);flex-shrink:0;}
.shot-filename{font-family:var(--mono);font-size:10.5px;color:var(--mt);}
.shot-pageno{font-family:var(--mono);font-size:10px;color:var(--mt);margin-left:auto;}
.shot-body{padding:18px 20px;}
.shot-caption{font-family:var(--mono);font-size:10.5px;color:var(--mt);line-height:1.55;margin-top:9px;padding-left:11px;border-left:2px solid var(--rl);}
.flow-step.is-seo{background:none;}
/* ==========================================================
MARKER GRID SAFETY
These blocks are "narrow marker column + stacked content".
With three or more items a two column grid drops the third
into the marker column and renders it a word per line. Every
child is pinned to column 2; markers are pinned to column 1.
========================================================== */
.aud-step > *,
.flow-step > *,
.section-list-item > *,
.step > *,
.entry > *,
.res > *,
.res-row > *,
.doc-row > *:not(.dr-label),
.principles li > *:not(.p-label),
.article-grid > .article-body{grid-column:2;}
.flow-step > .flow-n,
.step > .n,
.entry > .n,
.res > .n,
.res-row > .res-dot,
.doc-row > .dr-label,
.principles li > .p-label{grid-column:1;}
.tl-item > *{grid-column:3;}
.tl-item > .tl-dot{grid-column:1;}
.tl-item > .tl-when{grid-column:2;}
@media(max-width:620px){.tl-item > *{grid-column:2;} .tl-item > .tl-dot{grid-column:1;}}
.archive-row > a{grid-column:2;}
.archive-row > .archive-meta{grid-column:3;}
@media(max-width:620px){.archive-row > a,.archive-row > .archive-meta{grid-column:2;}}
/* ==========================================================
REFINEMENT PASS
Eyebrows removed, folds alternate, one stroke weight, motion.
========================================================== */
.sec-title{font-size:clamp(30px,4.4vw,46px); letter-spacing:-.04em; margin-bottom:14px;}
.sec-dek{font-size:17.5px; color:var(--mt); line-height:1.6; max-width:58ch; margin-bottom:34px;}
.sec-dek b{color:var(--ik); font-weight:700;}
/* one weight. 2px and 3px rules were reading as clutter. */
.proofhead,.figs,.quotes,.fit-grid,.stat-grid,.steps,.faq,.archive-list,
.float-grid,.aud-flow,.section-list,.flow,.meta-pills,.hl-grid,.principles,
.doc-timeline,.article-body h2,.case-link,.article-endcap,.entry:first-of-type,
.phase:first-of-type,.about-cta{border-top-width:1px!important;}
.takeaway,.box,.caveat,.tbl-hint,.tbl-src,.method,.figcaption{border-left-width:2px!important;}
/* testimonials: round portraits, and both quotes hang from one baseline */
.quotes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 44px; border-top:1px solid var(--rl);}
@media(max-width:820px){.quotes{grid-template-columns:1fr; gap:0;}}
.quote{display:grid; grid-template-rows:1fr auto; padding:30px 0 4px; border-right:none;}
.quote:last-child{padding-left:0;}
.quote p{font-size:17px; line-height:1.6; color:var(--ik); margin-bottom:22px;}
.quote .who-q{display:flex; align-items:center; gap:13px;}
.quote img,.byline img,.author-strip img,.av{border-radius:50%;}
.quote img{width:44px; height:44px;}
/* motion: one orchestrated arrival, nothing scattered */
@media (prefers-reduced-motion: no-preference){
[data-rise]{opacity:0; transform:translateY(14px);}
[data-rise].in{opacity:1; transform:none;
transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);}
.hero h1{animation:rise .6s cubic-bezier(.22,.61,.36,1) both;}
.hero .lede{animation:rise .6s cubic-bezier(.22,.61,.36,1) .08s both;}
.hero .cta-row{animation:rise .6s cubic-bezier(.22,.61,.36,1) .16s both;}
.hero .serp{animation:rise .7s cubic-bezier(.22,.61,.36,1) .12s both;}
.hero .res{opacity:0; animation:rise .45s cubic-bezier(.22,.61,.36,1) both;}
.hero .res:nth-of-type(1){animation-delay:.45s}
.hero .res:nth-of-type(2){animation-delay:.60s}
.hero .res:nth-of-type(3){animation-delay:.75s}
.hero .res.out{animation-delay:1.05s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.btn.solid:hover{transform:translateY(-1px);}
.float-card{transition:border-color .14s ease, background .14s ease, transform .14s ease;}
.float-card:hover{transform:translateY(-2px);}
}
/* case study and long service pages: the fold does the separating,
so the phase sections drop their rules too */
section.phase{padding:96px 0; border-top:none;}
section.phase[data-tone="tint"]{background:var(--sf);}
.case-hero,.about-hero,.res-hero,.tool-hero{border-bottom:none;}
/* the sticky section index bar was a second navigation competing with the
real one, directly under it */
.toc-bar{display:none;}
/* ==========================================================
V2 SYSTEM: dark folds, wider type scale, offset shadows.
Migrated from the homepage rebuild so every page inherits it.
========================================================== */
[data-fold="dark"]{
background:
radial-gradient(110% 85% at 86% 6%, rgba(90,70,255,.36) 0%, rgba(90,70,255,0) 56%),
linear-gradient(154deg, var(--mid) 0%, var(--ac) 36%, var(--abyss) 100%);
color:#FFFFFF; border-top:none;
}
[data-fold="dark"] h1,[data-fold="dark"] h2,[data-fold="dark"] h3{color:#FFFFFF;}
[data-fold="dark"] p,[data-fold="dark"] .lede,[data-fold="dark"] .dek,[data-fold="dark"] .sub{color:rgba(255,255,255,.78);}
[data-fold="dark"] .lab,[data-fold="dark"] .kicker,[data-fold="dark"] .case-kicker{color:rgba(255,255,255,.55);}
[data-fold="dark"] a{color:#FFFFFF;}
[data-fold="dark"] .btn.solid{background:#FFFFFF;color:var(--ac);border-color:#FFFFFF;box-shadow:6px 6px 0 rgba(255,255,255,.2);}
[data-fold="dark"] .btn.solid:hover{background:#FFFFFF;box-shadow:9px 9px 0 rgba(255,255,255,.26);}
[data-fold="dark"] .btn.ghost{border-color:rgba(255,255,255,.4);color:#FFFFFF;}
[data-fold="dark"] .btn.ghost:hover{border-color:#FFFFFF;color:#FFFFFF;}
[data-fold="tint"]{background:var(--sf);border-top:none;}
[data-fold="ice"]{background:var(--ice);border-top:none;}
/* the scale the old system was missing: it ran 10px to 46px, a 4.5x spread */
.t-display{font-size:clamp(44px,8.6vw,118px);font-weight:800;letter-spacing:-.052em;line-height:.92;}
.t-xl{font-size:clamp(30px,4.8vw,58px);font-weight:800;letter-spacing:-.042em;line-height:1.02;}
.t-fig{font-size:clamp(40px,6.2vw,84px);font-weight:800;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums;}
/* offset shadow, the house elevation. No soft multi-layer blur. */
.lift{box-shadow:10px 10px 0 rgba(26,13,171,.10);}
.lift-hard{box-shadow:14px 14px 0 rgba(7,3,43,.30);}
/* ==========================================================
SITE CHROME: fixed nav, resources dropdown, mobile menu, footer.
Migrated from the homepage rebuild. Inner pages carry class="solid"
on #nav; only a dark hero page starts it transparent.
========================================================== */
/* the nav is fixed, so pages that start solid need to clear it. A dark
hero page opens under a transparent nav and sets this to 0 itself. */
main{padding-top:66px;}
body.home main{padding-top:0;}
#nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:20px 0;transition:background .3s, backdrop-filter .3s, padding .3s;}
#nav.solid{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);padding:12px 0;box-shadow:0 1px 0 rgba(12,12,20,.07);}
.nav-in{display:flex;justify-content:space-between;align-items:center;}
.brand{font-weight:800;letter-spacing:-.03em;font-size:16.5px;color:#FFFFFF;transition:color .3s;}
.brand i{color:#FFFFFF;font-style:normal;opacity:.6;}
#nav.solid .brand{color:var(--ik);} #nav.solid .brand i{color:var(--ac);opacity:1;}
.nav-r{display:flex;align-items:center;gap:26px;}
.nav-r a{font-size:14px;color:rgba(255,255,255,.72);transition:color .3s;}
#nav.solid .nav-r a{color:var(--mt);}
.nav-r a:hover{color:var(--ac);}
#nav.solid .nav-r a:hover{color:var(--ac);}
.nav-cta{background:#FFFFFF;color:var(--ac)!important;padding:10px 18px;font-weight:700;font-size:14px;border-radius:2px;}
#nav.solid .nav-cta{background:var(--ac);color:#FFFFFF!important;}
/* resources dropdown. Works on both nav states: transparent over the hero
and solid once you scroll past it. */
.drop{position:relative;}
.drop-t{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:6px 0;
font-family:var(--dsp);font-size:14px;color:rgba(255,255,255,.72);transition:color .3s;}
#nav.solid .drop-t{color:var(--mt);}
.drop-t:hover,.drop:hover .drop-t,.drop:focus-within .drop-t,.drop.open .drop-t{color:var(--ac);}
#nav:not(.solid) .drop-t:hover,#nav:not(.solid) .drop:hover .drop-t{color:#FFFFFF;}
.drop-t svg{transition:transform .18s ease;}
.drop:hover .drop-t svg,.drop:focus-within .drop-t svg,.drop.open .drop-t svg{transform:rotate(180deg);}
.drop-p{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
min-width:196px;background:#FFFFFF;padding:8px;display:grid;gap:2px;
box-shadow:0 1px 0 rgba(12,12,20,.08), 0 18px 40px -14px rgba(7,3,43,.34);
opacity:0;visibility:hidden;transition:opacity .18s ease, transform .18s ease, visibility .18s;}
.drop:hover .drop-p,.drop:focus-within .drop-p,.drop.open .drop-p{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.drop-p::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;}
.drop-p a{display:block;padding:9px 12px;font-size:14px;color:var(--ik)!important;border-radius:2px;}
.drop-p a:hover{background:var(--ice);color:var(--ac)!important;}
@media(max-width:860px){.nav-r a:not(.nav-cta),.drop{display:none;}}
/* ---------------- mobile menu ---------------- */
.burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;
flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;padding:0;margin-left:4px;}
.burger span{display:block;width:22px;height:2px;background:#FFFFFF;transition:transform .26s cubic-bezier(.22,.61,.36,1), opacity .2s;}
#nav.solid .burger span{background:var(--ik);}
.burger[aria-expanded="true"] span{background:#FFFFFF;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg);}
@media(max-width:860px){
.burger{display:flex;}
/* the wordmark wrapped to two lines and the CTA to three. On a phone the
header is a wordmark, one action and a menu. Nothing else fits. */
.brand{font-size:15px;white-space:nowrap;}
.b-tail{display:none;}
.nav-cta{padding:9px 14px;font-size:13px;white-space:nowrap;}
.nav-in{gap:10px;}
}
@media(max-width:400px){ .nav-cta{display:none;} }
.msheet{
position:fixed;inset:0;z-index:45;overflow-y:auto;
background:linear-gradient(158deg,var(--mid) 0%,var(--ac) 38%,var(--abyss) 100%);
opacity:0;transition:opacity .26s ease;
}
.msheet.open{opacity:1;}
.ms-in{display:grid;align-content:start;gap:2px;padding:112px 32px 48px;max-width:560px;}
.ms-in a{font-size:clamp(28px,7.4vw,40px);font-weight:800;letter-spacing:-.04em;color:#FFFFFF;padding:9px 0;}
.ms-in a:active{color:#B9B2FF;}
.ms-h{font-family:var(--dsp);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
color:rgba(255,255,255,.45);margin-top:28px;padding-bottom:6px;border-top:1px solid rgba(255,255,255,.16);padding-top:26px;}
.ms-in a.ms-cta{margin-top:34px;background:#FFFFFF;color:var(--ac);font-size:17px;font-weight:700;
letter-spacing:-.01em;padding:16px 24px;text-align:center;justify-self:start;box-shadow:6px 6px 0 rgba(255,255,255,.2);}
body.locked{overflow:hidden;}
@media (prefers-reduced-motion: reduce){.msheet,.burger span{transition:none;}}
/* ==========================================================
CASE STUDY
========================================================== */
.case-hero{position:relative;overflow:hidden;padding:132px 0 84px;border-bottom:none;}
.case-hero .hero-ghost{position:absolute;right:-5vw;top:-16vh;height:140%;opacity:.07;pointer-events:none;}
.case-hero .wrap{position:relative;}
.case-hero .case-kicker{font-family:var(--dsp);font-weight:600;font-size:12px;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:22px;}
.case-hero h1{font-size:clamp(38px,7vw,88px);font-weight:800;letter-spacing:-.05em;line-height:.96;
max-width:15ch;margin-bottom:24px;color:#FFFFFF;}
.case-hero h1 em{font-style:normal;color:#9C93FF;}
.case-hero .dek{font-size:clamp(16.5px,1.9vw,20px);line-height:1.55;color:rgba(255,255,255,.72);max-width:58ch;}
/* the meta row was five pills at three different alignments with a stray
rule under the last one. One definition list, one grid, one rule. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 30px;
margin-top:clamp(34px,5vw,52px);padding-top:26px;border-top:1px solid rgba(255,255,255,.22);}
.facts div{display:grid;gap:6px;}
.facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.facts dd{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.015em;color:#FFFFFF;}
.facts dd a{color:#FFFFFF;border-bottom:1px solid rgba(255,255,255,.4);}
.facts dd a:hover{border-bottom-color:#FFFFFF;}
.case-hero .byline{margin-top:clamp(30px,4vw,44px);border-top:none;padding-top:0;}
.case-hero .byline-name{color:#FFFFFF;}
.case-hero .byline-name a{color:#FFFFFF;border-bottom:1px solid rgba(255,255,255,.45);}
.case-hero .byline-role{color:rgba(255,255,255,.6);}
.case-hero .byline-avatar{border-color:rgba(255,255,255,.3);border-radius:50%;}
.case-client-logo{display:none;}
/* ==========================================================
ARTICLE HERO on the dark fold. Shared by blog/, guides/ and
the research studies: 18 pages off one shell.
========================================================== */
.article-hero{position:relative;overflow:hidden;padding:0;}
.article-hero .hero-ghost{position:absolute;right:-5vw;top:-18vh;height:150%;opacity:.07;pointer-events:none;}
.article-hero .wrap{position:relative;}
.article-hero-pad{padding:120px 0 76px!important;border-bottom:none!important;}
.article-hero .case-kicker{font-family:var(--dsp);font-weight:600;font-size:12px;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:22px;}
.article-hero h1{font-size:clamp(34px,5.6vw,68px);font-weight:800;letter-spacing:-.046em;
line-height:.98;max-width:19ch;margin-bottom:22px;color:#FFFFFF;}
.article-hero .dek{font-size:clamp(16.5px,1.8vw,20px);line-height:1.55;color:rgba(255,255,255,.74);max-width:58ch;}
.article-hero .byline{margin-top:clamp(28px,3.6vw,40px);border-top:none;padding-top:0;}
.article-hero .byline-name{color:#FFFFFF;}
.article-hero .byline-name a{color:#FFFFFF;border-bottom:1px solid rgba(255,255,255,.45);}
.article-hero .byline-role{color:rgba(255,255,255,.6);}
.article-hero .byline-avatar{border-color:rgba(255,255,255,.3);border-radius:50%;}
/* the reading column gets air now that the hero carries the weight */
.article-layout{padding-top:0;}
.article-grid{padding:clamp(48px,6vw,76px) 0 clamp(64px,8vw,96px);}
.toc-sticky .toc-label,.rail-toc .lab{font-family:var(--dsp);font-weight:600;font-size:11px;letter-spacing:.2em;}
.article-body h2{margin-top:clamp(46px,6vw,64px);}
.article-endcap{border-top:1px solid var(--rl);}
/* ==========================================================
ABOUT hero on the dark fold
========================================================== */
.about-hero{position:relative;overflow:hidden;padding:120px 0 84px;border-bottom:none;}
.about-hero .hero-ghost{position:absolute;right:-5vw;top:-16vh;height:145%;opacity:.07;pointer-events:none;}
.about-hero .about-hero-grid{position:relative;align-items:center;}
.about-photo-wrap{position:relative;width:100%;max-width:300px;}
.about-photo{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
position:relative;z-index:1;border:none;border-radius:0;}
.about-photo-wrap::before{content:"";position:absolute;inset:0;transform:translate(16px,16px);
background:rgba(255,255,255,.16);z-index:0;border-radius:0;}
.about-kicker{font-family:var(--dsp);font-weight:600;font-size:12px;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:18px;}
.about-hero h1{font-size:clamp(40px,6.4vw,80px);font-weight:800;letter-spacing:-.05em;
line-height:.96;margin-bottom:16px;color:#FFFFFF;}
.about-hero .role{font-family:var(--dsp);font-size:12px;color:rgba(255,255,255,.6);margin-bottom:22px;}
.about-hero .role b{color:#FFFFFF;font-family:var(--dsp);font-size:14.5px;font-weight:700;}
.about-hero .intro{font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:rgba(255,255,255,.78);max-width:52ch;}
.about-hero .tag{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.7);}
/* .pill inherits the light-fold treatment from the services page, which is
dark ink on a dark ground here. Restyle inside the hero. */
.about-hero .pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.about-hero .pill{padding:8px 14px;border:1px solid rgba(255,255,255,.26);
font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
color:rgba(255,255,255,.66);}
.about-hero .pill b{display:inline;margin:0;font-family:var(--mono);font-size:10.5px;
letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF;font-weight:700;}
/* ==========================================================
HOMEPAGE FOLDS. Scoped to body.home: .hero, .faq, .card, .sub and
.stat all exist elsewhere in this stylesheet, so unscoped these would
leak into the other 31 pages.
========================================================== */
.home .hero{
min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;
background:
radial-gradient(120% 90% at 88% 8%, rgba(90,70,255,.42) 0%, rgba(90,70,255,0) 55%),
linear-gradient(152deg, var(--mid) 0%, var(--ac) 34%, var(--abyss) 100%);
color:#FFFFFF;padding:120px 0 72px;
}
/* the mark, enormous, cropped by the edge */
.home .hero .ghost{position:absolute;right:-6vw;top:-14vh;height:132vh;opacity:.07;pointer-events:none;}
.home .q{display:flex;align-items:center;gap:11px;margin-bottom:30px;}
.home .q .dot{width:7px;height:7px;border-radius:50%;background:#6EE787;box-shadow:0 0 0 0 rgba(110,231,135,.7);animation:pulse 2.4s infinite;flex-shrink:0;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(110,231,135,.6)}70%{box-shadow:0 0 0 9px rgba(110,231,135,0)}100%{box-shadow:0 0 0 0 rgba(110,231,135,0)}}
/* label is Archivo now, not mono. Mono is reserved for actual data:
captions, figures, source lines. A label is voice, not data. */
.home .q .lab{font-family:var(--dsp);font-weight:600;font-size:12px;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.62);}
/* the question cycles across categories, so the hero never implies he only
works on one. Fixed height, so nothing below it shifts. */
.home .qwrap{position:relative;min-height:calc(1.35em * 2 * clamp(19px,2.5vw,28px) / 1em);
height:clamp(52px,7vw,78px);margin-bottom:clamp(26px,3.6vw,40px);}
.home .qtext{position:absolute;inset:0;font-family:var(--dsp);font-weight:400;
font-size:clamp(19px,2.5vw,28px);line-height:1.32;letter-spacing:-.02em;
color:rgba(255,255,255,.72);max-width:26ch;margin:0;}
.home .caret{display:inline-block;width:2px;height:1em;background:#6EE787;
vertical-align:-.14em;margin-left:3px;}
/* solid while typing, blinking only when the line is resting */
.home .caret.rest{animation:blink 1.05s step-end infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.home .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.home .named{font-family:var(--dsp);font-weight:600;font-size:clamp(15px,1.7vw,19px);
letter-spacing:-.01em;color:rgba(255,255,255,.5);margin-bottom:14px;}
.home .verdict{font-size:clamp(52px,11.5vw,158px);font-weight:800;letter-spacing:-.055em;
line-height:.88;color:#FFFFFF;max-width:11ch;}
.home .verdict em{font-style:normal;color:var(--signal);}
.home .hero-foot{margin-top:52px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.home .hero-foot p{font-size:clamp(17px,1.9vw,21px);color:rgba(255,255,255,.82);max-width:34ch;line-height:1.45;}
.home .btn{display:inline-block;padding:15px 28px;font-size:15.5px;font-weight:700;letter-spacing:-.012em;border-radius:2px;transition:transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .16s;}
.home .btn.fill{background:#FFFFFF;color:var(--ac);box-shadow:6px 6px 0 rgba(255,255,255,.22);}
.home .btn.fill:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 rgba(255,255,255,.28);}
.home .btn.line{border:1px solid rgba(255,255,255,.4);color:#FFFFFF;}
.home .btn.line:hover{border-color:#FFFFFF;transform:translateY(-2px);}
.home .btn.dark{background:var(--ac);color:#FFFFFF;box-shadow:6px 6px 0 rgba(26,13,171,.20);}
.home .btn.dark:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 rgba(26,13,171,.26);}
/* hero H1: visible, normal size, keyword bearing. The 158px line is a
display div, not a heading. Nothing hidden from anyone. */
.home .hero-foot{margin-top:clamp(34px,5vw,54px);display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;justify-content:space-between;}
/* the claim leads visually, the H1 sits under it. Both visible, same size.
Heading level and font size are unrelated, so the H1 does not have to
be the loudest thing to be the H1. */
.home .claim{max-width:34ch;}
.home .cl-lead{font-size:clamp(18px,2vw,23px);font-weight:600;line-height:1.35;letter-spacing:-.022em;color:#FFFFFF;}
.home .hero-foot h1{text-wrap:balance;font-size:clamp(18px,2vw,23px);font-weight:400;line-height:1.35;letter-spacing:-.022em;color:rgba(255,255,255,.62);margin-top:2px;}
.home .hbtns{display:flex;gap:12px;flex-wrap:wrap;}
.home .turn{padding:clamp(90px,13vh,160px) 0;background:#FFFFFF;}
.home .turn .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:start;}
@media(max-width:820px){.home .turn .wrap{grid-template-columns:1fr;gap:24px;}}
.home .turn h2{font-size:clamp(32px,4.8vw,60px);max-width:none;}
.home .turn h2 em{font-style:normal;color:var(--ac);}
/* font-family set explicitly: the unscoped .sub is the case study's mono
chart subtitle, and it was winning the font here. Collision number seven. */
.home .turn .sub{margin-top:6px;font-family:var(--dsp);font-size:17.5px;line-height:1.65;color:var(--mt);max-width:none;}
.home .proof{background:#FFFFFF;padding:clamp(90px,13vh,150px) 0;position:relative;overflow:hidden;}
.home .proof h2{font-size:clamp(28px,4vw,46px);max-width:18ch;margin-bottom:14px;}
.home .proof .sub{font-size:16.5px;color:var(--mt);margin-bottom:clamp(40px,6vw,72px);}
.home .proof .sub b{color:var(--ik);}
.home .proof .more{display:inline-block;margin-top:30px;color:var(--ac);font-weight:600;border-bottom:1px solid var(--ac);padding-bottom:2px;}
/* 10,000 / 7x / 90% are 6, 2 and 3 characters wide. In equal columns they
will never balance, whatever the alignment. So: numbers right aligned to
one shared edge, captions left aligned to another. Now they line up. */
.home .stack{display:grid;gap:clamp(14px,2vw,26px);max-width:820px;}
/* fixed first track, not auto: each .stat is its own grid, so auto sized
every row independently and the numbers never shared an edge. */
.home .stat{display:grid;grid-template-columns:clamp(132px,18.5vw,232px) minmax(0,1fr);
gap:clamp(20px,3vw,40px);align-items:center;
padding:clamp(14px,2vw,22px) 0;border-top:1px solid rgba(26,13,171,.14);}
.home .stat:last-child{border-bottom:1px solid rgba(26,13,171,.14);}
.home .stat .fig{font-size:clamp(40px,6.2vw,84px);font-weight:800;letter-spacing:-.055em;
line-height:1;color:var(--ac);font-variant-numeric:tabular-nums;
text-align:right;}
.home .stat .cap{font-family:var(--mono);font-size:clamp(11px,1.05vw,13px);
line-height:1.6;color:var(--mt);max-width:34ch;}
@media(max-width:620px){
.home .stat{grid-template-columns:1fr;gap:8px;}
.home .stat .fig{text-align:left;min-width:0;}
}
.home .caveat{margin-top:clamp(40px,6vw,70px);font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--mt);max-width:60ch;padding-left:16px;border-left:2px solid rgba(26,13,171,.28);}
.home .who-fold{padding:clamp(90px,13vh,150px) 0;background:var(--ice);overflow:hidden;}
.home .who-grid{display:grid;grid-template-columns:clamp(200px,26vw,300px) minmax(0,1fr);gap:clamp(34px,6vw,80px);align-items:center;}
@media(max-width:820px){.home .who-grid{grid-template-columns:1fr;gap:34px;}}
.home .portrait{position:relative;}
.home .portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;position:relative;z-index:1;}
/* the offset block tracks the IMAGE box, not the container. Sized to the
container it grew when the caption was added and swallowed it. */
.home .portrait::after{content:"";position:absolute;top:16px;left:16px;width:100%;aspect-ratio:4/5;background:var(--ac);z-index:0;}
.home .who-fold h2{font-size:clamp(28px,4vw,46px);max-width:15ch;margin-bottom:20px;}
.home .who-fold p{color:var(--mt);font-size:17px;line-height:1.65;max-width:52ch;}
.home .who-fold p + p{margin-top:14px;}
.home .who-fold .more{display:inline-block;margin-top:22px;color:var(--ac);font-weight:600;border-bottom:1px solid var(--ac);padding-bottom:2px;}
/* career marquee */
.home .marquee{margin-top:clamp(56px,8vw,90px);border-top:1px solid rgba(12,12,20,.12);border-bottom:none;overflow:hidden;padding:20px 0;}
.home .mq{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite;}
.home .mq span{font-size:clamp(22px,3.4vw,40px);font-weight:800;letter-spacing:-.04em;color:rgba(12,12,20,.13);padding:0 clamp(20px,3vw,40px);white-space:nowrap;}
.home .mq span.on{color:var(--ac);}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* pause on the strip itself, not the whole fold */
.home .marquee:hover .mq{animation-play-state:paused;}
.home .offer{
background:
radial-gradient(100% 80% at 12% 0%, rgba(110,90,255,.34) 0%, rgba(110,90,255,0) 58%),
linear-gradient(200deg, var(--ac) 0%, var(--mid) 45%, var(--abyss) 100%);
color:#FFFFFF;padding:clamp(90px,13vh,150px) 0;position:relative;overflow:hidden;
}
.home .offer-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,34vw,420px);gap:clamp(36px,6vw,80px);align-items:center;}
@media(max-width:860px){.home .offer-grid{grid-template-columns:1fr;gap:38px;}}
.home .olab{display:block;font-family:var(--dsp);font-weight:600;font-size:12px;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:18px;}
.home .offer h2{font-size:clamp(32px,5vw,62px);max-width:14ch;margin-bottom:22px;}
.home .offer .sub{color:rgba(255,255,255,.78);font-size:17.5px;line-height:1.6;max-width:44ch;}
.home .card{background:#FFFFFF;color:var(--ik);padding:32px 32px 34px;box-shadow:14px 14px 0 rgba(7,3,43,.34);}
.home .card .price{font-size:clamp(36px,4.6vw,52px);font-weight:800;letter-spacing:-.045em;line-height:1;}
.home .card .price small{display:block;font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--mt);margin-top:10px;}
.home .card ul{list-style:none;margin:24px 0 26px;display:grid;gap:11px;}
.home .card li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:var(--ik);}
.home .card li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:1.5px;background:var(--ac);}
.home .card .note{font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--mt);margin-top:18px;}
.home .close{padding:clamp(90px,14vh,160px) 0;text-align:center;background:#FFFFFF;}
.home .close h2{font-size:clamp(30px,4.6vw,58px);max-width:20ch;margin:0 auto 26px;letter-spacing:-.045em;}
.home .close .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.home .close .st{margin-top:26px;font-family:var(--dsp);font-size:11.5px;color:var(--mt);letter-spacing:.06em;}
.home footer{background:var(--ik);color:rgba(255,255,255,.55);padding:44px 0;font-family:var(--mono);font-size:11.5px;}
.home .f-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.home footer a{color:rgba(255,255,255,.72);}
.home footer a:hover{color:#FFFFFF;}
.home .says{background:#FFFFFF;padding:clamp(90px,13vh,150px) 0;}
.home .says h2{font-size:clamp(28px,4vw,46px);max-width:18ch;margin-bottom:clamp(38px,5vw,58px);}
.home .qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,46px);}
@media(max-width:820px){.home .qgrid{grid-template-columns:1fr;}}
.home .tq{margin:0;background:#FFFFFF;padding:32px 32px 28px;box-shadow:10px 10px 0 rgba(26,13,171,.10);
display:grid;grid-template-rows:1fr auto;gap:24px;}
.home .tq blockquote{margin:0;font-size:16.5px;line-height:1.62;color:var(--ik);}
.home .tq blockquote::before{content:'\201C';} .tq blockquote::after{content:'\201D';}
.home .tq figcaption{display:flex;align-items:center;gap:13px;}
.home .tq figcaption img{width:46px;height:46px;border-radius:50%;object-fit:cover;}
.home .tq figcaption span{display:grid;font-size:14.5px;}
.home .tq figcaption b{font-weight:700;letter-spacing:-.015em;}
.home .tq figcaption span{color:var(--mt);font-family:var(--mono);font-size:11.5px;}
.home .tq figcaption b{font-family:var(--dsp);font-size:15px;color:var(--ik);}
.home .faqs{padding:clamp(90px,13vh,150px) 0;background:var(--ice);}
.home .faqs h2{font-size:clamp(28px,4vw,46px);max-width:16ch;margin-bottom:clamp(30px,4vw,46px);}
.home .faq{max-width:820px;border-top:1px solid rgba(12,12,20,.12);}
.home .faq details{border-bottom:1px solid rgba(12,12,20,.12);}
.home .faq summary{cursor:pointer;padding:20px 0;font-size:18px;font-weight:700;letter-spacing:-.025em;
list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:baseline;}
.home .faq summary::-webkit-details-marker{display:none;}
.home .faq summary::after{content:"+";color:var(--ac);font-weight:700;font-size:20px;line-height:1;}
.home .faq details[open] summary::after{content:"\2013";}
.home .faq .a{padding:0 0 22px;font-size:16px;color:var(--mt);line-height:1.68;max-width:70ch;}
.home .faq-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;}
.home .btn.ghost{border:1px solid rgba(12,12,20,.22);color:var(--ik);}
.home .btn.ghost:hover{border-color:var(--ac);color:var(--ac);}
@media (prefers-reduced-motion: no-preference){
.home .q{animation:up .6s cubic-bezier(.19,1,.22,1) both;}
.home .qwrap{animation:up .6s cubic-bezier(.19,1,.22,1) .12s both;}
.home .named{animation:up .6s cubic-bezier(.19,1,.22,1) .30s both;}
.home .verdict{animation:up .72s cubic-bezier(.19,1,.22,1) .52s both;}
.home .verdict em{animation:flare .5s ease .95s both;}
@keyframes flare{from{color:#FFFFFF}to{color:var(--signal)}}
.home .hero-foot{animation:up .6s cubic-bezier(.19,1,.22,1) 1.15s both;}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.home [data-rise]{opacity:0;transform:translateY(22px);}
.home [data-rise].in{opacity:1;transform:none;transition:opacity .62s cubic-bezier(.19,1,.22,1), transform .62s cubic-bezier(.19,1,.22,1);}
.home .stat{transition:transform .5s cubic-bezier(.19,1,.22,1);}
}
@media (prefers-reduced-motion: reduce){ .mq{animation:none;} }
/* ==========================================================
RESEARCH
The rail carries the study's real state, not filler. Index, date,
source, scope only; a page with none of those shows contents alone.
========================================================== */
.res-hero{position:relative;overflow:hidden;padding:118px 0 82px;border-bottom:none;}
.res-hero .hero-ghost{position:absolute;right:-5vw;top:-16vh;height:150%;opacity:.07;pointer-events:none;}
.res-hero .wrap{position:relative;}
.res-hero .case-kicker{font-family:var(--dsp);font-weight:600;font-size:12px;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:20px;}
.res-hero h1{font-size:clamp(36px,6vw,74px);font-weight:800;letter-spacing:-.048em;line-height:.98;
max-width:16ch;color:#FFFFFF;}
.res-hero .dek{font-size:clamp(16.5px,1.8vw,20px);line-height:1.55;color:rgba(255,255,255,.74);max-width:60ch;}
.rail-meta{display:grid;gap:15px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--rl);}
.rail-meta div{line-height:1.45;}
.rail-meta .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--mt);}
.rail-meta .v{display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ik);margin-top:2px;}
.rail-meta .v.live{color:var(--ac);}
.rail-meta .v.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--ac);margin-right:6px;vertical-align:middle;}
@media(max-width:900px){
.rail-meta{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:14px 18px;}
}
/* ==========================================================
FOOTER. This block was silently dropped in the chrome migration:
the extraction sliced footer-comment -> motion-comment, but motion
sits BEFORE the footer in the source, so the slice was empty and
32 pages shipped footer markup with no styles behind it.
========================================================== */
footer{background:var(--ik);color:rgba(255,255,255,.6);padding:70px 0 34px;font-size:14.5px;}
.f-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:38px;}
@media(max-width:820px){.home .f-grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media(max-width:520px){.home .f-grid{grid-template-columns:1fr;}}
.f-mark{display:block;font-family:var(--dsp);font-weight:800;font-size:16px;letter-spacing:-.03em;color:var(--white);}
.f-mark i{color:var(--ac);font-style:normal;}
.social{display:flex;gap:14px;margin-top:18px;}
.social a{color:rgba(255,255,255,.5);}
.social a:hover{color:var(--white);}
.f-h{display:block;font-family:var(--dsp);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:14px;}
.f-col{display:grid;gap:9px;align-content:start;}
.f-col a{color:rgba(255,255,255,.72);font-size:14.5px;}
.f-col a:hover{color:var(--white);}
.f-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:52px;padding-top:22px;
border-top:1px solid rgba(255,255,255,.12);font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.42);}
.f-base a{color:rgba(255,255,255,.62);}
.f-base a:hover{color:var(--white);}
/* space between a dark fold and whatever follows it */
[data-fold="dark"] + section{padding-top:clamp(56px,8vw,88px);}
/* one line, sized to hold 33 tracked characters inside the portrait column */
/* p.portrait-cap: .home .who-fold p outranks a bare class on font-size */
.home p.portrait-cap{position:relative;z-index:1;margin-top:32px;font-family:var(--mono);
font-size:10px;letter-spacing:.06em;white-space:nowrap;
text-transform:uppercase;color:var(--mt);}
.home .card-more{display:inline-block;margin-left:14px;font-size:14px;font-weight:600;
color:var(--ac);border-bottom:1px solid var(--ac);padding-bottom:1px;}
/* ==========================================================
ABOUT / Daraz. The ladder appears exactly once, as a vertical
list beside the paragraph, not spelled out in prose and then
repeated in mono directly underneath.
========================================================== */
.daraz-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
gap:clamp(32px,5vw,72px);align-items:start;margin-top:18px;}
@media(max-width:820px){.home .daraz-grid{grid-template-columns:1fr;gap:30px;}}
.daraz-lead{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ac);
max-width:44ch;margin-bottom:16px;line-height:1.45;}
.daraz-body{font-size:16.5px;color:var(--mt);line-height:1.65;max-width:56ch;}
.ladder{list-style:none;counter-reset:lad;margin:4px 0 0;padding:0 0 0 18px;
border-left:2px solid var(--rl);display:grid;gap:14px;}
.ladder li{counter-increment:lad;position:relative;font-size:15px;font-weight:600;
letter-spacing:-.015em;color:var(--ik);}
.ladder li::before{content:counter(lad,decimal-leading-zero);font-family:var(--mono);
font-size:10px;color:var(--mt);display:block;margin-bottom:1px;}
.ladder li:last-child{color:var(--ac);}
.ladder li:last-child::after{content:" \2190 left as";font-family:var(--mono);
font-size:10px;letter-spacing:.08em;color:var(--mt);}
.role-path{display:none;}
.hl-grid{margin-top:clamp(36px,5vw,56px);}
/* crawler tool: form sits on the dark fold, results and copy on light */
[data-fold="dark"] .check-form button{background:#FFFFFF;color:var(--ac);}
[data-fold="dark"] .check-form input{border-color:transparent;}
[data-fold="dark"] .check-status{color:rgba(255,255,255,.7);}
.tool-copy{max-width:68ch;margin-top:clamp(30px,4vw,44px);}
.tool-copy h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.03em;margin:34px 0 12px;}
.tool-copy h2:first-child{margin-top:0;}
.tool-copy p{font-size:16px;color:var(--mt);line-height:1.68;margin-bottom:14px;}
.tool-copy a{color:var(--ac);border-bottom:1px solid var(--ac);}
.tool-links{font-family:var(--dsp);font-size:12px;}
/* fact strips (.meta-pills) inside a dark hero: labels stay mono muted,
values go white, rules go translucent. Ink-on-dark was unreadable. */
[data-fold="dark"] .meta-pills{border-top-color:rgba(255,255,255,.25);}
[data-fold="dark"] .meta-pills .pill{border-bottom-color:rgba(255,255,255,.14);color:rgba(255,255,255,.55);}
[data-fold="dark"] .meta-pills .pill b{color:#FFFFFF;}
[data-fold="dark"] .facts dt{color:rgba(255,255,255,.5);}
[data-fold="dark"] .facts dd{color:#FFFFFF;}
/* every .home .sub is voice, not chart data: the unscoped .sub is the case
study's mono subtitle and was winning the font inside the offer fold */
.home .sub{font-family:var(--dsp);}
/* ==========================================================
ARTICLE ENDCAP RHYTHM. The author strip, FURTHER READING and
the work-with-me box were stacked with no consistent gaps, and
the reading list rendered as a default : disc bullets on
top of the arrow markers, browser default indent, tall rows.
========================================================== */
.article-endcap{display:grid;gap:0;}
.article-endcap .author-strip{margin:0 0 40px;padding-top:0;border-top:none;}
.article-endcap .byline-role,.author-strip .role{line-height:1.6;}
.further-reading ul{list-style:none;margin:0;padding:0;}
.further-reading li{padding:0;margin:0;}
.further-reading li::before{content:none;}
.further-reading li::marker{content:"";}
.further-reading .box-label{margin:0 0 4px;}
.further-reading a{padding:13px 0;font-size:16px;line-height:1.45;}
.article-endcap .takeaway,.article-endcap .box{margin-top:40px;}
.article-endcap .cta-row{margin-top:22px;}
/* legal copy: a measured column aligned to the wrap's left edge, not
centered inside it, with real heading rhythm */
.legal-copy{max-width:72ch;}
.legal-copy h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.03em;margin:38px 0 12px;}
.legal-copy h2:first-child{margin-top:0;}
.legal-copy h3{font-size:18px;letter-spacing:-.025em;margin:26px 0 8px;}
.legal-copy p{line-height:1.68;}