/* Scale: every px value and the root font size are 1.1x the original design (Teo found 100% too small,
   2026-10-07); hairlines of 2px or less were left alone. Breakpoints scaled too, so layouts switch where
   they would under 110% browser zoom. */
/* beaupet.app: brand tokens mirror the app (src/lib/theme.ts), terracotta accent.
   Accent text and button colours are darkened from the app's #b2654a so small
   text and white-on-accent buttons meet WCAG AA contrast on cream. */

@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #f4f0e8;
  --panel: #ffffff;
  --elev: #fbf9f5;
  --fg: #1a1612;
  --soft: #5c544c;
  --muted: #72685e;
  --line: #e4ddd2;
  --line-strong: #d6cdbf;
  --accent: #b2654a;
  --accent-ink: #9a533a;
  --btn: #a35a40;
  --btn-hover: #8f4d37;
  --btn-fg: #ffffff;
  --high: #b23a2e;
  --medium: #b88a3a;
  --contours: url("/img/contours-light.webp");
  --contour-ink: rgba(178, 101, 74, 0.26);
  --shadow: 0 26.4px 66px rgba(60, 40, 30, 0.14), 0 4.4px 15.4px rgba(60, 40, 30, 0.06);
  --radius: 24.2px;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14120f;
    --panel: #1d1a16;
    --elev: #24201b;
    --fg: #efeae2;
    --soft: #c3baae;
    --muted: #a3988c;
    --line: #2e2a24;
    --line-strong: #3d372f;
    --accent: #d48a6e;
    --accent-ink: #e09c80;
    --btn: #d48a6e;
    --btn-hover: #e09c80;
    --btn-fg: #1a1612;
    --high: #e0705f;
    --medium: #d6a65e;
    --contours: url("/img/contours-dark.webp");
    --contour-ink: rgba(212, 138, 110, 0.16);
    --shadow: 0 26.4px 66px rgba(0, 0, 0, 0.45), 0 4.4px 15.4px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
html { font-size: 110%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 18.7px; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-ink); text-underline-offset: 3.3px; }
a:hover { color: var(--btn-hover); }
/* No blue flash when tapping on phones; keyboard focus rings below still show. */
html, *, *::before, *::after { -webkit-tap-highlight-color: transparent; }
summary, button { -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 3.3px solid var(--accent); outline-offset: 3.3px; border-radius: 6.6px; }

.wrap { width: min(1232px, 100% - 35.2px); margin-inline: auto; }
.narrow { width: min(836px, 100% - 35.2px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8.8px; background: var(--panel); padding: 8.8px 15.4px; border-radius: 11px; z-index: 50; }
.skip:focus { left: 17.6px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.28rem); color: var(--soft); max-width: 36em; }
.eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 15.4px; }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(15.4px); -webkit-backdrop-filter: saturate(1.4) blur(15.4px); border-bottom: 1px solid transparent; }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 74.8px; gap: 17.6px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--fg); text-decoration: none; font-family: var(--serif); font-size: 1.45rem; }
.brand img { width: 39.6px; height: 39.6px; border-radius: 11px; }
.head-actions { display: flex; align-items: center; gap: 6.6px; }
.head-link { color: var(--soft); text-decoration: none; font-size: 0.95rem; padding: 8.8px 13.2px; border-radius: 1098.9px; }
.head-link:hover { color: var(--fg); background: var(--elev); }
.site-header .btn-sm { color: var(--btn-fg); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 11px; font: 600 1rem/1 var(--sans); text-decoration: none; border-radius: 1098.9px; padding: 17.6px 28.6px; border: 1px solid transparent; transition: background 0.15s, transform 0.15s; }
.btn-primary { background: var(--btn); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-hover); color: var(--btn-fg); transform: translateY(-1px); }
.btn-ghost { color: var(--fg); border-color: var(--line-strong); background: transparent; }
.btn-ghost:hover { background: var(--elev); color: var(--fg); }
.btn-sm { padding: 11px 19.8px; font-size: 0.92rem; }
.btn svg { width: 19.8px; height: 19.8px; flex: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 13.2px; align-items: center; margin-top: 30.8px; }
.cta-note { font-size: 0.9rem; color: var(--muted); margin-top: 15.4px; }

/* Sections */
section { padding: clamp(70.4px, 9vw, 132px) 0; }
/* Contour lines: a static image that fades out at both edges (no hard line). The
   live canvas (site.js) replaces it when JS runs and fades the same way. */
.contours { position: relative; isolation: isolate; }
.contours::before { content: ""; position: absolute; inset: -40px 0 -160px; z-index: -1; background: var(--contours) center / cover; -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 55%, transparent); mask-image: linear-gradient(transparent, #000 15%, #000 55%, transparent); pointer-events: none; }
.js-contours .contours::before { display: none; }
#contour-canvas { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; }
main, .site-footer { position: relative; }
[data-chapter] { scroll-margin-top: 83.6px; }
.center { text-align: center; }
.center .lead, .final .lead { margin-inline: auto; }
.center h2 { max-width: 22em; margin-inline: auto; text-wrap: balance; }
.center .cta-row, .final .cta-row { justify-content: center; }
.page-head + section { padding-top: 17.6px; }
.left { text-align: left; }
.mt-s { margin-top: 15.4px; }
.mt-m { margin-top: 24.2px; }

/* Hero */
.hero { padding-top: clamp(44px, 6vw, 88px); padding-bottom: clamp(52.8px, 7vw, 105.6px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(35.2px, 5vw, 79.2px); align-items: center; }
.hero-art { position: relative; justify-self: center; width: min(440px, 100%); }
.hero-art .phone { width: 70%; margin-left: auto; }
.hero-art .lineart { position: absolute; left: -16%; bottom: 3%; width: 44%; color: var(--fg); opacity: 0.9; }
@media (max-width: 946px) { .hero-art .lineart { left: -4%; width: 34%; } }
@media (max-width: 946px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { width: min(374px, 100%); } }

.phone { border-radius: 37.4px; box-shadow: var(--shadow); background: var(--panel); }

/* Trust strip */
.trust { margin-top: 39.6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.trust div { background: var(--panel); padding: 24.2px 24.2px 22px; }
.trust strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.12rem; margin-bottom: 4.4px; }
.trust span { color: var(--soft); font-size: 0.93rem; }
@media (max-width: 946px) { .trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 572px) { .trust { grid-template-columns: 1fr; } }

/* Urgency levels */
.levels-inline { list-style: none; padding: 0; margin: 4.4px 0 19.8px; display: flex; flex-wrap: wrap; gap: 8.8px; }
.levels-inline .pill { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 9.9px; border: 1.5px solid var(--line-strong); border-radius: 1098.9px; padding: 6.6px 15.4px; font-weight: 500; font-size: 0.92rem; color: var(--soft); background: var(--panel); margin-bottom: 15.4px; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.dot.medium { background: var(--medium); }
.dot.high { background: var(--high); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(264px, 1fr)); gap: 17.6px; margin-top: 35.2px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26.4px; }
.card h3 { font-size: 1.2rem; }
.card p { color: var(--soft); margin: 0; font-size: 0.97rem; }

/* Plans */
.billing-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 1098.9px; padding: 4.4px; margin: 26.4px 0 8.8px; background: var(--panel); }
.billing-toggle button { font: 500 0.95rem var(--sans); border: 0; background: none; color: var(--soft); padding: 9.9px 19.8px; border-radius: 1098.9px; cursor: pointer; }
.billing-toggle button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17.6px; margin-top: 26.4px; text-align: left; }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30.8px; display: flex; flex-direction: column; }
.plan.featured { border: 2px solid var(--accent); }
.plan h3 { font-size: 1.5rem; margin-bottom: 4.4px; }
.plan .price { font-family: var(--serif); font-size: 2.3rem; line-height: 1.1; margin: 11px 0 2px; }
.plan .per { color: var(--muted); font-size: 0.9rem; min-height: 1.5em; }
.plan ul { list-style: none; padding: 0; margin: 19.8px 0 0; display: grid; gap: 9.9px; }
.plan li { display: grid; grid-template-columns: 19.8px 1fr; gap: 11px; color: var(--soft); font-size: 0.96rem; }
.plan li::before { content: "\2713"; color: var(--accent-ink); font-weight: 600; }
.plan li.no::before { content: "\00B7"; color: var(--muted); }
.plan .badge { align-self: flex-start; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--btn); color: var(--btn-fg); padding: 4.4px 11px; border-radius: 1098.9px; margin-bottom: 13.2px; }
@media (max-width: 946px) { .plans { grid-template-columns: 1fr; } }

