/* 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}