/* upbeep.app home page: a complete first screen, with more below. Loaded after site.css, on the
   home page only. The story's motion is keyed on data-scene (1-6), which
   site/assets/home.js sets; every keyframe below restarts when its scene
   begins. Resting rules give each scene's END state, so a reader who prefers
   reduced motion, or has no script, still sees a complete picture. No inline
   styles anywhere (the site's CSP forbids them). */

/* ------------------------------------------------------------------ tokens */

.page-home {
  --display: "Inter Variable", Inter, system-ui, sans-serif;
  --home-w: clamp(1360px, 82vw, 1640px);
  --h-bg: #f4f6f4;
  --h-dot: rgb(6 62 69 / 0.14);
  --h-glow-1: rgb(20 176 131 / 0.13);
  --h-glow-2: rgb(38 150 170 / 0.1);
  --h-ink: #0b1210;
  --h-ink-2: #46514e;
  --h-ink-3: #6d7874;
  --h-line: rgb(10 30 26 / 0.09);
  --h-line-2: rgb(10 30 26 / 0.16);
  --h-card: rgb(255 255 255 / 0.72);
  --h-card-solid: #ffffff;
  --h-accent: #0a7257;
  --h-accent-soft: #e2f4ed;
  --h-accent-line: #a9dcc8;
  --h-shadow: 0 1px 2px rgb(6 40 38 / 0.06), 0 30px 60px -28px rgb(6 62 69 / 0.38), 0 60px 110px -50px rgb(14 143 108 / 0.35);

  /* the story */
  --f-card: #ffffff;
  --f-paper: #f1f7f5;
  --f-room: #ffffff;
  --f-room-line: #cfdbd8;
  --f-hall: #e7f0ed;
  --f-label: #51605c;
  --f-furn: #e5eeeb;
  --f-staff: #0d5b55;
  --f-patient: #a6b4b0;
  --f-veil: rgb(241 247 245 / 0.8);
  --f-bezel: #14191c;
  --f-chart: #f3f6f6;
  --f-chart-side: #e4eae9;
  --f-chart-line: #d3dcdb;
  --f-tooth: #dde5e3;
  --f-warn: #f2a30c;
  --f-glow: #14b083;
  --f-floor: rgb(6 62 69 / 0.16);
}

@media (prefers-color-scheme: dark) {
  .page-home {
    --h-bg: #060b0a;
    --h-dot: rgb(143 226 196 / 0.16);
    --h-glow-1: rgb(47 163 126 / 0.18);
    --h-glow-2: rgb(38 130 160 / 0.13);
    --h-ink: #eef6f3;
    --h-ink-2: #b6c6c1;
    --h-ink-3: #8b9c97;
    --h-line: rgb(255 255 255 / 0.1);
    --h-line-2: rgb(255 255 255 / 0.2);
    --h-card: rgb(14 25 27 / 0.7);
    --h-card-solid: #0f1a1c;
    --h-accent: #5fcaa3;
    --h-accent-soft: #0f2a21;
    --h-accent-line: #1d5a46;
    --h-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 40px 80px -30px rgb(0 0 0 / 0.75), 0 0 120px -40px rgb(47 163 126 / 0.4);

    --f-card: #0d1719;
    --f-paper: #091214;
    --f-room: #132023;
    --f-room-line: #223338;
    --f-hall: #0e191c;
    --f-label: #9db0ab;
    --f-furn: #1a2b2f;
    --f-staff: #5fd6b5;
    --f-patient: #587069;
    --f-veil: rgb(6 12 13 / 0.78);
    --f-bezel: #0a0e10;
    --f-chart: #e9eeee;
    --f-chart-side: #d8dfdf;
    --f-chart-line: #c6d0cf;
    --f-tooth: #d0d9d7;
    --f-floor: rgb(0 0 0 / 0.5);
  }
}

/* ------------------------------------------------------------------- frame */

/* Adam, SITE-01, 2026-10-29: keep the original viewport-wide frame when the page gains a scrollbar. */
html:has(.page-home) {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.page-home {
  width: 100vw;
}

.home-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.page-home {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(900px 640px at 90% -10%, var(--h-wash-1), transparent 62%),
    radial-gradient(760px 560px at -8% 110%, var(--h-wash-2), transparent 60%),
    var(--h-bg);
  color: var(--h-ink);
}

/* A faint dotted grid, brightest behind the film, gone at the edges. */
.home-screen::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 100dvh;
  background-image: radial-gradient(var(--h-dot) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 68% 46%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 58% at 68% 46%, #000 0%, transparent 78%);
  content: "";
  pointer-events: none;
}

/* Two soft lights that drift very slowly behind everything, so the page is never dead still. */
.page-home::after {
  position: fixed;
  z-index: -2;
  inset: -12%;
  background:
    radial-gradient(38% 42% at 74% 30%, var(--h-glow-1), transparent 70%),
    radial-gradient(34% 40% at 18% 78%, var(--h-glow-2), transparent 70%);
  content: "";
  pointer-events: none;
  animation: h-drift 32s ease-in-out infinite alternate;
}

@keyframes h-drift {
  from {
    transform: translate3d(-2%, -1.5%, 0) scale(1);
  }

  to {
    transform: translate3d(2.5%, 2%, 0) scale(1.06);
  }
}

/* A very short window (a phone on its side) cannot hold the complete first screen. */
@media (max-height: 520px) {
  .home-screen {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }
}

/* ------------------------------------------------------------ header, footer */

.page-home .site-header {
  border-bottom: 0;
  background: transparent;
}

.page-home .site-header .brand {
  color: var(--h-ink);
}

.page-home .site-header {
  --mark-run: #0e8f6c;
  --mark-step: #0e8f6c;
  --mark-head: #0e8f6c;
}

@media (prefers-color-scheme: dark) {
  .page-home .site-header,
  .page-home .site-footer {
    --mark-run: #1fb487;
    --mark-step: #4fe0ae;
    --mark-head: #9ff5d6;
  }
}

.page-home .site-header .wrap,
.page-home .home-foot .wrap {
  max-width: var(--home-w);
  padding-right: clamp(20px, 3.4vw, 56px);
  padding-left: clamp(20px, 3.4vw, 56px);
}

.page-home .site-header .wrap {
  min-height: 76px;
}

.page-home .brand svg {
  width: 30px;
  height: 30px;
}

.page-home .brand {
  font-size: 1.25rem;
}

.page-home .site-nav a {
  color: var(--h-ink-2);
}

.page-home .site-nav a:hover {
  color: var(--h-ink);
}

.page-home .nav-cta {
  min-height: 40px;
  padding: 0 20px;
  background: var(--h-ink);
  color: var(--h-bg);
  box-shadow: 0 8px 20px -10px rgb(10 21 19 / 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.page-home .nav-cta:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgb(10 21 19 / 0.7);
}

.page-home .site-footer {
  border-top: 0;
  background: transparent;
}

.home-foot {
  color: var(--h-ink-3);
  font-size: 0.8125rem;
}

.home-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 32px;
  min-height: 58px;
  padding-top: 8px;
  padding-bottom: 12px;
}

.home-foot li + li {
  margin-top: 0;
}

.home-foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-foot .facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--h-ink-3);
}

.home-foot .facts svg {
  width: 14px;
  height: 14px;
  color: var(--h-accent);
}

.home-foot a {
  color: var(--h-ink-2);
  text-decoration: none;
}

.home-foot a:hover {
  color: var(--h-ink);
  text-decoration: underline;
}

/* -------------------------------------------------------------------- main */

.page-home main {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: clamp(4px, 1.2vh, 14px) 0 clamp(4px, 1.2vh, 14px);
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.7fr) minmax(0, 1.3fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 3.6vw, 72px);
  width: 100%;
  max-width: var(--home-w);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 0 clamp(20px, 3.4vw, 56px);
}

.home-copy {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 3vh, 30px);
  min-width: 0;
}

/* The headline is sized by the column it stands in, so it is three lines at every width.
   Sans-serif, as Adam chose on 30 September from the preview's side-by-side (SITE-01). */
.home-copy h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, 17cqw, 5.2rem);
  font-weight: 720;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.home-copy h1 em {
  position: relative;
  color: var(--h-accent);
  font-style: normal;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.home-copy h1 em svg {
  position: absolute;
  left: 2%;
  bottom: -0.06em;
  width: 96%;
  height: 0.2em;
  overflow: visible;
}

.home-copy h1 em path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.45;
  animation: h-draw 1s cubic-bezier(0.3, 0.7, 0.2, 1) 0.9s forwards;
}

@keyframes h-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.home-copy .lede {
  max-width: 24em;
  margin: 0;
  color: var(--h-ink-2);
  font-size: clamp(1.05rem, 0.6rem + 0.8vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
}

/* buttons */

.home-copy .actions {
  align-items: center;
  gap: 10px;
  margin: 0;
}

.home-copy .button {
  min-height: 56px;
  padding: 0 28px;
  border-color: var(--h-line-2);
  background: transparent;
  color: var(--h-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease;
}

.home-copy .button:hover {
  border-color: var(--h-ink-3);
  background: var(--h-card-solid);
}

.home-copy .button.primary {
  border-color: transparent;
  background: var(--h-ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 14px 28px -12px rgb(11 18 16 / 0.65),
    0 2px 4px rgb(11 18 16 / 0.25);
  color: var(--h-bg);
}

.home-copy .button.primary:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    0 20px 34px -12px rgb(11 18 16 / 0.7),
    0 2px 4px rgb(11 18 16 / 0.25);
}

@media (max-width: 1400px) {
  .home-copy .button {
    padding: 0 22px;
    font-size: 1rem;
  }
}

.home-copy .button svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.home-copy .button[hidden] {
  display: none;
}

.h-price {
  margin: -6px 0 0;
  color: var(--h-ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* where it runs: two short lines */

.h-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--h-ink-2);
  font-size: 0.9375rem;
  line-height: 1.4;
  list-style: none;
}

.h-meta li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.h-meta .dot {
  position: relative;
  top: 0.05em;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--h-accent);
}

.h-meta .dot.soon {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--h-ink-3);
}

.h-meta strong {
  color: var(--h-ink);
  font-weight: 650;
}

.h-origin {
  margin: 0;
  color: var(--h-ink-3);
  font-size: 0.875rem;
}

.h-origin strong {
  color: var(--h-ink-2);
  font-weight: 650;
}

.demo-col {
  display: block;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* the story, in a popup */

.story {
  width: min(1060px, 94vw);
  max-width: none;
  height: min(780px, 90dvh);
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--h-ink);
}

.story:not([open]) {
  display: none;
}

.story::backdrop {
  background: rgb(4 10 9 / 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.story .film {
  height: 100%;
}

.story-x {
  position: absolute;
  z-index: 10;
  top: -16px;
  right: -16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--h-line-2);
  border-radius: 50%;
  background: var(--h-card-solid);
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.5);
  color: var(--h-ink);
  cursor: pointer;
}

.story-x svg {
  width: 18px;
  height: 18px;
}

.story-x:focus-visible {
  outline: 2px solid var(--h-accent);
  outline-offset: 3px;
}

/* -------------------------------------------------------------- the film card */

.film {
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* The card is as wide as the space allows AND as wide as its height allows,
   so the whole plan, the caption and the chapter tabs are always in view. */
.film-card {
  --foot-h: clamp(132px, 19dvh, 172px);
  --art-ar: 1.5625;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100cqw, calc((100cqh - var(--foot-h)) * var(--art-ar)));
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 30px;
  background:
    radial-gradient(70% 55% at 50% 0%, rgb(255 255 255 / 0.9), transparent 70%) padding-box,
    linear-gradient(180deg, var(--f-card), var(--f-paper)) padding-box,
    linear-gradient(145deg, rgb(14 143 108 / 0.55), rgb(10 30 26 / 0.1) 38%, rgb(255 255 255 / 0.9) 62%, rgb(6 92 100 / 0.4)) border-box;
  box-shadow: var(--h-shadow);
}

@media (prefers-color-scheme: dark) {
  .film-card {
    background:
      radial-gradient(70% 55% at 50% 0%, rgb(47 163 126 / 0.14), transparent 70%) padding-box,
      linear-gradient(180deg, var(--f-card), var(--f-paper)) padding-box,
      linear-gradient(145deg, rgb(47 163 126 / 0.6), rgb(255 255 255 / 0.08) 40%, rgb(255 255 255 / 0.2) 60%, rgb(6 92 100 / 0.6)) border-box;
  }
}

@supports not (width: 1cqw) {
  .film-card {
    width: 100%;
  }
}

.film-card::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
  content: "";
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .film-card::after {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
  }
}

