/* V2 course, ledger and utility content. Hero composition belongs to compact-visual.css. */
html body[data-visual-v2]:not([data-company-page]) {
  --max: 1160px;
  --bg: var(--cv-bg);
  --page: var(--cv-bg);
  --surface: var(--cv-surface);
  --card: var(--cv-surface);
  --bg-soft: var(--cv-soft);
  --bg-deep: var(--cv-soft);
  --surface-tint: var(--cv-soft);
  --surface-blue: var(--cv-soft);
  --blue-pale: var(--cv-soft);
  --ink: var(--cv-text);
  --muted: var(--cv-muted);
  --subtle: var(--cv-muted);
  --line: var(--cv-border);
  --line-strong: var(--cv-border);
  --link: var(--cv-link);
  --link-hover: var(--cv-link);
  --blue: var(--cv-blue);
  --teal: var(--cv-link);
  --accent: var(--cv-link);
  --focus: var(--cv-link);
  --btn: var(--cv-action);
  --btn-hover: var(--cv-action-hover);
  --button-secondary-bg: var(--cv-surface);
  --button-secondary-ink: var(--cv-text);
  --button-secondary-border: var(--cv-border);
  --radius: 8px;
  --radius-card: 8px;
  --radius-control: 8px;
  --visual-radius: 8px;
  background: var(--cv-bg);
  color: var(--cv-text);
  font-size: 15px;
  line-height: 1.7;
}

html body[data-visual-v2]:not([data-company-page]) main :is(.btn, .button) {
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 24px;
}
html body[data-visual-v2]:not([data-company-page]) main .text-link {
  min-height: 44px;
  align-items: center;
  font-size: 14px;
}
html body[data-visual-v2]:not([data-company-page]) main :is(a, button) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
html body[data-visual-v2]:not([data-company-page]) main :is(a, button):focus-visible {
  outline: 2px solid var(--cv-link);
  outline-offset: 4px;
}

/* Facts remain outside the main hero, with their original labels and values. */
html body[data-visual-v2] .lan-hero-facts {
  padding-block: 20px;
  border-bottom: 1px solid var(--cv-border);
}
html body[data-visual-v2][data-course-page] .lan-hero-facts .stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  width: 100%;
  max-width: none;
  margin: 0;
}
html body[data-visual-v2][data-course-page] .stat-row > div {
  min-width: 0;
  padding: 0;
  border: 0;
}
html body[data-visual-v2][data-course-page] .stat-row dt {
  color: var(--cv-muted);
  font-size: 12px;
  line-height: 1.5;
}
html body[data-visual-v2][data-course-page] .stat-row dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 4px 0 0;
  color: var(--cv-text);
  font-size: 24px;
  line-height: 1.35;
}
html body[data-visual-v2][data-course-page] .stat-row dd strong { font-weight: 600; }
html body[data-visual-v2][data-course-page] .stat-row dd span {
  margin: 0;
  color: var(--cv-muted);
  font-size: 12px;
}

/* Course catalogue and preparation content. */
html body[data-visual-v2][data-course-page] .course-local-nav {
  gap: 0 24px;
  padding-block: 4px;
  border-bottom: 1px solid var(--cv-border);
}
html body[data-visual-v2][data-course-page] .course-local-nav a {
  min-height: 44px;
  padding-block: 8px;
  font-size: 13px;
  line-height: 1.5;
}
html body[data-visual-v2][data-course-page] .section { padding-block: 52px; }
html body[data-visual-v2][data-course-page] .section-soft { background: var(--cv-soft); }
html body[data-visual-v2][data-course-page] .section-head {
  max-width: 780px;
  margin-bottom: 24px;
}
html body[data-visual-v2][data-course-page] .section-kicker { margin-bottom: 8px; }
html body[data-visual-v2][data-course-page] .section h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.025em;
}
html body[data-visual-v2][data-course-page] .section-head h2 .copy-unit { display: inline; }
html body[data-visual-v2][data-course-page] .section-head > p:last-child {
  max-width: 720px;
  margin-top: 12px;
  color: var(--cv-muted);
  font-size: 15px;
  line-height: 1.7;
}
html body[data-visual-v2][data-course-page] :is(.learning-paths, .path-grid, .stage-grid, .principle-grid, .day-grid) { gap: 16px; }
html body[data-visual-v2][data-course-page] .learning-path {
  grid-template-columns: 32px minmax(0, .9fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-surface);
}
html body[data-visual-v2][data-course-page] :is(.path-heading, .path-detail) { min-width: 0; }
html body[data-visual-v2][data-course-page] .path-detail { grid-column: auto; }
html body[data-visual-v2][data-course-page] .path-number {
  width: 32px;
  height: 24px;
  margin-top: 3px;
  border-radius: 4px;
  background: var(--cv-soft);
  color: var(--cv-link);
  line-height: 1;
}
html body[data-visual-v2][data-course-page] :is(.path-heading h3, .path-card h3, .day-header h3) {
  font-size: 21px;
  line-height: 1.45;
  font-weight: 600;
}
html body[data-visual-v2][data-course-page] .path-heading .path-kicker { margin-bottom: 8px; }
html body[data-visual-v2][data-course-page] .path-heading .path-meta {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
}
html body[data-visual-v2][data-course-page] :is(.path-detail > p, .path-outcomes, .path-card p, .stage-card p, .principle-grid small, .day-purpose, .outline-block, .day-outcome p) {
  font-size: 15px;
  line-height: 1.7;
}
html body[data-visual-v2][data-course-page] .path-outcomes { margin-block: 12px; }
html body[data-visual-v2][data-course-page] .path-detail > .path-status {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.65;
}
html body[data-visual-v2][data-course-page] :is(.path-card, .stage-card, .day-card, .principle-grid article, .principle-grid > p) {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-surface);
  box-shadow: none;
}
html body[data-visual-v2][data-course-page] :is(.path-card, .day-card, .lesson-card):hover {
  background: var(--cv-surface);
  border-color: var(--cv-border);
  transform: none;
}
html body[data-visual-v2][data-course-page] .path-card { gap: 10px; }
html body[data-visual-v2][data-course-page] #resources .path-grid { gap: 16px; }
html body[data-visual-v2][data-course-page] #resources .path-card {
  border: 1px solid var(--cv-border);
  background: var(--cv-surface);
}
html body[data-visual-v2][data-course-page] :is(.path-meta, #resources .path-meta, .stage-card em) {
  font-size: 13px;
  line-height: 1.65;
}
html body[data-visual-v2][data-course-page] :is(.principle-grid strong, .stage-card strong) {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.45;
}
html body[data-visual-v2][data-course-page] .principle-grid span { margin-bottom: 12px; }
html body[data-visual-v2][data-course-page] .principle-grid small { margin-top: 8px; }
html body[data-visual-v2][data-course-page] .stage-card > span { margin-bottom: 10px; }
html body[data-visual-v2][data-course-page] .stage-card p { margin-bottom: 12px; }

/* All 21 public lessons stay expanded, in their original stage and reading order. */
html body[data-visual-v2="fde"][data-course-page] .lesson-stage { margin-bottom: 28px; }
html body[data-visual-v2="fde"][data-course-page] .lesson-stage:last-child { margin-bottom: 0; }
html body[data-visual-v2="fde"][data-course-page] .lesson-stage-head {
  gap: 8px 16px;
  margin-bottom: 12px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--cv-border);
  border-radius: 0;
  background: transparent;
}
html body[data-visual-v2="fde"][data-course-page] .lesson-stage-head h3 { font-size: 18px; line-height: 1.5; }
html body[data-visual-v2="fde"][data-course-page] .lesson-stage-head > span { font-size: 13px; }
html body[data-visual-v2="fde"][data-course-page] .lesson-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
}
html body[data-visual-v2="fde"][data-course-page] .lesson-card,
html body[data-visual-v2="fde"][data-course-page] .lesson-card:last-child {
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-surface);
  font-size: 15px;
  line-height: 1.65;
}
html body[data-visual-v2="fde"][data-course-page] .lesson-num { font-size: 13px; line-height: 26px; }
html body[data-visual-v2="fde"][data-course-page] .lesson-card h4 {
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}
html body[data-visual-v2="fde"][data-course-page] .lesson-card ul { margin-bottom: 12px; }
html body[data-visual-v2="fde"][data-course-page] .lesson-card li + li { margin-top: 4px; }
html body[data-visual-v2="fde"][data-course-page] .lesson-output { font-size: 15px; line-height: 1.65; }
html body[data-visual-v2="fde"][data-course-page] .lesson-duration { margin-top: 10px; font-size: 13px; }

