:root {
  --color-bg: #fbfbf7;
  --color-surface: #ffffff;
  --color-surface-soft: #f4f3ee;
  --color-surface-dark: #09090b;
  --color-text: #090909;
  --color-muted: #6f6f68;
  --color-border: #e8e6dc;
  --color-accent: #4fd1c5;
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 36%, white);
  --color-accent-text: #09090b;

  /* Scene palette — used inside feature animations */
  --panel: #fff;
  --panel2: #fafafa;
  --dim: #52525b;
  --mute: #a1a1aa;
  --line: rgba(0,0,0,.06);
  --row: #f1f1f3;
  --teal: #14b8a6;
  --tealDeep: #0f766e;
  --tealBright: #03ffdf;
  --tealTint: rgba(20,184,166,.06);
  --green: #16a34a;
  --greenDeep: #15803d;
  --greenTint: #dcfce7;
  --amber: #d97706;
  --amberDeep: #b45309;
  --amberTint: #fef3c7;
  --red: #dc2626;
  --violet: #6d28d9;
  --violetTint: #ede9fe;

  --shadow-soft: 0 24px 80px rgba(8, 8, 8, 0.08);
  --shadow-tight: 0 12px 34px rgba(8, 8, 8, 0.07);
  --radius-xl: 34px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --header-height: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-feature-settings: 'cv11', 'ss03'; font-size: 15px; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; }
.container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.container.narrow { width: min(820px, calc(100% - 48px)); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.eyebrow { margin: 0 0 16px; color: var(--color-muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 10px; border: none; background: var(--color-accent); color: var(--color-accent-text); font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 22%, transparent); transition: transform 180ms ease, box-shadow 280ms ease, background 180ms ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 32px color-mix(in srgb, var(--color-accent) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.button-small { min-height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
.button-ghost { background: rgba(255,255,255,.58); border: 1px solid var(--color-border); box-shadow: none; }
.button-ghost:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-text); transition: color 180ms ease, gap 180ms ease; }
.text-link:hover { color: var(--color-accent); gap: 8px; }
.text-link:after { content: "\2192"; font-size: 16px; }

.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-height); background: color-mix(in srgb, var(--color-bg) 78%, transparent); border-bottom: 1px solid transparent; backdrop-filter: blur(18px); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.site-header.is-scrolled { border-color: var(--color-border); background: color-mix(in srgb, var(--color-bg) 92%, white); box-shadow: 0 10px 34px rgba(0,0,0,.035); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-logo img, .footer-logo img { width: 100px; height: auto; object-fit: contain; }
.site-logo svg, .footer-logo svg { width: 100px; height: auto; display: block; }
.site-logo { --clicc-logo-text: var(--color-text); }
.footer-logo { --clicc-logo-text: var(--color-text); }
.primary-navigation { flex: 1; }
.primary-menu { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.primary-menu > li { position: relative; }
.primary-menu > li > a { display: inline-flex; align-items: center; min-height: var(--header-height); color: #1a1a16; }
.has-mega-menu > a:after { content: "⌄"; margin-left: 6px; font-size: 13px; opacity: .65; }
.header-actions { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.header-link { color: #171713; }
.mobile-menu-toggle { display: none; }
.drawer-actions { display: none; }

.mega-menu { position: fixed; top: var(--header-height); left: 50%; width: min(1240px, calc(100vw - 48px)); transform: translateX(-50%) translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; background: rgba(255,255,255,.97); border: 1px solid var(--color-border); border-radius: 0 0 22px 22px; box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); }
.has-mega-menu:hover .mega-menu, .has-mega-menu:focus-within .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* Grouped, labelled columns (Optmyzr-style). Each group's links flow into a
   2-up grid so the dropdown spreads across the panel in up to 4 columns. */
.mega-menu-inner { display: flex; justify-content: center; align-items: stretch; gap: 8px; padding: 32px 40px; }
.mega-group { flex: 0 1 auto; min-width: 0; padding: 0 30px; }
.mega-group:first-child { padding-left: 0; }
.mega-group:last-child { padding-right: 0; }
.mega-group + .mega-group { border-left: 1px solid var(--color-border); }
.mega-group__heading { margin: 0 0 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
/* minmax(0,1fr) lets columns shrink to fit so they never overflow the panel /
   featured card; the 2-up spreads a busy dropdown into ~4 columns. */
.mega-group__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
/* Small groups (1–2 links) stay a single column — they read better stacked
   than split 2-up (e.g. the "Get started" group). */
.mega-group__items:has(> :only-child),
.mega-group__items:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
.mega-menu-item { display: grid; grid-template-columns: 44px 1fr; gap: 13px; align-items: center; padding: 11px 12px; border-radius: 14px; transition: background 180ms ease, transform 180ms ease; }
.mega-menu-item--noicon { grid-template-columns: 1fr; }
.mega-menu-item:hover { background: var(--color-surface-soft); transform: translateY(-1px); }
.mega-menu-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--color-accent-soft), var(--color-surface-soft)); color: var(--color-text); }
.mega-menu-icon svg { width: 20px; height: 20px; }
.mega-menu-item strong { display: block; margin-bottom: 3px; font-size: 14.5px; }
.mega-menu-item small { display: block; color: var(--color-muted); font-size: 13px; line-height: 1.35; }
/* Featured blog post card — sits to the right of the link columns. */
.mega-feature { flex: 0 0 248px; display: flex; flex-direction: column; margin-left: 8px; padding-left: 32px; border-left: 1px solid var(--color-border); color: inherit; }
.mega-feature__media { position: relative; display: block; height: 134px; margin-bottom: 14px; border-radius: 14px; overflow: hidden; background-color: var(--color-surface-dark); background-size: cover; background-position: center; }
.mega-feature__media:before { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(20,184,166,.42), transparent 62%); }
.mega-feature__tag { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--color-text); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mega-feature__title { display: block; margin-bottom: 6px; font-size: 15px; line-height: 1.3; transition: color 180ms ease; }
.mega-feature__excerpt { display: block; color: var(--color-muted); font-size: 13px; line-height: 1.4; }
.mega-feature:hover .mega-feature__title { color: var(--color-accent); }
/* On narrower desktops there isn't room for 4 columns + the featured card,
   so each group drops to a single column (dropdowns stay one-column wide). */
@media (max-width: 1160px) {
  .mega-group__items { grid-template-columns: 1fr; }
}

.hero { position: relative; overflow: clip; padding: 48px 0 0; }
.dot-field { position: absolute; inset: 0; pointer-events: none; mask-image: linear-gradient(to bottom, black 0%, black 48%, transparent 100%); }
.dot-field canvas { display: block; width: 100%; height: 100%; }
.hero-inner { position: relative; z-index: 1; }
.hero-copy { max-width: 660px; }
.hero h1 { margin: 0; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -.025em; font-weight: 800; }
.hero h1 span { color: var(--color-muted); font-weight: 500; }
.hero-text { margin: 14px 0 0; max-width: 520px; color: var(--color-muted); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.hero-product { margin-top: 36px; }
.hero-product__viewport { position: relative; width: 100%; aspect-ratio: 1120 / 640; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--color-border); background: rgba(255,255,255,.5); box-shadow: var(--shadow-soft); }
.hero-product__viewport .feat-scene { position: absolute; top: 0; left: 0; width: 1120px; height: 640px; transform-origin: top left; transform: scale(var(--scene-scale, .5)); }

.hero-ticker { position: sticky; bottom: 0; z-index: 5; height: 40px; display: flex; align-items: center; overflow: hidden; margin-top: 0; background: rgba(251,251,247,.94); border-top: 1px solid var(--color-border); backdrop-filter: blur(14px); transition: transform 260ms ease, opacity 260ms ease; }
body.past-hero .hero-ticker { transform: translateY(100%); opacity: 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 34s linear infinite; }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; color: var(--color-muted); white-space: nowrap; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.ticker-item em { padding: 3px 7px; border-radius: 6px; background: var(--color-surface-soft); color: var(--color-text); font-style: normal; font-weight: 800; font-size: 10px; font-variant-numeric: tabular-nums; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Testimonials marquee ───────────────────────────────────────────────── */
/* ── Testimonials wall ──────────────────────────────────────────────────── */
.testimonials-section {
  padding: 130px 0 120px;
  overflow: hidden;
  background: var(--color-surface-soft);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.testimonials-section:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 25% 0%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 100%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 50%);
  pointer-events: none;
}
.testimonials-header { position: relative; z-index: 1; max-width: 680px; margin: 0 0 60px; padding: 0 24px; }
.testimonials-header .eyebrow { color: var(--color-accent); }
.testimonials-header h2 { color: var(--color-text); font-size: clamp(28px, 3.4vw, 44px); margin: 0; }

.testimonials-wall { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.testimonials-wall__row { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent); }
.testimonials-wall__track { display: flex; gap: 16px; width: max-content; animation: marquee-left var(--speed, 48s) linear infinite; }
.testimonials-wall__row[data-direction="right"] .testimonials-wall__track { animation-name: marquee-right; }
.testimonials-wall__row:hover .testimonials-wall__track { animation-play-state: paused; }

/* Shared card base */
.t-card { flex-shrink: 0; border-radius: 18px; position: relative; transition: transform 260ms cubic-bezier(.16,1,.3,1), box-shadow 260ms ease, border-color 200ms ease; }
.t-card:hover { transform: translateY(-4px) scale(1.015); }

/* Quote cards */
.t-card--quote {
  width: 440px;
  padding: 30px 30px 26px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 24px rgba(0,0,0,.04);
}
.t-card--quote:hover { box-shadow: 0 20px 54px rgba(0,0,0,.08); border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); }
.t-card--quote:before {
  content: "\201C";
  position: absolute;
  top: 18px;
  right: 26px;
  font-size: 52px;
  font-family: Georgia, serif;
  color: var(--color-accent);
  opacity: .15;
  line-height: 1;
}
.t-card--quote p { margin: 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--color-text); font-weight: 500; }
.t-card--quote footer { display: flex; flex-direction: column; gap: 3px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.t-card--quote strong { font-size: 14px; font-weight: 700; color: var(--color-text); }
.t-card--quote footer span { font-size: 12px; color: var(--color-muted); }

/* Stat cards */
.t-card--stat {
  width: 240px;
  padding: 28px 24px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
  box-shadow: 0 6px 24px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.t-card--stat:hover { box-shadow: 0 16px 44px rgba(0,0,0,.08); border-color: var(--color-accent); }
.t-card__number { font-size: 38px; font-weight: 800; letter-spacing: -.03em; color: var(--color-accent); line-height: 1; }
.t-card__stat-label { font-size: 14px; font-weight: 500; color: var(--color-text); line-height: 1.4; }
.t-card__company { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }

@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (max-width: 640px) {
  .testimonials-section { padding: 90px 0 80px; }
  .t-card--quote { width: 320px; padding: 24px; }
  .t-card--stat { width: 200px; padding: 22px 20px; }
  .t-card__number { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-wall__track { animation: none; }
}

/* ── Social proof strip ─────────────────────────────────────────────────── */
.social-proof { padding: 32px 0; border-bottom: 1px solid var(--color-border); }
.social-proof__inner { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.social-proof__label { font-size: 13px; color: var(--color-muted); font-weight: 500; }
.social-proof__stat { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--color-text); }
.social-proof__stat-label { font-size: 13px; color: var(--color-muted); font-weight: 500; }
.social-proof__divider { width: 1px; height: 24px; background: var(--color-border); margin: 0 8px; }
.social-proof__logos { display: flex; align-items: center; gap: 20px; }
.social-proof__logos img { height: 22px; width: auto; opacity: .45; filter: grayscale(100%); transition: opacity 180ms ease, filter 180ms ease; }
.social-proof__logos img:hover { opacity: .8; filter: grayscale(0%); }
.social-proof__integration { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--color-muted); white-space: nowrap; }
.social-proof__integration svg { opacity: .5; }

@media (max-width: 640px) {
  .social-proof__inner { flex-direction: column; gap: 12px; text-align: center; }
  .social-proof__divider { width: 40px; height: 1px; margin: 4px 0; }
  .social-proof__logos { flex-wrap: wrap; justify-content: center; }
  /* Footer: single column on phones with newsletter input stacked */
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .footer-brand, .footer-newsletter { grid-column: auto !important; }
  .footer-newsletter-form { flex-direction: column; gap: 10px; }
  .footer-newsletter-form input { height: 44px; }
  .footer-newsletter-form .button { width: 100%; justify-content: center; min-height: 44px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ── Feature bento (Ramp-style cards) ─────────────────────────────────────── */
.feature-bento { padding: 96px 0 110px; }
.feature-bento__intro { max-width: 760px; margin: 0 0 44px; }
.feature-bento__intro h2 { margin: 12px 0 16px; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; }
.feature-bento__intro h2 span { color: var(--color-muted); font-weight: 500; }
.feature-bento__intro p { margin: 0 0 24px; color: var(--color-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; max-width: 580px; }
.feature-bento__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@property --feat-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.feat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
  padding: 28px 28px 24px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  isolation: isolate;
  transition: transform 320ms cubic-bezier(.16,1,.3,1), background 280ms ease;
}
.feat-card__cta { margin-top: auto; }
/* Vibrant rotating glow — bright teal sweep + outer halo */
.feat-card:before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  padding: 2px;
  background: conic-gradient(from var(--feat-glow-angle, 0deg),
    transparent 0deg,
    transparent 200deg,
    #4fd1c5 260deg,
    #03ffdf 290deg,
    #03ffdf 310deg,
    #4fd1c5 340deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 6px #03ffdf) drop-shadow(0 0 12px rgba(3,255,223,.5));
}
/* Soft inner color wash */
.feat-card:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 100%, rgba(3,255,223,.18), transparent 60%),
    radial-gradient(circle at 20% 0%, rgba(79,209,197,.12), transparent 50%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: 0;
}
.feat-card:hover {
  transform: translateY(-3px);
  background: var(--color-surface);
  box-shadow: 0 24px 60px rgba(3,255,223,.15), 0 0 0 1px rgba(3,255,223,.1);
}
.feat-card:hover:before {
  opacity: 1;
  animation: feat-glow-rotate 3s linear infinite;
}
.feat-card:hover:after { opacity: 1; }
@keyframes feat-glow-rotate {
  to { --feat-glow-angle: 360deg; }
}
.feat-card > * { position: relative; z-index: 1; }
.feat-card__category {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--color-accent) 10%, white);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: background 280ms ease, border-color 280ms ease;
}
.feat-card:hover .feat-card__category {
  background: color-mix(in srgb, var(--color-accent) 18%, white);
  border-color: var(--color-accent);
}
.feat-card__title { margin: 0 0 8px; max-width: 90%; font-size: 26px; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
.feat-card__title span { color: var(--color-muted); font-weight: 500; }
.feat-card__tag { margin: 0 0 22px; max-width: 80%; color: var(--color-muted); font-size: 14px; line-height: 1.45; }

.feat-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 20px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color 280ms ease, background 280ms ease, padding 320ms cubic-bezier(.16,1,.3,1);
}
.feat-card:hover .feat-card__cta {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, white);
  padding-right: 14px;
}
.feat-card__cta-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--color-text);
  transition: color 280ms ease;
}
.feat-card__cta-icon svg { width: 14px; height: 14px; }
.feat-card:hover .feat-card__cta-icon { color: var(--color-accent); }
.feat-card__cta-text {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  width: 0;
  opacity: 0;
  transition: width 320ms cubic-bezier(.16,1,.3,1), opacity 240ms ease 60ms;
}
.feat-card:hover .feat-card__cta-text {
  width: 56px;
  opacity: 1;
}
/* Scene viewport — the inner .feat-scene paints at native 1120×640 and is
   scaled to fit via --scene-scale (set by JS ResizeObserver). */
