/* Home page only. Uses the base layer (base.css) and never redefines it.
   Prefix hm-. Breakpoints 991 / 767 / 479 to match Webflow. */

.hm-arrow { color: var(--cs-green-bright); }

/* ---------- Hero: headline left, the map right ---------- */
/* The hero owns the first screen: the customer ticker starts below the fold. */
.hm-hero { position: relative; display: flex; align-items: center; min-height: calc(100vh - 77px); min-height: calc(100svh - 77px); padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(88px, 8vw, 120px); }
.hm-hero .hm-hero-grid { width: 100%; }
.hm-scroll { position: absolute; left: 50%; bottom: 0; width: 3px; height: 56px; margin-left: -1.5px; background: linear-gradient(rgba(59, 214, 43, 0), var(--cs-green)); animation: hm-cue 2.4s ease-in-out infinite; }
.hm-hero-grid { display: grid; display: block; }
.hm-hero-copy { position: relative; z-index: 2; max-width: 56%; }
.hm-hero .cs-pill { margin-bottom: 36px; }
.hm-hero-title { margin: 0; font-size: clamp(42px, 4.3vw, 78px); line-height: 1.06; }
.hm-line { display: block; white-space: nowrap; }
.hm-line--cycle { margin-top: 0; }
.hm-hero-from { margin-top: 10px; font-weight: 300; font-size: clamp(30px, 3.6vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: var(--cs-text-soft); }
.hm-from { display: inline-block; white-space: nowrap; }
.hm-cycle { display: inline-grid; vertical-align: bottom; }
.hm-cycle-word { grid-area: 1 / 1; justify-self: start; opacity: 0; animation: hm-word 12s infinite; white-space: nowrap; }
.hm-cycle-word--1 { animation-delay: -0.6s; }
.hm-cycle-word--2 { animation-delay: 3s; }
.hm-cycle-word--3 { animation-delay: 6s; }
.hm-cycle-word--4 { animation-delay: 9s; }
.hm-hero .cs-lead { margin-top: 38px; max-width: 560px; font-size: clamp(18px, 1.5vw, 26px); line-height: 1.42; }
.hm-hero .cs-actions { margin-top: 48px; }
.hm-hero-meta { margin-top: 44px; color: var(--cs-text-faint); }
.hm-hero-meta2 { margin-top: 8px; }

.hm-stage { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; z-index: 0; pointer-events: none; }
.hm-globe { position: absolute; left: 0; top: 0; }
.hm-you { position: absolute; left: 0; top: 0; opacity: 0; display: flex; align-items: center; gap: 14px; z-index: 2; }
.hm-you-orb { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cs-pale); box-shadow: 0 0 22px rgba(214, 255, 210, .95); }
.hm-you-orb::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid rgba(214, 255, 210, .5); animation: hm-ring 3s ease-in-out infinite; }
.hm-you-label { white-space: nowrap; font-family: var(--cs-font-label); font-weight: 800; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--cs-pale); text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.hm-stage-glow { position: absolute; left: 50%; top: 50%; width: 120%; height: 130%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(59, 214, 43, 0.22), rgba(59, 214, 43, 0)); pointer-events: none; }
.hm-map { position: relative; display: block; width: 100%; height: auto; }
.hm-map-land { opacity: .6; }
.hm-arc { fill: none; stroke: var(--cs-green-bright); stroke-width: 1.8; stroke-dasharray: 5 7; opacity: .8; animation: hm-flow 2.4s linear infinite; }
.hm-pin { fill: var(--cs-green-bright); filter: drop-shadow(0 0 7px rgba(37, 242, 26, .9)); animation: hm-pulse 2.6s ease-in-out infinite; }
.hm-pin-label { fill: var(--cs-text); font-family: var(--cs-font-label); font-weight: 800; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; }
.hm-home-ring { fill: none; stroke: var(--cs-pale); stroke-width: 1.6; opacity: .5; animation: hm-ring 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hm-home { fill: var(--cs-pale); filter: drop-shadow(0 0 12px rgba(214, 255, 210, .9)); }
.hm-home-label { fill: var(--cs-pale); font-family: var(--cs-font-label); font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; }
.hm-stage-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 8px; }
.hm-notes { position: absolute; left: 4%; bottom: 7%; z-index: 2; display: grid; gap: 14px; width: min(400px, 72%); pointer-events: none; user-select: none; cursor: default; }
/* Part of the globe artwork, not controls: a status log set like video captions. The dark strip sits behind the text so it stays readable over the dots, but it has square-ish corners, no border and no shadow, so it does not read as a button. */
.hm-note { position: relative; justify-self: start; width: fit-content; max-width: 100%; padding: 5px 12px 5px 28px; border-radius: 3px; background: rgba(0, 12, 18, .82); font: 500 13px/1.35 var(--cs-font-mono); letter-spacing: .02em; color: var(--cs-text-soft); }
.hm-note::before { content: ""; position: absolute; left: 11px; top: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--cs-dark4); }
.hm-note:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 100%; height: 14px; width: 1px; background: var(--cs-dark4); }
.hm-note--old { opacity: .45; }
.hm-note--mid { opacity: .75; }
.hm-note--enter { animation: hm-note-in .5s ease; }
.hm-note--new { color: var(--cs-text); }
.hm-note--new::before { background: var(--cs-green-bright); box-shadow: 0 0 10px var(--cs-green-bright); }
.hm-note-title { font-weight: 800; color: var(--cs-pale); }
.hm-illustrative { position: absolute; right: 24px; bottom: 14px; z-index: 2; opacity: .7; font-family: var(--cs-font-label); font-weight: 800; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-text-faint); }
.hm-hangtag { position: absolute; top: -10px; right: 4%; z-index: 3; width: 120px; transform-origin: 50% -10px; animation: hm-swing 5s ease-in-out infinite; }
.hm-hangtag::before { content: ''; position: absolute; left: 50%; top: -34px; width: 3px; height: 50px; background: var(--cs-text-faint); }
.hm-hangtag-body { position: relative; padding: 38px 10px 14px; text-align: center; background: var(--cs-pale); clip-path: polygon(50% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); border-radius: 0 0 14px 14px; }
.hm-hangtag-body::before { content: ''; position: absolute; left: 50%; top: 13px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--cs-dark1); }
.hm-hangtag-price { font-weight: 800; font-size: 40px; line-height: .95; letter-spacing: -0.04em; color: var(--cs-dark1); }
.hm-hangtag-unit { font-family: var(--cs-font-mono); font-weight: 500; font-size: 12px; color: var(--cs-dark1); }

/* ---------- Customer marquee ---------- */
.hm-logos { padding: 44px 0 52px; border-top: 1px solid var(--cs-border); border-bottom: 1px solid var(--cs-border); background: var(--cs-dark1); overflow: hidden; }
.hm-logos-label { text-align: center; margin-bottom: 30px; }
.hm-marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hm-track { display: flex; flex: none; align-items: center; gap: 72px; padding-right: 72px; animation: hm-scroll 70s linear infinite; }
.hm-logo { flex: none; display: flex; align-items: center; }
.hm-logo-img { display: block; height: 44px; width: auto; max-width: 170px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; }

/* ---------- Every use case: table rows with icons ---------- */
.hm-rows { margin-top: 64px; border-top: 1px solid var(--cs-border-strong); }
.hm-row-item { border-bottom: 1px solid var(--cs-border-strong); }
.hm-row { display: grid; grid-template-columns: 56px 210px 1.5fr 1fr 40px; align-items: center; gap: 28px; padding: 26px 16px; text-decoration: none; transition: background .2s; }
.hm-row:hover, .hm-row:focus-visible { background: linear-gradient(90deg, rgba(59, 214, 43, 0.14), rgba(59, 214, 43, 0)); }
.hm-row-icon { width: 28px; height: 28px; padding: 14px; box-sizing: content-box; border-radius: 16px; background: rgba(59, 214, 43, 0.12); color: var(--cs-green-bright); transition: background .2s, color .2s; }
.hm-row:hover .hm-row-icon { background: var(--cs-green-bright); color: var(--cs-dark1); }
.hm-row-kicker { font-family: var(--cs-font-label); font-weight: 800; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--cs-green); }
.hm-row-title { font-weight: 800; font-size: clamp(26px, 3.2vw, 46px); line-height: 1; letter-spacing: -0.03em; color: var(--cs-text); transition: color .2s; }
.hm-row:hover .hm-row-title { color: var(--cs-green-bright); }
.hm-row-text { font-size: 18px; color: var(--cs-text-soft); }
.hm-row-arrow { font-size: 30px; color: var(--cs-green-bright); transition: transform .2s; justify-self: end; }
.hm-row:hover .hm-row-arrow { transform: translateX(6px); }

/* ---------- How it works: stepper (one window, one screen at a time) ---------- */
.hm-stepper { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px, 4vw, 72px); align-items: center; margin-top: 56px; }
.hm-tabs { display: grid; gap: 10px; }
.hm-tab { position: relative; width: 100%; display: flex; align-items: center; gap: 20px; padding: 18px 24px; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden; border-radius: var(--cs-radius-panel); background: transparent; border: 1.5px solid var(--cs-border); transition: background .2s, border-color .2s; }
.hm-tab:hover { border-color: var(--cs-border-strong); background: rgba(255, 255, 255, 0.03); }
.hm-tab.is-active { align-items: flex-start; padding: 24px; background: var(--cs-grad-panel); border: 2px solid var(--cs-green-bright); box-shadow: var(--cs-shadow-glow); }
.hm-tab-num { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--cs-green); font-weight: 800; font-size: 21px; color: var(--cs-green); }
.hm-tab.is-active .hm-tab-num { background: var(--cs-green-bright); border-color: var(--cs-green-bright); color: var(--cs-dark1); box-shadow: 0 0 30px rgba(37, 242, 26, .5); }
.hm-tab-body { display: block; flex: 1; }
.hm-tab-title { display: block; font-weight: 800; font-size: clamp(21px, 1.9vw, 27px); letter-spacing: -0.02em; line-height: 1.15; color: var(--cs-text); }
.hm-tab-text { display: block; max-height: 0; opacity: 0; overflow: hidden; font-size: 17px; line-height: 1.4; color: var(--cs-text-soft); transition: max-height .35s ease, opacity .25s ease, margin .25s ease; }
.hm-tab.is-active .hm-tab-text { max-height: 96px; opacity: 1; margin-top: 8px; }
.hm-tab-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.hm-tab.is-active .hm-tab-progress { background: rgba(255, 255, 255, 0.08); }
.hm-tab-fill { display: block; width: 0; height: 100%; background: var(--cs-green-bright); }
.hm-tab.is-active .hm-tab-fill { animation: hm-fill 6s linear forwards; }
.hm-stepper:hover .hm-tab-fill, .hm-stepper:focus-within .hm-tab-fill { animation-play-state: paused; }
.hm-stepper.is-manual .hm-tab.is-active .hm-tab-fill { animation: none; width: 100%; }

.hm-window { border-radius: 20px; overflow: hidden; background: #0a1f27; border: 2px solid #2b3d44; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 80px rgba(59, 214, 43, 0.14); }
.hm-window-bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: #e9eaeb; }
.hm-window-url { margin: 0 auto; padding: 2px 48px; border-radius: 6px; background: #fff; color: #555; font-weight: 400; font-size: 12px; }
.hm-window-body { position: relative; min-height: 470px; display: flex; align-items: center; justify-content: center; padding: 36px; background: radial-gradient(70% 70% at 50% 30%, rgba(59, 214, 43, 0.12), rgba(59, 214, 43, 0) 70%), #0a1f27; }
.hm-view { display: none; width: 100%; align-items: center; justify-content: center; }
.hm-view.is-active { display: flex; animation: hm-fade .35s ease; }
.hm-illustrative--view { position: absolute; right: 18px; bottom: 12px; }

/* ---------- Animated step scenes (drawn from the app's interface; they replay each time a step opens) ---------- */
.sc { position: relative; container-type: inline-size; width: min(640px, 100%); aspect-ratio: 16 / 10; font-size: clamp(10px, 2.3cqw, 15px); }
.sc-chip { font-family: var(--cs-font-label); font-weight: 800; font-size: .8em; letter-spacing: .07em; text-transform: uppercase; color: var(--cs-text-soft); }
@keyframes sc-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sc-slide { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes sc-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sc-type { from { width: 0; } to { width: 12.4ch; } }
@keyframes sc-fill { from { width: 0; } to { width: 62%; } }

/* 1. Pick */
.sc-pick { border-radius: 14px; overflow: hidden; background: #0a2229; border: 1.5px solid var(--cs-dark4); }
.sc-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-road { fill: none; stroke: rgba(161, 189, 194, .16); stroke-width: 7; }
.sc-road--minor { stroke-width: 3; stroke: rgba(161, 189, 194, .1); }
.sc-river { fill: none; stroke: rgba(40, 120, 150, .35); stroke-width: 22; stroke-linecap: round; }
.sc-search { position: absolute; left: 4%; top: 6%; display: flex; align-items: center; gap: .6em; padding: .7em 1em; border-radius: .8em; background: #0e2a33; border: 1.5px solid var(--cs-dark4); color: var(--cs-text); font-weight: 700; font-size: 1.05em; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); z-index: 3; }
.sc-search-icon { width: 1.2em; height: 1.2em; color: var(--cs-green-bright); flex: none; }
.sc-typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid var(--cs-pale); animation: sc-type 1.1s steps(12) .2s forwards; }
.sc-pin { position: absolute; width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em; border-radius: 50%; background: #1f8f2a; border: 2px solid #0a2229; box-shadow: 0 0 0 .35em rgba(59, 214, 43, .16); z-index: 1; }
.sc-pin--a { left: 17%; top: 52%; animation: sc-select .5s ease 1.5s forwards; }
.sc-pin--b { left: 37%; top: 66%; animation: sc-select .5s ease 2.3s forwards; }
.sc-pin--c { left: 30%; top: 36%; animation: sc-select .5s ease 3.1s forwards; }
.sc-pin--d { left: 46%; top: 44%; opacity: .6; }
.sc-pin--e { left: 9%; top: 72%; opacity: .6; }
@keyframes sc-select { 0% { transform: scale(1); } 60% { transform: scale(1.7); } 100% { transform: scale(1.35); background: var(--cs-pale); border-color: var(--cs-green-bright); box-shadow: 0 0 22px rgba(37, 242, 26, .9); } }
.sc-cursor { position: absolute; width: 2.4em; height: 2.4em; z-index: 4; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); animation: sc-cursor 3.9s ease-in-out .3s both; }
@keyframes sc-cursor { 0% { left: 10%; top: 16%; } 28% { left: 17.5%; top: 53%; } 36% { left: 17.5%; top: 53%; } 56% { left: 37.5%; top: 67%; } 64% { left: 37.5%; top: 67%; } 84% { left: 30.5%; top: 37%; } 100% { left: 30.5%; top: 37%; } }
.sc-cards { position: absolute; right: 3%; top: 8%; width: 40%; display: grid; gap: .7em; z-index: 3; }
.sc-card { display: flex; align-items: center; gap: .8em; padding: .5em; border-radius: .9em; background: #0e2a33; border: 1.5px solid var(--cs-dark4); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); opacity: 0; animation: sc-slide .5s ease both; }
.sc-card--1 { animation-delay: 1.85s; } .sc-card--2 { animation-delay: 2.65s; } .sc-card--3 { animation-delay: 3.45s; }
.sc-card-img { flex: none; width: 4.6em; height: 3.5em; object-fit: cover; border-radius: .5em; }
.sc-card-info { display: grid; gap: .1em; flex: 1; min-width: 0; }
.sc-card-type { font-family: var(--cs-font-label); font-weight: 800; font-size: .72em; letter-spacing: .07em; text-transform: uppercase; color: var(--cs-green); }
.sc-card-name { font-weight: 700; font-size: .95em; color: var(--cs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card-tick { flex: none; display: flex; align-items: center; justify-content: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--cs-green); color: var(--cs-dark1); font-weight: 800; font-size: .9em; }
.sc-bar { position: absolute; left: 3%; right: 3%; bottom: 4%; padding: .7em 1em; border-radius: .8em; background: var(--cs-pale); color: var(--cs-dark1); font-weight: 800; font-size: 1em; text-align: center; z-index: 3; opacity: 0; animation: sc-in .5s ease 3.9s both; }

/* 2. Set */
.sc-sched { display: flex; flex-direction: column; justify-content: center; gap: 1.1em; }
.sc-sched-head { display: flex; gap: .6em; }
.sc-sched-head .sc-chip { padding: .45em .9em; border-radius: 999px; border: 1.5px solid var(--cs-dark4); }
.sc-chip--on { background: var(--cs-green); border-color: var(--cs-green) !important; color: var(--cs-dark1) !important; }
.sc-grid { display: grid; grid-template-columns: 3.4em repeat(7, 1fr); gap: .5em; align-items: center; }
.sc-day { text-align: center; font-family: var(--cs-font-label); font-weight: 800; font-size: .8em; letter-spacing: .06em; color: var(--cs-text-soft); }
.sc-time { font-family: var(--cs-font-mono); font-weight: 500; font-size: .8em; color: var(--cs-text-faint); }
.sc-cell { display: block; height: 2.7em; border-radius: .55em; background: #0f2a33; border: 1px solid var(--cs-dark4); }
.sc-cell--on { animation: sc-paint .45s ease var(--d) both; }
@keyframes sc-paint { 0% { background: #0f2a33; border-color: var(--cs-dark4); transform: scale(1); box-shadow: none; } 55% { transform: scale(1.14); } 100% { background: linear-gradient(150deg, #5cf04b, #2fc821); border-color: transparent; transform: scale(1); box-shadow: 0 0 20px rgba(59, 214, 43, .45); } }
.sc-pace { display: flex; align-items: center; gap: 1em; padding: .9em 1.1em; border-radius: 1em; background: #0e2a33; border: 1.5px solid var(--cs-dark4); }
.sc-pace-track { flex: 1; height: .7em; border-radius: 999px; background: #1c4a55; overflow: hidden; }
.sc-pace-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--cs-green-bright); box-shadow: 0 0 14px rgba(37, 242, 26, .8); animation: sc-fill .8s ease 3.4s forwards; }
.sc-pace-num { font-weight: 800; font-size: 1.9em; letter-spacing: -0.03em; color: var(--cs-green-bright); opacity: 0; animation: sc-pop .5s ease 3.8s both; }
.sc-pace-per { font-weight: 300; font-size: .5em; letter-spacing: 0; color: var(--cs-text-soft); }

/* 3. Upload */
.sc-up { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; }
.sc-drop { position: absolute; left: 22%; right: 22%; top: 7%; height: 40%; display: flex; align-items: center; justify-content: center; border-radius: 1em; border: .25em dashed var(--cs-green); background: rgba(59, 214, 43, .06); opacity: 1; animation: sc-fade-out .4s ease 1.5s forwards; }
.sc-drop-label { font-weight: 700; font-size: 1.1em; color: var(--cs-pale); }
@keyframes sc-fade-out { to { opacity: 0; transform: scale(.96); } }
.sc-ad { position: absolute; left: 50%; top: 22%; width: 9em; height: 6em; margin-left: -4.5em; display: flex; align-items: center; justify-content: center; border-radius: .8em; background: linear-gradient(150deg, #5cf04b, #1f9a2e); color: var(--cs-dark1); font-weight: 800; font-size: 1.2em; box-shadow: 0 0 34px rgba(59, 214, 43, .5); z-index: 2; animation: sc-fly 1.5s cubic-bezier(.3, .8, .3, 1) .2s both, sc-fade-out .4s ease 1.7s forwards; }
@keyframes sc-fly { from { opacity: 0; transform: translate(-200%, -160%) rotate(-16deg); } to { opacity: 1; transform: none; } }
.sc-formats { display: flex; align-items: flex-end; justify-content: center; gap: 1.6em; margin-top: 1.4em; }
.sc-format { display: flex; flex-direction: column; align-items: center; gap: .5em; opacity: 0; animation: sc-in .5s ease both; }
.sc-format--1 { animation-delay: 1.9s; } .sc-format--2 { animation-delay: 2.3s; } .sc-format--3 { animation-delay: 2.7s; }
.sc-format-art { display: flex; align-items: center; justify-content: center; border-radius: .7em; background: linear-gradient(150deg, #5cf04b, #1f9a2e); border: .2em solid var(--cs-green-bright); box-shadow: 0 0 28px rgba(59, 214, 43, .35); color: var(--cs-dark1); font-weight: 800; font-size: 1.05em; }
.sc-format-art--square { width: 8em; height: 8em; }
.sc-format-art--tall { width: 5.6em; height: 10em; }
.sc-format-art--wide { width: 11.4em; height: 5.8em; }
.sc-format-name { font-weight: 700; font-size: 1em; color: var(--cs-text); }
.sc-format-ok { font-family: var(--cs-font-label); font-weight: 800; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-green-bright); }
.sc-file { display: flex; align-items: center; gap: .8em; padding: .8em 1.1em; border-radius: 1em; background: #0e2a33; border: 1.5px solid var(--cs-dark4); font-family: var(--cs-font-mono); font-size: 1em; color: var(--cs-text); opacity: 0; animation: sc-in .5s ease 3.3s both; }
.sc-file-ok { margin-left: 1.4em; padding: .3em .8em; border-radius: 999px; background: var(--cs-green); color: var(--cs-dark1); font-family: var(--cs-font-label); font-weight: 800; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; }

/* 4. Approved and live */
.sc-live { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.4em; align-items: center; }
.sc-checks { display: grid; gap: .8em; }
.sc-check { display: flex; align-items: center; gap: .8em; padding: 1em 1.1em; border-radius: 1em; background: #0e2a33; border: 1.5px solid var(--cs-dark4); font-weight: 700; font-size: 1.05em; color: var(--cs-text); opacity: 0; animation: sc-slide .5s ease both; }
.sc-check--1 { animation-delay: .3s; } .sc-check--2 { animation-delay: 1.0s; } .sc-check--3 { animation-delay: 1.9s; border: 2.5px solid var(--cs-green-bright); background: #0f3340; box-shadow: var(--cs-shadow-glow); }
.sc-check-dot { flex: none; display: flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--cs-green); color: var(--cs-dark1); font-weight: 800; font-size: .9em; }
.sc-check--3 .sc-check-dot { background: var(--cs-green-bright); }
.sc-toast { position: absolute; right: 0; bottom: 2%; padding: .7em 1em; border-radius: 1em; background: #0f3340; border: 2.5px solid var(--cs-green-bright); box-shadow: var(--cs-shadow-glow), 0 12px 28px rgba(0, 0, 0, .45); color: var(--cs-text); font-size: 1em; opacity: 0; animation: sc-in .5s ease 2.6s both; }

/* Shared digital board (used in step 4 and in the price explainer) */
.bb { position: relative; container-type: inline-size; width: 100%; max-width: 440px; margin: 0 auto; }
.bb-bezel { padding: 3.2cqw; border-radius: 5cqw; background: linear-gradient(180deg, #1b2b31, #0f1b20); border: 2px solid #2b3d44; box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 60px rgba(59, 214, 43, .12); }
.bb-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 2.4cqw; overflow: hidden; background: #071820; }
.bb-ad { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 8cqw; letter-spacing: -0.03em; opacity: 0; }
.bb-ad--other { background: linear-gradient(150deg, #2b3d44, #1b2b31); color: var(--cs-text-soft); }
.bb-ad--yours { background: linear-gradient(150deg, #5cf04b, #1f9a2e); color: var(--cs-dark1); box-shadow: inset 0 0 60px rgba(255, 255, 255, .25); }
.bb-pole { width: 8%; height: 9cqw; margin: 0 auto; background: linear-gradient(90deg, #1b2b31, #2b3d44, #1b2b31); border-radius: 0 0 6px 6px; }
.bb-live-pill { position: absolute; left: 4cqw; top: 3cqw; padding: .6cqw 2.4cqw; border-radius: 999px; background: var(--cs-dark1); color: var(--cs-green-bright); font-family: var(--cs-font-label); font-weight: 800; font-size: 3cqw; letter-spacing: .08em; text-transform: uppercase; opacity: 0; z-index: 2; animation: sc-in .4s ease 2.3s both; }
.bb--live .bb-ad--other { opacity: 1; animation: sc-fade-out .4s ease 1.9s forwards; }
.bb--live .bb-ad--yours { animation: sc-in .6s ease 2.0s both; }
.bb--loop .bb-ad { animation: bb-show 9s ease infinite both; }
.bb--loop .bb-ad--1 { animation-delay: -.4s; } .bb--loop .bb-ad--2 { animation-delay: 2.6s; } .bb--loop .bb-ad--3 { animation-delay: 5.6s; }
@keyframes bb-show { 0% { opacity: 0; } 4%, 29% { opacity: 1; } 34%, 100% { opacity: 0; } }
.bb-plus { position: absolute; right: 4%; top: -4.5cqw; z-index: 3; padding: 1.2cqw 3.4cqw; border-radius: 999px; background: var(--cs-green-bright); color: var(--cs-dark1); font-weight: 800; font-size: 4cqw; box-shadow: 0 0 30px rgba(37, 242, 26, .7); opacity: 0; animation: bb-pop 9s ease infinite both; animation-delay: 2.7s; }
.bb-plus-price { font-weight: 400; }
@keyframes bb-pop { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 5%, 27% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-6px); } }

/* Price explainer */
.hm-play { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 88px); align-items: center; margin: 64px 0 56px; }
.hm-play-visual { position: relative; padding-top: 28px; }
.hm-illustrative--play { position: static; display: block; margin-top: 12px; text-align: center; }
.hm-play-title { font-size: clamp(26px, 2.6vw, 38px); }
.hm-play-text { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: #b3cacf; margin-top: 14px; max-width: 520px; }
.hm-play .hm-legend { margin-top: 28px; }
.hm-calc-title { font-size: clamp(26px, 2.8vw, 40px); margin-bottom: 28px; }

/* ---------- Price: slider first ---------- */
.hm-how { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 40px; }
.hm-how-item { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 18px; color: var(--cs-text); }
.hm-how-num { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--cs-green); font-weight: 800; font-size: 16px; color: var(--cs-green); }
.hm-calc { margin-top: 40px; padding: clamp(28px, 4vw, 56px); }
.hm-calc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.hm-calc-label { display: block; font-family: var(--cs-font-label); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-text-soft); }
.hm-calc-budget { font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(56px, 7vw, 112px); line-height: 1; letter-spacing: -0.045em; color: var(--cs-text); margin: 8px 0 22px; }
.hm-calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 999px; outline: none; background: linear-gradient(90deg, var(--cs-green-bright) var(--fill, 4%), #2a5a64 var(--fill, 4%)); }
.hm-calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cs-pale); border: 4px solid var(--cs-green-bright); box-shadow: 0 0 24px rgba(37, 242, 26, 0.6); cursor: pointer; }
.hm-calc-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--cs-pale); border: 4px solid var(--cs-green-bright); box-shadow: 0 0 24px rgba(37, 242, 26, 0.6); cursor: pointer; }
.hm-calc-big { font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(56px, 7vw, 112px); line-height: 1; letter-spacing: -0.045em; color: var(--cs-green-bright); text-shadow: 0 0 44px rgba(37, 242, 26, 0.4); margin-top: 8px; }
.hm-calc-unit { font-size: .4em; letter-spacing: 0; color: var(--cs-text); text-shadow: none; }
.hm-calc-sub { font-size: 18px; margin-top: 8px; }
.hm-calc-sub b { color: var(--cs-text); font-weight: 700; }
.hm-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hm-legend-item { display: flex; align-items: baseline; gap: 10px; padding: 10px 18px; border-radius: 12px; background: var(--cs-pale); color: var(--cs-dark1); }
.hm-legend-item--hl { background: var(--cs-grad-solid); box-shadow: 0 0 40px rgba(59, 214, 43, 0.35); }
.hm-legend-price { font-weight: 800; font-size: 26px; letter-spacing: -0.03em; }
.hm-legend-name { font-family: var(--cs-font-mono); font-weight: 500; font-size: 13px; }
.hm-calc .cs-footnote { margin-top: 32px; }

/* ---------- Flexible ---------- */
.hm-flex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hm-points { display: grid; gap: 14px; margin-top: 40px; }
.hm-point { padding: 24px 28px; border-radius: var(--cs-radius-panel); background: var(--cs-grad-panel); border: 1.5px solid var(--cs-dark4); }
.hm-point h3 { font-size: 24px; color: var(--cs-green); }
.hm-point p { font-size: 17px; margin-top: 6px; }
.hm-receipt-wrap { display: flex; justify-content: center; padding: 24px; }
.hm-receipt { width: 100%; max-width: 460px; padding: 30px 38px 24px; background: var(--cs-text); font-family: var(--cs-font-mono); transform: rotate(-3deg); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 110px rgba(59, 214, 43, 0.25); border-radius: 8px; }
.hm-receipt-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 3px solid rgba(0, 26, 35, 0.18); }
.hm-receipt-mark { width: 42px; height: 42px; border-radius: 6px; flex: none; }
.hm-receipt-label { font-family: var(--cs-font-label); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 26, 35, 0.6); }
.hm-receipt-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 2px dashed rgba(0, 26, 35, 0.22); }
.hm-receipt-line--total { border-bottom: 0; padding-top: 20px; }
.hm-receipt-key { font-size: 17px; color: rgba(0, 26, 35, 0.62); }
.hm-receipt-val { font-family: var(--cs-font); font-weight: 800; font-size: 27px; letter-spacing: -0.02em; color: var(--cs-dark1); }
.hm-receipt-val--pill { background: var(--cs-grad-solid); padding: 5px 16px; border-radius: 10px; font-size: 22px; }
.hm-receipt-foot { font-size: 12px; margin-top: 10px; color: #556569; }

/* ---------- Proof: a fitted grid ---------- */
.hm-clips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: var(--cs-wrap); margin: 48px auto 0; padding: 0 var(--cs-gutter); }
.hm-clip { overflow: hidden; border-radius: var(--cs-radius-panel); background: var(--cs-dark1); border: 1.5px solid var(--cs-dark4); }
.hm-clip-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.hm-clip-link:hover, .hm-clip-link:focus-visible { background: var(--cs-dark2); }
.hm-clip-watch { margin-top: 10px; }
.hm-clip-link:hover .hm-clip-watch, .hm-clip-link:focus-visible .hm-clip-watch { color: var(--cs-green-bright); }
.hm-clip-media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.hm-clip-video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; background: #00151c; object-fit: cover; }
.hm-clip-media .hm-clip-video { position: absolute; inset: 0; }
.hm-clip-media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 31, 39, 0.38); pointer-events: none; transition: opacity 180ms ease; }
.hm-clip-link:hover .hm-clip-media::after, .hm-clip-link:focus-visible .hm-clip-media::after { opacity: 0; }
.hm-clip-play { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hm-clip-media::after { transition: none; } }
.hm-clip-play { position: absolute; bottom: 14px; left: 14px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cs-green-bright); color: var(--cs-dark1); font-size: 16px; }
.hm-clip-link:focus-visible { outline: 3px solid var(--cs-green-bright); outline-offset: -3px; }
.hm-clip-caption { padding: 14px 18px 16px; font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--cs-text); }
.hm-clip-with { display: block; font-weight: 300; color: var(--cs-text-soft); }
.hm-proof-actions { padding-top: 0; }

/* ---------- Close ---------- */
.hm-close { background: var(--cs-grad-deep); }
.hm-close-panel { padding: clamp(56px, 8vw, 140px) var(--cs-gutter); border-radius: 36px; background: var(--cs-grad-mint); box-shadow: 0 0 140px rgba(59, 214, 43, 0.3); }
.hm-close-title { font-size: clamp(44px, 8.4vw, 124px); line-height: .98; color: var(--cs-dark1); }
.hm-close-cycle { display: inline-grid; vertical-align: bottom; }
.hm-close-word { grid-area: 1 / 1; justify-self: start; opacity: 0; animation: hm-word 12s infinite; white-space: nowrap; }
.hm-close-word--1 { animation-delay: -0.6s; }
.hm-close-word--2 { animation-delay: 3s; }
.hm-close-word--3 { animation-delay: 6s; }
.hm-close-word--4 { animation-delay: 9s; }
.hm-caret { animation: hm-blink 1s steps(1) infinite; }
.hm-close-text { font-size: clamp(19px, 2vw, 26px); margin-top: 20px; color: rgba(0, 26, 35, 0.75); }
.hm-close-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.hm-close-pill { display: inline-flex; padding: 9px 20px; border-radius: 999px; border: 2px solid rgba(0, 26, 35, 0.35); font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--cs-dark1); }
.hm-close-link { font-weight: 800; font-size: 18px; color: var(--cs-dark1); text-decoration: none; border-bottom: 2px solid rgba(0, 26, 35, 0.4); padding: 6px 0; }
.hm-smile { margin-top: 34px; font-size: 14px; color: rgba(0, 26, 35, 0.65); }
.hm-help { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; margin-top: 48px; }
.hm-help-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 17px; color: var(--cs-text-soft); text-decoration: none; }
.hm-help-link:hover { color: var(--cs-text); }

/* ---------- Motion ---------- */
@keyframes hm-word {
  0% { opacity: 0; transform: translateY(0.35em); }
  4%, 22% { opacity: 1; transform: translateY(0); }
  26% { opacity: 0; transform: translateY(-0.35em); }
  100% { opacity: 0; }
}
@keyframes hm-scroll { to { transform: translateX(-100%); } }
@keyframes hm-swing { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }
@keyframes hm-blink { 50% { opacity: 0; } }
@keyframes hm-flow { to { stroke-dashoffset: -24; } }
@keyframes hm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes hm-ring { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.35); opacity: .15; } }
@keyframes hm-cue { 0%, 100% { opacity: .35; transform: translateY(-6px); } 50% { opacity: 1; transform: none; } }
@keyframes hm-note-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hm-fill { to { width: 100%; } }
@keyframes hm-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sc *, .bb *, .sc, .bb { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .bb--loop .bb-ad { animation: none !important; opacity: 0; }
  .bb--loop .bb-ad--2 { opacity: 1; }
  .bb--loop .bb-plus { animation: none !important; opacity: 1; }
  .hm-cycle-word, .hm-close-word { animation: none; opacity: 0; }
  .hm-cycle-word--1, .hm-close-word--1 { opacity: 1; }
  .hm-track, .hm-hangtag, .hm-caret, .hm-arc, .hm-pin, .hm-home-ring, .hm-view.is-active, .hm-scroll { animation: none; }
  .hm-marquee { overflow-x: auto; }
}

/* ---------- Tablet (Webflow 991) ---------- */
@media (max-width: 991px) {
  .hm-hero { flex-direction: column; align-items: stretch; }
  .hm-globe { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%); }
  .hm-hero-copy { max-width: none; }
  .hm-stage { position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: 420px; margin-top: 40px; }
  .hm-line { white-space: normal; }
  .hm-hero-title { font-size: clamp(46px, 9vw, 84px); }
  .hm-hero-from { font-size: clamp(30px, 6vw, 56px); }
  .hm-row { grid-template-columns: 56px 1fr 40px; gap: 4px 20px; padding: 24px 8px; }
  .hm-row-kicker, .hm-row-title, .hm-row-text { grid-column: 2; }
  .hm-row-icon { grid-row: 1 / span 3; align-self: start; }
  .hm-row-arrow { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .hm-clips { grid-template-columns: 1fr 1fr; }
  .hm-stepper { grid-template-columns: 1fr; }
  .hm-window-body { min-height: 400px; }
  .hm-calc-grid { grid-template-columns: 1fr; gap: 36px; }
  .hm-play { grid-template-columns: 1fr; gap: 28px; margin: 48px 0 40px; }
  .hm-flex-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------- Mobile (Webflow 767) ---------- */
@media (max-width: 767px) {
  .hm-hero-grid { gap: 40px; }
  .hm-hero-title { font-size: clamp(42px, 13vw, 64px); }
  .hm-hero { min-height: 0; padding-bottom: 96px; }
  .hm-line { white-space: normal; }
  .hm-stage { height: 380px; margin-top: 28px; }
  .hm-notes { left: 4%; bottom: 4%; width: min(300px, 78%); }
  .hm-illustrative { right: 12px; }
  .hm-hero .cs-pill { margin-bottom: 26px; }
  .hm-hero .cs-lead { margin-top: 26px; }
  .hm-hero .cs-actions { margin-top: 32px; }
  .hm-hero-copy, .hm-stage { min-width: 0; }
  .hm-hangtag { width: 92px; top: -6px; right: 2%; }
  .hm-hangtag-price { font-size: 30px; }
  .hm-pin-label { font-size: 17px; }
  .hm-home-label { font-size: 18px; }
  .hm-row { grid-template-columns: 48px 1fr; gap: 2px 16px; padding: 20px 4px; }
  .hm-row-arrow { display: none; }
  .hm-row-icon { width: 22px; height: 22px; padding: 12px; }
  .hm-row-text { font-size: 16px; }
  .hm-sched-grid { gap: 4px; grid-template-columns: 40px repeat(7, 1fr); }
  .hm-grid-cell { height: 30px; }
  .hm-fit-art--square { width: 84px; height: 84px; }
  .hm-fit-art--tall { width: 60px; height: 110px; }
  .hm-fit-art--wide { width: 120px; height: 62px; }
  .hm-fit-row { gap: 10px; }
  .hm-clips { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; }
  .hm-clip { flex: 0 0 78vw; }
  .hm-note--old { display: none; }
  .hm-illustrative--view { position: absolute; right: 12px; bottom: 8px; margin: 0; }
  .hm-note--mid, .hm-note--new { transform: none; opacity: 1; }
  .hm-logos { padding: 32px 0 38px; }
  .hm-track { gap: 48px; padding-right: 48px; }
  .hm-logo-img { height: 36px; }
  .hm-pin-label { font-size: 17px; }
  .hm-home-label { font-size: 18px; }
  .hm-stepper { margin-top: 44px; }
  /* Step scenes on small screens: taller frames, stacked layouts */
  .sc-pick { aspect-ratio: 4 / 5; }
  .sc-search { left: 5%; top: 4%; }
  .sc-pin--a { left: 22%; top: 30%; } .sc-pin--b { left: 52%; top: 20%; } .sc-pin--c { left: 72%; top: 34%; }
  .sc-pin--d { left: 38%; top: 40%; } .sc-pin--e { left: 12%; top: 44%; }
  .sc-cursor { animation-name: sc-cursor-m; }
  @keyframes sc-cursor-m { 0% { left: 12%; top: 12%; } 28% { left: 22.5%; top: 31%; } 36% { left: 22.5%; top: 31%; } 56% { left: 52.5%; top: 21%; } 64% { left: 52.5%; top: 21%; } 84% { left: 72.5%; top: 35%; } 100% { left: 72.5%; top: 35%; } }
  .sc-cards { left: 4%; right: 4%; top: 49%; width: auto; gap: .5em; }
  .sc-card { padding: .35em; }
  .sc-card-img { width: 3.4em; height: 2.5em; }
  .sc-bar { bottom: 3%; padding: .55em .8em; }
  .sc-sched { aspect-ratio: auto; }
  .sc-up { aspect-ratio: 4 / 4.2; }
  .sc-format-art--square { width: 6em; height: 6em; } .sc-format-art--tall { width: 4.4em; height: 8em; } .sc-format-art--wide { width: 8.6em; height: 4.6em; }
  .sc-formats { gap: 1em; }
  .sc-live { grid-template-columns: 1fr; aspect-ratio: auto; gap: 1.2em; }
  .sc-toast { position: static; margin-top: .2em; }
  .hm-tab { padding: 14px 16px; gap: 14px; }
  .hm-tab.is-active { padding: 18px 16px; }
  .hm-tab-num { width: 38px; height: 38px; font-size: 17px; }
  .hm-window-body { min-height: 330px; padding: 20px; }
  .hm-minimap { min-height: 140px; }
  .hm-board-img { width: 64px; height: 48px; }
  .hm-illustrative--view { position: absolute; right: 12px; bottom: 8px; margin: 0; }
  .hm-check { font-size: 17px; padding: 14px 16px; }
  .hm-how { flex-direction: column; gap: 14px; margin-top: 28px; }
  .hm-calc { margin-top: 28px; padding: 24px; }
  .hm-receipt { padding: 22px 22px 18px; transform: rotate(-2deg); }
  .hm-clips { padding-top: 40px; }
  .hm-close-panel { padding: 56px 20px; border-radius: 28px; }
}

/* ---------- Small mobile (Webflow 479) ---------- */
@media (max-width: 479px) {
  .hm-help { flex-direction: column; align-items: center; }
  .hm-legend-item { padding: 8px 14px; }
  .hm-legend-price { font-size: 22px; }
}


/* =====================================================================
   Layout pass: chromeless stepper stage, list-style tabs, floating scenes,
   two-column price top, and the tune / readout calculator.
   (Later rules override the earlier scene and tab rules above.)
   ===================================================================== */

/* ---------- Stepper: list on the left, open stage on the right ---------- */
.hm-stepper { grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 96px); }
.hm-tabs { gap: 0; }
.hm-tab { padding: 26px 6px; gap: 22px; border: 0; border-top: 1px solid var(--cs-border); border-radius: 0; background: transparent; box-shadow: none; }
.hm-tab-item:last-child .hm-tab { border-bottom: 1px solid var(--cs-border); }
.hm-tab:hover { background: transparent; border-color: var(--cs-border-strong); }
.hm-tab.is-active { align-items: flex-start; padding: 28px 6px 30px; background: transparent; border: 0; border-top: 1px solid transparent; box-shadow: none; }
.hm-tab-title { font-size: clamp(22px, 2vw, 28px); color: var(--cs-text-faint); transition: color .2s; }
.hm-tab:hover .hm-tab-title { color: var(--cs-text-soft); }
.hm-tab.is-active .hm-tab-title { color: var(--cs-text); font-size: clamp(26px, 2.4vw, 34px); }
.hm-tab-progress { top: -1px; bottom: auto; height: 3px; }
.hm-tab.is-active .hm-tab-progress { background: rgba(255, 255, 255, 0.08); }

.hm-window { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.hm-window-body { min-height: 540px; padding: 0; background: radial-gradient(52% 58% at 50% 50%, rgba(59, 214, 43, 0.20), rgba(59, 214, 43, 0) 72%); }
.hm-illustrative--view { right: 4px; bottom: 4px; }
.sc { width: min(700px, 100%); font-size: clamp(10px, 2.2cqw, 16px); }

/* Glass surface used by the small floating UI pieces */
.sc-search, .sc-card, .sc-check, .sc-toast, .sc-file, .sc-pace { background: rgba(9, 30, 38, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(161, 189, 194, .22); box-shadow: 0 22px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .2); }

/* 1. Pick: one map card, with the search, cards and bar floating over its edges */
.sc-pick { border: 0; border-radius: 0; overflow: visible; background: none; aspect-ratio: 16 / 10.4; }
.sc-mapcard { position: absolute; left: 0; top: 8%; width: 80%; height: 84%; border-radius: 22px; overflow: hidden; background: #0a2229; box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(161, 189, 194, .16); }
.sc-search { left: 5%; top: 1%; }
.sc-pin--a { left: 22%; top: 50%; } .sc-pin--b { left: 46%; top: 70%; } .sc-pin--c { left: 36%; top: 32%; }
.sc-pin--d { left: 62%; top: 44%; } .sc-pin--e { left: 12%; top: 76%; }
.sc-cursor { animation: sc-cursor2 3.9s ease-in-out .3s both; }
@keyframes sc-cursor2 { 0% { left: 14%; top: 16%; } 28% { left: 22.5%; top: 51%; } 36% { left: 22.5%; top: 51%; } 56% { left: 46.5%; top: 71%; } 64% { left: 46.5%; top: 71%; } 84% { left: 36.5%; top: 33%; } 100% { left: 36.5%; top: 33%; } }
.sc-cards { right: 0; top: 14%; width: 47%; }
.sc-card--2 { margin-left: 6%; } .sc-card--3 { margin-left: 12%; }
.sc-bar { left: 8%; right: auto; width: 54%; bottom: 0; }

/* 2. Set: no container, just the grid and a floating pace pill */
.sc-sched { padding: 0 2%; }
.sc-pace { position: relative; align-self: flex-end; width: 78%; margin-top: -.4em; border-radius: 1em; }

/* 3. Upload: floating formats, glass file pill */
.sc-file { border-radius: 999px; padding: .7em 1.2em; }

/* 4. Live: a big board with the checks laid over its left edge */
.sc-live { display: block; aspect-ratio: 16 / 10.2; }
.bb--live { position: absolute; right: 0; top: 4%; width: 70%; max-width: none; }
.sc-checks { position: absolute; left: 0; top: 24%; width: 50%; z-index: 2; display: grid; gap: .9em; }
.sc-check--2 { margin-left: 7%; } .sc-check--3 { margin-left: 14%; }
.sc-toast { right: 3%; bottom: 3%; }

/* ---------- Price: two-column top, then the tune / readout panel ---------- */
.hm-price-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 112px); align-items: center; }
.hm-price-copy .cs-lead { max-width: 560px; }
.hm-play-block { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--cs-border-strong); }
.hm-play-block .hm-legend { margin-top: 26px; }
.hm-price-visual { position: relative; padding-top: 30px; }
.hm-price-visual .bb { max-width: 580px; }
.hm-calc { margin-top: 80px; padding: clamp(28px, 4vw, 60px); }
.hm-calc-title { margin-bottom: 40px; }
.hm-calc-grid { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.hm-calc-input { display: flex; flex-direction: column; justify-content: flex-start; }
.hm-panel-tag { display: inline-flex; align-self: flex-start; margin-bottom: 18px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--cs-border-strong); font-family: var(--cs-font-mono); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-text-soft); }
.hm-panel-tag--on { border-color: rgba(37, 242, 26, .5); color: var(--cs-green-bright); }
.hm-calc-range { height: 14px; }
.hm-ticks { height: 14px; margin-top: 10px; background: repeating-linear-gradient(90deg, rgba(161, 189, 194, .5) 0 1px, transparent 1px 10%); background-size: calc(100% - 1px) 6px; background-repeat: repeat-x; background-position: left top; }
.hm-scale { display: flex; justify-content: space-between; font-family: var(--cs-font-mono); font-size: 12px; letter-spacing: .06em; color: var(--cs-text-faint); }
.hm-quick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hm-quick-btn { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--cs-border-strong); background: transparent; color: var(--cs-text-soft); font-family: var(--cs-font); font-weight: 700; font-size: 15px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.hm-quick-btn:hover { border-color: var(--cs-green); color: var(--cs-text); }
.hm-quick-btn.is-on { background: var(--cs-green); border-color: var(--cs-green); color: var(--cs-dark1); }

/* The readout: a dark display with rolling digits */
.hm-readout { position: relative; overflow: hidden; padding: 28px 34px 30px; border-radius: 18px; background: linear-gradient(180deg, #031017, #05202a); border: 1px solid rgba(37, 242, 26, .28); box-shadow: inset 0 0 50px rgba(37, 242, 26, .08), 0 0 50px rgba(37, 242, 26, .1); }
.hm-readout::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); }
.hm-readout .hm-calc-label { color: var(--cs-text-faint); }
.hm-odo { display: flex; align-items: center; margin-top: 10px; font-family: var(--cs-font-mono); font-weight: 700; font-size: clamp(56px, 6.4vw, 108px); line-height: 1; letter-spacing: -0.02em; color: var(--cs-green-bright); text-shadow: 0 0 26px rgba(37, 242, 26, .65), 0 0 60px rgba(37, 242, 26, .3); font-variant-numeric: tabular-nums; }
.od-col { display: inline-block; position: relative; width: .62em; height: 1em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
.od-strip { display: block; transition: transform .7s cubic-bezier(.2, .9, .2, 1); }
.od-digit { display: block; height: 1em; line-height: 1; text-align: center; }
.od-sep { display: inline-flex; align-items: flex-end; justify-content: center; width: .3em; height: 1em; padding-bottom: .1em; font-family: var(--cs-font); font-weight: 800; font-size: .8em; line-height: 1; letter-spacing: 0; }
.hm-odo-unit { margin-top: 6px; font-family: var(--cs-font-mono); font-weight: 500; font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: var(--cs-text-soft); }
.hm-readout-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 26px; padding-top: 20px; border-top: 1px dashed rgba(161, 189, 194, .28); font-family: var(--cs-font-mono); font-size: 18px; color: var(--cs-text); }
.hm-readout-row b { font-weight: 700; color: var(--cs-green-bright); }
.hm-readout-key { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-text-faint); }
.hm-readout-note { margin-left: auto; font-family: var(--cs-font); font-size: 15px; color: var(--cs-text-faint); }

@media (prefers-reduced-motion: reduce) { .od-strip { transition: none; } }

@media (max-width: 991px) {
  .hm-stepper { grid-template-columns: 1fr; gap: 24px; }
  .hm-price-top { grid-template-columns: 1fr; gap: 40px; }
  .hm-calc-grid { grid-template-columns: 1fr; }
  .hm-window-body { min-height: 440px; }
}

@media (max-width: 767px) {
  .hm-tab { padding: 18px 4px; }
  .hm-tab.is-active { padding: 20px 4px 22px; }
  .hm-window-body { min-height: 0; padding: 8px 0 0; }
  .sc { width: 100%; font-size: clamp(10px, 3cqw, 14px); }
  .sc-pick { aspect-ratio: 4 / 5.4; }
  .sc-mapcard { left: 0; top: 0; width: 100%; height: 56%; }
  .sc-search { left: 4%; top: 4%; }
  .sc-pin--a { left: 20%; top: 40%; } .sc-pin--b { left: 50%; top: 24%; } .sc-pin--c { left: 76%; top: 46%; }
  .sc-pin--d { left: 36%; top: 62%; } .sc-pin--e { left: 10%; top: 70%; }
  .sc-cursor { animation: sc-cursor2-m 3.9s ease-in-out .3s both; }
  @keyframes sc-cursor2-m { 0% { left: 10%; top: 18%; } 28% { left: 20.5%; top: 41%; } 36% { left: 20.5%; top: 41%; } 56% { left: 50.5%; top: 25%; } 64% { left: 50.5%; top: 25%; } 84% { left: 76.5%; top: 47%; } 100% { left: 76.5%; top: 47%; } }
  .sc-cards { left: 3%; right: 3%; top: 50%; width: auto; }
  .sc-card--2, .sc-card--3 { margin-left: 0; }
  .sc-bar { left: 5%; right: 5%; width: auto; bottom: 0; }
  .sc-live { aspect-ratio: auto; display: grid; gap: 1.2em; }
  .bb--live { position: static; width: 100%; }
  .sc-checks { position: static; width: auto; }
  .sc-check--2, .sc-check--3 { margin-left: 0; }
  .sc-toast { position: static; }
  .sc-pace { width: 100%; }
  .hm-readout { padding: 22px 20px 24px; }
  .hm-readout-note { margin-left: 0; width: 100%; }
}

/* ============ Digital board, more believable (shared by Home, Retail and the other pages) ============ */
.bb { filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .35)); }
.bb-bezel { position: relative; padding: 2.6cqw; border-radius: 3.4cqw; background: linear-gradient(180deg, #34444b 0%, #1b2a30 7%, #0d171b 100%); border: 0; box-shadow: inset 0 0 0 .5cqw #0a1114, inset 0 .5cqw 0 .5cqw rgba(255, 255, 255, .10), 0 0 14cqw rgba(59, 214, 43, .18); }
.bb-screen { border-radius: 1.2cqw; background: #05090b; box-shadow: 0 0 0 .35cqw #000; }
/* glass: faint pixel grid, a diagonal reflection and a vignette sit over the creative */
.bb-screen::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background:
  linear-gradient(115deg, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, .13) 18%, rgba(255, 255, 255, 0) 18.2%),
  radial-gradient(120% 120% at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .35) 100%),
  repeating-linear-gradient(0deg, rgba(0, 0, 0, .045) 0 1px, rgba(0, 0, 0, 0) 1px 3px); }
.bb-pole { position: relative; width: 11%; height: 12cqw; border-radius: 0; background: linear-gradient(90deg, #0d171b, #34444b 45%, #0d171b); }
.bb-pole::after { content: ''; position: absolute; left: 50%; bottom: -1.4cqw; width: 150%; height: 2.4cqw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }

/* creatives: a layout and a theme per advertiser */
.bb-ad.bb-ad--rich { flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 6cqw 7cqw 5.4cqw; overflow: hidden; text-align: left; font-size: inherit; letter-spacing: normal; box-shadow: none; }
.bb-tag { position: relative; z-index: 1; font-family: var(--cs-font-label); font-weight: 800; font-size: 2.6cqw; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.bb-head { position: relative; z-index: 1; display: block; font-weight: 800; font-size: 8.4cqw; line-height: .98; letter-spacing: -0.04em; max-width: 78%; }
.bb-sub { position: relative; z-index: 1; display: block; margin-top: 1.4cqw; font-weight: 400; font-size: 3.4cqw; opacity: .9; }
.bb-cta { position: relative; z-index: 1; display: inline-flex; align-items: center; padding: 1.5cqw 3.8cqw; border-radius: 999px; font-weight: 800; font-size: 3cqw; letter-spacing: .04em; text-transform: uppercase; }
.bb-deco { position: absolute; z-index: 0; right: -7cqw; bottom: -9cqw; width: 34cqw; height: 34cqw; border-radius: 50%; }
.bb-deco::after { content: ''; position: absolute; inset: 6cqw; border-radius: 50%; border: .9cqw solid currentColor; opacity: .55; }

.bb-ad.bb-theme-red { background: linear-gradient(150deg, #ff4a3d, #d9231a); color: #fff; }
.bb-theme-red .bb-cta { background: #111; color: #fff; }
.bb-theme-red .bb-deco { background: rgba(255, 255, 255, .14); color: #fff; }
.bb-ad.bb-theme-ink { background: linear-gradient(150deg, #181c1f, #070909); color: #fff; }
.bb-theme-ink .bb-head b, .bb-theme-ink .bb-hl { color: #c8ff3d; }
.bb-theme-ink .bb-cta { background: #c8ff3d; color: #111; }
.bb-theme-ink .bb-deco { background: rgba(200, 255, 61, .12); color: #c8ff3d; }
.bb-ad.bb-theme-cream, .hm-play-ad--other { background: linear-gradient(150deg, #f6efdf, #e8dfc9); color: #1c1a16; }
.bb-theme-cream .bb-cta { background: #1c1a16; color: #f6efdf; }
.bb-theme-cream .bb-deco { background: rgba(214, 88, 54, .22); color: #d65836; }
.bb-ad.bb-theme-mint, .hm-play-ad--yours { background: linear-gradient(150deg, #5cf04b, #1f9a2e); color: var(--cs-dark1); }
.bb-theme-mint .bb-cta { background: var(--cs-dark1); color: var(--cs-pale); }
.bb-theme-mint .bb-deco { background: rgba(255, 255, 255, .22); color: #fff; }
.bb-body { position: relative; z-index: 1; display: block; }


.hm-you--left { flex-direction: row-reverse; }

/* ============ Board mock v3: a flat card in the app's own style (no bezel, no glass, no pole) ============
   The old mock was a 3D billboard with a bevelled frame and a reflection. It did not match the app, which is flat dark panels with hairline
   borders and a green glow. The creative inside is unchanged. A short foot under the card keeps the idea of a standing display. */
.bb { filter: none; }
.bb-bezel { padding: 2cqw; border-radius: 4.4cqw; background: var(--cs-grad-panel); border: 1.5px solid var(--cs-dark4); box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 12cqw rgba(37, 242, 26, .10); }
.bb-screen { border-radius: 2.8cqw; background: var(--cs-dark1); box-shadow: none; }
.bb-screen::after { display: none; }
.bb-pole { width: 26%; height: 1.8cqw; margin: 0 auto; border-radius: 0 0 1.2cqw 1.2cqw; background: var(--cs-dark4); }
.bb-pole::after { display: none; }

/* ============ Price slider v3: a fuller track and thumb, and a segmented set of budgets ============ */
.hm-calc-range { height: 18px; background: linear-gradient(90deg, #5cf04b, var(--cs-green-bright) var(--fill, 4%), #0c2830 var(--fill, 4%)); box-shadow: inset 0 0 0 1.5px var(--cs-dark4), 0 0 28px rgba(37, 242, 26, .10); }
.hm-calc-range::-webkit-slider-thumb { width: 44px; height: 44px; margin-top: 0; border: 5px solid var(--cs-green-bright); background: radial-gradient(circle, #06361b 0 6px, var(--cs-pale) 7px); box-shadow: 0 0 0 7px rgba(37, 242, 26, .14), 0 10px 26px rgba(0, 0, 0, .5), 0 0 34px rgba(37, 242, 26, .55); transition: box-shadow .15s; }
.hm-calc-range::-moz-range-thumb { width: 34px; height: 34px; border: 5px solid var(--cs-green-bright); background: radial-gradient(circle, #06361b 0 6px, var(--cs-pale) 7px); box-shadow: 0 0 0 7px rgba(37, 242, 26, .14), 0 10px 26px rgba(0, 0, 0, .5), 0 0 34px rgba(37, 242, 26, .55); }
.hm-calc-range:hover::-webkit-slider-thumb, .hm-calc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 11px rgba(37, 242, 26, .18), 0 10px 26px rgba(0, 0, 0, .5), 0 0 42px rgba(37, 242, 26, .7); }
.hm-ticks { height: 12px; margin-top: 14px; background: repeating-linear-gradient(90deg, rgba(161, 189, 194, .45) 0 2px, transparent 2px 10%); background-size: calc(100% - 2px) 8px; border-radius: 1px; }
.hm-scale { margin-top: 2px; }
.hm-quick { display: inline-flex; flex-wrap: wrap; gap: 0; margin-top: 30px; padding: 4px; border-radius: 999px; border: 1.5px solid var(--cs-dark4); background: rgba(255, 255, 255, .02); }
.hm-quick-btn { padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--cs-text-soft); }
.hm-quick-btn:hover { color: var(--cs-text); background: rgba(255, 255, 255, .05); }
.hm-quick-btn.is-on { background: var(--cs-green-bright); color: var(--cs-dark1); box-shadow: 0 0 18px rgba(37, 242, 26, .4); }
.hm-readout { border-radius: 22px; }

/* ---------- Board picker (inside the price slider) ---------- */
@media (max-width: 599px) { .hm-quick { display: flex; border-radius: 24px; gap: 2px; } .hm-quick-btn { flex: 1 1 30%; text-align: center; padding: 10px 8px; } }

/* ---------- Typewriter line ("Your ads in ___"): the old words only reserve the width; the typed text sits on top ---------- */
.hm-close-cycle.is-typer .hm-close-word { animation: none; opacity: 0; visibility: hidden; }
.hm-typed { grid-area: 1 / 1; justify-self: start; white-space: nowrap; }
.hm-caret--typer { animation: none; margin-left: 1px; }
.hm-caret--typer.is-idle { animation: hm-blink 1s steps(1) infinite; }

/* Spring motion: each typed letter pops in with a small overshoot, the cursor nudges on every key, and a deleted letter drops away. */
.hm-ch { display: inline-block; animation: hm-ch-in .42s var(--hm-spring, cubic-bezier(.34, 1.56, .64, 1)) both; transform-origin: 50% 85%; }
.hm-caret--typer { display: inline-block; transition: transform .3s var(--hm-spring, cubic-bezier(.34, 1.56, .64, 1)); }
.hm-caret--typer.is-nudge { transform: translateX(2px) scaleY(.88); transition-duration: .06s; }
@keyframes hm-ch-in { from { opacity: 0; transform: translateY(.28em) scale(.6); } to { opacity: 1; transform: none; } }
@supports (animation-timing-function: linear(0, 1)) {
  :root { --hm-spring: linear(0, .22 8%, .62 17%, .93 27%, 1.06 36%, 1.07 44%, 1.03 56%, .99 70%, 1 85%, 1); }
}
@media (prefers-reduced-motion: reduce) { .hm-ch { animation: none; } .hm-caret--typer { transition: none; } }

/* A play is one showing: keep each turn and its charge visible at the same time. */
.hm-play-sequence { min-width: 0; margin: 0; }
.hm-play-sequence > .hm-panel-tag { margin-bottom: 0; }
.hm-play-turns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; list-style: none; padding: 0; }
.hm-play-turn { min-width: 0; }
.hm-play-ad { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 12px; border: 5px solid var(--cs-dark4); border-radius: 14px; font-weight: 800; font-size: clamp(20px, 2.5vw, 36px); line-height: 1; letter-spacing: -.04em; text-align: center; }
.hm-play-turn-label { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--cs-text-soft); }
.hm-play-count { margin-top: 6px; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--cs-green-bright); }
.hm-play-count--other { font-size: 15px; font-weight: 400; color: var(--cs-text-faint); }
.hm-play-receipt.hm-receipt { max-width: none; margin-top: 26px; padding: 18px 22px; transform: rotate(-1deg); background: #f1f7ec; box-shadow: 0 12px 24px #0003; }
.hm-play-receipt .hm-receipt-line { padding: 12px 0 0; gap: 16px; border-top: 1px dashed #06222c44; margin-top: 10px; }
.hm-play-receipt .hm-receipt-val { white-space: nowrap; }
.hm-play-caption { margin-top: 18px; font-size: 13px; line-height: 1.4; color: var(--cs-text-faint); }
.hm-price-context { margin-top: 24px; }
.hm-price-context .hm-legend { margin-top: 12px; }

/* A paper planning docket makes total airtime and its illustrative distribution visible. */
.hm-estimate-context.hm-receipt { max-width: none; margin-top: 20px; padding: 20px; transform: none; background: #f1f7ec; color: #06222c; box-shadow: none; }
.hm-airtime { color: #06222c; display: flex; align-items: center; gap: 12px; font-family: var(--cs-font); }
.hm-airtime > b { font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -.04em; }
.hm-airtime > span { font-size: 16px; line-height: 1.25; }
.hm-airtime small, .hm-schedule-rate small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: #526862; }
.hm-schedule-label { padding-top: 14px; margin-top: 16px; border-top: 1px dashed #06222c44; font: 700 11px/1.4 var(--cs-font-mono); text-transform: uppercase; letter-spacing: .06em; color: #526862; }
.hm-spread-diagram { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.hm-spread-part { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.hm-spread-part + .hm-spread-part { border-left: 1px dotted #06222c33; }
.hm-spread-caption { font: 700 13px/1.3 var(--cs-font); }
.hm-spread-boards { display: grid; grid-template-columns: repeat(4, 10px); align-content: center; gap: 5px; height: 32px; }
.hm-spread-boards i { display: block; position: relative; width: 10px; height: 7px; border: 1.5px solid #247b3d; background: #bce9ba; }
.hm-spread-boards i::after { content: ''; position: absolute; left: 3px; bottom: -4px; width: 2px; height: 3px; background: #247b3d; }
.hm-spread-days { display: grid; grid-template-columns: repeat(7, 5px); gap: 3px; align-content: center; padding: 3px 0; height: 32px; }
.hm-spread-days i { width: 5px; height: 4px; border-radius: 1px; background: #247b3d; }
.hm-spread-clock { width: 32px; height: 32px; fill: none; stroke: #247b3d; stroke-width: 2; stroke-linecap: round; }
.hm-schedule-rate { color: #06222c; display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed #06222c44; font-family: var(--cs-font); }
.hm-schedule-rate > b { font-weight: 800; font-size: 48px; letter-spacing: -.04em; line-height: 1; }
.hm-schedule-rate > span { font-size: 14px; font-weight: 700; }
.hm-estimate-assumption { margin-top: 14px; font: 400 11px/1.4 var(--cs-font); color: #526862; }

.hm-estimate-details { margin-top: 18px; }
.hm-estimate-details .cs-footnote { margin-top: 12px; }

.hm-estimate-details .hm-price-context { margin-top: 0; }

/* Desktop planning strip: one heading, aligned metrics/diagram, one quiet assumption line. */
@media (min-width: 768px) {
  .hm-estimate-context.hm-receipt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1.2fr); gap: 14px 24px; align-items: center; margin-top: 24px; padding: 20px 24px 14px; }
  .hm-schedule-label { grid-column: 1 / -1; grid-row: 1; padding: 0; margin: 0; border: 0; font-size: 11px; }
  .hm-airtime { grid-column: 1; grid-row: 2; }
  .hm-airtime, .hm-schedule-rate { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .hm-airtime > b, .hm-schedule-rate > b { flex: none; font-size: 36px; font-variant-numeric: tabular-nums; }
  .hm-airtime > span, .hm-schedule-rate > span { font-size: 13px; font-weight: 700; line-height: 1.3; }
  .hm-airtime small, .hm-schedule-rate small { margin-top: 4px; font-size: 11px; line-height: 1.3; }
  .hm-spread-diagram { grid-column: 2; grid-row: 2; margin: 0; padding: 0 18px; border-inline: 1px dashed #06222c33; }
  .hm-spread-part { gap: 8px; }
  .hm-spread-boards, .hm-spread-days, .hm-spread-clock { height: 28px; }
  .hm-spread-clock { width: 28px; }
  .hm-spread-caption { font-size: 12px; line-height: 1.3; }
  .hm-schedule-rate { grid-column: 3; grid-row: 2; }
  .hm-estimate-assumption { grid-column: 1 / -1; grid-row: 3; margin: 0; padding-top: 10px; border-top: 1px dashed #06222c33; font-size: 10px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .hm-estimate-context.hm-receipt { column-gap: 16px; }
  .hm-estimate-context .hm-airtime, .hm-estimate-context .hm-schedule-rate { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
  .hm-spread-diagram { padding-inline: 10px; }
}

/* Board discovery is a photographic gallery, independent of the budget calculator. */
.hm-formats-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.hm-formats-head .cs-link { flex: none; }
.hm-formats-rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 12px; scrollbar-width: thin; }
.hm-format { display: flex; flex-direction: column; flex: 0 0 calc((100% - 52px) / 3); min-width: 0; scroll-snap-align: start; }
.hm-format-photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: var(--cs-dark3); }
.hm-format-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-format-caption { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 0 8px; }
.hm-format-name { font-size: 24px; line-height: 1.15; letter-spacing: -.03em; }
.hm-format-description { margin-top: 8px; font-size: 16px; line-height: 1.4; max-width: 65ch; }
.hm-format-caption .cs-link { flex: none; margin-top: auto; font-size: 16px; }

.hm-formats { --cs-size-title-xl: clamp(40px, 4vw, 60px); }
.hm-formats-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hm-formats-controls { display: flex; align-items: center; gap: 8px; }
.hm-formats-controls[hidden] { display: none; }
.hm-formats-count { margin-right: 10px; font: 500 12px/1 var(--cs-font-mono); color: var(--cs-text-faint); }
.hm-format-nav-button { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
.hm-format-nav-button:disabled { opacity: .35; cursor: default; }
@media (min-width: 768px) {
  .hm-formats-rail { scrollbar-width: none; }
  .hm-formats-rail::-webkit-scrollbar { display: none; }
  .hm-format-caption { gap: 12px; }
  .hm-format-description { font-size: 15px; line-height: 1.5; }
  .hm-format-caption .cs-link { font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hm-formats-head { align-items: flex-start; }
  .hm-formats-actions { align-self: flex-end; }
  .hm-format { flex-basis: calc((100% - 28px) / 2); }
}

/* Static photo tags reuse the punched, hanging shape from Home and the LinkedIn designs. */
.hm-format-photo { position: relative; }
.hm-hangtag--format { top: 18px; right: 18px; width: 96px; transform: rotate(6deg); animation: none; text-align: center; pointer-events: none; filter: drop-shadow(0 5px 8px #0003); }
.hm-format:nth-child(even) .hm-hangtag--format { transform: rotate(-4deg); }
.hm-hangtag--format::before { top: -28px; height: 42px; width: 1px; background: #06222c88; }
.hm-hangtag--format .hm-hangtag-body { display: block; padding: 30px 8px 10px; border-radius: 0 0 8px 8px; background: var(--cs-green-bright); }
.hm-hangtag--format .hm-hangtag-body::before { top: 10px; width: 8px; height: 8px; margin-left: -4px; }
.hm-hangtag--format .hm-hangtag-price { display: block; font-size: 28px; white-space: nowrap; }
.hm-hangtag--format .hm-hangtag-unit { display: block; margin-top: 4px; font-size: 10px; }
.hm-hangtag-basis { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px dashed #06222c55; font: 700 9px/1.2 var(--cs-font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--cs-dark1); }
.hm-formats-price-note { margin-top: 16px; font-size: 12px; color: var(--cs-text-faint); }