/* ============================================================
 * IntimPath app — consolidated global stylesheet
 * Source: frontend/intimpath_app/src/app/globals.css + all src/**/*.module.css
 * Assets resolved under /app (BASE_PATH). Plain global CSS (no Tailwind).
 * ============================================================ */

/* from app/globals.css */
/* Self-hosted Google Fonts (latin + latin-ext), downloaded from fonts.gstatic.com */
/* latin-ext */
@font-face {
  font-family: 'Faculty Glyphic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/app/fonts/faculty-glyphic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Faculty Glyphic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/app/fonts/faculty-glyphic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/app/fonts/inter-latin-ext-367ba69a.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/app/fonts/inter-latin-bec94a4d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/app/fonts/inter-latin-ext-367ba69a.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/app/fonts/inter-latin-bec94a4d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/app/fonts/inter-latin-ext-367ba69a.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/app/fonts/inter-latin-bec94a4d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/app/fonts/inter-latin-ext-367ba69a.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/app/fonts/inter-latin-bec94a4d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/app/fonts/lora-latin-ext-b74390d4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/app/fonts/lora-latin-ba465564.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/app/fonts/lora-latin-ext-b74390d4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/app/fonts/lora-latin-ba465564.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/app/fonts/lora-latin-ext-b74390d4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/app/fonts/lora-latin-ba465564.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/app/fonts/lora-latin-ext-b74390d4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/app/fonts/lora-latin-ba465564.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/app/fonts/oswald-latin-ext-5930b85b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/app/fonts/oswald-latin-c27e7c11.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/app/fonts/oswald-latin-ext-5930b85b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/app/fonts/oswald-latin-c27e7c11.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/app/fonts/oswald-latin-ext-5930b85b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/app/fonts/oswald-latin-c27e7c11.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk — variable 400–700, self-hosted. Distinctive geometric
   grotesque used for headings, buttons, and big numbers. */
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/app/fonts/spacegrotesk-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/app/fonts/spacegrotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato — brand font (self-hosted, latin + latin-ext, weights 400/700/900).
   CSS weight-matching maps Medium 500 -> 400, SemiBold 600 -> 700, ExtraBold 800 -> 900. */
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/app/fonts/lato-400-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/app/fonts/lato-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/app/fonts/lato-700-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/app/fonts/lato-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(/app/fonts/lato-900-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(/app/fonts/lato-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Dark theme */
  --bg-dark: #0E1011;
  --surface-dark: #1E2122;
  --surface-dark-2: #2A2D2E;
  --text-dark: #FFFFFF;
  --text-dark-muted: #B5B5B5;
  /* Primary accent — reference "Pulse" lime. Token name kept for cascade;
     the accent is now light, so text ON it must use --accent-ink (dark). */
  /* ================= BRAND PALETTE (Fonts_and_Colors style guide) =================
     PRIMARY:   Lime #BBF246 · Dark #192126
     GREYS:     #8B8F92 · #5E6468 · #384046 (text/icon scale) + #E0E1DE surface/frame
     SECONDARY: Purple #A48AED · Red #ED4747 · Amber #FCC46F · Blue #95CCE3 */
  --accent-orange: #BBF246;       /* LIME — primary: buttons, progress, selected, active */
  --accent-orange-hover: #ACE22F; /* lime, slightly darker for hover */
  --accent-rgb: 187, 242, 70;     /* accent as r,g,b for rgba() (ring gradients); ProgramTheme overrides per plan */
  --accent-ink: #192126;          /* dark text that sits on the lime accent */
  --accent-strong: #192126;       /* BLACK — accent text/labels/big numbers on light screens (was red) */
  --cta-secondary-dark: #EFEAE3;

  /* Secondary palette (available app-wide) */
  --color-purple: #A48AED;
  --color-red: #ED4747;
  --color-amber: #FCC46F;
  --color-blue: #95CCE3;
  --grey-mid: #8B8F92;
  --grey-dark: #5E6468;
  --grey-darker: #384046;

  /* Light theme — WHITE page. Flat design: cards/tiles are defined by a thin
     light-grey frame (--border-card), never by shadow. */
  --bg-light: #FFFFFF;
  --surface-light: #FFFFFF;
  --surface-beige: #E0E1DE;       /* light grey: secondary surfaces, chips, tracks, frames */
  --text-light: #192126;          /* primary dark text */
  --text-light-muted: #5E6468;    /* grey for muted/secondary text */
  --border-light: #E0E1DE;
  --border-card: #E0E1DE;         /* thin light-grey frame around flat cards/tiles */

  /* Badges / tags */
  --badge-burgundy: #ED4747;      /* SEXUAL HEALTH tags — red */
  --badge-gray: #E0E1DE;
  --badge-orange: #BBF246;        /* PREMIUM pill — lime */

  /* CTAs / accents on light */
  --cta-dark: #192126;            /* dark CTA */
  /* Green rule: frames use the Continue-button lime; fills use that same lime
     but very light + transparent. */
  --green-frame: #BBF246;                     /* = --accent-orange (continue button) */
  --green-fill: rgba(187, 242, 70, 0.20);     /* same lime, transparent + light */
  --callout-green: var(--green-fill);
  --callout-green-bar: #ED4747;               /* (unused) */
  --callout-green-frame: var(--green-frame);

  /* Modern shape tokens (reference) */
  --radius-pill: 999px;
  --radius-card: 22px;
  --radius-plate: 26px;
  /* Flat design — no depth. Kept as tokens so any consumer stays shadowless. */
  --shadow-soft: 0 4px 14px -8px rgba(20, 18, 14, 0.10);
  --shadow-card: 0 10px 26px -14px rgba(20, 18, 14, 0.12);

  /* Type families — reference is all clean sans, contrast via weight not serif.
     --font-serif kept as a token name (many modules reference it) but now maps
     to Inter so headings + lesson body read modern like the reference. */
  --font-display: var(--font-display-nire), 'Lato', system-ui, -apple-system, sans-serif;
  --font-serif: var(--font-display-nire), 'Lato', system-ui, -apple-system, sans-serif;
  --font-sans: 'Faculty Glyphic', 'Lato', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-light);
  color: var(--text-light);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* Mobile viewport frame */
.viewport {
  width: 100%;
  max-width: 375px;
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
}

.viewport-dark {
  background: var(--bg-dark);
  color: var(--text-dark);
}

.viewport-light {
  background: var(--bg-light);
  color: var(--text-light);
}

/* Reusable bottom spacer so scrollable content clears the fixed BottomNav
   (~63px + the device safe-area inset). */
.tab-bottom-pad {
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

/* from app/(tabs)/layout.module.css */
/* Tabs layout: a min-height flex column so BottomNav can sit naturally
   at the bottom of the document. Width is locked to the mobile frame so
   the nav stretches edge-to-edge of the 375px viewport. */

.m-layout .frame {
  width: 100%;
  max-width: 375px;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-light);
}

.m-layout .content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Inside the tabs frame, the page <main.viewport> shouldn't enforce its
   own 100dvh min-height — the frame already guarantees vertical fill,
   and the nav lives below the content. */
.m-layout .content :global(.viewport) {
  min-height: 0;
  margin: 0;
}

/* from components/chrome/BottomNav.module.css */
/* Fixed to the bottom of the mobile column so the nav is pinned to the screen
   bottom identically on every page — regardless of whether it's rendered inside
   the (tabs) frame or a screen's own <main>. Pages that show it add
   `tab-bottom-pad` so content clears the bar. */
/* Redesigned bar (Figma today-program-*): white sheet with rounded top
   corners, hairline top border and a soft upward shadow. Opaque all the way
   down so the translucent iOS Safari toolbar sits on solid white. */
.m-bottomnav .nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: var(--surface-light);
  border-top: 1px solid var(--border-light);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -5px 13px rgba(14, 14, 20, 0.04);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
}

.m-bottomnav .pill {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  padding: 9px 12px 12px;
}

/* Icon + 10px label; inactive grey, active near-black. Explicit greys so the
   per-program accent theme doesn't tint the nav. */
.m-bottomnav .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 44px;
  color: #969FA6;
  transition: color 0.15s ease;
}

.m-bottomnav .tabLabel {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.2;
}

.m-bottomnav .tab:active {
  opacity: 0.85;
}

.m-bottomnav .active {
  color: #192126;
}

/* from components/chrome/ScreenHeader.module.css */
.m-screenheader .header {
  padding: 14px 16px 12px;
}

.m-screenheader .row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.m-screenheader .iconBtn {
  background: transparent;
  border: 0;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.m-screenheader .dark .iconBtn { color: var(--text-dark); }
.m-screenheader .light .iconBtn { color: var(--text-light); }

.m-screenheader .center {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.m-screenheader .centerStepper {
  flex: 1;
  text-align: center;
}

.m-screenheader .section {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-light-muted);
  text-transform: uppercase;
}

.m-screenheader .dark .section { color: var(--text-dark-muted); }

.m-screenheader .titleQuiz {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.m-screenheader .titleStepper {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
}

.m-screenheader .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E0E1DE;
  overflow: hidden;
  flex-shrink: 0;
}

.m-screenheader .avatarInner {
  width: 100%;
  height: 100%;
  background: #E0E1DE;
}

/* from components/MembershipGate.module.css */
.m-membershipgate .scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(25, 33, 38, 0.55);
  backdrop-filter: blur(4px);
}

.m-membershipgate .card {
  width: 100%;
  max-width: 340px;
  background: var(--surface-light);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 28px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.m-membershipgate .lockBadge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--cta-dark);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.m-membershipgate .eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.m-membershipgate .title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-light);
  margin: 6px 0 8px;
  line-height: 1.2;
}

.m-membershipgate .body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-light-muted);
  margin: 0 0 20px;
}

.m-membershipgate .cta {
  width: 100%;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent-orange);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px;
  cursor: pointer;
}

.m-membershipgate .cta:active {
  opacity: 0.85;
}

.m-membershipgate .secondary {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-light-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 10px 2px;
  cursor: pointer;
}

/* from components/PremiumBanner.module.css */
.m-premiumbanner .banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border-card);
  text-decoration: none;
  margin-bottom: 16px;
}

.m-premiumbanner .grace {
  background: var(--green-fill);
  border-color: var(--green-frame);
}

.m-premiumbanner .expired {
  background: rgba(237, 71, 71, 0.1);
  border-color: var(--color-red);
}

.m-premiumbanner .icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m-premiumbanner .grace .icon {
  background: var(--accent-orange);
  color: var(--accent-ink);
}

.m-premiumbanner .expired .icon {
  background: var(--color-red);
  color: #fff;
}

.m-premiumbanner .text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m-premiumbanner .eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light-muted);
}

.m-premiumbanner .title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-light);
  line-height: 1.2;
}

.m-premiumbanner .body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-light-muted);
}

.m-premiumbanner .cta {
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.m-premiumbanner .grace .cta {
  background: var(--accent-orange);
  color: var(--accent-ink);
}

.m-premiumbanner .expired .cta {
  background: var(--color-red);
  color: #fff;
}

/* from components/screens/AccountSettingsScreen.module.css */
.m-accountsettingsscreen .root {
  min-height: 100dvh;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}

.m-accountsettingsscreen .topBar {
  padding: 14px 16px 4px;
}

.m-accountsettingsscreen .backChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--text-light);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  box-shadow: none;
}

.m-accountsettingsscreen .bodyPad {
  flex: 1;
  padding: 14px 18px 24px;
}

.m-accountsettingsscreen .heading {
  margin: 14px 0 12px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--text-light);
}

.m-accountsettingsscreen .emailInline {
  font-family: var(--font-serif);
  font-weight: 700;
}

.m-accountsettingsscreen .notYou {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--text-light);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  text-decoration: underline;
}

.m-accountsettingsscreen .subtle {
  margin: 0 0 18px;
  color: var(--text-light-muted);
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
}

.m-accountsettingsscreen .input {
  width: 100%;
  height: 56px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: #E0E1DE;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: 16px;
  outline: none;
}

.m-accountsettingsscreen .input:focus {
  box-shadow: none;
  border: 1px solid var(--green-frame);
}

.m-accountsettingsscreen .cta {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 12px;
  background: #E0E1DE;
  color: var(--text-light-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
}

.m-accountsettingsscreen .ctaActive {
  background: var(--cta-dark);
  color: #FFFFFF;
}

.m-accountsettingsscreen .codeRow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.m-accountsettingsscreen .codeBox {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #E0E1DE;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-light);
  outline: none;
}

.m-accountsettingsscreen .codeBox:focus {
  box-shadow: none;
  border: 1px solid var(--green-frame);
}

.m-accountsettingsscreen .storeNotice {
  background: #E0E1DE;
  padding: 18px 24px 22px;
  text-align: center;
}

.m-accountsettingsscreen .storeNoticeTitle {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
}

.m-accountsettingsscreen .storeNoticeLink {
  font-family: var(--font-serif);
  font-size: 15px;
  text-decoration: underline;
  color: var(--text-light);
}

.m-accountsettingsscreen .detailHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 14px;
}

.m-accountsettingsscreen .detailTitle {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  color: var(--text-light);
}

.m-accountsettingsscreen .coachTag {
  background: #192126;
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.m-accountsettingsscreen .detailCard {
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 18px 18px 12px;
  background: #FFFFFF;
}

.m-accountsettingsscreen .planName {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
}

.m-accountsettingsscreen .divider {
  height: 1px;
  background: var(--border-light);
  margin: 14px 0;
}

.m-accountsettingsscreen .detailRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.m-accountsettingsscreen .detailLabel {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-light);
}

.m-accountsettingsscreen .detailValue {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-light);
  text-align: right;
  word-break: break-word;
}

.m-accountsettingsscreen .cancelRow {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 8px;
}

.m-accountsettingsscreen .cancelLink {
  background: transparent;
  border: 0;
  padding: 4px 0;
  color: var(--text-light);
  font-family: var(--font-serif);
  font-size: 15px;
  text-decoration: underline;
}

.m-accountsettingsscreen .cancelOff {
  color: var(--text-light-muted);
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
}

/* Delete account — moved here from the profile page. Grey (not red) per design. */
.m-accountsettingsscreen .deleteAccountBtn {
  display: block;
  margin: 24px auto 8px;
  background: transparent;
  border: 0;
  padding: 8px;
  color: var(--text-light-muted);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

/* from components/screens/ActivatePremiumScreen.module.css */
.m-activatepremiumscreen .root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg-light);
  padding: 0 20px 24px;
}

.m-activatepremiumscreen .close {
  position: sticky;
  top: 0;
  align-self: flex-start;
  margin: 10px 0 0 -4px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  z-index: 2;
}

.m-activatepremiumscreen .body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.m-activatepremiumscreen .badgeIcon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 18px;
}

.m-activatepremiumscreen .eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.m-activatepremiumscreen .title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-light);
  margin: 6px 0 8px;
  line-height: 1.15;
}

.m-activatepremiumscreen .subtitle {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-light-muted);
  max-width: 300px;
  line-height: 1.4;
}

.m-activatepremiumscreen .priceRow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
}

.m-activatepremiumscreen .price {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-light);
}

.m-activatepremiumscreen .normal {
  font-size: 18px;
  color: var(--text-light-muted);
  text-decoration: line-through;
}

.m-activatepremiumscreen .badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-orange);
  padding: 4px 8px;
  border-radius: 6px;
}

.m-activatepremiumscreen .priceNote {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-light-muted);
  margin: 6px 0 0;
}

.m-activatepremiumscreen .features {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.m-activatepremiumscreen .feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-light);
}

.m-activatepremiumscreen .featureCheck {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.m-activatepremiumscreen .note {
  margin: 20px 0 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-light-muted);
  background: var(--green-fill);
  border: 1px solid var(--green-frame);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
}

.m-activatepremiumscreen .footer {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-activatepremiumscreen .cta {
  width: 100%;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent-orange);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 18px;
  cursor: pointer;
}

.m-activatepremiumscreen .cta:active {
  opacity: 0.85;
}

.m-activatepremiumscreen .decline {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-light-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
}

/* from components/screens/BackedByScienceScreen.module.css */
.m-backedbysciencescreen .root {
  min-height: 100dvh;
  background: var(--bg-light);
  padding-bottom: 32px;
}

.m-backedbysciencescreen .topBar {
  padding: 14px 16px 6px;
}

.m-backedbysciencescreen .backChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--text-light);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--border-card);
  box-shadow: none;
}

.m-backedbysciencescreen .heroCard {
  margin: 12px 16px 14px;
  background: var(--surface-beige);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.m-backedbysciencescreen .coachTag {
  background: #192126;
  color: #FFFFFF;
  padding: 8px 14px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.m-backedbysciencescreen .heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-light);
}

.m-backedbysciencescreen .section {
  padding: 14px 22px 8px;
}

