/* RedRock CAIO — mockup stylesheet. Brand: RedRock Systems style guide v1.2 */
@font-face{font-family:"Tomorrow";src:url(fonts/Tomorrow-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Tomorrow";src:url(fonts/Tomorrow-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Tomorrow";src:url(fonts/Tomorrow-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  /* core */
  --oxblood:#6E0408; --basalt:#2B0D0D; --white:#FFFFFF;
  /* neutrals */
  --cloud:#F5F3F2; --mist:#E5E2E2; --ash:#C6C3C3; --pewter:#888585; --graphite:#575554;
  /* oxblood tints (data, chips, washes only) */
  --ox-100:#F5EBEA; --ox-200:#E5CDCA; --ox-300:#CA9D97; --ox-500:#AD6E67; --ox-600:#8F4039; --ox-900:#410103;
  --f-head:"Tomorrow",system-ui,sans-serif; --f-body:"Inter",system-ui,sans-serif;
  --radius:16px; --radius-chip:9px;
  --pad:clamp(20px,3.4vw,48px); --max:1440px; --gutter:clamp(12px,1.6vw,24px);
  --sec:clamp(96px,12vw,184px);
  --ease:cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--white);color:var(--basalt);font-family:var(--f-body);font-size:17px;line-height:1.5;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- type ---------- */
.display,.h1,.h2,.h3,.num{font-family:var(--f-head);font-weight:500;letter-spacing:-.012em}
.display{font-size:clamp(46px,7.4vw,118px);line-height:.92}
.h1{font-size:clamp(40px,5.6vw,84px);line-height:.94}
.h2{font-size:clamp(32px,3.9vw,56px);line-height:.96}
.h3{font-size:clamp(21px,1.6vw,24px);line-height:1.15}
.key{color:var(--oxblood)}               /* the one Oxblood phrase in a two-tone headline */
.lede{font-size:clamp(18px,1.45vw,21px);line-height:1.45;color:var(--graphite);max-width:40em}
.body{color:var(--graphite)}
.body strong,.lede strong{color:var(--basalt);font-weight:600}
.label{white-space:nowrap;font:700 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--oxblood)}
.meta{font-size:13px;color:var(--graphite)}
.src{font-size:12px;line-height:1.35;color:var(--graphite)}
.src a{text-decoration:underline;text-decoration-color:var(--ash);text-underline-offset:2px}
.src a:hover{text-decoration-color:var(--oxblood);color:var(--oxblood)}
.rule{display:block;width:clamp(120px,12vw,172px);height:2px;background:var(--oxblood);margin-top:10px}
.colhead{font-size:14px;color:var(--basalt)}

/* placeholders: visible, highlighted, never mistaken for copy */
.ph{background:var(--ox-100);color:var(--oxblood);border-radius:4px;padding:.05em .35em;font-style:normal;font-weight:500;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ph-block{border:1.5px dashed var(--ox-300);border-radius:var(--radius);color:var(--oxblood);background:var(--white)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;height:48px;padding:0 22px;border-radius:10px;font-weight:600;font-size:15px;transition:background .25s var(--ease),color .25s var(--ease)}
.btn-dark{background:var(--basalt);color:var(--white)}
.btn-dark:hover{background:var(--oxblood)}
.btn-ghost{background:var(--cloud);color:var(--basalt)}
.btn-ghost:hover{background:var(--mist)}
.btn-block{display:flex;justify-content:center;width:100%;height:60px}
.arrow{display:inline-block;transition:transform .25s var(--ease)}
a:hover .arrow{transform:translateX(4px)}
.textlink{font-weight:600;border-bottom:1.5px solid var(--ox-300);padding-bottom:2px}
.textlink:hover{color:var(--oxblood);border-color:var(--oxblood)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;gap:22px}
.brand img{height:34px;width:auto}
.brand .sub{font:500 13px/1.1 var(--f-head);color:var(--graphite);padding-left:22px;border-left:1px solid var(--mist)}
.pill{display:flex;align-items:center;gap:2px;background:var(--cloud);border-radius:12px;padding:5px}
.pill a{padding:9px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--basalt);transition:background .2s}
.pill a:hover{background:var(--white)}
.pill a[aria-current="page"]{color:var(--oxblood)}
.pill .cta{background:var(--basalt);color:var(--white);margin-left:6px}
.pill .cta:hover{background:var(--oxblood)}
.menu-btn{display:none;height:44px;padding:0 16px;border-radius:10px;background:var(--cloud);font-weight:600;font-size:14px}
.site-head.scrolled{box-shadow:0 1px 0 var(--mist)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(56px,9vw,140px);padding-bottom:clamp(24px,3vw,48px)}
.hero .grid{align-items:end}
.hero-copy{grid-column:1/span 9}
.hero-mark{grid-column:10/span 3;align-self:start;justify-self:end;width:100%;max-width:340px;margin-top:-8px}
.hero .eyebrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:clamp(28px,3vw,44px)}
.hero .say{font:400 14px/1 var(--f-body);color:var(--graphite)}
.hero .say b{font-weight:600;color:var(--basalt)}
.hero-foot{margin-top:clamp(36px,4vw,60px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;border-top:1px solid var(--mist);padding-top:28px}
.hero-foot .lede{grid-column:1/span 7}
.hero-foot .ctas{grid-column:9/span 4;display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* ---------- sections ---------- */
section{padding-top:var(--sec)}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-bottom:clamp(36px,4.5vw,64px);align-items:end}
.sec-head .label{grid-column:1/-1;margin-bottom:22px}
.sec-head .h2{grid-column:1/span 8}
.sec-head .aside{grid-column:9/span 4;color:var(--graphite)}
.lead-grey{color:inherit}

/* hello / ciao table (capabilities-table language) */
.hc{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter)}
.hc-col h3{font:500 15px/1 var(--f-head);padding:13px 16px;border-radius:8px;display:flex;justify-content:space-between;align-items:center}
.hc-col.hello h3{background:var(--oxblood);color:var(--white)}
.hc-col.ciao h3{background:var(--cloud);color:var(--basalt)}
.hc-col h3 small{font:400 12px/1 var(--f-body);opacity:.75}
.hc-col ul{list-style:none;margin-top:6px}
.hc-col li{display:flex;gap:14px;padding:15px 16px;border-bottom:1px solid var(--mist);font-size:16px}
.hc-col li span{color:var(--graphite)}
.hc-col li b{font-weight:600;min-width:12.5em}
.hc-col.ciao li b{color:var(--graphite);font-weight:500;text-decoration:line-through;text-decoration-color:var(--ox-300);text-decoration-thickness:1.5px}

