/* AI4Sci landing and access page.

   Design read: a product landing for research-office staff and lab PIs in
   China, in the light Chinese enterprise-cloud language of the WhiteMatrix
   enterprise-antislop page (its tokens copied below). ENERGY 2 / RHYTHM 3 /
   MOTION 1 (hover and focus only; the page ships no JS).

   Palette: neutrals, one blue (#1664ff: the header CTA, the selected cell of
   the matrix mark, chips, the closing plate) and ink for the hero CTA. Amber
   marks demo data only. No gradients, no glow, no glass.
   Radius scale: 4 chips and tags, 8 buttons, 12 cards and panels.
   Type: system faces only, because the page must make no external request
   (mainland China blocks many font CDNs); PingFang SC, Hiragino Sans GB,
   Microsoft YaHei and Noto Sans CJK SC carry the Chinese on each OS.
   Breakpoints sit where the content stops fitting: 640, 960. */

:root {
  color-scheme: light dark;
  --bg: #fff;
  --alt: #f5f7fb;
  --panel: #fff;
  --border: #e5e6eb;
  --border-strong: #c9cdd4;
  --text: #1d2129;
  --text-2: #4e5969;
  --muted: #5b6676;
  --numeral: #636b77;
  --field-border: #7b8592;
  --primary: #1664ff;
  --primary-hover: #0e4fd6;
  --primary-ink: #0e4fd6;
  --tint: #e8f0ff;
  --tint-ink: #0b47c2;
  --ink-btn: #0b0c0f;
  --ink-btn-hover: #2a2d35;
  --ink-btn-text: #fff;
  --plate: #0e4fd6;
  --plate-text: #fff;
  --plate-soft: #dce7ff;
  --plate-rule: rgba(255, 255, 255, 0.4);
  --sample-bg: #fff4e0;
  --sample-ink: #8a4b00;
  --matrix-off: #86909c;
  --shadow: 0 12px 24px rgba(29, 33, 41, 0.08);
  --gutter: 16px;
  --header: 60px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1117;
    --alt: #151a22;
    --panel: #12161d;
    --border: #262c36;
    --border-strong: #3a424f;
    --text: #e7e9ee;
    --text-2: #b6bdc8;
    --muted: #9ba4b1;
    --numeral: #8d97a5;
    --field-border: #6b7480;
    --primary: #1664ff;
    --primary-hover: #3d7bff;
    --primary-ink: #7aa5ff;
    --tint: #1a2a4a;
    --tint-ink: #b5ccff;
    --ink-btn: #e7e9ee;
    --ink-btn-hover: #ffffff;
    --ink-btn-text: #0e1117;
    --plate: #0e4fd6;
    --sample-bg: #3a2a10;
    --sample-ink: #ffd699;
    --matrix-off: #5b6676;
    --shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  }
}

@media (min-width: 640px) {
  :root { --gutter: 32px; --header: 64px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
}
@media (min-width: 640px) { body { font-size: 16px; } }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--primary-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 8px; background: var(--ink-btn); color: var(--ink-btn-text);
}
.skip:focus { top: 12px; }

.container { width: calc(100% - 2 * var(--gutter)); max-width: 1200px; margin-inline: auto; }

/* ---------- Type ---------- */
.h1 { font-size: clamp(30px, 6vw, 56px); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.h2 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.32; font-weight: 600; text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; }
q { quotes: "「" "」"; color: var(--text); }
.keep { display: inline-block; }
.en { font-size: 13px; font-weight: 500; color: var(--muted); }

/* The identity motif, taken from the reference: a 3x3 matrix with one solid
   cell. In a section eyebrow, section n lights cell n, so it doubles as
   wayfinding. */
