/* ============================================================
   DESIGN SYSTEM — Prompt Helper
   Warm neutral editorial SaaS (mirrors generateprompt.net,
   refined) — Inter Variable + Libre Baskerville
   ============================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
  --bg: #F7F5F2;
  --bg-elevated: #F3F1ED;
  --bg-card: #FAF9F7;
  --bg-input: #FFFFFF;
  --bg-soft: #ECEAE5;
  --border: #DEDCD7;
  --border-strong: #C9C6BF;
  --border-accent: #34322C;
  --text: #34322C;
  --text-secondary: #3E3B34;
  --muted: #6B6962;
  /* 4.82:1 on the sidebar, 5.22:1 on a card. */
  --muted-light: #6B6962;
  --accent: #34322C;
  /* TEXT that sits on top of --accent. */
  --accent-fg: #FFFFFF;
  --accent-light: #4A463E;
  --accent-dark: #1F1E19;
  --accent-glow: rgba(52, 50, 44, 0.1);
  /* Orange, split by job. As a background it carries
     --on-accent-2 text; as text it is --accent-2-text. */
  --accent-2: #B23A0A;
  --accent-2-dark: #922C06;
  --accent-2-text: #B23A0A;
  --on-accent-2: #FFFFFF;
  --accent-2-glow: rgba(178, 58, 10, 0.12);
  --green: #15803d;
  --red: #b91c1c;
  --blue: #34322C;
  /* Shell surfaces. */
  --bg-sidebar: #F2F0EB;
  --surface: #FAF9F7;
  --surface-2: #F3F1ED;
  --wa: #f5f1ea;      /* warm amber-50-ish */
  --wa-fg: #92400e;
  --gf: #f0fdf4;      /* green-50 */
  --gf-fg: #15803d;
  --ff: #fef2f2;      /* red-50 */
  --ff-fg: #b91c1c;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --shadow-xs: 0 1px 2px rgba(52, 50, 44, 0.04);
  --shadow-sm: 0 1px 3px rgba(52, 50, 44, 0.06);
  --shadow-md: 0 4px 12px rgba(52, 50, 44, 0.08);
  --shadow-lg: 0 12px 32px rgba(52, 50, 44, 0.1);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --max-width: 1200px;
  --content-width: 780px;
  --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Referenced by pricing.html but never defined, so those
     declarations were silently dropped. */
  --radius: 8px;
  --shadow-glow: 0 0 0 3px rgba(178, 58, 10, 0.14);
}

/* ============================================================
   DARK MODE
   ------------------------------------------------------------
   This block used to live only in shell.css, which meant the
   pricing, legal and blog pages never had dark tokens: they
   rendered with the light palette and were unreadable in dark
   mode. site.css is now the single owner of the palette so
   every page that loads it gets a correct dark theme.

   Values are contrast-checked against the surfaces they are
   used on (see the token notes below).
   ============================================================ */
html[data-theme="dark"] {
  --bg: #131312;
  --bg-elevated: #191918;
  --bg-card: #1D1D1B;
  --bg-input: #242422;
  --bg-soft: #2A2A27;
  --bg-sidebar: #0D0D0C;
  --border: #2F2F2C;
  --border-strong: #454541;
  --border-accent: #EDEBE6;
  --text: #EDEBE6;
  --text-secondary: #D6D3CC;
  --muted: #9C9A93;
  /* 7.79:1 on the sidebar, 6.76:1 on a card. */
  --muted-light: #A6A49C;
  --accent: #EDEBE6;
  --accent-light: #FFFFFF;
  --accent-dark: #FFFFFF;
  --accent-glow: rgba(237, 235, 230, 0.12);
  /* TEXT that sits on --accent. Near-white needs near-black. */
  --accent-fg: #131312;
  /* The orange becomes a LIGHT orange in dark mode so it stays
     legible as text, and it takes dark text on top of it. */
  --accent-2: #FB923C;
  --accent-2-dark: #FDBA74;
  --accent-2-text: #FB923C;
  --on-accent-2: #131312;
  --accent-2-glow: rgba(251, 146, 60, 0.14);
  --green: #4ADE80;
  --red: #F87171;
  --blue: #EDEBE6;
  --wa: #2A2317;
  --wa-fg: #FBBF24;
  --gf: #12251A;
  --gf-fg: #4ADE80;
  --ff: #2A1618;
  --ff-fg: #F87171;
  --surface: #1D1D1B;
  --surface-2: #242422;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 3px rgba(251, 146, 60, 0.18);
  color-scheme: dark;
}