/* ---------- cards ---------- */
.cards{display:grid;gap:clamp(12px,1.2vw,18px)}
.card{background:var(--cloud);border-radius:var(--radius);padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;min-height:300px}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.card .fill{flex:1;min-height:36px}
.card .num{font-weight:400;font-size:clamp(48px,4.6vw,72px);line-height:.9;color:var(--basalt)}
.card .num .u{font-size:.5em;margin-left:.04em}
.card .desc{margin-top:14px;font-size:15.5px;color:var(--basalt);line-height:1.38;max-width:24em}
.card hr{border:0;border-top:1px solid var(--ash);margin:18px 0 12px}
.card.on{background:var(--oxblood);color:var(--white)}
.card.on .num,.card.on .desc,.card.on .h3{color:var(--white)}
.card.on .label{color:var(--ox-200)}
.card.on hr{border-color:var(--ox-300)}
.card.on .src,.card.on .body{color:var(--ox-200)}
.card.on .src a{text-decoration-color:var(--ox-500)}
.card.on .src a:hover{color:var(--white)}
.chip{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-chip);background:var(--ox-100);color:var(--oxblood);font:300 17px/1 var(--f-head)}
.card.on .chip{background:var(--ox-600);color:var(--white)}
.tag{display:inline-block;font:600 11.5px/1 var(--f-body);padding:6px 9px;border-radius:6px;background:var(--white);color:var(--basalt)}
.tag.red{background:var(--ox-100);color:var(--oxblood)}
.card.on .tag{background:var(--ox-600);color:var(--white)}

/* giant number */
.giant{font:400 clamp(150px,17vw,260px)/.8 var(--f-head);color:var(--oxblood);letter-spacing:-.03em;white-space:nowrap}
.giant .u{font-size:.42em;letter-spacing:0}
.giant-label{font:500 clamp(18px,1.5vw,22px)/1.2 var(--f-head);margin-top:22px;max-width:18em}

/* problem layout */
.problem{grid-template-columns:repeat(12,minmax(0,1fr))}
.problem .g{grid-column:1/span 5;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6px}
.problem .cards{grid-column:6/span 7;grid-template-columns:1fr 1fr}