.m-backedbysciencescreen .lead {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-light);
  text-align: center;
}

.m-backedbysciencescreen .subhead {
  margin: 18px 0 12px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent-strong);
  text-align: center;
}

.m-backedbysciencescreen .bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.m-backedbysciencescreen .bullet {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.m-backedbysciencescreen .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-orange);
  margin-top: 9px;
  flex-shrink: 0;
}

.m-backedbysciencescreen .bulletText {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-light);
}

.m-backedbysciencescreen .cite {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--accent-strong);
  line-height: 1.35;
}

.m-backedbysciencescreen .callout {
  margin: 18px 16px;
  padding: 22px 22px 24px;
  background: #192126;
  color: #FFFFFF;
  border-radius: 14px;
}

.m-backedbysciencescreen .calloutPreface {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: #E0E1DE;
  text-align: center;
}

.m-backedbysciencescreen .calloutAttribution {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: #E0E1DE;
  text-align: center;
}

.m-backedbysciencescreen .statRow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-backedbysciencescreen .statBlock {
  display: flex;
  align-items: center;
  gap: 14px;
}

.m-backedbysciencescreen .statValue {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--accent-orange);
  min-width: 70px;
}

.m-backedbysciencescreen .statText {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.35;
  color: #E0E1DE;
}

.m-backedbysciencescreen .bigStats {
  padding: 8px 22px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.m-backedbysciencescreen .bigStat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.m-backedbysciencescreen .bigCircle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-backedbysciencescreen .bigCircleValue {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  color: var(--accent-orange);
  letter-spacing: 0.02em;
}

.m-backedbysciencescreen .bigStatText {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
  color: var(--text-light);
  max-width: 240px;
}

.m-backedbysciencescreen .footnote {
  margin: 10px 0 0;
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--text-light-muted);
  text-align: center;
}

/* from components/screens/CancelSubscriptionScreen.module.css */
.m-cancelsubscriptionscreen .root {
  min-height: 100dvh;
  background: var(--bg-light);
  display: flex;
  flex-direction: column;
}

.m-cancelsubscriptionscreen .topBar {
  padding: 14px 16px 0;
}

.m-cancelsubscriptionscreen .backChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-light);
  box-shadow: 0 0 0 1px var(--border-light);
  cursor: pointer;
}

.m-cancelsubscriptionscreen .titleBar {
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-light);
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--border-light);
}

.m-cancelsubscriptionscreen .body {
  flex: 1;
  padding: 20px 18px 28px;
  display: flex;
  flex-direction: column;
}

.m-cancelsubscriptionscreen .bodyCenter {
  justify-content: center;
}

.m-cancelsubscriptionscreen .h1 {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-light);
}

.m-cancelsubscriptionscreen .h1center {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-light);
  text-align: center;
}

.m-cancelsubscriptionscreen .sub {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-light-muted);
}

.m-cancelsubscriptionscreen .subCenter {
  margin: 0 0 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-light-muted);
  text-align: center;
}

/* reasons */
.m-cancelsubscriptionscreen .reasons {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.m-cancelsubscriptionscreen .reason {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-light);
  cursor: pointer;
}

.m-cancelsubscriptionscreen .reason input {
  accent-color: var(--accent-orange);
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* buttons — pill CTAs matching the app design system (flat, Lato) */
.m-cancelsubscriptionscreen .btnPrimary,
.m-cancelsubscriptionscreen .btnGhost,
.m-cancelsubscriptionscreen .btnDanger {
  width: 100%;
  height: 54px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  margin-top: 12px;
}

.m-cancelsubscriptionscreen .btnPrimary {
  border: 0;
  background: var(--accent-orange);
  color: var(--accent-ink);
}

.m-cancelsubscriptionscreen .btnPrimary:hover:not(:disabled) {
  background: var(--accent-orange-hover);
}

.m-cancelsubscriptionscreen .btnPrimary:disabled {
  background: var(--surface-beige);
  color: var(--text-light-muted);
  cursor: not-allowed;
}

.m-cancelsubscriptionscreen .btnGhost {
  background: #ffffff;
  color: var(--text-light);
  border: 1px solid var(--border-card);
}

/* Destructive confirm — genuine danger (cancel), so it's red. */
.m-cancelsubscriptionscreen .btnDanger {
  border: 0;
  background: var(--color-red);
  color: #ffffff;
}

.m-cancelsubscriptionscreen .btnDanger:active {
  opacity: 0.9;
}

.m-cancelsubscriptionscreen .noThanks {
  display: block;
  margin: 6px auto 0;
  background: transparent;
  border: 0;
  color: var(--text-light-muted);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* save offer */
.m-cancelsubscriptionscreen .offerIcon {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 6px auto 20px;
  background: var(--surface-beige);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
}

.m-cancelsubscriptionscreen .offerBadge {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-orange);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.m-cancelsubscriptionscreen .subBox {
  background: var(--surface-light);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 18px;
  margin: 0 0 14px;
  text-align: center;
}

.m-cancelsubscriptionscreen .subBoxTitle {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.m-cancelsubscriptionscreen .expires {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-light);
}

.m-cancelsubscriptionscreen .expires s {
  color: var(--badge-burgundy);
}

.m-cancelsubscriptionscreen .expires strong {
  color: var(--callout-green-bar);
  font-weight: 700;
}

.m-cancelsubscriptionscreen .added {
  display: inline-block;
  margin: 8px 0 4px;
  background: var(--callout-green);
  color: var(--callout-green-bar);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
}

.m-cancelsubscriptionscreen .features {
  list-style: none;
  margin: 12px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-light);
  display: grid;
  gap: 10px;
  text-align: left;
}

.m-cancelsubscriptionscreen .features li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-light);
}

.m-cancelsubscriptionscreen .featCheck {
  color: var(--callout-green-bar);
  flex: 0 0 auto;
}

.m-cancelsubscriptionscreen .fineprint {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-light-muted);
  text-align: center;
  margin: 0 0 8px;
}

/* accepted */
.m-cancelsubscriptionscreen .checkBadge {
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* help */
.m-cancelsubscriptionscreen .helpList {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
  display: grid;
  gap: 18px;
}

.m-cancelsubscriptionscreen .helpList li {
  display: flex;
  gap: 12px;
}

.m-cancelsubscriptionscreen .helpIcon {
  color: var(--text-light);
  flex: 0 0 auto;
  margin-top: 2px;
}

.m-cancelsubscriptionscreen .helpH {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-light);
}

.m-cancelsubscriptionscreen .helpT {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-light-muted);
  margin-top: 2px;
}

/* canceled */
.m-cancelsubscriptionscreen .finalCard {
  background: var(--surface-light);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 26px 20px;
  margin: 8px 0 4px;
}

.m-cancelsubscriptionscreen .legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}

.m-cancelsubscriptionscreen .legalLink {
  background: transparent;
  border: 0;
  color: var(--text-light-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}


/* from components/screens/CourseComingSoonScreen.module.css */
.m-coursecomingsoonscreen .page {
  display: flex;
  flex-direction: column;
  background: var(--bg-light);
  overflow: hidden;
}

/* ----- Hero image ----- */
.m-coursecomingsoonscreen .hero {
  position: relative;
  flex: 0 0 auto;
  height: 250px;
  background-color: #E0E1DE;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.m-coursecomingsoonscreen .closeBtn {
  position: absolute;
  top: 18px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--surface-light);
  color: var(--text-light);
  cursor: pointer;
  box-shadow: none;
}

.m-coursecomingsoonscreen .videoTag {
  position: absolute;
  left: 16px;
  bottom: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ----- Content sheet ----- */
.m-coursecomingsoonscreen .sheet {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 22px 20px;
  background: var(--surface-light);
}

.m-coursecomingsoonscreen .title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-light);
}

.m-coursecomingsoonscreen .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-light-muted);
}

.m-coursecomingsoonscreen .dot {
  color: var(--text-light-muted);
}

/* ----- Coming-soon note ----- */
.m-coursecomingsoonscreen .soon {
  margin-top: 28px;
  padding: 20px;
  border-radius: 14px;
  background: var(--surface-beige);
}

.m-coursecomingsoonscreen .soonTag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
}

.m-coursecomingsoonscreen .soonText {
  margin: 12px 0 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-light);
}

/* from components/screens/CustomKegelWorkoutScreen.module.css */
/* "+ ADD EXERCISE" button under the exercise list (intro stage). */
.m-customkegelworkoutscreen .addBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 6px 0 4px;
  padding: 16px;
  border: none;
  border-radius: 12px;
  background: var(--surface-beige);
  color: var(--text-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.m-customkegelworkoutscreen .addBtn:hover {
  background: #E0E1DE;
}

/* ----- Add-exercises bottom sheet ----- */
.m-customkegelworkoutscreen .addScrim {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.45);
}

.m-customkegelworkoutscreen .addSheet {
  display: flex;
  flex-direction: column;
  max-height: 86%;
  padding: 8px 20px calc(16px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--surface-light);
}

.m-customkegelworkoutscreen .addHeader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border-light);
}

.m-customkegelworkoutscreen .addTitle {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--text-light);
}

.m-customkegelworkoutscreen .addClose {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--surface-beige);
  color: var(--text-light);
  cursor: pointer;
}

.m-customkegelworkoutscreen .addList {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}

.m-customkegelworkoutscreen .addRow {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 2px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.m-customkegelworkoutscreen .addThumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #E0E1DE;
  color: var(--text-light);
}

.m-customkegelworkoutscreen .addBody {
  flex: 1 1 auto;
  min-width: 0;
}

.m-customkegelworkoutscreen .addExTitle {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-light);
}

.m-customkegelworkoutscreen .addExMeta {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-light-muted);
}

.m-customkegelworkoutscreen .addRadio {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 2px solid #E0E1DE;
  border-radius: 50%;
  background: transparent;
}

.m-customkegelworkoutscreen .addRadioOn {
  border-color: var(--accent-strong);
  background:
    radial-gradient(circle, var(--accent-orange) 0 6px, transparent 7px);
}

.m-customkegelworkoutscreen .addSaveBtn {
  flex: 0 0 auto;
  width: 100%;
  height: 52px;
  margin-top: 8px;
  border: none;
  border-radius: 12px;
  background: #E0E1DE;
  color: var(--text-light-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: not-allowed;
}

.m-customkegelworkoutscreen .addSaveBtnActive {
  background: var(--accent-orange);
  color: var(--accent-ink);
  cursor: pointer;
  box-shadow: none;
}

.m-customkegelworkoutscreen .addSaveBtnActive:active {
  transform: scale(0.99);
}

/* from components/screens/ExerciseInstructionModal.module.css */
.m-exerciseinstructionmodal .modal {
  height: 100dvh;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.m-exerciseinstructionmodal .header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px 12px;
}

.m-exerciseinstructionmodal .title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text-light);
  text-align: center;
}

.m-exerciseinstructionmodal .closeButton {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-beige);
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.m-exerciseinstructionmodal .body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px 24px;
}

.m-exerciseinstructionmodal .diagram {
  background: var(--surface-beige);
  border-radius: 12px;
  padding: 18px 16px;
  margin: 8px 0 20px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-exerciseinstructionmodal .diagramSlot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-exerciseinstructionmodal .diagramCaption {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-light-muted);
  text-align: center;
}

.m-exerciseinstructionmodal .sectionLabel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin: 4px 0 12px;
}

.m-exerciseinstructionmodal .steps {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-exerciseinstructionmodal .step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.m-exerciseinstructionmodal .stepNumber {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.m-exerciseinstructionmodal .stepText {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-light);
  margin: 0;
}

.m-exerciseinstructionmodal .adjust {
  margin-top: 8px;
}

.m-exerciseinstructionmodal .adjustRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-beige);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 4px;
}

.m-exerciseinstructionmodal .adjustLabel {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-light);
}

.m-exerciseinstructionmodal .adjustValue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-light);
}

/* Naturally pinned by the flex layout — `.body` scrolls internally above. */
.m-exerciseinstructionmodal .footer {
  flex-shrink: 0;
  padding: 12px 20px 24px;
  background: var(--surface-light);
}

.m-exerciseinstructionmodal .saveButton {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 999px;
  background: var(--border-light);
  color: var(--text-light-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  cursor: not-allowed;
}

/* from components/screens/ExploreScreen.module.css */
.m-explorescreen .page {
  min-height: 100dvh;
  background: var(--bg-light);
  color: var(--text-light);
  padding: 12px 0 calc(84px + env(safe-area-inset-bottom));
}

.m-explorescreen .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 0;
}

.m-explorescreen .title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
}

.m-explorescreen .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E0E1DE;
  overflow: hidden;
  flex-shrink: 0;
}

.m-explorescreen .avatarInner {
  width: 100%;
  height: 100%;
  background: #E0E1DE;
}

.m-explorescreen .mainProgramsLabel {
  margin: 18px 16px 12px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
}

.m-explorescreen .hero {
  margin: 0 16px;
  display: flex;
  align-items: stretch;
  background: var(--surface-light);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
  border-radius: 22px;
  overflow: hidden;
  height: 140px;
  text-decoration: none;
  color: inherit;
}

.m-explorescreen .heroLeft {
  flex: 1;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.m-explorescreen .heroTitle {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
}

.m-explorescreen .heroImg {
  width: 50%;
  background-color: #E0E1DE;
  background-size: cover;
  background-position: center;
}

.m-explorescreen .heroBlurb {
  margin: 12px 16px 6px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-light);
}

.m-explorescreen .heroMeta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 16px 18px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 14px;
}

.m-explorescreen .metaItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-light-muted);
}

/* Render the 📅/💪 meta icons as solid black (monochrome emoji theme). */
.m-explorescreen .metaItem [aria-hidden] {
}

.m-explorescreen .sectionLabel {
  margin: 18px 16px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-light-muted);
  text-transform: uppercase;
  font-weight: 600;
}

/* Horizontal scroll carousels */
.m-explorescreen .carousel,
.m-explorescreen .coursesRow {
  display: flex;
  gap: 10px;
  /* Inset the whole row to the hero's 16px gutters so it occupies the same
     on-screen width as the Last Longer card. Cards keep their own size and
     scroll within this region; the right peek clips at the gutter instead of
     bleeding to the screen edge. (margin, not padding, so the scroll viewport
     itself is inset — no scroll-padding/auto-scroll quirk.) */
  margin: 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.m-explorescreen .carousel::-webkit-scrollbar,
.m-explorescreen .coursesRow::-webkit-scrollbar { display: none; }

.m-explorescreen .recCard {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--surface-light);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
  border-radius: 22px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* Coming-soon programs: dimmed + inert, mirroring ProgramPickerSheet. */
.m-explorescreen .cardDisabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.m-explorescreen .comingSoonTag {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
}

.m-explorescreen .recHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.m-explorescreen .recImg {
  width: 100px;
  height: 80px;
  background-color: #E0E1DE;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  flex-shrink: 0;
}

.m-explorescreen .recTitle {
  margin: 10px 0 4px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
}

.m-explorescreen .recBlurb {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-light);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.m-explorescreen .recMeta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

/* Courses */
.m-explorescreen .courseCard {
  flex: 0 0 175px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

.m-explorescreen .courseImg {
  width: 100%;
  height: 100px;
  background-color: #E0E1DE;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  position: relative;
}

.m-explorescreen .courseTag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-red);
  color: #FFFFFF;
  padding: 4px 8px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.m-explorescreen .courseTitle {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}

.m-explorescreen .courseMeta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-light-muted);
}

.m-explorescreen .courseTagText {
  font-weight: 600;
}

.m-explorescreen .tag_burgundy { color: var(--badge-burgundy); }
.m-explorescreen .tag_orange { color: var(--accent-strong); }

.m-explorescreen .dot { color: var(--text-light-muted); }

/* Practices */
.m-explorescreen .practicesRow {
  display: flex;
  gap: 10px;
  margin: 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.m-explorescreen .practicesRow::-webkit-scrollbar { display: none; }

.m-explorescreen .practiceTile {
  flex: 0 0 175px;
  height: 96px;
  scroll-snap-align: start;
  border-radius: 16px;
  background-color: #E0E1DE;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 10px;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
}

.m-explorescreen .practiceTile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.05) 100%);
  border-radius: 10px;
}

.m-explorescreen .practiceTitle {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.2;
}

/* ---- Female Explore --------------------------------------------------- */
/* Section headers ("All programs", "Self-Exploration", …) — dark serif,
   mixed-case, matching the reference. */
.m-explorescreen .fSectionHead {
  margin: 22px 16px 12px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  color: var(--text-light);
}

/* "All programs" carousel — landscape program cards (image with badge + title
   baked in) over a live blurb + meta line. */
