/* The firm's public marketing surface: the home page and the practice
 * pages beneath it.
 *
 * Everything here draws its colour from the `--nav-*` tokens, so both colour
 * schemes are handled by `tokens.css` rather than by a second set of rules
 * here. The one exception is the tinted band and card fills, which need a wash
 * of the brand at a low alpha; those use `color-mix` against the surface so
 * they follow the scheme too.
 *
 * The type scale is deliberately larger than the app surface's. These are the
 * only pages a stranger reads before deciding whether to write to us. */

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

/* ---- Shared band scaffolding -------------------------------------------- */

.fm-band {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  padding-inline: 1.5rem;
}

.fm-band__inner {
  max-width: 72rem;
  margin-inline: auto;
}

.fm-band__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
  margin-block-end: clamp(2rem, 4vw, 3rem);
}

.fm-overline {
  margin: 0;
  color: var(--nav-color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.fm-band__title {
  margin: 0;
  font-family: var(--nav-font-family);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

.fm-band__description {
  margin: 0;
  max-width: 46rem;
  color: var(--nav-color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.fm-video {
  display: block;
  width: min(100%, 64rem);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  background: #000;
  object-fit: contain;
}

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

.fm-hero {
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2rem, 5vw, 3.5rem);
  padding-inline: 1.5rem;
  /* A soft brand wash behind the opening screen, fading into the page. */
  background:
    radial-gradient(
      70rem 28rem at 50% -6rem,
      color-mix(in srgb, var(--nav-color-primary) 14%, transparent),
      transparent 70%
    );
}

.fm-hero__inner {
  max-width: 58rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* Product/practice identity, drawn by the same component the Rust in Peace
   four-card slide uses. The round frame gives the line mark enough presence to
   read as a page logo without turning it into a second wordmark. */
.fm-hero__mark {
  width: clamp(4.25rem, 9vw, 6.5rem);
  height: clamp(4.25rem, 9vw, 6.5rem);
  padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--nav-color-primary) 42%, transparent);
  border-radius: 50%;
  color: var(--nav-color-primary);
  background: color-mix(in oklab, var(--nav-color-primary) 9%, var(--nav-color-surface));
}

.fm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.375rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--nav-color-primary) 40%, transparent);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.fm-badge__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--nav-color-primary);
}

.fm-hero__title {
  margin: 0;
  font-family: var(--nav-font-family);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 600;
  line-height: 1.05;
  text-wrap: balance;
}

.fm-hero__tagline {
  margin: 0;
  max-width: 52rem;
  color: var(--nav-color-primary);
  font-family: var(--nav-font-family);
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

.fm-hero__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 44rem;
}

.fm-hero__body p {
  margin: 0;
  color: var(--nav-color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.fm-hero__body strong {
  color: var(--nav-color-text);
  font-weight: 600;
}

.fm-hero__pullquote {
  max-width: 40rem;
  margin: 0;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid
    color-mix(in srgb, var(--nav-color-primary) 25%, transparent);
  font-family: var(--nav-font-family);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.5;
  text-wrap: balance;
}

/* An audience page opens smaller: it is an argument, not an identity. */
.fm-hero--page .fm-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
}

/* ---- Statement ----------------------------------------------------------- */

.fm-band--statement .fm-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.fm-statement__lead {
  max-width: 55rem;
  margin: 0;
  font-family: var(--nav-font-family);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

.fm-statement__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 46rem;
}

.fm-statement__body p {
  margin: 0;
  color: var(--nav-color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.fm-statement__body strong {
  color: var(--nav-color-text);
  font-weight: 600;
}

/* ---- Cards --------------------------------------------------------------- */

.fm-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 60rem) {
  .fm-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fm-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--nav-color-primary) 20%, transparent);
  border-radius: var(--nav-radius-lg);
  background: var(--nav-color-surface);
}

.fm-card__title {
  margin: 0;
  font-family: var(--nav-font-family);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}

