/* ==========================================================================
   FC AutoBuyer website styles
   Mobile-first. Breakpoints match the original: tablet >= 810px, desktop >= 1200px.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin) ---------- */
@font-face { font-family: "Geist"; src: url("assets/fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/fonts/geist-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/fonts/geist-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --bg: #07080b;
  --surface: #0e1016;
  --surface-2: #161a23;
  --surface-hover: #1d2230;
  --line: #232836;
  --line-soft: rgba(255, 255, 255, .08);
  --fill-soft: rgba(255, 255, 255, .04);
  --text: #f3f6fb;
  --text-2: #9ba4b4;
  --text-3: #646d7e;
  --accent: #c8ff2e;
  --accent-2: #efff9e;
  --accent-press: #8cc800;
  --on-accent: #0b0f14;   /* text on lime */
  --accent-tint: rgba(200, 255, 46, .16);
  --accent-line: rgba(200, 255, 46, .24);
  --cyan: #efff9e;
  --dot: #3a4152;
  --nav-bg: rgba(11, 13, 19, .72);

  /* Type families */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale (phone values; overridden at the breakpoints below) */
  --fs-display: 38px;   /* hero h1 */
  --fs-h2: 31px;        /* section titles */
  --fs-h3: 24px;        /* step titles */
  --fs-h4: 19px;        /* card titles, quotes */
  --fs-lead: 17px;      /* large body */
  --fs-body: 15px;      /* card body */
  --fs-small: 14px;
  --fs-mono: 12px;
  --fs-metric: 36px;

  /* Radii */
  --r-pill: 100px;
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 30px;

  /* Shadows */
  --shadow-app: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-card: 0 30px 70px rgba(0, 0, 0, .5);
  --shadow-hover: 0 24px 50px rgba(0, 0, 0, .45);
  --shadow-btn: 0 12px 34px rgba(200, 255, 46, .42);

  /* Layout */
  --max: 1200px;
  --max-narrow: 1160px;
  --gutter: 18px;

  /* Motion (springy ease, bounce ~0.22) */
  --spring: linear(0, .0463, .1552, .292, .4339, .5667, .6828, .7789, .8551, .9128, .9546, .9834, 1.002, 1.0129, 1.0182, 1.0199, 1.0192, 1.0171, 1.0145, 1.0116, 1.0089, 1.0066, 1.0046, 1.0031, 1);
  --ease-io: cubic-bezier(.42, 0, .58, 1);
  --ease-link: cubic-bezier(.44, 0, .56, 1);
}

@supports not (transition-timing-function: linear(0, 1)) {
  :root { --spring: cubic-bezier(.22, 1.1, .36, 1); }
}

@media (min-width: 810px) {
  :root {
    --fs-display: 54px; --fs-h2: 42px; --fs-h3: 28px; --fs-h4: 20px;
    --fs-lead: 18px; --fs-body: 16px; --fs-metric: 44px;
    --gutter: 24px;
  }
}
@media (min-width: 1200px) {
  :root {
    --fs-display: 78px; --fs-h2: 54px; --fs-h3: 34px; --fs-h4: 22px;
    --fs-lead: 19px; --fs-metric: 56px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Same OpenType features the original applies to all Geist text */
  font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11";
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
/* Long words can break anywhere; matching it keeps narrow layouts identical */
:is(h1, h2, h3, h4, p, blockquote, figcaption, time):not([data-split]) { word-break: break-word; overflow-wrap: break-word; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; flex: none; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type styles ---------- */
.display, .h2, .h3, .lead { text-wrap: balance; }
.display {
  font-size: var(--fs-display); font-weight: 700; line-height: .98; letter-spacing: -.04em;
  text-align: center;
}
.h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.05; letter-spacing: -.032em; }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.15; letter-spacing: -.024em; }
.h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.016em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; letter-spacing: -.012em; color: var(--text-2); }
.body { font-size: var(--fs-body); line-height: 1.62; letter-spacing: -.008em; color: var(--text-2); }
.small { font-size: var(--fs-small); line-height: 1.5; letter-spacing: -.005em; color: var(--text-3); }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; line-height: 1.2; letter-spacing: .02em; color: var(--text-2); }
.eyebrow-text {
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}

/* ---------- Icons ---------- */
.icon { width: 15px; height: 15px; stroke-width: 2; }
.icon--muted { color: var(--text-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 21px 12px 23px; /* +1px border = 13/22/13/24 overall */
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em;
  white-space: nowrap;
  transition: background-color .4s var(--spring), border-color .4s var(--spring), box-shadow .4s var(--spring), opacity .2s;
}
.btn--primary { background: var(--accent); color: var(--on-accent); border-width: 0; padding: 13px 22px 13px 24px; }
.btn--primary:hover { background: var(--accent-2); box-shadow: var(--shadow-btn); }
.btn--primary:active { background: var(--accent-press); box-shadow: none; opacity: .92; }
.btn--ghost { border-color: var(--line-soft); color: var(--text); }
.btn--ghost:hover { background: rgba(255, 255, 255, .06); }
.btn--ghost:active { background: rgba(255, 255, 255, .03); opacity: .92; }
.btn--secondary { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.btn--secondary:hover { background: var(--surface-hover); border-color: var(--accent); }
.btn--secondary:active { background: #12161f; opacity: .92; }

/* ---------- Pills, eyebrows, tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; line-height: 1.2; letter-spacing: .02em;
}
.pill .icon { width: 13px; height: 13px; color: var(--accent-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 13px 6px 11px;
  border: 1px solid rgba(200, 255, 46, .28); border-radius: var(--r-pill);
  background: var(--accent-tint);
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2);
}
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }

.tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  background: var(--fill-soft);
  font-family: "Inter", var(--font-sans); font-size: 16px; line-height: 1.2; color: var(--text);
  font-feature-settings: normal;
}

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark {
  display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: var(--r-sm);
  background: linear-gradient(140deg, var(--cyan) 0%, var(--accent) 100%);
  overflow: hidden;
}
.brand__mark span {
  width: 14px; height: 14px; border-radius: 3px; background: var(--bg);
  transform: rotate(45deg);
  animation: mark-spin 9s var(--ease-io) infinite;
}
.brand__name { font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: -.025em; }
@keyframes mark-spin { to { transform: rotate(405deg); } }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 12px 14px 0;
}
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max); margin: 0 auto;
  padding: 9px 9px 9px 17px;
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.nav-links, .nav-actions { display: none; }
.nav-links { gap: 30px; }
.nav-links a, .footer-col a {
  font-size: 14px; line-height: 1.5; letter-spacing: -.005em; color: var(--text-2);
  transition: color .25s var(--ease-link);
}
.nav-links a:hover, .footer-col a:hover { color: var(--text); }
.nav-actions { gap: 10px; align-items: center; }

.menu-toggle {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}
.menu-toggle span {
  position: absolute; left: 13px; width: 16px; height: 2px; border-radius: 2px; background: var(--text);
  transition: transform .4s var(--spring), top .4s var(--spring);
}
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 24px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 20px; transform: rotate(-45deg); }

.mobile-menu {
  margin-top: 10px; padding: 17px 17px 19px;
  border: 1px solid var(--line-soft); border-radius: 24px;
  background: rgba(11, 13, 19, .94);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  animation: menu-in .35s var(--spring);
}
.mobile-menu ul { display: grid; gap: 4px; }
.mobile-menu a {
  display: block; padding: 13px 12px; border-radius: 12px;
  font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.016em;
  transition: background-color .2s;
}
.mobile-menu a:hover { background: var(--fill-soft); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

@media (min-width: 810px) {
  .site-header { padding: 16px 20px 0; }
  .navbar { padding: 11px 11px 11px 21px; }
  .nav-links, .nav-actions { display: flex; }
  .nav-links { gap: 22px; }
  .nav-signin, .menu-toggle, .mobile-menu { display: none; }
}
@media (min-width: 1200px) {
  .site-header { padding: 18px 24px 0; }
  .nav-links { gap: 30px; }
  .nav-signin { display: inline-flex; }
}

/* ==========================================================================
   Shared section layout
   ========================================================================== */
.section {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sec-gap, 40px);
  padding: var(--sec-pad, 70px var(--gutter));
}
.section--raised { background: var(--surface); box-shadow: inset 0 1px var(--line), inset 0 -1px var(--line); } /* hairlines that take no space, as in the original */

.section-head {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  width: 100%; max-width: var(--head-w, 760px); text-align: center;
}
.section-head--narrow { --head-w: 720px; }
.section-head--left { align-items: flex-start; --head-w: 560px; text-align: left; }

/* Decorative blurred glows */
.glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 44px;
  padding: 90px 18px 70px;
  overflow: clip;
}
.hero__backdrop {
  position: absolute; inset: 0 0 auto; height: 560px; z-index: 0;
  opacity: .5; overflow: hidden;
  /* Static fallback shown until WebGL draws (and when it can't) */
  background: url("assets/images/hero-waves-phone.png") center / cover no-repeat;
}
.hero__backdrop.is-live { background: none; }
.hero__waves { display: block; width: 100%; height: 100%; }

.glow--hero-a {
  width: 380px; height: 380px; top: 60px; left: -110px;
  background: radial-gradient(50% 50%, rgba(200, 255, 46, .32) 0%, rgba(200, 255, 46, 0) 68%);
  filter: blur(20px);
}
.glow--hero-b {
  width: 400px; height: 400px; top: 180px; right: -130px;
  background: radial-gradient(50% 50%, rgba(140, 200, 0, .22) 0%, rgba(140, 200, 0, 0) 68%);
  filter: blur(20px);
}

.hero__copy {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  width: 100%; max-width: 360px;
}
.hero__copy .pill span { color: var(--text); }
.hero__sub { max-width: 620px; text-align: center; }
.hero__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.hero__trust { color: var(--text-3); text-align: center; }
.hide-phone { display: none; }

/* App mockup */
.hero__scene {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  width: 100%; max-width: var(--max);
}
.hero__tilt { width: 100%; max-width: 1040px; transform-origin: 50% 20%; }
.app {
  overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-app);
}
.app__titlebar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.app__dots { display: flex; gap: 7px; }
.app__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.app__crumb {
  display: none;
  padding: 5px 11px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--fill-soft);
}
.live {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  padding: 5px 11px 5px 9px; border-radius: var(--r-pill);
  background: rgba(140, 200, 0, .12); color: var(--cyan);
}
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: pulse .9s var(--ease-io) infinite alternate; }
@keyframes pulse { to { opacity: .2; } }

