:root{
  --ground:#F2F4F9; --surface:#fff; --ink:#111729; --muted:#5B6170; --accent:#114FF5; --on-accent:#fff; --tint:#E4EBFD;
  --m:clamp(16px,4vw,32px); --gap:clamp(72px,12vw,160px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:500;font-size:18px;line-height:1.55;color:var(--ink);background:var(--ground)}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#fff}
strong{font-weight:800}
code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;background:var(--tint);padding:.12em .4em;border-radius:6px}

.bar{display:flex;align-items:center;gap:clamp(16px,3vw,40px);padding:20px var(--m);max-width:1360px;margin:0 auto}
.logo img{height:40px;width:auto}
.bar nav{display:flex;gap:clamp(14px,2.4vw,32px);margin-left:auto}
.bar nav a{color:var(--ink);font-weight:700;text-decoration:none;padding:10px 0}
.bar nav a:hover{color:var(--accent)}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:800;text-decoration:none;padding:14px 26px;border-radius:999px;transition:transform .15s ease,background-color .15s ease}
.btn:hover{background:#0C3FCB}
.btn:active{transform:scale(.97)}

main{max-width:1360px;margin:0 auto;padding:0 var(--m)}
h1{font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
h2{font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.03em;font-weight:800;text-wrap:balance;margin-bottom:28px}

.hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(24px,5vw,64px) 0 0}
.crumbs{font-weight:700;margin-bottom:20px}
.crumbs a{text-decoration:none}
.lead{margin-top:36px;font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:62ch}
.by{margin-top:24px;color:var(--muted);font-size:16px;max-width:62ch}
.hero .btn{margin-top:32px}
.fig img{border-radius:28px;width:100%}

.sec{margin-top:var(--gap)}
.sec.has-fig{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center}
.sec.has-fig.flip .sec-text{order:2}
.sec.has-fig.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.prose>*+*{margin-top:18px}
.prose p,.prose li{max-width:68ch}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:10px}
.prose li::marker{color:var(--accent);font-weight:800}

.tbl{overflow-x:auto;border-radius:20px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:17px}
th,td{text-align:left;vertical-align:top;padding:16px 20px}
thead th{background:var(--ink);color:#fff;font-weight:700}
tbody tr:nth-child(even){background:var(--ground)}
tbody th{font-weight:800}

.more,.list{margin-top:var(--gap)}
.more ul,.list ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.list ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.more a,.list a{display:block;height:100%;background:var(--surface);border-radius:24px;padding:28px;text-decoration:none;color:var(--ink);transition:transform .2s ease,background-color .2s ease}
.more a:hover,.list a:hover{background:var(--tint);transform:translateY(-4px)}
.more strong,.list strong{display:block;font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:-.02em;margin-bottom:8px}
.more span,.list span{color:var(--ink)}
.list img{border-radius:16px;margin-bottom:20px}

.foot{margin-top:var(--gap);background:var(--accent);color:#fff}
.foot-in{max-width:1360px;margin:0 auto;padding:clamp(40px,7vw,96px) var(--m) 40px}
.foot-name{font-size:clamp(56px,13.5vw,196px);line-height:.9;letter-spacing:-.05em;font-weight:800}
.foot-cols{margin-top:clamp(32px,5vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;font-size:16px}
.foot a{color:#fff}

@media (max-width:860px){
  body{font-size:17px}
  .bar nav a:nth-child(3){display:none}
  .bar .btn{padding:10px 18px}
  .hero,.sec.has-fig,.sec.has-fig.flip{grid-template-columns:minmax(0,1fr)}
  .sec.has-fig.flip .sec-text{order:0}
  .fig{max-width:520px}
  .more ul,.list ul,.foot-cols{grid-template-columns:minmax(0,1fr)}
  h2{margin-bottom:20px}
}
@media (max-width:420px){
  .bar nav{gap:12px}
  .bar nav a{font-size:15px}
  .bar .btn{display:none}
}

/* entrance: content is visible without script; script adds .js to <html> */
.js .rise{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{opacity:1;transform:none;transition:none}
  .btn,.more a,.list a{transition:none}
}
.hero-text,.sec-text{min-width:0}
.lead>*+*{margin-top:24px}
.lead .tbl{font-size:16px}
@media (max-width:860px){ .lead{margin-top:24px} }
.hero .fig{max-width:460px;justify-self:end;width:100%}
.sec.summary{margin-top:clamp(40px,6vw,72px)}
@media (max-width:860px){
  .hero .fig,.fig{max-width:400px;justify-self:start}
}
/* phones: each table row becomes a card, no side scroll */
@media (max-width:640px){
  .tbl{overflow:visible;background:none;border-radius:0}
  table,tbody,tr,th,td{display:block;width:auto}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  tbody tr,tbody tr:nth-child(even){background:var(--surface);border-radius:20px;padding:20px}
  tbody tr+tr{margin-top:12px}
  tbody th,td{padding:0}
  tbody th{font-size:19px;line-height:1.25}
  td{margin-top:14px}
  td::before{content:attr(data-label);display:block;color:var(--muted);font-size:14px;font-weight:700;margin-bottom:2px}
}
.sec.summary p{color:var(--muted);font-size:16px;max-width:none}