/* base.css — loaded by EVERY page.
 *
 * Design tokens, @font-face, the Phosphor glyph subset, the reset, and the
 * chrome every page shares: nav, footer, .container, .btn, .eyebrow.
 *
 * Split out of the old single styles.css. If a rule here is only ever used by
 * one page, it belongs in that page's stylesheet instead.
 */

/* =============================================================================
 * Reclaim — Design Tokens
 * Source of truth: `constants/colors.ts`, `constants/fonts.ts`,
 * `constants/radius.ts`, `constants/styles.ts` from the Reclaim codebase.
 *
 * Reclaim is a dark, meditative mobile app. Almost every screen sits on top of
 * a photographic background (mountain, pagoda, lantern, moon-gate) and uses
 * BlurView "Liquid Glass" surfaces on top. The token system below preserves
 * that contract: most surfaces are translucent whites + a single grounded
 * green accent; solid color is rare and reserved.
 * ========================================================================== */

:root {
  /* --------------------------------------------------------------- TEXT  */
  --fg-primary:        #FFFFFF;          /* white on photo / dark surfaces  */
  --fg-secondary:      #EBEBF599;        /* white-60% — labels, captions    */
  --fg-on-light:       #1C1C1E;          /* near-black for article surfaces */
  --fg-on-light-2:     #1c1c1e99;        /* secondary on cream surfaces     */

  /* ------------------------------------------------------ BRAND ACCENTS  */
  --accent:            #5F9569;          /* "primaryaccent" — green CTA     */
  --accent-darker:     #476453;          /* gradient bottom + pressed state */
  --danger:            #973C50;          /* panic button, relapse, destruct */
  --danger-darker:     #562C36;
  --warning:           #F3F087;
  --warning-darker:    #F2D24E;

  /* -------------------------------------------------------- BACKGROUNDS  */
  --bg-cream:          #fffdf8;          /* light/article surfaces          */
  --bg-ink:            #1C1C1E;          /* deep neutral, never pure black  */

  /* ------------------------------------------------- MODAL / SHEET PALETTE */
  --modal-bg:          #FFFFFF;
  --modal-separator:   #C7C7CC;
  --modal-surface:     rgba(243,243,243,1);
  --modal-selected:    rgb(220,220,220);

  /* -------------------------------- TRANSLUCENT WHITES (on photo)  */
  --white-soft:        rgba(255,255,255,0.30);  /* tab bar, stat pills, switch track */
  --white-strong:      rgba(255,255,255,0.70);  /* image subtitles, thread lines     */

  /* ------------------------------- GLASS / OVERLAY (on photo)  */
  --glass-border:      rgba(255,255,255,0.12);  /* hairline on every glass card */
  --glass-tint:        rgba(0,0,0,0.25);        /* tint baked behind BlurView   */
  --disabled:          rgba(255,255,255,0.08);  /* locked icon backings         */
  --locked-overlay:    rgba(0,0,0,0.55);        /* dim layer over locked cards  */
  --modal-backdrop:    rgba(0,0,0,0.40);        /* scrim behind a modal sheet   */

  /* -------------------------------- LINEAR GRADIENT STOPS (image scrims) */
  --scrim-top:         rgba(0,0,0,0.15);
  --scrim-bottom:      rgba(0,0,0,0.75);
  --scrim-bottom-soft: rgba(0,0,0,0.70);

  /* ------------------------------------------------------------ RADIUS  */
  --radius-sm:         12px;   /* small buttons, action pills, comment input  */
  --radius-md:         16px;   /* mid cards, popup icons, secondary buttons   */
  --radius-lg:         20px;   /* large buttons, screen card wrappers         */
  --radius-xl:         30px;   /* plan cards, hero buttons                    */
  --radius-card:       28px;   /* post cards, journey cards, glass cards      */
  --radius-round:      9999px; /* pills, avatars, day circles, panic button   */

  /* ------------------------------------------------------------ SPACING */
  /* The Reclaim spacing scale — extend only when the value is reused.     */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           20px;
  --space-6:           24px;
  --space-7:           32px;
  --space-8:           40px;

  /* ------------------------------------------------------------ TYPE    */
  /* Reclaim uses the system stack — SF Pro on iOS, Roboto on Android.
   * On the web preview we approximate with -apple-system / Inter fallback. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Font size scale (px values straight from constants/fonts.ts) */
  --fs-small:           12px;  /* captions, helper, timestamps                */
  --fs-medium:          14px;  /* dense grid labels (calendar day numbers)    */
  --fs-base:            16px;  /* body, button labels, default paragraph      */
  --fs-large:           20px;  /* emphasized labels, large buttons, sub-head  */
  --fs-heading:         24px;  /* screen titles, prominent section headings   */
  --fs-title:           32px;  /* hero/screen-name titles (auth, onboarding)  */
  --fs-article-h1:      28px;  /* long-form article H1 inside a module        */
  --fs-article-h2:      22px;  /* long-form article H2 inside a module        */
  --fs-slowly:          28px;  /* contemplative copy that fades in (panic)    */
  --fs-streak:          72px;  /* the home-screen streak day counter          */

  /* Font weights (RN-canonical strings; named for intent) */
  --fw-medium:          500;   /* labels, captions, weak emphasis             */
  --fw-semibold:        600;   /* sub-headings, usernames, modest emphasis    */
  --fw-bold:            700;   /* button labels, titles, primary headings     */
  --fw-heavy:           800;   /* max impact — streak, payment hero, panic    */

  /* ------------------------------- ELEVATION (the "glass" formula)
   * Reclaim has no traditional drop shadows. Depth comes from translucent
   * white borders + a behind-BlurView tint. These vars encode that recipe
   * so HTML mocks can recreate it with backdrop-filter.                   */
  --glass-blur:         saturate(140%) blur(22px);
  --glass-backdrop:     var(--glass-tint);        /* tint layer behind blur */
  --glass-border-1:     1px solid var(--glass-border);
}


