*,*::before,*::after{box-sizing:border-box}
  html,body{background:var(--mp-pink-50);color:var(--mp-ink-900);font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body{font-size:17px;line-height:1.55}
  h1,h2,h3,h4{font-family:'Playfair Display',serif;font-weight:500;letter-spacing:-.01em;color:var(--mp-ink-900);text-wrap:balance}
  h1{font-size:clamp(38px,5.2vw,66px);line-height:1.03;letter-spacing:-.02em;font-weight:600}
  h2{font-size:clamp(32px,4.2vw,56px);line-height:1.05;letter-spacing:-.02em}
  h3{font-size:clamp(22px,2vw,28px);line-height:1.2}
  p{text-wrap:pretty;color:var(--mp-ink-500)}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit}
  ::selection{background:var(--mp-pink-500);color:var(--mp-white)}

  /* ============ LAYOUT HELPERS ============ */
  .wrap{max-width:1240px;padding:0 18px}
  .eyebrow{font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--mp-pink-500)}
  .eyebrow::before{content:"";width:24px;height:1px;background:var(--mp-pink-500);display:inline-block;opacity:.6}
  .nav-cta .btn,.hero-cta .btn{border-radius:999px;font-weight:700;font-size:15px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,border-color .2s}
  .nav-cta .btn-primary,.hero-cta .btn-primary{background:var(--mp-pink-500);border-color:var(--mp-pink-500);color:var(--mp-white);box-shadow:0 10px 24px -8px color-mix(in srgb, var(--mp-pink-500) 50%, transparent)}
  .nav-cta .btn-primary:hover,.hero-cta .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px -8px color-mix(in srgb, var(--mp-pink-500) 60%, transparent);background:var(--mp-pink-700);border-color:var(--mp-pink-700);color:var(--mp-white)}
  .btn-ghost{background:var(--mp-white);color:var(--mp-ink-900);border:1px solid color-mix(in srgb, var(--mp-ink-900) 8%, transparent)}
  .btn-ghost:hover{transform:translateY(-2px);box-shadow:0 1px 2px color-mix(in srgb, var(--mp-ink-900) 4%, transparent), 0 12px 32px -16px color-mix(in srgb, var(--mp-pink-500) 18%, transparent)}
  section{position:relative;padding:120px 0}

  /* ============ NAV ============ */
  .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 0;background:linear-gradient(180deg,color-mix(in srgb, var(--mp-pink-50) 92%, transparent),color-mix(in srgb, var(--mp-pink-50) 62%, transparent));backdrop-filter:blur(18px);transition:background .3s, padding .3s}
  .nav.scrolled{background:color-mix(in srgb, var(--mp-pink-50) 90%, transparent);padding:10px}
  .nav-inner{min-height:74px;background:color-mix(in srgb, var(--mp-white) 78%, transparent);border:1px solid color-mix(in srgb, var(--mp-pink-500) 10%, transparent);border-radius:999px;padding:10px 16px 10px 14px;box-shadow:0 18px 44px -28px color-mix(in srgb, var(--mp-ink-900) 28%, transparent)}
  .brand{flex:0 0 auto}
  .brand-logo-shell{width:204px;height:54px;background:var(--mp-white);overflow:hidden;}
  .brand-logo{display:block;width:auto;height:46px;max-width:184px;object-fit:contain}
  .foot-brand .brand-logo-shell{width:190px;height:58px}
  .foot-brand .brand-logo{height:48px;max-width:166px}
  .nav-links{flex:1}
  .nav-links a{font-size:14.5px;font-weight:600;color:var(--mp-ink-500);transition:color .2s;white-space:nowrap}
  .nav-links a:hover{color:var(--mp-pink-500)}
.nav-mobile-account {
    display: none
}

.nav-toggle {
    display: none;
    min-width: 70px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mp-pink-500) 10%, transparent);
    background: var(--mp-pink-500);
    color: var(--mp-white);
    box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--mp-pink-500) 65%, transparent);
    padding: 0 16px;
    flex: 0 0 auto;
    position: relative;
    z-index: 35
}

