@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#06161b;
  --bg2:#081d23;
  --bg3:#0b2229;
  --paper:#f5f3ed;
  --paper-2:#f1eee7;
  --text:#112a31;
  --muted:#66767d;
  --light:#e8edf0;
  --border:#d9d4ca;
  --accent:#cad7dd;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 26%,var(--bg) 100%);font-family:'DM Sans',Arial,sans-serif;line-height:1.72;color:var(--light);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.shell{width:min(1160px,calc(100% - 48px));margin-inline:auto}
.topbar{background:transparent;border-bottom:1px solid #ffffff10}
.top-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{text-decoration:none;font:800 1.55rem 'Manrope',Arial,sans-serif;letter-spacing:-.055em;color:#fff;text-transform:none;display:inline-flex;align-items:center}
.brand-lima{color:#45dbe6}
.brand-rest{color:#ffffff}
.topnav{display:flex;gap:28px;align-items:center}
.topnav a{font-size:.89rem;color:#dbe3e7;text-decoration:none}
.topnav .nav-cta{border:1px solid #ffffff24;border-radius:50px;padding:10px 19px;color:#f5f7f8;background:#ffffff08}
.topnav a:hover{color:#fff}
.hero{background:radial-gradient(circle at 78% 8%,#122b33 0%,transparent 28%),linear-gradient(135deg,#06151a 0%,#071b20 58%,#08171c 100%);color:#f8f9fb;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.22fr .78fr;align-items:center;gap:68px;padding:82px 0 64px}
.eyebrow{color:#d6e0e5;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hero h1{font:800 clamp(2.55rem,4.5vw,4.75rem)/1.03 'Manrope',Arial,sans-serif;letter-spacing:-.068em;margin:19px 0 18px;max-width:780px}
.hero p{font-size:1.14rem;color:#d4dde2;max-width:670px;line-height:1.7}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-tags span{display:inline-flex;align-items:center;border:1px solid #ffffff20;border-radius:999px;padding:9px 14px;font-size:.78rem;font-weight:700;color:#e8edf0;background:#ffffff08}
.metadata{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.82rem;color:#b8c5cb;margin-top:26px}
.hero-art{background:#0b1418;border:1px solid #ffffff14;border-radius:24px;overflow:hidden;box-shadow:0 28px 60px rgba(0,0,0,.30)}
.hero-art img{width:100%;aspect-ratio:1;object-fit:cover}
.result-band{background:transparent;border:0;position:relative;z-index:3;margin-top:-6px}
.results{display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper);border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.14)}
.result{padding:27px 28px;border-right:1px solid var(--border);color:var(--text)}
.result:last-child{border-right:0}
.result strong{display:block;color:#10252d;font:800 clamp(1.7rem,3vw,2.55rem)/1.05 'Manrope',Arial,sans-serif;letter-spacing:-.055em}
.result span{display:block;font-size:.9rem;color:#5e7077;margin-top:8px;max-width:290px}
.main-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-areas:'story toc';gap:32px;padding:24px 0 110px;align-items:start}
.story{grid-area:story;background:var(--paper);border:1px solid var(--border);border-radius:24px;padding:clamp(26px,4.2vw,62px);box-shadow:0 12px 34px rgba(0,0,0,.12);min-width:0;font-size:1.045rem;color:var(--text)}
.toc{grid-area:toc;position:sticky;top:24px;border:1px solid var(--border);background:var(--paper);border-radius:18px;padding:24px 22px;box-shadow:0 10px 24px rgba(0,0,0,.10)}
.toc h2{font:800 .81rem 'Manrope',sans-serif;text-transform:uppercase;letter-spacing:.14em;color:#5a6a70;margin:0 0 18px}
.toc ol{padding-left:18px;font-size:.81rem;line-height:1.6;margin:0;color:#627078}
.toc li{padding-left:3px;margin-bottom:11px}
.toc a{text-decoration:none;color:#54646c}
.toc a:hover{text-decoration:underline;color:#17333d}
.story h2{font:800 clamp(1.63rem,2.65vw,2.34rem)/1.18 'Manrope',Arial,sans-serif;color:#0f2a33;letter-spacing:-.05em;margin:64px 0 22px;scroll-margin-top:35px}
.story h2:first-child{margin-top:0}
.story p{margin:0 0 21px}
.story strong{color:#12303a}
.story ul{color:var(--text)}
.story-image{margin:30px 0 36px}
.story-image img{width:100%;height:auto;max-height:600px;object-fit:cover;border-radius:16px;background:#ddd8ce}
.story-image figcaption{font-size:.77rem;color:#66776c;margin:10px 4px 0}
.press-links{display:flex;gap:13px;flex-wrap:wrap;background:#ebe8e0;border:1px solid var(--border);border-radius:16px;padding:24px;margin:26px 0;color:var(--text)}
.press-links p{flex-basis:100%;margin:0}
.press-links a,.supporting-link a{color:#18485a;text-decoration:underline;text-underline-offset:3px;font-size:.92rem}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px;margin:32px 0;background:#102129;border-radius:18px;color:white}
.comparison>div{background:#17303a;padding:26px;border-radius:14px}
.comparison span,.comparison small{display:block;font-size:.83rem;color:#d5dfe3}
.comparison strong{display:block;font:800 clamp(2.2rem,4vw,3.3rem)/1.25 'Manrope',sans-serif;color:#eff7fa;letter-spacing:-.06em}
.comparison p{grid-column:1/-1;color:#ced9de;font-size:.79rem;margin:0 6px 5px}
.end-cta{background:linear-gradient(140deg,#06161b,#081d23);color:#f2f6f7;padding:88px 0 94px;border-top:1px solid #ffffff12}
.end-cta h2{font:800 clamp(2rem,4vw,3.7rem)/1.08 'Manrope',sans-serif;letter-spacing:-.055em;max-width:810px;margin:19px 0}
.end-cta p{color:#ccd8dc;max-width:650px;font-size:1.05rem}
.btn{display:inline-block;background:#f2f2ee;color:#10242c;text-decoration:none;font-weight:800;border-radius:50px;padding:14px 25px;margin-top:16px}
.foot{background:#061318;color:#a7b7bc;padding:25px 0;font-size:.8rem;border-top:1px solid #ffffff10}
.foot .shell{display:flex;justify-content:space-between;gap:18px}.foot a{color:inherit}
@media(max-width:950px){
  .hero-grid{gap:34px;grid-template-columns:1fr}
  .hero-art{max-width:420px}
  .main-grid{grid-template-columns:1fr;grid-template-areas:'toc' 'story';gap:24px;padding-top:22px}
  .toc{position:static}
  .toc ol{columns:2}
}
@media(max-width:700px){
  .shell{width:calc(100% - 34px)}
  .hero-grid{padding:54px 0 42px}
  .results{grid-template-columns:1fr}
  .result{border-right:0;border-bottom:1px solid var(--border);padding:22px}
  .result:last-child{border-bottom:0}
  .topnav{gap:12px}
  .topnav a:not(.nav-cta){display:none}
  .toc ol{columns:1}
  .story{padding:28px 21px}
  .comparison{grid-template-columns:1fr}
  .foot .shell{flex-direction:column}
}