/*
 * Service pages shared skeleton — Insure · Escrow · Finance · Manage
 * -----------------------------------------------------------------
 * The rhythm every service page follows: navy gradient hero with the page's
 * line art confined to the right half behind a left-to-right scrim, an
 * alternating section background, one card spec, one CTA band.
 *
 * Spec: docs/Redesign/design_handoff_service_pages/README.md
 *
 * Everything is scoped under .svc-page. Class names like .awards-scroll and
 * .award-logo also exist in home_services.css for home and sell, so the scope
 * is load-bearing — without it this file would restyle those pages too.
 */

.svc-page {
  --svc-orange: #ff4f00;
  --svc-orange-hover: #d94300;
  --svc-orange-deep: #c23a00;
  --svc-ink: #0f172a;
  --svc-ink-soft: #1e293b;
  --svc-body: #475569;
  --svc-muted: #64748b;
  --svc-faint: #64748b; /* was #94a3b8 — 2.5:1 on light backgrounds */
  --svc-hairline: #cbd5e1;
  --svc-tint: #f8fafc;
  --svc-tint-deep: #f1f5f9;
  --svc-border: #e8eef7;
  --svc-border-soft: #eef2f7;
  --svc-ease: cubic-bezier(0.23, 1, 0.32, 1);

  /* clip, not hidden. overflow-x:hidden forces overflow-y to compute to auto,
     which makes this wrapper the scroll container for everything inside it —
     and a position:sticky descendant then has nothing to stick to, because this
     box never scrolls. The how-it-works rail is sticky. clip guards against
     horizontal scroll without creating a scroll container. */
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ============================== hero ============================== */

/* Deliberately NOT overflow:hidden, even though the spec puts it on the hero.
   The address-autocomplete dropdown opens downward out of the hero, and
   clipping here swallows it — the old stylesheet had a wall of
   `overflow: visible !important` fighting exactly that. The art layer below
   does the clipping instead, which is all the artwork actually needs. */
.svc-hero {
  position: relative;
  min-height: 600px;
  /* A radial clearing rather than a corner-to-corner ramp: the light end pools
     in the upper right behind the line art and the deep navy falls to the left
     behind the copy, instead of the light end running off the right edge. */
  background: radial-gradient(120% 100% at 84% 30%,
    #60a5fa 0%,
    #3b82f6 26%,
    #2563eb 50%,
    #1e40af 76%,
    #14306e 100%);
}

/* Triangular mesh, masked to open a clearing around the line art.
   The mask reads inverted on purpose — transparent at the centre, opaque at the
   edges. The transparent centre is what erases the mesh where the art sits, so
   no mesh line ever crosses the key, the umbrella or the pig.

   z-index 0, not the 1 the spec names: in this file the art layer is already 1
   and the scrim 2, so 0 is what puts the mesh under both without renumbering
   two layers the page stylesheets override. */
.svc-hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px);
  -webkit-mask-image: radial-gradient(72% 90% at 82% 46%, transparent 0%, rgba(0, 0, 0, 0.25) 42%, #000 78%);
  mask-image: radial-gradient(72% 90% at 82% 46%, transparent 0%, rgba(0, 0, 0, 0.25) 42%, #000 78%);
}

/* Fine grain — kills the gradient banding a radial ramp shows on wide displays.
   The data URI has to stay in double quotes: the SVG carries single quotes of
   its own, and an unquoted url() silently invalidates the whole declaration. */
.svc-hero-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Art layer. Each page sets its own left edge — Insure starts at 56%. */
.svc-hero-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 56%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Lifts the left-hand copy off the artwork — a wash, not a wall.
   It used to open on opaque #14306e, which turned the first third of every
   service hero near-black while sell and rent, which have no scrim at all, read
   as one blue field. The gradient's own left end is #1e40af, dark enough to
   carry white text on its own, so this only has to take the edge off. */
.svc-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(20, 48, 110, 0.5) 0%,
    rgba(20, 48, 110, 0.3) 26%,
    rgba(30, 64, 175, 0.1) 48%,
    rgba(37, 99, 235, 0) 66%
  );
}

