/* ════════════════════════════════════════════════════════════════════
   pyChisel landing — semi-brutalist redesign (2026-05)
   ════════════════════════════════════════════════════════════════════
   tokens.css + fonts.css are loaded via direct <link> in index.html
   (NOT @imported here) so new token names can't be served stale.

   This surface reads using the design package's role names (--ink, --green,
   --offset, …); the block below aliases them onto the canonical --pc-*
   tokens so the styling stays token-routed but reads like the mockup.
   Scoped to the landing — does not affect other surfaces. */
:root {
  --ink:        var(--pc-ink);
  --ink-soft:   var(--pc-ink-soft);
  --line:       var(--pc-line);
  --paper:      var(--pc-paper);
  --paper-2:    var(--pc-paper-2);
  --muted:      var(--pc-muted);
  --muted-2:    var(--pc-muted-2);
  --green:      var(--pc-accent);
  --green-deep: var(--pc-accent-deep);
  --green-bg:   var(--pc-accent-bg);
  --green-glow: var(--pc-glow-soft);
  --danger:     var(--pc-danger);
  --card-bg:    var(--pc-card-bg);
  --offset:     var(--pc-offset);
  --offset-btn: var(--pc-offset-btn);
  --radius-card: var(--pc-radius-card);
  --radius-btn:  var(--pc-radius-btn);
  --glass-bg:   var(--pc-glass-paper);
  --glass-blur: var(--pc-glass-blur-14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
html, body {
  margin: 0; padding: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.5;
}
body {
  /* Transparent so the fixed .bg-fx layer (z-index:-1) shows through; --paper is on html.
     Dot grid moved to the .bg-fx stack so a glow can sit UNDER the dots. */
  background-color: transparent;
  overflow-x: hidden;
}

/* Interactive dot background lives in the shared bg-fx.css (linked in index.html head). */

/* ========== NAV ========== */
.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  position: sticky;
  top: 0;
  z-index: 100;
}
.brand {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Brand mark — finalized logo-showcase spec (lime square + chisel-bevel cut) */
.brand-mark {
  width: 22px;
  height: 22px;
  background: var(--green);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 18%;
  background: var(--line);
  clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%);
}
.brand .p { color: var(--ink); }
.brand .rest { color: var(--green-deep); }
.nav-links {
  display: flex;
  gap: 28px;
  flex: 1;
}
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.12s ease;
}
.nav-link:hover { color: var(--green-deep); }
/* nav-actions wrapper holds the right-hand auth controls (swapped by landing.js when logged in) */
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.btn-primary {
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  background: var(--green);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  cursor: pointer;
  box-shadow: var(--offset-btn) var(--offset-btn) 0 var(--line);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-primary:hover {
  box-shadow: 2px 2px 0 var(--line);
  transform: translate(-1px, -1px);
}
.btn-primary:active {
  box-shadow: 0 0 0 var(--line);
  transform: translate(2px, 2px);
}
.btn-secondary {
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  cursor: pointer;
  box-shadow: var(--offset-btn) var(--offset-btn) 0 var(--line);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-secondary:hover {
  box-shadow: 2px 2px 0 var(--line);
  transform: translate(-1px, -1px);
}
.btn-secondary:active {
  box-shadow: 0 0 0 var(--line);
  transform: translate(2px, 2px);
}
/* Ghost / tertiary — used by the logged-in nav (Admin button injected by landing.js) */
.btn-ghost {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  cursor: pointer;
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.btn-ghost:hover {
  background: #fff;
  box-shadow: 1px 1px 0 var(--line);
  transform: translate(-1px, -1px);
}

/* ========== HERO ========== */
.hero {
  max-width: 1300px;
  margin: 0 auto;
  padding: 80px 40px 60px;
  display: grid;
  grid-template-columns: 1fr 2fr;   /* text ~1/3 · live-build window ~2/3 */
  gap: 60px;
  align-items: center;
}
.hero h1 {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
}
.hero h1 .accent {
  color: var(--green-deep);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-block;
  margin-top: 8px;
}
.hero h1 .ellipsis {
  letter-spacing: 0.1em;
  color: var(--muted-2);
  font-weight: 600;
  margin: 0 0.05em;
}
/* Punchy value-prop line directly under the headline (action-oriented), above the
   descriptive sub. CHI-UI-20260529. */
.hero-tagline {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--green-deep);   /* green like the old "See it live today" accent */
  margin: 0 0 14px;
  max-width: 480px;
}
.hero-tagline strong { color: var(--green-deep); font-weight: 700; }
.hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 28px;
  max-width: 480px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.avatars { display: flex; }
.avatar {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--green);
  margin-left: -6px;
  box-shadow: 1px 1px 0 var(--line);
}
.avatar:first-child { margin-left: 0; }
.avatar:nth-child(2) { background: #ffd266; }
.avatar:nth-child(3) { background: #7fb3ff; }
.avatar:nth-child(4) { background: #ff9ec7; }
.avatar:nth-child(5) { background: var(--paper-2); }

/* ========== HERO IDE VISUAL ========== */
/* Perspective stage so the cursor-tracked tilt reads as real 3D depth. */
.hero-stage { perspective: 1400px; }
.ide {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 6px 6px 0 var(--line);
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  /* Resting tilt; landing.js overrides on cursor move and eases back to this on leave. */
  transform: rotateX(1.5deg) rotateY(-4deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
/* Snappier follow while the cursor is actively tracking (set by landing.js). */
.ide.tilting { transition: transform 0.12s ease-out; }
.ide-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  background: var(--green);
  border-bottom: 0 solid var(--line);
  border-left: 0 solid var(--line);
  border-top-right-radius: calc(var(--radius-card) - 2px);
  pointer-events: none;
  z-index: 5;
  transition: width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ide:hover .ide-indicator {
  width: 30px;
  height: 30px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.ide-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.ide-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.ide-dot.red { background: #ff5f57; }
.ide-dot.yellow { background: #febc2e; }
.ide-dot.green { background: #28c840; }
.ide-tab {
  margin-left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.ide-body {
  position: relative;
  background: #fff;
}
/* The framed live-build preview fills the window at 16:9. */
.ide-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
/* Transparent cursor-catcher over the iframe (drives the 3D tilt in landing.js). */
.tilt-catch {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.ide-tree {
  padding: 10px 0;
  border-right: 1.5px solid var(--paper-2);
  background: #fcfcf9;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.ide-tree-section {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  padding: 4px 12px 8px;
  text-transform: uppercase;
}
.ide-tree-section--spaced { margin-top: 6px; }
.ide-file {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  color: var(--ink-soft);
  cursor: default;
}
.ide-file.active {
  background: var(--green-bg);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--green-deep);
}
.ide-file::before {
  content: "▸";
  font-size: 9px;
  color: var(--muted-2);
}
.ide-file.active::before { color: var(--green-deep); }
.ide-code {
  padding: 14px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.7;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
  border-right: 1.5px solid var(--paper-2);
}
.code-line { white-space: pre; }
.code-comment { color: var(--muted-2); font-style: italic; }
.code-kw { color: #8b3eff; font-weight: 500; }
.code-fn { color: #1a73e8; }
.code-str { color: #c2410c; }
.code-prop { color: #0c8b5e; }
.code-num { color: #ff9ec7; }
.ide-terminal {
  grid-column: 2 / 3;
  background: #0d0e10;
  color: #d4d7dc;
  padding: 12px 14px;
  border-top: 1.5px solid var(--paper-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.65;
}
.ide-terminal-fullwidth { grid-column: 1 / 4; }
.ide-terminal .term-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #6a6d72;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 600;
}
.ide-term-line .ip { color: var(--green); }
.ide-term-line .info { color: #7fb3ff; }
.term-url { color: var(--green); }
.ide-chat {
  background: var(--paper-2);
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1.5px solid var(--paper-2);
}
.ide-chat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.chat-msg {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 1px 1px 0 var(--line);
}
.chat-msg.user {
  background: var(--green);
  font-weight: 600;
}
.chat-action {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--green-deep);
  padding: 2px 0;
}
.chat-action::before {
  content: "✓";
  font-weight: 700;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.term-cursor {
  display: inline-block;
  width: 6px;
  height: 12px;
  background: var(--green);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1s steps(2) infinite;
}
.ide-chat .chat-action {
  opacity: 0;
  animation: chat-reveal 0.3s ease forwards;
}
@keyframes chat-reveal {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}
.ide-chat .chat-action:nth-child(3) { animation-delay: 0.6s; }
.ide-chat .chat-action:nth-child(4) { animation-delay: 0.9s; }
.ide-chat .chat-action:nth-child(5) { animation-delay: 1.2s; }

/* ========== INTEGRATIONS SCROLLER ========== */
.integrations-band {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  overflow: hidden;
  position: relative;
}
.integrations-label {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.integrations-label::before { content: "// "; color: var(--green-deep); }
.integrations-track-wrap {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.integrations-track {
  display: flex;
  gap: 22px;
  width: max-content;
  /* Auto-scroll + drag are driven by landing.js (transform). touch-action: pan-y
     lets vertical page scroll pass through while we own the horizontal drag. */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.integrations-track.dragging { cursor: grabbing; }
/* Stop the browser's native image-drag ghost when grabbing a chip logo. */
.integrations-track img {
  -webkit-user-drag: none;
  user-drag: none;
}
.intg-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  box-shadow: 2px 2px 0 var(--line);
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
}
.intg-chip img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.intg-chip.coming { opacity: 0.55; }
.intg-chip.coming::after {
  content: "soon";
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 2px 6px;
  background: var(--paper-2);
  border: 1px solid var(--muted-2);
  border-radius: 2px;
  margin-left: 4px;
}

/* ========== STATS ========== */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 32px 40px;
}
.stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.stat {
  text-align: center;
  position: relative;
}
.stat-num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-num .accent { color: var(--green-deep); }
.stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 10%;
  bottom: 10%;
  width: 1.5px;
  background: var(--paper-2);
}

/* ========== SECTION SHARED ========== */
.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 40px;
}
.section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--green-deep);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-eyebrow::before { content: "// "; }
.section-eyebrow--inline { display: inline-block; }
.section h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.section-sub {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 48px;
  max-width: 600px;
}
.section-sub--centered { margin-left: auto; margin-right: auto; }

/* ========== FEATURES ========== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.feature {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 24px 26px;
  box-shadow: var(--offset) var(--offset) 0 var(--line);
  position: relative;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              rotate 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.feature:nth-child(6n+1) { rotate: -0.7deg; }
.feature:nth-child(6n+2) { rotate:  0.5deg; }
.feature:nth-child(6n+3) { rotate: -0.4deg; }
.feature:nth-child(6n+4) { rotate:  0.8deg; }
.feature:nth-child(6n+5) { rotate: -0.5deg; }
.feature:nth-child(6n+6) { rotate:  0.6deg; }
.feature:hover,
.feature.highlight {
  rotate: 0deg;
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--line);
}
.feature.highlight {
  background: #fffef5;
}
.feature-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  background: var(--green);
  border-bottom: 0 solid var(--line);
  border-left: 0 solid var(--line);
  border-top-right-radius: calc(var(--radius-card) - 2px);
  pointer-events: none;
  transition: width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.feature:hover .feature-indicator,
.feature.highlight .feature-indicator {
  width: 24px;
  height: 24px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.feature-icon {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 2px 2px 0 var(--line);
}
.feature-icon svg { width: 18px; height: 18px; }
.feature h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.feature p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}
.feature-demo {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 14px;
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.feature-demo .demo-prompt {
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.feature-demo .demo-line {
  color: var(--green-deep);
  display: block;
  line-height: 1.7;
}
.feature-demo .demo-line .check {
  color: var(--green-deep);
  margin-right: 4px;
}
.inline-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ========== GNDCTRL READ-MORE CTA + POPUP ========== */
.gndctrl-cta-row {
  margin-top: 36px;
  text-align: center;
}

#gndctrl-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
#gndctrl-modal {
  position: relative;
  width: min(1120px, 96vw);
  height: min(840px, 92vh);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.10),
    0 24px 48px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gndctrl-modal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.gndctrl-modal-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gndctrl-open-tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--green-deep);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: #fff;
  box-shadow: 1px 1px 0 var(--line);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.gndctrl-open-tab:hover {
  box-shadow: 2px 2px 0 var(--line);
  transform: translate(-1px, -1px);
}
#gndctrl-close {
  width: 28px;
  height: 28px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--offset-btn) var(--offset-btn) 0 var(--line);
  transition: box-shadow 0.1s ease, transform 0.1s ease;
}
#gndctrl-close:hover {
  box-shadow: 2px 2px 0 var(--line);
  transform: translate(-1px, -1px);
  color: var(--ink);
}
#gndctrl-close:active {
  box-shadow: 0 0 0 var(--line);
  transform: translate(1px, 1px);
}
#gndctrl-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}

/* ========== HOW IT WORKS ========== */
.how {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 80px 40px;
}
.how-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.how-h2 { font-size: 38px; margin: 0 0 12px; }
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
}
.step { position: relative; }
.step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--green-deep);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.step-num::before { content: "0"; }
.step h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.step p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -28px;
  top: 0;
  color: var(--muted-2);
  font-size: 18px;
}

/* ========== PRICING ========== */
.pricing-header { text-align: center; margin-bottom: 48px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}
.price-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  box-shadow: var(--offset) var(--offset) 0 var(--line);
  position: relative;
}
.price-card.popular {
  background: #fffef5;
  box-shadow: 2px 2px 0 var(--line);
}
.price-popular-tag {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--green);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: 2px 2px 0 var(--line);
}
.price-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.price-card-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.price-num {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.price-period {
  font-size: 13px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.price-alt {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 22px;
  font-family: 'JetBrains Mono', monospace;
}
.price-alt b { color: var(--ink); font-weight: 600; }
.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.price-features li {
  font-size: 14px;
  color: var(--ink-soft);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-features li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--green);
  border: 1px solid var(--line);
  border-radius: 2px;
  flex-shrink: 0;
}
.price-cta {
  width: 100%;
  justify-content: center;
}
.price-cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ========== AI BILLING NOTE ========== */
.ai-note {
  max-width: 880px;
  margin: 40px auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px 26px;
  box-shadow: var(--offset) var(--offset) 0 var(--line);
}
.ai-note h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
}
.ai-note-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 20px;
}
.ai-note-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ai-note-box {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px;
  position: relative;
}
.ai-note-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--green-deep);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ai-note-tag::before { content: "// "; }
.ai-note-box h5 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px;
}
.ai-note-box p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.6;
}
.ai-providers {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.ai-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  letter-spacing: 0.05em;
}

