:root{
  --night:#061A2C; --ink:#082D43; --ink-2:#0E3A55; --deep:#1B5C5A;
  --sea:#37B5A2; --sea-soft:#8ED9CB; --sky:#BFE6D6;
  --cream:#FDF8DC; --paper:#FAF5EB; --paper-2:#F1E8D2; --sand:#E8C27A; --copper:#9B4F12; --route:#F7A08A;
  --red:#C8201E; --red-hi:#DC2E2B; --on-red:#FFFDF0;
  --fg:#FDF8DC; --fg-2:#CFE0E3; --fg-3:#8FA9B3; --rule:rgba(253,248,220,.14);
  --display:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1200px; --gutter:clamp(16px,4vw,48px);
  --r-xs:6px; --r:14px; --r-lg:22px; --r-shot:10px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* Coastal Chart palette: brick red action, slate teal, copper, as in the app */
:root[data-logo="chart"]{--night:#041D2E;--ink:#082D43;--ink-2:#0E3A55;--deep:#2C5F70;--sea:#7FB0BC;--sea-soft:#A9D0D6;--sky:#F3CE9C;--cream:#FCF7E9;--sand:#E9B88C;--copper:#8A4B1F;--route:#E9B88C;--red:#B4433C;--red-hi:#C64F48;--on-red:#FFFDF5}
.lg{display:none}
:root[data-logo="postcard"] .lg.postcard,:root[data-logo="chart"] .lg.chart{display:block}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--fg);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.015em;margin:0;line-height:1.08;font-variation-settings:"opsz" 96,"SOFT" 40}
h1{font-size:clamp(44px,7.2vw,104px);line-height:.98;font-weight:600;letter-spacing:-.03em}
h2{font-size:clamp(34px,4.6vw,60px)}
h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2}
p{margin:0}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--fg-2);max-width:62ch}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--sand);outline-offset:3px;border-radius:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:1.5px solid transparent;font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),background .18s,border-color .18s,box-shadow .18s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--red);color:var(--on-red);box-shadow:0 10px 30px -10px rgba(200,32,30,.6)}
.btn.primary:hover{background:var(--red-hi)}
.btn.ghost{background:transparent;color:var(--fg);border-color:rgba(253,248,220,.35)}
.btn.ghost:hover{border-color:var(--fg);background:rgba(253,248,220,.06)}
.btn.sand{background:var(--sand);color:var(--ink)}
.btn.ink{background:var(--ink);color:var(--cream)}
.btn.ink:hover{background:var(--ink-2)}
.btn small{font-weight:500;opacity:.8}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(6,26,44,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none;min-height:48px}
.brand img{height:44px;width:auto}
.menu-btn{display:none;appearance:none;border:1px solid var(--rule);background:transparent;color:var(--fg);width:44px;height:44px;border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
.sheet{position:fixed;inset:0;z-index:60;background:rgba(6,26,44,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;padding:18px var(--gutter) 28px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.sheet.on{opacity:1;transform:none;pointer-events:auto}
.sheet header{display:flex;justify-content:space-between;align-items:center;min-height:48px}
.sheet header img{height:40px;width:auto}
.sheet ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:4px}
.sheet li a{display:block;padding:14px 4px;font-family:var(--display);font-size:28px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule)}
.sheet .btn{margin-top:auto;justify-content:center}
.sheet .btn+.btn{margin-top:10px}
@media(prefers-reduced-motion:reduce){.sheet{transition:none}}
.navlinks{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500}
.navlinks a{text-decoration:none;color:var(--fg-2)}
.navlinks a:hover{color:var(--fg)}
.nav .btn{min-height:42px;padding:0 18px;font-size:15px}
.route{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.route i{position:absolute;left:0;top:0;height:2px;width:0;background:repeating-linear-gradient(90deg,var(--sand) 0 6px,transparent 6px 12px);transition:width .1s linear}
.route b{position:absolute;top:-9px;width:20px;height:20px;margin-left:-10px;transition:left .1s linear,opacity .2s}
.route b.off{opacity:0}
@media(max-width:860px){.navlinks{display:none}.menu-btn{display:inline-flex}.nav .btn.primary{display:none}.brand img{height:38px}}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,120px) 0 0;isolation:isolate}
.hero .sky{position:absolute;inset:0;z-index:-2;background:radial-gradient(1200px 600px at 70% -10%,#12456a 0%,transparent 60%),linear-gradient(180deg,#061A2C 0%,#07233A 55%,#0B3A50 100%)}
.hero .stars{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1.2px 1.2px at 12% 18%,rgba(253,248,220,.9),transparent 60%),radial-gradient(1px 1px at 28% 42%,rgba(253,248,220,.6),transparent 60%),radial-gradient(1.4px 1.4px at 47% 12%,rgba(253,248,220,.8),transparent 60%),radial-gradient(1px 1px at 63% 30%,rgba(253,248,220,.55),transparent 60%),radial-gradient(1.3px 1.3px at 81% 22%,rgba(253,248,220,.85),transparent 60%),radial-gradient(1px 1px at 90% 48%,rgba(253,248,220,.5),transparent 60%),radial-gradient(1px 1px at 38% 62%,rgba(253,248,220,.45),transparent 60%),radial-gradient(1.2px 1.2px at 72% 58%,rgba(253,248,220,.7),transparent 60%)}
.hero .path{position:absolute;left:-4%;right:-4%;top:4%;z-index:-1;width:108%;height:auto;opacity:.55}
.hero .wrap{position:relative}
.hero-copy{max-width:880px}
.hero h1 .ital{font-style:italic;font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 100}
.hero .lede{margin-top:28px}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;align-items:center}
.hero .price-note{font-size:15px;color:var(--fg-3);margin-left:6px}
.hero-shot{position:relative;margin-top:clamp(48px,7vw,96px)}
.hero-shot .water{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:140vw;height:46%;z-index:-1}
.hero-shot .water svg{width:100%;height:100%}
.frame{position:relative;border-radius:var(--r-shot);overflow:hidden;background:var(--ink);box-shadow:0 60px 120px -40px rgba(0,0,0,.7),0 0 0 1px rgba(253,248,220,.12),0 0 80px -20px rgba(55,181,162,.35)}
.frame img{width:100%}
.hero-shot .frame{max-width:1060px;margin:0 auto 0 0}
.hero-shot .phone{position:absolute;right:0;bottom:-8%;width:clamp(140px,16vw,240px);transform:rotate(-4deg)}
@media(max-width:700px){
  .hero-shot{display:flex;justify-content:center;margin-top:36px}
  .hero-shot .frame{display:none}
  .hero-shot .phone{position:static;transform:none;width:min(300px,78vw)}
  .hero .cta{flex-direction:column;align-items:stretch}.hero .cta .btn{justify-content:center}
}
.phone{border-radius:34px;overflow:hidden;background:#000;padding:8px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(253,248,220,.18)}
.phone img{border-radius:26px}
.hero-toggle{display:flex;justify-content:center;margin-top:34px}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:rgba(253,248,220,.08);border:1px solid var(--rule);gap:2px}
.seg button{appearance:none;border:0;background:transparent;color:var(--fg-2);font:500 15px/1 var(--sans);min-height:44px;padding:0 18px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.seg button[aria-pressed="true"]{background:var(--cream);color:var(--ink)}
.seg svg{width:15px;height:15px}
.hero-foot{padding:40px 0 0;text-align:center;color:var(--fg-3);font-size:15px}

/* sections */
.sec{padding:clamp(72px,10vw,140px) 0}
.sec.paper{background:var(--paper);color:var(--ink);--fg:#082D43;--fg-2:#2E5466;--fg-3:#5B7A89;--rule:rgba(8,45,67,.14)}
.sec.sea{background:linear-gradient(180deg,#0B3A50 0%,#0E4A5C 50%,#0B3A50 100%)}
.sec.cream{background:var(--cream);color:var(--ink);--fg:#082D43;--fg-2:#2E5466;--fg-3:#5B7A89;--rule:rgba(8,45,67,.14)}
.head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.head p{margin-top:18px}
.runner{font-family:var(--display);font-style:italic;font-size:18px;color:var(--sea);margin-bottom:14px;font-variation-settings:"opsz" 60,"SOFT" 100}
.paper .runner,.cream .runner{color:var(--copper)}
.sea .runner{color:var(--sea-soft)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.flip>.copy{order:2}
.split .copy h2{margin-bottom:16px}
.split .copy p+p{margin-top:14px}
@media(max-width:900px){.split{grid-template-columns:1fr}.split.flip>.copy{order:0}}
.list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.list li{position:relative;padding-left:26px;color:var(--fg-2)}
.list li::before{content:"";position:absolute;left:0;top:.6em;width:12px;height:12px;border-radius:50%;background:var(--sea);box-shadow:inset 0 0 0 3px var(--night)}
.paper .list li::before,.cream .list li::before{box-shadow:inset 0 0 0 3px var(--paper)}
.list b{color:var(--fg);font-weight:600}

/* wave divider */
.wave{display:block;width:100%;height:60px;margin-bottom:-1px}

/* why strip */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px}
.why div{border-top:2px solid var(--sea);padding-top:18px}
.why h3{font-size:21px;margin-bottom:8px}
.why p{color:var(--fg-2);font-size:16px}
@media(max-width:900px){.why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.why{grid-template-columns:1fr}}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tabs button{appearance:none;border:1px solid var(--rule);background:transparent;color:var(--fg-2);font:500 15px/1 var(--sans);min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.tabs button:hover{border-color:var(--fg-3)}
.tabs button[aria-selected="true"]{background:var(--fg);color:var(--night);border-color:var(--fg)}
.paper .tabs button[aria-selected="true"],.cream .tabs button[aria-selected="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.stage{position:relative}
.stage .frame{aspect-ratio:16/10}
.stage .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .35s var(--ease)}
.stage .frame img.on{opacity:1}
@media(max-width:700px){.stage .frame{aspect-ratio:1/1}.stage .frame img{object-position:var(--pos,left top)}.stage .frame img[data-pos="right"]{--pos:right top}.stage .frame img[data-pos="center"]{--pos:center top}}
.paper .frame,.cream .frame{box-shadow:0 40px 80px -30px rgba(8,45,67,.45),0 0 0 1px rgba(8,45,67,.12)}
.cap{margin-top:16px;color:var(--fg-2);font-size:16px;min-height:3.2em}
@media(max-width:700px){.cap{min-height:0}}
.cap b{color:var(--fg);font-weight:600}
.tabpanel[hidden]{display:none}

/* ai dial */
.dial{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:34px 0 28px;max-width:760px}
.dial button{appearance:none;text-align:left;border:1px solid var(--rule);background:rgba(253,248,220,.04);color:var(--fg);padding:22px 22px 20px;border-radius:var(--r);cursor:pointer;transition:background .18s,border-color .18s,transform .18s var(--ease);font:inherit}
.dial button:hover{border-color:var(--sea)}
.dial button[aria-pressed="true"]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.dial button b{display:block;font-family:var(--display);font-size:26px;font-weight:500;margin-bottom:6px;letter-spacing:-.01em}
.dial button span{display:block;font-size:15px;opacity:.78;line-height:1.45}
.dial button i{display:inline-block;width:46px;height:26px;border-radius:999px;background:rgba(253,248,220,.18);position:relative;margin-bottom:14px;vertical-align:middle;transition:background .18s}
.dial button i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--cream);transition:transform .2s var(--ease),background .18s}
.dial button[data-ai="own"] i{background:var(--sea)}.dial button[data-ai="own"] i::after{transform:translateX(20px)}
.dial button[aria-pressed="true"] i{background:var(--ink)}.dial button[aria-pressed="true"] i::after{background:var(--cream)}
.dial button[aria-pressed="true"][data-ai="off"] i{background:rgba(8,45,67,.25)}
@media(max-width:800px){.dial{grid-template-columns:repeat(2,1fr);gap:8px}.dial button{padding:14px 12px 12px}.dial button b{font-size:20px}.dial button span{display:none}.dial button i{width:40px;height:22px;margin-bottom:10px}.dial button i::after{width:16px;height:16px}.dial button[data-ai="own"] i::after{transform:translateX(18px)}}
.aipanel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start}
.aipanel .copy h3{font-size:clamp(26px,3vw,38px);margin-bottom:14px}
.aipanel .copy p{color:var(--fg-2)}
.aipanel .copy p+p{margin-top:12px}
@media(max-width:900px){.aipanel{grid-template-columns:1fr}}
.role{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--rule)}
.role h3{font-size:clamp(22px,2.4vw,30px);margin-bottom:4px}
.list.no li::before{background:transparent;box-shadow:none;border:2px solid var(--route);width:12px;height:12px;border-radius:50%;background:linear-gradient(45deg,transparent 45%,var(--route) 45% 55%,transparent 55%)}
@media(max-width:760px){.role{grid-template-columns:1fr}}
.steps{list-style:none;counter-reset:st;margin:18px 0 0;padding:0;display:grid;gap:12px}
.steps li{counter-increment:st;position:relative;padding-left:44px;color:var(--fg-2)}
.steps li::before{content:counter(st);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 15px/1 var(--sans);background:var(--cream);color:var(--ink)}
.steps b{color:var(--fg);font-weight:600}
.prov{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.prov button{appearance:none;border:1px solid var(--rule);background:transparent;color:var(--fg-2);font:500 15px/1 var(--sans);min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer}
.prov button:hover{border-color:var(--fg-3)}
.prov button[aria-pressed="true"]{background:var(--fg);color:var(--night);border-color:var(--fg)}
.provnote{margin-top:12px;color:var(--fg-2);font-size:16px;min-height:3em}
.provnote a{color:var(--fg);text-underline-offset:3px}
.aside{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);color:var(--fg-3);font-size:15px}
.promise{margin-top:40px;padding:26px 28px;border-radius:var(--r);border:1px solid var(--rule);display:flex;gap:18px;align-items:flex-start;background:rgba(253,248,220,.04)}
.promise svg{flex:none;width:30px;height:30px;color:var(--sand)}
.promise p{color:var(--fg-2);font-size:16px}
.promise b{color:var(--fg)}

/* hybrid */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.three article{border-radius:var(--r);overflow:hidden;background:rgba(8,45,67,.04);border:1px solid var(--rule)}
.three article .frame{border-radius:0;box-shadow:none;border-bottom:1px solid var(--rule)}
.three article .frame img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.three article div{padding:20px 22px 24px}
.three h3{font-size:22px;margin-bottom:8px}
.three p{color:var(--fg-2);font-size:15.5px}
@media(max-width:900px){.three{grid-template-columns:1fr}}
@media(max-width:700px){.three article .frame img{aspect-ratio:4/3}.mosaic figure img{aspect-ratio:4/3}}

/* mosaic */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:40px}
.mosaic figure{margin:0;grid-column:span 4;border-radius:var(--r);overflow:hidden;border:1px solid var(--rule);background:rgba(253,248,220,.03);display:flex;flex-direction:column}
.mosaic figure.w6{grid-column:span 6}.mosaic figure.w8{grid-column:span 8}.mosaic figure.w12{grid-column:span 12}
.mosaic figure img{aspect-ratio:16/10;width:100%;object-fit:cover;object-position:top}
.mosaic figure.fill{min-height:0}.mosaic figure.fill img{flex:1;aspect-ratio:auto;min-height:0}
@media(max-width:900px){.mosaic figure.fill img{flex:none;aspect-ratio:16/10}}
.mosaic figcaption{padding:16px 18px 18px;font-size:15px;color:var(--fg-2);border-top:1px solid var(--rule)}
.mosaic figcaption b{display:block;font-family:var(--display);font-size:19px;color:var(--fg);font-weight:500;margin-bottom:4px}
@media(max-width:900px){.mosaic figure,.mosaic figure.w6,.mosaic figure.w8{grid-column:span 6}}
@media(max-width:600px){.mosaic figure,.mosaic figure.w6,.mosaic figure.w8,.mosaic figure.w12{grid-column:span 12}}

/* phones row */
.phones{display:flex;gap:clamp(12px,2.5vw,34px);justify-content:center;align-items:flex-end;margin-top:48px;flex-wrap:wrap}
.phones .phone{width:clamp(150px,18vw,230px)}
.phones .phone:nth-child(2){margin-bottom:40px}
.phones .phone:nth-child(4){margin-bottom:28px}
@media(max-width:700px){
  .phones{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:36px calc(-1*var(--gutter)) 0;padding:0 var(--gutter) 8px;scrollbar-width:none;align-items:flex-start;justify-content:flex-start;scroll-padding-left:var(--gutter)}
  .phones::-webkit-scrollbar{display:none}
  .phones .phone{flex:none;width:68vw;scroll-snap-align:start;margin-bottom:0!important}
}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.trio div{border:1px solid var(--rule);border-radius:var(--r);padding:16px 14px 14px;background:rgba(253,248,220,.04)}
.trio svg{width:26px;height:26px;color:var(--sea);margin-bottom:10px}
.trio b{display:block;font-family:var(--display);font-size:20px;font-weight:500}
.trio span{display:block;font-size:14.5px;color:var(--fg-2);line-height:1.35;margin-top:2px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.badges span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:999px;padding:9px 14px;font-size:14.5px;color:var(--fg-2)}
.badges svg{width:16px;height:16px;color:var(--sea)}

/* everything */
.every{columns:3;column-gap:40px;margin-top:36px}
.every details{break-inside:avoid;margin-bottom:28px}
.every summary{list-style:none;cursor:default;pointer-events:none}
.every summary::-webkit-details-marker{display:none}
.every h3{font-size:19px;margin-bottom:8px;color:var(--fg);display:flex;justify-content:space-between;align-items:center}
.every h3 svg{display:none;width:20px;height:20px;color:var(--copper);transition:transform .2s var(--ease)}
@media(max-width:620px){
  .every details{margin:0;border-top:1px solid var(--rule)}
  .every details:last-child{border-bottom:1px solid var(--rule)}
  .every summary{cursor:pointer;pointer-events:auto;padding:14px 0}
  .every h3{margin:0;font-size:21px}.every h3 svg{display:block}
  .every details[open] h3 svg{transform:rotate(45deg)}
  .every ul{padding-bottom:14px}
}
.every ul{list-style:none;margin:0;padding:0;color:var(--fg-2);font-size:15.5px;line-height:1.55}
.every li{padding:3px 0 3px 18px;position:relative}
.every li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:7px;border-radius:50%;background:var(--copper)}
@media(max-width:1000px){.every{columns:2}}
@media(max-width:620px){.every{columns:1}}

