/* ==========================================================================
   aczen.live inner pages: shared layout contract
   Every inner page (products, solutions, company, legal) builds from these
   classes, so each one's name and behaviour is a contract other files rely on.
   Tokens and base components (.wrap, .btn, .display, .lede, .section-title)
   come from styles.css; nothing here redefines them. Mobile-first like
   styles.css: base rules target 360px phones, min-width queries widen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page hero
   -------------------------------------------------------------------------- */

/* The top section of an inner page: less height than the home hero because it introduces one topic */
.page-hero {
  padding-top: 40px; /* phones: the headline should appear without scrolling past empty space */
  padding-bottom: 56px; /* room before the first content section */
}

/* Desktop gets more air above the headline */
@media (min-width: 760px) {
  /* Only the top padding grows; the bottom stays constant */
  .page-hero {
    padding-top: 72px; /* matches the home hero's sense of space at desktop widths */
  }
}

/* Text beside a media panel on wide screens, stacked on narrow ones */
.page-hero-grid {
  display: grid; /* single column by default, two columns from 960px */
  gap: 40px; /* space between text and media when stacked or side by side */
  align-items: center; /* vertically centres the shorter column against the taller */
}

/* Two columns once there is room for text and an image side by side */
@media (min-width: 960px) {
  /* Text column slightly wider: the headline is the main thing */
  .page-hero-grid {
    grid-template-columns: 1.1fr 0.9fr; /* text leads, media supports */
    gap: 56px; /* wider gap at desktop so the columns don't crowd */
  }
}

/* Inner-page h1: the .display treatment one size step down, so the home page keeps the biggest headline */
.page-title {
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); /* 2.2rem on phones up to 3.6rem on wide screens */
  font-variation-settings: "opsz" 32; /* Inter's display cut, same as .display */
  font-weight: 800; /* same heavy weight as .display, so the family resemblance is obvious */
  line-height: 1.05; /* a touch looser than .display's 1.03 at the smaller size */
  letter-spacing: -0.03em; /* display sizes need negative tracking or Inter looks loose */
  color: var(--ink); /* explicit, matching .display */
  max-width: 20ch; /* keeps page titles to two or three lines */
}

/* Intro paragraph under the page title, matching .lede */
.page-lede {
  margin-top: 20px; /* separates it from the headline's heavy block */
  max-width: 60ch; /* readable line length */
  font-size: 1.1875rem; /* same notch above body as .lede */
  color: var(--ink-soft); /* secondary to the headline */
}

/* Row of hero buttons */
.page-cta {
  display: flex; /* buttons side by side */
  flex-wrap: wrap; /* stacks onto a second line on narrow phones instead of overflowing */
  gap: 12px; /* space between buttons in both directions */
  margin-top: 28px; /* clear step below the lede */
}

/* Framed image or screenshot; the frame uses the panel radius tier */
.page-media {
  margin: 0; /* figure has default side margins that would push it off-column */
  border: 1px solid var(--rule); /* frames white screenshots against the white page */
  border-radius: var(--radius-lg); /* panel tier of the radius hierarchy */
  overflow: hidden; /* clips the image to the rounded corners */
  background: var(--paper-deep); /* shows a tint instead of a blank hole while the image loads */
}

/* The image fills its frame */
.page-media img {
  display: block; /* removes the inline-image baseline gap below the picture */
  width: 100%; /* fills the frame's width */
  height: auto; /* keeps the source aspect ratio */
}

/* --------------------------------------------------------------------------
   2. Sections
   -------------------------------------------------------------------------- */

/* Standard content section; uses the site-wide rhythm token so pages breathe like the home page */
.page-section {
  padding-block: var(--section-y); /* 64px phone, 96px desktop */
}

/* Alternate section with the pale brand tint, for rhythm between consecutive sections */
.page-section-alt {
  padding-block: var(--section-y); /* same rhythm as .page-section so it works on its own */
  background: var(--paper-deep); /* smebank-50 band, same tint the home page uses */
}

