/* Jeanette's landing, ported rule by rule from her sitio/index.html onto tokens.css (her values, English names).
   Changes against her page are listed, numbered, in the comment at the top of landing.html; each is cited here as
   "change N". */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 var(--fs-17)/1.55 var(--font-text); font-feature-settings: "calt" 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--width); margin: 0 auto; padding: 0 var(--margin); }
section { padding: var(--sp-56) 0; }
section.alt { background: var(--surface-alt); }
h1, h2 { font-family: var(--font-title); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: var(--fs-h1-phone); line-height: 1.1; }
h1, h2, .punchline, .closing { text-wrap: balance; }
p, li, figcaption, blockquote, summary { text-wrap: pretty; }
h2 { font-size: var(--fs-29); line-height: 1.2; }
::selection { background: var(--aqua-100); color: var(--ink); }
:focus-visible { outline: 3px solid var(--aqua-800); outline-offset: 3px; }
h1 em, h2 em { font-family: var(--font-title); font-style: italic; font-weight: 600; color: var(--aqua-700); }
p { margin: 0; }
p + p { margin-top: var(--sp-12); }
.lede { color: var(--ink-soft); margin-top: var(--sp-14); }
.top .lede { margin-bottom: var(--sp-20); }

/* Button: dark aqua with white (5.0:1), her shape and glow. Change 9: ANS's button motion (.ex-btn and .ebm-boton,
   read in ebook.css and ebook-modal.js), the same as the modal's main buttons: a solid ledge under it in a darker aqua
   (decision 58); with a mouse it rises 2 px onto a 6 px ledge; pressed (mouse or finger) it sinks 3 px onto a 1 px
   ledge in the hover colour; 0.2 s on ANS's curve. press.js holds the pressed look for a beat on touch, so a quick
   tap still shows it. An unmoving layer (::before) keeps the pointer on it while it rises (ANS's jitter fix).
   Reduced motion: the colour and ledge still change, nothing moves (ANS's CSS_QUIETO) */
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-10); width: 100%; min-height: 56px; padding: var(--sp-14) var(--sp-22); border: 0; border-radius: var(--r-14); background: var(--aqua-700); color: var(--on-accent); font: 600 var(--fs-18)/1.2 var(--font-label); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-ledge), var(--shadow-button); transition-property: transform, box-shadow, background-color; transition-duration: var(--dur-200); transition-timing-function: var(--ease-out-strong); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn::before { content: ""; position: absolute; inset: calc(-1 * var(--sp-4)) 0 calc(-1 * var(--sp-6)); border-radius: inherit; }
.btn:not(:disabled):active, .btn[data-pressed] { background: var(--aqua-800); box-shadow: var(--shadow-ledge-down), var(--shadow-button); }
@media (hover: hover) { .btn:not(:disabled):hover { background: var(--aqua-800); box-shadow: var(--shadow-ledge-up), var(--shadow-button); } .btn:not(:disabled):hover:active, .btn:not(:disabled)[data-pressed] { box-shadow: var(--shadow-ledge-down), var(--shadow-button); } }
@media (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):active, .btn[data-pressed] { transform: translateY(3px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):hover { transform: translateY(-2px); }
  .btn:not(:disabled):hover:active, .btn:not(:disabled)[data-pressed] { transform: translateY(3px); }
}
button.btn { appearance: none; -webkit-appearance: none; }
.btn svg { width: 20px; height: 20px; }

/* Price */
.price, .price-short { font-variant-numeric: tabular-nums; }
.price { display: flex; align-items: baseline; gap: var(--sp-12); flex-wrap: wrap; }
.price .was { color: var(--ink-faint); text-decoration: line-through; font-size: var(--fs-18); }
.price .now { font: 600 var(--fs-34)/1 var(--font-label); color: var(--ink); }
.price .code { font-size: var(--fs-17); font-weight: 600; color: var(--ink-soft); }
.launch[hidden] { display: none; } /* prices.js hides it once the launch is over (struck null) */
.launch { display: inline-block; margin-top: var(--sp-8); padding: var(--sp-6) var(--sp-12); border-radius: var(--r-10); background: var(--coral-50); color: var(--coral-text); font: 600 var(--fs-12)/1.3 var(--font-label); }