/* The navbar partial renders inside the hero, above the copy, and needs to
   sit on the same layer so its links stay clickable over the scrim. */
.svc-hero > nav,
.svc-hero > header,
.svc-hero-nav {
  position: relative;
  z-index: 30;
}

.svc-hero-inner {
  position: relative;
  z-index: 20;
  max-width: 1280px;
  margin: 0 auto;
  padding: 76px 16px 104px;
}

.svc-hero-title {
  margin: 0 0 20px;
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #ffffff;
}

.svc-hero-sub {
  margin: 0 0 32px;
  max-width: 500px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}

/* ---- hero search shell -------------------------------------------------
   The field itself is the existing address-autocomplete component. Only this
   wrapper's visual shell belongs to the redesign, so the selectors reach the
   real <input> and submit <button> rather than replacing them. */

.svc-search {
  max-width: 546px;
}

.svc-search-field {
  position: relative;
}

.svc-search-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
  font-size: 16px;
  color: var(--svc-orange);
}

.svc-search input[type="text"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 17px 158px 17px 42px;
  font-size: 16px;
  color: var(--svc-ink);
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(8, 20, 60, 0.35);
}

.svc-search input[type="text"]::placeholder {
  color: #6b7280;
}

.svc-search input[type="text"]:focus {
  outline: none;
  border-color: var(--svc-orange);
  box-shadow: 0 12px 34px rgba(8, 20, 60, 0.35), 0 0 0 3px rgba(255, 79, 0, 0.25);
}

/* Direct child only. Insure submits a real submit button; Manage uses a
   type="button" that user-listing-start drives. Scoping to the direct child
   catches both without reaching into the suggestions dropdown. */
.svc-search-field > button {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  background: var(--svc-orange);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.svc-search-field > button:hover:not(:disabled) {
  background: var(--svc-orange-hover);
}

/* --iconbtn: the modernized field — no leading icon, icon-only orange pill
   (non-text contrast: 3:1, so bright orange is legal), visible verb at 19px/700
   on the full-width mobile pill. Manage uses it; other pages adopt it in their
   own passes. */
.svc-search--iconbtn input[type="text"] {
  padding: 17px 84px 17px 22px;
}

.svc-search--iconbtn .svc-search-field > button {
  justify-content: center;
  width: 64px;
  padding: 0;
  font-size: 17px;
}

.svc-search--iconbtn .svc-search-btn-label {
  display: none;
}

/* Mobile: the pill goes full width, so it carries its visible verb. */
@media (max-width: 767px) {
  .svc-search--iconbtn .svc-search-field > button {
    width: 100%;
    gap: 10px;
    padding: 14px 22px;
    font-size: 19px; /* large-bold: white on #FF4F00 passes at 3:1 */
    font-weight: 700;
  }

  .svc-search--iconbtn .svc-search-btn-label {
    display: inline;
  }
}

.svc-search-field > button:focus-visible,
.svc-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.svc-range:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

/* Insure's controller enables the button once an address resolves. */
.svc-search-field > button:disabled {
  opacity: 0.65;
  cursor: default;
}

.svc-search-field > button i {
  font-size: 13px;
}

/* The autocomplete dropdown.
   address_autocomplete_controller positions this itself — it writes
   position:fixed plus top/left/width from the input's rect and keeps them in
   step on scroll and resize, so the list escapes any clipping ancestor. Inline
   styles win over anything here that is not !important, so this rule only
   supplies appearance and deliberately does not restate position. The old
   per-page stylesheets fought the controller with a wall of
   `position: absolute !important`; letting it do its job is simpler and means
   one behaviour across every page. */
.svc-search .suggestions-container {
  max-height: 350px;
  overflow-y: auto;
  z-index: 9999;
  pointer-events: auto;
  color: var(--svc-ink);
  text-align: left;
  border: 1px solid #e5e7eb;
}

/* ============================ trust band ============================
   shared/_awards_scroll rendered on the tint. Self-contained on purpose: the
   marquee mechanics in home_services.css are gated behind a class that
   hero_video_controller only adds when the home page's hero video finishes,
   which never happens here. */

.svc-trust {
  padding: 32px 0 40px;
  background: var(--svc-tint);
  border-bottom: 1px solid var(--svc-border-soft);
}

.svc-trust .awards-section {
  padding: 0;
}

.svc-trust .awards-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.svc-trust .stat-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  /* Only wraps when a stat carries a :detail sub-line. No page passes one
     today (Find's custom row is gone), but the partial's API still offers it. */
  flex-wrap: wrap;
  justify-content: center;
}

