/* =============================================================================
   Sohay — Homepage styles
   Layer order fixes the cascade so specificity never fights.
   Tokens live in tokens.css (loaded first). See plans/04-implementation-approach.md.
   ========================================================================== */

@layer reset, base, layout, components, utilities;

/* =========================================================================
   @layer reset
   ====================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
  body { min-height: 100vh; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  :target { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* =========================================================================
   @layer base
   ====================================================================== */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--text-primary);
    background: var(--bg-canvas);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: var(--lh-heading);
    color: var(--text-primary);
    font-weight: 700;
    text-wrap: balance;
  }
  h1 { font-size: var(--text-h1); letter-spacing: -0.02em; line-height: var(--lh-display); }
  h2 { font-size: var(--text-h2); letter-spacing: -0.02em; }
  h3 { font-size: var(--text-h3); font-weight: 600; }
  h4 { font-size: var(--text-h4); font-weight: 600; }

  p { text-wrap: pretty; }
  strong { font-weight: 600; color: var(--text-primary); }

  a.link { color: var(--link); font-weight: 500; }
  a.link:hover { text-decoration: underline; text-underline-offset: 3px; }

  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  ::selection { background: var(--brand-subtle-bg); color: var(--brand-hover); }

  code, kbd { font-family: var(--font-mono); font-size: 0.9em; }
}

/* =========================================================================
   @layer layout
   ====================================================================== */
@layer layout {
  .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
  .container--wide { max-width: var(--container-wide); }
  .container--narrow { max-width: var(--container-narrow); }

  .section { padding-block: var(--section-y); position: relative; }
  .section--subtle { background: var(--bg-subtle); }
  .section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

  .section__head { max-width: 46rem; margin-inline: auto; margin-bottom: var(--space-12); text-align: center; }
  .section__head .eyebrow { justify-content: center; }
  .section__head p { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-body-lg); }

  .grid { display: grid; gap: var(--grid-gap); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 1023px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 719px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }
}

/* =========================================================================
   @layer components
   ====================================================================== */
