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

@layer tokens {
  :root {
    color-scheme: light dark;
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --brand-hue: 152;
    --brand-primary: light-dark(hsl(var(--brand-hue) 60% 32%), hsl(var(--brand-hue) 55% 55%));
    --brand-subtle: light-dark(hsl(var(--brand-hue) 60% 95%), hsl(var(--brand-hue) 30% 15%));
    --brand-dark: color-mix(in oklch, var(--brand-primary), black 25%);
    --surface-base: light-dark(hsl(210 20% 98%), hsl(220 15% 10%));
    --surface-elevated: light-dark(hsl(0 0% 100%), hsl(220 15% 14%));
    --surface-muted: light-dark(hsl(220 15% 95%), hsl(220 15% 16%));
    --text-primary: light-dark(hsl(220 15% 12%), hsl(220 15% 94%));
    --text-secondary: light-dark(hsl(220 10% 40%), hsl(220 10% 65%));
    --border-subtle: light-dark(hsl(220 15% 90%), hsl(220 15% 20%));
    --danger: light-dark(hsl(0 70% 45%), hsl(0 70% 60%));
    --danger-subtle: light-dark(hsl(0 80% 96%), hsl(0 30% 16%));
    --warning: hsl(45 90% 50%);
    --success: hsl(152 60% 35%);
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;
    --shadow-sm: light-dark(0 1px 2px hsl(220 15% 12% / .06), 0 1px 2px hsl(0 0% 0% / .2));
    --shadow-md: light-dark(0 4px 12px hsl(220 15% 12% / .08), 0 4px 12px hsl(0 0% 0% / .3));
    --shadow-lg: light-dark(0 12px 32px hsl(220 15% 12% / .12), 0 12px 32px hsl(0 0% 0% / .4));
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --max-width: 72rem;
    --transition-fast: 150ms;
    accent-color: var(--brand-primary);
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle) transparent;
  }
}

@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

  body {
    font-family: var(--font-body);
    background: var(--surface-base);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
  }

  img,
  svg { display: block; max-inline-size: 100%; }

  a { color: inherit; }

  ul,
  ol { list-style: none; }

  :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
    line-height: 1.2;
  }

  p { text-wrap: pretty; }

  main { flex: 1; }

  button { font: inherit; cursor: pointer; }

  input,
  textarea,
  select { font: inherit; }

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

@layer base {
  :focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 2px;
  }

  ::selection {
    background: var(--brand-subtle);
    color: var(--brand-primary);
  }

  [data-bn="skip-link"] {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--space-4);
    background: var(--brand-primary);
    color: #fff;
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    z-index: 999;
  }
  [data-bn="skip-link"]:focus { inset-block-start: 0; }
}

