/* ============================================================
   Sendorai landing — additions on top of landing.css
   New sections + responsive + Tweaks variants
   ============================================================ */

/* Override the design-system marketing nav for waitlist-only */
.landing-nav .right .snd-btn.primary { padding: 0 18px; }

/* Tightening: limit display headline kerning blow-out on small viewports */
body { -webkit-font-smoothing: antialiased; }

/* ---------- Hero — launch badge ---------- */
.hero-eyebrow.launch .dot { background: var(--ember); }

/* Anchor the floating annotations to the email card itself (not the
   surrounding hero column) so they always sit just outside the card
   corners and never cover the title, body, or footer buttons. */
.draft-mock-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
}
.draft-mock-wrap .float-note {
  position: absolute;
  z-index: 2;
}
/* Top-left: above the card, jutting up-and-left from the top corner */
.draft-mock-wrap .float-note.tl {
  top: -26px;
  left: -28px;
  right: auto;
  bottom: auto;
}
/* Bottom-right: below the card, jutting down-and-right from the bottom corner */
.draft-mock-wrap .float-note.br {
  bottom: -26px;
  right: -20px;
  top: auto;
  left: auto;
}

/* Soft glow behind hero numerals (allowed: subtle fern radial) */
.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute;
  pointer-events: none;
  top: -20%;
  right: -10%;
  width: 720px;
  height: 720px;
  background: radial-gradient(closest-side, rgba(81,120,63,0.10), rgba(81,120,63,0));
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* Hero: centered layout variant */
.hero.layout-centered {
  display: block;
  text-align: center;
  padding-bottom: 56px;
}
.hero.layout-centered .hero-eyebrow { margin: 0 auto 22px; }
.hero.layout-centered h1 { max-width: 980px; margin: 0 auto; }
.hero.layout-centered .sub { margin: 24px auto 0; }
.hero.layout-centered .hero-actions { justify-content: center; }
.hero.layout-centered .hero-meta-line { text-align: center; }
.hero.layout-centered .hero-visual { margin-top: 64px; height: auto; }

/* Hero meta line under buttons */
.hero-meta-line {
  margin-top: 20px;
  font-size: 13px;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hero-meta-line .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--stone-3); }

/* ---------- Section padding adjustments ---------- */
.section { padding-top: 0; padding-bottom: 0; }
.section.s-pad { padding-top: 120px; }

