/* =================================================================
   AI Workstation — Light + Bento + Scroll storytelling
   ================================================================= */

.ws-hero {
  padding-top: calc(var(--nav-h) + var(--space-16));
  padding-bottom: var(--space-12);
  position: relative;
  overflow: hidden;
}
.ws-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% -10%, rgba(133, 194, 38, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(37, 99, 235, 0.10), transparent 60%);
  pointer-events: none;
}
.ws-hero > * { position: relative; }
.ws-hero h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); margin-bottom: var(--space-5); letter-spacing: -0.04em; }
.ws-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; }
.ws-hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-12); }

.ws-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);
}
.ws-hero-media img { width: 100%; height: auto; display: block; }

/* ---------- related products (multi-line lineup) ---------- */
.ws-products { padding: var(--space-20) 0; background: var(--bg-card); border-top: 1px solid var(--border); }
.ws-products .header { text-align: center; margin-bottom: var(--space-12); }
.ws-products .header h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: var(--space-4); }
.ws-products .header p { color: var(--text-dim); font-size: 1.05rem; max-width: 56ch; margin: 0 auto; }

/* product-line group (e.g. Workstation / Motherboard / DeskMini) */
.ws-line { margin-top: var(--space-16); }
.ws-line:first-of-type { margin-top: var(--space-12); }
.ws-line-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
  align-items: end;
}
@media (min-width: 720px) {
  .ws-line-header {
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
  }
}
.ws-line-header .tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--asrock-dark);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--asrock-tint);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(133, 194, 38, 0.28);
  align-self: flex-start;
  margin-bottom: var(--space-3);
}
.ws-line-header h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
}
.ws-line-header p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 56ch;
  line-height: 1.5;
}
.ws-line-header .see-all {
  color: var(--asrock-hi);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur-fast);
}
.ws-line-header .see-all:hover { color: var(--asrock-dark); }

.ws-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 720px)  { .ws-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ws-products-grid { grid-template-columns: repeat(3, 1fr); } }

/* .is-scroll rows hold more cards than visible columns (three at desktop);
   the rest are reached by swipe / mouse drag (drag logic in interactions.js) */
.ws-products-grid.is-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-2) 0 var(--space-3);
  cursor: grab;
  scrollbar-width: none;
}
.ws-products-grid.is-scroll::-webkit-scrollbar { display: none; }
.ws-products-grid.is-scroll.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.ws-products-grid.is-scroll > .ws-product-card { flex: 0 0 100%; scroll-snap-align: start; }
@media (min-width: 720px)  { .ws-products-grid.is-scroll > .ws-product-card { flex-basis: calc((100% - var(--space-6)) / 2); } }
@media (min-width: 1080px) { .ws-products-grid.is-scroll > .ws-product-card { flex-basis: calc((100% - 2 * var(--space-6)) / 3); } }

/* arrow + dot chrome around an .is-scroll row; buttons mirror the home 04
   carousel (.car-btn) look, but page whole cards instead of swapping images */
.ws-carousel { position: relative; }
.ws-car-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.ws-car-btn.is-prev { left: calc(-1 * var(--space-5)); }
.ws-car-btn.is-next { right: calc(-1 * var(--space-5)); }
.ws-car-btn:hover { background: var(--asrock); border-color: var(--asrock); color: #fff; }
.ws-car-btn[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
.ws-car-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.ws-car-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  cursor: pointer;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.ws-car-dots button:hover { background: var(--text-muted); }
.ws-car-dots button.is-active { background: var(--asrock); transform: scale(1.25); }

.ws-product-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
  position: relative;
}
.ws-product-card:hover { transform: translateY(-4px); border-color: var(--asrock); box-shadow: var(--shadow-md); }

.ws-product-card .todo-mark {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--bg-card-tint-amber);
  border: 1px dashed rgba(217, 119, 6, 0.4);
  color: #b45309;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  pointer-events: none;
}
.ws-product-card .pic {
  background: var(--bg-card-alt);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  display: grid;
  place-items: center;
  min-height: 180px;
}
.ws-product-card .pic img { max-width: 100%; max-height: 200px; }
.ws-product-card .model {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.02em;
}
.ws-product-card .specs { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); flex: 1; }
.ws-product-card .specs li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.5;
}
.ws-product-card .specs li::before {
  content: "•";
  color: var(--asrock);
  font-weight: 700;
  flex-shrink: 0;
}
.ws-product-card .learn {
  align-self: flex-start;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-full);
  background: var(--asrock);
  color: var(--bg-dark);
  font-weight: 700;
  font-size: 0.85rem;
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-base);
  box-shadow: var(--shadow-xs);
}
.ws-product-card .learn:hover {
  background: var(--asrock-hi);
  color: white;
  box-shadow: var(--shadow-glow-green);
}

/* ---------- per-card supported-GPU list (always visible) ---------- */
.ws-product-card .gpu-support {
  margin: calc(-1 * var(--space-4)) 0 var(--space-6);
  border-top: 1px dashed var(--border);
  padding-top: var(--space-4);
}
.ws-product-card .gpu-support .gpu-support-title {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
}
.ws-product-card .gpu-support .gpu-support-title::before {
  content: "▸";
  color: var(--asrock);
}
.ws-product-card .gpu-support p {
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.ws-product-card .gpu-support p b { color: var(--text); font-weight: 600; }

/* ---------- pin-scroll "why" section ---------- */
.ws-why { padding: var(--space-20) 0; }
.ws-why h2 { max-width: 22ch; }
.ws-why .bento { margin-top: var(--space-10); }

.ws-why .bento-cell { min-height: 220px; display: flex; flex-direction: column; gap: var(--space-4); }
.ws-why .num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 700;
  color: var(--asrock-hi);
  line-height: 1;
  letter-spacing: -0.04em;
}
.ws-why .bento-cell.is-dark .num { color: var(--asrock-light); }
.ws-why .bento-cell.is-green .num { color: var(--bg-dark); }
.ws-why .bento-cell h3 { font-size: 1.4rem; margin: 0; }
.ws-why .bento-cell p { margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* ---------- specs (pinned reveal) ---------- */
.ws-specs {
  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);
}
.ws-specs h2 { color: var(--text-on-dark); max-width: 24ch; }
.ws-specs h2 .accent { color: var(--asrock-light); }
.ws-specs p { color: var(--text-on-dark-dim); }
.ws-specs .eyebrow { background: rgba(133, 194, 38, 0.15); border-color: rgba(133, 194, 38, 0.35); color: var(--asrock-light); }
.ws-specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); margin-top: var(--space-12); }
@media (min-width: 720px) { .ws-specs-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-10); } }
.ws-spec {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-on-dark);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base), border-color var(--dur-base);
}
.ws-spec:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.05); border-color: var(--asrock); }
.ws-spec .v { font-family: var(--font-display); font-size: clamp(1.8rem, 2.8vw, 2.4rem); font-weight: 700; display: block; line-height: 1; margin-bottom: var(--space-2); letter-spacing: -0.03em; color: var(--asrock-light); }
.ws-spec .l { font-size: 0.78rem; color: var(--text-on-dark-dim); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; }

/* ---------- use-cases (software pairing) ---------- */
.ws-use { padding: var(--space-20) 0; }
.ws-use h2 { max-width: 24ch; }
.ws-use-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-10); }
@media (min-width: 720px) { .ws-use-grid { grid-template-columns: repeat(3, 1fr); } }
/* 4-card variant (opt-in .has-4 — EN workstation.html adds ASRock AI Suite).
   ADDITIVE ONLY: workstation.tw.html keeps the 3-column grid above. */