/* Heading plus lede at the top of a section */
.page-section-head {
  margin-bottom: 40px; /* separates the intro from the section's content */
  max-width: 62ch; /* keeps the lede readable */
}

/* --------------------------------------------------------------------------
   3. Features, cards, stats
   -------------------------------------------------------------------------- */

/* Feature list: open columns separated by rules, not boxed cards */
.feature-grid {
  display: grid; /* auto-flowing columns */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); /* as many 260px columns as fit; min() stops overflow below 260px */
  gap: 32px 40px; /* row gap, then a wider column gap so columns read separately */
}

/* One feature: a short rule on top marks where it starts, like a ledger entry */
.feature {
  padding-top: 20px; /* space between the rule and the heading */
  border-top: 1px solid var(--rule); /* a thin rule instead of a card, per the no-shadowed-cards rule */
}

/* Feature heading */
.feature h3 {
  font-size: 1.125rem; /* a step above body so it scans as a heading */
  font-weight: 700; /* bold carries the heading role at this small size */
  line-height: 1.3; /* compact but not cramped over two lines */
  color: var(--ink); /* primary text */
}

/* Feature description */
.feature p {
  margin-top: 8px; /* small gap under the heading */
  color: var(--ink-soft); /* secondary to the heading */
}

/* Grid of cards, e.g. related products or blog posts */
.card-grid {
  display: grid; /* auto-flowing columns */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); /* 280px columns; auto-fill keeps a lone card from stretching full width */
  gap: 24px; /* even spacing both directions */
}

/* One card: bordered, flat, no shadow */
.card {
  display: flex; /* stacks image, title, text and link */
  flex-direction: column; /* vertical */
  gap: 10px; /* one gap value instead of per-child margins */
  padding: 24px; /* inner breathing room */
  background: var(--paper); /* white so cards stand out on .page-section-alt */
  border: 1px solid var(--rule); /* the border does the separating a shadow would otherwise do */
  border-radius: var(--radius-md); /* middle tier: smaller than panels, larger than buttons */
  color: var(--ink); /* keeps text ink when the card itself is a link */
}

/* A card that is a link loses the link underline; the border change is its hover cue */
a.card {
  text-decoration: none; /* an underlined card body would be unreadable */
}

/* Linked-card hover: brand border, text stays put */
a.card:hover {
  border-color: var(--brand); /* shows the whole card is the target */
  color: var(--ink); /* overrides the global a:hover colour */
}

/* Card images use the smallest radius tier inside the card */
.card img {
  display: block; /* removes the baseline gap */
  border-radius: var(--radius-sm); /* nests visually inside the card's larger radius */
}

/* A row of headline numbers */
.stat-row {
  display: flex; /* numbers side by side */
  flex-wrap: wrap; /* wraps on phones instead of squeezing */
  gap: 40px; /* wide gaps so each number reads alone */
}

/* One stat: value on top, label below */
.stat {
  display: flex; /* stacks value and label */
  flex-direction: column; /* vertical */
  gap: 4px; /* tight pairing between a number and what it counts */
}

/* The number: heavy display cut so it carries weight at a moderate size */
.stat-value {
  font-size: 2.25rem; /* large enough to lead, small enough to sit in a row of four */
  font-variation-settings: "opsz" 32; /* Inter's display cut; Inter has no width axis, so the wide feel comes from its larger optical size */
  font-weight: 800; /* heavy */
  line-height: 1; /* no extra space around the number */
  letter-spacing: -0.02em; /* tightens display-size digits */
  font-variant-numeric: tabular-nums; /* digits share a width so numbers in a row feel even */
  color: var(--ink); /* primary text */
}

/* What the number counts */
.stat-label {
  font-size: 15px; /* smaller than body: it qualifies the number */
  color: var(--ink-soft); /* secondary */
}

/* --------------------------------------------------------------------------
   4. Prose (legal and policy pages)
   -------------------------------------------------------------------------- */

/* Long-form text column */
.prose {
  max-width: 72ch; /* long reading needs short lines */
}

/* Section headings inside a policy */
.prose h2 {
  margin: 2.2em 0 0.6em; /* big space above separates sections; small space below ties heading to its text */
  font-size: 1.5rem; /* clearly a heading, but far below the page title */
  font-weight: 700; /* bold heading */
  line-height: 1.25; /* compact over two lines */
  color: var(--ink); /* primary text */
}

/* Subsection headings */
.prose h3 {
  margin: 1.8em 0 0.5em; /* a little less space than h2, so the hierarchy shows in spacing too */
  font-size: 1.15rem; /* one step below h2 */
  font-weight: 650; /* between semibold and bold, one step lighter than h2 */
  line-height: 1.3; /* compact */
  color: var(--ink); /* primary text */
}

/* Body paragraphs and list items */
.prose p,
.prose li {
  color: var(--ink-soft); /* long passages in gray-600 are easier on the eye than full ink */
  line-height: 1.7; /* extra leading for dense legal text */
}

/* Paragraph spacing, since styles.css zeroes p margins */
.prose p {
  margin: 0 0 1em; /* one line of space between paragraphs */
}

/* Lists */
.prose ul,
.prose ol {
  margin: 0 0 1em; /* same gap after a list as after a paragraph */
  padding-left: 1.25em; /* just enough indent for the markers */
}

/* List items */
.prose li {
  margin: 0.35em 0; /* separates items without looking double-spaced */
}

/* Links in prose are brand blue and underlined, the non-colour cue matters in body text */
.prose a {
  color: var(--brand); /* link blue */
  text-decoration-line: underline; /* always underlined in running text */
}

/* Tables in policies, e.g. data-retention schedules */
.prose table {
  width: 100%; /* fills the column */
  margin: 1.5em 0; /* separates the table from surrounding text */
  border-collapse: collapse; /* single shared borders between cells */
  font-size: 0.9375rem; /* slightly smaller so more fits per row */
}

/* Table cells */
.prose th,
.prose td {
  padding: 10px; /* comfortable cell padding */
  border: 1px solid var(--rule); /* grid lines in the site rule colour */
  text-align: left; /* ragged-right reads better than centred text */
  vertical-align: top; /* multi-line cells start level */
}

/* Header cells get the pale brand tint */
.prose th {
  background: var(--paper-deep); /* smebank-50, same as other table headers on the site */
  color: var(--ink); /* full ink so headers lead */
  font-weight: 600; /* semibold header */
}

/* "Last updated" line under a policy title */
.prose .updated {
  font-size: 0.9375rem; /* small print */
  color: var(--ink-soft); /* secondary */
}

/* --------------------------------------------------------------------------
   5. Split, pills
   -------------------------------------------------------------------------- */

/* Text beside media; stacked on phones and tablets */
.split {
  display: grid; /* single column until 900px */
  gap: 40px; /* space between the stacked blocks */
  align-items: center; /* vertically centres text against the image when side by side */
}

/* Two columns once both halves can be readable */
@media (min-width: 900px) {
  /* Equal halves */
  .split {
    grid-template-columns: 1fr 1fr; /* text and media share the width evenly */
    gap: 56px; /* per the contract */
  }

  /* Reversed split puts the media first on desktop only, so phones always read text first */
  .split-reverse > :first-child {
    order: 2; /* moves the first child (the text) to the right-hand column */
  }
}

/* Pill list: short tags such as integrations or supported filings */
.pill-list {
  display: flex; /* pills flow in a row */
  flex-wrap: wrap; /* and wrap onto new lines */
  gap: 8px; /* tight, so they read as one group */
  margin: 0; /* ul default margin */
  padding: 0; /* ul default indent */
  list-style: none; /* no bullets; the pill shape is the marker */
}

/* One pill */
.pill-list li {
  padding: 6px 12px; /* compact chip */
  background: var(--paper-deep); /* smebank-50 tint */
  border-radius: 999px; /* full capsule, distinct from the card and button radius tiers */
  color: var(--ink); /* 16:1 on the tint */
  font-size: 14px; /* small tag text */
  line-height: 1.3; /* compact single line */
}

/* --------------------------------------------------------------------------
   6. Plan comparison table
   -------------------------------------------------------------------------- */

/* Scroll container: the table scrolls sideways inside it so the page itself never does */
.table-scroll {
  overflow-x: auto; /* horizontal scroll only when the table is wider than the screen */
  border: 1px solid var(--rule); /* frames the scrolling area so its edges are visible */
  border-radius: var(--radius-md); /* middle radius tier */
  -webkit-overflow-scrolling: touch; /* momentum scrolling on older iOS */
}

/* The wrapper has tabindex=0 so keyboard users can scroll it; the ring sits inside the rounded frame */
.table-scroll:focus-visible {
  outline: 3px solid var(--brand); /* same ring as the global focus style */
  outline-offset: 2px; /* keeps the ring clear of the border */
}

/* The comparison table itself */
.plan-table {
  width: 100%; /* fills the wrapper on wide screens */
  min-width: 560px; /* below this, columns become unreadable, so the wrapper scrolls instead */
  border-collapse: separate; /* sticky cells lose their borders under collapse in some engines */
  border-spacing: 0; /* separate borders without gaps look the same as collapsed ones */
  font-size: 0.9375rem; /* slightly smaller so four plan columns fit */
}

/* All cells */
.plan-table th,
.plan-table td {
  padding: 12px; /* per the contract */
  border-bottom: 1px solid var(--rule); /* row rules only, no vertical grid lines */
  text-align: left; /* feature names read left to right */
  vertical-align: middle; /* ticks centre against wrapped feature names */
  background: var(--paper); /* opaque, so the sticky column hides cells scrolling underneath */
}

/* The last row sits on the wrapper's bottom border, so it doesn't need its own */
.plan-table tr:last-child > * {
  border-bottom: 0; /* avoids a doubled line at the bottom edge */
}

/* Column headers (plan names) */
.plan-table thead th {
  background: var(--paper-deep); /* tinted header row, same as other tables */
  color: var(--ink); /* full ink */
  font-weight: 700; /* plan names lead */
}

/* Plan columns centre their ticks and dashes */
.plan-table td,
.plan-table thead th:not(:first-child) {
  text-align: center; /* ticks line up down the middle of each plan column */
}

/* First column stays put while plan columns scroll under it on phones */
.plan-table tr > :first-child {
  position: sticky; /* sticks to the wrapper's left edge during horizontal scroll */
  left: 0; /* the edge it sticks to */
  z-index: 1; /* above the scrolling cells */
  min-width: 160px; /* enough for a feature name on two lines */
  text-align: left; /* feature names stay left-aligned */
  font-weight: 500; /* firmer than the plan cells */
  color: var(--ink); /* full ink for the row label */
  box-shadow: 1px 0 0 var(--rule); /* a right-edge rule that travels with the sticky column */
}

/* Header cell of the sticky column keeps the header tint */
.plan-table thead tr > :first-child {
  background: var(--paper-deep); /* matches the rest of the header row */
}

/* Included: a green tick; the alt text after the slash is what screen readers announce */
.plan-table .yes::before {
  content: "✓"; /* fallback for browsers without alt-text syntax */
  content: "✓" / "Included"; /* visible tick, spoken as "Included" */
  color: var(--done); /* done green, 5.3:1 on white */
  font-weight: 700; /* a thin tick is easy to miss */
}

/* Not included: a quiet dash, spoken as "Not included" */
.plan-table .no::before {
  content: "—"; /* fallback for browsers without alt-text syntax */
  content: "—" / "Not included"; /* visible dash, spoken as "Not included" */
  color: var(--ink-soft); /* muted so the ticks carry the eye */
}