/* Homepage, /map/ and /head-to-heads/ — redesign approved Oct 1, 2026. Uses the shared
   light/dark tokens and layer classes (.t-<layer> sets --c and --bg) from site.css. */
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{font-size:15px}
::selection{background:var(--intent-bg);color:var(--ink)}
a{text-underline-offset:4px}
.top{padding:12px max(28px,calc((100vw - 1160px)/2))}
.brand-title{font:500 23px/1.15 var(--font-heading);margin:0;white-space:nowrap}
.brand-title a{text-decoration:none}

/* ---------- layout primitives ---------- */
.hp-wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.hp-section{padding:0 0 96px}
.hp-head{display:flex;flex-direction:column;gap:12px;max-width:680px;margin-bottom:32px}
.hp-head-wide{max-width:780px}
.hp-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}
.hp-head.hp-head-row{max-width:none;flex-direction:row}
.hp h1,.hp h2,.hp h3{text-wrap:balance}
.hp-section h2,.hp-h2h-page h1{font-size:44px;line-height:1.08;letter-spacing:-.02em}
.hp-eyebrow{font:600 12px/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin:0}
.hp-mono{font-family:var(--font-mono)}
.hp-c{color:var(--c)}
.hp-lede{font-size:19px;line-height:1.55;color:var(--ink2);margin:0;max-width:580px}
.hp-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hp-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 15px/1 var(--font-body);border-radius:10px;padding:0 20px;min-height:48px;cursor:pointer;text-decoration:none;white-space:nowrap}
.hp-btn-dark{background:var(--ink);color:var(--paper2);border:1px solid var(--ink)}
.hp-btn-dark:hover{opacity:.88}
.hp-btn-line{color:var(--ink);border:1px solid var(--ink);background:transparent}
.hp-btn-line:hover{background:var(--ink);color:var(--paper2)}
.hp-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.45;padding:3px 8px;border-radius:4px;background:var(--bg);color:color-mix(in srgb,var(--c) 78%,var(--ink));border:1px solid color-mix(in srgb,var(--c) 40%,transparent);text-decoration:none}
a.hp-tag:hover{border-color:var(--c)}
.hp-dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.hp-tags{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hp-hero{padding:72px 0 56px}
.hp-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start}
.hp-hero-copy{display:flex;flex-direction:column;gap:26px;padding-top:8px}
.hp-hero h1{font-size:clamp(42px,4.6vw,62px);line-height:1.03;letter-spacing:-.025em;margin:0}
.hp-search{position:relative;display:flex;flex-direction:column;gap:10px;max-width:560px}
.hp-search label{font-size:13px;font-weight:500;color:var(--ink2)}
.hp-search-row{display:flex;gap:8px}
.hp-search input{flex:1;min-width:0;font:inherit;font-size:16px;padding:0 16px;min-height:52px;border:1px solid var(--muted);border-radius:10px;background:var(--paper2);color:var(--ink)}
.hp-search input:focus{outline:2px solid var(--focus);outline-offset:1px}
.hp-search .hp-btn{min-height:52px}
.hp-results{position:absolute;top:86px;left:0;right:0;z-index:10;list-style:none;margin:0;padding:6px;background:var(--paper2);border:1px solid var(--rule);border-radius:10px;box-shadow:0 18px 40px -20px rgba(0,0,0,.35)}
.hp-results a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;border-radius:6px;text-decoration:none;min-height:44px;box-sizing:border-box}
.hp-results small{color:var(--ink2);font-size:12px;white-space:nowrap}
.hp-results a:hover,.hp-results [aria-selected="true"] a{background:var(--paper)}
.hp-popular{margin:0;font-size:13px;color:var(--ink2)}
.hp-hero-card{background:var(--paper2);border:1px solid var(--rule);border-radius:14px;padding:24px;box-shadow:0 1px 0 var(--rule),0 24px 48px -28px rgba(26,31,38,.28)}
.hp-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hp-pills{display:flex;gap:6px;flex-wrap:wrap}
.hp-pill{font:inherit;font-size:13px;cursor:pointer;border:1px solid var(--rule);background:var(--paper2);color:var(--ink2);border-radius:999px;padding:8px 14px;min-height:36px}
.hp-pill:hover{border-color:var(--ink)}
.hp-pill[aria-selected="true"]{background:var(--ink);color:var(--paper2);border-color:var(--ink)}
.hp-panel{display:flex;flex-direction:column;gap:16px}
.hp-panel[hidden]{display:none}
.hp-card-title{font-size:30px;line-height:1.12;letter-spacing:-.015em;margin:0}
.hp-card-verdict{margin:-6px 0 0;font-size:15px;line-height:1.55;color:var(--ink2)}
.hp-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:16px;padding-left:44px;font:600 11px/1.3 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.hp-chain{list-style:none;margin:-6px 0 0;padding:0}
.hp-step{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,.85fr);gap:0 14px;position:relative;padding-bottom:14px}
.hp-step:not(:last-child)::before{content:"";position:absolute;left:14px;top:34px;bottom:2px;width:2px;background:var(--rule)}
.hp-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--font-mono);background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--c)}
.is-moat .hp-num{background:var(--c);color:var(--paper2);box-shadow:none}
.hp-step-win{display:flex;flex-direction:column;gap:3px;padding-top:4px}
.hp-step-win b{font-size:15px;font-weight:500;line-height:1.35}
.hp-layer{font-size:12px;font-weight:500;color:var(--ink2);display:inline-flex;align-items:center;gap:6px}
.hp-layer::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.hp-step-rival{font-size:13px;line-height:1.45;color:var(--ink2);padding-top:5px;margin-left:16px}
.hp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hp-story{display:flex;gap:14px;align-items:flex-start;border-top:1px dashed var(--rule);padding-top:16px}
.hp-story p{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.hp-story b{color:var(--ink);font-weight:600}
.hp-stamp{flex:none;font:600 11px/1 var(--font-mono);letter-spacing:.08em;padding:6px 8px;border-radius:6px;background:var(--defensibility-bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--defensibility)}
.hp-stamp.is-supported{background:var(--intent-bg);box-shadow:inset 0 0 0 1px var(--intent)}
.hp-stamp.is-partly{background:var(--go-to-market-strategy-bg);box-shadow:inset 0 0 0 1px var(--go-to-market-strategy)}
.hp-more{font-size:14px;font-weight:500}

/* ---------- stats ---------- */
.hp-stats{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper2);margin-bottom:88px}
.hp-stats-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:28px;padding-bottom:28px}
.hp-stats-in>div{display:flex;flex-direction:column;gap:6px;padding:0 16px;border-left:1px solid var(--rule)}
.hp-stats-in>div:first-child{border-left:0;padding-left:0}
.hp-stats b{font:500 40px/1 var(--font-heading)}
.hp-stats span{font-size:14px;color:var(--ink2)}

