/* =========================================================
   Chess Puzzle Sidebar — Landing
   Warm Dark Editorial · Newsreader + DM Sans · Gold on warm brown
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --bg: #1a1814;
  --bg-2: #14120f;
  --card: #221f19;
  --card-2: #242018;
  --elev: #2a2620;
  --surface-dark: #1e1b16;
  --border: #3a3428;
  --border-soft: #2e2a22;
  --gold: #c9a96e;
  --gold-soft: #a98a4f;
  --gold-glow: rgba(201, 169, 110, 0.18);
  --t-bright: #f0e6d4;
  --t-primary: #e8dcc8;
  --t-body: #d4c8b4;
  --t-muted: #bfb49e;
  --t-dim: #8a7e6e;
  --t-faint: #6a6052;
  --t-ghost: #4a4438;

  --board-light: #ebe6cb;
  --board-dark: #6f8f55;
  --board-light-forest: #d8d2b0;
  --board-dark-forest: #4f6b3a;
  --board-light-ocean: #d6dde3;
  --board-dark-ocean: #557082;
  --board-light-walnut: #e8d5b5;
  --board-dark-walnut: #8a6646;
  --board-light-night: #c4c8d6;
  --board-dark-night: #2c3550;

  --highlight: #e9e35a;
  --arrow: #d49a3a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--t-primary);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  transition: background 0.5s ease, color 0.5s ease;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grain overlay --------------------------------------------------- */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  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='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: var(--grain-strength, 1);
  transition: opacity 0.45s ease;
}

/* Vignette / glow on hero */
.hero-glow {
  position: absolute; inset: -200px -100px auto -100px; height: 900px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,169,110,0.10), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 30%, rgba(201,169,110,0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: var(--glow-strength, 1);
  transition: opacity 0.45s ease;
}

/* Type ----------------------------------------------------------- */
.serif { font-family: 'Newsreader', Georgia, serif; font-weight: 600; letter-spacing: -0.02em; }
.italic { font-style: italic; }
.label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Layout --------------------------------------------------------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; }
section { position: relative; padding: 110px 0; }
section + section { border-top: 1px solid var(--border-soft); }

/* Nav ------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26, 24, 20, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center; gap: 32px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav-brand .name {
  font-family: 'Newsreader', serif; font-weight: 600; font-size: 18px;
  color: var(--t-bright); letter-spacing: -0.01em;
}
.nav-brand .badge {
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600;
  color: var(--gold); background: var(--elev); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 100px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav-links a {
  color: var(--t-dim); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--t-primary); }

/* Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px;
  border-radius: 10px; padding: 12px 20px;
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold); color: #1a1814; border-color: var(--gold);
  box-shadow: 0 0 0 0 var(--gold-glow), 0 8px 24px -10px rgba(0,0,0,0.6);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 6px var(--gold-glow), 0 12px 28px -10px rgba(0,0,0,0.7);
}
.btn-ghost {
  background: transparent; color: var(--t-primary); border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--t-bright); }
.btn-lg { padding: 16px 26px; font-size: 15px; border-radius: 12px; }
.btn .chev { width: 14px; height: 14px; }

/* HERO ----------------------------------------------------------- */
.hero { padding: 80px 0 100px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 100px;
  background: var(--elev);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-muted);
  margin-bottom: 28px;
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,169,110,0.18); }
.hero h1 {
  font-family: 'Newsreader', serif; font-weight: 600;
  font-size: clamp(44px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--t-bright);
  margin: 0 0 24px;
}
.hero h1 em { font-style: italic; color: var(--gold); font-weight: 500; }
.hero p.lead {
  font-family: 'Newsreader', serif; font-size: 21px; line-height: 1.5;
  color: var(--t-body);
  font-weight: 400;
  max-width: 540px; margin: 0 0 36px;
}
.hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-meta {
  display: flex; gap: 22px; margin-top: 32px;
  font-size: 13px; color: var(--t-dim);
  align-items: center; flex-wrap: wrap;
}
.hero-meta .check { color: var(--gold); margin-right: 6px; }

