/* ============================================================
   CULMEN — TUNE
   Loaded last of the structural sheets. Overrides culmen.css +
   culmen-polish.css.

   ⚠️ Token set is shared with the management panel and the
   subscriber portal — keep the :root block in sync across all three.
   It DRIFTED: those two moved to cyan while this file still held
   --violet-fill:#7C3AED. Re-synced 2026-08-16.

   ⚠️ BRAND HUE IS RESERVED. Cyan means structure and brand only,
   never a status and never a category tint. --good / --warn /
   --alert are verdicts only and may not be reused as decoration.
   The software category therefore sits on SKY #7FB4F5, not on the
   brand cyan — otherwise that catalogue section reads as "the
   brand section" rather than as one category among four.
   ============================================================ */

/* ---------- 1. palette ---------- */
:root{
  --bg:#15151D;
  --bg-2:#1B1B25;
  --surface:#20202B;
  --surface-2:#282835;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.18);
  --text:#F5F5F9;
  --label:#C9C9D8;
  --muted:#A9A9BA;
  --faint:#82828F;

  /* brand — three tones, deliberately distinct. See culmen.css. */
  --violet-fill:#38BDF8;
  --violet-deep:#0EA5E9;
  --violet-dim:rgba(103,232,249,.16);
  --glow:rgba(103,232,249,.38);
  --on-brand:#08141A;
  --cyan-ink:#4FD3E8;
  --cyan-dim:rgba(103,232,249,.09);

  /* verdicts — reserved. Never decoration. */
  --good:#5CD6A0;
  --good-dim:rgba(92,214,160,.12);
  --warn:#E0A458;
  --warn-dim:rgba(224,164,88,.13);
  --alert:#F26D78;
  --alert-dim:rgba(242,109,120,.12);

  --grad:linear-gradient(100deg,#A5F3FC,#38BDF8);
}
body{
  background-image:
    radial-gradient(70% 40% at 82% -5%, rgba(103,232,249,.13), transparent 62%),
    radial-gradient(50% 30% at 8% 4%, rgba(56,189,248,.06), transparent 62%);
}
::selection{background:var(--violet);color:var(--on-brand)}
:focus-visible{outline:2px solid var(--violet-hi);outline-offset:2px}
.card:hover,.pcard:hover{box-shadow:0 22px 50px -26px rgba(0,0,0,.6),0 0 34px -14px var(--glow)}
.note__card{box-shadow:0 30px 70px -34px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04) inset}
.stat__n{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rte a{color:var(--violet-hi)}
.rte a:hover{color:var(--cyan-ink)}

/* ---------- 2. buttons — depth without weight ----------
   NOTE: .btn--fill is superseded by culmen-accent.css and then by
   culmen-button.css, which make it deliberately colourless. These
   rules are the fallback if either of those <link>s is removed. */
.btn--fill{
  background:linear-gradient(135deg,var(--violet-deep),var(--violet-fill));
  border-color:transparent;color:var(--on-brand);
  box-shadow:0 0 26px -11px var(--glow);
}
.btn--fill:hover{
  background:linear-gradient(135deg,var(--violet-fill),var(--violet));
  box-shadow:0 0 34px -8px var(--glow);
}
.btn--ghost{border-color:var(--line-2);color:var(--label)}
.btn--ghost:hover{border-color:rgba(103,232,249,.5);color:var(--text)}

/* ---------- 3. header proportions ---------- */
.hdr{background:rgba(21,21,29,.84)}
.hdr__in{height:62px;gap:28px}
.brand__mark{width:26px;height:26px}
.brand__name{font-size:16px;letter-spacing:.19em}
.brand img{max-height:30px}
.nav{gap:2px;font-size:15.5px}
.nav a{padding:8px 13px}
.nav a::after{left:13px;right:13px}
.hdr__act{gap:16px}
.hdr__act .btn{padding:9px 18px;font-size:14.5px}
.cart-link{font-size:14.5px}

/* ---------- 4. nav dropdown ---------- */
.nav__item{position:relative;display:flex}
.nav__top{display:inline-flex;align-items:center;gap:6px}
.nav__caret{width:9px;height:9px;opacity:.65;transition:transform .22s ease}
.nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(180deg);opacity:1}
.nav__panel{
  position:absolute;top:100%;left:0;min-width:248px;padding:8px;margin-top:6px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 24px 48px -22px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:70;
}
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel{opacity:1;visibility:visible;transform:none}
.nav__panel a{display:block;padding:9px 12px;border-radius:8px;font-size:14.5px;white-space:nowrap}
.nav__panel a::after{display:none}
.nav__panel a:hover{background:var(--violet-dim);color:var(--text)}
.mnav__sub{display:block;padding-left:16px!important;font-size:14.5px!important;color:var(--faint)!important}

