/* ==========================================================================
   Budfront — marketing site styles
   Edit the tokens in :root to re-skin the whole site.
   ========================================================================== */

:root {
  /* Brand colors */
  --ink: #1d1d1b;
  --ink-2: #3b3b38;
  --muted: #6e6e69;
  --muted-2: #717169;
  --line: #e8e3db;
  --paper: #fbf9f6;
  --cream: #f4ece2;
  --cream-2: #efe5d8;
  --white: #ffffff;

  --forest: #0d3b26;       /* primary buttons, dark text on green */
  --forest-2: #12502f;
  --green-700: #0f7a35;
  --green-600: #18a447;
  --green-500: #22c55e;
  --green-300: #7ee2a0;
  --mint: #cdf2da;
  --mint-2: #e6f8ec;

  --amber: #e8892a;
  --red: #d9482b;

  /* Type */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Layout */
  --container: 1232px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 32px;
  --radius-xl: 44px;

  --shadow-sm: 0 1px 2px rgba(20, 20, 18, .06), 0 2px 8px rgba(20, 20, 18, .05);
  --shadow: 0 10px 30px -10px rgba(20, 20, 18, .18), 0 2px 6px rgba(20, 20, 18, .06);
  --shadow-lg: 0 30px 80px -20px rgba(10, 40, 25, .35), 0 8px 20px rgba(10, 40, 25, .12);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--green-600); outline-offset: 3px; border-radius: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--forest); color: var(--white); padding: 10px 16px; border-radius: 10px;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.section--paper { background: var(--paper); }
.section--rounded {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: calc(var(--radius-xl) * -1);
  position: relative;
  z-index: 1;
}

/* ---------- Typography ---------- */
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.03;
  color: var(--ink);
}
.h1 { font-size: clamp(44px, 6.6vw, 88px); }
.h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; }
.h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.025em; line-height: 1.15; }
.h2 .soft, .h1 .soft { color: var(--muted); }
.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); line-height: 1.5; }
.eyebrow { font-size: 14px; color: var(--ink-2); font-weight: 500; letter-spacing: -0.005em; }
.muted { color: var(--muted); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--forest);
  --btn-fg: #f6f1ea;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: 16px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(13, 59, 38, .55); }
