/* The promo tour (public/js/promo.js): a ~65-second animated preview of the app, on the home page and in a
   full-screen dialog from the "Tour" button. Drawn in code; no video files, nothing third-party.
   Strict CSP: no style="" attributes anywhere; the script only sets CSS custom properties (and transforms,
   clip-paths) through the CSSOM. Colours come from site.css's tokens (--accent, --sun, --coral…).
   Sizes inside the app windows are in em, with the window's font size set in container units, so every
   screen scales with the window. */

/* ───────── stage: deep pine green, like the home page's bands ───────── */
.promo { --st-1: #1F6F5C; --st-2: #123B32; --st-text: #FFFFFF; --st-text-2: #CFE3DA; --st-text-3: #8DB5A6; --st-line: rgba(255,255,255,.14); --st-line-2: rgba(255,255,255,.28);
  position: relative; color: var(--st-text); background: linear-gradient(165deg, var(--st-1), var(--st-2)); isolation: isolate; overflow: hidden; scroll-margin-top: 66px; }
.promo-static { padding: clamp(3rem, 8vw, 5rem) 16px; text-align: center; }
.promo-static h2 { color: #fff; }
.promo-static p { color: var(--st-text-2); }
.promo.js .promo-static { display: none; }
.promo-stage {
  position: relative; display: grid; grid-template-columns: minmax(260px, 29%) minmax(0, 1fr); align-items: center; gap: 3vw;
  height: clamp(560px, calc(100svh - 66px), 860px); padding: 36px max(16px, 4vw) 84px;
}
.promo-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 55% at 85% 15%, rgba(255,207,107,.16), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(255,255,255,.07), transparent 70%); }
.promo-bg::before { content: ""; position: absolute; inset: -40px; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.09) 1.2px, transparent 1.4px); background-size: 26px 26px; animation: pt-drift 50s linear infinite; }
@keyframes pt-drift { to { transform: translate(26px, 26px); } }

.promo-cap { position: relative; z-index: 2; align-self: center; }
.promo-kick { margin: 0 0 14px; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sun); display: flex; align-items: center; gap: 10px; }
.promo-kick::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--sun); }
.promo-title { margin: 0 0 16px; font-size: clamp(2rem, 3.7vw, 3.6rem); font-weight: 850; line-height: 1.02; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.promo-title em { font-style: normal; color: var(--sun); }
.promo-line { margin: 0; max-width: 32ch; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.5; color: var(--st-text-2); }
.promo-vis { position: relative; z-index: 1; height: 100%; min-height: 0; container-type: size; display: grid; place-items: center; perspective: 1600px; }

/* the cold open owns the whole stage */
.promo.cold .promo-cap { grid-column: 1 / -1; text-align: center; justify-self: center; max-width: min(58rem, 74%); }
.promo.cold .promo-kick { justify-content: center; }
.promo.cold .promo-kick::before { display: none; }
.promo.cold .promo-title { font-size: clamp(2.8rem, 6.6vw, 6rem); }
.promo.cold .promo-line { margin: 0 auto; }
.promo.cold .promo-vis { position: absolute; inset: 0 0 64px; z-index: 0; }

@media (max-width: 820px), (max-aspect-ratio: 1/1) {
  .promo-stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; align-items: stretch; gap: 22px; height: calc(100svh - 66px); min-height: 600px; max-height: 900px; padding: 22px 16px 74px; }
  .promo-vis { height: min(calc(100vw - 32px), 56svh); }
  .promo-cap { text-align: center; }
  .promo-kick { justify-content: center; margin-bottom: 8px; }
  .promo-kick::before { display: none; }
  .promo-title { font-size: clamp(1.7rem, 7.4vw, 2.5rem); margin-bottom: 8px; }
  .promo-line { max-width: 36ch; margin: 0 auto; font-size: .98rem; }
  .promo.cold .promo-cap { grid-row: 1 / -1; align-self: center; }
  .promo.cold .promo-title { font-size: clamp(2.5rem, 12vw, 4rem); }
}

