/* Saltwater Sunday — preview storefront
   Brand pulled from Britney's own Etsy identity: navy serif + script,
   rising sun over waves, warm cream, seafoam, peach. */

:root{
  --navy:#2e4a62;
  --navy-deep:#22394f;
  --ink:#33485e;
  --ink-soft:#5a7186;
  --aqua:#8fb5ae;
  --aqua-deep:#6f9a92;
  --mist:#e2efe7;
  --seafoam:#eef5ec;
  --cream:#fcf5e8;
  --cream-2:#f8edd9;
  --sand:#f3e6cd;
  --peach:#e8a187;
  --peach-deep:#d97f63;
  --white:#fffdf8;
  --line:rgba(46,74,98,.14);
  --shadow:0 18px 40px -18px rgba(34,57,79,.28);
  --shadow-soft:0 10px 30px -14px rgba(34,57,79,.22);
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-script:"Caveat",cursive;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--peach);color:var(--navy-deep)}

.wrap{width:min(1140px,100% - 40px);margin-inline:auto}
@media(min-width:760px){.wrap{width:min(1140px,100% - 64px)}}

/* ---------- Preview ribbon ---------- */
.ribbon{
  background:var(--navy-deep);
  color:#f6ead3;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  padding:.5rem 1rem;
  font-weight:700;
}
.ribbon b{color:var(--peach);font-weight:800}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(252,245,232,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-in{display:flex;align-items:center;gap:.8rem;padding:.65rem 0}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 2px var(--white),0 0 0 3.5px var(--aqua)}
.brand-name{line-height:1.02}
.brand-name .b1{
  font-family:var(--font-display);font-weight:600;letter-spacing:.14em;
  font-size:.98rem;color:var(--navy);display:block;
}
.brand-name .b2{
  font-family:var(--font-script);font-size:1.3rem;color:var(--peach-deep);
  display:block;margin-top:-.28rem;margin-left:.1rem;
}
.main-nav{margin-left:auto;display:none;gap:2rem;align-items:center}
.main-nav a{
  font-weight:700;font-size:.98rem;color:var(--ink);padding:.3rem 0;
  border-bottom:2.5px solid transparent;
}
.main-nav a:hover{color:var(--navy);text-decoration:none;border-color:var(--peach)}
.main-nav a[aria-current="page"]{color:var(--navy);border-color:var(--aqua-deep)}
.nav-toggle{
  margin-left:auto;background:var(--white);border:1.5px solid var(--line);
  border-radius:999px;padding:.5rem .95rem;font-family:var(--font-body);
  font-weight:800;font-size:.9rem;color:var(--navy);cursor:pointer;
  display:inline-flex;align-items:center;gap:.45rem;
}
@media(min-width:860px){.main-nav{display:flex}.nav-toggle{display:none}}
.mobile-nav{
  display:none;border-top:1px solid var(--line);padding:.6rem 0 1rem;
  background:rgba(252,245,232,.97);
}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block;padding:.65rem .2rem;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav a[aria-current="page"]{color:var(--peach-deep)}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--font-display);color:var(--navy);font-weight:560;line-height:1.14;text-wrap:balance}
h1{font-size:clamp(2.35rem,6.2vw,3.9rem);letter-spacing:-.01em}
h2{font-size:clamp(1.85rem,4.4vw,2.7rem);letter-spacing:-.005em}
h3{font-size:1.32rem;line-height:1.25}
.script{font-family:var(--font-script);color:var(--peach-deep);font-weight:600}
.eyebrow{
  text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;font-weight:800;
  color:var(--aqua-deep);margin-bottom:.9rem;display:block;
}
.lede{font-size:clamp(1.08rem,2.2vw,1.28rem);color:var(--ink-soft);line-height:1.6;text-wrap:pretty}
p{text-wrap:pretty}
.small{font-size:.9rem;color:var(--ink-soft)}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:800;font-size:1rem;line-height:1.2;
  padding:.95rem 1.7rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  text-align:center;
}
.btn:hover{text-decoration:none;transform:translateY(-1.5px)}
.btn:active{transform:translateY(0)}
.btn-navy{background:var(--navy);color:#fdf8ec;box-shadow:var(--shadow-soft)}
.btn-navy:hover{background:var(--navy-deep)}
.btn-peach{background:var(--peach);color:var(--navy-deep);box-shadow:var(--shadow-soft)}
.btn-peach:hover{background:#eda98f}
.btn-ghost{background:transparent;color:var(--navy);border-color:rgba(46,74,98,.35)}
.btn-ghost:hover{border-color:var(--navy);background:rgba(255,253,248,.65)}
.btn-light{background:var(--white);color:var(--navy)}
.btn-block{width:100%}
.btn-sm{padding:.7rem 1.25rem;font-size:.93rem}

/* ---------- Sections ---------- */
section{padding:4.2rem 0}
@media(min-width:860px){section{padding:5.5rem 0}}
.section-head{max-width:680px;margin-bottom:2.6rem}
.section-head.center{margin-inline:auto}
.tint-mist{background:linear-gradient(180deg,var(--seafoam),var(--mist))}
.tint-sand{background:var(--cream-2)}
.tint-navy{background:var(--navy);color:#eaf1ee}
.tint-navy h2,.tint-navy h3{color:#fdf8ec}
.tint-navy .lede{color:#c9dcd4}

/* ---------- Hero ---------- */
.hero{padding:3.4rem 0 0;overflow:hidden}
@media(min-width:860px){.hero{padding:4.6rem 0 0}}
.hero-grid{display:grid;gap:2.6rem;align-items:center}
@media(min-width:920px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:3.5rem}}
.hero h1{margin-bottom:1.15rem}
.hero .script{font-size:.62em;vertical-align:.06em}
.hero .lede{max-width:34rem;margin-bottom:1.9rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-note{margin-top:1.1rem;font-size:.92rem;color:var(--ink-soft)}
.hero-art{position:relative}
.hero-banner{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  border:6px solid var(--white);background:var(--white);
}
.hero-card{
  margin-top:1.1rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-soft);
  padding:1.05rem 1.25rem;display:flex;gap:1rem;align-items:center;
}
.hero-card img{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none}
.hero-card p{font-size:.98rem;line-height:1.5}
.hero-card .who{font-weight:800;color:var(--navy)}
.waves{display:block;width:100%;height:64px;margin-bottom:-1px}
@media(min-width:860px){.waves{height:92px}}

/* ---------- Path cards ---------- */
.path-grid{display:grid;gap:1.4rem}
@media(min-width:920px){.path-grid{grid-template-columns:repeat(3,1fr)}}
.path-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem 1.8rem;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.path-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:7px;
  background:linear-gradient(90deg,var(--aqua),var(--peach));
}
.path-step{
  font-family:var(--font-script);font-size:1.45rem;color:var(--peach-deep);
  line-height:1;margin-bottom:.4rem;
}
.path-card h3{margin-bottom:.55rem}
.path-card p{color:var(--ink-soft);font-size:1rem;flex:1}
.path-price{
  font-family:var(--font-display);font-size:1.45rem;color:var(--navy);
  margin:1.15rem 0 1.05rem;font-weight:600;
}
.path-price span{font-family:var(--font-body);font-size:.9rem;color:var(--ink-soft);font-weight:700}

/* ---------- Product cards ---------- */
.shop-grid{display:grid;gap:1.4rem}
@media(min-width:680px){.shop-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
.product{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;
}
.product-art{aspect-ratio:4/3;position:relative;overflow:hidden}
.product-art svg{position:absolute;inset:0;width:100%;height:100%}
.product-tag{
  position:absolute;top:.9rem;left:.9rem;z-index:2;background:var(--navy);color:#fdf8ec;
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.34rem .7rem;border-radius:999px;
}
.product-tag.peach{background:var(--peach);color:var(--navy-deep)}
.product-body{padding:1.5rem 1.55rem 1.65rem;display:flex;flex-direction:column;flex:1}
.product-body h3{margin-bottom:.5rem}
.product-body p{color:var(--ink-soft);font-size:.99rem;flex:1}
.product-foot{display:flex;align-items:baseline;gap:.6rem;margin:1.15rem 0 1rem}
.product-price{font-family:var(--font-display);font-size:1.55rem;font-weight:600;color:var(--navy)}
.product-was{font-size:.95rem;color:var(--ink-soft)}
.product-meta{font-size:.86rem;color:var(--aqua-deep);font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.45rem}

/* ---------- Lists ---------- */
.tick-list{list-style:none;display:grid;gap:.8rem}
.tick-list li{
  padding-left:2.1rem;position:relative;line-height:1.55;
}
.tick-list li::before{
  content:"";position:absolute;left:0;top:.18rem;width:1.3rem;height:1.3rem;border-radius:50%;
  background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e4a62' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/0.72rem no-repeat;
}
.tick-list li b{color:var(--navy)}

/* ---------- Week arc ---------- */
.weeks{display:grid;gap:1.1rem}
@media(min-width:760px){.weeks{grid-template-columns:1fr 1fr}}
.week{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.45rem 1.55rem;box-shadow:var(--shadow-soft);
  display:grid;grid-template-columns:auto 1fr;gap:1.05rem;align-items:start;
}
.week-num{
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--navy-deep);
  background:linear-gradient(160deg,var(--peach-soft,#f6d9c8),var(--peach));
  width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;flex:none;
}
.week h3{font-size:1.14rem;margin-bottom:.3rem}
.week p{font-size:.96rem;color:var(--ink-soft);line-height:1.55}

/* ---------- Price panel ---------- */
.price-panel{
  background:var(--white);border:1.5px solid var(--aqua);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:2.3rem 2rem;max-width:560px;margin-inline:auto;
}
.price-big{font-family:var(--font-display);font-size:clamp(2.6rem,7vw,3.4rem);font-weight:600;color:var(--navy);line-height:1}
.price-or{display:flex;align-items:center;gap:1rem;margin:1.3rem 0;color:var(--ink-soft);font-weight:700;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}
.price-or::before,.price-or::after{content:"";flex:1;height:1px;background:var(--line)}
.founding{
  background:var(--seafoam);border:1.5px dashed var(--aqua-deep);border-radius:var(--r-md);
  padding:1.15rem 1.3rem;margin-top:1.4rem;
}
.founding b{color:var(--navy)}

/* ---------- Forms ---------- */
.list-panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:2.2rem 1.9rem;max-width:600px;margin-inline:auto;
}
.list-form{display:grid;gap:.85rem;margin-top:1.3rem}
.list-form label{font-weight:800;font-size:.9rem;color:var(--navy);display:block;margin-bottom:.35rem}
.list-form input{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  padding:.85rem 1.05rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--cream);outline:none;
}
.list-form input:focus{border-color:var(--aqua-deep);background:var(--white);box-shadow:0 0 0 4px rgba(143,181,174,.25)}
.form-done{
  display:none;background:var(--seafoam);border:1.5px solid var(--aqua);
  border-radius:var(--r-md);padding:1.2rem 1.3rem;margin-top:1.3rem;text-align:center;
}
.form-done.show{display:block}
.form-done .script{font-size:1.7rem}

/* ---------- Story / about ---------- */
.story-grid{display:grid;gap:2.4rem;align-items:center}
@media(min-width:920px){.story-grid{grid-template-columns:.9fr 1.1fr;gap:3.4rem}}
.portrait{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  border:6px solid var(--white);aspect-ratio:1/1;max-width:430px;margin-inline:auto;width:100%;
}
.portrait img{width:100%;height:100%;object-fit:cover}
.fact-row{display:grid;gap:1rem;margin-top:1.8rem}
@media(min-width:680px){.fact-row{grid-template-columns:repeat(3,1fr)}}
.fact{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.15rem 1.25rem;box-shadow:var(--shadow-soft);
}
.fact .f-title{font-family:var(--font-display);color:var(--navy);font-weight:600;font-size:1.05rem;margin-bottom:.25rem}
.fact p{font-size:.93rem;color:var(--ink-soft);line-height:1.55}

/* ---------- Quote slot ---------- */
.proof-slot{
  border:1.5px dashed rgba(46,74,98,.35);border-radius:var(--r-lg);
  padding:2.4rem 2rem;text-align:center;background:rgba(255,253,248,.55);
}
.proof-slot .script{font-size:2rem;display:block;margin-bottom:.5rem}
.slot-note{
  display:inline-block;margin-top:1rem;font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem;background:var(--white);
}

/* ---------- Disclaimer ---------- */
.disclaimer{
  background:var(--white);border-left:5px solid var(--peach);border-radius:var(--r-md);
  padding:1.6rem 1.7rem;box-shadow:var(--shadow-soft);font-size:1rem;line-height:1.7;
  max-width:820px;margin-inline:auto;
}
.disclaimer .script{font-size:1.6rem;display:block;margin-bottom:.35rem}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:1rem}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.4rem 1.6rem;box-shadow:var(--shadow-soft)}
.faq-item h3{font-size:1.12rem;margin-bottom:.4rem}
.faq-item p{color:var(--ink-soft);font-size:.99rem}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;max-width:720px;margin-inline:auto}
.cta-band .script{font-size:clamp(1.9rem,5vw,2.6rem);display:block;margin-bottom:.4rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:#cfdde2;padding:3.4rem 0 2.2rem;margin-top:0}
.footer-grid{display:grid;gap:2rem}
@media(min-width:860px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
.site-footer h4{font-family:var(--font-display);color:#fdf8ec;font-size:1.05rem;margin-bottom:.8rem;font-weight:600}
.site-footer a{color:#cfdde2}
.site-footer a:hover{color:#fff}
.footer-nav{list-style:none;display:grid;gap:.45rem;font-size:.97rem}
.footer-brand{display:flex;gap:.9rem;align-items:flex-start}
.footer-brand img{width:54px;height:54px;border-radius:50%}
.footer-fine{border-top:1px solid rgba(255,255,255,.16);margin-top:2.4rem;padding-top:1.4rem;font-size:.86rem;color:#9fb4bd;line-height:1.6}
.preview-line{
  margin-top:.9rem;display:inline-block;border:1px dashed rgba(232,161,135,.65);color:#f0c4ae;
  border-radius:999px;padding:.35rem .9rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}

/* ---------- Misc ---------- */
.split{display:grid;gap:2.4rem;align-items:start}
@media(min-width:920px){.split{grid-template-columns:1fr 1fr;gap:3.2rem}}
.chip-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem}
.chip{
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:.42rem .95rem;font-size:.9rem;font-weight:700;color:var(--navy);
}
.mt{margin-top:2.6rem}

/* ================================================================
   R2 HOMEPAGE — AYZZ layer (per DESIGN-SHEET-HOME-R2.md)
   Named motion, both states, continuity cast. Homepage-scoped
   pieces are gated on the html.anim / html.loading classes set by
   the homepage's inline head script; without JS everything is
   simply visible. Shared chrome states (mobile nav, focus) apply
   site-wide.
   ================================================================ */

/* ---------- Focus (all pages) ---------- */
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
.tint-navy :focus-visible,.site-footer :focus-visible{outline-color:#f6ead3}

/* ---------- PRESS (all buttons) ---------- */
.btn:active{transform:scale(.97)}

/* ---------- Mobile nav — both states designed (all pages) ---------- */
.mobile-nav{
  position:absolute;top:100%;left:0;right:0;
  width:min(1140px,100% - 40px);margin-inline:auto;
  border-top:none;border:1px solid var(--line);border-radius:0 0 var(--r-md) var(--r-md);
  box-shadow:var(--shadow-soft);padding:.6rem 1rem 1rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s ease-out,transform .25s ease-out,visibility 0s linear .25s;
}
.mobile-nav.open{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .25s ease-out,transform .25s ease-out;
}
.nav-toggle span{display:inline-block;transition:transform .25s ease-out}
.nav-toggle[aria-expanded="true"] span{transform:rotate(180deg)}

/* ---------- Loader — a brand moment (homepage) ---------- */
html.loading{overflow:hidden}
html.loading.go{overflow:auto}
.loader{
  position:fixed;inset:0;z-index:200;background:var(--cream);
  display:none;place-items:center;
  clip-path:circle(150% at 50% 44%);
  animation:loaderFailsafe .4s ease 4.5s forwards;
}
html.loading .loader{display:grid}
.loader.done{clip-path:circle(0% at 50% 44%);transition:clip-path .65s cubic-bezier(.77,0,.175,1)}
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden}}
.loader-in{text-align:center;padding:1rem}
.loader-mark{position:relative;width:104px;height:104px;margin-inline:auto}
.loader-mark img{width:104px;height:104px;border-radius:50%}
.loader-ring{position:absolute;inset:-10px;width:124px;height:124px;transform:rotate(-90deg)}
.loader-ring circle{
  fill:none;stroke:var(--peach-deep);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:339.3;stroke-dashoffset:339.3;
  animation:sunDraw .8s cubic-bezier(.23,1,.32,1) .05s forwards;
}
@keyframes sunDraw{to{stroke-dashoffset:0}}
.loader-name{
  margin-top:1.2rem;font-family:var(--font-display);font-weight:600;
  letter-spacing:.16em;font-size:1.05rem;color:var(--navy);
}
.loader-name .script{font-family:var(--font-script);letter-spacing:0;font-size:1.55rem}
.lw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.lwi{display:inline-block;transform:translateY(110%);opacity:0;animation:nameRise .55s ease-out forwards;animation-delay:calc(.15s + var(--i,0)*90ms)}
@keyframes nameRise{to{transform:translateY(0);opacity:1}}

/* ---------- Hero entrances (homepage) ---------- */
html.anim .site-header{transition:transform .5s ease-out}
html.anim:not(.go) .site-header{transform:translateY(-100%)}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.09em;margin-bottom:-.09em}
.wi{display:inline-block}
html.anim .wi{transition:transform .65s ease-out,opacity .65s ease-out;transition-delay:calc(var(--i,0)*70ms + 60ms)}
html.anim:not(.go) .wi{transform:translateY(.55em);opacity:0}
.fu{}
html.anim .fu{transition:opacity .6s ease-out,transform .6s ease-out;transition-delay:var(--d,0s)}
html.anim:not(.go) .fu{opacity:0;transform:translateY(14px)}

/* ---------- Hero, centered composition (homepage) ---------- */
.hero-center{text-align:center}
.hero-center h1{max-width:22ch;margin-inline:auto}
.hero-center .lede{max-width:37rem;margin-inline:auto}
.hero-center .hero-cta{justify-content:center}
.hero-stage{position:relative;max-width:900px;margin:2.9rem auto 0;text-align:left}
.hero-stage .hero-banner{position:relative;z-index:1}
.sun-hero{position:absolute;width:138px;height:97px;top:-60px;right:4px;z-index:0}
html.anim .hero-stage{transition:opacity .8s ease-out,transform .8s ease-out;transition-delay:.35s}
html.anim:not(.go) .hero-stage{opacity:0;transform:scale(.94)}
.sun-seal{width:76px;height:53px;margin:0 auto 1.1rem}
@media(max-width:640px){.sun-hero{width:98px;height:69px;top:-44px;right:0}}

/* ---------- Sun & wave drift ---------- */
.sun-drift{animation:sunDrift 7s ease-in-out infinite alternate}
@keyframes sunDrift{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.wv-a{animation:waveA 9s ease-in-out infinite alternate}
.wv-b{animation:waveB 9s ease-in-out infinite alternate}
@keyframes waveA{from{transform:translateX(0)}to{transform:translateX(-12px)}}
@keyframes waveB{from{transform:translateX(0)}to{transform:translateX(12px)}}

/* ---------- Scroll reveals ---------- */
html.anim .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease-out,transform .6s ease-out;transition-delay:var(--d,0s)}
html.anim .rv.in{opacity:1;transform:translateY(0)}

/* ---------- Inside card + tick grid ---------- */
.inside-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);padding:2.2rem;max-width:840px;margin-inline:auto;
}
@media(max-width:640px){.inside-card{padding:1.5rem 1.25rem}}
.tick-grid{text-align:left}
@media(min-width:760px){.tick-grid{grid-template-columns:1fr 1fr;gap:1rem 2.2rem}}

/* ---------- Founding: quiet Circle line ---------- */
.circle-line{
  text-align:center;color:var(--ink-soft);font-size:.95rem;
  max-width:36rem;margin:1.6rem auto 0;
}
.circle-line b{color:var(--navy)}

/* ---------- Mini store — demoted shelf ---------- */
.mini-h{font-size:clamp(1.5rem,3.4vw,2.05rem)}
.wave-under{display:block;width:120px;height:12px;margin:.7rem auto 0;color:var(--aqua-deep)}
.mini-shelf{display:grid;gap:1rem;max-width:940px;margin:2.2rem auto 0;text-align:left}
@media(min-width:760px){.mini-shelf{grid-template-columns:repeat(3,1fr)}}
.mini-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.2rem 1.3rem;transition:transform .2s ease,box-shadow .2s ease;
}
.mini-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.mini-item h3{font-size:1.04rem;display:flex;gap:.55rem;align-items:flex-start;line-height:1.3}
.mini-item p{font-size:.93rem;color:var(--ink-soft);margin-top:.35rem}
.mini-item .mini-price{
  font-family:var(--font-display);font-weight:600;color:var(--navy);
  font-size:1.05rem;margin-top:.7rem;
}
.mini-sun{width:20px;height:20px;flex:none;margin-top:.12rem;color:var(--aqua-deep);transition:color .2s ease}
.mini-disc{fill:transparent;transition:fill .2s ease}
.mini-item:hover .mini-sun{color:var(--peach-deep)}
.mini-item:hover .mini-disc{fill:var(--peach)}
.mini-link{font-weight:800}

