/* ============================================================
   BYONDA — contactless veterinary therapy
   Design tokens
   ============================================================ */

:root {
  /* Core palette — drawn from the wordmark (deep teal) and the device (cream) */
  --ink:        #101A17;
  --ink-soft:   #3C4744;
  --muted:      #6E7873;
  --teal:       #0B5F4E;
  --teal-deep:  #073E33;
  --teal-lift:  #1E8C74;
  --mist:       #A9CFC4;

  --cream:      #F5F2EA;
  --paper:      #FCFAF5;
  --sand:       #E9E3D6;
  --line:       #DCD5C6;

  --display: "Avenir Next", "Futura", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;
  --body:    "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --serif:   "Canela", "Freight Display", Georgia, "Times New Roman", serif;

  --measure: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(72px, 11vw, 152px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

/* overscroll-behavior stops the rubber-band bounce that exposed a blank band
   above the content and left the fixed nav floating over nothing. */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; overscroll-behavior-y: none; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
section { position: relative; }

/* ---------- Typography ---------- */

h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.06; }

.display {
  font-size: clamp(2.7rem, 7vw, 5.4rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 22px;
}
.eyebrow.on-dark { color: var(--mist); }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 34ch;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.small { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* Same voice as the hero headline: light sans for the sentence, serif teal
   for the words that carry it. */
/* One step below the .h2 beside it: smaller, regular weight, softer colour and
   roomier leading, so it reads as the explanation of the title, not a twin. The
   serif teal accents echo the hero's "Zero contatto". */
.serif-quote {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.42;
  letter-spacing: -.012em;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: .35em;
}
.serif-quote strong { font-family: var(--serif); font-weight: 400; font-size: 1.12em; letter-spacing: -.01em; color: var(--teal); }

/* ---------- Wordmark ---------- */

/* The wordmark is the supplied logo image (teal on transparent). */
.wordmark { display: flex; align-items: center; }
.wordmark .logo { height: 12px; width: auto; display: block; }
.footer .wordmark .logo { height: 14px; }

/* ---------- Nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 18px 0;
  transition: background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav.scrolled {
  background: rgba(252, 250, 245, .86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  padding: 12px 0;
  box-shadow: 0 1px 0 rgba(16,26,23,.07);
}
/* Over the hero image the nav is inverted; it flips to ink once scrolled. */
.nav:not(.scrolled) .nav-links a { color: rgba(252,250,245,.86); }
.nav:not(.scrolled) .nav-links a:not(.btn)::after { background: var(--paper); }
/* Over a photographic hero the old 10%/50% outline could land on a light patch
   and lose its edge. A darker scrim plus a fuller border keeps it legible
   wherever the image happens to be bright. */
.nav:not(.scrolled) .btn {
  background: rgba(7,32,27,.42); border-color: rgba(252,250,245,.78); color: var(--paper);
  backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
.nav:not(.scrolled) .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--teal-deep); }

.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-size: 13.5px; letter-spacing: .01em; color: var(--ink-soft);
  position: relative; padding-bottom: 2px;
}
/* The underline is for text links only. The CTA is a pill that already changes
   colour on hover, so an extra line inside it is redundant. */
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--teal); transition: width .4s var(--ease);
}
.nav-links a:not(.btn):hover::after { width: 100%; }
/* The nav CTA stays an outline until hovered — a permanently filled green pill
   competes with the page's own buttons. */
.nav .btn { padding: 10px 20px; font-size: 13px; }
.nav.scrolled .btn { background: transparent; color: var(--teal); border-color: var(--teal); }
.nav.scrolled .btn:hover { background: var(--teal); color: var(--paper); border-color: var(--teal); }

/* ---------- Language switcher ---------- */
/* A segmented pill, borrowing the 999px radius of the buttons so it reads as a
   control rather than two more destinations. EN is always the left half and IT
   the right, on every page in both locales — the control never moves under the
   cursor, only which half is filled changes. The active locale is a span, not a
   link: there is nowhere for it to go. */
.lang {
  display: inline-flex; align-items: center;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(16,26,23,.022);
}
.lang > * {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 33px; padding: 5px 8px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 11px; font-weight: 500; letter-spacing: .08em; line-height: 1;
  color: var(--muted);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.lang .cur { background: var(--teal); color: var(--paper); }
.lang a:hover { color: var(--teal); background: rgba(11,95,78,.07); }
/* The underline animation belongs to the page links only. */
.nav-links .lang a::after { display: none; }
/* A utility control, not a peer of the page links — pulled in from the 34px
   nav rhythm so it groups with the CTA instead of competing with it. */
.nav-links .lang { margin-left: -13px; }

/* Over the hero the whole nav is inverted, so the pill inverts with it. */
.nav:not(.scrolled) .lang {
  border-color: rgba(252,250,245,.34);
  background: rgba(7,32,27,.34);
  backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
.nav:not(.scrolled) .lang > * { color: rgba(252,250,245,.68); }
.nav:not(.scrolled) .lang .cur { background: var(--paper); color: var(--teal-deep); }
.nav:not(.scrolled) .lang a:hover { color: var(--paper); background: rgba(252,250,245,.16); }

/* ---------- Mobile menu ---------- */
/* The hamburger is hidden on desktop; the inline links are hidden on mobile.
   Below 820px the links collapse into a full-width panel toggled by the button. */
.nav-toggle {
  display: none; flex: none; width: 44px; height: 44px; margin: -10px -8px -10px 0;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--ink);
}
.nav:not(.scrolled) .nav-toggle { color: var(--paper); }
.nav-toggle .bars { position: relative; width: 22px; height: 14px; }
.nav-toggle .bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease);
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 6px; }
.nav-toggle .bars span:nth-child(3) { top: 12px; }
.nav.menu-open .nav-toggle .bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav.menu-open .nav-toggle .bars span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-toggle .bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed; inset: 0 0 auto 0; top: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 92px var(--gutter) 32px;
    background: rgba(252, 250, 245, .97);
    backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
    box-shadow: 0 12px 40px rgba(16,26,23,.14);
    transform: translateY(-100%); transition: transform .5s var(--ease);
    visibility: hidden;
  }
  .nav.menu-open .nav-links { transform: translateY(0); visibility: visible; }
  .nav-links a {
    color: var(--ink) !important; font-size: 18px; letter-spacing: 0;
    padding: 16px 0; border-bottom: 1px solid var(--line);
  }
  .nav-links a::after { display: none; }
  /* Even over the hero, the open panel is cream, so links must read as ink. */
  .nav:not(.scrolled) .nav-links a { color: var(--ink) !important; }
  .nav-links a.btn {
    justify-content: center; margin-top: 22px; padding: 15px 28px;
    color: var(--paper) !important; background: var(--teal) !important; border-color: var(--teal) !important;
  }
  .nav:not(.scrolled) .nav-links a.btn { color: var(--paper) !important; background: var(--teal) !important; border-color: var(--teal) !important; }
  /* In the panel the pill stays a pill — align-self stops the column's
     stretch from smearing it across the full width. */
  .nav-links .lang { align-self: flex-start; margin: 26px 0 0; padding: 3px; }
  /* .nav-links a sets colour with !important for the cream panel, so the
     switcher has to answer in kind to keep its active/inactive distinction. */
  .nav-links .lang > * {
    min-width: 48px; padding: 9px 14px; font-size: 12.5px;
    border-bottom: 0; color: var(--muted) !important;
  }
  .nav-links .lang .cur { background: var(--teal); color: var(--paper) !important; }
  /* The panel is cream even over the hero, so undo the inverted treatment. */
  .nav:not(.scrolled) .nav-links .lang {
    border-color: var(--line); background: rgba(16,26,23,.022);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid var(--teal);
  background: var(--teal);
  color: var(--paper);
  font-family: var(--body);
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); transform: translateY(-1px); }
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--teal); }
.btn.ghost:hover { background: var(--teal); color: var(--paper); }
.btn.on-dark { background: var(--paper); border-color: var(--paper); color: var(--teal-deep); }
.btn.on-dark:hover { background: var(--mist); border-color: var(--mist); }

/* ---------- Split hero ----------
   The page's premise made structural: copy and photograph are two separate
   panels that never touch, and the seam between them is labelled "Air gap".
   Light side carries the argument; the photo keeps its own darkness. */

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) auto minmax(0, .98fr);
  min-height: 100svh;
  background: var(--paper);
}
.hero-copy { display: flex; align-items: center; }
/* The copy's left edge lines up with the nav wordmark: same centred-measure
   arithmetic as .wrap, computed against the viewport. */
.hero-copy-in {
  width: 100%;
  max-width: 720px;
  margin: 0;
  padding: clamp(120px, 16vh, 180px) clamp(28px, 4vw, 72px) clamp(56px, 9vh, 96px)
           calc(max((100vw - var(--measure)) / 2, 0px) + var(--gutter));
}
.hero-title {
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -.033em;
  line-height: 1.06;
  max-width: 17ch;
}
/* Its own line, set slightly clear of the headline: at line-height 1.06 the
   serif line otherwise butts straight up against the last word. */
.hero-title em { display: block; margin-top: .17em; font-style: normal; font-family: var(--serif);
  letter-spacing: -.012em; color: var(--teal); white-space: nowrap; }
.hero-lede { margin-top: 28px; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 38px; }
.hero-actions .sec-link { margin-top: 0; }

/* The seam: the corridor the field crosses. "Nothing touches" is the entire
   product claim, so the void is drawn as a live conduit rather than a divider —
   coupling lines densest at the emitter, a charged axis, and light travelling
   it. Everything animated here is transform or opacity only, so it stays on the
   compositor and costs nothing to run behind the hero. */
.hero-gap {
  position: relative;
  width: clamp(64px, 6vw, 104px);
  overflow: hidden;
  background: linear-gradient(to left, rgba(11,95,78,.07), rgba(11,95,78,0) 78%);
}
/* The charge hugging the emitter side: a soft luminous column bleeding out of
   the photograph, breathing slowly. Deliberately gradient-only — a ruled ladder
   of field lines was tried here and read as notebook paper, not as energy. */
.gap-field {
  position: absolute; inset: 0 0 0 auto; width: 72%; pointer-events: none;
  background: linear-gradient(to left, rgba(30,140,116,.20), rgba(30,140,116,0) 88%);
  animation: gapBreathe 6s var(--ease) infinite;
}
@keyframes gapBreathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* The axis the light runs along, faded at both ends so it never collides with
   the nav above or the fold below. */
