/* CALIBER identity layer (v96): the graduation campaign's look, brought in selectively.
   Electric-violet illuminated edges and light trails, chrome silver and champagne metal, graphite surfaces, a
   controlled bloom on brand elements. CSS only: gradients and box-shadows, no images, no running animation. Loaded
   after caliber-type.css on every page. Strength by tier:
     1. home hero + brand sections   strongest      (.nx-hero, section titles, .nx-cta)
     2. student / campaign surfaces  cinematic      (.cal-cinematic; the Student Plan card)
     3. onboarding + milestones      restrained     (create-account card + steps, resume uploaded, receipts)
     4. dashboard + applications     hairlines only (next-step card, task tiles); tables and data untouched
     5. subscription                 premium frame  (current plan, price)
   Long text keeps Inter; nothing here changes copy, layout or behaviour. */

:root {
  --id-violet: #A45CFF;
  --id-violet-hi: #C69BFF;
  --id-violet-glow: rgba(164, 92, 255, .42);
  --id-violet-line: rgba(178, 120, 255, .55);
  --id-graphite: #121318;
  --id-graphite-hi: #1A1B22;
  --id-chrome: linear-gradient(180deg, #FFFFFF 0%, #ECEDF2 38%, #A9ACB8 58%, #E9EAF0 78%, #FFFFFF 100%);
  --id-champagne: linear-gradient(180deg, #FBEFCF 0%, #EBCB86 42%, #B98F4C 62%, #F3DCA6 100%);
  --id-trail: linear-gradient(90deg, transparent, rgba(198, 155, 255, .95) 30%, #FFFFFF 50%, rgba(164, 92, 255, .9) 70%, transparent);
  --id-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ================= 1. Home hero: the strongest treatment ================= */
/* The slogan in metal: chrome first line, champagne second (the approved white-to-gold read), a violet bloom
   behind it (drop-shadow, since text-shadow would paint over gradient text) and a light trail beneath. */
html body .nx-hero-grid > :first-child > h1.caliber-slogan-h1 {
  position: relative;
  padding-bottom: 20px;
  background: var(--id-chrome);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 0 rgba(11, 13, 16, .55)) drop-shadow(0 0 22px rgba(164, 92, 255, .28));
}
html body h1.caliber-slogan-h1 .purple {
  background: var(--id-champagne) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
}
html body h1.caliber-slogan-h1::after {
  content: ""; position: absolute; left: 0; bottom: 4px; width: min(78%, 520px); height: 2px; border-radius: 2px;
  background: var(--id-trail);
  box-shadow: 0 0 12px 1px var(--id-violet-glow), 0 0 28px 2px rgba(164, 92, 255, .22);
}
/* The dashboard mockup: an illuminated violet edge, like the campaign frame. */
html body .nx-hero .nx-laptop,
html body .nx-hero .nx-phone {
  box-shadow: 0 0 0 1px var(--id-violet-line), 0 0 26px rgba(164, 92, 255, .30), 0 34px 80px rgba(0, 0, 0, .55) !important;
}
/* A single static light trail across the hero floor. */
html body .nx-hero { position: relative; isolation: isolate; }
html body .nx-hero::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: -6%; right: -6%; bottom: 14%; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(164, 92, 255, 0) 30%, rgba(198, 155, 255, .7) 62%, rgba(255, 255, 255, .85) 74%, rgba(164, 92, 255, .5) 86%, transparent 100%);
  transform: rotate(-4deg); transform-origin: right center;
  box-shadow: 0 0 18px 2px rgba(164, 92, 255, .35);
  opacity: .75;
}

/* ================= 1b. Major brand sections ================= */
html body .caliber-section-title,
html body .caliber-access-title {
  background: var(--id-chrome);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
html body .caliber-access-title .caliber-wordmark { -webkit-text-fill-color: initial; }
html body .caliber-section-title { position: relative; padding-bottom: 18px; }
html body .caliber-section-title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 132px; height: 2px; transform: translateX(-50%);
  background: var(--id-trail); box-shadow: 0 0 12px var(--id-violet-glow);
}
/* Closing band: graphite, framed in violet light, the slogan in champagne metal. */
html body .nx-cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--id-graphite-hi), var(--id-graphite) 60%) !important;
  border: 1px solid var(--id-violet-line) !important;
  box-shadow: 0 0 0 1px rgba(164, 92, 255, .12), 0 0 34px rgba(164, 92, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
html body .nx-cta::before {
  content: ""; position: absolute; z-index: -1; inset: auto -10% -40% 40%; height: 120%;
  background: radial-gradient(closest-side, rgba(164, 92, 255, .22), transparent 70%);
}
html body .nx-cta .caliber-slogan-cta {
  background: var(--id-champagne);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Buttons everywhere: one polished motion. Gold stays gold; hover lifts and gains a violet bloom. */
html body :is(.nx-btn, .btn, .cp-btn) {
  transition: transform .18s var(--id-ease), box-shadow .24s var(--id-ease), background-color .24s var(--id-ease), border-color .24s var(--id-ease), color .24s var(--id-ease);
}
html body :is(.nx-btn, .btn, .cp-btn):is(:hover, :focus-visible):not(:disabled) { transform: translateY(-1px); }
html body :is(.nx-btn.gold, .btn.primary, .cp-btn--primary):is(:hover, :focus-visible):not(:disabled) {
  box-shadow: 0 0 0 1px rgba(198, 155, 255, .55), 0 6px 22px rgba(164, 92, 255, .38), 0 2px 0 rgba(0, 0, 0, .25) !important;
}

/* ================= 2. Campaign / student surfaces: full cinematic ================= */
/* .cal-cinematic is the reusable campaign frame (for a student or graduation page); the Student Plan card wears it. */
html body .cal-cinematic,
html body .nx-price.nx-price--student {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, #1D1630 0%, var(--id-graphite) 55%, #0D0E12 100%) !important;
  border: 1px solid rgba(198, 155, 255, .75) !important;
  box-shadow: 0 0 0 1px rgba(164, 92, 255, .25), 0 0 22px rgba(164, 92, 255, .45), 0 0 60px rgba(164, 92, 255, .18), inset 0 0 24px rgba(164, 92, 255, .12) !important;
}
html body .cal-cinematic::after,
html body .nx-price.nx-price--student::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: -8%; right: -8%; bottom: 22%; height: 2px;
  background: var(--id-trail); transform: rotate(-8deg); opacity: .8; box-shadow: 0 0 14px 1px var(--id-violet-glow);
}
html body .nx-price.nx-price--student h3 { color: #FFFFFF !important; }

/* ================= 3. Onboarding and milestones: celebratory, restrained ================= */
html body .card:has(> .tabs) {
  box-shadow: 0 0 0 1px rgba(178, 120, 255, .38), 0 0 30px rgba(164, 92, 255, .16), 0 30px 70px rgba(0, 0, 0, .5) !important;
}
html body .card:has(> .tabs)::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; pointer-events: none;
  background: var(--id-trail); box-shadow: 0 0 10px var(--id-violet-glow);
}
html body .onboarding-steps .active {
  box-shadow: 0 0 0 1px var(--id-violet-line), 0 0 14px rgba(164, 92, 255, .35);
}
/* Resume uploaded / application receipt: a short violet edge and a soft bloom, once, no motion. */
html body .cw-result--ok,
html body .cw-receipt {
  box-shadow: inset 2px 0 0 var(--id-violet-hi), 0 0 0 1px rgba(178, 120, 255, .28), 0 0 18px rgba(164, 92, 255, .14) !important;
}

/* ================= 4. Dashboard: hairlines only, data stays plain ================= */
html.cw-app .cw-next { position: relative; }
html.cw-app .cw-next::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(198, 155, 255, .8), transparent);
}
html.cw-app .cw-task { transition: border-color .2s var(--id-ease), box-shadow .2s var(--id-ease), transform .18s var(--id-ease); }
html.cw-app .cw-task:is(:hover, :focus-visible) {
  border-color: rgba(178, 120, 255, .5) !important;
  box-shadow: 0 0 0 1px rgba(178, 120, 255, .22), 0 8px 22px rgba(0, 0, 0, .35) !important;
}
html.cw-app #welcomeTitle {
  background: var(--id-chrome);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ================= 5. Subscription: premium hierarchy, no extra effects ================= */
