:root{--ink:#062f36;--teal:#087a82;--mint:#8de0d8;--cream:#f6f1e7;--line:rgba(141,224,216,.3)}
*{box-sizing:border-box}
html{min-height:100%;background:var(--ink)}
body{min-height:100vh;margin:0;color:#fff;background:radial-gradient(circle at 78% 38%,rgba(8,122,130,.65),transparent 34%),linear-gradient(135deg,#032a30 0%,#064951 100%);font-family:Arial,Helvetica,sans-serif}
.shell{min-height:100vh;display:flex;flex-direction:column;max-width:1440px;margin:auto;padding:0 clamp(24px,5vw,72px)}
nav{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:22px}
.brand span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff;color:var(--teal);font-weight:800}
nav p{margin:0;color:#c6e9e5;font-size:14px;font-weight:700;letter-spacing:.04em}
.hero{flex:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:clamp(48px,8vw,120px);align-items:center;padding:72px 0}
.copy{max-width:760px}
.eyebrow,.kicker{font-size:12px;font-weight:800;letter-spacing:.2em}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--mint)}
.eyebrow i{width:44px;height:2px;background:var(--mint)}
h1{margin:26px 0 24px;font-size:clamp(52px,7vw,96px);line-height:.94;letter-spacing:-.055em}
h1 em{display:block;color:var(--mint);font-style:normal}
.lede{max-width:680px;margin:0;color:#d8ecea;font-size:clamp(19px,2vw,25px);line-height:1.55}
.status{display:flex;align-items:flex-start;gap:14px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line);color:#c9e2df}
.status>span{width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 6px rgba(141,224,216,.12)}
.status p{margin:0;font-size:14px;line-height:1.7}
.status b{color:#fff}
.preview{padding:clamp(28px,4vw,52px);border:1px solid rgba(255,255,255,.25);border-radius:26px;background:rgba(246,241,231,.97);box-shadow:0 32px 80px rgba(0,20,24,.28);color:var(--ink)}
.kicker{margin:0 0 18px;color:var(--teal)}
.preview h2{margin:0 0 36px;font-family:Georgia,serif;font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-.035em}
.comparison{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:12px}
.comparison article{display:flex;min-height:130px;flex-direction:column;justify-content:center;padding:18px;border:1px solid #cbd9d7;border-radius:16px;background:#fff}
.comparison .highlight{border-color:var(--teal);background:#d9efec}
.comparison>span{align-self:center;color:var(--teal);font-size:22px}
.comparison small{margin-bottom:10px;color:#58716e;font-size:9px;font-weight:800;letter-spacing:.13em}
.comparison strong{font-family:Georgia,serif;font-size:21px;line-height:1.18}
.preview ul{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:24px 0 0;border-top:1px solid #cfddda;list-style:none;font-size:12px;font-weight:700}
.preview li::before{content:'✓';margin-right:7px;color:var(--teal)}
footer{display:flex;justify-content:space-between;padding:24px 0 30px;border-top:1px solid var(--line);color:#a9ceca;font-size:12px}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding:56px 0}.copy{max-width:700px}.preview{max-width:650px}.shell{padding:0 28px}}
@media (max-width:560px){nav{height:78px}nav p{display:none}.hero{gap:42px;padding:46px 0}h1{font-size:50px}.lede{font-size:18px}.preview{padding:26px 20px;border-radius:20px}.preview h2{font-size:34px}.comparison{grid-template-columns:1fr}.comparison>span{justify-self:center;transform:rotate(90deg)}.comparison article{min-height:105px}footer{flex-direction:column;gap:8px}}
@media (prefers-reduced-motion:no-preference){.copy,.preview{animation:arrive .7s ease-out both}.preview{animation-delay:.12s}@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}}