/* =================================================================
   AI Product detail page — shared styles
   Used by /AICenter/center/*.html  (healthcare-ai, etc.)
   ================================================================= */

/* ---------- product hero ---------- */
.product-hero {
  padding-top: calc(var(--nav-h) + var(--space-16));
  padding-bottom: var(--space-12);
  position: relative;
  overflow: hidden;
}
.product-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% -10%, rgba(133, 194, 38, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(37, 99, 235, 0.08), transparent 60%);
  pointer-events: none;
}
.product-hero > * { position: relative; }
.product-hero h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); margin-bottom: var(--space-5); letter-spacing: -0.035em; }
.product-hero .lede { color: var(--text-dim); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 42rem; margin: 0 0 var(--space-8); line-height: 1.5; }
.product-hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-12); }
.product-hero-media {
  margin: 0 auto;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--bg-card-alt);
}
.product-hero-media img { width: 100%; height: auto; display: block; }

/* ---------- pains (3 cards) ---------- */
.pains { padding: var(--space-20) 0; }
.pains h2 { max-width: 22ch; }
.pains .bento { margin-top: var(--space-10); }
.pains .bento-cell {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pains .num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.6rem);
  color: var(--text-muted);
  font-weight: 700;
  line-height: 1;
}
.pains h3 { font-size: 1.3rem; margin: 0; }
.pains p { margin: 0; color: var(--text-dim); line-height: 1.55; }

/* ---------- pains · clean card variant (finance-ai, 2026-08) ----------
   ADDITIVE ONLY: scoped to `.pains-clean`, so the 12 other product pages
   that use bare `.pains` are untouched. The cards reuse the 03 section's
   `.caps-grid` / `.cap-card` classes below — no new colors or tokens. */
.pains-clean h2 { max-width: 40ch; }
.pains-clean .caps-grid { margin-top: var(--space-10); }

/* ---------- caps · wide headline variant (finance-ai, 2026-08) ----------
   ADDITIVE ONLY: scoped to `.caps-wide`. The base `.caps h2 { max-width: 26ch }`
   below is unchanged, so the 12 other product pages keep their narrow headline.
   This lets the longer finance-ai 03 headline run near full width (~2 lines on
   desktop) instead of being squeezed into a narrow 3-line column.
   NOTE: written as `.caps.caps-wide` (specificity 0,2,1) on purpose — the base
   `.caps h2` rule lives further down this file, so a bare `.caps-wide h2`
   (0,1,1) would lose the cascade to it from up here. */
.caps.caps-wide h2 { max-width: 52ch; }

/* ---------- the flow (4-step storytelling) ---------- */
.flow {
  padding: var(--space-20) 0;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(133, 194, 38, 0.08), transparent 70%);
  pointer-events: none;
}
.flow > * { position: relative; }
.flow .header { text-align: center; margin-bottom: var(--space-12); max-width: 760px; margin-left: auto; margin-right: auto; }
.flow .eyebrow {
  background: rgba(133, 194, 38, 0.15);
  border-color: rgba(133, 194, 38, 0.35);
  color: var(--asrock-light);
}
.flow h2 { color: var(--text-on-dark); }
.flow h2 .accent { color: var(--asrock-light); }
.flow p { color: var(--text-on-dark-dim); font-size: 1.05rem; }

.flow .quote-card {
  margin: 0 auto var(--space-12);
  max-width: 600px;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-on-dark);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}
.flow .quote-card .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--asrock-light);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  display: block;
}
.flow .quote-card .quote { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.3; color: var(--text-on-dark); margin: 0; letter-spacing: -0.02em; }
.flow .quote-card .quote::before { content: "「"; color: var(--asrock-light); }
.flow .quote-card .quote::after { content: "」"; color: var(--asrock-light); }

.flow-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) { .flow-steps { grid-template-columns: repeat(4, 1fr); } }

.flow-step {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base), border-color var(--dur-base);
}
.flow-step:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.06); border-color: var(--asrock); }
.flow-step .step-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--asrock-light);
  letter-spacing: 0.16em;
  margin-bottom: var(--space-4);
  display: block;
}
.flow-step h3 { font-size: 1.15rem; margin: 0 0 var(--space-2); color: var(--text-on-dark); letter-spacing: -0.01em; }
.flow-step p { font-size: 0.88rem; color: var(--text-on-dark-dim); margin: 0; line-height: 1.5; }
.flow-step .arrow-next {
  display: none;
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: var(--asrock);
  color: var(--bg-dark);
  border-radius: 50%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 28px;
  z-index: 2;
}
@media (min-width: 720px) {
  .flow-step:not(:last-child) .arrow-next { display: block; }
}

