/* ============================================================
   TRIPLEX LINERS — V2 DESIGN SYSTEM · CORE
   One system. Every page is built from this file.
   Art directions change TOKENS ONLY (see theme-*.css).
   Namespace: .tlp-*  ·  no global element styling outside :root
   ============================================================ */

/* ---------- 1. TOKENS (defaults; themes override) ---------- */
:root {
  /* Type families */
  --tlp-font-display: Georgia, 'Times New Roman', serif;
  --tlp-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --tlp-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — 1.25 major third, 16px body FLOOR (readability standard) */
  --tlp-size-xs:   0.8125rem;  /* 13px — labels only, never body */
  --tlp-size-sm:   0.9375rem;  /* 15px — captions */
  --tlp-size-base: 1.0625rem;  /* 17px — BODY FLOOR is 16px; we run 17 */
  --tlp-size-lg:   1.25rem;    /* 20px — lead paragraphs */
  --tlp-size-xl:   1.5rem;     /* 24px */
  --tlp-size-2xl:  2rem;       /* 32px */
  --tlp-size-3xl:  2.75rem;    /* 44px */
  --tlp-size-4xl:  3.75rem;    /* 60px */
  --tlp-size-5xl:  5rem;       /* 80px — display only */

  --tlp-leading-tight: 1.08;
  --tlp-leading-snug: 1.25;
  --tlp-leading-body: 1.65;

  --tlp-track-tight: -0.02em;
  --tlp-track-wide: 0.12em;

  /* Spacing — 8pt base */
  --tlp-1: 0.5rem;  --tlp-2: 1rem;    --tlp-3: 1.5rem;  --tlp-4: 2rem;
  --tlp-5: 3rem;    --tlp-6: 4rem;    --tlp-7: 6rem;    --tlp-8: 8rem;

  /* Color — themes MUST redefine all of these */
  --tlp-ink: #14161a;
  --tlp-ink-soft: #4a5058;
  --tlp-paper: #ffffff;
  --tlp-surface: #f4f5f7;
  --tlp-line: #d9dce1;
  --tlp-brand: #16447e;
  --tlp-accent: #c8973f;
  /* Accent used ON dark/inverse backgrounds. Themes whose accent equals their
     inverse background MUST override this or buttons vanish. */
  --tlp-accent-on-inverse: var(--tlp-accent);
  /* Text colour that sits ON the on-inverse accent (i.e. button label). */
  --tlp-ink-on-accent-inverse: #0d1420;
  --tlp-inverse-ink: #ffffff;
  --tlp-inverse-ink-soft: rgba(255,255,255,.72);
  --tlp-inverse-bg: #0d1420;

  /* Form */
  --tlp-radius: 2px;
  --tlp-radius-lg: 4px;
  --tlp-border: 1px;
  --tlp-measure: 68ch;
  --tlp-container: 1180px;
  --tlp-container-wide: 1400px;

  /* Motion — subtle only. No scroll-jacking, no 3D. */
  --tlp-ease: cubic-bezier(.22,.61,.36,1);
  --tlp-dur: 480ms;
}

/* ---------- 2. RESET (scoped) ---------- */
.tlp-root *, .tlp-root *::before, .tlp-root *::after { box-sizing: border-box; }
.tlp-root { margin: 0; }
.tlp-root img, .tlp-root svg { display: block; max-width: 100%; height: auto; }