.m-explorescreen .fProgRow {
  display: flex;
  gap: 14px;
  margin: 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-explorescreen .fProgRow::-webkit-scrollbar { display: none; }

.m-explorescreen .fProgCard {
  flex: 0 0 266px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.m-explorescreen .fProgCardInert { cursor: default; }

/* Themed program-card art — filled with the programme's own colour theme
   (original palette), with a live day-badge, optional Completed pill, and
   title over it. No reference imagery. */
.m-explorescreen .fProgArt {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

.m-explorescreen .fProgBadge {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent-strong, #C6395E);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 5px 10px;
  border-radius: 999px;
}

.m-explorescreen .fProgDone {
  align-self: flex-start;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: #2E7D46;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 999px;
}

.m-explorescreen .fProgTitle {
  margin: auto 0 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.12;
  color: #FFFFFF;
}

.m-explorescreen .fProgBlurb {
  margin: 11px 2px 6px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-light);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.m-explorescreen .fProgMeta {
  margin: 0 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-light-muted);
}

/* Content-card carousels — portrait cards, image only (badge + title baked in). */
.m-explorescreen .fCardRow {
  display: flex;
  gap: 12px;
  margin: 0 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-explorescreen .fCardRow::-webkit-scrollbar { display: none; }

.m-explorescreen .fCard {
  flex: 0 0 152px;
  scroll-snap-align: start;
}

.m-explorescreen .fCardImg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  background: var(--surface-beige);
}

/* from components/screens/FaqScreen.module.css */
.m-faqscreen .root {
  min-height: 100dvh;
  background: var(--bg-light);
  padding-bottom: 40px;
}

.m-faqscreen .topBar {
  padding: 14px 16px 6px;
}

.m-faqscreen .backChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--text-light);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--border-card);
  box-shadow: none;
}

.m-faqscreen .title {
  margin: 14px 18px 8px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  color: var(--text-light);
}

.m-faqscreen .list {
  list-style: none;
  padding: 0;
  margin: 8px 16px 0;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid var(--border-card);
  box-shadow: none;
  overflow: hidden;
}

.m-faqscreen .row {
  border-top: 1px solid var(--border-light);
}

.m-faqscreen .row:first-child { border-top: 0; }

.m-faqscreen .rowButton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--text-light);
}

.m-faqscreen .question {
  flex: 1;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
}

.m-faqscreen .toggleIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
}

.m-faqscreen .answer {
  padding: 0 16px 16px;
}

.m-faqscreen .answerText {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-light);
}

.m-faqscreen .group {
  margin-top: 12px;
}

.m-faqscreen .groupTitle {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-light);
}

.m-faqscreen .groupSteps {
  padding-left: 22px;
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-light);
}

/* from components/screens/FirstKegelWorkoutScreen.module.css */
/* ============================================================ */
/*  Intro stage                                                   */
/* ============================================================ */

.m-firstkegelworkoutscreen .intro {
  min-height: 100dvh;
  background: var(--surface-light);
  display: flex;
  flex-direction: column;
  padding-bottom: 100px;
}

/* ===== Exercise-details layout (reference "31_Exercise Details") ===== */

/* Full-bleed hero image with a back arrow overlaid top-left. */
.m-firstkegelworkoutscreen .heroFull {
  position: relative;
  width: 100%;
}

.m-firstkegelworkoutscreen .heroImage {
  width: 100%;
  height: 200px;
  background-color: #E0E1DE;
  background-size: cover;
  background-position: center;
}

.m-firstkegelworkoutscreen .backBtn {
  position: absolute;
  top: 16px;
  left: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: #192126;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

/* White stats card floating over the bottom of the hero image. */
.m-firstkegelworkoutscreen .statsCard {
  position: relative;
  z-index: 1;
  margin: -34px 20px 0;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 16px 12px;
  display: flex;
  align-items: center;
}

.m-firstkegelworkoutscreen .statCell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.m-firstkegelworkoutscreen .statCellIcon {
  font-size: 22px;
  line-height: 1;
  /* render the ⏱️/💪 stat icons as solid black to match the monochrome emoji theme */
}

.m-firstkegelworkoutscreen .statCellValue {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
  white-space: nowrap;
}

.m-firstkegelworkoutscreen .statCellSep {
  width: 1px;
  align-self: stretch;
  background: var(--border-card);
  margin: 2px 4px;
}

/* ----- Chips row (Level / Type / Focus) ----- */
.m-firstkegelworkoutscreen .chipsRow {
  display: flex;
  gap: 10px;
  padding: 18px 20px 0;
}

.m-firstkegelworkoutscreen .chip {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m-firstkegelworkoutscreen .chipLabel {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-light-muted);
  text-align: center;
}

.m-firstkegelworkoutscreen .chipValue {
  background: var(--cta-dark);
  border-radius: 8px;
  padding: 10px 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: #FFFFFF;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- Detail title + description ----- */
.m-firstkegelworkoutscreen .detail {
  padding: 18px 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-firstkegelworkoutscreen .overviewTitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .overviewDesc {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-light-muted);
}

.m-firstkegelworkoutscreen .overviewNote {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-light-muted);
}

/* ----- Content sections ----- */
.m-firstkegelworkoutscreen .content {
  padding: 22px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-firstkegelworkoutscreen .sectionLabel {
  margin: 12px 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .goalText {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-light);
}

/* ----- Stretching toggle card ----- */
.m-firstkegelworkoutscreen .toggleCard {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-firstkegelworkoutscreen .toggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.m-firstkegelworkoutscreen .toggleTitle {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .toggleExtra {
  color: var(--text-light-muted);
  font-weight: 500;
}

.m-firstkegelworkoutscreen .toggle {
  width: 50px;
  height: 28px;
  border-radius: 999px;
  background: #E0E1DE;
  border: 0;
  position: relative;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease;
}

.m-firstkegelworkoutscreen .toggle.toggleOn {
  background: var(--accent-orange);
}

.m-firstkegelworkoutscreen .toggleKnob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
  transition: left 200ms ease;
}

.m-firstkegelworkoutscreen .toggle.toggleOn .toggleKnob {
  left: 25px;
}

.m-firstkegelworkoutscreen .toggleHelp,
.m-firstkegelworkoutscreen .tipHelp {
  display: flex;
  gap: 8px;
  background: #E0E1DE;
  border-radius: 10px;
  padding: 10px 12px;
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .toggleHelpIcon {
  color: var(--text-light-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ----- Exercise rows ----- */
.m-firstkegelworkoutscreen .exList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.m-firstkegelworkoutscreen .exRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

/* Leading completion indicator — empty outline circle by default, filled
   lime with a check when the exercise is done (matches Today's lime checks). */
.m-firstkegelworkoutscreen .exCheck {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-card);
  background: transparent;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.m-firstkegelworkoutscreen .exCheckDone {
  border: 0;
  background: var(--accent-orange);
  color: var(--accent-ink);
}

.m-firstkegelworkoutscreen .exThumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #E0E1DE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.m-firstkegelworkoutscreen .exBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m-firstkegelworkoutscreen .exTitle {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .exMeta {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-light-muted);
  text-transform: uppercase;
}

.m-firstkegelworkoutscreen .exChev {
  color: var(--text-light-muted);
}

/* ----- Tips section ----- */
.m-firstkegelworkoutscreen .tipRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.m-firstkegelworkoutscreen .tipTitle {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .guideLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.m-firstkegelworkoutscreen .markCompleteBtn {
  margin-top: 14px;
  width: 100%;
  height: 50px;
  background: #E0E1DE;
  color: var(--text-light);
  border: 0;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* ----- Bottom START WORKOUT ----- */
.m-firstkegelworkoutscreen .footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 375px;
  padding: 14px 20px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, #fff 30%);
  z-index: 10;
}

.m-firstkegelworkoutscreen .startBtn {
  width: 100%;
  height: 56px;
  background: var(--accent-orange);
  color: var(--accent-ink);
  border: 0;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: none;
}

.m-firstkegelworkoutscreen .startBtn:active {
  transform: scale(0.99);
}

/* ============================================================ */
/*  Warm-up video stage                                           */
/* ============================================================ */

.m-firstkegelworkoutscreen .warmup {
  position: relative;
  min-height: 100dvh;
  height: 100dvh;
  background: #000;
  color: #fff;
  overflow: hidden;
}

.m-firstkegelworkoutscreen .video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  background: #000;
}

.m-firstkegelworkoutscreen .scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 18%),
    linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%);
}

.m-firstkegelworkoutscreen .warmupTop {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.m-firstkegelworkoutscreen .warmupRoundBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.m-firstkegelworkoutscreen .warmupBottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 20px 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-firstkegelworkoutscreen .warmupTitle {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
}

.m-firstkegelworkoutscreen .warmupSubtitle {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.m-firstkegelworkoutscreen .warmupSeek {
  position: relative;
  width: 100%;
  height: 4px;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  cursor: pointer;
  margin-top: 6px;
}

.m-firstkegelworkoutscreen .warmupSeekFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent-orange);
  border-radius: 2px;
}

.m-firstkegelworkoutscreen .warmupSeekTimes {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}

.m-firstkegelworkoutscreen .warmupControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 8px;
}

.m-firstkegelworkoutscreen .warmupSkipBtn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-firstkegelworkoutscreen .warmupSkipBtn span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -42%);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
}

.m-firstkegelworkoutscreen .warmupBigBtn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #192126;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-firstkegelworkoutscreen .warmupSkip {
  margin-top: 10px;
  align-self: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* ============================================================ */
/*  Congrats modal over player                                    */
/* ============================================================ */

.m-firstkegelworkoutscreen .playerHost {
  position: relative;
  width: 100%;
  min-height: 100dvh;
}

.m-firstkegelworkoutscreen .modalScrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  z-index: 50;
  pointer-events: auto;
}

.m-firstkegelworkoutscreen .modalCard {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 18px 18px 18px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.m-firstkegelworkoutscreen .modalIllustration {
  background: #E0E1DE;
  border-radius: 14px;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin-bottom: 14px;
}

.m-firstkegelworkoutscreen .stretchSvg {
  max-width: 220px;
  max-height: 220px;
}

.m-firstkegelworkoutscreen .modalTitle {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .modalBody {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .letsGoBtn {
  width: 100%;
  height: 52px;
  background: var(--accent-orange);
  color: var(--accent-ink);
  border: 0;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: none;
}

.m-firstkegelworkoutscreen .letsGoBtn:active {
  transform: scale(0.99);
}

.m-firstkegelworkoutscreen .playerStub {
  width: 100%;
  min-height: 100dvh;
  background: var(--surface-light);
}

.m-firstkegelworkoutscreen .markCompleteBtnDone {
  background: #192126;
  color: #FFFFFF;
}

/* ============================================================ */
/*  Exercise detail sheet                                         */
/* ============================================================ */

/* Scrim is `position: fixed` so the sheet's bottom always meets the bottom
 * of the visible window — no matter where the user has scrolled. Constrained
 * to the 375px phone-frame width and centered, so on wide desktop previews
 * the dim doesn't spill past the simulated phone. */
.m-firstkegelworkoutscreen .detailScrim {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 375px;
  background: rgba(0, 0, 0, 0.42);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 60;
  animation: detailScrimFadeIn 220ms ease-out both;
}

/* Sheet slides up from the bottom and leaves ~70px of the underlying
 * screen visible at the top — matches the iOS reference. Height is sized
 * relative to the scrim (which now matches the phone viewport), so the
 * sheet can never grow taller than the page itself. Width is capped at
 * the phone viewport's 375px so the popup never exceeds the page on wider
 * previews. `overscroll-behavior: contain` keeps swipes inside the sheet
 * from chaining into the page underneath. */
.m-firstkegelworkoutscreen .detailSheet {
  width: 100%;
  max-width: 375px;
  height: calc(100% - 70px);
  max-height: calc(100% - 70px);
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 18px 20px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  animation: detailSheetSlideUp 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes detailScrimFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes detailSheetSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .m-firstkegelworkoutscreen .detailScrim,
  .m-firstkegelworkoutscreen .detailSheet { animation: none; }
}

.m-firstkegelworkoutscreen .detailHeader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.m-firstkegelworkoutscreen .detailTitle {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .detailClose {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: #E0E1DE;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-firstkegelworkoutscreen .detailIllustration {
  background: var(--green-fill);
  border-radius: 14px;
  padding: 18px 14px;
  margin-bottom: 18px;
}

.m-firstkegelworkoutscreen .diagramSvg {
  width: 100%;
  height: auto;
  display: block;
}

.m-firstkegelworkoutscreen .diagramText {
  font-family: var(--font-serif);
  font-size: 12px;
  fill: var(--text-light);
}

.m-firstkegelworkoutscreen .detailSection {
  margin: 12px 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .detailSteps {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-firstkegelworkoutscreen .detailStep {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .detailStepNum {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m-firstkegelworkoutscreen .detailIntensity {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #E0E1DE;
  border: 0;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  margin-bottom: 14px;
}

.m-firstkegelworkoutscreen .detailIntensityLabel {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
}

/* Inline intensity "dial" (slider) — replaces the old pop-up picker. */
.m-firstkegelworkoutscreen .intensityDial {
  margin-top: 6px;
  padding: 4px 6px 2px;
}

.m-firstkegelworkoutscreen .intensityDialTop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.m-firstkegelworkoutscreen .intensityDialValue {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
}

.m-firstkegelworkoutscreen .intensitySlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #E0E1DE;
  outline: none;
  margin: 0;
}

.m-firstkegelworkoutscreen .intensitySlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-orange);
  border: 3px solid #fff;
  box-shadow: none;
  cursor: pointer;
}

.m-firstkegelworkoutscreen .intensitySlider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-orange);
  border: 3px solid #fff;
  box-shadow: none;
  cursor: pointer;
}

.m-firstkegelworkoutscreen .intensityTicks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 4px;
}

.m-firstkegelworkoutscreen .intensityTick {
  flex: 1;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-light-muted);
  line-height: 1.2;
}

.m-firstkegelworkoutscreen .intensityTick:first-child { text-align: left; }
.m-firstkegelworkoutscreen .intensityTick:last-child { text-align: right; }

.m-firstkegelworkoutscreen .detailIntensityValue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-light);
}

