/* AdNeed homepage ("/") — homepage-only additions.

   The design system itself is NOT redefined here. The homepage loads the same
   two stylesheets /shop does, in the same order:
     /shop/css/adneed.css   tokens (--navy-*, --orange-500, --grad …), .btn, forms
     /shop/css/landing.css  .container, .nav, .hero, .feature*, .steps, .demo-band,
                            .cta-band, .faq*, .chip, .site-footer
   This file only adds what /shop has no equivalent for (the product grid, the
   signed-in credits pill) plus the keyboard-focus and reduced-motion rules those
   two files don't define. Everything is scoped under body.home-page or a
   .home-* class, so it cannot affect /shop or any other route.

   Not used on this page any more: css/tokens.css and css/home.css (the old
   dark "ink" theme). They are left in place for the dashboard and tool pages
   that still load them. */

/* ---------- Keyboard focus (adneed.css only styles form-field focus) ---------- */
body.home-page :focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; }
body.home-page .hero :focus-visible,
body.home-page .demo-band :focus-visible,
body.home-page .site-footer :focus-visible { outline-color: var(--amber-400); }
body.home-page .cta-band :focus-visible { outline-color: #fff; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.home-page *, body.home-page *::before, body.home-page *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  body.home-page .btn:hover { transform: none; }
}

/* In-page anchors (#products) must clear the 72px sticky nav. */
body.home-page [id] { scroll-margin-top: 88px; }

/* ---------- Nav additions ---------- */
.nav-actions a.link:hover { color: var(--orange-500); }
@media (max-width: 640px) { .nav-actions a.link.home-nav-products { display: none; } }

/* Signed-in AdCredits pill (the one the old homepage nav carried; same
   look as the dashboard pill so the two never drift). */
.topbar-credits {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none; flex-shrink: 0;
  background: #FDF3DF; border: 1px solid #F0DBA0; border-radius: 999px; padding: 5px 10px 5px 6px;
}
.topbar-coin { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.topbar-credits span {
  font-family: 'AdNeedRupee', 'Sora', sans-serif; font-weight: 800; font-size: 12.5px;
  color: #8A4B0A; white-space: nowrap;
}
/* The two signed-in/out groups sit inside .nav-actions as plain flex items. */
.nav-actions > span { display: contents; }

/* ---------- Hero ---------- */
.home-social-proof { margin-top: 18px; font-size: 13px; color: #8B96AC; }

/* ---------- Audience / feature copy ---------- */
.home-audience .feature p { padding-left: 58px; }

/* ---------- Product grid ---------- */
.home-product-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 900px) { .home-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .home-product-grid { grid-template-columns: 1fr; } }

.home-product-card {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px;
  padding: 24px; display: flex; flex-direction: column; position: relative;
  box-shadow: 0 1px 2px rgba(15,27,46,.06), 0 8px 24px rgba(15,27,46,.04);
}
.home-product-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.home-product-card .feature-icon { margin: 0; }
.home-tag-live {
  font-family: 'AdNeedRupee', 'Sora', sans-serif; font-size: 11px; font-weight: 700;
  color: #166B3C; background: #E9F7EF; border: 1px solid #C3E9D0; border-radius: 999px; padding: 4px 10px;
}
.home-product-card h3 { font-size: 18px; font-weight: 700; }
.home-product-card p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 8px 0 20px; flex: 1; }
.home-product-card .btn { width: 100%; margin: 0; text-decoration: none; }

.home-soon { margin-top: 40px; }
.home-soon h3 { font-size: 14px; font-weight: 700; color: var(--text-muted); margin-bottom: 12px; }
.home-soon ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.home-soon .chip { font-size: 12px; padding: 7px 14px; }

