/* FormsPal funnel — PPC landing page styles.
   Builds on core/css/tokens.css + base.css; uses the same component classes
   (.section, .container, .card, .btn-*, .pill, .cta-band, .eyebrow, .lede).
   Only funnel-specific overrides live here. */

/* ── Hero ──────────────────────────────────────────────────────────── */
.fp-hero {
  background: linear-gradient(135deg, var(--fp-ink) 0%, #0e3340 100%);
  color: #cdd6d4;
  padding-block: clamp(60px, 10vw, 120px);
}
.fp-hero h1 { color: #fff; font-size: clamp(28px, 4.5vw, 52px); }
.fp-hero h1 em { color: var(--fp-orange); font-style: normal; }
.fp-hero .pill { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #cdd6d4; margin-bottom: 20px; }
/* Contrast sweep 2026-07-10: base .lede is --fp-muted (2.5:1 on the dark hero) and the green
   check glyph was 2.95:1 — both re-tinted for the dark background. */
.fp-hero .lede { color: #cdd6d4; }
.fp-hero .fp-check { color: #4cc38a; }

.fp-hero__inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .fp-hero__inner { grid-template-columns: 1fr; }
  .fp-hero__visual { display: none; }
}

.fp-hero__cta {
  margin-top: 28px;
  font-size: 16px;
  padding: 16px 28px;
}

.fp-hero__trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 14px;
  color: #9fb0ac;
}
.fp-check { color: var(--fp-green); margin-right: 4px; }

/* Document preview illustration — a stylized FILLED court form, not grey skeleton bars
   (audit 2026-07-13: the bars read as a broken "content is loading" state). */
.fp-doc-preview {
  position: relative;
  background: #fff;
  border-radius: var(--fp-radius-lg);
  padding: 26px 28px 30px;
  box-shadow: var(--fp-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Softened twice (2026-07-14 visual, 2026-08-12 wording): the stamp is a quiet watermark and
   says "Official form" (a fact), never "court-ready" (a promise about acceptance). */
.fp-doc__stamp {
  position: absolute; right: 18px; bottom: 16px;
  transform: rotate(-6deg);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--fp-green);
  border: 1.5px solid currentColor; border-radius: 6px;
  padding: 2px 8px; opacity: .5; background: rgba(255,255,255,.55);
}

/* ── How it works ───────────────────────────────────────────────────── */
.fp-step-card { position: relative; }
.fp-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--fp-green);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}

/* ── Eligibility ────────────────────────────────────────────────────── */
.fp-elig-card h3 { margin-bottom: 14px; }
.fp-elig-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.fp-elig-list li { padding-left: 22px; position: relative; font-size: 15px; color: var(--fp-text); }
.fp-elig-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; }
.fp-elig-card--good .fp-elig-list li::before { background: var(--fp-green); }
.fp-elig-card--bad  .fp-elig-list li::before { background: #e05c52; }
.fp-elig-card--good { border-top: 3px solid var(--fp-green); }
.fp-elig-card--bad  { border-top: 3px solid #e05c52; }

/* ── Cost calculator ────────────────────────────────────────────────── */
.fp-calc { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .fp-calc { grid-template-columns: 1fr; } }
/* The form is a compact control panel: it must not stretch to the result's height
   (the dead-space regression Max flagged 2026-07-11), and since the estimate updates
   live, the submit is a quiet secondary action, not a second orange CTA. */
.fp-calc__form { align-self: start; padding: 26px 28px; }
.fp-calc__form .btn[type="submit"] {
  background: transparent; color: var(--fp-green-dark);
  border-color: var(--fp-line); font-size: 14px; padding: 10px 18px;
}
.fp-calc__form .btn[type="submit"]:hover { border-color: var(--fp-green-dark); background: var(--fp-green-light); }

.fp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.fp-calc__form .fp-field:last-of-type { margin-bottom: 8px; }
.fp-field__label { font-weight: 600; font-size: 14px; color: var(--fp-text); }
.fp-field__select {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--fp-line); border-radius: var(--fp-radius);
  font-size: 15px; font-family: var(--fp-font); color: var(--fp-text);
  background: #fff; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7785' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px;
}
.fp-toggle-row { display: flex; gap: 10px; }
.fp-toggle { display: flex; align-items: center; }
/* Radios stay in the tab order + a11y tree (display:none removed them — audit 2026-07-10);
   visually hidden, with a visible focus ring on the styled span. */
.fp-toggle input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.fp-toggle input[type="radio"]:focus-visible + span {
  outline: 2px solid var(--fp-green-dark); outline-offset: 2px;
}
/* fieldset/legend carry the question for AT — neutralize UA chrome so the layout is unchanged. */
fieldset.fp-field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
fieldset.fp-field legend { padding: 0; margin-bottom: 6px; }
.fp-toggle span {
  padding: 9px 20px; border: 1.5px solid var(--fp-line); border-radius: var(--fp-radius);
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--fp-muted);
  transition: border-color .15s, color .15s, background .15s;
}
.fp-toggle input:checked + span {
  /* green-dark: --fp-green on the mint bg was 3.85:1 (contrast sweep 2026-07-10) */
  border-color: var(--fp-green); color: var(--fp-green-dark);
  background: var(--fp-green-light);
}

.fp-calc__placeholder { color: var(--fp-muted); font-size: 15px; text-align: center; padding: 32px 0; }

/* The "Heads up" tip landing.js injects (was styled only in quiz.css — audit 2026-07-10). */
.quiz-tip {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--fp-radius);
  background: var(--fp-green-light); border: 1px solid rgba(36,133,103,.2);
  font-size: 13.5px; color: var(--fp-text);
}
.quiz-tip .i {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--fp-green); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* 5 step cards: a 3-col grid left an orphan 2-card row — go 5-across when there's room. */
@media (min-width: 1000px) {
  .fp-steps { grid-template-columns: repeat(5, 1fr); }
}