/* ========== FINAL CTA ========== */
.final-cta {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 80px 40px;
  text-align: center;
}
.final-cta-inner {
  max-width: 700px;
  margin: 0 auto;
}
.final-cta-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: var(--green-bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 5px 12px;
  margin-bottom: 20px;
}
.final-cta h2 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.final-cta h2 .accent { color: var(--green-deep); }
.final-cta p {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 28px;
}
.btn-primary--large { padding: 12px 24px; font-size: 15px; }

/* ========== FOOTER ========== */
.footer {
  border-top: 1px solid var(--line);
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
}
.footer-brand {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-brand-mark { width: 18px; height: 18px; }
.footer-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted-2);
}

/* ========== AUTH + REQUEST MODALS (floating-overlay tier) ========== */
#auth-backdrop, #request-backdrop, #signup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
#auth-modal, #request-modal, #signup-modal {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  /* Overlay tier: soft layered shadows, not a hard offset */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.10),
    0 24px 48px rgba(0, 0, 0, 0.06);
  padding: 28px 26px 24px;
}
#auth-close, #request-close, #signup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--offset-btn) var(--offset-btn) 0 var(--line);
  transition: box-shadow 0.1s ease, transform 0.1s ease;
}
#auth-close:hover, #request-close:hover, #signup-close:hover {
  box-shadow: 2px 2px 0 var(--line);
  transform: translate(-1px, -1px);
  color: var(--ink);
}
#auth-close:active, #request-close:active, #signup-close:active {
  box-shadow: 0 0 0 var(--line);
  transform: translate(1px, 1px);
}

