/* Layout: one tall voyage down the page. Dark sea world, single theme by choice: a lantern-gold accent,
   voxel island art as the only illustration, and the stats mock as the centrepiece spanning the full width. */
:root{
  --sea:#0D1B24; --sea-2:#122A34; --surface:#163440; --surface-2:#1C4150;
  --ink:#F4F1E8; --ink-2:#B9C6C4; --ink-3:#8CA0A3;
  --gold:#F2B84B; --gold-ink:#10222B; --wave:#2B7A8A; --wave-2:#1F6473; --wave-3:#164B58;
  --display:"Fredoka","SF Pro Rounded",ui-rounded,system-ui,sans-serif;
  --body:"Nunito","SF Pro Text",-apple-system,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--sea);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--sea)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-0.01em}
h1{font-size:clamp(56px,11vw,128px);font-weight:700;letter-spacing:-0.02em}
h2{font-size:clamp(30px,4.5vw,46px)}
h3{font-size:22px}
p{margin:0}
a{color:var(--gold)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--ink-2)}
.lead{font-size:clamp(18px,2vw,21px);max-width:38rem;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:26px;border:0;font:600 17px var(--body);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold:hover{background:#FFC965}
.btn-glass{background:rgba(255,255,255,0.10);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14)}
.btn:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:rgba(13,27,36,0.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,0.06)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);text-decoration:none}
.brand img{width:40px;height:24px}
.nav .btn{height:40px;padding:0 18px;font-size:15px;border-radius:20px}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:64px 0}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:40px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero h1 span{display:block;font-size:clamp(22px,0.3em,40px);font-weight:600;letter-spacing:0.02em;color:var(--gold);margin-top:6px}
.form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.form input{flex:1 1 220px;min-width:0;height:52px;border-radius:26px;border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.06);color:var(--ink);padding:0 20px;font:400 17px var(--body)}
.form input::placeholder{color:var(--ink-3)}
.fine{font-size:13px;color:var(--ink-3)}
.thanks{display:none;padding:16px 20px;border-radius:18px;background:rgba(242,184,75,0.12);box-shadow:inset 0 0 0 1px rgba(242,184,75,0.35);max-width:520px}
.thanks strong{font-family:var(--display);font-size:20px;display:block;margin-bottom:4px}
.form-wrap.done .form{display:none}
.form-wrap.done .thanks{display:block}

/* flight scene (hero art) */
.scene{position:relative;aspect-ratio:9/13;max-width:100%;width:min(100%,420px);margin:0 auto;border-radius:44px;overflow:hidden;background:linear-gradient(180deg,#1B2B45 0%,#2E4F6B 36%,#4E8CA0 52%,#1E5F6E 54%,#123E4C 100%);box-shadow:0 30px 80px rgba(0,0,0,0.45),inset 0 0 0 1px rgba(255,255,255,0.12)}
.vox{position:absolute;left:0;height:60%;overflow:visible;will-change:transform}
.vox svg{display:block;height:100%;width:auto}
.vox-far{animation:vox-far 26s linear infinite}
@keyframes vox-far{from{transform:translateX(0)}to{transform:translateX(-112px)}}
.vox-mid{animation:vox-mid 16s linear infinite}
@keyframes vox-mid{from{transform:translateX(0)}to{transform:translateX(-168px)}}
.vox-near{animation:vox-near 10s linear infinite}
@keyframes vox-near{from{transform:translateX(0)}to{transform:translateX(-220px)}}
.vox-deep{animation:vox-deep 7s linear infinite}
@keyframes vox-deep{from{transform:translateX(0)}to{transform:translateX(-240px)}}
.vox-shadow{position:absolute;left:38%;top:61%;width:56px;height:24px;opacity:0.38;animation:shadowbob 2.4s ease-in-out infinite}
.vox-shadow i{position:absolute;top:0;height:8px;background:#0A2630;display:block}
@keyframes shadowbob{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(3px) scaleX(0.92)}}
.fly-water{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.fly-water-in{position:absolute;left:0;top:0;width:420px;height:607px;transform-origin:0 0;transform:scale(var(--fly-scale,0.72))}
.frame.fly>*:not(.fly-water){position:relative;z-index:1}
.scene .isle{position:absolute;opacity:0.6;animation:drift 26s linear infinite}
.scene .bird{position:absolute;left:14%;top:36%;width:62%;animation:bob 2.4s ease-in-out infinite}
.scene .hud{position:absolute;left:16px;right:16px;top:18px;display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:700}
.scene .pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;background:rgba(16,34,43,0.6);backdrop-filter:blur(10px)}
.scene .bar{position:absolute;left:16px;right:16px;top:60px;height:4px;border-radius:2px;background:rgba(255,255,255,0.2)}
.scene .bar i{display:block;height:4px;width:28%;border-radius:2px;background:var(--gold)}
.scene .clock{position:absolute;left:18px;bottom:22px;font-family:var(--display);font-size:38px;font-weight:600;line-height:1;text-shadow:0 2px 10px rgba(0,0,0,0.35);font-variant-numeric:tabular-nums}
.scene .clock small{display:block;font:400 12px var(--body);color:#D9E1DF;margin-top:4px}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* sections */
.section{padding-block:96px}
.section-head{display:flex;flex-direction:column;gap:14px;max-width:44rem}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:var(--surface);border-radius:24px;padding:28px}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2)}

/* stats (example week, built in HTML/CSS) */
.stats-section{background:linear-gradient(180deg,var(--sea) 0%,var(--sea-2) 100%)}
.stats-mock{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:18px;padding:22px;border-radius:32px;background:radial-gradient(ellipse at 30% 20%,#1C4650 0%,#0F2530 62%,#0C1C25 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08),0 30px 80px rgba(0,0,0,0.35)}
.sm-panel{background:rgba(255,255,255,0.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);border-radius:22px;padding:20px;min-width:0}
.sm-h{font:600 18px var(--display);margin-bottom:14px}
.sm-week{display:flex;flex-direction:column;gap:14px}
.sm-toggle{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:22px;background:rgba(255,255,255,0.07);font-weight:700;font-size:15px;text-align:center}
.sm-toggle span{padding:8px 4px;border-radius:18px}
.sm-toggle .on{background:var(--gold);color:var(--gold-ink)}
.sm-period{display:flex;align-items:center;justify-content:space-between;color:var(--ink-2);padding:0 6px}
.sm-period b{color:var(--ink);font-size:16px}
.sm-total{font:700 clamp(30px,4vw,44px) var(--display);line-height:1;font-variant-numeric:tabular-nums}
.sm-total small{font:600 16px var(--body);color:var(--ink-2);margin-left:6px}
.sm-bars{position:relative;flex:1 1 auto;min-height:220px;display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(8px,2vw,22px);align-items:end;padding:28px 4px 0}
.sm-bars>div{height:100%;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.sm-bars>div>span{position:relative;flex:1 1 auto;width:min(100%,46px)}
.sm-bars>div i{position:absolute;left:0;right:0;bottom:0;display:block;background:var(--gold);border-radius:6px 6px 2px 2px}
.sm-bars>div em{font-style:normal;font-size:13px;font-weight:700;color:var(--ink-3);line-height:18px}
.sm-bars .sel b{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-6px);white-space:nowrap;font-size:12px;font-weight:700;background:var(--ink);color:var(--gold-ink);padding:3px 8px;border-radius:8px}
.sm-grid{position:absolute;left:0;right:0;top:28px;border-top:2px dotted rgba(255,255,255,0.18)}
.sm-grid i{position:absolute;left:0;top:-22px;font:700 12px var(--body);font-style:normal;color:var(--ink-3)}
.sm-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.sm-sessions{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
.sm-sessions b{display:block;font:700 26px var(--display);line-height:1.1}
.sm-sessions span{font-size:14px;color:var(--ink-2)}
.sm-tags{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.sm-tags li{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:15px}
.sm-tags li span:last-of-type{color:var(--ink-2);font-variant-numeric:tabular-nums}
.sm-tags li i{grid-column:1/-1;height:6px;border-radius:3px;background:var(--gold);box-shadow:0 0 0 0 transparent;position:relative}
.sm-tags li{background-image:linear-gradient(rgba(255,255,255,0.10),rgba(255,255,255,0.10));background-repeat:no-repeat;background-size:100% 6px;background-position:0 100%}
.sm-hours{height:110px;display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;border-bottom:1px solid rgba(255,255,255,0.12)}
.sm-hours i{display:block;background:rgba(242,184,75,0.75);border-radius:3px 3px 0 0}
.sm-axis{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:8px}
.sm-log ul{list-style:none;margin:0;padding:0}
.sm-log li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-top:1px solid rgba(255,255,255,0.08);font-size:15px}
.sm-log li:first-child{border-top:0;padding-top:0}
.sm-log li span:nth-child(2){font-weight:700;font-variant-numeric:tabular-nums}
.sm-log em{grid-column:1/-1;font-style:normal;font-size:13px;color:var(--ink-3)}
.chart-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.chart-notes div{padding:20px 22px;border-radius:20px;background:rgba(255,255,255,0.05)}
.chart-notes b{display:block;font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:4px}
.chart-notes p{color:var(--ink-2);font-size:15px}

/* phones */
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:44px;align-items:start}
.phone{display:flex;flex-direction:column;gap:16px;min-width:0}
.frame{position:relative;aspect-ratio:9/19;width:100%;max-width:320px;margin:0 auto;border-radius:40px;background:var(--sea);box-shadow:0 20px 60px rgba(0,0,0,0.45),inset 0 0 0 1px rgba(255,255,255,0.12);overflow:hidden;padding:46px 16px 16px;display:flex;flex-direction:column;gap:12px}
.frame .t{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.1}
.frame .s{font-size:12px;color:var(--ink-2)}
.frame .art{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.frame .art img{max-height:100%;width:auto;max-width:92%}
.frame .row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,0.08);font-size:13px}
.frame .row img{width:36px;height:36px;object-fit:contain}
.frame .cta{height:44px;border-radius:22px;background:var(--gold);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;font:600 15px var(--body)}
.frame .note{font-size:12px;color:var(--ink-2);background:rgba(255,255,255,0.06);padding:10px 12px;border-radius:14px;line-height:1.4}
.step{display:flex;flex-direction:column;gap:6px;padding:0 8px}
.step b{font-family:var(--display);font-size:20px;font-weight:600}
.step p{color:var(--ink-2);font-size:15px}
.frame .caps{text-transform:uppercase;letter-spacing:0.12em;font-weight:700;margin-bottom:4px}
.frame .big{font:700 30px var(--display);line-height:1.1}
.frame .cta{gap:8px}
.frame .cta.ghost{background:rgba(255,255,255,0.08);color:var(--ink)}
.frame .art .perch{position:absolute;left:56%;top:40%;width:18%;max-width:none}
.dial{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.dial svg{height:100%;max-height:250px;width:auto;max-width:100%;aspect-ratio:1}
.dial img{position:absolute;left:50%;top:44%;width:40%;max-width:120px;transform:translate(-50%,-50%)}
.dial-min{position:absolute;left:0;right:0;top:66%;text-align:center;font:700 22px var(--display)}
.dial-min small{font:600 12px var(--body);color:var(--ink-2);margin-left:4px}
.presets{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.presets span{height:32px;border-radius:16px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.presets .on{background:var(--gold);color:var(--gold-ink)}
.frame .field{height:40px;border-radius:12px;box-shadow:inset 0 0 0 2px var(--gold);display:flex;align-items:center;padding:0 12px;font-size:14px;background:rgba(255,255,255,0.04)}
.frame.fly{--fly-scale:0.76;position:relative;background:linear-gradient(180deg,#1B2B45 0%,#2E4F6B 34%,#3F7F92 46%,#1E5F6E 48%,#164B58 70%,#123E4C 100%);padding-top:40px}
.fly-top{display:flex;justify-content:space-between;gap:6px;font-size:12px;font-weight:700}
.fly-top .pill{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:14px;background:rgba(16,34,43,0.7);white-space:nowrap}
.fly-top small{font-weight:600;color:var(--ink-2);font-size:11px}
.fly-bar{height:4px;border-radius:2px;background:rgba(255,255,255,0.2)}
.fly-bar i{display:block;height:4px;width:40%;border-radius:2px;background:var(--gold)}
.frame.fly .art img{max-width:100%}
.fly-foot{display:flex;align-items:center;justify-content:space-between}
.fly-clock{font:600 34px var(--display);line-height:1;font-variant-numeric:tabular-nums}
.end{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:18px;background:rgba(16,34,43,0.7);font-size:13px;font-weight:700}

/* sync */
.ticks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;color:var(--ink-2)}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks svg{flex:0 0 20px;margin-top:4px}
.sync-art{display:flex;flex-direction:column;align-items:center;gap:0}
.sync-isle{position:relative;width:min(70%,300px)}
.sync-isle img{width:100%;display:block}
.sync-isle .perch{position:absolute;left:56%;top:36%;width:18%}
.acct{margin-top:-8px;width:min(100%,380px);background:var(--surface);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,0.35),inset 0 0 0 1px rgba(255,255,255,0.08)}
.acct p{color:var(--ink-2);font-size:15px}
.acct .acct-note{font-size:13px;color:var(--ink-3)}
.siwa{height:48px;border-radius:12px;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font:600 18px -apple-system,system-ui,sans-serif}
.stage p{margin-top:12px;color:var(--ink-2)}

/* promises */
.promise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:40px}
.promise>div{display:flex;gap:14px;padding:22px;border-radius:20px;background:var(--surface)}
.promise svg{flex:0 0 28px;margin-top:2px}
.promise b{display:block;font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:4px}
.promise p{color:var(--ink-2);font-size:15px}

/* roadmap */
.road{position:relative;margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.road::before{content:"";position:absolute;left:4%;right:4%;top:14px;border-top:2px dashed rgba(242,184,75,0.45)}
.stage{position:relative;padding-top:40px}
.stage::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:var(--sea);box-shadow:inset 0 0 0 3px var(--gold)}
.stage.now::before{background:var(--gold)}
.stage .eyebrow{display:block;margin-bottom:8px}
.stage ul{margin:12px 0 0;padding-left:18px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}

/* footer cta */
.cta-band{background:var(--surface);border-radius:36px;padding:56px 40px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:32px;align-items:center}
.cta-band img{width:100%;max-width:300px;justify-self:center}
footer{padding-block:40px 56px;color:var(--ink-3);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}

@media (max-width:900px){
  .hero .wrap,.grid-2,.cta-band{grid-template-columns:1fr}
  .grid-3,.chart-notes,.phones,.road{grid-template-columns:1fr}
  .road::before{display:none}
  .section{padding-block:72px}
  .stats-mock{grid-template-columns:1fr;padding:12px;gap:12px;border-radius:24px}
  .sm-panel{padding:16px;border-radius:18px}
  .sm-bars{min-height:200px}
  .promise{grid-template-columns:1fr}
  .cta-band{padding:36px 24px}
}
@media (prefers-reduced-motion:reduce){.vox,.vox-shadow,.scene .isle,.scene .bird{animation:none}}

/* ---- additions for the standalone site (forms, footer links, legal pages) ---- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fine a{color:var(--ink-2)}
.form-error{font-size:14px;color:#F5C9A0;margin-top:8px}
.form-error:empty{display:none}
.ts-box{margin-top:10px;max-width:520px}
.ts-box:empty{display:none}
.form-wrap.done .ts-box,.form-wrap.done .form-error,.form-wrap.done .fine{display:none}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}

/* legal and support pages */
.doc{padding-block:64px 80px}
.doc .wrap{max-width:760px}
.doc header{display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.doc h1{font-size:clamp(40px,7vw,64px)}
.doc h2{font-size:clamp(24px,3vw,30px);margin:44px 0 12px}
.doc h3{font-size:19px;margin:26px 0 8px;color:var(--ink)}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.9em;background:rgba(255,255,255,0.07);padding:1px 6px;border-radius:6px}
.doc p,.doc li{color:var(--ink-2)}
.doc p+p{margin-top:12px}
.doc ul{padding-left:20px;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}
.doc strong{color:var(--ink)}
.doc .card{margin-top:20px}
.doc .card p{margin:0}
.doc table{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px 14px;border-top:1px solid rgba(255,255,255,0.08);color:var(--ink-2)}
.doc th{color:var(--ink);font-weight:700;width:34%}
.doc .mail{display:inline-flex;align-self:flex-start;margin-top:8px}
@media (max-width:600px){.doc th,.doc td{display:block;width:auto;padding:8px 0}.doc th{padding-top:16px}.doc td{border-top:0}}

/* consent banner (only shown when an advertising pixel is configured) */
.consent{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:20;max-width:560px;margin-inline:auto;background:var(--surface-2);color:var(--ink);border-radius:20px;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,0.5),inset 0 0 0 1px rgba(255,255,255,0.1);display:flex;flex-direction:column;gap:12px;font-size:15px}
.consent[hidden]{display:none}
.consent p{margin:0}
.consent-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.consent-actions .btn{height:44px;padding:0 18px;font-size:15px}
.footer-dns{display:block;margin-top:8px}
.fly-water .vox-shadow{display:none}