/* stowyachts.com — one stylesheet, no build step.
   The recipe the captain chose (Sortly, 19 Sep 2026): white page, dark navy text,
   one blue, one typeface, big real screenshots, and a phone in a frame. */
:root{
  --bg:#FFFFFF; --ground:#F4F7FA; --text:#0D1F2D; --muted:rgba(13,31,45,0.62); --dim:rgba(13,31,45,0.38);
  --line:rgba(13,31,45,0.10); --accent:#1A5E8A; --accent-dark:#144C70; --accent-soft:rgba(26,94,138,0.08);
  --good:#2E7D32; --shadow:0 1px 2px rgba(13,31,45,0.06),0 16px 40px rgba(13,31,45,0.10);
}
*{box-sizing:border-box}
/* ⚠⚠ auto, NOT smooth, and deliberately. body{overflow-x:clip} below breaks
   smooth scrolling on the viewport in Chrome — measured: every in-page anchor
   on this site did nothing at all, "Talk to us" included. The anchors are
   animated in JS instead (see the inline script), which also lets them clear
   the sticky header. Do not put smooth back here without re-testing #talk. */
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{margin:0;letter-spacing:-0.02em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(34px,6vw,58px);font-weight:800}
h2{font-size:clamp(26px,4vw,38px);font-weight:800}
h3{font-size:20px;font-weight:700}
p{margin:0}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;font-weight:700;text-decoration:none;font-size:16px;border:1px solid transparent}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dark)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--line)}
.btn.ghost:hover{background:var(--accent-soft)}

/* top bar */
.top{position:sticky;top:0;z-index:5;background:rgba(255,255,255,0.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
/* the wordmark is the app's loading screen: Cormorant Garamond, light, spaced (his pick, 20 Sep) */
.brand{font-family:"Cormorant Garamond","Iowan Old Style",Palatino,Georgia,serif;font-weight:300;letter-spacing:0.3em;font-size:24px;line-height:1;color:var(--text);text-decoration:none;display:inline-block}
.brand small{display:block;font-family:"Manrope",system-ui,sans-serif;letter-spacing:0;font-weight:600;font-size:11px;color:var(--dim);margin-top:2px}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:15px}
.nav a:hover{color:var(--text)}
.nav .btn{min-height:40px;padding:0 16px;font-size:14px}
@media (max-width:760px){.nav a:not(.btn){display:none}}

/* hero */
.hero{padding:72px 0 28px;text-align:center}
.hero h1{max-width:14ch;margin:0 auto}
.hero .sub{max-width:52ch;margin:18px auto 0;font-size:clamp(17px,2.2vw,21px);color:var(--muted)}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.hero .fine{margin-top:14px;font-size:14px;color:var(--dim)}
.shot{margin:44px auto 0;max-width:1000px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--ground)}
.shot img{width:100%}
.phones{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:44px}
.phone{width:300px;max-width:100%;border-radius:36px;border:10px solid #0D1F2D;overflow:hidden;box-shadow:var(--shadow);background:#0D1F2D}
.phone img{width:100%;display:block}
.caption{text-align:center;font-size:14px;color:var(--dim);margin-top:14px}

/* sections */
section{padding:72px 0}
section.alt{background:var(--ground)}
.lead{max-width:60ch;margin:12px 0 0;color:var(--muted);font-size:18px}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:36px 0}
.feature:nth-child(even) .text{order:2}
.feature .text h3{font-size:26px;letter-spacing:-0.02em}
.feature .text p{margin-top:10px;color:var(--muted)}
.feature ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.feature li{display:flex;gap:10px;align-items:flex-start;color:var(--text)}
.feature li::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:9px}
.feature .pic{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--ground)}
@media (max-width:820px){.feature{grid-template-columns:1fr;gap:22px}.feature:nth-child(even) .text{order:0}}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 1px 2px rgba(13,31,45,0.04)}
.card h3{font-size:18px}
.card p{margin-top:8px;color:var(--muted);font-size:15px}
@media (max-width:820px){.cards{grid-template-columns:1fr}}

