/* ============================================================
   2ndEars Website — shared styles across all landing directions
   ============================================================ */

/* Theme variables, mutable by tweaks */
:root {
  --site-bg:     var(--bg-0);
  --site-bg-2:   var(--bg-1);
  --site-card:   var(--bg-2);
  --site-card-2: var(--bg-3);
  --site-fg:     var(--fg-0);
  --site-fg-1:   var(--fg-1);
  --site-fg-2:   var(--fg-2);
  --site-fg-3:   var(--fg-3);
  --site-line:   var(--line-0);
  --site-line-1: var(--line-1);
  --site-accent:      var(--signal);
  --site-accent-soft: var(--signal-soft);
}

/* Light/cream theme — uses the same warm hue */
.theme-light {
  --site-bg:     oklch(0.97 0.005 60);
  --site-bg-2:   oklch(0.94 0.006 60);
  --site-card:   oklch(0.99 0.003 60);
  --site-card-2: oklch(0.92 0.007 60);
  --site-fg:     oklch(0.16 0.005 60);
  --site-fg-1:   oklch(0.32 0.006 60);
  --site-fg-2:   oklch(0.48 0.006 60);
  --site-fg-3:   oklch(0.62 0.006 60);
  --site-line:   oklch(0.85 0.007 60);
  --site-line-1: oklch(0.78 0.008 60);
}

.accent-amber { --site-accent: var(--signal); --site-accent-soft: var(--signal-soft); }
.accent-blue  { --site-accent: var(--ai);     --site-accent-soft: var(--ai-soft); }
.accent-green { --site-accent: var(--ok);     --site-accent-soft: color-mix(in oklch, var(--ok) 16%, transparent); }

.density-compact { --site-scale: 0.92; }
.density-comfy   { --site-scale: 1.05; }

/* ─── Landing container ────────────────────────────────────── */
.site {
  background: var(--site-bg);
  color: var(--site-fg);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  min-height: 100%;
}

/* The "page" is the artboard's full height; sections stack normally. */
.site * { box-sizing: border-box; }

.site h1, .site h2, .site h3, .site h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
.site p { margin: 0; }
.site a { color: inherit; text-decoration: none; }

/* ─── Reusable atoms ───────────────────────────────────────── */
.mono-l { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--site-fg-2); }
.mono-v { font-family: var(--font-mono); font-size: 12px; color: var(--site-fg-1); }
.mono-tiny { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--site-fg-2); }
.label-accent { color: var(--site-accent); }

.hr { height: 1px; background: var(--site-line); border: 0; }
.dashed-hr { height: 1px; border-top: 1px dashed var(--site-line); background: none; }

/* ─── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 6px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--site-line);
  background: var(--site-card); color: var(--site-fg);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--site-card-2); border-color: var(--site-line-1); }
.btn-primary {
  background: var(--site-accent);
  color: oklch(0.18 0.01 60);
  border-color: var(--site-accent);
  font-weight: 600;
}
.btn-primary:hover { background: color-mix(in oklch, var(--site-accent) 88%, white); border-color: color-mix(in oklch, var(--site-accent) 88%, white); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--site-card); }

/* ─── Brand mark ───────────────────────────────────────────── */
.logo-mark {
  display: inline-block;
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask-image: url(logo.svg);
  mask-image: url(logo.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600;
  letter-spacing: -0.015em;
}

/* ─── Header / nav ─────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 5;
  background: var(--site-bg);
  border-bottom: 1px solid var(--site-line);
  height: 56px;
}
.site-nav .inner {
  height: 100%; max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  padding: 0 32px;
}
.site-nav .links { display: flex; gap: 22px; margin-left: auto; }
.site-nav .links a { font-size: 13px; color: var(--site-fg-1); }
.site-nav .links a:hover { color: var(--site-fg); }
.site-nav .ver { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--site-fg-3); padding-right: 14px; border-right: 1px solid var(--site-line); margin-right: 6px; }

/* ─── Sections ─────────────────────────────────────────────── */
.section { padding: 96px 32px; }
.section-narrow { padding: 64px 32px; }
.container { max-width: 1180px; margin: 0 auto; }
.container-narrow { max-width: 980px; margin: 0 auto; }

.section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.section-eyebrow { color: var(--site-accent); letter-spacing: 0.08em; }
.section-title { font-size: 34px; line-height: 1.15; letter-spacing: -0.025em; color: var(--site-fg); max-width: 720px; text-wrap: balance; }
.section-lede { font-size: 16px; color: var(--site-fg-1); max-width: 620px; line-height: 1.55; }

/* ─── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--site-card);
  border: 1px solid var(--site-line);
  border-radius: 8px;
  padding: 22px;
}
.card-flat {
  background: var(--site-bg-2);
  border: 1px solid var(--site-line);
  border-radius: 8px;
  padding: 22px;
}

/* ─── Footer ───────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--site-line);
  padding: 40px 32px 56px;
  background: var(--site-bg-2);
}
.site-foot .inner { max-width: 1180px; margin: 0 auto; display: flex; gap: 32px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.foot-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--site-fg-3); }
.foot-email { font-family: var(--font-mono); font-size: 13px; color: var(--site-fg); }
.foot-email:hover { color: var(--site-accent); }

/* ─── Misc utilities ───────────────────────────────────────── */
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stack { display: flex; flex-direction: column; }
.stack-tight { display: flex; flex-direction: column; gap: 6px; }
.grid { display: grid; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Pill chip used to flag signal-style facts */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--site-accent-soft);
  border: 1px solid color-mix(in oklch, var(--site-accent) 30%, transparent);
  color: var(--site-accent);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--site-accent); }

