/* Polish layer, loaded after system.css on every page:
   comfortable tap targets, readable minimum text on phones, iPhone safe areas, page transitions, magnetic buttons, tilt-parallax. */

/* ---------- page transitions (Chrome / Edge / Safari 18+; others navigate normally) ---------- */
@view-transition { navigation: auto; }
.yh { view-transition-name: site-header; }
::view-transition-old(root) { animation: .22s cubic-bezier(.4,0,1,1) both vt-out; }
::view-transition-new(root) { animation: .38s cubic-bezier(.16,1,.3,1) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
::view-transition-group(site-header) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- magnetic buttons: the JS sets the individual `translate` property, so it never fights hover transforms ---------- */
.mag { transition: translate .35s cubic-bezier(.16,1,.3,1); will-change: translate; }

/* ---------- tilt parallax on machine photos (fine pointers only, set by JS) ---------- */
.tilt { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s cubic-bezier(.16,1,.3,1); }

/* ---------- touch: every link and button gets a 44px hit area ---------- */
@media (pointer: coarse), (max-width: 760px) {
  .yf-col li + li { margin-top: 0; }
  .yf-col a, .yf-bar a { display: inline-flex; align-items: center; min-height: 44px; }
  .link-u { display: inline-flex; align-items: center; min-height: 44px; }
  .pd-more, .ms-more, .k-more, .g-jump, .cs-more, .sbq-act a, .rs-card, .cbn-ct a, .mroi, .evover a { display: inline-flex; align-items: center; min-height: 44px; }
  .cbn-ct li { display: flex; }
  .roi-faq summary, summary { min-height: 44px; }
  .lw-tabs button { min-height: 40px; padding-block: 0; }
  .pr-chips a { min-height: 40px; display: inline-flex; align-items: center; }
  .yh-menu-full .row { min-height: 52px; }
  .btn, .ybtn { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; } /* stops iOS zooming into fields */
}

/* ---------- phones: nothing below 11px ---------- */
@media (max-width: 760px) {
  .lw-k small, .lw-tile small, .lw-tile em, .lw-node small, .lw-s, .lw-gcard em, .lw-gcard small, .lw-card li, .lw-card li .lw-st, .lw-st, .lw-chip,
  .lw-rec, .gr-note, .pm-tile span, .pm-row em, .pm-pill, .pm-tol small, .pm-n, .gm-rate, .lw-log, .lw-sm .lw-k small, .lw-sm .lw-st, .lw-sm .lw-tile small, .lw-sm .lw-tile em,
  .sbnote, .qr-h span, .qr-f label, .qr-o small, .qr-o span, .qr-n, .dk-t small, .scr-btn, .cap-key, .hv-top small, .lw-tabs button { font-size: 11px; }
  .lw-k b { font-size: 14px; } .lw-sm .lw-k b { font-size: 13px; }
}

/* ---------- iPhone safe areas (the meta viewport has viewport-fit=cover) ---------- */
@supports (padding: max(0px)) {
  .yf { padding-bottom: env(safe-area-inset-bottom); }
  @media (max-width: 760px) { .dock { bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); } }
  .yh-menu-full { padding-bottom: env(safe-area-inset-bottom); }
}
/* the hero used 100vh, which is taller than the visible area on phones with a moving address bar */
@supports (height: 100dvh) { .hero { min-height: calc(100dvh - 88px); } }

/* landscape phones: short screens get less vertical padding */
@media (max-height: 520px) and (orientation: landscape) { :root { --sec: 40px; } .hero, .hm-hero-in { min-height: 0 !important; } .dock { display: none !important; } }

/* second pass: remaining small links and labels on phones */
@media (max-width: 760px) {
  .qr-n a, .vp-note a, .blink, .gv-t, .roi-bar a, .crumbs a, .cbn-ct a, a[href^="tel:"], a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
  .stt { width: 44px !important; height: 44px !important; }
  .lv-head small, .lv-key li, .st em, .sx-node em, .gi-cap em, .gap dt, dt, .scr-bar em, .d-txt small, .lw-tabs button, .sbn > b, .hv-m figcaption b { font-size: 11px; }
  .lw-tabs button { min-height: 40px; }
}
@media (max-width: 760px) {
  figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
  .lw .lw-tabs button, .lw-sm .lw-tabs button, .sbn > b, .sx-node em, dt, small { font-size: 11px !important; }
}