/* CALIBER interface system (v101). Loaded last on every CALIBER page, after caliber-identity.css.
   One button system and one set of interactive states for the whole site:
   - Primary: CALIBER Violet with a luminous edge. White label on #7C42E2-#6A33CC (5.6-7.1:1).
   - Secondary: obsidian/graphite with a violet hairline border and a silver label (14.9:1).
   - Gold stays for prestige only: eyebrows, labels, prices, stats, icons. It is no longer a button fill.
   - Active/selected states (tabs, chips, field focus) are violet; focus rings are violet-hi (8.8:1 on the page).
   Shape, padding, type and motion come from caliber-aura.css (13px radius, 48px min height, Inter 600, the
   hover lift and sheen); this file only re-colours them, so every page keeps its layout and behaviour. */
:root {
  --sys-violet-top: #9A63F7;
  --sys-violet: #7C42E2;
  --sys-violet-mid: #6A33CC;
  --sys-violet-low: #5A28B4;
  --sys-violet-hi: #C69BFF;
  --sys-violet-line: rgba(178, 120, 255, .42);
  --sys-violet-glow: rgba(164, 92, 255, .55);
  --sys-silver: #EDE6F8;
  --sys-fill: linear-gradient(180deg, var(--sys-violet-top) 0%, var(--sys-violet) 34%, var(--sys-violet-mid) 72%, var(--sys-violet-low) 100%);
  --sys-graphite: linear-gradient(180deg, rgba(30, 28, 40, .94), rgba(16, 16, 22, .96));
  --sys-rest: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(30, 8, 70, .45),
    0 0 0 1px rgba(164, 92, 255, .22), 0 8px 22px -10px rgba(164, 92, 255, .7), 0 8px 20px -10px rgba(0, 0, 0, .75);
  --sys-lit: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(30, 8, 70, .4),
    0 0 0 1px rgba(214, 182, 255, .6), 0 0 22px 2px rgba(164, 92, 255, .55), 0 12px 28px -8px rgba(77, 41, 112, .95);
  --sys-press: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(30, 8, 70, .5),
    0 0 0 1px rgba(214, 182, 255, .75), 0 0 10px 1px rgba(164, 92, 255, .65), 0 4px 10px -4px rgba(77, 41, 112, 1);
  --cta-focus: var(--sys-violet-hi);
}

/* ================================================================ PRIMARY */
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary),
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary):is(:hover, :active, :focus-visible) {
  background: linear-gradient(rgba(255, 255, 255, var(--cta-glint, 0)), rgba(255, 255, 255, var(--cta-glint, 0))), var(--sys-fill) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid rgba(214, 182, 255, .6) !important;
  text-shadow: 0 1px 1px rgba(30, 8, 70, .45);
}
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary) { box-shadow: var(--sys-rest) !important; }
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary)::before {
  background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .22) 44%, rgba(236, 222, 255, .3) 50%, rgba(255, 255, 255, .12) 58%, transparent 70%) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary):hover:not(:disabled):not([aria-disabled="true"]) {
    --cta-glint: .07; background: linear-gradient(rgba(255, 255, 255, var(--cta-glint, 0)), rgba(255, 255, 255, var(--cta-glint, 0))), var(--sys-fill) !important; border-color: rgba(230, 210, 255, .9) !important; box-shadow: var(--sys-lit) !important; animation: none;
  }
}
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary):active:not(:disabled):not([aria-disabled="true"]) {
  --cta-glint: 0; background: linear-gradient(rgba(255, 255, 255, var(--cta-glint, 0)), rgba(255, 255, 255, var(--cta-glint, 0))), var(--sys-fill) !important; box-shadow: var(--sys-press) !important;
}
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary):focus-visible { box-shadow: var(--sys-lit) !important; }

/* ================================================================ SECONDARY */
html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin, .cp-btn--secondary) {
  background: var(--sys-graphite) !important;
  color: var(--sys-silver) !important; -webkit-text-fill-color: var(--sys-silver) !important;
  border: 1px solid var(--sys-violet-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 16px -10px rgba(0, 0, 0, .8) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin, .cp-btn--secondary):hover:not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(180deg, rgba(38, 32, 54, .96), rgba(20, 18, 28, .96)) !important;
    color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
    border-color: rgba(198, 155, 255, .8) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 14px rgba(164, 92, 255, .38), 0 8px 20px -8px rgba(77, 41, 112, .85) !important;
  }
}
html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin, .cp-btn--secondary):active:not(:disabled):not([aria-disabled="true"]) {
  border-color: rgba(198, 155, 255, .85) !important; box-shadow: 0 0 0 1px rgba(198, 155, 255, .35), 0 0 8px rgba(164, 92, 255, .45) !important;
}

/* ================================================================ FOCUS (keyboard) */
html body :is(.nx-btn, .btn, .nx-nav-btn, .cp-btn, .caliber-menu-btn, .hiw-btn, .cv-task):focus-visible {
  outline: 2px solid var(--sys-violet-hi) !important; outline-offset: 3px !important;
}

/* ================================================================ PLACES WITH THEIR OWN BUTTON RULES */
/* Workspace: the restrained primaries keep no sheen/lift, now in violet; the charged actions keep their charge. */
html.cw-app #dashboardView .btn.primary:not(.cw-charge):hover { border-color: rgba(230, 210, 255, .9) !important; box-shadow: var(--sys-rest) !important; }
html.cw-app .cw-charge:not(:disabled):not([aria-busy="true"]):is(:hover, :focus-visible) { animation: none !important; box-shadow: var(--sys-lit) !important; }
html.cw-app .cw-charge:not(:disabled):not([aria-busy="true"]):active { box-shadow: var(--sys-press) !important; }
html.cw-app .cw-charge:not(:disabled):not([aria-busy="true"]):is(:hover, :focus-visible)::before {
  background: linear-gradient(105deg, transparent 26%, rgba(255, 255, 255, .24) 44%, rgba(236, 222, 255, .32) 50%, rgba(255, 255, 255, .12) 58%, transparent 72%) !important;
}
/* Sign-in / Create Account switch: the selected tab in violet. */
html.caliber-auth-page #authView .tabs button.active {
  background: var(--sys-fill) !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  border-color: rgba(214, 182, 255, .6) !important; box-shadow: 0 0 14px -2px var(--sys-violet-glow) !important;
}
/* Assist download: the page's lead action, the same violet primary held at a slightly brighter glow. */
html body .btn.primary.assist-cta { border-color: rgba(214, 182, 255, .75) !important; box-shadow: var(--sys-lit) !important; }
html.assist-on-mobile body .btn.primary.assist-cta { box-shadow: var(--sys-rest) !important; }
/* Hero dashboard "View Details": the standard primary at the mock-up's scale. */
html body .nx-device .nx-phone .nx-btn { border-color: rgba(214, 182, 255, .8) !important; box-shadow: var(--sys-lit) !important; }
html body .nx-hero-actions .nx-btn.gold:not(:hover):not(:active):not(:focus-visible) { box-shadow: var(--sys-rest) !important; }

/* ================================================================ FIELDS */
html body :is(.nx-field input, .nx-field select, .field input, .field select, .field textarea) { border-color: rgba(178, 120, 255, .24); }
html body :is(.nx-field input, .nx-field select, .field input, .field select, .field textarea):hover { border-color: rgba(178, 120, 255, .42); }
html body :is(.nx-field input, .nx-field select, .field input, .field select, .field textarea):focus,
html.caliber-auth-page #authView :is(input, select, textarea):focus {
  outline: none; border-color: var(--sys-violet-hi) !important;
  box-shadow: 0 0 0 3px rgba(164, 92, 255, .2), 0 0 18px -4px var(--sys-violet-glow) !important;
}
html.caliber-auth-page #authView :is(input, select, textarea) { border-color: rgba(178, 120, 255, .26) !important; }
html.caliber-auth-page #authView :is(input, select, textarea):hover { border-color: rgba(178, 120, 255, .45) !important; }

