/* Nocturne — storefront stylesheet
   ------------------------------------------------------------------
   Additive only. Loads after css/nocturne.css and builds every
   storefront surface out of the existing tokens, cut-corner geometry,
   hairline borders and HUD conventions. No new palette, no new
   display face, no rounded card language.
   ------------------------------------------------------------------ */

:root{
  --header-h:64px;
  /* Set by storefront.js from the active status definition. */
  --status-color:var(--online);
}

/* ── utilities ─────────────────────────────────────────────── */

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Sticky header must not cover the target of an in-page jump. */
section[id], [id]{scroll-margin-top:calc(var(--header-h) + var(--sp-5));}

/* Nothing may push the page sideways. `clip` rather than `hidden`:
   `hidden` would turn body into a scroll container and break the
   sticky header. */
html,body{max-width:100%; overflow-x:clip;}

a.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
.btn{min-height:44px;}
.btn-sm{min-height:40px;}

.noscript-note{padding-block:var(--sp-5);}
.noscript-note p{border-left:2px solid var(--warn); padding-left:var(--sp-4);}

/* Cut-corner variants used by storefront panels. */
.clip-md{
  clip-path:polygon(var(--clip-md) 0,100% 0,100% calc(100% - var(--clip-md)),calc(100% - var(--clip-md)) 100%,0 100%,0 var(--clip-md));
}

/* ── 1. product status strip ───────────────────────────────── */

.status-strip{
  position:relative; z-index:41; overflow:hidden;
  background:var(--umbra); border-bottom:1px solid var(--line);
}
@keyframes nx-ticker{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.status-ticker{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.status-ticker-track{
  display:flex; align-items:center; width:max-content;
  padding-block:9px;
  animation:nx-ticker 42s linear infinite;
}
.status-ticker:hover .status-ticker-track{animation-play-state:paused;}
.ticker-seg{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--f-mono,monospace); font-size:.75rem;
  letter-spacing:.14em; white-space:nowrap; text-transform:uppercase;
  padding-inline:var(--sp-4);
}
.ticker-seg .status-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--status-color); filter:drop-shadow(0 0 5px var(--status-color));
}
.ticker-key{color:var(--ash);}
.ticker-val{color:var(--status-color); font-weight:600;}
.ticker-note{color:var(--parchment);}
.ticker-tag{color:var(--moonlight);}
.ticker-div{color:var(--line); padding-inline:2px;}

.status-dot--nx{
  background:var(--status-color);
  filter:drop-shadow(0 0 5px var(--status-color));
  animation:nx-status-pulse 2.6s ease-in-out infinite;
}
@keyframes nx-status-pulse{0%,100%{opacity:1;} 50%{opacity:.45;}}

/* Status text is never the only carrier of meaning — the label and
   the explanation are always rendered alongside the dot. */
.is-status{color:var(--status-color);}

/* ── 2. header ─────────────────────────────────────────────── */

.topbar .wrap{gap:var(--sp-4);}
.topbar-desktop-nav{margin-inline-start:auto;}
.topbar-nav a{padding-block:12px;}
.topbar .brandmark{display:inline-flex; align-items:center; min-height:44px;}

.topbar-actions{display:flex; align-items:center; gap:var(--sp-3);}

.login-unavailable{display:inline-flex; align-items:center; gap:var(--sp-2);}
.login-unavailable .unavailable-tag{white-space:nowrap;}

.unavailable-tag{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ash); opacity:.85;
}

.destination-unavailable{display:flex; flex-direction:column; gap:2px;}
.destination-unavailable .destination-label{color:var(--ash);}

/* mobile toggle */
.nav-toggle{
  display:none; align-items:center; gap:var(--sp-2);
  min-height:44px; padding:8px 14px;
  background:transparent; border:1px solid var(--line); color:var(--parchment);
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  clip-path:polygon(var(--clip-sm) 0,100% 0,100% calc(100% - var(--clip-sm)),calc(100% - var(--clip-sm)) 100%,0 100%,0 var(--clip-sm));
}
.nav-toggle:hover{border-color:var(--moonlight); color:var(--moonlight);}
.nav-toggle-bars{display:flex; flex-direction:column; gap:3px; width:16px;}
.nav-toggle-bars span{display:block; height:1px; background:currentColor;}
.nav-toggle[aria-expanded="true"]{border-color:var(--ember); color:var(--ember);}

.mobile-nav{
  border-top:1px solid var(--line);
  background:var(--umbra);
  padding-block:var(--sp-5);
  max-height:calc(100vh - var(--header-h) - 24px);
  overflow-y:auto;
}
.mobile-nav[hidden]{display:none;}
/* The drawer sits inside .topbar, so it inherits `.topbar .wrap`'s
   64px-tall flex row. Undo that for the drawer's own container. */
.topbar .mobile-nav .wrap{display:block; height:auto;}
.mobile-nav-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.mobile-nav-list a{
  display:block; padding:14px 0; min-height:44px;
  font-family:var(--f-mono); font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--parchment); text-decoration:none; border-bottom:1px solid var(--line);
}
.mobile-nav-list a:hover{color:var(--ember);}
.mobile-nav-actions{
  display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-5);
}
.mobile-nav-actions .btn{width:100%;}
.mobile-nav-actions .login-unavailable{flex-direction:column; align-items:stretch; gap:var(--sp-2);}

/* ── 3. hero ───────────────────────────────────────────────── */
.hero{
  position:relative;
  padding-block:var(--sp-8) var(--sp-7);
  background:
    linear-gradient(180deg,
      rgba(10,10,19,.42) 0%,
      rgba(10,10,19,.10) 40%,
      rgba(10,10,19,.32) 80%,
      var(--void) 100%),
    linear-gradient(90deg,
      rgba(10,10,19,.94) 0%,
      rgba(10,10,19,.72) 32%,
      rgba(10,10,19,.24) 60%,
      rgba(10,10,19,0) 100%),
    var(--title-hero-art,none)
      center right / cover no-repeat,
    var(--void);
}
/* The splash art carries the hero now — retire the decorative orb. */
.hero .hero-orb{display:none;}

/* ── operator section backgrounds (subject pushed to a side) ─── */
/* Each themed section carries a splash art as a fixed-ratio cover
   background; the subject sits on one side and a scrim biased to the
   opposite side keeps the overlaid content legible. Sides alternate
   right / left / right… down the page. */
.bg-splash{
  position:relative;
  background-color:var(--void);
  background-repeat:no-repeat;
  background-size:cover;
}
.bg-splash > .wrap{position:relative; z-index:2;}
.bg-splash::before{content:""; position:absolute; inset:0; z-index:1;}

/* vertical blend shared by both sides, keeps section seams soft */
.bg-splash::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,var(--void),transparent 18%),
             linear-gradient(0deg,var(--void),transparent 18%);
}

.bg-right{background-position:left center; background-size:200%;}
.bg-right::before{
  background:linear-gradient(90deg,
    rgba(10,10,19,.97) 0%,
    rgba(10,10,19,.9)  38%,
    rgba(10,10,19,.62) 72%,
    rgba(10,10,19,.42) 100%);
}
.bg-left{background-position:right center; background-size:200%;}
.bg-left::before{
  background:linear-gradient(90deg,
    rgba(10,10,19,.42) 0%,
    rgba(10,10,19,.62) 28%,
    rgba(10,10,19,.9)  62%,
    rgba(10,10,19,.97) 100%);
}
/* Bias the content column away from the operator for breathing room. */
@media (min-width:900px){
  .bg-right > .wrap{padding-right:clamp(0px,22vw,360px);}
  .bg-left  > .wrap{padding-left:clamp(0px,22vw,360px);}
}
/* On narrow screens drop the zoom/pan and just center it faintly. */
@media (max-width:900px){
  .bg-right, .bg-left{background-size:cover; background-position:center;}
}
/* Pre-staggered art (subject already off to a side) — show as-composed
   with plain cover instead of the zoom-and-pan used for centered art. */
.bg-fit{background-size:cover !important;}
.bg-fit.bg-right{background-position:right center !important;}
.bg-fit.bg-left{background-position:left center !important;}

.step-link{margin-top:var(--sp-3); align-self:flex-start;}

/* Six nav items no longer fit the 64px topbar band: keep each label on
   one line; the collapse breakpoint below hands over to the toggle. */
.topbar-nav{gap:var(--sp-4);}
.topbar-nav a{white-space:nowrap;}

/* ── tweaks: accent glow default + accent-aware overrides ────── */
:root{--ember-glow:255,106,61;}
.btn-primary:hover{filter:drop-shadow(0 0 18px rgba(var(--ember-glow),.55));}
.plan--featured{filter:drop-shadow(0 0 22px rgba(var(--ember-glow),.12));}

