/* ===========================================================================
   FertilityScience — static site styles
   Recreated from the Claude Design "DC" prototype (FertilityScience.dc.html)
   =========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}

:root{
  --cream:#f7efe6;
  --ink:#2a1d24;
  --plum:#2a1720;
  --terracotta:#c25a37;
  --terra-light:#f08a5f;
  --green:#1f8a5b;
  --muted:#6f6168;
}

/* ---- keyframes ---- */
@keyframes pulsedot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.45}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes storyscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes popcheck{0%{opacity:0;transform:scale(.3)}12%{opacity:1;transform:scale(1.15)}22%{transform:scale(1)}80%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.3)}}
@keyframes rowslide{0%{opacity:0;transform:translateY(10px)}14%{opacity:1;transform:translateY(0)}86%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(10px)}}
@keyframes gdraw{0%{stroke-dashoffset:340}18%{stroke-dashoffset:0}86%{stroke-dashoffset:0}100%{stroke-dashoffset:340}}
@keyframes gfade{0%{opacity:0}9%{opacity:1}86%{opacity:1}97%,100%{opacity:0}}
@keyframes floatTiltL{0%,100%{transform:rotate(-3deg) translateY(-12px)}50%{transform:rotate(-1.4deg) translateY(8px)}}
@keyframes floatTiltR{0%,100%{transform:rotate(3deg) translateY(12px)}50%{transform:rotate(1.4deg) translateY(-8px)}}
@keyframes floatPhone{0%,100%{transform:translateY(-6px)}50%{transform:translateY(10px)}}

/* ---- base ---- */
.page{
  font-family:'Hanken Grotesk',sans-serif;
  color:var(--ink);
  background:var(--cream);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* ---- reveal-on-scroll ---- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---- nav ---- */
.nav{
  position:fixed;top:24px;left:0;right:0;z-index:60;
  width:calc(100% - 40px);max-width:1680px;margin:0 auto;
  border-radius:22px;border:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 16px 36px;
  background:rgba(34,18,26,.34);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 12px 38px rgba(20,8,14,.28);
  transition:background .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.nav.is-solid{
  background:rgba(247,239,230,.82);
  border:1px solid rgba(42,29,36,.10);
  box-shadow:0 10px 34px rgba(42,29,36,.12);
}
.nav .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;font-weight:800;font-size:20px;letter-spacing:-.02em;transition:color .3s}
.nav.is-solid .brand{color:var(--ink)}
.nav .links{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.nav .navlink{text-decoration:none;font-size:15px;font-weight:500;color:rgba(255,255,255,.88);transition:color .3s}
.nav.is-solid .navlink{color:#52606c}
.nav .navlink:hover{color:var(--terra-light)}
.nav .cta{
  text-decoration:none;white-space:nowrap;background:var(--terracotta);color:#fff;
  font-weight:600;font-size:15px;padding:11px 22px;border-radius:12px;
  box-shadow:0 8px 22px rgba(194,90,55,.35);
  transition:transform .2s,box-shadow .2s;
}
.nav .cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(194,90,55,.45)}

/* ---- hamburger (hidden on desktop) ---- */
.navtoggle{display:none;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.navtoggle span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .25s ease,opacity .2s ease,background .3s ease}
.nav.is-solid .navtoggle span{background:var(--ink)}
.nav.menu-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.menu-open .navtoggle span:nth-child(2){opacity:0}
.nav.menu-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- buttons ---- */
.btn-primary{transition:transform .2s,box-shadow .2s}
.btn-hero:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(194,90,55,.6)}
.btn-price:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(194,90,55,.5)}
.btn-final:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.32)}

/* ---- footer / generic link hovers ---- */
.footlink{transition:color .2s}
.footlink:hover{color:var(--terra-light)}
.store-badge{transition:transform .2s}
.store-badge:hover{transform:translateY(-2px)}

/* ---- tooltip ---- */
.tip{position:relative;display:inline-flex;align-items:center;cursor:help;outline:none}
.tip .tipbox{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);width:210px;max-width:min(210px,72vw);background:var(--plum);color:#f3e9e2;font-size:12px;font-weight:500;line-height:1.45;padding:9px 12px;border-radius:10px;box-shadow:0 12px 30px rgba(42,23,32,.3);opacity:0;visibility:hidden;transition:opacity .16s ease;pointer-events:none;z-index:6;text-align:left}
.tip:hover .tipbox,.tip:focus .tipbox,.tip:focus-within .tipbox{opacity:1;visibility:visible}

/* ---- stories marquee ---- */
.stories-track{display:flex;gap:clamp(16px,2vw,22px);width:max-content;padding:4px;animation:storyscroll 56s linear infinite}
.stories-mask:hover .stories-track{animation-play-state:paused}
.story-thumb{position:relative;aspect-ratio:9 / 16;border-radius:20px;overflow:hidden;box-shadow:0 8px 22px rgba(42,29,36,.1);background:#1c1118;cursor:pointer;border:0;padding:0;width:100%;display:block}
.story-watch{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;color:var(--terracotta);font-weight:600;font-size:14.5px;text-decoration:none}

/* ---- modals ---- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-terms{background:rgba(20,8,14,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-vid{z-index:90;background:rgba(20,8,14,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---- responsive ---- */
@media (max-width:768px){
  .nav{padding:11px 11px 11px 18px !important;gap:10px}
  .nav .brand{font-size:18px;gap:8px}
  .nav .brand svg{width:28px;height:auto}
  .navtoggle{display:flex}
  /* turn the link row into a tap-to-open dropdown panel */
  .nav .links{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:10px;border-radius:18px;
    background:rgba(247,239,230,.98);
    border:1px solid rgba(42,29,36,.10);
    box-shadow:0 18px 44px rgba(20,8,14,.22);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  }
  .nav.menu-open .links{opacity:1;visibility:visible;transform:none}
  .nav .navlink{display:block;color:var(--ink);font-size:16px;font-weight:600;padding:13px 14px;border-radius:12px}
  .nav .navlink:hover,.nav .navlink:focus{background:rgba(194,90,55,.10);color:var(--terracotta)}
  .nav .links .cta{display:block;text-align:center;margin-top:6px;padding:14px;font-size:16px}
  #howGrid{grid-template-columns:1fr !important}
  .m-bento{grid-template-columns:1fr !important}
  .m-bento>*{grid-column:auto !important}
  .m-pricegrid{grid-template-columns:1fr !important}
  /* larger tap targets on touch */
  .story-watch{padding:12px 2px}
  .footlink{display:inline-flex;align-items:center;min-height:44px}
  /* keep hero content clear of the fixed nav when it's taller than the viewport */
  #top{align-items:flex-start !important}
  /* extra side padding so text keeps a margin when the hero boxes in on scroll */
  .hero-inner{padding-top:104px !important;padding-left:32px !important;padding-right:32px !important}
  .hero-inner h1{font-size:clamp(40px,10.5vw,58px) !important}
  /* trim oversized visuals so content isn't dominated by illustrations on mobile */
  #how, #app, #who, #pricing, #stories, #start{
    padding-top:clamp(52px,8vh,84px) !important;
    padding-bottom:clamp(52px,8vh,84px) !important;
  }
  /* how-it-works step mockups: shrink fixed height + wasted centred space */
  #how [style*="min-height:320px"]{min-height:0 !important;justify-content:flex-start !important}
  /* app phone screenshot: cap so it doesn't fill the screen */
  #app [data-parallax="phone"]{width:min(240px,72vw) !important}
}