/* ForActive for running clubs — implementation of the Claude Design canvas
   "ForActive Running Clubs.dc.html" (project d50e00e1…). Tokens are the ForActive
   Design System's (Figtree; navy / cream / white). Frame-dependent values come from the
   --f-* custom properties the design set per frame: mobile (390) is the default, the
   desktop (1440) set applies from 1024px up. */

@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

:root {
  /* ── tokens/colors.css ── */
  --primary-900:#111936; --primary-800:#1B2B64; --primary-700:#233B92; --primary-600:#2B4CC6; --primary-500:#3D5DD5;
  --primary-400:#637FE2; --primary-300:#8198EB; --primary-200:#AFBEF5; --primary-100:#D6DEFB; --primary-50:#EAEEFD;
  --cream-900:#1C1C1C; --cream-800:#383633; --cream-700:#524E4A; --cream-600:#6D6964; --cream-500:#888078;
  --cream-400:#A7A09A; --cream-300:#C7C2BE; --cream-200:#E1DAD4; --cream-100:#F1EDE9; --cream-50:#F9F7F5;
  --green-600:#009855; --green-400:#33D583; --green-50:#ECFEF3;
  --yellow-600:#B29600; --yellow-500:#E5C100; --yellow-50:#FFFBE5;
  --red-400:#F97066;
  --white:#FFFFFF; --black:#000000; --cream-light:#FDFDF0; --ink-900:#010204; --ink-800:#1A1B1D; --ink-700:#202A33;
  --white-80:rgba(255,255,255,.8); --white-70:rgba(255,255,255,.7); --white-60:rgba(255,255,255,.6);
  --text-body:var(--ink-800); --text-muted:var(--cream-600); --text-strong:var(--primary-900);
  --text-link:var(--primary-600); --text-link-hover:var(--primary-800);
  /* ── tokens/fonts.css, shape.css, motion.css ── */
  --font-core: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-panel:20px; --radius-photo:60px; --radius-pill:999px;
  --shadow-card:0 4px 16px rgba(0,0,0,.129); --shadow-raised:0 8px 24px rgba(0,0,0,.2);
  --scrim-navy:linear-gradient(rgba(17,25,54,.5), rgba(17,25,54,.5));
  --duration-fast:150ms; --duration-base:220ms; --ease-out:cubic-bezier(.2,0,0,1);
  --focus-ring:var(--primary-600);

  /* ── the design's frame variables: mobile · 390 ── */
  --f-wrap:100%; --f-pad:22px; --f-sec:72px; --f-eyebrow:13px; --f-h1:34px; --f-h2:32px; --f-h3:22px;
  --f-lede:17px; --f-body:15px; --f-bar-h:60px; --f-bar-gap:14px; --f-nav:none; --f-btn-h:52px; --f-btn-sm-h:40px;
  --f-hero-cols:1fr; --f-hero-gap:28px; --f-hero-pt:36px; --f-hero-pb:48px;
  --f-cta-dir:column; --f-cta-w:100%; --f-cta-align:stretch; --f-cta-gap:12px;
  --f-strip-dir:column; --f-strip-align:flex-start; --f-strip-pad:28px;
  --f-loop-cols:1fr; --f-loop-gap:26px; --f-loop-pad:44px; --f-rev-a:1; --f-rev-b:2;
  --f-3col:1fr; --f-card-pad:22px; --f-price-cols:1fr; --f-price-gap:32px; --f-price-num:56px;
  --f-faq-q:18px; --f-faq-pad:18px; --f-answer:15px; --f-answer-pad:12px; --f-closer-pad:80px;
  --f-footer-dir:column; --f-footer-gap:22px; --f-gap-lg:34px;
}
/* phone mockups: 390px × scale must fit inside the wrap; the design's .88 assumes a 390 frame */
:root { --f-phone-s:.8; }
@media (min-width: 400px) { :root { --f-phone-s:.88; } }
@media (min-width: 480px) { :root { --f-phone-s:1; } }
@media (min-width: 640px) {
  :root { --f-pad:32px; --f-phone-s:1; --f-cta-dir:row; --f-cta-w:auto; --f-cta-align:center; --f-cta-gap:20px;
          --f-strip-dir:row; --f-strip-align:center; --f-footer-dir:row; --f-footer-gap:30px; --f-h1:44px; --f-h2:40px; }
}
@media (min-width: 1024px) {
  :root {
    --f-wrap:1200px; --f-pad:40px; --f-sec:110px; --f-eyebrow:14px; --f-h1:60px; --f-h2:60px; --f-h3:32px;
    --f-lede:20px; --f-body:16px; --f-bar-h:76px; --f-bar-gap:34px; --f-nav:flex; --f-btn-h:56px; --f-btn-sm-h:46px;
    --f-hero-cols:1.05fr .95fr; --f-hero-gap:60px; --f-hero-pt:84px; --f-hero-pb:72px;
    --f-strip-pad:34px; --f-loop-cols:1fr 1fr; --f-loop-gap:60px; --f-loop-pad:64px; --f-rev-a:2; --f-rev-b:1;
    --f-3col:repeat(3,1fr); --f-card-pad:32px; --f-price-cols:1fr 460px; --f-price-gap:60px; --f-price-num:72px;
    --f-faq-q:22px; --f-faq-pad:24px; --f-answer:17px; --f-answer-pad:60px; --f-closer-pad:130px; --f-gap-lg:52px;
  }
}
@media (min-width: 760px) and (max-width: 1023px) { :root { --f-3col:repeat(2,1fr); --f-price-cols:1fr 420px; --f-price-gap:40px; } }

/* ── base (tokens/base.css, trimmed) ── */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; overflow-x:hidden; font-family:var(--font-core); font-size:16px; line-height:1.5; color:var(--text-body); background:var(--white); -webkit-font-smoothing:antialiased; text-wrap:pretty; }
h1,h2,h3,h4 { margin:0; font-weight:500; color:var(--text-strong); }
p { margin:0; }
a { color:var(--text-link); text-decoration:none; transition:color var(--duration-fast) var(--ease-out); }
a:hover { color:var(--text-link-hover); text-decoration:underline; text-underline-offset:3px; }
img { display:block; max-width:100%; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.ic { display:block; flex:none; }

/* ── shared ── */
.wrap { max-width:var(--f-wrap); margin:0 auto; padding-left:var(--f-pad); padding-right:var(--f-pad); }
.eyebrow { display:block; font-size:var(--f-eyebrow); font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--cream-500); }
.h2 { font-size:var(--f-h2); font-weight:500; line-height:1.05; letter-spacing:-.01em; margin:14px 0 0; }
.lede { font-size:var(--f-lede); line-height:1.5; color:var(--text-body); margin:18px 0 0; max-width:620px; }
.btn { display:inline-flex; align-items:center; justify-content:center; height:var(--f-btn-h); padding:0 28px; border-radius:14px; background:var(--primary-600); color:var(--white); font-size:17px; font-weight:500; text-decoration:none; white-space:nowrap; transition:background-color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.btn:hover { background:var(--primary-700); color:var(--white); text-decoration:none; }
.btn:active { transform:scale(.98); }
.btn--sm { height:var(--f-btn-sm-h); padding:0 20px; font-size:15px; }
.btn--cta { width:var(--f-cta-w); }
.checks { list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:9px; }
.checks li { display:flex; gap:10px; align-items:center; font-size:15px; color:var(--text-body); }
.checks--wrap { flex-direction:row; flex-wrap:wrap; gap:10px 32px; }

/* ── top bar ── */
.topbar { position:sticky; top:0; z-index:20; background:var(--white); border-bottom:1px solid var(--cream-200); }
.topbar .wrap { height:var(--f-bar-h); display:flex; align-items:center; gap:var(--f-bar-gap); }
.topbar nav { display:var(--f-nav); gap:28px; margin-left:18px; font-size:16px; font-weight:500; }
.topbar nav a { color:var(--primary-900); }
.topbar .spacer { flex:1; }

/* ── hero ── */
.hero .wrap { padding-top:var(--f-hero-pt); padding-bottom:var(--f-hero-pb); display:grid; grid-template-columns:var(--f-hero-cols); gap:var(--f-hero-gap); align-items:center; }
.hero h1 { font-size:var(--f-h1); font-weight:500; line-height:1.01; letter-spacing:-.015em; margin:16px 0 0; }
.hero h1 span { color:var(--primary-600); }
.hero .lede { margin-top:20px; }
.hero .cta-row { display:flex; flex-direction:var(--f-cta-dir); flex-wrap:wrap; align-items:var(--f-cta-align); gap:var(--f-cta-gap); margin-top:32px; }
.rating { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--text-muted); }
.rating .stars { color:var(--yellow-500); font-size:17px; letter-spacing:1px; }
.hero .checks { margin-top:30px; gap:10px; }
.hero .checks li { font-size:var(--f-body); }
.hero-photo { border-radius:var(--radius-photo); overflow:hidden; aspect-ratio:4/5; background:var(--cream-100); }
.hero-photo img { width:100%; height:100%; object-fit:cover; }