@layer layout {
  [data-bn="container"] {
    max-inline-size: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-6);
  }

  /* ── Header / Nav ── */
  [data-bn="site-header"] {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--surface-elevated), transparent 6%);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--border-subtle);
  }

  [data-bn="site-nav"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-inline-size: var(--max-width);
    margin-inline: auto;
    padding: var(--space-3) var(--space-6);
    gap: var(--space-4);
  }

  [data-bn="nav-logo"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--brand-primary);
    font-family: var(--font-display);
    font-size: 1.25rem;
    flex-shrink: 0;
  }
  [data-bn="nav-logo"] strong { color: var(--text-primary); }

  [data-bn="nav-toggle"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    color: var(--text-primary);
    min-block-size: 40px;
    min-inline-size: 40px;
  }
  @media (min-width: 768px) {
    [data-bn="nav-toggle"] { display: none; }
  }

  [data-bn="nav-menu"] {
    display: none;
    flex-direction: column;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    background: var(--surface-elevated);
    border-block-end: 1px solid var(--border-subtle);
    padding: var(--space-4) var(--space-6);
    gap: var(--space-2);
  }
  [data-bn="nav-menu"][data-open] { display: flex; }
  @media (min-width: 768px) {
    [data-bn="nav-menu"] {
      display: flex;
      flex-direction: row;
      position: static;
      background: none;
      border: none;
      padding: 0;
      align-items: center;
      gap: var(--space-2);
    }
  }
  [data-bn="nav-menu"] li > a {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    white-space: nowrap;
    min-block-size: 40px;
  }
  [data-bn="nav-menu"] li > a:hover,
  [data-bn="nav-menu"] li > a[aria-current="page"] { color: var(--text-primary); }

  [data-bn="nav-cta"] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }
  @media (min-width: 768px) {
    [data-bn="nav-cta"] { margin-block-start: 0; }
  }

  /* ── Footer ── */
  [data-bn="site-footer"] { border-block-start: 1px solid var(--border-subtle); }

  [data-bn="footer-inner"] {
    max-inline-size: var(--max-width);
    margin-inline: auto;
    padding: var(--space-12) var(--space-6);
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) {
    [data-bn="footer-inner"] { grid-template-columns: 2fr 1fr 1fr; }
  }

  [data-bn="footer-brand"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  [data-bn="footer-brand"] strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--brand-primary);
  }
  [data-bn="footer-brand"] p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    max-inline-size: 22rem;
  }

  [data-bn="site-footer"] nav h2 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-secondary);
    margin-block-end: var(--space-3);
    font-weight: 700;
  }
  [data-bn="site-footer"] nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  [data-bn="site-footer"] nav a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: color var(--transition-fast);
  }
  [data-bn="site-footer"] nav a:hover { color: var(--text-primary); }

  [data-bn="footer-bottom"] {
    border-block-start: 1px solid var(--border-subtle);
    padding: var(--space-4) var(--space-6);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
  }
}

