/*
 * Landing page. Builds on protect.css.
 * One colour family throughout: the hero's blue gradient carries down the page on the surfaces that matter
 * (deterrent band, rate card, icons, key numbers, closing band). Navy text, blue-tinted bands,
 * and one alert red used only where money is late. No orange, green or pink. See docs/DESIGN_SYSTEM.md.
 */

:root {
  --shield-deep: #0a1f8f;
  --shield: #1f4bff;
  --shield-bright: #12b5e5;
  --grad-shield: linear-gradient(135deg, var(--shield-deep) 0%, var(--shield) 55%, var(--shield-bright) 100%);

  --navy: #0b1b4d;
  --navy-soft: #1a2c66;
  --slate: #eef3ff;
  --rule: #d9e2f7;
  --grad-deep: linear-gradient(135deg, #06124d 0%, #0a1f8f 45%, #1f4bff 100%);
  --glow: 0 14px 40px rgba(20, 50, 160, 0.10);
  --body: #454b5c;
  --alert: #b3261e;
}

/* ---------- Hero ---------- */

.h-hero { background: var(--grad-shield); color: var(--white); padding-block: clamp(3rem, 7vw, 5.5rem); }
.h-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.h-for { font-weight: 500; color: rgba(255, 255, 255, 0.88); margin-bottom: 1rem; }
.h-hero h1 { font-size: clamp(2.6rem, 6vw, 4.75rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.h-hero-lede { margin: 1.25rem 0 0; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; max-width: 32rem; }
.h-ticks { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.6rem; font-size: 1.0625rem; font-weight: 500; }
.h-ticks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; align-items: start; }
.h-ticks li::before { content: "✓"; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--white); color: var(--shield); font-size: 0.8125rem; font-weight: 800; }
.h-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; margin-top: 2rem; }
.h-cta .google-slot { justify-content: flex-start; }
.h-cta .google-note { color: rgba(255, 255, 255, 0.85); }
.h-cta .google-error { color: var(--white); }
.h-from { margin: 0; font-size: 1rem; }
.h-from strong { font-size: 1.25rem; }
.shield { width: 100%; max-width: 480px; margin-inline: auto; filter: drop-shadow(0 24px 50px rgba(5, 15, 90, 0.45)); }

/* ---------- Bands ---------- */

