:root{--deep:#041a2e;--navy:#062a47;--mid:#0a4d6e;--aqua:#19c3c9;--aqua-d:#0b8a92;--coral:#ff7a59;--coral-d:#e85a38;--sand:#f3f8fb;--ink:#0d2235;--muted:#4a6275;--line:#d6e4ec;--r:18px;
--shadow:0 1px 2px rgba(4,26,46,.06),0 8px 24px rgba(4,26,46,.08);--shadow-h:0 2px 4px rgba(4,26,46,.08),0 16px 40px rgba(4,26,46,.14);
--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--sand);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
a{color:var(--aqua-d)}a:hover{color:var(--coral-d)}
:focus-visible{outline:3px solid var(--aqua);outline-offset:2px;border-radius:6px}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;color:inherit}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 .35em;text-align:center;font-weight:800}
h3{font-size:1.12rem;font-weight:750}
.sub{text-align:center;margin:0 auto 1.4rem;max-width:640px;color:var(--muted)}

/* Header */
.nav{position:sticky;top:0;z-index:50;background:rgba(4,26,46,.86);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.logo{font-weight:850;text-decoration:none;font-size:1.18rem;color:#fff;letter-spacing:-.01em}.logo:hover{color:var(--aqua)}
#site-nav{display:flex;align-items:center;gap:6px}
#site-nav a{color:#e6f4f8;text-decoration:none;padding:8px 12px;border-radius:999px;font-weight:550;font-size:.95rem;transition:background .2s,color .2s}
#site-nav a:not(.btn):hover{background:rgba(255,255,255,.1);color:#fff}
#site-nav a.btn{margin-left:8px;color:#fff}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer;border-radius:10px}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:transform .25s,opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;border:0;border-radius:999px;padding:14px 26px;font-weight:750;text-decoration:none;cursor:pointer;font-size:1rem;font-family:inherit;box-shadow:0 8px 22px rgba(232,90,56,.35);transition:transform .15s,box-shadow .2s,filter .2s}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,90,56,.45);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn.sm{padding:8px 18px;font-size:.9rem}
.btn.ghost{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.55);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.16);border-color:#fff}

/* Hero */
.hero,.page-hero{position:relative;color:#fff;overflow:hidden;isolation:isolate;
background:radial-gradient(900px 480px at 85% -10%,rgba(25,195,201,.55),transparent 60%),radial-gradient(700px 400px at 0% 110%,rgba(255,122,89,.22),transparent 60%),linear-gradient(170deg,#0b5c80 0%,var(--navy) 55%,var(--deep) 100%)}
.hero{padding:96px 0 160px}
.page-hero{padding:64px 0 120px}.page-hero h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 12px}.page-hero .sub{text-align:left;margin:0;color:#cfe7ef}.page-hero a{color:var(--aqua)}
.hero .wrap,.page-hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(2.3rem,5.6vw,3.9rem);line-height:1.05;margin:0 0 20px;font-weight:850;max-width:820px}
.hero h1 span{background:linear-gradient(90deg,#5ff0ee,var(--aqua) 50%,#ffb199);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.18rem;max-width:640px;color:#d8edf3}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 40px}
.waves{position:absolute;left:0;right:0;bottom:-1px;height:110px;z-index:1;pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath fill='%23f3f8fb' fill-opacity='.35' d='M0 50c240 50 480 50 720 15s480-45 720 5v40H0z'/%3E%3C/svg%3E") 0 100%/50% 100% repeat-x,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath fill='%23f3f8fb' d='M0 70c240 40 480 40 720 10s480-40 720 0v30H0z'/%3E%3C/svg%3E") 0 100%/50% 70% repeat-x;
animation:wave 18s linear infinite}
@keyframes wave{to{background-position:-100% 100%,100% 100%}}
.bubbles{position:absolute;inset:0;z-index:0;pointer-events:none}
.bubbles i{position:absolute;bottom:-40px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),rgba(255,255,255,.08) 60%);border:1px solid rgba(255,255,255,.25);animation:rise 14s linear infinite;opacity:0}
.bubbles i:nth-child(1){left:6%;animation-delay:0s}.bubbles i:nth-child(2){left:15%;width:8px;height:8px;animation-delay:3s;animation-duration:11s}
.bubbles i:nth-child(3){left:27%;width:20px;height:20px;animation-delay:6s}.bubbles i:nth-child(4){left:40%;width:10px;height:10px;animation-delay:1.5s;animation-duration:12s}
.bubbles i:nth-child(5){left:53%;animation-delay:8s}.bubbles i:nth-child(6){left:64%;width:9px;height:9px;animation-delay:4s;animation-duration:10s}
.bubbles i:nth-child(7){left:72%;width:18px;height:18px;animation-delay:2s;animation-duration:16s}.bubbles i:nth-child(8){left:81%;width:7px;height:7px;animation-delay:7s}
.bubbles i:nth-child(9){left:89%;width:12px;height:12px;animation-delay:5s;animation-duration:13s}.bubbles i:nth-child(10){left:95%;width:16px;height:16px;animation-delay:9s}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}50%{transform:translate(12px,-50vh)}100%{transform:translate(-8px,-110vh);opacity:0}}
.reef-deco{position:absolute;right:4%;bottom:70px;width:300px;height:auto;z-index:1;opacity:.55;pointer-events:none}

