/* ==========================================================================
   5280 Systems LLC — shared stylesheet
   Every page links this file. Page-specific rules stay in that page's
   inline <style> block; anything used on 2+ pages belongs here.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Color: background layers ─────────────────────────────── */
  --bg:            #0a0a0a;   /* page base */
  --bg-raised:     #111318;   /* alternating sections, footer */
  --bg-card:       #16191f;   /* cards, panels, form fields */

  /* ── Color: text ──────────────────────────────────────────── */
  --text-strong:   #f0f2f7;   /* headings */
  --text:          #d4d8e2;   /* body copy */
  --text-muted:    #5a5f6e;   /* meta, captions, nav links */

  /* ── Color: accents ───────────────────────────────────────── */
  --accent:        #FF6B35;   /* PRIMARY — buttons, emphasis, links */
  --accent-hover:  #FF8C42;
  --accent-soft:   rgba(255,107,53,0.18);
  --accent-2:      #00D4FF;   /* SECONDARY — eyebrows, section labels, tags */
  --accent-2-soft: rgba(0,212,255,0.08);
  --accent-2-line: rgba(0,212,255,0.20);

  /* ── Color: status ────────────────────────────────────────── */
  --success:       #10b981;
  --success-soft:  rgba(16,185,129,0.08);
  --success-line:  rgba(16,185,129,0.25);
  --warning:       #FFD700;
  --danger:        #ef4444;
  --danger-text:   #f87171;
  --danger-soft:   rgba(239,68,68,0.08);
  --danger-line:   rgba(239,68,68,0.20);

  /* ── Color: lines ─────────────────────────────────────────── */
  --border:        #252830;
  --border-soft:   rgba(255,255,255,0.05);

  /* ── Type scale ───────────────────────────────────────────── */
  --fs-xs:      11px;   /* eyebrows, badges, uppercase labels */
  --fs-sm:      12px;   /* meta, captions, footnotes */
  --fs-base:    13px;   /* dense UI, footers */
  --fs-md:      14px;   /* card body, table cells */
  --fs-lg:      15px;   /* default control + body text */
  --fs-xl:      16px;   /* body */
  --fs-lead:    17px;   /* prose paragraphs, section intros */
  --fs-h4:      17px;
  --fs-h3:      20px;
  --fs-h3-lg:   24px;   /* oversized card headings (index) */
  --fs-h2:      clamp(26px, 3.5vw, 38px);
  --fs-h1:      clamp(28px, 4.5vw, 46px);
  --fs-display: clamp(36px, 5.5vw, 58px);   /* homepage hero only */

  /* ── Spacing scale ────────────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 56px;
  --sp-11: 72px;
  --sp-12: 80px;

  /* ── Radius ───────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 99px;

  /* ── Widths ───────────────────────────────────────────────── */
  --max:       860px;   /* standard content column */
  --max-wide: 1200px;   /* pricing tier grid */
  --measure:   680px;   /* comfortable line length for prose */

  /* ── Elevation ────────────────────────────────────────────── */
  --shadow-accent: 0 8px 28px rgba(255,107,53,0.30);
  --shadow-card:   0 24px 64px rgba(0,0,0,0.50);
  --focus-ring:    0 0 0 3px rgba(255,107,53,0.20);
}

/* ==========================================================================
   Base
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-xl);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* Standard interior-page header (about, how-it-works, blog, calculator) */
.page-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-11) var(--sp-7) 0;
}

.page-header h1 { max-width: 720px; }

.page-header .sub {
  margin-top: var(--sp-5);
  font-size: 18px;
  color: var(--text);
  line-height: 1.7;
  max-width: 600px;
}

/* Standard interior-page body */
.page-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-9) var(--sp-7) var(--sp-12);
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* Rule directly under a page header, before the body copy starts */
.divider--lead { margin-bottom: var(--sp-9); }

/* Rule between two major sections of a page */
.divider--section { margin: var(--sp-9) 0; }

/* ==========================================================================
   Typography
   ========================================================================== */

h1 {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: var(--text-strong);
}

/* Homepage hero only — the one step above h1 on the scale */
h1.display {
  font-size: var(--fs-display);
  letter-spacing: -1.5px;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--text-strong);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--text-strong);
}

h4, h5 {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-strong);
}

/* Intro paragraph under a section heading */
.lead {
  font-size: var(--fs-lead);
  color: var(--text);
  line-height: 1.7;
  max-width: 560px;
}

/* Small uppercase label above a heading */
.section-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--sp-3);
}

/* Pill-shaped eyebrow badge */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-2-soft);
  border: 1px solid var(--accent-2-line);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  margin-bottom: var(--sp-6);
}