/* ── tweaks: Atmosphere ──────────────────────────────────────── */
body[data-atmos="clean"] .hero::after{opacity:0;}
body[data-atmos="clean"] .hero-frame{display:none;}
body[data-atmos="clean"] .status-ticker-track{animation-duration:64s;}

body[data-atmos="max"] .hero::after{opacity:1; animation-duration:4s;}
body[data-atmos="max"] .hero-frame span{filter:drop-shadow(0 0 7px var(--ember));}
body[data-atmos="max"] .status-ticker-track{animation-duration:22s;}
body[data-atmos="max"]::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:reduce){ body[data-atmos="max"]::after{display:none;} }

/* ── tweaks: Hero focus ──────────────────────────────────────── */
body[data-hero="stats"] .hero-radar{display:none;}
body[data-hero="minimal"] .hero-preview{display:none;}
@media (min-width:900px){
  body[data-hero="minimal"] .hero-layout{grid-template-columns:minmax(0,1fr);}
  body[data-hero="minimal"] .hero-copy{max-width:60ch;}
}

/* ── tweaks: panel UI ────────────────────────────────────────── */
.tw-toggle{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background:var(--umbra-2); color:var(--ember); border:1px solid var(--line);
  cursor:pointer; transition:transform .2s ease, color .2s ease, border-color .2s ease;
}
.tw-toggle:hover{transform:rotate(35deg); border-color:var(--ember);}
.tw-panel{
  position:fixed; right:18px; bottom:74px; z-index:81; width:264px;
  display:flex; flex-direction:column; gap:var(--sp-5);
  padding:var(--sp-5); background:var(--umbra); border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.tw-panel[hidden]{display:none;}
.tw-head{display:flex; align-items:center; justify-content:space-between;}
.tw-title{font-family:var(--f-display); font-size:1rem; letter-spacing:.1em; text-transform:uppercase;}
.tw-close{background:none; border:none; color:var(--ash); cursor:pointer; font-size:.9rem; padding:4px;}
.tw-close:hover{color:var(--parchment);}
.tw-group{display:flex; flex-direction:column; gap:var(--sp-3);}
.tw-label{margin:0; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash);}
.tw-swatches{display:flex; gap:var(--sp-3);}
.tw-swatches button{
  width:30px; height:30px; border-radius:50%; background:var(--sw); cursor:pointer;
  border:2px solid transparent; outline:1px solid var(--line); outline-offset:2px;
  transition:transform .15s ease;
}
.tw-swatches button:hover{transform:scale(1.12);}
.tw-swatches button[aria-checked="true"]{border-color:var(--void); outline-color:var(--sw);}
.tw-seg{display:flex; border:1px solid var(--line);}
.tw-seg button{
  flex:1; padding:9px 6px; background:transparent; border:none; cursor:pointer;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ash); border-left:1px solid var(--line); transition:background .15s ease, color .15s ease;
}
.tw-seg button:first-child{border-left:none;}
.tw-seg button:hover{color:var(--parchment);}
.tw-seg button[aria-checked="true"]{background:var(--ember); color:var(--void); font-weight:600;}
@media (max-width:520px){ .tw-panel{width:calc(100vw - 36px);} }
.hero-layout{display:grid; gap:var(--sp-7); align-items:start;}
.hero-copy{max-width:none;}
.hero .h1{text-wrap:balance;}

.hero-os{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-6); font-size:.75rem;
}
.hero-os-key{letter-spacing:.16em; color:var(--ash);}

/* compact illustrative preview beside the hero copy */
.hero-preview{padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4);}
.hero-preview-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--line);
}
.hero-preview-mark{
  font-family:var(--f-display); font-size:.9375rem; letter-spacing:.14em; color:var(--parchment);
}
.hero-preview-rows{margin:0; display:flex; flex-direction:column; gap:var(--sp-3);}
.hero-preview-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4);
}
.hero-preview-row dt{margin:0;}
.hero-preview-row dd{margin:0; font-size:.875rem; color:var(--parchment); text-align:right;}
.hero-preview-cap{color:var(--ash); font-size:.6875rem; margin:0;}

/* ── 4. product summary HUD ────────────────────────────────── */

.hud-strip{margin-top:var(--sp-7);}
.hud-item .caption{display:block;}
.hud-item .mono{font-size:1.125rem; overflow-wrap:anywhere;}
.hud-note{
  margin-top:var(--sp-4); max-width:70ch;
  text-transform:none; letter-spacing:0; color:var(--ash);
  font-size:.75rem; line-height:1.6;
}

/* ── 5. product description ────────────────────────────────── */

.about-layout{display:grid; gap:var(--sp-6);}
.about-layout .section-head{margin-bottom:0;}
.about-body{display:flex; flex-direction:column; gap:var(--sp-2); max-width:68ch;}
.about-body .callout{margin-top:var(--sp-5);}

/* ── 6. features ───────────────────────────────────────────── */

.feature-grid{display:grid; gap:var(--sp-5);}
.feature{padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4);}
.feature-head{display:flex; align-items:center; gap:var(--sp-4);}
.feature-icon{flex:none; font-size:1rem;}
.feature-title{font-size:1.25rem;}
.feature-summary{color:var(--parchment); font-size:1rem; line-height:1.55;}
.feature-detail{color:var(--ash); font-size:.9375rem; line-height:1.65; flex:1;}

.feature--primary{background:var(--umbra-2);}
.feature--primary .feature-title{font-size:1.5rem;}
.feature--primary .feature-summary{font-size:1.125rem;}
.feature--secondary .feature-icon{border-color:var(--moon-dim); color:var(--moonlight);}
.feature--wide .feature-icon{border-color:var(--moon-dim); color:var(--moonlight);}

.feature-status{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3);
  padding:var(--sp-3) var(--sp-4); background:var(--void); border:1px solid var(--line);
}
.feature-status-label{
  font-size:.8125rem; letter-spacing:.1em; color:var(--status-color); font-weight:600;
}
.feature-status-meaning{flex:1 1 100%; text-transform:none; letter-spacing:0; font-size:.75rem; line-height:1.5;}

.feature-meta{
  margin:0; display:flex; flex-wrap:wrap; gap:var(--sp-5);
  padding-top:var(--sp-4); border-top:1px solid var(--line);
}
.feature-meta-row{display:flex; flex-direction:column; gap:2px;}
.feature-meta-row dt{margin:0;}
.feature-meta-row dd{margin:0; font-size:.8125rem; color:var(--parchment);}

/* ── 7. how it works ───────────────────────────────────────── */

.steps{list-style:none; margin:0; padding:0; display:grid; gap:0;}
.step{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-5);
  padding:var(--sp-5) 0; border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line);}
.step-index{
  font-size:1.5rem; font-weight:600; color:var(--ember); line-height:1.1; min-width:2.5ch;
}
.step--pending .step-index{color:var(--ash);}
.step-body{display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start;}
.step-title{color:var(--parchment);}
.step-detail{color:var(--ash); font-size:.9375rem;}

/* ── 8. interface preview ──────────────────────────────────── */

.ui-preview{padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-5);}
.ui-preview-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-bottom:var(--sp-4); border-bottom:1px solid var(--line);
}
.ui-preview-mark{
  font-family:var(--f-display); font-size:1.0625rem; letter-spacing:.16em; color:var(--parchment);
}
.ui-preview-body{display:grid; gap:var(--sp-5);}
.ui-preview-nav{display:flex; flex-wrap:wrap; gap:var(--sp-2);}
.ui-preview-nav-item{
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ash); padding:10px 12px; border:1px solid var(--line); background:var(--void);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.ui-preview-nav-item.is-current{
  color:var(--ember); border-color:var(--ember-dim); background:var(--umbra-2);
}
.ui-preview-main{display:grid; gap:var(--sp-5);}
.ui-preview-panel{
  background:var(--void); border:1px solid var(--line); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.ui-preview-rows{margin:0; display:flex; flex-direction:column;}
.ui-preview-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-2) var(--sp-4); padding-block:10px; border-bottom:1px solid var(--line);
}
.ui-preview-row:last-child{border-bottom:none;}
.ui-preview-row dt{margin:0;}
.ui-preview-value{
  margin:0; display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  font-size:.875rem; color:var(--parchment); justify-content:flex-end;
}
.ui-preview-side{display:grid; gap:var(--sp-5);}
.ui-preview-meter-value{font-size:1.125rem; color:var(--parchment);}
.ui-preview-launch{align-items:flex-start;}
.ui-preview-launch .btn{align-self:flex-start;}
.ui-preview-note{text-transform:none; letter-spacing:0; color:var(--ash); font-size:.75rem; line-height:1.5;}
.ui-preview-cap{margin:0; color:var(--ash); font-size:.6875rem;}

