/* =========================================================================
   DrutoScan Design System — Light theme
   Public marketing site — Phase 1 (re-themed)
   Same class names/structure as the dark version, so no HTML changed.
   ========================================================================= */

:root {
  /* ---- Surfaces ---- */
  --bg: #ffffff;
  --surface: #f8fafc;
  --surface-2: #eef2f7;
  --surface-3: #e6ecf3;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  /* ---- Text (WCAG-checked against --bg and --surface) ---- */
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #64748b;

  /* ---- Brand accent (decorative / UI only — never used to encode data) ---- */
  --accent: #2563eb;
  --accent-cyan: #3b82f6;
  --accent-soft: #eff6ff;
  --gradient-brand: linear-gradient(100deg, #2563eb 0%, #3b82f6 100%);

  /* ---- Logo brand tokens — sampled directly from the actual logo file's
     pixels (multiple points each, via a script, not eyeballed):
       navy:   #011739 / #00183C / #01183C (icon + "Druto" wordmark)
       blue:   #007AFC / #007AFC ("Scan" wordmark)
       orange: #FC6601 - #FE6900, ~10 samples ("B" arrow)
     Rounded to one clean representative value each below. These are
     DIFFERENT from --accent/--accent-cyan above — see the comparison
     note in the chat reply for exactly how much, and which one to
     treat as the source of truth going forward. ---- */
  --brand-navy: #00183C;
  --brand-blue: #007AFC;
  --brand-orange: #FC6601;

  /* ---- Status palette — dot/badge fills (vivid) vs text (darkened for contrast) ---- */
  --status-good: #10b981;
  --status-warning: #f59e0b;
  --status-serious: #f97316;
  --status-critical: #ef4444;
  --status-good-text: #047857;
  --status-warning-text: #b45309;
  --status-critical-text: #dc2626;

  /* ---- Type ---- */
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- Radius ---- */
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);

  --container-w: 1180px;
  color-scheme: light;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
/* Mobile horizontal-scroll safety net. body already had overflow-x:hidden;
   html didn't, and neither had a hard max-width:100% backstop. Belt and
   suspenders against anything (now or later) that pushes a descendant
   wider than the viewport. */
html, body { overflow-x: hidden; max-width: 100%; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Type scale ---- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-1); font-weight: 650; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.2vw, 3.4rem); letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.015em; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }
p { color: var(--text-2); }
.lede { font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: var(--text-2); line-height: 1.65; max-width: 62ch; }

.mono-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
}
.mono-tag::before { content: ""; width: 14px; height: 1px; background: var(--accent); display: inline-block; }

.text-muted { color: var(--text-3); }
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Layout ---- */
.container { max-width: var(--container-w); margin-inline: auto; padding-inline: var(--sp-5); }
.section { padding-block: var(--sp-9); position: relative; }
.section-tight { padding-block: var(--sp-7); }
.section-head { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 640px; margin-bottom: var(--sp-7); }
.section-head.center { margin-inline: auto; text-align: center; align-items: center; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.stack { display: flex; flex-direction: column; }
.cluster { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: var(--sp-7); }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  padding: 13px 24px; border-radius: var(--radius-sm);
  border: 1px solid transparent; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28); }
.btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37, 99, 235, 0.34); }
.btn-secondary { background: #fff; border-color: var(--line-strong); color: var(--text-1); }
.btn-secondary:hover { border-color: #93c5fd; background: var(--accent-soft); transform: translateY(-1px); }
.btn-ghost { color: var(--text-2); padding: 13px 10px; }
.btn-ghost:hover { color: var(--text-1); }
.btn-sm { padding: 9px 16px; font-size: 0.84rem; }
.btn-lg { padding: 16px 30px; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---- Badges / pills ---- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text-2);
}
.badge svg { width: 13px; height: 13px; }
.badge-planned { color: var(--status-warning-text); border-color: #fde3b0; background: #fffbeb; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-good { color: var(--status-good-text); } .status-good .status-dot, .status-dot.good { background: var(--status-good); }
.status-warning { color: var(--status-warning-text); } .status-warning .status-dot, .status-dot.warning { background: var(--status-warning); }
.status-critical { color: var(--status-critical-text); } .status-critical .status-dot, .status-dot.critical { background: var(--status-critical); }

/* ---- Panels / cards ---- */
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.service-card {
  padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4);
}
.service-card:hover { border-color: #cfe0fb; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-icon {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.service-icon svg { width: 22px; height: 22px; }
.service-card h3 { margin-top: var(--sp-1); }
.service-card p { font-size: 0.92rem; line-height: 1.6; }
.service-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--sp-3); }
.service-link { font-size: 0.86rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.service-link svg { width: 14px; height: 14px; }

.stat-tile { padding: var(--sp-5); text-align: left; }
.stat-tile .val { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 500; color: var(--text-1); }
.stat-tile .lbl { font-size: 0.78rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: var(--sp-1); }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.navbar { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--sp-5); }
/* Logo is now the brand image itself (icon + wordmark baked in) — no more
   separate icon-square + text markup, so no font/color styling needed
   here anymore. .logo-mark (the old icon-square span) and its svg rule
   are gone: nothing in the HTML uses that class any more. */
.logo { display: flex; align-items: center; }
.logo-img { display: block; height: 36px; width: auto; } /* desktop */
@media (max-width: 1024px) { .logo-img { height: 30px; } } /* mobile/tablet, per spec */
.footer-brand .logo-img { height: 32px; } /* footer uses its own fixed size regardless of breakpoint, per spec */

.nav-links { display: flex; align-items: center; gap: var(--sp-6); }
.nav-links a { font-size: 0.9rem; font-weight: 500; color: var(--text-2); transition: color 0.15s ease; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -26px; height: 2px; background: var(--gradient-brand); }
.nav-links-actions { display: none; } /* shown only inside the mobile slide-in panel, below */
.nav-backdrop { display: none; } /* mobile tap-outside-to-close overlay, below */

