:root{color-scheme:light;--ink:#1c1b1a;--muted:#6b6560;--coral:#c8543a;--soft:#f7f3ec;--line:#ece7df;--font:'Plus Jakarta Sans',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;color:var(--ink);background:#fff;font:500 16px/1.6 var(--font);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}button,a{touch-action:manipulation}:focus-visible{outline:3px solid #e2674b;outline-offset:5px}::selection{background:#fce7df}.container{width:min(calc(100% - 80px),1280px);margin-inline:auto}.skip{position:fixed;top:-80px;left:16px;z-index:200;padding:12px;background:#fff}.skip:focus{top:12px}h1,h2,h3,p{margin:0}.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;line-height:1;font-weight:800;font-size:27px;letter-spacing:-1.4px}.desktop-nav{display:flex;align-items:center;gap:38px;font-size:14px;font-weight:650;color:var(--muted)}.desktop-nav button{padding:0}.desktop-nav .nav-cta{font-weight:800;color:var(--coral)}.desktop-nav a:hover,.desktop-nav button:hover{color:var(--coral)}.language{padding:6px 11px;background:#f1ece3;border-radius:30px;font-size:12px;font-weight:700;color:var(--ink)}.mobile-nav{display:none}.hero{padding:44px 0 76px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;min-height:580px}.eyebrow{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.12em}.hero h1{font-size:clamp(48px,5.1vw,80px);line-height:.99;font-weight:800;letter-spacing:-.055em;margin-top:20px}.hero-copy>p{max-width:485px;color:var(--muted);font-size:19px;line-height:1.6;margin:25px 0 32px}.stores{display:flex;align-items:center;gap:22px}.store{display:inline-flex;align-items:center;gap:13px;border-radius:15px;padding:14px 22px;background:var(--ink);color:white;box-shadow:0 12px 28px #1c1b1a25;text-align:left;transition:transform .2s,box-shadow .2s}.store:hover{transform:translateY(-3px);box-shadow:0 15px 35px #1c1b1a38}.store svg{width:27px;height:30px}.store span{display:grid;line-height:1.2}.store small{font-size:10px;opacity:.8;letter-spacing:.02em}.store strong{font-size:18px;font-weight:700;letter-spacing:-.4px}.platform-note{font-size:12px;line-height:1.65;color:#8b837b}.text-link{color:var(--coral);font-size:14px;font-weight:750;text-decoration:underline;text-decoration-color:#e2674b70;text-underline-offset:5px;padding:0}.text-link:hover{text-decoration-color:var(--coral)}.text-link span{display:inline-block;margin-left:4px;transition:translate .2s}.text-link:hover span{translate:3px 0}.demo-link{display:block;margin-top:22px}.hero-visual{position:relative;min-height:580px;display:flex;align-items:center;justify-content:center}.blob{position:absolute;inset:7% 1% 8%;background:radial-gradient(circle at 25% 15%,#ffffff90,transparent 35%),linear-gradient(145deg,#dff5ec,#e3f3fb);border-radius:46% 54% 43% 57%/49% 45% 55% 51%;animation:breathe 9s ease-in-out infinite alternate}.phone{position:relative;aspect-ratio:.486;background:#171717;border:8px solid #171717;border-radius:48px;isolation:isolate;box-shadow:0 28px 70px #1c1b1a38;overflow:hidden}.phone:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff60;pointer-events:none;z-index:5}.screen{position:absolute;inset:0;overflow:hidden;border-radius:39px;background:var(--soft)}.screen>img,.screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.phone-back,.phone-front{position:absolute;animation:float 6s ease-in-out infinite}.phone-back{left:9%;width:232px;rotate:-9deg;animation-delay:-2s;z-index:1}.phone-front{right:7%;width:272px;rotate:4deg;z-index:2}.camera{position:absolute;top:13px;left:calc(50% - 4px);width:8px;height:8px;background:#171717;border-radius:50%;z-index:3;box-shadow:0 0 0 2px #ffffff20}.date,.time{position:absolute;left:0;width:100%;text-align:center;color:#fff;text-shadow:0 2px 10px #4f3e2840;z-index:3}.date{top:9.8%;font-size:11px;font-weight:650}.time{top:12%;font-size:64px;font-weight:600;letter-spacing:-5px;line-height:1.2}.phone-back .time{font-size:54px}.phone-bottom{position:absolute;bottom:5%;left:9%;right:9%;display:flex;justify-content:space-between;color:#fff;font-size:21px}.phone-bottom span{display:grid;place-items:center;border-radius:50%;width:33px;height:33px;background:#4b423a66;backdrop-filter:blur(8px)}.gesture{position:absolute;bottom:1.8%;left:33%;width:34%;height:3px;background:#fff;border-radius:4px}.motion-control{position:absolute;bottom:-22px;right:40%;color:var(--muted);font-size:11px;padding:6px 12px;border:1px solid var(--line);border-radius:20px;z-index:4;background:#ffffffb0}.how{padding:100px 0;background:linear-gradient(#fff,var(--soft));overflow:hidden}.section-heading{text-align:center;display:grid;justify-items:center;gap:20px}h2{font-size:clamp(36px,4.2vw,64px);line-height:1.05;font-weight:800;letter-spacing:-.05em}.section-heading p,.download-inner>p{font-size:19px;line-height:1.6;color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}.step{padding:22px 22px 30px;border:1px solid var(--line);border-radius:26px;box-shadow:0 18px 45px #1c1b1a14;background:#fff}.step-media{aspect-ratio:1.35;position:relative;border-radius:18px;overflow:hidden;background:var(--soft);margin-bottom:24px}.scene-strip{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:7px;transform:rotate(-7deg) scale(1.13);transform-origin:center}.scene-strip img{width:100%;height:100%;object-fit:cover;border-radius:10px}.scene-strip img:nth-child(even){translate:0 13px}.scene-label,.result-label{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:#fffffff0;box-shadow:0 3px 12px #0001;padding:7px 12px;border-radius:30px;white-space:nowrap;font-size:10px;font-weight:700}.photo-picker{background:#edf1ec;display:grid;place-items:center}.photo-stack{width:48%;height:76%;position:relative;rotate:-7deg;translate:0 -10px}.photo-stack:before{content:'';position:absolute;inset:0;background:#fff;border-radius:12px;rotate:13deg;box-shadow:0 6px 20px #342c2320}.photo-stack img{width:100%;height:100%;object-fit:cover;position:relative;border:6px solid white;border-bottom:18px solid white;border-radius:12px;box-shadow:0 12px 20px #342c2320}.photo-check{position:absolute;right:-10px;bottom:7px;background:#e2674b;color:#fff;box-shadow:0 3px 8px #0002;border:3px solid white;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:15px}.pet-switch{position:absolute;bottom:10px;background:#ffffffdd;border-radius:30px;padding:3px;display:flex;gap:3px}.pet-switch button{padding:4px 16px;border-radius:30px;font-size:11px}.pet-switch button[aria-pressed=true]{background:var(--ink);color:white}.result>img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:50% 75%;transition:opacity .2s}.result-label{display:flex;gap:7px;align-items:center}.result-label>span{width:6px;height:6px;border-radius:50%;background:#7e9a70}.step-number{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fce7df;color:var(--coral);font-size:19px;font-weight:800}.step h3{font-size:24px;font-weight:800;line-height:1.3;letter-spacing:-.7px;margin:16px 0 8px}.step>p{font-size:15px;line-height:1.6;color:var(--muted)}.how-link{text-align:center;margin-top:48px}.download{position:relative;overflow:hidden;background:linear-gradient(var(--soft),#fff);padding:92px 0 104px}.download:before,.download:after{content:'';position:absolute;border-radius:50%;filter:blur(2px)}.download:before{width:320px;height:320px;left:-110px;top:-110px;background:#fce7df}.download:after{width:360px;height:360px;right:-100px;bottom:-140px;background:#dbe3d3}.download-inner{display:grid;justify-items:center;text-align:center;gap:22px;position:relative;z-index:1}.download-icon{border-radius:29px;box-shadow:0 14px 26px #6752381c;rotate:-6deg;margin-bottom:4px}.download-inner .download-note{font-size:11px;margin-top:0;color:#82786f}.download h2{max-width:1000px}.download .store{margin-top:5px}footer{border-top:1px solid var(--line);padding:34px 0}.footer-inner{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:40px}.footer-inner .brand{font-size:23px}.footer-inner p{font-size:11px;color:#82796f;margin-top:12px}.footer-inner nav{display:flex;flex-wrap:wrap;gap:24px;font-size:12px;color:var(--muted)}.footer-inner nav a:hover{color:var(--coral)}.footer-end{text-align:right}.footer-end p{margin-top:18px}dialog{border:1px solid var(--line);border-radius:28px;padding:38px;max-width:min(850px,calc(100% - 32px));max-height:90dvh;overflow:auto;box-shadow:0 30px 120px #0004;color:var(--ink)}dialog::backdrop{background:#25211ab0;backdrop-filter:blur(9px)}.close-dialog{position:absolute;right:13px;top:9px;font-size:30px;width:42px;height:42px;line-height:1;border-radius:50%;z-index:10}.close-dialog:hover{background:var(--soft)}.preview-layout{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:40px}.preview-phone{width:230px;box-shadow:0 16px 40px #0002}.preview-copy h2{font-size:38px;line-height:1.1;margin:18px 0}.preview-copy p,.availability>p{color:var(--muted);font-size:15px;margin:20px 0}.preview-copy .fine-print{font-size:12px}.pill{display:inline-flex;gap:32px;background:var(--ink);color:white;padding:13px 23px;border-radius:40px;font-size:14px;font-weight:700}.availability{width:450px;padding:40px}.availability>img{border-radius:20px;margin-bottom:26px}.availability h2{font-size:37px;margin-top:15px}.motion-paused *{animation-play-state:paused!important}@keyframes float{50%{translate:0 -10px}}@keyframes breathe{to{rotate:1deg;scale:1.02 .98}}@media(min-width:1550px){.hero-grid{min-height:620px}.hero-visual{min-height:620px}}@media(max-width:1100px){.container{width:calc(100% - 48px)}.hero-grid{gap:20px}.phone-back{left:2%;width:210px}.phone-front{right:0;width:245px}.desktop-nav{gap:24px}.step h3{font-size:21px}.step{padding:16px 16px 24px}.footer-inner{gap:25px}}@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:30px}.hero-copy{max-width:660px}.hero h1 br:nth-child(2){display:none}.hero h1{font-size:68px;max-width:650px}.hero-visual{width:min(100%,590px);margin:auto;min-height:590px}.phone-back{left:10%;width:232px}.phone-front{right:9%;width:272px}.hero-copy>p{max-width:530px}.footer-inner{grid-template-columns:1fr auto}.footer-end{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.footer-end p{margin:0}.steps{gap:14px}.step h3{font-size:19px}.step>p{font-size:13px}.scene-label{font-size:8px}.result-label{font-size:8px}}@media(max-width:700px){.container{width:calc(100% - 36px)}.header-inner{min-height:72px}.desktop-nav{display:none}.brand{font-size:25px}.mobile-nav{display:block;position:relative;z-index:20}.mobile-nav summary{list-style:none;width:44px;height:44px;border-radius:50%;background:var(--soft);display:grid;align-content:center;justify-content:center;gap:5px;cursor:pointer}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav summary span{width:19px;height:2px;background:var(--ink);border-radius:2px}.mobile-nav nav{position:absolute;top:53px;right:0;display:grid;width:210px;padding:10px;border:1px solid var(--line);background:#fff;border-radius:18px;box-shadow:0 15px 40px #0002}.mobile-nav a,.mobile-nav button{padding:12px;text-align:left;font-size:14px}.hero{padding:33px 0 46px}.hero-grid{gap:34px}.eyebrow{font-size:10px}.hero h1{font-size:clamp(45px,12.4vw,68px);margin-top:17px;line-height:1.03;letter-spacing:-.06em}.hero h1 br:nth-child(2){display:initial}.hero-copy>p{font-size:16px;line-height:1.7;margin:22px 0 27px;max-width:440px}.store{padding:13px 18px;gap:11px}.store strong{font-size:17px}.platform-note{font-size:11px}.stores{gap:18px}.demo-link{font-size:12px}.hero-visual{min-height:460px}.phone-back{left:5%;width:45%;border-radius:36px;border-width:6px}.phone-front{right:4%;width:52%;border-radius:40px;border-width:7px}.phone-back .screen{border-radius:30px}.phone-front .screen{border-radius:33px}.date{font-size:8px}.time{font-size:47px}.phone-back .time{font-size:40px}.camera{width:6px;height:6px;top:9px}.phone-bottom span{width:25px;height:25px;font-size:16px}.blob{inset:9% -6%}.motion-control{bottom:0;right:36%}.how{padding:65px 0}.section-heading{text-align:left;justify-items:start;gap:18px}h2{font-size:clamp(35px,9.5vw,48px);line-height:1.06}.section-heading p,.download-inner>p{font-size:16px}.steps{grid-template-columns:1fr;max-width:460px;margin-top:34px;gap:22px}.step{padding:20px 20px 27px}.step h3{font-size:23px}.step>p{font-size:15px}.scene-label,.result-label{font-size:11px}.step-media{aspect-ratio:1.35}.how-link{margin-top:32px}.download{padding:70px 0 80px}.download:before{width:200px;height:200px;top:-100px;left:-100px}.download:after{width:230px;height:230px;right:-120px;bottom:-100px}.download-icon{width:86px;height:86px;border-radius:24px}.download h2{font-size:36px}.download-inner{gap:20px}.footer-inner{grid-template-columns:1fr;gap:24px}.footer-inner nav{gap:22px}.footer-end{grid-column:auto}.preview-layout{grid-template-columns:1fr;gap:24px}.preview-phone{width:175px;margin:auto}.preview-copy h2{font-size:30px}.preview-copy p{margin:14px 0}dialog{padding:32px 24px}.availability h2{font-size:33px}}@media(max-width:360px){.hero-visual{min-height:405px}.platform-note{display:none}.hero h1{font-size:44px}.footer-inner nav{gap:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Same four scene slots, now playing the existing world videos. */
.scene-strip>button{display:block;width:100%;height:100%;padding:0;overflow:hidden;border-radius:10px}.scene-strip>button:nth-child(even){translate:0 13px}.scene-strip video{width:100%;height:100%;object-fit:cover;border-radius:10px}

/* Real photo → chosen world → generated motion, in the original three cards. */
.scenery>img,.result>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 75%}
.pet-switch{white-space:nowrap;max-width:calc(100% - 12px)}
.pet-switch button{padding-inline:12px}

