/* ==================================================================
   the_reason — base: design tokens, reset, typography presets
   Values are lifted 1:1 from the Framer build (home.css tokens and
   .framer-styles-preset-* rules). Breakpoints match Framer:
     desktop  ≥ 1024px
     tablet   810–1023.98px
     phone    ≤ 809.98px
   ================================================================== */

:root {
  /* ---- colour tokens (Framer --token-*) ---- */
  --c-black:        #080808;              /* 48f9610e  primary text / dark bg   */
  --c-ink:          #0a0a0a;
  --c-ink-80:       rgba(10, 10, 10, .8); /* 620bcab6                            */
  --c-ink-64:       rgba(10, 10, 10, .64);
  --c-ink-40:       rgba(10, 10, 10, .4); /* fa65dc1a  muted labels              */
  --c-ink-20:       rgba(10, 10, 10, .2); /* c8f302bf                            */
  --c-white:        #ffffff;              /* 61534ff1                            */
  --c-white-68:     rgba(255,255,255,.68);/* bbdc7902                            */
  --c-white-40:     rgba(255,255,255,.4); /* 21dded17                            */
  --c-white-20:     rgba(255,255,255,.2); /* 62447615                            */
  --c-white-16:     rgba(255,255,255,.16);/* ae9f17b7                            */
  --c-white-10:     rgba(255,255,255,.1); /* 0b5afabe                            */
  --c-bg:           #f3f3f3;              /* e9b10fe2  page background           */
  --c-bg-warm:      #f1f1ea;              /* e377a8bf                            */
  --c-accent:       #cffa00;              /* f818926c  acid green CTA            */
  --c-green:        #04cf4e;              /* 74d99caf  positive                  */
  --c-green-2:      #04bd48;              /* 6dfef1d8  protective bar            */
  --c-amber:        #ffa200;              /* e99e2ec3  moderate                  */
  --c-red:          #fa2557;              /* 08f310f0  high risk                 */
  --c-line-10:      rgba(0,0,0,.1);       /* cb08b03e / cd712c79                 */
  --c-line-12:      rgba(0,0,0,.12);      /* fae3bdb9                            */
  --c-fill-06:      rgba(0,0,0,.06);      /* dd33bdbb  tags, icon buttons        */
  --c-fill-08:      rgba(0,0,0,.08);
  --c-fill-32:      rgba(0,0,0,.32);      /* 63a43627  dark glass widget         */
  --c-fill-56:      rgba(0,0,0,.56);      /* 78d13877  modal shape               */
  --c-nav-glass:    rgba(184,184,184,.72);
  --c-glass:        rgba(255,255,255,.8);

  /* ---- layout ---- */
  --page-pad: 40px;
  --nav-h: 80px;          /* sticky nav: 80px tall, see .nav in components.css */
  --radius-xl: 32px;
  --radius-l: 24px;
  --radius-m: 16px;
  --radius-s: 12px;

  /* ---- motion (Framer springs approximated with beziers) ---- */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.27, 0, .51, 1);
}