.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }
.nav-toggle { display: none; width: 40px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 1024px) {
  /* Breakpoint raised from 900px to 1024px per explicit spec, and to match
     .hero-grid's own 1024px collapse — the two were previously misaligned
     (nav went mobile at 900px, hero at 1024px), which isn't what caused
     the reported bug but was worth fixing anyway now that it's specified. */
  .nav-links {
    position: fixed; inset: 72px 0 0 0; z-index: 90; background: #fff;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: var(--sp-6) var(--sp-5); gap: var(--sp-5); overflow-y: auto;
    transform: translateX(100%); transition: transform 0.25s ease;
    /* visibility is a second, independent guarantee alongside the
       transform: even if the transform's computed offset were ever wrong
       for any reason, a hidden panel cannot become visible or tappable
       while closed. Belt-and-suspenders against a leaked nav item. */
    visibility: hidden;
  }
  .nav-links.open { transform: translateX(0); visibility: visible; }
  .nav-links a.active::after { display: none; }
  .nav-links-actions { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; margin-top: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
  .nav-actions .btn-secondary, .nav-actions .btn-primary { display: none; } /* both live inside the panel on mobile, not the top bar */
  .nav-toggle { display: flex; position: relative; z-index: 91; }
  .nav-backdrop {
    display: block; position: fixed; inset: 72px 0 0 0; z-index: 80;
    background: rgba(15, 23, 42, 0.35); opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* ---- Hero ---- */
.hero { padding-top: var(--sp-8); padding-bottom: var(--sp-8); position: relative; overflow: hidden; }
/* .hero::before (a large blurred blue glow) and .hero::after (a dashed
   decorative circle) have both been removed per feedback. ::before's own
   radial-gradient only reached full transparency at ~285px from its
   center, but its top:-180px position put .hero's own overflow:hidden
   clip boundary only ~130px from that same center — the clip was cutting
   through the glow while it was still ~8% opaque, which is exactly the
   abrupt seam that got reported. Removed rather than re-tuned: doing that
   precisely needs the hero section's real rendered height, which isn't
   knowable from source alone. Neither pseudo-element occupied layout
   space (both position:absolute/z-index:-1), so no spacer is needed. */

/* min-width:0 on every grid item: CSS Grid items default to min-width:auto,
   meaning a track sizes itself to the largest MIN-CONTENT among its
   children — and a replaced element (our <video>) can contribute its own
   intrinsic size (974px) to that calculation regardless of any width:100%
   set on it, unless explicitly overridden. Both hero-grid children get it
   defensively; .hero-motion-stage and .hero-motion (a flex container and
   a flex item respectively) get the same treatment below for the same
   reason — flex items have the identical default. */
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-title { margin-top: var(--sp-4); }
.hero-sub { margin-top: var(--sp-4); }
.hero-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.hero-note { margin-top: var(--sp-5); font-size: 0.82rem; color: var(--text-3); }

/* ---- Hero, tablet/mobile (<=1024px) ----
   CONSOLIDATED: this used to be split across two separate
   @media (max-width: 1024px) blocks that both touched .hero-grid — one
   setting gap (previously ~line 285), one setting grid-template-columns
   (previously ~line 314) — plus the base .hero-grid rule itself
   (previously ~line 306) supplying the desktop gap that the first block
   was overriding. Not a literal property fight (different properties),
   but genuinely duplicated blocks that belonged together. Merged into
   this single block, which now also centers all hero content — matching
   the repurpose.io reference — rather than just collapsing to one column
   and leaving everything left-aligned. Desktop (>=1025px) is simply
   whatever's NOT inside a max-width query above: two columns,
   left-aligned, untouched. */
@media (max-width: 1024px) {
  .hero { padding-top: var(--sp-6); padding-bottom: var(--sp-6); } /* balanced — was 64px/32px, now 32px/32px */
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); text-align: center; }
  .hero-actions { justify-content: center; } /* row stays centered through the 768-1024px tablet range; <=767px below additionally stacks + caps width */
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; justify-items: center; }
  .hero-stat { flex-direction: column; align-items: center; text-align: center; } /* icon above label, both centered in the cell, not left-aligned as a row */
  /* The animation column rendered as dead reserved space once centered
     mobile content no longer flowed around it — repurpose.io's own
     mobile reference has no equivalent element here at all. Hidden
     outright rather than resized, so there's nothing left to reserve. */
  .hero-motion-stage { display: none; }
  /* Smooth scale between mobile's fixed 40px (set below, <=767px) and
     desktop's clamp(2.3rem,4.2vw,3.4rem) (~43px at 1025px) — linear
     interpolation from (768px, 40px) to (1024px, 43px), so there's no
     jump at either edge of this range. */
  .hero h1 { font-size: clamp(40px, 31px + 1.172vw, 43px); line-height: 1.15; }
}
@media (max-width: 767px) {
  /* Blanket selector per spec: every hero descendant centered on the same
     axis, not just the handful of elements the previous round targeted
     individually — removes any chance of a stray left-aligned element
     breaking the shared center line. */
  .hero, .hero * { text-align: center; }
  .hero .container { padding-inline: 24px; max-width: 100%; } /* equal gutters; max-width:100% is a no-op here since --container-w already exceeds any phone width, kept because it was specified explicitly */
  .hero h1 { font-size: 40px; line-height: 1.15; }
  /* .lede's own clamp(1.02rem, 1.3vw, 1.15rem) already floors at ~16.3px
     on any real phone width (the vw term needs a ~1255px viewport before
     it even reaches that floor) — so this was never actually capable of
     rendering below 16px from any rule in this file. Set explicitly
     anyway, per spec, so it's unambiguous rather than "already fine
     because of how clamp happens to resolve." */
  .hero p { font-size: 16px; line-height: 1.6; max-width: 34ch; margin-inline: auto; }
  /* .hero-cta doesn't exist in this codebase's markup — the real class is
     .hero-actions (the buttons wrapper). Applying the spec's intent to
     the real selector. */
  .hero-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .hero-actions .btn { width: 100%; max-width: 320px; margin-inline: auto; }
  /* Real violation of "no text below 16px on mobile" found while checking
     this: .hero-stat span (the feature-item subtitle, e.g. "Content
     Scanning") is 11.5px in its base rule. */
  .hero-stat span { font-size: 16px; }
}

