:root {
  --ink: #111820;
  --muted: #64707c;
  --line: #dce2e5;
  --paper: #f7f8f5;
  --white: #fff;
  --blue: #71a9ee;
  --blue-deep: #397bd0;
  --blue-soft: #e9f3ff;
  --dark: #111923;
  --dark-soft: #1a2a39;
  --green: #2ec978;
  --red: #f26372;
  --radius-xl: 38px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --page: min(1328px, calc(100% - 112px));
  font-family: Inter, "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; min-width: 320px; background: var(--paper); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; padding: 0 max(28px, calc((100vw - 1328px) / 2)); border-bottom: 1px solid rgba(17, 24, 32, .08); background: rgba(247, 248, 245, .88); backdrop-filter: blur(16px); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; width: max-content; font-size: .91rem; font-weight: 800; letter-spacing: -.045em; }
.wordmark-mark { display: grid; width: 33px; aspect-ratio: 1; place-items: center; border-radius: 11px; background: var(--ink); color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; letter-spacing: 0; }
.store-nav { display: flex; align-items: center; gap: 28px; }
.store-nav a { padding: 8px 0; color: #53606a; font-size: .87rem; font-weight: 600; transition: color .2s ease; }
.store-nav a:hover, .store-nav a.is-active { color: var(--ink); }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 13px; }
.language-switch { display: inline-flex; gap: 5px; color: #8b959c; font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
.language-switch a.is-active { color: var(--ink); }
.icon-link { position: relative; display: grid; width: 30px; height: 30px; place-items: center; color: var(--ink); }
.icon-link svg { width: 21px; height: 21px; }
.icon-link i { position: absolute; top: -1px; right: -2px; display: grid; width: 14px; height: 14px; place-items: center; border-radius: 50%; background: var(--blue-deep); color: white; font-size: 8px; font-style: normal; font-weight: 800; }
.menu-toggle { display: none; border: 0; background: transparent; color: var(--ink); }
.menu-toggle svg { width: 23px; height: 23px; }

.section-wrap { width: var(--page); margin: 0 auto; }
.eyebrow { margin: 0 0 12px; color: #6a7780; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; font-weight: 700; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
.eyebrow-light { color: rgba(235, 244, 255, .62); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.075em; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 52px; padding: 0 20px 0 25px; border: 0; border-radius: 999px; background: var(--blue); color: #09233e; font-size: .9rem; font-weight: 800; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.78); }
.button span svg { width: 16px; height: 16px; }
.button:hover { transform: translateY(-2px); background: #8abafa; box-shadow: 0 14px 26px rgba(67, 139, 230, .23); }
.button-quiet { border: 1px solid rgba(17, 24, 32, .15); background: var(--white); color: var(--ink); }

/* Homepage — adapts the reference Current Product Status scene into a retail hero. */
.store-hero { position: relative; display: grid; grid-template-columns: minmax(330px, .78fr) minmax(540px, 1.22fr); min-height: 668px; overflow: hidden; padding: 105px max(56px, calc((100vw - 1328px) / 2)) 70px; background: radial-gradient(circle at 67% 33%, rgba(104, 181, 253, .38), transparent 23%), radial-gradient(circle at 54% 74%, rgba(50, 111, 180, .42), transparent 27%), linear-gradient(132deg, #07101a 7%, #132737 60%, #0c1824); color: white; }
.hero-glow { position: absolute; inset: auto auto -57% 37%; width: 58vw; aspect-ratio: 1; border: 1px solid rgba(178, 220, 255, .1); border-radius: 50%; box-shadow: 0 0 100px 54px rgba(93, 172, 249, .1); }
.hero-copy { position: relative; z-index: 4; align-self: center; max-width: 440px; }
.hero-copy h1 { max-width: 8ch; margin-bottom: 15px; font-size: clamp(4rem, 6.25vw, 6.2rem); font-weight: 750; line-height: .87; }
.hero-subtitle { max-width: 15ch; margin-bottom: 13px; color: #fff; font-size: clamp(1.45rem, 2.4vw, 2.5rem); font-weight: 600; letter-spacing: -.06em; line-height: 1.02; }
.hero-detail { max-width: 34ch; margin-bottom: 30px; color: rgba(234, 242, 250, .7); font-size: .98rem; line-height: 1.5; }
.hero-device { position: relative; z-index: 2; display: grid; align-self: center; place-items: center; min-height: 470px; }
.hero-device img { position: relative; z-index: 2; width: min(790px, 64vw); transform: translate(-30%, 2%) rotate(-4deg); filter: drop-shadow(0 35px 30px rgba(0,0,0,.34)); }
.hero-orbit { position: absolute; border: 1px solid rgba(196, 226, 255, .16); border-radius: 50%; }
.hero-orbit-one { width: min(745px, 53vw); aspect-ratio: 1; }
.hero-orbit-two { width: min(585px, 42vw); aspect-ratio: 1; border-style: dashed; }
.hero-notes { position: absolute; z-index: 3; right: max(56px, calc((100vw - 1328px) / 2)); bottom: 35px; display: flex; gap: 11px; }
.hero-notes article { display: flex; align-items: center; gap: 10px; min-width: 184px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.17); border-radius: 16px; background: rgba(7,18,29,.52); backdrop-filter: blur(12px); }
.hero-notes strong, .hero-notes small { display: block; font-size: .72rem; line-height: 1.35; }
.hero-notes small { color: rgba(255,255,255,.62); }
.note-dot { width: 9px; height: 9px; border: 3px solid rgba(73,218,136,.32); border-radius: 50%; background: #4bd888; }
.note-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: rgba(133, 190, 255, .16); color: #a5ceff; }
.note-icon svg { width: 15px; height: 15px; }

/* Three source-style activity notes, remixed as a dark, asymmetric hero cluster. */
.hero-notifications { position: absolute; z-index: 5; right: clamp(16px, 1.2vw, 20px); bottom: 97px; width: 340px; height: 470px; pointer-events: none; }
.hero-status-note { --tilt: 0deg; position: absolute; display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 12px 14px; border: 1px solid rgba(196,224,249,.22); border-radius: 22px; background: linear-gradient(135deg, rgba(18,39,56,.88), rgba(11,25,37,.74)); box-shadow: 0 20px 38px rgba(0,0,0,.29), inset 0 1px rgba(255,255,255,.07); color: #f7fbff; backdrop-filter: blur(17px) saturate(1.16); transform: translate3d(0,0,0) rotate(var(--tilt)); animation: hero-note-float 8s ease-in-out infinite; }
.hero-status-note-home { --tilt: -3deg; top: 0; left: 87px; width: 240px; animation-delay: -2.1s; }.hero-status-note-movement { --tilt: 2.3deg; top: 190px; right: -4px; width: 260px; animation-delay: -5.2s; }.hero-status-note-walk { --tilt: -1.6deg; bottom: 20px; left: 98px; width: 250px; animation-delay: -3.7s; }
.hero-status-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(156,202,251,.12); border-radius: 50%; background: rgba(76,138,211,.16); color: #93c7ff; }.hero-status-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }.hero-status-icon-warm { background: rgba(251,190,48,.13); color: #ffcd58; }
.hero-status-copy { display: grid; gap: 3px; min-width: 0; }.hero-status-copy strong { color: #f4f8fb; font-size: .87rem; line-height: 1.18; letter-spacing: -.025em; }.hero-status-copy small { display: flex; align-items: center; gap: 6px; color: rgba(211,227,240,.72); font-size: .71rem; font-weight: 650; line-height: 1.25; }.hero-status-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #28d49a; box-shadow: 0 0 0 4px rgba(40,212,154,.13), 0 0 16px rgba(40,212,154,.45); }.hero-status-dot-warm { width: 7px; height: 7px; margin: 0; background: #ffb82e; box-shadow: 0 0 12px rgba(255,184,46,.35); }
.hero-status-route { display: block; flex: 0 0 88px; width: 88px; color: #70b3ff; filter: drop-shadow(0 0 8px rgba(75,151,250,.22)); }.hero-status-route svg { display: block; width: 100%; height: auto; overflow: visible; }.hero-walk-route { fill: none; stroke: currentColor; stroke-dasharray: 3 4; stroke-linecap: round; stroke-width: 2.5; }.hero-walk-waypoint { fill: currentColor; stroke: rgba(16,35,51,.9); stroke-width: 1.5; }.hero-walk-pin { fill: currentColor; }.hero-walk-pin-center { fill: #0d2132; }.hero-status-duration { color: #85bcff !important; font-size: .82rem !important; }
@keyframes hero-note-float { 0%,100% { transform: translate3d(0,0,0) rotate(var(--tilt)); } 50% { transform: translate3d(0,-9px,0) rotate(var(--tilt)); } }

/* On broad desktops the product can move closer to the right-side status stack. */
@media (min-width: 1600px) {
  .hero-device img { transform: translate(-19%, 2%) rotate(-4deg); }
}

/* The carousel retains the reference interaction: tabs, full-bleed visual slide, overlays, and app mockup. */
.carousel-section { padding-top: 116px; }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 38px; }
.section-intro.compact { display: block; }
.section-intro h2 { max-width: 13ch; margin: 0; font-size: clamp(2.5rem, 4.7vw, 4.55rem); line-height: .93; }
.raddox-carousel { position: relative; }
.carousel-tabs { display: flex; justify-content: center; gap: 7px; margin-bottom: 24px; }
.carousel-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 47px; padding: 0 15px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #6d7781; font-size: .8rem; font-weight: 700; }
.carousel-tabs button svg { width: 18px; height: 18px; }
.carousel-tabs button.is-active { border-color: rgba(54, 115, 185, .1); background: white; color: var(--blue-deep); box-shadow: 0 12px 24px rgba(18, 41, 63, .08); }
.carousel-frame { position: relative; padding: 0 50px; }
.carousel-viewport { overflow: hidden; border-radius: var(--radius-xl); box-shadow: 0 20px 45px rgba(18, 40, 57, .14); }
.carousel-track { display: flex; transition: transform .65s cubic-bezier(.22,1,.36,1); }
.carousel-slide { position: relative; flex: 0 0 100%; height: clamp(500px, 50vw, 645px); overflow: hidden; background: #c9d6df; }
.carousel-slide > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.slide-status { position: absolute; top: 11%; right: 8%; display: flex; align-items: center; gap: 13px; min-width: 210px; padding: 14px 17px; border: 1px solid rgba(255,255,255,.65); border-radius: 18px; background: rgba(248,252,255,.86); color: #173552; box-shadow: 0 14px 30px rgba(8,36,62,.13); backdrop-filter: blur(12px); }
.slide-status span { display: flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 800; }
.slide-status span svg { width: 18px; height: 18px; color: #3786f5; }
.slide-status small { margin-left: auto; color: #6f8295; font-size: .69rem; }
.slide-status-zone { top: auto; right: auto; bottom: 8%; left: 7%; }
.carousel-phone { position: absolute; bottom: -9%; left: 7%; width: clamp(185px, 20vw, 302px); filter: drop-shadow(0 20px 26px rgba(0,0,0,.3)); }
.activity-overlay, .walk-overlay { position: absolute; display: grid; gap: 8px; padding: 20px; border: 1px solid rgba(255,255,255,.72); border-radius: 22px; background: rgba(255,255,255,.87); color: #1a2a3a; box-shadow: 0 15px 35px rgba(10,31,46,.18); backdrop-filter: blur(12px); }
.activity-overlay { top: 10%; right: 6%; width: 255px; }
.activity-overlay strong { font-size: 1.08rem; }
.activity-overlay span { display: flex; align-items: center; gap: 7px; color: #6d7781; font-size: .77rem; }
.activity-overlay span svg { width: 16px; color: #4eca77; }
.activity-overlay b { display: block; color: #42aa6a; font-size: 2.25rem; letter-spacing: -.08em; }
.walk-overlay { right: 7%; bottom: 8%; min-width: 230px; }
.walk-overlay > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: #e7f5ed; color: #35ad67; }
.walk-overlay > span svg { width: 20px; height: 20px; }
.walk-overlay strong { font-size: 1.05rem; }
.walk-overlay small { color: #66727b; }
.carousel-arrow { position: absolute; z-index: 2; top: 50%; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(17,24,32,.07); border-radius: 50%; background: rgba(255,255,255,.85); color: var(--ink); transform: translateY(-50%); box-shadow: 0 10px 22px rgba(20,37,50,.12); }
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-prev { left: 0; transform: translateY(-50%) rotate(180deg); }
.carousel-next { right: 0; }
.raddox-insight-banner { position: relative; display: grid; grid-template-columns: minmax(190px, .65fr) 1fr; align-items: center; min-height: 260px; margin: -68px 7% 0; overflow: hidden; padding: 34px 52px 34px 285px; border: 1px solid rgba(255,255,255,.88); border-radius: 28px; background: linear-gradient(100deg, #f8fbff, #e4f1ed 76%); box-shadow: 0 22px 38px rgba(24, 52, 73, .11); }
.raddox-insight-banner > img { position: absolute; bottom: -40px; left: 50px; width: 187px; filter: drop-shadow(0 16px 19px rgba(15,44,67,.18)); }
.raddox-insight-banner > div { position: relative; z-index: 2; }
.raddox-insight-banner h3 { margin: 0 0 9px; color: #152f45; font-size: clamp(1.55rem, 2.5vw, 2.4rem); line-height: .95; }
.raddox-insight-banner p:not(.eyebrow) { max-width: 32ch; margin-bottom: 18px; color: #667987; font-size: .9rem; }
.insight-flow { display: flex; align-items: center; gap: 10px; color: #346c93; font-size: .72rem; font-weight: 800; }
.insight-flow i { width: 21px; height: 1px; background: #93b5c9; }
.heatmap { position: absolute; width: 120px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,206,72,.6), rgba(81,196,121,.28) 25%, transparent 65%); filter: blur(8px); }
.heatmap-one { top: -20px; right: 13%; }.heatmap-two { right: -3%; bottom: -38px; transform: scale(1.7); }

/* Directly transferred from the source product-carousel component. The phone is
   deliberately a sibling of the viewport, so it spans the active photo and the
   information banner instead of appearing twice. */
.product-carousel { position: relative; z-index: 3; width: 100%; margin-top: 10px; padding-bottom: clamp(175px, 15vw, 220px); }
.product-carousel-tabs { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3.6vw, 64px); margin-bottom: 28px; }
.product-carousel-tab { display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #6a6d72; font: inherit; font-size: clamp(.94rem, 1.25vw, 1.12rem); font-weight: 600; letter-spacing: -.035em; transition: background 220ms ease, color 220ms ease, padding 220ms ease, box-shadow 220ms ease; }
.product-carousel-tab svg { width: 29px; height: 29px; }
.product-carousel-tab.is-active { padding: 0 34px; background: rgba(255,253,248,.94); color: #377ff0; box-shadow: 0 14px 30px rgba(26,42,61,.08); }
.product-carousel-stage-wrap { position: relative; padding: 0 64px; }
.product-carousel-viewport { overflow: hidden; border-radius: 34px; box-shadow: 0 20px 45px rgba(18,40,57,.14); }
.product-carousel-track { display: flex; transition: transform 600ms cubic-bezier(.22,1,.36,1); will-change: transform; }
.product-carousel-slide { display: grid; position: relative; flex: 0 0 100%; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; background: #c9d6df; }
.product-carousel-slide > img { width: 100%; height: 100%; object-fit: cover; }
.product-carousel-companion { --phone-width: clamp(287px, 33.6vw, 434px); position: absolute; z-index: 3; top: calc(100% - 75px); right: 64px; left: 64px; height: clamp(230px, 18vw, 280px); pointer-events: none; }
.live-location-phone-mockup { position: absolute; z-index: 2; bottom: -12px; left: -58px; width: var(--phone-width); height: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(10,19,25,.2)); }
.live-location-phone-mockup.is-changing-screen { animation: phone-screen-fade 360ms ease-in-out; }
.live-location-phone-mockup[data-phone-screen="2"] { left: clamp(2px, 1.45vw, 21px); width: clamp(184px, 21.5vw, 278px); }
@keyframes phone-screen-fade { 0%, 100% { opacity: 1; } 45% { opacity: .32; } }
.product-carousel-info-banner { position: absolute; z-index: 1; right: 0; bottom: 0; left: calc(var(--phone-width) - clamp(54px, 5vw, 76px) - 55px); height: clamp(160px, 11.5vw, 205px); overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: linear-gradient(90deg, rgba(255,254,251,.98) 0%, rgba(255,254,251,.95) 34%, rgba(255,254,251,.66) 54%, rgba(255,254,251,.1) 82%), linear-gradient(180deg, rgba(8,30,21,.08), rgba(8,30,21,.08)), url("assets/activity-insights-heatmap.png") center 49% / cover; box-shadow: 0 16px 34px rgba(24,38,52,.09); backdrop-filter: blur(12px); pointer-events: auto; }
.insights-banner-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: min(56%, 470px); height: 100%; padding: clamp(16px,1.65vw,27px) clamp(18px,2.05vw,34px); color: #14233c; }
.insights-banner-kicker { margin: 0 0 5px; color: #568b68; font-size: clamp(.55rem,.62vw,.68rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.insights-banner-copy h3 { margin: 0; font-size: clamp(1.18rem,1.82vw,1.9rem); line-height: 1.08; letter-spacing: -.06em; white-space: nowrap; }
.insights-banner-description { margin: clamp(6px,.65vw,10px) 0 0; color: #5f6d7e; font-size: clamp(.6rem,.78vw,.82rem); font-weight: 600; line-height: 1.43; white-space: nowrap; }
.insights-banner-flow { display: flex; align-items: center; gap: clamp(5px,.55vw,9px); margin-top: clamp(10px,1vw,16px); color: #30445d; font-size: clamp(.48rem,.58vw,.64rem); font-weight: 800; letter-spacing: -.02em; }
.insights-banner-flow i { display: block; width: clamp(11px,1vw,17px); height: 1px; border-radius: 999px; background: rgba(92,139,106,.58); }
.insights-heatmap-effects { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.insights-heatmap-spot { position: absolute; width: clamp(56px,6.3vw,105px); height: clamp(56px,6.3vw,105px); border-radius: 50%; opacity: .26; background: radial-gradient(circle, rgba(246,43,28,.94) 0 9%, rgba(255,186,17,.82) 22%, rgba(100,220,67,.48) 43%, rgba(27,177,221,.22) 58%, transparent 72%); filter: blur(2px); mix-blend-mode: screen; transform: scale(.9); animation: heatmap-breathe 7s ease-in-out infinite; }
.insights-heatmap-spot-one { top: 9%; right: 13%; animation-delay: -1.2s; }.insights-heatmap-spot-two { top: 45%; right: 33%; width: clamp(44px,4.8vw,78px); height: clamp(44px,4.8vw,78px); animation-delay: -3.8s; }.insights-heatmap-spot-three { right: 7%; bottom: -20%; width: clamp(76px,8.4vw,138px); height: clamp(76px,8.4vw,138px); animation-delay: -5.6s; }.insights-heatmap-spot-four { top: 4%; right: 48%; width: clamp(36px,4.2vw,66px); height: clamp(36px,4.2vw,66px); animation-delay: -2.6s; }
.product-carousel-info-banner:hover .insights-heatmap-spot { opacity: .6; transform: scale(1.12); }
@keyframes heatmap-breathe { 0%,100% { opacity: .22; } 50% { opacity: .4; } }
.product-carousel-arrow { position: absolute; z-index: 4; top: 50%; display: grid; width: 56px; height: 56px; padding: 0; place-items: center; border: 1px solid rgba(16,16,16,.04); border-radius: 50%; background: rgba(255,253,248,.94); color: #14243a; box-shadow: 0 10px 24px rgba(30,45,61,.08); transform: translateY(-50%); transition: transform 180ms ease, background 180ms ease; }
.product-carousel-arrow:hover, .product-carousel-arrow:focus-visible { background: #fffdf8; transform: translateY(-50%) scale(1.06); }.product-carousel-arrow svg { width: 25px; height: 25px; }.product-carousel-arrow-prev { left: 0; transform: translateY(-50%) rotate(180deg); }.product-carousel-arrow-next { right: 0; }
.live-location-overlay { position: absolute; z-index: 1; top: 16%; left: 15%; width: min(260px,34%); padding: 17px 20px 15px; border: 1px solid rgba(255,255,255,.62); border-radius: 24px; background: rgba(246,247,246,.86); box-shadow: 0 16px 34px rgba(13,25,36,.16); backdrop-filter: blur(15px); pointer-events: none; }
.live-location-overlay-top, .live-location-overlay-bottom, .live-location-dog, .live-location-device, .live-location-battery, .live-location-signal { display: flex; align-items: center; }.live-location-overlay-top { justify-content: space-between; gap: 16px; }.live-location-dog { gap: 10px; color: #17263a; font-size: clamp(1rem,1.6vw,1.3rem); font-weight: 700; letter-spacing: -.045em; }.live-location-dog i { width: 10px; height: 10px; border-radius: 50%; background: #3985f7; box-shadow: 0 0 0 4px rgba(57,133,247,.12); }.live-location-device { gap: 10px; color: #1e2630; font-size: .76rem; font-weight: 800; }.live-location-signal { height: 14px; gap: 2px; align-items: flex-end; }.live-location-signal i { display: block; width: 3px; border-radius: 2px 2px 0 0; background: #1e2630; }.live-location-signal i:nth-child(1){height:5px}.live-location-signal i:nth-child(2){height:8px}.live-location-signal i:nth-child(3){height:11px}.live-location-signal i:nth-child(4){height:14px}.live-location-device strong{font-size:.72rem}.live-location-overlay-bottom { justify-content: space-between; gap: 8px; margin-top: 12px; color: #637180; font-size: clamp(.78rem,1vw,.88rem); line-height: 1.2; }.product-carousel-slide:first-child .live-location-overlay { right: 12%; left: auto; }
.safe-zone-overlay { top: 12%; width: min(208px,29%); padding: 16px 18px 15px; border-color: rgba(255,255,255,.84); box-shadow: 0 12px 25px rgba(18,31,44,.14); }.safe-zone-label, .safe-zone-active { display: inline-flex; align-items: center; gap: 9px; color: #152239; font-size: clamp(1rem,1.4vw,1.18rem); font-weight: 700; letter-spacing: -.04em; }.safe-zone-overlay .live-location-overlay-bottom { justify-content: flex-start; }.safe-zone-overlay .live-location-overlay-bottom > span { padding-left: 19px; font-size: .78rem; }.safe-zone-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #53b871; box-shadow: 0 0 0 3px rgba(83,184,113,.12); }
.safe-zone-details-overlay { position: absolute; z-index: 2; top: 7%; right: 7%; width: min(390px,40%); padding: 17px; border: 1px solid rgba(255,255,255,.82); border-radius: 25px; background: rgba(255,255,255,.92); box-shadow: 0 16px 34px rgba(27,47,47,.18); color: #152943; backdrop-filter: blur(14px); transform: scale(.68); transform-origin: right top; }.safe-zone-fences-title { display: flex; align-items: center; justify-content: space-between; margin: 0 6px 13px; }.safe-zone-fences-title strong { font-size: clamp(1rem,1.45vw,1.24rem); font-weight: 800; letter-spacing: -.045em; }.safe-zone-fences-title > i { display: grid; width: 29px; height: 29px; place-items: center; border: 2px solid #63738a; border-radius: 50%; color: #63738a; font-style: normal; }.safe-zone-fence-card { padding: 14px; border-radius: 21px; background: rgba(255,255,255,.74); }.safe-zone-fence-card + .safe-zone-fence-card { margin-top: 12px; }.safe-zone-fence-card div { display: flex; justify-content: space-between; gap: 8px; }.safe-zone-fence-card strong { font-size: .9rem; }.safe-zone-fence-card small, .safe-zone-fence-card > span { display: block; margin-top: 7px; color: #687383; font-size: .7rem; }

.collar-showcase { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; min-height: 700px; margin-top: 120px; padding: 70px max(56px, calc((100vw - 1328px) / 2)); overflow: hidden; background: #eef6fd; }
.showcase-copy { position: relative; z-index: 2; max-width: 370px; }
.showcase-copy h2 { margin: 0 0 16px; font-size: clamp(2.7rem, 4.4vw, 4.4rem); line-height: .92; }
.showcase-copy p:not(.eyebrow) { margin-bottom: 27px; color: #667580; line-height: 1.55; }
.showcase-device { position: relative; display: grid; min-height: 470px; place-items: center; }
.showcase-device::before { position: absolute; width: min(630px, 50vw); aspect-ratio: 1; border-radius: 50%; background: #c6e0fa; content: ""; }
.showcase-device img { position: relative; z-index: 1; width: min(760px, 61vw); transform: rotate(-7deg); filter: drop-shadow(0 32px 22px rgba(32,83,119,.18)); }
.showcase-device span { position: absolute; z-index: 2; right: 8%; bottom: 10%; display: grid; width: 66px; aspect-ratio: 1; place-items: center; border: 1px dashed #7aabdc; border-radius: 50%; background: rgba(255,255,255,.78); color: #4d7da9; font-family: ui-monospace, monospace; font-size: .72rem; font-weight: 800; }

.connected-platform { padding: 130px 0; }
.platform-heading { max-width: 465px; margin-bottom: 44px; }
.platform-heading h2 { margin: 0 0 19px; color: #081958; font-size: clamp(3rem, 5vw, 4.7rem); line-height: .88; }
.platform-heading p:not(.eyebrow) { max-width: 37ch; color: #6681a4; line-height: 1.5; }
.platform-grid { display: grid; grid-template-columns: .98fr 1.05fr .82fr; gap: 18px; min-height: 730px; color: #0b2257; }
.platform-left { display: grid; grid-template-rows: 1fr 1.1fr; gap: 18px; }
.ui-card, .community-card, .platform-night { overflow: hidden; border: 1px solid rgba(255,255,255,.96); border-radius: 25px; box-shadow: 0 16px 36px rgba(41,73,112,.09); }
.ui-card { padding: 22px; background: white; }
.ui-card header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: .88rem; }
.live-dot { width: 12px; height: 12px; border: 4px solid #dff7ea; border-radius: 50%; background: #20bf65; box-sizing: content-box; }
.circle-arrow { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #e5eaf0; border-radius: 50%; color: #52708e; }.circle-arrow svg { width: 14px; }
.live-card-body { display: grid; grid-template-columns: 58px .55fr 1.2fr; align-items: center; gap: 10px; height: calc(100% - 40px); }
.live-card-body > img:first-child { width: 58px; aspect-ratio: 1; border: 3px solid white; border-radius: 50%; box-shadow: 0 5px 14px rgba(46,67,91,.16); object-fit: cover; }
.live-card-body b, .live-card-body em, .live-card-body small { display: block; }.live-card-body b { font-size: .85rem; }.live-card-body em { color: #13ac55; font-size: .68rem; font-style: normal; font-weight: 700; }.live-card-body small { color: #8a9db5; font-size: .54rem; font-weight: 700; white-space: nowrap; }
.status-map { width: 100%; height: 88px; border-radius: 12px; object-fit: cover; }
.alerts-card { margin-top: 4px; }.shield-dot { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #e7f2ff; color: #3487ea; }.shield-dot svg { width: 17px; }
.alerts-card ul { display: grid; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }.alerts-card li { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 7px; min-height: 47px; padding: 7px; border-radius: 13px; background: #f7faff; }.alerts-card li:first-child { background: linear-gradient(105deg, #fff1f3, #f7fbff); }.alerts-card li > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #ffe0e6; color: var(--red); }.alerts-card li:nth-child(2) > span { background: #fff3dc; color: #eea136; }.alerts-card li svg { width: 15px; }.alerts-card b { font-size: .68rem; }.alerts-card small { color: #8795a4; font-size: .57rem; }
.platform-middle { display: grid; grid-template-rows: 105px 1fr; gap: 18px; }.community-card { display: grid; grid-template-columns: 48px 1fr 22px; align-items: center; gap: 13px; padding: 16px; background: linear-gradient(120deg, #dceeff, #f5fbff); }.community-card > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: #eff7ff; color: #3380eb; }.community-card > span svg { width: 25px; }.community-card b, .community-card small { display: block; }.community-card b { font-size: .83rem; }.community-card small { margin-top: 3px; color: #718db0; font-size: .6rem; }.community-card > svg { width: 17px; color: #607c9a; }.platform-middle > img { width: 100%; height: 100%; overflow: hidden; border-radius: 25px; object-fit: cover; box-shadow: 0 16px 36px rgba(41,73,112,.09); }
.platform-night { position: relative; min-height: 100%; background: #253e66; }.platform-night > img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }.platform-night > div { position: absolute; right: 22px; bottom: 28px; left: 22px; color: white; text-shadow: 0 2px 13px rgba(0,0,0,.35); }.platform-night p { margin-bottom: 8px; font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.platform-night h3 { max-width: 9ch; margin: 0; font-size: clamp(1.7rem, 2.5vw, 2.5rem); line-height: .91; }

.reviews-section { padding: 105px 0 120px; background: #fffdf9; }.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.review-placeholder { min-height: 240px; padding: 28px; border: 1px dashed #ccd4d6; border-radius: 24px; background: #fff; }.review-placeholder > span { display: grid; width: 36px; height: 36px; margin-bottom: 52px; place-items: center; border-radius: 50%; background: #eef4f3; color: #8ca29e; }.review-placeholder h3 { max-width: 14ch; margin: 0 0 10px; font-size: 1.17rem; line-height: 1.02; }.review-placeholder p { max-width: 28ch; margin: 0; color: #77818a; font-size: .83rem; line-height: 1.5; }

/* Keep key storefront statements compact on desktop; narrower layouts may wrap naturally. */
@media (min-width: 1051px) {
  .carousel-section .section-intro h2 { max-width: none; white-space: nowrap; font-size: clamp(2.5rem, 4vw, 4rem); }
  .platform-heading { max-width: none; }
  .platform-heading h2 { white-space: nowrap; font-size: clamp(2.65rem, 4.3vw, 4rem); }
  .platform-heading p:not(.eyebrow) { max-width: none; white-space: nowrap; }
  .reviews-section .section-intro { display: grid; justify-items: center; gap: 8px; margin-bottom: 38px; text-align: center; }
  .reviews-section .section-intro h2 { max-width: none; white-space: nowrap; font-size: clamp(2.5rem, 4vw, 4rem); }
}
.home-product-cta { display: grid; grid-template-columns: minmax(420px, .95fr) 1fr; align-items: center; min-height: 420px; margin-top: 100px; overflow: hidden; border-radius: var(--radius-xl); background: #e8eff4; }.home-product-cta > img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }.home-product-cta > div { max-width: 420px; padding: 60px; }.home-product-cta h2 { margin: 0 0 14px; font-size: clamp(2.35rem, 4vw, 4rem); line-height: .91; }.home-product-cta p:not(.eyebrow) { margin-bottom: 26px; color: #64727d; line-height: 1.5; }

/* Product page */
.product-page { padding-top: 72px; padding-bottom: 120px; }.product-layout { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(330px, .68fr); gap: clamp(42px, 6vw, 90px); align-items: start; }.gallery-main { display: grid; min-height: 610px; place-items: center; overflow: hidden; border-radius: var(--radius-xl); background: radial-gradient(circle at 50% 46%, #d4e8fc 0 22%, #edf5fd 23% 45%, #e7eef2 46% 100%); }.gallery-main img { width: 88%; max-height: 570px; object-fit: contain; filter: drop-shadow(0 24px 23px rgba(30,67,93,.2)); }.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 12px; }.gallery-thumbs button { display: grid; height: 100px; place-items: center; overflow: hidden; padding: 6px; border: 1px solid transparent; border-radius: 15px; background: #edf2f4; }.gallery-thumbs button.is-active { border-color: #79aee7; background: #e7f1fc; }.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }.product-buy-panel { position: sticky; top: 106px; padding: 11px 0 25px; }.product-buy-panel h1 { margin: 0 0 15px; font-size: clamp(3.2rem, 4.5vw, 5.1rem); line-height: .84; }.product-lede { max-width: 27ch; margin-bottom: 32px; color: #65717b; font-size: 1.02rem; line-height: 1.5; }.feature-list { display: grid; gap: 0; margin: 0 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--line); }.feature-list li { display: flex; align-items: center; gap: 12px; min-height: 57px; border-bottom: 1px solid var(--line); font-size: .91rem; font-weight: 700; }.feature-list svg { width: 19px; color: #5194e2; }.product-after { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 8%; margin-top: 150px; padding: 0 6%; }.product-after > img { width: 100%; border-radius: 27px; box-shadow: 0 18px 35px rgba(37,59,75,.11); }.product-after h2 { margin: 0 0 17px; font-size: clamp(2.5rem, 4vw, 4.4rem); line-height: .9; }.product-after p:not(.eyebrow) { max-width: 31ch; color: #687680; line-height: 1.55; }

/* Secondary routes */
.quiet-page, .how-page, .utility-page { min-height: calc(100vh - 235px); padding-top: 115px; padding-bottom: 125px; }.page-intro { max-width: 660px; }.page-intro h1, .utility-shell h1, .preorder-shell h1, .cart-empty h1 { margin: 0 0 18px; font-size: clamp(3.4rem, 6vw, 6.5rem); line-height: .85; }.page-intro p:not(.eyebrow) { max-width: 35ch; color: #66737e; font-size: 1.05rem; line-height: 1.5; }.plan-shells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 75px; }.plan-shells article { min-height: 330px; padding: 28px; border: 1px solid #dae1e2; border-radius: 26px; background: rgba(255,255,255,.62); }.plan-shells span { color: #92a0a8; font-family: ui-monospace, monospace; font-size: .73rem; }.plan-shells h2 { margin: 78px 0 35px; font-size: 1.45rem; }.plan-shells div { height: 11px; margin-top: 13px; border-radius: 99px; background: #e7ecea; }.plan-shells div:nth-of-type(2) { width: 72%; }.plan-shells div:nth-of-type(3) { width: 45%; }
.how-steps { display: grid; gap: 16px; margin: 80px 0 0; padding: 0; list-style: none; }.how-steps li { display: grid; grid-template-columns: 84px minmax(240px, .6fr) minmax(300px, 1fr); align-items: center; gap: 28px; min-height: 330px; padding: 28px 0; border-top: 1px solid #d8dedf; }.how-steps li > span { color: #87a9ca; font-family: ui-monospace, monospace; font-size: .78rem; font-weight: 700; }.how-steps h2 { margin: 0 0 12px; font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: .9; }.how-steps p { max-width: 31ch; margin: 0; color: #697680; line-height: 1.5; }.how-steps figure { display: grid; height: 275px; margin: 0; place-items: center; overflow: hidden; border-radius: 24px; background: #e4eef5; }.how-steps img { width: 100%; height: 100%; object-fit: cover; }.how-steps li:first-child figure img { width: 82%; object-fit: contain; }
.utility-shell, .preorder-shell { display: grid; grid-template-columns: 1fr minmax(300px, .7fr); gap: 11%; padding: clamp(36px, 6vw, 84px); border-radius: var(--radius-xl); background: #e9f3fc; }.utility-shell > div > p:not(.eyebrow), .preorder-shell > div > p:not(.eyebrow) { max-width: 33ch; color: #617889; line-height: 1.5; }.utility-shell form, .preorder-shell form { display: grid; align-content: center; gap: 17px; }.utility-shell label, .preorder-shell label { display: grid; gap: 8px; color: #455866; font-size: .78rem; font-weight: 800; }.utility-shell input, .preorder-shell input { width: 100%; min-height: 56px; padding: 0 17px; border: 1px solid rgba(56, 85, 107, .21); border-radius: 15px; outline: none; background: rgba(255,255,255,.78); color: var(--ink); }.utility-shell input:focus, .preorder-shell input:focus { border-color: #5e9ee7; box-shadow: 0 0 0 3px rgba(94,158,231,.16); }.utility-shell .button, .preorder-shell .button { width: 100%; }.form-note { margin: 2px 0 0; color: #748797; font-size: .76rem; line-height: 1.45; }.form-note.is-visible { color: #2c7b54; font-weight: 700; }.account-shell { align-items: center; }.account-shell img { width: 260px; margin-top: 38px; filter: drop-shadow(0 17px 16px rgba(38,77,104,.16)); }.cart-empty { display: grid; justify-items: center; max-width: 630px; margin: 40px auto 0; padding: 65px 30px; text-align: center; }.cart-empty > span { display: grid; width: 67px; height: 67px; margin-bottom: 29px; place-items: center; border-radius: 50%; background: #e5f1fc; color: #4385d0; }.cart-empty > span svg { width: 31px; height: 31px; }.cart-empty p:not(.eyebrow) { max-width: 38ch; margin-bottom: 25px; color: #697680; line-height: 1.5; }.preorder-shell { position: relative; overflow: hidden; background: #142330; color: white; }.preorder-shell .eyebrow { color: #a8c6e4; }.preorder-shell > div > p:not(.eyebrow) { color: #c2d4e2; }.preorder-shell img { width: calc(100% + 168px); margin: 55px -84px -84px; border-radius: 22px; }.preorder-shell form { position: relative; z-index: 1; padding: 30px; border-radius: 26px; background: #f4f8fa; color: var(--ink); }.preorder-shell .form-note { color: #617889; }

.site-footer { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; width: var(--page); min-height: 145px; margin: 0 auto; border-top: 1px solid #d9e0e1; }.site-footer p { margin: 0; color: #7a858d; font-size: .76rem; text-align: center; }.wordmark-footer { color: var(--ink); }.footer-links { display: flex; justify-content: flex-end; gap: 17px; color: #52606c; font-size: .76rem; font-weight: 700; }

@media (max-width: 1050px) { :root { --page: min(912px, calc(100% - 64px)); }.site-header { grid-template-columns: 1fr auto auto; column-gap: 14px; padding: 0 32px; }.store-nav { position: absolute; top: 76px; right: 24px; left: 24px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 16px; border: 1px solid #dce3e5; border-radius: 19px; background: rgba(255,255,255,.97); box-shadow: 0 20px 40px rgba(22,40,54,.11); }.menu-open .store-nav { display: flex; }.store-nav a { padding: 13px 7px; border-bottom: 1px solid #edf0f1; }.store-nav a:last-child { border: 0; }.menu-toggle { display: block; grid-column: 2; grid-row: 1; margin: 0; }.header-actions { grid-column: 3; grid-row: 1; }.hero-device img { width: min(600px, 58vw); transform: translate(-34%, 2%) rotate(-4deg); }.platform-grid { grid-template-columns: 1fr 1fr; }.platform-night { min-height: 440px; grid-column: 1 / -1; }.platform-night h3 { max-width: 13ch; }.home-product-cta > div { padding: 40px; }.product-layout { gap: 46px; }.product-buy-panel h1 { font-size: 3.7rem; }.how-steps li { grid-template-columns: 54px .76fr 1fr; gap: 18px; }.utility-shell, .preorder-shell { gap: 7%; } }
@media (max-width: 720px) { :root { --page: calc(100% - 40px); --radius-xl: 27px; }.site-header { min-height: 66px; padding: 0 20px; column-gap: 11px; }.wordmark { font-size: .84rem; }.wordmark-mark { width: 29px; border-radius: 10px; }.header-actions { gap: 8px; }.language-switch { font-size: .68rem; }.icon-link { width: 26px; height: 26px; }.icon-link svg { width: 19px; height: 19px; }.store-hero { display: flex; flex-direction: column; min-height: 650px; padding: 68px 20px 26px; }.hero-copy { max-width: 320px; }.hero-copy h1 { font-size: clamp(3.65rem, 17vw, 4.8rem); }.hero-subtitle { font-size: 1.46rem; }.hero-detail { max-width: 30ch; font-size: .86rem; }.hero-device { order: -1; width: 100%; min-height: 205px; }.hero-device img { width: 128%; max-width: none; transform: translate(2%, 1%) rotate(-4deg); }.hero-orbit-one { width: 125%; }.hero-orbit-two { width: 92%; }.hero-notes { right: 20px; bottom: 18px; left: 20px; gap: 8px; }.hero-notes article { min-width: 0; flex: 1; padding: 9px; }.hero-notes strong { font-size: .62rem; }.hero-notes small { font-size: .56rem; }.carousel-section { padding-top: 70px; }.section-intro { margin-bottom: 25px; }.section-intro h2 { font-size: 2.45rem; }.carousel-tabs { justify-content: flex-start; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }.carousel-tabs button { flex: 0 0 auto; min-height: 41px; padding: 0 12px; font-size: .72rem; }.carousel-tabs button span { display: none; }.carousel-frame { padding: 0; }.carousel-slide { height: 455px; border-radius: 24px; }.carousel-viewport { border-radius: 24px; }.carousel-phone { bottom: -6%; left: 6%; width: 174px; }.slide-status { top: 6%; right: 6%; min-width: 0; padding: 10px 11px; }.slide-status small { display: none; }.slide-status-zone { top: auto; right: auto; bottom: 7%; left: 6%; }.activity-overlay { top: 5%; right: 5%; width: 170px; padding: 13px; }.activity-overlay b { font-size: 1.7rem; }.walk-overlay { right: 6%; bottom: 7%; min-width: 170px; padding: 14px; }.carousel-arrow { top: auto; bottom: 13px; width: 37px; height: 37px; transform: none; }.carousel-prev { right: 56px; left: auto; transform: rotate(180deg); }.carousel-next { right: 12px; }.raddox-insight-banner { grid-template-columns: 1fr; min-height: 410px; margin: -22px 10px 0; padding: 198px 25px 25px; }.raddox-insight-banner > img { bottom: auto; left: 50%; width: 142px; transform: translateX(-50%); }.raddox-insight-banner h3 { font-size: 1.85rem; }.insight-flow { gap: 6px; font-size: .6rem; }.insight-flow i { width: 14px; }.collar-showcase { display: flex; flex-direction: column-reverse; align-items: stretch; min-height: 670px; margin-top: 75px; padding: 42px 20px; }.showcase-copy { max-width: none; }.showcase-copy h2 { font-size: 3rem; }.showcase-device { min-height: 310px; }.showcase-device::before { width: 310px; }.showcase-device img { width: 122%; max-width: none; }.showcase-device span { right: 4%; bottom: 4%; }.connected-platform { padding: 83px 0; }.platform-heading h2 { font-size: 3.15rem; }.platform-grid { grid-template-columns: 1fr; min-height: 0; }.platform-left { grid-template-rows: 185px 220px; }.platform-middle { grid-template-rows: 105px 410px; }.platform-night { grid-column: auto; min-height: 400px; }.live-card-body { grid-template-columns: 52px .75fr 1.1fr; }.live-card-body > img:first-child { width: 52px; }.status-map { height: 82px; }.review-grid, .plan-shells { grid-template-columns: 1fr; }.review-placeholder { min-height: 190px; }.review-placeholder > span { margin-bottom: 27px; }.home-product-cta { grid-template-columns: 1fr; margin-top: 70px; }.home-product-cta > img { min-height: 260px; }.home-product-cta > div { padding: 35px 27px 40px; }.product-page { padding-top: 35px; padding-bottom: 75px; }.product-layout { grid-template-columns: 1fr; gap: 35px; }.gallery-main { min-height: 390px; }.gallery-main img { width: 100%; max-height: 370px; }.gallery-thumbs button { height: 74px; }.product-buy-panel { position: static; }.product-buy-panel h1 { font-size: 4rem; }.product-after { grid-template-columns: 1fr; gap: 35px; margin-top: 80px; padding: 0; }.quiet-page, .how-page, .utility-page { min-height: calc(100vh - 191px); padding-top: 65px; padding-bottom: 75px; }.page-intro h1, .utility-shell h1, .preorder-shell h1, .cart-empty h1 { font-size: 3.8rem; }.plan-shells { margin-top: 48px; }.plan-shells article { min-height: 220px; }.plan-shells h2 { margin: 46px 0 26px; }.how-steps { gap: 0; margin-top: 49px; }.how-steps li { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 27px 0 33px; }.how-steps li > span { order: 0; }.how-steps figure { height: 260px; }.utility-shell, .preorder-shell { grid-template-columns: 1fr; gap: 40px; padding: 30px 23px; }.account-shell img { width: 200px; margin-top: 26px; }.preorder-shell img { width: calc(100% + 46px); margin: 34px -23px -30px; border-radius: 0; }.preorder-shell form { padding: 21px; }.site-footer { grid-template-columns: 1fr; justify-items: start; gap: 21px; min-height: 225px; padding: 33px 0; }.site-footer p { text-align: left; }.footer-links { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Direct transfer: Live status and Smart alerts cards from the Raddox reference. */
.connected-platform .platform-grid { grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr); height: 730px; align-items: stretch; }
.connected-platform .platform-left { grid-template-rows: 230px 238px minmax(210px, 1fr); min-height: 0; height: 100%; align-content: stretch; gap: 16px; }
.platform-card { position: relative; min-width: 0; overflow: hidden; padding: clamp(18px, 1.65vw, 24px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: clamp(21px, 2vw, 28px); background: rgba(255, 255, 255, 0.88); box-shadow: 0 15px 32px rgba(44, 74, 109, 0.08); }
.platform-card-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; color: #0a1b5c; font-size: clamp(0.72rem, 0.9vw, 0.95rem); font-weight: 800; letter-spacing: -0.045em; }
.platform-card-arrow { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(49, 85, 128, 0.12); border-radius: 50%; background: rgba(255, 255, 255, 0.72); color: #30577e; }
.platform-card-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; }
.platform-live-dot { width: 13px; height: 13px; border: 4px solid #e4faec; border-radius: 50%; background: #16c365; box-sizing: content-box; }
.platform-live-body { display: grid; grid-template-columns: clamp(58px, 5.2vw, 77px) minmax(48px, 0.42fr) minmax(178px, 1.62fr); align-items: center; gap: clamp(6px, 0.65vw, 10px); height: calc(100% - 40px); padding-top: 18px; }
.platform-live-avatar { width: 100%; aspect-ratio: 1; border: 3px solid #fff; border-radius: 50%; object-fit: cover; object-position: 50% 28%; box-shadow: 0 6px 13px rgba(44, 69, 96, 0.15); }
.platform-live-body > div { display: grid; gap: 2px; min-width: 0; }
.platform-live-body strong { color: #0c1c5d; font-size: clamp(0.8rem, 1.15vw, 1.13rem); font-weight: 800; letter-spacing: -0.065em; }
.platform-live-body b { color: #11ae58; font-size: clamp(0.62rem, 0.76vw, 0.76rem); }
.platform-live-body small { color: #7890b1; font-size: clamp(0.52rem, 0.64vw, 0.62rem); font-weight: 700; white-space: nowrap; }
.platform-live-map { position: relative; display: block; width: 100%; height: min(100%, 156px); overflow: hidden; border-radius: 13px; }
.platform-live-map > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.platform-dog-photo, .platform-map-column { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; border: 1px solid rgba(255, 255, 255, .96); border-radius: 25px; background: #dfe5e7; box-shadow: 0 16px 36px rgba(41, 73, 112, .09); }
.platform-dog-photo img, .platform-map-column img { display: block; width: 100%; height: 100%; object-fit: cover; }
.platform-dog-photo img { object-position: 50% center; }
.platform-map-column img { object-position: 50% center; }
.platform-alerts-card { margin-top: 8px; }
.platform-shield-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #eaf3ff; color: #2684eb; }
.platform-shield-icon svg, .platform-alert-list i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.platform-alert-list { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
.platform-alert-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 33px; border-bottom: 1px solid rgba(62, 97, 133, 0.1); color: #18325d; }
.platform-alert-list li:last-child { border-bottom: 0; }
.platform-alert-list i { display: grid; width: 24px; height: 24px; place-items: center; color: #f19b34; }
.platform-alert-list i.platform-alert-red { color: #f05c6a; }
.platform-alert-list li > strong, .platform-alert-list li > span > strong { min-width: 0; font-size: clamp(0.55rem, 0.67vw, 0.7rem); font-weight: 700; letter-spacing: -0.04em; }
.platform-alert-list time { color: #7a90ae; font-size: clamp(0.48rem, 0.58vw, 0.58rem); font-weight: 700; white-space: nowrap; }
.platform-alert-list .platform-alert-urgent { grid-template-columns: 38px minmax(0, 1fr) auto; min-height: 58px; padding: 7px 9px; border: 0; border-radius: 15px; background: linear-gradient(105deg, #fff1f4, #f6fbff); }
.platform-alert-list .platform-alert-urgent i { width: 38px; height: 38px; border-radius: 13px; background: #ffe0e6; color: #f15b67; }
.platform-alert-list .platform-alert-urgent i svg { width: 21px; height: 21px; }
.platform-alert-list .platform-alert-urgent span { display: grid; gap: 2px; }
.platform-alert-list .platform-alert-urgent span strong { font-size: clamp(0.59rem, 0.74vw, 0.76rem); }
.platform-alert-list .platform-alert-urgent small { color: #8494ad; font-size: clamp(0.48rem, 0.58vw, 0.59rem); font-weight: 600; letter-spacing: -0.03em; }

@media (max-width: 1200px) {
  .connected-platform .platform-grid { height: 708px; }
  .connected-platform .platform-left { grid-template-rows: 188px 238px minmax(220px, 1fr); }
  .platform-live-body { grid-template-columns: clamp(58px, 5.2vw, 77px) minmax(55px, 0.8fr) minmax(112px, 1.25fr); }
  .platform-live-map { height: min(100%, 106px); }
}

@media (max-width: 720px) {
  .connected-platform .platform-grid { grid-template-columns: 1fr; height: auto; }
  .connected-platform .platform-left { grid-template-rows: 178px 244px 235px; gap: 14px; }
  .platform-live-body { grid-template-columns: 67px minmax(64px, 0.8fr) minmax(128px, 1.25fr); }
  .platform-map-column { min-height: 410px; }
}

/* Source Raddox photo overlays — transferred verbatim from the reference. */
.walk-history-overlay {
  position: absolute;
  top: 11%;
  right: 12%;
  width: min(280px, 33%);
  padding: 20px 22px 19px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 27px;
  background: rgba(248, 249, 248, 0.78);
  box-shadow: 0 14px 30px rgba(31, 49, 58, 0.15);
  color: #13223b;
  font-family: "Manrope", sans-serif;
  backdrop-filter: blur(14px);
}

.walk-history-overlay-title,
.walk-history-overlay-meta,
.walk-history-overlay-link {
  display: flex;
  align-items: center;
}

.walk-history-overlay-title {
  gap: 11px;
  font-size: clamp(0.88rem, 1.2vw, 1.04rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.walk-history-overlay-title > i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3f86f3;
}

.walk-history-overlay-title svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.walk-history-overlay-duration {
  margin: 11px 0 4px 37px;
  color: #0e1f38;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: -0.055em;
  line-height: 1;
}

.walk-history-overlay-duration strong {
  font-weight: 500;
}

.walk-history-overlay-duration span {
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.walk-history-overlay-meta {
  gap: 9px;
  margin: 0 0 17px 37px;
  color: #667281;
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.walk-history-overlay-meta i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.walk-history-overlay-link {
  gap: 6px;
  margin-left: 37px;
  color: #2878ed;
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.walk-history-overlay-link svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

/* Keep the Walk result card above the photograph and the shared phone layer. */
.product-carousel-slide .walk-history-overlay {
  z-index: 10 !important;
  top: 9% !important;
  right: 7% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
}

.daily-activity-summary,
.daily-activity-status {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(23, 31, 24, 0.66);
  box-shadow: 0 16px 34px rgba(19, 17, 9, 0.18);
  color: #f8fbf7;
  font-family: "Manrope", sans-serif;
  backdrop-filter: blur(14px);
}

.daily-activity-summary {
  top: 10%;
  right: 7%;
  width: min(390px, 37%);
  padding: 18px 20px;
  border-radius: 25px;
}

.daily-activity-summary-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.daily-activity-summary-heading strong {
  font-size: clamp(0.88rem, 1.25vw, 1.08rem);
  font-weight: 600;
  letter-spacing: -0.04em;
}

.daily-activity-summary-heading span {
  color: rgba(248, 251, 247, 0.7);
  font-size: clamp(0.68rem, 0.85vw, 0.76rem);
  font-weight: 500;
}

.daily-activity-summary-content {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-top: 14px;
}

.daily-activity-goal {
  display: grid;
  width: 102px;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 50%;
  background: conic-gradient(#56d978 0 74%, rgba(255, 255, 255, 0.14) 74% 100%);
}

.daily-activity-goal > div {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 50%;
  background: rgba(25, 35, 27, 0.88);
}

.daily-activity-goal svg {
  width: 25px;
  height: 25px;
  fill: #fff;
}

.daily-activity-goal b {
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
}

.daily-activity-goal small {
  color: rgba(248, 251, 247, 0.76);
  font-size: 0.58rem;
  font-weight: 600;
}

.daily-activity-metrics {
  display: grid;
}

.daily-activity-metrics > div {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.daily-activity-metrics > div:last-child {
  border-bottom: 0;
}

.activity-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.activity-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.activity-icon-steps { color: #62dc83; background: rgba(71, 189, 101, 0.2); }
.activity-icon-steps svg { fill: currentColor; stroke: none; }
.activity-icon-calories { color: #ffad45; background: rgba(232, 153, 49, 0.18); }
.activity-icon-calories svg { fill: currentColor; stroke: none; }
.activity-icon-distance { color: #58a1ff; background: rgba(69, 142, 237, 0.19); }

.daily-activity-metrics span {
  color: rgba(248, 251, 247, 0.82);
  font-size: clamp(0.68rem, 0.88vw, 0.79rem);
  font-weight: 500;
}

.daily-activity-metrics strong {
  font-size: clamp(0.86rem, 1.2vw, 1.04rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.daily-activity-metrics strong small {
  font-size: 0.68em;
  font-weight: 600;
}

.daily-activity-status {
  top: 13%;
  left: 8%;
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(330px, 34%);
  padding: 14px 16px;
  border-radius: 22px;
}

.daily-activity-status > i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 2px solid #59d978;
  border-radius: 50%;
  color: #59d978;
  background: rgba(54, 169, 80, 0.22);
}

.daily-activity-status > i svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.4;
}

.daily-activity-status > span {
  display: grid;
  gap: 4px;
}

.daily-activity-status strong {
  font-size: clamp(0.74rem, 1vw, 0.9rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.daily-activity-status strong b {
  color: #62df81;
  font-weight: 600;
}

.daily-activity-status small {
  color: rgba(248, 251, 247, 0.8);
  font-size: clamp(0.6rem, 0.76vw, 0.68rem);
  font-weight: 500;
  line-height: 1.3;
}

.daily-activity-status em {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #62df81;
  font-size: clamp(0.62rem, 0.8vw, 0.72rem);
  font-style: normal;
  font-weight: 700;
}

.daily-activity-status em svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.daily-activity-status em span {
  color: rgba(248, 251, 247, 0.7);
  font-weight: 500;
}

.safe-zone-details-overlay {
  position: absolute;
  z-index: 2;
  top: 7%;
  right: 7%;
  width: min(390px, 40%);
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 34px rgba(27, 47, 47, 0.18);
  color: #152943;
  font-family: "Manrope", sans-serif;
  backdrop-filter: blur(14px);
  transform: scale(0.68);
  transform-origin: right top;
}

.safe-zone-fences-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 6px 13px;
}

.safe-zone-fences-title strong {
  font-size: clamp(1rem, 1.45vw, 1.24rem);
  font-weight: 800;
  letter-spacing: -0.045em;
}

.safe-zone-fences-title > i {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 2px solid #63738a;
  border-radius: 50%;
  color: #63738a;
}

.safe-zone-fences-title svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.safe-zone-fence-card {
  padding: 14px;
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.74);
}

.safe-zone-fence-card + .safe-zone-fence-card {
  margin-top: 12px;
}

.safe-zone-details-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.safe-zone-details-heading > span:not(.safe-zone-home-icon):not(.safe-zone-actions) {
  display: grid;
  gap: 1px;
}

.safe-zone-details-heading strong {
  color: #152943;
  font-size: clamp(0.92rem, 1.2vw, 1.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.safe-zone-details-heading small {
  color: #718098;
  font-size: clamp(0.68rem, 0.82vw, 0.78rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.safe-zone-home-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(183, 210, 168, 0.35);
  color: #6c9a61;
}

.safe-zone-home-icon svg,
.safe-zone-pond-icon svg,
.safe-zone-actions svg,
.safe-zone-assign svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.safe-zone-home-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.9;
}

.safe-zone-pond-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 166, 170, 0.25);
  color: #eb4e56;
}

.safe-zone-pond-icon svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.8;
}

.safe-zone-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
}

.safe-zone-actions i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(232, 237, 240, 0.72);
  color: #596b84;
}

.safe-zone-actions svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.safe-zone-dogs {
  display: grid;
  grid-template-columns: repeat(2, 120px);
  gap: 10px;
  padding: 12px 0;
}

.safe-zone-dog-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(228, 233, 237, 0.78);
}

.safe-zone-dog-card > span {
  display: grid;
  gap: 1px;
}

.safe-zone-dog-card strong {
  color: #152943;
  font-size: clamp(0.76rem, 0.95vw, 0.88rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.safe-zone-dog-card small {
  color: #4fbe72;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.safe-zone-dog-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #d7e0e6;
  background-repeat: no-repeat;
  background-size: cover;
}

.safe-zone-dog-avatar-max {
  background-image: url("assets/avatar-rex.png");
  background-position: center 28%;
}

.safe-zone-dog-avatar-bella {
  background-image: url("assets/avatar-bella.png");
  background-position: center 28%;
}

.safe-zone-dog-avatar-charlie {
  background-image: url("assets/avatar-charlie.png");
  background-position: center 26%;
}

.safe-zone-dogs-single {
  grid-template-columns: 120px;
}

.safe-zone-assign {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(216, 222, 226, 0.9);
  color: #40536b;
  font-size: clamp(0.72rem, 0.94vw, 0.86rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.safe-zone-assign svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}

.live-location-overlay {
  position: absolute;
  z-index: 1;
  top: 16%;
  left: 15%;
  width: min(260px, 34%);
  padding: 17px 20px 15px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 16px 34px rgba(13, 25, 36, 0.16);
  backdrop-filter: blur(15px);
  pointer-events: none;
}

.live-location-overlay-top,
.live-location-overlay-bottom,
.live-location-dog,
.live-location-device,
.live-location-battery,
.live-location-signal {
  display: flex;
  align-items: center;
}

.live-location-overlay-top {
  justify-content: space-between;
  gap: 16px;
}

.live-location-dog {
  gap: 10px;
  color: #17263a;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
}

.live-location-dog i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3985f7;
  box-shadow: 0 0 0 4px rgba(57, 133, 247, 0.12);
}

.live-location-device {
  gap: 10px;
  color: #1e2630;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.live-location-battery {
  gap: 4px;
}

.live-location-battery svg {
  width: 9px;
  height: 16px;
  color: #1fa968;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.live-location-battery-fill {
  fill: currentColor;
  stroke: none;
}

.live-location-signal {
  height: 14px;
  gap: 2px;
  align-items: flex-end;
}

.live-location-signal i {
  display: block;
  width: 3px;
  border-radius: 2px 2px 0 0;
  background: #1e2630;
}

.live-location-signal i:nth-child(1) { height: 5px; }
.live-location-signal i:nth-child(2) { height: 8px; }
.live-location-signal i:nth-child(3) { height: 11px; }
.live-location-signal i:nth-child(4) { height: 14px; }

.live-location-device strong {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.safe-zone-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #152239;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.safe-zone-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #53b871;
  box-shadow: 0 0 0 3px rgba(83, 184, 113, 0.12);
}

.safe-zone-active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.safe-zone-status-shield {
  width: 18px;
  height: 18px;
  fill: #53b871;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.safe-zone-overlay .live-location-overlay-bottom {
  justify-content: flex-start;
}

.safe-zone-overlay .live-location-overlay-bottom > .safe-zone-active {
  padding-left: 19px;
}

.safe-zone-overlay {
  width: min(208px, 29%);
  padding: 16px 18px 15px;
  border-color: rgba(255, 255, 255, 0.84);
  border-radius: 24px;
  background: rgba(246, 247, 246, 0.86);
  box-shadow: 0 12px 25px rgba(18, 31, 44, 0.14);
  backdrop-filter: blur(13px);
}

.live-location-overlay:not(.safe-zone-overlay) {
  background: rgba(246, 247, 246, 0.86);
}

.product-carousel-slide:first-child .live-location-overlay {
  right: 12%;
  left: auto;
}

.safe-zone-overlay {
  top: 12%;
}

.live-location-overlay-bottom {
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  color: #637180;
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  font-weight: 500;
  line-height: 1.2;
}

.live-location-overlay-bottom > span:first-child {
  padding-left: 20px;
  color: #637180;
  font-family: "Manrope", sans-serif;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.live-location-overlay-bottom span:last-child {
  color: #637180;
  font-family: "Manrope", sans-serif;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.product-carousel-slide-activity .daily-activity-summary,
.product-carousel-slide-activity .daily-activity-status,
.product-carousel-slide-activity .daily-sleep-summary {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.74);
  background: rgba(255, 253, 250, 0.86);
  box-shadow: 0 18px 38px rgba(61, 47, 29, 0.17);
  color: #131b2a;
  font-family: "Manrope", sans-serif;
  backdrop-filter: blur(17px);
}

.product-carousel-slide-activity .daily-activity-summary {
  top: 8%;
  right: 3%;
  left: auto;
  width: min(460px, 31%);
  padding: 18px 20px 20px;
  border-radius: 28px;
  transform: scale(0.82);
  transform-origin: right top;
}

.product-carousel-slide-activity .daily-activity-summary-heading,
.product-carousel-slide-activity .daily-sleep-summary-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 19px;
  align-items: center;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(30, 47, 69, 0.12);
}

.product-carousel-slide-activity .daily-activity-summary-heading strong,
.product-carousel-slide-activity .daily-sleep-summary-heading strong {
  color: #11192a;
  font-size: clamp(0.98rem, 1.35vw, 1.28rem);
  font-weight: 700;
  letter-spacing: -0.055em;
}

.product-carousel-slide-activity .daily-activity-summary-heading span,
.product-carousel-slide-activity .daily-sleep-summary-heading span {
  color: #7c8492;
  font-size: clamp(0.68rem, 0.82vw, 0.78rem);
  font-weight: 500;
}

.daily-card-arrow,
.daily-activity-status-arrow {
  display: grid;
  place-items: center;
  color: #243247;
}

.daily-card-arrow svg,
.daily-activity-status-arrow svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.product-carousel-slide-activity .daily-activity-summary-content {
  grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(12px, 1.35vw, 20px);
  padding-top: 15px;
}

.product-carousel-slide-activity .daily-activity-goal {
  width: clamp(98px, 8.6vw, 126px);
  padding: 9px;
  background: conic-gradient(#51c86e 0 74%, #e5e4e3 74% 100%);
}

.product-carousel-slide-activity .daily-activity-goal > div {
  background: rgba(255, 253, 250, 0.98);
}

.product-carousel-slide-activity .daily-activity-goal svg {
  width: 23px;
  height: 23px;
  fill: #1e2937;
}

/* The source paw remains the same SVG, rendered at a crisp physical size. */
.product-carousel-slide-activity .daily-activity-goal .activity-paw-icon {
  width: 32px;
  height: 32px;
  fill: #172033;
  stroke: none;
  filter: none;
  shape-rendering: geometricPrecision;
  transform: translateZ(0);
}

/* The same clear paw is used wherever Activity identifies the dog’s movement. */
.product-carousel-slide-activity .activity-icon-steps .activity-paw-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
  filter: none;
  shape-rendering: geometricPrecision;
}

.product-carousel-slide-activity .daily-activity-status > i .activity-paw-icon {
  width: 25px;
  height: 25px;
  fill: currentColor;
  stroke: none;
  filter: none;
  shape-rendering: geometricPrecision;
}

.product-carousel-slide-activity .daily-activity-goal b {
  color: #111a29;
  font-size: clamp(1.25rem, 1.75vw, 1.65rem);
  font-weight: 600;
}

.product-carousel-slide-activity .daily-activity-goal small {
  color: #727c89;
  font-size: clamp(0.57rem, 0.66vw, 0.64rem);
}

.product-carousel-slide-activity .daily-activity-metrics > div {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  min-height: clamp(35px, 3.05vw, 43px);
  border-bottom-color: rgba(30, 47, 69, 0.11);
}

.product-carousel-slide-activity .activity-icon {
  width: 27px;
  height: 27px;
}

.product-carousel-slide-activity .daily-activity-metrics span {
  color: #505d6d;
  font-size: clamp(0.65rem, 0.79vw, 0.76rem);
}

.product-carousel-slide-activity .daily-activity-metrics strong {
  color: #172033;
  font-size: clamp(0.8rem, 1.05vw, 0.98rem);
  font-weight: 600;
}

.product-carousel-slide-activity .daily-activity-status {
  top: 10%;
  left: 5%;
  width: min(405px, 28%);
  min-height: 96px;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 23px;
}

.product-carousel-slide-activity .daily-activity-status > i {
  width: 47px;
  height: 47px;
  border: 2px solid #9ee6b0;
  background: #edf9ef;
  color: #48bf6a;
}

.product-carousel-slide-activity .daily-activity-status > span {
  display: grid;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
}

.product-carousel-slide-activity .daily-activity-status strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #131b2a;
  font-size: clamp(0.7rem, 0.93vw, 0.9rem);
  font-weight: 650;
}

.product-carousel-slide-activity .daily-activity-status strong b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #37ad5a;
  font-weight: 650;
}

.product-carousel-slide-activity .daily-activity-status strong b::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.product-carousel-slide-activity .daily-activity-status small {
  color: #687383;
  font-size: clamp(0.58rem, 0.7vw, 0.68rem);
  line-height: 1.28;
}

.daily-activity-status-arrow {
  flex: 0 0 auto;
  margin-left: auto;
}

.product-carousel-slide-activity .daily-sleep-summary {
  top: auto;
  right: 3%;
  bottom: 6%;
  width: min(438px, 30%);
  padding: 18px 20px 19px;
  border-radius: 29px;
  transform: scale(0.82);
  transform-origin: right bottom;
}

.daily-sleep-summary-content {
  display: grid;
  grid-template-columns: minmax(88px, 0.74fr) minmax(0, 1.26fr);
  gap: clamp(12px, 1.45vw, 21px);
  align-items: center;
  padding-top: 14px;
}

.daily-sleep-score {
  display: grid;
  width: clamp(96px, 8.3vw, 122px);
  aspect-ratio: 1;
  padding: 9px;
  border-radius: 50%;
  background: conic-gradient(#9a77f4 0 43%, #e9e4f8 43% 100%);
}

.daily-sleep-score > div {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border-radius: 50%;
  background: rgba(255, 253, 250, 0.98);
}

.daily-sleep-score svg {
  width: 23px;
  height: 23px;
  fill: #9a77f4;
  stroke: #9a77f4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.daily-sleep-score b {
  color: #17182e;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1;
}

.daily-sleep-score small {
  color: #7a8291;
  font-size: clamp(0.56rem, 0.65vw, 0.62rem);
}

.daily-sleep-metrics {
  display: grid;
  margin: 0;
}

.daily-sleep-metrics > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: clamp(34px, 2.95vw, 42px);
  border-bottom: 1px solid rgba(30, 47, 69, 0.11);
}

.daily-sleep-metrics > div:last-child {
  border-bottom: 0;
}

.daily-sleep-metrics dt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #677282;
  font-size: clamp(0.62rem, 0.78vw, 0.74rem);
  font-weight: 500;
}

.daily-sleep-metrics dd {
  margin: 0;
  color: #151d2d;
  font-size: clamp(0.72rem, 0.95vw, 0.9rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.sleep-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
}

.sleep-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.sleep-icon-clock { color: #8591a4; }
.sleep-icon-moon { color: #9a77f4; }
.sleep-icon-moon svg { fill: currentColor; }
.sleep-icon-sun { color: #f5ae1d; }

.daily-sleep-timeline {
  position: relative;
  height: clamp(22px, 2vw, 30px);
  margin-top: 14px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(201, 188, 244, 0.2);
}

.daily-sleep-timeline i {
  position: absolute;
  inset: 0;
  display: block;
  background:
    linear-gradient(90deg, #ad91f8 0 13%, #d4c3fc 13% 22%, #ad91f8 22% 31%, #ffc24d 31% 33%, #ded2ff 33% 52%, #ad91f8 52% 69%, #ffc24d 69% 71%, #b69bf9 71% 88%, #dfd3ff 88% 100%);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 6px);
  mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 6px);
}

.daily-sleep-times,
.daily-sleep-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.daily-sleep-times {
  margin-top: 6px;
  color: #717c8c;
  font-size: clamp(0.54rem, 0.66vw, 0.64rem);
  font-weight: 500;
}

.daily-sleep-legend {
  justify-content: flex-start;
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: 12px;
}

.daily-sleep-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #717b8a;
  font-size: clamp(0.53rem, 0.63vw, 0.61rem);
  font-weight: 500;
  white-space: nowrap;
}

.daily-sleep-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #a88afb;
}

.daily-sleep-legend span:nth-child(2) i { background: #f8b72f; }
.daily-sleep-legend span:nth-child(3) i { background: #c3a8fb; }

.daily-sleep-legend b {
  font-weight: inherit;
}

@media (max-width: 1080px) {
  .product-carousel-slide-activity .daily-activity-summary {
    right: 0;
    left: auto;
    width: 34%;
    transform: scale(0.7);
    transform-origin: right top;
  }

  .product-carousel-slide-activity .daily-sleep-summary {
    top: auto;
    right: 0;
    bottom: 3%;
    width: 33%;
    transform: scale(0.68);
    transform-origin: right bottom;
  }

  .product-carousel-slide-activity .daily-activity-status {
    top: 8%;
    left: 2%;
    width: 31%;
    transform: scale(0.82);
    transform-origin: left top;
  }
}

@media (max-width: 640px) {
  .product-carousel-slide-activity .daily-activity-summary {
    top: 4%;
    right: -6%;
    left: auto;
    width: 48%;
    transform: scale(0.48);
  }

  .product-carousel-slide-activity .daily-sleep-summary {
    top: auto;
    right: -6%;
    bottom: 0;
    width: 46%;
    transform: scale(0.43);
    transform-origin: right bottom;
  }

  .product-carousel-slide-activity .daily-activity-status {
    top: 7%;
    left: -5%;
    width: 43%;
    transform: scale(0.55);
  }
}

/* Source companion geometry, compacted without introducing a second mockup. */
@media (max-width: 720px) {
  .product-carousel { padding-bottom: 170px; }
  .product-carousel-tabs { justify-content: flex-start; gap: 10px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
  .product-carousel-tab { flex: 0 0 auto; min-height: 44px; padding: 0 12px; font-size: .73rem; }
  .product-carousel-tab.is-active { padding: 0 16px; }.product-carousel-tab svg { width: 20px; height: 20px; }
  .product-carousel-stage-wrap { padding: 0; }.product-carousel-viewport { border-radius: 24px; }.product-carousel-slide { aspect-ratio: 4 / 5; }
  .product-carousel-companion { --phone-width: 218px; top: calc(100% - 43px); right: 0; left: 0; height: 183px; }
  .live-location-phone-mockup { bottom: -8px; left: -31px; width: var(--phone-width); }.live-location-phone-mockup[data-phone-screen="2"] { left: 0; width: 148px; }
  .product-carousel-info-banner { left: 139px; height: 144px; border-radius: 21px; }.insights-banner-copy { width: 74%; padding: 15px 13px; }.insights-banner-copy h3 { font-size: 1rem; white-space: normal; }.insights-banner-description { font-size: .59rem; white-space: normal; }.insights-banner-flow { gap: 4px; margin-top: 8px; font-size: .44rem; }.insights-banner-flow i { width: 7px; }
  .product-carousel-arrow { top: auto; bottom: 13px; width: 37px; height: 37px; transform: none; }.product-carousel-arrow:hover, .product-carousel-arrow:focus-visible { transform: scale(1.06); }.product-carousel-arrow-prev { right: 55px; left: auto; transform: rotate(180deg); }.product-carousel-arrow-next { right: 10px; }.product-carousel-arrow svg { width: 19px; height: 19px; }
  .live-location-overlay { top: 7%; left: 5%; width: 48%; padding: 11px 12px; border-radius: 17px; }.product-carousel-slide:first-child .live-location-overlay { right: 5%; left: auto; }.live-location-dog { font-size: .74rem; }.live-location-device { gap: 5px; font-size: .53rem; }.live-location-signal { display: none; }.live-location-overlay-bottom { margin-top: 7px; font-size: .57rem; }.live-location-overlay-bottom span:first-child { padding-left: 0; }.live-location-overlay-bottom span:last-child { display: none; }
  .safe-zone-overlay { width: 48%; }.safe-zone-label { font-size: .72rem; }.safe-zone-details-overlay { top: 4%; right: 1%; width: 60%; padding: 10px; transform: scale(.64); }.safe-zone-fence-card { padding: 9px; }
  .activity-overlay { top: 6%; right: 5%; width: 172px; padding: 13px; }.walk-overlay { right: 5%; bottom: 8%; min-width: 168px; padding: 14px; }
}

@media (max-width: 1050px) {
  .hero-notifications { right: 24px; width: 335px; transform: scale(.78); transform-origin: right bottom; }
}

@media (max-width: 720px) {
  .store-hero { min-height: 820px; }
  .hero-copy { padding-bottom: 143px; }
  .hero-notifications { right: 20px; bottom: 13px; left: 20px; width: auto; height: 150px; transform: none; }
  .hero-status-note { min-height: 59px; gap: 8px; padding: 8px 10px; border-radius: 17px; box-shadow: 0 13px 24px rgba(0,0,0,.27); }
  .hero-status-note-home { top: -14px; left: 0; width: 184px; }.hero-status-note-movement { top: 38px; right: -3px; width: 205px; }.hero-status-note-walk { bottom: -5px; left: 28px; width: 195px; }
  .hero-status-icon { width: 32px; height: 32px; }.hero-status-icon svg { width: 17px; height: 17px; }.hero-status-copy strong { font-size: .65rem; }.hero-status-copy small { font-size: .54rem; }.hero-status-route { flex-basis: 63px; width: 63px; }.hero-status-duration { font-size: .62rem !important; }
}

/* Current Info Site connected-platform collage — transferred to the Store. */
.connected-platform .store-platform-showcase {
  --platform-height: clamp(780px, 62vw, 900px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(330px, 1.04fr) minmax(250px, .86fr);
  gap: clamp(14px, 1.45vw, 22px);
  width: min(calc(100vw - 20px), 1540px);
  margin-top: 0;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #081958;
}

.store-platform-showcase .platform-column {
  display: grid;
  min-width: 0;
  height: var(--platform-height);
  gap: clamp(12px, 1.1vw, 16px);
}

.store-platform-showcase .platform-column-left { grid-template-rows: minmax(0, 1fr) 190px 238px; }
.store-platform-showcase .platform-column-center { grid-template-rows: 104px minmax(0, 1fr); }
.store-platform-showcase .platform-column-right { grid-template-rows: minmax(0, 1fr) 330px; }

.store-platform-showcase .platform-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(4px, .4vw, 8px) clamp(2px, .3vw, 5px);
}

.store-platform-showcase .platform-step {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: clamp(16px, 2vw, 24px);
  place-items: center;
  border-radius: 50%;
  background: #edf5ff;
  color: #4b6b99;
  font-size: .67rem;
  font-weight: 800;
}

.store-platform-showcase .platform-intro h2 {
  max-width: 13.5ch;
  margin: 0;
  padding-top: .05em;
  color: #081858;
  font-size: clamp(1.8rem, 2.6vw, 3.12rem);
  font-weight: 800;
  letter-spacing: -.09em;
  line-height: 1.03;
}

.store-platform-showcase .platform-intro p {
  max-width: 42ch;
  margin: clamp(20px, 2vw, 28px) 0 0;
  color: #6581ad;
  font-size: clamp(.82rem, 1.05vw, 1.16rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.38;
}

.store-platform-showcase .platform-card,
.store-platform-showcase .platform-community-card,
.store-platform-showcase .platform-route-card,
.store-platform-showcase .platform-night-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: clamp(21px, 2vw, 28px);
  box-shadow: 0 15px 32px rgba(44, 74, 109, .08);
}

.store-platform-showcase .platform-live-body {
  grid-template-columns: clamp(58px, 5.2vw, 77px) minmax(55px, .48fr) minmax(178px, 1.52fr);
  gap: clamp(8px, .9vw, 13px);
  padding-top: 11px;
}

.store-platform-showcase .platform-live-map { height: min(100%, 156px); }

.store-platform-showcase .platform-community-card {
  display: grid;
  grid-template-columns: clamp(52px, 4.8vw, 70px) minmax(0, 1fr) 32px;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(13px, 1.25vw, 18px);
  background: linear-gradient(120deg, #dceeff, #f5fbff 72%);
}

.store-platform-showcase .platform-community-icon {
  display: grid;
  width: clamp(52px, 4.8vw, 70px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #d7e9ff, #f6fbff);
  color: #1675ec;
}

.store-platform-showcase .platform-community-icon svg {
  width: 54%;
  height: 54%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.store-platform-showcase .platform-community-card h3,
.store-platform-showcase .platform-led-copy h3,
.store-platform-showcase .platform-night-copy h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.06em;
}

.store-platform-showcase .platform-community-card h3 { color: #0a1b5d; font-size: clamp(.84rem, 1.12vw, 1.16rem); }
.store-platform-showcase .platform-community-card p { margin: 5px 0 0; color: #6684ad; font-size: clamp(.58rem, .72vw, .73rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.3; }
.store-platform-showcase .platform-route-card { background: #77b6df; }
.store-platform-showcase .platform-route-card img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }

.store-platform-showcase .platform-night-card { position: relative; min-height: 0; overflow: hidden; border-radius: clamp(21px, 2vw, 28px); background: #273d63; }
.store-platform-showcase .platform-night-card > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 43% 50%; }
.store-platform-showcase .platform-night-copy { position: absolute; right: clamp(14px, 1.25vw, 20px); bottom: clamp(20px, 2vw, 29px); left: clamp(20px, 2vw, 29px); color: #fff; text-shadow: 0 2px 12px rgba(5, 13, 29, .48); }
.store-platform-showcase .platform-night-copy > span { display: block; margin-bottom: 10px; color: rgba(238, 246, 255, .86); font-size: .57rem; font-weight: 800; letter-spacing: .14em; line-height: 1.22; text-transform: uppercase; }
.store-platform-showcase .platform-night-copy h3 { max-width: 15ch; color: #fff; font-size: clamp(1.28rem, 1.62vw, 1.82rem); line-height: .96; }
.store-platform-showcase .platform-night-copy p { max-width: 31ch; margin: 11px 0 0; color: rgba(247, 250, 255, .94); font-size: clamp(.61rem, .76vw, .78rem); font-weight: 600; line-height: 1.42; }

.store-platform-showcase .platform-led-card { position: relative; min-height: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.store-platform-showcase .platform-led-device { position: absolute; top: 12%; left: -1%; width: 58%; max-width: none; filter: brightness(1.04) saturate(.8) drop-shadow(0 11px 10px rgba(52, 82, 108, .18)); }
.store-platform-showcase .platform-led-title { position: absolute; top: clamp(15px, 1.35vw, 21px); right: clamp(16px, 1.45vw, 22px); left: clamp(16px, 1.45vw, 22px); z-index: 2; margin: 0; color: #0a1b5d; font-size: clamp(.92rem, 1.34vw, 1.36rem); font-weight: 800; letter-spacing: -.075em; line-height: 1.03; white-space: nowrap; }
.store-platform-showcase .platform-led-copy { position: absolute; top: 88px; right: clamp(18px, 1.65vw, 25px); bottom: 46px; left: 62%; display: grid; align-content: center; }
.store-platform-showcase .platform-led-copy p { margin: 0; color: #6684ad; font-size: clamp(.66rem, .82vw, .84rem); font-weight: 600; line-height: 1.35; }
.store-platform-showcase .platform-led-palette { position: absolute; right: clamp(16px, 1.45vw, 22px); bottom: 0; left: clamp(16px, 1.45vw, 22px); display: flex; justify-content: center; gap: clamp(8px, .95vw, 13px); }
.store-platform-showcase .platform-led-palette i { display: block; width: clamp(26px, 2.15vw, 31px); aspect-ratio: 1; border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; background: #1daef1; box-shadow: 0 3px 8px rgba(45, 73, 105, .14); }
.store-platform-showcase .platform-led-palette i:nth-child(2) { background: #51e66e; }.store-platform-showcase .platform-led-palette i:nth-child(3) { background: #fcf23e; }.store-platform-showcase .platform-led-palette i:nth-child(4) { background: #ffa12d; }.store-platform-showcase .platform-led-palette i:nth-child(5) { background: #ff5359; }.store-platform-showcase .platform-led-palette i:nth-child(6) { background: #e96be7; }.store-platform-showcase .platform-led-palette i:nth-child(7) { background: #7954dd; }

@media (max-width: 1100px) {
  .connected-platform .store-platform-showcase { --platform-height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); width: var(--page); margin-left: 0; transform: none; }
  .store-platform-showcase .platform-column { height: auto; }
  .store-platform-showcase .platform-column-left { grid-template-rows: minmax(312px, auto) 188px 238px; }
  .store-platform-showcase .platform-column-center { grid-template-rows: 110px 636px; }
  .store-platform-showcase .platform-column-right { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); grid-template-rows: 410px; }
}

@media (max-width: 720px) {
  .connected-platform .store-platform-showcase { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .store-platform-showcase .platform-column-left { grid-template-rows: auto 178px 244px; }
  .store-platform-showcase .platform-column-center { grid-template-rows: 118px 484px; }
  .store-platform-showcase .platform-column-right { grid-column: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: 400px 320px; }
  .store-platform-showcase .platform-intro { min-height: 360px; padding: 4px 2px 10px; }
  .store-platform-showcase .platform-intro h2 { font-size: clamp(2.25rem, 10.5vw, 3.6rem); }
  .store-platform-showcase .platform-live-body { grid-template-columns: 67px minmax(64px, .8fr) minmax(128px, 1.25fr); }
  .store-platform-showcase .platform-led-device { top: 12%; left: 0; width: 58%; }
}

/* Current rendered Info Site platform mosaic — transferred as the active Store composition. */
.connected-platform .store-platform-showcase {
  --mosaic-h: clamp(500px, 40vw, 560px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 16px;
  width: min(calc(100vw - 36px), 1440px);
  margin-left: 50%;
  transform: translateX(-50%);
  color: #0f1418;
}

.store-platform-showcase .platform-column-left,
.store-platform-showcase .platform-column-right {
  display: contents;
  height: auto;
}

.store-platform-showcase .platform-intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  column-gap: 24px;
  align-items: end;
  min-height: 0;
  margin: 0 0 clamp(18px, 2.6vw, 38px);
  padding: 0;
}

.store-platform-showcase .platform-step {
  display: inline;
  grid-column: 1 / -1;
  width: auto;
  height: auto;
  margin: 0 0 22px;
  border-radius: 0;
  background: transparent;
  color: #3b7fe8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
}

.store-platform-showcase .platform-step::after {
  display: inline-block;
  width: 40px;
  height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: rgba(15, 20, 24, .18);
  content: "";
}

.store-platform-showcase .platform-intro h2 {
  grid-column: 1;
  grid-row: 2 / span 2;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #0f1418;
  font-size: clamp(2.1rem, 4.4vw, 4rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
}

.store-platform-showcase .platform-intro p {
  grid-column: 2;
  max-width: none;
  margin: 0;
  color: #4a545e;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
}

.store-platform-showcase .platform-intro h2 + p { align-self: end; }
.store-platform-showcase .platform-intro p + p { align-self: start; margin-top: 10px; padding-bottom: 6px; }

.store-platform-showcase .platform-card,
.store-platform-showcase .platform-community-card {
  border: 1px solid rgba(15, 20, 24, .06);
  border-radius: 24px;
  background: #fff;
  box-shadow: none;
}

.store-platform-showcase .platform-card { padding: 20px; }

.store-platform-showcase .platform-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f1418;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
}

.store-platform-showcase .platform-card-header strong { font-size: .95rem; letter-spacing: -.015em; }
.store-platform-showcase .platform-card-arrow { display: grid; flex: none; width: 30px; height: 30px; margin-left: auto; place-items: center; border: 1px solid rgba(15, 20, 24, .1); border-radius: 50%; background: transparent; color: #4a545e; transition: background-color .25s, color .25s, transform .3s cubic-bezier(.2,.7,.2,1); }
.store-platform-showcase .platform-card-arrow svg { width: 14px; height: 14px; }
.store-platform-showcase .platform-live-dot { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #35a56e; box-shadow: 0 0 0 4px rgba(53,165,110,.16); }

.store-platform-showcase .platform-live-card { display: block; grid-column: 10 / -1; grid-row: 2; min-height: 0; }
.store-platform-showcase .platform-live-body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; height: auto; margin-top: 18px; padding: 0; }
.store-platform-showcase .platform-live-avatar { width: 52px; height: 52px; border: 0; border-radius: 50%; box-shadow: none; object-fit: cover; }
.store-platform-showcase .platform-live-body > div { display: grid; gap: 2px; }
.store-platform-showcase .platform-live-body strong { color: #0f1418; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.store-platform-showcase .platform-live-body b { color: #35a56e; font-size: .82rem; }
.store-platform-showcase .platform-live-body small { color: #8b939c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; font-weight: 400; white-space: normal; }
.store-platform-showcase .platform-live-map { grid-column: 1 / -1; display: block; width: auto; height: auto; overflow: hidden; border-radius: 16px; }
.store-platform-showcase .platform-live-map > img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: initial; }

.store-platform-showcase .platform-alerts-card { display: flex; flex-direction: column; grid-column: 10 / -1; grid-row: 3; min-height: 0; margin: 0; }
.store-platform-showcase .platform-shield-icon { display: grid; width: auto; height: auto; border-radius: 0; background: transparent; color: #3b7fe8; }
.store-platform-showcase .platform-alert-list { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 0; margin: 16px 0 0; padding: 0; list-style: none; }
.store-platform-showcase .platform-alert-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 0; padding: 12px 2px; border-top: 1px solid rgba(15, 20, 24, .1); border-bottom: 0; border-radius: 0; background: transparent; color: #0f1418; }
.store-platform-showcase .platform-alert-list li > i { display: grid; width: auto; height: auto; color: #4a545e; }
.store-platform-showcase .platform-alert-list li > i svg { width: 18px; height: 18px; }
.store-platform-showcase .platform-alert-list li > strong,
.store-platform-showcase .platform-alert-list li > span > strong { color: #0f1418; font-size: .9rem; font-weight: 700; letter-spacing: -.01em; }
.store-platform-showcase .platform-alert-list time { color: #8b939c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; font-weight: 400; }
.store-platform-showcase .platform-alert-list .platform-alert-orange { color: #d9822b; }
.store-platform-showcase .platform-alert-list .platform-alert-red { color: #d9534f; }
.store-platform-showcase .platform-alert-list .platform-alert-urgent { min-height: 0; margin-bottom: 4px; padding: 12px; border: 0; border-radius: 16px; background: #fdeeed; }
.store-platform-showcase .platform-alert-urgent + li { border-top: 0; }
.store-platform-showcase .platform-alert-list .platform-alert-urgent > i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: #f9d5d3; color: #d9534f; }
.store-platform-showcase .platform-alert-urgent span { display: grid; gap: 2px; }
.store-platform-showcase .platform-alert-urgent span small { color: #4a545e; font-size: .78rem; line-height: 1.3; }

.store-platform-showcase .platform-column-center { position: relative; display: block; grid-column: 6 / span 4; grid-row: 2 / span 2; min-width: 0; min-height: var(--mosaic-h); height: auto; }
.store-platform-showcase .platform-route-card { position: absolute; inset: 0; overflow: hidden; border: 0; border-radius: 24px; background: #cfe0f2; box-shadow: none; }
.store-platform-showcase .platform-route-card img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.store-platform-showcase .platform-community-card { position: absolute; z-index: 2; top: 12px; right: 12px; left: 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 16px 34px -22px rgba(16,28,48,.5); }
.store-platform-showcase .platform-community-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: #e4eefc; color: #1f5fc4; }
.store-platform-showcase .platform-community-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.store-platform-showcase .platform-community-card h3 { margin: 0; color: #0f1418; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.store-platform-showcase .platform-community-card p { margin: 4px 0 0; color: #4a545e; font-size: .78rem; font-weight: 400; letter-spacing: normal; line-height: 1.35; }

.store-platform-showcase .platform-night-card { position: relative; display: block; grid-column: 1 / span 5; grid-row: 2 / span 2; min-height: var(--mosaic-h); overflow: hidden; border: 0; border-radius: 24px; background: #0b121d; color: #fff; box-shadow: none; }
.store-platform-showcase .platform-night-card > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 42% 50%; }
.store-platform-showcase .platform-night-copy { position: absolute; right: 0; bottom: 0; left: 0; padding: 120px clamp(20px,2.4vw,32px) clamp(22px,2.4vw,32px); background: linear-gradient(to top,rgba(8,12,22,.86) 8%,rgba(8,12,22,.5) 52%,transparent); color: #fff; text-shadow: none; }
.store-platform-showcase .platform-night-copy > span { display: block; margin: 0; color: rgba(255,255,255,.72); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; font-weight: 400; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.store-platform-showcase .platform-night-copy h3 { max-width: 11ch; margin: 14px 0 0; color: #fff; font-size: clamp(1.9rem,3vw,2.75rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.store-platform-showcase .platform-night-copy p { max-width: 34ch; margin: 12px 0 0; color: rgba(255,255,255,.78); font-size: .95rem; font-weight: 400; letter-spacing: normal; line-height: 1.5; }

.store-platform-showcase .platform-led-card { position: relative; display: grid; grid-column: 1 / -1; grid-row: 4; grid-template-columns: minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); grid-template-rows: 1fr auto 1fr; column-gap: 24px; align-items: center; min-height: 214px; overflow: hidden; padding: 0 clamp(24px,4vw,60px); border: 0; border-radius: 24px; background: #0b121d; color: #eef2f6; box-shadow: none; }
.store-platform-showcase .platform-led-title { position: static; z-index: auto; grid-column: 1; grid-row: 1 / -1; max-width: 13ch; margin: 0; color: #eef2f6; font-size: clamp(1.7rem,2.9vw,2.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; white-space: normal; }
.store-platform-showcase .platform-led-device { position: static; grid-column: 2; grid-row: 1 / -1; justify-self: center; width: min(112%,300px); max-width: none; margin-block: -50px; filter: drop-shadow(0 0 46px rgba(150,140,255,.36)); }
.store-platform-showcase .platform-led-copy { position: static; display: block; grid-column: 3; grid-row: 2; }
.store-platform-showcase .platform-led-copy p { max-width: 34ch; margin: 0; color: #94a1b3; font-size: .95rem; font-weight: 400; line-height: 1.5; }
.store-platform-showcase .platform-led-palette { position: static; display: flex; grid-column: 3; grid-row: 3; flex-wrap: wrap; align-self: start; justify-content: flex-start; gap: 10px; margin-top: 18px; }
.store-platform-showcase .platform-led-palette i { display: block; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #0b121d,0 0 0 4px rgba(255,255,255,.16),0 0 18px -2px var(--c); }
.store-platform-showcase .platform-led-palette i:nth-child(1) { --c:#58a6f0; }.store-platform-showcase .platform-led-palette i:nth-child(2) { --c:#7ddc7b; }.store-platform-showcase .platform-led-palette i:nth-child(3) { --c:#f2ec5c; }.store-platform-showcase .platform-led-palette i:nth-child(4) { --c:#f5a243; }.store-platform-showcase .platform-led-palette i:nth-child(5) { --c:#ef5d5d; }.store-platform-showcase .platform-led-palette i:nth-child(6) { --c:#dd6fe0; }.store-platform-showcase .platform-led-palette i:nth-child(7) { --c:#7a54d8; }

@media (hover: hover) {
  .store-platform-showcase .platform-card:hover .platform-card-arrow,
  .store-platform-showcase .platform-community-card:hover .platform-card-arrow { background: #0f1418; color: #fff; transform: translateX(2px); }
  .store-platform-showcase .platform-column-center:hover .platform-route-card img,
  .store-platform-showcase .platform-night-card:hover img { transform: scale(1.025); }
  .store-platform-showcase .platform-route-card img,
  .store-platform-showcase .platform-night-card img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
}

@media (min-width: 1101px) {
  .store-platform-showcase .platform-intro { grid-template-columns: minmax(0,1fr) minmax(270px,360px); }
  .store-platform-showcase .platform-intro h2 { font-size: clamp(1.8rem,3vw,3.1rem); white-space: nowrap; }
  .store-platform-showcase .platform-night-copy h3 { max-width: 14ch; }
  .store-platform-showcase .platform-led-title { max-width: 16ch; }
}

@media (max-width: 1100px) {
  .connected-platform .store-platform-showcase { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; gap: 16px; --mosaic-h: clamp(440px,62vw,600px); }
  .store-platform-showcase .platform-intro { grid-template-columns: 1fr; }
  .store-platform-showcase .platform-intro h2,
  .store-platform-showcase .platform-intro p { grid-column: 1; grid-row: auto; }
  .store-platform-showcase .platform-intro h2 { margin-bottom: 20px; white-space: normal; }
  .store-platform-showcase .platform-intro p { max-width: 52ch; }
  .store-platform-showcase .platform-night-card { grid-column: 1; grid-row: 2; }
  .store-platform-showcase .platform-column-center { grid-column: 2; grid-row: 2; }
  .store-platform-showcase .platform-live-card { grid-column: 1; grid-row: 3; }
  .store-platform-showcase .platform-alerts-card { grid-column: 2; grid-row: 3; }
  .store-platform-showcase .platform-led-card { grid-row: 4; }
  .store-platform-showcase .platform-live-body { grid-template-columns: auto 1fr minmax(0,46%); }
  .store-platform-showcase .platform-live-map { grid-column: auto; }
  .store-platform-showcase .platform-led-palette { gap: 8px; }
  .store-platform-showcase .platform-led-palette i { width: 19px; height: 19px; }
}

@media (max-width: 720px) {
  .connected-platform .store-platform-showcase { grid-template-columns: 1fr; gap: 12px; --mosaic-h: 0px; }
  .store-platform-showcase .platform-night-card,
  .store-platform-showcase .platform-column-center,
  .store-platform-showcase .platform-live-card,
  .store-platform-showcase .platform-alerts-card,
  .store-platform-showcase .platform-led-card { grid-column: 1; grid-row: auto; }
  .store-platform-showcase .platform-night-card { aspect-ratio: 4 / 5; min-height: 0; }
  .store-platform-showcase .platform-night-card > img { object-position: 38% 50%; }
  .store-platform-showcase .platform-column-center { display: grid; gap: 12px; min-height: 0; }
  .store-platform-showcase .platform-community-card,
  .store-platform-showcase .platform-route-card { position: static; }
  .store-platform-showcase .platform-community-card { padding: 16px; border-radius: 24px; background: #fff; box-shadow: none; }
  .store-platform-showcase .platform-route-card { aspect-ratio: 941 / 1300; }
  .store-platform-showcase .platform-led-card { grid-template-columns: 1fr; grid-template-rows: none; padding: 30px 24px 28px; }
  .store-platform-showcase .platform-led-title,
  .store-platform-showcase .platform-led-device,
  .store-platform-showcase .platform-led-copy,
  .store-platform-showcase .platform-led-palette { grid-column: 1; grid-row: auto; }
  .store-platform-showcase .platform-led-title { max-width: none; }
  .store-platform-showcase .platform-led-device { width: min(78%,300px); margin-block: -24px -30px; }
}

/* A living-with-your-dog photo story. The active frame opens without moving the
   section, so its neighbouring moments remain visible as context. */
.dog-story-section { margin-top: clamp(88px, 10vw, 150px); }
.dog-story-collage { display: flex; gap: 10px; min-height: clamp(430px, 44vw, 590px); overflow: hidden; border-radius: var(--radius-xl); }
.dog-story-card { position: relative; display: grid; flex: 1 1 0; min-width: 0; overflow: hidden; outline: none; background: #202a2d; isolation: isolate; transition: flex-grow 560ms cubic-bezier(.2, .78, .2, 1), filter 420ms ease; }
.dog-story-card.is-featured { flex-grow: 1.75; }
.dog-story-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 700ms cubic-bezier(.2, .78, .2, 1); }
.dog-story-card-explore > img { object-position: 52% 42%; }
.dog-story-card-everyday > img { object-position: 63% center; }
.dog-story-card-after-dark > img { object-position: 53% center; }
.dog-story-card-beyond-walk > img { object-position: 58% center; }
.dog-story-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 14, 20, .03) 26%, rgba(7, 14, 20, .14) 50%, rgba(7, 14, 20, .76) 100%); transition: background 420ms ease; }
.dog-story-copy { align-self: end; width: max-content; max-width: min(100%, 25rem); padding: clamp(18px, 2.2vw, 30px); color: #fff; text-wrap: balance; }
.dog-story-copy p { margin: 0; font-size: clamp(.67rem, .78vw, .78rem); font-weight: 800; letter-spacing: .11em; line-height: 1.25; text-transform: uppercase; white-space: nowrap; }
.dog-story-copy h3 { max-width: 18ch; max-height: 0; margin: 0; overflow: hidden; font-size: clamp(1.15rem, 1.8vw, 1.75rem); font-weight: 500; letter-spacing: -.065em; line-height: 1; opacity: 0; transform: translateY(9px); transition: max-height 420ms ease, margin-top 420ms ease, opacity 250ms ease, transform 420ms ease; }
.dog-story-card.is-featured .dog-story-copy h3 { max-height: 3em; margin-top: 9px; opacity: 1; transform: translateY(0); }
.dog-story-collage:hover .dog-story-card { flex-grow: .9; }
.dog-story-collage:hover .dog-story-card:hover, .dog-story-collage:focus-within .dog-story-card:focus { flex-grow: 2.05; }
.dog-story-collage:hover .dog-story-card:hover > img, .dog-story-collage:focus-within .dog-story-card:focus > img { transform: scale(1.045); }
.dog-story-collage:hover .dog-story-card:hover .dog-story-shade, .dog-story-collage:focus-within .dog-story-card:focus .dog-story-shade { background: linear-gradient(180deg, rgba(7, 14, 20, 0) 24%, rgba(7, 14, 20, .12) 50%, rgba(7, 14, 20, .72) 100%); }
.dog-story-collage:hover .dog-story-card:hover .dog-story-copy h3, .dog-story-collage:focus-within .dog-story-card:focus .dog-story-copy h3 { max-height: 3em; margin-top: 9px; opacity: 1; transform: translateY(0); }
.dog-story-card:focus-visible { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #3b85d4; }

@media (max-width: 720px) {
  .dog-story-section { margin-top: 80px; }
  .dog-story-collage { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; gap: 10px; border-radius: 0; overflow: visible; }
  .dog-story-card, .dog-story-card.is-featured, .dog-story-collage:hover .dog-story-card, .dog-story-collage:hover .dog-story-card:hover, .dog-story-collage:focus-within .dog-story-card:focus { min-height: 310px; flex: auto; border-radius: 22px; }
  .dog-story-copy { width: 100%; max-width: none; padding: 18px; }
  .dog-story-copy p { font-size: .61rem; white-space: normal; }
  .dog-story-copy h3, .dog-story-card.is-featured .dog-story-copy h3, .dog-story-collage:hover .dog-story-card:hover .dog-story-copy h3, .dog-story-collage:focus-within .dog-story-card:focus .dog-story-copy h3 { max-height: 3.2em; margin-top: 7px; font-size: 1.07rem; opacity: 1; transform: none; }
  .dog-story-card > img, .dog-story-collage:hover .dog-story-card:hover > img, .dog-story-collage:focus-within .dog-story-card:focus > img { transform: none; }
}

/* Keep the gallery controls present but deliberately quieter than the product. */
.product-gallery .gallery-thumbs { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.product-gallery .gallery-thumbs button { flex: 0 0 64px; width: 64px; height: 64px; padding: 4px; border-radius: 12px; opacity: .66; transition: opacity .2s ease, border-color .2s ease, transform .2s ease; }
.product-gallery .gallery-thumbs button:hover { opacity: .9; transform: translateY(-1px); }
.product-gallery .gallery-thumbs button.is-active { border-color: #79aee7; background: #e7f1fc; opacity: 1; }

@media (max-width: 720px) {
  .product-gallery .gallery-thumbs { gap: 7px; margin-top: 11px; }
  .product-gallery .gallery-thumbs button { flex-basis: 54px; width: 54px; height: 54px; border-radius: 11px; }
}

/* Half-image controls make browsing feel direct while keeping the product clear. */
.gallery-main { position: relative; }
.gallery-image-control { position: absolute; z-index: 2; top: 0; bottom: 0; display: flex; width: 50%; align-items: center; padding: 22px; border: 0; background: transparent; color: #25394b; cursor: pointer; opacity: 0; transition: background-color .2s ease, opacity .2s ease; }
.gallery-image-control svg { width: 21px; height: 21px; padding: 10px; box-sizing: content-box; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 16px rgba(29, 53, 71, .12); }
.gallery-image-control-prev { left: 0; justify-content: flex-start; cursor: w-resize; }
.gallery-image-control-prev svg { transform: rotate(180deg); }
.gallery-image-control-next { right: 0; justify-content: flex-end; cursor: e-resize; }
.gallery-main:hover .gallery-image-control, .gallery-image-control:focus-visible { opacity: 1; }
.gallery-image-control:hover { background: rgba(255, 255, 255, .06); }
.gallery-image-control:focus-visible { outline: 2px solid #397bd0; outline-offset: -6px; }

@media (hover: none) {
  .gallery-image-control { opacity: .78; }
}

@media (max-width: 720px) {
  .gallery-image-control { padding: 12px; }
  .gallery-image-control svg { width: 17px; height: 17px; padding: 8px; }
}

/* The image itself owns the gallery surface: no shared panel shows around it. */
.product-gallery .gallery-main { background: transparent; }
.product-gallery .gallery-main img { width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }

/* A distinct, light launch surface for the forthcoming Raddox mobile app. The
   illustrated map is deliberately fictional and drawn in CSS/SVG rather than
   relying on a third-party map or the supplied competitor reference. */
.app-launch { position: relative; z-index: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(244px, .78fr) minmax(0, .78fr); align-items: center; gap: clamp(28px, 4.5vw, 76px); min-height: 648px; margin-top: clamp(82px, 10vw, 132px); overflow: hidden; padding: clamp(42px, 5.2vw, 74px) clamp(30px, 5.2vw, 76px) clamp(40px, 4.7vw, 66px); border: 1px solid rgba(61, 111, 147, .14); border-radius: var(--radius-xl); background: radial-gradient(circle at 49% 52%, rgba(141, 204, 255, .28), transparent 30%), radial-gradient(circle at 98% 0%, rgba(179, 231, 211, .3), transparent 31%), linear-gradient(135deg, #fafdff 0%, #edf7fa 51%, #f7fbf4 100%); box-shadow: 0 22px 48px rgba(26, 67, 90, .09); isolation: isolate; }
.app-launch::before { position: absolute; z-index: -1; top: -160px; left: -100px; width: 360px; height: 360px; border: 1px solid rgba(94, 157, 204, .13); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.2), 0 0 0 76px rgba(255,255,255,.15); content: ""; }
.app-launch-copy, .app-launch-availability { position: relative; z-index: 2; }
.app-launch-copy h2 { max-width: 8.7ch; margin: 0 0 19px; color: #142537; font-size: clamp(2.75rem, 4.25vw, 4.5rem); font-weight: 730; letter-spacing: -.078em; line-height: .88; text-wrap: balance; }
.app-launch-copy > p:not(.eyebrow) { max-width: 31ch; margin-bottom: 28px; color: #627787; font-size: .98rem; line-height: 1.56; }
.app-launch-signal { display: inline-flex; align-items: center; gap: 9px; color: #456070; font-size: .75rem; font-weight: 800; letter-spacing: -.01em; }
.app-launch-signal i { display: block; width: 9px; height: 9px; border: 3px solid rgba(44, 202, 132, .18); border-radius: 50%; background: #2cca84; box-shadow: 0 0 18px rgba(44, 202, 132, .32); }
.app-phone-stage { position: relative; z-index: 1; display: grid; min-height: 518px; place-items: center; }
.app-stage-orbit { position: absolute; border: 1px solid rgba(72, 142, 190, .16); border-radius: 50%; }
.app-stage-orbit-one { width: min(36vw, 430px); aspect-ratio: 1; background: radial-gradient(circle, rgba(142, 207, 255, .14), transparent 65%); }
.app-stage-orbit-two { width: min(29vw, 340px); aspect-ratio: 1; border-style: dashed; transform: rotate(22deg); }
.app-phone { position: relative; z-index: 2; width: min(100%, 274px); aspect-ratio: .493; padding: 7px; border: 7px solid #172331; border-radius: 41px; background: #172331; box-shadow: 0 32px 44px rgba(29, 59, 79, .25), 0 5px 0 #31485b, inset 0 0 0 1px rgba(255,255,255,.24); }
.app-phone::before { position: absolute; z-index: 4; top: 9px; left: 50%; width: 86px; height: 19px; border-radius: 999px; background: #172331; content: ""; transform: translateX(-50%); }
.app-phone-button { position: absolute; top: 125px; right: -11px; width: 4px; height: 58px; border-radius: 0 4px 4px 0; background: #31485b; }
.app-phone-screen { display: grid; height: 100%; overflow: hidden; border-radius: 29px; background: #f9fbfd; grid-template-rows: 25px 45px minmax(0, 1fr) auto auto; }
.app-phone-status { display: flex; align-items: end; justify-content: space-between; padding: 0 18px 5px; color: #162536; font-size: 8px; font-weight: 800; }
.app-phone-status-icons { display: flex; align-items: end; gap: 4px; }
.app-phone-status-icons i { display: block; width: 13px; height: 6px; border: 1.5px solid #162536; border-radius: 2px; }
.app-phone-status-icons i:first-child { width: 10px; height: 7px; border-width: 0 0 1.5px 1.5px; transform: skewX(-22deg); }
.app-phone-status-icons i:nth-child(2) { width: 10px; height: 7px; border: 0; border-radius: 8px 8px 0 0; background: repeating-radial-gradient(circle at 50% 100%, transparent 0 2px, #162536 2.5px 3.5px, transparent 4px 5px); }
.app-phone-status-icons i:last-child::after { display: block; width: 2px; height: 3px; margin: 1.5px 0 0 13px; border-radius: 0 2px 2px 0; background: #162536; content: ""; }
.app-screen-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #f9fbfd; }
.app-screen-brand { display: inline-flex; align-items: center; gap: 6px; color: #17283a; font-size: 10px; letter-spacing: -.04em; }
.app-screen-brand b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 8px; background: #1d78cc; color: #fff; font-size: 10px; letter-spacing: -.07em; }
.app-screen-bell { position: relative; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #e7f2fb; color: #3679b3; }
.app-screen-bell svg { width: 14px; height: 14px; }
.app-screen-bell i { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border: 1px solid #e7f2fb; border-radius: 50%; background: #f26975; }
.app-map { position: relative; overflow: hidden; background: linear-gradient(142deg, #d3e8f6 0%, #eaf5e9 44%, #c7e0ca 100%); }
.app-map::after { position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(105deg, transparent 46%, rgba(45,106,138,.12) 47% 52%, transparent 53%), linear-gradient(20deg, transparent 48%, rgba(255,255,255,.62) 49% 51%, transparent 52%); content: ""; }
.app-map-park { position: absolute; z-index: 1; display: block; border: 1px solid rgba(54, 126, 86, .12); border-radius: 49% 51% 52% 48% / 47% 43% 57% 53%; background: rgba(124, 185, 107, .28); }
.app-map-park-one { top: 17%; left: -17%; width: 53%; height: 33%; transform: rotate(-23deg); }
.app-map-park-two { right: -16%; bottom: 7%; width: 58%; height: 38%; transform: rotate(21deg); }
.app-map-roads, .app-map-route { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.app-map-roads path { fill: none; stroke: rgba(255,255,255,.86); stroke-linecap: round; stroke-width: 7; filter: drop-shadow(0 1px 1px rgba(34, 73, 96, .12)); }
.app-map-route { z-index: 3; }
.app-map-route path { fill: none; stroke: #2f86d5; stroke-dasharray: 1.5 8; stroke-linecap: round; stroke-width: 4; }
.app-map-route circle { fill: #f6fbff; stroke: #2f86d5; stroke-width: 3; }
.app-map-place { position: absolute; z-index: 4; color: #52705d; font-size: 7px; font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px rgba(255,255,255,.75); }
.app-map-place-one { top: 24%; left: 13%; }.app-map-place-two { right: 12%; bottom: 26%; }.app-map-place-three { top: 47%; right: 11%; }
.app-dog-pin { position: absolute; z-index: 5; top: 57%; left: 43%; display: grid; width: 44px; height: 44px; place-items: center; padding: 3px; border: 3px solid #fff; border-radius: 50% 50% 50% 8px; background: #2d86d4; box-shadow: 0 7px 14px rgba(24, 78, 119, .24); transform: rotate(-45deg); }
.app-dog-pin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center; transform: rotate(45deg); }
.app-dog-pin i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #35ce8b; }
.app-map-compass { position: absolute; z-index: 6; top: 12px; right: 12px; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(58,92,110,.13); border-radius: 50%; background: rgba(255,255,255,.78); color: #52717f; font-size: 7px; font-weight: 900; box-shadow: 0 3px 10px rgba(30,74,103,.1); }
.app-walk-card { position: relative; z-index: 3; display: grid; grid-template-columns: 36px 1fr 15px; align-items: center; gap: 8px; margin: -13px 9px 0; padding: 9px; border: 1px solid rgba(52, 105, 141, .11); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 7px 15px rgba(31, 71, 94, .12); }
.app-walk-card > img { width: 36px; height: 36px; border-radius: 11px; object-fit: cover; object-position: center; }
.app-walk-card span { display: grid; gap: 2px; min-width: 0; }.app-walk-card small { color: #78909e; font-size: 6px; font-weight: 700; }.app-walk-card strong { overflow: hidden; color: #213c50; font-size: 8px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }.app-walk-card b { display: inline-flex; align-items: center; gap: 3px; color: #5d7f91; font-size: 6px; font-weight: 700; }.app-walk-card b i { width: 4px; height: 4px; border-radius: 50%; background: #32c983; }.app-walk-card > svg { width: 14px; height: 14px; color: #728f9e; }
.app-tab-bar { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 57px; padding: 6px 8px 9px; border-top: 1px solid #e7eef2; background: #f9fbfd; }
.app-tab-bar span { display: grid; justify-items: center; align-content: center; gap: 3px; color: #9baab4; }.app-tab-bar svg { width: 15px; height: 15px; stroke-width: 1.9; }.app-tab-bar b { font-size: 6px; letter-spacing: -.01em; }.app-tab-bar .is-active { color: #1e7bcf; }.app-tab-bar .is-active svg { fill: rgba(40,135,217,.08); }
.app-launch-availability { align-self: center; }.app-launch-availability h3 { max-width: 8ch; margin: 0 0 17px; color: #1a3548; font-size: clamp(2rem, 3.1vw, 3.15rem); font-weight: 730; letter-spacing: -.07em; line-height: .92; }.app-launch-availability > p:not(.eyebrow) { max-width: 26ch; margin-bottom: 26px; color: #637987; font-size: .9rem; line-height: 1.52; }
.app-store-stubs { display: grid; gap: 10px; }.app-store-stub { display: grid; width: min(100%, 260px); min-height: 58px; grid-template-columns: 25px 1fr auto; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid rgba(38, 89, 119, .17); border-radius: 15px; background: rgba(255,255,255,.74); color: #274658; text-align: left; opacity: 1; cursor: default; }.app-store-stub:disabled { color: #274658; opacity: 1; }.app-store-stub > svg { width: 24px; height: 24px; }.app-store-stub > span { display: grid; gap: 1px; }.app-store-stub small { color: #7b929e; font-size: .59rem; font-weight: 800; line-height: 1; }.app-store-stub strong { color: #203c4e; font-size: .88rem; line-height: 1.1; }.app-store-stub em { padding: 5px 7px; border-radius: 999px; background: #e8f4fb; color: #4a7ca0; font-size: .56rem; font-style: normal; font-weight: 800; white-space: nowrap; }

@media (max-width: 1050px) {
  .app-launch { grid-template-columns: minmax(0, 1fr) minmax(238px, .72fr); gap: 28px 48px; min-height: 0; }
  .app-launch-copy { grid-column: 1; }.app-phone-stage { grid-column: 2; grid-row: 1 / span 2; }.app-launch-availability { grid-column: 1; align-self: start; }.app-launch-availability h3 { max-width: 12ch; }
}

@media (max-width: 720px) {
  .app-launch { display: flex; flex-direction: column; align-items: stretch; gap: 30px; margin-top: 76px; padding: 38px 21px 27px; border-radius: 27px; }.app-launch::before { top: -205px; left: -178px; }.app-launch-copy h2 { max-width: 10ch; font-size: clamp(2.8rem, 13vw, 4.25rem); }.app-launch-copy > p:not(.eyebrow) { max-width: 34ch; margin-bottom: 20px; }.app-phone-stage { min-height: 493px; margin: -4px 0 -3px; }.app-stage-orbit-one { width: 350px; }.app-stage-orbit-two { width: 286px; }.app-phone { width: 246px; border-radius: 38px; }.app-phone-screen { border-radius: 26px; }.app-launch-availability h3 { max-width: 10ch; font-size: 2.55rem; }.app-launch-availability > p:not(.eyebrow) { margin-bottom: 21px; }.app-store-stub { width: 100%; }
}

/* The Raddox app preview follows the supplied product UI's composition—map,
   floating controls, dog switcher and bottom navigation—while keeping a light
   Raddox colour theme and a completely fictional illustrated map. */
.app-phone-reference { border-color: #17212b; background: #17212b; box-shadow: 0 32px 44px rgba(29, 59, 79, .29), 0 5px 0 #405462, inset 0 0 0 1px rgba(255,255,255,.24); }
.app-reference-screen { position: relative; display: block; overflow: hidden; background: #e5e8eb; }
.app-reference-map { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(130deg, #cfd6df 0%, #e9edf0 48%, #c6d1da 100%); }
.app-reference-map::before { position: absolute; inset: 0; opacity: .68; background-image: linear-gradient(31deg, transparent 46%, rgba(165,176,187,.42) 47% 48%, transparent 49%), linear-gradient(112deg, transparent 46%, rgba(255,255,255,.49) 47% 48%, transparent 49%); background-size: 25px 25px, 31px 31px; content: ""; }
.app-map-water { position: absolute; z-index: 1; top: 13%; bottom: 21%; left: -24%; width: 39%; border-radius: 44% 56% 45% 55%; background: linear-gradient(100deg, #b8deef, #cae9f3); opacity: .95; transform: rotate(-8deg); }
.app-map-block { position: absolute; z-index: 2; display: block; border: 1px solid rgba(91, 105, 120, .2); border-radius: 5px; background: repeating-linear-gradient(90deg, rgba(128,142,155,.31) 0 11px, rgba(232,235,238,.34) 11px 15px); box-shadow: inset 0 0 0 3px rgba(246,248,249,.25); transform: rotate(var(--r)); }
.app-map-block-one { --r: -12deg; top: 16%; left: 14%; width: 31%; height: 13%; }.app-map-block-two { --r: 18deg; top: 24%; right: 12%; width: 35%; height: 15%; }.app-map-block-three { --r: -7deg; top: 42%; left: 5%; width: 26%; height: 19%; }.app-map-block-four { --r: 20deg; top: 45%; right: 4%; width: 32%; height: 16%; }.app-map-block-five { --r: -14deg; top: 69%; left: 17%; width: 35%; height: 12%; }.app-map-block-six { --r: 7deg; top: 74%; right: 10%; width: 29%; height: 11%; }
.app-reference-roads { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; }
.app-reference-roads path { fill: none; stroke: rgba(255,255,255,.94); stroke-linecap: round; stroke-width: 8; filter: drop-shadow(0 1px 0 rgba(92,108,123,.17)); }
.app-reference-label { position: absolute; z-index: 4; color: #4e6270; font-size: 7px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; text-shadow: 0 1px rgba(255,255,255,.92); }
.app-reference-label-one { top: 22%; left: 12%; }.app-reference-label-two { top: 35%; right: 12%; }.app-reference-label-three { top: 54%; left: 14%; }.app-reference-label-four { top: 65%; right: 13%; }
.app-reference-poi { position: absolute; z-index: 5; display: grid; justify-items: center; gap: 1px; color: #b77d17; font-size: 12px; line-height: 1; text-shadow: 0 1px #fff; }.app-reference-poi b { color: #69542d; font-size: 6px; white-space: nowrap; }.app-reference-poi-one { top: 30%; left: 25%; }.app-reference-poi-two { top: 47%; right: 25%; color: #4d9f5d; }.app-reference-poi-two b { color: #387749; }
.app-reference-actions { position: absolute; z-index: 11; top: 31px; left: 11px; display: flex; gap: 7px; }.app-reference-actions > i { position: relative; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 12px; background: rgba(20, 27, 34, .91); color: #fff; font-size: 18px; font-style: normal; box-shadow: 0 5px 14px rgba(23,34,44,.18); }.app-reference-actions svg { width: 17px; height: 17px; }.app-reference-actions b { position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border: 1px solid #202933; border-radius: 50%; background: #f06b72; }
.app-favorite-places { position: absolute; z-index: 11; top: 31px; right: 11px; display: inline-flex; align-items: center; gap: 6px; min-height: 35px; padding: 0 12px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; background: rgba(20, 27, 34, .92); color: #fff; box-shadow: 0 5px 14px rgba(23,34,44,.18); }.app-favorite-places svg { width: 15px; height: 15px; color: #f3bf67; }.app-favorite-places b { font-size: 7px; letter-spacing: -.02em; white-space: nowrap; }
.app-heatmap { position: absolute; z-index: 6; display: block; border-radius: 50%; pointer-events: none; }.app-heatmap-one { top: 48%; left: 38%; width: 80px; height: 80px; background: radial-gradient(circle, rgba(248, 95, 81, .74) 0 11%, rgba(247, 155, 69, .5) 27%, rgba(255, 216, 112, .22) 48%, transparent 70%); filter: blur(1px); }.app-heatmap-two { top: 55%; left: 24%; width: 58px; height: 58px; background: radial-gradient(circle, rgba(249, 107, 82, .62), rgba(250, 184, 74, .25) 44%, transparent 71%); }.app-heatmap-three { top: 42%; right: 18%; width: 53px; height: 53px; background: radial-gradient(circle, rgba(245, 123, 75, .56), rgba(252, 204, 81, .2) 49%, transparent 72%); }.app-heatmap-four { top: 62%; right: 20%; width: 44px; height: 44px; background: radial-gradient(circle, rgba(246, 133, 77, .46), transparent 72%); }
.app-reference-dog-pin { z-index: 8; top: 55%; left: 47%; width: 47px; height: 47px; padding: 3px; border: 3px solid #f5c365; border-radius: 50%; background: #fff8dd; box-shadow: 0 5px 13px rgba(86, 55, 15, .25), 0 0 0 2px rgba(255,255,255,.8); transform: none; }.app-reference-dog-pin img { transform: none; }.app-reference-dog-pin i { right: 0; bottom: 0; width: 13px; height: 13px; border: 2px solid #fff6df; background: #f2636c; }
.app-map-zoom { position: absolute; z-index: 10; top: 45%; right: 12px; display: grid; overflow: hidden; border: 1px solid rgba(255,255,255,.26); border-radius: 12px; background: rgba(20, 27, 34, .92); box-shadow: 0 5px 14px rgba(23,34,44,.18); }.app-map-zoom i { display: grid; width: 36px; height: 35px; place-items: center; border-bottom: 1px solid rgba(255,255,255,.15); color: #fff; font-size: 23px; font-style: normal; font-weight: 300; line-height: 1; }.app-map-zoom i:last-child { border-bottom: 0; }
.app-reference-tools { position: absolute; z-index: 10; right: 12px; bottom: 104px; display: flex; gap: 7px; }.app-reference-tools i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 11px; background: rgba(20, 27, 34, .92); color: #fff; font-size: 14px; font-style: normal; }.app-reference-tools svg { width: 17px; height: 17px; }
.app-pet-strip { position: absolute; z-index: 11; right: 8px; bottom: 77px; left: 8px; display: flex; gap: 7px; overflow: hidden; }.app-pet-strip article { display: grid; flex: 0 0 126px; grid-template-columns: 36px 1fr; align-items: center; gap: 7px; min-height: 53px; padding: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(20, 27, 34, .95); color: #fff; box-shadow: 0 6px 16px rgba(23,34,44,.2); }.app-pet-strip article.is-active { border-color: rgba(244, 190, 95, .56); }.app-pet-strip img, .app-pet-strip article > i { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }.app-pet-strip article > i { display: grid; place-items: center; background: #c75d5f; color: #fff; font-size: 15px; font-style: normal; font-weight: 800; }.app-pet-strip span { display: grid; min-width: 0; gap: 3px; }.app-pet-strip strong { overflow: hidden; font-size: 8px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }.app-pet-strip small { color: #bfc9d0; font-size: 6px; font-weight: 700; white-space: nowrap; }
.app-reference-tabs { position: absolute; z-index: 12; right: 8px; bottom: 8px; left: 8px; display: grid; min-height: 62px; grid-template-columns: repeat(4, 1fr); padding: 5px; border-radius: 18px; background: #171d22; box-shadow: 0 6px 16px rgba(23,34,44,.26); }.app-reference-tabs span { display: grid; justify-items: center; align-content: center; gap: 3px; border-radius: 14px; color: #aab1b6; }.app-reference-tabs span.is-active { background: #fff; color: #1d252b; }.app-reference-tabs svg { width: 17px; height: 17px; stroke-width: 1.9; }.app-reference-tabs b { font-size: 6px; letter-spacing: .06em; text-transform: uppercase; }
.app-reference-screen .app-phone-status { position: absolute; z-index: 20; top: 0; right: 0; left: 0; height: 29px; align-items: end; padding: 0 15px 7px; color: #1a2630; font-size: 8px; }.app-reference-screen .app-phone-status-icons i { border-color: #1a2630; }.app-reference-screen .app-phone-status-icons i:nth-child(2) { background: repeating-radial-gradient(circle at 50% 100%, transparent 0 2px, #1a2630 2.5px 3.5px, transparent 4px 5px); }.app-reference-screen .app-phone-status-icons i:last-child::after { background: #1a2630; }

@media (max-width: 720px) {
  .app-reference-tools { bottom: 100px; }.app-reference-dog-pin { width: 45px; height: 45px; }.app-reference-label { font-size: 6px; }.app-favorite-places { right: 10px; }.app-favorite-places b { font-size: 6px; }.app-pet-strip article { flex-basis: 120px; }
}

/* Keep every in-app control in the light theme: the contrast comes from the
   map beneath and from soft outlines, rather than dark utility surfaces. */
.app-reference-actions > i { border-color: rgba(81, 101, 120, .14); background: rgba(255,255,255,.94); color: #263846; box-shadow: 0 5px 14px rgba(45, 68, 84, .16); }
.app-reference-actions b { border-color: #fff; }
.app-favorite-places { border-color: rgba(81, 101, 120, .14); background: rgba(255,255,255,.95); color: #2c3c48; box-shadow: 0 5px 14px rgba(45, 68, 84, .16); }
.app-favorite-places svg { color: #c68827; }
.app-map-zoom { border-color: rgba(81, 101, 120, .14); background: rgba(255,255,255,.95); box-shadow: 0 5px 14px rgba(45, 68, 84, .16); }.app-map-zoom i { border-bottom-color: rgba(81, 101, 120, .13); color: #2b3e4c; }
.app-reference-tools i { border-color: rgba(81, 101, 120, .14); background: rgba(255,255,255,.95); color: #2b3e4c; box-shadow: 0 5px 14px rgba(45, 68, 84, .16); }
.app-pet-strip article { border-color: rgba(81, 101, 120, .14); background: rgba(255,255,255,.95); color: #253945; box-shadow: 0 6px 16px rgba(45, 68, 84, .16); }.app-pet-strip article.is-active { border-color: rgba(207, 150, 44, .65); }.app-pet-strip small { color: #758692; }.app-pet-strip article > i { background: #e8a05e; color: #fff; }
.app-reference-tabs { border: 1px solid rgba(81, 101, 120, .13); background: rgba(255,255,255,.96); box-shadow: 0 6px 16px rgba(45, 68, 84, .18); }.app-reference-tabs span { color: #788993; }.app-reference-tabs span.is-active { background: #e8f0f5; color: #1f3543; }

/* Tighter map rhythm: road hierarchy, compact blocks and one cohesive activity
   field make the light preview read like a real application map. */
.app-reference-map { background: linear-gradient(135deg, #dce3e9 0%, #eff2f4 47%, #d4dde4 100%); }
.app-reference-map::before { opacity: .52; background-image: linear-gradient(31deg, transparent 47%, rgba(132,147,160,.36) 48% 49%, transparent 50%), linear-gradient(112deg, transparent 47%, rgba(255,255,255,.58) 48% 49%, transparent 50%); background-size: 18px 18px, 23px 23px; }
.app-reference-map::after { position: absolute; z-index: 1; inset: 0; opacity: .38; background: repeating-linear-gradient(116deg, transparent 0 25px, rgba(135,149,160,.2) 26px 27px, transparent 28px 54px); content: ""; pointer-events: none; }
.app-map-water { background: linear-gradient(100deg, #b9dfed, #d3edf4); }
.app-map-block { border-color: rgba(96, 111, 126, .25); background: repeating-linear-gradient(90deg, rgba(124,140,153,.34) 0 8px, rgba(237,240,242,.46) 8px 12px); box-shadow: inset 0 0 0 2px rgba(247,249,250,.34); }
.app-reference-roads path { stroke-width: 6.3; }
.app-reference-label { color: #546a79; font-size: 6.8px; text-shadow: 0 1px rgba(255,255,255,.98); }
.app-reference-actions { top: 34px; left: 12px; gap: 8px; }.app-reference-actions > i { width: 38px; height: 38px; border-radius: 13px; }.app-favorite-places { top: 34px; right: 12px; min-height: 38px; padding-inline: 13px; }
.app-reference-dog-pin { display: grid; width: 49px; height: 49px; place-items: center; padding: 4px; border-radius: 50%; overflow: visible; }.app-reference-dog-pin img { display: block; width: 37px; height: 37px; min-width: 37px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 28%; clip-path: circle(50%); transform: none; }
.app-heatmap { filter: blur(1.5px); }.app-heatmap-one { top: 42.5%; left: 22%; width: 152px; height: 152px; background: radial-gradient(circle, rgba(242, 87, 82, .54) 0 8%, rgba(246, 130, 78, .42) 19%, rgba(249, 187, 81, .29) 35%, rgba(161, 204, 117, .17) 51%, transparent 72%); }.app-heatmap-two { top: 46%; left: 28.5%; width: 118px; height: 118px; background: radial-gradient(circle, rgba(242, 95, 81, .48) 0 13%, rgba(248, 146, 73, .32) 27%, rgba(251, 204, 86, .18) 45%, transparent 69%); }.app-heatmap-three { top: 50%; left: 37%; right: auto; width: 80px; height: 80px; background: radial-gradient(circle, rgba(237, 84, 78, .52), rgba(247, 143, 76, .24) 41%, transparent 70%); }.app-heatmap-four { display: none; }
.app-pet-strip { right: 8px; bottom: 77px; left: 8px; gap: 7px; overflow: visible; }.app-pet-strip article { flex: 1 1 0; min-width: 0; grid-template-columns: 36px minmax(0, 1fr); min-height: 55px; padding: 7px; border-radius: 16px; }.app-pet-strip strong { font-size: 8.5px; }.app-pet-strip small { overflow: hidden; font-size: 6.3px; text-overflow: ellipsis; white-space: nowrap; }.app-pet-strip article:nth-child(2) > i { background: #d96569; }
.app-reference-tabs { right: 8px; bottom: 8px; left: 8px; min-height: 65px; padding: 6px; border-radius: 20px; }.app-reference-tabs span { border-radius: 15px; }.app-reference-tabs b { font-size: 6.2px; }

/* The compact utility controls and card placement follow the proportions of
   the product UI: the map stays clear and the locate button remains usable. */
.app-reference-actions { top: 34px; left: 12px; gap: 6px; }
.app-reference-actions > i { width: 32px; height: 32px; border-radius: 10px; }
.app-reference-actions svg { width: 15px; height: 15px; }
.app-reference-actions > i:last-child { font-size: 15px; }
.app-favorite-places { top: 34px; right: 12px; gap: 5px; min-height: 32px; padding-inline: 10px; }
.app-favorite-places svg { width: 13px; height: 13px; }
.app-favorite-places b { font-size: 6.5px; }
.app-map-zoom { top: 47%; right: 12px; border-radius: 10px; }
.app-map-zoom i { width: 30px; height: 30px; font-size: 20px; }
.app-reference-tools { z-index: 12; right: 12px; bottom: 142px; gap: 6px; }
.app-reference-tools i { width: 29px; height: 29px; border-radius: 9px; font-size: 12px; }
.app-reference-tools svg { width: 14px; height: 14px; }
.app-pet-strip { right: auto; bottom: 77px; left: 8px; width: 136px; }
.app-pet-strip article { flex: 0 0 136px; width: 136px; }
.app-pet-strip small { display: flex; align-items: center; gap: 4px; }
.app-pet-strip small::after { content: "▁▃▅ LTE"; color: #758692; font-size: 6px; letter-spacing: -.02em; }

/* Supplied app artwork replaces the assembled CSS preview in the launch panel. */
.app-phone-image-stage { min-height: 568px; margin: 0; }
.app-phone-image { position: relative; z-index: 2; display: block; width: min(128%, 390px); height: auto; filter: drop-shadow(0 27px 30px rgba(22, 49, 68, .24)); }

.app-store-stub { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease; }
.app-store-stub > svg, .app-store-stub em { transition: transform .22s ease, background-color .22s ease, color .22s ease; }
@media (hover: hover) {
  .app-store-stub:hover { border-color: rgba(44, 119, 164, .36); background: rgba(255,255,255,.96); box-shadow: 0 12px 24px rgba(38, 89, 119, .16); transform: translateY(-4px); }
  .app-store-stub:hover > svg { transform: translateY(-1px) rotate(-4deg); }
  .app-store-stub:hover em { background: #dceefa; color: #2f6f97; transform: translateX(2px); }
}

@media (max-width: 720px) {
  .app-phone-image-stage { min-height: 470px; margin: -2px 0; }
  .app-phone-image { width: min(94vw, 352px); }
}

/* How it works — five deliberately different, app-led chapters. */
.how-experience { overflow: clip; padding: 42px 0 118px; background: #f7f8f5; }
.how-hero { position: relative; display: grid; grid-template-columns: minmax(0, .84fr) minmax(500px, 1.16fr); align-items: center; min-height: min(660px, calc(100vh - 105px)); overflow: hidden; margin-bottom: 48px; border: 1px solid rgba(23, 45, 62, .09); border-radius: 38px; background: linear-gradient(135deg, #e3f4fb 0%, #f7fbf9 47%, #e5eef8 100%); box-shadow: 0 24px 55px rgba(33, 65, 84, .08); }
.how-hero::before { position: absolute; z-index: 1; top: -23%; left: 29%; width: 58%; aspect-ratio: 1; border: 1px solid rgba(65, 145, 191, .11); border-radius: 50%; content: ""; }
.how-hero-copy { position: relative; z-index: 4; max-width: 510px; padding: 70px 42px 70px 72px; }
.how-hero-copy .eyebrow { color: #56708a; }
.how-hero h1 { max-width: 8.8ch; margin: 0 0 21px; color: #152b3b; font-size: clamp(3.75rem, 6.1vw, 6.15rem); font-weight: 740; line-height: .88; }
.how-hero-copy > p:not(.eyebrow) { max-width: 39ch; margin-bottom: 30px; color: #5e7485; font-size: 1.02rem; font-weight: 550; line-height: 1.58; }
.how-hero-link { display: inline-flex; align-items: center; gap: 10px; min-height: 47px; padding: 6px 7px 6px 8px; border: 1px solid rgba(36, 79, 110, .14); border-radius: 999px; background: rgba(255,255,255,.76); color: #254359; font-size: .82rem; font-weight: 800; box-shadow: 0 10px 21px rgba(46, 91, 120, .09); transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.how-hero-link span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #d7ecfb; color: #2879b8; }.how-hero-link span svg { width: 15px; height: 15px; }.how-hero-link i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #263f52; color: white; font-size: 1rem; font-style: normal; }
.how-hero-link:hover { background: #fff; box-shadow: 0 15px 29px rgba(46, 91, 120, .16); transform: translateY(-3px); }
.how-hero-media { position: absolute; z-index: 2; inset: 0 0 0 39%; margin: 0; overflow: hidden; clip-path: inset(0 round 0 38px 38px 0); }
.how-hero-media::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(227,244,251,.9) 0%, rgba(227,244,251,.22) 24%, transparent 50%), linear-gradient(0deg, rgba(15,43,61,.34), transparent 32%); content: ""; pointer-events: none; }
.how-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 59% 50%; transform: scale(1.012); transition: transform 1.1s cubic-bezier(.22,1,.36,1); }.how-hero:hover .how-hero-media img { transform: scale(1.06); }
.how-hero-media figcaption { position: absolute; z-index: 2; right: 34px; bottom: 29px; display: inline-flex; align-items: center; gap: 8px; max-width: 30ch; color: rgba(255,255,255,.94); font-size: .77rem; font-weight: 780; text-align: right; }.how-hero-media figcaption i { width: 9px; height: 9px; border: 3px solid rgba(88, 225, 165, .32); border-radius: 50%; background: #41d28a; box-shadow: 0 0 17px rgba(56,219,148,.72); }
.how-hero-orbit { position: absolute; z-index: 3; border: 1px dashed rgba(75, 146, 194, .22); border-radius: 50%; pointer-events: none; }.how-hero-orbit-one { top: 9%; right: 9%; width: 180px; aspect-ratio: 1; }.how-hero-orbit-two { right: -4%; bottom: -23%; width: 310px; aspect-ratio: 1; border-style: solid; border-color: rgba(255,255,255,.33); }

.how-section-nav-wrap { position: sticky; z-index: 22; top: 75px; margin: 0 0 0; border-top: 1px solid rgba(25,47,62,.08); border-bottom: 1px solid rgba(25,47,62,.08); background: rgba(247,248,245,.89); backdrop-filter: blur(15px); }
.how-section-nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 75px; }.how-section-nav > span { flex: 0 0 auto; color: #70808c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; font-weight: 800; letter-spacing: .115em; text-transform: uppercase; }.how-section-nav > div { display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow-x: auto; scrollbar-width: none; }.how-section-nav > div::-webkit-scrollbar { display: none; }
.how-section-nav button { display: inline-flex; align-items: center; gap: 7px; min-height: 39px; padding: 0 11px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #7a8992; font-size: .75rem; font-weight: 760; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }.how-section-nav button b { color: #a0adb5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .61rem; }.how-section-nav button:hover { color: #2f586e; transform: translateY(-1px); }.how-section-nav button.is-current { border-color: rgba(72, 135, 175, .15); background: #fff; color: #24475d; box-shadow: 0 8px 16px rgba(36,68,88,.07); }.how-section-nav button.is-current b { color: #3f96cc; }

.how-features { position: relative; }.how-feature { position: relative; min-height: 690px; padding: 128px 0; border-bottom: 1px solid rgba(25,47,62,.09); scroll-margin-top: 136px; }.how-feature:first-child { padding-top: 130px; }.how-feature:focus { outline: none; }
.how-feature-index { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; color: #7b8e9b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }.how-feature-index > span { color: #2f87c0; }.how-feature-index > i { width: 37px; height: 1px; background: currentColor; opacity: .45; }.how-feature-index > b { font-weight: inherit; }
.how-feature-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(520px, 1.28fr); align-items: center; gap: clamp(42px, 7vw, 120px); }.how-feature:nth-child(even) .how-feature-layout { grid-template-columns: minmax(520px, 1.28fr) minmax(260px, .72fr); }.how-feature:nth-child(even) .how-feature-copy { order: 2; }.how-feature:nth-child(even) .how-feature-visual { order: 1; }
.how-feature-copy { max-width: 440px; }.how-feature-copy .eyebrow { margin-bottom: 14px; color: #59809a; }.how-feature-copy h2 { max-width: 10.6ch; margin-bottom: 19px; color: #193343; font-size: clamp(2.75rem, 4.6vw, 4.7rem); font-weight: 725; line-height: .93; }.how-feature-text { margin-bottom: 25px; color: #657885; font-size: .98rem; font-weight: 520; line-height: 1.62; }
.how-live-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 24px; padding: 5px 6px 5px 7px; border: 1px solid rgba(43,118,162,.16); border-radius: 999px; background: #fff; color: #275169; box-shadow: 0 10px 22px rgba(44, 91, 120, .09); font-size: .77rem; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }.how-live-toggle > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #e6f4ff; color: #3387c7; }.how-live-toggle svg { width: 15px; height: 15px; }.how-live-toggle > i { width: 25px; height: 15px; border-radius: 999px; background: #c7d3da; transition: background .22s ease; }.how-live-toggle > i::after { display: block; width: 11px; height: 11px; margin: 2px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(29,55,72,.25); content: ""; transition: transform .22s ease; }.how-live-toggle:hover { box-shadow: 0 14px 27px rgba(44, 91, 120, .14); transform: translateY(-2px); }.how-live-toggle.is-on { background: #f4fbff; }.how-live-toggle.is-on > i { background: #39c789; }.how-live-toggle.is-on > i::after { transform: translateX(10px); }
.how-details { border-top: 1px solid rgba(49,83,102,.14); border-bottom: 1px solid rgba(49,83,102,.14); }.how-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 58px; color: #2d5369; cursor: pointer; font-size: .78rem; font-weight: 800; list-style: none; }.how-details summary::-webkit-details-marker { display: none; }.how-details summary i { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(47,91,119,.16); border-radius: 50%; color: #46748f; font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 1; transition: transform .24s ease, background .24s ease; }.how-details[open] summary i { background: #e1f0f8; transform: rotate(45deg); }.how-details > div { padding: 1px 0 19px; }.how-details ol { display: grid; gap: 10px; margin: 0 0 15px; padding: 0; list-style: none; }.how-details li { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; color: #4c6170; font-size: .8rem; font-weight: 620; line-height: 1.4; }.how-details li b { color: #3c91c5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .62rem; letter-spacing: .05em; }.how-details p { margin: 0; color: #71818b; font-size: .75rem; line-height: 1.52; }

.how-feature-visual { position: relative; display: grid; min-height: 452px; place-items: center; }.how-visual-wash { position: absolute; width: min(85%, 480px); aspect-ratio: 1; border: 1px solid rgba(106, 170, 206, .18); border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(196,231,248,.54), rgba(231,245,242,.31) 47%, transparent 68%); }.how-visual-wash::after { position: absolute; inset: 11%; border: 1px dashed rgba(81,153,193,.28); border-radius: 50%; content: ""; animation: how-orbit 26s linear infinite; }
.hiw-phone { position: relative; z-index: 3; width: min(282px, 57%); height: 502px; overflow: hidden; border: 7px solid #18303f; border-radius: 40px; background: #f9fcfd; box-shadow: 0 27px 45px rgba(30,64,85,.24), inset 0 0 0 1px rgba(255,255,255,.4); color: #1e3443; transform: rotate(2.6deg); transition: transform .65s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }.hiw-phone::after { position: absolute; z-index: 30; inset: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 33px; content: ""; pointer-events: none; }.how-feature:hover .hiw-phone { box-shadow: 0 35px 57px rgba(30,64,85,.29); transform: rotate(0deg) translateY(-8px); }.how-feature:nth-child(even) .hiw-phone { transform: rotate(-2.6deg); }.how-feature:nth-child(even):hover .hiw-phone { transform: rotate(0deg) translateY(-8px); }
.hiw-phone-top { position: absolute; z-index: 20; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 15px 0; color: #213543; font-size: 7px; font-weight: 800; }.hiw-phone-top > span { width: 15px; height: 7px; border: 1px solid currentColor; border-radius: 2px; }.hiw-phone-top > i { font-size: 6px; font-style: normal; letter-spacing: 1px; }.hiw-island { position: absolute; z-index: 22; top: 7px; left: 50%; width: 76px; height: 20px; border-radius: 999px; background: #172a38; transform: translateX(-50%); }.hiw-home-bar { position: absolute; z-index: 25; right: 50%; bottom: 8px; width: 82px; height: 3px; border-radius: 999px; background: #172a38; transform: translateX(50%); }
.hiw-map { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(135deg, #d8e8ef, #f5f5ee 68%, #dbeade); }.hiw-map::before { position: absolute; inset: 0; opacity: .44; background-image: linear-gradient(120deg, transparent 46%, rgba(117,138,153,.25) 47% 49%, transparent 50%), linear-gradient(25deg, transparent 46%, rgba(255,255,255,.75) 47% 49%, transparent 50%); background-size: 18px 22px, 25px 20px; content: ""; }.hiw-map-roads { position: absolute; z-index: 2; width: 100%; height: 100%; overflow: visible; }.hiw-map-roads path { fill: none; stroke: rgba(255,255,255,.94); stroke-linecap: round; stroke-width: 11; filter: drop-shadow(0 1px 0 rgba(56,85,103,.13)); }.hiw-map-block { position: absolute; z-index: 1; display: block; border: 1px solid rgba(115,135,147,.12); border-radius: 7px; background: repeating-linear-gradient(90deg, rgba(139,154,163,.26) 0 7px, rgba(245,247,242,.26) 7px 11px); transform: rotate(13deg); }.hiw-map .block-a { top: 27%; left: 9%; width: 86px; height: 54px; }.hiw-map .block-b { top: 48%; right: -3%; width: 90px; height: 61px; transform: rotate(-12deg); }.hiw-map .block-c { bottom: 17%; left: 18%; width: 112px; height: 54px; transform: rotate(31deg); }.hiw-map-label { position: absolute; z-index: 4; color: #607b85; font-size: 7px; font-weight: 800; text-shadow: 0 1px white; }.hiw-map .label-a { top: 25%; left: 42%; }.hiw-map .label-b { top: 68%; left: 14%; }
.hiw-live-map { bottom: 86px; }.hiw-live-pin { position: absolute; z-index: 7; top: 53%; left: 51%; display: grid; width: 47px; height: 47px; place-items: center; padding: 4px; border: 3px solid white; border-radius: 50%; background: linear-gradient(135deg, #d9a05c, #e9f5dd); box-shadow: 0 5px 14px rgba(60,82,92,.25); transform: translate(-50%,-50%); }.hiw-live-pin i { display: block; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 37% 28%, #fff 0 8%, transparent 9%), radial-gradient(circle at 67% 35%, #5c3f25 0 8%, transparent 9%), linear-gradient(135deg, #d3935d, #f3c678); }.hiw-live-pin b { position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; border: 2px solid white; border-radius: 50%; background: #32c687; }.hiw-live-pulse { position: absolute; z-index: 5; top: 53%; left: 51%; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(73,179,221,.12), transparent 69%); transform: translate(-50%,-50%); animation: how-pulse 2.8s ease-out infinite; }.hiw-map-controls { position: absolute; z-index: 8; top: 52%; right: 11px; display: grid; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.92); box-shadow: 0 5px 13px rgba(37,67,85,.15); }.hiw-map-controls b { display: grid; width: 28px; height: 27px; place-items: center; border-bottom: 1px solid rgba(45,73,90,.11); font-size: 17px; font-weight: 450; }.hiw-map-controls b:last-child { border: 0; }.hiw-live-card { position: absolute; z-index: 12; right: 7px; bottom: 25px; left: 7px; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 7px; min-height: 52px; padding: 8px; border: 1px solid rgba(58,86,102,.1); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 5px 15px rgba(38,64,80,.13); }.hiw-live-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #e7c18f; color: #85583b; font-size: .72rem; font-weight: 800; }.hiw-live-card strong, .hiw-live-card small { display: block; }.hiw-live-card strong { margin-bottom: 3px; font-size: 8px; }.hiw-live-card small { color: #778894; font-size: 5.8px; font-weight: 700; white-space: nowrap; }.hiw-live-card small i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: #3ecb8b; }.hiw-live-card > b { color: #4385b4; font-size: 7px; }
.hiw-safe-map { bottom: 0; }.hiw-safe-ring { position: absolute; z-index: 5; top: 47%; left: 50%; display: grid; width: 128px; height: 128px; place-items: center; border: 2px solid rgba(57,181,125,.86); border-radius: 44% 56% 52% 48% / 59% 42% 58% 41%; background: rgba(99,212,154,.15); box-shadow: 0 0 0 11px rgba(77,203,142,.06); transform: translate(-50%,-50%) rotate(19deg); }.hiw-safe-ring span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #f7fffb; color: #2fa96f; box-shadow: 0 4px 10px rgba(48,129,85,.15); }.hiw-safe-ring svg { width: 15px; height: 15px; }.hiw-safe-pin { position: absolute; z-index: 8; top: 48%; left: 50%; width: 16px; height: 16px; border: 3px solid white; border-radius: 50%; background: #2ec680; box-shadow: 0 3px 9px rgba(31,122,80,.25); transform: translate(-50%,-50%); }.hiw-place-card { position: absolute; z-index: 12; right: 7px; bottom: 25px; left: 7px; display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; min-height: 52px; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 5px 15px rgba(38,64,80,.13); }.hiw-place-card > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: #e8f8ef; color: #2ea76c; }.hiw-place-card svg { width: 16px; height: 16px; }.hiw-place-card strong, .hiw-place-card small { display: block; }.hiw-place-card strong { margin-bottom: 3px; font-size: 7.4px; }.hiw-place-card small { color: #778894; font-size: 5.7px; font-weight: 700; }.hiw-place-card small i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: #40c98c; }.hiw-map-small-button { position: absolute; z-index: 10; right: 12px; bottom: 94px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 9px; background: #fff; color: #426271; box-shadow: 0 5px 14px rgba(38,64,80,.15); font-size: 17px; }
.hiw-rhythm-head, .hiw-walk-head, .hiw-alert-head { position: absolute; z-index: 5; top: 37px; right: 13px; left: 13px; display: flex; align-items: center; gap: 8px; }.hiw-rhythm-head > span, .hiw-walk-head > span, .hiw-alert-head > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 10px; background: #e7f5fb; color: #3485b5; }.hiw-rhythm-head svg, .hiw-walk-head svg, .hiw-alert-head svg { width: 15px; height: 15px; }.hiw-rhythm-head div, .hiw-walk-head div, .hiw-alert-head div { display: grid; gap: 1px; }.hiw-rhythm-head small, .hiw-walk-head small, .hiw-alert-head small { color: #73838d; font-size: 5.6px; font-weight: 700; }.hiw-rhythm-head strong, .hiw-walk-head strong, .hiw-alert-head strong { font-size: 8px; }.hiw-rhythm-head > b { margin-left: auto; color: #82939e; font-size: 13px; letter-spacing: 2px; }
.hiw-rhythm-score { position: absolute; top: 88px; right: 13px; left: 13px; min-height: 82px; padding: 12px; border-radius: 15px; background: linear-gradient(135deg, #ecf7f2, #edf6fb); }.hiw-rhythm-score small { display: block; color: #668075; font-size: 6px; font-weight: 800; }.hiw-rhythm-score strong { display: inline-block; margin: 4px 1px 0 0; color: #294858; font-size: 27px; letter-spacing: -.1em; line-height: 1; }.hiw-rhythm-score span { color: #7a909b; font-size: 7px; font-weight: 800; }.hiw-rhythm-score i { position: absolute; right: 11px; bottom: 13px; color: #36a76c; font-size: 6px; font-style: normal; font-weight: 800; }.hiw-rhythm-chart { position: absolute; top: 188px; right: 13px; left: 13px; display: flex; align-items: end; gap: 5px; height: 94px; padding: 10px 8px; border-bottom: 1px solid #dce8e6; }.hiw-rhythm-chart span { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(0deg, #72bdcf, #94d6b2); }.hiw-rhythm-chart span:nth-child(3n) { background: linear-gradient(0deg, #89b6e1, #bee0f4); }.hiw-rhythm-list { position: absolute; right: 13px; bottom: 31px; left: 13px; display: grid; gap: 7px; }.hiw-rhythm-list > div { display: grid; grid-template-columns: 10px 1fr; gap: 7px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid #e7edf0; }.hiw-rhythm-list > div:last-child { border: 0; }.hiw-rhythm-list i { width: 7px; height: 7px; border-radius: 50%; background: #80c6ba; }.hiw-rhythm-list > div:nth-child(2) i { background: #9dc4e8; }.hiw-rhythm-list > div:nth-child(3) i { background: #efbf7a; }.hiw-rhythm-list span { display: flex; justify-content: space-between; }.hiw-rhythm-list small { color: #778994; font-size: 6.3px; font-weight: 700; }.hiw-rhythm-list strong { color: #345263; font-size: 6.4px; }
.hiw-walk-map { top: 78px; bottom: 0; }.hiw-walk-route { position: absolute; z-index: 7; width: 100%; height: 100%; overflow: visible; }.hiw-walk-route path { fill: none; stroke: #4c9de0; stroke-dasharray: 3 3; stroke-linecap: round; stroke-width: 3; }.hiw-walk-route circle { fill: #43c488; stroke: white; stroke-width: 3; }.hiw-walk-route circle:last-child { fill: #338acc; }.hiw-heat { position: absolute; z-index: 6; display: block; border-radius: 50%; background: radial-gradient(circle, rgba(245,93,75,.55), rgba(249,183,71,.33) 34%, transparent 70%); filter: blur(1px); }.hiw-heat.h-one { top: 40%; left: 37%; width: 76px; height: 76px; }.hiw-heat.h-two { top: 62%; left: 19%; width: 49px; height: 49px; }.hiw-heat.h-three { top: 25%; right: 16%; width: 42px; height: 42px; }.hiw-walk-bottom { position: absolute; z-index: 12; right: 7px; bottom: 25px; left: 7px; display: grid; grid-template-columns: 25px 1fr auto; gap: 7px; align-items: center; min-height: 46px; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 5px 15px rgba(38,64,80,.13); }.hiw-walk-bottom > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #fff4dd; color: #df9b27; font-size: 10px; }.hiw-walk-bottom strong, .hiw-walk-bottom small { display: block; }.hiw-walk-bottom strong { margin-bottom: 2px; font-size: 7px; }.hiw-walk-bottom small { color: #788993; font-size: 5.5px; font-weight: 700; }.hiw-walk-bottom b { color: #6a8290; font-size: 15px; font-weight: 400; }
.hiw-alert-head { top: 37px; }.hiw-alert-head > span { background: #edf1ff; color: #6275c9; }.hiw-alert-map { position: absolute; top: 77px; right: 13px; left: 13px; height: 142px; overflow: hidden; border-radius: 15px; background: linear-gradient(135deg, #dce9ee, #f3f3ea); }.hiw-alert-map::before { position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(118deg, transparent 46%, rgba(139,159,168,.28) 47% 49%, transparent 50%), linear-gradient(26deg, transparent 46%, rgba(255,255,255,.75) 47% 49%, transparent 50%); background-size: 17px 21px, 23px 19px; content: ""; }.hiw-alert-map span { position: absolute; width: 80px; height: 9px; border-radius: 10px; background: white; transform: rotate(35deg); }.hiw-alert-map span:nth-child(1) { top: 45px; left: -5px; }.hiw-alert-map span:nth-child(2) { top: 69px; right: -9px; transform: rotate(-22deg); }.hiw-alert-map span:nth-child(3) { bottom: 25px; left: 28px; transform: rotate(-8deg); }.hiw-alert-map i { position: absolute; top: 56px; left: 53%; width: 16px; height: 16px; border: 3px solid white; border-radius: 50%; background: #f16772; box-shadow: 0 2px 7px rgba(119,60,62,.25); }.hiw-alert-card { position: relative; z-index: 5; display: grid; grid-template-columns: 27px 1fr auto; gap: 7px; align-items: center; min-height: 45px; margin: 0 13px 7px; padding: 7px; border: 1px solid rgba(68,90,119,.08); border-radius: 13px; background: white; box-shadow: 0 5px 14px rgba(35,59,77,.09); }.hiw-alert-card-main { margin-top: 237px; }.hiw-alert-card > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #edf7f1; color: #2fa971; }.hiw-alert-card:nth-of-type(3) > span { background: #fff1ef; color: #e17862; }.hiw-alert-card:nth-of-type(4) > span { background: #ecf4ff; color: #4789bd; }.hiw-alert-card svg { width: 14px; height: 14px; }.hiw-alert-card strong, .hiw-alert-card small { display: block; }.hiw-alert-card strong { margin-bottom: 2px; font-size: 7px; }.hiw-alert-card small { color: #7a8993; font-size: 5.5px; font-weight: 700; }.hiw-alert-card > b { color: #7990a0; font-size: 13px; font-weight: 400; }
.how-photo { position: absolute; z-index: 1; overflow: hidden; margin: 0; border: 5px solid rgba(255,255,255,.83); border-radius: 24px; box-shadow: 0 21px 38px rgba(38,72,90,.19); transition: transform .7s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }.how-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .85s ease; }.how-photo figcaption { position: absolute; right: 9px; bottom: 9px; left: 9px; padding: 7px 9px; border-radius: 10px; background: rgba(20,44,58,.62); color: white; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 5.8px; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase; backdrop-filter: blur(7px); }.how-feature:hover .how-photo { box-shadow: 0 28px 48px rgba(38,72,90,.26); }.how-feature:hover .how-photo img { transform: scale(1.07); }
.how-photo-safe { top: 14px; right: 1%; width: min(39%, 192px); height: 259px; transform: rotate(8deg); }.how-feature:hover .how-photo-safe { transform: rotate(4deg) translate(7px,-8px); }.how-photo-rhythm { right: 3%; bottom: 9px; width: min(40%, 199px); height: 263px; transform: rotate(-8deg); }.how-feature:hover .how-photo-rhythm { transform: rotate(-4deg) translate(4px,-8px); }.how-photo-walks { top: 14px; left: 4%; width: min(42%, 205px); height: 239px; transform: rotate(-9deg); }.how-feature:hover .how-photo-walks { transform: rotate(-5deg) translate(-6px,-7px); }
.how-feature-live .how-visual-wash { background: radial-gradient(circle, rgba(183,228,248,.62), rgba(231,243,245,.25) 51%, transparent 70%); }.how-feature-safe .how-visual-wash { background: radial-gradient(circle, rgba(190,238,207,.6), rgba(235,245,225,.3) 51%, transparent 70%); }.how-feature-rhythm .how-visual-wash { background: radial-gradient(circle, rgba(203,230,222,.67), rgba(229,244,239,.3) 51%, transparent 70%); }.how-feature-walks .how-visual-wash { background: radial-gradient(circle, rgba(255,226,175,.52), rgba(237,245,225,.3) 51%, transparent 70%); }.how-feature-alerts .how-visual-wash { background: radial-gradient(circle, rgba(214,220,250,.65), rgba(235,242,255,.29) 51%, transparent 70%); }
.hiw-phone-live.is-live .hiw-live-pulse { animation-duration: 1.3s; }.hiw-phone-live.is-live .hiw-live-card { background: #f4fffa; }.hiw-phone-live.is-live .hiw-live-card small i { box-shadow: 0 0 0 4px rgba(62,203,139,.16); }

.how-closing { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(310px, .55fr); align-items: center; min-height: 430px; overflow: hidden; margin-top: 112px; padding: 68px 74px; border-radius: 35px; background: radial-gradient(circle at 81% 26%, rgba(88,179,223,.33), transparent 20%), linear-gradient(130deg, #102531, #1e3d4f); color: white; }.how-closing > div:first-child { position: relative; z-index: 3; max-width: 540px; }.how-closing .eyebrow { color: #a2cce1; }.how-closing h2 { max-width: 10ch; margin-bottom: 17px; font-size: clamp(2.7rem, 4.8vw, 4.8rem); font-weight: 720; line-height: .91; }.how-closing p:not(.eyebrow) { max-width: 46ch; margin-bottom: 27px; color: rgba(225,242,249,.72); font-size: .95rem; line-height: 1.57; }.how-closing-button { background: #e4f4ff; color: #1c4157; }.how-closing-button:hover { background: #fff; }.how-closing-orbit { position: relative; z-index: 2; justify-self: center; width: min(330px, 100%); aspect-ratio: 1; }.how-closing-orbit > span { position: absolute; inset: 0; border: 1px solid rgba(180,224,244,.3); border-radius: 50%; }.how-closing-orbit > span:nth-child(2) { inset: 13%; border-style: dashed; animation: how-orbit 21s linear infinite reverse; }.how-closing-orbit > span:nth-child(3) { inset: 28%; border-color: rgba(180,224,244,.47); }.how-closing-orbit > div { position: absolute; inset: 36%; display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; border: 1px solid rgba(211,242,255,.5); border-radius: 50%; background: rgba(218,244,255,.13); color: #d9f3ff; box-shadow: 0 0 44px rgba(113,199,238,.25); }.how-closing-orbit svg { width: 16px; height: 16px; }.how-closing-orbit svg:nth-child(2) { color: #94e9c2; }.how-closing-orbit svg:nth-child(3) { color: #a9d9ff; }
@keyframes how-orbit { to { transform: rotate(360deg); } }@keyframes how-pulse { 0% { opacity: .8; transform: translate(-50%,-50%) scale(.55); } 75%,100% { opacity: 0; transform: translate(-50%,-50%) scale(1.2); } }

@media (max-width: 980px) { .how-hero { grid-template-columns: .78fr 1.22fr; min-height: 570px; }.how-hero-copy { padding: 55px 26px 55px 46px; }.how-hero h1 { font-size: clamp(3.4rem, 7.4vw, 4.85rem); }.how-hero-media { left: 34%; }.how-feature-layout, .how-feature:nth-child(even) .how-feature-layout { grid-template-columns: minmax(230px, .8fr) minmax(390px, 1.2fr); gap: 35px; }.how-feature:nth-child(even) .how-feature-copy { order: 2; }.how-section-nav > span { display: none; }.how-section-nav { justify-content: center; }.hiw-phone { width: min(275px, 61%); }.how-feature-copy h2 { font-size: clamp(2.5rem, 5.4vw, 3.8rem); }.how-closing { padding: 58px; } }
@media (max-width: 720px) { .how-experience { padding-top: 18px; padding-bottom: 72px; }.how-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; margin: 0 14px 28px; border-radius: 27px; }.how-hero-copy { padding: 43px 25px 31px; }.how-hero h1 { max-width: 9.5ch; font-size: clamp(3.3rem, 14vw, 4.45rem); }.how-hero-copy > p:not(.eyebrow) { margin-bottom: 24px; font-size: .92rem; }.how-hero-media { position: relative; inset: auto; height: 330px; margin-top: 2px; clip-path: none; }.how-hero-media::after { background: linear-gradient(0deg, rgba(14,39,54,.42), transparent 50%); }.how-hero-media img { object-position: 60% 50%; }.how-hero-media figcaption { right: 16px; bottom: 18px; font-size: .69rem; }.how-hero-orbit-one { top: 30%; right: -23%; width: 180px; }.how-hero-orbit-two { display: none; }.how-section-nav-wrap { top: 65px; }.how-section-nav { width: 100%; min-height: 61px; padding: 0 14px; }.how-section-nav > div { width: 100%; justify-content: flex-start; }.how-section-nav button { min-height: 33px; padding: 0 9px; font-size: .68rem; }.how-section-nav button b { display: none; }.how-features { width: min(100% - 40px, 560px); }.how-feature { min-height: 0; padding: 75px 0 79px; scroll-margin-top: 115px; }.how-feature:first-child { padding-top: 79px; }.how-feature-index { margin-bottom: 20px; }.how-feature-layout, .how-feature:nth-child(even) .how-feature-layout { display: flex; flex-direction: column; align-items: stretch; gap: 27px; }.how-feature:nth-child(even) .how-feature-copy { order: 0; }.how-feature:nth-child(even) .how-feature-visual { order: 0; }.how-feature-copy { max-width: 100%; }.how-feature-copy h2 { max-width: 10.4ch; margin-bottom: 16px; font-size: clamp(2.55rem, 11.4vw, 4rem); }.how-feature-text { margin-bottom: 19px; font-size: .9rem; }.how-feature-visual { min-height: 422px; }.how-visual-wash { width: min(94%, 400px); }.hiw-phone { width: 248px; height: 441px; border-width: 6px; border-radius: 35px; }.hiw-phone::after { border-radius: 29px; }.hiw-island { top: 6px; width: 68px; height: 18px; }.hiw-phone-top { padding: 10px 13px 0; }.hiw-phone-live { transform: rotate(2.2deg) translateX(-7px); }.how-feature:nth-child(even) .hiw-phone { transform: rotate(-2.2deg) translateX(7px); }.how-feature:hover .hiw-phone, .how-feature:nth-child(even):hover .hiw-phone { transform: rotate(0deg) translateY(-4px); }.how-photo-safe { right: 1%; width: 136px; height: 190px; }.how-photo-rhythm { right: 0; width: 141px; height: 194px; }.how-photo-walks { left: 0; width: 143px; height: 181px; }.how-closing { display: block; width: calc(100% - 28px); min-height: 0; margin-top: 69px; padding: 44px 26px 32px; border-radius: 27px; }.how-closing h2 { max-width: 10ch; font-size: clamp(2.7rem, 11.6vw, 4rem); }.how-closing p:not(.eyebrow) { margin-bottom: 25px; font-size: .88rem; }.how-closing-orbit { width: 200px; margin: 37px auto 0; }.how-closing-orbit > div { inset: 35%; }.how-closing-orbit svg { width: 12px; height: 12px; } }
@media (prefers-reduced-motion: reduce) { .how-experience *, .how-experience *::before, .how-experience *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }