/* Copyright (c) 2026 Itrostack LLP. All rights reserved. */
/* DeskyPaw: marketing site. System fonts only (fast, no third-party requests). Light + dark. */
:root {
  --bg: #fbf8f3; --bg2: #f4eee5; --surface: #ffffff; --ink: #1d1b19; --muted: #5d5750; --line: rgba(29, 27, 25, .12);
  --accent: #f0a03c; --accent-2: #e8801f; --accent-ink: #8f4a00; --on-accent: #1d1b19; --shadow: 0 1px 2px rgba(40, 25, 5, .06), 0 12px 32px -8px rgba(40, 25, 5, .16);
  --radius: 20px; --radius-s: 12px; --max: 1120px; --gut: 20px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent-ink); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.7rem); font-weight: 780; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid #b45f00; outline-offset: 3px; border-radius: 8px; }        /* 4:1 or better on every light background */
.desk :focus-visible, .welcome :focus-visible { outline-color: #ffbd5e; }               /* on the dark hero */
.wrap { width: min(100% - var(--gut) * 2, var(--max)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; transition: top .15s; }
.skip:focus { top: 12px; }
section { padding-block: clamp(56px, 9vw, 112px); }
.eyebrow { font: 700 .8rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.sub { color: var(--muted); font-size: 1.15rem; max-width: 62ch; margin-top: 16px; }
.fine { color: var(--muted); font-size: .9rem; }

/* buttons: 44px+ targets */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 700 1rem/1 var(--font); text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: linear-gradient(180deg, #ffbd5e, var(--accent)); color: var(--on-accent); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 16px -4px rgba(232, 128, 31, .55); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 22px -4px rgba(232, 128, 31, .6); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: .92rem; }
.btn--big { min-height: 56px; padding: 0 30px; font-size: 1.1rem; }
.btn__price { background: rgba(29, 27, 25, .12); padding: 5px 9px; border-radius: 999px; font-size: .85em; }
.btn--ghost .btn__price { background: var(--bg2); }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid var(--line); }
.nav__in { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.nav__links { display: flex; gap: 6px; margin-left: auto; }
.nav__links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 10px 12px; border-radius: 10px; }
.nav__links a:hover { color: var(--ink); background: var(--bg2); }
.nav .btn { margin-left: 4px; }
@media (max-width: 860px) { .nav__links { display: none; } .nav .btn { margin-left: auto; } }

/* hero */
.hero { text-align: center; padding-block: clamp(48px, 8vw, 96px) clamp(24px, 4vw, 40px); }
.lede { max-width: 62ch; margin: 22px auto 0; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--muted); }
.lede strong { color: var(--ink); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.hero .fine { margin-top: 18px; }

/* the demo desktop (original artwork) */
.demo { padding-block: 0 clamp(48px, 7vw, 80px); }
.desk { position: relative; overflow: hidden; border-radius: clamp(14px, 2vw, 24px); aspect-ratio: 16 / 9.6; min-height: 340px; isolation: isolate; box-shadow: var(--shadow); border: 1px solid var(--line); background: #2b2350; }
.desk__wall { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 15% 20%, #ff9d6e 0%, transparent 60%),
    radial-gradient(55% 70% at 88% 12%, #7c6bff 0%, transparent 62%),
    radial-gradient(70% 80% at 60% 105%, #ff6fa5 0%, transparent 60%),
    linear-gradient(160deg, #3a2f7a, #1f2a5c 60%, #25396e); }
.desk__wall::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 60% at 50% 120%, rgba(255, 255, 255, .18), transparent 60%); }
.menubar { position: absolute; inset: 0 0 auto 0; height: 30px; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; color: #fff; font-size: 13px; z-index: 5;
  background: rgba(24, 18, 52, .84); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.menubar__l, .menubar__r { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.menubar__l b { font-weight: 700; }
.menubar__l span { opacity: .86; }
.menutimer { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; font-weight: 600; transition: background .3s; }
.menutimer[data-phase="focus"] { background: rgba(240, 160, 60, .9); color: #1d1b19; }
.menutimer[data-phase="break"] { background: #ff6f91; color: #fff; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .6; } }

.win { position: absolute; border-radius: 12px; background: rgba(255, 255, 255, .92); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .1); overflow: hidden; z-index: 1; color: #2a2a35; }
.win--a { left: 6%; top: 15%; width: 46%; height: 46%; }
.win--b { left: 38%; top: 30%; width: 30%; height: 34%; z-index: 2; background: #f7f6fb; }
.win__bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: rgba(240, 238, 246, .95); border-bottom: 1px solid rgba(0, 0, 0, .08); font-size: 12px; font-weight: 600; color: #55556a; }
.win__bar span { margin-inline: auto; padding-right: 40px; }
.d { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.d--r { background: #ff6159; } .d--y { background: #ffbd2e; } .d--g { background: #28c941; }
.win__body { padding: 16px 18px; display: grid; gap: 9px; }
.l { display: block; height: 8px; border-radius: 4px; background: #d6d3e4; width: 92%; }
.l--h { height: 12px; width: 48%; background: #7c6bff; opacity: .7; } .l--h2 { height: 12px; width: 36%; background: #ff8a5c; opacity: .75; margin-top: 8px; }
.l--s { width: 64%; } .l--m { width: 78%; }

.hud { position: absolute; right: clamp(10px, 2vw, 22px); top: 44px; z-index: 6; display: flex; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 18px;
  background: rgba(255, 255, 255, .86); color: #1d1b19; backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .5) inset; max-width: calc(100% - 20px); }
.hud__ring { --p: 0; position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, #fff 78%, transparent 80% 100%), conic-gradient(#e8801f calc(var(--p) * 1%), #e8e1d6 0); }
.hud[data-phase="break"] .hud__ring { background: radial-gradient(closest-side, #fff 78%, transparent 80% 100%), conic-gradient(#ff6f91 100%, #ff6f91 0); }
.hud__time { font: 800 1.15rem/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hud__label { font-weight: 700; font-size: .92rem; margin-bottom: 8px; line-height: 1.2; }
.hud__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.hud .btn--ghost { background: rgba(255, 255, 255, .8); color: #1d1b19; border-color: rgba(0, 0, 0, .15); }
.hud .btn { color: #1d1b19; }

.layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
#glass { z-index: 4; }
.poster { position: absolute; left: 50%; bottom: 3%; width: min(36%, 300px); height: auto; transform: translateX(-50%); z-index: 3; transition: opacity .4s; pointer-events: none; }
.desk.is-ready .poster, .desk.is-failed .poster { opacity: 0; }
.desk.is-failed .poster { opacity: 1; }
.desk.is-ready .poster { visibility: hidden; transition-delay: .4s; }
.loading { position: absolute; left: 50%; top: 52%; transform: translateX(-50%); z-index: 3; color: rgba(255, 255, 255, .85); font-size: .85rem; transition: opacity .3s; margin: 0; }
.desk.is-ready .loading, .desk.is-failed .loading { opacity: 0; }
.desk:not(.is-loading):not(.is-ready) .loading { opacity: 0; }

.dock { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: clamp(6px, 1.2vw, 12px); padding: 9px clamp(10px, 1.6vw, 16px);
  width: min(86%, 700px); justify-content: center; border-radius: 22px; background: rgba(255, 255, 255, .22); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset, 0 12px 30px -10px rgba(0, 0, 0, .5); }
.ic { width: clamp(30px, 5vw, 48px); aspect-ratio: 1; border-radius: 22%; box-shadow: 0 3px 8px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .25) inset; position: relative; flex: none; }
.ic::after { content: ""; position: absolute; inset: 24%; border-radius: 28%; background: rgba(255, 255, 255, .85); }
.ic--1 { background: linear-gradient(#6fd0ff, #3b82f6); } .ic--1::after { border-radius: 50%; }
.ic--2 { background: linear-gradient(#ffd36e, #ff9a3c); } .ic--2::after { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.ic--3 { background: linear-gradient(#8bf0b0, #22b573); } .ic--3::after { inset: 30% 22%; }
.ic--4 { background: linear-gradient(#ff9bc2, #f0508a); } .ic--4::after { border-radius: 50% 50% 50% 8%; }
.ic--5 { background: linear-gradient(#c4a8ff, #7c5cff); } .ic--5::after { inset: 22% 36% 22% 22%; }
.ic--6 { background: linear-gradient(#9aa6b8, #4b5668); } .ic--6::after { inset: 36% 18%; }
.ic--7 { background: linear-gradient(#e7e1d6, #b9b0a2); } .ic--7::after { inset: 28%; border-radius: 50%; background: rgba(60, 50, 40, .55); }
.dock__sep { width: 1px; height: 30px; background: rgba(255, 255, 255, .4); }

.bubble, .note { position: absolute; z-index: 7; pointer-events: none; opacity: 0; }
.bubble { padding: 6px 13px 7px; border-radius: 16px; background: #fff; color: #1d1b19; font: 800 clamp(15px, 2vw, 19px)/1 var(--font); letter-spacing: .4px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); transform-origin: 20% 100%; }
.bubble::after { content: ""; position: absolute; left: 14px; bottom: -7px; border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.bubble.pop { animation: pop .95s ease-out forwards; }
@keyframes pop { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; } 14% { transform: scale(1.25) rotate(3deg); opacity: 1; } 28% { transform: scale(1) rotate(0); } 78% { opacity: 1; } 100% { transform: scale(1.05) translateY(-8px); opacity: 0; } }
.note { max-width: 70%; padding: 6px 12px 7px; border-radius: 13px; background: rgba(255, 255, 255, .95); color: #2b2b2b; font: 700 14px/1.25 var(--font); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.note.show { animation: note 6s ease-out forwards; }
.note.zzz { background: none; box-shadow: none; padding: 0; color: rgba(255, 255, 255, .95); font: italic 800 20px/1 var(--font); letter-spacing: 3px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.note.zzz.show { animation: zzz 3s ease-out forwards; }
@keyframes note { 0% { opacity: 0; transform: translateY(6px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 8px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -18px); } }

.controls { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 22px; }
.chips, .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; width: min(820px, 100%); }            /* the pets as a grid of thumbnails (12 = 6 x 2), like the app's Pet menu */
.chips .chip { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 0; padding: 12px 6px 10px; border-radius: 16px; font-size: .8rem; line-height: 1.15; text-align: center; }
.chips .chip img { width: 64px; height: 48px; object-fit: contain; pointer-events: none; transition: transform .15s; }
.chips .chip:hover img { transform: translateY(-2px) scale(1.04); }
.chips .chip span { display: block; }
.chip, .act { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 650 .93rem/1 var(--font); cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.chip:hover, .act:hover { border-color: var(--ink); }
.chip[aria-checked="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.act { background: var(--bg2); }
.act:active { transform: scale(.97); }
.demo__hint { text-align: center; color: var(--muted); max-width: 66ch; margin: 18px auto 0; font-size: .98rem; }
.act[hidden] { display: none; }

@media (max-width: 720px) {
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .desk { aspect-ratio: 4 / 4.6; min-height: 420px; }
  .win--a { left: 4%; top: 36%; width: 72%; height: 28%; } .win--b { display: none; }
  .menubar__l span { display: none; }
  .hud { left: 10px; right: 10px; top: 40px; padding: 8px 12px 8px 8px; gap: 10px; }
  .hud__ring { width: 58px; height: 58px; } .hud__time { font-size: 1rem; } .hud__label { font-size: .85rem; margin-bottom: 6px; }
  .poster { width: 52%; }
}

/* sections */
.glance { padding-block: clamp(32px, 5vw, 64px); }
.glance h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.glance__a { margin-top: 14px; font-size: 1.2rem; max-width: 70ch; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 26px 0 0; }
.facts div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px; }
.facts dt { font: 700 .75rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.facts dd { margin: 0; font-weight: 650; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin-top: 36px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card p { color: var(--muted); margin-top: 8px; }
.card__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(180deg, #ffd08a, #f0a03c); margin-bottom: 18px; }
.card__ic svg { width: 24px; height: 24px; fill: none; stroke: #1d1b19; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.petlist { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.pcard { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pcard img { width: 100%; height: 150px; object-fit: contain; margin-bottom: 8px; }
.pcard b { font-size: 1.05rem; }
.pcard span { color: var(--muted); font-size: .94rem; line-height: 1.4; }

.focus { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.focus__text { max-width: 720px; }
.focus__vis { position: relative; aspect-ratio: 1 / 1.05; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); isolation: isolate; }
.fv__wall { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 20% 10%, #ff9d6e, transparent 60%), radial-gradient(70% 70% at 90% 20%, #7c6bff, transparent 60%), radial-gradient(80% 70% at 50% 110%, #ff6fa5, transparent 60%), linear-gradient(160deg, #3a2f7a, #1f2a5c); }
.fv__timer { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); background: rgba(255, 255, 255, .9); color: #1d1b19; border-radius: 22px; padding: 12px 24px; text-align: center; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5); }
.fv__timer small { display: block; font: 700 .8rem/1 var(--font); color: #8f4a00; margin-bottom: 6px; }
.fv__timer b { font: 850 2.2rem/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fv__zzz { position: absolute; left: 56%; top: 36%; color: rgba(255, 255, 255, .95); font: italic 800 1.5rem/1 var(--font); letter-spacing: 4px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); animation: zzz 3s ease-out infinite; }
.focus__vis img { position: absolute; left: 50%; bottom: 17%; width: 72%; transform: translateX(-50%); }
.fv__dock { position: absolute; left: 8%; right: 8%; bottom: 6%; height: 12%; border-radius: 22px; background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset; }
@media (max-width: 860px) { .focus { grid-template-columns: 1fr; } .focus__vis { max-width: 460px; } }
.steps { padding: 0; margin: 28px 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; position: relative; padding: 14px 16px 14px 64px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--muted); }
.steps li b { color: var(--ink); }
.steps li::before { content: counter(s); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(180deg, #ffbd5e, #f0a03c); color: #1d1b19; }

.get { text-align: center; }
.buy { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: 28px; padding: clamp(32px, 6vw, 64px) 20px; box-shadow: var(--shadow); }
.buy__list { list-style: none; padding: 0; margin: 24px auto 30px; display: grid; gap: 8px; width: fit-content; text-align: left; }
.buy__list li::before { content: "✓"; color: var(--accent-ink); font-weight: 900; margin-right: 10px; }

.faq__list { margin-top: 28px; display: grid; gap: 10px; max-width: 820px; }
details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); }
summary { cursor: pointer; padding: 16px 20px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 52px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent-ink); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 20px 18px; color: var(--muted); }

.foot { border-top: 1px solid var(--line); background: var(--bg2); padding-block: 40px 28px; }
.foot__in { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.foot__tag { color: var(--muted); margin-top: 8px; font-size: .95rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot nav a { color: var(--muted); text-decoration: none; padding: 8px 0; font-weight: 600; font-size: .95rem; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }
.foot__legal { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }

/* simple pages (privacy, 404) */
.page { padding-block: clamp(40px, 7vw, 88px); max-width: 760px; }
.page h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 18px; }
.page h2 { font-size: 1.4rem; margin: 32px 0 10px; }
.page p, .page li { color: var(--muted); } .page ul { padding-left: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* thank-you page */
.thanks { padding-block: clamp(40px, 7vw, 88px); max-width: 760px; }
.thanks h1 { font-size: clamp(2rem, 5vw, 3rem); }
.keybox { margin: 28px 0 8px; display: grid; gap: 10px; }
.keyrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius-s); }
.keyrow code { font: 700 clamp(1rem, 3.4vw, 1.3rem)/1.3 var(--mono); letter-spacing: .04em; word-break: break-all; user-select: all; }
.thanks .steps { margin-top: 32px; }
.thanks .steps li .btn { margin-left: 10px; vertical-align: middle; }

[hidden] { display: none !important; }      /* the hidden attribute must beat component display rules (buttons, flex rows) */

/* ===== the hero IS the demo desktop: full-viewport, edge to edge, with the site nav as its menu bar ===== */
html { scroll-padding-top: 40px; }
.menubar--site { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 30px; padding: 0 clamp(8px, 1.4vw, 16px); }
.menubar__brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; padding: 2px 6px; border-radius: 6px; }
.menubar__brand b { font-weight: 800; }
.menubar__nav { display: flex; gap: 2px; }
.menubar__nav a, .menubar__brand { color: #fff; text-decoration: none; }
.menubar__nav a { font-size: 13px; padding: 2px 9px; border-radius: 6px; opacity: .9; }
.menubar__nav a:hover, .menubar__brand:hover { background: rgba(255, 255, 255, .16); opacity: 1; }
.menubar__r { gap: 14px; }
.menubar__buy { background: linear-gradient(180deg, #ffbd5e, #f0a03c); color: #1d1b19; font-weight: 700; font-size: 12.5px; padding: 3px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.menubar__buy:hover { filter: brightness(1.06); }
.menubar a:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.menubar__clock { font-variant-numeric: tabular-nums; white-space: nowrap; }

.demo { padding-block: 0; }
.desk--full { width: 100%; height: 100vh; height: 100dvh; min-height: 600px; aspect-ratio: auto; border-radius: 0; border: 0; box-shadow: none; }
.win--glass { position: absolute; z-index: 5; background: rgba(20, 15, 44, .55); color: #fff; backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.win--glass .win__bar { background: rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); }
.welcome { left: clamp(14px, 6vw, 110px); top: 50%; transform: translateY(-58%); width: min(600px, 46vw); border-radius: 16px; }
.welcome__body { padding: clamp(18px, 2.6vw, 34px) clamp(18px, 2.8vw, 38px) clamp(20px, 2.6vw, 32px); }
.welcome h1 { font-size: clamp(1.9rem, 3.9vw, 3.4rem); color: #fff; }
.welcome .eyebrow { color: #ffbd5e; margin-bottom: 12px; }
.welcome .lede { margin: 16px 0 0; max-width: none; text-align: left; color: rgba(255, 255, 255, .86); font-size: clamp(.98rem, 1.35vw, 1.15rem); }
.welcome .lede strong { color: #fff; }
.welcome .cta { justify-content: flex-start; margin-top: 22px; }
.welcome .btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.welcome .btn--ghost:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }
.welcome .btn__price { background: rgba(29, 27, 25, .16); }
.welcome .fine { color: rgba(255, 255, 255, .72); margin-top: 14px; font-size: .85rem; }
.demo__below { padding-top: clamp(28px, 4vw, 48px); }

@media (max-width: 900px) { .menubar__nav a:nth-child(n+3) { display: none; } .welcome { width: min(560px, calc(100% - 28px)); } }
@media (max-width: 720px) {
  .desk--full { min-height: 640px; }
  .menubar__nav, .menubar__ic, .menubar__clock { display: none; }
  .menubar__r { margin-left: auto; }
  .hud { left: 10px; right: 10px; top: 40px; }
  .welcome { left: 10px; right: 10px; width: auto; top: 140px; transform: none; }
  .welcome__body { padding: 16px 18px 18px; }
  .welcome h1 { font-size: 1.85rem; }
  .welcome .lede { font-size: .9rem; margin-top: 10px; }
  .welcome .fine { display: none; }
  .welcome .cta { margin-top: 14px; gap: 8px; }
  .welcome .btn--big { min-height: 46px; padding: 0 20px; font-size: 1rem; }
}

.win--deco { left: 56%; top: 32%; width: min(34vw, 500px); height: 38%; z-index: 2; background: rgba(255, 255, 255, .93); }
@media (max-width: 1000px) { .win--deco { display: none; } }

/* ===== short browser windows: the welcome window must stay fully visible (title bar below the menu bar) and clear of the pet's lane ===== */
.demo { position: relative; }                                  /* the welcome window is placed over the demo desktop (it follows it in the HTML) */
.welcome { top: max(46px, calc(max(100dvh, 600px) / 2 - 322px)); transform: none; }                 /* same spot as before on tall windows; on short ones it stops under the menu bar */
#petCanvas { z-index: 6; }                                                        /* the pet walks IN FRONT of every window, like the real app (clicks still pass through) */
#glass { z-index: 7; }
@media (min-width: 721px) and (max-height: 780px) {
  .welcome h1 { font-size: clamp(1.7rem, 5vh, 2.7rem); }
  .welcome .lede { font-size: .92rem; margin-top: 10px; }
  .welcome .cta { margin-top: 14px; }
  .welcome__body { padding: 16px 24px 18px; }
  .welcome .fine { display: none; }
}
@media (min-width: 721px) and (max-height: 680px) { .welcome .lede { display: none; } .welcome h1 { font-size: clamp(1.6rem, 5.2vh, 2.3rem); } }
@media (min-width: 721px) and (max-height: 560px) { .welcome .eyebrow { display: none; } .welcome .cta { margin-top: 10px; } }
@media (max-width: 720px) { .welcome { top: 140px; } }

/* ---- brand: the puppy logo shown big enough to read, on every background ---- */
.menubar__head { width: 30px; height: 30px; margin: -4px 0; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.foot__logo { display: inline-block; }
.foot__logo img { display: block; width: 190px; height: auto; margin-left: -8px; }
.brand__icon { object-fit: contain; }

/* the brand logo is dark-on-light: on dark surfaces it sits on a soft cream plate so it never disappears */
.logoplate { display: inline-block; background: #fffaf3; border-radius: 12px; padding: 2px 8px 3px; box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .5) inset; line-height: 0; }
.foot__logo.logoplate img { display: block; margin: 0; width: 96px; height: auto; }
@media (prefers-color-scheme: light) { .foot__logo.logoplate { background: none; box-shadow: none; padding: 0; } .foot__logo.logoplate img { margin-left: -4px; } }

/* ---- the demo's paw menu: pets + tricks live on the desktop, under the focus buddy (no scrolling) ---- */
.rail { position: absolute; right: clamp(10px, 2vw, 22px); top: 44px; z-index: 6; display: flex; flex-direction: column; gap: 10px; width: min(404px, calc(100% - 20px)); }
@media (min-width: 721px) { .rail .hud { position: static; width: 100%; } }
.rail .hud { max-width: none; }
.hud__txt { flex: 1; min-width: 0; }
.hud__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hud__btns .btn { width: 100%; justify-content: center; padding-inline: 8px; white-space: nowrap; }
.hud__btns #btnFocus { grid-column: 1 / -1; }
.win--deco { display: none; }
.pawmenu { background: rgba(255, 255, 255, .9); color: #1d1b19; border-radius: 18px; box-shadow: 0 14px 36px rgba(20, 10, 60, .28), 0 0 0 1px rgba(255, 255, 255, .6) inset; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); overflow: hidden; }
.pawmenu__bar { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: none; border: 0; color: inherit; font: 750 .92rem/1 var(--font); cursor: pointer; text-align: left; }
.pawmenu__bar:hover { background: rgba(0, 0, 0, .04); }
.pawmenu__title { flex: none; }
.pawmenu__cur { flex: 1; min-width: 0; text-align: right; color: #7a6a5f; font-weight: 600; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pawmenu__chev { flex: none; transition: transform .2s; }
.pawmenu__bar[aria-expanded="false"] .pawmenu__chev { transform: rotate(180deg); }
.pawmenu__body { padding: 2px 12px 12px; border-top: 1px solid rgba(0, 0, 0, .07); max-height: calc(100dvh - 250px); overflow: auto; overscroll-behavior: contain; }
.pawmenu__bar[aria-expanded="false"] + .pawmenu__body { display: none; }
.pawmenu__h { font: 800 .68rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #8a7a6e; margin: 12px 2px 7px; }
.pawmenu .chips { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pawmenu .chips .chip { padding: 6px 2px 5px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: #1d1b19; font-size: .64rem; font-weight: 650; gap: 3px; min-height: 0; }
.pawmenu .chips .chip img { width: 52px; height: 40px; }
.pawmenu .chips .chip:hover { background: rgba(0, 0, 0, .05); border-color: transparent; }
.pawmenu .chips .chip[aria-checked="true"] { background: rgba(245, 165, 36, .22); border-color: #f5a524; color: #1d1b19; }
.pawmenu .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.pawmenu .act { min-height: 34px; padding: 0 12px; font-size: .8rem; background: rgba(0, 0, 0, .05); border-color: transparent; color: #1d1b19; }
.pawmenu .act:hover { background: rgba(245, 165, 36, .25); border-color: transparent; }
.pawmenu :focus-visible { outline: 2px solid #b45f00; outline-offset: 2px; }
.demo__below { padding-top: clamp(20px, 3vw, 36px); }
.demo__hint { margin-top: 0; }
@media (max-width: 720px) {
  .rail { display: contents; }
  .pawmenu { position: absolute; left: 10px; right: 10px; bottom: 96px; z-index: 6; }
  .pawmenu__body { max-height: 42dvh; }
  .pawmenu .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 721px) and (max-height: 760px) { .pawmenu .chips .chip img { width: 44px; height: 33px; } .pawmenu__h { margin-top: 9px; } }

/* ---- promo video ---- */
.tour { padding-block: clamp(32px, 5vw, 64px); }
.tour h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.tour__fig { margin: 22px auto 0; max-width: 1000px; }
.tour video { width: 100%; height: auto; aspect-ratio: 1280 / 678; background: #14110e; border-radius: var(--radius); box-shadow: var(--shadow); }
.tour__fig figcaption { margin-top: 12px; text-align: center; }
.tour__lede { margin: 12px 0 0; max-width: 62ch; color: var(--muted); font-size: 1.12rem; }
.tour__fig figcaption { text-align: left; }
.tour__cta { margin-top: 26px; justify-content: flex-start; }

/* ---- footer columns ---- */
.foot__brand { max-width: 320px; }
.foot__contact { margin: 10px 0 0; font-size: .95rem; color: var(--muted); }
.foot__contact a { font-weight: 700; }
.foot nav.foot__cols { display: flex; flex-wrap: wrap; gap: 28px 56px; }
.foot__cols > div { display: flex; flex-direction: column; min-width: 120px; }
.foot__h { margin: 0 0 6px; font: 800 .75rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.foot__cols a { padding: 6px 0; }

/* ======== below the hero: light, calm, banded ======== */
.sheet { position: relative; overflow-x: clip; background: var(--bg); }
.sheet::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, #ffbd5e, #ff9bb3 50%, #9a8cff); }
.band { position: relative; isolation: isolate; }
.band::before { content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; background: var(--band); }
.band--white { --band: #fff; --surface: var(--bg); }          /* cards sit cream on white */
.band--warm { --band: var(--bg2); }
.sheet section { padding-block: clamp(56px, 8vw, 104px); }
.sheet .tour { padding-bottom: clamp(40px, 6vw, 72px); }
.sheet .glance { padding-top: clamp(8px, 2vw, 24px); }

/* feature + audience cards */
.card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(240, 160, 60, .5); }
.who__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.who .card { background: #fff; }

/* the pets: an even 4-across grid with equal-height cards */
.petlist { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.petlist li { display: flex; }
.pcard { height: 100%; background: #fff; }
.pcard img { height: 170px; }
.pcard:hover, .pcard:focus-visible { border-color: rgba(240, 160, 60, .6); }
@media (max-width: 1000px) { .petlist { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .petlist { grid-template-columns: repeat(2, 1fr); gap: 12px; } .pcard img { height: 130px; } }

/* FAQ: heading and contact on the left, answers on the right */
.faq__grid { display: grid; grid-template-columns: minmax(240px, .8fr) 1.7fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.faq__aside { position: sticky; top: 96px; }
.faq__help { color: var(--muted); margin: 14px 0 18px; }
.faq__grid .faq__list { max-width: none; margin-top: 0; }
details { background: #fff; }
@media (max-width: 820px) { .faq__grid { grid-template-columns: 1fr; } .faq__aside { position: static; } }

/* ======== accessibility ======== */
/* the selected pet is marked by a tick as well as by colour */
.chips .chip { position: relative; }
.chips .chip[aria-checked="true"]::after { content: "✓"; position: absolute; top: 4px; right: 5px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 800 10px/1 var(--font); background: #1d1b19; color: #fff; }
.pawmenu .chips .chip[aria-checked="true"]::after { background: #b45f00; }
.is-failed #btnMotion { display: none; }

/* ======== desktop-pets landing pages ======== */
.petpage { padding-block: clamp(24px, 4vw, 48px) clamp(48px, 7vw, 88px); }
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.pethero { display: grid; grid-template-columns: minmax(240px, .9fr) 1.1fr; gap: clamp(20px, 5vw, 64px); align-items: center; padding-block: clamp(16px, 3vw, 32px) clamp(28px, 4vw, 48px); }
.pethero--hub { grid-template-columns: 1fr; max-width: 760px; }
.pethero__img { background: linear-gradient(180deg, #fff, var(--bg2)); border: 1px solid var(--line); border-radius: 28px; padding: clamp(18px, 4vw, 44px); }
.pethero__img img { width: 100%; max-height: 360px; object-fit: contain; }
.pethero h1 { font-size: clamp(2rem, 4.8vw, 3.2rem); margin-top: 6px; }
.pethero .lede { margin: 16px 0 0; font-size: 1.12rem; color: var(--muted); max-width: 56ch; }
.cta--left { justify-content: flex-start; }
.petsec { padding-block: clamp(20px, 3vw, 36px); }
.petsec h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin-bottom: 14px; }
.petsec p { color: var(--muted); max-width: 70ch; margin-top: 10px; }
.petsec .facts { margin-top: 8px; }
.ticks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; max-width: 70ch; }
.ticks li::before { content: "✓"; color: var(--accent-ink); font-weight: 900; margin-right: 10px; }
.petsec .faq__list { max-width: 820px; margin-top: 0; }
.petsec .petlist { margin-top: 14px; }
a.pcard { text-decoration: none; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; }
.cmp { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .95rem; }
.cmp th, .cmp td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cmp thead th { background: var(--bg2); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) { .pethero { grid-template-columns: 1fr; } .pethero__img img { max-height: 240px; } }
.petlist__more { margin-top: 22px; font-weight: 700; }
.buy__req { margin-top: 6px; }

/* pet pictures sit on a soft warm studio backdrop (a lit cream wall fading to a darker floor), in the site's own colours */
:root { --studio: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #f8f2e9 55%, #ece2d3 100%); }
.pcard img { background: var(--studio); border-radius: 14px; padding: 10px; box-sizing: border-box; box-shadow: inset 0 -18px 24px -18px rgba(120, 90, 50, .18); }
.chips .chip img { background: var(--studio); border-radius: 10px; padding: 3px; box-sizing: border-box; width: 72px; height: 54px; }
.pethero__img { background: var(--studio); }

/* demo: size presets (same as the app's Size menu) and the "more pets" link */
.sizes { display: flex; gap: 6px; }
.szb { min-height: 34px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: rgba(0, 0, 0, .05); color: #1d1b19; font: 650 .8rem/1 var(--font); cursor: pointer; }
.szb:hover { background: rgba(245, 165, 36, .25); }
.szb[aria-checked="true"] { background: rgba(245, 165, 36, .22); border-color: #f5a524; }
.pawmenu__tip { margin: 7px 2px 0; font-size: .72rem; line-height: 1.35; color: #6b5e54; }
.pawmenu__more { margin: 6px 2px 0; font-size: .74rem; }
.pawmenu__more a { color: #8a4b00; font-weight: 650; }

/* wide screens: the pet walks in FRONT of the welcome window and the controls, like the real app over your windows.
   The welcome window and the controls follow the desktop in the HTML, so the desktop's layers join the page's stacking order here. */
@media (min-width: 721px) {
  .desk--full { isolation: auto; }
  .desk--full .desk__wall { z-index: 0; }
  .desk--full .layer { z-index: 7; }
  .desk--full #petCanvas { z-index: 7; }                       /* above the controls (.rail, z 6) too: the id rule #petCanvas (z 6) used to tie with them, so the pet slid behind the menu */
  .desk--full #glass { z-index: 8; }
  .desk--full .bubble, .desk--full .note { z-index: 9; }
}
/* phone-only bits (shown in the block below) */
.m-only, .pawmenu__head, .sizesel { display: none; }
.pm-play { display: contents; }

/* ---- phones: the welcome window sits on the tiny desktop like on the wide screens, the pet walks along the dock under it ----
   Pets & tricks is one compact card (pets, then the tricks swipe row + a size dropdown), then the focus buddy.
   Wide screens are not touched by anything below. */
@media (max-width: 720px) {
  .demo { display: grid; grid-template-columns: minmax(0, 1fr); }
  .desk--full, .demo .welcome { grid-area: 1 / 1; }
  .desk--full { height: auto; min-height: 0; padding: 0; isolation: auto; }
  .desk--full .desk__wall { z-index: 0; }
  .desk--full .layer { z-index: 7; }
  .desk--full .bubble, .desk--full .note { z-index: 8; }
  .desk .poster { width: 34%; bottom: 28px; }
  .desk .loading { top: auto; bottom: 110px; }
  .demo .welcome { position: relative; inset: auto; transform: none; width: auto; margin: 44px 10px 136px; align-self: start; z-index: 5; }
  .demo .welcome__body { padding: 14px 16px 16px; }
  .demo .welcome h1 { font-size: clamp(1.55rem, 7.4vw, 1.95rem); }
  .demo .welcome .eyebrow { margin-bottom: 8px; font-size: .72rem; }
  .demo .welcome .lede, .demo .welcome .fine { display: none; }
  .demo .welcome .cta { margin-top: 14px; gap: 8px; flex-wrap: wrap; }
  .demo .welcome .cta .btn { flex: 1 1 auto; justify-content: center; min-height: 46px; padding: 0 14px; font-size: .95rem; white-space: nowrap; }
  .demo .welcome .btn__price { font-size: .78rem; padding: 4px 8px; }
  .demo .welcome .btn--ghost { display: none; }                  /* "Try the pets": the pets menu is right under the desktop on phones */

  .demo .rail { position: static; display: flex; flex-direction: column; gap: 10px; width: auto; margin: 12px 12px 0; }
  .demo .pawmenu { order: 1; position: static; inset: auto; }
  .demo .hud { order: 2; position: static; inset: auto; width: auto; max-width: none; padding: 8px 10px 8px 8px; }
  .demo .hud__label { display: none; }
  .demo .hud__ring { width: 54px; height: 54px; }
  .demo .hud .btn--small { min-height: 44px; padding: 0 10px; font-size: .9rem; }

  /* the menu: no inner scroll box (it swallowed the swipe that should scroll the page), the app's head instead of the paw */
  .demo .pawmenu__bar { min-height: 48px; }
  .demo .pawmenu__ic { display: none; }
  .demo .pawmenu__head { display: block; width: 26px; height: 26px; margin: -3px 0; object-fit: contain; flex: none; }
  .demo .pawmenu { position: relative; z-index: 9; overflow: visible; }
  .demo .pawmenu__body { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: none; overflow: visible; overscroll-behavior: auto; padding: 10px 12px 12px; border: 0;
    border-radius: 18px; background: #fff; box-shadow: 0 18px 40px rgba(20, 10, 60, .35), 0 0 0 1px rgba(0, 0, 0, .06); }   /* opens over the focus card, so the page does not grow */
  .demo .pawmenu__h, .demo .sizes, .demo .pawmenu__tip { display: none; }
  .demo .pawmenu .chips { gap: 4px; }
  .demo .pawmenu .chips .chip img { width: 48px; height: 36px; }
  .demo .pawmenu__more { margin: 4px 2px 0; }
  .demo .pm-play { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .demo .pawmenu .acts { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); padding-right: 22px; }
  .demo .pawmenu .acts::-webkit-scrollbar { display: none; }
  .demo .pawmenu .act { flex: none; min-height: 44px; scroll-snap-align: start; }
  .demo .sizesel { display: flex; align-items: center; flex: none; min-height: 44px; padding: 0 10px 0 14px; border-radius: 999px; background: rgba(0, 0, 0, .05); font: 650 .8rem/1 var(--font); color: #1d1b19; gap: 6px; }
  .demo .sizesel span { color: #8a7a6e; }
  .demo .sizesel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d1b19' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center / 12px no-repeat;
    font: inherit; color: inherit; padding: 12px 18px 12px 0; min-width: 4.4em; cursor: pointer; }

  .demo .m-send { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 12px 0; }
  .demo .m-send .btn { flex: 1 1 auto; justify-content: center; min-height: 46px; padding: 0 14px; font-size: .95rem; white-space: nowrap; }
  .demo .m-send .btn--ghost { flex: 0 0 auto; padding: 0 22px; }
  .demo .m-send .btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
  .demo .m-send .fine { flex: 0 0 100%; margin: 2px 2px 0; color: var(--muted); }
}

/* download + checksum */
.buy__buy { margin: 14px auto 0; font-size: .95rem; color: var(--muted); }
.buy__buy a { color: var(--accent-ink); font-weight: 700; }
.verify { margin: 26px auto 0; max-width: 560px; padding: 16px 18px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); }
.verify__h { margin: 0 0 4px; font-weight: 800; }
.verify__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.verify__row code { flex: 1 1 260px; min-width: 0; font: 600 .78rem/1.45 var(--mono); word-break: break-all; user-select: all; }
.verify .fine code { font: 600 .82rem var(--mono); word-break: break-all; user-select: all; }