/* ProAttitudes — shared site stylesheet (design tokens + layout + page additions). */

/* ============================================================
   ProAttitudes — COLOR TOKENS
   Thesis: light vs. dark. The Moment is a shaft of light in the dark.
   Brand cores are pulled directly from the 2026 Style Guide;
   deep "ink" shades are derived for depth in dark sections.
   ============================================================ */
:root {
  /* ---- Brand primaries (from guide) ---- */
  --color-cyan: #66E0E0;          /* primary — Moment cyan */
  --color-purple: #7B61FF;        /* primary — Moment purple */

  /* Cyan family (derived deeps for UI contrast) */
  --color-cyan-mid: #008B8B;
  --color-cyan-deep: #005E71;     /* primary action color on light */

  /* Purple family */
  --color-purple-soft: #B9C6FF;

  /* ---- Tertiary / reserve (from guide) ---- */
  --color-gold: #ECC21B;          /* held in reserve — quizzes, accents */
  --color-orange: #E48425;        /* held in reserve */

  /* ---- Neutrals (from guide) ---- */
  --color-charcoal: #404041;      /* primary text */
  --color-slate: #79868B;         /* eyebrow / muted UI */
  --color-gray: #828282;          /* secondary neutral */

  /* ---- Derived dark surfaces (depth) ---- */
  --color-ink: #1A2123;           /* dark section background */
  --color-ink-soft: #232C2E;      /* raised dark surface */

  /* ---- Light surfaces ---- */
  --color-paper: #FFFFFF;
  --color-paper-tint: #F1FBFB;    /* faint cyan wash section bg */

  /* ---- Borders ---- */
  --color-border: #E6EAEA;
  --color-border-dark: rgba(255, 255, 255, 0.12);

  /* =========================================================
     SEMANTIC ALIASES — prefer these in product code
     ========================================================= */
  --text-primary: var(--color-charcoal);
  --text-secondary: #6E7880;
  --text-muted: var(--color-gray);
  --text-on-dark: #F4F7F7;
  --text-on-dark-dim: #AEB7BA;
  --text-accent: var(--color-cyan-deep);      /* the coined "Moment" term on light */
  --text-accent-on-dark: var(--color-cyan);   /* the coined "Moment" term on dark */

  --surface-page: var(--color-paper);
  --surface-tint: var(--color-paper-tint);
  --surface-card: var(--color-paper);
  --surface-dark: var(--color-ink);
  --surface-dark-raised: var(--color-ink-soft);

  --border-default: var(--color-border);
  --border-on-dark: var(--color-border-dark);

  --action-primary: var(--color-cyan-deep);
  --action-primary-hover: #03485A;
  --action-on-dark: var(--color-cyan);
  --action-on-dark-hover: #8AEBEB;

  --focus-ring: var(--color-purple);
}

/* ============================================================
   ProAttitudes — TYPOGRAPHY TOKENS
   Display: Montserrat (light, airy headlines; tight tracking)
   Body / UI: Inter (clear, even, readable)
   Headlines lean LIGHT (300) at large sizes — the calm,
   "lower the nervous system" voice from the brand guide.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Weights ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Fluid display sizes ---- */
  --text-h1: clamp(2.6rem, 6.2vw, 5.25rem);   /* hero headline, weight 300 */
  --text-h2: clamp(2rem, 4vw, 3.25rem);       /* section headline, weight 300 */
  --text-h3: 1.4375rem;                        /* card title, weight 600 */
  --text-h4: 1.0625rem;                        /* label heading, weight 600 */

  /* ---- Body scale ---- */
  --text-lede: 1.3125rem;     /* opening paragraph */
  --text-medium: 1.1875rem;   /* emphasized body */
  --text-base: 1rem;          /* default body */
  --text-small: 0.875rem;     /* meta / captions */
  --text-tiny: 0.75rem;       /* eyebrow / micro-labels */

  /* ---- Line heights ---- */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-body: 1.65;

  /* ---- Tracking ---- */
  --tracking-display: -0.02em;  /* large headlines */
  --tracking-tight: -0.01em;
  --tracking-eyebrow: 0.2em;    /* uppercase eyebrows */
  --tracking-label: 0.14em;     /* small uppercase labels */
}