/* calc result (injected by landing.js) */
.fp-calc__result .fp-price-big { font-size: 42px; font-weight: 700; color: var(--fp-ink); }
.fp-calc__result .fp-price-per { font-size: 15px; color: var(--fp-muted); }
.fp-calc__result .fp-save-badge {
  display: inline-block; margin-top: 12px;
  /* green-dark, not green: 14px text on the mint pill needs 4.5:1 (green = 3.85:1, QA 2026-07-13) */
  background: var(--fp-green-light); color: var(--fp-green-dark);
  border-radius: var(--fp-radius-pill); padding: 4px 14px; font-weight: 700; font-size: 14px;
}
.fp-vs-card {
  margin-top: 20px; padding: 16px; border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius); background: var(--fp-cream);
}
.fp-vs-card .fp-atty-cost { font-size: 28px; font-weight: 700; color: var(--fp-ink); }
/* Calculator range display (2026-07-24): the attorney side is a sourced range, not a point
   estimate. The range is the headline, the likely figure is the supporting line. Slightly
   smaller than the old single figure because it carries more characters. */
.fp-vs-card .fp-atty-range { font-size: 24px; font-weight: 700; color: var(--fp-ink); line-height: 1.2; }
.fp-vs-card .fp-atty-likely { font-size: 14px; color: var(--fp-muted); margin-top: 3px; }
@media (max-width: 480px) {
  .fp-vs-card .fp-atty-range { font-size: 20px; }
}
/* Refine panel (2026-07-24): collapsed progressive disclosure under the three core questions.
   The instant three-question answer stays the default; this only opens if the user asks. */
.fp-refine { margin-top: 18px; border-top: 1px solid var(--fp-line); padding-top: 14px; }
.fp-refine__summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--fp-green-dark); }
.fp-refine__summary:focus-visible { outline: 2px solid var(--fp-green-dark); outline-offset: 2px; }
.fp-refine__note { font-size: 13px; color: var(--fp-muted); margin: 8px 0 14px; }
.fp-calc__privacy { font-size: 12px; color: var(--fp-muted); margin-top: 14px; }

/* ── Comparison table ───────────────────────────────────────────────── */
.fp-compare-table {
  width: 100%; border-collapse: collapse; font-size: 15px;
}
.fp-compare-table th, .fp-compare-table td {
  padding: 14px 16px; border-bottom: 1px solid var(--fp-line); text-align: left;
}
.fp-compare-table thead th { font-weight: 700; color: var(--fp-ink); background: var(--fp-cream); }
.fp-compare-table thead th:nth-child(2) { color: var(--fp-green-dark); } /* was 4.15:1 on cream */
.fp-compare-table tbody tr:last-child td { border-bottom: none; }
.fp-compare-table td:first-child { color: var(--fp-muted); font-size: 14px; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.fp-faq { display: flex; flex-direction: column; gap: 8px; }
.fp-faq__item {
  border: 1px solid var(--fp-line); border-radius: var(--fp-radius);
  background: #fff; overflow: hidden;
}
.fp-faq__item summary {
  padding: 16px 20px; font-weight: 600; font-size: 15px; color: var(--fp-ink);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.fp-faq__item summary::after { content: "+"; font-size: 20px; color: var(--fp-muted); flex-shrink: 0; margin-left: 12px; }
.fp-faq__item[open] summary::after { content: "−"; }
.fp-faq__body { padding: 0 20px 16px; color: var(--fp-muted); font-size: 15px; line-height: 1.6; }

/* ════ Hero visuals (final, Max 2026-07-14): default = the animated product frame;
   ?hero=widget = the eligibility widget (ad-landing alternate, canonical "/"). ════ */

/* eligibility widget (?hero=widget) */
.fp-widget { gap: 12px; }
.fp-widget__title { font-size: 20px; font-weight: 700; color: var(--fp-ink); text-align: center; }
.fp-widget__label { font-size: 13px; font-weight: 600; color: var(--fp-muted); }
.fp-widget__select { font: inherit; font-size: 15px; padding: 11px 12px; border: 1.5px solid var(--fp-line); border-radius: 8px; background: #fff; width: 100%; }
.fp-widget__select:focus { outline: none; border-color: var(--fp-green); }
.fp-widget__note { margin: 0; font-size: 12.5px; color: var(--fp-muted); text-align: center; }

/* the animated product frame (the DEFAULT hero visual) */
.fp-app { background: #fff; border-radius: var(--fp-radius-lg); box-shadow: var(--fp-shadow-lg); overflow: hidden; }
.fp-app__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--fp-cream); border-bottom: 1px solid var(--fp-line); }
.fp-app__bar > span { width: 10px; height: 10px; border-radius: 50%; background: var(--fp-line); }
.fp-app__title { flex: 1; text-align: center; font-size: 11.5px; color: var(--fp-muted); }
.fp-app__body { display: grid; grid-template-columns: 5fr 6fr; }
.fp-app__left { padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--fp-line); }
.fp-app__q label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fp-muted); margin-bottom: 5px; }
.fp-app__in { border: 1.5px solid var(--fp-line); border-radius: 8px; padding: 9px 10px; min-height: 38px; font-size: 14.5px; color: var(--fp-ink); }
/* The whole sequence is ONE 8s cycle looping forever (Max 2026-07-14): each element
   animates inside its own keyframe window, everything clears at ~96% and replays. */