/* ---------- languages ---------- */
.langs { padding: var(--space-20) 0; }
.langs h2 { max-width: 22ch; }
.langs-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-10); }
@media (min-width: 720px) { .langs-grid { grid-template-columns: repeat(3, 1fr); } }
.lang-card {
  padding: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.lang-card:hover { transform: translateY(-3px); border-color: var(--asrock); box-shadow: var(--shadow); }
.lang-card .flag {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  background: var(--asrock-tint);
  color: var(--asrock-dark);
}
.lang-card h3 { font-size: 1.2rem; margin: 0 0 var(--space-2); }
.lang-card p { margin: 0; color: var(--text-dim); font-size: 0.92rem; }

/* ---------- pair with hardware ---------- */
.pair { padding: var(--space-20) 0; background: var(--bg-card-alt); border-top: 1px solid var(--border); }
.pair-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) { .pair-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
.pair-img {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pair-img img { width: 100%; height: auto; display: block; }
.pair h2 { max-width: 18ch; }
.pair .check { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0 var(--space-8); }
.pair .check li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 0.98rem; color: var(--text); }
.pair .check li::before {
  content: "✓";
  color: var(--asrock-hi);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

/* ---------- bottom CTA (shared with workstation) ---------- */
.product-cta { padding: var(--space-20) 0; text-align: center; }
.product-cta .wrap { max-width: 720px; }
.product-cta h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: var(--space-5); }
.product-cta p { color: var(--text-dim); margin-bottom: var(--space-8); font-size: 1.1rem; }
.product-cta-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* =================================================================
   Product hero — DARK variant  (opt-in: <section class="product-hero is-dark">)
   Added 2026-08 for /AICenter/center/healthcare-ai.html (EN) only.
   ADDITIVE ONLY: every rule below is scoped under `.product-hero.is-dark`,
   so the existing light hero (healthcare-ai.tw.html and any future
   center/*.html) renders exactly as before.
   ================================================================= */
.product-hero.is-dark {
  /* one step darker than --bg-dark (#0f172a) so the right-hand card reads
     as a raised surface against the section */
  --hero-bg: #0b1220;
  --hero-panel-bg: #16213a;      /* card — slightly lighter deep navy */
  --hero-on-dark-soft: rgba(248, 250, 252, 0.75);
  --hero-on-dark-faint: rgba(248, 250, 252, 0.55);
  --hero-hairline: rgba(248, 250, 252, 0.10);
  background: var(--hero-bg);
  color: var(--text-on-dark);
  padding-bottom: var(--space-16);
}
/* re-tint the ambient glow so it reads on a dark ground */
.product-hero.is-dark::before {
  background:
    radial-gradient(ellipse 70% 55% at 12% -15%, rgba(133, 194, 38, 0.16), transparent 62%),
    radial-gradient(ellipse 65% 45% at 95% 15%, rgba(37, 99, 235, 0.20), transparent 64%);
}

/* breadcrumb on dark */
.product-hero.is-dark .breadcrumb { color: var(--hero-on-dark-faint); }
.product-hero.is-dark .breadcrumb a { color: var(--hero-on-dark-soft); }
.product-hero.is-dark .breadcrumb a:hover { color: var(--asrock-light); }

/* two-column layout: stacks at <=900px, side by side from 901px up */
.product-hero.is-dark .product-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 901px) {
  .product-hero.is-dark .product-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

/* ---- left column: copy ---- */
.product-hero.is-dark .eyebrow {
  color: var(--asrock);
  background: rgba(133, 194, 38, 0.12);
  border-color: rgba(133, 194, 38, 0.35);
}
.product-hero.is-dark h1 {
  color: var(--text-on-dark);
  font-weight: 700;
  /* smaller than the full-width light hero — this one lives in a half column */
  font-size: clamp(2.1rem, 3.6vw, 3.3rem);
  line-height: 1.08;
}
.product-hero.is-dark .lede {
  color: var(--hero-on-dark-soft);
  max-width: 36rem;
  margin-bottom: var(--space-8);
}
.product-hero.is-dark .product-hero-cta { margin-bottom: 0; gap: var(--space-3); }

/* outline button needs light ink/border on dark */
.product-hero.is-dark .btn-ghost {
  color: var(--text-on-dark);
  background: rgba(248, 250, 252, 0.04);
  border-color: rgba(248, 250, 252, 0.28);
}
.product-hero.is-dark .btn-ghost:hover {
  background: rgba(248, 250, 252, 0.10);
  border-color: rgba(248, 250, 252, 0.55);
  color: var(--text-on-dark);
}

/* ---- right column: media placeholder card ---- */
.product-hero.is-dark .product-hero-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 420px;
  padding: var(--space-10);
  border-radius: 16px;
  background: var(--hero-panel-bg);
  border: 1px solid var(--hero-hairline);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* when the web team drops in a screenshot or video, let it fill the card */
.product-hero.is-dark .product-hero-panel > img,
.product-hero.is-dark .product-hero-panel > video {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.product-hero.is-dark .product-hero-panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
}
.product-hero.is-dark .product-hero-panel-note {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 34ch;
  color: var(--hero-on-dark-faint);
}
@media (max-width: 640px) {
  .product-hero.is-dark .product-hero-panel { min-height: 300px; padding: var(--space-6); }
}

/* =================================================================
   Next Step CTA — DARK variant  (opt-in: <section class="product-cta is-dark">)
   Added 2026-08 for the four EN center pages (healthcare / sports /
   education / finance) to bookend each page with the same ground as
   .product-hero.is-dark. ADDITIVE ONLY: TC pages keep the light .product-cta.
   ================================================================= */
.product-cta.is-dark {
  background: #0b1220;               /* same ground as .product-hero.is-dark */
  color: var(--text-on-dark);
}
.product-cta.is-dark .eyebrow {
  color: var(--asrock);
  background: rgba(133, 194, 38, 0.12);
  border-color: rgba(133, 194, 38, 0.35);
}
.product-cta.is-dark h2 { color: var(--text-on-dark); }
.product-cta.is-dark p { color: rgba(248, 250, 252, 0.75); }
.product-cta.is-dark .btn-ghost {
  color: var(--text-on-dark);
  background: rgba(248, 250, 252, 0.04);
  border-color: rgba(248, 250, 252, 0.28);
}
.product-cta.is-dark .btn-ghost:hover {
  background: rgba(248, 250, 252, 0.10);
  border-color: rgba(248, 250, 252, 0.55);
  color: var(--text-on-dark);
}

/* =================================================================
   02 · How It Works — two-column intro  (EN healthcare page)
   Added 2026-08. ADDITIVE ONLY: scoped to the new `.flow-intro`
   wrapper, so the TC page (header + quote-card stacked and centred)
   is unaffected. The `.flow` section keeps its existing DARK theme.
   ================================================================= */
.flow-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: stretch;
  margin-bottom: var(--space-12);
}
@media (min-width: 901px) {
  .flow-intro { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
.flow-intro-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* the shared .header / .quote-card are centred + width-capped for the
   full-width layout — left-align and un-cap them inside the left column */
.flow .flow-intro .header {
  text-align: left;
  max-width: none;
  margin: 0 0 var(--space-8);
}
.flow .flow-intro .quote-card {
  margin: 0;
  max-width: none;
  text-align: left;
}
.flow-intro-media {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-on-dark);
  box-shadow: var(--shadow-lg);
}
.flow-intro-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =================================================================
   03 · Core Capabilities — 6-card grid  (EN healthcare page)
   Added 2026-08. ADDITIVE ONLY: new `.caps` / `.caps-grid` / `.cap-card`
   classes. The old `.langs` / `.lang-card` rules above are untouched —
   healthcare-ai.tw.html still uses them.
   ================================================================= */
.caps { padding: var(--space-20) 0; }
.caps .eyebrow {
  color: var(--asrock);
  background: rgba(133, 194, 38, 0.10);
  border-color: rgba(133, 194, 38, 0.30);
}
.caps h2 { max-width: 26ch; }
.caps .caps-sub {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 60ch;
  margin: 0 0 var(--space-10);
}
.caps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 700px)  { .caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .caps-grid { grid-template-columns: repeat(3, 1fr); } }
.cap-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  /* extra bottom padding leaves room for the green rule */
  padding: var(--space-8) var(--space-8) var(--space-10);
  min-height: 200px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
/* brand-green rule near the bottom edge, inset from the card sides */
.cap-card::after {
  content: "";
  position: absolute;
  left: var(--space-8);
  right: var(--space-8);
  bottom: var(--space-5);
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--asrock);
}
@media (hover: hover) {
  .cap-card:hover {
    transform: translateY(-3px);
    border-color: rgba(133, 194, 38, 0.45);
    box-shadow: var(--shadow-md);
  }
}
.cap-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
.cap-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

/* =================================================================
   04 · Technical Architecture — pipeline + guarantee bar
   (EN healthcare page).  Added 2026-08.
   ADDITIVE ONLY: every rule is scoped under `.arch`, a brand-new
   section class. `.pair` / `.langs` / `.flow` rules above are untouched.
   Icons are inline stroke SVG (no icon library, no emoji, no new deps).
   ================================================================= */
.arch { padding: var(--space-20) 0; }
.arch .eyebrow {
  color: var(--asrock);
  background: rgba(133, 194, 38, 0.10);
  border-color: rgba(133, 194, 38, 0.30);
}
.arch h2 { max-width: 22ch; margin-bottom: var(--space-4); }
.arch h2 .accent { color: var(--asrock-hi); }
.arch-rule {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--asrock);
  margin: 0 0 var(--space-5);
}
.arch-sub {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 60ch;
  margin: 0 0 var(--space-12);
}
/* default icon box — every specific size rule below sits later in source
   order and therefore wins at equal specificity */
.arch svg { display: block; flex: none; width: 16px; height: 16px; }

/* ---- pipeline grid: 1 / 2 / 3 / 5 columns ---- */
.arch-pipeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-12);
}
@media (min-width: 800px)  { .arch-pipeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .arch-pipeline { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .arch-pipeline { grid-template-columns: repeat(5, 1fr); gap: var(--space-6); } }

.arch-step {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}
/* brand-green chevron between cards — only in the 5-across layout */
@media (min-width: 1200px) {
  .arch-step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--asrock);
    border-right: 2px solid var(--asrock);
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
  }
}
.arch-step-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.arch-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--asrock);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}
.arch-step h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.arch-step-desc { margin: 0 0 var(--space-5); font-size: 0.86rem; line-height: 1.5; color: var(--text-dim); }
.arch-viz { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); }
/* sports-ai 04 (.arch-viz-center scope): centre the image + chips/list block in the
   leftover card height — auto margins split the free space; head + desc stay at the top */