/* =============================================================================
 * Semantic shortcuts
 * Match the React Native intent names so a designer can grep for "h1" / "p"
 * and find one place. Apply to plain HTML mocks.
 * ========================================================================== */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =============================================================================
 * Glass surface — the most important element of the system.
 * Recreates the React Native <GlassCard> on the web: rounded rect with a
 * dark tint + backdrop-blur + 1px white-alpha border.
 * ========================================================================== */

/* Pill / chip variant — used for tabs, action buttons, time pills */

/* Outlined action button — community/post action pill (like, reply, comments) */

/* Primary green CTA — used on auth, primary actions */

/* Panic / destructive — vertical gradient red */


/* ====================================================== */

/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/manrope-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/manrope-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/manrope-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/manrope-4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/manrope-5.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/manrope-6.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/manrope-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/manrope-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/manrope-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/manrope-4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/manrope-5.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/manrope-6.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/manrope-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/manrope-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/manrope-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/manrope-4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/manrope-5.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/manrope-6.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/manrope-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/manrope-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/manrope-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/manrope-4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/manrope-5.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/manrope-6.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/newsreader-1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/newsreader-2.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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/newsreader-3.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/newsreader-1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/newsreader-2.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: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/newsreader-3.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;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/newsreader-1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/newsreader-2.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: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/newsreader-3.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;
}


/* ====================================================== */

/* Phosphor Icons — trimmed to the icons used on this page */

@font-face{font-family:"Phosphor";font-display:block;src:url("../assets/fonts/phosphor.woff2") format("woff2")}
@font-face{font-family:"Phosphor-Fill";font-display:block;src:url("../assets/fonts/phosphor-fill.woff2") format("woff2")}
@font-face{font-family:"Phosphor-Duotone";font-display:block;src:url("../assets/fonts/phosphor-duotone.woff2") format("woff2")}

