/* hosteasy/ssl-order.css — PAGE-specific CSS for the Host Easy "Buy Cheap SSL
   Certificate" page (the LIVE https://www.hosteasy.in/ssl-product.php).
   =========================================================================
   CSS-ONLY reskin: the markup + class names mirror the LIVE page 1:1
   (.plans_container / .plans_table / .plans_table_tit / .plans_table_amnt(_big) /
   .plans_table_features / .pakadge_frm_con / .plans_tbl_choose / .helisttab), so
   the site's own productPrice()/actinssl() handlers drive the real purchase form.
   ALL design lives here — never a raw hex, every value is a --ho-* token.
   Loads the shared design system first (tokens + base + header/nav/footer), then:
     .content                       → page wrapper (h1 hero + intro + plans + prose)
     .plans_container > form         → the 3-up SSL plan grid
     .plans_table(_con)             → each SSL certificate card
     .plans_table_tit/_amnt(_big)   → the plan name + price
     .plans_table_features          → the encryption/support feature list
     .pakadge_frm_con + inputs      → the term <select> + domain field
     .plans_tbl_choose a            → the gold "Buy" action
     .helisttab / .content h3 + p   → the benefit lists + prose sections */
@import "common.css?v=2";

/* ssl-order rhythm — ONE slightly-smaller, EVEN vertical step for every band,
   matching home-page.css. Scoped HERE (this sheet loads only on this page, so the
   global token is untouched elsewhere) so the gaps between the hero, plan grid and
   prose bands read even and a touch tighter, exactly like home. */
:root{--ho-s-section:clamp(34px,4.6vw,66px)}

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

/* ── hero heading + intro ──────────────────────────────────────────────────── */
/* H1 is CENTERED at the top of the page measure. The intro lead runs the FULL content
   measure, flush-left — matching the common structure (base h1/p left at the natural
   measure) that the sibling hosteasy pages inherit; the earlier 68ch cap + centering
   was a page-local override and is dropped here. */
.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;width:100%;max-width:none;margin:0 0 var(--ho-s-4)}
/* the lead is BLUE, not body grey (edit req_20260904_062619, "this should be blue
   color … refer hosting-page"). hosting-page.php sets the same selector to
   --ho-sky-800, matched there to home-page's own hero lead so the intro reads in one
   tone across the site; this page was the outlier at --ho-body. #155e75 is 7.27:1 on
   white, so it stays comfortably AA. The bold run below keeps --ho-ink, exactly as on
   the reference, so emphasised words still read darker than the lead around them.
   NOTE the two rules still differ on the bottom step — this page s-7, hosting-page s-6,
   where the smaller one was chosen so the intro→plans gap matches home. Left as-is:
   the request was about colour. */
.content > .specialParaStyl{color:var(--ho-sky-800);font-size:var(--ho-fs-md);line-height:1.7;
  text-align:left;margin:0 0 var(--ho-s-7)}
/* âš  THE BOLD INSIDE THE LEAD HAS NO COLOUR RULE, AND THAT IS DELIBERATE
   (edit req_20260904_071624, "no b tag separate color just p tag color applied").
   It inherits --ho-sky-800 from the paragraph above, so an emphasised phrase differs by
   WEIGHT alone. That is what home-page.php does: its hero lead carries <b>HostEasy.in</b>
   and home-page.css has no b rule at all, so the bold measures the same rgb(21,94,117)
   as the text around it.
   This rule previously set --ho-ink, then --ho-hero-ink — I argued for the darker rung
   on the grounds that emphasis should carry a colour step, and that was wrong for this
   site. Do not add a colour back here; the absence is the decision. */

/* ── SSL plan grid (form is the grid; hidden inputs/checkboxes don't lay out) ── */
.plans_container{margin:0 auto var(--ho-s-8)}
.plans_container > form{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ho-s-5);
  max-width:var(--wrap);margin:0 auto;align-items:start}

/* each certificate card */
.plans_table{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 */
.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 */
.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;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)}

/* feature list */
.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}
.plans_table_features img{width:15px;height:15px;flex:0 0 auto;object-fit:contain}

/* term select + domain field + Buy action */
.pakadge_frm_con{padding:0 var(--ho-s-5) var(--ho-s-3);text-align:center}
.plans_table select,.plans_table input[type="text"]{width:100%;box-sizing:border-box;
  border:1px solid var(--ho-line-2);background:var(--ho-card);color:var(--ho-ink);font-size:var(--ho-fs-base);
  padding:10px var(--ho-s-4);border-radius:var(--ho-r);outline:none;
  transition:border-color var(--ho-dur) var(--ho-ease),box-shadow var(--ho-dur) var(--ho-ease)}
.plans_table select{appearance:none;-webkit-appearance:none;background-color:var(--ho-tile);
  font-weight:var(--ho-fw-semi);color:var(--ho-brand-text);
  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;padding-right:var(--ho-s-6)}
.plans_table input[type="text"]::placeholder{color:var(--ho-muted)}
.plans_table select:focus,.plans_table input[type="text"]:focus{border-color:var(--ho-brand);box-shadow:0 0 0 3px var(--ho-brand-soft)}
.ssl_pack_rate{padding:0 var(--ho-s-5);min-height:0}
.ssl_pack_rate > div{color:var(--ho-price);font-weight:var(--ho-fw-bold);font-size:var(--ho-fs-base)}

.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)}

/* ── section headings + prose (full-width flush-left column) ─────────────────── */
/* After-plans redesign (req 091cf2 — "after .plans_container portion redesign … common
   for all pages … width, list"): the prose + headings and the .helisttab lists below
   now share ONE measure — the full .content column (--wrap), flush-left — instead of the
   old mismatch where paragraphs sat capped at 72ch while the list cards floated centered
   at 960px. This matches the sibling hosteasy pages (hosting-page.css runs the same
   h3 + p + .helisttab block full-width flush-left with no reading cap). The 72ch cap is
   DROPPED here so headings, prose and list cards align on the same left rule as the
   full-width H1, intro and plan grid above. Top margins key off --ho-s-section for even
   band rhythm; .content still bounds the whole page at --wrap so copy never over-runs. */
.content h3{font-size:var(--ho-fs-lg);font-weight:var(--ho-fw-bold);color:var(--ho-ink);
  letter-spacing:var(--ho-tracking-tight);margin:var(--ho-s-7) 0 var(--ho-s-3)}
.content > p{margin:0 0 var(--ho-s-4);color:var(--ho-body);text-align:left;
  font-size:var(--ho-fs-base);line-height:1.8}
/* body paragraphs only — the LEAD is excluded. .specialParaStyl is also a `.content > p`,
   so this rule was still painting its bold --ho-ink after the lead's own b rule was
   removed, which defeated the whole point of removing it (measured: the lead's bold came
   back as rgb(20,37,43) instead of inheriting). :not() keeps the ink bold where it was
   always intended — the running copy below — and leaves the lead's bold to the paragraph.
   (req_20260904_071624) */
.content > p:not(.specialParaStyl) b{color:var(--ho-ink)}
.content > p a{color:var(--ho-brand-text);font-weight:var(--ho-fw-semi)}

/* ── benefit + step lists (ul.helisttab → marked cards) ─────────────────────── */
/* benefit + step cards span the FULL content measure and left-align on the same left
   rule as the H1/intro/plan grid — max-width:960px + `auto` centering DROPPED (they used
   to float in a narrower centered column, misaligned with the flush-left prose above).
   Now flush-left (margin …0…), matching hosting-page.css so the SSL page reads as part of
   the same set (the "common for all pages" ask). */
.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)}
.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}
/* the "How to buy" list reads as ordered steps → numbered cyan discs */
.helisttab--steps{counter-reset:ssl-step}
.helisttab--steps li{counter-increment:ssl-step}
.helisttab--steps li::before{background:var(--ho-brand-soft);content:counter(ssl-step);
  color:var(--ho-brand-text);font-weight:var(--ho-fw-black);font-size:var(--ho-fs-sm);
  display:flex;align-items:center;justify-content:center;background-image:none}

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .plans_container > form{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .plans_container > form{grid-template-columns:1fr;max-width:420px}
}