/* Visual skin only. Original component layouts and responsive grids stay in the original stylesheets. */
@font-face{font-family:Artegra;src:url('article-fonts/ArtegraSansExAltBold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Artegra;src:url('article-fonts/ArtegraSansExAltBlack.ttf') format('truetype');font-weight:900;font-display:swap}
@font-face{font-family:Montserrat;src:url('article-fonts/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('article-fonts/Montserrat-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url('article-fonts/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--ink:#24282c;--ink-2:#1f1f1f;--paper:#f7f7f7;--blue:#1496df;--blue-2:#1496df;--sky:#1496df;--mint:#eaf2f7;--gold:#1496df;--muted:#646b70;--line:#dce0e3;--shadow:0 18px 50px #24282c0d}
body{font-family:Montserrat,Arial,sans-serif;background:#f7f7f7;color:var(--ink)}
h1,h2{font-family:Artegra,Arial,sans-serif;font-weight:700;line-height:1.1;letter-spacing:-.045em}
h3{font-family:Montserrat,Arial,sans-serif;color:var(--ink)}
.progress,.section-kicker::before,.step-no,.author-mark{background:var(--blue);box-shadow:none}
.header{background:#fff;border-color:var(--line);box-shadow:0 10px 32px #24282c12}
.nav a{color:var(--ink)}
.rank-number{text-align:center}
.button,.footer .button,.future .button.light{background:var(--blue);border-color:var(--blue);box-shadow:none;color:white}
.button:hover{background:var(--blue-2);border-color:var(--blue-2);box-shadow:none}
.hero{background:radial-gradient(ellipse at 15% 35%,#243b4d66,transparent 70%),#1f1f1f;color:#f7f7f7;border-color:#32383d;box-shadow:none}
.hero::before,.hero::after{opacity:.12}
.hero h1{color:#f7f7f7}.hero-lead{color:#d5d9dc}.crumbs,.hero-meta{color:#a8b2b9}
.hero .hero-photo{border-color:#ffffff25;box-shadow:none;background:#24282c}
.result-card{background:#fff;border-color:var(--line);box-shadow:none}
.result-main{border-color:var(--line)}.result-main strong{color:var(--sky)}
.result-main small{color:var(--sky)}.result-main span,.result-grid span{color:#000}
.result-grid strong{color:#000}.result-grid div+div{border-color:var(--line)}
.paper{background:var(--paper)}
.snapshot,.toc,.facts,.step,.note,.chart,.team-card{background:white;border-color:var(--line);box-shadow:var(--shadow)}
.snapshot strong,h2,.facts dd,.rank-copy strong,.rank-number strong,.author-card strong{color:var(--ink)}
.snapshot div:first-child strong,.snapshot div:nth-child(3) strong,.toc p,.section-kicker,.facts dt,.note strong,.rank-number span,.rank-copy a{color:var(--blue-2)}
.toc a{color:var(--muted)}.toc a.active,.toc a:hover{color:var(--blue-2);border-color:var(--blue)}
.article p,.article li{color:var(--ink)}.lead{color:var(--ink)!important;border-color:var(--blue)}
.quote,.metric-panel,.rank-card,.future{background:#eef2f5;border-color:var(--line);box-shadow:var(--shadow)}
.quote p,.future h2{color:var(--ink)}.quote cite,.rank-copy p,.future p,.metric-panel>p{color:var(--muted)}
.quote cite strong,.metric-panel>small,.future-steps li::before{color:var(--blue-2)}
.quote::after{color:#1496df24}.metric-panel::before{background:radial-gradient(circle,#1496df16,transparent 68%)}
.metric{background:white;border-color:var(--line)}.metric strong{color:var(--blue-2)}.metric span{color:var(--muted)}
.bar{background:linear-gradient(0deg,#087db9,#1496df)}.growth-summary{background:#eaf2f7;color:#1496df}
.visual,.phone-shot,.design-board,.video-frame{background:#eef2f5;border-color:var(--line);box-shadow:var(--shadow)}
.author-card{background:#eef2f5;border-color:var(--line);box-shadow:none}.author-card small{color:var(--blue-2)}.author-card p{color:var(--muted)}
.future-steps li{background:white;border-color:var(--line);color:var(--ink)}
.footer{background:#eef2f5;color:var(--ink)}.footer-brand strong{color:var(--ink)}.footer-brand p,.footer-bottom{color:var(--muted)}.footer-nav strong,.footer-contact strong{color:var(--blue-2)}.footer a,.footer-bottom a,.footer-contact .footer-phone{color:var(--ink)}.footer-bottom{border-color:var(--line)}
/* The two additions from the user's Figma revision: notice and portrait inside the existing quote. */
.anonymity-note{background:#eaf2f7;border-left:4px solid var(--blue);border-radius:12px;padding:24px;margin:34px 0}.anonymity-note p{font-size:15px;margin:0}
.quote.attributed{display:block;isolation:isolate;min-height:516px}.quote-copy{position:relative;width:38%;min-width:0;z-index:2}.quote.attributed p{font-size:18px;line-height:1.66;font-weight:400;max-width:none}.quote-portrait{position:absolute;left:17.1%;top:0;transform:translateY(-28.7%);width:106.3%;max-width:none;height:auto;border-radius:0;z-index:1;pointer-events:none}.quote.attributed::after{opacity:0}.video-frame>img{width:100%;height:auto}
.quote-portrait-window{position:absolute;inset:0;overflow:hidden;pointer-events:none}
@media(max-width:780px){.quote-copy{width:100%}.quote-portrait-window{position:relative;inset:auto;height:340px;margin:20px -33px -33px}.quote-portrait{top:0;bottom:auto;left:-20%;width:140%;transform:translateY(-28.7%)}.quote.attributed p{font-size:17px}}
@media(max-width:520px){h1{font-size:36px}h2{font-size:32px;overflow-wrap:break-word}}
/* Navigation matches the main site's normal and scrolled states. */
.header{display:flex;gap:36px;width:81.25%;max-width:1560px;height:clamp(50px,3.855vw,74px);top:clamp(24px,2.083vw,40px);padding:0 18px 0 32px;border:0;border-radius:10px;background:#ffffff08;color:#f1f1f1;box-shadow:none}
.header .brand{min-width:0;width:clamp(132px,10.416vw,200px);flex:none}.header .brand img{width:100%;max-height:54px;object-fit:contain}.header .brand-on-light{display:none}
.header .nav{display:flex;gap:48px;margin-left:auto;margin-right:20px}.header .nav a{color:inherit;font:600 14px/1.3 Montserrat,Arial,sans-serif;text-transform:none;letter-spacing:0;padding:8px 3px;text-decoration:none}
.header .nav a::before{width:8px;height:8px;left:-13px;top:calc(50% - 4px);border-radius:50%;background:#1496df;transform:none}.header .nav a:hover{color:#1496df;text-shadow:none}
.header .button{width:clamp(210px,16.98vw,326px);height:clamp(34px,2.604vw,50px);min-height:0;padding:8px 12px;flex:none;background:transparent;border:1px solid currentColor;border-radius:8px;color:inherit;font:700 clamp(12px,.833vw,16px)/1.2 Montserrat,Arial,sans-serif;text-transform:uppercase;box-shadow:none}
.header .button:hover{transform:none;background:#ffffff12;box-shadow:none}
.header.is-scrolled{top:6px;background:#fff;color:#24282c;box-shadow:0 4px 22px #0002}.header.is-scrolled .brand-on-dark{display:none}.header.is-scrolled .brand-on-light{display:block}.header.is-scrolled .button{background:#1496df;border-color:#1496df;color:#fff}
@media(max-width:780px){.header{width:calc(100% - 24px);height:76px;top:12px;align-items:flex-start;padding:10px 12px;gap:10px}.header .brand{width:110px}.header .button{width:auto;height:32px;font-size:11px;margin-left:auto;padding:6px 10px}.header .nav{position:absolute;bottom:4px;left:12px;right:12px;justify-content:center;gap:30px;margin:0}.header .nav a{font-size:12px;padding:5px 3px}}
@media(min-width:781px) and (max-width:1100px){.header{width:calc(100% - 32px);gap:18px;padding-left:20px}.header .nav{gap:24px;margin-right:0}.header .nav a{font-size:12px}.header .button{width:190px}}
.hero h1{font-size:clamp(34px,3.7vw,52px);max-width:none;line-height:1.12}@media(max-width:520px){.hero h1{font-size:30px}}
/* Mobile follow-up: captions stay inside the image cards; the case title is slightly smaller. */
@media(max-width:780px){.article .media-grid{align-items:start}.article .media-grid .visual{height:auto}.article .media-grid img{height:auto}}
@media(min-width:521px) and (max-width:1199px){.hero h1{font-size:clamp(32px,3.5vw,40px)}}
@media(max-width:520px){.hero h1{font-size:28px}}
@media(max-width:639px){.article{overflow-wrap:anywhere}.timeline,.future-steps{min-width:0}.timeline>*{min-width:0}.future-steps li{grid-template-columns:30px minmax(0,1fr)}}