/* Sidebar mock --------------------------------------------------- */
.sidebar-mock {
  position: relative;
  width: 100%; max-width: 460px;
  margin-left: auto;
  background: #1d1b17;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 80px -20px rgba(201,169,110,0.15);
  padding: 14px;
  font-family: 'DM Sans', sans-serif;
}
.sidebar-mock::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(201,169,110,0.25), transparent 30%);
  z-index: -1; filter: blur(14px); opacity: 0.6;
}
.sb-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 12px;
}
.sb-title {
  display: flex; align-items: center; gap: 10px;
  color: var(--t-bright); font-family: 'Newsreader', serif; font-weight: 600; font-size: 16px;
}
.sb-title .knight { color: var(--gold); font-size: 14px; }
.sb-titlebar .right {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; color: var(--t-dim);
}
.sb-titlebar .pips { display: flex; gap: 4px; }
.sb-titlebar .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.sb-titlebar .pip.on { background: var(--gold); }
.sb-titlebar .difficulty {
  font-size: 11px; font-weight: 600; color: var(--t-primary);
  background: var(--elev); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px;
}
.sb-meta {
  display: flex; gap: 8px; font-size: 11px; color: var(--t-dim);
  margin-bottom: 10px; padding: 0 4px;
}
.sb-meta .star { color: var(--gold); }
.sb-prompt {
  text-align: center; font-size: 12px; color: var(--t-muted);
  letter-spacing: 0.04em; padding: 8px; border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}
.sb-board-wrap {
  border-radius: 4px; overflow: hidden;
  border: 1px solid var(--border-soft);
  position: relative;
}
.sb-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 14px;
}
.sb-action {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px; text-align: center;
  font-size: 13px; color: var(--t-primary);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sb-action .ic { color: var(--gold); }
.sb-history {
  margin-top: 12px;
  border: 1px solid var(--border-soft); border-radius: 8px;
  font-size: 12px;
  overflow: hidden;
}
.sb-history thead {
  background: var(--surface-dark);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-dim);
}
.sb-history th, .sb-history td {
  text-align: left; padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.sb-history th:first-child, .sb-history td:first-child {
  width: 28px; color: var(--t-faint);
}
.sb-history td { color: var(--t-primary); font-family: 'DM Sans', sans-serif; font-weight: 500; }
.sb-history tr:last-child td { border-bottom: none; }

/* Chess board (CSS) ---------------------------------------------- */
.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  /* defaults — overridden per .theme-* */
  --bl: #eeeed2; --bd: #769656;
  --hint-bg: rgba(246,166,35,0.42); --hint-border: #f6a623;
  --last-bg: rgba(235,235,0,0.45);
  --select-bg: rgba(235,235,0,0.45); --select-border: rgba(235,235,0,0.85);
  --move-dot: rgba(40,40,10,0.50);
  --arrow: #f6a623;
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1 / 1;
  width: 100%;
  position: relative;
  font-family: 'Noto Sans Symbols 2', 'DejaVu Sans', 'Segoe UI Symbol', sans-serif;
  --bl: var(--board-light);
  --bd: var(--board-dark);
}
/* ---- Board themes (matched to extension's tech-design spec) ----- */
.board.theme-classic {
  --bl: #eeeed2; --bd: #769656;
  --hint-bg: rgba(246,166,35,0.42); --hint-border: #f6a623;
  --last-bg: rgba(235,235,0,0.45);
  --select-bg: rgba(235,235,0,0.45); --select-border: rgba(235,235,0,0.85);
  --move-dot: rgba(40,40,10,0.50);
  --arrow: #f6a623;
}
.board.theme-forest {
  --bl: #ffffdd; --bd: #86a666;
  --hint-bg: rgba(212,115,15,0.40); --hint-border: #d4730f;
  --last-bg: rgba(105,175,55,0.45);
  --select-bg: rgba(105,175,55,0.45); --select-border: rgba(105,175,55,0.85);
  --move-dot: rgba(30,60,20,0.55);
  --arrow: #d4730f;
}
.board.theme-ocean {
  --bl: #dee3e6; --bd: #8ca2ad;
  --hint-bg: rgba(224,128,24,0.40); --hint-border: #e08018;
  --last-bg: rgba(95,160,200,0.50);
  --select-bg: rgba(95,160,200,0.50); --select-border: rgba(95,160,200,0.85);
  --move-dot: rgba(25,48,65,0.55);
  --arrow: #e08018;
}
.board.theme-walnut {
  --bl: #e8d5b0; --bd: #8b5e15;
  --hint-bg: rgba(32,184,200,0.42); --hint-border: #20b8c8;
  --last-bg: rgba(205,148,45,0.55);
  --select-bg: rgba(205,148,45,0.55); --select-border: rgba(205,148,45,0.9);
  --move-dot: rgba(210,125,15,0.68);
  --arrow: #20b8c8;
}
.board.theme-night {
  --bl: #e8eaf6; --bd: #5c6bc0;
  --hint-bg: rgba(232,192,32,0.42); --hint-border: #e8c020;
  --last-bg: rgba(120,100,215,0.55);
  --select-bg: rgba(120,100,215,0.55); --select-border: rgba(120,100,215,0.9);
  --move-dot: rgba(20,15,75,0.62);
  --arrow: #e8c020;
}
.board.theme-ice {
  --bl: #dce9f5; --bd: #6b9fc7;
  --hint-bg: rgba(212,64,64,0.40); --hint-border: #d44040;
  --last-bg: rgba(80,150,220,0.50);
  --select-bg: rgba(80,150,220,0.50); --select-border: rgba(80,150,220,0.85);
  --move-dot: rgba(25,52,88,0.55);
  --arrow: #d44040;
}