/* ---------- Value props ---------- */
.value-section { padding-top: 120px; }
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  margin-top: 56px;
  overflow: hidden;
}
.value-card {
  background: var(--paper);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
}
.value-card .vicon {
  width: 40px; height: 40px;
  border-radius: var(--r-2);
  background: var(--moss);
  color: var(--fern-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.value-card h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.value-card p {
  font-size: 14.5px;
  color: var(--fg-2);
  line-height: 1.55;
}
.value-card .pull {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fern-700);
}

/* ---------- Founder note ---------- */
.founder-section { padding: 120px 40px; }
.founder-inner {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  align-items: start;
}
.founder-portrait {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--moss);
  border: 1px solid var(--border-1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.founder-portrait .initials {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  color: var(--fern-700);
  letter-spacing: -0.04em;
}
.founder-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(23,26,20,0.04);
}
.founder-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fern-700);
  margin-bottom: 12px;
}
.founder-body {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.founder-body p + p { margin-top: 16px; }
.founder-body em { font-style: normal; color: var(--fern-700); }
.founder-sig {
  margin-top: 22px;
  font-size: 13px;
  color: var(--fg-3);
}
.founder-sig strong { color: var(--ink); font-weight: 600; }

/* ---------- Final CTA tweaks ---------- */
.cta-section .lede {
  margin-top: 18px;
  font-size: 17px;
  color: var(--fg-2);
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.cta-section .meta { color: var(--fg-3); }

/* ---------- Tweaks button polish for fern variant ---------- */
.hero-actions .snd-btn.lg.fern { padding: 0 22px; }

/* Logo size in nav */
.landing-nav .snd-logo.sm .snd-mark { height: 22px; }

/* ---------- Hero visual: minimal stat-card variant ---------- */
.hero-visual.minimal {
  height: auto;
  align-items: stretch;
}
.stat-block {
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  overflow: hidden;
}
.stat-block .cell {
  background: var(--paper-2);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.stat-block .cell .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.stat-block .cell .n em { font-style: normal; color: var(--fern-700); }
.stat-block .cell .l {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.45;
  margin-top: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; padding: 64px 32px 56px; gap: 56px; }
  .hero h1 { font-size: 60px; }
  .hero-visual { height: auto; min-height: 460px; }
  .float-note.tl { top: 8px; left: 0; }
  .float-note.br { bottom: 12px; right: 0; }

  .section h2 { font-size: 40px; }
  .cta-section h2 { font-size: 48px; }

  .steps { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }

  .draft-render { padding: 36px 32px; font-size: 16px; }
}

@media (max-width: 720px) {
  .landing-nav { padding: 14px 20px; }
  .landing-nav .links { display: none; }
  .landing-nav .right .snd-btn.ghost { display: none; }

  .hero { padding: 48px 20px 40px; gap: 40px; }
  .hero h1 { font-size: 44px; letter-spacing: -0.03em; }
  .hero .sub { font-size: 17px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .snd-btn { width: 100%; }

  .section { padding: 0 20px; }
  .section h2 { font-size: 32px; }

  .steps, .value-grid, .audience-grid {
    grid-template-columns: 1fr;
  }
  .value-grid { border-radius: var(--r-3); }

  .sample-section { padding: 80px 20px; margin-top: 80px; }
  .draft-render { padding: 28px 22px; font-size: 15px; border-radius: var(--r-3); }
  .draft-render-notes .note { font-size: 12px; }

  .founder-section { padding: 80px 20px; }
  .founder-inner { grid-template-columns: 1fr; gap: 24px; }
  .founder-portrait { width: 72px; height: 72px; }
  .founder-portrait .initials { font-size: 28px; }
  .founder-body { font-size: 18px; }

  .cta-section { padding: 100px 20px 64px; }
  .cta-section h2 { font-size: 36px; line-height: 1.05; }
  .cta-section .actions { flex-direction: column; align-items: stretch; }
  .cta-section .actions .snd-btn { width: 100%; }

  footer { padding: 32px 20px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-links { flex-wrap: wrap; gap: 16px; }
}

/* Float-note placement: overridden in the .draft-mock-wrap rules above,
   which anchor to the card itself. Kept here as fallbacks. */
@media (min-width: 1081px) {
  .float-note.tl { left: -24px; }
  .float-note.br { right: -14px; }
}

/* Reduce hero side glow on small screens */
@media (max-width: 720px) {
  .hero::before { width: 380px; height: 380px; top: -10%; right: -20%; }

  /* Full-width buttons: include padding in the width calculation */
  .hero-actions .snd-btn { box-sizing: border-box; }
  .cta-section .actions .snd-btn { box-sizing: border-box; }

  /* Float notes use negative offsets that overflow at narrow widths — hide them */
  .float-note { display: none; }

  /* Long email addresses in the mock card need to wrap */
  .draft-mock .meta-row .v { overflow-wrap: break-word; word-break: break-all; }

  /* Mock card footer: allow buttons to wrap on very narrow screens */
  .draft-mock .foot { flex-wrap: wrap; }

  /* Reduce section spacer */
  .section-spacer { height: 60px; }

  /* Tighten top padding on value + s-pad sections */
  .value-section { padding-top: 72px; }
  .section.s-pad { padding-top: 72px; }

  /* Sample section top margin */
  .sample-section { margin-top: 60px; }

  /* Hero visual: prevent card from overflowing its column */
  .hero-visual, .draft-mock-wrap { max-width: 100%; overflow: hidden; }
  .draft-mock { max-width: 100%; }
}

/* Disable text selection on the float-note micro-labels (annotation feel) */
.float-note { user-select: none; }

/* Polish: pull <mark> into the dark sample-draft context */
.sample-section .draft-render mark { background: var(--moss); color: var(--fern-800); }

/* Accent palette swap: only fern is locked; this is here to give Tweaks a hook
   if we later want to swap accents. Kept minimal — most variation is per-component. */
:root[data-accent="ember"] {
  /* Reserved for a future Tweaks swap. Not used by default. */
}