/*
 * Manage page — the parts that belong to this page only.
 *
 * Hero shell, section rhythm, cards, the shared how-it-works layout and the mid
 * CTA band live in service_pages.css; the hero line art's keyframes live in
 * ink_graphics.css. All three load together from manage/index.
 *
 * Spec: docs/Redesign/design_handoff_service_pages/README.md
 */

/* navbar_home is fixed and roughly 80px tall once the md:h-12 logo is in it.
   .svc-hero-inner's own 76px top padding therefore only just clears it and the
   headline read as though it were tucked under the nav. Same treatment as
   .find-hero, .escrow-hero, .insure-hero and .finance-hero — all five service
   heroes now clear it the same way. */
.manage-hero .svc-hero-inner {
  padding-top: 156px;
}

/* ============================ hero artwork ============================
   Manage's art layer starts further left than the others because the building
   and the sign post need the width. */

.manage-hero .svc-hero-art {
  left: 52%;
}

.manage-hero-beachfront {
  position: absolute;
  right: 16px;
  bottom: 22px;
  width: min(94%, 560px);
  max-height: 78%;
}

/* ======================= advantage calculator =======================
   The section mirrors home's savings-section (owner 2026-08-09): the .savings-*
   shell loads from home_services.css, whose selectors are all class-scoped so
   the rest of that sheet is inert here. Only what home_services does NOT carry
   lives below: the value-prop row's newer treatment (copied from home_page.css,
   which manage must not load), the two manage-only lines, and small overrides. */

.manage-advantage .savings-ring-label {
  text-transform: uppercase;
}

/* The comparison line is the 8% anchor made concrete — both figures live,
   right under the sliders that move them. */
.manage-adv-compare {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--svc-body);
}

.manage-adv-compare strong {
  font-weight: 800;
  color: var(--svc-ink);
}

/* Condensed on owner request (2026-08-09): the section has to fit a laptop
   viewport so the sliders and the ring read together without scrolling.
   Slider tracks stay 44px (touch target) and the CTA stays over 44px tall —
   the tightening is all margins, gaps, and the ring's diameter. */
.manage-advantage {
  padding: 36px 0 32px;
}

.manage-advantage .savings-header {
  margin-bottom: 18px;
}

.manage-advantage .savings-calc-row {
  gap: 28px;
  margin-bottom: 0;
}

.manage-advantage .savings-calc-left {
  gap: 18px;
}

.manage-advantage .savings-calc-right {
  padding: 18px;
}

.manage-advantage .savings-ring-container {
  width: 200px;
  height: 200px;
}

.manage-advantage .savings-ring-amount {
  font-size: 1.75rem;
}

.manage-advantage .savings-cta-button {
  padding: 14px 40px;
}

/* Value-prop row, redesigned treatment — copied from home_page.css (see the
   "savings calculator value props" block there). No icon rule on purpose:
   fontawesome-svg-core replaces <i> with <svg>, so an `i` selector matches
   nothing once the page is live. */
.manage-advantage .savings-info-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #eef2f7;
}

.manage-advantage .savings-info-card {
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #e8eef7;
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.manage-advantage .savings-info-card:hover {
  border-color: #ff4f00;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

.manage-advantage .savings-info-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
  text-transform: none;
}

.manage-advantage .savings-info-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #64748b;
  text-wrap: pretty;
}

/* ============================ page overrides ============================ */

/* The shared .svc-hero-sub is rgba(255,255,255,.86); over this hero's lighter
   gradient stops its right edge metered 3.98:1 at 1440. Near-opaque clears
   AA along the whole line. */
.manage-hero .svc-hero-sub {
  color: rgba(255, 255, 255, 0.97);
}

/* The shared 640px blurb cap measures ~84ch at 16px here; 560px keeps the
   audience intro nearer 70ch. */
.manage-page-wrapper .svc-blurb {
  max-width: 560px;
}

/* Owner-supplied designation mark (2026-08-09), small, off the right of the
   audience section head. */
.manage-audience-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.manage-master-image {
  width: 180px;
  max-width: 28vw;
  height: auto;
  flex-shrink: 0;
}

/* ============================ how it works ============================
   Condensed on owner request (2026-08-09): shorter section padding, a 16:9
   crop instead of 4:3 (object-position keeps the roofline), and tighter step
   rows, so the whole section fits a laptop viewport. */

.manage-hiw-section {
  padding-top: 56px;
  padding-bottom: 64px;
}

.manage-hiw-section .svc-hiw {
  gap: clamp(28px, 4vw, 56px);
}

.manage-hiw-section .svc-hiw-steps {
  padding-top: 36px;
}

.manage-hiw-section .svc-hiw-step {
  padding: 16px 0;
}

.manage-hiw-photo {
  margin-top: 26px;
}

.manage-hiw-photo .svc-media--4x3 {
  aspect-ratio: 16 / 9;
}

/* The photo is framed a little above centre so the roofline stays in shot. */
.manage-hiw-photo img {
  object-position: 50% 46%;
}

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

@media (max-width: 767px) {
  /* Same clearance, against the shorter mobile navbar (h-8 logo). */
  .manage-hero .svc-hero-inner {
    padding-top: 108px;
  }

  .manage-flat-fee-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .manage-flat-fee {
    padding: 24px 20px 26px;
  }
}