/* =========================================================
   NetRoom landing — design tokens & base
   Scoped to #nr-root to avoid leaking into admin/other pages.
   ========================================================= */
#nr-root {
  --bg: #09090b;
  --bg-1: #0d0d10;
  --bg-2: #121216;
  --bg-3: #17171c;
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.12);

  --fg: #f2f2f4;
  --fg-dim: #a1a1aa;
  --fg-faint: #6b6b74;
  --fg-mute: #4a4a52;

  --scrim-rgb: 255, 255, 255;
  --ink-rgb: 0, 0, 0;
  --nav-bg: rgba(9, 9, 11, 0.72);

  --a1: #b37aff;
  --a2: #ff7a59;
  --a3: #ffc266;
  --a4: #9ee7c7;
  /* Brand gradient (violet) — the logo mark and primary CTAs share one ramp. */
  --g1: #b37aff;
  --g2: #8b5cf6;
  --g3: #7a4ce0;
  --g4: #6f3fd8;
  --grad: linear-gradient(90deg, var(--g1) 0%, var(--g2) 55%, var(--g4) 100%);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Confident-settle ease — entrances & scroll-reveal only. */
  --ease-entry: cubic-bezier(0.16, 1, 0.3, 1);

  /* Motion duration scale — graduated by UI weight, one place to audit.
     Used by every transition/animation added in the 2026-07 motion pass. */
  --nr-motion-fast:   150ms;  /* icon swaps, small chip/nav hover */
  --nr-motion-base:   200ms;  /* card/button hover, standard UI feedback */
  --nr-motion-slow:   350ms;  /* theme-token transition, modal chrome fades */
  --nr-motion-reveal: 560ms;  /* scroll-reveal settle, hero entrance per-element duration */

  /* Hover glow — single calibrated source for the card/button hover language.
     Dark matches the existing .btn-primary hover glow alpha, tuned down for
     the wider surface of model/gallery/pricing cards. */
  --nr-glow: rgba(179, 122, 255, 0.38);

  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  transition: background-color var(--nr-motion-slow) var(--ease), color var(--nr-motion-slow) var(--ease);
}

#nr-root[data-theme="light"] {
  --bg: #ffffff;
  --bg-1: #fafafa;
  --bg-2: #f4f4f5;
  --bg-3: #ebebed;
  --line: rgba(0, 0, 0, 0.07);
  --line-2: rgba(0, 0, 0, 0.14);

  --fg: #09090b;
  --fg-dim: #52525b;
  --fg-faint: #86868d;
  --fg-mute: #b8b8be;

  --scrim-rgb: 0, 0, 0;
  --ink-rgb: 255, 255, 255;
  --nav-bg: rgba(255, 255, 255, 0.82);

  /* Same hue as --g2, lower alpha — enough presence on white, never muddy. */
  --nr-glow: rgba(139, 92, 246, 0.24);
}

html.nr-scope { overflow-x: hidden; }
html.nr-scope, html.nr-scope body { margin: 0; padding: 0; background: var(--bg, #09090b); }
#nr-root * { box-sizing: border-box; }
#nr-root a { color: inherit; text-decoration: none; }
#nr-root button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
#nr-root ::selection { background: rgba(179, 122, 255, 0.35); color: #fff; }

/* Utility */
#nr-root .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
#nr-root .narrow    { max-width: 960px;  margin: 0 auto; padding: 0 32px; }

#nr-root .grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#nr-root .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-dim);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(var(--scrim-rgb), 0.02);
}
#nr-root .eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--grad); }

/* Buttons */
#nr-root .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
@media (hover: hover) { #nr-root .btn:hover { transform: translateY(-1px); } }
#nr-root .btn:active { transform: translateY(0); }
#nr-root .btn-primary {
  background: var(--grad); color: #1a0f08; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(179, 122, 255, 0.5);
}
#nr-root .btn-primary:hover {
  box-shadow: 0 16px 38px -10px var(--nr-glow);
  transform: translateY(-2px);
}
#nr-root .btn-ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--line-2);
}
#nr-root .btn-ghost:hover { background: rgba(var(--scrim-rgb), 0.04); border-color: rgba(var(--scrim-rgb), 0.2); }
#nr-root .btn-dark {
  background: var(--bg-2); color: var(--fg); border: 1px solid var(--line);
}
#nr-root .btn-dark:hover { background: var(--bg-3); }
#nr-root .btn-sm { padding: 8px 14px; font-size: 13px; }
#nr-root .btn-lg { padding: 16px 28px; font-size: 15px; }

#nr-root .hero-reassure { margin: 18px 0 0; font-size: 13px; color: var(--fg-faint); letter-spacing: 0.01em; text-align: center; }
#nr-root .hero-reassure-left { text-align: left; }

/* Type */
#nr-root .t-display { font-weight: 500; font-size: clamp(30px, 5.19vw, 71px); line-height: 0.98; letter-spacing: -0.035em; }
#nr-root .t-h1      { font-weight: 500; font-size: clamp(36px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.028em; }
#nr-root .t-h2      { font-weight: 500; font-size: clamp(26px, 3vw, 42px); line-height: 1.1;  letter-spacing: -0.022em; }
#nr-root .t-h3      { font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
#nr-root .t-lead    { font-size: 18px; line-height: 1.5; color: var(--fg-dim); }
#nr-root .t-body    { font-size: 15px; color: var(--fg-dim); }
#nr-root .t-small   { font-size: 13px; color: var(--fg-dim); }
#nr-root .t-mono    { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }

/* Scroll-progress bar, pinned to the very top of the viewport */
#nr-root .nr-scrollbar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  transform-origin: left; transform: scaleX(0);
  background: var(--grad);
  box-shadow: 0 0 10px rgba(179, 122, 255, 0.45);
  pointer-events: none;
}

/* Nav */
#nr-root .nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 0 0 rgba(var(--ink-rgb), 0);
  transition: color var(--nr-motion-slow) var(--ease),
              border-color var(--nr-motion-slow) var(--ease),
              background-color var(--nr-motion-slow) var(--ease),
              box-shadow var(--nr-motion-slow) var(--ease);
}
/* MD07 — subtle elevation once the page has scrolled past the hero edge.
   Shadow color rides the brand glow token (already calibrated per theme:
   dimmer alpha in light, brighter in dark) so it never looks flat in light
   mode or blown out in dark mode. Toggled by the passive scroll listener
   in netroom.js (.nav.is-scrolled). */
#nr-root .nav.is-scrolled {
  box-shadow: 0 12px 24px -18px var(--nr-glow), 0 1px 0 var(--line-2);
}
#nr-root .nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; max-width: 1400px; margin: 0 auto;
}
#nr-root .logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
#nr-root .logo svg { flex-shrink: 0; }
#nr-root .nav-links { display: flex; align-items: center; gap: 4px; }
#nr-root .nav-link {
  padding: 8px 14px; color: var(--fg-dim); font-size: 14px;
  border-radius: 8px;
  /* Fixed the missing easing token (was default "ease"). No transform here —
     a lift on a tight horizontal row of text links reads as jittery, not
     premium; per the taxonomy, dense nav rows get glow/color-only feedback. */
  transition: color var(--nr-motion-base) var(--ease), background var(--nr-motion-base) var(--ease);
}
#nr-root .nav-link:hover { color: var(--fg); background: rgba(var(--scrim-rgb), 0.05); }
#nr-root .nav-right { display: flex; align-items: center; gap: 12px; }
#nr-root .nav-burger { display: none; }
#nr-root .nav-sheet { display: none; }

#nr-root .lang { position: relative; }
#nr-root .lang-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; border-radius: 999px;
  color: var(--fg-dim); font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  border: 1px solid var(--line);
  background: rgba(var(--scrim-rgb), 0.03);
  transition: color .2s, background .2s, border-color .2s;
}
#nr-root .lang-toggle:hover { color: var(--fg); border-color: var(--line-2); background: rgba(var(--scrim-rgb), 0.07); }
#nr-root .lang-toggle .lang-globe { flex-shrink: 0; opacity: 0.85; }
#nr-root .lang-toggle .lang-chev { flex-shrink: 0; opacity: 0.7; transition: transform .2s var(--ease); }
#nr-root .lang.open .lang-toggle { color: var(--fg); border-color: var(--line-2); background: rgba(var(--scrim-rgb), 0.07); }
#nr-root .lang.open .lang-toggle .lang-chev { transform: rotate(180deg); }
#nr-root .lang-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 170px;
  padding: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45), 0 4px 12px -4px rgba(0, 0, 0, 0.2);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 60;
  transition: background-color var(--nr-motion-slow) var(--ease),
              border-color var(--nr-motion-slow) var(--ease),
              color var(--nr-motion-slow) var(--ease);
}
#nr-root .lang-menu[hidden] { display: none; }
#nr-root .lang-opt {
  display: block; padding: 10px 12px;
  font-size: 14px; font-weight: 500; color: var(--fg-dim);
  border-radius: 8px;
  transition: background .15s, color .15s;
}
#nr-root .lang-opt:hover { background: rgba(var(--scrim-rgb), 0.06); color: var(--fg); }
#nr-root .lang-opt.active { background: rgba(var(--scrim-rgb), 0.08); color: var(--fg); }
#nr-root .theme-toggle {
  position: relative; /* anchor for the absolutely-positioned crossfading icons below */
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  color: var(--fg-dim); border: 1px solid var(--line);
  background: rgba(var(--scrim-rgb), 0.03);
  transition: color var(--nr-motion-base) var(--ease), background var(--nr-motion-base) var(--ease), border-color var(--nr-motion-base) var(--ease);
}
#nr-root .theme-toggle:hover { color: var(--fg); border-color: var(--line-2); background: rgba(var(--scrim-rgb), 0.07); }

/* Theme-icon crossfade — both [data-nr-theme-icon] SVGs stack in the same
   square (34px nav / 44px mobile sheet, both centered via the parent's
   existing flex align-items/justify-content, which also positions
   absolutely-positioned children with no inset set). JS toggles
   opacity/transform in place of the old instant style.display swap. */
#nr-root [data-nr-theme-icon] {
  position: absolute;
  transition: opacity var(--nr-motion-base) var(--ease), transform var(--nr-motion-base) var(--ease);
}

/* Sections */
#nr-root section { padding: 120px 0; position: relative; }
#nr-root .section-head {
  text-align: center; margin-bottom: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
#nr-root .section-head p { max-width: 620px; margin: 0; }

/* Page-wide ambient gradient — fixed to the viewport so it reads behind every
   section (nav/hero/footer), not just the hero. Mounted once near the top of
   #nr-root; main/.foot are promoted (position+z-index) below so it never
   paints over page content. */
#nr-root .ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
/* The glow is a radial gradient painted ONCE into the fixed layer — not a
   solid disc under `filter: blur(90px)`. A CSS blur on a composited layer is
   re-run by the GPU on every frame the layer is composited (every scroll
   frame, every drift keyframe); at 3x on a phone the three blurred discs were
   the single heaviest thing on the page and the main reason iOS Safari
   stuttered. The gradient stops approximate the blurred disc's profile
   (flat core, soft erf-like falloff), the boxes are enlarged by the blur's
   reach so the glow covers the same area as before. */
#nr-root .ambient .blob { position: absolute; border-radius: 50%; opacity: .35; }
#nr-root .ambient .b1 {
  width: 880px; height: 880px; top: -340px; left: -260px; opacity: .22;
  background: radial-gradient(closest-side, rgba(179,122,255,1) 0%, rgba(179,122,255,.82) 26%, rgba(179,122,255,.45) 52%, rgba(179,122,255,.14) 78%, rgba(179,122,255,0) 100%);
}
#nr-root .ambient .b2 {
  width: 960px; height: 960px; bottom: -400px; right: -280px; opacity: .18;
  background: radial-gradient(closest-side, rgba(179,122,255,1) 0%, rgba(179,122,255,.82) 26%, rgba(179,122,255,.45) 52%, rgba(179,122,255,.14) 78%, rgba(179,122,255,0) 100%);
}
#nr-root .ambient .b3 {
  width: 760px; height: 760px; top: calc(40% - 180px); left: 50%; opacity: .10; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(158,231,199,1) 0%, rgba(158,231,199,.8) 22%, rgba(158,231,199,.4) 50%, rgba(158,231,199,.12) 78%, rgba(158,231,199,0) 100%);
}
#nr-root main, #nr-root .foot { position: relative; z-index: 1; }

/* Aurora drift — barely-there breathing, not the playful 404 easter-egg
   drift. GPU-only: transform on an absolutely-positioned layer, no repaint
   of page content. Fine-pointer devices only: on phones and tablets the
   layer stays static — an always-running animation keeps the compositor
   awake for the whole visit (battery, and on iOS it competes with scroll),
   and nobody hovers a phone long enough to notice a 42s drift. */
@media (hover: hover) and (pointer: fine) {
  #nr-root .ambient .blob {
    animation: nr-drift-a 42s ease-in-out infinite alternate;
    will-change: transform;
  }
  #nr-root .ambient .b2 { animation-name: nr-drift-b; animation-duration: 52s; animation-delay: -14s; }
  #nr-root .ambient .b3 { animation-name: nr-drift-c; animation-duration: 60s; animation-delay: -6s; }
}
@keyframes nr-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9px, -7px, 0) scale(1.03); }
}
@keyframes nr-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-8px, 6px, 0) scale(1.03); }
}
/* b3 keeps its existing static translateX(-50%) centering — baked directly
   into both keyframe values so it never re-centers mid-animation. */
@keyframes nr-drift-c {
  from { transform: translate3d(-50%, 0, 0) scale(1); }
  to   { transform: translate3d(calc(-50% + 8px), -6px, 0) scale(1.03); }
}
/* Defensive guard: .ambient/.blob markup is duplicated (not included) on
   404.html, models_index.html, gallery_index.html, pricing_index.html,
   assistants_index.html and _dynamic_base.html. The 404 page already has its
   own .nf .blob.b1/.b2 drift (higher-specificity, unaffected by this rule),
   but .b3 has no 404-specific rule and would otherwise inherit this drift
   there too — explicitly no-op all three blobs inside .nf. */
#nr-root .nf .ambient .blob { animation: none; }

/* MD01 — one-shot fade-in for the whole ambient layer on first paint. A
   plain @keyframes on the .ambient container itself (not the .blob
   children, which already run their own infinite drift — different
   element, no conflict). `both` keeps it invisible before the animation
   starts (no FOUC) and holds the end state after. Not scroll-triggered, so
   it never re-fires scrolling back to the top. */
#nr-root .ambient { animation: nr-ambient-in 900ms var(--ease-entry) both; }
@keyframes nr-ambient-in { from { opacity: 0; } to { opacity: 1; } }

/* Hero */
#nr-root .hero { padding: 140px 0 110px; position: relative; overflow: hidden; }
#nr-root .hero-inner { position: relative; z-index: 1; text-align: center; }

/* MD01 — hero entrance choreography: title/subtitle/CTA settle in on first
   paint only, in sequence (see the .nr-hero-d* delays below), not on every
   scroll back to top — this is a plain load-triggered CSS animation, never
   toggled by JS/IntersectionObserver. Classes live directly on the markup
   in _hero.html. `both` avoids FOUC (element stays hidden until its
   delayed start) and holds the end state afterwards. */
#nr-root .nr-hero-in {
  opacity: 0;
  transform: translateY(18px);
  animation: nr-hero-in var(--nr-motion-reveal) var(--ease-entry) both;
}
#nr-root .nr-hero-d1 { animation-delay: 0ms; }
#nr-root .nr-hero-d2 { animation-delay: 70ms; }
#nr-root .nr-hero-d3 { animation-delay: 140ms; }
#nr-root .nr-hero-d4 { animation-delay: 210ms; }
@keyframes nr-hero-in { to { opacity: 1; transform: none; } }

/* Cursor-reactive constellation canvas (drawn above the ambient blobs, below hero content) */
#nr-root .nr-hero-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(70% 65% at 50% 40%, #000 45%, transparent 88%);
  mask-image: radial-gradient(70% 65% at 50% 40%, #000 45%, transparent 88%);
}
@media (prefers-reduced-motion: reduce) {
  #nr-root .nr-hero-canvas { display: none; }
}
/* Touch devices: the constellation reacts to a cursor there is none of, and
   its 60fps rAF loop + full-viewport masked canvas was the second biggest
   drain on iPhones. netroom.js skips the loop under the same media query. */
@media (hover: none) {
  #nr-root .nr-hero-canvas { display: none; }
}

#nr-root .hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
#nr-root .hero-actions-left { justify-content: flex-start; }

/* Two-column hero with studio card on the right */
#nr-root .hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
#nr-root .hero-copy { text-align: left; }
#nr-root .hero-copy .eyebrow { margin-bottom: 24px; }
#nr-root .hero-h1 { text-align: left; }
#nr-root .hero h1.t-display { text-wrap: balance; }
#nr-root .hero-lead { margin: 22px 0 0; max-width: 540px; }

/* Lock the studio card height on the hero so generating content (or the
   register CTA appearing) never grows/recenters the card. The canvas flexes
   to absorb both — content scrolls inside instead of stretching the layout.
   Scoped to .hero-grid; detail pages (.mpage-hero) keep their own sizing. */
#nr-root .hero-grid .studio { height: 600px; }
#nr-root .hero-grid .studio-body { flex: 1 1 auto; min-height: 0; }
#nr-root .hero-grid .studio-canvas { flex: 1 1 auto; min-height: 0; max-height: none; }

/* Studio card */
#nr-root .studio {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  /* overflow visible so the composer's assistant dropdown can open upward
     beyond the card; head corners are rounded explicitly to compensate. */
  overflow: visible;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
#nr-root[data-theme="light"] .studio {
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.18);
}
#nr-root .studio-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
#nr-root .studio-dots { display: inline-flex; gap: 7px; }
#nr-root .studio-dots .d {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
}
#nr-root .studio-dots .d-r { background: #ff5f56; }
#nr-root .studio-dots .d-y { background: #ffbd2e; }
#nr-root .studio-dots .d-g { background: #27c93f; }
#nr-root .studio-title {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--fg-dim);
  letter-spacing: 0.02em;
}

#nr-root .studio-body { padding: 22px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
#nr-root .studio-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-faint);
}
#nr-root .studio-label-sm { margin-top: 6px; }

#nr-root .studio-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
#nr-root .studio-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg-dim);
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
#nr-root .studio-chip:hover { color: var(--fg); border-color: var(--line-2); }
#nr-root .studio-chip.active {
  background: var(--bg-3); color: var(--fg);
  border-color: var(--line-2);
}
#nr-root .studio-chip-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-3);
  flex-shrink: 0;
}
#nr-root .studio-chip-label { display: inline-block; }
/* Chips без иконки — компенсируем asymmetric padding-left */
#nr-root .studio-chip:not(:has(.studio-chip-icon)) { padding-left: 14px; }

/* Chat canvas */
#nr-root .studio-canvas {
  position: relative;
  min-height: 320px; max-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  padding: 16px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin;
}
#nr-root .studio-canvas::-webkit-scrollbar { width: 6px; }
#nr-root .studio-canvas::-webkit-scrollbar-track { background: transparent; }
#nr-root .studio-canvas::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

#nr-root .studio-canvas-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
  pointer-events: none;
}
#nr-root .studio-canvas.has-content .studio-canvas-empty { display: none; }

/* Message bubbles */
#nr-root .studio-msg {
  display: flex; flex-direction: column;
  max-width: 80%;
  animation: nr-msg-in .25s var(--ease);
}
@keyframes nr-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#nr-root .studio-msg.user { align-self: flex-end; align-items: flex-end; max-width: 75%; }
#nr-root .studio-msg.model { align-self: flex-start; align-items: flex-start; }