/* The three-day plan reads side by side only when each column has useful width. */
html body[data-visual-v2="mvp"] .day-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body[data-visual-v2="mvp"] .day-card { display: flex; flex-direction: column; }
html body[data-visual-v2="mvp"] .day-header { align-items: flex-start; gap: 14px; margin-bottom: 16px; }
html body[data-visual-v2="mvp"] .day-header > p {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 8px;
  border-radius: 6px;
  background: var(--cv-soft);
}
html body[data-visual-v2="mvp"] .day-header > p strong { font-size: 24px; }
html body[data-visual-v2="mvp"] .day-header > div { min-width: 0; }
html body[data-visual-v2="mvp"] .day-header small { font-size: 12px; line-height: 1.6; }
html body[data-visual-v2="mvp"] .day-purpose { margin-bottom: 16px; }
html body[data-visual-v2="mvp"] .outline-block { flex: 1; }
html body[data-visual-v2="mvp"] .outline-block h4 { font-size: 14px; line-height: 1.6; }
html body[data-visual-v2="mvp"] .day-outcome {
  margin-top: 20px;
  padding: 16px;
  border-radius: 6px;
  background: var(--cv-soft);
}
html body[data-visual-v2][data-course-page] .contact-plane {
  padding: 28px;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-soft);
}
html body[data-visual-v2][data-course-page] .contact-plane p {
  max-width: 720px;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.7;
}
html body[data-visual-v2][data-course-page] .contact-actions { margin-top: 20px; gap: 10px 16px; }

/* Cloud Ledger: real screenshots, compact feature descriptions and clear boundaries. */
html body[data-visual-v2="ledger"][data-share-route] .lan-hero-facts .proof-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  max-width: none;
  margin: 0;
}
html body[data-visual-v2="ledger"] .proof-grid li {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  font-size: 13px;
  line-height: 1.65;
}
html body[data-visual-v2="ledger"] .proof-grid strong { font-size: 14px; font-weight: 600; }
html body[data-visual-v2="ledger"] .ledger-product-preview { padding-block: 24px 28px; }
html body[data-visual-v2="ledger"] .ledger-product-preview .hero-visual {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  width: min(620px, 100%);
  margin-inline: auto;
  padding: 20px;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-surface);
  aspect-ratio: auto;
}
html body[data-visual-v2="ledger"] .ledger-product-preview picture {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 8;
  background: var(--cv-soft);
}
html body[data-visual-v2="ledger"] .ledger-product-preview img { object-fit: contain; }
html body[data-visual-v2="ledger"] .ledger-product-preview figcaption {
  margin: 0;
  color: var(--cv-text);
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}
html body[data-visual-v2="ledger"] .ledger-product-preview figcaption .copy-unit { white-space: normal; }
html body[data-visual-v2="ledger"][data-share-route] :is(.section, .contact-band) { padding-block: 52px; }
html body[data-visual-v2="ledger"][data-share-route] :is(.section-tint, .section-open, .contact-band) { background: var(--cv-soft); }
html body[data-visual-v2="ledger"][data-share-route] .section-white { background: var(--cv-bg); }
html body[data-visual-v2="ledger"] :is(.story-grid, .open-grid) { gap: 32px; }
html body[data-visual-v2="ledger"] :is(.story-copy h2, .open-intro h2, .contact-band h2) {
  margin-bottom: 12px;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -.025em;
}
html body[data-visual-v2="ledger"][data-share-route] :is(.story-copy > p:not(.eyebrow), .open-intro > p:not(.eyebrow), .boundary-grid p) {
  font-size: 15px;
  line-height: 1.7;
}
html body[data-visual-v2="ledger"] :is(.detail-list, .flow-list) { margin-top: 20px; }
html body[data-visual-v2="ledger"] .detail-list > div { gap: 12px; padding-block: 12px; }
html body[data-visual-v2="ledger"] :is(.detail-list dt, .detail-list dd) { font-size: 15px; line-height: 1.65; }
html body[data-visual-v2="ledger"] .flow-list li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-block: 12px; }
html body[data-visual-v2="ledger"] .flow-list strong { font-size: 15px; }
html body[data-visual-v2="ledger"] .flow-list small { font-size: 14px; line-height: 1.7; }
html body[data-visual-v2="ledger"] .reimbursement-visual { width: min(280px, 100%); }
html body[data-visual-v2="ledger"] .section .appstore-visual { aspect-ratio: auto; }
html body[data-visual-v2="ledger"] .section .appstore-visual > picture {
  height: auto;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-surface);
  box-shadow: none;
}
html body[data-visual-v2="ledger"] .section .appstore-visual-portrait > picture { aspect-ratio: 5 / 8; }
html body[data-visual-v2="ledger"] .section .appstore-visual-landscape > picture { aspect-ratio: 16 / 10; }
html body[data-visual-v2="ledger"] .section .appstore-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  filter: none;
}
html body[data-visual-v2="ledger"] .boundary-grid { gap: 16px; }
html body[data-visual-v2="ledger"][data-share-route] .boundary-grid article {
  padding: 24px;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-surface);
  box-shadow: none;
}
html body[data-visual-v2="ledger"] .boundary-kicker { margin-bottom: 12px; }
html body[data-visual-v2="ledger"] .boundary-grid h3 { font-size: 18px; line-height: 1.5; }
html body[data-visual-v2="ledger"] .contact-band-inner { align-items: center; gap: 24px; }
html body[data-visual-v2="ledger"] .contact-band h2 { margin-bottom: 0; }

/* Utility pages keep their functional content independent of the hero canvas. */
html body[data-visual-v2="contact"][data-share-route] main { display: block; min-height: 0; padding: 0; }
html body[data-visual-v2="contact"][data-share-route] .business-card {
  width: min(440px, calc(100% - 2 * var(--page-gutter, 24px)));
  margin: 28px auto 52px;
  padding: 24px;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-surface);
  box-shadow: none;
  backdrop-filter: none;
}
html body[data-visual-v2="contact"] .qr-panel { margin-top: 16px; }
html body[data-visual-v2="contact"] .qr-tile {
  width: min(240px, 100%);
  padding: 8px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: #fff;
}
html body[data-visual-v2="contact"] .qr-tile img { filter: none; opacity: 1; }
html body[data-visual-v2="contact"] .wechat-copy {
  margin-top: 16px;
  color: var(--cv-muted);
  font-size: 15px;
  line-height: 1.7;
}
html body[data-visual-v2="contact"] .card-actions { width: min(100%, 280px); margin-top: 20px; }
html body[data-visual-v2="contact"] .business-card :is(.copy-unit, .copy-line) { white-space: normal; }
html body[data-visual-v2="sitemap"][data-share-route] .wrap {
  width: min(1160px, calc(100% - 2 * var(--page-gutter, 24px)));
  max-width: none;
  margin-inline: auto;
  padding: 48px 0 52px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}
html body[data-visual-v2="sitemap"][data-share-route] .wrap section {
  min-width: 0;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--cv-border);
  border-radius: 8px;
  background: var(--cv-surface);
}
html body[data-visual-v2="sitemap"] .wrap h2 { margin-bottom: 12px; font-size: 18px; line-height: 1.5; }
html body[data-visual-v2="sitemap"] .wrap ul { gap: 0; }
html body[data-visual-v2="sitemap"] .wrap li { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
html body[data-visual-v2="sitemap"] .wrap li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding-block: 8px;
  color: var(--cv-link);
}
html body[data-visual-v2="404"] .error-page { width: 100%; padding-block: 0 32px; }
html body[data-visual-v2="404"][data-site-error] .error-stage {
  border: 0;
  border-radius: 0;
  background: var(--cv-bg);
  overflow: visible;
}
html body[data-visual-v2="404"] .error-copy { padding: 0; }
html body[data-visual-v2="404"] .error-intro { margin-block: 16px 24px; font-size: 15px; line-height: 1.7; }
html body[data-visual-v2="404"] .error-actions { gap: 10px; }
html body[data-visual-v2="404"] .error-actions a { min-height: 44px; padding: 9px 18px; border-radius: 8px; }
html body[data-visual-v2="404"] .error-note {
  position: static;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 8px 16px;
  width: min(1160px, calc(100% - 2 * var(--cv-gutter, 24px)));
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--cv-border);
  color: var(--cv-muted);
}

@media (max-width: 1039px) {
  html body[data-visual-v2="mvp"] .day-grid { grid-template-columns: minmax(0, 1fr); }
  html body[data-visual-v2][data-course-page] .learning-path { grid-template-columns: 32px minmax(0, 1fr); gap: 16px 20px; }
  html body[data-visual-v2][data-course-page] .path-detail { grid-column: 2; }
}
@media (max-width: 920px) {
  html body[data-visual-v2="ledger"] :is(.story-grid, .open-grid) { gap: 24px; }
  html body[data-visual-v2="ledger"][data-share-route] .lan-hero-facts .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 799px) {
  html body[data-visual-v2="fde"][data-course-page] .lesson-list { grid-template-columns: minmax(0, 1fr); }
  html body[data-visual-v2][data-course-page] .stage-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  html body[data-visual-v2] .lan-hero-facts { padding-block: 16px; }
  html body[data-visual-v2][data-course-page] .lan-hero-facts .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
  html body[data-visual-v2][data-course-page] .course-local-nav { gap: 0 16px; }
  html body[data-visual-v2][data-course-page] .section { padding-block: 32px; }
  html body[data-visual-v2][data-course-page] .section-head { margin-bottom: 20px; }
  html body[data-visual-v2][data-course-page] .section h2,
  html body[data-visual-v2="ledger"] :is(.story-copy h2, .open-intro h2, .contact-band h2) { font-size: 24px; line-height: 1.4; }
  html body[data-visual-v2][data-course-page] .learning-path { padding: 20px; gap: 16px; }
  html body[data-visual-v2][data-course-page] .path-detail { grid-column: 1 / -1; }
  html body[data-visual-v2][data-course-page] :is(.path-heading h3, .path-card h3, .day-header h3) { font-size: 20px; }
  html body[data-visual-v2][data-course-page] :is(.path-card, .stage-card, .day-card, .principle-grid article, .principle-grid > p, .contact-plane) { padding: 20px; }
  html body[data-visual-v2="fde"][data-course-page] .lesson-card { padding: 18px 16px; gap: 10px; }
  html body[data-visual-v2="fde"][data-course-page] .lesson-card h4 { font-size: 16px; }
  html body[data-visual-v2="mvp"] .day-header { gap: 12px; }
  html body[data-visual-v2="mvp"] .day-outcome { padding: 14px; }
  html body[data-visual-v2="ledger"][data-share-route] :is(.section, .contact-band) { padding-block: 32px; }
  html body[data-visual-v2="ledger"][data-share-route] .boundary-grid article { padding: 20px; }
  html body[data-visual-v2="ledger"] .ledger-product-preview { padding-block: 20px 24px; }
  html body[data-visual-v2="ledger"] .ledger-product-preview .hero-visual {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: min(320px, 100%);
    padding: 16px;
  }
  html body[data-visual-v2="ledger"] .ledger-product-preview picture { width: min(180px, 100%); margin-inline: auto; }
  html body[data-visual-v2="ledger"] .ledger-product-preview figcaption { font-size: 14px; text-align: center; }
  html body[data-visual-v2="contact"][data-share-route] .business-card { margin-block: 20px 32px; padding: 20px; }
  html body[data-visual-v2="sitemap"][data-share-route] .wrap { grid-template-columns: minmax(0, 1fr); padding-block: 32px; }
  html body[data-visual-v2="sitemap"][data-share-route] .wrap section { padding: 20px; }
}
@media (max-width: 379px) {
  html body[data-visual-v2][data-course-page] .learning-path,
  html body[data-visual-v2][data-course-page] :is(.path-card, .stage-card, .day-card, .principle-grid article, .principle-grid > p, .contact-plane) { padding: 16px; }
  html body[data-visual-v2="ledger"][data-share-route] .lan-hero-facts .proof-grid { gap: 14px 16px; }
  html body[data-visual-v2="contact"][data-share-route] .business-card { padding: 16px; }
}
@media (hover: none) {
  html body[data-visual-v2]:not([data-company-page]) main :is(a, button):active { opacity: .82; }
  html body[data-visual-v2][data-course-page] :is(.path-card, .day-card, .lesson-card):hover { transform: none; background: var(--cv-surface); }
}
@media (prefers-reduced-motion: reduce) {
  html body[data-visual-v2]:not([data-company-page]) main :is(a, button, .appstore-visual, .appstore-visual img) { transition: none; }
}