@media (max-width: 1023.98px) { :root { --page-pad: 32px; } }
@media (max-width: 809.98px)  { :root { --page-pad: 16px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.modal-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-black);
  font-family: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: "cv11" on;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- typography presets ----------
   Named after their role; the Framer preset hash is noted for tracing. */

/* 1yd6x54 — white wide display (hero "future has" / "version") */
.t-display {
  font-family: "Copyright Public Type Variable", "Impact", sans-serif;
  font-variation-settings: "wght" 100;
  font-feature-settings: "dlig" on, "zero" on, "case" on, "ss04" on;
  font-size: 120px; line-height: 1em; letter-spacing: -.02em;
  color: var(--c-white);
}
/* 14t43zd — white serif display (hero "a better") */
.t-display-serif {
  font-family: "PP Kyoto Light", "Times New Roman", serif;
  font-feature-settings: "dlig" on, "zero" on, "case" on, "ss12" on, "ss01" on, "ss11" on, "ss15" on, "ss09" on, "ss03" on, "ss04" on;
  font-size: 120px; line-height: 1em; letter-spacing: -.02em;
  color: var(--c-white);
}
/* Yamantaka — hero word "Every" (inline style in Framer) */
.t-display-thin {
  font-family: "Yamantaka Test Thin", "Copyright Public Type Variable", sans-serif;
  font-feature-settings: "dlig" on, "zero" on, "case" on, "ss12" on, "ss01" on, "ss11" on, "ss15" on, "ss09" on, "ss03" on, "ss04" on;
  font-size: 120px; line-height: 1em; letter-spacing: -.02em;
  color: var(--c-white);
}
/* 7mhgnm — section h2, serif */
.t-h2-serif {
  font-family: "PP Kyoto Light", "Times New Roman", serif;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on, "zero" on, "case" on, "ss01" on, "ss12" on, "ss09" on, "ss11" on, "ss15" on;
  font-size: 56px; line-height: 1em; letter-spacing: -.01em;
  color: var(--c-ink);
}
/* npe3x9 — section h2, wide display */
.t-h2-display {
  font-family: "Copyright Public Type Variable", "Impact", sans-serif;
  font-variation-settings: "wght" 100;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on, "zero" on, "case" on, "ss04" on;
  font-size: 56px; line-height: 1em; letter-spacing: -.01em;
  color: var(--c-ink);
}
/* PP Kyoto Medium 36px — intro line 1 */
.t-intro-serif {
  font-family: "PP Kyoto Medium", "PP Kyoto Light", "Times New Roman", serif;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on, "ss01" on, "zero" on, "case" on, "ss12" on, "ss09" on, "ss11" on, "ss15" on;
  font-size: 36px; line-height: 1.2; letter-spacing: 0;
}
/* Inter 36px opsz 32 — intro line 2 / hero h2 fallback */
.t-intro-sans {
  font-family: "Mona Sans Variable", "Mona Sans", sans-serif;
  font-variation-settings: "wdth" 96, "wght" 450;
  font-feature-settings: "blwf" on, "zero" on, "ss11" on, "ss12" on, "ss15" on, "ss09" on;
  font-size: 36px; line-height: 1.2; letter-spacing: -.01em;
}
/* i9w4r7 — display 32 (five tabs) */
.t-h3-display-32 {
  font-family: "Copyright Public Type Variable", "Impact", sans-serif;
  font-variation-settings: "wght" 100;
  font-feature-settings: "zero" on, "case" on, "ss04" on;
  font-size: 32px; line-height: 32px; letter-spacing: 0;
}
/* 1ocjs8w — display 36 (founder name, modal name) */
.t-h3-display {
  font-family: "Copyright Public Type Variable", "Impact", sans-serif;
  font-variation-settings: "wght" 100;
  font-feature-settings: "zero" on, "case" on, "ss04" on;
  font-size: 36px; line-height: 40px; letter-spacing: 0;
}
/* 5e22kb — serif 36 (founder role, "(the_reason) is:" paragraph) */
.t-h3-serif {
  font-family: "PP Kyoto Light", "Times New Roman", serif;
  font-feature-settings: "zero" on, "case" on, "ss01" on, "ss11" on, "ss15" on, "ss09" on, "ss12" on;
  font-size: 36px; line-height: 44px; letter-spacing: 0;
}
/* 19h6wfe — display 22 (step card titles "_1.AI & expert analysis") */
.t-h4-display {
  font-family: "Copyright Public Type Variable", "Impact", sans-serif;
  font-variation-settings: "wght" 100;
  font-feature-settings: "zero" on, "case" on, "ss04" on;
  font-size: 22px; line-height: 26px; letter-spacing: .01em;
  color: var(--c-ink);
}
/* prmmuz — Inter 20 body (section intros) */
.t-p-20 {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-variation-settings: "opsz" 32, "wght" 450;
  font-feature-settings: "cv11" on, "case" on, "zero" on, "ss11" on, "ss15" on, "ss09" on, "ss12" on;
  font-size: 20px; line-height: 28px; letter-spacing: 0;
}
/* interface text 32 (case card names) */
.t-ui-32 {
  font-family: "Mona Sans Variable", "Mona Sans", sans-serif;
  font-variation-settings: "wdth" 96, "wght" 450;
  font-feature-settings: "blwf" on, "zero" on, "ss11" on, "ss12" on, "ss15" on, "ss09" on;
  font-size: 32px; line-height: 40px; letter-spacing: -.01em;
}
/* interface text 24 (comparison table headings) */
.t-ui-24 {
  font-family: "Mona Sans Variable", "Mona Sans", sans-serif;
  font-variation-settings: "wdth" 96, "wght" 450;
  font-feature-settings: "blwf" on, "zero" on, "ss11" on, "ss12" on, "ss15" on, "ss09" on;
  font-size: 24px; line-height: 32px; letter-spacing: -.01em;
}
/* interface text 19 (body copy in cards / modal) */
.t-ui-19 {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-variation-settings: "opsz" 19, "wght" 450;
  font-feature-settings: "cv11" on, "case" on, "zero" on, "ss11" on, "ss15" on, "ss09" on, "ss12" on;
  font-size: 19px; line-height: 24px; letter-spacing: -.01em;
}
/* interface text 16 (nav buttons, table rows, tickers) */
.t-ui-16 {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-variation-settings: "opsz" 16, "wght" 450;
  font-feature-settings: "cv11" on, "case" on, "zero" on, "ss11" on, "ss15" on, "ss09" on, "ss12" on;
  font-size: 16px; line-height: 24px; letter-spacing: -.01em;
}
/* interface text 16 bold (sub-page sub-headings) */
.t-ui-16-b {
  font-family: "Mona Sans Variable", "Mona Sans", sans-serif;
  font-variation-settings: "wdth" 97, "wght" 700;
  font-feature-settings: "blwf" on, "zero" on, "ss11" on, "ss12" on, "ss15" on, "ss09" on;
  font-size: 16px; line-height: 24px; letter-spacing: 0;
}
/* 153fgh4 — Inter 15 / 550 (button labels) */
.t-btn {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-variation-settings: "opsz" 28, "wght" 550;
  font-feature-settings: "cv11" on, "blwf" on, "zero" on, "case" on, "ss11" on, "ss12" on, "ss15" on;
  font-size: 15px; line-height: 24px; letter-spacing: 0;
}
/* 17cdze1 — Inter 14 (widget rows) */
.t-inter-14 {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-variation-settings: "opsz" 26, "wght" 450;
  font-feature-settings: "blwf" on, "cv11" on, "ss01" on, "zero" on, "ss09" on, "ss11" on;
  font-size: 14px; line-height: 20px; letter-spacing: 0;
}
/* 1henjub — Inter 12 (protocol card sheet values) */
.t-inter-12 {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-variation-settings: "opsz" 28, "wght" 450;
  font-feature-settings: "cv11" on, "blwf" on, "ss01" on, "zero" on, "ss11" on, "ss15" on, "ss12" on;
  font-size: 12px; line-height: 16px; letter-spacing: 0;
}
/* 116k9n8 — Inter 10 (sheet labels "Dose / Course / Time") */
.t-inter-10 {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-variation-settings: "opsz" 28, "wght" 400;
  font-feature-settings: "blwf" on, "cv11" on, "ss01" on, "zero" on, "ss11" on, "ss12" on;
  font-size: 10px; line-height: 12px; letter-spacing: .04em;
}
/* zmwew2 — Geist Mono 12 uppercase eyebrow */
.t-mono {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on, "ss01" on, "zero" on, "case" on;
  font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase;
}
/* the A / B / C letter inside a hallmark ring */
.t-grade-24 {
  font-family: "Inter Variable", "Inter", sans-serif;
  font-variation-settings: "opsz" 24, "wght" 500;
  font-feature-settings: "cv11" on, "case" on, "zero" on, "ss11" on, "ss15" on, "ss09" on, "ss12" on;
  font-size: 24px; line-height: 32px; letter-spacing: .02em;
}

/* ---- responsive preset sizes (from Framer breakpoint rules) ---- */
@media (max-width: 1023.98px) {
  .t-display, .t-display-serif, .t-display-thin { font-size: 88px; letter-spacing: 0; }
  .t-display-serif, .t-display-thin { letter-spacing: -.02em; }
  .t-h2-serif { font-size: 44px; }
  .t-h2-display { font-size: 48px; }
  .t-h3-display-32 { font-size: 28px; }
}
@media (max-width: 809.98px) {
  .t-display, .t-display-serif, .t-display-thin { font-size: 44px; letter-spacing: -.01em; }
  .t-display-serif, .t-display-thin { letter-spacing: -.02em; }
  .t-h2-serif { font-size: 34px; }
  .t-h2-display { font-size: 34px; letter-spacing: 0; }
  .t-h3-display-32 { font-size: 26px; }
  .t-h3-display, .t-h3-serif { font-size: 24px; line-height: 32px; }
  .t-intro-serif, .t-intro-sans { font-size: 28px; }
}

/* ---------- page transitions ----------
   Cross-document view transitions: the browser keeps the old page on screen,
   paints the new one underneath and animates between them. One at-rule turns
   it on for every navigation inside the site; browsers without it just do a
   plain load, so nothing needs a fallback.
   ------------------------------------------------------------------------ */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: page-out .28s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: page-in .42s var(--ease-spring) both;
}
@keyframes page-out { to { opacity: 0; transform: scale(.985); } }
@keyframes page-in  { from { opacity: 0; transform: translateY(12px); } }