/* Currency selector (change 2): today's healthandpaws.com header chip and menu (landing-v2.html .currency-btn and
   .currency-menu; owner's reference docs/design/references/current-landing-currency-dropdown.png), in Jeanette's
   type and colours: flag, code and caret on a light chip; on tap a small panel under it, a tidy table of
   flag · code · price, the chosen row tinted with a check, and its own always-visible scroll rail. */
.currency { position: relative; flex: none; }
.currency-btn { display: flex; align-items: center; gap: var(--sp-6); min-height: 44px; margin: 0; padding: 0 var(--sp-10); border: 1.5px solid var(--line); border-radius: var(--r-8); background: var(--surface); color: var(--ink); font: 600 var(--fs-16)/1 var(--font-label); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--dur-150) ease-out; }
@media (hover: hover) { .currency-btn:hover { border-color: var(--aqua-700); } }
.currency-btn[aria-expanded="true"] { border-color: var(--aqua-700); }
.currency-btn:focus-visible { outline: 3px solid var(--aqua-800); outline-offset: 3px; }
.currency-flag { flex: none; width: 20px; height: 14px; object-fit: cover; border-radius: var(--r-2); outline: 1px solid var(--image-edge); outline-offset: -1px; }
.currency-caret { width: 10px; height: 6px; color: var(--ink-soft); transition: transform var(--dur-150) ease-out; }
.currency-btn[aria-expanded="true"] .currency-caret { transform: rotate(180deg); }
/* The panel sits against the viewport (prices.js place()): fixed, its top, left, width cap and list height set on every
   open and scroll, so neither the header nor the payment sheet can clip it; above the modal's layers */
.currency-panel { position: fixed; top: 0; left: 0; z-index: 2147483002; box-sizing: border-box; width: 232px; padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-12); background: var(--surface); box-shadow: var(--shadow-sheet-hover); }
.currency-list { max-height: min(62vh, 440px); margin: 0; padding: 0 var(--sp-14) 0 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none; outline: none; }
.currency-list::-webkit-scrollbar { display: none; }
.currency-list li { display: grid; grid-template-columns: 20px auto 1fr 16px; align-items: center; gap: var(--sp-10); min-height: 44px; padding: 0 var(--sp-10); border-radius: var(--r-8); font: 600 var(--fs-15)/1 var(--font-label); color: var(--ink); cursor: pointer; }
.currency-price { justify-self: end; font: 400 var(--fs-15)/1 var(--font-text); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.currency-check { width: 16px; height: 16px; color: var(--aqua-700); visibility: hidden; }
.currency-list li[aria-selected="true"] { background: var(--aqua-50); }
.currency-list li[aria-selected="true"] .currency-check { visibility: visible; }
.currency-list li[aria-selected="true"] .currency-price { color: var(--ink); }
.currency-list li[data-active] { background: var(--surface-alt); }
.currency-list li[aria-selected="true"][data-active] { background: var(--aqua-100); }
.currency-list:focus-visible li[data-active] { outline: 3px solid var(--aqua-800); outline-offset: -3px; }
.currency-rail { position: absolute; top: var(--sp-10); bottom: var(--sp-10); right: var(--sp-6); width: 6px; border-radius: var(--r-pill); background: var(--line); }
.currency-thumb { width: 6px; min-height: 28px; border-radius: var(--r-pill); background: var(--aqua-700); }
@media (forced-colors: active) { .currency-list li[aria-selected="true"] { outline: 2px solid CanvasText; outline-offset: -2px; } .currency-thumb { background: CanvasText; } }

/* 1 · Top */
.top { padding: var(--sp-18) 0 0; }
/* Top bar (change 2): her signature on the left, the currency chip at the top right, like today's site header */
.top-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); margin-bottom: var(--sp-18); }
.byline { display: flex; align-items: center; gap: var(--sp-10); min-width: 0; color: var(--ink-soft); font: 600 var(--fs-14)/1.2 var(--font-label); }
.byline-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-10); row-gap: var(--sp-2); }
.byline-text > span { white-space: nowrap; }
/* Below 460 px her name and «Health and Paws» stack beside the photo, so the chip fits on the same row */
@media (max-width: 459px) { .byline-text { flex-direction: column; align-items: flex-start; } .byline-dot { display: none; } }
.byline img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; outline: 1px solid var(--image-edge); outline-offset: -1px; }
.byline-brand { color: var(--ink-faint); font-weight: 400; font-family: var(--font-text); }
.hero-photo { margin: var(--sp-26) calc(-1 * var(--margin)) 0; }
.hero-photo img { width: 100%; aspect-ratio: 780 / 922; object-fit: cover; }
.top .btn { margin-top: var(--sp-20); }
.note { margin-top: var(--sp-10); text-align: center; color: var(--ink-faint); font-size: var(--fs-14); }