/* ── chips ─────────────────────────────────────────────────── */

.chip-illustrative,
.chip-example,
.chip-tbc,
.chip-pending{
  font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ash);
  border-color:var(--line); padding:5px 9px;
}
.chip-illustrative{color:var(--moonlight); border-color:var(--moon-dim);}
.chip-example{color:var(--ash);}
.chip-tbc{color:var(--warn); border-color:rgba(245,200,76,.3);}
.chip-pending{color:var(--warn); border-color:rgba(245,200,76,.3);}
.chip-confirmed{
  font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--online); border-color:rgba(95,227,166,.3); padding:5px 9px;
}

/* ── 9. pricing ────────────────────────────────────────────── */

.pricing-grid{display:grid; gap:var(--sp-5);}
.pricing-grid-wide{margin-top:var(--sp-5);}

.plan{
  padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4);
  position:relative;
}
.plan-head{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); justify-content:space-between;}
.plan-name{font-size:1.25rem;}
.plan-badge{flex:none; font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px;}

.plan--featured{
  background:var(--umbra-2); border-color:var(--ember-dim);
  filter:drop-shadow(0 0 22px rgba(255,106,61,.10));
}
.plan-badge--featured{color:var(--ember); border-color:var(--ember-dim);}

.plan-price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-2);
  font-size:2.25rem; font-weight:600; color:var(--parchment); line-height:1.1;
}
.plan--featured .plan-price{color:var(--ember);}
.plan-price-value{overflow-wrap:anywhere;}
.plan-price-currency{
  font-size:.75rem; letter-spacing:.08em; color:var(--ash); font-weight:400; margin-left:4px;
}
.plan-price-term{
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); font-weight:400;
}
.plan-rate{text-transform:none; letter-spacing:0; color:var(--ash); font-size:.8125rem; line-height:1.5;}

.plan-meta{
  margin:0; display:flex; flex-wrap:wrap; gap:var(--sp-5);
  padding-block:var(--sp-4); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.plan-meta-row{display:flex; flex-direction:column; gap:2px;}
.plan-meta-row dt{margin:0;}
.plan-meta-row dd{margin:0; font-size:.875rem; color:var(--parchment);}

.plan-foot{margin-top:auto; display:flex; flex-direction:column; gap:var(--sp-3);}
.plan-cta{width:100%; text-align:center;}
.plan-state{
  text-transform:none; letter-spacing:0; color:var(--ash); font-size:.75rem; line-height:1.5;
}

.pricing-note{margin-top:var(--sp-7); max-width:78ch;}
.pricing-note-status{color:var(--warn);}

/* ── 10. requirements ──────────────────────────────────────── */

.req-table{min-width:520px;}
.req-table tbody th{
  text-align:left; font-family:var(--f-body); font-weight:600; font-size:.875rem;
  color:var(--parchment); text-transform:none; letter-spacing:0;
  padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.req-table .req-value{color:var(--parchment); font-family:var(--f-body);}
.req-table td:last-child{font-family:var(--f-body);}

/* ── 11. FAQ ───────────────────────────────────────────────── */

.faq-list{display:flex; flex-direction:column; gap:var(--sp-3); max-width:900px;}
.faq-item{background:var(--umbra);}
.faq-heading{margin:0; font-family:var(--f-body);}
.faq-trigger{
  width:100%; min-height:56px; display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); padding:var(--sp-4) var(--sp-5);
  background:none; border:0; cursor:pointer; text-align:left; color:var(--parchment);
  font-family:var(--f-body); font-weight:600; font-size:1rem; line-height:1.4;
}
.faq-trigger:hover{color:var(--moonlight);}
.faq-icon{
  flex:none; width:13px; height:13px; position:relative;
}
.faq-icon::before,
.faq-icon::after{
  content:""; position:absolute; background:var(--ember); transition:transform .18s ease, opacity .18s ease;
}
.faq-icon::before{left:0; top:6px; width:13px; height:1px;}
.faq-icon::after{left:6px; top:0; width:1px; height:13px;}
.faq-item.is-open .faq-icon::after{transform:scaleY(0); opacity:0;}
.faq-panel{padding:0 var(--sp-5) var(--sp-5); max-width:72ch;}
.faq-panel[hidden]{display:none;}
.faq-answer{color:var(--ash); line-height:1.65;}

/* ── 12. final CTA ─────────────────────────────────────────── */

.final-cta-panel{
  padding:var(--sp-7) var(--sp-6);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-6);
}
.final-cta-copy{display:flex; flex-direction:column; gap:var(--sp-3); max-width:46ch;}
.final-cta-actions{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--sp-4);}
.support-unavailable{display:flex; flex-direction:column; gap:var(--sp-2); max-width:34ch;}

