/* ============================================================
   OAKFOLD — MARKETING DESIGN SYSTEM
   Tokens ported from the Oakfold Finance desktop app so the
   site and product read as one product.
   Fonts: Noto Sans (UI/body) + Libre Baskerville (display accents)
   License: SIL OFL 1.1 — see assets/fonts/OFL.txt
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/Geist-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/NotoSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/NotoSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/LibreBaskerville-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/LibreBaskerville-Variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/LibreBaskerville-Italic.woff2') format('woff2'), url('./fonts/LibreBaskerville-Italic.ttf') format('truetype');
}

/* ---------- TOKENS ---------- */
:root {
  /* Brand */
  --color-primary:        #0B2B22;
  --color-primary-hover:  #14463A;
  --color-accent:         #00bd7e;
  --color-accent-hover:   #04855C;
  --color-accent-subtle:  #DDF3E8;
  --color-accent-glow:    rgba(5, 185, 125, 0.18);

  /* Surfaces */
  --color-bg:             #FCFBF8;
  --color-bg-alt:         #F5F4EF;
  --color-surface:        #FFFFFF;
  --color-surface-sunken: rgba(11, 43, 34, 0.04);
  --color-ink:            #0B2B22;

  /* Lines */
  --color-border:         #E6E6E0;
  --color-border-subtle:  #EFEFEA;
  --color-border-strong:  #D5D5CD;

  /* Text */
  --color-text:           #0B2B22;
  --color-text-muted:     #5C6B66;
  --color-text-subtle:    #87938E;
  --color-text-inverse:   #FFFFFF;

  /* Semantic (matches in-app meanings) */
  --color-income:         #05B97D;
  --color-expense:        #EF4444;
  --color-savings:        #3B82F6;
  --color-debt:           #F59E0B;
  --color-danger:         #EF4444;
  --color-warning:        #F59E0B;

  /* Dark section palette */
  --color-dark-bg:        #0F0F0F;
  --color-dark-surface:   #1A1A1A;
  --color-dark-raised:    #232323;
  --color-dark-border:    rgba(255, 255, 255, 0.10);
  --color-dark-text:      #F9FAFB;
  --color-dark-muted:     #A1A8B3;
  --color-dark-subtle:    #6B7280;
  --color-accent-deep:    #0B5C41;

  /* Typography */
  --font-sans:    'Geist', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 1rem;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  46px;
  --text-5xl:  58px;
  --text-6xl:  72px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --leading-tight: 1.12;
  --leading-snug:  1.3;
  --leading-body:  1.65;

  /* Spacing — 8px grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  40px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 3px rgba(15, 15, 15, 0.025), 0 2px 2px rgba(15, 15, 15, 0.015);
  --shadow-md: 0 6px 12px rgba(15, 15, 15, 0.035), 0 3px 4px rgba(15, 15, 15, 0.02);
  --shadow-lg: 0 18px 32px rgba(15, 15, 15, 0.05), 0 6px 8px rgba(15, 15, 15, 0.02);
  --shadow-xl: 0 42px 64px rgba(15, 15, 15, 0.07), 0 12px 16px rgba(15, 15, 15, 0.03);

  /* Motion */
  --transition-fast: 130ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 360ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Motion, after calendly.com's feature graphics: soft at both ends, moves under a second, long rests.
     --ease-smooth carries things between states (a chart morphing, a card resizing); --ease-rise brings
     things in, quick then settling. main.js mirrors --ease-smooth for what CSS can't transition. */
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-rise: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fade: 240ms;
  --dur-rise: 700ms;
  --dur-morph: 900ms;

  /* Layout */
  --container:       1200px;
  --container-narrow: 760px;
  --container-wide:  1360px;
  --gutter:          24px;
  --header-height:   68px;
}

:root { color-scheme: light; }

/* ---------- SQUIRCLE CORNERS ----------
   Every rounded corner is a squircle (superellipse) where the browser supports corner-shape, as in the
   Oakfold app (renderer/design-system.css, "Squircle corners"); elsewhere corners stay plainly round. A
   squircle cuts less off a corner than a circle of the same radius, so every border-radius is written as
   calc(value * var(--sq, 1)) and --sq grows to the app's 1.85 where squircles draw, keeping corners as
   round as they look today. Circles and pills (50%, 999px, --radius-pill) set corner-shape: round beside
   their radius and stay round: give any new one the same pair. */
:root { --sq: 1; }
@supports (corner-shape: squircle) {
  :root { --sq: 1.85; }
  *, ::before, ::after { corner-shape: squircle; }
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-body);
  letter-spacing: -0.01em;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No overflow here: it would make body the sticky header's scroll container, and body never scrolls.
     html's overflow-x: clip already stops sideways overflow. */
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2.5px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: calc(4px * var(--sq, 1));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-ink);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: clamp(38px, 5.4vw, var(--text-6xl)); font-weight: var(--fw-medium);     line-height: var(--leading-tight); letter-spacing: -0.033em; }
/* Looser leading + pretty wrapping so h2 holds up when it runs to several lines. */
h2 {
  font-size: clamp(30px, 3.8vw, var(--text-4xl));
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: 1.32;
  letter-spacing: -0.028em;
  text-wrap: pretty;
}
h3 { font-size: clamp(21px, 2.2vw, var(--text-2xl)); font-weight: var(--fw-semibold); line-height: var(--leading-snug); }
h4 { font-size: var(--text-lg);  font-weight: var(--fw-semibold); line-height: 1.35; }
h5 { font-size: var(--text-md);  font-weight: var(--fw-semibold); line-height: 1.4; }
h6 { font-size: var(--text-sm);  font-weight: var(--fw-semibold); line-height: 1.4; }