.feat-card__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 640;
  overflow: hidden;
  border-radius: 14px;
}
.feat-card__viewport .feat-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 1120px;
  height: 640px;
  transform-origin: top left;
  transform: scale(var(--scene-scale, .5));
}
/* Soft vignette so the scene edges blend into the card */
.feat-card__viewport:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 30px 8px var(--color-surface-soft);
  pointer-events: none;
  z-index: 6;
}

/* Self-contained feature animations: they handle their own internal scaling
   via the .cx-fit container (aspect-ratio 880/600). We just give them width. */
.feat-card__animation { margin-top: 8px; }

/* Phone — single column */
@media (max-width: 640px) {
  .feature-bento__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dot-field canvas { display: none; }
  .ticker-track { animation: none; }
  .feat-scene *,
  .feat-scene *:before,
  .feat-scene *:after { animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Scroll-triggered entrance reveals */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

.section { padding: 96px 0; }
.section--white { background: var(--color-surface); }
.section--soft { background: var(--color-surface-soft); }
.section-heading { max-width: 720px; margin-bottom: 38px; }
.section-heading.row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.section-heading h2, .cta-block h2, .page-content h1, .single-post h1 { margin: 0; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; }
.section-heading p:not(.eyebrow), .feature-card p, .pricing-card p { color: var(--color-muted); line-height: 1.6; }
.feature-card, .pricing-card { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); box-shadow: 0 16px 50px rgba(0,0,0,.04); }
.feature-card, .pricing-card { padding: 30px; }
.feature-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 34px; border-radius: 12px; background: linear-gradient(135deg, var(--color-accent-soft), var(--color-surface-soft)); }
.feature-card h3, .pricing-card h3 { margin: 0 0 12px; font-size: 24px; letter-spacing: -.03em; }
.pricing-card strong { display: block; margin: 28px 0 12px; font-size: 46px; letter-spacing: -.05em; }
.pricing-card.is-highlighted { background: var(--color-surface-dark); color: #fff; transform: translateY(-12px); }
.pricing-card.is-highlighted p { color: rgba(255,255,255,.66); }
.faq-section .section-heading p:not(.eyebrow) { color: var(--color-muted); font-size: 16px; line-height: 1.6; margin-top: 12px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); padding: 0; overflow: hidden; transition: border-color 180ms ease, box-shadow 180ms ease; }
.faq-item[open] { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); box-shadow: 0 8px 28px rgba(0,0,0,.04); }
.faq-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; cursor: pointer; font-weight: 700; font-size: 17px; line-height: 1.3; list-style: none; }
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { display: none; content: ""; }
.faq-chevron { flex-shrink: 0; color: var(--color-muted); transition: transform 280ms cubic-bezier(.16,1,.3,1), color 180ms ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--color-accent); }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms cubic-bezier(.16,1,.3,1), padding 320ms cubic-bezier(.16,1,.3,1); }
.faq-item[open] .faq-body { grid-template-rows: 1fr; }
.faq-body > p { overflow: hidden; margin: 0; padding: 0 24px 22px; color: var(--color-muted); line-height: 1.65; font-size: 15px; }
/* Updates feed */
.updates-feed { display: flex; flex-direction: column; }
.update-item { display: grid; grid-template-columns: 140px 1fr 24px; gap: 24px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--color-border); color: inherit; transition: background 180ms ease; }
.update-item:first-child { border-top: 1px solid var(--color-border); }
.update-item:hover { background: var(--color-surface-soft); margin: 0 -20px; padding-left: 20px; padding-right: 20px; border-radius: 14px; border-color: transparent; }
.update-item:hover + .update-item { border-top-color: transparent; }
.update-item__left { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.update-item__left time { font-size: 13px; color: var(--color-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.update-item__tag { display: inline-flex; align-self: flex-start; padding: 3px 9px; border-radius: 6px; background: color-mix(in srgb, var(--color-accent) 10%, white); color: var(--color-text); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.update-item__body h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.update-item__body p { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.55; }
.update-item__arrow { flex-shrink: 0; margin-top: 4px; color: var(--color-border); transition: color 180ms ease, transform 180ms ease; }
.update-item:hover .update-item__arrow { color: var(--color-accent); transform: translate(2px, -2px); }

@media (max-width: 640px) {
  .update-item { grid-template-columns: 1fr 24px; gap: 12px; }
  .update-item__left { flex-direction: row; align-items: center; }
}
/* CTA section — light teal wash, no dark card */
.cta-section { border-top: 1px solid var(--color-border); background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 4%, var(--color-bg)) 0%, var(--color-bg) 100%); }
.cta-block { text-align: center; padding: clamp(20px, 2vw, 40px) 0; }
.cta-block .eyebrow { color: var(--color-accent); }
.cta-block h2 { max-width: 600px; margin: 0 auto; }
.cta-block__body { max-width: 520px; margin: 16px auto 0; color: var(--color-muted); font-size: 16px; line-height: 1.6; }
.cta-block__actions { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 32px; }
.cta-block__trust { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 24px; }
.cta-block__trust span { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); font-size: 12px; font-weight: 600; }
.cta-block__trust span:before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 14%, white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6L5 8.5L9.5 4' stroke='%234fd1c5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 10px no-repeat; }
.site-footer { padding: 80px 0 0; border-top: 1px solid var(--color-border); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, .7fr) 1.2fr; gap: 40px; }
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-desc { color: var(--color-muted); font-size: 14px; line-height: 1.6; max-width: 260px; margin: 0; }
.footer-social { display: flex; gap: 12px; margin-top: 4px; }
.footer-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--color-surface-soft); border: 1px solid var(--color-border); color: var(--color-muted); transition: color 180ms ease, border-color 180ms ease; }
.footer-social a:hover { color: var(--color-text); border-color: var(--color-accent); }
.footer-col h4 { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--color-muted); transition: color 180ms ease; }
.footer-col a:hover { color: var(--color-text); }
.footer-newsletter h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.footer-newsletter p { margin: 0 0 14px; color: var(--color-muted); font-size: 14px; line-height: 1.5; }
.footer-newsletter-form { display: flex; gap: 8px; }
.footer-newsletter-form input { flex: 1; min-width: 0; padding: 0 14px; height: 36px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); font-size: 13px; color: var(--color-text); outline: none; transition: border-color 180ms ease; }
.footer-newsletter-form input:focus { border-color: var(--color-accent); }
.footer-bottom { margin-top: 48px; padding: 24px 0; border-top: 1px solid var(--color-border); }
.footer-bottom p { margin: 0; color: var(--color-muted); font-size: 13px; }
/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 240ms ease; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(9,9,9,.5); backdrop-filter: blur(6px); }
.modal__content { position: relative; width: min(520px, calc(100% - 48px)); max-height: calc(100vh - 80px); overflow-y: auto; padding: 40px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 22px; box-shadow: 0 40px 100px rgba(0,0,0,.15); }
.modal__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; border-radius: 10px; background: var(--color-surface-soft); display: grid; place-items: center; cursor: pointer; color: var(--color-muted); transition: background 180ms ease; }
.modal__close:hover { background: var(--color-border); }
.modal__content h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.modal__subtitle { margin: 0 0 28px; color: var(--color-muted); font-size: 14px; line-height: 1.5; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.contact-form__field { margin-bottom: 14px; }
.contact-form__row .contact-form__field { margin-bottom: 0; }
.contact-form__field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.contact-form__field label span[aria-hidden] { color: var(--color-accent); font-weight: 700; }
.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select { width: 100%; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); font: inherit; font-size: 14px; color: var(--color-text); transition: border-color 180ms ease, box-shadow 180ms ease; outline: none; resize: vertical; box-sizing: border-box; }
.contact-form__field select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236f6f68' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.contact-form__field input:focus,
.contact-form__field textarea:focus,
.contact-form__field select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent); }

