/* ============================================================================
   CALIBER — Aura layer                                      assets/caliber-aura.css

   Graphite and champagne gold over a real alpine photograph, with violet as
   atmospheric light and slow snowy mist moving through the valleys.

   Install: serve this file and its sibling assets from /caliber/assets/ and
   apply caliber-markup.patch. Changes no copy, pricing, links, handlers,
   forms or authentication.

   Hero, back to front:
     1 photograph            .caliber-atmos__photo
     2 colour treatment      .caliber-atmos__tint
     3 mist  far/mid/near    .caliber-mist--*
     4 snow (behind UI)      .caliber-atmos__snow          (caliber-atmos.js)
     5 emblem + aura         .nx-device::after / ::before
     6 dashboard             .nx-device > *
     7 foreground snow       .caliber-snow-front           (caliber-atmos.js)
     8 readable content      .nx-hero-grid > :first-child
   ========================================================================= */

:root {
  /* ground and surfaces */
  --nx-bg:      #0B0D10;
  --nx-bg2:     #101217;
  --nx-card:    #15171D;
  --nx-card2:   #101217;

  /* type */
  --nx-text:    #F5F1E8;
  --nx-muted:   #C6C2CE;

  /* champagne gold: the only action colour */
  --nx-gold:        #E6C681;
  --nx-gold-bright: #F3DCA6;
  --nx-gold-deep:   #B98C49;

  --nx-line:   rgba(230, 198, 129, .20);
  --nx-line-2: rgba(230, 198, 129, .36);

  /* violet: light only -- measured from the CALIBER mark */
  --aura-plum:     #4D2970;
  --aura-violet:   #8857C3;
  --aura-lavender: #BDA0E3;
  --nx-purple:  var(--aura-violet);
  --nx-purple2: var(--aura-lavender);

  /* snow and mist */
  --snow: #EDF1F7;

  /* Legacy text/gold tokens re-pointed at this palette. The live page forces
     every <p> to var(--nexus-muted) with !important (caliber-nexus-dark-v55),
     so redefining the token is the clean way to set paragraph colour page-wide.
     Background tokens from those generations are deliberately left alone. */
  --white:              #F5F1E8;
  --nexus-text:         #F5F1E8;
  --caliber-v56-text:   #F5F1E8;
  --nexus-muted:        #C6C2CE;
  --caliber-v56-muted:  #C6C2CE;
  --mist:               #C6C2CE;
  --gold:               #E6C681;
  --nexus-gold:         #E6C681;
  --caliber-v56-gold:   #E6C681;

  /* Michroma (v96): CALIBER's signature face for the hero, major headings, the slogan and brand elements. One weight
     (400) and wide: caliber-type.css re-tunes sizes and turns off faux bold. Inter carries all reading and UI text. */
  --font-head: "Michroma", "Arial", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-panel: 14px;
  --radius-ctl:   10px;

  --aura-strength:  1;
  --emblem-opacity: .82;
  --scene-h: clamp(760px, 64vw, 960px);
}

/* ------------------------------------------------------------------ ground */
html { background: var(--nx-bg); }
body {
  background: transparent !important;
  color: var(--nx-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Undo the legacy `caliber-home-background-v56-style` block, which paints
     section, main > section, body > section  -> purple-black gradient !important
     [class*="hero"]                          -> solid rgb(11,6,16)    !important
   Same specificity, later in the cascade. */
section,
main > section,
body > section,
.nx-hero,
.nx-hero-grid,
.nx-hero-actions {
  background: transparent !important;
}

/* -------------------------------------------------------------- typography */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; }
/* Two legacy blocks (v55, v56) force every heading to a literal near-white
   with !important. Same selector, later in the cascade: warm ivory. */
h1, h2, h3, h4, h5, h6 { color: var(--nx-text) !important; }
h1, h2 { text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
h3 { letter-spacing: .015em; }

/* Visually hidden text: the word behind each wordmark image. */
.caliber-sr {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Authentic CALIBER wordmark (cut from the supplied lockup, 1130x69).
   Sized by height only so its proportions never change. */
.caliber-wordmark { display: inline-flex; align-items: center; line-height: 0; }
.caliber-wordmark__img {
  display: block;
  width: auto !important;
  max-width: none !important;
  aspect-ratio: 1130 / 69;
  object-fit: contain !important;
}

button, input, select, textarea,
.nx-btn, .btn, .nx-nav-btn, .nx-links a, .nx-tabs div, .nx-chip { font-family: var(--font-body); }

/* Small uppercase labels: 11-12px, 600, wide tracking, champagne gold.
   Also covers the search field labels (Space Mono #787181 on the live page,
   ~3.9:1 -- a fail at 11px) and the footer column heads (Space Mono h5). */
.nx-kicker,
.caliber-access-kicker,
.label,
.nx-field label,
.nx-footer h5 {
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--nx-gold) !important;
}

/* =================================================================== HERO */
.nx-hero { isolation: isolate; }

/* Retire the live page's 790px purple neon ring entirely. */
.nx-hero::after { content: none; display: none; }

/* ----- 1-4: the scene ----------------------------------------------------- */
.caliber-atmos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--scene-h);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.caliber-atmos > * { position: absolute; pointer-events: none; }

/* 1. The photograph, recognisable and unfiltered. Peaks sit right, behind the
      dashboard; the quieter sky sits behind the headline. */
.caliber-atmos__photo {
  inset: 0;
  background: url("hero-mountains.webp") 64% 40% / cover no-repeat;
}

/* 2. Colour treatment. The photo's own gold sunset is kept; this layer only
      darkens behind the headline, pools violet in the valleys around the
      emblem and dashboard, and fades the lower edge into the page. */
.caliber-atmos__tint {
  inset: 0;
  background:
    /* lower edge -> graphite page */
    linear-gradient(180deg, transparent 52%, rgba(11, 13, 16, .55) 76%, #0B0D10 100%),
    /* violet pooled in the right-hand valleys */
    radial-gradient(60% 46% at 72% 74%,
      rgba(136, 87, 195, calc(.30 * var(--aura-strength))) 0%,
      rgba(77, 41, 112, calc(.26 * var(--aura-strength))) 45%,
      transparent 100%),
    /* headline readability: ~90% graphite at far left, easing to ~26% right.
       The middle stops are held heavy on purpose: the photograph's sun sits at
       roughly 45% across, directly behind the ends of the lead lines, and an
       earlier, lighter curve measured 3.7:1 there at the brightest moment of
       the mist animation. Re-measure with measure_contrast.py if changed. */
    linear-gradient(90deg,
      rgba(11, 13, 16, .90) 0%,
      rgba(11, 13, 16, .84) 26%,
      rgba(11, 13, 16, .76) 40%,
      rgba(11, 13, 16, .66) 50%,
      rgba(11, 13, 16, .44) 62%,
      rgba(11, 13, 16, .30) 76%,
      rgba(11, 13, 16, .26) 100%),
    /* a little weight under the header */
    linear-gradient(180deg, rgba(11, 13, 16, .45) 0%, transparent 16%);
}

/* 3. Mist: three strips, each a seamless tile scrolled sideways on the
      compositor (transform, not background-position) and bobbing vertically
      on an independent period so no two layers ever move in step. */
.caliber-mist {
  left: 0;
  right: 0;
  animation: caliber-mist-bob var(--bob-t) ease-in-out infinite alternate;
  animation-delay: var(--bob-delay);
}
.caliber-mist__strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + var(--tile));
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: var(--tile) 100%;
  animation: caliber-mist-drift var(--drift-t) linear infinite;
  animation-delay: var(--drift-delay);
  will-change: transform;
}