/* pricing */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:960px;margin:40px auto 0}
.plan{border-radius:var(--r-lg);padding:34px 32px 32px;background:rgba(253,248,220,.05);border:1px solid var(--rule);display:flex;flex-direction:column}
.plan.best{background:var(--cream);color:var(--ink);border-color:var(--cream);--fg:#082D43;--fg-2:#2E5466;--fg-3:#5B7A89}
.plan .name{font-family:var(--display);font-size:24px;font-weight:500}
.plan .amount{font-family:var(--display);font-size:clamp(52px,6vw,76px);font-weight:600;letter-spacing:-.03em;line-height:1;margin:18px 0 4px;font-variation-settings:"opsz" 144,"SOFT" 30}
.plan .amount small{font:500 17px/1 var(--sans);letter-spacing:0;margin-left:6px;color:var(--fg-2)}
.plan .sub{color:var(--fg-2);min-height:3em}
.plan ul{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:10px;color:var(--fg-2);font-size:16px}
.plan li{padding-left:28px;position:relative}
.plan li svg{position:absolute;left:0;top:.2em;width:18px;height:18px;color:var(--sea)}
.plan.best li svg{color:var(--deep)}
.plan .btn{margin-top:auto;justify-content:center}
.plan .fine{margin-top:14px;font-size:14px;color:var(--fg-3);text-align:center}
.plan .tag{display:inline-block;align-self:flex-start;font:600 13px/1 var(--sans);letter-spacing:.02em;padding:7px 11px;border-radius:999px;background:var(--red);color:var(--on-red);margin-bottom:16px}
@media(max-width:760px){.plans{grid-template-columns:1fr}.plan.best{order:-1}}
.guarantee{text-align:center;color:var(--fg-3);font-size:15px;margin-top:28px;max-width:60ch;margin-left:auto;margin-right:auto}

/* faq */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--rule);padding:6px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-family:var(--display);font-size:clamp(19px,1.8vw,23px);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:22px;height:22px;transition:transform .25s var(--ease);color:var(--copper)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;color:var(--fg-2);max-width:66ch}
.faq .a p+p{margin-top:10px}

/* final cta */
.final{text-align:center;padding:clamp(80px,12vw,160px) 0 clamp(60px,8vw,110px);position:relative;overflow:hidden}
.final img.logo{width:min(520px,80vw);margin:0 auto 34px}
.final img.logo.lg{display:none}:root[data-logo="chart"] .final img.logo.chart,:root[data-logo="postcard"] .final img.logo.postcard{display:block}
.final h2{font-size:clamp(36px,5vw,66px)}
.final .cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}

/* footer */
footer{border-top:1px solid var(--rule);padding:36px 0 44px;color:var(--fg-3);font-size:14.5px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center}
footer a{color:var(--fg-2);text-decoration:none}
footer a:hover{color:var(--fg)}
footer ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}

/* sticky buy bar, phones only, after the hero */
.buybar{display:none}
@media(max-width:700px){
  .buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(6,26,44,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--rule);transform:translateY(110%);transition:transform .25s var(--ease)}
  .buybar.on{transform:none}
  .buybar .btn{flex:1;justify-content:center;min-height:48px;padding:0 12px;font-size:15px}
  body{padding-bottom:0}
  .final{padding-bottom:140px}
}
@media(prefers-reduced-motion:reduce){.buybar{transition:none}}
/* reveal: one gentle entrance for the hero only */
@media(prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .9s var(--ease) both}
  .hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}
  .hero-shot{animation:rise 1.1s .25s var(--ease) both}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* ===== shared: nav current page ===== */
.navlinks a[aria-current="page"]{color:var(--fg);text-decoration:underline;text-decoration-color:var(--route);text-underline-offset:8px;text-decoration-thickness:2px}
.sheet li a[aria-current="page"]{color:var(--route)}
.navlinks{gap:24px}
@media(max-width:1080px){.navlinks{gap:16px;font-size:14.5px}}

/* ===== sub-page hero ===== */
.page-hero{position:relative;overflow:hidden;padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,88px);isolation:isolate;background:radial-gradient(900px 420px at 80% -20%,#12456a 0%,transparent 60%),linear-gradient(180deg,var(--night) 0%,#07233A 100%)}
.page-hero .path{position:absolute;left:-4%;top:0;width:108%;height:auto;z-index:-1;opacity:.45}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 22px;padding:0;font-size:15px;color:var(--fg-3)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.6}
.crumbs a{color:var(--fg-2);text-decoration:none}
.crumbs a:hover{color:var(--fg);text-decoration:underline}
.page-hero h1{font-size:clamp(40px,6vw,84px);max-width:16ch}
.page-hero .lede{margin-top:22px}
.page-hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media(max-width:700px){.page-hero .cta{flex-direction:column;align-items:stretch}.page-hero .cta .btn{justify-content:center}}
.page-hero .shot{margin-top:clamp(36px,5vw,64px)}
.page-hero .seg{margin-top:28px}

/* ===== on-this-page index ===== */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;list-style:none;padding:0}
.toc a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);color:var(--fg-2);text-decoration:none;font-size:15px}
.toc a:hover{border-color:var(--fg-3);color:var(--fg)}

/* ===== feature rows: text beside a screenshot ===== */
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--rule)}
.feat:first-of-type{border-top:0;padding-top:0}
.feat.flip>.copy{order:2}
.feat h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:14px}
.feat .copy>p{color:var(--fg-2)}
.feat .copy>p+p{margin-top:12px}
.feat .frame{aspect-ratio:16/10}
.feat .frame img{width:100%;height:100%;object-fit:cover;object-position:top}
@media(max-width:900px){.feat{grid-template-columns:1fr}.feat.flip>.copy{order:0}}
@media(max-width:700px){.feat .frame{aspect-ratio:4/3}.feat .frame img[data-pos="right"]{object-position:right top}.feat .frame img[data-pos="center"]{object-position:center top}}

/* ===== detail lists ===== */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 32px;margin-top:28px}
.specs div{border-top:2px solid var(--sea);padding-top:14px}
.paper .specs div,.cream .specs div{border-color:var(--copper)}
.specs h3{font-size:20px;margin-bottom:6px}
.specs p{color:var(--fg-2);font-size:16px}

