/* =============================================================================
 * Finance Reps — site.css (V0.1.2)
 * =============================================================================
 * Page-level layout and section patterns. Sits on top of brand-tokens.css.
 *
 * V0.1.2 changes vs V0.1.1:
 *   - Dark mode is now LOCKED OFF. The brand-tokens.css dark-mode media
 *     query is overridden below so the site always renders in light mode
 *     regardless of OS preference.
 *   - Page background switched to #FAF8F3 (the actual app's warm cream
 *     V612_PALETTE.bgPage) — the V0.1.1 cream (#FBF9F4) was a touch off.
 *   - Track-specific colours from the app (emerald / indigo / rose /
 *     amber / teal / plum) are now first-class on the tracks carousel.
 *   - Hero compacted; landing page collapsed to ~2 screens.
 *   - New: tracks carousel, Three-Statement Reps preview rendering.
 *   - Removed: long-form "what it is", "how it works", "who it's for",
 *     trust strip, FAQ teaser — all from landing only; legal pages unchanged.
 * ============================================================================= */

/* ---------- Self-hosted serif (Crimson Pro variable, OFL) ----------
 * Source: github.com/google/fonts/tree/main/ofl/crimsonpro
 * Latin subset, ~56 KB, single woff2, covers weights 200–900.
 * Shipped alongside OFL.txt in public/assets/fonts/.
 */
@font-face {
  font-family: 'Crimson Pro';
  src: url('/assets/fonts/CrimsonPro-VF.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- LOCK LIGHT MODE ----------
 * The brand-tokens.css ships with a `@media (prefers-color-scheme: dark)`
 * block that flips the semantic tokens to dark values. For V0.1.2 the
 * founder asked us to "park dark mode" — so this block re-states the
 * light values inside the dark media query, forcing the page to stay
 * in light mode regardless of OS preference.
 *
 * The dark tokens (--fr-graphite-deep, --fr-text-primary-dark, etc.)
 * remain defined in brand-tokens.css for future re-enablement; nothing
 * is deleted, only overridden.
 */
:root {
  color-scheme: light;
  /* Override the brand-tokens default to match the actual app cream. */
  --fr-bg-page: #FAF8F3;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --fr-bg-page:        #FAF8F3;
    --fr-bg-card:        #FFFFFF;
    --fr-bg-subtle:      #FAF8F3;
    --fr-text-primary:   var(--fr-graphite);
    --fr-border-default: var(--fr-stone-warm);
    --fr-accent:         var(--fr-signal-blue);
    --fr-accent-hover:   var(--fr-signal-blue-deep);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- Base ---------- */
html, body { height: 100%; }
body {
  font-family: var(--fr-sans);
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-base);
  color: var(--fr-text-primary);
  background: var(--fr-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Layout containers ---------- */
.fr-container {
  max-width: var(--fr-max-page);
  margin: 0 auto;
  padding: 0 var(--fr-space-6);
}
.fr-container--prose {
  max-width: var(--fr-max-prose);
  margin: 0 auto;
  padding: 0 var(--fr-space-6);
}
.fr-container--narrow {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--fr-space-6);
}

/* ---------- Hairlines ---------- */
.fr-rule {
  border: 0; height: 1px;
  background: var(--fr-stone-subtle);
  margin: 0;
}

/* ---------- Header / nav ---------- */
.fr-header {
  border-bottom: 1px solid var(--fr-stone-subtle);
  background: var(--fr-bg-page);
}
.fr-header__inner {
  max-width: var(--fr-max-page);
  margin: 0 auto;
  padding: var(--fr-space-3) var(--fr-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fr-space-4);
}
.fr-header .fr-wordmark { font-size: var(--fr-text-lg); }
.fr-nav {
  display: flex;
  align-items: center;
  gap: var(--fr-space-6);
  font-family: var(--fr-sans);
  font-size: var(--fr-text-sm);
  font-weight: 500;
}
.fr-nav a {
  color: var(--fr-text-secondary);
  transition: color 120ms ease;
}
.fr-nav a:hover { color: var(--fr-text-primary); }

/* ---------- Hero (compact V0.1.2) ----------
 * Targets ~600px tall on desktop so it occupies most of screen 1
 * but leaves the Reps preview visible at the fold.
 */
.fr-hero {
  padding: var(--fr-space-16) 0 var(--fr-space-12);
}
.fr-hero__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--fr-space-6);
}
.fr-hero__wordmark { margin-bottom: var(--fr-space-8); }
.fr-hero__wordmark .fr-wordmark--hero {
  font-size: clamp(40px, 7vw, 64px);
}
.fr-hero__headline {
  font-family: var(--fr-serif);
  font-size: clamp(32px, 4.6vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--fr-tracking-tight);
  color: var(--fr-text-primary);
  margin-bottom: var(--fr-space-4);
  max-width: 22ch;
}
.fr-hero__sub {
  font-family: var(--fr-sans);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: var(--fr-leading-snug);
  color: var(--fr-text-secondary);
  max-width: 56ch;
  margin-bottom: var(--fr-space-8);
}
.fr-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fr-space-3);
}