/* deck section */
.deck{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.deck .pts{display:grid;gap:14px;margin-top:20px}
.deck .pt{display:flex;gap:14px;align-items:flex-start}
.deck .pt b{display:block;font-size:17px}
.deck .pt span{color:var(--muted);font-size:15px}
.deck .ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:800}
@media (max-width:820px){.deck{grid-template-columns:1fr}}

/* pricing + story */
.price{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.price .box{border:1px solid var(--line);border-radius:18px;padding:28px;background:var(--bg)}
.price .big{font-size:32px;font-weight:800;letter-spacing:-0.02em;margin-top:8px}
.price ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;color:var(--muted)}
.price li::before{content:"✓  ";color:var(--good);font-weight:800}
@media (max-width:820px){.price{grid-template-columns:1fr}}
.story{max-width:66ch}
.story p+p{margin-top:14px}

/* footer */
footer{border-top:1px solid var(--line);padding:36px 0 48px;color:var(--dim);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text)}
footer .grow{flex:1}

/* legal pages */
.legal{max-width:72ch;padding:56px 0 80px}
.legal h1{font-size:clamp(30px,5vw,44px)}
.legal h2{font-size:22px;margin-top:36px}
.legal p,.legal li{color:var(--text);font-size:16px}
.legal p{margin-top:12px}
.legal ul{margin:10px 0 0;padding-left:22px}
.legal .date{color:var(--dim);font-size:14px;margin-top:8px}
.todo{background:#FFF4D6;border:1px solid #E5C875;border-radius:8px;padding:2px 6px;font-weight:700}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ── motion (20 Sep) — sections come in as you scroll; nothing moves for anyone who asked it not to ── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.reveal.in{opacity:1;transform:none}
.float{animation:float 7s ease-in-out infinite}
.float.slow{animation-duration:9s;animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.top{transition:box-shadow .3s}
.top.scrolled{box-shadow:0 6px 24px rgba(13,31,45,0.08)}
section{scroll-margin-top:72px}
.feature .pic img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.feature .pic:hover img{transform:scale(1.015)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .float{animation:none}
  html{scroll-behavior:auto}
}

.feature.solo{grid-template-columns:1fr}.feature.solo .text{max-width:66ch}


/* ── motion, second pass (20 Sep) — "all the pages should be movable… I want this to sell" ──
   A progress bar, headings that rise word by word, pictures that drift as you scroll,
   a sticky phone that changes screen as the three questions go past, gentle page snapping
   on a big screen. All of it off under prefers-reduced-motion. */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:9;transition:width .12s linear}
.kicker{font-size:13px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.nav a.on{color:var(--text)}

/* headings rise a word at a time */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:0.08em;margin-bottom:-0.08em}
.split .w>span{display:inline-block;transform:translateY(110%);transition:transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k,0) * 70ms)}
.split.in .w>span{transform:none}

/* reveals can come from a side, or grow in */
/* the side slides only on a wide screen — on a phone a 26px slide is 6px of sideways page */
@media (min-width:861px){.reveal.left{transform:translateX(-26px)}.reveal.right{transform:translateX(26px)}}
.reveal.zoom{transform:scale(.96)}
.reveal.in{transform:none}

/* pictures drift against the scroll (JS sets --py) */
.px{will-change:transform}
.px.in,.px{transform:translateY(var(--py,0px))}
.reveal.px{transform:translateY(calc(var(--py,0px) + 18px))}
.reveal.px.in{transform:translateY(var(--py,0px))}
.reveal.px.zoom{transform:translateY(calc(var(--py,0px) + 12px)) scale(.96)}
.reveal.px.zoom.in{transform:translateY(var(--py,0px))}

/* the three questions: a sticky phone that changes screen */
.story-sec{padding-bottom:24px}
.story{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:start;margin-top:36px}
.story .sticky{position:sticky;top:96px}
.phone.big{width:330px;margin:0 auto;position:relative;aspect-ratio:390/844}
/* screens slide up and away like a phone changing page */
.phone.big .s-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateY(8%);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.phone.big .s-img.on{opacity:1;transform:none;z-index:1}
.phone.big .s-img.was{opacity:0;transform:translateY(-8%)}
.steps{display:grid;gap:8px}
.step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;border-top:1px solid var(--line);opacity:.38;transition:opacity .5s}
.step:first-child{border-top:none}
.step.on{opacity:1}
.step .num{font-size:13px;font-weight:800;letter-spacing:0.18em;color:var(--accent)}
.step h3{font-size:clamp(24px,3vw,34px);letter-spacing:-0.02em;margin-top:6px}
.step p:not(.num){margin-top:10px;color:var(--muted);font-size:18px;max-width:46ch}
.step .phone.small{display:none}
@media (max-width:860px){
  .story{grid-template-columns:1fr;gap:0}
  .story .sticky{display:none}
  .step{min-height:0;opacity:1;padding:28px 0}
  .step .phone.small{display:block;width:220px;margin:18px auto 0}
}

/* gentle page snapping on a big screen */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity}
  section{scroll-snap-align:start}
  .story-sec,.hero{scroll-snap-align:none}
}

@media (prefers-reduced-motion:reduce){
  .progress{display:none}
  .split .w>span{transform:none;transition:none}
  .reveal.left,.reveal.right,.reveal.zoom{transform:none}
  .px{transform:none!important}
  .step{opacity:1}
  .phone.big .s-img{transition:none}
}