/* 2 · Strip */
.strip { padding: var(--sp-18) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-alt); }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-10); }
.strip li { display: flex; align-items: center; gap: var(--sp-10); font-size: var(--fs-15); color: var(--ink-soft); }
.strip svg { flex: none; width: 20px; height: 20px; color: var(--aqua-700); }
.strip small { display: block; margin-top: var(--sp-2); font-size: var(--fs-13); line-height: 1.35; color: var(--ink-faint); }

/* 3 and 4 · The doubt + the figure */
.stat { margin: var(--sp-28) 0 0; padding: var(--sp-24); border-radius: var(--r-18); background: var(--surface); border: 1px solid transparent; box-shadow: var(--shadow-card); }
.stat b { display: block; font: 400 var(--fs-stat-phone)/1 var(--font-title); color: var(--aqua-700); white-space: nowrap; }
@media (max-width: 359px) { .stat b { font-size: var(--fs-32); } } /* change 4 */
.stat p { margin-top: var(--sp-10); }
.stat .source { margin-top: var(--sp-14); color: var(--ink-faint); font-size: var(--fs-13); line-height: 1.45; }
.punchline { margin-top: var(--sp-28); font: 400 var(--fs-24)/1.3 var(--font-title); }
.punchline em { font-family: var(--font-title); font-style: italic; font-weight: 600; color: var(--aqua-700); }

/* 5 · The relief */
.steps { list-style: none; margin: var(--sp-26) 0 0; padding: 0; display: grid; gap: var(--sp-18); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-14); align-items: start; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--aqua-700); color: var(--on-accent); font: 600 var(--fs-17)/1 var(--font-label); }
.steps b { display: block; font-weight: 600; }
.steps span { color: var(--ink-soft); }
.photo { margin-top: var(--sp-30); }
.photo img { border-radius: var(--r-18); }
.photo img, .carousel img, .case figure img, .price-card .book img { outline: 1px solid var(--image-edge); outline-offset: -1px; }
.caption { margin-top: var(--sp-12); color: var(--ink-soft); }