.gap-axis {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px;
  background: linear-gradient(to bottom,
    rgba(11,95,78,0), rgba(11,95,78,.17) 12%, rgba(11,95,78,.17) 88%, rgba(11,95,78,0));
}
/* Light crossing the gap: a long faint tail behind a bright head, blurred so it
   reads as charge rather than as a bar. */
.gap-pulse {
  position: absolute; top: 0; left: 50%;
  width: 4px; height: 26%; margin-left: -2px;
  border-radius: 999px;
  background: linear-gradient(to bottom,
    rgba(30,140,116,0) 0%, rgba(30,140,116,.22) 46%, var(--teal-lift) 84%, rgba(30,140,116,0) 100%);
  filter: blur(2px);
  animation: gapPulseY 5s cubic-bezier(.42, 0, .58, 1) infinite;
}
.gap-pulse.d2 { animation-delay: 2.5s; }
/* -120% → 400% of a 26%-tall element clears the corridor at both ends. */
@keyframes gapPulseY {
  0%   { transform: translateY(-120%); opacity: 0; }
  16%  { opacity: .95; }
  84%  { opacity: .95; }
  100% { transform: translateY(400%); opacity: 0; }
}
@keyframes gapPulseX {
  0%   { transform: translateX(-120%); opacity: 0; }
  16%  { opacity: .95; }
  84%  { opacity: .95; }
  100% { transform: translateX(560%); opacity: 0; }
}

.hero-shot { position: relative; overflow: hidden; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

@media (max-width: 980px) {
  .hero-split { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(320px, 52svh); min-height: 0; }
  .hero-copy-in { max-width: none; margin: 0; padding: 120px var(--gutter) 44px; }
  /* The corridor turns horizontal — and the light now travels the long axis of
     the viewport, which reads better than the 66px crossing ever could. */
  .hero-gap {
    width: auto; height: 68px;
    background: linear-gradient(to top, rgba(11,95,78,.07), rgba(11,95,78,0) 78%);
  }
  /* The photograph is below now, so the charge rises out of it. */
  .gap-field {
    inset: auto 0 0 0; width: auto; height: 72%;
    background: linear-gradient(to top, rgba(30,140,116,.20), rgba(30,140,116,0) 88%);
  }
  .gap-axis {
    top: 50%; bottom: auto; left: 0; right: 0;
    width: auto; height: 1px; margin: -.5px 0 0;
    background: linear-gradient(to right,
      rgba(11,95,78,0), rgba(11,95,78,.17) 12%, rgba(11,95,78,.17) 88%, rgba(11,95,78,0));
  }
  .gap-pulse {
    top: 50%; left: 0;
    width: 18%; height: 4px; margin: -2px 0 0;
    background: linear-gradient(to right,
      rgba(30,140,116,0) 0%, rgba(30,140,116,.22) 46%, var(--teal-lift) 84%, rgba(30,140,116,0) 100%);
    animation-name: gapPulseX;
  }
}

/* ---------- Hero ---------- */

.hero { min-height: 100svh; display: flex; align-items: flex-end; position: relative; overflow: hidden; background: var(--teal-deep); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 46%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(7,32,27,.92) 0%, rgba(7,32,27,.55) 38%, rgba(7,32,27,.18) 70%, rgba(7,32,27,.62) 100%),
    linear-gradient(to right, rgba(7,32,27,.82) 0%, rgba(7,32,27,.44) 42%, rgba(7,32,27,0) 78%);
}
/* Portrait crops should frame the handpiece on the leg, not the console. */
@media (max-width: 760px) { .hero-media img { object-position: 40% 58%; } }
.hero .wrap { position: relative; z-index: 2; padding-bottom: clamp(56px, 8vw, 104px); padding-top: 140px; }
.hero h1 { color: var(--paper); max-width: 16ch; }
.hero .lede { color: rgba(252,250,245,.82); margin-top: 26px; max-width: 42ch; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero .btn.ghost { color: var(--paper); border-color: rgba(252,250,245,.42); }
.hero .btn.ghost:hover { background: var(--paper); color: var(--teal-deep); border-color: var(--paper); }

.hero-note {
  position: absolute; right: var(--gutter); bottom: clamp(56px, 8vw, 104px); z-index: 2;
  text-align: right; color: rgba(252,250,245,.62); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  max-width: 220px; line-height: 1.9;
}
@media (max-width: 900px) { .hero-note { display: none; } }

/* ---------- Ticker ---------- */

/* Light by default: a dark ticker directly under the dark hero read as one
   continuous green band. Teal-on-cream keeps it legible and lets the hero end. */
.ticker { background: var(--cream); color: var(--teal); overflow: hidden; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ticker .ticker-track span::after { background: var(--teal); opacity: .4; }
.ticker.on-dark { background: var(--teal-deep); color: rgba(252,250,245,.75); border-bottom: 0; border-top: 1px solid rgba(169,207,196,.16); }
.ticker.on-dark .ticker-track span::after { background: var(--mist); opacity: .55; }
.ticker-track { display: flex; gap: 0; width: max-content; animation: slide 42s linear infinite; }
.ticker-track span {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  padding: 0 30px; white-space: nowrap; display: inline-flex; align-items: center; gap: 30px;
}
.ticker-track span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--mist); opacity: .55; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Section scaffolding ---------- */

.pad { padding-block: var(--section); }
.paper { background: var(--paper); }
.dark { background: var(--teal-deep); color: var(--paper); }
.dark .lede, .dark p { color: rgba(252,250,245,.76); }
.dark .small { color: rgba(252,250,245,.56); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.split { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- Numbered feature grid ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-top: clamp(40px, 6vw, 72px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-top: clamp(40px, 6vw, 72px); }
.cell { background: var(--paper); padding: clamp(28px, 3.4vw, 44px) clamp(22px, 2.6vw, 36px); }
.dark .grid-3, .dark .grid-2 { background: rgba(169,207,196,.2); border-color: rgba(169,207,196,.2); }
.dark .cell { background: var(--teal-deep); }
.cell .num { font-family: var(--display); font-size: 12px; letter-spacing: .18em; color: var(--teal-lift); margin-bottom: 26px; }
.dark .cell .num { color: var(--mist); }
.cell h3 { margin-bottom: 12px; }
.cell p { font-size: 15.5px; line-height: 1.62; color: var(--muted); }
.dark .cell p { color: rgba(252,250,245,.72); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Stats ---------- */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 6vw, 72px); }
.stat .fig { font-family: var(--display); font-weight: 300; font-size: clamp(2.8rem, 6vw, 4.6rem); letter-spacing: -.04em; line-height: 1; color: var(--paper); }
.stat .cap { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: rgba(252,250,245,.7); max-width: 22ch; }
.stat .unit { font-size: .42em; letter-spacing: .04em; margin-left: .18em; vertical-align: .34em; color: var(--mist); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Diagram frames ---------- */

.figure { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: clamp(22px, 3vw, 40px); }
.dark .figure { background: rgba(252,250,245,.04); border-color: rgba(169,207,196,.22); }
.figure figcaption { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.dark .figure figcaption { border-color: rgba(169,207,196,.22); color: rgba(252,250,245,.6); }

/* ---------- Principles (sonodiathermy) ---------- */

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 34px); margin-top: clamp(44px, 6vw, 76px); }
.principle {
  background: rgba(252,250,245,.045);
  border: 1px solid rgba(169,207,196,.22);
  border-radius: 4px;
  padding: clamp(26px, 3vw, 38px);
  transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.principle:hover { background: rgba(252,250,245,.085); border-color: rgba(169,207,196,.42); transform: translateY(-3px); }
.principle .ico { height: 84px; margin-bottom: 30px; }
.principle h3 { color: var(--paper); margin-bottom: 10px; }
.principle .idx { font-size: 11px; letter-spacing: .2em; color: var(--mist); margin-bottom: 20px; }
@media (max-width: 900px) { .principles { grid-template-columns: 1fr; } }

/* ---------- "Falls away" statement ----------
   A centred typographic beat. Every other section on the homepage is the same
   two-column split; this one breaks the rhythm and carries the core claim.
   The strike-throughs draw themselves as the block reveals. */
/* The prose is held to a readable measure individually, so the struck list can
   use the full column width and keep all four items on one line. */
.falls { text-align: center; }
.falls .h2 { margin-inline: auto; max-width: 24ch; }
.falls .lede { margin: 24px auto 0; max-width: 52ch; }
.falls .verdict { margin-inline: auto; max-width: 34ch; }
.falls .sec-link { margin-inline: auto; }

.gone { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 3.4vw, 52px); list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: clamp(34px, 4vw, 48px) 0 0; border-top: 1px solid var(--line); }
.gone li { position: relative; font-family: var(--display); font-weight: 300; font-size: clamp(1.15rem, 2.4vw, 1.85rem); letter-spacing: -.022em; color: var(--muted); }
.gone li::after {
  content: ""; position: absolute; left: -5%; right: -5%; top: 54%; height: 1.5px;
  background: var(--teal); transform: scaleX(0); transform-origin: left;
  transition: transform .85s var(--ease);
}
.rv.in .gone li::after, .gone.rv.in li::after { transform: scaleX(1); }
.gone li:nth-child(1)::after { transition-delay: .15s; }
.gone li:nth-child(2)::after { transition-delay: .34s; }
.gone li:nth-child(3)::after { transition-delay: .53s; }
.gone li:nth-child(4)::after { transition-delay: .72s; }
.falls .verdict { margin-top: clamp(30px, 4vw, 42px); font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.3; color: var(--teal); }
@media (prefers-reduced-motion: reduce) {
  .gone li::after { transition: none; transform: scaleX(1); }
}

/* ---------- Species cards ---------- */

.species { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(40px, 6vw, 72px); }
.species-card { position: relative; border-radius: 4px; overflow: hidden; background: var(--sand); min-height: clamp(340px, 40vw, 480px); display: flex; align-items: flex-end; }
.species-card .bg { position: absolute; inset: 0; }
.species-card .bg img, .species-card .bg svg { width: 100%; height: 100%; object-fit: cover; }
.species-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,32,27,.9) 4%, rgba(7,32,27,.25) 52%, rgba(7,32,27,0) 78%);
}
.species-card .body { position: relative; z-index: 2; padding: clamp(24px, 3vw, 38px); color: var(--paper); }
.species-card .body h3 { color: var(--paper); margin-bottom: 10px; }
.species-card .body p { color: rgba(252,250,245,.8); font-size: 15.5px; max-width: 32ch; }
@media (max-width: 760px) { .species { grid-template-columns: 1fr; } }

/* ---------- Comparison table ---------- */

.compare { width: 100%; border-collapse: collapse; margin-top: clamp(40px, 5vw, 64px); font-size: 15.5px; }
.compare th, .compare td { text-align: left; padding: 20px 22px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-bottom: 14px; }
.compare thead th:last-child { color: var(--teal); }
.compare tbody th { font-weight: 500; color: var(--ink); width: 34%; }
.compare td { color: var(--muted); }
.compare td:last-child { color: var(--teal); font-weight: 500; background: rgba(11,95,78,.035); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) { .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; } .compare thead { display: none; } .compare tr { border-bottom: 1px solid var(--line); padding: 12px 0; } .compare th, .compare td { border: 0; padding: 6px 0; } .compare td::before { content: attr(data-l) " — "; color: var(--muted); font-weight: 400; } }

/* ---------- Evidence / disclosure ---------- */

.notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(36px, 5vw, 60px); }
.note { padding-top: 22px; border-top: 1px solid var(--line); }
.note h4 { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.note p { font-size: 14.5px; color: var(--muted); }
@media (max-width: 700px) { .notes { grid-template-columns: 1fr; } }

/* ---------- Before / after cases ----------
   Each case is one sleek card: the two photos fused with a hairline seam,
   kept deliberately small, with quiet caption pills on the images. */
.ba-cases { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(36px, 4vw, 56px); }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 0 rgba(16,26,23,.06); }
.ba { margin: 0; position: relative; }
/* Portrait 713×1275, re-cropped from the practice's original before/after
   frames to the widest area free of their burnt-in labels. The box matches the
   file ratio exactly, so the whole frame shows and nothing is cropped away. */
.ba img { width: 100%; height: auto; aspect-ratio: 713 / 1203; object-fit: contain;
  background: var(--paper, #f3efe7); display: block; }
.ba figcaption {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(252,250,245,.92); color: var(--teal);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  padding: 5px 11px; border-radius: 999px;
}
@media (max-width: 760px) { .ba-cases { grid-template-columns: 1fr; } }

/* ---------- Demo form ---------- */

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(252,250,245,.6); }
.field input, .field select, .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid rgba(169,207,196,.35);
  color: var(--paper); font-family: var(--body); font-size: 16px; padding: 10px 0;
  border-radius: 0; transition: border-color .35s var(--ease);
}
.field select option { color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--mist); }
.field input::placeholder, .field textarea::placeholder { color: rgba(252,250,245,.34); }
.form .btn { justify-self: start; margin-top: 12px; }
.form-status { grid-column: 1/-1; font-size: 14px; color: var(--mist); min-height: 20px; }
@media (max-width: 700px) { .form { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */

/* The section above the footer is dark on every page. A dark footer merged with
   it into a single heavy slab, so the footer is light: it closes the page and
   keeps the dark demo band reading as its own block. */
.footer { background: var(--cream); color: var(--muted); padding-block: clamp(56px, 7vw, 88px) 34px; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 48px; }
.footer h5 { margin: 0 0 18px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.footer a { display: block; margin-bottom: 10px; font-size: 14.5px; color: var(--ink-soft); transition: color .3s var(--ease); }
.footer a:hover { color: var(--teal); }
.footer .tagline { margin-top: 20px; font-size: 14.5px; max-width: 30ch; line-height: 1.6; color: var(--muted); }
.footer .wordmark .name { color: var(--teal); }
.footer-bot { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
@media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-top > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Reveal ---------- */

.rv { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .09s; }
.rv[data-d="2"] { transition-delay: .18s; }
.rv[data-d="3"] { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
  html { scroll-behavior: auto; }
  .pulse-ring { animation: none !important; }
  /* A frozen pulse would read as a stray bar, so it goes rather than stops. */
  .gap-field { animation: none; opacity: .8; }
  .gap-pulse { display: none; }
}

/* ---------- Animated emission rings (hero + diagrams) ---------- */
.pulse-ring { transform-origin: center; animation: ring 3.4s var(--ease) infinite; }
.pulse-ring:nth-of-type(2) { animation-delay: .55s; }
.pulse-ring:nth-of-type(3) { animation-delay: 1.1s; }
@keyframes ring {
  0%   { opacity: 0; transform: scale(.55); }
  22%  { opacity: .85; }
  100% { opacity: 0; transform: scale(1.35); }
}

/* ============================================================
   Science page — long-form explanatory layout
   ============================================================ */

.science .nav { background: rgba(252,250,245,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgba(16,26,23,.07); }
.science .nav-links a[aria-current="page"] { color: var(--teal); }
.science .nav-links a[aria-current="page"]::after { width: 100%; }

.sci-hero { background: var(--paper); padding: clamp(140px, 16vw, 210px) 0 clamp(56px, 7vw, 88px); }

/* Contents rail */
.toc { background: var(--paper); border-block: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.toc .wrap { overflow-x: auto; }
.toc ol { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.toc li { flex: none; }
.toc a { display: flex; align-items: baseline; gap: 9px; padding: 16px 22px 16px 0; margin-right: 22px; font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); }
.toc a span { font-size: 10.5px; letter-spacing: .14em; color: var(--teal-lift); }
.toc a:hover { color: var(--teal); border-color: var(--teal); }
@media (max-width: 700px) { .toc { position: static; } }

/* Chapter heading */
.chapter { display: flex; align-items: baseline; gap: clamp(16px, 2.4vw, 28px); margin-bottom: clamp(32px, 4vw, 52px); }
.chapter .ch-num { font-family: var(--display); font-weight: 300; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; letter-spacing: -.04em; color: var(--line); flex: none; }
.dark .chapter .ch-num, .chapter.on-dark .ch-num { color: rgba(169,207,196,.34); }

/* Prose */
.prose { max-width: 62ch; }
.prose p { font-size: 17px; line-height: 1.72; color: var(--ink-soft); margin-bottom: 1.15em; }
.dark .prose p { color: rgba(252,250,245,.76); }
.prose .lead-para { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.5; color: var(--ink); font-weight: 400; letter-spacing: -.012em; margin-bottom: 1.1em; }
.dark .prose .lead-para { color: var(--paper); }
.prose strong { font-weight: 600; color: var(--ink); }
.dark .prose strong { color: var(--paper); }
.prose .pull { font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.32; color: var(--teal); border-left: 2px solid var(--teal); padding-left: clamp(18px, 2.4vw, 28px); margin-block: 1.6em; }

/* Phenomenon blocks */
.phen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(169,207,196,.22); }
.phen:first-of-type { border-top: 0; }
.phen.reverse .phen-i { order: 2; }
.phen .idx { display: block; font-size: 11px; letter-spacing: .2em; color: var(--mist); margin-bottom: 16px; }
.phen h3 { color: var(--paper); margin-bottom: 18px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 300; letter-spacing: -.025em; }
.phen p { font-size: 16px; line-height: 1.68; color: rgba(252,250,245,.76); margin-bottom: 1em; }
.phen .phen-g { background: rgba(252,250,245,.04); border: 1px solid rgba(169,207,196,.22); border-radius: 4px; padding: clamp(16px, 2vw, 26px); }
@media (max-width: 880px) { .phen { grid-template-columns: 1fr; } .phen.reverse .phen-i { order: 0; } }

.spec-inline { display: flex; flex-wrap: wrap; gap: 0 clamp(24px, 3vw, 40px); margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(169,207,196,.22); }
.spec-inline div { }
.spec-inline dt { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); margin-bottom: 5px; }
.spec-inline dd { margin: 0; font-size: 15px; color: var(--paper); }

/* Depth layers */
.layers { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.layer { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; padding: clamp(24px, 3vw, 34px) 0; border-bottom: 1px solid var(--line); position: relative; }
.layer-bar { position: absolute; left: 0; top: 0; height: 3px; width: var(--w); background: linear-gradient(to right, var(--teal), rgba(11,95,78,.08)); }
.layer-t h4 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 500; letter-spacing: -.015em; }
.layer-t span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-lift); }
.layer p { font-size: 15.5px; color: var(--muted); line-height: 1.65; max-width: 60ch; }
@media (max-width: 700px) { .layer { grid-template-columns: 1fr; gap: 12px; } }

.callout { margin-top: clamp(36px, 4vw, 56px); background: rgba(11,95,78,.05); border: 1px solid rgba(11,95,78,.16); border-radius: 4px; padding: clamp(24px, 3vw, 36px); max-width: 72ch; }
.callout h4 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 500; color: var(--teal); }
.callout p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.66; }

/* Timeline */
.timeline { list-style: none; margin: clamp(36px, 5vw, 60px) 0 0; padding: 0; counter-reset: tl; }
.timeline li { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: clamp(20px, 3vw, 44px); row-gap: 0; padding: clamp(22px, 2.6vw, 30px) 0; border-top: 1px solid rgba(169,207,196,.22); }
.timeline li:last-child { border-bottom: 1px solid rgba(169,207,196,.22); }
/* The timestamp spans both rows so the heading and body share column two. */
.tl-t { grid-row: 1 / span 2; font-family: var(--display); font-size: 13px; letter-spacing: .1em; color: var(--mist); padding-top: 4px; }
.timeline h4 { grid-column: 2; margin: 0 0 8px; font-size: 1.2rem; font-weight: 400; letter-spacing: -.02em; color: var(--paper); }
.timeline p { grid-column: 2; margin: 0; font-size: 15.5px; line-height: 1.65; color: rgba(252,250,245,.72); max-width: 62ch; }
@media (max-width: 640px) {
  .timeline li { grid-template-columns: 1fr; gap: 8px; }
  .tl-t { grid-row: auto; }
  .timeline h4, .timeline p { grid-column: 1; }
}

/* Device photo above the spec grid: a wide banner crop, so the square source
   reads as a calm product still rather than dominating the page. */
