/* ============================================================
   Copyright (c) 2023-2026 HoopFrog Inc. All rights reserved.
   Created: 2026-10-23. Public About page (/about and /<lang>/about), DateSteady.
   Owner-approved copy (About_Pages_Draft_2026-10-22, sections 1-4).
   - Brand colours from the locked V3 / Sept 2026 packages only.
   - Glass (backdrop-filter) is used on the hero card ONLY.
   - The compatibility card is complete without JavaScript: every bar, the ring
     and the numbers are in their final state in the HTML. /js/about.js only adds an
     optional one-time grow-in (< 2 s) and never runs under prefers-reduced-motion.
   ============================================================ */
/* DateSteady Sept 2026 White Background Edition (locked 2026-10-14): Bronze #5E340F, Gold #D9A94F, Deep Brown #17120D, White. No retired cream. */
.ab {
  --ab-bg:#FFFFFF; --ab-bg-alt:#FDFAF7; --ab-card:#FFFFFF; --ab-ink:#17120D; --ab-text:#2D2D2D; --ab-muted:#5A4A3A;
  --ab-link:#5E340F; --ab-focus:#D9A94F; --ab-accent:#D9A94F; --ab-accent-ink:#5E340F; --ab-accent-soft:rgba(217,169,79,.16);
  --ab-rule:linear-gradient(90deg,#5E340F,#D9A94F); --ab-border:rgba(94,52,15,.14);
  --ab-btn-bg:linear-gradient(135deg,#7A4A1E 0%,#5E340F 100%); --ab-btn-shadow:0 10px 26px rgba(94,52,15,.28); --ab-btn-shadow-hi:0 14px 34px rgba(94,52,15,.36);
  --ab-hero-shade:linear-gradient(90deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.16) 45%,rgba(255,255,255,0) 70%),linear-gradient(0deg,rgba(94,52,15,.28),rgba(94,52,15,0) 50%);
  --ab-glass-bg:rgba(255,255,255,.7); --ab-glass-border:rgba(255,255,255,.75); --ab-glass-fallback:rgba(255,255,255,.95);
  --ab-photo-shadow:0 24px 60px rgba(23,18,13,.2); --ab-photo-under:linear-gradient(135deg,rgba(217,169,79,.32),rgba(217,169,79,.08));
  --ab-card-shadow:0 24px 60px rgba(94,52,15,.12);
  --ab-av-a:linear-gradient(135deg,#D9A94F,#8A5A2B); --ab-av-b:linear-gradient(135deg,#5E340F,#17120D);
  --ab-ring:#5E340F; --ab-track:#EDE7E0;
  --ab-band-strong:#5E340F; --ab-band-strong-ink:#5E340F; --ab-band-some:#B8740A; --ab-band-some-ink:#8A5A06; --ab-band-lower:#8A8F98; --ab-band-lower-ink:#5B6470;
  --ab-ready-bg:radial-gradient(120% 140% at 0% 0%,#8A5A2B 0%,#5E340F 45%,#17120D 100%); --ab-ready-glow:radial-gradient(circle,rgba(217,169,79,.5),rgba(217,169,79,0) 70%); --ab-ready-btn-ink:#5E340F;
}
html.dark-mode .ab {
  --ab-bg:#17120D; --ab-bg-alt:#120E0A; --ab-card:#221a13; --ab-ink:#F2EBE1; --ab-text:#F2EBE1; --ab-muted:#D4CABC;
  --ab-link:#E0B84D; --ab-focus:#E0B84D; --ab-accent:#D9A94F; --ab-accent-ink:#E0B84D; --ab-accent-soft:rgba(217,169,79,.14); --ab-border:#3a2e22;
  --ab-hero-shade:linear-gradient(90deg,rgba(23,18,13,.68) 0%,rgba(23,18,13,.24) 50%,rgba(23,18,13,0) 75%),linear-gradient(0deg,rgba(23,18,13,.62),rgba(23,18,13,0) 55%);
  --ab-glass-bg:rgba(23,18,13,.64); --ab-glass-border:rgba(255,255,255,.12); --ab-glass-fallback:rgba(23,18,13,.95);
  --ab-photo-shadow:0 24px 60px rgba(0,0,0,.5); --ab-photo-under:linear-gradient(135deg,rgba(217,169,79,.2),rgba(217,169,79,.04));
  --ab-card-shadow:0 24px 60px rgba(0,0,0,.4); --ab-av-b:linear-gradient(135deg,#4a3b2c,#2B2119);
  --ab-ring:#D9A94F; --ab-track:#3a2e22;
  --ab-band-strong:#D9A94F; --ab-band-strong-ink:#E0B84D; --ab-band-some:#B8740A; --ab-band-some-ink:#EFA25F; --ab-band-lower:#8A8F98; --ab-band-lower-ink:#C3C7CF;
  --ab-ready-bg:radial-gradient(120% 140% at 0% 0%,#5E340F 0%,#3A2410 50%,#17120D 100%);
}

body { margin: 0; }
.ab { background: var(--ab-bg); color: var(--ab-text); font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; overflow-x: clip; }
.ab * { box-sizing: border-box; }
.ab-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ab p { margin: 0 0 1rem; line-height: 1.7; font-size: 1.0625rem; color: var(--ab-text); overflow-wrap: anywhere; }
.ab h1, .ab h2 { color: var(--ab-ink); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.ab a:not(.ab-btn) { color: var(--ab-link); text-underline-offset: 3px; }
.ab a:focus-visible, .ab .ab-btn:focus-visible { outline: 3px solid var(--ab-focus); outline-offset: 3px; border-radius: 8px; }

/* ── buttons ─────────────────────────────────────────────── */
.ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .85rem 1.6rem; border-radius: 999px;
  background: var(--ab-btn-bg); color: #fff; font-weight: 700; font-size: 1.05rem; text-decoration: none; letter-spacing: .005em;
  box-shadow: var(--ab-btn-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.ab-btn:hover { transform: translateY(-1px); box-shadow: var(--ab-btn-shadow-hi); }
.ab-btn::after { content: ''; width: .55em; height: .55em; border-right: 2.5px solid currentColor; border-top: 2.5px solid currentColor; transform: rotate(45deg); margin-left: .1rem; }

/* ── hero (the only glass on the page) ───────────────────── */
.ab-hero { position: relative; isolation: isolate; min-height: min(84vh, 760px); display: flex; align-items: flex-end; }
.ab-hero__media, .ab-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-hero__media { z-index: -2; margin: 0; }
.ab-hero__media img { object-fit: cover; object-position: center 35%; display: block; }
.ab-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ab-hero-shade); }
.ab-hero__inner { padding-top: 96px; padding-bottom: 64px; }
.ab-glass { max-width: 600px; padding: 36px 36px 32px; border-radius: 28px;
  background: var(--ab-glass-bg); border: 1px solid var(--ab-glass-border);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 30px 80px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35); }
.ab-glass h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.04; margin-bottom: 18px; }
.ab-glass h1 .ab-accent, .ab-h1-accent { color: var(--ab-accent-ink); }
.ab-lede { font-size: 1.14rem !important; line-height: 1.65 !important; color: var(--ab-text) !important; }
.ab-welcome { font-weight: 650; color: var(--ab-ink) !important; display: flex; gap: .6rem; align-items: flex-start; }
.ab-welcome::before { content: ''; flex: none; width: 10px; height: 10px; margin-top: .55em; border-radius: 50%; background: var(--ab-accent); box-shadow: 0 0 0 5px var(--ab-accent-soft); }
.ab-glass .ab-btn { margin-top: 8px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ab-glass { background: var(--ab-glass-fallback); } }

/* ── chapters ─────────────────────────────────────────────── */
.ab-ch { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.ab-ch--alt { background: var(--ab-bg-alt); }
.ab-num { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--ab-accent-soft); color: var(--ab-accent-ink); font-weight: 800; font-size: .85rem; letter-spacing: .08em; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.ab-ch h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12; margin-bottom: 22px; }
.ab-ch h2::after { content: ''; display: block; width: 56px; height: 4px; border-radius: 4px; margin-top: 16px; background: var(--ab-rule); }
.ab-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ab-split--flip .ab-text { order: 2; }
.ab-fig { margin: 0; position: relative; isolation: isolate; }
.ab-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 26px; box-shadow: var(--ab-photo-shadow); }
.ab-fig::before { content: ''; position: absolute; z-index: -1; inset: 18px -18px -18px 18px; border-radius: 30px; background: var(--ab-photo-under); }
.ab-split--flip .ab-fig::before { inset: 18px 18px -18px -18px; }
.ab-text { min-width: 0; }
.ab-solo .ab-text { max-width: 760px; }

/* compatibility chapter */
.ab-compat { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: start; }

/* trust chapter: two columns of reading text, the last paragraph as a plain note */
.ab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 56px); }
.ab-note { border-top: 1px solid var(--ab-border); padding-top: 1rem; color: var(--ab-muted) !important; }
.ab-trust-head { max-width: 760px; }

/* closing band */
.ab-ready { padding: clamp(64px, 9vw, 112px) 0; background: var(--ab-ready-bg); color: #fff; text-align: center; position: relative; overflow: hidden; }
.ab-ready::before { content: ''; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: var(--ab-ready-glow); filter: blur(10px); pointer-events: none; }
.ab-ready h2 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 16px; }
.ab-ready p { color: rgba(255,255,255,.92) !important; max-width: 640px; margin-left: auto; margin-right: auto; }
.ab-ready .ab-btn { background: #fff; color: var(--ab-ready-btn-ink); box-shadow: 0 14px 34px rgba(0,0,0,.22); margin: 10px 0 26px; }
.ab-ready .ab-small { font-size: .98rem; }
.ab-ready .ab-small a { color: #fff !important; font-weight: 600; }
.ab-ready a:focus-visible, .ab-ready .ab-btn:focus-visible { outline-color: #fff; }

/* ── compatibility card (static source of truth) ─────────── */
.cx { margin: 0; }
.cx-card { background: var(--ab-card); border: 1px solid var(--ab-border); border-radius: 26px; padding: 28px; box-shadow: var(--ab-card-shadow); }
.cx-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 26px; }
.cx-person { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.cx-av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.35rem; color: #fff; background: var(--ab-av-a); box-shadow: 0 0 0 4px var(--ab-card), 0 0 0 6px var(--ab-accent-soft); }
.cx-av--b { background: var(--ab-av-b); }
.cx-name { font-size: .95rem; font-weight: 650; color: var(--ab-ink); overflow-wrap: anywhere; }
@property --cxp { syntax: '<number>'; inherits: true; initial-value: 0; }
.cx-ring { --cxp: var(--p); width: 148px; height: 148px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative;
  background: conic-gradient(var(--ab-ring) calc(var(--cxp) * 1%), var(--ab-track) 0); }
.cx-ring::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--ab-card); }
.cx-ring > span { position: relative; display: block; }
.cx-score { font-size: 2.35rem; font-weight: 800; line-height: 1; color: var(--ab-ink); font-variant-numeric: tabular-nums; }
.cx-word { font-size: .8rem; font-weight: 600; color: var(--ab-muted); margin-top: 4px; max-width: 100px; overflow-wrap: anywhere; }
.cx-ringwrap { display: flex; flex-direction: column; align-items: center; }
.cx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.cx-row { margin-bottom: 16px; min-width: 0; }
.cx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.cx-lbl { font-weight: 650; color: var(--ab-ink); font-size: .98rem; overflow-wrap: anywhere; min-width: 0; }
.cx-pct { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-track { height: 10px; border-radius: 999px; background: var(--ab-track); overflow: hidden; }
.cx-fill { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: 999px; transform-origin: left center; }
.cx-band { display: block; font-size: .85rem; font-weight: 600; margin-top: 5px; }
.cx-strong .cx-fill { background: var(--ab-band-strong); } .cx-strong .cx-pct, .cx-strong .cx-band { color: var(--ab-band-strong-ink); }
.cx-some .cx-fill { background: var(--ab-band-some); }     .cx-some .cx-pct, .cx-some .cx-band { color: var(--ab-band-some-ink); }
.cx-lower .cx-fill { background: var(--ab-band-lower); }   .cx-lower .cx-pct, .cx-lower .cx-band { color: var(--ab-band-lower-ink); }
.cx-key { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 0 4px; margin-top: 4px; border-top: 1px solid var(--ab-border); font-size: .9rem; color: var(--ab-text); }
.cx-key span { display: inline-flex; align-items: center; gap: 8px; }
.cx-key i { width: 22px; height: 8px; border-radius: 999px; display: inline-block; }
.cx-key .k-strong { background: var(--ab-band-strong); } .cx-key .k-some { background: var(--ab-band-some); } .cx-key .k-lower { background: var(--ab-band-lower); }
.ab .cx-weight { font-size: .98rem; color: var(--ab-muted); margin: 12px 0 0; }
.ab .cx-limit { font-size: 1.0625rem; color: var(--ab-text); margin: 14px 0 0; }
.cx-limit strong { color: var(--ab-ink); font-weight: 700; }
.cx figcaption, .cx-cap { margin-top: 14px; font-size: .95rem; color: var(--ab-muted); text-align: center; font-style: italic; }

/* optional grow-in, armed by /js/about.js only when the card starts off screen */
.cx-armed .cx-fill { transform: scaleX(0); }
.cx-armed .cx-ring { --cxp: 0; }
.cx-armed .cx-score { opacity: 0; }
.cx-run .cx-fill { animation: cxGrow 1.1s cubic-bezier(.2,.7,.2,1) both; }
.cx-run .cx-col:first-child .cx-row:nth-child(2) .cx-fill { animation-delay: .08s; }
.cx-run .cx-col:first-child .cx-row:nth-child(3) .cx-fill { animation-delay: .16s; }
.cx-run .cx-col:last-child .cx-row:nth-child(1) .cx-fill { animation-delay: .24s; }
.cx-run .cx-col:last-child .cx-row:nth-child(2) .cx-fill { animation-delay: .32s; }
.cx-run .cx-col:last-child .cx-row:nth-child(3) .cx-fill { animation-delay: .40s; }
.cx-run .cx-ring { animation: cxRing 1.3s cubic-bezier(.2,.7,.2,1) both; }
.cx-run .cx-score { animation: cxFade .6s ease .5s both; }
@keyframes cxGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cxRing { from { --cxp: 0; } to { --cxp: var(--p); } }
@keyframes cxFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ab-btn { transition: none; }
  .ab-btn:hover { transform: none; }
  .cx-armed .cx-fill, .cx-run .cx-fill { transform: none; animation: none; }
  .cx-armed .cx-ring, .cx-run .cx-ring { --cxp: var(--p); animation: none; }
  .cx-armed .cx-score, .cx-run .cx-score { opacity: 1; animation: none; }
}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .ab-split, .ab-compat { grid-template-columns: 1fr; }
  .ab-split--flip .ab-text { order: 0; }
  .ab-fig { max-width: 640px; }
}
@media (max-width: 700px) {
  .ab-wrap { padding: 0 18px; }
  .ab-hero { display: block; min-height: 0; }
  .ab-hero::before { display: none; }
  .ab-hero__media { position: relative; inset: auto; height: auto; }
  .ab-hero__media img { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5; max-height: 72vh; }
  .ab-hero__inner { padding-top: 0; padding-bottom: 40px; margin-top: -110px; position: relative; }
  .ab-glass { padding: 26px 22px 24px; border-radius: 24px; }
  .ab-cols { grid-template-columns: 1fr; }
  .ab-fig::before { inset: 12px -8px -12px 12px; }
  .ab-split--flip .ab-fig::before { inset: 12px 12px -12px -8px; }
  .cx-card { padding: 20px 18px; }
  .cx-ring { width: 124px; height: 124px; }
  .cx-score { font-size: 2rem; }
  .cx-av { width: 52px; height: 52px; font-size: 1.15rem; }
}
@media (max-width: 400px) {
  .cx-grid { grid-template-columns: 1fr; }
}