/* FAQ: tappable cards, two columns on wide screens. */
.faq { margin-top: 30.8px; display: grid; grid-template-columns: 1fr 1fr; gap: 13.2px; align-items: start; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 19.8px; transition: border-color 0.15s, box-shadow 0.15s; }
.faq details:hover { border-color: var(--line-strong); }
.faq details[open] { box-shadow: 0 8.8px 30.8px rgba(60, 40, 30, 0.08); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 66px 22px 24.2px; position: relative; font-weight: 600; font-size: 1.04rem; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 28.6px; height: 28.6px; margin-top: -13px; border-radius: 50%; background: var(--elev) no-repeat center / 13.2px; border: 1px solid var(--line); }
.faq summary::before { content: "+"; position: absolute; right: 22px; top: 50%; width: 30.8px; margin-top: -0.75em; text-align: center; font-weight: 500; color: var(--soft); z-index: 1; line-height: 1.5; }
.faq summary::before { transition: transform 0.25s ease; }
.faq details[open]:not(.closing) summary::before { transform: rotate(45deg); }
.faq .answer { transition: opacity 0.25s ease; }
.faq details.closing .answer { opacity: 0; }
.faq .answer { color: var(--soft); padding: 0 24.2px 22px; }
.faq .answer p:last-child { margin-bottom: 0; }
@media (width < 836px) { .faq { grid-template-columns: 1fr; } }

