/* ═══════════════════════════════════════════════════════════════════════════
   /tracking-loss-calculator/ — page-specific styles.

   The calculator component itself (.bb-tlc-*) lives in bb-pillar.css because it
   also appears in entry blocks on service pages. This file styles only the
   sections unique to this page.

   Astra applies a global text-transform:capitalize to h1-h6, which corrupts
   prose in every heading. Opted out per-class below, per CLAUDE.md section 11.
   Dark-section headings need an explicit white override because globals.css
   forces dark H2 via .elementor-widget-html h2.
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-tlc-hero h1, .bb-tlc-hero h2, .bb-tlc-hero h3,
.bb-tlc-method-sec h2, .bb-tlc-method-sec h3,
.bb-tlc-capture h2, .bb-tlc-mech-head, .bb-tlc-mech h4 { text-transform: none !important; }

/* ---- S1 hero, dark ---- */
/* #000000, not #0B121B. Measured 2026-08-30: 26 page heroes on this site are
   pure black and none use #0B121B. Navy was unique to this page, and it exposed
   a separate latent defect: the header logo is an opaque black rectangle with no
   alpha, invisible everywhere else only because every header ground is black. */
.bb-tlc-hero { background: #000000 !important; padding: 84px 0 96px !important; }
.bb-tlc-hero .bb-label { color: #FF6A00 !important; }
.bb-tlc-hero h1 {
  color: #FFFFFF !important; font-size: clamp(2rem, 4.4vw, 3.1rem) !important;
  line-height: 1.1 !important; margin: 10px 0 14px !important; font-weight: 800 !important; }
.bb-tlc-hero .bb-page-hero-hook {
  color: #FFFFFF !important; font-weight: 700 !important; font-size: 1.12rem !important;
  line-height: 1.5 !important; max-width: 46ch !important;
  /* auto side margins, not 0. This file loads AFTER bb-pillar.css and both rules
     are (0,2,0) with !important, so a `margin: 0 0 14px` here silently beat the
     centring rule there and left the hook 323px left of centre at 1440 while its
     TEXT still read as centred. Centre the box here, where the conflict is. */
  margin: 0 auto 14px !important; }
.bb-tlc-hero .bb-lead {
  color: rgba(255,255,255,0.82) !important; max-width: 68ch !important; margin: 0 0 6px !important; }

/* ---- S2 methodology, light. A feature of the page, not fine print. ---- */
.bb-tlc-method-sec { background: #FFFFFF !important; padding: 96px 0 !important; }
.bb-tlc-method-sec .bb-label { color: #C24A00 !important; }
.bb-tlc-method-sec .bb-lead { max-width: 74ch !important; }
/* five assumption cards since the 2026-08-31 rulings: 2x2 plus the fifth
   (cumulative spend) spanning the full row, because each card carries a
   paragraph and more columns would starve them */
.bb-tlc-assume-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 30px 0 0; }
.bb-tlc-assume--wide { grid-column: 1 / -1; }
/* the distortion identity, stated in visible prose after the grid (owner note
   2026-08-31: one number two readings is the page's credibility argument) */
.bb-tlc-method-sec .bb-tlc-identity {
  font-size: 1.02rem; line-height: 1.7; color: rgba(0,0,0,0.65);
  max-width: 74ch; margin: 30px 0 0; }
.bb-tlc-method-sec .bb-tlc-identity strong { color: #111827; }
.bb-tlc-assume {
  background: #F7F8FA !important; border: 1px solid var(--bb-border) !important;
  border-top: 3px solid #C24A00 !important; border-radius: 0 0 10px 10px !important;
  padding: 22px !important; }
.bb-tlc-assume-idx {
  display: block !important; font-size: 0.78rem !important; font-weight: 800 !important;
  color: #C24A00 !important; letter-spacing: .08em !important; margin-bottom: 8px !important; }
.bb-tlc-method-sec .bb-tlc-assume h3 {
  font-size: 1rem !important; line-height: 1.35 !important; color: #111827 !important;
  margin: 0 0 9px !important; font-weight: 700 !important; }
.bb-tlc-method-sec .bb-tlc-assume p {
  font-size: 0.9rem !important; color: #4F5B68 !important; line-height: 1.65 !important; margin: 0 !important; }

/* ---- S3 mechanisms ---- */
.bb-tlc-mech-group { margin-top: 34px; }
.bb-tlc-mech-head {
  font-size: 1.12rem !important; color: #111827 !important; font-weight: 700 !important;
  margin: 0 0 6px !important; }
.bb-tlc-mech-head em { color: #C24A00 !important; font-style: normal !important; }
.bb-tlc-mech-intro {
  font-size: 0.92rem !important; color: #4F5B68 !important; line-height: 1.65 !important;
  margin: 0 0 18px !important; max-width: 74ch !important; }
.bb-tlc-mech {
  background: #FFFFFF !important; border: 1px solid var(--bb-border) !important;
  border-radius: 10px !important; padding: 20px 22px !important; margin-bottom: 14px !important; }
.bb-tlc-mech h4 {
  font-size: 1rem !important; color: #111827 !important; font-weight: 700 !important;
  margin: 0 0 7px !important; }
.bb-tlc-mech > p {
  font-size: 0.92rem !important; color: #4F5B68 !important; line-height: 1.65 !important; margin: 0 !important; }

/* ---- S4 capture, dark so the pre-FAQ section is not white ---- */
.bb-tlc-capture { background: #0B121B !important; padding: 90px 0 !important; }
.bb-tlc-capture .bb-label { color: #FF6A00 !important; }
.bb-tlc-capture h2 {
  color: #FFFFFF !important; font-size: clamp(1.6rem, 3.2vw, 2.35rem) !important;
  line-height: 1.18 !important; margin: 10px 0 14px !important; }
.bb-tlc-capture h2 em { color: #FF6A00 !important; font-style: normal !important; }
.bb-tlc-capture .bb-lead { color: rgba(255,255,255,0.82) !important; max-width: 70ch !important; }
.bb-tlc-capture-actions { margin-top: 24px !important; }
.bb-tlc-capture-note {
  margin-top: 12px !important; font-size: 0.82rem !important;
  color: rgba(255,255,255,0.7) !important; }

/* ---- bb-server-dec-block, required in the page CSS file ---- */
.bb-server-dec-block{background:#fff8f2!important;border:1px solid rgba(255,106,0,0.15)!important;border-left:3px solid #FF6A00!important;border-radius:0 10px 10px 0!important;padding:20px 24px!important;margin-top:30px!important;}
.bb-server-dec-block p{font-size:0.9rem!important;color:#374151!important;line-height:1.65!important;margin:0!important;font-weight:500!important;}

@media (max-width: 900px) {
  .bb-tlc-assume-grid { grid-template-columns: 1fr; gap: 16px; }
  .bb-tlc-hero { padding: 60px 0 !important; }
  .bb-tlc-method-sec, .bb-tlc-capture { padding: 60px 0 !important; }
}

@media (max-width: 900px) {
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREATHING ROOM + the centred-hero corrections.
   ═══════════════════════════════════════════════════════════════════════════ */

/* bb-pillar.css:801 gives the hook a 3px orange border-left. That reads as a
   quote rule on a left-aligned hero and as a stray mark beside centred text. */
.bb-tlc-hero--center .bb-page-hero-hook {
  border-left: 0 !important; padding-left: 0 !important; margin-bottom: 18px !important; }

/* the commercial line under the hook: what they get, and what it costs them */
.bb-tlc-hero--center .bb-tlc-hero-sub {
  color: rgba(255,255,255,0.72) !important; font-size: 0.95rem !important;
  line-height: 1.6 !important; max-width: 54ch !important;
  margin: 0 auto 6px !important; }

/* the card was tight against the hook and dense inside it */
.bb-tlc { margin-top: 52px !important; padding: 38px !important; }
.bb-tlc-head { margin-bottom: 30px !important; }
.bb-tlc-grid { gap: 46px !important; }
.bb-tlc .bb-tlc-field { margin-bottom: 28px !important; }
.bb-tlc .bb-tlc-field:last-child { margin-bottom: 0 !important; }
.bb-tlc .bb-tlc-hint { margin-top: 7px !important; }
.bb-tlc-out { padding: 28px !important; }
.bb-tlc .bb-tlc-hero-desc { margin-bottom: 10px !important; }
.bb-tlc-bars { margin-top: 24px !important; gap: 14px !important; }
.bb-tlc-rows { margin-top: 22px !important; }
.bb-tlc-row { padding: 12px 0 !important; }

/* THE VISUAL ANSWER. No new diagram: the bars ARE the diagram, and in the
   example they were grey on grey, so the gap, which is the entire point, was
   the least visible thing on screen. A muted orange makes it read while the
   dashed border, grey chip and grey hero figure still say "example". */
.bb-tlc-out--example .bb-tlc-bar-gap { background: rgba(255,106,0,0.55) !important; }
.bb-tlc-out--example .bb-tlc-bar-matched { background: #CBD1D9 !important; }
.bb-tlc .bb-tlc-bar-cap { margin-top: 6px !important; font-weight: 600 !important; }

@media (max-width: 900px) {
  .bb-tlc { margin-top: 36px !important; padding: 24px !important; }
  .bb-tlc-grid { gap: 30px !important; }
  .bb-tlc-out { padding: 22px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLOUR AS EMPHASIS INSIDE THE RESULT. Three accents, no more.

   The discipline: if everything is coloured, nothing is emphasised. Only the
   figures a visitor should leave with carry accent. Everything supporting them
   stays #111827 or #4F5B68, and the bar NUMBERS stay neutral on purpose because
   the bars themselves already carry the orange.

     #FF6A00   the headline figure. One per result
     #C24A00   the gap, and the annual scale. AA-safe orange on light, 4.62:1
     #1B7F4B   reserved EXCLUSIVELY for "you reconcile". Green never appears on
               a result that found a gap, so green always means all clear
   ═══════════════════════════════════════════════════════════════════════════ */

/* the gap is the entire point of the bars and it was muted grey */
.bb-tlc .bb-tlc-bar-cap {
  color: #C24A00 !important; font-weight: 800 !important; font-size: 0.82rem !important; }
/* the annual figure is the scale of the monthly one */
.bb-tlc .bb-tlc-row--sum b { color: #C24A00 !important; }
/* the row that carries the relationship stays neutral: it supports, not leads */
.bb-tlc .bb-tlc-row b { color: #111827 !important; }
.bb-tlc .bb-tlc-row--sum b { color: #C24A00 !important; }

/* green means one thing only, and it is good news */
.bb-tlc .bb-tlc-verdict.bb-tlc-ok { color: #1B7F4B !important; }

/* the example keeps every accent muted, so orange still means "your numbers" */
.bb-tlc-out--example .bb-tlc-bar-cap { color: #C24A00 !important; }
.bb-tlc-out--example .bb-tlc-row--sum b { color: #C24A00 !important; }

/* ══ MOBILE PASS 2026-08-31 ═════════════════════════════════════════════════
   Measured at 425: the hero stacked 380px of type before the calculator started,
   the intro paragraph ran to six lines, and 80px of dead black sat under the card.
   Note the root font-size is 18px, so every rem value here is 12% larger than it
   reads. The result figure deliberately stays 36px: it should outrank the H1 on a
   calculator page.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .bb-tlc-hero { padding: 120px 0 40px !important; }
  .bb-tlc-hero h1 { font-size: 1.75rem !important; line-height: 1.15 !important; margin: 8px 0 12px !important; }
  .bb-tlc-hero .bb-page-hero-hook { font-size: 0.98rem !important; line-height: 1.5 !important; margin-bottom: 14px !important; }
  .bb-tlc-hero--center .bb-tlc-hero-sub { font-size: 0.84rem !important; line-height: 1.6 !important; }
  .bb-tlc { margin-top: 26px !important; padding: 20px 18px !important; }
  .bb-tlc-title { font-size: 1.15rem !important; line-height: 1.3 !important; }
  .bb-tlc-sub { font-size: 0.85rem !important; line-height: 1.6 !important; }
  .bb-tlc-grid { gap: 26px !important; }
  .bb-tlc .bb-tlc-field { margin-bottom: 20px !important; }
  .bb-tlc .bb-tlc-hint { font-size: 0.72rem !important; line-height: 1.5 !important; }
  .bb-tlc-out { padding: 18px !important; }
  .bb-tlc .bb-tlc-eg-chip { font-size: 0.66rem !important; padding: 3px 8px !important; margin-bottom: 10px !important; }
  .bb-tlc-bars { margin-top: 18px !important; }
  .bb-tlc-rows { margin-top: 16px !important; }
  .bb-tlc-method-sec, .bb-tlc-capture { padding-top: 56px !important; padding-bottom: 56px !important; }
}