/* ---- Hero orbit visual ---- */
.hero-orbit { position: relative; aspect-ratio: 1 / 0.92; display: grid; place-items: center; }
.orbit-glow { position: absolute; width: 68%; height: 68%; background: radial-gradient(circle, rgba(37,99,235,0.16), rgba(37,99,235,0) 65%); filter: blur(4px); }
.orbit-ring { position: absolute; inset: 6% 4%; border: 1.5px dashed rgba(37,99,235,0.28); border-radius: 50%; transform: rotate(-12deg); }
.orbit-ring.inner { inset: 16% 14%; border-style: solid; border-color: rgba(37,99,235,0.16); }
.orbit-card {
  position: relative; z-index: 2; width: 40%; aspect-ratio: 0.78 / 1; border-radius: 24px;
  background: linear-gradient(170deg, rgba(219,234,254,0.95), rgba(255,255,255,0.9));
  border: 1.5px solid rgba(37,99,235,0.32);
  box-shadow: 0 22px 60px rgba(37,99,235,0.2), inset 0 0 40px rgba(255,255,255,0.7);
  display: grid; place-items: center;
}
.orbit-card svg { width: 46%; height: 46%; color: var(--accent); }
.orbit-badge {
  position: absolute; z-index: 3; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(15,23,42,0.18); color: #fff;
}
.orbit-badge svg { width: 24px; height: 24px; }
.ob-fb { background: #1877f2; top: 4%; left: 47%; }
.ob-x { background: #0f0f10; top: 22%; left: 12%; }
.ob-ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); top: 26%; right: 8%; }
.ob-tt { background: #0f0f10; top: 58%; left: 8%; }
.ob-yt { background: #ff0033; top: 58%; right: 6%; }
.orbit-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan); opacity: 0.55; }
@media (max-width: 1024px) { .hero-orbit { max-width: 420px; margin-inline: auto; } }

/* ---- Hero motion graphic — the video reads as icons floating on the
   page, not an embedded video.

   REVERTED (per direct feedback): the previous round's fade started at
   38% of the box radius. The actual icon ring in the footage sits at
   roughly 68-72% of that radius (measured off the source frame, then
   pushed slightly further out by the object-fit:cover + scale(1.05)
   crop) — so a fade starting at 38% was already partially masking the
   outer icons (Snapchat, YouTube Shorts, LinkedIn, Instagram), reading as
   washed-out. Worse, the wide semi-transparent band from 38-80% overlapped
   the footage's own decorative light-blue rings; mix-blend-mode:multiply
   on top of a partially-transparent mask in that same zone intensified
   that blue into a visible ring/halo — not a bug in blend-mode itself,
   but in how far out the fade started while blend-mode was still acting
   on non-empty content.

   Fix: the mask now stays fully opaque (#000, i.e. untouched) all the way
   to 80% — a deliberately larger margin than the 72% first suggested,
   because a raw-pixel scan through the actual footage (a horizontal
   strip through the frame's vertical center, sampled via ffmpeg) measured
   real icon content reaching out to ~69% of the box radius, and the
   scale(1.05) crop in .hero-motion-video pushes whatever's displayed
   outward by another ~5% on screen — putting the effective on-screen icon
   edge around ~72.5%, almost exactly AT a 72% fade start with no real
   margin. Fades only in an 80-100% band, measured to be empty background.
   `closest-side` is kept: it's an unrelated, unambiguous correctness fix
   (100% now means "distance to the real edge", not the mathematically-
   larger farthest-corner) and doesn't contribute to either reported
   problem — dropping it would only bring back the original faint-square-
   edge issue for no benefit.
   #F7F7FF is the exact color sampled from the real footage via a raw-pixel
   ffmpeg extraction (3 corners, 3 timestamps, byte-identical).
   .hero-motion-stage is just a centering/responsive-sizing wrapper.
   Replaces the orbit graphic that used to live in the hero-grid's right
   column; .hero-orbit itself is unused markup-side now, left in place in
   case it's reused elsewhere. ---- */
.hero-motion-stage {
  position: relative; width: 100%; max-width: 560px; min-width: 0; margin-inline: auto;
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.hero-motion {
  position: relative; width: 100%; max-width: 480px; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden;
  background: radial-gradient(circle closest-side at 50% 50%,
    #F7F7FF 0%, #F7F7FF 80%,
    rgba(247,247,255,0.7) 90%,
    rgba(247,247,255,0.3) 96%,
    transparent 100%);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%,
    #000 0%, #000 80%,
    rgba(0,0,0,0.7) 90%,
    rgba(0,0,0,0.3) 96%,
    transparent 100%);
          mask-image: radial-gradient(circle closest-side at 50% 50%,
    #000 0%, #000 80%,
    rgba(0,0,0,0.7) 90%,
    rgba(0,0,0,0.3) 96%,
    transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.hero-motion-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.05); /* crops the frame's hard edges */
  mix-blend-mode: multiply; /* swap to `darken` if multiply reads too dark on the icons themselves */
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
/* Belt-and-suspenders: the `controls` attribute is simply never set on the
   element, which is what actually removes the control bar — these rules
   only guard against it being toggled on some other way. */
.hero-motion-video::-webkit-media-controls,
.hero-motion-video::-webkit-media-controls-panel,
.hero-motion-video::-webkit-media-controls-start-playback-button {
  display: none !important; -webkit-appearance: none;
}
/* No <=1024px sizing rules for .hero-motion-stage/.hero-motion anymore —
   that element is display:none entirely at <=1024px now (see the
   consolidated hero media query above), so sizing it here would be dead
   CSS. These now only ever matter at >=1025px, where the base rules
   (max-width: 560px / 480px, a few dozen lines up) already apply. */
@media (prefers-reduced-motion: reduce) {
  .hero-motion-video { display: none; }
  .hero-motion { background: url('/media/landing-demo-poster.jpg') center/cover no-repeat; } /* still gets the same mask via .hero-motion's mask-image above */
}

/* ---- Hero honest-stat row (format matches a metrics row; content is capability claims, not invented numbers) ---- */
.hero-stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 40px; }
.hero-stat { display: flex; gap: 9px; align-items: flex-start; }
.hero-stat svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.hero-stat b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-1); }
.hero-stat span { font-size: 11.5px; color: var(--text-3); }