.m-firstkegelworkoutscreen .detailSaveBtn {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 10px;
  background: #E0E1DE;
  color: var(--text-light-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: not-allowed;
}

.m-firstkegelworkoutscreen .detailSaveBtnActive {
  background: var(--accent-orange);
  color: var(--accent-ink);
  cursor: pointer;
  box-shadow: none;
}

.m-firstkegelworkoutscreen .detailSaveBtnActive:active {
  transform: scale(0.99);
}

/* Custom Kegel builder — remove-exercise affordance under SAVE. */
.m-firstkegelworkoutscreen .detailRemoveBtn {
  width: 100%;
  height: 46px;
  margin-top: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ED4747;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* ----- Level picker sheet (nested) ----- */
.m-firstkegelworkoutscreen .pickerScrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 70;
}

.m-firstkegelworkoutscreen .pickerSheet {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 14px 18px 22px;
}

.m-firstkegelworkoutscreen .pickerList {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m-firstkegelworkoutscreen .pickerItem {
  display: flex;
  justify-content: center;
}

.m-firstkegelworkoutscreen .pickerBtn {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 12px 16px;
  border-radius: 999px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--text-light-muted);
  cursor: pointer;
}

.m-firstkegelworkoutscreen .pickerBtnActive {
  background: #E0E1DE;
  color: var(--text-light);
  font-weight: 700;
}

.m-firstkegelworkoutscreen .pickerSelectBtn {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: #E0E1DE;
  color: var(--text-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* ============================================================ */
/*  Practice complete (feedback)                                  */
/* ============================================================ */

.m-firstkegelworkoutscreen .complete {
  min-height: 100dvh;
  background: var(--surface-light);
  display: flex;
  flex-direction: column;
  padding: 14px 20px 22px;
}

.m-firstkegelworkoutscreen .completeTop {
  display: flex;
  justify-content: flex-end;
}

.m-firstkegelworkoutscreen .completeClose {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-firstkegelworkoutscreen .completeBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 14px;
}

.m-firstkegelworkoutscreen .completeRing {
  margin-top: 18px;
  margin-bottom: 24px;
}

.m-firstkegelworkoutscreen .completeTitle {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.02em;
  color: var(--text-light);
  text-align: center;
}

.m-firstkegelworkoutscreen .completeSubtitle {
  margin: 0 0 26px;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--text-light-muted);
  text-align: center;
}

.m-firstkegelworkoutscreen .completeOptions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-firstkegelworkoutscreen .completeOption {
  width: 100%;
  background: #E0E1DE;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text-light);
  transition: border-color 150ms ease, background 150ms ease;
}

.m-firstkegelworkoutscreen .completeOption:hover {
  background: #D7D9D4;
}

.m-firstkegelworkoutscreen .completeOptionActive {
  /* Selected = themed frame only (no fill): keep the unselected card
     background and just show the accent-coloured border. */
  border-color: var(--green-frame);
  background: #E0E1DE;
  color: var(--accent-strong);
}

.m-firstkegelworkoutscreen .completeOptionLabel {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  text-align: left;
}

.m-firstkegelworkoutscreen .completeFooter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
}

.m-firstkegelworkoutscreen .completeContinue {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 12px;
  background: #E0E1DE;
  color: var(--text-light-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  cursor: not-allowed;
}

.m-firstkegelworkoutscreen .completeContinue:not(:disabled) {
  background: var(--accent-orange);
  color: var(--accent-ink);
  cursor: pointer;
  box-shadow: none;
}

.m-firstkegelworkoutscreen .completeContinue:not(:disabled):active {
  transform: scale(0.99);
}

.m-firstkegelworkoutscreen .completeExit {
  width: 100%;
  height: 50px;
  border: 0;
  background: transparent;
  color: var(--text-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* ----- Dark variant (Resistance Kegel completion) -----
 * Compound selectors keep the layout shared with the light variant and only
 * recolor the surfaces / text. Toggle by adding `.completeDark` next to
 * `.complete` on the root <main>. */
.m-firstkegelworkoutscreen .completeDark {
  background: #192126;
  color: #fff;
}

.m-firstkegelworkoutscreen .completeDark .completeClose {
  color: var(--text-light-muted);
}

.m-firstkegelworkoutscreen .completeDark .completeTitle {
  color: var(--accent-orange);
}

.m-firstkegelworkoutscreen .completeDark .completeSubtitle {
  color: var(--text-light-muted);
}

.m-firstkegelworkoutscreen .completeDark .completeOption {
  background: #384046;
  color: #FFFFFF;
  border-color: transparent;
}

.m-firstkegelworkoutscreen .completeDark .completeOption:hover {
  background: #384046;
}

.m-firstkegelworkoutscreen .completeDark .completeOptionActive {
  /* Selected = themed frame only (no fill): keep the unselected card
     background and just show the accent-coloured border. */
  background: #384046;
  border-color: var(--accent-orange);
  color: #fff;
}

.m-firstkegelworkoutscreen .completeDark .completeContinue {
  background: #192126;
  color: var(--text-light-muted);
}

.m-firstkegelworkoutscreen .completeDark .completeContinue:not(:disabled) {
  background: var(--accent-orange);
  color: var(--accent-ink);
}

.m-firstkegelworkoutscreen .completeDark .completeExit {
  color: #FFFFFF;
}

/* ============================================================ */
/*  Unsaved-changes confirmation (inside detail sheet)            */
/* ============================================================ */

.m-firstkegelworkoutscreen .unsavedScrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 90;
}

.m-firstkegelworkoutscreen .unsavedCard {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 24px 20px 20px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.m-firstkegelworkoutscreen .unsavedTitle {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.25;
  color: var(--text-light);
  text-align: left;
}

.m-firstkegelworkoutscreen .unsavedCancel {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 10px;
  background: #E0E1DE;
  color: var(--text-light-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.m-firstkegelworkoutscreen .unsavedDiscard {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 10px;
  background: var(--cta-dark);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  cursor: pointer;
}

/* ============================================================ */
/*  Quit confirmation modal                                       */
/* ============================================================ */

.m-firstkegelworkoutscreen .quitScrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  z-index: 80;
}

.m-firstkegelworkoutscreen .quitCard {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: none;
}

.m-firstkegelworkoutscreen .quitTitle {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--text-light);
  text-align: center;
}

.m-firstkegelworkoutscreen .quitBody {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-light);
  text-align: center;
}

.m-firstkegelworkoutscreen .quitContinueBtn {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 10px;
  background: var(--accent-orange);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  margin-bottom: 10px;
  box-shadow: none;
}

.m-firstkegelworkoutscreen .quitContinueBtn:active {
  transform: scale(0.99);
}

.m-firstkegelworkoutscreen .quitLeaveBtn {
  width: 100%;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-light-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* from components/screens/KegelUltimatePaywallScreen.module.css */
.m-kegelultimatepaywallscreen .root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg-light);
  padding: 0 20px 24px;
}

.m-kegelultimatepaywallscreen .close {
  position: sticky;
  top: 0;
  align-self: flex-start;
  margin: 10px 0 0 -4px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  z-index: 2;
}

.m-kegelultimatepaywallscreen .body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.m-kegelultimatepaywallscreen .lockBadge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #192126;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 18px;
}

.m-kegelultimatepaywallscreen .eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #BBF246;
}

.m-kegelultimatepaywallscreen .title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-light);
  margin: 6px 0 8px;
  line-height: 1.15;
}

.m-kegelultimatepaywallscreen .subtitle {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-light-muted);
  max-width: 300px;
  line-height: 1.4;
}

.m-kegelultimatepaywallscreen .priceRow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
}

.m-kegelultimatepaywallscreen .price {
  font-size: 32px;
  font-weight: 800;
  color: #192126;
}

.m-kegelultimatepaywallscreen .normal {
  font-size: 18px;
  color: var(--text-light-muted);
  text-decoration: line-through;
}

.m-kegelultimatepaywallscreen .badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-orange);
  padding: 4px 8px;
  border-radius: 6px;
}

.m-kegelultimatepaywallscreen .priceNote {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-light-muted);
  margin: 6px 0 0;
}

.m-kegelultimatepaywallscreen .features {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.m-kegelultimatepaywallscreen .feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-light);
}

.m-kegelultimatepaywallscreen .featureCheck {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #BBF246;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.m-kegelultimatepaywallscreen .footer {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-kegelultimatepaywallscreen .cta {
  width: 100%;
  border: none;
  border-radius: 14px;
  background: #192126;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  padding: 16px;
  cursor: pointer;
}

.m-kegelultimatepaywallscreen .cta:active {
  opacity: 0.9;
}

.m-kegelultimatepaywallscreen .decline {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-light-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
}

/* from components/screens/KegelWorkoutPlayer.module.css */
.m-kegelworkoutplayer .page {
  position: relative;
  min-height: 100dvh;
  height: 100dvh;
  background: var(--surface-light);
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ----- Top bar (X close) ----- */
.m-kegelworkoutplayer .topBar {
  display: flex;
  justify-content: flex-end;
  padding: 14px 14px 0;
}

.m-kegelworkoutplayer .roundBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ----- "Guide" pill ----- */
.m-kegelworkoutplayer .guidePill {
  margin: -34px 14px 0;
  align-self: flex-start;
  background: #FFFFFF;
  border: 1.5px solid var(--green-frame);
  border-radius: 12px;
  padding: 6px 12px;
  max-width: 220px;
  text-align: left;
  cursor: pointer;
}

.m-kegelworkoutplayer .guideLabel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-light-muted);
  line-height: 1;
}

.m-kegelworkoutplayer .guideRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-light);
}

/* ----- Center: number, label, ring ----- */
.m-kegelworkoutplayer .center {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 24px 4px;
  text-align: center;
}

.m-kegelworkoutplayer .bigNumber {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  color: var(--accent-orange);
  letter-spacing: 0.01em;
}

.m-kegelworkoutplayer .label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-light);
  margin-bottom: 8px;
}

/* ----- Ring ----- */
/* Outer wrap is fixed size (large enough to contain the contracted backdrop).
   Both the backdrop and the progress arc are absolutely positioned inside,
   centered. Only the backdrop changes size between states; the arc stays put. */
.m-kegelworkoutplayer .ringWrap {
  position: relative;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Breathing concentric rings — nested translucent lime bands that grow on
   contract (inhale) and slowly collapse toward the progress-ring size on
   release (exhale). The banded radial gradient scales with the element so the
   rings expand/collapse together. Sits behind the SVG progress arc + disc. */
.m-kegelworkoutplayer .ringBackdrop {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 0;
  background:
    /* concentric rings — the SAME shade as the progress bar (lime rgb 205,230,104)
       but lighter: inner band densest, fading lighter outward. Thin white
       frames between bands. */
    radial-gradient(
      circle at center,
      rgba(var(--accent-rgb), 0.55) 0%,
      rgba(var(--accent-rgb), 0.55) 18.6%,
      rgba(255, 255, 255, 0.85) 18.6%,
      rgba(255, 255, 255, 0.85) 19.2%,
      rgba(var(--accent-rgb), 0.42) 19.2%,
      rgba(var(--accent-rgb), 0.42) 38.6%,
      rgba(255, 255, 255, 0.75) 38.6%,
      rgba(255, 255, 255, 0.75) 39.2%,
      rgba(var(--accent-rgb), 0.30) 39.2%,
      rgba(var(--accent-rgb), 0.30) 58.6%,
      rgba(255, 255, 255, 0.62) 58.6%,
      rgba(255, 255, 255, 0.62) 59.2%,
      rgba(var(--accent-rgb), 0.19) 59.2%,
      rgba(var(--accent-rgb), 0.19) 78.6%,
      rgba(255, 255, 255, 0.5) 78.6%,
      rgba(255, 255, 255, 0.5) 79.2%,
      rgba(var(--accent-rgb), 0.09) 79.2%,
      rgba(var(--accent-rgb), 0.09) 100%
    );
  filter: blur(0.4px);
  box-shadow: none;
  transform: translate(-50%, -50%);
  /* Gradual, eased breathing: a smooth ease-in-out (slow start + slow end) a
     touch longer than a breath, so the ring keeps gliding — never snaps on. */
  transition: width 2600ms cubic-bezier(0.5, 0, 0.5, 1),
    height 2600ms cubic-bezier(0.5, 0, 0.5, 1);
}

.m-kegelworkoutplayer .backdropReady {
  width: 40px;
  height: 40px;
}

.m-kegelworkoutplayer .backdropRest {
  width: 40px;
  height: 40px;
}

/* Released: gradient shrinks down to match the 240px progress ring. */
.m-kegelworkoutplayer .backdropRelaxed {
  width: 40px;
  height: 40px;
}

/* Contracted: gradient gently blooms past the progress ring. */
.m-kegelworkoutplayer .backdropContracted {
  width: 280px;
  height: 280px;
}

/* Flicker (quick contract/relax): FULL amplitude — collapses fully on relax
   and blooms to the maximum ring size on contract, so the rapid beat reads as
   a strong pulse. Paired with `.backdropFast` for the quick 1-second beat. */
.m-kegelworkoutplayer .backdropFlickerRelaxed {
  width: 40px;
  height: 40px;
}

.m-kegelworkoutplayer .backdropFlickerContracted {
  width: 320px;
  height: 320px;
}

/* Speed override — drops the 1.8s Waves transition to 600ms so the bloom
   plays cleanly inside each 1-second flicker beat (1s contract / 1s relax).
   Layered on top of `.ringBackdrop` so non-flicker phases keep their slow
   ease. */
.m-kegelworkoutplayer .backdropFast {
  transition: width 600ms cubic-bezier(0.45, 0, 0.55, 1),
    height 600ms cubic-bezier(0.45, 0, 0.55, 1);
}

/* Clasp — asymmetric grow/shrink that mirrors "contract slowly, release
   quickly". The transition lives on the *destination* state so each
   direction uses its own timing:
   • Going INTO contracted: the contracted class applies, browser reads its
     3s ease-in transition, and the backdrop slowly blooms to the larger
     size over the full 3-second hold.
   • Going BACK to relaxed: the relaxed class applies, browser reads its
     150ms snap, and the ring instantly shrinks back to the progress-ring
     size.
*/
.m-kegelworkoutplayer .backdropClaspRelaxed {
  width: 40px;
  height: 40px;
  transition: width 150ms cubic-bezier(0.4, 0, 0.6, 1),
    height 150ms cubic-bezier(0.4, 0, 0.6, 1);
}

.m-kegelworkoutplayer .backdropClaspContracted {
  width: 280px;
  height: 280px;
  transition: width 3000ms cubic-bezier(0.4, 0, 0.4, 1),
    height 3000ms cubic-bezier(0.4, 0, 0.4, 1);
}

/* Inverted Clasp — mirror of Clasp. "Quickly contract, gradually relax over
   3 seconds": the contracted class snaps in fast, the relaxed class drifts
   back over the full 3-second descent. Transition lives on each destination
   so the direction of travel picks up the right timing. */
.m-kegelworkoutplayer .backdropInvertedClaspContracted {
  width: 280px;
  height: 280px;
  transition: width 150ms cubic-bezier(0.4, 0, 0.6, 1),
    height 150ms cubic-bezier(0.4, 0, 0.6, 1);
}

.m-kegelworkoutplayer .backdropInvertedClaspRelaxed {
  width: 40px;
  height: 40px;
  transition: width 3000ms cubic-bezier(0.6, 0, 0.6, 1),
    height 3000ms cubic-bezier(0.6, 0, 0.6, 1);
}

/* Box Breathing — symmetric 4-second grow / 4-second shrink with natural
   plateaus during the two holds. Both destination states use the same 4 s
   ease-in-out so inhale (relaxed → contracted) and exhale (contracted →
   relaxed) feel identical. When the sub-phase advances from inhale to
   hold-full or from exhale to hold-empty the class doesn't change, so no
   transition fires and the backdrop holds its size. */
.m-kegelworkoutplayer .backdropBoxRelaxed {
  width: 40px;
  height: 40px;
  transition: width 4000ms cubic-bezier(0.45, 0, 0.55, 1),
    height 4000ms cubic-bezier(0.45, 0, 0.55, 1);
}

.m-kegelworkoutplayer .backdropBoxContracted {
  width: 280px;
  height: 280px;
  transition: width 4000ms cubic-bezier(0.45, 0, 0.55, 1),
    height 4000ms cubic-bezier(0.45, 0, 0.55, 1);
}

/* Progress arc — fixed 240×240 box, centered over the backdrop. */
.m-kegelworkoutplayer .ringSvg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-90deg);
  overflow: visible;
  z-index: 2;
}

.m-kegelworkoutplayer .ringTrack {
  stroke: rgba(20, 20, 20, 0.10);
  stroke-width: 8;
}

/* No `stroke` here on purpose — the SVG attribute on the <circle> drives
   colour (solid vs. gradient) and CSS would otherwise override it. */
.m-kegelworkoutplayer .ringFill {
  stroke-width: 10;
  stroke-linecap: round;
}

.m-kegelworkoutplayer .ringPip {
  fill: #E0E1DE;
  transform-origin: 115px 115px;
}

.m-kegelworkoutplayer .ringInnerDisc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #fff;
  color: var(--text-light);
  border: 1px solid var(--border-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
}

/* ----- Complete CTA ----- */
.m-kegelworkoutplayer .completeBtn {
  margin-top: 16px;
  width: 100%;
  max-width: 280px;
  height: 50px;
  border: 0;
  border-radius: 10px;
  background: var(--cta-dark);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* ----- Bottom card ----- */
.m-kegelworkoutplayer .bottomCard {
  padding: 12px 16px 22px;
  background: #fff;
  border-top: 1px solid var(--border-light);
}

.m-kegelworkoutplayer .iconRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 12px;
}

.m-kegelworkoutplayer .iconBtn {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  cursor: pointer;
}

.m-kegelworkoutplayer .iconBtnOn {
  color: var(--accent-strong);
}

/* ----- Header (Exercise N of M + title) ----- */
.m-kegelworkoutplayer .kHead {
  padding: 4px 20px 0;
  text-align: center;
}

.m-kegelworkoutplayer .counter {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-light);
}

.m-kegelworkoutplayer .counterChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin: 0 2px;
  border-radius: 6px;
  background: var(--accent-orange);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 13px;
}

.m-kegelworkoutplayer .kTitle {
  margin: 3px 0 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  color: var(--text-light);
  text-transform: capitalize;
}

/* ----- Exercise timeline (replaces phase tabs) ----- */
.m-kegelworkoutplayer .timeline {
  position: relative;
  max-height: 128px;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 2px 2px 0;
}

.m-kegelworkoutplayer .timeline::-webkit-scrollbar { display: none; }

.m-kegelworkoutplayer .tlRow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.m-kegelworkoutplayer .tlMarker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.m-kegelworkoutplayer .tlNum {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  z-index: 1;
}

.m-kegelworkoutplayer .num_upcoming {
  background: #E0E1DE;
  color: var(--text-light);
  box-shadow: none;
}
.m-kegelworkoutplayer .num_done {
  background: var(--accent-orange);
  color: var(--accent-ink);
  box-shadow: none;
}
.m-kegelworkoutplayer .num_current {
  background: var(--green-fill);
  color: var(--text-light);
  border: 1px solid var(--green-frame);
  box-shadow: none;
}

.m-kegelworkoutplayer .tlLine {
  flex: 1 1 auto;
  width: 2px;
  min-height: 12px;
  background: var(--border-light);
  margin: 2px 0;
}

