/* ==========================================================================
   GirviDesk marketing site — design tokens
   Palette derived from the brand mark (gold shield/crest on transparent):
   deep near-black background, warm gold accent, soft ivory text.
   ========================================================================== */
:root {
  --bg: #0a0b0f;
  --bg-elevated: #12141b;
  --bg-card: #15171f;
  --border: rgba(201, 162, 75, 0.16);
  --border-strong: rgba(201, 162, 75, 0.32);
  --text: #f3efe6;
  --text-dim: #a9a8b3;
  /* WCAG AA fix: the original #75747f measured 4.27:1 against --bg
     (#0a0b0f) -- below the 4.5:1 AA threshold every use of this token
     needs, since all of them are sub-14px text (footer copy, legal-page
     "last updated" line, plan price period, etc. -- none qualify as
     "large text", which is the only case 3:1 would be enough). #8b8996
     measures 5.73:1, comfortably clearing AA with room to spare, while
     staying visually one step dimmer than --text-dim (8.37:1) so the
     hierarchy between the two tokens is preserved. */
  --text-faint: #8b8996;
  --gold: #c9a24b;
  --gold-bright: #e8c874;
  --gold-deep: #8a6a24;
  --focus: #7ec8ff;

  --radius: 14px;
  --radius-lg: 22px;
  --max-w: 1180px;
  --space-section: clamp(64px, 9vw, 128px);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
/* Defensive safety net -- the real bug (a nested flex row in the footer
   that could grow past the viewport instead of wrapping) is fixed at its
   source below, but this keeps any future stray-wide element from ever
   turning into page-wide horizontal scroll again. Every legitimate wide
   element on this page (the pricing comparison table) already scrolls
   inside its own overflow-x: auto container, so this never hides content
   that's meant to be reachable by scrolling. */
html, body { overflow-x: hidden; max-width: 100%; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* height: auto is the fix that matters here -- without it, an <img>'s
   width="" / height="" HTML attributes (kept intentionally, for the
   layout-shift prevention they give browsers) apply as literal fixed
   pixel dimensions. max-width: 100% alone shrinks the width responsively
   but leaves height locked at its attribute value, vertically squeezing
   every image at any width narrower than its natural size. height: auto
   makes height follow width proportionally instead, so images scale
   without distorting -- this is what was happening to the hero image at
   every viewport width narrower than ~1440px. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; color: var(--text-dim); }

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: #12100a;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #17130a;
  box-shadow: 0 8px 24px -8px rgba(201, 162, 75, 0.55);
}
.btn-primary:hover { box-shadow: 0 12px 28px -8px rgba(201, 162, 75, 0.7); }
.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--gold); background: rgba(201, 162, 75, 0.08); }
.btn-ghost {
  background: transparent;
  color: var(--text-dim);
}
.btn-ghost:hover { color: var(--text); }
.btn-lg { padding: 14px 26px; font-size: 1rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 11, 15, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--border);
  background: rgba(10, 11, 15, 0.92);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.brand-mark { display: block; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.94rem;
  color: var(--text-dim);
}
.main-nav a:hover { color: var(--gold-bright); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 24px 20px;
  border-top: 1px solid var(--border);
  background: rgba(10, 11, 15, 0.98);
}
.mobile-nav a {
  padding: 12px 4px;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mobile-nav .btn { margin-top: 12px; }

.site-header.nav-open .mobile-nav { display: flex; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .main-nav { display: none; }
  .header-actions .btn-ghost { display: none; }
  .nav-toggle { display: flex; }
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */
section { padding: var(--space-section) 0; }
.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-sub { font-size: 1.05rem; }
.eyebrow {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-top: clamp(48px, 8vw, 96px); position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.14), transparent 70%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
}
/* Grid items default to min-width: auto, which sizes each track to fit its
   content's min-content width instead of shrinking with the container. The
   hero image carries width="1600" height="893" HTML attributes (kept for
   layout-shift prevention), and that intrinsic size was winning: at the
   single-column mobile breakpoint below, .hero-copy and .hero-media were
   both forced to ~418px wide no matter how narrow the actual viewport was,
   with the excess silently clipped by .hero's own overflow: hidden (visible
   as the heading/CTA/image getting cut off on the right, not a scrollbar).
   min-width: 0 lets each grid item actually shrink to its track. */
.hero-copy, .hero-media { min-width: 0; }
.hero-sub { font-size: 1.12rem; max-width: 52ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 24px; }
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--text-faint);
}
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points li::before { content: "✓"; color: var(--gold); font-weight: 700; }