#nr-root .studio-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px; line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}
#nr-root .studio-msg.user .studio-bubble {
  background: var(--grad);
  color: #1a0f08; font-weight: 500;
  border-bottom-right-radius: 6px;
  box-shadow: 0 10px 24px -14px rgba(179, 122, 255, 0.55);
}
#nr-root[data-theme="light"] .studio-msg.user .studio-bubble { color: #1a0f08; }

#nr-root .studio-msg.model .studio-bubble {
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}
#nr-root .studio-msg.model.is-error .studio-bubble {
  color: var(--a2);
  border-color: rgba(255, 122, 89, 0.35);
  background: rgba(255, 122, 89, 0.08);
}

/* Rendered Markdown inside a model bubble */
#nr-root .studio-bubble.studio-md { white-space: normal; }
#nr-root .studio-md > :first-child { margin-top: 0; }
#nr-root .studio-md > :last-child { margin-bottom: 0; }
#nr-root .studio-md p { margin: 0 0 8px; }
#nr-root .studio-md h1,
#nr-root .studio-md h2,
#nr-root .studio-md h3,
#nr-root .studio-md h4,
#nr-root .studio-md h5,
#nr-root .studio-md h6 { margin: 14px 0 6px; font-weight: 600; line-height: 1.3; }
#nr-root .studio-md h1 { font-size: 18px; }
#nr-root .studio-md h2 { font-size: 16px; }
#nr-root .studio-md h3 { font-size: 15px; }
#nr-root .studio-md h4,
#nr-root .studio-md h5,
#nr-root .studio-md h6 { font-size: 14px; }
#nr-root .studio-md ul,
#nr-root .studio-md ol { margin: 6px 0 8px; padding-left: 20px; }
#nr-root .studio-md li { margin: 2px 0; }
#nr-root .studio-md strong { font-weight: 600; }
#nr-root .studio-md em { font-style: italic; }
#nr-root .studio-md a { color: var(--a3); text-decoration: underline; }
#nr-root .studio-md code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}
#nr-root .studio-md-pre {
  margin: 8px 0; padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-x: auto;
}
#nr-root .studio-md-pre code {
  background: none; border: none; padding: 0;
  font-size: 12.5px; line-height: 1.5; white-space: pre;
}
#nr-root .studio-md hr { border: none; border-top: 1px solid var(--line); margin: 12px 0; }
#nr-root .studio-md blockquote {
  margin: 8px 0; padding: 4px 12px;
  border-left: 3px solid var(--line-2);
  color: var(--fg-dim);
}

/* Composer layout (detail pages): input on top, controls row below */
#nr-root .studio-bar.studio-bar-col { flex-direction: column; align-items: stretch; gap: 10px; }
#nr-root .studio-bar-row { display: flex; align-items: center; gap: 8px; }
#nr-root .studio-bar-spacer { flex: 1 1 auto; }

/* Assistant selector pill + upward dropdown (mirrors the app composer picker) */
#nr-root .studio-cap { position: relative; display: inline-flex; }
#nr-root .studio-cap-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px 0 6px;
  border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--fg);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; max-width: 240px;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
#nr-root .studio-cap-trigger:hover { background: var(--bg-3); border-color: var(--line-2); }
#nr-root .studio-cap-ico {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
#nr-root .studio-cap-ico img { width: 100%; height: 100%; object-fit: cover; }
#nr-root .studio-cap-ico-letters { color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
#nr-root .studio-cap-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nr-root .studio-cap-chev { color: var(--fg-faint); flex-shrink: 0; }

#nr-root .studio-cap-pop {
  display: none;
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 40;
  width: 320px; max-width: 92vw; max-height: 56vh;
  flex-direction: column;
  background: var(--bg-1); border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: studio-cap-in .14s var(--ease);
}
#nr-root .studio-cap[data-open="true"] .studio-cap-pop { display: flex; }
@keyframes studio-cap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#nr-root .studio-cap-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--fg-faint);
}
#nr-root .studio-cap-search input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  font: inherit; font-size: 13px; color: var(--fg);
}
#nr-root .studio-cap-search input::placeholder { color: var(--fg-faint); }
#nr-root .studio-cap-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
#nr-root .studio-cap-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 10px; background: transparent; border: 0;
  color: var(--fg); cursor: pointer; text-align: left;
  transition: background .12s var(--ease);
}
#nr-root .studio-cap-row:hover { background: var(--bg-2); }
#nr-root .studio-cap-row.is-active { background: var(--bg-3); }
#nr-root .studio-cap-row-ico {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
#nr-root .studio-cap-row-ico img { width: 100%; height: 100%; object-fit: cover; }
#nr-root .studio-cap-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#nr-root .studio-cap-row-name { font-size: 13.5px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nr-root .studio-cap-row-desc { font-size: 12px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nr-root .studio-cap-check { display: inline-flex; align-items: center; color: var(--a1); flex-shrink: 0; }
#nr-root .studio-cap-check[hidden] { display: none; }
@media (max-width: 640px) { #nr-root .studio-cap-pop { width: 280px; } }

/* Typing indicator inside model bubble */
#nr-root .studio-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
#nr-root .studio-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-faint);
  animation: nr-typing 1s var(--ease) infinite;
}
#nr-root .studio-typing i:nth-child(2) { animation-delay: .15s; }
#nr-root .studio-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes nr-typing {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* Image inside model bubble */
#nr-root .studio-msg-image {
  display: block;
  width: 100%; max-width: 360px;
  height: auto; max-height: 360px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  cursor: zoom-in;
}
#nr-root .studio-msg-actions {
  display: flex; gap: 6px; margin-top: 6px;
}
#nr-root .studio-dl {
  gap: 6px; padding: 6px 12px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg-dim);
  display: inline-flex; align-items: center; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
#nr-root .studio-dl:hover { color: var(--fg); border-color: var(--line-2); background: var(--bg-3); }
#nr-root .studio-dl[disabled] { opacity: .65; cursor: progress; }
#nr-root .studio-dl.is-loading svg { opacity: .5; }

/* Bottom input bar — single horizontal row */
#nr-root .studio-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
#nr-root .studio-bar:focus-within {
  border-color: var(--line-2);
  background: var(--bg-3);
}

#nr-root .studio-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.4;
  padding: 8px 0;
}
#nr-root .studio-input::placeholder { color: var(--fg-mute); }

#nr-root .studio-bar-quota {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--fg-faint);
  display: inline-flex; align-items: baseline; gap: 1px;
  white-space: nowrap;
  padding: 0 4px;
}
#nr-root .studio-bar-quota-sep { color: var(--fg-mute); padding: 0 1px; }
#nr-root .studio-bar-quota-total { color: var(--fg-mute); }
#nr-root .studio-bar-quota.is-zero { color: var(--a2); }
#nr-root .studio-bar-quota.is-zero .studio-bar-quota-total,
#nr-root .studio-bar-quota.is-zero .studio-bar-quota-sep { color: var(--a2); }

/* Send button — round purple */
#nr-root .studio-send {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad);
  color: #1a0f08;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(179, 122, 255, 0.55);
  transition: transform .15s var(--ease), opacity .15s var(--ease), box-shadow .2s var(--ease);
  flex-shrink: 0;
}
#nr-root .studio-send:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -14px rgba(179, 122, 255, 0.7); }
#nr-root .studio-send:active { transform: translateY(0); }
#nr-root .studio-send[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
#nr-root .studio-send-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.28); border-top-color: rgba(0,0,0,.78);
  display: none; animation: nr-spin .8s linear infinite;
}
#nr-root .studio-send.is-loading .studio-send-arrow { display: none; }
#nr-root .studio-send.is-loading .studio-send-spinner { display: inline-block; }
@keyframes nr-spin { to { transform: rotate(360deg); } }

/* Quota-exhausted CTA */
#nr-root .studio-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  flex-wrap: wrap;
}
#nr-root .studio-cta-hint { font-size: 13px; color: var(--fg-dim); }
#nr-root .studio-cta[hidden] { display: none; }

/* Stats */
#nr-root .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
#nr-root .stat-tile {
  padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
}
/* Corner glow as a radial gradient (was a blurred disc: a filter inside a
   card that transitions transform/opacity gets re-rendered every frame of
   that transition — on iOS that was a visible hitch on every scroll-reveal). */
#nr-root .stat-tile::before {
  content: ""; position: absolute; inset: auto -50% -70% auto;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--g1) 0%, var(--g2) 30%, rgba(111,63,216,.5) 58%, rgba(111,63,216,0) 100%);
  opacity: .08; pointer-events: none;
}
#nr-root .stat-num { font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -0.03em; }
#nr-root .stat-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-dim); margin-top: 8px;
}
#nr-root .stat-sub { font-size: 13px; color: var(--fg-faint); }

/* Cards */
#nr-root .card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  /* opacity added for MD02 scroll-reveal (.nr-reveal-item, further down)
     — kept in THIS rule rather than a separate one on that class, because
     .nr-reveal-item also matches .stat-tile/.feat-card (both carry .card)
     and a second `transition:` declaration of equal specificity would
     replace this whole list rather than merge with it, silently killing
     the hover transition below once a card is marked revealed. */
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease), opacity var(--nr-motion-reveal) var(--ease-entry);
}
#nr-root .card:hover { border-color: var(--line-2); }

/* Feature tiles */
#nr-root .feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
#nr-root .feat-card { overflow: hidden; display: flex; flex-direction: column; color: inherit; }
@media (hover: hover) { #nr-root .feat-card:hover .feat-art { transform: scale(1.03); } }
#nr-root .feat-art {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  transition: transform .5s var(--ease);
  background: linear-gradient(135deg, var(--a1), #6f3fd8);
}
#nr-root .feat-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
#nr-root .feat-tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff;
  padding: 5px 9px; background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 6px; border: 1px solid rgba(255,255,255,0.12);
}
#nr-root .feat-body { padding: 20px 22px 24px; }
#nr-root .feat-body .t-h3 { margin-bottom: 4px; }

/* Long-form copy cards — standalone /models, /pricing, /gallery pages.
   Replaces a bare h2+p stack that left large empty voids on these pages. */
#nr-root .copy-section { padding: 56px 0 104px; }
#nr-root .copy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
#nr-root .copy-card {
  padding: 34px 34px 36px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
#nr-root .copy-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
#nr-root .copy-card:hover { transform: translateY(-2px); }
#nr-root .copy-card:hover::before { transform: scaleX(1); }
#nr-root .copy-ix {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; margin-bottom: 22px;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
#nr-root .copy-card-h {
  font-weight: 500; font-size: 22px; line-height: 1.22; letter-spacing: -0.015em;
  margin: 0 0 12px;
}
#nr-root .copy-card-b {
  font-size: 15.5px; line-height: 1.62; color: var(--fg-dim); margin: 0;
}

/* Models catalog */
#nr-root .filter-row { display: flex; justify-content: center; gap: 6px; margin: -24px 0 40px; flex-wrap: wrap; }
#nr-root .filter-chip {
  padding: 8px 16px; border-radius: 999px; font-size: 13px;
  color: var(--fg-dim); border: 1px solid var(--line);
  background: transparent; transition: all .2s var(--ease);
}
#nr-root .filter-chip:hover { color: var(--fg); border-color: var(--line-2); }
#nr-root .filter-chip.active { color: var(--bg); background: var(--fg); border-color: var(--fg); }
#nr-root .models-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* Unified large-card hover language — model catalog + pricing cards share
   this lift+glow treatment; .gallery-tile opts into the transform only (see
   the gallery section) since a bordered-card glow doesn't suit full-bleed
   media. .cap-tile / .nr-asst-card are deliberately NOT part of this list —
   both already have complete, calibrated hover+focus-visible treatments in
   their own stylesheets. */
#nr-root .model-card,
#nr-root .nr-pkg,
#nr-root .nr-sub {
  /* opacity added for MD02 scroll-reveal (.nr-reveal-item below) — see the
     note on .card above; kept here rather than on .nr-reveal-item itself so
     this rule stays the single source of truth for these three selectors'
     transition list (equal-specificity + later-in-file would otherwise let
     .nr-reveal-item silently drop border-color/background/box-shadow/color
     from the transition once a card is marked revealed). */
  transition: transform var(--nr-motion-base) var(--ease),
              border-color var(--nr-motion-base) var(--ease),
              background var(--nr-motion-base) var(--ease),
              box-shadow var(--nr-motion-base) var(--ease),
              background-color var(--nr-motion-slow) var(--ease),
              color var(--nr-motion-slow) var(--ease),
              opacity var(--nr-motion-reveal) var(--ease-entry);
}
#nr-root .model-card:focus-visible,
#nr-root .nr-pkg:focus-within,
#nr-root .nr-sub:focus-within {
  transform: translateY(-4px);
  border-color: rgba(179, 122, 255, .4);
  box-shadow: 0 20px 40px -22px var(--nr-glow);
}
/* Hover lift only where a hover exists: on touch the :hover state sticks to
   the last tapped card until the next tap, which reads as a broken layout. */
@media (hover: hover) {
  #nr-root .model-card:hover,
  #nr-root .nr-pkg:hover,
  #nr-root .nr-sub:hover {
    transform: translateY(-4px);
    border-color: rgba(179, 122, 255, .4);
    box-shadow: 0 20px 40px -22px var(--nr-glow);
  }
}
#nr-root .model-card {
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  position: relative; color: inherit; cursor: pointer;
}
#nr-root .model-card:focus-visible { background: var(--bg-2); }
#nr-root .model-card:focus-visible .mc-arrow { opacity: 1; transform: translate(0, 0); color: var(--fg); }
@media (hover: hover) {
  #nr-root .model-card:hover { background: var(--bg-2); }
  #nr-root .model-card:hover .mc-arrow { opacity: 1; transform: translate(0, 0); color: var(--fg); }
}
#nr-root .mc-arrow {
  position: absolute; bottom: 18px; right: 18px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(var(--scrim-rgb), 0.05);
  border: 1px solid var(--line); color: var(--fg-dim);
  opacity: 0; transform: translate(-2px, -2px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), color .25s;
}
#nr-root .mc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#nr-root .mc-cat {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-faint);
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px;
}
#nr-root .mc-name { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
#nr-root .mc-desc { font-size: 13px; color: var(--fg-dim); line-height: 1.45; flex: 1; text-wrap: pretty; }
#nr-root .mc-price {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg);
  padding-top: 10px; padding-right: 38px; border-top: 1px solid var(--line);
}
#nr-root .mc-div { color: var(--fg-mute); }
#nr-root .mc-mtok { color: var(--fg-faint); margin-left: 2px; }
#nr-root .mc-free { color: #6ce3a4; font-weight: 600; }

#nr-root .model-icon {
  width: 32px; height: 32px; border-radius: 8px; object-fit: cover;
  background: rgba(var(--scrim-rgb), 0.06);
  border: 1px solid var(--line);
}
#nr-root .model-icon-fb {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  background: var(--grad); color: #1a0f08;
}

/* Price calculator */
#nr-root .calc { padding: 36px; margin-bottom: 48px; position: relative; overflow: hidden; }
#nr-root .calc::before {
  content: ""; position: absolute; inset: auto -35% -55% auto;
  width: 580px; height: 580px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--g1) 0%, var(--g2) 30%, rgba(111,63,216,.5) 58%, rgba(111,63,216,0) 100%);
  opacity: .06; pointer-events: none;
}
#nr-root .calc-head { margin-bottom: 28px; }
#nr-root .calc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; position: relative; }
#nr-root .calc-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-dim);
  display: block; margin-bottom: 14px;
}
#nr-root .model-pills { display: flex; flex-direction: column; gap: 16px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
#nr-root .mp-group .mp-cat {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px;
}
#nr-root .mp-row { display: flex; flex-wrap: wrap; gap: 6px; }
#nr-root .mp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(var(--scrim-rgb), 0.02);
  font-size: 12.5px; color: var(--fg-dim);
  transition: all .2s var(--ease);
}
#nr-root .mp-chip:hover { color: var(--fg); border-color: var(--line-2); }
#nr-root .mp-chip.active {
  background: rgba(var(--scrim-rgb), 0.08); color: var(--fg);
  border-color: rgba(var(--scrim-rgb), 0.24);
}
#nr-root .mp-chip img, #nr-root .mp-chip .prov-mono {
  width: 22px; height: 22px; border-radius: 6px; object-fit: cover;
  background: rgba(var(--scrim-rgb), 0.06);
}
#nr-root .mp-chip .prov-mono {
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  background: var(--grad); color: #1a0f08;
}

#nr-root .slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--fg) 0%, var(--fg) var(--pct, 50%), rgba(var(--scrim-rgb), 0.08) var(--pct, 50%), rgba(var(--scrim-rgb), 0.08) 100%);
  outline: none; margin: 8px 0 16px;
}
#nr-root .slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; cursor: pointer; border: 3px solid var(--bg-1);
  box-shadow: 0 0 0 1px rgba(var(--scrim-rgb), 0.2);
}
#nr-root .slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; cursor: pointer; border: 3px solid var(--bg-1);
}
#nr-root .calc-volume { display: flex; justify-content: space-between; margin-bottom: 28px; gap: 10px; flex-wrap: wrap; }
#nr-root .calc-detail {
  margin: -18px 0 28px;
  font-size: 13px; line-height: 1.5; color: var(--fg-dim);
}
#nr-root .calc-detail[hidden] { display: none; }
#nr-root .calc-cost {
  padding: 22px; background: rgba(var(--scrim-rgb), 0.03);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
#nr-root .calc-cost-sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint);
}
#nr-root .calc-cost-big {
  font-size: 56px; font-weight: 500;
  line-height: 1; letter-spacing: -0.04em; margin: 10px 0 18px;
}
#nr-root .calc-presets { display: flex; gap: 6px; flex-wrap: wrap; }

/* MD05 — calculator value pulse. netroom.js toggles .is-pulse (with a forced
   reflow to restart it) on the cost figure + volume label whenever the
   computed price actually changes. transform/opacity only. */
#nr-root .is-pulse { animation: nr-pulse var(--nr-motion-base) var(--ease); }
@keyframes nr-pulse {
  0%   { transform: scale(1);     opacity: 1; }
  40%  { transform: scale(1.04);  opacity: .82; }
  100% { transform: scale(1);     opacity: 1; }
}

/* Steps */
#nr-root .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
#nr-root .step {
  padding: 24px; background: rgba(var(--scrim-rgb), 0.02);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
#nr-root .step-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--fg-faint); margin-bottom: 20px; }
#nr-root .step-t { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; }
#nr-root .step-s { color: var(--fg-dim); font-size: 14px; }

/* ════════════════════════════════════════════════════════════════════════
   Plans / subscriptions (combined pricing section)
   ════════════════════════════════════════════════════════════════════════ */
#nr-root .nr-plans .section-head { margin-bottom: 28px; }

/* ── Mode segment (pay-as-you-go / subscription) ── */
#nr-root .nr-plans-seg {
  display: inline-flex; gap: 4px; padding: 4px;
  margin: 0 auto 36px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2);
}
#nr-root .nr-plans-seg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--fg-dim); cursor: pointer; white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
#nr-root .nr-plans-seg-btn:hover { color: var(--fg); }
#nr-root .nr-plans-seg-btn.is-active {
  color: #1a0f08; background: var(--grad); font-weight: 600;
  box-shadow: 0 8px 24px -10px rgba(179, 122, 255, 0.5);
}

/* ── Panes ── */
#nr-root .nr-plans-pane { margin: 0; }
#nr-root .nr-plans-pane[hidden] { display: none; }

