/* ============================================================
   MY ESTATE REPORT — styles.css
   Design: Warm Luxury — forest green + gold + cream
   Fonts:  Cormorant Garamond (display) + DM Sans (UI)
   Mobile-first, viewport-fitted steps
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@300;400;500;700&display=swap');

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --green-900: #0F2119;
  --green-800: #1C3A2B;
  --green-700: #254D39;
  --green-600: #2F6349;
  --green-100: #E8F0EA;
  --green-50:  #F2F7F3;

  --gold-600:  #A8872E;
  --gold-500:  #C9A84C;
  --gold-400:  #DFC070;
  --gold-100:  #F5ECD4;
  --gold-50:   #FBF7EE;

  --cream-100: #FAF7F2;
  --cream-200: #F0EAE0;
  --cream-300: #E5DDD2;

  --ink-900:   #1A1A1A;
  --ink-700:   #3D3835;
  --ink-500:   #6B6560;
  --ink-300:   #9E9790;
  --ink-100:   #DDD5C8;
  --ink-50:    #EDE7DE;

  --red-600:   #B84040;
  --red-50:    #FDF0F0;
  --red-100:   #EBBFBF;

  --amber-600: #A07820;
  --amber-50:  #FDF6E3;
  --amber-100: #E8D49A;

  --teal-600:  #2A6B3C;
  --teal-50:   #EEF7F1;
  --teal-100:  #A8D4B4;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'DM Sans', system-ui, sans-serif;

  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 9999px;

  --sh-sm:   0 1px 4px rgba(15,33,25,.07), 0 1px 2px rgba(15,33,25,.04);
  --sh-md:   0 4px 16px rgba(15,33,25,.10), 0 2px 4px rgba(15,33,25,.05);
  --sh-lg:   0 8px 32px rgba(15,33,25,.12), 0 4px 8px rgba(15,33,25,.06);
  --sh-xl:   0 20px 60px rgba(15,33,25,.15), 0 8px 20px rgba(15,33,25,.08);
  --sh-gold: 0 4px 24px rgba(201,168,76,.30);
  --sh-focus:0 0 0 3px rgba(201,168,76,.35);

  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; -webkit-text-size-adjust: 100% }
body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--cream-100);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
button { font-family: var(--font-ui); cursor: pointer }
a { color: var(--green-800); text-decoration: none }

/* ── PAGE SYSTEM ─────────────────────────────────────────── */
.page { display: none }
.page.is-active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  animation: fadeIn .3s var(--ease);
}
@keyframes fadeIn    { from{opacity:0}            to{opacity:1} }
@keyframes fadeInUp  { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes stepIn    { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
@keyframes spin      { to{transform:rotate(360deg)} }

/* ── HEADER ──────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top:0; left:0; right:0;
  z-index: 200;
  height: 58px;
  background: rgba(250,247,242,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ink-50);
  display: flex;
  align-items: center;
}
.header-inner {
  width: 100%; max-width: 1100px;
  margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display:flex; align-items:center; gap:9px; text-decoration:none }
.brand-icon {
  width:30px; height:30px;
  background: var(--green-800);
  border-radius: var(--r-md);
  display:flex; align-items:center; justify-content:center;
}
.brand-icon svg { width:14px; height:14px; fill:var(--gold-500) }
.brand-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight:500;
  color: var(--green-800); letter-spacing:-.01em;
}
.brand-name em { color:var(--gold-500); font-style:normal }
.header-pill {
  display:flex; align-items:center; gap:5px;
  padding:3px 11px;
  background: var(--teal-50);
  border-radius: var(--r-pill);
  border: 1px solid var(--teal-100);
  font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color: var(--teal-600);
}
.header-pill-dot { width:5px; height:5px; border-radius:50%; background:var(--teal-600) }

/* ── HERO PAGE ───────────────────────────────────────────── */
.hero {
  flex:1;
  background: var(--green-800);
  display:flex; align-items:center; justify-content:center;
  padding: 80px 20px 48px;
  position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 80% 50%, rgba(201,168,76,.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 10% 90%, rgba(255,255,255,.025) 0%, transparent 50%);
  pointer-events:none;
}
.hero-bg-line {
  position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,.3), transparent);
}
.hero-content { position:relative; z-index:1; max-width:620px; text-align:center }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-500); margin-bottom:20px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content:''; display:block; width:20px; height:1px;
  background:var(--gold-500); opacity:.5;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 56px);
  font-weight:400; color:#fff;
  line-height:1.05; letter-spacing:-.025em;
  margin-bottom:16px;
}
.hero-title em { color:var(--gold-500); font-style:italic }
.hero-sub {
  font-size:15px; color:rgba(255,255,255,.58);
  line-height:1.8; max-width:460px;
  margin:0 auto 32px; font-weight:300;
}
.hero-note { font-size:11px; color:rgba(255,255,255,.3); margin-top:12px; letter-spacing:.04em }
.hero-trust {
  display:flex; align-items:center; justify-content:center;
  gap:24px; flex-wrap:wrap;
  margin-top:36px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
}
.hero-trust-item {
  display:flex; align-items:center; gap:6px;
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.32);
}
.hero-trust-item svg { width:11px; height:11px; fill:var(--gold-500); opacity:.6 }

/* What section */
.what-section { background:#fff; padding:52px 20px }
.what-inner { max-width:860px; margin:0 auto }
.what-eyebrow {
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-600); text-align:center; margin-bottom:8px;
}
.what-title {
  font-family:var(--font-display);
  font-size:clamp(22px,3.5vw,32px);
  font-weight:500; color:var(--green-800);
  text-align:center; margin-bottom:36px;
}
.what-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px }
.what-card {
  background:var(--cream-200);
  border:1px solid var(--ink-50);
  border-radius:var(--r-xl);
  padding:22px 18px;
  transition:box-shadow .2s var(--ease);
}
.what-card:hover { box-shadow:var(--sh-md) }
.what-icon {
  width:38px; height:38px;
  background:var(--green-800);
  border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; margin-bottom:12px;
}
.what-card-title {
  font-family:var(--font-display);
  font-size:16px; font-weight:500;
  color:var(--green-800); margin-bottom:5px;
}
.what-card p { font-size:12px; color:var(--ink-500); line-height:1.7 }
.what-cta { text-align:center; margin-top:36px }

/* ── FORM PAGE ───────────────────────────────────────────── */
#page-form { padding-top:58px }
.form-viewport {
  flex:1;
  display:flex;
  flex-direction:column;
  padding:20px;
  /* Aim to fill viewport without scrolling on each step */
}
.form-shell {
  flex:1;
  background:#fff;
  border-radius:var(--r-2xl);
  box-shadow:var(--sh-xl);
  border:1px solid var(--ink-50);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  max-width:640px;
  width:100%;
  margin:0 auto;
  /* Fill available height */
  max-height: calc(100vh - 58px - 40px);
  min-height: 520px;
}

/* Form header */
.form-head {
  background:var(--green-800);
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.form-head-title {
  font-family:var(--font-display);
  font-size:16px; font-weight:500; color:#fff;
}
.form-head-sub { font-size:10px; color:rgba(255,255,255,.4); margin-top:1px }
.form-head-count { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4) }

/* Progress */
.progress-track {
  background:var(--cream-200);
  padding:10px 24px 8px;
  border-bottom:1px solid var(--ink-50);
  flex-shrink:0;
}
.progress-steps { display:flex; align-items:flex-start }
.ps {
  flex:1; display:flex; flex-direction:column;
  align-items:center; gap:4px;
  position:relative; z-index:1;
}
.ps-dot {
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--ink-100); background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:var(--ink-300);
  transition:all .25s var(--ease);
  font-family:var(--font-ui);
}
.ps.done   .ps-dot { background:var(--gold-500); border-color:var(--gold-500); color:var(--green-900) }
.ps.active .ps-dot { background:var(--green-800); border-color:var(--green-800); color:#fff; box-shadow:0 0 0 3px rgba(28,58,43,.14) }
.ps-lbl {
  font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-300); transition:color .2s; white-space:nowrap;
}
.ps.active .ps-lbl { color:var(--green-800) }
.ps.done   .ps-lbl { color:var(--gold-600)  }
.ps-line {
  flex:1; height:2px; margin-top:9px;
  background:var(--ink-100); transition:background .3s;
  position:relative; z-index:0;
}
.ps-line.done { background:var(--gold-500) }