.film-top {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.film-top .ctl {
  pointer-events: auto;
}

/* The controls sit together at the right: the voice (when the story has one), then play and pause. */
.film-top > .ctl:first-of-type {
  margin-left: auto;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 13px 4px 5px;
  border: 1px solid var(--h-line);
  border-radius: 999px;
  background: var(--h-card);
  color: var(--h-ink-2);
  font-size: 0.8125rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.chip-n {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--h-accent);
  color: var(--h-bg);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chip.timer {
  padding-left: 12px;
  border-color: rgb(217 138 12 / 0.4);
  background: rgb(255 246 224 / 0.92);
  color: #7a4a00;
  font-variant-numeric: tabular-nums;
}

@media (prefers-color-scheme: dark) {
  .chip.timer {
    background: rgb(52 36 8 / 0.85);
    color: #ffc76a;
  }
}

.chip.timer[hidden] {
  display: none;
}

.chip.timer .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e08a00;
  animation: h-blink 1s ease-in-out infinite;
}

.chip.timer .timer-l {
  font-weight: 500;
  opacity: 0.85;
}

@keyframes h-blink {
  50% {
    opacity: 0.25;
  }
}

.ctl {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--h-line);
  border-radius: 50%;
  background: var(--h-card);
  color: var(--h-ink);
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.ctl:hover {
  background: var(--h-card-solid);
  transform: scale(1.06);
}

.ctl svg {
  width: 17px;
  height: 17px;
}

.ctl .i-play {
  display: none;
}

[data-film][data-paused] .ctl .i-play {
  display: block;
}

[data-film][data-paused] .ctl .i-pause {
  display: none;
}

.ctl-voice .i-voice-off,
.ctl-voice[aria-pressed="false"] .i-voice-on {
  display: none;
}

.ctl-voice[aria-pressed="false"] .i-voice-off {
  display: block;
}

.art {
  flex: none;
  width: 100%;
  aspect-ratio: var(--art-ar);
  overflow: hidden;
}

.film-art {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transition: transform 1.1s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.film-foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  height: var(--foot-h);
  padding: clamp(10px, 1.6vh, 16px) clamp(18px, 2.4vw, 30px) clamp(12px, 1.8vh, 18px);
  border-top: 1px solid var(--h-line);
  background: var(--h-card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.caption {
  min-height: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.caption.is-out {
  opacity: 0;
  transform: translateY(6px);
}

.caption .line {
  margin: 0;
  color: var(--h-ink);
  font-size: clamp(1.1rem, 0.6rem + 0.95vw, 1.6rem);
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.caption .sub {
  margin: 6px 0 0;
  color: var(--h-ink-2);
  font-size: clamp(0.875rem, 0.6rem + 0.4vw, 1.0625rem);
  line-height: 1.4;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tab {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 0 0;
  border: 0;
  background: none;
  color: var(--h-ink-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
}

.tab::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--h-line-2);
  content: "";
}

.tab .fill {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--h-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.tab.is-done .fill {
  transform: scaleX(1);
}

.tab.is-on {
  color: var(--h-ink);
}

.tab:hover {
  color: var(--h-ink);
}

.tab-t {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctl:focus-visible,
.tab:focus-visible,
.home-copy .button:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--h-accent);
  outline-offset: 3px;
}

/* The drawing inside the story is styled by site/assets/film.css. */

/* Paused: every animation holds where it is. */

[data-film][data-paused] .film-art * {
  animation-play-state: paused !important;
}

/* ------------------------------------------------------------- small screens */

@media (max-width: 1080px) and (min-width: 901px) {
  .home-grid {
    grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
    gap: 28px;
  }

  .home-copy {
    gap: 16px;
  }

  .home-copy h1 {
    font-size: clamp(2.4rem, 1rem + 3.6vw, 3.7rem);
  }

  .h-origin {
    display: none;
  }
}

@media (max-height: 800px) and (min-width: 901px) {
  .h-origin {
    display: none;
  }
}

@media (max-height: 680px) and (min-width: 901px) {
  .home-copy {
    gap: 12px;
  }

  .home-copy h1 {
    font-size: clamp(2.2rem, 1rem + 3.4vw, 3.9rem);
  }
}

/* A short window (a laptop's browser with its toolbars open): the copy gives up what it can spare. */

@media (max-height: 640px) and (min-width: 901px) {
  .home-copy {
    gap: 10px;
  }

  .home-copy h1 {
    font-size: clamp(2.1rem, min(17cqw, 9vh), 3.6rem);
  }

  .home-copy .lede {
    font-size: 1rem;
  }

  .home-copy .button {
    min-height: 46px;
  }

  .h-meta {
    display: none;
  }
}

/* Phones and narrow windows: the headline, the buttons, then the demo,
   filling the screen. */

@media (max-width: 900px) {
  .page-home .site-nav {
    display: block;
    order: 3;
    width: 100%;
    margin-top: 0;
    border-top: 0;
  }

  .page-home .site-nav ul {
    justify-content: space-between;
    gap: 4px;
    padding: 4px 0 8px;
  }

  .page-home .site-nav a {
    font-size: 12.5px;
    white-space: nowrap;
  }

  /* SITE-01 Spanish: its six menu words run about 10px wider than the English ones at 360px. */
  .page-home:lang(es) .site-nav a {
    letter-spacing: -0.02em;
  }

  .page-home .site-header .wrap {
    min-height: 58px;
  }

  .page-home .brand {
    font-size: 1.1rem;
  }

  .page-home .brand svg {
    width: 26px;
    height: 26px;
  }

  .page-home .nav-cta {
    min-height: 36px;
    padding: 0 16px;
  }

  .home-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(6px, 1.4dvh, 14px);
    padding-top: 0;
    padding-bottom: 4px;
  }

  .home-copy {
    align-items: center;
    gap: clamp(8px, 1.6dvh, 14px);
    text-align: center;
  }

  .home-copy .lede,
  .h-meta,
  .h-origin {
    display: none;
  }

  .home-copy h1 {
    font-size: clamp(2.1rem, 1rem + 5.4vw, 3.3rem);
  }

  .home-copy .actions {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  .home-copy .button {
    flex: 0 1 auto;
    min-height: 50px;
    padding: 0 22px;
    font-size: 1rem;
    white-space: nowrap;
  }

  .home-foot .facts,
  .home-foot .links li:has(> a[href^="mailto:"]) {
    display: none;
  }

  .home-foot .wrap {
    justify-content: center;
    min-height: 44px;
  }

  .home-foot .links {
    justify-content: center;
    gap: 2px 18px;
  }

  .story {
    width: 96vw;
    height: min(640px, 86dvh);
  }

  .story-x {
    top: -12px;
    right: -6px;
  }
}

@media (max-width: 900px) and (min-height: 760px) {
  .h-meta {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8125rem;
    text-align: left;
  }
}

@media (max-width: 900px) and (max-height: 700px) {
  .home-copy h1 {
    font-size: clamp(1.9rem, 1rem + 4.6vw, 2.8rem);
  }
}

@media (max-width: 600px) {
  .film-card {
    --foot-h: 112px;
    --art-ar: 1.3;
  }

  /* On a short phone the story's second line is left to the screen-reader text, so the drawing can be larger. */
  .caption .sub {
    display: none;
  }

  .home-copy .button {
    padding: 0 18px;
    font-size: 0.94rem;
  }

  .tab-t {
    display: none;
  }
}

@media (max-width: 600px) and (min-height: 780px) {
  .film-card {
    --foot-h: 172px;
  }

  .caption .sub {
    display: block;
  }
}

/* --------------------------------------------------------------- entrance */

.home-copy > * {
  animation: h-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.home-copy > :nth-child(2) {
  animation-delay: 0.08s;
}

.home-copy > :nth-child(3) {
  animation-delay: 0.16s;
}

.home-copy > :nth-child(4) {
  animation-delay: 0.24s;
}

.home-copy > :nth-child(5) {
  animation-delay: 0.32s;
}

.demo-box {
  animation: h-card-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s backwards;
}

@keyframes h-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes h-card-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
  }
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .page-home *,
  .page-home *::before,
  .page-home *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .home-copy h1 .key path {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 600px) {
  .page-home .site-header .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-home .home-foot .wrap {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* Short summaries use the ordinary page's cards and spacing. */
.home-more {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}

.home-more .card img {
  display: block;
  width: 100%;
  height: 120px;
  margin-top: var(--s2);
  object-fit: contain;
}

.savings-bars {
  max-width: 42rem;
}

.savings-row {
  padding: var(--s2);
  border: 1px solid transparent;
  margin: var(--s3) 0;
}

.savings-row p {
  margin-bottom: var(--s1);
}

.savings-track {
  height: 10px;
  background: var(--h-card-solid);
  border-radius: 5px;
}

.savings-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--h-ink-2);
}

.savings-upbeep {
  border-color: var(--h-accent);
  border-radius: var(--radius);
  background: var(--h-accent-soft);
  color: var(--h-ink);
  font-weight: 650;
}

.savings-upbeep .savings-bar {
  background: var(--h-accent);
}

/* Adam, SITE-01, 2026-10-30: the price reads with the buttons on short phones too. */
@media (max-width: 900px) {
  .h-price {
    font-size: 0.8125rem;
    line-height: 1.4;
  }
}

@media (max-width: 600px) and (max-height: 700px) {
  .page-home .site-header .wrap {
    padding-top: 4px;
  }

  .page-home main {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .home-grid {
    gap: 4px;
  }

  .home-copy {
    gap: 6px;
  }

  .h-price {
    width: calc(100% + 24px);
    max-width: calc(100vw - 16px);
    margin: 0;
  }
}

/* The two short desktop sizes need the price more than the repeated availability line. */
@media (min-width: 901px) and (max-height: 750px) {
  .h-meta li:last-child {
    display: none;
  }
}

/* OPEN-34, SITE-01: the search category sits directly above the unchanged headline. */
.home-copy .h-category {
  margin: 0;
  color: var(--h-ink-2);
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 550;
}

/* OPEN-34, SITE-01: recover space for the category without hiding any additional line. */
@media (min-width: 901px) and (max-height: 800px) {
  .home-copy { gap: 10px; }
}

/* OPEN-34, SITE-01: tighter phone spacing keeps the full category and usable demo together. */
@media (max-width: 600px) {
  .home-copy { gap: 4px; }
  .home-copy .h-category { font-size: 12px; line-height: 1.3; }
  .h-price { margin-top: 0; }
  .page-home main { padding-top: 2px; padding-bottom: 2px; }
  .home-copy .button { min-height: 44px; }
  .home-foot .wrap { padding-top: 4px; padding-bottom: 6px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .home-copy { gap: 2px; }
  .page-home .site-nav ul { padding-top: 2px; padding-bottom: 4px; }
  .home-foot .wrap { padding-top: 2px; padding-bottom: 2px; }
  .page-home main { padding-bottom: 0; }
  .home-grid { padding-bottom: 0; gap: 0; }
}

/* SITE-01, Adam, 2026-10-30: the longer walkie-talkie copy fits a narrow desktop column. */
@media (min-width: 901px) and (max-width: 1080px) {
  .home-copy { gap: 6px; }
}

/* SITE-01: where the header menu sits above it (900px and narrower), the home footer's language pair shows
   only the other language, so the footer keeps its height and the demo its size (the full pair took a 22px line at 360x640). */
@media (max-width: 900px) {
  .home-foot .lang-switch [aria-current],
  .home-foot .lang-switch .lang-sep {
    display: none;
  }

  /* The header menu just above already has these; hiding their footer copies gives the language link its room. */
  .home-foot .links:has(.lang-switch) li:has(> a[href$="/features/"]),
  .home-foot .links:has(.lang-switch) li:has(> a[href$="/pricing/"]),
  .home-foot .links:has(.lang-switch) li:has(> a[href$="/it/"]),
  .home-foot .links:has(.lang-switch) li:has(> a[href$="/notes/"]),
  .home-foot .links:has(.lang-switch) li:has(> a[href$="/support/"]) {
    display: none;
  }
}

/* SITE-01, round A: business subheads remain visible on small screens.
   Scoped to business pages; the home layout and its pinned baseline are unchanged. */
@media (max-width: 900px) {
  .page-kind .home-copy .lede {
    display: block;
    max-width: 42em;
    font-size: 14px;
    line-height: 1.35;
  }
  .page-kind .home-foot .wrap {
    min-height: 0;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .page-kind .home-foot p { margin: 0; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .page-kind .home-copy h1 {
    font-size: clamp(1.6rem, 7.5vw, 1.75rem);
    line-height: 1.02;
  }
  .page-kind .home-copy .lede {
    font-size: 13px;
    line-height: 1.25;
  }
}