@font-face{font-family:"Rubik";src:url(/fonts/rubik-var-latin.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-var-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{
  --navy:#0F2A44;--coral:#FF6B4A;--blue:#3E7CB1;--sand:#F4EFE6;--foam:#F7FAF9;--ink:#0B1420;--white:#fff;--slate:#5A5F70;--border:#E2DCD0;
  --radius:12px;--card-radius:20px;--wrap:1200px;--header-h:68px;
  --fs-body:1.125rem;--lh-body:1.556;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--foam);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);color:var(--navy);margin:0 0 .5em;letter-spacing:-.01em}
h1{font-weight:600;font-size:clamp(2.4rem,5.2vw,4.25rem);line-height:1.04}
h2{font-weight:600;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1}
h3{font-weight:500;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2}
p{margin:0 0 1em}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
.lead{font-size:clamp(1.125rem,1.5vw,1.25rem);color:var(--slate);max-width:38em}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font:600 .875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:1rem}
.eyebrow img{width:16px;height:auto}

/* buttons: coral fill always takes Ink label */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 1rem/1 var(--sans);padding:16px 24px;border-radius:var(--radius);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .15s}
.btn-primary{background:var(--coral);color:var(--ink)}
.btn-primary:hover{box-shadow:0 6px 18px rgba(255,107,74,.35);transform:translateY(-1px)}
.btn-secondary{background:var(--navy);color:#fff}
.btn-secondary:hover{background:#163a5c}
.btn-sm{padding:11px 16px;font-size:.9375rem}
.btn-block{width:100%}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,250,249,.9);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--border)}
.header-row{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.brand img{height:36px;width:auto}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{font:500 1rem/1 var(--sans);color:var(--navy);text-decoration:none;padding:8px 0}
.nav a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--coral);text-decoration-thickness:2px}
@media (max-width:820px){.nav{display:none}.header-row .btn{margin-left:auto}.brand img{height:30px}}

/* hero */
.hero{position:relative;padding:clamp(32px,6vw,80px) 0 clamp(48px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-stage{display:flex;align-items:center;justify-content:center;min-height:clamp(220px,30vw,420px)}
.hero-mark{width:clamp(150px,21vw,300px);height:auto;display:block}
.subhead{font:500 clamp(1.25rem,2vw,1.6rem)/1.3 var(--display);color:var(--navy);margin:0 0 .9em;max-width:26em}
.scroll-cue{display:flex;align-items:center;justify-content:center;gap:10px;margin:40px 0 0;color:var(--slate);font-size:.9375rem}
.scroll-cue span{width:2px;height:28px;background:linear-gradient(var(--blue),transparent);display:block}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-art{order:-1;margin:0}.hero-stage{min-height:0;padding:4px 0}.hero-mark{width:128px}.scroll-cue{margin-top:24px}}

/* journey: six steps, each with its own scene; the one traveling sail docks into each.
   Base layout (no JS, reduced motion, short screens): plain stacked steps. Motion + a tall enough screen adds
   html.steps-snap: every step fills the screen (100svh) and snaps one at a time (site.js guards wheel/touch/keys). */
.journey{padding:clamp(40px,6vw,80px) 0 40px}
.section-head{max-width:760px;margin-bottom:clamp(24px,4vw,48px)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(56px,9vw,128px)}
.step-copy{grid-column:1;grid-row:1;max-width:30em}
.journey-head{margin-bottom:clamp(20px,3vw,36px)}
.step-num{display:inline-block;font:600 .875rem/1 var(--sans);color:var(--navy);background:var(--white);border:1px solid var(--border);border-radius:999px;padding:6px 10px;margin-bottom:12px}
.step-copy p{color:var(--slate)}
.motion .step-copy{opacity:.5;transition:opacity .4s ease}
.motion .step.is-active .step-copy{opacity:1}

/* v4 batch 1 (steps 1-3): Sai's full-bleed scenes. The scene box is the screen below the header; container queries
   pick his composition (box aspect >= 1: landscape 1600x900, else portrait 900x1600), clamp the slice at 2.35:1 / 0.45
   (the layers bleed 400 units, so the letterbox is still art) and place the copy in his copy band, which runs down
   into the calm sea below the safe area, never over the action. */
.step-v4{padding:0}
.v4-box{position:relative;height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));min-height:420px;overflow:hidden;container:v4box/size;background:var(--navy)}
.v4-scene{position:absolute;inset:0;margin:0}
.v4-comp{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;width:min(100cqw,235cqh)}
.v4-p{display:none}
.v4-layer{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;display:block}
html:not(.motion) .v4-scene .kc-sail-dock{visibility:visible}
#journey .v4-copy{position:absolute;left:0;right:0;bottom:0;max-width:none;box-sizing:border-box;padding:14px 20px 18px;color:var(--foam);
  --k:max(calc(min(100cqw, 235cqh) / 1600), calc(100cqh / 900));
  top:calc(50cqh + 230 * var(--k));left:calc(50cqw - 450 * var(--k));right:auto;width:calc(900 * var(--k));
  padding:calc(14 * var(--k)) 0 12px;display:flex;gap:clamp(18px,3cqw,48px);align-items:flex-start;
  background:linear-gradient(rgba(15,42,68,0),rgba(15,42,68,.35) 40px)}
