/* ============================================================
   sections.css — Section-specific layouts
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 96px 24px 72px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(15,170,255,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(255,199,0,.18), transparent 60%),
    linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
}
[data-theme="dark"] .hero-bg {
  background: linear-gradient(180deg, #0F1C35 0%, var(--bg) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--sap-yellow-soft);
  color: #8A6600;
  border: 1px solid #F1D98A;
  font-size: 13px; font-weight: 600;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
  color: var(--ink);
}
.hero h1 .grad {
  background: linear-gradient(90deg, var(--sap-blue) 0%, var(--sap-cyan) 60%, var(--sap-yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h2:not(.sub) {
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 24px;
}
.hero h2.sub {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600; color: var(--sap-blue-deep);
  margin: 0 0 24px; letter-spacing: -0.01em;
}
.hero-desc {
  max-width: 760px; margin: 0 auto 56px;
  color: var(--ink-2); font-size: 17px;
}
.hero-tags {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 32px;
}

/* ---------- Hero — Core Capabilities 12 cards (Phase B) ---------- */
.cap-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: 16px; text-align: left;
}
@media (max-width: 1020px) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .cap-grid { grid-template-columns: 1fr; } }
.cap-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 20px 20px 22px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
  cursor: pointer;
  user-select: none;
}
.cap-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: #BFDCFF;
}
.cap-card:focus-visible {
  outline: 2px solid var(--sap-blue);
  outline-offset: 3px;
}
.cap-card.is-active {
  border-color: var(--sap-blue);
  box-shadow: 0 0 0 3px rgba(0, 112, 242, 0.18), var(--shadow-sm);
  transform: translateY(-2px);
}
.cap-card .cap-no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; color: var(--sap-blue);
  letter-spacing: .08em;
}
.cap-card .cap-icon { font-size: 24px; line-height: 1; margin: 10px 0 12px; }
.cap-card h4 { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.cap-card p  { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; }

/* ---------- Hero — Capability detail (no surrounding box; per-card layout) ---------- */
.cap-detail {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  text-align: left;
  min-height: 220px;
}
.cap-detail-empty {
  display: grid; place-items: center;
  min-height: 180px;
  margin-top: 20px;
  text-align: center;
  color: var(--ink-3);
}
.cap-detail-empty-icon {
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
}
.cap-detail-empty-icon .cap-finger {
  display: inline-block;
  font-size: 38px; line-height: 1;
  transform-origin: 50% 20%;
  animation: capTap 1.6s cubic-bezier(.4,.0,.2,1) infinite;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .12));
}
.cap-detail-empty-icon::after {
  content: '';
  position: absolute; left: 50%; bottom: 4px;
  width: 38px; height: 10px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(15, 100, 180, .35), transparent 70%);
  transform: translateX(-50%) scale(.6);
  animation: capRipple 1.6s ease-out infinite;
  pointer-events: none;
}
[data-theme="dark"] .cap-detail-empty-icon::after {
  /* Dark-on-dark blue is invisible — use SAP-cyan with higher alpha */
  background: radial-gradient(ellipse at center, rgba(111, 192, 255, .55), transparent 70%);
}
.cap-detail-empty p { margin: 0; font-size: 14px; }
@keyframes capTap {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  18%      { transform: translateY(-9px) rotate(-4deg) scale(1.04); }
  38%      { transform: translateY(4px) rotate(3deg) scale(.96); }
  55%      { transform: translateY(-3px) rotate(-2deg) scale(1.02); }
  72%      { transform: translateY(1px) rotate(0) scale(1); }
}
@keyframes capRipple {
  0%, 28% { opacity: 0; transform: translateX(-50%) scale(.5); }
  42%     { opacity: 1; transform: translateX(-50%) scale(1); }
  85%     { opacity: 0; transform: translateX(-50%) scale(1.7); }
  100%    { opacity: 0; transform: translateX(-50%) scale(1.7); }
}
@keyframes capFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cap-detail-empty-icon .cap-finger,
  .cap-detail-empty-icon::after { animation: none; }
}

.capd {
  animation: capFade .25s ease;
  /* Each panel sizes to its actual content + a 20px bottom breathing
     margin — no uniform min-height lock. Different cards will have
     different natural heights, which is fine. */
  padding: 12px 4px 84px;
  display: flex;
  flex-direction: column;
}
.capd-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
/* #10 specifically needs more breathing room between head and the long
   localization lede + desc — applied only to .capd-10 so the other 11
   cards keep their tighter rhythm. */
.capd-10 .capd-hd { margin-bottom: 28px; }
.capd-no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 800; color: var(--sap-blue);
  letter-spacing: .12em;
}
.capd-icon { font-size: 26px; line-height: 1; }
.capd-hd h3 {
  margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em;
}
.capd-cmd {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  background: var(--sap-yellow-soft);
  color: #6E5200;
  border: 1px solid #F1D98A;
  padding: 4px 12px; border-radius: 8px;
  white-space: nowrap;
}
.capd-lede { font-size: 15.5px; color: var(--ink-2); font-weight: 400; margin: 0 0 14px; }
.capd-desc { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin: 0 0 40px; }
.capd-desc code, .capd code {
  font-family: 'JetBrains Mono', monospace; font-size: .9em;
  background: var(--bg); color: var(--ink); padding: 1px 6px; border-radius: 4px;
}

/* — Variant 01 — terminal mockup */
.capd-term {
  background: #0B1B33; color: #E9EFF7;
  border-radius: var(--radius-md); overflow: hidden;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  box-shadow: var(--shadow-md);
}
.capd-term-bar { display: flex; gap: 6px; padding: 10px 14px; background: #071328; border-bottom: 1px solid #1C2C48; }
.capd-term-bar span { width: 10px; height: 10px; border-radius: 999px; background: #2B3D5E; }
.capd-term-bar span:nth-child(1) { background: #FF5F57; }
.capd-term-bar span:nth-child(2) { background: #FEBC2E; }
.capd-term-bar span:nth-child(3) { background: #28C840; }
.capd-term-body { padding: 14px 18px; font-size: 12.5px; line-height: 1.75; white-space: pre-wrap; }
.capd-term .pmt { color: #5D75A0; } .capd-term .ok { color: #6FE3A1; } .capd-term .dim { color: #7B8DAB; }
.capd-term .y { color: var(--sap-yellow); } .capd-term .b { color: #8ED1FF; }

/* — Variant 02 — phase pipeline */
.capd-phases { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-top: 4px; }
.capd-phase {
  flex: 1 1 80px; min-width: 80px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 8px; text-align: center;
}
.capd-phase b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--sap-blue); letter-spacing: .08em; }
.capd-phase span { display: block; font-size: 12px; color: var(--ink); margin-top: 4px; font-weight: 600; }
.capd-phase.hl { background: var(--sap-yellow-soft); border-color: #F1D98A; }
.capd-phase.hl b { color: #B88900; }

/* — Variant 03 — before / after split */
.capd-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.capd-split-col { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.capd-split-col h5 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.capd-split-col.before h5 { color: var(--danger); }
.capd-split-col.after  h5 { color: var(--ok); }
.capd-split-col p { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.55; }
.capd-split-col code { display: inline-block; margin-top: 6px; }
.capd-split-arrow { display: grid; place-items: center; font-size: 22px; color: var(--sap-blue); font-weight: 800; }
@media (max-width: 720px) { .capd-split { grid-template-columns: 1fr; } .capd-split-arrow { transform: rotate(90deg); } }

/* — Variant 04 — severity list */
.capd-sev { display: flex; flex-direction: column; gap: 8px; }
.capd-sev-row {
  display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px;
}
.capd-sev-tag {
  text-align: center; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 800; padding: 4px 0; border-radius: 6px;
  letter-spacing: .08em;
}
.capd-sev-tag.crit { background: var(--danger-soft); color: var(--danger); }
.capd-sev-tag.maj  { background: #FFEFCC; color: #8A6600; }
.capd-sev-tag.min  { background: var(--sap-blue-soft); color: var(--sap-blue-deep); }
.capd-sev-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.capd-sev-text b { color: var(--ink); }

/* — Variant 05 — A vs B mini */
.capd-vs { display: grid; grid-template-columns: 1fr 36px 1fr; gap: 10px; align-items: stretch; }
.capd-vs-col { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.capd-vs-col header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.capd-vs-col header .tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--sap-blue-soft); color: var(--sap-blue-deep); border: 1px solid #BFDCFF; box-shadow: none; }
.capd-vs-col.b header .tag { background: var(--sap-yellow-soft); color: #6E5200; border-color: #F1D98A; }
.capd-vs-col header code { font-size: 12.5px; }
.capd-vs-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.capd-vs-col li { font-size: 12.5px; color: var(--ink-2); display: flex; gap: 8px; }
.capd-vs-col li::before { content: '·'; color: var(--ink-3); }
.capd-vs-mid { display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--ink-3); font-size: 12px; letter-spacing: .12em; }
@media (max-width: 720px) { .capd-vs { grid-template-columns: 1fr; } .capd-vs-mid { padding: 4px 0; } }

/* — Variant 06 — diagnostic flow */
.capd-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.capd-flow-step {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; position: relative;
}
.capd-flow-step b { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--sap-blue); letter-spacing: .08em; }
.capd-flow-step span { display: block; font-size: 13px; color: var(--ink); font-weight: 600; margin-top: 4px; }
.capd-flow-step small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
/* Rounded arrow — SVG with stroke-linecap/join: round so both the shaft
   and the chevron head end in soft caps. Sized small enough to sit
   inside the 28px grid gap between cards without crossing into either
   card's content (≈5px clearance on each side). */
.capd-flow-step:not(:last-child)::after {
  content: '';
  position: absolute; top: 50%; right: -23px;
  transform: translateY(-50%);
  width: 18px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='%230070F2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M2 7 H18 M14 3 L18 7 L14 11'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 112, 242, .25));
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 720px) {
  .capd-flow { grid-template-columns: 1fr; gap: 28px; }
  .capd-flow-step:not(:last-child)::after {
    right: 50%; top: auto; bottom: -18px;
    transform: translateX(50%) rotate(90deg);
  }
}

/* — Variant 06c — 4-step infographic (chevron-stitched panel row) ----
   Replaces the flowchart in #04. Each panel = colored chevron top
   (icon + title) + white bottom (3-line description). The 4 chevrons
   interlock via tip-right + notch-left, forming one continuous flow
   stripe. Color sequence walks the SAP brand gradient: deep blue →
   sap blue → sap cyan → sap yellow. */
.capd-info4-svg {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 20px auto;
}
.capd-info4-svg .info4-bg rect {
  fill: var(--white);
  stroke: var(--line);
  stroke-width: 1;
}
.capd-info4-svg .info4-bd text {
  fill: var(--ink-2);
  font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
}
.capd-info4-svg .info4-tt-w { fill: #FFFFFF; }
.capd-info4-svg .info4-tt-d { fill: #4A3500; }

[data-theme="dark"] .capd-info4-svg .info4-bd text { fill: var(--ink-2); }

/* — Variant 06b — horizontal flowchart with mixed shapes + theme-aware gradients */
.capd-fc-svg {
  display: block; width: 100%; max-width: 760px; height: auto;
  margin: 4px auto 0;
  color: var(--sap-blue);
}
.capd-fc-svg .cyl-body { fill: url(#gradCyl); stroke: var(--sap-blue); stroke-width: 1.4; }
.capd-fc-svg .diamond  { fill: url(#gradDia); stroke: #E0A91A;        stroke-width: 1.4; }
.capd-fc-svg .rect     { fill: url(#gradRect); stroke: var(--sap-blue); stroke-width: 1.4; }
.capd-fc-svg .doc      { fill: url(#gradDoc); stroke: var(--sap-blue); stroke-width: 1.4; }
.capd-fc-svg .doc-fold { fill: none; stroke: var(--sap-blue); stroke-width: 1.4; }
.capd-fc-svg .conn     { stroke: var(--sap-blue); stroke-width: 1.4; fill: none; }

/* Gradient stops — light theme */
.capd-fc-svg .g-cyl-0  { stop-color: #C7E5FF; stop-opacity: 1; }
.capd-fc-svg .g-cyl-1  { stop-color: #0FAAFF; stop-opacity: 0.50; }
.capd-fc-svg .g-dia-0  { stop-color: #FFE89C; stop-opacity: 1; }
.capd-fc-svg .g-dia-1  { stop-color: #FFC700; stop-opacity: 0.60; }
.capd-fc-svg .g-rect-0 { stop-color: #FFFFFF; stop-opacity: 1; }
.capd-fc-svg .g-rect-1 { stop-color: #0070F2; stop-opacity: 0.20; }
.capd-fc-svg .g-doc-0  { stop-color: #D5F0E3; stop-opacity: 1; }
.capd-fc-svg .g-doc-1  { stop-color: #0E8F62; stop-opacity: 0.45; }

.capd-fc-svg .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 800;
  fill: var(--sap-blue);
  text-anchor: middle; letter-spacing: 0.12em;
}
.capd-fc-svg .title {
  font-size: 14px; font-weight: 700;
  fill: var(--ink); text-anchor: middle;
}
.capd-fc-svg .meta {
  font-size: 11px;
  fill: var(--ink-3); text-anchor: middle;
}

/* — Vertical rhythm between content blocks inside .capd panel — */
.capd > .capd-flow,
.capd > .capd-fc-svg,
.capd > .capd-info4-svg,
.capd > .capd-split,
.capd > .capd-tree,
.capd > .capd-xlsx,
.capd > .capd-quad,
.capd > .capd-phases,
.capd > .capd-sev,
.capd > .capd-vs,
.capd > .capd-chips,
.capd > .capd-flags,
.capd > .capd-marquee,
.capd > .capd-carousel,
.capd > .capd-active-country,
.capd > .capd-combos,
.capd > .capd-esc,
.capd > .capd-modules,
.capd > .capd-term,
.capd > .agent-heads,
.capd > .modules-cloud,
.capd > .rules-list,
.capd > .setup-wrap,
.capd > .tagline-strong,
.capd > figure { margin-top: 44px; }

/* — Variant 07 — inventory tree */
.capd-tree {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; line-height: 1.85; color: var(--ink-2);
}
.capd-tree .root { color: var(--sap-blue); font-weight: 700; }
.capd-tree .grp  { color: var(--ink); font-weight: 700; }
.capd-tree .num  { color: #B88900; font-weight: 700; }

/* — Variant 07b — xlsx output sheet list (replaces flat tree text) ----
   Header bar with file name + each sheet as a separated row with index
   badge, sheet title, and one-line description. The trailing Warnings
   row is amber-tinted to set it apart from the regular sheets. */
.capd-xlsx {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.capd-xlsx-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.capd-xlsx-head .icon { font-size: 20px; line-height: 1; }
.capd-xlsx-head code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: transparent; padding: 0;
}
.capd-xlsx-head .meta {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-3); letter-spacing: .04em;
}
.capd-xlsx-rows {
  list-style: none; margin: 0; padding: 0;
}
.capd-xlsx-rows li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.capd-xlsx-rows li:last-child { border-bottom: 0; }
.capd-xlsx-no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 800;
  color: var(--sap-blue);
  background: var(--sap-blue-soft);
  padding: 6px 0; text-align: center;
  border-radius: 6px;
  letter-spacing: .04em;
}
.capd-xlsx-rows li > div h6 {
  margin: 0 0 4px;
  font-size: 14px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}
.capd-xlsx-rows li > div p {
  margin: 0;
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
.capd-xlsx-rows li.warn { background: rgba(255, 199, 0, .05); }
.capd-xlsx-rows li.warn .capd-xlsx-no {
  color: #B88900; background: var(--sap-yellow-soft);
}

[data-theme="dark"] .capd-xlsx-head { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .capd-xlsx-no   { background: rgba(15, 170, 255, .14); }
[data-theme="dark"] .capd-xlsx-rows li.warn          { background: rgba(255, 199, 0, .06); }
[data-theme="dark"] .capd-xlsx-rows li.warn .capd-xlsx-no {
  background: rgba(255, 199, 0, .14); color: var(--sap-yellow);
}

/* — Variant 08 — 2x2 quadrant */
.capd-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.capd-quad-cell {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px;
}
.capd-quad-cell .icon { font-size: 22px; margin-bottom: 6px; }
.capd-quad-cell h5 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.capd-quad-cell h5 code { font-size: 12px; margin-left: 6px; }
.capd-quad-cell p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 720px) { .capd-quad { grid-template-columns: 1fr; } }

/* — Variant 09 — industry chips ----
   .chip2 styled as a standalone label so it works inside any container
   (.capd-chips static flex-wrap OR .capd-marquee horizontal slider). */
.capd-chips { display: flex; flex-wrap: wrap; gap: 20px; }
.chip2 {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink); font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.chip2 em { color: var(--ink-3); font-style: normal; font-size: 11.5px; font-weight: 500; }

/* — Variant 10 — country flag grid */
.capd-flags { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
@media (max-width: 720px) { .capd-flags { grid-template-columns: repeat(4, 1fr); } }
.capd-flag {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 6px; text-align: center;
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.capd-flag .em { font-size: 22px; line-height: 1; }
.capd-flag .nm { font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.capd-flag .tx { font-size: 10px; color: var(--ink-3); }

/* — Variant 09b — Industry chip marquee (infinite horizontal slide) ----
   Reuses .chip2 visuals; the JS clones children once for a seamless -50% loop.
   Marquee variant scales chips ~8% larger and offsets odd/even chips
   vertically so they slide in a zigzag rhythm. */
.capd-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Extra vertical room for taller chips + zigzag offset */
  padding: 24px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.capd-marquee-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: capdMqSlide var(--capd-mq-dur, 40s) linear infinite;
  will-change: transform;
}
.capd-marquee:hover .capd-marquee-track,
.capd-marquee:focus-within .capd-marquee-track { animation-play-state: paused; }
.capd-marquee .chip2 {
  flex: 0 0 auto;
  white-space: nowrap;
  gap: 8px;
  /* +14% size on top of the previous bump — padding & font scaled together */
  padding: 10px 16px;
  font-size: 16px;
}
.capd-marquee .chip2 em { font-size: 14px; }
/* Zigzag: odd chips ride high, even chips ride low */
.capd-marquee-track > :nth-child(odd)  { transform: translateY(-14px); }
.capd-marquee-track > :nth-child(even) { transform: translateY(14px);  }
@keyframes capdMqSlide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .capd-marquee-track { animation: none !important; }
}

/* — Variant 10b — Country step-snap carousel + synced detail panel ----
   5 cards visible. JS translates the track one card-width per tick (auto
   step-step-step rather than continuous flow), then marks the new center
   card with .is-active — size + sap-blue border ring + colored .nm.
   The active card is centered to the *viewport* horizontally (not the
   panel center) so it lands at the eye-line of the page.
   Below the track sits .capd-active-country which JS keeps in sync with
   the active card so the country's full localization detail appears in a
   readable block — this also fills the cap-detail height. */
.capd-carousel {
  position: relative;
  width: 100%;
  /* Lock width to exactly 5 cards: 5×220 + 4×10 = 1140px.
     This prevents a 6th card from peeking in at the edge and — combined
     with margin: 0 auto inside the page-centered .hero-inner — places
     the carousel's geometric center on the page's horizontal centerline,
     so the active (center) card lands at "웹 정가운데". */
  max-width: 1140px;
  margin: 0 auto;
  overflow: hidden;
  padding: 44px 0 36px;
  /* No mask — exactly 5 cards fit edge-to-edge with hard cuts */
}
.capd-carousel-track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  will-change: transform;
  /* No CSS animation — JS controls translateX each tick. */
}

/* 220 × 5 + 10 × 4 = 1140px, fits inside the 1232px hero-inner content area
   with mask fade room on both sides */
.capd-carousel .capd-flag {
  flex: 0 0 220px;
  width: 220px;
  padding: 22px 16px;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--white);
  transform-origin: center center;
  transform: scale(.92);
  opacity: .55;
  transition:
    transform .55s cubic-bezier(.4, 0, .2, 1),
    opacity   .55s cubic-bezier(.4, 0, .2, 1),
    border-color .35s ease,
    box-shadow   .35s ease,
    color        .35s ease;
  will-change: transform, opacity;
}
.capd-carousel .capd-flag .em { font-size: 28px; }
/* Twemoji renders flags as <img class="emoji"> inside .em — size them
   to the surrounding font-size and clear default margins so they sit
   centered in the card. */
.capd-carousel .capd-flag .em img.emoji {
  width: 1em; height: 1em;
  margin: 0; vertical-align: middle;
  display: block;
}
.capd-carousel .capd-flag .nm { font-size: 17px; letter-spacing: .06em; }
.capd-carousel .capd-flag .tx { font-size: 12.5px; }

/* Highlighted card — NO background tint, only border ring + .nm recolored.
   Halo shadow is intentionally tight + low opacity ("살짝만 들어가게"). */
.capd-carousel .capd-flag.is-active {
  transform: scale(1.10);
  opacity: 1;
  border-color: var(--sap-blue);
  /* Doubled-border ring via shadow so there's no layout shift */
  box-shadow:
    0 0 0 1px var(--sap-blue),
    0 4px 10px rgba(0, 112, 242, .10);
}
.capd-carousel .capd-flag.is-active .nm { color: var(--sap-blue); }

[data-theme="dark"] .capd-carousel .capd-flag.is-active {
  border-color: var(--sap-cyan);
  box-shadow:
    0 0 0 1px var(--sap-cyan),
    0 4px 10px rgba(15, 170, 255, .14);
}
[data-theme="dark"] .capd-carousel .capd-flag.is-active .nm { color: var(--sap-cyan); }

@media (prefers-reduced-motion: reduce) {
  .capd-carousel .capd-flag {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* — Synced active-country detail panel — large flag + name + full
   localization info (NF-e · SPED · CFOP · ICMS/IPI/PIS/COFINS, etc.) ---- */
.capd-active-country {
  padding: 32px 36px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  /* Light hairline shadow — no fuzzy halo */
  box-shadow: 0 1px 2px rgba(11,27,51,.04);
  min-height: 140px;
  transition: box-shadow .35s ease, border-color .35s ease;
}
.capd-active-country .ac-flag {
  font-size: 52px; line-height: 1;
}
.capd-active-country .ac-flag img.emoji {
  width: 1em; height: 1em;
  margin: 0; vertical-align: middle;
  display: block;
}
.capd-active-country .ac-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.capd-active-country .ac-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--sap-blue); text-transform: uppercase;
}
.capd-active-country .ac-name {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); margin: 0;
}
.capd-active-country .ac-detail {
  font-size: 14.5px; color: var(--ink-2); line-height: 1.6;
  margin: 6px 0 0;
  word-break: keep-all;
}
.capd-active-country .ac-detail code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--bg); color: var(--ink);
}
/* Smooth content swap: applied via JS class .ac-fading toggle */
.capd-active-country .ac-meta,
.capd-active-country .ac-flag {
  transition: opacity .25s ease, transform .25s ease;
}
.capd-active-country.ac-fading .ac-meta,
.capd-active-country.ac-fading .ac-flag {
  opacity: 0; transform: translateY(-4px);
}

[data-theme="dark"] .capd-active-country .ac-eyebrow { color: var(--sap-cyan); }

/* — Variant 11 — module combo equations */
.capd-combos { display: flex; flex-direction: column; gap: 10px; }
.capd-combo {
  display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px;
}
.capd-combo-eq {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 800; color: var(--sap-blue);
}
.capd-combo-eq .arrow { color: var(--ink-3); font-weight: 800; }
.capd-combo-eq .out { color: #B88900; }
.capd-combo p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 720px) { .capd-combo { grid-template-columns: 1fr; gap: 4px; } }

/* — Variant 12 — escalation chain */
.capd-esc { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }
.capd-esc-node {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; flex: 1 1 130px; min-width: 130px;
}
.capd-esc-node b { display: block; font-size: 12px; font-weight: 800; color: var(--ink); }
.capd-esc-node span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.capd-esc-arrow { display: grid; place-items: center; font-size: 18px; color: var(--sap-blue); font-weight: 800; padding: 0 4px; }
.capd-esc-block {
  background: var(--sap-blue-soft); border: 1px dashed #BFDCFF; border-radius: 10px;
  padding: 10px 14px; flex: 1 1 200px; min-width: 200px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--sap-blue-deep);
}
.capd-modules { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.capd-modules .m {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 10px; font-size: 12px; font-weight: 700; color: var(--ink);
}
.capd-modules .m.bc { background: var(--sap-yellow-soft); color: #6E5200; border-color: #F1D98A; }

/* Dark theme tweaks */
[data-theme="dark"] .capd-phase,
[data-theme="dark"] .capd-split-col,
[data-theme="dark"] .capd-sev-row,
[data-theme="dark"] .capd-vs-col,
[data-theme="dark"] .capd-flow-step,
[data-theme="dark"] .capd-quad-cell,
[data-theme="dark"] .capd-flag,
[data-theme="dark"] .capd-combo,
[data-theme="dark"] .capd-esc-node,
[data-theme="dark"] .capd-chips .chip2 { background: var(--white); }
[data-theme="dark"] .capd-tree { background: #0B1425; }
[data-theme="dark"] .capd-sev-tag.maj { background: #3A2E12; color: #E5C470; }
/* Gradient stops — dark theme override */
[data-theme="dark"] .capd-fc-svg .g-cyl-0  { stop-color: rgba(15, 170, 255, .14); }
[data-theme="dark"] .capd-fc-svg .g-cyl-1  { stop-color: rgba(15, 170, 255, .55); }
[data-theme="dark"] .capd-fc-svg .g-dia-0  { stop-color: rgba(255, 199, 0, .14); }
[data-theme="dark"] .capd-fc-svg .g-dia-1  { stop-color: rgba(255, 199, 0, .50); }
[data-theme="dark"] .capd-fc-svg .g-rect-0 { stop-color: rgba(255, 255, 255, .04); }
[data-theme="dark"] .capd-fc-svg .g-rect-1 { stop-color: rgba(15, 170, 255, .32); }
[data-theme="dark"] .capd-fc-svg .g-doc-0  { stop-color: rgba(78, 215, 160, .14); }
[data-theme="dark"] .capd-fc-svg .g-doc-1  { stop-color: rgba(78, 215, 160, .50); }

/* ---------- Section Layout ---------- */
section.block {
  padding: 84px 24px;
  border-top: 1px solid var(--line);
  background: var(--white);
}
section.block.alt { background: var(--bg); }
.section-inner { max-width: 1280px; margin: 0 auto; }
.section-head { max-width: 940px; margin: 0 0 40px; }
.section-kicker {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sap-blue);
  margin-bottom: 12px;
}
.section-kicker.yellow { color: #B88900; }
.section-title {
  font-size: clamp(28px, 3.4vw, 34px);
  font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 14px; color: var(--ink); line-height: 1.2;
}
.section-lede {
  font-size: 17px; color: var(--ink-2); margin: 0;
}

/* ---------- Core Mechanism ----------
   Asymmetric grid: right panel (sc4sap) wider to emphasize improved layer.
   Ratio ~0.85 : auto : 1.2 = before panel narrower, after panel ~40% wider. */
.mech-grid {
  display: grid;
  grid-template-columns: 0.85fr auto 1.2fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .mech-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Transition chevron between panels — stroke-only, no background */
.mech-arrow {
  --rot: 0deg;
  align-self: center;
  justify-self: center;
  display: grid; place-items: center;
  width: 72px; height: 72px;
  color: var(--sap-blue);
  transform: rotate(var(--rot));
  filter: drop-shadow(0 2px 6px rgba(0, 112, 242, .18));
  pointer-events: none;
}
.mech-arrow svg {
  width: 56px; height: 56px;
  display: block;
  animation: mech-arrow-tick 1.8s ease-in-out infinite;
}

/* Fade-in gradient on the second chevron for a subtle "trailing" feel */
.mech-arrow svg path:nth-child(2) { opacity: .55; }

@keyframes mech-arrow-tick {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* Mobile — panels stack vertically, rotate chevron 90° (points down) */
@media (max-width: 860px) {
  .mech-arrow {
    --rot: 90deg;
    width: 56px; height: 56px;
  }
  .mech-arrow svg { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .mech-arrow svg { animation: none; }
}

/* ---------- Comfortable / Setup ---------- */
.setup-wrap {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center;
}
@media (max-width: 900px) { .setup-wrap { grid-template-columns: 1fr; } }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex; gap: 12px; padding: 14px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--ink-2);
}
.check-list li:last-child { border-bottom: 0; }
.check-list .check {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px;
  background: var(--sap-blue); color: white;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
  margin-top: 2px;
}
.terminal {
  background: #0B1B33; color: #E9EFF7;
  border-radius: var(--radius-lg); padding: 0;
  box-shadow: var(--shadow-md); overflow: hidden;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.terminal-bar {
  display: flex; gap: 6px; padding: 12px 16px;
  background: #071328; border-bottom: 1px solid #1C2C48;
}
.terminal-bar span { width: 12px; height: 12px; border-radius: 999px; background: #2B3D5E; }
.terminal-bar span:nth-child(1) { background: #FF5F57; }
.terminal-bar span:nth-child(2) { background: #FEBC2E; }
.terminal-bar span:nth-child(3) { background: #28C840; }
.terminal-body { padding: 20px 22px; font-size: 14px; line-height: 1.75; }
.terminal-body .cmd { color: #8ED1FF; }
.terminal-body .ok  { color: #6FE3A1; }
.terminal-body .dim { color: #7B8DAB; }
.terminal-body .y   { color: var(--sap-yellow); }
.terminal-body .prompt { color: #5D75A0; }
.tagline-strong {
  margin-top: 26px; padding: 18px 22px;
  border-left: 4px solid var(--sap-yellow);
  background: var(--sap-yellow-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-weight: 600; color: var(--ink);
}

/* ---------- Specialist ---------- */
.agent-heads {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 34px;
}
@media (max-width: 860px) { .agent-heads { grid-template-columns: 1fr; } }
.agent-head {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.agent-head::before {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 120px; height: 120px; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(15,170,255,.18), transparent);
}
.agent-head.yellow::before { background: radial-gradient(closest-side, rgba(255,199,0,.25), transparent); }
.agent-head .count {
  display: inline-block; background: var(--ink); color: white;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.agent-head.yellow .count { background: var(--sap-yellow); color: #6E5200; }
.agent-head h4 { margin: 10px 0 6px; font-size: 18px; font-weight: 700; }
.agent-head p  { margin: 0; color: var(--ink-2); font-size: 14px; }

.agent-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 720px) { .agent-grid { grid-template-columns: 1fr; } }
.agent-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.agent-row code {
  font-size: 13px; padding: 2px 8px; border-radius: 6px;
  background: var(--sap-blue-soft); color: var(--sap-blue-deep);
  font-weight: 600; white-space: nowrap;
}
.agent-row span { color: var(--ink-2); font-size: 14px; }

.modules-cloud {
  margin-top: 24px; padding: 20px 24px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.modules-cloud h4 {
  margin: 0 0 12px; font-size: 15px; color: var(--ink-3);
  font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.rules-list {
  margin-top: 30px; padding: 22px 26px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
}
.rules-list h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.rules-list ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.rules-list ul li { margin-bottom: 8px; }
.rules-list ul li::marker { color: var(--sap-blue); }

/* ---------- Development (Phases) ---------- */
.phase-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 1020px) { .phase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .phase-grid { grid-template-columns: 1fr; } }
.phase-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 18px 18px 20px; position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.phase-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #BFDCFF; }
.phase-no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  color: white; background: var(--sap-blue);
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  margin-bottom: 10px; letter-spacing: .05em;
}
.phase-card.y .phase-no { background: var(--sap-yellow); color: #6E5200; }
.phase-card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.phase-card p  { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

.conv-list {
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 760px) { .conv-list { grid-template-columns: 1fr; } }
.conv-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; background: var(--white);
  border: 1px solid var(--line); border-left: 4px solid var(--sap-yellow);
  border-radius: var(--radius-sm);
}
.conv-item svg { flex-shrink: 0; color: var(--sap-blue); margin-top: 2px; }
.conv-item span { color: var(--ink-2); font-size: 14px; }

.review-wrap {
  margin-top: 28px; padding: 22px 26px;
  border-radius: var(--radius-lg); background: var(--sap-blue-soft);
  border: 1px solid #BFDCFF; color: var(--ink);
}

/* ---------- Reusability / CBO ---------- */
.reuse-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 10px;
}
@media (max-width: 900px) { .reuse-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .reuse-steps { grid-template-columns: minmax(0, 1fr); } }
.step {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 18px;
  position: relative;
  min-width: 0;
}
.step p { overflow-wrap: anywhere; }
.step code { overflow-wrap: anywhere; word-break: break-all; }
.step .step-n {
  font-size: 28px; font-weight: 800; color: var(--sap-yellow);
  line-height: 1; font-family: 'JetBrains Mono', monospace;
}
.step h5 { margin: 8px 0 6px; font-size: 15px; font-weight: 700; }
.step p  { margin: 0; font-size: 13.5px; color: var(--ink-2); }

.effect-box {
  margin-top: 34px; padding: 26px 28px;
  background: linear-gradient(135deg, #FFFDF2 0%, #FFF6D6 100%);
  border: 1px solid #F1D98A; border-radius: var(--radius-lg);
}
.effect-box h4 { margin: 0 0 12px; font-size: 17px; }
.effect-box ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.effect-box ul li { margin-bottom: 8px; }
.effect-box ul li::marker { color: #B88900; }

/* ---------- CBO Extension Awareness (Phase B, new subsection) ---------- */
.ext-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 900px) { .ext-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ext-grid { grid-template-columns: minmax(0, 1fr); } }
.ext-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 18px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
  min-width: 0;
}
.ext-card p    { overflow-wrap: anywhere; }
.ext-card code { overflow-wrap: anywhere; word-break: break-all; }
.ext-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: #BFDCFF; }
.ext-card .ext-icon { font-size: 24px; line-height: 1; margin-bottom: 8px; }
.ext-card code {
  font-size: 12px; padding: 2px 8px; border-radius: 6px;
  background: var(--sap-blue-soft); color: var(--sap-blue-deep);
  font-weight: 700; letter-spacing: .04em;
}
.ext-card h5 { margin: 10px 0 4px; font-size: 14px; font-weight: 700; }
.ext-card p  { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ---------- Compare Programs (Phase B, new section) ---------- */
.compare-wrap {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center;
}
@media (max-width: 900px) { .compare-wrap { grid-template-columns: 1fr; } }
.dim-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px;
}
@media (max-width: 560px) { .dim-grid { grid-template-columns: 1fr; } }
.dim-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--ink-2);
}
.dim-item .dim-n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  background: var(--sap-blue-soft); color: var(--sap-blue-deep);
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
}
/* ---------- Global Template ---------- */
.split-intro {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center;
  margin-bottom: 40px;
}
@media (max-width: 900px) { .split-intro { grid-template-columns: 1fr; } }
.split-intro .big-stat {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-sm); text-align: center;
}
.split-intro .big-stat .num {
  font-size: 56px; font-weight: 800; line-height: 1;
  background: linear-gradient(90deg, var(--sap-blue), var(--sap-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.03em;
}
.split-intro .big-stat .num.y {
  background: linear-gradient(90deg, var(--sap-yellow), #E6A900);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.split-intro .big-stat .label { color: var(--ink-2); margin-top: 10px; font-size: 15px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.region-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px;
}
@media (max-width: 1020px) { .region-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .region-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .region-grid { grid-template-columns: 1fr; } }
.region-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: transform .25s cubic-bezier(.4,0,.2,1),
              box-shadow .25s cubic-bezier(.4,0,.2,1),
              border-color .25s;
}
.region-card:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: var(--shadow-md);
  border-color: #BFDCFF;
}
.region-card .icon {
  font-size: 26px; line-height: 1;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  display: inline-block;
}
.region-card:hover .icon { transform: rotate(-6deg) scale(1.1); }
.region-card h5 { margin: 8px 0 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.region-card p  { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

/* ---------- Marquee slider (Global Template) ----------
   Infinite left-sliding loop with zigzag card offsets.
   JS doubles children so animation -50% lands on exact duplicate = seamless.
   Hover pauses; mouseleave resumes. */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 24px 0;          /* vertical room for zigzag offsets */
  margin-bottom: 14px;
  /* Edge fade so cards don't hard-cut at container bounds */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
  animation: marquee-slide var(--marquee-duration, 60s) linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

/* Marquee cards — fixed width overrides the grid default */
.marquee-track .region-card {
  flex: 0 0 220px;
  width: 220px;
  /* Zigzag via margin so :hover transform stays independent */
}
.marquee-track .region-card:nth-child(odd)  { margin-top: 0;    margin-bottom: 20px; }
.marquee-track .region-card:nth-child(even) { margin-top: 20px; margin-bottom: 0;    }

@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Mobile — keep marquee running but narrower cards and slightly shorter zigzag */
@media (max-width: 720px) {
  .marquee-track .region-card { flex-basis: 180px; width: 180px; }
  .marquee-track .region-card:nth-child(odd)  { margin-bottom: 14px; }
  .marquee-track .region-card:nth-child(even) { margin-top: 14px; }
}

/* Respect reduced-motion — stop the slide entirely */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
}

.mechanism-note {
  margin-top: 28px; padding: 20px 24px;
  background: var(--white); border-left: 4px solid var(--sap-blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border: 1px solid var(--line); border-left-width: 4px;
}
.mechanism-note ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); }
.mechanism-note ul li { margin-bottom: 8px; }

/* ---------- Active-Module Awareness (Phase B, new subsection) ---------- */
.active-matrix {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px;
}
@media (max-width: 760px) { .active-matrix { grid-template-columns: 1fr; } }
.active-row {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 18px;
}
.active-row .combo {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  color: var(--sap-blue-deep); letter-spacing: .05em;
  background: var(--sap-blue-soft);
  padding: 3px 10px; border-radius: 999px; display: inline-block;
}
.active-row h5 { margin: 10px 0 4px; font-size: 14px; font-weight: 700; }
.active-row p  { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }

/* ---------- Fit to System ---------- */
.fit-wrap {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
}
@media (max-width: 980px) { .fit-wrap { grid-template-columns: 1fr; } }
.fit-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-sm);
}
.fit-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--sap-blue-soft); color: var(--sap-blue-deep);
}
.fit-card.y .fit-icon { background: var(--sap-yellow-soft); color: #8A6600; }
.fit-card.g .fit-icon { background: #E4F6EE; color: var(--ok); }
.fit-card h4 { margin: 0; font-size: 18px; }
.fit-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.fit-card ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.fit-card ul li { margin-bottom: 6px; }
.fit-card code {
  font-size: 12.5px; padding: 1px 6px; border-radius: 4px;
  background: #F0F3F9; color: var(--ink);
}

.defense-table {
  margin-top: 40px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
.defense-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.defense-table th, .defense-table td {
  padding: 14px 18px; text-align: left;
  border-bottom: 1px solid var(--line); font-size: 14px;
  overflow-wrap: anywhere;
}
.defense-table td code { overflow-wrap: anywhere; word-break: break-word; }
.defense-table th {
  background: #F0F3F9; color: var(--ink); font-weight: 700;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.defense-table tr:last-child td { border-bottom: 0; }
.defense-table td:first-child { font-weight: 700; color: var(--sap-blue-deep); white-space: nowrap; }
/* Tighter padding on narrow viewports so the 역할 column has room to breathe */
@media (max-width: 720px) {
  .defense-table th, .defense-table td { padding: 12px 10px; font-size: 13px; }
  .defense-table th:first-child,
  .defense-table td:first-child { text-align: center; }
}
@media (max-width: 480px) {
  .defense-table th, .defense-table td { padding: 10px 8px; font-size: 12.5px; line-height: 1.55; }
}

.profile-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 26px;
}
@media (max-width: 820px) { .profile-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .profile-row { grid-template-columns: 1fr; } }
.profile {
  padding: 16px 18px; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--line);
}
.profile .name {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  background: var(--ink); color: white; text-transform: uppercase;
}
.profile.strict   .name { background: var(--danger); }
.profile.standard .name { background: var(--sap-blue); }
.profile.minimal  .name { background: #B88900; }
.profile.custom   .name { background: #3A4A63; }
.profile p { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }

.hard-rule {
  margin-top: 32px; padding: 26px 28px;
  background: linear-gradient(135deg, #FFF6D6 0%, #FFE7BF 100%);
  border: 1px solid #F1D98A; border-radius: var(--radius-lg);
}
.hard-rule .tag-hard {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--ink); color: var(--sap-yellow);
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
}
.hard-rule h4 { margin: 10px 0 8px; font-size: 19px; }
.hard-rule p  { margin: 0 0 10px; color: var(--ink-2); }
.hard-rule .kw {
  padding: 2px 8px; border-radius: 5px;
  background: rgba(11,27,51,.08); font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.hard-rule .bad {
  padding: 2px 8px; border-radius: 5px;
  background: var(--danger-soft); color: var(--danger);
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
}

/* ---------- acknowledge_risk demo (Phase B) ---------- */
.ack-demo {
  margin-top: 26px; padding: 22px 24px;
  background: var(--white); border: 1px solid #F1D98A;
  border-radius: var(--radius-lg);
}
.ack-demo h5 {
  margin: 0 0 14px; font-size: 14px; font-weight: 700;
  color: var(--ink); letter-spacing: .02em;
}
.ack-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ack-btn {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; transition: all .15s ease;
}
.ack-btn:hover { border-color: var(--sap-blue); color: var(--sap-blue-deep); }
.ack-btn.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.ack-output {
  padding: 14px 16px; border-radius: var(--radius-md);
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  background: var(--bg); color: var(--ink-2);
  border-left: 4px solid var(--line);
  min-height: 64px;
}
.ack-output.pass { background: #E4F6EE; color: #0E5F42; border-left-color: var(--ok); }
.ack-output.deny { background: var(--danger-soft); color: var(--danger); border-left-color: var(--danger); }

/* ---------- Dark-mode overrides for elements that use --ink as background
   (so they don't flip into unreadable light-on-light surfaces) ---------- */
[data-theme="dark"] .agent-head .count,
[data-theme="dark"] .profile .name {
  background: rgba(255, 255, 255, 0.10);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .hard-rule .tag-hard {
  background: #FFFFFF;
  color: #0B1B33;
}
[data-theme="dark"] .ack-btn.active {
  background: #FFFFFF;
  color: #0B1B33;
  border-color: #FFFFFF;
}
[data-theme="dark"] .ack-output {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .ack-output.pass { background: rgba(78, 215, 160, 0.12); color: #7EEEBB; }
[data-theme="dark"] .ack-output.deny { background: rgba(255, 124, 124, 0.12); color: #FFABAB; }

/* Defense table header row — keep contrast in dark */
[data-theme="dark"] .defense-table th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}
[data-theme="dark"] .defense-table td:first-child {
  color: var(--sap-blue-deep);   /* flipped light blue in dark */
}

/* ========================================================
   Comprehensive dark-mode overrides for hardcoded hex/rgba
   that don't auto-flip via semantic tokens.
   ======================================================== */

/* Hero eyebrow — dark yellow text on dark yellow-soft bg was invisible */
[data-theme="dark"] .hero-eyebrow {
  background: rgba(255, 199, 0, 0.10);
  color: var(--sap-yellow);
  border-color: rgba(255, 199, 0, 0.28);
}

/* Yellow chips (base) — same dark-on-dark text problem */
[data-theme="dark"] .chip {
  background: rgba(255, 199, 0, 0.12);
  color: var(--sap-yellow);
  border-color: rgba(255, 199, 0, 0.3);
}
[data-theme="dark"] .chip.blue {
  background: rgba(15, 170, 255, 0.12);
  color: var(--sap-blue-deep);
  border-color: rgba(15, 170, 255, 0.3);
}

/* Yellow section kicker — brighten for dark-bg readability */
[data-theme="dark"] .section-kicker.yellow { color: var(--sap-yellow); }

/* --- Gradient boxes: yellow/blue soft gradients stayed light in dark --- */
[data-theme="dark"] .callout {
  background: linear-gradient(135deg, rgba(15, 170, 255, 0.10) 0%, rgba(255, 199, 0, 0.06) 100%);
  border-color: rgba(15, 170, 255, 0.22);
}
[data-theme="dark"] .effect-box {
  background: linear-gradient(135deg, rgba(255, 199, 0, 0.06) 0%, rgba(255, 199, 0, 0.10) 100%);
  border-color: rgba(255, 199, 0, 0.25);
}
[data-theme="dark"] .effect-box ul li::marker { color: var(--sap-yellow); }

[data-theme="dark"] .hard-rule {
  background: linear-gradient(135deg, rgba(255, 199, 0, 0.08) 0%, rgba(255, 199, 0, 0.12) 100%);
  border-color: rgba(255, 199, 0, 0.3);
}
[data-theme="dark"] .hard-rule .kw {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}
/* tag-hard: keep dramatic — use near-black bg with yellow text in dark */
[data-theme="dark"] .hard-rule .tag-hard {
  background: #000000;
  color: var(--sap-yellow);
}

[data-theme="dark"] .review-wrap {
  background: rgba(15, 170, 255, 0.08);
  border-color: rgba(15, 170, 255, 0.2);
}

[data-theme="dark"] .tagline-strong {
  background: rgba(255, 199, 0, 0.08);
  /* border-left-color already --sap-yellow (brand) */
}

/* --- Fit cards (operational triage + data protection colored icons) --- */
[data-theme="dark"] .fit-card.y .fit-icon {
  background: rgba(255, 199, 0, 0.14);
  color: var(--sap-yellow);
}
[data-theme="dark"] .fit-card.g .fit-icon {
  background: rgba(78, 215, 160, 0.14);
  color: var(--ok);
}
[data-theme="dark"] .fit-card code {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

/* --- Panels — accent borders (#BFDCFF / #D5E6FF / #F1D98A) too bright in dark --- */
[data-theme="dark"] .panel.after { border-color: rgba(15, 170, 255, 0.28); }

/* --- Card hover borders that were #BFDCFF — dim for dark --- */
[data-theme="dark"] .phase-card:hover,
[data-theme="dark"] .ext-card:hover,
[data-theme="dark"] .region-card:hover,
[data-theme="dark"] .cap-card:hover {
  border-color: rgba(15, 170, 255, 0.35);
}

/* --- Agent heads — decorative gradient blobs less saturated in dark --- */
[data-theme="dark"] .agent-head::before {
  background: radial-gradient(closest-side, rgba(15, 170, 255, 0.14), transparent);
}
[data-theme="dark"] .agent-head.yellow::before {
  background: radial-gradient(closest-side, rgba(255, 199, 0, 0.18), transparent);
}

/* --- Agent-head count pill — --ink bg flipping was handled earlier, re-state color --- */
/* (already covered above) */

/* --- GIF slot — dashed blue border + gradient placeholder --- */
[data-theme="dark"] .gif-slot { border-color: rgba(15, 170, 255, 0.25); }
[data-theme="dark"] .gif-slot video,
[data-theme="dark"] .gif-slot img.poster {
  background: linear-gradient(135deg, rgba(15, 170, 255, 0.14) 0%, rgba(255, 199, 0, 0.08) 100%);
}
[data-theme="dark"] .gif-slot .placeholder {
  background: linear-gradient(135deg, rgba(15, 170, 255, 0.16) 0%, rgba(255, 199, 0, 0.10) 100%);
  color: var(--sap-blue-deep);
}

/* --- Marquee mask keeps using the current section bg for fade; already OK --- */

/* --- Big-stat number gradient — brand blue/yellow unchanged; labels read OK --- */

/* --- .terminal stays intentionally dark in both modes (Setup mockup) --- */

/* ============================================================
   Development — Horizontal 4-step timeline
   - Spine line runs across the top, dots sit ON the spine,
     each step card hangs below its dot through a vertical connector.
   - Spine center y = dot center y → exact alignment.
   ============================================================ */
.dev-flow {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 38px 0 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.dev-spine {
  position: absolute;
  top: 17px;                      /* spine spans y=17..19, center y=18 */
  left: 12%; right: 12%;          /* trims so spine ends near first/last column */
  height: 2px;
  background: linear-gradient(90deg, var(--sap-blue) 0%, var(--sap-yellow) 100%);
  border-radius: 2px;
  opacity: .4;
}
.dev-step {
  position: relative;
  width: auto;
  align-self: stretch;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 16px 18px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
/* Neutralize legacy .left / .right modifiers in horizontal mode */
.dev-step.left, .dev-step.right { text-align: center; align-self: stretch; width: auto; }
.dev-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #BFDCFF;
}

/* Dot — centered on the spine.
   Step.top sits at container.padding-top = 38px.
   Dot top: -27 → dot top y = 11 (container coords); dot height 14 → dot center y = 18 = spine center. */
.dev-step::before {
  content: "";
  position: absolute;
  top: -27px;
  left: 50%;
  width: 14px; height: 14px;
  background: var(--white);
  border: 3px solid var(--sap-blue);
  border-radius: 999px;
  transform: translateX(-50%);
  z-index: 2;
}
/* Vertical connector — from dot bottom (y=25) down to step top (y=38) = 13px */
.dev-step::after {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 2px; height: 13px;
  background: var(--line);
  transform: translateX(-50%);
}
.dev-step:has(.dev-pill.y)::before { border-color: var(--sap-yellow); }

.dev-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: white; background: var(--sap-blue);
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  margin-bottom: 8px;
}
.dev-pill.y { background: var(--sap-yellow); color: #6E5200; }
.dev-step h4 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.dev-step p  { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

/* Narrow viewports — fall back to vertical zigzag */
@media (max-width: 760px) {
  .dev-flow {
    grid-template-columns: 1fr;
    padding: 8px 0 4px 44px;
    gap: 22px;
  }
  .dev-spine {
    top: 12px; bottom: 12px;
    left: 18px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--sap-blue) 0%, var(--sap-yellow) 100%);
  }
  .dev-step,
  .dev-step.left,
  .dev-step.right { text-align: left; align-self: stretch; width: auto; }
  .dev-step::before {
    top: 22px; left: -33px;
    transform: none;
  }
  .dev-step::after {
    top: 28px; left: -19px;
    width: 19px; height: 2px;
    transform: none;
  }
}

.dev-result {
  max-width: 980px; margin: 36px auto 0;
  background: #0B1B33; color: #E9EFF7;
  border-radius: var(--radius-lg); padding: 22px 26px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  box-shadow: var(--shadow-md);
}
.dev-result-line { font-size: 14.5px; line-height: 1.7; }
.dev-result-prompt { color: var(--sap-yellow); margin-right: 10px; font-weight: 700; }
.dev-result-text b { color: var(--sap-yellow); }
.dev-result-sub { margin-top: 10px; color: #7B8DAB; font-size: 13.5px; }

/* ============================================================
   Compare — diff-window mockup (titlebar + 2 columns + legend)
   ============================================================ */
.cmp-stage { display: flex; flex-direction: column; gap: 40px; }

.cmp-window {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.cmp-titlebar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.cmp-dot { width: 10px; height: 10px; border-radius: 999px; background: #C8D2E2; }
.cmp-dot.r { background: #FF5F57; }
.cmp-dot.y { background: #FEBC2E; }
.cmp-dot.g { background: #28C840; }
.cmp-tab {
  margin-left: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--ink-3); letter-spacing: .02em;
}

.cmp-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.cmp-col { padding: 22px 24px; min-width: 0; }
.cmp-col:nth-child(3) { background: rgba(11, 27, 51, 0.018); }

.cmp-col-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.cmp-col-tag {
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--sap-blue); color: white;
  font-weight: 800; font-size: 12px;
}
.cmp-col-tag.b { background: var(--sap-yellow); color: #6E5200; }
.cmp-col-head code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700; color: var(--ink);
  background: transparent; padding: 0;
}
.cmp-col-meta {
  margin-left: auto;
  font-size: 12px; color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
}

.cmp-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cmp-rows li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px; align-items: center;
  font-size: 13.5px;
  padding: 7px 10px; border-radius: 6px;
}
.cmp-rows li.match { background: rgba(14, 143, 98, 0.06); }
.cmp-rows li.diff  { background: rgba(184, 137, 0, 0.08); }
.cmp-rows li.opp   { background: rgba(158, 27, 27, 0.06); }
.cmp-bullet { font-weight: 800; }
.cmp-rows li.match .cmp-bullet { color: var(--ok); }
.cmp-rows li.diff  .cmp-bullet { color: #B88900; }
.cmp-rows li.opp   .cmp-bullet { color: var(--danger); }
.cmp-row-label { color: var(--ink); font-weight: 600; }
.cmp-row-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; color: var(--ink-2);
}

.cmp-divider {
  display: grid; place-items: center;
  border-left: 1px dashed var(--line);
  border-right: 1px dashed var(--line);
  width: 56px;
  background: var(--bg);
}
.cmp-vs {
  font-family: 'JetBrains Mono', monospace; font-weight: 800;
  font-size: 12px; letter-spacing: .14em;
  color: var(--ink-3);
  writing-mode: vertical-rl; transform: rotate(270deg);
}

.cmp-legend {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2);
}
.cmp-legend-meta {
  margin-left: auto;
  color: var(--ink-3); font-style: italic; font-size: 12px;
  flex: 1 1 320px; text-align: right;
}

@media (max-width: 760px) {
  .cmp-body { grid-template-columns: 1fr; }
  .cmp-divider {
    border-left: 0; border-right: 0;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
    width: auto; height: 36px;
  }
  .cmp-vs { writing-mode: horizontal-tb; transform: none; }
  .cmp-legend-meta { text-align: left; }
}

.cmp-verdict {
  position: relative; padding-left: 110px; margin-top: 0;
}
.cmp-verdict-mark {
  position: absolute; top: 34px; left: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  background: var(--sap-blue); color: white;
  padding: 4px 10px; border-radius: 6px;
}
@media (max-width: 600px) {
  .cmp-verdict { padding: 60px 22px 22px; }
  .cmp-verdict-mark { top: 22px; }
}

/* ============================================================
   Reuse — Cross / Plus layout (4 arms + central hub)
   ============================================================ */
.reuse-cross {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    ".      rxtop    .      "
    "rxleft rxhub    rxright"
    ".      rxbot    .      ";
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.reuse-cross::before,
.reuse-cross::after {
  content: ""; position: absolute; z-index: 0;
  background: linear-gradient(90deg, transparent 0%, var(--line) 18%, var(--line) 82%, transparent 100%);
  pointer-events: none;
}
.reuse-cross::before { top: 50%; left: 0; right: 0; height: 1px; }
.reuse-cross::after  {
  left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--line) 18%, var(--line) 82%, transparent 100%);
}

.rx-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  position: relative; z-index: 1;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
  align-self: center;
}
.rx-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #BFDCFF;
}
.rx-card .rx-icon { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.rx-card code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; padding: 3px 9px; border-radius: 6px;
  background: var(--sap-blue-soft); color: var(--sap-blue-deep);
  font-weight: 700; letter-spacing: .04em;
}
.rx-card h5 { margin: 10px 0 6px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.rx-card p  { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

.rx-top   { grid-area: rxtop;   max-width: 320px; justify-self: center; }
.rx-left  { grid-area: rxleft;  }
.rx-right { grid-area: rxright; }
.rx-bot   { grid-area: rxbot;   max-width: 320px; justify-self: center; }

.rx-hub {
  grid-area: rxhub;
  background: linear-gradient(135deg, #FFFDF2 0%, #FFF6D6 100%);
  border: 1px solid #F1D98A;
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  position: relative; z-index: 2;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.rx-hub-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: #6E5200; background: var(--sap-yellow);
  padding: 3px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
.rx-hub h4 {
  margin: 0 0 14px; font-size: 19px; font-weight: 800;
  letter-spacing: -.01em; color: var(--ink); line-height: 1.3;
}
.rx-hub-cmd {
  display: inline-block; margin-bottom: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  padding: 6px 12px; border-radius: 8px;
}
.rx-hub-bullets {
  list-style: none; margin: 0; padding: 0;
  text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}
.rx-hub-bullets li {
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
  padding-left: 20px; position: relative;
}
.rx-hub-bullets li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: #B88900; font-weight: 800;
}
.rx-hub-bullets li b { color: var(--ink); }
.rx-hub-bullets li code {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  background: rgba(11,27,51,.06); padding: 1px 6px; border-radius: 4px;
}

.rx-callout { margin-top: 26px; }

@media (max-width: 820px) {
  .reuse-cross {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rxtop"
      "rxleft"
      "rxhub"
      "rxright"
      "rxbot";
  }
  .reuse-cross::before, .reuse-cross::after { display: none; }
  .rx-top, .rx-bot { max-width: none; justify-self: stretch; }
}

/* ============================================================
   Dark theme additions for the new layouts
   ============================================================ */
[data-theme="dark"] .dev-spine {
  background: linear-gradient(180deg, var(--sap-blue) 0%, var(--sap-yellow) 100%);
  opacity: .25;
}
[data-theme="dark"] .dev-step:hover { border-color: rgba(15, 170, 255, 0.35); }

[data-theme="dark"] .cmp-col:nth-child(3) { background: rgba(255, 255, 255, 0.02); }
[data-theme="dark"] .cmp-rows li.match { background: rgba(78, 215, 160, 0.10); }
[data-theme="dark"] .cmp-rows li.diff  { background: rgba(255, 199, 0, 0.10); }
[data-theme="dark"] .cmp-rows li.opp   { background: rgba(255, 124, 124, 0.10); }
[data-theme="dark"] .cmp-rows li.diff  .cmp-bullet { color: var(--sap-yellow); }
[data-theme="dark"] .cmp-rows li.opp   .cmp-bullet { color: var(--danger); }

[data-theme="dark"] .rx-hub {
  /* Solid var(--white) base blocks the cross lines from showing through;
     yellow tint overlays on top */
  background:
    linear-gradient(135deg, rgba(255, 199, 0, 0.06) 0%, rgba(255, 199, 0, 0.10) 100%),
    var(--white);
  border-color: rgba(255, 199, 0, 0.25);
}
[data-theme="dark"] .rx-hub-bullets li code {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}
[data-theme="dark"] .rx-card:hover { border-color: rgba(15, 170, 255, 0.35); }