.matrix { flex: none; }
.matrix rect { fill: var(--matrix-off); }
.matrix rect.on { fill: var(--primary); }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--text-2); }
.eyebrow .en { font-weight: 500; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 20px; border-radius: 8px; border: 1px solid transparent;
  font-size: 15px; font-weight: 500; line-height: 1.3; text-align: center;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn-lg { min-height: 48px; padding: 0 28px; font-size: 16px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #0e4fd6; }
.btn-ink { background: var(--ink-btn); color: var(--ink-btn-text); }
.btn-ink:hover { background: var(--ink-btn-hover); }
.btn-ghost { background: var(--panel); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--text); }
.btn-white { background: #fff; color: #0e4fd6; }
.btn-white:hover { background: #e8f0ff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn-outline-white:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.plate :focus-visible { outline-color: #fff; }

/* Text links are ink with a blue underline, so solid blue stays for actions. */
.text-link {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.text-link:hover { color: var(--primary-ink); }

/* Demo-data tag: amber is a status colour, used only to say "this is demo data". */
.sample-tag { display: inline-block; padding: 0 8px; font-size: 12px; line-height: 24px; font-weight: 500; color: var(--sample-ink); background: var(--sample-bg); border-radius: 4px; white-space: nowrap; }

/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); }
.wordmark-cn { font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; }
.wordmark-en { display: none; font-size: 12px; line-height: 1.2; color: var(--muted); font-weight: 500; padding-left: 8px; border-left: 1px solid var(--border-strong); }
@media (min-width: 480px) { .wordmark-en { display: inline; } }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); }
.header-bar { height: var(--header); display: flex; align-items: center; gap: 24px; }
.header .wordmark { margin-right: auto; }
.nav { display: none; }
.header .btn { min-height: 40px; padding: 0 16px; }
@media (min-width: 960px) {
  .header .wordmark { margin-right: 0; }
  .nav { display: flex; height: 100%; margin-right: auto; }
  .nav ul { display: flex; align-items: stretch; gap: 4px; }
  .nav a { display: inline-flex; align-items: center; height: 100%; padding: 0 14px; font-size: 15px; }
  .nav a:hover { color: var(--primary-ink); }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(40px, 7vw, 88px); }
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-sub { margin-top: 20px; max-width: 680px; color: var(--text-2); font-size: clamp(15px, 1.6vw, 17px); text-wrap: pretty; }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 28px; }
.hero-note { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* The hero's second layer is a flat tinted band holding one demo exchange,
   so the ink CTA above stays the only dark mass. */
.hero-band { margin-top: clamp(32px, 5vw, 56px); padding-block: clamp(24px, 4vw, 48px); background: var(--alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hero-band-grid { display: grid; gap: 24px; }
.hero-band-copy h2 { font-size: 20px; line-height: 1.5; font-weight: 600; }
.hero-band-copy p { margin-top: 8px; font-size: 15px; color: var(--text-2); }
.hero-band-copy ul { margin-top: 16px; border-top: 1px solid var(--border-strong); }
.hero-band-copy li { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.6; }
@media (min-width: 960px) {
  .hero-band-grid { grid-template-columns: 4fr 7fr; gap: 64px; align-items: center; }
}

/* ---------- Demo mock: one exchange from the presenter script ---------- */
/* It overlays the band like a window, so it is one of the two shadows. */
.mock { min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.mock-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.mock-head strong { display: block; font-size: 15px; line-height: 1.4; }
.mock-head em { display: block; font-style: normal; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.mock-body { display: grid; gap: 16px; padding: 16px; }
.msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1; background: var(--alt); border: 1px solid var(--border); color: var(--text); }
.msg-user .avatar { background: var(--ink-btn); color: var(--ink-btn-text); border-color: transparent; }
.msg-who { font-size: 13px; font-weight: 600; line-height: 1.5; }
.msg-who span { margin-left: 6px; font-weight: 400; color: var(--muted); }
.msg-text { font-size: 15px; line-height: 1.7; }
.steps-done { margin: 4px 0 6px; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.steps-done li { display: inline-flex; align-items: center; gap: 6px; }
.steps-done li::before { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--primary-ink); border-bottom: 2px solid var(--primary-ink); transform: rotate(-45deg) translateY(-2px); }
.chip { display: inline-block; padding: 0 6px; margin: 0 1px; border-radius: 4px; background: var(--tint); color: var(--tint-ink); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.6; }
.mini-table { margin-top: 8px; width: 100%; max-width: 360px; border-collapse: collapse; font-size: 13px; line-height: 1.6; border: 1px solid var(--border); border-radius: 8px; }
.mini-table th, .mini-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.mini-table thead th { font-weight: 500; color: var(--text-2); background: var(--alt); }
.mini-table tbody tr:last-child > * { border-bottom: 0; }
.mini-table td:last-child, .mini-table th:last-child { text-align: right; }
.handoff { margin-top: 8px; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: 14px; font-weight: 500; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section-alt { background: var(--alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.head { margin-bottom: clamp(28px, 4vw, 48px); }
.head-intro { margin-top: 12px; color: var(--text-2); max-width: 720px; text-wrap: pretty; }
.head-split { display: grid; gap: 12px; }
@media (min-width: 960px) {
  .head-split { grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
  .head-split .head-intro { margin-top: 0; }
}

/* ---------- 01 Scenarios: two cards that differ by what each pack shows ---------- */
.packs { display: grid; gap: 20px; }
@media (min-width: 960px) { .packs { grid-template-columns: 1fr 1fr; gap: 24px; } }
.pack { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
@media (min-width: 640px) { .pack { padding: 32px; } }
.pack-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.pack-label .en { margin-left: 8px; }
.pack-name { margin-top: 4px; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.3; font-weight: 600; }
.pack-tag { margin-top: 4px; font-size: 15px; color: var(--text-2); }
.pack-desc { margin-top: 16px; font-size: 15px; }
.agents { margin-top: 16px; display: grid; gap: 0; border-top: 1px solid var(--border); }
.agents li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.6; }
.agents b { font-weight: 600; }
.agents span { color: var(--text-2); }

.pack-visual { margin-top: 24px; padding: 16px; border-radius: 8px; background: var(--alt); border: 1px solid var(--border); }
.pack-visual-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.pack-visual-head h4 { font-size: 15px; font-weight: 600; line-height: 1.5; }
.pack-visual-note { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--text-2); }

/* Pack A: the five research stages as a row of stations with their counts. */
.stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--primary); }
.stages li { padding: 10px 6px 0 0; }
.stages li + li { padding-left: 8px; border-left: 1px solid var(--border-strong); }
.stage-name { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; }
.stage-count { display: block; margin-top: 2px; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; }
.stage-unit { display: block; font-size: 12px; line-height: 1.4; color: var(--text-2); }

/* Pack B: the reverse timeline counted back from the school deadline. */
.timeline li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.6; }
.timeline li:last-child { border-bottom: 0; }
.timeline time { font-variant-numeric: tabular-nums; font-weight: 600; }
.timeline .key { color: var(--primary-ink); }

.tries { margin-top: 24px; }
.tries h4 { font-size: 14px; font-weight: 600; color: var(--text-2); }
.tries li { position: relative; padding: 6px 0 6px 18px; font-size: 15px; line-height: 1.65; }
.tries li::before { content: ""; position: absolute; left: 2px; top: 0.95em; width: 6px; height: 6px; border-radius: 1px; background: var(--muted); }
.pack-cta { margin-top: auto; padding-top: 24px; }

/* ---------- Guarantees: a ruled strip in place of a stats row ---------- */
.guarantees { padding-block: clamp(48px, 6vw, 80px); }
.guarantees .eyebrow { margin-bottom: 20px; }
.rules { display: grid; gap: 0; border-top: 2px solid var(--text); }
.rules li { padding: 20px 0; border-bottom: 1px solid var(--border); }
.rules h3 { font-size: clamp(18px, 2vw, 21px); line-height: 1.45; font-weight: 600; }
.rules h3 .en { display: block; margin-top: 2px; }
.rules p { margin-top: 8px; font-size: 15px; line-height: 1.75; color: var(--text-2); }
@media (min-width: 960px) {
  .rules { grid-template-columns: repeat(3, 1fr); }
  .rules li { padding: 28px 28px 28px 0; border-bottom: 0; }
  .rules li + li { padding-left: 28px; border-left: 1px solid var(--border); }
}

/* ---------- 02 How it works: intro pinned on the left, steps read down ---------- */
.flow-grid { display: grid; gap: 32px; }
@media (min-width: 960px) {
  .flow-grid { grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
  .flow-intro { position: sticky; top: calc(var(--header) + 32px); }
}
.limits { margin-top: 28px; padding: 20px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.limits h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; font-weight: 600; line-height: 1.5; }
.limits li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.7; color: var(--text-2); }
.limits li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps { border-bottom: 1px solid var(--border-strong); }
.step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid var(--border-strong); }
@media (min-width: 640px) { .step { grid-template-columns: 64px minmax(0, 1fr); } }
.step-num { font-variant-numeric: tabular-nums; font-size: 28px; line-height: 1.2; font-weight: 600; color: var(--numeral); }
.step h3 { font-size: 18px; line-height: 1.5; font-weight: 600; }
.step h3 .en { margin-left: 10px; }
.step p { margin-top: 4px; font-size: 15px; line-height: 1.75; color: var(--text-2); }

/* ---------- 03 Sample data ---------- */
.data-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.data-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.data-head strong { font-size: 15px; line-height: 1.4; }
.data-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.data-table th, .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; white-space: nowrap; }
.data-table thead th { font-size: 13px; font-weight: 500; color: var(--text-2); background: var(--alt); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table .pce { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.data-table .rank { width: 3em; color: var(--numeral); font-variant-numeric: tabular-nums; }
.data-note { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.7; color: var(--text-2); }
@media (max-width: 639px) {
  .data-table th, .data-table td { padding: 10px 12px; }
  .data-table .rank { display: none; }
}

/* ---------- Closing CTA: the single large blue surface ---------- */
.cta-section { padding-block: clamp(32px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.plate { display: grid; gap: 32px; padding: 32px 24px; border-radius: 12px; color: var(--plate-text); background: var(--plate); }
.plate h2 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.35; font-weight: 600; text-wrap: balance; }
.plate p { margin-top: 12px; font-size: 16px; max-width: 520px; text-wrap: pretty; }
.plate-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.contact { display: grid; align-self: center; }
.contact > div { padding: 14px 0; border-top: 1px solid var(--plate-rule); }
.contact dt { font-size: 13px; line-height: 1.5; color: var(--plate-soft); }
.contact dd { margin-top: 2px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.contact dd a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) { .plate { padding: 48px; } }
@media (min-width: 960px) { .plate { grid-template-columns: 1.3fr 1fr; gap: 64px; padding: 64px; } }

/* ---------- Footer: one row per link group ---------- */
.footer { background: var(--alt); border-top: 1px solid var(--border); padding-top: clamp(36px, 5vw, 56px); }
.footer-main { display: grid; gap: 28px; }
@media (min-width: 960px) { .footer-main { grid-template-columns: 1fr 1.3fr; gap: 64px; } }
.footer-brand p { margin-top: 10px; font-size: 14px; color: var(--text-2); }
.footer-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; padding: 6px 0; border-top: 1px solid var(--border); }
.footer-row:last-child { border-bottom: 1px solid var(--border); }
.footer-row h2 { font-size: 14px; font-weight: 600; line-height: 44px; }
.footer-row ul { display: flex; flex-wrap: wrap; column-gap: 20px; }
.footer-row a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--text-2); }
.footer-row a:hover { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal { margin-top: 32px; padding: 20px 0 32px; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 13px; color: var(--muted); }

/* ---------- Access page ---------- */
.access-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--alt); }
.access-main { flex: 1; display: grid; place-items: center; padding: 32px var(--gutter) 48px; }
.access-card { width: 100%; max-width: 420px; padding: 28px 24px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
@media (min-width: 640px) { .access-card { padding: 40px; } }
.access-card h1 { margin-top: 20px; font-size: 24px; line-height: 1.35; font-weight: 600; }
.access-card > p { margin-top: 8px; font-size: 15px; color: var(--text-2); }
.access-form { margin-top: 24px; display: grid; gap: 8px; }
.access-form label { font-size: 14px; font-weight: 600; }
.access-form input[type="text"] {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--field-border);
  background: var(--bg); color: var(--text); font: inherit; font-size: 16px; letter-spacing: 0.04em;
}
.access-form input[type="text"]:hover { border-color: var(--text-2); }
.access-form input[type="text"]:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 1px; border-color: var(--primary-ink); }
.access-form input[aria-invalid="true"] { border-color: #c03030; }
.access-form .btn { margin-top: 8px; width: 100%; }
.access-error { padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.6; color: #8f1d1d; background: #fde8e8; border: 1px solid #f2b8b8; }
@media (prefers-color-scheme: dark) {
  .access-form input[aria-invalid="true"] { border-color: #ff8a8a; }
  .access-error { color: #ffd0d0; background: #3a1616; border-color: #6b2a2a; }
}
.access-foot { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.access-foot a { text-decoration: underline; text-underline-offset: 3px; }
.access-foot a:hover { color: var(--primary-ink); }
.access-foot p + p { margin-top: 4px; }
.access-foot .text-link { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}