/* ============================================================
   VetPassport landing, ported from Figma «VetPassport 3.0» → page «🌐 Landing» (1695:20)
   Tokens: VP Color (Dark). Built by .build/vetpassport_build.py, edit the builder, not the HTML.
   ============================================================ */

:root {
  --vp-bg:        #0A0D12;
  --vp-bg-2:      #181D27;
  --vp-bg-3:      #252B37;
  --vp-label:     #FDFDFD;
  --vp-label-2:   #A4A7AE;
  --vp-label-3:   #6B7079;
  --vp-accent:    #9BA1FF;
  --vp-soft:      #E4E1FF;
  --vp-on-soft:   #1A1830;
  --vp-hairline:  rgba(253,253,253,0.08);
  --vp-grad:      linear-gradient(90deg, #42B0F4 0%, #8678E9 100%);
  --vp-glow:      0 8px 22px -3px rgba(120,127,233,0.20), 0 3px 12px -3px rgba(66,176,244,0.11), 0 3px 8px rgba(0,0,0,0.08);
  --vp-maxw:      1200px;
  --vp-font:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:lang(zh-Hans) { --vp-font: 'Inter', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif; }

.vp-landing, .vp-landing *, .vp-landing *::before, .vp-landing *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.vp-landing {
  margin: 0; background: var(--vp-bg); color: var(--vp-label);
  font-family: var(--vp-font); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.vp-landing a { color: inherit; text-decoration: none; }
.vp-landing :where(h1, h2, h3, p) { margin: 0; }
.vp-landing img { max-width: 100%; display: block; }
.vp-landing :focus-visible { outline: 2px solid var(--vp-accent); outline-offset: 3px; border-radius: 6px; }

/* Top glow, as in the app: #3C4166 → #222438 → transparent */
.vp-glow {
  position: absolute; inset: 0 0 auto 0; height: 900px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(60,65,102,0.95) 0%, rgba(34,36,56,0.55) 55%, rgba(10,13,18,0) 100%);
}
.vp-landing header, .vp-landing main, .vp-landing footer { position: relative; z-index: 1; }

/* ---------- Nav ---------- */
.vp-nav { position: sticky; top: 0; z-index: 50; background: rgba(10,13,18,0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--vp-hairline); }
.vp-nav-inner { max-width: var(--vp-maxw); margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vp-logo { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--vp-label); }
.vp-nav-links { display: flex; align-items: center; gap: 28px; }
.vp-nav-links a { font-size: 0.9375rem; font-weight: 500; color: var(--vp-label-2); transition: color .18s; }
.vp-nav-links a:hover { color: var(--vp-label); }
.vp-nav-cta { padding: 8px 18px; border-radius: 20px; border: 1px solid rgba(253,253,253,0.28); color: var(--vp-label) !important; font-size: 0.875rem !important; font-weight: 600 !important; white-space: nowrap; }
.vp-nav-cta:hover { border-color: rgba(253,253,253,0.6); }
.vp-lang { position: relative; }
.vp-lang summary { list-style: none; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--vp-label-2); padding: 6px 10px; border-radius: 10px; }
.vp-lang summary::-webkit-details-marker { display: none; }
.vp-lang[open] summary, .vp-lang summary:hover { color: var(--vp-label); background: rgba(253,253,253,0.06); }
.vp-lang ul { position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--vp-bg-2); border: 1px solid var(--vp-hairline); border-radius: 12px; min-width: 150px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
.vp-lang li a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 0.9375rem; color: var(--vp-label-2); }
.vp-lang li a:hover, .vp-lang li a[aria-current] { background: rgba(253,253,253,0.06); color: var(--vp-label); }

/* ---------- Shared ---------- */
.vp-eyebrow { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vp-accent); }
:lang(zh-Hans) .vp-eyebrow { letter-spacing: 0.04em; }
.vp-title { font-weight: 800; letter-spacing: -0.02em; line-height: 1.06; white-space: pre-line; }
.vp-sub { font-size: 1.25rem; line-height: 1.5; color: var(--vp-label-2); }

.vp-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 12px; background: #000; border: 1px solid rgba(164,167,174,0.5); color: #fff; font-weight: 600; font-size: 1.0625rem; transition: transform .18s, border-color .18s, box-shadow .18s; }
.vp-badge:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.6); box-shadow: 0 14px 34px -12px rgba(120,127,233,0.55); }
.vp-badge svg { width: 20px; height: 24px; fill: #fff; margin-top: -2px; flex-shrink: 0; }

.vp-phone { position: relative; flex-shrink: 0; }
.vp-phone::before { content: ""; position: absolute; inset: -18% -22%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(120,127,233,0.34), rgba(92,92,191,0.14) 45%, rgba(10,13,18,0) 100%); }
.vp-phone img { width: 100%; height: auto; }

