/* =============================================================================
   GetLawyersNow -- one stylesheet for the whole property.

   A dark page with one light island in it: the form. That is the shape the
   category's best-performing landers use, and it does real work here -- a white
   card on a near-black ground is the single highest-contrast thing on the
   screen, so the eye lands on the form without the page having to shout.

   No decorative images: the photography is content, and every other graphic is
   inline SVG, a CSS gradient or a noise tile. A second practice area needs no
   new CSS -- nothing below is written per-page.
   ============================================================================= */

/* ---------------------------------------------------------------- 1. tokens */

html {
  /* Painted explicitly rather than left to a browser's dark mode, which would
     otherwise invert the form controls inside the light card. */
  color-scheme: light;
}

:root {
  /* Named colours. Somebody chose these; nobody chose "--accent".

     A white page with three dark surfaces cut into it: the form's header
     strip, the one photographic band, and the footer. The five
     surface-relative tokens below are re-pointed inside those scopes, so each
     rule is written once and reads correctly on both grounds. */
  --paper: #ffffff;        /* the page */
  --paper-2: #f3f4f5;      /* the alternating band */

  /* Text, as read on the page. Re-pointed on the dark surfaces. */
  --heading: #121417;      /* 17.7:1 on white */
  --body-text: #4a4e55;    /* 8.5:1 */
  --muted: #6b7077;        /* 5.3:1 */
  --faint2: #7d828a;       /* 4.5:1 */
  --hairline: #e3e5e7;

  /* The dark surfaces. */
  --night: #16191d;
  --night-2: #1e2228;
  --night-4: #15181c;      /* the footer */

  /* Green, twice over.

     --accent is the one that has to work AS TEXT, so on the white page it is
     the deep tint and the dark scopes re-point it to the bright one. --call is
     the bright green and it is a FILL only: it carries near-black type, never
     white, because white on #2fbf71 is 2.4:1 and fails outright. Reserving it
     for the call actions is also what makes them findable -- the brightest
     thing on the page is always the phone. */
  --accent: #0f7a47;       /* 5.4:1 on white, and takes white text */
  --accent-lift: #0a5c35;
  --accent-ink: #0f7a47;
  --accent-ink-deep: #0a5c35;

  /* The call fill, deep enough to carry WHITE type.
     #2fbf71 is the brighter tint this started as, and white on it is 2.38:1 --
     a fail even against the 3:1 large-text bar, let alone the 4.5:1 the 15px
     header pill needs. #16874f takes white at 4.55:1. The bright tint did not
     go to waste: it is the halo below, so the glow is now LIGHTER than the
     control it surrounds, which is what a glow should be. */
  --call: #16874f;
  --call-hover: #0f6b3e;

  /* The glow on the call controls: a wide diffuse shadow that reads as light
     falling on the page. The click-to-call buttons animate a second ring out
     from underneath it -- see `call-pulse` -- while the bottom bar keeps the
     glow alone and does not pulse. */
  --call-glow: 0 6px 18px -2px rgb(47 191 113 / 42%);
  --call-glow-strong: 0 8px 24px -2px rgb(47 191 113 / 60%);
  --call-edge: #0f6b3e;    /* the deep fill is 4.55:1 against white and needs
                              no boundary to be seen; this just sharpens it */

  /* The form card. */
  --sheet: #ffffff;
  --wash: #f2f3f4;
  --ink: #121214;
  --graphite: #4a4a4e;
  --quiet: #6e6e73;
  --faint: #78787d;
  --rule: #e2e3e5;

  /* Two noise tiles. The same grain that lifts a dark surface reads as dirt on
     a white one, so the light tile is under a third the strength. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.16'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");

  --font: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --r: 3px;
  --r-lg: 10px;            /* photographs and the form card only */
  --sec-y: clamp(56px, 7vw, 104px);
  --header-h: 64px;
  --bar-h: 66px;
}

/* The surfaces that stay dark. Re-pointing the surface-relative tokens
   here is what lets .faq summary, .signals li, .footer-title and the rest keep
   one rule each instead of one rule plus a dark-surface override.

   EVERY dark surface has to be in this list. .call-bar-alt is dark and was
   not, so its --heading resolved to the page's near-black and it rendered
   black on black. verify.js now measures contrast on it. */
.panel-head,
.site-footer,
.section--photo,
.call-bar-alt {
  --heading: #ffffff;
  --body-text: #d6d9de;
  --muted: #9ba1ab;
  --faint2: #868d99;
  --hairline: #343a42;
  --accent: #2fbf71;
}

/* ------------------------------------------------------------------ 2. base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--header-h) + 16px);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain-light);
  color: var(--body-text);
  font: 400 1rem/1.65 var(--font);
  /* clip, not hidden: overflow-x:hidden turns the body into a scroll container,
     which breaks position:sticky for the header and the form panel. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The call bar is fixed and always present, so the page has to end above it. */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--heading);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol,
dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

dd,
dt {
  margin: 0;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-lift);
}

/* Presentation attributes on the sprite's root <svg> do not reach a <use>
   shadow tree -- only inherited CSS does. Without this every glyph renders as a
   filled black shape.

   This rule is also why the brand mark carries fill/stroke on its <path> and
   not on its <svg>: a CSS rule beats a presentation attribute on the SAME
   element, but loses to one on a child. */
svg {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* The UA's [hidden] rule lives in the user-agent origin, so ANY author rule
   that sets `display` beats it -- and .button sets display: inline-flex.
   lander.js hides the Back button with the hidden attribute on step 1, and
   generate.js ships every clarification hidden, so this has to win outright. */
[hidden] {
  display: none !important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 12px 18px;
  background: var(--heading);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  color: #ffffff;
}

/* ---------------------------------------------------------------- 3. layout */

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 34px);
}

.wrap--narrow {
  max-width: 820px;
}

.section {
  padding: var(--sec-y) 0;
}

.section--sheet {
  background-color: var(--paper-2);
  background-image: var(--grain-light);
  border-block: 1px solid var(--hairline);
}

.section--ink {
  background-color: var(--paper-2);
  background-image: var(--grain-light);
}

.section-head {
  margin-bottom: clamp(30px, 4vw, 48px);
  max-width: 46ch;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-head h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
}

.section-head--wide {
  max-width: 64ch;
}

.section-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 56ch;
}

.fine {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--faint2);
  font-size: 0.8125rem;
  line-height: 1.65;
  max-width: 70ch;
}

/* ---------------------------------------------------------------- 4. header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--heading);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.wordmark-mark {
  display: flex;
  color: var(--accent);
}

.wordmark-label {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.tel-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--call-edge);
  border-radius: 999px;
  background: var(--call);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease;
}

.tel-button:hover {
  background: var(--call-hover);
  color: #ffffff;
}

/* "GetLawyersNow" plus a formatted ten-digit number does not fit beside itself
   at 375px. The number is already the whole of the bar pinned to the bottom of
   the same screen, so the header says what the button does instead. */
.tel-short {
  display: none;
}

@media (max-width: 430px) {
  .wordmark {
    font-size: 1rem;
    gap: 8px;
  }

  .tel-button {
    padding: 10px 15px;
    font-size: 0.875rem;
  }

  .tel-full {
    display: none;
  }

  .tel-short {
    display: inline;
  }
}

/* ------------------------------------------------------------ 5. breadcrumb */

.breadcrumb {
  padding: 18px 0 0;
  font-size: 0.8125rem;
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  color: var(--faint2);
}

/* ------------------------------------------------------------------ 6. hero */

.hero {
  padding: clamp(30px, 4vw, 60px) 0 var(--sec-y);
}

.hero-grid {
  display: grid;
  gap: clamp(34px, 4vw, 56px);
}

@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 470px);
    align-items: start;
  }
}

.hed {
  margin: 0 0 20px;
  font-size: clamp(2.3rem, 5.6vw, 3.9rem);
}

.hed__a,
.hed__b {
  display: block;
}

/* The second line carries the colour. The reference this is modelled on sets
   both lines at the same size, but its second line is three words; ours is a
   full sentence and at full size it wraps to two lines and outweighs the
   question above it. Seven tenths keeps it emphatic and keeps the headline
   three lines instead of four. */
.hed__b {
  margin-top: 0.12em;
  color: var(--accent);
  font-size: 0.7em;
  line-height: 1.1;
}

.lead {
  max-width: 54ch;
  color: var(--body-text);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
}

.hero-checks {
  display: grid;
  gap: 12px;
  margin: 26px 0 30px;
}

.hero-checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--heading);
  font-size: 1.0625rem;
  font-weight: 600;
}

.hero-checks .check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
}

.hero-checks .check svg {
  stroke-width: 2.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-figure {
  margin: 34px 0 0;
}

.hero-figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 32%;
  border-radius: var(--r-lg);
}