/* ---------- 5. catalogue ---------- */
.cat-head{padding:60px 0 34px}
.cat-head h1{font-size:clamp(2rem,3.6vw,2.85rem);margin-bottom:14px}
.cat-head .lede{font-size:17.5px;max-width:44em}

.cat-how{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}

/* one accent per explainer box, same variable contract as the sections below */
.cat-how div:nth-child(1){--acc:#7FB4F5;--acc-dim:rgba(127,180,245,.11);--acc-line:rgba(127,180,245,.45);
  --acc-edge:rgba(127,180,245,.24);--acc-chip:rgba(127,180,245,.13);--acc-glow:rgba(127,180,245,.50)}
.cat-how div:nth-child(2){--acc:#34D0C3;--acc-dim:rgba(52,208,195,.10); --acc-line:rgba(52,208,195,.42);
  --acc-edge:rgba(52,208,195,.22); --acc-chip:rgba(52,208,195,.13); --acc-glow:rgba(52,208,195,.48)}
.cat-how div:nth-child(3){--acc:#5CD6A0;--acc-dim:rgba(92,214,160,.10); --acc-line:rgba(92,214,160,.45);
  --acc-edge:rgba(92,214,160,.22); --acc-chip:rgba(92,214,160,.13); --acc-glow:rgba(92,214,160,.48)}

.cat-how div{
  position:relative;                 /* anchors the cursor spotlight */
  border:1px solid var(--acc-edge,var(--line));border-radius:12px;padding:18px 20px;
  background:linear-gradient(135deg,var(--acc-dim,transparent),transparent 62%),var(--surface);
  transition:border-color .25s ease,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease;
}
.cat-how div::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  opacity:0;pointer-events:none;z-index:0;transition:opacity .4s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             var(--acc-chip,rgba(103,232,249,.13)), transparent 62%);
}
.cat-how div:hover::before{opacity:1}
.cat-how div > *{position:relative;z-index:1}
.cat-how div:hover{border-color:var(--acc-line);transform:translateY(-2px);
  box-shadow:
    0 18px 40px -24px rgba(0,0,0,.7),
    0 0 0 1px var(--acc-line),
    0 0 22px -2px var(--acc-glow),
    0 0 54px 2px var(--acc-dim)}

.cat-how b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:8px;font-weight:500;color:var(--acc)}
.cat-how span{font-size:14px;color:var(--muted);line-height:1.6}
@media(max-width:820px){.cat-how{grid-template-columns:1fr}}

.cat-bar{
  position:sticky;top:62px;z-index:50;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(21,21,29,.9);backdrop-filter:blur(14px) saturate(160%);
}
.cat-bar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:58px;overflow-x:auto;scrollbar-width:none}
.cat-bar__in::-webkit-scrollbar{display:none}
.cat-tabs{display:flex;gap:2px;flex:none}
.cat-tabs a{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:8px;
  font-size:14.5px;color:var(--muted);white-space:nowrap;transition:.2s ease}
.cat-tabs a::before{content:'';width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)}
.cat-tabs a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.cat-tabs a i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--faint)}
.cat-tabs a[href="#software-licences"]::before{background:#7FB4F5;box-shadow:0 0 0 3px rgba(127,180,245,.16)}
.cat-tabs a[href="#digital-downloads"]::before{background:#34D0C3;box-shadow:0 0 0 3px rgba(52,208,195,.14)}
.cat-tabs a[href="#remote-services"]::before{background:#E0A458;box-shadow:0 0 0 3px rgba(224,164,88,.16)}
.cat-tabs a[href="#support-plans"]::before{background:#5CD6A0;box-shadow:0 0 0 3px rgba(92,214,160,.16)}

.bill{display:flex;align-items:center;gap:12px;flex:none}
.bill__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.bill__sw{display:flex;padding:3px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface)}
.bill__btn{border:0;background:transparent;color:var(--muted);cursor:pointer;
  padding:6px 14px;border-radius:6px;font-size:13.5px;transition:.2s ease;white-space:nowrap}
.bill__btn:hover{color:var(--text)}
.bill__btn.is-on{background:linear-gradient(135deg,var(--violet-deep),var(--violet-fill));
  color:var(--on-brand);font-weight:500;box-shadow:0 0 18px -6px var(--glow)}
@media(max-width:760px){
  .cat-bar__in{height:auto;padding:12px 0;flex-direction:column;align-items:flex-start;gap:12px}
  .cat-bar{position:static}
}

/* ---------- 6. one accent per category ----------
   Four hues, none of them the brand cyan. Software and downloads
   are the portal's own sky and teal tints. */
#software-licences{--acc:#7FB4F5;--acc-dim:rgba(127,180,245,.09);--acc-line:rgba(127,180,245,.45);--acc-edge:rgba(127,180,245,.20);--acc-chip:rgba(127,180,245,.13);--acc-glow:rgba(127,180,245,.50)}
#digital-downloads{--acc:#34D0C3;--acc-dim:rgba(52,208,195,.08); --acc-line:rgba(52,208,195,.42);--acc-edge:rgba(52,208,195,.20); --acc-chip:rgba(52,208,195,.13); --acc-glow:rgba(52,208,195,.48)}
#remote-services  {--acc:#E0A458;--acc-dim:rgba(224,164,88,.08); --acc-line:rgba(224,164,88,.45);--acc-edge:rgba(224,164,88,.22); --acc-chip:rgba(224,164,88,.13); --acc-glow:rgba(224,164,88,.50)}
#support-plans    {--acc:#5CD6A0;--acc-dim:rgba(92,214,160,.08); --acc-line:rgba(92,214,160,.45);--acc-edge:rgba(92,214,160,.20); --acc-chip:rgba(92,214,160,.13); --acc-glow:rgba(92,214,160,.48)}

.cat-sec{padding:56px 0 8px;scroll-margin-top:130px}
.cat-sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  margin-bottom:22px;padding-bottom:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--acc-line,var(--line-2))}
.cat-sec__head h2{font-size:1.65rem}
.cat-sec__head h2::before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-right:12px;vertical-align:middle;background:var(--acc,var(--violet));
  box-shadow:0 0 16px -1px var(--acc,var(--violet))}