/* ================================================================ HOME SEARCH PANEL: the dashboard's surface */
html body .nx-search {
  background: radial-gradient(70% 120% at 100% 0%, rgba(164, 92, 255, .1), transparent 60%), linear-gradient(180deg, rgba(27, 25, 37, .95), rgba(14, 15, 20, .97)) !important;
  border: 1px solid rgba(178, 120, 255, .32) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 28px rgba(164, 92, 255, .14), 0 30px 70px -30px rgba(0, 0, 0, .8) !important;
}
html body .nx-tabs { border-bottom: 1px solid rgba(178, 120, 255, .16); }
html body .nx-tabs div { color: #B9B3C6; }
html body .nx-tabs div svg { color: var(--nx-gold); }
html body .nx-tabs div:first-child {
  color: #FFFFFF; border-bottom: 2px solid transparent !important;
  background: linear-gradient(180deg, transparent 55%, rgba(164, 92, 255, .12)), linear-gradient(90deg, transparent, var(--id-violet, #A45CFF) 20%, #E6D4FF 50%, var(--id-violet, #A45CFF) 80%, transparent) bottom / 100% 2px no-repeat;
}
html body .nx-tabs div:first-child svg { color: var(--sys-violet-hi); }
html body .nx-chip { background: rgba(164, 92, 255, .1); border-color: rgba(178, 120, 255, .3); color: #E4DDEE; }
html body .nx-popular b { color: #B9B3C6; }
html body .nx-search-row .nx-btn { min-height: 52px; }

@media (forced-colors: active) {
  html body :is(.nx-btn, .btn, .nx-nav-btn, .cp-btn) { border: 1px solid ButtonText !important; forced-color-adjust: auto; }
}

/* ================================================================ HERO MOCK-UP LABELS
   The dashboard is an illustration: say so on both devices, quietly, so the figures never read as real results. */
html body .nx-device .nx-sample {
  font: 600 9px/1 var(--font-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase;
  color: #D9CCEE; padding: 4px 8px; border-radius: 999px; border: 1px dashed rgba(198, 155, 255, .55); background: rgba(164, 92, 255, .08);
  align-self: center; white-space: nowrap;
}
html body .nx-device .nx-sample--phone { display: inline-block; margin-top: 2px; font-size: 8px; padding: 3px 7px; }
html body .nx-device .nx-phone-icon { margin-top: 10px; }

/* Progress energy: once per hero surge (same 7 s clock) a glint runs the length of the bar toward its lit head. */
html body .nx-device .nx-progress i {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent) -60% 0 / 34% 100% no-repeat,
    linear-gradient(90deg, #5B2EC2, #A45CFF 68%, #E6D4FF);
  animation: cal-progress-fill 1.8s var(--id-ease) .5s both, cal-progress-glint 7s var(--id-ease) .4s infinite;
}
@keyframes cal-progress-glint { 0%, 8% { background-position: -60% 0, 0 0; } 30%, 100% { background-position: 160% 0, 0 0; } }
.nx-hero.caliber-atmos-paused .nx-device .nx-progress i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { html body .nx-device .nx-progress i { animation: none !important; } }
/* The label is a third item in the dashboard header: let the header wrap so it never widens the hero grid on phones. */
html body .nx-device .nx-dash-head { flex-wrap: wrap; align-items: center; gap: 6px 10px; }
html body .nx-hero-grid > * { min-width: 0; }
@media (max-width: 480px) { html body .nx-device .nx-dash-head > b { flex-basis: 100%; } }

/* ================================================================ NAVIGATION: selected and hover states in violet */
.cp-nav a[aria-current="page"]::after { background: var(--id-trail, var(--sys-violet-hi)) !important; box-shadow: 0 0 8px rgba(164, 92, 255, .6); }
html body :is(.cp-header, .nx-header) .caliber-menu-btn { border-color: var(--sys-violet-line) !important; }
html body :is(.cp-header, .nx-header) .caliber-menu-btn:is(:hover, [aria-expanded="true"]) { border-color: rgba(198, 155, 255, .8) !important; box-shadow: 0 0 12px rgba(164, 92, 255, .35); }
/* "← CALIBER Home" on the sign-in pages: a secondary control. */
html.caliber-auth-page .caliber-access-home { border-color: var(--sys-violet-line) !important; background: var(--sys-graphite) !important; color: var(--sys-silver) !important; }
html.caliber-auth-page .caliber-access-home:hover { color: #FFFFFF !important; border-color: rgba(198, 155, 255, .8) !important; box-shadow: 0 0 14px rgba(164, 92, 255, .38); }

/* ================================================================ ACCOUNT TABS AND TRACKER FILTERS */
/* Overview / Applications / Subscription: the selected tab is violet, like every other selected state. */
html body.cp--account .account-tabs a.active {
  color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; background: var(--sys-fill); border-color: rgba(214, 182, 255, .6);
  box-shadow: 0 0 14px -2px var(--sys-violet-glow);
}
html body.cp--account .account-tabs a:not(.active) { border-color: var(--sys-violet-line); }
/* Application filters (All / CALIBER can apply / My Applications / To Review): wrap on phones instead of
   squeezing a label wider than its button. */
html.cw-app #trackerFilterBar { flex-wrap: wrap; }
html.cw-app #trackerFilterBar .btn { flex: 0 0 auto; min-height: 44px; }

/* ================================================================ PROGRESS: in-process work is violet (gold is kept for success) */
html.cw-app #dashboardView .progress i { background: linear-gradient(90deg, var(--sys-violet-low), var(--id-violet, #A45CFF) 70%, #E6D4FF) !important; box-shadow: 0 0 8px rgba(164, 92, 255, .55); }
.cw-progress i { background: linear-gradient(90deg, var(--sys-violet-low), var(--id-violet, #A45CFF), #D6B2FF); }
.cw-drop[data-state="processing"] .cw-progress i {
  background: linear-gradient(90deg, var(--sys-violet-low), #A45CFF 40%, #F0E6FF 50%, #A45CFF 60%, var(--sys-violet-low));
  background-size: 300% 100%;
}

/* ================================================================ SILVER RIM: buttons that stand out of the surface
   Every button wears a polished silver edge (a metal gradient on the border box), a thin dark groove just inside it
   (the indent), a lit top bevel and a shaded bottom bevel, and a short extrusion underneath, so it reads as a raised,
   machined control. The violet / graphite fills stay inside the rim. Hover brightens the rim; press sinks it. */
:root {
  --sys-rim: linear-gradient(180deg, #FFFFFF 0%, #E4E6EE 22%, #9EA1B0 50%, #6B6E7D 56%, #C9CBD6 80%, #F4F5F8 100%);
  --sys-rim-hi: linear-gradient(180deg, #FFFFFF 0%, #F3F0FF 25%, #B9B2D6 50%, #8C86A6 56%, #E2DCF5 80%, #FFFFFF 100%);
  --sys-rim-dim: linear-gradient(180deg, #D9DBE3 0%, #A4A7B4 30%, #5C5F6E 55%, #8E91A0 80%, #C4C6D1 100%);
  --sys-bevel: inset 0 0 0 1.5px rgba(16, 4, 40, .85), inset 0 3px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(18, 6, 44, .5);
  --sys-lift: 0 2px 0 #3A3846, 0 4px 0 #1A1920, 0 10px 18px -6px rgba(0, 0, 0, .9);
}
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary), html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary):is(:hover, :active, :focus-visible), html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary):hover:not(:disabled):not([aria-disabled="true"]), html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary):active:not(:disabled):not([aria-disabled="true"]) {
  border: 2.5px solid transparent !important;
  background: linear-gradient(rgba(255, 255, 255, var(--cta-glint, 0)), rgba(255, 255, 255, var(--cta-glint, 0))) padding-box, var(--sys-fill) padding-box, var(--sys-rim) border-box !important;
}
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary) { box-shadow: var(--sys-bevel), var(--sys-lift), 0 8px 22px -10px rgba(164, 92, 255, .7) !important; }
html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin, .cp-btn--secondary), html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin, .cp-btn--secondary):is(:hover, :active, :focus-visible), html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin, .cp-btn--secondary):hover:not(:disabled):not([aria-disabled="true"]), html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin, .cp-btn--secondary):active:not(:disabled):not([aria-disabled="true"]) {
  border: 2.5px solid transparent !important;
  background: var(--sys-graphite) padding-box, var(--sys-rim-dim) border-box !important;
}
html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin, .cp-btn--secondary) { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .75), inset 0 3px 0 rgba(255, 255, 255, .1), inset 0 -3px 0 rgba(0, 0, 0, .4), var(--sys-lift) !important; }
@media (hover: hover) and (pointer: fine) {
  html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary):hover:not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(rgba(255, 255, 255, var(--cta-glint, 0)), rgba(255, 255, 255, var(--cta-glint, 0))) padding-box, var(--sys-fill) padding-box, var(--sys-rim-hi) border-box !important;
    box-shadow: var(--sys-bevel), var(--sys-lift), 0 0 22px 2px rgba(164, 92, 255, .55), 0 12px 28px -8px rgba(77, 41, 112, .95) !important;
  }
  html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin, .cp-btn--secondary):hover:not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(180deg, rgba(38, 32, 54, .96), rgba(20, 18, 28, .96)) padding-box, var(--sys-rim) border-box !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .3), var(--sys-lift), 0 0 14px rgba(164, 92, 255, .38) !important;
  }
}
/* press: the button sinks into its rim */
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary):active:not(:disabled):not([aria-disabled="true"]) { box-shadow: inset 0 0 0 1px rgba(20, 6, 48, .7), inset 0 2px 4px rgba(18, 6, 44, .6), 0 1px 0 #24222C, 0 0 10px 1px rgba(164, 92, 255, .6) !important; }
html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin, .cp-btn--secondary):active:not(:disabled):not([aria-disabled="true"]) { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 2px 4px rgba(0, 0, 0, .55), 0 1px 0 #24222C !important; }
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create, .cp-btn--primary):focus-visible, html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin, .cp-btn--secondary):focus-visible { box-shadow: var(--sys-bevel), var(--sys-lift), 0 0 18px rgba(164, 92, 255, .5) !important; }
/* places with their own glow keep it, on top of the rim */
html body .btn.primary.assist-cta, html body .nx-device .nx-phone .nx-btn { box-shadow: var(--sys-bevel), var(--sys-lift), 0 0 22px 2px rgba(164, 92, 255, .55) !important; }
html.caliber-auth-page #authView .tabs button.active, html body.cp--account .account-tabs a.active {
  border: 2.5px solid transparent !important; background: var(--sys-fill) padding-box, var(--sys-rim) border-box !important;
  box-shadow: var(--sys-bevel), 0 0 14px -2px var(--sys-violet-glow) !important;
}
/* busy actions in the workspace keep their quiet processing look (no rim) */
html.cw-app .cw-charge[aria-busy="true"], html.cw-app .cw-charge.is-processing { background: linear-gradient(180deg, #1D1A26, #15131C) !important; border: 1px solid rgba(136, 87, 195, .9) !important; }
html body :is(.nx-btn, .btn, .nx-nav-btn, .cp-btn):is(:disabled, [aria-disabled="true"]) { box-shadow: none !important; }
@media (forced-colors: active) { html body :is(.nx-btn, .btn, .nx-nav-btn, .cp-btn) { background: ButtonFace !important; border: 1px solid ButtonText !important; } }

/* ================================================================ v104 small fixes (measured critique)
   Breadcrumb links reach the 24px minimum target; the home audience chips over the hero scene lift from 4.2:1 to
   4.5:1+; the home slogan's violet line gains the same thin light edge as the Veterans flag line. */
.cp-crumbs a { display: inline-block; padding-block: 3px; }
html body .nx-trust span.caliber-v38-audience { color: #D9D4E2 !important; -webkit-text-fill-color: #D9D4E2 !important; }
html body h1.caliber-slogan-h1 .purple { -webkit-text-stroke: .012em rgba(240, 225, 255, .5); }
/* the surge gradient's deepest stop lifted (#7B2EF2 -> #A66BFF) so the violet line holds >=3:1 on the dark hero */
:root { --id-surge: linear-gradient(180deg, #F6EEFF 0%, #DCC0FF 22%, #BC88FF 48%, #A66BFF 66%, #D2AAFF 88%, #F6EEFF 100%); }