/* © 2026 Steve McLean. All rights reserved. Proprietary — no copying, modifying or reuse without written permission. */
/* Lagoona – AI staff for small businesses. Lagoon look: warm sand, sea blues, coral and palm – one colour per team member. */
:root{
  --cream:#FBF7EF;--paper:#FFFEFA;--sand:#F2EADB;--line:#E4D9C4;--ink:#10303A;--ink2:#3F5A62;--mute:#7C8C8E;
  --espresso:#0E2A33;--esp2:#163843;--esp3:#22505C;--foam:#EAF6F4;
  --palm:#3F7D4E;--pearl:#2C8C86;--marina:#1C78A8;--coral:#E0664F;--manta:#8A6440;--horizon:#4A5F86;
  --c:var(--marina);
  --serif:"Newsreader","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px;color-scheme:light}
[hidden]{display:none!important}*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0}
body{background:var(--cream);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.08;margin:0}
h1{font-size:clamp(40px,6.4vw,78px)}h2{font-size:clamp(30px,4.2vw,50px)}h3{font-size:24px}
p{margin:0}.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
section{padding:96px 0}@media(max-width:700px){section{padding:64px 0}}
.eyebrow{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--ink2);max-width:680px;margin-top:18px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px var(--sans);padding:14px 22px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--cream);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(14,42,51,.6)}
.btn.ghost{background:transparent;color:var(--ink)}.btn.small{padding:9px 16px;font-size:14px}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);padding:8px 12px;border-radius:8px}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--cream) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font:700 21px var(--serif);text-decoration:none;letter-spacing:-.01em}
.logo i{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#BFEDE8,var(--pearl) 45%,#0E4F66);box-shadow:0 0 0 4px color-mix(in srgb,var(--coral) 18%,transparent)}
.nav nav{display:flex;gap:22px;margin-left:auto}.nav nav a{text-decoration:none;font-size:15px;color:var(--ink2)}.nav nav a:hover{color:var(--ink)}
@media(max-width:900px){.nav nav{display:none}.nav .btn{margin-left:auto}}

/* hero */
.hero{padding:64px 0 90px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
@media(max-width:980px){.hero .wrap{grid-template-columns:1fr}}
.hero h1 em{font-style:italic;color:var(--coral)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;font-size:14px;color:var(--ink2)}.trust span::before{content:"✓ ";color:var(--palm);font-weight:700}

/* the agent console (shared by hero + main demo) */
.console{background:var(--espresso);color:var(--foam);border-radius:24px;box-shadow:0 40px 80px -40px rgba(14,42,51,.7),inset 0 0 0 1px rgba(255,255,255,.05);overflow:hidden}
.c-top{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.c-name{font:600 17px var(--serif)}.c-role{font-size:12.5px;color:#9FC3C4}
.c-state{margin-left:auto;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9FC3C4;display:flex;align-items:center;gap:7px}
.c-state::before{content:"";width:8px;height:8px;border-radius:50%;background:#7BC48F;box-shadow:0 0 0 3px rgba(123,196,143,.18)}
/* orb: the agent's "face" – breathes when idle, swirls when thinking, pulses when speaking */
.orb{--s:44px;width:var(--s);height:var(--s);border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--c) 30%,#fff) 0,var(--c) 52%,color-mix(in srgb,var(--c) 55%,#000) 100%);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 40%,transparent);animation:breathe 3.2s ease-in-out infinite}
.orb::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent}
.orb.thinking::after{border-color:color-mix(in srgb,var(--c) 70%,#fff) transparent color-mix(in srgb,var(--c) 40%,transparent) transparent;animation:spin 1s linear infinite}
.orb.speaking{animation:talk .45s ease-in-out infinite alternate}
@keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 30%,transparent)}50%{transform:scale(1.04);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 0%,transparent)}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes talk{from{transform:scale(.97)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.orb,.orb::after{animation:none!important}}
.c-body{display:grid;grid-template-columns:1fr 300px;min-height:520px}
@media(max-width:980px){.c-body{grid-template-columns:1fr}}
.c-chat{display:flex;flex-direction:column;min-width:0;border-right:1px solid rgba(255,255,255,.07)}
.log{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px;max-height:560px;scroll-behavior:smooth}
.msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:15.5px;line-height:1.5}
.msg.user{align-self:flex-end;background:var(--c);color:#fff;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:var(--esp2);border-bottom-left-radius:5px}
.msg.bot strong{color:#fff}
.step{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:13px;color:#CFE6E3;padding:2px 2px}
.step b{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 35%,var(--esp3));color:#fff;font-size:11px}
.step.run b{background:none;border:2px solid var(--c);border-right-color:transparent;animation:spin .9s linear infinite}
.card{align-self:stretch;background:var(--paper);color:var(--ink);border-radius:14px;padding:12px 14px;font-size:14px;border-left:4px solid var(--c)}
.card .ct{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}.card .ct b{color:var(--c)}
.card .big{font:600 18px var(--serif)}.card .note{font-size:12px;color:var(--mute);margin-top:4px}
.card .row{display:grid;grid-template-columns:1fr 90px 32px;gap:8px;align-items:center;font-size:13px;padding:3px 0}
.card .bar{height:7px;border-radius:4px;background:var(--sand);overflow:hidden}.card .bar i{display:block;height:100%;background:var(--c)}
.card .row.on{font-weight:600}.card ul{margin:4px 0 0;padding-left:18px}.card li{margin:3px 0}
.card .row .rn{display:block;font-size:11.5px;font-weight:400;opacity:.72;margin-top:1px}
.card .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.card .acts button{font:600 13px var(--sans);border-radius:999px;padding:8px 14px;cursor:pointer;border:1.5px solid var(--ink);background:var(--ink);color:var(--cream)}
.card .acts button.alt{background:transparent;color:var(--ink)}
.card details summary{cursor:pointer;font-weight:600}.card details p{margin:6px 0 0;white-space:pre-wrap;color:var(--ink2)}
.card.done{border-left-color:var(--palm)}
.fcw{display:flex;gap:6px;align-items:flex-end;height:90px;margin-top:6px}.fcw div{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--mute)}
.fcw i{display:block;width:100%;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--c) 70%,#fff)}.fcw .short i{background:var(--coral)}
.src{align-self:flex-start;font-size:12.5px;color:#CFE6E3}.src span{display:inline-block;background:var(--esp3);border-radius:999px;padding:3px 10px;margin:3px 4px 0 0}
.typing{display:inline-flex;gap:4px}.typing i{width:6px;height:6px;border-radius:50%;background:#9FC3C4;animation:dot 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.3}50%{opacity:1}}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 10px}.chips button{font:500 13.5px var(--sans);background:var(--esp2);color:var(--foam);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:7px 12px;cursor:pointer}
.chips button:hover{border-color:var(--c)}
.ask{display:flex;gap:8px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.07)}
.ask input{flex:1;min-width:0;background:var(--esp2);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:12px 16px;color:var(--foam);font:16px var(--sans)}
.ask input::placeholder{color:#7FA3A6}.ask button{border:0;border-radius:999px;padding:0 18px;background:var(--c);color:#fff;font:600 15px var(--sans);cursor:pointer}.ask button:disabled{opacity:.5}

/* live dashboard beside the agent */
.c-dash{padding:16px;background:var(--esp2);display:flex;flex-direction:column;gap:12px}
.d-h{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#9FC3C4;display:flex;justify-content:space-between}
.d-h em{font-style:normal;color:#7BC48F}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpi div{background:var(--espresso);border-radius:12px;padding:10px 12px}
.kpi b{display:block;font:600 24px var(--serif);color:#fff;font-variant-numeric:tabular-nums;transition:color .4s}
.kpi b.bump{color:var(--c)}
.kpi span{font-size:11.5px;color:#9FC3C4}
.sig{background:var(--espresso);border-radius:12px;padding:12px;font-size:13px}
.sig h4{margin:0 0 8px;font:600 14px var(--serif);color:#fff}.sig h4::before{content:"★ ";color:var(--c)}
.sig .empty{color:#7FA3A6;font-size:12.5px}
.sig .li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.feed{font-size:12.5px;color:#CFE6E3;display:flex;flex-direction:column;gap:5px;max-height:150px;overflow:auto}
.feed div{animation:in .4s ease}.feed time{color:#7FA3A6;margin-right:6px;font-variant-numeric:tabular-nums}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.d-foot{font-size:11.5px;color:#7FA3A6;margin-top:auto}

/* hero console (scripted, smaller) */
.hero .console .c-body{grid-template-columns:1fr 210px;min-height:0}
.hero .log{max-height:none;height:360px;overflow:hidden}
@media(max-width:560px){.hero .console .c-body{grid-template-columns:1fr}.hero .c-dash{display:none}}

/* problem strip */
.pains{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}@media(max-width:900px){.pains{grid-template-columns:1fr 1fr}}@media(max-width:520px){.pains{grid-template-columns:1fr}}
.pain{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px}.pain b{display:block;font:600 20px var(--serif);margin-bottom:6px}.pain p{color:var(--ink2);font-size:15.5px}

/* meet the team */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}
@media(max-width:1100px){.team{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.team{grid-template-columns:1fr 1fr}}@media(max-width:440px){.team{grid-template-columns:1fr}}
.member{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:22px 20px;display:flex;flex-direction:column;gap:10px;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.member::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.member:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(14,42,51,.55);border-color:var(--c)}
.member .orb{--s:58px}
.member .lv{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:700}
.member h3{font-size:28px}.member .role{font-weight:600}.member p{color:var(--ink2);font-size:15px}
.member .from{margin-top:auto;font-size:13.5px;color:var(--mute)}.member .from b{color:var(--ink)}
.member .go{font-weight:600;color:var(--c);font-size:14.5px}

/* see it work */
.see{background:var(--sand)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:34px 0 22px}
.tab{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 16px 8px 8px;font:600 15px var(--sans);cursor:pointer;color:var(--ink)}
.tab .orb{--s:26px;animation:none}.tab[aria-selected=true]{border-color:var(--c);background:var(--c);color:#fff}
.see-note{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:14px;color:var(--ink2)}
.see-note b{color:var(--ink)}

/* signature dashboards */
.sigs{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}@media(max-width:1100px){.sigs{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.sigs{grid-template-columns:1fr}}
.sigc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;cursor:zoom-in;padding:0;font:inherit;color:inherit;text-align:left}
.sigc img{height:150px;width:100%;object-fit:cover;object-position:top;border-bottom:1px solid var(--line)}
.sigc div{padding:14px 16px}.sigc b{display:block;font:600 18px var(--serif);color:var(--c)}.sigc span{font-size:14px;color:var(--ink2)}
.sigc em{display:block;font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}

/* compare */
.cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:40px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:15.5px}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{font:600 16px var(--serif);background:var(--sand)}.cmp thead th.us{background:var(--espresso);color:var(--foam)}
.cmp td.us{background:color-mix(in srgb,var(--coral) 6%,var(--paper));font-weight:600}.cmp tr:last-child td{border-bottom:0}
.y{color:var(--palm);font-weight:700}.n{color:#C24A35;font-weight:700}.m{color:var(--mute)}
.tw{overflow-x:auto}

/* ROI calculator */
.roi{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px;align-items:start}@media(max-width:900px){.roi{grid-template-columns:1fr}}
.roi form{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:24px;display:grid;gap:18px}
.roi label{display:grid;gap:6px;font-weight:600;font-size:15px}.roi label span{font-weight:400;color:var(--ink2);font-size:13.5px}
.roi .in{display:flex;align-items:center;gap:12px}.roi input[type=range]{flex:1;accent-color:var(--coral)}.roi output{min-width:76px;text-align:right;font:600 18px var(--serif)}
.roi-out{background:var(--espresso);color:var(--foam);border-radius:22px;padding:28px}
.roi-out .big{font:600 clamp(42px,6vw,64px) var(--serif);color:#fff;line-height:1}.roi-out .lbl{color:#9FC3C4;font-size:14px;margin:6px 0 18px}
.roi-out dl{display:grid;gap:10px;margin:0}.roi-out dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(255,255,255,.12);padding-bottom:8px}
.roi-out dt{color:#CFE6E3}.roi-out dd{margin:0;font-weight:600}
.roi-out .pick{margin-top:18px;background:var(--esp2);border-radius:14px;padding:14px;font-size:15px}
.roi-out .fine{font-size:12px;color:#7FA3A6;margin-top:12px}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}@media(max-width:1100px){.prices{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.prices{grid-template-columns:1fr}}
.price{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--c);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px}
.price .who{display:flex;align-items:center;gap:10px}.price .orb{--s:34px;animation:none}.price h3{font-size:22px}.price .who span{display:block;font-size:13px;color:var(--mute)}
.price dl{margin:0;display:grid;gap:10px}.price dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}.price dd{margin:2px 0 0;font:600 20px var(--serif)}
.price dd small{display:block;font:400 13px var(--sans);color:var(--ink2)}
.price .btn{margin-top:auto}
.price-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}@media(max-width:900px){.price-notes{grid-template-columns:1fr}}
.price-notes div{background:var(--sand);border-radius:14px;padding:16px;font-size:14.5px;color:var(--ink2)}.price-notes b{color:var(--ink);display:block;margin-bottom:3px}

/* how + trust + faq */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;counter-reset:s}@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:520px){.steps{grid-template-columns:1fr}}
.stp{counter-increment:s;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px}.stp::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--cream);font:600 16px var(--serif);margin-bottom:12px}
.stp b{display:block;font:600 19px var(--serif);margin-bottom:4px}.stp p{color:var(--ink2);font-size:15px}
.trustg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}@media(max-width:900px){.trustg{grid-template-columns:1fr}}
.trustg div{border-left:4px solid var(--palm);padding:4px 0 4px 16px}.trustg b{display:block;font:600 19px var(--serif)}.trustg p{color:var(--ink2);font-size:15.5px}
.faq{max-width:820px;margin:40px auto 0}.faq details{border-bottom:1px solid var(--line);padding:16px 0}.faq summary{cursor:pointer;font:600 19px var(--serif);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--sans);color:var(--mute)}.faq details[open] summary::after{content:"–"}.faq p{color:var(--ink2);margin-top:8px}
.final{background:var(--espresso);color:var(--foam);text-align:center}.final .lead{color:#CFE6E3}.final .btn{background:var(--foam);color:var(--ink);border-color:var(--foam)}.final .btn.ghost{background:transparent;color:var(--foam)}
footer{padding:36px 0;font-size:14px;color:var(--mute)}footer .wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

/* quote dialog */
dialog{border:0;border-radius:22px;padding:0;max-width:560px;width:calc(100% - 32px);background:var(--paper);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(14,42,51,.6)}
.dlg{padding:26px}.dlg h3{font-size:26px;margin-bottom:6px}.dlg p{color:var(--ink2)}.dlg form{display:grid;gap:12px;margin-top:16px}
.dlg label{display:grid;gap:5px;font-weight:600;font-size:14px}.dlg input,.dlg select,.dlg textarea{font:16px var(--sans);padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--cream);color:var(--ink)}
.dlg textarea{min-height:120px}.x{float:right;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:var(--mute)}
.dlg .row2{display:flex;gap:10px;flex-wrap:wrap}.uw-only{display:none}.from-upwork .uw-only{display:block}.from-upwork .direct-only{display:none}
.imgdlg{max-width:980px}.imgdlg img{border-radius:12px;border:1px solid var(--line)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.member .why{font-size:13.5px;font-style:italic;color:var(--c);border-top:1px dashed var(--line);padding-top:8px}
/* lagoon touch: a soft wave under the hero */
.hero{background:radial-gradient(1200px 380px at 80% 105%,color-mix(in srgb,var(--pearl) 14%,transparent),transparent 70%)}
/* pricing: value anchor + ownership ladder */
.price .worth{background:color-mix(in srgb,var(--c) 9%,var(--paper));border-radius:12px;padding:10px 12px}
.price .worth span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.price .worth b{font:600 22px var(--serif);color:var(--c)}.price .worth small{display:block;font-size:12.5px;color:var(--ink2)}
.price .more summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--ink2)}.price .more dl{margin-top:10px}
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px}@media(max-width:1000px){.ladder{grid-template-columns:1fr}}
.ladder div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;font-size:14px;color:var(--ink2);position:relative}
.ladder em{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sand);font:600 13px var(--sans);font-style:normal;color:var(--ink);margin-bottom:6px}
.ladder b{display:block;font:600 18px var(--serif);color:var(--ink);margin-bottom:4px}
.ladder .hi{border:2px solid var(--marina);box-shadow:0 14px 30px -22px var(--marina)}.ladder .hi em{background:var(--marina);color:#fff}

/* voice call (Marina) */
.ask .vmic{flex:none;width:46px;padding:0;background:transparent;border:1.5px solid var(--c);font-size:18px}
.ask .vmic:hover{background:rgba(255,255,255,.06)}
.ask .vmic.nudge{animation:nudge 1.1s ease-in-out 5;border-width:2px}@keyframes nudge{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 60%,transparent);transform:scale(1)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--c) 0%,transparent);transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.ask .vmic.nudge{animation:none;box-shadow:0 0 0 3px var(--c)}}
.vbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);color:var(--foam);font-size:14px}
.vbar[hidden],.ask[hidden]{display:none}
.vdot{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none;transition:transform .08s}
.vbar.speaking .vdot{background:#7BC48F}.vbar.muted .vdot{background:#6F8A8D}
.vtime{margin-left:auto;opacity:.7;font-size:12.5px}
.vmute,.vend{border-radius:999px;font:600 13px var(--sans);padding:8px 14px;cursor:pointer}
.vmute{background:transparent;color:var(--foam);border:1.5px solid rgba(255,255,255,.35)}.vmute[aria-pressed=true]{background:var(--foam);color:var(--espresso)}
.vend{border:0;background:var(--coral);color:#fff}

/* Services & pricing: agent beside its dashboard, one row per level */
.pairs{display:grid;gap:16px;margin-top:36px}
.pair{display:grid;grid-template-columns:1fr 1.15fr;background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:var(--r);overflow:hidden}
.pair .lv{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:700}
.pa{padding:22px;display:flex;flex-direction:column;gap:10px}
.pa .who{display:flex;align-items:center;gap:10px}.pa .orb{--s:38px;animation:none}.pa h3{font-size:26px}.pa .who span{display:block;font-size:14px;color:var(--mute)}
.pa p{color:var(--ink2);font-size:15px}.pa .from{font-size:14px;color:var(--mute)}.pa .from b{color:var(--ink)}
.pa .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.pd{display:grid;grid-template-columns:1fr;border:0;border-left:1px solid var(--line);background:color-mix(in srgb,var(--c) 6%,var(--paper));padding:0;font:inherit;color:inherit;text-align:left;cursor:zoom-in}
.pd img{width:100%;height:190px;object-fit:cover;object-position:top;border-bottom:1px solid var(--line)}
.pd div{padding:12px 16px}.pd b{display:block;font:600 18px var(--serif);color:var(--c);margin-top:2px}.pd span{font-size:14px;color:var(--ink2)}
@media(max-width:760px){.pair{grid-template-columns:1fr}.pd{border-left:0;border-top:1px solid var(--line)}.pd img{height:170px}}
.pt-h{margin-top:44px;font-size:24px}
.cmp.pt{margin-top:16px;font-size:14.5px;min-width:720px}
.cmp.pt thead th{white-space:nowrap}.cmp.pt th .orb{--s:14px;animation:none;display:inline-block;vertical-align:-2px;margin-right:6px}
.cmp.pt th small,.cmp.pt td small{display:block;font:400 12px var(--sans);color:var(--mute)}
.cmp.pt td:first-child{font-weight:600;color:var(--ink2)}
.cmp.pt tbody tr:nth-child(-n+2) td:not(:first-child){font:600 17px var(--serif)}
.cmp.pt td:first-child,.cmp.pt th:first-child{position:sticky;left:0;background:var(--paper);z-index:1}.cmp.pt thead th:first-child{background:var(--sand)}
#pricing .price-notes div{background:var(--paper);border:1px solid var(--line)}
.pa .why{font-size:13.5px;font-style:italic;color:var(--c)}

/* Hero: five levels, agent above its dashboard */
.hero2{padding:48px 0 56px}.hero2 .wrap{display:block}.hero2 h1{text-align:center}.hero2 .lead{max-width:640px;margin-left:auto;margin-right:auto}
.hero2 .trust{justify-content:center;margin-top:22px}
.hteam{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:32px}
.hx{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--c);border-radius:16px;overflow:hidden}
.hx button{font:inherit;color:inherit;background:none;border:0;text-align:left;cursor:pointer;padding:0}
.hx-a{padding:14px 14px 10px!important;display:flex;flex-direction:column;gap:4px}
.hx .lv{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:700}
.hx .who{display:flex;align-items:center;gap:8px}.hx .orb{--s:24px;animation:none}.hx .who b{font:600 22px var(--serif)}
.hx .rl{font-size:13.5px;color:var(--ink2)}
.hx-d{border-top:1px solid var(--line)!important;background:color-mix(in srgb,var(--c) 6%,var(--paper))!important;cursor:zoom-in!important}
.hx-d img{display:block;width:100%;height:110px;object-fit:cover;object-position:top}
.hx-d span{display:block;padding:8px 14px;font:600 14px var(--serif);color:var(--c)}
.hx-go{margin-top:auto;padding:10px 14px 14px!important;font-weight:600!important;color:var(--c)!important;font-size:14px!important}
@media(max-width:1000px){.hteam{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.hteam{grid-template-columns:1fr}.hx{display:grid;grid-template-columns:1fr 1fr}.hx-a{grid-column:1}.hx-d{grid-column:2;grid-row:1 / span 2;border-top:0!important;border-left:1px solid var(--line)!important}.hx-d img{height:90px}.hx-go{grid-column:1}}
.hero2 h1 em{display:inline-block;font-size:.62em;line-height:1.15;margin-top:6px}

/* Hero: one obvious action */
.hcta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px}
.btn.big{font-size:18px;padding:16px 30px;display:inline-flex;align-items:center;gap:12px;box-shadow:0 18px 36px -18px var(--marina)}
.btn.big .mic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--marina);color:#fff;font-size:17px;position:relative}
.btn.big .mic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--marina);animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.hcta-alt{font-size:14.5px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.hx .talks{align-self:flex-start;margin-top:4px;font-size:12px;font-weight:700;color:#fff;background:var(--marina);border-radius:99px;padding:3px 9px}
.hx{animation:rise .6s cubic-bezier(.2,.7,.2,1) both;transition:transform .2s,box-shadow .2s}.hx:nth-child(2){animation-delay:.08s}.hx:nth-child(3){animation-delay:.16s}.hx:nth-child(4){animation-delay:.24s}.hx:nth-child(5){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hx:hover{box-shadow:0 22px 40px -28px rgba(14,42,51,.55)}
@media(prefers-reduced-motion:reduce){.hx,.btn.big .mic::after{animation:none}}
.hx-a{position:relative}.hx .talks{position:absolute;top:12px;right:12px;margin:0}
@media(max-width:640px){.hero2 .wrap{display:flex;flex-direction:column}.hero2 .hcta{order:1;margin:20px 0 4px}.hero2 .hteam{order:2;margin-top:18px}.hero2 .trust{order:3}.btn.big{font-size:16.5px;padding:14px 22px}}
@media(max-width:640px){.hero2 .wrap{gap:0}.hx .talks{position:static;margin-top:6px}}

/* Each agent gets its own soft tint so the five never blur together */
.hx{background:color-mix(in srgb,var(--c) 9%,var(--paper));border-color:color-mix(in srgb,var(--c) 28%,var(--line))}
.hx-d{background:color-mix(in srgb,var(--c) 16%,var(--paper))!important;border-top-color:color-mix(in srgb,var(--c) 28%,var(--line))!important}
.pair{background:color-mix(in srgb,var(--c) 8%,var(--paper));border-color:color-mix(in srgb,var(--c) 28%,var(--line))}
.pd{background:color-mix(in srgb,var(--c) 15%,var(--paper))}
.pairs{gap:22px}
.cmp.pt thead th:not(:first-child){background:color-mix(in srgb,var(--c) 16%,var(--paper));border-top:4px solid var(--c)}
.pair{border-left-color:var(--c)}.hx{border-top-color:var(--c)}
.pair{border-left-color:var(--c)}.hx{border-top-color:var(--c)}

/* ===== Bolder look: five clearly different colours, a deep-lagoon hero, solid colour headers ===== */
:root{--pearl:#0F9488;--marina:#1D6FC0;--coral:#E0553C;--manta:#B7791F;--horizon:#6B4FC2}
.hero2{background:radial-gradient(900px 420px at 15% 0%,#1F7F86 0%,transparent 60%),radial-gradient(900px 500px at 90% 100%,#1D5E9C 0%,transparent 60%),linear-gradient(160deg,#0B2C38,#0E3B4A 55%,#0B2A3A);color:#fff}
.hero2 h1{color:#fff}.hero2 h1 em{color:#FF8E74}
.hero2 .lead{color:#CFE6E7}
.hero2 .trust span{color:#CFE6E7}.hero2 .trust span::before{color:#7FE0C8}
.hero2 .hcta-alt{color:#CFE6E7}
.hero2 .btn.big{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.hx{border:0;box-shadow:0 20px 40px -24px rgba(0,0,0,.7);background:var(--paper)}
.hx-a{background:var(--c)!important;color:#fff}
.hx-a .lv,.hx-a .rl{color:rgba(255,255,255,.88)}.hx-a .who b{color:#fff}
.hx-a .orb{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.hx .talks{background:#fff;color:var(--c)}
.hx-d{background:color-mix(in srgb,var(--c) 14%,var(--paper))!important;border-top:0!important}
.hx-d span{color:var(--c)}
.hx-go{background:var(--paper)}
/* team rows */
.pair{border:0;box-shadow:0 14px 30px -24px rgba(14,42,51,.6)}
.pa{background:color-mix(in srgb,var(--c) 13%,var(--paper))}
.pa .who h3{color:var(--c)}
.pa .lv{display:inline-block;align-self:flex-start;background:var(--c);color:#fff;padding:4px 10px;border-radius:99px}
.pd{background:color-mix(in srgb,var(--c) 22%,var(--paper));border-left:0}
.pd .lv{display:inline-block;background:var(--c);color:#fff;padding:3px 9px;border-radius:99px}
/* price table */
.cmp.pt thead th:not(:first-child){background:var(--c);color:#fff;border-top:0}
.cmp.pt thead th small{color:rgba(255,255,255,.85)}
.cmp.pt thead th .orb{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
@media(max-width:640px){.hx-d{border-left:0!important}}

/* ===== While you sleep: one night, scroll-driven ===== */
.night{padding:0;background:#060E22;color:#EAF2F8}
.night-track{height:520vh;position:relative}
.night-stage{position:sticky;top:68px;height:calc(100vh - 68px);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,#2C3E6E,#BE6E5A)}
.stars{position:absolute;inset:0;transition:opacity .3s}.stars i{position:absolute;aspect-ratio:1;border-radius:50%;background:#fff}
.moon{position:absolute;top:12%;left:8%;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#FFFBEA,#E9E1C2 60%,#CFC4A0);box-shadow:0 0 60px 12px rgba(255,248,220,.18)}
.sun{position:absolute;left:50%;bottom:-90px;width:260px;height:260px;margin-left:-130px;border-radius:50%;background:radial-gradient(circle,#FFE6A8,#FFB067 55%,rgba(255,150,90,0) 72%);opacity:0}
.night-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center;width:100%}
.night h2{color:#fff;font-size:clamp(34px,4.4vw,56px)}
.clock{font:600 clamp(72px,11vw,150px)/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff;margin:10px 0 6px;text-shadow:0 0 40px rgba(140,190,255,.25)}
.night-sub{font-size:clamp(17px,1.5vw,20px);color:#C9D8EA;min-height:3.2em}
.tally{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:22px 0 0;background:rgba(255,255,255,.14);border-radius:14px;overflow:hidden;max-width:440px}
.tally div{background:rgba(8,20,44,.72);padding:12px 16px;backdrop-filter:blur(6px)}
.tally dt{font-size:13px;color:#9FB4CC}.tally dd{margin:2px 0 0;font:600 28px var(--serif);color:#fff;font-variant-numeric:tabular-nums}
.night-cta{margin-top:18px;background:#fff;color:var(--ink);border-color:#fff}
.night-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 230px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.night-feed li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;background:rgba(255,255,255,.95);color:var(--ink);border-left:6px solid var(--c);border-radius:14px;padding:12px 16px;box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
.night-feed time{grid-row:span 3;font:600 18px var(--serif);color:var(--c);font-variant-numeric:tabular-nums;padding-top:1px}
.night-feed .who{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--c)}.night-feed .orb{--s:14px;animation:none}
.night-feed q{font-size:15.5px;quotes:"“" "”"}.night-feed .did{font-size:14px;color:var(--ink2)}
.night-feed li.new{animation:pop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.hours{position:relative;margin-top:26px}
.hbar{height:4px;border-radius:4px;background:rgba(255,255,255,.18)}.hbar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#7FB2FF,#FFD39A)}
.hlabels{display:flex;justify-content:space-between;font-size:12.5px;color:#9FB4CC;margin-top:6px}
.night-note{position:relative;text-align:center;font-size:12.5px;color:#8FA6BF;margin-top:10px}
.night-stage.dawn .night-note,.night-stage.dawn .hlabels{color:#3B4A66}
@media(max-width:860px){
  .night-grid{grid-template-columns:1fr;gap:14px}
  .night h2{font-size:28px}.clock{font-size:64px;margin:4px 0 2px}.night-sub{min-height:0;font-size:15.5px}
  .tally{margin-top:10px;max-width:none}.tally dd{font-size:21px}.tally div{padding:8px 12px}.tally dt{font-size:12px}
  .night-feed{max-height:34vh}.night-feed li{padding:9px 12px}.night-feed q{font-size:14px}.night-feed .did{font-size:13px}
  .night-cta{display:none}.hours{margin-top:12px}.moon{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){.night-feed li.new{animation:none}}
.hours{width:100%}
.night-feed li.hint{display:block;background:rgba(255,255,255,.08);color:#C9D8EA;border:1px dashed rgba(255,255,255,.3);text-align:center;box-shadow:none}
@media(max-width:860px){.moon{left:auto;right:8%;top:5%}}

/* Rhythm: the live demo sits on deep lagoon so it can't blur into its neighbours */
.see{background:radial-gradient(900px 400px at 85% 0%,#1D5E9C55,transparent 60%),linear-gradient(170deg,#0B2C38,#0E3B4A 60%,#0B2A3A);color:#EAF2F8}
.see h2{color:#fff}.see .lead{color:#C9DDE2}
.see .tab{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#EAF2F8}
.see .tab[aria-selected=true]{background:var(--c);border-color:var(--c);color:#fff}
.see .console{box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.see .see-note{color:#C9DDE2}.see .see-note b{color:#fff}
.see .see-note .btn.ghost{color:#fff;border-color:rgba(255,255,255,.6)}
#team{padding-top:80px}
#why{background:var(--cream)}#roi{background:var(--sand)}#pricing{background:var(--cream)!important}

/* ===================== Lower page: every section has its own moment ===================== */
section h2{text-wrap:balance}
/* --- Why: same question, two answers --- */
#why{background:var(--cream)}
.duel-q{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:34px 0 18px}
.duel-q button{font:500 16px var(--serif);font-style:italic;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.duel-q button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.duel{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.duel{grid-template-columns:1fr}}
.duel-side{border-radius:22px;padding:18px;min-height:330px;display:flex;flex-direction:column}
.duel-side.them{background:#E9E8E4;color:#55595C;filter:saturate(.4)}
.duel-side.us{background:color-mix(in srgb,var(--c,var(--marina)) 12%,var(--paper));box-shadow:0 0 0 2px var(--c,var(--marina)),0 30px 60px -36px var(--c,var(--marina))}
.duel-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;margin-bottom:12px}
.duel-side.them .dot{width:22px;height:22px;border-radius:6px;background:#B9BCBE}
.duel-side.us .duel-h{color:var(--c)}.duel-side.us .orb{--s:22px;animation:none}
.duel-log{display:flex;flex-direction:column;gap:8px;flex:1}
.duel-log .b{max-width:88%;padding:10px 14px;border-radius:16px;font-size:15.5px;line-height:1.45}
.duel-log .u{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.them .duel-log .u{background:#8A8E91}
.duel-log .bot{align-self:flex-start;background:#fff;border-bottom-left-radius:4px;min-height:1.45em}
.them .duel-log .bot{background:#F7F6F3}
.duel-log .step{align-self:flex-start;font-size:13.5px;color:var(--c);background:transparent;padding:2px 4px;display:flex;gap:6px;font-weight:600}
.duel-verdict{margin-top:12px;font-weight:700;font-size:14.5px;opacity:0;transform:translateY(6px);transition:.35s}
.duel-verdict.on{opacity:1;transform:none}
.them .duel-verdict{color:#9A4A3C}.us .duel-verdict{color:var(--c)}
.duel-note{text-align:center;font-size:13px;color:var(--mute);margin-top:14px}
.fullcmp{margin-top:26px}.fullcmp summary{cursor:pointer;text-align:center;font-weight:600;color:var(--ink2)}.fullcmp .cmp{margin-top:18px}
/* --- ROI: the leak --- */
#roi{background:var(--sand)}
.roi input[type=range]{accent-color:var(--marina)}
.leak{background:#0B2C38;color:#EAF2F8;border-radius:26px;padding:20px;display:flex;flex-direction:column;gap:14px}
.tank{position:relative;height:260px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#123E4E,#0E3341)}
.water{position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(180deg,#2BA3B4,#14627A);transition:height .7s cubic-bezier(.3,.7,.2,1)}
.wave{position:absolute;left:0;top:-18px;width:200%;height:20px;fill:#2BA3B4;animation:wave 6s linear infinite}
@keyframes wave{to{transform:translateX(-50%)}}
.tank-txt{position:relative;z-index:1;padding:22px 24px}
.tank .big{font:600 clamp(46px,6vw,72px)/1 var(--serif);color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.tank .lbl{color:#CFE6E7;font-size:15px;margin-top:6px}
.drip{position:absolute;right:28px;top:0;bottom:0;width:10px}
.drip i{position:absolute;left:0;width:8px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#7FD3DD;opacity:0;animation:drip 2.4s ease-in infinite}
.drip i:nth-child(2){animation-delay:.8s}.drip i:nth-child(3){animation-delay:1.6s}
@keyframes drip{0%{top:0;opacity:0}15%{opacity:.9}100%{top:100%;opacity:0}}
.tank.dry .drip{display:none}
.leak dl{display:grid;gap:8px;margin:0}.leak dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(255,255,255,.14);padding-bottom:7px}
.leak dt{color:#CFE6E3}.leak dd{margin:0;font-weight:600}
.leak .pick{background:#14465A;border-radius:14px;padding:14px;font-size:15px}
.leak .fine{font-size:12px;color:#7FA3A6}
@media(prefers-reduced-motion:reduce){.wave,.drip i{animation:none}}
/* --- Pricing: rent or own --- */
#pricing{background:var(--cream)!important}
.ro{margin-top:30px;background:var(--paper);border-radius:26px;padding:22px;box-shadow:0 30px 60px -44px rgba(14,42,51,.6)}
.ro-pick{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ro-pick button{display:flex;align-items:center;gap:8px;font:600 15px var(--sans);padding:7px 15px 7px 7px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--c) 40%,var(--line));background:color-mix(in srgb,var(--c) 8%,var(--paper));color:var(--ink);cursor:pointer}
.ro-pick button .orb{--s:22px;animation:none}.ro-pick button[aria-selected=true]{background:var(--c);border-color:var(--c);color:#fff}
.ro-chart svg{width:100%;height:auto;display:block;margin-top:8px}
#roSvg .g{stroke:var(--line);stroke-width:1}#roSvg .ax{font:12px var(--sans);fill:var(--mute)}
#roSvg .l{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
#roSvg .lic{stroke:#A9B4B8;stroke-dasharray:2 9}#roSvg .own{stroke:var(--c)}
#roSvg .cx{stroke:var(--c);stroke-dasharray:4 5;stroke-width:1.5}#roSvg .pt{fill:#fff;stroke:var(--c);stroke-width:4}
#roSvg .cl{font:600 17px var(--serif);fill:var(--c)}
.ro-msg{text-align:center;font-size:clamp(17px,1.6vw,20px);margin-top:6px}.ro-msg b{color:var(--ink)}
.ro-msg small{display:block;font-size:13px;color:var(--mute);margin-top:6px}
.ro-key{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--ink2);margin-top:12px}
.ro-key .k::before{content:"";display:inline-block;width:22px;height:4px;border-radius:3px;vertical-align:middle;margin-right:7px}
.ro-key .lic::before{background:repeating-linear-gradient(90deg,#A9B4B8 0 3px,transparent 3px 8px)}.ro-key .own::before{background:var(--ink)}
/* --- How: the tide line --- */
#how{background:#0B2C38;color:#EAF2F8}#how h2{color:#fff}#how .lead{color:#C9DDE2}
.tide{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.tide::before{content:"";position:absolute;left:4%;right:4%;top:15px;height:4px;border-radius:4px;background:rgba(255,255,255,.14)}
.tide::after{content:"";position:absolute;left:4%;top:15px;height:4px;width:0;border-radius:4px;background:linear-gradient(90deg,var(--pearl),var(--marina),var(--coral),var(--manta));transition:width 2.2s cubic-bezier(.3,.7,.2,1)}
.tide.on::after{width:92%}
.tide li{position:relative;padding-top:46px}
.tide li::before{content:"";position:absolute;top:4px;left:0;width:26px;height:26px;border-radius:50%;background:#0B2C38;border:4px solid var(--c);box-shadow:0 0 0 6px #0B2C38}
.tide b{display:block;font:600 22px var(--serif);color:#fff;margin-bottom:6px}.tide p{color:#C9DDE2;font-size:15.5px}
.tide span{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:#0B2C38;background:var(--c);padding:3px 10px;border-radius:99px}
@media(max-width:820px){.tide{grid-template-columns:1fr;gap:26px}.tide::before,.tide::after{left:11px;right:auto;top:8px;bottom:8px;width:4px;height:auto}.tide::after{height:0;transition:height 2.2s}.tide.on::after{width:4px;height:calc(100% - 16px)}.tide li{padding:0 0 0 46px}}
@media(prefers-reduced-motion:reduce){.tide::after{transition:none}}
/* --- Trust --- */
#trust{background:var(--cream);padding-top:84px}
#trust .trustg>div{border-top:5px solid var(--marina)}#trust .trustg>div:nth-child(2){border-top-color:var(--coral)}#trust .trustg>div:nth-child(3){border-top-color:var(--horizon)}
/* --- FAQ --- */
#faq{background:var(--sand)}
/* --- Final: dawn over the lagoon, bookending the night --- */
.final{position:relative;overflow:hidden;background:linear-gradient(180deg,#0B2C38 0%,#3C5E8A 45%,#E9A07E 85%,#F6C79C 100%);padding:120px 0 140px}
.final .wrap{position:relative;z-index:1}.final h2{color:#fff}.final .lead{color:#F2EFEA}
.final-sun{position:absolute;left:50%;bottom:-170px;width:380px;height:380px;margin-left:-190px;border-radius:50%;background:radial-gradient(circle,#FFF0C2,#FFC07A 50%,rgba(255,170,110,0) 72%)}
@media(max-width:640px){#roSvg .ax{font-size:24px}#roSvg .ay{display:none}#roSvg .cl{font-size:30px}#roSvg .l{stroke-width:8}#roSvg .pt{stroke-width:6}.ro{padding:16px}}
.leak-pill{display:none}
@media(max-width:900px){.leak-pill{display:block;position:sticky;bottom:12px;justify-self:center;background:#0B2C38;color:#CFE6E7;border-radius:999px;padding:9px 18px;font-size:14.5px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}.leak-pill b{color:#fff;font:600 18px var(--serif)}}

/* Live demo: each agent's console takes on its own colour, so switching is obvious */
.see{transition:background-color .5s;background:radial-gradient(900px 480px at 50% 30%,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%),linear-gradient(170deg,#0B2C38,#0E3B4A 60%,#0B2A3A)}
#live{background:color-mix(in srgb,var(--c) 30%,#06161E);transition:background-color .45s;box-shadow:0 0 0 2px var(--c),0 40px 90px -40px var(--c)}
#live .c-top{background:var(--c);color:#fff;border-bottom:0;transition:background-color .45s}
#live .c-top .c-role{color:rgba(255,255,255,.85)}#live .c-top .c-state{background:rgba(255,255,255,.18);color:#fff}
#live .orb{box-shadow:0 0 0 3px rgba(255,255,255,.6)}
#live .c-chat{border-right-color:color-mix(in srgb,var(--c) 40%,transparent)}
#live .msg.bot{background:color-mix(in srgb,var(--c) 22%,#0A2029)}
#live .msg.user{background:#fff;color:var(--ink)}
#live .chips button{background:color-mix(in srgb,var(--c) 20%,#0A2029);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
#live .ask input{background:color-mix(in srgb,var(--c) 16%,#0A2029);border-color:color-mix(in srgb,var(--c) 45%,transparent)}
#live .c-dash{background:color-mix(in srgb,var(--c) 18%,#0A2029)}
#live .kpi div{background:color-mix(in srgb,var(--c) 30%,#06161E)}
#live .kpi b.bump{color:#fff;text-shadow:0 0 14px var(--c)}
#live .d-h span:first-child{color:#fff}

/* ===== Hero cards: a staircase rising out of the lagoon ===== */
.hstage{position:relative;margin-top:30px;padding-bottom:6px}
.hteam{align-items:end;margin-top:0;position:relative;z-index:1;gap:14px}
.hx{margin-top:calc((5 - var(--n)) * 26px);position:relative;transition:transform .25s ease-out,box-shadow .25s;transform-style:preserve-3d;will-change:transform;
  box-shadow:0 30px 50px -28px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06),0 0 46px -14px var(--c)}
.hx:hover{box-shadow:0 40px 70px -30px rgba(0,0,0,.95),0 0 0 2px var(--c),0 0 70px -10px var(--c)}
.hx .glare{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .25s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.28),transparent 45%)}
.hx:hover .glare{opacity:1}
.hx-a .orb{--s:30px;animation:breathe 3.6s ease-in-out infinite;animation-delay:calc(var(--n) * -.7s)}
@keyframes breathe{50%{box-shadow:0 0 0 2px rgba(255,255,255,.6),0 0 22px 4px rgba(255,255,255,.55)}}
.hx-live{display:flex;align-items:center;gap:8px;padding:10px 14px 0;font-size:13px;color:var(--ink2);min-height:2.6em;background:var(--paper)}
.hx-live i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 var(--c);animation:livep 1.8s infinite}
@keyframes livep{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hx-live span{transition:opacity .25s,transform .25s}.hx-live span.out{opacity:0;transform:translateY(4px)}
.hx-go{padding-top:6px!important}
.lagoon{position:absolute;left:-40px;right:-40px;bottom:-26px;height:70px;z-index:2;pointer-events:none;overflow:hidden}
.lagoon svg{position:absolute;left:0;bottom:0;width:200%;height:100%}
.lagoon .w1{fill:rgba(43,163,180,.38);animation:wave 9s linear infinite}
.lagoon .w2{fill:rgba(20,98,122,.75);animation:wave 6s linear infinite reverse}
.hnote{position:relative;z-index:2;text-align:center;font-size:12.5px;color:#9FC3C4;margin-top:34px}
@media(max-width:1000px){.hx{margin-top:0}}
@media(max-width:640px){.hx-live{grid-column:1;padding-top:4px}.lagoon{display:none}.hnote{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.hx-a .orb,.hx-live i,.lagoon path{animation:none}}
/* staircase by height: each level's dashboard window is taller, bottoms sit in the water */
.hx{margin-top:0}
.hx-d img{height:calc(70px + var(--n) * 18px)}
.hx-live{min-height:3.4em}
.lagoon{bottom:-22px;height:54px}
.lagoon .w1{fill:rgba(127,224,210,.28)}
.lagoon .w2{fill:#0D3846}
@media(max-width:1000px){.hx-d img{height:110px}}
@media(max-width:640px){.hx-d img{height:90px}.hx-live{min-height:0}}
.lagoon .w1{fill:rgba(127,224,210,.16)}
.hero2{padding-top:30px}.hnote{margin-top:26px}.hero2 .hcta{margin-top:18px}

/* ===================== Mobile & tablet polish ===================== */
.hero2{overflow:hidden}
.night-stage{height:calc(100vh - 68px);height:calc(100svh - 68px)}
.swipe{display:none}
/* comfortable tap targets everywhere */
.roi input[type=range]{height:32px}
.faq summary{padding:6px 0;min-height:44px;align-items:center}
.chips button{min-height:40px}
.hcta-alt{display:inline-block;padding:10px 6px}
.duel-q button,.ro-pick button,.tab{min-height:44px}
.fullcmp summary{padding:10px 0}
@media(max-width:860px){
  .night-stage{justify-content:flex-start;padding-top:18px}
  .night h2{font-size:22px}.clock{font-size:56px;margin:2px 0}
  .tally{grid-template-columns:repeat(4,1fr)}.tally div{padding:7px 9px}.tally dt{font-size:10.5px;line-height:1.25}.tally dd{font-size:19px}
  .night-feed{max-height:none;flex:1;min-height:0}
  .night-grid{flex:1;min-height:0;align-items:stretch;grid-template-rows:auto minmax(0,1fr)}
  .night-note{font-size:11.5px;margin:6px 0 10px;padding:0 16px}
}
@media(max-width:860px) and (max-height:700px){
  .night h2{display:none}.clock{font-size:46px}.night-sub{font-size:14px}
  .tally{margin-top:8px}.hours{margin-top:8px}.night-note{display:none}
}
/* phones on their side */
@media(max-height:500px) and (orientation:landscape){
  .night-stage{padding-top:10px}
  .night-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:none;gap:18px}
  .night h2{display:none}.clock{font-size:44px}.night-sub{font-size:13.5px}
  .tally{grid-template-columns:1fr 1fr;margin-top:8px}.tally dd{font-size:17px}
  .night-feed{max-height:calc(100svh - 150px)}
  .hours{margin-top:6px}.hlabels{font-size:11px}.night-note{display:none}
}
@media(max-width:600px){.swipe{display:block;text-align:center;font-size:13px;color:var(--mute);margin:14px 0 -6px}}
@media(max-width:420px){
  .nq{display:none}
  .wrap{padding:0 16px}
  #live .c-top{padding:12px 14px;gap:10px}#live .c-name{font-size:18px}#live .c-role{font-size:12px;line-height:1.35}
  #live .c-state{display:none}
  .log{padding:14px}.msg{max-width:92%;font-size:15px}
  .ask{padding:10px;gap:6px}.ask input{padding:11px 13px;font-size:16px}.ask button{padding:0 14px}.ask .vmic{width:42px}
  .chips{padding:0 12px 10px}.chips button{font-size:13px}
  .duel-side{padding:14px;min-height:0}.duel-log .b{font-size:14.5px}
  .tide b{font-size:20px}
  .final{padding:90px 0 120px}
}

/* The live dashboards, easy to find */
.hx-dash{display:block;margin:0;padding:9px 14px;background:var(--c);color:#fff;font-weight:700;font-size:13.5px;text-decoration:none;text-align:center;letter-spacing:.01em}
.hx-dash:hover{filter:brightness(1.08)}
.pa .dash-btn{background:var(--c);border-color:var(--c);color:#fff}
.dlive{display:block;text-align:center;background:var(--c);color:#fff;font-weight:700;font-size:14px;text-decoration:none;padding:10px 12px;border-radius:12px;box-shadow:0 10px 24px -12px var(--c)}
.dlive:hover{filter:brightness(1.1)}

/* ===================== Mobile & tablet polish ===================== */
.hero2{overflow:hidden}
.night-stage{height:calc(100vh - 68px);height:calc(100svh - 68px)}
.swipe{display:none}
.roi input[type=range]{height:32px}
.faq summary{padding:6px 0;min-height:44px;align-items:center}
.chips button{min-height:40px}
.hcta-alt{display:inline-block;padding:10px 6px}
.duel-q button,.ro-pick button,.tab{min-height:44px}
.fullcmp summary{padding:10px 0}
@media(max-width:860px){
  .night-stage{justify-content:flex-start;padding-top:18px}
  .night h2{font-size:22px}.clock{font-size:56px;margin:2px 0}
  .tally{grid-template-columns:repeat(4,1fr)}.tally div{padding:7px 9px}.tally dt{font-size:10.5px;line-height:1.25}.tally dd{font-size:19px}
  .night-grid{flex:1;min-height:0;align-items:stretch;grid-template-rows:auto minmax(0,1fr)}
  .night-feed{max-height:none;min-height:0}
  .night-note{font-size:11.5px;margin:6px 0 10px;padding:0 16px}
}
@media(max-width:860px) and (max-height:700px){
  .night h2{display:none}.clock{font-size:46px}.night-sub{font-size:14px}
  .tally{margin-top:8px}.hours{margin-top:8px}.night-note{display:none}
}
@media(max-height:500px) and (orientation:landscape){
  .night-stage{padding-top:10px;justify-content:flex-start}
  .night-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:none;gap:18px}
  .night h2{display:none}.clock{font-size:44px}.night-sub{font-size:13.5px;min-height:0}
  .tally{grid-template-columns:1fr 1fr;margin-top:8px}.tally dd{font-size:17px}
  .night-feed{max-height:calc(100svh - 150px)}
  .hours{margin-top:6px}.hlabels{font-size:11px}.night-note{display:none}
}
@media(max-width:600px){.swipe{display:block;text-align:center;font-size:13px;color:var(--mute);margin:14px 0 -6px}}
@media(max-width:420px){
  .nq{display:none}
  .wrap{padding:0 16px}
  #live .c-top{padding:12px 14px;gap:10px}#live .c-name{font-size:18px}#live .c-role{font-size:12px;line-height:1.35}
  #live .c-state{display:none}
  .log{padding:14px}.msg{max-width:92%;font-size:15px}
  .ask{padding:10px;gap:6px}.ask input{padding:11px 13px;font-size:16px}.ask button{padding:0 14px}.ask .vmic{width:42px}
  .chips{padding:0 12px 10px}.chips button{font-size:13px}
  .duel-side{padding:14px;min-height:0}.duel-log .b{font-size:14.5px}
  .tide b{font-size:20px}
  .final{padding:90px 0 120px}
}
.nav nav a{padding:10px 0}
.nav .btn{display:inline-block;white-space:nowrap}
.hx-dash{white-space:nowrap;font-size:13px;padding:8px 10px}

.hvoice{font-size:13px;color:#9FC3C4;margin-top:2px}
.cmp.pt tr.std td{background:color-mix(in srgb,var(--pearl) 8%,var(--paper))!important;font-weight:600}
.cmp.pt tr.up td{background:color-mix(in srgb,var(--marina) 9%,var(--paper))!important}
.cmp.pt tr.up td:last-child{font-weight:600;color:var(--marina)}
.price-notes{grid-template-columns:repeat(4,1fr)}@media(max-width:1000px){.price-notes{grid-template-columns:1fr 1fr}}@media(max-width:560px){.price-notes{grid-template-columns:1fr}}
.chk{display:flex!important;gap:10px;align-items:flex-start;font-weight:500}.chk input{width:20px;height:20px;margin-top:2px;flex:none}
.hvoice b{color:#fff}

/* Rock: the full team, all five in one */
:root{--rock:#3E5A63}
.hrock{position:relative;z-index:2;display:flex;align-items:center;gap:16px;margin:30px auto 0;max-width:900px;padding:14px 16px 14px 14px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);box-shadow:0 20px 40px -24px rgba(0,0,0,.8);backdrop-filter:blur(6px);text-align:left}
.rk-orb{flex:none;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8eef0,#8aa0a6 50%,#2f454c);box-shadow:0 0 0 3px rgba(255,255,255,.25),0 0 30px rgba(127,224,210,.35)}
.hrock-t{flex:1;min-width:0}.hrock-t b{display:block;font:600 22px var(--serif);color:#fff}.hrock-t b em{font-style:italic;color:#7FE0D2;font-weight:500}
.hrock-t span{display:block;color:#E6F2F2;font-size:15.5px}.hrock-t small{display:block;color:#9FC3C4;font-size:12.5px;margin-top:2px}
.hrock .btn{background:#fff;color:var(--ink);border-color:#fff;flex:none}
@media(max-width:640px){.hrock{flex-wrap:wrap;order:2;margin-top:16px}.hrock .btn{width:100%}.hero2 .hteam{order:3}.hero2 .hnote{order:4}.hero2 .trust{order:5}}

/* ---- Rock: premium "boss" look — midnight ink, five-colour ring, champagne hairline ---- */
@property --rka{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--rock:#18203A;--gold:#D9BE82;--five:conic-gradient(from var(--rka),var(--pearl),var(--marina),var(--coral),var(--manta),var(--horizon),var(--pearl))}
@keyframes rkspin{to{--rka:360deg}}
.rk-orb{border:3px solid transparent;background:radial-gradient(circle at 34% 28%,#5A6A93,#1C2544 52%,#0B1022) padding-box,var(--five) border-box;box-shadow:0 0 0 1px rgba(217,190,130,.55),0 0 26px rgba(120,140,255,.28);animation:rkspin 9s linear infinite}
.hrock{background:linear-gradient(140deg,#1B2442,#0F1529 70%);border:1px solid rgba(217,190,130,.5);box-shadow:0 26px 50px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(217,190,130,.35)}
.hrock::before{content:"";position:absolute;inset:-2px;border-radius:20px;z-index:-1;background:var(--five);filter:blur(14px);opacity:.38;animation:rkspin 9s linear infinite}
.hrock-t b em{color:var(--gold)}
.hrock-t small{color:#A9B3CF}
.hrock .btn{background:var(--gold);border-color:var(--gold);color:#141A2E}
.hrock .btn:hover{background:#E6CF9A}
.cmp.pt th.rk{border-top:3px solid var(--gold)}
.cmp.pt th.rk .orb,.ro-pick button.rk .orb{background:radial-gradient(circle at 34% 28%,#5A6A93,#1C2544 55%) padding-box,var(--five) border-box;border:2px solid transparent}
.ro-pick button.rk[aria-selected=true]{box-shadow:inset 0 0 0 1px var(--gold)}
@media (prefers-reduced-motion:reduce){.rk-orb,.hrock::before{animation:none}}

/* ---- action verbs on agent cards ---- */
.hx .rl{font-weight:700;letter-spacing:.01em}
.hx .sub{display:block;font-size:12px;line-height:1.3;color:var(--ink2);opacity:.85;margin-top:2px}
.hx-a .sub{color:rgba(255,255,255,.78)}
.pa .who .vb{display:block;font-weight:700;color:var(--c);font-size:14.5px}
.pa .who .sb{display:block;font-size:13px;color:var(--mute)}
.card .ol{margin:4px 0 2px;padding-left:18px}
.hx .rl{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.hx .rl i{font-style:normal;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);white-space:nowrap}

/* ---- Reef teaser band on the homepage ---- */
.reef-band{background:#0B2530;color:#E8F4F2;padding:56px 0}
.reef-band-in{display:flex;align-items:center;justify-content:space-between;gap:32px}
.reef-band h2{color:#fff;font-size:clamp(28px,3.4vw,40px);margin:4px 0 12px}
.reef-band p{color:#BFD8D5;max-width:62ch}
.reef-band-mark{font:600 19px var(--serif);color:#9FE3D6!important;display:flex;align-items:center;gap:9px}
.reef-band-mark::before{content:"";width:18px;height:18px;border-radius:50% 50% 50% 7px;background:#F0607A}
.btn.reef-band-btn{background:#9FE3D6;border-color:#9FE3D6;color:#0B2530;flex:none}
@media(max-width:760px){.reef-band-in{flex-direction:column;align-items:flex-start}}
/* Reef link stays visible on phones */
@media(max-width:900px){.nav nav{display:flex;margin-left:auto;gap:0}.nav nav a{display:none}.nav nav a.nav-reef{display:inline-block;font-weight:600;color:var(--ink);padding:6px 10px;margin-right:6px;border:1px solid rgba(15,148,136,.35);border-radius:999px;font-size:14px}.nav .btn{margin-left:0}}
/* simple pricing */
.pc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}
.pc{position:relative;background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--c);border-radius:18px;padding:22px 20px 20px;display:flex;flex-direction:column}
.pc-badge{position:absolute;top:-13px;left:18px;background:var(--c);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.pc-name{display:flex;align-items:center;gap:10px;font:600 24px var(--serif)}
.pc-name .orb{width:16px;height:16px;border-radius:50%;background:var(--c);flex:none}
.pc-role{color:var(--ink2);font-size:14px;margin-top:2px}
.pc-price{margin:14px 0 10px}.pc-price b{font:700 40px var(--serif);color:var(--ink)}.pc-price span{color:var(--ink2);margin-left:6px}
.pc ul{list-style:none;padding:0;margin:0 0 16px;flex:1}.pc li{font-size:14.5px;color:var(--ink2);padding:5px 0;border-top:1px solid var(--line)}
.pc-rock{background:var(--rock,#18203A);border-color:var(--rock,#18203A);border-top-color:var(--gold,#D9BE82);color:#F3EEE2}
.pc-rock .pc-name,.pc-rock .pc-price b{color:#fff}.pc-rock .pc-role,.pc-rock li,.pc-rock .pc-price span{color:#C9C3B4}.pc-rock li{border-color:rgba(217,190,130,.25)}
.pc-rock .pc-badge{background:var(--gold,#D9BE82);color:#18203A}.pc-rock .pc-name .orb{background:var(--five,conic-gradient(#0F9488,#1D6FC0,#E0553C,#B7791F,#6B4FC2,#0F9488))}
.pc-rock .btn{background:var(--gold,#D9BE82);color:#18203A;border-color:var(--gold,#D9BE82)}
.pc-incl{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.pc-incl div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14px;color:var(--ink2)}.pc-incl b{display:block;color:var(--ink);margin-bottom:2px}
.pc-own{margin-top:18px;color:var(--ink2)}
.pc-more{margin-top:26px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 18px}
.pc-more>summary{cursor:pointer;font-weight:700;color:var(--ink)}
.pc-more[open]>summary{margin-bottom:10px}
@media(max-width:980px){.pc-grid{grid-template-columns:1fr 1fr}.pc-incl{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pc-grid{grid-template-columns:1fr}.pc-incl{grid-template-columns:1fr}}

/* benefit-first agent cards */
.pair .win{font:600 20px/1.25 var(--serif);color:var(--ink);margin:12px 0 0}
.pair .gains{list-style:none;margin:10px 0 12px;padding:0;display:grid;gap:6px}
.pair .gains li{position:relative;padding-left:24px;font-size:15px;color:var(--ink2);line-height:1.45}
.pair .gains li::before{content:"✓";position:absolute;left:0;top:0;color:var(--c);font-weight:700}

/* Reef card under Rock in the hero: the magic one */
.hrock.hreef{margin-top:14px;backdrop-filter:none;border:2px solid transparent;background:linear-gradient(140deg,#0E3540,#061A20 70%) padding-box,conic-gradient(from var(--rfa),#7FE0D2,#6FB8FF,#C9A7FF,#FF9FB8,#FFE3A3,#7FE0D2) border-box;animation:rfglow 6s linear infinite,rfhalo 6s linear infinite}
.hrock.hreef::before{display:none}
@keyframes rfhalo{0%,100%{box-shadow:0 0 34px -2px rgba(127,224,210,.55),0 26px 50px -24px rgba(0,0,0,.9)}25%{box-shadow:0 0 34px -2px rgba(111,184,255,.55),0 26px 50px -24px rgba(0,0,0,.9)}50%{box-shadow:0 0 34px -2px rgba(201,167,255,.55),0 26px 50px -24px rgba(0,0,0,.9)}75%{box-shadow:0 0 34px -2px rgba(255,159,184,.5),0 26px 50px -24px rgba(0,0,0,.9)}}
.hrock.hreef::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 46%,rgba(200,255,248,.28) 50%,rgba(255,255,255,.16) 54%,transparent 70%) no-repeat;background-size:250% 100%;background-position:150% 0;animation:rfshine 4.5s ease-in-out infinite}
@property --rfa{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes rfglow{to{--rfa:360deg}}
@keyframes rfshine{0%,35%{background-position:150% 0}75%,100%{background-position:-60% 0}}
.rf-orb{position:relative;flex:none;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#E6FFFB,#7FE0D2 22%,#1E8C84 55%,#06302F);box-shadow:0 0 0 2px rgba(160,240,228,.6),0 0 30px rgba(127,224,210,.6);animation:rfpulse 3s ease-in-out infinite}
.rf-orb::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(127,224,210,.55);animation:rfring 3s ease-out infinite}
@keyframes rfpulse{50%{box-shadow:0 0 0 2px rgba(200,255,248,.8),0 0 46px rgba(127,224,210,.9)}}
@keyframes rfring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.45);opacity:0}}
.rf-sparks{position:absolute;inset:0;pointer-events:none;z-index:1}
.rf-sparks i{position:absolute;width:10px;height:10px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 6px #9FF0E4);opacity:0;animation:rftwinkle 2.8s ease-in-out infinite}
.rf-sparks i:nth-child(1){left:3%;top:-6px;animation-delay:0s}
.rf-sparks i:nth-child(2){left:28%;bottom:-5px;width:8px;height:8px;animation-delay:.6s}
.rf-sparks i:nth-child(3){left:52%;top:-5px;width:12px;height:12px;animation-delay:1.3s}
.rf-sparks i:nth-child(4){right:22%;bottom:-6px;animation-delay:1.9s}
.rf-sparks i:nth-child(5){right:-5px;top:30%;width:8px;height:8px;animation-delay:.9s}
.rf-sparks i:nth-child(6){left:-5px;bottom:28%;width:7px;height:7px;animation-delay:2.3s}
.rf-sparks i:nth-child(7){left:78%;top:-7px;width:9px;height:9px;animation-delay:1.6s}
@keyframes rftwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}60%{opacity:.8}}
.hreef .hrock-t{position:relative;z-index:2}
.hreef .hrock-t b em{color:#9FF0E4;text-shadow:0 0 14px rgba(127,224,210,.6)}
.hreef .hrock-t small{color:#A9D2D0}
.hrock.hreef .btn{position:relative;z-index:2;background:linear-gradient(120deg,#7FE0D2,#A8E6FF);border-color:#9FF0E4;color:#06252A;box-shadow:0 0 22px rgba(127,224,210,.45)}
.hrock.hreef .btn:hover{background:linear-gradient(120deg,#A8EDE3,#CFF1FF)}
@media (prefers-reduced-motion:reduce){.hrock.hreef,.hrock.hreef::before,.hrock.hreef::after,.rf-orb,.rf-orb::after,.rf-sparks i{animation:none}.rf-sparks i{opacity:.7;transform:none}.hrock.hreef::after{display:none}}
.hreef .hrock-t span+span{margin-top:8px}
.hreef .hrock-t strong{color:#fff;font-weight:700}
@media(max-width:640px){.hrock .rk-orb,.hrock .rf-orb{width:40px;height:40px}.hrock .hrock-t{flex:1 1 100%}.hrock-t span{font-size:15px}}
.hrock-t span strong{color:#fff;font-weight:700}

/* Insights (dashboard) showcase under Reef */
.hrock.hdash{display:block;margin-top:14px;padding:20px;backdrop-filter:none;border:1px solid rgba(255,190,140,.55);background:linear-gradient(140deg,#3A2430,#1A1424 70%);box-shadow:0 0 40px -6px rgba(255,150,110,.28),0 26px 50px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,200,160,.35)}
.hrock.hdash::before{display:none}
.ds-head{display:flex;gap:16px;align-items:flex-start}
.ds-orb{flex:none;width:52px;height:52px;border-radius:14px;display:flex;align-items:flex-end;justify-content:center;gap:5px;padding:10px 9px;background:linear-gradient(160deg,#4A2E3A,#22172A);box-shadow:0 0 0 2px rgba(255,190,140,.45),0 0 26px rgba(255,160,120,.3)}
.ds-orb i{display:block;width:8px;border-radius:3px 3px 1px 1px;background:linear-gradient(#FFD3A8,#FF8E74);transform-origin:bottom;animation:dsbar 3.2s ease-in-out infinite}
.ds-orb i:nth-child(1){height:40%}.ds-orb i:nth-child(2){height:75%;animation-delay:.4s}.ds-orb i:nth-child(3){height:55%;animation-delay:.8s}
@keyframes dsbar{50%{transform:scaleY(.65)}}
.ds-title{display:block;font:600 22px var(--serif);color:#fff}.ds-title em{font-style:italic;font-weight:500;color:#FFC39A}
.ds-lead{margin:4px 0 0;color:#F1E4E2;font-size:15.5px;line-height:1.5}.ds-lead strong{color:#fff}
.ds-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;margin-top:16px}
.ds-panel{margin:0;background:#140F1C;border:1px solid rgba(255,200,170,.18);border-radius:14px;padding:12px;min-width:0}
.ds-ptop{display:flex;justify-content:space-between;font-size:12px;color:#C9B3B8;margin-bottom:8px}.ds-ptop em{font-style:normal;color:#7FE0D2}
.ds-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ds-kpis div{background:rgba(255,255,255,.05);border-radius:10px;padding:8px}
.ds-kpis span{display:block;font-size:11px;color:#C9B3B8;line-height:1.25}
.ds-kpis b{display:block;font-size:19px;color:#fff;font-variant-numeric:tabular-nums;margin-top:2px}
.ds-kpis i{display:block;font-style:normal;font-size:11px;color:#A8949A}.ds-kpis i.up{color:#7FE0D2}
.ds-chart{margin-top:8px;background:rgba(255,255,255,.03);border-radius:10px;padding:8px 8px 4px}
.ds-ch{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11.5px;color:#C9B3B8}.ds-acc{color:#FFD38A}
.ds-chart svg{display:block;width:100%;height:auto}
.ds-band{fill:rgba(255,195,154,.18)}.ds-today{stroke:rgba(255,255,255,.25);stroke-dasharray:3 3}
.ds-past{fill:none;stroke:#7FE0D2;stroke-width:2.2;stroke-linejoin:round}
.ds-fc{fill:none;stroke:#FFC39A;stroke-width:2.2;stroke-dasharray:5 4;stroke-linejoin:round}
.ds-lbl{fill:#A8949A;font-size:9px}
.ds-finds{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.ds-finds li{display:flex;align-items:baseline;gap:8px;font-size:13px;color:#F3E6E4;background:rgba(255,255,255,.04);border:1px solid rgba(255,200,170,.14);border-radius:9px;padding:6px 9px}
.ds-finds em{flex:none;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px}
.ds-finds em.act{background:#FF8E74;color:#2A1018}.ds-finds em.win{background:#7FE0D2;color:#06252A}.ds-finds em.watch{background:#FFD38A;color:#2E2108}
.ds-sig{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.ds-sig li{background:rgba(255,255,255,.05);border:1px solid rgba(255,200,170,.18);border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.45;color:#E9D9D7}
.ds-sig b{display:block;color:#FFC39A;font-size:14.5px;margin-bottom:3px}
.ds-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.ds-foot small{color:#C9B3B8;font-size:12.5px}
.hrock.hdash .btn{flex:none;background:#FFC39A;border-color:#FFC39A;color:#2A1018}
.hrock.hdash .btn:hover{background:#FFD6B8}
@media(max-width:900px){.ds-body{grid-template-columns:1fr}}
@media(max-width:640px){.hrock.hdash{padding:16px}.ds-orb{width:40px;height:40px;padding:7px}.ds-kpis{grid-template-columns:1fr 1fr}.ds-sig{grid-template-columns:1fr}.ds-foot{flex-direction:column;align-items:stretch}.hrock.hdash .btn{width:100%;text-align:center}}
@media (prefers-reduced-motion:reduce){.ds-orb i{animation:none}}
.pp-band{display:inline-block;margin:14px auto 0;padding:10px 16px;border-radius:12px;background:rgba(127,224,210,.12);border:1px solid rgba(127,224,210,.45);font-size:15.5px;max-width:100%}.pp-band a{font-weight:600;white-space:nowrap}
.ds-sig li.ds-exec{grid-column:1/-1;background:linear-gradient(120deg,rgba(255,195,154,.16),rgba(127,224,210,.12));border-color:rgba(255,195,154,.5)}.ds-sig li.ds-exec b{display:inline;color:#fff}.ds-sig li.ds-exec>b:first-child{display:block;color:#FFC39A}
/* Who it helps / How it helps */
.hx .hw{display:block;font-size:11px;letter-spacing:.04em;margin-top:4px;color:var(--ink2)}
.hx .hw b{color:var(--c);font-weight:700}
.hx-a .hw{color:rgba(255,255,255,.75)}.hx-a .hw b{color:#fff}
.hh{display:grid;grid-template-columns:auto 1fr;gap:14px;margin:12px 0 4px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--c) 9%,transparent);border-left:3px solid var(--c)}
.hh small{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.hh b{font-size:15px;white-space:nowrap}.hh span{font-size:14px;line-height:1.35}
@media (max-width:560px){.hh{grid-template-columns:1fr;gap:8px}.hh b{white-space:normal}}
.pc-who{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.pc-who b{color:var(--c)}
.pc-rock .pc-who{color:#C9C3B4}.pc-rock .pc-who b{color:#E9CF95}
.pc-save{display:inline-block;margin:2px 0 6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:rgba(233,207,149,.16);color:#E9CF95}
.hk-who{display:block;font-style:normal;font-size:12px;letter-spacing:.04em;color:#A9D2D0;margin:2px 0 6px}
.hrock-t .hk-who b{display:inline;font:700 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#fff}
/* Level cards: who gains, and how */
.pr{display:flex;flex-direction:column;background:color-mix(in srgb,var(--c) 22%,var(--paper))}
.pr .pd{background:transparent}
.pv{margin:0 16px 16px;padding:14px 16px;border-radius:12px;background:var(--paper);border:1px solid color-mix(in srgb,var(--c) 35%,var(--line))}
.pv small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:700;margin-bottom:8px}
.pv ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pv li{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:baseline}
.pv li b{font-size:13px;font-weight:700;color:var(--ink)}
.pv li span{font-size:14px;color:var(--ink2);line-height:1.45}
@media(max-width:560px){.pv li{grid-template-columns:1fr;gap:2px}}
/* Hero introduction: one level at a time, arriving from the back of the screen and drifting off left */
.intro{position:relative;z-index:1;max-width:1040px;margin:0 auto}
.ic-stage{display:grid;perspective:1500px;perspective-origin:50% 40%}
.ic{grid-area:1/1;display:grid;grid-template-columns:1.05fr 1fr;border-radius:20px;overflow:hidden;background:var(--paper);box-shadow:0 40px 80px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06);opacity:0;pointer-events:none;transform:translate3d(0,40px,-600px) scale(.62);filter:blur(8px);transform-origin:50% 60%}
.ic.on{pointer-events:auto;animation:icIn 1.05s cubic-bezier(.16,.84,.24,1) forwards}
.ic.off{animation:icOut 1s cubic-bezier(.55,0,.8,.35) forwards}
@keyframes icIn{0%{opacity:0;transform:translate3d(0,40px,-600px) scale(.62);filter:blur(8px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes icOut{0%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:translate3d(-75%,0,-260px) rotateY(20deg) scale(.86);filter:blur(5px)}}
.ic-a{background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 72%,#071a20));color:#fff;padding:26px 28px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ic-k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.85)}
.ic-h{display:flex;align-items:center;gap:12px;margin:0;font:500 clamp(28px,3.4vw,40px)/1.05 var(--serif);color:#fff}
.ic-h b{font-weight:700}
.ic-h .orb{--s:44px;box-shadow:0 0 0 2px rgba(255,255,255,.55);animation:breathe 3.6s ease-in-out infinite}
.ic-w{margin:2px 0 0;font:600 clamp(18px,1.7vw,22px)/1.3 var(--serif);color:#fff;text-wrap:balance}
.ic-g{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:7px}
.ic-g li{position:relative;padding-left:24px;font-size:15px;line-height:1.4;color:rgba(255,255,255,.92)}
.ic-g li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:#fff}
.ic-live{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:13px;color:rgba(255,255,255,.85);min-height:1.5em}
.ic-live i{flex:none;width:8px;height:8px;border-radius:50%;background:#fff;animation:livep 1.8s infinite}
.ic-live span{transition:opacity .25s,transform .25s}.ic-live span.out{opacity:0;transform:translateY(4px)}
.ic-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.ic-acts .btn{background:#fff;color:var(--c);border-color:#fff}
.ic-acts .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.ic-d{display:flex;flex-direction:column;border:0;padding:0;margin:0;font:inherit;text-align:left;cursor:zoom-in;background:color-mix(in srgb,var(--c) 12%,var(--paper));min-width:0}
.ic-d img{display:block;width:100%;height:100%;max-height:360px;min-height:240px;object-fit:cover;object-position:top;flex:1}
.ic-d span{display:block;padding:10px 16px;font:600 15px var(--serif);color:var(--c);border-top:1px solid color-mix(in srgb,var(--c) 25%,var(--line))}
.ic-nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:16px}
.ic-dot{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:4px 2px;cursor:pointer;font:600 12.5px var(--sans,inherit);color:rgba(255,255,255,.65)}
.ic-dot i{position:relative;display:block;width:44px;height:4px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
.ic-dot i::after{content:"";position:absolute;inset:0;width:0;background:var(--c)}
.ic-dot.cur{color:#fff}
.ic-dot.cur i::after{animation:icBar var(--t,5200ms) linear forwards}
.intro.held .ic-dot.cur i::after,.intro.paused .ic-dot.cur i::after{animation-play-state:paused}
@keyframes icBar{to{width:100%}}
.ic-pause{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:99px;width:30px;height:30px;font-size:11px;cursor:pointer}
.ic-dot:focus-visible,.ic-pause:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
@media(max-width:760px){.ic{grid-template-columns:1fr}.ic-a{padding:20px}.ic-d img{max-height:200px;min-height:160px}.ic-dot i{width:34px}}
@media(prefers-reduced-motion:reduce){.ic,.ic.on,.ic.off{animation:none;filter:none;transform:none}.ic.on{opacity:1}.ic.off{opacity:0}.ic-dot.cur i::after{animation:none;width:100%}}
/* Licence or Buy it: two options side by side */
.cmp.two-way{margin-top:16px;font-size:15px;min-width:560px}
.cmp.two-way th small{display:block;font:400 12.5px var(--sans);color:var(--mute)}
.cmp.two-way td:first-child{font-weight:600;color:var(--ink)}
.two-note{margin-top:10px;font-size:14px;color:var(--ink2)}
/* Pricing: Reef shown below the levels, set apart as a separate product */
.pc-reef{margin-top:22px;border-radius:20px;padding:24px;background:radial-gradient(700px 300px at 90% 0,#14404F 0,transparent 70%),#0B2530;color:#DCEFEC;border:1px solid rgba(127,224,210,.35);box-shadow:0 0 0 4px rgba(127,224,210,.08),0 24px 50px -30px rgba(0,0,0,.6)}
.pc-reef-tag{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#0B2530;background:#7FE0D2;padding:4px 10px;border-radius:99px}
.pc-reef-h h3{margin:10px 0 4px;font:600 26px var(--serif);color:#fff}.pc-reef-h h3 em{font-style:italic;font-weight:500;color:#9FF0E4}
.pc-reef-h p{margin:0;max-width:68ch;color:#BFD8D5;font-size:15px}
.pc-reef-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.pc-reef-grid>div{display:flex;flex-direction:column;gap:4px;border:1px solid rgba(127,224,210,.25);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.03)}
.pc-reef-grid b{font:600 17px var(--serif);color:#fff}
.pr-amt{font:600 26px var(--serif);color:#fff}.pr-amt small{font:400 13px var(--sans);color:#9FC3C4;margin-left:2px}
.pr-what{font-size:14px;color:#BFD8D5}.pr-buy{margin-top:4px;font-size:13px;color:#9FF0E4}
.pc-reef-f{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:#BFD8D5}
.pc-reef-f .btn{background:#7FE0D2;color:#0B2530;border-color:#7FE0D2}
@media(max-width:700px){.pc-reef{padding:18px}.pc-reef-grid{grid-template-columns:1fr}}