@import url('/css/mobile-android.css');
/* ============================================================================
   HorizonTalent Design System — "Craft for the working actor"
   Single shared source of truth for HorizonTalent brand tokens, typography,
   components, and a11y primitives. Modeled on SiteLine's STRUCTURE
   (radii/shadow/type scales, [data-*] surface pattern, utility+component
   classes) but rendered entirely in HORIZON's brand — NEVER SiteLine's colors.

   Brand: teal #006D77 / coral #FF6B4A / gold #D4AF37 / cream #FBFAF7.
   Fonts: Fraunces (display, italic emphasis) · Plus Jakarta Sans (sans) ·
          JetBrains Mono (mono).

   LOAD ORDER: this file is linked BEFORE each page's existing inline <style>,
   so inline page rules always WIN. Everything here is therefore ADDITIVE and
   NAMESPACED (--hz-* tokens, .hz-* classes) — it never redefines a page's own
   --teal/--coral or its .btn/.card. Zero regression by design.

   HorizonTalent = AI assistant for self-submitting ACTORS. $19/mo · $190/yr ·
   free-forever (no card) · 14-day trial on paid. AI is TEXT-ONLY; never
   auto-submits to casting platforms. Not a licensed talent agency.
   Added 2026-06-26.
   ========================================================================== */

:root {
  /* ── Brand color (mirrors horizon/index.html :root exactly) ───────────── */
  --hz-teal:       #006D77;
  --hz-teal-lt:    #008C99;
  --hz-teal-deep:  #0E2A2E;
  --hz-teal-night: #081C1F;
  --hz-coral:      #FF6B4A;
  --hz-coral-dk:   #E55533;
  --hz-gold:       #D4AF37;
  --hz-gold-dk:    #B8942A;
  --hz-ink:        #2C3E50;
  --hz-ink-mid:    #3F4A55;
  --hz-ink-soft:   #5A6470;
  --hz-ink-mute:   #8B95A1;
  --hz-cream:      #FBFAF7;
  --hz-paper:      #F1EEE7;
  --hz-sand:       #E8E4DA;
  --hz-border:     #E2E8F0;
  --hz-line-teal:  rgba(0,109,119,0.12);
  --hz-green:      #16A34A;

  /* ── Surface aliases (overridden by [data-surface]) ───────────────────── */
  --hz-bg:      var(--hz-cream);
  --hz-surface: #FFFFFF;
  --hz-on-bg:   var(--hz-ink);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --hz-font-display: 'Fraunces', Georgia, serif;
  --hz-font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hz-font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Fluid type scale (clamp steps; --hz-step-0 is body baseline 15px) */
  --hz-step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.86rem);
  --hz-step-0:  clamp(0.94rem, 0.92rem + 0.10vw, 1.00rem);
  --hz-step-1:  clamp(1.13rem, 1.05rem + 0.36vw, 1.33rem);
  --hz-step-2:  clamp(1.35rem, 1.20rem + 0.72vw, 1.85rem);
  --hz-step-3:  clamp(1.65rem, 1.35rem + 1.40vw, 2.62rem);
  --hz-step-4:  clamp(2.10rem, 1.55rem + 2.65vw, 3.75rem);
  --hz-step-5:  clamp(2.80rem, 1.80rem + 4.80vw, 6.00rem);

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --hz-r-sm: 8px;
  --hz-r:    10px;
  --hz-r-lg: 14px;
  --hz-r-xl: 20px;
  --hz-r-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --hz-shadow-sm:    0 2px 8px rgba(14,42,46,0.08);
  --hz-shadow:       0 8px 24px rgba(14,42,46,0.16);
  --hz-shadow-lg:    0 30px 80px rgba(14,42,46,0.20);
  --hz-shadow-coral: 0 8px 20px rgba(255,107,74,0.40);

  /* ── Spacing scale ────────────────────────────────────────────────────── */
  --hz-gap-xs: 4px;
  --hz-gap-sm: 8px;
  --hz-gap:    12px;
  --hz-gap-md: 16px;
  --hz-gap-lg: 24px;
  --hz-gap-xl: 40px;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --hz-container: 1120px;
}

