/* ---- fonts ---- */
/* @font-face declarations live in fonts.css (the one home; 13 variable-range
   declarations, linked before this file on every page). This file starts at tokens. */

/* ---- tokens.css ---- */
/* =============================================================================
   The Deliberate Company Design System - Colors & Type
   -----------------------------------------------------------------------------
   Canonical tokens derived from the The Deliberate Company Brand Guide (v1 official).
   Source of truth: "The Deliberate Company - Mission, Vision, Values, & Brand Guide"
   Visual direction: industrial warmth - blueprint blue, copper, draft paper.

   PALETTE (see brand guide Sec. Visual Identity -> Color Palette):
     Blueprint Blue  #0B3D6B  - primary. Headers, CTAs, logo lockups.
     Assembly Black  #1C1C1E  - text, primary navigation.
     Copper Accent   #B06A2B  - sparingly: pull quotes, active states, brand moments.
     Steel Gray      #6B7280  - secondary text, metadata, borders.
     Draft Paper     #F0EDE6  - section backgrounds, warm card surfaces.
     Line White      #FAF8F5  - primary page background. Not cold.

   TYPE (founder ruling 2026-09-23, the sans ruling):
     Inter          - everything people read: headings, body, UI, long-form
     JetBrains Mono - technical: numerals, codes, IDs, contract field names
     (the serif retired; emphasis is copper weight-600, not italic)

   Semantic var names preserved (--bg-primary, --base-text, ...) so existing
   components keep working. Dark theme included (inverts surfaces; Blueprint
   holds as primary).
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. Brand primitives - THE six colors from the guide
   --------------------------------------------------------------------------- */
:root {
  /* -- Official palette -- */
  --blueprint-blue:   #0B3D6B;   /* RGB 11*61*107 */
  --assembly-black:   #1C1C1E;   /* RGB 28*28*30 */
  --copper-accent:    #B06A2B;   /* RGB 176*106*43 */
  --steel-gray:       #6B7280;   /* RGB 107*114*128 */
  --draft-paper:      #F0EDE6;   /* RGB 240*237*230 */
  --line-white:       #FAF8F5;   /* RGB 250*248*245 */

  /* -- Extended ramp derived from the six above (for UI states) --
     Naming: <family>-<N> where 50 is lightest, 900 darkest.
     These are OkLCH-harmonized tints/shades of the primitives - not Tailwind. */

  /* Blueprint (primary) */
  --blueprint-50:   #EBF1F7;
  --blueprint-100:  #D3E0EC;
  --blueprint-200:  #A6C1D9;
  --blueprint-300:  #6C97BA;
  --blueprint-500:  #1A5A93;
  --blueprint-700:  #0B3D6B;   /* = Blueprint Blue */
  --blueprint-800:  #082E51;
  --blueprint-900:  #051F37;

  /* Copper (accent) */
  --copper-50:      #FAF1E8;
  --copper-100:     #F2DCC2;
  --copper-200:     #E5B889;
  --copper-500:     #C8823E;
  --copper-600:     #B06A2B;   /* = Copper Accent */
  --copper-700:     #8B5320;
  --copper-800:     #683D17;

  /* Ink / Steel (neutrals - warm-cast grays sit next to Draft Paper) */
  --ink-50:         #F5F4F1;   /* slight warmth vs Line White */
  --ink-100:        #E9E7E2;
  --ink-200:        #D4D1CA;   /* borders */
  --ink-300:        #B5B1A8;
  --ink-400:        #8F8B82;
  --ink-500:        #6B7280;   /* = Steel Gray */
  --ink-600:        #4E5560;
  --ink-700:        #353A43;
  --ink-800:        #23262C;
  --ink-900:        #1C1C1E;   /* = Assembly Black */

  /* Status (industrial-warm, not stock Tailwind - sit cleanly next to Copper) */
  --ok-50:          #ECF5EE;
  --ok-500:         #4E8A5C;   /* success */
  --ok-700:         #345F3F;

  --caution-50:     #FBF3E0;
  --caution-500:    #C78A1E;   /* warning (warmer than yellow-500) */
  --caution-700:    #8E5F10;

  --alert-50:       #FCECE7;
  --alert-500:      #B73A2A;   /* danger - brick, not fire */
  --alert-700:      #8A2618;

  --info-50:        #EBF1F7;
  --info-500:       #1A5A93;   /* info = Blueprint-500 */
  --info-700:       #0B3D6B;

  /* -- In-app canonicals (extracted from the live product 2026-04-17) --
     Tokens used inside the logged-in product surface for diagnosis cards,
     stage dots, health badges, and the Plane palette. Kept named so they
     can be referenced from prose ("primary-gap crimson", "plane purple"). */

  /* Crimson - primary-gap accent (Diagnosis Card "primary gap" rows).
     Distinct from --alert-500 brick: deeper, more wine, signals "this is
     where the business is bleeding" rather than "danger, stop." */
  --crimson-50:     #F8ECEC;
  --crimson-500:    #8C2A2A;   /* canonical primary-gap dot/text */
  --crimson-700:    #5E1C1C;

  /* Plane palette - the four planes of business operation per the brand
     guide. Work=Blueprint, Execution=Purple (NEW), Experience=Green, Fit=Copper. */
  --plane-work:        var(--blueprint-700);
  --plane-execution:   #6D28D9;   /* purple - only place purple appears in the system */
  --plane-experience:  #047857;   /* deeper than --ok-500 to read as "experience" */
  --plane-fit:         var(--copper-600);

  /* Health badge palette - 5 canonical states for step contracts on Ops Map.
     Bg is the named color at ~12%, text/dot is the named color at full. */
  --health-strong:    var(--ok-700);          /* contract is robust */
  --health-solid:     var(--blueprint-700);   /* contract is in place */
  --health-gap:       var(--copper-600);      /* contract has known gap */
  --health-weak:      var(--crimson-500);     /* contract is failing */
  --health-missing:   var(--steel-gray);      /* no contract drafted */

  /* Agent voice - the color used for the "Deliberate — <capability>" pill dot
     and any agent-attributed UI. Aliased to Blueprint per canonical tokens. */
  --agent-voice:    var(--blueprint-700);

  /* -- Fonts - two families, never more (founder ruling 2026-09-23).
        These two stacks are THE canonical spellings for every surface
        (marketing, app, admin, errors, emails minus the webfont). -- */
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
                "Liberation Mono", monospace;
}


/* ---------------------------------------------------------------------------
   2. LIGHT theme (default) - semantic token layer
   Existing var names (--bg-primary, --base-text, ...) preserved so components
   written against the Jumpstart-era tokens keep working. Values remapped to
   the The Deliberate Company palette.
   --------------------------------------------------------------------------- */
:root,
.light {
  /* -- Primary (Blueprint Blue) -- */
  --bg-primary:             var(--blueprint-700);
  --bg-primary-hover:       var(--blueprint-800);
  --text-on-primary:        var(--line-white);
  --border-primary:         var(--blueprint-700);
  --border-primary-hover:   var(--blueprint-800);
  --text-primary:           var(--blueprint-700);
  --text-primary-hover:     var(--blueprint-800);
  --logo-primary:           var(--assembly-black);

  /* -- Secondary (paper on paper - warm ghost) -- */
  --bg-secondary:             var(--line-white);
  --text-on-secondary:        var(--assembly-black);
  --bg-secondary-hover:       var(--ink-50);
  --text-on-secondary-hover:  var(--assembly-black);
  --border-secondary:         var(--ink-200);

  /* -- Accent (Copper - sparingly!) -- */
  --bg-accent:                var(--copper-600);
  --bg-accent-hover:          var(--copper-700);
  --text-on-accent:           var(--line-white);
  --border-accent:            var(--copper-600);
  --text-accent:              var(--copper-600);

  /* -- Danger / Success / Warning / Info (industrial-warm status) -- */
  --bg-danger:                 var(--alert-500);
  --bg-danger-hover:           var(--alert-700);
  --text-on-danger:            var(--line-white);
  --border-danger:             var(--alert-500);
  --text-danger:               var(--alert-700);
  --bg-danger-secondary:       var(--alert-50);
  --text-on-danger-secondary:  var(--alert-700);
  --icon-on-danger-secondary:  var(--alert-500);

  --bg-success:                var(--ok-500);
  --bg-success-hover:          var(--ok-700);
  --text-on-success:           var(--line-white);
  --border-success:            var(--ok-500);
  --text-success:              var(--ok-700);
  --bg-success-secondary:      var(--ok-50);
  --text-on-success-secondary: var(--ok-700);
  --icon-on-success-secondary: var(--ok-500);

  --bg-warning-secondary:       var(--caution-50);
  --text-on-warning-secondary:  var(--caution-700);
  --icon-on-warning-secondary:  var(--caution-500);
  --text-warning:               var(--caution-700);

  --bg-info-secondary:          var(--info-50);
  --text-on-info-secondary:     var(--info-700);
  --icon-on-info-secondary:     var(--info-500);

  /* -- Light / Dark surfaces (ink-on-paper) -- */
  --bg-light:           var(--line-white);
  --bg-light-hover:     var(--draft-paper);
  --text-on-light:      var(--assembly-black);
  --border-light:       var(--ink-200);

  --bg-dark:            var(--assembly-black);
  --bg-dark-secondary:  var(--ink-700);
  --bg-dark-hover:      var(--ink-800);
  --text-on-dark:       var(--line-white);
  --border-dark:        var(--ink-700);

  /* -- Disabled -- */
  --bg-disabled:          var(--ink-100);
  --bg-disabled-selected: var(--ink-300);
  --border-disabled:      var(--ink-200);
  --icon-disabled:        var(--ink-300);

  /* -- Base tokens (the workhorse set) -- */
  --base-text:              var(--assembly-black);
  --base-text-secondary:    var(--ink-700);
  --base-text-tertiary:     var(--steel-gray);
  --base-text-disabled:     var(--ink-300);
  --base-icon:              var(--steel-gray);
  --base-bg-backdrop:       rgba(28, 28, 30, 0.5);
  --base-bg-highest:        var(--ink-200);
  --base-bg-high:           var(--draft-paper);
  --base-bg-base:           var(--line-white);     /* page bg */
  --base-bg-low:            #FFFFFF;                /* cards on page */
  --base-bg-lowest:         var(--line-white);
  --base-bg-warm:           var(--draft-paper);    /* "paper" surface */
  --base-border-primary:    var(--ink-300);
  --base-border-secondary:  var(--ink-200);
  --base-border-tertiary:   var(--ink-200);
  --base-border-focus:      var(--blueprint-500);
  --base-bg-selected:       var(--blueprint-50);
  --base-bg-hover:          var(--ink-50);
  --base-bg-tooltip:        var(--assembly-black);
  --base-text-on-tooltip:   var(--line-white);

  /* -- Typography scale -- */
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  30px;
  --font-size-4xl:  36px;
  --font-size-5xl:  48px;
  --font-size-6xl:  60px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;   /* Inter 800 for display headlines */

  --line-height-tight:  1.08;    /* display */
  --line-height-snug:   1.25;    /* headings */
  --line-height-normal: 1.55;    /* body copy (guide Sec. Typography) */

  --letter-spacing-display: -0.022em;
  --letter-spacing-tight:   -0.012em;
  --letter-spacing-wide:     0.14em;   /* eyebrow / metadata */

  /* -- Spacing scale (4px base) -- */
  --space-0:  0px;
  --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;

  /* -- Radius - industrial/blueprint aesthetic = LESS rounded -- */
  --radius-xs:   2px;   /* buttons, banners (sharp drafting-table feel) */
  --radius-sm:   3px;   /* inputs, cards */
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-full: 9999px;

  /* -- Shadows - softer, warmer (ink on paper, not glass) -- */
  --shadow-xs:   0 1px 0 rgba(28, 28, 30, 0.04);
  --shadow-sm:   0 1px 2px rgba(28, 28, 30, 0.06), 0 1px 3px rgba(28, 28, 30, 0.04);
  --shadow-md:   0 4px 10px -2px rgba(28, 28, 30, 0.08), 0 2px 4px rgba(28, 28, 30, 0.04);
  --shadow-menu: 0 8px 24px rgba(28, 28, 30, 0.10);
}


/* ---------------------------------------------------------------------------
   3. DARK theme - inverted surfaces; Blueprint holds as primary
   --------------------------------------------------------------------------- */
:root.dark,
.dark {
  color-scheme: dark;

  --bg-primary:           var(--blueprint-500);
  --bg-primary-hover:     var(--blueprint-300);
  --text-on-primary:      var(--line-white);
  --border-primary:       var(--blueprint-500);
  --border-primary-hover: var(--blueprint-300);
  --text-primary:         var(--blueprint-200);
  --text-primary-hover:   var(--blueprint-100);
  --logo-primary:         var(--line-white);

  --bg-secondary:             var(--ink-800);
  --text-on-secondary:        var(--line-white);
  --bg-secondary-hover:       var(--ink-700);
  --text-on-secondary-hover:  var(--line-white);
  --border-secondary:         var(--ink-700);

  --bg-accent:                var(--copper-500);
  --bg-accent-hover:          var(--copper-600);
  --text-on-accent:           var(--line-white);
  --text-accent:              var(--copper-200);

  --bg-danger:                 var(--alert-500);
  --bg-danger-hover:           var(--alert-700);
  --text-danger:               #E8A79A;
  --bg-danger-secondary:       #3A1711;
  --text-on-danger-secondary:  #F2C7BE;
  --icon-on-danger-secondary:  #E8A79A;

  --bg-success:                var(--ok-500);
  --bg-success-hover:          var(--ok-700);
  --text-success:              #AFD0B7;
  --bg-success-secondary:      #14291A;
  --text-on-success-secondary: #C9DFCF;
  --icon-on-success-secondary: #AFD0B7;

  --bg-warning-secondary:       #2E1F07;
  --text-on-warning-secondary:  #EDD9A8;
  --icon-on-warning-secondary:  #D9AE56;

  --bg-info-secondary:          #0A1D30;
  --text-on-info-secondary:     var(--blueprint-100);
  --icon-on-info-secondary:     var(--blueprint-300);

  --bg-light:           var(--ink-200);
  --bg-light-hover:     var(--ink-300);
  --text-on-light:      var(--assembly-black);

  --bg-dark:            var(--ink-900);
  --bg-dark-hover:      var(--ink-800);

  --base-text:              var(--line-white);
  --base-text-secondary:    var(--ink-100);
  --base-text-tertiary:     var(--ink-300);
  --base-text-disabled:     var(--ink-600);
  --base-icon:              var(--ink-300);
  --base-bg-backdrop:       rgba(0, 0, 0, 0.6);
  --base-bg-highest:        var(--ink-600);
  --base-bg-high:           var(--ink-700);
  --base-bg-base:           var(--ink-900);        /* page bg */
  --base-bg-low:            var(--ink-800);        /* cards */
  --base-bg-lowest:         var(--ink-900);
  --base-bg-warm:           #2A2522;               /* warm dark "paper" */
  --base-border-primary:    var(--ink-500);
  --base-border-secondary:  var(--ink-600);
  --base-border-tertiary:   var(--ink-700);
  --base-border-focus:      var(--blueprint-300);
  --base-bg-selected:       #0A1D30;
  --base-bg-hover:          var(--ink-700);
  --base-bg-tooltip:        var(--ink-200);
  --base-text-on-tooltip:   var(--assembly-black);

  background-color: var(--base-bg-base);
}


/* ---------------------------------------------------------------------------
   4. Semantic typography - the sans ruling (founder, 2026-09-23)
   Everything: Inter. Technical accents: JetBrains Mono.
   --------------------------------------------------------------------------- */
html {
  font-family: var(--font-sans);
  color: var(--base-text);
  background: var(--base-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

/* UI chrome (nav, buttons, labels, form fields) stays on Inter */
button, input, select, textarea,
nav, .ui, .label, .eyebrow, .metadata,
th, .badge, .pill {
  font-family: var(--font-sans);
}

/* Headlines: Inter, industrial weight */
.font-display,
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-tight);
  color: var(--base-text);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-snug);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

h6, .h6 {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

/* Body - Inter, generous line-height */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

em, i, .editorial {
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  color: var(--copper-600);   /* emphasis = copper weight, not italic (no italic faces loaded) */
}

small, .small { font-size: var(--font-size-sm); line-height: 1.45; }
.tiny         { font-size: var(--font-size-xs); line-height: 1.35; }

/* Eyebrow - small caps Inter, copper (per brand guide practice) */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--copper-600);
}

/* Metadata - Inter medium, tracked */
.metadata {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  color: var(--base-text-tertiary);
  text-transform: uppercase;
}

/* Pull quote - copper semibold with copper left rule */
.pullquote {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  color: var(--copper-600);
  border-left: 2px solid var(--copper-600);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
}

.link {
  color: var(--blueprint-700);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link:hover, .link:focus {
  color: var(--copper-600);
}

/* Technical (contract fields, step IDs, hex codes) - JetBrains Mono */
code, .code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--base-bg-high);
  color: var(--base-text);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}
pre code {
  display: block;
  padding: var(--space-3) var(--space-4);
  background: var(--base-bg-warm);
  border: 1px solid var(--base-border-tertiary);
  border-radius: var(--radius-sm);
}

/* ---- site.css ---- */
/* GetDeliberate.ai — shared site styles. Load AFTER tokens.css. */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--base-bg-base); font-family: var(--font-sans); color: var(--base-text); min-width: 320px; }
a { color: var(--blueprint-700); text-decoration: none; }
a:hover { color: var(--copper-600); }

/* Buttons & links whose colors change on hover (inline styles can't hover) */
.btn-blue { display: inline-block; background: var(--blueprint-700); color: var(--line-white); font-weight: 600; border: none; border-radius: 6px; box-shadow: var(--shadow-xs); cursor: pointer; }
.btn-blue:hover { background: var(--blueprint-800); color: var(--line-white); }
.btn-white { display: inline-block; background: var(--line-white); color: var(--blueprint-800); font-weight: 600; border-radius: 6px; box-shadow: var(--shadow-sm); }
.btn-white:hover { background: var(--blueprint-50); color: var(--blueprint-800); }
.link-copper { color: var(--copper-200); font-weight: 600; }
.link-copper:hover { color: var(--line-white); }
.nav-link { color: var(--ink-700); }
.nav-link:hover { color: var(--copper-600); }
.nav-link.active { color: var(--assembly-black); box-shadow: inset 0 -2px 0 var(--copper-600); padding-bottom: 2px; }

/* Home-page animation keyframes */
@keyframes om-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes om-checkpop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }


/* ---- build.py additions ---- */
.company-link { color: inherit; }
.company-link:hover { color: var(--copper-600); }

/* Narrow-viewport fallback. The pages are laid out for desktop with inline styles; below 860px
   collapse the multi-column grids to one column, let the nav and footer wrap, and tighten type. */
@media (max-width: 860px) {
  /* Blanket phone fallback for the marketing pages that have no layout of
     their own. The home page is exempt (:not(.home *)): it carries its own
     .home-* rules at 720px below. */
  [style*="grid-template-columns"]:not(.home *) { grid-template-columns: 1fr !important; }
  nav:not(.home *), nav > div:not(.home *), footer > div, footer > div > div { flex-wrap: wrap; }
  nav > div:not(.home *) { gap: 12px 18px; }
  h1:not(.home *) { font-size: 40px !important; }
  h2:not(.home *) { font-size: 28px !important; }
  [style*="padding: 40px 44px"]:not(.home *), [style*="padding: 48px 52px"]:not(.home *),
  [style*="padding: 32px 36px"]:not(.home *), [style*="padding: 32px 40px"]:not(.home *) { padding: 24px !important; }
  [style*="padding: 24px 32px 24px 0"]:not(.home *) { padding: 16px 0 !important; border-right: none !important; }
  [style*="padding: 24px 0 24px 32px"]:not(.home *) { padding: 16px 0 !important; }
}
}


/* ---- founder-letter.css ---- */
/* The founder letter as a sheet on the desk: founder-designed 2026-09-22,
   handoff package. Self-contained .founder-letter__* classes. */
/* Founder letter — Deliberate design tokens (Blueprint / Copper / Draft Paper).
   Type rides the site's canonical --font-sans (the sans ruling, 2026-09-23);
   the handwritten signature image carries the personal register. */
.founder-letter {
  --fl-paper: #FFFFFF;
  --fl-backdrop: #F0EDE6;      /* Draft Paper */
  --fl-ink: #1C1C1E;           /* Assembly Black */
  --fl-steel: #6B7280;         /* Steel Gray */
  --fl-rule: #D4D1CA;          /* ink-200 */
  --fl-blueprint: #0B3D6B;
  --fl-copper: #B06A2B;
  --fl-copper-50: #FAF1E8;
  background: var(--fl-backdrop);
  padding: 64px 24px 80px;
}
.founder-letter__stack { position: relative; max-width: 680px; margin: 0 auto; }
.founder-letter__stack::before {
  content: ""; position: absolute; inset: 0;
  background: var(--fl-paper); border: 1px solid var(--fl-rule); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(28,28,30,.06), 0 1px 3px rgba(28,28,30,.04);
  transform: rotate(1.2deg) translate(6px, 8px);
}
.founder-letter__sheet {
  position: relative; background: var(--fl-paper); border: 1px solid var(--fl-rule); border-radius: 3px;
  box-shadow: 0 8px 24px rgba(28,28,30,.10);
  transform: rotate(-0.6deg); padding: 56px 72px 48px;
  font-family: var(--font-sans); font-size: 19px; line-height: 1.6; color: var(--fl-ink);
}
.founder-letter__sheet p { margin: 0 0 22px; }
.founder-letter__sheet p:last-of-type { margin-bottom: 0; }
.founder-letter__sheet a { color: var(--fl-blueprint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.founder-letter__sheet a:hover { color: var(--fl-copper); }
.founder-letter__sheet mark { background: var(--fl-copper-50); color: var(--fl-ink); box-shadow: 0 0 0 3px var(--fl-copper-50); border-radius: 1px; }
.founder-letter__sign { margin-top: 44px; display: flex; flex-direction: column; gap: 8px; }
.founder-letter__sign img { width: 132px; height: 86px; object-fit: contain; object-position: left bottom; display: block; }
.founder-letter__name { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--fl-ink); }
.founder-letter__meta { font-family: var(--font-sans); font-size: 13px; color: var(--fl-steel); margin-top: 2px; }
.founder-letter__meta a { color: var(--fl-steel); font-weight: 500; }
@media (max-width: 640px) {
  .founder-letter { padding: 40px 16px 56px; }
  .founder-letter__sheet { padding: 36px 28px 32px; font-size: 17px; transform: rotate(-0.4deg); }
}

/* ---- home.css ---- */
/* The home page's own layout system: the Claude Design comp the founder
   approved 2026-09-24 (marketing/handoffs/). Scoped under .home; the blanket
   860px fallback above exempts .home descendants, so this block owns the
   page's phone layout at 720px. Values mirror the comp's desktop/phone pairs. */
.home .home-section { padding: 80px 24px; }
.home .home-section--tight { padding: 64px 24px; }
.home .home-hero { padding: 104px 24px 96px; }
.home .home-stack { display: flex; flex-direction: column; gap: 56px; }
.home .home-sub { padding-top: 56px; border-top: 1px solid var(--ink-200); }
.home .home-h1 { font-size: 60px; }
.home .home-h2 { font-size: 34px; }
.home .home-lead { font-size: 19px; }
.home .home-stat-card { padding: 28px 32px; }
.home .home-stat { font-size: 34px; }
.home .home-bridge { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink-700); }
.home .home-bridge > span { color: var(--copper-600); font-family: var(--font-mono); }
.home .home-stage { grid-template-columns: 1.1fr minmax(120px, 0.5fr) 1.4fr; min-height: 450px; }
.home .home-phone-only { display: none; }
.home .home-chip { display: flex; align-items: center; gap: 6px; background: #FFFFFF; border: 1px solid var(--ink-200); border-radius: 9999px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--ink-700); }
.home .home-chip > span { width: 7px; height: 7px; border-radius: 9999px; flex-shrink: 0; }
.home .home-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.home .home-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home .home-mock-left { order: -1; }
.home .home-safety { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--blueprint-800); border: 1px solid var(--blueprint-800); border-radius: 8px; overflow: hidden; }
.home .home-safety > div { background: var(--blueprint-900); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.home .home-ask { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 8px; font-family: var(--font-sans); }
.home .home-ask-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.home .home-promises { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.home .home-promises > div { display: flex; flex-direction: column; gap: 6px; border-top: 2px solid var(--copper-600); padding-top: 14px; }
.home .home-close { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.home .home-close-btn { align-self: flex-start; }
.home .home-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.home .home-nav-links, .home .home-nav-actions { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.home .home-nav-links { margin-left: auto; }

@media (max-width: 720px) {
  .home .home-section { padding: 56px 20px; }
  .home .home-section--tight { padding: 48px 20px; }
  .home .home-hero { padding: 64px 20px 56px; }
  .home .home-stack { gap: 40px; }
  .home .home-sub { padding-top: 40px; }
  .home .home-h1 { font-size: 38px; }
  .home .home-h2 { font-size: 28px; }
  .home .home-lead { font-size: 17px; }
  .home .home-stat-card { padding: 20px; }
  .home .home-stat { font-size: 26px; }
  /* Stage: stacked, without the noise column or the flying chips (they would
     cross the card); the funnel pulse, tab counters, and row rotation still
     run. The static .home-phone-only noise strip stands in above it. */
  .home .home-stage { grid-template-columns: 1fr; min-height: 0; }
  .home .home-stage > div:first-child, .home .home-stage > div[style*="pointer-events"] { display: none !important; }
  .home .home-phone-only { display: flex; }
  .home .home-grid-2 { grid-template-columns: 1fr; gap: 24px; }
  .home .home-grid-3 { grid-template-columns: 1fr; }
  .home .home-mock-left { order: 1; }
  .home .home-safety { display: flex; flex-direction: column; gap: 0; background: none; border: 0; border-top: 1px solid var(--blueprint-800); border-radius: 0; }
  .home .home-safety > div { padding: 18px 0; gap: 6px; border-bottom: 1px solid var(--blueprint-800); }
  .home .home-ask { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 0; }
  .home .home-ask-cta { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .home .home-ask-cta .btn-white { text-align: center; padding: 14px 26px !important; }
  .home .home-ask-cta p { text-align: center; }
  .home .home-promises { display: flex; flex-direction: column; gap: 0; border-top: 2px solid var(--copper-600); }
  .home .home-promises > div { border-top: 0; padding: 14px 0; gap: 4px; border-bottom: 1px solid var(--ink-200); }
  .home .home-promises > div:last-child { border-bottom: 0; }
  .home .home-close { grid-template-columns: 1fr; gap: 48px; }
  .home .home-close-btn { align-self: stretch; text-align: center; }
  .home .home-nav { gap: 12px 16px; }
  .home .home-nav-links { order: 3; flex-basis: 100%; margin-left: 0; gap: 22px; font-size: 13px; padding: 8px 0 2px; border-top: 1px solid var(--ink-200); }
  .home .home-nav-links .nav-link { padding: 6px 0; }
  .home .home-nav-actions { order: 2; gap: 16px; }
  .home .home-nav-actions .btn-blue { padding: 10px 16px !important; }
  .home .home-nav-login { order: -1; padding: 10px 0; }
}