/* pillars */
.pillars{grid-template-columns:repeat(3,1fr)}
.pillars .card{min-height:400px}
.pillars .h3{margin-top:auto}
.pillars .body{margin-top:14px;font-size:15.5px}
.baseband{margin-top:clamp(12px,1.2vw,18px);background:var(--cloud);border-radius:var(--radius);padding:20px 26px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.baseband .h3{font-size:20px}
.baseband .h3 .key{margin-left:.15em}

/* tiles (case-study tile language) */
.tilerow{border-top:1px solid var(--mist);padding:22px 0 clamp(40px,4vw,64px)}
.tilerow-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:16px}
.tilerow-head .h3{font-size:18px}
.tilerow-head .tags{display:flex;gap:6px;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:4fr 5fr 3fr;gap:clamp(10px,1vw,14px)}
.tile{background:var(--cloud);border-radius:var(--radius);aspect-ratio:auto;min-height:clamp(300px,27vw,420px);padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:background .35s var(--ease)}
.tile:hover{background:var(--mist)}
.tile .fill{flex:1}
.tile .price{font:400 clamp(40px,3.8vw,60px)/.95 var(--f-head);color:var(--basalt);letter-spacing:-.02em}
.tile .price .u{font-size:.42em}
.tile .price .to{color:var(--pewter)}
.tile ul{list-style:none;font-size:15px;color:var(--graphite)}
.tile li{padding:8px 0;border-top:1px solid var(--mist);display:flex;gap:10px}
.tile li::before{content:"";flex:0 0 7px;height:7px;margin-top:.6em;background:var(--oxblood);transform:rotate(45deg)}
.tile.on{background:var(--oxblood);color:var(--white)}
.tile.on .price,.tile.on .h3{color:var(--white)}
.tile.on .price .to{color:var(--ox-300)}
.tile.on ul{color:var(--ox-100)}
.tile.on li{border-color:var(--ox-600)}
.tile.on li::before{background:var(--white)}
.tile.on .label{color:var(--ox-200)}
.tile.on .meta{color:var(--ox-200)}

/* mini charts in tiles */
.bars{display:flex;align-items:flex-end;gap:14px;height:100%;min-height:170px;padding-top:24px}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;height:100%}
.bars .bar{width:100%;background:var(--ash);border-radius:6px 6px 0 0;transform-origin:bottom;transition:transform 1.1s var(--ease)}
.bars .b.hi .bar{background:var(--oxblood)}
.bars .v{font:400 28px/1 var(--f-head)}
.bars .b.hi .v{color:var(--oxblood)}
.bars .k{font-size:12.5px;color:var(--graphite);line-height:1.25;min-height:2.5em}
.axis{border-top:1px solid var(--mist)}

/* bench */
.bench{grid-template-columns:repeat(4,1fr)}
.bench .card{min-height:380px}
.avatar{width:72px;height:72px;border-radius:14px;display:grid;place-items:center;background:var(--white);color:var(--pewter);font:300 13px/1.1 var(--f-head);text-align:center}
.card.on .avatar{background:var(--ox-600);color:var(--ox-200)}
.bench .who{margin-top:auto}
.bench .role{font-size:14px;color:var(--graphite);margin-top:6px}
.card.on .role{color:var(--ox-200)}

/* proof */
.proof .tiles{grid-template-columns:repeat(3,1fr)}
.logo-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:18px}
.logo-strip .ph-block{height:72px;display:grid;place-items:center;font-size:12.5px;font-weight:500}
.quote{text-align:center;max-width:980px;margin:0 auto}
.quote p{font:500 clamp(28px,3vw,44px)/1.08 var(--f-head);letter-spacing:-.01em}
.quote cite{display:block;margin-top:22px;font-style:normal;font-size:14px;color:var(--graphite)}

/* scorecard */
.score{grid-template-columns:repeat(12,minmax(0,1fr))}
.score .intro{grid-column:1/span 4}
.score ol{grid-column:6/span 7;list-style:none;counter-reset:q}
.score li{counter-increment:q;display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:baseline;padding:16px 0;border-top:1px solid var(--mist);font-size:16px}
.score li::before{content:counter(q,decimal-leading-zero);font:300 15px/1 var(--f-head);color:var(--oxblood)}
.score li .ynp{display:flex;gap:4px}
.score li .ynp i{font:500 11px/1 var(--f-body);font-style:normal;color:var(--graphite);background:var(--cloud);border-radius:5px;padding:5px 7px}