/* The membership card is the same object on both pages, so it keeps its own
   name and the browser tweens it from one position to the other instead of
   fading it twice. */
.pcard--ess { view-transition-name: card-essential; }
.pcard--pro { view-transition-name: card-pro; }
::view-transition-group(card-essential),
::view-transition-group(card-pro) {
  animation-duration: .5s;
  animation-timing-function: var(--ease-spring);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- appear animations (data-appear) ----------
   Framer configs (appear.json):
     fade      opacity .001 → 1, spring bounce .2, 1 s
     fade-fast opacity .001 → 1, spring bounce .2, .4 s
     fade-slow opacity .001 → 1, spring bounce 0, 2 s, delay .2 / .4
     up        y 12 → 0,   1 s, delay .6
     down      y -10 → 0,  1 s
     left      x -20 → 0,  .6 s bounce .2, delay .2
     left-10   x -10 → 0,  1 s bounce .2                              */
.js [data-appear] {
  opacity: .001;
  transition: opacity var(--ap-dur, 1s) var(--ease-spring) var(--ap-delay, 0s),
              transform var(--ap-dur, 1s) var(--ease-spring) var(--ap-delay, 0s);
}
/* No will-change here: it makes the element a backdrop root, and any
   backdrop-filter inside it then has nothing behind it to blur. */
.js [data-appear="up"]      { transform: translateY(12px); }
.js [data-appear="down"]    { transform: translateY(-10px); }
.js [data-appear="left"]    { transform: translateX(-20px); --ap-dur: .6s; --ap-delay: .2s; }
.js [data-appear="left-10"] { transform: translateX(-10px); }
.js [data-appear="fade-fast"] { --ap-dur: .4s; }
.js [data-appear="fade-slow"] { --ap-dur: 2s; --ap-delay: .2s; }
.js [data-appear="fade-slow-2"] { --ap-dur: 2s; --ap-delay: .4s; }
.js [data-appear="up"] { --ap-delay: .6s; }
.js [data-appear].is-in { opacity: 1; transform: none; }
/* parallax elements only fade in: their transform is driven by scroll every frame */
.js [data-parallax][data-appear] { transform: none; transition-property: opacity; }

/* scroll-revealed elements: opacity tracks scroll position, set by main.js */
.js [data-reveal] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js [data-appear] { opacity: 1; transform: none; transition: none; }
}