/* distant haze:   6-10%, 45-65 s */
.caliber-mist--far {
  top: 44%; height: 30%;
  opacity: .09;
  --tile: 2600px; --drift-t: 58s; --drift-delay: -21s;
  --bob-t: 19s; --bob-delay: -7s; --bob: 7px;
}
.caliber-mist--far .caliber-mist__strip { background-image: url("mist-far.webp"); }

/* midground mist: 10-16%, 30-45 s */
.caliber-mist--mid {
  top: 56%; height: 30%;
  opacity: .14;
  --tile: 1900px; --drift-t: 39s; --drift-delay: -13s;
  --bob-t: 13s; --bob-delay: -3s; --bob: 10px;
}
.caliber-mist--mid .caliber-mist__strip { background-image: url("mist-mid.webp"); }

/* foreground wisps: 12-20%, 20-30 s */
.caliber-mist--near {
  top: 66%; height: 32%;
  opacity: .18;
  --tile: 1600px; --drift-t: 25s; --drift-delay: -9s;
  --bob-t: 9s; --bob-delay: -5s; --bob: 12px;
}
.caliber-mist--near .caliber-mist__strip { background-image: url("mist-near.webp"); }

@keyframes caliber-mist-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--tile)), 0, 0); }
}
@keyframes caliber-mist-bob {
  from { transform: translate3d(0, calc(-1 * var(--bob)), 0); }
  to   { transform: translate3d(0, var(--bob), 0); }
}

/* 3b. WebGL snow-mist (caliber-atmos.js): far haze on the ridges, ribbons on
       the slopes, soft wisps along the lower edge, threads rising toward the
       dashboard. Rendered at half resolution -- the mist is soft, and the
       upscale only softens it further. When it is running the CSS strips
       above stand down; without WebGL they remain. */
.caliber-atmos__mistgl {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.nx-hero.caliber-atmos--gl .caliber-atmos__mistgl { opacity: 1; }
.nx-hero.caliber-atmos--gl .caliber-mist { display: none; }

/* 4. Snow behind the interface; faded out across the headline column. */
.caliber-atmos__snow {
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.3) 30%, #000 56%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.3) 30%, #000 56%);
}

/* Pause everything while the hero is offscreen or the tab is hidden. */
.nx-hero.caliber-atmos-paused .caliber-mist,
.nx-hero.caliber-atmos-paused .caliber-mist__strip { animation-play-state: paused; }

/* ----- 5-8: interface above the scene ----------------------------------- */
.nx-hero-grid > :first-child { position: relative; z-index: 3; }   /* text: always on top */
.nx-device { isolation: isolate; z-index: 1; }

/* 7. Foreground snow: a handful of large, faint, out-of-focus flakes between
      the dashboard and the text. Masked away from the headline column. */
.caliber-snow-front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 48%, #000 66%);
          mask-image: linear-gradient(90deg, transparent 0 48%, #000 66%);
}

/* Headline: Rajdhani 700 uppercase, three lines kept where space allows.
   Rajdhani's caps are short for their em, so the em runs at the top of the
   64-76px range. The shadow is a dark halo behind the glyphs -- the letter
   edges themselves are never blurred. */
.nx-hero-grid > :first-child > h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(44px, 5.3vw, 76px);
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--nx-text);
  text-shadow: 0 2px 28px rgba(11, 13, 16, .6);
}
.nx-hero-grid > :first-child > h1 .purple,
h1 .purple,
h2 .purple {
  color: var(--nx-gold);
  -webkit-text-fill-color: var(--nx-gold);
  background: none;
}
.nx-hero-grid > :first-child > p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--nx-muted);
  max-width: 31em;
}

/* 5. Emblem and aura, both on the device so they follow the dashboard. */
.nx-device::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 230%;
  aspect-ratio: 1.3;
  transform: translate(-50%, -50%);
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(189, 160, 227, calc(.16 * var(--aura-strength))) 0%,
    rgba(136, 87, 195, calc(.34 * var(--aura-strength))) 16%,
    rgba(136, 87, 195, calc(.20 * var(--aura-strength))) 36%,
    rgba(77, 41, 112, calc(.22 * var(--aura-strength))) 58%,
    rgba(77, 41, 112, calc(.08 * var(--aura-strength))) 80%,
    transparent 100%);
}
/* Emblem sized to read as the concept's: the C stands ~1.3x the height of the
   dashboard frame and rises ~160px above it. Geometry, at 1440px, from the
   emblem's measured proportions (C body = 11.5-90.6% of width, 14.2-96.8% of
   height): left arc starts ~x650 -- clear of the headline, which ends at
   x611 -- and the arrowhead lands ~x1400, still on screen. */
.nx-device::after {
  content: "";
  position: absolute;
  left: 40.8%;
  top: 9.5%;
  width: 171%;
  aspect-ratio: 1000 / 590;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: url("caliber-emblem.webp") center / contain no-repeat;
  opacity: var(--emblem-opacity);
  filter: drop-shadow(0 0 26px rgba(136, 87, 195, .38));
  /* The arrow's leading hairline runs at the height of the lead paragraph and
     measured 2.7:1 where it crossed the end of the first line. Fully clear
     until past the text (8%), then ramp in just as the C's arc begins. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0 16%, #000 23%);
          mask-image: linear-gradient(90deg, transparent 0 16%, #000 23%);
}

/* 6. Dashboard: nearly opaque so its contents stay crisp over moving air. */
.nx-device > * {
  background: linear-gradient(180deg, rgba(21, 23, 29, .97), rgba(16, 18, 23, .97)) !important;
  border: 1px solid var(--nx-line) !important;
  border-radius: 16px !important;
  box-shadow:
    0 0 0 1px rgba(230, 198, 129, .06),
    0 1px 0 0 rgba(243, 220, 166, .10) inset,
    0 30px 80px -30px rgba(136, 87, 195, .6),
    0 18px 40px -20px rgba(0, 0, 0, .7) !important;
}

/* ================================================================= HEADER */
.nx-header {
  background: rgba(11, 13, 16, .80);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border-bottom: 1px solid var(--nx-line);
  /* The live header runs edge to edge (logo at x=0); give it a gutter. */
  padding-left: clamp(20px, 2.8vw, 44px);
  padding-right: clamp(20px, 2.8vw, 44px);
}
.nx-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -28px;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(136, 87, 195, calc(.22 * var(--aura-strength))) 0%,
    transparent 100%);
}

