/*
 * Sell and Rent — the two self-serve listing pages.
 *
 * One file for both because they share the split hero, the listing card and the
 * CTA ink scenes; only the accent colour and a couple of sections differ.
 *
 * A NEW file rather than a rewrite of sell.css / rent.css / home.css, for the
 * same reason home got its own: those files are shared, and rewriting a
 * stylesheet other pages quietly depend on strips them silently. After this,
 * these two pages load only service_pages.css and this file.
 *
 * Spec: docs/Redesign/design_handoff_home_sell_rent/README.md
 */

/* ============================== split hero ==============================
   Transactional pages show the artifact (the listing card); service pages show
   a line-art concept. That split is deliberate. */

/* Same background treatment as .svc-hero — Sell and Rent are navbar pages too,
   and the two shells have always carried the identical gradient. The mesh and
   grain overlay classes are .svc-hero-mesh / .svc-hero-grain from
   service_pages.css, which both pages already load; they are position:absolute
   + inset:0 and need nothing from this shell but its position:relative. */
.lp-hero {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 84% 30%,
    #60a5fa 0%,
    #3b82f6 26%,
    #2563eb 50%,
    #1e40af 76%,
    #14306e 100%);
}

.lp-hero-inner {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  /* Top padding clears the fixed navbar, which overlays rather than sitting in
     flow. */
  padding: 96px 16px 84px;
}

.lp-hero-title {
  margin: 0 0 16px;
  /* Matches the home hero scale — one big moment, capped near Zillow's ceiling. */
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #ffffff;
}

/* Accent words stay white for contrast over the blue gradient (orange text
   metered ~2.6:1 there); the brand orange moves into the underline, which is
   decoration and carries no contrast requirement. */
.lp-hero-accent {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: #ff4f00;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

.lp-hero-sub {
  margin: 0 0 28px;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
}

.lp-hero-sub--rent {
  color: rgba(255, 255, 255, 0.9);
}

/* ---- the listing card ---- */

.lp-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.15),
    0 32px 64px rgba(7, 77, 136, 0.4);
}

.lp-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---- Sell's card: the ORIGINAL overlay design, restored at owner direction
   2026-08-05. Ported from the retired home_services hero-card rules; scoped
   under .lp-card so nothing leaks. Rent keeps the scrim variant above. ---- */

.lp-card .hero-listing-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.lp-card .hero-badge-vana {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #FF4F00 0%, #D94300 100%);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
    0 4px 12px rgba(7, 77, 136, 0.4);
}

.lp-card .hero-badge-vana i {
  font-size: 0.875rem;
}

.lp-card .hero-badge-status {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lp-card .hero-listing-info {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 24px;
  background: linear-gradient(
    to top,
    rgba(5, 30, 65, 0.95) 0%,
    rgba(7, 50, 100, 0.88) 50%,
    rgba(7, 77, 136, 0.55) 75%,
    transparent 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 0 0 24px 24px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

.lp-card .hero-listing-address {
  margin-bottom: 4px;
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.lp-card .hero-listing-tagline {
  margin-top: 8px;
  font-size: 0.9375rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.lp-card .hero-listing-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
}

.lp-card .hero-listing-details span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lp-card .hero-listing-details i {
  font-size: 0.875rem;
  color: #FF4F00;
}


/* ---- the hero search shell ---- */

.lp-search {
  max-width: 560px;
}

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

.lp-search input[type="text"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* No leading icon; the icon-only action button owns the right side. */
  padding: 17px 84px 17px 22px;
  font-size: 16px;
  color: #0f172a;
  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);
}

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

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

.lp-search--rent input[type="text"]:focus {
  border-color: #2563eb;
  box-shadow: 0 12px 34px rgba(8, 20, 60, 0.35), 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.lp-search-field > button {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  padding: 0;
  font-size: 17px;
  color: #ffffff;
  white-space: nowrap;
  /* Icon-only: non-text contrast needs 3:1, so white on #FF4F00 passes. */
  background: #ff4f00;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lp-search-field > button:hover {
  background: #d94300;
}

/* Rent's icon-only button keeps the category blue. */
.lp-search--rent .lp-search-field > button {
  background: #2563eb;
}

.lp-search-btn-label {
  display: none;
}

.lp-accordion-row:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 6px;
}

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

.lp-search--rent .lp-search-field > button:hover {
  background: #1d4ed8;
}

.lp-search .suggestions-container {
  max-height: 350px;
  overflow-y: auto;
  z-index: 9999;
  color: #0f172a;
  text-align: left;
  border: 1px solid #e5e7eb;
}

/* ============================== media slot ============================== */

.lp-video {
  max-width: 940px;
  margin: 0 auto 52px;
}


.lp-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.13);
}

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

/* The Screen Studio capture does not exist yet, so this is what ships. */
.lp-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--svc-faint, #94a3b8);
  background: var(--svc-tint, #f8fafc);
}

.lp-video-placeholder i {
  font-size: 30px;
  color: var(--svc-hairline, #cbd5e1);
}

.lp-video-caption {
  margin-top: 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #334155;
}

.lp-tool-label {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svc-faint, #94a3b8);
}

.lp-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Compact tool cards: icon inline with the title instead of stacked above it. */
.lp-tool-card {
  padding: 18px 20px 16px;
}

.lp-tool-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.lp-tool-head i {
  font-size: 16px;
  color: var(--svc-orange);
}

.lp-tool-head .svc-card-title {
  margin-bottom: 0;
}

.lp-tool-tag {
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--svc-faint, #94a3b8);
}

.lp-inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 26px;
  margin-top: 46px;
}

.lp-inline-cta span {
  font-size: 18px;
  font-weight: 500;
  color: #334155;
}

/* ============================ handle accordion ============================ */

/* `start`, not `stretch`. Stretched, the photo column matched whatever height
   the accordion happened to be, so opening an answer grew the row and resized
   the image with it — the whole block appeared to move for a click that should
   only have opened one row. The media keeps its own 460px instead. */
.lp-handle {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr);
  gap: clamp(36px, 6vw, 88px);
  /* stretch, not start: the photo matches the accordion column's height. */
  align-items: stretch;
}

.lp-handle-media {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border-radius: 16px;
}

.lp-handle-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
}

.lp-handle-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 48, 110, 0.94) 0%,
    rgba(20, 48, 110, 0.78) 26%,
    rgba(20, 48, 110, 0.5) 50%,
    rgba(20, 48, 110, 0.74) 78%,
    rgba(20, 48, 110, 0.84) 100%
  );
}

.lp-handle-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 28px 26px;
}

.lp-handle-question {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-wrap: pretty;
}

.lp-handle-licence-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff8a50;
}

.lp-handle-licence-body {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
}

.lp-handle-title {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--svc-ink, #0f172a);
  text-wrap: pretty;
}

.lp-handle-blurb {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--svc-muted, #475569);
}

.lp-accordion-item {
  border-bottom: 1px solid var(--svc-border-soft, #eef2f7);
}

.lp-accordion-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 20px 0;
  font-family: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.lp-accordion-question {
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--svc-ink, #0f172a);
  text-wrap: pretty;
}

.lp-accordion-chevron {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 12px;
  color: var(--svc-faint, #94a3b8);
  transition: transform 0.2s ease, color 0.2s ease;
}

.lp-accordion-row[aria-expanded="true"] .lp-accordion-chevron {
  color: var(--svc-orange, #ff4f00);
  transform: rotate(180deg);
}

.lp-accordion-panel {
  padding: 0 0 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--svc-body, #475569);
  text-wrap: pretty;
}











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

/* The 72px gap above the band is padding here, NOT a top margin on the band.
   As a margin it collapsed out of both the band and this section and exposed
   the grey page background as a stripe above the CTA — the same bug the home
   closing CTA had. */
.lp-closing {
  padding: 72px clamp(24px, 5vw, 64px) 96px;
  background: #ffffff;
}

.lp-closing-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 — three hairline directions echo the logo key's
     faceted triangle grid, quieter cousin of the square band texture. */
  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);
}

.lp-closing-copy {
  max-width: 660px;
}

.lp-closing-line {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: pretty;
}

/* The single management plug on Rent, below a hairline. Do not add a second
   listing CTA here — that reads as a bait-and-switch on "free". */
.lp-handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 26px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.lp-handoff-copy {
  flex: 1 1 260px;
  min-width: 240px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}

.lp-scene-rent {
  flex: 0 0 auto;
  width: 206px;
  height: auto;
  overflow: visible;
}

.lp-scene-sell {
  flex: 0 0 auto;
  width: 176px;
  height: auto;
  margin-left: auto;
  overflow: visible;
}

/* ============================== ink scenes ==============================
   steps(1) is what makes the boil read as hand-drawn rather than a smooth
   wobble. Do not change it to a smooth timing function. */

@keyframes rcDraw { 0%, 6% { stroke-dashoffset: 1 } 24%, 100% { stroke-dashoffset: 0 } }
@keyframes rcBoil {
  0% { transform: translate(0, 0) }
  33% { transform: translate(0.4px, -0.3px) }
  66% { transform: translate(-0.3px, 0.4px) }
  100% { transform: translate(0, 0) }
}
@keyframes rcBadge { 0%, 28% { transform: scale(1) } 33% { transform: scale(1.09) } 38% { transform: scale(1) } 43% { transform: scale(1.09) } 48%, 100% { transform: scale(1) } }
@keyframes rcPulse1 { 0%, 28% { transform: scale(0.7); opacity: 0 } 34% { opacity: 0.8 } 52% { transform: scale(1.5); opacity: 0 } 100% { transform: scale(1.5); opacity: 0 } }
@keyframes rcPulse2 { 0%, 36% { transform: scale(0.7); opacity: 0 } 42% { opacity: 0.55 } 60% { transform: scale(1.75); opacity: 0 } 100% { transform: scale(1.75); opacity: 0 } }
@keyframes rcLean { 0%, 46% { transform: rotate(0deg) } 64%, 88% { transform: rotate(38deg) } 100% { transform: rotate(0deg) } }
@keyframes rcArm { 0%, 52% { opacity: 0 } 64%, 88% { opacity: 1 } 96%, 100% { opacity: 0 } }
@keyframes rcArmFlat { 0%, 46% { opacity: 1 } 56%, 92% { opacity: 0 } 100% { opacity: 1 } }
@keyframes soSwing { 0%, 22% { transform: rotate(0deg) } 40% { transform: rotate(5deg) } 58% { transform: rotate(-3.5deg) } 74% { transform: rotate(1.5deg) } 88%, 100% { transform: rotate(0deg) } }
@keyframes soStamp { 0%, 30% { opacity: 0; transform: scale(0.82) rotate(-8deg) } 40% { opacity: 1; transform: scale(1.06) rotate(-8deg) } 48%, 100% { opacity: 1; transform: scale(1) rotate(-8deg) } }

.lp-boil {
  animation: rcBoil 0.42s steps(1) infinite;
}

.lp-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: rcDraw 6s ease-out infinite;
}

/* The stagger is an animation-delay per stroke so the whole cascade shares one
   duration. */
.lp-d0 { animation-delay: 0s }
.lp-d1 { animation-delay: 0.05s }
.lp-d2 { animation-delay: 0.1s }
.lp-d3 { animation-delay: 0.15s }
.lp-d4 { animation-delay: 0.2s }
.lp-d5 { animation-delay: 0.25s }
.lp-d6 { animation-delay: 0.3s }
.lp-d7 { animation-delay: 0.35s }
.lp-d8 { animation-delay: 0.4s }
.lp-d9 { animation-delay: 0.45s }
.lp-d10 { animation-delay: 0.5s }
.lp-d11 { animation-delay: 0.55s }
.lp-d12 { animation-delay: 0.58s }
.lp-d13 { animation-delay: 0.6s }
.lp-d14 { animation-delay: 0.7s }

/* Rent scene — the figure leans up at the hip and never picks up the phone.
   That is the point. The reaching arm is authored at about -70deg so the +38deg
   lean resolves it to about -32deg, aiming at the badge; if the badge moves,
   re-author the path rather than changing the rotation. */
.lp-lean {
  transform-origin: 152px 90px;
  animation: rcLean 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.lp-arm-reach {
  animation: rcArm 6s ease-out infinite;
}

.lp-arm-flat {
  animation: rcDraw 6s ease-out 0.6s infinite, rcArmFlat 6s ease-out infinite;
}

.lp-badge-group,
.lp-pulse {
  transform-origin: 226px 34px;
}

.lp-badge-group {
  animation: rcBadge 6s ease-in-out infinite;
}

.lp-pulse-1 {
  animation: rcPulse1 6s ease-out infinite;
}

.lp-pulse-2 {
  animation: rcPulse2 6s ease-out infinite;
}

/* Sell scene — damped swing settling on the bracket, then the stamp overshoots
   to 1.06 and settles. */
.lp-swing {
  transform-origin: 71px 32px;
  animation: soSwing 6s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

.lp-stamp {
  transform-origin: 71px 70px;
  animation: soStamp 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lp-boil,
  .lp-boil *,
  .lp-draw,
  .lp-lean,
  .lp-swing,
  .lp-stamp,
  .lp-badge-group,
  .lp-pulse-1,
  .lp-pulse-2,
  .lp-arm-reach,
  .lp-arm-flat {
    animation: none !important;
  }

  .lp-draw {
    stroke-dashoffset: 0;
  }

  /* Frozen, the two arms would overlap. */
  .lp-arm-reach {
    opacity: 0;
  }
}

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

@media (max-width: 1023px) {
  .lp-hero-inner,
  .lp-handle {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-tool-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

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

  /* Matches .home-hero-inner's mobile padding: the fixed navbar is ~72px tall
     on a phone and overlays the hero, so the old 40px top tucked the h1 under
     the bar. */
  .lp-hero-inner {
    padding: 104px 16px 72px;
  }

  /* Same call the service pages make with .svc-hero-art: on a phone the card
     has no second column to live in, so it goes. display:none, not removal —
     it stays the ip-location target. */
  .lp-card {
    display: none;
  }

  /* The button stays INSIDE the pill on a phone (owner 2026-09-10 — every hero
     carries the same field, matching /find and the service pages). Stacked it
     cost ~78px of vertical space and read as a section CTA rather than part of
     the field. 62px of right padding is room for a 48px button plus its 8px
     inset and no more; the 84px desktop reservation was sized for a 64px one. */
  .lp-search input[type="text"] {
    padding: 17px 62px 17px 20px;
  }

  .lp-search-field > button {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: auto;
    width: 48px;
    height: 48px;
    margin-top: 0;
    padding: 0;
    justify-content: center;
    font-size: 17px;
  }

  /* Icon-only at every width now, so the verb stays off. */
  .lp-search-btn-label {
    display: none;
  }

  .lp-handle-title {
    font-size: 27px;
  }

  .lp-closing {
    padding: 48px 20px 64px;
  }

  .lp-closing-band {
    margin-top: 48px;
    padding: 32px 24px;
  }

  .lp-closing-line {
    font-size: 19px;
  }

  /* Button and scene share a row on a phone rather than stacking into three
     bands (owner 2026-09-10). The copy takes the full width above them; the
     scene shrinks with the viewport and margin-left:auto keeps it hard right of
     the button. They still wrap apart below ~344px, where a 176px button and
     any legible drawing simply do not both fit in 232px of inner width. */
  .lp-closing-band {
    gap: 12px;
    justify-content: flex-start;
  }

  .lp-closing-copy {
    flex: 1 1 100%;
  }

  .lp-closing-band .svc-btn {
    padding: 14px 20px;
  }

  /* .lp-scene-sell only — NOT .lp-scene-rent, which is the night-call graphic
     nested inside rent's copy block beside its caption, not a sibling of the
     button. Shrinking that one and pushing it right would break that pairing. */
  .lp-scene-sell {
    width: clamp(68px, 20vw, 120px);
    margin-left: auto;
  }
}

/* ======================= everything under one roof =======================
   The Properkey / Others comparison table. Three columns throughout, so the
   header, every row and the summary line share one grid definition — if they
   drift the ticks stop lining up under their heading. */

.lp-compare {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e8eef7;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.05);
}

.lp-compare-head,
.lp-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 96px;
  gap: 14px;
  align-items: center;
}

.lp-compare-head {
  padding: 14px 22px;
  background: #f8fafc;
  border-bottom: 1px solid #e8eef7;
}

.lp-compare-us {
  justify-self: center;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: #14306e; /* flat navy per ruling C — 12px text never sits on orange */
  border-radius: 999px;
}

.lp-compare-them {
  justify-self: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}

.lp-compare-group {
  padding: 11px 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}

.lp-compare-row {
  padding: 14px 22px;
  border-bottom: 1px solid #f1f5f9;
}

.lp-compare-name {
  font-size: 15px;
  color: #334155;
  text-wrap: pretty;
}

.lp-compare-yes {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
}

.lp-compare-yes i,
.lp-compare-yes .svg-inline--fa {
  font-size: 12px;
}

.lp-compare-other {
  justify-self: center;
  font-size: 13px;
  color: #64748b;
}

/* A dash is "we checked and it is not there", not a shrug. Lighter than the
   wording so the eye reads the words first. */
.lp-compare-other--not {
  font-size: 15px;
  color: #cbd5e1;
}

.lp-compare-row--summary {
  padding: 17px 22px;
  background: rgba(255, 79, 0, 0.06);
  border-bottom: 0;
}

.lp-compare-row--summary .lp-compare-name {
  font-weight: 700;
  color: #0f172a;
}

.lp-compare-yes--summary {
  font-weight: 700;
  color: #c23a00;
}

.lp-compare-note {
  margin: 26px auto 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
  color: #64748b;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  /* The two verdict columns get tighter rather than wrapping under the name. */
  .lp-compare-head,
  .lp-compare-row {
    grid-template-columns: minmax(0, 1fr) 78px 62px;
    gap: 10px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .lp-compare-group {
    padding-left: 14px;
    padding-right: 14px;
  }

  .lp-compare-name {
    font-size: 14px;
  }
}

/* Narrowest phones only. The in-pill button costs the placeholder ~46px of the
   content width the stacked layout used to leave, and "Enter your property
   address" lands 4px over at 320. Trimming the insets rather than the copy
   keeps the three pages that share that string intact. */
@media (max-width: 380px) {
  .lp-search input[type="text"] {
    padding-left: 16px;
    padding-right: 58px;
  }
}

/* ============================= /sell redesign =============================
   docs/Redesign/design_handoff_sell_page (2026-10-07). Everything below is
   /sell's and prefixed .sp-; /rent and /compare keep the .lp- rules above.

   The prototype's inline animation styles live here as classes: each element
   that moves carries [data-anim] in the markup, and its rule below holds its
   own duration and delay. Under reduced motion every one of them renders its
   final frame.

   Where the prototype put padding and a max-width on the same box (the hero
   row, the closing band) it measured the max-width on the content, so those
   two boxes are content-box here; Tailwind's preflight makes everything else
   border-box. */

/* The fixed navbar overlays the page rather than sitting in flow, so the hero
   and the sticky art card both start below it: 96px tall on desktop, 78px on
   a phone. */
/* --sp-muted-on-tint: the prototype's #64748b measures 4.44:1 on the #f5f7fb
   tint, under AA for the small print. Two steps darker clears it (4.57:1)
   without a visible change. */
.sp-page {
  --sp-nav: 96px;
  --sp-muted-on-tint: #627289;
}

@media (max-width: 767px) {
  .sp-page {
    --sp-nav: 78px;
  }
}

/* The self-hosted face is 'Inter var' (inter-font.css, Tailwind's font-sans);
   .svc-page asks for plain Inter, which isn't defined, so it falls back to the
   system face. The prototype is set in Inter, and so are the navbar and footer
   around this page. */
.svc-page.sp-page,
.sp-page svg text {
  font-family: 'Inter var', Inter, system-ui, sans-serif;
}

@keyframes shDraw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
/* Damped, so it reads as a sign settling on its hooks rather than a pendulum. */
@keyframes shSwing { 0% { transform: rotate(-9deg) } 34% { transform: rotate(5deg) } 60% { transform: rotate(-2.6deg) } 82% { transform: rotate(1deg) } 100% { transform: rotate(0deg) } }
@keyframes shStamp { 0% { transform: scale(1.9); opacity: 0 } 55% { transform: scale(0.94); opacity: 1 } 78% { transform: scale(1.04) } 100% { transform: scale(1); opacity: 1 } }
@keyframes shRise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes shStrike { from { transform: scaleX(0) } to { transform: scaleX(1) } }
/* The stamp's impact kicks the sign; forwards-only so it never overrides the
   arrival swing before it starts. */
@keyframes shKick { 0% { transform: rotate(0deg) } 30% { transform: rotate(3.2deg) } 62% { transform: rotate(-1.6deg) } 100% { transform: rotate(0deg) } }
@keyframes shDrop { 0% { transform: translateY(-30px); opacity: 0 } 55% { transform: translateY(3px); opacity: 1 } 78% { transform: translateY(-1px) } 100% { transform: none; opacity: 1 } }
@keyframes shSettle { 0% { transform: rotate(4.5deg) } 34% { transform: rotate(-3deg) } 60% { transform: rotate(1.4deg) } 84% { transform: rotate(-0.5deg) } 100% { transform: rotate(0deg) } }
@keyframes shSway { 0%, 100% { transform: rotate(0deg) } 50% { transform: rotate(0.8deg) } }
@keyframes shStampIn { 0% { opacity: 0; transform: scale(1.6) rotate(-10deg) } 60% { opacity: 1; transform: scale(0.96) rotate(1deg) } 100% { opacity: 1; transform: scale(1) rotate(0deg) } }
@keyframes shGlow { from { opacity: 0 } to { opacity: 0.34 } }
@keyframes shRiderSwing { 0% { transform: rotate(7deg) } 30% { transform: rotate(-5deg) } 55% { transform: rotate(2.6deg) } 78% { transform: rotate(-1deg) } 100% { transform: rotate(0deg) } }

/* A line that draws itself: pathLength="1" in the markup makes the whole
   stroke one unit long, so a one-unit dash offset by one hides it. */
.sp-draw {
  stroke-dasharray: 1;
  animation: shDraw 600ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

/* ---- sections ---- */

/* line-height: normal is the prototype's default; anything here that sets no
   line-height of its own was measured against it, not against the 1.5 that
   Tailwind's preflight puts on html. */
.sp-section {
  padding: clamp(64px, 8vw, 104px) clamp(20px, 5vw, 64px);
  line-height: normal;
  background: #ffffff;
}

.sp-section--tint {
  background: #f5f7fb;
}

.sp-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.sp-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  margin-bottom: 44px;
}

.sp-head--center {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.sp-h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #0f172a;
  text-wrap: balance;
}

.sp-blurb {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #475569;
  text-wrap: pretty;
}

/* The awards band runs white here, so the hero is followed by two white
   sections split by the band's hairline. --svc-tint also feeds the marquee's
   edge fades, which have to match. */
.sp-page .svc-trust {
  --svc-tint: #ffffff;
}

/* Brand primary: flat orange, 19px/700 so white on #FF4F00 clears the
   large-text bar. */
.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  text-decoration: none;
  background: #ff4f00;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.sp-btn:hover {
  color: #ffffff;
  background: #d94300;
}

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

/* ---- hero ---- */

.sp-hero .svc-hero-mesh {
  -webkit-mask-image: radial-gradient(72% 90% at 78% 50%, transparent 0%, rgba(0, 0, 0, 0.25) 42%, #000 78%);
  mask-image: radial-gradient(72% 90% at 78% 50%, transparent 0%, rgba(0, 0, 0, 0.25) 42%, #000 78%);
}

.sp-hero-inner {
  position: relative;
  z-index: 20;
  box-sizing: content-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 40px 56px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--sp-nav) + clamp(24px, 4vw, 48px)) clamp(20px, 5vw, 64px) clamp(40px, 5vw, 64px);
}

.lp-hero-title.sp-hero-title {
  margin: 0 0 18px;
  font-size: clamp(36px, 4.6vw, 54px);
  line-height: 1.05;
}

.sp-hero-title .lp-hero-accent {
  text-underline-offset: 7px;
}

.lp-hero-sub.sp-hero-sub {
  max-width: 500px;
  margin: 0 0 30px;
  font-size: clamp(16px, 1.5vw, 18px);
  color: rgba(255, 255, 255, 0.94);
}

/* ---- hero sign ---- */

.sp-sign {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 540px;
  justify-self: center;
}

.sp-sign-art {
  aspect-ratio: 560 / 505;
}

.sp-sign-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sp-sign-caption {
  margin: 0;
  line-height: normal;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
}

.sp-s-banner { font-size: 10.5px; font-weight: 600; }
.sp-s-label { font-size: 12.5px; font-weight: 500; }
/* Proportional figures, though the prototype asks for tabular: the strike and
   the stamp were placed against Google's Inter 4, and this site's Inter var 3
   sets tabular digits about 9 units wider, enough to push the struck "0" under
   the stamp. Only the right edge moves during the 0.7s count. */
.sp-s-figure { font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
.sp-s-sold { font-size: 18px; font-weight: 800; letter-spacing: 2.4px; }
.sp-s-keep { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }

/* 1. The ground, house, post and arm draw in. */
.sp-s-house { animation-duration: 800ms; animation-delay: 200ms; }
.sp-s-eave { animation-duration: 350ms; animation-delay: 850ms; }
.sp-s-chimney { animation-duration: 300ms; animation-delay: 700ms; }
.sp-s-door { animation-duration: 400ms; animation-delay: 820ms; }
.sp-s-window { animation-duration: 400ms; animation-delay: 880ms; }
.sp-s-window-late { animation-duration: 400ms; animation-delay: 940ms; }
.sp-s-walk { animation-duration: 450ms; animation-delay: 1000ms; }
.sp-s-bushes { animation-duration: 450ms; animation-delay: 1050ms; }
.sp-s-post { animation-duration: 520ms; animation-delay: 800ms; }
.sp-s-arm { animation-duration: 300ms; animation-delay: 1260ms; }
.sp-s-brace { animation-duration: 220ms; animation-delay: 1400ms; }
.sp-s-hooks { animation-duration: 180ms; animation-delay: 1460ms; }

/* The windows light up as the sign sells. Resting opacity is the final glow,
   so a frozen frame still shows it. */
.sp-s-glow {
  opacity: 0.34;
  animation: shGlow 900ms ease-out 3.55s both;
}

.sp-s-glow-late {
  animation-delay: 3.65s;
}

/* 2. The sign drops onto its hooks and settles, takes the stamp's kick, then
   idles with a slow sway. */
.sp-s-sign {
  transform-box: view-box;
  transform-origin: 200px 80px;
  animation:
    shSettle 1.7s cubic-bezier(0.3, 0.7, 0.4, 1) 1.9s both,
    shKick 800ms cubic-bezier(0.3, 0.7, 0.4, 1) 3.45s forwards,
    shSway 6s ease-in-out 5s infinite;
}

.sp-s-drop {
  animation: shDrop 520ms cubic-bezier(0.3, 0.9, 0.4, 1) 1.6s both;
}

.sp-s-board {
  filter: drop-shadow(0 10px 16px rgba(8, 20, 60, 0.35));
}

/* 3. The typical fee rises in; the controller counts it up from 2.1s. */
.sp-s-fee {
  animation: shRise 400ms ease-out 2000ms both;
}

/* 4. The fee is struck through and the stamp lands. */
.sp-s-strike {
  transform-box: fill-box;
  transform-origin: left center;
  animation: shStrike 300ms ease-out 2.9s both;
}

.sp-s-stamp {
  transform-box: fill-box;
  transform-origin: center;
  animation: shStampIn 380ms cubic-bezier(0.2, 0.9, 0.3, 1.15) 3.35s both;
}

/* 6. The "You keep" rider drops and swings in last. */
.sp-s-rider {
  transform-box: view-box;
  transform-origin: 200px 262px;
  animation:
    shRiderSwing 1.6s cubic-bezier(0.3, 0.7, 0.4, 1) 3.95s both,
    shSway 6s ease-in-out 5.4s infinite;
}

.sp-s-rider-drop {
  animation: shDrop 420ms cubic-bezier(0.3, 0.9, 0.4, 1) 3.8s both;
}

.sp-s-rider-plate {
  filter: drop-shadow(0 8px 12px rgba(8, 20, 60, 0.3));
}

/* ---- journey ---- */

.sp-journey {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px 64px;
  align-items: start;
}

/* Sticks 24px below the fixed navbar. `start` on the grid above is what lets
   it: stretched to the row's height it would have nothing to scroll within. */
.sp-journey-card {
  position: sticky;
  top: calc(var(--sp-nav) + 24px);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -24px rgba(15, 23, 42, 0.25);
}

.sp-journey-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #ffffff;
}

.sp-art-frame {
  position: absolute;
  inset: 0;
  animation: shRise 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.sp-art-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The set first, then the people 140ms behind it. */
.sp-art-set,
.sp-art-cast {
  animation: shRise 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.sp-art-cast {
  animation-delay: 140ms;
}

.sp-steps {
  border-top: 1px solid #eef2f7;
}

.sp-step-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 18px 18px 15px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  border-left: 3px solid transparent;
  transition: background 200ms ease, border-color 200ms ease;
}

.sp-step-row.is-active {
  background: #fff8f4;
  border-left-color: #ff4f00;
}

.sp-step-row:focus-visible,
.sp-faq-row:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.sp-step-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0f172a;
}

/* `rotate`, not a transform: the accordion controller adds Tailwind's
   rotate-180, which is the same property, so the two can never stack to 360. */
.sp-step-chevron,
.sp-faq-chevron {
  flex: 0 0 auto;
  font-size: 13px;
  color: #64748b;
  transition: rotate 250ms ease;
}

.sp-step-row.is-active .sp-step-chevron,
.sp-faq-row[aria-expanded="true"] .sp-faq-chevron {
  rotate: 180deg;
}

.sp-step-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 24px 15px;
  border-bottom: 1px solid #eef2f7;
}