#journey .v4-copy .journey-head{flex:0 0 38%;margin:0}
#journey .v4-copy .journey-head .eyebrow{color:var(--foam);margin-bottom:.5rem}
#journey .v4-copy .journey-head h2{color:var(--foam);font-size:clamp(1.15rem,1.9cqw,2rem);line-height:1.15;margin:0}
.v4-text{flex:1 1 auto;min-width:0;max-width:40em}
#journey .v4-copy h3{color:var(--foam);font-size:clamp(1.25rem,2.3cqw,2.25rem);line-height:1.15;margin:0 0 .3em}
#journey .v4-copy p{color:var(--foam);opacity:.88;margin:0;font-size:clamp(.9375rem,1.25cqw,1.125rem);line-height:1.45}
#journey .v4-copy .step-num{background:transparent;color:var(--foam);border-color:rgba(247,250,249,.45);margin-bottom:8px;padding:4px 9px}
/* v4 batch 2 (steps 4-6, Sai v1.6.0): light scenes (Foam sky / chart sea / Sand coast), so the copy turns Navy on a Foam (or Sand) scrim */
.v4-light .v4-box{background:var(--foam)}
#journey .v4-light .v4-copy{color:var(--navy);background:linear-gradient(rgba(247,250,249,0),rgba(247,250,249,.82) 40px)}
#journey .v4-sand .v4-copy{background:linear-gradient(rgba(244,239,230,0),rgba(244,239,230,.82) 40px)}
#journey .v4-light .v4-copy h3{color:var(--navy)}
#journey .v4-light .v4-copy p{color:var(--slate);opacity:1}
#journey .v4-light .v4-copy .step-num{color:var(--navy);border-color:rgba(15,42,68,.3)}
#journey .v4-copy .v4-list{flex:0 0 32%;margin:4px 0 0;font-size:clamp(.875rem,1.15cqw,1.0625rem)} /* landscape: a side column beside the step text */
#journey .v4-copy .v4-list li{margin:0 0 .4em}
#journey .v4-copy .v4-list li{font-size:inherit;color:var(--slate)}
/* Sai's sample data (coupon codes, order amounts) is illustration only: not selectable, not read out */
.v4-scene text{user-select:none;-webkit-user-select:none}
@container v4box (orientation: portrait){
  .v4-l{display:none}
  .v4-p{display:block;width:auto;left:0;right:0;top:0;bottom:0;margin:auto 0;height:min(100cqh,222.22cqw)}
  #journey .v4-copy{--k:max(calc(100cqw / 900), calc(min(100cqh, 222.22cqw) / 1600));
    top:calc(50cqh + 310 * var(--k));left:calc(50cqw - 360 * var(--k));width:calc(720 * var(--k));
    flex-direction:column;gap:12px;padding-top:calc(16 * var(--k))}
  #journey .v4-copy .journey-head{flex:none}
  #journey .v4-copy .journey-head h2{font-size:clamp(1.05rem,min(4.6cqw,2.5cqh),1.75rem)}
  #journey .v4-copy h3{font-size:clamp(1.15rem,min(5.4cqw,2.9cqh),2rem)}
  #journey .v4-copy p{font-size:clamp(.875rem,min(3.7cqw,1.9cqh),1.125rem)}
  #journey .v4-copy .v4-text{flex:none}
  #journey .v4-copy .v4-list{flex:none;display:flex;flex-wrap:wrap;gap:2px 22px;margin:-4px 0 0;font-size:clamp(.8125rem,min(3.3cqw,1.7cqh),1rem)}
  #journey .v4-copy .v4-list li{margin:0}
}
@container v4box (orientation: portrait) and (min-aspect-ratio: 7/10){ /* wide portrait boxes crop the sea most: drop the eyebrow (the nav already says How it works) */
  #journey .v4-copy .journey-head .eyebrow{display:none}
}
@container v4box (orientation: portrait) and (max-height:700px){
  #journey .v4-copy .journey-head .eyebrow{display:none}
  #journey .v4-copy{gap:8px}
}
@container v4box (orientation: portrait) and (max-height:640px){ /* the step 4 bullets repeat its sentence: drop them on the shortest portrait boxes */
  #journey .v4-copy .v4-list{display:none}
}
/* v4 full-screen snap steps (motion only) */
html.snap{scroll-snap-type:y mandatory;scroll-padding-top:0}
.steps-snap .hero{scroll-snap-align:start;scroll-margin-top:calc(var(--header-h) + 4px)}
.steps-snap .journey{padding:0}
.steps-snap .steps{gap:0}
.steps-snap .step{height:100vh;height:100svh;box-sizing:border-box;padding:var(--header-h) 0 12px;display:flex;align-items:center;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.steps-snap .step-v4{padding:var(--header-h) 0 0;display:block}
/* short landscape screens (phones on their side; no snap there): tall 3:4 boxes that use the portrait composition, so the copy band has room */
@media (orientation: landscape) and (max-height:560px){.v4-box{height:auto;min-height:0;aspect-ratio:3/4}}
.steps-snap .step-copy h3{font-size:clamp(1.6rem,2.6vw,2.4rem)}
@media (max-width:640px){
  .steps-snap .step-copy h3{font-size:1.5rem;margin-bottom:.35em}
  .steps-snap .step-copy p{font-size:1rem;margin:0}
  .steps-snap .journey-head{margin-bottom:14px}
  .steps-snap .journey-head h2{font-size:1.375rem;margin:0}
  .steps-snap .journey-head .eyebrow{margin-bottom:.6rem}
  .steps-snap .step-num{margin-bottom:8px}
}

/* launch highlights: Sai's v1.7.0 icons 12-21, each a dock for the traveling sail (plain wrapper: no transform/opacity/filter/z-index) */
.highlights{margin:0 0 clamp(40px,6vw,72px)}
.hl-title{font-size:clamp(1.25rem,2vw,1.5rem);margin:0 0 16px}
.hl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.highlight{padding:20px}
.highlight h3{font-size:1.125rem;margin:14px 0 6px}
.highlight p{font-size:1rem;color:var(--slate);margin:0}
.hl-icon{display:block;width:64px;height:64px}
.hl-icon .icon-stack{width:64px;height:64px}
@media (max-width:1000px){.hl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.hl-grid{grid-template-columns:1fr}}

/* divider with sail */
.divider{display:flex;align-items:center;gap:20px;max-width:var(--wrap);margin:24px auto;padding:0 clamp(20px,4vw,40px)}
.divider span{flex:1;height:0;border-top:2px dashed rgba(62,124,177,.45)}
.divider .divider-sail{width:40px;height:auto;flex:none;display:block}

/* features voyage */
.features{padding:clamp(40px,6vw,80px) 0}
.voyage{position:relative;padding-left:72px}
.voyage-line{position:absolute;left:27px;top:8px;bottom:8px;border-left:2px dashed rgba(62,124,177,.5)}
.feature{position:relative;margin-bottom:clamp(28px,4vw,48px)}
.feature .stop{position:absolute;left:-72px;top:80px;width:56px;display:flex;justify-content:center}
.feature .stop i{display:block;width:16px;height:16px;border-radius:50%;background:var(--white);border:3px solid var(--blue);transition:background .3s,border-color .3s,transform .3s}
.feature.is-active .stop i,.feature.is-passed .stop i{background:var(--coral);border-color:var(--coral)}
.feature.is-active .stop i{transform:scale(1.25)}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--card-radius)}
.feature-card{padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:auto 1fr;gap:4px 32px;transition:box-shadow .3s,border-color .3s}
.feature.is-active .feature-card{box-shadow:0 10px 30px rgba(15,42,68,.08);border-color:#d4cdbf}
.feature-icon{width:144px;height:144px;border-radius:30px;background:var(--navy);display:flex;align-items:center;justify-content:center;grid-row:span 3;align-self:start}
.feature-icon img{width:36px;height:auto}
.feature-card h3{margin:4px 0 4px}
.feature-card .feature-lede{color:var(--slate);margin:0 0 16px}
.feature-card .sail-list{grid-column:2}
.feature-card h3,.feature-card .feature-lede,.feature-card .pill{grid-column:2}
@media (min-width:1000px){.feature-card .sail-list{columns:2;column-gap:40px}}
.sail-list{list-style:none;margin:0;padding:0}
.sail-list li{position:relative;padding-left:30px;margin:0 0 12px;break-inside:avoid}
.sail-list li::before{content:"";position:absolute;left:0;top:.38em;width:16px;height:14.5px;background:url(/assets/sail.svg) no-repeat center/contain;transition:transform .3s}
.feature.is-active .sail-list li::before{animation:sail-in .5s ease both}
.feature.is-active .sail-list li:nth-child(2)::before{animation-delay:.06s}
.feature.is-active .sail-list li:nth-child(3)::before{animation-delay:.12s}
.feature.is-active .sail-list li:nth-child(4)::before{animation-delay:.18s}
.feature.is-active .sail-list li:nth-child(5)::before{animation-delay:.24s}
.feature.is-active .sail-list li:nth-child(6)::before{animation-delay:.3s}
@keyframes sail-in{from{transform:translateX(-8px) rotate(-12deg);opacity:.2}to{transform:none;opacity:1}}
.sail-list.small li{font-size:1rem;color:var(--slate)}
@media (max-width:640px){
  .voyage{padding-left:40px}
  .voyage-line{left:11px}
  .feature .stop{left:-40px;width:24px}
  .feature-card{grid-template-columns:1fr;padding:22px}
  .feature-icon{width:112px;height:112px;border-radius:24px;grid-row:auto;margin-bottom:12px}
  .feature-card h3,.feature-card .feature-lede,.feature-card .pill{grid-column:1}
  .feature .stop{top:70px}
  .feature-icon img{width:30px}
  .feature-card .sail-list{grid-column:1}
  .sail-list li{font-size:1rem}
}

/* coming soon */
.coming .feature-card{background:var(--white);border-style:dashed}

.pill{display:inline-block;font:600 .8125rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:var(--navy);color:#fff;border-radius:999px;padding:7px 12px;margin-bottom:10px}
.coming-groups{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px}
.coming-groups h4{font:500 1.0625rem/1.3 var(--display);color:var(--navy);margin:8px 0 10px}
.coming .sail-list li::before{opacity:.45}
.coming .sail-list li{color:var(--slate);font-size:1rem}
@media (max-width:820px){.coming-groups{grid-template-columns:1fr;grid-column:1}}
@media (max-width:640px){.coming-groups{grid-column:1}}

/* own (navy band) */
.own{background:var(--navy);color:#fff;padding:clamp(56px,8vw,104px) 0}
.own h2{color:#fff;font-size:clamp(2.2rem,4.6vw,3.75rem)}
.own p{color:#fff;font-size:1.25rem;max-width:34em;margin-bottom:28px}
.own-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.own-mark{width:clamp(96px,14vw,180px)}
.own-mark svg{display:block;width:100%;height:auto}
@media (max-width:640px){.own-grid{grid-template-columns:1fr}}

/* pricing placeholder */
.pricing{padding:clamp(48px,6vw,80px) 0 0}
.pricing-card{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:clamp(24px,3vw,36px)}
.pricing-card h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.25em}
.pricing-card .lead{margin:0}
.pricing-badge{width:72px;height:72px;border-radius:18px;background:var(--foam);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.pricing-badge svg{width:44px;height:auto;display:block}
@media (max-width:640px){.pricing-card{grid-template-columns:1fr}}

/* waitlist */
.waitlist{padding:clamp(56px,8vw,104px) 0}
.waitlist-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:820px){.waitlist-grid{grid-template-columns:1fr}}
.form-card{padding:clamp(22px,3vw,36px);position:relative}
.eyebrow-dock svg{width:24px;height:auto;display:block}
.field{margin-bottom:18px}
.field label{display:block;font:600 1rem/1.3 var(--sans);color:var(--navy);margin-bottom:8px}
.req{font-weight:400;color:var(--slate)}
.field input,.field select{width:100%;font:400 1rem/1.4 var(--sans);color:var(--ink);background:var(--white);border:1px solid #c9c2b4;border-radius:10px;padding:13px 14px;min-height:50px}
.field select{appearance:none;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F2A44' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center}
.field input::placeholder{color:#767b8a}
.field input:focus,.field select:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.field input[aria-invalid="true"]{border-color:#b3261e}
.field-error,.form-error{color:#b3261e;font-size:.9375rem;margin:8px 0 0}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.thanks{text-align:center;padding:24px 8px}
.thanks img{margin:0 auto 16px}
.thanks:focus{outline:none}

/* footer */
.site-footer{background:var(--navy);color:#fff;padding:40px 0;border-top:1px solid rgba(255,255,255,.08)}
.footer-row{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.footer-row img{height:32px;width:auto}
.footer-row p{margin:0;font-size:.9375rem;color:#fff}

/* Sai's feature icons, blown up; the traveling sail docks into each one */
.feature-icon{background:var(--foam);border:1px solid var(--border)}
.feature-icon .feature-svg{width:120px;height:120px;display:block}
.coming .feature-icon{background:var(--foam)}
.coming-groups h4{display:flex;align-items:center;gap:12px}
.sub-icon{width:56px;height:56px;flex:none;border-radius:14px;background:var(--foam);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.sub-icon svg{width:46px;height:46px}
@media (max-width:640px){.feature-icon .feature-svg{width:94px;height:94px}}
.feature-card .coming-groups .sail-list{columns:1}

/* the one traveling sail (motion only). Docks show a dashed slot until the sail arrives. */
body{position:relative}
.sail-layer{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:20;contain:strict}
.traveler{position:absolute;left:0;top:0;width:384px;height:348px;transform-origin:0 0;overflow:visible;display:block;will-change:transform}
/* v3: no landing outlines. In motion mode every dock's own sail is invisible; the one traveler is the only sail. */
.motion .dock-sail{opacity:0}
/* v4: while docked, the scene's own sail-dock path draws the sail (site.js sceneSail) so Sai's layer order holds; the traveler hides */
.motion .v4-scene .dock-sail.is-live-sail{opacity:1;visibility:visible}
.motion .kc-static-only{display:none}
html:not(.motion) .kc-motion-only{display:none}
/* Sai's dock icon + its "over" parts (02 brush, 05 tag). No transform/opacity/filter/z-index on these wrappers,
   so .icon-over stays in the root stacking context and paints above the traveling sail. */
.icon-stack{position:relative;display:block;width:120px;height:120px}
.icon-stack>svg{position:static;width:100%!important;height:100%!important;display:block}
.icon-stack>.icon-over{position:absolute;left:0;top:0;z-index:30}
.sub-icon .icon-stack{width:46px;height:46px}
@media (max-width:640px){.feature-icon .icon-stack{width:94px;height:94px}}

/* ---------- v6: everything after step 6 rests like steps 1-6 (motion mode only: html.post-snap, set by site.js) ----------
   Two highlight rows, three feature clusters, Coming soon, Own your store and the waitlist end: one full-screen rest each.
   Without it (no JS, reduced motion, short screens) the wrappers below are plain blocks. */
.feature-num,.beat-mark{display:none}
.post-snap .divider{display:none}
.post-snap .features{padding:0}
.post-snap .inside-row,.post-snap .cluster,.post-snap .coming,.post-snap .own,.post-snap .end-stop{min-height:100vh;min-height:100svh;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always}
/* highlight rows: four cards per rest; the sail sweeps the first three and rests on the fourth */
.post-snap .inside-row{padding:calc(var(--header-h) + 12px) 0 20px;display:flex;align-items:center}
.post-snap .inside-row>.wrap{width:100%}
.post-snap .inside-row .section-head{margin-bottom:clamp(16px,3vh,40px)}
.post-snap .inside-row .highlights{margin:0}
.post-snap .inside-row .hl-title{font-size:clamp(1.25rem,2.2vw,1.75rem);margin-bottom:clamp(12px,2vh,24px)}
.post-snap .highlight{transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}
.post-snap .highlight.is-active{border-color:#d4cdbf;box-shadow:0 10px 30px rgba(15,42,68,.1);transform:translateY(-2px)}
/* v12.1: the active card lifts 2px but its icon stays put, so the icon sits exactly under the resting traveler sail (the sail's pose is
   measured with the card at rest; before this the sail sat 2px low on every active highlight icon, e.g. Made for phones' K) */
.post-snap .highlight .hl-icon{transition:transform .35s ease}
.post-snap .highlight.is-active .hl-icon{transform:translateY(2px)}
@media (min-width:1001px){
  .post-snap .inside-row .highlight{padding:clamp(20px,2.4vw,32px)}
  .post-snap .inside-row .hl-icon,.post-snap .inside-row .hl-icon .icon-stack{width:clamp(72px,6.4vw,96px);height:clamp(72px,6.4vw,96px)}
  .post-snap .inside-row .highlight h3{font-size:clamp(1.125rem,1.5vw,1.375rem)}
}
@media (max-width:1000px){.post-snap .hl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .post-snap .inside-row .section-head h2{font-size:1.6rem;margin-bottom:.35em}
  .post-snap .inside-row .lead{font-size:1rem;margin-bottom:0}
  .post-snap .inside-row .section-head .eyebrow{margin-bottom:.6rem}
  .post-snap .hl-grid{gap:10px}
  .post-snap .highlight{padding:14px 12px}
  .post-snap .hl-icon,.post-snap .hl-icon .icon-stack{width:52px;height:52px}
  .post-snap .highlight h3{font-size:1rem;margin:10px 0 4px;line-height:1.2}
  .post-snap .highlight p{font-size:.875rem;line-height:1.4}
}
/* feature clusters: three features per rest */
.cluster-head{display:block}
.post-snap .voyage{padding-left:0}
.post-snap .voyage-line,.post-snap .feature .stop{display:none}
.post-snap .cluster{padding:calc(var(--header-h) + 12px) 0 20px;display:flex;flex-direction:column;justify-content:center}
.post-snap .cluster-head{margin-bottom:clamp(12px,2vh,24px)}
.post-snap .cluster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);align-items:stretch}
.post-snap .cluster .feature{margin:0;display:flex}
.post-snap .cluster .feature-card{width:100%;position:relative;display:flex;flex-direction:column;gap:0;padding:clamp(20px,2vw,30px)}
.post-snap .cluster .feature-icon{width:clamp(108px,9vw,136px);height:clamp(108px,9vw,136px);border-radius:28px;margin:0 0 16px;flex:none}
.post-snap .cluster .feature-icon .icon-stack,.post-snap .cluster .feature-icon .feature-svg{width:clamp(90px,7.6vw,114px);height:clamp(90px,7.6vw,114px)}
.post-snap .cluster .feature-num{display:inline-block;position:absolute;top:18px;right:18px;font:600 .8125rem/1 var(--sans);color:var(--navy);border:1px solid var(--border);border-radius:999px;padding:5px 9px}
.post-snap .cluster .feature-card h3{font-size:clamp(1.2rem,1.6vw,1.5rem);margin:0 0 6px}
.post-snap .cluster .feature-card .feature-lede{font-size:1rem;line-height:1.45;margin:0 0 12px}
.post-snap .cluster .feature-card .sail-list{columns:1}
.post-snap .cluster .sail-list li{font-size:.9375rem;line-height:1.42;margin-bottom:8px;padding-left:26px}
.post-snap .cluster .sail-list li::before{width:14px;height:12.7px;top:.4em}
.post-snap .cluster .feature{transition:none}
.post-snap .cluster .feature.is-active .feature-card{border-color:#d4cdbf;box-shadow:0 10px 30px rgba(15,42,68,.1)}
.more-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font:600 .9375rem/1 var(--sans);color:var(--navy);background:var(--foam);border:1px solid var(--border);border-radius:999px;padding:9px 14px;cursor:pointer;margin:0 0 4px}
.more-btn::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.more-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.more-btn[hidden]{display:none}
.sail-list.is-collapsed{display:none}
@media (min-width:1001px) and (max-height:860px){.post-snap .cluster .feature-icon{width:96px;height:96px;border-radius:22px;margin-bottom:12px}.post-snap .cluster .feature-icon .icon-stack,.post-snap .cluster .feature-icon .feature-svg{width:80px;height:80px}.post-snap .cluster .sail-list li{margin-bottom:6px}}
@media (max-width:1000px){.post-snap .cluster-grid{grid-template-columns:1fr}}
@media (min-width:821px) and (max-width:1000px){
  .post-snap .cluster .feature-card{display:grid;grid-template-columns:auto 1fr;gap:2px 24px}
  .post-snap .cluster .feature-icon{grid-row:span 3;margin:0}
  .post-snap .cluster .feature-card>*:not(.feature-icon):not(.feature-num){grid-column:2}
}
/* phones: horizontal cards (icon left); each card's list hides behind "What's included" (site.js unhides the buttons) */
@media (max-width:820px){
  .post-snap .cluster{padding:calc(var(--header-h) + 8px) 0 14px}
  .post-snap .cluster-grid{gap:10px}
  .post-snap .cluster .feature-card{display:grid;grid-template-columns:72px 1fr;gap:2px 14px;padding:16px 14px;align-items:start}
  .post-snap .cluster .feature-icon{width:72px;height:72px;border-radius:18px;grid-row:span 3;margin:0}
  .post-snap .cluster .feature-icon .icon-stack,.post-snap .cluster .feature-icon .feature-svg{width:60px;height:60px}
  .post-snap .cluster .feature-card>*:not(.feature-icon):not(.feature-num){grid-column:2}
  .post-snap .cluster .feature-card .sail-list{grid-column:1/-1!important;margin-top:10px}
  .post-snap .cluster .feature-card h3{font-size:1.125rem;padding-right:52px;margin:0 0 4px}
  .post-snap .cluster .feature-card .feature-lede{font-size:.9375rem;margin:0 0 8px;line-height:1.4}
  .post-snap .cluster .feature-num{top:12px;right:12px;font-size:.75rem;padding:4px 7px}
  .post-snap .cluster-head{margin-bottom:10px;font-size:.8125rem}
  .post-snap .more-btn{font-size:.875rem;padding:7px 12px}
}
/* Coming soon: its own rest (the pill + title sit beside the icon) */
.post-snap .coming{margin:0;padding:calc(var(--header-h) + 8px) 0 12px;display:flex;align-items:center}
.post-snap .coming .feature-card{width:100%;position:relative}
.post-snap .coming .feature-card>div:not(.feature-icon):not(.coming-groups){grid-column:2}
@media (min-width:641px){
  .post-snap .coming .feature-card{padding:28px clamp(28px,3.4vw,48px);gap:4px 48px}
  .post-snap .coming .feature-card .feature-lede{margin-bottom:8px}
  .post-snap .coming-groups h4{margin:4px 0 8px}
  .post-snap .coming .sail-list li{margin-bottom:6px;line-height:1.45}
}
@media (max-width:640px){
  .post-snap .coming .feature-card{grid-template-columns:76px 1fr;gap:4px 16px;padding:20px 18px}
  .post-snap .coming .feature-icon{width:76px;height:76px;border-radius:18px;grid-row:auto;margin:0}
  .post-snap .coming .feature-icon .icon-stack,.post-snap .coming .feature-icon .feature-svg{width:64px;height:64px}
  .post-snap .coming .feature-lede,.post-snap .coming-groups{grid-column:1/-1}
  .post-snap .coming .sail-list li{font-size:.9375rem;margin-bottom:8px}
}
/* Own your store: a full-screen navy rest; the sail docks into the K */
.post-snap .own{padding:calc(var(--header-h) + 24px) 0 40px;display:flex;align-items:center}
.post-snap .own-grid{width:100%}
.post-snap .own-mark{width:clamp(140px,22vw,300px)}
/* the end rest: pricing + the waitlist (the sail lands on the waitlist sail); anything below scrolls natively */
.post-snap .end-stop{padding-top:var(--header-h)}
.post-snap .pricing{padding-top:clamp(16px,3vh,40px)}
.post-snap .waitlist{padding:clamp(24px,4vh,56px) 0 clamp(40px,6vh,80px)}
.motion .dock-sail.is-docked,.motion .dock-sail.is-static{opacity:1}

/* ---------- v6 step 2/3: one sticky scene, two beats (A: load your products, B: orders roll in) ---------- */
#journey .beat-copy{display:grid;grid-template-columns:minmax(0,1fr)}
#journey .beat-copy .beat{grid-area:1/1/2/2;transition:opacity .45s ease,transform .45s ease}
html:not(.steps-snap) #journey .beat-copy{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3cqw,40px)}
html:not(.steps-snap) #journey .beat-copy .beat-b{grid-area:1/2/2/3}
.steps-snap .step-beats{height:300vh;height:300svh;padding:var(--header-h) 0 12px;display:block;overflow:visible;scroll-snap-align:none;position:relative}
.steps-snap .step-beats .v4-box{position:sticky;top:var(--header-h)}
.steps-snap .beat-mark{display:block;position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
.steps-snap .step-beats .beat-b{opacity:0;transform:translateY(10px)}
.steps-snap .step-beats.beat-b .beat-a{opacity:0;transform:translateY(-10px)}
.steps-snap .step-beats.beat-b .beat-b{opacity:1;transform:none}
@container v4box (orientation: portrait){html:not(.steps-snap) #journey .beat-copy{grid-template-columns:1fr}html:not(.steps-snap) #journey .beat-copy .beat-b{grid-area:2/1/3/2}}
/* v10: steps 1-3 share the boat scene (400svh, three beats: data-beat 0 / 1 / 2). Beat 1's copy is step 1's head + text row. */
#journey .beat-copy .beat-1{display:flex;gap:clamp(18px,3cqw,48px);align-items:flex-start;min-width:0}
.steps-snap .step-beats{height:400vh;height:400svh}
.steps-snap .step-beats .beat-a{opacity:0;transform:translateY(10px)}
.steps-snap .step-beats[data-beat="1"] .beat-1,.steps-snap .step-beats[data-beat="2"] .beat-1{opacity:0;transform:translateY(-10px)}
.steps-snap .step-beats[data-beat="1"] .beat-a{opacity:1;transform:none}
html:not(.steps-snap) #journey .beat-copy .beat-1{grid-area:1/1/2/3}
html:not(.steps-snap) #journey .beat-copy .beat-a{grid-area:2/1/3/2}
html:not(.steps-snap) #journey .beat-copy .beat-b{grid-area:2/2/3/3}
html:not(.steps-snap) #journey .step-beats .v4-copy{top:auto}
.motion .dock-sail.is-boat-held{opacity:1;visibility:visible}
@container v4box (orientation: portrait){
  #journey .beat-copy .beat-1{flex-direction:column;gap:12px}
  html:not(.steps-snap) #journey .beat-copy .beat-1{grid-area:1/1/2/2}
  html:not(.steps-snap) #journey .beat-copy .beat-a{grid-area:2/1/3/2}
  html:not(.steps-snap) #journey .beat-copy .beat-b{grid-area:3/1/4/2}
}
@container v4box (orientation: portrait) and (max-height:700px){ #journey .beat-copy .beat-1{gap:8px} }

/* ---------- v6 navigation: header actions + phone menu, section dots, back to top ---------- */
.header-actions{display:flex;align-items:center;gap:10px}
.nav+.header-actions{margin-left:8px}
.menu-btn{display:none;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--white);color:var(--navy);font:600 .9375rem/1 var(--sans);cursor:pointer}
.menu-icon{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:18px}
.menu-icon i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--foam);border-bottom:1px solid var(--border);box-shadow:0 18px 30px rgba(15,42,68,.12);padding:8px clamp(20px,4vw,40px) 18px}
.menu-panel[hidden]{display:none}
.menu-panel a{display:block;padding:13px 2px;font:500 1.0625rem/1.2 var(--sans);color:var(--navy);text-decoration:none;border-bottom:1px solid var(--border)}
.menu-panel a:last-child{border-bottom:0;margin-top:10px;text-align:center}
@media (max-width:820px){
  .header-actions{margin-left:auto}
  .header-row .btn{margin-left:0}
  .menu-btn{display:inline-flex}
  .header-actions .btn{padding:11px 12px;font-size:.875rem}
}
@media (max-width:380px){.menu-label{display:none}.menu-btn{padding:0 11px}}
.dots{position:fixed;right:clamp(10px,1.4vw,22px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:2px;padding:8px 4px;border-radius:999px;background:rgba(247,250,249,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(15,42,68,.08)}
.dots[hidden]{display:none}
.dots a{position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:24px;text-decoration:none}
.dots a i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(15,42,68,.28);transition:transform .25s,background-color .25s}
.dots a:hover i{background:var(--blue)}
.dots a.is-on i{background:var(--coral);transform:scale(1.5)}
.dot-label{position:absolute;right:34px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--navy);color:#fff;font:500 .8125rem/1 var(--sans);padding:7px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s}
.dots a:hover .dot-label,.dots a:focus-visible .dot-label{opacity:1}
@media (max-width:820px){.dots{display:none}}
.to-top{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2.4vh,28px);z-index:40;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(15,42,68,.25);text-decoration:none;transition:transform .15s,background-color .15s}
.to-top:hover{background:#163a5c;transform:translateY(-2px)}
.to-top[hidden]{display:none}
.to-top svg{width:20px;height:20px;display:block}
@media (min-width:821px){.to-top{right:clamp(48px,4.4vw,72px)}}
/* v6: the ship scene is open sea, so its caption fades into sea blue, not sand */
#journey .v4-sea .v4-copy{background:linear-gradient(rgba(217,229,237,0),rgba(217,229,237,.88) 40px)}
/* v6: keep back-to-top visible over the navy step scenes */
.to-top{border:2px solid rgba(247,250,249,.85)}
.coming-groups.is-collapsed{display:none}
.post-snap .coming .more-btn{grid-column:1/-1;margin-top:6px}
/* v6: one-line header actions on phones */
.header-actions .btn{white-space:nowrap}
@media (max-width:440px){
  .header-actions{gap:8px}
  .header-actions .btn-sm{padding:9px 12px;font-size:.875rem}
  .menu-btn .menu-label{display:none}
  .menu-btn{padding:9px 10px}
}
/* v6: without the snap (reduced motion / no-JS) both step 2 and 3 captions share one portrait scene; let that caption grow upward instead of clipping */
@container v4box (orientation: portrait){
  html:not(.steps-snap) #journey .step-beats .v4-copy{top:auto;min-height:calc(50cqh - 310 * var(--k));gap:8px;background:linear-gradient(rgba(15,42,68,0),var(--navy) 36px)}
}
/* v8b: jump veil (header links, menu, dots, back to top, CTAs, Home/End) */
.jump-veil{position:fixed;inset:0;z-index:35;background:var(--foam);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.jump-veil{display:none}}
/* v12: in motion the hero triangle (the traveler) is the boat's sail through steps 1-3, so the boat frames draw no sail-cloth of their own */
.motion [id^="b10"][id$="-sail-cloth"]{visibility:hidden}

/* v12.2: View demo links (header nav, phone menu, hero) open the live demo store in a new tab */
.ext-icon{display:inline-block;vertical-align:-1px;margin-left:6px;flex:none}
.btn .ext-icon{margin-left:0}