/* ============================================================
   ProAttitudes — SPACING, LAYOUT & RADII TOKENS
   Generous, calm vertical rhythm. Sections breathe.
   ============================================================ */
:root {
  /* ---- Spacing scale ---- */
  --space-tiny: 0.25rem;
  --space-small: 0.75rem;
  --space-medium: 1.5rem;
  --space-large: 2.5rem;
  --space-xlarge: 4rem;
  --space-xxlarge: 6rem;

  /* ---- Section padding (vertical) ---- */
  --padding-section-small: 4rem;
  --padding-section-medium: 7rem;
  --padding-section-large: 9rem;

  /* ---- Global gutter (horizontal) ---- */
  --padding-global: 2.5rem;

  /* ---- Containers ---- */
  --container-large: 80rem;
  --container-medium: 64rem;
  --container-small: 48rem;

  /* ---- Radii ---- */
  --radius-sm: 0.375rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;     /* elevated cards */
  --radius-xl: 1.5rem;
  --radius-pill: 2rem;      /* buttons, tags */
  --radius-full: 999px;     /* capsules, avatars */
}

@media (max-width: 991px) {
  :root {
    --padding-global: 2rem;
    --padding-section-large: 6.5rem;
    --padding-section-medium: 5rem;
  }
}
@media (max-width: 600px) {
  :root {
    --padding-global: 1.25rem;
    --padding-section-large: 5rem;
    --padding-section-medium: 4rem;
  }
}

/* ============================================================
   ProAttitudes — GRADIENTS, SHADOWS & MOTION TOKENS
   The Moment gradient (cyan -> purple) is the brand's
   single most important visual signature.
   ============================================================ */