.svc-trust .stat-detail {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.01em;
  /* The line spans its whole wrapped flex row, so the row's
     justify-content can't center it — the text has to center itself. */
  text-align: center;
  color: var(--svc-faint);
}

.svc-trust .stat-number {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--svc-ink-soft);
  /* Find's price range is a whole phrase, not a figure. Without this it breaks
     after the dash on a narrow window and reads as two prices. */
  white-space: nowrap;
}

.svc-trust .stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--svc-muted);
}

.svc-trust .stat-divider {
  width: 1px;
  height: 24px;
  background: #e2e8f0;
}

.svc-trust .awards-scroll-wrapper {
  position: relative;
  overflow: hidden;
}

.svc-trust .awards-fade-left,
.svc-trust .awards-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.svc-trust .awards-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--svc-tint), transparent);
}

.svc-trust .awards-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--svc-tint), transparent);
}

.svc-trust .awards-track {
  overflow: hidden;
}

.svc-trust .awards-scroll {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: scroll-awards 30s linear infinite;
  animation-play-state: running;
}

.svc-trust .awards-scroll:hover {
  animation-play-state: paused;
}

.svc-trust .awards-set {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-shrink: 0;
}

.svc-trust .award-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.svc-trust .award-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@keyframes scroll-awards {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ============================= sections =============================
   No two adjacent sections share a background. */

.svc-section {
  padding: 88px clamp(24px, 5vw, 64px) 96px;
  background: #ffffff;
}

.svc-section--tint {
  background: var(--svc-tint);
  border-top: 1px solid var(--svc-border-soft);
}

/* For a section that continues the one above it rather than starting a new
   band — drops the top padding but keeps the bottom. */
.svc-section--joined {
  padding-top: 0;
}

.svc-section-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.svc-section-head {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--svc-border-soft);
}

.svc-section-head--plain {
  padding-bottom: 0;
  border-bottom: 0;
}

.svc-section-head--center {
  margin-bottom: 44px;
  padding-bottom: 0;
  text-align: center;
  border-bottom: 0;
}

/* text-align centres the words inside the blurb, but .svc-blurb is capped at
   720px with no auto margins — so in a 1280px section the block itself sat left
   and the copy read as off-centre under a centred heading. */
.svc-section-head--center .svc-blurb {
  margin-left: auto;
  margin-right: auto;
}

/* Brand standard (see .claude/skills/brand): deep orange only — the bright
   #ff4f00 is 3.2:1 on light backgrounds and fails AA at this size. The old
   `--bright` modifier that overrode this to the bright orange is gone; the
   class may linger in markup harmlessly. */
.svc-eyebrow {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--svc-orange-deep);
}

.svc-h2 {
  margin: 0 0 14px;
  /* Section standard set on home 2026-08-05: one big hero moment, then 32px
     sections — see .claude/skills/brand. */
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--svc-ink);
  text-wrap: pretty;
}

.svc-h2:last-child {
  margin-bottom: 0;
}

.svc-blurb {
  margin: 0;
  max-width: 640px; /* ~78ch at this size; 720px ran ~90ch lines */
  font-size: 16px;
  line-height: 1.6;
  color: var(--svc-muted);
  text-wrap: pretty;
}

/* ============================== cards ============================== */

.svc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.svc-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.svc-card:hover {
  border-color: var(--svc-orange);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

.svc-card-icon {
  margin-bottom: 18px;
  font-size: 19px;
  color: var(--svc-orange);
}

.svc-card-title {
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--svc-ink-soft);
}

.svc-card-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--svc-muted);
  text-wrap: pretty;
}

