/*
Theme Name: SimpleBoards
Theme URI: https://simpleboardswp.com
Author: SimpleBoards
Author URI: https://simpleboardswp.com
Description: Official website theme for the SimpleBoards roadmap and feedback plugin.
Version: 1.1.0
Requires at least: 5.8
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simpleboards
*/

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --bg: #efedf8;
  --surface: #ffffff;
  --surface-2: #f4f1fc;
  --surface-3: #ecebfa;
  --border: rgba(99,102,241,0.1);
  --border-2: rgba(99,102,241,0.18);
  --text: #13132b;
  --text-2: #2d2d4e;
  --muted: #5c5b7d;
  --dim: #9a98b8;
  --accent: #6366f1;
  --accent-2: #a855f7;
  --accent-3: #c084fc;
  --accent-dark: #4f46e5;
  --accent-bg: rgba(99,102,241,0.08);
  --accent-bg-2: rgba(99,102,241,0.16);
  --green: #10b981;
  --green-2: #34d399;
  --green-bg: rgba(16,185,129,0.10);
  --cyan: #06b6d4;
  --cyan-2: #22d3ee;
  --amber: #f59e0b;
  --red: #ef4444;
  --pink: #ec4899;
  --pink-2: #f472b6;
  /* Gradient tokens. Indigo is dominant, violet is supporting. Pink and cyan
     are demoted to opt-in guest accents used only on emphasis spots (the
     featured pricing card, the "Most popular" badge, the dark AI section). */
  --grad-primary: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --grad-primary-soft: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(168,85,247,0.18));
  --grad-warm: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  --grad-cool: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
  --grad-fresh: linear-gradient(135deg, #22d3ee 0%, #6366f1 50%, #a855f7 100%);
  --grad-text: linear-gradient(120deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  --grad-text-warm: linear-gradient(120deg, #6366f1 0%, #a855f7 100%);
  --grad-icon-bg: linear-gradient(135deg, rgba(99,102,241,0.20), rgba(168,85,247,0.16));
  --font-d: 'DM Serif Display', Georgia, serif;
  --font-b: 'DM Sans', system-ui, sans-serif;
  --font-m: 'JetBrains Mono', monospace;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-full: 100px;
  --shadow-sm: 0 1px 3px rgba(99,102,241,0.06), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 20px rgba(99,102,241,0.1), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 48px rgba(99,102,241,0.14), 0 4px 14px rgba(0,0,0,0.05);
  --shadow-xl: 0 24px 80px rgba(99,102,241,0.16), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.02), 0 8px 32px rgba(99,102,241,0.09), 0 0 0 1px rgba(99,102,241,0.08);
  --trans: 0.3s cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; font-size: 16px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ============================================================
   BASE, BIGGER TYPE SCALE
   ============================================================ */
body {
  font-family: var(--font-b);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
  background:
    radial-gradient(ellipse 70% 50% at 8% -5%, rgba(99,102,241,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 55% 40% at 92% 8%, rgba(168,85,247,0.06) 0%, transparent 65%),
    var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-d); line-height: 1.08; letter-spacing: -0.032em; color: var(--text); font-weight: 400; }
h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); }
h4 { font-size: 1.02rem; font-family: var(--font-b); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
/* Italic single-word emphasis inside section headings makes DM Serif Display sing. */
.sec-title em, .free-feat-title em, .cta-inner h2 em, .ai-title em { font-style: italic; font-family: var(--font-d); }
p { color: var(--text-2); line-height: 1.55; font-size: 0.96rem; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.container--narrow { max-width: 820px; margin: 0 auto; padding: 0 28px; }

/* ============================================================
   NAVIGATION, LARGER PILL
   ============================================================ */
.site-header {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,247,255,0.90));
  border: none;
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-radius: var(--r-full);
  padding: 10px 12px 10px 24px;
  display: flex; align-items: center; gap: 8px;
  box-shadow:
    0 14px 36px rgba(99,102,241,0.14),
    0 4px 12px rgba(99,102,241,0.08),
    inset 0 1px 0 rgba(255,255,255,0.7);
  white-space: nowrap;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  isolation: isolate;
}
.site-header::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(99,102,241,0.18), transparent 60%),
    radial-gradient(ellipse 45% 100% at 100% 50%, rgba(236,72,153,0.14), transparent 60%),
    radial-gradient(ellipse 35% 80% at 50% 50%, rgba(34,211,238,0.08), transparent 70%);
  opacity: 1;
}
/* Outer aura: a soft colored halo behind the pill so it sits off the canvas
   without screaming. */
.site-header::after {
  content: ''; position: absolute; inset: -6px; border-radius: var(--r-full); pointer-events: none; z-index: -2;
  background:
    radial-gradient(ellipse 60% 70% at 25% 50%, rgba(99,102,241,0.18), transparent 70%),
    radial-gradient(ellipse 60% 70% at 75% 50%, rgba(168,85,247,0.14), transparent 70%);
  filter: blur(12px);
  opacity: 0.55;
}
.site-header.is-scrolled {
  box-shadow:
    0 18px 44px rgba(99,102,241,0.18),
    0 6px 14px rgba(99,102,241,0.10),
    inset 0 1px 0 rgba(255,255,255,0.75);
}
.site-header.is-scrolled::after { opacity: 0.75; }

.nav-logo {
  display: flex; align-items: center;
  padding-right: 18px;
  margin-right: 8px;
  position: relative;
  text-decoration: none;
}
.nav-logo::after {
  content: ''; position: absolute; right: 0; top: 18%; bottom: 18%; width: 1.5px;
  background: linear-gradient(to bottom, transparent, rgba(99,102,241,0.45), rgba(168,85,247,0.45), transparent);
  border-radius: 2px;
}
.nav-logo img, .nav-logo svg { display: block; height: 38px; width: auto; flex-shrink: 0; }
.nav-logo--mark img, .nav-logo--mark svg { height: 32px; width: 32px; }
.nav-logo--wordmark img, .nav-logo--wordmark svg { height: 24px; }
.nav-logo--vertical img, .nav-logo--vertical svg { height: 56px; }

.nav-menu { display: flex; gap: 4px; align-items: center; }
.nav-menu a {
  padding: 11px 20px;
  font-size: 0.96rem; font-weight: 500;
  color: var(--muted);
  border-radius: var(--r-full);
  transition: var(--trans);
  letter-spacing: -0.005em;
}
.nav-menu a:hover { color: var(--text); background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(168,85,247,0.08)); }
.nav-menu a.current-menu-item,
.nav-menu a.active {
  color: var(--accent);
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.16) 60%, rgba(236,72,153,0.12));
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.18);
}

.nav-cta { display: flex; gap: 8px; margin-left: 10px; padding-left: 14px; align-items: center; position: relative; }
.nav-cta::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1.5px;
  background: linear-gradient(to bottom, transparent, rgba(99,102,241,0.45), rgba(168,85,247,0.45), transparent);
  border-radius: 2px;
}

/* ============================================================
   NAV DROPDOWN
   ============================================================ */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 20px; font-size: 0.96rem; font-weight: 500;
  color: var(--muted); border-radius: var(--r-full);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-b); transition: var(--trans);
  letter-spacing: -0.005em;
}
.nav-dropdown-trigger:hover { color: var(--text); background: var(--surface-2); }
.nav-dropdown-trigger[aria-expanded="true"] { color: var(--text); background: var(--surface-2); }
.nav-caret { transition: transform 0.22s ease; display: flex; align-items: center; }
.nav-dropdown-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-dropdown-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 8px; min-width: 260px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 300;
}
.nav-dropdown-panel.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-panel a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  color: var(--text-2); transition: var(--trans);
  font-size: 0.9rem;
}
.nav-dropdown-panel a:hover { background: var(--surface-2); color: var(--accent); }
.nav-dd-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.nav-dropdown-panel strong { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.nav-dd-sub { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* ============================================================
   BUTTONS, LARGER AND MORE PROMINENT
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--r-full);
  font-size: 0.88rem; font-weight: 600;
  transition: var(--trans); white-space: nowrap;
  font-family: var(--font-b); cursor: pointer; border: none;
  letter-spacing: -0.005em;
}
.btn--primary {
  background: var(--grad-primary); color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,0.4), 0 0 0 1px rgba(99,102,241,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  background-size: 180% 180%; background-position: 0% 50%;
  transition: background-position 0.45s ease, box-shadow var(--trans), transform var(--trans);
}
.btn--primary:hover { background-position: 100% 50%; box-shadow: 0 10px 28px rgba(99,102,241,0.5), 0 0 0 1px rgba(168,85,247,0.5), inset 0 1px 0 rgba(255,255,255,0.22); transform: translateY(-1px); }
.btn--ghost { color: var(--text); border: 1.5px solid var(--border-2); background: var(--surface); }
.btn--ghost:hover { color: var(--accent); border-color: var(--accent-2); background: var(--accent-bg); }
.btn--lg { padding: 13px 26px; font-size: 0.95rem; }
.btn--sm { padding: 9px 18px; font-size: 0.84rem; }
.btn--outline { background: transparent; border: 1.5px solid var(--border-2); color: var(--text); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.btn--full { width: 100%; justify-content: center; }

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: var(--r-full);
  font-size: 0.74rem; font-weight: 600;
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.14);
  color: var(--accent);
}
.badge-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: pdot 2s ease infinite; }
@keyframes pdot { 0%,100%{opacity:1} 50%{opacity:0.4} }
.tag {
  display: inline-flex; font-size: 0.75rem; font-weight: 600;
  padding: 4px 11px; border-radius: var(--r-full);
  background: var(--accent-bg); color: var(--accent); border: 1px solid var(--border);
}
.tag--green { background: var(--green-bg); color: var(--green); border-color: rgba(16,185,129,0.22); }
.tag--amber { background: rgba(245,158,11,0.1); color: var(--amber); border-color: rgba(245,158,11,0.22); }
.tag--pro { background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.1)); color: var(--accent); border: 1px solid var(--border-2); font-weight: 700; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-head { text-align: center; margin-bottom: 56px; }
.sec-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 14px;
}
.sec-label::before, .sec-label::after { content: ''; width: 22px; height: 1px; background: var(--accent); opacity: 0.4; }
.sec-title { margin-bottom: 14px; }
.sec-desc { font-size: 1rem; max-width: 560px; margin: 0 auto; line-height: 1.55; color: var(--text-2); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; } .d4 { transition-delay: 0.32s; }

/* ============================================================
   HERO, LARGER WITH MORE BREATHING ROOM
   ============================================================ */
.hero { min-height: 88vh; display: flex; align-items: center; padding: 120px 0 80px; overflow: hidden; position: relative; }
.hero .container { max-width: 1360px; }
.hero-grid { display: grid; grid-template-columns: 0.85fr 1.35fr; gap: 56px; align-items: center; }
@media (min-width: 1280px) {
  .hero-media { margin-right: -40px; }
}
.hero-badge { margin-bottom: 22px; }
.hero-title { font-size: clamp(2rem, 3.5vw, 3.2rem); margin-bottom: 22px; font-weight: 400; }
.hero-title em {
  font-style: italic;
  background: var(--grad-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub { font-size: 1.04rem; max-width: 480px; margin-bottom: 32px; line-height: 1.55; color: var(--text-2); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-meta { display: flex; gap: 24px; flex-wrap: wrap; }
.meta-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--muted); font-weight: 500; }
.meta-item svg { color: var(--green); flex-shrink: 0; }

/* browser mockup, bigger */
.browser { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-xl); }

/* Hero media wrapper: holds the browser mockup + a coloured halo behind it. */
.hero-media { position: relative; isolation: isolate; transform: perspective(1400px) rotateX(2deg); transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.hero-media:hover { transform: perspective(1400px) rotateX(0deg) translateY(-2px); }
.hero-media-halo {
  position: absolute; inset: -8% -6% -10% -6%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 18% 30%, rgba(99,102,241,0.32), transparent 65%),
    radial-gradient(ellipse 50% 55% at 82% 25%, rgba(168,85,247,0.26), transparent 65%),
    radial-gradient(ellipse 55% 60% at 60% 90%, rgba(52,211,153,0.20), transparent 65%),
    radial-gradient(ellipse 45% 50% at 12% 90%, rgba(236,72,153,0.18), transparent 65%);
  filter: blur(20px); opacity: 0.95;
}

/* Browser frame variant for screenshot content: gradient border, deeper shadow, no inner padding. */
.browser--media {
  position: relative;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(99,102,241,0.7), rgba(168,85,247,0.6) 45%, rgba(236,72,153,0.5) 75%, rgba(52,211,153,0.6)) border-box;
  box-shadow:
    0 30px 80px rgba(99,102,241,0.28),
    0 12px 28px rgba(168,85,247,0.18),
    0 2px 6px rgba(0,0,0,0.05);
}
.b-body--media { padding: 0; background: var(--surface); }
.hero-board-img { display: block; width: 100%; height: auto; }
.browser-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.b-dots { display: flex; gap: 6px; }
.b-dots span { width: 11px; height: 11px; border-radius: 50%; }
.b-dots span:nth-child(1) { background: #ff5f57; }
.b-dots span:nth-child(2) { background: #febc2e; }
.b-dots span:nth-child(3) { background: #28c840; }
.b-url { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 6px 14px; font-size: 0.78rem; font-family: var(--font-m); color: var(--muted); }
.b-body { padding: 0; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar { padding: 26px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.7); }
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--muted); font-weight: 500; }
.trust-item svg { color: var(--accent); opacity: 0.75; }
.trust-num { font-weight: 700; color: var(--text); }

/* ============================================================
   FEATURES BENTO GRID
   ============================================================ */
.features-section { padding: 100px 0; }

/* Legacy .feat-grid kept for any other uses */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.feat-card { background: var(--surface); padding: 40px 36px; transition: background var(--trans); }
.feat-card:hover { background: var(--surface-2); }
.feat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 1.3rem; background: var(--grad-icon-bg); border: 1px solid var(--border-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.feat-card h4 { font-size: 1.08rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.feat-card p { font-size: 0.95rem; line-height: 1.7; color: var(--muted); }

/* Bento grid */
.feat-bento { display: flex; flex-direction: column; gap: 16px; }
.feat-bento-row { display: flex; gap: 16px; }
.feat-bento-card {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-xl);
  padding: 32px; transition: var(--trans); position: relative; overflow: hidden;
}
.feat-bento-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent-2); }
.feat-bento-card--wide { flex: 2.2; }
.feat-bento-card--narrow { flex: 1; }
.feat-bento-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; background: var(--accent-bg); border: 1px solid var(--border-2); color: var(--accent);
}
.feat-bento-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--text); letter-spacing: -0.015em; }
.feat-bento-card p { font-size: 0.88rem; line-height: 1.55; color: var(--text-2); }

/* Mini kanban preview inside wide bento card */
.feat-bento-preview { margin-top: 24px; }
.feat-mini-kanban { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.feat-mini-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.feat-mini-head { display: flex; align-items: center; gap: 7px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; }
.feat-mini-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.feat-mini-card { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; font-size: 0.76rem; color: var(--text-2); font-weight: 500; margin-bottom: 6px; box-shadow: var(--shadow-sm); }
.feat-mini-card:last-child { margin-bottom: 0; }
.feat-mini-card--active { border-color: var(--accent); background: rgba(99,102,241,0.04); color: var(--accent); }

/* Vote bars */
.feat-vote-bar { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--muted); }
.feat-vote-bar > span:first-child { width: 72px; flex-shrink: 0; font-weight: 500; }
.feat-vote-track { flex: 1; height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.feat-vote-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px; }
.feat-vote-num { width: 26px; text-align: right; font-weight: 700; color: var(--accent); font-size: 0.75rem; }

/* ============================================================
   STACK CARDS, FIXED BLEED ISSUE
   ============================================================ */
/* Top padding is large by design: the first card pins at top:120px via GSAP,
   so the section needs enough buffer above the cards to keep the previous
   section's bottom edge off-screen at that moment. Anything under ~180px and
   the bento above bleeds through. */
.stack-section {
  padding: 200px 0 180px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 240px);
}
.stack-section .container { max-width: 1380px; }
.stack-inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
.stack-sticky { position: sticky; top: 120px; padding-top: 8px; }
.stack-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 18px; }
.stack-title { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: 14px; }
.stack-desc { font-size: 0.98rem; line-height: 1.55; margin-bottom: 32px; color: var(--text-2); }
.stack-progress { display: flex; flex-direction: column; gap: 14px; }
.prog-item { display: flex; align-items: center; gap: 14px; font-size: 0.95rem; color: var(--dim); transition: color var(--trans); font-weight: 500; }
.prog-item.active { color: var(--text); font-weight: 600; }
.prog-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); flex-shrink: 0; transition: background var(--trans), box-shadow var(--trans); }
.prog-item.active .prog-dot { background: var(--accent); box-shadow: 0 0 12px rgba(99,102,241,0.5); }

/* Stack cards wrapper */
.stack-cards { display: flex; flex-direction: column; padding: 8px 0; }
.s-card-wrapper {
  width: 100%;
  perspective: 1000px;
  margin-bottom: 24px;
}
.s-card-wrapper:last-child { margin-bottom: 0; }
.s-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transform-origin: top center;
  will-change: transform, opacity;
}
.s-card-img {
  width: 100%; height: 240px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; position: relative;
}

/* Image-only stack card variant.
   Used by the "From install to live board" section on the homepage.
   Lets the screenshot dominate, with a tight faux browser frame above
   and a short caption line below. */
.s-card--shot { background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); border-color: var(--border-2); }
.s-card--shot .s-card-img {
  position: relative; height: auto; aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(168,85,247,0.06));
  border-bottom: none;
  padding: 40px 22px 22px;
  display: block;
  overflow: hidden;
}
.s-card--shot .s-card-img::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.s-card--shot .s-card-img::after {
  content: ''; position: absolute; top: 9px; left: 14px;
  width: 42px; height: 10px;
  background: radial-gradient(circle at 5px 5px, #ff6058 4px, transparent 4.5px),
              radial-gradient(circle at 21px 5px, #ffbd2e 4px, transparent 4.5px),
              radial-gradient(circle at 37px 5px, #28c93f 4px, transparent 4.5px);
}
.s-card--shot .s-card-img img {
  position: relative; inset: auto;
  width: 100%; height: auto; max-height: 100%;
  object-fit: contain; object-position: center top;
  display: block;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(19,19,43,0.16), 0 0 0 1px rgba(99,102,241,0.08);
  background: var(--surface);
}
.s-card-caption {
  display: flex; align-items: baseline; justify-content: center;
  gap: 8px;
  padding: 18px 24px 22px;
  font-size: 0.95rem; font-weight: 500;
  color: var(--text-2); text-align: center;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.s-card-caption-num {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent);
}

@media (max-width: 880px) {
  .s-card--shot .s-card-img { padding: 36px 16px 18px; aspect-ratio: 4 / 3; }
  .s-card-caption { font-size: 0.9rem; padding: 14px 18px 18px; }
}
/* ============================================================
   AI SECTION
   ============================================================ */
/* Torin AI section: the page's single dark anchor beat. Gradients glow against
   black; this is where the brand's vibrancy lives. */
.ai-section {
  padding: 160px 0;
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(ellipse 65% 55% at 18% 18%, rgba(99,102,241,0.35), transparent 60%),
    radial-gradient(ellipse 55% 50% at 85% 80%, rgba(168,85,247,0.30), transparent 60%),
    radial-gradient(ellipse 35% 40% at 95% 10%, rgba(34,211,238,0.18), transparent 60%),
    radial-gradient(ellipse 35% 40% at 5% 95%, rgba(236,72,153,0.16), transparent 60%),
    linear-gradient(180deg, #0e0e1a 0%, #14142a 50%, #0e0e1a 100%);
  color: #f5f2e8;
  /* Soft fade-in at top, fade-out at bottom so the dark section does not collide
     abruptly with the lighter sections above and below. Inset shadows of the
     canvas color render light bands inside the edges that gradually reveal the
     dark interior. */
  box-shadow:
    inset 0 90px 110px -50px var(--bg),
    inset 0 -90px 110px -50px var(--bg);
}
.ai-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
}
.ai-section > .container { position: relative; z-index: 1; }
.ai-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ai-section h2 { color: #ffffff; }
.ai-label {
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 16px 5px 5px; border-radius: 100px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #e8e6ff;
  -webkit-text-fill-color: #e8e6ff;
  background-clip: border-box;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ai-label-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #e3dfff);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 0 0 2px rgba(255,255,255,0.15);
}
.ai-label-chip svg { display: block; width: 20px; height: 20px; }
.ai-title { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 18px; color: #ffffff; letter-spacing: -0.034em; line-height: 1.08; }
.ai-desc { font-size: 1rem; line-height: 1.55; margin-bottom: 32px; max-width: 480px; color: #c9c7e4; }
.ai-features { display: flex; flex-direction: column; gap: 22px; }
.ai-feat { display: flex; align-items: flex-start; gap: 16px; }
.ai-feat-icon {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.28), rgba(168,85,247,0.24));
  border: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.ai-feat h4 { font-size: 1.04rem; font-weight: 700; margin-bottom: 4px; font-family: var(--font-b); color: #ffffff; }
.ai-feat p { font-size: 0.96rem; line-height: 1.6; color: #a8a5cd; }


/* ============================================================
   PRO FEATURES SHOWCASE (new, rich)
   ============================================================ */
.pro-showcase { padding: 120px 0; }
.pro-grid-big {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
  max-width: 1200px; margin: 0 auto;
}
.pro-feat-card {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-xl);
  padding: 26px; transition: var(--trans); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.pro-feat-card > .pro-visual:last-child { margin-top: auto; }
.pro-feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-2); }
.pro-feat-card--wide { grid-column: span 4; }
.pro-feat-card--normal { grid-column: span 3; }
.pro-feat-card--narrow { grid-column: span 2; }

.pro-feat-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pro-feat-icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: var(--grad-icon-bg); border: 1px solid var(--border-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.pro-feat-card h3 { font-size: 1.08rem; font-family: var(--font-b); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.pro-feat-card p { font-size: 0.96rem; line-height: 1.6; margin-bottom: 20px; color: var(--text-2); }

/* Pro feature visuals */
.pro-visual { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-top: 6px; }

.pro-feat-card .pro-corner-badge {
  position: absolute; top: 16px; right: 16px;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-section { padding: 100px 0 120px; }
.pricing-tabs { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); padding: 5px; width: fit-content; margin: 0 auto 48px; position: relative; box-shadow: var(--shadow-sm); }
.pricing-tab { padding: 11px 30px; border-radius: var(--r-full); font-size: 0.92rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: var(--trans); position: relative; z-index: 1; user-select: none; }
.pricing-tab.active { color: var(--text); }
.pricing-tab .tab-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; background: var(--green-bg); color: var(--green); border: 1px solid rgba(16,185,129,0.25); border-radius: var(--r-full); margin-left: 6px; letter-spacing: 0.04em; }
.tab-slider { position: absolute; top: 5px; left: 5px; height: calc(100% - 10px); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-full); box-shadow: var(--shadow-sm); transition: var(--trans); z-index: 0; }

.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1040px; margin: 0 auto; }
.p-card { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-2xl); padding: 40px 36px; transition: var(--trans); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.p-card.featured { border-color: transparent; box-shadow: 0 0 0 2px rgba(99,102,241,0.22), 0 18px 50px rgba(168,85,247,0.22), var(--shadow-lg); transform: scale(1.03); background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-warm) border-box; border: 2px solid transparent; }
.p-card.featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-warm); }
.p-card:hover.featured { transform: scale(1.03) translateY(-4px); }

.p-popular { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 5px 13px; background: var(--grad-warm); color: #fff; border-radius: var(--r-full); margin-bottom: 22px; box-shadow: 0 6px 18px rgba(168,85,247,0.45); }
.p-sites { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 10px; }
.p-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.p-amount { font-family: var(--font-d); font-size: 3.6rem; color: var(--text); line-height: 1; }
.p-amount sup { font-size: 1.5rem; vertical-align: super; font-family: var(--font-b); font-weight: 700; color: var(--text); }
.p-was { font-size: 1.05rem; color: var(--dim); text-decoration: line-through; font-family: var(--font-b); font-weight: 500; }
.p-period { font-size: 0.88rem; color: var(--muted); margin-bottom: 10px; }
.p-discount { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; padding: 4px 11px; border-radius: var(--r-full); background: var(--green-bg); border: 1px solid rgba(16,185,129,0.25); color: var(--green); margin-bottom: 24px; }
.p-desc { font-size: 0.95rem; line-height: 1.55; margin-bottom: 0; }
.p-div { height: 1px; background: var(--border); margin: 24px 0; }
.p-feats { display: flex; flex-direction: column; gap: 13px; margin-bottom: 32px; flex: 1; }
.p-feat { display: flex; align-items: flex-start; gap: 11px; font-size: 0.92rem; color: var(--text-2); line-height: 1.5; }
.p-feat--bold { font-weight: 700; color: var(--text); }
.p-check { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; background: var(--green-bg); border: 1px solid rgba(16,185,129,0.3); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--green); margin-top: 1px; }

/* sites strikethrough unlimited */
.sites-cross { text-decoration: line-through; color: var(--dim); font-weight: 500; font-size: 0.78rem; margin-right: 8px; }
.unlimited-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 700; padding: 3px 11px; background: linear-gradient(90deg, rgba(99,102,241,0.12), rgba(168,85,247,0.1)); border: 1px solid rgba(99,102,241,0.22); border-radius: var(--r-full); color: var(--accent); }
.limited-badge { position: absolute; top: 20px; right: 20px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; font-size: 0.66rem; font-weight: 700; padding: 4px 10px; border-radius: var(--r-full); letter-spacing: 0.1em; }

/* Guarantee box */
.guarantee-box {
  max-width: 880px; margin: 56px auto 0;
  background: var(--surface); border: 1.5px solid var(--green); border-radius: var(--r-xl);
  padding: 32px 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  box-shadow: 0 0 0 3px var(--green-bg);
}
.guarantee-shield {
  width: 64px; height: 64px; border-radius: 50%; background: var(--green-bg); border: 2px solid rgba(16,185,129,0.3);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0;
}
.guarantee-text h3 { font-size: 1.25rem; font-family: var(--font-d); margin-bottom: 4px; color: var(--text); }
.guarantee-text p { font-size: 0.95rem; color: var(--muted); margin: 0; }

/* Compare table */
.compare-table-wrap { max-width: 1040px; margin: 80px auto 0; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 16px 24px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.93rem; }
.compare-table thead th { background: var(--surface-2); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }
.compare-table thead th.col-plan { text-align: center; }
.compare-table td { color: var(--muted); }
.compare-table td.col-feat { color: var(--text-2); font-weight: 500; }
.compare-table td.col-plan { text-align: center; }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:hover td { background: var(--surface-2); }
.cmp-check { color: var(--green); font-size: 1.1rem; font-weight: 700; }
.cmp-dash { color: var(--dim); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { padding: 100px 0; }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.faq-item { background: var(--surface); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; font-size: 1rem; font-weight: 600; color: var(--text); cursor: pointer; transition: background var(--trans); user-select: none; }
.faq-q:hover { background: var(--surface-2); }
.faq-q.open { color: var(--accent); }
.faq-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--trans), background var(--trans); color: var(--muted); }
.faq-q.open .faq-ico { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1); }
.faq-a.open { max-height: 300px; }
.faq-a p { font-size: 0.95rem; line-height: 1.75; padding: 20px 28px 24px; border-top: 1px solid var(--border); }
code { font-family: var(--font-m); font-size: 0.88rem; background: var(--surface-2); padding: 2px 8px; border-radius: 5px; color: var(--accent); font-weight: 500; }

/* ============================================================
   CTA
   ============================================================ */
.cta-section { padding: 80px 0 120px; }
.cta-inner { position: relative; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-2xl); padding: 88px 64px; text-align: center; overflow: hidden; box-shadow: var(--shadow-xl); }
.cta-inner::before { content: ''; position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 760px; height: 480px; background:
    radial-gradient(ellipse 60% 60% at 30% 30%, rgba(99,102,241,0.26) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 75% 40%, rgba(168,85,247,0.20) 0%, transparent 60%);
  pointer-events: none; filter: blur(2px); }
.cta-inner > * { position: relative; z-index: 2; }
.cta-inner h2 { margin-bottom: 16px; }
.cta-inner > p { margin-bottom: 40px; font-size: 1.12rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cta-note { margin-top: 20px; font-size: 0.86rem; color: var(--dim); display: flex; align-items: center; justify-content: center; gap: 8px; }
.cta-note svg { flex-shrink: 0; margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--border); padding: 60px 0 36px; background: rgba(255,255,255,0.6); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 56px; margin-bottom: 48px; }
.footer-grid .nav-logo { padding-right: 0; margin-right: 0; }
.footer-grid .nav-logo::after { display: none; }
.footer-grid .nav-logo img { height: 40px; }
.footer-brand-desc { font-size: 0.92rem; color: var(--muted); margin-top: 16px; max-width: 260px; line-height: 1.65; }
.footer-col-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text); margin-bottom: 18px; }
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links a { font-size: 0.92rem; color: var(--muted); transition: color var(--trans); }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 14px; }
.footer-copy { font-size: 0.88rem; color: var(--dim); }

/* ============================================================
   INNER PAGE HEROES
   ============================================================ */
.page-hero { padding: 140px 0 60px; text-align: center; background: linear-gradient(180deg, rgba(99,102,241,0.04), transparent); }
.page-hero h1 { font-size: clamp(2rem, 3.2vw, 2.8rem); margin-bottom: 14px; }
.page-hero p { max-width: 560px; margin: 0 auto; font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.page-body { padding: 40px 0 90px; }

/* features page grid */
.feat-page-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; margin-bottom: 2px; }
.feat-page-card { background: var(--surface); padding: 32px; transition: background var(--trans); }
.feat-page-card:hover { background: var(--surface-2); }
.feat-page-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; font-family: var(--font-b); letter-spacing: -0.015em; }
.feat-page-card p { font-size: 0.88rem; line-height: 1.55; color: var(--text-2); }
.feat-section-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.feat-section-label::before { content: ''; width: 24px; height: 1px; background: var(--accent); opacity: 0.4; }
.feat-section-block { margin-bottom: 64px; }

/* contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: start; }
.contact-info h2 { font-size: 2rem; margin-bottom: 16px; }
.contact-info > p { font-size: 1.02rem; line-height: 1.75; margin-bottom: 32px; }
.contact-links { display: flex; flex-direction: column; gap: 14px; }
.contact-link { display: flex; align-items: center; gap: 14px; font-size: 0.94rem; color: var(--text-2); padding: 16px 20px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); transition: var(--trans); font-weight: 500; }
.contact-link:hover { border-color: var(--accent-2); color: var(--accent); background: var(--accent-bg); }
.contact-link svg { color: var(--accent); flex-shrink: 0; }
.contact-form { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-xl); padding: 40px; box-shadow: var(--shadow-md); }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.form-input { width: 100%; padding: 13px 16px; border-radius: var(--r-md); border: 1px solid var(--border-2); background: var(--surface-2); font-size: 0.95rem; font-family: var(--font-b); color: var(--text); outline: none; transition: border-color var(--trans); }
.form-input:focus { border-color: var(--accent); background: var(--surface); }
textarea.form-input { resize: vertical; min-height: 140px; line-height: 1.6; }

/* docs */
.docs-featured { background: linear-gradient(135deg, rgba(99,102,241,0.07), rgba(168,85,247,0.04)); border: 1px solid var(--border-2); border-radius: var(--r-xl); padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 48px; }
.docs-search { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--surface); border: 1.5px solid var(--border-2); border-radius: var(--r-full); margin-bottom: 22px; box-shadow: var(--shadow-sm); }
.docs-search input { flex: 1; border: none; background: none; outline: none; font-family: var(--font-b); font-size: 0.95rem; color: var(--text); }
.docs-search input::placeholder { color: var(--dim); }
.docs-popular { display: flex; flex-wrap: wrap; gap: 9px; }
.docs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.doc-card { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 32px; cursor: pointer; transition: var(--trans); }
.doc-card:hover { border-color: var(--accent-2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.doc-card-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--grad-icon-bg); border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.doc-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.doc-card p { font-size: 0.88rem; line-height: 1.6; margin-bottom: 14px; }
.doc-card-count { font-size: 0.78rem; color: var(--dim); font-weight: 500; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .pro-grid-big { grid-template-columns: repeat(4, 1fr); }
  .pro-feat-card--wide { grid-column: span 4; }
  .pro-feat-card--normal { grid-column: span 2; }
  .pro-feat-card--narrow { grid-column: span 2; }
}
@media (max-width: 1024px) {
  .hero-grid, .ai-inner, .stack-inner, .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  .stack-sticky { position: static; }
  .feat-grid, .feat-page-grid { grid-template-columns: repeat(2,1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .docs-featured { grid-template-columns: 1fr; padding: 36px; }
  .p-card.featured { transform: none; }
  .p-card:hover.featured { transform: translateY(-4px); }
  .guarantee-box { grid-template-columns: 1fr; text-align: center; gap: 18px; padding: 28px; }
  .guarantee-shield { margin: 0 auto; }
}
@media (max-width: 900px) {
  .feat-bento-row { flex-direction: column; }
  .feat-bento-card--wide, .feat-bento-card--narrow { flex: none; width: 100%; }
}
@media (max-width: 768px) {
  body { font-size: 16px; }
  .site-header { top: 14px; padding: 7px 8px 7px 18px; }
  .nav-logo { font-size: 1rem; padding-right: 14px; }
  .nav-menu { display: none; }
  .feat-grid { grid-template-columns: 1fr; }
  .pro-grid-big { grid-template-columns: 1fr; }
  .pro-feat-card--wide, .pro-feat-card--normal, .pro-feat-card--narrow { grid-column: span 1; }
  .docs-grid { grid-template-columns: 1fr 1fr; }
  .cta-inner { padding: 56px 28px; }
  .contact-form, .docs-featured { padding: 28px; }
  .compare-table th, .compare-table td { padding: 12px 14px; font-size: 0.85rem; }
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .docs-grid { grid-template-columns: 1fr; }
  .btn { padding: 12px 22px; }
  .btn--lg { padding: 14px 28px; font-size: 0.95rem; }
  .p-card { padding: 32px 28px; }
  .p-amount { font-size: 3rem; }
  .feat-page-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SVG ICONS (replacing previous emoji/unicode glyphs)
   ============================================================ */
.feat-icon,
.pro-feat-icon,
.doc-card-icon,
.ai-feat-icon { color: var(--accent); }
/* On the dark AI section, restore white icon strokes. */
.ai-section .ai-feat-icon { color: #ffffff; }
.guarantee-shield { color: var(--green); }
.guarantee-shield svg { width: 30px; height: 30px; }
.p-check { color: var(--green); }
.p-check svg { stroke-width: 3; }
.cmp-check { color: var(--green); display: inline-flex; align-items: center; justify-content: center; }
.cmp-dash { color: var(--dim); display: inline-flex; align-items: center; justify-content: center; }
.btn-icon { vertical-align: middle; margin-left: 8px; flex-shrink: 0; }

/* Inline status banner shown above the contact form after submission. */
.sb-form-notice {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  border-left-width: 4px;
  font-size: 0.96rem; line-height: 1.55;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
  animation: sb-form-notice-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sb-form-notice strong {
  display: block; font-weight: 700; font-size: 1rem;
  margin-bottom: 2px;
}
.sb-form-notice-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
}
.sb-form-notice--ok {
  background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(52,211,153,0.06));
  color: #065f46;
  border-color: rgba(16,185,129,0.4);
  border-left-color: var(--green);
}
.sb-form-notice--ok .sb-form-notice-icon {
  background: var(--green); color: #fff;
}
.sb-form-notice--err {
  background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(248,113,113,0.06));
  color: #991b1b;
  border-color: rgba(239,68,68,0.4);
  border-left-color: #dc2626;
}
.sb-form-notice--err .sb-form-notice-icon {
  background: #dc2626; color: #fff;
}
.sb-form-notice a { color: inherit; text-decoration: underline; }
@keyframes sb-form-notice-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.inline-icon { vertical-align: middle; margin-right: 6px; flex-shrink: 0; }
.unlimited-badge svg { color: var(--accent); }
.p-discount svg { color: var(--green); }
.nav-dd-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); width: 28px; height: 28px; border-radius: 8px; background: var(--accent-bg); border: 1px solid var(--border-2); }

/* Torin AI canonical avatar (matches the Pro plugin admin widget). */
.ai-avatar--torin,
.pro-feat-icon--torin,
.doc-card-icon--torin {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0;
  overflow: hidden;
}
.ai-avatar--torin svg,
.pro-feat-icon--torin svg,
.doc-card-icon--torin svg { display: block; width: 100%; height: 100%; }
.pro-feat-icon--torin { background: linear-gradient(135deg, #1E2347, #2d3461) !important; border: 1px solid rgba(79,209,224,0.35) !important; box-shadow: 0 6px 20px rgba(30,35,71,0.35) !important; padding: 4px; }
.doc-card-icon--torin { background: linear-gradient(135deg, #1E2347, #2d3461) !important; border: 1px solid rgba(79,209,224,0.35) !important; box-shadow: 0 4px 14px rgba(30,35,71,0.3) !important; padding: 4px; }

/* ============================================================
   PRODUCT SCREENSHOTS (Pro features grid, AI section)
   ============================================================ */
.shot-frame {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-2);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(99,102,241,0.18), 0 2px 6px rgba(0,0,0,0.05);
  line-height: 0;
}
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-frame--lg { border-radius: 18px; box-shadow: 0 24px 60px rgba(99,102,241,0.22), 0 4px 12px rgba(0,0,0,0.05); }
.shot-frame--dark { background: #0e0e1a; border-color: rgba(99,102,241,0.30); }

/* When a Pro feature card uses a screenshot instead of the CSS mockup. */
.pro-visual--shot {
  padding: 0;
  background: transparent;
  border: none;
  margin-top: 18px;
}

/* In span-3 cards, the visual area expands into remaining card height with a soft
   display backdrop so screenshots of different aspect ratios in neighbouring cards
   never create a giant white void between paragraph and image. */
.pro-feat-card--normal > .pro-visual--shot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid rgba(99,102,241,0.14);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 110%, rgba(99,102,241,0.12), transparent 65%),
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(168,85,247,0.08), transparent 60%),
    linear-gradient(180deg, var(--surface-2) 0%, #ecebfa 100%);
}
.pro-feat-card--normal > .pro-visual--shot .shot-frame { width: 100%; }

/* AI section: real screenshot replaces the chat mockup. Constrain on wide screens
   so the portrait Torin panel does not dominate vertically. */
.ai-shot { max-width: 520px; margin: 0 auto; }
.ai-section .ai-shot .shot-frame {
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 40px 90px rgba(99,102,241,0.45),
    0 12px 28px rgba(168,85,247,0.35),
    0 4px 12px rgba(0,0,0,0.30);
}
@media (max-width: 1100px) { .ai-shot { max-width: 100%; } }

/* Torin AI Pro card: near-square screenshot centered within the wide card, capped so it
   does not dominate the card vertically. */
.pro-visual--torin-shot { max-width: 380px; margin-left: auto; margin-right: auto; }
@media (max-width: 1100px) { .pro-visual--torin-shot { max-width: 100%; } }

/* ============================================================
   PRIVATE BOARDS PERMISSIONS CONSOLE
   Custom DOM that replaces the unreadable wide screenshot in the
   narrow Private Boards card. Stays sharp at any card width.
   ============================================================ */
.pro-visual--private {
  flex: 1;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 22px 18px 24px;
  background:
    radial-gradient(ellipse 80% 70% at 80% 110%, rgba(99,102,241,0.16), transparent 65%),
    radial-gradient(ellipse 90% 80% at 12% -10%, rgba(168,85,247,0.10), transparent 60%),
    linear-gradient(160deg, #efedf8 0%, #f4f1fc 60%, #ecebfa 100%);
  border: 1px solid rgba(99,102,241,0.16);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Decorative dot grid that softly drifts on hover. */
.pb-grid {
  position: absolute; inset: 0; z-index: 0; opacity: 0.55; pointer-events: none;
  background-image: radial-gradient(circle, rgba(99,102,241,0.18) 1px, transparent 1.4px);
  background-size: 14px 14px;
  mask-image: radial-gradient(ellipse 70% 80% at 60% 100%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 60% 100%, #000 30%, transparent 75%);
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}
.pro-visual--private:hover .pb-grid { opacity: 0.85; transform: translate(2px, -2px); }

/* Sculptural lock illustration, floats behind the console at low opacity. */
.pb-lock {
  position: absolute; z-index: 0; right: -16px; bottom: -22px;
  width: 156px; height: auto; pointer-events: none;
  opacity: 0.14; filter: blur(0.2px);
  transform-origin: 80% 80%;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.pro-visual--private:hover .pb-lock { opacity: 0.22; transform: translateY(-4px) rotate(-3deg); }
.pb-lock-shackle { transform-origin: 60px 64px; transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.pro-visual--private:hover .pb-lock-shackle { transform: translateY(-2px) rotate(-6deg); }

/* Tiny tracked stat in the top-right corner. */
.pb-corner-stat {
  position: absolute; z-index: 2; top: 14px; right: 16px;
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-family: var(--font-m);
}
.pb-corner-num { font-size: 0.78rem; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; }
.pb-corner-lbl { font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); }

/* The crisp console block sitting on the lock+grid backdrop. */
.pb-console {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 14px;
  padding: 16px 14px;
  box-shadow: 0 18px 40px rgba(99,102,241,0.14), 0 2px 6px rgba(99,102,241,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;
}
.pro-visual--private:hover .pb-console { transform: translateY(-2px); box-shadow: 0 24px 50px rgba(99,102,241,0.18), 0 4px 10px rgba(168,85,247,0.10), inset 0 1px 0 rgba(255,255,255,0.7); }

.pb-block { display: flex; flex-direction: column; gap: 10px; }
.pb-label {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
  background: var(--grad-text-warm); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pb-divider {
  height: 1px; margin: 14px -2px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.22), rgba(168,85,247,0.18), transparent);
}

/* Toggle pill. Knob slides from off to on via .pb-toggle--on class added by JS. */
.pb-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 4px; border-radius: 100px;
  background: transparent; border: none; cursor: default;
  font-family: var(--font-b); font-size: 0.88rem; font-weight: 600; color: var(--text);
}
.pb-toggle-track {
  position: relative; width: 38px; height: 22px; border-radius: 100px;
  background: var(--surface-3); border: 1px solid var(--border-2);
  transition: background 0.45s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.pb-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(13,13,38,0.18), 0 0 0 1px rgba(13,13,38,0.04);
  transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1);
}
.pb-toggle--on .pb-toggle-track {
  background: var(--grad-primary);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(99,102,241,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
.pb-toggle--on .pb-toggle-knob { transform: translateX(16px); box-shadow: 0 2px 6px rgba(13,13,38,0.22); }
.pb-toggle-text { font-size: 0.84rem; }

/* Role rows. Each role has its own brand-color dot. */
.pb-roles { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.pb-role {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px;
  font-size: 0.86rem; color: var(--text-2); font-weight: 500;
  transition: background 0.22s ease, transform 0.22s ease;
}
.pb-role:hover { background: linear-gradient(90deg, rgba(99,102,241,0.08), rgba(168,85,247,0.05)); transform: translateX(2px); }
.pb-role-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.14);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.pb-role:hover .pb-role-dot { transform: scale(1.35); }
.pb-role[data-role="editor"]  .pb-role-dot { background: var(--accent-2); box-shadow: 0 0 0 3px rgba(168,85,247,0.16); }
.pb-role[data-role="author"]  .pb-role-dot { background: var(--cyan);     box-shadow: 0 0 0 3px rgba(6,182,212,0.16); }
.pb-role[data-role="contrib"] .pb-role-dot { background: var(--pink);     box-shadow: 0 0 0 3px rgba(236,72,153,0.16); }
.pb-role[data-role="sub"]     .pb-role-dot { background: var(--green);    box-shadow: 0 0 0 3px rgba(16,185,129,0.16); }
.pb-role-name { flex: 1; letter-spacing: -0.005em; }
.pb-role-tag {
  font-family: var(--font-m); font-size: 0.62rem; font-weight: 600;
  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.06em;
  color: var(--muted); background: rgba(99,102,241,0.06); border: 1px solid var(--border);
}
.pb-role-check { color: var(--green); flex-shrink: 0; opacity: 0.0; transform: scale(0.6); transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.pb-role.is-active .pb-role-check { opacity: 1; transform: scale(1); }

/* Enter state defaults so we can animate in without a flash. */
[data-pb-visual] .pb-console { opacity: 0; transform: translateY(12px); }
[data-pb-visual] .pb-role { opacity: 0; transform: translateX(-6px); }
[data-pb-visual].is-revealed .pb-console { opacity: 1; transform: translateY(0); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1) 0.05s, transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.05s, box-shadow 0.45s ease; }
[data-pb-visual].is-revealed .pb-role { opacity: 1; transform: translateX(0); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1), background 0.22s ease; }
[data-pb-visual].is-revealed .pb-role:nth-child(1) { transition-delay: 0.45s, 0.45s, 0s; }
[data-pb-visual].is-revealed .pb-role:nth-child(2) { transition-delay: 0.52s, 0.52s, 0s; }
[data-pb-visual].is-revealed .pb-role:nth-child(3) { transition-delay: 0.59s, 0.59s, 0s; }
[data-pb-visual].is-revealed .pb-role:nth-child(4) { transition-delay: 0.66s, 0.66s, 0s; }
[data-pb-visual].is-revealed .pb-role:nth-child(5) { transition-delay: 0.73s, 0.73s, 0s; }

/* No-JS / no-IntersectionObserver fallback: show everything in its final state. */
.no-js [data-pb-visual] .pb-console,
.no-js [data-pb-visual] .pb-role { opacity: 1; transform: none; }
.no-js [data-pb-visual] .pb-role-check { opacity: 1; transform: scale(1); }
.no-js [data-pb-visual] .pb-toggle .pb-toggle-track { background: var(--grad-primary); border-color: transparent; box-shadow: 0 4px 14px rgba(99,102,241,0.4); }
.no-js [data-pb-visual] .pb-toggle .pb-toggle-knob { transform: translateX(16px); }

@media (prefers-reduced-motion: reduce) {
  [data-pb-visual] .pb-console,
  [data-pb-visual] .pb-role { opacity: 1; transform: none; transition: none; }
  [data-pb-visual] .pb-role-check { opacity: 1; transform: scale(1); }
  .pro-visual--private:hover .pb-lock,
  .pro-visual--private:hover .pb-lock-shackle,
  .pro-visual--private:hover .pb-console,
  .pro-visual--private:hover .pb-grid { transform: none; }
}

/* ============================================================
   FREE FEATURES SECTION (page-features.php)
   ============================================================ */
.free-feat-block { margin-top: 32px; }
.free-feat-header { max-width: 660px; margin: 0 auto 40px; text-align: center; }
.free-feat-header .feat-section-label { justify-content: center; margin-bottom: 18px; }
.free-feat-header .feat-section-label::before { display: none; }
.free-feat-title { font-family: var(--font-d); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.1; letter-spacing: -0.032em; margin-bottom: 14px; color: var(--text); font-weight: 400; }
.free-feat-desc { font-size: 1.05rem; line-height: 1.6; color: var(--text-2); max-width: 640px; margin: 0 auto; }
.free-feat-grid { perspective: 1200px; }
.free-feat-grid .feat-page-card { will-change: transform, opacity; transition: background var(--trans); position: relative; overflow: hidden; }
/* JS-driven entry: cards stay visible by default, animate only when grid has both classes. */
.free-feat-grid.is-anim .feat-page-card { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1), background var(--trans); }
.free-feat-grid.is-anim.in-view .feat-page-card { opacity: 1; transform: translateY(0); }
.free-feat-grid.is-anim .feat-page-card:nth-child(1)  { transition-delay: 0.00s; }
.free-feat-grid.is-anim .feat-page-card:nth-child(2)  { transition-delay: 0.05s; }
.free-feat-grid.is-anim .feat-page-card:nth-child(3)  { transition-delay: 0.10s; }
.free-feat-grid.is-anim .feat-page-card:nth-child(4)  { transition-delay: 0.15s; }
.free-feat-grid.is-anim .feat-page-card:nth-child(5)  { transition-delay: 0.20s; }
.free-feat-grid.is-anim .feat-page-card:nth-child(6)  { transition-delay: 0.25s; }
.free-feat-grid.is-anim .feat-page-card:nth-child(7)  { transition-delay: 0.30s; }
.free-feat-grid.is-anim .feat-page-card:nth-child(8)  { transition-delay: 0.35s; }
.free-feat-grid.is-anim .feat-page-card:nth-child(9)  { transition-delay: 0.40s; }
.free-feat-grid.is-anim .feat-page-card:nth-child(10) { transition-delay: 0.45s; }
.free-feat-grid.is-anim .feat-page-card:nth-child(11) { transition-delay: 0.50s; }
.free-feat-grid.is-anim .feat-page-card:nth-child(12) { transition-delay: 0.55s; }
.free-feat-grid .feat-page-card:hover { background: var(--surface-2); z-index: 2; }
.free-feat-grid .feat-page-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(99,102,241,0.10), transparent 55%);
  opacity: 0; transition: opacity 0.3s ease;
}
.free-feat-grid .feat-page-card:hover::after { opacity: 1; }
.free-feat-grid .feat-page-card > * { position: relative; z-index: 1; }

/* ============================================================
   FEATURES PAGE — horizontal scroll showcase
   Pinned section. Panels slide left as the user scrolls down.
   JS lives in main.js (initFeatScrollShowcase).
   ============================================================ */
.feat-scroll-section { position: relative; }
.feat-scroll-pin {
  position: relative; width: 100%; height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%);
  display: flex; flex-direction: column;
}
.feat-scroll-head {
  padding: 56px 28px 24px;
  text-align: center;
  flex-shrink: 0;
}
.feat-scroll-head .sec-label { display: inline-block; margin-bottom: 14px; }
.feat-scroll-head h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  margin-bottom: 12px; letter-spacing: -0.01em;
}
.feat-scroll-head p {
  max-width: 580px; margin: 0 auto;
  font-size: 1rem; line-height: 1.6; color: var(--text-2);
}
.feat-scroll-track {
  flex: 1 1 auto;
  display: flex; flex-wrap: nowrap;
  align-items: stretch;
  will-change: transform;
  padding: 8px 0 56px;
}
.feat-panel {
  flex: 0 0 100vw;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  gap: 36px;
  padding: 12px clamp(20px, 3vw, 56px);
  align-items: center;
  box-sizing: border-box;
}
.feat-panel-text { max-width: 460px; }
.feat-panel-num {
  font-family: var(--font-d, 'DM Serif Display', serif);
  font-size: 3rem; line-height: 1; color: var(--accent);
  opacity: 0.35; margin-bottom: 14px;
}
.feat-panel-tag {
  display: inline-block;
  padding: 4px 12px; border-radius: var(--r-full);
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid var(--border-2);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.feat-panel-text h3 {
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  line-height: 1.2; margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.feat-panel-text > p { font-size: 1.02rem; line-height: 1.65; color: var(--text-2); margin-bottom: 18px; }
.feat-panel-bullets { list-style: none; padding: 0; margin: 0; }
.feat-panel-bullets li {
  position: relative; padding-left: 26px; margin: 8px 0;
  font-size: 0.96rem; line-height: 1.55; color: var(--text);
}
.feat-panel-bullets li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-bg); border: 1.5px solid var(--accent);
}
.feat-panel-bullets li::after {
  content: ''; position: absolute; left: 4px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.feat-panel-shot {
  position: relative; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.feat-panel-shot .shot-frame {
  position: relative;
  width: 100%; max-width: 920px;
  max-height: 74vh;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: 0 30px 70px rgba(19,19,43,0.22), 0 0 0 1px rgba(99,102,241,0.06);
  padding-top: 32px;
  display: flex; align-items: stretch;
}
.feat-panel-shot .shot-frame::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 32px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.feat-panel-shot .shot-frame::after {
  content: ''; position: absolute; top: 11px; left: 14px;
  width: 46px; height: 10px;
  background: radial-gradient(circle at 5px 5px, #ff6058 4px, transparent 4.5px),
              radial-gradient(circle at 23px 5px, #ffbd2e 4px, transparent 4.5px),
              radial-gradient(circle at 41px 5px, #28c93f 4px, transparent 4.5px);
}
.feat-panel-shot .shot-frame img {
  width: 100%; height: auto;
  max-height: calc(74vh - 32px);
  object-fit: contain; object-position: top center;
  display: block;
}
.feat-scroll-controls {
  position: absolute; bottom: 22px; left: 0; right: 0;
  display: flex; align-items: center; gap: 16px;
  justify-content: center; padding: 0 28px;
  z-index: 3;
}
.feat-scroll-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-sm);
  cursor: pointer; transition: var(--trans);
}
.feat-scroll-arrow:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.feat-scroll-arrow:disabled { opacity: 0.35; cursor: default; transform: none; box-shadow: var(--shadow-sm); color: var(--muted); border-color: var(--border); }
.feat-scroll-dots {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border-2);
  box-shadow: var(--shadow-sm);
}
.feat-scroll-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-2); padding: 0; border: none;
  cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;
}
.feat-scroll-dot:hover { background: var(--accent-2); }
.feat-scroll-dot.is-active { background: var(--accent); transform: scale(1.4); }

/* ============================================================
   FEATURES PAGE — multiple themes section
   Interactive switcher: tabs above a big preview frame.
   ============================================================ */
.themes-section { padding: 96px 0 80px; background: var(--bg); }
.themes-section .container { max-width: 1380px; }
.themes-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 56px; align-items: center;
}
.themes-text h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.2; letter-spacing: -0.01em; margin: 14px 0 18px; }
.themes-text > p { font-size: 1.02rem; line-height: 1.7; color: var(--text-2); margin-bottom: 18px; }
.themes-text > p + p { margin-bottom: 28px; }
.theme-swatch {
  width: 36px; height: 36px; border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
  border: 1px solid var(--border-2);
  flex-shrink: 0;
}
.theme-swatch--light { background: linear-gradient(135deg, #ffffff, #f4f1fc); }
.theme-swatch--dark { background: linear-gradient(135deg, #1a1a3a, #13132b); }
.theme-swatch--pulse { background: linear-gradient(135deg, #6366f1, #a855f7 60%, #c084fc); }

.themes-viewer { display: flex; flex-direction: column; gap: 18px; }
.themes-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 6px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  width: fit-content; max-width: 100%;
  box-shadow: var(--shadow-sm);
}
.themes-tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 8px; border-radius: var(--r-full);
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-b); font-size: 0.92rem; font-weight: 600;
  color: var(--muted);
  transition: var(--trans);
}
.themes-tab:hover { color: var(--text); background: var(--surface-2); }
.themes-tab.is-active {
  background: var(--accent-bg);
  color: var(--accent);
}
.themes-tab.is-active .theme-swatch { border-color: var(--accent); }

.themes-stage { position: relative; }
.themes-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: 0 40px 80px rgba(19,19,43,0.18), 0 0 0 1px rgba(99,102,241,0.06);
  padding-top: 38px;
}
.themes-frame-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 38px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px;
}
.themes-frame-bar span {
  width: 10px; height: 10px; border-radius: 50%;
}
.themes-frame-bar span:nth-child(1) { background: #ff6058; }
.themes-frame-bar span:nth-child(2) { background: #ffbd2e; }
.themes-frame-bar span:nth-child(3) { background: #28c93f; }
.themes-frame-body {
  position: relative;
  min-height: 360px;
  display: flex; align-items: stretch;
}
.themes-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  padding: 18px;
  display: block;
  opacity: 0; transition: opacity 0.35s ease;
  pointer-events: none;
}
.themes-img.is-active { opacity: 1; pointer-events: auto; }
.themes-frame-body { aspect-ratio: 16 / 10; background: var(--surface); transition: background 0.35s ease; }

/* When the active preview is the dark theme, paint the frame body and the
   browser bar dark so the screenshot reads natively instead of floating on
   a bright surface. */
.themes-frame-bar { transition: background 0.35s ease, border-color 0.35s ease; }
.themes-frame:has(.themes-img[data-theme="dark"].is-active) .themes-frame-body { background: #13132b; }
.themes-frame:has(.themes-img[data-theme="dark"].is-active) .themes-frame-bar  { background: #0e0e22; border-bottom-color: rgba(255,255,255,0.08); }
.themes-caption {
  margin: 4px 4px 0;
  font-size: 0.92rem; color: var(--muted); line-height: 1.55;
}

@media (max-width: 980px) {
  .themes-grid { grid-template-columns: 1fr; gap: 40px; }
  .themes-tab-name { display: none; }
  .themes-tab { padding: 8px; }
  .themes-frame-body { aspect-ratio: 4 / 3; min-height: 280px; }
}
@media (max-width: 880px) {
  /* On small viewports the horizontal-scroll trick is jarring;
     fall back to a normal vertically stacked layout. JS detects
     this width and skips initFeatScrollShowcase. */
  .feat-scroll-pin { height: auto; overflow: visible; }
  .feat-scroll-track { flex-wrap: wrap; padding-bottom: 32px; }
  .feat-panel { flex-basis: 100%; grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  .feat-panel-shot { max-height: none; }
  .feat-panel-shot .shot-frame { max-height: none; }
  .feat-panel-shot .shot-frame img { max-height: 380px; }
  .feat-scroll-controls { display: none; }
}

/* ============================================================
   DOCS — search trigger (used on hub + sidebar)
   ============================================================ */
.docs-search--hero { padding: 14px 18px; cursor: pointer; transition: var(--trans); width: 100%; text-align: left; }
.docs-search--hero:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(99,102,241,0.12); }
.docs-search--hero span { color: var(--dim); font-size: 0.95rem; flex: 1; }
.docs-search--hero kbd, .docs-search-trigger kbd {
  font-family: var(--font-b); font-size: 0.72rem; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--muted); letter-spacing: 0.02em;
}
.docs-popular a.tag { cursor: pointer; transition: var(--trans); text-decoration: none; }
.docs-popular a.tag:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* ============================================================
   DOCS — article shell (3-column)
   ============================================================ */
.docs-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 112px 28px 80px;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 220px;
  gap: 48px;
  align-items: start;
}
.docs-shell--no-toc { grid-template-columns: 264px minmax(0, 1fr); }

/* Sidebar */
.docs-sidebar {
  position: sticky; top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}
.docs-sidebar::-webkit-scrollbar { width: 6px; }
.docs-sidebar::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

.docs-search-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md);
  color: var(--muted); font-family: var(--font-b); font-size: 0.88rem;
  cursor: pointer; transition: var(--trans);
  margin-bottom: 24px;
}
.docs-search-trigger:hover { border-color: var(--accent); color: var(--text); }
.docs-search-trigger span { flex: 1; text-align: left; }

.docs-nav-home {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--muted); margin-bottom: 18px;
  text-decoration: none; padding: 4px 0;
}
.docs-nav-home:hover { color: var(--accent); }
.docs-nav-home svg { transform: rotate(-90deg); }

.docs-nav-section { margin-bottom: 22px; }
.docs-nav-section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--text-2); margin-bottom: 10px;
}
.docs-nav-section-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--grad-icon-bg); border: 1px solid var(--border-2);
  color: var(--accent);
}
.docs-nav-list { list-style: none; padding: 0; margin: 0 0 8px 30px; border-left: 1px solid var(--border); }
.docs-nav-list li { margin: 0; }
.docs-nav-list a {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; margin-left: -1px;
  font-size: 0.88rem; line-height: 1.4; color: var(--text-2);
  text-decoration: none; border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.docs-nav-list a:hover { color: var(--accent); }
.docs-nav-list a.is-current {
  color: var(--accent); border-left-color: var(--accent);
  background: linear-gradient(90deg, var(--accent-bg), transparent);
  font-weight: 600;
}
.docs-nav-sub { margin-top: 10px; }
.docs-nav-sub-head {
  font-size: 0.7rem; font-weight: 600; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 6px 0 4px 30px;
}
.docs-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: var(--r-full);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.1));
  color: var(--accent); border: 1px solid var(--border-2);
}
.docs-pill--dev { background: rgba(45,45,78,0.06); color: var(--text-2); }

/* Content */
.docs-content { min-width: 0; }
.docs-breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 0.83rem; color: var(--muted); margin-bottom: 18px;
}
.docs-breadcrumb a { color: var(--muted); text-decoration: none; }
.docs-breadcrumb a:hover { color: var(--accent); }
.docs-breadcrumb span[aria-hidden] { color: var(--dim); }

.docs-article-head { margin-bottom: 28px; }
.docs-article-tags { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.docs-article-head h1 {
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1.2; margin: 0;
  letter-spacing: -0.01em;
}

/* Callouts */
.docs-callout {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; border-radius: var(--r-md);
  margin: 22px 0;
  font-size: 0.94rem; line-height: 1.55;
}
.docs-callout--pro {
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.05));
  border: 1px solid var(--border-2);
  color: var(--text-2);
}
.docs-callout--dev {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.docs-callout-label {
  flex-shrink: 0;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--surface);
}
.docs-callout--pro .docs-callout-label { color: var(--accent); border: 1px solid var(--border-2); }
.docs-callout--dev .docs-callout-label { color: var(--muted); border: 1px solid var(--border); }

/* Prose typography */
.docs-prose { font-size: 1rem; line-height: 1.7; color: var(--text); }
.docs-prose > * + * { margin-top: 1.1em; }
.docs-prose h2 {
  font-size: 1.45rem; line-height: 1.3; letter-spacing: -0.01em;
  margin: 2.2em 0 0.6em; scroll-margin-top: 96px;
  padding-top: 0.4em; border-top: 1px solid var(--border);
}
.docs-prose h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.docs-prose h3 { font-size: 1.15rem; line-height: 1.35; margin: 1.8em 0 0.4em; scroll-margin-top: 96px; }
.docs-prose h4 { font-size: 1rem; margin: 1.4em 0 0.3em; }
.docs-prose p { color: var(--text); }
.docs-prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s ease; }
.docs-prose a:hover { color: var(--accent-dark); }
.docs-prose strong { color: var(--text); font-weight: 700; }
.docs-prose ul, .docs-prose ol { padding-left: 1.4em; }
.docs-prose ul { list-style: none; }
.docs-prose ul li { position: relative; padding-left: 0; margin: 0.4em 0; }
.docs-prose ul li::before {
  content: ''; position: absolute; left: -1.1em; top: 0.7em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.docs-prose ol { list-style: none; counter-reset: docs-ol; }
.docs-prose ol > li { counter-increment: docs-ol; position: relative; padding-left: 0.5em; margin: 0.6em 0; }
.docs-prose ol > li::before {
  content: counter(docs-ol);
  position: absolute; left: -1.4em; top: 0.05em;
  width: 1.5em; height: 1.5em; line-height: 1.5em;
  border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 0.78rem; font-weight: 700; text-align: center;
}
.docs-prose code {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.86em; padding: 2px 6px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--accent-dark);
}
.docs-prose pre {
  background: #13132b; color: #e4e2f0;
  padding: 18px 22px; border-radius: var(--r-md);
  overflow-x: auto; font-size: 0.86rem; line-height: 1.55;
  border: 1px solid rgba(255,255,255,0.06);
}
.docs-prose pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
.docs-prose blockquote {
  margin: 1.5em 0; padding: 12px 20px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  color: var(--text-2); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: normal;
}
.docs-prose blockquote p { margin: 0; }
.docs-prose hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
.docs-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.docs-prose table {
  width: 100%; border-collapse: collapse; margin: 1.3em 0;
  font-size: 0.92rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
}
.docs-prose thead { background: var(--surface-2); }
.docs-prose th, .docs-prose td {
  padding: 11px 16px; text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.docs-prose th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); font-weight: 700; }
.docs-prose tr:last-child td { border-bottom: none; }
.docs-prose td code { white-space: nowrap; }

/* Right TOC */
.docs-toc {
  position: sticky; top: 96px;
  align-self: start;
  font-size: 0.86rem;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.docs-toc-head {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--text-2); margin-bottom: 12px;
}
.docs-toc ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--border); }
.docs-toc li { margin: 0; }
.docs-toc a {
  display: block; padding: 5px 14px;
  color: var(--muted); text-decoration: none;
  border-left: 2px solid transparent; margin-left: -1px;
  line-height: 1.4;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.docs-toc a:hover { color: var(--accent); }
.docs-toc a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* Prev/Next */
.docs-prevnext {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--border);
}
.docs-prevnext-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 20px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border-2);
  text-decoration: none; color: var(--text);
  transition: var(--trans);
}
.docs-prevnext-link:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.docs-prevnext-link--next { text-align: right; align-items: flex-end; }
.docs-prevnext-label {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.docs-prevnext-title { font-size: 0.95rem; font-weight: 600; }
.docs-prevnext-arrow--flip { transform: rotate(180deg); }

/* Sidebar mobile toggle */
.docs-sidebar-toggle {
  display: none; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border-2);
  color: var(--text); font-family: var(--font-b); font-size: 0.86rem;
  font-weight: 600; cursor: pointer;
  margin-bottom: 16px;
}
.docs-sidebar-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Search modal */
.docs-search-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.docs-search-modal[hidden] { display: none; }
.docs-search-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(19, 19, 43, 0.55);
  backdrop-filter: blur(4px);
}
.docs-search-modal-panel {
  position: relative; z-index: 1;
  width: min(640px, calc(100% - 32px));
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-2);
  box-shadow: 0 30px 80px rgba(19,19,43,0.35);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.docs-search-modal-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.docs-search-modal-bar input {
  flex: 1; border: none; outline: none; background: none;
  font-family: var(--font-b); font-size: 1rem; color: var(--text);
}
.docs-search-modal-bar input::placeholder { color: var(--dim); }
.docs-search-modal-bar button {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 9px; border-radius: 6px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--muted); cursor: pointer;
}
.docs-search-modal-bar button:hover { color: var(--accent); border-color: var(--accent); }
.docs-search-modal-results { overflow-y: auto; padding: 8px; }
.docs-search-result {
  display: block; padding: 10px 14px;
  text-decoration: none; color: var(--text);
  border-radius: var(--r-md);
  transition: background 0.12s ease;
}
.docs-search-result:hover, .docs-search-result.is-active {
  background: var(--surface-2);
}
.docs-search-result-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.96rem; margin-bottom: 2px;
}
.docs-search-result-section { font-size: 0.76rem; color: var(--muted); }
.docs-search-result-preview { font-size: 0.84rem; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.docs-search-empty { padding: 22px 18px; color: var(--muted); font-size: 0.92rem; text-align: center; }
.docs-search-hint { padding: 22px 18px; color: var(--dim); font-size: 0.86rem; text-align: center; }
.docs-search-hint kbd {
  font-size: 0.72rem; padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--muted);
}

/* ============================================================
   DOCS — responsive
   ============================================================ */
@media (max-width: 1180px) {
  .docs-shell, .docs-shell--with-toc { grid-template-columns: 244px minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 880px) {
  .docs-shell, .docs-shell--with-toc, .docs-shell--no-toc {
    grid-template-columns: 1fr;
    padding: 92px 20px 64px;
    gap: 12px;
  }
  .docs-sidebar-toggle { display: inline-flex; }
  .docs-sidebar {
    position: fixed; inset: 0; top: 0; left: -100%;
    z-index: 9998; max-height: 100vh; height: 100vh;
    width: min(320px, 85%);
    background: var(--surface);
    box-shadow: 0 0 40px rgba(0,0,0,0.15);
    padding: 92px 20px 24px;
    transition: left 0.25s ease;
    overflow-y: auto;
  }
  .docs-sidebar.is-open { left: 0; }
  .docs-sidebar.is-open::before {
    content: ''; position: fixed; inset: 0; left: 320px;
    background: rgba(19,19,43,0.4); z-index: -1;
  }
  .docs-prevnext { grid-template-columns: 1fr; }
  .docs-prevnext-link--next { text-align: left; align-items: flex-start; }
}
@media (max-width: 480px) {
  .docs-shell { padding: 80px 16px 48px; }
  .docs-article-head h1 { font-size: 1.45rem; }
  .docs-prose pre { padding: 14px 16px; font-size: 0.8rem; }
  .docs-prose th, .docs-prose td { padding: 9px 12px; font-size: 0.85rem; }
}