/* ══ KOVA — the brand palette, built from the logo gradient ════════════════
   Sayed's own colours: linear-gradient(90deg, #666464, #3b2812).
   Those two are a TONAL pair (2.38:1 apart), not a figure/ground pair, and
   #3b2812 measures 1.41:1 on near-black — invisible. On warm bone it measures
   12.44:1. So the ground goes light, the bronze becomes the ink, and the grey
   becomes secondary text. Both of his colours end up load-bearing rather than
   decorative, which is the point.
   Every derived value sits in the bronze's own 32.2° hue family, so the bone is
   warm rather than grey and the whole page reads as one material.            */
:root{
  --black:#F3F1EF; --black-1:#F3F1EF;      /* GROUND — warm bone */
  --black-2:#ECEAE6;                        /* raised surface */
  --black-3:#E5E1DC;                        /* inset / zebra */
  --black-4:#D8D2CA;                        /* hairline rule */
  --black-5:#B0A496;                        /* strong rule — 3:1 non-text */

  --off-white:#3B2812;                      /* INK — Sayed's bronze, 12.44:1 */
  --white:#2B1C0C;                          /* strongest ink */
  --cream:#4F4233;                          /* ink-2, 8.63:1 */
  --gray-2:#4F4233;
  --gray:#666464;                           /* Sayed's grey, 5.22:1 */
  --gray-3:#666464;
  --gray-4:#D8D2CA;

  /* The accent is a copper from the same family, used for links and small
     marks only. The PRIMARY CTA is the bronze itself — the most legible and
     the most on-brand surface available, so no colour needed inventing. */
  --accent:#7C501D;                         /* 6.17:1 on bone */
  --accent-core:#633F14;
  --accent-hi:#8C581D;
  --accent-bright:#8C581D;
  --accent-deep:#3B2812;
  --border-accent:rgba(59,40,18,.16);
  --border-accent-strong:rgba(59,40,18,.34);
  --border:rgba(59,40,18,.10);
  --border-2:rgba(59,40,18,.16);
}

/* The dark theme built its depth from 333 gradients, 271 shadows and 59
   backdrop-filters. On a light ground those read as smears and grey boxes, so
   depth comes from a hairline and a tone instead. */
