/* SECONDSPRING editorial guide theme
   Matches the Perimenopause and Menopause campaign landing page. */

:root{
  --ink:#151515;
  --paper:#f5f3ee;
  --cream:#f5f3ee;
  --white:#fff;
  --line:#d9d5cc;
  --purple:#641cad;
  --purple-dark:#641cad;
  --purple-700:#4b117f;
  --purple-100:#e9def3;
  --purple-50:#f2ebf7;
  --lavender:#e9def3;
  --sage:#dce7dc;
  --sage-ink:#344b39;
  --sand:#e9e0d0;
  --peach:#e9e0d0;
  --gold:#e0bd58;
  --muted:#68655f;
  --danger:#8c3f3f;
  --shadow:none;
  --shadow-sm:none;
  --radius:2px;
}

html{scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,.quote,.daily-target,.hero-stat strong,.qscore{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-weight:500;
}
.eyebrow,.exclusive,.nav-label{
  color:var(--muted);
  font-weight:600;
  letter-spacing:.16em;
}

/* Navigation */
.appbar{
  height:64px;
  background:rgba(245,243,238,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.brand-logo,.logo{mix-blend-mode:multiply}
.logo-surface,.footer .brand,.desktop-nav .brand{
  background:transparent;
  border-radius:0;
  padding:0;
}
.round-btn,.icon-btn{
  border-color:var(--line);
  background:transparent;
  border-radius:2px;
  color:var(--ink);
}
.desktop-nav{
  background:var(--paper)!important;
  border-color:var(--line)!important;
}
.desktop-nav a:not(.brand),.desktop-nav button{
  border-radius:2px!important;
}
.desktop-nav a.current,.desktop-nav a:hover,.desktop-nav button:hover{
  background:var(--sage)!important;
  color:var(--ink)!important;
}
.nav-support,.nav-save,.nav-saved{
  background:transparent!important;
  border:1px solid var(--line)!important;
  border-radius:2px!important;
}

/* Page frame and hero */
.shell{padding-top:82px}
.hero{
  background:var(--white)!important;
  color:var(--ink)!important;
  border:1px solid var(--line)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
.hero:before,.hero:after{display:none!important}
.hero h1{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-weight:500!important;
  letter-spacing:-.045em!important;
}
.hero h1 em{
  font-family:inherit!important;
  font-style:normal;
  font-weight:500!important;
  color:var(--purple)!important;
}
.hero p,.hero-copy p{color:#3e3c38!important}
.hero-main,.hero-copy{background:var(--white)}
.hero-visual{
  background:var(--violet-soft,var(--purple-100))!important;
  border-top:1px solid var(--line);
}
.hero-visual:before,.hero-visual:after{display:none!important}
.hero-product-frame{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:var(--white);
}
.hero-product-image{
  position:static!important;
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:cover;
  object-position:50% 66%;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none;
}
.hero-stat{
  position:absolute!important;
  z-index:3;
  left:14px!important;
  right:auto!important;
  top:auto!important;
  bottom:14px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,96px);
  align-items:end!important;
  gap:8px!important;
  max-width:none!important;
  padding:9px 10px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  color:var(--ink)!important;
}
.hero-stat strong{font-size:36px!important;line-height:.85!important}
.hero-stat span{
  color:var(--muted)!important;
  font-size:8px!important;
  line-height:1.2!important;
  padding:0!important;
}
.progress-chip{
  background:var(--white)!important;
  border:1px solid var(--line)!important;
  color:var(--ink)!important;
  border-radius:999px!important;
}

/* Starter-kit home */
.wrap{width:min(100% - 36px,1240px);padding-top:16px}
.topbar{min-height:62px;padding:0 0 14px}
.wrap>.hero{padding:30px 22px 22px}
.wrap>.hero p{font-size:15px!important;max-width:620px}
.wrap>.hero .eyebrow{color:var(--muted)}
.hero-bottom{margin-top:28px}
.hero-note{color:var(--muted)!important;font-size:12px}
.hero-bottom .product{
  width:140px;
  height:140px;
  border:1px solid var(--line);
  border-radius:2px;
  box-shadow:none;
}
.intro{padding-left:0;padding-right:0}
.intro h2{font-family:"Libre Franklin",system-ui,sans-serif;font-weight:500}
.intro p{font-size:13px}
.tools{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tool{
  background:var(--white);
  border:0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
}
.number{
  background:var(--sage);
  color:var(--ink);
  border-radius:50%;
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-weight:500;
}
.copy strong{font-family:"Libre Franklin",system-ui,sans-serif;font-weight:500}
.copy span{font-size:11px}
.open{
  background:var(--ink);
  border-radius:2px;
}
.privacy{
  background:transparent;
  border:1px solid var(--line);
  border-radius:2px;
  font-size:11px;
}

/* Cards and sections */
.card,.quick-actions a,.recipe,.saved-list button,.empty{
  background:var(--white);
  border-color:var(--line);
  border-radius:2px;
  box-shadow:none;
}
.section-head h2,.panel-head h2{font-weight:500}
.quick-actions{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.quick-actions a{
  border:0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.quick-actions i,.reason-icon,.food-icon,.empty i{
  border-radius:50%;
  background:var(--sage);
  color:var(--ink);
}
.calculator,.daily,.calendar,.week-card,.levels-explained,.day-card{border-radius:2px!important}
.level,.level-explain,.pdri-number,.food,.reason{
  border-radius:2px!important;
  box-shadow:none!important;
}
.level.active,.chip.active{
  border-color:var(--ink)!important;
  background:var(--ink)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.level.active .level-copy small{color:rgba(255,255,255,.7)}
.level.active .factor{color:#fff}
.live-pill,.day-status,.recipe-meta span{
  border-radius:999px!important;
  background:var(--sage)!important;
  color:var(--sage-ink)!important;
}
.feature-reason{
  background:var(--white)!important;
  color:var(--ink)!important;
  border-color:var(--line)!important;
}
.feature-reason p{color:var(--muted)!important}
.feature-reason .reason-icon{
  background:var(--sage)!important;
  color:var(--ink)!important;
}

/* Strong feature panels */
.result-card,.card.product,.product-note,.guide-note{
  background:var(--ink)!important;
  color:#fff!important;
  border:1px solid var(--ink)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
.result-card:after,.card.product:after,.product-note:after,.guide-note:after{display:none!important}
.result-card p,.card.product p,.product-note p,.guide-note p{color:rgba(255,255,255,.72)!important}
.result-card .eyebrow,.card.product .eyebrow,.product-note .eyebrow,.guide-note .eyebrow{color:rgba(255,255,255,.66)!important}
.product-link{border-radius:2px!important;box-shadow:none!important}
.product-link img{border-radius:0!important}
.benefit,.guide-stats span,.result-meta span{border-radius:2px!important}

/* Recipe guide */
.search input{
  background:var(--white);
  border-color:var(--line);
  border-radius:2px;
  box-shadow:none;
}
.search-clear,.view-toggle,.view-toggle button,.chip,.heart,.chevron{
  border-radius:2px!important;
  box-shadow:none!important;
}
.chip{background:transparent}
.recipe-summary{background:var(--white)}
.protein{
  background:var(--sage);
  color:var(--ink);
  border-radius:2px;
}
.recipe-media{border-radius:0;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.recipe-media-link{border-radius:2px}
.ingredients li:before{background:var(--ink)}
.steps li:before{border-radius:50%;background:var(--sage);color:var(--ink)}

/* Tracker */
.progress-ring{background:conic-gradient(var(--purple) calc(var(--progress)*1%),var(--line) 0)}
.progress-ring:before{background:var(--white)}
.progress-ring strong{color:var(--ink)}
.progress-copy span{color:var(--muted)!important}
.stat,.meal-entry,.habit,.week-day,.settings-panel,.notes-area textarea,.gram-input{
  border-radius:2px!important;
  box-shadow:none!important;
}
.protein-meter{border-radius:2px!important}
.protein-fill{background:var(--purple)!important}

/* Mobile navigation and footer */
.bottom-nav{
  left:0;
  right:0;
  bottom:0;
  height:72px;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:rgba(21,21,21,.97);
  box-shadow:none;
}
.bottom-nav button,.bottom-nav a{border-radius:2px}
.footer p{
  font-family:"Libre Franklin",system-ui,sans-serif;
  font-style:normal;
  color:var(--ink);
}
.disclaimer{
  background:var(--sand);
  border-color:var(--line);
  border-radius:2px;
  color:#59534a;
}

:focus-visible{outline:3px solid rgba(100,28,173,.28);outline-offset:3px}

@media(min-width:720px){
  .wrap>.hero{padding:52px 46px 40px}
  .hero-bottom .product{width:280px;height:280px}
  .tools{grid-template-columns:repeat(3,1fr)}
  .tool{min-height:250px;padding:26px}
  .shell{padding-top:94px}
  .hero-copy,.hero-main{padding-top:48px}
  .hero-product-image{object-position:50% 72%}
  .hero-stat{
    left:28px!important;
    top:36px!important;
    bottom:auto!important;
    display:flex!important;
    grid-template-columns:none;
    align-items:flex-start!important;
    gap:12px!important;
    max-width:190px!important;
    padding:0;
    background:transparent;
    border:0;
  }
  .hero-stat strong{font-size:58px!important;line-height:.8!important}
  .hero-stat span{font-size:9px!important;line-height:1.35!important;padding-top:4px!important}
}

@media(min-width:1080px){
  .appbar{height:72px}
  .shell{padding-top:104px}
  .wrap>.hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    grid-template-rows:auto auto auto auto;
    align-content:center;
    column-gap:72px;
    min-height:560px;
    padding:64px 70px;
  }
  .wrap>.hero>.eyebrow{grid-column:1;grid-row:1}
  .wrap>.hero>h1{grid-column:1;grid-row:2}
  .wrap>.hero>p{grid-column:1;grid-row:3}
  .wrap>.hero>.hero-bottom{display:contents}
  .wrap>.hero .hero-note{
    grid-column:1;
    grid-row:4;
    align-self:start;
    margin-top:28px;
  }
  .hero-bottom .product{width:320px;height:320px}
  .wrap>.hero .hero-bottom .product{
    grid-column:2;
    grid-row:1/5;
    align-self:center;
    justify-self:end;
  }
}