.sp-step-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #64748b;
  text-wrap: pretty;
}

.sp-step-subs {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-step-sub {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
}

.sp-step-sub i {
  flex: 0 0 auto;
  margin-top: 4px;
  font-size: 12px;
  color: #ff4f00;
}

.sp-step-detail {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #14306e;
}

/* ---- how to list ---- */

.sp-how {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sp-video {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* The 16:9 frame. On its own it is the navy placeholder, centred and wrapping
   on a phone so a label never runs out of the frame; --player below swaps that
   for the recording and keeps the radius, shadow and ratio. */
.sp-video-frame {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 16 / 9;
  padding: 20px;
  overflow: hidden;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background-color: #14306e;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  border-radius: 14px;
  box-shadow: 0 24px 50px -24px rgba(8, 20, 60, 0.5);
}

/* The listing walkthrough (sell/_how). The video fills the frame edge to edge,
   and contain plus a black ground letterbox it if the box and the 16:9 file
   ever disagree. The frame's overflow: hidden clips it to the radius; the
   video carries the radius too because Safari can skip that clip once a
   playing video gets its own compositing layer. */
.sp-video-frame--player {
  display: block;
  padding: 0;
}

.sp-video-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border-radius: inherit;
}

/* The frame's overflow: hidden clips the video's own focus ring, so keyboard
   focus on the player outlines the frame instead (4.8:1 on the tint). */
.sp-video-frame:has(.sp-video-player:focus-visible) {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

.sp-video-caption {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--sp-muted-on-tint);
}

.sp-tools {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-tools-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-muted-on-tint);
}

.sp-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 44px 56px;
}