@media (min-width: 1000px) {
  .hero-figure img {
    aspect-ratio: 21 / 9;
  }
}

.hero-figure figcaption {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--hairline);
  color: var(--faint2);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.disclosure {
  display: flex;
  gap: 11px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--faint2);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.disclosure svg {
  margin-top: 3px;
  color: var(--muted);
}

/* --------------------------------------------------------------- 7. buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font: 700 0.9375rem/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* The form's own action. Inside the white card, so it is the dark red. */
.button-primary {
  background: var(--accent-ink);
  color: var(--sheet);
}

.button-primary:hover:not(:disabled) {
  background: var(--accent-ink-deep);
  color: var(--sheet);
}

.button-call {
  background: var(--call);
  border-color: var(--call-edge);
  color: #ffffff;
}

.button-call:hover {
  background: var(--call-hover);
  color: #ffffff;
}

.button-call--hero {
  padding: 17px 30px;
  font-size: 1.0625rem;
}

.button-ghost {
  background: transparent;
  border-color: var(--heading);
  color: var(--heading);
}

.button-ghost:hover {
  background: var(--heading);
  color: var(--paper);
}

.button-secondary {
  background: var(--sheet);
  border-color: var(--rule);
  color: var(--graphite);
}

.button-secondary:hover:not(:disabled) {
  border-color: var(--ink);
  color: var(--ink);
}

.button:disabled {
  opacity: 0.6;
  cursor: default;
}

/**
 * The click-to-call pulse: a ring in the bright tint, expanding out of the
 * button and fading as it goes, every 2.4 seconds.
 *
 * The wide diffuse glow is carried through every keyframe rather than being
 * left on the rule, because an animation replaces `box-shadow` outright for as
 * long as it runs -- declare the glow once outside and it simply disappears.
 *
 * The bottom bar deliberately does NOT pulse. It is already full-bleed, always
 * on screen and the brightest band on the page; a ring expanding off a
 * 100vw-wide element reads as a flicker, not as an invitation.
 */
@keyframes call-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(47 191 113 / 70%), var(--call-glow);
  }
  50% {
    box-shadow: 0 0 0 14px rgb(47 191 113 / 0%), var(--call-glow);
  }
}

.tel-button,
.button-call {
  animation: call-pulse 2.4s ease-in-out infinite;
}

/* Reduced motion keeps the glow and drops the movement. */
@media (prefers-reduced-motion: reduce) {
  .tel-button,
  .button-call {
    animation: none;
    box-shadow: var(--call-glow);
  }
}

.button-arrow {
  stroke-width: 2.2;
}

/* ----------------------------------------------------------- 8. form panel */

.panel-wrap {
  position: relative;
}

/**
 * The panel is NOT sticky, deliberately.
 *
 * It used to be, and that was the direct cause of an unreachable Continue
 * button: a `position: sticky` element taller than its viewport pins its top,
 * and its bottom then never scrolls into view. The panel reaches well over
 * 1000px on the two-question steps, so there is no viewport short of a
 * portrait monitor where sticky is safe -- and no CSS for "stick only if it
 * fits".
 *
 * It also bought nothing. The form is the TALLEST column in the hero grid, so
 * there was never a moment when the lede beside it was still scrolling and the
 * form needed holding in place.
 */
.form-panel {
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgb(18 20 23 / 5%), 0 24px 48px -28px rgb(18 20 23 / 28%);
  overflow: hidden;
}

.panel-head {
  padding: 24px clamp(20px, 3vw, 30px) 22px;
  background-color: var(--ink);
  background-image: var(--grain);
  color: var(--body-text);
}