/* Animated listening dot (used in app mocks) */
.dot-signal {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--signal) 18%, transparent);
}
@keyframes pulseOpacity { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes aiPulse { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.1); opacity: 1; } }

/* Meter cells (used in app mocks) */
.meter-cells { display: flex; gap: 2px; }
.meter-cell { width: 8px; height: 12px; border-radius: 1px; background: oklch(0.32 0.008 60); }
.meter-cell.on-green  { background: var(--ok); }
.meter-cell.on-amber  { background: var(--signal); }
.meter-cell.on-red    { background: var(--warn); }

/* Big numeric badges */
.num-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--site-fg-2);
}

/* Faint warm grain via background-image substitute — we keep flat per DS, so just a subtle vignette */
.site-vignette {
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%, color-mix(in oklch, var(--site-accent) 6%, transparent), transparent 60%),
    var(--site-bg);
}

/* ─── App-mock chrome (excluded from mobile collapse) ───────────────── */
.app-mock-grid { display: grid; grid-template-columns: 1.4fr 1fr; }
.app-mock-frame { width: 100%; }
.hero-section { padding: 100px 32px 56px; }

/* ============================================================
   MOBILE — ≤ 768px
   The whole site was authored desktop-first at 1280 wide.
   This block stacks everything, shrinks type, hides nav links,
   and puts the desktop-app screenshot in a horizontal-scroll
   wrapper so it stays legible instead of getting mangled.
   ============================================================ */
@media (max-width: 768px) {
  .site { font-size: 14px; }

  /* Section padding / containers */
  .section { padding: 56px 16px !important; }
  .section-narrow { padding: 40px 16px !important; }
  .container, .container-narrow { padding: 0 !important; max-width: 100% !important; }
  .hero-section { padding: 64px 16px 40px !important; }

  /* Headlines */
  .site h1 { font-size: 38px !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; }
  .section-title { font-size: 24px !important; line-height: 1.18 !important; }
  .section-lede { font-size: 14px !important; }
  .section-head { margin-bottom: 28px !important; }

  /* Class-based grids collapse */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Any landing-level inline grid collapses to one column. The desktop-app
     mock dodges this rule because its internal grid is now class-based
     (.app-mock-grid) — no inline grid-template-columns to match. */
  .site [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* NavBar — hide the link row + version chip; keep brand + Download */
  .site-nav { height: 52px; }
  .site-nav .inner { padding: 0 16px !important; gap: 10px !important; }
  .site-nav .links { display: none !important; }
  .site-nav .ver { display: none !important; }

  /* Cards padding */
  .card, .card-flat { padding: 18px !important; }
  /* PricingCard's outer card uses big inline padding — bring it down */
  .card[style*="padding: 40px"], .card[style*="padding: 48px"] { padding: 22px !important; }

  /* Buttons stack vertically on narrow screens */
  .btn { padding: 12px 16px !important; font-size: 13px !important; justify-content: center !important; }
  /* BuyCta + similar inline flex rows of buttons — let them stack */
  .btn + .btn { margin-top: 0; }

  /* Footer stacks */
  .site-foot { padding: 32px 16px 40px !important; }
  .site-foot .inner { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  .foot-col { align-items: flex-start !important; }

  /* ─── Hero plugins: stack and scale down ──────────────────────────── */
  .plugin-hero-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .plugin-hero-row .plugin-hero-card {
    transform: scale(0.78) !important;
    transform-origin: center top !important;
    margin: -40px 0 !important;
  }
  .plugin-labels-row {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: center !important;
  }

  /* ─── Desktop-app screenshot: horizontal-scroll snapshot ──────────── */
  .app-mock-frame {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px 8px;
    /* Hint at scroll affordance with a soft right fade */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  }
  .app-mock-frame > * {
    min-width: 940px;
  }

  /* Signal-flow strip — stack the steps */
  .site section[style*="border-top"] .row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Feature list rows: drop the index column, stack label + desc */
  .site [style*="grid-template-columns: 180px"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  /* Hide the trailing "01 / 06" index counter on mobile to save space */
  .site [style*="grid-template-columns: 180px"] > .mono-tiny:last-child {
    display: none;
  }

  /* Pricing card buttons column — keep stretched, not min-width 240 */
  .card .stack-tight[style*="minWidth"], .card .stack-tight[style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ─── Small mobile (≤ 380px) ──────────────────────────────────────── */
@media (max-width: 380px) {
  .site h1 { font-size: 32px !important; }
  .section-title { font-size: 22px !important; }
  .plugin-hero-row .plugin-hero-card {
    transform: scale(0.7) !important;
    margin: -56px 0 !important;
  }
}