.m-kegelworkoutplayer .tlBody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 12px;
  min-width: 0;
}

.m-kegelworkoutplayer .tlTitle {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-light);
  text-transform: capitalize;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.m-kegelworkoutplayer .tlTitleCurrent { color: var(--accent-strong); }

.m-kegelworkoutplayer .tlMeta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-light-muted);
}

/* ----- Info modal (bottom sheet) ----- */
.m-kegelworkoutplayer .modalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}

.m-kegelworkoutplayer .modalSheet {
  position: relative;
  width: 100%;
  max-height: 78%;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 18px 20px 24px;
  overflow-y: auto;
}

.m-kegelworkoutplayer .modalClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-kegelworkoutplayer .modalTitle {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-light);
}

.m-kegelworkoutplayer .modalIntro {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-light);
}

.m-kegelworkoutplayer .modalSteps,
.m-kegelworkoutplayer .modalDashList {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-kegelworkoutplayer .modalStep,
.m-kegelworkoutplayer .modalDashRow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-light);
}

.m-kegelworkoutplayer .modalDash {
  display: inline-block;
  width: 14px;
  height: 3px;
  margin-top: 10px;
  background: var(--accent-orange);
  border-radius: 2px;
  flex-shrink: 0;
}

.m-kegelworkoutplayer .modalCallout {
  background: var(--callout-green);
  border: 1.5px solid var(--callout-green-frame);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: #192126;
}

.m-kegelworkoutplayer .modalCallout p {
  margin: 0 0 8px;
}

.m-kegelworkoutplayer .modalCallout p:last-child {
  margin-bottom: 0;
}

/* from components/screens/LessonFlowScreen.module.css */
/* Bounded to exactly one viewport height with overflow clipped, so the
   document itself never scrolls. The inner .body is the scroll container;
   header + footer stay pinned by the flex layout. This is more reliable than
   `position: sticky` on the footer — sticky can fail when an ancestor has
   non-visible overflow or when the flex child won't shrink (the default
   `min-height: auto` on flex children prevents overflow:auto from engaging).
*/
.m-lessonflowscreen .page {
  height: 100dvh;
  background: var(--surface-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ----- Header ----- */
.m-lessonflowscreen .header {
  padding: 10px 16px 12px;
  background: var(--surface-light);
  border-bottom: 1px solid var(--border-light);
}

.m-lessonflowscreen .breadcrumbRow {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
}

.m-lessonflowscreen .breadcrumb {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-light);
}

.m-lessonflowscreen .controlRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.m-lessonflowscreen .iconBtn {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  flex-shrink: 0;
  border-radius: 50%;
}

.m-lessonflowscreen .iconBtn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.m-lessonflowscreen .progress {
  flex: 1;
  display: flex;
  gap: 6px;
}

.m-lessonflowscreen .seg {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.08);
  transition: background 0.3s ease;
}

.m-lessonflowscreen .segDone {
  background: var(--accent-orange);
}

/* ----- Body ----- */
/* `min-height: 0` is the critical bit: flex children default to
   `min-height: auto` which prevents them shrinking below their content size.
   Without it, `overflow-y: auto` never engages and the parent grows to fit
   content — breaking the bounded-page layout. */
.m-lessonflowscreen .body {
  flex: 1;
  min-height: 0;
  padding: 18px 20px 24px;
  overflow-y: auto;
}

.m-lessonflowscreen .heading {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--text-light);
  letter-spacing: -0.01em;
}

.m-lessonflowscreen .blocks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.m-lessonflowscreen .text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-light);
}

/* ----- Dash row ----- */
.m-lessonflowscreen .dashRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

/* Single-line dash bullet: orange dash sits inline with text, paragraph wraps
   under itself without any bold label heading. */
.m-lessonflowscreen .dashItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
}

.m-lessonflowscreen .dashItem .dash {
  margin-top: 11px; /* visually align with first text baseline */
}

.m-lessonflowscreen .dashItem .dashText {
  flex: 1;
}

.m-lessonflowscreen .dashRowHead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.m-lessonflowscreen .dash {
  display: inline-block;
  width: 18px;
  height: 3px;
  background: var(--accent-orange);
  border-radius: 2px;
  flex-shrink: 0;
}

.m-lessonflowscreen .dashLabel {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-light);
}

.m-lessonflowscreen .dashText {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-light);
}

/* ----- Illustration ----- */
.m-lessonflowscreen .illustration {
  width: 100%;
  min-height: 200px;
  height: 240px;
  background: #E0E1DE;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  margin: 6px 0 4px;
}

.m-lessonflowscreen .illustrationImage {
  background: #E0E1DE;
}

.m-lessonflowscreen .illustrationLabel {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light-muted);
  max-width: 240px;
  line-height: 1.4;
}

/* ----- Callout (green note) ----- */
.m-lessonflowscreen .callout {
  position: relative;
  background: var(--callout-green);
  border: 1.5px solid var(--callout-green-frame);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 4px 0;
  overflow: hidden;
}

.m-lessonflowscreen .calloutText {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.45;
  color: #192126;
}

/* Stack multiple paragraphs inside a single callout (e.g. the 10
 * distorted-thinking patterns) with a clear visible break between
 * each line — matches the iOS reference where each numbered item
 * sits on its own line inside the same green box. */
.m-lessonflowscreen .calloutText + .calloutText {
  margin-top: 12px;
}

/* ----- Free-form text answer box -----
 *
 * Matches the iOS reference for the Triple Column Exercise: soft beige-grey
 * rounded box, serif body text, no border, just enough internal padding so
 * the entered answer breathes. Lives inline with the other lesson blocks. */
.m-lessonflowscreen .textInput {
  width: 100%;
  background: #E0E1DE;
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 4px 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-light);
  resize: vertical;
  min-height: 96px;
  box-sizing: border-box;
}

.m-lessonflowscreen .textInput::placeholder {
  color: var(--text-light-muted);
  opacity: 0.7;
}

.m-lessonflowscreen .textInput:focus {
  outline: 2px solid var(--accent-orange);
  outline-offset: 2px;
}

/* Locked state — after the user hits CONTINUE the textarea becomes
 * read-only. Muted background, dimmer text, no caret, no focus ring. */
.m-lessonflowscreen .textInputLocked {
  background: #E0E1DE;
  color: var(--text-light);
  cursor: not-allowed;
  caret-color: transparent;
}

.m-lessonflowscreen .textInputLocked:focus {
  outline: none;
}

/* ----- Section label (orange caps) ----- */
.m-lessonflowscreen .sectionLabel {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-strong);
  line-height: 1.3;
  margin-top: 4px;
}

/* Coral bold sub-heading / lead-in that keeps the authored case (no uppercase
   transform). Used by the menopause lessons for salmon title/sentence-case
   labels such as "Vaginal Moisturizers" and "As estrogen declines…:". */
.m-lessonflowscreen .coralLead {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-orange);
  line-height: 1.35;
  margin: 4px 0 0;
}

/* ----- Bullet rows (✅ / ❌) ----- */
.m-lessonflowscreen .bullet {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.m-lessonflowscreen .bulletIcon {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 1px;
}

.m-lessonflowscreen .bulletBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m-lessonflowscreen .bulletLabel {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-light);
  font-weight: 500;
}

.m-lessonflowscreen .bulletText {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-light);
}

/* ----- Option (selectable multiple-choice row) -----
   Rendered as a <button> so it's clickable + keyboard-accessible. Reset
   the native button styling so the row looks identical to the prior
   non-interactive markup, then add a selected variant. */
.m-lessonflowscreen .option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1.5px solid var(--green-frame);
  border-radius: 16px;
  padding: 14px 16px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.m-lessonflowscreen .option:hover:not(:disabled) {
  background: var(--green-fill);
}

.m-lessonflowscreen .optionSelected {
  background: var(--green-fill);
  border-color: var(--green-frame);
}

/* Locked siblings keep their beige pill so the list still reads as a set of
   answers — only the hover affordance is suppressed (the group is single-
   shot, so hovering an unselected option shouldn't suggest it's clickable). */
.m-lessonflowscreen .option:disabled {
  cursor: default;
  opacity: 1;
}

.m-lessonflowscreen .optionDot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--text-light);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms ease, background 120ms ease;
}

/* Selected dot: theme-coloured ring with a smaller filled dot in the centre. */
.m-lessonflowscreen .optionDotSelected {
  border-color: var(--green-frame);
}

.m-lessonflowscreen .optionDotSelected::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-orange);
}

.m-lessonflowscreen .optionLabel {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-light);
}

/* ----- Subheading ----- */
.m-lessonflowscreen .subheading {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--text-light);
}

/* Inline serif heading rendered between blocks (Explore practice flows). */
.m-lessonflowscreen .blockHeading {
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: var(--text-light);
  letter-spacing: -0.01em;
}

/* ----- Table (Triple Column explore) ----- */
.m-lessonflowscreen .tableWrap {
  width: 100%;
  overflow-x: auto;
}
.m-lessonflowscreen .table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.35;
}
.m-lessonflowscreen .table th,
.m-lessonflowscreen .table td {
  border: 1px solid var(--border-light);
  padding: 8px;
  text-align: left;
  vertical-align: top;
  color: var(--text-light);
}
.m-lessonflowscreen .tableHeadCell {
  background: var(--surface-beige);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-light-muted);
}

/* ----- Numbered list item ----- */
.m-lessonflowscreen .numberedItem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.m-lessonflowscreen .numberedItemNum {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m-lessonflowscreen .numberedItemText {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-light);
}

/* ----- Media card (video / audio with snippet) ----- */
.m-lessonflowscreen .mediaCard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  overflow: hidden;
  margin: 4px 0;
}

.m-lessonflowscreen .mediaPoster {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #192126;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-lessonflowscreen .mediaScrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
}

.m-lessonflowscreen .mediaWaveform {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 14px;
  width: 80%;
  height: 36px;
  opacity: 0.85;
  pointer-events: none;
}

.m-lessonflowscreen .mediaPlay {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--text-light);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
}

.m-lessonflowscreen .mediaCaption {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-light);
}

.m-lessonflowscreen .mediaCaptionTitle {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
}

.m-lessonflowscreen .mediaCaptionSubtitle {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-light-muted);
}

/* ----- Footer -----
   Naturally pinned at the bottom of `.page` by the flex layout — `.body`
   takes flex:1 and scrolls internally, this footer is the last flex item.
   `flex-shrink: 0` guards against compression when content is tiny + the
   footer would otherwise be squeezed by `min-height` interactions. */
.m-lessonflowscreen .footer {
  flex-shrink: 0;
  padding: 12px 20px 20px;
  background: var(--surface-light);
  border-top: 1px solid transparent;
}

/* ----- Quiz block (interactive multiple choice) -----
 *
 * Idle: beige pill, hollow dark circle indicator, dark serif label.
 * Revealed-correct: same beige bg, green filled-circle indicator, green
 *   label, and the explanation rendered underneath the label as bold dark
 *   serif text — all inside the same pill (so the correct option grows
 *   vertically to fit its explanation).
 * Revealed-wrong: light coral bg, red hollow circle, red label.
 *
 * Buttons are `display: flex; align-items: flex-start;` so that when the
 * correct option expands with an explanation, the radio dot stays pinned to
 * the top of the pill next to the label rather than floating in the middle.
 */
.m-lessonflowscreen .quiz {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px 0 4px;
}

.m-lessonflowscreen .quizPrompt {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-light);
}

.m-lessonflowscreen .quizOptions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-lessonflowscreen .quizOption {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-beige);
  color: var(--text-light);
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 80ms ease;
}

.m-lessonflowscreen .quizOption:active:not(:disabled) {
  transform: scale(0.99);
}

.m-lessonflowscreen .quizOption:disabled {
  cursor: default;
}

.m-lessonflowscreen .quizDot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--text-light);
  background: transparent;
  margin-top: 2px;
  flex-shrink: 0;
  transition: background 160ms ease, border-color 160ms ease;
}

.m-lessonflowscreen .quizDotInner {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background 160ms ease;
}

.m-lessonflowscreen .quizOptionBody {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.m-lessonflowscreen .quizOptionLabel {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.m-lessonflowscreen .quizOptionExplanation {
  display: block;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-light);
}

/* Correct state — light lime wash + lime filled indicator, black label. */
.m-lessonflowscreen .quizOptionCorrect {
  background: var(--green-fill);
  color: #192126;
}

.m-lessonflowscreen .quizOptionCorrect .quizDot {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
}

.m-lessonflowscreen .quizOptionCorrect .quizDot .quizDotInner {
  background: #FFFFFF;
}

.m-lessonflowscreen .quizOptionCorrect .quizOptionLabel {
  color: #192126;
}

/* Wrong state — light coral wash + coral hollow circle, black label. */
.m-lessonflowscreen .quizOptionWrong {
  background: rgba(237, 71, 71, 0.16);
  color: #192126;
}

.m-lessonflowscreen .quizOptionWrong .quizDot {
  border-color: #ED4747;
  background: transparent;
}

.m-lessonflowscreen .quizOptionWrong .quizOptionLabel {
  color: #192126;
}

/* ----- Comparison card -----
 *
 * Used by the `compareCard` block kind — a rounded card with a bold title
 * and a small bulleted list. Two variants (`neutral` = gray, `accent` =
 * orange-tinted) stack to produce the iOS-reference comparison block.
 */
.m-lessonflowscreen .compareCard {
  border-radius: 14px;
  padding: 18px 20px 16px;
  margin: 6px 0;
}

.m-lessonflowscreen .compareCardNeutral {
  background: #E0E1DE;
  color: var(--text-light);
}

.m-lessonflowscreen .compareCardAccent {
  background: var(--green-fill);
  color: var(--accent-strong);
}

.m-lessonflowscreen .compareCardTitle {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
}

.m-lessonflowscreen .compareCardAccent .compareCardTitle {
  color: var(--accent-strong);
}

.m-lessonflowscreen .compareCardList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.m-lessonflowscreen .compareCardItem {
  position: relative;
  padding: 4px 0 4px 18px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.35;
}

.m-lessonflowscreen .compareCardItem::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* from components/screens/LessonScreen.module.css */
/* Bounded viewport with internal scroll — see LessonFlowScreen for why. */
.m-lessonscreen .page {
  height: 100dvh;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.m-lessonscreen .body {
  flex: 1;
  min-height: 0;
  padding: 16px 20px 24px;
  overflow-y: auto;
}

.m-lessonscreen .heading {
  margin: 4px 0 16px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: var(--text-light);
}

.m-lessonscreen .bodyText {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-light);
}

.m-lessonscreen .callout {
  display: flex;
  background: var(--callout-green);
  border: 1.5px solid var(--callout-green-frame);
  border-radius: 16px;
  overflow: hidden;
  padding: 14px 16px;
  position: relative;
}

.m-lessonscreen .calloutBar {
  display: none;
}

.m-lessonscreen .calloutText {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-light);
}

/* Naturally pinned by the flex layout — `.body` scrolls internally above. */
.m-lessonscreen .footer {
  flex-shrink: 0;
  padding: 12px 20px 24px;
  background: #FFFFFF;
}

/* from components/screens/LoginScreen.module.css */
.m-loginscreen .page {
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  color: var(--text-light);
  /* Porcelain with a soft green/violet pastel wash up top — homepage palette. */
  background:
    radial-gradient(92% 42% at 8% 0%, var(--green-fill) 0%, transparent 60%),
    radial-gradient(85% 42% at 100% 6%, rgba(164, 138, 237, 0.14) 0%, transparent 60%),
    var(--bg-light);
}

.m-loginscreen .content {
  position: relative;
  z-index: 1;
  padding: 20px 24px 32px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.m-loginscreen .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 44px;
}

.m-loginscreen .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.m-loginscreen .brandMark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-orange);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.m-loginscreen .brandName {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--text-light);
}

.m-loginscreen .closeBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-light, #e4e9e6);
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m-loginscreen .title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-light);
}

.m-loginscreen .subtitle {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-light-muted);
  max-width: 320px;
}

.m-loginscreen .emailStrong {
  color: var(--text-light);
  font-weight: 700;
}

.m-loginscreen .form {
  display: flex;
  flex-direction: column;
}

.m-loginscreen .fieldLabel {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-light-muted);
  margin: 0 0 8px 2px;
}

.m-loginscreen .fieldWrap {
  position: relative;
}

.m-loginscreen .input {
  width: 100%;
  height: 54px;
  background: #fff;
  border: 1px solid var(--border-light, #e4e9e6);
  border-radius: 14px;
  padding: 0 46px 0 16px;
  font-size: 16px;
  color: var(--text-light);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.m-loginscreen .input::placeholder {
  color: #9aa39d;
}

.m-loginscreen .input:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-orange) 22%, transparent);
}

