/* ============================================================
   MyWhy — Website body redesign · shared styles
   Brand: calm, warm, premium "soft science" + a spark of life.
   Energy: deep-teal→turquoise glow · sunrise washes · coral spark.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..600&display=swap');

:root{
  /* palette */
  --cream:#FAF8F5; --cream-2:#F4EFE6; --cream-soft:#FBF8F1; --white:#fff;
  --teal:#4C9AAA; --teal-bright:#3FB6C4; --app-primary:#3A8BA8; --app-primary-2:#2AA89A;
  --deep-teal:#113847; --ink:#0B1F27;
  --slate:#52606E; --slate-2:#7C8896; --slate-3:#9AA6B2;
  --soft-blue:#DCECEF; --coral:#EE8174; --coral-deep:#E2664F; --coral-soft:#F6D9CE;
  --peach:#FBEAE0; --sage:#D9E7DD;
  /* immersive */
  --tealdark:#0E2A35; --tealdark-2:#0A2029;
  --cta:linear-gradient(135deg,#3A8BA8 0%,#2AA89A 100%);
  --coral-cta:linear-gradient(135deg,#F19184 0%,#E2664F 100%);
  --sphere:radial-gradient(120% 120% at 35% 25%,#FBF6EC 0%,#F2EFE6 55%,#E4EDE6 100%);
  /* type */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  /* shadow */
  --sh-soft:0 6px 22px rgba(17,56,71,.08);
  --sh-card:0 18px 44px rgba(17,56,71,.12);
  --sh-float:0 30px 70px rgba(17,56,71,.20);
  --sh-glow:0 40px 120px rgba(58,139,168,.45);
  /* layout */
  --maxw:1200px; --pad:clamp(20px,5vw,64px);
  --r-card:24px; --r-lg:30px; --r-xl:42px; --pill:999px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--deep-teal);
  background:var(--cream); -webkit-font-smoothing:antialiased;
  line-height:1.5; overflow-x:hidden;
}
img{display:block; max-width:100%}
/* NOTE: do NOT set `a{color:inherit}` globally — it is UNLAYERED and would beat the
   Tailwind (layered) text-white utilities in the hero/header/footer, forcing navy links.
   Links here only lose their underline; color comes from each region's own classes. */
a{text-decoration:none}
section{position:relative}

/* ---- type helpers ---- */
/* my body eyebrow label */
.ey{font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin:0 0 18px}
.ey.coral{color:var(--coral-deep)}
.ey.cream{color:rgba(255,255,255,.62)}
/* NOTE: .eyebrow / .font-display intentionally NOT redefined here — the compiled
   Tailwind (style-DZ-mQk-a.css) supplies the real ones (Cormorant Garamond) used by
   the production header/footer/hero. Fallbacks here would override them. */
/* floats the pasted rounded video hero card like the live site */
.hero-pad{padding:12px 12px 0}
@media(max-width:640px){.hero-pad{padding:0}}
/* base heading geometry only — NO global color (that would leak navy onto the white
   hero h1 via cascade-layer precedence). Body-section headings get their color below. */
h1,h2,h3{margin:0; letter-spacing:-.025em; font-weight:600}
.sec h1,.sec h2,.sec h3,.moment h1,.moment h2,.moment h3{color:var(--deep-teal)}
.display{font-size:clamp(40px,6.4vw,84px); line-height:1.02; font-weight:700; letter-spacing:-.035em}
.h2{font-size:clamp(30px,4.3vw,54px); line-height:1.06; font-weight:700; letter-spacing:-.03em}
.h3{font-size:clamp(22px,2.6vw,30px); line-height:1.12}
.serif-it{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em}
.lead{font-size:clamp(18px,1.5vw,21px); line-height:1.55; color:var(--slate); font-weight:400}
.kicker{font-family:var(--serif); font-style:italic}
.on-dark{color:#F3F7F6}
.on-dark .h2,.on-dark h2,.on-dark h3{color:#fff}
.on-dark .lead{color:rgba(233,242,242,.78)}
.muted{color:var(--slate-2)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600;
  font-size:16px; padding:16px 30px; border-radius:var(--pill); border:0; cursor:pointer;
  transition:transform .18s ease, box-shadow .25s ease, opacity .2s ease; white-space:nowrap}
.btn:active{transform:scale(.975)}
.btn-coral{background:var(--coral-cta); color:#fff; box-shadow:0 14px 30px rgba(226,102,79,.35)}
.btn-coral:hover{box-shadow:0 18px 40px rgba(226,102,79,.45); transform:translateY(-2px)}
.btn-teal{background:var(--cta); color:#fff; box-shadow:0 14px 30px rgba(42,138,154,.32)}
.btn-teal:hover{box-shadow:0 18px 40px rgba(42,138,154,.42); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--deep-teal); border:1.5px solid rgba(17,56,71,.2)}
.btn-ghost:hover{border-color:var(--deep-teal); background:rgba(17,56,71,.03)}
.btn-ghost.cream{color:#fff; border-color:rgba(255,255,255,.32)}
.btn-ghost.cream:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn ion-icon{font-size:19px}

/* store badges */
.stores{display:flex; gap:14px; flex-wrap:wrap}
.store{display:inline-flex; align-items:center; gap:11px; background:#0B1F27; color:#fff;
  padding:11px 20px 11px 18px; border-radius:14px; transition:transform .18s, box-shadow .2s}
.store:hover{transform:translateY(-2px); box-shadow:var(--sh-soft)}
.store ion-icon{font-size:27px}
.store small{display:block; font-size:10px; letter-spacing:.06em; opacity:.7; text-transform:uppercase; line-height:1}
.store b{display:block; font-size:16px; font-weight:600; line-height:1.25}

/* ---- layout ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.sec{padding:clamp(72px,9vw,128px) 0}
.center{text-align:center}
.center .lead{margin-left:auto; margin-right:auto; max-width:620px}

/* =========================================================
   HEADER  (faithful recreation — paste exact prod HTML to swap)
   ========================================================= */
.site-head{position:sticky; top:0; z-index:60; backdrop-filter:saturate(140%) blur(14px);
  background:rgba(250,248,245,.82); border-bottom:1px solid rgba(17,56,71,.07)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:74px}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--deep-teal)}
.brand img{width:34px; height:34px; border-radius:50%}
.nav{display:flex; align-items:center; gap:34px}
.nav a{font-size:15px; font-weight:500; color:var(--slate); transition:color .15s}
.nav a:hover{color:var(--deep-teal)}
.head-cta{display:flex; align-items:center; gap:18px}
.head-cta .btn{padding:11px 24px; font-size:15px}
.menu-btn{display:none; background:none; border:0; font-size:26px; color:var(--deep-teal)}
@media(max-width:860px){
  .nav{display:none}
  .head-cta .btn{padding:10px 20px}
}

/* =========================================================
   FOOTER  (faithful recreation — paste exact prod HTML to swap)
   ========================================================= */
.site-foot{background:#0B1F27; color:#cdd8da; padding:72px 0 40px; font-size:14.5px}
.foot-disc{max-width:880px; color:#8fa1a4; font-size:13px; line-height:1.7; margin:0 auto 54px; text-align:center}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08)}
.foot-brand img{width:40px; height:40px; border-radius:50%; margin-bottom:16px}
.foot-brand p{color:#8fa1a4; font-size:13.5px; line-height:1.65; max-width:300px; margin:0 0 20px}
.foot-col h5{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 18px; font-weight:600}
.foot-col a{display:block; color:#a7b6b8; margin-bottom:12px; font-size:14px; transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:28px; color:#7c8e90; font-size:12.5px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}

/* =========================================================
   DEVICE FRAME  (clean iPhone bezel; screenshots carry their own status bar)
   ========================================================= */
.device{position:relative; width:300px; border-radius:46px; padding:11px;
  background:linear-gradient(155deg,#1c1c1f,#34343a 45%,#101013);
  box-shadow:var(--sh-float), inset 0 0 0 1.5px rgba(255,255,255,.08)}
.device::after{content:""; position:absolute; left:50%; bottom:7px; transform:translateX(-50%);
  width:108px; height:5px; border-radius:5px; background:rgba(255,255,255,.5)}
.device-screen{border-radius:36px; overflow:hidden; aspect-ratio:1290/2796; background:#0E2A35}
.device-screen img{width:100%; height:100%; object-fit:cover; object-position:top}
.device.sm{width:236px; border-radius:38px; padding:9px}
.device.sm .device-screen{border-radius:30px}

/* floating bare screenshot */
.shot{border-radius:34px; overflow:hidden; box-shadow:var(--sh-card); border:1px solid rgba(17,56,71,.06); background:#0E2A35}
.shot img{width:100%; display:block}
.shot.glow{box-shadow:0 36px 90px rgba(58,139,168,.4)}

/* glow blobs */
.glowdot{position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0}

/* =========================================================
   GENERIC CARDS / CHIPS
   ========================================================= */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--pill);
  background:rgba(255,255,255,.7); border:1px solid rgba(17,56,71,.1); font-size:14px; font-weight:500; color:var(--deep-teal)}
.chip ion-icon{font-size:16px; color:var(--teal)}
.on-dark .chip{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#eaf3f3}
.on-dark .chip ion-icon{color:var(--teal-bright)}

.fcard{background:#fff; border:1px solid rgba(17,56,71,.07); border-radius:var(--r-lg); padding:32px;
  box-shadow:var(--sh-soft); transition:transform .25s ease, box-shadow .25s ease}
.fcard:hover{transform:translateY(-4px); box-shadow:var(--sh-card)}
.ficon{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin-bottom:20px;
  background:linear-gradient(150deg,rgba(58,139,168,.14),rgba(42,168,154,.14)); color:var(--app-primary)}
.ficon ion-icon{font-size:26px}
.ficon.coral{background:linear-gradient(150deg,rgba(238,129,116,.16),rgba(226,102,79,.16)); color:var(--coral-deep)}
.fcard h3{font-size:21px; margin-bottom:9px}
.fcard p{margin:0; color:var(--slate); font-size:15.5px; line-height:1.55}

.on-dark .fcard{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); box-shadow:none; backdrop-filter:blur(8px)}
.on-dark .fcard:hover{background:rgba(255,255,255,.07)}
.on-dark .fcard h3{color:#fff}
.on-dark .fcard p{color:rgba(226,238,238,.7)}

/* bullet list with check */
.checks{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:13px}
.checks li{display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--slate); line-height:1.45}
.checks li ion-icon{flex:none; font-size:20px; color:var(--app-primary-2); margin-top:1px}
.on-dark .checks li{color:rgba(226,238,238,.82)}

/* split row */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center}
.split.rev .split-media{order:2}
@media(max-width:880px){.split{grid-template-columns:1fr; gap:48px} .split.rev .split-media{order:0}}

/* =========================================================
   IMMERSIVE deep-teal section
   ========================================================= */
.immersive{background:
  radial-gradient(70% 90% at 78% 12%,rgba(63,182,196,.18),transparent 60%),
  radial-gradient(60% 80% at 10% 90%,rgba(42,168,154,.14),transparent 60%),
  linear-gradient(180deg,#0E2A35,#0A2029);
  color:#eef5f5; overflow:hidden}
.immersive .ey{color:var(--teal-bright)}
/* legibility on the dark immersive bg: headings + lead must be light.
   These (0,2,0 / class+class) beat the light-section `.sec h2` rule (0,1,1) and
   the `.lead` slate (0,1,0). serif-it accents keep their inline teal-bright color. */
.immersive .h2,.immersive .display,.immersive h1,.immersive h2,.immersive h3{color:#fff}
.immersive .lead{color:rgba(233,242,242,.85)}

/* sunrise wash */
.sunrise{background:
  radial-gradient(80% 70% at 50% -10%,rgba(251,234,224,.9),transparent 55%),
  radial-gradient(55% 50% at 85% 18%,rgba(220,236,239,.7),transparent 60%),
  radial-gradient(45% 45% at 12% 8%,rgba(246,217,206,.55),transparent 60%),
  var(--cream)}

/* =========================================================
   67 CLUB comment cards
   ========================================================= */
.comment{background:#FFFDF7; border:1px solid rgba(14,74,63,.09); border-radius:22px; padding:20px 22px;
  box-shadow:var(--sh-soft); max-width:430px}
.comment .ch{display:flex; align-items:center; gap:11px; margin-bottom:10px}
.avatar{width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-weight:600; font-size:14px}
.comment .cname{font-weight:600; color:#0E4A3F; font-size:15px}
.comment .cago{color:#9aa39c; font-size:13px; margin-left:auto}
.comment p{margin:0; color:#33403a; font-size:15px; line-height:1.5}
.comment .cact{display:flex; gap:18px; margin-top:13px; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:#8a9a8d; text-transform:uppercase}
.comment .cact .rep{color:#557A62}
.comment.reply{margin-left:34px; border-left:3px solid #D9E7DD}

/* pricing */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:880px; margin:0 auto}
.plan{background:#fff; border:1px solid rgba(17,56,71,.09); border-radius:var(--r-xl); padding:38px 34px; position:relative}
.plan.feat{background:linear-gradient(185deg,#0E2A35,#0A2029); color:#eef5f5; border:0; box-shadow:var(--sh-card)}
.plan .pname{font-size:15px; font-weight:600; letter-spacing:.02em; margin-bottom:8px}
.plan .pamt{font-size:52px; font-weight:700; letter-spacing:-.03em; line-height:1}
.plan .pamt small{font-size:18px; font-weight:500; color:var(--slate-2)}
.plan.feat .pamt small{color:rgba(226,238,238,.6)}
.plan .psub{font-size:14px; color:var(--slate-2); margin:8px 0 0}
.plan.feat .psub{color:rgba(226,238,238,.6)}
.plan ul{list-style:none; padding:0; margin:26px 0 30px; display:grid; gap:13px}
.plan li{display:flex; gap:11px; font-size:15px; color:var(--slate); line-height:1.4}
.plan.feat li{color:rgba(226,238,238,.85)}
.plan li ion-icon{flex:none; font-size:19px; color:var(--app-primary-2); margin-top:1px}
.plan .btn{width:100%; justify-content:center}
.ptag{position:absolute; top:24px; right:26px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:var(--coral-cta); color:#fff; padding:6px 13px; border-radius:var(--pill)}
.ptrial{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:13.5px; color:var(--teal-bright); font-weight:500}
@media(max-width:720px){.price-grid{grid-template-columns:1fr}}

/* stories */
.story{background:#fff; border:1px solid rgba(17,56,71,.07); border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh-soft)}
.story q{display:block; font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.4; color:var(--deep-teal); quotes:none}
.story q::before{content:open-quote} 
.story .sby{margin-top:18px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-3); font-weight:600}

/* weekly ring widget (67% module) */
.ring-mod{background:#fff; border-radius:var(--r-xl); padding:34px; box-shadow:var(--sh-card); border:1px solid rgba(17,56,71,.06)}
.ring{width:188px; height:188px; border-radius:50%; display:grid; place-items:center; margin:0 auto;
  background:conic-gradient(var(--app-primary-2) 0 67%, #E9EFE9 67% 100%); position:relative}
.ring::before{content:""; position:absolute; inset:18px; border-radius:50%; background:#fff}
.ring .rin{position:relative; text-align:center}
.ring .rin b{display:block; font-size:40px; font-weight:700; color:var(--deep-teal); letter-spacing:-.03em; line-height:1}
.ring .rin span{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-2)}
.daydots{display:flex; justify-content:center; gap:9px; margin-top:24px}
.daydots i{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:12px; font-weight:600; font-style:normal;
  background:#EEF3EE; color:var(--slate-2)}
.daydots i.on{background:var(--cta); color:#fff}
.daydots i.miss{background:var(--coral-soft); color:var(--coral-deep)}

/* meal check-in card */
.meal{background:#fff; border-radius:28px; box-shadow:var(--sh-card); overflow:hidden; border:1px solid rgba(17,56,71,.06); max-width:330px}
.meal .photo{height:200px; background:linear-gradient(150deg,#E9C9A6,#D89A6A 60%,#B9743F); position:relative}
.meal .photo ion-icon{position:absolute; inset:0; margin:auto; font-size:54px; color:rgba(255,255,255,.55)}
.meal .mbody{padding:20px 22px 24px}
.meal .mq{font-weight:600; font-size:17px; color:var(--deep-teal); margin:0 0 16px}
.meal .mopts{display:flex; gap:12px}
.meal .mopt{flex:1; text-align:center; padding:13px; border-radius:15px; font-weight:600; font-size:15px; border:1.5px solid transparent}
.meal .mopt.sup{background:rgba(42,168,154,.12); color:#1f8a7d; border-color:rgba(42,168,154,.4)}
.meal .mopt.cheat{background:#F6F2EC; color:var(--slate-2)}

/* number badge */
.numb{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--coral-deep); font-weight:400; letter-spacing:.04em}

/* stat trio */
.stat-row{display:flex; gap:clamp(20px,5vw,64px); flex-wrap:wrap}
.stat-row .st b{display:block; font-size:clamp(38px,4.5vw,56px); font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--deep-teal)}
.on-dark .stat-row .st b{color:#fff}
.stat-row .st span{font-size:14px; color:var(--slate-2); margin-top:6px; display:block}
.on-dark .stat-row .st span{color:rgba(226,238,238,.6)}

/* section heading block */
.shead{max-width:680px}
.shead.center{margin:0 auto}

/* matrix (Direction B) */
.matrix{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media(max-width:980px){.matrix{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.matrix{grid-template-columns:1fr}}
.mcol{background:#fff; border:1px solid rgba(17,56,71,.07); border-radius:var(--r-lg); padding:28px 24px; box-shadow:var(--sh-soft)}
.mcol .mh{display:flex; align-items:center; gap:11px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid rgba(17,56,71,.08)}
.mcol .mh ion-icon{font-size:22px; color:var(--app-primary)}
.mcol .mh b{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--deep-teal); font-weight:700}
.mcol ul{list-style:none; padding:0; margin:0; display:grid; gap:15px}
.mcol li b{display:block; font-size:15.5px; color:var(--deep-teal); font-weight:600; margin-bottom:2px}
.mcol li span{font-size:13.5px; color:var(--slate-2); line-height:1.45}

/* entrance */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1; transform:none}
}

/* fullbleed serif moment */
.moment{padding:clamp(90px,12vw,160px) 0}
.moment .mq{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.015em;
  font-size:clamp(30px,4.6vw,56px); line-height:1.18; max-width:980px; margin:0 auto; text-align:center}
.moment .mq em{font-style:italic; color:var(--coral)}