/* ── 13. footer ────────────────────────────────────────────── */

footer{padding-block:var(--sp-8) var(--sp-6);}
footer .footer-grid{
  display:grid; grid-template-columns:1fr; gap:var(--sp-6);
  align-items:start; justify-content:start;
}
.footer-brand{display:flex; flex-direction:column; gap:var(--sp-3); max-width:38ch;}
.footer-mark{font-size:1.15rem; letter-spacing:.06em; color:var(--parchment);}
.footer-desc{color:var(--ash); font-size:.9375rem;}
.footer-status{display:flex; align-items:center; gap:var(--sp-2); font-size:.75rem; letter-spacing:.1em; color:var(--status-color);}

.footer-col{display:flex; flex-direction:column; gap:var(--sp-3);}
.footer-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2);}
.footer-list a{
  color:var(--ash); text-decoration:none; font-size:.9375rem;
  display:inline-flex; align-items:center; min-height:40px; padding-block:6px;
}
.footer-list a:hover{color:var(--moonlight);}

footer .footer-base{
  display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:baseline; justify-content:space-between;
  margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--line);
}
.footer-copy{flex:none;}
.footer-trademark{
  text-transform:none; letter-spacing:0; color:var(--ash); font-size:.75rem;
  line-height:1.6; max-width:74ch;
}

/* ══ responsive ═══════════════════════════════════════════════
   Reviewed at 320 / 375 / 430 / 768 / 1024 / 1440.              */

/* Below 1080px the desktop bar collapses into the toggle — six nav
   items wrap out of the fixed-height band before that width. */
@media (max-width:1079px){
  .topbar-desktop-nav,
  .topbar-actions{display:none;}
  .nav-toggle{display:inline-flex; margin-inline-start:auto;}
}

@media (min-width:1080px){
  .mobile-nav{display:none !important;}
  .nav-toggle{display:none;}
}

/* Narrow phones: keep everything in one readable column. */
@media (max-width:639px){
  /* The requirements table stacks instead of scrolling sideways — a
     520px-wide table inside a 320px screen is not readable. Headers
     stay in the DOM so row/column association survives. */
  .req-table{min-width:0;}
  .req-table thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  }
  .req-table tr{
    display:grid; gap:6px; padding-block:var(--sp-4);
    border-bottom:1px solid var(--line);
  }
  .req-table tbody th,
  .req-table td{
    border:0; padding:0; white-space:normal;
  }
  .req-table tbody th{
    font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ash);
  }
  .req-table .req-value{font-size:.9375rem;}
  .req-table td:last-child{justify-self:start;}

  .hero{padding-block:var(--sp-7) var(--sp-6);}
  .status-strip-inner{flex-direction:column; align-items:flex-start; gap:6px;}
  .btn-row .btn{width:100%;}
  .plan-price{font-size:2rem;}
  .final-cta-actions{width:100%;}
  .final-cta-actions .btn{width:100%;}
  .step{grid-template-columns:1fr; gap:var(--sp-2);}
  .feature{padding:var(--sp-5);}
  .plan{padding:var(--sp-5);}
  /* Uniform label-above-value stacking beats letting each row decide
     for itself whether it fits — mixed alignment reads as a bug. */
  .ui-preview-row{flex-direction:column; align-items:flex-start; gap:4px;}
  .ui-preview-value{justify-content:flex-start;}
  .hero-preview-row{flex-direction:column; align-items:flex-start; gap:2px;}
  .hero-preview-row dd{text-align:left;}

  /* One HUD cell per row: at this width a 2-up grid wraps
     "Fixed-duration pass" onto three lines. */
  .hud-strip{grid-template-columns:1fr;}
  .hud-item{border-left:none; border-top:1px solid var(--line); padding-inline:0;}
  .hud-item:first-child{border-top:none;}
}

@media (min-width:640px){
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid-wide{grid-template-columns:repeat(2,1fr);}
  .ui-preview-main{grid-template-columns:1fr;}
  footer .footer-grid{grid-template-columns:repeat(2,1fr);}
}