.sq {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(18px, 4vw, 30px);
  line-height: 1;
}
.sq.l { background: var(--bl); }
.sq.d { background: var(--bd); }

/* layered highlights — base color always shows through via rgba */
.sq.last::before, .sq.sel::before, .sq.hint::before, .sq.hl::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.sq.last::before { background: var(--last-bg); }
.sq.sel::before  { background: var(--select-bg); box-shadow: inset 0 0 0 2px var(--select-border); }
.sq.hint::before { background: var(--hint-bg); box-shadow: inset 0 0 0 2px var(--hint-border); }
/* right-click highlight: fixed terracotta across ALL themes */
.sq.hl::before   { background: rgba(201,107,88,0.88); }

/* legal-move dot / capture ring */
.sq.dot::after, .sq.cap::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none; z-index: 2;
}
.sq.dot::after { width: 28%; height: 28%; border-radius: 50%; background: var(--move-dot); }
.sq.cap::after { width: 92%; height: 92%; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 4px var(--move-dot); }
.piece {
  position: relative; z-index: 2;
  width: 88%; height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
  user-select: none;
  pointer-events: none;
}
.dot::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 22%; height: 22%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.18); border-radius: 50%; z-index: 1;
}
.ring::before {
  content: ''; position: absolute; inset: 8%; border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.22); box-sizing: border-box; z-index: 1;
}
.coord-file, .coord-rank {
  position: absolute; font-size: 9px; font-weight: 600;
  font-family: 'DM Sans', sans-serif; color: rgba(0,0,0,0.4); pointer-events: none;
}
.coord-file { bottom: 1px; right: 3px; }
.coord-rank { top: 1px; left: 3px; }
.sq.l .coord-file, .sq.l .coord-rank { color: rgba(0,0,0,0.45); }
.sq.d .coord-file, .sq.d .coord-rank { color: rgba(255,255,255,0.5); }

/* Arrow overlay svg — coordinate space is 0..8 (one unit = one square) */
.arrows {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5;
  overflow: visible;
}
.arrows .arrow { fill: var(--arrow); opacity: 0.82; }

/* Browser mock --------------------------------------------------- */
.browser {
  border-radius: 14px; overflow: hidden;
  background: #0f0e0c;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
}
.browser-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #16140f;
  border-bottom: 1px solid var(--border-soft);
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 11px; height: 11px; border-radius: 50%; background: #3a3428; }
.browser-dots span:nth-child(1) { background: #c4544d; }
.browser-dots span:nth-child(2) { background: #c9a948; }
.browser-dots span:nth-child(3) { background: #6b8f5e; }
.url {
  flex: 1; padding: 6px 14px; background: #221f19; border: 1px solid var(--border-soft);
  border-radius: 6px; font-size: 12px; color: var(--t-dim);
  font-family: 'DM Sans'; display: flex; align-items: center; gap: 8px;
}
.url .lock { color: var(--t-faint); font-size: 11px; }
.browser-body { display: grid; grid-template-columns: 1fr 360px; min-height: 500px; }
.browser-page {
  background: #f6f2ea;
  color: #2a2620;
  padding: 30px 36px;
  font-family: 'Newsreader', serif;
  position: relative;
  overflow: hidden;
}
.browser-page .pretitle { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #8a7e6e; }
.browser-page .ptitle { font-size: 28px; line-height: 1.1; margin: 8px 0 10px; font-weight: 600; letter-spacing: -0.02em; color: #1a1814; max-width: 90%; }
.browser-page .pmeta { font-size: 12px; color: #7a7060; margin-bottom: 18px; font-family: 'DM Sans'; }
.browser-page .pbody { font-size: 14px; line-height: 1.7; color: #3a3428; max-width: 100%; column-count: 1; }
.browser-page .pbody p { margin: 0 0 12px; }
.browser-page .placeholder-img {
  width: 100%; height: 130px; margin-bottom: 16px; border-radius: 4px;
  background: repeating-linear-gradient(45deg, #d8cdba 0 8px, #cdc1ac 8px 16px);
  display: flex; align-items: center; justify-content: center;
  color: #6a6052; font-family: 'DM Sans'; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.browser-side {
  background: #1d1b17;
  border-left: 1px solid var(--border);
  padding: 14px;
  display: flex; flex-direction: column;
  position: relative;
}
.side-tag {
  position: absolute; top: -1px; left: -1px;
  background: var(--gold); color: #1a1814;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 0 0 8px 0;
  z-index: 4;
}

/* Sections ------------------------------------------------------- */
.section-head { text-align: center; margin-bottom: 60px; }
.section-head .label { display: inline-block; margin-bottom: 14px; }
.section-head h2 {
  font-family: 'Newsreader', serif; font-weight: 600;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--t-bright);
  margin: 0 0 18px;
  max-width: 760px;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.section-head h2 em { font-style: italic; color: var(--gold); font-weight: 500; }
.section-head p {
  font-family: 'Newsreader', serif; font-size: 19px; line-height: 1.5;
  color: var(--t-muted); max-width: 620px; margin: 0 auto;
  text-wrap: pretty;
}

/* Why side panel — split layout */
.split {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 80px; align-items: center;
}
.split.reverse { grid-template-columns: 1.05fr 0.95fr; }
.split.reverse > :first-child { order: 2; }

.split-text h3 {
  font-family: 'Newsreader', serif; font-weight: 600;
  font-size: 38px; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--t-bright); margin: 12px 0 18px;
}
.split-text h3 em { font-style: italic; color: var(--gold); font-weight: 500; }
.split-text p { font-family: 'Newsreader', serif; font-size: 18px; line-height: 1.6; color: var(--t-body); margin: 0 0 16px; max-width: 480px; }
.split-text ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.split-text ul li {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: 'DM Sans'; font-size: 15px; color: var(--t-body); line-height: 1.45;
}
.split-text ul li .check {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold-glow); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  margin-top: 2px;
}

/* Feature grid --------------------------------------------------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feat-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.feat-card:hover { border-color: var(--border); transform: translateY(-2px); }
.feat-card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--elev); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.feat-card h4 {
  font-family: 'Newsreader', serif; font-weight: 600;
  font-size: 22px; letter-spacing: -0.01em; line-height: 1.15;
  color: var(--t-bright); margin: 0;
}
.feat-card p { font-size: 14px; line-height: 1.55; color: var(--t-muted); margin: 0; }
.feat-card.span-2 { grid-column: span 2; }
.feat-card .demo {
  margin-top: auto; padding-top: 18px;
}

/* Hint phases ---------------------------------------------------- */
.hint-stage {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 50px;
}
.hint-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 24px;
}
.hint-card .step {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.hint-card .num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: #1a1814;
  font-family: 'DM Sans'; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.hint-card .step-label { font-family: 'DM Sans'; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.hint-card h4 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--t-bright); margin: 0 0 8px; }
.hint-card p { font-size: 14px; color: var(--t-muted); margin: 0 0 18px; }
.hint-card .b { aspect-ratio: 1; max-width: 320px; margin: 0 auto; }

/* ========================================================
   Customizer ("Make it yours") section — sidebar UI lifted
   from the actual extension settings panel, adapted to fit
   the warm dark editorial landing layout.
   ======================================================== */
.try-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}

/* Left column: the one interactive board, framed like a sidebar */
.try-board-wrap { position: relative; }
.try-board-frame {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  position: relative;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.55),
    0 0 80px -20px rgba(201,169,110,0.10);
}
.try-board-frame::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(201,169,110,0.18), transparent 35%);
  z-index: -1; filter: blur(14px); opacity: 0.5;
}
.try-board-meta {
  display: flex; gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; color: var(--t-dim);
  padding: 0 4px 8px;
}
.try-board-meta .star { color: var(--gold); }
.try-board-prompt {
  text-align: center;
  font-family: 'Newsreader', serif; font-style: italic;
  font-size: 13px; color: var(--t-muted);
  padding: 8px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}
#try-board {
  border-radius: 4px; overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 6px 28px rgba(0,0,0,0.4);
}
.try-board-caption {
  margin-top: 14px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; color: var(--t-faint);
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* Right column: the settings panel */
.try-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 22px 20px;
}
.try-panel-head {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Newsreader', serif; font-weight: 600; font-size: 18px;
  color: var(--t-bright); letter-spacing: -0.01em;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 18px;
}
.try-panel-head .gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(201,169,110,0.12);
  border: 1px solid var(--border);
  color: var(--gold);
  font-size: 14px;
}

.settings-section { margin-bottom: 22px; }
.settings-section:last-child { margin-bottom: 0; }
.settings-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t-dim);
  margin-bottom: 12px;
}

/* Theme swatch grid */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.theme-swatch {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
  border-radius: 12px;
  padding: 10px 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface-dark);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  font: inherit;
}
.theme-swatch:hover { border-color: var(--border); transform: translateY(-1px); }
.theme-swatch.active {
  border-color: var(--gold);
  background: rgba(201,169,110,0.08);
  box-shadow: 0 0 0 1px var(--gold);
}
.swatch-board {
  display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  width: 42px; height: 42px;
  border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.swatch-sq { display: block; }
.swatch-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  color: var(--t-muted); letter-spacing: 0.01em;
}
.theme-swatch.active .swatch-name { color: var(--gold); }

/* Piece style buttons */
.piece-style-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.piece-style-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 8px;
  background: var(--surface-dark);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  font: inherit;
}
.piece-style-btn:hover { border-color: var(--border); transform: translateY(-1px); }
.piece-style-btn.active {
  border-color: var(--gold);
  background: rgba(201,169,110,0.08);
  box-shadow: 0 0 0 1px var(--gold);
}
.ps-preview {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.ps-preview img {
  width: 32px; height: 32px; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.ps-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px; font-weight: 600;
  color: var(--t-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.piece-style-btn.active .ps-label { color: var(--gold); }

/* PRO chip overlay */
.pro-chip {
  position: absolute;
  top: 5px; right: 5px;
  background: var(--gold); color: #1a1814;
  font-family: 'DM Sans', sans-serif;
  font-size: 8px; font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 100px;
  pointer-events: none;
  line-height: 1.5;
}

/* Footer reminder */
.try-panel-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; color: var(--t-muted);
}
.try-panel-foot b { color: var(--t-bright); font-weight: 600; }
.try-panel-foot .dot-pro {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,169,110,0.18);
}
.try-link {
  margin-left: auto;
  color: var(--gold); text-decoration: none; font-weight: 600;
  transition: opacity 0.15s;
}
.try-link:hover { opacity: 0.8; }
/* Orphaned legacy gallery styles (kept commented for reference) */
/* .theme-card.is-free .plan { color: var(--t-dim); } */

/* Difficulty bars */
.diffs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 30px;
}
.diff {
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 14px;
  padding: 22px;
}
.diff .level { font-family: 'DM Sans'; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.diff h5 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--t-bright); margin: 0 0 6px; }
.diff .range { font-family: 'DM Sans'; font-size: 13px; color: var(--t-muted); margin-bottom: 14px; }
.diff .bar {
  height: 6px; background: var(--surface-dark); border-radius: 100px; overflow: hidden; position: relative;
}
.diff .bar > span { display: block; height: 100%; background: var(--gold); border-radius: 100px; }
.diff .who { font-size: 12px; color: var(--t-dim); margin-top: 12px; }