/* faq */
.faq{grid-template-columns:repeat(12,minmax(0,1fr))}
.faq .intro{grid-column:1/span 4}
.faq .list{grid-column:6/span 7}
details{border-top:1px solid var(--mist)}
details:last-child{border-bottom:1px solid var(--mist)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font:500 clamp(18px,1.45vw,21px)/1.25 var(--f-head)}
summary::-webkit-details-marker{display:none}
summary .pm{flex:0 0 28px;height:28px;border-radius:8px;background:var(--cloud);position:relative;transition:background .2s}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2px;background:var(--basalt);transition:transform .3s var(--ease)}
summary .pm::after{transform:rotate(90deg)}
details[open] summary .pm{background:var(--ox-100)}
details[open] summary .pm::after{transform:rotate(0)}
details .ans{padding:0 52px 26px 0;color:var(--graphite);max-width:44em}
details .ans p+p{margin-top:12px}

/* CTA panel */
.cta-panel{background:var(--cloud);border-radius:var(--radius);padding:clamp(26px,3vw,44px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(48px,7vw,110px);position:relative;overflow:hidden}
.cta-panel .h1{grid-column:1/span 9}
.cta-panel .mark{grid-column:11/span 2;justify-self:end;width:100%;max-width:180px}
.cta-panel .sub{grid-column:1/span 6;color:var(--graphite)}
.cta-panel .alt{grid-column:8/span 5;align-self:end;justify-self:end;text-align:right}
.cta-panel .btn-block{grid-column:1/-1}

/* footer */
.site-foot{padding-top:clamp(80px,9vw,140px);padding-bottom:34px}
.site-foot .grid{row-gap:40px}
.foot-brand{grid-column:1/span 4}
.foot-brand img{height:56px;width:auto}
.foot-brand p{margin-top:18px;max-width:22em}
.foot-col{grid-column:span 2}
.foot-col h4{font:400 13px/1 var(--f-body);color:var(--graphite);margin-bottom:14px}
.foot-col a,.foot-col span{display:block;font-size:14.5px;font-weight:500;padding:4px 0}
.foot-col a:hover{color:var(--oxblood)}
.foot-bar{margin-top:56px;border-top:1px solid var(--mist);padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12.5px;color:var(--graphite)}
.foot-bar .sym{display:flex;align-items:center;gap:10px}
.foot-bar .sym img{height:18px;width:auto}

/* page heros (inner pages) */
.page-hero{padding-top:clamp(56px,8vw,120px)}
.page-hero .label{margin-bottom:28px;display:block}
.page-hero .h1{max-width:13.5em}
.page-hero .lede{margin-top:30px}

/* process timeline */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.2vw,18px);padding-top:38px}
.timeline::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--mist)}
.timeline .node{position:absolute;top:2px;width:15px;height:15px;transform:rotate(45deg);background:var(--white);border:1.5px solid var(--ash)}
.timeline .step{position:relative}
.timeline .step .node{left:2px;top:-34px}
.timeline .step.on .node{background:var(--oxblood);border-color:var(--oxblood)}

/* deliverables list */
.dl{grid-template-columns:repeat(12,minmax(0,1fr))}
.dl .l{grid-column:1/span 4}
.dl .r{grid-column:6/span 7}
.dl ul{list-style:none}
.dl li{display:grid;grid-template-columns:52px 1fr;padding:16px 0;border-top:1px solid var(--mist)}
.dl li::before{content:"";width:9px;height:9px;background:var(--oxblood);transform:rotate(45deg);margin-top:.5em}
.dl li b{font-weight:600}
.dl li span{color:var(--graphite)}

/* insights page charts */
.chart-card{min-height:auto}
.hbars{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.hbar{display:grid;grid-template-columns:minmax(120px,30%) 1fr;gap:16px;align-items:center}
.hbar .k{font-size:13.5px;color:var(--graphite);line-height:1.25}
.hbar .t{position:relative;height:30px}
.hbar .t i{position:absolute;left:0;top:0;bottom:0;background:var(--ash);border-radius:0 6px 6px 0;transform-origin:left;transition:transform 1.1s var(--ease)}
.hbar.hi .t i{background:var(--oxblood)}
.hbar .t em{position:absolute;top:50%;transform:translateY(-50%);font:400 20px/1 var(--f-head);font-style:normal;padding-left:10px;white-space:nowrap}
.hbar.hi .t em{color:var(--oxblood)}
.sources{list-style:none;counter-reset:s;columns:2;column-gap:var(--gutter)}
.sources li{break-inside:avoid;padding:12px 0;border-top:1px solid var(--mist);font-size:13.5px;color:var(--graphite);display:grid;grid-template-columns:44px 1fr}
.sources li b{font:500 13px/1.4 var(--f-head);color:var(--oxblood)}
.sources a{text-decoration:underline;text-decoration-color:var(--ash);text-underline-offset:2px;word-break:break-word}

/* contact form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:16px;background:var(--white);border:1px solid var(--mist);border-radius:10px;padding:14px 16px;color:var(--basalt);outline:none;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--oxblood)}
.field textarea{min-height:140px;resize:vertical}

/* motion: fades only (brand rule) */
.js .reveal{opacity:0;transition:opacity .7s var(--ease)}
.js .reveal.in{opacity:1}
.js .bars .bar{transform:scaleY(.02)}
.js .in .bars .bar,.js .bars.in .bar{transform:scaleY(1)}
.js .hbar .t i{transform:scaleX(.01)}
.js .in .hbar .t i{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transition:none}.js .bars .bar,.js .hbar .t i{transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .pill a:not(.cta){padding:9px 10px}
  .brand .sub{display:none}
  .bench{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:1fr 1fr}
  .tiles .tile:last-child{grid-column:1/-1;min-height:240px}
  .proof .tiles{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr;row-gap:56px}
}
@media (max-width:860px){
  body{font-size:16px}
  .pill{display:none}
  .menu-btn{display:block}
  .site-head .wrap{height:68px}
  .brand img{height:28px}
  .site-head.open .pill{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:var(--pad);right:var(--pad);top:68px;padding:8px;gap:2px;border:1px solid var(--mist)}
  .site-head.open .pill a{padding:14px}
  .site-head.open .pill .cta{margin:6px 0 0;text-align:center}
  .hero-copy{grid-column:1/-1}
  .hero-mark{grid-column:1/-1;grid-row:1;justify-self:start;max-width:150px;margin:0 0 34px}
  .hero-foot .lede,.hero-foot .ctas{grid-column:1/-1}
  .hero-foot .ctas{margin-top:26px}
  .sec-head .h2,.sec-head .aside{grid-column:1/-1}
  .sec-head .aside{margin-top:18px}
  .hc{grid-template-columns:1fr;row-gap:28px}
  .hc-col li b{min-width:0}
  .hc-col li{flex-direction:column;gap:2px}
  .problem .g,.problem .cards{grid-column:1/-1}
  .problem .cards{margin-top:40px}
  .pillars{grid-template-columns:1fr}
  .pillars .card{min-height:300px}
  .score .intro,.score ol,.faq .intro,.faq .list,.dl .l,.dl .r{grid-column:1/-1}
  .score ol,.faq .list,.dl .r{margin-top:30px}
  .cta-panel .h1,.cta-panel .sub,.cta-panel .alt{grid-column:1/-1}
  .cta-panel .mark{grid-column:1/-1;grid-row:1;justify-self:start;max-width:110px}
  .cta-panel .alt{justify-self:start;text-align:left}
  .cta-panel{row-gap:30px}
  .foot-brand{grid-column:1/-1}
  .foot-col{grid-column:span 6}
  .logo-strip{grid-template-columns:repeat(3,1fr)}
  .sources{columns:1}
  .form{grid-template-columns:1fr}
}
@media (max-width:620px){
  .problem .cards,.tiles,.proof .tiles,.bench,.timeline{grid-template-columns:1fr}
  .tiles .tile:last-child{grid-column:auto}
  .card{min-height:200px}
  .tile{min-height:0}
  .tile .fill{min-height:40px}
  .bench .card{min-height:230px}
  .pillars .card{min-height:0}
  .pillars .card .fill{min-height:48px}
  .score li{grid-template-columns:38px 1fr}
  .score li .ynp{grid-column:2}
  .details .ans{padding-right:0}
  details .ans{padding-right:0}
  .foot-bar{flex-direction:column;align-items:flex-start}
  .hbar{grid-template-columns:1fr;gap:6px}
}

/* layout utilities (card groups + column spans) */
.c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}.c75{grid-template-columns:7fr 5fr}
.col-7-6{grid-column:7/span 6}
[data-col="1-8"]{grid-column:1/span 8}[data-col="9-4"]{grid-column:9/span 4}[data-col="1-7"]{grid-column:1/span 7}[data-col="8-5"]{grid-column:8/span 5}[data-col="1-6"]{grid-column:1/span 6}
@media (max-width:1100px){.c4{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.c3,.c75{grid-template-columns:1fr 1fr}.col-7-6,[data-col]{grid-column:1/-1}}
@media (max-width:620px){.c2,.c3,.c4,.c75{grid-template-columns:1fr}}