/* The real mark at its true proportions. The live brand rule forces the image
   to a 32x32 square with !important, so this answers in kind. */
#caliber-brand-v53 img,
.caliber-brand-v53 img {
  width: auto !important;
  height: 34px !important;
  aspect-ratio: 811 / 507;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(136, 87, 195, .35)) !important;
}
#caliber-brand-v53 .caliber-wordmark { margin-left: 12px; }
#caliber-brand-v53 .caliber-wordmark__img,
.caliber-brand-v53 .caliber-wordmark__img {
  height: 11px !important;               /* -> 180px wide */
  aspect-ratio: 1130 / 69 !important;    /* not the mark's ratio set above */
  filter: none !important;
}

/* "Welcome to" stays live text; CALIBER is the wordmark on its own line,
   letters sitting on the line's baseline, period in the heading face. */
#caliberAccessIntro .caliber-access-title {
  margin: 10px 0 0;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: clamp(26px, 2.5vw, 34px) !important;
  line-height: 1.1 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}
.caliber-wordmark--access {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .08em;
  margin-top: .34em;
  line-height: 1;
  letter-spacing: 0;
}
.caliber-wordmark--access .caliber-wordmark__img {
  height: clamp(20px, 1.95vw, 28px) !important;   /* 328-459px wide */
  filter: drop-shadow(0 0 18px rgba(136, 87, 195, .32));
}

/* The .nx-home lockup (signed-out landing header and footer) now carries the authentic mark and
   wordmark instead of the NEXUS.SYS text; same proportions as the home header. */
.nx-home .caliber-mark {
  display: block;
  height: 32px;
  width: auto;
  aspect-ratio: 811 / 507;
  filter: drop-shadow(0 0 10px rgba(136, 87, 195, .35));
}
.nx-home .caliber-wordmark__img { height: 11px !important; }

.nx-links a { color: var(--nx-muted); font-size: 15px; font-weight: 500; transition: color .18s ease; }
.nx-links a:hover,
.nx-links a:focus-visible { color: var(--nx-text); }

.nx-nav-btn {
  border-radius: var(--radius-ctl);
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
}
.nx-nav-btn.signin {
  background: transparent;
  border: 1px solid var(--nx-line-2);
  color: var(--nx-text);
}
.nx-nav-btn.signin:hover { border-color: var(--nx-gold); color: var(--nx-gold-bright); }
.nx-nav-btn.create {
  background: linear-gradient(180deg, var(--nx-gold-bright), var(--nx-gold));
  border: 1px solid var(--nx-gold-deep);
  color: #14110B;
}

/* =================================================================== PANELS */
.nx-card,
.nx-public-card,
.nx-price,
.nx-step,
.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(21, 23, 29, .82) 0%, rgba(16, 18, 23, .90) 100%);
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 1px 0 0 rgba(243, 220, 166, .05) inset,
    0 18px 40px -26px rgba(0, 0, 0, .8);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.nx-card:hover,
.nx-public-card:hover,
.nx-price:hover,
.nx-step:hover {
  border-color: var(--nx-line-2);
  box-shadow:
    0 0 0 1px rgba(230, 198, 129, .16),
    0 18px 50px -22px rgba(136, 87, 195, .55),
    0 0 42px -14px rgba(189, 160, 227, .22);
  transform: translateY(-2px);
}

.nx-search {
  border-radius: var(--radius-panel) !important;
  background: linear-gradient(180deg, rgba(21, 23, 29, .9), rgba(16, 18, 23, .94)) !important;
  border: 1px solid var(--nx-line) !important;
}

/* Featured plan: gold edge and violet light, not a neon outline. */
.nx-price.featured,
.nx-price.primary,
.nx-card.primary,
.nx-price.full {
  border-color: rgba(230, 198, 129, .55);
  box-shadow:
    0 0 0 1px rgba(230, 198, 129, .14),
    0 24px 70px -30px rgba(136, 87, 195, .6);
}
.nx-badge {
  background: linear-gradient(180deg, var(--nx-gold-bright), var(--nx-gold));
  color: #14110B;
  border: 1px solid var(--nx-gold-deep);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  white-space: nowrap;
  padding: 5px 12px;
  box-shadow: 0 6px 22px -10px rgba(136, 87, 195, .6);
}
/* The glows below reach ~34% past their card; keep them from widening the
   page on phones. clip (not hidden) so no scroll container is created. */
main { overflow-x: hidden; overflow-x: clip; }
.nx-price.featured::before,
.nx-price.primary::before,
.nx-card.primary::before,
.nx-price.full::before {
  content: "";
  position: absolute;
  inset: -34%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(136, 87, 195, calc(.28 * var(--aura-strength))) 0%,
    rgba(77, 41, 112, .14) 55%,
    transparent 100%);
}

/* Links that carried no class inherited the old purple. Gold. */
.nx-card a,
.nx-public-card a,
.nx-step a,
.panel a:not(.nx-btn):not(.btn) {
  color: var(--nx-gold);
  font-weight: 600;
  text-decoration: none;
  transition: color .18s ease;
}
.nx-card a:hover,
.nx-public-card a:hover,
.nx-step a:hover,
.panel a:not(.nx-btn):not(.btn):hover { color: var(--nx-gold-bright); }

/* Search tabs: the live page marks the active tab positionally in purple. */
.nx-tabs div { color: var(--nx-muted); font-weight: 500; }
.nx-tabs div:first-child {
  color: var(--nx-gold);
  border-bottom: 2px solid var(--nx-gold);
}

/* Announcement strip link. */
.nx-strip a { color: var(--nx-gold); font-weight: 600; }
.nx-strip a:hover { color: var(--nx-gold-bright); }

/* ===================================================================== ICONS
   SVG line icons from the markup patch inherit this gold via currentColor. */
.nx-card-icon,
.nx-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--nx-gold);
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-ctl);
  background: rgba(230, 198, 129, .05);
  filter: drop-shadow(0 0 12px rgba(136, 87, 195, .28));
}
.nx-card-icon svg { width: 22px; height: 22px; display: block; }
.nx-step-icon { font: 600 15px/1 var(--font-body); }

/* ================================================= BUTTONS: PURPLE POWER-UP
   Primary  = .nx-btn.gold / .purple / .primary, .btn.primary, header Create.
   Secondary= .nx-btn.outline, .btn.outline / .ghost, header Sign In.

   Rest     champagne gold (#F3DCA6 -> #E6C681 -> #B98C49), graphite label,
            fine gold border, inner highlight, soft drop shadow.
   Hover    ~300ms: violet builds at the edges (plum shadow, violet perimeter,
            lavender rim), one translucent sheen pass (600ms), 2px lift, gold
            brightens a touch, arrow nudges 3px; then a steady aura.
   Press    back to rest height, tighter glow.          Focus  violet outline.
   Every effect is box-shadow, transform or a pointer-events:none pseudo
   inside the button, so nothing changes size or catches clicks; the label is
   never filtered or blurred.

   Selectors are prefixed "html body" to outrank the live page's
   button:not(.red):not(.green) {border-color !important} (0,2,1), its hover
   wash (0,3,1 with :hover) and [class*="gold"] {background !important}. */
