:root {
  --bg: #08080f;
  --surface: #0f0f1a;
  --surface2: #16162a;
  --border: rgba(124,58,237,0.18);
  --accent: #7c3aed;
  --accent-glow: rgba(124,58,237,0.35);
  --accent-soft: rgba(124,58,237,0.12);
  --red: #e74c3c; --red-soft: rgba(231,76,60,0.12);
  --amber: #f59e0b; --amber-soft: rgba(245,158,11,0.12);
  --blue: #3b82f6; --blue-soft: rgba(59,130,246,0.12);
  --green: #22c55e; --green-soft: rgba(34,197,94,0.12);
  --pink: #ec4899; --pink-soft: rgba(236,72,153,0.12);
  --text: oklch(0.96 0.01 290);
  --text-muted: oklch(0.65 0.02 290);
  --text-dim: oklch(0.45 0.02 290);
  --font-display: 'Lato', sans-serif;
  --font-body: 'Lato', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --r: 12px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── GRAIN OVERLAY ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.028;
  pointer-events: none;
  z-index: 9999;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
  height: 60px;
  background: rgba(8,8,15,0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

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

.logo-mark {
  width: 32px; height: 32px;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}

.nav-logo span {
  font-family: var(--font-display);
  font-weight: 700; font-size: 17px;
  color: var(--text);
}

.nav-cluster {
  display: flex; align-items: center; gap: 24px;
}

.nav-links {
  display: flex; align-items: center; gap: 32px;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 38px; height: 38px;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.nav-toggle:hover { border-color: rgba(124,58,237,0.4); }
.nav-toggle span {
  display: block;
  position: absolute;
  left: 9px; right: 9px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 18px; }
.nav-toggle span:nth-child(3) { top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 18px; transform: rotate(-45deg); }

.nav-cta {
  background: var(--accent);
  color: white !important;
  padding: 7px 18px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px !important;
  transition: background 0.2s, box-shadow 0.2s !important;
}
.nav-cta:hover {
  background: oklch(0.58 0.22 290) !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

/* ── HERO ── */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 120px 48px 80px;
  position: relative; overflow: hidden;
  text-align: center;
}

.hero-mesh {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124,58,237,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(236,72,153,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 30% 25% at 80% 60%, rgba(59,130,246,0.07) 0%, transparent 60%);
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px 5px 8px;
  font-size: 12px; font-weight: 500;
  color: oklch(0.8 0.12 290);
  font-family: var(--font-mono);
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(0.85)} }

h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 112px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  background: linear-gradient(160deg, var(--text) 30%, oklch(0.75 0.15 290) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
}

.hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--text-muted);
  max-width: 540px;
  line-height: 1.65;
  margin-bottom: 40px;
  font-weight: 300;
}

.hero-actions {
  display: flex; gap: 12px; justify-content: center; align-items: center;
  margin-bottom: 72px;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--accent);
  color: white;
  padding: 13px 28px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 0 30px rgba(124,58,237,0.4);
  display: flex; align-items: center; gap: 8px;
}
.btn-primary:hover { background: oklch(0.58 0.22 290); box-shadow: 0 0 40px rgba(124,58,237,0.6); transform: translateY(-1px); }

.btn-secondary {
  background: var(--surface);
  color: var(--text-muted);
  padding: 13px 28px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: all 0.2s;
  display: flex; align-items: center; gap: 8px;
}
.btn-secondary:hover { color: var(--text); border-color: rgba(124,58,237,0.4); background: var(--surface2); }

/* ── BROWSER MOCKUP ──
   Softened so the mockup reads as a site element, not a real OS window:
   reduced drop shadow, a subtle purple halo that ties it to the brand,
   and muted traffic-light dots (desaturated + lowered opacity). */
.browser-wrap {
  width: min(900px, 100%);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(124,58,237,0.18);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.45),
    0 0 80px -20px rgba(124,58,237,0.35),
    0 0 0 1px rgba(124,58,237,0.12);
  position: relative;
  background: #fff;
}

.browser-chrome {
  background: linear-gradient(180deg, #1e1e24 0%, #17171d 100%);
  height: 38px;
  display: flex; align-items: center;
  padding: 0 14px; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.b-dot {
  width: 9px; height: 9px; border-radius: 50%;
  opacity: 0.55;
}
.b-red { background: #ff5f57; }
.b-amber { background: #febc2e; }
.b-green { background: #28c840; }
.browser-bar {
  flex: 1; margin: 0 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  height: 22px;
  display: flex; align-items: center;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}
.ext-chip {
  width: 20px; height: 20px;
  filter: drop-shadow(0 0 4px var(--accent-glow));
}

.browser-body {
  background: #f4f4f5;
  min-height: 360px;
  position: relative;
  overflow: hidden;
  font-family: Georgia, serif;
  font-size: 14px;
  color: #1a1a1a;
  padding: 28px 36px;
}

/* Fake article content */
.fake-article {
  max-width: 580px;
  position: relative;
  transition: max-width 0.8s ease;
}
.fake-article.expanded { max-width: 760px !important; }
.fake-site-header {
  font-family: 'Arial Black', sans-serif;
  font-size: 18px; font-weight: 900;
  color: #111;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
  display: flex; align-items: center; gap: 12px;
}
.fake-site-tag { color: #e74c3c; font-size: 12px; }
.fake-h1 { font-size: 20px; font-weight: 700; color: #111; line-height: 1.3; margin-bottom: 10px; }
.fake-byline { font-size: 11px; color: #888; margin-bottom: 14px; font-family: Arial, sans-serif; }
.fake-p { font-size: 13px; line-height: 1.7; color: #333; margin-bottom: 10px; }

/* Adnota overlays on fake article */
.anno-highlight {
  background: transparent;
  border-radius: 2px;
  /* opacity transitions alongside background so the highlight participates
     in the reload fade-out/restore sweep. */
  transition: background 0.3s, opacity 0.28s;
}
.anno-highlight.visible {
  background: rgba(250, 204, 21, 0.55);
}

/* Article body + masthead get an opacity transition so they can fade with
   the rest of the mockup during the reload simulation, then fade back in
   together when the .reloading class is dropped. */
.fake-body-content,
.fake-site-header {
  transition: opacity 0.28s ease-out;
}
.anno-erase-target {
  position: absolute; right: 12px; top: 100px; bottom: 24px; width: 180px;
  background: #e8e8ec;
  border: 2px dashed #ccc;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: Arial, sans-serif; font-size: 11px; color: #999;
  text-align: center; padding: 16px;
  transition: opacity 0.4s;
}

/* Related-article card — sits in the top portion of the sidebar zone (above
   the ad slot). After the Eraser phase removes the ad, the Resizer phase
   selects this card and translates it to the bottom-right corner of the
   body to demo the position-drag tool. transform + measured --move-y let
   us animate between corners without switching between top/bottom. */
.anno-related-card {
  position: absolute;
  top: 24px;
  right: 12px;
  width: 180px;
  height: 62px;
  background: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  padding: 8px 12px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 3;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s ease,
              outline-color 0.2s ease,
              outline-offset 0.2s ease;
}
.anno-related-card.anno-resize-hover {
  outline: 2px dashed #3b82f6;
  outline-offset: 3px;
}
.anno-related-card.moved {
  transform: translate(var(--move-x, 0px), var(--move-y, 200px));
}
.related-eyebrow {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.related-title {
  font-size: 11px;
  font-weight: 600;
  color: #18181b;
  line-height: 1.3;
}
.related-meta {
  font-size: 9px;
  color: #888;
  margin-top: auto;
  font-family: Arial, sans-serif;
}
.anno-erase-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #0f0f0f;
  color: #e4e4e7;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.anno-erase-target.anno-erase-hover .anno-erase-badge {
  opacity: 1;
}
.anno-erase-target.erased {
  opacity: 0;
}
.anno-erase-hover {
  border: 2px solid #ef4444 !important;
  background: rgba(239, 68, 68, 0.15) !important;
}
/* Outline + handles wrap .fake-body-content (paragraphs only), not the
   whole article — the Resizer phase only operates on the body content,
   so the masthead/headline/byline shouldn't appear inside the selection. */
.fake-body-content { position: relative; }
.fake-article.anno-resize-hover .fake-body-content {
  outline: 2px dashed #3b82f6;
  outline-offset: 2px;
  border-radius: 2px;
}
/* When the article is in resize-hover, lift it above the related card
   (z-index: 3) so the dashed outline + handles render in front of the
   sidebar card rather than being clipped behind it. */
.fake-article.anno-resize-hover {
  z-index: 5;
}

/* Resizer selection handles — ported from webrevise/content/resizer.css.
   Children of .fake-body-content; hidden (opacity 0) until .fake-article
   has .anno-resize-hover. Class names are `resizer-*` to avoid colliding
   with the feature-card `.resize-handle` styles elsewhere in this sheet. */
.resizer-handle,
.resizer-reset {
  position: absolute;
  background: #3b82f6;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 4;
}
.fake-article.anno-resize-hover .resizer-handle,
.fake-article.anno-resize-hover .resizer-reset {
  opacity: 1;
}

.resizer-handle.rz-left,
.resizer-handle.rz-right   { width: 8px;  height: 28px; border-radius: 4px; top: 50%; transform: translateY(-50%); }
.resizer-handle.rz-top,
.resizer-handle.rz-bottom  { width: 28px; height: 8px;  border-radius: 4px; left: 50%; transform: translateX(-50%); }
.resizer-handle.rz-corner  { width: 10px; height: 10px; border-radius: 2px; }

.resizer-handle.rz-left    { left:   -5px; }
.resizer-handle.rz-right   { right:  -5px; }
.resizer-handle.rz-top     { top:    -5px; }
.resizer-handle.rz-bottom  { bottom: -5px; }
.resizer-handle.rz-corner  { bottom: -6px; right: -6px; }

.resizer-reset {
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  display: grid;
  place-items: center;
}
.resizer-reset svg {
  width: 12px;
  height: 12px;
}

/* Sticky note — matches the real extension's card (webrevise/content/sticky.css
   .vellum-sticky-card + .vellum-theme-yellow). Scaled down from 260×140 to
   fit the demo mockup; colors, shadows, and the diagonal-stripe resizer
   corner are preserved as-is. */
.anno-sticky {
  position: absolute;
  top: 12px;
  right: 20px;
  width: 210px;
  min-height: 105px;
  background: #FBE6A1;
  color: #7A5B15;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.4s;
}
.anno-sticky.visible { opacity: 1; }

.sticky-header {
  height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 0 10px;
  border-bottom: 1px solid rgba(122, 91, 21, 0.15);
  flex-shrink: 0;
}
.sticky-timestamp {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  opacity: 0.5;
}
.sticky-x {
  font-size: 11px;
  line-height: 1;
  opacity: 0.45;
}
.sticky-body {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  flex: 1;
}
.sticky-resize-corner {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  background-image: repeating-linear-gradient(135deg,
    transparent, transparent 3px,
    rgba(122, 91, 21, 0.2) 3px, rgba(122, 91, 21, 0.2) 4px);
  pointer-events: none;
}

.anno-rect {
  position: absolute;
  border: 2px solid var(--pink);
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.anno-rect.visible { opacity: 1; }

.anno-scribble {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  transition: opacity 0.25s;
}
.anno-scribble.visible { opacity: 1; }
.anno-scribble path {
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Reload sweep — emulates a browser refresh. The progress bar is a 2px
   sliver pinned right under the chrome, sweeping 0 → 100% over 700ms while
   the page contents and visible annotations fade out together. When the
   .reloading class is dropped, base transitions on each element bring them
   back already-placed — proving "annotations persist across reloads"
   instead of just claiming it in copy. */
.reload-progress {
  position: absolute;
  top: 38px;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 40%, var(--pink) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 200ms ease-out;
}
.browser-wrap.reloading .reload-progress {
  opacity: 1;
  width: 100%;
  transition: width 700ms ease-out, opacity 100ms ease-in;
}
.browser-wrap.reloading .fake-body-content,
.browser-wrap.reloading .fake-site-header,
.browser-wrap.reloading .anno-highlight.visible,
.browser-wrap.reloading .anno-sticky.visible,
.browser-wrap.reloading .anno-rect.visible,
.browser-wrap.reloading .anno-scribble.visible {
  opacity: 0;
  transition: opacity 220ms ease-in;
}

/* ── SECTIONS ── */
section { padding: 100px 48px; }

.section-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.section-label::before {
  content: '';
  width: 20px; height: 1px;
  background: var(--accent);
  display: block;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 20px;
}

.text-gradient {
  background: linear-gradient(135deg, var(--text) 20%, oklch(0.72 0.18 290));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── PILLARS ── */
.pillars {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pillars-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.pillar {
  padding: 56px 40px;
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.pillar:last-child { border-right: none; }
.pillar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--p-color), transparent);
}

.pillar-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--p-bg);
  border: 1px solid var(--p-border);
  display: grid; place-items: center;
  margin-bottom: 20px;
  color: var(--p-color);
}
.pillar-icon svg { width: 22px; height: 22px; }

.pillar h3 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.pillar p { color: var(--text-muted); font-size: 14px; line-height: 1.7; font-weight: 300; }

/* ── FEATURES ── */
.features-section {
  max-width: 1100px;
  margin: 0 auto;
}

.features-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 20px;
}

.features-desc { color: var(--text-muted); font-size: 16px; line-height: 1.75; font-weight: 300; }

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
  cursor: default;
}
.feature-card:hover {
  border-color: var(--f-color);
  transform: translateY(-3px);
}
.feature-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--f-color), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.feature-card:hover::after { opacity: 1; }

.feature-card-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}

.feature-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}

.feature-card h3 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--text);
}

.feature-card p { color: var(--text-muted); font-size: 14px; line-height: 1.7; font-weight: 300; }

.feature-tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 16px;
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--f-color);
}

.feature-visual {
  margin-top: 20px;
  height: 80px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

/* ── DEMO VISUALS (CSS art for feature cards) ──
   Miniature recreations of each tool's real appearance. Colors/patterns
   mirror the actual extension: eraser uses #ef4444 with a dark dimension
   pill; sticky uses #FBE6A1/#B8F5B8 with a header divider + diagonal
   stripes corner; marker highlights are yellow-dominant; resizer has the
   white-bordered pill handles and corner square. */

.vis-eraser {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0f0f1a, #1a1025);
  display: flex; align-items: center; padding: 12px 16px; gap: 12px;
  position: relative;
}
.vis-eraser-text { font-size: 9px; color: rgba(255,255,255,0.25); line-height: 1.8; flex: 1; }
.vis-eraser-outline {
  position: absolute; right: 20px; top: 12px;
  width: 80px; height: 55px;
  border: 1.5px solid #ef4444;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.15);
}
.vis-eraser-badge {
  position: absolute; top: -8px; right: -8px;
  font-family: var(--font-mono); font-size: 7px;
  background: #ef4444; color: white;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.3;
}
.vis-eraser-hud {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(15,15,20,0.92);
  border-radius: 6px;
  padding: 3px 10px;
  font-family: var(--font-mono); font-size: 7px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  display: flex; gap: 6px; align-items: center;
}
.vis-eraser-conf { color: #ef4444; }

.vis-sticky {
  width: 100%; height: 100%;
  background: #f0f0f2;
  position: relative;
}
.vis-sticky-text { position: absolute; top: 10px; left: 12px; font-size: 8px; color: #555; line-height: 1.8; }
.vis-note {
  position: absolute;
  width: 64px;
  min-height: 52px;
  border-radius: 6px;
  font-size: 7px;
  line-height: 1.4;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vis-note.yellow {
  top: 6px; right: 10px;
  background: #FBE6A1; color: #7A5B15;
  transform: rotate(2deg);
}
.vis-note.green {
  top: 36px; right: 74px;
  background: #B8F5B8; color: #2A6A2A;
  transform: rotate(-2deg);
  width: 56px;
}
.vis-note > div:first-child {
  font-size: 6px;
  padding: 2px 6px 2px;
  opacity: 0.55;
  line-height: 1;
  font-weight: 500;
  flex-shrink: 0;
}
.vis-note.yellow > div:first-child { border-bottom: 1px solid rgba(122,91,21,0.2); }
.vis-note.green  > div:first-child { border-bottom: 1px solid rgba(42,106,42,0.2); }
.vis-note > div:last-child,
.vis-note > :not(:first-child) {
  padding: 3px 6px;
  flex: 1;
  font-weight: 500;
}
.vis-note::after {
  content: '';
  position: absolute;
  bottom: 2px; right: 2px;
  width: 8px; height: 8px;
}
.vis-note.yellow::after {
  background-image: repeating-linear-gradient(135deg,
    transparent, transparent 2px,
    rgba(122,91,21,0.3) 2px, rgba(122,91,21,0.3) 3px);
}
.vis-note.green::after {
  background-image: repeating-linear-gradient(135deg,
    transparent, transparent 2px,
    rgba(42,106,42,0.3) 2px, rgba(42,106,42,0.3) 3px);
}

.vis-highlight {
  width: 100%; height: 100%;
  background: #f8f8fa;
  padding: 10px 14px;
  font-size: 9px; color: #333; line-height: 1.8;
  position: relative;
}
mark.pink   { background: rgba(236, 72, 153, 0.35); color: inherit; padding: 1px 0; border-radius: 2px; }
mark.yellow { background: rgba(250, 204, 21, 0.55); color: inherit; padding: 1px 0; border-radius: 2px; }
.vis-draw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.92;
}

.vis-resizer {
  width: 100%; height: 100%;
  background: #f0f0f2;
  padding: 8px 10px;
  position: relative;
}
.vis-resize-box {
  width: 80px; height: 60px;
  border: 1.5px dashed #3b82f6;
  border-radius: 2px;
  background: transparent;
  position: relative;
}
/* Feature-card resize handles — pill-shaped to mirror the real extension.
   (Class names .resize-handle.br/.r/.b are legacy; the shapes below match
   the new resizer-handle styles in the hero mockup, just scaled down.) */
.resize-handle {
  position: absolute;
  background: #3b82f6;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.resize-handle.br {
  width: 7px; height: 7px;
  bottom: -4px; right: -4px;
  border-radius: 2px;
}
.resize-handle.r {
  width: 5px; height: 18px;
  top: 50%; right: -3px; transform: translateY(-50%);
  border-radius: 3px;
}
.resize-handle.b {
  width: 18px; height: 5px;
  bottom: -3px; left: 50%; transform: translateX(-50%);
  border-radius: 3px;
}
.vis-resize-badge {
  position: absolute; top: -8px; right: -8px;
  font-family: var(--font-mono); font-size: 7px;
  background: #3b82f6; color: white;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.3;
}

/* ── HOW IT WORKS ── */
.how-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.how-inner {
  max-width: 1100px; margin: 0 auto;
}

.how-header { text-align: center; margin-bottom: 64px; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 24px; left: calc(16% + 20px); right: calc(16% + 20px);
  height: 1px;
  background: linear-gradient(90deg, var(--border), var(--border));
  border-top: 1px dashed rgba(124,58,237,0.3);
}

.step {
  text-align: center;
  padding: 0 20px;
}

.step-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 18px;
  color: var(--accent);
  margin: 0 auto 20px;
  position: relative; z-index: 1;
}

.step h3 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  margin-bottom: 10px;
}

.step p { color: var(--text-muted); font-size: 14px; line-height: 1.7; font-weight: 300; }

/* ── PRIVACY STRIP ── */
.privacy-strip {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.priv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.priv-icon { margin-bottom: 12px; color: var(--accent); display: inline-flex; }
.priv-icon svg { width: 28px; height: 28px; }
.priv-card h4 { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.priv-card p { color: var(--text-dim); font-size: 13px; line-height: 1.6; font-weight: 300; }

/* ── FEATURE REQUEST ── */
.featureboard-section {
  max-width: 900px; margin: 0 auto;
  text-align: center;
}

.featureboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 48px;
}

.featureboard-header {
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(147,51,234,0.1));
  border-bottom: 1px solid var(--border);
  padding: 24px 32px;
  display: flex; align-items: center; gap: 16px;
}

.fb-icon {
  width: 40px; height: 40px;
  background: var(--accent);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px;
  box-shadow: 0 0 20px var(--accent-glow);
}

.featureboard-header h3 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
}
.featureboard-header p { color: var(--text-muted); font-size: 13px; }

.featureboard-body {
  padding: 32px;
}

.fb-embed-placeholder {
  background: var(--surface2);
  border: 1px dashed rgba(124,58,237,0.3);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
}

.fb-embed-placeholder p {
  color: var(--text-muted); font-size: 14px; margin-bottom: 20px;
}

.feature-requests-list {
  display: grid; gap: 10px;
  text-align: left;
  margin-bottom: 24px;
}

.fr-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.fr-item:hover { border-color: rgba(124,58,237,0.4); background: var(--surface2); }

.fr-votes {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 36px;
}
.fr-arrow { color: var(--text-dim); font-size: 12px; }
.fr-count { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--accent); }

.fr-content h4 { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.fr-content p { font-size: 12px; color: var(--text-dim); }

.fr-tag {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-family: var(--font-mono);
  border: 1px solid;
  flex-shrink: 0;
}
.fr-tag.planned { border-color: var(--amber); color: var(--amber); background: var(--amber-soft); }
.fr-tag.idea { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.fr-tag.wip { border-color: var(--green); color: var(--green); background: var(--green-soft); }

.fb-cta {
  background: var(--accent);
  color: white;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 0 24px var(--accent-glow);
}
.fb-cta:hover { background: oklch(0.58 0.22 290); box-shadow: 0 0 36px var(--accent-glow); }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 48px;
  display: flex; align-items: center; justify-content: space-between;
}

.footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-tagline { font-size: 13px; color: var(--text-dim); margin-top: 6px; }

.footer-links { display: flex; gap: 32px; }
.footer-links a { color: var(--text-dim); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.footer-links a:hover { color: var(--text-muted); }

.footer-note { font-size: 12px; color: var(--text-dim); text-align: right; line-height: 1.7; }

/* ── SCROLL REVEALS ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── TWEAKS PANEL ── */
#tweaks-panel {
  display: none;
  position: fixed; bottom: 24px; right: 24px; z-index: 10000;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 24px;
  width: 260px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
#tweaks-panel h4 {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tw-row { margin-bottom: 14px; }
.tw-row label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; font-family: var(--font-mono); }
.tw-row input[type="color"] { width: 100%; height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; }
.tw-row input[type="text"] { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; color: var(--text); font-size: 13px; font-family: var(--font-mono); }
.tw-row input:focus { outline: none; border-color: var(--accent); }
.tw-row input[type="checkbox"] { accent-color: var(--accent); }

/* Long unbreakable mono tokens (e.g. chrome.storage.local) must wrap in
   narrow grid tracks, otherwise they expand their column past 1fr. */
.priv-card code { overflow-wrap: anywhere; word-break: break-word; }

/* ── SCRATCH PAD SECTION ──
   Mockup of the in-page floating panel that aggregates HIGHLIGHT + NOTE
   text per URL. Austere by design: no per-snippet borders, no source chips,
   just text + optional muted #tag chips. Mirrors the real extension UI. */

.scratch-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.scratch-pad-mock {
  position: relative;
  width: 100%;
  max-width: 460px;
  justify-self: center;
  background: #0c0c16;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,58,237,0.04);
  font-family: var(--font-display);
}

.scratch-pad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 12px;
}