/* ── Billing-period toggle (month / year) ── */
#nr-root .nr-plans-bill {
  display: inline-flex; gap: 4px; padding: 4px;
  margin: 0 auto 28px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2);
}
#nr-root .nr-plans-pane[data-nr-plans-pane="sub"] { text-align: center; }
#nr-root .nr-plans-bill-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 40px; padding: 8px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--fg-dim); cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
#nr-root .nr-plans-bill-btn:hover { color: var(--fg); }
#nr-root .nr-plans-bill-btn.is-active { color: var(--fg); background: var(--bg-1); border: 1px solid var(--line-2); }
#nr-root .nr-plans-bill-save {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--a2); padding: 2px 6px; border-radius: 6px;
  background: rgba(255, 122, 89, 0.12); border: 1px solid rgba(255, 122, 89, 0.28);
}

/* ── Plan grid + cards ── */
#nr-root .nr-plans-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  text-align: left; align-items: stretch;
}
#nr-root .nr-plan {
  position: relative; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
#nr-root .nr-plan.is-featured {
  border: 2px solid #7c3aed;
}
#nr-root .nr-plan.is-featured::before {
  content: none;
}
#nr-root .nr-plan > * { position: relative; }
#nr-root .nr-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600;
  color: #fff; padding: 6px 12px; border-radius: 999px;
  background: #7c3aed;
  box-shadow: 0 6px 16px -8px rgba(124, 58, 237, 0.6);
}

#nr-root .nr-plan-head { display: flex; align-items: center; gap: 12px; }
#nr-root .nr-plan-logo {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--line);
}
#nr-root .nr-plan-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#nr-root .nr-plan-logo--mono {
  background: var(--grad); border: none; color: #1a0f08;
  font-weight: 700; font-size: 20px;
}
#nr-root .nr-plan-titles { min-width: 0; }
#nr-root .nr-plan-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
#nr-root .nr-plan-sub { font-size: 13px; color: var(--fg-dim); margin-top: 2px; }

#nr-root .nr-plan-price { margin-top: 2px; }
#nr-root .nr-plan-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
#nr-root .nr-plan-price-big { font-size: clamp(30px, 3vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
#nr-root .nr-plan-price-per { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); }
#nr-root .nr-plan-price-note { margin-top: 6px; font-size: 12.5px; color: var(--fg-faint); }

#nr-root .nr-plan-tokens {
  display: flex; align-items: baseline; gap: 6px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(var(--scrim-rgb), 0.03); border: 1px solid var(--line);
}
#nr-root .nr-plan-tokens-num { font-weight: 600; font-size: 15px; }
#nr-root .nr-plan-tokens-lbl { font-size: 12.5px; color: var(--fg-dim); }

#nr-root .nr-plan-est-t {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-faint); margin-bottom: 8px;
}
#nr-root .nr-plan-est-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
#nr-root .nr-plan-est-list li { font-size: 13.5px; color: var(--fg-dim); }
#nr-root .nr-plan-est-free { font-size: 13.5px; color: var(--fg-dim); line-height: 1.5; }

#nr-root .nr-plan-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
#nr-root .nr-plan-perks li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--fg-dim); line-height: 1.5; }
#nr-root .nr-plan-perk-ic { flex-shrink: 0; margin-top: 2px; color: var(--g1); }

#nr-root .nr-plan-offers { display: flex; flex-wrap: wrap; gap: 6px; }
#nr-root .nr-plan-offer {
  font-size: 11.5px; color: var(--a2); font-weight: 500;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 122, 89, 0.10); border: 1px solid rgba(255, 122, 89, 0.24);
}

#nr-root .nr-plan-cta { margin-top: auto; width: 100%; justify-content: center; min-height: 44px; }

/* ── Token packages (primary product) ── */
#nr-root .nr-pkg-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  text-align: left; align-items: stretch;
}
#nr-root .nr-pkg {
  position: relative; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
#nr-root .nr-pkg.is-featured { border: 2px solid #7c3aed; }
#nr-root .nr-pkg > * { position: relative; }
#nr-root .nr-pkg-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
#nr-root .nr-pkg-price { margin-top: 2px; }
#nr-root .nr-pkg-price-big {
  font-size: clamp(30px, 3vw, 40px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1;
}
#nr-root .nr-pkg-tokens {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(var(--scrim-rgb), 0.03); border: 1px solid var(--line);
}
#nr-root .nr-pkg-tokens-num { font-weight: 600; font-size: 16px; }
#nr-root .nr-pkg-tokens-lbl { font-size: 12.5px; color: var(--fg-dim); }
#nr-root .nr-pkg-bonus {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; color: #fff; padding: 3px 8px; border-radius: 999px;
  background: #7c3aed; white-space: nowrap;
}
#nr-root .nr-pkg-save {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--a2, #ff7a59);
  text-transform: lowercase;
}
#nr-root .nr-pkg-est { margin-top: 2px; }

/* ── Budget subscription (secondary) ── */
#nr-root .nr-sub-lead {
  text-align: center; margin: 44px auto 16px; max-width: 560px;
  font-size: 14px; color: var(--fg-dim);
}
#nr-root .nr-sub {
  max-width: 640px; margin: 0 auto; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 16px; text-align: left;
}
#nr-root .nr-sub-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
#nr-root .nr-sub-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
#nr-root .nr-sub-sub { font-size: 13px; color: var(--fg-dim); margin-top: 2px; }
#nr-root .nr-sub-price { display: flex; align-items: baseline; gap: 5px; }
#nr-root .nr-sub-price-big { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
#nr-root .nr-sub-price-per { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); }
#nr-root .nr-sub-included { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
#nr-root .nr-sub-included li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--fg-dim); line-height: 1.5; }
#nr-root .nr-sub-cta { width: 100%; justify-content: center; min-height: 44px; }

/* ── Comparison table ── */
#nr-root .nr-plans-compare { margin-top: 56px; text-align: left; }
#nr-root .nr-plans-compare-h { margin-bottom: 18px; }
#nr-root .nr-plans-compare-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-1);
}
#nr-root .nr-plans-compare-scroll:focus-visible { outline: 2px solid var(--g1); outline-offset: 2px; }
#nr-root .nr-plans-compare-table {
  width: 100%; border-collapse: collapse; min-width: 560px;
}
#nr-root .nr-plans-compare-table th,
#nr-root .nr-plans-compare-table td {
  padding: 14px 16px; text-align: center; font-size: 14px;
  border-bottom: 1px solid var(--line);
}
#nr-root .nr-plans-compare-table thead th { color: var(--fg); font-weight: 600; }
#nr-root .nr-plans-compare-table tbody tr:last-child th,
#nr-root .nr-plans-compare-table tbody tr:last-child td { border-bottom: none; }
#nr-root .nr-plans-compare-feat { text-align: left !important; color: var(--fg-dim); font-weight: 500; }
#nr-root .nr-plans-yes { color: var(--g1); vertical-align: middle; }
#nr-root .nr-plans-no { color: var(--fg-mute); }

/* ── Reassurances ── */
#nr-root .nr-plans-reassure {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left;
}
#nr-root .nr-plans-reassure-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: rgba(var(--scrim-rgb), 0.02);
  font-size: 14px; color: var(--fg-dim); line-height: 1.5;
}
#nr-root .nr-plans-reassure-ic { flex-shrink: 0; margin-top: 1px; color: var(--g1); }

/* ── Empty state ── */
#nr-root .nr-plans-empty {
  padding: 48px 24px; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--r-xl);
  background: rgba(var(--scrim-rgb), 0.02);
}
#nr-root .nr-plans-empty .t-lead { max-width: 560px; margin: 0 auto; }

/* ── Focus visibility (a11y) ── */
#nr-root .nr-plans-seg-btn:focus-visible,
#nr-root .nr-plans-bill-btn:focus-visible,
#nr-root .nr-plan-cta:focus-visible {
  outline: 2px solid var(--g1); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #nr-root .nr-plans-seg-btn,
  #nr-root .nr-plans-bill-btn,
  #nr-root .nr-plan-cta { transition: none; }
}

/* Gallery */
#nr-root .gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px; gap: 12px; grid-auto-flow: dense;
}
#nr-root .gallery-tile {
  position: relative; border-radius: var(--r-md);
  overflow: hidden; background: #111; cursor: pointer;
  min-width: 0; min-height: 0;
  /* Container lift — its own, independent, slower motion layer on top of the
     existing 500ms img/video scale(1.04) below; no border/glow here, a
     bordered-card treatment doesn't suit full-bleed media. opacity added
     for MD02 scroll-reveal — see the note on .card above for why it lives
     in this rule rather than on .nr-reveal-item itself. */
  transition: transform var(--nr-motion-base) var(--ease),
              background-color var(--nr-motion-slow) var(--ease),
              opacity var(--nr-motion-reveal) var(--ease-entry);
}
#nr-root .gallery-tile:focus-visible { transform: translateY(-4px); }
@media (hover: hover) { #nr-root .gallery-tile:hover { transform: translateY(-4px); } }
#nr-root .gallery-tile.span-1x1 { grid-column: span 1; grid-row: span 1; }
#nr-root .gallery-tile.span-1x2 { grid-column: span 1; grid-row: span 2; }
#nr-root .gallery-tile.span-2x1 { grid-column: span 2; grid-row: span 1; }
#nr-root .gallery-tile.span-2x2 { grid-column: span 2; grid-row: span 2; }
#nr-root .gallery-tile img,
#nr-root .gallery-tile video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
#nr-root .gallery-tile:focus-visible img, #nr-root .gallery-tile:focus-visible video { transform: scale(1.04); }
@media (hover: hover) {
  #nr-root .gallery-tile:hover img, #nr-root .gallery-tile:hover video { transform: scale(1.04); }
}

/* Always-visible model badge in the corner */
#nr-root .gallery-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  padding: 5px 9px; border-radius: 6px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  max-width: calc(100% - 20px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}

/* Teaser prompt at bottom — clamped so it never overflows the tile */
#nr-root .gallery-overlay {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
  padding: 28px 14px 14px; color: #fff;
  opacity: 0; transition: opacity .3s var(--ease);
  pointer-events: none;
}
@media (hover: hover) { #nr-root .gallery-tile:hover .gallery-overlay { opacity: 1; } }
#nr-root .gallery-prompt {
  font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.92);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}

/* Gallery modal */
#nr-root .gallery-modal[hidden] { display: none; }
#nr-root .gallery-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#nr-root .gallery-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  /* MD06 — fades in/out with .gallery-modal.is-open, toggled by
     openGallery()/closeGallery() in netroom.js. The JS defers `hidden` and
     the video-clearing innerHTML reset by CLOSE_MS (kept in sync with this
     duration) so the fade-out actually gets to play before teardown. */
  opacity: 0;
  transition: opacity var(--nr-motion-slow) var(--ease);
}
#nr-root .gallery-modal-card {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
  gap: 0;
  width: min(1100px, 100%); max-height: 90vh;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px); overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
  /* MD06 — same open/close fade as the backdrop, plus a slight scale+rise
     so the media card settles in rather than just appearing. */
  opacity: 0;
  transform: scale(.96) translateY(12px);
  transition: opacity var(--nr-motion-slow) var(--ease),
              transform var(--nr-motion-slow) var(--ease-entry),
              background-color var(--nr-motion-slow) var(--ease),
              border-color var(--nr-motion-slow) var(--ease);
}
#nr-root .gallery-modal.is-open .gallery-modal-backdrop { opacity: 1; }
#nr-root .gallery-modal.is-open .gallery-modal-card { opacity: 1; transform: none; }
#nr-root .gallery-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(0,0,0,0.55); color: #fff; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s var(--ease);
}
#nr-root .gallery-modal-close:hover { background: rgba(0,0,0,0.8); }
#nr-root .gallery-modal-media {
  background: #000;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px; max-height: 90vh;
}
#nr-root .gallery-modal-media img,
#nr-root .gallery-modal-media video {
  width: 100%; height: 100%; max-height: 90vh;
  object-fit: contain; display: block;
}
#nr-root .gallery-modal-meta {
  padding: 28px; display: flex; flex-direction: column;
  gap: 6px; overflow-y: auto;
}
#nr-root .gallery-modal-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint);
  margin-bottom: 6px;
}
#nr-root .gallery-modal-model {
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--fg);
}
#nr-root .gallery-modal-prompt {
  font-size: 14px; line-height: 1.55; color: var(--fg-dim);
  white-space: pre-wrap; word-break: break-word;
  max-height: 50vh; overflow-y: auto;
  padding: 12px 14px; background: var(--bg-0);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
#nr-root .gallery-modal-copy {
  margin-top: 16px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
}
#nr-root .gallery-modal-copy.is-copied { opacity: .8; }

/* Final CTA */
#nr-root .final-box {
  text-align: center; padding: 96px 48px;
  border: 1px solid var(--line); border-radius: var(--r-2xl);
  background:
    radial-gradient(circle at 50% 0%, rgba(179,122,255,0.14), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(255,122,89,0.10), transparent 60%),
    var(--bg-1);
  position: relative; overflow: hidden;
}

/* Footer */
#nr-root .foot {
  padding: 72px 0 48px; border-top: 1px solid var(--line);
  color: var(--fg-faint); font-size: 13px;
  transition: border-color var(--nr-motion-slow) var(--ease),
              background-color var(--nr-motion-slow) var(--ease),
              color var(--nr-motion-slow) var(--ease);
}
#nr-root .foot-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px; }
#nr-root .foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
#nr-root .foot-col h5 { color: var(--fg); font-size: 13px; font-weight: 500; margin: 0 0 14px; }
#nr-root .foot-col a { display: block; color: var(--fg-faint); margin-bottom: 8px; transition: color .2s; }
#nr-root .foot-col a:hover { color: var(--fg); }

/* MD02 — scroll-reveal. netroom.js adds .nr-reveal to each homepage section
   (stats/features/models/pricing/capabilities/gallery/final-cta) the first
   time it enters the viewport, and .nr-reveal-item to the cards inside it
   with a staggered inline `transition-delay` (see the IntersectionObserver
   block there for the class list). Both classes are added ONLY at runtime —
   never present in the server-rendered HTML — so if JS never runs, nothing
   here is ever stuck at opacity:0; content renders visible by default. */
#nr-root .nr-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--nr-motion-reveal) var(--ease-entry),
              transform var(--nr-motion-reveal) var(--ease-entry);
}
#nr-root .nr-reveal.is-in { opacity: 1; transform: none; }
#nr-root .nr-reveal-item {
  opacity: 0;
  transform: translateY(14px);
  /* No `transition:` here on purpose. .nr-reveal-item is added (permanently)
     to every card family in the STAGGER_SEL list — model-card/nr-pkg/nr-sub/
     gallery-tile/stat-tile/feat-card already own a `transition:` shorthand
     for their own hover state (via .card or their own rule, both extended
     above with `opacity var(--nr-motion-reveal) ...` for this exact reason).
     `transition` is a shorthand, so a second same-specificity rule here
     wouldn't merge with theirs — it would silently replace it, e.g.
     dropping .model-card's border-color/box-shadow hover transition once a
     card is marked revealed. .cap-tile is the one STAGGER_SEL member with
     no shared owner here (its transition lives in capabilities.css, out of
     this file's scope) — it gets its own narrow opacity-only rule below. */
}
#nr-root .cap-tile.nr-reveal-item {
  /* Higher specificity than capabilities.css's own `#nr-root .cap-tile`
     (id+2 classes vs id+1), so this replaces its transition-property list
     rather than adding to it — transform/border-color/box-shadow are
     duplicated from capabilities.css's .cap-tile rule verbatim (read-only
     reference, that file is out of this task's scope) purely so they don't
     get dropped; only `opacity` is actually new here. */
  transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease),
              opacity var(--nr-motion-reveal) var(--ease-entry);
}
#nr-root .nr-reveal-item.is-in { opacity: 1; transform: none; }
/* Touch devices keep only the per-card stagger. Fading/translating a WHOLE
   section promotes it to one compositing layer for the duration — for the
   catalog that is a screen-wide, several-thousand-pixel-tall texture, which
   on an iPhone is exactly the moment the scroll hitched. */
@media (hover: none) {
  #nr-root .nr-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Reduced motion — 2026-07 motion pass (MD01 hero entrance, MD02 scroll-
   reveal, MD03 aurora, MD04 hover, MD05 calc pulse, MD06 gallery lightbox,
   MD07 nav scroll shadow, MD08 theme-token transitions) ──
   Every rule here resolves to the FINAL visual state, same pattern as the
   existing .nf-in override below: nothing stays hidden or mid-animation,
   only the animation/transition itself is removed. Color/border/box-shadow
   changes on hover are intentionally left in (they are not motion, they
   still communicate state) — only transform/transition are neutralized. */
@media (prefers-reduced-motion: reduce) {
  #nr-root .ambient .blob,
  #nr-root .ambient,
  #nr-root .nr-hero-in {
    animation: none;
  }
  #nr-root .ambient,
  #nr-root .nr-hero-in {
    opacity: 1;
    transform: none;
  }

  #nr-root,
  #nr-root .nav,
  #nr-root .card,
  #nr-root .model-card,
  #nr-root .gallery-tile,
  #nr-root .nr-pkg,
  #nr-root .nr-sub,
  #nr-root .foot,
  #nr-root .lang-menu,
  #nr-root .gallery-modal-backdrop,
  #nr-root .gallery-modal-card,
  #nr-root .btn,
  #nr-root .nav-link,
  #nr-root [data-nr-theme-icon] {
    transition: none;
  }

  #nr-root .model-card:hover, #nr-root .model-card:focus-visible,
  #nr-root .gallery-tile:hover, #nr-root .gallery-tile:focus-visible,
  #nr-root .nr-pkg:hover, #nr-root .nr-pkg:focus-within,
  #nr-root .nr-sub:hover, #nr-root .nr-sub:focus-within,
  #nr-root .btn:hover, #nr-root .btn-primary:hover {
    transform: none;
  }

  /* MD05 pulse and MD02 scroll-reveal are event/observer-driven (not
     continuous), but still real @keyframes/transition work — neutralize
     them explicitly rather than relying on the transition:none list above. */
  #nr-root .is-pulse { animation: none; }
  #nr-root .nr-reveal,
  #nr-root .nr-reveal-item {
    transition: none;
  }
  /* .cap-tile.nr-reveal-item (id+2 classes) outguns the id+1-class rule
     above on specificity alone, source order notwithstanding — without this
     it would keep its own .16s/opacity transition live. In practice the JS
     observer never even starts under reduced motion (checked once at load),
     so this only matters if the OS-level preference flips mid-session before
     a given tile has scrolled into view; kept for that edge case. */
  #nr-root .cap-tile.nr-reveal-item {
    transition: none;
  }
}

/* Scrollbar */
#nr-root ::-webkit-scrollbar { width: 10px; height: 10px; }
#nr-root ::-webkit-scrollbar-track { background: transparent; }
#nr-root ::-webkit-scrollbar-thumb { background: rgba(var(--scrim-rgb), 0.1); border-radius: 10px; }
#nr-root ::-webkit-scrollbar-thumb:hover { background: rgba(var(--scrim-rgb), 0.2); }

/* Model detail page styles are now in model-page.css (scoped to #nr-root) */

