/* @version 6.549.0 */
/* ============================================================
   ChannelzIQ Design System & Landing Page Styles
   Studio Clarity — warm light/paper default, teal brand (v6.271.0)
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* --- CSS Variables (Studio Clarity — light/paper default) --- */
:root {
  /* Brand */
  --primary: #0F766E;          /* teal — primary buttons, links, brand */
  --primary-dark: #0C5D56;     /* hover/active */
  --primary-light: #14B8A6;    /* bright teal — gradients, highlights */
  --secondary: #14B8A6;
  --accent: #F2A65A;           /* warm amber — ACCENT ONLY, used sparingly */
  --accent-strong: #E8472A;    /* deep coral — only when a warm CTA needs WHITE text */

  /* Surfaces (light/paper-first) */
  --bg: #FBFAF7;               /* warm off-white paper */
  --surface: #FFFFFF;          /* cards/panels */
  --surface-light: #F0FAF8;    /* soft-teal tint / icon wells */
  --line: #E7E3DA;             /* borders */

  /* Text */
  --text: #18212B;             /* ink — headings + body */
  --text-muted: #5B6670;       /* secondary text */

  /* Status */
  --success: #2F9E6F;
  --warning: #F2A65A;
  --error: #EF4444;

  --radius: 12px;
  --transition: all 0.2s ease;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* Dark mode removed — Studio Clarity is light/paper only (see BRAND_GUIDELINES.md). */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

img, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--primary-dark);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: var(--font);
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font);
  font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* --- Selection --- */
::selection {
  background: var(--primary);
  color: #fff;
}

::-moz-selection {
  background: var(--primary);
  color: #fff;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--surface-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* --- Focus Visible --- */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --- Container --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* --- Buttons --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(15, 118, 110, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: transparent;
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  transition: var(--transition);
}

.btn-secondary:hover {
  background: rgba(15, 118, 110, 0.1);
  border-color: var(--primary-light);
  transform: translateY(-2px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  border: none;
  border-radius: var(--radius);
  transition: var(--transition);
}

.btn-ghost:hover {
  color: var(--text);
  background: var(--surface-light);
}

.btn-small {
  padding: 8px 16px;
  font-size: 0.875rem;
}

/* --- Cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(15, 118, 110, 0.2);
  box-shadow: 0 12px 40px rgba(15, 118, 110, 0.10);
}

/* --- Inputs --- */
.input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text);
  font-size: 1rem;
  width: 100%;
  transition: var(--transition);
}

.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
}

.input::placeholder {
  color: var(--text-muted);
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-primary {
  background: rgba(15, 118, 110, 0.15);
  color: var(--primary);
}

.badge-success {
  background: rgba(47, 158, 111, 0.15);
  color: var(--success);
}

.badge-warning {
  background: rgba(242, 166, 90, 0.18);
  color: #3A2410;
}

.badge-error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--error);
}

.badge-info {
  background: rgba(20, 184, 166, 0.15);
  color: var(--primary);
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: var(--transition);
}