/* Cards */
.card{background:#fff;border-radius:var(--r);padding:26px;box-shadow:var(--shadow);border:1px solid rgba(214,228,236,.7)}
.sample{color:var(--ink);max-width:580px;border-left:5px solid var(--aqua);background:rgba(255,255,255,.97)}.sample p{margin:.45em 0}
.tag{display:inline-block;background:#dff6f7;color:#065f66;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:4px 11px;border-radius:999px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin:-40px auto 80px;position:relative;z-index:3}
.f{background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--shadow);border:1px solid rgba(214,228,236,.7);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.f::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--aqua),var(--coral))}
.f:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
.f h3{margin:4px 0 8px}.f p{margin:0;color:var(--muted)}

/* Calculator */
.calc-sec{background:linear-gradient(180deg,#e2f3f7,var(--sand));padding:72px 0}
.calc{max-width:720px;margin:20px auto;padding:30px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px}
label{display:flex;flex-direction:column;font-weight:650;font-size:.88rem;gap:7px;color:var(--ink)}
input,select{font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#f9fcfd;color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s;width:100%}
input:hover,select:hover{border-color:#a9c6d4}
input:focus,select:focus{outline:none;border-color:var(--aqua);background:#fff;box-shadow:0 0 0 4px rgba(25,195,201,.2)}
.result{background:linear-gradient(140deg,var(--navy),var(--deep));color:#e8f5f9;border-radius:16px;padding:22px 24px;margin-top:10px;box-shadow:inset 0 0 0 1px rgba(25,195,201,.25)}
.result .big{font-size:clamp(2rem,5vw,2.6rem);font-weight:850;color:#5ff0ee;letter-spacing:-.02em;line-height:1.15;margin:4px 0 6px}
.result b{color:#fff}
.result .warn{background:rgba(255,122,89,.14);border-left:4px solid var(--coral);padding:12px 14px;border-radius:10px;margin-top:14px;font-size:.9rem;color:#ffe4db}
.fine{max-width:720px;margin:0 auto;font-size:.82rem;color:var(--muted);text-align:center}

/* Pricing */
#pricing{padding:80px 22px}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px;max-width:760px;margin:28px auto 0}
.tier{transition:transform .2s,box-shadow .2s}.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
.tier h3{margin:.4em 0 .1em;font-size:1.3rem}.price{font-size:2.6rem;font-weight:850;letter-spacing:-.03em}.price small{font-size:1rem;color:var(--muted);font-weight:600}.alt{color:var(--muted)}
.tier ul{padding-left:0;list-style:none;margin:16px 0 0}.tier li{padding:6px 0 6px 28px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;border-radius:50%;background:var(--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/100%}
.pro{border:2px solid var(--aqua);box-shadow:0 18px 44px rgba(25,195,201,.22)}

/* FAQ */
.faq-sec{padding:70px 22px 50px}
.faq{max-width:720px;margin:12px auto;padding:0;cursor:pointer;transition:box-shadow .2s}
.faq:hover{box-shadow:var(--shadow-h)}
.faq summary{list-style:none;font-weight:700;padding:18px 52px 18px 22px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:#e2f5f6;color:var(--aqua-d);display:grid;place-items:center;font-size:1.2rem;font-weight:700;transition:transform .2s}
.faq[open] summary::after{content:"–"}
.faq[open] summary{border-bottom:1px solid #e3eef3}.faq p{margin:0;padding:14px 22px 18px;color:#24394b}

/* Waitlist */
.wl{position:relative;overflow:hidden;background:radial-gradient(600px 300px at 90% 0,rgba(25,195,201,.35),transparent 60%),linear-gradient(135deg,var(--mid),var(--deep));color:#fff;text-align:center;padding:80px 0}
.wl p{color:#d4ebf2}
.wl-form{display:flex;gap:10px;max-width:500px;margin:22px auto 0;background:rgba(255,255,255,.08);padding:6px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}
.wl-form input{flex:1;border:0;border-radius:999px;background:#fff;padding:13px 18px}
.wl-form input:focus{box-shadow:0 0 0 4px rgba(25,195,201,.45)}
.wl-msg{min-height:1.5em;font-weight:600}
.foot{padding:34px 22px;font-size:.86rem;color:var(--muted);text-align:center}

/* Glossary */
main.wrap{padding-bottom:30px;position:relative;z-index:3}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin:-30px 0 24px;position:sticky;top:72px;z-index:4}
.toc a{background:#fff;padding:9px 16px;border-radius:999px;text-decoration:none;font-weight:650;font-size:.92rem;color:var(--navy);box-shadow:var(--shadow);border:1px solid var(--line);transition:background .2s,color .2s,transform .15s}
.toc a:hover{background:var(--navy);color:#fff;transform:translateY(-1px)}
.gl-sec{margin:0 0 24px !important;scroll-margin-top:130px}
.gl-sec h2{text-align:left;font-size:1.6rem;padding-bottom:10px;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--aqua),var(--coral) 40%,transparent 70%) 1}
.gl-sec dl{margin:0}
.gl-sec dt{font-weight:750;margin-top:1.1rem !important;scroll-margin-top:8rem}
.gl-sec dt a{color:var(--navy) !important}.gl-sec dt a:hover{color:var(--coral-d) !important}
.gl-sec dd{margin:.25rem 0 0;color:#2c4356}
:target{background:rgba(25,195,201,.14) !important;border-radius:8px}

/* Mobile */
@media(max-width:760px){
.nav-toggle{display:block}
#site-nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px 16px 18px;background:rgba(4,26,46,.98);border-bottom:1px solid rgba(255,255,255,.1);display:none}
#site-nav.open{display:flex}
#site-nav a{padding:12px 14px;font-size:1.02rem}#site-nav a.btn{margin:8px 0 0}
.row{grid-template-columns:1fr}.wl-form{flex-direction:column;border-radius:18px}.wl-form .btn{width:100%}
.hero{padding:56px 0 130px}.reef-deco{width:170px;opacity:.3;bottom:60px;right:-20px}
.calc{padding:22px}.features{margin-top:-30px}.toc{position:static;margin-top:-20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}.bubbles{display:none}}
/* learn hub */
.post{max-width:820px;margin:-60px auto 40px;position:relative;z-index:2}
.post h2{text-align:left;font-size:1.45rem;margin-top:1.6em}
.post h3{margin-top:1.2em}
.post table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem;display:block;overflow-x:auto}
.post th,.post td{border-bottom:1px solid #dbe7ee;padding:8px;text-align:left;vertical-align:top}
.post .faq{margin:10px 0;max-width:none}
.meta{color:var(--muted);font-size:.9rem;margin-top:0}
.disclose{background:#fff7e6;border-left:4px solid #ff7a59;padding:12px 16px;border-radius:10px;font-size:.92rem;color:#5a4630}
.toc-in{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.92rem;background:#f1f8fa;padding:12px 16px;border-radius:12px}
.toc-in strong{width:100%}
.gear{background:#eefaf8;border:1px solid #bfe8e2;border-radius:14px;padding:6px 20px 14px;margin:2rem 0}
.gear h2{margin-top:.6em}
.learn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:-40px 0 28px;position:relative;z-index:2}
.learn-card{display:block;text-decoration:none;color:inherit;transition:transform .15s}
.learn-card:hover{transform:translateY(-3px)}
.learn-card h3{margin:0 0 6px}.learn-card p{color:var(--muted);font-size:.92rem}
.learn-card span{font-weight:700;color:var(--aqua-d)}
.post .cta{text-align:center;margin:2rem 0 0}
.learn-grid + .post{margin-top:0}
/* research references */
ol.refs{font-size:.92rem;line-height:1.5;padding-left:1.4rem}
ol.refs li{margin:.35rem 0;word-break:break-word}

/* related-reading (postlinks.py) */
.related-reading{margin:2rem 0 0;padding:1.1rem 1.25rem 1.2rem;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#f7fcfd,#eef7f9)}
.related-reading h2{text-align:left;font-size:1.25rem;margin:0 0 .55em;color:var(--ink)}
.related-reading ul{margin:.2em 0 0;padding:0;list-style:none;display:grid;gap:.45rem}
.related-reading li{margin:0}
.related-reading a{display:block;padding:.55rem .75rem;border-radius:10px;background:#fff;border:1px solid rgba(214,228,236,.9);text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;line-height:1.35;transition:border-color .15s,box-shadow .15s,transform .15s}
.related-reading a:hover{border-color:var(--aqua);box-shadow:var(--shadow);color:var(--aqua-d);transform:translateY(-1px)}
.related-reading .rr-kind{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--aqua-d);margin-right:.45em}
@media (max-width:560px){.related-reading{padding:1rem}.related-reading a{padding:.6rem .7rem}}