@keyframes nr-sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 1040px) {
  #nr-root .stat-grid,
  #nr-root .feat-grid,
  #nr-root .models-grid { grid-template-columns: repeat(2, 1fr); }
  #nr-root .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  #nr-root .calc-grid { grid-template-columns: 1fr; gap: 28px; }
  #nr-root .steps-grid { grid-template-columns: 1fr; }
  #nr-root .nr-plans-grid,
  #nr-root .nr-pkg-grid { grid-template-columns: repeat(2, 1fr); }
  #nr-root .nr-plans-reassure { grid-template-columns: 1fr; }
  #nr-root .nav-links { display: none; }
  #nr-root .lang-menu { left: auto; right: 0; }
  #nr-root .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  #nr-root .hero-actions-left { justify-content: flex-start; }
  /* Stacked layout: drop the fixed-height lock, let the card flow naturally. */
  #nr-root .hero-grid .studio { height: auto; }
  #nr-root .hero-grid .studio-body { flex: 0 1 auto; }
  #nr-root .hero-grid .studio-canvas { flex: 0 1 auto; min-height: 320px; max-height: 420px; }
}
@media (max-width: 640px) {
  #nr-root { font-size: 16px; }
  #nr-root section { padding: 64px 0; }
  #nr-root .section-head { margin-bottom: 36px; gap: 14px; }
  #nr-root .container { padding: 0 20px; }
  #nr-root .narrow { padding: 0 20px; }
  #nr-root .copy-section { padding: 32px 0 64px; }
  #nr-root .copy-grid { grid-template-columns: 1fr; }
  #nr-root .copy-card { padding: 26px 24px 28px; }
  #nr-root .nr-plans-grid,
  #nr-root .nr-pkg-grid { grid-template-columns: 1fr; }
  #nr-root .nr-plans-seg { width: 100%; }
  #nr-root .nr-plans-seg-btn { flex: 1 1 0; padding: 10px 12px; }
  #nr-root .mc-desc, #nr-root .t-small { font-size: 14px; }
  #nr-root .studio-input { font-size: 16px; }
  #nr-root .nav-inner { padding: 14px 20px; gap: 10px; }
  #nr-root .logo span { display: none; }

  /* Mobile nav: collapse the desktop cluster to one CTA + a hamburger sheet. */
  #nr-root .nav-right { gap: 8px; }
  #nr-root .nav-right .theme-toggle,
  #nr-root .nav-right .lang,
  #nr-root .nav-right .nav-signin { display: none; }
  #nr-root .nav-right .btn-primary { padding: 8px 14px; }
  #nr-root .nav-right .btn-primary svg { display: none; }

  #nr-root .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; border-radius: 12px;
    border: 1px solid var(--line); background: rgba(var(--scrim-rgb), 0.03);
  }
  #nr-root .nav-burger-bar {
    height: 2px; width: 100%; border-radius: 2px; background: var(--fg-dim);
    transition: transform .25s var(--ease), opacity .2s var(--ease);
  }
  #nr-root .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #nr-root .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) { opacity: 0; }
  #nr-root .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  #nr-root .nav-sheet {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 49;
    padding: 14px 20px 20px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(0,0,0,0.5);
    animation: nr-sheet-in .2s var(--ease);
  }
  #nr-root .nav-sheet[hidden] { display: none; }

  #nr-root .nav-sheet-util {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
  }
  #nr-root .nav-sheet-util .theme-toggle { width: 44px; height: 44px; }
  #nr-root .nav-sheet-lang { display: inline-flex; gap: 4px; }
  #nr-root .nav-sheet-lang-opt {
    min-width: 48px; height: 44px; padding: 0 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid var(--line);
    font-size: 14px; font-weight: 500; color: var(--fg-dim);
    background: rgba(var(--scrim-rgb), 0.03);
  }
  #nr-root .nav-sheet-lang-opt.active { color: var(--fg); border-color: var(--line-2); background: rgba(var(--scrim-rgb), 0.08); }

  #nr-root .nav-sheet-links { display: flex; flex-direction: column; }
  #nr-root .nav-sheet-link {
    display: flex; align-items: center; min-height: 48px;
    padding: 0 4px; font-size: 16px; font-weight: 500; color: var(--fg);
    border-bottom: 1px solid var(--line);
  }
  #nr-root .nav-sheet-link:last-child { border-bottom: 0; }
  #nr-root .nav-sheet-link:active { color: var(--fg-dim); }

  #nr-root .nav-sheet-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
  #nr-root .nav-sheet-cta .btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 15px; }
  #nr-root .calc { padding: 22px; }
  #nr-root .calc-cost-big { font-size: 44px; }
  #nr-root .final-box { padding: 56px 24px; }
  #nr-root .stat-num { font-size: 40px; }
  #nr-root .stat-grid,
  #nr-root .feat-grid,
  #nr-root .models-grid { grid-template-columns: 1fr; }
  #nr-root .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  #nr-root .gallery-tile.span-2x2 { grid-column: span 2; grid-row: span 2; }
  #nr-root .gallery-tile.span-2x1 { grid-column: span 2; grid-row: span 1; }
  #nr-root .gallery-tile.span-1x2 { grid-column: span 1; grid-row: span 2; }
  #nr-root .gallery-modal-card { grid-template-columns: 1fr; max-height: 94vh; }
  #nr-root .gallery-modal-media { max-height: 50vh; min-height: 220px; }
  #nr-root .gallery-modal-meta { padding: 20px; }
  #nr-root .foot-cols { gap: 32px; }
  #nr-root .hero { padding: 80px 0 60px; }
  #nr-root .studio-body { padding: 18px 16px; gap: 10px; }
  #nr-root .studio-canvas { min-height: 240px; max-height: 320px; }
  #nr-root .studio-msg, #nr-root .studio-msg.user { max-width: 88%; }

  #nr-root .hero-actions,
  #nr-root .hero-actions-left { flex-direction: column; align-items: stretch; gap: 10px; }
  #nr-root .hero-actions .btn { width: 100%; justify-content: center; }

  #nr-root .gallery-modal-close { width: 44px; height: 44px; }

  #nr-root .studio-bar { padding: 5px 5px 5px 12px; gap: 6px; }
  #nr-root .studio-bar-quota { font-size: 11px; }
  #nr-root .studio-send { width: 36px; height: 36px; }
}


/* =============================================================
 * BLOG — использует глобальные netroom-переменные, поэтому
 * реагирует на theme-toggle вместе с остальным сайтом.
 * ============================================================= */

#nr-root .blog-hero { padding: 96px 0 64px; }
#nr-root .blog-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(var(--scrim-rgb), 0.04);
  color: var(--fg-dim);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
#nr-root .blog-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 3px rgba(255, 122, 89, 0.14);
}
/* Заголовки блога — общая типографика сайта (Inter 500, плотный трекинг),
   как t-display/t-h1/t-h2 на главной. Никакого серифа. */
#nr-root .blog-h1 {
  font-weight: 500;
  font-size: clamp(34px, 5.2vw, 71px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 24px 0 24px;
  color: var(--fg);
}
#nr-root .blog-h1-grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
#nr-root .blog-lead {
  max-width: 580px; margin: 0;
  font-size: 17px; line-height: 1.6; color: var(--fg-dim);
}

#nr-root .blog-tabs {
  display: inline-flex; gap: 4px; margin-top: 32px;
  padding: 4px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(var(--scrim-rgb), 0.04);
}
#nr-root .blog-tab {
  padding: 8px 18px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim); text-decoration: none;
  transition: all 160ms var(--ease);
}
#nr-root .blog-tab:hover { color: var(--fg); }
#nr-root .blog-tab.is-active {
  color: var(--bg); background: var(--fg);
}

#nr-root .blog-section { padding-bottom: 120px; }
#nr-root .blog-section-title {
  font-weight: 500;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.1; letter-spacing: -0.022em;
  color: var(--fg); margin: 0 0 24px;
}

#nr-root .blog-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 32px;
}
#nr-root .blog-filter {
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border: 1px solid var(--line-2);
  background: rgba(var(--scrim-rgb), 0.02);
  text-decoration: none;
  transition: all 160ms var(--ease);
}
#nr-root .blog-filter:hover { color: var(--fg); background: rgba(var(--scrim-rgb), 0.06); }
#nr-root .blog-filter.is-active {
  background: var(--fg); color: var(--bg); border-color: var(--fg);
}

#nr-root .blog-grid {
  display: grid; gap: 24px;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  /* start, не stretch: иначе featured вытягивается на высоту всей колонки */
  align-items: start;
}
/* Единственный пост (или один результат фильтра): featured не половинит пустую сетку. */
#nr-root .blog-grid > .blog-card--featured:only-child {
  grid-column: 1 / -1; max-width: 720px;
}

#nr-root .blog-col { display: flex; flex-direction: column; gap: 20px; }

/* Остальные посты ниже hero-пары — равномерная сетка из тех же row-карточек.
   Переиспользуется на changelog (развёрнутые релизы) и в «Ещё в блоге». */
#nr-root .blog-rest {
  display: grid; gap: 20px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#nr-root .blog-grid + .blog-rest { margin-top: 24px; }

#nr-root .blog-card {
  display: block;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
/* rgba(0,0,0): в тёмной теме битово то же, что --ink-rgb, а в светлой
   тень не флипается в невидимую белую */
#nr-root .blog-card:hover,
#nr-root .blog-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--line-2);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.35);
}
#nr-root .blog-card:focus-visible { outline: 2px solid var(--g1); outline-offset: 2px; }
#nr-root .blog-card--featured { display: flex; flex-direction: column; }
#nr-root .blog-card--row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0;
}

#nr-root .blog-cover {
  position: relative;
  background: linear-gradient(135deg, var(--c-from, #b37aff) 0%, var(--c-to, #ff7a59) 100%);
  overflow: hidden;
}
#nr-root .blog-card--featured .blog-cover { aspect-ratio: 16 / 11; }
#nr-root .blog-card--row .blog-cover { min-height: 220px; height: 100%; }
#nr-root .blog-cover::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 35% 40%, rgba(255,255,255,0.32), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(255,255,255,0.16), transparent 60%);
  pointer-events: none;
}
#nr-root .blog-cover--img { background: var(--bg-3); }
#nr-root .blog-cover--img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

#nr-root .blog-chip {
  position: absolute; top: 14px; left: 14px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(9, 9, 11, 0.82);
  color: #f5efe6;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
#nr-root .blog-chip--static { position: static; display: inline-block; margin-right: 8px; }

#nr-root .blog-card--featured .blog-card__body { padding: 28px 32px 32px; }
#nr-root .blog-card--row .blog-card__body {
  padding: 22px 24px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
}

#nr-root .blog-meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-dim);
}
#nr-root .blog-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

#nr-root .blog-card__title {
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.12; letter-spacing: -0.022em;
  color: var(--fg); margin: 16px 0 16px;
}
#nr-root .blog-card__title--sm { font-size: 20px; line-height: 1.15; }
#nr-root .blog-card__excerpt { margin: 0 0 24px; color: var(--fg-dim); font-size: 15px; line-height: 1.55; }
#nr-root .blog-card__excerpt--sm { font-size: 13px; margin: 0; }

#nr-root .blog-author { display: flex; align-items: center; gap: 12px; }
#nr-root .blog-author__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--a-from, #ff7a59), var(--a-to, #b37aff));
  color: #fff; font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; justify-content: center;
}
#nr-root .blog-card--row .blog-author__avatar { width: 30px; height: 30px; font-size: 9px; }
#nr-root .blog-author__name { font-size: 13px; font-weight: 500; color: var(--fg); }
#nr-root .blog-author__role {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-dim); margin-top: 2px;
}
#nr-root .blog-author--byline { margin: 28px 0 32px; }

#nr-root .blog-empty {
  padding: 80px 24px; text-align: center; color: var(--fg-dim);
  border: 1px dashed var(--line-2); border-radius: var(--r-xl);
  font-size: 12px;
}

/* Article */
/* padding только по вертикали: горизонтальные отступы даёт .container
   (шорткат с нулём по бокам прижимал текст статьи к краю экрана на мобиле) */
#nr-root .blog-article { max-width: 760px; margin: 0 auto; padding-top: 40px; padding-bottom: 60px; }
#nr-root .blog-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-dim); text-decoration: none;
}
#nr-root .blog-back:hover { color: var(--fg); }
#nr-root .blog-article__title {
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.05; letter-spacing: -0.028em;
  color: var(--fg); margin: 14px 0 18px;
}
#nr-root .blog-article__lead { font-size: 20px; line-height: 1.55; color: var(--fg-dim); max-width: 620px; margin: 0; }
#nr-root .blog-article__cover {
  position: relative; aspect-ratio: 16 / 8; overflow: hidden;
  border-radius: var(--r-xl); margin: 28px 0 32px;
  background: linear-gradient(135deg, var(--c-from, #b37aff), var(--c-to, #ff7a59));
}
#nr-root .blog-article__cover::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.32), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(255,255,255,0.16), transparent 60%);
}
#nr-root .blog-article__cover img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* Тело статьи: мера ~72 знака (680px при 17px); шапка и обложка остаются на 760px */
#nr-root .blog-body { max-width: 680px; font-size: 17px; line-height: 1.7; color: var(--fg-dim); }
#nr-root .blog-body p { margin: 0 0 1.1em; text-wrap: pretty; }
#nr-root .blog-body h2 {
  font-weight: 500;
  font-size: 30px; line-height: 1.15; letter-spacing: -0.022em;
  color: var(--fg); margin: 2em 0 0.6em;
  text-wrap: balance;
}
#nr-root .blog-body h3 {
  font-weight: 500;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--fg); margin: 1.6em 0 0.5em;
  text-wrap: balance;
}
#nr-root .blog-body > h2:first-child,
#nr-root .blog-body > h3:first-child { margin-top: 0; }
#nr-root .blog-body h2 + h3 { margin-top: 0.9em; }
#nr-root .blog-body a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--scrim-rgb), 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms var(--ease);
}
#nr-root .blog-body a:hover { text-decoration-color: currentColor; }
#nr-root .blog-body strong { color: var(--fg); font-weight: 600; }
#nr-root .blog-body ul, #nr-root .blog-body ol { padding-left: 1.6em; margin: 0 0 1.1em; }
#nr-root .blog-body li { margin-bottom: 0.5em; }
#nr-root .blog-body li::marker { color: var(--fg-faint); }
#nr-root .blog-body li > ul, #nr-root .blog-body li > ol { margin: 0.5em 0 0; }
#nr-root .blog-body blockquote {
  border-left: 2px solid var(--fg); padding-left: 20px; margin: 1.6em 0;
  font-size: 19px; font-weight: 500;
  line-height: 1.5; color: var(--fg);
}
#nr-root .blog-body blockquote p { margin: 0; }
#nr-root .blog-body blockquote p + p { margin-top: 0.8em; }
#nr-root .blog-body code, #nr-root .blog-body pre {
  font-family: var(--font-mono); font-size: 14px;
  background: var(--bg-2); border-radius: 8px;
}
#nr-root .blog-body code { padding: 2px 6px; }
#nr-root .blog-body pre { padding: 16px 20px; margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--line); }
#nr-root .blog-body pre code { padding: 0; background: none; border-radius: 0; }
#nr-root .blog-body img {
  display: block; max-width: 100%; height: auto;
  border-radius: var(--r-md); margin: 1.6em 0;
}
#nr-root .blog-body figure { margin: 1.6em 0; }
#nr-root .blog-body figure img { margin: 0; }
#nr-root .blog-body figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--fg-faint); }
#nr-root .blog-body hr { border: 0; border-top: 1px solid var(--line-2); margin: 2.4em 0; }
/* Таблицы (посты про цены): моно-шапка в стиле .blog-meta, строчные разделители.
   Скролл-обёртку .blog-table добавляет сервер (views_blog.blog_detail). */
#nr-root .blog-table { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
#nr-root .blog-table table { margin: 0; }
#nr-root .blog-body table {
  width: 100%; margin: 1.6em 0; border-collapse: collapse;
  font-size: 15px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
#nr-root .blog-body th {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-dim); text-align: left;
  padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line-2);
}
#nr-root .blog-body td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
}
#nr-root .blog-body th:last-child, #nr-root .blog-body td:last-child { padding-right: 0; }
#nr-root .blog-body td:first-child { color: var(--fg); }

/* Фокус — по общему паттерну сайта (см. .nr-plan-cta:focus-visible) */
#nr-root .blog-tab:focus-visible,
#nr-root .blog-filter:focus-visible,
#nr-root .blog-back:focus-visible,
#nr-root .chlog-month-anchor:focus-visible,
#nr-root .chlog-card__link:focus-visible,
#nr-root .blog-body a:focus-visible {
  outline: 2px solid var(--g1); outline-offset: 2px;
}

#nr-root[data-theme="light"] .blog-cover::after,
#nr-root[data-theme="light"] .blog-article__cover::after { opacity: 0.7; }

/* "Recent changes" — встраиваемый блок на /models/<key>/ */
#nr-root .mpage-recent-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  border-top: 1px solid var(--line);
}
#nr-root .mpage-recent-item {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
#nr-root .mpage-recent-date {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-dim);
}
#nr-root .mpage-recent-summary {
  font-size: 14px; color: var(--fg); line-height: 1.5;
}
#nr-root .mpage-recent-summary a {
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
#nr-root .mpage-recent-summary a:hover { border-color: var(--fg); }
#nr-root .mpage-recent-more {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
#nr-root .mpage-recent-more:hover { border-color: var(--fg); }
@media (max-width: 720px) {
  #nr-root .mpage-recent-item { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
}

/* ──────────────────────────────────────────────────────────────
 * Changelog (`/blog/changelog/`) — timeline-spine layout
 * ────────────────────────────────────────────────────────────── */

/* Hero: дашборд-панель с агрегатами вместо стандартного blog-hero */
#nr-root .chlog-hero { padding: 96px 0 48px; }
#nr-root .chlog-hero__row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px; align-items: end; margin-top: 24px;
}
#nr-root .chlog-hero__title {
  margin: 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-sans); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1;
}
#nr-root .chlog-hero__num {
  font-weight: 500; letter-spacing: -0.035em;
  font-size: clamp(72px, 12vw, 160px); line-height: 0.9;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#nr-root .chlog-hero__lbl {
  font-size: clamp(14px, 1.4vw, 18px); color: var(--fg-dim);
  text-transform: lowercase; letter-spacing: 0; max-width: 220px;
}
#nr-root .chlog-hero__sub {
  margin: 0; max-width: 420px; color: var(--fg-dim);
  display: flex; flex-direction: column; gap: 12px;
}
#nr-root .chlog-hero__sub-line {
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.05; color: var(--fg);
  letter-spacing: -0.022em;
}
#nr-root .chlog-hero__sub-line em { font-style: normal; color: var(--fg-dim); }
#nr-root .chlog-hero__sub-tail { font-size: 15px; line-height: 1.55; }

#nr-root .chlog-aggregates {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
#nr-root .chlog-agg {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(var(--scrim-rgb), 0.04);
}
#nr-root .chlog-agg__num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 13px; color: var(--fg);
}
#nr-root .chlog-agg__lbl {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--fg-dim);
  text-transform: lowercase;
}
#nr-root .chlog-agg--text    .chlog-agg__num { color: #C5A8FF; }
#nr-root .chlog-agg--image   .chlog-agg__num { color: #FF9B6A; }
#nr-root .chlog-agg--video   .chlog-agg__num { color: #7DDE92; }
#nr-root .chlog-agg--sound   .chlog-agg__num { color: #FDB39A; }
#nr-root .chlog-agg--assistant .chlog-agg__num { color: #9BD0FF; }