.fp-app__type {
  display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
  width: 0; border-right: 2px solid var(--fp-green);
  animation: 8s steps(7, end) infinite;
}
.fp-app__type--1 { animation-name: fp-loop-type1; }
.fp-app__type--2 { animation-name: fp-loop-type2; }
.fp-app__type--3 { animation-name: fp-loop-type3; }
@keyframes fp-loop-type1 {
  0%, 5%    { width: 0; border-right-color: var(--fp-green); }
  16%, 94%  { width: 7ch; border-right-color: transparent; }
  96%, 100% { width: 0; border-right-color: var(--fp-green); }
}
@keyframes fp-loop-type2 {
  0%, 22%   { width: 0; border-right-color: var(--fp-green); }
  33%, 94%  { width: 7ch; border-right-color: transparent; }
  96%, 100% { width: 0; border-right-color: var(--fp-green); }
}
@keyframes fp-loop-type3 {
  0%, 39%   { width: 0; border-right-color: var(--fp-green); }
  50%, 94%  { width: 7ch; border-right-color: transparent; }
  96%, 100% { width: 0; border-right-color: var(--fp-green); }
}
.fp-app__right { position: relative; background: var(--fp-cream); overflow: hidden; }
.fp-app__page { position: relative; container-type: inline-size; }
.fp-app__right img { display: block; width: 100%; }
/* Fill positions = the EXACT AcroForm field rects of petition-b page 1 (fractions of the
   page, probed with PyMuPDF 2026-07-14): Petitioner (.189,.185), Respondent (.203,.257),
   County (.616,.256). Font scales with the page via container units (2cqi ~ the field height). */
.fp-app__fill {
  position: absolute; font-family: Georgia, "Times New Roman", serif;
  font-size: 11px; font-size: 1.9cqi; line-height: 1; color: #16357a; opacity: 0;
  animation: 8s ease infinite;
}
.fp-app__fill--1 { top: 18.6%; left: 19.2%; animation-name: fp-loop-fill1; }
.fp-app__fill--2 { top: 25.8%; left: 20.6%; animation-name: fp-loop-fill2; }
.fp-app__fill--3 { top: 25.7%; left: 61.8%; animation-name: fp-loop-fill3; }
@keyframes fp-loop-fill1 { 0%, 17% { opacity: 0; } 20%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes fp-loop-fill2 { 0%, 34% { opacity: 0; } 37%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes fp-loop-fill3 { 0%, 51% { opacity: 0; } 54%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
.fp-app__stamp {
  position: absolute; right: 6%; bottom: 8%;
  opacity: 0; transform: rotate(-6deg) scale(1.25);
  animation: fp-loop-stamp 8s cubic-bezier(.2, 1.4, .5, 1) infinite;
}
@keyframes fp-loop-stamp {
  0%, 58%   { opacity: 0; transform: rotate(-6deg) scale(1.25); }
  62%, 94%  { opacity: .5; transform: rotate(-6deg) scale(1); }
  96%, 100% { opacity: 0; transform: rotate(-6deg) scale(1.25); }
}
.fp-app__caption { padding: 10px 14px; text-align: center; font-size: 12.5px; color: var(--fp-muted); border-top: 1px solid var(--fp-line); }
/* Hover/focus: the frame is decoration, not the editor — blur it and surface a real CTA
   (Max 2026-07-14: "so that they do not try to interact with it"). */
.fp-app { position: relative; }
.fp-app__decor { transition: filter .25s ease, opacity .25s ease; }
.fp-app:hover .fp-app__decor, .fp-app:focus-within .fp-app__decor { filter: blur(4px); opacity: .55; }
.fp-app__overlay-cta {
  position: absolute; top: 50%; left: 50%; z-index: 6;
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0; pointer-events: none; white-space: nowrap;
  transition: opacity .2s ease, transform .2s ease;
}
.fp-app:hover .fp-app__overlay-cta, .fp-app:focus-within .fp-app__overlay-cta {
  opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .fp-app__type { animation: none; width: auto; border-right: 0; }
  .fp-app__fill, .fp-app__stamp { animation: none; opacity: .5; transform: rotate(-6deg); }
  .fp-app__fill { transform: none; opacity: 1; }
}


/* Wide hero for the visual-led variants (34 + 5, Max 2026-07-13: "bigger and landscape") —
   the visual column grows from the default 340px to a true half, and the app frame's right
   pane crops the tall petition page to a landscape viewport (fills keep their %-positions
   against the full page via .fp-app__page; the stamp anchors to the visible pane). */
@media (min-width: 861px) {
  /* widen the WHOLE hero row (container is 1140px) so both columns breathe — Max 2026-07-14 */
  .fp-hero--wide .fp-hero__inner { max-width: 1340px; grid-template-columns: 1fr 1.08fr; gap: 60px; }
}
.fp-hero--wide .fp-app__body { grid-template-columns: 2fr 3fr; }
.fp-hero--wide .fp-app__right { max-height: 380px; }

/* Widget variant: the widget's button IS the hero CTA — hide the duplicate on the left. */
.fp-hero--widget .fp-hero__cta { display: none; }
.fp-hero--widget .fp-hero__trust { margin-top: 30px; }
/* ════ /hero visuals ════ */

/* ── "What you'll actually use" — real product screenshots (Max 2026-07-14) ── */
.fp-shot { margin: 0; }
.fp-shot--feature { margin-top: 36px; }
.fp-shot__frame {
  border: 1px solid var(--fp-line); border-radius: var(--fp-radius-lg);
  overflow: hidden; box-shadow: var(--fp-shadow-lg); background: #fff;
}
.fp-shot__frame img { display: block; width: 100%; height: auto; }
.fp-shot figcaption { margin-top: 14px; font-size: 14.5px; color: var(--fp-muted); line-height: 1.55; max-width: 74ch; }
.fp-shot figcaption strong { color: var(--fp-ink); }
.fp-shot-row { margin-top: 36px; }
@media (max-width: 720px) { .fp-shot-row { grid-template-columns: 1fr; } }

/* ── 3-step timeline (redesign 2026-07-22: 5 cards → 3 steps + connector + time chips) ── */
.fp-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
.fp-steps3::before {           /* the connector line between the numbered dots */
  content: ""; position: absolute; top: 18px; left: 17%; right: 17%;
  height: 2px; background: var(--fp-green-light);
}
.fp-step3 { position: relative; display: flex; flex-direction: column; }
.fp-step3 .fp-step-num {
  position: relative; z-index: 1; margin: 0 auto 16px;
  box-shadow: 0 0 0 6px var(--fp-white);   /* lifts the dot off the connector line */
}
.section--cream .fp-step3 .fp-step-num { box-shadow: 0 0 0 6px var(--fp-cream); }
.fp-step3 .fp-step-card { flex: 1; text-align: center; }
.fp-step-time {
  display: inline-block; margin: 6px 0 10px; padding: 2px 10px;
  font-size: 12.5px; font-weight: 600; color: var(--fp-green-dark);
  background: var(--fp-green-light); border-radius: 999px;
}
.fp-step-after { margin-top: 26px; text-align: center; color: var(--fp-muted); font-size: 14.5px; max-width: 640px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) {
  .fp-steps3 { grid-template-columns: 1fr; }
  .fp-steps3::before { display: none; }
}

/* ── product-screenshot callout chips (skimmers read labels, not screenshots) ── */
.fp-shot__frame { position: relative; }
.fp-shot-callout {
  position: absolute; z-index: 1; padding: 5px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--fp-ink);
  background: rgba(255, 255, 255, 0.94); border: 1px solid var(--fp-line);
  border-radius: 999px; box-shadow: 0 2px 10px rgba(7, 31, 36, 0.12);
  pointer-events: none; white-space: nowrap;
}
@media (max-width: 700px) { .fp-shot-callout { display: none; } }

/* Inline text links read as links (Taras 2026-08-28): underline prose anchors in the
   landing's content sections, matching the blog articles. Buttons keep their styling;
   the header/footer sit outside .section and are untouched. */
.section p a:not(.btn), .fp-faq__body a:not(.btn) { text-decoration: underline; }