:root {
  /* ---- The Moment gradient ---- */
  --gradient-moment: linear-gradient(135deg, #66E0E0 0%, #7B61FF 100%); /* @kind color */
  --gradient-moment-90: linear-gradient(90deg, #66E0E0 0%, #7B61FF 100%); /* @kind color */

  /* The shaft-of-light core (vertical) — the signature LightWindow */
  --gradient-lightcore: linear-gradient(180deg, transparent, #66E0E0 14%, #EAF6FF 50%, #7B61FF 86%, transparent); /* @kind color */
  --gradient-lightcore-h: linear-gradient(90deg, transparent, #66E0E0 14%, #EAF6FF 50%, #7B61FF 86%, transparent); /* @kind color */

  /* Hairline rule that fades cyan->purple at the edges */
  --gradient-rule: linear-gradient(90deg, transparent, rgba(0,139,139,0.55), rgba(123,97,255,0.55), transparent); /* @kind color */

  /* Aurora wash for dark sections */
  --gradient-aurora: radial-gradient(58% 50% at 12% 6%, rgba(102,224,224,0.16), transparent 72%), radial-gradient(54% 48% at 88% 96%, rgba(123,97,255,0.20), transparent 72%); /* @kind color */

  /* ---- Shadows ---- */
  --shadow-card: 0 1px 2px rgba(64,64,65,0.05), 0 12px 32px -20px rgba(64,64,65,0.18);
  --shadow-lift: 0 24px 56px -28px rgba(0,94,113,0.35);
  --shadow-card-hover: 0 28px 56px -28px rgba(0,94,113,0.30);
  --glow-light: 0 0 24px 5px rgba(123,97,255,0.45), 0 0 60px 14px rgba(102,224,224,0.25);

  /* ---- Motion ---- */
  /* the house easing — calm + decisive */
  --ease-out-soft: cubic-bezier(.2,.7,.2,1); /* @kind other */
  --duration-fast: .15s; /* @kind other */
  --duration-base: .25s; /* @kind other */
  --duration-slow: .4s; /* @kind other */
  --duration-reveal: .8s; /* @kind other */
}




/* ProAttitudes marketing site — UI-kit layout scaffolding.
   Uses the design-system tokens (styles.css) for all values. */

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: var(--leading-body); color: var(--text-primary); background: var(--surface-page); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }
h1 { font-size: var(--text-h1); font-weight: var(--weight-light); line-height: 1.02; letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-light); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
p { margin: 0; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.term { color: var(--text-accent); font-weight: var(--weight-semibold); }
.section-dark .term { color: var(--text-accent-on-dark); }

/* structure */
.padding-global { padding-left: var(--padding-global); padding-right: var(--padding-global); }
.section-pad-m { padding-top: var(--padding-section-medium); padding-bottom: var(--padding-section-medium); }
.section-pad-l { padding-top: var(--padding-section-large); padding-bottom: var(--padding-section-large); }
.container-l { max-width: var(--container-large); margin: 0 auto; width: 100%; }
.container-m { max-width: var(--container-medium); margin: 0 auto; width: 100%; }
.container-s { max-width: var(--container-small); margin: 0 auto; width: 100%; }

/* dark + tint sections */
.section-dark { position: relative; isolation: isolate; background: var(--surface-dark); color: var(--text-on-dark); }
.section-dark::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--gradient-aurora); }
.section-dark::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.section-dark > .padding-global { position: relative; z-index: 1; }
.section-tint { background: var(--surface-tint); }

/* text helpers */
.t-lede { font-size: var(--text-lede); line-height: var(--leading-normal); }
.t-medium { font-size: var(--text-medium); line-height: 1.6; }
.t-small { font-size: var(--text-small); }
.t-secondary { color: var(--text-secondary); }
.t-dim { color: var(--text-on-dark-dim); }
.t-center { text-align: center; }
.mw-38 { max-width: 38rem; }
.mw-42 { max-width: 42rem; }
.mw-56 { max-width: 56rem; }

/* spacers */
.s-s { height: .75rem; } .s-m { height: 1.5rem; } .s-l { height: 2.5rem; } .s-xl { height: 4rem; } .s-xxl { height: 6rem; }

/* navbar */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-default); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 1.0625rem; padding-bottom: 1.0625rem; }
.nav-menu { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav-link { font-family: var(--font-display); font-size: .875rem; font-weight: 500; text-decoration: none; color: var(--text-secondary); position: relative; transition: color .15s var(--ease-out-soft); }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; border-radius: 2px; background: var(--gradient-moment); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out-soft); }
.nav-link:hover { color: var(--color-charcoal); }
.nav-link:hover::after { transform: scaleX(1); }

/* mobile menu toggle (hamburger) — hidden on desktop */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--border-default); border-radius: 10px; background: rgba(255,255,255,.6); cursor: pointer; }
.nav-toggle span { display: block; width: 1.05rem; height: 2px; border-radius: 2px; background: var(--color-charcoal); margin: 0 auto; transition: transform .2s var(--ease-out-soft), opacity .2s var(--ease-out-soft); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* hero */
.hero { position: relative; }
.hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(46rem, 88vw); height: 38rem; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 42% 60% at 50% 50%, rgba(102,224,224,.16), rgba(123,97,255,.12) 45%, transparent 72%); filter: blur(8px); animation: hero-glow-pulse 9s ease-in-out infinite; }
@keyframes hero-glow-pulse { 0%,100% { opacity: .7; transform: translate(-50%,-50%) scale(.98); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } }
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 56vh; justify-content: center; }
.hero-def { display: inline-flex; align-items: stretch; gap: 1.125rem; text-align: left; border: 1px solid var(--border-on-dark); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; max-width: 34rem; background: rgba(255,255,255,.05); backdrop-filter: blur(6px); }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* mechanism */
.mech { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mech-watermark { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); width: 26rem; max-width: 78%; opacity: .10; z-index: 0; pointer-events: none; }
.mech-diagram { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 52rem; }
.mech-node { flex: 1; padding: 2rem 1rem; }
.mech-node-label { font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-on-dark-dim); }
.mech-node-word { font-family: var(--font-display); font-weight: 300; font-size: 2.25rem; line-height: 1.1; }
.mech-win { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 0 2.5rem; }
.mech-win-label { font-family: var(--font-display); font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-cyan); white-space: nowrap; }
.mech-pull { position: relative; z-index: 1; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.45; max-width: 42rem; border-top: 1px solid var(--border-on-dark); border-bottom: 1px solid var(--border-on-dark); padding: 2.25rem 0; }

/* grids */
.shifts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.shift-rule { width: 2.25rem; height: 3px; border-radius: 2px; background: var(--gradient-moment); margin-bottom: 1.5rem; }
.path-phases { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; }
.path-phase { position: relative; padding-top: 1.75rem; border-top: 1px solid var(--border-on-dark); }
.path-phase::before { content: ""; position: absolute; top: -1.5px; left: 0; width: 3.5rem; height: 3px; border-radius: 2px; background: var(--gradient-moment); animation: path-bar-pulse 2.7s var(--ease-out-soft) infinite; animation-delay: calc(var(--step, 0) * 0.5s); }
@keyframes path-bar-pulse {
  0%       { transform: translateX(0); opacity: .45; box-shadow: none; }
  35%      { transform: translateX(12px); opacity: 1; box-shadow: 0 0 14px 2px rgba(102,224,224,.6); }
  70%, 100%{ transform: translateX(0); opacity: .45; box-shadow: none; }
}
/* forward flow: a bright bead travels start -> end across the three steps, then loops back */
.path-flow { position: relative; }
.path-flow-pulse { position: absolute; top: -7px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, #EAF6FF, rgba(102,224,224,.7) 55%, transparent 72%); box-shadow: 0 0 16px 5px rgba(102,224,224,.5); pointer-events: none; animation: path-flow-travel 2.7s var(--ease-out-soft) infinite; }
@keyframes path-flow-travel {
  0%   { left: 0; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; transform: translateX(-100%); opacity: 0; }
}
/* loop-back bracket: connects the end (right) back to the beginning (left) */
.path-return { position: relative; height: 44px; margin: 30px 4px 0; border: 1px solid var(--border-on-dark); border-top: none; border-radius: 0 0 18px 18px; }
.path-return::before { content: ""; position: absolute; left: -4px; top: -9px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--color-cyan); }
.path-return-pulse { position: absolute; bottom: -6px; right: 8px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(closest-side, #EAF6FF, rgba(123,97,255,.7) 55%, transparent 72%); box-shadow: 0 0 14px 4px rgba(123,97,255,.45); animation: path-return-travel 2.7s var(--ease-out-soft) infinite; }
@keyframes path-return-travel {
  0%   { right: 8px; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { right: calc(100% - 18px); opacity: 0; }
}
.path-return-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-dark-dim); background: var(--surface-dark); padding: 0 14px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .path-phase::before, .path-flow-pulse, .path-return-pulse { animation: none !important; }
  .path-flow-pulse, .path-return-pulse { display: none; }
}
.path-phase-days { font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-dark-dim); }
.path-phase-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.path-loop { border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg); padding: 2.75rem; background: rgba(255,255,255,.025); }
.path-loop-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 3rem; }
.path-loop-col { display: flex; flex-direction: column; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.path-loop-item { display: flex; gap: 1rem; align-items: baseline; }
.path-loop-num { flex-shrink: 0; font-family: var(--font-display); font-size: .9375rem; font-weight: 700; color: var(--color-cyan); }

/* moment app */
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.app-wordmark-row { display: flex; align-items: center; gap: .625rem; }
.app-wordmark { font-family: var(--font-display); font-weight: 600; font-size: 2.25rem; letter-spacing: -.02em; color: #fff; }
.app-wordmark-dot { color: var(--color-cyan); }
.app-tagline { font-family: var(--font-display); font-size: .8125rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--color-cyan); }
.app-feature-list { display: grid; row-gap: 1rem; list-style: none; margin: 0; padding: 0; }
.app-feature-item { display: flex; gap: .875rem; align-items: baseline; }
.app-feature-item::before { content: ""; flex-shrink: 0; width: 1rem; height: 3px; border-radius: 2px; background: var(--gradient-moment); transform: translateY(-.3rem); }
.app-visual { position: relative; border: 1px solid var(--border-on-dark); border-radius: var(--radius-xl); background: linear-gradient(160deg, rgba(102,224,224,.06), rgba(123,97,255,.08)); padding: 3.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.app-motto { font-family: var(--font-display); font-style: italic; font-size: .875rem; color: var(--text-on-dark-dim); }

/* cta + footer */
.cta-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-portrait { width: 8.5rem; height: 8.5rem; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-card); position: relative; background: linear-gradient(160deg, var(--color-paper-tint), #E6F6F6); display: flex; align-items: center; justify-content: center; }
.footer { border-top: 1px solid var(--border-on-dark); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.footer-links { display: flex; gap: 1.75rem; list-style: none; flex-wrap: wrap; margin: 0; padding: 0; }
.footer-link { font-family: var(--font-display); font-size: .8125rem; color: var(--text-on-dark-dim); text-decoration: none; transition: color .15s var(--ease-out-soft); }
.footer-link:hover { color: var(--text-on-dark); }

@media (max-width: 991px) {
  .nav-toggle { display: flex; }
  .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0 1rem; background: rgba(255,255,255,.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-default); box-shadow: var(--shadow-md, 0 16px 40px -24px rgba(0,18,25,.4)); }
  .nav-menu.is-open { display: flex; }
  .nav-menu > li { width: 100%; padding-inline: var(--padding-global-x, 1.5rem); }
  .nav-menu > li > .nav-link { display: block; padding: .85rem 0; font-size: 1rem; }
  .nav-menu > li:last-child { margin-top: .5rem; }
  .app-grid { grid-template-columns: 1fr; gap: 3rem; }
  .path-phases { grid-template-columns: 1fr; gap: 2.5rem; }
  .shifts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mech-diagram { flex-direction: column; }
  .hero-def { flex-direction: column; gap: .75rem; }
  .path-loop-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}



/* ============================================================
   Coaching page — page-specific additions (reuses site tokens)
   ============================================================ */
.coach-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.coach-feature-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.coach-chip {
  width: 2.75rem; height: 2.75rem; border-radius: 0.85rem; flex-shrink: 0;
  background: var(--gradient-moment);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: #08121A;
  box-shadow: 0 10px 24px -12px rgba(123,97,255,.6);
}
.coach-chip .glyph { width: 1.05rem; height: 1.05rem; }
.coach-feature h3 { font-size: var(--text-h3); }

/* honest fit check */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.fit-col { border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg); padding: 2.5rem; background: rgba(255,255,255,.025); }
.fit-col.is-yes { background: linear-gradient(160deg, rgba(102,224,224,.06), rgba(123,97,255,.07)); border-color: rgba(102,224,224,.28); }
.fit-head { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; }
.fit-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.fit-list li { position: relative; padding-left: 2.25rem; font-size: var(--text-base); line-height: 1.55; color: var(--text-on-dark-dim); }
.fit-yes li::before {
  content: ""; position: absolute; left: 4px; top: 4px;
  width: 13px; height: 8px; border-left: 2px solid var(--color-cyan); border-bottom: 2px solid var(--color-cyan);
  transform: rotate(-45deg);
}
.fit-no li::before {
  content: ""; position: absolute; left: 2px; top: 12px;
  width: 14px; height: 2px; border-radius: 2px; background: var(--color-slate);
}

/* proof / qualifier row under hero */
.proof-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.25rem; }
.proof-item { font-family: var(--font-display); font-size: var(--text-small); letter-spacing: .02em; color: var(--text-on-dark-dim); display: inline-flex; align-items: center; gap: .55rem; }
.proof-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gradient-moment); flex-shrink: 0; }