/* ── who it's for ── */
.whofor { background:var(--cream-100); padding:var(--f-strip-pad) 0; }
.whofor .wrap { display:flex; flex-direction:var(--f-strip-dir); align-items:var(--f-strip-align); gap:20px 26px; }
.whofor .eyebrow { color:var(--cream-600); flex:none; }
.chips { display:flex; gap:10px; flex-wrap:wrap; }
.chips span { font-size:15px; font-weight:500; padding:9px 16px; border-radius:999px; background:var(--white); border:1px solid var(--cream-200); color:var(--primary-900); }

/* ── the loop ── */
.loop { padding:var(--f-sec) 0; }
.loop .lede { max-width:720px; }
.block { display:grid; grid-template-columns:var(--f-loop-cols); gap:var(--f-loop-gap); align-items:center; padding:var(--f-loop-pad) 0; border-top:1px solid var(--cream-300); }
.block--first { margin-top:var(--f-gap-lg); }
.block--stack { display:block; }
.block .rev-a { order:var(--f-rev-a); }
.block .rev-b { order:var(--f-rev-b); }
.num { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--primary-600); color:var(--white); font-size:18px; font-weight:500; }
.block h3 { font-size:var(--f-h3); font-weight:500; line-height:1.1; margin:20px 0 0; max-width:440px; }
.block--stack h3 { max-width:none; }
.block p.copy { font-size:var(--f-lede); line-height:1.5; color:var(--text-body); margin:14px 0 0; max-width:520px; }
.block--stack p.copy { max-width:none; }
.phones { display:flex; flex-wrap:wrap; gap:44px 56px; justify-content:center; align-items:flex-start; margin-top:48px; }
.phone-slot { margin:0 auto; overflow:hidden; }
.phone { width:390px; transform:scale(var(--f-phone-s)); transform-origin:top left; border-radius:44px; background:var(--white); box-shadow:var(--shadow-raised); overflow:hidden; position:relative; display:flex; flex-direction:column; font-size:16px; line-height:1.4; color:var(--primary-900); }
.phone .notch { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:104px; height:26px; border-radius:999px; background:var(--primary-900); z-index:5; }
.phone .status { height:44px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 24px; font-size:13px; font-weight:600; }
.phone .status .sig { display:flex; align-items:center; gap:5px; }
.phone .status .sig i { display:block; width:3px; background:currentColor; border-radius:1px; }
.phone .status .bat { width:22px; height:11px; border:1px solid currentColor; border-radius:3px; display:flex; align-items:center; padding:1.5px; margin-left:3px; }
.phone .status .bat i { display:block; width:72%; height:100%; background:currentColor; border-radius:1.5px; }
.phone .home { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:120px; height:5px; border-radius:999px; background:var(--primary-900); }
.phone h4 { font-weight:600; margin:0; }
.realtalk { background:var(--primary-900); border-radius:24px; padding:var(--f-card-pad); }
.realtalk .eyebrow { color:var(--white-60); }
.realtalk p { font-size:var(--f-h3); font-weight:500; line-height:1.25; color:var(--white); margin:12px 0 0; max-width:860px; }

