/* Mockup A: the nav, the phone menu and the footer, shared by the home and Downloads pages. */
/* ---- nav ---- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(11,52,66,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--cream); }
.nav-in { display: flex; align-items: center; gap: 20px; min-height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; font: 600 23px/1 var(--display); text-decoration: none; }
.brand svg { width: 34px; height: 34px; display: block; }
.nav-links { display: flex; gap: 22px; margin-left: auto; font: 500 16px/1 var(--display); }
.nav-links a { text-decoration: none; opacity: .86; padding: 8px 0; }
.nav-links a:hover { opacity: 1; color: var(--glow); }
.nav .pawbar { color: var(--cream); height: 22px; }
.nav .paws { top: 3px; }
.nav .rider { top: -7px; }
@media (max-width: 900px) { .nav-links { display: none; } .nav .langs { margin-left: auto; } }

/* footer */
.foot { background: var(--night-deep); color: var(--cream); padding-block: 30px 90px; position: relative; overflow: hidden; }
.bye { display: grid; grid-template-columns: minmax(0,1fr) clamp(170px,24vw,300px); align-items: end; gap: 10px; }
.bye p { font: 600 clamp(52px,10.5vw,150px)/.94 var(--display); font-variation-settings: "wdth" 92; color: var(--cream); }
.bye .k { aspect-ratio: 1; }
.flinks { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 24px; margin-top: 20px; padding-top: 18px; border-top: 3px dotted var(--night-line); font-size: 16px; }
.flinks a { color: #C6D9D9; display: inline-flex; align-items: center; min-height: 44px; }
.flinks small { margin-left: auto; color: #8FB0B3; font-size: 14px; }

.burger { display: none; position: relative; width: 48px; height: 48px; border-radius: 13px; background: rgba(255,248,238,.12); }
.burger i { position: absolute; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: var(--cream); transition: transform .22s, opacity .18s, top .22s; }
.burger i:nth-child(1) { top: 15px; } .burger i:nth-child(2) { top: 22.500px; } .burger i:nth-child(3) { top: 30px; }
.burger[aria-expanded="true"] i:nth-child(1) { top: 22.500px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { top: 22.500px; transform: rotate(-45deg); }
.menu { display: none; }
@media (max-width: 900px) {
  .burger { display: block; }
  .nav .langs { margin-left: auto; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--night); padding: 8px max(20px, env(safe-area-inset-right, 0px)) 22px max(20px, env(safe-area-inset-left, 0px)); box-shadow: 0 20px 34px rgba(0,0,0,.35); border-radius: 0 0 24px 24px; }
  .menu.open { display: grid; animation: drop .22s cubic-bezier(.15,.6,.35,1); }
  .menu a { display: flex; align-items: center; min-height: 54px; font: 500 23px/1 var(--display); color: var(--cream); text-decoration: none; border-bottom: 2px dotted var(--night-line); }
  .menu a:last-child { border-bottom: 0; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }

[id] { scroll-margin-top: 92px; }
.moved { background: var(--glow); color: var(--ink); padding: 12px 20px; text-align: center; font: 500 17px/1.3 var(--display); }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font: 700 15px/1.2 var(--body); color: var(--night); }
input, select, textarea { font: 500 17px/1.35 var(--body); color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; width: 100%; min-height: 50px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--mango); }
form .note { font-size: 14.5px; color: var(--ink-soft); line-height: 1.35; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-fail { font: 500 16px/1.35 var(--body); color: #A12F45; }
.form-fail a { color: inherit; }
.no-rider .rider { visibility: hidden; }
@media (max-width: 380px) {
  .nav-in { gap: 8px; }
  .brand { font-size: 19px; gap: 6px; }
  .brand svg { width: 28px; height: 28px; }
  .langs a { min-width: 38px; padding: 0 5px; }
  .burger { width: 44px; height: 44px; flex: none; }
  .burger i { left: 10px; right: 10px; }
}