.nav-toggle-icon {
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    color: var(--mp-white);
    position: relative;
    z-index: 35
}

  .nav-cta .btn{padding:15px 30px}
  @media (max-width:980px){.brand-logo-shell{width:168px}.brand-logo{max-width:148px}}
  @media (max-width:820px){
    .nav{padding:10px 0}
    .nav-inner{position:relative;min-height:66px;border-radius:28px;padding:8px 88px 8px 10px;gap:10px!important}
    .nav-toggle {
        display: inline-flex;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%)
    }

    .nav-cta {
        display: none !important
    }

    .nav-links {
        display: none !important;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        z-index: 30;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        background: color-mix(in srgb, var(--mp-white) 98%, transparent);
        border: 1px solid color-mix(in srgb, var(--mp-pink-500) 14%, transparent);
        border-radius: 22px;
        padding: 12px;
        box-shadow: 0 18px 42px -24px color-mix(in srgb, var(--mp-ink-900) 45%, transparent);
        backdrop-filter: blur(16px)
    }

    .nav.nav-open .nav-links {
        display: flex !important
    }

    .nav-links a {
        padding: 11px 14px;
        border-radius: 14px;
        background: var(--mp-pink-50);
        color: var(--mp-ink-900);
        font-size: 14px;
        font-weight: 800
    }

        .nav-links a:hover {
            background: var(--mp-pink-100);
            color: var(--mp-pink-500)
        }

    .nav-mobile-account {
        display: block;
        background: var(--mp-pink-500) !important;
        color: var(--mp-white) !important;
        text-align: center;
        box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--mp-pink-500) 55%, transparent)
    }
  }
  @media (max-width:520px){.brand-logo-shell{width:152px;height:44px;border-radius:15px}.brand-logo{height:36px;max-width:136px}}

  /* ============ HERO ============ */
  .hero{padding:160px 0 100px;position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:2}
  .hero-grid > *{min-width:0}
  @media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
  .hero h1{font-family:'DM Sans',system-ui,sans-serif;font-size:clamp(44px,4.9vw,64px);font-weight:800;letter-spacing:-0.015em;line-height:1.05}
  .hero h1 .hero-accent{color:var(--mp-pink-500)}
  .hero h1 em{font-style:italic;color:var(--mp-pink-500);font-weight:500;position:relative;white-space:nowrap}
  .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:10px;background:var(--mp-pink-200);z-index:-1;border-radius:6px;transform:scaleX(0);transform-origin:left;animation:underline 1.2s 1s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes underline{to{transform:scaleX(1)}}
  .hero-lede{margin-top:22px;max-width:520px;font-size:18px;line-height:1.55}
.hero-cta {
    margin-top: 36px
}

    .hero-cta .btn {
        padding: 14px 26px
    }
  .rating-pill{font-size:13.5px;color:var(--mp-ink-500)}
  .mini-dot{width:9px;height:9px;border-radius:50%;background:var(--mp-pink-500);flex:0 0 auto}
  .hero-pill{padding:10px 20px;background:var(--mp-pink-100);border-radius:999px;border:1px solid transparent;font-size:15px;font-weight:800;color:var(--mp-pink-500);margin-bottom:28px;box-shadow:none}

  /* Cycle wheel — hero visual */
  .wheel-stage{position:relative;aspect-ratio:1;max-width:520px;margin-left:auto}
  .wheel-bg{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--mp-white),var(--mp-phase-follicular-bg) 70%);box-shadow:0 20px 60px -20px color-mix(in srgb, var(--mp-pink-500) 25%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--mp-ink-900) 8%, transparent)}
  .wheel-svg{position:relative;width:100%;height:100%;z-index:2}
  .wheel-arc{transform-origin:center;animation:arc-rotate 28s linear infinite}
  @keyframes arc-rotate{to{transform:rotate(360deg)}}
  .wheel-marker{transform-origin:50% 50%;animation:marker-orbit 16s linear infinite}
  @keyframes marker-orbit{to{transform:rotate(360deg)}}
  .wheel-center{position:absolute;inset:0;pointer-events:none;z-index:3}
  .wheel-day{font-family:'Playfair Display',serif;font-size:64px;font-weight:600;line-height:1;color:var(--mp-ink-900)}
  .wheel-phase{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mp-pink-500);margin-top:8px;transition:color .6s}
  .wheel-sub{font-size:13px;color:var(--mp-ink-500);margin-top:6px}
  .wheel-orbit-dot{transform-origin:50% 50%}
  .wheel-tag{position:absolute;background:var(--mp-white);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:600;box-shadow:0 1px 2px color-mix(in srgb, var(--mp-ink-900) 4%, transparent), 0 12px 32px -16px color-mix(in srgb, var(--mp-pink-500) 18%, transparent);z-index:4;animation:float-y 6s ease-in-out infinite}
  .wheel-tag .swatch{width:10px;height:10px;border-radius:50%}
  .wheel-tag.t1{top:6%;left:-4%;animation-delay:0s}
  .wheel-tag.t2{top:42%;right:-10%;animation-delay:-2s}
  .wheel-tag.t3{bottom:6%;left:8%;animation-delay:-4s}
  @keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @media (max-width:520px){
    .hero{padding:120px 0 76px}
    .hero .wrap{width:100%;max-width:100%;overflow:hidden}
    .hero-grid{width:min(100%,354px);max-width:354px;grid-template-columns:minmax(0,1fr);overflow:hidden}
    .hero-grid > div{width:min(100%,354px);max-width:354px}
    .hero h1{font-size:clamp(36px,11.8vw,48px);line-height:1.06;letter-spacing:-0.005em}
    .hero-lede{width:min(100%,354px);max-width:354px;font-size:16px;overflow-wrap:anywhere;text-wrap:wrap}
    .hero-pill{max-width:100%;font-size:12.5px;white-space:normal}
    .hero-cta {
        display: grid;
        grid-template-columns: minmax(0,1fr);
        gap: 12px;
        width: min(100%,354px);
        max-width: 354px
    }

        .hero-cta .btn {
            width: 100%;
            max-width: 100%
        }
    .rating-pill{font-size:12.5px}
    .wheel-stage{width:min(100%,330px);max-width:330px;margin:34px auto 0}
    .wheel-tag{font-size:11.5px;padding:8px 10px}
    .wheel-tag.t1{top:8%;left:0}
    .wheel-tag.t2{top:42%;right:34px}
    .wheel-tag.t3{bottom:6%;left:0}
  }

  /* ============ FLOATING DECORATIVE PETALS ============ */
  .petal-bg{position:absolute;pointer-events:none;opacity:.5;animation:drift 18s ease-in-out infinite}
  @keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(20px,-30px) rotate(20deg)}}

  /* ============ SECTION SHARED ============ */
  .section-head{max-width:680px;margin-bottom:64px}
  .section-head p{margin:18px auto 0;font-size:18px}
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal[data-delay="1"]{transition-delay:.08s}
  .reveal[data-delay="2"]{transition-delay:.16s}
  .reveal[data-delay="3"]{transition-delay:.24s}
  .reveal[data-delay="4"]{transition-delay:.32s}

  /* ============ HOW IT WORKS ============ */
  .how{background:linear-gradient(180deg,var(--mp-pink-50) 0%, var(--mp-white) 100%)}
  .how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;align-items:stretch}
  @media (max-width:820px){.how-steps{grid-template-columns:1fr}}
  .step-card{background:var(--mp-white);border-radius:36px;padding:40px 32px;border:1px solid color-mix(in srgb, var(--mp-ink-900) 8%, transparent);position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;min-height:380px}
  .step-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px -20px color-mix(in srgb, var(--mp-pink-500) 25%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--mp-ink-900) 8%, transparent)}
  .step-num{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:800;color:var(--mp-pink-500);letter-spacing:.14em;text-transform:uppercase}
  .step-illu{height:140px;margin-bottom:20px;position:relative;flex:0 0 auto}
  .step-card h3{margin-bottom:10px}
  .step-card p{font-size:15px;line-height:1.65;margin-top:auto}
  @media (max-width:760px){
    section{padding:76px 0}
    .section-head{margin-bottom:36px}
    .how{background:linear-gradient(180deg,var(--mp-pink-50) 0%,var(--mp-white) 100%)}
    .how-steps{gap:18px;margin-top:32px}
    .step-card{min-height:auto;padding:28px 24px;background:var(--mp-white) !important;border-color:color-mix(in srgb, var(--mp-ink-900) 8%, transparent);box-shadow:0 10px 26px -22px color-mix(in srgb, var(--mp-ink-900) 28%, transparent);overflow:hidden;isolation:isolate}
    .step-card:nth-child(n){background:var(--mp-white) !important}
    .step-illu{height:112px;margin-bottom:16px}
    .step-illu svg{max-width:150px;height:auto}
  }

  /* ============ FEATURES ============ */
  .features-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:48px}
  .f-card{background:var(--mp-white);border-radius:36px;padding:36px;border:1px solid color-mix(in srgb, var(--mp-ink-900) 8%, transparent);position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;min-height:340px}
  .f-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px -20px color-mix(in srgb, var(--mp-pink-500) 25%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--mp-ink-900) 8%, transparent)}
  .f-card:hover .f-icon{transform:scale(1.08) rotate(-4deg)}
  .f-icon{width:56px;height:56px;border-radius:18px;transition:transform .4s cubic-bezier(.2,.8,.2,1);margin-bottom:24px}
  .f-card h3{font-family:'Playfair Display',serif}
  .f-card p{font-size:15px;margin-top:8px}
  .f-card .f-visual{margin-top:auto;padding-top:24px}
  .f-card.span-7{grid-column:span 7}
  .f-card.span-5{grid-column:span 5}
  .f-card.span-6{grid-column:span 6}
  @media (max-width:900px){.f-card.span-7,.f-card.span-5,.f-card.span-6{grid-column:span 12}}
  @media (max-width:760px){
    .features-grid{gap:18px;margin-top:32px}
    .f-card{min-height:auto;padding:28px 24px;background:var(--mp-white) !important;border-color:color-mix(in srgb, var(--mp-ink-900) 8%, transparent);box-shadow:0 10px 26px -22px color-mix(in srgb, var(--mp-ink-900) 28%, transparent);overflow:hidden;isolation:isolate}
    .f-card.dark{background:linear-gradient(135deg,var(--mp-ink-900) 0%,var(--mp-ink-700) 100%) !important}
    .f-card .f-visual{padding-top:20px}
    .mini-cal{gap:5px}
    .mood-chips{gap:8px}
    .mood-chip{max-width:100%;white-space:normal}
  }

  .f-card.dark{background:linear-gradient(135deg,var(--mp-ink-900) 0%,var(--mp-ink-700) 100%);color:var(--mp-white)}
  .f-card.dark h3{color:var(--mp-white)}
  .f-card.dark p{color:color-mix(in srgb, var(--mp-white) 70%, transparent)}

  /* Mood chips inside feature */
  .mood-chip{min-height:38px;padding:8px 14px;border-radius:999px;background:var(--mp-pink-50);font-size:13px;font-weight:600;gap:7px;border:1px solid color-mix(in srgb, var(--mp-ink-900) 8%, transparent);cursor:pointer;transition:all .2s;white-space:nowrap;line-height:1}
  .mood-chip:hover, .mood-chip.active{background:var(--mp-pink-500);color:var(--mp-white);border-color:var(--mp-pink-500);transform:translateY(-2px)}

  /* Mood trail — last 7 days + today's log state */
  .mood-trail{margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed color-mix(in srgb, var(--mp-ink-900) 8%, transparent)}
  .mt-day{display:flex;flex-direction:column;align-items:center;gap:6px}
  .mt-day small{font-size:10px;color:var(--mp-ink-500);font-weight:600}
  .mt-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--mp-white);background:var(--mt-color,color-mix(in srgb, var(--mp-ink-900) 8%, transparent))}
  .mt-dot-empty{background:transparent;border:2px dashed color-mix(in srgb, var(--mp-ink-900) 18%, transparent);color:var(--mp-ink-500)}
  .mt-today .mt-dot{box-shadow:0 0 0 3px var(--mp-pink-50),0 0 0 4px var(--mp-pink-200)}
  @keyframes mtPop{0%{transform:scale(.55);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
  .mt-dot.mt-pop{animation:mtPop .45s cubic-bezier(.2,.8,.2,1)}
  .mood-log-msg{font-size:12.5px;font-weight:600;color:var(--mp-ink-500);margin-bottom:14px;transition:color .3s}
  .mood-log-msg.flash{color:var(--mp-pink-500)}

  /* mini calendar */
  .mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .mini-cal .cell{aspect-ratio:1;border-radius:8px;background:var(--mp-pink-50);font-size:11px;color:var(--mp-ink-500);font-weight:500}
  .mini-cal .cell.period{background:var(--mp-pink-500);color:var(--mp-white)}
  .mini-cal .cell.fertile{background:var(--mp-phase-follicular-base);color:var(--mp-ink-900)}
  .mini-cal .cell.ovul{background:var(--mp-phase-fertile-base);color:var(--mp-white);box-shadow:0 0 0 2px var(--mp-pink-200)}
  .mini-cal .cell.today{outline:2px solid var(--mp-pink-500);outline-offset:2px}

  /* ============ CYCLE DEEP DIVE ============ */
  .phases{background:var(--mp-pink-50);transition:background-color 1s ease}
  .phases.phase-1{background:var(--mp-pink-100)}
  .phases.phase-2{background:var(--mp-phase-follicular-bg)}
  .phases.phase-3{background:var(--mp-phase-fertile-bg)}
  .phases.phase-4{background:var(--mp-phase-luteal-bg)}
  .phases-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
  @media (max-width:900px){.phases-grid{grid-template-columns:1fr;gap:48px}}
  .big-wheel-stage{position:relative;aspect-ratio:1;width:100%;max-width:460px;margin:0 auto}
  .big-wheel-ring{position:absolute;inset:3%;border-radius:50%;background:conic-gradient(var(--mp-pink-500) 0% 17.46%,var(--mp-pink-50) 17.46% 18.26%,var(--mp-phase-follicular-base) 18.26% 46.03%,var(--mp-pink-50) 46.03% 46.83%,var(--mp-phase-fertile-base) 46.83% 60.31%,var(--mp-pink-50) 60.31% 61.11%,var(--mp-phase-luteal-base) 61.11% 100%);box-shadow:0 16px 36px -18px color-mix(in srgb, var(--mp-pink-500) 28%, transparent),inset 0 0 0 1px color-mix(in srgb, var(--mp-ink-900) 5%, transparent)}
  .big-wheel-center{position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle at 32% 26%,var(--mp-white) 0%,var(--mp-white) 55%,var(--mp-pink-50) 145%);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mp-ink-900) 5%, transparent),inset 0 -8px 16px -10px color-mix(in srgb, var(--mp-pink-500) 14%, transparent),0 14px 34px -14px color-mix(in srgb, var(--mp-pink-500) 22%, transparent);display:flex;flex-direction:column;align-items:center;justify-content:center}
  .big-wheel-center .num{font-family:'Playfair Display',serif;font-size:40px;font-weight:600;color:var(--mp-pink-500);line-height:1}
  .big-wheel-center .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mp-ink-500);margin-top:8px;padding-top:8px;position:relative}
  .big-wheel-center .lbl::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:2px;border-radius:2px;background:var(--mp-pink-200)}
  .big-wheel-daylabel{position:absolute;width:60px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;color:var(--mp-ink-500);opacity:.7}
  .big-wheel-daylabel.d1{top:-34px;left:50%;transform:translateX(-50%);text-align:center}
  .big-wheel-daylabel.d7{top:50%;left:100%;margin-left:14px;transform:translateY(-50%);text-align:left}
  .big-wheel-daylabel.d14{bottom:-34px;left:50%;transform:translateX(-50%);text-align:center}
  .big-wheel-daylabel.d21{top:50%;right:100%;margin-right:14px;transform:translateY(-50%);text-align:right}
  .phase-info h2{margin-bottom:8px}
  .phase-info .phase-eyebrow{margin-bottom:14px}
  .phase-info .phase-eyebrow .swatch{width:12px;height:12px;border-radius:50%}
  .phase-info .phase-name{font-family:'Playfair Display',serif;font-style:italic;font-size:14px;font-weight:500;color:var(--mp-ink-900)}
  .phase-info p{margin-top:8px;font-size:17px;max-width:440px}
  .phase-tabs{margin-top:28px}
  .phase-tab{padding:10px 18px;border-radius:999px;background:var(--mp-white);border:1px solid color-mix(in srgb, var(--mp-ink-900) 8%, transparent);font-size:13px;font-weight:600;color:var(--mp-ink-500);cursor:pointer;transition:all .25s}
  .phase-tab .swatch{width:8px;height:8px;border-radius:50%}
  .phase-tab.active{background:var(--mp-ink-900);color:var(--mp-white);border-color:var(--mp-ink-900)}
  .phase-tab:hover:not(.active){transform:translateY(-2px);box-shadow:0 1px 2px color-mix(in srgb, var(--mp-ink-900) 4%, transparent), 0 12px 32px -16px color-mix(in srgb, var(--mp-pink-500) 18%, transparent)}
  .phase-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;max-width:440px}
  .pstat{background:var(--mp-white);border-radius:18px;padding:16px;border:1px solid color-mix(in srgb, var(--mp-ink-900) 8%, transparent)}
  .pstat .v{font-family:'Playfair Display',serif;font-size:24px;font-weight:600;color:var(--mp-pink-500)}
  .pstat .k{font-size:12px;color:var(--mp-ink-500);margin-top:4px}
  @media (max-width:560px){
    .phases{padding:84px 0 76px}
    .phases-grid{gap:34px}
    .big-wheel-stage{width:min(100%,350px);max-width:350px;margin:22px auto 0}
    .big-wheel-ring{inset:8%}
    .big-wheel-center{inset:33.5%}
    .big-wheel-center .num{font-size:38px}
    .big-wheel-daylabel{width:54px;font-size:10px}
    .big-wheel-daylabel.d1{top:0}
    .big-wheel-daylabel.d7{left:auto;right:0;top:50%;margin-left:0;text-align:right}
    .big-wheel-daylabel.d14{bottom:0}
    .big-wheel-daylabel.d21{right:auto;left:0;top:50%;margin-right:0;text-align:left}
    .phase-info p{max-width:350px}
    .phase-stats{max-width:350px;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
    .pstat{min-width:0;padding:18px 12px}
    .pstat .v{font-size:24px;overflow-wrap:anywhere}
    .pstat .k{font-size:11px;line-height:1.35}
  }

  /* ============ WHY COMPARISON ============ */
  .why{background:linear-gradient(180deg,var(--mp-white) 0%, var(--mp-phase-follicular-bg) 100%)}
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;max-width:880px;margin-left:auto;margin-right:auto}
  @media (max-width:760px){.compare{grid-template-columns:1fr}}
  .compare-col{background:var(--mp-white);border-radius:36px;padding:36px;border:1px solid color-mix(in srgb, var(--mp-ink-900) 8%, transparent)}
  .compare-col.ours{background:linear-gradient(155deg,var(--mp-white),var(--mp-pink-100));border-color:var(--mp-pink-200);position:relative;box-shadow:0 20px 60px -20px color-mix(in srgb, var(--mp-pink-500) 25%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--mp-ink-900) 8%, transparent)}
  .compare-col.ours::before{content:"mypariva";position:absolute;top:-12px;right:24px;background:var(--mp-pink-500);color:var(--mp-white);padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .compare-col h4{font-family:'Playfair Display',serif;font-size:22px;font-weight:600;margin-bottom:24px}
  .compare-col ul{list-style:none}
  .compare-col li{font-size:15px;color:var(--mp-ink-900);line-height:1.4}
  .compare-col .check{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--mp-pink-500);color:var(--mp-white);font-size:12px;margin-top:1px}
  .compare-col .x{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--mp-ink-200);color:var(--mp-ink-500);font-size:11px;margin-top:1px}
  .compare-col.others li{color:var(--mp-ink-500)}

  /* ============ TESTIMONIALS ============ */
  .testimonials{overflow:hidden;background:var(--mp-pink-50)}
  .quote-card{width:380px;background:var(--mp-white);border-radius:36px;padding:32px;border:1px solid color-mix(in srgb, var(--mp-ink-900) 8%, transparent);flex-shrink:0;gap:16px}
  .inside-app{background:var(--mp-pink-50)}
  .inside-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .inside-grid .quote-card{width:auto;min-height:230px}
  .inside-grid .quote-card h3{font-family:'DM Sans',system-ui,sans-serif;font-size:24px;font-weight:800;letter-spacing:-.01em}
  .inside-grid .quote-card p{font-size:15.5px;line-height:1.55}
  .inside-kicker{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mp-pink-500)}
  @media (max-width:900px){.inside-grid{grid-template-columns:1fr}}

  /* ============ CARE PROMPTS ============ */
  .care-prompts{background:linear-gradient(180deg,var(--mp-pink-50) 0%,var(--mp-white) 100%);overflow:hidden}
  .care-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(320px,1fr);gap:72px;align-items:center}
  .care-copy{max-width:560px}
  .care-copy h2{font-family:'DM Sans',system-ui,sans-serif;font-size:clamp(34px,4vw,54px);font-weight:800;line-height:1.08;letter-spacing:-.018em}
  .care-copy p{font-size:18px;line-height:1.75;margin:22px 0 0;color:var(--mp-ink-900)}
  .care-copy p + p{color:var(--mp-ink-500);margin-top:24px}
  .care-link{margin-top:32px;color:var(--mp-pink-500);font-size:16px;font-weight:800}
  .care-link:hover{color:var(--mp-pink-700)}
  .care-preview{position:relative;min-height:330px;border-radius:34px;background:linear-gradient(145deg,var(--mp-phase-follicular-bg),var(--mp-phase-follicular-bg));border:1px solid color-mix(in srgb, var(--mp-pink-500) 8%, transparent);box-shadow:0 20px 60px -20px color-mix(in srgb, var(--mp-pink-500) 25%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--mp-ink-900) 8%, transparent);padding:36px}
  .care-preview::before{content:"";position:absolute;inset:18px;border-radius:28px;background:radial-gradient(circle at 12% 14%,color-mix(in srgb, var(--mp-pink-500) 10%, transparent),transparent 28%),radial-gradient(circle at 90% 92%,color-mix(in srgb, var(--mp-phase-luteal-base) 24%, transparent),transparent 30%);pointer-events:none}
  .care-preview-label{position:relative;z-index:1;text-align:center;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900;color:var(--mp-ink-500);margin-bottom:18px}
  .care-message{position:relative;z-index:1;border-radius:22px;padding:20px 22px;box-shadow:0 12px 28px -20px color-mix(in srgb, var(--mp-ink-900) 35%, transparent)}
  .care-message h3{font-family:'DM Sans',system-ui,sans-serif;font-size:15px;font-weight:900;margin:0 0 18px;color:var(--mp-ink-900)}
  .care-message p{font-size:16px;line-height:1.48;margin:0;color:var(--mp-ink-900)}
  .care-message span{display:block;margin-top:12px;text-align:right;font-size:12px;color:var(--mp-ink-500)}
  .care-message-main{width:min(100%,360px);background:var(--mp-success-bg);border:1px solid color-mix(in srgb, var(--mp-success-base) 22%, transparent)}
  .care-message-reply{width:min(78%,260px);margin:16px 0 0 auto;background:var(--mp-white);border:1px solid color-mix(in srgb, var(--mp-ink-900) 8%, transparent)}
  .care-message-reply p{font-size:15px}
  @media (max-width:900px){.care-grid{grid-template-columns:1fr;gap:36px}.care-copy{max-width:none}.care-preview{min-height:300px}}
  @media (max-width:520px){
    .care-prompts{padding:76px 0}
    .care-grid{gap:28px}
    .care-copy h2{font-size:32px}
    .care-copy p{font-size:16px;line-height:1.65}
    .care-preview{padding:24px 18px;border-radius:28px}
    .care-message{padding:18px;border-radius:18px}
    .care-message-main,.care-message-reply{width:100%}
    .care-message-reply{margin-top:12px}
  }

  /* ============ TRUST FAQ ============ */
  .trust-faq{background:linear-gradient(180deg,var(--mp-white) 0%,var(--mp-pink-50) 100%)}
  .faq-grid{display:grid;grid-template-columns:minmax(280px,.68fr) minmax(0,1fr);gap:28px;align-items:start;max-width:1040px;margin:0 auto}
  .faq-note{position:sticky;top:120px;background:linear-gradient(155deg,var(--mp-ink-900),var(--mp-ink-700));border-radius:36px;padding:34px;color:var(--mp-white);box-shadow:0 20px 60px -20px color-mix(in srgb, var(--mp-pink-500) 25%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--mp-ink-900) 8%, transparent);overflow:hidden}
  .faq-note::after{content:"";position:absolute;right:-42px;bottom:-50px;width:170px;height:170px;border-radius:50%;background:color-mix(in srgb, var(--mp-pink-500) 24%, transparent)}
  .faq-note-mark{width:44px;height:44px;border-radius:16px;background:var(--mp-pink-500);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:30px;font-weight:700;margin-bottom:28px}
  .faq-note h3{color:var(--mp-white);font-family:'DM Sans',system-ui,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.01em}
  .faq-note p{color:color-mix(in srgb, var(--mp-white) 74%, transparent);font-size:16px;line-height:1.7;margin:14px 0 0}
  .faq-list{display:flex;flex-direction:column;gap:12px}
  .faq-list details{background:var(--mp-white);border:1px solid color-mix(in srgb, var(--mp-pink-500) 10%, transparent);border-radius:22px;padding:0;box-shadow:0 14px 32px -26px color-mix(in srgb, var(--mp-ink-900) 40%, transparent);overflow:hidden}
  .faq-list summary{list-style:none;cursor:pointer;padding:22px 56px 22px 24px;position:relative;font-size:17px;font-weight:900;color:var(--mp-ink-900)}
  .faq-list summary::-webkit-details-marker{display:none}
  .faq-list summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mp-pink-50);color:var(--mp-pink-500);font-weight:900}
  .faq-list details[open] summary{color:var(--mp-pink-500)}
  .faq-list details[open] summary::after{content:"-";background:var(--mp-pink-500);color:var(--mp-white)}
  .faq-list details p{font-size:15.5px;line-height:1.7;margin:0;padding:0 24px 24px;color:var(--mp-ink-500)}
  @media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-note{position:relative;top:auto}}
  @media (max-width:520px){
    .trust-faq{padding:76px 0}
    .faq-note{padding:28px;border-radius:28px}
    .faq-list summary{font-size:15.5px;padding:18px 52px 18px 18px}
    .faq-list details p{font-size:14.5px;padding:0 18px 20px}
  }

  /* ============ PRIVACY ============ */
  .privacy{background:var(--mp-white);position:relative;overflow:hidden}
  .privacy .wrap{position:relative;z-index:1}
  .privacy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:60px}
  @media (max-width:980px){.privacy-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.privacy-grid{grid-template-columns:1fr;gap:16px;margin-top:38px}.privacy .section-head{text-align:left!important}.privacy .section-head h2{font-size:clamp(34px,11vw,48px)}}
  .priv-card{position:relative;min-height:224px;padding:24px;border-radius:22px;background:var(--mp-pink-50);border:1px solid color-mix(in srgb, var(--mp-ink-900) 9%, transparent);box-shadow:0 16px 42px -34px color-mix(in srgb, var(--mp-ink-900) 34%, transparent);overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
  .priv-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--mp-pink-500),var(--mp-phase-follicular-base),var(--mp-phase-luteal-base))}
  .priv-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--mp-pink-500) 18%, transparent);box-shadow:0 20px 46px -34px color-mix(in srgb, var(--mp-ink-900) 42%, transparent)}
  .priv-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:34px}
  .priv-icon{width:54px;height:54px;border-radius:16px;background:var(--mp-white);color:var(--mp-pink-500);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mp-pink-500) 10%, transparent),0 14px 28px -24px color-mix(in srgb, var(--mp-ink-900) 45%, transparent)}
  .priv-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .priv-status{display:inline-flex;align-items:center;min-height:30px;padding:8px 11px;border-radius:999px;background:var(--mp-white);color:var(--mp-ink-500);font-size:12px;font-weight:800;line-height:1;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mp-ink-900) 7%, transparent)}
  .priv-card h4{font-family:'DM Sans',system-ui,sans-serif;font-size:20px;font-weight:800;letter-spacing:0;line-height:1.15;margin:0 0 10px;color:var(--mp-ink-900)}
  .priv-card p{font-size:15px;line-height:1.55;margin:0;color:var(--mp-ink-500)}
  @media (prefers-reduced-motion:reduce){.priv-card{transition:none}.priv-card:hover{transform:none}}

  /* ============ DOWNLOAD CTA ============ */
  .download{background:linear-gradient(160deg,var(--mp-pink-100) 0%, var(--mp-pink-50) 60%, var(--mp-phase-follicular-bg) 100%);overflow:hidden}
  .download-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
  @media (max-width:900px){.download-grid{grid-template-columns:1fr}}
  .download h2 em{font-style:italic;color:var(--mp-pink-500)}
  .download p{margin-top:16px;font-size:18px;max-width:440px}
  .store-row{margin-top:32px}
  .store-btn{padding:12px 22px 12px 18px;background:var(--mp-ink-900);color:var(--mp-white);border-radius:16px;transition:transform .25s}
  .store-btn:hover{transform:translateY(-3px)}
  .store-btn .ico{width:24px;height:24px}
  .store-btn small{display:block;font-size:10.5px;opacity:.7;letter-spacing:.04em}
  .store-btn strong{display:block;font-family:'Playfair Display',serif;font-size:18px;font-weight:600;letter-spacing:-.01em}
  @media (max-width:760px){.download{display:none}}

  /* phone mockup */
  .phone-stage{position:relative;perspective:1200px}
  .phone{width:300px;height:610px;border-radius:48px;background:var(--mp-ink-900);padding:14px;box-shadow:0 60px 100px -30px color-mix(in srgb, var(--mp-pink-500) 40%, transparent), 0 30px 60px -20px color-mix(in srgb, var(--mp-ink-900) 30%, transparent);position:relative;transform:rotate(-6deg) rotateY(8deg);animation:phone-float 6s ease-in-out infinite;transform-style:preserve-3d}
  @keyframes phone-float{0%,100%{transform:rotate(-6deg) rotateY(8deg) translateY(0)}50%{transform:rotate(-6deg) rotateY(8deg) translateY(-14px)}}
  .phone-screen{width:100%;height:100%;border-radius:36px;background:linear-gradient(180deg,var(--mp-pink-100),var(--mp-white) 30%);overflow:hidden;position:relative}
  .phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:90px;height:24px;background:var(--mp-ink-900);border-radius:0 0 14px 14px;z-index:5}
  .phone-statusbar{padding:14px 22px 8px;font-size:11px;font-weight:600;color:var(--mp-ink-900)}
  .phone-content{padding:8px 18px 18px;gap:14px}
  .phone-greet{font-family:'Playfair Display',serif;font-size:17px;font-weight:500}
  .phone-greet .nm{color:var(--mp-pink-500);font-style:italic}
  .phone-card{background:var(--mp-white);border-radius:22px;padding:16px;box-shadow:0 4px 16px -8px color-mix(in srgb, var(--mp-pink-500) 20%, transparent);border:1px solid color-mix(in srgb, var(--mp-pink-500) 6%, transparent)}
  .phone-card .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mp-ink-500);font-weight:600}
  .phone-card .val{font-family:'Playfair Display',serif;font-size:30px;font-weight:600;color:var(--mp-pink-500);line-height:1;margin-top:6px}
  .phone-card .sub{font-size:11.5px;color:var(--mp-ink-500);margin-top:4px}
  .phone-mini-wheel{margin:6px 0}
  .phone-moods{gap:8px;margin-top:10px}
  .phone-mood{flex:1;min-height:30px;border-radius:12px;background:var(--mp-pink-50);font-size:8.5px;font-weight:800;line-height:1;white-space:nowrap;letter-spacing:-.01em;padding:0 3px}
  .phone-mood.sel{background:var(--mp-pink-200);outline:2px solid var(--mp-pink-500)}
  .phone-tabbar{padding:12px 0 18px;border-top:1px solid color-mix(in srgb, var(--mp-ink-900) 8%, transparent);background:var(--mp-white)}
  .phone-tab{width:28px;height:28px;border-radius:8px;background:var(--mp-pink-50)}
  .phone-tab.active{background:var(--mp-pink-500)}

  /* floating elements around phone */
  .float-card{position:absolute;background:var(--mp-white);border-radius:18px;padding:14px 16px;box-shadow:0 20px 60px -20px color-mix(in srgb, var(--mp-pink-500) 25%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--mp-ink-900) 8%, transparent);animation:float-y 5s ease-in-out infinite;z-index:3}
  .float-card .ico{width:36px;height:36px;border-radius:12px;color:var(--mp-white);flex-shrink:0}
  .float-card .lbl{font-size:11px;color:var(--mp-ink-500);font-weight:500}
  .float-card .val{font-size:13.5px;font-weight:700;font-family:'Playfair Display',serif}
  .float-card.fc1{top:14%;left:-2%;animation-delay:-1s}
  .float-card.fc2{bottom:18%;right:-6%;animation-delay:-3s}

  /* ============ FOOTER ============ */
  footer{padding:72px 0 34px;background:var(--mp-white);border-top:1px solid color-mix(in srgb, var(--mp-ink-900) 6%, transparent);position:relative;overflow:hidden}
  .foot-grid{display:grid;grid-template-columns:minmax(240px,1.45fr) repeat(4,minmax(128px,1fr));gap:40px;align-items:start}
  @media (max-width:1060px){.foot-grid{grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(150px,1fr))}}
  @media (max-width:760px){footer{padding:56px 0 28px}.foot-grid{grid-template-columns:1fr 1fr;gap:32px 24px}.foot-brand{grid-column:1/-1}}
  @media (max-width:520px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px 18px}.foot-brand{grid-column:1/-1}.foot-col h5{margin-bottom:14px}.foot-bottom{align-items:flex-start!important;flex-direction:column;gap:8px!important}}
  .foot-brand p{margin:18px 0 0;font-size:16px;max-width:310px;line-height:1.55;color:var(--mp-ink-500)}
  .foot-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
  .foot-social a{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb, var(--mp-pink-500) 16%, transparent);border-radius:999px;background:var(--mp-pink-50);color:var(--mp-pink-500);font-size:17px;text-decoration:none;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
  .foot-social a:hover,.foot-social a:focus-visible{transform:translateY(-2px);border-color:var(--mp-pink-500);background:var(--mp-pink-500);color:var(--mp-white)}
  .foot-social a:focus-visible{outline:3px solid var(--mp-pink-200);outline-offset:3px}
  .foot-col h5{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mp-ink-900);line-height:1.2;margin:0 0 22px}
  .foot-col ul{list-style:none}
  .foot-col a{font-family:'DM Sans',system-ui,sans-serif;font-size:16px;line-height:1.45;color:var(--mp-ink-500);text-decoration:none;transition:color .2s}
  .foot-col a:hover,.foot-col a:focus-visible{color:var(--mp-pink-500)}
  .foot-bottom{margin-top:56px;padding-top:28px;border-top:1px solid color-mix(in srgb, var(--mp-ink-900) 8%, transparent);font-family:'DM Sans',system-ui,sans-serif;font-size:13px;color:var(--mp-ink-500)}
  .foot-watermark{position:absolute;right:-80px;bottom:-80px;opacity:.04;pointer-events:none}

  /* press strip */
  .press{gap:10px;margin-top:48px;opacity:1}
  .press span:not(.dot){font-family:'DM Sans',system-ui,sans-serif;font-style:normal;font-size:12.5px;font-weight:800;color:var(--mp-pink-500);letter-spacing:0;background:var(--mp-white);border:1px solid color-mix(in srgb, var(--mp-pink-500) 14%, transparent);border-radius:999px;padding:9px 13px;box-shadow:0 10px 24px -20px color-mix(in srgb, var(--mp-ink-900) 28%, transparent);white-space:nowrap}
  .press span:first-child{background:var(--mp-white);border-color:color-mix(in srgb, var(--mp-pink-500) 28%, transparent);color:var(--mp-ink-900)}
  .press .dot{width:5px;height:5px;border-radius:50%;background:var(--mp-pink-500);opacity:.35}
  @media (max-width:520px){.press{justify-content:flex-start!important;gap:8px;margin-top:36px}.press .dot{display:none}.press span:not(.dot){font-size:12px;padding:8px 11px;background:var(--mp-white);box-shadow:0 8px 18px -16px color-mix(in srgb, var(--mp-ink-900) 30%, transparent)}.press span:first-child{color:var(--mp-pink-500);border-color:color-mix(in srgb, var(--mp-pink-500) 18%, transparent)}}