@font-face { font-family: "Nunito"; src: url("/fonts/nunito-var-latin.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
/* Pet Loop waitlist — warm "desk at night" palette taken from the real product (dark plum UI bar, walnut desk, lamp glow, Dot's blue). */
:root {
  --ink: #f6efe6; --ink2: #cfc3b6; --mute: #a0948a;
  --bg: #16141c; --bg2: #201c26; --card: #2a2430; --line: #3d3443;
  --lamp: #ffcf7a; --dot: #3f74ff; --plum: #8f6bff; --red: #ff6b6b; --ok: #6be3a4;
  --r: 18px; --font: "Nunito", "Avenir Next", "Segoe UI", system-ui, -apple-system, "DejaVu Sans", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: radial-gradient(1200px 600px at 75% -10%, #3a2b1c 0%, transparent 60%), var(--bg); color: var(--ink); font: 16px/1.5 var(--font); overflow-x: hidden; }
a { color: var(--lamp); }
.skip { position: absolute; left: -999px; top: 0; background: var(--lamp); color: #111; padding: 8px 12px; z-index: 9; border-radius: 8px; }
.skip:focus { left: 8px; top: 8px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(16px, 4vw, 40px) 0; max-width: 1180px; margin: 0 auto; }
.brand { font-weight: 800; letter-spacing: .2px; display: inline-flex; align-items: center; gap: 8px; font-size: 18px; }
.brand-dot { width: 14px; height: 14px; border-radius: 4px; background: var(--dot); box-shadow: 0 0 12px #3f74ff99; }
.tag { font-size: 12px; color: var(--mute); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

.hero { max-width: 1180px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 40px) 28px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "head media" "sub media" "form media"; grid-template-rows: auto auto 1fr; column-gap: clamp(18px, 3vw, 44px); align-items: start; }
.hero-head { grid-area: head; } .sub { grid-area: sub; } .form { grid-area: form; } .hero-media { grid-area: media; }
.kicker { margin: 6px 0 6px; color: var(--lamp); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
h1 { font-size: clamp(28px, min(3.6vw, 5.8vh), 48px); line-height: 1.06; margin: 0 0 10px; font-weight: 900; letter-spacing: -.5px; }
.sub { color: var(--ink2); margin: 0 0 16px; font-size: clamp(15px, 1.4vw, 18px); max-width: 38em; }

.card { background: linear-gradient(180deg, #2c2532, #241f2a); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 50px #0006; }
.form { padding: 16px 16px 14px; max-width: 560px; }
.form-title { margin: 0 0 10px; font-size: 19px; }
.fl { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
input[type=email], select { width: 100%; font: inherit; color: var(--ink); background: #18151d; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 13px; min-height: 48px; }
input[type=email]:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible, .chips input:focus-visible + *, input[type=checkbox]:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
input[aria-invalid=true] { border-color: var(--red); }
.err { color: #ffb3b3; font-size: 13.5px; margin: 5px 0 0; }
.chips { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.chips legend { font-size: 14px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.opt { color: var(--mute); font-weight: 400; }
.chips label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #1d1922; padding: 7px 11px; border-radius: 999px; font-size: 14px; cursor: pointer; user-select: none; }
.chips label:has(input:checked) { border-color: var(--lamp); background: #3a2e1c; }
.chips input { accent-color: var(--lamp); margin: 0; }
/* pet picker in the form: real face thumbnails of all three pets (same field as the "Meet the three" buttons) */
.picker { border: 0; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.picker legend { font-size: 14px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.pk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1.5px solid var(--line); background: #1d1922; border-radius: 14px; padding: 6px 4px 5px; cursor: pointer; font-weight: 800; font-size: 14px; user-select: none; }
/* whole-pet pictures (user feedback 2026-11-04 14:12: no face-only round crops): the image is a real full-body frame; contain + no mask, so nothing is cut */
.pk img, .pk .q { width: 100%; height: 76px; border-radius: 10px; object-fit: contain; display: block; background: #15121a; }
.pk .q { display: grid; place-items: center; background: #2a2430; color: var(--mute); font-size: 24px; }
.pk input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pk:has(input:checked) { border-color: var(--lamp); background: #3a2e1c; box-shadow: 0 0 0 1px var(--lamp) inset; }
.pk:has(input:focus-visible) { outline: 3px solid var(--lamp); outline-offset: 2px; }
.sel span { display: block; font-size: 13px; color: var(--ink2); margin-bottom: 3px; }
.sel.lang { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.sel.lang span { margin: 0; font-size: 14px; }
.sel.lang select { width: auto; min-width: 160px; }
.form-note a { color: var(--lamp); }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.cta { display: inline-flex; justify-content: center; align-items: center; width: 100%; margin-top: 12px; min-height: 52px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #ffd98f, #ffbf55); color: #1c1407; font: 800 17px var(--font); cursor: pointer; text-decoration: none; box-shadow: 0 6px 18px #ffbf5540; }
.cta:hover { filter: brightness(1.05); }
.cta[disabled] { opacity: .6; cursor: progress; }
.cta.ghost { width: auto; padding: 0 22px; background: transparent; color: var(--lamp); border: 1.5px solid var(--lamp); box-shadow: none; }
.form-note { margin: 8px 0 0; font-size: 12.5px; color: var(--mute); }
.status { margin-top: 8px; font-size: 14.5px; min-height: 0; }
.status.ok { color: var(--ok); } .status.bad { color: #ffb3b3; }
.form.done .hide-on-done { display: none; }

.hero-media { margin: 0; position: relative; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid var(--line); aspect-ratio: 4 / 5; max-height: calc(100vh - 120px); max-height: min(660px, calc(100vh - 120px)); justify-self: center; width: auto; height: auto; max-width: 100%; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: var(--fx, 50%) var(--fy, 45%); }
.hero-media figcaption { position: absolute; left: 10px; bottom: 10px; right: 90px; font-size: 12px; color: #ddd; background: #000a; padding: 4px 8px; border-radius: 8px; }
.sound { position: absolute; right: 10px; bottom: 10px; background: #000b; color: #fff; border: 1px solid #fff5; border-radius: 999px; padding: 6px 12px; font: 700 13px var(--font); cursor: pointer; }

section h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 12px; }
.features, .faq, .privacy { max-width: 1100px; margin: 0 auto; padding: 26px clamp(16px, 4vw, 40px); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.feat { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.feat h3 { margin: 0 0 6px; font-size: 18px; }
.feat p { margin: 0; color: var(--ink2); font-size: 15px; }
.feat.focus { border-color: var(--lamp); box-shadow: 0 0 0 1px var(--lamp) inset; }
/* "Meet the three": one card per pet, real face clip + facts + pick button */
.meet { max-width: 1100px; margin: 0 auto; padding: 26px clamp(16px, 4vw, 40px) 8px; border-top: 1px solid var(--line); }
.lede { color: var(--ink2); margin: -4px 0 14px; max-width: 54em; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pet-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.pc-video { width: 100%; aspect-ratio: 1; object-fit: contain; object-position: 50% 50%; display: block; background: #000; }   /* full-body loops: never cropped */
.pc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pc-body h3 { margin: 0; font-size: 21px; } .pc-body h3 small { color: var(--mute); font-weight: 700; font-size: 14px; margin-left: 4px; }
.pc-what { margin: 0; color: var(--ink2); font-size: 15px; }
.pick { margin-top: auto; align-self: flex-start; font: 800 15px var(--font); color: var(--lamp); background: transparent; border: 1.5px solid var(--lamp); border-radius: 12px; padding: 8px 14px; cursor: pointer; min-height: 44px; }
.pick:hover { background: #3a2e1c; }
/* "Also" line: secondary features in one row (an angle can highlight its own item) */
.also { color: var(--ink2); margin: 14px 0 0; font-size: 15px; }
.also span.focus { color: var(--lamp); font-weight: 800; }
.cta-row { text-align: center; margin: 18px 0 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 2px; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p, .privacy p { color: var(--ink2); margin: 8px 0 0; max-width: 54em; }
.todo { background: #4a2a2a; color: #ffd0d0; padding: 0 4px; border-radius: 4px; }
.foot { text-align: center; color: var(--mute); font-size: 12.5px; padding: 24px 16px 90px; }
.consent-bar { background: #241f2a; border-bottom: 1px solid var(--line); padding: 6px clamp(12px, 4vw, 40px); display: flex; gap: 10px; align-items: center; justify-content: center; }
.consent-bar[hidden] { display: none; }
.consent-bar p { margin: 0; font-size: 13.5px; color: var(--ink2); }
.consent-bar div { display: flex; gap: 6px; flex: none; }
.consent-bar button { font: 700 13.5px var(--font); border-radius: 9px; padding: 5px 11px; min-height: 32px; border: 1.5px solid var(--lamp); background: var(--lamp); color: #1c1407; cursor: pointer; }
.consent-bar button.ghost { background: transparent; color: var(--lamp); }

/* phone: headline + a live close-up of the pet's face on the first row, then the whole form; everything else below */
@media (max-width: 820px) {
  .top { padding-top: 8px; } .tag { display: none; } .brand { font-size: 16px; }
  .hero { grid-template-columns: minmax(0, 1fr) 104px; grid-template-areas: "head media" "sub sub" "form form"; grid-template-rows: auto auto auto; padding-top: 4px; column-gap: 10px; }
  .kicker { margin: 0 0 3px; font-size: 11.5px; }
  h1 { font-size: clamp(22px, 6.4vw, 30px); margin: 0; }
  .sub { font-size: 14px; line-height: 1.35; margin: 6px 0 8px; }
  .hero-media { width: 104px; height: 130px; aspect-ratio: auto; max-height: none; border-radius: 16px; }
  .hero-media video { transform: scale(var(--fz, 2.1)); }
  .hero-media figcaption { display: none; }
  .hero-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(transparent, #000e 60%); pointer-events: none; }
  .hero-media.big::after { display: none; }
  .sound { z-index: 1; }
  .sound { left: 4px; right: 4px; bottom: 4px; padding: 3px 0; font-size: 11px; }
  .hero-media.big { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 20px; margin-bottom: 8px; }
  .hero:has(.hero-media.big) { grid-template-areas: "media media" "head head" "sub sub" "form form"; }
  .hero-media.big video { transform: none; }
  .hero-media.big .sound { left: auto; right: 10px; bottom: 10px; padding: 6px 12px; font-size: 13px; }
  .form { padding: 11px 12px 10px; max-width: none; }
  .form-title { font-size: 16.5px; margin-bottom: 5px; }
  .fl { font-size: 13px; margin-bottom: 2px; }
  input[type=email] { padding: 9px 12px; min-height: 44px; }
  select { padding: 7px 10px; min-height: 40px; }
  .chips { min-width: 0; margin-top: 7px; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 3px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chips legend { font-size: 13px; margin-bottom: 4px; }
  .chips label { padding: 6px 9px; font-size: 13px; white-space: nowrap; flex: none; }
  .sel span { font-size: 12px; margin-bottom: 1px; } .sel.lang { margin-top: 7px; } .sel.lang span { font-size: 13px; }
  .cta { margin-top: 8px; min-height: 48px; font-size: 16px; }
  .form-note { margin-top: 5px; font-size: 12px; }
  .picker { margin-top: 7px; gap: 6px; } .picker legend { font-size: 13px; margin-bottom: 4px; }
  .pk { padding: 3px 3px 3px; font-size: 12.5px; gap: 2px; border-radius: 12px; } .pk img, .pk .q { height: 54px; border-radius: 8px; } .pk .q { font-size: 19px; }
  .cards { grid-template-columns: 1fr; gap: 10px; }
  .pet-card { flex-direction: row; align-items: flex-start; } .pc-video { width: 40%; aspect-ratio: 1; flex: none; align-self: flex-start; border-radius: 0 0 14px 0; }
  .pc-body { padding: 10px 12px 12px; gap: 4px; } .pc-body h3 { font-size: 18px; } .pc-body h3 small { display: block; margin: 0; font-size: 12.5px; }
  .pc-what { font-size: 13.5px; } .pick { font-size: 14px; padding: 6px 10px; min-height: 40px; }
  .consent-bar { padding: 4px 10px; justify-content: space-between; }
  .consent-bar p { font-size: 12.5px; line-height: 1.25; }
  .consent-bar button { padding: 3px 9px; min-height: 30px; font-size: 12.5px; }
}
/* laptop / desktop screens up to 960px tall: keep the whole form, including the button, in the first screen */
@media (min-width: 821px) and (max-height: 960px) {
  .top { padding-top: 6px; } .hero { padding-top: 6px; padding-bottom: 12px; }
  .kicker { margin: 0 0 2px; font-size: 12px; }
  h1 { font-size: clamp(25px, 4.9vh, 36px); margin-bottom: 4px; }
  .sub { font-size: 14.5px; line-height: 1.35; margin-bottom: 8px; }
  .form { padding: 10px 14px 8px; }
  .form-title { font-size: 17px; margin-bottom: 4px; } .fl { font-size: 13px; margin-bottom: 2px; }
  input[type=email] { min-height: 40px; padding: 7px 12px; } select { min-height: 36px; padding: 5px 10px; }
  .chips { margin-top: 6px; gap: 5px; } .chips legend { font-size: 13px; margin-bottom: 3px; } .chips label { padding: 3px 9px; font-size: 13px; }
  .picker { margin-top: 6px; gap: 6px; } .picker legend { font-size: 13px; margin-bottom: 3px; } .pk { padding: 3px 3px; font-size: 13px; } .pk img, .pk .q { height: 60px; }
  .sel span { font-size: 12px; margin-bottom: 1px; } .sel.lang { margin-top: 6px; }
  .cta { margin-top: 7px; min-height: 44px; font-size: 16px; } .form-note { margin-top: 4px; font-size: 12px; }
  .consent-bar { padding: 3px 12px; } .consent-bar button { min-height: 28px; padding: 2px 10px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
/* short phones (e.g. 360x640): tighter first screen so the button stays above the fold */
@media (max-width: 820px) and (max-height: 700px) {
  .form-title { display: none; }
  .sub { font-size: 13.5px; line-height: 1.3; margin: 4px 0 6px; }
  .picker { margin-top: 6px; } .picker legend { margin-bottom: 3px; }
  .pk img, .pk .q { height: 44px; } .pk .q { font-size: 17px; } .pk { font-size: 12px; padding: 2px 3px 2px; }
  .chips { margin-top: 5px; } .chips legend { margin-bottom: 3px; } .chips label { padding: 5px 9px; }
  .sel.lang { margin-top: 5px; } select { min-height: 38px; padding: 5px 9px; }
  .cta { margin-top: 6px; min-height: 46px; }
}