.hero-media { position: relative; }
/* Fixed aspect-ratio frame + object-fit: cover -- crops the photo to a
   consistent shape at every viewport width instead of letting the media
   block's height swing with whatever width the two-column grid gives it
   (which is also what caused the earlier vertical-squeeze bug: the plain
   img's height="893" attribute stayed fixed while width shrank). Cropping
   via object-fit is the deliberate choice here over stretching. */
.hero-media picture {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius-lg);
}
.hero-media-glow {
  position: absolute;
  inset: -14% -14% auto auto;
  width: 55%;
  height: 55%;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.35), transparent 70%);
  filter: blur(10px);
  z-index: -1;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  /* .btn's white-space: nowrap sizes a button to its full text on one
     line regardless of container width -- fine at desktop widths where
     the hero CTA text has room, but on a phone "Get started on the Free
     plan — no card required" stays wider than the (now correctly
     shrinking, see .hero-copy/.hero-media above) single hero column and
     spills past its right edge exactly like the button itself did before
     min-width: 0 was added. Letting it wrap keeps the whole label inside
     the button at every phone width. */
  .hero-ctas .btn { white-space: normal; text-align: center; }
}

/* ==========================================================================
   Feature grid
   ========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.feature-card {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.feature-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.feature-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(201, 162, 75, 0.12);
  color: var(--gold-bright);
  font-size: 1.2rem;
  margin-bottom: 16px;
}
.feature-card h3 { margin-bottom: 8px; font-size: 1.02rem; }
.feature-card p { font-size: 0.92rem; margin: 0; }

@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Photo/media proof section -- the main selling point (see index.html's
   #photo-proof). Reuses .feature-card for the three point cards but adds
   a faint gold outline (same trick .plan-card--free already uses on the
   pricing card) so this section's cards read as a step up in emphasis
   from the plain Features grid below it, not just more of the same.
   ========================================================================== */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.proof-card {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.08);
}
@media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Language switcher (header + mobile nav) and language popup -- see
   assets/js/i18n.js for the EN/HI dictionary and switching logic.
   ========================================================================== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-right: 4px;
}
.lang-switch-btn {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.lang-switch-btn:hover { color: var(--text); }
.lang-switch-btn.is-active {
  background: rgba(201, 162, 75, 0.16);
  color: var(--gold-bright);
}
/* Desktop header switcher hides alongside the rest of .header-actions'
   desktop-only controls below the same 860px breakpoint .nav-toggle
   itself switches on -- the mobile-nav drawer gets its own switcher
   instance instead (data-lang-switch buttons work no matter which one
   is clicked, see i18n.js). */
@media (max-width: 860px) { .lang-switch:not(.lang-switch-mobile) { display: none; } }
.lang-switch-mobile {
  display: none;
  align-self: flex-start;
  margin: 10px 0 0;
}
@media (max-width: 860px) { .lang-switch-mobile { display: flex; } }

.lang-modal-panel { max-width: 460px; text-align: center; }
.lang-modal-heading { font-size: 1.25rem; margin: 0 0 10px; }
.lang-modal-sub { color: var(--text-dim); font-size: 0.88rem; margin: 0 0 22px; line-height: 1.5; }
.lang-modal-choices { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lang-choice-btn { min-width: 140px; }

/* ==========================================================================
   How it works
   ========================================================================== */
.how { background: var(--bg-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.how-step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.how-num {
  display: block;
  font-family: Georgia, serif;
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.how-step p { font-size: 0.94rem; margin: 0; }

@media (max-width: 760px) { .how-steps { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pricing
   ========================================================================== */
.coupon-banner {
  max-width: 620px;
  margin: 0 auto 32px;
  text-align: center;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(201, 162, 75, 0.1);
  color: var(--gold-bright);
  font-size: 0.92rem;
  font-weight: 600;
}
.pricing-tenure {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 32px;
  padding: 5px;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
}
.tenure-tab {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.tenure-tab:hover { color: var(--text); }
.tenure-tab.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #17130a;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: start;
}
.pricing-loading, .pricing-fallback {
  text-align: center;
  color: var(--text-faint);
  grid-column: 1 / -1;
}
.pricing-fallback { margin-top: 20px; }
.plan-card {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
}
.plan-card h3 { font-size: 1.15rem; margin-bottom: 4px; }
/* The genuinely-free plan (see main.js's isFree) gets a subtle highlight so
   it doesn't read as "just another tier" next to the paid ones -- a slightly
   brighter border/glow, same visual language as .plan-savings' gold accent
   rather than a loud, separate color. */
.plan-card--free {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.08);
}
.plan-forever-free {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(201, 162, 75, 0.14);
  border: 1px solid var(--border-strong);
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 2px;
}
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 20px; }
.plan-price .amount { font-size: 2.1rem; font-weight: 700; color: var(--gold-bright); }
.plan-price .period { color: var(--text-faint); font-size: 0.88rem; }
.plan-savings {
  font-size: 0.76rem;
  font-weight: 700;
  color: #17130a;
  background: var(--gold-bright);
  padding: 3px 9px;
  border-radius: 999px;
}
.plan-features {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.88rem;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-features li::before { content: "✓ "; color: var(--gold); }
.plan-more { margin-bottom: 16px; }
.plan-more summary {
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gold);
  padding: 4px 0;
  list-style: none;
}
.plan-more summary::-webkit-details-marker { display: none; }
.plan-more summary::before { content: "+ "; }
.plan-more[open] summary::before { content: "− "; }
.plan-more .plan-features { margin-top: 10px; }
.plan-limits-head {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 4px 0 10px;
}
.plan-limits {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  font-size: 0.86rem;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-card .btn { margin-top: auto; }

/* Screen-reader-only utility -- visually hidden, still announced. Used by
   the comparison table to give the ✓/✕ glyphs a real text alternative
   (icons alone aren't accessible) and to label the table for assistive
   tech via its <caption>. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Full feature/limit comparison table -- see index.html's #pricing-compare
   and assets/js/main.js's renderComparisonTable() for how this is built
   and populated. Deliberately exhaustive: every row is either a feature
   (✓/✕) or a limit (a number or "Unlimited"), grouped under a category
   header row, for every plan, so nothing is left off the page the way the
   plan cards above intentionally do for a quick-glance summary. */
.compare-wrap { margin-top: 56px; }
.compare-head { text-align: center; max-width: 620px; margin: 0 auto 28px; }
.compare-head h3 { font-size: 1.5rem; margin: 0 0 10px; }
.compare-sub { color: var(--text-dim); font-size: 0.94rem; margin: 0; }
.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  /* Lets a horizontally-scrolled table still show a hint of more content
     without relying on color alone -- helps on narrow screens where the
     table is wider than the viewport. */
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 560px; /* forces horizontal scroll on narrow viewports rather than crushing columns unreadably */
}
.compare-table th, .compare-table td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  vertical-align: top;
  z-index: 1;
}
.compare-row-label {
  text-align: left !important;
  color: var(--text-dim);
  font-weight: 500;
  white-space: normal;
  min-width: 220px;
}
.compare-plan-name { font-weight: 700; color: var(--text); }
.compare-plan-price { color: var(--gold-bright); font-weight: 600; font-size: 0.82rem; margin-top: 4px; }
.compare-category-row th {
  text-align: left !important;
  background: var(--bg-elevated);
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-top: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-strong);
}
.compare-yes { color: var(--gold-bright); font-weight: 700; font-size: 1rem; }
.compare-no { color: var(--text-dim); font-size: 1rem; }
.compare-limit { color: var(--text); font-weight: 600; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 22px;
}
.faq-item summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--gold); font-size: 1.3rem; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding-bottom: 18px; margin: 0; font-size: 0.94rem; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta {
  background: radial-gradient(circle at 50% 0%, rgba(201, 162, 75, 0.12), transparent 60%), var(--bg-elevated);
  border-top: 1px solid var(--border);
}
.final-cta-inner { text-align: center; max-width: 620px; }
.final-cta-inner p { font-size: 1.05rem; margin-bottom: 28px; }

/* ==========================================================================
   Legal pages (Privacy Policy, and any future Terms/Refund page built the
   same way) -- shared by both the standalone page in legal/*.html and the
   in-page popup that loads that same markup via fetch(), see
   assets/js/main.js's openLegalDoc(). Deliberately plain prose styling:
   this is a document people need to actually read, not a marketing
   section, so no cards/gradients/animation here.
   ========================================================================== */
.legal-wrap { padding: clamp(48px, 8vw, 96px) 0; max-width: 760px; }
.legal-content h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 6px; }
.legal-updated { color: var(--text-faint); font-size: 0.88rem; margin-bottom: 28px; }
.legal-content h2 {
  font-size: 1.25rem;
  margin-top: 2.2em;
  padding-top: 0.6em;
  border-top: 1px solid var(--border);
}
.legal-content h2:first-of-type { margin-top: 1.6em; }
.legal-content h3 { font-size: 1.02rem; margin-top: 1.6em; color: var(--gold-bright); }
.legal-content p, .legal-content li { color: var(--text-dim); font-size: 0.96rem; }
.legal-content ul { margin: 0 0 1em; padding-left: 1.3em; }
.legal-content li { margin-bottom: 0.35em; }
.legal-content strong { color: var(--text); }

/* Popup variant: same .legal-content typography, just framed as an
   in-page overlay instead of a full document flow. Hidden by default;
   assets/js/main.js toggles [hidden] and traps focus while open. */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px) 16px;
  overflow-y: auto;
  background: rgba(6, 7, 10, 0.72);
  backdrop-filter: blur(4px);
}
.legal-modal[hidden] { display: none; }
.legal-modal-panel {
  position: relative;
  width: 100%;
  max-width: 760px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 48px);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
}
.legal-modal-close {
  position: sticky;
  float: right;
  top: 0;
  margin: -8px -8px 0 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
}
.legal-modal-close:hover { color: var(--text); border-color: var(--border-strong); }
.legal-modal-body .legal-content h2:first-of-type { margin-top: 0.4em; }
.legal-modal-loading { color: var(--text-faint); padding: 24px 0; text-align: center; }
/* Shared by every modal on this site (legal doc popup, lead-capture
   popup) -- both add/remove this same class, see main.js. */
