/* Homepage only: product excerpts follow the existing app and portal UI. */
.faq-answer { display: flow-root; overflow: hidden; }
.faq-list details[data-faq-expanded] summary > b { transition: transform 200ms cubic-bezier(0, 0, 0.2, 1); }
.faq-list details[data-faq-expanded="false"] summary > b { transform: rotate(0); }
.faq-list details[data-faq-expanded="true"] summary > b { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .faq-list details[data-faq-expanded] summary > b { transition: none; } }
.homepage .hero { padding-bottom: 40px; }
.homepage .hero + .services { padding-top: 64px; border-top: 1px solid #12352e12; }
.homepage .hero-grid { grid-template-areas: 'copy replay' 'actions replay'; row-gap: 0; }
.hero-copy { grid-area: copy; align-self: end; }
.hero-action-area { grid-area: actions; align-self: start; }
.homepage .hero-assurance { margin: 18px 0 0; color: var(--ink); font-size: 0.95rem; font-weight: 600; line-height: 1.55; }
.homepage .hero-replay { width: 100%; max-width: 520px; margin: 0; justify-self: end; border: 1px solid #12352e26; border-radius: 16px; background: #f4eddd; }
.hero-replay { grid-area: replay; }
/* Trim only the obsolete lower margin; all map coordinates retain their original scale. */
.replay-frame { position: relative; container-type: inline-size; aspect-ratio: 1000 / 940; overflow: hidden; border-radius: 15px 15px 0 0; background: #f4eddd; }
.replay-frame::before { content: ''; position: absolute; inset: 2.5532% 2.4%; border-radius: 3cqw; background: #fffdf7; box-shadow: 0 0.8cqw 2.4cqw #12352e1a; }
.replay-frame > img, .replay-frame > video, .replay-frame > canvas { position: absolute; inset: 0 auto auto 0; display: block; width: 100%; height: auto; clip-path: inset(2.4% 2.4% 8.4% round 3%); }
.replay-brand-header { position: absolute; top: 2.5532%; left: 2.4%; width: 95.2%; height: 11.4894%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 2.8%; border-radius: 3cqw 3cqw 0 0; background: #12352e; color: #d8e4d7; font: 450 max(9px, 2.3cqw) / 1.2 'Helvetica Neue', Arial, sans-serif; }
.replay-brand-header img { display: block; width: 29%; min-width: 88px; height: auto; }
.replay-brand-header span { white-space: nowrap; }
.replay-live-label { display: inline-flex; align-items: center; gap: 6px; }
.replay-live-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #85d3a0; animation: replay-live-pulse 3s ease-in-out infinite; }
@keyframes replay-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 #85d3a000; } 50% { box-shadow: 0 0 0 3px #85d3a026; } }
@media (prefers-reduced-motion: reduce) { .replay-live-dot { animation: none; } }
.hero-replay [hidden] { display: none !important; }
.hero-replay figcaption { padding: 8px 14px 10px; border-top: 1px solid #12352e12; border-radius: 0 0 15px 15px; background: #f4eddd; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.5; }
.replay-caption-title { display: block; color: var(--ink); font-size: 0.9rem; }
.hero-replay figcaption p { margin: 4px 0 7px; }
.replay-toggle { position: relative; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; color: var(--ink); background: transparent; cursor: pointer; }
.replay-toggle::before { content: ''; position: absolute; inset: 0; margin: auto; box-sizing: border-box; width: 32px; height: 32px; border: 1px solid #12352e44; border-radius: 50%; background: var(--paper-light); }
.replay-toggle svg { position: relative; width: 14px; height: 14px; fill: currentColor; }
.replay-toggle[data-playing="true"] .replay-play-icon, .replay-toggle[data-playing="false"] .replay-pause-icon { display: none; }
.replay-toggle:hover::before { background: #e7ecdf; }
.replay-toggle:focus-visible { outline: 3px solid var(--coral-dark); outline-offset: 3px; }
.hero-replay .map-credit { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 0.6875rem; line-height: 1.5; text-align: right; }
.platform-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.platform-steps > li { min-width: 0; }
.product-detail { position: relative; display: flex; align-items: center; justify-content: center; height: 272px; padding: 24px 20px 48px; overflow: hidden; border: 1px solid #12352e20; border-radius: 8px; background: #e7eddf; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.product-detail strong, .product-detail span, .product-detail small { display: block; }
.portal-excerpt { width: 100%; padding: 20px; background: #fff; border: 1px solid #dcded5; border-radius: 10px; box-shadow: 0 8px 25px #12352e0a; color: #20352d; line-height: 1.5; }
.interface-eyebrow { color: #a64b35; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.interface-title { margin: 4px 0 15px; font-size: 1rem; line-height: 1.25; letter-spacing: -0.025em; }
.layer-excerpt { display: grid; gap: 5px; font-size: 0.7rem; }
.layer-excerpt span { padding: 5px 7px; }
.layer-excerpt i { display: inline-grid; place-items: center; width: 13px; height: 13px; margin-right: 5px; border-radius: 2px; background: #173f35; color: white; font-size: 9px; font-style: normal; }
.layer-excerpt .selected-layer { background: #f2f5f0; border-radius: 4px; font-weight: 650; }
.product-detail .detail-label { position: absolute; inset: auto 10px 15px; color: var(--ink-soft); font: 0.64rem var(--sans); text-align: center; }
.app-detail { background: #eee4d8; padding-top: 18px; align-items: flex-start; }
.phone-excerpt { width: 188px; flex-shrink: 0; padding: 11px 13px 13px; border: 5px solid #20352d; border-radius: 27px; background: #f5f2e9; color: #173f35; box-shadow: 0 10px 20px #12352e16; }
.phone-speaker { width: 43px; height: 4px; border-radius: 5px; margin: -3px auto 10px; background: #20352d; }
.phone-excerpt .interface-eyebrow { color: #bd6235; font-size: 0.48rem; }
.phone-heading { margin-bottom: 8px; font-size: 1rem; line-height: 1.2; }
.phone-assignment { padding: 9px; background: white; border: 1px solid #d9ddd4; border-radius: 10px; line-height: 1.45; }
.phone-assignment strong { font-size: 0.7rem; }
.phone-assignment span { margin-block: 2px; font-size: 0.55rem; font-weight: 600; color: #52685f; }
.phone-assignment small { color: #52685f; font-size: 0.49rem; }
.phone-route-button { margin-top: 8px; padding: 8px; border-radius: 10px; color: white; background: #173f35; font-size: 0.68rem; font-weight: 900; text-align: center; }
.review-detail { background: #e7ece7; }
.review-excerpt { padding: 16px; }
.review-excerpt .interface-title { margin-bottom: 12px; }
.campaign-excerpt { padding: 12px; border: 1px solid #dcded5; border-radius: 7px; background: #fbfcf9; font-size: 0.65rem; }
.campaign-excerpt > strong { font-size: 0.73rem; }
.campaign-excerpt dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 8px 0; color: #59675f; }
.campaign-excerpt dd { margin: 0; }
.campaign-excerpt > span { color: #173f35; font-weight: 700; }
.campaign-excerpt b { float: right; }
.platform-step-copy { padding-top: 25px; }
.platform-number { display: block; margin-bottom: 13px; color: var(--coral-dark); font-size: 0.69rem; font-weight: 750; letter-spacing: 0.035em; }
.platform-step-copy h3 { font-size: 1.3rem; margin-bottom: 12px; }
.platform-step-copy p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.7; }
.platform-footnote { display: grid; grid-template-columns: 1fr 2fr; gap: 28px; margin-top: 30px; padding-top: 18px; border-top: 1px solid #12352e25; color: var(--ink-soft); font-size: 0.73rem; line-height: 1.65; }
.platform-footnote p { margin: 0; }
.product-detail.area-detail { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding: 12px; background: #fffdf7; }
.planning-map-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.planning-map-heading small { margin-top: 4px; color: var(--ink-soft); font-size: 0.625rem; line-height: 1.4; }
.planning-estimate { margin: 0; padding-left: 10px; border-left: 1px solid #12352e26; color: var(--ink); }
.planning-estimate dt { font-size: 0.625rem; line-height: 1.4; }
.planning-estimate dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.planning-map-title { display: flex !important; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: 0.74rem; line-height: 1.4; }
.planning-map-title::before { content: ''; width: 13px; height: 10px; border: 2px dashed #49635d; }
.planning-map { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.planning-map-credit { justify-self: end; color: var(--ink-soft); font-size: 0.625rem; line-height: 1.4; }
@media (max-width: 1000px) {
  .platform-steps { gap: 18px; }
  .product-detail { padding-inline: 12px; }
  .portal-excerpt { padding: 14px; }
  .interface-title { font-size: 0.9rem; }
  .platform-step-copy h3 { font-size: 1.14rem; }
}
@media (max-width: 700px) {
  .homepage .hero { padding-bottom: 32px; }
  .homepage .hero + .services { padding-top: 48px; }
  .homepage .hero-grid { grid-template-areas: 'copy' 'replay' 'actions'; row-gap: 0; }
  .hero-copy { margin-bottom: 24px; }
  .homepage .hero-intro { margin-bottom: 0; }
  .homepage .hero-replay { max-width: 440px; justify-self: center; border-radius: 16px 16px 0 0; border-bottom: 0; }
  .hero-replay figcaption { border-radius: 0; }
  .hero-action-area { justify-self: center; width: 100%; max-width: 440px; padding: 18px 16px 20px; border: 1px solid #12352e26; border-top: 1px solid #12352e12; border-radius: 0 0 16px 16px; background: #f4eddd; }
  .homepage .hero-actions { align-items: center; justify-content: center; margin: 0; }
  .hero-actions .text-link { display: none; }
  .hero-actions .button { width: min(100%, 260px); min-height: 54px; }
  .homepage .hero-assurance { margin-top: 12px; font-size: 0.875rem; text-align: center; }
  .platform-steps { grid-template-columns: 1fr; gap: 30px; }
  .platform-steps > li { display: grid; grid-template-columns: 1fr; }
  .product-detail { height: 244px; padding-inline: max(20px, calc((100% - 310px) / 2)); }
  .app-detail { height: 272px; }
  .platform-step-copy { padding-top: 18px; }
  .platform-step-copy h3 { font-size: 1.25rem; }
  .platform-number { margin-bottom: 9px; }
  .platform-footnote { grid-template-columns: 1fr; gap: 9px; margin-top: 25px; }
}

.replay-controls { display: flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 2px; }
.replay-seek { --replay-progress: 0%; min-width: 0; flex: 1; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background: linear-gradient(to right, #315c4d 0 var(--replay-progress), #cbd3c8 var(--replay-progress) 100%) center / 100% 4px no-repeat; }
.replay-seek::-webkit-slider-runnable-track { height: 4px; background: transparent; border: 0; }
.replay-seek::-moz-range-track { height: 4px; background: transparent; border: 0; }
.replay-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #315c4d; }
.replay-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #315c4d; }
@media (forced-colors: active) { .replay-seek { appearance: auto; -webkit-appearance: auto; background: none; } }
.replay-seek:focus-visible { outline: 3px solid var(--coral-dark); outline-offset: 2px; }
.replay-seek:disabled, .replay-toggle:disabled { cursor: default; opacity: 0.55; }