/* hosteasy/hosting-page.css — PAGE-specific CSS for the Linux Web Hosting page.
   =========================================================================
   REDESIGNED to match hosteasy/ssl-order.php (the "Buy Cheap SSL Certificate"
   page): the plan cards now use the SAME visual language as the SSL page —
   a gradient plan-name banner (.plans_table_tit), a big centred hero price
   (.plans_table_amnt_big), the GOLD gradient action button (.plans_tbl_choose a)
   and carded benefit lists (.helisttab).

   2ND PASS (2026-08-17, req d92f1d — "look like ssl-order pricing display"): the
   pricing card internals now mirror ssl-order.css 1:1 — the feature rows are the
   SSL page's plain hairline rows (flex, label/value space-between, bottom rule per
   row, NO left-indent green check-disc), and the card foot matches too (the term
   <select> sits right under the features, and the gold action button carries the
   margin-top:auto that pins it to the foot). Banner and helisttab were already
   identical to ssl-order.

   3RD PASS (2026-08-17, req b58f3e — "like ssl-order.php page plan design"): the
   last property-level deviation — the price block — is now aligned to ssl-order's
   exact spec. .plans_table_amnt is the SAME baseline-centered flex row as the SSL
   page (display:flex;align-items:baseline;justify-content:center;gap:2px), so the
   live price ("Rs 59 / month") renders identically; the extra struck list price
   this page carries drops to its own centred row via the live <br> (turned into a
   full-width flex break). Cards, banner, features foot and helisttab were already
   matching from the prior passes.

   4TH PASS (2026-08-17, req ce9a10 — "i want design like ssl-order.php"): the last
   shared-class control deviation is gone — the per-plan term <select> was still at
   --ho-fs-sm here while ssl-order sizes the same control at --ho-fs-base, so the
   dropdown text now reads at the SAME size as the SSL page. Everything else the two
   pages differ on is legitimate content adaptation, not a design gap: this page runs
   4 plans (a 4-up grid vs ssl-order's 3-up), carries struck sale prices, and has no
   SSL domain field / rate line in the card foot.

   5TH PASS (2026-08-17, req 177a91 — "i want design like ssl-order.php ... refer the
   ssl-order.php page css", full ssl-order plan-grid CSS pasted): diffed the whole
   pasted block property-by-property against this file. It was already at parity from
   passes 1–4 save ONE literal: ssl-order's .plans_table_amnt carries text-align:center,
   which this page had dropped — restored here so the block matches the pasted spec 1:1.
   The remaining differences are all required adaptations to THIS page's markup, not
   design gaps: the grid lives on `form > div` (not `.plans_container > form`) because
   the hosting form wraps its plans in an extra <div>; it is 4-up (repeat(4,minmax(0,1fr)))
   vs ssl-order's 3-up; `select{width:100%!important}` overrides the live inline width:90%;
   and the breakpoints stay on the project's canonical 640/1024 scale rather than
   ssl-order's off-scale 600/900.

   6TH PASS (2026-08-17, req 3ff30a — "ssl-order page design to this hosting page
   plans_container"): fixed the LAST rendered divergence in the plan grid. Both pages
   ship a per-plan term <select> with an inline `style="width:90%"`; ssl-order.css sets
   width:100% WITHOUT !important, so the inline 90% wins and its dropdown renders inset +
   centred. This file had forced `width:100%!important`, pushing the control edge-to-edge —
   the one place the card foot still looked different from the SSL page. Dropped the
   !important so the 90% inline width stands, matching ssl-order's rendered select exactly.
   The remaining differences from ssl-order are all content, not design: 4 plans (a 4-up
   grid vs 3-up) and struck sale prices, which the SSL page doesn't carry.

   7TH PASS (2026-08-17, req 4be7ce — "the paragraph use full width, dont set max-width
   ... display issue in larger screen"): the SEO prose block (h3 + p + .helisttab) was
   capped at a 960px reading column, so on a wide screen the copy sat as a narrow band
   under the full-width plan grid. Dropped the max-width cap on all three so the prose
   fills the .content column and aligns with the plans above; .content still bounds the
   whole page at --wrap. (11th pass, req aedc58, later extended the same full-width
   treatment to the head/lead blocks — h1, .specialParaStyl, .plans-heading, .plans-lead.)
   No markup/class changes — CSS-only, per the request.

   STILL STYLE-ONLY, keyed to the LIVE hosteasy.in markup. hosting-page.php mirrors
   the production DOM: one <div class="content"> holding the <h1> title, the
   .specialParaStyl lead, the .plans_container / .plans_table pricing form and the
   plain <h3> + <p> + <ul class="helisttab"> SEO prose. The hosting page keeps its
   OWN markup shape — four plans inside a `form > div` grid, a struck list price in
   .plans_table_amnt and a per-plan duration <select> (no SSL domain field) — so the
   ssl-order look is adapted to it, not copied over its structure. No colour is
   hand-written; every value is a --ho-* token from brand-tokens.css (via common.css). */