/* ── the side scroll: a snapping rail with arrows, like a feature carousel ── */
.rail-sec{padding-bottom:56px;overflow:hidden}
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.rail-nav{display:flex;gap:8px;flex-shrink:0}
.rb{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.rb:hover{background:var(--accent-soft);border-color:var(--accent)}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:28px 0 12px;margin-top:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-pad{flex:0 0 max(20px,calc((100vw - 1120px)/2))}
.rcard{flex:0 0 auto;scroll-snap-align:center;background:var(--ground);border:1px solid var(--line);border-radius:22px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:6px}
.rcard.tall{width:300px}
.rcard.wide{width:min(560px,86vw)}
.rcard .phone{width:200px;margin:0 auto 14px;border-width:7px;border-radius:28px}
.rcard .shotc{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:14px;background:#fff}
.rcard h3{font-size:19px}
.rcard p{color:var(--muted);font-size:15px}
@media (max-width:760px){.rail-head{flex-direction:column;align-items:flex-start}.rail{gap:14px}.rcard.tall{width:240px}.rcard .phone{width:160px}}

/* ── the dark band: full-bleed, one line, room for the on-deck clip ── */
.band{position:relative;background:#0D1F2D;color:#fff;padding:120px 0;overflow:hidden;isolation:isolate}
.band-media{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(900px 500px at 15% 20%,rgba(26,94,138,0.55),transparent 60%),
  radial-gradient(700px 500px at 85% 80%,rgba(26,94,138,0.35),transparent 60%),
  linear-gradient(180deg,#0B1926,#0D1F2D)}
.band-media video{width:100%;height:100%;object-fit:cover;opacity:.55}
.band-txt{max-width:820px}
.band h2{font-size:clamp(30px,5vw,56px);font-weight:800;letter-spacing:-0.025em;max-width:16ch;color:#fff}
.band p.light{color:rgba(255,255,255,0.72);font-size:19px;margin-top:16px;max-width:52ch}
.kicker.light{color:#9CC9EA}
.btn.onlight{background:#fff;color:#0D1F2D;border-color:#fff}
.btn.onlight:hover{background:#E8F0F6}

/* ── the walkthrough's first frame is the app's own loading screen, drawn, not photographed ── */
.s-img.splash,.splash-small{display:grid;place-items:center;background:#FFFFFF}
.s-img.splash .mark,.splash-small .mark{font-family:"Cormorant Garamond","Iowan Old Style",Palatino,Georgia,serif;font-weight:300;font-size:34px;letter-spacing:0.3em;color:#0D1F2D;padding-left:0.3em}
.splash-small{aspect-ratio:390/844}
/* reveals that slide in from a side must never widen the page (measured: 6px on a phone) */
body{overflow-x:clip}

/* ── the walkthrough pins and scrolls sideways, then the page carries on down (his ask, 20 Sep) ──
   The section is tall (100vh + n × 70vh); its .pin sticks for that height while JS turns the
   scrolled distance into a sideways translate of the .track and the active step. */
.hscroll{height:calc(100vh + var(--n,3) * 70vh);padding:0;position:relative}
.pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:18px;padding-top:88px}
/* the phone is sized from the viewport HEIGHT so the pinned frame never overflows the screen */
.hscroll .phone.big{width:min(330px,calc((100vh - 300px) * 390 / 844));width:min(330px,calc((100dvh - 300px) * 390 / 844))}
.nav a{white-space:nowrap}
.nav{gap:18px}.nav a{font-size:14px}
.pin-head{width:100%}
.pin-body{width:100%;display:grid;grid-template-columns:380px 1fr;gap:40px;align-items:center}
.sticky-phone{display:flex;justify-content:center}
.track-clip{overflow:hidden;min-width:0}
.track{display:flex;gap:48px;width:max-content;transform:translateX(var(--tx,0px));transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.hscroll .step{min-height:0;width:min(520px,calc(100vw - 500px));border:none;padding:0;opacity:.35;transition:opacity .4s}
.hscroll .step.on{opacity:1}
.hscroll .step h3{font-size:clamp(24px,3vw,38px)}
.hscroll .step .phone.small{display:none}
.dots{display:flex;gap:8px;justify-content:center;width:100%}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.dots i.on{background:var(--accent);transform:scale(1.25)}
@media (max-width:860px){
  .pin{padding-top:72px;gap:12px;justify-content:flex-start}
  .pin-body{grid-template-columns:1fr;gap:0;align-items:start}
  .sticky-phone{display:none}
  .track{gap:24px}
  .hscroll .step{width:calc(100vw - 40px);opacity:1;display:grid;grid-template-columns:1fr;align-content:start}
  .hscroll .step .phone.small{display:block;width:min(200px,42vh * 390 / 844);margin:14px auto 0}
  .hscroll .step p:not(.num){font-size:16px}
  .hscroll .step h3{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .hscroll{height:auto;padding:72px 0}
  .pin{position:static;height:auto;overflow:visible;padding-top:0}
  .track{flex-direction:column;width:auto;transform:none}
  .hscroll .step{opacity:1;width:auto}
  .dots{display:none}
}

/* ── the home page's five doors, and the page furniture (20 Sep) ── */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:28px}
.door{display:grid;gap:8px;align-content:start;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:22px 20px 18px;text-decoration:none;color:var(--text);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(26,94,138,0.35)}
.door .num{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--accent)}
.door h3{font-size:19px;letter-spacing:-0.01em}
.door p{color:var(--muted);font-size:15px}
.door .go{color:var(--accent);font-weight:700;font-size:15px;margin-top:6px}
.page section:first-child{padding-top:64px}
.page h1{font-size:clamp(30px,5vw,50px);font-weight:800}
.next{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end}
.next-link{display:inline-block;font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-0.02em;color:var(--text);text-decoration:none;margin-top:6px}
.next-link:hover{color:var(--accent)}
@media (max-width:820px){.next{grid-template-columns:1fr}}

/* ── the phone's page strip: the header hides its links below 760px, so the five pages sit here ── */
.subnav{display:none;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;scrollbar-width:none;background:var(--bg)}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:20px;border:1px solid var(--line);min-height:36px;display:inline-flex;align-items:center}
.subnav a.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
@media (max-width:760px){.subnav{display:flex}}

/* the GA frame is shorter than a phone screen: show it whole from the top */
.phone.big .s-img[data-step="3"]{object-fit:cover;object-position:top}
/* the last step must clear the clip: a little slack at the end of the track */
.track{padding-right:32px}

/* ── the logo (20 Sep, his pick): the yacht over the word, in the header and the footer ── */
.brand{display:inline-flex;align-items:center;letter-spacing:0}
.brand .logo{height:56px;width:auto;display:block;margin:2px 0}
.brand .logo.small{height:34px}
@media (max-width:760px){.brand .logo{height:48px}}