/* =====================================================================
   HCODX Landing — Production CSS
   DM Sans · Clean Developer SaaS · Mobile-First · CLS/INP Safe
   Generated: 2026-03-01
   ===================================================================== */

/* ---------------------------------------------------------------------
   0) Reset + Base
   --------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Text rendering improvements */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Prevent horizontal scroll/drag on mobile — must be on html, not just body */
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   1) Design Tokens
   --------------------------------------------------------------------- */

:root {
  /* Core palette */
  --ink: #0b0f1a;
  --ink-2: #1e2538;
  --muted: #5a6480;
  --muted-2: #8b96b0;
  --line: #e4e8f2;
  --bg: #f6f8fd;
  --surface: #ffffff;

  /* Brand accents */
  --accent: #2a5cf6;
  --accent-dk: #1a44d8;
  --accent-lt: #e8eeff;

  --accent-2: #00c896;
  --accent-2lt: #e0faf3;

  --warn: #f59e0b;

  /* Typography */
  --ff: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fm: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Radii */
  --r: 10px;
  --r-lg: 20px;

  /* Shadows */
  --sh: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.08);
  --sh-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
  --sh-accent: 0 6px 30px rgba(42, 92, 246, 0.25);

  /* Layout */
  --container: 1200px;
  --gutter: 24px;

  /* Touch targets */
  --tap: 44px;

  /* Safe area for iOS notches */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Selection */
::selection {
  background: rgba(42, 92, 246, 0.18);
}

/* ---------------------------------------------------------------------
   2) Body + Global Elements
   --------------------------------------------------------------------- */

body {
  font-family: var(--ff);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
  /* Lock horizontal pan on mobile — prevents layout being dragged sideways */
  overscroll-behavior-x: none;
  touch-action: pan-y;
  max-width: 100%;
  position: relative;
}

/* Links default */
a {
  color: inherit;
}

/* Improve tap performance on mobile */
button,
.btn {
  touch-action: manipulation;
}

/* Prevent layout shift for media */
img,
video,
canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* SVG: constrain size but keep inline-flex compatible (don't force display:block) */
svg {
  max-width: 100%;
  overflow: visible;
  flex-shrink: 0;
}

/* Focus states (keyboard only) */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid rgba(42, 92, 246, 0.35);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Subtle scrollbar (desktop) */
@media (hover: hover) and (pointer: fine) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(30, 37, 56, 0.35) transparent;
  }

  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-thumb {
    background: rgba(30, 37, 56, 0.22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: rgba(30, 37, 56, 0.30);
    border: 2px solid transparent;
    background-clip: content-box;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* ---------------------------------------------------------------------
   3) Container Utilities
   --------------------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.center {
  text-align: center;
}

/* ---------------------------------------------------------------------
   4) NAV
   --------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s;
  padding-top: var(--safe-top);
}

/* Scrolled shadow (add class via JS) */
.nav.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-mark {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo-mark svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

.nav-logo-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* Main nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}

.nav-links a:hover {
  color: var(--ink);
  background: var(--bg);
}

/* ---- Tools nav link (special) ---- */
/* Remove purple highlight completely */
.nav-tools-link {
  color: var(--muted) !important;
  font-weight: 500 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 8px;
  background: transparent !important;
}

.nav-tools-link:hover {
  color: var(--ink) !important;
  background: var(--bg) !important;
}

/* Neutral dot keeps brand blue (not purple) */
.nav-tools-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(42, 92, 246, 0.12);
}

/* CTA area */
.nav-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   5) Buttons
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--ff);
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  min-height: var(--tap);
  padding: 10px 16px;
  line-height: 1;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Size variants */
.btn-sm {
  font-size: 0.825rem;
  padding: 9px 14px;
  min-height: 38px;
}

.btn-md {
  font-size: 0.9rem;
  padding: 12px 20px;
  min-height: 42px;
}

.btn-lg {
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 10px;
  min-height: 48px;
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}

.btn-ghost:hover {
  color: var(--ink);
  border-color: var(--ink-2);
  background: var(--surface);
}

/* IMPORTANT FIX:
   If a "btn btn-sm btn-ghost" is used on dark sections or has white hover,
   keep text visible and avoid "white on white". */
.btn.btn-sm.btn-ghost:hover {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Primary */
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--sh-accent);
}

.btn-primary:hover {
  background: var(--accent-dk);
  transform: translateY(-1px);
  box-shadow: 0 8px 36px rgba(42, 92, 246, 0.35);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Outline */
.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.btn-outline:hover {
  background: var(--accent-lt);
}

/* Compiler button (dark) */
.btn-compiler {
  background: var(--ink);
  color: #fff;
}

.btn-compiler:hover {
  background: #2d3650;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(11, 15, 26, 0.3);
}

.btn-compiler:active {
  transform: translateY(0);
  background: var(--ink-2);
  color: #fff;
}

/* Tools button (original purple -> keep for other areas if used) */
.btn-tools {
  background: #7c3cf5;
  color: #fff;
}

.btn-tools:hover {
  background: #6a2ee0;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(124, 60, 245, 0.3);
}

.btn-tools:active {
  transform: translateY(0);
  background: #5c28c8;
  color: #fff;
}

/* ---------------------------------------------------------------------
   6) nav-ctas — Elegant minimal style (Tools + Compiler)
   --------------------------------------------------------------------- */

.nav-ctas .btn-tools,
.nav-ctas .btn-compiler {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
}

/* Hover effect */
.nav-ctas .btn-tools:hover,
.nav-ctas .btn-compiler:hover {
  background: var(--accent-lt);
  border-color: rgba(42, 92, 246, 0.55);
  color: var(--accent);
  transform: translateY(-1px);
}

/* Active */
.nav-ctas .btn-tools:active,
.nav-ctas .btn-compiler:active {
  transform: translateY(0);
  background: rgba(42, 92, 246, 0.08);
}

/* Better spacing on tiny screens */
@media (max-width: 420px) {
  .nav-ctas .btn {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---------------------------------------------------------------------
   7) HERO
   --------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 24px 80px;
  text-align: center;
  background: var(--surface);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42, 92, 246, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 92, 246, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
}

.hero-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(42, 92, 246, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-lt);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(42, 92, 246, 0.2);
  margin-bottom: 28px;
  animation: fadeUp 0.5s ease both;
}

.hero-badge svg {
  width: 12px;
  height: 12px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 22px;
  animation: fadeUp 0.5s 0.08s ease both;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent) 0%, #7c5cf5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto 36px;
  line-height: 1.7;
  animation: fadeUp 0.5s 0.16s ease both;
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 0.5s 0.24s ease both;
}

/* Hero buttons: elegant outlined (as requested) */
.hero-actions .btn-compiler,
.hero-actions .btn-tools {
  background: transparent;
  box-shadow: none;
  border: 1.5px solid var(--line);
  color: var(--ink);
}

.hero-actions .btn-compiler:hover,
.hero-actions .btn-tools:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-lt);
}

/* Stats */
.hero-stats {
  display: flex;
  justify-content: center;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  animation: fadeUp 0.5s 0.32s ease both;
  flex-wrap: wrap;
  gap: 32px;
}

.stat {
  text-align: center;
}

.stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------
   8) TOOL STRIP
   --------------------------------------------------------------------- */

.tool-strip {
  background: var(--ink);
  padding: 20px 24px;
}

.tool-strip-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.tool-strip-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 500;
}

.tool-strip-text strong {
  color: #fff;
}

.tool-strip-links {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* tool-strip-links — elegant minimal (as requested) */
.tool-strip-links .btn-tools,
.tool-strip-links .btn-ghost {
  background: transparent !important;
  box-shadow: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

.tool-strip-links .btn-tools:hover,
.tool-strip-links .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  transform: translateY(-1px);
}

.tool-strip-links .btn-tools:active,
.tool-strip-links .btn-ghost:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ---------------------------------------------------------------------
   9) Sections Base
   --------------------------------------------------------------------- */

.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 88px 24px;
}

.section + .section {
  padding-top: 0;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.section-eyebrow svg {
  width: 13px;
  height: 13px;
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 14px;
}

.section-sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.7;
  margin-bottom: 56px;
}

.center .section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------
   10) Feature Grid
   --------------------------------------------------------------------- */

.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.feat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.feat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #7c5cf5);
  opacity: 0;
  transition: opacity 0.2s;
}

.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: transparent;
}

.feat-card:hover::before {
  opacity: 1;
}

.feat-icon {
  width: 48px;
  height: 48px;
  background: var(--accent-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.feat-icon svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.feat-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.feat-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ---------------------------------------------------------------------
   11) Steps
   --------------------------------------------------------------------- */

.steps-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
  counter-reset: steps;
}

.step-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s;
  will-change: transform;
}

.step-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-3px);
}

.step-num {
  font-family: var(--fm);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-lt);
  border: 1px solid rgba(42, 92, 246, 0.2);
  padding: 3px 10px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 16px;
}

.step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.step-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ---------------------------------------------------------------------
   12) Benefits
   --------------------------------------------------------------------- */

.benefits-bg {
  background: var(--ink);
  /* Padding removed — inner .section provides correct 88px padding on all sides */
  padding: 0;
}

.benefits-bg .section-title,
.benefits-bg .section-sub {
  color: rgba(255, 255, 255, 0.9);
}

.benefits-bg .section-eyebrow {
  color: var(--accent-2);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r);
  padding: 18px 20px;
  transition: background 0.2s, border-color 0.2s;
}

.benefit-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.benefit-icon {
  width: 36px;
  height: 36px;
  background: rgba(0, 200, 150, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-icon svg {
  width: 18px;
  height: 18px;
  color: var(--accent-2);
}

.benefit-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  line-height: 1.5;
  padding-top: 2px;
}

/* ---------------------------------------------------------------------
   13) Use Cases
   --------------------------------------------------------------------- */

.usecases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.usecase-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  will-change: transform;
}

.usecase-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 32px rgba(42, 92, 246, 0.1);
  transform: translateY(-3px);
}

.usecase-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--accent-lt), #ede8ff);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.usecase-icon svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.usecase-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.usecase-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ---------------------------------------------------------------------
   14) FAQ
   --------------------------------------------------------------------- */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-item.open {
  border-color: var(--accent);
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ff);
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  transition: background 0.15s;
}

.faq-q:hover {
  background: var(--bg);
}

.faq-chevron {
  width: 32px;
  height: 32px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.3s;
}

.faq-chevron svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: color 0.2s;
}

.faq-item.open .faq-chevron {
  background: var(--accent-lt);
  transform: rotate(180deg);
}

.faq-item.open .faq-chevron svg {
  color: var(--accent);
}

.faq-a {
  display: none;
  padding: 0 24px 22px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.faq-item.open .faq-a {
  display: block;
}

/* ---------------------------------------------------------------------
   15) Compare Strip
   --------------------------------------------------------------------- */

.compare-strip {
  background: var(--accent-lt);
  border: 1px solid rgba(42, 92, 246, 0.15);
  border-radius: var(--r-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
}

.compare-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.compare-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.compare-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
}

.compare-divider {
  width: 1px;
  height: 80px;
  background: rgba(42, 92, 246, 0.2);
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   16) CTA Band
   --------------------------------------------------------------------- */

.cta-band {
  background: linear-gradient(135deg, var(--accent) 0%, #5b3cf5 100%);
  padding: 88px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.cta-band-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

.cta-band h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.cta-band p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 36px;
  line-height: 1.6;
}

.cta-band-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-white {
  background: #fff;
  color: var(--accent);
  font-weight: 700;
}

.btn-white:hover {
  background: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn-wh-outline {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

.btn-wh-outline:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------
   17) Footer
   --------------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.65);
  padding: 64px 24px 32px;
}

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.8fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 32px;
}

.footer-brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-brand-icon {
  width: 30px;
  height: 30px;
  background: var(--accent);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-brand-icon svg {
  width: 17px;
  height: 17px;
  color: #fff;
}

.footer-brand-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}

.footer-brand-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 20px;
}

.footer-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-col h4 {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-col ul li a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-bottom-links a:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------------
   18) Mobile / Tablet Drawer
   --------------------------------------------------------------------- */

.nav-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.nav-hamburger:hover {
  border-color: var(--ink-2);
  background: var(--bg);
}

.nav-hamburger svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.icon-close {
  display: none;
}

/* Show X and hide hamburger lines when menu is open — driven by aria-expanded, no JS inline style needed */
.nav-hamburger[aria-expanded="true"] .icon-open {
  display: none;
}

.nav-hamburger[aria-expanded="true"] .icon-close {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-drawer {
  display: none;
  position: fixed;
  top: calc(64px + var(--safe-top));
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 15, 26, 0.45);
  z-index: 190;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  padding-bottom: var(--safe-bottom);
}