body.modal-open { overflow: hidden; }

/* ============================================================
   Promo strip -- manual entry point into the lead-capture popup,
   sits above the pricing grid. See index.html's #promo-strip-btn
   and main.js's openLeadModal().
   ============================================================ */
.promo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0 auto 28px;
  padding: 12px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  background: rgba(201, 162, 75, 0.08);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
  text-align: center;
}
.promo-strip:hover { background: rgba(201, 162, 75, 0.14); border-color: var(--gold); }
.promo-strip-icon { font-size: 1.1rem; }

/* ============================================================
   Lead-capture popup -- reuses .legal-modal / .legal-modal-panel /
   .legal-modal-close for the overlay chrome (see the Legal pages
   block above), these rules only add the form-specific styling.
   ============================================================ */
.lead-modal-panel { max-width: 440px; }
.lead-modal-heading { font-size: 1.35rem; margin: 0 0 10px; }
.lead-modal-sub { color: var(--text-dim); font-size: 0.92rem; margin: 0 0 20px; line-height: 1.5; }
.lead-form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.lead-phone-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  overflow: hidden;
  margin-bottom: 6px;
  transition: border-color 0.2s ease;
}
.lead-phone-row:focus-within { border-color: var(--gold); }
.lead-phone-prefix {
  padding: 12px 10px 12px 14px;
  color: var(--text-dim);
  font-weight: 600;
  border-right: 1px solid var(--border);
}
.lead-phone-row input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  padding: 12px 14px;
  outline: none;
  font-family: inherit;
}
.lead-form-error {
  color: #f0a1a1;
  font-size: 0.82rem;
  margin: 4px 0 12px;
  line-height: 1.5;
}
.lead-submit { width: 100%; margin-top: 8px; border: none; cursor: pointer; }
.lead-submit:disabled { opacity: 0.65; cursor: default; }
.lead-form-consent { color: var(--text-dim); font-size: 0.76rem; margin: 14px 0 0; line-height: 1.5; }
.lead-form-consent a { color: var(--text-dim); }
.lead-coupon-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--bg-elevated);
  padding: 16px 18px;
  margin: 18px 0 10px;
}
.lead-coupon-code { font-size: 1.4rem; font-weight: 800; letter-spacing: 0.06em; color: var(--gold-bright); }
.lead-copy-btn { flex-shrink: 0; padding: 8px 16px; font-size: 0.84rem; border: 1px solid var(--border-strong); cursor: pointer; }
.lead-coupon-note { color: var(--text-dim); font-size: 0.84rem; margin: 0 0 22px; }
.lead-cta { width: 100%; text-align: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
/* flex-wrap: wrap is the actual fix here -- .footer-inner above already
   wraps its own three children (brand / links / copy) onto separate lines
   on narrow screens, but this nested flex row of individual footer links
   had no wrap of its own, so once it got a full line to itself it just
   kept growing past the viewport edge instead of wrapping its links onto
   a second line -- the page-wide horizontal scroll / cut-off text on
   mobile traced back to this one row. */
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 0.9rem; color: var(--text-dim); }
.footer-links a:hover { color: var(--gold-bright); }
.footer-copy { font-size: 0.85rem; color: var(--text-faint); margin: 0; }

