/* ══ Case-study redesign layer · shared by scopio-rms-redesign, scopio-labs-redesign, ranger-redesign ══
   Linked after each page's original <style>, so it overrides by source order.
   Each page sets its project colour inline:
     --p          accent: frames, badges, strips (never text on white)
     --p-light    light end of the hero device-frame gradient; tints
     --p-callout  pale end of the hero callout gradient (much lighter than the device frame)
     --p-deep     small titles on white: kicker, labels, numbers (AA at 12px)
     --p-ink      text colour on a flat --p surface
   Page-specific selectors stay inline in each page. */
:root{--p:#3C3CF7;--p-light:#E4E4FE;--p-callout:#EDEDFE;--p-deep:#2424C4;--p-ink:#fff}
img.media,img.media-clean,video.media-clean{width:100%;height:auto;display:block}
/* ══ Redesign layer · same DOM and copy, restyled to the serif-B system ══
   ink #0F0F2D · Inter body · Young Serif titles · JetBrains Mono labels · 6px radius · hairlines */
:root{--ink:#0F0F2D;--ink-2:#4B4B5E;--ink-3:#66667A;--line-soft:rgba(15,15,45,.14);--line:rgba(15,15,45,.2);--blue:#3C3CF7;--blue-deep:#2424C4;--paper:#fff;--bg:#F2F2F1;--r:6px;
  --serif:'Young Serif',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--gutter:clamp(16px,4vw,48px);--hero-gutter:clamp(16px,4vw,60px);--section:clamp(56px,9vh,112px)}
body{font-family:var(--sans);color:var(--ink-2);background:var(--paper);font-size:17px;line-height:1.55}
/* images carry width/height attributes for layout stability; without height:auto the attribute height wins and the image stretches */
img{max-width:100%;height:auto}
.device .frame{height:auto}
/* MacBook mockup geometry, measured on macbook-mockup.webp (2996x1596): the lid face is x 14.2–83.4%, y 0.8–82.8%; the visible body ends at 91% and the last 9% is shadow.
   The recording fills the lid with a ~1% bezel (aspect 1.613, the recordings are 1.616), and the whole device shifts down half the shadow so the visible laptop is centred in the frame */
.device .screen{left:15.2%;top:2.7%;width:67.2%;height:78.2%;border-radius:3px}
.device{transform:translateY(4.4%)}
.mono,.kicker,.chip,.tldr-cell .lbl,.sol-num,.c-label,.state-label,.before-badge,.pcard .prole,.sc-num,.ncard-impact,.goal-tag,.nav-links a,.footer-inner,.ct-btn,.see-more-btn{font-family:var(--mono)!important;font-size:12px!important;font-weight:500!important;letter-spacing:.06em!important;text-transform:uppercase!important}
/* nav */
nav{background:color-mix(in srgb,#fff 78%,transparent);border-bottom:1px solid var(--line-soft)}
.nav-links a[aria-current="page"]{color:var(--ink)}
/* tap targets: 44px without changing the visual height of the bar */
.nav-links a{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0}
.footer-inner a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:480px){.nav-cv{display:none}.nav-links{gap:18px}}
.nav-inner{max-width:1200px;padding:14px var(--gutter)}
.nav-links a{color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
/* layout + rhythm */
.pw{max-width:1200px;padding:0 var(--gutter)}
.s-white{background:var(--paper);padding:var(--section) 0}
.s-gray{background:var(--bg);padding:var(--section) 0}
/* type */
.kicker{color:var(--p-deep)!important;margin-bottom:14px}
.sec-title,.sol-header h2,.sol-h3,.thankyou-title,.c-title,.pcard .pname,.stat-num,.ncard-title,.tagline-block p,.t3-after{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.01em}
.sec-title,.sol-header h2{font-size:clamp(26px,3vw,38px);line-height:1.1;color:var(--ink);max-width:34ch}
.sec-title-center{text-align:left}
.sol-h3{color:var(--ink);margin-bottom:12px}
.sol-h3,.c-title,.pcard .pname,.scard .sc-title,.ncard .ncard-title{font-size:21px;line-height:1.15}
.body-text{font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.body-text strong,.bullet-list li strong,.confidence-list li strong,.ai-bullets li strong,.tldr-cell p strong,.pcard .ppain strong,.scard .sc-body strong{color:var(--ink);font-weight:600}
.chip{color:var(--ink-2);background:var(--paper);border:1px solid var(--line-soft);border-radius:4px;padding:7px 10px}
/* hero */
.hero-section{padding:96px 0 calc(var(--section) / 2)}
/* only the hero is wide: 60px from the viewport edges, no max-width; the rest of the page keeps the 1200 frame (her call 2026-09-27, asked three times) */
.hero-section .pw{max-width:none;padding:0 var(--hero-gutter)}
.hero-section h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.01em;color:var(--ink);max-width:22ch;text-wrap:balance}
.hero-section .kicker{color:var(--p-deep)!important}
.hero-chips{margin-top:24px}
.device-frame{background:linear-gradient(180deg,var(--p-light) 0%,var(--p) 100%)}
.hero-callout{background:linear-gradient(180deg,#FFFFFF 0%,var(--p-callout) 100%)}
.callout-tabs{background:var(--paper);border:1px solid var(--line-soft);box-shadow:none;padding:4px;gap:4px}
.ct-btn{color:var(--ink-2);padding:12px 8px;letter-spacing:.02em!important}
/* Phone: every state on one line; the pill spans the column and the labels share it by their own width */
@media(max-width:480px){.callout-tabs{display:flex;width:100%}.ct-btn{flex:1 1 auto;min-width:0;min-height:44px;padding:0 4px;letter-spacing:0!important}}
@media(max-width:359px){.callout-tabs{gap:0}.ct-btn{font-size:11px!important;padding:0 6px}}
.ct-btn.active{background:var(--ink);color:#fff;box-shadow:none}
.ct-btn:hover:not(.active){color:var(--ink)}
.callout-panels{border-radius:0;border:0;background:transparent}
.callout-panel img{border-radius:0;border:0}
.tagline-block{background:var(--ink)}
.tagline-block p{font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:#fff}
.tagline-block .tg-blue{color:var(--p)}
.transform-3col{background:var(--p)}
.t3-cell{border-right:1px solid rgba(15,15,45,.18);text-align:left;align-items:flex-start;padding:24px 20px}
.t3-before{color:var(--p-ink);font-size:14px}
.t3-arrow{color:var(--p-ink);font-size:14px}
.t3-after{font-size:17px;color:var(--p-ink);text-wrap:balance}
.t3-after.accent{color:var(--p-ink)}
/* tl;dr */
.tldr-section{padding:calc(var(--section) / 2) 0}
.tldr-cell{border-bottom:1px solid var(--line-soft);padding:24px 0}
.tldr-cell .lbl{color:var(--p-deep)!important;margin-bottom:10px}
.tldr-cell p{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.see-more-wrap{padding:var(--section) 0 0}
.see-less-wrap{padding:calc(var(--section) / 2) 0}
.see-more-btn{background:var(--ink);color:#fff;border-radius:999px;padding:13px 24px;font-size:13px!important;letter-spacing:.04em!important}
.see-more-btn:hover{background:var(--blue);transform:none}
/* lists */
.bullet-list,.confidence-list,.ai-bullets{max-width:62ch}
.bullet-list li,.confidence-list li,.ai-bullets li{font-size:17px;line-height:1.55;color:var(--ink-2);padding:6px 0 6px 20px;position:relative}
.bullet-list li::before,.confidence-list li::before,.ai-bullets li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:10px;border-radius:0;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0C5.3 3 7 4.7 10 5 7 5.3 5.3 7 5 10 4.7 7 3 5.3 0 5 3 4.7 4.7 3 5 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0C5.3 3 7 4.7 10 5 7 5.3 5.3 7 5 10 4.7 7 3 5.3 0 5 3 4.7 4.7 3 5 0Z'/%3E%3C/svg%3E") center/contain no-repeat}
/* the Next phase list (RMS) is a labelled list, not bullets: no marker */
.ai-bullets li{padding-left:0}
.ai-bullets li::before{display:none}
/* media */
img.media,.challenge-row img{border-radius:var(--r)!important;box-shadow:none!important;border:0}
/* E · edge from contrast, never from a line (decided 2026-09-27): cards flip to the grey fill on white sections; a white-ground screenshot on a white section sits on a grey mat */
.s-white .pcard,.s-white .stat-card,.s-white .challenge-annotation,.s-white .chal-card,.s-white .kpi-card,.s-white .imp-card,.s-white .glass-card,.s-white .scard{background:var(--bg)}
.s-white img.media{padding:12px;background:var(--bg)}
img.media-clean,video.media-clean,.state-grid img{border-radius:var(--r)!important;box-shadow:none!important;border:0}
/* personas */
.pcard{background:var(--paper);border:0;border-radius:var(--r);box-shadow:none;padding:22px}
.pcard .avatar-img{width:56px;height:56px}
.pcard .pname{color:var(--ink);margin-bottom:4px}
.pcard .prole{color:var(--ink-3)!important;margin-bottom:10px;font-size:13px!important;letter-spacing:0!important;text-transform:none!important}
.pcard .ppain{font-size:15px;line-height:1.5;color:var(--ink-2)}
/* challenges */
.challenge-annotation{background:var(--paper);border:0;border-radius:var(--r);box-shadow:none;padding:22px}
.c-label{color:var(--p-deep)!important;margin-bottom:10px}
.c-title{color:var(--ink);margin-bottom:8px}
.c-body{font-size:15px;line-height:1.5;color:var(--ink-2)}
.before-badge{color:var(--p-ink)!important;background:var(--p);border-radius:4px;padding:4px 8px}
/* solutions */
.sol-num{color:var(--p-deep)!important;margin-bottom:12px}
.sol-header .sol-sub{font-size:17px;color:var(--ink-2);margin-top:10px}
.state-label,.state-label.alert,.state-label.healthy{color:var(--p-deep)!important;margin-bottom:12px}
/* overview */
.stat-card{border:0;border-radius:var(--r);background:var(--paper);padding:24px}
/* Young Serif has old-style figures only, so standalone numbers "dance"; they are set in Inter 600 (her note 2026-09-27) */
.num,.stat-num,.kpi-number,.hero-stat-num{font-family:var(--sans)!important;font-weight:600!important;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.stat-num{font-size:clamp(36px,4vw,48px);color:var(--ink)}
.stat-desc{font-size:15px;color:var(--ink-2);margin-top:8px}
.overview-quote{border-left:1.5px solid var(--ink);font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.9vw,24px);line-height:1.3;color:var(--ink);padding-left:20px;max-width:62ch}
/* success */
.success-band{background:var(--bg);padding:var(--section) 0}
.success-band.s-white{background:var(--paper)}
.scard{background:var(--paper);border:0;border-radius:var(--r);box-shadow:none;text-align:left;padding:22px}
.scard .sc-num{color:var(--blue)!important;line-height:1}
.scard .sc-title{font-family:var(--serif);font-weight:400;color:var(--ink);margin-top:10px}
.scard .sc-body{font-size:15px;line-height:1.5;color:var(--ink-2);margin-top:8px}
.goal-tag{color:var(--p-ink)!important;background:var(--p)!important;border-radius:4px}
/* next cards */
/* company logo sits top-right like the homepage deck cards (.pc-logo), not above the title */
.ncard > .ncard-company{position:absolute!important;top:20px;right:20px;height:14px;margin:0;z-index:2}
.ncard > .ncard-company img{height:14px;width:auto;opacity:.9}
.ncard,.ncard-bg{border-radius:var(--r)}
.ncard{border:0;color:var(--ink)}
.ncard:hover{transform:translateY(-3px);box-shadow:0 24px 60px -30px rgba(15,15,45,.35)}
.ncard .ncard-title{color:var(--ink)}
.ncard .ncard-impact{color:var(--blue-deep)!important;opacity:1;margin-top:8px}
.ncard.ncard-labs .ncard-desc{color:var(--ink)}
.ncard .ncard-desc{font-size:14px;color:var(--ink-2);margin-top:10px;max-width:30ch}
.ncard.ncard-ranger,.ncard.ncard-ranger .ncard-title{color:#fff}
.ncard.ncard-ranger .ncard-impact{color:#fff!important}
.ncard.ncard-ranger .ncard-desc{color:rgba(255,255,255,.85)}
.ncard .ncard-header-img{border-radius:var(--r);filter:drop-shadow(0 12px 30px rgba(15,15,45,.16))}
.ncard .ncard-cta{border-color:rgba(15,15,45,.12);background:rgba(255,255,255,.6)}
/* thanks + footer */
.s-thankyou{text-align:left;padding:var(--section) 0 40px}
.thankyou-title{font-size:clamp(26px,3vw,38px);color:var(--ink);margin-bottom:14px}
.thankyou-body{font:400 17px/1.55 var(--sans);color:var(--ink-2);opacity:1;margin:0;max-width:62ch}
footer{background:var(--paper);border-top:1px solid var(--line)}
.footer-inner{max-width:1200px;padding:22px var(--gutter);color:var(--ink-3)}
.footer-inner a{color:var(--ink-3)}
.footer-inner a:hover{color:var(--ink)}
.lb-overlay{background:rgba(15,15,45,.88);transition:opacity .2s ease-in}
.lb-overlay.active{transition:opacity .3s ease-out}
.lb-overlay[hidden]{display:none}
.ct-btn{transition:background-color .2s,color .2s}
.ncard .ncard-cta{transition:background-color .3s ease,border-color .3s ease,transform .3s ease}
/* state toggle: stacked panels that crossfade, no cut to the background */
.callout-panels{position:relative}
.callout-panel{display:block;position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}
.callout-panel.active{position:relative;opacity:1;visibility:visible;pointer-events:auto;animation:none;transition-delay:0s}
.lb-overlay img{border-radius:var(--r);box-shadow:0 20px 60px rgba(15,15,45,.4)}
.ncard .ncard-cta svg,.ncard.ncard-ranger .ncard-cta svg{stroke:var(--ink)}
.ncard:hover .ncard-cta{background:var(--paper);border-color:var(--line)}
.ncard:hover .ncard-cta svg{stroke:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
/* card and sub-section titles are <p> or <div>, so the page's balance rule (h1-h6 only) misses them */
.c-title,.pcard .pname,.scard .sc-title,.ncard .ncard-title,.chal-title,.kpi-name,.imp-title,.sec-title-sm{text-wrap:balance}
/* focusable media inside overflow:hidden wrappers: draw the ring on the wrapper so it is not clipped */
.screen-bare>:focus-visible,.screen-container-inner>:focus-visible,.ipad-screen>:focus-visible,.device .screen>:focus-visible{outline:none}
.screen-bare:has(>:focus-visible),.screen-container-inner:has(>:focus-visible),.ipad-screen:has(>:focus-visible),.device .screen:has(>:focus-visible){outline:2px solid var(--blue);outline-offset:4px}
@media(max-width:680px){.hero-section h1{font-size:32px}.t3-cell{border-right:none;border-bottom:1px solid rgba(15,15,45,.18)}.t3-cell:last-child{border-bottom:none}}

/* QA 2026-09-28: the wordmark link is 14px tall; an invisible layer grows its hit area to 44px without moving it */
.logo-anim{box-sizing:content-box;padding:15px 0;margin:-15px 0}
a[aria-label="Home"]::after{content:"";position:absolute;inset:-15px 0}
/* Videos take keyboard focus (Enter pauses them); show where focus is */
video:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* Titles stay within two lines on phones (her rule; approved 2026-09-28) */
@media(max-width:480px){.hero-section h1{font-size:clamp(25px,7.9vw,32px)}}