/*
 * Home v4 (docs/landing-redesign-spec.md §3.3, slice R6): the Meet Woof hero (§3.2) and, under it,
 * seven short sections, each a kicker, one H2 and one big visual. Desktop follows the Home v4 mockup,
 * phones stack to one column. Tokens, the shared components (.pill .frame .phone .card .kick .chk
 * .dot) and the page base (.lv3, .lv3-wrap, .btn) come from css/landing-v3.css. Every animation
 * shows its final frame under prefers-reduced-motion (spec §1.6).
 */

.hv3-sec { padding: 72px 0; }
.hv3-white { background: #fff; }
.hv3-ink { background: var(--woof-ink); color: #fff; }
.hv3-sky { background: var(--woof-sky); }
.hv3-h2 { font-size: 48px; line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; color: var(--woof-text); }
.hv3-ink .hv3-h2 { color: #fff; }
.hv3-lead { font-size: 17px; line-height: 1.6; color: #4b5563; }
.hv3-ink .hv3-lead { color: #c7cbd4; }
.hv3-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 24px; }
.hv3-head > div { display: flex; flex-direction: column; gap: 10px; }
.hv3-head .hv3-lead { max-width: 420px; }
.kick-amber { color: #B45309; }
.kick-lav { color: #6D5BD0; }
.hv3-ink .kick { color: var(--woof-blue); }


/* ── 1. Hero: Meet Woof (spec §3.2, slice R1b) ───────────────────────────── */
.mw-hero { padding: 124px 0 0; overflow: hidden; background: radial-gradient(1200px 460px at 50% 0%, #eef7ff 0%, #fff 72%); border-bottom: 1px solid var(--woof-line); }
.mw-hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.mw-hero p { margin: 0; }
.mw-eyebrow { font-size: 14px; font-weight: 600; color: var(--woof-text-2); }
.mw-eyebrow b { color: var(--woof-text); font-weight: 800; }
.mw-hero h1 { margin: 0; font-size: 96px; line-height: 1; font-weight: 800; letter-spacing: -0.045em; color: var(--woof-text); display: inline-flex; align-items: center; gap: .18em; }
.mw-mark { height: .98em; width: auto; display: block; transform: rotate(-6deg); }
.mw-lead { max-width: 640px; font-size: 19px; line-height: 1.55; color: var(--woof-text-3); text-wrap: balance; }
.mw-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mw-ctas .btn { border-radius: 999px; padding: 0 26px; }
.mw-fine { margin-top: -6px !important; font-size: 13px; color: var(--woof-text-3); }

/* The stage: the Schedule window with the client's phone (left) and the checklist (right) in front.
   Everything is HTML built from real data shapes; landing-home.js moves it. */
.mw-stage { position: relative; box-sizing: border-box; width: 100%; max-width: 1280px; margin: 30px auto 0; padding: 0 150px 0 110px; }
.mw-stage *, .mw-stage *::before, .mw-stage *::after { box-sizing: border-box; }
.mw-stage svg { stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mw-app { display: grid; grid-template-columns: 54px 1fr; border: 1px solid #dfe3ea; border-bottom: 0; border-radius: 18px 18px 0 0; background: #fff; overflow: hidden; text-align: left; box-shadow: 0 -20px 80px -40px rgba(24, 160, 251, .45), 0 30px 60px -30px rgba(17, 24, 39, .25); }
.mw-rail { border-right: 1px solid #eef1f5; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 14px 0; }
.mw-rail img { width: 30px; height: 30px; border-radius: 8px; }
.mw-plus { width: 34px; height: 34px; border-radius: 50%; background: var(--woof-blue); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 16px -8px rgba(24, 160, 251, .8); }
.mw-plus svg { width: 18px; height: 18px; stroke-width: 2.4; }
.mw-rail i { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #6b7280; position: relative; margin: -4px 0; }
.mw-rail i svg { width: 19px; height: 19px; }
.mw-rail i.is-on { background: var(--woof-sky); color: var(--woof-blue-deep); }
.mw-rail i.mw-gap { margin-top: 10px; }
.mw-rail i.has-dot::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--dot-amber); }
.mw-main { min-width: 0; display: flex; flex-direction: column; }
.mw-topbar { display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 18px; border-bottom: 1px solid #eef1f5; }
.mw-topbar > b { font-size: 17px; font-weight: 800; }
.mw-search { margin-left: auto; width: 290px; height: 32px; border-radius: 999px; border: 1px solid #e3e7ec; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12px; color: #9ca3af; white-space: nowrap; }
.mw-search svg { width: 14px; height: 14px; stroke-width: 2; flex: 0 0 auto; }
.mw-search kbd { margin-left: auto; font: 600 10px var(--woof-font); color: #9ca3af; border: 1px solid #e3e7ec; border-radius: 5px; padding: 1px 5px; }
.mw-bell { width: 30px; height: 30px; border-radius: 50%; background: #f3f5f8; position: relative; display: flex; align-items: center; justify-content: center; color: var(--woof-text-2); flex: 0 0 auto; }
.mw-bell svg { width: 16px; height: 16px; stroke-width: 1.9; }
.mw-bell b { position: absolute; top: -3px; right: -4px; background: var(--dot-coral); color: #fff; font-size: 9.5px; border-radius: 999px; padding: 1px 5px; }
.mw-toolbar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-bottom: 1px solid #eef1f5; font-size: 12.5px; overflow: hidden; }
.mw-nb { background: var(--woof-blue); color: #fff; font-weight: 700; border-radius: 9px; padding: 7px 12px; white-space: nowrap; }
.mw-navd { display: flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.mw-navd > span { border: 1px solid #e3e7ec; border-radius: 8px; padding: 5px 9px; font-weight: 600; color: var(--woof-text-2); }
.mw-seg { display: flex; background: #f1f3f6; border-radius: 9px; padding: 3px; font-weight: 700; font-size: 11.5px; color: var(--woof-text-3); flex: 0 0 auto; }
.mw-seg > span { padding: 4px 11px; border-radius: 7px; }
.mw-seg > .is-on { background: #fff; color: var(--woof-text); box-shadow: 0 1px 2px rgba(17, 24, 39, .1); }
.mw-push { margin-left: auto; }
.mw-stats { display: grid; grid-template-columns: 70px repeat(6, auto) 1fr; border-bottom: 1px solid #eef1f5; background: var(--woof-cream); }
.mw-stats > div { padding: 8px 16px; border-right: 1px solid #eef1f5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.mw-stats > div:last-child { border-right: 0; }
.mw-stats-l { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #9ca3af; }
.mw-stats b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mw-stats small { font-size: 10.5px; color: var(--woof-text-3); white-space: nowrap; }
.mw-stats .is-money b { color: #059669; }
.mw-stats b.mw-bump { animation: mwBump .9s ease; }
@keyframes mwBump { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: var(--woof-blue); } 100% { transform: scale(1); } }
.mw-staff { display: grid; grid-template-columns: 56px repeat(5, 1fr); border-bottom: 1px solid #eef1f5; }
.mw-staff > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; border-top: 3px solid var(--c, transparent); }
.mw-av { width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mw-staff b { font-size: 12.5px; white-space: nowrap; }
.mw-staff small { font-size: 10.5px; color: var(--woof-text-3); }
.mw-grid { position: relative; display: grid; grid-template-columns: 56px repeat(5, 1fr); height: 470px; overflow: hidden; }
.mw-times { position: relative; border-right: 1px solid #eef1f5; }
.mw-times span { position: absolute; right: 8px; font-size: 10.5px; color: #9ca3af; font-weight: 600; transform: translateY(-50%); background: #fff; padding: 0 2px; }
.mw-col { position: relative; border-right: 1px solid #f1f4f8; background-image: repeating-linear-gradient(to bottom, #f1f4f8 0, #f1f4f8 1px, transparent 1px, transparent 84px); }
.mw-col:last-child { border-right: 0; }
.mw-ap { position: absolute; left: 5px; right: 5px; border-radius: 9px; background: var(--t); border-left: 3px solid var(--c); padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; transition: opacity .5s ease, transform .5s ease; }
.mw-ap b { display: flex; align-items: center; gap: 5px; font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.mw-ap b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10b981; flex: 0 0 auto; }
.mw-ap small { font-size: 10px; color: var(--woof-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-badge { align-self: flex-start; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; border: 1.2px solid currentColor; background: #fff; white-space: nowrap; transition: color .3s ease, background .3s ease; }
.mw-badge.is-in { color: #047857; }
.mw-badge.is-ready { color: #6d28d9; }
.mw-badge.is-conf { color: var(--woof-blue-deep); }
.mw-badge.is-new { color: #fff; background: var(--woof-blue); border-color: var(--woof-blue); }
.mw-badge.is-wait { color: #92400e; background: #fef3c7; border-color: var(--dot-amber); }
.mw-badge.is-paid { color: #fff; background: #10b981; border-color: #10b981; }
.mw-ap.mw-open { background: #fffdf6; border: 1.5px dashed var(--dot-amber); justify-content: center; align-items: center; text-align: center; color: #92400e; font-size: 10.5px; font-weight: 700; }
.mw-ap.mw-hide { opacity: 0; transform: translateY(8px) scale(.97); }
.mw-ap.mw-flash { animation: mwFlash 1.3s ease; }
@keyframes mwFlash { 0% { box-shadow: 0 0 0 0 rgba(24, 160, 251, 0); } 30% { box-shadow: 0 0 0 4px rgba(24, 160, 251, .3); } 100% { box-shadow: 0 0 0 0 rgba(24, 160, 251, 0); } }
.mw-now { position: absolute; left: 56px; right: 0; height: 0; border-top: 2px solid #ef4444; z-index: 2; }
.mw-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }

/* The app's phone chrome (the real phone Schedule): only under 720px. */
.mw-m-top, .mw-m-pager, .mw-m-tabs { display: none; }
.mw-m-top { align-items: center; gap: 10px; height: 52px; padding: 0 12px; border-bottom: 1px solid #eef1f5; }
.mw-m-top img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px var(--woof-line); }
.mw-m-top > b { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.mw-m-car { color: var(--woof-text-3); font-size: 14px; margin: -6px 0 0 -4px; }
.mw-m-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--woof-text-2); position: relative; }
.mw-m-ic:first-of-type { margin-left: auto; }
.mw-m-ic svg { width: 18px; height: 18px; stroke-width: 1.9; }
.mw-m-bell b { position: absolute; top: 0; right: -2px; background: var(--dot-coral); color: #fff; font-size: 9.5px; border-radius: 999px; padding: 1px 5px; }
.mw-m-pager { align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-bottom: 1px solid #eef1f5; font-size: 14px; }
.mw-m-pager b { font-weight: 800; }
.mw-m-pager small { margin-left: auto; font-size: 12px; color: var(--woof-text-3); font-weight: 600; }
.mw-m-pg { width: 30px; height: 30px; border: 1px solid #e3e7ec; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--woof-text-2); }
.mw-m-tabs { align-items: flex-end; justify-content: space-around; height: 64px; padding: 0 6px 8px; border-top: 1px solid #eef1f5; background: #fff; }
.mw-m-tabs > span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--woof-text-3); position: relative; width: 60px; }
.mw-m-tabs > span svg { width: 22px; height: 22px; }
.mw-m-tabs > .is-on { color: var(--woof-blue-deep); }
.mw-m-tabs > .has-dot::after { content: ""; position: absolute; top: -2px; right: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--woof-blue); }
.mw-m-fab { width: 54px; height: 54px; border-radius: 50%; background: var(--woof-blue); color: #fff; align-items: center; justify-content: center; margin-bottom: 2px; box-shadow: 0 10px 20px -8px rgba(24, 160, 251, .8); }
.mw-m-fab svg { width: 24px; height: 24px; stroke-width: 2.4; }

/* The checklist card. */
.mw-check { position: absolute; right: 0; top: 64px; width: 400px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); border: 1px solid #e3e7ec; border-radius: 26px; box-shadow: 0 40px 80px -30px rgba(17, 24, 39, .4), 0 0 0 6px rgba(255, 255, 255, .6); text-align: left; overflow: hidden; z-index: 4; }
.mw-check-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 22px 14px; border-bottom: 1px solid #f1f3f6; }
.mw-check-h b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.mw-check-h small { display: block; font-size: 12.5px; color: var(--woof-text-3); font-weight: 600; margin-top: 3px; }
.mw-done { display: inline-flex; align-items: center; font-size: 13px; font-weight: 800; color: #166534; background: #dcfce7; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.mw-check-win { height: 420px; overflow: hidden; position: relative; }
.mw-check-win::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.mw-check-list { margin: 0; padding: 8px 0; list-style: none; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.mw-check-list li { height: 68px; display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.mw-job { flex: 1 1 auto; min-width: 0; }
.mw-job b { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: #a3aab5; transition: color .3s ease; }
.mw-job b .dot { width: 9px; height: 9px; }
.mw-job small { display: block; font-size: 13px; color: #bcc2cb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease; margin-top: 2px; }
.mw-tick { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #d9dee5; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.mw-tick svg { width: 17px; height: 17px; stroke: #fff; stroke-width: 3.2; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s ease .1s; }
.mw-check-list li.is-on .mw-job b { color: var(--woof-text); }
.mw-check-list li.is-on .mw-job small { color: var(--woof-text-3); }
.mw-check-list li.is-on .mw-tick { background: var(--woof-blue); border-color: var(--woof-blue); transform: scale(1.06); }
.mw-check-list li.is-on .mw-tick svg { stroke-dashoffset: 0; }
.mw-check-list li.is-doing .mw-tick { border-color: var(--woof-blue); border-top-color: transparent; animation: mwSpin .8s linear infinite; }
@keyframes mwSpin { to { transform: rotate(360deg); } }

/* The client's phone: the reminder text, then the store's confirm page. */
.mw-phone { position: absolute; left: 0; bottom: 0; width: 262px; height: 500px; background: #fff; border: 8px solid #fff; border-bottom: 0; border-radius: 40px 40px 0 0; box-shadow: 0 0 0 1px #cfd5dd, 0 40px 70px -30px rgba(17, 24, 39, .45); z-index: 4; overflow: hidden; text-align: left; }
.mw-scr { position: absolute; inset: 0; background: #fff; border-radius: 32px 32px 0 0; overflow: hidden; transition: opacity .5s ease, transform .5s ease; }
.mw-phone[data-mw-phone="sms"] .mw-scr-portal, .mw-phone:not([data-mw-phone="sms"]) .mw-scr-sms { opacity: 0; transform: translateX(24px); }
.mw-notch { width: 86px; height: 22px; border-radius: 0 0 14px 14px; background: #111827; margin: 0 auto; }
.mw-sms-h { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border-bottom: 1px solid #f1f3f6; }
.mw-sms-h span { width: 36px; height: 36px; border-radius: 50%; background: #d1fae5; color: #047857; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mw-sms-h b { font-size: 12px; }
.mw-sms-t { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; }
.mw-sms-t > small { align-self: center; font-size: 10.5px; color: #9ca3af; font-weight: 600; margin-bottom: 4px; }
.mw-sms-t > p { max-width: 90%; font-size: 12px; line-height: 1.45; padding: 9px 12px; border-radius: 18px 18px 18px 6px; background: #eef0f3; }
.mw-link { max-width: 90%; border-radius: 16px; overflow: hidden; background: #eef0f3; }
.mw-link img { display: block; width: 100%; height: 108px; object-fit: cover; object-position: center 18%; }
.mw-link div { padding: 8px 12px 10px; }
.mw-link b { display: block; font-size: 11.5px; }
.mw-link small { font-size: 10.5px; color: var(--woof-text-3); }
.mw-tap { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(17, 24, 39, .18); border: 2px solid rgba(255, 255, 255, .9); transform: scale(0); opacity: 0; pointer-events: none; z-index: 5; }
.mw-tap.is-go { animation: mwTap .7s ease; }
@keyframes mwTap { 0% { transform: scale(.4); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.mw-p-top { height: 168px; overflow: hidden; }
.mw-p-top img { width: 100%; height: 340px; object-fit: cover; object-position: top; display: block; }
.mw-p-body { padding: 14px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.mw-p-kick { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #047857; text-transform: uppercase; }
.mw-p-card { border: 1px solid var(--woof-line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.mw-p-card b { font-size: 15px; }
.mw-p-card span { font-size: 12px; color: var(--woof-text-2); }
.mw-p-btn { height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: background .3s ease, color .3s ease; }
.mw-p-btn.is-go { background: #10b981; color: #fff; }
.mw-p-btn.is-alt { border: 1px solid #d1d5db; color: var(--woof-text-2); }
.mw-p-btn.is-done { background: #d1fae5; color: #047857; }
.mw-p-note { font-size: 11px; color: var(--woof-text-3); text-align: center; }


/* ── 2. Why Woof ─────────────────────────────────────────────────────────── */
.hv4-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hv4-why .card { padding: 26px 24px 28px; gap: 8px; }
.hv4-why .dot { width: 12px; height: 12px; margin-bottom: 10px; }
.hv4-why h3 { font-size: 22px; line-height: 1.2; }
.hv4-why p { font-size: 15px; }

/* ── 3. Smart: text beside one big visual, alternating ──────────────────── */
.hv4-row { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; padding: 36px 0; }
.hv4-row.is-flip { grid-template-columns: 7fr 5fr; }
.hv4-row.is-flip .hv4-txt { order: 2; }
.hv4-txt h3 { margin: 0 0 12px; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--woof-text); display: flex; align-items: center; gap: 10px; }
.hv4-txt p { margin: 0; font-size: 17px; line-height: 1.5; color: #4b5563; max-width: 40ch; }
.hv4-pills { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.hv4-vis { position: relative; min-width: 0; }
.hv4-frame { border-radius: 14px; box-shadow: 0 20px 50px rgba(26, 26, 46, .12); }
.hv4-dim { filter: brightness(.55) saturate(.8); }
.hv4-more { margin: 24px 0 0; font-weight: 700; font-size: 15px; }
.hv4-more a { color: var(--woof-blue-ink); text-decoration: none; }
.hv4-more a:hover { text-decoration: underline; }
/* Drawn screens: the same type and tokens as the app. */
.hv4-ask, .hv4-phone, .hv4-notif, .hv4-search, .hv4-mini { font-family: var(--woof-font); font-size: 13px; color: var(--woof-text); text-align: left; }
.hv4-ask { width: 440px; max-width: 100%; margin: 0 auto; background: #fff; border-radius: 20px; border: 1px solid var(--woof-line); box-shadow: 0 24px 60px rgba(26, 26, 46, .16); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.hv4-ask-top { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; }
.hv4-ask-top span { margin-left: auto; font-weight: 700; font-size: 11px; color: #0f7a4e; background: #e6f9f0; padding: 3px 8px; border-radius: 999px; }
.hv4-bub { margin: 0; max-width: 88%; padding: 11px 14px; border-radius: 16px 16px 16px 4px; line-height: 1.4; font-size: 14px; background: #f3f4f6; align-self: flex-start; }
.hv4-bub.is-me { align-self: flex-end; background: var(--woof-blue); color: #fff; border-radius: 16px 16px 4px 16px; }
.hv4-plan { border: 1.5px solid var(--woof-sky); border-radius: 14px; padding: 14px; background: var(--woof-cream); display: flex; flex-direction: column; gap: 8px; }
.hv4-plan small { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--woof-blue-ink); }
.hv4-plan > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.hv4-plan > div span { color: var(--woof-text-3); text-align: right; }
.hv4-plan-acts { margin-top: 4px; gap: 8px; }
.hv4-plan-acts i { font-style: normal; flex: 1; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 700; font-size: 13px; border: 1.5px solid var(--woof-line); background: #fff; }
.hv4-plan-acts i.is-go { background: var(--woof-blue); color: #fff; border-color: var(--woof-blue); }
.hv4-phone { width: 290px; aspect-ratio: 9 / 19.2; margin: 0 auto; display: flex; flex-direction: column; }
.hv4-phone > img { width: 100%; height: 100%; }
.hv4-ptop { padding: 16px 16px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--woof-line); flex: 0 0 auto; }
.hv4-ptop > div { display: flex; flex-direction: column; }
.hv4-ptop b { font-size: 13px; }
.hv4-ptop small { font-size: 11px; color: var(--woof-text-3); }
.hv4-av { width: 30px; height: 30px; border-radius: 9px; background: #dfe9f5; color: #1c3d63; font-weight: 800; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hv4-pbody { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.hv4-pchat { gap: 8px; }
.hv4-pchat .hv4-bub { font-size: 12.5px; padding: 9px 12px; }
.hv4-pcard { border: 1px solid var(--woof-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.hv4-pcard > b { font-size: 14px; }
.hv4-pcard > small { color: var(--woof-text-3); font-size: 12px; }
.hv4-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.hv4-steps div { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.hv4-steps div span { color: var(--woof-text-3); margin-left: auto; font-size: 12px; }
.hv4-steps i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 800; color: #fff; background: var(--dot-mint); flex: 0 0 auto; }
.hv4-steps i.is-now { background: var(--woof-blue); box-shadow: 0 0 0 4px var(--woof-sky); }
.hv4-steps i.is-todo { background: #e5e7eb; color: #9ca3af; }
.hv4-pbtn { height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; border: 1.5px solid var(--woof-line); }
.hv4-pbtn.is-go { background: var(--woof-blue); color: #fff; border-color: var(--woof-blue); }
.hv4-pbtn.is-ok { background: #e6f9f0; color: #0f7a4e; border-color: #bdeed5; }
.hv4-pbtn.is-wait { background: #fff7e0; color: #8a5a00; border-color: #fde7a8; }
.hv4-vis-notif { padding: 18px 18px 18px 0; }
.hv4-notif { position: absolute; right: 0; top: 0; bottom: 0; width: 360px; background: #fff; border-radius: 16px; box-shadow: -18px 0 50px rgba(26, 26, 46, .18); border: 1px solid var(--woof-line); padding: 16px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.hv4-notif-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--woof-line); margin-bottom: 6px; }
.hv4-notif-h span { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--woof-blue-ink); background: var(--woof-sky); padding: 3px 8px; border-radius: 999px; }
.hv4-nr { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: start; padding: 9px 6px; border-radius: 10px; font-size: 13px; }
.hv4-nr .dot { width: 9px; height: 9px; margin-top: 5px; }
.hv4-nr b { display: block; font-weight: 700; }
.hv4-nr small { color: var(--woof-text-3); font-size: 12px; }
.hv4-nr em { font-style: normal; font-size: 11px; color: var(--woof-text-3); white-space: nowrap; }
.hv4-nr em.is-act { font-weight: 700; color: var(--woof-blue-ink); }
.hv4-vis-search { min-height: 440px; }
.hv4-search { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: 600px; max-width: 94%; background: #fff; border-radius: 16px; box-shadow: 0 30px 70px rgba(26, 26, 46, .28); border: 1px solid var(--woof-line); overflow: hidden; padding-bottom: 8px; }
.hv4-search-in { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--woof-line); font-size: 16px; }
.hv4-search-in svg { fill: none; stroke: var(--woof-text-3); stroke-width: 2; stroke-linecap: round; }
.hv4-search-in span { color: var(--woof-text-3); margin-left: auto; font-size: 12px; border: 1px solid var(--woof-line); border-radius: 6px; padding: 2px 6px; }
.hv4-search > small { display: block; padding: 10px 18px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--woof-text-3); }
.hv4-sr { display: flex; align-items: center; gap: 12px; padding: 8px 18px; font-size: 14px; }
.hv4-sr.is-sel { background: var(--woof-sky); }
.hv4-sr i { width: 26px; height: 26px; border-radius: 8px; background: #f3f4f6; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 800; color: var(--woof-text-2); flex: 0 0 auto; }
.hv4-sr span { margin-left: auto; color: var(--woof-text-3); font-size: 12px; text-align: right; }

/* ── 4. Client portal ────────────────────────────────────────────────────── */
.hv4-phones { display: flex; gap: 28px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.hv4-phones figure { margin: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.hv4-phones figcaption { font-size: 13px; font-weight: 700; color: #c7cbd4; }
.hv4-phones .phone { border-color: #111; box-shadow: 0 0 0 1px #000, 0 24px 60px rgba(0, 0, 0, .4); }
.hv4-pillrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 44px; }
.hv4-pillrow .pill { padding: 9px 16px; font-size: 14px; }
.pill-ink { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); color: #fff; }

/* ── 5. Flexible ─────────────────────────────────────────────────────────── */
.hv4-flex { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; }
.hv4-flex-big { position: relative; min-width: 0; }
.hv4-flex-lab { position: absolute; left: 18px; bottom: 18px; max-width: 360px; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(26, 26, 46, .15); font-size: 14px; line-height: 1.4; color: #4b5563; }
.hv4-flex-lab b { display: block; color: var(--woof-text); }
.hv4-flex-stack { display: flex; flex-direction: column; gap: 16px; }
.hv4-fc { display: grid; grid-template-columns: 1fr 150px; gap: 16px; align-items: center; border: 1px solid var(--woof-line); border-radius: 16px; padding: 16px 18px; background: #fff; }
.hv4-fc h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--woof-text); }
.hv4-fc p { margin: 0; font-size: 14px; line-height: 1.4; color: #4b5563; }
.hv4-mini { border: 1px solid var(--woof-line); border-radius: 10px; padding: 8px; font-size: 10.5px; display: flex; flex-direction: column; gap: 5px; background: var(--woof-cream); }
.hv4-mini > div { display: flex; align-items: center; gap: 6px; }
.hv4-mini .is-add { color: var(--woof-blue-ink); font-weight: 700; }
.hv4-mini.is-thumb { padding: 0; overflow: hidden; }
.hv4-mini.is-thumb img { display: block; width: 100%; }
.hv4-sw { width: 22px; height: 12px; border-radius: 999px; background: var(--dot-mint); margin-left: auto; position: relative; flex: 0 0 auto; }
.hv4-sw::after { content: ""; position: absolute; right: 1px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.hv4-sw.is-off { background: #d1d5db; }
.hv4-sw.is-off::after { right: auto; left: 1px; }
.hv4-ta { background: #fff; border: 1px solid var(--woof-line); border-radius: 6px; padding: 6px; line-height: 1.5; color: #4b5563; display: block; }
.hv4-chk { width: 12px; height: 12px; border-radius: 4px; background: var(--dot-mint); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 8px; font-weight: 800; flex: 0 0 auto; }
.hv4-chk.is-off { background: #fff; border: 1px solid #d1d5db; }

/* ── 6. Integrations ─────────────────────────────────────────────────────── */
.hv4-center { text-align: center; }
.hv4-center .kick { margin: 0 0 14px; }
.hv4-center .hv3-h2 { margin: 0 auto; max-width: 22ch; }
.hv4-logos { list-style: none; margin: 44px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hv4-logos li { height: 56px; padding: 0 22px; border-radius: 14px; border: 1px solid var(--woof-line); background: #fff; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--woof-ink); letter-spacing: -0.01em; }
.hv4-api { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; text-align: left; }
.hv4-api code { display: block; margin-top: 8px; background: var(--woof-ink); color: #c9f2ff; border-radius: 10px; padding: 12px 14px; font: 500 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow-x: auto; }

/* ── 7. Built for how you work ───────────────────────────────────────────── */
.hv4-segs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.hv4-segs a { display: block; height: 100%; border: 1px solid var(--woof-line); border-radius: 18px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; }
.hv4-segs a:hover { box-shadow: 0 10px 30px rgba(26, 26, 46, .1); }
.hv4-segs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hv4-segs a > div { padding: 14px 16px 18px; }
.hv4-segs h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--woof-text); }
.hv4-segs p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.4; color: #4b5563; }

/* ── 8. Switching ────────────────────────────────────────────────────────── */
.hv4-sw4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hv4-sw4 li { background: #24243d; border-radius: 16px; padding: 20px 22px; }
.hv4-sw4 b { display: block; font-size: 17px; margin-bottom: 6px; }
.hv4-sw4 p { margin: 0; color: #c7cbd4; font-size: 14px; line-height: 1.4; }

/* ── 9. Final CTA ────────────────────────────────────────────────────────── */
.hv3-cta { display: flex; align-items: center; gap: 48px; }
.hv3-cta img { width: 200px; height: 200px; flex: 0 0 auto; }
.hv3-cta > div:not(.hv3-ctas) { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.hv3-cta .hv3-h2 { font-size: 56px; }
.hv3-cta .hv3-lead { font-size: 19px; }

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .mw-stage { padding: 0 60px 0 40px; }
    .mw-check { width: 340px; top: 40px; }
    .mw-check-win { height: 360px; }
    .mw-phone { width: 220px; height: 430px; }
    .hv4-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv4-segs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hv4-sw4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv4-row, .hv4-row.is-flip { grid-template-columns: 1fr; gap: 28px; }
    .hv4-row.is-flip .hv4-txt { order: 0; }
    .hv4-flex { grid-template-columns: 1fr; }
}

/* ── Phone (390) ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .lv3-wrap { padding: 0 16px; } /* here, not in landing-v3.css: it must win over the padding rules above */
    .hv3-sec { padding: 40px 0; }
    .hv3-h2 { font-size: 30px; }
    .hv3-lead { font-size: 15px; }
    .hv3-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    /* The hero at 390 (spec §3.2 phone): the app's phone chrome, one groomer, the card over the day. */
    .mw-hero { padding: 104px 0 0; }
    .mw-hero-in { gap: 18px; }
    .mw-eyebrow { font-size: 12.5px; }
    .mw-long { display: none; }
    .mw-hero h1 { font-size: 50px; gap: .14em; }
    .mw-mark { height: .92em; }
    .mw-lead { font-size: 16.5px; }
    .mw-ctas { width: 100%; }
    .mw-ctas .btn { flex: 1 1 140px; height: 48px; padding: 0 22px; font-size: 15px; }
    .mw-stage { padding: 0; margin-top: 14px; }
    .mw-app { grid-template-columns: 1fr; border-radius: 22px 22px 0 0; }
    .mw-rail, .mw-topbar, .mw-stats-l, .mw-push, .mw-navd > span, .mw-staff, .mw-phone { display: none; }
    .mw-m-top, .mw-m-pager, .mw-m-tabs { display: flex; }
    .mw-toolbar { height: 48px; padding: 0 12px; }
    .mw-toolbar .mw-seg { margin-left: auto; }
    .mw-stats { grid-template-columns: repeat(4, 1fr); }
    .mw-stats > div { padding: 8px 6px; }
    .mw-stats > div:nth-child(1), .mw-stats > div:nth-child(4), .mw-stats > div:nth-child(5), .mw-stats > div:nth-child(8) { display: none; }
    .mw-grid { grid-template-columns: 44px 1fr; height: 360px; }
    .mw-grid .mw-col:nth-child(n+3) { display: none; }
    .mw-now { left: 44px; }
    .mw-check { position: absolute; top: auto; left: 6px; right: 6px; bottom: 74px; width: auto; border-radius: 22px; }
    .mw-check-h { padding: 16px 18px 12px; }
    .mw-check-h b { font-size: 17px; }
    .mw-check-win { height: 180px; }
    .mw-check-list li { height: 60px; padding: 0 18px; }
    .mw-job b { font-size: 16px; }
    .mw-tick { width: 28px; height: 28px; }
    .hv4-why,     .hv4-why .card { padding: 18px; }
    .hv4-why h3 { font-size: 18px; }
    .hv4-row { padding: 20px 0; gap: 18px; }
    .hv4-txt h3 { font-size: 22px; }
    .hv4-txt p { font-size: 15px; }
    .hv4-ask { padding: 14px; }
    .hv4-vis-notif { padding: 0; }
    .hv4-notif { position: static; width: 100%; margin-top: 12px; box-shadow: 0 12px 30px rgba(26, 26, 46, .12); }
    .hv4-vis-notif .hv4-frame, .hv4-vis-search .hv4-frame { display: none; }
    .hv4-vis-search { min-height: 0; }
    .hv4-search { position: static; transform: none; width: 100%; max-width: none; }
    .hv4-phone { width: 250px; }
    .hv4-phones { gap: 18px; }
    .hv4-pillrow { margin-top: 24px; gap: 6px; }
    .hv4-pillrow .pill { padding: 6px 10px; font-size: 12px; }
    .hv4-flex-lab { position: static; max-width: none; margin-top: 10px; box-shadow: none; padding: 0; }
    .hv4-fc { grid-template-columns: 1fr 120px; padding: 12px 14px; }
    .hv4-logos li { height: 44px; padding: 0 14px; font-size: 14px; }
    .hv4-api code { font-size: 11px; }
    .hv4-cta, .hv3-cta { flex-direction: column; text-align: center; gap: 12px; }
    .hv3-cta img { width: 120px; height: 120px; }
    .hv3-cta .hv3-h2 { font-size: 30px; }
    .hv3-cta .hv3-lead { font-size: 15px; }
    .hv3-cta .hv3-ctas { width: 100%; }
}

/* Final frame (spec §1.6, §3.2): landing-home.js puts the hero stage on its final frame. */
@media (prefers-reduced-motion: reduce) {
    .mw-stage *, .mw-stage *::before, .mw-stage *::after { animation: none !important; transition: none !important; }
}