/* Timeline-spine */
#nr-root .chlog-section { padding-bottom: 120px; }
#nr-root .chlog-spine { position: relative; padding-left: 0; }
#nr-root .chlog-month-block { position: relative; padding: 32px 0 0; }
#nr-root .chlog-month-block + .chlog-month-block { margin-top: 16px; }
#nr-root .chlog-month-head {
  /* top с запасом под sticky-навбар (~65px), иначе он накрывает заголовок */
  position: sticky; top: 76px; z-index: 2;
  background: linear-gradient(180deg, var(--bg) 70%, transparent);
  padding: 16px 0; margin-bottom: 8px;
}
#nr-root .chlog-month-anchor {
  display: inline-block; text-decoration: none; color: inherit;
}
#nr-root .chlog-month-title {
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.022em;
  margin: 0; color: var(--fg);
}
#nr-root .chlog-month-anchor:hover .chlog-month-title { color: var(--fg-dim); }

#nr-root .chlog-entries {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
#nr-root .chlog-entries::before {
  content: ""; position: absolute;
  left: 11px; top: 12px; bottom: 12px;
  width: 1px; background: var(--line);
}

#nr-root .chlog-entry {
  position: relative;
  padding: 12px 0 12px 44px;
  --chip: #C5A8FF;
}
#nr-root .chlog-dot {
  position: absolute; left: 4px; top: 26px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--chip);
}
#nr-root .chlog-entry[data-catalog="text"]      { --chip: #C5A8FF; }
#nr-root .chlog-entry[data-catalog="runware"]   { --chip: #FF9B6A; }
#nr-root .chlog-entry[data-catalog="assistant"] { --chip: #9BD0FF; }
#nr-root .chlog-entry[data-catalog="other"]     { --chip: #9BA3AF; }

#nr-root .chlog-card {
  display: block; padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(var(--scrim-rgb), 0.02);
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
#nr-root .chlog-card:hover {
  border-color: var(--line-2);
  background: rgba(var(--scrim-rgb), 0.05);
}
#nr-root .chlog-card--fresh {
  box-shadow: inset 3px 0 0 var(--chip);
}

#nr-root .chlog-card__head {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 12px;
}
#nr-root .chlog-card__date {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-dim);
}
#nr-root .chlog-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600;
}
#nr-root .chlog-badge--new {
  /* тёмные чернила на градиенте — как .btn-primary; работает в обеих темах */
  color: #1a0f08; background: var(--grad);
}
#nr-root .chlog-badge--added   { color: #7DDE92; border: 1px solid rgba(125, 222, 146, 0.3); }
#nr-root .chlog-badge--updated { color: #FFD27A; border: 1px solid rgba(255, 210, 122, 0.3); }
#nr-root .chlog-badge--removed { color: #9BA3AF; border: 1px solid var(--line-2); }

#nr-root .chlog-chip {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--chip);
  border: 1px solid var(--line-2);
  background: rgba(var(--scrim-rgb), 0.04);
}
#nr-root .chlog-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--chip);
}

#nr-root .chlog-card__body {
  display: flex; gap: 14px; align-items: flex-start;
}
#nr-root .chlog-card__icon {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 8px;
  object-fit: cover;
  background: rgba(var(--scrim-rgb), 0.06);
}
#nr-root .chlog-card__icon--ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--fg-dim);
  border: 1px solid var(--line-2);
}
#nr-root .chlog-card__text { flex: 1 1 auto; min-width: 0; }
#nr-root .chlog-card__name {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 16px; line-height: 1.35; color: var(--fg);
  margin: 0 0 4px;
}
#nr-root .chlog-card__vendor {
  color: var(--fg-dim); font-weight: 400;
}
#nr-root .chlog-card__summary {
  font-size: 14px; line-height: 1.5; color: var(--fg-dim);
  margin: 0;
}

#nr-root .chlog-card__foot {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--line);
}
#nr-root .chlog-card__foot:empty { display: none; }
#nr-root .chlog-card__foot:has(:nth-child(1):last-child) { padding-top: 12px; }
#nr-root .chlog-card__link {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px; transition: border-color 160ms var(--ease);
}
#nr-root .chlog-card__link:hover { border-color: var(--fg); }
#nr-root .chlog-card__link--ghost { color: var(--fg-dim); }

/* Empty state */
#nr-root .chlog-empty {
  padding: 40px 0 0; max-width: 520px;
}
#nr-root .chlog-empty__title {
  font-weight: 500; font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1; letter-spacing: -0.022em;
  color: var(--fg); margin: 0 0 8px;
}
#nr-root .chlog-empty__sub {
  font-size: 15px; line-height: 1.6; color: var(--fg-dim); margin: 0;
}
#nr-root .chlog-skel {
  display: flex; flex-direction: column; gap: 12px; margin-top: 32px;
}
#nr-root .chlog-skel__row {
  display: flex; gap: 12px; padding: 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(var(--scrim-rgb), 0.02);
}
#nr-root .chlog-skel__row span {
  height: 12px; border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(var(--scrim-rgb), 0.04),
    rgba(var(--scrim-rgb), 0.10),
    rgba(var(--scrim-rgb), 0.04));
  background-size: 200% 100%;
  animation: chlog-shimmer 1.6s ease-in-out infinite;
}
#nr-root .chlog-skel__row span:nth-child(1) { width: 80px; }
#nr-root .chlog-skel__row span:nth-child(2) { flex: 1; }
#nr-root .chlog-skel__row span:nth-child(3) { width: 60px; }
@keyframes chlog-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Светлая тема: пастельные акценты откалиброваны под тёмный фон (1.4-2.5:1
   на белом) — те же оттенки темнее, все не ниже 5:1 на --bg/--bg-1. */
#nr-root[data-theme="light"] .chlog-entry                           { --chip: #7a4ce0; }
#nr-root[data-theme="light"] .chlog-entry[data-catalog="text"]      { --chip: #7a4ce0; }
#nr-root[data-theme="light"] .chlog-entry[data-catalog="runware"]   { --chip: #c2410c; }
#nr-root[data-theme="light"] .chlog-entry[data-catalog="assistant"] { --chip: #0369a1; }
#nr-root[data-theme="light"] .chlog-entry[data-catalog="other"]     { --chip: #52525b; }
#nr-root[data-theme="light"] .chlog-agg--text      .chlog-agg__num { color: #7a4ce0; }
#nr-root[data-theme="light"] .chlog-agg--image     .chlog-agg__num { color: #c2410c; }
#nr-root[data-theme="light"] .chlog-agg--video     .chlog-agg__num { color: #15803d; }
#nr-root[data-theme="light"] .chlog-agg--sound     .chlog-agg__num { color: #b45309; }
#nr-root[data-theme="light"] .chlog-agg--assistant .chlog-agg__num { color: #0369a1; }
#nr-root[data-theme="light"] .chlog-badge--added   { color: #15803d; border-color: rgba(21, 128, 61, 0.35); }
#nr-root[data-theme="light"] .chlog-badge--updated { color: #92610b; border-color: rgba(146, 97, 11, 0.35); }
#nr-root[data-theme="light"] .chlog-badge--removed { color: var(--fg-dim); }

@media (max-width: 1040px) {
  #nr-root .blog-grid { grid-template-columns: 1fr; }
  #nr-root .blog-rest { grid-template-columns: 1fr; }
  /* В одну колонку 16/11 даёт ~660px обложки на планшете — ужимаем до 16/9. */
  #nr-root .blog-card--featured .blog-cover { aspect-ratio: 16 / 9; }
  #nr-root .chlog-hero__row { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}
@media (max-width: 720px) {
  #nr-root .blog-hero { padding: 56px 0 40px; }
  #nr-root .chlog-hero { padding: 56px 0 32px; }
  #nr-root .blog-card--row { grid-template-columns: 1fr; }
  #nr-root .blog-card--row .blog-cover { aspect-ratio: 16 / 10; min-height: 0; }
  #nr-root .blog-card--featured .blog-card__body,
  #nr-root .blog-card--row .blog-card__body { padding: 20px; }
  #nr-root .chlog-month-head { position: static; }
  #nr-root .chlog-card__head .chlog-chip { margin-left: 0; }
  /* Мобильная шкала чтения */
  #nr-root .blog-body { line-height: 1.65; }
  #nr-root .blog-body h2 { font-size: 26px; }
  #nr-root .blog-body h3 { font-size: 21px; }
  #nr-root .blog-body blockquote { font-size: 18px; padding-left: 16px; }
  #nr-root .blog-article__lead { font-size: 17px; line-height: 1.6; }
  #nr-root .blog-article__cover { border-radius: var(--r-lg); }
  /* Тап-таргеты табов и фильтров — до домашних 44px (как nav-burger/lang-opt). */
  #nr-root .blog-tab,
  #nr-root .blog-filter { display: inline-flex; align-items: center; min-height: 44px; }
  /* Спайн компактнее: карточка на 375px получает ~24px ширины обратно. */
  #nr-root .chlog-entry { padding-left: 36px; }
  #nr-root .chlog-entries::before { left: 7px; }
  #nr-root .chlog-dot { left: 0; }
  #nr-root .chlog-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #nr-root .blog-card,
  #nr-root .blog-tab,
  #nr-root .blog-filter,
  #nr-root .chlog-card { transition: none; }
  #nr-root .blog-card:hover,
  #nr-root .blog-card:focus-visible { transform: none; }
  #nr-root .chlog-skel__row span { animation: none; }
}


/* =========================================================
   /assistants/ — index page (catalog of pre-built assistants).
   Scoped to #nr-root. Reuses tokens; new classes use nr-asst- prefix.
   ========================================================= */

/* Breadcrumbs — semantic <nav><ol><li>, separators via CSS (W3C APG pattern).
   Used on index + detail pages; keep generic. */
#nr-root .crumbs {
  color: var(--fg-faint); font-size: 12px;
  margin-bottom: 28px;
}
#nr-root .crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
#nr-root .crumbs li { display: inline-flex; align-items: center; gap: 8px; }
#nr-root .crumbs li + li::before { content: "/"; color: var(--fg-faint); }
#nr-root .crumbs a { color: var(--fg-dim); transition: color .15s var(--ease); }
#nr-root .crumbs a:hover { color: var(--fg); }
#nr-root .crumbs [aria-current="page"] { color: var(--fg); }

/* ── Hero ── */
#nr-root .nr-asst-hero {
  padding: 120px 0 80px;
  position: relative; overflow: hidden;
}
#nr-root .nr-asst-hero-inner {
  position: relative; z-index: 1;
  max-width: 820px;
  display: flex; flex-direction: column; gap: 22px;
}
#nr-root .nr-asst-hero-inner .eyebrow { align-self: flex-start; }
#nr-root .nr-asst-hero-h1 { margin: 6px 0 0; }
#nr-root .nr-asst-hero-lead { max-width: 660px; margin: 0; }
#nr-root .nr-asst-hero-cta {
  display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
#nr-root .nr-asst-hero-note {
  color: var(--fg-faint); font-size: 12px; letter-spacing: 0.04em;
}

/* ── Section spacing — slightly tighter than the landing hero spacing ── */
#nr-root .nr-asst-featured-sec,
#nr-root .nr-asst-grid-sec,
#nr-root .nr-asst-why,
#nr-root .nr-asst-pricing,
#nr-root .nr-asst-trust,
#nr-root .nr-asst-faq,
#nr-root .nr-asst-long { padding: 96px 0; }

/* ── Cards (shared between featured + grid) ── */
#nr-root .nr-asst-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  border-radius: var(--r-lg);
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: transform .2s var(--ease),
              border-color .2s var(--ease),
              background .2s var(--ease),
              box-shadow .2s var(--ease);
}
#nr-root .nr-asst-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  background: var(--bg-2);
  box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.5);
}
#nr-root .nr-asst-card:hover .nr-asst-card-cta {
  color: var(--fg);
  border-color: var(--line-2);
  background: var(--bg-3);
}
#nr-root .nr-asst-card:hover .nr-asst-card-arrow {
  color: var(--fg);
  transform: translate(2px, -2px);
}
#nr-root .nr-asst-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--a1);
}

#nr-root .nr-asst-card-head {
  display: flex; align-items: center; gap: 12px;
}
#nr-root .nr-asst-card-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  object-fit: cover;
  background: var(--bg-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
#nr-root .nr-asst-card-icon-fb {
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 18px;
  background: var(--grad); color: #1a0f08;
}
/* Type accent — 2px coloured edge inside the icon frame. Maps to brand stops:
   text=purple, image=yellow, video=orange. Mint is reserved for "new" badges. */
#nr-root .nr-asst-card [data-nr-type-label="text"]  ~ * .nr-asst-card-icon,
#nr-root .nr-asst-card-head .nr-asst-card-icon { box-shadow: inset 2px 0 0 var(--line-2); }
#nr-root .nr-asst-card[data-nr-type="text"]  .nr-asst-card-icon { box-shadow: inset 2px 0 0 var(--a1); }
#nr-root .nr-asst-card[data-nr-type="image"] .nr-asst-card-icon { box-shadow: inset 2px 0 0 var(--a3); }
#nr-root .nr-asst-card[data-nr-type="video"] .nr-asst-card-icon { box-shadow: inset 2px 0 0 var(--a2); }

#nr-root .nr-asst-card-meta {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1;
}
#nr-root .nr-asst-card-type {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim);
}
#nr-root .nr-asst-card[data-nr-type="text"]  .nr-asst-card-type { color: var(--a1); }
#nr-root .nr-asst-card[data-nr-type="image"] .nr-asst-card-type { color: var(--a3); }
#nr-root .nr-asst-card[data-nr-type="video"] .nr-asst-card-type { color: var(--a2); }
#nr-root .nr-asst-card-engine {
  font-size: 11px; color: var(--fg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#nr-root .nr-asst-card-cta {
  padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim);
  background: rgba(var(--scrim-rgb), 0.02);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  flex-shrink: 0;
}

#nr-root .nr-asst-card-name {
  font-size: 18px; font-weight: 500; letter-spacing: -0.012em;
  margin: 0;
}
#nr-root .nr-asst-card-desc {
  color: var(--fg-dim); font-size: 13.5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
#nr-root .nr-asst-card-preview {
  font-size: 11.5px; line-height: 1.5; color: var(--fg-faint);
  background: rgba(var(--scrim-rgb), 0.03);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
#nr-root .nr-asst-card-preview-arrow { color: var(--a1); margin-right: 6px; }
#nr-root .nr-asst-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--line);
}
#nr-root .nr-asst-card-runs { font-size: 11px; color: var(--fg-faint); }
#nr-root .nr-asst-card-arrow {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(var(--scrim-rgb), 0.02);
  color: var(--fg-dim);
  transition: color .2s var(--ease), transform .2s var(--ease);
}

/* Featured grid (3 columns desktop) with hero-card variant */
#nr-root .nr-asst-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
#nr-root .nr-asst-card-hero {
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
  padding: 24px;
  min-height: 260px;
}
#nr-root .nr-asst-card-hero:hover {
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    var(--grad) border-box;
}
#nr-root[data-theme="light"] .nr-asst-card-hero {
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    var(--grad) border-box;
}

/* ── Filter strip ── */
#nr-root .nr-asst-filter {
  position: sticky; top: 0; z-index: 30;
  margin: 0 -16px 24px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 16px;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  transition: border-color .2s var(--ease);
}
#nr-root .nr-asst-grid-sec { padding-top: 64px; }
#nr-root .nr-asst-filter::after {
  content: ""; position: absolute; inset: auto 0 -1px 0;
  height: 1px; background: var(--line); opacity: 0;
  transition: opacity .2s var(--ease);
}

#nr-root .nr-asst-chips {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-right: 4px;
}
#nr-root .nr-asst-chips::-webkit-scrollbar { display: none; }
#nr-root .nr-asst-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--fg-dim);
  font-size: 13px; line-height: 1;
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease);
  white-space: nowrap; cursor: pointer;
}
#nr-root .nr-asst-chip:hover { color: var(--fg); border-color: var(--line-2); }
#nr-root .nr-asst-chip.is-active {
  color: var(--fg);
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
}
#nr-root .nr-asst-chip-label { font-weight: 500; }
#nr-root .nr-asst-chip-count {
  color: var(--fg-faint); font-size: 11px;
  padding-left: 8px;
  border-left: 1px solid var(--line-2);
}
#nr-root .nr-asst-chip.is-active .nr-asst-chip-count { color: var(--fg-dim); }
#nr-root .nr-asst-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
}
#nr-root .nr-asst-chip-dot[data-nr-type-dot="text"]  { background: var(--a1); }
#nr-root .nr-asst-chip-dot[data-nr-type-dot="image"] { background: var(--a3); }
#nr-root .nr-asst-chip-dot[data-nr-type-dot="video"] { background: var(--a2); }

#nr-root .nr-asst-search {
  flex: 1 1 280px; min-width: 220px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  border-radius: 999px;
  color: var(--fg-dim);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
#nr-root .nr-asst-search:focus-within {
  border-color: var(--line-2); background: var(--bg-2);
}
#nr-root .nr-asst-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  color: var(--fg); font-family: var(--font-sans); font-size: 13.5px;
}
#nr-root .nr-asst-search input::placeholder { color: var(--fg-faint); }
#nr-root .nr-asst-search input::-webkit-search-cancel-button { display: none; }

#nr-root .nr-asst-meta-row {
  color: var(--fg-faint); font-size: 11px; letter-spacing: 0.06em;
  margin: 0 0 24px;
}

/* Grid — override .models-grid gap for richer cards */
#nr-root .nr-asst-grid { gap: 14px; }

/* Empty state */
#nr-root .nr-asst-empty {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 80px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--r-xl);
  text-align: center;
}
#nr-root .nr-asst-empty[hidden] { display: none; }
#nr-root .nr-asst-empty-title { margin: 0; }

/* ── Why pre-built ── */
#nr-root .nr-asst-why-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
#nr-root .nr-asst-why-col {
  background: var(--bg-1);
  padding: 32px;
  display: flex; flex-direction: column; gap: 18px;
}
#nr-root .nr-asst-why-col.is-pro {
  background:
    linear-gradient(180deg, rgba(179, 122, 255, 0.05), transparent 40%),
    var(--bg-1);
}
#nr-root .nr-asst-why-lbl {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-faint);
}
#nr-root .nr-asst-why-col.is-pro .nr-asst-why-lbl {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
#nr-root .nr-asst-why-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
#nr-root .nr-asst-why-list li {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--fg-dim); font-size: 14px; line-height: 1.55;
}
#nr-root .nr-asst-why-icon { flex-shrink: 0; margin-top: 2px; }
#nr-root .nr-asst-why-icon-no  { color: var(--fg-faint); }
#nr-root .nr-asst-why-icon-yes { color: var(--a4); }

/* ── Pricing ── */
#nr-root .nr-asst-price-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
#nr-root .nr-asst-price-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
#nr-root .nr-asst-price-card.is-featured {
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
}
#nr-root .nr-asst-price-card.is-featured::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(179, 122, 255, 0.08), transparent 60%);
  border-radius: inherit; pointer-events: none;
}
#nr-root .nr-asst-price-t {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-faint);
}
#nr-root .nr-asst-price-card.is-featured .nr-asst-price-t {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
#nr-root .nr-asst-price-p {
  font-weight: 500; font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em; line-height: 1;
}
#nr-root .nr-asst-price-s { color: var(--fg-dim); font-size: 13.5px; line-height: 1.5; }

#nr-root .nr-asst-pay {
  margin-top: 28px;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(var(--scrim-rgb), 0.02);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
#nr-root .nr-asst-pay-lbl {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-faint);
}
#nr-root .nr-asst-pay-line { color: var(--fg-dim); font-size: 13px; }

/* ── Trust ── */
#nr-root .nr-asst-trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
#nr-root .nr-asst-trust-cell {
  padding: 24px; border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