/* ---------- Final band sun ---------- */
.band-top{position:relative}
.sun-band{
  position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  width:88px;height:62px;opacity:.55;z-index:0;
}
.cta-band .script{position:relative;z-index:1}
@media(max-width:480px){
  /* Phone: the sun rises clear above the script line instead of crossing it */
  .band-top{padding-top:3.4rem}
  .sun-band{top:0;width:76px;height:54px}
}

/* ---------- Reduced motion: everything simply present ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ================================================================
   TWO DOORS (2026-11-05) — recorded program + live cohort + bundle.
   Joseph's structure ruling: two standalone offers, both together
   at a discount. Components reuse the site tokens and card language.
   ================================================================ */
.hero-cta{flex-wrap:wrap;gap:.8rem}
.btn-cream{background:#fdf8ec;color:var(--navy);box-shadow:var(--shadow-soft)}
.btn-cream:hover{background:#fff}

.door-grid{display:grid;gap:1.4rem;max-width:980px;margin-inline:auto;text-align:left}
@media(min-width:880px){.door-grid{grid-template-columns:1fr 1fr}}
.door-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);padding:2rem 1.9rem;display:flex;flex-direction:column;
}
.door-card h3{font-size:1.45rem;margin:.55rem 0 .5rem}
.door-card p{color:var(--ink-soft);font-size:.99rem;line-height:1.6}
.door-tag{
  align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);background:var(--mist);
  border-radius:999px;padding:.32rem .8rem;
}
.door-tag.live{background:var(--sand)}
.door-ticks{list-style:none;display:grid;gap:.5rem;margin:1.1rem 0;padding:0}
.door-ticks li{font-size:.95rem;color:var(--ink);padding-left:1.35rem;position:relative;line-height:1.5}
.door-ticks li::before{content:"✓";position:absolute;left:0;color:var(--aqua-deep);font-weight:800}
.door-not{
  font-size:.92rem;color:var(--ink-soft);border-top:1px solid var(--line);
  padding-top:.9rem;margin-top:.2rem;
}
.door-price{margin-top:auto;padding-top:1.2rem}
.door-price .dp{
  font-family:var(--font-display);font-weight:600;color:var(--navy);font-size:1.7rem;line-height:1.1;
}
.door-price .dp-small{font-size:.92rem;color:var(--ink-soft)}
.door-founding{
  background:var(--seafoam);border:1.5px dashed var(--aqua-deep);border-radius:var(--r-md);
  padding:.8rem 1rem;font-size:.93rem;margin:.9rem 0 1.2rem;
}
.door-founding b{color:var(--navy)}
.door-card .btn{align-self:flex-start}