/* ---------- Demo / credits bands (reuse .demo-band) ---------- */
.home-band-section { padding: 0 0 88px; }
@media (max-width: 720px) { .home-band-section { padding: 0 0 56px; } .demo-band { padding: 28px 22px; } }
.home-band-section + .home-band-section { padding-top: 0; }
.demo-band .home-band-note { margin-top: 10px; font-weight: 600; color: #fff; }

/* ---------- Footer legal column ---------- */
.footer-links a:hover { color: #fff; }

/* /shop's footer-bottom text (#5B6784 on navy) is 3.1:1; lift it on the homepage only. */
body.home-page .footer-bottom { color: #8B96AC; }

/* ---------- Hero account-status panel (white card on the navy hero, same card
   treatment as /shop's .after-card) ---------- */
.home-panel {
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 16px 36px rgba(0,0,0,.28); padding: 22px 22px 10px;
}
.home-panel-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.home-panel-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grad); margin-top: 6px; flex-shrink: 0; }
.home-panel-title { font-family: 'AdNeedRupee', 'Sora', sans-serif; font-weight: 700; font-size: 16px; margin: 0; }
.home-panel-sub { color: var(--text-muted); font-size: 13px; margin: 2px 0 0; }
.home-panel-list { list-style: none; margin: 0; padding: 0; }
.home-panel-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.home-panel-row:first-child { border-top: none; }
.home-dot { width: 8px; height: 8px; border-radius: 50%; background: #C4C9D4; flex-shrink: 0; }
.home-dot.live { background: var(--success); }
.home-panel-name { flex: 1; font-size: 14px; font-weight: 600; }
.home-tag-soon {
  font-family: 'AdNeedRupee', 'Sora', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
}
@media (max-width: 900px) { .home-panel { max-width: 460px; } }

/* =====================================================================
   Mobile polish (CP87) — most visitors arrive on a phone, so the page is
   tuned from 640px down: tighter rhythm, thumb-sized buttons, compact
   product cards, a 2-column footer. Desktop (>900px) is untouched.
   ===================================================================== */
body.home-page .btn { min-height: 44px; }

@media (max-width: 900px) {
  body.home-page .hero { padding: 56px 0 64px; }
  body.home-page .hero .container { gap: 36px; }
  .home-panel { max-width: none; }
}

@media (max-width: 640px) {
  body.home-page section { padding: 44px 0; }
  body.home-page .container { padding: 0 18px; }
  body.home-page .section-head { margin-bottom: 28px; }
  body.home-page .section-head h2 { font-size: 26px; }
  body.home-page .section-head p { font-size: 15px; margin-top: 10px; }

  /* Hero: headline first, thumb-friendly stacked CTAs, trust stats in one row */
  body.home-page .hero { padding: 32px 0 40px; }
  body.home-page .hero h1 { font-size: 36px; }
  body.home-page .hero p.lede { font-size: 15px; -webkit-line-clamp: 5; }
  body.home-page .hero-ctas { flex-direction: column; gap: 10px; margin-top: 24px; }
  body.home-page .hero-ctas .btn { width: 100%; justify-content: center; padding: 15px 20px; font-size: 15px; }
  body.home-page .hero-trust {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px;
    padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
  }
  body.home-page .hero-trust div { font-size: 11.5px; line-height: 1.35; }
  body.home-page .hero-trust b { font-size: 16px; margin-bottom: 2px; }

  /* Account status card: compact two-column list so six tools don't make a tall scroll */
  .home-panel { padding: 18px 16px 8px; border-radius: 18px; }
  .home-panel-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .home-panel-row { padding: 12px 0; gap: 8px; }
  .home-panel-row:nth-child(2) { border-top: none; }
  .home-panel-name { font-size: 13.5px; }
  .home-panel-list .home-tag-live { display: none; }

  /* Product cards: icon + title on one line, short body, full-width button */
  .home-product-grid { gap: 14px; }
  .home-product-card { padding: 18px; border-radius: 18px; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; }
  .home-product-top { margin: 0; grid-column: 1; grid-row: 1; }
  .home-product-top .home-tag-live { display: none; }
  .home-product-card h3 { grid-column: 2; grid-row: 1; font-size: 17px; }
  .home-product-card p { grid-column: 1 / -1; margin: 12px 0 16px; font-size: 14px; }
  .home-product-card .btn { grid-column: 1 / -1; }

  /* How it works: numbered rows instead of stacked blocks */
  body.home-page .steps { gap: 20px; }
  body.home-page .step { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; }
  body.home-page .step-num { margin: 0; grid-row: 1 / span 2; }
  body.home-page .step h3 { font-size: 16px; margin-bottom: 4px; }

  /* Audience */
  body.home-page .feature-list { gap: 22px; }
  .home-audience .feature p { padding-left: 0; margin-top: 10px; }

  /* Bands + footer */
  .home-band-section { padding: 0 0 44px; }
  body.home-page .demo-band { padding: 26px 20px; border-radius: 20px; }
  body.home-page .demo-band h3 { font-size: 21px; }
  body.home-page .demo-band .btn { width: 100%; justify-content: center; }
  body.home-page .cta-band { padding: 48px 0; }
  body.home-page .cta-band h2 { font-size: 24px; }
  body.home-page .cta-band .btn-secondary { width: 100%; max-width: 320px; justify-content: center; }

  body.home-page .site-footer { padding: 40px 0 24px; }
  body.home-page .site-footer .container { flex-direction: column; gap: 28px; }
  body.home-page .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; width: 100%; }
  body.home-page .footer-links > div:first-child { grid-column: 1 / -1; }
  body.home-page .footer-links > div:first-child a { display: inline-block; width: 48%; }
  body.home-page .footer-links a { padding: 4px 0; margin-bottom: 4px; }
  body.home-page .footer-bottom { margin-top: 28px; padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 360px) {
  body.home-page .hero h1 { font-size: 31px; }
  .home-panel-list { grid-template-columns: 1fr; }
  .home-panel-row:nth-child(2) { border-top: 1px solid var(--border); }
}