/*
 * The age-assurance hub and its market pages.
 *
 * Consumes the scene kit and house style. The flow - one scene, one screen -
 * comes from .srk-flow; the chevron and the page metrics from scene-flow.js.
 *
 * The typographic job here is different from every other page on the site.
 * These are pages a compliance lead forwards to a lawyer, so the things that
 * usually get set small - the citation, the date, the exact instrument name -
 * are the content, and they are set to be read rather than to be got past.
 */

/* On :root, never the body class: the journey engine writes --srk-accent-live
   inline on <html> and a body-class declaration would silently beat it for the
   whole subtree. Enqueued only for this template. */
:root {
  --srk-accent-live: #4D8AFF;
}

.srm-page .srm-narrow {
  max-width: 820px;
  margin-inline: 0;
}

.srm-page .srm-hero h1 {
  /*
   * THE REFERENCE HERO SCALE. Rohan, 2026-09-02, item 1.4: "The KYC page hero
   * is the reference ... Bring every other page hero to that scale", and at
   * 2.10b and 2.11 he named the two pages that were visibly oversized.
   *
   * Measured at 1440 before this: KYC and every industry page 60px, every
   * product page 62px, and FOUR pages at 93.6px. --srk-display-l is
   * clamp(44px, 6.5vw, 96px), so at 1440 it lands 56 per cent above the
   * reference, which is what "too large" looked like.
   *
   * The product pages had already made this move (see the note beside
   * .srm-hero h1); these four were left behind. --srk-display-m is
   * clamp(32px, 4.6vw, 62px), which is 62px at 1440, within 3 per cent of the
   * KYC reference and an existing token rather than a new number.
   */
  font-size: var(--srk-display-m);
  max-width: 18ch;
}

.srm-page .srk-scene h2 {
  font-size: var(--srk-display-m);
  margin-bottom: 0.5em;
}

/* ---------------------------------------------------------------------------
   The as-at flag
   ------------------------------------------------------------------------ */

/*
 * Visible, in the hero, not in the footer.
 *
 * A regulatory claim with no date is worthless, and a page that carries its
 * date quietly at the bottom is asking the reader to take the top on trust.
 * research/seo.md argues the same thing from the other direction: in a market
 * defined by moving deadlines, a visible "as at" is both honest and a freshness
 * signal.
 */
.srm-page .srm-asat-flag {
  margin-top: 1.6em;
  padding-top: 0.9em;
  border-top: 1px solid var(--srh-hairline);
  color: var(--srh-ink-soft);
  font-size: var(--srk-body);
  max-width: 40ch;
}

.srm-page .srm-asat-flag strong {
  color: var(--srh-pale);
}

/* ---------------------------------------------------------------------------
   The hub's market cards
   ------------------------------------------------------------------------ */

.srm-page .srm-cards {
  list-style: none;
  margin: clamp(26px, 4vh, 46px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
}

@media (min-width: 800px) {
  .srm-page .srm-cards { grid-template-columns: repeat(2, 1fr); }
}

.srm-page .srm-card { margin: 0; }

.srm-page .srm-card a {
  display: block;
  height: 100%;
  padding: clamp(22px, 2.8vw, 34px);
  border: 1px solid var(--srh-hairline);
  border-radius: var(--srh-radius, 16px);
  background: var(--srh-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms var(--srk-ease, ease), background 200ms var(--srk-ease, ease);
}

.srm-page .srm-card a:hover,
.srm-page .srm-card a:focus-visible {
  border-color: var(--srk-accent-live, var(--srh-accent));
  background: var(--srh-surface-lift);
}

.srm-page .srm-card-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
  border: 1px solid var(--srh-hairline);
  border-radius: 999px;
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.srm-page .srm-card h3 {
  font-size: clamp(21px, 1.9vw, 27px);
  color: var(--srh-pale);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

.srm-page .srm-card p {
  margin: 0 0 1em;
  color: var(--srh-ink-soft);
  max-width: 46ch;
}

.srm-page .srm-card-go {
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: var(--srk-body);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Facts, stats and notes
   ------------------------------------------------------------------------ */

.srm-page .srm-facts {
  margin: clamp(24px, 4vh, 44px) 0 0;
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}

@media (min-width: 760px) {
  .srm-page .srm-facts { grid-template-columns: repeat(2, 1fr); }
}

.srm-page .srm-fact {
  padding-top: clamp(14px, 2vh, 18px);
  border-top: 1px solid var(--srh-hairline);
}

.srm-page .srm-fact dt {
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: var(--srk-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.6em;
}

.srm-page .srm-fact dd {
  margin: 0;
  color: var(--srh-ink);
  max-width: 52ch;
}

.srm-page .srm-stats {
  list-style: none;
  margin: clamp(24px, 4vh, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(22px, 3vw, 40px);
}

@media (min-width: 860px) {
  .srm-page .srm-stats { grid-template-columns: repeat(3, 1fr); }
}

.srm-page .srm-stat { margin: 0; }

/*
 * The number is the headline here, so it is set at display size. These are the
 * figures a reader repeats to their board: 90+ investigations, 69 million
 * checks, A$49.5m. Tabular figures so a column of them lines up.
 */
.srm-page .srm-stat-n {
  display: block;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--srh-pale);
  font-variant-numeric: tabular-nums;
}

.srm-page .srm-stat-u {
  display: block;
  margin: 0.5em 0 0.9em;
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: var(--srk-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.srm-page .srm-stat p {
  margin: 0;
  color: var(--srh-ink-soft);
  max-width: 38ch;
}

.srm-page .srm-meaning {
  margin-top: clamp(26px, 4vh, 44px);
  padding-top: clamp(18px, 2.6vh, 28px);
  border-top: 1px solid var(--srh-hairline);
}

.srm-page .srm-notes {
  margin: clamp(24px, 4vh, 44px) 0 0;
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}

.srm-page .srm-notes dt {
  color: var(--srh-pale);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.4em;
}

.srm-page .srm-notes dd {
  margin: 0;
  color: var(--srh-ink-soft);
  max-width: 62ch;
}

/* ---------------------------------------------------------------------------
   Sources
   ------------------------------------------------------------------------ */

/*
 * Set to be READ, not to be got past.
 *
 * On a regulatory page the citations are the content: a compliance lead
 * checking whether we understand their obligation is checking exactly this
 * list. Small print here would be the page undermining its own argument.
 */
.srm-page .srm-sources {
  margin-top: clamp(20px, 3vh, 32px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--srh-hairline);
  border-radius: var(--srh-radius, 16px);
  background: var(--srh-surface);
}

.srm-page .srm-sources h3 {
  font-size: var(--srk-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--srk-accent-live, var(--srh-accent));
  margin: 0 0 1em;
}

.srm-page .srm-asat {
  margin: 0 0 1.4em;
  color: var(--srh-ink-soft);
  max-width: 60ch;
}

.srm-page .srm-asat strong { color: var(--srh-pale); }

.srm-page .srm-sources ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9em;
}

.srm-page .srm-sources li {
  padding-left: 1.2em;
  position: relative;
  color: var(--srh-ink);
}

.srm-page .srm-sources li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--srk-accent-live, var(--srh-accent));
}

.srm-page .srm-sources a {
  color: var(--srh-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--srh-hairline);
}

.srm-page .srm-sources a:hover,
.srm-page .srm-sources a:focus-visible {
  color: var(--srh-pale);
  text-decoration-color: var(--srk-accent-live, var(--srh-accent));
}

.srm-page .srm-proof {
  margin-top: clamp(22px, 3vh, 34px);
  padding-top: clamp(18px, 2.6vh, 26px);
  border-top: 1px solid var(--srh-hairline);
}

.srm-page .srm-proof p {
  margin: 0 0 1em;
  color: var(--srh-ink);
  max-width: 52ch;
}

/* ---------------------------------------------------------------------------
   THE HERO PAIR, BORROWED FROM THE INDUSTRY PAGES
   ---------------------------------------------------------------------------
   industry.css draws it and inc/enqueue.php loads that file here for this one
   reason. The only thing this page owes it is the seam: on an industry page the
   pair is a grid item and .srin-hero-inner's own gap separates it from the copy,
   and here it is a sibling in a plain box, so the space has to be asked for.
   ------------------------------------------------------------------------ */

.srm-page .srin-hero-pair { margin-top: clamp(30px, 4.4vh, 56px); }

/* ---------------------------------------------------------------------------
   THE PRODUCT CARD ROW
   ---------------------------------------------------------------------------
   The same card as the market row, minus the rank. .srm-card-rank is what
   reserves the space a big number sits in, and these three are not ranked, so
   the padding that held it comes back.
   ------------------------------------------------------------------------ */

.srm-page .srm-cards--products .srm-card a { padding-left: clamp(20px, 2vw, 30px); }