.app__body { display: flex; }
.app__sidebar {
  display: none; flex-direction: column; gap: 4px;
  width: 210px; flex: none; padding: 18px 14px;
  border-right: 1px solid var(--line); background: var(--bg);
}
.app__sidebar li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.5; letter-spacing: -.005em; color: var(--text-3);
}
.app__sidebar .is-active { background: var(--accent-tint); color: var(--text); }
.app__sidebar .is-active .icon { color: var(--accent-2); }

.app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px 14px 18px; }
.app__header { display: flex; align-items: center; gap: 10px; }
.app__range { display: none; padding: 5px 10px; border-radius: 7px; background: var(--fill-soft); }
.app__delta { margin-left: auto; color: var(--cyan); }
.app__stats { display: flex; gap: 9px; }
.app__stat {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 11px 11px;
  border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-2);
}
.app__stat p { color: var(--text-3); }
.app__stat--wide { display: none; }
.app__chart {
  display: flex; flex-direction: column; gap: 11px;
  padding: 12px 11px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface-2);
}
.bars { display: flex; align-items: flex-end; gap: 4px; height: 116px; transform-origin: 50% 100%; }
.bars i, .result-bars i {
  flex: 1; height: var(--h); border-radius: 5px;
  background: linear-gradient(180deg, rgba(239, 255, 158, .55) 0%, rgba(200, 255, 46, .18) 100%);
}
.bars i.is-hot { background: linear-gradient(180deg, var(--cyan) 0%, var(--accent) 100%); }
.app__legend { display: flex; justify-content: space-between; color: var(--text-3); }

@media (min-width: 810px) {
  .hero { gap: 56px; padding: 120px 24px 90px; }
  .hero__backdrop { height: 700px; background-image: url("assets/images/hero-waves-tablet.png"); }
  .hero__copy { gap: 26px; max-width: 700px; }
  .hero__actions { flex-direction: row; justify-content: center; gap: 12px; width: auto; }
  .hide-phone { display: inline; }
  .hero__tilt { transform: rotateX(13deg); transform-origin: 50% 50%; }
  .app { border-radius: var(--r-lg); }
  .app__titlebar { gap: 16px; padding: 14px 18px 13px; }
  .app__crumb { display: block; }
  .app__sidebar { display: flex; }
  .app__main { gap: 22px; padding: 24px 24px 26px; }
  .app__header { gap: 14px; }
  .app__range { display: block; }
  .app__stats { gap: 12px; }
  .app__stat { padding: 13px 15px 14px; }
  .app__stat--wide { display: flex; }
  .app__chart { gap: 14px; padding: 17px; }
  .bars { gap: 7px; height: 168px; }
}
@media (min-width: 1200px) {
  .hero { gap: 72px; padding: 160px 24px 120px; }
  .hero__backdrop { height: 820px; background-image: url("assets/images/hero-waves-desktop.png"); }
  .hero__copy { max-width: 880px; }
  .glow--hero-a { width: 620px; height: 620px; top: 90px; left: -120px; }
  .glow--hero-b { width: 680px; height: 680px; top: 220px; right: -150px; }
}

/* ==========================================================================
   Logo marquee
   ========================================================================== */
.logos { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 14px 0 64px; overflow: clip; }
.logos .eyebrow-text { text-align: center; }
.marquee { width: 100%; overflow: hidden; }
.marquee__track {
  display: flex; align-items: center; gap: 44px; width: max-content;
  padding-right: 44px; /* keeps spacing even across the loop seam */
}
.marquee.is-running .marquee__track { animation: marquee var(--marquee-duration, 60s) linear infinite; }
.marquee__track svg { width: 26px; height: 26px; color: rgba(255, 255, 255, .3); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (min-width: 810px) {
  .logos { gap: 30px; padding: 20px 0 90px; }
  .marquee__track { gap: 66px; padding-right: 66px; }
}

/* ==========================================================================
   Capabilities
   ========================================================================== */
.capabilities { --sec-gap: 40px; --sec-pad: 70px var(--gutter); }
.feature-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  width: 100%; max-width: var(--max);
}
.feature-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 23px 21px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  transition: transform .4s var(--spring), background-color .4s var(--spring), box-shadow .4s var(--spring);
}
.feature-card .body { flex: 1 0 auto; }
.feature-card .tag { margin-top: 22px; } /* spacer + gap, as in the original */
.feature-card:hover {
  z-index: 2;
  background: var(--surface-2);
  box-shadow: var(--shadow-hover);
  transform: translateY(-6px) scale(1.1);
}
.icon-chip {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--r-md);
  border: 1px solid var(--accent-line); background: var(--accent-tint);
  color: var(--accent-2);
}
.icon-chip .icon { width: 21px; height: 21px; stroke-width: 1.8; }

@media (min-width: 810px) {
  .capabilities { --sec-gap: 52px; --sec-pad: 96px 24px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); grid-auto-rows: 1fr; gap: 18px; }
  .feature-card { padding: 27px 27px 29px; }
  .feature-card .tag { margin-top: 16px; }
}
@media (min-width: 1200px) {
  .capabilities { --sec-gap: 64px; --sec-pad: 120px 24px; }
  .feature-grid { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}

/* ==========================================================================
   How it works
   ========================================================================== */
.how { --sec-gap: 64px; --sec-pad: 70px var(--gutter) 76px; overflow: clip; }
.step {
  display: flex; flex-direction: column; gap: 32px;
  width: 100%; max-width: var(--max-narrow);
}
.step__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.step__num {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid rgba(200, 255, 46, .26); border-radius: var(--r-md); background: var(--accent-tint);
}
.stat-chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 17px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface-2);
}

.step__scene { display: flex; justify-content: center; width: 100%; }
.step-card {
  --rest: rotateX(6deg) rotateY(-12deg);
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 360px;
  padding: 17px 17px 19px;
  overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-card);
  transform: var(--rest);
  transition: transform .4s var(--spring);
}
.step-card--left { --rest: rotateX(6deg) rotateY(12deg); }
.step-card:hover { transform: translateY(-8px) scale(1.1); }

.event-list, .rule-list { display: flex; flex-direction: column; gap: 14px; }
.event-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface);
}
.event-list li span:first-of-type { flex: 1; min-width: 0; }
.event-list .icon, .query .icon { color: var(--accent-2); }

.query {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px;
  border: 1px solid var(--accent); border-radius: 12px; background: var(--surface);
  font-size: 14px; line-height: 1.5; letter-spacing: -.005em; color: var(--text-3);
}
.query .icon { width: 16px; height: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 5px 11px;
  border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--accent-tint);
}
.result-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; transform-origin: 50% 100%; }
.result-bars i { border-radius: 4px; background: linear-gradient(180deg, rgba(239, 255, 158, .6) 0%, rgba(200, 255, 46, .16) 100%); }

.rule-list li {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 13px;
  border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface);
}
.rule-list svg { width: 17px; height: 17px; color: rgba(255, 255, 255, .72); }
.rule-list div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

@media (min-width: 810px) {
  .how { --sec-gap: 80px; --sec-pad: 96px 24px 100px; }
  .step { gap: 44px; }
  .step__copy { gap: 20px; }
  .step-card { max-width: 560px; padding: 21px 21px 23px; }
}
@media (min-width: 1200px) {
  .how { --sec-gap: 110px; --sec-pad: 120px 24px 130px; }
  .step { flex-direction: row; align-items: center; gap: 88px; }
  .step > * { flex: 1 1 0; min-width: 0; }
  .step-card { max-width: 440px; }
}

/* ==========================================================================
   Metrics
   ========================================================================== */
