/* ============================================================
   Homepage — Direction A (Product-forward)
   Source: design handoff `Homepage Polish.html` / DirectionA.jsx
   ============================================================ */

@layer pages {

  .marketing-page {
    --hp-max-width: 1240px;
    --hp-pad-x: 48px;
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  .marketing-page *,
  .marketing-page *::before,
  .marketing-page *::after {
    box-sizing: border-box;
  }

  .marketing-page a { color: inherit; text-decoration: none; }
  .marketing-page img { max-width: 100%; display: block; }

  /* ── Container ───────────────────────────────────────────── */
  .hp-container {
    max-width: var(--hp-max-width);
    margin: 0 auto;
    padding: 0 var(--hp-pad-x);
  }

  /* ── Buttons ─────────────────────────────────────────────── */
  .hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600;
    border-radius: 10px;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .hp-btn-sm { padding: 8px 18px; font-size: 0.86rem; }
  .hp-btn-lg { padding: 14px 28px; font-size: 0.95rem; }

  .hp-btn-primary {
    background: linear-gradient(135deg, var(--color-sage-500), var(--color-sage-700));
    color: #fff;
    box-shadow: 0 2px 10px rgba(123, 175, 142, 0.3);
  }
  .hp-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(123, 175, 142, 0.45);
  }
  .hp-btn-primary:active { transform: translateY(0); }

  /* ── Eyebrow / kicker ────────────────────────────────────── */
  .hp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-sage-700);
    background: var(--color-sage-50);
    border: 1px solid rgba(123, 175, 142, 0.2);
    border-radius: 999px;
  }
  .hp-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-sage-500);
    box-shadow: 0 0 0 3px rgba(123, 175, 142, 0.2);
  }

  .hp-kicker {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-sage-700);
  }

  /* ── Section heading ─────────────────────────────────────── */
  .hp-section-head {
    max-width: 720px;
    margin: 0 auto 64px;
    text-align: center;
  }
  .hp-section-head h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.6px;
    margin: 14px 0;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .hp-section-head p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 580px;
    margin: 0 auto;
  }

  /* ── Browser-window mock ─────────────────────────────────── */
  .hp-window {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border-subtle);
    box-shadow:
      0 30px 60px -20px rgba(44, 42, 38, 0.18),
      0 12px 24px -10px rgba(44, 42, 38, 0.10),
      0 2px 6px rgba(44, 42, 38, 0.04);
  }
  .hp-window-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--border-subtle);
  }
  .hp-window-bar .hp-dots { display: flex; gap: 6px; }
  .hp-window-bar .hp-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-gray-300);
  }
  .hp-window-bar .hp-dots span:nth-child(1) { background: #FF6157; }
  .hp-window-bar .hp-dots span:nth-child(2) { background: #FFC130; }
  .hp-window-bar .hp-dots span:nth-child(3) { background: #2BC940; }
  .hp-window-bar .hp-url {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 4px 10px;
    text-align: center;
    max-width: 280px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
  }
  .hp-window-bar .hp-url i { color: var(--color-sage-600); font-size: 0.7rem; }
  .hp-window-spacer { width: 56px; }
  .hp-window-body { background: #fff; }
  .hp-window-body img { width: 100%; display: block; }

  /* ── Fade-up entrance ────────────────────────────────────── */
  .hp-fade {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .hp-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Nav ─────────────────────────────────────────────────── */
  .hp-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 64px;
    background: rgba(245, 243, 239, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(232, 230, 225, 0.7);
    display: flex;
    align-items: center;
  }
  .hp-nav .hp-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .hp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.4px;
    color: var(--text-primary);
  }
  .hp-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .hp-nav-links a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
  }
  .hp-nav-links a:hover { color: var(--color-sage-700); }
  .hp-nav-links a.hp-btn { color: #fff; }

  /* ── Hero ────────────────────────────────────────────────── */
  .hp-hero {
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
  }
  .hp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 700px 400px at 80% 20%, rgba(168, 201, 181, 0.18), transparent 60%),
      radial-gradient(ellipse 600px 300px at 10% 80%, rgba(232, 213, 190, 0.22), transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
  .hp-hero .hp-container { position: relative; z-index: 1; }
  .hp-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
  }
  .hp-hero-text h1 {
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -1.4px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 22px 0;
  }
  .hp-hero-text h1 .hp-accent {
    color: var(--color-sage-700);
    position: relative;
    white-space: nowrap;
  }
  .hp-hero-text h1 .hp-accent::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 4px;
    height: 12px;
    background: rgba(123, 175, 142, 0.22);
    border-radius: 3px;
    z-index: -1;
  }
  .hp-hero-text .hp-lede {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 14px;
  }
  .hp-hero-text .hp-cta-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
    flex-wrap: wrap;
  }
  .hp-hero-text .hp-cta-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 0.82rem;
    color: var(--text-tertiary);
    flex-wrap: wrap;
  }
  .hp-hero-text .hp-cta-meta i { color: var(--color-sage-600); }
  .hp-hero-text .hp-cta-meta span + span::before {
    content: "·";
    margin: 0 8px;
    color: var(--border-default);
  }
  .hp-hero-visual {
    position: relative;
    perspective: 1800px;
  }
  .hp-hero-visual .hp-window {
    transform: rotate3d(1, -2.4, 0.2, 8deg) translateZ(0);
    transition: transform 0.6s ease;
  }
  .hp-hero-visual:hover .hp-window {
    transform: rotate3d(1, -2.4, 0.2, 4deg);
  }

  /* ── Strip ───────────────────────────────────────────────── */
  .hp-strip {
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.5);
    padding: 32px 0;
  }
  .hp-strip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }
  .hp-strip-row .hp-strip-label {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
  }
  .hp-strip-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
  }
  .hp-strip-tag i { color: var(--color-sage-600); }

  /* ── Features ────────────────────────────────────────────── */
  .hp-features {
    background: #fff;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding-top: 140px;
  }
  .hp-features .hp-section-head { margin-bottom: 96px; }

  .hp-feature-row {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
    padding: 80px 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .hp-feature-row:last-child { border-bottom: none; }
  .hp-feature-row.hp-reverse { grid-template-columns: 1.1fr 1fr; }
  .hp-feature-row.hp-reverse .hp-feature-text { order: 2; }
  .hp-feature-row.hp-reverse .hp-feature-visual { order: 1; }

  .hp-feature-text .hp-number {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-sage-700);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  .hp-feature-text h3 {
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.6px;
    margin-bottom: 16px;
    line-height: 1.2;
    color: var(--text-primary);
  }
  .hp-feature-text > p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 18px;
  }
  .hp-feature-text .hp-points {
    list-style: none;
    margin-top: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hp-feature-text .hp-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.92rem;
    color: var(--text-primary);
    line-height: 1.55;
  }
  .hp-feature-text .hp-points i {
    color: var(--color-sage-600);
    margin-top: 2px;
    flex-shrink: 0;
  }
  .hp-feature-text .hp-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-sage-700);
    transition: gap var(--transition-fast);
  }
  .hp-feature-text .hp-more:hover { gap: 12px; }

  .hp-feature-visual { position: relative; }
  .hp-feature-visual .hp-window { transform: rotate(-0.5deg); }
  .hp-feature-row.hp-reverse .hp-feature-visual .hp-window { transform: rotate(0.5deg); }

  /* ── Workflow ────────────────────────────────────────────── */
  .hp-workflow {
    background: var(--bg-base);
    padding: 120px 0;
  }
  .hp-workflow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .hp-workflow-step {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  }
  .hp-workflow-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  .hp-workflow-step .hp-step-num {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-sage-50);
    color: var(--color-sage-700);
    font-weight: 700;
    font-size: 0.95rem;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid var(--color-sage-200);
  }
  .hp-workflow-step h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
  }
  .hp-workflow-step p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.65;
  }
  .hp-workflow-step .hp-chips {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .hp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--color-gray-100);
    border-radius: 6px;
    font-size: 0.74rem;
    color: var(--text-secondary);
    font-weight: 500;
  }
  .hp-chip i { font-size: 0.78rem; color: var(--color-sage-600); }

  /* ── CTA ─────────────────────────────────────────────────── */
  .hp-cta {
    padding: 56px 0 100px;
    background: var(--bg-base);
  }
  .hp-cta-card {
    background:
      radial-gradient(ellipse 500px 300px at 100% 0%, rgba(196, 164, 223, 0.18), transparent 60%),
      radial-gradient(ellipse 600px 400px at 0% 100%, rgba(232, 213, 190, 0.25), transparent 60%),
      linear-gradient(135deg, #F2F7F4 0%, #EDF6F1 50%, #FDF9F5 100%);
    border-radius: 24px;
    padding: 72px 60px;
    text-align: center;
    border: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
  }
  .hp-cta-card h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: -0.8px;
    margin-bottom: 16px;
    line-height: 1.15;
    text-wrap: balance;
    font-weight: 700;
    color: var(--text-primary);
  }
  .hp-cta-card h2 .hp-accent {
    color: var(--color-sage-700);
    border-bottom: 3px solid rgba(123, 175, 142, 0.5);
    padding-bottom: 2px;
  }
  .hp-cta-card .hp-blurb {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 auto 28px;
    max-width: 480px;
  }
  .hp-cta-card .hp-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* ── Footer ──────────────────────────────────────────────── */
  .hp-footer {
    background: var(--color-gray-900);
    color: rgba(255, 255, 255, 0.7);
    padding: 64px 0 28px;
  }
  .hp-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hp-footer-brand { max-width: 640px; }
  .hp-footer-brand h3 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 14px;
    font-weight: 700;
  }
  .hp-footer-brand p {
    font-size: 0.85rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
    max-width: 360px;
  }
  .hp-footer-bottom {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    flex-wrap: wrap;
    gap: 16px;
  }
  .hp-footer-bottom a {
    color: rgba(255, 255, 255, 0.4);
    margin-left: 24px;
    transition: color var(--transition-fast);
  }
  .hp-footer-bottom a:hover { color: rgba(255, 255, 255, 0.8); }

  /* ── Responsive ──────────────────────────────────────────── */
  @media (max-width: 960px) {
    .marketing-page { --hp-pad-x: 24px; }
    .hp-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hp-feature-row,
    .hp-feature-row.hp-reverse {
      grid-template-columns: 1fr;
      gap: 36px;
      padding: 60px 0;
    }
    .hp-feature-row.hp-reverse .hp-feature-text { order: 1; }
    .hp-feature-row.hp-reverse .hp-feature-visual { order: 2; }
    .hp-workflow-grid { grid-template-columns: 1fr; }
    .hp-cta-card { padding: 48px 32px; }
    .hp-strip-row { justify-content: flex-start; }
    .hp-nav-links a:not(.hp-btn) { display: none; }
  }

  @media (max-width: 600px) {
    .hp-nav-links { gap: 8px; }
    .hp-footer-bottom { flex-direction: column; align-items: flex-start; }
    .hp-footer-bottom a { margin-left: 0; margin-right: 16px; }
    .hp-cta-card { padding: 36px 24px; }
  }

  /* ── Dark mode overrides ─────────────────────────────────── */
  [data-theme="dark"] .hp-nav {
    background: rgba(26, 25, 22, 0.78);
    border-bottom-color: var(--border-subtle);
  }
  [data-theme="dark"] .hp-hero::before {
    background:
      radial-gradient(ellipse 700px 400px at 80% 20%, rgba(140, 184, 156, 0.10), transparent 60%),
      radial-gradient(ellipse 600px 300px at 10% 80%, rgba(204, 168, 120, 0.08), transparent 60%);
  }
  [data-theme="dark"] .hp-hero-text h1 .hp-accent::after {
    background: rgba(140, 184, 156, 0.18);
  }
  [data-theme="dark"] .hp-strip {
    background: var(--bg-surface);
  }
  [data-theme="dark"] .hp-strip-tag {
    background: var(--bg-elevated);
    color: var(--text-secondary);
  }
  [data-theme="dark"] .hp-features {
    background: var(--bg-surface);
  }
  [data-theme="dark"] .hp-workflow-step {
    background: var(--bg-elevated);
  }
  [data-theme="dark"] .hp-chip {
    background: var(--bg-sunken);
    color: var(--text-secondary);
  }
  [data-theme="dark"] .hp-eyebrow {
    color: var(--color-sage-300);
    background: rgba(140, 184, 156, 0.10);
    border-color: rgba(140, 184, 156, 0.22);
  }
  [data-theme="dark"] .hp-eyebrow .dot {
    background: var(--color-sage-400);
    box-shadow: 0 0 0 3px rgba(140, 184, 156, 0.20);
  }
  [data-theme="dark"] .hp-feature-text .hp-number,
  [data-theme="dark"] .hp-feature-text .hp-more,
  [data-theme="dark"] .hp-kicker {
    color: var(--color-sage-300);
  }
  [data-theme="dark"] .hp-hero-text h1 .hp-accent,
  [data-theme="dark"] .hp-cta-card h2 .hp-accent {
    color: var(--color-sage-300);
  }
  [data-theme="dark"] .hp-cta-card h2 .hp-accent {
    border-bottom-color: rgba(140, 184, 156, 0.5);
  }
  [data-theme="dark"] .hp-cta-card {
    background:
      radial-gradient(ellipse 500px 300px at 100% 0%, rgba(155, 114, 184, 0.18), transparent 60%),
      radial-gradient(ellipse 600px 400px at 0% 100%, rgba(204, 168, 120, 0.14), transparent 60%),
      linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 50%, var(--bg-surface) 100%);
    border-color: var(--border-default);
  }
  [data-theme="dark"] .hp-workflow-step .hp-step-num {
    background: rgba(140, 184, 156, 0.12);
    color: var(--color-sage-300);
    border-color: rgba(140, 184, 156, 0.28);
  }
  [data-theme="dark"] .hp-window {
    border-color: var(--border-default);
  }
  [data-theme="dark"] .hp-footer {
    background: var(--bg-sunken);
    border-top: 1px solid var(--border-subtle);
  }
} /* end @layer pages */