@property --cta-glint { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  --cta-gold-hi: #F3DCA6;
  --cta-gold: #E6C681;
  --cta-gold-lo: #B98C49;
  --cta-ink: #0B0D10;
  --cta-plum: 77, 41, 112;       /* #4D2970 */
  --cta-violet: 136, 87, 195;    /* #8857C3 */
  --cta-lav: 189, 160, 227;      /* #BDA0E3 */
  --cta-focus: #A47BDB;          /* violet, 5:1 on the charcoal page */
  --cta-in: 300ms cubic-bezier(.22, .7, .25, 1);
  --cta-out: 260ms cubic-bezier(.4, 0, .2, 1);
}

html body :is(.nx-btn, .btn, .nx-nav-btn) {
  position: relative;
  isolation: isolate;               /* sheen sits between fill and label */
  overflow: hidden;                 /* sheen stays on the surface */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 13px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: .005em !important;
  text-transform: none !important;
  cursor: pointer;
  transition:
    transform var(--cta-out),
    box-shadow var(--cta-out),
    border-color var(--cta-out),
    color var(--cta-out),
    --cta-glint var(--cta-out);
}
html body :is(.nx-btn, .btn) { min-height: 48px; padding: 12px 22px; }
html body .nx-price .nx-btn { padding: 12px 14px; }
html body .nx-nav-btn { min-height: 44px; padding: 10px 18px; }

/* The sheen: one diagonal pass of translucent violet light. */
html body :is(.nx-btn, .btn, .nx-nav-btn)::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 28%,
    rgba(var(--cta-lav), .30) 42%,
    rgba(var(--cta-violet), .34) 50%,
    rgba(var(--cta-lav), .18) 58%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform 0s;          /* snaps home unseen after leaving */
}

/* ---- Primary: rest */
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create) {
  background:
    linear-gradient(rgba(255, 246, 222, var(--cta-glint)), rgba(255, 246, 222, var(--cta-glint))),
    linear-gradient(180deg, var(--cta-gold-hi) 0%, var(--cta-gold) 48%, var(--cta-gold) 62%, var(--cta-gold-lo) 100%) !important;
  color: var(--cta-ink) !important;
  -webkit-text-fill-color: var(--cta-ink);
  border: 1px solid rgba(185, 140, 73, .95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, .65),
    inset 0 -1px 0 rgba(120, 82, 34, .28),
    0 0 0 0 rgba(var(--cta-lav), 0),
    0 0 0 0 rgba(var(--cta-violet), 0),
    0 8px 20px -10px rgba(0, 0, 0, .75);
}

/* Small arrow after the label on call-to-action primaries (not the header,
   the search field, the dashboard mock-up, or a label that already ends
   in an arrow). Drawn with a mask, so it adds no announced text. */
html body :is(.nx-hero-actions .nx-btn.gold, .nx-cta-actions .nx-btn.gold,
              .nx-price .nx-btn.purple, .btn.primary)::after {
  content: "";
  flex: none;
  width: 14px;
  height: 10px;
  background: currentColor;
  -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;
  pointer-events: none;
  transition: transform var(--cta-out);
}

/* ---- Secondary: darker and quieter, same purple response at lower power */
html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin) {
  background: linear-gradient(180deg, rgba(27, 29, 36, .92), rgba(16, 18, 23, .92)) !important;
  color: var(--cta-gold) !important;
  -webkit-text-fill-color: var(--cta-gold);
  border: 1px solid rgba(230, 198, 129, .38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 0 0 0 rgba(var(--cta-violet), 0),
    0 6px 16px -10px rgba(0, 0, 0, .8);
}
html body .nx-nav-btn.signin { color: var(--nx-text) !important; -webkit-text-fill-color: var(--nx-text); }
html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin)::before { opacity: .55; }

/* ---- Hover: the charge (pointer devices only) */
@keyframes cta-charge {
  0%   { box-shadow:
           inset 0 1px 0 rgba(255, 250, 235, .65), inset 0 -1px 0 rgba(120, 82, 34, .28),
           0 0 0 0 rgba(var(--cta-lav), 0), 0 0 0 0 rgba(var(--cta-violet), 0),
           0 8px 20px -10px rgba(0, 0, 0, .75); }
  55%  { box-shadow:
           inset 0 1px 0 rgba(255, 250, 235, .75), inset 0 -1px 0 rgba(120, 82, 34, .22),
           0 0 0 1px rgba(var(--cta-lav), .75), 0 0 22px 3px rgba(var(--cta-violet), .62),
           0 12px 28px -6px rgba(var(--cta-plum), .95); }
  100% { box-shadow:
           inset 0 1px 0 rgba(255, 250, 235, .7), inset 0 -1px 0 rgba(120, 82, 34, .24),
           0 0 0 1px rgba(var(--cta-lav), .6), 0 0 16px 1px rgba(var(--cta-violet), .52),
           0 10px 24px -6px rgba(var(--cta-plum), .9); }
}
@media (hover: hover) and (pointer: fine) {
  html body :is(.nx-btn, .btn, .nx-nav-btn):hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(-2px);
    transition:
      transform var(--cta-in), box-shadow var(--cta-in), border-color var(--cta-in),
      color var(--cta-in), --cta-glint var(--cta-in);
  }
  html body :is(.nx-btn, .btn, .nx-nav-btn):hover:not(:disabled):not([aria-disabled="true"])::before {
    transform: translateX(120%);
    transition: transform 600ms cubic-bezier(.45, .05, .3, 1) 80ms;
  }
  html body :is(.nx-btn, .btn, .nx-nav-btn):hover:not(:disabled):not([aria-disabled="true"])::after {
    transform: translateX(3px);
    transition: transform var(--cta-in);
  }
  html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create):hover:not(:disabled):not([aria-disabled="true"]) {
    --cta-glint: .14;
    background:
      linear-gradient(rgba(255, 246, 222, var(--cta-glint)), rgba(255, 246, 222, var(--cta-glint))),
      linear-gradient(180deg, var(--cta-gold-hi) 0%, var(--cta-gold) 48%, var(--cta-gold) 62%, var(--cta-gold-lo) 100%) !important;
    border-color: rgba(var(--cta-lav), .9) !important;
    animation: cta-charge 520ms cubic-bezier(.22, .7, .25, 1) both;
  }
  html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin):hover:not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(180deg, rgba(31, 30, 42, .94), rgba(18, 18, 26, .94)) !important;
    color: var(--cta-gold-hi) !important;
    -webkit-text-fill-color: var(--cta-gold-hi);
    border-color: rgba(var(--cta-lav), .55) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .07),
      0 0 12px 0 rgba(var(--cta-violet), .38),
      0 8px 20px -8px rgba(var(--cta-plum), .85) !important;
  }
  html body .nx-nav-btn.signin:hover { color: var(--nx-text) !important; -webkit-text-fill-color: var(--nx-text); }
}