@import "common.css?v=2";

/* section rhythm — match home-page.php's tighter, EVEN vertical step (req 502d44,
   "cross check with home-page … spaces"): home-page.css scopes a smaller
   --ho-s-section so every band gaps evenly, but hosting-page inherited the larger
   GLOBAL step — so its top gap and inter-section spacing read looser than home.
   Scope the SAME value HERE (this sheet loads only on the hosting page, so the
   global token stays untouched elsewhere) so the two pages share one cadence. */
:root{--ho-s-section:clamp(34px,4.6vw,66px)}

/* ── page column — the live .content wrapper holds the whole page ──────────── */
.content{max-width:var(--wrap);margin:0 auto;padding:var(--ho-s-section) var(--ho-s-5) 0}

/* page title + lead intro (live: h1 + p.specialParaStyl) — ssl-order hero treatment.
   11TH PASS (req aedc58 — "utilize max width of .content in the following properties"):
   the four head/lead blocks (.content > h1, .specialParaStyl, .plans-heading,
   .plans-lead) were each capped at a narrow reading measure (22ch heads / 72ch leads)
   and centred inside .content. The caps are DROPPED so every one now spans the FULL
   .content column (--wrap) at ALL screen sizes — the auto side-margins fall away with the
   cap, so `margin:… 0 …` keeps them flush to the column edges. Text stays centred within
   that full width, matching the sibling hero pages. No responsive rule re-imposes a cap,
   so the full width holds across every breakpoint.
   (NOT promoted to common.css: `.content > h1` / `.specialParaStyl` recur across the
   hosteasy pages but with DIVERGENT treatments — max-widths of 760/780/820/900/1040/
   --wrap, plus the legal/about pages' carded `.content_area .content > h1` with ::after
   underlines. common.css deliberately shares only the base `h1` at --ho-fs-2xl and lets
   each hero page override locally with `.content > h1` at --ho-fs-hero; moving the hero
   rule up would wrongly hero-size the legal/about pages. So it stays page-scoped.) */
.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;margin:0 0 var(--ho-s-4)}
/* lead intro — aligned to home-page.php's hero lead (req 502d44, "cross check …
   paragraph"): home's `.banner_content > p` uses color --ho-sky-800 and a
   --ho-s-6 bottom step. Match both here (was --ho-body / --ho-s-7) so the intro
   reads the same tone and the intro→plans gap equals home's. LEFT-aligned (req
   03fe97, "top paragraph bring in left align") — now matches home's flush-left lead. */
.content > .specialParaStyl{text-align:left;font-size:var(--ho-fs-md);line-height:1.7;color:var(--ho-sky-800);
  margin:0 0 var(--ho-s-6)}
.content > .specialParaStyl b{color:var(--ho-ink)}

/* merged-in plan section framing (req baf112 — folded from the plan-display detour):
   a titled section directly above the grid — the section heading gets the hero-ink
   treatment, the lead is the detour's centred plan intro sitting just above the cards.
   Full-width (11th pass): caps dropped so both span the whole .content column. */
.content > .plans-heading{text-align:center;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:var(--ho-s-7) 0 var(--ho-s-4)}
.content > .plans-lead{text-align:left;font-size:var(--ho-fs-md);line-height:1.7;color:var(--ho-body);
  margin:0 0 var(--ho-s-6)}
.content > .plans-lead b{color:var(--ho-ink)}

/* ── pricing plans — LIVE markup (.plans_container / .plans_table family) ──────
   Four .plans_table cards live inside one `form > div` alongside hidden inputs and a
   trailing .clear; grid that wrapper, hide the non-card children, and style each
   .plans_table as a card on the ssl-order card system (.plans_table = the card,
   .plans_table_con = its flex column). */
/* 11TH PASS spacing review (req aedc58 — "review once spaces for all sections"):
   the plan grid's bottom margin was --ho-s-8 while every OTHER section break on the
   page (intro→plans, callout→prose, and each prose h3→h3) is --ho-s-7. Unified to
   --ho-s-7 so all inter-section gaps share one rhythm; the tighter intra-section gaps
   (heading→lead --ho-s-4, lead→grid --ho-s-6) are left as-is by design. */
.plans_container{margin:0 auto var(--ho-s-7)}
/* 9TH PASS (req b68a1c — "refer this detour hosteasy/plan-display.php and apply this
   hosting css"): adopt the plan-display detour's layout so all four tiers sit in ONE
   clean row instead of the flex 3-up + orphaned 4th the prior pass produced. The detour
   lays the plans out as a real CSS grid: the <form> IS the grid, its inner wrapping
   <div> is display:contents so the four .plans_table cards become direct grid items, and
   the row is repeat(4,1fr) capped at --wrap — the exact ssl-order card system, now in a
   tidy 4-across grid. Cards drop their flex-item sizing and become plain grid cells.
   CSS-only, keyed to the live markup (no HTML/class change); the card internals and the
   SEO prose below are unchanged from the ssl-order parity passes. (The hidden inputs and
   the trailing .clear are display:none, so exactly four cells fill the single row.) */
/* 10TH PASS (req f38bd5 — "per row maximum 3 plans - redesign again"): the desktop grid
   was repeat(4,1fr), packing all four tiers into ONE row and squeezing each card. Now at
   most THREE plans sit per row and the fourth (Diamond) wraps onto a second row — the
   roomier ssl-order-width cards the SSL page shows at 3-up. Switched the grid to a
   centred flex WRAP so that lone wrapped card CENTRES under the row instead of hanging in
   the left column (a fixed 3-col grid would left-align the orphan). Each .plans_table is a
   flex item sized to a fixed basis (no grow, so the wrapped 4th never stretches to full
   width), the row is capped so exactly three fit, and justify-content:center keeps every
   row — full or partial — centred. Still CSS-only, keyed to the live markup; card
   internals are unchanged and the tablet/phone reflow below is updated to match. */
.plans_container form{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:var(--ho-s-5);max-width:1080px;margin:0 auto}
.plans_container form > div{display:contents}
.plans_container .clear{display:none}

/* each plan card — a flex item on the ssl-order card system (.plans_table = the card,
   .plans_table_con = its flex column). Fixed basis with NO grow (10th pass) so three fit
   per row and the wrapped fourth keeps the same width instead of stretching full-width. */
.plans_table{flex:0 1 336px;background:var(--ho-card);border:1px solid var(--ho-line);
  border-radius:var(--ho-r-xl);box-shadow:var(--ho-e-2);overflow:hidden;
  transition:box-shadow var(--ho-dur) var(--ho-ease),transform var(--ho-dur) var(--ho-ease),border-color var(--ho-dur) var(--ho-ease)}
.plans_table:hover{box-shadow:var(--ho-e-3);transform:translateY(-2px);border-color:var(--ho-brand)}
.plans_table_con{display:flex;flex-direction:column;height:100%}

/* plan name banner — gradient header, like ssl-order */
.plans_table_tit{background:var(--ho-hero-grad);color:var(--ho-hero-ink);font-weight:var(--ho-fw-black);
  font-size:var(--ho-fs-lg);letter-spacing:var(--ho-tracking-tight);text-align:center;
  padding:var(--ho-s-5) var(--ho-s-4);border-bottom:1px solid var(--ho-sky-100)}