p { text-wrap: pretty; }

a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-hover); }

strong, b { font-weight: var(--fw-semibold); color: var(--color-ink); }

.serif { font-family: var(--font-display); font-weight: var(--fw-regular); letter-spacing: -0.01em; }
.num   { font-variant-numeric: tabular-nums; }

/* ---------- LAYOUT PRIMITIVES ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }

.section        { padding-block: clamp(88px, 11vw, 152px); }
.section-tight  { padding-block: clamp(64px, 8vw, 112px); }
.section-alt    { background: var(--color-bg-alt); }
.section-dark   { background: var(--color-dark-bg); color: var(--color-dark-muted); }
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6 { color: var(--color-dark-text); }
.section-dark strong, .section-dark b { color: var(--color-dark-text); }

.section-head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(30px, 3vw, var(--space-10));
}
.section-head.align-start { margin-inline: 0; text-align: left; }
.section-head h2 { text-wrap: balance; }
.section-head p {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.section-head h2 em,
.statement h2 em,
.feature-copy h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent-hover);
}
.section-dark .section-head h2 em,
.section-dark .feature-copy h2 em { color: var(--color-accent); }
.section-dark .section-head p { color: var(--color-dark-muted); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- EYEBROW ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.section-head:not(.align-start) .eyebrow::before { display: none; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding-inline: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.005em;
  border: 1.5px solid transparent;
  border-radius: calc(var(--radius-md) * var(--sq, 1));
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}
.btn:active { transform: translateY(1px); }

.btn-lg { height: 56px; padding-inline: var(--space-8); font-size: var(--text-base); }
.btn-sm { height: 38px; padding-inline: var(--space-4); font-size: var(--text-sm); }
.btn-block { width: 100%; }

.btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.btn-accent:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }

.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn-secondary:hover { background: var(--color-surface-sunken); border-color: var(--color-text-subtle); color: var(--color-text); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-muted); }
.btn-ghost:hover { background: var(--color-surface-sunken); color: var(--color-text); }

.btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--color-ink);
}
.btn-light:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-subtle);
  color: var(--color-ink);
}

.btn-on-dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-on-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* ---------- CARDS ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-lg) * var(--sq, 1));
  padding: var(--space-6);
}
.card-elevated { box-shadow: var(--shadow-md); border-color: var(--color-border-subtle); }
.card-hover { transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--color-border-strong); }

.card-dark {
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  border-radius: calc(var(--radius-lg) * var(--sq, 1));
  padding: var(--space-6);
}

/* ---------- PILL / BADGE ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border); corner-shape: round; }
.pill-accent {
  background: var(--color-accent-subtle);
  color: var(--color-accent-hover);
  border-color: transparent;
}
.pill-dark {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-dark-text);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ---------- ICON TILE ---------- */
.icon-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: calc(var(--radius-md) * var(--sq, 1));
  background: var(--color-accent-subtle);
  color: var(--color-accent-hover);
  flex-shrink: 0;
}
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile-dark { background: rgba(5, 185, 125, 0.14); color: var(--color-accent); }

/* ---------- CHECK LIST ---------- */
.check-list { display: grid; gap: var(--space-3); }
.check-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}
.check-list li::before {
  content: '';
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304855C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; corner-shape: round; }
.section-dark .check-list li { color: var(--color-dark-muted); }
.section-dark .check-list li::before { background-color: rgba(5, 185, 125, 0.16); }

/* ---------- UTILITIES ---------- */
.text-center  { text-align: center; }
.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.text-accent  { color: var(--color-accent); }
.text-sm      { font-size: var(--text-sm); }
.text-xs      { font-size: var(--text-xs); }
.text-md      { font-size: var(--text-md); }
.text-lg      { font-size: var(--text-lg); }
.fw-semibold  { font-weight: var(--fw-semibold); }
.fw-bold      { font-weight: var(--fw-bold); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: #fff;
  border-radius: 0 0 calc(var(--radius-md) * var(--sq, 1)) calc(var(--radius-md) * var(--sq, 1));
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  transition: transform var(--transition-fast);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* ---------- REVEAL ON SCROLL ---------- */
/* Sections fade up as they scroll into view: after a short pause, rising on --ease-smooth over
   --dur-morph, as the hero does (styles.css .lh). Staggered groups add --reveal-stagger on top of the pause. */
.reveal {
  --reveal-delay: calc(100ms + var(--reveal-stagger, 0ms));
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-morph) var(--ease-smooth) var(--reveal-delay), transform var(--dur-morph) var(--ease-smooth) var(--reveal-delay);
}
.reveal:not(.is-visible) { will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- RESPONSIVE GRID FALLBACKS ---------- */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- DARK THEME: components ---------- */