/* ============================================================
   THEME TOGGLE
   ------------------------------------------------------------
   A single floating control used on every page that has no
   topbar of its own. It is fixed to the bottom-right so it
   never collides with a nav bar, and it stays above content.
   ============================================================ */
.theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  z-index: var(--z-float);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-2-text);
  outline-offset: 2px;
}

/* Pages that DO have a topbar can use the inline variant so the
   control sits in the bar instead of floating over the content. */
.theme-toggle.inline {
  position: static;
  width: 36px;
  height: 36px;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  box-shadow: none;
  background: transparent;
}

@media (max-width: 700px) {
  .theme-toggle {
    right: 12px;
    bottom: 12px;
  }
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: var(--text); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-2-text); }
img { max-width: 100%; height: auto; }
::selection { background: var(--accent-2-glow); color: var(--text); }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; color: var(--text); }
h1 { font-family: 'Libre Baskerville', Georgia, serif; font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-family: 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
p { color: var(--muted); line-height: 1.65; }

/* ===== NAV (flat, sticky) ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6);
  /* The nav used a hardcoded translucent LIGHT background, so in dark
     mode the nav links were light-on-light (1.11:1). It now follows
     the theme token. */
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.nav .brand {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700; font-size: 1.0625rem; color: var(--text);
}
.nav nav { display: flex; align-items: center; gap: var(--space-1); }
.nav nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}
.nav nav a:hover { color: var(--text); background: var(--bg-soft); }
.nav nav a.cta {
  background: var(--accent);
  color: var(--accent-fg);
  margin-left: var(--space-2);
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.nav nav a.cta:hover { background: var(--accent-dark); }

/* ===== LAYOUT ===== */
.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 92px var(--space-5) var(--space-16);
}
.page-header { margin-bottom: var(--space-8); }
.page-title { margin-bottom: var(--space-3); }
.page-sub { font-size: 1.0625rem; color: var(--muted); max-width: 560px; line-height: 1.6; }

/* ===== HERO + TOOL ===== */
.hero {
  padding: var(--space-10) 0 var(--space-6);
  text-align: center;
}
.hero-eyebrow {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--accent-2-text); margin-bottom: var(--space-3);
}
.hero-title { margin: 0 auto var(--space-3); max-width: 640px; }
.hero-desc { font-size: 1.0625rem; margin: 0 auto var(--space-4); max-width: 480px; }
.hero-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-4); }
.mini-badge {
  font-size: 0.7rem; font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--bg-card);
}
.hero-badge-ext { display: inline-block; margin-bottom: var(--space-2); }
.hero-badge-ext .btn { font-size: 0.8rem; padding: var(--space-2) var(--space-4); color: var(--muted); }
.hero-badge-ext .btn:hover { color: var(--text); }

/* ===== TOOL CARD ===== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { border-color: var(--border-strong); }
.card h2 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
  font-family: 'Inter', sans-serif;
}
.card h2 .badge {
  font-size: 0.7rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* ===== SECTIONS ===== */
.section { padding: var(--space-20) 0; }
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-10);
}
.section-header h2 { margin-bottom: var(--space-3); }
.section-header p { color: var(--muted); font-size: 1.0625rem; }

/* ===== STEPS (numbered) ===== */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.step-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.step-number {
  font-family: 'Libre Baskerville', serif;
  font-size: 2rem; font-weight: 700; color: var(--accent-2-text); line-height: 1;
  margin-bottom: var(--space-3);
}
.step-card h3 { margin: 0 0 var(--space-2); }
.step-card p { font-size: 0.875rem; }