/* price block — SAME as ssl-order: the live price ("Rs" + big number + "/ month")
   sits on ONE baseline-centered flex row; the struck list price then wraps to its
   own centred row below (the live markup's <br> is turned into a full-width flex
   break so the strike drops under the price). text-align:center matches ssl-order's
   spec 1:1 and centres each wrapped row's inline runs (incl. the struck price). */
.plans_table_amnt{text-align:center;color:var(--ho-muted);font-size:var(--ho-fs-sm);
  padding:var(--ho-s-5) var(--ho-s-4) var(--ho-s-3);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px}
.plans_table_amnt_big{color:var(--ho-price);font-weight:var(--ho-fw-black);font-size:var(--ho-fs-hero);
  line-height:1;letter-spacing:var(--ho-tracking-tight)}
.plans_table_amnt br{flex-basis:100%;height:0}
/* Struck "was" price — forced onto its OWN full-width line (display:block + width:100%
   makes it a full-row flex item, so the drop no longer depends on the live <br>). Read
   as a discreet regular-price reference under the hero price: muted, small, a clear
   thinned line-through, a touch of tracking and extra top margin so it's plainly the
   crossed-out old price, centred and compact.

   NO opacity here, deliberately (edit req_20260904_072818). It used to carry opacity:.72,
   which blended --ho-muted toward the white card and painted rgb(138,148,153) — 3.1:1 at
   13.2px, under the AA 4.5 floor, so it read as DISABLED rather than as a was-price. At
   full strength --ho-muted is 5.52:1 and passes. The line-through alone carries the "was";
   it does not also need to be faded. This is what ssl-order and hosting-main-page already
   do — the opacity was a hosting-page-only addition. Don't reintroduce it. */
.plans_table_amnt strike{display:block;width:100%;margin-top:var(--ho-s-2);
  font-size:var(--ho-fs-sm);color:var(--ho-muted);text-align:center;line-height:1.2;
  text-decoration:line-through;text-decoration-thickness:1px;
  letter-spacing:.01em}
.plans_table_amnt strike span{white-space:nowrap}

/* feature list — SAME as ssl-order: plain hairline rows, spec label left / value right
   (space-between), a bottom rule per row, no left-indent check-disc badge. */
.plans_table_features{padding:0 var(--ho-s-5) var(--ho-s-4)}
.plans_table_features ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--ho-s-2)}
.plans_table_features li{display:flex;align-items:center;justify-content:space-between;gap:var(--ho-s-3);
  padding:var(--ho-s-2) 0;border-bottom:1px solid var(--ho-line);color:var(--ho-body);
  font-size:var(--ho-fs-sm);line-height:var(--ho-lh);text-transform:none}
.plans_table_features li:last-child{border-bottom:0}
.plans_table_features li:empty{display:none}

/* per-plan duration selector (.pakadge_frm_con) — sits directly under the features
   (ssl-order pattern); the gold button below carries margin-top:auto to the foot. */
.pakadge_frm_con{padding:0 var(--ho-s-5) var(--ho-s-3);text-align:center}
/* width:100% is the stylesheet default, but — exactly like ssl-order.css — it is left
   WITHOUT !important so the live inline `style="width:90%"` wins and the dropdown renders
   at 90%, inset and centred within .pakadge_frm_con, identical to the SSL page's select.
   (A prior pass forced 100% here, which pushed the control edge-to-edge and was the last
   thing making this card's foot read differently from ssl-order's.) */
.plans_table select{width:100%;box-sizing:border-box;appearance:none;-webkit-appearance:none;
  border:1px solid var(--ho-line-2);background-color:var(--ho-tile);color:var(--ho-brand-text);
  font-size:var(--ho-fs-base);font-weight:var(--ho-fw-semi);cursor:pointer;outline:none;
  padding:10px var(--ho-s-6) 10px var(--ho-s-4);border-radius:var(--ho-r);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155e75' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right var(--ho-s-3) center;background-size:15px;
  transition:border-color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)}