.contact-form__checks { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.contact-form__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--color-muted); line-height: 1.45; cursor: pointer; }
.contact-form__check input[type="checkbox"] { flex-shrink: 0; margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--color-accent); }
.contact-form__check a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }

.contact-form__submit { margin-top: 8px; width: 100%; justify-content: center; }
.contact-form__submit:disabled { opacity: .6; cursor: not-allowed; }
.contact-form__submit-loading { display: none; align-items: center; gap: 8px; }
.contact-form__submit.is-loading .contact-form__submit-default { display: none; }
.contact-form__submit.is-loading .contact-form__submit-loading { display: inline-flex; }
.contact-form__spinner { animation: contact-spin 800ms linear infinite; }
@keyframes contact-spin { to { transform: rotate(360deg); } }

.contact-form__field-error { display: block; margin-top: 6px; color: #b91c1c; font-size: 12px; font-weight: 600; }
.contact-form__field input.has-error, .contact-form__field textarea.has-error { border-color: #fca5a5; }
.contact-form__error { margin: 16px 0 0; padding: 12px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; color: #b91c1c; font-size: 13px; }

/* Success view — swaps in for the whole form after a send */
.modal__success-view { text-align: center; padding: 24px 8px 8px; }
.modal__success-icon { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 14%, white); color: var(--color-accent); animation: success-pop 420ms cubic-bezier(.16, 1, .3, 1); }
.modal__success-tick { stroke-dasharray: 14; stroke-dashoffset: 14; animation: success-tick 360ms ease-out 220ms forwards; }
.modal__success-title { margin: 0 0 10px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.modal__success-body { margin: 0 0 24px; color: var(--color-muted); font-size: 14px; line-height: 1.6; }
@keyframes success-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes success-tick { to { stroke-dashoffset: 0; } }

/* ── Hero video play button + lightbox ─────────────────────────────────── */
.hero-product { position: relative; }
.hero-video-play {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
}
.hero-video-play__circle {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: 0 10px 34px rgba(0,0,0,.18);
  transition: transform 200ms cubic-bezier(.16,1,.3,1);
}
.hero-video-play__circle svg { margin-left: 3px; }
.hero-video-play:hover .hero-video-play__circle { transform: scale(1.08); }
.hero-video-play::before {
  content: "";
  position: absolute;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 40%, transparent);
  animation: hero-play-pulse 2.2s ease-out infinite;
}
.hero-video-play__label {
  position: relative;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
@keyframes hero-play-pulse {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(1.65); opacity: 0; }
}

.video-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity 200ms ease; }
.video-modal[hidden] { display: none; }
.video-modal.is-open { opacity: 1; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(9, 9, 11, .82); backdrop-filter: blur(6px); }
.video-modal__content { position: relative; width: min(1000px, 100%); }
.video-modal__frame { aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.video-modal__frame iframe, .video-modal__frame video { width: 100%; height: 100%; border: 0; display: block; }
.video-modal__close { position: absolute; top: -44px; right: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: background 160ms ease; }
.video-modal__close:hover { background: rgba(255,255,255,.24); }

/* ── Back to top ───────────────────────────────────────────────────────── */
.back-to-top { position: fixed; bottom: 28px; right: 28px; z-index: 80; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-muted); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity 240ms ease, transform 240ms ease, border-color 180ms ease, color 180ms ease; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ── Changelog page ────────────────────────────────────────────────────── */
.changelog-hero {
  padding: 80px 0 56px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 70%),
    var(--color-bg);
}
.changelog-hero .eyebrow { color: var(--color-accent); }
.changelog-hero h1 { margin: 12px 0 0; font-size: clamp(36px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.changelog-hero__subtitle { margin: 16px 0 0; color: var(--color-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; max-width: 580px; }
.changelog-subscribe { display: flex; gap: 8px; margin-top: 32px; max-width: 440px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.04); }
.changelog-subscribe input { flex: 1; min-width: 0; padding: 0 14px; height: 40px; border: 0; background: transparent; font-size: 14px; outline: none; }
.changelog-subscribe__success { margin-top: 14px; color: var(--color-accent); font-size: 13px; font-weight: 700; }
.changelog-subscribe__error { margin-top: 14px; color: #c0392b; font-size: 13px; font-weight: 700; }

/* Search results page — input row in the hero, same shell as the subscribe form */
.search-bar { display: flex; gap: 8px; margin: 32px auto 0; max-width: 440px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.04); }
.search-bar input { flex: 1; min-width: 0; padding: 0 14px; height: 40px; border: 0; background: transparent; font-size: 14px; outline: none; }

.changelog-timeline { padding: 56px 0; }
.changelog-timeline .container.narrow { position: relative; }
.changelog-timeline .container.narrow:before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--color-border) 0%, var(--color-border) 95%, transparent 100%);
}

.changelog-release {
  position: relative;
  padding: 0 0 48px 64px;
  margin-bottom: 8px;
}
.changelog-release:last-child { padding-bottom: 0; }
.changelog-release:before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  z-index: 1;
}
.changelog-release--major:before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent), 0 0 16px rgba(3,255,223,.5);
  animation: changelogPulse 2.4s ease-in-out infinite;
}
@keyframes changelogPulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent), 0 0 16px rgba(3,255,223,.5); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 0 24px rgba(3,255,223,.7); }
}

.changelog-release__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.changelog-release__version {
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.changelog-release--major .changelog-release__version {
  background: color-mix(in srgb, var(--color-accent) 12%, white);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.changelog-release__meta time { font-size: 13px; color: var(--color-muted); font-weight: 500; }
.changelog-release__badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, #000));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 4px 14px rgba(3,255,223,.3);
}

.changelog-release h2 { margin: 0 0 14px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.changelog-release--major h2 { font-size: clamp(26px, 2.8vw, 36px); }
.changelog-release__desc { margin: 0 0 18px; color: var(--color-muted); font-size: 16px; line-height: 1.6; max-width: 640px; }
.changelog-release__image { display: block; width: 100%; border-radius: 18px; margin: 24px 0; border: 1px solid var(--color-border); overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.06); }
.changelog-release__image img { width: 100%; height: auto; display: block; }
.changelog-release__body { margin: 18px 0; color: var(--color-text); line-height: 1.7; font-size: 15px; }
.changelog-release__body p { margin: 0 0 14px; }

.changelog-changes {
  list-style: none;
  margin: 18px 0 0;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.changelog-release--major .changelog-changes {
  background: color-mix(in srgb, var(--color-accent) 4%, white);
  border-color: color-mix(in srgb, var(--color-accent) 20%, var(--color-border));
}
.changelog-changes li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--color-text); }
.changelog-changes__heading { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin: 12px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); }
.changelog-changes__heading:first-child { margin-top: 0; }
.changelog-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  min-width: 70px;
  justify-content: center;
}
.changelog-badge--teal { background: color-mix(in srgb, var(--color-accent) 14%, white); color: var(--color-accent); }
.changelog-badge--amber { background: #fef3c7; color: #b45309; }
.changelog-badge--green { background: #dcfce7; color: #15803d; }
.changelog-badge--muted { background: var(--color-surface-soft); color: var(--color-muted); }
.changelog-badge--violet { background: #ede9fe; color: #6d28d9; }
.changelog-empty { color: var(--color-muted); font-size: 15px; text-align: center; padding: 40px; }

@media (max-width: 640px) {
  .changelog-timeline .container.narrow:before { left: 16px; }
  .changelog-release { padding-left: 44px; }
  .changelog-release:before { left: 11px; }
}

/* ── Roadmap page ──────────────────────────────────────────────────────── */
.roadmap-hero { padding: 100px 0 56px; }
.roadmap-hero h1 { margin: 12px 0 0; font-size: clamp(36px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.roadmap-hero__subtitle { margin: 20px auto 0; max-width: 600px; color: var(--color-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }

.roadmap-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; justify-content: center; }
.roadmap-filter { padding: 8px 16px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-muted); cursor: pointer; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.roadmap-filter:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); }
.roadmap-filter.is-active { background: color-mix(in srgb, var(--color-accent) 10%, white); border-color: var(--color-accent); color: var(--color-text); }

.roadmap-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.roadmap-column { background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: 20px; padding: 20px; }
.roadmap-column__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 16px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.roadmap-column__label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.roadmap-column__count { padding: 2px 8px; border-radius: 6px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: 11px; font-weight: 700; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.roadmap-column--in_progress .roadmap-column__label { color: var(--color-accent); }
.roadmap-column__list { display: flex; flex-direction: column; gap: 12px; }
.roadmap-empty { padding: 24px; text-align: center; color: var(--color-muted); font-size: 13px; }
.roadmap-card { padding: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.16,1,.3,1); }
.roadmap-card:hover { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); box-shadow: 0 8px 28px rgba(0,0,0,.05); transform: translateY(-2px); }
.roadmap-card.is-hidden { display: none; }
.roadmap-card__category { display: inline-block; margin-bottom: 8px; padding: 3px 8px; border-radius: 6px; background: var(--color-surface-soft); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.roadmap-card__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.roadmap-card__desc { margin: 0; color: var(--color-muted); font-size: 13px; line-height: 1.5; }
.roadmap-card__progress { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.roadmap-card__progress-bar { flex: 1; height: 6px; background: var(--color-surface-soft); border-radius: 999px; overflow: hidden; }
.roadmap-card__progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, #000)); border-radius: 999px; }
.roadmap-card__progress-label { font-size: 11px; font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.roadmap-card__meta { margin-top: 10px; font-size: 12px; color: var(--color-muted); font-style: italic; }

@media (max-width: 900px) {
  .roadmap-columns { grid-template-columns: 1fr; }
}

/* ══ Page builder blocks ═══════════════════════════════════════════════════ */

/* Page builder frame — auto-alternates backgrounds for natural rhythm */
.page-builder { display: flex; flex-direction: column; }
.pb-block { padding: 96px 0; position: relative; }
.pb-block:first-child { padding-top: 56px; }
.pb-block + .pb-block { padding-top: 96px; }

/* Auto-alternation: even-indexed sections get the cream lift */
.pb-block:nth-of-type(even):not(.pb-hero):not(.pb-trust-strip) {
  background: var(--color-surface-soft);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.pb-spotlight[data-bg="white"] { background: var(--color-surface) !important; }
.pb-spotlight[data-bg="soft"]  { background: var(--color-surface-soft) !important; }
.pb-spotlight[data-bg="cream"] { background: var(--color-bg) !important; }

/* Shared visual wrapper (scenes + images) — with rotating teal glow on hover */
.pb-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 640;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.5);
  box-shadow: 0 30px 80px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.03);
  isolation: isolate;
  transition: transform 320ms cubic-bezier(.16,1,.3,1), box-shadow 320ms ease;
}
.pb-visual:before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 25px;
  padding: 1.5px;
  background: conic-gradient(from var(--feat-glow-angle, 0deg),
    transparent 0deg, transparent 220deg,
    #4fd1c5 280deg, #03ffdf 310deg, #4fd1c5 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  filter: drop-shadow(0 0 6px #03ffdf) drop-shadow(0 0 12px rgba(3,255,223,.5));
}
.pb-visual:hover { transform: translateY(-3px); box-shadow: 0 40px 100px rgba(0,0,0,.08), 0 16px 36px rgba(3,255,223,.08); }
.pb-visual:hover:before { opacity: 1; animation: feat-glow-rotate 4s linear infinite; }
.pb-visual .feat-scene { position: absolute; top: 0; left: 0; width: 1120px; height: 640px; transform-origin: top left; transform: scale(var(--scene-scale, .5)); }
.pb-visual__image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── HERO BLOCK ───────────────────────────────────────────────────────── */
.pb-hero {
  padding: 110px 0 80px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 65%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 40%);
  position: relative;
}
.pb-hero__inner { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.pb-hero:not(.has-visual) .pb-hero__inner { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; text-align: center; }
.pb-hero__copy { max-width: 600px; }
.pb-hero:not(.has-visual) .pb-hero__copy { max-width: none; margin: 0 auto; }
.pb-hero .eyebrow { color: var(--color-accent); }
.pb-hero h1 { margin: 14px 0 0; font-size: clamp(40px, 5.2vw, 72px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.pb-hero h1 span { color: var(--color-muted); font-weight: 500; }
.pb-hero__body { margin: 22px 0 0; color: var(--color-muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; max-width: 560px; }
.pb-hero:not(.has-visual) .pb-hero__body { margin-left: auto; margin-right: auto; }
.pb-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pb-hero:not(.has-visual) .pb-hero__actions { justify-content: center; }

/* ── SPOTLIGHT BLOCK ──────────────────────────────────────────────────── */
.pb-spotlight {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.pb-spotlight:before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  background: radial-gradient(ellipse 50% 50% at 80% 50%, color-mix(in srgb, var(--color-accent) 4%, transparent), transparent 70%);
}
.pb-spotlight--text-right:before { background: radial-gradient(ellipse 50% 50% at 20% 50%, color-mix(in srgb, var(--color-accent) 4%, transparent), transparent 70%); }
.pb-spotlight__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.pb-spotlight--text-right .pb-spotlight__copy { order: 2; }
.pb-spotlight .eyebrow { color: var(--color-accent); }
.pb-spotlight h2 { margin: 14px 0 0; font-size: clamp(30px, 3.8vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
.pb-spotlight__body { margin: 22px 0 0; color: var(--color-muted); font-size: 17px; line-height: 1.7; }
.pb-spotlight__bullets { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.pb-spotlight__bullets li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.55; color: var(--color-text); font-weight: 500; }
.pb-spotlight__bullets li:before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 14%, white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6L5 8.5L9.5 4' stroke='%234fd1c5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 13px no-repeat;
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* ── BENEFITS GRID — feature card pattern with rotating glow ──────────── */
.pb-benefits__head { max-width: 720px; margin-bottom: 56px; }
.pb-benefits__head .eyebrow { color: var(--color-accent); }
.pb-benefits__head h2 { margin: 14px 0 0; font-size: clamp(30px, 3.8vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.pb-benefits__grid { display: grid; gap: 18px; }
.pb-benefits__grid--3 { grid-template-columns: repeat(3, 1fr); }
.pb-benefits__grid--4 { grid-template-columns: repeat(4, 1fr); }
.pb-benefit {
  position: relative;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  isolation: isolate;
  transition: transform 320ms cubic-bezier(.16,1,.3,1), background 280ms ease;
}
.pb-benefit:before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 23px;
  padding: 1.5px;
  background: conic-gradient(from var(--feat-glow-angle, 0deg),
    transparent 0deg, transparent 200deg,
    #4fd1c5 260deg, #03ffdf 290deg, #03ffdf 310deg, #4fd1c5 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  filter: drop-shadow(0 0 6px #03ffdf) drop-shadow(0 0 12px rgba(3,255,223,.5));
}
.pb-benefit:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  z-index: 0;
}
.pb-benefit:hover { transform: translateY(-3px); }
.pb-benefit:hover:before { opacity: 1; animation: feat-glow-rotate 4s linear infinite; }
.pb-benefit:hover:after { opacity: 1; }
.pb-benefit > * { position: relative; z-index: 1; }
.pb-benefit__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 14%, white), color-mix(in srgb, var(--color-accent) 6%, white)); border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border)); color: var(--color-accent); margin-bottom: 22px; }
.pb-benefit__icon svg { width: 26px; height: 26px; }
.pb-benefit__icon img { width: 26px; height: 26px; }
.pb-benefit h3 { margin: 0 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.pb-benefit p { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.6; }

/* ── PROCESS STEPS ────────────────────────────────────────────────────── */
.pb-process__head { max-width: 720px; margin-bottom: 56px; }
.pb-process__head .eyebrow { color: var(--color-accent); }
.pb-process__head h2 { margin: 14px 0 0; font-size: clamp(30px, 3.8vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.pb-process__steps { display: flex; align-items: stretch; gap: 0; }
.pb-process__step {
  flex: 1;
  position: relative;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(.16,1,.3,1);
}
.pb-process__step:hover { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); box-shadow: 0 16px 40px rgba(0,0,0,.05); transform: translateY(-3px); }
.pb-process__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 14%, white), color-mix(in srgb, var(--color-accent) 6%, white)); border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border)); color: var(--color-accent); margin-bottom: 22px; }
.pb-process__number { position: absolute; top: 24px; right: 26px; font-size: 12px; font-weight: 800; color: var(--color-accent); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.pb-process__step h3 { margin: 0 0 12px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.pb-process__step p { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.65; flex: 1; }
.pb-process__connector { display: flex; align-items: center; padding: 0 12px; align-self: center; opacity: .5; }

/* ── STAT HIGHLIGHT — full atmospheric drama ──────────────────────────── */
.pb-stat {
  padding: 120px 0;
  background:
    radial-gradient(ellipse 70% 70% at 50% 50%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 70%),
    var(--color-surface-soft);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.pb-stat .eyebrow { color: var(--color-accent); }
.pb-stat__number {
  font-size: clamp(80px, 12vw, 180px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
  margin: 24px 0;
  background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 50%, #000));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(3,255,223,.2);
}
.pb-stat__label { margin: 0 auto 18px; max-width: 720px; font-size: clamp(24px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.pb-stat__description { margin: 0 auto; max-width: 560px; color: var(--color-muted); font-size: 17px; line-height: 1.6; }

/* ── PULL QUOTE — matches testimonials wall style ─────────────────────── */
.pb-quote { padding: 100px 0; position: relative; }
.pb-quote .container.narrow { position: relative; }
.pb-quote .container.narrow:before {
  content: "\201C";
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 220px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-accent);
  opacity: .08;
  pointer-events: none;
  font-family: Georgia, serif;
  z-index: 0;
}
.pb-quote__block {
  margin: 0;
  position: relative;
  padding: 48px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.05);
  z-index: 1;
}
.pb-quote__text { margin: 0 0 32px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.4; color: var(--color-text); letter-spacing: -.015em; }
.pb-quote__footer { display: flex; align-items: center; gap: 18px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.pb-quote__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.pb-quote__photo--initials { display: grid; place-items: center; background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, #000)); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.pb-quote__footer cite { font-style: normal; display: flex; flex-direction: column; gap: 4px; }
.pb-quote__footer strong { font-size: 15px; font-weight: 700; }
.pb-quote__footer span { font-size: 13px; color: var(--color-muted); }

/* ── USE CASES — feature card pattern ─────────────────────────────────── */
.pb-use-cases__head { max-width: 720px; margin-bottom: 56px; }
.pb-use-cases__head .eyebrow { color: var(--color-accent); }
.pb-use-cases__head h2 { margin: 14px 0 0; font-size: clamp(30px, 3.8vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.pb-use-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pb-use-case {
  position: relative;
  padding: 36px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  isolation: isolate;
  transition: transform 320ms cubic-bezier(.16,1,.3,1), border-color 280ms ease;
}
.pb-use-case:before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 23px;
  padding: 1.5px;
  background: conic-gradient(from var(--feat-glow-angle, 0deg),
    transparent 0deg, transparent 200deg,
    #4fd1c5 260deg, #03ffdf 290deg, #03ffdf 310deg, #4fd1c5 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  filter: drop-shadow(0 0 6px #03ffdf) drop-shadow(0 0 12px rgba(3,255,223,.5));
}
.pb-use-case:hover { transform: translateY(-4px); }
.pb-use-case:hover:before { opacity: 1; animation: feat-glow-rotate 4s linear infinite; }
.pb-use-case > * { position: relative; z-index: 1; }
.pb-use-case__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 14%, white), color-mix(in srgb, var(--color-accent) 6%, white)); border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border)); color: var(--color-accent); margin-bottom: 22px; }
.pb-use-case__icon svg { width: 24px; height: 24px; }
.pb-use-case__persona { margin: 0 0 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--color-accent); }
.pb-use-case__scenario { margin: 0 0 20px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.pb-use-case__outcome {
  margin: 0;
  padding: 16px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 8%, white), color-mix(in srgb, var(--color-accent) 4%, white));
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}
.pb-use-case__outcome-label { display: inline-block; font-weight: 800; color: var(--color-accent); margin-right: 4px; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }

/* ── CTA BANNER — atmospheric ─────────────────────────────────────────── */
.pb-cta-banner__inner {
  position: relative;
  text-align: center;
  padding: 80px 40px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%),
    var(--color-surface-soft);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border));
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(3,255,223,.08);
}
.pb-cta-banner__inner:before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 70%);
  pointer-events: none;
}
.pb-cta-banner .eyebrow { color: var(--color-accent); position: relative; }
.pb-cta-banner h2 { margin: 14px 0 0; position: relative; font-size: clamp(30px, 3.8vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.pb-cta-banner__body { position: relative; max-width: 580px; margin: 18px auto 0; color: var(--color-muted); font-size: 17px; line-height: 1.6; }
.pb-cta-banner__actions { position: relative; display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 36px; flex-wrap: wrap; }

/* ── TRUST STRIP ──────────────────────────────────────────────────────── */
.pb-trust-strip { padding: 48px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.pb-trust-strip__inner { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.pb-trust-strip__label { font-size: 13px; color: var(--color-muted); font-weight: 500; }
.pb-trust-strip__stat { font-size: 26px; font-weight: 800; letter-spacing: -.025em; }
.pb-trust-strip__stat-label { font-size: 13px; color: var(--color-muted); }
.pb-trust-strip__divider { width: 1px; height: 28px; background: var(--color-border); margin: 0 8px; }
.pb-trust-strip__logos { display: flex; align-items: center; gap: 28px; }
.pb-trust-strip__logos img { height: 26px; width: auto; opacity: .45; filter: grayscale(100%); transition: opacity 220ms ease, filter 220ms ease; }
.pb-trust-strip__logos img:hover { opacity: .85; filter: grayscale(0); }

@media (max-width: 980px) {
  .pb-hero__inner { grid-template-columns: 1fr !important; text-align: left; gap: 40px; }
  .pb-hero:not(.has-visual) .pb-hero__inner { text-align: center; }
  .pb-spotlight__grid { grid-template-columns: 1fr; gap: 40px; }
  .pb-spotlight--text-right .pb-spotlight__copy { order: 0; }
  .pb-benefits__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pb-benefits__grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pb-process__steps { flex-direction: column; gap: 12px; }
  .pb-process__connector { transform: rotate(90deg); padding: 4px 0; }
  .pb-use-cases__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pb-block { padding: 72px 0; }
}
@media (max-width: 560px) {
  .pb-benefits__grid--3, .pb-benefits__grid--4 { grid-template-columns: 1fr; }
  .pb-quote__block { padding: 32px 24px; }
  .pb-cta-banner__inner { padding: 56px 24px; }
}

/* ── About page ────────────────────────────────────────────────────────── */
.about-hero {
  padding: 110px 0 72px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 70%),
    var(--color-bg);
}
.about-hero h1 { margin: 14px 0 0; font-size: clamp(40px, 5vw, 68px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.about-hero__subtitle { margin: 24px auto 0; max-width: 620px; color: var(--color-muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; }

/* Mission/Vision — feature-card-style with hover glow */
.about-mvp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.about-mvp__card {
  position: relative;
  padding: 40px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  isolation: isolate;
  transition: transform 320ms cubic-bezier(.16,1,.3,1), background 280ms ease;
}
.about-mvp__card:before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  padding: 2px;
  background: conic-gradient(from var(--feat-glow-angle, 0deg),
    transparent 0deg, transparent 200deg,
    #4fd1c5 260deg, #03ffdf 290deg, #03ffdf 310deg, #4fd1c5 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
  filter: drop-shadow(0 0 6px #03ffdf) drop-shadow(0 0 12px rgba(3,255,223,.5));
}
.about-mvp__card:hover { transform: translateY(-3px); background: var(--color-surface); }
.about-mvp__card:hover:before { opacity: 1; animation: feat-glow-rotate 3s linear infinite; }
.about-mvp__card .eyebrow { color: var(--color-accent); margin-bottom: 16px; }
.about-mvp__text { margin: 0; font-size: 18px; line-height: 1.55; color: var(--color-text); font-weight: 500; }

/* Stats — bigger, more punch */
.about-stats {
  padding: 100px 0;
  background: var(--color-surface-soft);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.about-stats:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 70%);
  pointer-events: none;
}
.about-stats__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.about-stat { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; border-left: 2px solid var(--color-accent); padding-left: 20px; }
.about-stat__number { font-size: clamp(48px, 5.5vw, 76px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--color-text); font-variant-numeric: tabular-nums; }
.about-stat__label { font-size: 14px; color: var(--color-muted); font-weight: 500; line-height: 1.4; }

/* Story */
.about-story h2 { margin: 14px 0 28px; font-size: clamp(32px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.about-story__text { font-size: 18px; line-height: 1.75; color: var(--color-text); }

/* Values — bento-style with stronger hover */
.about-values__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.about-value {
  position: relative;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  overflow: hidden;
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(.16,1,.3,1);
}
.about-value:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
.about-value > * { position: relative; z-index: 1; }
.about-value:hover { border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); box-shadow: 0 20px 60px rgba(0,0,0,.06); transform: translateY(-3px); }
.about-value:hover:after { opacity: 1; }
.about-value h3 { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
.about-value p { margin: 0; color: var(--color-muted); font-size: 15px; line-height: 1.6; }

/* Team — premium cards */
.about-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.team-member {
  padding: 28px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  text-align: center;
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(.16,1,.3,1);
}
.team-member:hover { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); box-shadow: 0 16px 48px rgba(0,0,0,.06); transform: translateY(-3px); }
.team-member__photo { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden; background: var(--color-surface-soft); position: relative; }
.team-member__photo:before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 50%, #000));
  z-index: -1;
  opacity: 0;
  transition: opacity 220ms ease;
}
.team-member:hover .team-member__photo:before { opacity: 1; }
.team-member__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-member__photo--placeholder { display: grid; place-items: center; background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, #000)); color: #fff; font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.team-member__name { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.team-member__role { margin: 0 0 14px; color: var(--color-muted); font-size: 13px; }
.team-member__socials { display: flex; justify-content: center; gap: 10px; }
.team-member__socials a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--color-surface-soft); color: var(--color-muted); transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
.team-member__socials a:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, white); transform: translateY(-2px); }

@media (max-width: 820px) {
  .about-mvp__grid { grid-template-columns: 1fr; }
  .about-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .about-values__grid { grid-template-columns: 1fr; }
  .about-team__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══ Academy ═══════════════════════════════════════════════════════════════ */

/* Hero & filters */
.academy-hero { padding: 100px 0 56px; }
.academy-hero h1 { margin: 12px 0 0; font-size: clamp(36px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.academy-hero__subtitle { margin: 18px auto 0; max-width: 580px; color: var(--color-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }
.academy-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; }
.academy-filter { padding: 8px 18px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-muted); cursor: pointer; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.academy-filter:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); }
.academy-filter.is-active { background: color-mix(in srgb, var(--color-accent) 10%, white); border-color: var(--color-accent); color: var(--color-text); }
.academy-empty { padding: 60px 24px; text-align: center; color: var(--color-muted); }
.academy-empty h3 { margin: 0 0 8px; color: var(--color-text); }

/* Featured courses (with rotating teal glow) */
.academy-featured { padding: 80px 0 40px; }
.academy-featured__head { margin-bottom: 36px; }
.academy-featured__head h2 { margin: 12px 0 0; font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -.02em; }
.academy-featured__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.academy-featured__grid.is-single { grid-template-columns: 1fr; max-width: 420px; }
.academy-featured__grid.is-two { grid-template-columns: 1fr 1fr; max-width: 820px; }
.course-card--featured {
  position: relative;
  overflow: visible !important;
  border-color: var(--color-accent);
  box-shadow: 0 24px 70px rgba(3,255,223,.18), 0 12px 30px rgba(3,255,223,.08);
  background:
    radial-gradient(circle at 50% 100%, rgba(3,255,223,.12), transparent 60%),
    radial-gradient(circle at 20% 0%, rgba(79,209,197,.08), transparent 50%),
    var(--color-surface);
}
.course-card--featured:before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  padding: 2px;
  background: conic-gradient(from var(--feat-glow-angle, 0deg),
    transparent 0deg,
    transparent 200deg,
    #4fd1c5 260deg,
    #03ffdf 290deg,
    #03ffdf 310deg,
    #4fd1c5 340deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  filter: drop-shadow(0 0 6px #03ffdf) drop-shadow(0 0 14px rgba(3,255,223,.55));
  animation: feat-glow-rotate 5s linear infinite;
}
/* Keep the inner image clipped so the rotating border still wraps the card cleanly */
.course-card--featured .course-card__inner {
  position: relative;
  overflow: hidden;
  border-radius: 21px;
  display: block;
  color: inherit;
}
.course-card__featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  background: linear-gradient(135deg, #03ffdf, var(--color-accent));
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-accent-text);
  box-shadow: 0 6px 18px rgba(3,255,223,.4);
  z-index: 3;
}
.academy-listing__head { margin-bottom: 32px; }
.academy-listing__head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.01em; }

@media (max-width: 980px) {
  .academy-featured__grid { grid-template-columns: 1fr 1fr; }
  .academy-featured__grid.is-two, .academy-featured__grid.is-single { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .academy-featured__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* Course cards */
.academy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.course-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 22px; overflow: hidden; transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(.16,1,.3,1); }
.course-card.is-hidden { display: none; }
.course-card:hover { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); box-shadow: 0 24px 60px rgba(0,0,0,.07); transform: translateY(-4px); }
.course-card__inner { display: block; color: inherit; }
.course-card__image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--color-surface-soft) 0%, color-mix(in srgb, var(--color-accent) 8%, white) 100%); }
.course-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; }
.course-card:hover .course-card__image img { transform: scale(1.04); }
.course-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; }
.course-card__placeholder span { font-size: 48px; font-weight: 800; color: var(--color-accent); letter-spacing: -.04em; }

/* Progress ring overlay on course thumbnail */
.course-card__progress-overlay { position: absolute; top: 12px; right: 12px; }
.course-card__progress-ring { position: relative; width: 56px; height: 56px; padding: 6px; background: var(--color-surface); border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.course-card__progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.course-card__progress-ring circle { fill: none; stroke-width: 3; }
.course-card__progress-ring .ring-bg { stroke: var(--color-surface-soft); }
.course-card__progress-ring .ring-fg { stroke: var(--color-accent); stroke-dasharray: 100 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset 600ms cubic-bezier(.16,1,.3,1); }
.course-card__progress-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }

.course-card__body { padding: 22px; }
.course-card__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.course-card__difficulty { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.course-card__difficulty--beginner { background: #dcfce7; color: #15803d; }
.course-card__difficulty--intermediate { background: #fef3c7; color: #b45309; }
.course-card__difficulty--advanced { background: #ede9fe; color: #6d28d9; }
.course-card__category { font-size: 12px; color: var(--color-muted); font-weight: 600; }
.course-card__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.course-card__excerpt { margin: 0 0 16px; color: var(--color-muted); font-size: 14px; line-height: 1.55; }
.course-card__footer { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-muted); font-weight: 500; }
.course-card__status { margin-left: auto; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--color-accent) 10%, white); color: var(--color-accent); font-weight: 700; font-size: 11px; }

/* Course hero (single) */
.course-hero { padding: 56px 0 48px; }
.course-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.course-hero__breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; color: var(--color-muted); }
.course-hero__breadcrumb a { color: var(--color-accent); font-weight: 600; }
.course-hero h1 { margin: 0; font-size: clamp(30px, 3.8vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.course-hero__description { margin: 18px 0 0; color: var(--color-muted); font-size: 17px; line-height: 1.6; }
.course-hero__stats { display: flex; gap: 28px; margin: 28px 0; padding: 20px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.course-stat { display: flex; flex-direction: column; gap: 4px; }
.course-stat__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.course-stat__value { font-size: 18px; font-weight: 800; color: var(--color-text); }
.course-hero__progress { margin-bottom: 24px; padding: 18px; background: color-mix(in srgb, var(--color-accent) 5%, white); border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border)); border-radius: 14px; }
.course-hero__progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.course-hero__progress-label { font-size: 13px; font-weight: 700; color: var(--color-text); }
.course-hero__progress-pct { font-size: 14px; font-weight: 800; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.course-hero__progress-bar { height: 8px; background: var(--color-surface); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.course-hero__progress-bar span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, #000)); border-radius: 999px; transition: width 600ms cubic-bezier(.16,1,.3,1); }
.course-hero__progress-detail { margin: 0; font-size: 12px; color: var(--color-muted); }
.course-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.course-hero__image { aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-soft); background: linear-gradient(135deg, var(--color-surface-soft), color-mix(in srgb, var(--color-accent) 8%, white)); }
.course-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.course-hero__image--placeholder { display: grid; place-items: center; }
.course-hero__image--placeholder span { font-size: 96px; font-weight: 800; color: var(--color-accent); letter-spacing: -.05em; }

/* Course outcomes */
.course-outcomes h2 { margin: 0 0 28px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em; }
.course-outcomes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.course-outcome { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--color-text); }
.course-outcome svg { flex-shrink: 0; margin-top: 2px; }

/* Curriculum */
.course-curriculum__head { margin-bottom: 28px; }
.course-curriculum__head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em; }
.course-curriculum__head p { margin: 6px 0 0; color: var(--color-muted); font-size: 14px; }

.lesson-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lesson-row { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.16,1,.3,1); }
.lesson-row:hover { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); box-shadow: 0 8px 24px rgba(0,0,0,.04); transform: translateX(2px); }
.lesson-row.is-completed { background: color-mix(in srgb, var(--color-accent) 4%, white); border-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-border)); }
.lesson-row__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 18px 22px; color: inherit; }
.lesson-row__index { position: relative; width: 36px; height: 36px; display: grid; place-items: center; }
.lesson-row__number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface-soft); font-size: 12px; font-weight: 800; color: var(--color-muted); font-variant-numeric: tabular-nums; transition: opacity 200ms ease; }
.lesson-row__check { position: absolute; inset: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent); color: #fff; opacity: 0; transform: scale(.7); transition: opacity 220ms ease, transform 320ms cubic-bezier(.16,1,.3,1); }
.lesson-row.is-completed .lesson-row__number { opacity: 0; }
.lesson-row.is-completed .lesson-row__check { opacity: 1; transform: scale(1); }
.lesson-row__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.lesson-row__excerpt { margin: 0; color: var(--color-muted); font-size: 13px; line-height: 1.4; }
.lesson-row__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--color-muted); white-space: nowrap; }

/* Instructor card */
.instructor-card { display: flex; align-items: center; gap: 20px; padding: 28px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; }
.instructor-card__avatar { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, #000)); color: #fff; font-size: 22px; font-weight: 800; }
.instructor-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.instructor-card h3 { margin: 4px 0; font-size: 18px; font-weight: 700; }
.instructor-card p { margin: 0; color: var(--color-muted); font-size: 14px; }

/* Lesson topbar (sticky) */
.lesson-topbar { position: sticky; top: var(--header-height); z-index: 40; background: rgba(251,251,247,.92); backdrop-filter: blur(18px); border-bottom: 1px solid var(--color-border); }
.lesson-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0; }
.lesson-topbar__back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--color-muted); transition: color 180ms ease; }
.lesson-topbar__back:hover { color: var(--color-text); }
.lesson-topbar__progress { display: flex; align-items: center; gap: 14px; min-width: 280px; }
.lesson-topbar__progress-label { font-size: 12px; font-weight: 600; color: var(--color-muted); white-space: nowrap; }
.lesson-topbar__progress-bar { flex: 1; height: 4px; background: var(--color-surface-soft); border-radius: 999px; overflow: hidden; }
.lesson-topbar__progress-bar span { display: block; height: 100%; width: 0%; background: var(--color-accent); border-radius: 999px; transition: width 500ms cubic-bezier(.16,1,.3,1); }

/* Lesson layout */
.lesson-content { padding: 48px 0 80px; }
.lesson-layout { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.lesson-layout--standalone { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.lesson-main__head { margin-bottom: 32px; max-width: 720px; }
.lesson-main__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 12px; color: var(--color-muted); }
.lesson-main__format { padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--color-accent) 10%, white); color: var(--color-text); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.lesson-main h1 { margin: 0; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.lesson-main__intro { margin: 16px 0 0; color: var(--color-muted); font-size: 17px; line-height: 1.6; }
.lesson-main__video { margin: 0 0 32px; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.lesson-main__video iframe { width: 100%; height: 100%; border: 0; }
.lesson-main__body { font-size: 16px; line-height: 1.75; color: var(--color-text); max-width: 720px; }
.lesson-main__body h2 { margin: 40px 0 14px; font-size: 24px; font-weight: 700; }
.lesson-main__body h3 { margin: 28px 0 10px; font-size: 18px; font-weight: 700; }
.lesson-main__body p { margin: 0 0 16px; }
.lesson-main__body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.lesson-main__body img { border-radius: 14px; margin: 24px 0; }

/* Lesson steps */
.lesson-steps { margin-top: 48px; max-width: 720px; }
.lesson-steps h2 { margin: 0 0 24px; font-size: 22px; font-weight: 700; }
.lesson-step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--color-border); }
.lesson-step:last-child { border-bottom: 0; padding-bottom: 0; }
.lesson-step__number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--color-accent) 10%, white); color: var(--color-accent); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lesson-step__body h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.lesson-step__body p { margin: 0 0 12px; color: var(--color-text); line-height: 1.65; }
.lesson-step__image { width: 100%; border-radius: 12px; margin-top: 8px; }

/* Lesson actions */
.lesson-actions { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-border); max-width: 720px; }
.lesson-complete-btn { width: 100%; justify-content: center; gap: 8px; }
.lesson-complete-btn__done { display: none; }
.lesson-complete-btn.is-complete { background: color-mix(in srgb, var(--color-accent) 18%, white); color: var(--color-accent); box-shadow: none; }
.lesson-complete-btn.is-complete .lesson-complete-btn__default { display: none; }
.lesson-complete-btn.is-complete .lesson-complete-btn__done { display: inline-flex; align-items: center; gap: 8px; }

.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.lesson-nav__link { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; color: inherit; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.16,1,.3,1); }
.lesson-nav__link:hover { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); box-shadow: 0 8px 24px rgba(0,0,0,.04); transform: translateY(-2px); }
.lesson-nav__link--prev { text-align: left; }
.lesson-nav__link--next { grid-column: 2; text-align: right; }
.lesson-nav__link--next div { margin-left: auto; }
.lesson-nav__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); font-weight: 700; margin-bottom: 4px; }
.lesson-nav__link strong { font-size: 14px; font-weight: 700; }

/* Lesson sidebar */
.lesson-sidebar { position: relative; }
.lesson-sidebar__sticky { position: sticky; top: calc(var(--header-height) + 80px); padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; max-height: calc(100vh - 140px); overflow-y: auto; }
.lesson-sidebar__eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.lesson-sidebar__title { margin: 0 0 18px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.lesson-sidebar__progress { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.lesson-sidebar__progress-bar { flex: 1; height: 6px; background: var(--color-surface-soft); border-radius: 999px; overflow: hidden; }
.lesson-sidebar__progress-bar span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, #000)); border-radius: 999px; transition: width 500ms cubic-bezier(.16,1,.3,1); }
.lesson-sidebar__progress [data-progress-text] { font-size: 12px; font-weight: 800; color: var(--color-accent); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.lesson-sidebar__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: lesson; }
.lesson-sidebar__item a { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--color-text); font-size: 13px; line-height: 1.4; transition: background 180ms ease; }
.lesson-sidebar__item a:hover { background: var(--color-surface-soft); }
.lesson-sidebar__item.is-current a { background: color-mix(in srgb, var(--color-accent) 10%, white); font-weight: 700; }
.lesson-sidebar__item.is-current .lesson-sidebar__check { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.lesson-sidebar__check { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--color-border); border-radius: 50%; color: transparent; transition: background 220ms ease, color 220ms ease, border-color 220ms ease; }
.lesson-sidebar__item.is-completed .lesson-sidebar__check { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.lesson-sidebar__item.is-completed .lesson-sidebar__item-title { color: var(--color-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-muted) 30%, transparent); }
.lesson-sidebar__item-duration { font-size: 11px; color: var(--color-muted); font-weight: 600; }

/* Course completion celebration */
.course-completion { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 280ms ease; }
.course-completion.is-open { opacity: 1; visibility: visible; }
.course-completion__backdrop { position: absolute; inset: 0; background: rgba(9,9,9,.55); backdrop-filter: blur(10px); cursor: pointer; }
.course-completion__inner { position: relative; padding: 56px 48px 44px; max-width: 480px; width: calc(100% - 48px); text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 24px; box-shadow: 0 40px 100px rgba(0,0,0,.25), 0 20px 60px rgba(3,255,223,.15); transform: scale(.94) translateY(8px); transition: transform 460ms cubic-bezier(.16,1,.3,1); }
.course-completion.is-open .course-completion__inner { transform: scale(1) translateY(0); }
.course-completion__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--color-surface-soft); display: grid; place-items: center; cursor: pointer; color: var(--color-muted); transition: background 180ms ease, color 180ms ease; }
.course-completion__close:hover { background: var(--color-border); color: var(--color-text); }
.course-completion__icon { margin: 0 auto 20px; width: 96px; height: 96px; position: relative; }
.course-completion__icon svg { width: 100%; height: 100%; filter: drop-shadow(0 0 24px rgba(79,209,197,.4)); }
.course-completion__check-path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: drawcheck 700ms cubic-bezier(.16,1,.3,1) 280ms forwards; }
.course-completion__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--color-accent); }
.course-completion h2 { margin: 0 0 14px; font-size: 36px; font-weight: 800; letter-spacing: -.025em; }
.course-completion__text { margin: 0 0 28px; color: var(--color-muted); font-size: 16px; line-height: 1.55; }
.course-completion__actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
@keyframes drawcheck { to { stroke-dashoffset: 0; } }

/* Lesson complete button pulse */
.lesson-complete-btn.is-pulsing { animation: btnpulse 700ms cubic-bezier(.16,1,.3,1); }
@keyframes btnpulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.04); box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-accent) 22%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 980px) {
  .academy-grid { grid-template-columns: repeat(2, 1fr); }
  .course-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-sidebar__sticky { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .academy-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .lesson-nav { grid-template-columns: 1fr; }
  .lesson-nav__link--next { grid-column: 1; }
  /* Course hero stats stack tighter on phones */
  .course-hero__stats { gap: 14px; flex-wrap: wrap; }
  .course-hero h1 { font-size: clamp(26px, 7vw, 36px); }
  .course-outcomes__grid { grid-template-columns: 1fr; }
  /* Lesson topbar — stack on phones */
  .lesson-topbar__inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 0; }
  .lesson-topbar__progress { min-width: 0; }
  .lesson-topbar__back { font-size: 12px; }
  /* Lesson sidebar nicely stacked below content */
  .lesson-layout { gap: 32px; }
  .lesson-sidebar__sticky { padding: 18px; }
  /* Lesson row layout for phones */
  .lesson-row__inner { grid-template-columns: 32px 1fr; gap: 14px; padding: 14px 16px; }
  .lesson-row__meta { grid-column: 2; padding-top: 4px; font-size: 11px; }
  .lesson-step { grid-template-columns: 36px 1fr; gap: 14px; }
}

/* ── Blog homepage ─────────────────────────────────────────────────────── */
.blog-hero {
  padding: 90px 0 48px;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 70%);
}
.blog-hero h1 { margin: 12px 0 0; font-size: clamp(36px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.blog-hero__subtitle { margin: 18px auto 0; max-width: 580px; color: var(--color-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }

/* Featured posts area — hero + 2 secondary */
.blog-featured { padding: 0 0 64px; }
.blog-featured__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.blog-featured__grid.is-hero-only { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }

.blog-hero-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 24px; overflow: hidden; transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(.16,1,.3,1); position: relative; }
.blog-hero-card:hover { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); box-shadow: 0 28px 80px rgba(0,0,0,.08); transform: translateY(-3px); }
.blog-hero-card__inner { display: grid; grid-template-rows: 1fr auto; height: 100%; color: inherit; }
.blog-hero-card__image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-soft); }
.blog-hero-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 360ms ease; }
.blog-hero-card:hover .blog-hero-card__image img { transform: scale(1.04); }
.blog-hero-card__badge {
  position: absolute; top: 16px; left: 16px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #03ffdf, var(--color-accent));
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-accent-text);
  box-shadow: 0 6px 18px rgba(3,255,223,.35);
}
.blog-hero-card__body { padding: 32px; }
.blog-hero-card__body .blog-card__meta { margin-bottom: 14px; }
.blog-hero-card__title { margin: 0 0 14px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.blog-hero-card__excerpt { margin: 0 0 20px; color: var(--color-muted); font-size: 15px; line-height: 1.6; }

.blog-featured__secondary { display: flex; flex-direction: column; gap: 20px; }
.blog-card--secondary { display: grid; }
.blog-card--secondary .blog-card__inner { display: grid; grid-template-columns: 160px 1fr; gap: 18px; padding: 0; align-items: stretch; }
.blog-card--secondary .blog-card__image { aspect-ratio: 1 / 1; margin: 0; border-radius: 0; height: 100%; }
.blog-card--secondary .blog-card__body { padding: 18px 22px 18px 0; display: flex; flex-direction: column; justify-content: center; }
.blog-card--secondary .blog-card__title { font-size: 16px; line-height: 1.3; margin: 0 0 8px; }
.blog-card--secondary .blog-card__excerpt { margin: 0; font-size: 13px; line-height: 1.5; }

@media (max-width: 980px) {
  .blog-featured__grid { grid-template-columns: 1fr; }
  .blog-featured__secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .blog-card--secondary .blog-card__inner { grid-template-columns: 120px 1fr; }
}
@media (max-width: 640px) {
  .blog-featured__secondary { grid-template-columns: 1fr; }
}

/* Blog filters (link-style, replaces button-based filters from before) */
.blog-filters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 40px; }
.blog-filter { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--color-muted); transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.blog-filter:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); }
.blog-filter.is-active { background: color-mix(in srgb, var(--color-accent) 10%, white); border-color: var(--color-accent); color: var(--color-text); }

/* ── Blog listing & single ─────────────────────────────────────────────── */
.blog-hero h1 { margin: 12px 0 0; font-size: clamp(36px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.blog-hero__subtitle { margin: 18px auto 0; max-width: 580px; color: var(--color-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(.16,1,.3,1); }
.blog-card:hover { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); box-shadow: 0 20px 60px rgba(0,0,0,.07); transform: translateY(-3px); }
.blog-card__inner { display: block; color: inherit; }
.blog-card__image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-soft); }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; }
.blog-card:hover .blog-card__image img { transform: scale(1.04); }
.blog-card__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-surface-soft) 0%, color-mix(in srgb, var(--color-accent) 8%, white) 100%); }
.blog-card__body { padding: 22px; }
.blog-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; color: var(--color-muted); }
.blog-card__category { padding: 3px 8px; border-radius: 6px; background: var(--color-surface-soft); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text); }
.blog-card__read-time { font-weight: 500; }
.blog-card__title { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.blog-card__excerpt { margin: 0 0 16px; color: var(--color-muted); font-size: 14px; line-height: 1.55; }
.blog-card__footer { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-muted); }

.blog-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--color-muted); transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.blog-pagination .page-numbers:hover { color: var(--color-text); border-color: var(--color-accent); }
.blog-pagination .page-numbers.current { background: var(--color-accent); color: var(--color-accent-text); border-color: var(--color-accent); }

.single-hero { padding: 80px 0 32px; }
.single-hero__meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--color-muted); margin-bottom: 20px; }
.single-hero__category { padding: 4px 10px; border-radius: 6px; background: color-mix(in srgb, var(--color-accent) 10%, white); border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border)); color: var(--color-text); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.single-hero__title { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.single-hero__excerpt { margin: 18px 0 0; color: var(--color-muted); font-size: 18px; line-height: 1.6; font-weight: 500; }
.single-hero__author { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.single-hero__author-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, #000)); color: #fff; font-size: 12px; font-weight: 800; }
.single-hero__author strong { display: block; font-size: 14px; }
.single-hero__author span { display: block; font-size: 12px; color: var(--color-muted); }

.single-post__image { margin: 0 0 48px; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-surface-soft); }
.single-post__image img { width: 100%; height: 100%; object-fit: cover; }

.single-content { padding: 0 0 80px; }
.single-content__body { font-size: 17px; line-height: 1.75; color: var(--color-text); }
.single-content__body h2 { margin: 48px 0 14px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.single-content__body h3 { margin: 36px 0 12px; font-size: 22px; font-weight: 700; }
.single-content__body p { margin: 0 0 20px; }
.single-content__body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.single-content__body ul, .single-content__body ol { margin: 0 0 20px; padding-left: 24px; }
.single-content__body li { margin-bottom: 8px; }
.single-content__body blockquote { margin: 32px 0; padding: 20px 28px; border-left: 3px solid var(--color-accent); background: var(--color-surface-soft); border-radius: 0 14px 14px 0; font-size: 18px; line-height: 1.6; }
.single-content__body img { border-radius: 14px; margin: 28px 0; }
.single-content__body code { background: var(--color-surface-soft); padding: 2px 6px; border-radius: 4px; font-size: 14px; font-family: 'Geist Mono', monospace; }
.single-content__body pre { background: var(--color-surface-soft); padding: 18px; border-radius: 14px; overflow-x: auto; margin: 24px 0; }

.single-related { padding: 80px 0; }

@media (max-width: 820px) {
  .blog-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ── FAQ page ──────────────────────────────────────────────────────────── */
.faq-page-hero { padding: 100px 0 56px; }
.faq-page-hero h1 { margin: 12px 0 0; font-size: clamp(36px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.faq-page-hero__subtitle { margin: 18px auto 0; max-width: 580px; color: var(--color-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 32px; }
.faq-tab { padding: 10px 20px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-muted); cursor: pointer; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.faq-tab:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); }
.faq-tab.is-active { background: color-mix(in srgb, var(--color-accent) 10%, white); border-color: var(--color-accent); color: var(--color-text); }
.faq-panel { display: none; }
.faq-panel.is-active { display: block; }
.faq-page-cta { padding: 60px 0 100px; }

/* ── Legal pages ───────────────────────────────────────────────────────── */
.legal-hero { padding: 100px 0 56px; }
.legal-hero h1 { margin: 12px 0 0; font-size: clamp(36px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.legal-hero__subtitle { margin: 18px 0 0; max-width: 580px; color: var(--color-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }
.legal-content { padding: 60px 0; }
.legal-content__body { font-size: 16px; line-height: 1.75; color: var(--color-text); }
.legal-content__body h2 { margin: 40px 0 14px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.legal-content__body h2:first-child { margin-top: 0; }
.legal-content__body h3 { margin: 28px 0 10px; font-size: 18px; font-weight: 700; }
.legal-content__body p { margin: 0 0 16px; }
.legal-content__body ul, .legal-content__body ol { margin: 0 0 16px; padding-left: 22px; }
.legal-content__body li { margin-bottom: 6px; }
.legal-content__body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-contact { padding-bottom: 80px; }

.content-body { font-size: 18px; line-height: 1.75; color: #252520; }
.single-post-image { margin: 34px 0; border-radius: 22px; overflow: hidden; }

@media (max-width: 980px) {
  /* Mobile menu toggle button */
  .mobile-menu-toggle { display: inline-flex; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--color-surface-soft); align-items: center; justify-content: center; flex-direction: column; gap: 6px; cursor: pointer; }
  .mobile-menu-toggle span { width: 20px; height: 2px; background: var(--color-text); transition: transform 200ms ease; border-radius: 2px; }
  body.menu-open .mobile-menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  body.menu-open .mobile-menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

  /* Hide desktop nav + actions; the nav reappears as the drawer when open */
  .primary-navigation, .header-actions { display: none; }

  /* Solid header while the drawer is open so nothing shows through the blur */
  body.menu-open .site-header {
    background: var(--color-bg);
    border-bottom-color: var(--color-border);
  }

  /* The drawer is ABSOLUTE, not fixed: .site-header's backdrop-filter makes
     the header the containing block for fixed descendants, so fixed
     top/bottom would resolve against the 68px header box and collapse the
     drawer to a sliver. The header is sticky at the viewport top, so
     absolute + top:100% + explicit height gives a true full-height panel. */
  body.menu-open .primary-navigation {
    display: block;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    padding: 10px 20px calc(28px + env(safe-area-inset-bottom));
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: clicc-drawer-in 260ms cubic-bezier(.16, 1, .3, 1);
  }

  body.menu-open .primary-menu {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  body.menu-open .primary-menu > li {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }
  body.menu-open .primary-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 4px 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
  }
  body.menu-open .has-mega-menu > a:after {
    content: "+";
    margin-left: auto;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    font-size: 22px; font-weight: 300; color: var(--color-muted);
    transition: transform 220ms ease;
  }
  body.menu-open .has-mega-menu.is-expanded > a:after { transform: rotate(45deg); color: var(--color-accent); }

  /* Mega-menus become inline accordion items inside the drawer */
  body.menu-open .mega-menu {
    position: static !important;
    transform: none !important;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    overflow: hidden;
    transition: max-height 280ms cubic-bezier(.16,1,.3,1), opacity 200ms ease, padding 280ms ease;
    pointer-events: none;
  }
  body.menu-open .has-mega-menu.is-expanded > .mega-menu {
    max-height: 800px;
    opacity: 1;
    visibility: visible;
    padding: 4px 0 14px;
    pointer-events: auto;
  }
  body.menu-open .mega-menu-inner { display: flex !important; flex-direction: column; gap: 0; padding: 0; }
  body.menu-open .mega-group { flex: none; min-width: 0; max-width: none; padding: 0 !important; border-left: 0 !important; }
  body.menu-open .mega-group + .mega-group { border-left: 0 !important; }
  body.menu-open .mega-group__heading { margin: 12px 0 2px 8px; font-size: 11px; }
  body.menu-open .mega-group__items { display: flex !important; flex-direction: column; gap: 0; }
  body.menu-open .mega-menu-item {
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    gap: 12px;
    padding: 10px 0 10px 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  body.menu-open .mega-menu-item:hover { transform: none; background: transparent; }
  body.menu-open .mega-menu-item strong { font-size: 14px; font-weight: 600; margin: 0; }
  body.menu-open .mega-menu-item small { display: none; }
  body.menu-open .mega-menu-icon {
    width: 28px; height: 28px;
    background: var(--color-surface-soft);
    border-radius: 8px;
    flex-shrink: 0;
  }
  body.menu-open .mega-menu-icon svg { width: 16px; height: 16px; }
  body.menu-open .mega-feature { display: none !important; }

  /* Sign in + CTA sit inline at the end of the menu, NOT pinned. */
  body.menu-open .drawer-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 24px;
  }
  body.menu-open .drawer-actions__cta {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 16px;
  }
  body.menu-open .drawer-actions__signin {
    text-align: center;
    padding: 12px 0;
    font-weight: 600;
    color: var(--color-muted);
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  @keyframes clicc-drawer-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }

  /* Section padding tightens on mobile */
  .hero { padding-top: 36px; }
  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: clamp(28px, 8vw, 42px); }
  .hero-actions { display: grid; width: 100%; }
  .hero-actions > * { min-height: 48px; }
  .hero-product { margin-top: 28px; }
  .hero-product__viewport { border-radius: 20px; }
  .pricing-card.is-highlighted { transform: none; }
  .section { padding: 76px 0; }
  .section-heading.row { display: grid; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-newsletter { grid-column: 1 / -1; }
}

/* ── Process section ────────────────────────────────────────────────────── */
.process-header { max-width: 680px; margin-bottom: 52px; }
.process-header h2 { margin: 12px 0 0; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.process-steps { display: flex; align-items: stretch; gap: 0; }
.process-step { flex: 1; padding: 28px; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); position: relative; display: flex; flex-direction: column; }
.process-step__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--color-accent) 10%, white); color: var(--color-accent); margin-bottom: 18px; }
.process-step__number { position: absolute; top: 20px; right: 22px; font-size: 11px; font-weight: 800; color: var(--color-muted); letter-spacing: .06em; }
.process-step h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.process-step p { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.6; flex: 1; }
.process-connector { display: flex; align-items: center; padding: 0 8px; align-self: center; }
@media (max-width: 820px) {
  .process-steps { flex-direction: column; gap: 16px; }
  .process-connector { transform: rotate(90deg); padding: 4px 0; }
}

/* ── Personas section ──────────────────────────────────────────────────── */
.personas-header { max-width: 680px; margin-bottom: 44px; }
.personas-header h2 { margin: 12px 0 0; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.personas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.persona-card { padding: 28px; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); transition: transform 240ms cubic-bezier(.16,1,.3,1), box-shadow 240ms ease, border-color 200ms ease; }
.persona-card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,.06); border-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-border)); }
.persona-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--color-accent) 10%, white); color: var(--color-accent); margin-bottom: 18px; }
.persona-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
.persona-card p { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 900px) {
  .personas-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .personas-grid { grid-template-columns: 1fr; }
}

/* ── Comparison section ────────────────────────────────────────────────── */
.comparison-header { max-width: 680px; margin-bottom: 44px; }
.comparison-header h2 { margin: 12px 0 0; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.comparison-col { padding: 32px; border-radius: 20px; border: 1px solid var(--color-border); }
.comparison-col--without { background: var(--color-surface); }
.comparison-col--with { background: color-mix(in srgb, var(--color-accent) 4%, white); border-color: color-mix(in srgb, var(--color-accent) 20%, var(--color-border)); }
.comparison-col__head { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; font-size: 15px; font-weight: 700; }
.comparison-col--without .comparison-col__head { color: var(--color-muted); }
.comparison-col--with .comparison-col__head { color: var(--color-text); }
.comparison-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.comparison-col li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.55; color: var(--color-text); }
.comparison-col--without li { color: var(--color-muted); }
.comparison-col--without li:before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface-soft); border: 1.5px solid var(--color-border); }
.comparison-col--with li:before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 15%, white); border: 1.5px solid var(--color-accent); }
@media (max-width: 700px) {
  .comparison-grid { grid-template-columns: 1fr; }
}

/* ── Pricing section ─────────────────────────────────────────────────────── */
.pricing-section { padding: 110px 0 120px; }
.pricing-section__intro { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.pricing-section__intro h2 { margin: 12px 0 0; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; }

/* Spend chips */
.spend-chips { margin: 0 0 44px; }
.spend-chips__label { display: block; margin-bottom: 16px; color: var(--color-muted); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.spend-chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.spend-chip {
  background: var(--color-surface); border: 1px solid var(--color-border);
  padding: 10px 20px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--color-muted); cursor: pointer; white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.spend-chip:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); }
.spend-chip.is-active {
  background: color-mix(in srgb, var(--color-accent) 10%, white);
  border-color: var(--color-accent);
  color: var(--color-text); font-weight: 700;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* Billing toggle */
.pricing-section__controls { display: flex; flex-direction: column; align-items: center; }
.billing-toggle {
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  margin: 0 0 32px;
}
.spend-chips { text-align: center; }
.spend-chips__row { justify-content: center; }
.billing-toggle__option {
  background: transparent; border: 0;
  padding: 10px 20px;
  border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.billing-toggle__option:hover { color: var(--color-text); }
.billing-toggle__option.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: 0 2px 8px rgba(8,8,8,.06); }
.billing-toggle__discount { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent-text); font-size: 11px; font-weight: 700; letter-spacing: .02em; }

/* Pricing cards grid */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }

.pricing-card {
  position: relative;
  padding: 32px 28px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  display: flex; flex-direction: column;
  transition: border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
  overflow: hidden;
}
.pricing-card.is-recommended {
  border-color: var(--color-accent);
  overflow: visible;
  background:
    radial-gradient(circle at 50% 100%, rgba(3,255,223,.12), transparent 60%),
    radial-gradient(circle at 20% 0%, rgba(79,209,197,.08), transparent 50%),
    var(--color-surface);
  box-shadow: 0 24px 70px rgba(3,255,223,.18), 0 12px 30px rgba(3,255,223,.08);
}
.pricing-card.is-recommended:before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  padding: 2px;
  background: conic-gradient(from var(--feat-glow-angle, 0deg),
    transparent 0deg,
    transparent 200deg,
    #4fd1c5 260deg,
    #03ffdf 290deg,
    #03ffdf 310deg,
    #4fd1c5 340deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  filter: drop-shadow(0 0 6px #03ffdf) drop-shadow(0 0 14px rgba(3,255,223,.55));
  animation: feat-glow-rotate 5s linear infinite;
}
.pricing-card.is-unavailable { opacity: .55; }
.pricing-card.is-coming-soon .pricing-card__cta { background: var(--color-surface-soft); color: var(--color-muted); pointer-events: none; }
.pricing-card.is-unavailable .pricing-card__cta { background: var(--color-surface-soft); color: var(--color-muted); pointer-events: none; }

.pricing-card__badge {
  position: absolute; top: 18px; right: 22px;
  padding: 5px 12px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px;
  transition: opacity 180ms ease;
}
.pricing-card__badge[hidden] { display: none; }

.pricing-card__head { margin-bottom: 24px; }
.pricing-card__title { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.pricing-card__desc { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 1.5; }

.pricing-card__price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.pricing-card__price-currency { font-size: 24px; font-weight: 600; color: var(--color-muted); align-self: flex-start; margin-top: 8px; }
.pricing-card__price-amount { font-size: 48px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--color-text); transition: opacity 180ms ease; }
.pricing-card__price-period { font-size: 16px; color: var(--color-muted); font-weight: 500; }
.pricing-card__price-coming { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--color-muted); }
.pricing-card__price-custom { font-size: 36px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--color-text); }

.pricing-card__billed { margin: 0 0 18px; color: var(--color-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pricing-card__billed[hidden] { display: none; }

.pricing-card__features { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pricing-card__features li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: var(--color-text); }
.pricing-card__features li:before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6L5 8.5L9.5 4' stroke='%23090909' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat; }

.pricing-card__cta { margin-top: 8px; width: 100%; text-align: center; justify-content: center; }
.pricing-card__reassurance { margin: 12px 0 0; color: var(--color-muted); font-size: 12px; text-align: center; }

.pricing-card__unavailable-banner {
  display: none;
  position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%);
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  color: var(--color-muted);
  font-size: 13px; font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 24px rgba(8,8,8,.08);
}
.pricing-card.is-unavailable .pricing-card__unavailable-banner { display: block; }

/* Compact-mode "Compare plans" CTA (shown on homepage) */
.pricing-compare-cta { display: flex; justify-content: center; margin-top: 36px; }

/* Pricing page hero */
.pricing-page-hero {
  padding: 90px 0 32px;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 70%);
}
.pricing-page-hero h1 { margin: 12px 0 0; font-size: clamp(36px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pricing-page-hero__subtitle { margin: 18px auto 0; max-width: 580px; color: var(--color-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }
.pricing-page-cta { padding: 60px 0 100px; }
/* When the pricing section sits inside the dedicated page, drop its own intro since the page hero does that job */
.pricing-page-hero + .pricing-section .pricing-section__intro { display: none; }
.pricing-page-hero + .pricing-section { padding-top: 24px; }

/* Comparison table */
.pricing-compare { margin-top: 80px; }
.pricing-compare__head { text-align: center; margin-bottom: 36px; }
.pricing-compare__head h3 { margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.02em; }
.pricing-compare__head p { margin: 0; color: var(--color-muted); font-size: 15px; }
.pricing-compare__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pricing-compare__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pricing-compare__table thead { position: sticky; top: var(--header-height); z-index: 2; }
.pricing-compare__table thead th { padding: 14px 16px; background: var(--color-bg); font-size: 15px; font-weight: 700; text-align: center; border-bottom: 2px solid var(--color-border); }
.pricing-compare__feature-col { text-align: left !important; width: 40%; }
.pricing-compare__plan-col { width: 20%; }
.pricing-compare__category td { padding: 20px 16px 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); }
.pricing-compare__table tbody tr:not(.pricing-compare__category) td { padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.pricing-compare__table tbody tr:not(.pricing-compare__category):hover td { background: color-mix(in srgb, var(--color-accent) 3%, white); }
.pricing-compare__feature { color: var(--color-text); font-weight: 500; }
.pricing-compare__cell { text-align: center; }
.pricing-compare__check { display: inline-block; vertical-align: middle; }
.pricing-compare__dash { color: var(--color-border); font-size: 16px; }
.pricing-compare__text { color: var(--color-muted); font-size: 13px; font-weight: 600; }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* Stacked-card comparison view on mobile (≤ 640px) */
/* ── Universal mobile hardening ──────────────────────────────────────────
   Apply across every section once viewport drops to phone size.
   Touch targets ≥ 44px, no horizontal scroll, no iOS form zoom. */
@media (max-width: 640px) {
  /* Stop horizontal page scroll caused by oversized children */
  html, body { overflow-x: hidden; }
  .container { width: calc(100% - 32px); }
  .container.narrow { width: calc(100% - 32px); }

  /* Buttons hit minimum touch target */
  .button { min-height: 48px; padding: 0 22px; font-size: 14px; }
  .button-small { min-height: 40px; padding: 0 16px; }

  /* Inputs default to 16px to prevent iOS zoom on focus */
  input[type="text"], input[type="email"], input[type="url"], input[type="number"],
  input[type="tel"], input[type="search"], input[type="password"], textarea, select {
    font-size: 16px !important;
  }

  /* Hero, headings & body type tighter on mobile */
  .hero h1 { font-size: clamp(28px, 9vw, 40px); line-height: 1.08; }
  .hero-text { font-size: 15px; }
  .section { padding: 64px 0; }

  /* Contact modal sized for the viewport */
  .modal__content { padding: 32px 24px 28px; max-width: calc(100% - 24px); border-radius: 18px; }
  .contact-form__row { grid-template-columns: 1fr !important; }
  .modal__content h2 { font-size: 22px; }

  /* Pricing chips wrap nicely */
  .spend-chips__row { gap: 6px; }
  .spend-chip { padding: 8px 14px; font-size: 13px; }

  /* Billing toggle stays touch-friendly */
  .billing-toggle__option { padding: 10px 16px; min-height: 44px; }
}

@media (max-width: 640px) {
  .pricing-compare__table-wrap { overflow: visible; }
  .pricing-compare__table { display: block; min-width: 0; }
  .pricing-compare__table thead { display: none; }
  .pricing-compare__table tbody { display: block; margin-bottom: 14px; }
  .pricing-compare__table tr { display: block; }
  .pricing-compare__category td {
    display: block;
    padding: 14px 16px;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin: 4px 0 8px;
    font-size: 12px;
    color: var(--color-text);
  }
  .pricing-compare__table tbody tr:not(.pricing-compare__category) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 8px;
    padding: 14px 16px;
  }
  .pricing-compare__table tbody tr:not(.pricing-compare__category) td { padding: 0; border: 0; }
  .pricing-compare__feature {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 10px;
  }
  .pricing-compare__cell {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 !important;
    text-align: left !important;
    font-size: 13px;
    border-top: 1px solid var(--color-border) !important;
  }
  .pricing-compare__cell:before {
    content: attr(data-plan);
    color: var(--color-muted);
    font-weight: 600;
    font-size: 13px;
  }
  .pricing-compare__cell:first-of-type { border-top: 0 !important; padding-top: 0 !important; }
  .pricing-compare__check { width: 20px; height: 20px; }
  .pricing-compare__dash { color: var(--color-border); }
  .pricing-compare__head h3 { font-size: 22px; }
}

/* ── Hero motion system (GSAP layer) ─────────────────────────────────── */
.hm-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.hm-wi { display: inline-block; will-change: transform; }
/* word wrappers must NOT inherit the accent-span styling from `.hero h1 span` */
.hero h1 .hm-w, .hero h1 .hm-wi { color: inherit; font-weight: inherit; }
.hero h1 .hm-w--accent, .hero h1 .hm-w--accent .hm-wi { color: var(--color-muted); font-weight: 500; }

.hero-product__viewport .feat-scene--client-dashboard .float { transform: translateZ(85px); }
.hero-product__viewport { transition: box-shadow .55s cubic-bezier(.16,1,.3,1); }
.hero-product:hover .hero-product__viewport { box-shadow: 0 70px 150px -60px rgba(15,23,42,.5), 0 34px 90px -48px rgba(20,184,166,.42); }

.hero-glare {
  position: absolute; inset: -2% -30%; z-index: 60; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 62%);
}

.hero-aurora { position: absolute; inset: -12% -8%; z-index: 0; pointer-events: none; }
.hero-aurora::before, .hero-aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  animation: aurora-drift 16s ease-in-out infinite alternate;
}
.hero-aurora::before {
  width: 60%; height: 78%; left: -2%; top: -2%;
  background: radial-gradient(ellipse closest-side, rgba(79,209,197,.34), rgba(79,209,197,.12) 45%, transparent 72%);
}
.hero-aurora::after {
  width: 54%; height: 72%; right: -4%; bottom: -8%;
  background: radial-gradient(ellipse closest-side, rgba(251,211,141,.28), rgba(251,211,141,.10) 45%, transparent 72%);
  animation-delay: -8s;
}
@keyframes aurora-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(6%, 10%) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aurora::before, .hero-aurora::after { animation: none; }
}

/* Legal document tables + footer privacy links */
.legal-content__body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.legal-content__body th, .legal-content__body td { border: 1px solid var(--color-border); padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.5; }
.legal-content__body th { background: var(--color-surface-soft); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.legal-content__body table { display: block; overflow-x: auto; }
.legal-content__body h2 { margin: 40px 0 14px; }
.legal-content__body blockquote { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--color-accent); background: var(--color-surface-soft); border-radius: 8px; }
.footer-privacy-links { margin-top: 6px !important; }
.footer-privacy-links a { color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-privacy-links a:hover { color: var(--color-text); }
.footer-privacy-links span { margin: 0 8px; color: var(--color-border); }