.nav.scrolled {
  background: rgba(251, 250, 247, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-logo span {
  color: var(--primary);
}

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

.nav-links a {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition);
}

.nav-links a:hover {
  color: var(--text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile-toggle.active span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero Section --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-muted);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* --- Orbit SVG Illustration --- */
.hero-illustration {
  width: 320px;
  height: 320px;
  margin: 0 auto 48px;
  position: relative;
}

.hero-illustration svg {
  width: 100%;
  height: 100%;
}

.orbit-node {
  animation: orbit 12s linear infinite;
  transform-origin: 160px 160px;
}

.orbit-node:nth-child(2) { animation-delay: -3s; }
.orbit-node:nth-child(3) { animation-delay: -6s; }
.orbit-node:nth-child(4) { animation-delay: -9s; }

.central-glow {
  animation: pulse 3s ease-in-out infinite;
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(110px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}

/* --- Email Form --- */
.email-form {
  max-width: 520px;
  margin: 0 auto 24px;
}

.form-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper svg {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.input-wrapper .input {
  padding-left: 44px;
}

.input-wrapper .input.valid {
  border-color: var(--success);
}

.input-wrapper .input.invalid {
  border-color: var(--error);
}

.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form-error {
  color: var(--error);
  font-size: 0.85rem;
  margin-top: 8px;
  display: none;
  text-align: left;
}

.form-error.visible {
  display: block;
}

.btn-loading {
  display: none;
}

.btn-loading svg {
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Success State --- */
.success-state {
  display: none;
  text-align: center;
  animation: fadeIn 0.5s ease;
}

.success-state.visible {
  display: block;
}

.success-state h2 {
  font-size: 1.75rem;
  margin-bottom: 8px;
}

.success-state p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

.referral-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 20px;
}

.referral-section h3 {
  font-size: 1rem;
  margin-bottom: 12px;
}

.referral-link-row {
  display: flex;
  gap: 8px;
}

.referral-link-row .input {
  flex: 1;
  font-size: 0.875rem;
  padding: 10px 14px;
}

.copy-feedback {
  font-size: 0.8rem;
  color: var(--success);
  margin-top: 8px;
  display: none;
}

.copy-feedback.visible {
  display: block;
}

.share-buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/* --- Trust Row --- */
.trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 16px;
  flex-wrap: wrap;
}

.trust-row .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
}

.waitlist-counter {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 20px;
}

.waitlist-counter strong {
  color: var(--primary);
  font-weight: 600;
}

.scarcity-line {
  text-align: center;
  color: var(--warning);
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 12px;
}

/* --- Sections --- */
.section {
  padding: 100px 0;
}

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

.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* --- Feature Cards --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0), rgba(15, 118, 110, 0.3), rgba(20, 184, 166, 0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(15, 118, 110, 0.10);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.15), rgba(20, 184, 166, 0.1));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon svg {
  width: 32px;
  height: 32px;
  color: var(--primary);
}

.feature-card h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.feature-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- Social Proof --- */
.social-proof {
  text-align: center;
  padding: 60px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.social-proof p {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 32px;
}

.platform-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.platform-icon {
  opacity: 0.4;
  transition: var(--transition);
  cursor: pointer;
}

.platform-icon:hover {
  opacity: 1;
}

.platform-icon svg {
  width: 40px;
  height: 40px;
}

.platform-icon:hover svg.yt { color: #FF0000; }
.platform-icon:hover svg.ig { color: #E4405F; }
.platform-icon:hover svg.tt { color: #00F2EA; }
.platform-icon:hover svg.wp { color: #21759B; }
.platform-icon:hover svg.li { color: #0A66C2; }

/* --- How It Works --- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}

.steps-grid::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0.3;
}

.step {
  text-align: center;
  position: relative;
}

.step-number {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  z-index: 1;
}

.step h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.step p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* --- Roadmap Teaser --- */
.roadmap-teaser {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 48px;
  border: 1px solid var(--line);
}

.roadmap-items {
  display: grid;
  gap: 20px;
  margin-bottom: 24px;
}

.roadmap-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--surface-light);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.roadmap-item-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.roadmap-item h4 {
  font-size: 1rem;
  font-weight: 600;
}

.upvote-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(15, 118, 110, 0.1);
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 8px;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.upvote-btn:hover {
  background: rgba(15, 118, 110, 0.2);
}

/* --- Secondary CTA --- */
.cta-section {
  text-align: center;
  padding: 100px 0;
}

.cta-section h2 {
  font-size: 2.25rem;
  margin-bottom: 16px;
}

.cta-section p {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-bottom: 40px;
}

/* --- Footer --- */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand {
  max-width: 280px;
}

.footer-brand .nav-logo {
  margin-bottom: 12px;
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-col h4 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 16px;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: var(--transition);
}

.footer-col ul li a:hover {
  color: var(--text);
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom p {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* --- Particle Canvas --- */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* --- Confetti Canvas --- */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* --- Animations --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.05); }
}

@keyframes confetti {
  0%   { transform: translateY(0) rotateZ(0); opacity: 1; }
  100% { transform: translateY(100vh) rotateZ(720deg); opacity: 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.features-grid .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.features-grid .animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(15,118,110,0.2); }
  50% { box-shadow: 0 0 35px rgba(15,118,110,0.5), 0 0 60px rgba(15,118,110,0.15); }
}
.hero-cta-pulse { animation: pulse-glow 3s ease-in-out infinite; }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}
/* v6.544.0 — was a hard 200px cap. On a 375px phone the longer answers wrap to
   230px+ and `overflow:hidden` silently CUT the last lines off with no scrollbar
   and no way to reach them (4 of the 7 pricing answers, including the
   free-trial one). 900px is above any realistic answer height; max-height still
   has to be a fixed length for the transition to animate at all. */
.faq-item.open .faq-answer {
  max-height: 900px;
  padding-top: 10px;
}

.shake {
  animation: shake 0.5s ease;
}

/* --- Cookie Consent Banner --- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  display: none;
}

.cookie-banner.visible {
  display: block;
  animation: slideUp 0.4s ease;
}

.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-banner p {
  color: var(--text-muted);
  font-size: 0.9rem;
  flex: 1;
  min-width: 200px;
}

.cookie-banner p a {
  color: var(--primary);
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  gap: 12px;
}

/* --- Legal Page Styles --- */
.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 140px 24px 80px;
}

.legal-content h1 {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.legal-content .last-updated {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 48px;
}

.legal-content h2 {
  font-size: 1.5rem;
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--text);
}

.legal-content h3 {
  font-size: 1.2rem;
  margin-top: 32px;
  margin-bottom: 12px;
}

.legal-content p {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

.legal-content ul, .legal-content ol {
  color: var(--text-muted);
  margin-bottom: 16px;
  padding-left: 24px;
}

.legal-content ul {
  list-style: disc;
}

.legal-content ol {
  list-style: decimal;
}

.legal-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.legal-content a {
  color: var(--primary);
  text-decoration: underline;
}

.legal-content strong {
  color: var(--text);
}

/* --- Roadmap Page --- */
.roadmap-page {
  padding: 140px 24px 80px;
  max-width: 900px;
  margin: 0 auto;
}

.roadmap-page h1 {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.roadmap-page > p {
  color: var(--text-muted);
  margin-bottom: 32px;
}

.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: var(--transition);
}

.filter-tab:hover {
  color: var(--text);
  border-color: var(--line);
}

.filter-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.roadmap-list {
  display: grid;
  gap: 16px;
}

.roadmap-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  transition: var(--transition);
}

.roadmap-card:hover {
  border-color: rgba(15, 118, 110, 0.2);
}

.roadmap-card-info h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.roadmap-card-info p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.suggest-feature {
  margin-top: 32px;
  text-align: center;
}

/* --- Changelog Page --- */
.changelog-page {
  padding: 140px 24px 80px;
  max-width: 800px;
  margin: 0 auto;
}

.changelog-page h1 {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.changelog-page > p {
  color: var(--text-muted);
  margin-bottom: 48px;
}

.changelog-timeline {
  position: relative;
  padding-left: 32px;
}

.changelog-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.changelog-entry {
  position: relative;
  padding-bottom: 40px;
}

.changelog-entry::before {
  content: '';
  position: absolute;
  left: -37px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--bg);
}

.changelog-date {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.changelog-entry h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.changelog-entry p {
  color: var(--text-muted);
  line-height: 1.7;
}

/* --- Error Pages --- */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.error-code {
  font-size: 8rem;
  font-weight: 800;
  font-family: var(--font-head);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 16px;
}

.error-page p {
  color: var(--text-muted);
  font-size: 1.2rem;
  margin-bottom: 32px;
}

/* --- Upvote Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 33, 43, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay.visible {
  display: flex;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 420px;
  width: 90%;
  animation: slideUp 0.3s ease;
}

.modal h3 {
  margin-bottom: 8px;
}

.modal p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.25rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.25rem;
  }

  .hero-subtitle {
    font-size: 1.05rem;
  }

  .hero-illustration {
    width: 240px;
    height: 240px;
  }

  .form-group {
    flex-direction: column;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .steps-grid::before {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(251, 250, 247, 0.97);
    backdrop-filter: blur(20px);
    padding: 24px;
    gap: 16px;
    border-bottom: 1px solid var(--line);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-mobile-toggle {
    display: flex;
  }

  /* v6.544.0 — at 375px the wordmark ran flush against the "Join the waitlist"
     pill (logo right edge 161px, pill left edge 161px: a 0px gap that reads as a
     collision) and the hamburger sat 2px past the viewport. Shrink the wordmark
     and give the action group a gutter so the three elements are separated. */
  .nav-logo {
    font-size: 1.25rem;
  }

  .nav-actions {
    margin-left: 12px;
    gap: 8px;
  }

  /* Epic E4 (v6.549.0) / IMP-049 — the 0px collision was fixed in v6.544.0, but
     two of the three tap targets in this row were still below the 44px minimum:
     "Log In" measured 59 x 38.4 and the hamburger 32 x 24 at a 390px viewport.

     The hit area has to grow WITHOUT growing the layout box. At 390px the row
     has exactly 12px of slack (logo 114.6 + actions 215.4 = 330 inside a 342px
     container), which is the gap between the wordmark and the waitlist pill —
     so widening the hamburger to 44px would have spent all of it and put the
     logo back flush against the pill, i.e. re-created the very bug this item is
     about. Instead the hamburger keeps its 32px box and gets a transparent
     44 x 44 pseudo-element centred on it: a real 44px target, zero layout cost,
     and 6px of overhang each side against an 8px gap, so it never overlaps
     "Log In". "Log In" only failed on height, and the row is already 52px tall
     (the waitlist pill wraps to two lines), so a min-height costs nothing.
     Nothing here applies above 768px. */
  .nav-actions .btn-small,
  .nav-actions .btn-ghost,
  .nav-actions .btn-primary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-mobile-toggle {
    position: relative;
  }

  .nav-mobile-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .section {
    padding: 60px 0;
  }

  .section-header h2 {
    font-size: 1.75rem;
  }

  .roadmap-teaser {
    padding: 24px;
  }

  .cookie-banner-inner {
    flex-direction: column;
    text-align: center;
  }

  .trust-row {
    flex-direction: column;
    gap: 8px;
  }

  .trust-row .dot {
    display: none;
  }

  .platform-icons {
    gap: 32px;
  }

  .roadmap-card {
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.75rem;
  }

  .hero-illustration {
    width: 200px;
    height: 200px;
  }

  .section-header h2 {
    font-size: 1.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .error-code {
    font-size: 5rem;
  }

  .legal-content h1,
  .roadmap-page h1,
  .changelog-page h1 {
    font-size: 1.75rem;
  }

  .comparison-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .comparison-grid .comparison-arrow {
    transform: rotate(90deg);
  }
}

/* ============================================================
   Studio Clarity — component additions (v6.271.0)
   ============================================================ */

/* Primary button explicit states */
.btn-primary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.btn-primary:disabled,
.btn-primary[disabled] { background: #DFE3E7; color: #9AA2AB; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.btn-secondary:disabled,
.btn-secondary[disabled] { border-color: #DFE3E7; color: #9AA2AB; cursor: not-allowed; transform: none; }

/* Warm amber CTA — HARD RULE: never white text on amber (fails contrast).
   Use dark ink text on amber; if white text is required, use --accent-strong. */
.btn-amber {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; background: var(--accent); color: #3A2410;
  font-weight: 700; font-size: 1rem; border: none; border-radius: var(--radius);
  transition: var(--transition); white-space: nowrap;
}
.btn-amber:hover { background: #ED9740; transform: translateY(-2px); color: #3A2410; }
.btn-amber:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.btn-amber:disabled,
.btn-amber[disabled] { background: #F0E0CF; color: #B6A893; cursor: not-allowed; transform: none; }
/* When a warm CTA genuinely needs white text */
.btn-amber-strong { background: var(--accent-strong); color: #fff; }
.btn-amber-strong:hover { background: #D43E22; color: #fff; }

/* Soft-teal icon well (Style A) for topic icons */
.icon-well {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--surface-light); color: var(--primary);
  border: 1px solid #D7EFE9;
}
.icon-well svg { width: 26px; height: 26px; color: var(--primary); }
/* Solid teal well (Style B) — featured/active cards, sparing */
.icon-well.solid { background: var(--primary); color: #fff; border-color: var(--primary); }
.icon-well.solid svg { color: #fff; }

/* Platform logo tiles + coming-soon (visible-but-disabled) */
.platform-tile {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px;
}
.platform-tile svg, .platform-tile img { width: 32px; height: 32px; }
.platform-soon { position: relative; opacity: 0.4; }
.platform-soon::after {
  content: "Soon"; position: absolute; top: -8px; right: -8px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: var(--accent); color: #3A2410;
  padding: 2px 7px; border-radius: 999px; line-height: 1.4;
}