/* ---- design-system/tokens/colors.css ---- */
/* Your Money Your Plan — Colour tokens
   Extracted directly from the logo. Deep teal is the hero; ice teal supports;
   amber is the accent (one thing per design). Never pure white backgrounds. */

:root {
  /* ---- Base palette ---- */
  --teal-deep: #005B76;     /* primary — headlines, key UI, CTAs, borders */
  --teal-mid: #0F7A96;      /* subheadings, links, hover states */
  --teal-ice: #AAD2D2;      /* illustration / icon fill / graphic accents */
  --teal-ice-bg: #E8F5F5;   /* section backgrounds, callouts, card fills */
  --amber: #E8A020;         /* accent — CTAs, highlights, badges. Sparingly. */
  --amber-tint: #FDF3DC;    /* tip boxes, warm notices */
  --ink: #1E1E1E;           /* body text — warmer/softer than pure black */
  --teal-gray: #5A7A80;     /* secondary text, captions, metadata */
  --off-white: #F8FAFA;     /* page backgrounds, light card fills */
  --white: #FFFFFF;

  /* ---- Tints & states (derived, harmonious) ---- */
  --teal-deep-hover: #004B62;   /* deep teal, darker — button hover */
  --teal-deep-press: #003B4D;
  --teal-mid-hover: #0C6478;
  --amber-hover: #D08E14;
  --amber-press: #B87C0F;
  --teal-ice-strong: #7FB8B8;   /* ice teal, deepened for borders on ice bg */
  --teal-deep-08: rgba(0, 91, 118, 0.08);
  --teal-deep-12: rgba(0, 91, 118, 0.12);
  --teal-deep-20: rgba(0, 91, 118, 0.20);

  /* ---- Semantic aliases ---- */
  --text-heading: var(--teal-deep);
  --text-subheading: var(--teal-mid);
  --text-body: var(--ink);
  --text-muted: var(--teal-gray);
  --text-link: var(--teal-mid);
  --text-on-dark: var(--white);
  --text-on-teal: var(--white);

  --surface-page: var(--off-white);
  --surface-card: var(--white);
  --surface-sunken: var(--teal-ice-bg);
  --surface-callout: var(--teal-ice-bg);
  --surface-tip: var(--amber-tint);
  --surface-dark: var(--ink);

  --accent: var(--amber);
  --accent-tint: var(--amber-tint);

  --border-subtle: var(--teal-deep-12);
  --border-default: var(--teal-deep-20);
  --border-strong: var(--teal-deep);
  --border-ice: var(--teal-ice);

  --focus-ring: rgba(15, 122, 150, 0.45);

  /* ---- Status (kept inside the teal/amber family) ---- */
  --success: #1E7A5E;
  --success-bg: #E4F2EC;
  --warning: var(--amber);
  --warning-bg: var(--amber-tint);
  --danger: #B4452F;
  --danger-bg: #FBEBE6;
}

/* ---- design-system/tokens/typography.css ---- */
/* Your Money Your Plan — Typography tokens
   Two typefaces per design: one display, one body. Sentence case always
   (exception: the "YOUR PLAN" logo wordmark). Script is for emphasis only. */

:root {
  /* ---- Families ---- */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Dancing Script', 'Brush Script MT', cursive;
  --font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Type scale (px) ---- */
  --fs-display-xl: 48px;   /* hero display */
  --fs-display: 40px;
  --fs-display-sm: 32px;   /* display floor */
  --fs-h2: 28px;           /* section heading */
  --fs-h3: 22px;
  --fs-h4: 20px;           /* section heading floor */
  --fs-body-lg: 18px;
  --fs-body: 16px;         /* body default */
  --fs-caption: 14px;
  --fs-caption-sm: 12px;   /* caption floor — never below */

  /* ---- Weights ---- */
  --fw-regular: 400;       /* @kind font */
  --fw-medium: 500;        /* @kind font */
  --fw-semibold: 600;      /* @kind font */
  --fw-bold: 700;          /* @kind font */
  --fw-extrabold: 800;     /* @kind font */

  /* ---- Line heights ---- */
  --lh-display: 1.15;      /* @kind font */
  --lh-heading: 1.25;      /* @kind font */
  --lh-body: 1.7;          /* @kind font */
  --lh-caption: 1.4;       /* @kind font */

  /* ---- Tracking ---- */
  --ls-tight: -0.01em;
  --ls-cta: 0.5px;         /* CTA / button text */
  --ls-label: 0.04em;      /* eyebrow / overline labels */
}