.btn:active { transform: translateY(0); }
.btn--sm { height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--light { --btn-bg: #f2f2f0; --btn-fg: #3d3d3a; }
.btn--light:hover { box-shadow: var(--shadow-sm); }
.btn--white { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--glass { --btn-bg: rgba(255, 255, 255, .22); --btn-fg: var(--white); backdrop-filter: blur(6px); }
.btn--glass:hover { --btn-bg: rgba(255, 255, 255, .32); box-shadow: none; }
.btn svg { width: 16px; height: 16px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: #efeee9; color: var(--ink);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover { background: #e4e2dc; }
.icon-btn:disabled { opacity: .4; cursor: default; }
.icon-btn svg { width: 18px; height: 18px; }

.stars { display: inline-flex; gap: 2px; color: var(--ink); }
.stars svg { width: 15px; height: 15px; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.04em; color: var(--ink); }
.logo__mark { width: 26px; height: 26px; color: var(--forest); }
.logo--lg { font-size: 30px; }
.logo--lg .logo__mark { width: 34px; height: 34px; }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav__link:hover, .nav__item.is-open > .nav__link { background: #f3f2ee; color: var(--ink); }
.nav__link svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__login { padding: 10px 12px; font-weight: 500; font-size: 15px; color: var(--ink-2); border-radius: 10px; }
.nav__login:hover { background: #f3f2ee; }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 6px);
  min-width: 260px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__item.is-open .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.dropdown--mega { display: grid; grid-template-columns: repeat(4, 220px); gap: 8px; padding: 20px; left: 0; transform: translate(-22%, 6px); }
.nav__item.is-open .dropdown--mega { transform: translate(-22%, 0); }
.dropdown__title { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); padding: 6px 10px 8px; }
.dropdown__link { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 12px; transition: background-color .15s var(--ease); }
.dropdown__link:hover { background: #f5f4f0; }
.dropdown__link strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.dropdown__link span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; }
.dropdown__icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; background: var(--mint-2); color: var(--forest); display: grid; place-items: center; }
.dropdown__icon svg { width: 17px; height: 17px; }

.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--forest); color: var(--white); vertical-align: middle; margin-left: 6px; letter-spacing: 0; }
.badge--muted { background: #e9e7e1; color: #5b5b56; }
.dropdown__link span.badge { display: inline-flex; font-size: 10.5px; height: 18px; color: var(--white); }
.dropdown__link span.badge--muted { color: #5b5b56; }

.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .25s var(--ease), background-color .25s; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav.is-menu-open .nav__toggle span { background: transparent; }
.nav.is-menu-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-menu-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu { display: none; }

@media (max-width: 1080px) {
  .dropdown--mega { grid-template-columns: repeat(2, 220px); transform: translate(-30%, 6px); }
  .nav__item.is-open .dropdown--mega { transform: translate(-30%, 0); }
}
@media (max-width: 920px) {
  .nav__links, .nav__login, .nav__actions .btn { display: none; }
  .nav__toggle { display: inline-flex; }
  .mobile-menu {
    display: block; position: fixed; inset: 72px 0 0 0; z-index: 99;
    background: var(--white); overflow-y: auto;
    padding: 12px var(--gutter) 40px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav.is-menu-open + .mobile-menu { opacity: 1; visibility: visible; transform: none; }
  .mobile-menu details { border-bottom: 1px solid var(--line); }
  .mobile-menu summary, .mobile-menu > a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; list-style: none; cursor: pointer; }
  .mobile-menu > a { border-bottom: 1px solid var(--line); }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
  .mobile-menu details[open] summary svg { transform: rotate(180deg); }
  .mobile-menu details ul { padding: 0 0 16px; display: grid; gap: 2px; }
  .mobile-menu details a { display: block; padding: 8px 0; color: var(--ink-2); font-size: 16px; }
  .mobile-menu__cta { display: grid; gap: 10px; margin-top: 24px; }
  .mobile-menu__cta .btn { width: 100%; height: 52px; }
  body.menu-open { overflow: hidden; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: clamp(40px, 6vw, 72px) 0 0; text-align: center; }
.rating { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.rating strong { color: var(--ink); font-weight: 600; }
.hero__title { margin: 22px auto 0; font-size: clamp(36px, 5.6vw, 78px); text-wrap: balance; }
.rotator { display: grid; height: 1.08em; overflow: hidden; text-align: center; }
.rotator__word {
  grid-area: 1 / 1; white-space: nowrap;
  transform: translateY(105%); opacity: 0;
  transition: transform .7s var(--ease), opacity .5s var(--ease);
  padding-bottom: .06em;
}
.rotator__word.is-active { transform: translateY(0); opacity: 1; }
.rotator__word.is-leaving { transform: translateY(-105%); opacity: 0; }

.search-form {
  margin: clamp(28px, 3.4vw, 40px) auto 0;
  max-width: 470px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(20, 20, 18, .06), 0 10px 30px -8px rgba(20, 120, 60, .25), 0 0 0 6px rgba(126, 226, 160, .18);
  position: relative; z-index: 3;
}
.search-form input {
  flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; padding: 0 12px;
  background: transparent; font-size: 15px;
}
.search-form input::placeholder { color: var(--muted-2); }
.search-form .btn { height: 46px; border-radius: 13px; }
.search-form .btn svg { transform: rotate(45deg); }
.form-hint { min-height: 20px; margin-top: 10px; font-size: 13px; color: var(--red); }

.hero__stage { position: relative; margin-top: clamp(24px, 3vw, 36px); padding-top: 0; }
.hero__panel {
  position: relative;
  height: clamp(320px, 36vw, 470px);
  margin-top: clamp(40px, 6vw, 64px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 0% 0%, #0b8c34 0%, rgba(11, 140, 52, 0) 60%),
    radial-gradient(80% 120% at 100% 100%, #d7f7e0 0%, rgba(215, 247, 224, 0) 60%),
    linear-gradient(105deg, #0c9a37 0%, #1fbb4f 38%, #63d985 66%, #bdf0cb 100%);
}
.hero__panel .lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .22; }
.hero__phone { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 2; }
.hero__phone .phone--cropped { --h: calc(clamp(320px, 36vw, 470px) + clamp(56px, 6vw, 84px)); }

/* ==========================================================================
   Phone mockup
   ========================================================================== */
.phone {
  --w: 300px;
  width: var(--w);
  aspect-ratio: 300 / 610;
  border-radius: calc(var(--w) * .16);
  padding: calc(var(--w) * .035);
  background: linear-gradient(145deg, #2c2c2e, #0f0f10 40%, #2a2a2c);
  box-shadow: inset 0 0 0 2px #3b3b3e, inset 0 0 0 5px #111, var(--shadow-lg);
  position: relative;
}
.phone::before, .phone::after { /* side buttons */
  content: ""; position: absolute; width: 3px; border-radius: 2px; background: #1b1b1c;
}
.phone::before { left: -3px; top: 22%; height: 9%; box-shadow: 0 calc(var(--w) * .2) 0 #1b1b1c; }
.phone::after { right: -3px; top: 28%; height: 14%; }
.phone__screen {
  width: 100%; height: 100%;
  border-radius: calc(var(--w) * .13);
  background: #fbfaf7;
  overflow: hidden; position: relative;
  text-align: left;
  font-size: calc(var(--w) * .045);
}
.phone__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--w) * .05) calc(var(--w) * .075) 0;
  height: calc(var(--w) * .14);
  font-weight: 600; font-size: calc(var(--w) * .05); letter-spacing: -0.01em;
  position: relative; z-index: 2;
}
.phone__island {
  position: absolute; left: 50%; top: calc(var(--w) * .035);
  transform: translateX(-50%);
  width: 34%; height: calc(var(--w) * .085);
  border-radius: 999px; background: #0b0b0c;
}
.phone__icons { display: inline-flex; gap: 4px; align-items: center; }
.phone__icons svg { height: calc(var(--w) * .038); width: auto; }
.phone__body { padding: calc(var(--w) * .03) calc(var(--w) * .055); }
.phone--sm { --w: 240px; }
.phone--md { --w: 270px; }
.phone--lg { --w: 320px; }
.phone--cropped { aspect-ratio: auto; height: var(--h, 420px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; }
.phone--cropped .phone__screen { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Report screen (hero) */
.report__head { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.report__avatar { width: 2.6em; height: 2.6em; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #b6e8a8, #3c9a4f 60%, #1d5e30); display: grid; place-items: center; color: #eaffea; }
.report__avatar svg { width: 60%; height: 60%; }
.report__title { font-family: var(--font-display); font-weight: 600; font-size: 1.32em; letter-spacing: -0.03em; }
.report__card { background: linear-gradient(180deg, #fbf2e6, #f6ecdf); border-radius: 1em; padding: 1em .9em .6em; }
.gauge { position: relative; width: 66%; margin: 0 auto; }
.gauge svg { width: 100%; height: auto; transform: rotate(135deg); }
.gauge__track { fill: none; stroke: #e7ddd0; stroke-width: 9; stroke-linecap: round; }
.gauge__value { fill: none; stroke: url(#gaugeGrad); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease); }
.gauge__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge__num { font-family: var(--font-display); font-weight: 600; font-size: 2.6em; letter-spacing: -0.04em; line-height: 1; }
.gauge__of { color: var(--muted); font-size: .8em; margin-top: 2px; }
.report__status { text-align: center; margin-top: -.6em; }
.report__status small { display: block; color: var(--muted); font-size: .8em; }
.report__status strong { display: block; color: var(--amber); font-family: var(--font-display); font-size: 1.35em; letter-spacing: -0.02em; }
.report__rows { margin-top: .7em; display: grid; gap: .55em; }
.report__row { display: grid; grid-template-columns: 1.4em 1fr auto; align-items: center; gap: .6em; font-size: .82em; }
.report__row b { display: block; font-weight: 600; color: var(--ink); }
.report__row i { font-style: normal; color: var(--amber); }
.report__row i.fair { color: #d6a52b; }
.report__row .score { color: var(--muted); font-variant-numeric: tabular-nums; }
.ring { width: 1.4em; height: 1.4em; border-radius: 50%; background: conic-gradient(var(--amber) calc(var(--p) * 1%), #ead9c6 0); -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%); mask: radial-gradient(circle, transparent 46%, #000 48%); }
.report__beating { margin-top: .8em; background: var(--white); border-radius: 1em; padding: .8em .9em; box-shadow: var(--shadow-sm); font-weight: 600; font-size: .9em; }

/* ==========================================================================
   Owner results marquee
   ========================================================================== */
.results { padding-bottom: clamp(64px, 8vw, 112px); }
.results .h2 { margin-bottom: clamp(28px, 3vw, 40px); }
.marquee { position: relative; overflow: hidden; }
.marquee__track { display: flex; gap: 6px; width: max-content; animation: marquee var(--speed, 60s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.result-card {
  position: relative; flex: 0 0 auto;
  width: 300px; height: 400px;
  border-radius: 22px; overflow: hidden;
  color: var(--white);
  isolation: isolate;
}
.result-card__art { position: absolute; inset: 0; z-index: -2; }
.result-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }
.result-card__tag { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
.result-card__body { position: absolute; left: 22px; right: 22px; bottom: 22px; }
.result-card__stat { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -0.03em; line-height: 1.05; }
.result-card__label { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.03em; line-height: 1.1; color: rgba(255,255,255,.72); margin-top: 2px; }
.result-card__who { margin-top: 14px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.9); }

/* Generated art used in cards */
.art { position: absolute; inset: 0; overflow: hidden; }
.art .art__icon { position: absolute; right: -14%; top: 4%; width: 92%; height: auto; color: rgba(255,255,255,.18); }
.art__mono {
  position: absolute; left: 22px; top: 22px;
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.03em;
  background: rgba(255,255,255,.18); color: var(--white);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
}
.art--1 { background: radial-gradient(120% 90% at 20% 10%, #2f9e5b 0%, #145c35 55%, #0b3320 100%); }
.art--2 { background: radial-gradient(120% 90% at 80% 0%, #c98b54 0%, #7c4a2a 55%, #3b2416 100%); }
.art--3 { background: radial-gradient(120% 90% at 10% 0%, #8b7cf6 0%, #4b3aa8 55%, #231a5c 100%); }
.art--4 { background: radial-gradient(120% 90% at 90% 10%, #f1b24a 0%, #c06a1f 55%, #5e2e0c 100%); }
.art--5 { background: radial-gradient(120% 90% at 20% 0%, #4fb3c9 0%, #1f6f86 55%, #0d3442 100%); }
.art--6 { background: radial-gradient(120% 90% at 70% 0%, #e07a8f 0%, #a13a57 55%, #4a1526 100%); }
.art--7 { background: radial-gradient(120% 90% at 30% 0%, #9ccf5a 0%, #4d8a24 55%, #213d0e 100%); }
.art--8 { background: radial-gradient(120% 90% at 80% 10%, #8aa0b8 0%, #46586e 55%, #1c2531 100%); }

/* ==========================================================================
   Tabs ("more traffic, more sales…")
   ========================================================================== */
.tabs__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.tab {
  text-align: left; padding: 12px 0 14px;
  font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--muted-2);
  position: relative;
  transition: color .2s var(--ease);
}
.tab::before, .tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; }
.tab::before { right: 0; background: var(--line); }
.tab::after { width: 0; background: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { animation: tabprogress var(--tab-duration, 7s) linear forwards; }
.tabs.is-paused .tab[aria-selected="true"]::after, .tabs.is-manual .tab[aria-selected="true"]::after { animation: none; width: 100%; }
.tab:hover { color: var(--ink-2); }
@keyframes tabprogress { from { width: 0; } to { width: 100%; } }

.tab-panel {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 64px);
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 72px);
  min-height: 520px;
  overflow: hidden;
}
.tab-panel[hidden] { display: none; }
.tab-panel.is-entering .tab-panel__copy, .tab-panel.is-entering .tab-panel__visual { animation: fadeUp .6s var(--ease) both; }
.tab-panel.is-entering .tab-panel__visual { animation-delay: .08s; }
.tab-panel__copy .eyebrow { margin-bottom: 14px; }
.tab-panel__copy .h3 { max-width: 420px; }
.tab-panel__copy p { margin-top: 16px; max-width: 420px; color: var(--ink-2); }
.tab-panel__copy .checks { margin-top: 22px; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.checks svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--green-600); margin-top: 1px; }
.tab-panel__visual { position: relative; display: grid; place-items: center; min-height: 380px; }
.tab-panel__visual > * { max-width: 100%; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Mock search UI */
.mock-search { width: min(420px, 100%); }
.mock-search__bar {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 18px; border-radius: 999px;
  background: var(--white); box-shadow: var(--shadow);
  font-size: 15px; color: var(--ink);
}
.mock-search__bar svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; background: var(--ink); margin-left: 1px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mock-results { margin-top: 14px; display: grid; gap: 10px; }
.mock-result {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  background: var(--white); border-radius: 16px; padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mock-result.is-shown { opacity: 1; transform: none; }
.mock-result--you { box-shadow: 0 0 0 2px var(--green-500), var(--shadow); }
.mock-result__thumb { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--white); }
.mock-result__thumb svg { width: 22px; height: 22px; }
.mock-result b { display: block; font-size: 14.5px; letter-spacing: -0.01em; }
.mock-result small { display: block; font-size: 12.5px; color: var(--muted); }
.mock-result .pill { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--mint); color: var(--forest); }
.mock-result .rank { font-family: var(--font-display); font-weight: 600; color: var(--muted-2); }

/* Mock product / menu UI */
.mock-menu { width: min(440px, 100%); display: grid; gap: 12px; }
.product-card {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center;
  background: var(--white); border-radius: 18px; padding: 12px; box-shadow: var(--shadow-sm);
}
.product-card__img { width: 76px; height: 76px; border-radius: 14px; display: grid; place-items: center; position: relative; overflow: hidden; }
.product-card__img svg { width: 56%; height: 56%; color: rgba(255,255,255,.92); }
.product-card__new { position: absolute; top: 6px; left: 6px; font-size: 9.5px; font-weight: 700; background: #d6ff5c; color: #1e3a00; padding: 2px 6px; border-radius: 6px; }
.product-card b { display: block; font-size: 15.5px; letter-spacing: -0.015em; }
.product-card small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.product-card .chips { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.chip { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #f2efe9; color: var(--ink-2); }
.chip--indica { background: #ece7ff; color: #4b3aa8; }
.chip--sativa { background: #fff1d6; color: #9a5b00; }
.chip--hybrid { background: var(--mint); color: var(--forest); }
.product-card__price { font-weight: 600; font-size: 14px; text-align: right; }
.add-btn { margin-top: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--forest); color: var(--white); display: grid; place-items: center; margin-left: auto; transition: transform .2s var(--ease); }
.add-btn:hover { transform: scale(1.08); }
.add-btn svg { width: 16px; height: 16px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--white);
  border-radius: 14px; padding: 12px 14px; font-size: 14px;
  box-shadow: var(--shadow);
  justify-self: center;
}
.toast svg { width: 18px; height: 18px; color: var(--green-300); }
.toast b { font-weight: 600; }
.pop-in { animation: popIn .5s var(--ease) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* Mock SMS */
.mock-sms { width: min(380px, 100%); display: grid; gap: 10px; }
.sms-head { display: flex; align-items: center; gap: 10px; justify-content: center; flex-direction: column; margin-bottom: 6px; }
.sms-head__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--forest); color: var(--green-300); display: grid; place-items: center; }
.sms-head__avatar svg { width: 26px; height: 26px; }
.sms-head small { font-size: 12px; color: var(--muted); }
.bubble { max-width: 86%; padding: 11px 14px; border-radius: 20px; font-size: 14.5px; line-height: 1.4; box-shadow: var(--shadow-sm); }
.bubble--in { background: var(--white); border-bottom-left-radius: 6px; }
.bubble--out { background: #2f80ed; color: var(--white); justify-self: end; border-bottom-right-radius: 6px; }
.bubble small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.bubble a { color: #1f6fd6; font-weight: 500; }
.sms-stat { justify-self: center; margin-top: 8px; background: var(--forest); color: var(--white); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }
.sms-stat svg { width: 16px; height: 16px; color: var(--green-300); }

/* Mock loyalty */
.loyalty-card {
  width: 360px; max-width: 100%;
  border-radius: 26px; padding: 22px; color: var(--white);
  background: radial-gradient(120% 120% at 100% 0%, #2cbf62 0%, #0f6b37 45%, #0b3a22 100%);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.loyalty-card .art__icon { position: absolute; right: -30px; top: -20px; width: 200px; color: rgba(255,255,255,.12); }
.loyalty-card small { font-size: 13px; color: rgba(255,255,255,.75); }
.loyalty-card__pts { font-family: var(--font-display); font-weight: 600; font-size: 46px; letter-spacing: -0.04em; line-height: 1; margin-top: 6px; }
.loyalty-card__bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.2); margin: 18px 0 8px; overflow: hidden; }
.loyalty-card__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: #d6ff5c; transition: width 1.4s var(--ease); }
.loyalty-card__foot { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: rgba(255,255,255,.85); }
.reward-list { width: 360px; max-width: 100%; margin-top: 14px; display: grid; gap: 8px; }
.reward { display: flex; justify-content: space-between; align-items: center; background: var(--white); border-radius: 14px; padding: 12px 14px; font-size: 14px; box-shadow: var(--shadow-sm); }
.reward span { color: var(--muted); font-size: 13px; }
.reward b { font-weight: 600; }

/* ==========================================================================
   Reviews (green)
   ========================================================================== */
.reviews {
  color: var(--white); text-align: center;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(160, 240, 185, .55) 0%, rgba(160, 240, 185, 0) 100%),
    linear-gradient(180deg, #49c574 0%, #1fa64b 45%, #0f7f34 100%);
  overflow: hidden;
  padding-bottom: calc(clamp(72px, 9vw, 128px) + var(--radius-xl));
}
.reviews .lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; pointer-events: none; }
.reviews .h2 { color: var(--white); max-width: 760px; margin: 0 auto; font-size: clamp(38px, 5vw, 64px); }
.reviews__badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.pill-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 12px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); font-size: 14px; font-weight: 500; }
.pill-badge__icon { width: 26px; height: 26px; border-radius: 50%; background: var(--white); color: var(--forest); display: grid; place-items: center; }
.pill-badge__icon svg { width: 15px; height: 15px; }
.reviews .rating { margin-top: 22px; color: rgba(255,255,255,.75); }
.reviews .rating strong, .reviews .stars { color: var(--white); }
.reviews__rows { margin-top: 36px; display: grid; gap: 8px; position: relative; }
.review-card {
  flex: 0 0 auto; width: 272px; min-height: 200px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: left; color: var(--ink);
  background: var(--mint);
  border-radius: 18px; padding: 18px;
}
.review-card .stars { color: var(--ink); }
.review-card .stars svg { width: 13px; height: 13px; }
.review-card q { display: block; margin-top: 10px; font-size: 15px; line-height: 1.4; quotes: "\201C" "\201D"; letter-spacing: -0.01em; }
.review-card__who { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; }
.avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--white); flex: 0 0 auto; }

/* ==========================================================================
   Big-brand tech (bento)
   ========================================================================== */
.tech .h2 { max-width: 640px; margin-bottom: clamp(32px, 4vw, 48px); }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bento__card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 400px; }
.bento__card--wide { grid-column: 1 / -1; min-height: clamp(420px, 46vw, 600px); background: radial-gradient(90% 120% at 70% 30%, #5a4a3a 0%, #2c241d 55%, #17130f 100%); }
.bento__card--green { background: radial-gradient(120% 100% at 0% 0%, #84e6a3 0%, #2dbb5c 45%, #0e8a37 100%); }
.bento__card--cream { background: var(--cream); }
.bento__caption { position: absolute; left: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 36px); max-width: 380px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.25; letter-spacing: -0.02em; }
.bento__card--wide .bento__caption, .bento__card--green .bento__caption { color: var(--white); }
.bento__card--wide .phone { position: absolute; right: 18%; top: 12%; transform: rotate(-12deg); }
.bento__card--wide .glow { position: absolute; right: 8%; top: 0; width: 60%; height: 100%; background: radial-gradient(closest-side, rgba(255, 200, 140, .25), transparent); }
.bento__card .mock-search { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: 72%; }
.bento__card .product-card { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: 72%; max-width: 360px; }

/* App screen inside phone */
.app-hero { height: 38%; position: relative; background: radial-gradient(120% 100% at 30% 20%, #7fd18f 0%, #2f8f49 45%, #134d27 100%); margin: calc(var(--w) * -.14) calc(var(--w) * -.055) 0; display: grid; place-items: center; }
.app-hero svg { width: 46%; color: rgba(255,255,255,.35); }
.app-store { text-align: center; margin-top: -1.1em; position: relative; }
.app-store__logo { width: 2.4em; height: 2.4em; margin: 0 auto; border-radius: 50%; background: var(--forest); color: var(--green-300); display: grid; place-items: center; border: 3px solid #fbfaf7; }
.app-store__logo svg { width: 55%; height: 55%; }
.app-store b { display: block; font-family: var(--font-display); font-size: 1.25em; letter-spacing: -0.03em; margin-top: .3em; }
.app-store small { display: block; color: var(--muted); font-size: .72em; }
.app-store .open { color: var(--green-600); font-weight: 600; font-size: .72em; }
.app-toggle { display: grid; grid-template-columns: 1fr 1fr; background: #efede8; border-radius: 999px; padding: 3px; margin: .8em 0 .6em; font-size: .78em; text-align: center; }
.app-toggle span { padding: .45em 0; border-radius: 999px; }
.app-toggle span:first-child { background: var(--white); box-shadow: var(--shadow-sm); font-weight: 600; }
.app-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; font-size: .7em; }
.app-meta span { background: #f3f1ec; padding: .5em .6em; border-radius: .6em; }
.app-cats { display: flex; gap: 1em; font-size: .75em; margin-top: .9em; color: var(--muted); border-bottom: 1px solid #ece9e3; }
.app-cats span { padding-bottom: .4em; }
.app-cats span:first-child { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); }
.app-offer { display: flex; align-items: center; gap: .6em; margin-top: .8em; padding: .6em; border-radius: .7em; background: var(--mint-2); font-size: .72em; }
.app-offer i { width: 1.8em; height: 1.8em; border-radius: .5em; background: var(--green-500); display: grid; place-items: center; color: var(--white); font-style: normal; font-weight: 700; }
.app-item { display: flex; justify-content: space-between; align-items: center; margin-top: .8em; font-size: .75em; }
.app-item__img { width: 3.2em; height: 3.2em; border-radius: .7em; background: radial-gradient(circle at 30% 30%, #b5d98a, #4b7d2b); }

/* ==========================================================================
   Compliance features grid
   ========================================================================== */
.compliance { background: var(--white); }
.compliance__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.feature {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); background: var(--white); }
.feature__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--forest); color: var(--green-300); display: grid; place-items: center; }
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { margin-top: 20px; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; font-weight: 600; }
.feature p { margin-top: 8px; color: var(--muted); font-size: 15px; }

/* ==========================================================================
   How it works
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: step; }
.step { background: var(--white); border-radius: var(--radius); padding: 28px; position: relative; border: 1px solid var(--line); }
.step__num { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--forest); background: var(--mint); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.step h3 { margin-top: 18px; font-family: var(--font-display); font-size: 21px; letter-spacing: -0.02em; font-weight: 600; }
.step p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.step__time { margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--green-700); }

/* ==========================================================================
   Testimonial carousel
   ========================================================================== */
.carousel { position: relative; }
.carousel__viewport {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2));
  scroll-padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2));
  scrollbar-width: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.story {
  flex: 0 0 min(var(--container), calc(100vw - var(--gutter) * 2));
  scroll-snap-align: start;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 12px;
  min-height: 560px;
  position: relative; overflow: hidden;
}
.story .contour { position: absolute; left: 0; top: 0; width: 55%; height: 100%; opacity: .5; pointer-events: none; }
.story__copy { position: relative; padding: clamp(20px, 3.4vw, 44px); display: flex; flex-direction: column; }
.story__quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.025em; line-height: 1.18; }
.story__name { margin-top: 18px; color: var(--ink-2); font-size: 16px; }
.story__copy .btn { margin-top: 22px; align-self: flex-start; }
.story__stats { margin-top: auto; padding-top: 40px; display: flex; gap: 36px; }
.story__stats b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.03em; line-height: 1.1; }
.story__stats span { font-size: 13px; color: var(--ink-2); }
.story__media { position: relative; border-radius: 24px; overflow: hidden; min-height: 300px; }
.story__media .art__icon { right: auto; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 48%; color: rgba(255,255,255,.2); }
.story__media .art__mono { width: 72px; height: 72px; font-size: 28px; border-radius: 22px; }
.story__media-caption { position: absolute; left: 22px; bottom: 22px; right: 22px; color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story__media-caption small { font-size: 13px; opacity: .85; }
.play { width: 52px; height: 52px; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow); flex: 0 0 auto; }
.play svg { width: 18px; height: 18px; margin-left: 3px; }
.carousel__controls { display: flex; gap: 8px; }
.carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.carousel__dots button { width: 8px; height: 8px; border-radius: 99px; background: #d9d6cf; transition: width .3s var(--ease), background-color .3s; }
.carousel__dots button[aria-current="true"] { width: 24px; background: var(--ink); }

/* ==========================================================================
   Beliefs
   ========================================================================== */
.beliefs { background: var(--paper); }
.beliefs__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 80px); }
.beliefs__left { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.founder { display: grid; gap: 10px; }
.founder__photo { width: 168px; height: 168px; border-radius: 26px; overflow: hidden; position: relative; background: linear-gradient(160deg, #e9e6df, #cfcac0); display: grid; place-items: center; }
.founder__photo span { font-family: var(--font-display); font-weight: 700; font-size: 56px; letter-spacing: -0.04em; color: var(--forest); }
.founder__sig { width: 120px; height: 52px; margin: -36px 0 0 -14px; color: var(--ink); position: relative; }
.founder small { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.belief { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.belief:last-child { border-bottom: 1px solid var(--line); }
.belief h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; }
.belief p { font-size: 15px; color: var(--ink-2); }
.belief p + p { margin-top: 12px; }

/* ==========================================================================
   Guides
   ========================================================================== */
.guides { background: #fdfcfa; }
.guides .h2 { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); }
.guides__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guides__right { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 10px; }
.guide {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 240px; color: var(--white);
  display: flex; align-items: flex-end; padding: 22px;
  isolation: isolate;
  transition: transform .3s var(--ease);
}
.guide:hover { transform: translateY(-3px); }
.guide--big { min-height: 520px; padding: 30px; }
.guide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6)); }
.guide .art { z-index: -2; }
.guide h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; max-width: 360px; }
.guide--big h3 { font-size: clamp(20px, 1.8vw, 24px); max-width: 420px; padding-right: 64px; }
.guide__kind { position: absolute; top: 18px; left: 18px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.92); color: var(--ink); padding: 4px 10px; border-radius: 999px; }
.guide .play { position: absolute; right: 24px; bottom: 24px; width: 44px; height: 44px; }
.learn {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--mint); border-radius: var(--radius-lg); padding: 22px 24px;
  transition: background-color .2s var(--ease);
}
.learn:hover { background: #bfeccd; }
.learn b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.learn span { font-size: 14px; color: var(--ink-2); }
.learn i { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.learn i svg { width: 16px; height: 16px; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.cta {
  color: var(--white);
  background:
    radial-gradient(60% 90% at 85% 10%, rgba(200, 255, 215, .5) 0%, rgba(200, 255, 215, 0) 70%),
    linear-gradient(100deg, #12a142 0%, #2cbb5a 45%, #5fd583 100%);
  overflow: hidden;
  padding: clamp(72px, 9vw, 120px) 0 calc(var(--radius-xl) + 0px);
}
.cta .lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; pointer-events: none; }
.cta__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; position: relative; }
.cta__copy { padding-bottom: clamp(80px, 10vw, 140px); }
.cta .h2 { color: var(--white); max-width: 520px; }
.cta__buttons { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.cta__phone { display: flex; justify-content: center; }
.cta__phone .phone { transform: rotate(8deg) translateY(30px); transform-origin: bottom center; margin-bottom: -40px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--white); padding: clamp(48px, 6vw, 72px) 0 32px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: calc(var(--radius-xl) * -1);
  position: relative; z-index: 2;
}
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 48px; }
.footer__top .cta__buttons { margin: 0; }
.footer__products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-bottom: 56px; }
.footer h4 { font-size: 14px; font-weight: 500; color: var(--muted-2); margin-bottom: 14px; }
.footer__products a { display: block; font-family: var(--font-display); font-size: 19px; letter-spacing: -0.02em; font-weight: 500; padding: 4px 0; color: var(--ink); transition: color .15s; }
.footer__products a:hover, .footer__links a:hover { color: var(--green-700); }
.footer__links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-bottom: 48px; }
.footer__links a { display: block; font-size: 15px; padding: 5px 0; color: var(--ink-2); }
.footer__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.footer__legal ul { display: flex; gap: 16px; flex-wrap: wrap; }
.footer__legal a:hover { color: var(--ink); }
.footer__disclaimer { margin-top: 16px; font-size: 12px; color: var(--muted-2); max-width: 900px; line-height: 1.5; }

/* ==========================================================================
   Inner pages (pricing, demo)
   ========================================================================== */
.page-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 4vw, 56px); text-align: center; }
.page-hero .lead { max-width: 640px; margin: 18px auto 0; }

.pricing-card {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow);
  max-width: 1040px; margin: 0 auto;
}
.pricing-card__left { padding: clamp(28px, 4vw, 48px); background: var(--forest); color: var(--white); position: relative; overflow: hidden; }
.pricing-card__left .lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .12; }
.pricing-card__left > * { position: relative; }
.price { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; }
.price b { font-family: var(--font-display); font-weight: 600; font-size: 72px; letter-spacing: -0.05em; line-height: 1; }
.price span { color: rgba(255,255,255,.75); }
.pricing-card__left p { margin-top: 14px; color: rgba(255,255,255,.8); }
.pricing-card__left .btn { margin-top: 28px; width: 100%; }
.pricing-card__left small { display: block; margin-top: 14px; color: rgba(255,255,255,.65); font-size: 13px; }
.pricing-card__right { padding: clamp(28px, 4vw, 48px); }
.pricing-card__right h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 18px; }
.included { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.included li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); }
.included svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--green-600); }

.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 1040px; margin: 0 auto; }
.calc__inputs, .calc__out { border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 40px); }
.calc__inputs { background: var(--white); border: 1px solid var(--line); }
.calc__out { background: var(--cream); display: flex; flex-direction: column; justify-content: center; }
.field { display: grid; gap: 8px; margin-bottom: 22px; }
.field label { font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; }
.field label output { font-weight: 600; color: var(--forest); font-variant-numeric: tabular-nums; }
.field input[type="range"] { width: 100%; accent-color: var(--forest); }
.calc__big { font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 6vw, 72px); letter-spacing: -0.05em; line-height: 1; color: var(--forest); font-variant-numeric: tabular-nums; }
.calc__out p { margin-top: 10px; color: var(--ink-2); }
.calc__note { margin-top: 18px; font-size: 12.5px; color: var(--muted); }

.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .2s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 680px; }

.demo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.demo__copy .h1 { font-size: clamp(40px, 5vw, 64px); }
.demo__copy .lead { margin-top: 18px; }
.demo__copy .checks { margin-top: 28px; display: grid; gap: 14px; }
.demo__copy .checks li { font-size: 16px; }
.demo__quote { margin-top: 40px; background: var(--paper); border-radius: var(--radius); padding: 24px; border: 1px solid var(--line); }
.demo__quote q { display: block; font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.02em; line-height: 1.35; }
.demo__quote small { display: block; margin-top: 12px; color: var(--muted); }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 40px); box-shadow: var(--shadow); }
.form-card h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.025em; }
.form-card > p { color: var(--muted); margin-top: 6px; font-size: 15px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.form-grid .full { grid-column: 1 / -1; }
.input { display: grid; gap: 6px; }
.input label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.input input, .input select, .input textarea {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid #dcd7ce; border-radius: 12px; background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.input textarea { height: 96px; padding: 12px 14px; resize: vertical; }
.input input:focus, .input select:focus, .input textarea:focus { outline: 0; border-color: var(--forest); box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
.input.has-error input, .input.has-error select { border-color: var(--red); }
.input .err { font-size: 12.5px; color: var(--red); min-height: 0; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.consent input { margin-top: 3px; accent-color: var(--forest); width: 16px; height: 16px; flex: 0 0 auto; }
.form-card .btn[type="submit"] { width: 100%; height: 52px; margin-top: 18px; }
.form-success { text-align: center; padding: 40px 10px; }
.form-success__icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--mint); color: var(--forest); display: grid; place-items: center; }
.form-success__icon svg { width: 30px; height: 30px; }
.form-success h2 { margin-top: 18px; }
.form-success p { margin-top: 8px; color: var(--muted); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .compliance__grid { grid-template-columns: 1fr 1fr; }
  .bento__card--wide .phone { right: 8%; }
}
@media (max-width: 920px) {
  .tabs__list { grid-template-columns: repeat(4, max-content); overflow-x: auto; scrollbar-width: none; gap: 24px; margin: 0 calc(var(--gutter) * -1) 20px; padding: 0 var(--gutter); }
  .tabs__list::-webkit-scrollbar { display: none; }
  .tab { font-size: 16px; white-space: nowrap; }
  .tab-panel { grid-template-columns: 1fr; min-height: 0; }
  .tab-panel__visual { min-height: 320px; }
  .bento { grid-template-columns: 1fr; }
  .bento__card--wide .phone { right: 50%; transform: translateX(50%) rotate(-8deg); top: 8%; }
  .bento__card--wide .bento__caption { right: 20px; max-width: none; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
  .bento__card--wide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.6)); }
  .bento__card--wide .bento__caption { z-index: 2; }
  .story { grid-template-columns: 1fr; min-height: 0; }
  .story__media { min-height: 260px; order: -1; }
  .story__stats { padding-top: 28px; }
  .beliefs__grid { grid-template-columns: 1fr; }
  .beliefs__left { gap: 32px; }
  .guides__grid { grid-template-columns: 1fr; }
  .guide--big { min-height: 380px; }
  .cta__grid { grid-template-columns: 1fr; }
  .cta__copy { padding-bottom: 0; }
  .cta__phone .phone { transform: rotate(6deg); margin-bottom: -120px; }
  .cta { padding-bottom: 0; }
  .cta__phone { height: 360px; overflow: hidden; align-items: flex-start; }
  .footer__products, .footer__links { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .pricing-card, .calc, .demo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .h1 { font-size: clamp(36px, 10.5vw, 56px); }
  .rotator { font-size: min(1em, 9vw); }
  .search-form { flex-direction: column; align-items: stretch; padding: 8px; }
  .search-form .btn { width: 100%; }
  .hero__panel { margin-top: 40px; height: 360px; border-radius: 24px; }
  .hero__phone .phone { --w: 250px; }
  .hero__phone .phone--cropped { --h: 410px; }
  .result-card { width: 250px; height: 340px; }
  .compliance__grid { grid-template-columns: 1fr; }
  .belief { grid-template-columns: 1fr; gap: 10px; }
  .guides__right { grid-template-columns: 1fr; }
  .included { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .footer__products, .footer__links { grid-template-columns: 1fr; gap: 24px; }
  .bento__card .mock-search, .bento__card .product-card { width: 86%; }
  .story__stats { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Product & company pages
   ========================================================================== */
.nav__link[aria-current="page"] { color: var(--ink); background: #f3f2ee; }

/* ---------- Product hero ---------- */
.p-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); }
.p-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.p-hero .h1 { font-size: clamp(40px, 5vw, 68px); margin-top: 18px; text-wrap: balance; }
.p-hero .lead { margin-top: 20px; max-width: 540px; }
.p-hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.p-hero .rating { margin-top: 24px; }
.p-hero--center { text-align: center; }
.p-hero--center .h1, .p-hero--center .lead { margin-left: auto; margin-right: auto; max-width: 860px; }
.p-hero--center .p-hero__ctas { justify-content: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  background: var(--mint-2); color: var(--forest);
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
}
.kicker__icon { width: 24px; height: 24px; border-radius: 50%; background: var(--forest); color: var(--green-300); display: grid; place-items: center; }
.kicker__icon svg { width: 13px; height: 13px; }

.visual {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: clamp(380px, 40vw, 560px);
  display: grid; place-items: center;
  padding: clamp(20px, 3vw, 40px);
}
.visual .lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .2; pointer-events: none; }
.visual > *:not(.lines) { position: relative; }
.visual--green { background: radial-gradient(90% 140% at 0% 0%, #0b8c34 0%, rgba(11,140,52,0) 60%), radial-gradient(80% 120% at 100% 100%, #d7f7e0 0%, rgba(215,247,224,0) 60%), linear-gradient(115deg, #0c9a37 0%, #1fbb4f 38%, #63d985 70%, #bdf0cb 100%); }
.visual--cream { background: var(--cream); }
.visual--mint { background: linear-gradient(160deg, #e6f8ec, #c3ecd0); }
.visual--dark { background: radial-gradient(90% 120% at 70% 20%, #31503f 0%, #142b1f 55%, #0b1a12 100%); }
.visual--amber { background: radial-gradient(100% 120% at 80% 0%, #ffd79a 0%, #f2a54a 45%, #b9621c 100%); }
.visual--violet { background: radial-gradient(100% 120% at 20% 0%, #c9c0ff 0%, #7b6cf0 45%, #3b2f9a 100%); }
.visual--bottom { align-items: end; padding-bottom: 0; }
.visual__stack { display: grid; gap: 12px; width: min(420px, 100%); }
.float-chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--ink);
  border-radius: 14px; padding: 10px 14px;
  font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow);
  white-space: nowrap;
}
.float-chip b { font-weight: 700; }
.float-chip svg { width: 18px; height: 18px; color: var(--green-600); }
.float { animation: floaty 6s ease-in-out infinite; }
.float--slow { animation-duration: 8s; animation-delay: -2s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Stats strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -0.045em; line-height: 1.05; color: var(--ink); }
.stat span { display: block; margin-top: 6px; color: var(--muted); font-size: 14.5px; }
.stats-note { margin-top: 12px; font-size: 12.5px; color: var(--muted-2); }

/* ---------- Split feature rows ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split + .split { margin-top: clamp(64px, 8vw, 112px); }
.split--flip .split__visual { order: -1; }
.split__copy .eyebrow { margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; }
.split__copy .eyebrow svg { width: 18px; height: 18px; color: var(--green-600); }
.split__copy .h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.035em; max-width: 520px; }
.split__copy > p { margin-top: 16px; color: var(--ink-2); max-width: 500px; font-size: 17px; }
.split__copy .checks { margin-top: 24px; display: grid; gap: 12px; }
.split__copy .text-link { margin-top: 26px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--forest); font-size: 15px; }
.text-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- Generic feature grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
.feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feature--plain { background: var(--white); }
.feature--mint .feature__icon { background: var(--mint); color: var(--forest); }

/* ---------- Browser mockup ---------- */
.browser { width: 100%; max-width: 600px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow-lg); overflow: hidden; text-align: left; }
.browser__bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #f1efe9; border-bottom: 1px solid #e6e2da; }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.browser__bar i:nth-child(2) { background: #febc2e; }
.browser__bar i:nth-child(3) { background: #28c840; }
.browser__url { margin-left: 10px; flex: 1; max-width: 300px; height: 24px; border-radius: 8px; background: var(--white); font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.browser__url svg { width: 12px; height: 12px; }
.site { font-size: 12px; }
.site__nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; }
.site__brand { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.03em; }
.site__brand svg { width: 18px; height: 18px; color: var(--green-600); }
.site__links { display: flex; gap: 12px; color: var(--muted); }
.site__btn { background: var(--forest); color: var(--white); border-radius: 8px; padding: 6px 10px; font-weight: 600; font-size: 11px; }
.site__hero { margin: 0 14px; border-radius: 14px; padding: 26px 22px; color: var(--white); background: radial-gradient(120% 140% at 100% 0%, #6be08d 0%, #1fa64b 40%, #0d5a2a 100%); position: relative; overflow: hidden; }
.site__hero svg { position: absolute; right: -10px; top: -14px; width: 150px; height: 150px; color: rgba(255,255,255,.18); }
.site__hero small { font-size: 10.5px; opacity: .85; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.site__hero b { display: block; font-family: var(--font-display); font-size: 24px; letter-spacing: -0.035em; line-height: 1.05; margin-top: 6px; max-width: 240px; }
.site__hero span { display: inline-block; margin-top: 14px; background: var(--white); color: var(--forest); font-weight: 700; font-size: 11px; padding: 7px 12px; border-radius: 8px; }
.site__cats { display: flex; gap: 6px; padding: 14px 14px 8px; }
.site__cats span { padding: 5px 10px; border-radius: 999px; background: #f2efe9; font-weight: 600; font-size: 10.5px; color: var(--ink-2); }
.site__cats span:first-child { background: var(--ink); color: var(--white); }
.site__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px 14px 16px; }
.site__item { border-radius: 10px; background: #f7f5f0; padding: 6px; }
.site__item i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 7px; color: rgba(255,255,255,.9); }
.site__item i svg { width: 46%; height: 46%; }
.site__item b { display: block; font-size: 10.5px; margin-top: 6px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site__item small { display: block; font-size: 10px; color: var(--muted); }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--white); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 16px 20px; border-bottom: 1px solid var(--line); text-align: center; }
.compare tr:last-child td { border-bottom: 0; }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--ink-2); }
.compare thead th { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.015em; background: var(--paper); }
.compare .us { background: var(--mint-2); }
.compare thead .us { background: var(--forest); color: var(--white); }
.compare svg { width: 20px; height: 20px; margin: 0 auto; }
.compare .yes { color: var(--green-600); }
.compare .no { color: #c9c4ba; }
.compare .meh { font-size: 13px; color: var(--muted); }

/* ---------- Limits meter / checkout ---------- */
.limit { width: min(380px, 100%); background: var(--white); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-lg); text-align: left; }
.limit__head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.limit__head small { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.limit__row { margin-top: 16px; }
.limit__row div { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 7px; }
.limit__row div span { color: var(--muted); }
.meter { height: 10px; border-radius: 99px; background: #eeebe5; overflow: hidden; }
.meter span { display: block; height: 100%; width: var(--v, 50%); border-radius: inherit; background: linear-gradient(90deg, #22c55e, #16a34a); }
.meter--warn span { background: linear-gradient(90deg, #f0a33a, #e8892a); }
.limit__note { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; background: #fff6e8; color: #8a4b06; border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.limit__note svg { width: 18px; height: 18px; flex: 0 0 auto; }
.verify { width: min(380px, 100%); background: var(--white); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-lg); text-align: left; display: grid; gap: 12px; }
.verify__row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--paper); font-size: 14px; }
.verify__row svg { width: 22px; height: 22px; color: var(--green-600); flex: 0 0 auto; }
.verify__row b { display: block; font-weight: 600; }
.verify__row small { color: var(--muted); font-size: 12.5px; }

/* ---------- Integrations ---------- */
.integrations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.integration { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.integration .feature__icon { flex: 0 0 44px; }
.integration b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.015em; }
.integration small { color: var(--muted); font-size: 13px; }

/* ---------- Automations ---------- */
.automations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.automation { display: flex; flex-direction: column; gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.automation:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.automation__trigger { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--mint-2); color: var(--forest); }
.automation__trigger svg { width: 14px; height: 14px; }
.automation h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.automation p { color: var(--muted); font-size: 15px; }
.automation__msg { background: var(--paper); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; color: var(--ink-2); border-bottom-left-radius: 4px; }
.automation__stat { margin-top: auto; padding-top: 6px; font-size: 13.5px; color: var(--muted); }
.automation__stat b { font-family: var(--font-display); font-size: 20px; color: var(--forest); letter-spacing: -0.02em; margin-right: 4px; }

/* ---------- Report / dashboard mock ---------- */
.dash { width: min(460px, 100%); background: var(--white); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-lg); text-align: left; }
.dash__head { display: flex; justify-content: space-between; align-items: baseline; }
.dash__head b { font-family: var(--font-display); font-size: 15px; letter-spacing: -0.015em; }
.dash__head small { color: var(--muted); font-size: 12px; }
.dash__big { font-family: var(--font-display); font-weight: 600; font-size: 38px; letter-spacing: -0.045em; margin-top: 8px; }
.dash__big span { font-size: 14px; color: var(--green-600); letter-spacing: 0; margin-left: 8px; font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; margin-top: 14px; padding-top: 6px; border-bottom: 1px solid var(--line); }
.bars span { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #4ade80, #16a34a); height: var(--h); transform-origin: bottom; animation: grow 1s var(--ease) both; }
.bars span:nth-child(odd) { background: linear-gradient(180deg, #bbf7d0, #86efac); }
@keyframes grow { from { transform: scaleY(0); } }
.dash__legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.dash__legend div { background: var(--paper); border-radius: 12px; padding: 10px; }
.dash__legend small { display: block; color: var(--muted); font-size: 11.5px; }
.dash__legend b { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.02em; }

/* ---------- Loyalty tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tier { border-radius: var(--radius-lg); padding: 26px; color: var(--white); position: relative; overflow: hidden; min-height: 260px; display: flex; flex-direction: column; }
.tier .art__icon { position: absolute; right: -40px; top: -30px; width: 200px; color: rgba(255,255,255,.14); }
.tier small { font-size: 13px; opacity: .8; }
.tier h3 { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; margin-top: 4px; }
.tier ul { margin-top: auto; display: grid; gap: 6px; font-size: 14px; padding-top: 22px; }
.tier li { display: flex; gap: 8px; align-items: center; }
.tier li svg { width: 16px; height: 16px; opacity: .9; }
.tier--1 { background: radial-gradient(120% 120% at 100% 0%, #3ccf6e 0%, #15803d 50%, #0b3a22 100%); }
.tier--2 { background: radial-gradient(120% 120% at 100% 0%, #f7cf6b 0%, #c98a1c 50%, #5c3a07 100%); }
.tier--3 { background: radial-gradient(120% 120% at 100% 0%, #b9b5ff 0%, #5b4fd6 50%, #221a66 100%); }

/* ---------- Timeline (how it works) ---------- */
.timeline { border-top: 1px solid var(--line); }
.timeline__item { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.timeline__when { display: flex; align-items: center; gap: 12px; }
.timeline__when .step__num { flex: 0 0 auto; }
.timeline__when b { font-family: var(--font-display); font-weight: 600; color: var(--green-700); font-size: 15px; }
.timeline__item h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.025em; line-height: 1.15; }
.timeline__item p { margin-top: 10px; color: var(--ink-2); }
.timeline__item .checks { display: grid; gap: 10px; }

/* ---------- Team / about ---------- */
.mission { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -0.035em; max-width: 1000px; }
.mission .soft { color: var(--muted-2); }
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.member { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.member__photo { aspect-ratio: 1 / 1; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 44px; letter-spacing: -0.04em; color: rgba(255,255,255,.92); }
.member b { display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.member span { font-size: 14px; color: var(--muted); }

/* ---------- Filters / chips ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.filter { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color .15s, color .15s, border-color .15s; }
.filter:hover { border-color: #cfc9be; }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
[data-filter-item][hidden] { display: none !important; }
.empty { padding: 32px 0; color: var(--muted); text-align: center; }

/* ---------- Careers ---------- */
.roles { border-top: 1px solid var(--line); }
.role { display: grid; grid-template-columns: minmax(0, 1fr) 180px 160px auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.role h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.role h3 + span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.role > span { font-size: 14.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.role > span svg { width: 16px; height: 16px; color: var(--muted); }

/* ---------- Case studies ---------- */
.case-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; background: var(--paper); border-radius: var(--radius-lg); padding: 12px; }
.case-feature__media { position: relative; border-radius: 24px; overflow: hidden; min-height: 420px; }
.case-feature__media .art__icon { right: auto; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 46%; }
.case-feature__body { padding: clamp(20px, 3.4vw, 44px); }
.case-feature__body .story__quote { margin-top: 18px; }
.case-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.case-meta h4 { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 6px; }
.case-meta p { font-size: 14.5px; color: var(--ink-2); }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.case { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.case:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.case__media { position: relative; height: 200px; }
.case__media .art__icon { top: -10%; right: -8%; width: 70%; }
.case__stat { position: absolute; left: 20px; bottom: 16px; color: var(--white); }
.case__stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 32px; letter-spacing: -0.04em; line-height: 1; }
.case__stat span { font-size: 13px; opacity: .85; }
.case__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.case__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.case__body q { display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 500; font-size: 17.5px; letter-spacing: -0.02em; line-height: 1.3; }
.case__who { margin-top: auto; padding-top: 18px; font-size: 14px; color: var(--muted); }

/* ---------- Blog ---------- */
.post-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(48px, 6vw, 72px); }
.post-feature .post__thumb { height: clamp(260px, 30vw, 400px); }
.post-feature h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.035em; line-height: 1.08; margin-top: 12px; }
.post-feature p { margin-top: 14px; color: var(--ink-2); font-size: 17px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px) 16px; }
.post { display: flex; flex-direction: column; }
.post__thumb { position: relative; border-radius: var(--radius); overflow: hidden; height: 210px; transition: transform .3s var(--ease); }
.post:hover .post__thumb { transform: translateY(-3px); }
.post__thumb .art__icon { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: 42%; }
.post__cat { display: inline-block; margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--green-700); letter-spacing: .02em; text-transform: uppercase; }
.post h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; line-height: 1.22; margin-top: 6px; }
.post:hover h3 { color: var(--forest); }
.post p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.post__meta { margin-top: 12px; font-size: 13px; color: var(--muted-2); }
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; background: var(--forest); color: var(--white); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden; }
.newsletter .lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .12; }
.newsletter > * { position: relative; }
.newsletter h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.03em; line-height: 1.1; }
.newsletter p { margin-top: 8px; color: rgba(255,255,255,.75); }
.newsletter form { display: flex; gap: 8px; background: var(--white); padding: 6px; border-radius: 16px; }
.newsletter input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 12px; font-size: 15px; color: var(--ink); background: transparent; }
.newsletter .form-hint { color: var(--green-300); grid-column: 2; margin-top: -12px; }

/* ---------- Article ---------- */
.article-head { max-width: 800px; margin: 0 auto; text-align: center; padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 3vw, 40px); }
.article-head .h1 { font-size: clamp(36px, 4.6vw, 60px); margin-top: 14px; text-wrap: balance; }
.article-head .lead { margin-top: 18px; }
.byline { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 14px; color: var(--muted); }
.byline .avatar { width: 36px; height: 36px; border-radius: 50%; }
.byline b { color: var(--ink); font-weight: 600; }
.article-hero { height: clamp(240px, 32vw, 440px); border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.article-hero .art__icon { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: 30%; }
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: clamp(32px, 5vw, 80px); justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.toc { position: sticky; top: 96px; align-self: start; font-size: 14px; }
.toc p { font-size: 12.5px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.toc a { display: block; padding: 6px 0 6px 12px; color: var(--muted); border-left: 2px solid var(--line); }
.toc a:hover, .toc a.is-active { color: var(--ink); border-left-color: var(--forest); }
.prose { font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); margin-top: 1.9em; }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose strong { color: var(--ink); }
.prose a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--green-500); font-family: var(--font-display); font-size: 22px; line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); }
.callout { background: var(--mint-2); border-radius: var(--radius); padding: 20px 22px; font-size: 16px; }
.callout b { display: block; color: var(--forest); margin-bottom: 4px; }
.inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--forest); color: var(--white); border-radius: var(--radius); padding: 22px 24px; margin-top: 2.2em !important; }
.inline-cta b { display: block; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; }
.inline-cta span { font-size: 14.5px; color: rgba(255,255,255,.75); }

/* ---------- Auth / 404 ---------- */
.auth { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 48px var(--gutter); background: var(--paper); position: relative; overflow: hidden; }
.auth .lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--green-500); opacity: .12; }
.auth__card { position: relative; width: min(440px, 100%); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 40px); box-shadow: var(--shadow-lg); }
.auth__card .logo { margin-bottom: 22px; }
.auth__card h1 { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; }
.auth__card > p { color: var(--muted); margin-top: 6px; }
.auth__card form { display: grid; gap: 14px; margin-top: 24px; }
.auth__card .btn { width: 100%; height: 50px; }
.auth__row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.auth__row a { color: var(--forest); font-weight: 600; }
.auth__divider { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 13px; margin: 6px 0; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__foot { margin-top: 22px; text-align: center; font-size: 14px; color: var(--muted); }
.auth__foot a { color: var(--forest); font-weight: 600; }
.notfound { min-height: calc(100vh - 72px); display: grid; place-items: center; text-align: center; padding: 64px var(--gutter); background: var(--paper); position: relative; overflow: hidden; }
.notfound .lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--green-500); opacity: .12; }
.notfound__code { position: relative; font-family: var(--font-display); font-weight: 700; font-size: clamp(120px, 22vw, 260px); letter-spacing: -0.07em; line-height: .9; color: var(--forest); display: inline-flex; align-items: center; }
.notfound__code svg { width: .78em; height: .78em; color: var(--green-500); margin: 0 -.02em; }
.notfound .lead { max-width: 480px; margin: 18px auto 0; }

/* ---------- Section helpers ---------- */
.center { text-align: center; }
.center .h2, .h2.center { margin-left: auto; margin-right: auto; }
.mb-lg { margin-bottom: clamp(32px, 4vw, 52px); }
.mw-760 { max-width: 760px; }
.mw-640 { max-width: 640px; }
.section-head .text-link { white-space: nowrap; }

/* ---------- Responsive (pages) ---------- */
@media (max-width: 1080px) {
  .integrations, .team, .feature-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .automations, .case-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline__item { grid-template-columns: 160px minmax(0, 1fr); }
  .timeline__item .checks { grid-column: 2; }
  .role { grid-template-columns: minmax(0, 1fr) auto; }
  .role > span { display: none; }
  .article-layout { grid-template-columns: minmax(0, 720px); }
  .toc { display: none; }
}
@media (max-width: 920px) {
  .p-hero__grid, .split, .case-feature, .post-feature, .newsletter { grid-template-columns: 1fr; }
  .split--flip .split__visual { order: 0; }
  .feature-grid, .feature-grid--2, .tiers { grid-template-columns: 1fr 1fr; }
  .newsletter .form-hint { grid-column: 1; margin-top: -8px; }
  .float-chip { display: none; }
}
@media (max-width: 640px) {
  .feature-grid, .feature-grid--2, .feature-grid--4, .integrations, .automations, .case-grid, .post-grid, .tiers, .stats--3 { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 18px; }
  .timeline__item { grid-template-columns: 1fr; gap: 14px; }
  .timeline__item .checks { grid-column: 1; }
  .case-meta { grid-template-columns: 1fr; }
  .site__grid { grid-template-columns: repeat(2, 1fr); }
  .site__links { display: none; }
  .newsletter form { flex-direction: column; }
  .newsletter form .btn { width: 100%; }
  .inline-cta { flex-direction: column; align-items: flex-start; }
  .prose { font-size: 17px; }
}

.faq details a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.verify__row .mock-result__thumb svg { color: #fff; }
.visual > .float-chip { position: absolute; }
.post.post-feature { display: grid; }
.stats.stats--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .stats.stats--3 { grid-template-columns: 1fr; } }

/* ---------- Online presence grader ---------- */
.grader { max-width: 920px; margin: 0 auto; }
.grader__quiz { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 3.5vw, 40px); box-shadow: var(--shadow); }
.grader__progress { position: sticky; top: 72px; z-index: 5; background: var(--white); display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 12px 0 16px; margin-top: -12px; font-size: 14px; color: var(--muted); }
.grader__progress b { color: var(--ink); }
.grader__cat { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-bottom: 6px; }
.grader__cat:first-of-type { margin-top: 8px; }
.grader__cat .feature__icon { width: 36px; height: 36px; border-radius: 10px; }
.grader__cat .feature__icon svg { width: 18px; height: 18px; }
.grader__cat h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.q { border: 0; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; min-width: 0; }
.q p { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.q small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); }
.seg { display: inline-flex; background: #f2f0ea; border-radius: 12px; padding: 4px; gap: 2px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg label { padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s; }
.seg label:hover { color: var(--ink); }
.seg input:checked + label { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg input[value="yes"]:checked + label { color: var(--green-700); }
.seg input[value="no"]:checked + label { color: var(--red); }
.seg input:focus-visible + label { outline: 2px solid var(--green-600); outline-offset: 2px; }
.grader__submit { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.grader__submit p { font-size: 14px; }
.grader__result { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; }
.grader__result:focus { outline: none; }
.grader__score, .grader__fixes { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 36px); }
.grader__score { text-align: center; font-size: 16px; }
.grader__score .gauge { width: 220px; margin: 14px auto 0; }
.grader__rating { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.03em; margin-top: -10px; }
.grader__rating.is-poor { color: var(--red); }
.grader__rating.is-fair { color: var(--amber); }
.grader__rating.is-good, .grader__rating.is-great { color: var(--green-700); }
.grader__score > .muted { margin-top: 6px; font-size: 15px; }
.grader__breakdown { display: grid; gap: 14px; margin: 24px 0 8px; text-align: left; }
.grader__breakdown div div { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.grader__breakdown span { color: var(--muted); }
.grader__score .p-hero__ctas { justify-content: center; margin-top: 22px; }
.grader__fixes .h3 { font-size: 24px; }
.grader__fixes ol { margin-top: 18px; display: grid; gap: 10px; counter-reset: fix; }
.grader__fixes li { counter-increment: fix; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--paper); }
.grader__fixes li::before { content: counter(fix); width: 32px; height: 32px; border-radius: 10px; background: var(--forest); color: var(--white); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.grader__fixes b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.015em; }
.grader__fixes p { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; }
.grader__fixes .text-link { margin-top: 8px; font-size: 14px; }
.grader__fixes .tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #fff1d6; color: #9a5b00; vertical-align: 2px; }
.grader__done { background: var(--mint-2) !important; }
.grader__done::before { content: "✓" !important; }
@media (max-width: 760px) {
  .q { grid-template-columns: 1fr; gap: 10px; }
  .seg { justify-self: start; }
  .grader__result { grid-template-columns: 1fr; }
  .grader__progress { top: 72px; }
}
.mobile-menu details li.mm-label { padding: 12px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }

/* ---------- Marquee pause control (WCAG 2.2.2) ---------- */
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: #f2f0ea; color: var(--ink-2); transition: background-color .15s; }
.motion-toggle:hover { background: #e8e5dd; }
.motion-toggle svg { width: 14px; height: 14px; }
.motion-toggle .i-pause { display: inline-flex; gap: 3px; }
.motion-toggle .i-pause i { width: 3px; height: 12px; border-radius: 1px; background: currentColor; }
.motion-toggle[aria-pressed="true"] .i-pause { display: none; }
.motion-toggle:not([aria-pressed="true"]) .i-play { display: none; }
.reviews .motion-toggle { background: rgba(255,255,255,.18); color: var(--white); margin-top: 18px; }
.reviews .motion-toggle:hover { background: rgba(255,255,255,.28); }
.is-motion-paused .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

/* ==========================================================================
   Article tables, case study pages, company & help center pages
   ========================================================================== */

/* Article helpers (F3): inline code, left-aligned reference tables */
.prose code {
  font-size: .86em;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--ink);
  word-break: break-word;
}
.prose .table-wrap { margin-top: 1.4em; }
.compare--left { font-size: 15px; line-height: 1.5; }
.compare--left th, .compare--left td { text-align: left; vertical-align: top; }
.compare--left td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.compare--left td { color: var(--ink-2); }
.compare--left .score { text-align: center; color: var(--muted); white-space: nowrap; }
.compare--left thead .score { text-align: center; }

/* Extra styles for long-form articles (fork F4): text tables inside .prose */
.prose .table-wrap { margin-top: 1.4em; }
.compare--text { font-size: 15px; }
.compare--text th, .compare--text td { text-align: left; vertical-align: top; }
.compare--text td { line-height: 1.5; color: var(--ink-2); }
.compare--text td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.compare--text thead th:first-child { color: var(--ink); }
/* Two-column text tables fit the screen; wider ones scroll inside .table-wrap */
.compare--text { min-width: 0; }
.compare--text:has(thead th:nth-child(3)) { min-width: 560px; }
@media (max-width: 640px) {
  .compare--text th, .compare--text td { padding: 12px 14px; }
  .compare--text td:first-child { white-space: normal; }
}

/* Case study pages (f5) */
.case-back { display: inline-flex; margin-bottom: 18px; }
.case-back svg { order: -1; }
.case-back:hover svg { transform: translateX(-3px); }
.case-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.case-chips .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 12px; background: var(--paper); border: 1px solid var(--line); }
.case-chips .chip svg { width: 14px; height: 14px; color: var(--green-600); }
.case-banner .art__mono { width: 72px; height: 72px; font-size: 28px; border-radius: 22px; }
.case-stats { margin-top: 10px; }
.glance { position: sticky; top: 96px; align-self: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; font-size: 14px; }
.glance h2 { font-size: 12.5px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.glance dl { margin: 0; display: grid; gap: 14px; }
.glance dt { font-size: 12.5px; color: var(--muted); }
.glance dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); line-height: 1.45; }
.glance dd a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.glance .btn { width: 100%; margin-top: 18px; }
a.case { color: inherit; }
@media (max-width: 1080px) {
  .glance { position: static; }
}
.case-banner svg.art__icon { width: 22%; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); }

/* Extra components for press, partners, contact, security and support pages (fork F7). */

/* Quick-link chips (help center hero) */
.chip-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.chip-links a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: border-color .15s, background-color .15s; }
.chip-links a:hover { border-color: #cfc9be; background: var(--paper); }
.chip-links svg { width: 15px; height: 15px; color: var(--green-600); }

/* Clickable feature cards */
a.feature { display: block; color: inherit; }
a.feature .text-link { margin-top: 14px; }

/* Brand color swatches */
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.swatch { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.swatch__chip { height: 120px; }
.swatch__info { padding: 14px 16px; }
.swatch__info b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.015em; }
.swatch__info code { font-size: 13px; color: var(--muted); }

/* Media kit tiles */
.kit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kit__tile { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--white); overflow: hidden; display: flex; flex-direction: column; }
.kit__preview { min-height: 220px; display: grid; place-items: center; background: var(--paper); padding: 32px; }
.kit__preview img { max-height: 72px; width: auto; }
.kit__preview--dark { background: var(--forest); }
.kit__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-top: 1px solid var(--line); }
.kit__meta b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.015em; }
.kit__meta small { color: var(--muted); font-size: 13px; }

/* Copyable boilerplate */
.boilerplate { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 40px); }
.boilerplate h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.boilerplate p { margin-top: 12px; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.boilerplate small { display: block; margin-top: 14px; color: var(--muted); font-size: 13px; }

/* Help center sections */
.help-section { scroll-margin-top: 96px; }
.help-section + .help-section { margin-top: clamp(48px, 6vw, 72px); }
.help-section__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.help-section__head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; }
.help-section .faq { max-width: none; }

/* Contact info list */
.info-list { display: grid; gap: 12px; }
.info-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--ink-2); }
.info-list svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--green-600); margin-top: 2px; }
.info-list b { display: block; color: var(--ink); font-weight: 600; }

@media (max-width: 920px) {
  .swatches { grid-template-columns: 1fr 1fr; }
  .kit { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .help-cats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .help-cats .feature { padding: 16px; }
  .help-cats .feature h3 { margin-top: 12px; font-size: 16px; }
  .help-cats .feature p { display: none; }
  .help-cats .feature__icon { width: 36px; height: 36px; }
}