.tlp-root {
  font-family: var(--tlp-font-body);
  font-size: var(--tlp-size-base);
  line-height: var(--tlp-leading-body);
  color: var(--tlp-ink);
  background: var(--tlp-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 3. TYPE ---------- */
.tlp-root h1, .tlp-root h2, .tlp-root h3, .tlp-root h4 {
  font-family: var(--tlp-font-display);
  font-weight: 400;
  line-height: var(--tlp-leading-tight);
  letter-spacing: var(--tlp-track-tight);
  margin: 0;
  text-transform: none;
}
.tlp-h1 { font-size: clamp(2.25rem, 5.2vw, var(--tlp-size-4xl)); }
.tlp-h2 { font-size: clamp(1.75rem, 3.4vw, var(--tlp-size-3xl)); }
.tlp-h3 { font-size: var(--tlp-size-xl); line-height: var(--tlp-leading-snug); }

.tlp-eyebrow {
  font-family: var(--tlp-font-body);
  font-size: var(--tlp-size-xs);
  font-weight: 600;
  letter-spacing: var(--tlp-track-wide);
  text-transform: uppercase;
  color: var(--tlp-accent);
  margin: 0 0 var(--tlp-3);
}
.tlp-lead {
  font-size: var(--tlp-size-lg);
  line-height: 1.5;
  color: var(--tlp-ink-soft);
  max-width: 54ch;
  margin: var(--tlp-3) 0 0;
}
.tlp-root p { margin: 0 0 var(--tlp-2); max-width: var(--tlp-measure); }
.tlp-root p:last-child { margin-bottom: 0; }

/* ---------- 4. LAYOUT ---------- */
.tlp-container { width: 100%; max-width: var(--tlp-container); margin-inline: auto; padding-inline: var(--tlp-3); }
.tlp-container--wide { max-width: var(--tlp-container-wide); }
.tlp-section { padding-block: var(--tlp-7); }
.tlp-section--tight { padding-block: var(--tlp-5); }
.tlp-section--inverse { background: var(--tlp-inverse-bg); color: var(--tlp-inverse-ink); }
.tlp-section--surface { background: var(--tlp-surface); }
.tlp-section--inverse .tlp-lead,
.tlp-section--inverse .tlp-stat__label,
.tlp-hero .tlp-stat__label { color: var(--tlp-inverse-ink-soft); }

/* Contrast guard: on any dark surface the primary button uses the
   on-inverse accent, so a theme whose accent matches its dark background
   can never render an invisible button. */
.tlp-section--inverse .tlp-btn--primary,
.tlp-hero .tlp-btn--primary {
  background: var(--tlp-accent-on-inverse);
  border-color: var(--tlp-accent-on-inverse);
  color: var(--tlp-ink-on-accent-inverse);
}
.tlp-section--inverse .tlp-btn--primary:hover,
.tlp-hero .tlp-btn--primary:hover {
  background: transparent; color: var(--tlp-accent-on-inverse);
}

/* Alignment variants — the state-page layout rhythm lives here.
   These are variations WITHIN the system, never departures from it. */
.tlp-align-left   { text-align: left; }
.tlp-align-center { text-align: center; }
.tlp-align-center .tlp-lead, .tlp-align-center p { margin-inline: auto; }
.tlp-align-right  { text-align: right; }
.tlp-align-right .tlp-lead, .tlp-align-right p { margin-left: auto; margin-right: 0; }

.tlp-split { display: grid; gap: var(--tlp-5); align-items: center; }
@media (min-width: 900px) {
  .tlp-split { grid-template-columns: 1fr 1fr; gap: var(--tlp-6); }
  .tlp-split--wide-left  { grid-template-columns: 1.35fr 1fr; }
  .tlp-split--wide-right { grid-template-columns: 1fr 1.35fr; }
  .tlp-split--flip > :first-child { order: 2; }
}
.tlp-split--top { align-items: start; }

/* ---------- 5. HERO ---------- */
.tlp-hero { position: relative; overflow: hidden; background: var(--tlp-inverse-bg); color: var(--tlp-inverse-ink); }
.tlp-hero__media { position: absolute; inset: 0; }
.tlp-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.tlp-hero__scrim { position: absolute; inset: 0; }
.tlp-hero__inner { position: relative; padding-block: clamp(var(--tlp-6), 12vw, var(--tlp-8)); }
.tlp-hero .tlp-lead { color: var(--tlp-inverse-ink-soft); }
.tlp-hero--compact .tlp-hero__inner { padding-block: var(--tlp-6); }

/* ---------- 6. STAT ROW / BENTO PROOF ---------- */
.tlp-stats { display: grid; gap: var(--tlp-4); margin-top: var(--tlp-6);
  padding-top: var(--tlp-4); border-top: var(--tlp-border) solid currentColor; }
@media (min-width: 700px)  { .tlp-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tlp-stats { grid-template-columns: repeat(4, 1fr); } }
.tlp-stat__figure { font-family: var(--tlp-font-display); font-size: var(--tlp-size-2xl);
  line-height: 1.1; letter-spacing: var(--tlp-track-tight); }
.tlp-stat__label { font-size: var(--tlp-size-xs); font-weight: 600; letter-spacing: var(--tlp-track-wide);
  text-transform: uppercase; color: var(--tlp-ink-soft); margin-top: var(--tlp-1); }

.tlp-bento { display: grid; gap: var(--tlp-2); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .tlp-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tlp-bento { grid-template-columns: repeat(3, 1fr); } }
.tlp-card { background: var(--tlp-paper); border: var(--tlp-border) solid var(--tlp-line);
  border-radius: var(--tlp-radius-lg); padding: var(--tlp-4); }
.tlp-card--span2 { grid-column: span 1; }
@media (min-width: 1000px) { .tlp-card--span2 { grid-column: span 2; } }
.tlp-card__k { font-family: var(--tlp-font-display); font-size: var(--tlp-size-2xl); line-height: 1.1; }
.tlp-card__t { font-size: var(--tlp-size-base); font-weight: 600; margin: 0 0 var(--tlp-1); }
.tlp-card__d { font-size: var(--tlp-size-sm); color: var(--tlp-ink-soft); margin: 0; }

/* ---------- 7. BUTTONS — generous targets (min 48px) ---------- */
.tlp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 var(--tlp-3); border-radius: var(--tlp-radius);
  font-family: var(--tlp-font-body); font-size: var(--tlp-size-base); font-weight: 600;
  letter-spacing: .01em; text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background var(--tlp-dur) var(--tlp-ease), color var(--tlp-dur) var(--tlp-ease),
              border-color var(--tlp-dur) var(--tlp-ease); }
.tlp-btn--primary { background: var(--tlp-accent); color: var(--tlp-inverse-bg); border-color: var(--tlp-accent); }
.tlp-btn--primary:hover { background: transparent; color: var(--tlp-accent); }
.tlp-btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.tlp-btn--ghost:hover { background: currentColor; }
.tlp-btn:focus-visible { outline: 3px solid var(--tlp-accent); outline-offset: 3px; }

/* ---------- 8. AUDIENCE CTA ROW (the three doors) ---------- */
.tlp-doors { display: grid; gap: var(--tlp-2); }
@media (min-width: 800px) { .tlp-doors { grid-template-columns: repeat(3, 1fr); } }
.tlp-door { display: flex; flex-direction: column; gap: var(--tlp-2);
  padding: var(--tlp-4); border: var(--tlp-border) solid var(--tlp-line);
  border-radius: var(--tlp-radius-lg); background: var(--tlp-paper);
  text-decoration: none; color: inherit;
  transition: border-color var(--tlp-dur) var(--tlp-ease), transform var(--tlp-dur) var(--tlp-ease); }
.tlp-door:hover { border-color: var(--tlp-accent); transform: translateY(-2px); }
.tlp-door__label { font-size: var(--tlp-size-xs); font-weight: 700; letter-spacing: var(--tlp-track-wide);
  text-transform: uppercase; color: var(--tlp-accent); }
.tlp-door__title { font-family: var(--tlp-font-display); font-size: var(--tlp-size-xl); line-height: 1.15; }
.tlp-door__d { font-size: var(--tlp-size-sm); color: var(--tlp-ink-soft); margin: 0; flex: 1; }
.tlp-door__cta { font-weight: 600; font-size: var(--tlp-size-sm); }

/* ---------- 9. RULES / DIVIDERS ---------- */
.tlp-rule { height: var(--tlp-border); background: var(--tlp-line); border: 0; margin: 0; }
.tlp-tick { width: 56px; height: 3px; background: var(--tlp-accent); margin-block: var(--tlp-3); }
.tlp-align-center .tlp-tick { margin-inline: auto; }
.tlp-align-right .tlp-tick { margin-left: auto; }

/* ---------- 10. FAQ ---------- */
.tlp-faq { border-top: var(--tlp-border) solid var(--tlp-line); }
.tlp-faq__item { border-bottom: var(--tlp-border) solid var(--tlp-line); padding-block: var(--tlp-3); }
.tlp-faq__q { font-family: var(--tlp-font-display); font-size: var(--tlp-size-lg); margin: 0 0 var(--tlp-1); }
.tlp-faq__a { color: var(--tlp-ink-soft); margin: 0; }

/* ---------- 11. MOTION — reveals only; respects reduced-motion ---------- */
/* Reveals only arm when JS is confirmed present (html.tlp-js is set inline in
   <head>). If JS fails, is blocked, or is slow, the page renders fully visible
   rather than blank — content is never hidden behind a script that might not run. */
.tlp-js .tlp-reveal { opacity: 0; transform: translateY(14px); }
.tlp-js .tlp-reveal.is-in { opacity: 1; transform: none;
  transition: opacity var(--tlp-dur) var(--tlp-ease), transform var(--tlp-dur) var(--tlp-ease); }
@media (prefers-reduced-motion: reduce) {
  .tlp-js .tlp-reveal, .tlp-js .tlp-reveal.is-in { opacity: 1; transform: none; transition: none; }
  .tlp-root * { animation: none !important; }
}

/* ---------- 12. A11Y ---------- */
.tlp-skip { position: absolute; left: -9999px; }
.tlp-skip:focus { left: var(--tlp-2); top: var(--tlp-2); z-index: 99; background: var(--tlp-paper);
  color: var(--tlp-ink); padding: var(--tlp-2); border-radius: var(--tlp-radius); }
.tlp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }