/* Nocturne — customer area
   ------------------------------------------------------------------
   Additive. Loads after nocturne.css and storefront.css and reuses
   their tokens, buttons, chips and .bg-splash background system. */

/* ── shell ──────────────────────────────────────────────────── */

.ca-shell{
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  min-height:100vh;
  align-items:stretch;
}
.ca-shell[hidden]{display:none;}

/* ── sidebar ────────────────────────────────────────────────── */

.ca-side{
  display:flex; flex-direction:column; gap:var(--sp-6);
  padding:var(--sp-5) 0 var(--sp-5);
  background:var(--umbra);
  border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.ca-side-brand{
  display:flex; align-items:center; gap:var(--sp-2);
  padding-inline:var(--sp-5);
  font-family:var(--f-display); font-size:1.15rem; letter-spacing:.08em;
  color:var(--parchment); text-decoration:none;
}
.ca-side-brand .nx-emblem{width:22px; height:22px; margin:0;}
.ca-side-tag{
  padding-inline:var(--sp-5); margin-top:calc(var(--sp-6) * -1 + var(--sp-2));
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ash);
}
/* Ember rule under the lockup, echoing the storefront eyebrow. */
.ca-side-tag::after{
  content:""; display:block; width:26px; height:1px;
  background:var(--ember); margin-top:var(--sp-3);
}
.ca-side-stamp{
  margin-top:calc(var(--sp-6) * -1 + var(--sp-3));
  padding:var(--sp-3) var(--sp-5);
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  border-block:1px solid var(--line); background:var(--void);
}
.ca-stamp-key{
  font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ash);
}
.ca-stamp-val{
  font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:.75rem; color:var(--moonlight);
}

.ca-nav{display:flex; flex-direction:column; list-style:none; margin:0; padding:0;}
.ca-nav button{
  width:100%; display:flex; align-items:center; gap:var(--sp-3);
  padding:13px var(--sp-5); background:none; border:none; cursor:pointer;
  border-left:2px solid transparent;
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ash); text-align:left;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.ca-nav button:hover{color:var(--parchment); background:var(--umbra-2);}
.ca-nav button[aria-current="true"]{
  color:var(--parchment); background:var(--umbra-2);
  border-left-color:var(--ember);
}
.ca-nav svg{width:15px; height:15px; flex:none;}
.ca-nav .ca-nav-count{
  margin-left:auto; font-size:.625rem; color:var(--void);
  background:var(--ember); padding:1px 6px; letter-spacing:.06em;
}

.ca-side-foot{
  margin-top:auto; padding:var(--sp-4) var(--sp-5) 0;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.ca-user{display:flex; flex-direction:column; gap:2px;}
.ca-user-name{font-size:.875rem; font-weight:600; color:var(--parchment); word-break:break-all;}
.ca-user-id{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.1em; color:var(--ash);}

/* Review-only state switcher so every designed state is reachable. */
.ca-demo{
  padding:var(--sp-3) var(--sp-5) 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.ca-demo-label{
  font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--warn);
}
.ca-demo-seg{display:flex; border:1px solid var(--line);}
.ca-demo-seg button{
  flex:1; padding:6px 2px; background:none; border:none; cursor:pointer;
  border-left:1px solid var(--line);
  font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ash);
}
.ca-demo-seg button:first-child{border-left:none;}
.ca-demo-seg button[aria-checked="true"]{background:var(--warn); color:var(--void); font-weight:600;}

/* ── main column ────────────────────────────────────────────── */

.ca-main{min-width:0; display:flex; flex-direction:column; position:relative;}

/* ── brand furniture over the main column ───────────────────── */
/* Oversized outline emblem, the same mark as the header lockup. */
.ca-watermark{
  position:absolute; top:8%; right:-8%; width:min(560px,52vw); z-index:1;
  color:var(--ember); opacity:.05; pointer-events:none;
}
.ca-watermark svg{width:100%; height:auto; display:block;}
/* Ember corner brackets, matching the storefront hero frame. */
.ca-frame{position:absolute; inset:10px; z-index:3; pointer-events:none;}
.ca-frame span{position:absolute; width:26px; height:26px;}
.ca-frame span:nth-child(1){top:0; left:0; border-top:2px solid var(--ember); border-left:2px solid var(--ember);}
.ca-frame span:nth-child(2){top:0; right:0; border-top:2px solid var(--ember); border-right:2px solid var(--ember);}
.ca-frame span:nth-child(3){bottom:0; left:0; border-bottom:2px solid var(--ember); border-left:2px solid var(--ember);}
.ca-frame span:nth-child(4){bottom:0; right:0; border-bottom:2px solid var(--ember); border-right:2px solid var(--ember);}

/* Same animated tactical grid the hero uses, masked to fade out. */
@keyframes ca-grid-pan{from{background-position:0 0;} to{background-position:0 -48px;}}
.ca-main::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(43,40,56,.4) 1px,transparent 1px),
    linear-gradient(90deg,rgba(43,40,56,.4) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(120% 80% at 20% 0%,#000,transparent 70%);
  mask-image:radial-gradient(120% 80% at 20% 0%,#000,transparent 70%);
  animation:ca-grid-pan 7s linear infinite;
}

/* .bg-splash paints its scrim in ::before/::after at z-index 1; the
   storefront lifts .wrap above it, but this page's children are not
   .wrap — lift them explicitly or they render under the gradient. */
.ca-topline, .ca-view, .ca-foot{position:relative; z-index:2;}
.ca-topline{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); padding:var(--sp-4) var(--sp-6);
  border-bottom:1px solid var(--line); background:var(--umbra);
}
.ca-topline .btn{white-space:nowrap;}
.ca-topline-right{display:flex; align-items:center; gap:var(--sp-4);}
.ca-build-chip{
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--moonlight); border:1px solid var(--line); padding:5px 10px;
  white-space:nowrap;
}

/* ── brand footer ───────────────────────────────────────────── */
.ca-foot{
  margin-top:auto; padding:var(--sp-5) var(--sp-6);
  border-top:1px solid var(--line); background:var(--umbra);
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
}
.ca-foot-mark{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--f-display); font-size:.9375rem; letter-spacing:.12em;
  color:var(--parchment);
}
.ca-foot-mark svg{color:var(--ember);}
.ca-foot-line{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ash);
}
.ca-foot-line:last-child{margin-left:auto;}
.ca-crumb{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash);
}
.ca-crumb strong{color:var(--parchment); font-weight:500;}

.ca-view{
  padding:var(--sp-7) var(--sp-6) var(--sp-9);
  display:none; flex-direction:column; gap:var(--sp-6);
}
.ca-view.is-active{display:flex;}
.ca-view-head{display:flex; flex-direction:column; gap:var(--sp-2); max-width:70ch;}

/* Splash art sits behind the panel stack, not behind text directly. */
.ca-main.bg-splash{background-attachment:fixed;}
/* Extra darkening over the art so long body copy never fights the
   operator's mid-tones; panels sit above this at z-index 2. */
.ca-main.bg-splash::after{
  background:linear-gradient(180deg,rgba(10,10,19,.55),rgba(10,10,19,.7)),
             linear-gradient(90deg,rgba(10,10,19,.85),rgba(10,10,19,.15));
}

/* ── panels ─────────────────────────────────────────────────── */

.ca-panel{
  position:relative; z-index:2;
  background:rgba(22,20,31,.86);
  backdrop-filter:blur(6px);
  border:1px solid var(--line);
  padding:var(--sp-6);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  display:flex; flex-direction:column; gap:var(--sp-5);
}
/* Moonlight tick in the cut corner — the storefront panel signature. */
.ca-panel::after{
  content:""; position:absolute; top:0; right:0;
  width:16px; height:16px; pointer-events:none;
  background:linear-gradient(45deg,transparent 50%,var(--moonlight) 50%);
  opacity:.5;
}
.ca-panel-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;}
.ca-panel-title{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ash);
  display:flex; align-items:center; gap:var(--sp-2);
}
.ca-panel-title::before{
  content:""; width:10px; height:1px; background:var(--ember); flex:none;
}
.ca-grid{display:grid; gap:var(--sp-5);}
.ca-grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}

/* ── status banner (hero of the dashboard) ──────────────────── */