.nav-link.is-active { color: var(--color-charcoal); }
.nav-link.is-active::after { transform: scaleX(1); }
.section-dark .nav-link.is-active { color: var(--text-on-dark); }

/* ============================================================
   Corporate / For Teams page — additions
   ============================================================ */
.gradient-text {
  background: var(--gradient-moment-90);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* the hidden cost — stat cards */
.corp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.corp-stat {
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg);
  padding: 2rem 1.75rem; background: rgba(255,255,255,.025);
}
.corp-stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; letter-spacing: -.01em; margin-bottom: .6rem; }
.corp-stat-cap { font-size: var(--text-small); color: var(--text-on-dark-dim); line-height: 1.5; }

/* big pull quote */
.corp-quote {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.25; letter-spacing: -.01em;
  padding-left: 1.5rem; border-left: 4px solid; border-image: var(--gradient-moment-90) 1;
}
.corp-beat-k { font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-cyan); margin-bottom: .6rem; }

/* ways we work — 3-col cards */
.corp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.corp-card-rule { width: 2.25rem; height: 3px; border-radius: 2px; background: var(--gradient-moment); margin-bottom: 1.5rem; }
/* Cards have a white surface; keep their titles dark even inside a dark section */
.section-dark .corp-grid3 h3 { color: var(--color-charcoal); }
/* proven keynote (3M) proof block */
.corp-keynote { margin-top: 1.5rem; border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg); padding: 2rem 2.25rem; background: linear-gradient(160deg, rgba(102,224,224,.05), rgba(123,97,255,.08)); position: relative; overflow: hidden; }
.corp-keynote::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--gradient-moment); }
.corp-kp-label { font-family: var(--font-display); font-weight: 700; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-cyan); margin-bottom: .85rem; }
.corp-kp-title { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.32; letter-spacing: -.01em; color: var(--text-on-dark); margin-bottom: .85rem; text-wrap: pretty; }
.corp-kp-note { font-size: var(--text-base); color: var(--text-on-dark-dim); }
.corp-kp-note strong { color: var(--text-on-dark); font-weight: 600; }