.scratch-pad-filters {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
}

.scratch-pill {
  color: var(--text-dim);
  white-space: nowrap;
  letter-spacing: 0.005em;
  position: relative;
  padding-bottom: 4px;
}
.scratch-pill.is-active {
  color: var(--accent);
}
.scratch-pill.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
}
.scratch-pill-dot { color: var(--text-dim); margin: 0 1px; }
.scratch-pill.is-active .scratch-pill-dot { color: var(--accent); opacity: 0.6; }

.scratch-pad-actions {
  display: flex;
  gap: 14px;
  color: var(--text-dim);
}
.scratch-pad-actions svg {
  width: 14px;
  height: 14px;
  display: block;
}

.scratch-pad-body {
  padding: 4px 0;
  max-height: 340px;
  overflow: hidden;
}

.scratch-snippet {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.scratch-snippet:last-child { border-bottom: none; }

.scratch-snippet p {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  white-space: pre-wrap;
}

@media (max-width: 768px) {
  .hero-badge-tail { display: none; }
  nav { padding: 0 20px; }
  .nav-cluster { gap: 12px; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: 60px; left: 0; right: 0;
    z-index: 99;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(8,8,15,0.96);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 4px 20px 12px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-links.is-open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 15px;
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-cta { padding: 7px 14px; font-size: 13px !important; }

  .hero { padding: 100px 24px 60px; }
  section { padding: 64px 24px; }
  .pillars-inner { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid var(--border); }
  .feature-grid { grid-template-columns: 1fr; }
  .features-header { grid-template-columns: 1fr; gap: 24px; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }

  /* Scratch-pad section: stack and shrink the mock to fit narrow viewports.
     Reorder so the section copy ("For the long conversation") leads and the
     mockup follows — sets context before the visual on small screens. */
  .scratch-grid { grid-template-columns: 1fr; gap: 40px; }
  .scratch-grid > .scratch-pad-mock { order: 2; }
  .scratch-pad-mock { max-width: 100%; }
  .scratch-pad-filters { gap: 12px; font-size: 12px; }
  .scratch-pad-body { max-height: 320px; }

  /* Knowledge-base: collapse 2-col → 1-col, hide the dense
     badge column inside each mockup row so the row fits on phones. */
  .kb-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .kb-rows > div { padding: 10px 14px !important; }
  .kb-rows > div > div:nth-child(3) { display: none !important; }

  /* minmax(0,1fr) prevents the chrome.storage.local <code> token
     from blowing out the right column. */
  .privacy-strip { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

  .founder-card { padding: 28px 22px !important; }

  footer { flex-direction: column; gap: 32px; text-align: center; }
  .footer-links { flex-direction: column; gap: 14px; }
  .footer-note { text-align: center; }

  /* Hero browser mockup uses fixed pixel positions for the dock, sticky
     note, and erase overlay — calibrated to a ≥760px wrap. Render at
     natural size and scale-to-fit; the wrapper takes the scaled visual
     footprint so the caption and next section don't land in the empty
     layout box the transform leaves behind. */
  .hero-mockup {
    /* Match desktop wrap width (900) so the article keeps its horizontal
       gutter inside the body — at 760 the expanded article clamped to body
       width and the resize outline dominated the frame.
       --mockup-h is generous (540) because iOS WebKit (Safari + Chrome —
       Chrome on iOS is forced to WebKit) renders Georgia with slightly
       different metrics than desktop browsers — paragraphs wrap to 3 lines,
       body grows, and a tighter wrap height clipped the dock. */
    --mockup-w: 900px;
    --mockup-h: 540px;
    --mockup-scale: calc((100vw - 48px) / var(--mockup-w));
    position: relative;
    width: 100%;
    height: calc(var(--mockup-h) * var(--mockup-scale) + 56px);
    gap: 0;
  }
  .hero-mockup .browser-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--mockup-w);
    height: var(--mockup-h);
    flex-shrink: 0;
    transform-origin: top center;
    transform: translateX(-50%) scale(var(--mockup-scale));
    /* Flex column so .browser-body stretches to fill the remaining wrap
       height (after the 38px chrome) — eliminates the bottom seam where
       the wrap's white background used to peek out past the body. */
    display: flex;
    flex-direction: column;
  }
  .hero-mockup .browser-body { flex: 1; }
  .hero-mockup .demo-caption {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}