/* Design tokens — extracted from tryclearly.app (Framer) computed styles */
:root {
  /* color */
  --color-primary: rgb(61, 0, 0);            /* Framer token "Primary" */
  --color-primary-80: rgba(61, 0, 0, .8);
  --color-primary-65: rgba(61, 0, 0, .65);
  --color-primary-25: rgba(61, 0, 0, .25);
  --color-primary-12: rgba(61, 0, 0, .12);
  --color-terra: rgba(204, 112, 96, .6);
  --color-terra-45: rgba(204, 112, 96, .6);
  --color-peach-card: rgba(234, 166, 144, .3);
  --color-step-active: rgba(228, 105, 98, .35);
  --color-body: rgb(125, 97, 97);
  --color-white: rgb(255, 255, 255);
  --color-scrim-15: rgba(0, 0, 0, .15);
  --color-scrim-20: rgba(0, 0, 0, .2);
  --color-panel-ink: rgb(28, 28, 30);
  --color-panel-sub: rgb(154, 163, 175);
  --color-accent-blue: rgb(64, 134, 243);    /* mic / waveform */
  --color-sun: #FBBF24;                       /* temperature suns */
  --color-sev-bg: rgb(254, 226, 226);
  --color-sev-text: rgb(220, 38, 38);
  --color-temp-gray: rgb(119, 119, 119);
  --color-day-gray: rgb(156, 163, 175);

  /* gradients */
  --grad-hero: linear-gradient(rgb(255, 255, 255) 0%, rgba(204, 112, 96, .6) 100%);
  --grad-how: linear-gradient(rgba(204, 112, 96, .6) 0%, rgb(255, 255, 255) 100%);
  --grad-footer: linear-gradient(rgba(252, 252, 252, 0) 0%, rgba(204, 112, 96, .75) 130%);
  --grad-card-glow: radial-gradient(94% 69% at 50% 100%, rgba(204, 112, 96, .6) 0%, rgba(241, 206, 247, 0) 100%);
  --grad-faq-glow: radial-gradient(75% 50% at 50% 100%, rgba(204, 112, 96, .6) 0%, rgba(241, 206, 247, 0) 100%);

  /* type */
  --font-display: 'Outfit', sans-serif;
  --font-ui: 'Satoshi', sans-serif;
  --font-footnote: 'Manrope', sans-serif;
  --text-h1-size: 80px;   --text-h1-line: 80px;
  --text-h2-size: 65px;   --text-h2-line: 65px;
  --text-h3-size: 24px;   --text-h3-line: 1.4;
  --text-sub-size: 24px;  --text-sub-line: 1.3;
  --text-body-size: 16px; --text-body-line: 1.55;
  --text-nav-size: 16px;
  --text-step-size: 18px;
  --text-quote-size: 16px;
  --text-note-size: 18px;
  --text-faq-q-size: 24px;
  --text-foot-size: 14px;
  --text-label-size: 13px;

  /* layout */
  --content-width: 1080px;
  --page-pad: 40px;
  --nav-top: 16px;
  --hero-pad-top: 140px;
  --section-pad: 80px;
  --section-pad-lg: 120px;
  --grid-gap: 12px;
  --card-pad: 32px;
  --card-h: 480px;
  --panel-w: 470px;
  --panel-h: 315px;
  --tcard-w: 348px;
  --tcard-h: 380px;
  --tcard-gap: 10px;
  --phone-w: 350px;

  /* radius */
  --radius-section: 40px;
  --radius-card: 32px;
  --radius-tcard: 32px;
  --radius-panel: 12px;
  --radius-photo: 8px;
  --radius-pill: 999px;

  /* shadows */
  --shadow-nav-pill: 0 1px 2px rgba(61, 0, 0, .04), 0 4px 16px rgba(61, 0, 0, .06);
  --shadow-try-glow: rgba(255, 255, 255, .72) 0 .6px 1.6px -1.25px,
                     rgba(255, 255, 255, .64) 0 2.3px 6px -2.5px,
                     rgba(255, 255, 255, .25) 0 10px 26px -3.75px;
  --shadow-panel: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-phone: 0 30px 60px -20px rgba(61, 0, 0, .35);
  --shadow-chip: 0 6px 16px rgba(61, 0, 0, .2);

  /* motion: "stiffness damping" springs.
     appear/rise: extracted from Framer's embedded appear config (load-time).
     soft/cardin/carousel: fitted to rAF-recorded trajectories of the live site. */
  --spring-appear: 250 60;    /* nav + hero text: y -24 */
  --spring-rise: 150 80;      /* hero phone: y 64 */
  --spring-soft: 175 27;      /* section headers, steps, why-copy: y 16, ~420ms */
  --spring-cardin: 360 68;    /* feature cards + FAQ items: y 24, ~700ms */
  --spring-carousel: 120 26;
  --scroll-tau: 145;        /* wheel-smoothing time constant (ms), measured from the original */
  --glow-opacity: 0.4;        /* BgBlur glow layer is permanently 40% in the original */
  --roll-ease: cubic-bezier(.76, 0, .24, 1);
  --roll-dur: .5s;
}