@layer components {

  /* ---- Skip link -------------------------------------------------------- */
  .skip-link {
    position: fixed; top: var(--space-3); left: var(--space-3); z-index: var(--z-toast);
    background: var(--brand); color: var(--text-inverse);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
    transform: translateY(-150%); transition: transform var(--duration-base) var(--ease-out);
  }
  .skip-link:focus { transform: translateY(0); }

  /* ---- Eyebrow / overline ---------------------------------------------- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--brand);
  }
  .eyebrow::before { content: ""; width: 1.25rem; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.6; }
  .section__head .eyebrow::before { display: none; }

  /* ---- Icon ------------------------------------------------------------- */
  .icon { width: var(--icon-md); height: var(--icon-md); stroke-width: 1.75; flex: none; }
  .icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
  .icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

  /* ---- Button ----------------------------------------------------------- */
  .btn {
    --btn-h: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: var(--btn-h); padding-inline: var(--space-5);
    font-size: var(--text-body); font-weight: 600; white-space: nowrap;
    border-radius: var(--radius-md); border: 1px solid transparent;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
  }
  .btn:active { transform: translateY(1px); }
  .btn--sm { --btn-h: 36px; padding-inline: var(--space-4); font-size: var(--text-body-sm); }
  .btn--lg { --btn-h: 52px; padding-inline: var(--space-6); font-size: var(--text-body-lg); }
  .btn--block { width: 100%; }

  .btn--primary { background: var(--brand); color: var(--text-inverse); box-shadow: var(--shadow-xs); }
  .btn--primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-brand); }

  .btn--secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
  .btn--secondary:hover { background: var(--surface-hover); border-color: var(--brand); }

  .btn--ghost { color: var(--text-primary); }
  .btn--ghost:hover { background: var(--bg-muted); }

  .btn--inverse { background: var(--surface); color: var(--brand); }
  .btn--inverse:hover { background: var(--slate-100); }

  /* ---- Badge / pill ----------------------------------------------------- */
  .badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
    font-size: var(--text-caption); font-weight: 600;
    background: var(--brand-subtle-bg); color: var(--brand); border: 1px solid var(--brand-border);
  }
  .badge--neutral { background: var(--bg-muted); color: var(--text-secondary); border-color: var(--border); }
  .badge__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--accent); flex: none; }

  /* ---- Header / nav ----------------------------------------------------- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: color-mix(in srgb, var(--bg-canvas) 80%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: background var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
  }
  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
  }
  .site-header__inner { display: flex; align-items: center; gap: var(--space-6); height: var(--header-h); }
  .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--text-primary); }
  .brand__mark { width: 30px; height: 30px; flex: none; }

  .site-nav { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: var(--space-4); }
  .site-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: 500; color: var(--text-secondary); font-size: var(--text-body-sm); transition: color var(--duration-fast), background var(--duration-fast); }
  .site-nav a:hover { color: var(--text-primary); background: var(--bg-muted); }

  .site-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }

  .theme-toggle {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md);
    color: var(--text-secondary); border: 1px solid var(--border);
  }
  .theme-toggle:hover { color: var(--text-primary); background: var(--bg-muted); }
  .theme-toggle .icon-moon { display: none; }
  :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
  :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
  }

  .nav-toggle { display: none; width: 40px; height: 40px; border-radius: var(--radius-md); place-items: center; color: var(--text-primary); border: 1px solid var(--border); }
  .login-link { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); font-weight: 500; font-size: var(--text-body-sm); color: var(--text-secondary); }
  .login-link:hover { color: var(--text-primary); }

  /* ---- Mobile drawer ---------------------------------------------------- */
  .nav-drawer { display: none; }
  @media (max-width: 899px) {
    .site-nav, .login-link { display: none; }
    .site-header__actions .theme-toggle { display: none; }
    .nav-toggle { display: grid; }
    .nav-drawer {
      display: block; position: fixed; inset: 0; z-index: var(--z-overlay);
      visibility: hidden; opacity: 0; transition: opacity var(--duration-base), visibility var(--duration-base);
    }
    .nav-drawer[data-open="true"] { visibility: visible; opacity: 1; }
    .nav-drawer__scrim { position: absolute; inset: 0; background: var(--overlay); }
    .nav-drawer__panel {
      position: absolute; inset: 0 0 0 auto; width: min(85vw, 340px);
      background: var(--surface); box-shadow: var(--shadow-xl);
      padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2);
      transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-out);
    }
    .nav-drawer[data-open="true"] .nav-drawer__panel { transform: translateX(0); }
    .nav-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
    .nav-drawer__panel a.drawer-link { padding: var(--space-3) var(--space-3); border-radius: var(--radius-md); font-weight: 500; font-size: var(--text-body-lg); color: var(--text-secondary); }
    .nav-drawer__panel a.drawer-link:hover { background: var(--bg-muted); color: var(--text-primary); }
    .nav-drawer__cta { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
  }

  /* ---- Announcement bar ------------------------------------------------- */
  .topbar { background: var(--brand-subtle-bg); color: var(--brand-hover); border-bottom: 1px solid var(--brand-border); font-size: var(--text-body-sm); }
  .topbar__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 40px; padding-block: var(--space-2); text-align: center; }
  .topbar a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
  .topbar__dismiss { margin-inline-start: var(--space-2); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: inherit; }
  .topbar__dismiss:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
  .topbar[hidden] { display: none; }

  /* ---- Hero ------------------------------------------------------------- */
  .hero { position: relative; overflow: hidden; padding-top: clamp(3rem, 2rem + 4vw, 5rem); padding-bottom: var(--section-y); }
  .hero::before { content: ""; position: absolute; inset: 0; background: var(--gradient-hero); pointer-events: none; }
  .hero__inner { position: relative; text-align: center; }
  .hero__copy { max-width: var(--container-narrow); margin-inline: auto; }
  .hero h1 { font-size: var(--text-display); margin-top: var(--space-5); }
  .hero__sub { margin-top: var(--space-5); font-size: var(--text-body-lg); color: var(--text-secondary); max-width: 44rem; margin-inline: auto; }
  .hero__cta { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
  .hero__reassure { margin-top: var(--space-4); font-size: var(--text-body-sm); color: var(--text-tertiary); }
  .hero__badges { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
  .hero__visual { margin-top: var(--space-16); position: relative; }

  /* ---- Chat mockup (built in HTML/CSS, no external assets) -------------- */
  .mock { --mock-radius: var(--radius-2xl); border-radius: var(--mock-radius); }
  .browser {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl); overflow: hidden; max-width: 960px; margin-inline: auto;
  }
  .browser__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
  .browser__dot { width: 11px; height: 11px; border-radius: var(--radius-full); background: var(--border-strong); }
  .browser__addr { margin-inline-start: var(--space-3); font-size: var(--text-caption); color: var(--text-tertiary); font-family: var(--font-mono); }
  .browser__body { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 380px; }
  @media (max-width: 719px) { .browser__body { grid-template-columns: 1fr; } .browser__inbox { display: none; } }

  .chatwin { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); background:
      radial-gradient(120% 80% at 100% 0%, var(--brand-subtle-bg) 0%, transparent 55%), var(--surface); text-align: left; }
  .chatwin__head { display: flex; align-items: center; gap: var(--space-3); }
  .chatwin__avatar { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--gradient-brand); display: grid; place-items: center; color: #fff; }
  .chatwin__title { font-weight: 600; font-size: var(--text-body-sm); }
  .chatwin__status { font-size: var(--text-caption); color: var(--text-tertiary); display: inline-flex; align-items: center; gap: var(--space-2); }
  .chatwin__status::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--success); }
  .bubble { max-width: 88%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-body-sm); line-height: 1.5; }
  .bubble--user { align-self: flex-end; background: var(--brand); color: var(--text-inverse); border-bottom-right-radius: var(--radius-xs); }
  .bubble--bot { align-self: flex-start; background: var(--bg-muted); color: var(--text-primary); border-bottom-left-radius: var(--radius-xs); }
  .source-chip { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--surface); border: 1px dashed var(--brand-border); color: var(--brand); font-size: 0.72rem; font-weight: 600; }
  .typing { display: inline-flex; gap: 4px; align-items: center; }
  .typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); animation: blink 1.2s infinite ease-in-out; }
  .typing span:nth-child(2) { animation-delay: 0.2s; } .typing span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
  .chatwin__input { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-tertiary); font-size: var(--text-body-sm); }
  .chatwin__input .send { margin-inline-start: auto; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--brand); color: #fff; display: grid; place-items: center; }

  .browser__inbox { border-inline-start: 1px solid var(--border); background: var(--bg-subtle); padding: var(--space-5); text-align: left; }
  .inbox__title { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); font-weight: 600; margin-bottom: var(--space-4); }
  .inbox__row { display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); }
  .inbox__row + .inbox__row { margin-top: var(--space-1); }
  .inbox__row.is-active { background: var(--surface); box-shadow: var(--shadow-xs); }
  .inbox__avatar { width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--brand-subtle-bg); color: var(--brand); display: grid; place-items: center; font-size: var(--text-caption); font-weight: 700; flex: none; }
  .inbox__meta { min-width: 0; }
  .inbox__name { font-size: var(--text-body-sm); font-weight: 600; }
  .inbox__snip { font-size: var(--text-caption); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .inbox__badge { margin-inline-start: auto; align-self: center; font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); }
  .inbox__badge.open { background: var(--green-bg); color: var(--success); }
  .inbox__badge.you { background: var(--brand-subtle-bg); color: var(--brand); }

  /* ---- Logo / stack strip ---------------------------------------------- */
  .stack { text-align: center; }
  .stack__caption { font-size: var(--text-body-sm); color: var(--text-tertiary); }
  .stack__logos { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6) var(--space-10); }
  .stack__logo { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: 1.125rem; color: var(--text-secondary); }
  .stack__logo .icon { color: var(--text-tertiary); }

  /* ---- Stats band ------------------------------------------------------- */
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); text-align: center; }
  @media (max-width: 719px) { .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-4); } }
  .stat__num { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--brand); font-variant-numeric: tabular-nums; }
  .stat__label { margin-top: var(--space-2); font-size: var(--text-body-sm); color: var(--text-secondary); }
  .stats--divided .stat + .stat { border-inline-start: 1px solid var(--border); }
  @media (max-width: 719px) { .stats--divided .stat + .stat { border-inline-start: 0; } }

  /* ---- Feature grid ----------------------------------------------------- */
  .feature {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base);
  }
  .feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-border); }
  .feature__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-subtle-bg); color: var(--brand); display: grid; place-items: center; }
  .feature h3 { font-size: var(--text-h4); }
  .feature p { color: var(--text-secondary); font-size: var(--text-body-sm); }

  /* ---- WooCommerce showcase -------------------------------------------- */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
  @media (max-width: 899px) { .split { grid-template-columns: 1fr; } .split__media { order: -1; } }
  .split__list { margin-top: var(--space-6); display: grid; gap: var(--space-5); }
  .split__item { display: flex; gap: var(--space-4); }
  .split__item .tick { width: 28px; height: 28px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brand-wc) 14%, transparent); color: var(--brand-wc); display: grid; place-items: center; flex: none; }
  :root[data-theme="dark"] .split__item .tick { background: color-mix(in srgb, var(--brand-wc) 30%, transparent); color: #d7c4ef; }
  .split__item h4 { font-size: var(--text-body); }
  .split__item p { color: var(--text-secondary); font-size: var(--text-body-sm); margin-top: 2px; }
  .split__note { margin-top: var(--space-6); font-size: var(--text-body-sm); color: var(--text-tertiary); }

  .card-surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); overflow: hidden; }

  /* product card mockup */
  .prodcard { padding: var(--space-5); }
  .prodcard__row { display: flex; gap: var(--space-4); }
  .prodcard__thumb { width: 84px; height: 84px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--indigo-100), var(--cyan-400)); flex: none; }
  .prodcard__name { font-weight: 600; }
  .prodcard__price { color: var(--text-primary); font-weight: 700; margin-top: 2px; }
  .prodcard__meta { font-size: var(--text-caption); color: var(--text-tertiary); margin-top: 2px; }
  .chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .chip { font-size: var(--text-caption); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); color: var(--text-secondary); }
  .chip.is-selected { border-color: var(--brand); color: var(--brand); background: var(--brand-subtle-bg); }
  .cart-summary { border-top: 1px dashed var(--border); margin-top: var(--space-5); padding-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; }
  .cart-summary .undo { font-size: var(--text-caption); font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: var(--space-2); }

  /* ---- Reasons (alternating) ------------------------------------------- */
  .reason { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
  .reason + .reason { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
  .reason__body h3 { margin-top: var(--space-4); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); }
  .reason__body > p { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-body-lg); }
  .reason__bullets { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
  .reason__bullets li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body-sm); color: var(--text-secondary); }
  .reason__bullets .tick { width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--brand-subtle-bg); color: var(--brand); display: grid; place-items: center; flex: none; }
  @media (min-width: 900px) { .reason:nth-child(even) .reason__media { order: -1; } }
  @media (max-width: 899px) { .reason { grid-template-columns: 1fr; } .reason__media { order: -1; } }

  /* generic media panel used for reason visuals */
  .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); padding: var(--space-6); }
  .panel--tint { background: radial-gradient(120% 100% at 0% 0%, var(--brand-subtle-bg), transparent 60%), var(--surface); }

  /* spend meter mockup */
  .meter { margin-top: var(--space-3); height: 10px; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
  .meter__fill { height: 100%; width: 62%; border-radius: inherit; background: var(--gradient-brand); }
  .kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
  .kv + .kv { margin-top: var(--space-5); }
  .kv__k { font-size: var(--text-body-sm); color: var(--text-secondary); }
  .kv__v { font-weight: 700; font-variant-numeric: tabular-nums; }
  .mock-list { display: grid; gap: var(--space-3); }
  .mock-list__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); font-size: var(--text-body-sm); }
  .mock-list__row .icon { color: var(--brand); }

  /* ---- How it works ----------------------------------------------------- */
  .steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  @media (max-width: 719px) { .steps { grid-template-columns: 1fr; gap: var(--space-6); } }
  .step { position: relative; }
  .step__num { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--brand); color: var(--text-inverse); display: grid; place-items: center; font-weight: 700; }
  .step h3 { margin-top: var(--space-4); font-size: var(--text-h4); }
  .step p { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--text-body-sm); }

  /* ---- Testimonials ----------------------------------------------------- */
  .quote { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
  .quote__text { font-size: var(--text-body-lg); color: var(--text-primary); }
  .quote__foot { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
  .quote__avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--bg-muted); flex: none; }
  .quote__name { font-weight: 600; font-size: var(--text-body-sm); }
  .quote__role { font-size: var(--text-caption); color: var(--text-tertiary); }

  /* ---- Pricing ---------------------------------------------------------- */
  .pricing { max-width: 560px; margin-inline: auto; }
  .plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); box-shadow: var(--shadow-md); }
  .plan__price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-3); }
  .plan__price .amt { font-family: var(--font-display); font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; }
  .plan__price .per { color: var(--text-tertiary); font-size: var(--text-body-sm); }
  .plan__list { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
  .plan__list li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body-sm); }
  .plan__list .tick { color: var(--success); flex: none; }
  .plan__foot { margin-top: var(--space-8); display: grid; gap: var(--space-3); }
  .plan__foot .fineprint { text-align: center; font-size: var(--text-caption); color: var(--text-tertiary); }

  /* ---- FAQ accordion ---------------------------------------------------- */
  .faq { max-width: 820px; margin-inline: auto; display: grid; gap: var(--space-3); }
  .qa { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
  .qa__q { width: 100%; display: flex; align-items: center; gap: var(--space-4); justify-content: space-between; padding: var(--space-5); text-align: left; font-weight: 600; font-size: var(--text-body-lg); }
  .qa__q:hover { background: var(--surface-hover); }
  .qa__chev { flex: none; color: var(--text-tertiary); transition: transform var(--duration-base) var(--ease-standard); }
  .qa__q[aria-expanded="true"] .qa__chev { transform: rotate(180deg); }
  .qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-slow) var(--ease-standard); }
  .qa__q[aria-expanded="true"] + .qa__a { grid-template-rows: 1fr; }
  .qa__a > div { overflow: hidden; }
  .qa__a p { padding: 0 var(--space-5) var(--space-5); color: var(--text-secondary); }

  /* ---- CTA band --------------------------------------------------------- */
  .cta-band { background: var(--gradient-brand); border-radius: var(--radius-2xl); padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); text-align: center; color: var(--text-inverse); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
  .cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 50% -20%, rgba(255,255,255,0.25), transparent 60%); pointer-events: none; }
  .cta-band h2 { color: #fff; position: relative; }
  .cta-band p { color: rgba(255,255,255,0.9); margin-top: var(--space-4); position: relative; }
  .cta-band .btn { margin-top: var(--space-8); position: relative; }
  .cta-band .fineprint { margin-top: var(--space-4); font-size: var(--text-caption); color: rgba(255,255,255,0.8); position: relative; }

  /* ---- Blog ------------------------------------------------------------- */
  .post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base); }
  .post:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .post__cover { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--indigo-500), var(--cyan-500)); }
  .post:nth-child(2) .post__cover { background: linear-gradient(135deg, var(--indigo-600), var(--indigo-300)); }
  .post:nth-child(3) .post__cover { background: linear-gradient(135deg, var(--cyan-600), var(--indigo-400)); }
  .post__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
  .post__tag { font-size: var(--text-caption); font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: 0.05em; }
  .post__title { font-size: var(--text-h4); font-weight: 600; }
  .post__meta { margin-top: auto; font-size: var(--text-caption); color: var(--text-tertiary); }

  /* ---- Footer ----------------------------------------------------------- */
  .site-footer { background: var(--bg-subtle); border-top: 1px solid var(--border); padding-block: var(--space-20) var(--space-8); }
  .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--space-8); }
  @media (max-width: 899px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
  @media (max-width: 559px) { .footer-grid { grid-template-columns: 1fr; } }
  .footer-brand p { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-body-sm); max-width: 30ch; }
  .footer-col h4 { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: var(--space-4); }
  .footer-col ul { display: grid; gap: var(--space-3); }
  .footer-col a { color: var(--text-secondary); font-size: var(--text-body-sm); }
  .footer-col a:hover { color: var(--text-primary); }
  .footer-bottom { margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
  .footer-bottom p, .footer-bottom a { font-size: var(--text-caption); color: var(--text-tertiary); }
  .footer-bottom .disclaimer { max-width: 60ch; }
  .footer-legal { display: flex; gap: var(--space-5); }
}

/* =========================================================================
   @layer utilities
   ====================================================================== */
@layer utilities {
  .u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .u-center { text-align: center; }
  .u-stack > * + * { margin-top: var(--space-4); }
  .u-cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .u-mt-0 { margin-top: 0; }
  .u-hide\@sm { }
  @media (max-width: 719px) { .u-hide\@sm { display: none !important; } }

  /* scroll-reveal (JS adds .is-in) */
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out); }
  .reveal.is-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
}