/* 6 · Inside the book */
.carousel { display: flex; gap: var(--sp-14); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--sp-4) var(--margin) var(--sp-16); margin: var(--sp-26) calc(-1 * var(--margin)) 0; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel::-webkit-scrollbar { display: none; }
.carousel figure { flex: 0 0 78%; margin: 0; scroll-snap-align: center; }
.carousel button { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-12); overflow: hidden; background: var(--surface); cursor: zoom-in; box-shadow: var(--shadow-sheet); -webkit-tap-highlight-color: transparent; }
.carousel img { width: 100%; aspect-ratio: 720 / 1019; border-radius: var(--r-12); }
.carousel figcaption { margin-top: var(--sp-10); font-size: var(--fs-15); color: var(--ink-soft); text-align: center; }
.dots { display: flex; justify-content: center; gap: var(--sp-7); margin-top: var(--sp-4); }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background-color var(--dur-200), width var(--dur-200); }
.dots i.active { background: var(--aqua-700); width: 18px; border-radius: var(--r-pill); }
.swipe-hint { margin-top: var(--sp-10); text-align: center; color: var(--ink-faint); font-size: var(--fs-13); }
dialog.viewer { padding: 0; border: 0; background: transparent; max-width: 100%; max-height: 100dvh; width: 100%; height: 100dvh; margin: 0; }
dialog.viewer::backdrop { background: var(--scrim-viewer); }
.viewer-strip { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.viewer-strip::-webkit-scrollbar { display: none; }
.viewer-strip > div { flex: 0 0 100%; display: grid; place-items: center; padding: var(--sp-60) var(--sp-viewer-x); scroll-snap-align: center; }
.viewer-strip img { max-width: 100%; max-height: 100%; width: auto; border-radius: var(--r-8); }
dialog.viewer button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
dialog.viewer button svg { width: 22px; height: 22px; }
dialog.viewer .arrow { position: fixed; top: 50%; transform: translateY(-50%); background: var(--arrow-bg); }
dialog.viewer .prev { left: var(--sp-10); }
dialog.viewer .next { right: var(--sp-10); }
dialog.viewer form { position: fixed; top: var(--sp-12); right: var(--sp-12); }

/* 7 · What it includes */
.includes { list-style: none; margin: var(--sp-24) 0 0; padding: 0; display: grid; gap: var(--sp-14); }
.includes li { display: grid; grid-template-columns: 26px 1fr; gap: var(--sp-12); align-items: start; }
.includes svg { width: 22px; height: 22px; margin-top: var(--sp-2); color: var(--aqua-700); }
.includes b { display: block; color: var(--ink); }
.includes span { color: var(--ink-soft); font-size: var(--fs-16); line-height: 1.45; }
.pdf-note { margin-top: var(--sp-22); padding: var(--sp-14) var(--sp-16); border-radius: var(--r-12); background: var(--aqua-50); color: var(--ink-soft); font-size: var(--fs-15); }

/* 8 · Who is behind it */
.portrait { margin: 0 calc(-1 * var(--margin)) var(--sp-26); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
blockquote { margin: 0; font: 400 var(--fs-21)/1.4 var(--font-title); }
.author { margin-top: var(--sp-10); font: 600 var(--fs-15)/1.3 var(--font-label); color: var(--ink-soft); }
.author::before { content: "— "; color: var(--aqua-700); }
.before-now { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); margin-top: var(--sp-22); }
.before-now > div { padding: var(--sp-16) var(--sp-14); border-radius: var(--r-14); background: var(--surface-alt); }
.before-now > div + div { background: var(--aqua-50); outline: 1px solid var(--aqua-100); }
.before-now b { display: inline-block; margin-bottom: var(--sp-10); padding: var(--sp-3) var(--sp-10); border-radius: var(--r-pill); background: var(--surface); font: 600 var(--fs-12)/1.3 var(--font-label); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.before-now > div + div b { background: var(--aqua-700); color: var(--on-accent); }
.before-now ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); font-size: var(--fs-15); line-height: 1.35; }
.before-now > div:first-child ul { color: var(--ink-soft); }
.promises { list-style: none; margin: var(--sp-24) 0 0; padding: 0; display: grid; gap: var(--sp-14); }
.promises li { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-14); align-items: center; }
.promises svg { width: 44px; height: 44px; padding: var(--sp-10); border-radius: var(--r-12); background: var(--aqua-50); color: var(--aqua-700); }
.promises span { font-size: var(--fs-16); line-height: 1.4; }

/* 8b · Dogs who already eat this way */
.cases { display: grid; gap: var(--sp-18); margin-top: var(--sp-24); }
.case { padding: var(--sp-12); border-radius: var(--r-24); background: var(--surface); border: 1px solid transparent; box-shadow: var(--shadow-card); }
.case .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.case figure { position: relative; margin: 0; }
.case figure img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-11); }
.case figcaption { position: absolute; top: var(--sp-8); left: var(--sp-8); padding: var(--sp-4) var(--sp-9); border-radius: var(--r-pill); background: var(--chip-on-photo); font: 600 var(--fs-11)/1.2 var(--font-label); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.case figure + figure figcaption { background: var(--aqua-700); color: var(--on-accent); }
.case blockquote { margin-top: var(--sp-14); font: 400 var(--fs-19)/1.4 var(--font-title); }
.case cite { display: block; margin-top: var(--sp-8); font: 600 var(--fs-14)/1.2 var(--font-label); font-style: normal; color: var(--ink-soft); }
.cases-note { margin-top: var(--sp-18); color: var(--ink-faint); font-size: var(--fs-14); }

/* 9 · Questions */
.faq { margin-top: var(--sp-22); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); padding: var(--sp-18) 0; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--aqua-700); border-bottom: 2px solid var(--aqua-700); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--dur-200); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { max-width: 65ch; padding: 0 0 var(--sp-18); color: var(--ink-soft); }

/* 10 · Price and close */
.price-card { margin-top: var(--sp-26); padding: var(--sp-28) var(--sp-26); border-radius: var(--r-20); background: var(--surface); border: 2px solid var(--aqua-100); box-shadow: var(--shadow-price-card); }
.price-card .book { display: grid; grid-template-columns: 84px 1fr; gap: var(--sp-16); align-items: center; margin-bottom: var(--sp-18); }
.price-card .book img { width: 84px; border-radius: var(--r-6); box-shadow: var(--shadow-cover); }
.price-card .book b { display: block; font: 400 var(--fs-20)/1.2 var(--font-title); text-wrap: balance; }
.price-card .book span { display: block; margin-top: var(--sp-4); color: var(--ink-faint); font-size: var(--fs-14); }
@media (max-width: 699px) { .price-card .launch .more { display: none; } }
.price-card .one-time { margin-top: var(--sp-6); color: var(--ink-faint); font-size: var(--fs-14); }
.price-card .btn { margin-top: var(--sp-20); }
.methods { display: block; text-align: center; margin-top: var(--sp-14); color: var(--ink-faint); font-size: var(--fs-13); text-wrap: balance; }
.methods svg { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: var(--sp-4); }
.closing { margin-top: var(--sp-34); text-align: center; font: 400 var(--fs-26)/1.25 var(--font-title); }

/* Footer: healthandpaws.com's, in this page's type and colours */
.footer { padding: var(--sp-48) 0 calc(var(--sp-36) + env(safe-area-inset-bottom)); background: var(--aqua-50); color: var(--ink-soft); font-size: var(--fs-15); }
.footer-cols { display: grid; gap: var(--sp-32); }
.footer-title { margin: 0 0 var(--sp-12); font: 600 var(--fs-15)/1.3 var(--font-label); color: var(--ink); }
.footer nav { display: grid; gap: var(--sp-2); }
.footer nav a { display: inline-block; padding: var(--sp-11) 0; color: var(--ink-soft); text-decoration: none; }
@media (hover: hover) { .footer nav a:hover { color: var(--aqua-700); text-decoration: underline; } }
.footer p { margin: 0 0 var(--sp-10); }
.footer a { text-underline-offset: 0.2em; text-decoration-thickness: from-font; }
.footer p a { color: var(--aqua-700); }
.social { display: flex; justify-content: center; gap: var(--sp-14); margin-top: var(--sp-36); }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--aqua-700); color: var(--on-accent); }
.social svg { width: 20px; height: 20px; }
.copyright { margin-top: var(--sp-22) !important; text-align: center; font-size: var(--fs-13); color: var(--ink-soft); }

/* Sticky bar (change 10): shows once the top button has scrolled away; hides as the closing price block comes into
   view, past it (so the footer is never covered) and while the payment modal is open (landing.html script).
   Phones: her full-width strip on the bottom edge, price at the leading edge and the button filling the rest, above
   the iPhone's home bar (safe area). From 760 px: her intent «del ancho del contenido» made literal: a floating card
   exactly as wide as the content column above it (same edges as the headings and cards), 16 px off the bottom, the
   book, its title and the price at its leading edge and the button at its trailing edge, so the two ends balance
   instead of a white strip with everything pushed right. It slides up 16 px and fades in; reduced motion: it simply
   appears (the design check allows no transition under reduced motion). Focused elements never land under it:
   scroll-padding at the bottom of the page. */
html { scroll-padding-block-end: calc(var(--sp-96) + env(safe-area-inset-bottom)); }
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: var(--sp-10) var(--margin) calc(var(--sp-10) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-bar); opacity: 0; visibility: hidden; transform: translateY(var(--sp-16)); transition: transform var(--dur-250) var(--ease-out-strong), opacity var(--dur-200) ease-out, visibility 0s linear var(--dur-250); }
.sticky-bar.visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sticky-bar .wrap { display: flex; align-items: center; gap: var(--sp-14); padding: 0; }
.sticky-bar .bar-book { display: flex; flex: none; align-items: center; gap: var(--sp-14); min-width: 0; }
.sticky-bar .bar-book img, .sticky-bar .bar-title { display: none; }
.sticky-bar .price-short { flex: none; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sticky-bar .price-short s { display: block; color: var(--ink-faint); font-size: var(--fs-13); }
.sticky-bar .price-short b { font: 600 var(--fs-20)/1 var(--font-label); }
.sticky-bar .btn { flex: 1 1 auto; min-height: 50px; padding-block: var(--sp-12); font-size: var(--fs-17); white-space: nowrap; box-shadow: var(--shadow-ledge); }
@media (max-width: 359px) { .sticky-bar .btn { padding-inline: var(--sp-12); font-size: var(--fs-16); } } /* the label stays on one line at 320 px */
@media (hover: hover) { .sticky-bar .btn:not(:disabled):hover { box-shadow: var(--shadow-ledge-up); } }
.sticky-bar .btn:not(:disabled):active, .sticky-bar .btn[data-pressed], .sticky-bar .btn:not(:disabled):hover:active { box-shadow: var(--shadow-ledge-down); }
@media (min-width: 760px) {
  .sticky-bar { bottom: calc(var(--sp-16) + env(safe-area-inset-bottom)); padding: 0 var(--margin); background: transparent; border: 0; box-shadow: none; pointer-events: none; }
  /* the card: the content column's width; radius 24 = the button's 14 + the 10 px inset (concentric) */
  .sticky-bar .wrap { max-width: calc(var(--width) - 2 * var(--margin)); margin: 0 auto; padding: var(--sp-10); padding-inline-start: var(--sp-16); border: 1px solid transparent; border-radius: var(--r-24); background: var(--surface); box-shadow: var(--shadow-dock); pointer-events: auto; }
  .sticky-bar .bar-book { flex: 1 1 auto; }
  .sticky-bar .bar-book img { display: block; flex: none; width: 34px; height: auto; border-radius: var(--r-5); box-shadow: var(--shadow-cover-sm); outline: 1px solid var(--image-edge); outline-offset: -1px; }
  .sticky-bar .price-short { display: flex; align-items: baseline; gap: var(--sp-8); }
  .sticky-bar .price-short s { font-size: var(--fs-15); }
  .sticky-bar .btn { flex: none; width: auto; min-width: 240px; }
}
@media (min-width: 960px) {
  .sticky-bar .bar-text { display: grid; gap: var(--sp-2); min-width: 0; }
  .sticky-bar .bar-title { display: block; overflow: hidden; font: 400 var(--fs-17)/1.25 var(--font-title); color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
}
@media (forced-colors: active) { .sticky-bar .wrap { border-color: CanvasText; } }

/* Tablet (760 px and up): the top in two columns */
@media (min-width: 760px) {
  .top .wrap { max-width: 920px; }
  .top .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-44); align-items: center; }
  .hero-photo { margin: 0; }
  .hero-photo img { border-radius: var(--r-22); outline: 1px solid var(--image-edge); outline-offset: -1px; }
  .top .btn { display: inline-flex; width: auto; min-width: 280px; }
  .top .note { text-align: left; }
}
/* Desktop (960 px and up) */
.desktop-only { display: none; }
@media (min-width: 960px) {
  body { font-size: var(--fs-18); }
  section { padding: var(--sp-96) 0; }
  h1 { font-size: var(--fs-58); line-height: 1.1; letter-spacing: -0.02em; }
  h2 { font-size: var(--fs-40); }
  .btn { width: auto; min-width: 320px; }
  .desktop-only { display: inline; }
  .phone-only { display: none; }
  .two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-72); align-items: center; }

  .top { padding: var(--sp-40) 0 var(--sp-72); }
  .top .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-72); align-items: center; }
  .hero-photo { margin: 0; }
  .hero-photo img { border-radius: var(--r-22); max-height: 640px; }
  .top .lede { font-size: var(--fs-20); max-width: 30em; }
  .top .btn { display: inline-flex; }
  .top .note { text-align: left; }

  .strip ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: var(--sp-12) var(--sp-40); align-items: start; }
  .strip li { align-items: flex-start; }
  .strip svg { margin-top: var(--sp-2); }

  .stat { margin-top: 0; padding: var(--sp-36); }
  .stat b { font-size: var(--fs-56); }
  .punchline { margin-top: var(--sp-56); text-align: center; font-size: var(--fs-30); }

  .photo { margin-top: 0; }
  .photo img { aspect-ratio: 1; object-fit: cover; object-position: top; }

  .carousel { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-32); overflow: visible; margin: var(--sp-40) 0 0; padding: 0; }
  .carousel figure { flex: 0 0 calc((100% - 64px) / 3); }
  .dots { display: none; }
  .swipe-hint { margin-top: var(--sp-24); }

  .includes { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: var(--sp-22) var(--sp-56); margin-top: var(--sp-36); }
  .pdf-note { display: inline-block; }

  .who { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .who .portrait { margin: 0; }
  .who .portrait img { border-radius: var(--r-22); outline: 1px solid var(--image-edge); outline-offset: -1px; }

  .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24); margin-top: var(--sp-36); }
  .case blockquote { font-size: var(--fs-18); }
  .cases-note { text-align: center; }

  .faq { max-width: 780px; }
  section:has(.faq) h2 { max-width: 780px; }
  section:has(.faq) .wrap > * { margin-left: auto; margin-right: auto; }

  #price h2 { text-align: center; max-width: 18em; margin: 0 auto; }
  #price .price-card { max-width: 520px; margin: var(--sp-40) auto 0; }
  #price .price-card .btn { width: 100%; }

  .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--sp-48); }
  .sticky-bar .btn { min-width: 280px; }
}

@media (min-width: 960px) and (hover: hover) { .carousel button { transition: box-shadow var(--dur-200) ease-out; } .carousel button:hover { box-shadow: var(--shadow-sheet-hover); } }
@media (min-width: 960px) and (hover: hover) and (prefers-reduced-motion: no-preference) { .carousel button { transition: transform var(--dur-200) ease-out, box-shadow var(--dur-200) ease-out; } .carousel button:hover { transform: translateY(-4px); } }
/* Reduced motion: nothing moves or fades (change 5: hers kept a 0.2 s fade on the bar and the colour transitions); the buttons still change colour and ledge */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .sticky-bar { transform: none; } }
@media (min-width: 700px) and (max-width: 959px) { h1 { font-size: var(--fs-44); } h2 { font-size: var(--fs-34); } .hero-photo, .portrait { margin-left: 0; margin-right: 0; } .hero-photo img, .portrait img { border-radius: var(--r-18); outline: 1px solid var(--image-edge); outline-offset: -1px; } .carousel figure { flex-basis: 46%; } }