/* Signup modal extras (CHI-ONB-20260601-001) */
.signup-sub { font-size: 12.5px; color: var(--muted); text-align: center; margin: -6px 0 16px; line-height: 1.5; }
.signup-sub strong { color: var(--ink); font-weight: 600; }
.signup-tos { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.5; font-weight: 400; margin: 2px 0 4px; cursor: pointer; }
.signup-tos input { margin-top: 2px; flex-shrink: 0; }
.signup-tos a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.hero-free-link { display: inline-block; margin-bottom: 28px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hero-free-link:hover { color: var(--ink); }
.auth-logo {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}
.auth-logo .brand {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-tagline {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin: 8px 0 20px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 6px;
}
/* @gndctrl:node CHI-AUTH-20260711-001 note: label/input MUST stay display:block+width:100% — the MFA step wrappers (#signin-cred-step/#signin-mfa-step) are plain block divs, not flex, so default inline flow would crowd Username/Password + inputs onto one row. */
.auth-form input, .auth-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  color: var(--ink);
  box-shadow: var(--offset-btn) var(--offset-btn) 0 var(--line);
  transition: box-shadow 0.12s ease, transform 0.12s ease, background 0.2s ease;
}
.auth-form input:focus, .auth-form textarea:focus {
  outline: none;
  box-shadow: 1px 1px 0 var(--line);
  transform: translate(1px, 1px);
  background: #fff;
}
.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 14px;
}
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  text-decoration: none;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  box-shadow: var(--offset-btn) var(--offset-btn) 0 var(--line);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
  margin-bottom: 4px;
}
.google-btn:hover {
  box-shadow: 2px 2px 0 var(--line);
  transform: translate(-1px, -1px);
}
.google-btn:active {
  box-shadow: 0 0 0 var(--line);
  transform: translate(2px, 2px);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted-2);
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  margin: 8px 0;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--paper-2);
}
.auth-error {
  font-size: 13px;
  padding: 9px 12px;
  border-radius: var(--radius-btn);
  background: #fdeceb;
  border: 1px solid var(--danger);
  color: var(--danger);
  margin-top: 10px;
}
.auth-success {
  font-size: 13px;
  padding: 9px 12px;
  border-radius: var(--radius-btn);
  background: var(--green-bg);
  border: 1px solid var(--green-deep);
  color: var(--green-deep);
  margin-top: 10px;
}
.auth-footer {
  display: flex;
  gap: 6px;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px;
}
.auth-link-btn {
  color: var(--green-deep);
  font-weight: 600;
  text-decoration: none;
}
.auth-link-btn:hover { text-decoration: underline; }

.hidden { display: none !important; }

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
  .nav { padding: 14px 20px; gap: 16px; }
  .nav-links { display: none; }
  .hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 24px 40px;
  }
  /* Flatten the 3D tilt once the hero stacks (no cursor tracking on touch). */
  .hero-stage { perspective: none; }
  .ide { transform: none; }
  .hero h1 { font-size: 42px; }
  .hero h1 .accent { font-size: 34px; }
  .section { padding: 64px 24px; }
  .section h2 { font-size: 32px; }
  .how { padding: 64px 24px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { padding: 28px 24px; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .stat:not(:last-child)::after { display: none; }
  .how-steps { grid-template-columns: 1fr; gap: 28px; }
  .step:not(:last-child)::after { display: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .ai-note-grid { grid-template-columns: 1fr; }
  .final-cta h2 { font-size: 34px; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 34px; }
  .hero h1 .accent { font-size: 28px; }
  .features-grid { grid-template-columns: 1fr; }
  /* Hero IDE visual is detail-heavy; drop it on phones per the handoff */
  .ide { display: none; }
  .footer { flex-direction: column; gap: 10px; text-align: center; }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .integrations-track { animation: none; }
  .ide-chat .chat-action { opacity: 1; transform: none; }
}