/* ─── Ayla design tokens ───────────────────────────────────────── */
:root{
  --ground: #F1ECDD;     /* warm cream background */
  --ivory:  #FAF6EC;     /* card / panel surface */
  --lavender: #C9C2DC;   /* accent 1 */
  --rose:   #E8DCC9;     /* accent 2, sandy rose */
  --ink:    #221F1A;     /* deep warm black */
  --ink-2:  rgba(34,31,26,.62);
  --ink-3:  rgba(34,31,26,.42);
  --hair:   rgba(34,31,26,.14);
  --hair-2: rgba(34,31,26,.08);

  --teal:   #3D4C46;
  --teal-2: #2A3A35;
  --teal-3: rgba(61, 76, 70, 0.12);

  /* page-spanning gradient stops — green at the top, lavender at the bottom */
  --bg-top:    #ECE7D5;
  --bg-mid:    #ECE7D5;
  --bg-bottom: #ECE7D5;

  --serif: "Playfair Display", "Georgia", serif;
  --sans:  "Lato", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --pad: clamp(24px, 5vw, 80px);
  --page-margin: clamp(20px, 5vw, 80px);
  --maxw: 1280px;
  --nav-logo-inset: 20px;
}

@media (max-width: 768px){
  :root{
    --pad: 28px;
    --page-margin: 28px;
    --nav-logo-inset: 28px;
  }
}

@media (max-width: 480px){
  :root{
    --pad: 22px;
    --page-margin: 22px;
    --nav-logo-inset: 22px;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; background: var(--bg-top)}
html.is-home{scroll-behavior:smooth}
body{
  background:
    linear-gradient(180deg,
      var(--bg-top) 0%,
      var(--bg-mid) 48%,
      var(--bg-bottom) 100%);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 1.2s ease;
  overflow-x: hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.text-link{
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--ink) 32%, transparent);
  transition: text-decoration-color .2s ease;
}
.text-link:hover{
  text-decoration-color: var(--ink);
}
.founder-bio{
  scroll-margin-top: 96px;
  max-width: 420px;
  margin: 0 auto;
  cursor: pointer;
}
.founder-bio-thumb {
  width: 280px;
  height: 294px;
  max-width: 100%;
  flex-shrink: 0;
  border-radius: 24px;
  margin: 0 auto 32px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.founder-bio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.founder-bio:hover .founder-bio-thumb {
  transform: translateY(-3px);
}
.founder-bio:hover .founder-bio-thumb img {
  transform: scale(1.03);
}
button{font-family:inherit;cursor:pointer}

/* ─── Typography utilities ─────────────────────────────────────── */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em}
.italic{font-style:italic}
.eyebrow{
  font-family:var(--sans);
  font-size:11px; font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.22em;
  color:var(--ink-2);
}
.mono{font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace}