/* ───────── controls ───────── */
.promo-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; align-items: center; gap: 10px; padding: 14px max(16px, 4vw) 16px; background: linear-gradient(transparent, rgba(10,32,27,.55)); }
.promo-bar button { display: inline-grid; place-items: center; height: 40px; min-width: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: .85rem; font-weight: 750; cursor: pointer; }
.promo-bar button:hover { background: rgba(255,255,255,.18); }
.promo-bar button:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.promo-bar button svg { width: 18px; height: 18px; }
.promo-bar .pp { background: var(--sun); color: var(--ink); }
.promo-bar .pp:hover { background: #FFD985; }
.promo-bar .pskip { grid-auto-flow: column; gap: 6px; }
.promo-ch { flex: 1; display: flex; gap: 5px; min-width: 0; }
.promo-ch button { flex: 1; position: relative; min-width: 0; height: 30px; padding: 0; border-radius: 4px; background: none; display: block; }
.promo-ch button:hover { background: none; }
.promo-ch button::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: var(--st-line-2); }
.promo-ch button i { position: absolute; left: 0; top: 13px; height: 4px; width: calc(var(--p, 0) * 100%); border-radius: 2px; background: var(--sun); }
.promo-ch button span { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; padding: 5px 9px; border-radius: 8px; background: #0E2E27; border: 1px solid var(--st-line-2); font-size: .75rem; font-weight: 750; color: #fff; opacity: 0; pointer-events: none; transition: opacity .15s; }
.promo-ch button:hover span, .promo-ch button:focus-visible span { opacity: 1; }
.promo-time { font-size: .8rem; font-weight: 700; color: var(--st-text-2); min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
.promo-bar .x { display: none; }
.promo-dialog .promo-bar .x { display: inline-grid; }
@media (max-width: 560px) { .promo-time { display: none; } .promo-bar { gap: 6px; } .promo-bar .pskip span { display: none; } .promo-ch { gap: 3px; } }

/* ───────── the ending card ───────── */
.promo-end { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px 16px 90px; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.promo.ended .promo-end { opacity: 1; visibility: visible; transition: opacity .6s; }
.promo-cap, .promo-vis { transition: opacity .45s, filter .45s; }
.promo.ended .promo-cap, .promo.ended .promo-vis { opacity: 0; filter: blur(6px); pointer-events: none; }
.promo-end-in { text-align: center; width: 100%; max-width: 720px; min-width: 0; }
.pe-mark .pmark { width: 64px; height: 64px; padding: 12px; margin: 0 auto 16px; display: block; border-radius: 20px; background: var(--sun); fill: var(--accent-dark); box-shadow: 0 14px 34px -12px rgba(0,0,0,.5); }
.promo-end h2 { margin: 0 0 12px; font-size: clamp(2.3rem, 6vw, 4.4rem); font-weight: 850; line-height: 1; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.promo-end h2 em { font-style: normal; color: var(--sun); }
.promo-end p { margin: 0 auto 24px; max-width: 46ch; font-size: 1.05rem; line-height: 1.5; color: var(--st-text-2); }
.promo-end .pe-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 16px; }
.promo-end .pe-cta a { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60px; padding: 10px 28px; border-radius: 16px; text-decoration: none; font-size: 1.1rem; font-weight: 850; background: var(--sun); color: var(--ink); box-shadow: 0 0 0 0 rgba(255,207,107,.35), 0 12px 28px -12px rgba(0,0,0,.5); transition: box-shadow .2s, transform .15s; }
.promo-end .pe-cta a:hover { box-shadow: 0 0 0 7px rgba(255,207,107,.25), 0 12px 28px -12px rgba(0,0,0,.5); transform: translateY(-1px); color: var(--ink); }
.promo-end .pe-cta a small { margin-top: 4px; font-size: .78rem; font-weight: 650; opacity: .75; }
.promo-end .sub { display: flex; justify-content: center; gap: 6px 20px; flex-wrap: wrap; font-size: .92rem; font-weight: 750; }
.promo-end .sub button, .promo-end .sub a { border: 0; background: none; padding: 8px 4px; color: var(--st-text-2); cursor: pointer; text-decoration: none; font: inherit; }
.promo-end .sub button:hover, .promo-end .sub a:hover { color: #fff; }
.pe-strip { margin-top: 26px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.pe-strip > div { display: flex; gap: 14px; width: max-content; animation: pt-strip 36s linear infinite; }
.pe-strip .animal { width: 44px; height: 44px; border-radius: 14px; }
@keyframes pt-strip { to { transform: translateX(calc(-50% - 7px)); } }

/* ───────── as a full-screen dialog (the Tour button on any page) ───────── */
.promo-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; }
.promo-dialog::backdrop { background: rgba(8,24,20,.82); backdrop-filter: blur(6px); }
.promo-dialog .promo { height: 100%; }
.promo-dialog .promo-stage { height: 100dvh; max-height: none; }

@media (prefers-reduced-motion: reduce) {
  .promo-bg::before, .pe-strip > div { animation: none; }
}

/* ═══════════════════════ inside the tour: an app window ═══════════════════════ */
.promo .animal.pa { width: var(--a, 3em); height: var(--a, 3em); border-radius: calc(var(--a, 3em) * .32); flex: none; }
.pf { position: relative; width: min(100cqw, 160cqh); aspect-ratio: 16 / 10; display: grid; grid-template-rows: auto 1fr; color: var(--ink);
  background: var(--bg); border-radius: 14px; overflow: hidden; container: pfw / inline-size;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12); }
.pf-bar { display: flex; align-items: center; gap: 1.4cqw; height: 6cqw; padding: 0 1.8cqw; background: var(--paper); border-bottom: 1px solid var(--line); font-size: 1.35cqw; font-weight: 750; color: var(--muted); }
.pf-dots { display: flex; gap: .6cqw; }
.pf-dots i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--line); }
.pf-logo .pmark { display: block; width: 3.4cqw; height: 3.4cqw; padding: .55cqw; border-radius: 1cqw; background: var(--accent); fill: #fff; }
.pf-tabs { display: flex; gap: .4cqw; }
.pf-tabs span { padding: .8cqw 1.3cqw; border-radius: 999px; }
.pf-tabs span.on { background: var(--accent-tint); color: var(--accent-dark); }
.pf-sp { flex: 1; }
.pf-av { display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--sun); color: var(--ink); font-weight: 850; }
.pf-body { position: relative; min-height: 0; overflow: hidden; container-type: size; font-size: 1.62cqw; line-height: 1.35; }

/* shared pieces */
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: 1.1em; box-shadow: var(--shadow-sm); }
.pchip { display: inline-flex; align-items: center; gap: .3em; padding: .25em .7em; border-radius: 999px; background: var(--line-2); color: var(--ink-2); font-size: .78em; font-weight: 800; white-space: nowrap; }
.pchip .pi { width: 1.1em; height: 1.1em; }
.pchip.ok { background: var(--ok-tint); color: #1F5534; }
.pchip.warn { background: var(--coral-tint); color: #A63A22; }
.pi { width: 1.2em; height: 1.2em; flex: none; }
.plbl { display: inline-flex; align-items: center; gap: .4em; margin: 0; font-size: .78em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .65em 1.3em; border-radius: .8em; background: var(--accent); color: #fff; font-weight: 800; box-shadow: 0 .4em 1em -.4em rgba(31,111,92,.7); }
.pstamp { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: .35em; padding: .45em .9em; border: .18em solid var(--accent); border-radius: .6em; color: var(--accent); background: rgba(255,255,255,.92); font-size: 1.15em; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; opacity: 0; box-shadow: 0 .6em 1.4em -.6em rgba(0,0,0,.35); }
.pstamp .pi { width: 1.1em; height: 1.1em; stroke-width: 3; }
.phead { display: flex; align-items: center; gap: .8em; --a: 3.4em; }
.phead b { display: block; font-size: 1.35em; letter-spacing: -.02em; }
.phead span { display: block; color: var(--muted); font-size: .9em; }
.phead.sm { --a: 2.6em; } .phead.sm b { font-size: 1.05em; }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; flex: none; }
.dot.warn { background: #E8A93A; } .dot.bad { background: var(--coral); }
.typing::after { content: ""; display: inline-block; width: .08em; height: 1em; margin-left: .06em; vertical-align: -.12em; background: currentColor; animation: pt-caret .8s steps(1) infinite; }
@keyframes pt-caret { 50% { opacity: 0; } }
.pw { opacity: 0; }
.pdraw { stroke-dasharray: var(--L) var(--L); }

/* the pointer and the fingertip */
.pcur { position: absolute; left: 0; top: 0; z-index: 10; width: 2.4em; height: 2.4em; pointer-events: none; translate: calc(var(--cx, 96) * 1cqw - .25em) calc(var(--cy, 104) * 1cqh - .2em); }
.pcur svg { display: block; width: 100%; height: 100%; fill: var(--ink); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 .2em .3em rgba(0,0,0,.3)); }
.pcur i { position: absolute; left: -.9em; top: -.9em; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(31,111,92,.35); border: .12em solid var(--accent); opacity: 0; }
.pcur.tap { width: 2.6em; height: 2.6em; translate: calc(var(--cx, 96) * 1cqw - 1.3em) calc(var(--cy, 104) * 1cqh - 1.3em); border-radius: 50%; background: rgba(27,36,32,.22); border: .16em solid rgba(255,255,255,.95); box-shadow: 0 .3em .8em rgba(0,0,0,.25); }
.pcur.tap i { left: -.3em; top: -.3em; width: 3em; height: 3em; }

/* ───────── 00 · cold open: the paw, and every kind of pet around the title ───────── */
.pcold { position: absolute; inset: 0; }
.pcold-mark { position: absolute; left: 50%; top: 9%; translate: -50% 0; }
.pcold-mark svg { width: clamp(52px, 7cqw, 84px); height: auto; display: block; fill: var(--sun); stroke: var(--sun); stroke-width: .9; }
.pcold-t { position: absolute; opacity: 0; }
.pcold-t .animal { --a: clamp(48px, 7.4cqw, 92px); box-shadow: 0 1.2em 2em -1em rgba(0,0,0,.45); border: 3px solid rgba(255,255,255,.9); font-size: 14px; }
.pcold-t.t0 { left: 8%; top: 16%; } .pcold-t.t1 { left: 4%; top: 46%; } .pcold-t.t2 { left: 12%; top: 74%; }
.pcold-t.t3 { left: 26%; top: 84%; } .pcold-t.t4 { left: 47%; top: 86%; } .pcold-t.t5 { right: 26%; top: 84%; }
.pcold-t.t6 { right: 12%; top: 72%; } .pcold-t.t7 { right: 4%; top: 44%; } .pcold-t.t8 { right: 9%; top: 15%; }
@media (max-width: 820px), (max-aspect-ratio: 1/1) {
  .pcold-mark { top: 6%; }
  .pcold-t.t0 { left: 6%; top: 6%; } .pcold-t.t8 { right: 6%; top: 6%; } .pcold-t.t1 { left: 3%; top: 21%; } .pcold-t.t7 { right: 3%; top: 21%; }
  .pcold-t.t2 { left: 4%; top: 74%; } .pcold-t.t6 { right: 4%; top: 74%; } .pcold-t.t3 { left: 22%; top: 84%; } .pcold-t.t5 { right: 22%; top: 84%; } .pcold-t.t4 { left: calc(50% - 30px); top: 87%; }
}

/* ───────── 01 · add a pet ───────── */
.pg-add { position: absolute; inset: 0; display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.2em; padding: 1.3em 1.5em; }
.pform { position: relative; padding: 1em 1.2em; display: flex; flex-direction: column; gap: .62em; }
.pform h4 { margin: 0; font-size: 1.3em; font-weight: 850; letter-spacing: -.02em; }
.pkinds { display: flex; gap: .55em; --a: 2.6em; }
.pkind { padding: .2em; border-radius: 1.05em; border: .14em solid transparent; transition: border-color .2s, background-color .2s; }
.pkind.on { border-color: var(--accent); background: var(--accent-soft); }
.pfld { position: relative; display: flex; flex-direction: column; gap: .15em; padding: .42em .75em; min-height: 3em; border: .1em solid #D5D2CA; border-radius: .7em; background: var(--paper); transition: border-color .2s, box-shadow .2s; }
.pfld > span { font-size: .72em; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pfld b { min-height: 1.3em; font-weight: 650; white-space: nowrap; }
.pfld em { font-style: normal; font-size: .85em; color: var(--muted); }
.pfld.focus { border-color: var(--accent); box-shadow: 0 0 0 .25em var(--accent-tint); }
.prow { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.prow.soft .pfld { border-style: dashed; }
.pdd { position: absolute; z-index: 5; left: -.1em; right: -.1em; top: calc(100% + .3em); padding: .3em; border-radius: .8em; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; }
.pdd .opt { display: flex; justify-content: space-between; align-items: baseline; padding: .45em .65em; border-radius: .55em; font-weight: 650; }
.pdd .opt small { color: var(--muted); font-size: .8em; }
.pdd .o1 { background: var(--accent-soft); }
.pform .pbtn { align-self: flex-start; margin-top: .2em; }
.pprev { position: relative; padding: 1.2em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45em; text-align: center; }
.pflip { position: relative; width: 6.4em; height: 6.4em; margin-bottom: .4em; transform-style: preserve-3d; }
.pflip .face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 1.9em; backface-visibility: hidden; }
.pflip .q { background: var(--line-2); border: .14em dashed #CFC8BB; color: var(--muted); font-size: 2.6em; font-weight: 850; border-radius: .75em; }
.pflip .a { rotate: y 180deg; --a: 6.4em; }
.pv-name { font-size: 1.6em; letter-spacing: -.03em; }
.pv-sub { color: var(--muted); }
.pv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em; margin-top: .3em; }
.pv-chips .pchip { opacity: 0; }
.pprev .s-saved { right: 1em; bottom: 1em; }

/* ───────── 02 · the medical record ───────── */
.pg-rec { position: absolute; inset: 0; padding: 1.3em 1.6em; display: flex; flex-direction: column; gap: .9em; }
.pg-rec .phead .pchip { margin-left: auto; }
.psub { display: flex; gap: .3em; border-bottom: 1px solid var(--line); }
.psub span { padding: .45em .9em; font-weight: 750; color: var(--muted); border-bottom: .18em solid transparent; }
.psub .on { color: var(--accent-dark); border-color: var(--accent); }
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; flex: 1; min-height: 0; }
.rc { position: relative; padding: 1em 1.1em; display: flex; flex-direction: column; gap: .3em; opacity: 0; }
.rc-k { display: flex; align-items: center; gap: .4em; font-size: .75em; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: .2em; }
.rc b { font-size: 1.4em; letter-spacing: -.02em; }
.rc > span:not(.rc-k):not(.pchip):not(.pdue) { color: var(--muted); }
.rc .pchip { align-self: flex-start; margin-top: auto; }
.rc.alert { background: var(--coral-tint); border-color: #F6C3B4; border-left: .35em solid var(--coral); }
.rc.alert .rc-k { color: #A63A22; }
.pdue { margin-top: auto; display: flex; align-items: center; gap: .6em; }
.pdue svg { width: 3em; height: 3em; rotate: -90deg; }
.pdue circle { fill: none; stroke-width: 4.5; }
.pdue .t { stroke: var(--line-2); }
.pdue .v { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: calc(var(--v, 0) * 94.25) 94.25; }
.pdue i { font-style: normal; font-size: .8em; font-weight: 800; color: var(--ink-2); line-height: 1.15; }
.pcontact { display: flex; align-items: center; gap: .9em; padding: .8em 1.1em; opacity: 0; }
.pcontact > .pi { width: 1.8em; height: 1.8em; padding: .35em; border-radius: .6em; background: var(--accent-tint); color: var(--accent-dark); }
.pcontact b { display: block; } .pcontact span { color: var(--muted); font-size: .9em; }
.ptel { margin-left: auto; padding: .2em .6em; border-radius: .5em; font-weight: 800; color: var(--ink) !important; }

/* ───────── 03 · the phone ───────── */
.pphone { position: relative; container-type: size; height: min(100cqh, 205cqw); aspect-ratio: 9 / 18.5; padding: 2.4%; border-radius: 13% / 6.4%; background: linear-gradient(160deg, #2B3632, #121A17); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), inset 0 0 0 1.5px rgba(255,255,255,.1); }
.pphone::before { content: ""; position: absolute; top: 3.2%; left: 50%; width: 26%; height: 2.6%; translate: -50% 0; border-radius: 999px; background: #0B110F; z-index: 3; }
.pphone-scr { position: relative; height: 100%; overflow: hidden; border-radius: 10.5% / 5.2%; background: var(--bg); container-type: size; font-size: 5.3cqw; line-height: 1.3; color: var(--ink); padding: 17% 6% 6%; display: flex; flex-direction: column; gap: .9em; }
.ph-bar { position: absolute; top: 2.6%; left: 10%; right: 10%; display: flex; justify-content: space-between; font-size: .75em; }
.ph-head { display: flex; align-items: center; gap: .6em; --a: 2.6em; }
.ph-head b { display: block; font-size: 1.2em; } .ph-head span { color: var(--muted); font-size: .85em; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.qb { display: flex; flex-direction: column; align-items: center; gap: .3em; padding: .7em .2em; border-radius: .9em; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: .82em; font-weight: 750; }
.qb .pi { width: 1.7em; height: 1.7em; color: var(--accent); }
.qb i { font-style: normal; }
.qb.b-vomit .pi { color: var(--coral); }
.qb.b-energy .pi { color: #D99A1E; }
.ph-h { display: flex; justify-content: space-between; margin: .3em 0 0; font-weight: 850; font-size: .9em; }
.ph-n { color: var(--muted); font-weight: 700; }
.ph-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: .45em; }
.ph-log li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55em; padding: 0 .75em; max-height: 0; opacity: 0; overflow: hidden; border-radius: .8em; background: var(--paper); border: 1px solid transparent; font-size: .86em; font-weight: 650; transition: max-height .45s cubic-bezier(.3,.7,.2,1), opacity .4s, padding .45s; }
.ph-log li.in { max-height: 4em; opacity: 1; padding: .7em .75em; border-color: var(--line); }
.ph-log small { color: var(--muted); font-size: .85em; white-space: nowrap; }
.ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 1.1em 1.2em 1.6em; border-radius: 1.4em 1.4em 0 0; background: var(--paper); box-shadow: 0 -1em 2em -1em rgba(0,0,0,.3); translate: 0 105%; }
.ph-sheet p { margin: 0 0 .7em; font-weight: 850; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.seg span { text-align: center; padding: .6em 0; border-radius: .7em; background: var(--line-2); font-weight: 750; transition: background-color .2s, color .2s; }
.seg span.on { background: var(--accent); color: #fff; }
.ph-toast { position: absolute; left: 50%; bottom: 5%; z-index: 5; display: inline-flex; align-items: center; gap: .35em; padding: .45em .9em; border-radius: 999px; background: var(--ink); color: #fff; font-size: .82em; font-weight: 800; opacity: 0; translate: -50% 0; }
.ph-toast .pi { width: 1.1em; height: 1.1em; stroke: var(--sun); stroke-width: 3; }

/* ───────── 04 · the weight chart ───────── */
.pg-chart { position: absolute; inset: 0; padding: 1.2em 1.6em .9em; display: grid; grid-template-rows: auto 1fr auto; gap: .4em; }
.pc-top { display: flex; align-items: flex-end; gap: 1.2em; }
.pc-big { display: block; font-size: 2.9em; font-weight: 850; letter-spacing: -.04em; line-height: 1; margin-top: .1em; font-variant-numeric: tabular-nums; }
.pc-big small { font-size: .45em; color: var(--muted); letter-spacing: 0; }
.pdelta { position: relative; margin-bottom: .4em; padding: .35em .8em; border-radius: .6em; background: var(--coral-tint); color: #A63A22; border: .14em solid var(--coral); font-weight: 900; opacity: 0; }
.ptoggle { --k: 0; position: relative; margin: 0 0 .4em auto; display: grid; grid-template-columns: 1fr 1fr; width: 6em; padding: .2em; border-radius: 999px; background: var(--line-2); font-weight: 850; font-size: .9em; }
.ptoggle i { position: relative; z-index: 1; font-style: normal; text-align: center; padding: .3em 0; color: var(--muted); transition: color .2s; }
.ptoggle i.on { color: #fff; }
.ptoggle b { position: absolute; top: .2em; bottom: .2em; left: .2em; width: calc(50% - .2em); border-radius: 999px; background: var(--accent); translate: calc(var(--k) * 100%) 0; }
.pc-plot { position: relative; min-height: 0; }
.pc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.pc-grid { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 6; }
.pc-ax { fill: var(--muted); font-size: 17px; font-weight: 700; font-family: var(--f-body); }
.pc-area { fill: rgba(31,111,92,.12); }
.pc-line { fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; }
.pc-dot { fill: #fff; stroke: var(--accent); stroke-width: 3.5; transform-box: fill-box; transform-origin: center; }
.pc-dot.last { fill: var(--coral); stroke: #fff; stroke-width: 4; }
.pc-note { display: flex; align-items: center; gap: .5em; padding: .55em .9em; border-radius: .8em; background: var(--sun-soft); font-weight: 700; color: var(--ink-2); opacity: 0; }
.pc-note .pi { color: #C98A0E; }

/* ───────── 05 · the vet summary ───────── */
.pg-sum { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 2.6fr; gap: 1.2em; padding: 1.2em 1.4em; }
.ps-side { display: flex; flex-direction: column; gap: 1em; padding-top: .4em; }
.pbtn.vet { align-self: stretch; padding: .9em 1em; font-size: 1.05em; }
.ps-hint { align-self: center; font-size: .78em; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ps-doc { position: relative; overflow: hidden; border-radius: 1em; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); clip-path: inset(0 100% 0 0); }
.ps-scroll { --sy: 0; padding: 1.1em 1.3em; display: flex; flex-direction: column; gap: .75em; translate: 0 calc(var(--sy) * -6.5em); }
.ps-h { display: flex; align-items: center; gap: .8em; --a: 3em; padding-bottom: .7em; border-bottom: 1px solid var(--line); }
.ps-h b { font-size: 1.35em; display: block; } .ps-h div span { color: var(--muted); font-size: .8em; }
.ps-date { margin-left: auto; text-align: right; font-size: .72em; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.ps-alert { display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1.1em; padding: .7em 1em; border-radius: .8em; background: var(--coral-tint); border-left: .35em solid var(--coral); clip-path: inset(0 100% 0 0); }
.ps-alert b { display: flex; align-items: center; gap: .35em; width: 100%; color: #A63A22; text-transform: uppercase; font-size: .78em; letter-spacing: .08em; }
.ps-sec { opacity: 0; }
.ps-sec h5 { margin: 0 0 .35em; font-size: .78em; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.ps-sec p { margin: 0; color: var(--ink-2); }
.ps-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1em; align-items: center; }
.ps-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; }
.ps-cols li { display: flex; align-items: center; gap: .5em; opacity: 0; }
.ps-cols li small { margin-left: auto; color: var(--muted); }
.ps-spark { padding: .6em .8em; border-radius: .8em; background: var(--line-2); }
.ps-spark svg { display: block; width: 100%; height: 2.6em; overflow: visible; }
.ps-spark path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.ps-spark span { display: block; margin-top: .2em; font-size: .78em; font-weight: 850; color: #A63A22; }
.ps-foot { margin: .2em 0 0; padding-top: .6em; border-top: 1px dashed var(--line); font-size: .72em; color: var(--muted); opacity: 0; }
.pg-sum .s-ready { right: 2em; bottom: 1.6em; }

/* ───────── 06 · four ways to share ───────── */
.pg-share { position: absolute; inset: 0; padding: 1.2em 1.4em; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .9em; }
.sh { position: relative; display: grid; grid-template-rows: 1fr auto; padding: .8em .9em; opacity: 0; transition: border-color .3s, box-shadow .3s, background-color .3s; }
.sh.lit { border-color: var(--accent); box-shadow: 0 0 0 .22em var(--accent-tint), var(--shadow); }
.sh-l { display: flex; align-items: center; gap: .45em; font-weight: 800; }
.sh-l .pi { color: var(--accent); }
.sh-art { position: relative; display: grid; place-items: center; min-height: 0; margin-bottom: .5em; border-radius: .8em; background: var(--line-2); perspective: 600px; overflow: hidden; }
/* show */
.mini-ph { width: 5.6em; height: 7.6em; padding: .3em; border-radius: .9em; background: #1E2724; }
.mp-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.mp-a, .mp-b { position: absolute; inset: 0; border-radius: .65em; backface-visibility: hidden; }
.mp-a { background: var(--bg); padding: .5em; display: flex; flex-direction: column; gap: .35em; }
.mp-a i, .prn-paper i, .env-letter i { display: block; height: .32em; border-radius: 1em; background: #DDD6CA; }
.mp-a i.s, .prn-paper i.s, .env-letter i.s { width: 60%; }
.mp-b { rotate: y 180deg; background: #fff; padding: .45em; display: flex; flex-direction: column; justify-content: center; gap: .1em; text-align: center; }
.mp-b b { font-size: .55em; color: #A63A22; letter-spacing: .08em; }
.mp-b span { font-size: .9em; font-weight: 900; line-height: 1.1; color: var(--ink); }
/* print */
.prn { position: relative; width: 8em; height: 6.6em; }
.prn-slot { position: absolute; left: 0; right: 0; top: 0; height: 1.6em; border-radius: .5em; background: #3A4642; z-index: 2; }
.prn-paper { position: absolute; left: 1em; right: 1em; top: 1.2em; perspective: 500px; }
.pp-top, .pp-bot { background: #fff; padding: .45em; box-shadow: 0 .2em .5em -.2em rgba(0,0,0,.2); display: flex; flex-direction: column; gap: .3em; border: 1px solid var(--line); }
.pp-top { transform-origin: 50% 100%; border-radius: .2em .2em 0 0; }
.pp-bot { border-radius: 0 0 .2em .2em; border-top: 1px dashed var(--line); }
.prn-paper i.c { background: var(--coral); opacity: .7; }
/* email */
.env { position: relative; width: 7.4em; height: 4.8em; margin-top: 1em; }
.env-back { position: absolute; inset: 0; border-radius: .4em; background: var(--accent-tint); border: .12em solid var(--accent); z-index: 2; clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); }
.env-letter { position: absolute; left: .7em; right: .7em; top: .4em; height: 3.6em; padding: .5em; background: #fff; border: 1px solid var(--line); border-radius: .2em; z-index: 1; display: flex; flex-direction: column; gap: .35em; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 55%; z-index: 3; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; }
.env-ok { position: absolute; left: 50%; top: calc(100% + .45em); translate: -50% 0; display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; font-size: .78em; font-weight: 850; color: var(--ok); opacity: 0; }
/* link */
.sh-art.lk { grid-template-columns: minmax(0, 1fr) auto; gap: .8em; align-items: center; justify-items: start; padding: 0 .8em; }
.lk-url { display: flex; align-items: center; gap: .4em; width: 100%; background: #fff !important; text-overflow: ellipsis; padding: .45em .65em; border-radius: .6em; background: var(--line-2); font-size: .8em; font-weight: 750; white-space: nowrap; overflow: hidden; }
.lk-url .pi { color: var(--accent); }
.lk-qr .qr { display: block; width: 5.6em; height: 5.6em; fill: var(--ink); }
.lk-qr { clip-path: inset(0 0 100% 0); }
.qr .qr-bg { fill: #fff; stroke: var(--line); stroke-width: .15; }
.lk-cancel { position: absolute; left: .8em; bottom: .5em; padding: .25em .7em; border-radius: .5em; border: .1em solid var(--line); font-size: .72em; font-weight: 800; color: var(--muted); opacity: 0; }
.s-exp { left: 1.6em; top: 2.3em; font-size: .78em; border-color: var(--coral); color: #A63A22; }

/* ───────── 07 · compare ───────── */
.pg-cmp { position: absolute; inset: 0; padding: 1.3em 1.6em; display: flex; flex-direction: column; gap: .9em; }
.cm-opt { display: flex; align-items: center; gap: 1em; padding: .9em 1.1em; opacity: 0; }
.pswitch { --k: 0; position: relative; margin-left: auto; width: 3.6em; height: 2em; border-radius: 999px; background: color-mix(in srgb, var(--accent) calc(var(--k) * 100%), #CFC8BB); flex: none; }
.pswitch b { position: absolute; top: .22em; left: .22em; width: 1.56em; height: 1.56em; border-radius: 50%; background: #fff; box-shadow: 0 .1em .3em rgba(0,0,0,.25); translate: calc(var(--k) * 1.6em) 0; }
.cm-res { flex: 1; padding: 1.3em 1.5em; display: grid; align-content: center; gap: 1.5em; opacity: 0; font-size: 1.12em; }
.cm-g { margin: 0 0 .2em; font-weight: 750; color: var(--ink-2); }
.cm-g b { color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.pmeter { display: grid; grid-template-columns: 7em 1fr 12em; align-items: center; gap: 1em; opacity: 0; }
.pm-l { font-weight: 800; }
.pm-bar { position: relative; height: 1em; border-radius: 999px; background: var(--line-2); }
.pm-r { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 100%); right: calc(var(--r) * 100%); border-radius: 999px; background: linear-gradient(90deg, var(--accent-tint), #BFE0D3, var(--accent-tint)); transform-origin: 50% 50%; }
.pm-m { position: absolute; top: 50%; left: calc(var(--m) * 100%); width: 1.35em; height: 1.35em; margin: -.675em 0 0 -.675em; border-radius: 50%; background: var(--accent); border: .2em solid #fff; box-shadow: 0 .15em .4em rgba(27,36,32,.3); }
.pm-v { font-size: .9em; color: var(--muted); opacity: 0; }
.cm-foot { display: flex; align-items: center; gap: .5em; margin: 0; font-size: .85em; font-weight: 750; color: var(--ink-2); opacity: 0; }
.cm-foot .pi { color: var(--accent); }
.cm-foot em { margin-left: auto; font-style: normal; font-size: .85em; color: var(--muted); }

/* ───────── 08 · yours ───────── */
.pg-yours { position: absolute; inset: 0; font-size: 1.15em; padding: 1.2em 1.5em; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.4em; align-items: center; }
.hh { position: relative; padding: 1em 1.1em; display: grid; gap: .55em; opacity: 0; }
.hh-t { display: flex; align-items: center; gap: .45em; margin: 0 0 .2em; font-weight: 850; }
.hh-t .pi { color: var(--accent); }
.hh-pet { display: flex; align-items: center; gap: .75em; padding: .45em .6em; border-radius: .8em; --a: 2.5em; opacity: 0; }
.hh-pet b { display: block; } .hh-pet span { font-size: .85em; color: var(--muted); }
.hh-lock { position: absolute; right: .9em; top: .8em; width: 3.4em; padding: .55em; border-radius: 1em; background: var(--accent); opacity: 0; }
.hh-lock svg { display: block; width: 100%; height: auto; overflow: visible; }
.hh-lock path, .hh-lock rect, .hh-lock circle { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.hh-lock .lk-b { fill: rgba(255,255,255,.18); }
.hh-only { justify-self: start; opacity: 0; }
.yfile { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .3em .9em; padding: 1em 1.1em; border-radius: 1.1em; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; }
.yf-i { position: relative; display: grid; place-items: center; width: 3em; height: 3.6em; color: var(--accent); }
.yf-i .pi { width: 100%; height: 100%; stroke-width: 1.4; }
.yf-i b { position: absolute; bottom: .55em; font-size: .62em; padding: .05em .35em; border-radius: .3em; background: var(--accent); color: #fff; }
.yfile b { display: block; font-size: .95em; overflow-wrap: anywhere; } .yfile div span { font-size: .85em; color: var(--muted); }
.yf-st { display: inline-flex; align-items: center; gap: .35em; justify-self: start; padding: .3em .7em; border-radius: 999px; background: var(--ok-tint); color: #1F5534; font-size: .85em; font-weight: 850; opacity: 0; }
.yf-sts { grid-column: 1 / -1; display: grid; } .yf-sts > * { grid-area: 1 / 1; }
.pg-yours .s-free { right: 1.6em; bottom: 1.4em; font-size: 1.4em; border-color: var(--sun); background: var(--sun); color: var(--ink); }

/* starting states: everything that arrives later starts hidden (or folded, or out of place) */
.pg-add > .pcard, .pg-rec .phead, .psub, .pc-top, .pc-dot, .pc-area, .ps-side, .ps-h, .pm-m { opacity: 0; }
.pm-r { scale: 0 1; }
.prn { overflow: hidden; }
.prn-paper { translate: 0 -100%; }
.pp-top { rotate: x -180deg; }
.env-letter { translate: 0 -70%; }
.env-flap { rotate: x 180deg; }

/* ═══════════════════════ phones: a square app window, bigger text, one column ═══════════════════════ */
@media (max-width: 820px), (max-aspect-ratio: 1/1) {
  .pf { width: min(100cqw, 100cqh); aspect-ratio: 1 / 1; border-radius: 12px; }
  .pf-bar { height: 9cqw; font-size: 2.4cqw; }
  .pf-dots { display: none; }
  .pf-logo .pmark { width: 5.4cqw; height: 5.4cqw; }
  .pf-av { width: 5.4cqw; height: 5.4cqw; }
  .pf-body { font-size: 2.55cqw; }
}
@container pfw (max-width: 560px) {
  .pg-add { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: .7em; padding: .9em 1em; }
  .pprev { order: -1; flex-direction: row; justify-content: flex-start; gap: .9em; padding: .55em .8em; text-align: left; }
  .pflip { width: 3.2em; height: 3.2em; margin: 0; }
  .pflip .a { --a: 3.2em; } .pflip .q { font-size: 1.4em; }
  .pv-name { font-size: 1.25em; }
  .pv-chips { display: none; }
  .pprev .s-saved { right: .7em; bottom: auto; top: .6em; font-size: .95em; }
  .pform { padding: .7em .9em; gap: .5em; }
  .pg-rec { padding: .9em 1em; gap: .65em; }
  .pg-rec .phead .pchip { display: none; }
  .pcards { grid-template-columns: 1fr; gap: .55em; flex: none; }
  .rc { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .15em .7em; padding: .55em .8em; }
  .rc-k { width: 100%; margin: 0; }
  .rc b { font-size: 1.15em; }
  .rc .pchip, .rc .pdue { margin: 0 0 0 auto; }
  .pdue svg { width: 2.2em; height: 2.2em; }
  .pcontact { padding: .6em .8em; }
  .pg-chart { padding: .9em 1em .7em; }
  .pc-top { flex-wrap: wrap; gap: .3em .8em; }
  .pg-sum { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: .7em; padding: .9em 1em; }
  .ps-side { flex-direction: row; align-items: center; justify-content: space-between; padding: 0; }
  .ps-hint { display: none; }
  .pbtn.vet { align-self: auto; padding: .6em 1em; }
  .ps-cols { grid-template-columns: 1fr; gap: .5em; }
  .ps-scroll { translate: 0 calc(var(--sy) * -5.4em); gap: .6em; }
  .ps-spark svg { height: 1.8em; }
  .pg-sum .s-ready { right: 1em; bottom: 1em; }
  .pg-share { padding: .9em 1em; gap: .6em; }
  .sh { padding: .6em .7em; font-size: .92em; }
  .pg-cmp { padding: .9em 1em; gap: .7em; }
  .cm-res { padding: 1em; gap: 1.1em; font-size: 1em; }
  .pmeter { grid-template-columns: 6.5em 1fr; gap: .3em .8em; }
  .pm-v { grid-column: 1 / -1; }
  .pg-yours { grid-template-columns: 1fr; align-content: center; gap: .9em; padding: .9em 1em; font-size: 1em; }
  .pg-yours .s-free { right: 1em; bottom: 1em; font-size: 1.2em; }
}