/* homlystay.com/brochure (src/brochure.ts): the owner brochure as a web page. Colours and words = marketing/brochure/brochure.html.
   Loaded after home.css (header, footer, .wrap). Phone first: one column, prices under the words; wider screens get columns.
   Every section sets its own colours, so the page looks the same in light and dark mode. Nothing waits for an animation.
   Bump BROCHURE_V in src/brochure.ts when this changes. */
.bro { --b-deep:#0f3d3e; --b-lagoon:#1c6b64; --b-saffron:#e9761c; --b-mango:#f6b62b; --b-foam:#5fd0c0; --b-cream:#fff8ec;
  --b-ink:#173434; --b-soft:#d3e8e4; --b-panel:#154a4a; --b-line:#eadfcb; --b-mute:#4d6260; }
.bro main { display:block; overflow-wrap:break-word }
.bro main h1, .bro main h2 { font-family:Inter, system-ui, -apple-system, "Segoe UI", sans-serif }
.bro-kick { margin:0; font-weight:800; font-size:13px; line-height:1.3; letter-spacing:.16em; text-transform:uppercase }
.bro-ic { font-family:"Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif; font-style:normal; display:grid; place-items:center; flex:none; line-height:1 }

/* ---- the cover ---- */
.bro-cover { position:relative; background:var(--b-deep); color:var(--b-cream); padding:30px 0 0; overflow:hidden }
.bro-cin { position:relative; z-index:2; display:grid; gap:30px }
.bro-cover .bro-kick { color:var(--b-foam) }
.bro-cover h1 { margin:12px 0 0; font-size:clamp(33px, 9.2vw, 62px); font-weight:800; line-height:1.04; letter-spacing:-.03em; color:var(--b-cream) }
.bro-cover h1 em { display:block; font-style:normal; color:var(--b-mango) }
.bro-lead { margin:14px 0 0; font-size:clamp(17px, 4.6vw, 22px); line-height:1.4; font-weight:500; color:var(--b-soft) }
.bro-facts { list-style:none; margin:22px 0 0; padding:0 }
.bro-facts li { border-top:1px solid #2b6664; padding:14px 0 }
.bro-facts li:first-child { border-top:0; padding-top:2px }
.bro-facts b { display:block; font-size:clamp(34px, 9.5vw, 50px); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--b-mango) }
.bro-facts b small { font-size:.42em; font-weight:700; letter-spacing:0; color:var(--b-soft); margin-right:7px }
.bro-facts li > span { display:block; margin-top:6px; font-size:16px; line-height:1.35; font-weight:600; color:var(--b-soft) }
.bro-real { display:block; margin-top:6px; padding:14px 16px 16px; background:var(--b-panel); border:1px solid #23615f; border-radius:16px; color:var(--b-cream); text-decoration:none }
.bro-real span { display:block; font-weight:800; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--b-foam) }
.bro-real b { display:block; margin-top:4px; font-size:21px; font-weight:800 }
.bro-real i { display:inline-block; margin-top:10px; padding:6px 11px; border-radius:9px; background:var(--b-mango); color:var(--b-deep); font-style:normal; font-weight:700; font-size:13.5px; overflow-wrap:anywhere }
.bro-phone { position:relative; display:block; justify-self:center; width:min(290px, 76vw); aspect-ratio:392 / 848; padding:34px 10px 10px; border-radius:44px;
  background:#0b1212; box-shadow:0 30px 60px rgba(0, 0, 0, .45) }
.bro-phone::before { content:''; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:78px; height:17px; border-radius:10px; background:#000 }
.bro-phone img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:8px 8px 34px 34px }
.bro-waves { position:absolute; left:0; right:0; bottom:0; z-index:1; display:block; width:100%; height:120px }
.bro-ctaw { position:relative; z-index:3; padding:26px 20px 26px }
.bro-cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 16px; padding:15px 22px; border-radius:999px;
  background:var(--b-mango); color:var(--b-deep); font-size:17px; font-weight:800; text-decoration:none; box-shadow:0 12px 26px rgba(0, 0, 0, .25) }
.bro-cta span:last-child { font-weight:700 }

/* ---- sections ---- */
.bro-sec { padding:44px 0 46px; color:var(--b-ink) }
.bro-sec h2 { margin:10px 0 0; font-size:clamp(28px, 7.4vw, 46px); font-weight:800; line-height:1.06; letter-spacing:-.025em; color:var(--b-deep) }
.bro-k2 { margin-top:30px }

/* what the yearly plan gives */
.bro-incl { background:radial-gradient(circle at 94% 3%, rgba(233, 118, 28, .13), transparent 34%), var(--b-cream) }
.bro-incl .bro-kick { color:var(--b-saffron) }
.bro-grid { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:10px }
.bro-grid li { display:grid; grid-template-columns:44px 1fr; column-gap:13px; align-content:start; padding:14px 15px 15px; background:#fff; border:1px solid var(--b-line); border-radius:16px }
.bro-grid .bro-ic { grid-row:span 2; width:44px; height:44px; border-radius:12px; background:#e7f4f1; font-size:23px }
.bro-grid b { font-size:17px; font-weight:800; line-height:1.2; color:var(--b-deep) }
.bro-grid li > span:last-child { margin-top:3px; font-size:15px; line-height:1.4; font-weight:500; color:var(--b-mute) }
.bro-band { display:flex; gap:14px; align-items:center; margin:16px 0 0; padding:16px 18px; border-radius:18px; background:var(--b-deep); color:var(--b-soft); font-size:16px; line-height:1.45; font-weight:500 }
.bro-band b { color:var(--b-cream); font-weight:700 }
.bro-band .bro-ic { width:46px; height:46px; border-radius:50%; background:var(--b-panel); font-size:24px }

/* the price list */
.bro-prices { background:linear-gradient(180deg, #e7f4f1 0%, var(--b-cream) 30%) }
.bro-prices .bro-kick { color:var(--b-lagoon) }
.bro-prices .bro-k2 { color:var(--b-saffron) }
.bro-planbox { display:grid; gap:16px; margin-top:22px; padding:22px 20px 20px; border-radius:20px; background:var(--b-deep); color:var(--b-cream); box-shadow:0 14px 30px rgba(15, 61, 62, .2) }
.bro-pp small { display:block; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--b-foam) }
.bro-pp b { display:block; margin-top:4px; font-size:clamp(54px, 15vw, 80px); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--b-mango) }
.bro-pp span { display:block; margin-top:2px; font-size:18px; font-weight:700; color:var(--b-soft) }
.bro-ticks { list-style:none; margin:0; padding:0; display:grid; gap:9px }
.bro-ticks li { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700 }
.bro-ticks li::before { content:'✓'; flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--b-mango); color:var(--b-deep); font-size:14px; font-weight:800 }
.bro-note { margin:0; padding-top:14px; border-top:1px solid #2b6664; font-size:15px; line-height:1.45; font-weight:500; color:var(--b-soft) }
.bro-note b { color:var(--b-cream); font-weight:700 }
.bro-rows { list-style:none; margin:10px 0 0; padding:0; background:#fff; border:1px solid var(--b-line); border-radius:18px; overflow:hidden }
.bro-rows li { display:grid; grid-template-columns:42px 1fr; column-gap:13px; align-items:center; padding:13px 15px; border-top:1px solid #f3ead9 }
.bro-rows li:first-child { border-top:0 }
.bro-rows .bro-ic { grid-row:span 2; align-self:start; width:42px; height:42px; border-radius:11px; background:#fdf1dc; font-size:21px }
.bro-rows b { display:block; font-size:16.5px; font-weight:800; line-height:1.25; color:var(--b-deep) }
.bro-what { display:block; margin-top:2px; font-size:14.5px; line-height:1.38; font-weight:500; color:var(--b-mute) }
.bro-pr { grid-column:2; margin:6px 0 0; font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--b-deep) }
.bro-pr small { margin-left:6px; font-size:13px; font-weight:600; letter-spacing:0; color:var(--b-mute) }
.bro-pr2 { display:grid; gap:4px }
.bro-pr2 .bro-pr { grid-column:auto; margin:0 }
.bro-fine { margin:16px 0 0; font-size:14.5px; line-height:1.45; font-weight:500; color:var(--b-mute) }

/* how to start */
.bro-start { background:radial-gradient(circle at 8% 2%, rgba(95, 208, 192, .2), transparent 34%), var(--b-cream) }
.bro-start .bro-kick { color:var(--b-lagoon) }
.bro-start .bro-k2 { color:var(--b-saffron) }
.bro-steps { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px }
.bro-steps li { display:flex; gap:14px; align-items:flex-start; padding:14px 16px 15px; background:#fff; border:1px solid var(--b-line); border-radius:16px }
.bro-n { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--b-saffron); color:#fff; font-size:18px; font-weight:800 }
.bro-steps b { display:block; font-size:18px; font-weight:800; line-height:1.25; color:var(--b-deep) }
.bro-steps div > span { display:block; margin-top:3px; font-size:15.5px; line-height:1.45; font-weight:500; color:var(--b-mute) }
.bro-faq { margin:4px 0 0 }
.bro-faq div { padding:13px 0 14px; border-bottom:1px solid var(--b-line) }
.bro-faq dt { font-size:17px; font-weight:800; line-height:1.3; color:var(--b-deep) }
.bro-faq dd { margin:4px 0 0; font-size:16px; line-height:1.45; font-weight:500; color:var(--b-ink) }
.bro-go { margin-top:28px; padding:22px 20px; border-radius:20px; background:var(--b-deep); color:var(--b-soft) }
.bro-go > b { display:block; font-size:clamp(24px, 6.4vw, 32px); font-weight:800; line-height:1.15; letter-spacing:-.02em; color:var(--b-cream) }
.bro-go > span { display:block; margin-top:8px; font-size:16px; line-height:1.45; font-weight:500 }
.bro-gobtn { display:inline-block; margin-top:14px; padding:12px 24px; border-radius:999px; background:var(--b-mango); color:var(--b-deep); font-size:17px; font-weight:800; text-decoration:none }
.bro-see { margin:18px 0 0; padding-top:14px; border-top:1px solid #2b6664; font-size:15px; font-weight:500; color:var(--b-soft) }
.bro-see a { color:var(--b-foam); font-weight:700; overflow-wrap:anywhere }

/* ---- wider screens ---- */
@media (min-width:480px) {
  .bro-rows li { grid-template-columns:42px 1fr auto }
  .bro-rows .bro-ic { grid-row:auto; align-self:center }
  .bro-pr { grid-column:auto; margin:0; text-align:right; white-space:nowrap }
  .bro-pr small { display:block; margin:2px 0 0; font-size:12px; white-space:normal }
}
@media (min-width:600px) {
  .bro-grid { grid-template-columns:1fr 1fr }
  .bro-planbox { grid-template-columns:auto 1fr; column-gap:36px; align-items:center; padding:26px 30px 24px }
  .bro-note { grid-column:1 / -1 }
}
@media (min-width:900px) {
  .bro-cover { padding-top:48px }
  .bro-cin { grid-template-columns:1fr 330px; gap:48px; align-items:center }
  .bro-phone { width:330px }
  .bro-waves { height:150px }
  .bro-ctaw { padding:34px 20px 40px }
  .bro-cta { font-size:20px; padding:18px 30px }
  .bro-sec { padding:64px 0 66px }
  .bro-grid { grid-template-columns:1fr 1fr 1fr }
}

/* ---- Hindi (/brochure?lang=hi, 2026-11-05): Devanagari headings in Baloo 2, room for the marks above and below the letters,
   and no letter-spacing (it breaks the line that runs along the top of the letters) ---- */
.hi.bro main h1, .hi.bro main h2 { font-family:"Baloo 2", "Noto Sans Devanagari", Inter, sans-serif; letter-spacing:0; line-height:1.3 }
.hi.bro .bro-kick, .hi.bro .bro-real span, .hi.bro .bro-pp small { letter-spacing:0 }
.hi.bro .bro-facts b, .hi.bro .bro-pp b, .hi.bro .bro-pr, .hi.bro .bro-go > b { letter-spacing:0 }
.hi.bro .bro-facts b, .hi.bro .bro-go > b { line-height:1.3 }
/* the language menu and "Free sample" do not both fit a 320 px phone: the cover's big button says the same */
@media (max-width:359px) { .bro .top nav > a.lang { display:none } }

@media print {
  .bro .top { position:static }
  .bro-cover, .bro-sec, .bro-planbox, .bro-band, .bro-go, .bro-cta { -webkit-print-color-adjust:exact; print-color-adjust:exact }
  .bro-grid li, .bro-rows li, .bro-steps li, .bro-faq div { break-inside:avoid }
}