/* Compact single-line variant — the "other ways to save" tiles. */
.svc-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.svc-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.svc-tile:hover {
  border-color: var(--svc-orange);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

.svc-tile i {
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--svc-orange);
}

.svc-tile span {
  font-size: 15px;
  font-weight: 600;
  color: var(--svc-ink-soft);
}

/* ============================ list rows ============================ */

.svc-row-item {
  padding: 13px 0;
  font-size: 15px;
  color: var(--svc-body);
  border-bottom: 1px solid var(--svc-tint-deep);
  /* Background only — an animated padding-left re-lays the row out every
     frame; the indent below applies in one step and the fade masks it. */
  transition: background 0.2s ease;
}

.svc-row-item:hover {
  background: var(--svc-tint);
  padding-left: 8px;
}

/* ============================= buttons ============================= */

.svc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.svc-btn i {
  font-size: 14px;
}

.svc-btn--primary {
  padding: 16px 32px;
  font-size: 19px; /* large-bold text: 3:1 threshold applies, white on #FF4F00 (3.3:1) passes AA */
  font-weight: 700;
  color: #ffffff;
  background: var(--svc-orange);
  box-shadow: 0 4px 16px rgba(255, 79, 0, 0.3);
}

.svc-btn--primary:hover {
  color: #ffffff;
  background: var(--svc-orange-hover);
  box-shadow: 0 6px 22px rgba(255, 79, 0, 0.42);
}

.svc-btn--sm {
  padding: 14px 28px;
  font-size: 15px;
}

.svc-btn--sm i {
  font-size: 13px;
}

/* ============================ closing CTA ============================ */

.svc-cta {
  padding: 0 clamp(24px, 5vw, 64px) 88px;
  background: #ffffff;
}

.svc-cta-band {
  max-width: 1280px;
  margin: 0 auto;
  padding: 62px clamp(28px, 5vw, 72px) 66px;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;
  background-color: #14306e;
  /* Triangular lattice — the band texture standard (see .claude/skills/brand). */
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px);
}

.svc-cta-title {
  margin: 0 0 14px;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #ffffff;
  text-wrap: pretty;
}

.svc-cta-copy {
  margin: 0 auto 30px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
}

.svc-cta-band .svc-btn--primary {
  padding: 16px 34px;
  box-shadow: 0 6px 22px rgba(255, 79, 0, 0.36);
}

.svc-cta-band .svc-btn--primary:hover {
  box-shadow: 0 10px 30px rgba(255, 79, 0, 0.5);
}

/* ========================= hero button rows ========================= */

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

/* Finance keeps its three buttons on one line. */
.svc-hero-actions--inline {
  flex-wrap: nowrap;
  gap: 12px;
}

/* One row, one type size at every viewport: the primary matches its white and
   ghost neighbours instead of jumping to the 19px standard (same treatment as
   escrow's hero pair — owner accepts white-on-orange under the AA bar here). */
.svc-hero-actions--inline .svc-btn {
  font-size: 16px;
}

.svc-hero-lede {
  margin: 0 0 14px;
  max-width: 500px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}

.svc-btn--white {
  padding: 16px 30px;
  color: #2563eb;
  background: rgba(255, 255, 255, 0.95);
}

.svc-btn--white:hover {
  color: #2563eb;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(8, 20, 60, 0.28);
}

.svc-btn--ghost {
  padding: 14px 28px;
  color: #ffffff;
  background: rgba(20, 48, 110, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.55);
}

.svc-btn--ghost:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.svc-btn--outline {
  padding: 12px 26px;
  font-size: 15px;
  color: #2563eb;
  background: #ffffff;
  border: 2px solid #2563eb;
}

/* Filled blue. The counterweight to --primary where both actions on a card
   pair should read as real buttons and only one of them is the highlight —
   home's "Ready to make a move?" puts the orange on Sell and this on Buy. */
.svc-btn--blue {
  padding: 16px 32px;
  color: #ffffff;
  background: #2563eb;
  box-shadow: 0 4px 16px rgba(30, 64, 175, 0.28);
}

.svc-btn--blue:hover {
  background: #1d4ed8;
}