.h-band { padding-block: clamp(3.25rem, 7vw, 6rem); }
.h-band-blue, .h-band-go { background: linear-gradient(180deg, var(--slate) 0%, #f7f9ff 100%); }
.h-band-night { background: var(--grad-deep); color: var(--white); }

.h-tag { display: inline-block; margin-bottom: 1rem; padding: 0.3rem 0.85rem; border-radius: var(--r-pill); background: #e1e9ff; color: var(--shield); font-size: var(--t-small); font-weight: 600; }
.h-band-blue .h-tag { background: var(--white); }
.h-tag-heat { background: #fbe9e7; color: var(--alert); }
.h-tag-light { background: rgba(255, 255, 255, 0.16); color: var(--white); }

.h-title { font-size: clamp(2rem, 4.8vw, 3.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; max-width: 24ch; color: var(--navy); text-wrap: balance; }
.h-band-night .h-title { color: var(--white); }
.h-sub { margin: 0.9rem 0 2.25rem; font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.42; color: var(--body); max-width: 42rem; }
.h-band-night .h-sub { color: #c9d1ee; }
.h-source { margin-top: 1.25rem; font-size: var(--t-small); color: #5b6172; max-width: 56rem; }
.h-mini-title { margin-top: 3rem; font-size: 1.375rem; letter-spacing: -0.025em; color: var(--navy); }

/* ---------- Bars ---------- */

.h-bar { display: flex; align-items: center; justify-content: flex-end; min-width: 4.5rem; height: 2.5rem; padding-inline: 0.9rem; border-radius: 8px; color: var(--white); }
.h-bar b { font-weight: 700; white-space: nowrap; }
.h-bar-blue, .h-bar-go { background: var(--grad-shield); }
.h-bar-heat { background: var(--alert); }
.h-bar-grey { background: #7b8296; }

.h-days { display: grid; gap: 0.75rem; margin-bottom: 2.25rem; }
.h-days-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem; align-items: center; font-weight: 500; }

/* ---------- Problem ---------- */

.h-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.h-pain, .h-law { padding: 1.5rem; border-radius: var(--r-card); background: var(--white); border: 1px solid var(--rule); box-shadow: var(--glow); }
.h-pain h3, .h-law h3 { font-size: 1.1875rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; color: var(--navy); }
.h-pain p, .h-law p { color: var(--body); }

.h-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 2.25rem; border-top: 1px solid var(--rule); }
.h-stats div { padding: 1.5rem 1.5rem 0 0; }
.h-stats div + div { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.h-stats p { margin: 0 0 0.25rem; font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; color: var(--shield); background: var(--grad-shield); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.h-stats span { color: var(--body); }

/* ---------- Solution ---------- */

.h-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.h-layers li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 15rem); gap: 1.25rem; align-items: center; padding: 1.25rem 1.5rem; border-radius: var(--r-card); background: var(--white); border: 1px solid var(--rule); box-shadow: var(--glow); }
.h-layers h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 0.2rem; color: var(--navy); }
.h-layers p { color: var(--body); margin: 0; }
.h-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 14px; background: var(--grad-shield); color: var(--white); box-shadow: 0 8px 18px rgba(31, 75, 255, 0.28); }
.h-excuse { text-align: right; }
.h-excuse span { display: block; font-size: var(--t-micro); color: #5b6172; }
.h-excuse s { font-weight: 600; font-style: italic; color: var(--navy); text-decoration: none; }

/* ---------- Deterrent ---------- */

.h-see { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.h-see li { display: flex; flex-direction: column; padding: 1.4rem; border-radius: var(--r-card); background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.20); }
.h-see .h-see-hot { background: var(--white); border-color: var(--white); color: var(--navy); }
.h-see-when { margin-bottom: 0.5rem; font-size: var(--t-small); font-weight: 600; color: #b9c8ff; }
.h-see-hot .h-see-when { color: var(--alert); }
.h-see h3 { font-size: 1.1875rem; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.h-see p:not(.h-see-when) { color: #d5dbf2; font-size: 1rem; }
.h-see-hot p:not(.h-see-when) { color: var(--body); }
.h-see-art { margin-top: auto; padding-top: 1.25rem; }
.h-see .badge { padding-right: 0.7rem; }
.h-sign { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.h-sign b { font-style: italic; font-weight: 500; font-size: 1.25rem; color: var(--white); }
.h-remind { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.h-remind span { padding: 0.2rem 0.6rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.14); font-size: var(--t-micro); font-weight: 500; }
.h-remind .is-hot { background: var(--white); color: var(--navy); }
.h-note b, .h-note span { display: block; background: var(--slate); color: var(--navy); }
.h-note b { padding: 0.7rem 0.85rem 0; border-radius: 10px 10px 0 0; font-size: 1.0625rem; font-weight: 700; }
.h-note span { padding: 0.15rem 0.85rem 0.7rem; border-radius: 0 0 10px 10px; font-size: var(--t-micro); color: var(--body); }

/* ---------- Legal rates ---------- */

.h-rates-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.h-rates { display: grid; padding: 0.5rem 1.75rem; border-radius: var(--r-tile); background: var(--grad-shield); color: var(--white); box-shadow: 0 24px 60px rgba(20, 50, 180, 0.28); }
.h-rate { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.h-rate:first-child { border-top: 0; }
.h-rate h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.h-rate p { margin: 0.15rem 0 0; color: rgba(255, 255, 255, 0.9); font-size: 0.9375rem; }
.h-rate .h-price { margin: 0; flex: none; text-align: right; color: var(--white); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.h-price small { font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, 0.9); }

.h-compare { display: flex; flex-direction: column; justify-content: center; padding: 1.75rem; border-radius: var(--r-tile); background: var(--slate); }
.h-compare h3 { font-size: 1.3125rem; line-height: 1.2; letter-spacing: -0.025em; color: var(--navy); }
.h-compare > p { margin: 0.5rem 0 1.25rem; color: var(--body); }
.h-cmp { margin-bottom: 0.75rem; }
.h-cmp span { display: block; margin-bottom: 0.25rem; font-size: var(--t-small); font-weight: 500; }
.h-compare .h-small { margin: 0.5rem 0 0; font-weight: 600; color: var(--navy); }

.h-steps { list-style: none; counter-reset: hs; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.h-steps li { counter-increment: hs; }
.h-steps li::before { content: counter(hs); display: grid; place-items: center; width: 2.125rem; height: 2.125rem; margin-bottom: 0.7rem; border-radius: 50%; background: var(--grad-shield); color: var(--white); font-weight: 700; font-size: 0.9375rem; }
.h-steps b { display: block; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--navy); }
.h-steps span { display: block; margin-top: 0.3rem; color: var(--body); font-size: 0.9375rem; }

/* ---------- Both directions ---------- */

.h-both { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
.h-both article { padding: 1.75rem; border-radius: var(--r-tile); background: var(--slate); }
.h-both .h-both-def { background: var(--grad-deep); color: var(--white); box-shadow: 0 24px 60px rgba(10, 31, 143, 0.28); }
.h-both-way { margin-bottom: 0.6rem; font-size: var(--t-small); font-weight: 600; color: var(--shield); }
.h-both-def .h-both-way { color: #b9c8ff; }
.h-both h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.15; letter-spacing: -0.03em; color: var(--navy); }
.h-both-def h3 { color: var(--white); }
.h-both p:not(.h-both-way) { margin: 0.7rem 0 0; color: var(--body); }
.h-both-def p:not(.h-both-way) { color: #dbe2fb; }
.h-both ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.5rem; font-weight: 500; }
.h-both li { display: grid; grid-template-columns: 1.35rem 1fr; gap: 0.55rem; }
.h-both li::before { content: "✓"; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--shield); color: var(--white); font-size: 0.75rem; font-weight: 800; }
.h-both-def li::before { background: var(--white); color: var(--shield); }

/* ---------- Negotiation ---------- */

.h-band-blue .call-mock { background: var(--white); border: 1px solid var(--rule); box-shadow: var(--glow); }
.h-band-blue .call-people div { background: var(--slate); }
.h-band-blue .call-bubble { background: var(--shield); }
.h-band-blue .call-private { color: var(--shield); }
.h-band-blue .neg-list li { border-color: var(--rule); }
.h-band-blue .neg-list h3 { color: var(--navy); }
.h-band-blue .neg-list p { color: var(--body); }

/* ---------- Law ---------- */

.h-law > p:first-child { margin-bottom: 0.75rem; font-size: clamp(1.875rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--shield); background: var(--grad-shield); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; }

/* ---------- Who ---------- */

.h-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.h-who article { padding: 1.4rem; border-radius: var(--r-card); background: var(--slate); }
.h-who h3 { font-size: 1.125rem; letter-spacing: -0.02em; margin-bottom: 0.4rem; color: var(--navy); }
.h-who p { color: var(--body); font-size: 1rem; }

/* ---------- Plans, FAQ ---------- */

.h-band-blue .plan { border: 1px solid var(--rule); box-shadow: var(--glow); }
.h-band-blue .plan-price { background: var(--grad-shield); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; }
.h-band-blue .plan-price span { -webkit-text-fill-color: var(--body); }
.h-band-blue .plan h3, .h-band-blue .plan-price { color: var(--navy); }

.h-faq { margin-top: 1.75rem; }
.h-faq details { border-top: 1px solid var(--rule); padding: 1.05rem 0; }
.h-faq details:last-child { border-bottom: 1px solid var(--rule); }
.h-faq summary { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; color: var(--navy); cursor: pointer; }
.h-faq p { margin: 0.6rem 0 0; color: var(--body); }

/* ---------- Close ---------- */

.h-close { background: var(--grad-shield); color: var(--white); text-align: center; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.h-close h2 { font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
.h-close > .page > p { margin: 1rem auto 0; max-width: 34rem; font-size: 1.125rem; color: rgba(255, 255, 255, 0.92); }
.h-cta-center { align-items: center; }
.h-cta-center .google-slot { justify-content: center; }
.h-cta-center .google-note { color: rgba(255, 255, 255, 0.85); }
.h-link { color: var(--white); text-decoration: underline; text-underline-offset: 0.18em; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .h-hero-grid, .h-rates-wrap, .h-both { grid-template-columns: 1fr; }
  .shield { max-width: 380px; }
  .h-see { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-steps { grid-template-columns: 1fr; gap: 1rem; }
  .h-steps li { display: grid; grid-template-columns: 2.125rem minmax(0, 1fr); column-gap: 0.85rem; }
  .h-steps li::before { grid-row: span 2; margin: 0; }
  .h-steps span { grid-column: 2; }
}

@media (max-width: 720px) {
  .h-hero { padding-block: 2.25rem 2.75rem; }
  /* Phones: the shield sits directly under the headline, before the supporting copy. */
  .h-hero-grid { gap: 0; }
  .h-hero-grid > div:first-child { display: contents; }
  .h-for, .h-hero h1 { order: -2; }
  .h-hero-art { order: -1; margin: 1.5rem 0 0.5rem; }
  .shield { max-width: 270px; }
  /* Centre the hero on phones so text and shield share one axis. */
  .h-hero-grid { text-align: center; justify-items: center; }
  .h-hero h1 { max-width: 12ch; margin-inline: auto; }
  .h-hero-lede { margin-inline: auto; }
  .h-ticks { width: 100%; margin: 1.5rem auto 0; padding: 1.1rem 1.15rem; border-radius: 18px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.20); text-align: left; gap: 0.7rem; }
  .h-cta { align-items: center; }
  .h-cta .google-slot { justify-content: center; }
  .h-cta .google-note { max-width: 20rem; }
  .h-ticks { font-size: 1rem; }
  .h-sub { margin-bottom: 1.75rem; }
  .h-three, .h-see, .h-who { grid-template-columns: 1fr; gap: 0.75rem; }
  .h-pain, .h-law, .h-see li, .h-who article { padding: 1.2rem; }
  .h-stats { grid-template-columns: 1fr; }
  .h-stats div, .h-stats div + div { padding: 1.1rem 0; border-left: 0; }
  .h-stats div + div { border-top: 1px solid var(--rule); }
  .h-days-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .h-layers li { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.9rem; padding: 1.1rem; align-items: start; }
  .h-icon { width: 2.75rem; height: 2.75rem; border-radius: 12px; }
  .h-excuse { grid-column: 2; text-align: left; }
  .h-excuse span { display: inline; margin-right: 0.35rem; }
  .h-rates { padding-inline: 1.25rem; border-radius: var(--r-card); }
  .h-rate { align-items: flex-start; gap: 0.75rem; padding: 1.1rem 0; }
  .h-rate h3 { font-size: 1.125rem; }
  .h-rate .h-price { font-size: 1.625rem; }
  .h-price small { display: block; }
  .h-compare { padding: 1.25rem; border-radius: var(--r-card); }
  .h-both article { padding: 1.35rem; border-radius: var(--r-card); }
  .h-see-art { padding-top: 1rem; }
}