/* ===== comparison tables ===== */
.tablewrap{margin-top:28px;overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);-webkit-overflow-scrolling:touch;background:rgba(253,248,220,.02)}
.paper .tablewrap,.cream .tablewrap{background:#fff}
table.cmp{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-size:15.5px}
table.cmp caption{text-align:left;padding:16px 18px 6px;color:var(--fg-3);font-size:14.5px;caption-side:bottom}
table.cmp th,table.cmp td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
table.cmp thead th{font-family:var(--display);font-weight:500;font-size:17px;background:var(--paper-2);color:var(--ink);position:sticky;top:0}
table.cmp tbody th{font-weight:600;color:var(--fg);min-width:190px}
table.cmp th:first-child{position:sticky;left:0;z-index:1;background:inherit}
.paper table.cmp tbody th,.cream table.cmp tbody th{background:#fff}
table.cmp tbody tr:last-child>*{border-bottom:0}
table.cmp .us{background:rgba(55,181,162,.10)}
.paper table.cmp .us,.cream table.cmp .us{background:#EAF4EF}
table.cmp thead .us{background:var(--ink);color:var(--cream)}
.y,.n,.p{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.y svg,.n svg,.p svg{width:16px;height:16px;flex:none}
.y svg{color:#1B7A5E}.n svg{color:#A3161A}.p svg{color:#9B4F12}
.cmp small{display:block;color:var(--fg-3);font-size:14px;margin-top:2px;line-height:1.4}
.scrollhint{display:none;font-size:14.5px;color:var(--fg-3);margin-top:10px}
@media(max-width:760px){.scrollhint{display:block}}

/* ===== vs cards ===== */
.vsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:28px}
.vsgrid a{display:block;padding:22px 22px 20px;border:1px solid var(--rule);border-radius:var(--r);text-decoration:none;background:rgba(253,248,220,.04);transition:border-color .18s,transform .18s var(--ease)}
.paper .vsgrid a,.cream .vsgrid a{background:#fff}
.vsgrid a:hover{border-color:var(--sea);transform:translateY(-2px)}
.vsgrid b{display:block;font-family:var(--display);font-size:22px;font-weight:500;margin-bottom:6px}
.vsgrid span{display:block;color:var(--fg-2);font-size:15.5px}
.vsgrid i{display:block;margin-top:12px;font-style:normal;font-weight:600;font-size:15px;color:var(--copper)}
.sec:not(.paper):not(.cream) .vsgrid i{color:var(--route)}

/* ===== two-column fair comparison ===== */
.fair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);margin-top:28px}
.fair>div{padding:24px 26px;border-radius:var(--r);border:1px solid var(--rule)}
.fair h3{font-size:24px;margin-bottom:10px}
@media(max-width:760px){.fair{grid-template-columns:1fr}}

/* ===== stack cost ===== */
.stack{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-top:30px}
.stack .col{padding:24px 26px;border-radius:var(--r-lg);border:1px solid var(--rule)}
.stack .col.us{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.stack ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.stack li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--rule);padding-bottom:8px;font-size:16px}
.stack .col.us li{border-color:rgba(8,45,67,.18)}
.stack .total{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--display);font-size:28px;font-weight:600}
.stack .vs{font-family:var(--display);font-style:italic;font-size:26px;color:var(--fg-3)}
@media(max-width:820px){.stack{grid-template-columns:1fr}.stack .vs{text-align:center}}

/* ===== contact ===== */
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.form{display:grid;gap:18px}
.field label{display:block;font-weight:600;font-size:16px;margin-bottom:6px;color:var(--fg)}
.field .hint{display:block;font-size:14.5px;color:var(--fg-3);margin:-2px 0 8px;font-weight:400}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border-radius:12px;border:1.5px solid rgba(8,45,67,.25);background:#fff;color:var(--ink);font:400 17px/1.4 var(--sans);transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:170px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082D43' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(8,45,67,.45)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(55,181,162,.35)}
.field [aria-invalid="true"]{border-color:#A3161A;box-shadow:0 0 0 3px rgba(163,22,26,.15)}
.ferr{display:flex;gap:6px;align-items:flex-start;color:#A3161A;font-size:15px;margin-top:6px;font-weight:500}
.ferr[hidden]{display:none}
.form .btn{justify-content:center;width:100%}
.form .note{font-size:14.5px;color:var(--fg-3)}
.done{padding:18px 20px;border-radius:12px;background:#EAF4EF;border:1px solid #9BCFBE;color:var(--ink);font-size:16px}
.done:focus{outline:3px solid var(--sea);outline-offset:2px}
.reach{display:grid;gap:14px}
.reach>div{padding:20px 22px;border:1px solid var(--rule);border-radius:var(--r);background:#fff}
.reach h3{font-size:20px;margin-bottom:4px}
.reach p{color:var(--fg-2);font-size:16px}
.reach a{color:var(--ink);font-weight:600;text-underline-offset:3px}

/* ===== pricing table rows ===== */
.plancmp td,.plancmp th{text-align:center}
.plancmp tbody th{text-align:left}

/* ===== link to the detail page at the end of a home section ===== */
.more{display:inline-flex;align-items:center;gap:8px;margin-top:28px;min-height:44px;font-weight:600;font-size:16px;text-decoration:none;color:var(--fg);border-bottom:2px solid var(--route);padding-bottom:2px}
.paper .more,.cream .more{border-color:var(--copper)}
.more svg{width:18px;height:18px;transition:transform .18s var(--ease)}
.more:hover svg{transform:translateX(3px)}

/* ===== closing band on sub-pages ===== */
.close{padding:clamp(64px,9vw,120px) 0;text-align:center}
.close h2{max-width:22ch;margin:0 auto}
.close p{margin:16px auto 0;color:var(--fg-2);max-width:56ch}
.close .cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px}
@media(max-width:700px){.close .cta{flex-direction:column;align-items:stretch}.close .cta .btn{justify-content:center}.close{padding-bottom:130px}}

/* footer columns */
.foot{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:28px;padding:48px 0 26px}
.foot h2{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--fg-2);margin-bottom:12px;letter-spacing:0}
.foot ul{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.foot a{color:var(--fg-3);text-decoration:none;font-size:15px}
.foot a:hover{color:var(--fg)}
.foot .about img{height:52px;width:auto;margin-bottom:14px}
.foot .about p{color:var(--fg-3);font-size:15px;max-width:34ch}
.legal{border-top:1px solid var(--rule);padding:18px 0 26px;color:var(--fg-3);font-size:14.5px}
@media(max-width:800px){.foot{grid-template-columns:1fr 1fr}.foot .about{grid-column:1/-1}}
@media(max-width:700px){footer{padding-bottom:90px}}
.sr:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:600}
.nav .btn{min-height:44px}
/* comparison tables on phones */
table.cmp{min-width:0}
table.cmp.wide{min-width:760px}
.pick{display:none}
@media(max-width:760px){
  table.cmp.wide{min-width:0}
  table.cmp .hide{display:none}
  table.cmp tbody th{min-width:0;width:36%}
  table.cmp th,table.cmp td{padding:12px 10px;font-size:15px}
  table.cmp th:first-child{position:static}
  .pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}
  .pick span{width:100%;font-size:15px;color:var(--fg-3)}
  .pick button{appearance:none;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--fg-2);font:500 15px/1 var(--sans);cursor:pointer}
  .pick button[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
  .sec:not(.paper):not(.cream) .pick button[aria-pressed="true"]{background:var(--cream);color:var(--ink)}
  .tablewrap{overflow-x:visible}
}
.paper table.cmp thead .us,.cream table.cmp thead .us,table.cmp thead .us{background:var(--ink);color:var(--cream)}

footer .wrap{display:block}

/* =====================================================================
   THEME LAYER: day (light) and night (dark), tropical.
   Every section kind gets its own surface tokens per theme:
   --bg --fg --fg-2 --fg-3 --rule --card --solid --field --runner --accent --wave
   ===================================================================== */

/* ---------- day ---------- */
:root,:root[data-theme="light"]{
  --bg:#E4F5EF; --fg:#082D43; --fg-2:#2B5162; --fg-3:#4B6B79; --rule:rgba(8,45,67,.14); --rule-2:rgba(8,45,67,.28);
  --card:rgba(255,255,255,.62); --solid:#FFFFFF; --field:#FFFFFF; --runner:#B3301E; --accent:#B3301E;
  --wave:#E4F5EF; --focus:#0E7C6B;
  --nav-bg:rgba(255,250,238,.86); --sheet-bg:rgba(255,250,238,.98);
  --stamp-bg:#0B4A4E; --stamp-fg:#FFF9EC;
  --inv-bg:#0B3A44; --inv-fg:#FFF9EC; --inv-fg-2:#D2E6E4; --inv-fg-3:#A9C8C6;
  --foot-bg:#0A3640;
  --route-c:#E0533C; --plane:#082D43;
  --palm:#14543F; --palm-2:#1E6B4E;
  --water-1:#5CCDB9; --water-2:#2EA593;
  --y:#137A52; --n:#B3241F; --p:#97500F;
  color-scheme:light;
}
/* ---------- night ---------- */
:root[data-theme="dark"]{
  --bg:#061A2C; --fg:#FDF8DC; --fg-2:#CFE0E3; --fg-3:#A3B9C2; --rule:rgba(253,248,220,.14); --rule-2:rgba(253,248,220,.3);
  --card:rgba(253,248,220,.05); --solid:#0E2A40; --field:#08213A; --runner:var(--sea); --accent:#F7A08A;
  --wave:#061A2C; --focus:#F7C46B;
  --nav-bg:rgba(6,26,44,.82); --sheet-bg:rgba(6,26,44,.97);
  --stamp-bg:#FDF8DC; --stamp-fg:#082D43;
  --inv-bg:#FDF8DC; --inv-fg:#082D43; --inv-fg-2:#2E5466; --inv-fg-3:#4B6B79;
  --foot-bg:#030F1A;
  --route-c:#F7C46B; --plane:#FDF8DC;
  --palm:#021019; --palm-2:#06202E;
  --water-1:#0E4A5C; --water-2:#1B5C5A;
  --y:#62D6A9; --n:#F2847C; --p:#E9B88C;
  color-scheme:dark;
}

/* section surfaces */
:root .sec{background:var(--bg);color:var(--fg)}
:root[data-theme="light"] .sec.paper,:root:not([data-theme]) .sec.paper{--bg:#FCF3E1;--wave:#FCF3E1;--card:rgba(255,255,255,.7)}
:root[data-theme="light"] .sec.cream,:root:not([data-theme]) .sec.cream{--bg:#FFF9EC;--wave:#FFF9EC;--card:rgba(255,255,255,.75)}
:root[data-theme="light"] .sec.sea,:root:not([data-theme]) .sec.sea{--bg:#AEE5DA;--wave:#BDEAE0;--fg-2:#1C4656;--fg-3:#25505E;--rule:rgba(8,45,67,.18);--card:rgba(255,255,255,.55);background:linear-gradient(180deg,#BDEAE0 0%,#9FDDD0 55%,#B3E6DB 100%)}
:root[data-theme="dark"] .sec.paper{--bg:#0A2438;--wave:#0A2438;--fg:#FDF8DC;--fg-2:#CFE0E3;--fg-3:#A3B9C2;--rule:rgba(253,248,220,.14)}
:root[data-theme="dark"] .sec.cream{--bg:#0B2C3C;--wave:#0B2C3C;--fg:#FDF8DC;--fg-2:#CFE0E3;--fg-3:#A9C0C8;--rule:rgba(253,248,220,.14)}
:root[data-theme="dark"] .sec.sea{--bg:#0B3A50;--wave:#0B3A50;--fg-3:#B7CDD3;background:linear-gradient(180deg,#0B3A50 0%,#0E4A5C 50%,#0B3A50 100%)}
:root .sec.paper,:root .sec.cream,:root .sec.sea{color:var(--fg)}

body{background:var(--bg);color:var(--fg)}
@media(prefers-reduced-motion:no-preference){
  body,.sec,.nav,footer,.page-hero,.hero .sky,.final{transition:background-color .45s ease,color .45s ease}
}

/* wavy top edge on every section (replaces the old fixed-colour wave svgs) */
.wave{display:none}
.sec,.final,footer{position:relative}
.sec::before,.final::before,footer::before{content:"";position:absolute;left:0;right:0;top:-34px;height:36px;background:var(--wave);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22C120 8 240 6 360 16s240 22 360 12S960 4 1080 10s240 22 360 14V40H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22C120 8 240 6 360 16s240 22 360 12S960 4 1080 10s240 22 360 14V40H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.sec:nth-of-type(even)::before{transform:scaleX(-1)}
.sec.sea::before{background:#BDEAE0}
:root[data-theme="dark"] .sec.sea::before{background:#0B3A50}
@media(max-width:700px){.sec::before,.final::before,footer::before{top:-18px;height:20px}}

/* runners, accents, small marks */
:root .runner,:root .paper .runner,:root .cream .runner,:root .sea .runner{color:var(--runner)}
:root .every li::before{background:var(--accent)}
:root .every h3 svg,:root .faq summary svg{color:var(--accent)}
:root .more,:root .paper .more,:root .cream .more{border-color:var(--accent)}
:root .sec .vsgrid i{color:var(--accent)}
:root .list li::before{background:var(--water-2);box-shadow:inset 0 0 0 3px var(--bg)}
:root .list.no li::before{background:linear-gradient(45deg,transparent 45%,var(--accent) 45% 55%,transparent 55%);border-color:var(--accent);box-shadow:none}
:root .why div{border-color:var(--water-2)}
:root .specs div,:root .paper .specs div,:root .cream .specs div{border-color:var(--water-2)}
:root .badges svg,:root .trio svg,:root .plan li svg{color:var(--water-2)}
:root[data-theme="dark"] .badges svg,:root[data-theme="dark"] .trio svg,:root[data-theme="dark"] .plan li svg{color:var(--sea)}
:root[data-theme="dark"] .list li::before{background-color:var(--sea)}
:root[data-theme="dark"] .list.no li::before{background:linear-gradient(45deg,transparent 45%,var(--accent) 45% 55%,transparent 55%)}

/* cards and pills follow the surface */
:root .dial button,:root .promise,:root .trio div,:root .mosaic figure,:root .three article,:root .plan,:root .seg,:root .fair>div{background:var(--card)}
:root .tabs button[aria-selected="true"],:root .prov button[aria-pressed="true"],:root .seg button[aria-pressed="true"],:root .dial button[aria-pressed="true"],:root .steps li::before,:root .pick button[aria-pressed="true"],:root .sec:not(.paper):not(.cream) .pick button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
:root .dial button i{background:var(--rule-2)}
:root .dial button[aria-pressed="true"] i{background:var(--water-1)}
:root .dial button[aria-pressed="true"] i::after{background:var(--bg)}
:root .dial button[aria-pressed="true"][data-ai="off"] i{background:var(--rule-2)}
:root .frame,:root .paper .frame,:root .cream .frame{box-shadow:0 40px 90px -36px rgba(8,45,67,.45),0 0 0 1px var(--rule)}
:root[data-theme="dark"] .frame{box-shadow:0 60px 120px -40px rgba(0,0,0,.7),0 0 0 1px rgba(253,248,220,.12),0 0 80px -20px rgba(55,181,162,.3)}

/* inverted feature card: best plan, our stack */
:root .plan.best,:root .stack .col.us{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg);--fg:var(--inv-fg);--fg-2:var(--inv-fg-2);--fg-3:var(--inv-fg-3);--rule:rgba(128,160,170,.28)}
:root[data-theme="dark"] .plan.best li svg{color:#1B5C5A}

/* tables */
:root .tablewrap,:root .paper .tablewrap,:root .cream .tablewrap{background:var(--solid)}
:root table.cmp thead th{background:#F3E7CC;color:#082D43}
:root[data-theme="dark"] table.cmp thead th{background:#14384F;color:#FDF8DC}
:root .sec table.cmp thead th.us,:root table.cmp thead .us{background:var(--inv-bg);color:var(--inv-fg)}
:root table.cmp tbody th,:root .paper table.cmp tbody th,:root .cream table.cmp tbody th{background:var(--solid)}
:root .sec table.cmp td.us{background:#E6F5EF}
:root[data-theme="dark"] .sec table.cmp td.us{background:rgba(55,181,162,.12)}
:root .y svg{color:var(--y)}:root .n svg{color:var(--n)}:root .p svg{color:var(--p)}
:root .sec .vsgrid a,:root .paper .vsgrid a,:root .cream .vsgrid a{background:var(--card)}

/* forms */
:root .field input,:root .field select,:root .field textarea{background-color:var(--field);color:var(--fg);border-color:var(--rule-2)}
:root[data-theme="dark"] .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDF8DC' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
:root .field input:focus,:root .field select:focus,:root .field textarea:focus{border-color:var(--fg)}
:root[data-theme="dark"] .ferr{color:#F2847C}
:root[data-theme="dark"] .done{background:rgba(55,181,162,.14);border-color:rgba(55,181,162,.4);color:var(--fg)}
:root .reach>div{background:var(--solid)}
:root .reach a{color:var(--fg)}

/* focus ring */
:focus-visible{outline-color:var(--focus)}

/* =====================================================================
   NAV: bigger logo, all-caps links, theme switch, seaplane progress
   ===================================================================== */
.nav{background:var(--nav-bg);border-bottom-color:var(--rule)}
.nav .wrap{min-height:84px}
.brand img{height:62px}
.navlinks{text-transform:uppercase;letter-spacing:.09em;font-size:13.5px;font-weight:600;gap:26px}
.navlinks a{color:var(--fg-2)}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--fg)}
.navlinks a[aria-current="page"]{text-decoration-color:var(--route-c)}
@media(max-width:1180px){.navlinks{gap:16px;font-size:12.5px;letter-spacing:.07em}}
.nav-end{display:flex;align-items:center;gap:10px}
.theme-btn{appearance:none;position:relative;width:48px;height:48px;border-radius:50%;border:1px solid var(--rule-2);background:var(--card);color:var(--fg);cursor:pointer;display:inline-grid;place-items:center;overflow:hidden;flex:none}
.theme-btn svg{grid-area:1/1;width:22px;height:22px;transition:transform .5s var(--ease),opacity .3s}
.theme-btn .moon{transform:translateY(140%) rotate(-40deg);opacity:0}
:root[data-theme="dark"] .theme-btn .sun{transform:translateY(-140%) rotate(60deg);opacity:0}
:root[data-theme="dark"] .theme-btn .moon{transform:none;opacity:1}
.theme-btn:hover{border-color:var(--fg)}
.route i{background:repeating-linear-gradient(90deg,var(--route-c) 0 6px,transparent 6px 12px)}
.route b{top:-11px;width:40px;height:22px;margin-left:-20px;color:var(--plane);filter:drop-shadow(0 1px 0 var(--nav-bg))}
.route b svg{width:40px;height:22px;display:block}
@media(prefers-reduced-motion:no-preference){.route b svg{animation:bob 2.4s ease-in-out infinite}}
@keyframes bob{50%{transform:translateY(-2px) rotate(-2deg)}}
.sheet{background:var(--sheet-bg)}
.sheet header img{height:52px}
.sheet li a{color:var(--fg)}
.buybar{background:var(--nav-bg)!important}
@media(max-width:860px){
  .brand img{height:50px}
  .nav .wrap{min-height:72px}
  .nav-end .btn{display:none}
}
/* light/dark logo variants */
.lg.t-d{display:none!important}
:root[data-theme="dark"] .lg.t-l{display:none!important}
:root[data-theme="dark"][data-logo="postcard"] .lg.postcard.t-d,:root[data-theme="dark"][data-logo="chart"] .lg.chart.t-d{display:block!important}

/* =====================================================================
   BUTTONS
   primary: a sunset pill. On hover a turquoise swell rises behind the
            words and the seaplane takes off.
   ghost/ink: a postage stamp, perforated edges and a dashed frame.
   ===================================================================== */
.btn{position:relative;isolation:isolate;overflow:hidden;gap:12px;min-height:54px;font-weight:700;letter-spacing:.01em}
.btn.primary{
  background:linear-gradient(135deg,var(--red-hi) 0%,var(--red) 46%,#8B1030 100%);
  color:var(--on-red);border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.2),0 14px 30px -12px rgba(200,32,30,.75),0 0 0 0 rgba(247,160,138,.0);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn.primary::before{content:"";position:absolute;z-index:-1;left:-20%;right:-20%;top:100%;height:130%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M0 10C14 0 26 0 40 10s26 10 40 0v30H0Z' fill='%231B5C5A'/%3E%3Cpath d='M0 10C14 0 26 0 40 10s26 10 40 0' fill='none' stroke='%23BFE6D6' stroke-width='3'/%3E%3C/svg%3E") 0 0/80px 100% repeat-x;
  transition:top .45s var(--ease)}
.btn.primary::after{content:"";flex:none;width:30px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 26'%3E%3Cg fill='%23000'%3E%3Cpath d='M5.2 11.2 2.6 3.4c-.2-.7.2-1.1.9-1L7.8 3l4.6 7.6Z'/%3E%3Cpath d='M2.6 10.1h8.2l-.9 1.8H3.2Z'/%3E%3Cpath d='M4.6 10.6 28 8.7c6.4-.5 10.6.6 13.2 2.9.7.6.6 1.3-.1 1.8-3.2 2.2-7.6 2.4-12.2 2.2L9 14Z'/%3E%3Cpath d='M13.6 8.2c0-.7.4-1 1.1-1l21-.7c.9 0 1.3.4 1.2 1.1l-.1.6c-.1.6-.5.9-1.2.9l-20.8.7c-.8 0-1.2-.3-1.2-1Z'/%3E%3Ccircle cx='42.2' cy='12.5' r='1.4'/%3E%3Cpath d='M8.2 20h29.6c3.4 0 5.6.9 6.8 2.4.4.5.1 1-.6 1H11.4c-2 0-3.2-.6-3.6-1.9Z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' d='M16.5 14.1 14.6 20.2M20.4 14.4 20 20.2M30.2 15.5 30.8 20.2M34.2 15.2 36.2 20.2M43.4 6.4c.7 3.9.7 8.3 0 12.2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 26'%3E%3Cg fill='%23000'%3E%3Cpath d='M5.2 11.2 2.6 3.4c-.2-.7.2-1.1.9-1L7.8 3l4.6 7.6Z'/%3E%3Cpath d='M2.6 10.1h8.2l-.9 1.8H3.2Z'/%3E%3Cpath d='M4.6 10.6 28 8.7c6.4-.5 10.6.6 13.2 2.9.7.6.6 1.3-.1 1.8-3.2 2.2-7.6 2.4-12.2 2.2L9 14Z'/%3E%3Cpath d='M13.6 8.2c0-.7.4-1 1.1-1l21-.7c.9 0 1.3.4 1.2 1.1l-.1.6c-.1.6-.5.9-1.2.9l-20.8.7c-.8 0-1.2-.3-1.2-1Z'/%3E%3Ccircle cx='42.2' cy='12.5' r='1.4'/%3E%3Cpath d='M8.2 20h29.6c3.4 0 5.6.9 6.8 2.4.4.5.1 1-.6 1H11.4c-2 0-3.2-.6-3.6-1.9Z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' d='M16.5 14.1 14.6 20.2M20.4 14.4 20 20.2M30.2 15.5 30.8 20.2M34.2 15.2 36.2 20.2M43.4 6.4c.7 3.9.7 8.3 0 12.2'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .5s var(--ease)}
.btn.primary:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--red-hi) 0%,var(--red) 46%,#8B1030 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.2),0 18px 36px -12px rgba(200,32,30,.8),0 0 0 6px rgba(247,160,138,.22)}
.btn.primary:hover::before{top:34%}
.btn.primary:hover::after{transform:translate(6px,-4px) rotate(-12deg)}
.btn.primary:active{transform:translateY(0) scale(.98)}
.btn.primary:active::after{transform:translate(2px,0)}
@media(prefers-reduced-motion:no-preference){.btn.primary:hover::before{animation:swell 1.6s linear infinite}}
@keyframes swell{to{background-position-x:80px}}

.btn.ghost,.btn.ink{
  background:var(--stamp-bg);color:var(--stamp-fg);border:0;border-radius:3px;padding:0 28px;
  --perf:radial-gradient(4.5px at 50% 0,#0000 95%,#000) 50% 0/11px 51% repeat-x,radial-gradient(4.5px at 50% 100%,#0000 95%,#000) 50% 100%/11px 51% repeat-x;
  -webkit-mask:var(--perf);mask:var(--perf);
  transition:transform .25s var(--ease),background-color .25s}
.btn.ghost::before,.btn.ink::before{content:"";position:absolute;inset:8px 9px;border:1.5px dashed currentColor;border-radius:2px;opacity:.55;transition:opacity .2s,inset .25s var(--ease)}
.btn.ghost:hover,.btn.ink:hover{background:var(--stamp-bg);border:0;transform:translateY(-2px) rotate(-1.5deg)}
.btn.ghost:hover::before,.btn.ink:hover::before{opacity:1;inset:7px 8px}
.btn.ghost:active,.btn.ink:active{transform:scale(.97) rotate(0)}
.btn.ghost:focus-visible,.btn.ink:focus-visible{outline:none}
.btn.ghost:focus-visible::before,.btn.ink:focus-visible::before{border:3px solid var(--focus);opacity:1}
.sheet .btn.ghost,.buybar .btn.ghost{justify-content:center}
.nav .btn.primary{min-height:48px;padding:0 20px}

/* =====================================================================
   HOME HERO: day sky or night sky, a big logo in front of the sun or
   moon, palm fronds hanging in from the corners
   ===================================================================== */
.hero{padding-top:clamp(28px,5vw,64px)}
.hero .sky{background:linear-gradient(180deg,#7FCDE6 0%,#B6E6EE 38%,#E9F7EE 70%,#E4F5EF 100%)}
.hero .stars{opacity:0;transition:opacity .6s}
:root[data-theme="dark"] .hero .sky{background:radial-gradient(1200px 600px at 70% -10%,#12456a 0%,transparent 60%),linear-gradient(180deg,#061A2C 0%,#07233A 55%,#0B3A50 100%)}
:root[data-theme="dark"] .hero .stars{opacity:1}
.hero .path{opacity:.75}
.hero .path path,.hero .path circle{stroke:var(--route-c)}
.hero .path circle:last-child{fill:var(--route-c)}
.hero-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,56px);align-items:center}
.hero-copy{max-width:720px}
.hero h1{color:var(--fg);font-size:clamp(46px,6.2vw,92px)}
.hero h1 .ital{color:var(--accent)}
:root[data-theme="dark"] .hero h1 .ital{color:#F7A08A}
.hero-art{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-width:520px;width:100%;margin-left:auto}
.hero-art .orb{position:absolute;width:88%;transform:translate(12%,-10%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#FFE59A 0%,#FFC25C 45%,#F7864E 100%);
  box-shadow:0 0 0 18px rgba(255,214,120,.22),0 0 0 44px rgba(255,214,120,.12),0 0 120px 40px rgba(247,134,78,.35)}
:root[data-theme="dark"] .hero-art .orb{background:radial-gradient(circle at 42% 38%,#FFFDF0 0%,#F4EBC8 55%,#D9CFA6 100%);box-shadow:0 0 0 18px rgba(253,248,220,.07),0 0 0 44px rgba(253,248,220,.04),0 0 120px 30px rgba(253,248,220,.18)}
.hero-art img{position:relative;width:100%;height:auto;filter:drop-shadow(0 24px 30px rgba(8,45,67,.28))}
@media(prefers-reduced-motion:no-preference){.hero-art img{animation:float 7s ease-in-out infinite}}
@keyframes float{50%{transform:translateY(-10px) rotate(-1deg)}}
.palm{position:absolute;pointer-events:none;color:var(--palm);z-index:-1}
.palm svg{width:100%;height:100%;display:block}
.palm.tl{left:-300px;top:-270px;width:540px;height:540px;transform:rotate(18deg)}
.palm.tr{right:-230px;top:-250px;width:560px;height:560px;transform:rotate(-24deg) scaleX(-1);color:var(--palm-2)}
.palm.fl{width:360px;height:280px}
:root[data-theme="dark"] .palm{opacity:.95}
.hero-shot .water path:first-child{fill:var(--water-1)}
.hero-shot .water path:last-child{fill:var(--water-2)}
.hero-toggle{margin-top:28px}
.hero-foot{color:var(--fg-2)}
@media(max-width:900px){
  .hero-top{grid-template-columns:1fr}
  .hero-art{order:-1;max-width:300px;margin:0 auto 8px}
  .palm.tl{width:300px;height:300px;left:-170px;top:-150px}
  .palm.tr{width:320px;height:320px;right:-170px;top:-170px}
}
@media(max-width:700px){.hero-art{max-width:250px}}

/* sub-page hero: same day/night sky, smaller */
.page-hero{background:linear-gradient(180deg,#86D0E7 0%,#C2EAF0 55%,#E4F5EF 100%)}
:root[data-theme="dark"] .page-hero{background:radial-gradient(900px 420px at 80% -20%,#12456a 0%,transparent 60%),linear-gradient(180deg,#061A2C 0%,#07233A 100%)}
.page-hero .path path{stroke:var(--route-c)}
.page-hero .palm.tr{width:440px;height:440px;right:-170px;top:-190px}
.page-hero .ph-sun{position:absolute;right:clamp(40px,12vw,220px);top:clamp(40px,8vw,90px);width:clamp(90px,12vw,170px);aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 50% 45%,#FFE59A 0%,#FFC25C 50%,#F7864E 100%);box-shadow:0 0 90px 30px rgba(247,134,78,.3)}
:root[data-theme="dark"] .page-hero .ph-sun{background:radial-gradient(circle at 42% 38%,#FFFDF0 0%,#E8DFBC 100%);box-shadow:0 0 90px 20px rgba(253,248,220,.15)}
@media(max-width:700px){.page-hero .ph-sun{right:24px;top:24px;width:80px}.page-hero .palm.tr{width:280px;height:280px;right:-130px;top:-130px}}

/* final band: sunset by day, moonlit by night, palms on the shore */
.final{background:linear-gradient(180deg,#FFD7B3 0%,#FFE9CF 45%,#FFF6E6 100%);color:#082D43;--fg:#082D43;--fg-2:#2B5162;--wave:#FFD7B3;isolation:isolate}
:root[data-theme="dark"] .final{background:radial-gradient(900px 500px at 50% 10%,#173E5A 0%,transparent 70%),linear-gradient(180deg,#061A2C,#0A2438);color:#FDF8DC;--fg:#FDF8DC;--fg-2:#CFE0E3;--wave:#061A2C}
:root[data-theme="dark"] .final{--stamp-bg:#FDF8DC;--stamp-fg:#082D43}
.final .orb{position:absolute;left:50%;top:clamp(60px,8vw,110px);transform:translateX(-50%);width:min(560px,90vw);aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 50% 45%,#FFD27A 0%,#FFAE63 50%,#F27B55 100%);opacity:.55;filter:blur(2px)}
:root[data-theme="dark"] .final .orb{background:radial-gradient(circle,#FDF8DC 0%,#E8DFBC 60%,transparent 70%);opacity:.12}
.final .palm.bl{left:-120px;bottom:-60px;width:420px;height:420px;transform:rotate(200deg)}
.final .palm.br{right:-120px;bottom:-60px;width:420px;height:420px;transform:rotate(160deg) scaleX(-1)}
.final img.logo{width:min(560px,82vw)}
@media(max-width:700px){.final .palm.bl,.final .palm.br{width:220px;height:220px;bottom:-40px}}

/* footer: always the deep lagoon */
footer{background:var(--foot-bg);color:#CFE0E3;--fg:#FDF8DC;--fg-2:#CFE0E3;--fg-3:#A9C3C8;--rule:rgba(253,248,220,.14);--wave:var(--foot-bg);border-top:0}
.foot .about img{height:84px}
.legal{color:#A9C3C8}

:root .field select{background-repeat:no-repeat;background-position:right 14px center;background-size:18px}

/* phone menu: scrolls if needed, current page in the accent colour */
.sheet{overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet ul{margin-top:14px}
.sheet li a{padding:11px 4px;font-size:25px}
.sheet .btn.primary{margin-top:22px}
:root .sheet li a[aria-current="page"]{color:var(--accent)}
:root[data-theme="dark"] .sheet li a[aria-current="page"]{color:#F7A08A}
/* bottom buy bar: room for both buttons */
.buybar .btn{min-width:0;padding:0 10px;gap:8px}
.buybar .btn.primary::after{width:24px;height:13px}
@media(max-width:370px){.buybar .btn.primary::after{display:none}}

/* ===== self-hosted fonts ===== */
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Yellowtail";src:url(/fonts/yellowtail.woff2) format("woff2");font-weight:400;font-display:swap}

/* the hero tagline script line in a retro postcard script */
.hero h1 .ital{font-family:"Yellowtail",cursive;font-style:normal;font-weight:400;font-size:1.12em;letter-spacing:0;line-height:1;display:inline-block;margin-top:.06em;padding-right:.08em;font-variation-settings:normal}

/* the next section's wavy edge no longer covers the last line of the hero */
.hero{padding-bottom:72px}
@media(max-width:700px){.hero{padding-bottom:44px}}

/* ===== nav links: a wave draws in under the word on hover ===== */
.navlinks a{position:relative;display:inline-block;padding:10px 2px;text-decoration:none!important;transition:color .2s,transform .25s var(--ease)}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:7px;background:var(--route-c);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 7'%3E%3Cpath d='M0 3.5C2.5 0 7.5 0 10 3.5s7.5 3.5 10 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/20px 7px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 7'%3E%3Cpath d='M0 3.5C2.5 0 7.5 0 10 3.5s7.5 3.5 10 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/20px 7px repeat-x;
  clip-path:inset(0 100% 0 0);transition:clip-path .4s var(--ease)}
.navlinks a::before{content:"";position:absolute;left:50%;top:-4px;width:6px;height:6px;border-radius:50%;background:var(--route-c);transform:translate(-50%,6px) scale(0);opacity:0;transition:transform .3s var(--ease),opacity .2s}
.navlinks a:hover{color:var(--fg);transform:translateY(-2px)}
.navlinks a:hover::after,.navlinks a:focus-visible::after,.navlinks a[aria-current="page"]::after{clip-path:inset(0 0 0 0)}
.navlinks a:hover::before{transform:translate(-50%,0) scale(1);opacity:1}
@media(prefers-reduced-motion:no-preference){.navlinks a:hover::after{animation:navwave 1.2s linear infinite}}
@keyframes navwave{to{-webkit-mask-position:20px 0;mask-position:20px 0}}
h1,h2{word-spacing:.06em}
.hero h1{letter-spacing:-.025em;word-spacing:.1em}

/* left palm lives on the shoreline beside the screenshot, never under the headline */
.palm.tl{top:auto;bottom:4%;left:-250px;width:520px;height:520px;transform:rotate(24deg)}
/* right palm stays in the corner, behind the logo, clear of the text column */
.palm.tr{right:-250px;top:-280px}
/* a soft halo keeps the words readable over anything behind them */
.hero h1,.page-hero h1{text-shadow:0 0 28px rgba(214,241,244,.95),0 0 10px rgba(214,241,244,.8)}
.hero .lede,.page-hero .lede{text-shadow:0 0 14px rgba(214,241,244,.9)}
:root[data-theme="dark"] .hero h1,:root[data-theme="dark"] .page-hero h1{text-shadow:0 0 28px rgba(6,26,44,.95),0 0 10px rgba(6,26,44,.8)}
:root[data-theme="dark"] .hero .lede,:root[data-theme="dark"] .page-hero .lede{text-shadow:0 0 14px rgba(6,26,44,.9)}
@media(max-width:900px){
  .palm.tl{top:-150px;bottom:auto;left:-170px;width:300px;height:300px;transform:rotate(18deg)}
  .palm.tr{right:-170px;top:-170px}
}
@media(max-width:700px){.page-hero .palm.tr{width:240px;height:240px;right:-120px;top:-150px}}

/* ===== soft clouds drifting across the sky ===== */
.cloud{position:absolute;z-index:-1;pointer-events:none;opacity:.78;filter:drop-shadow(0 6px 10px rgba(8,45,67,.06))}
.cloud svg{width:100%;height:100%;display:block}
.hero .cloud.c1{top:5%;left:30%;width:230px;height:94px}
.hero .cloud.c2{top:13%;left:58%;width:150px;height:62px;opacity:.6}
.hero .cloud.c3{top:2%;left:74%;width:280px;height:115px;opacity:.7}
.hero .cloud.c4{top:30%;left:4%;width:190px;height:78px;opacity:.45}
.hero .cloud.c5{top:42%;left:46%;width:130px;height:54px;opacity:.5}
.page-hero .cloud.c1{top:12%;left:38%;width:200px;height:82px}
.page-hero .cloud.c2{top:46%;left:62%;width:140px;height:58px;opacity:.55}
.page-hero .cloud.c3{top:6%;left:8%;width:150px;height:62px;opacity:.5}
:root[data-theme="dark"] .cloud{opacity:.07!important;filter:none}
@media(prefers-reduced-motion:no-preference){
  .cloud{animation:drift 60s ease-in-out infinite alternate}
  .cloud.c2{animation-duration:46s;animation-delay:-12s}
  .cloud.c3{animation-duration:75s;animation-delay:-30s}
  .cloud.c4{animation-duration:54s;animation-delay:-8s}
  .cloud.c5{animation-duration:40s;animation-delay:-20s}
}
@keyframes drift{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
@media(max-width:900px){
  .hero .cloud.c1{top:3%;left:22%;width:150px;height:62px}
  .hero .cloud.c2{top:18%;left:62%;width:110px;height:46px}
  .hero .cloud.c3,.hero .cloud.c5{display:none}
  .hero .cloud.c4{top:34%;left:-6%;width:130px;height:54px}
  .page-hero .cloud.c2,.page-hero .cloud.c3{display:none}
  .page-hero .cloud.c1{left:30%;width:140px;height:58px}
}
/* keep clouds in open sky, off the text */
.hero .cloud.c1{top:1.2%;left:44%}
.hero .cloud.c4{top:34%;left:-4%}
.hero .cloud.c5{top:37%;left:84%}
.page-hero .cloud.c1{top:5%;left:54%}
.page-hero .cloud.c3{top:70%;left:78%}
@media(max-width:900px){
  .hero .cloud.c1{top:1%;left:30%}
  .hero .cloud.c4{top:30%;left:-14%}
  .page-hero .cloud.c1{top:3%;left:44%;width:110px;height:46px}
}

/* ===== hero: ends after the call to action ===== */
.hero{padding-bottom:clamp(64px,8vw,110px)}
/* left palm hugs the page edge: its right tip always stops short of the text column */
.palm.tl{top:-230px;bottom:auto;width:520px;height:520px;transform:rotate(18deg);left:calc(-520px + max(0px, (100vw - 1200px) / 2 + 36px))}
/* clouds stay in open sky, off the words */
.hero .cloud.c1{top:3%;left:46%}
.hero .cloud.c2{top:16%;left:60%}
.hero .cloud.c3{top:1%;left:76%}
.hero .cloud.c4{top:78%;left:-6%}
.hero .cloud.c5{top:84%;left:58%}
.page-hero .cloud.c1{top:6%;left:55%}
.page-hero .cloud.c3{top:72%;left:80%}
@media(max-width:900px){
  .palm.tl{top:-150px;left:-170px;width:300px;height:300px}
  .hero .cloud.c1{top:1%;left:32%}
  .hero .cloud.c4{top:88%;left:-12%}
  .page-hero .cloud.c1{top:3%;left:46%;width:110px;height:46px}
}

/* ===== feature grid, right under the hero ===== */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--solid);border:1px solid var(--rule);text-decoration:none;color:var(--fg);box-shadow:0 18px 40px -28px rgba(8,45,67,.35);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s}
.fthumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--rule)}
.fthumb img{width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .6s var(--ease)}
.fthumb img[data-pos="right"]{object-position:right top}
.fthumb img[data-pos="center"]{object-position:center top}
.fbody{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;flex:1}
.fbody b{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.fbody>span{color:var(--fg-2);font-size:16px;line-height:1.5}
.fbody i{margin-top:auto;padding-top:10px;font-style:normal;font-weight:600;font-size:15px;color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.fbody i svg{width:17px;height:17px;transition:transform .25s var(--ease)}
.fcard:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 60px -30px rgba(8,45,67,.5);border-color:var(--water-2)}
.fcard:hover .fthumb img{transform:scale(1.06)}
.fcard:hover .fbody i svg{transform:translateX(4px)}
.fcard:focus-visible{outline-offset:4px}
:root[data-theme="dark"] .fcard{box-shadow:0 18px 40px -28px rgba(0,0,0,.7)}
:root[data-theme="dark"] .fbody i{color:#F7A08A}
.fmore{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}
.fmore>span{color:var(--fg-2);max-width:70ch;font-size:16.5px}
.fmore .more{margin-top:0}
@media(max-width:1000px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .fgrid{grid-template-columns:1fr;gap:12px}
  .fcard{flex-direction:row;align-items:stretch;border-radius:16px}
  .fthumb{width:38%;flex:none;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--rule)}
  .fbody{padding:14px 14px 14px 16px;gap:4px}
  .fbody b{font-size:19px}
  .fbody>span{font-size:15px}
  .fbody i{padding-top:6px;font-size:14.5px;min-height:28px}
}
@media(prefers-reduced-motion:reduce){.fcard,.fthumb img{transition:none}.fcard:hover{transform:none}}

/* ===== app showcase: the switch sits right above the screenshot it changes ===== */
.head.center{text-align:center;margin-left:auto;margin-right:auto}
.head.center .lede{margin-left:auto;margin-right:auto}
.showcase{overflow:hidden}
.showcase .head{margin-bottom:24px}
.show-toggle{margin:0 0 28px!important}
.showcase .hero-shot{margin-top:0;padding-bottom:40px}
.showcase .hero-shot .frame{margin:0 auto}
.showcase .hero-shot .phone{right:-8px;bottom:-2%}
@media(max-width:1100px){.showcase .hero-shot .phone{right:0}}

/* ===== feature index: every feature, one tap to jump to it ===== */
html{scroll-padding-top:104px}
.findex{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ftile{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 16px;border-radius:16px;background:var(--solid);border:1px solid var(--rule);color:var(--fg);text-decoration:none;position:relative;overflow:hidden;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s var(--ease)}
.ftile::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:6px;background:var(--route-c);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 7'%3E%3Cpath d='M0 3.5C2.5 0 7.5 0 10 3.5s7.5 3.5 10 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/18px 6px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 7'%3E%3Cpath d='M0 3.5C2.5 0 7.5 0 10 3.5s7.5 3.5 10 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/18px 6px repeat-x;
  clip-path:inset(0 100% 0 0);transition:clip-path .45s var(--ease)}
.fic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#BDEAE0,#7FD3C3);color:#0B4A4E;transition:transform .35s var(--ease)}
:root[data-theme="dark"] .fic{background:linear-gradient(160deg,#14485A,#0E3A4A);color:#8ED9CB}
.fic svg{width:24px;height:24px}
.ftx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ftx b{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.2;letter-spacing:-.005em}
.ftx span{font-size:14.5px;color:var(--fg-2);line-height:1.35}
.ftile:hover{transform:translateY(-3px);border-color:var(--water-2);box-shadow:0 16px 30px -20px rgba(8,45,67,.45)}
.ftile:hover .fic{transform:rotate(-8deg) scale(1.08)}
.ftile:hover::after{clip-path:inset(0 0 0 0)}
.ftile:active{transform:translateY(0) scale(.98)}
@media(max-width:1100px){.findex{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.findex{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .findex{gap:8px}
  .ftile{flex-direction:column;align-items:flex-start;gap:10px;min-height:0;padding:14px 12px 16px}
  .fic{width:40px;height:40px}.fic svg{width:21px;height:21px}
  .ftx b{font-size:16.5px}
  .ftx span{display:none}
}
@media(prefers-reduced-motion:reduce){.ftile,.fic{transition:none}.ftile:hover{transform:none}}
/* where a jump lands, the feature glows for a moment */
.flash{animation:flash 1.8s var(--ease)}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 rgba(55,181,162,0)}18%{box-shadow:0 0 0 6px rgba(55,181,162,.55),0 0 40px 6px rgba(55,181,162,.35)}}
#exports,#blog-plan,#why .why{border-radius:16px}

/* ===== the AI rulebook ===== */
.rulebook{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);margin-top:clamp(36px,5vw,56px);padding:clamp(24px,3vw,36px);border-radius:var(--r-lg);position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(55,181,162,.16),rgba(247,160,138,.14));border:1px solid var(--rule)}
.rulebook::before{content:"";position:absolute;right:-30px;top:-30px;width:160px;height:160px;border-radius:50%;border:2px dashed var(--rule-2);opacity:.6}
.rb-copy h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:12px}
.rb-copy p{color:var(--fg-2)}
.rb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;counter-reset:rb}
.rb-list li{counter-increment:rb;position:relative;padding-left:40px;color:var(--fg-2);font-size:16px}
.rb-list li::before{content:counter(rb);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:700 14px/1 var(--sans);background:var(--fg);color:var(--bg);transform:rotate(-4deg)}
.rb-list b{display:block;color:var(--fg);font-weight:600}
@media(max-width:900px){.rulebook{grid-template-columns:1fr}}
@media(max-width:620px){.rb-list{grid-template-columns:1fr}}

/* =====================================================================
   v8: script accents, feature icons, AI costs, focus + sounds,
   the Blog Ideas voyage, About, and the blog
   ===================================================================== */

/* ---------- Yellowtail, the accent script, everywhere it belongs ---------- */
.ital{font-family:"Yellowtail",cursive;font-style:normal;font-weight:400;letter-spacing:0;font-variation-settings:normal;color:var(--accent)}
h1 .ital,h2 .ital,h3 .ital{font-size:1.12em;line-height:.95}
.runner{font-family:"Yellowtail",cursive!important;font-style:normal!important;font-weight:400;font-size:clamp(25px,2.4vw,30px)!important;line-height:1.15;letter-spacing:0;margin-bottom:8px;font-variation-settings:normal!important}
.stack .vs{font-family:"Yellowtail",cursive;font-style:normal;font-size:38px;color:var(--accent)}
.sig{font-family:"Yellowtail",cursive;font-weight:400;color:var(--accent);line-height:1}

/* ---------- forced-night section (focus mode) ---------- */
:root .sec.night{--bg:#071C2E;--wave:#071C2E;--fg:#FDF8DC;--fg-2:#CFE0E3;--fg-3:#A9C0C8;--rule:rgba(253,248,220,.14);--rule-2:rgba(253,248,220,.3);
  --card:rgba(253,248,220,.06);--solid:#0E2A40;--field:#08213A;--runner:#7FD8C6;--accent:#F7A08A;--stamp-bg:#FDF8DC;--stamp-fg:#082D43;--focus:#F7C46B;--water-1:#1B6E68;--water-2:#37B5A2;
  color:var(--fg);background:radial-gradient(1100px 520px at 88% -10%,rgba(55,181,162,.2),transparent 62%),radial-gradient(900px 420px at -5% 105%,rgba(247,160,138,.12),transparent 60%),#071C2E;overflow:hidden}
.sec.night::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.2px 1.2px at 8% 12%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 22% 30%,#fff 50%,transparent 52%),radial-gradient(1.4px 1.4px at 37% 8%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 55% 22%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 71% 6%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 86% 26%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 94% 9%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 63% 38%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 14% 44%,#fff 50%,transparent 52%)}
.sec.night>.wrap{position:relative;z-index:1}
.sec.night .frame{box-shadow:0 60px 120px -40px rgba(0,0,0,.75),0 0 0 1px rgba(253,248,220,.12),0 0 90px -20px rgba(55,181,162,.35)}

/* ---------- an icon on every line of "What's in the box" ---------- */
.every li{padding:5px 0 5px 38px}
.every li::before{display:none}
.every .ei{position:absolute;left:0;top:4px;width:27px;height:27px;padding:5px;border-radius:8px;box-sizing:border-box;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)}
:root[data-theme="dark"] .every .ei{background:rgba(247,160,138,.12)}

/* ---------- AI costs ---------- */
.coststrip{margin-top:clamp(36px,5vw,56px);padding:clamp(18px,2.6vw,28px);border-radius:22px;background:var(--card);border:1px solid var(--rule)}
.coststrip .cs-h{color:var(--fg-2);margin:0 0 16px;max-width:70ch}
.coststrip .cs-h b{color:var(--fg)}
.coststrip ul{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.coststrip li{padding:16px;border-radius:16px;background:var(--solid);border:1px solid var(--rule)}
.coststrip li b{display:block;font-family:var(--display);font-size:clamp(28px,3vw,36px);font-weight:600;color:var(--accent);line-height:1.1}
.coststrip li span{font-size:14.5px;color:var(--fg-2)}
@media(max-width:860px){.coststrip ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
table.costs th small,table.costs td small{display:block;font:400 13px/1.4 var(--sans);color:var(--fg-3);margin-top:3px;letter-spacing:0;text-transform:none}
table.costs thead th small{color:inherit;opacity:.75}
table.costs tbody tr:last-child th,table.costs tbody tr:last-child td{border-top:2px solid var(--rule-2);font-weight:600}
.cost-notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px;color:var(--fg-2)}
.cost-notes b{color:var(--fg)}
@media(max-width:760px){.cost-notes{grid-template-columns:1fr}}

/* ---------- focus mode (writing page) ---------- */
.focus-stage{position:relative;margin-top:8px}
.focus-stage .frame{aspect-ratio:16/10}
.focus-stage .frame img{width:100%;height:100%;object-fit:cover;object-position:center top}
.focus-stage .frame img[data-pos="right"],.fh-shot .frame img[data-pos="right"]{object-position:center top}
@media(max-width:620px){.focus-stage .frame img[data-pos="right"],.fh-shot .frame img[data-pos="right"]{object-position:right top}.fh-shot .frame{aspect-ratio:4/3}}
.fs-badges{position:absolute;left:clamp(12px,3vw,32px);bottom:clamp(12px,3vw,32px);display:flex;flex-wrap:wrap;gap:8px}
.fs-badges span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 11px;border-radius:999px;background:rgba(6,26,44,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#FDF8DC;font:600 13.5px/1 var(--sans);border:1px solid rgba(253,248,220,.2)}
.fbi{width:16px;height:16px;color:#7FD8C6}
@media(prefers-reduced-motion:no-preference){.fs-badges span{animation:bob 6s ease-in-out infinite}.fs-badges span:nth-child(2){animation-delay:-2s}.fs-badges span:nth-child(3){animation-delay:-4s}}
@keyframes bob{50%{transform:translateY(-6px)}}
@media(max-width:620px){.fs-badges span:nth-child(n+2){display:none}.focus-stage .frame{aspect-ratio:4/3}}
.anatomy{list-style:none;padding:0;margin:clamp(32px,5vw,56px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.ani,.vpi,.bic{display:block;width:42px;height:42px;padding:9px;border-radius:12px;background:var(--card);border:1px solid var(--rule);color:var(--runner);box-sizing:border-box;margin-bottom:12px}
.anatomy h3{font-size:21px;margin-bottom:6px}
.anatomy p{color:var(--fg-2);margin:0;font-size:16px}
@media(max-width:900px){.anatomy{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.anatomy{grid-template-columns:1fr}}
.sess-wrap{margin-top:clamp(40px,6vw,72px);padding:clamp(22px,3vw,36px);border-radius:24px;background:var(--card);border:1px solid var(--rule)}
.sess-h{font-size:clamp(26px,3vw,36px);margin-bottom:22px}
.session{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.session li{counter-increment:s;position:relative;padding-top:54px}
.session li::before{content:counter(s);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#071C2E;font:700 16px/1 var(--sans)}
.session li::after{content:"";position:absolute;top:20px;left:50px;right:-8px;border-top:2px dashed var(--rule-2)}
.session li:last-child::after{display:none}
.session li>b{display:block;font-family:var(--display);font-size:20px;font-weight:500;margin-bottom:4px;color:var(--fg)}
.session span{color:var(--fg-2);font-size:15px;display:block}
@media(max-width:900px){.session{grid-template-columns:1fr;gap:0}.session li{padding:4px 0 22px 58px}.session li::after{top:46px;left:19px;right:auto;bottom:2px;border-top:0;border-left:2px dashed var(--rule-2)}}

/* ---------- the live mixer ---------- */
.mixer{background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:clamp(18px,2.4vw,26px);min-width:0}
.paper .mixer,.cream .mixer{background:var(--solid);box-shadow:0 30px 70px -40px rgba(8,45,67,.4)}
.mx-top{display:flex;gap:16px;align-items:center}
.mx-play{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 24px 0 8px;border-radius:999px;flex:none;
  background:linear-gradient(135deg,#F2784B,#E0533C 55%,#C93F5B);color:#fff;font:600 16px/1 var(--sans);box-shadow:0 14px 30px -12px rgba(224,83,60,.7);transition:transform .2s var(--ease),box-shadow .2s}
.mx-play:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(224,83,60,.8)}
.mx-play .on-off{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
.mx-play svg{grid-area:1/1;width:18px;height:18px}
.mx-play .st,.mx-play[aria-pressed="true"] .pl{display:none}
.mx-play[aria-pressed="true"] .st{display:block}
@media(prefers-reduced-motion:no-preference){.mx-play[aria-pressed="true"] .on-off{animation:ring 1.8s ease-out infinite}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
.mx-t,.tr-t{font-family:var(--display);font-size:21px;font-weight:600;color:var(--fg);margin:0;line-height:1.2}
.mx-s,.tr-s{font-size:14px;color:var(--fg-3);margin:3px 0 0}
.mx-h{font:600 12px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin:22px 0 10px}
.mx-h span{text-transform:none;letter-spacing:0;font-weight:400;margin-left:6px}
.mx-scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mx-scenes button{appearance:none;text-align:left;cursor:pointer;border:1px solid var(--rule-2);background:transparent;color:var(--fg);border-radius:14px;padding:10px 12px;min-height:58px;font:inherit;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.mx-scenes button:hover{border-color:var(--fg-2);transform:translateY(-1px)}
.mx-scenes b{display:block;font:600 15px/1.2 var(--sans)}
.mx-scenes small{display:block;font-size:12.5px;color:var(--fg-3);margin-top:3px;line-height:1.3}
.mx-scenes button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.mx-scenes button[aria-pressed="true"] small{color:inherit;opacity:.75}
.mx-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 18px}
.mixer.compact .mx-list{grid-template-columns:1fr 1fr}
.mx-row{display:flex;align-items:center;gap:8px;padding:2px 6px 2px 2px;border-radius:14px;transition:background .25s;min-width:0}
.mx-row.on{background:color-mix(in srgb,var(--water-2) 14%,transparent)}
.mx-tg{appearance:none;border:0;background:none;color:var(--fg-2);display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:52px;cursor:pointer;text-align:left;font:inherit;padding:0 4px;border-radius:10px}
.mx-tg>span{min-width:0}
.mx-tg b{display:block;font:600 14.5px/1.25 var(--sans);color:var(--fg)}
.mx-tg small{display:block;font-size:12.5px;color:var(--fg-3);line-height:1.35}
.mxi{width:36px;height:36px;padding:8px;border-radius:11px;flex:none;background:var(--card);border:1px solid var(--rule);color:var(--fg-2);box-sizing:border-box;transition:background .25s,color .25s}
.mx-row.on .mxi{background:var(--water-2);border-color:var(--water-2);color:#fff}
.mx-eq{display:none;gap:2px;align-items:flex-end;height:14px;margin-left:auto;flex:none}
.mx-eq i{display:block;width:3px;height:100%;background:var(--water-2);border-radius:2px;transform-origin:bottom}
.mx-row.on .mx-eq{display:inline-flex}
@media(prefers-reduced-motion:no-preference){.mx-row.on .mx-eq i{animation:eq .9s ease-in-out infinite alternate}.mx-eq i:nth-child(2){animation-delay:-.3s!important}.mx-eq i:nth-child(3){animation-delay:-.6s!important}}
@keyframes eq{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
.mx-row input[type="range"]{width:92px;flex:none;height:44px;margin:0;accent-color:var(--water-2);background:transparent;cursor:pointer}
.mx-row:not(.on) input[type="range"]{opacity:.45}
.mx-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.mx-timer{font-size:14.5px;color:var(--fg-2);display:flex;align-items:center;gap:8px}
.mx-timer select{min-height:44px;border-radius:10px;border:1px solid var(--rule-2);background:var(--field);color:var(--fg);padding:0 10px;font:inherit}
.mx-status{font-size:14px;color:var(--fg-3);margin:0}
.mixer.compact .mx-row input[type="range"]{width:70px}
@media(max-width:640px){.mx-list,.mixer.compact .mx-list{grid-template-columns:1fr}.mx-top{flex-direction:column;align-items:flex-start}.mx-row input[type="range"],.mixer.compact .mx-row input[type="range"]{width:110px}}

/* the soundtrack */
.tracks{background:var(--solid);border:1px solid var(--rule);border-radius:24px;padding:clamp(18px,2.4vw,26px);min-width:0;box-shadow:0 30px 70px -40px rgba(8,45,67,.4)}
.tr-hd{display:flex;gap:12px;align-items:center}
.tri{width:46px;height:46px;padding:11px;border-radius:13px;flex:none;background:var(--inv-bg);color:var(--inv-fg);box-sizing:border-box}
.tr-moods{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 8px}
.tr-moods button{appearance:none;cursor:pointer;min-height:44px;padding:0 13px;border-radius:999px;border:1px solid var(--rule-2);background:transparent;color:var(--fg-2);font:500 14px/1 var(--sans)}
.tr-moods i{font-style:normal;opacity:.6;margin-left:3px}
.tr-moods [aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tr-list{list-style:none;margin:0;padding:0;columns:2;column-gap:36px}
.tr-list li{break-inside:avoid}
@media(max-width:760px){.tr-list{columns:1}}
.tr-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto 44px;gap:10px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--rule);font-size:15px}
.tr-list li[hidden]{display:none}
.tn{color:var(--fg-3);font-variant-numeric:tabular-nums;font-size:13px}
.tr-list b{font-weight:600;color:var(--fg)}
.tm{font:600 11px/1 var(--sans);color:var(--fg-3);text-transform:uppercase;letter-spacing:.07em}
.tl{text-align:right;color:var(--fg-3);font-variant-numeric:tabular-nums;font-size:13.5px}
.tr-note{display:flex;gap:10px;font-size:14px;color:var(--fg-2);margin:14px 0 0}
.tni{width:18px;height:18px;flex:none;margin-top:2px;color:var(--water-2)}
.snd-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:16px}
.mixer:not(.compact) .mx-scenes{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
@media(max-width:520px){.tr-list li{grid-template-columns:24px minmax(0,1fr) 40px}.tm{display:none}}

/* home: focus + sounds */
.fh-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
.fh-shot .frame{aspect-ratio:16/10}
.fh-shot .frame img{width:100%;height:100%;object-fit:cover;object-position:center top}
.fh-stats{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fh-stats li{padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--rule)}
.fh-stats b{display:block;font-family:var(--display);font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--accent);font-weight:600}
.fh-stats span{font-size:13.5px;color:var(--fg-2);display:block;margin-top:4px}
#focus>.wrap>.more{margin-top:30px}
@media(max-width:980px){.fh-grid{grid-template-columns:1fr}}
@media(max-width:520px){.fh-stats{grid-template-columns:1fr 1fr}}

/* ---------- Blog Ideas: the voyage ---------- */
.voyage-demo{--v-bg:#0B2A40;--v-fg:#FDF8DC;--v-fg3:#A9C0C8;--v-gold:#F7C46B;--v-green:#62D6A9;--v-sun:#F2784B;
  position:relative;background:radial-gradient(700px 300px at 100% 0,rgba(55,181,162,.16),transparent 60%),repeating-linear-gradient(0deg,transparent 0 39px,rgba(253,248,220,.035) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(253,248,220,.035) 39px 40px),var(--v-bg);
  color:var(--v-fg);border-radius:24px;border:1px solid rgba(253,248,220,.1);padding:clamp(18px,2.6vw,30px);box-shadow:0 40px 90px -40px rgba(8,45,67,.65);min-width:0}
.vd-hd{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.vd-k{font:600 11.5px/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--v-gold);margin:0 0 6px}
.vd-hd h3{font-size:clamp(24px,2.6vw,32px);color:var(--v-fg)}
.vd-s{font-size:14px;color:var(--v-fg3);margin:4px 0 0}
.vd-ring{display:flex;align-items:center;gap:10px;flex:none}
.vd-ring svg{width:58px;height:58px;transform:rotate(-90deg)}
.vd-ring circle{fill:none;stroke:rgba(253,248,220,.15);stroke-width:6}
.vd-ring circle.p{stroke:var(--v-green);stroke-linecap:round}
.vd-ring b{display:block;font:700 22px/1 var(--sans)}
.vd-ring small{font-size:12px;color:var(--v-fg3)}
.vd-route-wrap{display:flex;align-items:center;gap:6px;margin-top:16px}
.vd-nav{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(253,248,220,.25);background:transparent;color:var(--v-fg);cursor:pointer;display:grid;place-items:center}
.vd-nav:hover{border-color:var(--v-gold);color:var(--v-gold)}
.vd-nav svg{width:20px;height:20px}
.vd-route{flex:1;min-width:0;display:flex;overflow-x:auto;scrollbar-width:none;position:relative;padding:30px 0 4px;scroll-behavior:smooth;-webkit-mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.vd-route::-webkit-scrollbar{display:none}
.wk{position:relative;flex:0 0 44px;height:62px;appearance:none;border:0;background:transparent;color:var(--v-fg3);cursor:pointer;padding:0}
.wk::before{content:"";position:absolute;left:0;right:0;top:21px;border-top:2px dashed rgba(253,248,220,.22)}
.wk:first-of-type::before{left:50%}.wk:nth-of-type(52)::before{right:50%}
.wk i{position:absolute;left:50%;top:13px;width:18px;height:18px;margin-left:-9px;border-radius:50%;border:2px solid var(--v-gold);background:var(--v-bg);box-sizing:border-box;transition:transform .2s var(--ease),box-shadow .2s}
.wk.pub i{background:var(--v-green);border-color:var(--v-green)}
.wk.under i{background:var(--v-gold)}
.wk.now i{background:var(--v-sun);border-color:var(--v-fg)}
.wk span{position:absolute;left:0;right:0;top:40px;font:500 11px/1 var(--sans);text-align:center}
.wk:hover i{transform:scale(1.25)}
.wk[aria-pressed="true"] i{transform:scale(1.4);box-shadow:0 0 0 4px rgba(253,248,220,.3)}
.wk[aria-pressed="true"] span{color:var(--v-fg);font-weight:700}
.wk.hl i{box-shadow:0 0 0 5px rgba(98,214,169,.5)}
.wk:focus-visible{outline:2px solid var(--v-gold);outline-offset:-2px;border-radius:8px}
.vd-plane{position:absolute;top:0;left:0;width:36px;height:20px;margin-left:4px;color:var(--v-fg);transition:left .6s var(--ease);pointer-events:none}
.vd-plane svg{width:100%;height:100%;display:block}
.vd-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--v-fg3);margin:8px 0 0}
.vd-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;border:2px solid var(--v-gold);margin-right:6px;vertical-align:-1px;box-sizing:border-box}
.vd-legend i.under{background:var(--v-gold)}.vd-legend i.pub{background:var(--v-green);border-color:var(--v-green)}.vd-legend i.now{background:var(--v-sun);border-color:var(--v-fg)}
.vd-orders{margin-top:22px;min-height:200px}
.vo-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.vo-k{font:600 11.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--v-gold);margin:0}
.vo-t{font-family:var(--display);font-size:24px;margin:2px 0 0;color:var(--v-fg)}
.vo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px}
.order{background:#FFF9EC;color:#082D43;border-radius:14px;padding:16px;position:relative;min-height:176px;display:flex;flex-direction:column;box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
@media(prefers-reduced-motion:no-preference){.order{animation:deal .45s var(--ease) both}.order:nth-child(2){animation-delay:.06s}.order:nth-child(3){animation-delay:.12s}}
@keyframes deal{from{opacity:0;transform:translateY(10px) rotate(-1.5deg)}}
.ostamp{position:absolute;top:12px;right:12px;width:54px;height:54px;border-radius:50%;border:2px dashed #B3301E;color:#B3301E;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform:rotate(-10deg);line-height:1}
.ostamp b{font:700 15px/1 var(--sans)}
.ostamp i{font:600 9px/1 var(--sans);font-style:normal;max-width:46px;text-align:center}
.otrack{font:700 10.5px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#137A52;margin:0 62px 8px 0}
.order.log .otrack{color:#97500F}
.order h4{font-family:var(--display);font-size:18px;font-weight:600;line-height:1.22;margin:0 52px 10px 0;letter-spacing:-.01em}
.okw{font-size:12.5px;color:#4B6B79;margin:0 0 auto}
.oisle{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#2B5162;margin:12px 0 0}
.oisle svg{width:16px;height:16px;color:#137A52}
.order.wild{background:linear-gradient(135deg,#FFF1D6,#FFE1CC)}
.order.draw{appearance:none;cursor:pointer;background:transparent;border:2px dashed rgba(253,248,220,.35);color:var(--v-fg);text-align:left;font:inherit;justify-content:center;gap:8px;box-shadow:none}
.order.draw svg{width:28px;height:28px;color:var(--v-gold)}
.order.draw b{font-family:var(--display);font-size:20px;font-weight:600}
.order.draw span{font-size:14px;color:var(--v-fg3)}
.order.draw:hover{border-color:var(--v-gold);background:rgba(247,196,107,.06)}
.vd-isles{margin-top:24px;padding-top:18px;border-top:1px solid rgba(253,248,220,.14)}
.vd-ih{display:flex;align-items:center;gap:8px;font:600 15px/1.3 var(--sans);margin:0 0 12px;flex-wrap:wrap;color:var(--v-fg)}
.vd-ih span{font-weight:400;color:var(--v-fg3);font-size:13.5px}
.isi{width:18px;height:18px;color:var(--v-green);flex:none}
.isles{display:flex;flex-wrap:wrap;gap:8px}
.isles button{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(253,248,220,.22);background:rgba(253,248,220,.05);color:var(--v-fg);font:500 calc(12.5px + var(--n) * .12px)/1 var(--sans)}
.isles i{font-style:normal;color:var(--v-fg3);font-size:12px}
.flg{width:14px;height:14px;color:var(--v-green)}
.isles button:hover{border-color:var(--v-green)}
.isles [aria-pressed="true"]{background:var(--v-green);color:#06202E;border-color:var(--v-green)}
.isles [aria-pressed="true"] i,.isles [aria-pressed="true"] svg{color:#06202E}
.vpoints{list-style:none;padding:0;margin:clamp(32px,4vw,48px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 28px}
.vpoints h3{font-size:20px;margin-bottom:6px}
.vpoints p{color:var(--fg-2);margin:0;font-size:15.5px}
@media(max-width:1000px){.vpoints{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vpoints{grid-template-columns:1fr}}
.vgallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(36px,5vw,56px)}
.vgallery figure{margin:0}
.vgallery .frame{aspect-ratio:16/10}
.vgallery .frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.vgallery figcaption{font-size:14.5px;color:var(--fg-2);margin-top:10px}
@media(max-width:860px){.vgallery{grid-template-columns:1fr}}
.plan-home{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(48px,6vw,80px)}
.ph-copy h3{font-size:clamp(28px,3.2vw,40px)}
.ph-copy>p:not(.runner){color:var(--fg-2);margin:14px 0 0}
.plan-home .vpoints{grid-template-columns:1fr 1fr;gap:18px 20px;margin:26px 0 22px}
.plan-home .vpoints h3{font-size:18px}
.plan-home .vpoints p{font-size:14.5px}
@media(max-width:980px){.plan-home{grid-template-columns:1fr}}
@media(max-width:480px){.plan-home .vpoints{grid-template-columns:1fr}}

/* ---------- ABOUT ---------- */
.about-hero .ab-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.about-hero h1{max-width:12ch}
.crew{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:28px}
.crew figure{display:flex;align-items:center;gap:12px;margin:0}
.crew img{width:66px;height:66px;border-radius:50%;object-fit:cover;border:3px solid #FFFBF2;box-shadow:0 10px 22px -10px rgba(8,45,67,.55)}
.crew b{display:block;font-family:"Yellowtail",cursive;font-weight:400;font-size:32px;line-height:1;color:var(--fg)}
.crew figcaption span{display:block;font:600 12px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2);margin-top:2px}
.crew .amp{font-family:"Yellowtail",cursive;font-size:44px;line-height:1;color:var(--accent)}
.ab-card{position:relative;margin:0 0 0 auto;max-width:560px;padding:14px 14px 0;background:#FFFBF2;border-radius:6px;transform:rotate(2.5deg);transition:transform .6s var(--ease);
  box-shadow:0 50px 90px -40px rgba(8,45,67,.6),0 2px 0 rgba(8,45,67,.06),0 0 0 1px rgba(8,45,67,.06)}
.ab-card:hover{transform:rotate(.5deg) translateY(-4px)}
.pc-photo{overflow:hidden;border-radius:3px;aspect-ratio:8/7;background:#9fd6e6}
.pc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ab-card figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;padding:12px 6px 16px;color:#082D43}
.ab-card .sig{font-size:clamp(36px,4vw,48px);color:#B3301E}
.ab-card figcaption small{font:600 11.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#4B6B79}
.stamp{position:absolute;display:block;width:86px;height:100px;padding:7px;background:#FFF9EC;box-sizing:border-box;box-shadow:0 6px 14px -6px rgba(8,45,67,.45);
  --perf:radial-gradient(4px at 4px 50%,#0000 95%,#000) -4px 0/100% 10px repeat-y,radial-gradient(4px at calc(100% - 4px) 50%,#0000 95%,#000) 4px 0/100% 10px repeat-y;
  -webkit-mask:radial-gradient(3.6px at 50% 0,#0000 95%,#000) 50% -3px/9px 51% repeat-x,radial-gradient(3.6px at 50% 100%,#0000 95%,#000) 50% calc(100% + 3px)/9px 51% repeat-x;
  mask:radial-gradient(3.6px at 50% 0,#0000 95%,#000) 50% -3px/9px 51% repeat-x,radial-gradient(3.6px at 50% 100%,#0000 95%,#000) 50% calc(100% + 3px)/9px 51% repeat-x}
.stamp img{width:100%;height:100%;object-fit:cover;border:1.5px solid rgba(8,45,67,.25);box-sizing:border-box}
.ab-card .stamp{top:-18px;right:-14px;transform:rotate(6deg)}
.postmark{position:absolute;width:118px;height:118px;color:rgba(179,48,30,.78);pointer-events:none;font-family:var(--sans)}
.ab-card .postmark{top:28px;right:52px;transform:rotate(-14deg);mix-blend-mode:multiply}
.cancel{position:absolute;width:150px;height:40px;color:rgba(179,48,30,.6);pointer-events:none}
.ab-card .cancel{top:66px;right:-26px;transform:rotate(-14deg)}
@media(max-width:900px){.about-hero .ab-grid{grid-template-columns:1fr}.ab-card{margin:8px auto 0;max-width:520px;transform:rotate(1.5deg)}}
@media(max-width:480px){.ab-card .stamp{width:64px;height:76px;right:-6px;top:-14px}.ab-card .postmark{width:88px;height:88px;right:36px;top:18px}.ab-card .cancel{width:110px;right:-14px;top:44px}.crew img{width:56px;height:56px}.crew b{font-size:28px}}

/* the story of the name */
.voyage{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);position:relative;counter-reset:st}
.stop{position:relative;padding-top:30px}
.stop .num{position:absolute;top:0;left:22px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;z-index:2;background:var(--accent);color:#FFF9EC;font:700 18px/1 var(--sans);box-shadow:0 0 0 6px color-mix(in srgb,var(--bg) 70%,transparent)}
.stop::before{content:"";position:absolute;top:22px;left:68px;right:calc(-1 * clamp(18px,2.4vw,28px) - 22px);border-top:2.5px dashed var(--route-c);opacity:.7;z-index:1}
.stop:nth-child(3n)::before,.stop:last-child::before{display:none}
.stop .card{height:100%;box-sizing:border-box;padding:40px 24px 26px;border-radius:22px;background:var(--card);border:1px solid var(--rule);position:relative;transition:transform .35s var(--ease),box-shadow .35s}
.stop .card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(8,45,67,.5)}
.sic{position:absolute;top:22px;right:22px;width:30px;height:30px;color:var(--runner);opacity:.8}
.kick{font:700 11.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin:0 40px 10px 0}
.stop h3{font-size:clamp(25px,2.4vw,31px);margin-bottom:12px}
.stop p:not(.kick){color:var(--fg-2);margin:0}
.stop .btn{margin-top:18px}
.stop:last-child .card{background:var(--inv-bg);color:var(--inv-fg);border-color:var(--inv-bg);--fg:var(--inv-fg);--fg-2:var(--inv-fg-2);--fg-3:var(--inv-fg-3)}
@media(max-width:900px){.voyage{grid-template-columns:1fr 1fr}.stop:nth-child(3n)::before{display:block}.stop:nth-child(2n)::before{display:none}}
@media(max-width:620px){.voyage{grid-template-columns:1fr;gap:0}.stop{padding:0 0 22px 64px}.stop::before,.stop:nth-child(3n)::before,.stop:nth-child(2n)::before{display:block;top:52px;left:22px;right:auto;bottom:0;border-top:0;border-left:2.5px dashed var(--route-c)}.stop:last-child::before{display:none}.stop .num{left:0}.stop .card{padding:24px 20px 22px}}

.beliefs{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.beliefs li{padding:24px;border-radius:20px;background:var(--card);border:1px solid var(--rule)}
.bic{color:var(--accent)}
.beliefs h3{font-size:22px;margin-bottom:8px}
.beliefs p{color:var(--fg-2);margin:0}
@media(max-width:900px){.beliefs{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.beliefs{grid-template-columns:1fr}}

/* postcard back */
.pc-back{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);background:#FFFBF2;color:#082D43;border-radius:8px;padding:clamp(22px,4vw,48px);box-shadow:0 50px 90px -46px rgba(8,45,67,.55),0 0 0 1px rgba(8,45,67,.08);transform:rotate(-.6deg)}
.pc-msg{padding-right:clamp(18px,3vw,40px);border-right:1.5px solid rgba(8,45,67,.18)}
.pc-msg p{font-family:var(--display);font-size:clamp(18px,1.6vw,20px);line-height:1.6;color:#1F4152;margin:0 0 14px}
.pc-msg .dear,.pc-msg .bye{font-family:"Yellowtail",cursive;font-size:clamp(30px,3vw,38px);color:#B3301E;line-height:1.1;margin-bottom:12px}
.pc-msg .bye{margin:22px 0 0;font-size:clamp(24px,2.4vw,30px);color:#2B5162}
.pc-msg .sig{font-size:clamp(42px,4.6vw,58px);color:#B3301E;margin:4px 0 0}
.pc-addr{position:relative;padding-left:clamp(18px,3vw,40px);padding-top:150px}
.pc-addr .stamp{top:0;right:0;transform:rotate(4deg)}
.pc-addr .postmark{top:14px;right:62px;transform:rotate(-12deg);mix-blend-mode:multiply}
.pc-addr .to{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#4B6B79;margin:0 0 6px}
.pc-addr .line{font-family:"Yellowtail",cursive;font-size:clamp(22px,2.1vw,27px);color:#082D43;margin:0;padding:10px 0 6px;border-bottom:1.5px solid rgba(8,45,67,.22);line-height:1.15}
:root[data-theme="dark"] .pc-back,:root[data-theme="dark"] .ab-card{box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(253,248,220,.1)}
@media(max-width:760px){.pc-back{grid-template-columns:1fr;transform:none}.pc-msg{padding:0 0 22px;border-right:0;border-bottom:1.5px solid rgba(8,45,67,.18)}.pc-addr{padding:24px 0 0 0;min-height:0}.pc-addr .stamp{position:relative;display:block;margin:0 0 16px auto;top:auto;right:auto}.pc-addr .postmark{top:24px;right:96px}}

/* ---------- BLOG ---------- */
.chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;font:600 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--inv-bg);color:var(--inv-fg)}
.duo{display:inline-flex;flex:none}
.duo img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--solid)}
.duo img+img{margin-left:-10px}
.blog-hero h1{max-width:14ch}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{appearance:none;cursor:pointer;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--rule-2);background:transparent;color:var(--fg-2);font:500 15px/1 var(--sans)}
.filters i{font-style:normal;opacity:.6;margin-left:3px}
.filters [aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pcard{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--solid);border:1px solid var(--rule);transition:transform .35s var(--ease),box-shadow .35s}
.pcard[hidden]{display:none}
.pcard:hover{transform:translateY(-4px);box-shadow:0 34px 70px -40px rgba(8,45,67,.55)}
.pc-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.pc-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.pc-img img[data-pos="right"]{object-position:right top}.pc-img img[data-pos="center"]{object-position:center}
.pcard:hover .pc-img img{transform:scale(1.04)}
.pc-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13.5px;color:var(--fg-3);margin:0 0 12px}
.meta span{display:inline-flex;align-items:center;gap:5px}
.meta .mic{width:14px;height:14px}
.pcard h2,.pcard h3{font-size:clamp(21px,1.9vw,24px);line-height:1.18;margin-bottom:10px}
.pcard h2 a,.pcard h3 a{color:var(--fg);text-decoration:none}
.pcard h2 a::after,.pcard h3 a::after{content:"";position:absolute;inset:0}
.pcard{position:relative}
.pc-img{position:relative;z-index:1}
.pcard h2 a:focus-visible,.pcard h3 a:focus-visible{outline:none}
.pcard:has(h2 a:focus-visible),.pcard:has(h3 a:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.ex{color:var(--fg-2);margin:0 0 18px;font-size:15.5px}
.by{display:flex;align-items:center;gap:10px;margin:auto 0 0;font:600 14px/1.2 var(--sans);color:var(--fg)}
.by .go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600}
.by .go svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.pcard:hover .by .go svg{transform:translateX(4px)}
.pcard.big{grid-column:1/-1;flex-direction:row}
.pcard.big .pc-img{flex:1.25;aspect-ratio:auto;min-height:380px}
.pcard.big .pc-body{flex:1;padding:clamp(24px,3vw,44px);justify-content:center}
.pcard.big h2{font-size:clamp(28px,3vw,42px)}
.pcard.big .ex{font-size:17px}
@media(max-width:980px){.pgrid{grid-template-columns:1fr 1fr}.pcard.big{flex-direction:column}.pcard.big .pc-img{min-height:0;aspect-ratio:16/10;flex:none}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}
.pgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.pgrid.three{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pgrid.three{grid-template-columns:1fr}}
.letter .lt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(24px,4vw,48px);border-radius:26px;background:var(--card);border:1px solid var(--rule)}
.lt-copy h2{font-size:clamp(30px,3.4vw,46px);margin-bottom:12px}
.lt-copy p:not(.runner){color:var(--fg-2);margin:0}
.lt-form{display:grid;gap:12px}
.lt-form .btn{justify-content:center}
@media(max-width:820px){.letter .lt{grid-template-columns:1fr}}

/* single post */
.post-hero{padding-bottom:clamp(90px,12vw,150px)}
.post-hero .wrap{max-width:900px}
.post-hero h1{max-width:20ch;font-size:clamp(36px,5.2vw,68px)}
.post-top{display:flex;align-items:center;gap:14px;margin:0 0 22px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--rule-2);color:var(--fg);text-decoration:none;font:600 14px/1 var(--sans);background:var(--card)}
.back svg{width:18px;height:18px}
.back:hover{border-color:var(--fg)}
.byline{display:flex;align-items:center;gap:12px;margin:26px 0 0}
.byline .duo img{width:46px;height:46px;border-width:3px}
.byline .duo img+img{margin-left:-14px}
.byline b{display:block;font-family:"Yellowtail",cursive;font-weight:400;font-size:28px;line-height:1;color:var(--fg)}
.byline span span{display:block;font-size:14px;color:var(--fg-2);margin-top:4px}
.post-cover{position:relative;z-index:3;margin-top:calc(-1 * clamp(70px,10vw,120px));max-width:1080px}
.post-cover .frame{aspect-ratio:16/9}
.post-cover .frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.post-cover .frame img[data-pos="right"]{object-position:right top}.post-cover .frame img[data-pos="center"]{object-position:center}
.post-sec{padding-top:clamp(40px,6vw,72px)}
.post-sec::before{display:none}
.post-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,72px);max-width:1080px;align-items:start}
.post-side{position:sticky;top:120px}
.otp summary{list-style:none;cursor:default;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:12px;pointer-events:none}
.otp summary::-webkit-details-marker{display:none}
.otp ol{list-style:none;margin:0 0 24px;padding:0;border-left:2px solid var(--rule)}
.otp a{display:block;padding:8px 0 8px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--fg-2);text-decoration:none;font-size:14.5px;line-height:1.35}
.otp a:hover{color:var(--fg)}
.otp a.on{color:var(--fg);border-left-color:var(--accent);font-weight:600}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.share>span{font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);width:100%;margin-bottom:4px}
.prose .share>span{width:auto;margin:0 6px 0 0}
.sh{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--rule-2);background:transparent;color:var(--fg);cursor:pointer;font:600 14px/1 var(--sans);text-decoration:none}
.sh:hover{border-color:var(--fg);background:var(--card)}
.shi{width:18px;height:18px}
.sh b{font-weight:600}
.prose{max-width:68ch;font-size:18.5px;line-height:1.75;color:var(--fg-2)}
.prose>p,.prose>ul,.prose>blockquote,.prose>aside,.prose>figure{margin:0 0 1.15em}
.prose>p:first-child{font-size:21px;line-height:1.65;color:var(--fg)}
.prose>p:first-child::first-letter{font-family:var(--display);float:left;font-size:4.1em;line-height:.82;padding:6px 10px 0 0;color:var(--accent);font-weight:600}
.prose h2{font-size:clamp(26px,2.6vw,34px);color:var(--fg);margin:1.7em 0 .55em;scroll-margin-top:110px}
.prose b{color:var(--fg)}
.prose a{color:var(--fg);text-decoration-color:var(--accent);text-underline-offset:3px;text-decoration-thickness:2px}
.prose ul{padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;margin-bottom:.5em}
.prose ul li::before{content:"";position:absolute;left:4px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--water-2)}
.prose ul.checks li{padding-left:36px}
.prose ul.checks li::before{display:none}
.ci{position:absolute;left:0;top:.3em;width:24px;height:24px;padding:4px;border-radius:7px;box-sizing:border-box;background:var(--water-2);color:#fff}
.pull{margin:1.6em 0;padding:6px 0 6px 26px;border-left:4px solid var(--accent)}
.pull p{font-family:var(--display);font-size:clamp(24px,2.4vw,30px);line-height:1.3;color:var(--fg);margin:0;font-weight:500}
.tip{display:flex;gap:16px;padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--rule);margin:1.6em 0!important}
.tic{flex:none;width:44px;height:44px;padding:10px;border-radius:12px;box-sizing:border-box;background:var(--inv-bg);color:var(--inv-fg)}
.tip p{margin:0 0 8px;font-size:16.5px;line-height:1.55}
.tip-h{font:700 12px/1.2 var(--sans)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)!important;margin-bottom:6px!important}
.tip a{display:inline-flex;align-items:center;gap:6px;font:600 15.5px/1 var(--sans);text-decoration:none;color:var(--fg);min-height:44px}
.tip a svg{width:16px;height:16px}
.pfig{margin:1.8em 0!important}
.pfig .frame{aspect-ratio:16/10}
.pfig .frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.pfig .frame img[data-pos="center"]{object-position:center top}
.pfig figcaption{font-size:14.5px;color:var(--fg-3);margin-top:10px;line-height:1.5}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:2.2em 0 1.2em!important}
.tags span{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--card);border:1px solid var(--rule);font:500 13.5px/1 var(--sans);color:var(--fg-2)}
.tgi{width:14px;height:14px;color:var(--accent)}
.authors{display:flex;gap:18px;align-items:flex-start;margin-top:32px;padding:24px;border-radius:20px;background:var(--card);border:1px solid var(--rule)}
.authors .duo img{width:58px;height:58px;border-width:3px}
.authors .duo img+img{margin-left:-16px}
.authors .sig{font-size:34px;margin:0 0 6px}
.authors p{font-size:16px;line-height:1.55;margin:0 0 6px}
.authors .more{margin-top:6px}
@media(max-width:900px){.post-grid{grid-template-columns:1fr}.post-side{position:static}.otp{border:1px solid var(--rule);border-radius:16px;padding:6px 16px;background:var(--card)}.otp summary{pointer-events:auto;cursor:pointer;min-height:44px;display:flex;align-items:center;margin:0}.otp ol{margin:4px 0 12px}.post-side .share{display:none}}
@media(max-width:560px){.prose{font-size:17.5px}.prose>p:first-child{font-size:19px}.authors{flex-direction:column}.post-cover .frame{aspect-ratio:4/3}}

/* nav: eight links, one line */
.navlinks a{white-space:nowrap}
@media(max-width:1480px){.navlinks{gap:19px;font-size:12.5px;letter-spacing:.07em}}
@media(max-width:1340px){.navlinks{gap:14px;font-size:12px;letter-spacing:.05em}}
@media(max-width:1250px){.navlinks{display:none}.menu-btn{display:inline-flex}}
.post-hero .ph-sun{right:clamp(16px,4vw,48px);top:clamp(16px,3vw,32px);width:clamp(70px,8vw,110px)}
.pc-msg .sig{font-family:"Yellowtail",cursive;line-height:1}

.anatomy.mini{grid-template-columns:1fr 1fr;gap:22px 24px;margin-top:30px}
.anatomy.mini h3{font-size:18px}
.anatomy.mini p{font-size:14.5px}
@media(max-width:480px){.anatomy.mini{grid-template-columns:1fr}}
/* hero tagline: "Send it out to sea." stays on one line */
.hero h1 .ital{white-space:nowrap;font-size:.94em}
@media(max-width:700px){.hero h1 .ital{font-size:1.02em}}
html{overflow-x:clip}