/* homlystay.com owner page. Colours follow the ad kit (lagoon teal + saffron) with Kerala brights added. */
:root {
  --deep:#0f3d3e; --lagoon:#1c6b64; --saffron:#e9761c; --mango:#f6b62b; --hibiscus:#e2456f; --leaf:#2f9e5b;
  --sky:#2f9fd6; --violet:#7b5cd6; --wa:#1f9d55; --wa-dark:#17834a;
  --bg:#fff8ec; --ink:#17302f; --muted:#4d6361; --card:#fff; --line:rgba(15,61,62,.12); --shadow:0 10px 30px rgba(15,61,62,.10);
  --hero-top:#fff3df; --sk1:#ffe3c2; --sk2:#ffc6a6; --sk3:#ffb27a; --sun:#ffb43a; --wt1:#2a9d9a; --wt2:#0f5c5f;
  --hill1:#86c97f; --hill2:#4fa86a; --farpalm:#2f7d4a; --bird:#3a2a3a; --star:0;
  --tint1:#fff1d6; --tint2:#e3f6ea; --tint3:#e2f2fb; --tint4:#ffe4ec; --tint5:#efe9ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0c1d1d; --ink:#eaf4f1; --muted:#a9c0bb; --card:#132c2b; --line:rgba(255,255,255,.10); --shadow:0 10px 30px rgba(0,0,0,.35);
    --hero-top:#0e1a33; --sk1:#1d2b55; --sk2:#5a3d7a; --sk3:#d9715a; --sun:#ff8a5c; --wt1:#1f566e; --wt2:#0b2a36;
    --hill1:#2a4a50; --hill2:#1c3a3e; --farpalm:#10292b; --bird:#e7dcff; --star:1;
    --tint1:#2c2614; --tint2:#14301f; --tint3:#122a36; --tint4:#33161f; --tint5:#221c3a;
  }
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x:hidden }
body.ml { font-family:"Noto Sans Malayalam", Inter, system-ui, sans-serif; line-height:1.75 }
h1, h2, h3, .logo { font-family:"Baloo Chettan 2", Inter, system-ui, sans-serif; line-height:1.15 }
h2 { font-size:clamp(28px, 5vw, 42px); margin:0 0 28px; color:var(--deep) }
@media (prefers-color-scheme: dark) { h2 { color:var(--ink) } }
h3 { font-size:21px; margin:0 0 6px }
a { color:inherit }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px }
section { padding:72px 0; position:relative }
.ico { width:22px; height:22px; flex:none }