.sp-tool {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid #cfd9e6;
}

.sp-tool-spot {
  display: block;
  margin-bottom: 6px;
}

.sp-tool-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.sp-tool-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #475569;
  text-wrap: pretty;
}

.sp-how-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}

.sp-how-cta-line {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
}

/* Small print under the CTA, the grid's full width. */
.sp-terms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid #dbe3ee;
}

.sp-term {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sp-muted-on-tint);
  text-wrap: pretty;
}

.sp-term strong {
  font-weight: 600;
  color: #475569;
}

/* ---- handle ---- */

.sp-handle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 40px 64px;
  align-items: start;
}

.sp-handle-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #14306e;
  border-radius: 18px;
}

.sp-handle-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-handle-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: linear-gradient(0deg, rgba(11, 26, 61, 0.92) 0%, rgba(11, 26, 61, 0.7) 60%, rgba(11, 26, 61, 0) 100%);
}

.sp-handle-question {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.sp-handle-licence-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffb37a;
}

.sp-handle-licence-body {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #ffffff;
}

.sp-handle-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-handle-blurb {
  margin-bottom: 16px;
}

.sp-faqs {
  border-top: 1px solid #eef2f7;
}

.sp-faq {
  border-bottom: 1px solid #eef2f7;
}

.sp-faq-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 4px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.sp-faq-question {
  flex: 1 1 auto;
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
}

