/* SmartPitch site v2: additions on top of main.css and live.css
 *
 *   1. Hero second button
 *   2. Three-card strips (how it works, who it's for)
 *   3. Cold-night timeline graphic
 *   4. Savings estimator
 *   5. FAQ
 *   6. Trust line above the form
 */

.hero-cta .btn-glass { margin-left: 12px; }
.hero-sub-strong { color: var(--text); font-weight: 600; }

.v2-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
  margin-top: 44px;
}
.v2-card {
  padding: 30px 28px;
  background: rgba(12, 17, 28, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.v2-card .v2-num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.v2-card h4 { font-size: 19px; color: var(--text); margin-bottom: 10px; }
.v2-card p { font-size: 15px; line-height: 1.6; color: var(--muted); }

.v2-timeline {
  margin: 48px auto 0;
  max-width: 980px;
  background: rgba(12, 17, 28, 0.72);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 18px 10px;
  overflow-x: auto;
}
.v2-timeline svg {
  width: 100%;
  min-width: 640px;
  height: auto;
  display: block;
  font-family: 'Inter', sans-serif;
}
.v2-timeline-cap { font-size: 13px; color: var(--dim); text-align: center; margin: 14px 0 4px; }

.v2-est {
  margin: 44px auto 0;
  max-width: 720px;
  background: rgba(12, 17, 28, 0.72);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px;
  text-align: center;
}
.v2-est-lab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.v2-est-val {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 8px 0 14px;
}
.v2-est input[type=range] { width: 100%; accent-color: var(--brand); margin: 6px 0 26px; }
.v2-est-out {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.v2-est-sub { color: var(--muted); font-size: 14px; }
.v2-est .btn { margin-top: 24px; }
.v2-est-note { margin-top: 16px; font-size: 12.5px; color: var(--dim); }

.v2-faq { max-width: 820px; margin: 44px auto 0; text-align: left; }
.v2-faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.v2-faq details:last-child { border-bottom: 1px solid var(--line); }
.v2-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after { content: '+'; color: var(--brand); font-weight: 700; font-size: 20px; flex: none; }
.v2-faq details[open] summary::after { content: '\2013'; }
.v2-faq details p { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.6; }

.v2-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 0 0 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.v2-trust span::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 8px;
  vertical-align: middle;
}
.v2-small { font-size: 13px; color: var(--dim); text-align: center; margin-top: 22px; }

@media (max-width: 900px) {
  .v2-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .v2-est { padding: 26px 18px; }
  .hero-cta .btn-glass { margin-left: 0; margin-top: 12px; }
}

/* ─── v3 additions: dimensions grid, exploded drawing, email card ─── */
.v2-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: left;
  margin-top: 44px;
}
.v2-dim {
  padding: 22px 20px;
  background: rgba(12, 17, 28, 0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.v2-dim .v2-num { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.v2-dim h4 { font-size: 17px; color: var(--text); margin-bottom: 8px; }
.v2-dim p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.v2-dim.v2-dim-hero { grid-column: 1 / -1; background: linear-gradient(180deg, rgba(46, 229, 157, 0.10), rgba(46, 229, 157, 0.02)); border-color: rgba(46, 229, 157, 0.32); }
.v2-dim.v2-dim-hero p { font-size: 16px; color: var(--text); max-width: 900px; }

.v2-exploded { margin: 44px auto 0; max-width: 980px; }
.v2-exploded svg { width: 100%; height: auto; display: block; font-family: 'Inter', sans-serif; }

.v2-mail {
  margin: 36px auto 0;
  max-width: 640px;
  text-align: left;
  background: rgba(12, 17, 28, 0.78);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
}
.v2-mail-head { display: flex; justify-content: space-between; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.v2-mail-subj { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.v2-mail-body { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.v2-mail-body strong { color: var(--text); }
.v2-mail + .v2-mail { margin-top: 16px; }

.v2-big { font-size: clamp(40px, 6vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 10px 0 8px; }

@media (max-width: 1100px) { .v2-grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .v2-grid4 { grid-template-columns: 1fr; } }
.v2-mail-btn { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(46, 229, 157, 0.14); border: 1px solid rgba(46, 229, 157, 0.5); color: var(--brand); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }

/* ─── Breathing room (match the original page's rhythm) ─── */
.v2-grid3 { margin-top: 64px; gap: 26px; }
.v2-grid4 { margin-top: 64px; gap: 24px; }
.v2-card { padding: 34px 30px; }
.v2-dim { padding: 28px 26px; }
.v2-dim.v2-dim-hero { padding: 36px 34px; margin-top: 8px; }
.v2-dim.v2-dim-hero p { line-height: 1.7; }
.v2-timeline { margin-top: 64px; padding: 28px 24px 16px; }
.v2-mail { margin-top: 24px; padding: 28px 30px; }
.v2-mail:first-of-type { margin-top: 56px; }
.v2-informed-list { max-width: 680px; margin: 56px auto 0; text-align: left; gap: 16px; }
.v2-exploded { margin-top: 64px; }
.v2-est { margin-top: 56px; padding: 40px; }
.v2-faq { margin-top: 56px; }
.v2-faq details { padding: 22px 0; }
.v2-learn-row { margin-top: 26px; }
.v2-learn-row .v2-dim { background: rgba(46, 229, 157, 0.05); border-color: rgba(46, 229, 157, 0.22); }
.v2-tag { display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 182, 72, 0.5); background: rgba(255, 182, 72, 0.10); color: #ffb648; font-size: 10px; letter-spacing: 1.5px; vertical-align: middle; }
.v2-figure { margin: 56px auto 0; max-width: 980px; }
.v2-figure img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--line); }
.v2-figure figcaption { margin-top: 14px; font-size: 13px; color: var(--dim); text-align: center; }

/* ─── Scroll-driven pieces ─── */
.scrub { position: relative; height: 240vh; margin-top: 64px; }
.scrub.scrub-short { height: 200vh; }
.scrub-sticky { position: sticky; top: 9vh; }
.scrub .v2-timeline, .scrub .v2-exploded { margin-top: 0; }
#week-cap { min-height: 2.6em; transition: opacity 0.25s var(--ease); }
#week-cap.swap { opacity: 0; }
.x-part { will-change: transform; }
.x-fade { will-change: opacity; }

.v2-scan-stack { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.v2-scan-base { display: block; width: 100%; height: auto; }
.v2-scan-top { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 100% 0 0); }
.v2-scan-line { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--brand); box-shadow: 0 0 18px 5px rgba(46, 229, 157, 0.55); opacity: 0; }
.v2-scan.visible .v2-scan-top { animation: v2scan 3s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards; }
.v2-scan.visible .v2-scan-line { animation: v2line 3s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards; }
@keyframes v2scan { to { clip-path: inset(0 0 0 0); } }
@keyframes v2line { 0% { left: 0; opacity: 1; } 96% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.hero-bg { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .scrub, .scrub.scrub-short { height: auto; }
  .scrub-sticky { position: static; }
  .v2-scan-top { clip-path: none; }
  .v2-scan.visible .v2-scan-top, .v2-scan.visible .v2-scan-line { animation: none; }
}
@media (max-width: 900px) {
  .scrub { height: 200vh; }
  .scrub.scrub-short { height: 170vh; }
  .scrub-sticky { top: 70px; }
}

/* overflow:hidden on an ancestor stops position:sticky; clip keeps the bleed layers tidy without that side effect */
.savings-section, .what-section { overflow: clip; }
.v2-mail-btn { font-size: 11px; padding: 2px 8px; letter-spacing: 0.3px; text-transform: none; font-weight: 600; }
.save-word { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; }
.v2-eyebrow-gap { margin-top: 64px; }
.v2-insight-tight { margin-top: 28px; }

/* ─── Phones ─── */
.v2-kit-list { display: none; }
@media (max-width: 720px) {
  /* scroll-driven pieces show finished; no pinning on a small screen */
  .scrub, .scrub.scrub-short { height: auto; }
  .scrub-sticky { position: static; }
  #week-cursor { display: none; }
  /* week graph: scrolls sideways, with bigger type */
  .v2-timeline { padding: 16px 12px 10px; }
  /* kit drawing: crop to the picture, labels become a list underneath */
  .x-labels { display: none; }
  .v2-kit-list { display: block; list-style: none; margin: 28px 0 0; padding: 0; text-align: left; }
  .v2-kit-list li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; color: var(--muted); }
  .v2-kit-list li strong { color: var(--text); }
  .v2-mail { padding: 20px 18px; }
  .v2-mail-head { flex-direction: column; gap: 4px; }
  .v2-grid4 { gap: 14px; }
  .v2-dim, .v2-card { padding: 22px 20px; }
}

/* ─── Phone fixes from the WebKit check (5 Nov) ─── */
.v2-timeline, .scrub-sticky, .v2-exploded { max-width: 100%; }
@media (max-width: 900px) {
  .footer-links { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
}

/* ─── Two versions of the week graph: big for laptops, compact for phones ─── */
.v2-week-mobile { display: none; }
@media (max-width: 720px) {
  .v2-week-desktop { display: none; }
  .v2-week-mobile { display: block; min-width: 0; }
  .v2-timeline { overflow: hidden; padding: 14px 8px 8px; }
  .v2-timeline svg { min-width: 0; }
}
/* specificity: these must outrank ".v2-timeline svg" above */
.v2-timeline svg.v2-week-mobile { display: none; }
@media (max-width: 720px) {
  .v2-timeline svg.v2-week-desktop { display: none; }
  .v2-timeline svg.v2-week-mobile { display: block; min-width: 0; }
}

/* ─── Phones: show the first piece of each long section, tap for the rest ─── */
.v2-more-btn { display: none; }
@media (max-width: 720px) {
  .v2-more-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 18px auto 0; padding: 11px 18px;
    border-radius: 999px; border: 1px solid rgba(46, 229, 157, 0.45);
    background: rgba(46, 229, 157, 0.08); color: var(--brand);
    font: 600 14px 'Inter', sans-serif; cursor: pointer;
  }
  .v2-more-btn::after { content: '+'; font-weight: 700; font-size: 16px; }
  .v2-more-btn[aria-expanded="true"]::after { content: '\2013'; }
  .container.center .v2-more-btn, .learn-content .v2-more-btn { display: inline-flex; }
  .v2-more:not(.open) { display: none; }
  .v2-collapse-0:not(.open) > * { display: none; }
  .v2-collapse-1:not(.open) > :nth-child(n+2) { display: none; }
  .v2-collapse-2:not(.open) > :nth-child(n+3) { display: none; }
  .v2-collapse-0:not(.open) { margin-top: 0; }
  /* product screens: no tall empty steps on a phone */
  .prod-step { min-height: 0; padding: 22px 0; }
  .product-scroll { padding: 40px 0 60px; }
  .v2-grid4.v2-collapse-1:not(.open) { margin-top: 32px; }
}
@media (max-width: 720px) {
  /* no tall empty bands on phones */
  .bleed.bleed-tall { min-height: 0; padding: 80px 0; }
  .cta-bleed { padding: 90px 0; }
  .section { padding: 80px 0; }
  .var-chips { display: none; }
  .save-card { padding: 24px 22px 22px; }
  .save-yr { margin-bottom: 10px; }
  .save-num { margin-bottom: 8px; }
  .product-copy .v2-more-btn { margin-left: 0; }
  .v2-collapse-0#safety-list:not(.open) { margin-top: 0; }
}