@media (min-width:900px){
  .hero{padding-block:var(--sp-9) var(--sp-8);}
  .hero-layout{grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr); gap:var(--sp-8);}
  .about-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--sp-8);}

  .feature-grid{grid-template-columns:repeat(12,1fr);}
  .feature--primary{grid-column:span 7;}
  .feature--secondary{grid-column:span 5;}
  .feature--status{grid-column:span 5;}
  .feature--wide{grid-column:span 7;}

  .steps{grid-template-columns:repeat(2,1fr); gap:0 var(--sp-7);}
  .step:nth-child(2){border-top:1px solid var(--line);}
  .step:nth-last-child(2){border-bottom:1px solid var(--line);}

  .pricing-grid{grid-template-columns:repeat(3,1fr);}
  .pricing-grid-wide{grid-template-columns:repeat(2,1fr);}

  .ui-preview{padding:var(--sp-6);}
  .ui-preview-body{grid-template-columns:190px minmax(0,1fr); gap:var(--sp-6);}
  .ui-preview-nav{flex-direction:column; flex-wrap:nowrap;}
  .ui-preview-main{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:var(--sp-5);}

  footer .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--sp-7);}
}

@media (min-width:1200px){
  .plan--featured{transform:translateY(-8px);}
}

/* ── tactical hero theming (direction 1b) ──────────────────── */

/* Logo image sits before the wordmark in header + footer. */
.nx-logo{width:28px; height:28px; margin-right:9px; flex:none; object-fit:contain; border-radius:50%;}
.footer-mark .nx-logo{width:32px; height:32px;}
.footer-mark{display:inline-flex; align-items:center;}

/* Animated tactical grid behind the hero copy, masked so it fades
   out toward the edges and never fights the starfield. */
@keyframes nx-grid-pan{from{background-position:0 0;} to{background-position:0 -48px;}}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(43,40,56,.45) 1px,transparent 1px),
    linear-gradient(90deg,rgba(43,40,56,.45) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(130% 95% at 28% 22%,#000,transparent 72%);
  mask-image:radial-gradient(130% 95% at 28% 22%,#000,transparent 72%);
  animation:nx-grid-pan 7s linear infinite;
}

/* Ember corner brackets framing the whole hero. */
.hero-frame{position:absolute; inset:14px; z-index:2; pointer-events:none;}
.hero-frame span{position:absolute; width:30px; height:30px;}
.hero-frame span:nth-child(1){top:0; left:0; border-top:2px solid var(--ember); border-left:2px solid var(--ember);}
.hero-frame span:nth-child(2){top:0; right:0; border-top:2px solid var(--ember); border-right:2px solid var(--ember);}
.hero-frame span:nth-child(3){bottom:0; left:0; border-bottom:2px solid var(--ember); border-left:2px solid var(--ember);}
.hero-frame span:nth-child(4){bottom:0; right:0; border-bottom:2px solid var(--ember); border-right:2px solid var(--ember);}

/* Radar readout inside the hero-side panel. */
@keyframes nx-radar-sweep{to{transform:rotate(-360deg);}}
.hero-radar{
  position:relative; aspect-ratio:1; margin-bottom:var(--sp-4);
  border:1px solid var(--line); border-radius:50%; overflow:hidden;
  background:radial-gradient(circle,rgba(175,196,255,.07),transparent 70%);
}
.hero-radar .ring{position:absolute; border:1px solid var(--line); border-radius:50%;}
.hero-radar .cross{position:absolute; background:var(--line);}
.hero-radar .cross-v{top:0; left:50%; width:1px; height:100%;}
.hero-radar .cross-h{top:50%; left:0; width:100%; height:1px;}
.hero-radar .sweep{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,rgba(95,227,166,.32),transparent 26%);
}
.hero-radar .blip{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--ember); transform:translate(-50%,-50%);
  box-shadow:0 0 6px var(--ember);
}
.hero-radar .blip--self{
  width:8px; height:8px; background:var(--online); box-shadow:0 0 7px var(--online);
}

/* ── reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  .status-ticker-track{animation:none;}
  .status-dot--nx{animation:none;}
  .faq-icon::before,
  .faq-icon::after{transition:none;}
  .plan--featured{transform:none;}
  .hero::after{animation:none;}
  .hero-radar .sweep{animation:none;}
}