.device-shot { margin: clamp(28px, 4vw, 44px) 0 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.device-shot img { width: 100%; height: clamp(260px, 36vw, 440px); object-fit: cover; object-position: center 40%; display: block; }

/* Specifications */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(36px, 5vw, 60px); border-radius: 4px; overflow: hidden; }
.spec-col { background: var(--paper); padding: clamp(24px, 3vw, 36px); }
.spec-col h4 { margin: 0 0 22px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.spec-col dl { margin: 0; }
.spec-col dl div { padding: 12px 0; border-top: 1px solid var(--line); }
.spec-col dl div:first-child { border-top: 0; padding-top: 0; }
.spec-col dt { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.spec-col dd { margin: 0; font-size: 15.5px; color: var(--ink); }
@media (max-width: 860px) { .spec-grid { grid-template-columns: 1fr; } }

/* ============================================================
   v2 — restructure: leaner hero, page heroes, versus table,
   animated principle icons, line-art species cards
   ============================================================ */

/* ---- Hero: smaller, sleeker type ---- */
.hero h1.display { font-size: clamp(2.1rem, 4.4vw, 3.5rem); letter-spacing: -.028em; line-height: 1.04; max-width: 15ch; }
.hero .lede { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.6; margin-top: 22px; max-width: 44ch; color: rgba(252,250,245,.78); }
.hero .eyebrow { margin-bottom: 18px; }
.hero .cta-row { margin-top: 30px; }
/* The source image is portrait, so it fills the frame's width and object-position
   alone cannot move it. Scale and shift instead, so the handpiece-on-leg sits
   right of the headline rather than behind it. */
.hero-media img { object-position: 50% 52%; transform: scale(1.16) translateX(17%); transform-origin: center; }
@media (max-width: 760px) { .hero-media img { transform: none; object-position: 40% 56%; } }

/* ---- Page hero for subpages ---- */
.page-hero { background: var(--paper); padding: clamp(130px, 15vw, 190px) 0 clamp(48px, 6vw, 76px); }
.page-hero h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 300; letter-spacing: -.032em; max-width: 20ch; }
.page-hero .lede { max-width: 54ch; margin-top: 26px; font-size: clamp(1.05rem, 1.4vw, 1.22rem); }

/* ---- Section intro used across pages ---- */
.sec-head { max-width: 30ch; }
.sec-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; font-size: 14px; font-weight: 500; color: var(--teal); border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: gap .35s var(--ease); }
.sec-link:hover { gap: 15px; }
.dark .sec-link, .sec-link.on-dark { color: var(--mist); }

/* ---- Versus table: high-contrast them / us ---- */
.versus { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr); margin-top: clamp(40px, 5vw, 64px); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.versus > div { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.versus .vh { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; padding-top: 22px; padding-bottom: 18px; align-items: flex-end; }
.versus .row-l { font-weight: 500; color: var(--ink); background: var(--paper); }
.versus .col-them { background: var(--sand); color: var(--muted); }
.versus .col-them.vh { color: var(--muted); }
.versus .col-us { background: var(--teal); color: var(--paper); font-weight: 500; }
.versus .col-us.vh { color: var(--mist); background: var(--teal-deep); }
.versus .col-them span, .versus .col-us span { display: inline-flex; align-items: center; gap: 11px; }
.versus .col-them span::before { content: "✕"; font-size: 13px; color: #B4593D; flex: none; }
.versus .col-us span::before { content: "✓"; font-size: 13px; color: var(--mist); flex: none; }
.versus > div:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 760px) {
  .versus { grid-template-columns: 1fr 1fr; }
  .versus .row-l { grid-column: 1 / -1; padding-bottom: 6px; border-bottom: 0; }
  .versus .vh.row-l { display: none; }
}

/* ---- Animated principle icons ---- */
.wave-clip { overflow: hidden; }
@keyframes waveShift { to { transform: translateX(-96px); } }
.wave-anim { animation: waveShift 2.8s linear infinite; }

@keyframes o3Float {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(-5px); opacity: 1; }
}
.o3 { animation: o3Float 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.o3.b { animation-delay: .5s; }
.o3.c { animation-delay: 1s; }

@keyframes cellBreath {
  0%, 100% { transform: scale(.82); }
  50%      { transform: scale(1.06); }
}
.cell-breath { animation: cellBreath 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cell-breath.slow { animation-duration: 3s; animation-delay: 1.5s; }

@media (prefers-reduced-motion: reduce) {
  .wave-anim, .o3, .cell-breath { animation: none !important; }
}

/* ---- Species cards with line-art illustration ---- */
.species-card .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8% 6% 26%; }
.species-card .art svg { width: 100%; height: 100%; }
.species-card.illus { background: linear-gradient(150deg, #0F6B57 0%, #073E33 78%); }
.species-card.illus::after { background: linear-gradient(to top, rgba(7,32,27,.92) 6%, rgba(7,32,27,.15) 58%, rgba(7,32,27,0) 82%); }

/* ============================================================
   Handheld tuning — iPhone and iPad
   ============================================================ */

/* iOS inflates text in landscape unless told not to. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Notched iPhones in landscape put the gutter under the sensor housing. */
@supports (padding: max(0px)) {
  .wrap { padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
  .footer-bot, .toc .wrap { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---- Technical diagrams ----
   Two opposite failures had to be fixed at once. Wide diagrams (viewBox 760 and
   900) shrank until their 10px labels rendered at ~3px on a phone; narrow ones
   (viewBox 420) stretched to 1.7x on a tablet once their column collapsed,
   rendering 11px labels at ~19px. So: wide ones split or scroll, narrow ones
   get a ceiling. The target is a label that lands near 10px either way. */

/* A narrow diagram has no business filling a 834px iPad column. */
/* The UA stylesheet gives <figure> a 40px inline margin that was never reset,
   so every figure on the site was rendering 80px narrower than its own column.
   Reclaiming that is the single biggest win for diagram legibility, at every
   viewport, not just handheld. */
.figure { margin-inline: 0; }

/* A narrow diagram has no business filling a 834px iPad column. */
.phen-g svg, #thermal .figure svg { max-width: 480px; margin-inline: auto; }
/* Nor should a stacked half balloon on a small tablet. Same ceiling as
   .phen-g above, so no diagram anywhere exceeds roughly 1.1x. */
.dia-half { max-width: 480px; margin-inline: auto; }

/* Diagrams that cannot be split keep a legible width and scroll inside their
   own figure. Only the drawing scrolls; the caption stays put. */
.fig-x { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.fig-x > svg { display: block; }

/* Diagrams built as two side-by-side panels are stacked instead of scrolled:
   each half then gets the full column width and stays legible without a swipe. */
.dia-half { display: none; }

@media (max-width: 760px) {
  .dia-full { display: none; }
  .dia-half { display: block; }
  .dia-half + .dia-half { margin-top: 22px; }
  .fig-x > svg { min-width: 660px; }
  /* Reclaim frame padding for the drawing itself on a phone. */
  .figure { padding: 12px; }
  .phen .phen-g { padding: 10px; }
  /* Comfortable thumb targets in the footer and the chapter index. */
  .footer a { padding-block: 7px; margin-bottom: 4px; }
  .toc a { padding-block: 18px; }
}

/* iPad portrait: the versus table is readable at two columns, but its cells
   were built for a desktop measure and crowd at this width. */
@media (min-width: 761px) and (max-width: 1024px) {
  .versus > div { padding: 15px 16px; }
  .versus .vh { font-size: 10px; letter-spacing: .12em; }
}

/* The depth cross-section was redrawn compact (440x286) with larger type, so
   it no longer needs a full-width row to stay legible: it sits beside the prose
   and the section loses roughly a screen of height. min-width is cleared so the
   drawing never triggers the .fig-x swipe at 440 wide. */
#depth .fig-x > svg { max-width: 500px; min-width: 0; margin-inline: auto; }

/* Three layers read as one comparison, not three stacked essays: a single row
   of columns, each capped by its own depth bar. */
#depth .layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 34px); margin-top: clamp(30px, 3.4vw, 46px); border-top: 0; }
#depth .layer { grid-template-columns: 1fr; gap: 8px; padding: 18px 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
#depth .layer-t h4 { font-size: 1.02rem; margin-bottom: 4px; }
#depth .layer p { font-size: 14.5px; line-height: 1.6; max-width: none; }
@media (max-width: 760px) {
  #depth .layers { grid-template-columns: 1fr; gap: 0; }
  #depth .layer { padding: 15px 0; }
}

/* ---- Data notice under the demo form (GDPR art. 13 information at point of collection) ---- */
.form-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: rgba(252,250,245,.62); max-width: 62ch; }
.form-note a { color: var(--mist); border-bottom: 1px solid currentColor; }
/* Privacy notice page */
.legal h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); margin: 2.2em 0 .7em; color: var(--ink); }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 1.2em; margin: 0 0 1.15em; }
.legal li { font-size: 17px; line-height: 1.72; color: var(--ink-soft); margin-bottom: .45em; }
.legal a { color: var(--teal); border-bottom: 1px solid currentColor; }
.footer-bot span { line-height: 1.7; }

/* Footer button that must look like the links around it ("Cookie settings") */
.footer .linklike { display: block; background: none; border: 0; padding: 0; margin: 0 0 10px; font: inherit; font-size: 14.5px; color: var(--ink-soft); cursor: pointer; text-align: left; transition: color .3s var(--ease); }
.footer .linklike:hover { color: var(--teal); }

/* Tables and inline buttons in the legal pages */
.legal .table-scroll { overflow-x: auto; margin: 0 0 1.6em; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.legal th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; color: var(--ink); }
.legal .btn { margin-top: 6px; }
.legal address { font-style: normal; }

/* ---- Cookie consent banner ---- */
.ck { position: fixed; inset: auto 0 0 0; z-index: 9999; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); pointer-events: none; }
.ck[hidden] { display: none; }
.ck-box { pointer-events: auto; max-width: 760px; margin: 0 auto; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(16,26,23,.18); padding: 22px 24px 20px; font-family: var(--body); }
.ck-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ck-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.ck-x { background: none; border: 0; padding: 0 2px; margin: -4px -4px 0 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.ck-x:hover { color: var(--ink); }
.ck-text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.ck-text a { color: var(--teal); border-bottom: 1px solid currentColor; }
.ck-prefs { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ck-prefs[hidden] { display: none; }
.ck-cat { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.ck-cat strong { display: block; color: var(--ink); font-weight: 600; }
.ck-cat small { display: block; color: var(--muted); font-size: 13px; }
.ck-cat input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--teal); }
.ck-cat .ck-always { flex: none; font-size: 12px; color: var(--teal); letter-spacing: .04em; margin-top: 3px; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ck-btn { flex: 1 1 160px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--teal); background: var(--teal); color: var(--paper); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.ck-btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.ck-btn.ghost { background: transparent; color: var(--teal); }
.ck-btn.ghost:hover { background: var(--cream); }
@media (max-width: 560px) { .ck-box { padding: 18px 18px 16px; border-radius: 12px; } .ck-btn { flex-basis: 100%; } }
@media (prefers-reduced-motion: no-preference) { .ck-box { animation: ck-in .5s var(--ease) both; } @keyframes ck-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } }
.legal h3 { font-size: 1.05rem; font-weight: 600; margin: 1.6em 0 .5em; color: var(--ink); }