@media (min-width: 720px) { .ws-use-grid.has-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ws-use-grid.has-4 { grid-template-columns: repeat(4, 1fr); } }
.ws-use-card {
  padding: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.ws-use-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.ws-use-card .tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--asrock-dark); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.ws-use-card h3 { font-size: 1.25rem; margin: 0; }
.ws-use-card p { color: var(--text-dim); font-size: 0.92rem; margin: 0; flex: 1; }
.ws-use-card .link { color: var(--asrock-hi); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; margin-top: var(--space-3); }

/* ---------- hardware ecosystem (cross-link to ASRock main brand) ---------- */
.ws-hardware { padding: var(--space-20) 0; background: var(--bg-card-alt); border-top: 1px solid var(--border); }
.ws-hardware .header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-10); flex-wrap: wrap; }
.ws-hardware h2 { margin: 0; max-width: 24ch; }
.ws-hardware-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 720px) { .ws-hardware-grid { grid-template-columns: repeat(4, 1fr); } }
.hw-card {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
  overflow: hidden;
}
.hw-card:hover { transform: translateY(-3px); border-color: var(--asrock); box-shadow: var(--shadow-glow-green); }
.hw-card .hw-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--asrock-tint);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--asrock-dark);
  font-weight: 700;
}
.hw-card h4 { font-size: 1.05rem; margin: 0 0 var(--space-2); }
.hw-card p { font-size: 0.85rem; color: var(--text-dim); margin: 0; line-height: 1.4; }
.hw-card .arrow { color: var(--text-muted); font-family: var(--font-mono); font-size: 1rem; align-self: flex-end; transition: color var(--dur-fast), transform var(--dur-fast); }
.hw-card:hover .arrow { color: var(--asrock-hi); transform: translate(3px, -3px); }

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

/* =================================================================
   AI Hardware hero — LIGHT split layout  (EN page only)
   Added 2026-08 for AICenter/workstation.html.
   ADDITIVE ONLY: every rule below is scoped under the new `.hw-hero`
   wrapper, so the legacy `.ws-hero` block above — still used by
   workstation.tw.html — renders exactly as before.
   ================================================================= */
.hw-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--space-16));
  padding-bottom: var(--space-16);
  background: var(--bg-page);   /* light ground — inverse of the dark mock */
  color: var(--text);
}
/* barely-there ambient tint, keeps this hero in the same family as the
   other AI Center heroes without lifting off the white ground */
.hw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 50% at 8% -20%, rgba(133, 194, 38, 0.10), transparent 62%),
    radial-gradient(ellipse 55% 40% at 96% 8%, rgba(37, 99, 235, 0.05), transparent 64%);
  pointer-events: none;
}
.hw-hero > * { position: relative; }

/* ---- layout: 45 / 55 side by side from 901px up, stacked below ---- */
.hw-hero-grid {
  display: grid;
  /* minmax(0, …) so the diagram's intrinsic width can't push the track
     (and the page) wider than the viewport on small screens */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 901px) {
  .hw-hero-grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    gap: var(--space-12);
  }
}

