@font-face{font-family:'Sora';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/sora-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sora-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/sora-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sora-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/sora-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/sora-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2')}
/* ========================================================================
   Seventy3 Design System — colors_and_type.css
   The single source of design tokens. Import this in every artifact.
   Tokens are exposed as CSS custom properties on :root.

   Sections
     1.  Fonts (Google Fonts substitutes — flagged in README)
     2.  Color scale (raw)
     3.  Color — semantic
     4.  Type scale (raw + semantic)
     5.  Spacing
     6.  Radius
     7.  Shadow
     8.  Motion
     9.  Reset + base typography
     10. Utility classes (h1..body, .container, .pill, .tape, .ink-bg, etc.)
   ======================================================================== */

/* 1. Fonts ----------------------------------------------------------------
   Subs flagged: Graphik → Instrument Sans, Lab Grotesque → Instrument Sans,
   editorial italic → Instrument Serif, mono → JetBrains Mono.
   ------------------------------------------------------------------------ */


:root {
  /* 2. Color scale ------------------------------------------------------- */

  /* Paper — cool slate-tinted neutrals (lightened) */
  --paper:        #FAFBFC;   /* default page background */
  --paper-2:      #F1F4F7;   /* alternate full-bleed */
  --paper-3:      #E6EBEF;   /* highlight zones */
  --paper-4:      #D2D9DF;   /* edge / divider on paper */

  /* Ink — cool near-black */
  --ink:          #161C24;   /* primary text, dark surfaces */
  --ink-2:        #2F3A45;   /* secondary text */
  --ink-3:        #62707D;   /* tertiary text, captions */
  --ink-4:        #93A0AC;   /* hints, placeholders */
  --rule:         #CBD3DA;   /* 1px borders on paper */
  --rule-on-ink:  #2A333D;   /* 1px borders on dark surfaces */

  /* Brand color: Mint (primary action) — re-tuned around #77D9AD */
  --mint-50:  #E8F8EF;
  --mint-100: #C9F0DA;
  --mint-300: #9CE5C2;
  --mint-500: #77D9AD;     /* primary */
  --mint-600: #2E8B65;     /* hover/contrast — deeper pine */
  --mint-700: #1F6B4D;

  /* Brand color: Cobalt (primary action) — brightened */
  --plum-50:  #E6EFFF;
  --plum-100: #BFD2FF;
  --plum-300: #6F95FF;
  --plum-500: #2D6BFF;     /* primary — bright cobalt */
  --plum-600: #1A4FD9;
  --plum-700: #123C9C;

  /* Brand color: Sticky-note Yellow (warm accent / occasional CTA) */
  --terra-50:  #FFFBE0;
  --terra-100: #FFF3A8;
  --terra-300: #FFE96A;
  --terra-500: #FFE03B;
  --terra-600: #D9BD1F;
  --terra-700: #A8920E;

  /* Brand color: Honey (highlight tape, marker) */
  --honey-50:  #FDF4DD;
  --honey-100: #FAE8B5;
  --honey-300: #F5D58C;
  --honey-500: #F2C26B;
  --honey-600: #D2A044;

  /* Brand color: Mist (info, soft tint) */
  --mist-50:   #ECF2F5;
  --mist-100:  #D5E2E8;
  --mist-300:  #BBD2DB;
  --mist-500:  #A9C9D6;
  --mist-700:  #65899A;

  /* Backwards-compat aliases (so older code still resolves) */
  --moss-50: var(--mint-50); --moss-100: var(--mint-100); --moss-300: var(--mint-300);
  --moss-500: var(--mint-500); --moss-600: var(--mint-600); --moss-700: var(--mint-700);
  --dusk-50: var(--plum-50); --dusk-100: var(--plum-100); --dusk-300: var(--plum-300);
  --dusk-500: var(--plum-500); --dusk-600: var(--plum-600); --dusk-700: var(--plum-700);
  --clay-50: var(--terra-50); --clay-100: var(--terra-100); --clay-300: var(--terra-300);
  --clay-500: var(--terra-500); --clay-600: var(--terra-600); --clay-700: var(--terra-700);
  --wheat-50: var(--honey-50); --wheat-100: var(--honey-100); --wheat-300: var(--honey-300);
  --wheat-500: var(--honey-500); --wheat-600: var(--honey-600);
  --sky-50: var(--mist-50); --sky-100: var(--mist-100); --sky-300: var(--mist-300);
  --sky-500: var(--mist-500); --sky-700: var(--mist-700);

  /* Pure */
  --white: #FFFFFF;
  --black: #000000;

  /* 3. Color — semantic -------------------------------------------------- */
  --bg:                 var(--paper);
  --bg-alt:             var(--paper-2);
  --bg-warm:            var(--paper-3);
  --bg-ink:             var(--ink);

  --fg:                 var(--ink);
  --fg-2:               var(--ink-2);
  --fg-3:               var(--ink-3);
  --fg-4:               var(--ink-4);
  --fg-on-ink:          #FAFBFC;
  --fg-on-ink-2:        #93A0AC;
  --fg-on-accent:       var(--white);

  --accent:             #2D6BFF;
  --accent-hover:       #1F55D6;
  --accent-press:       #163FA3;
  --accent-soft:        var(--plum-50);
  --on-accent:          var(--white);   /* cobalt is dark — white text on it */

  --secondary:          var(--mint-500);
  --secondary-hover:    var(--mint-600);
  --secondary-soft:     var(--mint-50);

  --warm:               var(--terra-500);
  --warm-hover:         var(--terra-600);
  --warm-soft:          var(--terra-50);

  --highlight:          var(--honey-500);
  --highlight-soft:     var(--honey-100);

  --info:               var(--mist-500);
  --info-soft:          var(--mist-50);

  --link:               var(--accent);   /* primary blue — links follow accent */
  --link-hover:         var(--accent-hover);

  --surface:            var(--white);
  --surface-warm:       var(--paper-3);
  --surface-ink:        var(--ink);

  --gradient-tape:      linear-gradient(180deg, var(--honey-500) 0%, var(--terra-500) 100%);

  /* 4. Type -------------------------------------------------------------- */
  --font-display:  "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:     "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:    "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Raw size scale — semantic mappings below */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-md:    16px;   /* default body */
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-6xl:   84px;
  --text-7xl:   112px;

  /* Semantic type roles */
  --h1-size:    var(--text-7xl);
  --h1-leading: 1.02;
  --h1-track:   -0.03em;
  --h1-weight:  800;

  --h2-size:    var(--text-5xl);
  --h2-leading: 1.05;
  --h2-track:   -0.025em;
  --h2-weight:  700;
  --h3-weight-display: 700;

  --h3-size:    var(--text-3xl);
  --h3-leading: 1.15;
  --h3-track:   -0.02em;
  --h3-weight:  700;

  --h4-size:    var(--text-xl);
  --h4-leading: 1.3;
  --h4-track:   -0.01em;
  --h4-weight:  600;

  --kicker-size:    var(--text-sm);
  --kicker-track:   0.06em;
  --kicker-weight:  600;

  --lede-size:    var(--text-2xl);
  --lede-leading: 1.35;
  --lede-track:   -0.015em;
  --lede-weight:  400;

  --body-size:    var(--text-lg);
  --body-leading: 1.55;
  --body-weight:  400;
  --display-weight-1: 800;
  --display-weight-2: 700;
  --display-weight-3: 400;

  --small-size:   var(--text-sm);
  --small-leading: 1.5;

  --code-size:    0.92em;

  /* 5. Spacing ----------------------------------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  144px;
  --s-11:  240px;

  --gutter:        80px;
  --container-max: 1280px;
  --section-pad:   var(--s-11);
  --section-pad-sm: var(--s-9);

  /* 6. Radius ------------------------------------------------------------ */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* 7. Shadow ------------------------------------------------------------ */
  --shadow-card:
    0 1px 0 rgba(28,37,40,.05),
    0 0 0 1px rgba(28,37,40,.05),
    0 2px 12px -8px rgba(28,37,40,.2),
    0 12px 24px -20px rgba(28,37,40,.3);

  --shadow-pop:
    0 1px 0 rgba(28,37,40,.06),
    0 0 0 1px rgba(28,37,40,.06),
    0 8px 24px -10px rgba(28,37,40,.22),
    0 24px 48px -24px rgba(28,37,40,.32);

  --shadow-button:
    0 1px 0 rgba(28,37,40,.12),
    0 1px 2px rgba(28,37,40,.08);

  --shadow-toggle-track:
    inset 0 4px 8px -4px rgba(28,37,40,.08),
    inset 0 0 0 1px rgba(28,37,40,.04);

  /* 8. Motion ------------------------------------------------------------ */
  --ease:        cubic-bezier(.2, .8, .2, 1);
  --dur-micro:   120ms;
  --dur:         200ms;
  --dur-page:    360ms;

  /* misc */
  --icon-stroke: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
}

/* 9. Reset + base typography ---------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  font-weight: var(--body-weight);
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

a { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

::selection { background: var(--honey-300); color: var(--ink); }

img, svg { display: block; max-width: 100%; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

code, pre, kbd { font-family: var(--font-mono); font-size: var(--code-size); }

/* 10. Utility classes ----------------------------------------------------- */

.h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-track);
  font-weight: var(--h1-weight);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-track);
  font-weight: var(--h2-weight);
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  line-height: var(--h3-leading);
  letter-spacing: var(--h3-track);
  font-weight: var(--h3-weight);
}
.h4 {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  line-height: var(--h4-leading);
  letter-spacing: var(--h4-track);
  font-weight: var(--h4-weight);
}
.kicker {
  font-family: var(--font-body);
  font-size: var(--kicker-size);
  letter-spacing: var(--kicker-track);
  font-weight: var(--kicker-weight);
  text-transform: uppercase;
  color: var(--fg-3);
}
.lede {
  font-family: var(--font-body);
  font-size: var(--lede-size);
  line-height: var(--lede-leading);
  letter-spacing: var(--lede-track);
  font-weight: var(--lede-weight);
  color: var(--fg-2);
  text-wrap: pretty;
}
.body { font-size: var(--body-size); line-height: var(--body-leading); }
.small { font-size: var(--small-size); line-height: var(--small-leading); color: var(--fg-3); }
.serif { font-family: var(--font-serif); font-style: normal; }
.mono { font-family: var(--font-mono); }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Pill CTAs */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  background: var(--accent);
  color: var(--fg-on-accent);
  box-shadow: var(--shadow-button);
  transition: background var(--dur) var(--ease), transform var(--dur-micro) var(--ease);
  cursor: pointer;
  text-decoration: none;
}
.btn { color: var(--on-accent); }
.btn:hover { background: var(--accent-hover); color: var(--fg-on-accent); text-decoration: none; }
.btn:active { transform: scale(.98); background: var(--accent-press); color: var(--fg-on-accent); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-button); }
.btn--lg { padding: 18px 36px; font-size: var(--text-lg); }
.btn--xl { padding: 22px 44px; font-size: var(--text-xl); }
.btn--ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--clay { background: var(--warm); }
.btn--clay:hover { background: var(--warm-hover); }
.btn--dusk { background: var(--secondary); }
.btn--dusk:hover { background: var(--secondary-hover); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #000; }

/* Tape — the marker-tape pill (think Basecamp's tagline ribbon) */
.tape {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  background: var(--gradient-tape);
  color: var(--white);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  transform: rotate(-2deg);
  box-shadow: 0 2px 0 rgba(28,37,40,.08);
}

/* Card */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s-6);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }

/* Section tints */
.section { padding-block: var(--section-pad); }
.section--sm { padding-block: var(--section-pad-sm); }
.section--paper-2 { background: var(--bg-alt); }
.section--warm { background: var(--surface-warm); }
.section--ink { background: var(--bg-ink); color: var(--fg-on-ink); }
.section--ink .small, .section--ink .kicker { color: var(--fg-on-ink-2); }
.section--ink a { color: var(--mint-300); }

/* Highlight (text marker — wheat behind a phrase) */
.mark {
  background: linear-gradient(180deg, transparent 55%, var(--honey-300) 55%);
  padding-inline: 2px;
}

/* Rule */
.hr { height: 1px; background: var(--rule); border: 0; }

/* DS card frame — for preview/ files */
.ds-card {
  background: var(--paper);
  padding: 24px;
  width: 700px;
  box-sizing: border-box;
  font-family: var(--font-body);
  color: var(--fg);
}

/* Responsive container gutter — tight on mobile, generous on desktop. */
@media (max-width: 1100px) {
  .container { padding-inline: 48px; }
}
@media (max-width: 720px) {
  .container { padding-inline: 20px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Orphan & widow control (added 2026-06)
   Balance headings across lines and prevent a single word stranded on the
   last line of body copy. Keeps the "no orphan words" rule global without
   hand-editing copy. Supported in current Chrome/Safari/Firefox; older
   browsers simply fall back to normal wrapping.
   ───────────────────────────────────────────────────────────────────────── */
/* Global default: pretty wrapping inherits to every text element (spans,
   divs, card titles, descriptions) so a single word never lands alone on the
   last line. */
body {
  text-wrap: pretty;
}
/* Headings and short titles get balanced multi-line splits. */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.kicker, .tape,
.who-tab h3,
.who-prod-card span,
.icp-card h3,
.card h3, .card h4 {
  text-wrap: balance;
}

/* Hero rotating audience word: drawn from data-w so the H1 text stays clean for crawlers */
.hero-w::after { content: attr(data-w); }