.plans_table select:hover{border-color:var(--ho-brand)}
.plans_table select:focus,.plans_table select:focus-visible{border-color:var(--ho-brand);box-shadow:0 0 0 3px var(--ho-brand-soft)}

/* CHOOSE button — GOLD gradient primary action (matches ssl-order's "Buy"),
   pinned to the card foot with margin-top:auto exactly as on the SSL page. */
.plans_tbl_choose{margin-top:auto;padding:var(--ho-s-4) var(--ho-s-5) var(--ho-s-5);text-align:center}
.plans_tbl_choose a{display:block;cursor:pointer;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;font-size:var(--ho-fs-md);
  padding:12px var(--ho-s-5);border-radius:var(--ho-r);transition:filter var(--ho-dur) var(--ho-ease)}
.plans_tbl_choose a:hover{filter:brightness(1.04)}

/* ── editorial / SEO prose — live plain h3 + p + ul.helisttab, after the grid ──
   FULL-WIDTH prose (req 4be7ce): the prose used to be capped at a 960px reading
   column, which on a wide screen left a narrow band of copy floating under the
   full-width plan grid — the "display issue in larger screen" the user flagged.
   The max-width cap is dropped so the whole prose block (headings, paragraphs and
   the .helisttab cards) fills the .content column edge-to-edge and lines up with
   the plans above. .content itself still bounds everything at --wrap, so text
   never runs past the site's page width. */
.content h3{margin:var(--ho-s-7) 0 var(--ho-s-3);font-size:var(--ho-fs-lg);
  font-weight:var(--ho-fw-bold);color:var(--ho-ink);letter-spacing:var(--ho-tracking-tight)}
.content > p{margin:0 0 var(--ho-s-4);font-size:var(--ho-fs-base);line-height:1.8;color:var(--ho-body);text-align:left}
.content > p:empty{display:none}
.content > p b{color:var(--ho-ink)}
.content > .plans_container + p{margin:var(--ho-s-7) 0 var(--ho-s-4);font-size:var(--ho-fs-md);line-height:1.8;text-align:left;
  color:var(--ho-hero-ink);background:var(--ho-brand-soft);border:1px solid var(--ho-sky-100);
  border-radius:var(--ho-r-xl);padding:var(--ho-s-5) var(--ho-s-6)}
.content > .plans_container + p b{color:var(--ho-brand-text);font-weight:var(--ho-fw-bold)}

/* reasons list (.helisttab) — carded rows with a circular check badge (ssl-order style) */
.helisttab{display:grid;gap:var(--ho-s-3);margin:var(--ho-s-4) 0 var(--ho-s-2);padding:0;list-style:none}
.helisttab li{position:relative;padding:var(--ho-s-4) var(--ho-s-5) var(--ho-s-4) calc(var(--ho-s-6) + var(--ho-s-2));
  background:var(--ho-card);border:1px solid var(--ho-line);border-radius:var(--ho-r-lg);box-shadow:var(--ho-e-1);
  color:var(--ho-body);font-size:var(--ho-fs-base);line-height:var(--ho-lh)}
.helisttab li b{color:var(--ho-ink);font-weight:var(--ho-fw-bold)}
.helisttab li::before{content:"";position:absolute;left:var(--ho-s-4);top:var(--ho-s-4);
  width:22px;height:22px;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:13px;background-position:center;background-repeat:no-repeat}

/* ── page responsive (chrome/nav responsive lives in common.css) ──────────── */
/* flex reflow (10th pass): 3-up desktop → 2-up tablet → stacked phone, each step
   re-capping the flex row width so the cards stay roomy as they wrap. The cards keep
   their fixed 336px basis until the phone step, where they go full-width. */
@media (max-width:1024px){
  .plans_container form{max-width:720px}
}
@media (max-width:640px){
  .plans_container form{max-width:420px}
  .plans_table{flex-basis:100%}
}

/* page-specific reduced-motion override (site-wide guard is in common.css) */
@media (prefers-reduced-motion: reduce){
  .plans_table:hover{transform:none}
}