/* === Fabyr design system tokens === */
/* =============================================================
   ANIMIS — Colors & Type tokens
   ============================================================= */

/* Fonts loaded from Google Fonts. SUBSTITUTION FLAGGED:
   We're using Fraunces (display serif) and Inter (body sans) as
   the closest open-source matches to the calm-editorial direction.
   If brand has licensed faces (Tiempos, Söhne, GT America), swap here. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COLOR ---------- */

  /* Brand core — drawn from the logo mark */
  --fabyr-ink:        #0F1F3D;   /* deep navy — primary ink */
  --fabyr-ink-soft:   #1F2D4D;
  --fabyr-blue:       #2A4BE0;   /* royal — primary accent */
  --fabyr-blue-deep:  #1E37B8;
  --fabyr-blue-soft:  #E7ECFC;

  --fabyr-jade:       #0BC768;   /* secondary accent — life, growth */
  --fabyr-jade-deep:  #079D52;
  --fabyr-jade-soft:  #DCF3E3;

  --fabyr-blush:      #FFC8C8;   /* warmth — humanist accent */
  --fabyr-blush-deep: #F2A8A8;
  --fabyr-blush-soft: #FBEDED;

  --fabyr-amber:      #D9A24E;   /* editorial highlight — sparing use */
  --fabyr-amber-soft: #F6EBD7;

  /* Neutrals — paper-warm, NOT cool grey */
  --paper-0:    #FBFAF7;   /* off-white page bg */
  --paper-1:    #F5F2EC;   /* card / inset */
  --paper-2:    #ECE7DD;   /* dividers, soft blocks */
  --paper-3:    #D9D2C4;   /* borders */
  --ash-1:      #8E8779;   /* tertiary text */
  --ash-2:      #5C5648;   /* secondary text */
  --ash-3:      #2A2620;   /* near-ink for body */

  /* Semantic — foreground */
  --fg-1:       var(--fabyr-ink);     /* primary text */
  --fg-2:       var(--ash-3);          /* body text */
  --fg-3:       var(--ash-2);          /* secondary */
  --fg-4:       var(--ash-1);          /* tertiary / captions */
  --fg-on-dark: var(--paper-0);
  --fg-link:    var(--fabyr-blue-deep);

  /* Semantic — background / surface */
  --bg-page:    var(--paper-0);
  --bg-surface: #FFFFFF;
  --bg-inset:   var(--paper-1);
  --bg-block:   var(--paper-2);
  --bg-ink:     var(--fabyr-ink);

  /* Semantic — line / border */
  --line-1:     var(--paper-2);   /* hairline */
  --line-2:     var(--paper-3);   /* standard */
  --line-3:     var(--ash-1);     /* strong */

  /* Semantic — status */
  --status-positive: var(--fabyr-jade-deep);
  --status-warning:  var(--fabyr-amber);
  --status-critical: #B83A3A;
  --status-info:     var(--fabyr-blue);

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- SHADOWS — soft, paper, never neon ---------- */
  --shadow-sm:  0 1px 0 rgba(15,31,61,.04), 0 1px 2px rgba(15,31,61,.06);
  --shadow-md:  0 1px 0 rgba(15,31,61,.04), 0 4px 14px rgba(15,31,61,.07);
  --shadow-lg:  0 1px 0 rgba(15,31,61,.04), 0 16px 40px rgba(15,31,61,.10);
  --shadow-inset: inset 0 0 0 1px var(--line-2);

  /* ---------- SPACING ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- LAYOUT ---------- */
  --maxw-prose:    720px;   /* long-form copy + section header reading column */
  --maxw-narrow:   920px;   /* tight editorial moments (CTA copy block) */
  --maxw-content: 1200px;   /* page frame — used by every .inner site-wide */
  --maxw-wide:    1240px;   /* full-bleed marketing + app shell (reserved) */

  /* ---------- MOTION ---------- */
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       320ms;
  --dur-emphasis:   700ms;
  --ease-standard:  cubic-bezier(.4, 0, .2, 1);
  --ease-emphasis:  cubic-bezier(.16, 1, .3, 1);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Fraunces', 'Tiempos', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE — body sizes ---------- */
  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  44px;
  --t-4xl:  60px;
  --t-5xl:  84px;

  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;
}

/* =============================================================
   Semantic typography — apply to bare elements when this CSS is
   loaded. Components can override.
   ============================================================= */
html, body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial display headings */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-3xl);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-2xl);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
h5, .h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-md);
  line-height: 1.3;
  color: var(--fg-1);
}

/* Paragraph */
p, .p {
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

/* Lede / intro paragraph — editorial */
.lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-xl);
  line-height: 1.4;
  color: var(--fg-2);
  letter-spacing: -0.005em;
}

/* Eyebrow / kicker — uppercase tracking */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
}

/* Caption / meta */
.caption {
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--fg-4);
  letter-spacing: 0.01em;
}

/* Mono — for data, code, decision-trace numbers */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

/* Pull-quote */
.pull-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-3xl);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

/* Link */
a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--fg-link) 30%, transparent);
  transition: border-color .15s ease;
}
a:hover { border-bottom-color: var(--fg-link); }

/* Selection */
::selection { background: var(--fabyr-blush); color: var(--fabyr-ink); }


/* === Fabyr website styles === */
/* =============================================================
   Animis website — page styles
   Tokens come from ../colors_and_type.css (the design system).
   This file only defines the page-level rhythm, helpers, and
   the accent-swap semantic variable used for the green/blue
   comparison.
   ============================================================= */


:root {
  /* Primary accent semantic — defaults to jade (Danny's "green").
     index.html flips this to --fabyr-blue when ?accent=blue is set. */
  --accent:      var(--fabyr-jade);
  --accent-deep: var(--fabyr-jade-deep);
  --accent-soft: var(--fabyr-jade-soft);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-page);
  font-family: var(--font-body);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; border-bottom: none; }

/* ============ Section vertical rhythm ============ */
.section {
  position: relative;
  padding: 120px 32px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .section { padding: 80px 20px; }
}
.section--ink   { background: var(--fabyr-ink); color: var(--paper-0); }
.section--cream { background: var(--paper-1); }
.section--white { background: var(--bg-surface); }
.section--tight { padding-top: 96px; padding-bottom: 96px; }
/* Page frame — consistent site-wide. Within it, content composes via
   .header (narrow reading column) and full-width grids/dividers. */
.inner          { max-width: var(--maxw-content); margin: 0 auto; position: relative; }
.inner--narrow  { max-width: var(--maxw-narrow); }
.inner--prose   { max-width: var(--maxw-prose); }

/* Section header reading column — eyebrow + h2 + intro paragraph. Used
   inside .inner so the header sits in a narrow column while the body
   below fills the full frame. Consistent left edge across all sections. */
.header { max-width: var(--maxw-prose); }

/* ============ Reveal-on-scroll ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-emphasis) var(--ease-emphasis),
              transform var(--dur-emphasis) var(--ease-emphasis);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ============ Type scale (page-specific) ============ */
/* Calm-editorial posture: light weights, italic-300 for emphasis, mono eyebrows. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.section--ink .eyebrow { color: var(--accent); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
/* Display + h-section em: jade-bold for the colored emphasis (.green).
   .locked overrides separately below to preserve its underline treatment. */
.display em { font-weight: 700; font-style: normal; }

.h-section {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg-1);
}
.h-section em { font-weight: 700; font-style: normal; }

.section--ink .h-section,
.section--ink h2,
.section--ink h3,
.section--ink .h-block,
.section--ink h4 { color: var(--paper-0); }

.h-block {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--fg-1);
}
.body-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
  color: var(--fg-2);
}
.section--ink .body-lg { color: rgba(255,255,255,0.82); }
.body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
}
.section--ink .body { color: rgba(255,255,255,0.78); }

/* Highlighted phrase — upright with editorial underline tint. The lighter
   weight keeps it distinct from the surrounding heading text. nowrap so
   the phrase stays on one line — pushes to a new line if it can't fit
   without splitting mid-phrase. */
em.locked, .locked {
  font-style: normal;
  font-weight: 300;
  color: inherit;
  background-image: linear-gradient(transparent 62%, var(--accent-soft) 62%);
  padding: 0 0.08em;
  white-space: nowrap;
}
.section--ink em.locked, .section--ink .locked {
  color: var(--accent);
  background-image: none;
}

/* Colored accent emphasis — upright + bold + jade. Same nowrap rule. */
em.green { font-style: normal; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* ============ Buttons ============ */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base);
  cursor: pointer;
  white-space: nowrap;
}
.btn--primary { background: var(--accent); color: var(--fabyr-ink); }
.btn--primary:hover { background: var(--accent-deep); color: var(--paper-0); }
.btn--ink { background: var(--fabyr-ink); color: var(--paper-0); }
.btn--ink:hover { background: var(--fabyr-ink-soft); }
.btn--ghost-light {
  background: transparent;
  color: var(--paper-0);
  border-color: rgba(255,255,255,0.28);
}
.btn--ghost-light:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.42);
}
.btn--ghost-dark {
  background: transparent;
  color: var(--fabyr-ink);
  border-color: rgba(15,31,61,0.18);
}
.btn--ghost-dark:hover {
  background: rgba(15,31,61,0.04);
  border-color: rgba(15,31,61,0.32);
}
.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--lg { padding: 12px 24px; font-size: 15px; }

/* Underlined link with arrow */
.txtlink {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--dur-base);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.txtlink:hover { gap: 10px; }

/* ============ Eyebrow chip / tag ============ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  background: rgba(15,31,61,0.06);
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
.section--ink .tag {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.08);
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ============ Footer ============ */
.foot {
  background: var(--fabyr-ink);
  color: rgba(255,255,255,0.7);
  padding: 80px 32px 36px;
  font-family: var(--font-display);
}
.foot a { color: rgba(255,255,255,0.85); }
.foot a:hover { color: var(--paper-0); }

/* ============ Utility ============ */
.divider { height: 1px; background: var(--line-2); margin: 0; border: 0; }
.section--ink .divider { background: rgba(255,255,255,0.1); }
.no-wrap { white-space: nowrap; }

/* ============================================================================
   Responsive layer — bl-126 AC-4 (mobile)
   ----------------------------------------------------------------------------
   The page components style their layout INLINE (style={{ gridTemplateColumns:
   ... }}), and an inline style beats any normal stylesheet rule. So the grid
   collapses below are attribute-selector + !important by necessity, not by
   preference — it is the only way to reach an inline grid from CSS without
   rewriting every component. Decorative motifs are targeted via their
   aria-hidden + background-image signature, so only ornament is dropped.

   Verified at 375x667, 390x844 and 768x1024 across all five pages: zero
   horizontal overflow.
   ========================================================================== */

@media (max-width: 860px) {
  /* 1. Collapse every inline grid to a single column. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* 2. Drop decorative ornament (absolutely-positioned, aria-hidden, image
        backgrounds). These sit outside the content box and are the other
        source of horizontal scroll. */
  [aria-hidden="true"][style*="background-image"] {
    display: none !important;
  }

  /* 3. Heading emphasis (.locked, em.green) is nowrap BY DESIGN so a phrase never
        splits mid-thought. On a phone no line is long enough, so the phrase
        overflows — and because .section is overflow:hidden (it clips the
        decorative motifs), the text is silently CUT rather than pushing the page
        wide. That is why a page-level horizontal-overflow check reads clean while
        the headline is visibly sliced. Let them wrap. */
  em.locked, .locked, em.green {
    white-space: normal;
  }

  /* 4. Type: the clamp minimums (44px display / 34px section) are desktop
        minimums, not phone ones. */
  .display   { font-size: clamp(32px, 8.4vw, 44px); }
  .h-section { font-size: clamp(26px, 6.6vw, 34px); }
  .body-lg   { font-size: 16px; }

  /* 5. Frame. */
  .section { padding: 64px 20px; }
  .inner, .inner--narrow, .inner--prose, .header { max-width: 100%; }

  /* 6. Anything given a hard pixel width inline (sidebars, media columns)
        must not exceed the viewport. */
  img, svg, video { max-width: 100%; height: auto; }
}

@media (max-width: 860px) {
  /* Nav: mark + CTA hold the top row; the link row wraps beneath, full width,
     rather than pushing the CTA off-screen. The bar grows to two rows. */
  .navbar {
    height: auto !important;
    padding: 10px 20px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    row-gap: 10px;
  }
  .navlinks {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 14px !important;
    flex-wrap: wrap;
  }
  .navlinks a { font-size: 13px !important; white-space: nowrap; }
}

@media (max-width: 640px) {
  .btn--lg { width: 100%; text-align: center; }
  .foot { padding-left: 20px; padding-right: 20px; }
}

/* ── Anchor targets must clear the sticky nav ─────────────────────────────────
   The nav is position:sticky. Following an in-page link (notably the "Early
   access" CTA -> #cta) scrolls the target to y=0 — i.e. UNDERNEATH the nav — so
   the top of the section is hidden and the section reads as cut off.

   scroll-margin-top is the offset the browser leaves above a scroll target. It
   must match the nav's height, which is breakpoint-dependent: 64px on desktop
   (one row) but ~98px on mobile, where the nav wraps to two rows (mark + CTA,
   then the link row). Sized to the taller mobile nav plus breathing room.
   ------------------------------------------------------------------------- */
[id] { scroll-margin-top: 84px; }

@media (max-width: 860px) {
  [id] { scroll-margin-top: 114px; }
}

/* Early-access form — two-up field rows that stack on a phone. */
.ea-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .ea-two { grid-template-columns: 1fr; } }