.m-loginscreen .fieldIcon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa39d;
}

.m-loginscreen .submit {
  margin-top: 16px;
  height: 54px;
  background: #e4e9e6;
  color: #9aa39d;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: not-allowed;
  transition: background 0.15s ease;
}

.m-loginscreen .submitOn {
  background: var(--accent-orange);
  color: var(--accent-ink);
  cursor: pointer;
}

.m-loginscreen .submitOn:hover {
  background: var(--accent-orange-hover);
}

.m-loginscreen .help {
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-light-muted);
}

.m-loginscreen .link {
  color: var(--accent-orange);
  font-weight: 700;
  text-decoration: none;
}

.m-loginscreen .link:hover {
  text-decoration: underline;
}

.m-loginscreen .resend {
  margin: 24px 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-light-muted);
}

.m-loginscreen .resendLink {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-orange);
  background: transparent;
  border: 0;
  cursor: pointer;
}


/* Naturally pinned by the flex layout — `.body` scrolls internally above. */


/* from components/screens/PelvicAssessmentScreen.module.css */
.m-pelvicassessmentscreen .page {
  height: 100dvh;
  background: var(--surface-light);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ----- Top bar ----- */
.m-pelvicassessmentscreen .topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
  min-height: 56px;
}

.m-pelvicassessmentscreen .closeBtn,
.m-pelvicassessmentscreen .retryBtn {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.m-pelvicassessmentscreen .closeBtn {
  margin-left: auto;
}

.m-pelvicassessmentscreen .retryBtn {
  margin-left: auto;
}

/* ----- Guide pill ----- */
.m-pelvicassessmentscreen .guidePill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #E0E1DE;
  border: 0;
  border-radius: 10px;
  padding: 8px 14px 8px 12px;
  cursor: pointer;
  text-align: left;
}

.m-pelvicassessmentscreen .guideKicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  display: block;
  line-height: 1.1;
}

.m-pelvicassessmentscreen .guideTitle {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-light);
  display: block;
  line-height: 1.15;
}

.m-pelvicassessmentscreen .guidePlay {
  color: var(--text-light);
  margin-left: 4px;
}

/* ----- Big timer ----- */
.m-pelvicassessmentscreen .timerBlock {
  text-align: center;
  padding: 8px 0 0;
}

.m-pelvicassessmentscreen .bigTime {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  letter-spacing: 0.02em;
  color: var(--accent-strong);
  line-height: 1;
}

.m-pelvicassessmentscreen .holdLabel {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--text-light-muted);
}

/* ----- Hold area ----- */
.m-pelvicassessmentscreen .holdArea {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 40px;
}

.m-pelvicassessmentscreen .holdTarget {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 12px solid var(--green-fill);
  background: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 240ms ease, transform 240ms ease, width 320ms ease,
    height 320ms ease;
}

.m-pelvicassessmentscreen .fingerIcon {
  color: var(--accent-strong);
}

/* Pulsating hold ring — same concentric lime bands as the Kegel exercises. */
.m-pelvicassessmentscreen .holdTargetActive {
  width: 320px;
  height: 320px;
  border-width: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(var(--accent-rgb), 0.55) 0%,
      rgba(var(--accent-rgb), 0.55) 18.6%,
      rgba(255, 255, 255, 0.85) 18.6%,
      rgba(255, 255, 255, 0.85) 19.2%,
      rgba(var(--accent-rgb), 0.42) 19.2%,
      rgba(var(--accent-rgb), 0.42) 38.6%,
      rgba(255, 255, 255, 0.75) 38.6%,
      rgba(255, 255, 255, 0.75) 39.2%,
      rgba(var(--accent-rgb), 0.30) 39.2%,
      rgba(var(--accent-rgb), 0.30) 58.6%,
      rgba(255, 255, 255, 0.62) 58.6%,
      rgba(255, 255, 255, 0.62) 59.2%,
      rgba(var(--accent-rgb), 0.19) 59.2%,
      rgba(var(--accent-rgb), 0.19) 78.6%,
      rgba(255, 255, 255, 0.5) 78.6%,
      rgba(255, 255, 255, 0.5) 79.2%,
      rgba(var(--accent-rgb), 0.09) 79.2%,
      rgba(var(--accent-rgb), 0.09) 100%
    );
  filter: blur(0.4px);
  box-shadow: none;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

/* ----- Result stage ----- */
.m-pelvicassessmentscreen .resultBlock {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.m-pelvicassessmentscreen .yourResult {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--accent-strong);
}

/* ----- Loading stage ----- */
.m-pelvicassessmentscreen .loadingCenter {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.m-pelvicassessmentscreen .loadingRingWrap {
  position: relative;
  display: inline-flex;
  width: 240px;
  height: 240px;
  align-items: center;
  justify-content: center;
}

.m-pelvicassessmentscreen .loadingRingSvg {
  display: block;
}

.m-pelvicassessmentscreen .loadingPct,
.m-pelvicassessmentscreen .loadingPctCenter {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  color: var(--accent-strong);
  letter-spacing: 0.02em;
  line-height: 1;
}

.m-pelvicassessmentscreen .loadingPctCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ----- Algorithm updated stage ----- */
.m-pelvicassessmentscreen .updatedCenter {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  gap: 36px;
}

.m-pelvicassessmentscreen .updatedTitle {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 28px;
  color: var(--text-light);
  text-align: center;
}

.m-pelvicassessmentscreen .hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.m-pelvicassessmentscreen .fadeIn {
  opacity: 1;
  transition: opacity 320ms ease 80ms;
}

/* ----- Percentile stage ----- */
.m-pelvicassessmentscreen .percentileBlock {
  flex: 1;
  padding: 4px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.m-pelvicassessmentscreen .chart {
  position: relative;
  width: 100%;
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 56px 4px 0;
}

.m-pelvicassessmentscreen .chartCol {
  position: relative;
  flex: 1;
  height: 100%;
}

.m-pelvicassessmentscreen .chartColActive {
  z-index: 10;
}

.m-pelvicassessmentscreen .chartTrack {
  position: relative;
  width: 100%;
  height: 100%;
  background: #E0E1DE;
  border-radius: 10px;
  overflow: hidden;
}

.m-pelvicassessmentscreen .chartFill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px 10px 0 0;
  transition: height 320ms ease;
}

.m-pelvicassessmentscreen .chartTag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #192126;
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 84px;
  white-space: nowrap;
  z-index: 11;
  box-shadow: none;
}

.m-pelvicassessmentscreen .chartTagArrow {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #192126;
}

.m-pelvicassessmentscreen .startingPoint {
  margin: 28px 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--accent-strong);
  letter-spacing: 0.02em;
  text-align: center;
}

.m-pelvicassessmentscreen .percentileBody {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-light);
  text-align: center;
  max-width: 320px;
}

/* ----- Footer CTA -----
   `.page` is `overflow: hidden` and `flex column`. For the footer to stay
   pinned at the viewport bottom, the result-stage content above it has to
   live inside a `flex: 1; min-height: 0; overflow-y: auto` container so it
   scrolls internally rather than pushing the footer off-screen. */
.m-pelvicassessmentscreen .footer {
  flex-shrink: 0;
  padding: 12px 16px 24px;
  background: var(--surface-light);
}

.m-pelvicassessmentscreen .darkCta {
  width: 100%;
  height: 56px;
  background: var(--cta-dark);
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* from components/screens/PelvicFloorGuideModal.module.css */
.m-pelvicfloorguidemodal .scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--surface-light);
  /* The child LessonFlowScreen already renders a full-bleed `.viewport` so we
     just need to sit on top of whatever is behind us. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* from components/screens/PersonalizationScreen.module.css */
.m-personalizationscreen .root {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: #FFFFFF;
}

.m-personalizationscreen .header {
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--border-light);
}

.m-personalizationscreen .titleRow {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

.m-personalizationscreen .title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
}

.m-personalizationscreen .barRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.m-personalizationscreen .iconBtn {
  background: transparent;
  border: 0;
  padding: 6px;
  color: var(--text-light-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m-personalizationscreen .track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-beige);
  overflow: hidden;
}

.m-personalizationscreen .fill {
  height: 100%;
  background: var(--accent-orange);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.m-personalizationscreen .body {
  flex: 1;
  padding: 18px 18px 24px;
}

.m-personalizationscreen .heading {
  margin: 6px 0 16px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--text-light);
}

.m-personalizationscreen .optionList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-personalizationscreen .option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--text-light);
  text-align: left;
  font-family: var(--font-serif);
  font-size: 16px;
}

.m-personalizationscreen .optionSelected {
  background: var(--green-fill);
  border-color: var(--green-frame);
}

.m-personalizationscreen .radio {
  color: var(--text-light);
}

.m-personalizationscreen .radioOn {
  color: var(--accent-strong);
}

.m-personalizationscreen .yesNoWrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.m-personalizationscreen .yesNoBlock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-personalizationscreen .yesNoQuestion {
  margin: 0 0 2px;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--text-light);
}

.m-personalizationscreen .footer {
  position: sticky;
  bottom: 0;
  padding: 16px;
  background: linear-gradient(to top, #FFFFFF 70%, rgba(255, 255, 255, 0));
}

.m-personalizationscreen .cta {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 4px;
  background: var(--surface-beige);
  color: var(--text-light-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
}

.m-personalizationscreen .cta:not(:disabled) {
  background: var(--cta-dark);
  color: #FFFFFF;
}

/* from components/screens/PracticeIntroScreen.module.css */
.m-practiceintroscreen .page {
  display: flex;
  flex-direction: column;
  background: var(--bg-light);
  overflow: hidden;
}

/* ----- Hero image ----- */
.m-practiceintroscreen .hero {
  position: relative;
  flex: 0 0 auto;
  height: 250px;
  background-color: #E0E1DE;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.m-practiceintroscreen .closeBtn {
  position: absolute;
  top: 18px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--surface-light);
  color: var(--text-light);
  cursor: pointer;
  box-shadow: none;
}

/* ----- Content sheet ----- */
.m-practiceintroscreen .sheet {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 22px 20px;
  background: var(--surface-light);
}

.m-practiceintroscreen .title {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-light);
}

.m-practiceintroscreen .label {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light-muted);
}

.m-practiceintroscreen .body {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-light);
}

.m-practiceintroscreen .frequency {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-light);
}

.m-practiceintroscreen .frequencyIcon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--text-light-muted);
}

/* ----- Footer CTA ----- */
.m-practiceintroscreen .footer {
  flex: 0 0 auto;
  padding: 12px 22px calc(16px + env(safe-area-inset-bottom));
  background: var(--surface-light);
  border-top: 1px solid var(--border-light);
}

.m-practiceintroscreen .startBtn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: var(--accent-orange);
  color: var(--accent-ink);
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.m-practiceintroscreen .startBtn:active {
  transform: scale(0.99);
}

/* from components/screens/profile/ConfirmModal.module.css */
.m-confirmmodal .scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  z-index: 80;
}

.m-confirmmodal .card {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 6px;
  padding: 26px 24px 22px;
  color: #FFFFFF;
  text-align: center;
  box-shadow: none;
}

.m-confirmmodal .red { background: #ED4747; }
.m-confirmmodal .dark { background: #192126; }

.m-confirmmodal .close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  color: #FFFFFF;
  padding: 4px;
  opacity: 0.85;
}

.m-confirmmodal .title {
  margin: 4px 0 12px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.m-confirmmodal .body {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.3;
}

.m-confirmmodal .cancel {
  display: block;
  width: 100%;
  padding: 14px 16px;
  margin-top: 4px;
  border: 0;
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--text-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
}

.m-confirmmodal .confirm {
  display: block;
  width: 100%;
  padding: 14px 16px;
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
}

/* from components/screens/ProfileScreen.module.css */
.m-profilescreen .root {
  min-height: 100dvh;
  background: var(--bg-light);
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.m-profilescreen .heroWrap {
  position: relative;
  background: transparent;
  padding: 18px 0 6px;
}

.m-profilescreen .backBtn {
  position: absolute;
  top: 12px;
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  border: 1px solid var(--border-card);
}

.m-profilescreen .hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin: 44px 16px 0;
  padding: 18px 18px;
  background: var(--surface-light);
  border: 1px solid #E0E1DE;
  box-shadow: var(--shadow-card);
  border-radius: 22px;
}

.m-profilescreen .heroInfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.m-profilescreen .avatar {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #E0E1DE;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}

.m-profilescreen .avatarHair {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 30% at 30% 28%, #192126 50%, transparent 51%),
    radial-gradient(40% 30% at 70% 28%, #192126 50%, transparent 51%),
    radial-gradient(60% 40% at 50% 22%, #192126 50%, transparent 51%);
}

.m-profilescreen .avatarFace {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E0E1DE;
  margin-bottom: 0;
  border: 2px solid #E0E1DE;
}

.m-profilescreen .username {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0;
  text-align: left;
}

.m-profilescreen .badgeStar {
  font-size: 11px;
  line-height: 1;
}

.m-profilescreen .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-orange);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--accent-ink);
}

.m-profilescreen .badge svg { color: var(--accent-ink); }

/* Free account: grey pill instead of the lime Premium pill. */
.m-profilescreen .badgeFree {
  background: var(--surface-beige);
  color: var(--text-light-muted);
}

/* Slot for the "Activate Premium" banner above the stats. Collapses to nothing
   while Premium is active (the banner renders null). */
.m-profilescreen .bannerWrap {
  padding: 12px 16px 0;
}
.m-profilescreen .bannerWrap:empty {
  display: none;
}

.m-profilescreen .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 12px 16px 16px;
  padding: 18px 12px;
  background: #192126;
  border: 1px solid #192126;
  box-shadow: var(--shadow-card);
  border-radius: 16px;
}

.m-profilescreen .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0 8px;
}

.m-profilescreen .statTop {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-strong);
}

.m-profilescreen .statValue {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: #FFFFFF;
}

.m-profilescreen .statLabel {
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.25;
  white-space: pre-line;
}

.m-profilescreen .section {
  padding: 12px 16px 24px;
  background: transparent;
}

.m-profilescreen .sectionLabel {
  margin: 12px 0 12px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
}

.m-profilescreen .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-profilescreen .menuItem,
.m-profilescreen .menuItemFirst {
  background: var(--surface-light);
  border: 1px solid #E0E1DE;
  box-shadow: var(--shadow-card);
  border-radius: 12px;
}

.m-profilescreen .menuItemFirst {
  margin-bottom: 6px;
}

.m-profilescreen .menuRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  color: var(--text-light);
}

.m-profilescreen .menuIcon { color: var(--accent-strong); }

.m-profilescreen .menuEmoji {
  font-size: 19px;
  line-height: 1;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.m-profilescreen .statEmoji {
  font-size: 19px;
  line-height: 1;
}

.m-profilescreen .badgeEmoji {
  font-size: 13px;
  line-height: 1;
}

.m-profilescreen .menuLabel {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
}

.m-profilescreen .menuChevron { color: var(--text-light-muted); }

/* Sign Out — a white card button pinned at the bottom of the profile. */
.m-profilescreen .signOutBtn {
  margin-top: 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface-light);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 15px;
  color: var(--text-light);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

/* from components/screens/ProgramPickerSheet.module.css */
/* Full-viewport dimmed scrim. Tapping anywhere outside the sheet closes it. */
.m-programpickersheet .scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: scrim-in 180ms ease-out;
}

/* Sheet itself — pinned to the bottom, rounds at the top, slides up on open.
   Min-height matches the iOS reference where the sheet covers roughly the
   bottom 70% of the viewport. */
.m-programpickersheet .sheet {
  width: 100%;
  max-width: 375px;
  background: var(--surface-light);
  border-radius: 20px 20px 0 0;
  padding: 8px 16px 24px;
  max-height: 80dvh;
  overflow-y: auto;
  box-shadow: none;
  animation: sheet-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m-programpickersheet .grabHandle {
  width: 36px;
  height: 4px;
  background: #E0E1DE;
  border-radius: 2px;
  margin: 0 auto 12px;
}

.m-programpickersheet .list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Program card. Reset the native button styling so the rendered row matches
   the iOS card; the whole thing is tappable. */
.m-programpickersheet .card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--surface-light);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 10px;
  text-align: left;
  color: var(--text-light);
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms ease;
}

.m-programpickersheet .cardActive {
  border: 1px solid var(--green-frame);
  background: var(--green-fill);
}

.m-programpickersheet .cardDisabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.m-programpickersheet .thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background-color: #E0E1DE;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.m-programpickersheet .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.m-programpickersheet .title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
}

.m-programpickersheet .blurb {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-light-muted);
  /* Cap at 3 lines so cards stay even height even with long blurbs. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.m-programpickersheet .tag {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
  align-self: flex-start;
  margin-top: 2px;
}

@keyframes scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* from components/screens/QuizScreen.module.css */
.m-quizscreen .page {
  min-height: 100dvh;
  background: var(--bg-dark);
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
}