.bundle-strip{
  background:var(--seafoam);border:1.5px dashed var(--aqua-deep);border-radius:var(--r-lg);
  max-width:980px;margin:1.6rem auto 0;padding:1.7rem 1.9rem;text-align:center;
}
.bundle-strip h3{font-size:1.35rem;margin-bottom:.45rem}
.bundle-strip p{color:var(--ink-soft);max-width:40rem;margin-inline:auto;line-height:1.6}
.bundle-strip p b{color:var(--navy)}
.bundle-strip .btn{margin-top:1.15rem}
.bundle-price{
  font-family:var(--font-display);font-weight:600;color:var(--navy);
  font-size:1.9rem;display:block;margin-top:.4rem;
}

.not-panel{
  background:var(--white);border-left:5px solid var(--peach);border-radius:var(--r-md);
  padding:1.6rem 1.7rem;box-shadow:var(--shadow-soft);max-width:820px;margin-inline:auto;
}
.not-panel h3{font-size:1.2rem;margin-bottom:.7rem}
.not-panel ul{list-style:none;display:grid;gap:.5rem;padding:0;margin:0}
.not-panel li{padding-left:1.4rem;position:relative;line-height:1.55;color:var(--ink)}
.not-panel li::before{content:"—";position:absolute;left:0;color:var(--peach-deep);font-weight:800}
.not-panel p{margin-top:1rem;color:var(--ink-soft)}