.sp-faq-panel {
  padding: 0 4px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #475569;
  text-wrap: pretty;
}

/* ---- compare ---- */

.sp-compare-wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 960px;
}

.sp-compare-wrap .sp-head--center {
  max-width: none;
}

.sp-compare {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sp-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 150px) minmax(80px, 130px);
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid #eef2f7;
}

.sp-compare-head {
  padding: 16px 24px;
  background-color: #14306e;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  border-top: 0;
}

.sp-compare-us {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}

.sp-compare-mark {
  width: auto;
  height: 18px;
}

.sp-compare-them {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.sp-compare-group {
  padding: 14px 24px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  background: #f8fafc;
  border-top: 1px solid #eef2f7;
}

.sp-compare-name {
  font-size: 15px;
  color: #0f172a;
}

.sp-compare-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #c23a00;
}

.sp-compare-other {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
}

.sp-compare-summary {
  padding: 18px 24px;
  background: #fff8f4;
  border-top-color: #e2e8f0;
}

.sp-compare-summary .sp-compare-name {
  font-size: 16px;
  font-weight: 700;
}

.sp-compare-summary .sp-compare-yes {
  font-size: 15px;
  font-weight: 800;
}

.sp-compare-summary .sp-compare-other {
  font-size: 15px;
  font-weight: 400;
}