.metrics { display: flex; justify-content: center; padding: 64px var(--gutter); overflow: clip; }
.metrics__panel {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  width: 100%; max-width: var(--max-narrow);
  padding: 31px 23px;
  border: 1px solid var(--line-soft); border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(200, 255, 46, .1) 0%, rgba(140, 200, 0, .05) 52%, rgba(255, 255, 255, .02) 100%);
}
.metric { display: flex; flex-direction: column; gap: 10px; }
.metric__value { font-size: var(--fs-metric); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11", "tnum"; }
@media (min-width: 810px) {
  .metrics { padding: 90px 24px; }
  .metrics__panel { grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 35px 31px; }
}
@media (min-width: 1200px) {
  .metrics { padding: 110px 24px; }
  .metrics__panel { gap: 24px; padding: 47px 43px; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials { --sec-gap: 38px; --sec-pad: 64px var(--gutter) 70px; box-shadow: inset 0 1px var(--line); }
.quote-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  width: 100%; max-width: var(--max-narrow);
}
.quote-card {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  padding: 23px 21px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg);
  transition: transform .4s var(--spring), background-color .4s var(--spring);
}
.quote-card:hover { z-index: 2; background: var(--surface-2); transform: translateY(-6px) rotateY(4deg) scale(1.1); }
.quote-card__logo { width: 20px; height: 20px; color: rgba(255, 255, 255, .45); }
.quote-card blockquote { flex: 1 0 auto; }
.quote-card figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 22px; } /* spacer + gap */
.quote-card strong { font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
@media (min-width: 810px) {
  .testimonials { --sec-gap: 48px; --sec-pad: 90px 24px 96px; }
  .quote-grid { grid-template-columns: repeat(2, minmax(200px, 1fr)); grid-auto-rows: 1fr; gap: 18px; }
  .quote-card { gap: 22px; padding: 27px 27px 25px; }
}
@media (min-width: 1200px) {
  .testimonials { --sec-gap: 60px; --sec-pad: 110px 24px 120px; }
  .quote-grid { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
}

/* ==========================================================================
   Changelog
   ========================================================================== */
.changelog { --sec-gap: 30px; --sec-pad: 64px var(--gutter); overflow: clip; }
.changelog__head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  width: 100%; max-width: 1000px;
}
.releases { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 1000px; }
.release {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 17px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface);
  transition: transform .4s var(--spring), background-color .4s var(--spring);
}
.release:hover { z-index: 2; background: var(--surface-2); transform: translateX(6px) scale(1.1); }
.release__version {
  flex: none; width: 66px; text-align: center;
  padding: 6px 12px;
  border: 1px solid rgba(200, 255, 46, .26); border-radius: var(--r-pill); background: var(--accent-tint);
}
.release__copy { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.release time { display: none; }
@media (min-width: 810px) {
  .changelog { --sec-gap: 38px; --sec-pad: 90px 24px; }
  .changelog__head { gap: 26px; }
  .release { flex-direction: row; align-items: center; gap: 22px; padding: 19px 23px 19px 19px; }
  .release__copy { flex: 1; min-width: 0; }
  .release time { display: block; }
}
@media (min-width: 1200px) {
  .changelog { --sec-gap: 46px; --sec-pad: 110px 24px; }
  .changelog__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* ==========================================================================
   Call to action
   ========================================================================== */
.cta { display: flex; justify-content: center; padding: 14px var(--gutter) 80px; overflow: clip; }
.cta__panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  width: 100%; max-width: var(--max-narrow);
  padding: 53px 21px;
  border: 1px solid var(--line-soft); border-radius: 24px;
  background: linear-gradient(150deg, #1b2208 0%, #0b0e16 46%, #0d1406 100%);
  text-align: center;
}
.cta__panel > :not(.glow) { position: relative; z-index: 1; }
.cta__panel .h2 { max-width: 760px; }
.cta__panel .lead { max-width: 560px; }
.cta__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.glow--cta-a {
  width: 560px; height: 560px; top: -160px; right: -140px;
  background: radial-gradient(50% 50%, rgba(200, 255, 46, .4) 0%, rgba(200, 255, 46, 0) 68%);
  filter: blur(10px);
  animation: glow-a 5s var(--ease-io) infinite alternate;
}
.glow--cta-b {
  width: 520px; height: 520px; bottom: -180px; left: -120px;
  background: radial-gradient(50% 50%, rgba(140, 200, 0, .26) 0%, rgba(140, 200, 0, 0) 68%);
  filter: blur(10px);
  animation: glow-b 6.5s var(--ease-io) infinite alternate;
}
@keyframes glow-a { to { opacity: .6; transform: rotate(360deg) scale(1.18); } }
@keyframes glow-b { to { transform: rotate(360deg) scale(1.22); } }
@media (min-width: 810px) {
  .cta { padding: 20px 24px 110px; }
  .cta__panel { gap: 26px; padding: 75px 31px; border-radius: var(--r-2xl); }
  .cta__actions { flex-direction: row; justify-content: center; gap: 12px; width: auto; }
}
@media (min-width: 1200px) {
  .cta { padding: 30px 24px 140px; }
  .cta__panel { padding: 95px 39px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding: 60px 16px 24px; box-shadow: inset 0 1px var(--line); background: var(--bg); overflow: clip; }
.site-footer__inner { display: flex; flex-direction: column; gap: 44px; max-width: var(--max); margin: 0 auto; }
.site-footer__top { display: flex; flex-direction: column; gap: 40px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 18px; }
.site-footer__brand .small { max-width: 320px; }
.footer-col { display: flex; flex-direction: column; gap: 14px; width: 130px; }
.footer-col ul { display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.5; }
.footer-col a { color: var(--text-3); }

.site-footer__inner { container-type: inline-size; }
.wordmark {
  /* Sized from the footer width so the word always spans it edge to edge */
  font-size: min(26vw, 338px);
  font-size: 28.2cqi;
  font-weight: 700; line-height: 1; letter-spacing: -.045em;
  color: rgba(255, 255, 255, .11);
  text-align: center; white-space: nowrap; user-select: none;
}
.site-footer__bottom {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.social { display: flex; gap: 8px; }
.social a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--line-soft); border-radius: 50%; background: var(--fill-soft);
  color: var(--text-2);
  transition: background-color .4s var(--spring), transform .4s var(--spring);
}
.social a:hover { background: rgba(255, 255, 255, .1); transform: scale(1.1); }
.social svg { width: 14px; height: 14px; }

@media (min-width: 810px) {
  .site-footer { padding: 76px 20px 26px; }
  .site-footer__inner { gap: 64px; }
  .site-footer__top { flex-direction: row; flex-wrap: wrap; gap: 48px; }
  .site-footer__brand { flex: 1 0 0; min-width: 0; }
  .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1200px) {
  .site-footer { padding: 96px 24px 28px; }
  .site-footer__top { gap: 80px; }
}

/* ==========================================================================
   Shared components for the inner pages
   ========================================================================== */

/* Current page in the nav */
.nav-links a[aria-current="page"] { color: var(--text); }

/* Page cover (hero of the inner pages). Each page sets its own spacing and glow below. */
.cover {
  position: relative; overflow: clip;
  display: flex; flex-direction: column; align-items: center; gap: var(--cover-gap, 20px);
  padding: var(--cover-pad, 90px 18px 56px);
  text-align: center;
}
.cover > :not(.glow) { position: relative; z-index: 1; }
.cover .display { width: 100%; max-width: var(--title-w, 900px); }
.cover .lead { width: 100%; max-width: var(--sub-w, 560px); }
.cover__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.glow--cover { filter: blur(16px); }
@media (min-width: 810px) {
  .cover__actions { flex-direction: row; justify-content: center; gap: 12px; width: auto; }
}

/* Card hover used across the inner pages: lighter surface, lift and zoom */
.lift { transition: transform .4s var(--spring), background-color .4s var(--spring); }
.lift:hover { position: relative; z-index: 2; background-color: var(--surface-2); transform: translateY(-5px) rotateY(var(--lift-rotate, 0deg)) scale(1.1); }

/* FAQ accordion */
.faq { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: var(--faq-w, 860px); }
.faq__item {
  padding: 23px 25px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
}
.faq__q { margin: 0; }
.faq__q button {
  display: flex; align-items: center; gap: 24px; width: 100%;
  text-align: left; cursor: pointer;
}
.faq__q button > span:first-child { flex: 1; min-width: 0; }
.faq__toggle { position: relative; flex: none; width: 18px; height: 18px; }
.faq__toggle::before, .faq__toggle::after {
  content: ""; position: absolute; left: 1px; top: 8px; width: 16px; height: 2px; border-radius: 2px; background: var(--accent-2);
}
.faq__toggle::after { transform: rotate(90deg); transition: transform .4s var(--spring); }
.faq__item.is-open .faq__toggle::after { transform: rotate(0deg); }
.faq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--spring); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-top: 14px; }
.js .faq__item:not(.is-open) .faq__a { grid-template-rows: 0fr; }
.js .faq__item:not(.is-open) .faq__a p { visibility: hidden; transition: visibility 0s .4s; }

/* CTA variants on the inner pages */
.cta--inner .cta__panel .h2 { max-width: var(--cta-title-w, 760px); }
.cta--inner .cta__panel .lead { max-width: var(--cta-sub-w, 540px); }
@media (min-width: 1200px) {
  .cta--inner .cta__panel { padding: 91px 39px; }
}

/* ==========================================================================
   Features page
   ========================================================================== */
.cover--features { --cover-gap: 20px; --cover-pad: 90px 18px 56px; --title-w: 900px; --sub-w: 560px; }
.cover--features .glow--cover {
  width: 520px; height: 420px; top: -180px; left: -65px;
  background: radial-gradient(50% 50%, rgba(200, 255, 46, .26) 0%, rgba(200, 255, 46, 0) 66%);
}
@media (min-width: 810px) { .cover--features { --cover-gap: 24px; --cover-pad: 120px 24px 70px; } }
@media (min-width: 1200px) {
  .cover--features { --cover-gap: 30px; --cover-pad: 150px 24px 90px; }
  .cover--features .glow--cover { width: 900px; height: 620px; top: -220px; left: 150px; }
}

.bento-section { --sec-gap: 36px; --sec-pad: 56px var(--gutter) 64px; --head-w: 740px; }
.bento {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: var(--max-narrow);
}
.bento__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 21px 19px 23px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  overflow: hidden;
}
.bento__card .icon-chip { width: 44px; height: 44px; border-radius: 13px; }
.bento__card .icon-chip .icon { width: 20px; height: 20px; }
.bento__spacer { flex: 1 0 0; }
.funnel { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.funnel li { display: flex; align-items: center; gap: 12px; }
.funnel__bar {
  width: var(--w); min-width: 0; word-break: break-word;
  padding: 9px 12px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(200, 255, 46, .5) 0%, rgba(140, 200, 0, .2) 100%);
}
.spark { display: flex; align-items: flex-end; gap: 5px; width: 100%; height: 54px; }
.spark i { flex: 1; height: var(--h); border-radius: 3px; background: rgba(239, 255, 158, .35); }
.spark i.is-hot { background: var(--cyan); }
@media (min-width: 810px) {
  .bento-section { --sec-gap: 46px; --sec-pad: 70px 24px 90px; }
  .bento { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 18px; }
  .bento__card { padding: 25px; min-height: 200px; }
  .bento__card--wide, .bento__card--large { grid-column: span 2; }
  .bento__card--anomaly { min-height: 190px; }
  .bento__card--short { min-height: 180px; }
  .bento__card--low { min-height: 150px; }
}
@media (min-width: 1200px) {
  .bento-section { --sec-gap: 56px; --sec-pad: 90px 24px 110px; }
  .bento { grid-template-columns: repeat(4, minmax(150px, 1fr)); grid-auto-rows: minmax(0, 1fr); }
  .bento__card--large { grid-row: span 2; }
  .bento__card--anomaly, .bento__card--short, .bento__card--low { min-height: 200px; }
}

.integrations { --sec-gap: 34px; --sec-pad: 60px var(--gutter) 66px; --head-w: 700px; }
.integration-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 12px; justify-content: center;
  width: 100%; max-width: var(--max-narrow);
}
.integration {
  --lift-rotate: 6deg;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 17px 15px;
  border: 1px solid var(--line); border-radius: 17px; background: var(--bg);
  overflow: hidden;
}
.integration svg { width: 20px; height: 20px; margin: 1px; color: rgba(255, 255, 255, .8); }
.integration h3 { font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.integration .small { flex: 1 0 auto; }
.integration .mono { margin-top: 10px; }
@media (min-width: 810px) {
  .integrations { --sec-gap: 46px; --sec-pad: 80px 24px 90px; }
  .integration-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 16px; }
  .integration { gap: 13px; padding: 21px; min-height: 160px; }
  .integration .mono { margin-top: 13px; }
}
@media (min-width: 1200px) {
  .integrations { --sec-gap: 56px; --sec-pad: 100px 24px 110px; }
  .integration-grid { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
}

.comparison { --sec-gap: 34px; --sec-pad: 60px var(--gutter); --head-w: 640px; }
.compare-table {
  width: 100%; max-width: 900px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.compare-table .row { display: flex; align-items: center; gap: 20px; padding: 18px 25px; box-shadow: inset 0 1px var(--line); }
.compare-table .row--head { padding: 16px 25px; background: var(--surface-2); box-shadow: none; }
.compare-table .row > :first-child {
  word-break: break-word; overflow-wrap: break-word;
  flex: 1 0 0; width: 1px;
}
@media (max-width: 809.98px) {
  /* Phones: the label takes its own line and the two answers sit side by side beneath it */
  .compare-table .row { flex-wrap: wrap; gap: 10px 20px; }
  .compare-table .row > :first-child { flex: 1 0 100%; width: auto; }
  .compare-table .row--head > :first-child { display: none; }
  .compare-table .row .cell { flex: 1 1 0; width: auto; min-width: 0; }
}
.compare-table .cell { display: flex; align-items: center; gap: 8px; flex: none; width: 190px; }
.compare-table .cell .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.compare-table .yes .icon { color: var(--cyan); }
.compare-table .no .icon { color: var(--text-3); }
@media (min-width: 810px) { .comparison { --sec-gap: 42px; --sec-pad: 80px 24px; } }
@media (min-width: 1200px) { .comparison { --sec-gap: 50px; --sec-pad: 100px 24px; } }

.cta--features { padding: 6px var(--gutter) 80px; }
@media (min-width: 810px) { .cta--features { padding: 10px 24px 110px; } }
@media (min-width: 1200px) { .cta--features { padding: 20px 24px 130px; } }

/* ==========================================================================
   Pricing page
   ========================================================================== */
.cover--pricing { --cover-gap: 20px; --cover-pad: 90px 18px 40px; --title-w: 820px; --sub-w: 520px; }
.cover--pricing .glow--cover {
  width: 520px; height: 420px; top: -180px; left: -65px;
  background: radial-gradient(50% 50%, rgba(200, 255, 46, .24) 0%, rgba(200, 255, 46, 0) 66%);
}
@media (min-width: 810px) { .cover--pricing { --cover-gap: 28px; --cover-pad: 120px 24px 50px; } }
@media (min-width: 1200px) {
  .cover--pricing { --cover-pad: 150px 24px 60px; }
  .cover--pricing .glow--cover { width: 880px; height: 600px; top: -240px; left: 150px; }
}

.billing {
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
}
.billing button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em; color: var(--text);
  transition: background-color .4s var(--spring);
}
.billing button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.plans { display: flex; justify-content: center; padding: 40px var(--gutter) 60px; }
.plan-grid {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 1120px;
}
.plan {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  padding: 27px 23px;
  border: 1px solid var(--line); border-radius: 24px; background: var(--surface);
  transition: transform .4s var(--spring);
}
.plan:hover { position: relative; z-index: 2; transform: translateY(-6px) scale(1.1); }
.plan--featured {
  border-color: var(--accent);
  background: linear-gradient(170deg, #1a2109 0%, #0c1018 62%);
  box-shadow: 0 24px 70px rgba(200, 255, 46, .22);
}
.plan__name { display: flex; align-items: center; gap: 10px; }
.plan__badge {
  padding: 4px 10px;
  border: 1px solid rgba(200, 255, 46, .32); border-radius: var(--r-pill); background: var(--accent-tint);
}
.plan__price { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.plan hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }
.plan__features { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.plan__features li { display: flex; align-items: flex-start; gap: 10px; }
.plan__features .icon { width: 14px; height: 14px; stroke-width: 2.4; color: var(--cyan); }
.plan__spacer { flex: 1 0 0; min-height: 8px; }
.plan .btn { width: 100%; }
@media (min-width: 810px) {
  .plans { padding: 50px 24px 80px; }
  .plan-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 18px; }
  .plan { gap: 24px; padding: 33px 31px; }
  .plan__spacer { min-height: 0; }
}
@media (min-width: 1200px) {
  .plans { padding: 60px 24px 100px; }
  .plan-grid { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
}

.faq-section { --sec-gap: 32px; --sec-pad: 60px var(--gutter); --head-w: 680px; background: var(--surface); box-shadow: inset 0 1px var(--line); }
@media (min-width: 810px) { .faq-section { --sec-gap: 40px; --sec-pad: 80px 24px; } }
@media (min-width: 1200px) { .faq-section { --sec-gap: 50px; --sec-pad: 100px 24px; } }

.cta--pricing { padding: 40px var(--gutter) 80px; }
.cta--pricing .cta__panel { --cta-title-w: 720px; }
@media (min-width: 810px) { .cta--pricing { padding: 60px 24px 110px; } }
@media (min-width: 1200px) { .cta--pricing { padding: 70px 24px 130px; } }

/* ==========================================================================
   About page
   ========================================================================== */
.cover--about { --cover-gap: 20px; --cover-pad: 90px 18px 40px; --title-w: 860px; }
.cover--about .glow--cover {
  width: 520px; height: 420px; top: -180px; left: -65px;
  background: radial-gradient(50% 50%, rgba(140, 200, 0, .18) 0%, rgba(140, 200, 0, 0) 66%);
}
@media (min-width: 810px) { .cover--about { --cover-gap: 28px; --cover-pad: 120px 24px 56px; } }
@media (min-width: 1200px) {
  .cover--about { --cover-pad: 150px 24px 70px; }
  .cover--about .glow--cover { width: 860px; height: 600px; top: -250px; left: 150px; }
}

.manifesto { display: flex; justify-content: center; padding: 34px var(--gutter) 60px; }
.manifesto__inner { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1040px; }
.manifesto__label { width: 100%; }
.manifesto__body { display: flex; flex-direction: column; gap: 26px; }
@media (min-width: 810px) {
  .manifesto { padding: 46px 24px 80px; }
  .manifesto__inner { flex-direction: row; gap: 48px; }
  .manifesto__label { flex: none; width: 200px; }
  .manifesto__body { flex: 1 0 0; width: 1px; }
}
@media (min-width: 1200px) {
  .manifesto { padding: 60px 24px 100px; }
  .manifesto__inner { gap: 80px; }
}

.numbers { display: flex; justify-content: center; padding: 0 var(--gutter) 60px; overflow: clip; }
.numbers__panel {
  display: flex; flex-direction: column; gap: 26px;
  width: 100%; max-width: 1040px;
  padding: 29px 21px;
  border: 1px solid var(--line); border-radius: 24px; background: var(--surface);
}
.numbers__panel .metric { flex: 1 0 0; }
@media (min-width: 810px) {
  .numbers { padding: 0 24px 80px; }
  .numbers__panel { flex-direction: row; flex-wrap: wrap; gap: 20px; padding: 35px 31px; }
}
@media (min-width: 1200px) {
  .numbers { padding: 0 24px 100px; }
  .numbers__panel { gap: 24px; padding: 45px 41px; }
}

.team { --sec-gap: 32px; --sec-pad: 60px var(--gutter) 66px; --head-w: 660px; }
.team-grid { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 1040px; }
.member {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg);
  transition: transform .4s var(--spring), background-color .4s var(--spring);
}
.member:hover { position: relative; z-index: 2; background: var(--surface-2); transform: translateY(-6px) scale(1.1); }
.member img { display: block; width: 100%; height: 300px; object-fit: cover; }
.member__info { display: flex; flex-direction: column; gap: 5px; padding: 21px 21px 23px; }

/* ---------------------------------------------------------------- sniped cards
   The feature pages reuse .member for these, which brought with it a rule written for a team
   headshot: `.member img { width: 100%; height: 300px; object-fit: cover }`. That matched
   every image inside the card, so the player card was stretched into a landscape box and each
   14px coin beside a price was blown up to 256x300. Nothing else here had any rules at all. */
.snipe__art {
  position: relative;
  display: grid;
  place-items: center;
  padding: 22px 22px 6px;
}

/* A skeleton that sits behind the card, so a slow image shows the rating instead of a gap and
   is covered the moment the card arrives, rather than printing "82LW" above it. */
.snipe__ph {
  position: absolute;
  inset: 22px 22px 6px;
  display: grid;
  place-content: center;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.snipe__ph small { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; }

.snipe .snipe__art img {
  position: relative;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: contain;
}

.snipe__prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
}
.snipe__prices > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.snipe__prices dt { color: var(--text-3); font-size: 12px; }
.snipe__prices dd { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--text); font-size: 15px; }
.snipe .coin { flex: none; width: 14px; height: 14px; object-fit: contain; }
.snipe__profit { margin: 12px 0 0; color: var(--accent); font-size: 16px; font-weight: 600; }
@media (min-width: 810px) {
  .team { --sec-gap: 44px; --sec-pad: 80px 24px 90px; }
  .team-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 18px; }
  .member img { height: 260px; }
}
@media (min-width: 1200px) {
  .team { --sec-gap: 54px; --sec-pad: 100px 24px 110px; }
  .team-grid { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
}

.timeline-section { --sec-gap: 32px; --sec-pad: 60px var(--gutter) 50px; }
.timeline-section .section-head { --head-w: 900px; }
.timeline { position: relative; width: 100%; max-width: 900px; }
.timeline::before { content: ""; position: absolute; top: 10px; bottom: 30px; left: 5px; width: 1px; background: var(--line); }
.milestone { position: relative; display: flex; align-items: flex-start; gap: 18px; padding-bottom: 34px; }
.milestone__dot { display: flex; align-items: center; justify-content: center; flex: none; width: 11px; height: 22px; }
.milestone__dot::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.milestone--next .milestone__dot::before { background: var(--cyan); }
.milestone__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.milestone__body .body { max-width: 620px; }
@media (min-width: 810px) {
  .timeline-section { --sec-gap: 44px; --sec-pad: 80px 24px 70px; }
  .milestone { gap: 30px; padding-bottom: 44px; }
}
@media (min-width: 1200px) { .timeline-section { --sec-gap: 54px; --sec-pad: 100px 24px 90px; } }

.cta--about { padding: 20px var(--gutter) 80px; }
.cta--about .cta__panel { --cta-title-w: 740px; }
@media (min-width: 810px) { .cta--about { padding: 30px 24px 110px; } }
@media (min-width: 1200px) { .cta--about { padding: 40px 24px 130px; } }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact { position: relative; overflow: clip; display: flex; justify-content: center; padding: 90px var(--gutter) 60px; }
.contact .glow--cover {
  width: 500px; height: 420px; top: -140px; left: -140px;
  background: radial-gradient(50% 50%, rgba(200, 255, 46, .2) 0%, rgba(200, 255, 46, 0) 66%);
}
.contact__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 36px; width: 100%; max-width: 1120px; }
.contact__left { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 560px; }
.contact__left .h2 { max-width: 460px; }
.contact__left .lead { max-width: 420px; }
.contact-cards { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 460px; }
.contact-card {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: transform .4s var(--spring), background-color .4s var(--spring);
}
.contact-card:hover { position: relative; z-index: 2; background: var(--surface-2); transform: translateX(5px) scale(1.1); }
.contact-card__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-tint); color: var(--accent-2); }
.contact-card__icon .icon { width: 17px; height: 17px; }
.contact-card div { display: flex; flex-direction: column; gap: 3px; }
.contact-card strong { font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }

.contact-form {
  display: flex; flex-direction: column; gap: 15px;
  width: 100%; max-width: 560px;
  padding: 25px 19px;
  border: 1px solid var(--line); border-radius: 24px; background: var(--surface);
}
.field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.field input, .field select, .field textarea {
  display: block; width: 100%; margin: 0;
  padding: 13px 14px;
  border: 0; border-radius: 12px; outline: none;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--line);
  font: 400 15px/19.5px var(--font-sans); color: var(--text);
  transition: box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.field textarea { height: 120px; resize: none; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 40px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%239ba4b4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.field select { color-scheme: dark; }
.field select option { background: var(--surface); color: var(--text); }
/* Hidden spam trap: humans never see or fill it */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.submit {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 14px 24px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em;
  transition: background-color .4s var(--spring);
}
.submit:hover { background: var(--accent-2); }
.submit[data-state="pending"] { background: var(--surface-2); pointer-events: none; }
.submit[data-state="success"] { background: rgb(29, 138, 95); }
.submit[data-state="error"] { background: rgb(176, 58, 58); }

@media (min-width: 810px) {
  .contact { padding: 120px 24px 80px; }
  .contact__inner { flex-direction: row; align-items: flex-start; gap: 40px; }
  .contact__left { flex: 1 0 0; width: 1px; max-width: none; gap: 34px; }
  .contact-form { flex: 1 0 0; width: 1px; max-width: 520px; gap: 18px; padding: 27px 25px; }
}
@media (min-width: 1200px) {
  .contact { padding: 150px 24px 110px; }
  .contact .glow--cover { width: 760px; height: 620px; top: -160px; left: -200px; }
  .contact__inner { gap: 80px; }
  .contact-form { padding: 33px; }
}

.quick-answers { --sec-gap: 30px; --sec-pad: 56px var(--gutter) 80px; --head-w: 640px; --faq-w: 820px; background: var(--surface); box-shadow: inset 0 1px var(--line); }
@media (min-width: 810px) { .quick-answers { --sec-gap: 38px; --sec-pad: 70px 24px 100px; } }
@media (min-width: 1200px) { .quick-answers { --sec-gap: 46px; --sec-pad: 90px 24px 120px; } }

/* ==========================================================================
   Blog index
   ========================================================================== */
.cover--blog { --cover-gap: 20px; --cover-pad: 90px 18px 32px; --title-w: 880px; }
.cover--blog .glow--cover {
  width: 520px; height: 420px; top: -180px; left: -65px;
  background: radial-gradient(50% 50%, rgba(200, 255, 46, .2) 0%, rgba(200, 255, 46, 0) 66%);
}
@media (min-width: 810px) { .cover--blog { --cover-gap: 26px; --cover-pad: 120px 24px 46px; } }
@media (min-width: 1200px) {
  .cover--blog { --cover-pad: 150px 24px 60px; }
  .cover--blog .glow--cover { width: 860px; height: 580px; top: -250px; left: 150px; }
}

.category {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--accent-line); border-radius: var(--r-pill); background: var(--accent-tint);
}
.tag--mono {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line-soft); border-radius: var(--r-pill); background: rgba(255, 255, 255, .05);
}
.avatar { flex: none; border-radius: 50%; object-fit: cover; }

.featured { display: flex; justify-content: center; padding: 20px var(--gutter) 16px; }
.featured-post {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; max-width: var(--max-narrow); overflow: hidden;
  border: 1px solid var(--line); border-radius: 24px; background: var(--surface);
  transition: transform .4s var(--spring), box-shadow .4s var(--spring);
}
.featured-post:hover { transform: translateY(-6px) scale(1.1); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.featured-post__cover { width: 100%; height: 200px; object-fit: cover; }
.featured-post__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; width: 100%; padding: 23px 19px 25px; }
.post-meta { display: flex; align-items: center; gap: 12px; width: 100%; }
.post-meta div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.post-meta strong { font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
@media (min-width: 810px) {
  .featured { padding: 30px 24px 24px; }
  .featured-post { flex-direction: row; align-items: center; }
  .featured-post__cover { flex: 1 0 0; width: 1px; height: 300px; }
  .featured-post__copy { flex: 1 0 0; width: 1px; gap: 14px; padding: 31px; }
}
@media (min-width: 1200px) {
  .featured { padding: 40px 24px 30px; }
  .featured-post__cover { height: 380px; }
  .featured-post__copy { gap: 18px; padding: 43px; }
}

.all-posts { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 26px var(--gutter) 80px; }
.rule-head { display: flex; align-items: center; gap: 12px; width: 100%; max-width: var(--max-narrow); }
.rule-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.post-grid { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: var(--max-narrow); }
.post-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  transition: transform .4s var(--spring), background-color .4s var(--spring), box-shadow .4s var(--spring);
}
.post-card:hover { position: relative; z-index: 2; background: var(--surface-2); box-shadow: 0 26px 60px rgba(0, 0, 0, .5); transform: translateY(-7px) scale(1.1); }
.post-card > img { flex: none; width: 100%; height: 200px; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding: 19px 19px 21px; }
.post-card__body .small { flex: 1 0 auto; }
.post-card__author { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 21px; }
.post-card__author span:first-of-type { flex: 1; min-width: 0; }

/* Screenshots are not photographs. The news card crops its image to a 200px band, which
   flatters a photo and ruins a UI capture: these are 1320x1160 shots of the whole extension
   panel, so a third of the interface was being sliced off the top and bottom. Let them keep
   their own shape instead. */
.post-card--screen > img {
  height: auto;
  object-fit: contain;
  background: var(--surface-2);
}

/* A lift and a 10% scale is a pointer affordance. On a touch screen the hover state latches
   after a tap and leaves a card sitting scaled up on top of its neighbours, which reads as
   broken rather than as a hover. */