/* Pricing ------------------------------------------------------- */
.pricing-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 920px; margin: 0 auto;
}
.plan-card {
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 20px;
  padding: 36px;
  position: relative;
  display: flex; flex-direction: column;
}
.plan-card.pro {
  background: linear-gradient(180deg, #2a2620 0%, #221f19 100%);
  border-color: var(--gold);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6), 0 0 0 1px var(--gold-glow);
}
.plan-card.pro::before {
  content: 'Recommended'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #1a1814; padding: 4px 14px; border-radius: 100px;
  font-family: 'DM Sans'; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.plan-name { font-family: 'Newsreader', serif; font-weight: 600; font-size: 26px; letter-spacing: -0.01em; color: var(--t-bright); margin: 0 0 8px; }
.plan-tag { font-family: 'Newsreader', serif; font-style: italic; font-size: 16px; color: var(--t-muted); margin: 0 0 22px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 26px; }
.plan-price .amt { font-family: 'Newsreader', serif; font-weight: 700; font-size: 56px; letter-spacing: -0.03em; color: var(--t-bright); line-height: 1; }
.plan-price .per { font-family: 'DM Sans'; font-size: 14px; color: var(--t-dim); }
.plan-feat { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.plan-feat li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--t-body); line-height: 1.45; }
.plan-feat li .ic {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-glow); color: var(--gold);
  font-size: 10px; font-weight: 700; margin-top: 2px;
}
.plan-feat li.out .ic { background: var(--surface-dark); color: var(--t-faint); }
.plan-feat li.out { color: var(--t-faint); }
.plan-feat li b { color: var(--t-bright); font-weight: 600; }
.plan-card .btn { width: 100%; justify-content: center; }
.plan-mini {
  border-top: 1px solid var(--border-soft);
  padding-top: 16px;
  margin-top: 16px;
  font-size: 12px; color: var(--t-dim);
  display: flex; gap: 10px; align-items: center;
}

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border-soft);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-family: 'Newsreader', serif; font-weight: 600; font-size: 20px; letter-spacing: -0.01em;
  color: var(--t-bright);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold); }
.faq-item .plus {
  width: 22px; height: 22px;
  position: relative; flex: 0 0 22px;
  color: var(--gold);
}
.faq-item .plus::before, .faq-item .plus::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: currentColor;
  transition: transform 0.25s ease;
}
.faq-item .plus::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-item .plus::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.faq-item[open] .plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item .answer {
  padding: 0 4px 22px; font-family: 'Newsreader', serif; font-size: 17px; line-height: 1.55; color: var(--t-body);
  max-width: 640px;
}