/* header */
.top { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--hero-top) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px }
.logo { font-size:28px; font-weight:800; text-decoration:none; letter-spacing:.2px }
.logo span:first-child { color:var(--lagoon) } .logo span:last-child { color:var(--saffron) }
@media (prefers-color-scheme: dark) { .logo span:first-child { color:#5fd0c0 } }
.top nav { display:flex; align-items:center; gap:10px }
.lang { font-weight:600; text-decoration:none; padding:8px 12px; border-radius:999px; border:1.5px solid var(--line); font-size:15px }
.lang:hover { border-color:var(--saffron); color:var(--saffron) }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; padding:14px 22px; border-radius:999px; transition:transform .2s, box-shadow .2s, background .2s; line-height:1.25 }
.btn:hover { transform:translateY(-2px) }
.btn-wa { background:var(--wa); color:#fff; box-shadow:0 8px 22px rgba(31,157,85,.35) }
.btn-wa:hover { background:var(--wa-dark) }
.btn-wa.sm { padding:9px 14px; font-size:15px; box-shadow:none }
.btn-ghost { background:var(--card); color:var(--deep); border:2px solid var(--deep) }
@media (prefers-color-scheme: dark) { .btn-ghost { color:var(--ink); border-color:var(--ink) } }
.btn-sun { background:var(--mango); color:#3a2500; word-break:break-all }
.btn.big { font-size:20px; padding:18px 30px }
@media (max-width:520px) { .top .btn-wa.sm span { display:none } .top .btn-wa.sm { padding:9px } }

/* hero */
.hero { padding:0; background:linear-gradient(var(--hero-top), var(--sk1) calc(100% - clamp(240px, 38vw, 470px)), var(--sk2)); overflow:hidden }
.hero-text { padding-top:48px; padding-bottom:8px; text-align:center; position:relative; z-index:2 }
.kicker { display:inline-block; margin:0 0 14px; padding:6px 14px; border-radius:999px; background:var(--card); color:var(--saffron); font-weight:700; font-size:14px; letter-spacing:.3px; box-shadow:var(--shadow) }
.hero h1 { font-size:clamp(34px, 6.4vw, 66px); margin:0 auto 16px; max-width:900px; color:var(--deep); font-weight:800 }
@media (prefers-color-scheme: dark) { .hero h1 { color:#fff } }
.hero h1 em { font-style:normal; background:linear-gradient(90deg, var(--saffron), var(--hibiscus) 55%, var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent }
.ml .hero h1 { font-size:clamp(28px, 5.2vw, 54px); line-height:1.3 }
.lead { font-size:clamp(17px, 2.2vw, 21px); color:var(--muted); max-width:680px; margin:0 auto 26px }
.lead strong { color:var(--leaf) }
.ctas { display:flex; flex-wrap:wrap; gap:12px; justify-content:center }
.note { font-size:15px; color:var(--muted); margin:16px auto 0; max-width:560px }
.scene { display:block; width:100%; height:clamp(240px, 38vw, 470px); margin-top:-10px; -webkit-mask-image:linear-gradient(transparent, #000 22%); mask-image:linear-gradient(transparent, #000 22%) }

/* scene colours */
.sk1 { stop-color:var(--sk1) } .sk2 { stop-color:var(--sk2) } .sk3 { stop-color:var(--sk3) }
.wt1 { stop-color:var(--wt1) } .wt2 { stop-color:var(--wt2) }
.sun { fill:var(--sun) } .hill1 { fill:var(--hill1) } .hill2 { fill:var(--hill2) }
.far-palms > g > path { stroke:var(--farpalm) } .far-palms g g path { fill:var(--farpalm) }
.stars { opacity:var(--star) }
.clouds { opacity:.8 } @media (prefers-color-scheme: dark) { .clouds { opacity:.12 } }
.wl { stroke:rgba(255,255,255,.35); stroke-width:3 }
.shine rect { fill:rgba(255,226,150,.75) }
.birds { stroke:var(--bird) }

/* scene motion (SVG user units = px) */
.wv { animation:wave 10s linear infinite } .w2 { animation-duration:14s; animation-direction:reverse } .w3 { animation-duration:7s }
@keyframes wave { to { transform:translateX(-240px) } }
.boat { transform:translate(560px, 412px); animation:boat 80s linear infinite; animation-delay:-34s }
@keyframes boat { from { transform:translate(-200px, 412px) } to { transform:translate(1660px, 412px) } }
.canoe { transform:translate(820px, 462px) scale(-1, 1); animation:canoe 46s linear infinite; animation-delay:-18s }
@keyframes canoe { from { transform:translate(1620px, 462px) scale(-1, 1) } to { transform:translate(-160px, 462px) scale(-1, 1) } }
.bob { animation:bob 3.2s ease-in-out infinite alternate } .b2 { animation-duration:2.2s }
@keyframes bob { from { transform:translateY(0) rotate(-1deg) } to { transform:translateY(-5px) rotate(1deg) } }
.oar { transform-box:fill-box; transform-origin:50% 0; animation:oar 1.6s ease-in-out infinite alternate }
@keyframes oar { from { transform:rotate(-18deg) } to { transform:rotate(22deg) } }
.sway { transform-box:fill-box; transform-origin:50% 100%; animation:sway 6s ease-in-out infinite alternate }
.sw2 { animation-duration:7.5s; animation-delay:-2s } .sw3 { animation-duration:5.2s; animation-delay:-1s }
@keyframes sway { from { transform:rotate(-2.2deg) } to { transform:rotate(2.2deg) } }
.birds { transform:translate(300px, 150px); animation:birds 42s linear infinite; animation-delay:-12s }
@keyframes birds { from { transform:translate(-120px, 170px) } to { transform:translate(1560px, 90px) } }
.bd { transform-box:fill-box; transform-origin:50% 100%; animation:flap .55s ease-in-out infinite alternate }
.bd:nth-child(2) { animation-delay:-.2s } .bd:nth-child(3) { animation-delay:-.35s }
@keyframes flap { to { transform:scaleY(.35) } }
.cl { animation:drift 28s ease-in-out infinite alternate } .cl2 { animation-duration:36s }
@keyframes drift { to { transform:translateX(80px) } }
.sun, .glow { transform-box:fill-box; transform-origin:center; animation:pulse 4.5s ease-in-out infinite alternate }
@keyframes pulse { to { transform:scale(1.07) } }
.shine { animation:shine 2.4s ease-in-out infinite alternate }
@keyframes shine { from { opacity:.35 } to { opacity:1 } }

/* who it's for */
.kinds { text-align:center }
.kgrid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px }
.k { border-radius:24px; padding:26px 18px; color:#fff; display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:var(--shadow); transition:transform .25s }
.k:hover { transform:translateY(-6px) rotate(-1deg) }
.k b { font-family:"Baloo Chettan 2", Inter, sans-serif; font-size:22px; line-height:1.2; max-width:100%; overflow-wrap:anywhere }
.k span:last-child { font-size:15px; opacity:.95 }
.ki { font-size:46px; line-height:1; animation:float 3.6s ease-in-out infinite alternate; filter:drop-shadow(0 6px 8px rgba(0,0,0,.18)) }
.k2 .ki { animation-delay:-.9s } .k3 .ki { animation-delay:-1.8s } .k4 .ki { animation-delay:-2.7s }
@keyframes float { to { transform:translateY(-8px) } }
.k1 { background:linear-gradient(140deg, #f6b62b, #e9761c) }
.k2 { background:linear-gradient(140deg, #3fbf6e, #1c6b64) }
.k3 { background:linear-gradient(140deg, #2fb4e6, #6a55d0) }
.k4 { background:linear-gradient(140deg, #f26b93, #e9761c) }
@media (max-width:860px) { .kgrid { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width:520px) { .kgrid { gap:12px } .k { padding:20px 8px } .k b { font-size:18px } .ml .k b { font-size:16.5px } .k span:last-child { font-size:14px } }

/* what you get */
.get { background:linear-gradient(180deg, var(--bg), var(--tint2)) }
.grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px }
.card { background:var(--card); border-radius:22px; padding:22px 20px; box-shadow:var(--shadow); border-top:6px solid var(--c); transition:transform .25s, box-shadow .25s }
.card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(15,61,62,.16) }
.card p { margin:0; color:var(--muted); font-size:16px }
.card h3 small { display:inline-block; font:600 12px/1 Inter, sans-serif; background:var(--c); color:#fff; padding:5px 8px; border-radius:999px; vertical-align:middle; margin-left:4px }
.ci { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; font-size:28px; margin-bottom:12px; background:color-mix(in srgb, var(--c) 18%, transparent); color:var(--c); font-weight:800 }
.c1 { --c:var(--sky) } .c2 { --c:var(--violet) } .c3 { --c:var(--wa) } .c4 { --c:var(--saffron) }
.c5 { --c:var(--hibiscus) } .c6 { --c:var(--lagoon) } .c7 { --c:var(--mango) } .c8 { --c:var(--leaf) }
@media (max-width:980px) { .grid { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width:540px) { .grid { grid-template-columns:minmax(0, 1fr) } }

/* how a booking reaches you */
.flow { background:linear-gradient(150deg, #0f3d3e, #1c6b64 60%, #2a8f7d); color:#eaf7f3; border-radius:40px 40px 0 0 }
.flow h2 { color:#fff }
.flow-in { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center }
.flow ol { counter-reset:f; list-style:none; padding:0; margin:0; display:grid; gap:14px }
.flow li { counter-increment:f; display:flex; gap:14px; align-items:flex-start; font-size:18px }
.flow li::before { content:counter(f); flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#3a2500; background:var(--mango) }
.flow li:nth-child(2)::before { background:#7fe0a8 } .flow li:nth-child(3)::before { background:#ffb3c8 } .flow li:nth-child(4)::before { background:#9fd8ff }
.phone { justify-self:center; width:290px; border-radius:40px; padding:12px; background:#101616; box-shadow:0 30px 60px rgba(0,0,0,.35); transform:rotate(3deg) }
.screen { border-radius:30px; background:linear-gradient(#e9e1d4, #efe7dc); min-height:470px; padding:0 0 16px; overflow:hidden; color:#1d2b2a; font-size:15px; line-height:1.4 }
.chat-top { display:flex; align-items:center; gap:10px; background:#0f5e54; color:#fff; padding:14px 14px; font-weight:600 }
.chat-top small { display:block; font-weight:400; opacity:.8; font-size:12px }
.av { width:34px; height:34px; border-radius:50%; background:var(--mango); color:#3a2500; display:grid; place-items:center; font-weight:800 }
.msg { margin:12px 12px 0; padding:10px 12px; border-radius:14px; max-width:85%; box-shadow:0 1px 1px rgba(0,0,0,.08); opacity:0; transform:translateY(10px) }
.msg.in { background:#fff; border-top-left-radius:4px }
.msg.out { background:#d6f7c6; margin-left:auto; border-top-right-radius:4px }
.msg.pay { background:#fff6d6 }
.msg.sys { margin:16px auto 0; text-align:center; background:var(--wa); color:#fff; font-weight:700; border-radius:999px; max-width:90% }
.m1 { animation:m1 12s infinite } .m2 { animation:m2 12s infinite } .m3 { animation:m3 12s infinite } .m4 { animation:m4 12s infinite }
@keyframes m1 { 0%, 4% { opacity:0; transform:translateY(10px) } 9%, 92% { opacity:1; transform:none } 100% { opacity:0 } }
@keyframes m2 { 0%, 20% { opacity:0; transform:translateY(10px) } 25%, 92% { opacity:1; transform:none } 100% { opacity:0 } }
@keyframes m3 { 0%, 38% { opacity:0; transform:translateY(10px) } 43%, 92% { opacity:1; transform:none } 100% { opacity:0 } }
@keyframes m4 { 0%, 56% { opacity:0; transform:scale(.8) } 61%, 92% { opacity:1; transform:none } 100% { opacity:0 } }
@media (max-width:820px) { .flow-in { grid-template-columns:minmax(0, 1fr) } .phone { transform:none } }

/* steps */
.steps { text-align:center }
.sgrid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; position:relative }
.sgrid::before { content:""; position:absolute; left:16%; right:16%; top:34px; border-top:3px dashed var(--line); z-index:0 }
.s { position:relative; z-index:1; background:var(--card); border-radius:22px; padding:0 20px 22px; box-shadow:var(--shadow) }
.s p { margin:0; color:var(--muted) }
.s { margin-top:34px }
.n { display:grid; place-items:center; width:68px; height:68px; margin:-34px auto 12px; border-radius:50%; color:#fff; font:800 30px/1 "Baloo Chettan 2", Inter, sans-serif; border:6px solid var(--bg) }
.s1 .n { background:var(--sky) } .s2 .n { background:var(--hibiscus) } .s3 .n { background:var(--leaf) }
@media (max-width:760px) { .sgrid { grid-template-columns:minmax(0, 1fr); gap:44px } .sgrid::before { display:none } }

/* calculator */
.calc { background:linear-gradient(160deg, var(--tint1), var(--tint4)) }
.calc-box { max-width:860px; margin:0 auto; background:var(--card); border-radius:28px; padding:34px clamp(18px, 4vw, 44px); box-shadow:var(--shadow) }
.tag { display:inline-block; margin:0 0 10px; padding:5px 12px; border-radius:999px; background:var(--hibiscus); color:#fff; font-weight:700; font-size:13px; letter-spacing:.3px }
.calc h2 { margin-bottom:22px }
.cin { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px }
.cin label { display:flex; flex-direction:column; gap:8px; font-weight:600; font-size:15px; color:var(--muted) }
.cin input[type=number] { font:700 22px Inter, sans-serif; color:var(--ink); background:var(--bg); border:2px solid var(--line); border-radius:14px; padding:10px 12px; width:100% }
.cin input[type=number]:focus { outline:none; border-color:var(--saffron) }
.cin input[type=range] { accent-color:var(--hibiscus); width:100%; margin-top:14px }
.cin output { font:800 22px Inter, sans-serif; color:var(--hibiscus) }
.cout { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-top:24px }
.cout .big, .cout .vs { border-radius:20px; padding:18px 20px; display:flex; flex-direction:column; gap:4px }
.cout .big { background:linear-gradient(140deg, #e2456f, #e9761c); color:#fff }
.cout .vs { background:linear-gradient(140deg, #2f9e5b, #1c6b64); color:#fff }
.cout span { font-weight:600; opacity:.95; font-size:15px }
.cout strong { font:800 clamp(30px, 5vw, 44px)/1.1 Inter, sans-serif }
.cout strong small { font-size:16px; font-weight:600 }
#cs { grid-column:1 / -1; margin:4px 0 0; font-weight:600; font-size:18px; color:var(--ink) }
#cs b { color:var(--leaf) }
.fine { font-size:13px; color:var(--muted); margin:14px 0 0 }
@media (max-width:760px) { .cin, .cout { grid-template-columns:minmax(0, 1fr) } }

/* price */
.price { text-align:center }
.pgrid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; align-items:stretch }
.p { border-radius:24px; padding:26px 18px; color:#fff; display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow) }
.p strong { font:800 44px/1.1 "Baloo Chettan 2", Inter, sans-serif }
.p strong small { font-size:20px }
.pl { font-weight:700; font-size:16px; opacity:.95 } .ps { font-size:15px; opacity:.92 }
.p-free { background:linear-gradient(140deg, #2fb4e6, #2f7fd6) }
.p-month { background:linear-gradient(140deg, #3fbf6e, #1f8f4e) }
.p-year { background:linear-gradient(140deg, #f6b62b, #e9761c); transform:scale(1.04) }
.extras { margin:34px auto 0; max-width:760px; text-align:left; background:var(--card); border-radius:24px; padding:24px 26px; box-shadow:var(--shadow); border:2px dashed color-mix(in srgb, var(--saffron) 50%, transparent) }
.extras h3 { color:var(--saffron) }
.extras ul { list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px }
.extras ul:last-child { margin-bottom:0 }
.extras li { display:flex; gap:12px; align-items:flex-start }
.extras li span { font-size:22px; line-height:1.2 }
@media (max-width:760px) { .pgrid { grid-template-columns:minmax(0, 1fr) } .p-year { transform:none } }

/* not a booking site */
.honest { background:var(--tint5); text-align:center }
.hgrid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px }
.hgrid p { margin:0; background:var(--card); border-radius:20px; padding:20px 16px; box-shadow:var(--shadow); font-weight:600; display:flex; flex-direction:column; gap:8px; align-items:center }
.hgrid span { font-size:34px }
@media (max-width:860px) { .hgrid { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width:460px) { .hgrid { grid-template-columns:minmax(0, 1fr) } }

/* example */
.example { background:linear-gradient(160deg, var(--tint3), var(--tint2)) }
.ex-in { display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center }
.ex-phone { display:block; width:260px; border-radius:36px; padding:10px; background:#101616; box-shadow:0 30px 60px rgba(15,61,62,.3); transform:rotate(-3deg); animation:float2 5s ease-in-out infinite alternate }
.ex-phone img { display:block; width:100%; height:auto; border-radius:27px }
@keyframes float2 { from { transform:rotate(-3deg) translateY(0) } to { transform:rotate(-1deg) translateY(-12px) } }
.ex-text p { color:var(--muted); font-size:18px }
.ex-text .tag { background:var(--sky) }
@media (max-width:760px) { .ex-in { grid-template-columns:1fr; justify-items:center; text-align:center } .ex-phone { width:220px } }

/* last call */
.last { text-align:center; color:#fff; background:linear-gradient(135deg, #e9761c, #e2456f 55%, #7b5cd6); border-radius:40px 40px 0 0 }
.last h2 { color:#fff; font-size:clamp(32px, 6vw, 54px); margin-bottom:10px }
.last p { font-size:19px; margin:0 0 24px }

.last .why { margin:22px 0 0; font-size:16px }
.foot { background:#0b2627; color:#bfd3cf; font-size:14px; padding:22px 0 30px }
.foot a { color:#fff }

/* reveal on scroll (only once home.js has run, so the page is complete without script) */
.js .rv { opacity:0; transform:translateY(26px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1) }
.js .rv.in { opacity:1; transform:none }
.js .k.rv.in:hover { transform:translateY(-6px) rotate(-1deg) } .js .card.rv.in:hover { transform:translateY(-6px) }
.js .p-year.rv.in { transform:scale(1.04) } @media (max-width:760px) { .js .p-year.rv.in { transform:none } }
.js .phone.rv.in { transform:rotate(3deg) } @media (max-width:820px) { .js .phone.rv.in { transform:none } }
.js .ex-phone.rv.in { transform:rotate(-3deg) }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .msg { opacity:1; transform:none }
  .js .rv { opacity:1; transform:none }
}

/* register-interest queue (email only; no phone numbers of ours on this site) */
.btn-go { background:linear-gradient(135deg, #e9761c, #e2456f); color:#fff; box-shadow:0 8px 22px rgba(226,69,111,.32); border:0; cursor:pointer; font:inherit; font-weight:700 }
.btn-go:hover { filter:brightness(1.06) }
.btn-sun.sm { padding:9px 16px; font-size:15px; word-break:normal }
.reg { max-width:680px; margin:6px auto 0; background:var(--card); color:var(--ink); border-radius:26px; padding:26px clamp(16px, 4vw, 30px); box-shadow:0 20px 50px rgba(0,0,0,.25);
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 16px; text-align:left }
.reg label { display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:15px }
.reg label small { font-weight:500; color:var(--muted) } .reg label em { font-style:normal; font-weight:600; font-size:12px; color:var(--hibiscus) }
.reg input, .reg select { font:500 17px Inter, system-ui, sans-serif; color:var(--ink); background:var(--bg); border:2px solid var(--line); border-radius:14px; padding:12px 14px; width:100% }
.ml .reg input, .ml .reg select { font-family:"Noto Sans Malayalam", Inter, sans-serif }
.reg input:focus, .reg select:focus { outline:none; border-color:var(--saffron) }
.reg .full { grid-column:1 / -1 }
.reg button.full { justify-content:center; margin-top:4px }
.reg .small { margin:0; font-size:13px; color:var(--muted); text-align:center }
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden }
.last .reg + .why a, .last .why a { color:#fff }
@media (max-width:620px) { .reg { grid-template-columns:minmax(0, 1fr) } }

/* result page after registering */
.done { padding:56px 0 80px; background:linear-gradient(160deg, var(--tint1), var(--tint4)); min-height:70vh }
.done-box { max-width:620px; margin:0 auto; background:var(--card); border-radius:28px; padding:34px clamp(18px, 4vw, 40px); box-shadow:var(--shadow); text-align:center }
.done-box h1 { font-size:clamp(28px, 6vw, 40px); margin:0 0 16px; color:var(--deep) }
@media (prefers-color-scheme: dark) { .done-box h1 { color:var(--ink) } }
.done-box p { font-size:18px; color:var(--muted) } .done-box p b { color:var(--ink); word-break:break-all }
.done-box .small { font-size:15px }
.qnum { display:inline-flex; flex-direction:column; align-items:center; padding:16px 34px; border-radius:24px; color:#fff; background:linear-gradient(135deg, #e9761c, #e2456f 55%, #7b5cd6); margin:4px 0 8px; animation:pop .6s cubic-bezier(.2,1.4,.4,1) both }
.qnum span { font-weight:700; opacity:.95 } .qnum strong { font:800 56px/1.05 "Baloo Chettan 2", Inter, sans-serif }
@keyframes pop { from { transform:scale(.6); opacity:0 } to { transform:none; opacity:1 } }
.reg .lt { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }

/* homlystay.com/help: owners' picture guide */
.hp-hero { padding:44px 0 26px; text-align:center; background:linear-gradient(var(--hero-top), var(--tint1)) }
.hp-hero h1 { font-size:clamp(30px, 6vw, 52px); margin:0 auto 12px; max-width:820px; color:var(--deep) }
@media (prefers-color-scheme: dark) { .hp-hero h1 { color:#fff } }
.hp-hero h1 em { font-style:normal; color:var(--hibiscus) }
.pink { color:#fff; background:#e2456f; padding:0 8px; border-radius:999px }
.hp-need { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:18px 0 8px }
.hp-need div { display:flex; align-items:center; gap:8px; background:var(--card); border-radius:999px; padding:8px 16px 8px 10px; font-weight:700; box-shadow:var(--shadow) }
.hp-need span { font-size:24px }
.hp-jump { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px }
.hp-jump a { text-decoration:none; font-weight:700; font-size:15px; padding:7px 13px; border-radius:999px; border:2px solid var(--line); background:var(--card) }
.hp-jump a:hover { border-color:var(--saffron) }
.hp-steps { padding-top:26px; padding-bottom:30px; display:grid; gap:26px }
.hp-step { padding:0; background:var(--card); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; border-top:8px solid var(--c); scroll-margin-top:76px }
.c-sky { --c:var(--sky) } .c-leaf { --c:var(--leaf) } .c-hib { --c:var(--hibiscus) } .c-mango { --c:var(--mango) } .c-violet { --c:var(--violet) } .c-sun { --c:var(--saffron) }
.hp-head { display:flex; align-items:center; gap:12px; padding:20px 22px 0 }
.hp-head h2 { margin:0; font-size:clamp(22px, 4.4vw, 30px); color:var(--ink) }
.hp-n { flex:none; width:46px; height:46px; border-radius:50%; background:var(--c); color:#fff; display:grid; place-items:center; font:800 24px/1 "Baloo Chettan 2", Inter, sans-serif }
.hp-ico { font-size:30px }
.hp-body { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 340px); gap:22px; padding:16px 22px 24px; align-items:start }
.hp-text p { margin:0 0 12px; font-size:18px }
.hp-eg { display:inline-block; font:600 17px/1.4 ui-monospace, Consolas, monospace; background:var(--bg); border:2px dashed var(--line); border-radius:12px; padding:8px 12px; word-break:break-all }
.hp-eg b { color:var(--hibiscus) }
.hp-taps { list-style:none; padding:0; margin:6px 0 14px; display:grid; gap:10px }
.hp-taps li { display:flex; gap:12px; align-items:flex-start; font-size:18px; line-height:1.45 }
.hp-taps li .hp-num { flex:none; width:32px; height:32px; border-radius:50%; background:#e2456f; color:#fff; display:grid; place-items:center; font:800 17px/1 Inter, sans-serif; box-shadow:0 2px 6px rgba(226,69,111,.35) }
.hp-tip { background:var(--tint1); border-radius:14px; padding:10px 14px; font-size:16px !important }
.hp-phone { margin:0; justify-self:center; width:100%; max-width:320px; border-radius:30px; padding:9px; background:#101616; box-shadow:0 18px 40px rgba(15,61,62,.25) }
.hp-phone img { display:block; width:100%; height:auto; border-radius:22px; background:#fff }
.hp-list { list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:18px; font-weight:600 }
.hp-links { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:8px }
.hp-link { background:var(--bg); border-radius:18px; padding:14px 16px; border:2px solid var(--line) }
.hp-link h3 { margin:0 0 8px; font-size:20px }
.hp-link .hp-taps li { font-size:16px }
.hp-step:has(.hp-links) .hp-body { grid-template-columns:minmax(0, 1fr) }
.hp-end { text-align:center; padding:26px 16px !important; border-radius:28px; color:#fff; background:linear-gradient(135deg, #e9761c, #e2456f 55%, #7b5cd6) }
.hp-end h2 { color:#fff; margin:0 0 6px } .hp-end p { margin:0; font-size:19px }
@media (max-width:820px) { .hp-body { grid-template-columns:minmax(0, 1fr) } .hp-links { grid-template-columns:minmax(0, 1fr) } }
.ml .hp-text p, .ml .hp-taps li { line-height:1.7 }

/* homlystay.com/google: drawn phone screens (not Google screenshots) */
.gm-which { display:grid; gap:10px; max-width:560px; margin:18px auto 14px; text-align:left }
.gm-which a { display:flex; gap:12px; align-items:center; text-decoration:none; font-weight:700; background:var(--card); border-radius:18px; padding:12px 16px; box-shadow:var(--shadow) }
.gm-which b { flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--sky); font:800 19px/1 "Baloo Chettan 2", Inter, sans-serif }
.gm-which a:nth-child(2) b { background:var(--hibiscus) } .gm-which a:nth-child(3) b { background:var(--mango) }
.gm-copy { max-width:560px; margin:0 auto; text-align:left }
.gm-body { padding:14px 22px 24px }
.gm-intro { font-size:18px; margin:0 0 12px }
.gm-row { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px 12px; padding:18px 2px 12px }
.gm-fig { margin:0; min-width:0; text-align:center }
@media (max-width:820px) { .gm-row { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
.gm-fig figcaption { margin-top:8px; font-weight:700; font-size:15px; color:var(--muted) }
.gm-phone { border-radius:28px; padding:8px; background:#101616; box-shadow:0 12px 28px rgba(15,61,62,.22) }
.gm-screen { position:relative; height:330px; border-radius:21px; overflow:hidden; background:#fff; color:#202124; font:13px/1.35 Inter, system-ui, sans-serif; text-align:left }
.gm-search { margin:12px; padding:10px 12px; border-radius:999px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); color:#5f6368 }
.gm-map { position:absolute; inset:58px 0 62px; background:linear-gradient(135deg, #cfe8d3, #aed6f1 60%, #e8f0c8) }
.gm-map i { position:absolute; font-style:normal; font-size:20px } .gm-map i:nth-child(1) { left:30%; top:30% } .gm-map i:nth-child(2) { left:60%; top:50% } .gm-map i:nth-child(3) { left:42%; top:68% }
.gm-nav { position:absolute; left:0; right:0; bottom:0; height:62px; display:flex; justify-content:space-around; align-items:center; background:#fff; border-top:1px solid #e0e0e0; font-size:11px; text-align:center }
.gm-nav span { position:relative; padding:4px 6px; border-radius:10px }
.gm-top { display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid #eee; font-weight:700 }
.gm-back { color:#5f6368 }
.gm-pad { padding:12px 14px; display:grid; gap:9px; align-content:start }
.gm-title { font-size:16px } .gm-stars { color:#e37400; font-size:12px } .gm-sub { color:#5f6368; font-size:12px }
.gm-photo { height:96px; background:linear-gradient(135deg, #f7c59f, #f08bb0 50%, #2a9d9a) }
.gm-chips { display:flex; flex-wrap:wrap; gap:6px } .gm-chips span { position:relative; padding:6px 10px; border-radius:999px; border:1px solid #dadce0; font-size:12px; font-weight:600; color:#1a73e8 }
.gm-tabs { display:flex; flex-wrap:wrap; row-gap:4px; gap:14px; font-weight:600; font-size:12px; color:#5f6368; border-bottom:1px solid #eee; padding-bottom:6px }
.gm-tabs span { position:relative; padding:3px 4px; border-radius:6px }
.gm-tabs-line { padding:8px 14px } .gm-on { color:#1a73e8; border-bottom:3px solid #1a73e8 }
.gm-card { padding:10px; border-radius:10px; background:#f1f3f4; font-weight:600 }
.gm-rowitem { position:relative; display:flex; justify-content:space-between; padding:11px 10px; border-radius:10px; border-bottom:1px solid #f0f0f0; font-weight:600 }
.gm-rowitem small { color:#5f6368 }
.gm-label { font-size:12px; color:#5f6368; font-weight:600 }
.gm-input { position:relative; padding:10px; border:2px solid #1a73e8; border-radius:8px; font-size:11.5px; word-break:break-all }
.gm-actions { display:flex; justify-content:flex-end; gap:12px; align-items:center; color:#1a73e8; font-weight:700 }
.gm-save { position:relative; padding:8px 16px; border-radius:999px; background:#1a73e8; color:#fff; font-weight:700; text-align:center }
.gm-wide { display:block; margin-top:8px }
.gm-btn, .gm-link { position:relative; display:inline-block; justify-self:start; padding:8px 12px; border-radius:999px; border:1px solid #dadce0; color:#1a73e8; font-weight:700 }
.gm-center { text-align:center; justify-items:center; padding-top:40px } .gm-big { font-size:44px }
.gm-hl { outline:3px solid #e2456f; outline-offset:2px; border-radius:10px }
.gm-mk { position:absolute; top:-10px; left:-8px; z-index:2; width:24px; height:24px; border-radius:50%; background:#e2456f; color:#fff; font:800 13px/24px Inter, sans-serif; font-style:normal; text-align:center; box-shadow:0 2px 5px rgba(0,0,0,.3) }
.gm-video { margin-top:8px; background:var(--tint4); border-radius:18px; padding:14px 16px }
.gm-video h3 { margin:0 0 8px }
.gm-note { text-align:center; color:var(--muted); font-size:14px; margin:0 }
@media (max-width:520px) {
  .gm-phone { border-radius:20px; padding:5px } .gm-screen { height:285px; border-radius:16px; font-size:10.5px }
  .gm-search { margin:8px; padding:7px 9px } .gm-map { inset:46px 0 50px } .gm-nav { height:50px; font-size:8.5px }
  .gm-nav span { padding:3px 2px } .gm-top { padding:9px 9px; gap:6px } .gm-pad { padding:9px; gap:7px }
  .gm-title { font-size:12.5px } .gm-photo { height:64px } .gm-chips span { padding:4px 6px; font-size:9.5px }
  .gm-tabs { gap:6px; font-size:9.5px } .gm-tabs-line { padding:6px 9px } .gm-rowitem { padding:8px 6px }
  .gm-input { font-size:9px; padding:7px } .gm-save { padding:6px 10px } .gm-big { font-size:32px } .gm-center { padding-top:24px }
  .gm-btn, .gm-link { padding:6px 8px } .gm-mk { width:20px; height:20px; font-size:11px; line-height:20px }
  .gm-fig figcaption { font-size:13px }
}

/* homlystay.com/admin (Shibin only) */
.adm-tag { font-weight:800; color:#fff; background:var(--hibiscus); border-radius:999px; padding:4px 12px; font-size:14px }
.adm-main { padding-top:22px; padding-bottom:50px }
.adm-main h2 { font-size:24px; margin:30px 0 8px }
.adm-head { display:flex; justify-content:space-between; align-items:center; gap:10px } .adm-head h1 { margin:0 }
.btn.sm { padding:7px 14px; font-size:14px }
.adm-nums { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin:16px 0 }
.adm-nums div, .adm-grid div { background:var(--card); border-radius:14px; padding:10px; text-align:center; box-shadow:var(--shadow); font-size:14px }
.adm-nums b, .adm-grid b { display:block; font:800 26px/1.1 "Baloo Chettan 2", Inter, sans-serif; color:var(--lagoon) }
.adm-grid small { display:block; color:var(--muted) }
.adm-day { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.adm-card { background:var(--card); border-radius:18px; padding:16px 18px; box-shadow:var(--shadow); margin:10px 0 }
.adm-card h3 { margin:0 0 6px; text-transform:capitalize }
.adm-time { display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 10px }
.adm-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px }
.adm-pill { display:inline-block; background:var(--tint2); border-radius:999px; padding:2px 10px; margin:2px 0; font-weight:600 }
.adm-warn { color:#b3261e; font-weight:700 }
.adm-yes { color:#17602f; font-weight:700 } .adm-no { color:#b3261e; font-weight:700 }
.adm-wrap { overflow-x:auto; background:var(--card); border-radius:14px; box-shadow:var(--shadow) }
.adm-table { width:100%; border-collapse:collapse; font-size:14px }
.adm-table th, .adm-table td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--line) }
.adm-table tr.adm-fail { background:#fff0f0 }
@media (max-width:700px) { .adm-nums { grid-template-columns:repeat(2, minmax(0, 1fr)) } .adm-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
.adm-screens { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px }
.adm-screens .adm-card { margin:0 }
.adm-live { font:600 12px Inter, sans-serif; color:#1a7f37; margin-left:6px }
.adm-notify { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px solid rgba(127,127,127,.25); font-size:14px }
.adm-flash { padding:8px 12px; border-radius:10px; background:var(--card) }
.adm-nav { display:flex; gap:6px 14px; align-items:center; flex-wrap:wrap }
.adm-nav a { color:inherit; font-weight:600; text-decoration:none; padding:4px 2px; border-bottom:2px solid transparent }
.adm-nav a:hover { border-bottom-color:currentColor }
.adm-forms { display:flex; gap:6px 10px; align-items:center; flex-wrap:wrap; margin:6px 0 }
.adm-forms input, .adm-forms select, .adm-settings input, .adm-settings textarea { font:inherit; padding:5px 8px; border-radius:8px; border:1px solid rgba(127,127,127,.45); background:transparent; color:inherit }
.adm-settings label { display:flex; flex-direction:column; gap:3px; margin:0 0 12px }
.adm-copy { width:100%; font:inherit; font-size:12px; padding:6px; border-radius:8px; border:1px solid rgba(127,127,127,.45); background:transparent; color:inherit }
.adm-off { opacity:.6 }
.adm-pin { font-size:1.4em; letter-spacing:.08em }