/* Quiz header: the bar blends into the page background (the shared
   `.m-progressbar .dark` tint is meant for the track only), and the category
   label centers on the page rather than on the space left of the back button. */
.m-quizscreen .header.dark { background: var(--bg-dark); }
.m-quizscreen .header .row { position: relative; }
.m-quizscreen .header .center {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.m-quizscreen .body {
  padding: 8px 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.m-quizscreen .title {
  margin: 16px 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
}

.m-quizscreen .subtitle {
  margin: 0 0 24px;
  text-align: center;
  color: var(--text-dark-muted);
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
}

.m-quizscreen .options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-quizscreen .option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--surface-dark);
  color: var(--text-dark);
  border: 0;
  border-radius: 10px;
  padding: 22px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  transition: background 0.15s ease;
}

.m-quizscreen .option:hover { background: var(--surface-dark-2); }

.m-quizscreen .chev { color: var(--text-dark-muted); }

.m-quizscreen .radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--text-dark-muted);
  flex-shrink: 0;
  position: relative;
}

.m-quizscreen .radioOn::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent-orange);
}

.m-quizscreen .cta {
  position: sticky;
  bottom: 0;
  padding: 16px 20px 24px;
  background: linear-gradient(180deg, rgba(14,16,17,0) 0%, var(--bg-dark) 30%);
  text-align: center;
}

.m-quizscreen .ctaBtn {
  background: transparent;
  border: 0;
  color: var(--text-dark-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 0;
}

.m-quizscreen .ctaBtn.enabled { color: var(--text-dark); }

/* from components/screens/ResistanceKegelPlayer.module.css */
.m-resistancekegelplayer .page {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-light);
  color: var(--text-light);
}

/* ---------- Header ---------- */

.m-resistancekegelplayer .header {
  flex: 0 0 auto;
  background: var(--surface-light);
  padding: 10px 18px 16px;
}

.m-resistancekegelplayer .headerTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.m-resistancekegelplayer .backBtn {
  width: 40px;
  height: 40px;
  margin-left: -8px;
  border: 0;
  background: transparent;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-resistancekegelplayer .menuCircle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #E0E1DE;
  flex-shrink: 0;
}

.m-resistancekegelplayer .counter {
  margin: 4px 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-light);
}

.m-resistancekegelplayer .counterChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin: 0 2px;
  border-radius: 6px;
  background: var(--accent-orange);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 14px;
}

.m-resistancekegelplayer .title {
  margin: 6px 0 0;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-light);
}

/* ---------- Video / visual ---------- */

.m-resistancekegelplayer .videoArea {
  position: relative;
  flex: 0 0 auto;
  height: 38dvh;
  min-height: 250px;
  background: #E0E1DE;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.m-resistancekegelplayer .diagramWrap {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 2.5 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.m-resistancekegelplayer .diagramSvg {
  width: 100%;
  height: 100%;
}

.m-resistancekegelplayer .repsOverlay {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  color: var(--accent-strong);
}

.m-resistancekegelplayer .restBadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.m-resistancekegelplayer .restBadgeLabel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
  line-height: 1;
}

.m-resistancekegelplayer .placeholderLabel {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-light-muted);
}

/* Control row — sits UNDER the video: pause, progress bar, volume. */
.m-resistancekegelplayer .videoBar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: var(--surface-light);
  border-bottom: 1px solid var(--border-light);
}

.m-resistancekegelplayer .barBtn {
  border: 0;
  background: transparent;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.m-resistancekegelplayer .barTime {
  font-family: var(--font-sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-light-muted);
  flex-shrink: 0;
}

.m-resistancekegelplayer .scrubTrack {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 3px;
  background: var(--border-light);
  overflow: hidden;
}

.m-resistancekegelplayer .scrubFill {
  height: 100%;
  background: var(--accent-orange);
  border-radius: 2px;
  transition: width 0.2s linear;
}

/* ---------- Exercise timeline ---------- */

.m-resistancekegelplayer .timeline {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface-light);
  padding: 20px 20px 8px;
}

.m-resistancekegelplayer .timelineRow {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.m-resistancekegelplayer .timelineMarker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.m-resistancekegelplayer .timelineNum {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  z-index: 1;
}

.m-resistancekegelplayer .num_upcoming {
  background: #E0E1DE;
  color: var(--text-light);
  box-shadow: none;
}

.m-resistancekegelplayer .num_done {
  background: var(--accent-orange);
  color: var(--accent-ink);
  box-shadow: none;
}

.m-resistancekegelplayer .num_current {
  background: var(--green-fill);
  color: var(--text-light);
  border: 1px solid var(--green-frame);
  box-shadow: none;
}

.m-resistancekegelplayer .timelineLine {
  flex: 1 1 auto;
  width: 2px;
  min-height: 22px;
  background: var(--border-light);
  margin: 2px 0;
}

.m-resistancekegelplayer .timelineBody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 22px;
  min-width: 0;
}

.m-resistancekegelplayer .timelineTitle {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.m-resistancekegelplayer .timelineTitleCurrent {
  color: var(--accent-strong);
}

.m-resistancekegelplayer .timelineMeta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-light-muted);
}

/* ---------- Footer ---------- */

.m-resistancekegelplayer .footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-light);
  background: var(--surface-light);
}

.m-resistancekegelplayer .timeBlock {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m-resistancekegelplayer .timeLabel {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-light);
}

.m-resistancekegelplayer .timeValue {
  font-family: var(--font-sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-light-muted);
}

.m-resistancekegelplayer .nextBtn {
  min-width: 150px;
  height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-orange);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.m-resistancekegelplayer .nextBtn:active {
  transform: scale(0.99);
  box-shadow: none;
}

/* from components/screens/SessionPlayerScreen.module.css */
/* ===== Shared ===== */
.m-sessionplayerscreen .page {
  position: relative;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  font-family: var(--font-sans);
}

.m-sessionplayerscreen .roundBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  padding: 0;
}

.m-sessionplayerscreen .roundBtnLight {
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.m-sessionplayerscreen .roundBtnDark {
  background: #192126;
  color: #fff;
}

/* =====================================================
   COUNTDOWN STATE
   ===================================================== */
.m-sessionplayerscreen .countdownPage {
  background: #E0E1DE;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
}

.m-sessionplayerscreen .topBar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 0;
}

.m-sessionplayerscreen .guidePill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0 14px;
  padding: 6px 12px;
  background: #E0E1DE;
  border: 0;
  border-radius: 6px;
  font-family: var(--font-serif);
  font-size: 13px;
  color: #192126;
  width: fit-content;
  cursor: pointer;
}

.m-sessionplayerscreen .guidePill svg {
  width: 12px;
  height: 12px;
}

.m-sessionplayerscreen .countdownCenter {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
}

.m-sessionplayerscreen .bigNumber {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 88px;
  line-height: 1;
  color: var(--accent-orange);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

.m-sessionplayerscreen .getReady {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  margin-top: 4px;
  color: #192126;
}

.m-sessionplayerscreen .ringWrap {
  position: relative;
  width: 230px;
  height: 230px;
  margin-top: 28px;
}

.m-sessionplayerscreen .ringSvg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.m-sessionplayerscreen .ringTrack {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
}

.m-sessionplayerscreen .ringFill {
  fill: none;
  stroke: var(--accent-orange);
  stroke-width: 18;
  stroke-linecap: butt;
}

.m-sessionplayerscreen .ringInterior {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: var(--green-fill);
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-sessionplayerscreen .ringInnerDisc {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #192126;
  border: 0;
  cursor: pointer;
}

.m-sessionplayerscreen .tooltip {
  position: relative;
  margin-top: 14px;
  background: #FFFFFF;
  color: #192126;
  border-radius: 14px;
  padding: 8px 12px;
  font-family: var(--font-serif);
  font-size: 13px;
  box-shadow: none;
}

.m-sessionplayerscreen .tooltip::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #FFFFFF;
}

/* Bottom card on countdown */
.m-sessionplayerscreen .bottomCard {
  margin-top: auto;
  background: #FFFFFF;
  border-radius: 12px 12px 0 0;
  padding: 14px 16px 18px;
  box-shadow: none;
}

.m-sessionplayerscreen .bottomCardTopRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #192126;
}

.m-sessionplayerscreen .iconBtn {
  background: transparent;
  border: 0;
  padding: 6px;
  color: #192126;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-sessionplayerscreen .audioRow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-light-muted);
}

.m-sessionplayerscreen .audioBar {
  position: relative;
  flex: 1;
  height: 3px;
  background: #E0E1DE;
  border-radius: 2px;
  overflow: hidden;
}

.m-sessionplayerscreen .audioBarFill {
  position: absolute;
  inset: 0;
  width: 66%;
  background: var(--accent-orange);
}

.m-sessionplayerscreen .tabsRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.m-sessionplayerscreen .tab {
  background: transparent;
  border: 0;
  padding: 8px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #192126;
  border-radius: 999px;
  cursor: pointer;
}

.m-sessionplayerscreen .tabActive {
  background: #E0E1DE;
}

.m-sessionplayerscreen .dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}

.m-sessionplayerscreen .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #E0E1DE;
}

.m-sessionplayerscreen .dotActive {
  background: #192126;
}

.m-sessionplayerscreen .controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 14px;
}

.m-sessionplayerscreen .skipBtn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: #192126;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-sessionplayerscreen .skipBtn span {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: #192126;
}

.m-sessionplayerscreen .bigPauseBtn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #192126;
  box-shadow: none;
  cursor: pointer;
}

/* =====================================================
   VIDEO STATE
   ===================================================== */
.m-sessionplayerscreen .videoPage {
  background: #192126;
  color: #fff;
  position: relative;
}

.m-sessionplayerscreen .videoBg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #6B5648 0%, #4A3A30 55%, #3D3128 100%);
}

.m-sessionplayerscreen .videoTop {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  z-index: 2;
}

.m-sessionplayerscreen .videoBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 18px 22px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.75) 100%);
  padding-top: 80px;
}

.m-sessionplayerscreen .videoTitle {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  color: #FFFFFF;
  margin: 0;
}

.m-sessionplayerscreen .videoSubtitle {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 2px 0 14px;
}

.m-sessionplayerscreen .seekBar {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

.m-sessionplayerscreen .seekBarFill {
  position: absolute;
  inset: 0;
  width: 92%;
  background: var(--accent-orange);
}

.m-sessionplayerscreen .seekTimes {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

.m-sessionplayerscreen .videoControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 18px;
}

.m-sessionplayerscreen .videoSkipBtn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-sessionplayerscreen .videoSkipBtn span {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: #FFFFFF;
}

/* =====================================================
   LOADING STATE
   ===================================================== */
.m-sessionplayerscreen .loadingPage {
  background: #FFFFFF;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
}

.m-sessionplayerscreen .loadingTop {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.m-sessionplayerscreen .loadingTopBar {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px 0;
}

.m-sessionplayerscreen .closeBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E0E1DE;
  border: 0;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-sessionplayerscreen .loadingCenter {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.m-sessionplayerscreen .kettlebellWrap {
  color: #192126;
}

.m-sessionplayerscreen .loadingText {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  letter-spacing: 0.02em;
  color: #E0E1DE;
  line-height: 1;
}

.m-sessionplayerscreen .loadingSpeaker {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #192126;
  color: #FFFFFF;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-sessionplayerscreen .loadingPanel {
  background: #192126;
  color: #FFFFFF;
  padding: 22px 18px 22px;
  border-radius: 14px 14px 0 0;
  position: relative;
}

.m-sessionplayerscreen .loadingPanelStripe {
  position: absolute;
  top: -2px;
  left: 0;
  width: 18%;
  height: 2px;
  background: var(--accent-orange);
}

.m-sessionplayerscreen .loadingTitle {
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  margin: 0;
  color: #FFFFFF;
}

.m-sessionplayerscreen .loadingDuration {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  color: var(--accent-orange);
  margin: 10px 0 18px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.m-sessionplayerscreen .loadingControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.m-sessionplayerscreen .chevBtn {
  background: transparent;
  border: 0;
  color: #FFFFFF;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-sessionplayerscreen .squarePauseBtn {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: transparent;
  border: 1.5px solid #FFFFFF;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-sessionplayerscreen .doneBtn {
  flex: 1;
  height: 52px;
  border-radius: 14px;
  background: #FFFFFF;
  color: #192126;
  border: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
  cursor: pointer;
}

/* from components/screens/SplashScreen.module.css */
.m-splashscreen .splash {
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Soft pastel wash in the app's own accent + violet, over a light base. */
  background:
    radial-gradient(90% 55% at 12% 10%, color-mix(in srgb, #3877C4 34%, transparent) 0%, transparent 55%),
    radial-gradient(85% 60% at 95% 42%, rgba(164, 138, 237, 0.30) 0%, transparent 60%),
    linear-gradient(158deg, color-mix(in srgb, #3877C4 12%, #fff) 0%, #fff 50%, rgba(164, 138, 237, 0.12) 100%);
}

/* Oversized translucent wordmark behind the hero (echoes the homepage). */
.m-splashscreen .watermark {
  position: absolute;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 14.5vw, 66px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.m-splashscreen .copy {
  position: relative;
  z-index: 2;
  padding: 150px 28px 0;
}

.m-splashscreen .title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.m-splashscreen .titleTop {
  color: var(--text-light);
}

.m-splashscreen .titleAccent {
  background: linear-gradient(90deg, #3877C4 0%, var(--color-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.m-splashscreen .subtitle {
  margin: 16px 0 0;
  max-width: 300px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-light-muted);
}

/* Couple photography, bleeding off the bottom and fading up into the wash. */
.m-splashscreen .hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
}

/* from components/screens/SupportCategoryScreen.module.css */
.m-supportcategoryscreen .root {
  min-height: 100dvh;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}

.m-supportcategoryscreen .topBar {
  padding: 14px 16px 6px;
}

.m-supportcategoryscreen .backBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--text-light);
  border: 1px solid var(--border-card);
  box-shadow: none;
}

.m-supportcategoryscreen .bodyPad {
  padding: 8px 18px 14px;
  flex: 1;
}

.m-supportcategoryscreen .categoryLabel {
  margin: 12px 0 4px;
  color: var(--text-light-muted);
  font-family: var(--font-serif);
  font-size: 15px;
}

.m-supportcategoryscreen .categoryName {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-light);
}

.m-supportcategoryscreen .hairline {
  height: 1px;
  background: var(--border-light);
  margin: 10px 0 14px;
}

.m-supportcategoryscreen .fieldLabel {
  display: block;
  color: var(--text-light-muted);
  font-family: var(--font-serif);
  font-size: 14px;
  margin-bottom: 4px;
}

.m-supportcategoryscreen .emailInput {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid #BBF246;
  background: var(--surface-beige);
  padding: 12px 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-light);
  outline: none;
}

.m-supportcategoryscreen .textarea {
  width: 100%;
  min-height: 130px;
  border: 0;
  background: var(--surface-beige);
  padding: 14px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-light);
  outline: none;
  resize: vertical;
}

.m-supportcategoryscreen .attachRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 4px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-top: 18px;
  cursor: pointer;
  color: var(--text-light);
}

.m-supportcategoryscreen .attachLabel {
  font-family: var(--font-serif);
  font-size: 16px;
}

.m-supportcategoryscreen .fileHidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.m-supportcategoryscreen .attachName {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-light-muted);
}

.m-supportcategoryscreen .notice {
  margin: 14px 0 18px;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--accent-strong);
  line-height: 1.4;
}

.m-supportcategoryscreen .noticeBold {
  font-weight: 700;
}

.m-supportcategoryscreen .darkCta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 4px;
  background: var(--cta-dark);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
}

.m-supportcategoryscreen .darkCta:disabled {
  background: #E0E1DE;
  color: var(--text-light-muted);
  cursor: not-allowed;
}

.m-supportcategoryscreen .heading {
  margin: 14px 0 12px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-light);
}

.m-supportcategoryscreen .subtle {
  margin: 0 0 18px;
  color: var(--text-light-muted);
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
}

.m-supportcategoryscreen .cantHeading {
  margin: 14px 0 18px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: var(--text-light);
}

.m-supportcategoryscreen .cantStepsTitle {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
}

.m-supportcategoryscreen .cantSteps {
  padding-left: 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-light);
}

.m-supportcategoryscreen .cantCtaWrap {
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.m-supportcategoryscreen .anywayLink {
  background: transparent;
  border: 0;
  color: var(--text-light-muted);
  text-decoration: underline;
  font-family: var(--font-serif);
  font-size: 14px;
  padding: 4px;
}

/* from components/screens/SupportLandingScreen.module.css */
.m-supportlandingscreen .root {
  min-height: 100dvh;
  background: var(--bg-light);
  padding-bottom: 40px;
}

.m-supportlandingscreen .topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
}