.nav-drawer.open {
  opacity: 1;
  pointer-events: all;
}

.nav-drawer-panel {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 12px 0 20px;
  transform: translateY(-8px);
  transition: transform 0.25s ease;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.nav-drawer.open .nav-drawer-panel {
  transform: translateY(0);
}

.drawer-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 10px 20px 4px;
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.15s;
}

.drawer-link:hover {
  background: var(--bg);
}

.drawer-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-icon svg {
  width: 16px;
  height: 16px;
}

.drawer-icon.blue {
  background: #e8eeff;
  color: var(--accent);
}

.drawer-icon.dark {
  background: var(--ink);
  color: #fff;
}

.drawer-icon.purple {
  background: #f3eeff;
  color: #7c3cf5;
}

.drawer-icon.green {
  background: #e0faf3;
  color: #00c896;
}

.drawer-link-info {
  flex: 1;
}

.drawer-link-name {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9rem;
}

.drawer-link-desc {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 1px;
}

.drawer-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 20px;
}

.drawer-ctas {
  display: flex;
  gap: 10px;
  padding: 14px 20px 4px;
  flex-wrap: wrap;
}

.drawer-ctas .btn {
  flex: 1;
  justify-content: center;
  min-width: 110px;
}

/* ---------------------------------------------------------------------
   19) Animations
   --------------------------------------------------------------------- */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------
   20) Responsive — Desktop → Tablet → Mobile (Production tuned)
   --------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 960px) {
  .nav-links {
    display: none;
  }

  .nav-ctas {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-drawer {
    display: block;
  }

  .tool-strip-inner {
    justify-content: center;
    text-align: center;
  }

  .tool-strip-text {
    width: 100%;
  }

  .tool-strip-links {
    justify-content: center;
    width: 100%;
  }
}

/* Mid tablet */
@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .compare-strip {
    grid-template-columns: 1fr;
  }

  .compare-divider {
    display: none;
  }

  .compare-strip {
    gap: 18px;
  }
}

/* Mobile */
@media (max-width: 680px) {
  :root {
    --gutter: 20px;
  }

  .hero {
    padding: 72px 20px 60px;
  }

  .hero-desc {
    font-size: 1rem;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 420px;
  }

  .hero-stats {
    gap: 24px;
  }

  .stat-num {
    font-size: 1.4rem;
  }

  .section {
    padding: 64px 20px;
  }

  .benefits-bg .section {
    padding: 64px 20px;
  }

  .cta-band {
    padding: 64px 20px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-cta-row {
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .compare-strip {
    padding: 28px 24px;
  }

  /* Make grids denser on small screens */
  .feat-grid {
    grid-template-columns: 1fr;
  }

  .steps-wrap {
    grid-template-columns: 1fr;
  }

  .usecases-grid {
    grid-template-columns: 1fr;
  }

  /* Slightly reduce card padding */
  .feat-card,
  .usecase-card {
    padding: 22px;
  }

  .step-card {
    padding: 24px;
  }

  /* Larger tap targets for drawer links */
  .drawer-link {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* Extra small phones */
@media (max-width: 420px) {
  .nav-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }

  .btn-lg {
    padding-left: 18px;
    padding-right: 18px;
  }

  .compare-strip {
    padding: 22px 18px;
  }
}

/* ---------------------------------------------------------------------
   21) Print (optional)
   --------------------------------------------------------------------- */

@media print {
  .nav,
  .nav-drawer,
  .tool-strip,
  .cta-band {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section {
    padding: 24px 0;
  }

  .feat-card,
  .usecase-card,
  .step-card,
  .faq-item,
  .compare-strip {
    box-shadow: none !important;
  }
}

/* ---------------------------------------------------------------------
   22) Performance helpers
   --------------------------------------------------------------------- */

/* Keep expensive sections isolated for better INP/paint */
/* contain:paint is safe — avoids the overflow-clipping and scroll issues that layout+style causes on mobile */
.feat-card,
.usecase-card,
.step-card {
  contain: paint;
}

/* hero and section: paint only — layout containment breaks position:sticky and overflow on iOS */
.hero,
.section {
  contain: style;
}

/* Avoid text shifting when icons load */
.btn svg,
.nav-logo-mark svg {
  flex: 0 0 auto;
}
/* =====================================
   FIX: Hero Stats Mobile Layout
   ===================================== */

@media (max-width: 680px) {

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
    padding-top: 30px;
  }

  .hero-stats .stat {
    text-align: center;
    padding: 12px 8px;
  }

  .hero-stats .stat-num {
    font-size: 1.4rem;
    line-height: 1.1;
  }

  .hero-stats .stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }
}
/* =====================================================================
   End of Production CSS
   ===================================================================== */

/* Approved landing page design, shared by all marketing pages. */

    .rich-tbl-wrap{max-width:920px;margin:0 auto;overflow-x:auto;}
    .rich-tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;}
    .rich-tbl th,.rich-tbl td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6;}
    .rich-tbl thead th{background:var(--accent-lt);color:var(--accent-dk);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;}
    .rich-tbl tbody tr:last-child td{border-bottom:none;}
    .rich-tbl td{color:var(--muted);}
    .rich-tbl td:first-child{color:var(--ink);font-weight:600;}
    .rich-tbl code{font-family:var(--fm);font-size:.85em;background:var(--accent-lt);color:var(--accent-dk);padding:1px 5px;border-radius:4px;}
    .rich-tbl tbody tr:nth-child(even){background:rgba(42,92,246,.02);}
    .rich-tbl tr.rich-cat td{font-weight:800;color:var(--accent-dk);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;background:var(--bg);}
    .rich-pill{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap;}
    .rich-pill.y{background:var(--accent-2lt);color:#0a8a63;}
    .rich-pill.p{background:#fff4e0;color:#b06f00;}
    .rich-pill.n{background:#fdeaea;color:#c0392b;}

    :root{--ff:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--fm:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--accent:#5b5cf0;--accent-dk:#4546c8;--accent-lt:#eeeeff;--accent-2:#39e6b0;--ink:#111329;--ink-2:#252840;--bg:#f7f7fb;--line:#e6e7f0;}
    .browser-page{background:#fff;color:var(--ink);}
    .skip-link{position:fixed;left:16px;top:12px;z-index:1000;transform:translateY(-160%);padding:10px 14px;border-radius:8px;background:#fff;color:#111329;font-weight:800;text-decoration:none;box-shadow:0 8px 30px rgba(0,0,0,.2);}
    .skip-link:focus{transform:translateY(0);}
    .browser-page .nav{background:rgba(8,11,24,.88);border-color:rgba(255,255,255,.1);}
    .browser-page .nav-logo-text,.browser-page .nav-links a{color:#fff;}
    .browser-page .nav-links a{opacity:.72;}
    .browser-page .nav-links a:hover{opacity:1;background:rgba(255,255,255,.08);}
    .browser-page .nav-hamburger{border-color:rgba(255,255,255,.18);}
    .browser-page .nav-hamburger svg{color:#fff;}
    .browser-page .hero{min-height:auto;padding:76px 24px 58px;background:#080b18;color:#fff;isolation:isolate;overflow:hidden;}
    .browser-page .hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 12% 12%,rgba(91,92,240,.3),transparent 35%),radial-gradient(circle at 88% 78%,rgba(57,230,176,.16),transparent 32%);}
    .browser-page .hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 88%);}
    .browser-page .hero-shell{position:relative;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);gap:64px;align-items:center;}
    .browser-page .hero-copy{text-align:left;}
    .browser-page .hero-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;padding:7px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c8cafb;}
    .browser-page .hero-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 5px rgba(57,230,176,.12);}
    .browser-page .hero h1{max-width:720px;margin:0 0 22px;font-size:clamp(2.65rem,5.5vw,5rem);line-height:.97;letter-spacing:-.06em;color:#fff;}
    .browser-page .hero h1 span{display:block;color:#aeb0ff;}
    .browser-page .hero-desc{max-width:640px;margin:0 0 30px;color:#b7bdd0;font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.72;}
    .browser-page .hero-actions{justify-content:flex-start;margin:0 0 26px;}
    .browser-page .hero .btn-primary{background:#fff;color:#171934;box-shadow:0 12px 36px rgba(0,0,0,.25);}
    .browser-page .hero .btn-primary:hover{background:#f0f1ff;color:#111329;}
    .browser-page .btn-quiet{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;}
    .browser-page .btn-quiet:hover{background:rgba(255,255,255,.12);}
    .browser-page .hero-proof{display:flex;flex-wrap:wrap;gap:10px 18px;color:#9fa7bd;font-size:.78rem;font-weight:650;}
    .browser-page .hero-proof span{display:inline-flex;align-items:center;gap:7px;}
    .browser-page .hero-proof span::before{content:"✓";color:var(--accent-2);font-weight:900;}
    .editor-demo{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:#111525;box-shadow:0 36px 90px rgba(0,0,0,.48);overflow:hidden;transform:perspective(1200px) rotateY(-2deg) rotateX(1deg);}
    .editor-demo::before{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:22px;background:linear-gradient(135deg,rgba(174,176,255,.25),transparent 36%,rgba(57,230,176,.12));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:1px;}
    .demo-top{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08);background:#0d1020;}
    .demo-dots{display:flex;gap:6px;}.demo-dots i{width:8px;height:8px;border-radius:50%;display:block;background:#ff6b6b;}.demo-dots i:nth-child(2){background:#ffd166}.demo-dots i:nth-child(3){background:#39e6b0}
    .demo-title{font:600 .7rem var(--fm);color:#818aa3;}.demo-live{display:flex;align-items:center;gap:6px;color:#75f0c9;font-size:.68rem;font-weight:800;}.demo-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#39e6b0;}
    .demo-workspace{display:grid;grid-template-columns:52px 1fr 1fr;min-height:370px;}
    .demo-rail{padding:14px 0;border-right:1px solid rgba(255,255,255,.07);background:#0b0e1a;display:flex;flex-direction:column;align-items:center;gap:16px;}.demo-rail b{width:20px;height:20px;border:1px solid #4b536b;border-radius:5px;}.demo-rail b:first-child{border-color:#8587ff;background:rgba(91,92,240,.2);}
    .demo-code{padding:0;border-right:1px solid rgba(255,255,255,.08);min-width:0;}.demo-tabs{height:38px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.07);}.demo-tab{height:38px;padding:0 14px;display:flex;align-items:center;border-right:1px solid rgba(255,255,255,.06);color:#d7daea;background:#15192b;font:500 .7rem var(--fm);}.demo-tab::before{content:"<>";margin-right:7px;color:#ff826d;font-weight:800;}
    .code-lines{padding:18px 12px 18px 8px;font:500 .69rem/1.75 var(--fm);white-space:nowrap;overflow:hidden;color:#d7daea;counter-reset:line;}.code-lines div{counter-increment:line;}.code-lines div::before{content:counter(line);display:inline-block;width:28px;margin-right:12px;text-align:right;color:#4f5870;}.tok-tag{color:#ff7d92}.tok-attr{color:#9dd9ff}.tok-str{color:#b7e580}.tok-text{color:#d7daea}.tok-indent{padding-left:14px;}
    .demo-preview{padding:14px;background:#f5f3ee;color:#181b2e;display:flex;align-items:center;justify-content:center;}.preview-card{width:86%;padding:22px;border:1px solid #dddbe4;border-radius:15px;background:#fff;box-shadow:0 16px 34px rgba(27,27,50,.11);}.preview-pill{width:74px;height:8px;border-radius:99px;background:#5b5cf0;margin-bottom:18px}.preview-title{width:82%;height:17px;border-radius:4px;background:#181b2e;margin-bottom:10px}.preview-copy{width:100%;height:7px;border-radius:4px;background:#dfe1e8;margin-bottom:6px}.preview-copy.short{width:68%}.preview-button{width:82px;height:28px;border-radius:7px;background:#39d9a7;margin-top:18px}
    .intent-nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:64px;z-index:90;}
    .intent-nav-inner{max-width:1100px;margin:0 auto;padding:13px 24px;display:flex;gap:8px;justify-content:center;overflow-x:auto;scrollbar-width:none;}.intent-nav-inner::-webkit-scrollbar{display:none}.intent-nav a{flex:0 0 auto;padding:7px 11px;border-radius:8px;color:#596078;text-decoration:none;font-size:.79rem;font-weight:750;}.intent-nav a:hover{background:var(--accent-lt);color:var(--accent-dk);}
    .answer-box{max-width:900px;margin:0 auto 42px;display:grid;grid-template-columns:auto 1fr;gap:18px;padding:24px 26px;border:1px solid #dfe1ef;border-radius:18px;background:linear-gradient(135deg,#fff,#f7f7ff);box-shadow:0 16px 44px rgba(24,28,60,.06);text-align:left;}.answer-icon{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font:800 1rem var(--fm);}.answer-box strong{display:block;margin-bottom:5px;font-size:1rem;color:var(--ink);}.answer-box p{margin:0;color:var(--muted);line-height:1.72;}
    .browser-page .section{scroll-margin-top:120px;}.browser-page .section-sub{max-width:720px;}.browser-page .feat-card,.browser-page .step-card,.browser-page .usecase-card{border-color:#e3e4ed;box-shadow:0 10px 30px rgba(26,29,56,.05);}.browser-page .feat-card:hover,.browser-page .step-card:hover,.browser-page .usecase-card:hover{box-shadow:0 18px 44px rgba(40,43,80,.1);}.browser-page .benefits-bg{background:#0b0e1b;}.browser-page .cta-band{background:linear-gradient(120deg,#4546c8,#7658e8 62%,#188c7a);}
    .accuracy-note{max-width:820px;margin:28px auto 0;padding:18px 20px;border-left:3px solid var(--accent);background:#f3f3ff;color:var(--muted);font-size:.92rem;line-height:1.72;}.accuracy-note strong{color:var(--ink);}.accuracy-note a{color:var(--accent-dk);font-weight:700;}
    .browser-page .faq-q{min-height:64px;}.browser-page .faq-q[aria-expanded="true"]+.faq-a{display:block;}.browser-page .faq-item.open .faq-q{color:var(--accent-dk);}
    @media(max-width:980px){.browser-page .hero-shell{grid-template-columns:1fr;gap:48px;}.browser-page .hero-copy{text-align:center;}.browser-page .hero h1,.browser-page .hero-desc{margin-left:auto;margin-right:auto;}.browser-page .hero-actions,.browser-page .hero-proof{justify-content:center;}.editor-demo{max-width:720px;margin:0 auto;transform:none;}.intent-nav{top:64px;}}
    @media(max-width:680px){.browser-page .hero{padding:60px 20px 42px;}.browser-page .hero h1{font-size:clamp(2.4rem,12vw,3.7rem);}.browser-page .hero h1 span{display:inline;}.browser-page .hero-actions{gap:10px;}.browser-page .hero-actions .btn{width:100%;}.demo-workspace{grid-template-columns:38px 1fr;min-height:310px;}.demo-preview{display:none;}.demo-rail{gap:13px;}.editor-demo{border-radius:16px;}.answer-box{grid-template-columns:1fr;padding:22px;}.answer-icon{width:40px;height:40px;}.intent-nav-inner{justify-content:flex-start;}.browser-page .nav-drawer-panel{background:#fff;}}
    @media(prefers-reduced-motion:reduce){.editor-demo{transform:none;}}
    

    /* Page-specific art direction: editorial developer workbench. */
    :root{
        --work-paper:#f2efe6;
        --work-white:#fffdf7;
        --work-ink:#111318;
        --work-blue:#2947ff;
        --work-blue-dark:#1429a8;
        --work-acid:#d8ff52;
        --work-cyan:#8deaff;
        --work-rule:#1b1d22;
        --work-muted:#5f625f;
    }
    html{scroll-behavior:smooth;}
    .browser-page{
        background:var(--work-paper);
        color:var(--work-ink);
        font-family:var(--ff);
    }
    .browser-page main{overflow:clip;}
    .browser-page a:focus-visible,
    .browser-page button:focus-visible{outline:3px solid var(--work-acid);outline-offset:4px;}

    /* Header */
    .browser-page .nav{
        background:var(--work-ink);
        border-bottom:1px solid rgba(255,255,255,.18);
        backdrop-filter:none;
    }
    .browser-page .nav-logo-mark{background:var(--work-acid);color:var(--work-ink);border-radius:2px;}
    .browser-page .nav-logo-mark svg{color:var(--work-ink);stroke:currentColor;}
    .browser-page .nav-links a{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;}
    .browser-page .nav-ctas .btn-primary{background:var(--work-acid);color:var(--work-ink);border-radius:2px;box-shadow:none;}
    .browser-page .nav-hamburger{
        border-color:rgba(255,255,255,.32);
        border-radius:2px;
        background:transparent;
        color:#fff;
    }
    .browser-page .nav-hamburger svg{color:currentColor;stroke:currentColor;}
    .browser-page .nav-hamburger:hover,
    .browser-page .nav-hamburger[aria-expanded="true"]{
        border-color:var(--work-acid);
        background:var(--work-acid);
        color:var(--work-ink);
    }

    /* Hero: oversized editorial type paired with a tactile product window. */
    .browser-page .hero{
        min-height:auto;
        padding:92px 28px 78px;
        background:var(--work-paper);
        color:var(--work-ink);
        border-bottom:2px solid var(--work-rule);
    }
    .browser-page .hero::before,
    .browser-page .hero::after{display:none;}
    .browser-page .hero-shell{
        max-width:1320px;
        grid-template-columns:minmax(0,.92fr) minmax(540px,1.08fr);
        gap:78px;
        align-items:center;
    }
    .browser-page .hero-copy{text-align:left;}
    .browser-page .hero-kicker{
        display:flex;
        width:max-content;
        margin:0 0 28px;
        padding:0 0 10px;
        border:0;
        border-bottom:2px solid var(--work-ink);
        border-radius:0;
        background:transparent;
        color:var(--work-ink);
        font:800 .72rem/1 var(--fm);
        letter-spacing:.13em;
    }
    .browser-page .hero-kicker::before{
        width:9px;height:9px;border-radius:0;
        background:var(--work-blue);box-shadow:none;
    }
    .browser-page .hero h1{
        max-width:680px;
        margin:0 0 28px;
        color:var(--work-ink);
        font-size:clamp(2.8rem,5.4vw,5.6rem);
        font-weight:900;
        line-height:.96;
        letter-spacing:-.055em;
        text-wrap:balance;
    }
    .browser-page .hero h1 span{
        display:block;
        color:var(--work-blue);
        background:linear-gradient(92deg,var(--work-blue) 0%,#5844d7 52%,#087667 100%);
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;
    }
    .browser-page .hero-desc{
        max-width:610px;
        margin:0 0 34px;
        color:#3f4244;
        font-size:1.08rem;
        line-height:1.72;
    }
    .browser-page .hero-actions{justify-content:flex-start;margin:0 0 32px;gap:18px;}
    .browser-page .hero .btn{border-radius:2px;min-height:54px;padding-inline:24px;}
    .browser-page .hero .btn-primary{
        background:var(--work-blue);color:#fff;
        border:2px solid var(--work-blue);
        box-shadow:6px 6px 0 var(--work-ink);
    }
    .browser-page .hero .btn-primary:hover{background:var(--work-blue-dark);color:#fff;transform:translate(2px,2px);box-shadow:4px 4px 0 var(--work-ink);}
    .browser-page .btn-quiet{background:transparent;color:var(--work-ink);border:2px solid var(--work-ink);}
    .browser-page .btn-quiet:hover{background:var(--work-ink);color:#fff;}
    .browser-page .hero-proof{
        display:grid;
        grid-template-columns:repeat(3,max-content);
        gap:0;
        color:var(--work-ink);
        font:700 .72rem/1.35 var(--fm);
        letter-spacing:.02em;
        text-transform:uppercase;
    }
    .browser-page .hero-proof span{padding:9px 15px;border-left:1px solid rgba(17,19,24,.28);}
    .browser-page .hero-proof span:first-child{padding-left:0;border-left:0;}
    .browser-page .hero-proof span::before{content:"+";color:var(--work-blue);font-size:1rem;}
    .editor-demo{
        border:2px solid var(--work-ink);
        border-radius:3px;
        background:#11141c;
        box-shadow:14px 14px 0 var(--work-blue);
        overflow:hidden;
        transform:rotate(1deg);
    }
    .editor-demo::before{display:none;}
    .demo-top{height:50px;background:#0b0d12;border-bottom:1px solid #343743;}
    .demo-dots i{width:9px;height:9px;}
    .demo-title{color:#adb2c1;letter-spacing:.02em;}
    .demo-live{padding:5px 8px;background:var(--work-acid);color:#111318;}
    .demo-live::before{background:#111318;}
    .demo-workspace{grid-template-columns:50px 1.08fr .92fr;min-height:392px;}
    .demo-rail{background:#0b0d12;}
    .demo-rail span{
        width:30px;
        height:30px;
        display:grid;
        place-items:center;
        border-left:2px solid transparent;
        color:#7c859b;
    }
    .demo-rail span.active{border-left-color:var(--work-acid);background:rgba(216,255,82,.1);color:var(--work-acid);}
    .demo-rail span:nth-child(2){color:var(--work-cyan);}
    .demo-rail span:nth-child(3){color:#a79cff;}
    .demo-rail span:nth-child(4){color:#ff9b7c;}
    .demo-rail span svg{width:17px;height:17px;display:block;}
    .demo-code{background:#11141c;}
    .demo-tab{background:#1a1e29;border-top:2px solid var(--work-blue);}
    .code-lines,.code-lines div{text-align:left;}
    .demo-preview{background:var(--work-white);border-left:1px solid #d9d5c9;}
    .preview-card{
        width:88%;
        min-height:230px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        padding:24px;
        border:2px solid var(--work-ink);
        border-radius:2px;
        background:#fff;
        box-shadow:7px 7px 0 var(--work-cyan);
        text-align:left;
    }
    .preview-eyebrow{display:inline-block;margin-bottom:24px;padding:5px 8px;background:var(--work-blue);color:#fff;font:800 .56rem/1 var(--fm);letter-spacing:.09em;text-transform:uppercase;}
    .preview-heading{display:block;margin-bottom:8px;color:var(--work-ink);font-size:1.14rem;line-height:1.05;letter-spacing:-.04em;}
    .preview-text{max-width:210px;color:#666a70;font-size:.67rem;line-height:1.55;}
    .preview-action{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding:9px 12px;border:1px solid var(--work-ink);background:var(--work-acid);color:var(--work-ink);font:800 .62rem/1 var(--fm);text-transform:uppercase;box-shadow:3px 3px 0 var(--work-ink);}
    .preview-action svg{width:12px;height:12px;}

    /* In-page navigation becomes a compact command bar. */
    .intent-nav{top:64px;background:var(--work-ink);border:0;border-bottom:1px solid #34363c;}
    .intent-nav-inner{max-width:1320px;justify-content:flex-start;padding:0 28px;gap:0;}
    .intent-nav a{
        padding:15px 20px;
        border-right:1px solid #34363c;
        border-radius:0;
        color:#d8d9dc;
        font:700 .68rem/1 var(--fm);
        letter-spacing:.07em;
        text-transform:uppercase;
    }
    .intent-nav a:first-child{border-left:1px solid #34363c;}
    .intent-nav a:hover{background:var(--work-acid);color:var(--work-ink);}

    /* Shared editorial rhythm */
    .browser-page .section{max-width:1240px;padding:118px 28px;scroll-margin-top:116px;}
    .browser-page .section + .section{padding-top:118px;}
    .browser-page .center{text-align:left;}
    .browser-page .section-eyebrow{
        gap:10px;
        margin-bottom:20px;
        color:var(--work-blue);
        font:800 .7rem/1 var(--fm);
        letter-spacing:.14em;
    }
    .browser-page .section-eyebrow::before{content:"//";color:var(--work-ink);}
    .browser-page .section-eyebrow svg{display:none;}
    .browser-page .section-title{
        max-width:850px;
        margin:0 0 20px;
        color:var(--work-ink);
        font-size:clamp(2.25rem,4.7vw,4.9rem);
        font-weight:900;
        line-height:.98;
        letter-spacing:-.065em;
    }
    .browser-page .section-sub{
        max-width:700px;
        margin:0;
        color:var(--work-muted);
        font-size:1.02rem;
        line-height:1.75;
    }
    .browser-page .center .section-sub{margin-left:0;margin-right:0;}

    /* 01 — Definition: asymmetrical article opening. */
    .editorial-intro{
        display:grid;
        grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
        grid-template-areas:"heading answer" "copy answer" "features features";
        column-gap:84px;
        row-gap:38px;
    }
    .editorial-intro > .center{grid-area:heading;margin:0!important;align-self:end;}
    .editorial-intro > .answer-box{grid-area:answer;align-self:stretch;}
    .editorial-intro > div[style*="max-width:820px"]{
        grid-area:copy;
        max-width:none!important;
        margin:0!important;
        padding-top:26px;
        border-top:2px solid var(--work-rule);
    }
    .editorial-intro > .feat-grid{grid-area:features;margin-top:32px;}
    .answer-box{
        max-width:none;
        margin:0;
        grid-template-columns:1fr;
        align-content:space-between;
        gap:48px;
        padding:38px;
        border:2px solid var(--work-ink);
        border-radius:2px;
        background:var(--work-acid);
        box-shadow:10px 10px 0 var(--work-ink);
    }
    .answer-icon{width:56px;height:56px;border-radius:0;background:var(--work-ink);color:var(--work-acid);}
    .answer-box strong{font:800 .72rem/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;}
    .answer-box p{color:var(--work-ink);font-size:1.2rem;font-weight:720;line-height:1.55;}
    .browser-page .feat-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:0;
        border-top:2px solid var(--work-rule);
        border-bottom:2px solid var(--work-rule);
    }
    .browser-page .feat-card{
        min-height:270px;
        padding:32px 28px;
        border:0;
        border-right:1px solid rgba(17,19,24,.35);
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }
    .browser-page .feat-card:last-child{border-right:0;}
    .browser-page .feat-card::before{display:none;}
    .browser-page .feat-card:hover{transform:none;background:var(--work-white);box-shadow:none;}
    .browser-page .feat-icon{width:38px;height:38px;margin-bottom:50px;border-radius:0;background:var(--work-blue);}
    .browser-page .feat-icon svg{width:19px;color:#fff;}
    .browser-page .feat-title{font-size:1.08rem;line-height:1.2;}
    .browser-page .feat-desc{color:var(--work-muted);line-height:1.7;}

    /* 02 — Process: numbered technical sequence, not cards. */
    .process-shell{background:var(--work-ink);border-block:2px solid var(--work-ink);}
    .process-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px 90px;align-items:start;}
    .process-section > .center{grid-column:1;grid-row:1;margin:0!important;}
    .process-section .section-eyebrow{color:var(--work-acid)!important;}
    .process-section .section-eyebrow::before{color:#fff;}
    .process-section .section-title{color:#fff!important;}
    .process-section .section-sub{color:#aeb2b9!important;}
    .process-section > .benefits-grid{grid-column:2;grid-row:1;}
    .process-note{
        grid-column:1;
        grid-row:2;
        align-self:stretch;
        min-height:100%;
        display:flex;
        flex-direction:column;
        padding:26px 28px 28px;
        border:2px solid var(--work-acid);
        background:var(--work-acid);
        color:var(--work-ink);
        box-shadow:8px 8px 0 var(--work-blue);
    }
    .process-note > span{display:block;margin-bottom:auto;font:800 .66rem/1 var(--fm);letter-spacing:.13em;text-transform:uppercase;}
    .process-note strong{display:block;margin-bottom:12px;font-size:clamp(1.35rem,2vw,1.9rem);line-height:1.05;letter-spacing:-.04em;}
    .process-note p{margin:0;color:#34372f;font-size:.9rem;line-height:1.65;}
    .process-section .benefits-grid{display:block;counter-reset:process;}
    .process-section .benefit-item{
        counter-increment:process;
        display:grid;
        grid-template-columns:58px 40px 1fr;
        gap:16px;
        align-items:start;
        padding:22px 0;
        border:0;
        border-top:1px solid #444750;
        border-radius:0;
        background:transparent;
    }
    .process-section .benefit-item:last-child{border-bottom:1px solid #444750;}
    .process-section .benefit-item::before{content:"0" counter(process);color:var(--work-acid);font:800 .72rem/36px var(--fm);}
    .process-section .benefit-item:hover{background:transparent;border-color:#737783;}
    .process-section .benefit-icon{width:36px;height:36px;border-radius:0;background:var(--work-blue);}
    .process-section .benefit-text{padding:2px 0;color:#c8cbd1;font-size:.94rem;line-height:1.62;}
    .process-code{grid-column:2;grid-row:2;min-width:0;align-self:stretch;display:flex;flex-direction:column;}
    .process-code > p{margin:0 0 16px;color:#aeb2b9;font-size:.94rem;line-height:1.7;}
    .process-code > pre{
        flex:1;
        min-height:250px;
        margin:0 8px 8px 0;
        padding:22px 24px;
        overflow:auto;
        border:1px solid #4b4e58;
        border-left:6px solid var(--work-blue);
        border-radius:0;
        background:#090b0f;
        box-shadow:8px 8px 0 #252935;
        color:#e6edf3;
        font:500 .78rem/1.75 var(--fm);
    }
    .process-limit{
        grid-column:1 / -1;
        grid-row:3;
        max-width:none;
        margin:4px 0 0;
        padding:26px 30px;
        border-top:1px solid #4b4e58;
        border-bottom:1px solid #4b4e58;
        color:#aeb2b9;
        font-size:.94rem;
        line-height:1.75;
    }
    .process-limit a{color:var(--work-acid);font-weight:750;text-decoration-thickness:1px;text-underline-offset:3px;}

    /* 03 — Comparison: two opposing editorial panels. */
    .compare-section{border-bottom:2px solid var(--work-rule);}
    .compare-section > .center{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;margin:0 0 58px!important;align-items:end;}
    .compare-section .section-eyebrow{align-self:start;}
    .compare-section .section-title{grid-column:1 / -1;max-width:980px;}
    .compare-section .section-sub{grid-column:2;}
    .compare-strip{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0;
        padding:0;
        border:2px solid var(--work-ink);
        border-radius:0;
        background:transparent;
    }
    .compare-col{min-height:330px;padding:48px;}
    .compare-col:first-child{background:var(--work-blue);color:#fff;}
    .compare-col:last-child{background:var(--work-white);}
    .compare-divider{display:none;}
    .compare-label{margin-bottom:70px;color:inherit;font:800 .68rem/1 var(--fm);letter-spacing:.13em;}
    .compare-col:first-child .compare-label{color:var(--work-acid);}
    .compare-title{max-width:420px;font-size:clamp(1.55rem,2.5vw,2.45rem);line-height:1.05;letter-spacing:-.04em;}
    .compare-col:first-child .compare-title{color:#fff;}
    .compare-desc{max-width:470px;font-size:.96rem;line-height:1.75;}
    .compare-col:first-child .compare-desc{color:#e5e8ff;}

    /* 04 — Quick start: a horizontal track. */
    .quickstart-section{background:var(--work-white);box-shadow:0 0 0 100vmax var(--work-white);clip-path:inset(0 -100vmax);}
    .quickstart-section > .center{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin:0 0 64px!important;align-items:end;}
    .quickstart-section .section-eyebrow{grid-column:1 / -1;}
    .quickstart-section .section-sub{align-self:end;}
    .steps-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--work-ink);counter-reset:steps;}
    .browser-page .step-card{
        min-height:320px;
        padding:32px 34px 38px 0;
        border:0;
        border-right:1px solid #cbc8be;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }
    .browser-page .step-card + .step-card{padding-left:34px;}
    .browser-page .step-card:last-child{border-right:0;}
    .browser-page .step-card:hover{transform:none;box-shadow:none;}
    .step-num{margin:0 0 76px;padding:0;border:0;border-radius:0;background:transparent;color:var(--work-blue);font:900 2.8rem/1 var(--fm);letter-spacing:-.08em;}
    .step-title{font-size:1.35rem;line-height:1.15;}
    .step-desc{font-size:.94rem;line-height:1.72;}
    .accuracy-note{
        max-width:none;
        margin:0;
        padding:22px 26px;
        border:0;
        border-left:8px solid var(--work-blue);
        background:#e7eaff;
        color:#464a55;
    }

    /* 05 — Security: electric blueprint. */
    .security-shell{background:var(--work-blue);}
    .security-section{display:grid;grid-template-columns:1fr 1fr;gap:28px 76px;}
    .security-section > .center{grid-column:1 / -1;margin:0 0 24px!important;display:grid;grid-template-columns:1fr 1fr;gap:30px 76px;}
    .security-section .section-eyebrow{grid-column:1 / -1;color:var(--work-acid)!important;}
    .security-section .section-eyebrow::before{color:#fff;}
    .security-section .section-title{color:#fff!important;}
    .security-section .section-sub{align-self:end;color:#dbe0ff!important;}
    .security-section > p,
    .security-section > pre{max-width:none!important;margin:0!important;text-align:left!important;}
    .security-section > pre{
        grid-column:2;
        grid-row:2 / span 2;
        min-height:230px;
        padding:28px!important;
        border:2px solid #fff!important;
        border-radius:0!important;
        background:var(--work-ink)!important;
        box-shadow:10px 10px 0 var(--work-acid);
    }
    .security-section > .benefits-grid{grid-column:1 / -1;margin-top:34px;}
    .security-section .benefits-grid{grid-template-columns:repeat(4,1fr);gap:0;border-block:1px solid rgba(255,255,255,.55);}
    .security-section .benefit-item{
        display:block;
        min-height:250px;
        padding:28px 26px;
        border:0;
        border-right:1px solid rgba(255,255,255,.38);
        border-radius:0;
        background:transparent;
    }
    .security-section .benefit-item:last-child{border-right:0;}
    .security-section .benefit-item:hover{background:rgba(0,0,0,.08);border-color:rgba(255,255,255,.38);}
    .security-section .benefit-icon{width:38px;height:38px;margin-bottom:62px;border-radius:0;background:var(--work-acid);}
    .security-section .benefit-icon svg{color:var(--work-ink);}
    .security-section .benefit-text{color:#e5e8ff;line-height:1.65;}
    .security-section > p:last-child{grid-column:1 / -1!important;margin-top:10px!important;color:#dbe0ff!important;}

    /* 06 — Capability matrix */
    .capabilities-section{background:var(--work-white);box-shadow:0 0 0 100vmax var(--work-white);clip-path:inset(0 -100vmax);}
    .capabilities-section > .center{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;margin:0 0 58px!important;}
    .capabilities-section .section-eyebrow{grid-column:1 / -1;}
    .capabilities-section .section-sub{align-self:end;}
    .rich-tbl-wrap{max-width:none;margin:0;border:2px solid var(--work-ink);}
    .rich-tbl{border:0;border-radius:0;background:var(--work-white);font-size:.94rem;}
    .rich-tbl th,.rich-tbl td{padding:17px 20px;border-bottom:1px solid #ccc9bf;}
    .rich-tbl thead th{background:var(--work-ink);color:#fff;font:800 .68rem/1.3 var(--fm);letter-spacing:.1em;}
    .rich-tbl tbody tr:nth-child(even){background:#f0eee7;}
    .rich-tbl tbody tr:hover{background:#e5e8ff;}
    .rich-pill{border-radius:1px;font-family:var(--fm);text-transform:uppercase;}
    .rich-pill.y{background:var(--work-acid);color:var(--work-ink);}
    .rich-pill.p{background:#ffe177;color:#563c00;}
    .rich-pill.n{background:#ffd4d1;color:#7f1810;}

    /* 07 — FAQ: fixed question index beside readable answers. */
    .faq-section{display:grid;grid-template-columns:minmax(270px,.55fr) minmax(0,1fr);gap:90px;background:var(--work-paper);}
    .faq-section > .center{margin:0!important;align-self:start;position:sticky;top:134px;}
    .faq-list{max-width:none;margin:0;gap:0;border-top:2px solid var(--work-ink);}
    .faq-item{border:0;border-bottom:1px solid #aaa89f;border-radius:0;background:transparent;}
    .faq-item.open{border-color:var(--work-ink);}
    .faq-q{min-height:76px!important;padding:22px 0;font-size:1.03rem;font-weight:760;}
    .browser-page .faq-q:hover{
        padding-inline:18px;
        background:var(--work-ink);
        color:#fff;
    }
    .faq-chevron{width:34px;height:34px;border:1px solid var(--work-ink);border-radius:0;background:transparent;}
    .faq-chevron svg{color:var(--work-ink);stroke:currentColor;}
    .browser-page .faq-q:hover .faq-chevron{border-color:var(--work-acid);background:var(--work-acid);color:var(--work-ink);}
    .browser-page .faq-q:hover .faq-chevron svg{color:var(--work-ink);stroke:currentColor;}
    .browser-page .faq-item.open .faq-q{color:var(--work-blue);}
    .browser-page .faq-item.open .faq-chevron{border-color:var(--work-blue);background:var(--work-blue);}
    .browser-page .faq-item.open .faq-chevron svg{color:#fff;stroke:currentColor;}
    .browser-page .faq-item.open .faq-q:hover{color:#fff;}
    .browser-page .faq-item.open .faq-q:hover .faq-chevron{border-color:var(--work-acid);background:var(--work-acid);}
    .browser-page .faq-item.open .faq-q:hover .faq-chevron svg{color:var(--work-ink);}
    .faq-a{padding:2px 52px 26px 0;border-top:0;color:#555852;font-size:.94rem;line-height:1.78;}

    /* Related tools become a typographic directory. */
    .tools-section{padding-top:118px!important;border-top:2px solid var(--work-ink);}
    .tools-section > .center{display:grid;grid-template-columns:.55fr 1fr;margin:0 0 54px!important;align-items:end;}
    .tools-section .section-eyebrow{align-self:start;}
    .usecases-grid{grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid var(--work-ink);}
    .usecases-grid > a{position:relative;border-bottom:1px solid #aaa89f;text-decoration:none!important;}
    .usecases-grid > a:nth-child(odd){border-right:1px solid #aaa89f;}
    .usecases-grid > a::after{content:"↗";position:absolute;right:26px;top:30px;color:var(--work-blue);font:700 1.35rem/1 var(--fm);}
    .browser-page .usecase-card{
        min-height:168px;
        display:grid;
        grid-template-columns:54px 1fr;
        align-content:start;
        gap:0 20px;
        padding:28px 66px 28px 26px;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }
    .browser-page .usecase-card:hover{transform:none;background:var(--work-white);box-shadow:none;}
    .usecase-icon{grid-row:1 / span 2;width:42px;height:42px;margin:0;border-radius:0;background:var(--work-blue);}
    .usecase-icon svg{color:#fff;}
    .usecase-title{margin:2px 0 8px;font-size:1.05rem;}
    .usecase-desc{line-height:1.6;}

    /* Final conversion area: loud, simple, immediate. */
    .browser-page .final-cta{
        padding:102px 28px;
        background:var(--work-acid);
        color:var(--work-ink);
        text-align:left;
        border-block:2px solid var(--work-ink);
    }
    .final-cta::before{display:none;}
    .final-cta .cta-band-inner{max-width:1184px;margin:0 auto;display:grid;grid-template-columns:1fr .7fr;gap:24px 80px;}
    .final-cta h2{margin:0;color:var(--work-ink);font-size:clamp(3rem,7vw,7rem);line-height:.82;letter-spacing:-.075em;}
    .final-cta p{align-self:end;margin:0;color:#34372f;font-size:1.1rem;line-height:1.7;}
    .final-cta .cta-band-btns{grid-column:2;justify-content:flex-start;margin-top:18px;}
    .final-cta .btn-white{min-height:56px;padding-inline:28px;border:2px solid var(--work-ink);border-radius:0;background:var(--work-ink);color:#fff;box-shadow:7px 7px 0 var(--work-blue);}
    .final-cta .btn-white:hover{background:var(--work-blue);transform:translate(2px,2px);box-shadow:5px 5px 0 var(--work-ink);}
    .browser-page .runner-section{width:100%;max-width:none;margin:0;padding:88px 28px 96px!important;background:var(--work-white);}
    .runner-callout{
        max-width:1100px;
        margin:0 auto;
        display:grid;
        grid-template-columns:1fr 1.15fr auto;
        gap:28px;
        align-items:center;
        padding:34px 36px;
        border:2px solid var(--work-ink);
        background:var(--work-ink);
        color:#fff;
        box-shadow:10px 10px 0 var(--work-acid);
    }
    .runner-heading{display:flex;align-items:center;gap:12px;}
    .runner-heading svg{flex:0 0 auto;color:var(--work-acid);}
    .runner-heading h3{margin:0;font-size:1rem;line-height:1.35;}
    .runner-callout p{margin:0;color:#bfc1c7;font-size:.85rem;line-height:1.65;}
    .runner-callout p a{display:inline-block;padding:1px 5px;background:var(--work-acid);color:var(--work-ink);font-weight:800;text-decoration:none;box-shadow:2px 2px 0 var(--work-blue);}
    .runner-link{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border:1px solid #fff;color:#fff;text-decoration:none;font-size:.78rem;font-weight:800;white-space:nowrap;}
    .runner-link:hover{background:#fff;color:var(--work-ink);}
    .browser-page .footer{background:var(--work-ink);border-top:0;}

    @media(max-width:1080px){
        .browser-page .hero-shell{grid-template-columns:1fr;gap:62px;}
        .browser-page .hero-copy{text-align:left;}
        .browser-page .hero h1,.browser-page .hero-desc{margin-left:0;margin-right:0;}
        .browser-page .hero-actions,.browser-page .hero-proof{justify-content:flex-start;}
        .editor-demo{max-width:860px;margin:0;transform:none;}
        .editorial-intro{grid-template-columns:1fr;grid-template-areas:"heading" "answer" "copy" "features";}
        .browser-page .feat-grid{grid-template-columns:repeat(2,1fr);}
        .browser-page .feat-card:nth-child(2){border-right:0;}
        .browser-page .feat-card:nth-child(-n+2){border-bottom:1px solid rgba(17,19,24,.35);}
        .process-section{grid-template-columns:1fr;}
        .process-section > .center,.process-section > .process-note,.process-section > .benefits-grid,.process-section > .process-code,.process-section > .process-limit{grid-column:1;grid-row:auto;}
        .process-note{min-height:260px;}
        .security-section .benefits-grid{grid-template-columns:repeat(2,1fr);}
        .security-section .benefit-item:nth-child(2){border-right:0;}
        .security-section .benefit-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.38);}
        .runner-callout{grid-template-columns:1fr 1fr;}
        .runner-link{grid-column:1 / -1;width:max-content;}
    }
    @media(max-width:760px){
        .browser-page .hero{padding:62px 20px 54px;}
        .browser-page .hero h1{max-width:100%;font-size:clamp(2.65rem,12.5vw,4.25rem);line-height:.97;letter-spacing:-.05em;}
        .browser-page .hero h1 span{display:block;}
        .browser-page .hero-actions{display:grid;grid-template-columns:1fr;}
        .browser-page .hero-actions .btn{width:100%;}
        .browser-page .hero-proof{grid-template-columns:1fr;}
        .browser-page .hero-proof span{padding:7px 0;border-left:0;}
        .editor-demo{box-shadow:8px 8px 0 var(--work-blue);}
        .demo-workspace{grid-template-columns:36px 1fr;min-height:300px;}
        .demo-preview{display:none;}
        .intent-nav-inner{padding:0 20px;}
        .intent-nav a{padding:14px 16px;}
        .browser-page .section,.browser-page .section + .section{padding:84px 20px;}
        .browser-page .section-title{font-size:clamp(2.25rem,11vw,3.6rem);}
        .editorial-intro{row-gap:30px;}
        .answer-box{padding:28px;box-shadow:7px 7px 0 var(--work-ink);}
        .browser-page .feat-grid{grid-template-columns:1fr;}
        .browser-page .feat-card{min-height:0;border-right:0!important;border-bottom:1px solid rgba(17,19,24,.35)!important;}
        .browser-page .feat-card:last-child{border-bottom:0!important;}
        .browser-page .feat-icon{margin-bottom:28px;}
        .process-section{gap:48px;}
        .process-section .benefit-item{grid-template-columns:44px 34px 1fr;}
        .compare-section > .center,
        .quickstart-section > .center,
        .capabilities-section > .center,
        .security-section > .center,
        .tools-section > .center{display:block;}
        .compare-section .section-sub,
        .quickstart-section .section-sub,
        .capabilities-section .section-sub,
        .security-section .section-sub{margin-top:22px;}
        .compare-strip{grid-template-columns:1fr;}
        .compare-col{min-height:0;padding:34px 28px;}
        .compare-label{margin-bottom:42px;}
        .steps-wrap{grid-template-columns:1fr;}
        .browser-page .step-card,.browser-page .step-card + .step-card{min-height:0;padding:28px 0;border-right:0;border-bottom:1px solid #cbc8be;}
        .step-num{margin-bottom:36px;}
        .security-section{grid-template-columns:1fr;}
        .security-section > .center,.security-section > p,.security-section > pre,.security-section > .benefits-grid,.security-section > p:last-child{grid-column:1!important;grid-row:auto!important;}
        .security-section > pre{margin:8px 7px 18px 0!important;box-shadow:7px 7px 0 var(--work-acid);}
        .security-section .benefits-grid{grid-template-columns:1fr;}
        .security-section .benefit-item{min-height:0;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.38)!important;}
        .security-section .benefit-icon{margin-bottom:32px;}
        .faq-section{display:block;}
        .faq-section > .center{position:static;margin-bottom:52px!important;}
        .tools-section{padding-top:84px!important;}
        .usecases-grid{grid-template-columns:1fr;}
        .usecases-grid > a:nth-child(odd){border-right:0;}
        .final-cta .cta-band-inner{grid-template-columns:1fr;}
        .final-cta p,.final-cta .cta-band-btns{grid-column:1;}
        .final-cta p{margin-top:20px;}
        .browser-page .runner-section{padding:64px 20px 76px!important;}
        .runner-callout{grid-template-columns:1fr;padding:26px 24px;}
        .runner-link{grid-column:1;white-space:normal;}
    }
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
    
/* Shared editorial system for the topic landing pages. The approved browser
   editor page uses the detailed .browser-page rules above; these selectors
   adapt its type, color, spacing and interaction language to sibling pages. */
body.editorial-landing {
  --work-paper:#f2efe6;
  --work-white:#fffdf7;
  --work-ink:#111318;
  --work-blue:#2947ff;
  --work-acid:#d8ff52;
  --work-muted:#5f625f;
  --ink:#111318;
  --muted:#5f625f;
  --accent:#2947ff;
  --accent-dk:#1429a8;
  --accent-lt:#e8ebff;
  --accent-2:#d8ff52;
  --line:#c9c7bd;
  --surface:#fffdf7;
  --bg:#f2efe6;
  background:var(--work-paper);
  color:var(--work-ink);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.editorial-landing a:focus-visible,
body.editorial-landing button:focus-visible {
  outline:3px solid var(--work-blue);
  outline-offset:3px;
}
body.editorial-landing .nav {
  background:var(--work-ink);
  border-color:rgba(255,255,255,.18);
  backdrop-filter:none;
}
body.editorial-landing .nav-logo-mark {
  background:var(--work-acid);
  border-radius:2px;
}
body.editorial-landing .nav-logo-mark svg { color:var(--work-ink);stroke:currentColor; }
body.editorial-landing .nav-logo-text,
body.editorial-landing .nav-links a { color:#fff; }
body.editorial-landing .nav-links a {
  font-size:.74rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}
body.editorial-landing .nav-links a:hover { color:var(--work-ink);background:var(--work-acid); }
body.editorial-landing .nav-ctas .btn-primary {
  background:var(--work-acid);
  color:var(--work-ink);
  border-radius:2px;
  box-shadow:none;
}
body.editorial-landing .nav-ctas .btn-primary:hover {
  background:#fff;
  color:var(--work-ink);
}
body.editorial-landing .nav-hamburger {
  border-color:rgba(255,255,255,.35);
  border-radius:2px;
  color:#fff;
}
body.editorial-landing .nav-hamburger svg { color:currentColor;stroke:currentColor; }
body.editorial-landing .nav-hamburger:hover,
body.editorial-landing .nav-hamburger[aria-expanded="true"] {
  border-color:var(--work-acid);
  background:var(--work-acid);
  color:var(--work-ink);
}
body.editorial-landing .hero {
  min-height:0;
  padding:104px 28px 92px;
  background:var(--work-paper);
  border-bottom:2px solid var(--work-ink);
  color:var(--work-ink);
  text-align:left;
}
body.editorial-landing .hero-grid,
body.editorial-landing .hero-glow { display:none; }
body.editorial-landing .hero-inner {
  max-width:1240px;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  column-gap:88px;
  align-items:center;
}
body.editorial-landing .hero-badge {
  grid-column:1;
  width:max-content;
  max-width:100%;
  margin:0 0 26px;
  padding:0 0 12px;
  border:0;
  border-bottom:2px solid var(--work-ink);
  border-radius:0;
  background:transparent;
  color:var(--work-ink);
  font:800 .7rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.11em;
  animation:none;
}
body.editorial-landing .hero-badge svg { color:var(--work-blue); }
body.editorial-landing .hero h1 {
  grid-column:1;
  max-width:780px;
  margin:0 0 24px;
  color:var(--work-ink);
  font-size:clamp(2.9rem,5.4vw,5.7rem);
  font-weight:900;
  line-height:.97;
  letter-spacing:-.055em;
  text-wrap:balance;
  animation:none;
}
body.editorial-landing .hero h1 em {
  background:linear-gradient(92deg,var(--work-blue),#5844d7 55%,#087667);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
body.editorial-landing .hero-desc {
  grid-column:1;
  max-width:620px;
  margin:0 0 34px;
  color:#414448;
  font-size:1.08rem;
  line-height:1.75;
  animation:none;
}
body.editorial-landing .hero-actions {
  grid-column:1;
  justify-content:flex-start;
  animation:none;
}
body.editorial-landing .hero-actions .btn-primary {
  min-height:54px;
  padding-inline:25px;
  border:2px solid var(--work-blue);
  border-radius:2px;
  background:var(--work-blue);
  color:#fff;
  box-shadow:6px 6px 0 var(--work-ink);
}
body.editorial-landing .hero-actions .btn-primary:hover {
  background:var(--accent-dk);
  color:#fff;
  box-shadow:4px 4px 0 var(--work-ink);
  transform:translate(2px,2px);
}
body.editorial-landing .hero-stats {
  grid-column:2;
  grid-row:1 / span 4;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-self:stretch;
  margin:0 10px 10px 0;
  padding:40px 28px 24px;
  border:2px solid var(--work-ink);
  border-top:46px solid var(--work-ink);
  background:var(--work-white);
  box-shadow:10px 10px 0 var(--work-blue);
  animation:none;
  position:relative;
}
body.editorial-landing .hero-stats::before {
  content:"HCODX / WORKSPACE";
  position:absolute;
  top:-30px;
  left:26px;
  color:#d9deeb;
  font:700 .67rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.07em;
}
body.editorial-landing .hero-stats .stat {
  min-height:108px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 10px;
  border-top:1px solid #bbb9b0;
  text-align:left;
}
body.editorial-landing .hero-stats .stat:nth-child(odd) { border-right:1px solid #bbb9b0; }
body.editorial-landing .stat-num {
  color:var(--work-blue);
  font-size:clamp(1.1rem,1.9vw,1.65rem);
  line-height:1.1;
}
body.editorial-landing .stat-label {
  margin-top:9px;
  color:#5d6266;
  font:.7rem/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.06em;
}
body.editorial-landing .section {
  max-width:1240px;
  padding:104px 28px;
}
body.editorial-landing .section + .section { padding-top:104px; }
body.editorial-landing .section-eyebrow {
  color:var(--work-blue);
  font:800 .72rem/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.12em;
}
body.editorial-landing .section-eyebrow::before { content:"//";color:var(--work-ink); }
body.editorial-landing .section-eyebrow svg { display:none; }
body.editorial-landing .section-title {
  max-width:900px;
  color:var(--work-ink);
  font-size:clamp(2.25rem,4vw,4.35rem);
  font-weight:900;
  line-height:1.03;
  letter-spacing:-.058em;
}
body.editorial-landing .section-sub { color:var(--work-muted);line-height:1.75; }
body.editorial-landing .feat-grid,
body.editorial-landing .steps-wrap,
body.editorial-landing .usecases-grid { gap:0;border-top:2px solid var(--work-ink);border-bottom:2px solid var(--work-ink); }
body.editorial-landing .feat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.editorial-landing .steps-wrap { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.editorial-landing .usecases-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.editorial-landing .feat-card,
body.editorial-landing .step-card,
body.editorial-landing .usecase-card {
  min-height:245px;
  padding:28px;
  border:0;
  border-right:1px solid #b5b3aa;
  border-bottom:1px solid #b5b3aa;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:background .16s ease;
}
body.editorial-landing .feat-card::before { display:none; }
body.editorial-landing .feat-card:hover,
body.editorial-landing .step-card:hover,
body.editorial-landing .usecase-card:hover { background:var(--work-white);box-shadow:none;transform:none; }
body.editorial-landing .feat-icon,
body.editorial-landing .usecase-icon { border-radius:0;background:var(--work-blue); }
body.editorial-landing .feat-icon svg,
body.editorial-landing .usecase-icon svg { color:#fff; }
body.editorial-landing .step-num { border-radius:0;background:var(--work-acid);color:var(--work-ink);border:1px solid var(--work-ink); }
body.editorial-landing .benefits-bg { background:var(--work-ink); }
body.editorial-landing .benefits-bg .section-title { color:#fff!important; }
body.editorial-landing .benefits-bg .section-sub { color:#c3c5cc!important; }
body.editorial-landing .benefits-bg .section-eyebrow { color:var(--work-acid)!important; }
body.editorial-landing .benefits-bg .section-eyebrow::before { color:#fff; }
body.editorial-landing .benefit-item {
  border:0;
  border-top:1px solid #555963;
  border-radius:0;
  background:transparent;
}
body.editorial-landing .benefit-item:hover { border-color:#a8adbb;background:rgba(255,255,255,.05); }
body.editorial-landing .benefit-icon { border-radius:0;background:var(--work-blue); }
body.editorial-landing .benefit-icon svg { color:#fff; }
body.editorial-landing .compare-strip { border:2px solid var(--work-ink);border-radius:0;background:var(--work-white); }
body.editorial-landing .faq-list { max-width:920px;gap:0;border-top:2px solid var(--work-ink); }
body.editorial-landing .faq-item { border:0;border-bottom:1px solid #aaa89f;border-radius:0;background:transparent; }
body.editorial-landing .faq-q:hover { background:var(--work-ink);color:#fff; }
body.editorial-landing .faq-chevron { border:1px solid var(--work-ink);border-radius:0;background:transparent; }
body.editorial-landing .faq-chevron svg { color:var(--work-ink);stroke:currentColor; }
body.editorial-landing .faq-q:hover .faq-chevron { background:var(--work-acid);border-color:var(--work-acid); }
body.editorial-landing .faq-q:hover .faq-chevron svg { color:var(--work-ink); }
body.editorial-landing .faq-item.open .faq-q { color:var(--work-blue); }
body.editorial-landing .faq-item.open .faq-q:hover { color:#fff; }
body.editorial-landing .faq-item.open .faq-chevron { background:var(--work-blue);border-color:var(--work-blue); }
body.editorial-landing .faq-item.open .faq-chevron svg { color:#fff; }
body.editorial-landing .faq-item.open .faq-q:hover .faq-chevron { background:var(--work-acid);border-color:var(--work-acid); }
body.editorial-landing .faq-item.open .faq-q:hover .faq-chevron svg { color:var(--work-ink); }
body.editorial-landing .topic-links { border-top:2px solid var(--work-ink); }
body.editorial-landing .topic-links .center { text-align:left;margin-bottom:38px; }
body.editorial-landing .topic-links .section-sub { margin-bottom:0; }
body.editorial-landing .topic-links-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:2px solid var(--work-ink);
  border-bottom:2px solid var(--work-ink);
}
body.editorial-landing .topic-link {
  min-height:190px;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:28px;
  border-right:1px solid #b5b3aa;
  color:var(--work-ink);
  text-decoration:none;
}
body.editorial-landing .topic-link:last-child { border-right:0; }
body.editorial-landing .topic-link:hover { background:var(--work-white); }
body.editorial-landing .topic-link-title {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:1.18rem;
  font-weight:800;
  letter-spacing:-.025em;
}
body.editorial-landing .topic-link-title::after { content:"↗";color:var(--work-blue); }
body.editorial-landing .topic-link-desc { color:var(--work-muted);font-size:.92rem;line-height:1.65; }
body.editorial-landing .cta-band {
  border-block:2px solid var(--work-ink);
  background:var(--work-acid);
  text-align:left;
}
body.editorial-landing .cta-band::before { display:none; }
body.editorial-landing .cta-band-inner { max-width:1184px; }
body.editorial-landing .cta-band h2 { color:var(--work-ink);font-size:clamp(2.7rem,5vw,5.2rem);line-height:.95;letter-spacing:-.06em; }
body.editorial-landing .cta-band p { color:#34372f; }
body.editorial-landing .cta-band .btn-white { border:2px solid var(--work-ink);border-radius:0;background:var(--work-ink);color:#fff;box-shadow:6px 6px 0 var(--work-blue); }
body.editorial-landing .footer { background:var(--work-ink); }
/* Page-specific content components: download-html-css-js-project */
@scope (body.editorial-landing.page-download-html-css-js-project) {

    .mk-lead a,.mk-card a{color:var(--accent);font-weight:600;}
    .mk-note a{color:var(--accent-2);font-weight:600;}
    .code-inline{font-family:var(--fm);font-size:.88em;background:var(--accent-lt);color:var(--accent-dk);padding:1px 6px;border-radius:5px;word-break:break-word;}
    :root[data-theme="dark"] .code-inline{background:rgba(42,92,246,.18);color:#9db8ff;}
    /* Rich content: code, tree, tables, checklist, deploy guides */
    .rc-code{max-width:760px;margin:0 auto 22px;background:#0e1424;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--sh);}
    .rc-code-h{display:flex;align-items:center;gap:8px;padding:8px 14px;font:700 .68rem/1 var(--ff);letter-spacing:.09em;text-transform:uppercase;color:#fff;background:#26304a;}
    .rc-code-h .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);}
    .rc-code pre{margin:0;padding:15px 17px;overflow-x:auto;}
    .rc-code code{font-family:var(--fm);font-size:.8rem;line-height:1.75;color:#dbe3f4;white-space:pre;display:block;}
    .rc-code .cm{color:#7f8bb0;}
    .rc-tablewrap{max-width:820px;margin:0 auto;overflow-x:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);}
    .rc-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px;background:var(--surface);}
    .rc-table th,.rc-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55;color:var(--ink);}
    .rc-table thead th{background:var(--accent-lt);color:var(--accent-dk);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;}
    .rc-table tbody tr:last-child td{border-bottom:none;}
    .rc-table td code{font-family:var(--fm);font-size:.85em;background:var(--accent-lt);color:var(--accent-dk);padding:1px 5px;border-radius:4px;white-space:nowrap;}
    .rc-check{max-width:820px;margin:0 auto;list-style:none;padding:0;display:grid;gap:12px;}
    .rc-check li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:.94rem;color:var(--muted);line-height:1.6;}
    .rc-check li svg{flex-shrink:0;width:19px;height:19px;color:var(--accent-2);margin-top:2px;}
    .rc-check li strong{color:var(--ink);font-weight:700;}
    .rc-guide{max-width:840px;margin:0 auto;display:grid;gap:22px;}
    .rc-guide-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 30px;}
    .rc-guide-card h3{display:flex;align-items:center;gap:10px;font-size:1.14rem;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em;}
    .rc-guide-card .rc-badge{font:700 .66rem/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-lt);padding:5px 9px;border-radius:6px;}
    .rc-guide-card p.rc-intro{font-size:.94rem;color:var(--muted);line-height:1.6;margin:0 0 16px;}
    .rc-guide-card ol{margin:0;padding-left:22px;color:var(--muted);font-size:.94rem;line-height:1.7;}
    .rc-guide-card ol li{margin-bottom:9px;}
    .rc-guide-card ol li strong{color:var(--ink);font-weight:700;}
    .rc-guide-card .rc-code{max-width:none;margin:14px 0 4px;}
    
}
/* Page-specific content components: html-ai-builder-tools */
@scope (body.editorial-landing.page-html-ai-builder-tools) {

    .code-inline{font-family:var(--fm);font-size:.88em;background:var(--accent-lt);color:var(--accent-dk);padding:1px 6px;border-radius:5px;word-break:break-word;}
    :root[data-theme="dark"] .code-inline{background:rgba(42,92,246,.18);color:#9db8ff;}
    .mk-lead a,.mk-card a{color:var(--accent);font-weight:600;}
    .mk-note a{color:var(--accent-2);font-weight:600;}
    /* Building-blocks library */
    .rc-item{max-width:820px;margin:0 auto 44px;}
    .rc-item h3{font-size:1.2rem;font-weight:700;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em;}
    .rc-why{font-size:.96rem;color:var(--muted);line-height:1.65;margin:0 0 16px;}
    .rc-code{background:#0e1424;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--sh);margin:0 0 14px;}
    .rc-code:last-child{margin-bottom:0;}
    .rc-code-h{display:flex;align-items:center;gap:8px;padding:8px 14px;font:700 .68rem/1 var(--ff);letter-spacing:.09em;text-transform:uppercase;color:#fff;background:#26304a;}
    .rc-code-h.css{background:#1f5a4a;}
    .rc-code-h .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);}
    .rc-code-h .tag{margin-left:auto;font-weight:500;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.6);}
    .rc-code pre{margin:0;padding:15px 17px;overflow-x:auto;}
    .rc-code code{font-family:var(--fm);font-size:.79rem;line-height:1.7;color:#dbe3f4;white-space:pre;display:block;}
    .rc-code .cm{color:#7f8bb0;}
    .rc-step{max-width:820px;margin:0 auto;}
    .rc-step .rc-move{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px;}
    .rc-step .rc-move .n{flex-shrink:0;width:30px;height:30px;border-radius:8px;background:var(--accent-lt);color:var(--accent-dk);font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;margin-top:2px;}
    .rc-step .rc-move p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.7;}
    .rc-step .rc-move p strong{color:var(--ink);font-weight:700;}
    
}
/* Page-specific content components: html-code-validator-online */
@scope (body.editorial-landing.page-html-code-validator-online) {

    .code-inline{font-family:var(--fm);font-size:.88em;background:var(--accent-lt);color:var(--accent-dk);padding:1px 6px;border-radius:5px;word-break:break-word;}
    :root[data-theme="dark"] .code-inline{background:rgba(42,92,246,.18);color:#9db8ff;}
    .mk-lead a{color:var(--accent);font-weight:600;}
    .mk-note a{color:var(--accent-2);font-weight:600;}
    /* Rich content: wrong/right code pairs, tables, checklist */
    .rc-item{max-width:880px;margin:0 auto 40px;}
    .rc-item h3{font-size:1.16rem;font-weight:700;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em;}
    .rc-why{font-size:.95rem;color:var(--muted);line-height:1.65;margin:0 0 16px;}
    .rc-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
    @media(max-width:760px){.rc-pair{grid-template-columns:1fr;}}
    .rc-code{background:#0e1424;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--sh);}
    .rc-code-h{display:flex;align-items:center;gap:8px;padding:8px 14px;font:700 .68rem/1 var(--ff);letter-spacing:.09em;text-transform:uppercase;color:#fff;}
    .rc-code-h.bad{background:#c2384c;}
    .rc-code-h.good{background:#0f8a63;}
    .rc-code-h .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.65);}
    .rc-code pre{margin:0;padding:14px 16px;overflow-x:auto;}
    .rc-code code{font-family:var(--fm);font-size:.8rem;line-height:1.7;color:#dbe3f4;white-space:pre;display:block;}
    .rc-tablewrap{max-width:900px;margin:0 auto;overflow-x:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);}
    .rc-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px;background:var(--surface);}
    .rc-table th,.rc-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55;color:var(--ink);}
    .rc-table thead th{background:var(--accent-lt);color:var(--accent-dk);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;}
    .rc-table tbody tr:last-child td{border-bottom:none;}
    .rc-table td code{font-family:var(--fm);font-size:.85em;background:var(--accent-lt);color:var(--accent-dk);padding:1px 5px;border-radius:4px;}
    .rc-table .col-mistake{font-weight:600;color:var(--ink);}
    .rc-check{max-width:820px;margin:0 auto;list-style:none;padding:0;display:grid;gap:12px;}
    .rc-check li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:.94rem;color:var(--muted);line-height:1.6;}
    .rc-check li svg{flex-shrink:0;width:19px;height:19px;color:var(--accent-2);margin-top:2px;}
    .rc-check li strong{color:var(--ink);font-weight:700;}
    
}
/* Page-specific content components: html-viewer-free-server-online */
@scope (body.editorial-landing.page-html-viewer-free-server-online) {

    .code-inline{font-family:var(--fm);font-size:.88em;background:var(--accent-lt);color:var(--accent-dk);padding:1px 6px;border-radius:5px;word-break:break-word;}
    :root[data-theme="dark"] .code-inline{background:rgba(42,92,246,.18);color:#9db8ff;}
    .mk-lead a,.mk-card a{color:var(--accent);font-weight:600;}
    .mk-note a{color:var(--accent-2);font-weight:600;}
    /* Rich content: reference tables */
    .rc-tablewrap{max-width:900px;margin:0 auto;overflow-x:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);}
    .rc-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:600px;background:var(--surface);}
    .rc-table th,.rc-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55;color:var(--ink);}
    .rc-table thead th{background:var(--accent-lt);color:var(--accent-dk);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;}
    .rc-table tbody tr:last-child td{border-bottom:none;}
    .rc-table td:first-child{font-weight:600;}
    .rc-table td code{font-family:var(--fm);font-size:.85em;background:var(--accent-lt);color:var(--accent-dk);padding:1px 5px;border-radius:4px;}
    .rc-yes{display:inline-flex;align-items:center;gap:6px;color:#0f8a63;font-weight:700;}
    .rc-no{display:inline-flex;align-items:center;gap:6px;color:#c2384c;font-weight:700;}
    .rc-partly{display:inline-flex;align-items:center;gap:6px;color:var(--warn);font-weight:700;}
    .rc-yes svg,.rc-no svg,.rc-partly svg{width:15px;height:15px;}
    
}
/* Page-specific content components: multi-file-html-editor */
@scope (body.editorial-landing.page-multi-file-html-editor) {

    .rich-tbl-wrap{max-width:920px;margin:0 auto;overflow-x:auto;}
    .rich-tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;}
    .rich-tbl th,.rich-tbl td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6;}
    .rich-tbl thead th{background:var(--accent-lt);color:var(--accent-dk);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;}
    .rich-tbl tbody tr:last-child td{border-bottom:none;}
    .rich-tbl td{color:var(--muted);}
    .rich-tbl td:first-child{color:var(--ink);font-weight:600;}
    .rich-tbl code{font-family:var(--fm);font-size:.85em;background:var(--accent-lt);color:var(--accent-dk);padding:1px 5px;border-radius:4px;}
    .rich-tbl tbody tr:nth-child(even){background:rgba(42,92,246,.02);}
    .rich-tbl tr.rich-cat td{font-weight:800;color:var(--accent-dk);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;background:var(--bg);}
    .rich-pill{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap;}
    .rich-pill.y{background:var(--accent-2lt);color:#0a8a63;}
    .rich-pill.p{background:#fff4e0;color:#b06f00;}
    .rich-pill.n{background:#fdeaea;color:#c0392b;}
    
}
/* Page-specific content components: online-html-editor-console */
@scope (body.editorial-landing.page-online-html-editor-console) {

    .rich-tbl-wrap{max-width:920px;margin:0 auto;overflow-x:auto;}
    .rich-tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;}
    .rich-tbl th,.rich-tbl td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6;}
    .rich-tbl thead th{background:var(--accent-lt);color:var(--accent-dk);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;}
    .rich-tbl tbody tr:last-child td{border-bottom:none;}
    .rich-tbl td{color:var(--muted);}
    .rich-tbl td:first-child{color:var(--ink);font-weight:600;}
    .rich-tbl code{font-family:var(--fm);font-size:.85em;background:var(--accent-lt);color:var(--accent-dk);padding:1px 5px;border-radius:4px;}
    .rich-tbl tbody tr:nth-child(even){background:rgba(42,92,246,.02);}
    .rich-tbl tr.rich-cat td{font-weight:800;color:var(--accent-dk);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;background:var(--bg);}
    .rich-num{width:32px;height:32px;border-radius:8px;background:var(--accent-lt);color:var(--accent-dk);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--fm);font-size:15px;}
    
}
/* Page-specific content components: vscode-online-free */
@scope (body.editorial-landing.page-vscode-online-free) {

    .rich-tbl-wrap{max-width:920px;margin:0 auto;overflow-x:auto;}
    .rich-tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;}
    .rich-tbl th,.rich-tbl td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6;}
    .rich-tbl thead th{background:var(--accent-lt);color:var(--accent-dk);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;}
    .rich-tbl tbody tr:last-child td{border-bottom:none;}
    .rich-tbl td{color:var(--muted);}
    .rich-tbl td:first-child{color:var(--ink);font-weight:600;}
    .rich-tbl code{font-family:var(--fm);font-size:.85em;background:var(--accent-lt);color:var(--accent-dk);padding:1px 5px;border-radius:4px;}
    .rich-tbl tbody tr:nth-child(even){background:rgba(42,92,246,.02);}
    .rich-tbl tr.rich-cat td{font-weight:800;color:var(--accent-dk);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;background:var(--bg);}
    .rich-pill{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap;}
    .rich-pill.y{background:var(--accent-2lt);color:#0a8a63;}
    .rich-pill.p{background:#fff4e0;color:#b06f00;}
    .rich-pill.n{background:#fdeaea;color:#c0392b;}
    
}
@media(max-width:980px) {
  body.editorial-landing .hero-inner { grid-template-columns:1fr; }
  body.editorial-landing .hero-stats { grid-column:1;grid-row:auto;margin-top:54px;max-width:720px; }
  body.editorial-landing .feat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
  body.editorial-landing .hero { padding:68px 20px 70px; }
  body.editorial-landing .hero h1 { font-size:clamp(2.6rem,11vw,4rem); }
  body.editorial-landing .hero-stats { grid-template-columns:1fr 1fr;gap:0;margin-right:8px;padding:20px 12px 12px; }
  body.editorial-landing .hero-stats .stat { min-height:100px;padding:12px 9px; }
  body.editorial-landing .section,
  body.editorial-landing .section + .section { padding:80px 20px; }
  body.editorial-landing .feat-grid,
  body.editorial-landing .steps-wrap,
  body.editorial-landing .usecases-grid,
  body.editorial-landing .topic-links-grid { grid-template-columns:1fr; }
  body.editorial-landing .feat-card,
  body.editorial-landing .step-card,
  body.editorial-landing .usecase-card { min-height:0;border-right:0; }
  body.editorial-landing .topic-link { min-height:0;border-right:0;border-bottom:1px solid #b5b3aa; }
  body.editorial-landing .topic-link:last-child { border-bottom:0; }
  body.editorial-landing .compare-strip { display:block;padding:28px; }
}

/* Static landing-template components. Generated pages carry both
   .browser-page and .landing-page so they inherit the approved layout,
   proportions, type system, mock editor and interaction states exactly.
   These rules only extend that system for configurable content modules. */
.landing-page .hero h1 {
    line-height:1.08;
    letter-spacing:-.045em;
}
.landing-page .section-title {
    line-height:1.09;
    letter-spacing:-.052em;
    text-wrap:balance;
}
.landing-page .compare-title {line-height:1.16;letter-spacing:-.025em;}
.landing-page .process-note strong {line-height:1.2;letter-spacing:-.025em;}
.landing-page .step-title {line-height:1.28;}
.landing-page .usecase-title {line-height:1.35;}
.landing-page .faq-q {line-height:1.45;}
.landing-page .preview-heading {line-height:1.23;}
.landing-page .final-cta h2 {
    font-size:clamp(2.8rem,5.6vw,6rem);
    line-height:1.1;
    letter-spacing:-.055em;
    text-wrap:balance;
    overflow-wrap:break-word;
}
.landing-page .nav-logo-mark svg,
.landing-page .footer-brand-icon svg {width:20px;height:20px;display:block;stroke:currentColor;}
.landing-page .hero h1 .hero-highlight {display:block;color:var(--work-blue);}
.landing-page .hero h1 .hero-highlight--inline {display:inline;}
.landing-page .demo-rail svg {width:18px;height:18px;display:block;stroke:currentColor;}
.landing-page .demo-rail span {font:700 1.15rem/1 var(--fm);}
.landing-page .code-lines {overflow:hidden;text-overflow:clip;}
.landing-page .code-lines div {min-height:1.75em;}
.landing-page .preview-card {min-height:230px;}
.landing-page .landing-visual--preview .demo-preview {background:#f5f2eb;}
.landing-page .landing-visual--validation .demo-preview {background:#eff5e4;}
.landing-page .landing-visual--console .demo-preview {background:#121722;}
.landing-page .landing-visual--files .demo-preview,
.landing-page .landing-visual--export .demo-preview {background:#eef1ff;}
.landing-page .visual-log,
.landing-page .visual-files,
.landing-page .visual-check {
    display:flex;
    flex-direction:column;
    width:88%;
    min-height:230px;
    padding:24px;
    border:2px solid var(--work-ink);
    background:#fff;
    box-shadow:7px 7px 0 var(--work-cyan);
    text-align:left;
}
.landing-page .visual-log {
    background:#0b0e15;
    border-color:#e3e7f0;
    box-shadow:7px 7px 0 var(--work-acid);
    color:#fff;
}
.landing-page .visual-log-label,
.landing-page .visual-files-label {
    align-self:flex-start;
    margin-bottom:22px;
    padding:6px 9px;
    background:var(--work-blue);
    color:#fff;
    font:800 .6rem/1 var(--fm);
    letter-spacing:.08em;
}
.landing-page .visual-log strong,
.landing-page .visual-files strong,
.landing-page .visual-check strong {font-size:1.15rem;line-height:1.15;letter-spacing:-.04em;}
.landing-page .visual-log p,
.landing-page .visual-files p,
.landing-page .visual-check p {margin:12px 0 0;color:#5b606a;font-size:.76rem;line-height:1.55;}
.landing-page .visual-log p {color:#b5c1d3;}
.landing-page .visual-files > span:not(.visual-files-label) {
    display:block;
    padding:4px 0;
    border-bottom:1px solid #e3e5ee;
    color:#344bd3;
    font:700 .73rem/1.5 var(--fm);
}
.landing-page .visual-files strong {margin-top:18px;}
.landing-page .visual-check-rule {
    margin-top:12px;
    padding:7px 9px;
    background:#e9f8d2;
    color:#25441d;
    font:700 .68rem/1.2 var(--fm);
}
.landing-page .editorial-intro > .intro-copy {
    grid-area:copy;
    min-width:0;
    padding-top:26px;
    border-top:2px solid var(--work-rule);
}
.landing-page .intro-copy p {
    margin:0 0 18px;
    color:var(--work-muted);
    font-size:1rem;
    line-height:1.8;
}
.landing-page .intro-copy p:last-child {margin-bottom:0;}
.landing-page .editorial-intro:not(:has(.feat-grid)) {
    grid-template-areas:"heading answer" "copy answer";
}
.landing-page .process-section .benefit-text strong {color:#fff;}
.landing-page .process-section.no-note > .benefits-grid,
.landing-page .process-section.no-example > .benefits-grid {grid-row:1 / span 2;}
.landing-page .process-section.no-note > .process-code {grid-column:1;grid-row:2;}
.landing-page .process-section.no-example > .process-note {grid-column:1;grid-row:2;}
.landing-page .process-section.no-note.no-example > .benefits-grid {grid-row:1 / span 2;}
.landing-page .process-section:not(:has(.process-limit)) {padding-bottom:108px;}
.landing-page .process-section .process-code pre code,
.landing-page .landing-code pre code {white-space:pre;}
.landing-page .landing-example > .center {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px 76px;
    align-items:end;
    margin-bottom:48px;
}
.landing-page .landing-example .section-eyebrow {grid-column:1 / -1;}
.landing-page .landing-example .section-sub {grid-column:2;}
.landing-page .landing-example-grid {
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:76px;
    align-items:start;
    border-top:2px solid var(--work-ink);
    padding-top:32px;
}
.landing-page .landing-example-copy p {
    margin:0 0 22px;
    color:var(--work-muted);
    font-size:1rem;
    line-height:1.75;
}
.landing-page .landing-example-result {
    margin-top:38px;
    padding:26px;
    border:2px solid var(--work-ink);
    background:var(--work-acid);
    box-shadow:7px 7px 0 var(--work-blue);
}
.landing-page .landing-example-result span {
    display:block;
    margin-bottom:16px;
    font:800 .7rem/1 var(--fm);
    letter-spacing:.1em;
    text-transform:uppercase;
}
.landing-page .landing-example-result p {margin:0;color:var(--work-ink);font-weight:700;}
.landing-page .landing-code {min-width:0;margin:0;border:2px solid var(--work-ink);background:#0b0d12;box-shadow:8px 8px 0 var(--work-blue);}
.landing-page .landing-code figcaption {
    padding:14px 18px;
    border-bottom:1px solid #3d4049;
    color:#c9cedc;
    font:800 .67rem/1.3 var(--fm);
    letter-spacing:.1em;
    text-transform:uppercase;
}
.landing-page .landing-code pre {
    max-height:430px;
    margin:0;
    padding:25px;
    overflow:auto;
    color:#e7e9ef;
    font:500 .78rem/1.75 var(--fm);
}
.landing-page .compare-strip--3 {grid-template-columns:repeat(3,minmax(0,1fr));}
.landing-page .compare-strip--3 .compare-col {min-height:310px;padding:38px;}
.landing-page .compare-strip--3 .compare-col:nth-child(2) {background:var(--work-white);color:var(--work-ink);}
.landing-page .compare-strip--3 .compare-col:nth-child(3) {background:var(--work-acid);color:var(--work-ink);}
.landing-page .compare-strip--4 {grid-template-columns:repeat(2,minmax(0,1fr));}
.landing-page .compare-strip--4 .compare-col {min-height:285px;}
.landing-page .compare-strip--4 .compare-col:nth-child(3) {background:var(--work-ink);color:#fff;}
.landing-page .compare-strip--4 .compare-col:nth-child(3) .compare-desc {color:#d3d6de;}
.landing-page .compare-strip--4 .compare-col:nth-child(4) {background:var(--work-acid);color:var(--work-ink);}
.landing-page .compare-strip--4 .compare-col:nth-child(4) .compare-title,
.landing-page .compare-strip--4 .compare-col:nth-child(4) .compare-desc {color:var(--work-ink);}
.landing-page .quickstart-section .accuracy-note {margin-top:30px;}
.landing-page .steps-wrap[data-count="2"] {grid-template-columns:repeat(2,minmax(0,1fr));}
.landing-page .steps-wrap[data-count="4"] {grid-template-columns:repeat(4,minmax(0,1fr));}
.landing-page .faq-item h3 {margin:0;font:inherit;}
.landing-page .landing-related .center {margin-bottom:42px;}
.landing-page .landing-related .usecases-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.landing-page .landing-related .usecases-grid > a {color:inherit;}
.landing-page .landing-related .usecases-grid > a:nth-child(odd) {border-right:1px solid #aaa89f;}
.landing-page .landing-related .usecases-grid > a:last-child {border-right:0;}
.landing-page .landing-related .usecase-card {min-height:168px;}
.landing-page .landing-related .usecase-icon {width:38px;height:38px;background:var(--work-blue);color:#fff;}
.landing-page .landing-related .usecase-icon svg {width:19px;height:19px;color:#fff;}
.landing-page .nav-drawer-panel .drawer-link {color:var(--work-ink);font-weight:700;}
.landing-page .nav-drawer-panel .drawer-link:hover {background:var(--work-acid);color:var(--work-ink);}
.landing-page .landing-tool {
    padding-top:100px;
    border-bottom:2px solid var(--work-ink);
    scroll-margin-top:116px;
}
.landing-page .landing-tool > .center {margin-bottom:48px;}
.landing-page .landing-tool-grid {
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:36px;
    align-items:stretch;
}
.landing-page .landing-tool-controls {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:30px;
    border:2px solid var(--work-ink);
    background:var(--work-white);
    box-shadow:8px 8px 0 var(--work-blue);
}
.landing-page .landing-tool-label {
    display:block;
    margin-bottom:16px;
    color:var(--work-ink);
    font:800 .72rem/1.35 var(--fm);
    letter-spacing:.12em;
    text-transform:uppercase;
}
.landing-page .landing-tool-source {
    display:block;
    width:100%;
    min-height:270px;
    resize:vertical;
    padding:20px;
    border:2px solid var(--work-ink);
    border-radius:0;
    background:#0b0d12;
    color:#e6edf3;
    font:500 .8rem/1.7 var(--fm);
    tab-size:2;
}
.landing-page .landing-tool-source:focus-visible,
.landing-page .landing-tool-file:focus-visible {outline:3px solid var(--work-blue);outline-offset:3px;}
.landing-page .landing-tool-file {
    display:block;
    width:100%;
    min-height:170px;
    padding:38px 24px;
    border:2px dashed var(--work-ink);
    border-radius:0;
    background:var(--work-acid);
    color:var(--work-ink);
    font:700 .85rem/1.5 var(--fm);
}
.landing-page .landing-tool-file::file-selector-button {
    margin-right:18px;
    padding:10px 13px;
    border:2px solid var(--work-ink);
    border-radius:0;
    background:var(--work-ink);
    color:#fff;
    font:800 .7rem/1 var(--fm);
    text-transform:uppercase;
    cursor:pointer;
}
.landing-page .landing-tool-help {margin:16px 0 0;color:var(--work-muted);font-size:.86rem;line-height:1.65;}
.landing-page .landing-tool-actions {display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:25px;}
.landing-page .landing-tool-actions .btn {
    min-height:52px;
    padding:13px 21px;
    border:2px solid var(--work-blue);
    border-radius:2px;
    background:var(--work-blue);
    color:#fff;
    box-shadow:5px 5px 0 var(--work-ink);
    cursor:pointer;
}
.landing-page .landing-tool-actions .btn:hover {background:var(--work-blue-dark);color:#fff;transform:translate(2px,2px);box-shadow:3px 3px 0 var(--work-ink);}
.landing-page #viewer-status {color:var(--work-muted);font-size:.78rem;line-height:1.5;}
.landing-page .landing-tool-boundary {
    margin:auto 0 0;
    padding-top:22px;
    border-top:1px solid #b6b3a9;
    color:#414549;
    font-size:.85rem;
    line-height:1.65;
}
.landing-page .landing-tool-output {
    min-width:0;
    overflow:hidden;
    border:2px solid var(--work-ink);
    background:#fff;
    box-shadow:8px 8px 0 var(--work-acid);
}
.landing-page .landing-tool-output-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:54px;
    padding:12px 18px;
    background:var(--work-ink);
    color:#d4d7de;
    font:700 .68rem/1.3 var(--fm);
    letter-spacing:.04em;
}
.landing-page .landing-tool-live {padding:6px 8px;background:var(--work-acid);color:var(--work-ink);font-weight:900;}
.landing-page .landing-tool-output iframe {display:block;width:100%;min-height:440px;border:0;background:#fff;}
@media(max-width:1080px) {
    .landing-page .editorial-intro:not(:has(.feat-grid)) {grid-template-areas:"heading" "answer" "copy";}
    .landing-page .process-section.no-note > .benefits-grid,
    .landing-page .process-section.no-example > .benefits-grid,
    .landing-page .process-section.no-note > .process-code,
    .landing-page .process-section.no-example > .process-note {grid-column:1;grid-row:auto;}
    .landing-page .landing-example > .center {grid-template-columns:1fr;}
    .landing-page .landing-example .section-sub {grid-column:1;}
    .landing-page .landing-example-grid {grid-template-columns:1fr;gap:35px;}
    .landing-page .landing-tool-grid {grid-template-columns:1fr;gap:30px;}
}
@media(max-width:760px) {
    .landing-page .hero h1 {line-height:1.12;letter-spacing:-.04em;}
    .landing-page .section-title {line-height:1.12;letter-spacing:-.045em;}
    .landing-page .final-cta h2 {font-size:clamp(2.5rem,10vw,4rem);line-height:1.12;letter-spacing:-.045em;}
    .landing-page .hero h1 .hero-highlight {display:block;}
    .landing-page .landing-visual .demo-workspace {grid-template-columns:36px minmax(0,1fr);}
    .landing-page .landing-example-grid {padding-top:24px;}
    .landing-page .landing-code pre {padding:18px;font-size:.7rem;}
    .landing-page .steps-wrap[data-count="2"],
    .landing-page .steps-wrap[data-count="4"],
    .landing-page .landing-related .usecases-grid {grid-template-columns:1fr;}
    .landing-page .landing-related .usecases-grid > a {border-right:0!important;}
    .landing-page .landing-related .usecase-card {min-height:0;}
    .landing-page .compare-strip--3,
    .landing-page .compare-strip--4 {grid-template-columns:1fr;}
    .landing-page .compare-strip--3 .compare-col,
    .landing-page .compare-strip--4 .compare-col {min-height:0;}
    .landing-page .landing-tool {padding-top:78px;}
    .landing-page .landing-tool-controls {padding:21px;}
    .landing-page .landing-tool-source {min-height:250px;padding:14px;font-size:.72rem;}
    .landing-page .landing-tool-actions .btn {width:100%;}
    .landing-page .landing-tool-output iframe {min-height:360px;}
}

/* Match the homepage's readable heading scale across all marketing landings.
   Keep each page's wording and editorial layout; only typography changes. */
body.browser-page .hero h1 {
    font-size:clamp(2.05rem,3.9vw,3.15rem);
    line-height:1.08;
    letter-spacing:-.035em;
    overflow-wrap:break-word;
}
body.browser-page .section-title {
    font-size:clamp(1.95rem,3.2vw,2.85rem);
    line-height:1.1;
    letter-spacing:-.05em;
    overflow-wrap:break-word;
}
body.browser-page .compare-title {
    font-size:clamp(1.2rem,1.8vw,1.5rem);
    line-height:1.2;
}
body.browser-page .process-note strong {
    font-size:clamp(1.2rem,1.8vw,1.5rem);
    line-height:1.2;
}
body.browser-page .final-cta h2 {
    font-size:clamp(1.9rem,3.6vw,2.85rem);
    line-height:1.12;
    letter-spacing:-.04em;
    overflow-wrap:break-word;
}
@media(max-width:760px) {
    body.browser-page .hero h1 {
        font-size:clamp(1.85rem,8.4vw,2.4rem);
        line-height:1.14;
    }
    body.browser-page .section-title,
    body.browser-page .final-cta h2 {
        font-size:clamp(1.8rem,8vw,2.5rem);
        line-height:1.14;
    }
}