.sp-compare-note {
  max-width: 680px;
  margin: 0;
  align-self: center;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
  text-wrap: pretty;
}

/* ---- closing band ---- */

.sp-closing {
  padding-bottom: 96px;
}

.sp-closing-band {
  box-sizing: content-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 44px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px clamp(28px, 4vw, 52px);
  overflow: hidden;
  background-color: #14306e;
  /* The navy surfaces' triangular lattice (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);
  border-radius: 18px;
}

.sp-closing-line {
  max-width: 600px;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #ffffff;
  text-wrap: pretty;
}

.sp-closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 36px;
}

.sp-btn--closing {
  height: 52px;
  padding: 0 26px;
}

.sp-closing-band .sp-btn:focus-visible {
  outline-color: #ffffff;
}

.sp-closing-scene {
  width: 176px;
  height: 116px;
}

.sp-closing-svg {
  display: block;
  width: 176px;
  height: auto;
  overflow: visible;
}

.sp-c-walls { animation-duration: 500ms; animation-delay: 150ms; }
.sp-c-roof { animation-duration: 500ms; animation-delay: 280ms; }
.sp-c-door { animation-duration: 400ms; animation-delay: 400ms; }
.sp-c-post { animation-duration: 450ms; animation-delay: 450ms; }
.sp-c-arm { animation-duration: 350ms; animation-delay: 800ms; }
.sp-c-ground { animation-duration: 500ms; }
.sp-c-hooks { animation-duration: 200ms; animation-delay: 1s; animation-timing-function: ease-out; }
.sp-c-board { animation-duration: 500ms; animation-delay: 1.1s; }
.sp-c-line { animation-duration: 300ms; animation-delay: 1.5s; animation-timing-function: ease-out; }

.sp-c-swing {
  transform-box: view-box;
  transform-origin: 71px 30px;
  animation: shSwing 1.6s cubic-bezier(0.3, 0.7, 0.4, 1) 1.1s both;
}

.sp-c-stamp {
  transform-box: fill-box;
  transform-origin: center;
  animation: shStamp 500ms cubic-bezier(0.3, 1.4, 0.5, 1) 2s both;
}

/* ---- play-on-view ----
   A scene under play_on_view_controller waits, paused on its first frame,
   until the controller adds .is-playing. Without JavaScript it shows its last
   frame instead, since nothing would ever start it. */
[data-controller~="play-on-view"]:not(.is-playing) [data-anim] {
  animation-play-state: paused;
}

@media (scripting: none) {
  [data-controller~="play-on-view"] [data-anim] {
    animation: none;
  }

  [data-controller~="play-on-view"] [data-draw] {
    stroke-dashoffset: 0;
  }
}

/* Reduced motion: every animated element in its final frame, no movement. */
@media (prefers-reduced-motion: reduce) {
  .sp-page [data-anim] {
    animation: none !important;
  }

  .sp-page [data-draw] {
    stroke-dashoffset: 0 !important;
  }

  .sp-step-row,
  .sp-step-chevron,
  .sp-faq-chevron {
    transition: none;
  }
}

/* One column below ~782px, where the grid has no second track: the art card
   sits above the steps, so it stops sticking rather than riding over them. */
@media (max-width: 782px) {
  .sp-journey-card {
    position: static;
  }
}

/* Phones. The table's value columns are minmax(96px, 150px) and
   minmax(80px, 130px), and a grid grows fixed tracks to their max before a
   flexible one sees any space, so at 390 the feature names were left about 40px
   and ran under "Included". Fixed value columns and tighter insets give the
   names the rest. */
@media (max-width: 640px) {
  .sp-compare-row {
    grid-template-columns: minmax(0, 1fr) 100px 60px;
    gap: 8px;
    padding: 12px 16px;
  }

  .sp-compare-head {
    padding: 14px 16px;
  }

  .sp-compare-group {
    padding: 12px 16px 6px;
  }

  .sp-compare-summary {
    padding: 16px;
  }
}

/* The closing band keeps its button and scene on one row on a phone rather
   than stacking into three bands (owner 2026-09-10, carried over from the
   earlier band). The scene shrinks with the viewport and sits hard right; the
   two still wrap apart on the narrowest screens. */
@media (max-width: 767px) {
  .sp-closing-band {
    gap: 20px 12px;
  }

  .sp-closing-actions {
    flex: 1 1 100%;
    gap: 12px;
  }

  .sp-closing-scene {
    width: clamp(68px, 20vw, 120px);
    height: auto;
    margin-left: auto;
  }

  .sp-closing-svg {
    width: 100%;
  }
}