/* 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 h1.caliber-slogan-h1 .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 h1.caliber-slogan-h1.is-off .cal-chrome { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html body h1.caliber-slogan-h1 .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 h1.caliber-slogan-h1 .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: #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; }
}