/* ===== BENTO ===== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.bento-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.bento-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.bento-card.wide { grid-column: span 2; }
.bento-card.accent { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.bento-card.accent h3, .bento-card.accent p { color: #fff; }
.bento-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--wa);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  margin-bottom: var(--space-3);
}
.bento-card.accent .bento-icon { background: rgba(255,255,255,0.2); }
.bento-card h3 { margin: 0 0 var(--space-2); }
.bento-card p { font-size: 0.875rem; }
.bento-number {
  font-family: 'Libre Baskerville', serif;
  font-size: 2.25rem; font-weight: 700; color: var(--accent-2-text); line-height: 1;
  margin-bottom: var(--space-2);
}
.bento-card.accent .bento-number { color: #fff; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card.wide { grid-column: span 1; }
}

/* ===== TESTIMONIALS (unused for now, styles kept) ===== */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-5); }
.testimonial { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.testimonial-quote { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-3); }
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.testimonial-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--wa); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8rem; color: var(--accent-2-text); }
.testimonial-name { font-weight: 600; font-size: 0.875rem; }
.testimonial-role { font-size: 0.8rem; color: var(--muted); }
@media (max-width: 900px) { .testimonials { grid-template-columns: 1fr; } }

/* ===== CONTACT FORM ===== */
.contact-section { max-width: 560px; margin: 0 auto; padding: 0 var(--space-5); }
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.06em; }
.form-input {
  width: 100%; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 1rem; font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-input::placeholder { color: var(--muted-light); }
textarea.form-input { min-height: 120px; resize: vertical; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
}
.btn:hover { background: var(--bg-elevated); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-warn { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent-2); font-weight: 700; }
.btn-warn:hover { background: var(--accent-2-dark); border-color: var(--accent-2-dark); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--border); box-shadow: none; }
.btn-blue { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: 1rem; }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: 0.8rem; }

/* ===== AUTH ROW ===== */
.auth-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--wa);
  color: var(--wa-fg);
  border: 1px solid var(--border);
}
.status-pill.pro { background: var(--gf); color: var(--gf-fg); }

/* ===== USAGE BAR ===== */
.usage-bar { height: 5px; background: var(--bg-soft); border-radius: 3px; overflow: hidden; margin-top: var(--space-3); }
.usage-bar > div { height: 100%; background: var(--accent-2); border-radius: 3px; transition: width 0.35s ease; }

/* Usage nudge — the upgrade moment. Shown near the limit, or to signed-in
   free users as a gentle Pro reminder.

   LAYOUT NOTE: this was a horizontal flex row holding a sentence and a
   button side by side. The sentence is long ("You've used all 5 free
   enhancements this week. Sign in free to get 10 a week, plus Memory and
   A/B variants - or go Pro for unlimited."), so the button was left with
   almost no room and got squeezed to the card edge or pushed out of
   view. The text now takes its own line and the button sits below it. */