.svc-btn--outline:hover {
  color: #ffffff;
  background: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.svc-btn--block {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 15px 24px;
  font-size: 15px;
}

/* ====================== segmented control (pill) ======================
   One implementation, two drivers. Escrow wraps real radio inputs so the
   existing fee controller keeps working untouched and the thumb moves on :has()
   alone. Finance drives it from a controller by setting --seg-index. */

.svc-seg {
  position: relative;
  display: flex;
  padding: 5px;
  background: var(--svc-tint-deep);
  border: 1px solid var(--svc-border);
  border-radius: 999px;
}

.svc-seg-track {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  pointer-events: none;
}

.svc-seg-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--svc-orange);
  box-shadow: 0 2px 8px rgba(255, 79, 0, 0.16);
  transform: translateX(calc(var(--seg-index, 0) * 100%));
  transition: transform 0.35s var(--svc-ease);
}

.svc-seg--3 .svc-seg-thumb {
  width: calc(100% / 3);
}

.svc-seg--4 .svc-seg-thumb {
  width: calc(100% / 4);
}

.svc-seg-btn {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  /* --svc-muted is 4.3:1 on the tint-deep track behind these labels. */
  color: var(--svc-body);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.25s ease;
}

.svc-seg-btn i {
  font-size: 12px;
}

.svc-seg-btn.is-active,
.svc-seg-btn[aria-pressed="true"] {
  color: var(--svc-orange-deep);
}

/* Radio-driven variant. The input stays in the DOM and keeps its name and
   value so the fee controller reads it exactly as before. */
.svc-seg-btn input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.svc-seg-btn:has(input[type="radio"]:checked) {
  color: var(--svc-orange-deep);
}

.svc-seg-btn:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--svc-orange);
  outline-offset: 2px;
}

.svc-seg:has([data-seg="1"] input[type="radio"]:checked) .svc-seg-thumb {
  transform: translateX(100%);
}

.svc-seg:has([data-seg="2"] input[type="radio"]:checked) .svc-seg-thumb {
  transform: translateX(200%);
}

.svc-seg:has([data-seg="3"] input[type="radio"]:checked) .svc-seg-thumb {
  transform: translateX(300%);
}

/* ============================== switch ==============================
   Wraps a real checkbox so the fee controller's .checked reads are unchanged. */

.svc-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
}

.svc-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.svc-switch-track {
  position: relative;
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: var(--svc-hairline);
  transition: background 0.2s ease;
}

.svc-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: #ffffff;
  transition: left 0.2s ease;
}

.svc-switch input[type="checkbox"]:checked + .svc-switch-track {
  background: var(--svc-orange);
}

.svc-switch input[type="checkbox"]:checked + .svc-switch-track::after {
  left: 19px;
}

.svc-switch input[type="checkbox"]:focus-visible + .svc-switch-track {
  outline: 2px solid var(--svc-orange);
  outline-offset: 2px;
}

/* A row whose toggle is not applicable this side — dimmed, not removed. */
.svc-fee-row.is-off .svc-switch {
  cursor: not-allowed;
}

.svc-fee-row.is-off .svc-switch-track {
  background: #e2e8f0;
}

/* ============================== sliders ============================== */

.svc-range {
  width: 100%;
  height: 44px; /* touch-target floor; the native track stays centered */
  accent-color: var(--svc-orange);
  cursor: pointer;
}

/* ========================= panel with header ========================= */

.svc-panel {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--svc-border);
  border-radius: 14px;
}

.svc-panel-head {
  padding: 13px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* --svc-faint is 4.3:1 on this tint — one shade short of AA at this size. */
  color: var(--svc-body);
  background: var(--svc-tint-deep);
  border-bottom: 1px solid var(--svc-border);
}

/* Head with a control on the right — the estimator's Reset lives here. */
.svc-panel-head--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ============================== splits ============================== */

/* 60/40 — copy or media on the left, list on the right. */
.svc-split {
  display: grid;
  grid-template-columns: minmax(320px, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
}

/* Narrow rail on the left, the working column on the right. */
.svc-split--rail {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}

.svc-lede {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--svc-body);
  text-wrap: pretty;
}

.svc-lede--muted {
  color: var(--svc-muted);
}

/* ============================ media slots ============================ */

.svc-media {
  overflow: hidden;
  background: var(--svc-tint);
  border: 1px solid var(--svc-border);
  border-radius: 14px;
}

.svc-media--16x9 {
  position: relative;
  aspect-ratio: 16 / 9;
}

.svc-media--4x3 {
  aspect-ratio: 4 / 3;
}

.svc-media img,
.svc-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Standing in for the Screen Studio recording until the file lands. */
.svc-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--svc-faint);
}

.svc-media-placeholder i {
  font-size: 22px;
  color: var(--svc-hairline);
}

.svc-media-caption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--svc-faint);
}

/* ===================== how it works (shared layout) =====================
   Finance and Manage use the 60/40 version with media instead of ink scenes,
   and their steps are static rows rather than selectors. */

.svc-hiw {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}

.svc-hiw-title {
  margin: 0 0 16px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--svc-ink);
  text-wrap: pretty;
}

.svc-hiw-blurb {
  margin: 0 0 24px;
  max-width: 640px; /* the .svc-blurb measure — unbounded it ran ~90ch */
  font-size: 15px;
  line-height: 1.65;
  color: var(--svc-muted);
  text-wrap: pretty;
}

/* Pushes step 01 below the headline rather than level with the eyebrow. */
.svc-hiw-steps {
  display: flex;
  flex-direction: column;
  padding-top: 72px;
}

.svc-hiw-step {
  display: flex;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--svc-border-soft);
}

/* The selectable variant. Manage keeps the plain <div> rows, so the button
   reset and the active treatment are scoped here rather than on the base —
   and the children become blocks because they are <span>s inside a button,
   where the title's margin-bottom would otherwise do nothing. */
.svc-hiw-step--action {
  width: 100%;
  margin: 0;
  /* The progress line hangs off the bottom edge of this row. */
  position: relative;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--svc-border-soft);
  border-left: 3px solid transparent;
  padding-left: 16px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.svc-hiw-step--action > span {
  display: block;
  min-width: 0;
}

.svc-hiw-step--action .svc-hiw-step-title,
.svc-hiw-step--action .svc-hiw-step-body {
  display: block;
}

.svc-hiw-step--action:hover {
  background: var(--svc-tint);
}

.svc-hiw-step--action.is-active {
  background: var(--svc-tint);
  border-left-color: var(--svc-orange);
}

.svc-hiw-step--action.is-active .svc-hiw-num {
  color: var(--svc-orange);
}

/* ---- the step progress line ----
   The orange line that draws along the bottom of the active step. On Insure it
   is a countdown — the cycle advances when it reaches the end. On Finance the
   steps do not auto-advance, so the same gesture runs once on click; there it
   says "this is the step you picked" rather than "this is how long you have".

   Keyed on the data attribute rather than a page class so both pages get it
   from one rule. The animation sits on .is-active, not on the base, so exactly
   one line is ever running and the rest hold at scaleX(0).

   Declared here rather than in a style attribute, which also means
   how_it_works_controller's cancel/play restart has a rule to fall back on —
   clearing an inline animation property would leave the line rendered full with
   nothing to restore it. 4.2s is STEP_MS in that controller; they must match. */
@keyframes hiwProg {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.svc-page [data-hiw-prog] {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--svc-orange);
  transform: scaleX(0);
  transform-origin: left center;
}

.svc-page .is-active > [data-hiw-prog] {
  animation: hiwProg 4.2s linear forwards;
}

/* Under reduce nothing auto-advances, so a line creeping across would be
   measuring nothing. Shown complete instead; the controller skips its restart
   for the same reason. */
@media (prefers-reduced-motion: reduce) {
  .svc-page [data-hiw-prog] {
    animation: none !important;
    transform: scaleX(1);
  }
}

.svc-hiw-num {
  flex: 0 0 40px;
  padding-top: 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* De-emphasis floor: hairline was 1.5:1 on white. */
  color: var(--svc-muted);
}