/* ---------- who it's for ---------- */
.hp-path{background:var(--paper2);border:1px solid var(--rule);border-top:4px solid var(--c);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px}
.hp-path h3{font-size:23px;line-height:1.18;margin:0 0 6px}
.hp-path ul{list-style:none;margin:0;padding:0}
.hp-path a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--rule2);text-decoration:none;font-size:14px;line-height:1.4;min-height:44px;box-sizing:border-box}
.hp-path a span:last-child{color:var(--ink2);transition:transform .15s}
.hp-path a:hover span:first-child{text-decoration:underline}
.hp-path a:hover span:last-child{transform:translateX(3px)}

/* ---------- head-to-head cards ---------- */
.hp-h2h{background:var(--paper2);border:1px solid var(--rule);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s}
.hp-h2h:hover{border-color:var(--ink)}
.hp-h2h[hidden]{display:none}
.hp-h2h h3{margin:0;line-height:1.2}
.hp-h2h h3 a{text-decoration:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.hp-h2h h3 a:hover .hp-w{text-decoration:underline}
.hp-w{font-size:26px}
.hp-beat{font:400 13px var(--font-body);color:var(--ink2)}
.hp-r{font-size:20px;color:var(--ink2)}
.hp-h2h p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
.hp-h2h .hp-tags{margin-top:auto}
.hp-lost{font-size:13px;color:var(--ink2)}
.hp-head-row .hp-btn{margin-bottom:4px}
.hp-section .hp-g3+.hp-btn,.hp-section .hp-g3~p{margin-top:24px}

/* ---------- why + method ---------- */
.hp-why{background:var(--paper2);border:1px solid var(--rule);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px}
.hp-why .hp-mono{font-size:12px;font-weight:500}
.hp-why h3{font-size:22px;line-height:1.2;margin:0}
.hp-why>p{margin:0;font-size:15px;line-height:1.55;color:var(--ink2)}
.hp-proof{margin-top:auto;background:var(--bg);border-radius:10px;padding:14px;font-size:13px;line-height:1.5;color:var(--ink2)}
.hp-figure{display:block;font:500 28px/1.1 var(--font-heading);color:var(--ink);margin-bottom:2px}
.hp-proof-label{display:block;font:600 12px var(--font-mono);color:var(--ink);margin-bottom:4px}
.hp-method{margin-top:40px;background:#1A1F26;color:#E8EAE5;border:1px solid var(--rule);border-radius:20px;padding:48px;display:flex;flex-direction:column;gap:36px}
.hp-method .hp-eyebrow{color:#A9B0A6;margin-bottom:12px}
.hp-method h2{font-size:34px;line-height:1.12;color:#FBFBF9}
.hp-method .hp-head-row>a{color:#E8EAE5;font-size:15px}
.hp-method li{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--c);padding-top:18px}
.hp-method li .hp-mono{font-size:13px;color:#C3C8C0}
.hp-method h3{font-size:21px;line-height:1.2;color:#FBFBF9;margin:0}
.hp-method p{margin:0;font-size:14px;line-height:1.55;color:#C3C8C0}
.hp-method .t-arena{--c:#7FA6D1}.hp-method .t-product-strategy{--c:#A9BE5E}.hp-method .t-defensibility{--c:#D47C7C}.hp-method .t-go-to-market-strategy{--c:#D9A85A}

/* ---------- concepts ---------- */
.hp-cx{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start;margin-bottom:48px}
.hp-cx-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hp-cx-copy h2{margin:0}
.hp-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;counter-reset:pt}
.hp-points li{position:relative;padding-left:40px;font-size:15px;line-height:1.55;color:var(--ink2);counter-increment:pt}
.hp-points li::before{content:counter(pt);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--c);color:var(--ink);font:600 12px/26px var(--font-mono);text-align:center}
.hp-points b{color:var(--ink);font-weight:600}
.hp-concept{background:var(--paper2);border:1px solid var(--rule);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 0 var(--rule),0 24px 48px -28px rgba(26,31,38,.22)}
.hp-tagline{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0;font-size:12px;color:var(--ink2)}
.hp-concept h3{font-size:34px;line-height:1.05;margin:0}
.hp-concept h3 a{text-decoration:none}.hp-concept h3 a:hover{text-decoration:underline}
.hp-concept-one{margin:-4px 0 4px;font-size:16px;line-height:1.5;color:var(--ink2)}
.hp-concept .hp-eyebrow{font-size:11px;margin-bottom:6px}
.hp-concept dl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 12px;margin:-6px 0 0;font-size:13px;line-height:1.45}
.hp-concept dt{font-weight:600}.hp-concept dd{margin:0;color:var(--ink2)}
.hp-concept-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border-top:1px solid var(--rule2);padding-top:14px}
.hp-bar{display:grid;grid-template-columns:58px minmax(0,1fr) 36px;align-items:center;gap:8px;font-size:12px;margin-bottom:8px}
.hp-track{height:8px;border-radius:4px;background:var(--rule2);overflow:hidden}
.hp-track span{display:block;height:100%;background:var(--c);border-radius:4px}
.hp-seen{margin:0;font-size:13px;line-height:1.7}
.hp-ask{margin:0;background:var(--paper);border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.5;color:var(--ink2)}
.hp-ask b{color:var(--ink)}
.hp-browser{background:var(--paper2);border:1px solid var(--rule);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:18px}
.hp-browser h3{font-size:24px;margin:0}
.hp-ltabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.hp-ltab{font:500 14px/1.3 var(--font-body);text-align:left;cursor:pointer;border:0;border-top:3px solid var(--c);border-radius:8px;padding:10px 12px;min-height:56px;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;gap:3px}
.hp-ltab .hp-mono{font-size:11px;font-weight:400;color:var(--ink2)}
.hp-ltab[aria-selected="true"]{background:var(--c);color:var(--paper2);border-top-color:var(--c)}
.hp-ltab[aria-selected="true"] .hp-mono{color:var(--paper2)}
.hp-lpanel p{margin:0 0 14px;font-size:15px;color:var(--ink2)}
.hp-lpanel p b{color:var(--ink)}
.hp-lpanel+.hp-lpanel{margin-top:20px}
.hp-lpanel[hidden]{display:none}
.hp-cchips{display:flex;flex-wrap:wrap;gap:8px}
.hp-cchip{display:inline-flex;align-items:center;min-height:36px;padding:7px 12px;border-radius:999px;background:var(--bg);color:var(--ink);text-decoration:none;font-size:13px;box-sizing:border-box}
.hp-cchip:hover{box-shadow:inset 0 0 0 1px var(--c)}

/* ---------- author + footer ---------- */
.hp-author{border-top:1px solid var(--ink);padding-top:40px;display:flex;gap:24px;align-items:flex-start;max-width:820px}
.hp-avatar{flex:none;width:72px;height:72px;border-radius:50%;background:var(--rule2);display:grid;place-items:center;font:400 26px var(--font-heading);color:var(--ink2)}
.hp-author h2{font-size:26px;margin:8px 0 10px}
.hp-author p:not(.hp-eyebrow){margin:0 0 12px;font-size:16px;line-height:1.6;color:var(--ink2)}
.hp-author a{font-size:14px;font-weight:500}
.hp-footer{border-top:1px solid var(--rule);background:var(--paper2);padding:40px 0 48px;font-size:14px;color:var(--ink2)}
.hp-footer-in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.hp-footer p{margin:0 0 6px}
.hp-footer-brand{font:600 20px var(--font-heading);color:var(--ink)}
.hp-footer nav{display:grid;grid-template-columns:repeat(3,auto);gap:10px 48px}

/* ---------- head-to-heads page ---------- */
.hp-h2h-page .hp-section{padding-top:56px}
.hp-h2h-page h1{margin:0}
.hp-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.hp-filter[hidden]{display:none}
.hp-filter button{font:inherit;font-size:13px;cursor:pointer;border:1px solid var(--rule);background:var(--paper2);color:var(--ink2);border-radius:999px;padding:8px 14px;min-height:40px}
.hp-filter button:hover{border-color:var(--ink)}
.hp-filter button[aria-pressed="true"]{background:var(--ink);color:var(--paper2);border-color:var(--ink)}
.hp-count{font-size:13px;color:var(--ink2);margin:0 0 18px}

/* ---------- /map/ (the approved map layout, moved from the homepage) ---------- */
.home{max-width:1240px;margin:0 auto;padding:0 40px}
.map-page{padding-top:32px;padding-bottom:56px}
.map-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}
.map-heading h1,.map-heading h2{font-size:34px;letter-spacing:-.01em}
.map-heading p{font-size:14px;color:var(--ink2);margin:7px 0 0;max-width:80ch}
.map-about{font-size:12px;color:var(--ink2);white-space:nowrap}
.layer-links{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:23px 0 13px}
.layer-link{display:flex;align-items:center;gap:9px;background:var(--bg);padding:13px 11px;border-top:3px solid var(--c);text-decoration:none;font-size:12px;font-weight:500;min-height:50px}
.layer-number{font:400 10px var(--font-mono);color:var(--ink2)}
.jump-arrow{margin-left:auto;color:var(--ink2);transition:transform .18s ease-out}
.layer-link:hover .jump-arrow{transform:translateY(3px)}
.layer-link:hover{text-decoration:underline}
.map-guidance{display:flex;justify-content:space-between;gap:20px;margin:0 0 21px;font-size:11px;color:var(--ink2)}
.map-guidance b{font-weight:500;font-family:var(--font-mono)}
.map-section .mapwrap{grid-template-columns:minmax(0,1fr)}
.map-section .grprow{grid-template-columns:260px minmax(0,1fr);gap:16px}
.map-section .stratum{scroll-margin-top:24px}
.map-section .stratum .blurb{max-width:95ch}
.map-section .grprow .gn small{color:var(--ink2)}
.map-section .stratum:target{outline:2px solid var(--c);outline-offset:3px}

/* ---------- responsive ---------- */
@media(max-width:1000px){
 .hp-hero-grid,.hp-cx{grid-template-columns:minmax(0,1fr);gap:40px}
 .hp-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hp-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hp-ltabs{grid-template-columns:repeat(3,minmax(0,1fr))}
 .layer-link{padding:11px 7px;gap:5px;font-size:11px}.jump-arrow{display:none}
}
@media(max-width:800px){
 .top{padding:15px 24px 0;gap:7px}.tabs{justify-content:center}
 .home{padding:0 24px}
 .layer-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .map-heading{align-items:start;flex-direction:column;gap:10px}
 .map-section .stratum{padding:15px}.map-section .chip{min-height:34px;line-height:1.4}
 .hp-method{padding:32px 24px}
}
@media(max-width:700px){.map-section .grprow{grid-template-columns:minmax(0,1fr);gap:8px}}
@media(max-width:640px){
 .hp-wrap{padding:0 16px}
 .hp-hero{padding:40px 0 40px}
 .hp-section{padding-bottom:64px}
 .hp-section h2,.hp-h2h-page h1{font-size:32px}
 .hp-lede{font-size:17px}
 .hp-g3,.hp-g4{grid-template-columns:minmax(0,1fr)}
 .hp-stats{margin-bottom:56px}
 .hp-stats-in{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
 .hp-stats-in>div:nth-child(3){border-left:0;padding-left:0}
 .hp-cols{display:none}
 .hp-step{grid-template-columns:30px minmax(0,1fr)}
 .hp-step-rival{grid-column:2;margin-left:0;padding-top:4px}
 .hp-sr{position:static;width:auto;height:auto;clip:auto;font-weight:600;color:var(--ink)}
 .hp-ltabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hp-concept{padding:20px}.hp-concept-2{grid-template-columns:minmax(0,1fr)}
 .hp-footer nav{grid-template-columns:repeat(2,auto);gap:10px 32px}
 .hp-author{flex-direction:column;gap:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.jump-arrow,.hp-path a span:last-child{transition:none}}