/* ================================================================
   SWITCHER + MEMBERSHIP (2026-11-05) — Joseph's rulings: ONE offer
   visible at a time behind a switcher; the recorded door is a
   monthly MEMBERSHIP (Circle merged in); the live cohort stands
   alone and includes 3 free months of the membership.
   Layout only — reuses the door-card language and site tokens.
   ================================================================ */
.offer-switch{
  display:flex;gap:.4rem;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:.4rem;max-width:600px;margin:0 auto 1.7rem;
  box-shadow:var(--shadow-soft);
}
.offer-tab{
  flex:1 1 0;border:0;background:transparent;border-radius:999px;cursor:pointer;
  padding:.7rem .5rem;font:inherit;font-weight:800;color:var(--navy);
  display:flex;flex-direction:column;align-items:center;gap:.05rem;line-height:1.25;
  transition:background .18s ease,color .18s ease;
}
.offer-tab span{font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.offer-tab:hover{background:var(--mist)}
.offer-tab:focus-visible{outline:2px solid var(--aqua-deep);outline-offset:2px}
.offer-tab.is-on{background:var(--navy);color:#fff}
.offer-tab.is-on span{color:#f6ddcb}
.offer-tab.is-on:hover{background:var(--navy)}
.offer-tab[data-panel="panel-membership"].is-on{background:var(--peach);color:var(--navy)}
.offer-tab[data-panel="panel-membership"].is-on span{color:#7c4a35}
.offer-tab[data-panel="panel-membership"].is-on:hover{background:var(--peach)}
.offer-panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);padding:2.1rem 2rem;display:flex;flex-direction:column;
  max-width:880px;margin-inline:auto;text-align:left;
}
.offer-panel[hidden]{display:none!important}
.offer-panel h3{font-size:1.5rem;margin:.55rem 0 .5rem}
.offer-panel p{color:var(--ink-soft);font-size:.99rem;line-height:1.6}
.offer-panel .btn{align-self:flex-start}
@media(max-width:560px){
  .offer-switch{border-radius:var(--r-lg)}
  .offer-panel{padding:1.6rem 1.3rem}
}