/* ==========================================================================
   EverLabs Design — "Brand blue" theme
   Layers on top of site.css. Overrides design tokens and a handful of type
   metrics only; every layout rule still comes from site.css, so the two
   themes can never drift structurally.

   Colour: sampled straight out of logo.png —
     #20A0F0 bright blue · #0060C0 deep blue · #203040 dark slate
   Type: Outfit (rounded geometric) for headings, Plus Jakarta Sans for text.
   ========================================================================== */

:root {
  /* ---- ink: the logo's dark slate, deepened for contrast ---- */
  --ink:        #0E1B2A;
  --ink-2:      #223549;
  --ink-3:      #4E647C;
  --ink-4:      #8399B0;

  /* ---- surfaces: cool near-whites instead of warm paper ---- */
  --paper:      #F7FAFD;
  --paper-2:    #E9F2FB;
  --paper-3:    #D9E9F8;
  --white:      #FFFFFF;
  --line:       #DBE7F3;
  --line-2:     #BDD2E7;

  /* ---- the logo blue, doing the work ---- */
  --accent:     #1094EE;
  --accent-dk:  #0A6FC0;
  --accent-lt:  #E2F1FE;
  --accent-deep:#064B8E;

  /* ---- secondary: a lighter sky, used where brass was ---- */
  --brass:      #38BDF8;
  --brass-lt:   #E0F4FE;

  /* ---- teal reads better than green next to this blue ---- */
  --green:      #0E9488;
  --green-lt:   #DEF4F2;

  /* ---- rounded geometric type ---- */
  --sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Outfit', 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;

  /* softer corners suit the rounder type */
  --radius:     16px;
  --radius-lg:  26px;
  --radius-sm:  11px;
}

/* ---- headings: a geometric sans needs different metrics to a serif ---- */
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.028em;
  font-variation-settings: normal;
}
h1 { font-size: clamp(2.3rem, 5.8vw, 3.85rem); line-height: 1.05; }
h2 { font-size: clamp(1.85rem, 4vw, 2.8rem);  line-height: 1.1; }
h3 { line-height: 1.25; letter-spacing: -0.02em; }

body { font-size: 1.05rem; letter-spacing: -0.005em; }

/* Outfit has no true italic on Google Fonts — don't fake a slant. */
.ital { font-style: normal; font-weight: 500; color: var(--accent); }

/* ---- hero: cool blue blooms rather than warm ones ---- */
.hero::before {
  background: radial-gradient(circle at 30% 40%, rgba(56,189,248,.18), transparent 62%);
}
.hero::after {
  background: radial-gradient(circle at 60% 35%, rgba(16,148,238,.16), transparent 60%);
}

/* ---- the underline stroke becomes the bright logo blue ---- */
.stroke {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 4px;
}

/* Stars stay amber — a blue star doesn't read as a rating. */
.topbar .stars svg,
.hero-meta .stars svg,
.quote .stars svg,
.offer-pill svg { fill: #F5B301; }

/* ---- eyebrow rule picks up the accent ---- */
.eyebrow::before { background: var(--accent); }

/* ---- sticky chrome: site.css hardcodes the warm paper tint here, which
        reads as cream against a cool palette. Cool it down. ---- */
.site-head { background: rgba(247,250,253,.88); }
.mobile-bar { background: rgba(247,250,253,.94); }

/* ---- buttons: lead with the brand blue, not black ---- */
.btn--primary,
.btn--accent {
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 16px rgba(16,148,238,.28);
}
.btn--primary:hover,
.btn--accent:hover {
  background: var(--accent-dk);
  box-shadow: 0 8px 26px rgba(16,148,238,.36);
}

/* ---- dark sections get a blue cast rather than neutral black ---- */
.section--ink, .cta-band, .site-foot, .topbar {
  background: linear-gradient(168deg, #0E1B2A 0%, #10263D 100%);
}
.cta-band::before {
  background: radial-gradient(circle at 60% 50%, rgba(16,148,238,.5), transparent 62%);
}
.page-hero--photo { background: #0E1B2A; }
.page-hero-bg::after {
  background: linear-gradient(105deg, rgba(14,27,42,.93) 0%, rgba(14,27,42,.64) 55%, rgba(11,38,62,.46) 100%);
}

/* ---- step numbers: blue chip, white numeral ---- */
.step { border-top-color: var(--accent); }
.step::before { background: var(--accent); color: #fff; border-radius: 0 0 8px 0; }

/* ---- price flag + featured card follow the accent ---- */
.price--feat { border-color: var(--accent); }
.price-flag { background: var(--accent); color: #fff; }

/* ---- pain quotes: blue rule instead of brass ---- */
.pain { border-left-color: var(--accent); }

/* ---- work tag pill ---- */
.work-tag { background: rgba(255,255,255,.95); color: var(--accent-deep); }

/* ---- browser mock chrome, cooled down ---- */
.mock-bar { background: #E7EFF7; }
.mock-bar i { background: #C2D3E4; }

/* ---- quote avatars use the brand blue ---- */
.quote-av { background: var(--accent); }

/* ---- links in dark sections ---- */
.section--ink .arrow-link, .cta-band .or a:hover, .foot-nap a:hover, .topbar a:hover { color: #7DD0FF; }
.foot-links a:hover, .site-foot a:hover { color: #fff; }

/* ---- offer pill ---- */
.offer-pill { background: var(--accent-lt); color: var(--accent-deep); border-color: rgba(16,148,238,.3); }

/* ---- article callout ---- */
.callout { background: var(--accent-lt); border-left-color: var(--accent); }
.article-cta { background: linear-gradient(168deg, #0E1B2A 0%, #10263D 100%); }

/* ---- 404 numeral ---- */
.err-page .code { color: var(--line-2); }