/* ---------- Coming-soon store badges ---------- */
.fr-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--fr-space-3) var(--fr-space-5);
  background: var(--fr-bg-card);
  border: 1px solid var(--fr-stone-warm);
  border-radius: var(--fr-radius-md);
  font-family: var(--fr-sans);
  color: var(--fr-text-primary);
  min-width: 200px;
}
.fr-badge__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-text-tertiary);
}
.fr-badge__store {
  font-size: var(--fr-text-base);
  font-weight: 500;
  color: var(--fr-text-primary);
}

/* ---------- Section pattern ---------- */
.fr-section {
  padding: var(--fr-space-12) 0;
}
.fr-eyebrow {
  display: inline-block;
  font-family: var(--fr-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fr-text-tertiary);
  margin-bottom: var(--fr-space-3);
}
.fr-section__heading {
  font-family: var(--fr-serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--fr-tracking-snug);
  color: var(--fr-text-primary);
  margin-bottom: var(--fr-space-3);
  max-width: 28ch;
}
.fr-section__lede {
  font-family: var(--fr-sans);
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-base);
  color: var(--fr-text-secondary);
  max-width: 56ch;
  margin-bottom: var(--fr-space-8);
}

/* =============================================================================
 * THREE-STATEMENT REPS PREVIEW
 * =============================================================================
 * A static recreation of the V6.7.4 `ThreeStatementRepsAdvancedPreview`
 * component from the app. Marketing graphic: a believable miniature of
 * what the Advanced 12-row mode looks like mid-rep. Same scenario the
 * app preview uses (Sell $300 of inventory for $500 cash — chosen so
 * the IS, BS, and CFS all move and the BS still ties).
 *
 * Brand-blue accent (matches REPS_ACCENTS.threeStatement = #2563EB).
 * Sits inside a tinted outer container so it reads as "a screen, not a table".
 * ============================================================================= */

.fr-reps-preview {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--fr-space-10);
  align-items: center;
}
.fr-reps-preview__text { max-width: 38ch; }
.fr-reps-preview__heading {
  font-family: var(--fr-serif);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--fr-tracking-snug);
  margin-bottom: var(--fr-space-3);
}
.fr-reps-preview__lede {
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-base);
  color: var(--fr-text-secondary);
  margin-bottom: var(--fr-space-5);
}
.fr-reps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--fr-space-2);
}
.fr-reps-list li {
  font-family: var(--fr-serif);
  font-size: var(--fr-text-lg);
  font-weight: 500;
  color: var(--fr-text-primary);
}
.fr-reps-list li::before {
  content: '·';
  color: var(--fr-signal-blue);
  margin-right: var(--fr-space-2);
  font-weight: 700;
}

/* Outer card — tinted brand-blue background that frames the inner "screen" */
.fr-reps-frame {
  background: var(--fr-signal-blue-tint);    /* #EFF6FF */
  border-radius: var(--fr-radius-lg);
  padding: 14px;
}
.fr-reps-frame__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 4px;
}
.fr-reps-frame__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fr-signal-blue-deep);
}
.fr-reps-frame__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.13);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fr-signal-blue-deep);
}
.fr-reps-frame__pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fr-signal-blue-deep);
}

/* Inner card — the "screen" of the Rep itself */
.fr-reps-screen {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  padding: 14px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--fr-text-primary);
}

/* Scenario card — amber left stripe, matching app's #FFFBEB / #F59E0B */
.fr-reps-scenario {
  background: #FFFBEB;
  border-left: 4px solid #F59E0B;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
}
.fr-reps-scenario__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #B45309;
  margin-bottom: 2px;
}
.fr-reps-scenario__body {
  font-size: 11px;
  color: #1C1917;
  line-height: 1.4;
}
.fr-reps-scenario__body strong { font-weight: 700; }

/* Section labels (Income Statement / Assets / etc.) */
.fr-reps-section {
  margin-bottom: 10px;
}
.fr-reps-section__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fr-signal-blue-deep);
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #DBEAFE;
}