.usage-nudge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.45;
}
.usage-nudge span { flex: 1 1 auto; min-width: 0; }
.usage-nudge.warn {
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.35);
  color: var(--text);
}
.usage-nudge.soft {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--muted);
}
.usage-nudge .btn {
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
}
@media (max-width: 420px) {
  .usage-nudge .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* ===== MODE TABS ===== */
.mode-tabs {
  display: flex; gap: var(--space-1); margin-bottom: var(--space-4);
  background: var(--bg-soft); border-radius: var(--radius-sm);
  padding: var(--space-1); border: 1px solid var(--border);
  width: fit-content;
}
.mode-tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.mode-tab:hover { color: var(--text); }
.mode-tab.active { background: var(--accent); color: var(--accent-fg); }

/* ===== CONTROLS ===== */
.control-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.control-row label { color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
select {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6962' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 0.8rem; color: var(--muted); cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: all var(--transition-fast);
  user-select: none;
}
.toggle:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.toggle input { accent-color: var(--accent-2); width: 14px; height: 14px; cursor: pointer; }

/* ===== TEXTAREA ===== */
textarea {
  width: 100%;
  min-height: 130px;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea::placeholder { color: var(--muted-light); }
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ===== OUTPUT ===== */
.output-box {
  width: 100%;
  min-height: 120px;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  transition: border-color var(--transition-fast);
}
.output-box.empty { color: var(--muted); font-style: italic; }
.output-box.has-content { border-color: var(--accent-2); }

/* ===== ROWS ===== */
.row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,0.08);
  border-top-color: var(--accent-2);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.muted { color: var(--muted); font-size: 0.875rem; }
.error { color: var(--red); font-size: 0.875rem; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--ff); border-radius: var(--radius-sm); border: 1px solid #fecaca; }
.success { color: var(--green); font-size: 0.875rem; margin-top: var(--space-2); }

/* ============================================================
   PRICING PAGE
   ------------------------------------------------------------
   Two tiers, Free and Pro. The layout rules are here rather than
   inline so that the desktop columns can be sized properly and
   the phone breakpoint can collapse them without squeezing.

   The old version used inline styles with a fixed max-width, which
   made the two columns sit at a fixed 360px each with a large empty
   gutter in the middle of a wide screen, and left the feature
   rows to wrap unpredictably.
   ============================================================ */
/* The pricing page needs more room than the standard 780px content
   column, otherwise the two plan cards are squeezed to ~358px each and
   the feature rows start wrapping. Give this page its own width. */
/* ===== PRICING: FAQ ===== */
.faq-section {
  margin-top: var(--space-12);
  margin-bottom: var(--space-8);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border);
}
.faq-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--space-8);
}
.faq-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: var(--space-4);
}
.faq-head h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.faq-intro { margin: 0; font-size: 1rem; }

.faq-list {
  display: grid;
  gap: var(--space-3);
  max-width: 820px;
  margin: 0 auto;
}
/* On a wide screen two columns of accordions read better than one tall
   column of eleven stacked cards. The grid keeps each card's own
   height, so rows align by the top edge rather than stretching. */
@media (min-width: 1000px) {
  .faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1000px;
    align-items: start;
  }
  /* The first answer is open by default. In a two-column grid that
     would leave a hole in the second column, so span it full width. */
  .faq-item:first-child {
    grid-column: 1 / -1;
  }
}
.faq-cat {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2-text);
  margin-bottom: 2px;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
              background var(--transition-base);
}
.faq-item[open] {
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  box-shadow: var(--shadow-sm);
}
.faq-item:hover { border-color: color-mix(in srgb, var(--text) 18%, var(--border)); }
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
  color: var(--text);
  transition: background var(--transition-fast);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--bg-soft); }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--accent, var(--text));
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}
.faq-q { font-size: 0.98rem; line-height: 1.45; letter-spacing: -0.01em; }
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  transition: transform var(--transition-base), background var(--transition-base);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon {
  background: var(--text);
  border-color: var(--text);
}
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after { background: var(--bg); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-a {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.75;
}
/* A short accent rule marks the answer body as belonging to the
   question above it. */
.faq-a::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-2);
  opacity: 0.55;
  margin-bottom: var(--space-3);
}
.faq-a p { margin: 0 0 var(--space-3); }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: var(--text); }
.faq-a a { color: var(--accent, var(--text)); text-decoration: underline; }

@media (max-width: 560px) {
  .faq-item > summary { padding: var(--space-4); gap: var(--space-3); }
  .faq-a { padding: 0 var(--space-4) var(--space-4); font-size: 0.92rem; }
  .faq-q { font-size: 0.95rem; }
}

.pricing-container {
  max-width: 1000px;
}
.pricing-container .plans-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
  max-width: 920px;
  margin: 0 auto var(--space-12);
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: visible;
  /* The top padding leaves room for the badge, which is centred on
     the card's top edge. Without it the badge overlapped the plan
     name. */
  padding: var(--space-10) var(--space-6) var(--space-6);
  /* Equal visual weight for both cards so the Pro card does not look
     like it is floating above the Free one. */
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.plan-card-pro {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-lg);
  /* A hairline of accent glow lifts the recommended card without
     shifting the layout of the two columns. */
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--accent-2) 35%, transparent), transparent 55%) border-box;
  border: 1px solid transparent;
}

.plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  /* Centre the badge on the top edge of the card. It must sit on top
     of the border line, not clipped by it. */
  transform: translate(-50%, -50%);
  z-index: 2;
  background: var(--bg-soft);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-badge-recommended {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.plan-name {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}
.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: var(--space-2) 0 var(--space-2);
}
.plan-amount {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.plan-period {
  font-size: 0.95rem;
}
.plan-tagline {
  text-align: center;
  margin: 0 0 var(--space-6);
  font-size: 0.9rem;
  line-height: 1.5;
  /* Reserve two lines so a longer tagline on one card cannot make that
     card taller than the other. The text is centred in the reserved
     space so the extra line looks intentional rather than empty. */
  min-height: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  font-size: 0.9rem;
  line-height: 1.4;
}
/* Every row is the same three-part shape: tick, label, value. Because
   both cards use this exact structure the rows line up across the two
   columns and the cards stay the same height. */
.plan-row {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2);
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.plan-row:last-child {
  border-bottom: none;
}
.plan-features .feat-yes,
.plan-features .feat-no {
  font-weight: 700;
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
  font-size: 0.85rem;
}
.plan-features .feat-yes {
  color: var(--green);
}
.plan-features .feat-no {
  color: var(--muted);
}
.feat-label {
  color: var(--text);
}
.feat-value {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.plan-row.is-off .feat-label {
  color: var(--muted);
}

.plan-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
}
.btn-block {
  width: 100%;
  justify-content: center;
}

.plan-note {
  max-width: 920px;
  margin: calc(var(--space-4) * -1) auto var(--space-8);
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
}

.plan-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  max-width: 920px;
  margin: calc(var(--space-6) * -1) auto var(--space-10);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
  font-size: 0.85rem;
}
.plan-meta #user-label {
  flex: 1 1 180px;
  min-width: 0;
  line-height: 1.4;
}

/* Below this width two columns get too narrow to read, so they
   stack. The card keeps its padding but the feature rows stay
   comfortable. */
@media (max-width: 760px) {
  .pricing-container .plans-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    max-width: 520px;
  }
  .plan-card {
    padding: var(--space-8) var(--space-5) var(--space-5);
  }
  .plan-amount {
    font-size: 2.4rem;
  }
}
@media (max-width: 400px) {
  .plan-card {
    padding: var(--space-7, 28px) var(--space-4) var(--space-4);
  }
  .plan-features {
    font-size: 0.9rem;
  }
}
@media (max-width: 760px) {
  /* The account status bar stops being a pill on narrow screens and
     becomes a plain full-width strip. */
  .plan-meta {
    margin: 0 auto var(--space-10);
    border-radius: var(--radius-lg);
    justify-content: flex-start;
    gap: var(--space-2);
  }
  .plan-meta #user-label {
    flex: 1 1 100%;
  }
  .plan-row {
    /* Labels wrap; the value stays on its own line under the label
       rather than squeezing the label into a narrow column. */
    grid-template-columns: 1.1rem minmax(0, 1fr);
    row-gap: 2px;
    padding: 10px 0;
  }
  .plan-row .feat-value {
    grid-column: 2;
    text-align: left;
  }
}

/* ============================================================
   QUOTA PANEL
   ------------------------------------------------------------
   Shown when the weekly limit is reached. It carries the two
   next actions (Sign in / Go Pro) as real buttons so they sit
   together in a row that wraps cleanly on a phone, instead of
   being inline links that drifted away from the sentence.
   ============================================================ */
.quota-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
.quota-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  line-height: 1.4;
}
.quota-panel-icon {
  color: var(--accent-2-text);
  font-size: 0.7em;
  line-height: 1;
  flex-shrink: 0;
}
.quota-panel-body {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}
.quota-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
/* Inside the panel the buttons must sit on the error tint, so they
   keep their own border rather than inheriting the panel's. */