/* Show complete source frames instead of cropping portrait scenes into landscape cards. */
.how .step-media{aspect-ratio:9/16}
.scenery>img,.result>video{object-fit:contain;object-position:center}
.photo-stack{width:76%;height:auto;rotate:0;translate:0 -14px}
.photo-stack img{height:auto;object-fit:contain;background:#fff}
#preview .screen>video{object-fit:contain}
@media(min-width:701px) and (max-width:900px){.pet-switch{gap:0}.pet-switch button{padding-inline:6px;font-size:10px}}

.browse-places{font-size:12px;margin:8px 0 10px}
#places{width:min(1000px,94vw);max-height:90dvh;overflow:auto}
#places h2{font-size:32px;margin-bottom:24px}
.places-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 14px}
.places-grid figure{margin:0;min-width:0}.places-grid img{width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;border-radius:10px;background:var(--soft)}
.places-grid figcaption{font-size:12px;margin-top:8px}
@media(max-width:700px){.places-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The finished example lives on a phone, with the entire 9:16 video visible. */
.result{display:flex;align-items:center;justify-content:center;background:#eceee9;container-type:inline-size}
.result-device{width:82%;padding:6px;border-radius:32px;background:#1d1d1d;box-shadow:0 18px 30px #1c1b1a30;transform:translateY(-10px);position:relative}
.result-screen{position:relative;width:100%;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#f7f3ec}
.result-screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.result-lockscreen{position:absolute;inset:0;pointer-events:none;color:#fff;text-align:center;text-shadow:0 1px 8px #342c2350}
.result-camera{position:absolute;top:9px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#171717}
.result-date{position:absolute;top:10%;left:0;width:100%;font-size:clamp(7px,2.8cqw,11px);font-weight:650}
.result-time{position:absolute;top:14%;left:0;width:100%;font-size:clamp(28px,14cqw,54px);line-height:1.1;font-weight:600;letter-spacing:-.06em}
.result-gesture{position:absolute;bottom:2%;left:35%;width:30%;height:3px;background:#fff;border-radius:3px}
@media(min-width:701px) and (max-width:900px){.result-device{padding:4px;border-radius:23px}.result-screen{border-radius:19px}}

/* Current PawMe app icon: preserve square artwork with UI corner masking. */
.brand img{border-radius:24%;object-fit:cover}

.brand{gap:4px}.brand .brand-mark{height:33px;width:auto}.brand .brand-word{height:26px;width:auto}.footer-inner .brand .brand-mark{height:28px}.footer-inner .brand .brand-word{height:22px}
.pet-switch button{padding:4px 11px}@media(max-width:700px){.pet-switch button{padding:4px 9px;font-size:10.5px}}

/* Hero: the original photo sits on each phone so the change is explicit. */
.pet-card{position:absolute;z-index:4;margin:0;padding:6px 6px 8px;background:#fff;border-radius:14px;box-shadow:0 14px 30px #1c1b1a2e;animation:float 6s ease-in-out infinite}
.pet-card img{width:104px;height:104px;object-fit:cover;border-radius:9px}
.pet-card figcaption{margin-top:6px;font-size:11px;font-weight:750;text-align:center;color:var(--ink)}
.pet-card-arrow{position:absolute;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--coral);color:#fff;font-size:15px;font-weight:800;box-shadow:0 6px 14px #c8543a55}
.pet-card-back{left:5%;bottom:14%;rotate:-7deg;animation-delay:-3s}.pet-card-back .pet-card-arrow{right:-13px;top:-11px;rotate:-90deg}
.pet-card-front{right:4%;top:30%;rotate:6deg;animation-delay:-1s}.pet-card-front .pet-card-arrow{left:-13px;bottom:-11px}
@media(max-width:700px){.pet-card img{width:70px;height:70px}.pet-card{padding:4px 4px 6px;border-radius:11px}.pet-card figcaption{font-size:9px;margin-top:4px}.pet-card-arrow{width:24px;height:24px;font-size:12px}.pet-card-back{left:2%;bottom:12%}.pet-card-front{right:2%;top:28%}}
/* Step 2: pick a sample by its photo. */
.pet-switch.pet-photos{gap:8px;padding:6px;border-radius:18px;background:#ffffffe6}
.pet-photos button{padding:0!important;width:46px;height:46px;border-radius:12px;overflow:hidden;border:2px solid transparent;opacity:.72;transition:opacity .2s,transform .2s,border-color .2s}
.pet-photos button img{width:100%;height:100%;object-fit:cover}
.pet-photos button[aria-pressed=true]{background:none!important;border-color:var(--coral);opacity:1;transform:translateY(-2px)}
@media(max-width:700px){.pet-photos button{width:42px;height:42px}}