/* ── Light app surface (white-bg dashboards/tools) ──────────────────────── */
[data-surface="light"] {
  --hz-bg:      #F7F9FC;
  --hz-surface: #FFFFFF;
  --hz-on-bg:   var(--hz-ink);
  --hz-border:  #E2E8F0;
  --hz-shadow-sm: 0 2px 8px rgba(28,43,58,0.06);
  --hz-shadow:    0 8px 24px rgba(28,43,58,0.10);
}

/* ── Type utilities ─────────────────────────────────────────────────────── */
.hz-display { font-family: var(--hz-font-display); font-weight: 300; letter-spacing: -0.01em; line-height: 1.02; }
/* HorizonTalent emphasizes with Fraunces italic — match the site's <em> idiom */
.hz-display em, .hz-em { font-family: var(--hz-font-display); font-style: italic; font-weight: 400; }
.hz-mono { font-family: var(--hz-font-mono); }
.hz-eyebrow {
  font-family: var(--hz-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hz-teal);
}
.hz-h1 { font-family: var(--hz-font-display); font-weight: 300; font-size: clamp(48px, 6.4vw, 96px); line-height: 0.96; letter-spacing: -0.01em; }
.hz-h2 { font-family: var(--hz-font-display); font-weight: 400; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; letter-spacing: -0.01em; }
.hz-h3 { font-family: var(--hz-font-display); font-weight: 500; font-size: clamp(20px, 2.5vw, 28px); line-height: 1.15; }
.hz-body { font-family: var(--hz-font-sans); font-size: 15px; line-height: 1.6; color: var(--hz-ink-mid); }
.hz-lead { font-family: var(--hz-font-sans); font-size: var(--hz-step-1); line-height: 1.55; color: var(--hz-ink-soft); }

/* ── Layout helpers ─────────────────────────────────────────────────────── */
.hz-container { width: 100%; max-width: var(--hz-container); margin: 0 auto; padding: 0 24px; }
.hz-grid { display: grid; gap: var(--hz-gap-md); }
.hz-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hz-gap-md); }
.hz-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hz-gap-md); }
.hz-stack { display: flex; flex-direction: column; gap: var(--hz-gap-md); }
.hz-stack-sm { display: flex; flex-direction: column; gap: var(--hz-gap-sm); }
.hz-row { display: flex; align-items: center; gap: var(--hz-gap); flex-wrap: wrap; }
@media (max-width: 880px) {
  .hz-grid-2, .hz-grid-3 { grid-template-columns: 1fr; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.hz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--hz-font-sans); font-weight: 700; font-size: 15px; line-height: 1;
  padding: 14px 24px; border: 1px solid transparent; border-radius: var(--hz-r);
  background: var(--hz-teal); color: #fff; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hz-btn:hover { background: var(--hz-teal-lt); box-shadow: var(--hz-shadow-sm); }
.hz-btn:active { transform: translateY(1px) scale(0.99); }
.hz-btn[disabled], .hz-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.hz-btn:focus-visible { outline: 3px solid var(--hz-gold); outline-offset: 2px; }

.hz-btn--primary { background: var(--hz-coral); color: #fff; }
.hz-btn--primary:hover { background: var(--hz-coral-dk); box-shadow: var(--hz-shadow-coral); }

.hz-btn--gold { background: var(--hz-gold); color: var(--hz-teal-deep); }
.hz-btn--gold:hover { background: var(--hz-gold-dk); color: #fff; box-shadow: var(--hz-shadow-sm); }

.hz-btn--ghost { background: transparent; color: var(--hz-teal); border-color: var(--hz-line-teal); }
.hz-btn--ghost:hover { background: var(--hz-line-teal); border-color: var(--hz-teal); box-shadow: none; }

.hz-btn--sm { padding: 9px 16px; font-size: 13px; }
.hz-btn--lg { padding: 17px 30px; font-size: 17px; }
.hz-btn--block { width: 100%; }

/* ── Card ───────────────────────────────────────────────────────────────── */
.hz-card {
  background: var(--hz-surface); border: 1px solid var(--hz-border);
  border-radius: var(--hz-r-lg); box-shadow: var(--hz-shadow-sm);
  padding: var(--hz-gap-lg);
}
.hz-card--pad-lg { padding: var(--hz-gap-xl); }
.hz-card--feature { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.hz-card--feature:hover { transform: translateY(-2px); box-shadow: var(--hz-shadow); border-color: var(--hz-teal); }

/* ── Chip ───────────────────────────────────────────────────────────────── */
.hz-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--hz-r-pill);
  background: var(--hz-paper); color: var(--hz-ink-mid);
  font-size: 12px; font-weight: 600; border: 1px solid var(--hz-border);
  font-family: var(--hz-font-sans); cursor: default; transition: background .12s, border-color .12s, color .12s;
}
button.hz-chip { cursor: pointer; }
.hz-chip:hover, .hz-chip[aria-pressed="true"] { background: var(--hz-line-teal); border-color: var(--hz-teal); color: var(--hz-teal); }
.hz-chip--teal { background: var(--hz-teal); color: #fff; border-color: transparent; }
.hz-chip--coral { background: var(--hz-coral); color: #fff; border-color: transparent; }

/* ── Badge / pill ───────────────────────────────────────────────────────── */
.hz-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--hz-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: var(--hz-line-teal); color: var(--hz-teal);
}
.hz-badge--gold { background: rgba(212,175,55,0.15); color: var(--hz-gold-dk); }
.hz-badge--coral { background: rgba(255,107,74,0.14); color: var(--hz-coral-dk); }
.hz-badge--free { background: var(--hz-paper); color: var(--hz-ink-soft); }
.hz-badge--ok { background: rgba(22,163,74,0.12); color: var(--hz-green); }

/* ── Input ──────────────────────────────────────────────────────────────── */
.hz-input {
  font-family: var(--hz-font-sans); font-size: 15px;
  padding: 12px 14px; width: 100%;
  border: 1px solid var(--hz-border); border-radius: var(--hz-r-sm);
  background: var(--hz-surface); color: var(--hz-ink);
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.hz-input::placeholder { color: var(--hz-ink-mute); }
.hz-input:hover { border-color: var(--hz-teal-lt); }
.hz-input:focus, .hz-input:focus-visible {
  border-color: var(--hz-teal); box-shadow: 0 0 0 3px var(--hz-line-teal); outline: none;
}
.hz-input:disabled { background: var(--hz-paper); color: var(--hz-ink-mute); cursor: not-allowed; }
.hz-label { font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hz-ink-soft); }

/* ── Keyboard key ───────────────────────────────────────────────────────── */
.hz-kbd {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--hz-border); border-bottom-width: 2px;
  background: var(--hz-paper); color: var(--hz-ink);
  font-family: var(--hz-font-mono); font-size: 11px; line-height: 1.4;
}

/* ── Status marks (pricing tables etc.) ─────────────────────────────────── */
.hz-check { color: var(--hz-teal); }
.hz-x { color: var(--hz-ink-mute); }

/* ── A11y primitives (high-value global wins) ───────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--hz-teal); color: #fff; padding: 10px 16px;
  border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none;
  font-family: var(--hz-font-sans);
}
.skip-link:focus { left: 0; outline: 3px solid var(--hz-gold); outline-offset: 0; }

/* Low-specificity global focus ring: only applies where a page hasn't set its
   own :focus-visible (page inline rules load AFTER and win on equal/greater
   specificity). Teal #006D77 on cream = 8.3:1, gold offset for dark surfaces. */
:focus-visible { outline: 2px solid var(--hz-teal); outline-offset: 2px; }
[data-surface="light"] :focus-visible { outline-color: var(--hz-teal); }

/* Respect reduced-motion globally (vestibular safety) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}