.cat-sec__head p{margin:0;font-size:14.5px;color:var(--muted);max-width:40em}
.cat-sec__all{font-size:13.5px;white-space:nowrap;font-weight:500;color:var(--acc,var(--violet-hi))}

.ptable{display:grid;gap:10px}
/* No --acc here: .prow must INHERIT the accent from its section wrapper
   (#software-licences / #digital-downloads / #remote-services / #support-plans)
   so every row, badge and link matches its own section. */
.prow{
  display:grid;grid-template-columns:1fr 232px 92px;gap:24px;align-items:center;
  padding:20px 24px;border:1px solid var(--acc-edge,var(--line));border-radius:14px;
  background:linear-gradient(135deg,var(--acc-dim,transparent),transparent 58%),var(--surface);
  transition:border-color .25s ease,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease;
  position:relative;                 /* anchors the cursor spotlight below */
}
/* cursor spotlight — .prow was missing from the shared rule in culmen-polish.css,
   so pricing rows never got one. Tinted by section rather than fixed cyan. */
.prow::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  opacity:0;pointer-events:none;z-index:0;transition:opacity .4s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),
             var(--acc-chip,rgba(103,232,249,.13)), transparent 62%);
}
.prow:hover::before{opacity:1}
.prow > *{position:relative;z-index:1}
/* The aura was previously drawn with --acc-dim (8% alpha) and a -18px spread,
   so it was both transparent and shrunk inside the box. --acc-glow is ~50%. */
.prow:hover{border-color:var(--acc-line);transform:translateY(-2px);
  box-shadow:
    0 18px 40px -24px rgba(0,0,0,.7),
    0 0 0 1px var(--acc-line),
    0 0 22px -2px var(--acc-glow,rgba(103,232,249,.5)),
    0 0 54px 2px var(--acc-dim)}
.prow__main h3{font-size:16.5px;font-weight:500;margin-bottom:6px;letter-spacing:-.01em}
.prow__main p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
.prow__price{text-align:right}
.pr{display:block;font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.025em}
.pr em{font-style:normal;font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--faint)}
.prow__go{font-size:13.5px;font-weight:500;text-align:right;transition:transform .25s ease;
  color:var(--acc,var(--violet-hi))}
.prow:hover .prow__go{transform:translateX(4px)}
[data-bill-scope="monthly"] .pr[data-when="once"]{display:none}
[data-bill-scope="once"] .pr[data-when="monthly"]{display:none}

/* billing badges follow the same semantics as the explainer band */
/* Badges take the section accent too — a green chip inside the amber
   Remote Services section was the colour mismatch. */
.tag{display:inline-block;margin-top:7px;padding:4px 10px;border-radius:20px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--acc-line,rgba(92,214,160,.42));
  color:var(--acc,var(--good));
  background:var(--acc-chip,var(--good-dim))}
.tag--sub{}
.tag--dual{}

@media(max-width:860px){
  .prow{grid-template-columns:1fr auto;gap:8px 18px;padding:18px 20px}
  .prow__price{text-align:right;align-self:start}
  .prow__go{grid-column:1/-1;text-align:left;padding-top:6px}
}
@media(max-width:520px){
  .prow{grid-template-columns:1fr}
  .prow__price{text-align:left}
  .pr{font-size:20px}
}
.cat-foot{padding:64px 0 88px;text-align:center;border-top:1px solid var(--line);margin-top:64px}
.cat-foot h2{font-size:1.5rem;margin-bottom:10px}
.cat-foot p{color:var(--muted);margin:0 auto 24px;max-width:38em}

/* light product imagery sits better with a soft frame */
.pcard__media{background:#EDEFF4;border-color:var(--line-2)}
.pdp__media{background:#EDEFF4}