/* hosteasy/free-hosting-for-multiyear-domain-purchase.css — PAGE-specific CSS for
   the Host Easy "Free Hosting with Domain Registration" page
   (the LIVE https://www.hosteasy.in/free-hosting.php).
   =========================================================================
   LIVE-MARKUP REVERT (req_20260826_092729): a prior pass invented DOM — a .banner →
   .banner_content hero band plus a brand-new .banner_content_link pill CTA row — that
   is NOT in the live page. The user asked to design the live HTML as-is, so that markup
   is gone and the hero styling is re-pointed at the real live selectors: the page <h1>
   and the first .specialParaStyl lead, sitting directly inside <div class="content">.
   No wrapper element, zero added tags — the visual hero lives entirely in CSS.
   Every selector below hangs off the page's own class names / tags:
     .content > h1                    → the page heading (hero type, tokenised)
     .content > .specialParaStyl:first-of-type → the intro lead under the heading
     .content                         → the single page container (centred column)
     .content h3                      → the four section headings (accent rule)
     .content > p (non-.special)      → the two closing call-to-action lines
     .combo / .combo_packs            → the single featured offer card:
       .combo_packs_con                    form → a → a → div wrappers pass through,
       h5 / .combo_amnt / .combo_choose    then the plan title, price and offer label
     .specialParaStyl                 → the intro lead + each section's body copy
     .helisttab                       → the included / steps / benefits lists (the
                                         pasted <br> row padding is neutralised in CSS)
   CSS-ONLY design: never a raw hex — every value is a --ho-* token from
   brand-tokens.css. Production pulls the tokens + chrome from common.css /
   brand-tokens.css; the design lives entirely in this one page stylesheet. */
@import "common.css?v=2";

/* ── page container — one centred reading column ───────────────────────────── */
/* the live DOM has the <h1> + intro lead directly inside .content, so the hero is
   just the first two children — no wrapper band. .content owns the top rhythm.
   --ho-s-section is the home hero's vertical step (matches home-page.css). */
:root{--fh-measure:820px;--ho-s-section:clamp(34px,4.6vw,66px)}
.content{max-width:var(--wrap);margin:0 auto;
  padding:var(--ho-s-section) var(--ho-s-5) var(--ho-s-8)}

/* ── hero (the live <h1> + intro lead) — HOME-PAGE PARITY, CSS-only ─────────────
   req_20260826_093228: give the H1 + intro paragraph + their background the same
   font, alignment, colour and spacing as home-page.php's `.banner` hero — WITHOUT
   touching the live DOM (no wrapper tag). Home paints --ho-hero-grad edge-to-edge
   across the viewport (`.banner{background:var(--ho-hero-grad);border-bottom:1px
   solid var(--ho-sky-100)}`), centres the H1 and left-aligns the lead. This page has
   no .banner wrapper, so the same full-bleed band is applied to the two real top
   elements (the H1 + the first .specialParaStyl lead): `margin-inline:calc(50% - 50vw)`
   + auto width spans each to 100vw, and `padding-inline:max(s5, 50vw - --wrap/2)`
   re-insets the text to the --wrap (1180px) reading column. The H1 pulls up under
   the nav (negative section top margin) and the lead closes the band with the standard
   +20px bottom room + a sky-100 hairline, so the two read as ONE continuous blue hero
   band exactly like home. Home inks (--ho-hero-ink / --ho-sky-800) stay AA-safe on the
   pale cyan wash. Same hero size/weight/tracking tokens as home. ──────────────────── */
.content > h1,
.content > .specialParaStyl:first-of-type{background:var(--ho-hero-grad);width:auto;
  margin-inline:calc(50% - 50vw);
  padding-inline:max(var(--ho-s-5),calc(50vw - var(--wrap) / 2))}
.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);text-align:center;text-wrap:balance;
  margin-top:calc(-1 * var(--ho-s-section));padding-top:var(--ho-s-section);
  padding-bottom:var(--ho-s-4);margin-bottom:0}
.content > .specialParaStyl:first-of-type{font-size:var(--ho-fs-md);color:var(--ho-sky-800);
  /* edit req_20260828_072531_78ae5a ("padding bottom reduce"): the hero band's foot-room
     was calc(--ho-s-section + 20px) = 60px narrow / 108px wide, the +20px there for
     home-page.php parity. Now a flat --ho-s-7 (48px) — a clear reduction at every width,
     and it no longer grows with the viewport. The band still reads as a band. */
  text-align:left;margin-top:0;padding-bottom:var(--ho-s-7);
  margin-bottom:0;max-width:none;border-bottom:1px solid var(--ho-sky-100)}
/* the paste carries a couple of empty <p></p> spacers — collapse them */
.content > p:empty{display:none;margin:0}

/* ── the single featured offer card, in a plain centred section ─────────────── */
/* .combo centres the card; .combo_packs is the card. The live form → a → a →
   cursor-div wrappers carry no layout, so pass them through (display:contents)
   and let .combo_packs_con be the padded column.
   edit req_20260827_122249: the offer BAND is fully retired — its background
   (req_115436) and border (this edit) are gone, so the full-bleed geometry that only
   existed to span the band across the viewport is dropped too. .combo is now a plain
   centred offer section; the card (.combo_packs — with its own border, shadow,
   top-accent bar and hover-lift) is the whole visual, centred in the --wrap column. */
.combo{display:flex;justify-content:center;margin:var(--ho-s-8) auto;padding:var(--ho-s-2) 0}

/* ELEGANCE PASS (edit req_20260828_071016_b9f83b, ".combo_packs redesign and elegant
   looks"). The card previously stacked THREE same-weight rows in a box and fought
   itself: the price sat in a rose chip and the offer label in a gold chip directly
   under it, so nothing led. It's recomposed around ONE focal point — the price —
   with the title demoted to an eyebrow and the gold label promoted to the card's
   single action. CSS-only; the live DOM (form > a > a > div(cursor) > .combo_packs_con)
   still passes through untouched. */
.combo_packs{width:100%;max-width:480px;background:var(--ho-card);
  border:1px solid var(--ho-sky-200);border-radius:var(--ho-r-xl);
  box-shadow:var(--ho-e-2);overflow:hidden;position:relative;
  transition:box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease),border-color var(--ho-dur) var(--ho-ease)}
.combo_packs::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:var(--ho-hero-grad)}
.combo_packs:hover{box-shadow:var(--ho-e-3);transform:translateY(-3px);border-color:var(--ho-sky-300)}
/* the pasted DOM is form > a(empty formsubmit) + a(href) > div(cursor) > .combo_packs_con */
.combo_packs form,
.combo_packs form > a,
.combo_packs form > a > div{display:contents}
/* no top padding — the crown zone below supplies it, so the tinted band can run
   edge to edge under the accent bar. */
.combo_packs_con{display:flex;flex-direction:column;text-align:center;
  padding:0 var(--ho-s-6) var(--ho-s-7)}

/* plan title (h5) — now the EYEBROW, in its own tinted crown zone that bleeds to the
   card edges (negative inline margins against .combo_packs_con's padding) and closes
   with a hairline. It labels the offer instead of competing with the price. */
.combo_packs_con h5{margin:0 calc(-1 * var(--ho-s-6)) var(--ho-s-7);
  padding:var(--ho-s-6) var(--ho-s-6) var(--ho-s-5);
  background:var(--ho-sky-50);border-bottom:1px solid var(--ho-sky-100);
  font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-bold);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ho-brand-text);line-height:var(--ho-lh-snug)}

/* price — the HERO of the card. The rose chip is gone (no ground, no border, no
   gloss): one large number in --ho-price with tabular figures, the currency (.splcur)
   small and set back, and the "/ 3 years" tail (the second span) a quiet muted
   cadence on the same baseline. Nothing boxes it in, so it leads on its own. */
.combo_amnt{align-self:center;display:inline-flex;align-items:baseline;gap:var(--ho-s-2);
  margin:0 0 var(--ho-s-6);padding:0;background:none;border:0;box-shadow:none;
  color:var(--ho-price);font-size:var(--ho-fs-2xl);font-weight:var(--ho-fw-black);
  letter-spacing:var(--ho-tracking-tight);line-height:var(--ho-lh-tight);
  font-variant-numeric:tabular-nums}
.combo_amnt span + span{color:var(--ho-muted);font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-semi)}
.combo_amnt b{font-weight:var(--ho-fw-semi)}
/* the currency wrapped in .splcur (live markup) — small & set back so the amount leads */
.combo_amnt .splcur{font-size:var(--ho-fs-sm);font-weight:var(--ho-fw-bold);vertical-align:baseline}

/* offer label — the card's ONE action. Still gold, but sized and lifted like a real
   button at the foot; the whole card is the link, so it reacts with the card's hover
   rather than sitting inert. (Motion is covered by common.css's reduced-motion guard,
   as with the card lift above.) */
/* --ho-fs-md, the size every other gold button on this site uses (edit
   req_20260903_100623). An audit of all 54 gold-background rules found 24 at md
   and only 7 at sm; the .proceed CLASS was md everywhere, while the pages that
   style the same button as input[name="proceed"] had drifted a step smaller. */
.combo_choose{align-self:center;display:inline-block;background:var(--ho-gold-grad);
  color:var(--ho-gold-ink);border:1px solid var(--ho-gold-border);border-radius:var(--ho-r-pill);
  font-weight:var(--ho-fw-bold);font-size:var(--ho-fs-md);letter-spacing:.03em;
  padding:12px var(--ho-s-7);box-shadow:var(--ho-e-2);
  transition:filter var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)}
.combo_packs:hover .combo_choose{filter:brightness(1.04);box-shadow:var(--ho-e-3)}

/* ── section headings (the bare <h3> blocks) ───────────────────────────────── */
/* left accent rule + even rhythm so each <h3> reads as a real page section under
   the one page h1. The margin-top owns the gap between a list/para and the next head. */
.content h3{font-size:var(--ho-fs-xl);font-weight:var(--ho-fw-black);color:var(--ho-ink);
  letter-spacing:var(--ho-tracking-tight);line-height:var(--ho-lh-snug);
  margin:var(--ho-s-8) 0 var(--ho-s-3);padding-left:var(--ho-s-4);
  border-left:4px solid var(--ho-brand)}

/* ── body copy (every .specialParaStyl except the intro lead handled above) ─── */
.specialParaStyl{color:var(--ho-body);font-size:var(--ho-fs-base);line-height:1.75;
  margin:0 0 var(--ho-s-4);max-width:var(--wrap)}
/* <b> in body copy no longer tinted (edit req_20260827_102646, matching domain-free) */

/* ── check lists (.helisttab — included / steps / benefits) ────────────────── */
/* clean list rows — the grid owns the spacing; the pasted <br> between <li>s is
   collapsed so the markup stays verbatim but the rhythm is the grid's. */
/* edit req_20260828_072011_5bb402 (".helisttab max width reconsider and if not needed
   remove"): the --ho-measure cap is GONE. It is a reading measure for running prose,
   but each <li> here is a short one-line card row with a check glyph — nothing to
   track line-to-line — and every other block on this page (.specialParaStyl, the h3s,
   the closing <p>s) runs to the full --wrap column, so the cap only made the lists
   stop short of everything above them. They now align flush with the page column. */
.helisttab{margin:0;padding:0;list-style:none;display:grid;gap:var(--ho-s-2)}
.helisttab br{display:none}
.helisttab li{position:relative;padding:var(--ho-s-3) var(--ho-s-4) var(--ho-s-3) var(--ho-s-7);
  background:var(--ho-card);border:1px solid var(--ho-line);border-radius:var(--ho-r);
  color:var(--ho-body);font-size:var(--ho-fs-base);line-height:1.6}
.helisttab li::before{content:"";position:absolute;left:var(--ho-s-4);top:50%;
  transform:translateY(-50%);width:18px;height:18px;border-radius:50%;
  background:var(--ho-sky-100);
  /* cyan check glyph, inlined so it needs no image request */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7490' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px 12px}
.helisttab li b{color:var(--ho-ink)}

/* ── closing call-to-action lines (the two plain <p>s at the end) ──────────── */
/* everything in .content that is a <p> but NOT a .specialParaStyl and NOT empty:
   the two closing lines the paste ends on. */
.content > p:not(.specialParaStyl):not(:empty){color:var(--ho-body);font-size:var(--ho-fs-md);
  line-height:1.7;max-width:var(--wrap);margin:var(--ho-s-8) 0 var(--ho-s-3)}
.content > p:not(.specialParaStyl):not(:empty) ~ p:not(.specialParaStyl):not(:empty){
  margin-top:var(--ho-s-5);margin-bottom:0;
  background:var(--ho-brand-soft);border:1px solid var(--ho-sky-200);border-radius:var(--ho-r-lg);
  padding:var(--ho-s-5) var(--ho-s-6);font-weight:var(--ho-fw-medium);color:var(--ho-ink)}
.content > p:not(.specialParaStyl):not(:empty) b{color:var(--ho-brand-text)}

/* ── responsive (640 / 1024 tiers) ─────────────────────────────────────────── */
@media (max-width:640px){
  .content{padding-left:var(--ho-s-4);padding-right:var(--ho-s-4)}
  .combo_packs_con{padding:0 var(--ho-s-5) var(--ho-s-6)}
  .combo_packs_con h5{margin:0 calc(-1 * var(--ho-s-5)) var(--ho-s-6);
    padding:var(--ho-s-5) var(--ho-s-5) var(--ho-s-4)}
  .content h3{margin-top:var(--ho-s-7)}
  .content > p:not(.specialParaStyl):not(:empty) ~ p:not(.specialParaStyl):not(:empty){
    padding:var(--ho-s-4) var(--ho-s-5)}
}
@media (max-width:400px){
  .content{padding-left:var(--ho-s-3);padding-right:var(--ho-s-3)}
}