#nr-root .nr-asst-trust-bar {
  width: 32px; height: 2px; border-radius: 2px;
  background: var(--a1);
}
#nr-root .nr-asst-trust-cell[data-nr-pillar="0"] .nr-asst-trust-bar { background: var(--a1); }
#nr-root .nr-asst-trust-cell[data-nr-pillar="1"] .nr-asst-trust-bar { background: var(--a2); }
#nr-root .nr-asst-trust-cell[data-nr-pillar="2"] .nr-asst-trust-bar { background: var(--a3); }
#nr-root .nr-asst-trust-cell[data-nr-pillar="3"] .nr-asst-trust-bar { background: var(--a4); }
#nr-root .nr-asst-trust-t { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
#nr-root .nr-asst-trust-s { color: var(--fg-dim); font-size: 13.5px; line-height: 1.55; }

/* ── FAQ ── */
#nr-root .nr-asst-faq-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-1);
}
#nr-root .nr-asst-faq-item { border-bottom: 1px solid var(--line); }
#nr-root .nr-asst-faq-item:last-child { border-bottom: 0; }
#nr-root .nr-asst-faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px;
  font-size: 15px; font-weight: 500; color: var(--fg);
  cursor: pointer;
  transition: background .15s var(--ease);
}
#nr-root .nr-asst-faq-item summary::-webkit-details-marker { display: none; }
#nr-root .nr-asst-faq-item summary:hover { background: rgba(var(--scrim-rgb), 0.03); }
#nr-root .nr-asst-faq-chev {
  flex-shrink: 0; color: var(--fg-faint);
  transition: transform .25s var(--ease);
}
#nr-root .nr-asst-faq-item[open] .nr-asst-faq-chev { transform: rotate(180deg); }
#nr-root .nr-asst-faq-a {
  padding: 0 24px 22px;
  color: var(--fg-dim); font-size: 14px; line-height: 1.65;
}

/* ── Long-form copy ── */
#nr-root .nr-asst-long-body {
  display: flex; flex-direction: column; gap: 16px;
  color: var(--fg-dim); font-size: 15px; line-height: 1.7;
}
#nr-root .nr-asst-long-body p { margin: 0; }
#nr-root .nr-asst-long-body strong { color: var(--fg); }

/* ── Final CTA — reuse .final-box from main landing if present ── */

/* ══════════════════════════════════════════════════════════════════════
   Responsive — /assistants/ specific overrides
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1040px) {
  #nr-root .nr-asst-hero { padding: 80px 0 56px; }
  #nr-root .nr-asst-featured-grid,
  #nr-root .nr-asst-price-grid { grid-template-columns: repeat(2, 1fr); }
  #nr-root .nr-asst-trust-grid { grid-template-columns: repeat(2, 1fr); }
  #nr-root .nr-asst-featured-sec,
  #nr-root .nr-asst-grid-sec,
  #nr-root .nr-asst-why,
  #nr-root .nr-asst-pricing,
  #nr-root .nr-asst-trust,
  #nr-root .nr-asst-faq,
  #nr-root .nr-asst-long { padding: 72px 0; }
}
@media (max-width: 640px) {
  #nr-root .nr-asst-hero { padding: 64px 0 40px; }
  #nr-root .nr-asst-featured-grid,
  #nr-root .nr-asst-price-grid,
  #nr-root .nr-asst-trust-grid { grid-template-columns: 1fr; }
  #nr-root .nr-asst-why-grid { grid-template-columns: 1fr; }
  #nr-root .nr-asst-filter { flex-direction: column; align-items: stretch; gap: 10px; margin: 0 -16px 20px; padding: 12px 16px; }
  #nr-root .nr-asst-search { flex: 0 0 auto; }
  #nr-root .nr-asst-card { padding: 18px; }
  #nr-root .nr-asst-card-hero { min-height: 220px; padding: 20px; }
  #nr-root .nr-asst-card-cta { display: none; }
}

/* =============================================================
 * LEGAL pages (Terms / Privacy / Refund) — netroom design.
 * ============================================================= */

#nr-root .legal-hero {
  position: relative;
  padding: 96px 0 56px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
#nr-root .legal-hero-glow {
  position: absolute; top: -280px; width: 840px; height: 840px;
  border-radius: 50%; opacity: 0.55;
  pointer-events: none;
}
#nr-root .legal-hero-glow-l { left: -320px; background: radial-gradient(closest-side, rgba(179,122,255,0.30), rgba(179,122,255,0.12) 45%, rgba(179,122,255,0) 100%); }
#nr-root .legal-hero-glow-r { right: -320px; background: radial-gradient(closest-side, rgba(255,122,89,0.22), rgba(255,122,89,0.09) 45%, rgba(255,122,89,0) 100%); }
#nr-root[data-theme="light"] .legal-hero-glow { opacity: 0.40; }

#nr-root .legal-hero .crumbs {
  color: var(--fg-faint); font-size: 11px;
  margin-bottom: 24px;
}
#nr-root .legal-hero .crumbs a { color: var(--fg-dim); transition: color .2s; }
#nr-root .legal-hero .crumbs a:hover { color: var(--fg); }
#nr-root .legal-hero .crumbs [aria-current="page"] { color: var(--fg); }

#nr-root .legal-hero-body { max-width: 820px; }
#nr-root .legal-hero-title { margin: 18px 0 16px; }
#nr-root .legal-hero-sub { max-width: 640px; margin: 0 0 24px; }

#nr-root .legal-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 8px;
}
#nr-root .legal-meta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-1); border: 1px solid var(--line);
  font-size: 12px; color: var(--fg-dim);
  font-family: var(--font-mono); letter-spacing: 0.02em;
}
#nr-root .legal-meta-pill svg { opacity: 0.7; }
#nr-root .legal-meta-pill-soft {
  background: rgba(158, 231, 199, 0.06);
  border-color: rgba(158, 231, 199, 0.25);
  color: var(--a4);
}
#nr-root[data-theme="light"] .legal-meta-pill-soft {
  background: rgba(70, 160, 120, 0.08);
  border-color: rgba(70, 160, 120, 0.28);
  color: #2d8a64;
}

/* Document switcher tabs */
#nr-root .legal-tabs {
  display: flex; gap: 8px; margin-top: 40px;
  padding: 6px; border-radius: 999px;
  background: var(--bg-1); border: 1px solid var(--line);
  width: fit-content;
  flex-wrap: wrap;
}
#nr-root .legal-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--fg-dim);
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
#nr-root .legal-tab:hover { color: var(--fg); background: rgba(var(--scrim-rgb), 0.04); }
#nr-root .legal-tab.is-active {
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.4), inset 0 0 0 1px var(--line-2);
}
#nr-root[data-theme="light"] .legal-tab.is-active {
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.2), inset 0 0 0 1px var(--line-2);
}
#nr-root .legal-tab svg { opacity: 0.85; }

/* Body grid */
#nr-root .legal-body { padding: 64px 0 96px; }
#nr-root .legal-grid {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 56px; align-items: flex-start;
}

/* TOC sidebar */
#nr-root .legal-toc { position: relative; }
#nr-root .legal-toc-sticky {
  position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: 18px;
}
#nr-root .legal-toc-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint);
}
#nr-root .legal-toc-label .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--grad); }
#nr-root .legal-toc-nav {
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
#nr-root .legal-toc-link {
  display: block; padding: 7px 10px;
  font-size: 13px; line-height: 1.4; color: var(--fg-faint);
  border-radius: 8px;
  transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
  position: relative;
}
#nr-root .legal-toc-link:hover { color: var(--fg); background: rgba(var(--scrim-rgb), 0.03); }
#nr-root .legal-toc-link.is-active {
  color: var(--fg); background: rgba(var(--scrim-rgb), 0.05);
  font-weight: 500;
}
#nr-root .legal-toc-link.is-active::before {
  content: ''; position: absolute; left: -15px; top: 7px; bottom: 7px;
  width: 2px; background: var(--grad); border-radius: 2px;
}
#nr-root .legal-toc-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
#nr-root .legal-toc-help {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--bg-1); border: 1px solid var(--line);
  color: var(--fg-dim); font-size: 12px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
#nr-root .legal-toc-help:hover { background: var(--bg-2); color: var(--fg); }

/* Article card with prose styling */
#nr-root .legal-article { min-width: 0; }
#nr-root .legal-article-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 48px 56px;
  color: var(--fg-dim);
  font-size: 15px; line-height: 1.7;
}
#nr-root .legal-article-card > *:first-child { margin-top: 0; }
#nr-root .legal-article-card > *:last-child { margin-bottom: 0; }
#nr-root .legal-article-card h2 {
  color: var(--fg);
  font-size: 24px; font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 56px 0 18px;
  scroll-margin-top: 96px;
  position: relative; padding-top: 24px;
  border-top: 1px solid var(--line);
}
#nr-root .legal-article-card > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#nr-root .legal-article-card h2::before {
  content: ''; position: absolute; left: 0; top: -1px;
  width: 36px; height: 2px; background: var(--grad);
}
#nr-root .legal-article-card > h2:first-child::before { display: none; }
#nr-root .legal-article-card h3 {
  color: var(--fg);
  font-size: 17px; font-weight: 600; letter-spacing: -0.005em;
  margin: 32px 0 12px;
}
#nr-root .legal-article-card h4 {
  color: var(--fg);
  font-size: 15px; font-weight: 600;
  margin: 24px 0 8px;
}
#nr-root .legal-article-card p { margin: 0 0 16px; }
#nr-root .legal-article-card ul,
#nr-root .legal-article-card ol { margin: 0 0 18px; padding-left: 22px; }
#nr-root .legal-article-card li { margin: 0 0 8px; }
#nr-root .legal-article-card li::marker { color: var(--fg-faint); }
#nr-root .legal-article-card a {
  color: var(--fg);
  text-decoration: underline; text-decoration-color: rgba(var(--scrim-rgb), 0.25);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s var(--ease);
}
#nr-root .legal-article-card a:hover { text-decoration-color: var(--a2); }
#nr-root .legal-article-card strong { color: var(--fg); font-weight: 600; }
#nr-root .legal-article-card code {
  font-family: var(--font-mono); font-size: 13px;
  padding: 2px 6px; border-radius: 6px;
  background: rgba(var(--scrim-rgb), 0.06);
  border: 1px solid var(--line);
}
#nr-root .legal-article-card blockquote {
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 2px solid;
  border-image: var(--grad) 1;
  background: rgba(var(--scrim-rgb), 0.03);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--fg);
  font-size: 14px;
}
#nr-root .legal-article-card hr {
  border: 0; border-top: 1px solid var(--line);
  margin: 32px 0;
}
#nr-root .legal-article-card table {
  width: 100%; border-collapse: collapse;
  margin: 18px 0; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
#nr-root .legal-article-card th,
#nr-root .legal-article-card td {
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--line);
}
#nr-root .legal-article-card th { background: rgba(var(--scrim-rgb), 0.04); color: var(--fg); font-weight: 600; }
#nr-root .legal-article-card tr:last-child td { border-bottom: 0; }

/* Highlighted callout for refund “service rendered” clause */
#nr-root .legal-article-card .legal-callout {
  margin: 24px 0;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(179,122,255,0.10), rgba(111,63,216,0.08));
  border: 1px solid rgba(179,122,255,0.28);
  color: var(--fg);
  display: flex; gap: 14px; align-items: flex-start;
}
#nr-root .legal-article-card .legal-callout svg {
  flex-shrink: 0; margin-top: 2px;
  color: var(--a1);
}
#nr-root .legal-article-card .legal-callout p { margin: 0; }
#nr-root .legal-article-card .legal-callout strong { color: var(--fg); }

/* Inline accept card after article */
#nr-root .legal-accept-card {
  margin-top: 32px;
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(circle at 0% 0%, rgba(179,122,255,0.08), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(255,122,89,0.06), transparent 60%),
    var(--bg-1);
  border-radius: var(--r-xl);
  transition: opacity .3s var(--ease);
  flex-wrap: wrap;
}
#nr-root .legal-accept-card.is-accepted {
  border-color: rgba(158, 231, 199, 0.35);
  background:
    radial-gradient(circle at 0% 0%, rgba(158,231,199,0.10), transparent 60%),
    var(--bg-1);
}
#nr-root .legal-accept-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(var(--scrim-rgb), 0.05);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--a4);
  flex-shrink: 0;
}
#nr-root .legal-accept-text { flex: 1; min-width: 220px; }
#nr-root .legal-accept-title { color: var(--fg); font-size: 15px; font-weight: 600; }
#nr-root .legal-accept-sub { color: var(--fg-faint); font-size: 13px; margin-top: 4px; }
#nr-root .legal-accept-card.is-accepted .legal-accept-btn {
  pointer-events: none; opacity: 0.55;
}
#nr-root .legal-accept-card.is-accepted .legal-accept-btn span,
#nr-root .legal-accept-card.is-accepted .legal-accept-btn svg { transition: opacity .3s var(--ease); }

/* CTA section */
#nr-root .legal-cta { padding: 0 0 96px; }

/* Responsive */
@media (max-width: 1040px) {
  #nr-root .legal-grid { grid-template-columns: 1fr; gap: 32px; }
  #nr-root .legal-toc { display: none; }
  #nr-root .legal-article-card { padding: 36px 32px; }
}
@media (max-width: 640px) {
  #nr-root .legal-hero { padding: 64px 0 40px; }
  #nr-root .legal-body { padding: 40px 0 64px; }
  #nr-root .legal-cta { padding: 0 0 64px; }
  #nr-root .legal-article-card { padding: 28px 22px; border-radius: var(--r-lg); }
  #nr-root .legal-article-card h2 { font-size: 20px; margin-top: 40px; }
  #nr-root .legal-tabs { width: 100%; }
  #nr-root .legal-tab { flex: 1 1 auto; justify-content: center; padding: 10px 12px; font-size: 12px; }
  #nr-root .legal-tab span { white-space: nowrap; }
  #nr-root .legal-accept-card { padding: 18px; }
}

/* =============================================================
 * CONSENT MODAL — beautiful Accept modal shown on first visit.
 * ============================================================= */

#nr-root .nr-consent[hidden] { display: none; }
#nr-root .nr-consent {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: nrConsentFade .25s var(--ease);
}
@keyframes nrConsentFade { from { opacity: 0; } to { opacity: 1; } }
#nr-root .nr-consent-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
#nr-root[data-theme="light"] .nr-consent-backdrop { background: rgba(20, 20, 25, 0.42); }

#nr-root .nr-consent-card {
  position: relative; z-index: 1;
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 36px 36px 32px;
  border-radius: var(--r-2xl);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(var(--scrim-rgb), 0.04);
  animation: nrConsentRise .35s var(--ease);
}
@keyframes nrConsentRise {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}
#nr-root .nr-consent-glow {
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 360px; height: 200px;
  background: radial-gradient(ellipse closest-side, rgba(179,122,255,0.30), rgba(179,122,255,0.10) 50%, rgba(179,122,255,0) 100%);
  pointer-events: none;
  border-radius: 50%;
}
#nr-root .nr-consent-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-faint);
  background: rgba(var(--scrim-rgb), 0.04);
  transition: background .2s var(--ease), color .2s var(--ease);
}
#nr-root .nr-consent-close:hover { background: rgba(var(--scrim-rgb), 0.1); color: var(--fg); }

#nr-root .nr-consent-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim);
  padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(var(--scrim-rgb), 0.02);
  position: relative; z-index: 1;
}
#nr-root .nr-consent-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--grad); }

#nr-root .nr-consent-title {
  position: relative; z-index: 1;
  margin: 18px 0 12px;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.15; letter-spacing: -0.02em;
  font-weight: 500; color: var(--fg);
}
#nr-root .nr-consent-lead {
  color: var(--fg-dim); font-size: 14px; line-height: 1.55;
  margin: 0 0 22px;
  position: relative; z-index: 1;
}

#nr-root .nr-consent-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; z-index: 1;
}
#nr-root .nr-consent-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  background: rgba(var(--scrim-rgb), 0.03);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
#nr-root .nr-consent-list li:hover {
  border-color: var(--line-2);
  background: rgba(var(--scrim-rgb), 0.05);
}
#nr-root .nr-consent-bullet {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg);
  background: rgba(var(--scrim-rgb), 0.05);
  border: 1px solid var(--line);
}
#nr-root .nr-consent-link {
  display: block; color: var(--fg);
  font-size: 14px; font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color .2s var(--ease);
}
#nr-root .nr-consent-link:hover { text-decoration-color: var(--a2); }
#nr-root .nr-consent-list-sub {
  display: block; color: var(--fg-faint);
  font-size: 12px; line-height: 1.45;
  margin-top: 4px;
}

#nr-root .nr-consent-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
#nr-root .nr-consent-accept { flex: 1 1 220px; justify-content: center; }
#nr-root .nr-consent-decline { flex: 0 0 auto; }

#nr-root .nr-consent-fineprint {
  margin: 16px 0 0;
  font-size: 11px; color: var(--fg-faint);
  line-height: 1.5;
  position: relative; z-index: 1;
}

@media (max-width: 520px) {
  #nr-root .nr-consent-card { padding: 28px 22px; }
  #nr-root .nr-consent-actions { flex-direction: column; }
  #nr-root .nr-consent-accept,
  #nr-root .nr-consent-decline { flex: 1 1 auto; width: 100%; justify-content: center; }
}



/* =========================================================
   404 page
   ========================================================= */
#nr-root .nf {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: calc(100vh - 74px);
  min-height: calc(100svh - 74px);
  padding: 72px 0 96px;
}
#nr-root .nf-inner {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

/* Animated blobs (reuse .ambient markup; b3 keeps its static translateX) */
#nr-root .nf .blob.b1 { animation: nf-drift 18s ease-in-out infinite alternate; }
#nr-root .nf .blob.b2 { animation: nf-drift 24s ease-in-out -8s infinite alternate-reverse; }
@keyframes nf-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(48px, -36px, 0) scale(1.1); }
}

/* Big 404 */
#nr-root .nf-code {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 2.4vw, 26px);
  margin-top: 30px;
  user-select: none; -webkit-user-select: none;
}
#nr-root .nf-digit {
  font-weight: 600; line-height: 0.92;
  font-size: clamp(96px, 21vw, 196px);
  letter-spacing: -0.05em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: nf-float 7s ease-in-out infinite;
}
#nr-root .nf-code .nf-digit:last-child { animation-delay: -3.5s; }
#nr-root .nf-zero {
  width: clamp(78px, 16.5vw, 152px); flex-shrink: 0;
  animation: nf-float 7s ease-in-out -1.8s infinite;
}
#nr-root .nf-zero svg { display: block; width: 100%; height: auto; }
@keyframes nf-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
#nr-root .nf-orbit {
  transform-origin: 60px 60px;
  animation: nr-spin 6s linear infinite;
}
#nr-root .nf-ring-dash {
  transform-origin: 60px 60px;
  animation: nr-spin 40s linear infinite reverse;
}

/* Copy */
#nr-root .nf-title { margin: 26px 0 0; font-size: clamp(30px, 4.6vw, 56px); }
#nr-root .nf-lead  { margin: 16px auto 0; max-width: 560px; }

/* Terminal chip */
#nr-root .nf-term {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px; padding: 10px 18px;
  max-width: min(92vw, 620px);
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(var(--scrim-rgb), 0.03);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--fg-dim);
}
#nr-root .nf-term-get { color: var(--fg-faint); flex-shrink: 0; }
#nr-root .nf-term-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#nr-root .nf-term-status { color: var(--a2); font-weight: 500; white-space: nowrap; flex-shrink: 0; }
#nr-root .nf-cursor {
  width: 7px; height: 14px; flex-shrink: 0; border-radius: 1px;
  background: var(--fg-dim);
  animation: nf-blink 1.1s steps(2, end) infinite;
}
@keyframes nf-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Actions */
#nr-root .nf-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 36px;
}
#nr-root .nf-actions .btn { min-width: 200px; justify-content: center; }