.fm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fm-chip {
  padding: 0.3125rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--nav-color-primary) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nav-color-primary) 6%, transparent);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.fm-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fm-card__body p {
  margin: 0;
  color: var(--nav-color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.fm-card__body strong {
  color: var(--nav-color-text);
  font-weight: 600;
}

.fm-card__link {
  margin-block-start: auto;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ---- Individual services ------------------------------------------------ */

/* The one band on a marketing page that a reader operates rather than reads.
   Its list reuses `.fm-cards` / `.fm-card`, so only the search chrome and the
   per-service detail need rules of their own. */

.fm-services__search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: min(100%, 44rem);
  margin: 0 auto 1rem;
}

.fm-services__input {
  flex: 1 1 18rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius-lg);
  background: var(--nav-color-surface);
  color: var(--nav-color-text);
  font: inherit;
  font-size: 1rem;
}

.fm-services__input:focus-visible {
  outline: 2px solid var(--nav-color-primary);
  outline-offset: 2px;
}

.fm-services__examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

/* The chips are real links, not buttons: each carries its own `?q=`, so one
   works with no JavaScript and can be opened in a new tab or bookmarked. */
.fm-services__example {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--nav-color-primary) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nav-color-primary) 6%, transparent);
  color: var(--nav-color-text);
  font-size: 0.875rem;
  line-height: 1.3;
  text-decoration: none;
}

.fm-services__example:hover,
.fm-services__example:focus-visible {
  background: color-mix(in srgb, var(--nav-color-primary) 14%, transparent);
}

.fm-services__count {
  margin: 0 0 1.5rem;
  color: var(--nav-color-text-muted);
  font-size: 0.875rem;
  text-align: center;
}

/* A search that finds nothing still says something. A blank band reads as a
   broken page; this reads as an answer. */
.fm-services__empty {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px dashed color-mix(in srgb, var(--nav-color-primary) 30%, transparent);
  border-radius: var(--nav-radius-lg);
  color: var(--nav-color-text-muted);
  text-align: center;
}

.fm-services__empty-heading {
  margin: 0;
  color: var(--nav-color-text);
  font-family: var(--nav-font-family);
  font-size: 1.125rem;
  font-weight: 600;
}

.fm-services__empty p {
  margin: 0;
  max-width: 48ch;
}

.fm-services__service {
  gap: 0.625rem;
}

.fm-services__category {
  margin: 0;
  color: var(--nav-color-text-muted);
  font-size: 0.8125rem;
}

/* A Notation package has two honest ways to buy it. Put them next to each
   other so the reader compares the a la carte and plan price without doing
   arithmetic or hunting through a paragraph. */
.fm-services__pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
  margin: 0.25rem 0 0;
}

.fm-services__price-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--nav-color-text-muted) 28%, transparent);
  border-radius: 0.5rem;
}

.fm-services__price-choice--plan {
  border-color: color-mix(in srgb, var(--nav-color-primary) 45%, transparent);
  background: color-mix(in srgb, var(--nav-color-primary) 10%, var(--nav-color-surface));
}

.fm-services__fee-label {
  flex-basis: 100%;
  color: var(--nav-color-text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fm-services__fee-amount {
  color: var(--nav-color-text);
  font-family: var(--nav-font-family);
  font-size: 1.375rem;
  font-weight: 600;
}

.fm-services__fee-period {
  color: var(--nav-color-text-muted);
  font-size: 0.875rem;
}

/* The one-line explanation under a service card's Start link. It sits with
   the link, not the scope list, so it reads as part of the door rather than
   as another thing the service includes. */

.fm-services__start-microcopy {
  margin: 0.25rem 0 0;
  color: var(--nav-color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.fm-services__includes-label {
  margin: 0.5rem 0 0;
  color: var(--nav-color-text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fm-services__includes {
  margin: 0;
  padding-inline-start: 1.125rem;
  color: var(--nav-color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.fm-services__package {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.25rem 0 0;
  padding: 0.75rem 0.875rem;
  background: color-mix(in srgb, var(--nav-color-primary) 8%, var(--nav-color-surface));
  border-radius: 0.5rem;
}

.fm-services__package-badge,
.fm-services__package-members-label {
  margin: 0;
}

/* The 600 stop, not the 500 one. This badge is the only *text* that sits on
   `.fm-services__package`'s 8% primary tint, and the tint is what eats the
   headroom `tokens.css` warns about: the firm's 500 clears 4.89:1 on a plain
   surface but only 4.41:1 once 8% of itself is mixed into that surface, under
   the 4.5:1 floor for 11px text. Stepping the ink to `primary-hover` — the
   alias for 600, and the lighter stop in dark — takes the tightest palette to
   5.57:1. */
.fm-services__package-badge {
  color: var(--nav-color-primary-hover);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fm-services__package-members {
  margin: 0.15rem 0 0;
  padding-inline-start: 1.125rem;
  color: var(--nav-color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---- Connected Project -------------------------------------------------- */

.fm-band--project-network {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--nav-color-primary) 11%, transparent), transparent 38%),
    color-mix(in srgb, var(--nav-color-primary) 3%, transparent);
}

.fm-project-network {
  margin: 0;
}

.fm-project-network__map {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "core"
    "left"
    "right";
  gap: 1rem;
  max-width: 66rem;
  margin-inline: auto;
}

.fm-project-network__core,
.fm-project-network__node {
  position: relative;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius-lg);
  background: var(--nav-color-surface);
}

.fm-project-network__core {
  grid-area: core;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

.fm-project-network__wheel {
  width: clamp(4.5rem, 10vw, 6.5rem);
  height: clamp(4.5rem, 10vw, 6.5rem);
  margin-block-end: 0.75rem;
}

.fm-project-network__eyebrow,
.fm-project-network__external-label {
  margin: 0;
  color: var(--nav-color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fm-project-network__core h3,
.fm-project-network__node h3 {
  margin: 0;
  font-family: var(--nav-font-family);
  font-size: 1.125rem;
  line-height: 1.2;
}

.fm-project-network__core h3 {
  margin-block: 0.3rem 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.fm-project-network__core > p:last-child,
.fm-project-network__node p {
  margin: 0.5rem 0 0;
  color: var(--nav-color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.fm-project-network__lane {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  grid-area: left;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fm-project-network__lane--right {
  grid-area: right;
}

.fm-project-network__node {
  padding: 1.1rem;
}

.fm-project-network__node--left {
  border-color: color-mix(in srgb, #52749a 40%, var(--nav-color-border));
}

.fm-project-network__node--right {
  border-color: color-mix(in srgb, #4f9b79 40%, var(--nav-color-border));
}

.fm-project-network__tool-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-block-start: 1.5rem;
}

.fm-project-network__external {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px dashed color-mix(in srgb, var(--nav-color-primary) 45%, var(--nav-color-border));
  border-radius: var(--nav-radius-lg);
  background: color-mix(in srgb, var(--nav-color-surface) 82%, transparent);
}

.fm-project-network__external--saas {
  grid-column: 1 / -1;
}

.fm-project-network__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fm-project-network__tool {
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--nav-color-primary) 28%, transparent);
  border-radius: 999px;
  background: var(--nav-color-surface);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (min-width: 42rem) {
  .fm-project-network__tool-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56rem) {
  .fm-project-network__map {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.86fr) minmax(0, 1fr);
    grid-template-areas:
      "left core right";
    align-items: stretch;
    column-gap: clamp(2rem, 6vw, 5rem);
  }

  .fm-project-network__lane {
    grid-template-columns: 1fr;
    align-content: center;
  }

  .fm-project-network__core {
    justify-content: center;
  }

  .fm-project-network__node::after {
    position: absolute;
    top: 50%;
    width: clamp(2rem, 6vw, 5rem);
    border-block-start: 1px solid color-mix(in srgb, var(--nav-color-primary) 55%, transparent);
    content: "";
  }

  .fm-project-network__node--left::after {
    right: calc(clamp(2rem, 6vw, 5rem) * -1);
  }

  .fm-project-network__node--right::after {
    left: calc(clamp(2rem, 6vw, 5rem) * -1);
  }
}

/* ---- Steps --------------------------------------------------------------- */

.public-shell:has(.fm-band--steps) {
  overflow-x: clip;
}

.fm-band--steps {
  position: relative;
  isolation: isolate;
}

/* Paint beyond the shell's content column without widening the ordered list
   or introducing horizontal scrolling from the viewport's scrollbar width. */
.fm-band--steps::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  z-index: -1;
  background: color-mix(in srgb, var(--nav-color-primary) 5%, transparent);
}

.fm-steps {
  counter-reset: fm-step;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 52rem;
  margin-inline: auto;
}

.fm-step {
  counter-increment: fm-step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius-lg);
  background: var(--nav-color-surface);
}

.fm-step::before {
  content: counter(fm-step);
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--nav-color-primary);
  color: var(--nav-color-on-primary);
  font-family: var(--nav-font-family);
  font-size: 1rem;
  font-weight: 600;
}

.fm-step__title {
  margin: 0;
  align-self: center;
  font-family: var(--nav-font-family);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.fm-step__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.fm-step__body p {
  margin: 0;
  color: var(--nav-color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.fm-step__body strong {
  color: var(--nav-color-text);
  font-weight: 600;
}

.fm-step__figure {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
}

.fm-step__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius-md);
}

/* ---- Call to action ------------------------------------------------------ */

.fm-band--cta .fm-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.fm-cta__heading {
  margin: 0;
  font-family: var(--nav-font-family);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

.fm-cta__body {
  margin: 0;
  max-width: 42rem;
  color: var(--nav-color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---- Contact address ----------------------------------------------------- */

.fm-action {
  margin: 0;
}

.fm-action__address {
  color: var(--nav-color-text);
  font-size: 1rem;
  font-weight: 600;
}

/* ---- The firm's practice skin ------------------------------------------- */

/* One renderer serves both of the firm's marketing looks, and they want
   different typography. A page that names `PageSkin::Practice` gets the
   look the `/disputes` and `/business` pages wear: an eyebrow over a
   serif statement, left-aligned, with the body in the firm's card.

   The rules mirror `litigation.css` rather than importing it — that sheet is the
   litigation page's own and is hoisted only there — but the card, the glow, and
   the eyebrow come from `brand-firm.css`, which a practice-skin page hoists (see
   `MarketingShell`'s `firm_components`). Everything below is scoped under the
   modifier, so the plain `PageSkin::Marketing` pages are untouched.

   The base layer centres every band: `.fm-hero__inner`, `.fm-band__heading`, and
   `.fm-band--statement .fm-band__inner` all set `align-items: center` and
   `text-align: center`, and the inners carry `margin-inline: auto`. A practice
   page reads as one column of prose, so each of those is undone explicitly —
   `text-align` alone would leave the blocks centred inside their own max-width. */

/* The shell supplies the shared horizontal inset and full-width opening wash.
   Keep the hero and bands aligned with the other practice pages. */
.fm-page--practice .fm-hero--page {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
  background: none;
}

/* The band's own inline padding is what pushed a practice page's content
   24px right of `/disputes` and `/business`; the shell's 1rem is
   already the inset every other practice-skin element aligns to. */
.fm-page--practice .fm-band {
  padding-inline: 0;
}

.fm-page--practice .fm-hero__glow {
  inset-inline: -25vw;
}

.fm-page--practice .fm-hero__inner {
  position: relative;
  z-index: 1;
  align-items: flex-start;
  max-width: 46rem;
  margin-inline: 0;
  text-align: start;
}

.fm-page--practice .fm-hero__mark {
  color: var(--firm-brand);
  border-color: var(--firm-brand-edge);
  background: var(--firm-brand-tint);
}

/* The statement, in the firm's serif at the practice pages' size. */
.fm-page--practice .fm-hero__title {
  font-family: var(--firm-serif);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
}

/* One line of the statement. The statement decides its own breaks rather than
   taking whatever the viewport gives it, so each line is a block. */
.fm-page--practice .fm-hero__line {
  display: block;
}

/* One word of the statement. The opening words carry the firm's colour, the way
   `/disputes` sets "Litigation attorneys" — the practice name in brand, the
   claim after it in text.

   The gap between words is a margin rather than a space in the markup: each word
   is its own inline-block, and an inline-block collapses the whitespace at its
   own end, so a space in the view would render as nothing and run the heading
   together. No reveal animation here — `/disputes` staggers its words on
   entry, and that flourish belongs to the page the firm leads with rather than
   to every practice page. */
.fm-page--practice .fm-word {
  display: inline-block;
  margin-inline-end: 0.26em;
}

.fm-page--practice .fm-word--accent {
  color: var(--firm-brand);
}

/* The paragraph under the statement, at the practice pages' lead size. */
.fm-page--practice .fm-hero__lead {
  margin: 0;
  max-width: 44rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--nav-color-text-muted);
}

/* The one call to action in the hero wears the firm's colour rather than the
   product chrome's cyan. `theme.css` sets the primary button through
   `.nav-theme a.nav-btn--primary`, so this has to match that specificity to
   win — the same pairing `/disputes` uses for the same button. */
.nav-theme a.nav-btn--primary.fm-hero__cta,
.nav-theme a.nav-btn--primary.fm-hero__cta:hover,
.nav-theme a.nav-btn--primary.fm-hero__cta:focus-visible {
  border-color: var(--firm-brand);
  background: var(--firm-brand);
  color: var(--firm-on-brand);
}

.nav-theme a.nav-btn--primary.fm-hero__cta:hover,
.nav-theme a.nav-btn--primary.fm-hero__cta:focus-visible {
  border-color: var(--firm-brand-strong);
  background: var(--firm-brand-strong);
}

/* Every band reads as one left-aligned column. */
.fm-page--practice .fm-band__inner {
  max-width: 62rem;
  margin-inline: 0;
}

.fm-page--practice .fm-band__heading {
  align-items: flex-start;
  text-align: start;
}

.fm-page--practice .fm-band__title {
  font-family: var(--firm-serif);
}

.fm-page--practice .fm-band--statement .fm-band__inner {
  align-items: flex-start;
  text-align: start;
}

/* A statement's lead is its display line, in the serif the practice pages use. */
.fm-page--practice .fm-statement__lead {
  max-width: 40rem;
  font-family: var(--firm-serif);
  font-weight: 600;
  line-height: 1.15;
}

/* The prose sits in the firm's card, the way the practice pages carry a body. */
.fm-page--practice .fm-band--statement .fm-statement__body {
  max-width: none;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--nav-color-border);
  border-radius: 1rem;
  background: var(--nav-color-surface);
}

.fm-page--practice .fm-statement__body p {
  max-width: 68ch;
  color: var(--nav-color-text);
}

/* ---- CLI downloads ------------------------------------------------------- */

/* The three boxes ARE the home page's `.home-practice`, and `home.css` supplies
   every part of that: the three-column grid, the border, the lift, and the
   radial wash that swells across the whole box on hover. `MarketingShell`
   hoists that sheet for any page carrying a downloads band, so the rules here
   are only the parts a download box has and a practice box does not — the
   version line above the grid, the filename inside each box, and the
   package-manager block underneath. Nothing here restates a `.home-practice`
   rule; a copy would be the same declarations with a second place to drift. */

.fm-downloads__version {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  text-align: center;
  color: var(--nav-color-text-muted);
  font-size: 0.9375rem;
}

/* The version, set as the string it is. A reader retypes this into an issue or
   a shell far more often than they read it as prose. */
.fm-downloads__tag {
  padding: 0.15em 0.45em;
  border: 1px solid var(--nav-color-border);
  border-radius: 0.375rem;
  background: var(--nav-color-surface);
  color: var(--nav-color-text);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* `home.css` sizes the grid for the foot of the home page, where the boxes
   close the document. Here they are the band's subject, so they take the band's
   own width and a little more air between them. */
.fm-downloads__grid {
  max-width: 60rem;
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .fm-downloads__grid {
    gap: 1.75rem;
  }
}

/* Two platforms ship — macOS and Linux — so the band keeps two columns where
   the home grid widens to three. Both classes, to outrank `home.css`. */
@media (min-width: 60rem) {
  .home-practices__grid.fm-downloads__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A download box centres on its mark the way the practice boxes do, and its
   text stays centred under it — three short labels read as a row of choices,
   where the home page's sentences read as prose. */
.fm-download {
  align-items: center;
  text-align: center;
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
}

/* The filename, pinned to the bottom of the box so three boxes of unequal prose
   still line their filenames up. Muted and monospaced: it is not the box's
   message, it is the receipt for clicking it. */
.fm-download__file {
  margin: auto 0 0;
  padding-block-start: 0.35rem;
  color: var(--nav-color-text-muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

/* ---- The package-manager route ------------------------------------------- */

.fm-package {
  max-width: 60rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--nav-color-border);
  border-radius: var(--nav-radius-lg);
  background: var(--nav-color-surface);
}

.fm-package__heading {
  margin: 0 0 0.75rem;
  font-family: var(--nav-font-family);
  font-size: 1.125rem;
  font-weight: 600;
}

.fm-package__body p {
  margin: 0 0 0.75rem;
  max-width: 68ch;
  color: var(--nav-color-text-muted);
}

/* One command per block, so triple-clicking a line selects that command and not
   its neighbour. `overflow-x` rather than wrapping: a wrapped shell command
   pasted into a terminal is a command a reader has to repair. */
.fm-package__command {
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--nav-color-border);
  border-radius: 0.5rem;
  background: var(--nav-color-surface-raised);
  color: var(--nav-color-text);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-x: auto;
}

.fm-card__logo { object-fit: contain; object-position: left center; margin-bottom: 1rem; }

/* Nautilus keeps the shared practice layout and controls, with an ocean palette
   that fills the viewport. The shell's column cap, its padding, and the
   header's own surface step aside, so the water runs edge to edge from the top
   of the page down to the light enrollment band; the footer follows that band
   without the shell's usual gap. */
:root:has(.fm-page--nautilus),
:root:has(.fm-page--nautilus) body { background: #061f2b; }
.public-shell:has(.fm-page--nautilus) { background: #061f2b; }
.public-shell__main:has(.fm-page--nautilus) { width: 100%; padding: 0; }
.public-shell:has(.fm-page--nautilus) > .site-header {
  background: transparent;
  border-bottom: 0;
  color: #effff9;
  --nav-color-text: #effff9;
  --nav-color-border: #2e5966;
}
.public-shell:has(.fm-page--nautilus) .site-header__link { color: #c6e5e5; }
.public-shell:has(.fm-page--nautilus) .site-header__link:hover,
.public-shell:has(.fm-page--nautilus) .site-header__link:focus-visible { color: #effff9; }
.public-shell:has(.fm-page--nautilus) .site-header__link--active { background: rgb(255 255 255 / .1); }
.public-shell:has(.fm-page--nautilus) > .site-footer { margin-top: 0; }

.fm-page--nautilus {
  background: #061f2b;
  color: #e6faf7;
  --nav-color-text: #e6faf7;
  --nav-color-text-muted: #b6d4d6;
  --nav-color-surface: #103544;
  --nav-color-border: #47727b;
}

/* The opening screen: a full-height sea with the shell swimming through it.
   Three layers, all pseudo-elements or the hero's own glow element, so the
   markup stays the shared practice hero. `::before` is the light moving
   through the water, `.fm-hero__glow` (hidden on every other shell page) is
   the bubbles, and `::after` is the shell. */
.fm-page--nautilus .fm-hero {
  min-height: min(56rem, calc(100svh - 4.5rem));
  padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 6vw, 5rem);
  background: radial-gradient(ellipse at 85% 40%, #125062 0, transparent 60%), #061f2b;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fm-page--nautilus .fm-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40rem 22rem at 20% 30%, rgb(16 201 206 / .16), transparent 70%),
    radial-gradient(34rem 18rem at 75% 70%, rgb(122 227 213 / .12), transparent 70%),
    radial-gradient(26rem 26rem at 55% 10%, rgb(255 240 204 / .07), transparent 70%);
  animation: nautilus-light 28s ease-in-out infinite alternate;
}
.public-shell .fm-page--nautilus .fm-hero__glow {
  display: block;
  inset: 0;
  height: auto;
  z-index: 0;
  background:
    radial-gradient(.35rem .35rem at 12% 95%, rgb(230 250 247 / .55) 45%, transparent 50%),
    radial-gradient(.25rem .25rem at 28% 92%, rgb(230 250 247 / .45) 45%, transparent 50%),
    radial-gradient(.45rem .45rem at 41% 98%, rgb(230 250 247 / .4) 45%, transparent 50%),
    radial-gradient(.3rem .3rem at 63% 94%, rgb(230 250 247 / .5) 45%, transparent 50%),
    radial-gradient(.2rem .2rem at 80% 97%, rgb(230 250 247 / .45) 45%, transparent 50%),
    radial-gradient(.4rem .4rem at 92% 91%, rgb(230 250 247 / .35) 45%, transparent 50%);
  background-repeat: no-repeat;
  animation: nautilus-rise 22s linear infinite;
}
.fm-page--nautilus .fm-hero::after {
  content: "";
  position: absolute;
  inset: 2rem -3rem 0 45%;
  z-index: 0;
  background: url('/public/images/nautilus-shell.svg') center / contain no-repeat;
  pointer-events: none;
  transform-origin: 50% 55%;
  animation: nautilus-swim 18s ease-in-out infinite alternate;
}
@keyframes nautilus-swim {
  0% { transform: translate(0, 0) rotate(-2deg); }
  50% { transform: translate(-3%, 3%) rotate(1deg); }
  100% { transform: translate(-6%, -2%) rotate(3deg); }
}
@keyframes nautilus-light {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(6%, 4%) scale(1.08); }
}
@keyframes nautilus-rise {
  from { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: .8; }
  to { transform: translateY(-110%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-page--nautilus .fm-hero::before,
  .fm-page--nautilus .fm-hero::after,
  .fm-page--nautilus .fm-hero__glow { animation: none; }
  .public-shell .fm-page--nautilus .fm-hero__glow { display: none; }
}
.fm-page--nautilus .fm-hero__inner {
  position: relative;
  z-index: 1;
  margin-left: clamp(1.5rem, 5vw, 5rem);
  margin-right: 0;
  max-width: 52rem;
  text-align: left;
}
.fm-page--nautilus .fm-hero__title {
  font-size: clamp(3.5rem, 7.5vw, 8rem);
  font-weight: 700;
  max-width: 11ch;
  line-height: .94;
  letter-spacing: -.02em;
  color: #effff9;
}
.fm-page--nautilus .fm-hero__lead { max-width: 38rem; font-size: clamp(1.125rem, 1.6vw, 1.375rem); color: #c6e5e5; }
.fm-page--nautilus .firm-eyebrow,
.fm-page--nautilus .fm-overline { color: #7ae3d5; }
.fm-page--nautilus .fm-band { border-color: #2e5966; padding-inline: clamp(1.5rem, 5vw, 5rem); }
.fm-page--nautilus .fm-band__inner { max-width: 76rem; margin-inline: auto; }
.fm-page--nautilus .fm-band__title,
.fm-page--nautilus .fm-statement__lead { color: #effff9; }
.fm-page--nautilus .fm-card { background: #103544; border-color: #47727b; color: #e6faf7; }
.fm-page--nautilus .fm-card__title { color: #effff9; }
.fm-page--nautilus .fm-card__body,
.fm-page--nautilus .fm-band__description { color: #c6e5e5; }
.fm-page--nautilus .fm-band--enrollment {
  background: #e6f5ef;
  color: #102f39;
  --nav-color-surface: #ffffff;
  --nav-color-text: #102f39;
  --nav-color-text-muted: #38515a;
  --nav-color-border: #6a868b;
}
.fm-page--nautilus .fm-band--enrollment .fm-band__title { color: #102f39; }
.fm-page--nautilus [data-nautilus-intake] { max-width: 42rem; margin: 2rem auto 0; }
.fm-page--nautilus [data-nautilus-intake] form > button + button { margin-left: .5rem; }
.fm-page--nautilus progress { width: 100%; accent-color: #126a70; }
.fm-page--nautilus [hidden] { display: none !important; }
.fm-page--nautilus dt { font-weight: 700; margin-top: 1rem; }
.fm-page--nautilus dd { margin: .4rem 0 1rem; overflow-wrap: anywhere; }
.fm-page--nautilus .fm-hero__mark { display: none; }
.fm-page--nautilus a:not(.nav-btn) { color: #8be9df; }
.fm-page--nautilus .fm-band--enrollment a:not(.nav-btn) { color: #1b6670; }
@media (max-width: 760px) {
  .fm-page--nautilus .fm-hero { min-height: 0; padding-bottom: 16rem; }
  .fm-page--nautilus .fm-hero::after { inset: auto -3rem -6rem 20%; height: 26rem; opacity: .6; }
  .fm-page--nautilus .fm-hero__inner { margin: 0 1.5rem; }
  .fm-page--nautilus .fm-hero__title { font-size: clamp(2.75rem, 13vw, 4rem); }
}

/* The app band: an iPhone listing the subscription's checks and, when a second
   screen is authored, a Pixel showing it, beside the two store badges. */
.fm-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.fm-app__stores { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.fm-store-badge {
  display: grid;
  min-width: 11rem;
  padding: .55rem 1.1rem .6rem 3rem;
  border: 1px solid #a3b8bc;
  border-radius: .7rem;
  background: #000 no-repeat 1rem center / 1.3rem;
  color: #fff;
  line-height: 1.15;
}
.fm-store-badge[data-store="ios"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M10 5h4'/%3E%3C/svg%3E");
}
.fm-store-badge[data-store="android"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5v17l14-8.5z' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fm-store-badge__availability { font-size: .7rem; letter-spacing: .02em; color: #cfd8da; }
.fm-store-badge__label { font-size: 1.05rem; font-weight: 600; }

.fm-app__phones { display: flex; justify-content: center; }
/* An iPhone 17 Pro at its own size: 402 points wide, in its 71.9 by 150.0 mm
   body's proportions. */
.fm-phone {
  width: min(100%, 402px);
  aspect-ratio: 71.9 / 150;
  padding: .6rem;
  background: #0d0f12;
  border: 1px solid #3c4650;
  box-shadow: 0 2rem 4rem rgb(0 0 0 / .45);
}
.fm-phone__screen { height: 100%; padding: .75rem 1rem 1.25rem; overflow: hidden; }
.fm-phone__status { position: relative; display: flex; align-items: center; height: 1.9rem; font-size: .8rem; font-weight: 600; }
.fm-phone__listing { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.fm-phone__icon { flex: none; width: 3.5rem; height: 3.5rem; padding: .3rem; background: #061f2b; }
.fm-phone__name { flex: 1; min-width: 0; }
.fm-phone__name p { margin: 0; }
.fm-phone__app { font-size: 1.15rem; font-weight: 700; }
.fm-phone__subtitle { font-size: .78rem; opacity: .7; }
.fm-phone__install { flex: none; padding: .3rem 1rem; font-size: .85rem; font-weight: 700; }
.fm-phone__price { margin: .85rem 0 0; font-size: .8rem; opacity: .75; }
.fm-phone__heading { margin: 1.1rem 0 .5rem; font-size: 1rem; font-weight: 700; }
.fm-phone__checks { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0; overflow: hidden; }
.fm-phone__check { display: flex; gap: .65rem; align-items: flex-start; padding: .55rem .75rem; font-size: .8rem; line-height: 1.3; }
.fm-phone__check-text { display: grid; gap: .1rem; }
.fm-phone__check-text span { opacity: .7; font-size: .72rem; }
.fm-phone__tick {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .05rem;
  border-radius: 50%;
  background: currentColor no-repeat center / .7rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5'/%3E%3C/svg%3E");
}

/* iPhone: rounded slab, Dynamic Island, SF type, inset grouped list, blue pill. */
.fm-phone[data-phone="ios"] { border-radius: 3rem; }
.fm-phone[data-phone="ios"] .fm-phone__screen {
  border-radius: 2.5rem;
  background: #f2f2f7;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}
.fm-phone[data-phone="ios"] .fm-phone__status { padding-left: .9rem; }
.fm-phone[data-phone="ios"] .fm-phone__camera {
  position: absolute; left: 50%; top: .15rem; width: 5.5rem; height: 1.6rem;
  transform: translateX(-50%); border-radius: 1rem; background: #000;
}
.fm-phone[data-phone="ios"] .fm-phone__icon { border-radius: 22%; }
.fm-phone[data-phone="ios"] .fm-phone__install { border-radius: 1rem; background: #0066cc; color: #fff; text-transform: uppercase; }
.fm-phone[data-phone="ios"] .fm-phone__checks { border-radius: .75rem; background: #c6c6c8; }
.fm-phone[data-phone="ios"] .fm-phone__check { background: #fff; }
.fm-phone[data-phone="ios"] .fm-phone__tick { color: #34c759; }
.fm-phone[data-phone="ios"] .fm-phone__heading { font-size: 1.3rem; letter-spacing: -.01em; }

/* Pixel 10 Pro: a 72.0 by 152.8 mm body, flat-edged slab, centred punch-hole
   camera, Roboto type, and Material tonal cards. Beside the iPhone, the two
   share the column and the Pixel sits lower, so the pair reads as a set. */
.fm-app__phones:has([data-phone="android"]) { gap: clamp(.75rem, 2vw, 1.5rem); align-items: flex-start; }
.fm-app__phones:has([data-phone="android"]) .fm-phone { width: min(50%, 320px); }
.fm-phone[data-phone="android"] { aspect-ratio: 72 / 152.8; margin-top: 3rem; border-radius: 2.2rem; }
.fm-phone[data-phone="android"] .fm-phone__screen {
  border-radius: 1.7rem;
  background: #f4fbf9;
  color: #161d1c;
  font-family: Roboto, "Google Sans", "Helvetica Neue", sans-serif;
}
.fm-phone[data-phone="android"] .fm-phone__status { justify-content: flex-start; padding-left: .5rem; }
.fm-phone[data-phone="android"] .fm-phone__camera {
  position: absolute; left: 50%; top: .35rem; width: .85rem; height: .85rem;
  transform: translateX(-50%); border-radius: 50%; background: #000;
}
.fm-phone__appbar { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; }
.fm-phone__appbar .fm-phone__icon { width: 2.5rem; height: 2.5rem; padding: .2rem; border-radius: 50%; }
.fm-phone__appbar p { margin: 0; }
.fm-phone[data-phone="android"] .fm-phone__heading { font-size: 1.45rem; font-weight: 400; }
.fm-phone[data-phone="android"] .fm-phone__checks { gap: .5rem; }
.fm-phone[data-phone="android"] .fm-phone__check { border-radius: 1rem; background: #cce8e3; }
.fm-phone[data-phone="android"] .fm-phone__tick { color: #006a60; }

@media (max-width: 900px) {
  .fm-app { grid-template-columns: minmax(0, 1fr); }
}
/* A phone column cannot hold two legible screens; the pair stacks. */
@media (max-width: 640px) {
  .fm-app__phones:has([data-phone="android"]) { flex-direction: column; align-items: center; }
  .fm-app__phones:has([data-phone="android"]) .fm-phone { width: min(100%, 402px); }
  .fm-phone[data-phone="android"] { margin-top: 0; }
}
/* Narrower than a real Pro, the list tightens so all eight checks stay on screen. */
@media (max-width: 420px) {
  .fm-phone__check { padding: .4rem .7rem; font-size: .75rem; }
  .fm-phone__check-text span { font-size: .68rem; }
}