/* Cord — Harbor. Three voices: sky acts, navy structures, rose is the accent (<5%). */
:root{
  /* Harbor House — mirrored from src/theme.ts. Blue-first: blue and white carry the interface,
     rose is the only secondary and stays under a twentieth of any screen. Soft values are
     surfaces, deep values carry text. The MARK's colours are deliberately NOT from here —
     BRANDING.md keeps them sampled from the artwork so the logo does not move when the UI is re-themed. */
  --sky:#24689E; --sky-mid:#8DBCE0; --sky-soft:#E3F1FB; --deep:#123E60;
  --cerulean:#397AA7; --navy:#315573;
  --ink:#102F4A; --mut:#536E82; --faint:#7E95A7;
  --rose:#B83D70; --rose-mid:#E39AB7; --rose-soft:#FBE6EE;
  --caramel:#5B6F99; --caramel-soft:#EEF2FA;
  --surface:#F3F8FC; --bg-soft:#E8F1F8; --white:#fff; --line:#CFDEEA;
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px;
  --shadow:0 9px 22px -10px rgba(18,62,96,.20);
  --shadow-lg:0 26px 54px -26px rgba(18,62,96,.30);
  --accent-shadow:0 6px 18px rgba(184,61,112,.16);
  --wrap:1120px;
  --display:'Fredoka',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --scripture:'Lora',Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--sky);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.6rem,6vw,4.35rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.3rem;font-weight:600}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.narrow{max-width:760px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin:0 0 14px}
.eyebrow.on-deep{color:var(--ink)}
.eyebrow.rose{color:var(--rose)}
.lede{font-size:clamp(1.1rem,2vw,1.32rem);line-height:1.6;color:var(--mut);max-width:62ch}
.on-deep .lede,.deep .lede{color:var(--ink)}
section{padding:clamp(72px,10vw,128px) 0}
.deep{background:var(--deep);color:var(--ink)}
.deep h2,.deep h3{color:var(--ink)}

/* ---- masthead ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(243,248,252,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-family:var(--display);font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.nav a.lnk{color:var(--navy);text-decoration:none;font-size:14.5px;font-weight:500}
.nav a.lnk:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rose-soft);text-decoration-thickness:3px;text-underline-offset:7px}
.nav-links{display:flex;gap:26px;align-items:center}
@media(max-width:780px){.nav-links{display:none}}

/* ---- the splice divider: the mark, opened out into a rule ---- */
.splice{display:flex;align-items:center;gap:0;padding:0}
.splice .strand{height:10px;flex:1;border-radius:9px}
.splice .strand.l{background:var(--sky)}
.splice .strand.r{background:var(--rose-soft)}
.splice svg{width:74px;height:74px;flex:none;margin:0 -6px}
.deep .splice .strand.l{background:var(--surface)}
.splice.thin .strand{height:5px}
.splice.thin svg{width:86px;height:52px}

/* ---- hero ---- */
.hero{background:var(--deep);color:var(--ink);padding:clamp(64px,9vw,104px) 0 0;overflow:hidden}
.hero h1{color:var(--ink);max-width:15ch}
.hero .verse{font-family:var(--scripture);font-size:1.16rem;font-style:italic;
  color:var(--ink);margin:26px 0 0;padding-left:20px;border-left:3px solid var(--rose-mid)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero-copy p.lede{color:var(--ink);margin-top:22px}
.phone{border-radius:34px;box-shadow:var(--shadow-lg);border:5px solid var(--sky);
  background:var(--sky);overflow:hidden;width:100%}
.phone img{border-radius:29px}
.phone-wrap{max-width:330px;margin:0 auto;transform:translateY(28px)}

/* ---- buttons ---- */
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 26px;
  border-radius:var(--r-md);font-family:var(--body);font-size:16px;font-weight:600;
  text-decoration:none;border:0;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.btn:active{transform:scale(.98)}
.btn-pri{background:var(--sky);color:var(--ink);box-shadow:inset 0 1.5px 0 var(--rose-soft),0 0 0 1px rgba(18,48,73,.08),var(--accent-shadow)}
.btn-pri:hover{transform:translateY(-1px)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--sky)}
.btn-ghost:hover{border-color:var(--rose-soft);color:var(--ink);box-shadow:var(--accent-shadow)}
.btn-light{background:var(--surface);color:var(--ink);box-shadow:var(--accent-shadow)}
.btn-light:hover{background:#fff}

/* ---- generic bits ---- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
.card{background:var(--white);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow)}
.deep .card{background:var(--surface);box-shadow:none}
.toned{border-radius:var(--r-lg);padding:30px;background:var(--bg-soft)}
.toned.rose{background:var(--rose-soft)}
.toned.caramel{background:var(--caramel-soft)}
.note{display:flex;gap:12px;color:var(--mut);font-size:14.5px;line-height:1.55;max-width:66ch}
.note .dot{width:7px;height:7px;border-radius:50%;background:var(--sky);flex:none;margin-top:8px}
.head{max-width:70ch;margin-bottom:clamp(40px,5vw,60px)}
.stat{font-family:var(--display);font-size:2.6rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1}
.stat-l{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);margin-top:8px}

/* ---- the loop: CHECK IN -> CONNECT -> PRAY -> PLAN -> ACT -> GROW ---- */
.loop{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.loop span{font-family:var(--display);font-weight:600;font-size:clamp(1rem,2.1vw,1.45rem);
  color:var(--ink);background:var(--surface);border-radius:999px;padding:11px 22px}
.loop i{color:var(--ink);font-style:normal;font-size:1.1rem}
.loop span.last{background:var(--sky)}

/* ---- belief rows: claim + the decision it forced ---- */
.belief{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:start;
  padding:44px 0;border-top:1px solid var(--line)}
.belief:first-of-type{border-top:0}
@media(max-width:860px){.belief{grid-template-columns:1fr;gap:18px;padding:34px 0}}
.belief h3{font-size:1.62rem;letter-spacing:-.02em;max-width:20ch}
.belief .because{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rose);margin:0 0 12px}
.belief p{color:var(--mut);margin:0}
.belief p+p{margin-top:.9em}
.belief code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--sky-soft);color:var(--sky);padding:2px 7px;border-radius:6px}

