/* Koda — shared styles for Insights pages. Tokens mirror the homepage. */
:root{
  --paper:#F4F2EE; --paper-2:#EBE8E2; --ink:#0E0E0C; --ink-2:#1a1a17;
  --mute:#8a877f; --rule:#0e0e0c1a; --accent:#E63329; --accent-ink:#C42018;
  --maxw:1360px; --read:700px; --gutter:clamp(20px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:'Geist',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden;font-feature-settings:"ss01","cv11"}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.read{max-width:var(--read)}
.it{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-0.005em}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);background:color-mix(in oklab,var(--paper) 78%,transparent);border-bottom:1px solid var(--rule)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;gap:24px}
.mark{display:flex;align-items:center;gap:10px;font-weight:500;letter-spacing:-0.01em;font-size:15px}
.mark .glyph{width:22px;height:22px;border:1.5px solid var(--ink);position:relative;flex:none}
.mark .glyph::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 49%,var(--ink) 49% 51%,transparent 51%)}
.mark .glyph::after{content:"";position:absolute;right:-4px;bottom:-4px;width:6px;height:6px;background:var(--accent)}
.topnav{display:flex;gap:28px;align-items:center;font-size:13px;color:var(--ink-2)}
.topnav a:hover{color:var(--accent-ink)}
.topnav a[aria-current]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--accent);padding-bottom:3px}
.topcta{font-size:13px;padding:9px 14px;border:1px solid var(--ink);display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);transition:background .2s}
.topcta:hover{background:var(--accent);border-color:var(--accent)}
.topcta .dot{width:6px;height:6px;background:var(--accent);border-radius:999px;animation:pulse 2.4s ease-in-out infinite}
.topcta:hover .dot{background:#fff;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(230,51,41,.6)}70%{box-shadow:0 0 0 10px rgba(230,51,41,0)}100%{box-shadow:0 0 0 0 rgba(230,51,41,0)}}
@media (max-width:720px){.topnav .hide-sm{display:none}}

/* ---------- Type ---------- */
.micro{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.display{font-weight:500;letter-spacing:-0.035em;line-height:.94;font-size:clamp(44px,7.4vw,118px);text-wrap:balance}
.h2{font-weight:500;letter-spacing:-0.03em;line-height:1;font-size:clamp(30px,3.8vw,54px);text-wrap:balance}
.lede{font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:var(--ink-2);letter-spacing:-0.01em}
.prose p{font-size:18px;line-height:1.6;color:var(--ink-2);letter-spacing:-0.005em;text-wrap:pretty}
.prose p + p{margin-top:14px}
.prose .big{font-size:clamp(24px,2.6vw,34px);line-height:1.2;letter-spacing:-0.02em;font-weight:500;color:var(--ink);margin:22px 0;text-wrap:balance}
.prose .big::before{content:"";display:block;width:28px;height:2px;background:var(--accent);margin-bottom:14px}
.prose ul{list-style:none;margin:22px 0;border-top:1px solid var(--rule)}
.prose li{font-size:17px;line-height:1.45;padding:12px 0 12px 26px;border-bottom:1px solid var(--rule);position:relative;color:var(--ink-2)}
.prose li::before{content:"";position:absolute;left:2px;top:20px;width:8px;height:1px;background:var(--ink)}
.prose a{border-bottom:1px solid var(--accent);transition:color .2s}
.prose a:hover{color:var(--accent-ink)}

/* ---------- Buttons ---------- */
.bigcta{display:inline-flex;align-items:center;gap:14px;padding:18px 22px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:500;border:1px solid var(--ink);transition:background .2s,gap .25s}
.bigcta:hover{background:var(--accent);border-color:var(--accent);gap:22px}
.bigcta.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.bigcta.light:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.textlink{font-size:14px;display:inline-flex;gap:10px;align-items:center;font-weight:500}
.textlink .arr{transition:transform .25s}

/* ---------- Signal visual (abstract, decorative) ---------- */
.signal{display:flex;align-items:flex-end;gap:3px;height:120px;width:100%}
.signal i{flex:1;background:#0e0e0c2e;min-width:1px;height:var(--h);transform-origin:bottom;animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d)}
.signal i.s{background:var(--accent);flex:1.6}
.signal.sm{height:56px;gap:2px}
.dark .signal i{background:#ffffff2e}.dark .signal i.s{background:var(--accent)}
@keyframes rise{from{transform:scaleY(.08)}to{transform:scaleY(1)}}

/* ---------- Breadcrumb ---------- */
.crumbs{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs .sep{opacity:.5}

/* ---------- Article hero ---------- */
.a-hero{padding:clamp(48px,7vw,96px) 0 0}
.a-hero .eyebrow{display:flex;gap:14px;align-items:center;margin:28px 0 30px}
.a-hero .eyebrow .acc{width:8px;height:8px;background:var(--accent)}
.a-hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(40px,5vw,64px);align-items:start}
.a-meta{grid-column:1 / span 4;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--ink)}
.a-meta div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--rule);font-size:13px}
.a-meta dt{color:var(--mute)} .a-meta dd{color:var(--ink);font-weight:500}
.a-lines{grid-column:6 / span 7}
.a-lines p{font-size:clamp(20px,1.8vw,26px);line-height:1.38;letter-spacing:-0.015em;color:var(--ink)}
.a-lines p.gap{margin-top:18px}
.a-signal{margin-top:clamp(56px,7vw,96px)}
@media (max-width:980px){.a-meta,.a-lines{grid-column:1 / -1}.a-lines{order:-1}}

/* ---------- Pull quote ---------- */
.pq{background:var(--ink);color:var(--paper);margin-top:0}
.pq .wrap{padding-top:clamp(60px,8vw,110px);padding-bottom:clamp(60px,8vw,110px);display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.pq .lab{grid-column:1 / span 3;color:#a8a59c}
.pq blockquote{grid-column:4 / span 9;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(34px,4.6vw,68px);line-height:1.08;letter-spacing:-0.015em;text-wrap:balance;position:relative}
.pq blockquote::before{content:"“";color:var(--accent);position:absolute;left:-.5em;top:-.05em}
@media (max-width:980px){.pq .lab,.pq blockquote{grid-column:1 / -1}.pq blockquote::before{position:static}}

/* ---------- Article body ---------- */
.a-body{padding:clamp(56px,8vw,110px) 0 0}
.sec{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--rule)}
.sec:first-child{border-top:0;padding-top:0}
.sec .num{grid-column:1 / span 2;padding-top:10px}
.sec .num span{color:var(--ink)}
.sec .content{grid-column:4 / span 7}
.sec .content .h2{margin-bottom:24px}
@media (max-width:980px){.sec .num,.sec .content{grid-column:1 / -1}}

.sec.miss .content .h2::after{content:"";display:inline-block;width:.32em;height:.32em;background:var(--accent);margin-left:.18em;vertical-align:.1em}

/* Koda's take — dark band */
.take{background:var(--ink);color:var(--paper);margin:clamp(40px,5vw,64px) 0}
.take .wrap{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(64px,8vw,120px);display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.take .lab{grid-column:1 / span 3;display:flex;flex-direction:column;gap:18px}
.take .lab .micro{color:#a8a59c}
.take .lab .h2{font-size:clamp(28px,2.6vw,38px);color:var(--paper)}
.take .lab .h2 .it{color:var(--accent)}
.take .txt{grid-column:5 / span 8}
.take .txt p{font-size:clamp(24px,2.5vw,36px);line-height:1.22;letter-spacing:-0.02em;color:var(--paper);text-wrap:pretty}
.take .txt p + p{margin-top:18px}
.take .txt p:nth-child(n+3){color:#cbc7bd}
@media (max-width:980px){.take .lab,.take .txt{grid-column:1 / -1}}

/* Pressure-test checklist */
.check{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--rule)}
.check-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:40px;align-items:end}
.check-head .h2{grid-column:1 / span 7}
.check-head p{grid-column:9 / span 4;font-size:14px;color:var(--mute);line-height:1.5}
.checklist{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;counter-reset:c;border-top:1px solid var(--ink)}
.checklist li{counter-increment:c;display:grid;grid-template-columns:44px 22px 1fr;gap:14px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule);font-size:clamp(17px,1.35vw,20px);line-height:1.35;letter-spacing:-0.01em;cursor:pointer;user-select:none;transition:color .2s}
.checklist li::before{content:counter(c,decimal-leading-zero);font-size:12px;color:var(--mute);letter-spacing:.14em}
.checklist .box{width:16px;height:16px;border:1.5px solid var(--ink);align-self:center;position:relative;transition:background .2s,border-color .2s}
.checklist li.on .box{background:var(--accent);border-color:var(--accent)}
.checklist li.on .box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.checklist li.on .q{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--accent)}
.checklist li:hover .box{border-color:var(--accent)}
@media (max-width:980px){.checklist{grid-template-columns:1fr}.check-head .h2,.check-head p{grid-column:1 / -1}}

/* Red flags */
.flags{padding:clamp(56px,7vw,96px) 0;background:var(--paper-2)}
.flags .h2{margin-bottom:40px}
.flag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#0e0e0c1a;border:1px solid #0e0e0c1a}
.flag{background:var(--paper-2);padding:24px 22px 26px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;transition:background .3s}
.flag .top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.flag .top i{width:10px;height:10px;background:var(--accent);transform:rotate(45deg)}
.flag p{font-size:clamp(17px,1.4vw,20px);line-height:1.3;letter-spacing:-0.015em;font-weight:500}
.flag::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.flag:hover{background:var(--paper)}.flag:hover::after{width:100%}
@media (max-width:1100px){.flag-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.flag-grid{grid-template-columns:1fr}.flag{min-height:0}}

/* FAQ */
.faq{padding:clamp(64px,8vw,120px) 0;border-top:1px solid var(--rule)}
.faq-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.faq-grid .h2{grid-column:1 / span 4}
.faq-list{grid-column:6 / span 7;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-size:clamp(18px,1.5vw,22px);font-weight:500;letter-spacing:-0.015em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:14px;height:14px;position:relative;margin-top:6px}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--ink);transition:transform .3s}
.faq summary .pm::before{left:0;right:0;top:6px;height:1.5px}
.faq summary .pm::after{top:0;bottom:0;left:6px;width:1.5px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq details[open] summary{color:var(--accent-ink)}
.faq details p{padding:0 40px 24px 0;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:62ch}
@media (max-width:980px){.faq-grid .h2,.faq-list{grid-column:1 / -1}}

/* ---------- Cards (hub + related) ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:22px;position:relative;min-height:340px;transition:background .3s}
.card .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card .n{font-size:12px;letter-spacing:.14em;color:var(--mute);font-variant-numeric:tabular-nums}
.card .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ink);padding:5px 8px}
.card h2,.card h3{font-weight:500;letter-spacing:-0.03em;line-height:1.02;font-size:clamp(28px,2.8vw,42px);text-wrap:balance;transition:color .2s}
.cards.three .card h3{font-size:clamp(22px,1.9vw,28px)}
.card p{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:44ch}
.card .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.card .signal{max-width:160px}
.card::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.card:hover{background:#fbfaf7}.card:hover::after{width:100%}
.card:hover h2,.card:hover h3{color:var(--accent-ink)}
.card:hover .textlink .arr{transform:translateX(5px)}
.card a.cover{position:absolute;inset:0;z-index:1}
.card[hidden]{display:none}
@media (max-width:980px){.cards,.cards.three{grid-template-columns:1fr}.card{min-height:0}}

.related{padding:clamp(64px,8vw,120px) 0 clamp(64px,8vw,110px);border-top:1px solid var(--rule)}
.related .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:36px;gap:24px}

/* ---------- Hub ---------- */
.hub-hero{padding:clamp(56px,8vw,120px) 0 clamp(40px,5vw,64px)}
.hub-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(40px,5vw,64px);align-items:end}
.hub-grid .copy{grid-column:1 / span 6;display:flex;flex-direction:column;gap:14px}
.hub-grid .quote{grid-column:8 / span 5;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(26px,2.6vw,38px);line-height:1.15;border-left:2px solid var(--accent);padding-left:22px;text-wrap:balance}
@media (max-width:980px){.hub-grid .copy,.hub-grid .quote{grid-column:1 / -1}}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:24px 0;border-top:1px solid var(--rule);margin-top:clamp(40px,5vw,64px)}
.filters .micro{margin-right:10px}
.chip{font:inherit;font-size:12px;letter-spacing:.04em;padding:8px 12px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.chip:hover{background:var(--ink);color:var(--paper)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.hub-list{padding-bottom:clamp(64px,8vw,120px)}

/* ---------- CTA block ---------- */
.cta-block{background:var(--ink);color:var(--paper)}
.cta-block .wrap{padding-top:clamp(80px,11vw,160px);padding-bottom:clamp(80px,11vw,160px)}
.cta-block .micro{color:#a8a59c;display:flex;gap:14px;align-items:center}
.cta-block .micro i{width:18px;height:1px;background:var(--accent)}
.cta-block h2{font-weight:500;letter-spacing:-0.035em;line-height:.98;font-size:clamp(40px,6vw,92px);max-width:18ch;margin:28px 0 48px;text-wrap:balance}
.cta-block .row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;border-top:1px solid #ffffff1a;padding-top:32px}
.cta-block .row p{font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:#cbc7bd}

/* ---------- Footer ---------- */
footer{padding:36px 0 60px}
.foot-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;font-size:13px;color:var(--mute)}
.foot-grid .a{grid-column:1 / span 3}
.foot-grid .b{grid-column:4 / span 5;color:var(--ink-2);font-size:14px}
.foot-grid .c{grid-column:9 / span 4;text-align:right;display:flex;gap:20px;justify-content:flex-end}
.foot-grid .c a:hover{color:var(--accent-ink)}
@media (max-width:720px){.foot-grid .a,.foot-grid .b,.foot-grid .c{grid-column:1 / -1;text-align:left;justify-content:flex-start}}

.strike{position:relative;display:inline-block}
.strike::after{content:"";position:absolute;left:-2%;right:-2%;top:55%;height:.08em;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:strike 1.1s cubic-bezier(.7,.1,.2,1) .6s forwards}
@keyframes strike{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.strike::after{animation:none;transform:none}}

/* ---------- Versus (comparison pages) ---------- */
.versus{padding:clamp(48px,6vw,88px) 0;border-top:1px solid var(--rule)}
.versus .vs-label{display:flex;justify-content:space-between;margin-bottom:28px}
.vs-grid{display:grid;grid-template-columns:1fr 88px 1fr;align-items:stretch;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.vs-side{padding:clamp(28px,3vw,44px) 0;display:flex;flex-direction:column;gap:18px}
.vs-side .side-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.vs-side .h2{font-size:clamp(26px,2.6vw,38px)}
.vs-side.b{padding-left:0}
.vs-mid{display:flex;align-items:center;justify-content:center;position:relative}
.vs-mid::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--rule)}
.vs-mid span{position:relative;background:var(--paper);font-family:'Instrument Serif',serif;font-style:italic;font-size:44px;color:var(--accent);padding:10px 0;line-height:1}
.vs-foot{margin-top:24px;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(20px,1.8vw,26px)}
.vs-foot .acc{color:var(--accent-ink)}
@media (max-width:980px){.vs-grid{grid-template-columns:1fr}.vs-mid{height:64px}.vs-mid::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px}}

/* ---------- Tile list (use cases / examples) ---------- */
.tilelist{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:28px}
.tilelist li{background:var(--paper);padding:20px 18px 22px;display:flex;flex-direction:column;gap:18px;min-height:120px;justify-content:space-between;font-size:17px;font-weight:500;letter-spacing:-0.015em;line-height:1.25;transition:background .25s}
.tilelist li .k{font-size:11px;letter-spacing:.14em;color:var(--mute);font-weight:400}
.tilelist li .tt{display:flex;flex-direction:column;gap:8px}
.tilelist li .td{font-size:14px;font-weight:400;line-height:1.45;color:var(--ink-2);letter-spacing:-0.005em}
.tilelist li:hover{background:#fbfaf7}.tilelist li:hover .k{color:var(--accent-ink)}
.sec.wide .content{grid-column:4 / span 9}
@media (max-width:980px){.tilelist{grid-template-columns:1fr 1fr}.sec.wide .content{grid-column:1 / -1}}
@media (max-width:560px){.tilelist{grid-template-columns:1fr}}

/* ---------- Hub: second group ---------- */
.group-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;padding:clamp(56px,7vw,100px) 0 32px}
.group-head .h2{grid-column:1 / span 7}
.group-head p{grid-column:9 / span 4;font-size:15px;color:var(--ink-2);line-height:1.5}
@media (max-width:980px){.group-head .h2,.group-head p{grid-column:1 / -1}}
.hub-group[hidden]{display:none}
.related .sub{margin:44px 0 18px;display:flex;gap:14px;align-items:center}
.related .sub i{width:18px;height:1px;background:var(--accent)}

/* ---------- Motion ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .signal i{animation:none}
  .topcta .dot{animation:none}
}