/* Final CTA ------------------------------------------------------ */
.final {
  text-align: center;
  padding: 130px 0 130px;
  position: relative;
}
.final::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(201,169,110,0.08), transparent 70%);
  pointer-events: none;
}
.final h2 {
  font-family: 'Newsreader', serif; font-weight: 600;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.025em; line-height: 1.04;
  color: var(--t-bright); margin: 0 auto 22px;
  max-width: 800px; text-wrap: balance;
}
.final h2 em { font-style: italic; color: var(--gold); font-weight: 500; }
.final p {
  font-family: 'Newsreader', serif; font-size: 20px; color: var(--t-muted);
  max-width: 560px; margin: 0 auto 36px; line-height: 1.5;
}
.final .hero-cta { justify-content: center; }

/* Footer --------------------------------------------------------- */
footer {
  border-top: 1px solid var(--border-soft);
  padding: 36px 0 50px;
  font-size: 13px; color: var(--t-faint);
}
footer .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
footer .brand { display: flex; align-items: center; gap: 10px; color: var(--t-dim); }
footer .brand img { width: 22px; height: 22px; border-radius: 5px; }
footer .links { display: flex; gap: 24px; }
footer .links a { color: var(--t-faint); text-decoration: none; }
footer .links a:hover { color: var(--gold); }

/* Decorative pieces ribbon */
.ribbon {
  display: flex; gap: 22px; align-items: center; justify-content: center;
  padding: 28px 0;
  color: var(--t-faint);
  font-size: 28px;
  letter-spacing: 0.15em;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-2);
}
.ribbon span { font-family: serif; }

/* Responsiveness ------------------------------------------------- */
@media (max-width: 1080px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-card.span-2 { grid-column: span 2; }
  .try-grid { grid-template-columns: 1fr; gap: 28px; }
  .diffs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  section { padding: 80px 0; }
  .hero { padding: 50px 0 80px; }
  .hero-grid, .split, .split.reverse { grid-template-columns: 1fr; gap: 50px; }
  .split.reverse > :first-child { order: 0; }
  .sidebar-mock { margin: 0 auto; }
  .pricing-grid, .hint-stage { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .feat-card.span-2 { grid-column: span 1; }
  .piece-style-row { grid-template-columns: repeat(3, 1fr); }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .diffs { grid-template-columns: 1fr; }
  .browser-body { grid-template-columns: 1fr; }
  .browser-side { border-left: none; border-top: 1px solid var(--border); }
  .nav-links { display: none; }
  .nav-links .btn { display: inline-flex; }
  .nav-links { display: flex; }
  .nav-links a:not(.btn) { display: none; }
}


/* =========================================================
   TWEAKS — three expressive controls that reshape the feel.
   Activated by body classes: .mood-*, .voice-*, .texture-*.
   ========================================================= */

/* ---------- MOOD: palette + accent ---------- */
body.mood-midnight {
  --bg:           #0d1018;
  --bg-2:         #080b12;
  --card:         #131825;
  --card-2:       #161b29;
  --elev:         #1c2233;
  --surface-dark: #0f131c;
  --border:       #2a3144;
  --border-soft:  #1d2230;
  --gold:         #9eb4d6;
  --gold-soft:    #7a90b4;
  --gold-glow:    rgba(158, 180, 214, 0.20);
  --t-bright:     #ecf1f9;
  --t-primary:    #d8dfed;
  --t-body:       #bcc4d4;
  --t-muted:      #a3aabe;
  --t-dim:        #788196;
  --t-faint:      #565d6e;
  --t-ghost:      #393f4d;
}
body.mood-midnight .hero-glow {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(158,180,214,0.12), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 30%, rgba(158,180,214,0.05), transparent 60%);
}

body.mood-library {
  --bg:           #161b14;
  --bg-2:         #10140f;
  --card:         #1d2419;
  --card-2:       #20281c;
  --elev:         #262e21;
  --surface-dark: #181d15;
  --border:       #3a4530;
  --border-soft:  #2a3122;
  --gold:         #dcc279;
  --gold-soft:    #b69e5b;
  --gold-glow:    rgba(220, 194, 121, 0.20);
  --t-bright:     #f3ecd2;
  --t-primary:    #e8e0c4;
  --t-body:       #d2cab0;
  --t-muted:      #b6ae93;
  --t-dim:        #847d65;
  --t-faint:      #645e4a;
  --t-ghost:      #43402f;
}
body.mood-library .hero-glow {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(220,194,121,0.14), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 30%, rgba(220,194,121,0.05), transparent 60%);
}

/* ---------- VOICE: typography pairing ---------- */
/* Editorial = default (Newsreader + DM Sans), nothing to override. */

body.voice-modern,
body.voice-modern h1, body.voice-modern h2, body.voice-modern h3,
body.voice-modern h4, body.voice-modern h5, body.voice-modern h6,
body.voice-modern p, body.voice-modern li, body.voice-modern a,
body.voice-modern span, body.voice-modern button, body.voice-modern input,
body.voice-modern select, body.voice-modern td, body.voice-modern th,
body.voice-modern label, body.voice-modern div, body.voice-modern summary,
body.voice-modern .serif, body.voice-modern .italic {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
body.voice-modern h1, body.voice-modern h2, body.voice-modern h3,
body.voice-modern h4, body.voice-modern h5, body.voice-modern .serif {
  letter-spacing: -0.035em;
  font-weight: 600;
}
body.voice-modern em { font-style: normal; font-weight: 500; }
body.voice-modern .section-head p,
body.voice-modern .hero p.lead,
body.voice-modern .split-text p,
body.voice-modern .faq-item .answer {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
}

body.voice-manuscript,
body.voice-manuscript h1, body.voice-manuscript h2, body.voice-manuscript h3,
body.voice-manuscript h4, body.voice-manuscript h5, body.voice-manuscript h6,
body.voice-manuscript p, body.voice-manuscript li, body.voice-manuscript a,
body.voice-manuscript span, body.voice-manuscript button,
body.voice-manuscript td, body.voice-manuscript th, body.voice-manuscript label,
body.voice-manuscript div, body.voice-manuscript summary,
body.voice-manuscript .serif {
  font-family: 'EB Garamond', Georgia, serif;
}
body.voice-manuscript h1, body.voice-manuscript h2, body.voice-manuscript h3,
body.voice-manuscript h4, body.voice-manuscript h5, body.voice-manuscript .serif {
  font-weight: 600;
  letter-spacing: -0.012em;
}
body.voice-manuscript em, body.voice-manuscript .italic { font-style: italic; }
body.voice-manuscript .label,
body.voice-manuscript .hero-eyebrow,
body.voice-manuscript .nav-brand .badge,
body.voice-manuscript .nav-links a,
body.voice-manuscript .btn,
body.voice-manuscript .feat-card p,
body.voice-manuscript .section-head p,
body.voice-manuscript .hero p.lead,
body.voice-manuscript .faq-item .answer,
body.voice-manuscript .settings-label,
body.voice-manuscript .ps-label,
body.voice-manuscript .swatch-name,
body.voice-manuscript .try-board-meta,
body.voice-manuscript .try-board-caption,
body.voice-manuscript .try-panel-foot {
  font-family: 'Spectral', Georgia, serif;
}
body.voice-manuscript .label { letter-spacing: 0.18em; }

/* ---------- TEXTURE: grain + atmospheric glow ---------- */
body.texture-subtle  { --grain-strength: 0.35; --glow-strength: 0.45; }
body.texture-editorial { --grain-strength: 1;    --glow-strength: 1;    } /* default */
body.texture-lush    { --grain-strength: 1.85; --glow-strength: 1.9;  }

/* Lush adds an extra atmospheric layer on hero + sections */
body.texture-lush::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 35% at 18% 22%, var(--gold-glow), transparent 70%),
    radial-gradient(ellipse 45% 30% at 82% 78%, var(--gold-glow), transparent 70%);
  opacity: 0.7;
}
body.texture-subtle .ribbon { opacity: 0.7; }