.ca-banner{
  position:relative; z-index:2;
  border:1px solid var(--line); border-left:3px solid var(--status-color);
  background:linear-gradient(90deg,rgba(22,20,31,.95),rgba(22,20,31,.7));
  backdrop-filter:blur(6px);
  padding:var(--sp-6);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-5); align-items:center;
}
.ca-banner-state{
  display:flex; align-items:center; gap:var(--sp-3);
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
}
.ca-banner-state .dot{
  width:9px; height:9px; border-radius:50%; background:var(--status-color);
  filter:drop-shadow(0 0 6px var(--status-color));
  animation:pulse-dot 1.8s ease-in-out infinite;
}
.ca-banner-state .val{color:var(--status-color); font-weight:600;}
.ca-banner h2{
  font-family:var(--f-display); font-size:clamp(1.75rem,1.4vw + 1.3rem,2.5rem);
  text-transform:uppercase; line-height:1.02; margin-top:var(--sp-3);
}
.ca-banner-note{color:var(--ash); font-size:.9375rem; line-height:1.6; margin-top:var(--sp-2); max-width:56ch;}
.ca-banner-cta{display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-2);}
.ca-banner-cta .btn-note{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ash); margin:0;
}
@media (max-width:820px){
  .ca-banner{grid-template-columns:minmax(0,1fr);}
  .ca-banner-cta{align-items:flex-start;}
}

/* ── remaining-time meter ───────────────────────────────────── */

.ca-remain{display:flex; flex-direction:column; gap:var(--sp-3);}
.ca-remain-top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4);}
.ca-remain-val{
  font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:2.25rem; font-weight:600; color:var(--parchment); line-height:1;
}
.ca-remain-plan{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--moonlight);
}
.ca-meter{height:6px; background:var(--umbra-2); border:1px solid var(--line); overflow:hidden;}
.ca-meter span{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--ember),var(--warn));
  transition:width .8s cubic-bezier(.2,.7,.2,1);
}
.ca-meter.is-low span{background:var(--critical);}
.ca-remain-foot{
  display:flex; justify-content:space-between; gap:var(--sp-4);
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ash);
}

/* ── key/value rows ────────────────────────────────────────── */

.ca-rows{display:flex; flex-direction:column; margin:0;}
.ca-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-4); padding-block:11px; border-top:1px solid var(--line);
}
.ca-row:first-child{border-top:none;}
.ca-row dt{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ash); margin:0;
}
.ca-row dd{
  margin:0; font-family:var(--f-mono); font-size:.875rem;
  color:var(--parchment); text-align:right; word-break:break-all;
}
.ca-row dd.is-good{color:var(--online);}
.ca-row dd.is-warn{color:var(--warn);}
.ca-row dd.is-bad{color:var(--critical);}

/* ── copyable checksum ──────────────────────────────────────── */

.ca-hash{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--void); border:1px solid var(--line); padding:var(--sp-3) var(--sp-4);
}
.ca-hash code{
  font-family:var(--f-mono); font-size:.75rem; color:var(--moonlight);
  overflow-wrap:anywhere; flex:1; line-height:1.5;
}
.ca-copy{
  flex:none; background:none; border:1px solid var(--line); cursor:pointer;
  color:var(--ash); font-family:var(--f-mono); font-size:.625rem;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 10px;
}
.ca-copy:hover{color:var(--parchment); border-color:var(--moonlight);}
.ca-copy.is-done{color:var(--online); border-color:var(--online);}

/* ── preflight check (signature element) ────────────────────── */

.ca-preflight{
  background:var(--void); border:1px solid var(--line);
  font-family:var(--f-mono); font-size:.8125rem;
  display:flex; flex-direction:column;
}
.ca-pf-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line);
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash);
}
.ca-pf-brand{display:inline-flex; align-items:center; gap:var(--sp-2);}
.ca-pf-brand svg{color:var(--ember); flex:none;}
.ca-pf-verdict{font-weight:600;}
.ca-pf-verdict.is-pass{color:var(--online);}
.ca-pf-verdict.is-fail{color:var(--critical);}
.ca-pf-verdict.is-run{color:var(--warn);}
.ca-pf-list{list-style:none; margin:0; padding:var(--sp-2) 0;}
.ca-pf-list li{
  display:grid; grid-template-columns:18px minmax(0,1fr) auto;
  gap:var(--sp-3); align-items:baseline;
  padding:7px var(--sp-4); opacity:0; transform:translateX(-6px);
  transition:opacity .3s ease, transform .3s ease;
}
.ca-pf-list li.is-in{opacity:1; transform:none;}
.ca-pf-glyph{color:var(--ash); text-align:center;}
.ca-pf-name{color:var(--parchment); overflow-wrap:anywhere;}
.ca-pf-detail{display:block; color:var(--ash); font-size:.6875rem; margin-top:2px; line-height:1.5;}
.ca-pf-mark{font-size:.6875rem; letter-spacing:.12em; white-space:nowrap;}
.ca-pf-list li.ok .ca-pf-glyph,
.ca-pf-list li.ok .ca-pf-mark{color:var(--online);}
.ca-pf-list li.fail .ca-pf-glyph,
.ca-pf-list li.fail .ca-pf-mark{color:var(--critical);}
.ca-pf-list li.skip .ca-pf-glyph,
.ca-pf-list li.skip .ca-pf-mark{color:var(--ash);}
.ca-pf-list li.run .ca-pf-glyph,
.ca-pf-list li.run .ca-pf-mark{color:var(--warn);}
.ca-pf-bar{height:3px; background:var(--umbra-2);}
.ca-pf-bar span{display:block; height:100%; width:0; background:var(--warn); transition:width .35s linear;}
.ca-pf-bar.is-pass span{background:var(--online);}
.ca-pf-bar.is-fail span{background:var(--critical);}
.ca-pf-reason{
  padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line);
  color:var(--critical); font-size:.75rem; line-height:1.6;
}
.ca-pf-reason[hidden]{display:none;}

/* ── device / HWID ──────────────────────────────────────────── */

.ca-device{
  display:flex; align-items:center; gap:var(--sp-4);
  border:1px solid var(--line); background:var(--void); padding:var(--sp-4);
}
.ca-device-icon{
  width:38px; height:38px; flex:none; border:1px solid var(--ember-dim);
  color:var(--ember); display:flex; align-items:center; justify-content:center;
}
.ca-device-meta{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.ca-device-name{font-weight:600; color:var(--parchment); font-size:.9375rem;}
.ca-device-id{font-family:var(--f-mono); font-size:.6875rem; color:var(--ash); overflow-wrap:anywhere;}
.ca-reset-count{
  display:flex; align-items:center; gap:var(--sp-2);
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ash);
}
.ca-pips{display:flex; gap:4px;}
.ca-pips i{width:16px; height:5px; background:var(--umbra-2); border:1px solid var(--line);}
.ca-pips i.spent{background:var(--critical); border-color:var(--critical);}
.ca-pips i.free{background:var(--online); border-color:var(--online);}

/* ── invoices ───────────────────────────────────────────────── */

.ca-table{width:100%; border-collapse:collapse; font-size:.875rem;}
.ca-table th{
  text-align:left; padding:10px var(--sp-3); border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash); font-weight:500; white-space:nowrap;
}
.ca-table td{
  padding:13px var(--sp-3); border-bottom:1px solid var(--line);
  font-family:var(--f-mono); color:var(--parchment); vertical-align:middle;
}
.ca-table tr:last-child td{border-bottom:none;}
.ca-table .num{text-align:right; font-variant-numeric:tabular-nums;}
.ca-tag{
  display:inline-block; font-family:var(--f-mono); font-size:.625rem;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border:1px solid var(--line);
}
.ca-tag.paid{color:var(--online); border-color:var(--online);}
.ca-tag.active{color:var(--ember); border-color:var(--ember);}
.ca-tag.expired{color:var(--ash);}
.ca-scroll{overflow-x:auto;}

/* ── empty state ────────────────────────────────────────────── */

.ca-empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4);
  padding:var(--sp-7) var(--sp-6); text-align:left;
  border:1px dashed var(--line); background:rgba(10,10,19,.6);
}
.ca-empty-glyph{color:var(--ash); opacity:.5;}

/* ── notices ────────────────────────────────────────────────── */

.ca-note{
  display:flex; gap:var(--sp-3); padding:var(--sp-4);
  background:var(--umbra-2); border-left:2px solid var(--moonlight);
  font-size:.875rem; line-height:1.6; color:var(--ash);
}
.ca-note strong{color:var(--moonlight); font-weight:600;}
.ca-note--warn{border-left-color:var(--warn);}
.ca-note--warn strong{color:var(--warn);}

/* ── auth screens ───────────────────────────────────────────── */

.ca-auth{
  min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px);
  align-items:stretch;
}
.ca-auth[hidden]{display:none;}
.ca-auth-art{
  position:relative; border-right:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:var(--sp-7) var(--sp-6);
  background-color:var(--void); background-repeat:no-repeat;
  background-position:center left; background-size:cover;
}
.ca-auth-art::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(10,10,19,.5),rgba(10,10,19,.92));
}
.ca-auth-art > *{position:relative; z-index:2;}
.ca-auth-brand{
  display:flex; align-items:center; gap:var(--sp-2);
  font-family:var(--f-display); font-size:1.25rem; letter-spacing:.1em;
  color:var(--parchment); text-decoration:none;
}
.ca-auth-brand .nx-emblem{width:26px; height:26px; margin:0;}
.ca-auth-pitch{max-width:34ch; display:flex; flex-direction:column; gap:var(--sp-3);}
.ca-auth-pitch h2{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(1.9rem,1.6vw + 1.2rem,2.6rem); line-height:1.02;
}

.ca-auth-pane{
  background:var(--umbra); padding:var(--sp-7) var(--sp-6);
  display:flex; flex-direction:column; justify-content:center; gap:var(--sp-5);
}
.ca-form{display:flex; flex-direction:column; gap:var(--sp-4);}
.ca-form[hidden]{display:none;}
.ca-field{display:flex; flex-direction:column; gap:var(--sp-2);}
.ca-field label{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash);
}
.ca-field input{
  background:var(--void); border:1px solid var(--line); color:var(--parchment);
  font-family:var(--f-body); font-size:.9375rem; padding:13px var(--sp-4);
}
.ca-field input:focus{outline:none; border-color:var(--ember);}
.ca-field input::placeholder{color:var(--ash); opacity:.6;}
.ca-form-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap;
}
.ca-link{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--moonlight); text-decoration:none;
}
.ca-link:hover{color:var(--parchment);}
.ca-form-msg{
  font-family:var(--f-mono); font-size:.75rem; line-height:1.6; color:var(--critical);
}
.ca-form-msg.is-good{color:var(--online);}
.ca-form-msg[hidden]{display:none;}
.ca-form-hint{font-size:.8125rem; color:var(--ash); line-height:1.6;}

@media (max-width:960px){
  .ca-auth{grid-template-columns:minmax(0,1fr);}
  .ca-auth-art{display:none;}
  .ca-shell{grid-template-columns:minmax(0,1fr);}
  .ca-side{
    position:static; height:auto; flex-direction:row; flex-wrap:wrap;
    align-items:center; gap:var(--sp-4); border-right:none;
    border-bottom:1px solid var(--line); padding:var(--sp-4);
  }
  .ca-side-tag, .ca-demo{display:none;}
  .ca-side-stamp{display:none;}
  .ca-watermark, .ca-frame{display:none;}
  .ca-foot{gap:var(--sp-3);}
  .ca-foot-line:last-child{margin-left:0;}
  .ca-nav{flex-direction:row; flex-wrap:wrap; width:100%;}
  .ca-nav button{width:auto; border-left:none; border-bottom:2px solid transparent; padding:10px var(--sp-3);}
  .ca-nav button[aria-current="true"]{border-left-color:transparent; border-bottom-color:var(--ember);}
  .ca-side-foot{margin:0; border-top:none; padding:0;}
  .ca-main.bg-splash{background-attachment:scroll;}
}

@media (prefers-reduced-motion:reduce){
  .ca-banner-state .dot{animation:none;}
  .ca-pf-list li{opacity:1; transform:none; transition:none;}
  .ca-meter span{transition:none;}
  .ca-main::before{animation:none;}
}