/* ======================================================================
   Q-CANON — shared cinematic style layer (redesign/cinematic)
   Loads AFTER styles.css + pages.css and re-skins the page to the
   approved canon (docs/design/cinematic-canon.html + design-system.txt).
   ADDITIVE: never renames existing selectors, only overrides them, so
   machinery-generated UI (auth modals, banners) keeps working.

   Companion runtime: /assets/js/q-canon.js
     - injects .q-atmo-* layers as first children of <body>
     - drives [data-qrv] scrubbed reveals via the --qrv custom property
     - adds html.q-canon-js when armed (reveal CSS is gated on it)

   Modes: body[data-q-mode="plain" | "quiet" | "loud-lite"]
     (no attribute == quiet). NO WebGL anywhere in this layer.

   PALETTE IS LAW — only these hues appear in this file:
     grounds  #05050B #090916 #090C2C #0E1125 #091438 #0A1845 #092856
              #151728 #171956
     neutrals #171B35 #242739 #252B46 #343A58
     cyan     #27A4DA   blues #3576E8 #4390E3 #3F82E1 #2263CB #1D53BF #1253C2
     indigo   #6741F9 #6837EE   violet #9448FD   white #FCFCFC
     semantic #16C784 (verified ONLY) #F59E0B (unsigned) #EF4444 (failed)
   ====================================================================== */

/* ==================== 0. RETIRE THE OLD PLATE ======================
   The pre-redesign ambient background was a 3.2MB raster (assets/
   bg-network.png, 2048x1152). The canon atmosphere injected by
   q-canon.js covers the viewport above it, so on every reskinned page
   that image downloaded, decoded and painted where nothing could see it
   — measured at 3248KB of a 3854KB page, 84% of the weight, on the first
   visit of every mobile visitor.

   styles.css no longer references it from body::before at all. What
   remains is .bg-fixed, a real element that 37 templates still carry;
   dropped here so canon pages stop fetching it. The four blog tag pages
   have not been reskinned yet and are deliberately left alone — there
   the plate is still the page's actual ground.

   The file itself stays shipped: the Telegram Mini-App uses it as a
   genuine, visible background.                                        */
.bg-fixed{ background-image:none; }

/* =================== 0b. MOBILE NAVIGATION ========================
   styles.css describes the mobile nav TWICE and the two descriptions
   fight. The first (.nav, ~line 233) is a proper off-canvas panel:
   translateX(110%), visibility hidden, slides in on .nav--open. The
   second (~line 806, "Dropdown animation") re-declares the same selector
   unscoped as a fade-down dropdown: opacity 0, translateY(-6px). Being
   later it wins below 1024px, so the panel stopped being off-canvas and
   survived only on `visibility:hidden`.

   None of it mattered while nothing could open the panel — and nothing
   could: 45 templates carry .nav and not one carries a .burger, so on a
   phone the header offered exactly one control, the logo. q-canon.js
   injects the button; this block gives it one coherent panel to drive.

   Scoped under 1024px, which is where styles.css itself turns the nav
   back into an inline bar. Desktop is untouched.                       */
/* A nav built by q-canon.js brings its own panel geometry, because it cannot
   borrow one: demo-live loads neither styles.css nor pages.css, and status and
   risk-disclaimer load only styles.css. Without this the built links render as
   an inline row that overlaps itself — hit-testing each link's centre put three
   of eight inside a neighbour. Everything here is scoped to .qc-nav so no
   existing page's nav is touched. */
@media (max-width:1023px){
  .topbar .nav.qc-nav{
    position:fixed;
    top:0;right:0;bottom:0;
    width:min(78vw,340px);
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:2px;
    padding:calc(env(safe-area-inset-top,0px) + 84px) 26px calc(env(safe-area-inset-bottom,0px) + 26px);
    overflow-y:auto;
    background:linear-gradient(180deg,rgba(10,40,86,.96),rgba(5,5,11,.98));
    border-left:1px solid rgba(252,252,252,.12);
    box-shadow:-24px 0 60px rgba(0,0,0,.5);
    z-index:70;
  }
  .topbar .nav.qc-nav a{ display:block;width:100%; }
}

@media (min-width:1024px){
  /* on a wide screen it is an ordinary inline row like every other nav */
  .topbar .nav.qc-nav{ display:flex;align-items:center;gap:18px; }
  /* qc-nav--bare = the page loads no styles.css (buildNav detects the sheet
     and marks the nav), so nothing else styles these links or the Dashboard
     chip. Scoped to the modifier ONLY: on /status and /risk-disclaimer,
     which do load styles.css, not one byte of the cascade changes — the
     first cut of this overrode them by specificity and Codex caught it.

     2026-08-22 «добей вопрос» — the bare skin now carries the CANON numbers,
     probed off /how-it-works pixel by pixel (links 16/560 dim .58 at op .9,
     lh 1.25 → the 20px box; 28px gaps; buttons 13.5/560 8×14 r14 → 32px
     pills with 16px lead + 4px tail; gradient hover bar; white current-page
     mark). One source: verify-audit carries the same values inline and
     /demo-live or any future sheetless page inherits them from here. */
  .topbar .nav.qc-nav--bare{ gap:28px; }
  .topbar .nav.qc-nav--bare a{
    position:relative;
    /* the FACE is part of the canon: a sheetless page (/demo-live) fell back
       to the system font and its labels ran 16% wider at the same size */
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:16px;font-weight:560;line-height:1.25;
    color:rgba(252,252,252,.58);opacity:.9;
    text-decoration:none;white-space:nowrap;
  }
  .topbar .nav.qc-nav--bare a:hover{ color:rgba(252,252,252,.92);opacity:1; }
  .topbar .nav.qc-nav--bare a::after{
    content:"";position:absolute;left:0;right:0;bottom:-10px;
    height:2px;border-radius:2px;
    background:linear-gradient(90deg,#27A4DA,#6741F9);
    opacity:0;transform:scaleX(.6);
    transition:opacity .18s ease,transform .18s ease;
  }
  .topbar .nav.qc-nav--bare a:hover::after{ opacity:.55;transform:scaleX(.9); }
  .topbar .nav.qc-nav--bare a[aria-current="page"]{ color:#FCFCFC;opacity:1; }
  .topbar .nav.qc-nav--bare a[aria-current="page"]::after{ opacity:.9;transform:scaleX(1); }
  .topbar .nav.qc-nav--bare .btn{
    display:inline-flex;align-items:center;
    margin-left:16px;margin-right:4px;
    padding:8px 14px;border-radius:14px;
    /* Pavel circled the styles.css pair as THE buttons — ghost paint copied
       from /how-it-works computed: faint blue gradient fill, inset ring,
       bluish-white label. */
    border:1px solid rgba(79,140,255,.32);
    background:linear-gradient(rgba(79,140,255,.10),rgba(79,140,255,.04));
    box-shadow:inset 0 0 0 1px rgba(79,140,255,.10);
    color:#CFE1FF;font-size:13.5px;font-weight:560;line-height:13.5px;
  }
  .topbar .nav.qc-nav--bare .btn::after{ content:none; }
  .topbar .nav.qc-nav--bare .btn:hover{ border-color:rgba(39,164,218,.6); }
  .topbar .nav.qc-nav--bare .btn-primary{
    /* the canon CTA: blue→violet with a SOLID WHITE label (the old bright-cyan
       lozenge with dark text was this skin's own invention) */
    border-color:rgba(103,65,249,.55);
    background:linear-gradient(135deg,#3576E8 0%,#6741F9 58%,#9448FD 100%);
    color:#FCFCFC;
    box-shadow:0 0 36px rgba(53,118,232,.34);
  }
}
/* ============== 19. ONE HEADER GEOMETRY (2026-08-22) ==============
   Pavel, with three screenshots: «я не вижу что шапка везде стала одна по
   размещению». He was right — the first pass unified the CONTENT of the nav
   but not its GEOMETRY. Measured: the landing pins its logo 40px from the
   viewport edge in a full-bleed 72px bar; the inner pages centred theirs in
   a min(1120px,100%) column — 124px from the edge at 1440, ~370px at 1920 —
   and sized the logo clamp(110px,18vw,220px), so on a wide monitor the inner
   logo was almost twice the landing's 118px. Same words, different places.

   This section makes every header resolve to the landing's frame: full
   width, 40px side padding, 72px tall, 118px mark, links-and-actions on the
   right. Desktop only — the mobile layer (burger + constellation) is
   untouched. */
@media (min-width:1024px){
  /* standard templates: .topbar > .wrap.topbar__inner — uncage it */
  .topbar .topbar__inner{
    width:100%; max-width:none;
    height:72px; padding:0 40px;
  }
  .topbar .logo{ width:118px; }
  /* the two self-styled funnel headers sit INSIDE a page .wrap; bleed them
     back out to the viewport so their logo lands on the same 40px line */
  .wrap > .topbar{
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    padding-left:40px; padding-right:40px;
    min-height:72px; align-items:center;
  }
  .wrap > .topbar .brandLogo{ width:118px; }
  .wrap > .topbar .logo img{ height:42px; }
  /* and the same composition: links-and-buttons are the right-most cluster
     on every page, so the funnel pages' own chrome (the verifier masthead
     note, the demo's status pills) slots in after the logo — where the
     landing keeps its PAPER chip — instead of pushing the nav into the
     middle of the bar */
  .wrap > .topbar .topnote,
  .wrap > .topbar .topbarActions{ order:1; margin-left:24px; }
  .wrap > .topbar .nav{ order:2; margin-left:auto; }
}

/* 2026-08-22 — the unified nav carries nine items; measured at 1024px it
   overlapped the logo by ~60px. On the narrowest desktops the CTA yields —
   Pricing is one link away — and returns at 1121px where it fits. */
@media (min-width:1024px) and (max-width:1120px){
  .topbar .nav .nav__cta{ display:none; }
}

@media (max-width:1023px){
  .topbar .nav{
    opacity:1;
    transform:translateX(110%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .26s cubic-bezier(.16,1,.3,1), visibility 0s linear .26s;
  }
  .topbar .nav.nav--open{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .26s cubic-bezier(.16,1,.3,1), visibility 0s;
  }
  /* the panel is a canon surface, so it speaks in the canon's display
     face rather than the body face it inherited */
  .topbar .nav a{
    font-family:var(--q-font-display,'Space Grotesk',Inter,system-ui,sans-serif);
    font-size:19px;font-weight:500;letter-spacing:-.01em;
    padding:14px 0;
  }

  .qc-burger{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;margin-left:auto;width:44px;height:44px;flex:0 0 44px;padding:0;
    border-radius:12px;border:1px solid rgba(39,164,218,.30);
    background:rgba(9,20,56,.55);cursor:pointer;z-index:60;position:relative;
    transition:border-color .2s ease,background .2s ease;
  }
  .qc-burger span{
    display:block;width:17px;height:1.5px;border-radius:99px;background:#FCFCFC;
    transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease;
  }
  .qc-burger[aria-expanded="true"]{border-color:rgba(39,164,218,.6);background:rgba(9,20,56,.85)}
  .qc-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .qc-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .qc-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
@media (min-width:1024px){ .qc-burger{ display:none !important; } }
@media (prefers-reduced-motion:reduce){
  .topbar .nav,.qc-burger span{ transition:none !important; }
}

/* ============================ 1. TOKENS ============================ */
:root{
  /* grounds */
  --q-ground-0:#05050B; --q-ground-1:#090916; --q-ground-2:#090C2C;
  --q-ground-3:#0E1125; --q-ground-4:#091438; --q-ground-5:#0A1845;
  --q-ground-6:#092856; --q-ground-7:#151728; --q-ground-8:#171956;
  /* neutrals */
  --q-neutral-1:#171B35; --q-neutral-2:#242739; --q-neutral-3:#252B46;
  --q-neutral-4:#343A58;
  /* chroma */
  --q-cyan:#27A4DA;
  --q-blue-1:#3576E8; --q-blue-2:#4390E3; --q-blue-3:#3F82E1;
  --q-blue-4:#2263CB; --q-blue-5:#1D53BF; --q-blue-6:#1253C2;
  --q-indigo-1:#6741F9; --q-indigo-2:#6837EE; --q-violet:#9448FD;
  --q-white:#FCFCFC;
  /* semantic — real states only */
  --q-verified:#16C784; --q-unsigned:#F59E0B; --q-failed:#EF4444;

  /* text */
  --q-text-primary:rgba(252,252,252,.96);
  --q-text-secondary:rgba(252,252,252,.78);
  --q-text-muted:rgba(252,252,252,.58);
  --q-text-faint:rgba(252,252,252,.38);
  --q-text-disabled:rgba(252,252,252,.26);
  --q-link:rgba(67,144,227,.92);
  --q-link-hover:rgba(39,164,218,1);

  /* type */
  --q-font-display:"Space Grotesk",Inter,system-ui,sans-serif;
  --q-font-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --q-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* spacing */
  --q-space-1:4px; --q-space-2:8px; --q-space-3:12px; --q-space-4:16px;
  --q-space-5:20px; --q-space-6:24px; --q-space-7:32px; --q-space-8:40px;
  --q-space-9:56px; --q-space-10:72px; --q-space-11:96px;
  --q-space-12:128px; --q-space-13:160px;
  --q-page-x-desktop:40px; --q-page-x-tablet:28px; --q-page-x-mobile:18px;
  --q-wrap:1180px; --q-wrap-wide:1320px; --q-measure:66ch;
  --q-legal-measure:72ch;

  /* radius (system) + card radius (canon reskin uses 16-18) */
  --q-radius-xs:3px; --q-radius-sm:4px; --q-radius-md:6px;
  --q-radius-lg:8px; --q-radius-xl:10px; --q-radius-pill:999px;
  --q-radius-card:16px; --q-radius-card-lg:18px;

  /* depth backgrounds */
  --q-depth-bg-base:linear-gradient(135deg,#05050B 0%,#090C2C 36%,#0A1845 100%);
  --q-depth-bg-quiet:linear-gradient(135deg,#05050B 0%,#090916 38%,#091438 100%);
  --q-depth-bg-plain:linear-gradient(180deg,#090916 0%,#05050B 58%,#05050B 100%);
  --q-nebula-cyan:radial-gradient(circle at 18% 14%,rgba(39,164,218,.30),rgba(39,164,218,0) 32%);
  --q-nebula-blue:radial-gradient(circle at 70% 18%,rgba(53,118,232,.24),rgba(53,118,232,0) 34%);
  --q-nebula-indigo:radial-gradient(circle at 82% 32%,rgba(103,65,249,.24),rgba(103,65,249,0) 36%);
  --q-nebula-violet:radial-gradient(circle at 52% 88%,rgba(148,72,253,.18),rgba(148,72,253,0) 42%);
  --q-vignette:radial-gradient(ellipse at 52% 40%,rgba(5,5,11,0) 28%,rgba(5,5,11,.42) 68%,rgba(5,5,11,.84) 100%);
  --q-horizon-glow:radial-gradient(ellipse at 50% 106%,rgba(39,164,218,.20),rgba(5,5,11,0) 58%);

  /* glass */
  --q-glass-fill-loud:rgba(14,17,37,.68);
  --q-glass-fill-quiet:rgba(14,17,37,.76);
  --q-glass-fill-plain:rgba(14,17,37,.84);
  --q-glass-fill-raised:linear-gradient(180deg,rgba(37,43,70,.74) 0%,rgba(14,17,37,.74) 48%,rgba(5,5,11,.58) 100%);
  --q-glass-blur:14px;
  --q-glass-saturate:145%;
  --q-glass-top-highlight:inset 0 1px 0 rgba(252,252,252,.18);
  --q-glass-shadow-low:0 14px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(252,252,252,.10);
  --q-glass-shadow-mid:0 24px 80px rgba(0,0,0,.46),0 0 42px rgba(53,118,232,.12),inset 0 1px 0 rgba(252,252,252,.14);
  --q-glass-shadow-high:0 34px 110px rgba(0,0,0,.56),0 0 80px rgba(103,65,249,.20),inset 0 1px 0 rgba(252,252,252,.18);
  --q-hairline:rgba(252,252,252,.14);

  /* gradient borders (used as background-image hairlines) */
  --q-border-hairline:linear-gradient(90deg,rgba(39,164,218,0),rgba(39,164,218,.54),rgba(103,65,249,.42),rgba(39,164,218,0));
  --q-engraved-line:linear-gradient(90deg,rgba(67,144,227,0),rgba(39,164,218,.36) 18%,rgba(252,252,252,.10) 50%,rgba(103,65,249,.30) 82%,rgba(67,144,227,0));

  /* glow */
  --q-glow-cyan-sm:0 0 12px rgba(39,164,218,.42);
  --q-glow-cyan-md:0 0 28px rgba(39,164,218,.34),0 0 70px rgba(39,164,218,.14);
  --q-glow-blue-md:0 0 36px rgba(53,118,232,.34),0 0 90px rgba(53,118,232,.16);
  --q-glow-indigo-md:0 0 42px rgba(103,65,249,.34),0 0 96px rgba(103,65,249,.16);
  --q-glow-verified:0 0 26px rgba(22,199,132,.62),0 0 76px rgba(22,199,132,.28),inset 0 0 22px rgba(22,199,132,.13);
  --q-glow-unsigned:0 0 22px rgba(245,158,11,.38),inset 0 0 16px rgba(245,158,11,.08);
  --q-glow-failed:0 0 22px rgba(239,68,68,.42),inset 0 0 16px rgba(239,68,68,.08);

  /* CTA gradient */
  --q-grad-cta:linear-gradient(135deg,#3576E8 0%,#6741F9 58%,#9448FD 100%);

  /* motion */
  --q-ease-out:cubic-bezier(.16,1,.3,1);
  --q-ease-ui:cubic-bezier(.2,.8,.2,1);
  --q-dur-fast:150ms; --q-dur-ui:240ms; --q-dur-hover:320ms;
  --q-dur-panel:520ms; --q-dur-enter:860ms;

  /* atmosphere dials (quiet defaults; modes override on body[...]) */
  --q-atmo-neb-o:.62;
  --q-atmo-grain-o:.060;
  --q-atmo-pointer-o:.16;

  /* ---- legacy token retarget: re-skins everything styles.css/pages.css
          painted with the old vars, without touching their rules ---- */
  --bg:#05050B;
  --card:rgba(14,17,37,.74);
  --stroke:rgba(252,252,252,.12);
  --stroke2:rgba(252,252,252,.08);
  --txt:rgba(252,252,252,.96);
  --muted:rgba(252,252,252,.68);
  --radius:16px;
  --shadow:0 24px 80px rgba(0,0,0,.46);
  --shadow2:0 34px 110px rgba(0,0,0,.56);
  --btnGrad:linear-gradient(135deg,#3576E8 0%,#6741F9 58%,#9448FD 100%);
  --glass:rgba(14,17,37,.72);
  --glass2:rgba(9,20,56,.55);
  --accent:rgba(39,164,218,.92);
  --accent2:rgba(103,65,249,.88);
  --ring:rgba(39,164,218,.45);
}

/* ============================ 2. GROUND ============================ */
/* overflow clip lives on <html> ONLY — body overflow / sticky untouched */
html{overflow-x:clip;color-scheme:dark}

body{
  background:
    var(--q-horizon-glow),
    linear-gradient(160deg,#05050B 0%,#090916 26%,#090C2C 58%,#091438 100%);
  background-color:#05050B;
  color:var(--q-text-secondary);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Legacy backdrops are replaced by the q-atmo stack (or, no-JS, by the
   body gradient above). Hidden, not removed — additive reskin. */
.bg-fixed{display:none !important}
.quantor-video-bg{display:none !important}

::selection{background:rgba(39,164,218,.32);color:#FCFCFC}

:focus-visible{
  outline:2px solid var(--q-cyan);
  outline-offset:3px;
}

/* ====================== 3. ATMOSPHERE LAYERS ======================
   Injected by q-canon.js as the first children of <body>. All fixed,
   pointer-events:none. Behind content: base -6, nebulas -5, stars -4,
   pointer light -3 (above background, below content — glass is
   translucent so it still reads through panels). Above content
   (per canon): vignette z1, grain z2 — blend-only, never interactive. */
.q-atmo-base,
.q-atmo-neb,
.q-atmo-stars,
.q-atmo-vignette,
.q-atmo-grain,
.q-atmo-pointer{
  position:fixed;
  pointer-events:none;
}

.q-atmo-base{
  inset:0;z-index:-6;
  background:var(--q-depth-bg-quiet);
}
.q-atmo-neb{
  inset:-12vh -8vw;z-index:-5;
  opacity:var(--q-atmo-neb-o);
  will-change:transform,opacity;
}
.q-atmo-neb--cyan{
  background:var(--q-nebula-cyan),var(--q-nebula-blue);
}
.q-atmo-neb--indigo{
  background:var(--q-nebula-indigo);
}
.q-atmo-neb--violet{
  background:var(--q-nebula-violet);
}
.q-atmo-stars{
  inset:0;z-index:-4;width:100%;height:100%;
}
.q-atmo-vignette{
  inset:0;z-index:1;
  background:var(--q-vignette);
}
.q-atmo-grain{
  inset:-40px;z-index:2;
  opacity:var(--q-atmo-grain-o);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.9'/></svg>");
  background-size:180px 180px;
}
.q-atmo-pointer{
  left:-260px;top:-260px;width:520px;height:520px;z-index:-3;
  border-radius:50%;
  mix-blend-mode:screen;
  opacity:var(--q-atmo-pointer-o);
  background:radial-gradient(circle at 50% 50%,rgba(53,118,232,.55),rgba(39,164,218,.20) 40%,rgba(39,164,218,0) 72%);
  will-change:transform;
}

/* ============================ 4. MODES ============================ */
/* quiet is the default (dials above). */
body[data-q-mode="loud-lite"]{--q-atmo-neb-o:1;--q-atmo-grain-o:.085;--q-atmo-pointer-o:.24}
body[data-q-mode="loud-lite"] .q-atmo-base{background:var(--q-depth-bg-base)}
body[data-q-mode="loud-lite"] .q-atmo-neb{animation:q-atmo-drift 18s ease-in-out infinite alternate}
body[data-q-mode="loud-lite"] .q-atmo-neb--indigo{animation-duration:24s;animation-delay:-9s}
body[data-q-mode="loud-lite"] .q-atmo-neb--violet{animation-duration:30s;animation-delay:-16s}

body[data-q-mode="plain"]{--q-atmo-neb-o:.34;--q-atmo-grain-o:.045;--q-atmo-pointer-o:0}
body[data-q-mode="plain"] .q-atmo-base{background:var(--q-depth-bg-plain)}
body[data-q-mode="plain"] .q-atmo-neb--violet{display:none}
body[data-q-mode="plain"] .q-atmo-pointer{display:none}

@keyframes q-atmo-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(18px,-12px,0)}
}

/* ========================= 5. TYPOGRAPHY ========================= */
h1,h2,h3,h4,.h1,.h2,.h3{
  color:var(--q-text-primary);
  font-family:var(--q-font-display);
}
h1,.h1{
  letter-spacing:-.012em;
  text-shadow:0 1px 24px rgba(5,5,11,.78),0 0 46px rgba(39,164,218,.14);
}
h2,.h2{letter-spacing:-.01em}
p{max-width:var(--q-measure)}

/* opt-in H1 gradient fill (static — no shimmer in the shared layer) */
.q-h1grad{
  background:linear-gradient(104deg,#FCFCFC 4%,rgba(67,144,227,.92) 34%,rgba(39,164,218,.96) 62%,#FCFCFC 88%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .q-h1grad{background:none;color:var(--q-text-primary);-webkit-text-fill-color:currentColor}
}

.lead,.sub{color:var(--q-text-secondary)}
.page-hero .sub,.sec-hero .sub,.why-hero .sub,.how-hero .sub,
.pr-hero .sub,.st-hero .sub{color:var(--q-text-secondary)}
.fineprint{color:var(--q-text-faint)}

/* ====================== 6. SITE CHROME — NAV ====================== */
.topbar{
  background:rgba(9,12,44,.72);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  border-bottom:0;
  box-shadow:0 14px 42px rgba(0,0,0,.34);
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--q-border-hairline);
  opacity:.85;pointer-events:none;
}

.nav a{
  color:var(--q-text-muted);
  transition:color var(--q-dur-ui) var(--q-ease-ui),
             opacity var(--q-dur-ui) var(--q-ease-ui),
             transform var(--q-dur-ui) var(--q-ease-ui);
}
.nav a:hover{color:var(--q-text-primary)}
.nav a[aria-current="page"],.nav a.is-active{color:var(--q-text-primary)}
.nav a::after{
  background:linear-gradient(90deg,var(--q-cyan),var(--q-indigo-1));
}
.nav a .nav-badge{
  background:linear-gradient(135deg,var(--q-cyan),var(--q-indigo-1));
  color:#05050B;
}
/* mobile off-canvas panel (desktop row layout untouched) */
@media (max-width:1023px){
  .nav{
    background:rgba(9,9,22,.94);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    backdrop-filter:blur(18px) saturate(145%);
    border-left:1px solid rgba(67,144,227,.22);
  }
}
body.nav-open::before{background:rgba(5,5,11,.6)}
.burger span{background:rgba(252,252,252,.92)}

/* ====================== 7. SITE CHROME — FOOTER ====================== */
.footer,.footer-mini{
  position:relative;
  border-top:1px solid rgba(39,164,218,.20);
  background:
    var(--q-horizon-glow),
    linear-gradient(180deg,rgba(9,12,44,.30) 0%,rgba(5,5,11,.82) 100%);
}
.footer__col a,.footer-mini a{
  color:var(--q-text-muted);
  transition:color var(--q-dur-ui) var(--q-ease-ui);
}
.footer__col a:hover,.footer-mini a:hover{color:var(--q-link-hover)}
.footer__title{color:var(--q-text-secondary)}
.footer__muted{color:var(--q-text-muted) !important}

.trust-badge{
  background:rgba(9,20,56,.60);
  border:1px solid rgba(67,144,227,.28);
  color:var(--q-text-muted);
}
/* live Ed25519 verification — a REAL verified/unsigned state */
.trust-badge[data-verified="true"]{
  border-color:rgba(22,199,132,.5);color:var(--q-verified);
  box-shadow:0 0 22px rgba(22,199,132,.22);
}
.trust-badge[data-verified="false"]{
  border-color:rgba(245,158,11,.45);color:var(--q-unsigned);
  box-shadow:var(--q-glow-unsigned);
}

/* ========================== 8. BUTTONS ========================== */
.btn{
  position:relative;overflow:hidden;
  background:var(--q-grad-cta);
  border:1px solid rgba(103,65,249,.55);
  color:#FCFCFC;
  box-shadow:var(--q-glow-blue-md),0 10px 30px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(252,252,252,.18);
  transition:transform var(--q-dur-hover) var(--q-ease-ui),
             box-shadow var(--q-dur-hover) var(--q-ease-ui),
             background var(--q-dur-hover) var(--q-ease-ui),
             border-color var(--q-dur-hover) var(--q-ease-ui),
             filter var(--q-dur-fast) ease;
}
/* glare sweep */
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(252,252,252,0) 30%,rgba(252,252,252,.22) 46%,rgba(252,252,252,0) 62%);
  transform:translateX(-130%) skewX(-18deg);
  transition:transform 760ms var(--q-ease-out);
}
.btn:hover::after{transform:translateX(130%) skewX(-18deg)}
.btn:hover{
  transform:translateY(-2px) scale(1.01);
  filter:none;
  box-shadow:0 0 44px rgba(53,118,232,.42),0 0 108px rgba(103,65,249,.20),
             0 14px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(252,252,252,.18);
}
.btn:active{transform:translateY(0) scale(1)}

.btn--ghost{
  background:rgba(67,144,227,.07);
  border-color:rgba(67,144,227,.30);
  color:var(--q-text-primary);
  box-shadow:none;
}
.btn--ghost:hover{
  background:rgba(9,20,56,.78);
  border-color:rgba(39,164,218,.55);
  filter:none;
  box-shadow:0 0 18px rgba(39,164,218,.18);
}

/* .btn--cta (both legacy definitions) collapses onto the canon primary */
.btn--cta{
  background:var(--q-grad-cta);
  color:#FCFCFC;
  border:1px solid rgba(103,65,249,.55);
  box-shadow:var(--q-glow-blue-md),0 10px 30px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(252,252,252,.18);
}
.btn--cta:hover{
  background:var(--q-grad-cta);
  transform:translateY(-2px) scale(1.01);
  filter:none;
  box-shadow:0 0 44px rgba(53,118,232,.42),0 0 108px rgba(103,65,249,.20),
             0 14px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(252,252,252,.18);
}
.btn--cta:active{background:var(--q-grad-cta);transform:translateY(0)}

.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.48;transform:none;box-shadow:none;cursor:default;
}
.btn:disabled::after,.btn[disabled]::after{content:none}

/* focus rings → cyan (overrides legacy blue/indigo rings) */
.btn:focus,.btn:focus-visible,
.btn--sm:focus,.btn--sm:focus-visible,
.btn--ghost:focus,.btn--ghost:focus-visible,
.btn--cta:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 2px rgba(39,164,218,.70),0 0 0 5px rgba(39,164,218,.16);
}
.nav .btn--ghost:focus,.nav .btn--ghost:focus-visible{
  outline:none !important;
  box-shadow:inset 0 0 0 1px rgba(39,164,218,.10),
             0 0 0 2px rgba(39,164,218,.70),0 0 0 5px rgba(39,164,218,.16);
}

/* ====================== 9. PILLS / EYEBROWS ====================== */
.pill,.chip{
  background:rgba(9,20,56,.56);
  border:1px solid rgba(67,144,227,.28);
  color:var(--q-text-secondary);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform var(--q-dur-ui) var(--q-ease-ui),
             border-color var(--q-dur-ui) var(--q-ease-ui);
}
.pill:hover,.chip:hover{transform:translateY(-1px);border-color:rgba(39,164,218,.5)}

/* hero pills → mono eyebrow chips; kills the legacy green/purple tints */
.page-hero .pill,.sec-hero .pill,.why-hero .pill,
.how-hero .pill,.pr-hero .pill,.st-hero .pill,
.page-hero .pill--blue,.page-hero .pill--purple,
.page-hero .pill--green,.page-hero .pill--amber{
  background:rgba(9,20,56,.56);
  border:1px solid rgba(67,144,227,.32);
  color:var(--q-cyan);
  font-family:var(--q-font-mono);
  font-weight:600;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;
}

.badge{
  background:rgba(9,20,56,.56);
  border:1px solid rgba(67,144,227,.28);
  color:var(--q-text-muted);
  font-family:var(--q-font-mono);letter-spacing:.08em;text-transform:uppercase;
}

/* legacy green hero-safety strip → cyan (green is verified-only) */
.heroSafety__b{
  border-color:rgba(39,164,218,.30);
  background:rgba(39,164,218,.08);
  color:var(--q-text-secondary);
}
.heroSafety__i{stroke:var(--q-cyan)}
.heroSafety__i circle{fill:rgba(39,164,218,.14)}

/* ====================== 10. VERDICT / STATUS ====================== */
/* .badge-ok marks an actual Ed25519 signature verification → emerald OK */
.badge-ok{
  background:rgba(22,199,132,.13);
  border:1px solid rgba(22,199,132,.5);
  color:var(--q-verified);
  box-shadow:0 0 18px rgba(22,199,132,.20);
}
.badge-warn{
  background:rgba(245,158,11,.085);
  border:1px solid rgba(245,158,11,.45);
  color:var(--q-unsigned);
}
.badge-bad,.badge-err{
  background:rgba(239,68,68,.085);
  border:1px solid rgba(239,68,68,.45);
  color:var(--q-failed);
}

/* feature-matrix marks: presence=cyan, absence=red, opacity-warning=amber */
.tick,.compare-table td.tick{color:var(--q-cyan)}
.cross,.compare-table td.cross{color:var(--q-failed)}
.opaque{color:var(--q-unsigned)}
.dimension .verdict.win{
  background:rgba(39,164,218,.13);border:1px solid rgba(39,164,218,.4);
  color:var(--q-cyan);
}
.dimension .verdict.parity{
  background:rgba(37,43,70,.6);border:1px solid rgba(252,252,252,.16);
  color:var(--q-text-secondary);
}

/* PAPER lane = cyan/blue (never emerald); LIVE lane = indigo/violet */
.live-vs-paper .lane.paper{
  background:rgba(39,164,218,.06);border-color:rgba(39,164,218,.28);
}
.live-vs-paper .lane.live{
  background:rgba(148,72,253,.06);border-color:rgba(148,72,253,.30);
}
.live-vs-paper .lane.paper h3 span{color:var(--q-cyan)}
.live-vs-paper .lane.live h3 span{color:var(--q-violet)}

/* strategy tags / version status chips */
.strat__main .tag.safe{
  background:rgba(39,164,218,.12);border-color:rgba(39,164,218,.3);
  color:var(--q-cyan);
}
.strat__main .tag.adv{
  background:rgba(148,72,253,.12);border-color:rgba(148,72,253,.3);
  color:var(--q-violet);
}
.strat__main .tag.mode{
  background:rgba(53,118,232,.10);border-color:rgba(53,118,232,.28);
  color:var(--q-blue-2);
}
.pine-block .ver .status.shipped{background:rgba(39,164,218,.15);color:var(--q-cyan)}
.pine-block .ver .status.beta{background:rgba(148,72,253,.15);color:var(--q-violet)}

/* demo signal chips: BUY=cyan, SELL=violet, HOLD=neutral (no semantics) */
.sig--buy{background:rgba(39,164,218,.10);border-color:rgba(39,164,218,.30)}
.sig--sell{background:rgba(148,72,253,.10);border-color:rgba(148,72,253,.30)}
.sig--hold{background:rgba(37,43,70,.4);border-color:rgba(252,252,252,.14)}

/* ======================= 11. GLASS SURFACES ======================= */
/* Canon glass: layered translucency, hairline stroke, lighter top edge,
   radius 16-18, deep shadow, blur. Applied by overriding every legacy
   card/panel surface. Hover lift stays subtle (-2px).                  */
.card,
.stepCard,
.diff-card,
.tg-cmd,
.faqItem,
.trustItem,
.planCard,
.plan,
.pillar,
.dimension,
.step,
.live-vs-paper .lane,
.verify-card,
.ctaBox,
.cta-block,
.checkoutBox,
.strat,
.pine-block,
.pine-block .ver,
.limits-table,
.rails,
.gate-list li,
.regimeUSPCard,
.tgbox,
.demoTerminal,
.demoChartCard,
.free-hero{
  background:var(--q-glass-fill-quiet);
  border:1px solid var(--q-hairline);
  border-radius:var(--q-radius-card);
  box-shadow:var(--q-glass-shadow-mid);
  -webkit-backdrop-filter:blur(var(--q-glass-blur)) saturate(var(--q-glass-saturate));
  backdrop-filter:blur(var(--q-glass-blur)) saturate(var(--q-glass-saturate));
}
/* wide feature surfaces read better at 18px */
.pillar,.dimension,.step,.strat,.cta-block,.free-hero,.rails{
  border-radius:var(--q-radius-card-lg);
}
/* the two lanes keep their (re-tinted) fills from section 10 */
.live-vs-paper .lane.paper,.live-vs-paper .lane.live{
  box-shadow:var(--q-glass-shadow-low);
}

.card:hover,.stepCard:hover,.diff-card:hover,.plan:hover,.planCard:hover{
  transform:translateY(-2px);
  border-color:rgba(39,164,218,.40);
  box-shadow:var(--q-glass-shadow-high);
  filter:none;
}

/* dashed honesty boxes stay dashed but move to canon strokes */
.fairness,.no-promise{
  background:rgba(9,9,22,.60);
  border-color:rgba(67,144,227,.30);
  border-radius:var(--q-radius-card);
}
.no-promise{border-color:rgba(245,158,11,.35)}
.no-promise h3{color:var(--q-unsigned)}
.fairness h3{color:var(--q-cyan)}

/* section headers / etched labels inside cards */
.step__body .meta,
.diff-card__num,
.gate__code,
.verify-row .k,
.pillar h3.subhead,
.dimension .label,
.strat__params .label,
.rail-row .name{
  color:var(--q-cyan);
  font-family:var(--q-font-mono);
  letter-spacing:.13em;
}
.step__num{
  background:linear-gradient(135deg,var(--q-cyan),var(--q-violet));
  -webkit-background-clip:text;background-clip:text;
}
.verify-card h3{color:var(--q-cyan)}
.diff-card__cta{color:var(--q-link)}
.diff-card:hover{border-color:rgba(39,164,218,.40)}

/* engraved divider helper for pages that opt in */
.q-hairline{height:1px;background:var(--q-engraved-line);opacity:.7;border:0}

/* ========================= 12. TABLES ========================= */
.compare-table th,.grid-compare th,.limits-table th{
  color:var(--q-cyan);
  background:rgba(36,39,57,.55);
}
.grid-compare th.quantor-col{
  color:var(--q-violet);background:rgba(148,72,253,.10);
}
.grid-compare td.quantor-col{background:rgba(148,72,253,.06)}
.compare-table th,.compare-table td,
.grid-compare th,.grid-compare td,
.limits-table th,.limits-table td{
  border-bottom:1px solid rgba(67,144,227,.14);
}
.compare-table tbody tr:hover td,
.grid-compare tbody tr:hover td,
.limits-table tbody tr:hover td{
  background:rgba(67,144,227,.075);
}
.compare-table tbody tr:hover td:first-child,
.grid-compare tbody tr:hover td:first-child,
.limits-table tbody tr:hover td:first-child{
  box-shadow:inset 2px 0 0 rgba(39,164,218,.6);
}
.limits-table td.num{color:var(--q-text-primary)}

/* ====================== 13. CODE / HASH CHIPS ====================== */
code,kbd{
  font-family:var(--q-font-mono);
  background:rgba(9,20,56,.60);
  border:1px solid rgba(39,164,218,.22);
  border-radius:var(--q-radius-sm);
  padding:1px 6px;
  color:rgba(252,252,252,.86);
}
/* 2026-08-21 — inline code holding a path or a URL is the other thing that runs
   past the right edge on a phone. html{overflow-x:clip} above then HIDES the
   tail instead of letting the reader scroll to it, so the end of the string is
   simply gone with no cue that it was there. Measured on /blog/signed-builds-
   ed25519 at 390px: two such spans at 428px and 436px, both clipped. Only inline
   code is touched — code inside <pre> keeps the block's own horizontal scroll,
   which is the right behaviour for a command you copy whole. */
:not(pre) > code{overflow-wrap:anywhere}
pre{
  background:linear-gradient(180deg,rgba(9,20,56,.68),rgba(5,5,11,.54));
  border:1px solid rgba(39,164,218,.24);
  border-radius:var(--q-radius-lg);
  box-shadow:inset 0 0 24px rgba(5,5,11,.48);
  color:var(--q-text-secondary);
}
pre code{background:none;border:0;padding:0}
/* legacy per-context code tints → canon cyan wells */
.step__body code,.tg-cmd code{
  background:rgba(9,20,56,.60);color:var(--q-cyan);
  border:1px solid rgba(39,164,218,.20);
}
.step__body .cmd-line,.tgbox__code{
  background:linear-gradient(180deg,rgba(9,20,56,.68),rgba(5,5,11,.54));
  border:1px solid rgba(39,164,218,.24);
  color:var(--q-text-secondary);
  box-shadow:inset 0 0 24px rgba(5,5,11,.48);
}
.verify-row .v{color:var(--q-text-primary)}
.verify-card .recipe pre{color:var(--q-text-secondary)}
.verify-card .recipe summary{color:var(--q-link)}
.tg-cmd .desc{color:var(--q-text-muted)}

/* ==================== 14. FORMS + AUTH MODAL ==================== */
.field input,
#authForm .field input,
.input,
.select select,
textarea,
select{
  background:rgba(9,20,56,.52);
  border:1px solid rgba(67,144,227,.30);
  color:var(--q-text-primary);
  border-radius:var(--q-radius-lg);
  caret-color:var(--q-cyan);
  transition:border-color var(--q-dur-ui) var(--q-ease-ui),
             box-shadow var(--q-dur-ui) var(--q-ease-ui),
             background var(--q-dur-ui) var(--q-ease-ui);
}
.field input:hover,.input:hover,textarea:hover,select:hover{
  border-color:rgba(39,164,218,.46);
}
.field input:focus,
#authForm .field input:focus,
.input:focus,
textarea:focus,
select:focus{
  outline:none;
  border-color:rgba(39,164,218,.80);
  box-shadow:0 0 0 4px rgba(39,164,218,.14),var(--q-glow-cyan-sm);
  background:rgba(9,20,56,.66);
}
.input::placeholder,.field input::placeholder{color:var(--q-text-faint)}
.form__msg--ok{color:var(--q-cyan)}          /* op success ≠ verified proof */
.form__msg--err{color:var(--q-failed)}

.modal__backdrop{
  background:rgba(5,5,11,.74);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.modal__card{
  background:var(--q-glass-fill-plain);
  -webkit-backdrop-filter:blur(var(--q-glass-blur)) saturate(var(--q-glass-saturate));
  backdrop-filter:blur(var(--q-glass-blur)) saturate(var(--q-glass-saturate));
  border:1px solid rgba(67,144,227,.30);
  border-radius:var(--q-radius-card);
  box-shadow:var(--q-glass-shadow-high);
}
.modal__close{
  background:rgba(9,20,56,.60);
  border:1px solid rgba(67,144,227,.30);
  color:var(--q-text-primary);
  border-radius:var(--q-radius-lg);
}
.modal__close:hover{border-color:rgba(39,164,218,.55);filter:none}
.modal__kicker{color:var(--q-text-faint)}
#authForgotLink{color:var(--q-text-muted)}
#authForgotLink:hover{color:var(--q-text-primary)}

/* ====================== 15. SCRUBBED REVEALS ======================
   q-canon.js writes --qrv (0..1) per element per frame — a PURE
   function of scroll position: fully bidirectional, no one-shot end
   states. Gated on html.q-canon-js so a script failure leaves the
   page fully visible. Transform+opacity only (no scrubbed blur —
   the performance budget forbids continuously animated filters).    */
html.q-canon-js [data-qrv]{
  --qrv:0;
  opacity:calc(.10 + var(--qrv) * .90);
  transform:translate3d(0,calc((1 - var(--qrv)) * 26px),0);
  will-change:transform,opacity;
}

/* ========================= 15b. PRINT ==========================
   Reveals are a scroll effect and paper does not scroll. Without this
   every [data-qrv] below the first screen prints at its resting 10%
   opacity, so "Save as PDF" of the Terms, the Privacy Policy or any
   article produces a document that is a faint ghost from the second
   screenful onwards. The atmosphere layers are dropped too — they are
   decoration that would only eat toner.                             */
@media print{
  html.q-canon-js [data-qrv]{
    opacity:1 !important;
    transform:none !important;
    will-change:auto !important;
  }
  .q-atmo-base,.q-atmo-neb,.q-atmo-stars,.q-atmo-vignette,
  .q-atmo-grain,.q-atmo-pointer{ display:none !important; }
}

/* ====================== 16. REDUCED MOTION ======================
   Everything static — but still layered, grained, expensive.       */
@media (prefers-reduced-motion: reduce){
  html.q-canon-js [data-qrv]{
    opacity:1 !important;
    transform:none !important;
    will-change:auto;
  }
  .q-atmo-neb{animation:none !important}
  .q-atmo-pointer{display:none}
  .btn::after,.btn--cta::after{content:none}
  .btn:hover,.btn--cta:hover,
  .card:hover,.stepCard:hover,.diff-card:hover,
  .plan:hover,.planCard:hover,.pill:hover,.chip:hover{
    transform:none;
  }
}

/* ======================== 17. MOBILE SAFETY ======================== */
@media (max-width:640px){
  .q-atmo-neb{inset:-8vh -16vw}          /* keep fields visible, cheap */
  .btn:hover{transform:none}             /* no lift on coarse pointers */
}
@media (max-width:414px){
  .topbar{-webkit-backdrop-filter:blur(14px) saturate(145%);
          backdrop-filter:blur(14px) saturate(145%)}
}

/* ================== 18. CONSTELLATION MOBILE MENU (.qcm) ==================
   2026-08-22 — the landing's "Constellation" menu, ported for every other
   template (founder: «сделать чтобы новое меню было везде»). The landing
   keeps its own inline copy, fused to its auth modal; this one is built
   and driven by q-canon.js initNav(). Namespaced .qcm-* deliberately:
   the landing's bare .crow/.ch/.cat names collide even inside index.html.
   Colors and faces come from the canon tokens with the same literal
   fallbacks the rest of this sheet uses. The sheet is fixed and hidden;
   only the <1024px burger can open it, and a desktop resize closes it
   from JS — the display:none guard below is the belt to that brace. */
.qcm{
  position:fixed;inset:0;z-index:95;
  padding:calc(env(safe-area-inset-top,0px) + 78px) 8px calc(env(safe-area-inset-bottom,0px) + 8px);
  visibility:hidden;pointer-events:none;
  --axis:74px;
}
.qcm-scrim{
  position:fixed;inset:0;z-index:94;opacity:0;pointer-events:none;
  background:rgba(5,5,11,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.qcm__panel{
  position:relative;height:100%;border-radius:22px;overflow:hidden;opacity:0;
  /* canon glass: deep-space fill with two coloured pools, never a black sheet */
  background:
    radial-gradient(115% 55% at 10% 4%,rgba(39,164,218,.17),transparent 62%),
    radial-gradient(95% 50% at 96% 100%,rgba(103,65,249,.20),transparent 68%),
    radial-gradient(70% 34% at 34% 46%,rgba(10,40,86,.55),transparent 72%),
    rgba(14,17,37,.72);
  backdrop-filter:blur(26px) saturate(1.25);-webkit-backdrop-filter:blur(26px) saturate(1.25);
  box-shadow:0 40px 80px -28px rgba(5,5,11,.92);
  transform-origin:50% 0;
}
.qcm__panel::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(252,252,252,.20),rgba(39,164,218,.42),rgba(103,65,249,.40),rgba(252,252,252,.10));
  padding:1px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.qcm__inner{position:relative;height:100%;padding:18px 20px 20px;display:flex;flex-direction:column;overflow-y:auto}
.qcm__chrome{
  display:flex;align-items:center;gap:10px;padding-left:var(--axis);min-height:14px;opacity:0;
  font:600 10px/1 var(--q-font-mono,ui-monospace,monospace);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(252,252,252,.42);
}
.qcm__chrome i{width:5px;height:5px;border-radius:50%;background:var(--q-cyan,#27A4DA);
  box-shadow:0 0 8px rgba(39,164,218,.9);flex:none}
.qcm__chrome b{flex:1;height:1px;background:linear-gradient(90deg,rgba(39,164,218,.5),rgba(252,252,252,.06))}
/* one SVG behind everything; edges live in the left gutter */
.qcm__field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.qcm__field .ch{fill:none;stroke:var(--q-cyan,#27A4DA);stroke-width:1.1;stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(39,164,218,.55))}
.qcm__field .cr{fill:none;stroke:var(--q-cyan,#27A4DA);stroke-width:.9;stroke-linecap:round}
.qcm__field .pl{fill:none;stroke:var(--q-white,#FCFCFC);stroke-width:2;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(39,164,218,.95))}
.qcm__field .du{fill:var(--q-white,#FCFCFC)}
.qcm__rows{position:relative;margin-top:16px}
.qcm__row{
  position:relative;display:flex;align-items:center;gap:12px;
  min-height:56px;padding-left:var(--axis);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.qcm__row .lbl{flex:1;font-family:var(--q-font-display,"Space Grotesk",Inter,system-ui,sans-serif);font-weight:600;font-size:17px;
  letter-spacing:-.01em;color:rgba(252,252,252,.90)}
.qcm__row .cat{flex:none;font:600 10px/1 var(--q-font-mono,ui-monospace,monospace);letter-spacing:.13em;
  text-transform:uppercase;color:rgba(252,252,252,.26)}
/* --q is this row's reveal progress, written by JS; node and word light together */
.qcm__row .lbl,.qcm__row .cat{opacity:var(--q,1);transform:translateX(calc((1 - var(--q,1)) * 12px))}
.qcm__node{
  position:absolute;top:50%;left:var(--nx,30px);width:var(--s,9px);height:var(--s,9px);
  /* negative margins, NOT translate — offsetLeft/offsetTop must stay exact
     so JS can measure true node centres without transform noise */
  margin-left:calc(var(--s,9px) / -2);margin-top:calc(var(--s,9px) / -2);
  border-radius:50%;background:var(--q-cyan,#27A4DA);
  box-shadow:0 0 10px rgba(39,164,218,.85),0 0 22px rgba(39,164,218,.35);
  opacity:var(--q,1);transform:scale(calc(.35 + .65 * var(--q,1)));
}
.qcm__row.is-here .qcm__node{--s:13px;background:var(--q-white,#FCFCFC);
  box-shadow:0 0 12px rgba(252,252,252,.95),0 0 26px rgba(39,164,218,.85),0 0 52px rgba(39,164,218,.45)}
.qcm__row.is-here .qcm__node::after{content:'';position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(39,164,218,.55);animation:qcmbeacon 2.8s var(--q-ease-out,cubic-bezier(.16,1,.3,1)) infinite}
.qcm__row.is-here .lbl{color:var(--q-white,#FCFCFC)}
.qcm__row.is-here .cat{color:var(--q-cyan,#27A4DA)}
@keyframes qcmbeacon{0%{transform:scale(.72);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
.qcm__row.is-flash .qcm__node{background:var(--q-white,#FCFCFC);
  box-shadow:0 0 16px rgba(252,252,252,1),0 0 40px rgba(39,164,218,.95);
  transition:box-shadow .18s var(--q-ease-out,cubic-bezier(.16,1,.3,1)),background .18s var(--q-ease-out,cubic-bezier(.16,1,.3,1))}
/* the hub the light starts from */
.qcm__acct{min-height:66px}
.qcm__acct .k{display:block;font:600 10px/1 var(--q-font-mono,ui-monospace,monospace);letter-spacing:.13em;
  text-transform:uppercase;color:rgba(39,164,218,.78);margin-bottom:5px}
.qcm__acct .v{display:block;font-family:var(--q-font-display,"Space Grotesk",Inter,system-ui,sans-serif);font-weight:500;font-size:15px;
  color:rgba(252,252,252,.92);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qcm__acct .stk{flex:1;min-width:0;opacity:var(--q,1);transform:translateX(calc((1 - var(--q,1)) * 12px))}
.qcm__actions{margin-top:auto;padding-bottom:2px}
.qcm__actions .qcm__row{min-height:58px}
.qcm__btn{
  flex:1;height:48px;border-radius:13px;display:flex;align-items:center;
  justify-content:space-between;padding:0 16px;text-decoration:none;cursor:pointer;
  font-family:var(--q-font-display,"Space Grotesk",Inter,system-ui,sans-serif);font-weight:600;font-size:15px;
  opacity:var(--q,1);transform:translateX(calc((1 - var(--q,1)) * 12px));
}
.qcm__btn .cat{opacity:.55}
.qcm__btn--ghost{color:rgba(252,252,252,.92);background:rgba(252,252,252,.045);
  border:1px solid rgba(252,252,252,.17)}
.qcm__btn--primary{color:var(--q-white,#FCFCFC);border:1px solid rgba(252,252,252,.16);
  background:linear-gradient(115deg,#3576E8 0%,#6741F9 58%,#9448FD 100%);
  box-shadow:0 12px 30px -14px rgba(103,65,249,.95),inset 0 1px 0 rgba(252,252,252,.22)}
.qcm__btn--primary .cat{color:rgba(252,252,252,.72);opacity:.8}
.qcm__foot{display:flex;align-items:center;gap:10px;padding-left:var(--axis);
  margin-top:14px;opacity:0;
  font:600 10px/1 var(--q-font-mono,ui-monospace,monospace);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(252,252,252,.34)}
.qcm__foot b{width:22px;height:1px;background:rgba(252,252,252,.22)}
/* the consent banner (z9999) covered the sheet's two action rows — measured
   by hit-test on /pricing. While the menu is open the banner steps aside;
   hidden, never dismissed: consent is not something a menu gets to answer. */
body.qcm-open #quantor-consent{visibility:hidden}
@media (min-width:1024px){
  /* the burger that opens this is display:none up here; this is the belt */
  .qcm,.qcm-scrim{display:none}
}
@media (prefers-reduced-motion:reduce){
  .qcm__panel,.qcm__row .lbl,.qcm__row .cat,.qcm__node{transition:none!important}
  /* the landing forgets this one: the beacon keeps pulsing under RM there */
  .qcm__row.is-here .qcm__node::after{animation:none}
}