.arch-viz-center .arch-viz { margin-top: auto; margin-bottom: auto; }
/* bitmap artwork from supplied architecture diagrams (sports-ai and
   finance-ai per-step renders); light/white backgrounds, so they sit
   borderless on the white card. max-width caps single-column tablet
   layouts at 480px CSS — half the sports set's 960px native width, so
   the bitmaps stay sharp on 2x screens */
.arch-art { display: block; width: 100%; max-width: 480px; height: auto; border-radius: 10px; align-self: center; }

/* ---- shared chips ---- */
.arch-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.arch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--radius-full);
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-dim);
}
.arch-chip svg { width: 14px; height: 14px; color: var(--text-muted); }
.arch-chip.is-green { background: var(--asrock-tint); border-color: rgba(133, 194, 38, 0.35); color: var(--asrock-dark); }
.arch-chip.is-green svg { width: 14px; height: 14px; color: var(--asrock-hi); }
.arch-chip.is-wide { width: 100%; justify-content: center; }

/* ---- 01 document stack ---- */
.arch-docs { display: flex; flex-direction: column; gap: 6px; }
.arch-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
}
.arch-doc:nth-child(2) { margin-left: 14px; }
.arch-doc:nth-child(3) { margin-left: 28px; }
.arch-tag {
  flex: none;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  padding: 3px 6px;
  border-radius: 5px;
}
.arch-tag.is-pdf  { background: #e11d48; }
.arch-tag.is-docx { background: var(--accent); }
.arch-tag.is-xlsx { background: var(--asrock-hi); }
.arch-bar { display: block; flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--bg-card-alt); border: 1px solid var(--border); }