/* ─── Page chrome ──────────────────────────────────────────────── */
.shell{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* hairline rule */
.rule{height:1px;background:var(--hair);width:100%}

/* page transition — horizontal inset for all page content */
.page{
  animation: pageIn .55s cubic-bezier(.22,.61,.36,1) both;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: max(var(--page-margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--page-margin), env(safe-area-inset-right, 0px));
}

/* Hero video stays edge-to-edge; text keeps shell gutters inside */
.page > .hero{
  margin-left: calc(-1 * max(var(--page-margin), env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(var(--page-margin), env(safe-area-inset-right, 0px)));
}

@keyframes pageIn{
  0%{opacity:0; transform: translateY(8px)}
  100%{opacity:1; transform: translateY(0)}
}

/* fade-up on scroll */
.reveal{opacity:0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1; transform: translateY(0)}
[data-motion="quiet"] .reveal{transform:translateY(8px); transition-duration:.6s}
[data-motion="playful"] .reveal{transform:translateY(26px); transition-duration:1.1s}

/* decorative cursor — desktop only */
.cursor-ring{display:block}
@media (max-width: 768px), (hover: none), (pointer: coarse){
  .cursor-ring{display:none !important}
}

/* ─── Nav ──────────────────────────────────────────────────────── */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 50;
}
.nav-video-wrap{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}
.nav-bg-video{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.nav.nav-scrolled .nav-bg-video {
  opacity: 1;
}
.nav-glass{
  position: absolute; inset: 0; z-index: 0;
  background: rgba(241,236,221,.58);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 8px 32px rgba(34,31,26,.04);
  overflow: hidden;
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .nav-glass{background: rgba(241,236,221,.94)}
}
.nav + .page{padding-top: 84px}
.nav-inner{
  position: relative; z-index: 1;
  display:flex; align-items:center; justify-content:space-between;
  width: 100%;
  height: 84px;
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
}
.nav-logo{margin: 0}
.nav-links{display:flex; gap: clamp(18px, 3vw, 36px); align-items:center}
.nav-link{
  font-size: 13.5px;
  color: var(--ink-2);
  position:relative;
  padding: 6px 2px;
  transition: color .25s ease;
}
.nav-link:hover{color:var(--ink)}
.nav-link.active{color:var(--ink)}
.nav-link.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background: var(--ink);
  animation: underline .4s ease both;
}
@keyframes underline{from{transform:scaleX(0); transform-origin:left}to{transform:scaleX(1)}}

.nav-cta{
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  border: 1px solid var(--ink);
  white-space: nowrap;
  transition: transform .25s ease, background .25s ease;
}
.nav-cta:hover{background: #000; transform: translateY(-1px)}

/* over hero video — light nav treatment */
.nav-over-hero .nav-glass{
  background: rgba(12, 18, 15, 0.18);
  border-bottom-color: rgba(255,255,255,0.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 32px rgba(0,0,0,0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .nav-over-hero .nav-glass{background: rgba(12, 18, 15, 0.72)}
}
/* scrolled past hero — stronger tint so cream page does not wash out the bar */
.nav-over-hero.nav-scrolled .nav-glass{
  background: rgba(12, 18, 15, 0.52);
  border-bottom-color: rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 8px 32px rgba(0,0,0,0.14);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .nav-over-hero.nav-scrolled .nav-glass{background: rgba(12, 18, 15, 0.88)}
}
.nav-over-hero .nav-link{
  color: rgba(255,255,255,0.72);
}
.nav-over-hero .nav-link:hover,
.nav-over-hero .nav-link.active{
  color: #fff;
}
.nav-over-hero .nav-link.active::after{
  background: #fff;
}
.nav-over-hero .nav-cta{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}
.nav-over-hero .nav-cta:hover{
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.nav-over-hero .nav-toggle{
  color: #fff;
}
.nav-over-hero .nav-toggle:focus-visible{
  outline-color: #fff;
}
.nav-glass,
.nav-link,
.nav-cta,
.nav-toggle,
.wordmark{
  transition:
    background .35s ease,
    border-color .35s ease,
    color .35s ease,
    box-shadow .35s ease,
    opacity .35s ease;
}

/* mobile menu toggle — hidden on desktop */
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin: 0 -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.nav-toggle-bar{
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .28s ease, opacity .2s ease, width .28s ease;
  transform-origin: center;
}
.nav.is-open .nav-toggle-bar:nth-child(1){
  transform: translateY(7.5px) rotate(45deg);
}
.nav.is-open .nav-toggle-bar:nth-child(2){
  opacity: 0;
  width: 0;
}
.nav.is-open .nav-toggle-bar:nth-child(3){
  transform: translateY(-7.5px) rotate(-45deg);
}

.nav-mobile{
  position: fixed;
  top: 84px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 49;
  padding: 0 max(var(--pad), env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(var(--pad), env(safe-area-inset-left, 0px));
  background: rgba(241,236,221,.72);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile-panel{
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 28px 0 16px;
  min-height: min(100%, calc(100dvh - 84px));
}
.nav-mobile-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile-link{
  display: block;
  font-family: var(--serif);
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  padding: 14px 0;
  transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-mobile-link:hover,
.nav-mobile-link.active{
  color: var(--ink);
}
.nav-mobile-link.active{
  font-style: italic;
}
.nav-mobile-cta{
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
body.nav-menu-open{
  overflow: hidden;
  touch-action: none;
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:500;
  padding: 14px 22px;
  border-radius: 999px;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--ivory);
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn .arr{transition: transform .3s ease}
.btn:hover .arr{transform: translateX(3px)}
.btn-ghost{
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover{
  background: var(--ink);
  color: var(--ivory);
  border: 1px solid var(--ink);
}

/* ─── Cards / surfaces ─────────────────────────────────────────── */
.card{
  background: var(--ivory);
  border-radius: 20px;
  padding: 28px;
  border: 1px solid var(--hair-2);
}
.lav-bg{ background: linear-gradient(180deg, var(--lavender), color-mix(in oklab, var(--lavender) 60%, var(--ivory))); }
.rose-bg{ background: linear-gradient(180deg, var(--rose), color-mix(in oklab, var(--rose) 60%, var(--ivory))); }

/* placeholder image */
.ph{
  position:relative;
  background:
    repeating-linear-gradient( -8deg,
      color-mix(in oklab, var(--lavender) 35%, var(--ivory)) 0 12px,
      color-mix(in oklab, var(--lavender) 18%, var(--ivory)) 12px 24px );
  border-radius: 16px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ph.rose{
  background:
    repeating-linear-gradient( -8deg,
      color-mix(in oklab, var(--rose) 60%, var(--ivory)) 0 12px,
      color-mix(in oklab, var(--rose) 30%, var(--ivory)) 12px 24px );
}
.ph-tag{
  position:absolute; left:14px; bottom:12px;
  padding: 4px 10px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

/* ─── Footer ───────────────────────────────────────────────────── */
.footer{
  margin-top: 120px;
  padding: 80px max(var(--pad), env(safe-area-inset-right, 0px)) 40px max(var(--pad), env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--hair-2);
}
.footer .shell{
  padding-left: 0;
  padding-right: 0;
}
.footer-grid{
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: start;
  column-gap: clamp(16px, 3vw, 32px);
  width: 100%;
}
.footer-links-group{
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(20px, 2.5vw, 36px);
}
.footer-col{
  min-width: 0;
  flex: 0 0 auto;
}
.footer-social{
  grid-column: 3;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.footer-grid h6{
  font: 500 11px/1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: .2em;
  margin: 0 0 14px;
  padding: 0;
  color: var(--ink-2);
  line-height: 1.2;
}
.footer-social-icons{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-social-link{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--hair) 80%, #ece7d5);
  background: #ece7d5;
  color: color-mix(in oklab, var(--ink) 88%, var(--ink-2));
  box-shadow: 0 1px 2px color-mix(in oklab, var(--ink) 6%, transparent);
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.footer-social-link:hover{
  background: #ece7d5;
  border-color: color-mix(in oklab, var(--hair) 80%, #ece7d5);
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px color-mix(in oklab, var(--ink) 14%, transparent);
}
.footer-social-link i{
  display: block;
  font-size: 18px;
  line-height: 1;
}
.footer-newsletter{
  grid-column: 5;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: 520px;
}
.footer-newsletter p{
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
.footer-newsletter .form-row{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}
.footer-newsletter .input{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  height: 48px;
  box-sizing: border-box;
}
.newsletter-status{
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
}
.newsletter-embed{
  width: 100%;
  min-height: 48px;
}
.footer-newsletter .newsletter-status{
  margin-top: 8px;
}
.footer-newsletter .btn{
  flex-shrink: 0;
  align-self: flex-start;
  width: fit-content;
  height: 48px;
  box-sizing: border-box;
  white-space: nowrap;
}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-grid li{font-size:14px}
.footer-grid a:not(.footer-social-link):hover{color: color-mix(in oklab, var(--ink) 70%, var(--lavender))}
.footer-fine{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap: 12px 24px; margin-top:48px;
  font-size:12px; color: var(--ink-3);
}
.footer-fine-links{
  display:flex; align-items:center; flex-wrap:wrap; gap: 8px 10px;
}
.footer-fine-links a{
  color: var(--ink-3);
  text-decoration: none;
}
.footer-fine-links a:hover{
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-fine-sep{opacity:.6}
.legal-page{padding-top: clamp(48px, 6vw, 80px)}
.legal-contact p{margin: 0 0 6px}
.legal-contact p:last-child{margin-bottom: 0}
.legal-updated{
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hair);
}
.legal-list{
  margin: 0 0 22px;
  padding-left: 1.25em;
  font-size: 17px;
  line-height: 1.65;
  color: color-mix(in oklab, var(--ink) 86%, white);
}
.legal-list li{margin-bottom: 8px}
.legal-list li:last-child{margin-bottom: 0}

/* ─── Hero (Home) ─────────────────────────────────────────────── */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: 100lvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: -84px; /* Pull up under the nav */
  padding-top: 84px; /* Push content back down */
  box-sizing: border-box;
}
.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg-video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, rgba(15,22,18,0.58) 0%, rgba(15,22,18,0.32) 52%, rgba(15,22,18,0.08) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero-overlay{
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(60px, 8vw, 110px);
  padding-left: max(var(--page-margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--page-margin), env(safe-area-inset-right, 0px));
}
.hero-content{
  max-width: 640px;
}
.hero-eyebrow{display:flex; align-items:center; gap:14px; margin-bottom: 28px}
.hero-eyebrow .pulse{
  width:8px;height:8px;border-radius:50%;
  background: var(--lavender);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--lavender) 60%, transparent);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--lavender) 60%, transparent)}
  70%{box-shadow:0 0 0 14px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.hero h1{
  font-family: var(--serif);
  font-size: clamp(44px, 5.6vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  font-weight: 300;
  max-width: 12ch;
  color: var(--ivory);
  text-shadow: 0 4px 24px rgba(0,0,0,0.12);
  animation: heroUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.hero h1 em {
  font-style: italic; 
  color: rgba(228, 210, 178, 0.95);
  display: inline-block;
  animation: heroUpEm 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.hero-lede{ 
  max-width: 460px; 
  font-weight: 400;
  font-size: 19px; 
  line-height: 1.6; 
  color: rgba(255, 255, 255, 0.6); 
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
  animation: heroUpLede 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both;
}
.hero-lede-short{ display: none }
.hero-actions{
  display:flex; gap: 12px; margin-top: 32px; flex-wrap:wrap;
  animation: heroUpBtn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}

@keyframes heroUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroUpEm {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroUpLede {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroUpBtn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-actions .btn {
  background: rgba(18,24,20,0.82);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-actions .btn:hover {
  background: rgba(18,24,20,0.95);
  transform: translateY(-1px);
}
.hero-actions .btn-ghost {
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.26);
  border-radius: 100px;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-actions .btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

/* phone mock */
.phone{
  width: 320px; height: 660px;
  background: var(--ivory);
  border-radius: 44px;
  border: 1px solid var(--hair);
  padding: 18px 16px 14px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 30px 60px -30px rgba(34,31,26,.22),
    0 8px 20px -8px rgba(34,31,26,.10);
  font-family: var(--sans);
}
.phone-notch{
  position:absolute; top:14px; left:50%; transform: translateX(-50%);
  width: 110px; height: 28px; background: var(--ink); border-radius: 999px;
}
.phone-status{display:flex; justify-content:space-between; font-size:13px; font-weight:500; padding: 4px 10px}
.phone-screen{
  margin-top: 14px;
  height: calc(100% - 60px);
  border-radius: 28px;
  background: linear-gradient(180deg, #F4EFE2 0%, color-mix(in oklab, var(--lavender) 60%, #F4EFE2) 100%);
  padding: 18px 18px 0;
  overflow:hidden;
  position:relative;
}
.phone-greet{font-family: var(--serif); font-size: 26px; line-height:1.12; margin: 6px 0 4px; letter-spacing:-0.01em}
.phone-greet .it{font-style:italic}
.phone-sub{font-size: 12.5px; color: var(--ink-2)}
.phone-date{font-size:10.5px; color:var(--ink-3); margin-top:2px}
.phone-cyclewrap{display:flex; justify-content:center; margin: 18px 0 14px}
.phone-cycle{
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--hair);
  position:relative;
}
.phone-cycle .num{font-family:var(--serif); font-size:34px; line-height:1}
.phone-cycle .lbl{font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-top:4px}
.phone-cycle .pill{
  margin-top:6px;
  padding: 3px 9px; font-size: 10px;
  background: color-mix(in oklab, var(--lavender) 55%, white);
  border-radius: 999px;
}
.phone-card{
  background: var(--ivory); border-radius: 16px; padding: 14px 14px 12px;
  border:1px solid var(--hair-2);
}
.phone-card .tag{display:flex; justify-content:space-between; align-items:center}
.phone-card .tag span{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.phone-card h4{font-family:var(--serif); font-size:16px; margin:8px 0 6px; line-height:1.2; font-weight:600}
.phone-card p{font-size:11.5px; color:var(--ink-2); margin:0; line-height:1.5}
.phone-card .more{display:inline-block; margin-top:10px; font-size:10.5px; padding:5px 10px; border:1px solid var(--hair); border-radius:999px}
.phone-dock{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: 22px; height: 46px; width: 84%;
  background: #15120F; border-radius: 999px;
  display:flex; align-items:center; justify-content:space-around;
  color: #C9C2DC;
}
.phone-dock .ic{width:22px;height:22px;display:grid;place-items:center;color:#F1ECDD;opacity:.85}
.phone-dock .ic.active{color:var(--lavender);opacity:1}

/* marquee strip */
.marquee{
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding: 22px 0;
  overflow:hidden; white-space:nowrap;
  font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em;
  color: var(--ink-2);
}
.marquee-track{display:inline-flex; gap:0; align-items:center; animation: marq 38s linear infinite}
@keyframes marq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marquee .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lavender);vertical-align:middle;margin:0 24px}

/* sections */
.section{padding: clamp(70px, 10vw, 130px) 0}
.section h2{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}
.section h2 .it{font-style:italic; color: color-mix(in oklab, var(--ink) 78%, var(--lavender))}
.section-head{
  display:grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: end; margin-bottom: 56px;
}
.section-head p{max-width: 460px; color:var(--ink-2); font-size:17px; margin:0}

/* Features section reveal (scroll-in, no scroll lock) */
.features-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.features-reveal.in{
  opacity: 1;
  transform: translateY(0);
}
.features-section .section-head .features-reveal:nth-child(2){
  transition-delay: .12s;
}
[data-motion="quiet"] .features-reveal{
  transform: translateY(8px);
  transition-duration: .6s;
}
[data-motion="playful"] .features-reveal{
  transform: translateY(26px);
  transition-duration: 1.1s;
}
@media (prefers-reduced-motion: reduce){
  .features-reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
  // Removed legacy snap media queries
}

/* feature trio */
.features{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 30px;
}
.feature{
  position: relative;
  background: var(--ivory);
  border-radius: 22px;
  padding:30px;
  border: 1px solid var(--hair-2);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform .4s ease;
}
.feature:hover{ transform: translateY(-3px) }
.feature h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.feature > p{
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
  flex: 1;
}
.feature .vis{
  margin-top: auto;
  width: 100%;
  height: 400px;
  min-height: 360px;
  flex-shrink: 0;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.feature .vis.insight-vis,
.feature .vis.meal-vis,
.feature .vis.movement-vis{
  background: transparent;
  border: none;
}
.feature .vis .insight-card,
.feature .vis .meal-log-card,
.feature .vis .movement-card,
.feature .vis .ph{
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  border-radius: 14px;
  box-sizing: border-box;
}
.feature .vis .ph{
  margin: 0;
  aspect-ratio: unset;
  max-height: none;
}
.feature .vis .insight-card,
.feature .vis .meal-log-card,
.feature .vis .movement-card{
  overflow: hidden;
  padding: 14px 16px;
  justify-content: flex-start;
}
.feature .vis .insight-card-head{ margin-bottom: 10px }
.feature .vis .insight-card-phase{ font-size: 12px }
.feature .vis .insight-card-chip{ font-size: 10px; padding: 3px 9px }
.feature .vis .insight-card-body{
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 8px;
  flex: 0 0 auto;
}
.feature .vis .insight-focus{
  background: transparent;
  border: none;
  border-top: 1px solid var(--hair-2);
  border-radius: 0;
  padding: 10px 0 0;
  margin-bottom: 8px;
  flex: 0 0 auto;
}
.feature .vis .insight-focus-label{
  font-size: 10px;
  margin-bottom: 6px;
}
.feature .vis .insight-focus-list{ gap: 8px }
.feature .vis .insight-focus-item{ font-size: 13px; gap: 10px }
.feature .vis .insight-focus-icon{ width: 20px; height: 20px }
.feature .vis .insight-card-foot{
  font-size: 11px;
  margin-top: 14px;
  flex: 0 0 auto;
}
.feature .vis .meal-log-section{ margin-bottom: 12px }
.feature .vis .meal-log-section:last-child{ margin-bottom: 0 }
.feature .vis .meal-log-header{ margin-bottom: 8px }
.feature .vis .meal-log-time,
.feature .vis .meal-log-cals{ font-size: 11.5px }
.feature .vis .meal-log-item{ margin-bottom: 0 }
.feature .vis .meal-log-name{ font-size: 13.5px }
.feature .vis .meal-log-desc{ font-size: 12px; line-height: 1.45 }
.feature .vis .meal-log-tags{ margin-top: 6px }
.feature .vis .meal-tag{
  font-size: 9.5px;
  padding: 3px 9px;
}
.feature .vis .ph-tag{
  font-size: 10px;
}
  @media (max-width: 768px) {
  .features-section{
    padding-bottom: 8vh;
  }
  .features{
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 56px;
  }
  .feature{
    min-height: 80vh;
    min-height: 80dvh;
    padding: 22px 20px 24px;
    box-sizing: border-box;
  }
  .feature > p{
    flex: 0 0 auto;
    margin-bottom: 16px;
  }
  .feature .vis{
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }
  .feature .vis .insight-card,
  .feature .vis .meal-log-card,
  .feature .vis .movement-card{
    overflow: hidden;
  }
}
.insight-card,
.meal-log-card,
.movement-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.meal-log-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(to top, var(--ivory) 35%, transparent);
  pointer-events: none;
  z-index: 2;
}

.meal-log-tags{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.meal-tag{
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--rose) 25%, transparent);
  color: color-mix(in oklab, var(--ink) 80%, var(--rose));
  border: 1px solid color-mix(in oklab, var(--rose) 60%, transparent);
}
.insight-card{
  background: var(--ivory);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(34, 31, 26, 0.04);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.insight-card::after{
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lavender), transparent 70%);
  filter: blur(20px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.insight-card > * {
  position: relative;
  z-index: 1;
}
.insight-card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.insight-card-sparkle{
  color: var(--ink);
  opacity: 0.8;
  flex-shrink: 0;
}
.insight-card-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.insight-card-phase{
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.insight-card-chip{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink-2);
  border: 1px solid var(--hair);
}
.insight-card-body{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 20px;
}
.insight-focus{
  background: transparent;
  border: none;
  border-top: 1px solid var(--hair-2);
  border-radius: 0;
  padding: 16px 0 0;
  margin-bottom: 20px;
  margin-top: 20px;
}
.insight-focus-label{
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
  margin-top: 20px;
}
.insight-focus-list{
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.insight-focus-item{
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.insight-focus-item input{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.insight-focus-item.is-done{
  opacity: 0.4;
}
.insight-focus-item.is-done .insight-focus-text{
  text-decoration: line-through;
}
.insight-focus-icon{
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--ink);
  flex-shrink: 0;
}
.insight-focus-text{ line-height: 1.3; font-weight: 600 }
.insight-card-foot{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-3);
  padding-left: 4px;
}
.insight-trust-icon{
  display: grid;
  place-items: center;
  color: var(--ink-3);
}

/* meal log card (feature ii) */
.meal-log-card,
.movement-card{
  background: var(--ivory);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(34, 31, 26, 0.04);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.meal-log-card::after,
.movement-card::after{
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rose), transparent 70%);
  filter: blur(20px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.movement-card::after{
  background: radial-gradient(circle, var(--lavender), transparent 70%);
}
.meal-log-card > *,
.movement-card > * {
  position: relative;
  z-index: 1;
}
.meal-log-section{
  margin-bottom: 24px;
}
.meal-log-section:last-child{
  margin-bottom: 0;
}
.meal-log-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.meal-log-time{
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.meal-log-cals{
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-2);
}
.meal-log-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.meal-log-item:hover{
  opacity: 0.8;
}
.meal-log-item:last-child{
  margin-bottom: 0;
}
.meal-log-icon{
  flex-shrink: 0;
  margin-top: 3px;
}
.meal-log-item.no-icon{
  gap: 0;
}
.meal-log-content{
  flex: 1;
}
.meal-log-top{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.meal-log-name{
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}
.meal-log-desc{
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
}
.meal-log-divider{
  height: 1px;
  background: color-mix(in oklab, var(--hair) 80%, transparent);
  margin: 18px 0;
}

/* phases bar */
.phases{
  display:grid; grid-template-columns: repeat(4, 1fr);
  border:1px solid var(--hair); border-radius: 18px;
  overflow:hidden; background: var(--ivory);
}
.phase{
  padding: 22px 18px 26px 22px;
  border-right: 1px solid var(--hair-2);
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position:relative;
}
.phase:last-child{border-right:0}
.phase-body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phase-fruit{
  width: clamp(76px, 9vw, 104px);
  height: clamp(76px, 9vw, 104px);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--hair-2);
  background: #F5F0E6;
  box-shadow: 0 4px 14px rgba(34, 31, 26, 0.06);
}
.phase-fruit img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.phase:first-child .phase-fruit img{
  object-position: 50% 38%;
}
.phase .lbl{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2)}
.phase h4{font-family:var(--serif); font-weight:500; margin:0; font-size:22px; letter-spacing:-0.01em}
.phase p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.5}

/* big editorial split */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split .copy h2{margin-bottom: 24px}
.split .copy p{color:var(--ink-2); font-size:17px; max-width: 480px}
.split .copy .stats{display:flex; gap: 32px; margin-top: 36px}
.split .copy .stat .n{font-family: var(--serif); font-size: 44px; letter-spacing:-0.02em; line-height:1}
.split .copy .stat .l{font-size:12.5px; color:var(--ink-2); margin-top:6px}

/* journal preview list */
.journal{display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px}
.j-card{
  background: var(--ivory);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid var(--hair-2);
  transition: transform .4s ease;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: none;
}
.j-card:hover{transform: translateY(-2px)}
.j-card:focus{outline: none}
.j-card:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--lavender) 70%, var(--ink));
  outline-offset: 3px;
}
.j-card:active{background: var(--ivory)}
.j-thumb{height: 170px; border-radius: 12px; margin-bottom: 18px}
.j-meta{display:flex; gap:14px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-bottom:10px}
.j-card h3{font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.2; letter-spacing:-0.01em; margin:0 0 8px}
.j-card p{color:var(--ink-2); font-size:14px; margin:0}

/* signup banner */
.signup{
  background: var(--ivory);
  border:1px solid var(--hair);
  border-radius: 28px;
  padding: clamp(40px, 6vw, 80px);
  display:grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items:end;
  position:relative; overflow:hidden;
}
.signup::after{
  content:""; position:absolute; right:-80px; bottom:-80px;
  width: 280px; height: 280px; border-radius:50%;
  background: radial-gradient(circle, var(--lavender), transparent 70%);
  opacity:.55;
  pointer-events: none;
  z-index: 0;
}
.signup > * {
  position: relative;
  z-index: 1;
}
.signup h2{margin:0 0 14px}
.signup p{color:var(--ink-2); max-width: 460px; margin:0}
.signup-action{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}
.signup-action .btn{
  width: 100%;
  min-width: 220px;
  justify-content: center;
  box-sizing: border-box;
}
.signup-fine{
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
  max-width: 420px;
  line-height: 1.55;
}

/* form */
.form-row{display:flex; gap:8px; flex-wrap:wrap}
.input{
  flex:1; min-width: 180px;
  padding: 14px 18px; border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,.6);
  font: 14px var(--sans);
  color: var(--ink);
  transition: border-color .25s ease, background .25s ease;
}
.input:focus{outline:none; border-color: var(--ink); background:#fff}

/* ─── About page ──────────────────────────────────────────────── */
.about-hero{
  padding: clamp(80px, 10vw, 140px) 0 60px;
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: end;
}
.about-hero h1{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(50px, 7vw, 110px);
  line-height: 0.96; letter-spacing: -0.025em;
  margin: 0;
}
.about-hero-editorial{
  padding: clamp(80px, 10vw, 140px) 0 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.about-hero-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-hero-title{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(42px, 5.5vw, 76px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 18px 0 32px;
}
.about-hero-title .it{font-style:italic}
.about-hero-lede{
  font-size: 16.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
  max-width: 480px;
}
.about-hero-vis{
  height: clamp(400px, 65vh, 600px);
  width: 100%;
}

/* Team page hero — 55/45 balance, softer scale */
.team-hero{
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  min-height: 90vh;
}
.team-hero-title{
  padding-top: 14px;
}
.team-hero h1{
  font-size: clamp(38px, 4.8vw, 72px);
  line-height: 1.02;
  max-width: 11ch;
}
.team-hero .lede{
  max-width: none;
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
}

.manifesto{
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  max-width: 980px;
  margin: 80px 0;
}
.manifesto .it{font-style:italic; color: color-mix(in oklab, var(--ink) 75%, var(--lavender))}
.manifesto .small{font-size: 12px; vertical-align: top; color: var(--ink-3); margin-right:6px; letter-spacing:.16em; text-transform:uppercase; font-family: var(--sans);}

.principles{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.principle{
  padding: 36px 28px 40px;
  border-right: 1px solid var(--hair-2);
  border-bottom: 1px solid var(--hair-2);
}
.principle:nth-child(2n){border-right:0}
.principle:nth-child(n+3){border-bottom:0}
.principle .num{font-family: var(--serif); font-style:italic; font-size:14px; color: var(--ink-3); letter-spacing:.04em}
.principle h3{font-family: var(--serif); font-weight: 500; font-size: 26px; margin:14px 0 10px; letter-spacing:-0.01em}
.principle p{color:var(--ink-2); font-size: 14.5px; margin:0; line-height:1.6}

.team{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.member .av{height: 280px; border-radius: 18px; margin-bottom: 16px}
.member h4{font-family:var(--serif); font-weight:500; font-size: 20px; margin: 0 0 4px; letter-spacing:-0.01em}
.member .role{font-size: 12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}

/* ─── Blog post ───────────────────────────────────────────────── */
.article{max-width: 720px; margin: 0 auto; padding: 80px 0 40px}
.article .breadcrumb{font-size: 11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); margin-bottom: 28px}
.article h1{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02; letter-spacing:-0.022em;
  margin: 0 0 26px;
}
.article h1 .it{font-style:italic}
.article .byline{display:flex; gap:18px; align-items:center; padding: 22px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); margin-bottom: 40px}
.article .byline .av{width:42px;height:42px;border-radius:50%;background: var(--rose);}
.article .byline .meta{font-size:13px}
.article .byline .meta b{font-weight:600}
.article .byline .meta div{color: var(--ink-2); font-size:12px; margin-top:2px}
.article .byline-avatars{
  display:flex; flex-shrink:0;
}
.article .byline-avatars img{
  width:42px; height:42px; border-radius:50%; object-fit:cover;
  border:2px solid var(--ivory); background: var(--rose);
}
.article .byline-coauthors .byline-avatars img + img{margin-left:-12px}
.article .lede-p{font-family: var(--serif); font-size: 22px; line-height: 1.5; letter-spacing:-0.005em; margin: 0 0 28px; color: var(--ink); font-style:italic}
.article p{font-size: 17px; line-height: 1.7; color: color-mix(in oklab, var(--ink) 86%, white); margin: 0 0 22px}
.article p a{text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--lavender)}
.article h2{font-family:var(--serif); font-weight:500; font-size: 32px; letter-spacing:-0.015em; margin: 48px 0 16px; line-height:1.15}
.article h2 .it{font-style:italic}
.article h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 32px 0 12px;
  line-height: 1.2;
}
.article .figure img{
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}
.article-references{
  margin-top: 48px;
}
.article-references ol{
  list-style: decimal;
  padding-left: 1.4em;
  margin: 0;
}
.article-references li{
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 18px;
  color: var(--ink);
  padding-left: 6px;
}
.article-references li:last-child{margin-bottom: 0}
.article-references li::marker{color: #3E657B}
.article-references li em{font-style: italic}
.article-references a{
  display: block;
  margin-top: 6px;
  color: #7a4538;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.article-references a:hover{color: #5c342c}
.article h2 .it{font-style:italic}
.article blockquote{
  border:0; margin: 44px 0;
  padding: 0;
  font-family: var(--serif); font-style: italic;
  font-size: 28px; line-height: 1.3; letter-spacing:-0.01em;
  position: relative; padding-left: 36px;
}
.article blockquote::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; background: var(--lavender);
}
.article blockquote cite{display:block; margin-top:16px; font-style: normal; font-family: var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-2)}
.article .figure{margin: 36px 0}
.article .figure .ph{height: 380px}
.article .figure figcaption{font-size: 12px; color: var(--ink-2); margin-top: 12px; letter-spacing:.06em}
.article ul{padding-left: 22px; color: color-mix(in oklab, var(--ink) 86%, white); margin: 0 0 22px}
.article li{font-size: 17px; line-height: 1.7; margin-bottom: 10px}
.article li::marker{color: #3E657B}
.article-table-wrap{
  overflow-x: auto;
  margin: 28px 0 36px;
  -webkit-overflow-scrolling: touch;
}
.article-table{
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}
.article-table th,
.article-table td{
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hair);
  color: color-mix(in oklab, var(--ink) 86%, white);
}
.article-table th{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
.article-table tbody tr:last-child td{border-bottom: 0}
.article-glossary{
  margin: 24px 0 36px;
}
.article-glossary dt{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  margin-top: 18px;
  color: var(--ink);
}
.article-glossary dt:first-child{margin-top: 0}
.article-glossary dd{
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.product-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 28px 0 36px;
}
@media (min-width: 640px){
  .product-grid{grid-template-columns: repeat(4, 1fr)}
}
.product-pick{
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease;
}
.product-pick:hover{transform: translateY(-2px)}
.product-pick-thumb{
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--ivory);
}
.product-pick-thumb img{border-radius: 14px}
.product-pick-thumb.ph{height: auto}
.product-pick-label{
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--ink-2);
}
.product-pick:hover .product-pick-label{color: var(--ink)}
.article-tools{
  position: sticky; top: 100px;
  display:flex; flex-direction:column; gap:14px;
  align-items:center;
}
.article-tools button{
  width:40px;height:40px;border-radius:50%;
  background:var(--ivory); border:1px solid var(--hair);
  color: var(--ink-2);
  display:grid; place-items:center;
  transition: transform .25s ease, color .25s ease;
}
.article-tools button:hover{transform: scale(1.05); color: var(--ink)}
.article-tools button[title="Save"],
.article-tools button[title="Listen"]{display:none}
.article-shell{
  display:grid; grid-template-columns: 60px 1fr 60px; gap:40px;
}
.article-shell aside{padding-top: 90px}
.article-shell aside:last-child{font-size: 11px; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-3); writing-mode: vertical-rl; text-align:right}

/* progress bar at top */
.progress{position:fixed; top:76px; left:0; right:0; height:2px; z-index:40}
.progress .fill{height:100%; background: var(--lavender); width:0%; transition: width .1s linear}

.read-next{padding: 80px 0; border-top:1px solid var(--hair); margin-top: 80px}
.read-next h3{font-family:var(--serif); font-weight:500; font-size: 28px; letter-spacing:-0.01em; margin:0 0 32px}

/* ─── Waitlist ────────────────────────────────────────────────── */
.wl{
  min-height: calc(100vh - 76px);
  display:grid; grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
}
.wl-left{
  padding: clamp(60px, 8vw, 110px) clamp(40px, 5vw, 80px);
  display:flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--hair);
}
.wl-left h1{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(48px, 7vw, 108px);
  line-height: .96; letter-spacing:-0.025em;
  margin: 0 0 28px;
}
.wl-left h1 .it{font-style:italic}
.wl-left .lede{font-size: 18px; color: var(--ink-2); max-width: 460px; margin: 0 0 36px; line-height: 1.6}
.wl-perks{display:flex; flex-direction:column; gap: 18px; margin-top: 50px}
.wl-perk{display:flex; gap: 16px; align-items:flex-start}
.wl-perk .ic{width:36px;height:36px;border-radius:50%;background:var(--rose);display:grid;place-items:center;flex-shrink:0}
.wl-perk .ic .d{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.wl-perk h5{font-family:var(--serif); font-weight:500; font-size:16px; margin:0 0 2px}
.wl-perk p{font-size:13px; color:var(--ink-2); margin:0; line-height:1.5}

.wl-right{
  padding: clamp(60px, 8vw, 110px) clamp(40px, 5vw, 80px);
  background: linear-gradient(180deg, color-mix(in oklab, var(--lavender) 30%, var(--ivory)), var(--ivory));
  display:flex; flex-direction: column;
}
.wl-card{
  background: var(--ivory);
  border:1px solid var(--hair-2);
  border-radius: 24px;
  padding: 36px;
  max-width: 460px; width:100%;
  margin: 0 auto;
}
.wl-card .step{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2)}
.wl-card h3{font-family:var(--serif); font-weight:500; font-size:32px; margin: 8px 0 24px; letter-spacing:-0.015em; line-height:1.1}
.wl-card h3 .it{font-style:italic}
.wl-field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.wl-field label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2)}
.wl-field input, .wl-field select{
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--hair); background:#fff;
  font: 15px var(--sans); color: var(--ink);
  transition: border-color .2s ease;
}
.wl-field input:focus, .wl-field select:focus{outline:none; border-color: var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top: 4px}
.chip{
  padding: 9px 14px; border-radius: 999px;
  border:1px solid var(--hair); background: #fff;
  font-size: 13px; transition: all .2s ease; cursor:pointer; user-select:none;
}
.chip.on{background: var(--ink); color: var(--ivory); border-color: var(--ink)}
.wl-submit{width:100%; justify-content:center; margin-top: 10px}
.wl-thanks{
  text-align:center; padding: 30px 8px 10px;
}
.wl-thanks .check{
  width:60px;height:60px;border-radius:50%;
  background: var(--lavender);
  display:grid; place-items:center; margin: 0 auto 22px;
  color: var(--ink);
  animation: pop .55s cubic-bezier(.2,.8,.2,1.2) both;
}
@keyframes pop{from{transform:scale(.6); opacity:0}to{transform:scale(1); opacity:1}}
.wl-thanks h3{font-family:var(--serif); font-weight:500; font-size:28px; margin: 0 0 8px}
.wl-thanks p{color:var(--ink-2); font-size: 14.5px; max-width: 360px; margin: 0 auto; line-height:1.55}
.wl-err{
  font-size: 12px; color: #b85a4a; margin-top: 4px;
  letter-spacing: 0; text-transform: none;
}
.wl-optional{
  font-size: 10.5px; letter-spacing: .12em; color: var(--ink-3);
  margin-left: 6px; font-weight: 400;
}
.btn:disabled{ cursor: not-allowed; opacity: .55 }

/* progress dots */
.wl-progress{display:flex; gap:8px; margin-bottom: 22px; align-items:center; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2)}
.wl-progress .ddot{width:5px;height:5px;border-radius:50%;background:var(--hair)}
.wl-progress .ddot.on{background:var(--ink)}

/* ─── Blog index ──────────────────────────────────────────────── */
.blog-hero{
  padding: clamp(80px, 10vw, 140px) 0 40px;
  max-width: 880px;
}
.blog-hero h1{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(52px, 8vw, 120px);
  line-height: 0.96; letter-spacing: -0.025em;
  margin: 22px 0 28px;
}
.blog-hero h1 .it{font-style: italic; color: color-mix(in oklab, var(--ink) 78%, var(--lavender))}
.blog-hero .lede{font-size: 18px; color: var(--ink-2); max-width: 560px; line-height:1.6; margin: 0}
.blog-filters{
  display:flex; flex-wrap:wrap; gap: 8px;
  margin-top: 36px;
}
.chip{
  font: 500 12px/1 var(--sans);
  letter-spacing: .04em;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--hair-2);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.chip:hover{ border-color: var(--ink); color: var(--ink) }
.chip.on{ background: var(--ink); color: var(--ivory); border-color: var(--ink) }

.blog-list{
  display:flex; flex-direction: column;
  gap: clamp(56px, 7vw, 96px);
  padding: clamp(48px, 7vw, 96px) 0 40px;
}
.blog-empty{
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 56px) 0;
}
.blog-empty p{
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
}
.blog-empty p .it{font-style: italic}
.blog-empty-sub{
  font-family: var(--sans) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 0 24px !important;
}
.blog-empty .btn{margin-top: 4px}
.blog-row{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--hair);
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: none;
}
.blog-row:focus{outline: none}
.blog-row:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--lavender) 70%, var(--ink));
  outline-offset: 4px;
  border-radius: 4px;
}
.blog-row:active{background: transparent}
.blog-list .blog-row:last-child{border-bottom: 0; padding-bottom: 0}
.blog-row.flipped{ grid-template-columns: 1fr 1.05fr }
.blog-row.flipped .blog-row-thumb{ order: 2 }
.blog-row.flipped .blog-row-body{ order: 1 }

.blog-row-thumb{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.blog-row:hover .blog-row-thumb{ transform: translateY(-3px) }

.blog-row-body h2{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08; letter-spacing: -0.018em;
  margin: 18px 0 18px;
  max-width: 18ch;
  text-wrap: balance;
}
.blog-row:hover .blog-row-body h2{
  color: color-mix(in oklab, var(--ink) 72%, var(--lavender));
}
.blog-row-body p{
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}
.blog-row-meta{
  display:flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
}
.blog-row-meta > span:nth-child(even){ color: var(--ink-3) }
.blog-row-cta{
  display:inline-flex; align-items:center; gap: 10px;
  margin-top: 24px;
  font: 500 13px/1 var(--sans);
  letter-spacing: .04em;
  color: var(--ink);
}
.blog-row-cta .arr{ transition: transform .35s cubic-bezier(.2,.7,.2,1) }
.blog-row:hover .blog-row-cta .arr{ transform: translateX(6px) }

/* responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns: 1fr; gap:48px}
  .hero-grid .phone{margin: 0 auto}
  .section-head{grid-template-columns: 1fr; gap: 18px}
  .features, .journal, .team, .principles, .phases{grid-template-columns: 1fr 1fr}
  .blog-row, .blog-row.flipped{ grid-template-columns: 1fr; gap: 24px }
  .blog-row.flipped .blog-row-thumb{ order: 0 }
  .blog-row.flipped .blog-row-body{ order: 0 }
  .split, .signup, .wl, .about-hero{grid-template-columns: 1fr}
  .signup{gap: 32px; align-items: stretch}
  .team-hero h1{max-width: none}
  .team-hero .lede{max-width: 560px}
  .footer-grid{
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
  .footer-links-group,
  .footer-social,
  .footer-newsletter{grid-column: 1}
  .footer-social{justify-self: center}
  .footer-newsletter{justify-self: stretch; max-width: none}
  .article-shell{grid-template-columns: 1fr}
  .article-shell aside{display:none}
}
@media (max-width: 768px){
  .about-hero-editorial{
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: clamp(100px, 12vw, 120px);
  }
  .about-hero-title{
    font-size: clamp(36px, 9vw, 52px);
    margin: 12px 0 20px;
  }
  .hero h1{
    max-width: none;
    font-size: clamp(36px, 9vw, 52px);
  }
  .hero-lede{
    max-width: none;
    font-size: 17px;
  }
  .hero-lede-full{ display: none }
  .hero-lede-short{ display: block }
  /* Home hero: start at viewport top so video sits behind the nav */
  .nav + .page.page-home{
    padding-top: 0;
  }
  .page-home > .hero{
    margin-top: 0;
    min-height: 100svh;
    min-height: 100dvh;
    min-height: 100lvh; /* last wins — covers full screen when mobile chrome hides */
    padding-top: calc(84px + env(safe-area-inset-top, 0px));
  }
  .page-home .hero-media{
    min-height: 100svh;
    min-height: 100dvh;
    min-height: 100lvh;
  }
  .page-home .hero::after{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .hero-overlay{
    padding-top: clamp(32px, 8vw, 56px);
    padding-bottom: clamp(48px, 10vw, 80px);
  }
  .hero-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-actions .btn,
  .hero-actions .btn-ghost{
    justify-content: center;
    width: 100%;
  }
  .section{padding: clamp(56px, 12vw, 90px) 0}
  .section-head{margin-bottom: 40px}
  .phase{
    padding: 20px 16px 22px 18px;
    gap: 12px;
  }
  .phase-fruit{
    width: 68px;
    height: 68px;
  }
  .phase h4{font-size: 20px}
  .signup{
    padding: clamp(28px, 6vw, 44px) clamp(22px, 5.5vw, 36px) clamp(36px, 7vw, 52px);
    gap: clamp(24px, 5vw, 32px);
    align-items: stretch;
    border-radius: 22px;
  }
  .signup-action{
    gap: 28px;
  }
  .signup h2{
    font-size: clamp(26px, 6.5vw, 36px);
    line-height: 1.12;
  }
  .signup p,
  .signup-fine{
    max-width: none;
  }
  .signup-action{
    width: 100%;
  }
  .guide-page .g-spread{
    width: 100%;
    max-width: 100%;
  }
  .footer-fine{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
@media (max-width: 768px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
}
@media (max-width: 600px){
  .signup{
    padding: 26px 20px 32px;
    gap: 22px;
    border-radius: 18px;
  }
  .signup-action{
    gap: 26px;
  }
  .features, .journal, .team, .principles, .phases{grid-template-columns: 1fr}
  .footer-links-group{flex-direction: column; gap: 28px}
  .principle{
    border-right: 0;
    border-bottom: 1px solid var(--hair-2);
  }
  .principle:nth-child(n+3){border-bottom: 1px solid var(--hair-2)}
  .principle:last-child{border-bottom: 0}
  .phases{border-radius: 14px}
  .phase{
    border-right: 0;
    border-bottom: 1px solid var(--hair-2);
    padding: 22px 18px 24px;
  }
  .phase:last-child{border-bottom: 0}
  .j-card{padding: 18px}
  .about-hero,
  .team-hero,
  .blog-hero{
    padding-top: clamp(40px, 10vw, 64px);
  }
}


/* ─── Waitlist: intensity scale & recommendation ──────────────── */
.wl-sub{ color: var(--ink-2); font-size: 14px; margin: -16px 0 22px; line-height: 1.55 }
.wl-scale{ display:flex; gap: 10px; margin-top: 4px }
.wl-scale-dot{
  flex: 1;
  display: grid; place-items: center;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: #fff;
  font: 500 13px var(--sans);
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s ease;
}
.wl-scale-dot:hover{ border-color: var(--ink) }
.wl-scale-dot.filled{
  background: color-mix(in oklab, var(--lavender) 40%, var(--ivory));
  border-color: color-mix(in oklab, var(--lavender) 60%, var(--ink) 8%);
  color: var(--ink);
}
.wl-scale-dot.on{
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}
.wl-scale-labels{
  display:flex; justify-content: space-between;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 12px;
}
.wl-scale-current{ color: var(--ink); font-weight: 500 }

.wl-rec{
  margin-top: 28px;
  padding: 22px 22px 24px;
  border: 1px solid var(--hair-2);
  border-radius: 16px;
  background: color-mix(in oklab, var(--lavender) 18%, var(--ivory));
  text-align: left;
}
.wl-rec h4{
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.01em;
  margin: 6px 0 8px;
}
.wl-rec p{
  margin: 0 0 16px; color: var(--ink-2);
  font-size: 14px; line-height: 1.55;
  max-width: none;
}
.wl-rec .btn{ font-size: 13px; padding: 10px 18px }

/* ─── The Cycle Guide ───────────────────────────────────── */
.guide-page{
  background: var(--ivory);
}
.guide-page .g-mark{
  display:inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.g-mark-circle{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink);
  display: inline-block;
}
.g-rule{
  height: 1px; background: var(--hair); width: 100%;
}

/* COVER */
.g-cover{
  min-height: 92vh;
  padding: 80px 0 60px;
  background:
    radial-gradient(80% 60% at 80% 20%, color-mix(in oklab, var(--lavender) 35%, var(--ivory)), transparent 70%),
    radial-gradient(60% 60% at 10% 90%, color-mix(in oklab, var(--rose) 30%, var(--ivory)), transparent 70%),
    var(--ivory);
  display: flex; align-items: center;
}
.g-cover-inner{
  width: min(1100px, 88vw);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 60px;
}
.g-cover-top{
  display:flex; justify-content: space-between; align-items: center;
}
.g-cover-edition{
  font: 500 11px/1 var(--sans); letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-3);
}
.g-cover-title{ max-width: 920px }
.g-cover-title .eyebrow{ display:block; margin-bottom: 22px }
.g-cover-title h1{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(72px, 11vw, 168px);
  line-height: .92; letter-spacing: -0.028em;
  margin: 0 0 32px;
  text-wrap: balance;
}
.g-cover-title h1 .it{
  font-style: italic;
  color: color-mix(in oklab, var(--ink) 78%, var(--lavender));
}
.g-cover-title > p{
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  max-width: 720px;
  margin: 0;
}
.g-cover-meta{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1px solid var(--hair);
  padding-top: 28px;
}
.g-cover-meta-l{
  font: 500 10.5px/1 var(--sans); letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 10px;
}
.g-cover-meta-v{
  font-family: var(--serif);
  font-size: 17px; line-height: 1.35;
  color: var(--ink);
}

/* SPREAD */
.g-spread{
  width: min(960px, 88vw);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid var(--hair-2);
}
.g-folio{
  display:flex; justify-content: space-between;
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 56px;
}
.g-spread-h{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1; letter-spacing: -0.025em;
  margin: 0 0 56px;
}
.g-chapter-head{
  margin-bottom: 56px;
}
.g-chapter-num{
  font: 500 11px/1 var(--sans); letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 18px;
}
.g-chapter-head h2{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02; letter-spacing: -0.022em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.g-chapter-dek{
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 640px;
  margin: 0;
  letter-spacing: -0.005em;
}

/* CONTENTS */
.g-toc{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 0;
}
.g-toc li{
  display: grid;
  grid-template-columns: 60px 1fr auto 40px;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
  cursor: pointer;
  transition: padding-left .3s ease;
}
.g-toc li:hover{ padding-left: 8px }
.g-toc li .n{
  font: 500 11px/1 var(--sans);
  letter-spacing: .2em; color: var(--ink-3);
  text-transform: uppercase;
}
.g-toc li .t{
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.008em;
  color: var(--ink);
}
.g-toc li .d{
  flex: 1; border-bottom: 1px dotted var(--hair-2);
  align-self: end; margin-bottom: 8px;
}
.g-toc li .p{
  font: 500 12px var(--sans); letter-spacing: .12em;
  color: var(--ink-3);
}
.g-contents-foot{
  margin-top: 40px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-2);
}

/* FOREWORD */
.g-letter{
  max-width: 640px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.g-letter p{ margin: 0 0 22px }
.g-drop{ position: relative }
.g-dropcap{
  font-family: var(--serif);
  font-size: 84px; line-height: .85;
  float: left;
  margin: 6px 12px -4px 0;
  color: color-mix(in oklab, var(--ink) 80%, var(--lavender));
  font-weight: 500;
}
.g-sig{
  margin-top: 36px !important;
  font: 500 12px var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* SYMPTOM DECODER */
.g-decoder{ display: flex; flex-direction: column; gap: 0 }
.g-decoder-row{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--hair);
}
.g-decoder-row:last-child{ border-bottom: 1px solid var(--hair) }
.g-decoder-q{
  display: flex; gap: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3; letter-spacing: -0.012em;
  color: var(--ink);
}
.g-decoder-tick{
  display: inline-block; color: var(--ink-3); flex: 0 0 auto;
}
.g-decoder-a{
  font-size: 15px; line-height: 1.6;
  color: var(--ink-2);
}

/* PHASE BY PHASE */
.g-weeks{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.g-week-card{
  position: relative;
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid var(--hair);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 300px;
}
.g-week-card::after{
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .52;
}
.g-week-card--menstrual::after{
  right: -72px; bottom: -72px;
  background: radial-gradient(circle, #E8C8C2, transparent 68%);
}
.g-week-card--follicular::after{
  right: -64px; top: -64px;
  background: radial-gradient(circle, #E8E0BE, transparent 68%);
}
.g-week-card--ovulatory::after{
  left: -56px; bottom: -56px;
  background: radial-gradient(circle, #BBCEAB, transparent 68%);
}
.g-week-card--luteal::after{
  right: -70px; bottom: -70px;
  background: radial-gradient(circle, #D8CFE0, transparent 68%);
}
.g-week-card--delayed::after{
  left: -68px; bottom: -68px;
  opacity: .62;
  background: radial-gradient(circle, #7B8EB5, transparent 66%);
}
.g-week-card--anovulatory::after{
  right: -66px; top: -48px;
  opacity: .62;
  background: radial-gradient(circle, #C47A6C, transparent 66%);
}
.g-week-head,
.g-week-body{
  position: relative;
  z-index: 1;
}
.g-week-head{ display:block }
.g-week-phase,
.g-week-no{
  font-family: var(--serif);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
  color: var(--ink);
}
.g-week-sub{
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
}
.g-week-body{ display: flex; flex-direction: column; gap: 16px }
.g-week-l{
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.g-week-body p{
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.g-week-signs{
  margin: 0;
  padding: 0 0 0 1.15em;
  list-style: disc;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.g-week-signs li + li{ margin-top: 5px }

/* FOOD */
.g-food{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
}
.g-plate{ text-align: center }
.g-plate-disc{
  position: relative;
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ivory) 80%, var(--lavender) 8%);
  border: 1px solid var(--hair);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.g-plate-slice{
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  color: var(--ink);
  padding: 8px;
}
.g-plate-slice em{
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.g-plate-protein{ background: color-mix(in oklab, var(--rose) 22%, var(--ivory)) }
.g-plate-veg{     background: color-mix(in oklab, var(--lavender) 22%, var(--ivory)) }
.g-plate-carb{    background: color-mix(in oklab, var(--lavender) 14%, var(--ivory)) }
.g-plate-fat{     background: color-mix(in oklab, var(--rose) 14%, var(--ivory)) }
.g-plate-center{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  font-family: var(--serif); font-style: italic;
  color: var(--ink); font-size: 14px;
  letter-spacing: -0.005em;
}
.g-plate-center::before{
  content:""; position:absolute;
  width: 36%; height: 36%;
  border-radius: 50%; background: var(--ivory);
  border: 1px solid var(--hair);
  z-index: 0;
}
.g-plate-center{ z-index: 1 }
.g-plate-cap{
  margin-top: 22px;
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; color: var(--ink-2);
  line-height: 1.5;
}
.g-swaps h3{
  font-family: var(--serif); font-weight: 500;
  font-size: 28px; letter-spacing: -0.012em;
  margin: 0 0 24px;
}
.g-swaps ol{
  padding-left: 22px;
  margin: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.g-swaps li{
  font-size: 15.5px; line-height: 1.6;
  color: var(--ink-2);
}
.g-swaps li b{ color: var(--ink); font-weight: 500 }

/* TABLE (movement) */
.g-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.g-table th, .g-table td{
  text-align: left;
  padding: 18px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
.g-table thead th{
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 14px;
  border-bottom-color: var(--ink);
}
.g-table tbody td:first-child{
  font-family: var(--serif); font-size: 17px;
  line-height: 1.3;
}
.g-table .muted{
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
.g-table tbody td{ color: var(--ink) }
.g-table tbody td:nth-child(n+2){ color: var(--ink-2); line-height: 1.5 }

/* DOCTOR */
.g-doctor{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 60px);
}
.g-doctor h3{
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.g-doctor-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.g-doctor-list li{
  position: relative; padding-left: 20px;
  font-size: 15px; line-height: 1.6;
  color: var(--ink);
}
.g-doctor-list li::before{
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 70%, var(--lavender));
}
.g-doctor-list em{
  font-style: italic; color: var(--ink-2);
  font-family: var(--serif);
}
.g-tests{ width: 100%; border-collapse: collapse }
.g-tests td{
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 14.5px;
  vertical-align: baseline;
}
.g-tests td:first-child{
  font-family: var(--serif); font-size: 16px;
  color: var(--ink);
}
.g-tests td.muted{
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}
.g-doctor-tip{
  margin: 22px 0 0;
  padding: 18px 20px;
  background: color-mix(in oklab, var(--lavender) 18%, var(--ivory));
  border-radius: 12px;
  font-family: var(--serif);
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
}
.g-doctor-tip em{ font-style: italic; color: var(--ink-2) }

/* RED FLAGS */
.g-flags{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px }
.g-flag{
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 20px;
  background: color-mix(in oklab, var(--rose) 18%, var(--ivory));
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--rose) 30%, var(--hair-2));
  font-family: var(--serif);
  font-size: 16px; line-height: 1.45;
  color: var(--ink);
}
.g-flag-dot{
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: #b85a4a;
  margin-top: 8px;
}
.g-flags-foot{
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* GLOSSARY */
.g-glossary{
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.g-gl-row{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(20px, 4vw, 40px);
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.g-gl-row dt{
  font-family: var(--serif); font-weight: 500;
  font-size: 20px; letter-spacing: -0.008em;
}
.g-gl-row dd{
  margin: 0;
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-2);
}

/* TRACKER */
.g-tracker{ }
.g-tracker-head{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}
.g-tracker-l{
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.g-tracker-blank{
  height: 32px;
  border-bottom: 1px solid var(--ink);
}
.g-tracker-grid{
  display: grid;
  grid-template-columns: 100px repeat(28, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--hair);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.g-tracker-cell{
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  height: 30px;
  display: grid; place-items: center;
  font-size: 10px;
  color: var(--ink-3);
}
.g-tracker-cell:last-child{ border-right: 0 }
.g-tracker-grid > div:nth-last-child(-n+29){ border-bottom: 0 }
.g-tracker-day{
  background: color-mix(in oklab, var(--lavender) 10%, var(--ivory));
  font: 500 10.5px var(--sans);
  letter-spacing: .04em;
  color: var(--ink-2);
}
.g-tracker-label{
  background: color-mix(in oklab, var(--lavender) 14%, var(--ivory));
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink);
  justify-content: flex-start; padding-left: 12px;
}
.g-tracker-cap{
  margin-top: 22px;
  font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--ink-2);
}

/* READING */
.g-reading{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 48px);
  margin-bottom: 80px;
}
.g-reading h4{
  font-family: var(--serif); font-weight: 500;
  font-size: 20px; margin: 0 0 16px;
  letter-spacing: -0.005em;
}
.g-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.g-list li{
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink-2);
}
.g-list li b{ color: var(--ink); font-weight: 500; font-family: var(--serif); font-size: 16px }
.g-list li i{ font-style: italic }

.g-closing{
  border-top: 1px solid var(--hair);
  padding-top: 48px;
  font-family: var(--serif);
  font-size: 19px; line-height: 1.6;
  color: var(--ink);
  max-width: 640px;
}
.g-closing p{ margin: 0 0 22px }
.g-closing-cta{
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 8px;
}
.g-colophon{
  margin-top: 80px;
}
.g-colophon-row{
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding-top: 24px;
  font: 500 10.5px/1.5 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}

/* responsive */
@media (max-width: 860px){
  .g-weeks, .g-food, .g-doctor, .g-reading{ grid-template-columns: 1fr }
  .g-gl-row{ grid-template-columns: 1fr; gap: 4px }
  .g-cover-meta{ grid-template-columns: 1fr; gap: 18px }
  .g-decoder-row{ grid-template-columns: 1fr; gap: 12px }
  .g-tracker-grid{ grid-template-columns: 80px repeat(14, minmax(0, 1fr)); }
  .g-tracker-grid > .g-tracker-day:nth-child(n+16){ display: none }
}


/* ─── Cycle Field Guide form (minimal) ────────────────────────── */
.gf-wrap{
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding:
    clamp(80px, 12vw, 160px)
    0
    clamp(80px, 10vw, 120px)
    0;
}
.gf-head{
  text-align: left;
  margin-bottom: clamp(48px, 7vw, 72px);
}
.gf-head .eyebrow{ display:block; margin-bottom: 18px }
.gf-head h1{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.gf-head h1 .it{
  font-style: italic;
  color: color-mix(in oklab, var(--ink) 78%, var(--lavender));
}
.gf-head .lede{
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 560px;
  margin: 0;
  letter-spacing: -0.005em;
}

.gf-form{
  display: flex; flex-direction: column;
  gap: 32px;
}
.gf-field{ display: flex; flex-direction: column; gap: 10px }
.gf-field label{
  font: 500 11px/1 var(--sans);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: baseline; gap: 10px;
}
.gf-optional{
  font: 500 10px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
.gf-input{
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--hair);
  background: transparent;
  font: 17px/1 var(--serif);
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: border-color .25s ease;
  border-radius: 0;
}
.gf-input::placeholder{ color: var(--ink-3); font-family: var(--serif) }
.gf-input:focus{
  outline: none;
  border-bottom-color: var(--ink);
}
.gf-input.err{ border-bottom-color: #b85a4a }
.gf-input:-webkit-autofill,
.gf-input:-webkit-autofill:hover,
.gf-input:-webkit-autofill:focus,
.gf-input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 1000px var(--bg-top) inset;
  box-shadow: 0 0 0 1000px var(--bg-top) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 99999s ease-out 0s;
}
.gf-input:autofill{
  box-shadow: 0 0 0 1000px var(--bg-top) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}
.gf-err{
  font-size: 12px; color: #b85a4a;
  letter-spacing: 0; text-transform: none;
  margin-top: 2px;
}

.gf-chips{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px;
}
.gf-chip{
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: transparent;
  font: 500 13px/1 var(--sans);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.gf-chip:hover{ border-color: var(--ink); color: var(--ink) }
.gf-chip.on{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

.gf-turnstile{
  margin-top: 4px;
}
.gf-status{
  font-size: 13px;
  color: #b85a4a;
  line-height: 1.45;
  margin: 0;
  max-width: 460px;
}
.gf-submit{
  align-self: flex-start;
  margin-top: 8px;
}
.gf-fine{
  font-size: 12px; color: var(--ink-3);
  line-height: 1.55; margin: 0;
  max-width: 460px;
}

/* THANKS */
.gf-thanks{
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.gf-thanks .check{
  width: 48px; height: 48px; border-radius: 50%;
  background: color-mix(in oklab, var(--lavender) 35%, var(--ivory));
  display: grid; place-items: center;
  margin-bottom: 8px;
  color: var(--ink);
  animation: pop .35s cubic-bezier(.2,.7,.2,1);
}
.gf-thanks h2{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  animation: gfThanksFade .85s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes gfThanksFade{
  from{ opacity: 0; transform: translateY(14px) }
  to{ opacity: 1; transform: translateY(0) }
}
[data-motion="quiet"] .gf-thanks h2{ animation-duration: .6s }
[data-motion="playful"] .gf-thanks h2{ animation-duration: 1.05s }
.gf-thanks h2 .it{
  font-style: italic;
  color: color-mix(in oklab, var(--ink) 78%, var(--lavender));
}
.gf-thanks > p{
  font-family: var(--serif);
  font-size: 18px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 520px;
}

.gf-thanks-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(36px, 5vw, 48px);
}

.gf-rec{
  margin-top: 16px;
  padding: 28px 28px 30px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: color-mix(in oklab, var(--lavender) 14%, var(--ivory));
  width: 100%;
}
.gf-rec .eyebrow{ display:block; margin-bottom: 10px }
.gf-rec h4{
  font-family: var(--serif); font-weight: 500;
  font-size: 26px; line-height: 1.15; letter-spacing: -0.012em;
  margin: 0 0 10px;
}
.gf-rec > p{
  margin: 0 0 20px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-2);
}
.gf-rec .btn{ font-size: 13px; padding: 10px 18px }
.gf-rec-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 8px;
}
.gf-field-consent{
  gap: 8px;
  margin-top: 4px;
}
.gf-field label.gf-consent{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 520px;
  padding: 2px 0;
  font: 400 14px/1.65 var(--sans);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-2);
  cursor: pointer;
}
.gf-consent-text{
  flex: 1;
  padding-top: 1px;
}
.gf-consent input{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ink);
}
.gf-consent-err .gf-consent-text{ color: color-mix(in oklab, #b85a4a 85%, var(--ink)); }

.g-download{
  padding: 24px 0 0;
}
.g-download-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  padding: 22px 28px;
  border-radius: 20px;
  border: 1px solid var(--hair);
  background: var(--ivory);
}
.g-download-lede{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 420px;
}

.gf-reset{
  margin-top: 8px;
  background: transparent; border: 0;
  font: 500 12px var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  padding: 8px 0;
  border-bottom: 1px solid var(--hair-2);
}
.gf-reset:hover{ color: var(--ink); border-bottom-color: var(--ink) }

/* ─── Cycle Guide · print / PDF ─────────────────────────── */
@media print {
  .nav,
  .footer,
  .cursor-ring,
  .tweaks-panel,
  .g-download,
  .g-closing-cta {
    display: none !important;
  }

  html, body {
    background: var(--ivory) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .page {
    padding-top: 0 !important;
  }

  .guide-page .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .g-cover {
    min-height: 100vh;
    break-after: page;
    page-break-after: always;
  }

  .g-contents {
    break-after: page;
    page-break-after: always;
  }

  .g-spread:not(.g-contents) {
    break-before: page;
    page-break-before: always;
  }

  .g-week-card,
  .g-decoder-row,
  .g-flag,
  .g-tracker-grid,
  .g-table {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

.cycle-graph-box {
  height: 480px;
}
.cycle-graph-container {
  min-height: 480px;
}
@media (max-width: 768px) {
  .cycle-graph-box {
    height: 380px;
  }
  .cycle-graph-container {
    min-height: 380px;
  }
}

.cycle-graph-wrapper:hover .did-you-know-card {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.cycle-graph-container path.draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 768px) {
  .did-you-know-card {
    display: none !important;
  }
}