@layer components {
  /* ── Buttons ── */
  [data-bn="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 44px;
    padding: var(--space-2) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
  }
  [data-bn="button"][data-variant="primary"] {
    background: var(--brand-primary);
    color: #fff;
  }
  [data-bn="button"][data-variant="primary"]:hover:not(:disabled) {
    background: var(--brand-dark);
    box-shadow: var(--shadow-md);
  }
  [data-bn="button"][data-variant="ghost"] {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-subtle);
  }
  [data-bn="button"][data-variant="ghost"]:hover:not(:disabled) {
    background: var(--surface-elevated);
    border-color: var(--text-secondary);
  }
  [data-bn="button"][data-variant="outline"] {
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
  }
  [data-bn="button"][data-variant="outline"]:hover:not(:disabled) { background: var(--brand-subtle); }
  [data-bn="button"][data-size="lg"] {
    min-block-size: 52px;
    padding: var(--space-3) var(--space-8);
    font-size: 1.125rem;
  }
  [data-bn="button"][data-full] { inline-size: 100%; }
  [data-bn="button"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ── Lead text (intro paragraphs) ── */
  [data-bn="lead"] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-inline-size: 44rem;
  }
  :is([data-bn="problem"], [data-bn="solution"], [data-bn="pipeline-section"], [data-bn="pricing-preview"], [data-bn="page-hero"], [data-bn="integrations"], [data-bn="product-principles"]) [data-bn="lead"] {
    text-align: center;
    margin-inline: auto;
    margin-block-end: var(--space-12);
  }

  /* ── Page Hero (Features/Pricing/Contact/About) ── */
  [data-bn="page-hero"] {
    padding: var(--space-20) var(--space-6) var(--space-12);
    text-align: center;
    background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface-base) 100%);
    border-block-end: 1px solid var(--border-subtle);
  }
  [data-bn="page-hero"] h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    margin-block-end: var(--space-4);
  }
  [data-bn="page-hero"] [data-bn="lead"] {
    font-size: 1.25rem;
    margin-inline: auto;
  }

  /* ── Hero (Home) ── */
  [data-bn="hero"] {
    display: grid;
    gap: var(--space-12);
    align-items: center;
    padding: var(--space-16) var(--space-6);
    max-inline-size: var(--max-width);
    margin-inline: auto;
  }
  @media (min-width: 900px) {
    [data-bn="hero"] {
      grid-template-columns: 1fr 1fr;
      padding-block: var(--space-24);
    }
  }
  [data-bn="hero-content"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  [data-bn="hero-badge"] { display: flex; }
  [data-bn="hero-badge"] span {
    background: var(--brand-subtle);
    color: var(--brand-primary);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 1px solid var(--brand-primary);
  }
  [data-bn="hero"] h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
  }
  [data-bn="hero"] [data-bn="lead"] { font-size: 1.125rem; }
  [data-bn="hero-actions"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  [data-bn="hero-social-proof"] {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  /* ── Dashboard preview (hero visual) ── */
  [data-bn="hero-visual"] { display: none; }
  @media (min-width: 900px) {
    [data-bn="hero-visual"] { display: block; }
  }

  [data-bn="dashboard-preview"] {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  [data-bn="preview-header"] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-base);
    border-block-end: 1px solid var(--border-subtle);
  }
  [data-bn="preview-dot"] {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--border-subtle);
  }
  [data-bn="preview-title"] {
    margin-inline-start: auto;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
  }
  [data-bn="preview-stats"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  [data-bn="stat-card"] {
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
  }
  [data-bn="stat-value"] {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text-primary);
  }
  [data-bn="stat-label"] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
  }
  [data-bn="stat-growth"] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
  }
  [data-bn="stat-growth"][data-trend="up"] { color: var(--success); }

  [data-bn="preview-pipeline"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-4);
  }
  [data-bn="pipeline-stage"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-base);
    border-radius: var(--radius-md);
  }
  [data-bn="pipeline-stage"] > span:first-child {
    font-size: 0.875rem;
    font-weight: 500;
  }
  [data-bn="pipeline-count"] {
    --stage-color: var(--brand-primary);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--stage-color);
  }
  [data-bn="pipeline-stage"][data-stage="new"] [data-bn="pipeline-count"] { --stage-color: hsl(220 15% 45%); }
  [data-bn="pipeline-stage"][data-stage="contacted"] [data-bn="pipeline-count"] { --stage-color: hsl(200 80% 45%); }
  [data-bn="pipeline-stage"][data-stage="qualified"] [data-bn="pipeline-count"] { --stage-color: hsl(45 90% 45%); }
  [data-bn="pipeline-stage"][data-stage="converted"] [data-bn="pipeline-count"] { --stage-color: var(--success); }

  /* ── Section: Problem ── */
  [data-bn="problem"] {
    padding: var(--space-20) var(--space-6);
    background: var(--surface-elevated);
    border-block: 1px solid var(--border-subtle);
  }
  :is([data-bn="problem"], [data-bn="solution"], [data-bn="pipeline-section"], [data-bn="pricing-preview"]) h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    text-align: center;
    margin-block-end: var(--space-4);
  }

  [data-bn="problem-grid"] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-inline-size: var(--max-width);
    margin-inline: auto;
  }
  @media (min-width: 640px) {
    [data-bn="problem-grid"] { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 960px) {
    [data-bn="problem-grid"] { grid-template-columns: repeat(3, 1fr); }
  }
  [data-bn="problem-card"] {
    padding: var(--space-6);
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
  }
  [data-bn="problem-icon"] {
    font-size: 1.5rem;
    display: block;
    margin-block-end: var(--space-3);
  }
  [data-bn="problem-card"] h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-block-end: var(--space-2);
  }
  [data-bn="problem-card"] p {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  /* ── Section: Solution / Feature grid ── */
  [data-bn="solution"] { padding: var(--space-20) var(--space-6); }

  [data-bn="feature-grid"] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-inline-size: var(--max-width);
    margin-inline: auto;
  }
  @media (min-width: 640px) {
    [data-bn="feature-grid"] { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 960px) {
    [data-bn="feature-grid"] { grid-template-columns: repeat(3, 1fr); }
  }
  [data-bn="feature-card"] {
    padding: var(--space-6);
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    transition: box-shadow var(--transition-fast), translate var(--transition-fast);
  }
  [data-bn="feature-card"]:hover {
    box-shadow: var(--shadow-md);
    translate: 0 -2px;
  }
  [data-bn="feature-icon"] {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    background: var(--brand-subtle);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--space-4);
    color: var(--brand-primary);
  }
  [data-bn="feature-card"] h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-block-end: var(--space-2);
  }
  [data-bn="feature-card"] p {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  /* ── Section: Pipeline steps ── */
  [data-bn="pipeline-section"] {
    padding: var(--space-20) var(--space-6);
    background: var(--surface-elevated);
    border-block: 1px solid var(--border-subtle);
  }
  [data-bn="pipeline-steps"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-inline-size: 48rem;
    margin-inline: auto;
  }
  [data-bn="pipeline-step"] {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
  }
  [data-bn="step-number"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.5rem;
    block-size: 2.5rem;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
  }
  [data-bn="pipeline-step"] h3 {
    font-weight: 700;
    margin-block-end: var(--space-1);
  }
  [data-bn="pipeline-step"] p {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  /* ── Pricing cards (shared between home preview + pricing page) ── */
  [data-bn="pricing-preview"] { padding: var(--space-20) var(--space-6); }
  [data-bn="pricing-main"] { padding: var(--space-16) var(--space-6); }

  [data-bn="pricing-cards"] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-inline-size: 56rem;
    margin-inline: auto;
    align-items: stretch;
  }
  @media (min-width: 768px) {
    [data-bn="pricing-cards"] { grid-template-columns: repeat(2, 1fr); }
  }

  [data-bn="pricing-card"] {
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-6);
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    position: relative;
  }
  [data-bn="pricing-card"][data-featured] {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-lg);
  }

  [data-bn="plan-badge"] {
    position: absolute;
    inset-block-start: -0.75rem;
    inset-inline-start: 50%;
    translate: -50% 0;
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    white-space: nowrap;
  }
  [data-bn="pricing-card"] :is(h2, h3) {
    font-size: 1.125rem;
    font-weight: 700;
    margin-block-end: var(--space-2);
  }
  [data-bn="plan-price"] {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    font-family: var(--font-display);
    margin-block-end: var(--space-1);
    line-height: 1.15;
  }
  [data-bn="plan-tagline"] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-block-end: var(--space-6);
    line-height: 1.5;
  }
  [data-bn="plan-features"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-end: var(--space-6);
  }
  [data-bn="plan-features"] li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
  [data-bn="plan-features"] li svg {
    flex-shrink: 0;
    color: var(--brand-primary);
    margin-block-start: 2px;
  }
  [data-bn="pricing-card"] [data-bn="button"][data-full] { margin-block-start: auto; }

  [data-bn="pricing-more"] {
    text-align: center;
    margin-block-start: var(--space-8);
  }
  [data-bn="pricing-more"] a {
    color: var(--brand-primary);
    text-decoration: underline;
    font-weight: 600;
  }

  /* ── Section: Final CTA ── */
  [data-bn="cta-final"] {
    text-align: center;
    padding: var(--space-24) var(--space-6);
    background: var(--surface-elevated);
    border-block: 1px solid var(--border-subtle);
  }
  [data-bn="cta-final"] h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-block-end: var(--space-4);
  }
  [data-bn="cta-final"] p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    margin-block-end: var(--space-8);
    max-inline-size: 40rem;
    margin-inline: auto;
  }

  /* ── Features page: detailed sections ── */
  [data-bn="features-detailed"] { padding: var(--space-12) var(--space-6); }

  [data-bn="feature-section"] {
    display: grid;
    gap: var(--space-12);
    align-items: center;
    max-inline-size: var(--max-width);
    margin-inline: auto;
    padding-block: var(--space-12);
    border-block-end: 1px solid var(--border-subtle);
  }
  [data-bn="feature-section"]:last-child { border-block-end: none; }
  @media (min-width: 768px) {
    [data-bn="feature-section"] { grid-template-columns: 1fr 1fr; }
    [data-bn="feature-section"][data-reverse] [data-bn="feature-text"] { order: 2; }
  }

  [data-bn="feature-tag"] {
    display: inline-block;
    background: var(--brand-subtle);
    color: var(--brand-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    margin-block-end: var(--space-3);
    border: 1px solid var(--brand-primary);
  }
  [data-bn="feature-text"] h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-block-end: var(--space-4);
  }
  [data-bn="feature-text"] > p {
    color: var(--text-secondary);
    margin-block-end: var(--space-6);
  }

  [data-bn="feature-bullets"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  [data-bn="feature-bullets"] li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.9375rem;
  }
  [data-bn="feature-bullets"] li svg {
    flex-shrink: 0;
    color: var(--brand-primary);
    margin-block-start: 2px;
  }

  [data-bn="feature-visual"] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-bn="feature-screenshot"] {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    background: var(--surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
  }
  [data-bn="feature-screenshot"][data-screenshot="leads"] {
    background: linear-gradient(135deg, hsl(var(--brand-hue) 60% 96%), hsl(220 20% 96%));
  }
  [data-bn="feature-screenshot"][data-screenshot="scheduling"] {
    background: linear-gradient(135deg, hsl(200 70% 96%), hsl(var(--brand-hue) 50% 96%));
  }
  [data-bn="feature-screenshot"][data-screenshot="invoicing"] {
    background: linear-gradient(135deg, hsl(280 60% 96%), hsl(220 20% 96%));
  }
  [data-bn="feature-screenshot"][data-screenshot="customers"] {
    background: linear-gradient(135deg, hsl(30 70% 96%), hsl(var(--brand-hue) 50% 96%));
  }
  [data-bn="feature-screenshot"][data-screenshot="portal"] {
    background: linear-gradient(135deg, hsl(180 60% 96%), hsl(var(--brand-hue) 50% 96%));
  }
  [data-bn="screenshot-label"] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    padding: var(--space-4);
    text-align: center;
  }

  /* ── Integrations ── */
  [data-bn="integrations"] {
    padding: var(--space-20) var(--space-6);
    background: var(--surface-elevated);
    border-block: 1px solid var(--border-subtle);
  }
  [data-bn="integrations"] h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
    margin-block-end: var(--space-4);
  }
  [data-bn="integration-grid"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    max-inline-size: var(--max-width);
    margin-inline: auto;
  }
  [data-bn="integration-card"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-6);
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
  }
  [data-bn="integration-card"] strong {
    font-weight: 700;
    font-size: 0.9375rem;
  }
  [data-bn="integration-card"] span {
    font-size: 0.75rem;
    color: var(--text-secondary);
  }

  /* ── FAQ ── */
  [data-bn="faq"] { padding: var(--space-16) var(--space-6); }
  [data-bn="faq"] h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
    margin-block-end: var(--space-8);
  }
  [data-bn="faq-list"] {
    max-inline-size: 48rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  [data-bn="faq-item"] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    background: var(--surface-elevated);
  }
  [data-bn="faq-item"] dt {
    font-weight: 700;
    margin-block-end: var(--space-2);
  }
  [data-bn="faq-item"] dd {
    color: var(--text-secondary);
    font-size: 0.9375rem;
  }

  /* ── Contact page ── */
  [data-bn="contact-main"] { padding: var(--space-12) var(--space-6); }
  [data-bn="contact-grid"] {
    display: grid;
    gap: var(--space-12);
    max-inline-size: var(--max-width);
    margin-inline: auto;
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    [data-bn="contact-grid"] { grid-template-columns: 3fr 2fr; }
  }
  :is([data-bn="contact-form-wrapper"], [data-bn="contact-info"]) h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-block-end: var(--space-6);
  }

  [data-bn="contact-form"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  [data-bn="form-row"] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
  }
  @media (min-width: 480px) {
    [data-bn="form-row"] { grid-template-columns: 1fr 1fr; }
  }

  [data-bn="field"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  [data-bn="field"] > label {
    font-size: 0.875rem;
    font-weight: 500;
  }
  [data-bn="field"] :is(input, select, textarea) {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }
  [data-bn="field"] :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-subtle);
  }
  [data-bn="field"] :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
  [data-bn="field"] textarea {
    resize: vertical;
    min-block-size: 8rem;
  }

  [data-bn="hp-field"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  [data-bn="form-success"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--brand-subtle);
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-lg);
  }
  [data-bn="form-success"] svg { color: var(--brand-primary); }

  [data-bn="form-error-banner"] {
    padding: var(--space-3) var(--space-4);
    background: var(--danger-subtle);
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    color: var(--danger);
    font-size: 0.875rem;
    margin-block-end: var(--space-4);
  }

  [data-bn="contact-channels"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block-end: var(--space-8);
  }
  [data-bn="contact-channel"] {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
  }
  [data-bn="channel-icon"] {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    background: var(--brand-subtle);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
  }
  [data-bn="channel-icon"] svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }
  [data-bn="contact-channel"] strong {
    display: block;
    font-weight: 700;
    margin-block-end: var(--space-1);
  }
  [data-bn="contact-channel"] p {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  [data-bn="response-time"] {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
  }
  [data-bn="response-time"] strong {
    display: block;
    font-weight: 700;
    margin-block-end: var(--space-2);
  }
  [data-bn="response-time"] p {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  /* ── About page ── */
  [data-bn="mission"] { padding: var(--space-16) var(--space-6); }
  [data-bn="mission"] h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-block-end: var(--space-8);
    text-align: center;
  }
  [data-bn="mission-statement"] {
    max-inline-size: 44rem;
    margin-inline: auto;
    padding: var(--space-6);
    border-inline-start: 4px solid var(--brand-primary);
    background: var(--brand-subtle);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-size: 1.125rem;
    margin-block-end: var(--space-8);
  }
  [data-bn="mission-details"] {
    max-inline-size: 44rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    color: var(--text-secondary);
  }

  [data-bn="values"] {
    padding: var(--space-16) var(--space-6);
    background: var(--surface-elevated);
    border-block: 1px solid var(--border-subtle);
  }
  [data-bn="values"] h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
    margin-block-end: var(--space-8);
  }
  [data-bn="values-grid"] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-inline-size: var(--max-width);
    margin-inline: auto;
  }
  @media (min-width: 640px) {
    [data-bn="values-grid"] { grid-template-columns: repeat(2, 1fr); }
  }
  [data-bn="value-card"] {
    padding: var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--surface-base);
  }
  [data-bn="value-card"] h3 {
    font-weight: 700;
    margin-block-end: var(--space-2);
  }
  [data-bn="value-card"] p {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  [data-bn="product-principles"] { padding: var(--space-16) var(--space-6); }
  [data-bn="product-principles"] h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
    margin-block-end: var(--space-4);
  }
  [data-bn="principles-list"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-inline-size: 48rem;
    margin-inline: auto;
  }
  [data-bn="principle-item"] {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
  }
  [data-bn="principle-number"] {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--brand-primary);
    opacity: .4;
    min-inline-size: 3rem;
    flex-shrink: 0;
  }
  [data-bn="principle-item"] p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-block-start: var(--space-1);
  }

  [data-bn="pilot-story"] {
    padding: var(--space-16) var(--space-6);
    background: var(--surface-elevated);
    border-block: 1px solid var(--border-subtle);
  }
  [data-bn="pilot-story"] h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-block-end: var(--space-6);
  }
  [data-bn="pilot-story"] p {
    color: var(--text-secondary);
    margin-block-end: var(--space-4);
    max-inline-size: 44rem;
  }
}