/* ---- steps ---- */
.step{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:center;
  padding:clamp(48px,7vw,84px) 0}
.step:nth-child(even) .step-shot{order:2}
@media(max-width:900px){.step{grid-template-columns:1fr;gap:30px}
  .step:nth-child(even) .step-shot{order:0}}
.step-n{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.step h3{font-size:clamp(1.5rem,3vw,2.05rem);margin-bottom:14px;max-width:18ch}
.step p{color:var(--mut)}
.shot{border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);
  background:#fff}
.deep .shot{border-color:var(--sky)}

/* ---- gallery ---- */
.gal{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:1000px){.gal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0}
.gal figcaption{font-size:12.5px;font-weight:600;color:var(--mut);margin-top:12px;
  letter-spacing:.02em;text-align:center}
.gal .shot{border-radius:18px}

/* ---- who it's for ---- */
.who{background:#fff;border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow);height:100%}
.who h3{margin-bottom:10px;font-size:1.28rem}
.who p{color:var(--mut);font-size:15.5px;margin:0}
.who .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--caramel);background:var(--caramel-soft);
  padding:5px 11px;border-radius:999px;margin-bottom:16px}

/* ---- feature table ---- */
.feat{border-top:1px solid var(--line);padding:26px 0;display:grid;
  grid-template-columns:180px 1fr;gap:32px;align-items:baseline}
@media(max-width:760px){.feat{grid-template-columns:1fr;gap:8px}}
.feat h4{font-family:var(--display);font-size:1.18rem;font-weight:600;color:var(--ink)}
.feat p{margin:0;color:var(--mut);font-size:15.5px}

/* ---- scripture band ---- */
.scripture{font-family:var(--scripture);font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.42;
  font-style:italic;color:var(--ink);max-width:22ch;margin:0 auto;text-align:center}
.scripture-c{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sky-mid);margin-top:26px;text-align:center;font-style:normal}

/* ---- faq ---- */
details{border-top:1px solid var(--line);padding:20px 0}
details summary{font-family:var(--display);font-size:1.12rem;font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:20px;color:var(--ink)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';color:var(--ink);font-size:1.5rem;line-height:1;flex:none}
details[open] summary::after{content:'−'}
details p{margin:14px 0 0;color:var(--mut);font-size:15.5px;max-width:70ch}

/* ---- footer ---- */
footer{background:var(--deep);color:var(--ink);padding:64px 0 40px;font-size:14.5px}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{text-decoration:underline}
.foot-grid{display:flex;gap:48px;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;margin-bottom:44px}
.foot-col h5{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.foot-col a{display:block;margin-bottom:9px}
.foot-bar{border-top:1px solid rgba(18,48,73,.16);padding-top:26px;display:flex;gap:18px;
  justify-content:space-between;flex-wrap:wrap;font-size:13px}

/* ---- reveal interaction ---- */
.demo{background:#fff;border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow);max-width:420px}
.demo .row{display:flex;align-items:center;gap:14px;margin:16px 0}
.demo .nm{width:74px;font-size:14.5px;font-weight:600;color:var(--ink)}
.demo .bar{flex:1;height:11px;border-radius:9px;background:var(--sky-soft);overflow:hidden}
.demo .fill{height:100%;border-radius:9px;width:0;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.demo .fill.a{background:var(--ink)}
.demo .fill.b{background:var(--sky)}
.demo .val{width:34px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--mut);font-size:15px}
.demo.sealed .val{color:var(--sky-mid)}
@media (prefers-reduced-motion:reduce){.demo .fill{transition:none}}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}

/* images fill their frame — no white gutter inside the rounded container */
.shot img{width:100%;height:auto;display:block}
.shot{max-width:390px;margin-inline:auto}
.gal .shot{max-width:none}
.phone img{width:100%;height:auto}
.head h2{margin-bottom:18px}
.hero h1{margin-bottom:6px}
/* reserve the frame so lazy images never collapse the layout */
.shot img,.phone img{aspect-ratio:390/844;object-fit:cover;background:var(--sky-soft)}

/* ================= value-proposition carousel ================= */
.vp{position:relative}
.vp-tabs{display:flex;gap:0;align-items:flex-start;margin-bottom:clamp(36px,4vw,52px);
  position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.vp-tabs::-webkit-scrollbar{display:none}
.vp-tab{flex:1 1 0;min-width:132px;background:none;border:0;padding:0 14px 0 0;cursor:pointer;
  text-align:left;font-family:var(--body);color:var(--mut);transition:color .2s ease}
.vp-tab:hover{color:var(--navy)}
.vp-tab .t-n{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);transition:color .2s ease}
.vp-tab .t-l{display:block;font-family:var(--display);font-size:1.02rem;font-weight:600;
  line-height:1.25;margin-top:7px}
.vp-tab[aria-selected="true"]{color:var(--ink)}
.vp-tab[aria-selected="true"] .t-n{color:var(--rose)}
/* the thread: a dashed line the active segment stitches solid */
.vp-rail{position:relative;height:10px;margin-bottom:26px}
.vp-rail .dash{position:absolute;inset:0;top:4px;height:2px;
  background-image:linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);
  background-size:12px 2px;background-repeat:repeat-x}
.vp-rail .lit{position:absolute;top:3px;left:0;height:4px;border-radius:4px;background:var(--sky);
  width:0;transition:width .42s cubic-bezier(.2,.7,.3,1),left .42s cubic-bezier(.2,.7,.3,1)}
.vp-rail .lit::after{content:'';position:absolute;right:-3px;top:-3px;width:10px;height:10px;
  border-radius:50%;background:var(--rose-mid)}

.vp-stage{display:grid;align-items:center}
.vp-slide{grid-area:1/1;display:grid;grid-template-columns:1fr 360px;gap:clamp(36px,5vw,72px);
  align-items:center;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.3,1),visibility 0s linear .42s}
.vp-slide.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media(max-width:900px){.vp-slide{grid-template-columns:1fr;gap:32px}
  .vp-slide .vp-shot{order:-1;max-width:290px;margin-inline:auto}}
.vp-slide h3{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.022em;margin-bottom:16px;max-width:17ch}
.vp-slide p{color:var(--mut);max-width:56ch}
.vp-proof{display:inline-flex;align-items:center;gap:9px;margin-top:6px;
  background:var(--sky-soft);color:var(--cerulean);border-radius:999px;padding:9px 16px;
  font-size:13.5px;font-weight:600;letter-spacing:.01em}
.vp-proof .pd{width:6px;height:6px;border-radius:50%;background:var(--sky);flex:none}
.vp-shot{position:relative}
.vp-shot .shot{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.vp-slide.is-on .vp-shot .shot{transform:none}
.vp-slide:not(.is-on) .vp-shot .shot{transform:scale(.965)}

.vp-controls{display:flex;align-items:center;gap:12px;margin-top:clamp(30px,4vw,44px)}
.vp-arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  color:var(--navy);cursor:pointer;display:grid;place-items:center;
  transition:border-color .18s ease,color .18s ease,transform .12s ease}
.vp-arrow:hover{border-color:var(--sky);color:var(--ink)}
.vp-arrow:active{transform:scale(.94)}
.vp-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.vp-count{font-size:13.5px;font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums;
  margin-left:4px}
.vp-play{margin-left:auto;background:none;border:0;color:var(--mut);font-family:var(--body);
  font-size:13px;font-weight:600;cursor:pointer;letter-spacing:.02em;padding:8px 4px}
.vp-play:hover{color:var(--ink)}
@media(max-width:560px){.vp-tab{min-width:118px}.vp-play{display:none}}

@media (prefers-reduced-motion:reduce){
  .vp-slide{transition:opacity .2s ease,visibility 0s linear .2s;transform:none}
  .vp-slide.is-on{transform:none}
  .vp-slide:not(.is-on) .vp-shot .shot{transform:none}
  .vp-shot .shot,.vp-rail .lit{transition:none}
}
/* carousel frames show the top of each screen, faded out at the base */
.vp-slide{grid-template-columns:1fr 330px}
@media(max-width:900px){.vp-slide{grid-template-columns:1fr}}
.vp-shot .shot{max-width:330px;height:clamp(400px,46vw,545px);border-radius:24px}
.vp-shot .shot img{aspect-ratio:auto;width:100%;height:100%;object-fit:cover;object-position:top center;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
/* top-align copy with its screenshot — no centred dead space on shorter slides */
.vp-stage{align-items:start}
.vp-slide{align-items:start}
.vp-slide>div:first-child{padding-top:6px}

/* ================= the journey: a week with Cord ================= */
.jrn{position:relative;margin-top:clamp(40px,5vw,60px)}
.jrn-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.4vw,30px);position:relative}
/* the thread runs behind the nodes, dashed like every stitch in the app */
.jrn-steps::before{content:'';position:absolute;left:6%;right:6%;top:23px;height:2px;
  background-image:linear-gradient(90deg,var(--line) 0 7px,transparent 7px 14px);
  background-size:14px 2px;background-repeat:repeat-x}
.jrn-step{position:relative}
.jrn-num{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--sky);
  color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:600;
  font-size:1.05rem;position:relative;z-index:1;margin-bottom:20px;
  box-shadow:0 0 0 7px var(--surface)}
.jrn-step:last-child .jrn-num{background:var(--sky);color:var(--ink)}
.jrn-when{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rose);margin-bottom:8px}
.jrn-t{font-family:var(--display);font-weight:600;font-size:1.14rem;color:var(--ink);
  line-height:1.3;margin-bottom:9px}
.jrn-p{font-size:14.5px;line-height:1.62;color:var(--mut)}
@media(max-width:860px){
  .jrn-steps{grid-template-columns:1fr;gap:0}
  .jrn-steps::before{left:22px;right:auto;top:10px;bottom:40px;width:2px;height:auto;
    background-image:linear-gradient(180deg,var(--line) 0 7px,transparent 7px 14px);
    background-size:2px 14px;background-repeat:repeat-y}
  .jrn-step{padding-left:70px;padding-bottom:32px}
  .jrn-num{position:absolute;left:0;top:0;margin-bottom:0}
  .jrn-when{margin-top:4px}
}
/* gallery captions carry a second line */
.gal figcaption span{display:block;font-weight:500;color:var(--mut);font-size:12.5px;margin-top:3px;letter-spacing:0}
/* the thread connects steps — it should not trail past the last one */
.jrn-steps::before{display:none}
.jrn-step::after{content:'';position:absolute;left:58px;right:-14px;top:23px;height:2px;
  background-image:linear-gradient(90deg,var(--line) 0 7px,transparent 7px 14px);
  background-size:14px 2px;background-repeat:repeat-x}
.jrn-step:last-child::after{display:none}
@media(max-width:860px){
  .jrn-step::after{left:22px;right:auto;top:56px;bottom:8px;width:2px;height:auto;
    background-image:linear-gradient(180deg,var(--line) 0 7px,transparent 7px 14px);
    background-size:2px 14px;background-repeat:repeat-y}
}

/* ================= Skein & Bobbin ================= */
.ch{display:block;overflow:visible}
/* the row bottom-aligns and the heart is lifted by its own bottom margin —
   exactly how StrandPair does it in mascots.tsx */
.ch-pair{display:flex;align-items:flex-end;justify-content:center;gap:0;pointer-events:none;flex:none}
.ch-pair .ch-heart-wrap{z-index:2;position:relative;display:block}
/* the bob: same 2600ms each way as useBob() in the app */
@keyframes ch-bob-a{from{transform:translateY(0) rotate(0)}to{transform:translateY(-6%) rotate(-3deg)}}
@keyframes ch-bob-b{from{transform:translateY(0) rotate(0)}to{transform:translateY(-6%) rotate(3deg)}}
@keyframes ch-heart{from{transform:scale(.9) translateY(0)}to{transform:scale(1.12) translateY(-3px)}}
@keyframes ch-wave{from{transform:rotate(-9deg)}to{transform:rotate(12deg)}}
.ch-skein{animation:ch-bob-a 2.6s cubic-bezier(.42,0,.58,1) infinite alternate}
.ch-bobbin{animation:ch-bob-b 2.6s cubic-bezier(.42,0,.58,1) infinite alternate;animation-delay:-1.3s}
.ch-heart-wrap{animation:ch-heart 2s cubic-bezier(.42,0,.58,1) infinite alternate;animation-delay:-.65s}
.ch-skein .ch-arm{transform-origin:85px 55px;animation:ch-wave 1.15s cubic-bezier(.42,0,.58,1) infinite alternate}
/* a character sitting beside a heading */
.ch-beside{display:flex;align-items:flex-end;gap:16px}
.ch-corner{position:absolute;pointer-events:none;z-index:1}

/* ================= scroll reveal ================= */
.js .rv{opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.07s}.rv-2{transition-delay:.14s}.rv-3{transition-delay:.21s}
.rv-4{transition-delay:.28s}.rv-5{transition-delay:.35s}.rv-6{transition-delay:.42s}
.rv-7{transition-delay:.49s}.rv-8{transition-delay:.56s}

/* the journey thread draws itself in as the steps arrive */
.jrn-step::after{transform-origin:left center;transform:scaleX(0);
  transition:transform .7s cubic-bezier(.2,.7,.3,1) .25s}
.jrn-step.in::after{transform:scaleX(1)}
.jrn-num{transition:transform .45s cubic-bezier(.34,1.4,.5,1),box-shadow .3s ease}
.jrn-step.in .jrn-num{animation:pop .5s cubic-bezier(.34,1.4,.5,1) backwards}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* ================= nav settles on scroll ================= */
.nav{transition:box-shadow .3s ease,background .3s ease,border-color .3s ease}
.nav.stuck{box-shadow:0 6px 26px rgba(14,50,71,.09)}

/* ================= hero entrance ================= */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-rise>*{animation:rise .78s cubic-bezier(.2,.7,.3,1) backwards}
.hero-rise>*:nth-child(1){animation-delay:.05s}
.hero-rise>*:nth-child(2){animation-delay:.13s}
.hero-rise>*:nth-child(3){animation-delay:.21s}
.hero-rise>*:nth-child(4){animation-delay:.29s}
.hero-rise>*:nth-child(5){animation-delay:.37s}
@keyframes float-in{from{opacity:0;transform:translateY(38px) scale(.97)}to{opacity:1;transform:none}}
.phone-wrap{animation:float-in .95s cubic-bezier(.2,.7,.3,1) .18s backwards}

/* ================= gallery + card hover lift ================= */
.gal figure .shot{transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s ease}
.gal figure:hover .shot{transform:translateY(-8px) scale(1.015)}
.feat{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.feat:hover{transform:translateY(-3px)}

@media (prefers-reduced-motion:reduce){
  .ch-skein,.ch-bobbin,.ch-heart-wrap,.ch-skein .ch-arm{animation:none!important}
  .rv{opacity:1;transform:none;transition:none}
  .jrn-step::after{transform:none;transition:none}
  .jrn-step.in .jrn-num{animation:none}
  .hero-rise>*,.phone-wrap{animation:none}
  .gal figure:hover .shot,.feat:hover{transform:none}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* a section header that carries the characters alongside, never on top of, the copy */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,64px)}
.head-row .head{margin-bottom:0}
@media(max-width:820px){.head-row{display:block}.head-row .ch-pair{margin-top:26px;justify-content:flex-start}}

/* ================= what the two of you get ================= */
.bens{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,3.6vw,56px) clamp(28px,3.4vw,54px)}
@media(max-width:940px){.bens{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.bens{grid-template-columns:1fr}}
.ben{position:relative}
/* the stitch — the set's signature, one short run of thread over each promise */
.ben::before{content:'';display:block;width:34px;height:2px;margin-bottom:18px;
  background-image:linear-gradient(90deg,var(--sky) 0 7px,transparent 7px 13px);
  background-size:13px 2px;background-repeat:repeat-x}
.ben:nth-child(3n+2)::before{background-image:linear-gradient(90deg,var(--rose-mid) 0 7px,transparent 7px 13px)}
.ben:nth-child(3n+3)::before{background-image:linear-gradient(90deg,var(--sky) 0 7px,transparent 7px 13px)}
.ben h3{font-size:1.22rem;letter-spacing:-.012em;margin-bottom:11px;line-height:1.3}
.ben p{font-size:15px;line-height:1.68;color:var(--mut)}
.ben em{font-style:normal;color:var(--ink);font-weight:600;background:linear-gradient(180deg,transparent 60%,var(--rose-soft) 60%)}

/* ================= the mission ================= */
.mission{text-align:center;max-width:860px;margin:0 auto}
.mission .ch-pair{margin:0 auto clamp(26px,3vw,38px)}
.mission p.mission-line{font-family:var(--display);font-weight:600;
  font-size:clamp(1.6rem,3.5vw,2.5rem);line-height:1.28;letter-spacing:-.02em;color:var(--ink);
  margin-bottom:26px}
.mission p.mission-line b{color:var(--ink);font-weight:600;background:linear-gradient(180deg,transparent 60%,var(--rose-soft) 60%)}
.mission p{font-size:clamp(16px,1.6vw,17.5px);line-height:1.75;color:var(--mut);
  max-width:62ch;margin:0 auto 18px}
.mission .rule{width:44px;height:2px;margin:32px auto 0;
  background-image:linear-gradient(90deg,var(--rose-mid) 0 7px,transparent 7px 13px);
  background-size:13px 2px;background-repeat:repeat-x}

/* ================= more life in the characters ================= */
@keyframes ch-blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
.ch-eyes{transform-origin:50px 50px;animation:ch-blink 5.4s ease-in-out infinite}
.ch-bobbin .ch-eyes{animation-duration:6.7s;animation-delay:-2.1s}
/* a character that rises into place when its section arrives */
@keyframes ch-peek{from{transform:translateY(34px);opacity:0}to{transform:translateY(0);opacity:1}}
.rv.in .ch-peek,.ch-peek.in{animation:ch-peek .7s cubic-bezier(.34,1.32,.5,1) backwards}
@media (prefers-reduced-motion:reduce){
  .ch-eyes{animation:none}
  .rv.in .ch-peek,.ch-peek.in{animation:none}
}

/* ================= the story: a book you turn ================= */
.story{--pw:min(560px,92vw);--ph:clamp(430px,52vw,500px)}
.book{position:relative;width:var(--pw);height:var(--ph);margin:0 auto;
  perspective:2200px;perspective-origin:50% 40%}
.leaf{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;
  transition:transform .92s cubic-bezier(.42,0,.24,1);will-change:transform}
.leaf.turned{transform:rotateY(-172deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:#fff;border-radius:6px 18px 18px 6px;padding:clamp(26px,3.6vw,42px);
  box-shadow:0 22px 54px -18px rgba(14,50,71,.34),0 2px 0 rgba(14,50,71,.06);
  display:flex;flex-direction:column;overflow:hidden}
/* the spine edge — a book, not a card */
.face::before{content:'';position:absolute;left:0;top:0;bottom:0;width:16px;
  background:linear-gradient(90deg,rgba(14,50,71,.13),rgba(14,50,71,0))}
.face.back{transform:rotateY(180deg);background:var(--surface)}
.leaf-n{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--rose);margin-bottom:14px}
.face h3{font-size:clamp(1.32rem,2.5vw,1.85rem);letter-spacing:-.018em;line-height:1.24;
  margin-bottom:14px;max-width:20ch;color:var(--ink)}
.face p{font-size:clamp(14.5px,1.5vw,15.6px);line-height:1.7;color:var(--mut);margin-bottom:12px}
.face p:last-of-type{margin-bottom:0}
.face .said{font-family:Lora,Georgia,serif;font-style:italic;color:var(--ink);
  border-left:2px solid var(--rose-mid);padding-left:14px;margin-top:auto}
.face .said b{font-style:normal;font-weight:600;display:block;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mut);margin-top:7px}
/* the cover sits under everything and shows once the book is finished */
.book-end{position:absolute;inset:0;border-radius:6px 18px 18px 6px;background:var(--deep);
  color:var(--sky-soft);display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:clamp(26px,3.6vw,42px);z-index:-1}
.book-end h3{color:#fff;font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:12px;max-width:22ch}
.book-end p{color:var(--sky-mid);max-width:34ch}

.story-ctl{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:clamp(28px,3.4vw,40px)}
.story-ctl .vp-arrow{background:#fff}
.story-pips{display:flex;gap:7px;margin:0 6px}
.pip{width:7px;height:7px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer;
  transition:background .25s ease,transform .25s ease}
.pip[aria-current="true"]{background:var(--ink);transform:scale(1.4)}
.story-hint{text-align:center;font-size:13px;color:var(--mut);margin-top:14px;letter-spacing:.01em}
@media(max-width:560px){.face{padding:24px 22px 24px 28px}.face h3{max-width:none}}
@media (prefers-reduced-motion:reduce){
  .leaf{transition:opacity .2s ease}
  .leaf.turned{transform:none;opacity:0;pointer-events:none}
}
/* a turning leaf swings wide of the book — let it, without scrolling the page */
#story{overflow-x:clip}

/* ---- hero without the phone: one centred column ---- */
.hero-grid.solo{grid-template-columns:1fr;max-width:760px;text-align:center;gap:0}
.hero-grid.solo .hero-copy{margin-inline:auto}
.hero-grid.solo h1{max-width:none;margin-inline:auto}
.hero-grid.solo .lede{max-width:56ch;margin-inline:auto}
.hero-grid.solo .verse{display:inline-block;text-align:left;border-left:3px solid var(--rose-mid)}
.hero-grid.solo .btns{justify-content:center}
.hero-cast{display:flex;justify-content:center;margin-top:clamp(38px,5vw,58px);padding-bottom:8px}

/* ---- story pages now carry a screen and a character ---- */
.story{--pw:min(880px,94vw);--ph:clamp(500px,58vw,560px)}
.face{display:grid;grid-template-columns:1fr 190px;gap:clamp(20px,2.6vw,34px);align-items:start}
.face-copy{display:flex;flex-direction:column;height:100%;min-width:0}
.face-side{position:relative;align-self:stretch;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start}
.face-shot{width:100%;border-radius:16px;overflow:hidden;background:var(--surface);
  box-shadow:0 14px 34px -14px rgba(14,50,71,.42);height:clamp(300px,34vw,344px)}
.face-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
.face-cast{margin-top:auto;padding-top:14px}
@media(max-width:720px){
  .face{grid-template-columns:1fr;gap:16px}
  .face-side{flex-direction:row;align-items:flex-end;gap:16px}
  .face-shot{height:150px;max-width:130px}
  .face-cast{margin-top:0;padding-top:0}
  .story{--ph:clamp(560px,120vw,660px)}
}

/* ================= the book, properly bound ================= */
/* the block of pages still to come, stacked under the right edge */
.book::after{content:'';position:absolute;right:-9px;top:9px;bottom:9px;width:11px;
  border-radius:0 8px 8px 0;pointer-events:none;z-index:-2;
  background:repeating-linear-gradient(180deg,#fff 0 3px,var(--sky-soft) 3px 4px);
  box-shadow:3px 5px 16px -5px rgba(14,50,71,.5)}
/* and the closed block behind the spine */
.book::before{content:'';position:absolute;left:-7px;top:12px;bottom:12px;width:9px;
  border-radius:8px 0 0 8px;pointer-events:none;z-index:-2;
  background:linear-gradient(90deg,var(--sky-mid),var(--sky-soft));
  box-shadow:-2px 6px 18px -6px rgba(14,50,71,.6)}

/* NB: never put `filter` on .leaf — it flattens preserve-3d and the front face
   bleeds through the back, mirrored. Shadow the faces instead. */
.book.turning .face{box-shadow:-18px 16px 40px -12px rgba(14,50,71,.46),
  0 22px 54px -18px rgba(14,50,71,.34)}

/* paper: warm white, a bound edge, and a gutter that darkens toward the spine */
.face{background:linear-gradient(96deg,var(--surface) 0 4%,#fff 12%)}
.face::before{width:26px;
  background:linear-gradient(90deg,rgba(14,50,71,.16),rgba(14,50,71,.045) 42%,rgba(14,50,71,0))}
.face::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,rgba(14,50,71,.05),transparent 16%);opacity:0;
  transition:opacity .46s ease}
.book.turning .face::after{opacity:1}
.face.back{background:var(--surface)}
/* the reverse of a leaf shows the ghost of what is printed on the other side */
.face.back::before{left:auto;right:0;
  background:linear-gradient(270deg,rgba(14,50,71,.14),rgba(14,50,71,0))}

/* a page number, because it is a book */
.leaf-no{position:absolute;right:clamp(26px,3.6vw,42px);bottom:clamp(18px,2.2vw,26px);
  font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--mut);
  font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .book.turning .face{box-shadow:0 22px 54px -18px rgba(14,50,71,.34)}
  .book.turning .face::after{opacity:0}
}

/* ================= the turn, as paper behaves ================= */
/* A page does not pivot flat on the table — it lifts off the spine, swings,
   and settles. --lift is animated separately from the rotation so the two can
   have different shapes: the rotation is steady, the lift peaks mid-swing. */
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }

.leaf{transform:translateZ(var(--lift,0px)) rotateY(0deg)}
/* turned leaves fan very slightly, so the read stack thickens on the left */
.leaf.turned{transform:translateZ(var(--lift,0px)) rotateY(calc(-176deg + var(--i,0) * 0.9deg))}
@keyframes leaf-lift{0%,100%{--lift:0px}46%{--lift:32px}}
.leaf.moving{animation:leaf-lift .92s cubic-bezier(.42,0,.24,1)}

/* the next page invites the click */
.book:not(.turning) .leaf:not(.turned){cursor:pointer}
.book:not(.turning) .leaf:not(.turned):hover{transform:translateZ(9px) rotateY(-2.2deg)}
.leaf:not(.turned):hover .face{box-shadow:-6px 20px 50px -16px rgba(14,50,71,.42)}

/* the unread block on the right thins out as you go; the read block grows left */
.book::after{width:calc(3px + var(--left-to-read,8) * 1.15px);
  transition:width .5s cubic-bezier(.2,.7,.3,1)}
.book::before{width:calc(3px + var(--already-read,0) * 1.15px);
  transition:width .5s cubic-bezier(.2,.7,.3,1)}

/* The verso. Once turned it faces the reader the right way round, so nothing
   here is mirrored — it should read like the back of a printed page. */
/* A turned leaf keeps its left edge at the spine and swings the rest off to the
   left, so only the strip nearest the spine is ever seen. After the 180 flip
   that strip is the verso's RIGHT edge — so the printing lives there. */
.face.back{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:16px;padding-right:clamp(26px,3.4vw,44px)}
.face.back .leaf-no{position:static;font-size:clamp(46px,6vw,68px);letter-spacing:.02em;
  color:var(--mut);font-weight:600;font-family:var(--display);line-height:1}
.verso-mark{display:flex;align-items:center;gap:9px;opacity:.5}
.verso-mark svg{width:26px;height:26px}
.verso-mark b{font-family:var(--display);font-weight:600;font-size:14px;color:var(--sky);
  letter-spacing:.02em}
.verso-rule{width:56px;height:2px;
  background-image:linear-gradient(90deg,var(--sky-mid) 0 7px,transparent 7px 13px);
  background-size:13px 2px;background-repeat:repeat-x}

@media (prefers-reduced-motion:reduce){
  .leaf.moving{animation:none}
  .book:not(.turning) .leaf:not(.turned):hover{transform:none}
}


/* ================= Harbor House feel, mirrored from the app ================= */
/* Fredoka runs wide and soft: headings take zero tracking, as in theme.ts */
h1,h2,h3,h4,.mission p.mission-line,.face h3,.vp-slide h3,.ben h3,.jrn-t{letter-spacing:0}

/* contrast fixes from the Harbor House audit */
/* muted ink fails on a tinted panel, so body text on one is ink;
   eyebrows are excluded so they keep the chip treatment below */
.toned p:not(.eyebrow),.toned .note{color:var(--ink)}
.vp-proof{color:var(--ink)}

/* ======= Rose — the accent, under a twentieth of the page ======= */
/* Section labels are ink on a rose chip: the chip is the highlight, not the type.
   Rose type on rose-soft measures 4.48:1, under AA at the 11px these run at, so
   .eyebrow.rose keeps the chip and drops the tinted text. */
.eyebrow{display:inline-block;background:var(--rose-soft);color:var(--ink);padding:5px 11px;
  border-radius:999px;line-height:1.25}
.eyebrow.rose{color:var(--ink)}
::selection{background:var(--rose-soft);color:var(--ink)}
:focus-visible{box-shadow:0 0 0 7px var(--rose-soft)}
a{text-decoration-color:var(--sky)}
a:hover{text-decoration-color:var(--rose-mid)}
.note .dot,.vp-proof .pd{background:var(--rose)}
/* the selected tab number wears the highlight */
.vp-tab[aria-selected="true"] .t-n{color:var(--ink);background:var(--rose-soft);display:inline-block;
  padding:2px 8px;border-radius:999px}
/* the closing band is the masthead again, with the accent rising behind it.
   NB: this outranks `.hero,.deep` further down — keep it deep or the white
   headings and pale ghost buttons set for deep bands land on a light ground. */
body > section.deep:last-of-type{background:
  radial-gradient(62% 82% at 50% 100%,rgba(184,61,112,.40),rgba(184,61,112,0) 70%),
  linear-gradient(180deg,var(--deep) 0%,#0E3554 100%)}

/* ================= the screenshot viewer ================= */
.zoomable{cursor:zoom-in}
.zoomable:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
html.lb-lock,html.lb-lock body{overflow:hidden}
/* the backdrop is the page's own ground, frosted — the palette, not a black scrim */
.lb{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:72px 84px 56px;
  background:rgba(243,248,252,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}
.lb.open{opacity:1;visibility:visible;transition-delay:0s}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-height:100%;min-height:0}
.lb img{display:block;height:min(84vh,1040px);width:auto;max-width:100%;border-radius:30px;background:#fff;
  box-shadow:0 0 0 1px rgba(18,48,73,.08),0 34px 80px -30px rgba(14,50,71,.42),0 20px 56px -18px rgba(184,61,112,.30);
  transform:scale(.94) translateY(14px);transition:transform .34s cubic-bezier(.2,.7,.3,1),opacity .2s ease}
.lb.open img{transform:none}
.lb img.swap{opacity:0}
.lb figcaption{font-size:14.5px;line-height:1.5;color:var(--ink);max-width:56ch;text-align:center}
.lb-btn{position:absolute;width:50px;height:50px;border-radius:50%;border:1.5px solid var(--sky);
  background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--accent-shadow);transition:border-color .18s ease,transform .12s ease}
.lb-btn:hover{border-color:var(--rose-soft)}
.lb-btn:active{transform:scale(.94)}
.lb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb-close{top:18px;right:18px}
.lb-prev{left:22px;top:50%;margin-top:-25px}
.lb-next{right:22px;top:50%;margin-top:-25px}
.lb-count{position:absolute;top:30px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;
  letter-spacing:.12em;color:var(--ink);background:var(--rose-soft);padding:5px 12px;border-radius:999px}
.lb[data-single] .lb-prev,.lb[data-single] .lb-next,.lb[data-single] .lb-count{display:none}
@media(max-width:700px){
  .lb{padding:64px 14px 96px}
  .lb img{height:auto;width:min(92vw,440px);max-height:72vh;border-radius:24px}
  .lb-prev,.lb-next{top:auto;bottom:24px;margin-top:0}
  .lb-prev{left:calc(50% - 66px)}.lb-next{right:calc(50% - 66px)}
}
@media (prefers-reduced-motion:reduce){.lb,.lb img{transition:none}.lb img{transform:none}}

/* a single app screen beside a section heading — cropped to its top, faded at the base */
.head-shot{flex:none;width:clamp(168px,17vw,214px)}
.head-shot .shot{height:clamp(236px,25vw,300px);border-radius:22px;max-width:none}
.head-shot .shot img{aspect-ratio:auto;height:100%;object-fit:cover;object-position:top center;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
@media(max-width:820px){.head-shot{margin-top:26px}}
/* the parts-you-choose heading now carries a screen beside it, so it keeps its own gap before the carousel */
#sections .head-row{margin-bottom:clamp(40px,5vw,60px)}


/* ===== Harbor House: the app's chrome, mirrored ===== */
.hero,.deep{background:var(--deep);color:var(--sky-soft)}
.hero h1,.deep h2,.deep h3,.book-end h3{color:#fff}
.hero .lede,.hero p.lede,.on-deep .lede,.deep .lede,.hero .verse,#story .story-hint,.book-end p{color:var(--sky-mid)}
.hero .verse span,.scripture-c{color:var(--sky-mid)}
footer{background:var(--deep);color:var(--sky-mid)}
footer a,.foot-col h5{color:var(--sky-soft)}
.foot-bar{border-top:1px solid rgba(227,241,251,.16)}
.btn-pri{background:var(--sky);color:#fff;box-shadow:inset 0 1.5px 0 var(--rose-soft),var(--accent-shadow)}
.btn-pri:hover{background:#1D5885;transform:translateY(-1px)}
.btn-ghost,.hero .btn-ghost,.deep .btn-ghost{background:transparent;color:var(--sky-soft);border:1.5px solid rgba(227,241,251,.38)}
.btn-ghost:hover,.hero .btn-ghost:hover,.deep .btn-ghost:hover{border-color:var(--rose-mid);color:#fff;box-shadow:none}
.deep .shot,.deep .card{border-color:rgba(227,241,251,.22)}
.deep .pip{background:rgba(227,241,251,.34)} .deep .pip[aria-current="true"]{background:#fff}
.lb{background:rgba(243,248,252,.93)}

/* ===== the book is white paper inside a deep band: keep its own type ===== */
.face h3{color:var(--ink)}
.face p{color:var(--mut)}
.face .said{color:var(--ink)}
.leaf-n{color:var(--rose)}

/* ===== contrast: text that inherits ink onto a navy band ===== */
/* `.scripture` sets no colour, so on a deep band it inherited ink (#102F4A)
   and rendered as near-black on navy — 1.23:1. It is the verse, so it leads. */
.deep .scripture{color:#fff}
/* the audience tags measured 4.48:1 on their own panel; navy clears 6.9:1 */
.who .tag{color:var(--navy)}

/* the hero's free-plan promise, under the buttons */
.hero-free{margin-top:20px;font-size:14.6px;line-height:1.62;color:var(--sky-soft);max-width:56ch}
.hero-grid.solo .hero-free{margin-inline:auto}
.hero-free b{color:#fff;font-weight:700}

/* ===== carousel: the screenshot stays beside the copy, on the right ===== */
/* It used to drop under the heading below 900px (and `order:-1` put it ABOVE
   the text, centred). Now the shot column narrows instead of collapsing, so
   text-left/shot-right survives down to tablet widths; only true phone widths
   stack, and even then the copy leads. */
@media(max-width:900px){
  .vp-slide{grid-template-columns:1fr minmax(200px,250px);gap:clamp(22px,3.2vw,34px)}
  .vp-slide .vp-shot{order:0;max-width:none;margin-inline:0}
  .vp-shot .shot{max-width:250px;height:clamp(320px,42vw,430px)}
  .vp-slide h3{font-size:clamp(1.4rem,3.5vw,1.95rem);max-width:20ch}
  .vp-slide p{font-size:15px}
}
@media(max-width:560px){
  .vp-slide{grid-template-columns:1fr;gap:24px}
  .vp-slide .vp-shot{order:0;max-width:270px;margin-inline:auto}
  .vp-shot .shot{max-width:270px;height:clamp(300px,74vw,380px)}
  .vp-slide h3{font-size:clamp(1.35rem,6vw,1.7rem);max-width:24ch}
}

/* ===== legal pages ===== */
section.legal-body{padding:clamp(44px,6vw,72px) 0 clamp(72px,9vw,112px)}
.legal{font-size:16px;line-height:1.72;color:var(--ink)}
.legal .meta{font-size:13.5px;color:var(--mut);margin:0 0 26px}
.legal h2{font-size:clamp(1.3rem,2.4vw,1.65rem);margin:46px 0 14px;scroll-margin-top:92px}
.legal h3{font-size:1.06rem;margin:24px 0 8px}
.legal p{margin:0 0 14px;color:var(--ink);max-width:none}
.legal ul,.legal ol{margin:0 0 16px;padding-left:1.3em}
.legal li{margin:0 0 9px}
.legal li::marker{color:var(--rose)}
.legal a{color:var(--sky);text-decoration:underline;text-underline-offset:3px}
.legal .summary{background:var(--bg-soft);border-radius:var(--r-lg);padding:22px 26px 12px;margin:0 0 6px}
.legal .summary p{margin-bottom:10px}
.legal .callout{background:var(--rose-soft);border-left:3px solid var(--rose-mid);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:16px 20px 4px;margin:18px 0 20px}
.legal .tbl{overflow-x:auto;margin:6px 0 18px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.legal table{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px;line-height:1.55}
.legal th,.legal td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.legal tr:last-child td{border-bottom:0}
.legal th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:700;background:var(--bg-soft)}
/* The footer grows a Legal column. On desktop the existing flex row holds all
   four. Narrower, the brand takes its own row and the three link columns stay
   together beneath it, rather than the fourth wrapping onto a row by itself.
   (.foot-grid is flexbox above this width, so grid rules only apply here.) */
@media(max-width:860px){
  .foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}
  .foot-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:520px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
}
/* On a phone the data table becomes one labelled card per row, so a reviewer
   reads each line whole instead of scrolling half a table sideways. */
@media(max-width:600px){
  .legal .tbl{overflow:visible;border:0;background:transparent;border-radius:0}
  .legal table{min-width:0}
  .legal thead{display:none}
  .legal tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
    padding:14px 16px 10px;margin:0 0 12px}
  .legal td{display:block;border:0;padding:0 0 10px}
  .legal td:first-child{font-weight:600}
  .legal td:nth-child(2)::before{content:"Why we have it"}
  .legal td:nth-child(3)::before{content:"Can we read it?"}
  .legal td:nth-child(n+2)::before{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--mut);font-weight:700;margin-bottom:2px}
}