@media (hover: none) {
  .post-card:hover,
  .member:hover {
    transform: none;
    box-shadow: none;
    background: var(--surface);
  }
}
@media (min-width: 810px) {
  .all-posts { gap: 34px; padding: 40px 24px 100px; }
  .post-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 18px; }
  .post-card__body { flex: 1 0 auto; padding: 23px; }
  .post-card__author { margin-top: 13px; }
}
@media (min-width: 1200px) {
  .all-posts { padding: 50px 24px 120px; }
  .post-grid { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
}

/* ==========================================================================
   Blog post
   ========================================================================== */
.post-header { --cover-gap: 18px; --cover-pad: 90px 18px 26px; --title-w: 820px; --sub-w: 620px; }
.post-header .glow--cover {
  width: 520px; height: 400px; top: -160px; left: -65px;
  background: radial-gradient(50% 50%, rgba(200, 255, 46, .18) 0%, rgba(200, 255, 46, 0) 66%);
}
.post-header .h2 { width: 100%; max-width: var(--title-w); }
.back-link { color: var(--text-2); transition: color .25s var(--ease-link); }
.back-link:hover { color: var(--text); }
.post-header .category { padding: 5px 12px; }
.post-byline { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.post-byline__name { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.post-byline strong { font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.post-byline .dot { display: none; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
@media (min-width: 810px) {
  .post-header { --cover-gap: 24px; --cover-pad: 120px 24px 34px; }
  .post-byline { flex-direction: row; gap: 12px; }
  .post-byline .dot { display: block; }
}
@media (min-width: 1200px) {
  .post-header { --cover-pad: 140px 24px 40px; }
  .post-header .glow--cover { width: 820px; height: 520px; top: -200px; left: 150px; }
}
.post-cover { display: flex; justify-content: center; padding: 18px var(--gutter) 6px; }
.post-cover img {
  width: 100%; max-width: 1040px; height: 220px; object-fit: cover;
  border-radius: 18px; box-shadow: 0 0 0 1px var(--line);
}
@media (min-width: 810px) {
  .post-cover { padding: 26px 24px 10px; }
  .post-cover img { height: 380px; border-radius: 24px; }
}
@media (min-width: 1200px) { .post-cover img { height: 500px; } }

.post-body { display: flex; justify-content: center; padding: 36px var(--gutter) 60px; }
.prose { width: 100%; max-width: 720px; }
.prose p { font-size: var(--fs-lead); line-height: 1.55; letter-spacing: -.012em; color: var(--text-2); text-wrap: balance; }
.prose h2 { margin: 40px 0 20px; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.022em; }
.prose h3 { margin: 40px 0 20px; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.016em; }
.prose > :first-child { margin-top: 0; }
@media (min-width: 810px) { .post-body { padding: 46px 24px 80px; } }
@media (min-width: 1200px) { .post-body { padding: 54px 24px 90px; } }

.more-writing { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 46px var(--gutter) 80px; background: var(--surface); box-shadow: inset 0 1px var(--line); }
.more-writing .rule-head { max-width: 1040px; }
.related { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 1040px; }
.related-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; background: var(--bg);
  transition: transform .4s var(--spring), background-color .4s var(--spring);
}
.related-card:hover { position: relative; z-index: 2; background: var(--surface-2); transform: translateY(-6px) scale(1.1); }
.related-card img { width: 100%; height: 150px; object-fit: cover; }
.related-card div { display: flex; flex-direction: column; gap: 9px; padding: 19px 19px 21px; }
@media (min-width: 810px) {
  .more-writing { gap: 26px; padding: 60px 24px 100px; }
  .related { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); align-items: start; gap: 16px; }
}
@media (min-width: 1200px) {
  .more-writing { gap: 32px; padding: 70px 24px 120px; }
  .related { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}

/* ==========================================================================
   Motion: page-load intro, scroll reveals, word-by-word headings
   Everything below only applies once script.js has added .js to <html>.
   ========================================================================== */

/* Page-load intro. Per element: --d (delay) and --y (start offset), e.g. style="--d:.45s; --y:24px" */
.js .intro { opacity: 0; transform: var(--from, translateY(var(--y, 18px))); }
.js .intro--fade { transform: none; }
.js .is-loaded .intro {
  opacity: 1; transform: none;
  transition: opacity var(--dur, .8s) var(--spring) var(--d, 0s), transform var(--dur, .8s) var(--spring) var(--d, 0s);
}
.js .is-loaded .intro--fade { transition: opacity .6s var(--ease-io) var(--d, 0s); }

.js .hero__tilt { opacity: 0; transform: translateY(90px) rotateX(56deg) scale(.88); }
.js .is-loaded .hero__tilt {
  opacity: 1; transform: none;
  transition: opacity 1.3s var(--spring) .35s, transform 1.3s var(--spring) .35s;
}
@media (min-width: 810px) {
  .js .is-loaded .hero__tilt { transform: rotateX(13deg); }
}

/* Word-by-word blur reveal on headings with data-split.
   data-split="mount" plays on page load; data-split (no value) plays when scrolled into view.
   Tune per heading with --w-blur, --w-y, --w-scale, --w-delay, --w-stagger, --w-dur. */
.word { display: inline-block; white-space: pre; }
.js [data-split] .word {
  opacity: 0; filter: blur(var(--w-blur, 10px)); transform: translateY(var(--w-y, 34px)) scale(var(--w-scale, 1));
  transition: opacity var(--w-dur, .9s) var(--spring), filter var(--w-dur, .9s) var(--spring), transform var(--w-dur, .9s) var(--spring);
  transition-delay: calc(var(--w-delay, .05s) + var(--i) * var(--w-stagger, .05s));
}
.split-hero { --w-blur: 12px; --w-y: 42px; --w-scale: 1.06; --w-delay: .1s; --w-stagger: .045s; --w-dur: .95s; }
.split-cover { --w-y: 38px; --w-delay: .08s; --w-stagger: .04s; }
.js [data-split].is-visible .word,
.js .is-loaded [data-split="mount"] .word { opacity: 1; filter: none; transform: none; }

/* Scroll reveals (toggle .is-visible; they replay when scrolled back into view, as in the original).
   Generic form: class="reveal" style="--from: translateY(44px) rotateX(16deg) scale(.95); --dur: .9s" */
.js .reveal { transition: opacity var(--dur, .85s) var(--spring), transform var(--dur, .85s) var(--spring); }
.js .reveal:not(.is-visible) { opacity: 0; transform: var(--from, none); }
.js .reveal--tilt:not(.is-visible)        { transform: translateY(46px) rotateX(18deg) scale(.95); }
.js .reveal--tilt-strong:not(.is-visible) { transform: translateY(50px) rotateX(22deg); }
.js .reveal--left:not(.is-visible)        { transform: translateX(-40px); }
.js .reveal--right:not(.is-visible)       { transform: translateX(40px); }
.js .reveal--left-sm:not(.is-visible)     { transform: translateX(-30px); }
.js .reveal--up:not(.is-visible)          { transform: translateY(40px); }
.js .reveal--rise:not(.is-visible)        { transform: translateY(60px) scale(.94); }
.js .reveal--pop { transition-duration: .7s; }
.js .reveal--pop:not(.is-visible)         { transform: translateY(20px) scale(.8); }
.js .bars.reveal--pop:not(.is-visible)    { transform: translateY(30px) scale(.9); }
.js .reveal--tilt-strong { transition-duration: .9s; }

/* Step cards swing in on their Y axis, then settle into their resting tilt */
.js .step-card.reveal { transition: opacity 1s var(--spring) .05s, transform 1s var(--spring) .05s; }
.js .step-card.reveal:not(.is-visible) { transform: translateY(60px) rotateY(-40deg) scale(.9); }
.js .step-card--left.reveal:not(.is-visible) { transform: translateY(60px) rotateY(40deg) scale(.9); }
.js .step-card.reveal.is-visible:hover { transform: translateY(-8px) scale(1.1); transition: transform .4s var(--spring); }

/* Reduced motion: show everything, keep only colour/opacity feedback */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .js .intro, .js .hero__tilt, .js .reveal, .js [data-split] .word {
    opacity: 1 !important; filter: none !important; transition: none !important;
  }
  .js .intro, .js [data-split] .word, .js .reveal:not(.step-card) { transform: none !important; }
  .js .hero__tilt { transform: none !important; }
  .js .step-card.reveal { transform: var(--rest) !important; }
  .feature-card:hover, .quote-card:hover, .release:hover, .step-card:hover, .social a:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 810px) {
  .js .hero__tilt { transform: rotateX(13deg) !important; }
}

/* ==========================================================================
   FC AutoBuyer additions (site-specific components)
   ========================================================================== */

/* Logo image */
.brand__logo { display: block; width: 27px; height: 27px; }

/* Real extension screenshot inside the app window frame */
.app--shot img { display: block; width: 100%; height: auto; }
.app--hero { max-width: 760px; margin: 0 auto; }

/* Footer wordmark: "FC AutoBuyer" is scaled to span the same width */
.wordmark { font-size: min(14.6vw, 190px); font-size: 15.87cqi; }

/* Recent snipes in the logo marquee .
   Same muted tone and spacing as the logos; card art kept small to sit at logo scale. */
.snipe-chip { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.snipe-chip img { width: 104px; height: auto; display: block; }
.snipe-chip > span { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.snipe-chip b { color: rgba(255, 255, 255, .72); font-weight: 600; }
.snipe-chip .mono { color: var(--accent); font-size: 12px; }

/* ==========================================================================
   Extension mockups (flagged addition): the FC AutoBuyer extension UI rebuilt in
   HTML so it stays sharp at any size. Used inside the app frame (hero) and
   the step cards (How it works). Example data only.
   ========================================================================== */
.ext { --ext-bg: #141518; --ext-side: #0f1012; --ext-panel: #1c1d21; --ext-row: #232428; --ext-won: #1b3121;
  --ext-dim: rgba(255, 255, 255, .45); --ext-line: rgba(255, 255, 255, .06);
  display: flex; background: var(--ext-bg); color: #fff; font-size: 12px; line-height: 1.35; text-align: left; }
.ext__side { display: none; flex: 0 0 172px; flex-direction: column; gap: 2px; padding: 14px 10px; background: var(--ext-side); border-right: 1px solid var(--ext-line); }
.ext__brand { display: flex; align-items: center; gap: 9px; padding: 2px 6px 14px; }
.ext__brand img { width: 26px; height: 26px; }
.ext__brand b { display: block; font-size: 13px; font-weight: 600; }
.ext__status { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; padding: 1px 7px; border-radius: 99px; background: rgba(200, 255, 46, .12); color: var(--accent); font-size: 10.5px; font-weight: 600; }
.ext__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ext__group { padding: 12px 8px 4px; color: var(--ext-dim); font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ext__nav { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; color: rgba(255, 255, 255, .78); }
.ext__nav .icon { width: 14px; height: 14px; color: var(--ext-dim); }
.ext__nav.is-active { background: var(--ext-row); color: #fff; }
.ext__nav.is-active .icon { color: var(--accent); }
.ext__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.ext__banner { margin: -12px -12px 0; padding: 8px 14px; background: rgba(255, 184, 0, .12); color: #ffc94d; font-size: 11.5px; }
.ext__card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--ext-panel); }
.ext__head { display: flex; align-items: center; gap: 12px; }
.ext__ring { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(200, 255, 46, .08); }
.ext__ring::after { content: ""; width: 16px; height: 16px; border: 3px solid var(--accent); border-radius: 50%; }
.ext__ring--idle { background: rgba(255, 255, 255, .05); }
.ext__ring--idle::after { border-color: rgba(255, 255, 255, .15); }
.ext__title { font-size: 15px; font-weight: 600; line-height: 1.25; }
.ext__sub { color: var(--ext-dim); font-size: 11.5px; }
.ext__sub b { color: #fff; font-weight: 600; }
.ext__time { margin-left: auto; color: rgba(255, 255, 255, .7); font-size: 12px; }
.ext__btn { display: grid; place-items: center; height: 34px; border-radius: 11px; font-weight: 600; font-size: 12.5px; }
.ext__btn--stop { background: #ff3d4f; box-shadow: 0 6px 22px rgba(255, 61, 79, .3); }
.ext__btn--start { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 22px rgba(200, 255, 46, .22); }
.ext__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ext__stat { padding: 8px 10px; border-radius: 10px; background: var(--ext-row); }
.ext__stat b { display: block; font-size: 15px; font-weight: 500; }
.ext__stat span { color: var(--ext-dim); font-size: 10.5px; }
.ext__stat--won b { color: var(--accent); }
.ext__tabs { display: flex; gap: 14px; font-size: 12.5px; font-weight: 600; color: var(--ext-dim); }
.ext__tabs .is-on { color: #fff; box-shadow: inset 0 -2px var(--accent); padding-bottom: 4px; }
.ext__list { display: flex; flex-direction: column; gap: 5px; }
.ext__row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 11px; background: var(--ext-row); }
.ext__row--won { background: var(--ext-won); }
.ext__rating { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, .06); font-size: 11px; font-weight: 600; }
.ext__row--won .ext__rating { background: rgba(200, 255, 46, .14); color: var(--accent); }
.ext__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; white-space: nowrap; }
.ext__who b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.ext__who span { color: var(--ext-dim); font-size: 10.5px; }
.ext__price { font-size: 12px; font-weight: 600; }
.ext__row--missed .ext__price { color: var(--ext-dim); }
.ext__when { color: var(--ext-dim); font-size: 10.5px; white-space: nowrap; }
.ext__tick, .ext__cross { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; }
.ext__tick { background: var(--accent); color: var(--on-accent); }
.ext__cross { background: rgba(255, 255, 255, .08); color: var(--ext-dim); }
.ext__tick svg, .ext__cross svg { width: 14px; height: 14px; }
.ext__tick svg { stroke-width: 2.6; }
.ext__cross svg { width: 10px; height: 10px; }
.ext__checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.ext__check { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 99px; background: var(--ext-row); font-size: 11px; }
.ext__check .ext__tick { width: 14px; height: 14px; }
.ext__check .ext__tick svg { width: 11px; height: 11px; }
.ext__field { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--ext-line); }
.ext__field:first-child { border-top: 0; }
.ext__field > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-weight: 500; }
.ext__field small { color: var(--ext-dim); font-size: 10.5px; font-weight: 400; }
.ext__input { flex: none; min-width: 74px; padding: 5px 10px; border-radius: 8px; background: var(--ext-row); text-align: right; font-size: 11.5px; font-weight: 600; }
.ext__summary { color: rgba(255, 255, 255, .7); font-size: 11px; }
.step-card .ext { background: transparent; }
.step-card .ext__main { padding: 0; gap: 8px; }
@media (min-width: 810px) {
  .app .ext { font-size: 12.5px; }
  .ext__side { display: flex; }
}

/* Discord message (FC AutoBuyer app alerts) */
.dc { display: flex; gap: 12px; text-align: left; }
.dc__avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #5865f2; }
.dc__avatar svg { width: 19px; height: 19px; color: #fff; }
.dc__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dc__meta { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.dc__app { padding: 0 4px; border-radius: 3px; background: #5865f2; color: #fff; font-size: 9.5px; line-height: 15px; }
.dc__meta time { color: rgba(255, 255, 255, .4); font-size: 11px; font-weight: 400; }
.dc__line { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.dc__line b { color: #fff; font-weight: 600; }
.dc__icon { flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; }
.dc__icon svg { width: 10px; height: 10px; }
.dc__icon--won { background: #3ba55c; color: #fff; }
.dc__icon--listed { background: #f0b232; color: #3a2800; }
.dc__icon--missed { color: #f23f43; }
.dc__icon--missed svg { width: 13px; height: 13px; }

/* Screenshots inside step cards (inner pages) */
.step-card > img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* Snipes strip: more room above than the default logo row */
.logos:has(.snipe-chip) { padding-top: 56px; gap: 38px; }
.logos:has(.snipe-chip) .marquee { padding-top: 8px; }
@media (min-width: 810px) { .logos:has(.snipe-chip) { padding-top: 90px; gap: 48px; } }

/* Feature cards that link to a page: the whole card is clickable, the look is unchanged */
.card-link { color: inherit; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link:focus-visible { outline: none; }
.feature-card:has(.card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Metrics footnote (flagged addition): spans the full panel under the four numbers */
.metrics__note { grid-column: 1 / -1; text-align: center; color: var(--text-3, rgba(255, 255, 255, .45)); }

/* Review cards: a grey quote mark  */
.quote-card__mark { display: block; height: 22px; color: rgba(255, 255, 255, .35); font-size: 48px; font-weight: 700; line-height: .9; }

/* Hero legibility over the lime waves (the brighter lime lines cross the copy on phones) */
.hero__sub, .hero__trust { text-shadow: 0 0 14px var(--bg), 0 0 6px var(--bg), 0 0 2px var(--bg); }
.hero__sub { color: rgba(255, 255, 255, .8); }
.hero__trust { color: rgba(255, 255, 255, .62); }
@media (max-width: 809px) { .hero__waves { opacity: .55; } }

/* Phone menu: Buy now and Join the Discord as full-width buttons  */
.mobile-menu__cta { display: grid; gap: 8px; margin-top: 10px; }
.mobile-menu a.btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; border-radius: 99px; font-size: 16px; }
.mobile-menu a.btn--primary:hover { background: var(--accent); }

/* Changelog: the "coming soon" row uses the same slot as the release date */
.release__when { display: none; color: var(--accent); }
@media (min-width: 810px) { .release__when { display: block; } }

/* Live FC AutoBuyer icons inside the icon boxes: same size as the sprite icons */
.icon-chip > svg { width: 21px; height: 21px; }
.contact-card__icon > svg { width: 17px; height: 17px; }

/* ==========================================================================
   Articles (flagged addition): The base post styles only covered paragraphs and
   headings. These extend it to the lists, tables, overview and boxes the FC
   AutoBuyer guides use, with the site's colours, borders and radii.
   ========================================================================== */
.post-body--article { flex-direction: column; align-items: center; }
.post-body--article .prose { max-width: 780px; }
.post-body--article .prose p { text-wrap: pretty; }
.prose > * + * { margin-top: 18px; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(200, 255, 46, .35); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; color: var(--text-2); font-size: var(--fs-lead); line-height: 1.55; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--accent); }
.prose img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.prose figure figcaption { margin-top: 10px; color: var(--text-3); font-size: 14px; text-align: center; }

/* Overview (was "On this page"): a panel at the top of the article */
.toc { width: 100%; max-width: 780px; margin-bottom: 36px; padding: 21px 23px 23px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.toc h2 { margin-bottom: 14px; }
.toc ol { display: grid; gap: 4px 28px; }
.toc a { display: block; padding: 5px 0; color: var(--text-2); font-size: 15px; line-height: 1.4; transition: color .2s; }
.toc a:hover { color: var(--accent); }
@media (min-width: 810px) { .toc ol { grid-template-columns: 1fr 1fr; } }

/* Key takeaways and notes: panels */
.takeaways, .callout, .note { padding: 21px 23px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.takeaways { border-color: rgba(200, 255, 46, .25); background: linear-gradient(135deg, rgba(200, 255, 46, .07), rgba(255, 255, 255, .02)); }
.prose .takeaways h2 { margin: 0 0 14px; font-size: 22px; }
.takeaways ul { font-size: 16px; }
.callout--warn, .note { border-color: rgba(255, 184, 0, .25); }
.callout__title { color: var(--text); font-weight: 600; }
.prose .callout p, .prose .note p { font-size: 16px; }
.callout > * + *, .note > * + * { margin-top: 10px; }
.prose .callout a.btn { color: var(--on-accent); text-decoration: none; }

/* Tables: styled like the comparison table, scroll sideways on phones */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.table-wrap th, .table-wrap td { padding: 13px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line-soft); }
.table-wrap thead th { border-top: 0; background: var(--surface-2); color: var(--text-3); font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.table-wrap td { color: var(--text-2); }
.table-wrap td:first-child, .table-wrap tbody th { color: var(--text); font-weight: 600; }
.table-wrap caption { padding: 12px 16px 0; color: var(--text-3); font-size: 14px; text-align: left; caption-side: bottom; }

/* FAQs at the end of an article */
.prose .article-faq h2 { margin-bottom: 18px; }
.prose .faq p { font-size: 16px; }

/* Step copy on inner pages: tick list and guide link, sized to sit with the step text */
.step__copy .plan__features { gap: 12px; font-size: 16px; color: var(--text-2); }
.step__copy .plan__features li { align-items: flex-start; }
.step__copy .plan__features .icon { margin-top: 3px; }
.link-arrow { color: var(--accent); font-weight: 600; transition: opacity .2s; }
.link-arrow:hover { opacity: .8; }

/* Buy-a-key boxes inside articles (flagged addition, panel look) */
.prose .post-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 36px 0; padding: 25px 25px 27px; border: 1px solid rgba(200, 255, 46, .28); border-radius: var(--r-xl, 24px); background: linear-gradient(135deg, rgba(200, 255, 46, .1) 0%, rgba(140, 200, 0, .04) 55%, rgba(255, 255, 255, .02) 100%); }
.prose .post-cta__title { color: var(--text); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.prose .post-cta p:not(.post-cta__title):not(.eyebrow) { font-size: 16px; }
.prose .post-cta .cover__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.prose .post-cta a.btn { text-decoration: none; }
.prose .post-cta a.btn--primary { color: var(--on-accent); }
.prose .post-cta a.btn--ghost { color: var(--text); }
.post-cta__proof { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; }
.post-cta__proof figure { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.post-cta__proof img { border-radius: 14px; border: 1px solid var(--line); background: #0f1a2b; }
.post-cta__proof figcaption { color: var(--text-3); font-family: var(--font-mono); font-size: 12px; text-align: left; }
@media (min-width: 810px) {
  .post-cta__proof { grid-template-columns: 1fr 1.6fr; align-items: center; }
}

/* Article image groups (flagged addition) */
.prose-shots { display: grid; grid-template-columns: 1fr; gap: 14px; }
.prose-shots figure, .prose-shot { margin: 0; }
.prose-shots img { border: 1px solid var(--line); background: #0f1a2b; }
@media (min-width: 810px) { .prose-shots { grid-template-columns: 1fr 1.4fr; align-items: end; } }

/* Sniped-card gallery in articles: small cards, name and price under each */
.snipe-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 14px; padding: 22px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(60% 60% at 50% 40%, rgba(200, 255, 46, .08), transparent 70%), var(--surface); }
.snipe-gallery figure { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.prose .snipe-gallery img { width: 100%; max-width: 128px; height: auto; border-radius: 0; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.snipe-gallery figcaption { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 0; text-align: center; line-height: 1.3; }
.snipe-gallery b { color: var(--text); font-size: 14px; font-weight: 600; }
.snipe-gallery span { color: var(--accent); font-family: var(--font-mono); font-size: 13px; }
.snipe-gallery i { color: var(--text-3); font-size: 12px; font-style: normal; }
@media (min-width: 810px) { .snipe-gallery { grid-template-columns: repeat(4, 1fr); padding: 26px 24px; } }

/* CTA panel used inside articles */
.prose .cta__panel--post { position: relative; overflow: hidden; margin: 44px 0; text-align: center; align-items: center; }
.prose .cta__panel--post .h2 { position: relative; color: var(--text); font-size: clamp(28px, 4vw, 40px); }
.prose .cta__panel--post .lead { position: relative; max-width: 520px; margin: 14px auto 0; font-size: var(--fs-lead); text-wrap: balance; }
.prose .cta__panel--post .cta__actions { position: relative; justify-content: center; margin-top: 22px; }
.prose .cta__panel--post a.btn { text-decoration: none; }
.prose .cta__panel--post a.btn--primary { color: var(--on-accent); }
.prose .cta__panel--post a.btn--ghost { color: var(--text); }
.prose .cta__panel--proof .eyebrow { position: relative; margin: 0 auto 14px; }
.prose .cta__panel--proof .post-cta__proof { position: relative; margin-top: 22px; text-align: left; }
.prose .cta__panel--proof .post-cta__proof figcaption { text-align: center; }

/* Snipe of the week (flagged addition): the metrics panel with the card beside it */
.sotw__panel { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; max-width: var(--max-narrow); padding: 31px 23px; border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(200, 255, 46, .1) 0%, rgba(140, 200, 0, .05) 52%, rgba(255, 255, 255, .02) 100%); }
.sotw__card { position: relative; flex: none; width: 180px; }
.sotw__card::before { content: ""; position: absolute; inset: 10% 5%; border-radius: 50%; background: rgba(200, 255, 46, .35); filter: blur(46px); }
.sotw__card img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); }
.sotw__stats { display: grid; grid-template-columns: 1fr; gap: 24px; width: 100%; }
.sotw__gain { color: var(--accent); }
@media (min-width: 810px) {
  .sotw__panel { flex-direction: row; gap: 48px; padding: 40px 48px; }
  .sotw__card { width: 210px; }
  .sotw__stats { grid-template-columns: repeat(3, 1fr); }
}

/* Plan saving line under the price */
.plan__save { margin-top: -4px; color: var(--accent); font-size: 12px; }
.billing button[aria-pressed="true"] .mono { color: var(--on-accent); opacity: .7; }
/* Contact: the section's own glow is clipped at its top edge on phones (the cover glow above already covers it) */
@media (max-width: 809px) { .contact > .glow--cover { display: none; } }

/* Snipe of the week: the real buy and sale screenshots, stats underneath */
.sotw .sotw__panel { flex-direction: column; align-items: stretch; }
.sotw__shots { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.sotw__shots figure { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.sotw__shots img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.sotw__shots figure:first-child img { max-width: 300px; }
.sotw__shots figcaption { color: var(--accent); font-size: 13px; }
@media (min-width: 810px) {
  .sotw .sotw__panel { flex-direction: column; gap: 36px; }
  .sotw__shots { grid-template-columns: .75fr 1.25fr; gap: 28px; }
}
/* How it works: the small number boxes are hidden on phones */
@media (max-width: 809px) { .how .stat-chip { display: none; } }

/* Plans section: the plan cards on top, any note underneath (Buy page) */
.plans { flex-direction: column; align-items: center; gap: 22px; }
.plans > .section-note { max-width: 640px; margin: 0; text-align: center; color: var(--text-3); }

/* Contact form result line */
.form__status { min-height: 1.4em; margin: 0; color: var(--text-2); }
.form__status.is-ok { color: var(--accent); }
.form__status.is-error { color: #ff6b78; }

/* Price tab: Total price is the default; Per month invites a click with a lime saving badge */
.billing button.billing__deal .mono { padding: 4px 10px; border-radius: 99px; background: var(--accent); color: var(--on-accent); opacity: 1; font-size: 13px; font-weight: 600; box-shadow: 0 0 16px rgba(200, 255, 46, .45); }
.billing__deal[aria-pressed="false"] { color: var(--accent); }
.billing__deal[aria-pressed="false"]:hover { background: rgba(200, 255, 46, .1); }
.billing button.billing__deal[aria-pressed="true"] .mono { background: var(--on-accent); color: var(--accent); opacity: 1; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .billing__deal[aria-pressed="false"] .mono { animation: deal-pulse 2.4s ease-in-out infinite; }
  @keyframes deal-pulse { 50% { box-shadow: 0 0 26px rgba(200, 255, 46, .75); } }
}

/* Cookie choice: a floating panel in the site's style */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 18px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: radial-gradient(280px 140px at 90% -40px, rgba(200, 255, 46, .1), transparent 70%), rgba(14, 16, 22, .94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
  opacity: 0; transform: translateY(20px);
  transition: opacity .35s var(--ease-io), transform .5s var(--spring);
}
.cookie.is-open { opacity: 1; transform: none; }
.cookie__title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.cookie__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.cookie__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions { display: flex; gap: 8px; margin-top: 4px; }
.cookie__actions .btn { flex: 1; padding: 11px 16px; font-size: 14px; }
@media (min-width: 810px) {
  .cookie { left: auto; right: 24px; bottom: 24px; width: 420px; padding: 22px; }
  .cookie__actions .btn { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }
/* Cookie choice: centred along the bottom on larger screens */
@media (min-width: 810px) {
  .cookie { left: 50%; right: auto; width: min(640px, calc(100% - 48px)); flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 20px; transform: translate(-50%, 20px); }
  .cookie.is-open { transform: translate(-50%, 0); }
  .cookie__title { flex-basis: 100%; }
  .cookie__text { flex: 1 1 300px; }
  .cookie__actions { margin-top: 0; }
}

/* Steps: on phones and tablets every step reads text first, then its image
   (on desktop the flipped steps still alternate sides) */
@media (max-width: 1199px) { .step--flip .step__copy { order: -1; } }

/* Homepage stats: three numbers share the full width */
@media (min-width: 810px) { .metrics .metrics__panel { grid-template-columns: repeat(3, 1fr); } }
/* Homepage stats: each number and label centred in its column */
.metrics .metric { display: flex; flex-direction: column; align-items: center; text-align: center; }
.metrics .metrics__note { text-align: center; }