/* ---------- Phones: the three screens (owner, 2026-10-09, after the Trust Ledger phone mock) ----------
   Desktop and tablet untouched. On phones the home page opens with: the two top buttons, the headline, one
   short line, the film link, the verification animation (moved up from lower on the page by main.js), then
   the film, its words, four tiles, Book a demo. Everything else from the hero follows below. */
.lede--short, .hero__anim, .film__tiles, .hero__end { display: none; }
@media (max-width: 760px) {
  .hero--film { padding-top: 1.25rem; }
  .hero--film .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "short" "link" "anim" "film" "words" "tiles" "end" "more" "cta" "facts" "report";
    gap: 0;
  }
  .hero--film .hero__copy, .hero--film .hero__copy .btn-row { display: contents; }
  .hero--film .hero__copy .eyebrow { display: none; }
  .hero--film .hero__copy h1 { grid-area: title; font-size: clamp(2rem, 9.2vw, 2.5rem); max-width: none; margin: 0; }
  .hero--film .lede--short { grid-area: short; display: block; margin: var(--space-4) 0 0; font-size: 1.05rem; color: var(--slate); }
  .hero--film .hero__film { grid-area: link; display: inline-flex; margin: var(--space-4) 0 var(--space-5); }
  .hero--film .hero__anim { grid-area: anim; display: block; }
  .hero--film .hero__anim:empty { display: none; }
  .hero--film .film__fig { grid-area: film; margin-top: var(--space-6); }
  .hero--film .film__txt { grid-area: words; margin-top: var(--space-7); }
  .hero--film .film__tiles { grid-area: tiles; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--space-6); }
  .hero--film .hero__end { grid-area: end; display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
  .hero--film .hero__copy .lede:not(.lede--short) { grid-area: more; margin: var(--space-7) 0 0; }
  .hero--film .hero__copy .btn-row > .btn--primary { grid-area: cta; justify-self: start; margin: var(--space-4) 0 0; }
  .hero--film .hero__copy .btn-row > .btn--outline { grid-area: cta; justify-self: end; margin: var(--space-4) 0 0; }
  .hero--film .hero__copy .hero__note { grid-area: facts; margin: var(--space-5) 0 0; }
  .hero--film .report { grid-area: report; margin-top: var(--space-7); }
  /* the animation's own section lower on the page loses its heading on phones; the scene itself moved up */
  section[aria-labelledby="vs-title"] .section-head { display: none; }
  section[aria-labelledby="vs-title"]:not(:has([data-vscene])) { display: none; }
  /* tiles */
  .tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); color: inherit; }
  .tile svg { width: 22px; height: 22px; color: var(--brass); margin-bottom: 4px; }
  .tile b { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.1; letter-spacing: -0.01em; }
  .tile span { font-size: 0.86rem; line-height: 1.4; color: var(--slate); }
  .tile--on { border-color: var(--brass); background: var(--brass-soft, var(--paper-2)); }
  .hero__end .btn--demo { min-height: 52px; padding: 0 28px; border-radius: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .hero__end-link { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; }
}

/* ---------- Phones: two buttons at the top, "Book a demo" and "Sign in" (owner, 2026-10-09) ----------
   As on the Trust Ledger site: a row under the logo bar, full width, equal, in RentKey's own palette. */
.header__demo { display: none; }
@media (max-width: 760px) {
  .header__demo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; padding-bottom: 4px; }
  .header__demo .btn { min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .btn--demo { background: linear-gradient(90deg, var(--brass), var(--brass-2)); color: var(--navy); border: 1px solid transparent; }
  .btn--demo:hover { color: var(--navy); filter: brightness(1.05); }
  .btn--signin { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); gap: 10px; }
  .btn--signin::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(79, 208, 138, 0.18); }
  .header .user-chip { display: none; }
  html { scroll-padding-top: calc(var(--header-h) + 12px); }   /* only the logo bar stays pinned */
}

/* the hero rule is a desktop divider; on phones the tiles block carries its own rule */
@media (max-width: 760px) { .hero--film .hero__rule { display: none; } }

/* ---------- Phones on their side (owner, 2026-10-09) ----------
   A landscape phone has ~320-400px of height, so the logo bar is made thin and slides away while
   scrolling down; it comes back on a tap or when scrolling up (landscape-header.js). It only slides
   (transform), so the page never changes height and nothing below it moves. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --header-h: 52px; }
  .header .brand__img { height: 40px; transform: translateY(-3px); }
  .header { transition: transform 0.25s ease, border-color var(--dur), background var(--dur); will-change: transform; }
  .header.is-tucked { transform: translateY(-100%); }
  html { scroll-padding-top: 64px; }
}

/* ---------- Touch screens: no blur behind the pinned header (owner, 2026-10-09) ----------
   iPhone Safari redraws a sticky bar with backdrop-filter on every scroll frame, which shows as the page
   shaking (landscape worst) — the same fix as trustledger.net. Solid bar, browser-native scrolling. */
@media (hover: none) and (pointer: coarse) {
  .header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
  html { scroll-behavior: auto; }
}

/* ---------- Phones: the logo bar as thin as it can be (owner, 2026-10-09) ----------
   Only the logo and the two icons; the row of two buttons tightened under it. */
@media (max-width: 760px) {
  :root { --header-h: 60px; }
  .header .brand__img { height: 42px; transform: translateY(-2px); }
  .header__demo { padding-top: 6px; padding-bottom: 6px; gap: 8px; }
  .header__demo .btn { min-height: 44px; }
}