/* ---- left column: copy ---- */
.hw-hero .hw-hero-copy { min-width: 0; }
.hw-hero h1 {
  color: var(--text);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0 0 var(--space-6);
  /* line break is an explicit <br> after the green span */
}
.hw-hero .lede {
  color: var(--text-dim);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.6;
  max-width: 38rem;
  margin: 0 0 var(--space-8);
}
.hw-hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- right column: stack-diagram panel (light, raised) ---- */
.hw-hero-panel {
  margin: 0;
  width: 100%;
  max-width: min(620px, 100%);   /* 620px matches the card/copy ratio in the mock */
  justify-self: center;
  padding: var(--space-4);   /* the diagram carries its own inner margin */
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.hw-hero-panel > img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
@media (min-width: 901px) {
  /* flush the card to the container edge, as in the mock */
  .hw-hero-panel { justify-self: end; }
}
@media (max-width: 900px) {
  .hw-hero { padding-bottom: var(--space-12); }
  .hw-hero-panel { padding: var(--space-3); }
}

/* ===== 01 Why On-Prem (EN redesign) ===== */
/* =================================================================
   01 · Why On-Prem AI  (EN AI Hardware page)
   Added 2026-08 for AICenter/workstation.html.
   ADDITIVE ONLY: every rule below is scoped under the new `.hw-why`
   wrapper, so the legacy `.ws-why` bento block — still used by
   workstation.tw.html — renders exactly as before. Public classes
   (.eyebrow, .wrap-wide, h2/h3/p from base.css) are reused as-is and
   never redefined here.
   ================================================================= */
.hw-why {
  padding: var(--space-20) 0;
  background: var(--bg-page);
  color: var(--text);
}

/* ---- intro block: eyebrow / headline / lede ---- */
.hw-why h2 {
  max-width: 26ch;          /* breaks as "Enterprise AI needs control, / not just compute." */
  margin: 0 0 var(--space-5);
  color: var(--text);
}
.hw-why-lede {
  max-width: 68ch;
  margin: 0 0 var(--space-12);
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ---- card row: 1 col (narrow) -> 2 cols (>=640px, covers ~900px)
        -> 4 equal cols (>=1100px, where four bodies still read well) ---- */
.hw-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .hw-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}
@media (min-width: 1100px) {
  .hw-why-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* ---- card: white ground, hairline border, rounded (all four identical) ---- */
.hw-why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 220px;
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base),
              box-shadow var(--dur-base);
}
/* short brand-green rule above the card title */
.hw-why-card::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--asrock);
}
@media (hover: hover) {
  .hw-why-card:hover {
    transform: translateY(-3px);
    border-color: rgba(133, 194, 38, 0.45);
    box-shadow: var(--shadow-md);
  }
}
.hw-why-card h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.hw-why-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-dim);
}

@media (min-width: 1100px) {
  .hw-why-card { padding: var(--space-8) var(--space-6); }
}
@media (max-width: 639px) {
  .hw-why { padding: var(--space-16) 0; }
  .hw-why-card { min-height: 0; }
}

/* ===== 02 AI Infrastructure Stack (EN redesign) ===== */
/* Additive only. Every selector below is new and namespaced under
   `.hw-stack*`; nothing here redefines an existing selector, so the legacy
   `.ws-*` blocks (still used by workstation.tw.html) are untouched. */

.hw-stack {
  background: var(--bg-page);
  color: var(--text);
}

/* ---- heading block: left-aligned, same rhythm as the 01 section ---- */
.hw-stack-head { max-width: var(--max-w); }
.hw-stack-title {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 26ch;
  margin: 0 0 var(--space-5);
}
.hw-stack-lede {
  color: var(--text-dim);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0;
}

/* ---- the stack: full-width rows, top to bottom, container inset ~8%
        each side so it sits slightly narrower than the heading ---- */
.hw-stack-rows {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  width: 84%;
  margin: var(--space-12) auto 0;
  padding: 0;
}

.hw-stack-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.hw-stack-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.hw-stack-row-name {
  flex: 0 0 clamp(11rem, 26%, 17rem);
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.hw-stack-row-desc {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---- dark row (bottom of the stack = ASRock hardware layer) ---- */
.hw-stack-row.is-dark {
  background: var(--bg-dark);
  border-color: var(--border-on-dark);
}
.hw-stack-row.is-dark:hover {
  border-color: var(--asrock);
  box-shadow: var(--shadow-glow-green);
}
.hw-stack-row.is-dark .hw-stack-row-name { color: var(--text-on-dark); }
.hw-stack-row.is-dark .hw-stack-row-desc { color: var(--text-on-dark-dim); }

/* ---- RWD ---- */
@media (max-width: 1024px) {
  .hw-stack-rows { width: 92%; }
}
@media (max-width: 700px) {
  .hw-stack-rows {
    width: 100%;
    gap: var(--space-3);
    margin-top: var(--space-10);
  }
  /* narrow: name stacks above description */
  .hw-stack-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-5);
  }
  .hw-stack-row-name { flex: 0 0 auto; }
  .hw-stack-row-desc { font-size: 0.9rem; }
}

