/* Pawpalm: a vacation for them. Boarding pass hero, hour-by-hour itinerary, luggage-tag services, room-key packages, postcard reviews. */
/* Base: bright, rounded and calm. White and sky with a tangerine action and grass-green trust cues;
   Baloo 2 headings, soft pill shapes; the yard-cam card and the pet profile booking are the signatures. */
:root {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFF4EC; --line: #E5E7EB; --sky: #DFF1FB;
  --ink: #1F2937; --ink-soft: #4B5563; --heading: #1F2937;
  --primary: #FF8A3D; --primary-ink: #1F2937; --primary-hover: #FF9F5E;
  --accent: #2E7D4F; --accent-ink: #FFFFFF;
  --dark: #1F2937; --on-dark: #FFFFFF; --on-dark-soft: #D1D5DB;
  --kicker: #2E7D4F; --link: #2E7D4F; --field-border: #8B95A3; --star: #E36A12;
  --ph-a: #F1F5F9; --ph-b: #E7EEF5; --ph-edge: #8B95A3;
  --display: "Baloo 2", "Segoe UI", sans-serif; --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --display-weight: 800; --display-lh: 1.05;
  --radius: 22px; --radius-lg: 28px; --btn-radius: 999px; --chip-radius: 999px; --field-radius: 14px; --photo-radius: 28px;
  --ico-bg: #E8F5EE; --ico-ink: #2E7D4F; --ico-radius: 50%; --check: #2E7D4F; --brand-weight: 800;
  --fs-h1: clamp(2.6rem, 1.5rem + 4vw, 4.4rem);
}
.btn { border-color: var(--ink); }
.kicker { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.section--sky { background: var(--sky); }

.hero { padding-block: clamp(36px, 5vw, 72px) clamp(64px, 7vw, 96px); background: var(--sky); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; justify-self: start; background: #FFFFFF; border-radius: 999px; padding: 8px 16px; font-weight: 700; color: var(--accent); box-shadow: 0 4px 14px -8px rgba(31,41,55,.3); }
.pill svg { width: 20px; height: 20px; }
.hero-media { position: relative; min-width: 0; }
.cam { position: absolute; left: -30px; bottom: -30px; width: min(300px, 70%); background: var(--dark); color: #FFFFFF; border-radius: 18px; padding: 10px; display: grid; gap: 8px; box-shadow: 0 20px 40px -18px rgba(31,41,55,.6); z-index: 2; }
.cam-head { display: flex; gap: 10px; align-items: center; font-size: 0.85rem; font-weight: 700; padding: 2px 4px; }
.live { background: #DC2626; color: #FFFFFF; font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; letter-spacing: .06em; }
.cam .photo { border-radius: 10px; --ar: 16 / 9 !important; }
.cam-foot { font-size: 0.75rem; color: var(--on-dark-soft); padding: 0 4px 2px; }

.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; align-content: start; }
.why p { color: var(--ink-soft); }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.svc { background: #FFFFFF; border-radius: var(--radius); padding: 10px 10px 20px; display: grid; gap: 4px; text-decoration: none; color: var(--ink); box-shadow: 0 10px 30px -22px rgba(31,41,55,.5); }
.svc .photo { border-radius: 16px; margin-bottom: 10px; --ar: 5 / 4 !important; }
.svc-t { font-family: var(--display); font-weight: 800; font-size: 1.5rem; padding: 0 10px; }
.svc-d { color: var(--ink-soft); padding: 0 10px; font-size: 0.95rem; }
.svc-p { font-weight: 800; color: var(--accent); padding: 0 10px; margin-top: 4px; }

.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.pkg { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 12px; align-content: start; position: relative; }
.pkg--pop { border-color: var(--primary); background: var(--surface-2); }
.pkg-pop { position: absolute; top: -14px; left: 24px; background: var(--primary); color: var(--ink); font-weight: 800; font-size: 0.8rem; padding: 4px 12px; border-radius: 999px; }
.pkg-price { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; }
.pkg-price span { font-family: var(--body); font-size: 1rem; color: var(--ink-soft); font-weight: 600; }
.pkg ul { padding-left: 18px; display: grid; gap: 6px; color: var(--ink-soft); }
.pkg .btn { justify-self: start; }

.tails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tail { margin: 0; background: var(--surface); border-radius: var(--radius); padding: 22px; display: grid; gap: 12px; align-content: start; }
.tail blockquote { margin: 0; }
.tail figcaption { display: grid; gap: 4px; font-size: 0.88rem; color: var(--ink-soft); }
.pet strong { display: block; font-family: var(--display); font-size: 1.25rem; color: var(--ink); }
.ba { margin: 0; display: grid; gap: 10px; }
.ba figcaption { font-weight: 700; }

.svc-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; scroll-margin-top: 100px; }
.price-tag { font-weight: 800; color: var(--accent); }
.cmp th, .cmp td { text-align: center; }
.cmp th:first-child, .cmp td:first-child { text-align: left; }
.cmp .hl { background: var(--surface-2); }
.tp { font-family: var(--display); font-size: 1.6rem; color: var(--ink); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery .photo:nth-child(1), .gallery .photo:nth-child(4) { grid-column: span 2; }
.mem { display: grid; gap: 6px; align-content: start; }
.mem .photo { --ar: 7 / 8 !important; margin-bottom: 8px; }
.mem h2 { font-size: 1.4rem; }
.mem .role { color: var(--accent); font-weight: 800; }
.mem p:last-child { color: var(--ink-soft); }
.book { grid-template-columns: 1.3fr 0.7fr; }
.pet-card { display: grid; grid-template-columns: 76px 1fr; gap: 18px; background: var(--sky); border-radius: var(--radius); padding: 20px; }
.pet-avatar { width: 76px; height: 76px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; color: var(--primary); }
.pet-avatar svg { width: 40px; height: 40px; }
.map-slot { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: repeating-linear-gradient(0deg, transparent 0 38px, var(--line) 38px 40px), repeating-linear-gradient(90deg, #F8FAFC 0 38px, var(--line) 38px 40px); border: 1.5px dashed var(--field-border); display: flex; align-items: flex-end; padding: 12px; }

@media (max-width: 1020px) { .svc-grid, .tails { grid-template-columns: repeat(2, 1fr); } .why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .hero-grid, .pkgs, .svc-row, .book { grid-template-columns: 1fr; } .cam { position: relative; left: auto; bottom: auto; margin: -50px 0 0 16px; } .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-grid, .tails, .why { grid-template-columns: 1fr; } .pet-card { grid-template-columns: 1fr; } .gallery .photo:nth-child(1), .gallery .photo:nth-child(4) { grid-column: auto; } }

/* ---- Pawpalm vacation theme: boarding pass, itinerary, luggage tags, room keys, postcards ---- */
:root { --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --sun: #FFC93C; --sand: #F7E6CF; --cork: #EBD3B0; --pool: #3BB3E6; }
.hero { position: relative; overflow: hidden; padding-bottom: clamp(96px, 10vw, 140px); background: radial-gradient(60% 60% at 85% 20%, rgba(255, 201, 60, .35), transparent 70%), var(--sky); }
.hero h1 em { font-style: normal; color: var(--primary); position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: .18em; background: var(--sun); border-radius: 999px; z-index: -1; opacity: .9; }
.wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(28px, 4vw, 60px); display: block; fill: #FFFFFF; }
.wave--top { top: -1px; bottom: auto; fill: #FFFFFF; }
.hero-media { position: relative; padding: 10px 0 40px; }
.blob .photo { border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%; border: 6px solid #FFFFFF; box-shadow: 0 30px 60px -30px rgba(31, 41, 55, .45); --ar: 11 / 10 !important; }
.cam { left: auto; right: -10px; top: 0; bottom: auto; width: 190px; padding: 8px; border-radius: 16px; border: 3px solid #FFFFFF; }
.cam-head { font-size: 0.72rem; }

.pass { position: absolute; left: -48px; bottom: -6px; z-index: 3; display: grid; grid-template-columns: 1fr 86px; width: min(400px, 92%); text-decoration: none; color: var(--ink); filter: drop-shadow(0 22px 30px rgba(31, 41, 55, .28)); transform: rotate(-3deg); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.pass:hover { transform: rotate(-1deg) translateY(-4px); color: var(--ink); }
.pass-main, .pass-stub { background: #FFFFFF; position: relative; }
.pass-main { border-radius: 18px 0 0 18px; padding: 14px 16px 16px; display: grid; gap: 10px; overflow: hidden;
  -webkit-mask: radial-gradient(circle 10px at 100% 0, #0000 98%, #000) top right / 100% 51% no-repeat, radial-gradient(circle 10px at 100% 100%, #0000 98%, #000) bottom right / 100% 51% no-repeat;
          mask: radial-gradient(circle 10px at 100% 0, #0000 98%, #000) top right / 100% 51% no-repeat, radial-gradient(circle 10px at 100% 100%, #0000 98%, #000) bottom right / 100% 51% no-repeat; }
.pass-stub { border-radius: 0 18px 18px 0; border-left: 2px dashed #CBD5E1; background: var(--primary); display: grid; align-content: center; justify-items: center; gap: 6px; padding: 10px 6px; font-family: var(--display); font-weight: 800;
  -webkit-mask: radial-gradient(circle 10px at 0 0, #0000 98%, #000) top left / 100% 51% no-repeat, radial-gradient(circle 10px at 0 100%, #0000 98%, #000) bottom left / 100% 51% no-repeat;
          mask: radial-gradient(circle 10px at 0 0, #0000 98%, #000) top left / 100% 51% no-repeat, radial-gradient(circle 10px at 0 100%, #0000 98%, #000) bottom left / 100% 51% no-repeat; }
.pass-stub small { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; writing-mode: vertical-rl; transform: rotate(180deg); }
.pass-stub b { font-size: 1.4rem; line-height: 1; }
.pass-code { width: 46px; height: 22px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px); opacity: .8; }
.pass-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.68rem; letter-spacing: .12em; color: var(--ink-soft); }
.pass-air { display: inline-flex; gap: 6px; align-items: center; color: var(--accent); font-weight: 700; }
.pass-air svg { width: 14px; height: 14px; transform: rotate(90deg); }
.pass-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.pass-route > span:not(.pass-dash) { display: grid; }
.pass-route small, .pass-grid small { font-family: var(--mono); font-size: 0.6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.pass-route b { font-family: var(--display); font-size: 2rem; line-height: 1; letter-spacing: .02em; }
.pass-dash { position: relative; height: 2px; background: repeating-linear-gradient(90deg, #CBD5E1 0 6px, transparent 6px 11px); }
.pass-dash svg { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--primary); transform: rotate(90deg); }
.pass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-weight: 800; font-size: 0.95rem; }
.pass-grid > span { display: grid; }
.pass-stamp { position: absolute; right: 14px; bottom: 12px; font-family: var(--mono); font-weight: 700; font-size: 0.72rem; letter-spacing: .14em; color: var(--accent); border: 2px solid var(--accent); border-radius: 8px; padding: 3px 8px; transform: rotate(-12deg); opacity: .85; }

.itin-sec { padding-top: clamp(24px, 4vw, 48px); }
.itin { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; position: relative; }
.itin::before { content: ""; position: absolute; left: 4%; right: 4%; top: 52px; height: 3px; background: repeating-linear-gradient(90deg, var(--primary) 0 10px, transparent 10px 18px); border-radius: 3px; }
.itin li { display: grid; gap: 6px; justify-items: center; text-align: center; position: relative; }
.itin-t { font-family: var(--mono); font-weight: 700; font-size: 0.85rem; color: var(--accent); background: #E8F5EE; border-radius: 999px; padding: 3px 10px; }
.itin-dot { width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--primary); display: grid; place-items: center; color: var(--primary); z-index: 1; margin: 2px 0 6px; }
.itin-dot svg { width: 22px; height: 22px; fill: currentColor; }
.itin h3 { font-size: 1.15rem; line-height: 1.15; }
.itin p { color: var(--ink-soft); font-size: 0.9rem; }
.perks { list-style: none; padding: 0; margin: clamp(32px, 4vw, 48px) auto 0; display: flex; flex-wrap: no-wrap; justify-content: center; gap: 12px; }
.perks li { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border-radius: 999px; padding: 8px 20px 8px 8px; }
.perks .ico { width: 40px; height: 40px; background: #FFFFFF; }
.perks li > span:last-child { display: grid; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.3; }
.perks strong { color: var(--ink); font-size: 0.98rem; }

.trail { position: relative; height: 54px; overflow: hidden; max-width: 1180px; margin: 0 auto; }
.trail span { position: absolute; top: calc(50% + (var(--i) - 7) * 0px); left: calc(3% + var(--i) * 6.8%); width: 20px; height: 20px; color: var(--primary); opacity: .55; transform: translateY(calc((var(--i) % 2) * 14px - 7px)) rotate(90deg); }
.trail svg { width: 100%; height: 100%; fill: currentColor; display: block; }

.tags-sec { position: relative; background: var(--sky); padding-block: clamp(80px, 9vw, 120px); }
.tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-top: 18px; }
.tag { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; text-decoration: none; color: var(--ink); background: #FFFFFF; padding: 46px 18px 22px; border-radius: 26px 26px 22px 22px; transform: rotate(var(--r)); transform-origin: 50% 0; box-shadow: 0 18px 34px -22px rgba(31, 41, 55, .55); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); clip-path: polygon(22% 0, 78% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); }
.tag:hover { transform: rotate(0deg) translateY(-6px); color: var(--ink); }
.tag-hole { position: absolute; top: 16px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--sky); box-shadow: inset 0 0 0 3px var(--primary); }
.tag-photo { width: 78%; }
.tag-photo .photo { border-radius: 50%; --ar: 1 / 1 !important; border: 4px solid var(--surface-2); margin-bottom: 8px; }
.tag-t { font-family: var(--display); font-weight: 800; font-size: 1.5rem; }
.tag-d { color: var(--ink-soft); font-size: 0.92rem; }
.tag-p { margin-top: 6px; font-family: var(--mono); font-weight: 700; font-size: 0.85rem; color: #FFFFFF; background: var(--accent); border-radius: 999px; padding: 4px 12px; }

.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: center; perspective: 1000px; }
.key { position: relative; background: linear-gradient(150deg, #FFFFFF 0%, #FFF4EC 100%); border-radius: 22px; padding: 30px 28px 34px; display: grid; gap: 12px; align-content: start; border: 1px solid #F2DCC8; box-shadow: 0 22px 40px -26px rgba(31, 41, 55, .45); overflow: hidden; transform: rotate(calc((var(--k) - 1) * 3deg)) translateY(calc(var(--k) * 0px)); transition: transform .4s cubic-bezier(.3, 1.3, .5, 1), box-shadow .3s ease; }
.key:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 30px 50px -26px rgba(31, 41, 55, .55); }
.key--pop { background: linear-gradient(150deg, #FF9A55 0%, #FF7A2E 100%); border-color: transparent; transform: translateY(-14px) scale(1.04); z-index: 1; }
.key--pop:hover { transform: translateY(-20px) scale(1.04); }
.key--pop, .key--pop h3, .key--pop .key-price, .key--pop li { color: #1F2937; }
.key-chip { position: absolute; top: 26px; right: 26px; width: 40px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #F7D774, #D8A93B); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.key-chip::before { content: ""; position: absolute; inset: 7px 6px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 3px; }
.key-room { font-family: var(--mono); font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.key--pop .key-room { color: #3B2416; }
.key-pop { justify-self: start; background: #1F2937; color: #FFFFFF; font-weight: 800; font-size: 0.75rem; padding: 3px 10px; border-radius: 999px; }
.key h3 { font-size: 1.6rem; }
.key-price { font-family: var(--display); font-weight: 800; font-size: 2.8rem; line-height: 1; }
.key-price span { font-family: var(--body); font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
.key--pop .key-price span { color: #3B2416; }
.key ul { padding-left: 18px; display: grid; gap: 6px; color: var(--ink-soft); }
.key .btn { justify-self: start; margin-top: 6px; }
.key--pop .btn { background: #1F2937; color: #FFFFFF; border-color: #1F2937; }
.key-strip { position: absolute; left: 0; right: 0; bottom: 14px; height: 8px; background: rgba(31, 41, 55, .85); }
.center { text-align: center; margin-top: 28px; }

.cards-sec { background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .35) 0 2px, transparent 3px) 0 0 / 22px 22px, var(--cork); }
.tails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-top: 10px; }
.tail { margin: 0; position: relative; background: #FFFDF8; border-radius: 6px; padding: 22px 20px 20px; display: grid; gap: 10px; align-content: start; box-shadow: 0 16px 30px -20px rgba(60, 40, 20, .6); transform: rotate(var(--r, -2deg)); transition: transform .35s ease; background-image: linear-gradient(90deg, transparent 0 calc(100% - 3px), rgba(255, 138, 61, .0) 0), repeating-linear-gradient(0deg, transparent 0 27px, rgba(59, 179, 230, .14) 27px 28px); }
.tails > .tail:nth-child(2) { --r: 2deg; } .tails > .tail:nth-child(3) { --r: -1deg; } .tails > .tail:nth-child(4) { --r: 2.5deg; }
.tail:hover { transform: rotate(0deg) translateY(-6px); }
.tail::before { content: ""; position: absolute; top: -10px; left: 50%; width: 80px; height: 22px; margin-left: -40px; background: rgba(255, 201, 60, .55); transform: rotate(-3deg); }
.tail-wish { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--primary); padding-right: 70px; line-height: 1.1; min-height: 2.3em; }
.tail-stamp { position: absolute; top: 14px; right: 14px; width: 44px; height: 50px; background: var(--sky); border: 3px dotted #FFFDF8; outline: 2px solid var(--pool); display: grid; place-items: center; color: var(--pool); }
.tail-stamp svg { width: 26px; height: 26px; fill: currentColor; }
.tail-post { position: absolute; top: 58px; right: 8px; width: 46px; height: 46px; border: 2px solid rgba(46, 125, 79, .45); border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 0.5rem; letter-spacing: .08em; color: rgba(46, 125, 79, .8); text-align: center; line-height: 1.2; transform: rotate(-14deg); }
.tail blockquote { margin: 0; font-size: 0.98rem; }
.tail .stars { margin-top: 4px; }
.tail figcaption { display: grid; gap: 4px; font-size: 0.85rem; color: var(--ink-soft); border-top: 1px dashed #D6C3A5; padding-top: 10px; }
.pet strong { display: block; font-family: var(--display); font-size: 1.25rem; color: var(--ink); }

.spa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.spa .ba { background: #FFFFFF; padding: 12px 12px 16px; border-radius: 8px; box-shadow: 0 18px 36px -24px rgba(31, 41, 55, .55); transform: rotate(var(--r)); transition: transform .35s ease; }
.spa .ba:hover { transform: rotate(0deg); }
.spa .compare { border-radius: 4px; }
.spa .ba figcaption { font-family: var(--display); font-weight: 700; text-align: center; font-size: 1.1rem; }

.first-sec { background: var(--surface-2); }
.pack { list-style: none; padding: 0; display: grid; gap: 10px; }
.pack li { display: flex; gap: 12px; align-items: center; font-weight: 700; }
.pack .box { width: 24px; height: 24px; border-radius: 7px; border: 2.5px solid var(--accent); position: relative; flex: none; background: #FFFFFF; }
.pack .box::after { content: ""; position: absolute; left: 6px; top: 1px; width: 7px; height: 13px; border: solid var(--accent); border-width: 0 3px 3px 0; transform: rotate(45deg); }

@media (max-width: 1020px) {
  .itin { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } .itin::before { display: none; }
  .tags, .tails { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .keys, .spa { grid-template-columns: 1fr; } .key, .key--pop { transform: none; } .key--pop:hover, .key:hover { transform: translateY(-4px); }
  .pass { left: 0; bottom: -30px; } .hero-media { padding-bottom: 80px; } .cam { right: 0; width: 160px; }
}
@media (max-width: 560px) {
  .itin { grid-template-columns: 1fr 1fr; } .tags, .tails { grid-template-columns: 1fr; } .tag { transform: none; }
  .pass { width: 100%; grid-template-columns: 1fr 70px; } .pass-route b { font-size: 1.6rem; } .cam { width: 132px; top: -6px; }
  .perks { display: grid; } .perks li { border-radius: 18px; }
}

/* ---- Motion: a vacation for them (Pawpalm Pet Resort) ---- */
@keyframes pp-up { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes pp-fall { 0% { opacity: 0; translate: 0 -60px; } 70% { opacity: 1; translate: 0 6px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes pp-pop { 0% { opacity: 0; transform: translateY(30px) scale(.94); } 60% { opacity: 1; transform: translateY(-6px) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes pp-pass { 0% { opacity: 0; transform: translate(-40px, 30px) rotate(-12deg); } 70% { opacity: 1; transform: translate(4px, -4px) rotate(-1deg); } 100% { opacity: 1; transform: rotate(-3deg); } }
@keyframes pp-stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.4); } 60% { opacity: .95; transform: rotate(-12deg) scale(.92); } 100% { opacity: .85; transform: rotate(-12deg) scale(1); } }
@keyframes pp-fly { 0% { left: 0%; } 100% { left: 100%; } }
@keyframes pp-step { 0% { opacity: 0; scale: .4; } 100% { opacity: .55; scale: 1; } }
@keyframes pp-dot { 0% { transform: scale(.4); background: #FFFFFF; } 60% { transform: scale(1.15); } 100% { transform: scale(1); background: var(--primary); color: #FFFFFF; } }
@keyframes pp-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pp-drop { 0% { opacity: 0; transform: translateY(-60px) rotate(calc(var(--r, -2deg) * -4)); } 70% { opacity: 1; transform: translateY(6px) rotate(var(--r, -2deg)); } 100% { opacity: 1; transform: rotate(var(--r, -2deg)); } }
@keyframes pp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pp-wag { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes pp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pp-morph { 0%, 100% { border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%; } 50% { border-radius: 46% 54% 58% 42% / 54% 44% 56% 46%; } }
@keyframes pp-swing { 0%, 100% { rotate: 0deg; } 50% { rotate: 2deg; } }
html.mo .blob .photo { animation: bf-rise 1s .15s cubic-bezier(.2, .7, .2, 1) both, pp-morph 12s 1.2s ease-in-out infinite; }
html.mo .pass { animation: pp-pass 1s .6s cubic-bezier(.3, .8, .3, 1) both; }
html.mo .pass:hover { animation: none; }
html.mo .pass-stamp { animation: pp-stamp .5s 1.7s cubic-bezier(.3, 1.5, .5, 1) both; }
html.mo .pass-dash svg { animation: pp-fly 4s 1.4s ease-in-out infinite alternate; margin-left: -11px; }
html.mo .cam { animation: bf-rise .8s .4s both, pp-float 5s 1.4s ease-in-out infinite; }
html.mo .live { position: relative; padding-left: 18px; }
html.mo .live::before { content: ""; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #FFFFFF; animation: pp-blink 1.2s steps(2, jump-none) infinite; }
.pp-clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; opacity: .8; font-size: .7rem; }
html.mo .pill svg { animation: pp-wag 1.8s 1.2s ease-in-out 3; transform-origin: 50% 80%; }
html.mo .trail span { opacity: 0; }
html.mo .trail.walk span { animation: pp-step .35s calc(var(--i) * 110ms) ease-out forwards; }
html.mo .itin::before { clip-path: inset(0 100% 0 0); }
html.mo .itin.go::before { animation: pp-line 1.8s .2s ease-out forwards; }
html.mo .itin li { opacity: 0; }
html.mo .itin.go li { animation: pp-pop .6s calc(var(--i) * 260ms + .2s) cubic-bezier(.3, .8, .3, 1) both; }
html.mo .itin.go .itin-dot { animation: pp-dot .5s calc(var(--i) * 260ms + .5s) ease-out both; }
html.mo .tag { animation: none; }
html.mo .tag.in { animation: pp-up .7s var(--d, 0ms) cubic-bezier(.3, .8, .3, 1) both, pp-swing 4s calc(var(--d, 0ms) + 1s) ease-in-out infinite; }
html.mo .keys.pp-wait .key { opacity: 0; }
html.mo .keys.fan .key { animation: pp-up .7s calc(var(--k) * 150ms) cubic-bezier(.3, .8, .3, 1) forwards; }
html.mo .tails.pp-wait .tail { opacity: 0; }
html.mo .tails.drop .tail { animation: pp-fall .7s calc(var(--i) * 140ms) cubic-bezier(.3, .8, .3, 1) forwards; }
html.mo .btn:hover { transform: translateY(-3px) scale(1.02); }