/* ---- Press: down to rest height, tighter glow. Also the touch response. */
html body :is(.nx-btn, .btn, .nx-nav-btn):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0);
  animation: none;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create):active:not(:disabled):not([aria-disabled="true"]) {
  --cta-glint: .06;
  background:
      linear-gradient(rgba(255, 246, 222, var(--cta-glint)), rgba(255, 246, 222, var(--cta-glint))),
      linear-gradient(180deg, var(--cta-gold-hi) 0%, var(--cta-gold) 48%, var(--cta-gold) 62%, var(--cta-gold-lo) 100%) !important;
  border-color: rgba(var(--cta-lav), .9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, .5), inset 0 -1px 0 rgba(120, 82, 34, .3),
    0 0 0 1px rgba(var(--cta-lav), .8), 0 0 8px 1px rgba(var(--cta-violet), .7),
    0 4px 10px -4px rgba(var(--cta-plum), .95) !important;
}
html body :is(.nx-btn.outline, .btn.outline, .btn.ghost, .nx-nav-btn.signin):active:not(:disabled):not([aria-disabled="true"]) {
  border-color: rgba(var(--cta-lav), .6) !important;
  background: linear-gradient(180deg, rgba(31, 30, 42, .94), rgba(18, 18, 26, .94)) !important;
  box-shadow: 0 0 0 1px rgba(var(--cta-lav), .35), 0 0 8px 0 rgba(var(--cta-violet), .45) !important;
}

/* ---- Keyboard focus: clear violet outline, offset from the edge. */
html body :is(.nx-btn, .btn, .nx-nav-btn):focus-visible {
  outline: 2px solid var(--cta-focus) !important;
  outline-offset: 3px !important;
}
html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create):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(var(--cta-lav), .6), 0 0 16px 1px rgba(var(--cta-violet), .5),
    0 8px 20px -10px rgba(0, 0, 0, .75);
}

/* ---- Disabled: visibly inactive, no motion, no glow. */
html body :is(.nx-btn, .btn, .nx-nav-btn):is(:disabled, [aria-disabled="true"]) {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  animation: none !important;
  filter: saturate(.35);
}
html body :is(.nx-btn, .btn, .nx-nav-btn):is(:disabled, [aria-disabled="true"])::before { display: none; }

/* The dashboard mock-up's "View Details" is illustration, not a CTA. */
html body .nx-device :is(.nx-btn, .btn) { min-height: 0; padding: 8px; }

span.purple, strong.purple, .nx-kicker.purple, p .purple { color: var(--nx-gold); }

/* ===================================================== SECTION TRANSITIONS */
#caliberFeatures, #nx-community, #publicService,
#howItWorks, #caliberPricing, #nx-cta { position: relative; isolation: isolate; }

#caliberFeatures::before, #nx-community::before, #publicService::before,
#howItWorks::before, #caliberPricing::before, #nx-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12%;
  width: min(1180px, 100%);
  height: 320px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(136, 87, 195, calc(.14 * var(--aura-strength))) 0%,
    transparent 100%);
}

/* ======================================================================= DETAIL */
.nx-chip {
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  background: rgba(136, 87, 195, .10);
  color: var(--nx-text);
}
.nx-seal { filter: drop-shadow(0 0 22px rgba(136, 87, 195, .34)); }
.nx-stat strong,
.nx-price-amount { color: var(--nx-gold); font-family: var(--font-head); }

/* Stat captions are #4F3B58 on the live page -- about 2:1, effectively
   unreadable. Supporting-text colour. */
.caliber-v38-stat-label { color: var(--nx-muted) !important; }
.nx-footer {
  border-top: 1px solid var(--nx-line);
  background: linear-gradient(180deg, transparent, rgba(77, 41, 112, .18));
}

.nx-field input, .nx-field select, .field input, .field select {
  background: rgba(16, 18, 23, .9);
  border: 1px solid var(--nx-line);
  border-radius: var(--radius-ctl);
  color: var(--nx-text);
  font-family: var(--font-body);
}
.nx-field input:focus, .field input:focus {
  outline: none;
  border-color: var(--nx-gold);
  box-shadow: 0 0 0 3px rgba(230, 198, 129, .18);
}

/* "CALIBER ACCESS" was rgb(93,55,111) on the live page -- about 2:1. */
.caliber-access-kicker { color: var(--nx-gold) !important; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--nx-gold);
  outline-offset: 2px;
}

/* ================================================================ SITE-WIDE
   One charcoal ground below the hero, purple only as local light. */
html, body { background: var(--nx-bg) !important; }
html body { padding-bottom: 0 !important; }      /* was reserved for the fixed ticker */
/* Legacy section washes reach (0,1,2) !important via :nth-of-type; :not(#_)
   lifts these above them without naming every generation. */
