/* hosteasy/home-page.css — PAGE-specific CSS for the Host Easy home page.
   =========================================================================
   Loads the shared design system first (tokens + base + header/nav/footer +
   shared responsive), then adds ONLY the sections unique to this page: the
   hero/banner, the domain search bar, the combo-offer grid, and the two-column
   home-plans band. This is the template for every new hosteasy page — import
   common.css, then add just your own sections. */
@import "common.css";

/* home-page rhythm — ONE slightly-smaller, EVEN vertical step for every band.
   The hero, search, combo, plans and footer all key off --ho-s-section; scoping
   a smaller value HERE (this sheet loads only on the home page, so the global
   token is untouched elsewhere) makes the gaps between sections read even and a
   touch tighter (req redesign-home-page #6). */
:root{--ho-s-section:clamp(34px,4.6vw,66px)}

/* ── banner / hero ────────────────────────────────────────────────────────── */
.banner{background:var(--ho-hero-grad);border-bottom:1px solid var(--ho-sky-100)}
/* top padding trimmed (req #1): the hero sits closer to the nav — a smaller top
   step than bottom, floored so it never collapses on a short viewport. Bottom
   step widened (-8px → +20px, req 4f530c) for more breathing room between the
   hero and the domain-search band below. */
.banner_content{max-width:var(--wrap);margin:0 auto;padding:calc(var(--ho-s-section) - 18px) var(--ho-s-5) calc(var(--ho-s-section) + 20px);
  text-align:center}
/* hero title + lead run FULL WIDTH — no max-width cap (removed per req 0a7670); pinned
   to width:100%;max-width:none per req bd5759 so they always span the full
   .banner_content measure (max-width:var(--wrap)). The h1 and CTA row inherit center
   from .banner_content; the lead paragraph reads LEFT-aligned (ragged right) per req
   4fc417 — cleaner than justify for a full-width multi-line sentence. */
.banner_content h1{font-size:var(--ho-fs-hero);line-height:var(--ho-lh-tight);letter-spacing:var(--ho-tracking-tight);
  color:var(--ho-hero-ink);font-weight:var(--ho-fw-black);margin:0 0 var(--ho-s-4);width:100%;max-width:none}
.banner_content > p{font-size:var(--ho-fs-md);color:var(--ho-sky-800);margin:0 0 var(--ho-s-6);
  width:100%;max-width:none;text-align:left}
.banner_content_link ul{display:flex;flex-wrap:wrap;gap:var(--ho-s-3);justify-content:center}
.banner_content_link a{display:inline-block;padding:13px 26px;border-radius:var(--ho-r-pill);font-weight:var(--ho-fw-bold);
  font-size:var(--ho-fs-md);transition:transform var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)}
.banner_content_link li:first-child a{background:var(--ho-gold-grad);color:var(--ho-gold-ink);border:1px solid var(--ho-gold-border);box-shadow:var(--ho-e-2)}
.banner_content_link li:last-child a{background:var(--ho-white);color:var(--ho-brand-text);border:1px solid var(--ho-sky-200)}
.banner_content_link a:hover{transform:translateY(-2px);box-shadow:var(--ho-e-3)}

/* ── domain search ────────────────────────────────────────────────────────── */
.search_form{max-width:var(--wrap);margin:calc(-1 * var(--ho-s-6)) auto 0;padding:0 var(--ho-s-5);position:relative;z-index:10}
#message-domain:not(:empty){max-width:920px;margin:0 auto var(--ho-s-3);padding:10px 14px;border-radius:var(--ho-r-sm);
  background:var(--ho-price-soft);color:var(--ho-price);font-size:var(--ho-fs-sm)}
.search_form > form{max-width:920px;margin:0 auto;background:var(--ho-card);border:1px solid var(--ho-line);
  border-radius:var(--ho-r-xl);box-shadow:var(--ho-e-3);padding:var(--ho-s-3);display:flex;gap:var(--ho-s-2);align-items:stretch}
.search_form > form > div:first-child{flex:1 1 auto}
.search_domain_txt{width:100%;height:100%;border:0;padding:14px var(--ho-s-4);font-size:var(--ho-fs-md);
  color:var(--ho-ink);background:transparent;border-radius:var(--ho-r);outline:none}
.search_domain_slct{height:100%;border:1px solid var(--ho-line-2);background:var(--ho-tile);color:var(--ho-brand-text);
  font-weight:var(--ho-fw-semi);padding:0 var(--ho-s-3);border-radius:var(--ho-r);font-size:var(--ho-fs-md)}
.search_domain_btn{height:100%;border:1px solid var(--ho-gold-border);background:var(--ho-gold-grad);color:var(--ho-gold-ink);
  font-weight:var(--ho-fw-black);letter-spacing:.03em;padding:0 var(--ho-s-6);border-radius:var(--ho-r);cursor:pointer;
  transition:filter var(--ho-dur) var(--ho-ease)}