/* ---------- Hero ---------- */
.vp-hero { max-width: var(--vp-maxw); margin: 0 auto; padding: 56px 24px 120px; display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.vp-hero-copy { max-width: 600px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.vp-hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); }
.vp-hero .vp-sub { max-width: 540px; }
.vp-micro { font-size: 0.9375rem; color: var(--vp-label-3); }
.vp-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.875rem; color: var(--vp-label-3); }
.vp-legal a:hover, .vp-footer a:hover { color: var(--vp-label); }
.vp-hero .vp-phone { width: min(520px, 42vw); }

/* ---------- Features ---------- */
.vp-feature { max-width: var(--vp-maxw); margin: 0 auto; padding: 56px 24px; display: flex; align-items: center; justify-content: center; gap: 120px; }
.vp-feature:nth-of-type(odd) { flex-direction: row-reverse; }
.vp-feature-copy { width: 440px; display: flex; flex-direction: column; gap: 16px; }
.vp-feature h2 { font-size: clamp(2rem, 3.4vw, 2.875rem); }
.vp-index { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; color: var(--vp-accent); }
.vp-feature .vp-phone { width: 430px; }

/* ---------- Disclaimer, dedication ---------- */
.vp-disclaimer { max-width: 640px; margin: 0 auto; padding: 40px 24px 24px; text-align: center; font-size: 0.9375rem; line-height: 1.5; color: var(--vp-label-3); }
.vp-love { max-width: 868px; margin: 0 auto; padding: 96px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.vp-love svg { width: 40px; height: 40px; fill: var(--vp-accent); }
.vp-love p.vp-love-body { font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; }

/* ---------- Feedback form ---------- */
.vp-feedback { padding: 64px 16px 96px; display: flex; justify-content: center; scroll-margin-top: 80px; }
.vp-card { width: 100%; max-width: 720px; background: var(--vp-bg-2); border-radius: 26px; padding: 40px; display: flex; flex-direction: column; gap: 24px; box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
.vp-card h2 { font-size: clamp(1.625rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
.vp-card-sub { margin-top: 8px; font-size: 1.0625rem; color: var(--vp-label-2); }
.vp-group { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vp-label-2); margin-bottom: 12px; display: block; }
fieldset.vp-reasons { border: 0; margin: 0; padding: 0; min-width: 0; }
.vp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.vp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.vp-chip span { display: inline-block; padding: 10px 16px; border-radius: 20px; background: var(--vp-bg-3); color: var(--vp-label); font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; user-select: none; }
.vp-chip input:checked + span { background: var(--vp-soft); color: var(--vp-on-soft); font-weight: 600; }
.vp-chip input:focus-visible + span { outline: 2px solid var(--vp-accent); outline-offset: 2px; }
.vp-field textarea, .vp-field input[type=email] { width: 100%; border: 0; border-radius: 12px; background: var(--vp-bg-3); color: var(--vp-label); font: 400 1rem/1.45 var(--vp-font); padding: 14px 16px; }
.vp-field textarea { min-height: 140px; resize: vertical; }
.vp-field ::placeholder { color: var(--vp-label-3); }
.vp-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 1.0625rem; cursor: pointer; }
.vp-toggle input { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 16px; background: var(--vp-bg-3); position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s; margin: 0; }
.vp-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.vp-toggle input:checked { background: var(--vp-accent); }
.vp-toggle input:checked::after { transform: translateX(20px); }
.vp-error { color: #F87171; font-size: 0.875rem; margin-top: 8px; }
.vp-send { height: 56px; border: 0; border-radius: 28px; background: var(--vp-grad); box-shadow: var(--vp-glow); color: #fff; font: 600 1.0625rem var(--vp-font); cursor: pointer; transition: transform .18s, opacity .18s; }
.vp-send:hover { transform: translateY(-1px); }
.vp-send[disabled] { opacity: 0.5; cursor: default; transform: none; }
.vp-note { font-size: 0.8125rem; line-height: 1.45; color: var(--vp-label-3); }
.vp-thanks { text-align: center; padding: 24px 0; display: flex; flex-direction: column; gap: 10px; }
.vp-thanks h3 { font-size: 1.5rem; font-weight: 800; }
.vp-thanks p { color: var(--vp-label-2); }
.vp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Final, footer ---------- */
.vp-final { padding: 96px 24px 120px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.vp-final h2 { font-size: clamp(2.125rem, 4.4vw, 3.5rem); max-width: 900px; }
.vp-footer { border-top: 1px solid var(--vp-hairline); }
.vp-footer-inner { max-width: var(--vp-maxw); margin: 0 auto; padding: 48px 24px; display: flex; flex-direction: column; gap: 32px; }
.vp-footer-top { display: flex; justify-content: space-between; gap: 24px; }
.vp-footer-tag { margin-top: 8px; font-size: 0.9375rem; color: var(--vp-label-3); }
.vp-footer-links { display: flex; gap: 28px; flex-wrap: wrap; font-size: 0.9375rem; color: var(--vp-label-2); }
.vp-copy { font-size: 0.8125rem; color: var(--vp-label-3); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .vp-hero { flex-direction: column; padding: 24px 24px 64px; gap: 40px; align-items: stretch; }
  .vp-hero .vp-phone { width: min(360px, 100%); align-self: center; }
  .vp-feature, .vp-feature:nth-of-type(odd) { flex-direction: column; gap: 32px; padding: 48px 24px; align-items: stretch; }
  .vp-feature-copy { width: auto; }
  .vp-feature .vp-phone { width: min(342px, 100%); align-self: center; }
}
@media (max-width: 640px) {
  .vp-nav-links > a:not(.vp-nav-cta) { display: none; }
  .vp-nav-links { gap: 8px; }
  .vp-sub { font-size: 1.0625rem; }
  .vp-card { padding: 28px 20px; border-radius: 22px; }
  .vp-love { padding: 56px 24px; }
  .vp-final { padding: 56px 24px 72px; }
  .vp-footer-top { flex-direction: column; }
  .vp-footer-links { flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .vp-badge, .vp-send { transition: none; } }

/* ---------- Form layout and send animation ---------- */
.vp-form-body { display: flex; flex-direction: column; gap: 24px; }
.vp-form-body[hidden], .vp-thanks[hidden] { display: none; }
.vp-send { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.vp-send .vp-plane, .vp-send .vp-check { position: absolute; width: 24px; height: 24px; opacity: 0; }
.vp-send .vp-plane { fill: #fff; }
.vp-send .vp-check, .vp-thanks-icon .vp-check { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.vp-send-label { transition: opacity .2s, transform .2s; }
.vp-send[data-state=sending] { opacity: 1 !important; }
.vp-send[data-state=sending] .vp-send-label, .vp-send[data-state=sent] .vp-send-label { opacity: 0; transform: translateY(-8px); }
.vp-send[data-state=sending] .vp-plane { animation: vp-fly 1.4s cubic-bezier(.5,0,.3,1) infinite; }
.vp-send[data-state=sent] .vp-check { opacity: 1; animation: vp-draw .45s .1s ease-out forwards; }
.vp-send[data-state=sent] { background: linear-gradient(90deg, #2FBF94, #3BE2B1); opacity: 1 !important; }
@keyframes vp-fly {
  0%   { opacity: 0; transform: translate(-60px, 10px) rotate(-8deg) scale(.8); }
  25%  { opacity: 1; }
  60%  { opacity: 1; transform: translate(30px, -6px) rotate(4deg) scale(1); }
  100% { opacity: 0; transform: translate(140px, -24px) rotate(10deg) scale(.7); }
}
@keyframes vp-draw { to { stroke-dashoffset: 0; } }
.vp-thanks { animation: vp-rise .5s cubic-bezier(.2,.8,.2,1); outline: none; }
.vp-thanks-icon { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; background: linear-gradient(135deg, #2FBF94, #3BE2B1); display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(59,226,177,0.5); }
.vp-thanks-icon .vp-check { width: 30px; height: 30px; animation: vp-draw .5s .2s ease-out forwards; }
.vp-thanks p:empty { display: none; }
@keyframes vp-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.vp-shake { animation: vp-shake .4s; }
@keyframes vp-shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
#vp-turnstile:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .vp-send[data-state=sending] .vp-plane { animation: none; opacity: 1; }
  .vp-thanks, .vp-shake { animation: none; }
  .vp-send .vp-check, .vp-thanks-icon .vp-check { stroke-dashoffset: 0; animation: none; }
}
#vp-form { display: flex; flex-direction: column; }
#vp-form .vp-thanks { flex: 1; justify-content: center; }
html:has(body.vp-landing) { overflow-x: clip; }
.vp-landing main { overflow-x: clip; }
.vp-footer-langs { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.9375rem; color: var(--vp-label-3); }
.vp-footer-langs a[aria-current] { color: var(--vp-label); font-weight: 600; }
.vp-landing header.vp-nav { z-index: 60; }

/* ============================================================
   Fit phones to the viewport (laptops 1280×720 / 1440×900, phones)
   ============================================================ */
.vp-phone { display: flex; justify-content: center; }
.vp-phone img { width: auto; max-width: 100%; height: auto; max-height: min(78vh, 760px); }
.vp-hero .vp-phone img { max-height: min(calc(100vh - 150px), 820px); }
@media (max-width: 980px) {
  .vp-phone img, .vp-hero .vp-phone img { max-height: 72vh; }
}

/* ============================================================
   Motion. Calm and confident: things arrive and settle, no bounce.
   Enabled only when JS adds .vp-motion to <html>; reduced motion keeps opacity only.
   ============================================================ */
:root { --vp-ease: cubic-bezier(.2,.8,.2,1); }
.vp-motion [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s var(--vp-ease), transform .8s var(--vp-ease); transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; }
.vp-motion [data-reveal="left"]  { transform: translate3d(-56px, 16px, 0) rotate(-2deg); }
.vp-motion [data-reveal="right"] { transform: translate3d(56px, 16px, 0) rotate(2deg); }
.vp-motion [data-reveal="rise"]  { transform: translate3d(0, 64px, 0) scale(.96); transition-duration: .9s, 1.1s; }
.vp-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Light reacts: the glow behind a phone opens up when it arrives, then breathes slowly */
.vp-motion .vp-phone::before { opacity: 0; transform: scale(.7); transition: opacity 1.2s var(--vp-ease), transform 1.4s var(--vp-ease); }
.vp-motion .vp-phone.is-in::before { opacity: 1; transform: scale(1); animation: vp-breathe 7s ease-in-out 1.4s infinite; }
@keyframes vp-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .82; } }

/* Gentle float on the hero phone */
.vp-motion .vp-hero .vp-phone.is-in img { animation: vp-float 8s ease-in-out 1.2s infinite; }
@keyframes vp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Pointer tilt (desktop): JS sets --rx/--ry */
.vp-tilt { perspective: 1200px; }
.vp-tilt > img { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--vp-ease); transform-style: preserve-3d; }
.vp-motion .vp-hero .vp-phone.is-in.vp-tilt > img { animation: none; }

/* Scroll-linked drift of feature phones, where the browser supports view timelines */
@supports (animation-timeline: view()) {
  .vp-motion .vp-feature .vp-phone.is-in > img { animation: vp-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes vp-drift { from { translate: 0 36px; } to { translate: 0 -36px; } }
}

/* Paw beats once, like a heartbeat, when the dedication arrives */
.vp-motion .vp-love.is-in svg { animation: vp-beat 1.4s var(--vp-ease) .2s 1; }
@keyframes vp-beat { 0% { transform: scale(.6); opacity: 0; } 35% { transform: scale(1.12); opacity: 1; } 55% { transform: scale(.98); } 75% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Nav gets denser once the page scrolls */
.vp-nav { transition: background .3s ease, border-color .3s ease; }
.vp-nav.is-scrolled { background: rgba(10,13,18,0.82); }

/* App Store badge sheen on hover */
.vp-badge { position: relative; overflow: hidden; }
.vp-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s var(--vp-ease); pointer-events: none; }
.vp-badge:hover::after { transform: translateX(120%); }

/* Send button presses down a touch */
.vp-send:active { transform: scale(.97); transition-duration: .12s; }

@media (prefers-reduced-motion: reduce) {
  .vp-motion [data-reveal], .vp-motion [data-reveal="left"], .vp-motion [data-reveal="right"], .vp-motion [data-reveal="rise"] { transform: none; transition: opacity .4s ease; }
  .vp-motion .vp-phone::before { transform: none; animation: none !important; }
  .vp-motion .vp-phone img, .vp-motion .vp-love svg { animation: none !important; }
  .vp-tilt > img { transform: none; }
  .vp-badge::after { display: none; }
}
/* Hero phone: same place as the first version (right edge), just scaled to fit the screen height */
.vp-hero .vp-phone { width: auto; justify-content: flex-end; }
.vp-hero .vp-phone img { width: min(520px, 42vw); height: auto; max-height: none; }
@media (min-width: 981px) {
  .vp-hero { min-height: calc(100vh - 68px); padding-top: 32px; padding-bottom: 32px; }
  .vp-hero .vp-phone img { width: min(520px, 42vw, calc((100vh - 68px - 64px) * 0.6024)); }
}
@media (max-width: 980px) { .vp-hero .vp-phone { align-self: center; } .vp-hero .vp-phone img { width: min(360px, 100%, calc(72vh * 0.6024)); } }