/* ===== 03 Choose by Workload (EN redesign) ===== */
/* ADDITIVE ONLY — every selector below is new and namespaced under
   `.hw-load*`; nothing here redefines an existing class. Note the
   pre-existing `.hw-card` block (ASRock Hardware Ecosystem) is a
   different name and is left untouched. */

.hw-load {
  padding: var(--space-20) 0;
  background: var(--bg-page);          /* light ground, separates it from the white 02 section */
  border-top: 1px solid var(--border);
  color: var(--text);
}

/* ---- section header ---- */
.hw-load-header {
  max-width: 62ch;
  margin-bottom: var(--space-12);
}
.hw-load-header h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-5);
  max-width: 24ch;
}
.hw-load-lede {
  color: var(--text-dim);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  margin: 0;
}

/* ---- card grid: 1 col → 2 cols → 4 cols ---- */
.hw-load-grid {
  display: grid;
  /* minmax(0, …) so long words can't push a track wider than the viewport */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
@media (min-width: 601px) {
  .hw-load-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hw-load-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- card: white, hairline border, rounded ---- */
.hw-load-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base),
              box-shadow var(--dur-base);
}
@media (min-width: 1024px) {
  .hw-load-card { padding: var(--space-8); }
}
.hw-load-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.hw-load-card h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  color: var(--text);
}
.hw-load-ideal {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}
/* blank-line rhythm between the two paragraphs; margin-top:auto also keeps
   the "Recommended" line bottom-aligned across cards of unequal copy length */
.hw-load-rec {
  margin: auto 0 0;          /* margin-top:auto — bottom-align the line */
  padding-top: var(--space-6);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.55;
  font-weight: 600;
}

/* ---- dark variant (4th card: AI Factory) ---- */
.hw-load-card.is-dark {
  background: var(--bg-dark);
  border-color: var(--border-on-dark);
  color: var(--text-on-dark);
}
.hw-load-card.is-dark:hover {
  border-color: var(--asrock);
  box-shadow: var(--shadow-glow-green);
}
.hw-load-card.is-dark h3 { color: var(--text-on-dark); }
.hw-load-card.is-dark .hw-load-ideal { color: var(--text-on-dark-dim); }
.hw-load-card.is-dark .hw-load-rec { color: var(--asrock-light); }

/* ===== CTA (EN redesign — light close on the same ground as .hw-hero,
   Next Step pill centred like the center/*.html product CTAs; 2026-08-04) ===== */
/* Additive only; legacy .ws-cta kept for workstation.tw.html. */
.hw-cta {
  background: var(--bg-page);
  text-align: center;
}
.hw-cta-body {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.hw-cta-body h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-5);
}
.hw-cta-body p {
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 var(--space-8);
}
.hw-cta-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* =================================================================
   design-system typography (body.ds-type scope)
   -----------------------------------------------------------------
   Implements AI_CENTER_DESIGN_SYSTEM.md § Typography for the AI Hardware
   page, mirroring the block at the end of pages/ai-home.css.
   EVERY rule below is scoped to .ds-type, a class set on <body> by all
   four workstation builds (EN/TC/JP/KR). The legacy .ws-hero / .ws-why /
   .ws-specs / .ws-hardware / .ws-cta blocks earlier in this file are kept
   for git history only; nothing here can reach a page that does not opt
   in. Never add a bare selector to this block.
   Spec sizes/tracking were tuned for Latin type; CJK headlines inherit
   them — flag visual issues rather than forking per language.

   Spec values are desktop-first fixed px; clamp() is used only so the
   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.
   ================================================================= */

/* --- 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 --- */
.ds-type .hw-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;
  color: #111827;
}