.m-supportlandingscreen .backChip,
.m-supportlandingscreen .faqChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--text-light);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--border-card);
  box-shadow: none;
}

.m-supportlandingscreen .hero {
  margin: 14px 16px 18px;
  background: var(--surface-beige);
  border-radius: 14px;
  padding: 26px 22px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.m-supportlandingscreen .headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.04em;
}

.m-supportlandingscreen .lead {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
}

.m-supportlandingscreen .avatars {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.m-supportlandingscreen .face {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--surface-beige);
  background: #E0E1DE;
  box-shadow: none;
}

.m-supportlandingscreen .faceLeft { background: #E0E1DE; }
.m-supportlandingscreen .faceCenter {
  background: #E0E1DE;
  margin-left: -10px;
  z-index: 1;
}
.m-supportlandingscreen .faceRight {
  background: #E0E1DE;
  margin-left: -10px;
}

.m-supportlandingscreen .list {
  background: #FFFFFF;
  margin: 0 16px;
  border-radius: 14px;
  padding: 18px 0 4px;
  border: 1px solid var(--border-card);
  box-shadow: none;
}

.m-supportlandingscreen .sectionTitle {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

.m-supportlandingscreen .sectionSub {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-light-muted);
  text-align: center;
}

.m-supportlandingscreen .rows {
  list-style: none;
  padding: 0;
  margin: 0;
}

.m-supportlandingscreen .row {
  border-top: 1px solid var(--border-light);
}

.m-supportlandingscreen .rowLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: var(--text-light);
}

.m-supportlandingscreen .rowLabel {
  font-family: var(--font-serif);
  font-size: 16px;
}

.m-supportlandingscreen .rowChevron { color: var(--text-light-muted); }

/* from components/screens/TermsPrivacyScreen.module.css */
.m-termsprivacyscreen .root {
  min-height: 100dvh;
  background: var(--bg-light);
  padding-bottom: 40px;
}

.m-termsprivacyscreen .topBar {
  padding: 14px 16px 6px;
}

.m-termsprivacyscreen .backChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--text-light);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--border-card);
  box-shadow: none;
}

.m-termsprivacyscreen .title {
  margin: 14px 18px 12px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
}

.m-termsprivacyscreen .body {
  background: #FFFFFF;
  margin: 4px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-card);
  box-shadow: none;
  padding: 6px 18px;
}

.m-termsprivacyscreen .section {
  padding: 16px 0;
  border-top: 1px solid var(--border-light);
}

.m-termsprivacyscreen .section:first-child { border-top: 0; }

.m-termsprivacyscreen .heading {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-light);
}

.m-termsprivacyscreen .copy {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-light);
}

/* Highlighted in-copy link out to the homepage's canonical legal page.
   Text stays black; the lime underline + weight is the "highlight". */
.m-termsprivacyscreen .legalLink {
  color: var(--text-light);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.m-termsprivacyscreen .legalLink:hover {
  text-decoration-color: var(--accent-orange-hover);
}

/* from components/screens/TodayScreen.module.css */
/* Redesigned Today (Figma today-program-*): full-bleed shader hero flowing
   from the very top of the page, content cards on a #F2F1F6 canvas. */
/* The redesign is drawn full-bleed at 402pt — let it fill real phones
   (up to 430pt) instead of the default 375px app column. */
.m-todayscreen.viewport { max-width: 430px; }

.m-todayscreen .page {
  min-height: 100dvh;
  background: #F2F1F6;
  color: var(--text-light);
  padding: 0 0 calc(84px + env(safe-area-inset-bottom));
}

/* Hero — ribbed-glass shader panel. The CSS gradient (inline, per program) is
   the static fallback; the WebGL canvas fades in over it once it has drawn. */
.m-todayscreen .hero {
  position: relative;
  /* The 460pt Figma frame includes the 59pt iOS status bar; in-browser the
     viewport starts below it. Standalone/PWA gets it back via the inset. */
  height: calc(401px + env(safe-area-inset-top, 0px));
  /* Lesson cards start at y=432 in the frame — they overlap the fade zone. */
  margin-bottom: -28px;
  color: #FFFFFF;
}

.m-todayscreen .heroShader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.m-todayscreen .heroShader.is-ready { opacity: 1; }

.m-todayscreen .heroContent {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(13px + env(safe-area-inset-top, 0px));
}

/* Program name — tapping opens the program picker sheet. */
.m-todayscreen .heroTitle {
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 32px);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFFFFF;
}

.m-todayscreen .heroTitleText {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 12x18 box holding the 18x12 chevron-up-down glyph rotated 90°. */
.m-todayscreen .heroChevBox {
  width: 12px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.m-todayscreen .heroChev {
  color: #FFFFFF;
  flex-shrink: 0;
}

/* Dashed-arc progress gauge. Geometry mirrors the exported Figma asset:
   354x104 box, tick artwork 333.5x93 inset (10.25, 11). The filled layer is
   revealed with a conic-gradient mask (see the inline script). */
.m-todayscreen .heroGauge {
  position: relative;
  width: 354px;
  height: 104px;
  margin-top: 20px;
  flex-shrink: 0;
}

.m-todayscreen .gaugeBase,
.m-todayscreen .gaugeFill img {
  position: absolute;
  left: 10.25px;
  top: 11px;
  width: 333.5px;
  height: 93px;
  display: block;
}

.m-todayscreen .gaugeBase { opacity: 0.3; }

.m-todayscreen .gaugeFill {
  position: absolute;
  inset: 0;
  /* hidden until the reveal script sets the sector clip-path (a conic-gradient
     mask would be simpler, but Safari renders it unreliably) */
  clip-path: polygon(0 0, 0 0, 0 0);
  -webkit-clip-path: polygon(0 0, 0 0, 0 0);
}

.m-todayscreen .gaugeLabel {
  position: absolute;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1;
  color: #FFFFFF;
  opacity: 0.7;
}

.m-todayscreen .gaugeLabelMin {
  left: 2px;
  top: 64px;
  transform: rotate(-45deg);
}

.m-todayscreen .gaugeLabelMax {
  right: 0;
  top: 62px;
  transform: rotate(45deg);
}

.m-todayscreen .gaugeDot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #FFFFFF;
  opacity: 0.7;
}

.m-todayscreen .heroPct {
  position: absolute;
  left: 0;
  right: 0;
  top: 68px;
  text-align: center;
  font-family: var(--font-serif);
  line-height: 1;
  color: #FFFFFF;
}

.m-todayscreen .pctNum { font-size: 60px; }
.m-todayscreen .pctSign { font-size: 35px; }

.m-todayscreen .heroModule {
  margin-top: 52px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.m-todayscreen .heroModuleName {
  margin-top: 10px;
  padding: 0 20px;
  max-width: 380px;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  color: #FFFFFF;
}

/* Frosted "Stage N of M" pill with prev/next day chevrons. */
.m-todayscreen .dayPill {
  position: relative;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 17px;
  border-radius: 40px;
  background: rgba(0, 0, 0, 0.10);
}

/* Angled gradient border (per Figma): a 1px ring painted by a pseudo-element —
   gradient fill masked to the border area (content-box XOR full box), since
   border-image can't follow a border-radius. */
.m-todayscreen .dayPill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 40px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.30) 55%,
    rgba(255, 255, 255, 0.65) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.m-todayscreen .dayNav {
  background: transparent;
  border: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

/* No previous/next day to go to: keep the chevron for balance, dimmed. */
.m-todayscreen .dayNavDisabled { opacity: 0.4; }

.m-todayscreen .dayNavLock { opacity: 0.7; }

.m-todayscreen .dayLabel {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.4;
  color: #FFFFFF;
}

.m-todayscreen .section {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  padding: 0 20px;
}

.m-todayscreen .hero + .section { margin-top: 0; }

.m-todayscreen .sectionLabel {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 1.1px;
  color: var(--text-light-muted);
  text-transform: uppercase;
  font-weight: 400;
}

/* Narrow phones (<390px): the 354px gauge won't fit — scale it around its
   top centre and absorb the leftover height. */
@media (max-width: 389px) {
  .m-todayscreen .heroGauge {
    transform: scale(0.88);
    transform-origin: top center;
    margin-bottom: -12px;
  }
}

.m-todayscreen .cardList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-todayscreen .lessonCard,
.m-todayscreen .practiceCard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 0;
  box-shadow: none;
  border-radius: 26px;
  padding: 16px;
  color: var(--text-light);
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

/* Locked optional cards (no subscription): blur the content + centred lock. */
.m-todayscreen .locked .lessonThumb,
.m-todayscreen .locked .lessonText,
.m-todayscreen .locked .practiceThumb,
.m-todayscreen .locked .practiceBody {
  filter: blur(3px);
  opacity: 0.5;
}

.m-todayscreen .lockCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #192126;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.m-todayscreen .lessonCard:active,
.m-todayscreen .practiceCard:active { transform: scale(0.99); }

.m-todayscreen .lessonThumb,
.m-todayscreen .practiceThumb {
  width: 72px;
  height: 64px;
  border-radius: 10px;
  background-color: #E0E1DE;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  position: relative;
}

.m-todayscreen .bookmark {
  position: absolute;
  top: 4px;
  left: 4px;
  color: var(--accent-strong);
  fill: var(--accent-orange);
}

.m-todayscreen .lessonText,
.m-todayscreen .practiceBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding-right: 8px;
}

.m-todayscreen .lessonTitle,
.m-todayscreen .practiceTitle {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: #192126;
  line-height: 1.2;
}

.m-todayscreen .lessonMeta,
.m-todayscreen .practiceMeta {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-light-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* "meta · duration" separator dot. */
.m-todayscreen .metaDot {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: var(--text-light-muted);
  flex-shrink: 0;
}

/* Soft program-accent chip (was a solid red badge). */
.m-todayscreen .optional {
  font-size: 11px;
  color: var(--shader-accent, #E8642C);
  background: rgba(232, 100, 44, 0.12);
  background: color-mix(in srgb, var(--shader-accent, #E8642C) 12%, transparent);
  border: 0;
  padding: 2px 8px;
  border-radius: 6px;
}

.m-todayscreen .circleChev {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #192126;
  flex-shrink: 0;
}

.m-todayscreen .circleCheck {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #192126;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Optional content locked behind the Kegel Ultimate paywall. */
.m-todayscreen .circleLock {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #192126;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* from components/screens/UnlockPelvicFloorScreen.module.css */
.m-unlockpelvicfloorscreen .page {
  position: relative;
  min-height: 100dvh;
  height: 100dvh;
  background: #000;
  color: #fff;
  overflow: hidden;
}

.m-unlockpelvicfloorscreen .video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  background: #000;
}

/* dark gradient over top + bottom so controls read on bright frames */
.m-unlockpelvicfloorscreen .scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 18%),
    linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 38%);
}

/* ----- Top bar ----- */
.m-unlockpelvicfloorscreen .topBar {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.m-unlockpelvicfloorscreen .roundBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ----- Bottom controls ----- */
.m-unlockpelvicfloorscreen .bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 20px 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-unlockpelvicfloorscreen .title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
}

.m-unlockpelvicfloorscreen .subtitle {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.m-unlockpelvicfloorscreen .seek {
  position: relative;
  width: 100%;
  height: 4px;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  cursor: pointer;
  margin-top: 6px;
}

.m-unlockpelvicfloorscreen .seekFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent-orange);
  border-radius: 2px;
}

.m-unlockpelvicfloorscreen .seekTimes {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}

.m-unlockpelvicfloorscreen .controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 8px;
}

.m-unlockpelvicfloorscreen .skipBtn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.m-unlockpelvicfloorscreen .skipBtn span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -42%);
  font-size: 11px;
  font-weight: 700;
}

.m-unlockpelvicfloorscreen .bigPlayBtn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #192126;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ----- End-of-video OK overlay ----- */
.m-unlockpelvicfloorscreen .endOverlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 20px 28px;
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 60%);
}

.m-unlockpelvicfloorscreen .okBtn {
  width: 100%;
  max-width: 340px;
  height: 56px;
  border: 0;
  border-radius: 4px;
  background: var(--cta-dark);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* from components/ui/Badge.module.css */
.m-badge .badge {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.m-badge .burgundy { background: var(--badge-burgundy); }
.m-badge .gray     { background: var(--badge-gray); color: #192126; }
.m-badge .orange   { background: var(--badge-orange); color: var(--accent-ink); }

/* from components/ui/OtpInput.module.css */
.m-otpinput .row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.m-otpinput .box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid var(--border-light, #e4e9e6);
  background: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-light);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.m-otpinput .box:focus {
  border-color: #2f7a63;
  box-shadow: 0 0 0 3px rgba(47, 122, 99, 0.12);
}

/* from components/ui/PrimaryButton.module.css */
.m-primarybutton .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.15s ease, background 0.15s ease;
}

/* Flat: no depth. Subtle press feedback via opacity only. */
.m-primarybutton .btn:active:not(:disabled) {
  opacity: 0.85;
}

.m-primarybutton .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.m-primarybutton .full { width: 100%; }

.m-primarybutton .orange {
  background: var(--accent-orange);
  color: var(--accent-ink);
}
.m-primarybutton .orange:hover:not(:disabled) {
  background: var(--accent-orange-hover);
}

.m-primarybutton .dark {
  background: var(--cta-dark);
  color: #FFFFFF;
}

.m-primarybutton .beige {
  background: var(--surface-beige);
  color: var(--text-light);
}

.m-primarybutton .darkOutline {
  background: transparent;
  color: var(--text-dark);
  border: 1px solid var(--text-dark-muted);
}

/* from components/ui/ProgressBar.module.css */
.m-progressbar .track {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.m-progressbar .light { background: rgba(0,0,0,0.08); }
.m-progressbar .dark  { background: rgba(255,255,255,0.12); }

.m-progressbar .fill {
  height: 100%;
  background: var(--accent-orange);
  transition: width 0.3s ease;
}

.m-progressbar .segmented {
  display: flex;
  gap: 6px;
  width: 100%;
}

.m-progressbar .seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(0,0,0,0.08);
}

.m-progressbar .segDone {
  background: var(--cta-dark);
}

/* from components/ui/SuccessAnimation.module.css */
/* Standard completion-screen animation — orange circle draws, checkmark
   fills in, four 4-point sparkles burst outside the circle then fade.
   Color is driven by the `--accent` CSS custom property (set on .scene)
   so each consumer can pass its own brand color. */

.m-successanimation .scene {
  --accent: var(--accent-orange, #BBF246);

  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.m-successanimation .svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Filled flat lime disc — pops in (like the reference sticker icon). */
.m-successanimation .disc {
  fill: var(--accent);
  transform: scale(0);
  transform-origin: 50% 50%;
  animation: discPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* White flat checkmark on top of the disc. */
.m-successanimation .check {
  fill: none;
  stroke: #fff;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 125;
  stroke-dashoffset: 125;
  animation: drawCheck 0.4s ease-out 0.5s forwards;
}

@keyframes discPop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

/* Sparkles */
.m-successanimation .sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  opacity: 0;
  pointer-events: none;
  animation: sparkle 1.2s ease-out 1.15s forwards;
}

.m-successanimation .sparkle svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--accent-orange);
}

/* Pop in and STAY (no fade-out). */
@keyframes sparkle {
  0%   { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) scale(0) rotate(0deg); }
  60%  { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)) scale(1.15) rotate(95deg); }
  100% { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)) scale(1) rotate(90deg); }
}

.m-successanimation .s1 { --x:  105px; --y:  -85px; animation-delay: 1.15s; }
.m-successanimation .s2 { --x: -110px; --y:  -75px; animation-delay: 1.25s; }
.m-successanimation .s3 { --x:   95px; --y:   95px; animation-delay: 1.20s; width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.m-successanimation .s4 { --x: -100px; --y:   95px; animation-delay: 1.35s; }

/* from components/UltimateGate.module.css */
/* Locked (no-subscription) preview: the gated content renders behind a blur
   with a lock overlay + Unlock CTA on top. */
.m-ultimategate .gate {
  position: relative;
  min-height: 100dvh;
}

.m-ultimategate .blurred {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.m-ultimategate .overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
}

.m-ultimategate .backBtn {
  position: absolute;
  top: 16px;
  left: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--border-card);
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m-ultimategate .lockCircle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #192126;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.m-ultimategate .lockTitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--text-light);
}

.m-ultimategate .lockText {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-light-muted);
  max-width: 280px;
}

.m-ultimategate .unlockBtn {
  margin-top: 8px;
  background: var(--accent-orange);
  color: var(--accent-ink);
  border: 0;
  border-radius: 999px;
  padding: 15px 36px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  cursor: pointer;
}