/* ---- 02 processing list ---- */
.arch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-3);
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.arch-list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text);
}
/* faint connector between rows */
.arch-list-row:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 22px;
  height: 10px;
  border-left: 1px dashed var(--border-strong);
}
.arch-ico {
  flex: none;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #ffffff;
}
.arch-ico svg { width: 14px; height: 14px; }
.arch-ico.is-green  { background: var(--asrock); }
.arch-ico.is-blue   { background: var(--accent); }
.arch-ico.is-amber  { background: var(--amber); }
.arch-ico.is-violet { background: var(--violet); }

/* ---- 03 vector database cylinder ---- */
.arch-db {
  position: relative;
  height: 104px;
  width: 150px;                 /* explicit — children are absolute, nothing else sets width */
  max-width: 100%;
  margin: 0 auto;
  background: linear-gradient(180deg, #f8fafc 0%, #eaeff6 55%, #dde4ee 100%);
  border: 1px solid var(--border-strong);
  border-radius: 75px / 20px;   /* elliptical top+bottom = cylinder */
}
.arch-db::before {              /* top ellipse */
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 26px;
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}
.arch-db .dot { position: absolute; z-index: 1; width: 7px; height: 7px; border-radius: 50%; }
.arch-db .dot:nth-child(1)  { top: 34%; left: 16%; background: var(--violet); }
.arch-db .dot:nth-child(2)  { top: 30%; left: 42%; background: var(--accent); }
.arch-db .dot:nth-child(3)  { top: 44%; left: 64%; background: var(--amber); }
.arch-db .dot:nth-child(4)  { top: 56%; left: 24%; background: var(--asrock); }
.arch-db .dot:nth-child(5)  { top: 32%; left: 76%; background: var(--violet); }
.arch-db .dot:nth-child(6)  { top: 64%; left: 48%; background: var(--accent); }
.arch-db .dot:nth-child(7)  { top: 74%; left: 30%; background: var(--amber); }
.arch-db .dot:nth-child(8)  { top: 50%; left: 44%; background: var(--asrock); }
.arch-db .dot:nth-child(9)  { top: 70%; left: 70%; background: var(--violet); }
.arch-db .dot:nth-child(10) { top: 80%; left: 56%; background: var(--accent); }
.arch-db-badge {
  position: absolute;
  z-index: 2;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--asrock-hi);
}
.arch-db-badge svg { width: 16px; height: 16px; }

/* ---- 04 LLM + RAG ---- */
.arch-rag { position: relative; display: flex; flex-direction: column; gap: 4px; padding-left: 16px; }
.arch-rag::before {             /* dashed two-way flow line */
  content: "";
  position: absolute;
  left: 3px;
  top: 16px;
  bottom: 16px;
  border-left: 2px dashed rgba(133, 194, 38, 0.55);
}
.arch-rag-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: var(--shadow-xs);
}
.arch-rag-box::before {         /* arrow heads on the dashed line */
  content: "";
  position: absolute;
  left: 0;
  width: 8px;
  height: 8px;
  border-left: 2px solid rgba(133, 194, 38, 0.8);
  border-top: 2px solid rgba(133, 194, 38, 0.8);
}
.arch-rag-box:first-child::before { top: 13px; transform: rotate(45deg); }
.arch-rag-box:last-child::before { bottom: 13px; transform: rotate(-135deg); }
.arch-rag-plus {
  position: relative;
  z-index: 1;
  align-self: center;
  margin: 2px 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--asrock);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}
.arch-rag-ico {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}
.arch-rag-ico svg { width: 18px; height: 18px; }
.arch-rag-ico.is-green { background: var(--asrock-tint); color: var(--asrock-hi); }
.arch-rag-ico.is-blue  { background: var(--bg-card-tint-blue); color: var(--accent); }
.arch-rag-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.arch-rag-txt strong { font-size: 0.8rem; font-weight: 700; color: var(--text); }
.arch-rag-txt small { font-size: 0.66rem; color: var(--text-muted); }

/* ---- 05 voice / UI ---- */
.arch-voice { display: flex; align-items: center; justify-content: center; gap: 8px; }
.arch-mic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--asrock);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow-green);
}
.arch-mic svg { width: 22px; height: 22px; }
.arch-wave { display: flex; align-items: center; gap: 3px; height: 24px; }
.arch-wave i { display: block; width: 3px; border-radius: var(--radius-full); background: rgba(133, 194, 38, 0.55); }
.arch-wave i:nth-child(1) { height: 7px; }
.arch-wave i:nth-child(2) { height: 13px; }
.arch-wave i:nth-child(3) { height: 20px; }
.arch-wave i:nth-child(4) { height: 11px; }
.arch-wave.is-right i:nth-child(1) { height: 11px; }
.arch-wave.is-right i:nth-child(2) { height: 20px; }
.arch-wave.is-right i:nth-child(3) { height: 13px; }
.arch-wave.is-right i:nth-child(4) { height: 7px; }
.arch-window {
  max-height: 150px;      /* answer bubble truncates rather than growing the card */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.arch-window-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg-card-alt);
  border-bottom: 1px solid var(--border);
}
.arch-window-bar i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.arch-bubble {
  margin: 7px 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.68rem;
  line-height: 1.4;
}
.arch-bubble.is-q { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }
.arch-bubble.is-a { background: var(--asrock-tint); border: 1px solid rgba(133, 194, 38, 0.3); color: var(--asrock-dark); }

/* ---- guarantee bar ---- */
.arch-promise {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(133, 194, 38, 0.07);
  border: 1px solid rgba(133, 194, 38, 0.22);
}
@media (min-width: 561px) { .arch-promise { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
@media (min-width: 901px) { .arch-promise { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.arch-promise-item { display: flex; align-items: flex-start; gap: var(--space-3); }
@media (min-width: 901px) {
  .arch-promise-item:not(:last-child) { padding-right: var(--space-6); }
  .arch-promise-item + .arch-promise-item {
    padding-left: var(--space-6);
    border-left: 1px solid rgba(133, 194, 38, 0.28);
  }
}
.arch-promise-ico { flex: none; margin-top: 2px; color: var(--asrock-hi); }
.arch-promise-ico svg { width: 22px; height: 22px; }
.arch-promise-txt { display: flex; flex-direction: column; gap: 2px; }
.arch-promise-txt strong { font-size: 0.9rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.arch-promise-txt small { font-size: 0.8rem; line-height: 1.45; color: var(--text-dim); }

/* ---- brand-green highlights inside headings/lede (EN healthcare page) ----
   Added 2026-08. Additive: `.accent` has no global rule; the only other
   definition is `.flow h2 .accent`, which is untouched.
   Dark hero uses the solid brand green; light sections use the darker
   --asrock-hi for contrast on white. */
.product-hero.is-dark .accent { color: var(--asrock); }
.caps h2 .accent { color: var(--asrock-hi); }

/* =================================================================
   05 · Recommended Infrastructure  (EN healthcare page)
   Added 2026-08. ADDITIVE ONLY: new `.infra*` classes replace the
   `.pair` section on the EN page only — `.pair` / `.pair-grid` /
   `.pair-img` / `.check` rules above stay untouched because
   healthcare-ai.tw.html still renders that section.
   ================================================================= */
.infra { padding: var(--space-20) 0; }
.infra .eyebrow {
  color: var(--asrock);
  background: rgba(133, 194, 38, 0.10);
  border-color: rgba(133, 194, 38, 0.30);
}
.infra h2 { max-width: 24ch; }
.infra-sub {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 62ch;
  margin: 0 0 var(--space-10);
}
.infra-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 901px) { .infra-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.infra-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  /* generous bottom padding: the tier label sits low, the green rule below it */
  padding: var(--space-8) var(--space-8) var(--space-10);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
/* brand-green rule at the bottom edge, inset from the card sides */
.infra-card::after {
  content: "";
  position: absolute;
  left: var(--space-8);
  right: var(--space-8);
  bottom: var(--space-5);
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--asrock);
}
@media (hover: hover) {
  .infra-card:hover {
    transform: translateY(-3px);
    border-color: rgba(133, 194, 38, 0.45);
    box-shadow: var(--shadow-md);
  }
}
.infra-card h3 {
  margin: 0 0 var(--space-3);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.infra-card p {
  margin: 0 0 var(--space-8);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-dim);
}
/* pushed to the bottom of the card, directly above the green rule */
.infra-tier {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--asrock-hi);
}
.infra-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); }
/* tier illustration on top of each card (user-supplied artwork, white bg blends with card) */
.infra-card .infra-fig {
  width: 100%;
  height: 150px;
  object-fit: contain;
  margin-bottom: var(--space-4);
}

/* ---- 04 labelled fact boxes (EN sports page, added 2026-08) ----
   ADDITIVE ONLY: two brand-new class names. Same look as `.arch-rag-box`
   but WITHOUT the dashed flow line / arrow heads, because the sports
   architecture diagram stacks two plain labelled boxes instead of showing a
   two-way LLM<->data flow. `.arch-rag*` rules above are untouched, so
   healthcare-ai.html / healthcare-ai.tw.html render exactly as before.
   The icon and text inside reuse `.arch-rag-ico` / `.arch-rag-txt`. */
.arch-facts { display: flex; flex-direction: column; gap: 6px; }
.arch-fact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: var(--shadow-xs);
}

/* ---- 03 content-count strip (EN education page, added 2026-08) ----
   ADDITIVE ONLY: brand-new `.edu-*` namespace, used solely by
   center/education-ai.html. No existing selector is touched, so
   healthcare-ai.html, sports-ai.html and finance-ai.html render
   exactly as before. Sits between `.caps-sub` and `.caps-grid`. */
.edu-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-10);
}
@media (min-width: 760px) {
  .edu-stats { grid-template-columns: repeat(4, 1fr); }
}
.edu-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-5) var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--asrock);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}
.edu-stat b {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--asrock-hi);
}
.edu-stat span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* =================================================================
   design-system typography (body.ds-type scope)
   -----------------------------------------------------------------
   Implements AI_CENTER_DESIGN_SYSTEM.md § Typography for the four
   industry sub-page families (finance / sports / healthcare /
   education — 4 locales each, 16 pages). Same method as the block at
   the end of pages/ai-home.css; read that one first if you extend this.

   EVERY rule here is scoped to .ds-type, a class set on <body> by those
   16 builds only. Any other page that loads this stylesheet
   (workstation.html and the older center pages) cannot be reached from
   here. Never add a bare selector to this block.

   Spec values are desktop-first fixed px; clamp() is used only so narrow
   viewports do not overflow — at >=1440px every clamp lands on the spec
   value. #111827 is the spec's text colour; no token matches it
   (tokens.css --text is #0f172a), so it is a literal here.

   The three dark grounds — .product-hero.is-dark (01 hero), .flow (02)
   and .product-cta.is-dark (Next Step) — get the metrics but NOT the
   colour, so their existing white-ink rules keep winning. Same trick as
   ai-home's .products.infra-dark .infra-title.

   The section headline measure caps already in this file
   (.pains h2 22ch, .pains-clean h2 40ch, .caps h2 26ch,
   .caps.caps-wide h2 52ch, .arch h2 22ch, .infra h2 24ch) control width
   only and are intentionally left alone — they coexist with the sizes here.

   Spec sizes/tracking were tuned for Latin type; the TC/JP/KR builds
   inherit them — flag visual issues rather than forking per language.
   ================================================================= */

/* --- 0 · one family everywhere: remap the display/mono aliases to Inter --- */
.ds-type {
  --font-display: var(--font-body);   /* was "Space Grotesk" */
  --font-mono: var(--font-body);      /* was ui-monospace */
}

/* --- 1 · hero headline — 700 / 72px / 1.05 / -0.04em / #111827 ---
   Beats `.product-hero.is-dark h1` above on source order at equal
   specificity (0,2,1). Colour is split out so the dark hero keeps white ink. */
.ds-type .product-hero h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.75rem, 5vw + 1rem, 4.5rem);   /* 44px → 72px (max from 1120px up) */
  line-height: 1.05;
  letter-spacing: -0.04em;
}
/* all 16 pages ship the dark hero today; this keeps a future light hero
   spec-correct without ever touching the dark one */