/* --- 2 · section headlines — 700 / 48px / 1.1 / -0.03em / #111827 ---
   01 Why On-Prem, 02 Stack, 03 Workload, 04 Related Products, 05 Related
   Solutions and the closing CTA all sit on light ground, so the spec
   colour applies to every one of them (this page has no dark headline). */
.ds-type h2,
.ds-type .hw-why h2,
.ds-type .hw-stack-title,
.ds-type .hw-load-header h2,
.ds-type .ws-products .header h2,
.ds-type .ws-use h2,
.ds-type .hw-cta-body 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;
  color: #111827;
}

/* --- 3 · card titles — 600 / 28px / 1.25 ---
   the four 01 cards, the four 03 workload cards, the four 05 solution
   cards, and the three 04 product-line headings that open each card row.
   Colour is deliberately omitted so the dark variants keep their white
   text (.hw-load-card.is-dark h3). */
.ds-type .hw-why-card h3,
.ds-type .hw-load-card h3,
.ds-type .ws-use-card h3,
.ds-type .ws-line-header h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.25;
}
/* levels the spec does not name — held one step below a card title
   (20px / 600) so the hierarchy still reads: the 02 stack-row labels sit
   under the section headline, and the 04 product model names sit under
   the product-line heading above them. Colour again omitted for the dark
   stack row (.hw-stack-row.is-dark .hw-stack-row-name). */
.ds-type .hw-stack-row-name,
.ds-type .ws-product-card .model {
  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 --- */
.ds-type .hw-hero .lede,
.ds-type .hw-why-lede,
.ds-type .hw-stack-lede,
.ds-type .hw-load-lede,
.ds-type .ws-products .header p,
.ds-type .hw-cta-body p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.65;
}
/* measure: every existing cap already lands inside the band at 20px
   (hero 38rem ≈ 60ch, 01 lede 68ch, 02 lede 62ch, 03 header 62ch,
   04 header 56ch, CTA body 720px ≈ 72ch) — none is re-declared here */

/* --- 5 · standard body copy — 400 / 18px / 1.6 --- */
.ds-type .hw-why-card p,
.ds-type .hw-stack-row-desc,
.ds-type .hw-load-ideal,
.ds-type .hw-load-rec,
.ds-type .ws-line-header p,
.ds-type .ws-use-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
}
/* .hw-load-rec is the card's recommendation line rather than prose, so it
   keeps the 600 it already had; every other member of this tier is 400 */
.ds-type .hw-load-rec {
  font-weight: 600;
}
/* the product cards' spec bullets are a dense enumeration, not prose: the
   spec does not name them, so they are held one step below standard body
   (16px / 400 / 1.6) */
.ds-type .ws-product-card .specs li {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}
/* the supported-GPU list is subordinate detail beneath the spec
   bullets, so both its title line and vendor rows sit one step below
   them (14px); weights stay with the component layer (600 / 400) */
.ds-type .ws-product-card .gpu-support .gpu-support-title,
.ds-type .ws-product-card .gpu-support p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  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. .btn-green and
   .btn-secondary raise the weight to 700 in components.css; the spec's 600
   wins here because .ds-type .btn out-specifies a single class. */
.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 this page 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 nav row. */
.ds-type .btn-sm {
  min-height: 40px;
}

/* --- 8 · small labels — 600 / 12px / uppercase / 0.08em ---
   the 01–05 section eyebrows plus the two pill/tag labels (04 product-line
   tag, 05 solution-card tag) */
.ds-type .eyebrow,
.ds-type .ws-line-header .tag,
.ds-type .ws-use-card .tag {
  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 (.breadcrumb, the in-card
   link CTAs .see-all / .learn / .ws-use-card .link, the language menu and the
   footer) keeps its existing relative size; all of it is already >= 12px and
   picks up Inter from step 0. The .learn pill is an in-card link rather than
   a .btn, so it deliberately stays out of the 52px button tier — the same
   call made for .solution-card .cta on the home page. --- */