.panel-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.step-kicker {
  color: var(--heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.panel-count {
  font-size: 0.75rem;
  color: #ffffff;
}

.progress-track {
  height: 3px;
  margin: 13px 0 20px;
  background: #35353a;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  display: block;
  height: 100%;
  width: 14.3%;
  background: var(--accent);
  transition: width 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.panel-title {
  color: var(--heading);
  font-size: 1.375rem;
}

.panel-subtitle {
  margin-top: 7px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #ffffff;
}

.panel-body {
  position: relative;
  padding: clamp(18px, 2.4vw, 24px);
}

/* Inside the card the page is light again. */
.panel-body h3,
.panel-body .q-label {
  color: var(--ink);
}

.panel-body {
  color: var(--graphite);
}

.panel-body a {
  color: var(--accent-ink);
}

.panel-body a:hover {
  color: var(--accent-ink-deep);
}

/* ------------------------------------------------------------- 9. the steps */

.step {
  display: none;
}

.step.is-active {
  display: block;
}

.q {
  margin: 0 0 20px;
  min-width: 0;
}

.q:last-of-type {
  margin-bottom: 0;
}

.q-label {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.q-label:focus-visible {
  outline-offset: 4px;
}

.q-label--sub {
  font-size: 0.9375rem;
}

.q-help {
  margin: 0 0 11px;
  color: var(--quiet);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.q-options {
  display: grid;
  gap: 8px;
}

/* A revealed clarification is set in from its parent so it reads as a
   follow-up rather than as a new question. */
.q-sub {
  margin-top: 14px;
  padding: 15px 16px 16px 15px;
  background: var(--wash);
  border-left: 2px solid var(--accent-ink);
  border-radius: 0 var(--r) var(--r) 0;
}

.q-sub .q-label,
.q-label--sub {
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* --- radio cards --- */

.opt {
  display: block;
  cursor: pointer;
}

.opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.opt-face {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.opt-mark {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #b9babd;
  border-radius: 50%;
  background: var(--sheet);
  transition: border-color 120ms ease;
}

.opt:hover .opt-face {
  border-color: #c2c3c6;
}

.opt input:checked + .opt-face {
  border-color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent-ink) 5%, var(--sheet));
}

.opt input:checked + .opt-face .opt-mark {
  border-color: var(--accent-ink);
  border-width: 5px;
}

.opt input:focus-visible + .opt-face {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* --- the "not sure" escape hatch --- */

.q-unknown {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  color: var(--graphite);
  font-size: 0.875rem;
  cursor: pointer;
}

.q-unknown input {
  flex: none;
  width: 17px;
  height: 17px;
  accent-color: var(--accent-ink);
  cursor: pointer;
}

/* -------------------------------------------------------------- 10. fields */

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 15px;
}

.field:last-child {
  margin-bottom: 0;
}

.field-row {
  display: grid;
  gap: 15px;
}

@media (min-width: 420px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.field label {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
}

.optional {
  color: var(--faint);
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--ink);
  font: 400 0.9375rem/1.45 var(--font);
}

.field textarea {
  resize: vertical;
  min-height: 78px;
}

.field select {
  appearance: none;
  /* The caret is painted rather than imported so the control needs no asset. */
  background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%),
    linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent-ink);
  outline-offset: 1px;
  border-color: var(--accent-ink);
}

.field [aria-invalid="true"] {
  border-color: var(--accent-ink);
}

.char-count {
  color: var(--faint);
  font-size: 0.75rem;
  text-align: right;
}

.consent {
  display: flex;
  gap: 11px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--quiet);
  font-size: 0.75rem;
  line-height: 1.6;
  cursor: pointer;
}

.consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent-ink);
  cursor: pointer;
}

/* An <a> inside a <label> is interactive content, so clicking it follows the
   link instead of toggling the checkbox. It is underlined to say so. */
.consent a {
  text-decoration: underline;
}

.error-text {
  min-height: 1.3em;
  margin-top: 13px;
  color: var(--accent-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.panel-footer {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.panel-footer .button-primary {
  flex: 1;
}

.back-label {
  font-size: 0.9375rem;
}

/* ------------------------------------------------------ 11. status screens */

.status-screen {
  display: none;
  text-align: center;
  padding: 20px 4px 8px;
  color: var(--graphite);
}

.status-screen.is-visible {
  display: block;
}

.status-screen h3 {
  margin: 18px 0 9px;
  color: var(--ink);
  font-size: 1.375rem;
}

.status-screen p {
  max-width: 44ch;
  margin: 0 auto 11px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.status-fine {
  color: var(--faint);
  font-size: 0.8125rem !important;
}

.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-ink);
  color: var(--sheet);
}

.status-icon svg {
  stroke-width: 2.6;
}

.status-icon--muted {
  background: var(--wash);
  border: 1px solid var(--rule);
  color: var(--graphite);
}

.status-screen--closed .button {
  margin-top: 16px;
}

.loader {
  width: 40px;
  height: 40px;
  margin: 6px auto 0;
  border: 3px solid var(--rule);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  animation: spin 760ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 2.4s;
  }
}

/* ------------------------------------------------------- 12. how it works */

.process-grid {
  display: grid;
  gap: clamp(30px, 4vw, 60px);
}

@media (min-width: 900px) {
  .process-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  /* The plate holds its own while the list beside it scrolls. */
  .process-figure {
    position: sticky;
    top: calc(var(--header-h) + 30px);
  }
}

.process-figure {
  margin: 0;
}

.process-figure img {
  width: 100%;
  /* A 4:5 plate is right beside the list and far too tall above it, where it
     would take a whole phone screen before the first step is reached. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: var(--r-lg);
}

@media (min-width: 900px) {
  .process-figure img {
    aspect-ratio: 4 / 5;
    object-position: 50% 50%;
  }
}

.process-figure figcaption {
  margin-top: 13px;
  padding-left: 14px;
  border-left: 2px solid var(--hairline);
  color: var(--faint2);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* A hanging numeral in the margin, not a circle on a card. */
.steps {
  display: grid;
}

.step-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 5px 14px;
  padding: 26px 0;
  border-top: 1px solid var(--hairline);
}

.step-row:last-child {
  border-bottom: 1px solid var(--hairline);
}

.step-n {
  grid-row: span 2;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.step-row h3 {
  font-size: 1.1875rem;
}

.step-row p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 56ch;
}

@media (max-width: 480px) {
  .step-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .step-n {
    font-size: 1.25rem;
  }
}

/* ------------------------------------------------------------- 13. covered */

.covered {
  display: grid;
  gap: 0 clamp(30px, 5vw, 68px);
}

@media (min-width: 720px) {
  .covered {
    grid-template-columns: 1fr 1fr;
  }
}

.covered li {
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}

.covered h3 {
  margin-bottom: 6px;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}

.covered p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 42ch;
}

/* ------------------------------------------------------------- 14. signals */

.section--photo {
  position: relative;
  padding: clamp(72px, 8vw, 124px) 0;
  overflow: hidden;
  isolation: isolate;
}

.band-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.55);
}

/* The scrim, not the opacity of the image itself: a flat opacity washes the
   photograph out evenly, while a gradient keeps some depth on the right where
   there is no text and buys the contrast back on the left where there is. */
.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    100deg,
    rgb(28 31 36 / 97%) 0%,
    rgb(28 31 36 / 93%) 45%,
    rgb(28 31 36 / 62%) 100%
  );
}

/* A halftone screen: a 4px dot grid, the way a picture looks when it has been
   through a press rather than a phone. It is what stops the one photographic
   band on the site from reading as a stock hero. */
.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgb(0 0 0 / 28%) 1px,
    transparent 1.2px
  );
  background-size: 4px 4px;
}

.band-inner {
  position: relative;
}

.signals {
  display: grid;
  max-width: 70ch;
}

.signals li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  color: var(--heading);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.signals li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.signal-n {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
  padding-top: 2px;
}

.fine--ink {
  max-width: 70ch;
}

@media (max-width: 480px) {
  .signals li {
    grid-template-columns: 36px minmax(0, 1fr);
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------- 15. creed */

.creed-grid {
  display: grid;
  gap: clamp(26px, 4vw, 60px);
}

@media (min-width: 900px) {
  .creed-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }

  .section-head--sticky {
    position: sticky;
    top: calc(var(--header-h) + 30px);
    margin-bottom: 0;
  }
}

/* The script's Agent Rules. A form has no agent to hold to them, so the page
   states them -- quietly, as a note under the heading rather than as another
   row of ticks. */
.agent-rules {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  color: var(--faint2);
  font-size: 0.8125rem;
  line-height: 1.6;
  max-width: 38ch;
}

/* A dictionary entry: the term, then what it means. No panel, no icon. */
.creed-row {
  padding: 24px 0;
  border-top: 1px solid var(--hairline);
}

.creed-row:last-child {
  border-bottom: 1px solid var(--hairline);
}

.creed-row dt {
  margin-bottom: 7px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.creed-row--isnt dt {
  color: var(--muted);
}

.creed-row--is dt {
  color: var(--accent);
}

.creed-row dd {
  color: var(--body-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 54ch;
}

/* ----------------------------------------------------------------- 16. FAQ */

.faq details {
  border-bottom: 1px solid var(--hairline);
}

.faq details:first-of-type {
  border-top: 1px solid var(--hairline);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 2px;
  color: var(--heading);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary svg {
  flex: none;
  color: var(--accent);
  transition: transform 160ms ease;
}

.faq details[open] summary svg {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .faq summary svg {
    transition: none;
  }
}

.faq-answer {
  padding: 0 2px 22px;
  max-width: 64ch;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ------------------------------------------------------------ 17. CTA band */

.cta-band {
  padding: clamp(32px, 4vw, 52px);
  background-color: var(--paper-2);
  background-image: var(--grain-light);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-lg);
  text-align: center;
}

.cta-band h2 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
}

.cta-band p {
  max-width: 50ch;
  margin: 12px auto 26px;
  color: var(--muted);
}

.cta-band .hero-actions {
  justify-content: center;
}

/* -------------------------------------------------------- 18. the call bar */

/* Always on, at every width. On an injury page the phone IS the conversion for
   a large share of visitors; a number that only appears after you scroll past
   the form is a number many of them never see. body reserves the space. */
.call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  min-height: var(--bar-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--call);
  box-shadow:
    0 -1px 0 var(--call-edge),
    0 -6px 20px rgb(47 191 113 / 42%),
    0 -16px 44px rgb(47 191 113 / 20%);
}

/**
 * While someone is actually answering, the bar slides away.
 *
 * It is 66px of fixed chrome across the bottom of a form it is competing with,
 * and on a phone it sits exactly where the keyboard pushes the active field.
 * ui.js decides when, and it keys off a SESSION rather than focus -- see
 * callBarVsForm(). The body keeps its padding either way, so nothing reflows
 * when the bar leaves or comes back.
 *
 * It returns on a press anywhere outside the panel, so the number is never
 * more than a tap away.
 */
body.form-engaged .call-bar {
  transform: translateY(110%);
}

@media (prefers-reduced-motion: no-preference) {
  .call-bar {
    transition: transform 180ms ease;
  }
}

.call-bar-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 16px;
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(1rem, 3.2vw, 1.25rem);
  letter-spacing: -0.015em;
  text-decoration: none;
}

.call-bar-link:hover {
  background: var(--call-hover);
  color: #ffffff;
}

.call-bar-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125em;
}

.call-bar-num {
  white-space: nowrap;
}

.call-bar-alt {
  display: none;
}

@media (min-width: 760px) {
  .call-bar-alt {
    display: flex;
    align-items: center;
    padding: 0 30px;
    background: var(--ink);
    color: var(--heading);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .call-bar-alt:hover {
    background: #26262b;
    color: var(--heading);
  }
}

/* -------------------------------------------------------------- 19. footer */

.site-footer {
  padding: var(--sec-y) 0 36px;
  background-color: var(--night-4);
  background-image: var(--grain);
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.875rem;
}

.footer-cols {
  display: grid;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 760px) {
  .footer-cols {
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(170px, 1fr));
    gap: 44px;
  }
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--heading);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.03em;
}

.footer-logo > span {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.footer-logo svg {
  color: var(--accent);
}

.footer-blurb {
  margin-top: 15px;
  max-width: 44ch;
  line-height: 1.65;
}

.footer-title {
  margin-bottom: 13px;
  color: var(--heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 9px;
}

.footer-links a,
.footer-call {
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover,
.footer-call:hover {
  color: var(--heading);
  text-decoration: underline;
}

.footer-call {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--heading);
  font-weight: 700;
}

.footer-notice {
  margin-top: 28px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-bottom {
  display: grid;
  gap: 10px;
  margin-top: 13px;
  color: var(--faint2);
  font-size: 0.75rem;
  line-height: 1.7;
  max-width: 94ch;
}

.footer-operator {
  color: var(--muted);
}

/* ------------------------------------------------------- 20. legal pages */

.legal-title {
  margin: 6px 0 7px;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
}

.legal-updated {
  color: var(--faint2);
  font-size: 0.8125rem;
}

.legal-intro {
  margin-top: 20px;
  color: var(--body-text);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.legal h2 {
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: 1.3125rem;
}

.legal p {
  margin-bottom: 15px;
  color: var(--muted);
  line-height: 1.8;
}

.legal-list {
  display: grid;
  gap: 11px;
  margin: 0 0 20px;
  color: var(--muted);
}

.legal-list li {
  display: flex;
  gap: 12px;
  line-height: 1.75;
}

.legal-list svg {
  margin-top: 7px;
  color: var(--accent);
  stroke-width: 2.4;
}

.legal-address span {
  display: block;
}

.legal-address {
  color: var(--heading);
  font-weight: 600;
  line-height: 1.7;
}

.legal-more {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-weight: 700;
}

/* ------------------------------------------------------------------- 21. 404 */

.notfound {
  padding: clamp(24px, 5vw, 64px) 0;
}

.notfound .hed {
  margin-top: 10px;
}

.notfound .lead {
  margin-bottom: 28px;
}