/* ==========================================================================
   top.css: pricing, security and FAQ pages
   Builds only on styles.css tokens and the pages.css contract; nothing here
   redefines a shared class globally. Every rule is scoped to a page class
   (.pricing-page, .security-page, .faq-page) or to a class only these
   pages use, so the other inner pages can never pick it up by accident.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared by all three pages
   -------------------------------------------------------------------------- */

/* aczen.in's hero badge text, set as a quiet line rather than a pill, so the h1 stays the loudest thing */
.hero-kicker {
  margin-bottom: 14px; /* ties the line to the headline below it */
  font-size: 1rem; /* body-adjacent size: context, not a heading */
  font-weight: 600; /* firm enough to read as a label without shouting */
  color: var(--brand); /* brand blue marks it as Aczen's voice; 5.4:1 on white */
}

/* Hero buttons may carry "(external site)", which is too long for one line on a 360px phone */
.page-cta .btn {
  white-space: normal; /* overrides .btn's nowrap so a long label wraps instead of overflowing */
  text-align: center; /* wrapped lines stay centred inside the button */
}

/* Channel and emergency cards push their button to the bottom so buttons line up across a row */
.contact-card .btn,
.resource-grid .btn {
  margin-top: auto; /* .card is a flex column, so auto margin takes the leftover height */
  align-self: flex-start; /* keeps the button at its natural width instead of stretching */
}

/* The phone number, address or chat label: the thing people came to the card for */
.contact-value {
  font-size: 1.25rem; /* a step above body so it scans first */
  font-weight: 700; /* bold, like a figure on a statement */
  line-height: 1.3; /* compact on one or two lines */
  overflow-wrap: anywhere; /* long email addresses break instead of widening the card */
}

/* Availability line under the contact value */
.contact-note {
  font-size: 0.9375rem; /* small print size, matching .fine */
  color: var(--ink-soft); /* secondary to the value */
}

/* Paragraph under the closing heading on the dark band */
.closer-copy {
  margin-top: 16px; /* separates it from the heavy heading */
  max-width: 52ch; /* readable line length on the wide band */
  color: var(--info-tint); /* smebank-100 on smebank-950: well above 7:1, softer than pure white */
}

/* The closer's two buttons */
.closer-actions {
  display: flex; /* side by side where they fit */
  flex-wrap: wrap; /* stacked on phones */
  gap: 12px; /* space between the buttons in both directions */
}

/* Closer buttons may be long ("... (external site)"), so they wrap instead of overflowing phones */
.closer-actions .btn {
  white-space: normal; /* overrides .btn's nowrap */
  text-align: center; /* wrapped labels stay centred */
}

/* Secondary button on the dark band: outline only, so the white .btn-paper stays the main action */
.btn-on-dark {
  background: transparent; /* the band shows through */
  border-color: var(--paper); /* white 1.5px outline, 15.4:1 on smebank-950 */
  color: var(--paper); /* white label */
}

/* Hover fills faintly, the same "background only" feedback the other buttons use */
.btn-on-dark:hover {
  background: rgba(255, 255, 255, 0.12); /* faint white wash; label contrast stays above 12:1 */
  color: var(--paper); /* stops the global a:hover blue from taking over */
}

/* --------------------------------------------------------------------------
   2. Pricing page
   -------------------------------------------------------------------------- */

/* The hero on pricing is short, so the plans follow closely instead of after a full section gap */
.pricing-page .plans-section {
  padding-top: 0; /* the hero's bottom padding already separates them */
}

/* aczen.in's per-plan tagline, directly under the plan name */
.plan-tagline {
  margin-top: 4px; /* tucked under the name like a subtitle */
  font-size: 0.9375rem; /* small, secondary */
  color: var(--ink-soft); /* 7.6:1 on white */
}

/* The price row sits closer to its discount line on this page than on the home page */
.pricing-page .price {
  margin-bottom: 6px; /* the struck list price belongs to the amount, so they stay together */
}

/* The line under the price: aczen.in's struck original for the chosen period and its discount badge */
.price-was {
  min-height: 1.5em; /* same height in both states and on Freemium, so CTA rows never jump */
  margin-bottom: 20px; /* space before the button */
  font-size: 0.9375rem; /* small print */
  color: var(--ink-soft); /* secondary to the amount */
  font-variant-numeric: tabular-nums; /* digits align with the amount above */
}

/* The struck list price */
.price-was s {
  text-decoration-thickness: 1.5px; /* a hairline strike vanishes at small sizes */
}

/* The discount in done-green: it's money kept, which is the site's "good" colour, never deadline orange */
.price-was .off {
  margin-left: 6px; /* space from the struck price */
  font-weight: 700; /* reads as the payoff of the line */
  color: var(--done); /* 5.3:1 on white */
}