.ds-type .product-hero:not(.is-dark) h1 { color: #111827; }

/* --- 2 · section headlines — 700 / 48px / 1.1 / -0.03em --- */
.ds-type .pains h2,
.ds-type .flow h2,
.ds-type .caps h2,
.ds-type .arch h2,
.ds-type .infra h2,
.ds-type .product-cta h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);      /* 32px → 48px (max from 1280px up) */
  line-height: 1.1;
  letter-spacing: -0.03em;
}
/* #111827 on the four light sections only — .flow and .product-cta.is-dark
   are dark grounds and deliberately fall through to their own white h2 rule. */
.ds-type .pains h2,
.ds-type .caps h2,
.ds-type .arch h2,
.ds-type .infra h2 {
  color: #111827;
}

/* --- 3 · card titles — 600 / 28px / 1.25 --- */
.ds-type .pains h3,        /* 01 · bento variant (sports / healthcare / education) */
.ds-type .cap-card h3,     /* 03 · capability cards, plus 01 on finance (.pains-clean) */
.ds-type .infra-card h3 {  /* 05 · infrastructure tiers */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.25;
}
/* sub-headings the spec does not name: the 02 flow steps (4 across) and the
   04 pipeline steps (5 across) are numbered micro-cards inside a section, not
   section cards. Held one step below a card title (20px / 600), exactly like
   ai-home's .svc-step-title. */
.ds-type .flow-step h3,
.ds-type .arch-step h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* --- 4 · large body copy — 400 / 20px / 1.65, 70–80ch measure ---
   `.flow .header p` is the 02 sub-headline (markup gives it .caps-sub on the
   finance builds and no class elsewhere), so it is matched structurally. */
.ds-type .product-hero .lede,
.ds-type .flow .header p,
.ds-type .caps .caps-sub,
.ds-type .arch-sub,
.ds-type .infra-sub,
.ds-type .product-cta p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.65;
}
/* measure: the existing caps stay (hero lede 36rem, caps-sub/arch-sub 60ch,
   infra-sub 62ch, .product-cta .wrap 720px) — all within the spec's 70–80ch. */

/* --- 5 · standard body copy — 400 / 18px / 1.6 --- */
.ds-type .pains p,
.ds-type .cap-card p,
.ds-type .flow-step p,
.ds-type .arch-step-desc,
.ds-type .infra-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* --- 6 · navigation — 500 / 16px --- */
.ds-type .nav-primary a {
  font-size: 1rem;
  font-weight: 500;
}
/* the header "Contact" pill is a button, not a nav link: the pre-existing
   .nav-primary a rule out-specifies .btn and was flattening it to 500 */
.ds-type .nav-primary a.btn {
  font-weight: 600;
}

/* --- 7 · buttons — 600 / 16px / 52px tall / pill ---
   components.css .btn is already weight 600 with a pill radius (999px); only
   the size, the measured height and the spec's literal 9999px are restated.
   Vertical padding is dropped in favour of min-height so the border-box
   measures exactly 52px including the 1px transparent border. */
.ds-type .btn {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  min-height: 52px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 9999px;
}
/* .btn-sm is an explicit small variant — the only one on these pages is the
   header "Contact" pill, which has to fit a 64px bar. It opts out of the 52px
   standard height only; its text stays 16px/600 like the rest of the nav row. */
.ds-type .btn-sm {
  min-height: 40px;
}

/* --- 8 · small labels — 600 / 12px / uppercase / 0.08em --- */
.ds-type .eyebrow,
.ds-type .flow .quote-card .label,
.ds-type .flow-step .step-num,
.ds-type .infra-tier,
.ds-type .edu-stat span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- 9 · auxiliary text the spec does not define keeps its existing relative
   size and simply picks up Inter from step 0: the 01 `.num` counters, the 02
   `.quote-card .quote` pull quote, the 03 `.edu-stat b` figures, `.breadcrumb`
   and the footer.
   The 04 architecture diagrams are treated the same way on purpose. Their
   internals (.arch-badge, .arch-chip, .arch-tag, .arch-list-row, .arch-rag-txt,
   .arch-bubble, .arch-promise-txt) are labels *inside* a schematic drawn at
   card scale, several of them below the spec's 12px floor (.arch-chip 11.5px,
   .arch-bubble 10.9px, .arch-tag 9.6px). Promoting them to the 12px label tier
   would reflow the diagrams rather than restyle them, so they are left as
   artwork — raise it with design if the floor has to apply here too. --- */