.svc-hiw-step-title {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--svc-ink-soft);
}

.svc-hiw-step-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--svc-body);
  text-wrap: pretty;
}

/* Mid-page CTA strip that closes the how-it-works section. */
.svc-midcta {
  padding: 0 clamp(24px, 5vw, 64px) 96px;
  background: #ffffff;
}

.svc-midcta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 44px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px clamp(28px, 4vw, 52px);
  border-radius: 18px;
  overflow: hidden;
  background-color: #14306e;
  /* Triangular lattice — the band texture standard (see .claude/skills/brand). */
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px);
}

.svc-midcta-line {
  max-width: 560px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: pretty;
}

.svc-midcta-band .svc-btn--primary {
  flex: 0 0 auto;
  padding: 15px 30px;
}

/* ============================= money rows ============================= */

.svc-num {
  font-variant-numeric: tabular-nums;
}

/* ======================== hiding, restated louder ========================
   Controllers here hide things two ways: closevana-fees toggles Tailwind's
   .hidden, and loan-categories / payment-estimator toggle the [hidden]
   attribute. Both are single-class specificity, so a per-page rule that sets
   display — .escrow-net-row { display: flex }, .finance-cat-panel
   { display: grid } — wins on source order and the element stays on screen.
   This bit us: net proceeds kept showing on the buyer and refinance sides, and
   all four loan-category panels would have rendered at once.

   Restating both at higher specificity makes hiding win wherever it is applied.
   Keep this at the end of the file. */
.svc-page .hidden,
.svc-page [hidden] {
  display: none;
}

/* =========================== scroll reveal ===========================
   reveal_controller adds .rv-in. The controller bails out entirely under
   reduced motion, and the media query below is the belt to that braces. */

.svc-page [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s var(--svc-ease);
}

/* No JS, no reveal controller — content must never stay hidden. */
@media (scripting: none) {
  .svc-page [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

.svc-page [data-reveal].rv-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .svc-page [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .svc-trust .awards-scroll {
    animation: none !important;
  }
}

/* ============================ responsive ============================ */

@media (max-width: 1024px) {
  /* Below this the art no longer has a right half to live in; the scrim
     takes over the whole hero so the copy keeps its contrast. */
  .svc-hero-art {
    left: 42%;
    opacity: 0.5;
  }

  /* The art sits under the copy at this width, so the wash carries further
     across — still a wash, not the opaque navy it used to be. */
  .svc-hero-scrim {
    background: linear-gradient(
      100deg,
      rgba(20, 48, 110, 0.6) 0%,
      rgba(20, 48, 110, 0.5) 42%,
      rgba(30, 64, 175, 0.34) 72%,
      rgba(37, 99, 235, 0.16) 100%
    );
  }
}

@media (max-width: 1023px) {
  .svc-split,
  .svc-split--rail,
  .svc-hiw {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Step 01 no longer has a headline beside it to clear. */
  .svc-hiw-steps {
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .svc-hero {
    min-height: 520px;
  }

  /* Three across stops fitting long before this. */
  .svc-hero-actions--inline {
    flex-wrap: wrap;
  }

  .svc-hero-actions .svc-btn {
    justify-content: center;
    width: 100%;
  }

  .svc-midcta {
    padding: 0 20px 64px;
  }

  .svc-midcta-band {
    padding: 32px 24px;
  }

  .svc-midcta-line {
    font-size: 19px;
  }

  .svc-hiw-title {
    font-size: 27px;
  }

  .svc-hero-inner {
    padding: 48px 16px 64px;
  }

  .svc-hero-art {
    display: none;
  }

  .svc-search input[type="text"] {
    padding: 16px 18px;
    text-align: left;
  }

  .svc-search-field > button {
    position: static;
    width: 100%;
    margin-top: 12px;
    padding: 14px 22px;
    justify-content: center;
  }

  .svc-section {
    padding: 60px 20px 64px;
  }

  .svc-h2 {
    font-size: 26px;
  }

  .svc-cta {
    padding: 0 20px 64px;
  }

  .svc-cta-band {
    padding: 44px 24px 46px;
  }
}