/* Annual-only text is hidden by default, because aczen.in's billingCycle starts at 'monthly' */
.pricing-page .when-yearly {
  display: none; /* only one period's figures show at a time */
}

/* When "Annually" is checked, bring the annual text back; :has() follows main.js's radios with no extra script */
.pricing-page:has(#billing input[value="yearly"]:checked) .when-yearly {
  display: revert; /* back to the element's own default (inline span, block paragraph) */
}

/* ...and hide the monthly text in its place */
.pricing-page:has(#billing input[value="yearly"]:checked) .when-monthly {
  display: none; /* a struck ₹999 beside ₹5,490/year would mix periods */
}

/* aczen.in's "Save ₹X annually" line, green like its source styling */
.price-save {
  margin: -12px 0 20px; /* pulls it up under the struck price, keeping the gap before the button */
  font-size: 0.875rem; /* small print */
  font-weight: 600; /* aczen.in sets it in medium weight so it reads as the payoff */
  color: var(--done); /* done green, 5.3:1 on white */
}

/* aczen.in's "Save 17%" badge inside the Annually option; beats .billing span's pill padding by specificity */
.billing .billing-save {
  display: inline-block; /* sits on the label's line instead of breaking onto its own */
  margin-left: 6px; /* space from the word "Annually" */
  padding: 1px 7px; /* small chip, far smaller than the option pill it sits in */
  border-radius: 999px; /* capsule, the site's shape for tags */
  background: var(--done-tint); /* light green, as aczen.in's green badge */
  color: var(--done); /* green text, 4.7:1 on its tint */
  font-size: 0.75rem; /* badge size */
  font-weight: 700; /* legible at the small size */
}

/* aczen.in's terms line under every plan button */
.plan-terms {
  margin-top: 12px; /* close to the button it qualifies */
  font-size: 0.8125rem; /* the smallest text on the page: it's fine print */
  line-height: 1.4; /* keeps two wrapped lines compact */
  color: var(--ink-soft); /* 7.6:1, still passes at the small size */
}

/* Category rows in the comparison table read as ledger sub-headings */
.plan-table .group-row th {
  padding-top: 20px; /* extra space above each group separates categories */
  background: var(--cell); /* gray-50 band so a group start is visible while scanning */
  font-size: 0.875rem; /* smaller than the features: a label, not a row */
  font-weight: 700; /* bold carries the grouping */
  color: var(--ink); /* full ink */
  letter-spacing: 0.01em; /* a hair of tracking helps small bold text */
}

/* Cells with a limit get a gap between pages.css's tick and aczen.in's value */
.plan-table .has-limit::before {
  margin-right: 6px; /* keeps "✓ 25/mo" from reading as one token */
}

/* Limit values are numbers people compare down a column */
.plan-table .has-limit {
  font-variant-numeric: tabular-nums; /* 25, 500 and 1000 share digit widths */
  white-space: nowrap; /* "Generate + export" stays on one line; the wrapper scrolls instead */
}

/* Add-ons: a ruled price list, two columns on wide screens */
.addons {
  display: grid; /* one column on phones */
  gap: 0 40px; /* column gap only; rules separate the rows */
  margin: 0; /* dl default margin removed */
  max-width: 880px; /* short rows read better than a full-width stretch */
}

/* Two columns once a name and price fit comfortably side by side */
@media (min-width: 720px) {
  /* Column count only */
  .addons {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* two ruled columns */
  }
}

/* One add-on: name left, price right, on a ruled line like a rate card */
.addons > div {
  display: flex; /* name and price on one line */
  justify-content: space-between; /* price flush right, where prices sit on an invoice */
  align-items: baseline; /* both texts share a baseline */
  gap: 16px; /* minimum space between name and price */
  padding-block: 14px; /* ruled line height */
  border-top: 1px solid var(--rule); /* ledger rule */
}

/* Add-on name */
.addons dt {
  font-weight: 500; /* a touch firmer than body */
}

/* Add-on price */
.addons dd {
  margin: 0; /* removes the default dd indent */
  font-weight: 700; /* the figure people look for */
  white-space: nowrap; /* "₹299/user/mo" never splits */
}

/* The pricing FAQ has a lede between heading and list, so the heading drops its own bottom gap */
.pricing-page .faq .section-title {
  margin-bottom: 0; /* the lede below supplies the spacing instead */
}

/* Lede between the FAQ heading and its questions */
.faq-lede {
  margin-bottom: 32px; /* same gap the heading would have had */
}

/* --------------------------------------------------------------------------
   3. Security page
   -------------------------------------------------------------------------- */