/* Row inside a section: row name | direction chip | magnitude */
.fr-reps-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.fr-reps-row__name {
  color: var(--fr-text-primary);
  font-weight: 500;
}
.fr-reps-row--flat .fr-reps-row__name {
  color: var(--fr-text-tertiary);
  font-weight: 400;
}
.fr-reps-chip {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.fr-reps-chip--up   { background: #DCFCE7; color: #15803D; }
.fr-reps-chip--down { background: #FEE2E2; color: #B91C1C; }
.fr-reps-chip--flat { background: #F5F5F4; color: #A8A29E; }
.fr-reps-row__mag {
  font-family: var(--fr-mono);
  font-size: 11px;
  color: var(--fr-text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
}
.fr-reps-row--flat .fr-reps-row__mag {
  color: var(--fr-text-tertiary);
}

/* Ties badge at the bottom */
.fr-reps-ties {
  margin-top: 10px;
  padding: 8px 10px;
  background: #DCFCE7;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fr-reps-ties__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #15803D;
}
.fr-reps-ties__value {
  font-family: var(--fr-mono);
  font-size: 11px;
  color: #15803D;
  font-weight: 600;
}

/* =============================================================================
 * TRACK CAROUSEL
 * =============================================================================
 * Horizontal scroll-snap rail of 6 track cards. Each card uses the
 * track's actual app colour (TRACKS constant from accountly-v6-7-4.jsx)
 * as a hero gradient on the top portion of the card, with a white body
 * for the tagline. Mirrors the app's TrackCard component.
 *
 * Pure CSS — no JS — using `scroll-snap-type: x mandatory` so the user
 * gets snap-to-card behaviour with their browser's native scroll.
 * ============================================================================= */

.fr-tracks-rail {
  display: flex;
  gap: var(--fr-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 var(--fr-space-6);   /* bottom space for scrollbar */
  margin: 0 calc(var(--fr-space-6) * -1);   /* bleed to viewport edges */
  padding-left: var(--fr-space-6);
  padding-right: var(--fr-space-6);
  scroll-padding-left: var(--fr-space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--fr-stone-warm) transparent;
}
.fr-tracks-rail::-webkit-scrollbar { height: 8px; }
.fr-tracks-rail::-webkit-scrollbar-thumb {
  background: var(--fr-stone-warm);
  border-radius: 4px;
}
.fr-tracks-rail::-webkit-scrollbar-track { background: transparent; }

.fr-track-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--fr-bg-card);
  border-radius: var(--fr-radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fr-stone-subtle);
}

.fr-track-card__hero {
  position: relative;
  overflow: hidden;
  padding: var(--fr-space-5);
  color: #FFFFFF;
  min-height: 180px;
  /* gradient set inline via custom properties --track-color and --track-deep */
  background: linear-gradient(135deg, var(--track-color), var(--track-deep));
}
.fr-track-card__icon-bg {
  position: absolute;
  top: -24px;
  right: -24px;
  opacity: 0.18;
  width: 128px;
  height: 128px;
}
.fr-track-card__icon-bg svg { width: 100%; height: 100%; stroke: #FFFFFF; }
.fr-track-card__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--fr-space-3);
  opacity: 0.92;
}
.fr-track-card__icon {
  position: relative;
  width: 28px;
  height: 28px;
  margin-bottom: var(--fr-space-3);
}
.fr-track-card__icon svg { width: 100%; height: 100%; stroke: #FFFFFF; }
.fr-track-card__title {
  position: relative;
  font-family: var(--fr-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--fr-tracking-snug);
  margin-bottom: 4px;
}
.fr-track-card__sub {
  position: relative;
  font-family: var(--fr-sans);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.95;
}
.fr-track-card__body {
  padding: var(--fr-space-4) var(--fr-space-5) var(--fr-space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.fr-track-card__hint {
  font-family: var(--fr-sans);
  font-size: 12px;
  color: var(--fr-text-tertiary);
  letter-spacing: 0.05em;
}

/* Carousel hint — small "← scroll →" cue for mobile / first-time users */
.fr-tracks-hint {
  font-family: var(--fr-sans);
  font-size: 12px;
  color: var(--fr-text-tertiary);
  margin-top: var(--fr-space-2);
}

/* ---------- Footer (compact V0.1.2) ---------- */
.fr-footer {
  border-top: 1px solid var(--fr-stone-warm);
  padding: var(--fr-space-8) 0 var(--fr-space-6);
  margin-top: var(--fr-space-12);
}
.fr-footer__inner {
  max-width: var(--fr-max-page);
  margin: 0 auto;
  padding: 0 var(--fr-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-5);
}
.fr-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--fr-space-6);
}
.fr-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fr-space-5);
  font-size: var(--fr-text-sm);
  color: var(--fr-text-secondary);
}
.fr-footer__nav a {
  color: var(--fr-text-secondary);
  transition: color 120ms ease;
}
.fr-footer__nav a:hover { color: var(--fr-text-primary); }
.fr-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fr-space-3);
  font-size: var(--fr-text-xs);
  color: var(--fr-text-tertiary);
}
.fr-footer__bottom span { line-height: 1.5; }