.search_domain_btn:hover{filter:brightness(1.04)}
.search_domain_list{max-width:920px;margin:var(--ho-s-4) auto 0}
.search_domain_list ul{display:flex;flex-wrap:wrap;gap:var(--ho-s-2)}
.search_domain_list li{display:flex;align-items:center;gap:7px;background:var(--ho-card);border:1px solid var(--ho-line);
  border-radius:var(--ho-r-pill);padding:6px 13px;font-size:var(--ho-fs-sm);color:var(--ho-muted);cursor:pointer}
.search_domain_list li:hover{border-color:var(--ho-sky-300);color:var(--ho-brand-text)}
.search_domain_list li b{color:var(--ho-price);font-weight:var(--ho-fw-bold)}
.search_domain_list input[type=radio]{accent-color:var(--ho-brand);margin:0}

/* ── combo offers ─────────────────────────────────────────────────────────── */
.content{max-width:var(--wrap);margin:0 auto;padding:var(--ho-s-section) var(--ho-s-5) 0}
.combo{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ho-s-5)}
.combo_packs{display:flex}
.combo_packs > span{display:block;width:100%}
.combo_packs form{margin:0;height:100%}
.combo_packs a{display:block;height:100%}
/* pass the stretched grid-item height all the way down through the inline
   cursor:pointer wrapper so every card equals the tallest card's CONTENT
   height (even boxes) — no fixed floor, so wide screens (≥1369px, where the
   titles fit on one line) no longer show an over-tall card with empty space. */
.combo_packs a > div{height:100%}
/* combo card reflow (req #5) — a clearer, more professional hierarchy inside the
   card: brand-cyan plan TITLE on top, then the price as a HIGHLIGHTED pill (the
   focal figure), a muted one-line subtitle separated by a hairline rule, and the
   gold CTA pinned to the bottom so every card's button lines up. Even vertical
   rhythm; CSS-only (the markup is byte-for-byte the live page). */
.combo_packs_con{background:var(--ho-card);border:1px solid var(--ho-line);border-radius:var(--ho-r-xl);
  box-shadow:var(--ho-e-1);padding:var(--ho-s-7) var(--ho-s-5) var(--ho-s-6);text-align:center;height:100%;
  display:flex;flex-direction:column;align-items:center;gap:var(--ho-s-3);
  transition:transform var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease),border-color var(--ho-dur)}
.combo_packs_con:hover{transform:translateY(-4px);box-shadow:var(--ho-e-3);border-color:var(--ho-sky-200)}
/* font scale (req combo-portion: "fonts check — not elegant") — one deliberate,
   descending 3-tier ramp: TITLE reads as a calm label (fs-md/semibold, snug,
   slightly tracked), the PRICE pill is the single focal figure (fs-xl/black), the
   SUBTITLE drops to fs-xs muted. Three near-equal heavy weights → one clean scale. */
.combo_choose{font-size:var(--ho-fs-md);font-weight:var(--ho-fw-semi);color:var(--ho-brand-text);
  line-height:var(--ho-lh-snug);letter-spacing:var(--ho-tracking-tight)}
/* price → a soft price-tint pill; the amount carries the weight, the " / Year"
   unit sits beside it muted so the figure reads first. */
.combo_amnt{display:inline-flex;align-items:baseline;gap:5px;
  background:var(--ho-price-soft);border-radius:var(--ho-r-pill);padding:7px var(--ho-s-4);
  color:var(--ho-price);font-weight:var(--ho-fw-black);font-size:var(--ho-fs-lg);line-height:1;
  letter-spacing:var(--ho-tracking-tight)}
.combo_amnt > span:last-child,.combo_amnt b{font-size:var(--ho-fs-sm);color:var(--ho-muted);
  font-weight:var(--ho-fw-semi);letter-spacing:0}
/* "Rs" currency prefix — a subtle, smaller/lighter glyph so the figure is the focal
   point; keeps the surrounding price colour, stays baseline-aligned beside the number. */
.cur{font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi);letter-spacing:0}
/* subtitle — muted fs-xs, on its own line above a hairline divider before the CTA */
.combo_packs_con p{color:var(--ho-muted);font-size:var(--ho-fs-xs);width:100%;
  padding-bottom:var(--ho-s-4);border-bottom:1px solid var(--ho-line);margin-bottom:var(--ho-s-1);
  letter-spacing:.02em}
.divs_exts{margin-top:auto;border:1px solid var(--ho-gold-border);background:var(--ho-gold-grad);color:var(--ho-gold-ink);
  font-weight:var(--ho-fw-bold);padding:11px 30px;border-radius:var(--ho-r-pill);transition:filter var(--ho-dur) var(--ho-ease)}