/* The notice band is one short message, so it takes less vertical room than a full section */
.security-page .security-notice-section {
  padding-block: calc(var(--section-y) * 0.6); /* tighter band, still on the shared rhythm */
}

/* aczen.in's security notice: a ruled panel with an orange margin rule, because it asks the reader to act */
.notice {
  max-width: 820px; /* one comfortable measure */
  padding: 20px 24px; /* inner breathing room */
  background: var(--paper); /* white panel on the tinted band */
  border: 1px solid var(--rule); /* frames the panel */
  border-left: 4px solid var(--deadline); /* orange = needs action, the site's one meaning for orange */
  border-radius: var(--radius-sm); /* smallest radius tier: it's a message, not a product panel */
}

/* Notice heading */
.notice-title {
  font-size: 1.125rem; /* sub-heading size: it labels one paragraph */
  font-weight: 700; /* aczen.in set this lead-in in bold */
  color: var(--deadline-text); /* darker orange that passes as text, 5.4:1 on white */
}

/* Notice body */
.notice p {
  margin-top: 6px; /* small gap under the heading */
  color: var(--ink); /* full ink: this is the one paragraph that must be read */
}

/* Tip cards: space the tick list from the description */
.security-page .card .ticks {
  margin-top: 8px; /* .card's gap already adds space; this keeps the list from crowding the text */
}

/* The uptime panel stands in for aczen.in's placeholder image and is this page's one bold moment */
.uptime-panel {
  display: flex; /* stacks figure and caption */
  flex-direction: column; /* vertical */
  justify-content: flex-end; /* figure sits low, like a total at the foot of a ledger page */
  min-height: 280px; /* keeps the panel's presence beside the eight-item list */
  padding: 32px; /* inner margin */
  border: 1px solid var(--rule); /* frames the panel */
  border-radius: var(--radius-lg); /* panel tier of the radius hierarchy */
  background-color: var(--paper); /* white sheet on the tinted band */
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px); /* ruled ledger lines every 32px: the site's account-book signature */
}

/* The figure itself */
.uptime-value {
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); /* display size, scaled to the column */
  font-variation-settings: "opsz" 32; /* Inter's display cut */
  font-weight: 800; /* heavy, like the page title */
  line-height: 1; /* the number sits tight on its baseline */
  letter-spacing: -0.03em; /* display tracking */
  color: var(--ink); /* primary */
  font-variant-numeric: tabular-nums; /* steady digit widths */
}

/* aczen.in's caption under the figure */
.uptime-label {
  margin-top: 10px; /* small gap under the number */
  font-weight: 600; /* reads as the figure's label */
  color: var(--done); /* green: the "all good" state, 5.3:1 on white */
}

/* The stats row reads as a ruled statement line rather than floating numbers */
.security-page .stat-row {
  padding-top: 24px; /* space between rule and figures */
  border-top: 1px solid var(--rule); /* ledger rule above the totals */
  justify-content: space-between; /* four figures spread across the column on desktop */
}

/* --------------------------------------------------------------------------
   4. FAQ page
   -------------------------------------------------------------------------- */

/* Five category sections in a row would stack five full section gaps, so each takes a shorter one */
.faq-page .faq {
  padding-block: calc(var(--section-y) * 0.6); /* tighter rhythm between categories */
}

/* Category headings are sub-sections of one page, so they sit a step below a normal section title */
.faq-page .faq .section-title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); /* smaller than .section-title's 3rem ceiling */
  margin-bottom: 24px; /* slightly less than the home page's 32px at the smaller size */
}

/* Category jump list under the hero lede */
.faq-index {
  margin-top: 32px; /* clear step below the lede */
}

/* Pills here hold links, so the padding moves onto the link to make the whole pill clickable */
.faq-index .pill-list li {
  padding: 0; /* the link below carries the padding instead */
}

/* The link fills its pill and meets the 44px touch-target minimum */
.faq-index a {
  display: inline-flex; /* lets min-height apply and centres the text */
  align-items: center; /* vertical centring */
  gap: 8px; /* space between the category name and its count */
  min-height: 44px; /* touch target */
  padding: 8px 16px; /* pill interior */
  border-radius: 999px; /* follows the pill's capsule so the focus ring matches */
  color: var(--ink); /* category names in ink; the pill shape signals the link */
  font-weight: 600; /* reads as navigation */
  text-decoration: none; /* an underline inside a pill looks broken */
}

/* Hover: underline returns as the non-colour cue */
.faq-index a:hover {
  color: var(--brand-hover); /* matches other link hovers */
  text-decoration-line: underline; /* visible change beyond colour */
}

/* aczen.in's question count, secondary to the name */
.faq-index .count {
  font-weight: 400; /* lighter than the category name */
  color: var(--ink-soft); /* 6.8:1 on the smebank-50 pill */
}