/* Prose (legal, press) */
.prose { font-size: 1.02rem; }
.prose h2 { font-size: 1.6rem; margin-top: 2em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6em; }
.prose p, .prose li { color: var(--soft); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose ul { padding-left: 1.2em; }
.page-head { padding: clamp(52.8px, 7vw, 96.8px) 0 clamp(26.4px, 4vw, 44px); }

table.facts { width: 100%; border-collapse: collapse; margin: 19.8px 0; font-size: 0.97rem; }
table.facts th, table.facts td { text-align: left; padding: 13.2px 15.4px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.facts th { width: 34%; color: var(--muted); font-weight: 500; }

.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 15.4px; margin-top: 22px; }
.downloads a { display: block; text-decoration: none; color: var(--soft); font-size: 0.86rem; }
.downloads img { border-radius: 15.4px; border: 1px solid var(--line); margin-bottom: 8.8px; background: var(--panel); }

/* Final CTA */
.final { text-align: center; }
.final .lineart { width: 176px; margin: 0 auto 26.4px; color: var(--fg); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 52.8px 0 44px; font-size: 0.92rem; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30.8px; }
.site-footer .foot-h { font: 600 0.78rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 13.2px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8.8px; }
.site-footer a { color: var(--soft); text-decoration: none; }
.site-footer a:hover { color: var(--fg); text-decoration: underline; }
.disclaimer { margin-top: 39.6px; padding-top: 24.2px; border-top: 1px solid var(--line); font-size: 0.85rem; line-height: 1.6; max-width: 70em; }
@media (max-width: 836px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* Referral */
.code { display: inline-block; font: 600 clamp(1.6rem, 6vw, 2.4rem)/1 var(--sans); letter-spacing: 0.12em; padding: 19.8px 28.6px; border: 2px dashed var(--line-strong); border-radius: 19.8px; background: var(--panel); margin: 11px 0 6.6px; }

/* Reveal on scroll (progressive: content is visible without JS) */
.js .reveal { opacity: 0; transform: translateY(17.6px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* Chapter rail (home, wide screens): text labels, a line that fills as you read,
   the current chapter highlighted. Phones get the chapter name in the header. */
.rail { display: none; }
.chapter-now { display: none; }
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.read-progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (width >= 1298px) {
  .js .has-rail main, .js .has-rail .site-footer { padding-left: 209px; }
  .js .has-rail .site-header .wrap { width: calc(100% - 70.4px); max-width: none; }
  .js .rail { display: block; position: fixed; left: 35.2px; top: 50%; transform: translateY(-50%); z-index: 15; }
  .rail ol { list-style: none; margin: 0; padding: 0 0 0 24.2px; position: relative; }
  .rail ol::before { content: ""; position: absolute; left: 4.4px; top: 15.4px; bottom: 15.4px; width: 2px; border-radius: 2px; background: var(--line); }
  .rail-fill { position: absolute; left: 4.4px; top: 15.4px; width: 2px; border-radius: 2px; height: calc((100% - 30.8px) * var(--p, 0)); background: var(--accent); }
  .rail a { display: block; position: relative; padding: 5.5px 11px 5.5px 4.4px; color: var(--muted); text-decoration: none; font-size: 0.9rem; line-height: 1.4; transition: color 0.2s; }
  .rail a::before { content: ""; position: absolute; left: -22px; top: 50%; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); box-sizing: border-box; transition: background 0.2s, border-color 0.2s, transform 0.2s; z-index: 1; }
  .rail a:hover { color: var(--fg); }
  .rail a.passed::before { border-color: var(--accent); }
  .rail a.active { color: var(--fg); font-weight: 600; }
  .rail a.active::before { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
  .has-rail .read-progress { display: none; }
}
@media (width < 1298px) {
  .js .chapter-now { display: block; flex: 1; text-align: center; font-size: 0.88rem; font-weight: 500; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.2s; }
}
@media (max-width: 462px) { .brand { font-size: 1.25rem; } .brand img { width: 33px; height: 33px; } }

/* Why Beau: the worry, then what Beau brings. Sized to fit one desktop screen. */
.why { padding-block: clamp(40px, 4vw, 64px); }
.why-quote { max-width: 946px; }
.why-quote h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; text-wrap: balance; }
.why-quote .lead { margin-bottom: 0; }
.why-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13.2px; margin-top: 35.2px; }
.why-points > div { background: var(--panel); border: 1px solid var(--line); border-radius: 19.8px; padding: 19.8px 22px; }
.why-points h3 { font-size: 1.12rem; margin-bottom: 4.4px; }
.why-points p { color: var(--soft); margin: 0; font-size: 0.93rem; line-height: 1.5; }
@media (width < 1210px) { .why-points { grid-template-columns: 1fr 1fr; } }
@media (width < 660px) { .why-points { grid-template-columns: 1fr; } }
.why-close { margin: 26.4px 0 0; font-size: clamp(1.05rem, 1.6vw, 1.18rem); color: var(--soft); max-width: 52em; }
.why-close strong { color: var(--fg); font-family: var(--serif); font-weight: 500; font-size: 1.15em; }

/* Story (wide screens): steps scroll past a pinned phone whose screen follows the step in view. */
.story { padding-top: 0; }
.story-grid { --dev-w: min(319px, (100vh - 154px) * 0.48); display: grid; grid-template-columns: 1fr auto; gap: clamp(35.2px, 6vw, 105.6px); }
.step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; max-width: 34em; }
.step:first-child { min-height: 80vh; }
.step h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.story-stage { position: sticky; top: calc(74.8px + (100vh - 74.8px - var(--dev-w) * 2.06) / 2); align-self: start; width: var(--dev-w); margin-top: 6vh; }
.step-phone { display: none; }
/* Phones and narrow windows: no pinned phone; each step shows its own full-size phone under its text. */
@media (width < 990px) {
  .story-grid { grid-template-columns: 1fr; gap: 0; }
  .story-stage { display: none; }
  .step, .step:first-child { min-height: 0; padding: clamp(36px, 8vw, 56px) 0 64px; }
  .step-phone { display: block; width: min(319px, 78vw); margin: 26px auto 0; }
}

/* Phone device + scenes. Sizes use container units so a scene scales with its device. */
.device { position: relative; width: 100%; aspect-ratio: 9 / 18.5; padding: 2.4%; border-radius: 13% / 6.3%; background: #1d1915; box-shadow: var(--shadow); container-type: inline-size; }
@media (prefers-color-scheme: dark) { .device { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow); } }
.device::after { content: ""; position: absolute; top: 3.4%; left: 50%; width: 3.2%; aspect-ratio: 1; margin-left: -1.6%; border-radius: 50%; background: #000; z-index: 3; }
.device-screen { position: relative; height: 100%; border-radius: 11% / 5.3%; overflow: hidden; background: var(--bg); }
.hero-device { width: min(319px, 74%); margin-left: auto; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 4.4cqw; line-height: 1.5; color: var(--fg); background: var(--bg); padding: 0 6cqw 5cqw; }
/* Devices with several screens crossfade between them; without JS the first shows. */
.device.multi .screen { opacity: 0; transition: opacity 0.45s ease; }
.device.multi .screen.is-active, .device.multi:not(.ready) .screen:first-child { opacity: 1; }
.screen p, .screen ul { margin: 0 0 2.6cqw; }
.screen ul { padding-left: 5cqw; }
.screen li { margin-bottom: 1.6cqw; }
.sb { display: flex; justify-content: space-between; align-items: center; padding: 4.4cqw 2cqw 2cqw; font-weight: 600; font-size: 4cqw; }
.sb-icons { display: flex; gap: 1.5cqw; align-items: center; color: var(--fg); }
.sb-signal { display: flex; align-items: flex-end; gap: 0.5cqw; height: 2.8cqw; }
.sb-signal i { width: 0.8cqw; background: currentColor; border-radius: 0.3cqw; }
.sb-signal i:nth-child(1) { height: 30%; } .sb-signal i:nth-child(2) { height: 55%; } .sb-signal i:nth-child(3) { height: 78%; } .sb-signal i:nth-child(4) { height: 100%; }
.sb-wifi { width: 3.8cqw; height: 2.8cqw; background: currentColor; clip-path: polygon(50% 100%, 0 28%, 18% 10%, 50% 0, 82% 10%, 100% 28%); border-radius: 0.4cqw; }
.sb-battery { position: relative; width: 6cqw; height: 2.9cqw; border: 0.45cqw solid currentColor; border-radius: 0.9cqw; opacity: 0.9; }
.sb-battery::before { content: ""; position: absolute; inset: 0.4cqw; right: 1.2cqw; background: currentColor; border-radius: 0.3cqw; }
.sb-battery::after { content: ""; position: absolute; right: -1.1cqw; top: 25%; width: 0.6cqw; height: 50%; background: currentColor; border-radius: 0 0.3cqw 0.3cqw 0; }
.s-head { text-align: center; padding: 3cqw 0 4cqw; }
.s-title { font-weight: 600; font-size: 4.6cqw; }
.s-head-row { display: flex; justify-content: space-between; align-items: center; }
.s-caps { font-size: 3.2cqw; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.s-link { color: var(--accent-ink); font-weight: 600; font-size: 3.8cqw; }
.s-back { width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 3.3px rgba(0,0,0,0.08); }
.s-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 0; }
.s-bubble { align-self: flex-end; max-width: 82%; background: var(--btn); color: var(--btn-fg); padding: 3cqw 4.4cqw; border-radius: 5cqw; margin-bottom: 4cqw; }
.s-label { font-size: 3.2cqw; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); font-weight: 500; }
.s-pill { display: inline-flex; align-items: center; gap: 2cqw; border: 0.4cqw solid var(--line-strong); border-radius: 108.9px; padding: 1.4cqw 3.6cqw; font-size: 3.6cqw; font-weight: 500; color: var(--soft); background: var(--panel); }
.s-pill .dot { width: 2.4cqw; height: 2.4cqw; }
.s-pop { margin: 1cqw 0 1.6cqw; }
.s-fine { font-size: 3.2cqw; color: var(--muted); }
.s-chip { display: flex; align-items: center; gap: 3cqw; border: 0.4cqw solid var(--line-strong); border-radius: 3.6cqw; padding: 3cqw 4cqw; background: var(--panel); font-size: 3.8cqw; }
.s-chip .plus { margin-left: auto; color: var(--muted); }
.paw { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--fg); opacity: 0.8; }
.s-composer { display: flex; align-items: center; gap: 3cqw; margin-top: 3cqw; background: var(--panel); border-radius: 108.9px; padding: 2.4cqw 2.4cqw 2.4cqw 4cqw; box-shadow: 0 1px 4.4px rgba(0,0,0,0.06); color: var(--muted); font-size: 3.9cqw; }
.s-composer .s-ph { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A long question wraps while it types, as the app's composer grows, so the cursor stays in view. */
.s-composer .s-typed { flex: 1; }
.s-composer { border-radius: 6cqw; }
.s-typed { color: var(--fg); }
.s-cam { width: 4.4cqw; height: 3.6cqw; border: 0.45cqw solid var(--soft); border-radius: 0.9cqw; flex: none; }
.s-send { width: 8.4cqw; height: 8.4cqw; border-radius: 50%; background: color-mix(in srgb, var(--accent) 25%, transparent); flex: none; margin-left: auto; }
.s-emergency { border: 0.4cqw solid color-mix(in srgb, var(--high) 45%, transparent); background: color-mix(in srgb, var(--high) 8%, var(--panel)); border-radius: 4cqw; padding: 3.4cqw 4cqw; margin-bottom: 4cqw; font-size: 3.7cqw; }
.s-em-head { font-weight: 600; margin-bottom: 2cqw !important; }
.s-em-row { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding: 1.6cqw 0; border-top: 0.3cqw solid var(--line); }
.s-em-row small, .s-row small, .s-tl small, .s-weight small, .s-visit small, .s-file small { display: block; font-size: 3.1cqw; color: var(--muted); }
.s-call { background: var(--high); color: #fff; font-weight: 600; font-size: 3.4cqw; padding: 1.2cqw 3.6cqw; border-radius: 108.9px; }
.s-body { flex: 1; overflow: hidden; min-height: 0; }
.s-file { display: flex; gap: 3cqw; align-items: center; background: var(--panel); border-radius: 3.6cqw; padding: 3cqw; margin-bottom: 3cqw; font-size: 3.7cqw; }
.s-file b { font-weight: 500; }
.s-thumb { width: 10cqw; height: 10cqw; border-radius: 2.4cqw; background: color-mix(in srgb, var(--accent) 18%, var(--panel)); flex: none; }
.s-reading { font-size: 3.6cqw; color: var(--muted); }
.js-scenes .s-reading { background: linear-gradient(90deg, var(--muted) 30%, var(--line-strong) 50%, var(--muted) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
.screen .s-h { font-family: var(--serif); font-weight: 500; font-size: 6.6cqw; line-height: 1.15; margin: 1cqw 0 3cqw; }
.screen .s-caps { display: block; margin: 0 0 1.6cqw; }
.s-card { background: var(--panel); border-radius: 3.6cqw; margin-bottom: 3cqw; overflow: hidden; }
.s-row { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding: 2.6cqw 3.6cqw; font-size: 3.8cqw; }
.s-row + .s-row { border-top: 0.3cqw solid var(--line); }
.s-check { width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: var(--btn); flex: none; position: relative; }
.s-check::after, .s-given::before { content: ""; position: absolute; left: 36%; top: 22%; width: 22%; height: 40%; border: solid var(--btn-fg); border-width: 0 0.55cqw 0.55cqw 0; transform: rotate(45deg); }
.s-cta { text-align: center; background: var(--btn); color: var(--btn-fg); font-weight: 600; border-radius: 3.6cqw; padding: 3.4cqw; font-size: 4cqw; margin-top: 2cqw; }
.s-done { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent-ink); }
.s-timeline .s-card { padding: 3cqw 3.6cqw; font-size: 3.8cqw; }
.s-tl { display: grid; grid-template-columns: 10cqw 1fr auto; gap: 2.6cqw; align-items: center; }
.s-time { font-size: 3.3cqw; color: var(--muted); font-variant-numeric: tabular-nums; }
.s-btn { grid-column: 3; grid-row: 1; font-size: 3.3cqw; font-weight: 600; border: 0.4cqw solid var(--line-strong); border-radius: 108.9px; padding: 1.2cqw 3cqw; white-space: nowrap; }
.s-given { position: relative; background: var(--btn); color: var(--btn-fg); border-color: var(--btn); padding-left: 6.6cqw; }
.s-given::before { left: 2.6cqw; top: 26%; width: 1.4cqw; height: 2.6cqw; }
.s-tags { display: flex !important; flex-wrap: wrap; gap: 1.2cqw; margin-top: 1.2cqw; }
.s-tags i { font-style: normal; font-size: 2.9cqw; background: var(--elev); border: 0.3cqw solid var(--line); border-radius: 108.9px; padding: 0.4cqw 2cqw; color: var(--soft); }
.s-tags i.warn { border-color: color-mix(in srgb, var(--medium) 60%, transparent); }
.s-photo { width: 10cqw; height: 10cqw; border-radius: 2.4cqw; object-fit: cover; }
.s-weight { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; }
.s-weight svg { width: 30cqw; flex: none; overflow: visible; }
.s-weight path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js-scenes .s-weight:not(.on) path { stroke-dashoffset: 1; }
.js-scenes .s-weight path { transition: stroke-dashoffset 1.2s ease 0.2s; }
.s-visit { display: flex; justify-content: space-between; align-items: center; border: 0.4cqw solid color-mix(in srgb, var(--accent) 40%, transparent); }
.s-arrow { width: 2.6cqw; height: 2.6cqw; border: solid var(--accent-ink); border-width: 0.5cqw 0.5cqw 0 0; transform: rotate(45deg); flex: none; }

.s-photo-msg { align-self: flex-end; margin-bottom: 1.6cqw; }
.s-photo-msg img { width: 26cqw; height: auto; border-radius: 3.6cqw; }
.s-attach { width: 8cqw; height: 8cqw; object-fit: cover; border-radius: 1.8cqw; flex: none; }
.s-fill { flex: 1; min-height: 0; }
.s-today, .s-prep { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.s-notif { position: absolute; z-index: 2; top: 10cqw; left: 3.5cqw; right: 3.5cqw; display: flex; align-items: center; gap: 3cqw; background: var(--panel); border-radius: 4cqw; padding: 3cqw 3.4cqw; box-shadow: 0 6.6px 22px rgba(0, 0, 0, 0.14); font-size: 3.6cqw; }
.s-notif b { font-weight: 600; }
.s-notif small { display: block; color: var(--muted); font-size: 3.1cqw; }
.s-notif .s-btn { margin-left: auto; }
.s-notif-icon { width: 7cqw; height: 7cqw; border-radius: 1.8cqw; background: var(--btn) url("/img/icon-192.png") center / cover; flex: none; }
.js-scenes .screen .s-notif:not(.on) { transform: translateY(-14cqw); }
.s-logchips { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin-bottom: 3cqw; }
.s-logchips i { font-style: normal; font-size: 3.3cqw; background: var(--panel); border: 0.3cqw solid var(--line-strong); border-radius: 108.9px; padding: 1cqw 3cqw; }
.s-sub { font-size: 3.5cqw; color: var(--soft); }
.s-range { display: flex; gap: 1.4cqw; margin-bottom: 3cqw; }
.s-range i { font-style: normal; font-size: 3cqw; border: 0.3cqw solid var(--line-strong); border-radius: 108.9px; padding: 0.8cqw 2.4cqw; color: var(--soft); white-space: nowrap; }
.s-range i.on-pill { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.s-ghost { visibility: hidden; }

/* Vet visits scene panels. */
.s-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.s-seg { display: flex; background: color-mix(in srgb, var(--line) 50%, transparent); border: 0.3cqw solid var(--line); border-radius: 3cqw; padding: 0.8cqw; margin-bottom: 3cqw; }
.s-seg span { flex: 1; text-align: center; font-size: 3.6cqw; color: var(--soft); padding: 1.8cqw 0; border-radius: 2.4cqw; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.js-scenes .screen .s-seg .s-mark:not(.on) { opacity: 1; transform: none; }
.s-seg .s-mark.on, html:not(.js-scenes) .s-seg .s-mark { background: var(--panel); color: var(--fg); font-weight: 600; box-shadow: 0 1px 3.3px rgba(0, 0, 0, 0.08); }
.s-panel > .s-stack { margin-top: 2cqw; }
.s-rec { align-items: center; text-align: center; }
.s-rec .s-head { width: 100%; }
.s-rec-frame { position: absolute; inset: 0; box-shadow: inset 0 0 0 1.3cqw #c8442f; border-radius: 11cqw; pointer-events: none; z-index: 3; }
.s-rec-label { color: #c8442f; font-size: 3.4cqw; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 2cqw !important; }
.s-rec-dot { width: 34cqw; height: 34cqw; border-radius: 50%; background: var(--btn); margin: 14cqw auto 8cqw; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(0.88); opacity: 0.85; } }
.s-rec-time { font-family: var(--serif); font-size: 11cqw; line-height: 1; }
.s-rec-ctl { display: flex; gap: 5cqw; margin-top: auto; padding-bottom: 4cqw; }
.s-rec-pause, .s-rec-stop { width: 13cqw; height: 13cqw; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 4.4px rgba(0, 0, 0, 0.1); position: relative; }
.s-rec-pause::before { content: ""; position: absolute; inset: 35% 40%; border: solid var(--fg); border-width: 0 0.6cqw; }
.s-rec-stop { border-radius: 3.6cqw; background: #c8442f; }
.s-rec-stop::before { content: ""; position: absolute; inset: 34%; background: #fff; border-radius: 0.8cqw; }

/* Scene timeline states (site.js adds .js-scenes). No JS: final frame. */
.js-scenes .screen .s-panel[data-step]:not(.on) { transform: none; }
.s-stack { display: grid; }
.s-stack > * { grid-area: 1 / 1; }
/* Screens other than chat grow downwards: unshown items take no space either. */
.js-scenes .s-body [data-step]:not(.on) { display: none; }
.js-scenes .s-body [data-step].on { animation: rise 0.35s ease; }
.js-scenes .s-hide-empty:not(:has(.on)) { display: none; }
html:not(.js-scenes) [data-until] { display: none; }
.js-scenes [data-step] { transition: opacity 0.35s ease, transform 0.35s ease; }
.js-scenes [data-step]:not(.on) { opacity: 0; transform: translateY(1.8cqw); }
/* In a chat, unsent lines take no space, so new lines push older ones up like the app. */
.js-scenes .s-chat [data-step]:not(.on), .js-scenes .s-composer [data-step]:not(.on) { display: none; }
.js-scenes .s-chat [data-step].on { animation: rise 0.35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(1.8cqw); } }
.js-scenes [data-until].gone { display: none; }
.js-scenes .s-pop.on .s-pill { animation: pop 0.4s cubic-bezier(.3,1.6,.6,1); }
@keyframes pop { from { transform: scale(0.6); } to { transform: none; } }
.typing::after { content: ""; display: inline-block; width: 0.5cqw; height: 1em; margin-left: 0.4cqw; vertical-align: -0.15em; background: currentColor; animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.scene-ctl { position: absolute; right: -6px; bottom: -40px; font: 500 0.82rem var(--sans); color: var(--soft); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 1098.9px; padding: 6.6px 15.4px; cursor: pointer; }
.scene-ctl:hover { color: var(--fg); }
@media (width >= 990px) { .stage-device .scene-ctl { bottom: 0; right: calc(100% + 13.2px); } }
@media (width < 990px) { .stage-device .scene-ctl { bottom: auto; top: 0; right: auto; left: calc(100% + 11px); } }

.screen .s-mt { margin-top: auto; padding-top: 3cqw; }

/* About: photos of Bella and Luna. */
.about-photos-wrap { padding-top: 0; padding-bottom: 0; }
.about-photos { margin: 0; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 13.2px; max-width: 1000px; margin-inline: auto; }
.about-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.ap-main { aspect-ratio: 4 / 3; }
.ap-side { grid-row: span 2; }
.ap-small { aspect-ratio: 4 / 3; }
@media (width < 836px) { .about-photos { grid-template-columns: 1fr 1fr; } .ap-main { grid-column: 1 / -1; } .ap-side { grid-row: auto; aspect-ratio: 4 / 3; } }
.about-body .cta-row { margin-top: 30.8px; }