.divs_exts:hover{filter:brightness(1.04)}
/* "More" → right-aligned below the combo grid, constrained to the page width so
   its right edge lines up with the combo cards (mobile stays right-aligned too). */
.more_wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--ho-s-5);display:flex;justify-content:flex-end}
.more_button{display:inline-block;margin:var(--ho-s-5) 0 0;padding:10px 28px;border:1px solid var(--ho-sky-300);
  border-radius:var(--ho-r-pill);color:var(--ho-brand-text);font-weight:var(--ho-fw-semi);background:var(--ho-card)}
.more_button:hover{background:var(--ho-tint-sky)}

/* ── home plans (two feature columns) ─────────────────────────────────────── */
/* bottom step trimmed (req #8): the footer already carries margin-top:--ho-s-section,
   so a full section pad here doubled the gap before the footer — drop the bottom
   to one small step and let the footer's own top margin own the separation. */
.home_plans{max-width:var(--wrap);margin:0 auto;padding:var(--ho-s-section) var(--ho-s-5) var(--ho-s-5);
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ho-s-5)}
.home_plans > div{background:var(--ho-card);border:1px solid var(--ho-line);border-radius:var(--ho-r-xl);
  box-shadow:var(--ho-e-1);padding:var(--ho-s-7) var(--ho-s-6)}
.home_plans h2{font-size:var(--ho-fs-xl);font-weight:var(--ho-fw-black);color:var(--ho-ink);
  letter-spacing:var(--ho-tracking-tight);margin-bottom:var(--ho-s-4)}
.home_plans h2 .clr1{color:var(--ho-brand-d)}
.home_plans h2 .clr2{color:var(--ho-hero-accent)}
.home_plans ul{display:flex;flex-direction:column;gap:var(--ho-s-3);margin-bottom:var(--ho-s-5)}
.home_plans li{position:relative;padding-left:var(--ho-s-6);color:var(--ho-body);font-size:var(--ho-fs-sm)}
.home_plans li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background:var(--ho-success-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  background-size:12px;background-position:center;background-repeat:no-repeat}
/* "Starts From ₹…" (req combo-portion: "more professional design needs") — a
   premium, card-within-card entry-price rather than an inline pill: a STACKED
   price-tint block, its uppercase tracked label sitting above a larger, bolder
   amount, wrapped in a hairline border + rounded corners that echo the combo
   cards so both portions read as one system. Tokens only — no new colours. */
.starts_from{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:var(--ho-price-soft);border:1px solid var(--ho-line-2);border-radius:var(--ho-r-lg);
  padding:var(--ho-s-3) var(--ho-s-5)}
.starts_from_txt{color:var(--ho-muted);font-size:var(--ho-fs-xs);font-weight:var(--ho-fw-semi);
  text-transform:uppercase;letter-spacing:.06em}
.starts_from_price{color:var(--ho-price);font-size:var(--ho-fs-lg);font-weight:var(--ho-fw-black);
  line-height:var(--ho-lh-tight);letter-spacing:var(--ho-tracking-tight)}
.seeplans_hosting a,.seeplans_compo a{display:inline-block;margin-top:var(--ho-s-4);padding:11px 26px;
  background:var(--ho-brand-cta);color:var(--ho-white);border-radius:var(--ho-r-pill);font-weight:var(--ho-fw-semi);font-size:var(--ho-fs-sm)}
.seeplans_hosting a:hover,.seeplans_compo a:hover{background:var(--ho-sky-800);color:var(--ho-white)}

/* ── page responsive ──────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .combo{grid-template-columns:repeat(2,1fr)}
  .home_plans{grid-template-columns:1fr}
}
@media (max-width:640px){
  .combo{grid-template-columns:1fr}
  /* domain search → full-width stacked fields with real borders + tap sizes */
  .search_form{margin-top:calc(-1 * var(--ho-s-4))}
  .search_form > form{flex-direction:column;gap:var(--ho-s-3)}
  .search_form > form > div{width:100%}
  .search_domain_txt{border:1px solid var(--ho-line-2);border-radius:var(--ho-r);padding:13px var(--ho-s-4)}
  .search_domain_slct{width:100%;height:auto;padding:13px var(--ho-s-3)}
  .search_domain_btn{width:100%;height:auto;padding:14px;border-radius:var(--ho-r)}
  .banner_content_link ul{flex-direction:column}
  .banner_content_link a{display:block}
}

/* page-specific reduced-motion overrides (the site-wide guard is in common.css) */
@media (prefers-reduced-motion: reduce){
  .combo_packs_con:hover,.banner_content_link a:hover{transform:none}
}