/* ====================================================== */


    :root {
      --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
      --sans:  'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      --ink:   #0F1714;
      --ink-2: #1C2622;
      --cream: #F4EDE3;
      --cream-2: #ECE4D6;
      --moss:  #5F9569;
      --moss-dark: #476453;
      --moss-bright: #A9CDAF;
      --moss-soft: rgba(95,149,105,0.12);
      --ink-fg:  #F4EDE3;
      --ink-fg2: rgba(244,237,227,0.64);
      --cream-fg:  #0F1714;
      --cream-fg2: rgba(15,23,20,0.64);
      --rule: rgba(244,237,227,0.12);
      --rule-strong: rgba(244,237,227,0.24);
      --rule-light: rgba(15,23,20,0.10);
    }


    *, *::before, *::after { box-sizing: border-box; }

    html { scroll-behavior: smooth; scroll-snap-type: y proximity; }

    html, body { margin: 0; padding: 0; overflow-x: clip; }

    body {
      font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.6;
      background: var(--ink); color: var(--ink-fg);
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }

    @media (max-width: 900px) {
  html { scroll-snap-type: none; scroll-behavior: auto; }
}


    /* ──────────────────── PRIMITIVES ──────────────────── */
    .container { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }


    .eyebrow {
      font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--moss);
    }

    h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; line-height: 1.06; letter-spacing: -0.02em; }

    h1 { font-size: clamp(42px, 4.6vw, 74px); }

    h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; }

    h3 { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25; }

    h1 em, h2 em { font-style: italic; font-weight: 400; }

    p { margin: 0; max-width: 60ch; }


    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 14px 28px; border-radius: 9999px; border: 1px solid transparent;
      font-family: var(--sans); font-size: 15px; font-weight: 700;
      cursor: pointer; text-decoration: none; white-space: nowrap;
      transition: background-color .2s, border-color .2s, transform .3s cubic-bezier(.22,1,.36,1);
    }

    .btn:hover { transform: translateY(-1px); }

    .btn-primary { background: linear-gradient(135deg, var(--moss) 0%, var(--moss-dark) 100%); color: #fff; }

    .btn-primary:hover { background: linear-gradient(135deg, var(--moss-dark) 0%, #3A5A40 100%); }


    /* ──────────────────── NAVBAR ──────────────────── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      padding-top: env(safe-area-inset-top);
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
    }

    .nav.solid {
      background: rgba(15,23,20,0.62);
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      border-bottom-color: var(--rule);
    }

    .nav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 11px; position: relative; }

    .nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-fg); }

    .nav-brand img { width: 32px; height: 32px; border-radius: 8px; display: block; }

    .nav-brand span { font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

        .nav-links-center { display: flex; gap: 26px; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); }

    .nav-links-center a { color: var(--ink-fg2); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .15s; }

    .nav-links-center a:hover { color: var(--ink-fg); }

    .nav-right { display: flex; align-items: center; gap: 10px; }

    /* Hidden above the breakpoint — the links are already in the bar there. */
    .nav-toggle { display: none; }

    @media (max-width: 860px) {
  .nav .nav-inner { padding: 10px 20px; }

  /* The links stop being a row in the bar and become a panel hanging off it.
     Closed is display:none rather than an opacity/height transition, so the
     links are genuinely out of the tab order while the menu is shut. */
  .nav-links-center {
    display: none;
    position: absolute; top: 100%; right: 20px; left: auto; transform: none;
    flex-direction: column; align-items: stretch; gap: 0;
    min-width: 190px; padding: 8px;
    border-radius: 16px; border: 1px solid var(--rule);
    /* FULLY opaque, not glass. The bar itself is transparent until you scroll,
       so the panel cannot inherit a background — and a translucent one lands on
       whatever the page happens to have underneath (a 68px headline, a photo
       band) and the menu labels stop being readable. Lifted one step off --ink
       so it still reads as a surface above the page. */
    background: var(--ink-2);
    box-shadow: 0 18px 40px -12px rgba(0,0,0,0.7);
  }

  .nav.open .nav-links-center { display: flex; }

  /* An open menu over a transparent bar leaves the panel floating off nothing.
     Borrow the scrolled state's glass for as long as it is open. */
  .nav.open {
    background: rgba(15,23,20,0.62);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
  }

  .nav-links-center a {
    display: block; padding: 11px 14px; border-radius: 10px;
    font-size: 15px; color: var(--ink-fg);
  }

  .nav-links-center a:active { background: rgba(244,237,227,0.07); }

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px;
    /* 44px is the minimum comfortable touch target; the bars are 18px and the
       rest is padding around them. */
    width: 44px; height: 44px; padding: 13px;
    background: none; border: 0; cursor: pointer;
  }

  .nav-toggle span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--ink-fg);
    transition: transform .2s ease, opacity .15s ease;
  }

  /* Bars fold into an X: the outer two rotate onto the middle's line, the
     middle fades. 3.5px is half the 5px gap plus the 2px bar. */
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }

  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
}

    
    /* ──────────────────── SECTION CHROME ──────────────────── */
    section { padding: 112px 0; position: relative; }

    #box-breathing > .container { position: relative; z-index: 2; }

    
    /* ──────────────────── FEATURE CARDS (art-backed) ──────────────────── */
                                                                
    /* ──────────────────── WHAT'S INSIDE — VERTICAL SPLIT (v2) ──────────────────── */
                                /* The phone mocks are JPEGs (PNG was ~2MB each for photographic content).
       JPEG has no alpha, so the frame's rounded corners are baked in here at
       the same split radius that keeps the corner circular on a 600x1249
       image: 11% of width == 5.28% of height. Full screen shown, tilted
       outward 15deg away from the copy column. */
                    
    /* ──────────────────── HEADLINE UNDERLINE (draws in on reveal) ──────────────────── */
    h1 em, h2 em {
      background-image: linear-gradient(to right, var(--moss), var(--moss));
      background-repeat: no-repeat;
      background-position: 0 94%;
      background-size: 100% 0.075em;
      padding-bottom: 0.06em;
      -webkit-box-decoration-break: clone; box-decoration-break: clone;
      transition: background-size 1.1s cubic-bezier(.22,1,.36,1) 0.35s;
    }

    @media (max-width: 760px) {
  #coach { padding-top: 140px; }
}

    @keyframes ribbonSparkle {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}


    /* ──────────────────── FOOTER ──────────────────── */
    footer { padding: 64px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--ink); }

    .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr; gap: 40px; margin-bottom: 48px; }

    @media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  /* 5 columns don't divide evenly into 2 — without this, the brand block
     gets squeezed into a nav-sized cell and "Socials" ends up alone in the
     last row with an empty cell beside it. Give brand its own full-width
     row so the remaining four nav columns form a clean 2×2 below it. */
  .foot-grid > .foot-col:first-child { grid-column: 1 / -1; }
}

    @media (max-width: 420px) {
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
}

    .foot-col h4 {
      font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--ink-fg); margin: 0 0 16px;
    }

    .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

    .foot-col a { color: var(--ink-fg2); text-decoration: none; font-size: 14px; transition: color .15s; }

    .foot-col a:hover { color: var(--ink-fg); }

    .foot-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }

    .foot-brand img { width: 40px; height: 40px; border-radius: 10px; }

    .foot-brand span { font-family: var(--sans); font-size: 26px; font-weight: 700; }

    .foot-bio { color: var(--ink-fg2); font-size: 14px; max-width: 32ch; }

    /* Plain lead-in above the address. Matches .foot-col a in size and colour so
       the two lines read as one block; it is not a link, so it cannot reuse it. */
    .foot-contact-lead { color: var(--ink-fg2); font-size: 14px; line-height: 1.6; margin: 0 0 10px; }

    .foot-base {
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
      padding-top: 32px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-fg2);
    }

    @media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

    /* Coach section: gradient bleed re-enabled (was previously removed) — the
       section gets extra top padding below so the heading clears it. */
    #coach { padding-top: 160px; }


    /* ──────────────────── MOBILE DENSITY ──────────────────── */
    @media (max-width: 720px) {
  section { padding: 68px 0; }
}