html body main section:not(#_) { background: transparent !important; }
html body main:not(#_) { background: var(--nx-bg) !important; }   /* legacy purple gradient stack */
html body .nx-footer { background: var(--nx-bg) !important; }
/* Panels: graphite surfaces (legacy card fills are plum, !important). */
html body :is(.nx-card, .nx-public-card, .nx-price, .nx-step):not(#_) {
  background: linear-gradient(180deg, rgba(21, 23, 29, .92) 0%, rgba(16, 18, 23, .96) 100%) !important;
}
html body .nx-flow-box { background: transparent !important; border: 0 !important; padding: 0 !important; }

/* Consistent section rhythm. */
html body :is(#caliberFeatures, .nx-community, #publicService, #howItWorks, #caliberPricing) {
  padding-block: clamp(44px, 6vw, 84px) !important;
}

/* ---- Type roles: Rajdhani for large headings, Inter for everything small. */
.caliber-section-title {
  margin: 0 auto clamp(24px, 3vw, 36px);
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
html body :is(.nx-card, .nx-price, .nx-public-card, .nx-step) :is(h3, h4) {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.3;
}
html body .nx-card h3 { font-size: 18px; }
html body .nx-public-card h3 { font-size: 17px; margin: 0 0 6px; }
html body .nx-price h3 { font-size: 18px; }
html body .nx-step h3 { font-size: 16px; margin: 0 0 4px; }
html body .nx-cta .caliber-cta-title {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.4vw, 30px);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 6px;
}
/* The last Space Mono users, and the weights the page actually loads. */
html body :is(.logo, .mono, .pill, .eyebrow, .btn) { font-family: var(--font-body) !important; }
.job-source-label { font-weight: 700 !important; }
.job-source-track b { font-weight: 700 !important; }
.job-source-track em { font-weight: 600 !important; }
html body .nx-price-amount small {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #A39DAD !important;
}

/* ---- Contrast fixes (all four measured failures) */
/* 1. Stat captions: the live page paints them with -webkit-text-fill-color
      #4F3B58 at (0,2,0) !important -- about 2:1. */
html body .nx-stat .caliber-v38-stat-label {
  color: var(--nx-muted) !important;
  -webkit-text-fill-color: var(--nx-muted) !important;
  font-weight: 500 !important;
}
/* 2. Public-service subtitles: old purple #7342B3, 3.05:1 -> lavender. */
html body .nx-public-card b { color: var(--aura-lavender) !important; font-weight: 600; }
/* 3. "Built for people navigating..." : Space Mono #777181, 4.31:1 -> label. */
html body .nx-trust-title {
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  color: var(--nx-gold) !important;
}
html body .nx-trust { gap: 8px; }
html body .nx-trust span { color: var(--nx-muted); gap: 7px; padding: 0 12px; font-size: 13.5px; }
/* The live v38 script tags these chips and tints them plum (0,2,0) !important. */
html body .nx-trust span.caliber-v38-audience {
  color: var(--nx-muted) !important;
  -webkit-text-fill-color: var(--nx-muted) !important;
  font-weight: 500 !important;
}
html body .nx-trust span svg { color: var(--nx-gold); flex: none; }

/* The search panel sits inside the hero; with the shorter headline column it
   now overlaps the atmosphere layers, so it gets its own stacking level. */
html body #caliberSearch { position: relative; z-index: 3; }
/* 4. Footer legal line: #6C6674, 3.66:1 -> 7:1. */
html body .nx-legal { color: #A39DAD !important; }
html body .nx-legal span { color: inherit !important; }

/* ---- Icons from the markup patch */
.nx-tabs div { gap: 8px; }
.nx-tabs div svg { flex: none; opacity: .9; }
.nx-strip b { display: inline-flex; color: var(--nx-gold); }
html body .nx-seal {
  width: 46px; height: 46px;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--nx-line);
  background: rgba(230, 198, 129, .05);
  color: var(--nx-gold);
}
html body .nx-step-icon {
  border-radius: var(--radius-ctl);
  background: rgba(230, 198, 129, .05);
  color: var(--nx-gold);
}
html body .nx-phone-icon {
  background: rgba(230, 198, 129, .08);
  border: 1px solid var(--nx-line-2);
  color: var(--nx-gold);
}

/* ---- Skip link */
.caliber-skip {
  position: absolute;
  left: 16px;
  top: -120px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--cta-gold);
  color: var(--cta-ink) !important;
  font: 600 15px/1.2 var(--font-body);
  text-decoration: none;
}
.caliber-skip:focus { top: 12px; outline: 2px solid var(--cta-focus); outline-offset: 3px; }
#caliber-main:focus { outline: none; }

/* ---- Hero: the two account actions side by side */
.nx-hero-actions { align-items: center; }

/* ---- Welcome band: its own section beneath the hero */
.caliber-access-band {
  position: relative;
  isolation: isolate;
  padding: clamp(52px, 7vw, 96px) 0 clamp(24px, 3vw, 40px);
  text-align: center;
}
.caliber-access-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 100%);
  height: 280px;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(136, 87, 195, calc(.18 * var(--aura-strength))) 0%,
    rgba(77, 41, 112, .10) 55%,
    transparent 100%);
}
html body .caliber-access-band .caliber-access-intro {
  position: static;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: center;
}
html body .caliber-access-band .caliber-access-intro p {
  max-width: 34em;
  margin: 14px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--nx-muted);
}

/* ---- Job-source ticker: in the page flow beneath the hero */
html body #job-source-ticker {
  position: relative !important;
  left: auto; right: auto; bottom: auto;
  z-index: 2;
  width: 100%;
  height: 44px;
  background: var(--nx-bg2) !important;
  border-top: 1px solid var(--nx-line) !important;
  border-bottom: 1px solid var(--nx-line);
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
html body .job-source-label {
  color: var(--nx-gold);
  font-size: 12px;
  letter-spacing: .16em;
  background: rgba(230, 198, 129, .06);
  border-right: 1px solid var(--nx-line);
}
html body .job-source-track { color: var(--nx-muted); }
html body .job-source-track b { color: var(--nx-text); }
html body .job-source-track em { color: var(--aura-lavender); }
/* Pause while pointed at or focused (the region is focusable for this). */
#job-source-ticker:hover .job-source-track,
#job-source-ticker:focus .job-source-track,
#job-source-ticker:focus-within .job-source-track { animation-play-state: paused; }
#job-source-ticker:focus-visible { outline: 2px solid var(--cta-focus); outline-offset: -3px; }

/* ---- Pricing: buttons share the card floor; no forced list height */
html body .nx-price { display: flex; flex-direction: column; }
html body .nx-price ul { min-height: 0 !important; margin: 14px 0 24px; }
html body .nx-price > .nx-btn { margin-top: auto; width: 100%; }

/* ---- Standalone text links: at least 32px tall targets */
html body :is(.nx-card, .nx-public-card) > a,
html body .nx-strip a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-block: 4px;
}
html body .nx-footer-grid a {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
}

/* ---- Mobile menu (≤980px, where the live page hides the nav links) */
.caliber-menu-btn { display: none; }

/* =============================================================== RESPONSIVE */

/* Wide: give the headline column room for three unbroken lines. */
@media (min-width: 1101px) {
  .nx-hero-grid { grid-template-columns: 1.08fr .92fr !important; }
  .nx-hero-grid > :first-child > h1 { white-space: nowrap; }
  /* Audience chips on one line; they run into the open space under the dashboard. */
  html body .nx-trust { flex-wrap: nowrap; width: max-content; }
}

@media (max-width: 980px) {
  :root { --aura-strength: .85; --emblem-opacity: .62; }
  /* Stacked layout: no headline beside the dashboard, so the C centres and
     rises above it. */
  .nx-device::after {
    left: 50%;
    top: 18%;
    width: 150%;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .nx-device::before { width: 190%; }

  /* Menu button + the existing nav as a drop-down panel. */
  .caliber-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-left: auto;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(230, 198, 129, .38);
    background: linear-gradient(180deg, rgba(27, 29, 36, .92), rgba(16, 18, 23, .92));
    color: var(--nx-text);
    font: 600 14px/1 var(--font-body);
    cursor: pointer;
    transition: border-color var(--cta-out), box-shadow var(--cta-out);
  }
  .caliber-menu-btn svg { color: var(--nx-gold); }
  .caliber-menu-btn:hover,
  .caliber-menu-btn[aria-expanded="true"] {
    border-color: rgba(var(--cta-lav), .55);
    box-shadow: 0 0 12px rgba(var(--cta-violet), .38);
  }
  .caliber-menu-btn:focus-visible { outline: 2px solid var(--cta-focus); outline-offset: 3px; }
  html body #caliber-auth-v55r { margin-left: 8px !important; }

  html body .nx-header > .nx-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    display: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 6px clamp(14px, 4vw, 32px) 14px;
    background: rgba(11, 13, 16, .98);
    border-bottom: 1px solid var(--nx-line);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .85), 0 18px 40px -24px rgba(77, 41, 112, .7);
  }
  html body .nx-header.caliber-menu-open > .nx-nav { display: block; }
  html body .nx-header.caliber-menu-open .nx-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 0;
    padding: 0;
  }
  html body .nx-header .nx-links a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    min-height: 48px;
    padding: 0 4px;
    border-bottom: 1px solid rgba(230, 198, 129, .10);
    font-size: 16px;
    color: var(--nx-text);
  }
  html body .nx-header .nx-links a:last-child { border-bottom: 0; }
}

@media (max-width: 860px) {
  .nx-card, .nx-public-card, .nx-price, .nx-step, .panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, rgba(21, 23, 29, .95), rgba(16, 18, 23, .97));
  }
  .nx-card:hover, .nx-public-card:hover, .nx-price:hover, .nx-step:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Phones: own photo crop, a vertical treatment because text spans the full
   width, header sized and wrapped (never clipped). */
@media (max-width: 680px) {
  :root { --scene-h: 900px; }

  .caliber-atmos__photo {
    background-image: url("hero-mountains-mobile.webp");
    background-position: 74% 30%;
  }
  .caliber-atmos__tint {
    background:
      linear-gradient(180deg, transparent 60%, rgba(11, 13, 16, .6) 82%, #0B0D10 100%),
      radial-gradient(80% 40% at 70% 66%,
        rgba(136, 87, 195, calc(.26 * var(--aura-strength))) 0%,
        rgba(77, 41, 112, calc(.2 * var(--aura-strength))) 50%,
        transparent 100%),
      /* Held at 80% through the headline and lead (to ~38% down): on phones
         the lead sits over the photo's brightest cloud band, and a lighter
         curve measured 3.8:1 there. Eases where the ridge begins. */
      linear-gradient(180deg,
        rgba(11, 13, 16, .82) 0%,
        rgba(11, 13, 16, .80) 20%,
        rgba(11, 13, 16, .80) 38%,
        rgba(11, 13, 16, .58) 50%,
        rgba(11, 13, 16, .55) 62%,
        rgba(11, 13, 16, .66) 76%);
  }
  .caliber-mist--far  { top: 40%; }
  .caliber-mist--mid  { top: 52%; --tile: 1300px; }
  .caliber-mist--near { top: 62%; --tile: 1100px; }
  /* Text spans the full width on phones, so snow stays clear of the headline
     and lead entirely (to ~32% down), then fills in over the ridge. */
  .caliber-atmos__snow {
    -webkit-mask-image: linear-gradient(180deg, transparent 0 32%, rgba(0,0,0,.4) 48%, #000 72%);
            mask-image: linear-gradient(180deg, transparent 0 32%, rgba(0,0,0,.4) 48%, #000 72%);
  }

  .nx-hero-grid > :first-child > h1 { font-size: clamp(38px, 10.65vw, 46px); line-height: .98; }
  .nx-hero-grid > :first-child > p  { font-size: 17px; }

  /* Header, two rows: brand + Menu, then Sign In / Create Account at full
     touch size. The header is not sticky, so the second row costs nothing
     once scrolled, and the wordmark keeps a readable size. */
  .nx-header {
    height: auto !important;
    min-height: 60px;
    padding: 10px 14px 12px;
    gap: 10px 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  #caliber-brand-v53, .caliber-brand-v53 { margin-right: 0 !important; gap: 8px !important; }
  .nx-nav-actions { margin-left: auto; gap: 8px; }
  .nx-nav-actions .create { display: inline-flex !important; }
  html body #caliber-auth-v55r {
    order: 9999 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    gap: 8px !important;
  }
  html body #caliber-auth-v55r .nx-nav-btn { flex: 1 1 0 !important; min-height: 44px; padding: 0 12px; font-size: 14px; }
  #caliber-brand-v53 img, .caliber-brand-v53 img { height: 30px !important; }
  #caliber-brand-v53 span, .caliber-brand-v53 span { font-size: 14px !important; }
  #caliber-brand-v53 img.caliber-mark, .caliber-brand-v53 img.caliber-mark { height: 26px !important; }
  #caliber-brand-v53 .caliber-wordmark { margin-left: 0; }
  #caliber-brand-v53 .caliber-wordmark__img { height: 7.5px !important; }   /* 123px */
  .caliber-wordmark--access .caliber-wordmark__img { height: clamp(16px, 5.2vw, 22px) !important; }
  #caliberAccessIntro .caliber-access-title { font-size: 24px !important; }

  /* Hero actions: full-width pair, stacked. */
  .nx-hero-actions { flex-direction: column; align-items: stretch; }
  html body .nx-hero-actions .nx-btn { width: 100%; }

  /* Search: all four tabs, 2 x 2. */
  html body .nx-tabs { grid-template-columns: 1fr 1fr !important; height: auto !important; }
  html body .nx-tabs div:nth-child(n+3) { display: flex !important; }
  html body .nx-tabs div { min-height: 48px; font-size: 14px; }
  html body .nx-tabs div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .06); }
  html body .nx-tabs div:first-child { border-bottom: 2px solid var(--nx-gold); }

  /* Pricing cards size to content. */
  html body .nx-price { min-height: 0 !important; }

  /* Strip: fixed 40px on the live page while its text wraps to 3 lines. */
  .nx-strip,
  .nx-strip .nx-wrap { height: auto !important; min-height: 40px; }
  .nx-strip .nx-wrap {
    padding-block: 8px;
    flex-wrap: wrap;
    gap: 4px 10px;
    line-height: 1.45;
    font-size: 13px;
  }

  /* Dashboard frame: fixed 310px on the live page; rows hang out. */
  .nx-device > :first-child { height: auto !important; }
}

/* Simplify on narrow phones: no emblem (it reduced to a stray hairline);
   the aura and the mountains carry the scene. */
@media (max-width: 480px) {
  :root { --aura-strength: .7; }
  .nx-device::after { display: none; }
}

/* Job-source ticker: the live page lets the label + track force the fixed bar
   wider than a phone (435px at 375). Let the track shrink and clip instead. */
#job-source-ticker { max-width: 100%; }
#job-source-ticker .job-source-window { min-width: 0; }
@media (max-width: 480px) {
  #job-source-ticker .job-source-label { font-size: 11px; letter-spacing: .1em; padding: 0 8px; }
}

/* Closing actions: stacked, full width, where side by side would wrap. */
@media (max-width: 560px) {
  html body .nx-cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
  html body .nx-cta-actions .nx-btn { width: 100%; }
}

/* ============================================================ MOTION PREFS */
@media (prefers-reduced-motion: reduce) {
  /* Static mist, no drift, no snow. */
  .caliber-mist,
  .caliber-mist__strip { animation: none !important; }
  .caliber-atmos__snow,
  .caliber-snow-front { display: none !important; }
  .caliber-atmos__mistgl { transition: none; }
  /* Ticker: static, every item readable, wrapped instead of scrolling. */
  html body #job-source-ticker { height: auto; align-items: stretch; }
  html body .job-source-window { white-space: normal; padding: 10px 14px; }
  html body .job-source-track {
    animation: none !important;
    padding-left: 0 !important;
    display: block;
    white-space: normal;
    line-height: 1.6;
  }
  html body .job-source-track span { display: inline-block; margin-right: 24px; }
  .nx-card, .nx-public-card, .nx-price, .nx-step, .nx-btn, .btn, .nx-links a { transition: none; }
  .nx-card:hover, .nx-public-card:hover, .nx-price:hover, .nx-step:hover { transform: none; }

  /* Buttons: no sheen, lift, nudge or charge -- a static glow on hover and
     press, plus the focus outline. */
  html body :is(.nx-btn, .btn, .nx-nav-btn),
  html body :is(.nx-btn, .btn, .nx-nav-btn)::after { transition: none !important; animation: none !important; }
  html body :is(.nx-btn, .btn, .nx-nav-btn)::before { display: none; }
  html body :is(.nx-btn, .btn, .nx-nav-btn):is(:hover, :active),
  html body :is(.nx-btn, .btn, .nx-nav-btn):is(:hover, :active)::after { transform: none !important; }
  html body :is(.nx-btn.gold, .nx-btn.purple, .nx-btn.primary, .btn.primary, .btn.purple, .nx-nav-btn.create):hover:not(:disabled) {
    box-shadow:
      inset 0 1px 0 rgba(255, 250, 235, .7), inset 0 -1px 0 rgba(120, 82, 34, .24),
      0 0 0 1px rgba(var(--cta-lav), .6), 0 0 16px 1px rgba(var(--cta-violet), .52),
      0 10px 24px -6px rgba(var(--cta-plum), .9);
  }
}

@media (prefers-contrast: more) {
  :root { --aura-strength: .4; --emblem-opacity: .2; --nx-line: rgba(230, 198, 129, .4); }
  .caliber-mist, .caliber-atmos__mistgl { display: none !important; }
}

/* Brand identities as images, approved assets only: the CALIBER wordmark (cut from the supplied
   lockup; there is no CALIBER typeface) and the ASTRŒGROUP logo. Sized by height so the letterforms
   and spacing never change; a narrow container shrinks the whole image (both axes), never one axis. */
img.caliber-wm { display: inline-block; width: auto; height: auto; max-height: .72em; max-width: 100%;
  vertical-align: baseline; margin: 0; }   /* clear space comes from .wm-gap, never margins (they'd indent wrapped lines) */
img.caliber-wm--sm { max-height: none; max-width: none; height: max(.74em, 10px); width: auto; }
img.astroe-wm { display: inline-block; width: auto; height: auto; max-height: 1.15em; max-width: 100%;
  vertical-align: middle; }
/* Flex containers drop the spaces around an inline image: give brand links an explicit gap. */
html body :is(.caliber-access-home, .caliber-final-brand, .nx-dash-head > b) { display: inline-flex; align-items: center; }

/* Clear space around the inline wordmark. Its own letter gaps are 1.45 x its height, so the space on
   each side is widened to ~1.6 x its height (word-spacing on the one space, which collapses at a line
   break, so a line the wordmark starts or ends is never indented). Punctuation gets a fixed small gap. */
.wm-gap { word-spacing: .9em; }
.wm-punct { display: inline-block; width: .5em; }

/* Flex containers: spaces vanish between items, so the clear space is the gap (~1.6 x wordmark height). */
html body :is(.caliber-access-home, .caliber-final-brand, .nx-dash-head > b) { gap: 1.25em !important; }
/* Plan names: a deliberate stacked lockup - wordmark over a gold tier label (as in the admin sidebar). */
html body .nx-price h3:has(> img.caliber-wm) {
  display: flex; flex-direction: column; align-items: flex-start; gap: .55em;
  font-size: 12px !important; letter-spacing: .3em !important; text-transform: uppercase !important; color: var(--nx-gold) !important;
}
html body .nx-price h3 > img.caliber-wm { max-height: none; height: 14px; }
html body .nx-price h3 .wm-gap { display: none; }
/* Footer column heading: the wordmark at a readable size, with room above the links. */
.cp-footer__col h2 img.caliber-wm { max-height: none; height: 12px; }
.cp-footer__col h2:has(> img.caliber-wm) { margin-bottom: 10px; }
/* The gap spans are spacing only: never let page rules for <span> (margins, padding) or flex layout touch them. */
.wm-gap, .wm-punct { margin: 0 !important; padding: 0 !important; }
:is(.caliber-access-home, .caliber-final-brand, .nx-dash-head > b) .wm-gap { display: none; }

/* ====================================================== SLOGAN (v95)
   "Know Your Caliber. Calibrate Your Life." - the brand line. Rajdhani caps in the champagne gold
   gradient with a fine violet rule beneath; one style, sized per place (footer, sign-in card, legal
   line, closing band). The hero uses it as the h1 with the page's own headline type. */
.caliber-slogan {
  display: inline-block;
  margin: 0;
  padding-bottom: 6px;
  font: 700 15px/1.2 var(--font-head) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--nx-gold-bright);
  background: linear-gradient(180deg, #F7E7BF 0%, #E6C681 55%, #C99B55 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.caliber-slogan::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(189, 160, 227, .95), rgba(136, 87, 195, .2));
  box-shadow: 0 0 10px rgba(136, 87, 195, .6);
}
.caliber-slogan--footer { margin-top: 18px; font-size: 14px !important; }
.caliber-slogan--card { display: block; width: fit-content; margin: 0 0 10px; font-size: 12.5px !important; letter-spacing: .2em !important; }
.caliber-slogan--legal { font-size: 12.5px !important; padding-bottom: 0; }
.caliber-slogan--legal::after { display: none; }
.nx-footer .caliber-slogan { margin-bottom: 12px; }
/* Hero headline: the slogan, two lines; the second in gold like the old third line. */
html body h1.caliber-slogan-h1 { font-size: clamp(38px, 4.3vw, 62px) !important; line-height: 1.02; letter-spacing: .005em; }
/* Closing band: the slogan as the band's heading. */
html body .nx-cta .caliber-slogan-cta {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #F7E7BF 0%, #E6C681 60%, #C99B55 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html body .nx-cta .nx-cta-actions :is(.nx-btn, .btn) { white-space: nowrap; }
@media (forced-colors: active) { .caliber-slogan, html body .nx-cta .caliber-slogan-cta { -webkit-text-fill-color: CanvasText; background: none; } }

/* v95: the hero byline above the slogan. A quiet maker's mark, not a second headline: muted grey instead of gold (the
   gold belongs to "Calibrate Your Life."), lighter weight, the product name a step brighter, "by" in lowercase. */
html body .nx-hero .nx-kicker.caliber-byline {
  color: rgba(226, 222, 234, .62) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
  margin-bottom: 12px !important;
}
html body .nx-hero .caliber-byline b { color: rgba(240, 236, 246, .86); font-weight: 600; }
html body .nx-hero .caliber-byline .caliber-byline__by { text-transform: none; letter-spacing: .06em; font-style: italic; opacity: .85; }
@media (forced-colors: active) { html body .nx-hero .nx-kicker.caliber-byline, html body .nx-hero .caliber-byline b { color: CanvasText !important; } }