/* Quick links */
#nr-root .nf-links {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  width: 100%; max-width: 920px;
  margin-top: 64px;
}
#nr-root .nf-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 18px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(var(--scrim-rgb), 0.02);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
#nr-root .nf-card:hover { transform: translateY(-2px); border-color: var(--line-2); background: var(--bg-2); }
#nr-root .nf-card-ic {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(var(--scrim-rgb), 0.03);
  color: var(--fg-dim);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
#nr-root .nf-card:hover .nf-card-ic { color: var(--fg); border-color: var(--line-2); }
#nr-root .nf-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#nr-root .nf-card-t { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; color: var(--fg); }
#nr-root .nf-card-s { font-size: 13px; line-height: 1.45; color: var(--fg-faint); }
#nr-root .nf-card-arrow {
  position: absolute; top: 16px; right: 16px;
  color: var(--fg-dim); opacity: 0; transform: translate(-4px, 4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
#nr-root .nf-card:hover .nf-card-arrow { opacity: 1; transform: translate(0, 0); }

/* Support line */
#nr-root .nf-support { margin: 36px 0 0; font-size: 13.5px; color: var(--fg-faint); }
#nr-root .nf-support a {
  color: var(--fg-dim); padding-bottom: 1px;
  border-bottom: 1px solid var(--line-2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
#nr-root .nf-support a:hover { color: var(--fg); border-color: var(--fg-dim); }

/* Staggered entrance */
#nr-root .nf-in { opacity: 0; transform: translateY(16px); animation: nf-in .7s var(--ease) forwards; }
#nr-root .nf-d1 { animation-delay: .04s; }
#nr-root .nf-d2 { animation-delay: .10s; }
#nr-root .nf-d3 { animation-delay: .18s; }
#nr-root .nf-d4 { animation-delay: .26s; }
#nr-root .nf-d5 { animation-delay: .34s; }
#nr-root .nf-d6 { animation-delay: .42s; }
#nr-root .nf-d7 { animation-delay: .52s; }
#nr-root .nf-d8 { animation-delay: .62s; }
@keyframes nf-in { to { opacity: 1; transform: none; } }

@media (max-width: 1040px) {
  #nr-root .nf-links { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
}
@media (max-width: 640px) {
  #nr-root .nf { padding: 48px 0 72px; min-height: 0; }
  #nr-root .nf-links { grid-template-columns: 1fr; max-width: 440px; margin-top: 48px; }
  #nr-root .nf-card { flex-direction: row; align-items: center; padding: 14px 16px; }
  #nr-root .nf-card-arrow { top: 50%; margin-top: -7px; }
  #nr-root .nf-term { font-size: 11.5px; gap: 8px; padding: 9px 14px; }
  #nr-root .nf-actions { width: 100%; }
  #nr-root .nf-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  #nr-root .nf-in { animation: none; opacity: 1; transform: none; }
  #nr-root .nf-digit, #nr-root .nf-zero,
  #nr-root .nf-orbit, #nr-root .nf-ring-dash,
  #nr-root .nf-cursor,
  #nr-root .nf .blob.b1, #nr-root .nf .blob.b2 { animation: none; }
}

/* =====================================================================
   PAGE CONSTRUCTOR (Wave 2) — per-section colors + layout options.
   Additive only; scoped under #nr-root. Driven by the guarded inline
   style="--sec-*" emitted from section.config (see seo/netroom/_sec_style.html)
   and the whitelisted nr-sec--* / nr-grid--cols-* classes. Nothing above
   is modified; these rules only take effect when a section opts in.
   ===================================================================== */

/* Heading colors: landing H2 / H3 / stat-num / eyebrow use .grad-text
   (background:var(--grad); -webkit-text-fill-color:transparent), so a plain
   color: would be invisible. Override the gradient + text-fill when the
   section carries --sec-heading. */
#nr-root section[style*="--sec-heading"] .t-h2,
#nr-root section[style*="--sec-heading"] .t-h3,
#nr-root section[style*="--sec-heading"] .grad-text {
  color: var(--sec-heading) !important;
  -webkit-text-fill-color: var(--sec-heading) !important;
  background: none !important;
}

/* Body / lead text follow --sec-fg when the section opts in. */
#nr-root section[style*="--sec-fg"] .t-lead,
#nr-root section[style*="--sec-fg"] .t-body { color: var(--sec-fg); }

/* Accent recolors the primary button background within the section. */
#nr-root section[style*="--sec-accent"] .btn-primary { background: var(--sec-accent); }

/* Vertical padding scale (whitelisted: compact|normal|spacious). */
#nr-root .nr-sec--pad-compact { padding-top: 40px; padding-bottom: 40px; }
#nr-root .nr-sec--pad-normal { padding-top: 80px; padding-bottom: 80px; }
#nr-root .nr-sec--pad-spacious { padding-top: 140px; padding-bottom: 140px; }

/* Grid column count override (whitelisted: 2|3|4). */
#nr-root .nr-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
#nr-root .nr-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
#nr-root .nr-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Inner max-width override (whitelisted: narrow|normal|wide). */
#nr-root .nr-sec--mw-narrow { max-width: 680px; margin-left: auto; margin-right: auto; }
#nr-root .nr-sec--mw-normal { max-width: 1080px; margin-left: auto; margin-right: auto; }
#nr-root .nr-sec--mw-wide { max-width: 1320px; margin-left: auto; margin-right: auto; }

@media (max-width: 1040px) {
  #nr-root .nr-grid--cols-3, #nr-root .nr-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #nr-root .nr-grid--cols-2, #nr-root .nr-grid--cols-3, #nr-root .nr-grid--cols-4 { grid-template-columns: 1fr; }
  #nr-root .nr-sec--pad-spacious { padding-top: 80px; padding-bottom: 80px; }
  #nr-root .nr-sec--pad-normal { padding-top: 56px; padding-bottom: 56px; }
}

/* =====================================================================
   PAGE CONSTRUCTOR (Wave 3) — typography / border & shape / background.
   Additive only; scoped under #nr-root. Driven by the whitelisted
   nr-sec--type/text/weight/case-*, nr-border--*, nr-shadow--*, nr-sec--bw-*
   classes emitted from section.config (see seo/netroom/_sec_util_class.html)
   plus validated gradient/image/overlay inline style (see _sec_style.html).
   Every value is server-validated against a strict enum / color / url / float
   gate before it can reach a class name or declaration. Nothing above is
   modified; these rules only apply when a section opts in.
   ===================================================================== */

/* Design tokens (gradients reuse the brand stops). */
#nr-root {
  --nr-heading-xs: clamp(1.1rem, 2vw, 1.4rem);
  --nr-heading-sm: clamp(1.4rem, 2.5vw, 1.9rem);
  --nr-heading-md: clamp(1.8rem, 3.2vw, 2.4rem);
  --nr-heading-lg: clamp(2.2rem, 4vw, 3rem);
  --nr-heading-xl: clamp(2.6rem, 5vw, 3.6rem);
  --nr-text-xs: clamp(.8rem, 1vw, .9rem);
  --nr-text-sm: clamp(.9rem, 1.2vw, 1rem);
  --nr-text-md: clamp(1rem, 1.4vw, 1.1rem);
  --nr-text-lg: clamp(1.15rem, 1.7vw, 1.35rem);
  --nr-text-xl: clamp(1.4rem, 2vw, 1.7rem);
  --nr-r-sm: 8px; --nr-r-md: 12px; --nr-r-lg: 16px; --nr-r-xl: 24px;
  --nr-shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --nr-shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --nr-shadow-lg: 0 12px 32px rgba(0,0,0,.14);
  --nr-grad-brand: linear-gradient(135deg, #b37aff, #6f3fd8);
  --nr-grad-sunset: linear-gradient(135deg, #ff7a59, #ffc266);
  --nr-grad-aurora: linear-gradient(135deg, #9ee7c7, #b37aff);
  --nr-grad-ink: linear-gradient(135deg, #1b1b22, #34343f);
}

/* Heading size override (whitelisted: xs|sm|md|lg|xl). */
#nr-root .nr-sec--type-xs .t-h2, #nr-root .nr-sec--type-xs .t-display { font-size: var(--nr-heading-xs); line-height: 1.1; }
#nr-root .nr-sec--type-sm .t-h2, #nr-root .nr-sec--type-sm .t-display { font-size: var(--nr-heading-sm); line-height: 1.1; }
#nr-root .nr-sec--type-md .t-h2, #nr-root .nr-sec--type-md .t-display { font-size: var(--nr-heading-md); line-height: 1.1; }
#nr-root .nr-sec--type-lg .t-h2, #nr-root .nr-sec--type-lg .t-display { font-size: var(--nr-heading-lg); line-height: 1.1; }
#nr-root .nr-sec--type-xl .t-h2, #nr-root .nr-sec--type-xl .t-display { font-size: var(--nr-heading-xl); line-height: 1.1; }

/* Body / lead text size override (whitelisted: xs|sm|md|lg|xl). */
#nr-root .nr-sec--text-xs .t-lead, #nr-root .nr-sec--text-xs .t-body { font-size: var(--nr-text-xs); }
#nr-root .nr-sec--text-sm .t-lead, #nr-root .nr-sec--text-sm .t-body { font-size: var(--nr-text-sm); }
#nr-root .nr-sec--text-md .t-lead, #nr-root .nr-sec--text-md .t-body { font-size: var(--nr-text-md); }
#nr-root .nr-sec--text-lg .t-lead, #nr-root .nr-sec--text-lg .t-body { font-size: var(--nr-text-lg); }
#nr-root .nr-sec--text-xl .t-lead, #nr-root .nr-sec--text-xl .t-body { font-size: var(--nr-text-xl); }

/* Font-weight override (whitelisted: 400|500|600|700|800) — class only. */
#nr-root .nr-sec--weight-400 .t-h2, #nr-root .nr-sec--weight-400 .t-h3, #nr-root .nr-sec--weight-400 .t-lead, #nr-root .nr-sec--weight-400 .t-body, #nr-root .nr-sec--weight-400 .t-display { font-weight: 400; }
#nr-root .nr-sec--weight-500 .t-h2, #nr-root .nr-sec--weight-500 .t-h3, #nr-root .nr-sec--weight-500 .t-lead, #nr-root .nr-sec--weight-500 .t-body, #nr-root .nr-sec--weight-500 .t-display { font-weight: 500; }
#nr-root .nr-sec--weight-600 .t-h2, #nr-root .nr-sec--weight-600 .t-h3, #nr-root .nr-sec--weight-600 .t-lead, #nr-root .nr-sec--weight-600 .t-body, #nr-root .nr-sec--weight-600 .t-display { font-weight: 600; }
#nr-root .nr-sec--weight-700 .t-h2, #nr-root .nr-sec--weight-700 .t-h3, #nr-root .nr-sec--weight-700 .t-lead, #nr-root .nr-sec--weight-700 .t-body, #nr-root .nr-sec--weight-700 .t-display { font-weight: 700; }
#nr-root .nr-sec--weight-800 .t-h2, #nr-root .nr-sec--weight-800 .t-h3, #nr-root .nr-sec--weight-800 .t-lead, #nr-root .nr-sec--weight-800 .t-body, #nr-root .nr-sec--weight-800 .t-display { font-weight: 800; }

/* Text-transform override (whitelisted: upper|lower|capitalize; "none" skipped). */
#nr-root .nr-sec--case-upper .t-h2, #nr-root .nr-sec--case-upper .t-h3, #nr-root .nr-sec--case-upper .t-lead, #nr-root .nr-sec--case-upper .t-body, #nr-root .nr-sec--case-upper .t-display { text-transform: uppercase; }
#nr-root .nr-sec--case-lower .t-h2, #nr-root .nr-sec--case-lower .t-h3, #nr-root .nr-sec--case-lower .t-lead, #nr-root .nr-sec--case-lower .t-body, #nr-root .nr-sec--case-lower .t-display { text-transform: lowercase; }
#nr-root .nr-sec--case-capitalize .t-h2, #nr-root .nr-sec--case-capitalize .t-h3, #nr-root .nr-sec--case-capitalize .t-lead, #nr-root .nr-sec--case-capitalize .t-body, #nr-root .nr-sec--case-capitalize .t-display { text-transform: capitalize; }

/* Corner radius (whitelisted: sm|md|lg|xl|pill; "none" skipped). */
#nr-root .nr-border--sm { border-radius: var(--nr-r-sm); }
#nr-root .nr-border--md { border-radius: var(--nr-r-md); }
#nr-root .nr-border--lg { border-radius: var(--nr-r-lg); }
#nr-root .nr-border--xl { border-radius: var(--nr-r-xl); }
#nr-root .nr-border--pill { border-radius: 999px; }

/* Box shadow (whitelisted: sm|md|lg; "none" skipped). */
#nr-root .nr-shadow--sm { box-shadow: var(--nr-shadow-sm); }
#nr-root .nr-shadow--md { box-shadow: var(--nr-shadow-md); }
#nr-root .nr-shadow--lg { box-shadow: var(--nr-shadow-lg); }

/* Border width (whitelisted: 1|2|3; "none" skipped). Color comes from the
   validated inline border-color; falls back to currentColor when unset. */
#nr-root [class*="nr-sec--bw-"] { border-color: currentColor; }
#nr-root .nr-sec--bw-1 { border-style: solid; border-width: 1px; }
#nr-root .nr-sec--bw-2 { border-style: solid; border-width: 2px; }
#nr-root .nr-sec--bw-3 { border-style: solid; border-width: 3px; }

/* Background-image dark overlay (only emitted when bg_image + overlay_opacity).
   --nr-ov is a server-validated float in [0,1]; the ::before sits under content. */
#nr-root .nr-sec--has-overlay { position: relative; }
#nr-root .nr-sec--has-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, var(--nr-ov, 0));
  pointer-events: none;
}
#nr-root .nr-sec--has-overlay > * { position: relative; }

/* =====================================================================
   Page Constructor — content-primitives wave (additive, #nr-root-scoped).
   New placeable blocks: h1 / h2 / p / faq / advantages, plus a font-family
   class shared with richtext. Every class here is driven by a server-validated
   enum (font_family / cols) emitted from section.config; nothing above is
   modified and the homepage never references these partials. Inline SVG only.
   ===================================================================== */

/* Font family (whitelisted: sans|serif|mono|grotesk|editorial) — class only,
   never inline. Applies to the section wrapper and its .t-* text descendants.
   sans/mono are the webfonts already loaded by _dynamic_base.html; serif /
   grotesk / editorial degrade to safe system stacks (no extra network font). */
#nr-root .nr-font--sans,
#nr-root .nr-font--sans .t-display, #nr-root .nr-font--sans .t-h2, #nr-root .nr-font--sans .t-h3, #nr-root .nr-font--sans .t-lead, #nr-root .nr-font--sans .t-body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#nr-root .nr-font--mono,
#nr-root .nr-font--mono .t-display, #nr-root .nr-font--mono .t-h2, #nr-root .nr-font--mono .t-h3, #nr-root .nr-font--mono .t-lead, #nr-root .nr-font--mono .t-body { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; }
#nr-root .nr-font--serif,
#nr-root .nr-font--serif .t-display, #nr-root .nr-font--serif .t-h2, #nr-root .nr-font--serif .t-h3, #nr-root .nr-font--serif .t-lead, #nr-root .nr-font--serif .t-body { font-family: Georgia, "Times New Roman", "Noto Serif", serif; }
#nr-root .nr-font--grotesk,
#nr-root .nr-font--grotesk .t-display, #nr-root .nr-font--grotesk .t-h2, #nr-root .nr-font--grotesk .t-h3, #nr-root .nr-font--grotesk .t-lead, #nr-root .nr-font--grotesk .t-body { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; }
#nr-root .nr-font--editorial,
#nr-root .nr-font--editorial .t-display, #nr-root .nr-font--editorial .t-h2, #nr-root .nr-font--editorial .t-h3, #nr-root .nr-font--editorial .t-lead, #nr-root .nr-font--editorial .t-body { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }

/* Primitive wrappers (h1 / h2 / p). Lean — spacing comes from .section and the
   optional nr-sec--pad-* class; the wrap inherits text-align from inline style. */
#nr-root .nr-prim__wrap { width: 100%; }
#nr-root .nr-prim--h1 .t-display, #nr-root .nr-prim--h2 .t-h2 { margin: 0; }
#nr-root .nr-prim--p .t-body { margin: 0; }
/* Honour the wrap's own text-align for the centered/right max-width cases. */
#nr-root .nr-prim__wrap[style*="center"] { margin-left: auto; margin-right: auto; }

/* FAQ accordion (native details/summary — accessible, no JS). */
#nr-root .nr-faq__list { display: flex; flex-direction: column; gap: 12px; }
#nr-root .nr-faq__item {
  border: 1px solid var(--line);
  border-radius: var(--nr-r-md, 12px);
  background: var(--bg-2);
  overflow: hidden;
}
#nr-root .nr-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 600;
  line-height: 1.3;
  /* default question size; nr-sec--text-* on the summary overrides via the rule below */
  font-size: 18px;
  color: var(--fg);
}
#nr-root .nr-faq__q::-webkit-details-marker { display: none; }
/* Custom chevron marker using the accent (falls back to currentColor). */
#nr-root .nr-faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--sec-accent, currentColor);
  border-bottom: 2px solid var(--sec-accent, currentColor);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
#nr-root .nr-faq__item[open] .nr-faq__q::after { transform: rotate(-135deg); }
#nr-root .nr-faq__a {
  padding: 0 22px 18px;
  line-height: 1.6;
  color: var(--fg-dim);
}
/* Per-element size overrides for faq (q_size / a_size -> nr-sec--text-*). The
   generic nr-sec--text-* rule above only targets .t-lead/.t-body, so map the
   same vars onto the faq question/answer hooks here. */
#nr-root .nr-faq__q.nr-sec--text-xs { font-size: var(--nr-text-xs); }
#nr-root .nr-faq__q.nr-sec--text-sm { font-size: var(--nr-text-sm); }
#nr-root .nr-faq__q.nr-sec--text-md { font-size: var(--nr-text-md); }
#nr-root .nr-faq__q.nr-sec--text-lg { font-size: var(--nr-text-lg); }
#nr-root .nr-faq__q.nr-sec--text-xl { font-size: var(--nr-text-xl); }
#nr-root .nr-faq__a.nr-sec--text-xs { font-size: var(--nr-text-xs); }
#nr-root .nr-faq__a.nr-sec--text-sm { font-size: var(--nr-text-sm); }
#nr-root .nr-faq__a.nr-sec--text-md { font-size: var(--nr-text-md); }
#nr-root .nr-faq__a.nr-sec--text-lg { font-size: var(--nr-text-lg); }
#nr-root .nr-faq__a.nr-sec--text-xl { font-size: var(--nr-text-xl); }

/* Advantages grid of cards (cols whitelisted: 2|3|4). */
#nr-root .nr-adv__grid { display: grid; gap: 20px; }
#nr-root .nr-adv--cols-2 { grid-template-columns: repeat(2, 1fr); }
#nr-root .nr-adv--cols-3 { grid-template-columns: repeat(3, 1fr); }
#nr-root .nr-adv--cols-4 { grid-template-columns: repeat(4, 1fr); }
#nr-root .nr-adv__card {
  border: 1px solid var(--line);
  border-radius: var(--nr-r-lg, 16px);
  background: var(--bg-2);
  padding: 26px 24px;
}
#nr-root .nr-adv__icon {
  width: 40px; height: 40px;
  object-fit: contain;
  margin-bottom: 14px;
  display: block;
}
#nr-root .nr-adv__grid[style*="center"] .nr-adv__icon { margin-left: auto; margin-right: auto; }
#nr-root .nr-adv__title.t-h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.25; }
#nr-root .nr-adv__desc.t-body { margin: 0; line-height: 1.6; }

/* Responsive: collapse the advantages grid on narrow screens (matches the
   existing 640px breakpoint pattern). */
@media (max-width: 979px) {
  #nr-root .nr-adv--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #nr-root .nr-adv--cols-2,
  #nr-root .nr-adv--cols-3,
  #nr-root .nr-adv--cols-4 { grid-template-columns: 1fr; }
  #nr-root .nr-faq__q { padding: 14px 16px; }
  #nr-root .nr-faq__a { padding: 0 16px 14px; }
  #nr-root .nr-adv__card { padding: 20px 18px; }
}

/* =============================================================
 * DEVELOPERS page (/developers/, /ru/developers/) — документация
 * публичного API. Префикс .nr-dev-, только токены, объявленные выше;
 * светлая тема наследуется через переменные, литеральные цвета есть
 * лишь у бейджей методов (переопределены для [data-theme="light"]).
 * ============================================================= */
#nr-root .nr-dev-hero { padding: 104px 0 40px; }
#nr-root .nr-dev-hero .crumbs { margin-bottom: 24px; }
#nr-root .nr-dev-hero h1.t-h1 { margin: 20px 0 16px; text-wrap: balance; }
#nr-root .nr-dev-hero .t-lead { max-width: 760px; }
#nr-root .nr-dev-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
#nr-root .nr-dev-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-top: 40px;
}
#nr-root .nr-dev-fact {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
#nr-root .nr-dev-fact-k {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint);
}
#nr-root .nr-dev-fact-v { font-size: 14px; color: var(--fg); overflow-wrap: anywhere; }

/* Строка-оглавление под hero — якоря по разделам документации. */
#nr-root .nr-dev-toc-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#nr-root .nr-dev-toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; }
#nr-root .nr-dev-toc a {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-1);
  color: var(--fg-dim); font-size: 13px;
  transition: color var(--nr-motion-base) var(--ease), border-color var(--nr-motion-base) var(--ease);
}
#nr-root .nr-dev-toc a:hover { color: var(--fg); border-color: var(--line-2); }

/* Секции. Якорь ведёт на секцию, поэтому отступ прокрутки — на ней. */
#nr-root .nr-dev-section { padding: 56px 0 8px; scroll-margin-top: 72px; }
#nr-root .nr-dev-section h2.t-h2 { margin: 0 0 14px; }
#nr-root .nr-dev-final { padding: 72px 0 8px; }

/* Заголовок эндпоинта: бейдж метода + путь. */
#nr-root .nr-dev-endpoint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
#nr-root .nr-dev-endpoint > code {
  font-family: var(--font-mono); font-size: 15px;
  color: var(--fg); overflow-wrap: anywhere;
}
#nr-root .nr-dev-method {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid;
}
#nr-root .nr-dev-method--get {
  color: var(--a4);
  border-color: rgba(158, 231, 199, 0.35);
  background: rgba(158, 231, 199, 0.08);
}
#nr-root .nr-dev-method--post {
  color: var(--a1);
  border-color: rgba(179, 122, 255, 0.35);
  background: rgba(179, 122, 255, 0.10);
}
#nr-root[data-theme="light"] .nr-dev-method--get {
  color: #2d8a64;
  border-color: rgba(70, 160, 120, 0.35);
  background: rgba(70, 160, 120, 0.08);
}
#nr-root[data-theme="light"] .nr-dev-method--post {
  color: #6f3fd8;
  border-color: rgba(111, 63, 216, 0.30);
  background: rgba(111, 63, 216, 0.07);
}

/* Проза документации: абзацы, списки, ссылки, врезной код. */
#nr-root .nr-dev-prose { color: var(--fg-dim); font-size: 15px; line-height: 1.7; }
#nr-root .nr-dev-prose p { margin: 0 0 14px; }
#nr-root .nr-dev-prose ul { margin: 0 0 16px; padding-left: 20px; }
#nr-root .nr-dev-prose li { margin: 0 0 8px; }
#nr-root .nr-dev-prose li::marker { color: var(--fg-faint); }
#nr-root .nr-dev-prose a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: rgba(var(--scrim-rgb), 0.25);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--nr-motion-base) var(--ease);
}
#nr-root .nr-dev-prose a:hover { text-decoration-color: var(--a2); }
#nr-root .nr-dev-prose h3 {
  color: var(--fg); font-size: 18px; font-weight: 600;
  letter-spacing: -0.005em; margin: 32px 0 10px;
}
#nr-root .nr-dev-prose h4 {
  color: var(--fg); font-size: 15px; font-weight: 600;
  margin: 22px 0 6px;
}
#nr-root .nr-dev-prose code,
#nr-root .nr-dev-table code,
#nr-root .nr-dev-chiprow code {
  font-family: var(--font-mono); font-size: 12.5px;
  padding: 1px 6px; border-radius: 6px;
  background: rgba(var(--scrim-rgb), 0.06);
  border: 1px solid var(--line);
  color: var(--fg);
  overflow-wrap: anywhere;
}
#nr-root .nr-dev-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }

/* Блоки кода: подпись + pre>code с горизонтальным скроллом внутри рамки. */
#nr-root .nr-dev-code {
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-1);
  overflow: hidden;
}
#nr-root .nr-dev-code-label {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-faint);
  background: rgba(var(--scrim-rgb), 0.03);
}
#nr-root .nr-dev-code pre {
  margin: 0; padding: 16px 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#nr-root .nr-dev-code pre > code {
  display: block;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  color: var(--fg);
  white-space: pre;
  /* Сбрасываем инлайновое оформление .nr-dev-prose code — это блок, не чип. */
  padding: 0; border: 0; border-radius: 0; background: none;
  overflow-wrap: normal;
}

/* Таблицы параметров: скролл — внутри собственной рамки, не у страницы. */
#nr-root .nr-dev-table-wrap {
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#nr-root .nr-dev-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
#nr-root .nr-dev-table th {
  text-align: left; padding: 10px 14px;
  background: rgba(var(--scrim-rgb), 0.04);
  color: var(--fg); font-weight: 600; font-size: 13px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
#nr-root .nr-dev-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-dim);
  vertical-align: top;
}
#nr-root .nr-dev-table tbody tr:last-child td { border-bottom: 0; }

/* Шаги быстрого старта. */
#nr-root .nr-dev-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0 8px; }
#nr-root .nr-dev-step {
  padding: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
#nr-root .nr-dev-step-num {
  display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em;
}
#nr-root .nr-dev-step h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--fg); }
#nr-root .nr-dev-step p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fg-dim); }

@media (max-width: 1040px) {
  #nr-root .nr-dev-hero { padding-top: 88px; }
  #nr-root .nr-dev-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #nr-root .nr-dev-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #nr-root .nr-dev-hero { padding-top: 24px; }
  #nr-root .nr-dev-facts { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  #nr-root .nr-dev-hero-actions .btn { width: 100%; justify-content: center; }
  #nr-root .nr-dev-section { padding: 40px 0 4px; }
  #nr-root .nr-dev-code pre { padding: 14px; }
  #nr-root .nr-dev-table th, #nr-root .nr-dev-table td { padding: 9px 12px; }
}

/* ── Vendor hub (/models/<vendor>/) — вендорные страницы-хабы ─────────── */
#nr-root .nrvh-ident { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
#nr-root .nrvh-cat-count { font-family: var(--font-mono); font-size: 14px; font-weight: 400; color: var(--fg-dim); margin-left: 10px; }
#nr-root a.filter-chip { text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }
#nr-root .filter-row.nrvh-chips { justify-content: flex-start; margin: 0; }
#nr-root .nrvh-ident .eyebrow { align-self: center; margin: 0; }

/* iOS Safari font boosting inflated the hero type on iPhones (there was no
   text-size-adjust anywhere in this sheet) — pin it. */
html.nr-scope { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Speshu-style hero: centered stack + wide composer ──────────────────────
   The landing hero (2026-08-27) is a single centered column: H1, lead,
   voice-over, then the demo widget in WIDE mode (.studio-wide — no card
   chrome; chips row, full-width pill bar, the chat canvas unfolds under the
   bar after the first message), CTA buttons after. Keep this block ABOVE the
   dock section: when the nodes are reparented into #nr-dock they leave the
   .studio-wide subtree, and the dock rules below must win for anything that
   still overlaps. */
#nr-root .hero-stack { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
/* The hero IS the first screen: exactly one viewport tall on any device,
   content centered between the sticky nav and the anchored composer pill
   (its zone is the bottom padding). margin:auto centering instead of
   align-items so an overflowing short viewport degrades to scroll, not to
   clipped-off content. UA h1 margins (~48px each side at display size) are
   killed — they were the hole between the H1 and the lead. */
#nr-root .hero--stack {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  padding: 96px 0 calc(56px + env(safe-area-inset-bottom, 0px));
}
#nr-root .hero--stack > .container { width: 100%; margin: auto; }
#nr-root .hero-stack .hero-h1 { margin: 0; }
#nr-root .hero-stack .hero-lead { margin: 18px auto 0; max-width: 640px; text-wrap: balance; }
#nr-root .hero-stack .hero-voice { margin-top: 14px; max-width: 620px; }
#nr-root .hero-stack .hero-copy > .hero-reassure { margin-top: 14px; max-width: 620px; margin-left: auto; margin-right: auto; }
@media (max-height: 760px) {
  #nr-root .hero--stack { padding-top: 76px; padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
  #nr-root .hero-stack .hero-actions { margin-top: 22px; }
  /* Height-aware type: on short-but-wide windows the vw-driven display size
     is what pushes the hero past one screen. */
  #nr-root .hero--stack .hero-h1 { font-size: clamp(30px, 7vh, 71px); }
  #nr-root .hero--stack .hero-lead { font-size: 16px; }
}
#nr-root .hero-stack .hero-copy { text-align: center; }
#nr-root .hero-stack .hero-h1 { text-align: center; }
#nr-root .hero-stack .hero-voice { margin-left: auto; margin-right: auto; text-align: center; }
#nr-root .hero-stack .hero-actions { justify-content: center; margin-top: 28px; }

#nr-root .studio-wide {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  overflow: visible;
  margin-top: 34px;
}
#nr-root .studio-wide .studio-body { padding: 0; gap: 14px; }
#nr-root .studio-wide .studio-label { text-align: center; }
#nr-root .studio-wide .studio-chips { justify-content: center; order: 0; }
#nr-root .studio-wide .studio-bar {
  order: 1;
  padding: 10px 10px 10px 20px;
  border-radius: 999px;
  border-color: var(--line-2);
  background: var(--bg-1);
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.55);
}
#nr-root[data-theme="light"] .studio-wide .studio-bar { box-shadow: 0 18px 44px -30px rgba(0, 0, 0, 0.22); }
#nr-root .studio-wide .studio-input { font-size: 15px; padding: 10px 0; }
#nr-root .studio-wide .studio-send { width: 42px; height: 42px; border-radius: 999px; }
#nr-root .studio-wide .studio-canvas {
  order: 2;
  text-align: left;
  min-height: 0; max-height: min(44vh, 380px);
}
/* Collapsed until the first message; scoped to .studio-wide so the same
   canvas is always visible once it moves into the dock panel. */
#nr-root .studio-wide .studio-canvas:not(.has-content) { display: none; }
#nr-root .studio-wide .studio-canvas.has-content { animation: nr-canvas-in 0.34s var(--ease-entry); }
@keyframes nr-canvas-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
#nr-root .studio-wide .studio-cta { order: 3; text-align: left; }

@media (max-width: 640px) {
  #nr-root .studio-wide .studio-input { font-size: 16px; }
  #nr-root .studio-wide .studio-bar { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #nr-root .studio-wide .studio-canvas.has-content { animation: none; }
}

/* ── Composer dock: the pill anchored to the viewport bottom from the first
   frame. Shell: seo/netroom/_dock.html (included from _hero.html, next
   sibling of the .studio aside); behavior: setupDock() in netroom.js. The
   LIVE studio nodes (.studio-chips / .studio-canvas / .studio-bar form /
   .studio-cta) are absorbed into the shell at init, so most rules here
   restyle those classes in the .nr-dock context. The chat panel is an
   overlay ABOVE the pill (absolute, bottom: 100%; height capped in
   setOpen). z-index 45 — above content (1), below the sticky nav (50) and
   the lightboxes (1000+). */
#nr-root .nr-dock-home { position: relative; z-index: 20; margin-top: 26px; }
#nr-root .nr-dock { position: relative; text-align: left; }
#nr-root .nr-dock[hidden] { display: none !important; }
#nr-root .nr-dock-inner {
  position: relative;
  max-width: 880px; margin: 0 auto;
  will-change: transform;
  transition: transform 0.55s var(--ease-entry), opacity 0.3s var(--ease);
}
/* Anchored mode: the same dock, reparented to #nr-root and fixed to the
   viewport bottom as a compact pill. */
#nr-root .nr-dock--fixed {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; justify-content: center;
  padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
#nr-root .nr-dock--fixed .nr-dock-inner { pointer-events: auto; width: min(640px, 100%); }
/* The anchored pill overlays the page bottom — give the footer room. */
#nr-root:has(.nr-dock--fixed) main { padding-bottom: 84px; }

/* The bar — a tall two-row card (speshu-style): the input spans the top,
   the controls sit on the bottom row (model chip left; quota + send right).
   The absorbed form and its slot become display:contents so the input /
   quota / send join the model chip as items of ONE grid — no DOM changes,
   the form keeps submitting. */
#nr-root .nr-dock-bar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas:
    "input input input input"
    "model .     quota send";
  gap: 14px 10px;
  padding: 16px 16px 14px 20px;
  border-radius: 24px;
  border: 1px solid var(--line-2);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6), 0 4px 18px -8px rgba(0, 0, 0, 0.4);
  transition: border-color 0.2s var(--ease);
}
#nr-root .nr-dock-bar:focus-within { border-color: var(--line-2); }
#nr-root[data-theme="light"] .nr-dock-bar {
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.25), 0 4px 18px -10px rgba(0, 0, 0, 0.12);
}
#nr-root .nr-dock-form-slot,
#nr-root .nr-dock .studio-bar { display: contents; }
#nr-root .nr-dock .studio-input {
  grid-area: input;
  min-width: 0;
  font-size: 16px;
  padding: 2px 0 0;
}
#nr-root .nr-dock-model { grid-area: model; justify-self: start; }
#nr-root .nr-dock .studio-bar-quota { grid-area: quota; align-self: center; justify-self: end; }
#nr-root .nr-dock .studio-send { grid-area: send; justify-self: end; border-radius: 999px; width: 40px; height: 40px; }

/* Model pill inside the bar (mirrors the active .studio-chip) */
#nr-root .nr-dock-model {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px 0 9px;
  border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--fg);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
#nr-root .nr-dock-model:hover { background: var(--bg-3); border-color: var(--line-2); }
#nr-root .nr-dock-model-ico {
  width: 20px; height: 20px; border-radius: 50%;
  object-fit: cover; background: var(--bg-3); flex-shrink: 0;
}
#nr-root .nr-dock-model-ico[hidden] { display: none; }
#nr-root .nr-dock-model-label { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nr-root .nr-dock-model-chev {
  color: var(--fg-faint); flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}
#nr-root .nr-dock.is-open .nr-dock-model-chev { transform: rotate(180deg); }

/* Chat panel — an overlay above the bar (grid-rows 0fr -> 1fr, so it grows
   upward from its bottom anchor; visibility hides the collapsed sliver of
   border+shadow). The shell is a <section>: padding 0 also guards against
   the generic #nr-root section padding. */
#nr-root .nr-dock-panel {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px);
  padding: 0;
  display: grid; grid-template-rows: 0fr;
  visibility: hidden; opacity: 0; transform: translateY(8px);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.65);
  transition: grid-template-rows 0.32s var(--ease-entry), opacity 0.24s var(--ease),
              transform 0.32s var(--ease-entry), visibility 0s 0.32s;
}
#nr-root[data-theme="light"] .nr-dock-panel { box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.28); }
#nr-root .nr-dock.is-open .nr-dock-panel {
  grid-template-rows: 1fr;
  visibility: visible; opacity: 1; transform: none;
  transition-delay: 0s;
}
#nr-root .nr-dock-clip { overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
#nr-root .nr-dock-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px 10px;
}
#nr-root .nr-dock-title {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-faint);
}
#nr-root .nr-dock-min {
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--fg-dim); cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
#nr-root .nr-dock-min:hover { background: var(--bg-2); color: var(--fg); border-color: var(--line); }
#nr-root .nr-dock-min:focus-visible,
#nr-root .nr-dock-model:focus-visible { outline: 2px solid var(--g1); outline-offset: 2px; }
#nr-root .nr-dock-slot {
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 16px 16px;
  min-height: 0;
  overflow-y: auto;
}
/* When the panel is height-capped (setOpen measures the space above the
   bar), the canvas is the only child allowed to give way. */
#nr-root .nr-dock-head,
#nr-root .nr-dock .studio-chips,
#nr-root .nr-dock .studio-cta { flex-shrink: 0; }
#nr-root .nr-dock .studio-chips { justify-content: flex-start; }
#nr-root .nr-dock .studio-canvas {
  flex: 1 1 auto;
  min-height: 140px; height: 40vh; max-height: 420px;
}

/* The absorbed hero aside keeps serving hero-dialog (has-receipt) and the
   no-JS fallback; visually it is gone once the dock takes its nodes. */
#nr-root .studio.is-absorbed { display: none; }
/* hero-dialog toggles has-receipt on the aside; the register CTA strip now
   lives in the dock panel next door. */
#nr-root:has(.studio.has-receipt) .nr-dock .studio-cta { display: none; }

@media (max-width: 640px) {
  #nr-root .hero--stack { padding: 64px 0 calc(40px + env(safe-area-inset-bottom, 0px)); }
  /* Phone type: width-driven, and it must outrank the max-height:760px rule
     above (7vh on a 667px-tall iPhone SE is a 46px headline that wraps into
     six lines). Same specificity, later in the file. */
  #nr-root .hero--stack .hero-h1 { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.02; }
  #nr-root .hero--stack .hero-lead { font-size: 16px; line-height: 1.45; }
  #nr-root .hero-stack .hero-lead { margin-top: 14px; }
  #nr-root .hero-stack .hero-voice,
  #nr-root .hero-stack .hero-copy > .hero-reassure { margin-top: 12px; }
  #nr-root .hero-stack .hero-actions { margin-top: 20px; }
  #nr-root .nr-dock--fixed { padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* One horizontally scrollable chip row instead of a 3-row wrap: the capped
     panel has no vertical room to spare on phones. */
  #nr-root .nr-dock .studio-chips {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #nr-root .nr-dock .studio-chips::-webkit-scrollbar { display: none; }
  #nr-root .nr-dock-bar { padding: 12px 12px 10px 16px; border-radius: 20px; gap: 12px 8px; }
  #nr-root .nr-dock-home { margin-top: 20px; }
  #nr-root .nr-dock-model-label { max-width: 96px; }
  #nr-root .nr-dock .studio-canvas { height: 46vh; }
}

@media (prefers-reduced-motion: reduce) {
  #nr-root .nr-dock-inner,
  #nr-root .nr-dock-panel,
  #nr-root .nr-dock-model-chev { transition: none !important; }
}