.eyebrow--accent {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(255,107,53,0.30);
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* Dateline / category line above an article or legal heading */
.meta {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

/* "← Back to Blog" style return link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: var(--sp-7);
  transition: color 0.2s;
}

.back-link:hover { color: var(--accent); }

/* Small capability / credential chip */
.tag {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--accent-2);
  background: var(--accent-2-soft);
  border: 1px solid var(--accent-2-line);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}

/* ==========================================================================
   Buttons — one primary, one secondary. Size via modifier, never ad hoc.
   ========================================================================== */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.2px;
  padding: var(--sp-4) var(--sp-7);
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s,
              transform 0.15s, box-shadow 0.2s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn-secondary:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-primary:active,
.btn-secondary:active { transform: translateY(0); }

.btn-primary:disabled,
.btn-secondary:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* Size modifiers */
.btn-sm { font-size: var(--fs-base); padding: 10px var(--sp-5); }
.btn-lg { font-size: var(--fs-xl);   padding: 18px var(--sp-8); }

/* Full-width (forms, calculator, tier cards) */
.btn-block { display: flex; width: 100%; }

/* Success state (form submitted) */
.btn-primary.is-success {
  background: var(--success);
  border-color: var(--success);
  box-shadow: none;
}

.btn-primary.is-error {
  background: var(--danger);
  border-color: var(--danger);
  box-shadow: none;
}

/* ==========================================================================
   Nav — one definition, used on all 12 pages
   ========================================================================== */

.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-7);
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo { display: block; flex-shrink: 0; }
.nav-logo img { height: 48px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 600;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--accent); }

.nav-badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   Panels & cards
   ========================================================================== */

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
}

.panel-lg {
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
}

/* Left-bordered emphasis block (legal callouts, calculator insight) */
.callout {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
}

/* Tinted end-of-page conversion block (blog posts, how-it-works) */
.cta-box {
  background: rgba(255,107,53,0.07);
  border: 1px solid rgba(255,107,53,0.25);
  border-radius: var(--radius-lg);
  padding: var(--sp-9) var(--sp-8);
  margin-top: var(--sp-10);
  max-width: var(--measure);
}

.cta-box p {
  font-size: var(--fs-lead);
  color: var(--text);
  line-height: 1.75;
  margin-bottom: var(--sp-6);
}

/* ==========================================================================
   Prose — long-form body copy (4 blog posts, privacy, terms)
   ========================================================================== */

.prose p,
.prose li {
  font-size: var(--fs-lead);
  color: var(--text);
  line-height: 1.85;
  max-width: var(--measure);
}

.prose p { margin-bottom: var(--sp-7); }

.prose h2 {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.25;
  margin: var(--sp-10) 0 var(--sp-5);
  max-width: var(--measure);
}

.prose h3 {
  margin: var(--sp-8) 0 var(--sp-3);
  max-width: var(--measure);
}

.prose ul { padding-left: var(--sp-6); margin-bottom: var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }

.prose strong { color: var(--text-strong); font-weight: 600; }

.prose a { color: var(--accent); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

.prose .callout p:last-child,
.prose p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Forms — contact form (index) and email capture (calculator)
   ========================================================================== */

.form-group { margin-bottom: var(--sp-5); }

.form-group label {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
  margin-bottom: var(--sp-2);
}

.form-group input,
.form-group textarea,
.form-group select,
.field {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--text-strong);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.field::placeholder { color: var(--text-muted); }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.field:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-note {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--sp-3);
}

/* ==========================================================================
   Footer — single centered line (11 of 12 pages; index overrides with a grid)
   ========================================================================== */

.site-footer {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  text-align: center;
  padding: var(--sp-7);
}

.site-footer p { font-size: var(--fs-base); color: var(--text-muted); }
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ==========================================================================
   Responsive
   640px is the single site-wide mobile breakpoint. The 1024px rule below is
   not a layout breakpoint — it only drops the decorative nav badge before it
   can push a full nav onto a second line.
   ========================================================================== */

@media (max-width: 1024px) {
  .nav-badge { display: none; }
}


@media (max-width: 640px) {
  .site-nav { padding: var(--sp-4); gap: var(--sp-3); }
  .nav-logo img { height: 40px; }
  .nav-links { gap: var(--sp-4); }
  .nav-links a { font-size: var(--fs-base); }
  .nav-links .hide-sm { display: none; }
  .nav-badge { display: none; }

  .page-header { padding: var(--sp-9) var(--sp-6) 0; }
  .page-body   { padding: var(--sp-8) var(--sp-6) var(--sp-10); }

  .panel    { padding: var(--sp-6); }
  .panel-lg { padding: var(--sp-6); }
  .cta-box  { padding: var(--sp-7) var(--sp-6); }

  .btn-lg { font-size: var(--fs-lg); padding: var(--sp-4) var(--sp-6); }
}