/* ── pricing ── */
.pricing { background:var(--cream-100); padding:var(--f-sec) 0; }
.pricing .wrap { display:grid; grid-template-columns:var(--f-price-cols); gap:var(--f-price-gap); align-items:center; }
.pricing .eyebrow { color:var(--cream-600); }
.pricing .cta-row { margin-top:30px; display:flex; flex-direction:var(--f-cta-dir); align-items:var(--f-cta-align); gap:14px; }
.price-card { background:var(--white); border-radius:24px; padding:var(--f-card-pad); box-shadow:var(--shadow-card); }
.price-card .amount { display:flex; align-items:baseline; gap:8px; margin:12px 0 22px; }
.price-card .amount b { font-size:var(--f-price-num); font-weight:500; line-height:1; color:var(--primary-900); }
.price-card .amount span { font-size:20px; color:var(--text-muted); }
.price-card .row { display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-top:1px solid var(--cream-200); font-size:var(--f-body); }
.price-card .row span:first-child { color:var(--text-body); }
.price-card .row span:last-child { font-weight:500; text-align:right; max-width:230px; color:var(--primary-900); }
.price-card .note { font-size:14px; line-height:1.5; color:var(--text-muted); margin-top:18px; }

/* ── reviews ── */
.reviews { padding:var(--f-sec) 0; }
.review-grid { display:grid; grid-template-columns:var(--f-3col); gap:22px; margin-top:var(--f-gap-lg); }
.review { border:1px solid var(--cream-300); border-radius:20px; background:var(--white); padding:26px; }
.review .stars { color:var(--yellow-500); font-size:15px; letter-spacing:1.5px; }
.review h3 { font-size:22px; font-weight:500; line-height:1.15; margin:14px 0 0; }
.review p { font-size:15px; line-height:1.55; color:var(--text-body); margin:10px 0 0; }
.review .who { display:flex; align-items:center; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--cream-200); font-size:14px; font-weight:500; color:var(--primary-900); }
.review .who i { width:34px; height:34px; border-radius:50%; background:var(--primary-100); color:var(--primary-800); display:grid; place-items:center; font-size:13px; font-weight:500; font-style:normal; }

/* ── faq ── */
.faq { background:var(--cream-50); padding:var(--f-sec) 0; }
.faq .wrap { max-width:900px; }
.faq-list { margin-top:40px; }
.faq-item { border-top:1px solid var(--cream-300); }
.faq-item:last-child { border-bottom:1px solid var(--cream-300); }
.faq-q { width:100%; display:flex; align-items:center; gap:20px; background:none; border:0; padding:var(--f-faq-pad) 0; cursor:pointer; text-align:left; font-family:var(--font-core); color:var(--primary-900); }
.faq-q span { flex:1; font-size:var(--f-faq-q); font-weight:500; line-height:1.25; }
.faq-q .ic { color:var(--cream-600); }
.faq-q .ic--up { display:none; }
.faq-item.open .faq-q .ic--up { display:block; }
.faq-item.open .faq-q .ic--down { display:none; }
.faq-a { display:none; font-size:var(--f-answer); line-height:1.55; color:var(--text-body); padding:0 var(--f-answer-pad) 26px 0; margin:0; }
.faq-item.open .faq-a { display:block; }

/* ── closer ── */
.closer { position:relative; padding:var(--f-closer-pad) 0; background:var(--primary-900); overflow:hidden; }
.closer .bg { position:absolute; inset:0; opacity:.6; }
.closer .bg img { width:100%; height:100%; object-fit:cover; }
.closer .scrim { position:absolute; inset:0; background:var(--scrim-navy); pointer-events:none; }
.closer .wrap { position:relative; text-align:center; }
.closer h2 { font-size:var(--f-h2); font-weight:500; line-height:1.05; letter-spacing:-.01em; color:var(--cream-light); margin:0 auto; max-width:900px; }
.closer p { font-size:var(--f-lede); line-height:1.5; color:var(--white-70); margin:20px auto 0; max-width:560px; }
.closer .cta-row { margin-top:34px; display:flex; justify-content:center; }
.closer .credit { position:absolute; right:14px; bottom:10px; font-size:11px; color:var(--white-60); }
.closer .credit a { color:var(--white-80); }

/* ── footer ── */
.footer { background:var(--white); border-top:1px solid var(--cream-200); padding:48px 0 40px; }
.footer .wrap { display:flex; flex-direction:var(--f-footer-dir); align-items:var(--f-strip-align); gap:var(--f-footer-gap); flex-wrap:wrap; }
.footer nav { display:flex; flex-wrap:wrap; gap:16px 22px; font-size:15px; flex:1; }
.footer nav a { color:var(--text-muted); }
.footer .social { display:flex; gap:14px; color:var(--cream-600); }
.footer .copy { margin-top:26px; font-size:13px; color:var(--cream-500); }