body{ background:var(--black); color:var(--off-white); }
main *, footer *, header *{ text-shadow:none !important; }
[class*="card"], [class*="tier"], [class*="panel"], section > div{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.btn-primary{
  background:var(--off-white) !important;   /* the bronze, solid */
  color:var(--black) !important;
  box-shadow:none !important; border:1px solid var(--off-white) !important;
}
.btn-primary svg{ stroke:var(--black) !important; }
.btn-ghost, .btn:not(.btn-primary){
  background:transparent !important; color:var(--off-white) !important;
  border:1px solid var(--black-5) !important; box-shadow:none !important;
}
.nav{ background:rgba(243,241,239,.86) !important; border-bottom:1px solid var(--black-4); }

/* ══ THE DELETE PASS ═══════════════════════════════════════════════════════
   The dark theme built depth from 333 gradients, 271 box-shadows and 59
   backdrop-filters sitewide. Recolouring those onto bone turns every glow into
   a grey smudge — which is exactly what the first light render showed. On a
   light ground depth comes from a hairline and a tone, so the decoration is
   removed rather than re-tinted. This is the single biggest visual gain here
   and it deletes code rather than adding any.                               */

/* The four drifting orbs were a dark-room effect. On paper they are dirt. */
.orb, .orb-1, .orb-2, .orb-3, .orb-4{ display:none !important; }
.bg-fixed{ background:var(--black) !important; }

/* This stage was FORCED dark with !important so a transparent canvas would not
   show the white card beneath it. On bone there is nothing to hide from. */
.agc-fx-stage{ background:var(--black-2) !important; border:1px solid var(--black-4); }

/* Cursor-following spotlights read as a smear on light. */
[class*="spotlight"], [data-fx="spotlight"]{ background-image:none !important; }

/* Glows die; structure stays. Keep shadows only where a surface genuinely
   lifts off the page, and make them a tone rather than a blur of black. */
*{ text-shadow:none !important; }
[class*="card"], [class*="tier"], [class*="panel"], [class*="chip"],
.btn, .nav, section > div, article{ box-shadow:none !important; }
[class*="card"], [class*="tier"], [class*="panel"]{
  background:var(--black-2); border:1px solid var(--black-4); border-radius:8px;
}

/* Two radii, not fifteen. Measured on the homepage: 13px x7, 18px x5, 14px x4,
   100px x4, 8px x3, 16px x3, 10px x3, 9px x2 — nobody picks 13 and 14 on
   purpose, that is an accumulated system rather than a designed one. */
[class*="card"], [class*="tier"], [class*="panel"], .btn, input, select, textarea{
  border-radius:8px !important;
}

/* The gradient-clipped display text was built to glow on black. */
.gradient-text, .script-accent, .serif-accent{
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important; -webkit-text-fill-color:var(--accent) !important;
  color:var(--accent) !important; filter:none !important;
  /* THE DOUBLE SPACE IN "the click  is." — visible in every screenshot of the
     hero since the redesign. .gradient-text carried padding-right:.12em so that
     -webkit-background-clip:text would not shear the gradient off the right
     edge of the last glyph. The line above retires that gradient, and
     kova-design.css sets .italic to font-style:normal, so the padding is now
     compensating for an overhang and a clip that both stopped existing —
     7.8px of dead space sitting between the two closing words of the headline.
     Measured: every other word pair in the h1 sits 11px apart; this one sat
     at 11 + 7.8. */
  padding-right:0 !important;
}
/* Same story: a shimmer animating background-position across a background the
   rule above set to none. It animates nothing, on every page, forever. */
.gradient-text{ animation:none !important; background-size:auto !important; }

/* The full-viewport particle canvas is a dark-room effect: faint light specks
   drifting on black. On bone the same specks are grit and the soft falloff is
   a grey smudge behind the headline. It also runs a rAF loop every frame for
   pure decoration, so removing it is a performance win as well as a visual one. */
body > canvas, .bg-fixed canvas, canvas.on{ display:none !important; }

/* Cards were tinted with a gradient to fake depth on black. One tone + one
   hairline does the same job on paper without the smear. */
.service, .pack, .diag-wrap, [class*="card"], [class*="panel"]{
  background:var(--black-2) !important;
  border:1px solid var(--black-4) !important;
}

/* .nav-links::before is a position:fixed 90vw circle built as decoration for
   the MOBILE drawer. Because it is fixed rather than contained, it paints over
   the whole hero at desktop widths too, where the nav is just a row of links.
   It was invisible on black; on bone it is the grey disc behind the headline.
   Every one of these hover/ambient glows goes — depth is a hairline here. */
.nav-links::before, .nav-links::after{ display:none !important; }
.stat::before, .pain-card::before, .service::before,
.diag-wrap::before, .diag-wrap::after, .tier::before, .pack::before{
  display:none !important;
}

/* The raymarched glass mark refracts a plate it paints for itself. On black the
   plate vanished into the ground; on bone it is a large grey disc behind the
   headline. The static letterform fallback already ships and is sharper, so the
   WebGL figure is retired here — which also drops 36KB and a GPU loop. */
[data-agc-glass] canvas{ display:none !important; }
[data-agc-glass]{ background:none !important; }
.hero-mark-fallback{
  display:block !important; opacity:1 !important; visibility:visible !important;
  color:var(--off-white) !important; -webkit-text-fill-color:var(--off-white) !important;
}

/* A full-screen opaque overlay running a synthetic loading animation in front
   of a static HTML page. It delays first paint for effect, it is the reason a
   screenshot at 7s photographed a black rectangle, and it has nothing to load. */
#loader{ display:none !important; }

/* ══ THE FREE-AUDIT CARD — THE ONE DARK-THEME SURVIVOR ═════════════════════
   `.pack-right` shipped as `background:rgba(0,0,0,.65)` with a 20px
   backdrop-filter: a dark-theme card, on the bone ground, holding light-theme
   ink. Measured live before this rule:

       list items / subline   2.16:1     (WCAG AA needs 4.5:1)
       "WHAT YOU WALK AWAY"   3.02:1     at 17px
       "ABOUT 30 MINUTES"     3.57:1     at 11px

   Unreadable, and it is the primary conversion card on the homepage.

   It survived the whole delete pass for a findable reason worth recording:
   every selector in that pass targets `.pack`, `[class*="card"]` or
   `[class*="panel"]`, and `.pack-right` matches none of the three. A
   substring-based sweep will always leave elements like this behind — the
   next audit should enumerate what it CHANGED, not assume coverage.

   Rather than tint it back to bone and make it one more flat panel, the card
   inverts: solid bronze with bone type. That is exactly what `.btn-primary`
   already does, so the page's most important offer now shares the visual
   language of its most important button, and the section becomes the anchor of
   the page instead of a grey box in the middle of it. It also uses nothing but
   Sayed's own two colours, and it measures 12.44:1 rather than 2.16:1. */

.pack-right{
  background:var(--off-white) !important;      /* the bronze, solid */
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:1px solid var(--off-white) !important;
  border-radius:10px !important;
  box-shadow:none !important;
  padding:40px !important;
  color:var(--black) !important;
}

/* On bronze the copper accent falls to about 1.9:1, so every accent inside the
   card becomes bone at a set tint instead. Tints are declared as solid colours
   rather than opacity so the contrast is exactly what it says it is. */
.pack-right .price{
  color:#F3F1EF !important;
  -webkit-text-fill-color:#F3F1EF !important;
  font-size:clamp(56px,7vw,76px) !important;
  font-weight:800 !important;
  letter-spacing:-.04em !important;
  line-height:.92 !important;
  margin-bottom:14px !important;
}
.pack-right .price-sub{
  color:#CFC6B9 !important;                    /* 8.0:1 on the bronze */
  font-size:15px !important;
  line-height:1.5 !important;
  margin-bottom:34px !important;
  max-width:34ch;
}
.pack-right .pack-include > p{
  color:#A99C89 !important;                    /* 5.1:1 — the eyebrow */
  font-size:12px !important;
  letter-spacing:.14em !important;
  font-weight:600 !important;
  margin-bottom:18px !important;
}
.pack-right .pack-include li{
  color:#EDE8E1 !important;                    /* 11.4:1 — this is the content */
  font-size:16px !important;
  line-height:1.45 !important;
  padding:11px 0 11px 26px !important;
}
/* The marker was a 6px hairline that read as a stray dash at this size. */
.pack-right .pack-include li::before{
  content:'' !important;
  position:absolute; left:0; top:1.05em;
  width:12px; height:1px;
  background:#8C7B63 !important;
}
.pack-right .pack-include li + li{ border-top:1px solid rgba(243,241,239,.09); }

.pack-right .pack-meta{
  border-top:1px solid rgba(243,241,239,.16) !important;
  color:#A99C89 !important;
  padding-top:22px !important;
  margin-top:6px !important;
}
.pack-right .pack-meta .live{ color:#CFC6B9 !important; }

/* The left column keeps the bone ground, so the two halves read as one object
   rather than two cards: the panel is the offer, the column is the argument. */
.pack{ align-items:stretch; }

@media (max-width:760px){
  .pack-right{ padding:28px !important; }
  .pack-right .price-sub{ margin-bottom:26px !important; }
}

/* The "yours to keep" marker was a copper dot with an 8px copper glow, pulsing
   on a 1.5s loop — a live-status indicator borrowed for a line that is not a
   status. On the bronze card the copper reads at about 1.9:1, and the glow is
   the same ambient-halo idiom the delete pass removed everywhere else. It
   becomes a bone dot, and it stops pulsing: nothing about "yours to keep" is
   live, so the animation was saying something untrue. */
.pack-right .pack-meta .live::before{
  background:#CFC6B9 !important;
  box-shadow:none !important;
  animation:none !important;
  width:5px !important; height:5px !important;
}