/*
Theme Name: Cars4Cash
Theme URI: https://cars4cash.com
Author: Intuizi Inc.
Author URI: https://intuizi.com
Description: Block theme for Cars4Cash, the PADNOS vehicle-buying brand. Ships a conversion-focused homepage, self-serve city landing pages, an admin-managed FAQ, and an integrated instant-quote wizard for selling junk cars across Michigan.
Version: 0.4.3
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: cars4cash
*/

/* Design tokens - mirror of the theme.json presets, kept as custom properties so
   the component CSS below can reference them directly. */
:root {
  --c4c-green: #4e8b3a;
  --c4c-green-deep: #35682a;
  --c4c-charcoal: #3a3a3a;
  --c4c-ink: #1c1c1c;
  --c4c-gold: #f0a81f;
  --c4c-gold-deep: #d18e0a;
  --c4c-paper: #ffffff;
  --c4c-mist: #eef8fd;
  --c4c-sand: #f6f1e9;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(28, 28, 28, 0.10);
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  font-family: "Figtree", system-ui, sans-serif;
  color: var(--c4c-ink);
  background: var(--c4c-paper);
  line-height: 1.55;
}
h1, h2, h3 { font-family: "Bricolage Grotesque", "Figtree", sans-serif; line-height: 1.08; letter-spacing: -0.015em; }
.num, .price { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-variant-numeric: tabular-nums; }
.site-header a, .site-footer a { color: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 3px solid var(--c4c-gold); outline-offset: 2px; border-radius: 4px; }
/* Full-bleed bands manage their own padding; drop the editor block-gap so they butt
   together with no white seams. Must cover header/main/footer too, not just <section> -
   the footer template-part's 24px block-gap margin was showing as a white strip under
   the quote page's hero, and main.quote-main got one above it. */
.wp-site-blocks > section,
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block: 0; }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid #e8e4dd; background: var(--c4c-paper); position: sticky; top: 0; z-index: 40; }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.site-header img { height: 40px; width: auto; }
.site-header nav { display: flex; gap: 22px; font-weight: 500; font-size: 0.95rem; margin-left: auto; }
.site-header nav a { text-decoration: none; color: var(--c4c-charcoal); }
.site-header nav a:hover { color: var(--c4c-green-deep); }
/* Header phone as a button. Outlined rather than solid, because the site already
   uses solid green for "get an offer" and outlined green for "call" (see .sticky-cta) -
   keeping that vocabulary means the header CTA never competes with the hero's. */
.call-link {
  text-decoration: none; font-weight: 600; color: var(--c4c-green-deep);
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15;
  border: 2px solid var(--c4c-green); border-radius: 10px; padding: 8px 18px;
  transition: background 0.15s ease, color 0.15s ease;
}
.call-link small { font-weight: 500; color: var(--c4c-charcoal); font-size: 0.72rem; transition: color 0.15s ease; }
.call-link:hover, .call-link:focus-visible { background: var(--c4c-green); color: #fff; }
.call-link:hover small, .call-link:focus-visible small { color: rgba(255, 255, 255, 0.88); }
.call-link:focus-visible { outline: 3px solid var(--c4c-gold); outline-offset: 2px; }
@media (max-width: 768px) {
  .site-header nav { display: none; }
  .site-header .wrap { gap: 12px; }
  /* nowrap so the number never breaks as "1-800- / CARS4CASH" */
  .call-link { margin-left: auto; padding: 7px 12px; font-size: 0.92rem; white-space: nowrap; }
}
@media (max-width: 400px) {
  .call-link { padding: 6px 10px; font-size: 0.85rem; }
  .call-link small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .call-link, .call-link small { transition: none; } }

/* ---------- footer ---------- */
.site-footer { background: var(--c4c-ink); color: #c9c4bb; padding: 44px 0 88px; font-size: 0.9rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.site-footer img { height: 34px; width: auto; }
.site-footer a { color: #f4f2ee; text-decoration: none; font-weight: 600; }
.padnos-line { font-size: 0.82rem; font-weight: 400; }
.footer-brand { display: grid; gap: 10px; }
.footer-contact { display: grid; gap: 12px; justify-items: flex-end; text-align: right; }
.footer-phone { font-weight: 700; }
.footer-social { display: flex; gap: 14px; }
.footer-social a { display: inline-flex; color: #c9c4bb; }
.footer-social svg { width: 22px; height: 22px; fill: currentColor; }
.footer-social a:hover { color: var(--c4c-gold); }
.footer-bottom { border-top: 1px solid #34322d; margin-top: 8px; padding-top: 20px; font-size: 0.85rem; }
.footer-legal, .footer-legal-list { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.footer-legal a { color: #c9c4bb; font-weight: 500; font-size: 0.85rem; }
.footer-legal a:hover { color: #f4f2ee; }
@media (max-width: 700px) {
  .footer-contact { justify-items: flex-start; text-align: left; }
}

/* ---------- hero / #instant ---------- */
#instant { position: relative; overflow: hidden; background:
    radial-gradient(1200px 500px at 85% -10%, var(--c4c-mist) 0%, transparent 60%),
    var(--c4c-paper);
  padding: 60px 0 64px; }
/* Brand illustration as the hero backdrop, sitting behind the headline and the
   offer ticket. Anchored bottom-left so the tow truck stays and the right edge
   crops away behind the opaque card. A left-to-right wash keeps the copy
   readable while the scene shows through toward the center and bottom. */
#instant::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.58) 32%, rgba(255,255,255,0.08) 58%, rgba(255,255,255,0) 76%),
    linear-gradient(to bottom, var(--c4c-paper) 0%, rgba(255,255,255,0) 28%),
    url(assets/img/hero-scene.png) left bottom / cover no-repeat; }
#instant > .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-copy h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; }
.hero-copy h1 em { font-style: normal; color: var(--c4c-green-deep); }
.hero-copy p.lede { margin: 18px 0 26px; font-size: 1.125rem; color: var(--c4c-charcoal); max-width: 44ch; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid #ddd6cb; border-radius: 999px; padding: 7px 14px; font-size: 0.85rem; font-weight: 600; color: var(--c4c-charcoal); background: #fff; }
.chip b { color: var(--c4c-green-deep); }

/* signature: the offer ticket */
.ticket { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid #e8e4dd; position: relative; }
.ticket::before { /* stamp */
  content: "FREE TOW INCLUDED";
  position: absolute; top: -14px; right: 18px;
  background: var(--c4c-gold); color: var(--c4c-ink);
  font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  padding: 6px 12px; border-radius: 6px; transform: rotate(2deg);
  box-shadow: 0 2px 8px rgba(28,28,28,0.18);
}
.ticket-head { padding: 26px 28px 0; }
.ticket-head h2 { font-size: 1.35rem; font-weight: 800; }
.ticket-head p { color: var(--c4c-charcoal); font-size: 0.95rem; margin-top: 4px; }
.ticket form { padding: 20px 28px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ticket label { font-size: 0.8rem; font-weight: 600; color: var(--c4c-charcoal); display: block; margin-bottom: 5px; }
.ticket select, .ticket input {
  width: 100%; box-sizing: border-box; padding: 12px 12px; border: 1.5px solid #d9d2c6; border-radius: 8px;
  font: inherit; font-size: 1rem; background: #fff; color: var(--c4c-ink);
}
.ticket select:focus, .ticket input:focus { border-color: var(--c4c-green); outline: none; box-shadow: 0 0 0 3px rgba(78,139,58,0.18); }
.field-year { grid-column: 1; } .field-make { grid-column: 2; }
.field-model { grid-column: 1; } .field-zip { grid-column: 2; }
.ticket .tear { grid-column: 1 / -1; border-top: 2px dashed #d9d2c6; margin: 6px -28px 2px; position: relative; }
.ticket .tear::before, .ticket .tear::after {
  content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c4c-paper); border: 1px solid #e8e4dd;
}
.ticket .tear::before { left: -9px; } .ticket .tear::after { right: -9px; }
.btn-offer {
  grid-column: 1 / -1; display: inline-block; text-align: center; text-decoration: none;
  background: var(--c4c-green); color: #fff; border: none; cursor: pointer;
  font: 600 1.1rem "Figtree", sans-serif; padding: 15px 20px; border-radius: 10px;
  transition: background 0.15s ease;
}
.btn-offer:hover { background: var(--c4c-green-deep); }
.ticket .fine { grid-column: 1 / -1; font-size: 0.78rem; color: #8a8377; text-align: center; }
.ticket .fine .price { color: var(--c4c-gold-deep); }

/* ---------- entrance ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-copy { animation: rise 0.5s ease-out both; }
.ticket { animation: rise 0.5s 0.12s ease-out both; }

/* ---------- shared section rhythm ---------- */
section { padding: 72px 0; }
.eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c4c-green-deep); margin-bottom: 12px; }
.sec-title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; margin-bottom: 14px; }
.sec-lede { color: var(--c4c-charcoal); max-width: 58ch; }

/* ---------- #pickup ---------- */
#pickup { background: var(--c4c-sand); }
.pickup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.pickup-points { list-style: none; display: grid; gap: 16px; margin-top: 22px; }
.pickup-points li { display: flex; gap: 12px; align-items: baseline; }
.pickup-points .tick { color: var(--c4c-green-deep); font-weight: 800; }
.tow-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.tow-card .big { font-size: 2.6rem; font-weight: 800; font-family: "Bricolage Grotesque", sans-serif; }
.tow-card .big span { color: var(--c4c-green-deep); }
.tow-card p { color: var(--c4c-charcoal); margin-top: 6px; }

/* ---------- #topDollar price board ---------- */
.board { margin-top: 34px; border: 1px solid #e8e4dd; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.board table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.board th { text-align: left; font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c4c-charcoal); background: var(--c4c-mist); padding: 12px 18px; }
.board td { padding: 14px 18px; border-top: 1px solid #efece6; }
.board .price { color: var(--c4c-gold-deep); font-size: 1.05rem; }
.board .where { color: var(--c4c-charcoal); }
.board-note { font-size: 0.8rem; color: #8a8377; margin-top: 10px; }

/* ---------- #nohassle steps ---------- */
#nohassle { background: var(--c4c-ink); color: #f4f2ee; }
#nohassle .eyebrow { color: var(--c4c-gold); }
#nohassle .sec-lede { color: #c9c4bb; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.step { border-top: 2px solid var(--c4c-gold); padding-top: 18px; }
.step .num { color: var(--c4c-gold); font-size: 0.85rem; }
.step h3 { font-size: 1.25rem; margin: 8px 0 8px; color: #fff; }
.step p { color: #c9c4bb; font-size: 0.95rem; }

/* ---------- reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.review { background: #fff; border: 1px solid #e8e4dd; border-radius: var(--radius); padding: 24px; }
.review .stars { color: var(--c4c-gold); letter-spacing: 2px; }
.review p { margin: 12px 0 14px; font-size: 0.97rem; }
.review footer { font-size: 0.85rem; color: var(--c4c-charcoal); font-weight: 600; }

/* ---------- locations ---------- */
#locations { background: var(--c4c-mist); }
.loc-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.loc { background: #fff; border: 1px solid #d8e6ee; border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 0.92rem; text-decoration: none; color: var(--c4c-charcoal); }
.loc:hover { border-color: var(--c4c-green); color: var(--c4c-green-deep); }

/* ---------- video ---------- */
#video { background: var(--c4c-mist); }
.video-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 52px; align-items: center; }
.video-copy .sec-lede { margin-bottom: 24px; }
.video-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-primary { display: inline-block; background: var(--c4c-green); color: #fff; text-decoration: none; font-weight: 700; padding: 13px 26px; border-radius: 10px; transition: background 0.15s ease; }
.btn-primary:hover { background: var(--c4c-green-deep); }
.btn-ghost { display: inline-block; border: 2px solid var(--c4c-green); color: var(--c4c-green-deep); text-decoration: none; font-weight: 700; padding: 11px 24px; border-radius: 10px; transition: all 0.15s ease; }
.btn-ghost:hover { background: var(--c4c-green); color: #fff; }
.video-facade { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: 0 14px 44px rgba(28,28,28,0.20); background: #cfe3ee; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.video-facade:hover img { transform: scale(1.04); }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 64px; }
.video-play svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
.video-play .yt-bg { fill: #212121; opacity: 0.86; transition: fill 0.15s ease, opacity 0.15s ease; }
.video-facade:hover .yt-bg, .video-facade:focus-visible .yt-bg { fill: #cf2e2e; opacity: 1; }
.video-facade:focus-visible { outline: 3px solid var(--c4c-gold); outline-offset: 3px; }
.video-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; box-shadow: 0 14px 44px rgba(28,28,28,0.20); }
@media (max-width: 900px) { .video-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- FAQ (two-column accordion) ---------- */
#faq .wrap { text-align: center; }
#faq .sec-lede { margin-inline: auto; }
.faq { margin: 34px auto 0; text-align: left; display: flex; gap: 20px; align-items: flex-start; }
.faq-col { flex: 1; min-width: 0; display: grid; gap: 20px; align-content: start; }
.faq details { background: #fff; border: 1px solid #e8e4dd; border-radius: 14px; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.faq details:hover { border-color: #cdd8cf; }
.faq details[open] { border-color: var(--c4c-green); box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--c4c-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(78,139,58,0.12); color: var(--c4c-green-deep); font-size: 1.2rem; font-weight: 400; line-height: 1; transition: background 0.15s ease, color 0.15s ease; }
.faq details[open] summary::after { content: "\2212"; background: var(--c4c-green); color: #fff; }
.faq summary:hover { color: var(--c4c-green-deep); }
.faq-answer { padding: 0 18px 18px; }
.faq-answer p { margin: 0; color: var(--c4c-charcoal); font-size: 0.95rem; line-height: 1.6; }
.faq-answer p + p, .faq-answer ul { margin-top: 10px; }
.faq details[open] .faq-answer { animation: faqReveal 0.25s ease; }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .faq { flex-direction: column; } }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta { display: none; }
@media (max-width: 768px) {
  .sticky-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.96); border-top: 1px solid #e8e4dd; backdrop-filter: blur(6px); }
  .sticky-cta a { text-align: center; text-decoration: none; font-weight: 700; padding: 13px 10px; border-radius: 10px; font-size: 1rem; }
  .sticky-cta .s-call { border: 2px solid var(--c4c-green); color: var(--c4c-green-deep); }
  .sticky-cta .s-offer { background: var(--c4c-green); color: #fff; }
}

/* ---------- hero + sections responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .pickup-grid { grid-template-columns: 1fr; gap: 36px; }
  .steps, .reviews-grid { grid-template-columns: 1fr; }
  #instant { padding: 48px 0 64px; }
  section { padding: 56px 0; }
}
@media (max-width: 480px) {
  .ticket form { grid-template-columns: 1fr; }
  .field-year, .field-make, .field-model, .field-zip { grid-column: 1; }
}

/* ---------- city / market lander ---------- */
.hero { background: radial-gradient(1100px 460px at 82% -10%, var(--c4c-mist) 0%, transparent 58%), var(--c4c-paper); padding: 56px 0 72px; }
.lander-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; }
.hero h1 [data-city] { color: var(--c4c-green-deep); }
.hero .lede { margin: 16px 0 20px; font-size: 1.08rem; color: var(--c4c-charcoal); max-width: 46ch; }
.hero .lede p + p { margin-top: 12px; }
.local-call { display: inline-flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid #e8e4dd; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 22px; text-decoration: none; }
.local-call small { font-size: 0.78rem; font-weight: 600; color: var(--c4c-charcoal); letter-spacing: 0.06em; text-transform: uppercase; }
.local-call .tracked-number { font-family: "IBM Plex Mono", monospace; font-size: 1.5rem; font-weight: 600; color: var(--c4c-green-deep); text-decoration: none; }
.hero-points { list-style: none; display: grid; gap: 10px; margin: 24px 0 0; padding: 0; }
.hero-points li { display: flex; gap: 10px; align-items: baseline; }
.hero-points .tick { color: var(--c4c-green-deep); font-weight: 800; }

/* wizard mount placeholder - replaced by the quote plugin */
.c4c-wizard-slot { display: grid; }
.c4c-wizard-placeholder { display: grid; gap: 6px; align-content: center; text-align: center;
  border: 2px dashed #cfc9be; border-radius: var(--radius); padding: 40px 24px; background: #fbfaf7; color: var(--c4c-charcoal); min-height: 220px; }
.c4c-wizard-placeholder strong { font-size: 1.05rem; color: var(--c4c-ink); }
.c4c-wizard-placeholder span { font-size: 0.85rem; color: #8a8377; }
.c4c-wizard-placeholder code { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; }

.local-content { background: var(--c4c-sand); }
/* SEO body: main copy on the left, facility + resources sidebar on the right. */
.local-seo { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: 44px; align-items: start; }
.local-main .sec-title { text-align: left; }
.local-copy { max-width: 68ch; }
.local-copy p + p { margin-top: 14px; }
.local-copy p { color: var(--c4c-charcoal); line-height: 1.7; }
.about-title { font-size: 1.3rem; font-weight: 800; margin: 30px 0 10px; }
.about-copy { color: var(--c4c-charcoal); }
.local-side { display: grid; gap: 20px; align-content: start; }

/* Physical yard card. */
.facility-card { background: #fff; border: 1px solid #e8e4dd; border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.facility-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.facility-card address { font-style: normal; display: grid; gap: 3px; color: var(--c4c-charcoal); font-size: 0.95rem; }
.facility-card .fac-name { font-weight: 700; color: var(--c4c-ink); }
.facility-card .fac-phone { margin-top: 10px; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 1.15rem; color: var(--c4c-green-deep); text-decoration: none; }

/* Editorial helpful-resources box: visually distinct - content, not conversion UI */
.helpful { background: #fff; border: 1px dashed #c9beab; border-radius: var(--radius); padding: 24px 26px; }
.helpful h3 { font-size: 1.05rem; margin-bottom: 6px; }
.helpful .note { font-size: 0.78rem; color: #8a8377; font-style: italic; margin-bottom: 14px; }
.helpful ul { list-style: none; display: grid; gap: 14px; }
.helpful li { display: grid; gap: 2px; font-size: 0.9rem; }
.helpful .r-name { font-weight: 600; color: var(--c4c-ink); }
.helpful .r-addr { color: #8a8377; font-size: 0.82rem; }
.helpful .r-num { color: var(--c4c-charcoal); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .lander-grid, .local-seo { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 44px 0 60px; }
}

/* ---------- quote page ----------
   Built as a second hero rather than a lone card on white: same misty gradient, same
   brand illustration wash, copy and reassurance on the left, the wizard on the right.
   The card needs a surface for its shadow to read against, and the visitor arriving
   from the homepage ticket should land somewhere that looks like where they came from. */
.quote-main {
  position: relative; overflow: hidden; padding: 56px 0 80px;
  background:
    radial-gradient(1200px 500px at 85% -10%, var(--c4c-mist) 0%, transparent 60%),
    var(--c4c-paper);
}
/* Heavier veil than the homepage's. There the ticket is wide enough to crop the busy
   right-hand side of the scene away; here the form column is narrower, so the keys and
   hand would show through beside it and fight the fields. Keep the scene as texture. */
.quote-main::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.78) 36%, rgba(255,255,255,0.66) 62%, rgba(255,255,255,0.72) 100%),
    linear-gradient(to bottom, var(--c4c-paper) 0%, rgba(255,255,255,0.20) 30%),
    url(assets/img/hero-scene.png) left bottom / cover no-repeat;
}
.quote-main > .wrap { position: relative; z-index: 1; }
/* Top-aligned, not centred: the form column is much taller than the copy, so centring
   left the headline floating in the middle of the band. The small offset lines the
   headline up with the card's heading rather than its top edge. */
.quote-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: start; }
.quote-copy { padding-top: 34px; }
.quote-copy h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; }
.quote-copy h1 em { font-style: normal; color: var(--c4c-green-deep); }
.quote-copy .lede { margin: 14px 0 20px; font-size: 1.05rem; color: var(--c4c-charcoal); max-width: 42ch; }
.quote-copy .chips { margin-bottom: 20px; }
.quote-call { font-size: 0.95rem; color: var(--c4c-charcoal); }
.quote-call a { font-family: "IBM Plex Mono", monospace; font-weight: 600; color: var(--c4c-green-deep); text-decoration: none; }
.quote-call a:hover { text-decoration: underline; }
/* The wizard is the plugin's own card - the theme only gives it a column to sit in. */
.quote-slot { min-width: 0; }

@media (max-width: 980px) {
  .quote-grid { grid-template-columns: 1fr; gap: 30px; }
  .quote-main { padding: 32px 0 96px; }
  /* Form first once stacked. Unlike the homepage, this page's only job is the quote -
     the pitch reads as reassurance underneath rather than a screenful to scroll past. */
  .quote-slot { order: 1; }
  .quote-copy { order: 2; }
  .quote-copy h1 { font-size: clamp(1.6rem, 6vw, 2.1rem); }
  .quote-copy .lede { max-width: 60ch; margin: 12px 0 18px; }
}

/* ---------- generic pages / 404 / archive ---------- */
.page-main { padding: 64px 24px 96px; }
.page-main > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.page-title { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 22px; }
.page-main p { margin-bottom: 16px; color: var(--c4c-charcoal); }
.page-main .c4c-wizard-placeholder { max-width: 640px; }
.page-main .wp-block-buttons { margin-top: 8px; }

/* Body copy on the landing and keyword pages.
 *
 * These templates sandwich the copy between full-bleed bands that sit on the site's
 * .wrap grid, so the text has to start exactly where the band headings start or it
 * reads as floating inside them.
 *
 * Two things make that fiddly. .wrap is content-box, so its 24px padding sits OUTSIDE
 * the 1120px max-width; a border-box copy of the same numbers lands 24px further in.
 * And the block editor wraps post content in .entry-content, so a `> *` measure rule
 * hits that wrapper rather than the paragraphs.
 */
.keyword-main,
.landing-main {
  box-sizing: content-box;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px 80px;
}
.keyword-main > *,
.landing-main > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.keyword-main .entry-content > *,
.landing-main .entry-content > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.keyword-main .entry-content > h2,
.landing-main .entry-content > h2 { margin-top: 40px; }
.keyword-main .entry-content > h3,
.landing-main .entry-content > h3 { margin-top: 28px; }
.keyword-main .entry-content ul,
.landing-main .entry-content ul { padding-left: 22px; }
.keyword-main .entry-content li,
.landing-main .entry-content li { margin-bottom: 6px; color: var(--c4c-charcoal); }

/*
 * Anchors the old site's section ids answer to. Google Ads sitelinks still point at
 * #how-it-works, #testimonials, #about and #FAQ, so each lands on the matching section here
 * instead of the top of the page. Offset by the sticky header.
 */
.c4c-anchor { display: block; height: 0; scroll-margin-top: 80px; }