/* ==========================================================================
   Sticky mobile CTA bar
   Signup-driven site, so a visitor who's scrolled past the hero (and its
   own "Get started" button) shouldn't have to scroll back up to convert --
   same 860px breakpoint .nav-toggle/.mobile-nav switch on above. Hidden
   above that width entirely (desktop already has the header's CTA visible
   at all times). Shown/hidden via the "is-visible" class toggled in
   main.js's initStickyCta() -- CSS alone can't know scroll position -- so
   it stays off-screen (not just invisible) until JS says otherwise, and
   never flashes on load. env(safe-area-inset-bottom) keeps it clear of the
   home-indicator strip on notched iPhones.
   ========================================================================== */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 11, 15, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-strong);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
/* Overrides .btn's own white-space: nowrap and .btn-lg's 1rem font-size --
   at full button-text length ("Get started on the Free plan — no card
   required") those two together made the text wider than the button box
   on a phone, spilling past its right edge instead of wrapping inside it.
   Letting it wrap to two lines and sizing the type down a step keeps the
   whole label inside the pill at every phone width this site supports. */
.mobile-sticky-cta .btn {
  width: 100%;
  text-align: center;
  white-space: normal;
  font-size: 0.86rem;
  line-height: 1.3;
  padding: 12px 18px;
}
@media (max-width: 860px) {
  .mobile-sticky-cta { display: block; }
}
.mobile-sticky-cta.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .mobile-sticky-cta { transition: none; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }