/* Trailway Growth — Webfonts
   Inter         — wordmark, headlines, body (humanist sans, carries every human word)
   Overpass Mono — readouts, labels, metrics, inscriptions (every number + label)
   Files are the real brand woff2 subsets, self-hosted. Each is a variable file
   serving the full weight range, so one @font-face per unicode subset covers
   200–700 (Inter) / 400–600 (Overpass Mono). */

/* ---------------- Inter ---------------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/1f80f55a-49f0-42c0-9c55-faa1ef0e952a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/eb88f027-3f3a-44f3-af0a-47ad5eb52fe9.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/cb739ae0-004d-4842-a639-c85d2d5ae1ca.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/3b28c65b-c978-4b9a-8d1a-9b8786b8daf5.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/02311f15-d78c-41b0-bbc2-fdb9c872c424.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/6a5f2549-f5d1-4824-88b0-222e0cc85428.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/a9b5dfd3-bf28-4ae8-b68e-7a45aa311fa0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ---------------- Overpass Mono ---------------- */
@font-face {
  font-family: 'Overpass Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/a19ffd84-66ec-49a0-b5b2-85c42749e99a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Overpass Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/502e2f3f-5a10-42b2-a348-b977309ac88d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Overpass Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/43a80c43-13a2-4cc2-a403-27f037ca2280.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Overpass Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/98a3b42e-6363-4dbc-9075-1b135826e12d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Overpass Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/7ca63a1d-d89f-4dd7-a934-844fae4db280.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* Trailway Growth — Color
   "Stone and moss." Four tones. No glow, no gradients, no tech-blue.
   This thing doesn't emit light. It just sits there being more capable than you expected. */

:root {
  /* ---- Base palette ---- */
  --tw-dark:  #3A4C45;  /* Dark Stone — INK + the dark POP. Type on light + hairline borders,
                           and the darker contrast element ON a moss ground when you don't
                           want bone. Never a standalone surface of its own. */
  --tw-moss:  #3D7A6A;  /* Moss — THE surface. Every filled/primary ground + the action color. */
  --tw-sage:  #A2BBB6;  /* Sage — weathered surface, resting field borders, muted type */
  --tw-bone:  #E4EFEA;  /* Bone — light ground, reversed type, air */
  --tw-white: #ffffff;  /* paper white for cards on light grounds */

  /* page ground sits a hair off bone */
  --tw-paper: #f2f5f3;

  /* ---- Alpha derivations of Dark Stone (text + lines on light) ---- */
  --tw-dark-92: rgba(58, 76, 69, .92);
  --tw-dark-82: rgba(58, 76, 69, .82);
  --tw-dark-70: rgba(58, 76, 69, .70);
  --tw-dark-65: rgba(58, 76, 69, .65);
  --tw-dark-55: rgba(58, 76, 69, .55);
  --tw-dark-45: rgba(58, 76, 69, .45);
  --tw-dark-35: rgba(58, 76, 69, .35);
  --tw-line:    rgba(58, 76, 69, .10);  /* hairline borders on light */

  /* ---- Alpha derivations of Bone (text + lines on dark/moss) ---- */
  --tw-bone-82: rgba(228, 239, 234, .82);
  --tw-bone-75: rgba(228, 239, 234, .75);
  --tw-bone-60: rgba(228, 239, 234, .60);
  --tw-bone-16: rgba(228, 239, 234, .16);  /* the straight grid overlay line */

  /* ---- Sage alpha ---- */
  --tw-sage-60: rgba(162, 187, 182, .60);

  /* ---- The House — division accents (swap the second word, never the palette spirit) ----
     Each division also keys a nature-imagery subject matched to its accent:
       brands → forest/canopy · promotion → honeycomb/amber · outbound → ocean/tidal
       sales → red rock/canyon · capital → aurora/dusk */
  --tw-brands:    #3D7058;  /* offer · brand · website · collateral */
  --tw-promotion: #DCB62E;  /* ads · content · landing · SEO · referral */
  --tw-outbound:  #3A6B80;  /* cold email · cold calls · LinkedIn */
  --tw-sales:     #8B5A5A;  /* outsourced closing team */
  --tw-capital:   #6B5A7A;  /* investment arm */
  --tw-os:        #5C6E86;  /* trailwayOS — the product surface */

  /* ---- Semantic aliases ---- */
  --surface-page:     var(--tw-paper);
  --surface-card:     var(--tw-white);
  --surface-primary:  var(--tw-moss);   /* the ground everything sits on — the default fill */
  --surface-deep:     var(--tw-dark);   /* the dark POP against moss (chip/panel/chrome) when
                                           bone isn't wanted. Never a standalone dark ground. */
  --surface-muted:    var(--tw-bone);   /* filled fields, quiet chips */

  --text-strong:   var(--tw-dark);      /* headlines on light */
  --text-body:     var(--tw-dark-70);   /* body copy on light */
  --text-muted:    var(--tw-dark-55);   /* captions, meta */
  --text-faint:    var(--tw-dark-35);   /* placeholders */
  --text-on-dark:  var(--tw-bone);      /* reversed type */
  --text-on-dark-muted: var(--tw-bone-75);

  --accent:        var(--tw-moss);      /* the brand default action color */
  --border-hair:   var(--tw-line);
  --border-field:  var(--tw-sage);      /* resting input border */
  --border-focus:  var(--tw-moss);      /* focused input border */
  --label-mono:    var(--tw-moss);      /* mono micro-labels */
}


/* Trailway Growth — Typography
   "Refined, never decorative." One humanist sans for every human word.
   One mono for every number, label, and metric.
   Note the dotless i in tra(ı)lway: the ıl reads as a rising graph line. */

:root {
  /* ---- Families ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Weights ---- */
  --fw-extralight: 200; /* @kind font */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* ---- Display / heading scale (Inter, tight tracking) ---- */
  --fs-display:  42px;   --lh-display:  1.08 /* @kind other */;  --tr-display:  -0.035em /* @kind other */;
  --fs-h1:       36px;   --lh-h1:       1.10 /* @kind other */;  --tr-h1:       -0.035em /* @kind other */;
  --fs-h2:       24px;   --lh-h2:       1.14 /* @kind other */;  --tr-h2:       -0.03em /* @kind other */;
  --fs-h3:       18px;   --lh-h3:       1.30 /* @kind other */;  --tr-h3:       -0.02em /* @kind other */;

  /* ---- Body scale ---- */
  --fs-lead:     19px;   --lh-lead:     1.58 /* @kind other */;
  --fs-body:     15px;   --lh-body:     1.60 /* @kind other */;
  --fs-small:    13.5px; --lh-small:    1.55 /* @kind other */;

  /* ---- Mono / readout scale ---- */
  --fs-metric:   32px;   --tr-metric:   -0.03em /* @kind other */;  /* big numbers */
  --fs-mono:     13px;   --tr-mono:     -0.01em /* @kind other */;  /* inline readouts */
  --fs-label:    11px;   --tr-label:    0.06em /* @kind other */;   /* uppercase micro-labels */
  --fs-eyebrow:  10.5px; --tr-eyebrow:  0.14em /* @kind other */;   /* section eyebrows */

  /* base body tracking — Inter looks best fractionally tightened */
  --tr-body: -0.011em /* @kind other */;
}


/* Trailway Growth — Spacing & Grid
   Generous whitespace. Section rhythm is large; the elegance comes from restraint.
   The straight grid overlay snaps to 36 / 48 / 72px (dense / default / sparse). */

:root {
  /* ---- Spacing scale (steps of 4) ---- */
  --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;
  --space-25: 100px;  /* section padding (top+bottom) */

  /* ---- The straight grid (overlay line spacing) ---- */
  --grid-dense:   36px;
  --grid-default: 48px;
  --grid-sparse:  72px;

  /* ---- Layout ---- */
  --container-max: 1080px;
  --container-pad: 40px;
}


/* Trailway Growth — Effects
   Corners are barely rounded (2–4px) — engineered, not soft.
   Shadows are rare and low; this thing doesn't glow.
   Two signature devices: the curved slant cut and the straight grid. */

:root {
  /* ---- Corner radii ---- */
  --radius-sm:  2px;   /* chips, small fields, image corners */
  --radius:     3px;   /* the default — buttons, cards, inputs, panels */
  --radius-lg:  4px;   /* raised cards, dialogs */
  --radius-full: 999px;

  /* ---- Borders ---- */
  --border-w-hair:  1px;    /* card hairlines */
  --border-w-field: 1.5px;  /* inputs, outline buttons */
  --accent-bar:     4px;    /* card left-edge accent */

  /* ---- Shadows (sparse, soft, cool stone) ---- */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(58, 76, 69, .06);
  --shadow-raised: 0 4px 30px rgba(58, 76, 69, .12);  /* floating panels, dialogs */
  --ring-focus:  0 0 0 3px rgba(70, 117, 111, .12);   /* focused field halo */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur:      180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */

  /* ---- The straight grid (paint over moss/dark imagery) ---- */
  --grid-line: var(--tw-bone-16);
  --grid-overlay-default:
    repeating-linear-gradient(0deg,  transparent 0, transparent 47px, var(--tw-bone-16) 47px, var(--tw-bone-16) 48px),
    repeating-linear-gradient(90deg, transparent 0, transparent 47px, var(--tw-bone-16) 47px, var(--tw-bone-16) 48px);
}


/* ============================================================
   Trailway Growth — Design System
   Single entry point. Consumers link this one file.
   This file is @import lines only — all values live in tokens/.
   ============================================================ */

/* Trailway Growth — Webfonts
   Inter         — wordmark, headlines, body (humanist sans, carries every human word)
   Overpass Mono — readouts, labels, metrics, inscriptions (every number + label)
   Files are the real brand woff2 subsets, self-hosted. Each is a variable file
   serving the full weight range, so one @font-face per unicode subset covers
   200–700 (Inter) / 400–600 (Overpass Mono). */

/* ---------------- Inter ---------------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/1f80f55a-49f0-42c0-9c55-faa1ef0e952a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/eb88f027-3f3a-44f3-af0a-47ad5eb52fe9.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/cb739ae0-004d-4842-a639-c85d2d5ae1ca.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/3b28c65b-c978-4b9a-8d1a-9b8786b8daf5.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/02311f15-d78c-41b0-bbc2-fdb9c872c424.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/6a5f2549-f5d1-4824-88b0-222e0cc85428.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("assets/fonts/a9b5dfd3-bf28-4ae8-b68e-7a45aa311fa0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ---------------- Overpass Mono ---------------- */
@font-face {
  font-family: 'Overpass Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/a19ffd84-66ec-49a0-b5b2-85c42749e99a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Overpass Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/502e2f3f-5a10-42b2-a348-b977309ac88d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Overpass Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/43a80c43-13a2-4cc2-a403-27f037ca2280.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Overpass Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/98a3b42e-6363-4dbc-9075-1b135826e12d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Overpass Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/7ca63a1d-d89f-4dd7-a934-844fae4db280.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Trailway Growth — Color
   "Stone and moss." Four tones. No glow, no gradients, no tech-blue.
   This thing doesn't emit light. It just sits there being more capable than you expected. */

:root {
  /* ---- Base palette ---- */
  --tw-dark:  #3A4C45;  /* Dark Stone — INK + the dark POP. Type on light + hairline borders,
                           and the darker contrast element ON a moss ground when you don't
                           want bone. Never a standalone surface of its own. */
  --tw-moss:  #3D7A6A;  /* Moss — THE surface. Every filled/primary ground + the action color. */
  --tw-sage:  #A2BBB6;  /* Sage — weathered surface, resting field borders, muted type */
  --tw-bone:  #E4EFEA;  /* Bone — light ground, reversed type, air */
  --tw-white: #ffffff;  /* paper white for cards on light grounds */

  /* page ground sits a hair off bone */
  --tw-paper: #f2f5f3;

  /* ---- Alpha derivations of Dark Stone (text + lines on light) ---- */
  --tw-dark-92: rgba(58, 76, 69, .92);
  --tw-dark-82: rgba(58, 76, 69, .82);
  --tw-dark-70: rgba(58, 76, 69, .70);
  --tw-dark-65: rgba(58, 76, 69, .65);
  --tw-dark-55: rgba(58, 76, 69, .55);
  --tw-dark-45: rgba(58, 76, 69, .45);
  --tw-dark-35: rgba(58, 76, 69, .35);
  --tw-line:    rgba(58, 76, 69, .10);  /* hairline borders on light */

  /* ---- Alpha derivations of Bone (text + lines on dark/moss) ---- */
  --tw-bone-82: rgba(228, 239, 234, .82);
  --tw-bone-75: rgba(228, 239, 234, .75);
  --tw-bone-60: rgba(228, 239, 234, .60);
  --tw-bone-16: rgba(228, 239, 234, .16);  /* the straight grid overlay line */

  /* ---- Sage alpha ---- */
  --tw-sage-60: rgba(162, 187, 182, .60);

  /* ---- The House — division accents (swap the second word, never the palette spirit) ----
     Each division also keys a nature-imagery subject matched to its accent:
       brands → forest/canopy · promotion → honeycomb/amber · outbound → ocean/tidal
       sales → red rock/canyon · capital → aurora/dusk */
  --tw-brands:    #3D7058;  /* offer · brand · website · collateral */
  --tw-promotion: #DCB62E;  /* ads · content · landing · SEO · referral */
  --tw-outbound:  #3A6B80;  /* cold email · cold calls · LinkedIn */
  --tw-sales:     #8B5A5A;  /* outsourced closing team */
  --tw-capital:   #6B5A7A;  /* investment arm */
  --tw-os:        #5C6E86;  /* trailwayOS — the product surface */

  /* ---- Semantic aliases ---- */
  --surface-page:     var(--tw-paper);
  --surface-card:     var(--tw-white);
  --surface-primary:  var(--tw-moss);   /* the ground everything sits on — the default fill */
  --surface-deep:     var(--tw-dark);   /* the dark POP against moss (chip/panel/chrome) when
                                           bone isn't wanted. Never a standalone dark ground. */
  --surface-muted:    var(--tw-bone);   /* filled fields, quiet chips */

  --text-strong:   var(--tw-dark);      /* headlines on light */
  --text-body:     var(--tw-dark-70);   /* body copy on light */
  --text-muted:    var(--tw-dark-55);   /* captions, meta */
  --text-faint:    var(--tw-dark-35);   /* placeholders */
  --text-on-dark:  var(--tw-bone);      /* reversed type */
  --text-on-dark-muted: var(--tw-bone-75);

  --accent:        var(--tw-moss);      /* the brand default action color */
  --border-hair:   var(--tw-line);
  --border-field:  var(--tw-sage);      /* resting input border */
  --border-focus:  var(--tw-moss);      /* focused input border */
  --label-mono:    var(--tw-moss);      /* mono micro-labels */
}

/* Trailway Growth — Typography
   "Refined, never decorative." One humanist sans for every human word.
   One mono for every number, label, and metric.
   Note the dotless i in tra(ı)lway: the ıl reads as a rising graph line. */

:root {
  /* ---- Families ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Weights ---- */
  --fw-extralight: 200; /* @kind font */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* ---- Display / heading scale (Inter, tight tracking) ---- */
  --fs-display:  42px;   --lh-display:  1.08 /* @kind other */;  --tr-display:  -0.035em /* @kind other */;
  --fs-h1:       36px;   --lh-h1:       1.10 /* @kind other */;  --tr-h1:       -0.035em /* @kind other */;
  --fs-h2:       24px;   --lh-h2:       1.14 /* @kind other */;  --tr-h2:       -0.03em /* @kind other */;
  --fs-h3:       18px;   --lh-h3:       1.30 /* @kind other */;  --tr-h3:       -0.02em /* @kind other */;

  /* ---- Body scale ---- */
  --fs-lead:     19px;   --lh-lead:     1.58 /* @kind other */;
  --fs-body:     15px;   --lh-body:     1.60 /* @kind other */;
  --fs-small:    13.5px; --lh-small:    1.55 /* @kind other */;

  /* ---- Mono / readout scale ---- */
  --fs-metric:   32px;   --tr-metric:   -0.03em /* @kind other */;  /* big numbers */
  --fs-mono:     13px;   --tr-mono:     -0.01em /* @kind other */;  /* inline readouts */
  --fs-label:    11px;   --tr-label:    0.06em /* @kind other */;   /* uppercase micro-labels */
  --fs-eyebrow:  10.5px; --tr-eyebrow:  0.14em /* @kind other */;   /* section eyebrows */

  /* base body tracking — Inter looks best fractionally tightened */
  --tr-body: -0.011em /* @kind other */;
}

/* Trailway Growth — Spacing & Grid
   Generous whitespace. Section rhythm is large; the elegance comes from restraint.
   The straight grid overlay snaps to 36 / 48 / 72px (dense / default / sparse). */

:root {
  /* ---- Spacing scale (steps of 4) ---- */
  --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;
  --space-25: 100px;  /* section padding (top+bottom) */

  /* ---- The straight grid (overlay line spacing) ---- */
  --grid-dense:   36px;
  --grid-default: 48px;
  --grid-sparse:  72px;

  /* ---- Layout ---- */
  --container-max: 1080px;
  --container-pad: 40px;
}

/* Trailway Growth — Effects
   Corners are barely rounded (2–4px) — engineered, not soft.
   Shadows are rare and low; this thing doesn't glow.
   Two signature devices: the curved slant cut and the straight grid. */

:root {
  /* ---- Corner radii ---- */
  --radius-sm:  2px;   /* chips, small fields, image corners */
  --radius:     3px;   /* the default — buttons, cards, inputs, panels */
  --radius-lg:  4px;   /* raised cards, dialogs */
  --radius-full: 999px;

  /* ---- Borders ---- */
  --border-w-hair:  1px;    /* card hairlines */
  --border-w-field: 1.5px;  /* inputs, outline buttons */
  --accent-bar:     4px;    /* card left-edge accent */

  /* ---- Shadows (sparse, soft, cool stone) ---- */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(58, 76, 69, .06);
  --shadow-raised: 0 4px 30px rgba(58, 76, 69, .12);  /* floating panels, dialogs */
  --ring-focus:  0 0 0 3px rgba(70, 117, 111, .12);   /* focused field halo */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur:      180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */

  /* ---- The straight grid (paint over moss/dark imagery) ---- */
  --grid-line: var(--tw-bone-16);
  --grid-overlay-default:
    repeating-linear-gradient(0deg,  transparent 0, transparent 47px, var(--tw-bone-16) 47px, var(--tw-bone-16) 48px),
    repeating-linear-gradient(90deg, transparent 0, transparent 47px, var(--tw-bone-16) 47px, var(--tw-bone-16) 48px);
}




  :root {
    /* No custom overrides needed — new DS has correct values */
  }
  * { box-sizing: border-box; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body {
    margin: 0;
    background: #cdd5d0;
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    -webkit-font-smoothing: antialiased;
  }

  /* ---------- fixed 16:9 page frames ---------- */
  .deck { width: 1280px; margin: 40px auto; transform-origin: top center; counter-reset: pg 0; }
  .page {
    position: relative;
    width: 1280px; height: 720px;
    background: var(--tw-paper);
    padding: 44px 64px;
    margin: 0 auto 30px;
    overflow: hidden;
    box-shadow: 0 8px 44px rgba(58,76,69,0.18);
    border: 1px solid var(--border-hair);
  }
  .page:not(.cover) { counter-increment: pg; }
  .page:not(.cover):not(.on-dark)::after {
    content: counter(pg, decimal-leading-zero);
    position: absolute; right: 44px; bottom: 26px; z-index: 5;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
    color: var(--text-muted);
  }
  .page.on-dark::after {
    content: counter(pg, decimal-leading-zero);
    position: absolute; right: 44px; bottom: 26px; z-index: 5;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
    color: rgba(228,239,234,0.5);
  }

  /* ---------- headings & text ---------- */
  h1, h2, h3, h4 { color: var(--text-strong); text-wrap: balance; margin: 0; }
  p { margin: 0; text-wrap: pretty; }
  .h2 {
    font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1);
    font-weight: var(--fw-semibold); color: var(--text-strong);
  }
  .h3 {
    font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
    font-weight: var(--fw-semibold); color: var(--text-strong);
  }
  .h4 {
    font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
    font-weight: var(--fw-semibold); color: var(--text-strong);
  }
  .lead {
    font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-body);
    font-weight: var(--fw-light); letter-spacing: -0.01em; text-wrap: pretty;
  }
  .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
  .small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
  .mono {
    font-family: var(--font-mono); font-size: var(--fs-mono);
    letter-spacing: var(--tr-mono); color: var(--text-body);
  }
  .label {
    font-family: var(--font-mono); font-size: var(--fs-label);
    letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label-mono);
  }
  .strong { color: var(--text-strong); }

  /* ---------- layout helpers ---------- */
  .section { border-top: none; }
  .sec-head { margin-bottom: 12px; }
  .sec-eyebrow {
    font-family: var(--font-mono); font-size: 13px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--tw-moss);
  }
  .sec-head .h2 { margin-top: 6px; font-size: 32px; }
  .sec-head .lead { margin-top: 8px; max-width: 92ch; font-size: 17px; line-height: 1.5; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .stack-8 > * + * { margin-top: 8px; }
  .stack-16 > * + * { margin-top: 16px; }
  .stack-24 > * + * { margin-top: 24px; }
  .rule { height: 1px; background: var(--border-hair); border: 0; margin: 0; }

  .card {
    background: var(--tw-white); border: 1px solid var(--border-hair);
    border-radius: var(--radius); padding: 18px;
  }
  .fig-cap {
    font-family: var(--font-mono); font-size: var(--fs-label);
    letter-spacing: 0.04em; color: var(--text-muted); margin-top: 12px;
  }
  a { color: var(--tw-moss); text-underline-offset: 3px; }

  /* ---------- download chips (screen only) ---------- */
  .dl-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); text-decoration: none;
    border: 1px solid var(--border-hair); border-radius: 3px; padding: 5px 10px;
    background: var(--tw-white); transition: color 150ms, border-color 150ms;
  }
  .dl-chip:hover { color: var(--text-strong); border-color: var(--tw-sage); }
  .dl-chip .ar { font-size: 12px; line-height: 1; }
  .dl-over {
    position: absolute; right: 12px; top: 12px; z-index: 4;
    background: rgba(244,247,245,0.92); backdrop-filter: blur(2px);
  }

  /* ---------- landing motion (Trailway motion system) ---------- */
  @media (prefers-reduced-motion: no-preference) {
    /* brand sweep tokens */
    :root {
      --dur-reveal: 480ms;
      --dur-traverse: 720ms;
      --ease-settle: cubic-bezier(.22,1,.36,1);
      --ease-traverse: cubic-bezier(.65,0,.35,1);
      --stagger-step: 60ms;
    }

    /* focus pull: imagery resolves from deep blur */
    @keyframes focusPull {
      from { filter: blur(16px) saturate(1.0) brightness(0.9); }
      to   { filter: blur(6.5px) saturate(1.35) sepia(0.1) brightness(1.16); }
    }

    /* grid draws like survey lines — swept on from origin */
    @keyframes gridDraw {
      from { mask-image: linear-gradient(135deg, #000 0%, transparent 0%); -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 0%); }
      to   { mask-image: linear-gradient(135deg, #000 100%, transparent 100%); -webkit-mask-image: linear-gradient(135deg, #000 100%, transparent 100%); }
    }

    /* walked in: travel + opacity, arrives by movement */
    @keyframes walkDown {
      from { opacity: 0; transform: translateY(-12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes walkUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* terrain reveals bottom→top (up the cut) — translate inside the clip */
    @keyframes terrainReveal {
      from { transform: translateY(40%); }
      to   { transform: translateY(0); }
    }

    .landing-terrain .cover-photo-img,
    .landing-terrain .cover-photo-tint,
    .landing-terrain .grid-overlay,
    .landing-terrain .cut-shadow {
      animation: terrainReveal 400ms var(--ease-traverse) both;
    }
    .landing-terrain .cover-photo-img {
      animation: terrainReveal 400ms var(--ease-traverse) both,
                 focusPull 400ms var(--ease-settle) both;
    }
    .landing-grid {
      animation: gridDraw 400ms var(--ease-settle) 250ms both;
    }
    .landing-logo {
      animation: walkDown 300ms var(--ease-settle) 100ms both;
    }
    .landing-badge {
      animation: walkDown 300ms var(--ease-settle) 140ms both;
    }
    .landing-label {
      animation: walkUp 300ms var(--ease-settle) 200ms both;
    }
    .landing-title {
      animation: walkUp 300ms var(--ease-settle) 250ms both;
    }
    .landing-btn {
      animation: walkUp 280ms var(--ease-settle) both;
    }
    .landing-btn:nth-child(1) { animation-delay: 320ms; }
    .landing-btn:nth-child(2) { animation-delay: 370ms; }
    .landing-btn:nth-child(3) { animation-delay: 420ms; }
    .landing-btn:nth-child(4) { animation-delay: 470ms; }
    .landing-btn:nth-child(5) { animation-delay: 520ms; }
    .landing-all {
      animation: walkUp 280ms var(--ease-settle) 580ms both;
    }
  }

  /* ---------- cover ---------- */
  .cover {
    background: var(--tw-moss); color: var(--tw-bone);
    display: flex; flex-direction: column;
    padding: 64px 68px;
  }
  .cover .grid-overlay {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background-image:
      repeating-linear-gradient(0deg,  transparent 0, transparent 47px, rgba(228,239,234,0.10) 47px, rgba(228,239,234,0.10) 48px),
      repeating-linear-gradient(90deg, transparent 0, transparent 47px, rgba(228,239,234,0.10) 47px, rgba(228,239,234,0.10) 48px);
  }
  /* curved-cut blurred image panel on the right */
  .cover-photo {
    position: absolute; top: 0; bottom: 0; right: 0; width: 46%; z-index: 1;
    overflow: hidden; clip-path: url(#coverCut); -webkit-clip-path: url(#coverCut);
  }
  .cover-photo .grid-overlay { z-index: 2; }
  .cover-photo-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: 40% center;
    filter: blur(6.5px) saturate(1.35) sepia(0.1) brightness(1.16);
    transform: scale(1.2);
  }
  .cover-photo-tint {
    position: absolute; inset: 0;
    background: linear-gradient(105deg, var(--tw-moss) 0%, rgba(61,122,106,0.62) 24%, rgba(61,122,106,0.08) 100%);
  }
  .cover-inner { position: relative; z-index: 3; display: flex; flex-direction: column; height: 100%; flex: 1; }
  .cover-top { display: flex; align-items: center; justify-content: space-between; }
  .cover-mid { margin-top: auto; }
  .cover-title {
    font-size: 84px; line-height: 0.98; letter-spacing: -0.04em;
    font-weight: var(--fw-semibold); color: var(--tw-bone); text-wrap: balance;
  }
  .cover-sub { color: var(--tw-bone-82); font-weight: var(--fw-light); }
  .cover-meta {
    display: flex; flex-wrap: wrap; gap: 28px 40px; margin-top: 44px; padding-top: 26px;
    border-top: 1px solid var(--tw-bone-16); max-width: 54%;
  }
  .cover-meta .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tw-bone); opacity: 0.72; }
  .cover-meta .v { font-family: var(--font-mono); font-size: 13px; color: var(--tw-bone); margin-top: 6px; }

  /* ---------- swatches ---------- */
  .swatch { border: 1px solid var(--border-hair); border-radius: var(--radius); overflow: hidden; background: var(--tw-white); }
  .swatch .chip { min-height: 32px; }
  .swatch .meta { padding: 10px 12px 12px; }
  .swatch .nm { font-weight: var(--fw-medium); color: var(--text-strong); font-size: 14px; }
  .swatch .hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 3px; }
  .swatch .use { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.4; }

  /* ---------- ink levels ---------- */
  .ink-row { display: flex; align-items: center; gap: 14px; }
  .ink-dot { width: 26px; height: 26px; border-radius: var(--radius-sm); flex: 0 0 auto; border: 1px solid var(--border-hair); }

  /* ---------- type specimen ---------- */
  .type-row { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--border-hair); }
  .type-row:first-child { border-top: 0; }
  .type-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); line-height: 1.5; }
  .specimen { color: var(--text-strong); }

  /* ---------- spacing scale ---------- */
  .space-row { display: grid; grid-template-columns: 70px 60px 1fr; gap: 16px; align-items: center; padding: 7px 0; }
  .space-bar { height: 12px; background: var(--tw-moss); border-radius: 1px; }

  /* ---------- component demo surface ---------- */
  .demo { background: var(--tw-white); border: 1px solid var(--border-hair); border-radius: var(--radius); padding: 26px; }
  .demo.moss { background: var(--tw-moss); border-color: transparent; }
  .demo.dark { background: var(--tw-dark); border-color: transparent; }
  .demo-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

  /* bold mono (Overpass) across the board */
  .mono, .label, .fig-cap, .type-meta, .swatch .hex { font-weight: 600; }

  /* ---------- print ---------- */
  @page { size: 1280px 720px; margin: 0; }
  @media print {
    html, body { margin: 0; padding: 0; background: #fff; }
    .deck { width: auto; margin: 0 !important; transform: none !important; zoom: 1 !important; }
    .page {
      margin: 0 !important; box-shadow: none !important; border: none !important;
      break-after: page; break-inside: avoid;
    }
    .page:last-child { break-after: auto; }
    .screen-only { display: none !important; }
  }

  /* screen-only download hint */
  .toolbar {
    position: fixed; right: 18px; bottom: 18px; z-index: 50;
    display: flex; gap: 8px; align-items: center;
    background: var(--tw-dark); color: var(--tw-bone);
    border-radius: var(--radius); padding: 10px 14px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
    box-shadow: var(--shadow-raised);
  }