/* ————————————————————————————————————————————————————————————————
   Fasset Business — waitlist page, Natural-system redesign.
   Tokens transcribed from natural.com (July 2026): warm ink neutrals,
   one typeface / one weight, 120px section rhythm, pill CTAs on an
   otherwise crisp editorial surface, floating white product cards on
   soft photographic panels (emulated here with pastel gradients).
   ———————————————————————————————————————————————————————————————— */

/* General Sans, self-hosted variable (same file as the fasset-biz app) —
   lets us sit on the app's off-stop weights instead of flat 400/500. */
@font-face {
  font-family: 'General Sans';
  src: url('../assets/fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans Fallback';
  src: local('Arial');
  size-adjust: 101.5%;
  ascent-override: 98%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* ink — fasset-biz warm-paper light theme: green-cast neutrals,
     every gray carries the brand's temperature (see fasset-biz tokens.css) */
  --ink: oklch(0.2811 0.0093 140);            /* text-default */
  --ink-strong: oklch(0.2019 0.0108 145);     /* headings — warm ink, never #000 */
  --ink-soft: oklch(0.5261 0.0088 130);       /* text-subtle */
  --ink-ghost: oklch(0.8493 0.0085 125);      /* hero continuation */
  --midnight: oklch(0.2019 0.0108 145);
  --btn-ink: oklch(0.2331 0.0231 152);        /* green-cast black — the button color */
  --btn-ink-down: oklch(0.3054 0.0262 152);
  --legal: oklch(0.6768 0.0072 125);          /* text-faint */

  /* surfaces — warm paper + linen, not pure white */
  --bg: oklch(0.9946 0.0018 120);
  --linen: oklch(0.9672 0.0062 122);
  --bg-2: oklch(0.9748 0.0048 120);
  --bg-hover: oklch(0.9707 0.0048 120);
  --line: oklch(0.9269 0.006 120);
  --line-hover: oklch(0.8792 0.0085 120);

  /* the one accent — the app's green, tints only */
  --accent: oklch(0.6061 0.1275 162);
  --success: oklch(0.6061 0.1275 162);

  --font: 'General Sans', 'General Sans Fallback', 'Helvetica Neue', Arial, sans-serif;

  /* variable-font weights — interpolated, off the standard stops (app voice) */
  --w-body: 450;
  --w-medium: 530;
  --w-title: 460;

  --container: 1280px;
  --gutter: 40px;
  --section-pad: 120px;

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ————— Reset ————— */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 24px;
  font-weight: var(--w-body);
  color: var(--ink);
  /* the app's signature: warm paper with a barely-there green wash
     bleeding in from the top corner (fasset-biz shell background) */
  background:
    radial-gradient(1100px 700px at -4% -12%, oklch(0.6061 0.1275 162 / 0.07), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
img, svg { display: block; }
ul { list-style: none; }

::selection { background: oklch(0.2019 0.0108 145 / 0.11); color: var(--midnight); }

/* ————— Type ————— */
h1 {
  font-size: 40px;
  line-height: 56px;
  font-weight: var(--w-title);
  letter-spacing: -0.8px;
  color: var(--midnight);
}
h1 .ghost { color: var(--ink-ghost); }
h2 {
  font-size: 32px;
  line-height: 40px;
  font-weight: var(--w-title);
  letter-spacing: -0.32px;
  color: var(--ink-strong);
}
.kicker { font-size: 15px; line-height: 24px; color: var(--ink-soft); }

@media (max-width: 768px) {
  h1, .hero h1 { font-size: 26px; line-height: 36px; letter-spacing: -0.4px; }
  h2 { font-size: 22px; line-height: 30px; }
}

/* split hero stacks below 960 — copy first, product still in the fold */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { font-size: 34px; line-height: 1.15; }
  .hero-frame .panel { padding: 28px 0 28px 24px; }
  .frame-hero { margin-right: -24px; }
}

/* ————— Buttons ————— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 36px;
  padding: 6px 16px;
  border: 0;
  border-radius: 20px;
  width: fit-content;
  font-size: 15px;
  line-height: 24px;
  cursor: pointer;
  transition: background-color 0.1s ease-out, color 0.1s ease-out;
  white-space: nowrap;
}
.btn-dark { background: var(--btn-ink); color: oklch(0.9861 0.0025 120); font-weight: var(--w-medium); }
.btn-dark:hover { background: var(--btn-ink-down); }

/* The second call to action, for somebody ready to open an account rather than
   join the waitlist. Outlined rather than filled so the two read as two
   choices instead of competing for the same one, and so the waitlist keeps the
   appearance it already had. */
.btn-line {
  background: transparent;
  color: var(--ink);
  font-weight: var(--w-medium);
  box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none;
}
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--line-hover); background: var(--bg-hover); }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.hero-alt { margin: 14px 0 0; font-size: 15px; color: var(--ink-soft); }
.hero-alt a { color: var(--ink); text-underline-offset: 3px; }

/* ————— Entrance motion ————— */
@keyframes page-entrance {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
[data-reveal] { opacity: 0; }
[data-reveal].in { animation: page-entrance 0.8s var(--ease-expo) both; }
.hero [data-reveal].in:nth-child(2) { animation-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; }
  [data-reveal].in { animation: none; }
  html { scroll-behavior: auto; }
}

/* ————— Nav ————— */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: oklch(0.9946 0.0018 120 / 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav.scrolled { border-bottom: 1px solid var(--line); }
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-strong); }
/* the real FASSET® lockup — twinkle stars in accent, wordmark follows color */
.nav-brand .wm-lock { height: 17px; width: auto; display: block; flex-shrink: 0; }
.nav-tag {
  font-size: 15px;
  color: var(--ink-soft);
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

/* ————— Layout primitives ————— */
.hero, .feature, .closing {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
}
.feature { display: flex; flex-direction: column; gap: 80px; padding-top: 0; }
.feature-head { max-width: 480px; display: flex; flex-direction: column; gap: 12px; }
.feature-body { color: var(--ink-soft); }
.feature-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.feature-list li { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.feature-list li::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.5 2.5 2.5 4.5-5.5' fill='none' stroke='%2371706f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ————— Soft panels (photography stand-ins) ————— */
.panel {
  border-radius: 8px;
  min-height: 400px;
  padding: 80px 40px;
  display: grid;
  place-items: center;
}
/* Panels = the app wallpaper: linen paper with the same near-invisible
   green radial wash, entering from a different corner per section. */
.panel--dawn   { background: radial-gradient(120% 130% at 8% -10%, oklch(0.6061 0.1275 162 / 0.10), transparent 62%), var(--linen); }
.panel--cove   { background: radial-gradient(120% 130% at 92% -10%, oklch(0.6061 0.1275 162 / 0.09), transparent 60%), var(--linen); }
.panel--dune   { background: radial-gradient(120% 130% at 6% 110%, oklch(0.6061 0.1275 162 / 0.08), transparent 60%), var(--linen); }
.panel--harbor { background: radial-gradient(120% 130% at 94% 110%, oklch(0.6061 0.1275 162 / 0.09), transparent 60%), var(--linen); }
.panel--meadow { background: radial-gradient(130% 140% at 50% -20%, oklch(0.6061 0.1275 162 / 0.10), transparent 62%), var(--linen); }

/* ————— Floating white product cards ————— */
.frame {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  /* ink-tinted elevation (fasset-biz): 1px contact + soft ambient, never gray blobs */
  box-shadow: 0 0 1px rgba(20, 26, 18, 0.08), 0 1px 1px rgba(20, 26, 18, 0.05),
    0 24px 48px -12px rgba(10, 14, 8, 0.10);
  will-change: transform; /* scroll parallax (natural.js) */
}
.frame-caption {
  margin-top: 16px;
  font-size: 14px;
  line-height: 24px;
  color: var(--legal);
  text-align: center;
}

/* ————— Hero — split: words earn the left, product proves the right.
   The dashboard is cropped by the panel's right edge so it reads as a
   window into a running product, visible in the first viewport. ————— */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 56px;
  text-align: left;
  padding-top: 64px;
}
.hero h1 { font-size: 46px; line-height: 1.08; letter-spacing: -0.025em; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 18px 0 28px;
}
.hero-note { font-size: 14px; color: var(--ink-soft); margin-top: 16px; }
.hero-frame { width: 100%; min-width: 0; }
.hero-frame .panel {
  width: 100%;
  min-height: 0;
  padding: 36px 0 36px 36px;
  place-items: stretch;
  overflow: hidden;
}
.frame-hero {
  width: auto;
  padding: 0;
  overflow: hidden;
  margin-right: -52px;               /* bleeds off the panel's right edge */
  border-radius: 8px 0 0 8px;
  will-change: transform;
}
.hero-frame .frame-caption { text-align: left; padding-left: 6px; font-size: 12.5px; }

/* the dashboard assembles once the hero reveals — balance first, rows follow */
.hero-frame.in .mock-main > * { animation: page-entrance 0.6s var(--ease-expo) both; }
.hero-frame.in .mock-main > :nth-child(1) { animation-delay: 0.25s; }
.hero-frame.in .mock-main > :nth-child(2) { animation-delay: 0.32s; }
.hero-frame.in .mock-main > :nth-child(3) { animation-delay: 0.40s; }
.hero-frame.in .mock-main > :nth-child(4) { animation-delay: 0.48s; }
.hero-frame.in .mock-main > :nth-child(5) { animation-delay: 0.54s; }
.hero-frame.in .mock-main > :nth-child(6) { animation-delay: 0.60s; }
.hero-frame.in .mock-main > :nth-child(7) { animation-delay: 0.66s; }
@media (prefers-reduced-motion: reduce) {
  .hero-frame.in .mock-main > * { animation: none; }
}

/* ————— Waitlist capture ————— */
.capture {
  position: relative;
  display: flex;
  gap: 12px;
  width: min(480px, 100%);
}
.capture input[type='email'] {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease-out;
}
.capture input[type='email']::placeholder { color: var(--ink-soft); }
.capture input[type='email']:focus { border-color: var(--line-hover); }
.capture.invalid input[type='email'] { border-color: oklch(0.6113 0.1641 25.4); }
.capture .btn { height: 44px; border-radius: 22px; padding: 6px 20px; }
.capture .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.capture-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 22px;
  background: var(--bg-2);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
.capture.done input, .capture.done .btn { visibility: hidden; }
.capture.done .capture-done { opacity: 1; }

/* ————— Product mocks (illustrative UI) ————— */
.mock-dash { display: grid; grid-template-columns: 160px 1fr; text-align: left; }
.mock-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 16px;
  border-right: 1px solid var(--line);
}
.mock-logo { width: 14px; height: 14px; background: none; margin: 0 8px 20px; display: block; }
.mock-navitem { font-size: 13px; line-height: 20px; color: var(--ink-soft); padding: 5px 8px; border-radius: 4px; }
.mock-navitem.on { background: var(--bg-2); color: var(--ink); }
.mock-main { padding: 28px 28px 20px; }
.mock-ballabel { font-size: 13px; color: var(--ink-soft); }
.mock-bal { font-size: 32px; line-height: 44px; letter-spacing: -0.4px; color: var(--midnight); margin-top: 2px; }
.mock-bal .cents { color: var(--ink-ghost); }
.mock-accts { display: flex; gap: 8px; margin-top: 16px; }
.mock-acct {
  flex: 1;
  border: 1px solid var(--bg-2);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mock-acct .cur { font-size: 11px; line-height: 16px; color: var(--ink-soft); }
.mock-acct .val { font-size: 14px; color: var(--ink); }
.mock-txh { font-size: 13px; color: var(--ink-soft); margin: 20px 0 4px; }
.mock-tx {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--bg-2);
}
.mock-tx:first-of-type { border-top: 0; }
.mock-tx .ini {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--ink-soft);
  font-size: 11px;
  display: grid;
  place-items: center;
}
.mock-tx .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mock-tx .name { font-size: 14px; line-height: 20px; color: var(--ink); }
.mock-tx .desc { font-size: 12px; line-height: 18px; color: var(--ink-soft); }
.mock-tx .amt { font-size: 14px; color: var(--ink); }
.mock-tx .amt.in { color: var(--success); }

/* Receive — accounts */
.mock-accounts { display: flex; flex-direction: column; text-align: left; }
.acct-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--bg-2);
}
.acct-row:first-child { border-top: 0; padding-top: 4px; }
.acct-row:last-child { padding-bottom: 4px; }
.acct-cur {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink);
  font-size: 12px;
  display: grid;
  place-items: center;
}
.acct-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-name { font-size: 15px; color: var(--ink); }
.acct-meta { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.acct-bal { font-size: 15px; color: var(--ink); }

/* Cards */
.mock-cards { display: grid; grid-template-columns: 1fr 200px; gap: 24px; align-items: center; text-align: left; }
.spend-label { font-size: 13px; color: var(--ink-soft); }
.spend-amt { font-size: 28px; line-height: 40px; letter-spacing: -0.3px; color: var(--midnight); }
.spend-meta { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.spend-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-2);
  margin-top: 20px;
  overflow: hidden;
}
.spend-bar span { display: block; height: 100%; border-radius: 2px; background: var(--ink); }
.spend-cap { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.card-visual {
  aspect-ratio: 1.586;
  border-radius: 12px;
  background: linear-gradient(150deg, oklch(0.2831 0.0262 152), oklch(0.2331 0.0231 152) 60%, oklch(0.3054 0.0262 152));
  color: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-chip { width: 26px; height: 20px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
.card-num { font-size: 13px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.8); }
.card-foot { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255, 255, 255, 0.7); }
.card-net { letter-spacing: 1px; }

/* Move — payout run */
.mock-payout { text-align: left; }
.payout-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.payout-title { font-size: 15px; color: var(--ink); }
.payout-meta { font-size: 13px; line-height: 20px; color: var(--ink-soft); margin-top: 2px; }
.payout-total { font-size: 20px; letter-spacing: -0.2px; color: var(--midnight); }
.payout-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-2);
  margin-top: 24px;
  overflow: hidden;
}
.payout-progress span { display: block; height: 100%; width: 0; background: var(--ink); }
.payout-cap { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }

/* Grow — treasury */
.mock-treasury { text-align: left; }
.tre-head { display: flex; justify-content: space-between; align-items: center; }
.tre-title { font-size: 15px; color: var(--ink); }
.tre-rate {
  font-size: 13px;
  color: var(--ink);
  background: var(--bg-2);
  border-radius: 4px;
  padding: 2px 8px;
}
.tre-earn { font-size: 28px; line-height: 40px; letter-spacing: -0.3px; color: var(--midnight); margin-top: 16px; }
.tre-earn span { font-size: 15px; letter-spacing: 0; color: var(--ink-soft); }
.tre-rows { margin-top: 20px; display: flex; flex-direction: column; }
.tre-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--bg-2);
  color: var(--ink-soft);
  font-size: 14px;
}
.tre-row .num { color: var(--ink); }

/* ————— Closing ————— */
.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  padding-bottom: 240px;
}
.closing h2 { font-size: 40px; line-height: 48px; letter-spacing: -0.32px; }
.closing-body { color: var(--ink-soft); max-width: 480px; }
@media (max-width: 768px) {
  .closing h2 { font-size: 26px; line-height: 34px; }
}

/* ————— Footer ————— */
.footer { border-top: 1px solid var(--line); }
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.footer-brandline { color: var(--ink); max-width: 480px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 320px); justify-content: space-between; gap: 40px; }
.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col h3 { font-size: 15px; font-weight: 400; color: var(--ink); margin-bottom: 8px; }
.footer-col a { color: var(--ink-soft); transition: color 0.15s ease-out; width: fit-content; }
.footer-col a:hover { color: var(--ink); }
.footer-legal { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.footer-legal p { font-size: 14px; line-height: 24px; color: var(--legal); }
.footer-bottom { display: flex; gap: 40px; }
.footer-bottom a { color: var(--ink-soft); font-size: 14px; transition: color 0.15s ease-out; }
.footer-bottom a:hover { color: var(--ink); }

/* ————— Responsive ————— */
@media (max-width: 900px) {
  :root { --gutter: 32px; --section-pad: 80px; }
  .feature { gap: 48px; }
  .footer-cols { grid-template-columns: 1fr 1fr; justify-content: start; }
  .panel { padding: 48px 20px; min-height: 0; }
}
@media (max-width: 640px) {
  .nav-tag { display: none; }
  .hero { gap: 48px; }
  .hero-copy { gap: 24px; }
  .capture { flex-direction: column; }
  .capture .btn { width: 100%; }
  .mock-dash { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .mock-cards { grid-template-columns: 1fr; }
  .card-visual { max-width: 240px; }
  .footer-cols { grid-template-columns: 1fr; }
}