/* ===== home.css: landing page (hotfix 2026-10-23) =====
   Every rule is scoped under .home or .page-home, so it outranks the old
   single-class rules in style.css no matter which file loads first.
   Explicit px sizes on purpose: the --text-3xl and --text-4xl tokens were
   changed site-wide, so this file no longer depends on them. */

/* ---- page frame: one <main> (from base.html), full-bleed bands ---- */
.page-home main.wrap{ max-width:none; margin:0; padding:0; }
.page-home .footer{ margin-top:0; padding-inline:0; }

.home{ --section-y:64px; }
@media (min-width:768px){ .home{ --section-y:80px; } }
@media (min-width:1100px){ .home{ --section-y:96px; } }

.home .container{
  max-width:calc(var(--w-wide, 1200px) + var(--pad-x, 16px) * 2);
  margin-inline:auto;
  padding-inline:var(--pad-x, 16px);
}
.home .band{ padding-block:var(--section-y); }
.home .band--surface{ background:var(--surface); }
.home .band--paper{ background:var(--paper); border-block:1px solid var(--line); }
.home .band--tint{ background:#EAF4EE; }
.home .band--ink{ background:var(--ink); color:#fff; }
.home .band--flush-top{ padding-top:0; }
.home .center{ text-align:center; }

/* ---- type ---- */
.home .band h2{ margin:0; font-size:28px; line-height:1.2; letter-spacing:-.01em; font-weight:700; }
@media (min-width:768px){ .home .band h2{ font-size:36px; line-height:1.15; } }
.home .band .container > .eyebrow{ margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); }
.home .sub{ margin:8px 0 0; color:var(--slate); }
.home .meta{ margin:0; font-size:14px; color:var(--slate); }
.home .section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-bottom:32px; }
.home .link-arrow{ font-weight:600; color:var(--accent-ink); text-decoration:none; white-space:nowrap; }
.home .link-arrow:hover{ text-decoration:underline; text-underline-offset:4px; }
.home .ic{ width:20px; height:20px; flex:none; }
.home .nowrap{ white-space:nowrap; }
.home .compare-link{ margin:24px 0 0; }

/* ---- hero ---- */
.home .hero{ position:relative; overflow:clip; padding-block:40px 56px; }
/* .hero-grid is the same element as .container: never set max-width here */
.home .hero-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:center; margin-bottom:0; }
@media (min-width:960px){
  .home .hero{ padding-block:72px 96px; }
  .home .hero-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:64px; }
}
.home .hero-copy{ min-width:0; }
.home .live-pill{
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  margin:0 0 20px; padding:6px 12px;
  border:1px solid var(--line); border-radius:999px; background:var(--paper);
  font-size:14px; font-weight:400; color:var(--slate); white-space:nowrap;
}
.home .display{
  margin:0; font-size:clamp(36px,5vw,56px); line-height:1.1; letter-spacing:-.02em; font-weight:700;
  text-wrap:balance; hyphens:manual;
}
@media (min-width:960px){ .home .display{ line-height:1.06; } }
.home .display .signal{ color:var(--signal); }
.home .lead{ margin:20px 0 0; max-width:54ch; font-size:18px; line-height:1.55; color:var(--ink-2); }
@media (min-width:960px){ .home .lead{ font-size:20px; } }

.home .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.home .cta-row .btn{ min-height:52px; padding-inline:28px; font-size:17px; }
@media (max-width:639px){ .home .cta-row .btn{ width:100%; } }
@media (min-width:960px){ .home .cta-row .btn{ min-height:56px; padding-inline:32px; } }
.home .btn.ghost{ border:1.5px solid var(--ink); background:transparent; color:var(--ink); }
.home .btn.ghost:hover{ background:var(--paper); color:var(--ink); }
.home .btn:active{ transform:scale(.98); }

.home .trust-row{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:20px 0 0; padding:0; list-style:none; font-size:14px; color:var(--slate); }
.home .trust-row li{ display:inline-flex; align-items:center; gap:8px; }
.home .trust-row .ic{ width:16px; height:16px; color:var(--qualify); }

/* hero card + facade (facade sits behind the card's top-right corner) */
.home .hero-card{ position:relative; isolation:isolate; min-width:0; }
.home .facade{ display:none; position:absolute; z-index:-1; right:-56px; top:-56px; width:400px; color:var(--ink); pointer-events:none; }
@media (min-width:960px){ .home .facade{ display:block; } }
.home .facade .lit{ fill:var(--accent); opacity:.16; animation:lit 3.6s ease-in-out infinite; }
.home .facade .l2{ animation-delay:1.2s; }
.home .facade .l3{ animation-delay:2.4s; }
@keyframes lit{ 0%,100%{ opacity:.14; } 50%{ opacity:.42; } }

.home .quiz-card{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:24px; box-shadow:var(--shadow-lg);
}
@media (min-width:960px){ .home .quiz-card{ padding:32px; max-width:480px; margin-left:auto; } }
.home .quiz-card h2{ font-size:22px; line-height:1.25; letter-spacing:0; }
.home .quiz-card .sub{ font-size:14px; }

/* no card inside the card: the form sits flat in the quiz card */
.home .quiz-card .quiz-form{
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:0; margin:20px 0 0; max-width:none;
}
/* buttons: Continue fills the row; with Back, they share it */
.home .quiz-card .quiz-nav{ display:flex; gap:12px; margin:24px 0 0; }
/* The confirm dialog hides the nav row while it is open (owner
   2026-11-09). A display rule beats the UA [hidden] rule, so without
   this the hidden row stays visible; this selector must outrank the
   display:flex rule directly above it. */
.home .quiz-card .quiz-nav[hidden]{ display:none; }
.home .quiz-card .quiz-nav .btn{ flex:1 1 auto; min-height:52px; }
.home .quiz-card .quiz-nav .btn.quiet{ flex:0 0 auto; }
/* progress dashes never overflow the card */
.home .quiz-card .quiz-progress{ display:flex; align-items:center; gap:12px; min-width:0; }
.home .quiz-card .quiz-step-label{ flex:none; }
.home .quiz-card .quiz-dots{ display:flex; flex:1 1 auto; gap:6px; min-width:0; }
.home .quiz-card .quiz-dot{ flex:1 1 0; max-width:24px; min-width:8px; }

/* free-plan banner (logged-in Free users only) */
.home .banner-wrap{ padding-block:0 24px; background:var(--surface); max-width:none; }
.home .free-banner{
  max-width:calc(var(--w-wide, 1200px)); margin:0 auto; padding:12px 16px;
  border:1px solid var(--line); border-radius:12px; background:var(--paper);
  font-size:14px; color:var(--ink-2);
}
.home .free-banner p{ margin:0; }

/* ---- just spotted ---- */
.home .spot-list{
  display:flex; gap:12px; margin:0 calc(var(--pad-x, 16px) * -1); padding:0 var(--pad-x, 16px) 8px; list-style:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad-x, 16px); scrollbar-width:none;
}
.home .spot-list::-webkit-scrollbar{ display:none; }
.home .spot-list > li{ flex:0 0 82%; min-width:0; scroll-snap-align:start; }
@media (min-width:640px){ .home .spot-list > li{ flex-basis:calc(50% - 6px); } }
@media (min-width:960px){
  .home .spot-list{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-inline:0; padding-inline:0; overflow:visible; }
  .home .spot-list > li{ flex:none; }
}
.home .spot-card{
  display:flex; flex-direction:column; gap:6px; height:100%; padding:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  color:var(--ink); text-decoration:none; box-shadow:var(--shadow-sm);
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.home .spot-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--line-strong); text-decoration:none; }
.home .spot-top{ display:flex; align-items:center; gap:8px; min-height:24px; }
.home .tag-new{ padding:2px 8px; border:1px solid currentColor; border-radius:999px; font-size:12px; font-weight:600; color:var(--signal); }
.home .spot-price{ margin:8px 0 0; font-family:var(--display); font-size:28px; font-weight:700; line-height:1.1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.home .spot-price span{ margin-left:4px; font-family:var(--body); font-size:14px; font-weight:400; color:var(--slate); letter-spacing:0; }
.home .spot-title{ margin:0; font-weight:600; }
.home .spot-addr,
.home .spot-source{ margin:0; font-size:14px; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home .spot-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0 4px; }
.home .chip-ami{ padding:2px 10px; border:1px solid var(--line-strong); border-radius:999px; font-size:12px; font-weight:600; color:var(--ink-2); }

/* ---- proof strip ---- */
.home .proof-grid{ display:grid; gap:24px; margin:0; padding:0; list-style:none; }
.home .proof-grid > li + li{ border-top:1px solid var(--line); padding-top:24px; }
@media (min-width:768px){
  .home .proof-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
  .home .proof-grid > li{ padding-inline:32px; }
  .home .proof-grid > li + li{ border-top:0; padding-top:0; border-left:1px solid var(--line); }
  .home .proof-grid > li:first-child{ padding-left:0; }
}
.home .proof-num{ margin:0; font-family:var(--display); font-size:44px; font-weight:700; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
@media (min-width:768px){ .home .proof-num{ font-size:56px; } }
.home .proof-num span{ margin-left:6px; font-size:22px; font-weight:600; letter-spacing:0; color:var(--slate); }
.home .proof-cap{ margin:12px 0 8px; max-width:28ch; color:var(--ink-2); }

/* ---- how it works ---- */
.home .steps{ display:grid; gap:16px; margin:32px 0 0; padding:0; list-style:none; }
@media (min-width:768px){ .home .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } }
.home .step{ display:block; padding:28px; background:var(--paper); border:1px solid var(--line); border-radius:16px; }
.home .step-num{ display:grid; place-items:center; width:40px; height:40px; margin-bottom:20px; border-radius:50%; background:#EAF4EE; color:var(--accent-ink); font-family:var(--display); font-size:18px; font-weight:700; }
.home .step h3{ margin:0 0 8px; font-size:22px; line-height:1.25; font-weight:600; text-wrap:balance; }
.home .step p{ margin:0; color:var(--ink-2); }

/* ---- alert + telegram ---- */
.home .alert-grid{ display:grid; gap:32px; }
@media (min-width:960px){ .home .alert-grid{ grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:64px; align-items:center; } }
.home .alert-grid > div > p{ color:var(--ink-2); max-width:54ch; }
.home .tg-card{ display:flex; gap:16px; align-items:flex-start; margin-top:24px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.home .tg-card .ic{ width:28px; height:28px; color:var(--accent); }
.home .tg-card p{ margin:0 0 12px; }
.home .alert-card{ min-width:0; }
.home .alert-card .alertcard{ margin:0; max-width:none; box-shadow:var(--shadow-md); }

/* ---- speed chart ---- */
.home .speed-grid{ display:grid; gap:32px; }
@media (min-width:960px){ .home .speed-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:center; } }
.home .speed-grid p{ color:var(--ink-2); max-width:48ch; }
.home .bars{ display:grid; gap:20px; margin:0; padding:24px; list-style:none; background:var(--paper); border:1px solid var(--line); border-radius:16px; }
.home .bar-row{ display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:12px; align-items:center; }
.home .bar-label{ font-weight:600; }
.home .bar-track{ height:12px; border-radius:999px; background:rgba(15,118,110,.12); overflow:hidden; }
.home .bar-fill{ display:block; height:100%; width:var(--w); min-width:6px; border-radius:999px; background:var(--accent); animation:grow .8s ease both; }
@keyframes grow{ from{ width:0; } }
.home .bar-val{ min-width:84px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.home .bar-n{ display:block; font-size:12px; font-weight:400; color:var(--slate); }
.home .foot-note{ margin:12px 0 0; font-size:12px; color:var(--slate); }

/* ---- trust ---- */
.home .trust-card{ display:grid; gap:16px; max-width:880px; margin-inline:auto; padding:32px; background:var(--paper); border:1px solid var(--line); border-radius:16px; }
@media (min-width:768px){ .home .trust-card{ grid-template-columns:auto minmax(0,1fr); gap:24px; padding:40px; } }
.home .trust-card > .ic{ width:40px; height:40px; color:var(--qualify); }
.home .trust-card h3{ margin:0; font-size:22px; line-height:1.25; }
.home .checklist{ display:grid; gap:10px; margin:16px 0; padding:0; list-style:none; }
.home .checklist li{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); }
.home .checklist .ic{ margin-top:2px; color:var(--qualify); }

/* ---- pricing teaser ---- */
.home .plan-grid{ display:grid; gap:16px; margin:32px auto 0; }
@media (min-width:768px){ .home .plan-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:880px; } }
.home .plan{ display:flex; flex-direction:column; padding:28px; background:var(--paper); border:1px solid var(--line); border-radius:16px; }
.home .plan--premium{ border:2px solid var(--accent); background:linear-gradient(180deg,#F1F8F5,var(--paper) 55%); }
.home .plan-name{ margin:0 0 8px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.home .plan-price{ margin:0; font-family:var(--display); font-size:36px; font-weight:700; line-height:1; }
.home .plan-price span{ margin-left:4px; font-family:var(--body); font-size:16px; font-weight:400; color:var(--slate); }
.home .plan ul{ display:grid; gap:10px; flex:1; margin:20px 0 24px; padding:0; list-style:none; }
.home .plan li{ display:flex; gap:10px; align-items:flex-start; }
.home .plan li .ic{ margin-top:2px; color:var(--accent); }
.home .plan .btn{ width:100%; }

/* ---- faq ---- */
.home .faq{ max-width:760px; margin:32px auto 0; border-top:1px solid var(--line); }
.home .faq details{ border-bottom:1px solid var(--line); }
.home .faq summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; list-style:none; cursor:pointer; font-size:18px; font-weight:600; }
.home .faq summary::-webkit-details-marker{ display:none; }
.home .faq summary::after{ content:"+"; font-size:24px; line-height:1; color:var(--accent-ink); transition:transform 180ms ease; }
.home .faq details[open] summary::after{ transform:rotate(45deg); }
.home .faq details p{ margin:0 0 20px; max-width:62ch; color:var(--ink-2); }

/* ---- final cta ---- */
.home .final .container{ max-width:calc(640px + var(--pad-x, 16px) * 2); text-align:center; }
.home .final h2{ color:#fff; font-size:36px; }
@media (min-width:768px){ .home .final h2{ font-size:44px; } }
.home .final p{ margin:16px 0 0; font-size:18px; color:rgba(255,255,255,.78); }
.home .btn.on-dark{ min-height:56px; margin-top:32px; padding-inline:36px; background:#fff; color:var(--ink); border-color:#fff; font-size:17px; }
.home .btn.on-dark:hover{ background:var(--paper-2); color:var(--ink); }
.home .final .link-arrow{ display:inline-block; margin-top:20px; color:#fff; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .home .facade .lit, .home .bar-fill, .home .status-dot{ animation:none; }
  .home .spot-card, .home .btn, .home .faq summary::after{ transition:none; transform:none; }
}

/* ---- compact guides, quiet secondary section (2026-10-31) ----
   Smaller type and muted color so this block does not compete
   with the signup CTA. The final CTA section itself is untouched. */
.home .guides-compact{ padding-block:calc(var(--section-y) * 0.5); }
.home .guides-compact h2{ font-size:18px; font-weight:600; color:var(--slate); }
.home .guides-compact p{ font-size:14px; color:var(--slate); }
.home .guides-compact-list{ font-size:14px; }
.home .guides-compact-list a{ color:var(--slate); }