/* Estate Risk Snapshot: Plan Ahead
   2026-10-28 (Tim: the Snapshot "looks like a different site"): the site's own design. The header, footer, fonts and
   tokens (--pal-*) come from the site itself (frame.py, pal-frame.php); this file styles the Snapshot's own parts with
   those tokens: the red band under the header (the site's pal-hero, so the header turns red over it as on every page),
   white cards with the site's edge and its red top line, Inter text, display headings, red buttons. Every var() carries
   the site's value as its fallback, so the page reads the same if the frame is missing. */

body.snap-body { margin: 0; background: #fff; color: var(--pal-text, #2F3A45);
  font: 400 17px/1.6 var(--pal-font-text, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased; }
.snap *, .snap-band *, .site-header * { box-sizing: border-box; }
:where(.snap, .snap-band) :where(p, h1, h2, ul, form) { margin: 0; }  /* zero weight: every rule below wins */
.snap img { max-width: 100%; height: auto; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }
[hidden] { display: none !important; }

.demo-strip { background: var(--pal-ink, #212528); color: #fff; text-align: center; font: 500 13px/1.4 var(--pal-font-text, Inter, sans-serif);
  padding: 6px 14px; }

/* ---------- plain header, only when the site's frame is missing ---------- */
.site-header { background: #fff; border-top: 5px solid var(--pal-red, #A3071F); border-bottom: 1px solid var(--pal-line, #DFE5EE); }
.lockup { display: flex; align-items: center; gap: 12px; min-height: 72px; }
.mark { display: block; }
.wordmark-name { font: 600 24px/1 var(--pal-font-word, "Cinzel", Georgia, serif); letter-spacing: 1.5px; color: var(--pal-mark, #D13141); }

/* ---------- the band: the site's red hero, Snapshot-sized (the quiz stays near the top) ---------- */
.snap-band { background: var(--pal-red, #A3071F); color: #fff; }
.snap-band.pal-hero .pal-hero__in { max-width: 720px; margin: 0 auto; padding: 28px 20px 64px; }
.snap-band--small.pal-hero .pal-hero__in { padding-bottom: 56px; }
.snap-band .eyebrow { font: 600 14px/1.3 var(--pal-font-text, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase;
  color: var(--pal-on-red, #FBE3E6); margin-bottom: 14px; }
.snap-band .eyebrow .sep { padding: 0 6px; }
.snap-band.pal-hero h1 { font: 800 clamp(30px, 4.4vw, 44px)/1.08 var(--pal-font-display, Georgia, serif); letter-spacing: -.01em;
  color: #fff; max-width: 22ch; text-wrap: balance; }
.snap-band h1 em { font-style: italic; }
.snap-band .sub { margin-top: 16px; font: 400 19px/1.5 var(--pal-font-text, Inter, sans-serif); color: #fff; max-width: 46ch; }
.snap-band .sub strong { font-weight: 700; }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font: 600 15px/1.3 var(--pal-font-text, Inter, sans-serif);
  color: #fff; }
.trust-row span::before { content: "✓"; margin-right: 7px; color: var(--pal-on-red, #FBE3E6); }
.snap-band .btn { margin-top: 20px; }
.snap-band .btn.primary, .snap-band .btn.accent { background: #fff; border-color: #fff; color: var(--pal-red, #A3071F); }
.snap-band .btn.primary:hover, .snap-band .btn.accent:hover { background: var(--pal-on-red, #FBE3E6); border-color: var(--pal-on-red, #FBE3E6); }
.snap-band .dev-banner { margin: 14px 0 0; }

/* ---------- content column; the first card hangs over the band's lower edge, as the site's hero cards do ---------- */
.snap { padding-top: 0; padding-bottom: 56px; }
.snap > .card:first-child, .snap > [hidden]:first-child + .card { margin-top: -36px; }
.card { position: relative; background: #fff; border-radius: var(--pal-r-card, 8px);
  box-shadow: var(--pal-e1, 0 0 0 1px #DFE5EE); padding: 28px; margin: 0 0 20px; }
.dossier, .cta-card, .bump-card, #booked-banner {
  box-shadow: var(--pal-e2, inset 0 4px 0 #A3071F, 0 1px 0 #DFE5EE, 0 8px 24px rgba(7,58,112,.08)); }
.dossier-tab { font: 700 13px/1.2 var(--pal-font-text, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase;
  color: var(--pal-navy, #073A70); margin: 4px 0 16px; }
.dossier-tab .tab-state { color: var(--pal-red, #A3071F); }

/* ---------- quiz ---------- */
#quiz-progress { height: 6px; background: var(--pal-mist, #EEF3F9); border-radius: 3px; margin-bottom: 26px; overflow: hidden; }
#quiz-bar { height: 6px; width: 3%; background: var(--pal-red, #A3071F); border-radius: 3px; transition: width .35s cubic-bezier(.4,0,.2,1); }
#quiz-step h2 { font: 800 26px/1.15 var(--pal-font-display, Georgia, serif); color: var(--pal-ink, #212528); margin-bottom: 20px;
  text-wrap: balance; }
.step-in { animation: step-in .24s ease-out; }
@keyframes step-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.choices { display: grid; gap: 10px; }
.choice { position: relative; display: flex; align-items: center; min-height: 56px; width: 100%; text-align: left;
  padding: 12px 18px 12px 50px; font: 600 17px/1.35 var(--pal-font-text, Inter, sans-serif); color: var(--pal-ink, #212528);
  border: 1.5px solid var(--pal-line, #DFE5EE); border-radius: var(--pal-r-control, 4px); background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s; }
.choice::before { content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px;
  border: 2px solid var(--pal-field, #6B7788); border-radius: 50%; transition: border-color .15s, background .15s, box-shadow .15s; }
.choice:hover { border-color: var(--pal-navy, #073A70); background: var(--pal-mist, #EEF3F9); }
.choice:hover::before { border-color: var(--pal-navy, #073A70); background: var(--pal-navy, #073A70); box-shadow: inset 0 0 0 3px #fff; }
.choice:focus-visible { outline: 3px solid var(--pal-blue, #0C59AB); outline-offset: 2px; }
.nav-row { margin-top: 16px; }
#quiz-step h2:has(+ .q-hint) { margin-bottom: 6px; }
.q-hint { color: var(--pal-slate, #4B5563); font-size: 16px; margin: 0 0 18px; }
/* a picked answer (coming back to a question), and the checklists: square boxes, several picks, then Continue */
.choice.picked { border-color: var(--pal-navy, #073A70); background: var(--pal-mist, #EEF3F9); }
.choice.picked::before { border-color: var(--pal-navy, #073A70); background: var(--pal-navy, #073A70); box-shadow: inset 0 0 0 3px #fff; }
.choice.check::before { border-radius: 3px; }
.choice.check:hover::before { background: #fff; box-shadow: none; }
.choice.check.picked::before { background: var(--pal-navy, #073A70); box-shadow: none; }
.choice.check.picked::after { content: ""; position: absolute; left: 24px; top: 50%; width: 5px; height: 10px; margin-top: -7px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ranked .choice::before, .ranked .choice.picked::after { display: none; }
.ranked .rank { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--pal-field, #6B7788); font: 700 13px/20px var(--pal-font-text, Inter, sans-serif); text-align: center; color: #fff; }
.ranked .choice.picked .rank { background: var(--pal-navy, #073A70); border-color: var(--pal-navy, #073A70); }
.multi-go { margin-top: 18px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.skip-link { display: inline-block; margin-top: 14px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font: 600 15px/1.3 var(--pal-font-text, Inter, sans-serif); color: var(--pal-slate, #4B5563); text-decoration: underline; }
.skip-link:hover { color: var(--pal-ink, #212528); }

/* ---------- buttons: the site's .pal-btn ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border: 2px solid var(--pal-red, #A3071F); border-radius: var(--pal-r-control, 4px); background: var(--pal-red, #A3071F); color: #fff;
  font: 700 17px/1.1 var(--pal-font-text, Inter, sans-serif); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--pal-red-deep, #86051A); border-color: var(--pal-red-deep, #86051A); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--pal-slate, #4B5563); padding-left: 0; min-height: 44px; }
.btn.ghost:hover { background: transparent; border-color: transparent; color: var(--pal-ink, #212528); text-decoration: underline; }
.btn.big { width: 100%; min-height: 56px; text-align: center; }
.btn:focus-visible { outline: 3px solid var(--pal-blue, #0C59AB); outline-offset: 2px; }

/* ---------- contact gate: the site's form card ---------- */
.gate h2 { font: 800 26px/1.15 var(--pal-font-display, Georgia, serif); color: var(--pal-ink, #212528); margin-bottom: 8px; }
.gate label { display: block; margin: 18px 0 6px; font: 600 16px/1.3 var(--pal-font-text, Inter, sans-serif); color: var(--pal-ink, #212528); }
.gate input { display: block; width: 100%; min-height: 52px; margin-top: 6px; padding: 12px 14px; font: 400 17px/1.4 var(--pal-font-text, Inter, sans-serif);
  color: var(--pal-ink, #212528); border: 1.5px solid var(--pal-field, #6B7788); border-radius: var(--pal-r-control, 4px); background: #fff; }
.gate input:focus { outline: 3px solid var(--pal-blue, #0C59AB); outline-offset: 1px; border-color: var(--pal-blue, #0C59AB); }
.gate .btn { margin-top: 20px; }
.gate .name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.gate .opt-in { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; font: 400 15px/1.45 var(--pal-font-text, Inter, sans-serif);
  color: var(--pal-text, #2F3A45); cursor: pointer; }
.gate .opt-in input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; flex: none; accent-color: var(--pal-navy, #073A70); }
.fine a { color: var(--pal-navy, #073A70); }
.fine { font-size: 14px; line-height: 1.5; color: var(--pal-slate, #4B5563); margin-top: 12px; }
.error { color: var(--pal-red-deep, #86051A); font-weight: 600; margin-top: 10px; }

/* ---------- results ---------- */
.pill { display: inline-block; font: 700 12px/1.2 var(--pal-font-text, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--pal-r-control, 4px); margin-bottom: 12px; }
.pill.critical { color: var(--pal-red-deep, #86051A); background: var(--pal-on-red, #FBE3E6); }
.pill.high { color: #7A4A0B; background: #FBF1E2; }
.pill.medium, .pill.low { color: var(--pal-navy, #073A70); background: var(--pal-mist, #EEF3F9); }
.exposure { border-left: 4px solid var(--pal-line, #DFE5EE); }
.exposure.critical { border-left-color: var(--pal-red, #A3071F); }
.exposure.high { border-left-color: #C98A2E; }
.exposure.medium { border-left-color: var(--pal-navy, #073A70); }
.exposure h2 { font: 800 24px/1.18 var(--pal-font-display, Georgia, serif); color: var(--pal-ink, #212528); margin-bottom: 10px; }
.more-note { color: var(--pal-slate, #4B5563); font-size: 15px; margin: 0 0 20px; }
.led-by { display: inline-block; margin: 0 0 12px 8px; font: 600 13px/1.2 var(--pal-font-text, Inter, sans-serif); color: var(--pal-slate, #4B5563); }
/* the paths after the results: business owners, parents, adult children */
.path-card h2 { font: 800 22px/1.2 var(--pal-font-display, Georgia, serif); color: var(--pal-ink, #212528); margin-bottom: 8px; }
.path-card .btn.ghost { color: var(--pal-navy, #073A70); text-decoration: underline; margin-top: 6px; }
.share-row { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.share-row input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; font: 400 15px/1.3 var(--pal-font-text, Inter, sans-serif);
  border: 1.5px solid var(--pal-line, #DFE5EE); border-radius: var(--pal-r-control, 4px); color: var(--pal-text, #2F3A45); background: var(--pal-mist, #EEF3F9); }
.share-row .btn.ghost { padding: 0 12px; color: var(--pal-navy, #073A70); white-space: nowrap; }

/* ---------- call-to-action cards ---------- */
.cta-card h2, .bump-card h2, #booked-banner h2 { font: 800 26px/1.15 var(--pal-font-display, Georgia, serif); color: var(--pal-ink, #212528);
  margin-bottom: 10px; }
.cta-card .btn { margin-top: 18px; }
.bump-card ul { margin: 14px 0 18px; padding: 0; list-style: none; }
.bump-card li { margin: 8px 0; padding-left: 26px; position: relative; }
.bump-card li::before { content: "✓"; position: absolute; left: 2px; color: var(--pal-red, #A3071F); font-weight: 700; }
.bump-card .price { float: right; font: 800 26px/1 var(--pal-font-display, Georgia, serif); color: var(--pal-red, #A3071F); }
.dev-banner { background: #FDF6E3; border: 1px solid #E8D9A8; color: #6B560C; padding: 9px 14px; border-radius: var(--pal-r-control, 4px);
  font-size: 15px; }

/* ---------- the Snapshot's own legal lines, above the site footer ---------- */
.snap-notes { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--pal-line, #DFE5EE); font-size: 14px; line-height: 1.55;
  color: var(--pal-slate, #4B5563); }
.snap-notes p + p { margin-top: 8px; }
.snap-notes a { color: var(--pal-navy, #073A70); }

/* ---------- booking page (Calendly inline) ---------- */
.calendly-card { padding: 12px 12px 16px; }
.calendly-card .fine { padding: 0 10px; }
.calendly-card .fine a { color: var(--pal-navy, #073A70); }
#booked-banner { animation: step-in .3s ease-out; }
#booked-banner form { margin-top: 14px; }

/* ---------- phones + reduced motion ---------- */
@media (max-width: 560px) {
  .snap-band.pal-hero .pal-hero__in { padding: 22px 16px 56px; }
  .snap-band .sub { font-size: 17px; }
  .wrap { padding: 0 16px; }
  .card { padding: 22px 18px; }
  #quiz-step h2, .gate h2, .cta-card h2, .bump-card h2 { font-size: 23px; }
  .bump-card .price { float: none; display: block; margin-bottom: 6px; }
  .gate .name-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .snap *, .snap-band * { animation: none !important; transition: none !important; }
}

/* The Gap and Price Check mockup (results.html): the plan and its price, and a mockup's open points marked. */
.price-card { box-shadow: var(--pal-e2, inset 0 4px 0 #A3071F, 0 1px 0 #DFE5EE, 0 8px 24px rgba(7,58,112,.08)); }
.price-card .price-eyebrow { font: 700 13px/1.2 var(--pal-font-text, Inter, sans-serif); letter-spacing: .08em;
  text-transform: uppercase; color: var(--pal-red, #A3071F); margin: 0 0 8px; }
.price-card h3 { font: 700 17px/1.3 var(--pal-font-text, Inter, sans-serif); color: var(--pal-navy, #073A70); margin: 20px 0 6px; }
.price-card ul { margin: 0 0 8px; padding-left: 22px; }
.price-card .price-total, .price-card .price-hold { font-weight: 600; color: var(--pal-ink, #212528); }
.price-card .price-cap { border-left: 3px solid var(--pal-line, #DFE5EE); padding-left: 12px; }
.price-card .btn.big { margin: 6px 0 4px; }
mark.erik { background: #fff3a0; color: inherit; padding: 0 2px; }
.cons-switch { font-size: 15px; color: var(--pal-text, #2F3A45); background: #fff3a0; padding: 8px 12px; border-radius: 4px; margin: 0 0 16px; }
.exposure .consequence { margin-top: 10px; }
.rest-card ul { margin: 0; padding-left: 22px; } .rest-card li { margin: 6px 0; }
.price-card .atty-card { display: flex; align-items: center; gap: 14px; margin: 16px 0 6px; }
.price-card .atty-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.price-card .atty-card p { margin: 0; }
.btn.secondary.share-btn { display: inline-block; border: 1.5px solid var(--pal-navy, #073A70); color: var(--pal-navy, #073A70);
  background: #fff; padding: 10px 16px; border-radius: var(--pal-r-control, 4px); text-decoration: none; font-weight: 600; }


/* the contact gate's box only bots fill in (main.py, bot_reason): off screen, never focused by Tab */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }