/* Transactional page (`/transactional`) — accurate, efficient, speedy.

   The brand layer (`brand-fiat.css`) owns the palette, the serif, the card,
   and the hero glow; this file places them and adds the two pieces of motion
   the page's argument rests on: the turnaround dial, which sweeps a real
   published commitment, and the pipeline pulse, which shows legal work running
   *inside* a sales stage rather than after it.

   Both are decoration. The dial's figure, unit, and qualifier are text inside
   the dial; the pipeline's stages are an ordered list. The
   `prefers-reduced-motion` block at the bottom settles everything. */

/* The dial sweep is a conic gradient whose angle animates. Registering the
   custom property is what makes an angle interpolable at all — without
   `@property` the browser would jump from 0deg to 360deg. */
/* ---- Hero -------------------------------------------------------------- */

.speed-hero {
  position: relative;
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
}

@media (min-width: 60rem) {
  .speed-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

.speed-hero__glow {
  inset-inline: -25vw;
}

.speed-hero__statement {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 40rem;
}

/* The three words are one sentence in the markup, so the heading stays a
   single readable string for a screen reader and for search. The cadence comes
   from the type, not from splitting it into elements. */
.speed-hero__heading {
  margin: 0;
  font-family: var(--fiat-serif);
  font-size: clamp(2.25rem, 6.5vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  animation: speed-heading-in 650ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes speed-heading-in {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.speed-hero__lead {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--nav-color-text-muted);
  animation: speed-heading-in 650ms cubic-bezier(0.16, 1, 0.3, 1) 120ms backwards;
}

.nav-theme a.nav-btn--primary.speed-hero__cta,
.nav-theme a.nav-btn--primary.speed-hero__cta:hover,
.nav-theme a.nav-btn--primary.speed-hero__cta:focus-visible {
  border-color: var(--fiat-brand);
  background: var(--fiat-brand);
  color: var(--fiat-on-brand);
}

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

/* ---- The turnaround dial ----------------------------------------------- */

/* ---- Accurate · Efficient · Speedy ------------------------------------- */

.speed-virtues {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 52rem) {
  .speed-virtues {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The cards share a `fiat-card` shell but reset its stacking margin, since the
   grid owns the gap here. */
.speed-virtue {
  margin: 0;
  animation: speed-virtue-in 600ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(220ms + var(--speed-virtue-index, 0) * 110ms);
  transition: transform 200ms ease-out, border-color 200ms ease-out;
}

.speed-virtue:hover {
  transform: translateY(-4px);
  border-color: var(--fiat-brand);
}

@keyframes speed-virtue-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.speed-virtue__word {
  margin: 0 0 0.5rem;
  font-family: var(--fiat-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--fiat-brand);
}

.speed-virtue__body {
  margin: 0;
  line-height: 1.6;
  color: var(--nav-color-text-muted);
}

/* ---- Shared section furniture ------------------------------------------ */

.speed-heading {
  margin: 0 0 0.75rem;
  font-family: var(--fiat-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
}

.speed-subheading {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fiat-brand);
}

.speed-paragraph {
  margin: 0 0 0.85rem;
  max-width: 62ch;
  line-height: 1.65;
  color: var(--nav-color-text-muted);
}

.speed-paragraph:last-child {
  margin-bottom: 0;
}

/* ---- The fee ----------------------------------------------------------- */

.speed-fee {
  display: grid;
  gap: 2rem;
}

@media (min-width: 60rem) {
  .speed-fee {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 3rem;
  }
}

/* The MSA definition. A term the page makes a commitment about gets spelled
   out where the commitment is made, not in a glossary somewhere else. */
.speed-definition {
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  border-inline-start: 2px solid var(--fiat-brand);
  border-radius: 0 0.75rem 0.75rem 0;
  background: var(--fiat-brand-tint);
}

.speed-definition__term {
  margin: 0 0 0.3rem;
  font-weight: 600;
}

.speed-definition__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--nav-color-text-muted);
}

.speed-included {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.speed-included__item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  animation: speed-item-in 500ms ease-out backwards;
  animation-delay: calc(var(--speed-item-index, 0) * 80ms);
}

/* The tick is drawn rather than lettered, so it carries no glyph a screen
   reader would announce. */
.speed-included__tick {
  flex: none;
  width: 1.25rem;
  aspect-ratio: 1;
  margin-top: 0.15rem;
  border-radius: 999px;
  background: var(--fiat-brand-tint);
  box-shadow: inset 0 0 0 1px var(--fiat-brand-edge);
  position: relative;
}

.speed-included__tick::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.4rem;
  inset-block-start: 0.24rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--fiat-brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@keyframes speed-item-in {
  from {
    opacity: 0;
    transform: translateX(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.speed-included__name {
  margin: 0 0 0.15rem;
  font-weight: 600;
}

.speed-included__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--nav-color-text-muted);
}

/* ---- The sales-cycle pipeline ------------------------------------------ */

/* Two layouts, and the narrow one is the default.
   Stacked, the stages read as a vertical rail — the same shape the litigation
   page's phase rail uses, so the two pages agree about what a sequence looks
   like. Wide, they become four columns under one horizontal rail with the pulse
   crossing it.
   The stacked case used to inherit the wide geometry: a horizontal rail above a
   vertical list, with each stage's node floated 1.6rem above its own text,
   which put every node against the *previous* stage's paragraph. The nodes were
   in a line, just not the line the reader was reading. */
.speed-pipeline {
  position: relative;
  display: grid;
  gap: 1.75rem;
  margin: 1.75rem 0 0;
  padding: 0 0 0 2rem;
  list-style: none;
}

/* The rail. Vertical by default, spanning the stages it threads. */
.speed-pipeline::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: 0.4rem;
  width: 2px;
  border-radius: 999px;
  background: var(--fiat-brand-edge);
}

@media (min-width: 56rem) {
  .speed-pipeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 2rem 0 0;
  }

  /* Horizontal, across the top of the columns. */
  .speed-pipeline::before {
    inset-block: auto;
    inset-block-start: 0.45rem;
    inset-inline: 0;
    width: auto;
    height: 2px;
  }
}

/* The pulse: one dot crossing the whole pipeline. This is the page's argument
   in a single element — the legal step travels with the deal instead of
   stopping it. */
/* Hidden in the stacked layout: it travels along the inline axis, which is the
   rail's axis only once the stages are columns. A dot sliding across the top of
   a vertical list is motion about nothing. */
.speed-pipeline__pulse {
  display: none;
}

@media (min-width: 56rem) {
  .speed-pipeline__pulse {
    display: block;
    position: absolute;
    inset-block-start: 0.1rem;
    inset-inline-start: 0;
    width: 0.75rem;
    aspect-ratio: 1;
    border-radius: 999px;
    background: var(--fiat-brand);
    box-shadow: 0 0 0 4px var(--fiat-brand-tint);
    animation: speed-pulse-travel 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }
}

@keyframes speed-pulse-travel {
  0% {
    inset-inline-start: 0;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    inset-inline-start: calc(100% - 0.75rem);
    opacity: 0;
  }
}

.speed-stage {
  position: relative;
}

/* Beside the stage name, on the rail. The offsets put its centre on the rail's
   centre line and its middle on the name's first line, so it marks the stage it
   belongs to rather than floating between two of them. */
.speed-stage__node {
  position: absolute;
  inset-block-start: 0.4rem;
  inset-inline-start: -1.81rem;
  width: 0.75rem;
  aspect-ratio: 1;
  border: 2px solid var(--fiat-brand-edge);
  border-radius: 999px;
  background: var(--nav-color-surface);
  animation: speed-node-light 6s ease-in-out infinite;
  animation-delay: calc(var(--speed-stage-index, 0) * 1.4s);
}

@media (min-width: 56rem) {
  .speed-stage {
    padding-top: 1.5rem;
  }

  .speed-stage__node {
    inset-block-start: -1.6rem;
    inset-inline-start: 0;
  }
}

@keyframes speed-node-light {
  0%,
  6% {
    border-color: var(--fiat-brand-edge);
    background: var(--nav-color-surface);
  }
  14%,
  40% {
    border-color: var(--fiat-brand);
    background: var(--fiat-brand);
  }
  62%,
  100% {
    border-color: var(--fiat-brand-edge);
    background: var(--nav-color-surface);
  }
}

.speed-stage__name {
  margin: 0 0 0.3rem;
  font-family: var(--fiat-serif);
  font-size: 1.0625rem;
  font-weight: 600;
}

.speed-stage__legal {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--nav-color-text-muted);
}

/* ---- Priced separately ------------------------------------------------- */

.speed-separate__list {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 52rem) {
  .speed-separate__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.speed-separate__item {
  padding: 1.25rem;
  border: 1px solid var(--fiat-card-border);
  border-radius: 0.75rem;
  transition: transform 180ms ease-out, background-color 180ms ease-out;
}

.speed-separate__item:hover {
  transform: translateY(-3px);
  background-color: var(--fiat-brand-tint);
}

.speed-separate__name {
  margin: 0 0 0.4rem;
  font-family: var(--fiat-serif);
  font-size: 1.25rem;
  font-weight: 600;
}

.speed-separate__link {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--fiat-brand);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

/* ---- Scroll-driven reveals --------------------------------------------- */

/* The range ends at `entry 100%` — the moment the card is wholly inside the
   scrollport — rather than inside `cover`, which needs scroll progress a short
   document or a tall window may never have. See the same note in
   `litigation.css`. */
@supports (animation-timeline: view()) {
  .speed-separate__item,
  .speed-virtue {
    animation: speed-card-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  @keyframes speed-card-in {
    from {
      opacity: 0.45;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Motion is decoration here, never information: with it suppressed the dial
   rests filled, the pipeline stays lit, and every figure and sentence on the
   page reads exactly the same. */
@media (prefers-reduced-motion: reduce) {
  .speed-hero__heading,
  .speed-hero__lead,
  .speed-virtue,
  .speed-included__item,
  .speed-separate__item {
    opacity: 1;
    transform: none;
    animation: none;
  }


  .speed-pipeline__pulse {
    display: none;
  }

  .speed-stage__node {
    border-color: var(--fiat-brand);
    background: var(--fiat-brand);
    animation: none;
  }

  .speed-virtue:hover,
  .speed-separate__item:hover {
    transform: none;
  }
}