/* ---------- Prose pages (Privacy / Terms / Support / Contact) ---------- */
.fr-prose {
  max-width: var(--fr-max-prose);
  margin: 0 auto;
  padding: var(--fr-space-16) var(--fr-space-6) var(--fr-space-20);
}
.fr-prose__eyebrow {
  font-family: var(--fr-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fr-text-tertiary);
  margin-bottom: var(--fr-space-3);
}
.fr-prose h1 {
  font-family: var(--fr-serif);
  font-size: clamp(36px, 4.4vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--fr-tracking-tight);
  margin-bottom: var(--fr-space-3);
}
.fr-prose__meta {
  font-size: var(--fr-text-sm);
  color: var(--fr-text-tertiary);
  margin-bottom: var(--fr-space-10);
}
.fr-prose h2 {
  font-family: var(--fr-serif);
  font-size: var(--fr-text-2xl);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--fr-tracking-snug);
  margin: var(--fr-space-10) 0 var(--fr-space-3);
}
.fr-prose h3 {
  font-family: var(--fr-serif);
  font-size: var(--fr-text-xl);
  font-weight: 500;
  margin: var(--fr-space-6) 0 var(--fr-space-2);
}
.fr-prose p, .fr-prose ul, .fr-prose ol {
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-base);
  margin-bottom: var(--fr-space-4);
}
.fr-prose p { color: var(--fr-text-secondary); }
.fr-prose ul, .fr-prose ol { padding-left: var(--fr-space-6); }
.fr-prose li {
  margin-bottom: var(--fr-space-2);
  color: var(--fr-text-secondary);
}
.fr-prose a {
  color: var(--fr-signal-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
.fr-prose a:hover { color: var(--fr-signal-blue-deep); }
.fr-prose strong { color: var(--fr-text-primary); font-weight: 600; }

.fr-contact-card {
  border: 1px solid var(--fr-stone-warm);
  border-radius: var(--fr-radius-lg);
  padding: var(--fr-space-6);
  margin: var(--fr-space-8) 0;
  background: var(--fr-bg-card);
}
.fr-contact-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fr-space-3);
  align-items: baseline;
}
.fr-contact-card__row + .fr-contact-card__row { margin-top: var(--fr-space-3); }
.fr-contact-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fr-text-tertiary);
  min-width: 88px;
}
.fr-contact-card__value {
  font-family: var(--fr-mono);
  font-size: var(--fr-text-base);
  color: var(--fr-text-primary);
}

/* ---------- Skip link ---------- */
.fr-skip {
  position: absolute;
  left: -10000px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.fr-skip:focus {
  position: static;
  width: auto; height: auto;
  padding: var(--fr-space-3) var(--fr-space-4);
  background: var(--fr-signal-blue);
  color: var(--fr-white);
}

/* ---------- Mobile adjustments ---------- */
@media (max-width: 760px) {
  .fr-hero { padding: var(--fr-space-12) 0 var(--fr-space-8); }
  .fr-hero__wordmark { margin-bottom: var(--fr-space-6); }
  .fr-hero__sub { margin-bottom: var(--fr-space-6); }
  .fr-section { padding: var(--fr-space-10) 0; }

  /* Reps preview stacks vertically; preview goes below text */
  .fr-reps-preview {
    grid-template-columns: 1fr;
    gap: var(--fr-space-6);
  }
  .fr-reps-preview__text { max-width: none; }

  .fr-header__inner { padding: var(--fr-space-3) var(--fr-space-4); }
  .fr-container, .fr-container--narrow, .fr-container--prose,
  .fr-footer__inner {
    padding-left: var(--fr-space-4);
    padding-right: var(--fr-space-4);
  }

  /* Carousel cards narrow slightly on mobile */
  .fr-track-card { flex: 0 0 240px; }
  .fr-tracks-rail {
    margin: 0 calc(var(--fr-space-4) * -1);
    padding-left: var(--fr-space-4);
    padding-right: var(--fr-space-4);
    scroll-padding-left: var(--fr-space-4);
  }
}