/* ---- Content Scanner showcase section ---- */
.ss-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-8); align-items: center; }
.ss-visual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.ss-post-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-md); }
.ss-post-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ss-post-head .dp-avatar { width: 30px; height: 30px; font-size: 0.7rem; background: linear-gradient(140deg, #60a5fa, #2563eb); }
.ss-post-head b { font-size: 0.8rem; display: block; }
.ss-post-head span { font-size: 0.65rem; color: var(--text-3); }
.ss-post-img { border-radius: 10px; overflow: hidden; aspect-ratio: 16/11; }
.ss-post-card > p { font-size: 0.8rem; margin-top: 12px; color: var(--text-2); }
.ss-risk-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow-md); margin-top: 26px; }
.ss-risk-card .mono-tag { font-size: 0.62rem; margin-bottom: 10px; }
.ss-score { font-family: var(--font-mono); font-size: 2.1rem; font-weight: 600; letter-spacing: -0.02em; margin: 2px 0; color: var(--text-1); }
.ss-score i { font-style: normal; font-size: 0.85rem; color: var(--text-3); font-weight: 500; }
.ss-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 10px 0 14px; }
.ss-bar span { display: block; height: 100%; border-radius: 99px; background: var(--gradient-brand); }
.ss-risk-list { display: grid; gap: 9px; }
.ss-risk-list li { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--text-2); }
.ss-risk-list b { font-weight: 600; font-size: 0.72rem; }
.ss-risk-list b.low { color: var(--status-good-text); }
.ss-risk-list b.med { color: var(--status-warning-text); }
.ss-rec { margin-top: 14px; background: var(--surface); border-radius: 9px; padding: 10px 11px; }
.ss-rec b { font-size: 0.68rem; display: block; margin-bottom: 2px; }
.ss-rec p { font-size: 0.66rem; color: var(--text-3); line-height: 1.45; margin: 0; }
.ss-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: var(--sp-6) 0; }
.ss-chip { text-align: center; }
.ss-chip .service-icon { width: 44px; height: 44px; margin: 0 auto 9px; }
.ss-chip .service-icon svg { width: 20px; height: 20px; }
.ss-chip span { font-size: 0.72rem; font-weight: 600; color: var(--text-2); }
@media (max-width: 1024px) { .ss-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
@media (max-width: 640px) { .ss-visual, .ss-chips { grid-template-columns: 1fr 1fr; } }

/* ---- "One Dashboard" showcase section ---- */
.dp-grid { display: grid; grid-template-columns: 0.82fr 1.4fr; gap: var(--sp-8); align-items: center; }
.dp-check-list { margin: var(--sp-6) 0 var(--sp-6); display: grid; gap: var(--sp-3); }
.dp-check-list li { display: flex; align-items: center; gap: 11px; font-size: 0.94rem; font-weight: 500; color: var(--text-1); }
.dp-check-list .tick { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.dp-check-list .tick svg { width: 11px; height: 11px; color: #fff; }

.dp-mock { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.dp-mock-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.dp-mock-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.03em; }
.dp-mock-brand .mark { width: 20px; height: 20px; border-radius: 6px; background: var(--gradient-brand); display: grid; place-items: center; color: #fff; }
.dp-mock-brand .mark svg { width: 12px; height: 12px; }
.dp-mock-user { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--text-3); }
.dp-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(140deg, #fbbf24, #f97316); display: grid; place-items: center; color: #fff; font-size: 0.6rem; font-weight: 700; }
.dp-badge-row { padding: 12px 18px 0; }
.dp-mock-body { display: grid; grid-template-columns: 148px 1fr; min-height: 320px; }
.dp-side { border-right: 1px solid var(--line); padding: 12px 8px; background: var(--surface); }
.dp-side a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 0.72rem; color: var(--text-3); font-weight: 500; }
.dp-side a svg { width: 13px; height: 13px; flex-shrink: 0; }
.dp-side a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dp-main { padding: 16px; }
.dp-main h4 { font-size: 0.82rem; margin-bottom: 12px; }
.dp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dp-kpi { border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.dp-kpi span { font-size: 0.6rem; color: var(--text-3); display: block; text-transform: uppercase; letter-spacing: 0.04em; }
.dp-kpi b { font-family: var(--font-mono); font-size: 1rem; letter-spacing: -0.01em; display: block; margin: 3px 0 1px; }
.dp-kpi em { font-style: normal; font-size: 0.6rem; color: var(--text-3); font-weight: 500; }
.dp-row { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; margin-top: 12px; }
.dp-panel { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.dp-panel h5 { margin: 0 0 8px; font-size: 0.7rem; font-weight: 600; }
.dp-chart { width: 100%; height: 100px; }
.dp-activity { display: grid; gap: 9px; }
.dp-activity li { display: flex; align-items: center; gap: 9px; }
.dp-dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.dp-dot svg { width: 9px; height: 9px; }
.dp-activity b { font-size: 0.68rem; font-weight: 600; display: block; }
.dp-activity span { font-size: 0.6rem; color: var(--text-3); }
@media (max-width: 1024px) { .dp-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
@media (max-width: 640px) { .dp-mock-body { grid-template-columns: 1fr; } .dp-side { display: none; } .dp-row, .dp-kpis { grid-template-columns: 1fr 1fr; } }

/* ---- Dashboard preview mock (hero, legacy — unused, kept for potential reuse) ---- */
.dash-mock { padding: var(--sp-5); box-shadow: var(--shadow-lg); }
.dash-mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.dash-mock-head .dots { display: flex; gap: 6px; }
.dash-mock-head .dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.dash-mock-title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-3); text-transform: uppercase; }
.dash-score { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.dash-score .num { font-family: var(--font-mono); font-size: 2.6rem; color: var(--text-1); font-weight: 600; }
.dash-score .of { font-family: var(--font-mono); color: var(--text-3); font-size: 1rem; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.dash-item { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-4); background: var(--surface); }
.dash-item .lbl { font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-2); }
.dash-item .row { display: flex; align-items: center; justify-content: space-between; }
.dash-item .row strong { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; }
.dash-bar { height: 4px; border-radius: var(--radius-pill); background: var(--line); margin-top: var(--sp-3); overflow: hidden; }
.dash-bar span { display: block; height: 100%; border-radius: var(--radius-pill); }
.dash-foot { margin-top: var(--sp-4); font-size: 0.74rem; color: var(--text-3); font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-good); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0.4);} 50% { opacity: 0.5; box-shadow: 0 0 0 6px rgba(16,185,129,0);} }
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }

/* ---- Platform strip ---- */
.platform-strip { padding-block: var(--sp-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.platform-strip-inner { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); flex-wrap: wrap; }
.platform-strip-inner .p-item { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 0.88rem; font-weight: 600; }
.platform-strip-inner svg { width: 18px; height: 18px; color: var(--text-3); }
.platform-note { text-align: center; font-size: 0.76rem; color: var(--text-3); margin-top: var(--sp-4); }

/* ---- Loop / steps (Discover -> Analyze -> Protect -> Act) ---- */
.loop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); position: relative; }
.loop-step { padding: var(--sp-5); }
.loop-step .idx { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); font-weight: 600; }
.loop-step h3 { margin-top: var(--sp-3); margin-bottom: var(--sp-3); }
.loop-step ul { display: flex; flex-direction: column; gap: 8px; }
.loop-step li { font-size: 0.86rem; color: var(--text-2); padding-left: 16px; position: relative; }
.loop-step li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--text-3); }
@media (min-width: 1025px) {
  .loop-grid::before {
    content: ""; position: absolute; top: 38px; left: 12%; right: 12%; height: 2px;
    background: linear-gradient(90deg, #bfdbfe, #93c5fd);
  }
}
@media (max-width: 1024px) { .loop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .loop-grid { grid-template-columns: 1fr; } }

/* ---- Numbered process (How it works) ---- */
.process-list { display: flex; flex-direction: column; }
.process-item { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-5); padding-block: var(--sp-6); border-top: 1px solid var(--line); }
.process-item:last-child { border-bottom: 1px solid var(--line); }
.process-item .idx { font-family: var(--font-mono); font-size: 1.4rem; color: var(--line-strong); font-weight: 600; }
.process-item h3 { margin-bottom: var(--sp-2); }
.process-item p { max-width: 60ch; }
@media (max-width: 640px) { .process-item { grid-template-columns: 40px 1fr; } .process-item .idx { font-size: 1.1rem; } }

/* ---- Use cases ---- */
.usecase-card { padding: var(--sp-5); }
.usecase-card .role { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: var(--sp-3); font-weight: 600; }
.usecase-card p { font-size: 0.94rem; }

.pricing-card { display: flex; flex-direction: column; padding: var(--sp-6); text-align: center; }
.pricing-card h3 { margin-bottom: 4px; }
.pricing-card .pricing-tagline { font-size: 0.86rem; color: var(--text-3); }
.pricing-card .pricing-price { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; color: var(--accent); margin: var(--sp-4) 0; }
.pricing-card .icon-list { text-align: left; flex: 1; margin-bottom: var(--sp-5); }

/* --- Social Publisher --- */
.social-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.social-cal-daylabel { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); text-align: center; padding-bottom: 6px; }
.social-cal-day { min-height: 86px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; background: var(--surface); }
.social-cal-day.other-month { opacity: 0.4; }
.social-cal-day.today { border-color: var(--accent); border-width: 2px; }
.social-cal-daynum { font-size: 0.76rem; color: var(--text-3); font-weight: 600; }
.social-cal-post { margin-top: 4px; padding: 3px 6px; border-radius: 4px; font-size: 0.7rem; background: var(--accent-soft); color: var(--accent); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .social-cal-day { min-height: 54px; } .social-cal-daynum { font-size: 0.68rem; } .social-cal-post { font-size: 0.62rem; } }

.social-platform-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 0.86rem; cursor: pointer; background: #fff; }
.social-platform-chip input { margin: 0; }
.social-platform-chip.checked { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.social-platform-chip svg, .social-platform-chip .sp-icon { width: 16px; height: 16px; flex-shrink: 0; }
.sp-preview-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 0.84rem; cursor: pointer; background: var(--panel-bg, #fff); color: var(--text-2); }
.sp-preview-tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sp-preview-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-4); }
.sp-preview-media { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-sm); margin-top: 8px; background: var(--surface); }
.social-account-card { padding: var(--sp-5); }
.social-media-tile { padding: var(--sp-4); text-align: center; }
.social-media-tile .thumb { width: 100%; aspect-ratio: 1; background: var(--surface); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-3); margin-bottom: 8px; overflow: hidden; }
.social-media-tile .thumb img, .social-media-tile .thumb video { width: 100%; height: 100%; object-fit: cover; }

/* ---- Content Risk Scanner ---- */
/* In-section 3-view tabs (Create & Scan / Risk Report / History) — lives
   entirely inside the single existing "Content Scanner" nav item, no new
   sidebar entries. */