html body.cp--account .current-plan {
  border-color: var(--id-violet-line) !important;
  box-shadow: 0 0 0 1px rgba(164, 92, 255, .2), 0 0 24px rgba(164, 92, 255, .16) !important;
}
html body.cp--account :is(.plan-price, .subscription-price) {
  background: var(--id-champagne);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
html body.cp--account .subscription-current { position: relative; }

/* ================= Comfort and fallbacks ================= */
@media (prefers-reduced-motion: reduce) {
  html body :is(.nx-btn, .btn, .cp-btn, .cw-task) { transition: none !important; }
  html body :is(.nx-btn, .btn, .cp-btn, .cw-task):is(:hover, :focus-visible) { transform: none !important; }
}
@media (max-width: 680px) {
  html body .nx-hero::after { bottom: 8%; opacity: .55; }
  html body h1.caliber-slogan-h1 { filter: drop-shadow(0 2px 0 rgba(11, 13, 16, .55)) drop-shadow(0 0 14px rgba(164, 92, 255, .24)); }
}
@media (forced-colors: active) {
  html body :is(h1.caliber-slogan-h1, h1.caliber-slogan-h1 .purple, .caliber-section-title, .caliber-access-title, .nx-cta .caliber-slogan-cta, #welcomeTitle, .plan-price, .subscription-price) {
    background: none !important; color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; filter: none !important;
  }
  html body :is(h1.caliber-slogan-h1, .caliber-section-title)::after, html body .nx-hero::after { display: none; }
}

/* ================= Hero slogan: Barlow + the electric power surge (v96, approved concept) =================
   The slogan is the one place that wears the campaign headline face: Barlow Condensed Black Italic, chrome first line,
   electric-violet second line. Every 7 s the second line surges (dims, flashes white-hot, a light band sweeps it) and
   caliber-electric.js draws lightning across it and along the trail. Michroma keeps the byline, section titles and the
   wordmark lines. Reduced motion: the steady lit state, no surge, no lightning. */
:root { --id-surge: linear-gradient(180deg, #F6EEFF 0%, #D6B2FF 22%, #A45CFF 48%, #7B2EF2 66%, #C99BFF 88%, #F3E8FF 100%); }
html body .nx-hero-grid > :first-child > h1.caliber-slogan-h1,
html body h1.caliber-slogan-h1 {
  font-family: "Barlow Condensed", "Arial Narrow", ui-sans-serif, sans-serif !important;
  font-weight: 900 !important; font-style: italic !important;
  font-size: clamp(36px, 10.6cqi, 88px) !important;
  line-height: .95 !important; letter-spacing: .004em !important;
  padding-bottom: .26em; padding-right: .08em;   /* room for the italic overhang and the trail */
}
html body h1.caliber-slogan-h1 .purple {
  display: inline-block; position: relative;
  background-image: var(--id-surge), linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%) !important;
  background-size: 100% 100%, 300% 100% !important; background-position: 0 0, 120% 0; background-repeat: no-repeat !important;
  background-blend-mode: screen;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 .037em rgba(240, 225, 255, .9)) drop-shadow(0 0 .185em rgba(164, 92, 255, .85)) drop-shadow(0 0 .45em rgba(123, 46, 242, .5));
  animation: cal-surge-sweep 7s var(--id-ease) .4s infinite both, cal-surge-bloom 7s var(--id-ease) .4s infinite both;
}
html body h1.caliber-slogan-h1::after { animation: cal-surge-trail 7s var(--id-ease) .4s infinite both; }
html body h1.caliber-slogan-h1.is-off .purple, html body h1.caliber-slogan-h1.is-off::after { animation-play-state: paused; }
@keyframes cal-surge-sweep { 0%, 3% { background-position: 0 0, 120% 0; } 24%, 100% { background-position: 0 0, -40% 0; } }
@keyframes cal-surge-bloom {
  0%, 25%, 100% { filter: drop-shadow(0 0 .037em rgba(240, 225, 255, .9)) drop-shadow(0 0 .185em rgba(164, 92, 255, .85)) drop-shadow(0 0 .45em rgba(123, 46, 242, .5)) brightness(1); }
  3%  { filter: drop-shadow(0 0 .02em rgba(240, 225, 255, .5)) drop-shadow(0 0 .08em rgba(164, 92, 255, .4)) drop-shadow(0 0 .2em rgba(123, 46, 242, .2)) brightness(.7); }
  8%  { filter: drop-shadow(0 0 .074em #fff) drop-shadow(0 0 .3em rgba(198, 155, 255, 1)) drop-shadow(0 0 .75em rgba(123, 46, 242, .85)) brightness(1.3); }
}
@keyframes cal-surge-trail {
  0%, 3%, 25%, 100% { box-shadow: 0 0 12px 1px var(--id-violet-glow), 0 0 28px 2px rgba(164, 92, 255, .22); }
  8% { box-shadow: 0 0 16px 3px rgba(220, 190, 255, 1), 0 0 44px 8px rgba(123, 46, 242, .7); }
}
/* the lightning overlay drawn by caliber-electric.js */
html body .cal-electric { position: absolute; left: -5%; top: -30%; width: 110%; height: 175%; pointer-events: none; overflow: visible; z-index: 2;
  mix-blend-mode: screen; filter: drop-shadow(0 0 3px rgba(198, 155, 255, .95)) drop-shadow(0 0 9px rgba(164, 92, 255, .85)); }
html body .cal-electric path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
html body .cal-electric .glow { stroke: #B57CFF; stroke-width: 3; opacity: .75; }
html body .cal-electric .core { stroke: #FFFFFF; stroke-width: 1.1; }
@media (max-width: 680px) { html body .cal-electric .glow { stroke-width: 2; } html body .cal-electric .core { stroke-width: .8; } }
@media (prefers-reduced-motion: reduce) {
  html body h1.caliber-slogan-h1 .purple, html body h1.caliber-slogan-h1::after { animation: none !important; }
  html body .cal-electric { display: none; }
}
@media (forced-colors: active) { html body .cal-electric { display: none; } }

/* ================= Hero slogan v97: reflective chrome line 1, heroic depth on both lines =================
   "Know Your Caliber." is polished silver: bright sky, a dark horizon line, the lower half catching a purple sheen, and
   a white-violet glare streak that sweeps across it on each surge (same 7 s clock). Both lines sit on an extruded edge
   (stacked hard drop-shadows) so they read as solid metal. The h1 itself no longer paints a gradient. */
:root {
  --id-chrome-reflect: linear-gradient(180deg, #FFFFFF 0%, #F5F6F9 18%, #D9DBE3 36%, #A3A6B4 46%, #4B4D5C 50%, #2E2F3A 51.5%, #8E91A0 55%, #C4C6D1 68%, #ECEEF3 86%, #FFFFFF 100%);
  --id-sheen: linear-gradient(180deg, transparent 52%, rgba(178, 120, 255, .55) 60%, rgba(214, 178, 255, .35) 72%, transparent 86%);
  --id-glare: linear-gradient(112deg, transparent 36%, rgba(196, 150, 255, 0) 38%, rgba(196, 150, 255, .75) 41.5%, #FFFFFF 44%, rgba(196, 150, 255, .75) 46.5%, rgba(196, 150, 255, 0) 50%, transparent 52%);
  --id-depth: drop-shadow(0 .018em 0 #6F6A86) drop-shadow(0 .04em 0 #2B2440) drop-shadow(0 .065em 0 #15111F) drop-shadow(0 .14em .12em rgba(0, 0, 0, .6));
}
html body .nx-hero-grid > :first-child > h1.caliber-slogan-h1,
html body h1.caliber-slogan-h1 {
  background: none !important; -webkit-text-fill-color: initial; color: inherit; filter: none !important;
}
html body :is(h1.caliber-slogan-h1, .cal-slogan-face) .cal-chrome {
  display: inline-block;
  background: var(--id-glare), var(--id-sheen), var(--id-chrome-reflect);
  background-size: 260% 100%, 100% 100%, 100% 100%; background-position: 70% 0, 0 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: var(--id-depth) drop-shadow(0 0 .32em rgba(164, 92, 255, .32));
  animation: cal-glare 7s var(--id-ease) .4s infinite both;
}
@keyframes cal-glare { 0%, 5% { background-position: 118% 0, 0 0, 0 0; } 22%, 100% { background-position: -18% 0, 0 0, 0 0; } }
/* line 2 keeps the surge and gains the same extruded edge (first in every keyframe so the depth never drops) */
html body h1.caliber-slogan-h1 .purple { animation-name: cal-surge-sweep, cal-surge-bloom-v97 !important; }
@keyframes cal-surge-bloom-v97 {
  0%, 25%, 100% { filter: drop-shadow(0 .035em 0 #2A1250) drop-shadow(0 .065em 0 #140B26) drop-shadow(0 0 .037em rgba(240, 225, 255, .9)) drop-shadow(0 0 .185em rgba(164, 92, 255, .85)) drop-shadow(0 0 .45em rgba(123, 46, 242, .5)) brightness(1); }
  3%  { filter: drop-shadow(0 .035em 0 #2A1250) drop-shadow(0 .065em 0 #140B26) drop-shadow(0 0 .02em rgba(240, 225, 255, .5)) drop-shadow(0 0 .08em rgba(164, 92, 255, .4)) drop-shadow(0 0 .2em rgba(123, 46, 242, .2)) brightness(.7); }
  8%  { filter: drop-shadow(0 .035em 0 #2A1250) drop-shadow(0 .065em 0 #140B26) drop-shadow(0 0 .074em #fff) drop-shadow(0 0 .3em rgba(198, 155, 255, 1)) drop-shadow(0 0 .75em rgba(123, 46, 242, .85)) brightness(1.3); }
}
html body :is(h1.caliber-slogan-h1, .cal-slogan-face).is-off .cal-chrome { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html body :is(h1.caliber-slogan-h1, .cal-slogan-face) .cal-chrome { animation: none !important; background-position: 70% 0, 0 0, 0 0; }
  html body h1.caliber-slogan-h1 .purple { filter: drop-shadow(0 .035em 0 #2A1250) drop-shadow(0 .065em 0 #140B26) drop-shadow(0 0 .037em rgba(240, 225, 255, .9)) drop-shadow(0 0 .185em rgba(164, 92, 255, .85)) drop-shadow(0 0 .45em rgba(123, 46, 242, .5)); }
}
@media (forced-colors: active) {
  html body :is(h1.caliber-slogan-h1, .cal-slogan-face) .cal-chrome { background: none !important; color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; filter: none !important; }
}

/* ================= Home section headings v99: the hero's heroic type, without the motion =================
   Headings tagged .cal-heroic (home: Welcome, Pick your path, What it does, Public service, How it works, Pricing,
   the closing slogan) wear the slogan's face and metal: Barlow Condensed Black Italic, reflective silver with a
   purple sheen, the extruded edge, and electric violet on the key phrase (.cal-accent). The chrome is tiled once per
   line (line-height 1, background 1em tall) so every line of a two-line heading gets its own horizon. No animation:
   the hero stays the single moving moment. */
html body .cal-heroic {
  font-family: "Barlow Condensed", "Arial Narrow", ui-sans-serif, sans-serif !important;
  font-weight: 900 !important; font-style: italic !important; text-transform: uppercase !important;
  letter-spacing: .006em !important; line-height: 1 !important; padding-right: .07em;
  background-image: var(--id-sheen), var(--id-chrome-reflect) !important;
  background-size: 100% 1em !important; background-repeat: repeat-y !important; background-position: 0 0 !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  filter: var(--id-depth) drop-shadow(0 0 .3em rgba(164, 92, 255, .25));
}
html body .cal-heroic .cal-accent {
  background-image: var(--id-surge); background-size: 100% 1em; background-repeat: repeat-y;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
html body .caliber-section-title.cal-heroic { font-size: clamp(34px, 4.2vw, 60px) !important; }
html body .nx-wrap h2.cal-heroic:not(.caliber-section-title):not(.caliber-cta-title):not(.caliber-access-title) { font-size: clamp(30px, 3.3vw, 50px) !important; }
html body .caliber-access-title.cal-heroic { font-size: clamp(30px, 3.4vw, 50px) !important; }
html body .nx-cta .caliber-cta-title.cal-heroic { font-size: clamp(24px, 2.5vw, 36px) !important; letter-spacing: .01em !important; }
/* the access title holds the wordmark image and its screen-reader text: a background clipped to text would paint
   through that hidden text, so the chrome goes on "Welcome to" alone and the heading itself stays plain */
html body .caliber-access-title.cal-heroic { background: none !important; color: var(--nx-text) !important; -webkit-text-fill-color: currentColor !important; filter: none; }
html body .caliber-access-title .cal-heroic-text {
  display: inline-block; padding-right: .07em;
  background-image: var(--id-sheen), var(--id-chrome-reflect); background-size: 100% 1em; background-repeat: repeat-y;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: var(--id-depth) drop-shadow(0 0 .3em rgba(164, 92, 255, .25));
}
@media (forced-colors: active) {
  html body .cal-heroic, html body .cal-heroic .cal-accent { background: none !important; color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; filter: none !important; }
}
/* the access band's own rules use #caliberAccessIntro: match that weight so the heroic face wins there too */
html body #caliberAccessIntro .caliber-access-title.cal-heroic,
html body .caliber-access-band .caliber-access-title.cal-heroic {
  font-family: "Barlow Condensed", "Arial Narrow", ui-sans-serif, sans-serif !important;
  font-weight: 900 !important; font-style: italic !important; letter-spacing: .006em !important; line-height: 1 !important;
  font-size: clamp(30px, 3.4vw, 50px) !important;
}

/* ================= v100. Hero dashboard: the achievement moment ================= */
/* The mock dashboard reads as CALIBER at work: graphite glass under a violet edge light, a charged progress bar, chrome
   and violet figures, status pills. The phone is the payoff: a violet spotlight, a lit check whose ring pings once per
   hero surge (the same 7 s clock, .4 s offset), and the champagne CTA wearing a violet halo. One-time fills on load;
   paused with the hero atmosphere; static under reduced motion. */
html body .nx-device .nx-laptop {
  background:
    radial-gradient(120% 70% at 88% -12%, rgba(164, 92, 255, .22), transparent 56%),
    linear-gradient(180deg, rgba(27, 25, 37, .97), rgba(14, 15, 20, .98)) !important;
  border: 1px solid rgba(198, 155, 255, .5) !important;
  box-shadow: 0 0 0 1px rgba(164, 92, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 34px rgba(164, 92, 255, .32), 0 40px 90px -24px rgba(0, 0, 0, .78) !important;
}
html body .nx-device .nx-laptop::after {          /* a light trail along the top edge */
  content: ""; position: absolute; top: -1px; left: 14%; right: 10%; height: 1px; pointer-events: none;
  background: var(--id-trail); box-shadow: 0 0 10px 1px rgba(164, 92, 255, .55);
}
html body .nx-device .nx-dash-head > span {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  color: #CFF5DD; background: rgba(91, 219, 142, .08); border: 1px solid rgba(91, 219, 142, .35);
}
html body .nx-device .nx-widget {
  background: linear-gradient(180deg, rgba(36, 31, 52, .88), rgba(19, 19, 27, .94)) !important;
  border: 1px solid rgba(178, 120, 255, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
html body .nx-device .nx-widget p { color: var(--ds-ink-3, #B9B3C6); }
html body .nx-device .nx-dash-grid > .nx-widget:last-child {      /* the count: the widget with the most at stake */
  border-color: rgba(198, 155, 255, .45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 18px rgba(164, 92, 255, .2);
}

/* progress: a charged violet bar with a lit head, filling once on load */
html body .nx-device .nx-progress { overflow: visible; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(178, 120, 255, .2); }
html body .nx-device .nx-progress i {
  position: relative; border-radius: inherit;
  background: linear-gradient(90deg, #5B2EC2, #A45CFF 68%, #E6D4FF);
  box-shadow: 0 0 10px rgba(164, 92, 255, .7);
  animation: cal-progress-fill 1.8s var(--id-ease) .5s both;
}
html body .nx-device .nx-progress i::after {
  content: ""; position: absolute; right: -4px; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%);
  background: #FFFFFF; box-shadow: 0 0 6px 2px rgba(214, 178, 255, .95), 0 0 16px 4px rgba(164, 92, 255, .7);
}
@keyframes cal-progress-fill { from { width: 6%; } to { width: 74%; } }

/* figures: the slogan's heroic type; the count in reflective silver, the match rate in violet */
html body .nx-device .nx-big {
  font-family: "Barlow Condensed", var(--font-body); font-style: italic; font-weight: 900; letter-spacing: .01em; padding-right: .08em;
  background: var(--id-chrome-reflect, var(--id-chrome)); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .03em 0 #2B2440) drop-shadow(0 0 .3em rgba(164, 92, 255, .3));
}
html body .nx-device .nx-big ~ .nx-big { background: var(--id-surge); -webkit-background-clip: text; background-clip: text; }
html body .nx-device .nx-big small { font-family: var(--font-body); font-style: normal; font-weight: 500; -webkit-text-fill-color: #A9A3B6; color: #A9A3B6; }

/* recent submissions: status pills, kept clear of the phone */
html body .nx-device .nx-recent div { align-items: center; padding-block: 5px; color: #CFCAD8; border-bottom-color: rgba(178, 120, 255, .1); }
html body .nx-device .nx-recent div span:last-child {
  padding: 1px 6px; line-height: 1.3; border-radius: 999px; font-weight: 600; white-space: nowrap;
  color: #E6D6FF; background: rgba(164, 92, 255, .16); border: 1px solid rgba(178, 120, 255, .42);
}
html body .nx-device .nx-recent div span:last-child::before { content: "\2713\00a0" / ""; }
html body .nx-device .nx-recent div:last-child span:last-child { color: #CFF5DD; background: rgba(91, 219, 142, .12); border-color: rgba(91, 219, 142, .45); }
@media (min-width: 681px) { html body .nx-device .nx-recent { margin-right: 104px; } }

/* the phone: proof, reward, confirmation */
html body .nx-device .nx-phone {
  background:
    radial-gradient(95% 44% at 50% 20%, rgba(164, 92, 255, .4), transparent 72%),
    linear-gradient(180deg, rgba(29, 22, 44, .98), rgba(12, 12, 18, .99)) !important;
  border: 1px solid rgba(214, 178, 255, .8) !important;
  box-shadow: 0 0 0 1px rgba(164, 92, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .12),
    0 0 22px rgba(164, 92, 255, .55), 0 0 64px rgba(164, 92, 255, .24), 0 34px 80px rgba(0, 0, 0, .6) !important;
}
html body .nx-device .nx-phone-icon {
  position: relative; width: 48px; height: 48px; margin: 16px auto 14px;
  background: radial-gradient(circle at 34% 28%, #DCC2FF 0%, #A45CFF 46%, #6A2FD6 100%) !important;
  border: 1px solid rgba(240, 225, 255, .85) !important; color: #FFFFFF !important;
  box-shadow: 0 0 0 5px rgba(164, 92, 255, .16), 0 0 0 11px rgba(164, 92, 255, .07), 0 0 24px rgba(164, 92, 255, .85);
  animation: cal-success-pop .7s var(--id-ease) 1.6s both;
}
html body .nx-device .nx-phone-icon svg { width: 24px; height: 24px; stroke-width: 2.4; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)); }
html body .nx-device .nx-phone-icon::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid rgba(220, 194, 255, .95); opacity: 0;
  animation: cal-success-ping 7s var(--id-ease) .4s infinite both;
}
html body .nx-device .nx-phone h4 {
  background: var(--id-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
html body .nx-device .nx-phone p { color: #CFC9DA; }
@keyframes cal-success-pop { 0% { transform: scale(.72); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }   /* scale only: never hidden */
@keyframes cal-success-ping {
  0%, 6% { transform: scale(1); opacity: 0; } 9% { opacity: .95; }
  26% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; }
}

/* "View Details": the site's champagne primary, with an arrow, a violet halo and a sheen on each surge */
html body .nx-device .nx-phone .nx-btn {
  font-size: 12.5px; font-weight: 700 !important; letter-spacing: .02em !important; gap: 6px;
  border-color: rgba(214, 178, 255, .85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, .65), inset 0 -1px 0 rgba(120, 82, 34, .28),
    0 0 0 1px rgba(198, 155, 255, .45), 0 0 16px rgba(164, 92, 255, .55), 0 8px 18px -8px rgba(0, 0, 0, .8) !important;
}
html body .nx-device .nx-phone .nx-btn::after {
  content: ""; flex: none; width: 11px; height: 8px; background: currentColor; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h11M8.5 1.5 12 5l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h11M8.5 1.5 12 5l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .nx-device .nx-phone .nx-btn::before { animation: cal-cta-sheen 7s var(--id-ease) .4s infinite both; }
@keyframes cal-cta-sheen { 0%, 12% { transform: translateX(-120%); } 24%, 100% { transform: translateX(120%); } }

/* hero CTAs: the same buttons, slightly energized at rest (a violet underglow) */
html body .nx-hero-actions .nx-btn.gold:not(:hover):not(:active):not(:focus-visible) {
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, .65), inset 0 -1px 0 rgba(120, 82, 34, .28),
    0 0 0 1px rgba(198, 155, 255, .28), 0 10px 26px -12px rgba(164, 92, 255, .75), 0 8px 20px -10px rgba(0, 0, 0, .75);
}

/* background emblem: a little more presence, same opacity, still clear of the headline */
.nx-device::after { left: 40%; width: 180%; }
@media (max-width: 980px) { .nx-device::after { left: 50%; width: 162%; } }

.nx-hero.caliber-atmos-paused .nx-device :is(.nx-phone-icon, .nx-btn)::after,
.nx-hero.caliber-atmos-paused .nx-device .nx-btn::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html body .nx-device :is(.nx-progress i, .nx-phone-icon) { animation: none !important; }
  html body .nx-device .nx-phone-icon::after, html body .nx-device .nx-phone .nx-btn::before { animation: none !important; display: none; }
}
@media (forced-colors: active) {
  html body .nx-device :is(.nx-big, .nx-phone h4) { background: none !important; -webkit-text-fill-color: CanvasText; color: CanvasText; filter: none; }
}

/* ================= Hero slogan v109: tall condensed black (the HIGH TONE direction) =================
   One face, weight, proportion and hierarchy for the homepage and Veterans slogans: tall, heavy, condensed uppercase
   with tight spacing and tight leading, leaning slightly forward. The reference face (Hightone, Typoraith Co.) could not
   be verified for web licensing, so this uses the approved fallback, Big Shoulders Display Black (SIL Open Font
   License, Google Fonts). Each page keeps its own finish on top: homepage chrome + violet surge, Veterans chrome + flag.
   The letterforms carry the weight on their own; every glow and bevel is on top of that, not instead of it. */
:root { --cal-hero-face: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", ui-sans-serif, sans-serif; --cal-hero-lean: -6deg; }
html body .nx-hero-grid > :first-child > h1.caliber-slogan-h1,
html body h1.caliber-slogan-h1,
html body section.cv-hero h1#cp-h1.cv-slogan,
html body .cal-slogan-face {
  font-family: var(--cal-hero-face) !important; font-weight: 900 !important; font-style: normal !important; font-synthesis: none;
  text-transform: uppercase; letter-spacing: -.004em !important; line-height: .93 !important; font-kerning: normal;
  padding-bottom: .2em; padding-right: .12em;
}
/* sized to the column: each line is about 7.9em wide, so 11.4cqi makes the longer line fill ~90% of it at any width */
html body .nx-hero-grid > :first-child > h1.caliber-slogan-h1,
html body section.cv-hero h1#cp-h1.cv-slogan { font-size: clamp(30px, 11.4cqi, 112px) !important; }
@media (max-width: 980px) { html body section.cv-hero h1#cp-h1.cv-slogan { font-size: clamp(30px, 11.4cqi, 96px) !important; } }
/* the forward lean: each line slants from its baseline, so the left edge stays aligned with the copy below */
html body :is(h1.caliber-slogan-h1, .cal-slogan-face) :is(.cal-chrome, .purple, .cv-flag) { display: inline-block; white-space: nowrap; transform: skewX(var(--cal-hero-lean)); transform-origin: 0 100%; }

/* ================= Portal greeting v127: the member's name in the slogan's own type =================
   "Good afternoon," stays in the UI face; the first name wears .cal-slogan-face + .cal-chrome, the same rules as
   "Know Your Caliber." above (face, lean, reflective chrome, purple sheen, extruded edge, violet glow). Where the hero
   repeats its surge every 7 s, the name surges once when the greeting first comes into view (.is-surge, set by
   caliber-app.js): the glare sweeps the letters and a violet flash blooms and settles into the resting metal. Same
   7 s clock as the hero so the sweep and flash run at the hero's speed; nothing loops. Reduced motion: the hero's
   steady lit state. */
html.cw-app #welcomeTitle.cal-greet {
  display: flex; flex-direction: column; align-items: flex-start; gap: .14em;
  container-type: inline-size; max-width: 100%; min-width: 0;
  background: none !important; color: var(--ws-text) !important; -webkit-text-fill-color: currentColor;
  font-size: 16px !important; line-height: 1 !important; text-transform: none; letter-spacing: 0 !important;
  margin: 0 0 12px;
}
html.cw-app #welcomeTitle .cal-greet__lead {
  font: 600 clamp(17px, 1.5vw, 21px)/1.25 var(--font-body) !important;
  letter-spacing: .01em; text-transform: none; color: var(--ds-ink-2, #CBC4DA);
}
/* sized to the column and to the name: a name of n letters is about .5em per letter in this face, so 168cqi / n
   fills ~84% of the width; long names step down to 34px and then wrap at a letter rather than overflow */
html.cw-app #welcomeTitle .cal-greet__name {
  display: block; align-self: stretch; max-width: 100%;   /* the column's width, not the name's, so the limit below never clips it */
  font-size: clamp(34px, min(16cqi, 168cqi / var(--cal-greet-n, 8)), 104px) !important;
  line-height: .93 !important;
}
html.cw-app #welcomeTitle .cal-greet__name .cal-chrome { max-width: calc(100% - .16em); }   /* the lean overhangs ~.1em at the top right */
html.cw-app #welcomeTitle .cal-greet__name.is-long .cal-chrome { white-space: normal; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  html.cw-app #welcomeTitle .cal-greet__name .cal-chrome { animation: none; background-position: -18% 0, 0 0, 0 0; }
  html.cw-app #welcomeTitle .cal-greet__name.is-surge .cal-chrome {
    animation: cal-glare 7s var(--id-ease) .2s 1 both, cal-greet-bloom 7s var(--id-ease) .2s 1 both;
  }
}
/* the hero's flash (dip, white-hot, violet bloom) over the chrome line's own edge and glow; same filter list at every
   stop so it eases instead of jumping, and it ends on the resting chrome filter */
@keyframes cal-greet-bloom {
  0%, 25%, 100% { filter: var(--id-depth) drop-shadow(0 0 .32em rgba(164, 92, 255, .32)) drop-shadow(0 0 0 rgba(198, 155, 255, 0)) drop-shadow(0 0 0 rgba(123, 46, 242, 0)) brightness(1); }
  3%  { filter: var(--id-depth) drop-shadow(0 0 .2em rgba(164, 92, 255, .18)) drop-shadow(0 0 0 rgba(198, 155, 255, 0)) drop-shadow(0 0 0 rgba(123, 46, 242, 0)) brightness(.7); }
  8%  { filter: var(--id-depth) drop-shadow(0 0 .074em #fff) drop-shadow(0 0 .3em rgba(198, 155, 255, 1)) drop-shadow(0 0 .75em rgba(123, 46, 242, .85)) brightness(1.3); }
}
@media (forced-colors: active) { html.cw-app #welcomeTitle.cal-greet { color: CanvasText !important; } }