.quota-panel-actions .btn {
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text);
  font-weight: 600;
}
.quota-panel-actions .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.quota-panel-actions .btn-warn {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--on-accent-2);
}
@media (max-width: 520px) {
  .quota-panel-actions { width: 100%; }
  .quota-panel-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== SCORE BADGE ===== */
.score-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--wa);
  color: var(--wa-fg);
}
.score-poor { background: var(--ff); color: var(--ff-fg); border-color: #fecaca; }
.score-fair { background: var(--wa); color: var(--wa-fg); border-color: #fde68a; }
.score-good { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.score-excellent { background: var(--gf); color: var(--gf-fg); border-color: #bbf7d0; }

/* ===== HISTORY ===== */
.history-item {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: var(--space-2);
  font-size: 0.875rem;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.history-item:hover { border-color: var(--accent-2); background: var(--wa); }
.history-item .h-mode { color: var(--accent-2-text); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.history-item .h-text { color: var(--text-secondary); margin-top: var(--space-1); white-space: pre-wrap; word-break: break-word; max-height: 80px; overflow: hidden; line-height: 1.5; }

/* ===== TEMPLATES ===== */

/* ===== MEMORY ===== */
.memory-box {
  width: 100%; min-height: 90px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.memory-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.memory-box::placeholder { color: var(--muted-light); }

/* ===== VARIANTS ===== */
.variants { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
@media (max-width: 700px) { .variants { grid-template-columns: 1fr; } }
.variant { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); }
.variant h4 { margin: 0 0 var(--space-2); font-size: 0.75rem; color: var(--accent-2-text); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

/* ===== MISC ===== */
.hidden { display: none !important; }
.search-input {
  width: 100%; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input); color: var(--text);
  font-size: 0.875rem; font-family: inherit;
  margin-bottom: var(--space-3);
  transition: border-color var(--transition-fast);
}
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.search-input::placeholder { color: var(--muted-light); }

footer {
  padding: var(--space-10) 0 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}
footer a { text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
footer a:hover { color: var(--accent-2-text); }
main a { text-decoration: underline; text-underline-offset: 3px; color: var(--accent-2-text); }
main a.btn, main .nav a { text-decoration: none; }

/* ===== ACCESSIBILITY ===== */
:focus-visible { outline: 2px solid var(--accent-2-text); outline-offset: 2px; border-radius: 2px; }
/* ------------------------------------------------------------
   Z-INDEX SCALE
   ------------------------------------------------------------
   10    page content
   100   sticky in-page bars
   900   floating page controls (gen-actions)
   950   theme toggle (floats above nav content)
   1000  site nav / topbar
   1100  modal scrim
   1110  modal / drawer panel
   1200  toasts
   2000  skip link (must beat everything)
   ------------------------------------------------------------ */
:root {
  --z-content: 10;
  --z-sticky: 100;
  --z-float: 900;
  --z-nav: 1000;
  --z-scrim: 1100;
  --z-overlay: 1110;
  /* The app-shell sidebar is an off-canvas nav, not a modal. It sits
     just below the overlay band so it can never fight the library
     drawer for the same slot. */
  --z-scrim-side: 1080;
  --z-drawer-side: 1090;
  --z-toast: 1200;
  --z-skip: 2000;
}

.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--accent-2); color: var(--on-accent-2);
  padding: var(--space-2) var(--space-4);
  z-index: var(--z-skip); border-radius: 0 0 var(--radius-sm) 0;
  transition: top var(--transition-fast);
  font-weight: 600; font-size: 0.85rem;
}
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 700px) {
  .container { padding: 68px var(--space-4) var(--space-10); }
  .page-title { font-size: 1.6rem; }
  .page-sub { font-size: 0.9rem; }
  .card { padding: var(--space-4); margin-bottom: var(--space-4); }
  .card h2 { font-size: 0.7rem; margin-bottom: var(--space-3); }
  .mode-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mode-tabs::-webkit-scrollbar { display: none; }
  .mode-tab { padding: var(--space-2) var(--space-3); font-size: 0.8rem; min-height: 40px; }
  textarea, select, input, .search-input { font-size: 16px; }
  textarea { min-height: 100px; padding: var(--space-3); }
  .nav { padding: 0 var(--space-4); height: 56px; }
  .nav .brand { font-size: 0.95rem; }
  .nav nav a { padding: var(--space-2) var(--space-2); font-size: 0.8rem; }
  .nav nav a.cta { padding: var(--space-2) var(--space-3); }
  .auth-row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .auth-row .btn { justify-content: center; min-height: 44px; }
  .control-row { gap: var(--space-2); }
  .control-row label { font-size: 0.7rem; }
  select { min-height: 40px; }
  .toggle { min-height: 40px; padding: var(--space-2) var(--space-3); }
  .btn { min-height: 44px; padding: var(--space-2) var(--space-3); }
  .btn-primary { min-height: 48px; }
  .variants { grid-template-columns: 1fr; }
  .output-box { font-size: 0.9rem; min-height: 100px; }
  .row { gap: var(--space-2); }
  .history-item { padding: var(--space-2) var(--space-3); }
  .steps-row { grid-template-columns: 1fr; padding: 0 var(--space-4); }
  .gen-actions {
    position: sticky; bottom: 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    z-index: var(--z-float);
    border-radius: 0;
  }
  .gen-actions .btn-primary { flex: 1; justify-content: center; min-height: 48px; font-size: 1rem; }
}
@media (max-width: 480px) {
  .nav nav a:not(.cta) { display: none; }
  .nav nav a.cta { font-size: 0.8rem; padding: var(--space-2) var(--space-3); }
  .hero-cta { flex-direction: column; }
}
button, a, select, .toggle, .history-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@supports (padding: env(safe-area-inset-top)) {
  .nav { padding-top: env(safe-area-inset-top); height: calc(60px + env(safe-area-inset-top)); }
  .container { padding-top: calc(92px + env(safe-area-inset-top)); }
}

/* ============================================================
   HELP DOTS
   ------------------------------------------------------------
   A/B variants and Memory are two-letter features that a first-time
   user has no context for. Each now carries an inline "?" that
   explains the feature in one sentence, on hover and on focus.
   ============================================================ */
.toggle.has-help {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

.help-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  padding: 0;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.help-dot:hover,
.help-dot:focus-visible {
  color: var(--accent-2-text);
  border-color: var(--accent-2);
  outline: none;
}

/* The tooltip itself. Pure CSS so it works with no JS and no layout
   shift. Positioned below the dot, wrapping to a readable width. */
.help-dot::after {
  content: attr(data-help);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: var(--z-overlay, 1110);
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.help-dot:hover::after,
.help-dot:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* On narrow screens the tooltip would overflow the right edge, so pin
   it to the left edge of the dot instead of centring it. */
@media (max-width: 560px) {
  .help-dot::after {
    left: auto;
    right: -6px;
    transform: none;
    max-width: 220px;
  }
}

/* ============================================================
   GENERATE BUTTON — QUOTA EXHAUSTED
   ============================================================ */
.gen-submit.is-exhausted,
.gen-submit:disabled.is-exhausted {
  background: var(--bg-soft);
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 1;
}

/* ============================================================
   PRO BADGE — marks a feature as Pro-only
   Used on the A/B variants toggle so the upsell is visible
   without hiding the control entirely.
   ============================================================ */
.pro-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.5;
  color: var(--accent-2-text);
  background: var(--accent-2-glow);
  border: 1px solid var(--accent-2);
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.pro-badge[hidden] { display: none; }

/* ============================================================
   LIBRARY TIER NOTE
   Tells the visitor how much of the catalog their plan can
   reach, and links to the upgrade page when it is capped.
   ============================================================ */
.page-head .lib-tier-note {
  margin: 14px auto 0;
  max-width: 640px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.lib-tier-note strong { color: var(--text); font-weight: 700; }
.lib-tier-note a {
  color: var(--accent-2-text);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lib-tier-note a:hover { text-decoration-thickness: 2px; }
.lib-tier-note[hidden] { display: none; }

/* ============================================================
   PRO — EXTENSION CROSS-SELL NOTE
   Under the Pro plan's feature list. Makes it explicit that one
   Pro subscription also unlocks the Chrome extension.
   ============================================================ */