.cs-tabs { display: flex; gap: 6px; margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.cs-tab { padding: 10px 16px; border: none; background: none; font-size: 0.88rem; font-weight: 600; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cs-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.cs-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.cs-view { display: none; }
.cs-view.active { display: block; }

/* Score bands reuse the site's existing 4-tone status palette (good /
   warning / serious / critical) for 4 of the 5 required bands, plus one
   additional in-between olive tone for "Mostly Safe" — the smallest
   possible additive extension of the existing semantic color system rather
   than inventing an unrelated palette. */
.cs-band-low { background: #ecfdf5; color: var(--status-good-text); }
.cs-band-mostly_safe { background: #f7fee7; color: #4d7c0f; }
.cs-band-medium { background: #fffbeb; color: var(--status-warning-text); }
.cs-band-high { background: #fff7ed; color: #c2410c; }
.cs-band-critical { background: #fef2f2; color: var(--status-critical-text); }

.cs-score-hero { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.cs-score-ring { width: 108px; height: 108px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cs-score-ring .num { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; line-height: 1; }
.cs-score-ring .of100 { font-size: 0.7rem; opacity: 0.7; }
.cs-band-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

.cs-subscore-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
@media (max-width: 900px) { .cs-subscore-grid { grid-template-columns: repeat(2, 1fr); } }
.cs-subscore { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cs-subscore .label { font-size: 0.76rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.cs-subscore .val { font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; margin-bottom: 8px; }
.cs-subscore .bar { height: 6px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.cs-subscore .bar span { display: block; height: 100%; border-radius: var(--radius-pill); }

.cs-compare { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); background: var(--accent-soft); margin-bottom: var(--sp-5); }
.cs-compare .stats { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-top: 6px; font-size: 0.86rem; }
.cs-compare .stats b { font-family: var(--font-mono); }

.cs-platform-card { border: 1px solid var(--line); border-radius: var(--radius-lg); margin-top: var(--sp-5); overflow: hidden; }
.cs-platform-head { display: flex; align-items: center; gap: 10px; padding: var(--sp-4) var(--sp-5); background: var(--surface); cursor: pointer; }
.cs-platform-head .sp-icon { width: 20px; height: 20px; }
.cs-platform-head .title { font-weight: 600; flex: 1; }
.cs-platform-head svg.chev { width: 16px; height: 16px; transition: transform 0.15s ease; margin-left: 4px; }
.cs-platform-card.open .cs-platform-head svg.chev { transform: rotate(180deg); }
.cs-platform-body { display: none; padding: var(--sp-5); }
.cs-platform-card.open .cs-platform-body { display: block; }

.cs-mode-badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); }
.cs-mode-badge.simulation { background: var(--surface); color: var(--text-3); }

.cs-issue { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-4); margin-top: var(--sp-3); }
.cs-issue-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-issue-sev { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 9px; border-radius: var(--radius-pill); }
.cs-issue-sev.low { background: #ecfdf5; color: var(--status-good-text); }
.cs-issue-sev.medium { background: #fffbeb; color: var(--status-warning-text); }
.cs-issue-sev.high { background: #fff7ed; color: #c2410c; }
.cs-issue-sev.critical { background: #fef2f2; color: var(--status-critical-text); }
.cs-issue-cat { font-size: 0.76rem; color: var(--text-3); text-transform: capitalize; }
.cs-issue-confidence { font-size: 0.74rem; color: var(--text-3); margin-left: auto; }
.cs-issue-explanation { font-size: 0.88rem; color: var(--text-2); margin: 8px 0 4px; }
.cs-issue-action { font-size: 0.82rem; color: var(--text-3); }
.cs-fix-box { margin-top: 10px; padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--surface); }
.cs-fix-box .row { font-size: 0.84rem; margin-bottom: 6px; }
.cs-fix-box .row b { color: var(--text-3); font-weight: 600; margin-right: 4px; }
.cs-fix-box .original { color: var(--status-critical-text); text-decoration: line-through; }
.cs-fix-box .suggested { color: var(--status-good-text); }
.cs-issue-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cs-issue.resolved { opacity: 0.55; }
.cs-issue-resolved-tag { font-size: 0.76rem; font-weight: 600; color: var(--status-good-text); }

.cs-publish-panel { margin-top: var(--sp-6); padding: var(--sp-6); }

/* ---- Report Center ---- */
.rc-view { display: none; }
.rc-view.active { display: block; }

.rc-stepper { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-6); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-4); }
.rc-step { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--text-3); padding: 6px 10px; border-radius: var(--radius-pill); }
.rc-step.active { color: var(--accent); background: var(--accent-soft); }
.rc-step.done { color: var(--status-good-text); }
.rc-step-num { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; flex-shrink: 0; }
.rc-step.active .rc-step-num { background: var(--accent); color: #fff; }
.rc-step.done .rc-step-num { background: var(--status-good); color: #fff; }
@media (max-width: 720px) { .rc-step span:not(.rc-step-num) { display: none; } }

.rc-step-panel { display: none; }
.rc-step-panel.active { display: block; }

.rc-analysis-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: 10px; }
.rc-analysis-grid .label { font-size: 0.74rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 4px; }
@media (max-width: 720px) { .rc-analysis-grid { grid-template-columns: repeat(2, 1fr); } }

.rc-confidence-pill { display: inline-flex; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; }
.rc-confidence-pill.high { background: #ecfdf5; color: var(--status-good-text); }
.rc-confidence-pill.medium { background: #fffbeb; color: var(--status-warning-text); }
.rc-confidence-pill.low { background: var(--surface); color: var(--text-3); }

.rc-evidence-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.86rem; }
.rc-evidence-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-evidence-row .meta { color: var(--text-3); font-size: 0.78rem; }

.rc-url-row { display: flex; gap: 8px; align-items: center; }
.rc-url-row input { flex: 1; }

.rc-progress-list { display: grid; gap: 10px; }
.rc-progress-item { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.rc-progress-item .dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; background: var(--surface); color: var(--text-3); }
.rc-progress-item.done .dot { background: var(--status-good); color: #fff; }
.rc-progress-item.current .dot { background: var(--accent); color: #fff; }
.rc-progress-item.done span:last-child { color: var(--text-1); }
.rc-progress-item:not(.done):not(.current) span:last-child { color: var(--text-3); }

.rc-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.rc-stat-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-4); background: var(--surface); }
.rc-stat-label { display: block; font-size: 0.76rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.rc-stat-val { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 1.4rem; }
@media (max-width: 720px) { .rc-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.rc-landing-tabs { display: flex; gap: 6px; margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.rc-landing-tab { padding: 10px 16px; border: none; background: none; font-size: 0.88rem; font-weight: 600; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rc-landing-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.rc-filter-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ---- FAQ accordion ---- */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { padding: var(--sp-4) var(--sp-5); cursor: pointer; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); font-weight: 600; font-family: var(--font-display); }
.faq-q svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; transition: transform 0.2s ease; }
.faq-item.open .faq-q svg { transform: rotate(180deg); color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; font-size: 0.92rem; }
.faq-item.open .faq-a { max-height: 300px; margin-top: var(--sp-3); }

/* ---- CTA band ---- */
.cta-band { padding: var(--sp-9) 0; text-align: center; position: relative; }
.cta-panel {
  padding: var(--sp-8) var(--sp-6); text-align: center;
  background: linear-gradient(115deg, #0b1739, #15265f 55%, #0d1c45);
  border: none; box-shadow: var(--shadow-lg); color: #fff;
}
.cta-panel h2 { max-width: 640px; margin-inline: auto; color: #fff; }
.cta-panel .lede { margin-inline: auto; text-align: center; color: #c3cee6; }
.cta-panel .mono-tag { color: #93c5fd; }
.cta-panel .mono-tag::before { background: #93c5fd; }
.cta-actions { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); flex-wrap: wrap; }
.cta-panel .btn-secondary { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: #fff; }
.cta-panel .btn-secondary:hover { background: rgba(255,255,255,0.16); }

/* ---- Forms ---- */
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label { font-size: 0.84rem; font-weight: 600; color: var(--text-1); }
.form-label .opt { font-weight: 400; color: var(--text-3); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 13px 14px; background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text-1); outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.84rem; color: var(--text-2); }
.form-check input { margin-top: 3px; }
.form-hint { font-size: 0.78rem; color: var(--text-3); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-msg { display: none; padding: var(--sp-4); border-radius: var(--radius-sm); font-size: 0.88rem; margin-top: var(--sp-4); }
.form-msg.show { display: block; }
.form-msg.success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }

/* ---- Content pages (legal / about / etc.) ---- */
.prose { max-width: 74ch; }
.prose h2 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-2); font-size: 1.05rem; }
.prose p, .prose li { margin-bottom: var(--sp-3); font-size: 0.96rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.page-hero { padding-top: var(--sp-8); padding-bottom: var(--sp-7); border-bottom: 1px solid var(--line); background: var(--surface); }
.page-hero .mono-tag { margin-bottom: var(--sp-4); }
.updated-note { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-3); margin-top: var(--sp-3); }

/* ---- Limitations / callout box ---- */
.callout { border: 1px solid #fde3b0; border-left: 3px solid var(--status-warning); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); background: #fffbeb; }
.callout strong { color: var(--text-1); }
.callout p { font-size: 0.9rem; margin: 0; color: var(--text-2); }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--line); padding-top: var(--sp-8); padding-bottom: var(--sp-6); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-7); }
.footer-brand p { margin-top: var(--sp-3); font-size: 0.88rem; max-width: 32ch; }
.footer-title { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: var(--sp-4); }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 0.88rem; color: var(--text-2); }
.footer-links a:hover { color: var(--accent); }
.footer-contact { display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-4); }
.footer-contact a { font-size: 0.86rem; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.footer-contact svg { width: 15px; height: 15px; color: var(--text-3); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--text-3); flex-wrap: wrap; gap: var(--sp-3); }
.footer-disclaimer { font-size: 0.76rem; color: var(--text-3); max-width: 70ch; margin-top: var(--sp-4); line-height: 1.6; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Reveal-on-scroll ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Misc ---- */
.divider { height: 1px; background: var(--line); border: none; }
.icon-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.icon-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--text-2); }
.icon-list svg { width: 16px; height: 16px; color: var(--status-good-text); margin-top: 2px; flex-shrink: 0; }
.kv-list dt { font-size: 0.74rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.kv-list dd { font-size: 0.92rem; color: var(--text-2); }

/* =========================================================================
   App shell — authenticated dashboard (customer app / admin)
   ========================================================================= */
.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: var(--surface); }
/* Hidden by default at every viewport width — only ever shown (via .open, added
   in the mobile media query below) when the mobile drawer is actually open.
   Without this base rule, the empty <div> defaults to display:block and becomes
   an unintended third grid item on desktop, pushing .app-sidebar and .app-main
   out of their intended 240px/1fr columns — this is the "blank dashboard" bug. */
.app-drawer-scrim { display: none; }
.app-sidebar { background: #fff; border-right: 1px solid var(--line); padding: var(--sp-5) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.app-sidebar .logo { padding: 0 var(--sp-3); margin-bottom: var(--sp-6); }
.app-nav-group { margin-top: var(--sp-4); }
.app-nav-group:first-child { margin-top: 0; }
.app-nav-label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding: 0 var(--sp-3); margin-bottom: var(--sp-2); }
.app-nav a, .app-nav button.app-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 500; color: var(--text-2); cursor: pointer; width: 100%; text-align: left; border: 0; background: none;
}
.app-nav a svg, .app-nav button.app-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-3); }
.app-nav a:hover, .app-nav button.app-nav-item:hover { background: var(--surface); color: var(--text-1); }
.app-nav a.active, .app-nav button.app-nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.app-nav a.active svg, .app-nav button.app-nav-item.active svg { color: var(--accent); }
.app-nav button.app-nav-item.locked { opacity: 0.55; cursor: not-allowed; }
.app-nav button.app-nav-item.locked svg:last-child { color: var(--text-3); }
.app-nav-item.app-nav-parent { color: var(--text-1); font-weight: 600; cursor: default; }
/* Report Center's parent label is a real destination (its landing page),
   unlike Account Recovery/Content Scanner/Multiple Publishing/Business
   Suite's purely-organizational parent labels — this variant keeps the
   same bold parent styling but restores a real pointer cursor and hover/
   active feedback, since document.querySelectorAll('.app-nav-item[data-
   target]') already attaches a click handler to it (that selector doesn't
   care about the .app-nav-parent class, only the presence of data-target). */
.app-nav-item.app-nav-parent.app-nav-clickable { cursor: pointer; }
.app-nav-item.app-nav-subitem { padding-left: 34px; font-size: 0.84rem; }
.app-nav-item.app-nav-subitem svg { width: 15px; height: 15px; }

/* Collapsible parent groups (Account Recovery, Content Scanner, Report
   Center, Multiple Publishing) — Brand Protection (flat) and Business
   Suite's single "Manage" item are never wrapped, so they're always
   visible with no toggle at all. */
.app-nav-item.app-nav-toggle { width: 100%; text-align: left; border: none; background: none; font-family: inherit; cursor: pointer; }
.app-nav-caret { display: inline-block; width: 10px; font-size: 0.7rem; color: var(--text-3); transition: transform 0.15s ease; }
.app-nav-toggle.expanded .app-nav-caret { transform: rotate(90deg); }
.app-nav-subgroup { display: none; }
.app-nav-subgroup.expanded { display: block; }

.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-topbar { height: 64px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-6); position: sticky; top: 0; z-index: 20; }
.app-topbar-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.app-user { display: flex; align-items: center; gap: var(--sp-3); font-size: 0.86rem; color: var(--text-2); }
.app-user .role-badge { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); }
.app-content { padding: var(--sp-6); flex: 1; }
.app-drawer-toggle { display: none; }

.app-section { display: none; }
.app-section.active { display: block; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.stat-card .lbl { font-size: 0.76rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-card .val { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 600; color: var(--text-1); margin-top: 6px; }

.data-table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table th { text-align: left; padding: 14px 18px; background: var(--surface); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); border-bottom: 1px solid var(--line); }
.data-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.data-table tr:last-child td { border-bottom: none; }
.data-table code { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-1); }

.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); }
.status-pill.new, .status-pill.under-review, .status-pill.assigned-to-expert, .status-pill.assigned { background: var(--accent-soft); color: var(--accent); }
.status-pill.in-progress, .status-pill.waiting-for-user, .status-pill.waiting-for-platform, .status-pill.submitted-to-platform { background: #fffbeb; color: var(--status-warning-text); }
.status-pill.resolved, .status-pill.closed, .status-pill.approved { background: #ecfdf5; color: var(--status-good-text); }
.status-pill.rejected, .status-pill.action-required-from-customer, .status-pill.additional-information-required, .status-pill.action-required { background: #fef2f2; color: var(--status-critical-text); }
.status-pill.pending, .status-pill.draft { background: var(--surface); color: var(--text-2); }
/* Report Center's own status vocabulary, for the admin panel's generic
   kebab-case class transform (control.js's statusClass()) — the customer-
   facing report-center.js maps these onto the pre-existing classes above
   instead, so these only need to cover the admin table's raw statuses. */
.status-pill.analyzing, .status-pill.in-progress { background: #fffbeb; color: var(--status-warning-text); }
.status-pill.ready-to-submit { background: var(--accent-soft); color: var(--accent); }
.status-pill.submitted-by-client, .status-pill.submitted-via-authorized-integration, .status-pill.response-received { background: #fffbeb; color: var(--status-warning-text); }

.empty-panel { text-align: center; padding: var(--sp-8) var(--sp-6); background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.empty-panel .service-icon { margin: 0 auto var(--sp-4); }
.empty-panel h3 { margin-bottom: var(--sp-2); }
.empty-panel p { max-width: 46ch; margin-inline: auto; }
.empty-panel .badge-planned { margin-top: var(--sp-4); }
.empty-panel.empty-panel-sm { padding: var(--sp-6) var(--sp-4); }

/* ---- Dashboard redesign: metric cards ---- */
.metric-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.metric-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.metric-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.metric-icon svg { width: 20px; height: 20px; }
.metric-icon.blue { background: var(--accent-soft); color: var(--accent); }
.metric-icon.green { background: #ecfdf5; color: var(--status-good-text); }
.metric-icon.purple { background: #f5f3ff; color: #7c3aed; }
.metric-icon.orange { background: #fffbeb; color: var(--status-warning-text); }
.metric-icon.teal { background: #ecfeff; color: #0e7490; }
.metric-title { font-size: 0.82rem; color: var(--text-2); font-weight: 500; margin-bottom: 6px; }
.metric-value { font-family: var(--font-mono); font-size: 1.85rem; font-weight: 700; color: var(--text-1); line-height: 1.1; }
.metric-desc { font-size: 0.74rem; color: var(--text-3); margin-top: 3px; }
.metric-spark { width: 100%; height: 32px; margin-top: 10px; display: block; }

/* ---- Overview grid layout ---- */
.ov-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-5); align-items: start; }
.ov-left { display: grid; gap: var(--sp-5); min-width: 0; }
.ov-top-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-5); align-items: start; }
.ov-right { display: grid; gap: var(--sp-5); align-content: start; }
@media (max-width: 1180px) { .ov-grid { grid-template-columns: 1fr; } .ov-right { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .ov-top-row { grid-template-columns: 1fr; } .ov-right { grid-template-columns: 1fr; } }
@media (max-width: 1300px) { .metric-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .metric-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .metric-row { grid-template-columns: 1fr; } }

/* ---- Quick actions ---- */
.quick-actions { display: grid; gap: 8px; }
.quick-action {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: #fff; text-align: left; width: 100%; transition: background 0.15s ease, border-color 0.15s ease;
}
.quick-action:hover { background: var(--surface); border-color: var(--line-strong); }
.quick-action strong { display: block; font-size: 0.86rem; color: var(--text-1); }
.quick-action small { display: block; font-size: 0.74rem; color: var(--text-3); margin-top: 1px; }
.quick-action-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface); color: var(--text-2); display: grid; place-items: center; flex-shrink: 0; }
.quick-action-icon svg { width: 16px; height: 16px; }
.quick-action-primary { background: var(--accent); border-color: var(--accent); }
.quick-action-primary strong, .quick-action-primary small { color: #fff; }
.quick-action-primary small { color: rgba(255,255,255,0.8); }
.quick-action-primary .quick-action-icon { background: rgba(255,255,255,0.18); color: #fff; }
.quick-action-primary:hover { background: #1d4ed8; }

/* ---- Guidelines ---- */
.guideline-list { display: grid; gap: var(--sp-4); }
.guideline-item { display: flex; gap: 12px; align-items: flex-start; }
.guideline-item svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.guideline-item strong { display: block; font-size: 0.84rem; color: var(--text-1); }
.guideline-item span { display: block; font-size: 0.78rem; color: var(--text-3); margin-top: 1px; }

/* ---- Cases Overview donut chart ---- */
.donut-wrap { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.donut-legend { display: grid; gap: 9px; flex: 1; min-width: 160px; }
.donut-legend-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.82rem; }
.donut-legend-item .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-label { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.donut-legend-value { color: var(--text-1); font-weight: 600; font-family: var(--font-mono); font-size: 0.8rem; }
.donut-center-total { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; fill: var(--text-1); }
.donut-center-label { font-size: 0.62rem; fill: var(--text-3); letter-spacing: 0.04em; }
.donut-avg { margin-top: var(--sp-4); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--accent); }
.donut-avg svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---- Sidebar footer / Need Help card ---- */
.app-sidebar { display: flex; flex-direction: column; }
.app-nav { flex: 1; }
.app-sidebar-footer { padding: var(--sp-3); }
.help-card { background: var(--accent-soft); border-radius: var(--radius-md); padding: var(--sp-4); }
.help-card-icon { width: 34px; height: 34px; border-radius: 9px; background: #fff; color: var(--accent); display: grid; place-items: center; margin-bottom: 10px; }
.help-card-icon svg { width: 16px; height: 16px; }
.help-card h4 { font-size: 0.86rem; margin-bottom: 4px; }
.help-card p { font-size: 0.76rem; color: var(--text-2); margin-bottom: 12px; line-height: 1.4; }

/* ---- Topbar: welcome subtitle, bell, avatar, user menu ---- */
.app-topbar-subtitle { font-size: 0.78rem; color: var(--text-3); margin-top: 2px; }
.icon-btn { position: relative; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: var(--text-2); border: 1px solid var(--line); background: #fff; }
.icon-btn:hover { background: var(--surface); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--status-critical); color: #fff; font-size: 0.62rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff;
}
.nav-badge {
  margin-left: auto; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--status-critical); color: #fff; font-size: 0.62rem; font-weight: 700; display: grid; place-items: center;
}
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gradient-brand); color: #fff; display: grid; place-items: center; font-size: 0.76rem; font-weight: 700; flex-shrink: 0; }
.user-menu { position: relative; }
.user-menu-trigger { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: var(--radius-sm); }
.user-menu-trigger:hover { background: var(--surface); }
.user-menu-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.user-menu-text #userEmail { font-size: 0.82rem; font-weight: 600; color: var(--text-1); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-sub { font-size: 0.7rem; color: var(--text-3); }
.user-menu-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); min-width: 170px; padding: 6px; z-index: 50;
}
.user-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 0.86rem; color: var(--text-2); text-align: left;
}
.user-menu-item:hover { background: var(--surface); color: var(--text-1); }
.user-menu-item svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .app-user .badge#planBadge { display: none !important; }
  .user-menu-text { display: none; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 200; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow-lg); }
  .app-sidebar.open { transform: translateX(0); }
  .app-drawer-toggle { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
  .app-drawer-scrim { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.4); z-index: 150; }
  .app-drawer-scrim.open { display: block; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .app-content { padding: var(--sp-4); }
}
@media (max-width: 560px) {
  .stat-row { grid-template-columns: 1fr; }
  .data-table-wrap { overflow-x: auto; }
  .data-table { min-width: 560px; }
}