/* Form body — scrollable */
.form-body {
  flex:1;
  overflow-y:auto;
  padding:20px 24px;
  -webkit-overflow-scrolling:touch;
}
.step-page { display:none }
.step-page.active { display:block; animation:stepIn .32s var(--ease) }

.step-eyebrow {
  font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-600); margin-bottom:3px;
}
.step-title {
  font-family:var(--font-display);
  font-size:20px; font-weight:500;
  color:var(--green-800); margin-bottom:3px;
}
.step-desc {
  font-size:12px; color:var(--ink-500); line-height:1.6;
  margin-bottom:16px; padding-bottom:14px;
  border-bottom:1px solid var(--ink-50);
}

/* Section label */
.sec {
  display:flex; align-items:center; gap:10px;
  margin:14px 0 8px;
}
.sec span {
  font-size:9px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-300); white-space:nowrap;
}
.sec::after { content:''; flex:1; height:1px; background:var(--ink-50) }

/* Field rows */
.fr   { display:grid; gap:10px; margin-bottom:10px }
.fr-1 { grid-template-columns:1fr }
.fr-2 { grid-template-columns:1fr 1fr }
.fr-3 { grid-template-columns:1fr 1fr 1fr }

/* Fields */
.field { display:flex; flex-direction:column; gap:4px }
.field > label {
  font-size:9px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-500);
}
.field > label .req { color:var(--red-600); margin-left:2px }
.field-hint { font-size:10px; color:var(--ink-300); font-style:italic; margin-top:1px }
.field-why  { font-size:10px; color:var(--gold-600); margin-top:1px; opacity:.9 }
.field-err  { font-size:10px; color:var(--red-600); display:none; margin-top:1px }
.field.err input,
.field.err select,
.field.err textarea { border-color:var(--red-600) }
.field.err .field-err { display:block }

/* Inputs */
input[type=text], input[type=email], input[type=tel],
input[type=number], input[type=date], select, textarea {
  font-family:var(--font-ui);
  font-size:13px; color:var(--ink-900);
  background:#fff;
  border:1px solid var(--ink-100);
  border-radius:var(--r-md);
  padding:8px 12px; width:100%;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
input::placeholder { color:var(--ink-300) }
input:hover, select:hover, textarea:hover { border-color:var(--ink-300) }
input:focus, select:focus, textarea:focus { border-color:var(--green-800); box-shadow:var(--sh-focus) }
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239E9790' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:34px; cursor:pointer;
}
textarea { resize:vertical; min-height:64px; line-height:1.6 }

/* Check/Radio grid */
.cg   { display:grid; gap:6px }
.cg-2 { grid-template-columns:1fr 1fr }
.cg-3 { grid-template-columns:1fr 1fr 1fr }
.cg-4 { grid-template-columns:repeat(4,1fr) }

.ci {
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 11px;
  border:1px solid var(--ink-50);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:all .15s var(--ease);
  background:#fff; user-select:none;
}
.ci:hover { border-color:var(--green-800); background:var(--green-50) }
.ci input[type=checkbox],
.ci input[type=radio] {
  width:14px; height:14px; min-width:14px;
  border:1.5px solid var(--ink-100);
  border-radius:3px; background:#fff;
  appearance:none; -webkit-appearance:none;
  cursor:pointer; margin-top:1px;
  transition:all .15s;
  display:flex; align-items:center; justify-content:center;
  padding:0; box-shadow:none; flex-shrink:0;
}
.ci input[type=radio] { border-radius:50% }
.ci input:checked { background:var(--green-800); border-color:var(--green-800) }
.ci input[type=checkbox]:checked::after {
  content:''; display:block;
  width:7px; height:4px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
}
.ci input[type=radio]:checked::after {
  content:''; display:block;
  width:5px; height:5px;
  border-radius:50%; background:#fff; margin:auto;
}
.ci-text  { font-size:12px; color:var(--ink-900); line-height:1.35 }
.ci-sub   { font-size:10px; color:var(--ink-300); margin-top:1px }
.ci input:checked ~ .ci-text { color:var(--green-800); font-weight:500 }

/* Notice */
.notice {
  display:flex; gap:9px;
  padding:9px 13px;
  border-radius:var(--r-lg); border:1px solid;
  font-size:12px; line-height:1.6; margin-bottom:10px;
}
.notice-info { background:var(--green-50); border-color:var(--green-100); color:var(--green-700) }
.notice-icon { font-size:12px; flex-shrink:0; margin-top:1px }

/* Honeypot */
.hp { position:absolute; left:-9999px; opacity:0; pointer-events:none }

/* Form footer */
.form-foot {
  background:var(--cream-200);
  padding:12px 24px;
  border-top:1px solid var(--ink-50);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-shrink:0;
}
.foot-counter { font-size:11px; color:var(--ink-300) }
.foot-btns { display:flex; gap:7px }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-ui); font-weight:700;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:none; border-radius:var(--r-pill);
  cursor:pointer; transition:all .2s var(--ease); white-space:nowrap;
}
.btn:active { transform:scale(.97) }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important }

.btn-back {
  background:transparent; color:var(--ink-500);
  padding:8px 16px;
  border:1px solid var(--ink-100);
}
.btn-back:hover { background:#fff; border-color:var(--ink-300) }

.btn-next {
  background:var(--green-800); color:#fff;
  padding:8px 20px;
}
.btn-next:hover { background:var(--green-900); box-shadow:var(--sh-md); transform:translateY(-1px) }

.btn-submit {
  background:var(--gold-500); color:var(--green-900);
  padding:10px 24px; font-size:12px;
  box-shadow:var(--sh-gold);
}
.btn-submit:hover { background:var(--gold-600); transform:translateY(-1px); box-shadow:0 6px 28px rgba(201,168,76,.4) }

.btn-primary {
  background:var(--gold-500); color:var(--green-900);
  padding:14px 36px; font-size:13px;
  box-shadow:var(--sh-gold); border-radius:var(--r-pill);
}
.btn-primary:hover { background:var(--gold-600); transform:translateY(-2px); box-shadow:0 8px 32px rgba(201,168,76,.4) }

.btn-dark {
  background:var(--green-800); color:#fff;
  padding:12px 28px; font-size:12px;
}
.btn-dark:hover { background:var(--green-900); box-shadow:var(--sh-md); transform:translateY(-1px) }

.btn-ghost {
  background:transparent; color:rgba(255,255,255,.5);
  padding:9px 16px; font-size:11px;
  border:1px solid rgba(255,255,255,.15);
}
.btn-ghost:hover { border-color:rgba(255,255,255,.35); color:rgba(255,255,255,.75) }

.btn-upsell {
  background:var(--gold-500); color:var(--green-900);
  padding:11px 24px; font-size:12px;
  border:none; border-radius:var(--r-pill);
  box-shadow:var(--sh-gold);
}
.btn-upsell:hover { background:var(--gold-600); transform:translateY(-1px) }

/* ── LOADING PAGE ────────────────────────────────────────── */
#page-loading {
  align-items:center; justify-content:center;
  padding-top:58px;
}
.loading-wrap {
  text-align:center; padding:40px 24px;
  max-width:380px; width:100%; margin:0 auto;
}
.loading-ring {
  width:48px; height:48px;
  border:3px solid var(--ink-50);
  border-top-color:var(--green-800);
  border-radius:50%;
  animation:spin .85s linear infinite;
  margin:0 auto 20px;
}
.loading-title {
  font-family:var(--font-display);
  font-size:22px; font-weight:400;
  color:var(--green-800); margin-bottom:6px;
}
.loading-sub { font-size:12px; color:var(--ink-300); margin-bottom:24px }
.loading-steps { display:flex; flex-direction:column; gap:7px }
.ls {
  display:flex; align-items:center; gap:9px;
  padding:8px 13px; border-radius:var(--r-lg);
  background:var(--cream-200); border:1px solid var(--ink-50);
  font-size:12px; color:var(--ink-300);
  transition:all .3s var(--ease); text-align:left;
}
.ls.active { color:var(--green-800); background:var(--green-50); border-color:var(--green-100) }
.ls.done   { color:var(--teal-600); background:var(--teal-50); border-color:var(--teal-100) }
.ls-icon   { font-size:13px; width:18px; text-align:center; flex-shrink:0 }

/* ── REPORT PAGE ─────────────────────────────────────────── */
#page-report {
  align-items:stretch;
  padding-top:58px;
}
.report-outer {
  max-width:700px; width:100%;
  margin:0 auto;
  padding:24px 20px 60px;
}
.report-shell {
  background:#fff;
  border-radius:var(--r-2xl);
  box-shadow:var(--sh-xl);
  border:1px solid var(--ink-50);
  overflow:hidden;
}
.report-head {
  background:var(--green-800);
  padding:26px 28px 22px;
  position:relative; overflow:hidden;
}
.report-head::before {
  content:''; position:absolute;
  top:-50px; right:-50px;
  width:190px; height:190px;
  border-radius:50%; background:rgba(201,168,76,.05);
}
.report-head::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,.35), transparent);
}
.report-brand {
  font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-500); margin-bottom:10px;
}
.report-name {
  font-family:var(--font-display);
  font-size:clamp(18px,4vw,26px);
  font-weight:400; color:#fff; margin-bottom:3px;
}
.report-sub { font-size:11px; color:rgba(255,255,255,.42); margin-bottom:14px }
.report-meta {
  display:flex; flex-wrap:wrap; gap:12px;
  padding-top:12px; border-top:1px solid rgba(255,255,255,.09);
}
.report-meta-item { font-size:10px; color:rgba(255,255,255,.42) }
.report-meta-item strong { color:rgba(255,255,255,.72) }

.report-body { padding:22px 28px }

.stats-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin-bottom:18px;
}
.stat {
  background:var(--cream-200); border-radius:var(--r-lg);
  padding:12px 14px; border:1px solid var(--ink-50); text-align:center;
}
.stat-val {
  font-family:var(--font-display);
  font-size:26px; font-weight:500; line-height:1; margin-bottom:2px;
}
.stat-lbl { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-300) }

.ai-block {
  background:var(--cream-200); border-radius:var(--r-xl);
  padding:18px 20px; border:1px solid var(--ink-50); margin-bottom:18px;
}
.ai-label {
  font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-600); margin-bottom:9px;
  display:flex; align-items:center; gap:8px;
}
.ai-label::after { content:''; flex:1; height:1px; background:var(--ink-50) }
.ai-text {
  font-family:var(--font-display);
  font-size:15px; font-weight:400;
  color:var(--ink-700); line-height:1.85; font-style:italic;
}

.gap-section-title {
  font-family:var(--font-display);
  font-size:18px; font-weight:500;
  color:var(--green-800); margin:18px 0 12px;
}

.gap-card {
  border-radius:var(--r-lg); border:1px solid;
  overflow:hidden; margin-bottom:9px;
  transition:box-shadow .2s;
}
.gap-card:hover { box-shadow:var(--sh-md) }
.gap-card.critical { border-color:var(--red-100);   background:var(--red-50)   }
.gap-card.warning  { border-color:var(--amber-100); background:var(--amber-50) }
.gap-card.ok       { border-color:var(--teal-100);  background:var(--teal-50)  }

.gap-head {
  display:flex; align-items:center; gap:9px;
  padding:11px 15px; border-bottom:1px solid;
}
.gap-card.critical .gap-head { border-color:var(--red-100)   }
.gap-card.warning  .gap-head { border-color:var(--amber-100) }
.gap-card.ok       .gap-head { border-color:var(--teal-100)  }

.gap-icon {
  width:26px; height:26px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0;
}
.gap-card.critical .gap-icon { background:rgba(184,64,64,.1)  }
.gap-card.warning  .gap-icon { background:rgba(160,120,32,.1) }
.gap-card.ok       .gap-icon { background:rgba(42,107,60,.1)  }

.gap-title { font-family:var(--font-display); font-size:15px; font-weight:500; flex:1 }
.gap-card.critical .gap-title { color:var(--red-600)   }
.gap-card.warning  .gap-title { color:var(--amber-600) }
.gap-card.ok       .gap-title { color:var(--teal-600)  }

.gap-status {
  font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 8px; border-radius:var(--r-pill);
}
.gap-card.critical .gap-status { background:rgba(184,64,64,.1); color:var(--red-600)   }
.gap-card.warning  .gap-status { background:rgba(160,120,32,.1); color:var(--amber-600) }
.gap-card.ok       .gap-status { background:rgba(42,107,60,.1);  color:var(--teal-600)  }

.gap-body { padding:12px 15px }
.gap-desc { font-size:12px; color:var(--ink-500); line-height:1.7; margin-bottom:9px }
.gap-consequence {
  display:flex; gap:8px;
  background:rgba(0,0,0,.03); border-radius:var(--r-md);
  padding:8px 11px; margin-bottom:9px;
}
.gap-con-icon { font-size:11px; flex-shrink:0; margin-top:1px }
.gap-con-text { font-size:11px; color:var(--ink-500); line-height:1.65; font-style:italic }
.gap-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px; border-top:1px solid rgba(0,0,0,.05);
}
.gap-cost-lbl { font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-300) }
.gap-cost-val { font-family:var(--font-display); font-size:15px; font-weight:500; color:var(--green-800) }

/* Upsell */
.upsell {
  background:linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 100%);
  border-radius:var(--r-xl);
  padding:26px 26px 22px;
  margin:18px 0;
  position:relative; overflow:hidden;
}
.upsell::before {
  content:''; position:absolute;
  top:-40px; right:-40px;
  width:150px; height:150px;
  border-radius:50%; background:rgba(201,168,76,.07);
}
.upsell-eyebrow {
  font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-500); margin-bottom:7px;
}
.upsell-title {
  font-family:var(--font-display);
  font-size:clamp(17px,3vw,21px); font-weight:500;
  color:#fff; line-height:1.25; margin-bottom:13px;
}
.upsell-features { list-style:none; display:flex; flex-direction:column; gap:6px; margin-bottom:16px }
.upsell-feat { display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.72) }
.upsell-check {
  width:14px; height:14px; min-width:14px; border-radius:50%;
  background:var(--gold-500);
  display:flex; align-items:center; justify-content:center;
}
.upsell-check svg { width:7px; height:7px; fill:var(--green-900) }
.upsell-price-row { display:flex; align-items:baseline; gap:9px; margin-bottom:16px }
.upsell-price { font-family:var(--font-display); font-size:40px; font-weight:400; color:var(--gold-500); line-height:1 }
.upsell-price-note { font-size:11px; color:rgba(255,255,255,.38) }
.upsell-btns { display:flex; gap:9px; flex-wrap:wrap }

/* Attorney */
.attorney-section {
  background:#fff; border-radius:var(--r-xl);
  border:1px solid var(--ink-50); padding:18px; margin:18px 0;
}
.attorney-section-title {
  font-family:var(--font-display);
  font-size:18px; font-weight:500;
  color:var(--green-800); margin-bottom:3px;
}
.attorney-section-sub { font-size:12px; color:var(--ink-500); margin-bottom:14px }
.attorney-card {
  display:flex; align-items:flex-start; gap:13px;
  padding:14px; background:var(--cream-200);
  border-radius:var(--r-lg); border:1px solid var(--ink-50);
  transition:all .2s;
}
.attorney-card:hover { border-color:var(--green-800); box-shadow:var(--sh-md) }
.attorney-avatar {
  width:46px; height:46px; min-width:46px;
  border-radius:var(--r-lg); background:var(--green-800);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:18px; color:var(--gold-500);
}
.attorney-name {
  font-family:var(--font-display);
  font-size:16px; font-weight:500;
  color:var(--green-800); margin-bottom:2px;
}
.attorney-firm  { font-size:11px; color:var(--ink-500); margin-bottom:7px }
.attorney-tags  { display:flex; flex-wrap:wrap; gap:4px }
.tag {
  padding:2px 8px; border-radius:var(--r-pill);
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--green-50); color:var(--green-800); border:1px solid var(--green-100);
}
.attorney-note { font-size:11px; color:var(--ink-300); margin-top:11px; text-align:center; line-height:1.6 }

/* Calendar embed */
.calendar-section {
  background:#fff; border-radius:var(--r-xl);
  border:1px solid var(--ink-50); overflow:hidden; margin:18px 0;
}
.calendar-head {
  background:var(--cream-200);
  padding:14px 18px; border-bottom:1px solid var(--ink-50);
}
.calendar-head-title {
  font-family:var(--font-display);
  font-size:17px; font-weight:500;
  color:var(--green-800); margin-bottom:2px;
}
.calendar-head-sub { font-size:11px; color:var(--ink-500) }
.calendar-embed-wrap {
  width:100%; min-height:500px;
  position:relative; background:var(--cream-100);
}
.calendar-embed-wrap iframe { width:100%; height:500px; border:none; display:block }
.cal-loader {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; background:var(--cream-100);
}
.cal-loader-ring {
  width:32px; height:32px;
  border:2px solid var(--ink-50);
  border-top-color:var(--green-800);
  border-radius:50%;
  animation:spin .85s linear infinite;
}
.cal-loader-text { font-size:11px; color:var(--ink-300) }

/* ── THANK YOU PAGE ──────────────────────────────────────── */
#page-thankyou {
  align-items:center; justify-content:center;
  padding-top:58px;
}
.ty-wrap {
  max-width:500px; width:100%;
  margin:0 auto; padding:40px 24px;
  text-align:center;
}
.ty-icon {
  width:56px; height:56px; border-radius:50%;
  background:var(--gold-50); border:2px solid var(--gold-100);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin:0 auto 18px;
}
.ty-title {
  font-family:var(--font-display);
  font-size:26px; font-weight:400;
  color:var(--green-800); margin-bottom:7px;
}
.ty-sub { font-size:13px; color:var(--ink-500); line-height:1.8; margin-bottom:24px }
.ty-summary {
  background:var(--cream-200); border-radius:var(--r-xl);
  border:1px solid var(--ink-50); padding:16px 18px; text-align:left;
}
.ty-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--ink-50); font-size:12px;
}
.ty-row:last-child { border-bottom:none }
.ty-row-lbl { color:var(--ink-500) }
.ty-row-val { font-weight:700; color:var(--ink-900) }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
  background:var(--green-900);
  padding:24px 20px; text-align:center;
}
.site-footer p { font-size:10px; color:rgba(255,255,255,.28); line-height:1.8 }
.site-footer a { color:rgba(255,255,255,.45) }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:600px) {
  .fr-2, .fr-3   { grid-template-columns:1fr }
  .cg-3, .cg-4   { grid-template-columns:1fr 1fr }
  .cg-2           { grid-template-columns:1fr }
  .form-body      { padding:16px 18px }
  .form-foot      { padding:10px 18px }
  .form-head      { padding:12px 18px }
  .report-body    { padding:16px 18px }
  .report-head    { padding:20px 18px }
  .stats-row      { grid-template-columns:1fr 1fr 1fr }
  .upsell         { padding:20px 16px }
  .ps-lbl         { display:none }
  .hero-trust     { gap:14px }
  .what-grid      { grid-template-columns:1fr 1fr }
  .upsell-btns    { flex-direction:column }
  .form-shell     { max-height:calc(100vh - 58px - 32px) }
}
@media (max-width:380px) {
  .stats-row       { grid-template-columns:1fr }
  .what-grid       { grid-template-columns:1fr }
  .cg-3, .cg-4    { grid-template-columns:1fr }
}
@media print {
  .site-header, .btn, .upsell,
  .calendar-section, .form-foot { display:none !important }
  body { background:#fff }
  .report-shell { box-shadow:none; border:none }
  .gap-card { break-inside:avoid }
}