/* ---- design-system/tokens/spacing.css ---- */
/* Your Money Your Plan — Spacing, radii, shadows, layout
   Generous whitespace is part of the brand. Don't crowd content. */

:root {
  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* paragraph gap = 1 line */
  --space-5: 24px;   /* headline → body */
  --space-6: 32px;
  --space-7: 48px;   /* section divider */
  --space-8: 64px;   /* section divider / page margin max */
  --space-9: 96px;

  /* ---- Layout ---- */
  --page-margin: 64px;      /* 40–64px on all sides */
  --page-margin-sm: 40px;
  --content-max: 1200px;
  --prose-max: 680px;

  /* ---- Corner radii (per brief) ---- */
  --radius-button: 8px;
  --radius-card: 12px;
  --radius-large: 16px;
  --radius-pill: 999px;
  --radius-input: 8px;

  /* ---- Button padding ---- */
  --btn-pad-y: 14px;
  --btn-pad-x: 28px;

  /* ---- Shadows — soft, approachable, never heavy ---- */
  --shadow-xs: 0 1px 2px rgba(0, 91, 118, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 91, 118, 0.08);
  --shadow-md: 0 6px 20px rgba(0, 91, 118, 0.10);
  --shadow-lg: 0 16px 40px rgba(0, 91, 118, 0.12);
  --shadow-focus: 0 0 0 3px var(--focus-ring);
}

/* ---- styles.css (site) ---- */
/* ============================================================
   Your Money Your Plan — the website's own stylesheet.

   Brand values are NOT defined here. They live in design-system/tokens/,
   which the build places in front of this file.

   Change a colour, font or corner radius in design-system/tokens/ and it
   changes everywhere on the site. Never re-declare a brand value below —
   it would silently override the design system.
   ============================================================ */
:root{
  /* short aliases for design-system tokens, used throughout this file */
  --amber-bg:var(--amber-tint);
  --muted:var(--teal-gray);
  --paper:var(--off-white);
  --card:var(--white);
  --r-btn:var(--radius-button);
  --r-card:var(--radius-card);
  --r-lg:var(--radius-large);
  --maxw:var(--content-max);
  --display:var(--font-display);
  --body:var(--font-body);
  --mono:var(--font-mono);

  /* site-only: the chunky offset button shadow, and page rhythm */
  --amber-shadow:#c9851a;
  --teal-shadow:#003d4f;
  --pad-x:clamp(20px,5vw,64px);
  --section:clamp(64px,9vw,118px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;}
a{color:var(--teal-mid);text-decoration:none;}
a:hover{color:var(--teal-deep);}
h1,h2,h3,h4{font-family:var(--display);color:var(--teal-deep);line-height:1.1;margin:0;font-weight:800;letter-spacing:-0.02em;}
p{margin:0;}
::selection{background:var(--teal-ice);color:var(--teal-deep);}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad-x);}
.section{padding-block:var(--section);position:relative;}

/* eyebrow — plain text label, no pill/border */
.eyebrow{font-family:var(--display);font-size:.85rem;font-weight:700;letter-spacing:.05em;color:var(--teal-mid);display:inline-block;margin:0 0 1.2rem;}

/* buttons — flat, quiet */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--display);font-weight:700;font-size:1rem;cursor:pointer;padding:15px 30px;border-radius:var(--r-btn);border:2px solid transparent;transition:transform .16s ease,background .2s,box-shadow .2s,color .2s;white-space:nowrap;text-align:center;}
.btn:hover{transform:translateY(-2px);}
.btn-amber{background:var(--amber);color:#3d2a00;}
.btn-amber:hover{background:#f2ad33;}
.btn-teal{background:var(--teal-deep);color:#fff;}
.btn-teal:hover{background:#0a6e8c;}
.btn-ghost{background:transparent;color:var(--teal-deep);border-color:var(--teal-deep);}
.btn-ghost:hover{background:var(--teal-deep);color:#fff;}
.btn-white{background:#fff;color:var(--teal-deep);border-color:#fff;}
.btn-white:hover{background:var(--teal-ice-bg);}

.arrow-link{font-family:var(--display);font-weight:700;color:var(--teal-mid);display:inline-flex;align-items:center;gap:.4em;}
.arrow-link svg{transition:transform .2s ease;}
.arrow-link:hover svg{transform:translateX(4px);}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(232,245,245,.9);backdrop-filter:blur(12px);transition:box-shadow .25s,background .25s;}
header.nav.scrolled{box-shadow:0 4px 24px -16px rgba(0,91,118,.5);background:rgba(248,250,250,.92);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;height:104px;}
.nav-logo{display:flex;align-items:center;gap:.6rem;}
.nav-logo img{height:52px;width:auto;}
.nav-links{display:flex;align-items:center;gap:2.8rem;list-style:none;margin:0;padding:0;}
.nav-links a{color:var(--teal-deep);font-weight:600;font-size:1rem;transition:color .2s;padding:.5rem 0;}
.nav-links a:hover{color:var(--teal-mid);}
.nav-links a.active{color:var(--teal-mid);}
.nav-cta{display:flex;align-items:center;gap:.9rem;}
.nav-cta .btn{padding:13px 28px;font-size:.95rem;}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.hamburger span{display:block;width:24px;height:2px;background:var(--teal-deep);margin:5px 0;transition:.25s;}

/* mobile drawer */
.drawer{position:fixed;inset:0 0 0 auto;width:min(82vw,340px);background:var(--paper);z-index:60;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);padding:90px 32px 40px;box-shadow:-20px 0 60px -30px rgba(0,91,118,.5);display:flex;flex-direction:column;gap:.4rem;}
.drawer.open{transform:translateX(0);}
.drawer a{color:var(--ink);font-family:var(--display);font-weight:600;font-size:1.15rem;padding:.7rem 0;border-bottom:1px solid #e6eeee;}
.drawer .btn{margin-top:1.2rem;justify-content:center;}
.drawer-close{position:absolute;top:24px;right:24px;background:none;border:0;font-size:1.8rem;color:var(--teal-deep);cursor:pointer;line-height:1;}
.scrim{position:fixed;inset:0;background:rgba(30,30,30,.4);z-index:55;opacity:0;pointer-events:none;transition:opacity .3s;}
.scrim.open{opacity:1;pointer-events:auto;}

/* placeholder imagery */
.ph{position:relative;border-radius:var(--r-card);overflow:hidden;background:repeating-linear-gradient(135deg,#e3efef 0 14px,#edf6f6 14px 28px);border:1px solid #d7e7e7;display:grid;place-items:center;min-height:200px;}
.ph::after{content:attr(data-label);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);background:rgba(248,250,250,.85);padding:6px 12px;border-radius:6px;border:1px solid #d7e7e7;text-transform:uppercase;text-align:center;max-width:80%;}
.hero-art{position:relative;}
.hero-ph{aspect-ratio:1;min-height:360px;border-radius:var(--r-card);border:1px solid #d7e7e7;}
.hero-badge{position:absolute;left:-18px;bottom:34px;background:#fff;border-radius:var(--r-card);padding:14px 18px;box-shadow:0 18px 40px -20px rgba(0,91,118,.35);display:flex;gap:.7rem;align-items:center;max-width:240px;border:1px solid #e6eeee;}
.hero-badge .dot{width:42px;height:42px;border-radius:var(--r-btn);background:var(--amber-bg);display:grid;place-items:center;flex-shrink:0;font-size:1.3rem;}
.hero-badge b{font-family:var(--display);color:var(--teal-deep);font-size:.95rem;display:block;}
.hero-badge small{color:var(--muted);font-size:.78rem;}
.avatars{display:flex;}
.avatars span{width:36px;height:36px;border-radius:50%;border:2px solid #fff;margin-left:-10px;background:var(--teal-ice);display:grid;place-items:center;font-size:.82rem;color:var(--teal-deep);font-weight:700;font-family:var(--display);}
.avatars span:first-child{margin-left:0;}

/* tagline strip */
.tag-strip{background:var(--teal-deep);color:#fff;text-align:center;}
.tag-strip .wrap{padding-block:28px;}
.tag-strip p{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2.2vw,1.6rem);letter-spacing:-0.01em;color:#fff;}
.tag-strip .ice{color:var(--teal-ice);}

/* heading block */
.head{max-width:60ch;}
.head.center{margin-inline:auto;text-align:center;}
.head.center .eyebrow{display:inline-block;}
.head h2{font-size:clamp(2.1rem,4.2vw,3.3rem);max-width:20ch;}
.head.center h2{margin-inline:auto;}
.head p{color:var(--muted);font-size:1.12rem;margin-top:1.1rem;max-width:54ch;}
.head.center p{margin-inline:auto;}

.bg-ice{background:var(--teal-ice-bg);}
.bg-deep{background:var(--teal-deep);}

/* pain cards — plain, quiet quote blocks */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.2rem;}
.pain-card{background:#fff;border-radius:var(--r-card);padding:38px 34px;border:1px solid #dde9e9;}
.pain-card .quote{font-family:var(--display);font-weight:700;color:var(--teal-deep);font-size:1.2rem;line-height:1.5;}
.pain-card .who{color:var(--muted);font-size:.88rem;margin-top:1.5rem;font-weight:600;}
.pain-mark{display:none;}

/* before / after */
.ba-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;margin-top:3rem;border-radius:var(--r-lg);overflow:hidden;border:2.5px solid var(--teal-deep);}
.ba-col{padding:clamp(28px,4vw,46px);}
.ba-before{background:#fff;}
.ba-after{background:var(--teal-deep);color:#fff;}
.ba-col h3{font-size:1rem;letter-spacing:.03em;font-family:var(--display);font-weight:700;margin-bottom:1.6rem;}
.ba-before h3{color:var(--muted);}
.ba-after h3{color:var(--teal-ice);}
.ba-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem;}
.ba-list li{display:flex;gap:.8rem;align-items:flex-start;font-size:1.05rem;}
.ba-before li{color:#6b6b6b;}
.ba-after li{color:#eaf6f6;}
.ba-ic{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin-top:2px;font-size:.7rem;font-weight:700;}
.ba-before .ba-ic{background:#f0eded;color:#b9b3b3;}
.ba-after .ba-ic{background:var(--amber);color:#3d2a00;}
.ba-arrow{display:grid;place-items:center;background:var(--teal-ice-bg);width:64px;}
.ba-arrow svg{width:26px;height:26px;color:var(--teal-deep);}

/* steps — numbered, no boxes */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.2rem);margin-top:3.6rem;padding-top:2.2rem;border-top:2px solid var(--teal-ice);}
.step{position:relative;}
.step-n{font-family:var(--mono);font-size:.85rem;color:var(--teal-mid);font-weight:500;letter-spacing:.08em;display:block;margin-bottom:.9rem;}
.step-ic{display:none;}
.step h3{font-size:1.3rem;margin-bottom:.6rem;}
.step p{color:var(--muted);font-size:1rem;}

/* audiences — plain text cards */
.aud-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:3.2rem;}
.aud{background:#fff;border-radius:var(--r-card);border:1px solid #dde9e9;padding:34px 32px;}
.aud .ph{display:none;}
.aud-body{padding:0;}
.aud-body h3{font-size:1.25rem;margin-top:.4rem;}
.aud-tag{font-family:var(--display);font-size:.78rem;color:var(--teal-mid);letter-spacing:.02em;font-weight:700;}
.aud-body p{color:var(--muted);font-size:.97rem;margin-top:.6rem;}

/* programs — plain cards */
.prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.2rem;}
.prog{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-card);border:1px solid #dde9e9;padding:36px 32px;}
.prog.featured{border-color:var(--teal-deep);}
.prog-top{display:none;}
.prog-body{padding:0;}
.prog-kicker{font-family:var(--display);font-size:.85rem;font-weight:700;letter-spacing:.02em;color:var(--teal-mid);margin-bottom:.9rem;display:block;}
.prog-kicker .pill{font:inherit;background:none;border:0;padding:0;color:inherit;}
.prog.featured .prog-kicker,.prog.featured .prog-kicker .pill{color:var(--amber);}
.prog h3{font-size:1.35rem;}
.prog p{color:var(--muted);font-size:.98rem;margin:.7rem 0 1.4rem;flex:1;}
.prog-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf3f3;padding-top:16px;}
.prog-price{font-family:var(--display);font-weight:800;color:var(--teal-deep);font-size:1.25rem;}
.prog-price small{font-family:var(--body);font-weight:400;color:var(--muted);font-size:.8rem;}

/* why different (dark) */
.why .head h2,.why .head .eyebrow{color:#fff;}
.why .head .eyebrow{color:var(--teal-ice);}
.why .head p{color:#bfe0e0;}
.why-table{margin-top:3rem;display:flex;flex-direction:column;gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(170,210,210,.25);}
.why-row{display:grid;grid-template-columns:1fr 1.4fr;gap:1.5rem;padding:22px clamp(20px,3vw,34px);align-items:center;border-bottom:1px solid rgba(170,210,210,.18);}
.why-row:last-child{border-bottom:0;}
.why-row.ymyp{background:rgba(170,210,210,.12);}
.why-who{font-family:var(--display);font-weight:700;color:#fff;font-size:1.08rem;display:flex;align-items:center;gap:.7rem;}
.why-why{color:#cfe6e6;font-size:1rem;}
.why-row.ymyp .why-who{color:var(--amber);}
.why-row.ymyp .why-why{color:#fff;}
.why-x{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#9ab8b8;font-size:.7rem;}
.why-row.ymyp .why-x{background:var(--amber);color:#3d2a00;}

/* founder */
.founder-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center;}
.founder-ph{aspect-ratio:1;border-radius:var(--r-card);border:1px solid #d7e7e7;}
.founder blockquote{font-family:var(--display);font-weight:800;color:var(--teal-deep);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.32;margin:1.2rem 0 1.6rem;letter-spacing:-0.01em;}
.founder .sig{display:flex;align-items:center;gap:.8rem;margin-top:1.6rem;}
.founder .sig b{font-family:var(--display);color:var(--ink);font-size:1rem;display:block;}
.founder .sig small{color:var(--muted);}
.callout{background:var(--amber-bg);border-radius:var(--r-card);padding:18px 22px;margin-top:1.8rem;display:flex;gap:.9rem;align-items:flex-start;border:1px solid #f3e2bb;}
.callout .ic{display:none;}
.callout p{color:#7a5a12;font-size:.96rem;}

/* FAQ */
.faq{max-width:780px;margin:3rem auto 0;}
.faq-item{border-bottom:2px solid #dde9e9;}
.faq-q{width:100%;background:none;border:0;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:24px 4px;font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--teal-deep);}
.faq-q .pm{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--teal-ice-bg);display:grid;place-items:center;color:var(--teal-deep);transition:transform .25s,background .2s;font-size:1.2rem;}
.faq-item.open .pm{transform:rotate(45deg);background:var(--teal-deep);color:#fff;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{color:var(--muted);padding:0 4px 24px;font-size:1.02rem;}

/* final CTA */
.cta-final{position:relative;overflow:hidden;}
.cta-card{background:var(--amber);border-radius:var(--r-lg);padding:clamp(40px,6vw,72px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:center;position:relative;overflow:hidden;}
.cta-card>div,.cta-card form{position:relative;z-index:1;}
.cta-card h2{color:#3d2a00;font-size:clamp(2rem,3.8vw,3rem);}
.cta-card .eyebrow{color:#3d2a00;}
.cta-card p{color:#6b4d10;margin:1.1rem 0 0;font-size:1.1rem;}
.signup{background:#fff;border:2.5px solid #d39a2a;border-radius:var(--r-card);padding:26px;position:relative;}
.signup label{font-family:var(--display);font-size:.9rem;font-weight:700;letter-spacing:.01em;color:var(--teal-deep);}
.signup .field{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap;}
.signup input{flex:1;min-width:0;padding:15px 18px;border-radius:var(--r-btn);border:2px solid #e2d3b0;background:var(--paper);font-family:var(--body);font-size:1rem;color:var(--ink);}
.signup input:focus{outline:2px solid var(--teal-deep);outline-offset:1px;}
.signup small{display:block;color:#7a5a12;font-size:.82rem;margin-top:.9rem;}
.signup .ok{color:var(--teal-deep);font-family:var(--display);font-weight:700;margin-top:.4rem;}

/* footer */
footer.ft{background:var(--teal-deep);color:#cfe6e6;padding-block:clamp(48px,6vw,76px) 30px;}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem;}
.ft-logo{display:inline-block;background:#fff;padding:14px 20px;border-radius:var(--r-card);margin-bottom:1.2rem;box-shadow:0 10px 30px -16px rgba(0,0,0,.45);}
.ft-logo img{height:58px;display:block;margin:0;}
.ft-brand p{color:#9fc6c6;font-size:.94rem;max-width:30ch;}
.ft h4{color:#fff;font-family:var(--display);font-size:.9rem;letter-spacing:.02em;margin-bottom:1rem;font-weight:700;}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;}
.ft a{color:#bfe0e0;font-size:.94rem;}
.ft a:hover{color:var(--amber);}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(170,210,210,.18);margin-top:2.8rem;padding-top:1.6rem;font-size:.84rem;color:#88b3b3;}
.ft-tag{font-family:var(--display);font-style:italic;color:var(--teal-ice);}

/* reveal on scroll */
.reveal{transform:translateY(20px);}
@media(prefers-reduced-motion:no-preference){.reveal{transition:transform .7s cubic-bezier(.22,.61,.36,1);}}
.reveal.in{transform:none;}

/* responsive */
@media(max-width:960px){
  .nav-links,.nav-cta .btn-amber{display:none;}
  .hamburger{display:block;}
  .hero-grid,.founder-grid,.cta-card{grid-template-columns:1fr;}
  .hero-ph{max-width:440px;}
  .pain-grid,.steps,.prog-grid{grid-template-columns:1fr;}
  .aud-grid{grid-template-columns:1fr;}
  .why-row{grid-template-columns:1fr;gap:.5rem;}
  .ft-grid{grid-template-columns:1fr 1fr;gap:2rem;}
  .founder-ph{max-width:380px;margin-inline:auto;}
}
@media(max-width:560px){
  body{font-size:16px;}
  .ba-wrap{grid-template-columns:1fr;}
  .ba-arrow{width:auto;height:54px;}
  .ba-arrow svg{transform:rotate(90deg);}
  .ft-grid{grid-template-columns:1fr;}
  .hero-badge{left:0;}
}
@media(prefers-reduced-motion:reduce){.reveal{transform:none;transition:none;}html{scroll-behavior:auto;}}

/* ============================================================
   Page template vocabulary
   The classes src/partials + the page template tell you to use.
   These were referenced by the template's authoring guide but had
   never been defined anywhere, so pages built from it rendered
   unstyled. Defined here once, for every page.
   ============================================================ */
.sec{padding-block:var(--section);position:relative;}
.sec.alt{background:var(--teal-ice-bg);}
.h1{font-family:var(--display);color:var(--teal-deep);font-weight:800;letter-spacing:-.02em;
    line-height:1.1;font-size:clamp(2.1rem,4.6vw,3.4rem);margin:0;}
.h2{font-family:var(--display);color:var(--teal-deep);font-weight:800;letter-spacing:-.02em;
    line-height:1.15;font-size:clamp(1.6rem,3vw,2.4rem);margin:0;}
.lead{color:#3d5a60;font-size:clamp(1.05rem,1.5vw,1.28rem);margin:1.4rem 0 0;max-width:60ch;}
.sub{color:var(--muted);font-size:.95rem;margin-top:.4rem;}
.card{background:var(--card);border-radius:var(--r-card);padding:28px;
      box-shadow:0 10px 30px -22px rgba(0,91,118,.5);}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem;
        margin-top:2.4rem;}