:root{--blue:#263D8C;--gold:#F4B942;--ivory:#FFF8EC;--coral:#E77B64;--navy:#172544;--ink:#26304c}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit}
.wrap{max-width:1150px;margin:auto;padding:0 25px}
header{position:sticky;top:0;background:#fffefcf5;z-index:5;border-bottom:1px solid #e8eaf0}
nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--blue);font-size:21px}
.brand img{width:61px;height:61px;object-fit:contain;border-radius:12px}
.links{display:flex;gap:25px;align-items:center;font-weight:650}
.links a:hover{color:var(--blue)}
.hero{background:linear-gradient(125deg,var(--ivory),#fff 55%,#edf1ff);padding:95px 0 105px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:55px}
.eyebrow{color:var(--blue);text-transform:uppercase;letter-spacing:2px;font-weight:850;font-size:12px}
h1{font-size:clamp(39px,5vw,65px);letter-spacing:-2.2px;line-height:1.08;color:var(--navy);margin:16px 0 22px}
h1 em{color:var(--blue);font-style:normal}
h2{font-size:clamp(29px,3.4vw,43px);letter-spacing:-1.2px;color:var(--navy);margin:10px 0 16px}
h3{color:var(--navy);margin:8px 0;font-size:21px}
p{font-size:17px;line-height:1.7;color:#576078}
.lead{font-size:20px;max-width:610px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.art{min-height:375px;border-radius:30px;background:linear-gradient(145deg,#263d8c,#172544);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 22px 55px #17254422}
.art:before{content:"";width:350px;height:350px;border-radius:50%;background:#f4b942;position:absolute;right:-85px;top:-80px}
.art:after{content:"";width:250px;height:250px;border-radius:50%;background:#e77b64;position:absolute;left:-95px;bottom:-130px}
.art .pets{position:relative;z-index:1;font-size:125px;letter-spacing:-18px;filter:drop-shadow(0 12px 15px #0003)}
.art small{position:absolute;z-index:2;bottom:24px;left:25px;color:white;font-size:17px;font-weight:800}
.section{padding:85px 0}
.section.tint{background:var(--ivory)}
.center{text-align:center}
.center p{max-width:670px;margin:0 auto 36px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:35px}
.card{background:white;padding:30px;border:1px solid #e7e9f1;border-radius:21px;box-shadow:0 10px 28px #17254408}
.symbol{font-size:35px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:35px}
.step{padding:28px;border-radius:20px;background:#f4f6fc}
.number{display:inline-grid;place-items:center;background:var(--gold);color:var(--navy);width:42px;height:42px;border-radius:50%;font-weight:900}
.banner{background:var(--navy);color:white;border-radius:28px;padding:55px;text-align:center}
.banner h2,.banner p{color:white}
.banner p{max-width:640px;margin:0 auto 22px}
footer{background:#101a34;color:#fff;padding:45px 0}
footer p{color:#c9cddd;font-size:14px}
.foot{display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}

@media (max-width:760px){nav{flex-wrap:wrap;padding:10px 0}
.links{width:100%;justify-content:space-between;font-size:13px;gap:9px}
.hero{padding:60px 0}
.hero-grid{grid-template-columns:1fr}
.art{min-height:250px}
.art .pets{font-size:85px}
.cards,.steps{grid-template-columns:1fr}
.section{padding:55px 0}
.banner{padding:35px 22px}
.lead{font-size:18px}}
body{background:var(--navy);color:var(--ivory)}
header{background:#172544f5;border-bottom-color:#34456e}
.links{color:var(--ivory)}
.links a:hover{color:var(--gold)}
.brand{color:var(--ivory)}
.hero{background:linear-gradient(125deg,#172544,#263D8C 70%,#172544)}
.eyebrow{color:var(--gold)}
h1,h2{color:var(--ivory)}
h1 em{color:var(--gold)}
p{color:#e0e6f4}
.section.tint{background:#213365}
.card{background:#263D8C;border-color:#425ba0}
.card h3,.step h3{color:var(--ivory)}
.card p,.step p{color:#e0e6f4}
.step{background:#263D8C}
.banner{background:#101a34}
.art{background:#172544 url("hero-homestay.png") center center/cover no-repeat}
.art:before,.art:after,.art .pets,.art small{display:none}
.feature-photo,.step-photo{display:block;width:100%;height:175px;object-fit:cover;border-radius:15px;margin-bottom:18px}
.card,.step{text-align:left}
.card .symbol{display:none}
.step .number{margin-bottom:12px}
@media (max-width:760px){.feature-photo,.step-photo{height:190px}}
.card,.step{padding:0;overflow:hidden}
.card .feature-photo,.step .step-photo{width:100%;margin:0 0 18px 0;border-radius:0;display:block}
.card h3,.card p,.step h3,.step p{margin-left:28px;margin-right:28px}
.card p,.step p{margin-bottom:28px}
.step .number{display:none!important}

/* BUTTONS — single source of truth. All pages use this file. */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  text-align:center;
  padding:15px 23px;
  min-height:56px;
  border:2px solid #F4B942;
  border-radius:1000px;
  background-color:#F4B942;
  color:#172544;
  -webkit-text-fill-color:#172544;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 6px 14px #263d8c22;
}
.btn:is(:link,:visited,:hover,:focus,:active),
.btn.gold:is(:link,:visited,:hover,:focus,:active),
.btn.gold {color:#172544;-webkit-text-fill-color:#172544;}
.btn.outline,
.btn.outline:is(:link,:visited,:hover,:focus,:active) {
  background:transparent;
  color:#F4B842;
  -webkit-text-fill-color:#F4B842;
  border-color:#F4B842;
}
.actions > .btn {min-width:210px;}

/* Pet parent hero: approved visual, responsive, no impact on other pages */
.pet-parent-hero-art{background:#172544 url("pet-parent-host-happiness.png") center center/cover no-repeat!important;min-height:390px;}
@media(max-width:680px){.pet-parent-hero-art{min-height:260px;background-position:center center!important;}}

/* Edge-to-edge trust imagery within each card */
.trust-photo{display:block;width:100%;height:270px;object-fit:cover;object-position:center;margin:0;border:0;border-radius:0}
@media(max-width:760px){.trust-photo{height:320px}}

/* Service card art: edge-to-edge on all devices */
.service-photo{display:block;width:100%;height:auto;aspect-ratio:700/749;object-fit:cover;object-position:center;margin:0;border:0;border-radius:0}

/* Host benefits and onboarding: six edge-to-edge visual cards */
.cards>.card,.steps>.step{padding:0;overflow:hidden;text-align:left}
.host-feature-image{display:block;width:100%;height:205px;object-fit:cover;object-position:center}
.cards>.card h3,.steps>.step h3{margin:22px 24px 9px}
.cards>.card p,.steps>.step p{margin:0 24px 26px}
@media(max-width:680px){.host-feature-image{height:230px}}

/* Approved dark-logo header update */
header{background:#101318f7;border-bottom:1px solid #293247}
.brand img{width:clamp(150px,16vw,205px);height:84px;object-fit:contain;border-radius:0}
nav{min-height:96px}
.links{color:#FFF8EC}
.links a:not(.btn):hover{color:#F4B942}
@media(max-width:760px){.brand img{width:154px;height:76px}nav{min-height:80px}}

/* Approved Become a Host hero creative */
.host-hero-art{background:#172544 url("host-hero-approved.png") center center/cover no-repeat!important;min-height:410px;}
@media(max-width:680px){.host-hero-art{min-height:275px;background-position:center center!important}}
/* Responsive WhatsApp floating action button */
.wa-fab{position:fixed;right:40px;bottom:40px;z-index:1000;width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#25D366;color:#fff!important;box-shadow:0 10px 28px #0005;text-decoration:none;transition:transform .2s,box-shadow .2s}
.wa-fab svg{width:39px;height:39px;fill:currentColor}.wa-fab:hover{transform:translateY(-3px);box-shadow:0 14px 34px #0006}.wa-fab:focus-visible{outline:3px solid #F4B942;outline-offset:4px}
@media(min-width:681px) and (max-width:1024px){.wa-fab{width:60px;height:60px;right:24px;bottom:24px}.wa-fab svg{width:34px;height:34px}}
@media(max-width:680px){.wa-fab{width:56px;height:56px;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))}.wa-fab svg{width:30px;height:30px}}

/* Host hero image: show full artwork without cropping any edge */
img.art.host-hero-art{display:block;width:100%;height:auto;min-height:0!important;aspect-ratio:auto;object-fit:contain;background:none!important;max-width:100%;}
@media(max-width:680px){img.art.host-hero-art{min-height:0!important;}}


/* Image visibility correction: preserve the full image on every device. */
img.art, img.art.pet-parent-hero-art, img.art.host-hero-art {
 display:block; width:100%; max-width:100%; height:auto !important;
 min-height:0 !important; aspect-ratio:auto !important;
 object-fit:contain !important; object-position:center;
 background:none !important; border-radius:24px;
}
.feature-photo, .step-photo, .trust-photo, .service-photo, .host-feature-image {
 display:block; width:100%; max-width:100%; height:auto !important;
 min-height:0 !important; aspect-ratio:auto !important;
 object-fit:contain !important; object-position:center;
 margin-left:0; margin-right:0; border-radius:0;
}
/* Keep the image inside the card, with no crop or forced aspect ratio. */
.card, .step {min-width:0;}
@media(max-width:760px){
 img.art, img.art.pet-parent-hero-art, img.art.host-hero-art {height:auto !important;min-height:0 !important;}
 .feature-photo,.step-photo,.trust-photo,.service-photo,.host-feature-image {height:auto !important;}
}