/* ROI checklist */
.corp-check { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2.5rem; }
.corp-check-item { display: flex; align-items: flex-start; gap: .9rem; }
.corp-tick { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--gradient-moment); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.corp-tick svg { width: .85rem; height: .85rem; display: block; }
.corp-check-t { font-size: var(--text-base); color: var(--text-on-dark); font-weight: 500; line-height: 1.4; }

/* topics */
.corp-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.corp-topic {
  position: relative; border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg);
  padding: 2rem 1.75rem; background: rgba(255,255,255,.025); display: flex; flex-direction: column;
  overflow: hidden; cursor: default;
  transition: transform .28s var(--ease-out-soft), box-shadow .28s var(--ease-out-soft),
              border-color .28s var(--ease-out-soft), background-color .28s var(--ease-out-soft);
}
/* cursor-following glow, driven by --mx / --my set in JS */
.corp-topic::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
              rgba(102,224,224,.18), rgba(123,97,255,.10) 40%, transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease-out-soft);
}
.corp-topic > * { position: relative; z-index: 1; }
.corp-topic:hover {
  transform: translateY(-6px);
  border-color: rgba(102,224,224,.55);
  background-color: rgba(255,255,255,.05);
  box-shadow: 0 18px 48px -18px rgba(0,0,0,.65), 0 0 0 1px rgba(102,224,224,.12);
}
.corp-topic:hover::before { opacity: 1; }
.corp-topic-num { font-family: var(--font-display); font-weight: 700; font-size: .8125rem; letter-spacing: .04em; color: var(--color-cyan); margin-bottom: 1rem; transition: color .28s var(--ease-out-soft); }
.corp-topic:hover .corp-topic-num { color: #8ff0f0; }
.corp-topic-title { font-size: var(--text-h3); color: var(--text-on-dark); margin-bottom: .6rem; text-wrap: pretty; }
.corp-topic-desc { font-size: var(--text-base); line-height: 1.55; color: var(--text-on-dark-dim); }

/* by-conversation chip + signature */
.corp-chip { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-small); letter-spacing: .01em; color: var(--text-accent); background: var(--color-paper); border: 1.5px solid var(--color-border); padding: .65rem 1.1rem; border-radius: 999px; }
.corp-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-moment); }
.section-dark .corp-chip { color: var(--color-cyan); background: rgba(255,255,255,.04); border-color: var(--border-on-dark); }
.corp-sign { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text-on-dark); }

/* build-it CTA block */
.corp-build { border: 1px solid var(--border-on-dark); border-radius: var(--radius-xl); padding: clamp(2.5rem, 5vw, 4rem); text-align: center; background: linear-gradient(160deg, rgba(102,224,224,.06), rgba(123,97,255,.09)); }

/* ============================================================
   About (Evan) page — additions
   ============================================================ */
/* hero: text + headshot side by side */
.about-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.about-hero-text { text-align: left; }
.about-portrait-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.about-portrait { position: relative; width: min(20rem, 78vw); aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-on-dark); background: linear-gradient(160deg, rgba(102,224,224,.08), rgba(123,97,255,.12)); }
.about-portrait::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--gradient-moment-90); z-index: 2; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.about-portrait-fallback { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 4rem; color: var(--color-cyan); }
.about-portrait-cap { font-family: var(--font-display); font-size: var(--text-small); font-weight: 600; letter-spacing: .04em; color: var(--text-on-dark); margin-top: 1.1rem; text-align: center; }
.about-portrait-sub { font-size: var(--text-small); color: var(--text-on-dark-dim); margin-top: .35rem; text-align: center; }

/* prose blocks */
.about-prose { max-width: 42rem; }
.about-prose p + p { margin-top: 1.25rem; }
.about-clarify { border-left: 3px solid; border-image: var(--gradient-moment-90) 1; padding-left: 1.25rem; }

/* the moment "steps" line */
.about-steps { display: flex; flex-wrap: wrap; gap: .75rem; }
.about-step { font-family: var(--font-display); font-weight: 600; font-size: var(--text-small); letter-spacing: .02em; color: var(--text-on-dark); border: 1px solid var(--border-on-dark); background: rgba(255,255,255,.03); border-radius: 999px; padding: .6rem 1.1rem; }
.about-step .gradient-text { font-weight: 700; }

/* belief chain */
.about-chain { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.about-chain-link { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; color: var(--color-charcoal); }
.about-chain-arrow { font-size: 1.25rem; line-height: 1; color: var(--text-on-dark-dim); transform-origin: center; animation: chain-arrow-pulse 3s var(--ease-out-soft) infinite; }
@keyframes chain-arrow-pulse {
  0%        { color: var(--text-on-dark-dim); text-shadow: none; transform: scale(1); }
  9%        { color: var(--color-cyan); text-shadow: 0 0 14px rgba(102,224,224,.85), 0 0 4px rgba(102,224,224,.9); transform: scale(1.3); }
  24%, 100% { color: var(--text-on-dark-dim); text-shadow: none; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .about-chain-arrow { animation: none; color: var(--color-cyan); }
}

/* recovery cards (3 small) */
.about-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.about-card-k { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3); margin-bottom: .6rem; }

/* credentials list */
.about-creds { display: grid; grid-template-columns: 1fr; gap: .9rem; list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.about-cred { position: relative; padding-left: 1.6rem; font-size: var(--text-base); color: var(--text-on-dark); line-height: 1.5; }
.about-cred::before { content: ""; position: absolute; left: 0; top: .55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--gradient-moment); }
.about-cred-light { color: var(--color-charcoal); }

/* real client quotes */
.about-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.about-quote { margin: 0; border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg); padding: 2.25rem 2.25rem 2rem; background: rgba(255,255,255,.025); position: relative; overflow: hidden; }
.about-quote::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--gradient-moment); }
.about-quote-mark { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: .6; color: var(--color-cyan); }
.about-quote-text { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.42; letter-spacing: -.01em; color: var(--text-on-dark); margin: .75rem 0 0; text-wrap: pretty; }
.about-quote-cite { display: block; margin-top: 1.5rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-small); letter-spacing: .06em; text-transform: uppercase; color: var(--color-cyan); }
.about-quote-cite::before { content: ""; display: inline-block; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--gradient-moment); vertical-align: middle; margin-right: .65rem; }

@media (max-width: 991px) {
  .coach-features, .fit-grid { grid-template-columns: 1fr; }
  .corp-grid3, .corp-topics { grid-template-columns: 1fr; }
  .about-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .about-hero-text { text-align: center; }
  .about-hero-text .btn-row { justify-content: center; }
  .about-prose { margin-inline: auto; }
  .about-cards3 { grid-template-columns: 1fr; }
  .about-quotes { grid-template-columns: 1fr; }
  .moment-steps, .moment-features, .moment-tiers { grid-template-columns: 1fr; }
  .moment-tier.is-feature { transform: none; }
}
@media (max-width: 700px) {
  .corp-stats, .corp-check { grid-template-columns: 1fr; }
  .corp-topics { grid-template-columns: 1fr 1fr; }
  .about-creds { grid-template-columns: 1fr; }
}

/* ============================================================
   Moment App page — additions
   ============================================================ */
/* the moment. wordmark (mark + lowercase word + accent dot) */
.moment-wordmark { display: inline-flex; align-items: center; gap: .7rem; }
.moment-wordmark img { height: 2.25rem; width: auto; display: block; }
.moment-word { font-family: var(--font-display); font-weight: 600; font-size: 2rem; letter-spacing: -.02em; line-height: 1; color: var(--text-on-dark); }
.moment-word b { color: var(--color-cyan); font-weight: 600; }
.moment-hero-note { font-size: var(--text-small); color: var(--text-on-dark-dim); }

/* how it works — three moves */
.moment-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.moment-step {
  position: relative; overflow: hidden; cursor: default;
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg);
  padding: 2.25rem 2rem; background: rgba(255,255,255,.025);
  transition: transform .28s var(--ease-out-soft), box-shadow .28s var(--ease-out-soft),
              border-color .28s var(--ease-out-soft), background-color .28s var(--ease-out-soft);
}
.moment-step::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              rgba(102,224,224,.18), rgba(123,97,255,.11) 40%, transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease-out-soft);
}
.moment-step > * { position: relative; z-index: 1; }
.moment-step:hover {
  transform: translateY(-6px);
  border-color: rgba(102,224,224,.55);
  background-color: rgba(255,255,255,.05);
  box-shadow: 0 18px 48px -18px rgba(0,0,0,.65), 0 0 0 1px rgba(102,224,224,.12);
}
.moment-step:hover::after { opacity: 1; }
.moment-step-word { font-family: var(--font-display); font-weight: 700; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
.moment-step h3 { color: var(--text-on-dark); font-size: var(--text-h3); margin-bottom: .6rem; }
.moment-step p { color: var(--text-on-dark-dim); line-height: 1.55; }
.moment-steps-foot { text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--text-on-dark-dim); font-size: 1.0625rem; }

/* inside the app — feature rows (white cards on tint) */
.moment-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.moment-feature-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.moment-feature h3 { font-size: var(--text-h3); }

/* pricing tiers */
.moment-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.moment-tier { display: flex; flex-direction: column; border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg); padding: 2.5rem 2rem; background: rgba(255,255,255,.025); }
.moment-tier.is-feature { border-color: transparent; background: linear-gradient(160deg, rgba(102,224,224,.08), rgba(123,97,255,.12)); position: relative; overflow: hidden; transform: translateY(-.5rem); }
.moment-tier.is-feature::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--gradient-moment-90); }
.mt-name { font-family: var(--font-display); font-weight: 700; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-cyan); }
.mt-price { font-family: var(--font-display); font-weight: 700; font-size: 2.75rem; line-height: 1; letter-spacing: -.02em; color: var(--text-on-dark); margin: .9rem 0 .2rem; }
.mt-price small { font-size: 1rem; font-weight: 500; color: var(--text-on-dark-dim); letter-spacing: 0; }
.mt-line { font-size: var(--text-base); color: var(--text-on-dark-dim); margin-bottom: 1.5rem; }
.mt-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .85rem; }
.mt-list li { position: relative; padding-left: 1.75rem; font-size: var(--text-base); color: var(--text-on-dark); line-height: 1.45; }
.mt-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 13px; height: 8px; border-left: 2px solid var(--color-cyan); border-bottom: 2px solid var(--color-cyan); transform: rotate(-45deg); }
.mt-cta { margin-top: auto; }
.moment-price-note { text-align: center; font-size: var(--text-small); color: var(--text-on-dark-dim); }