:root { --ink: #111317; --paper: #f5f1e8; --line: rgba(17, 19, 23, .14); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #f4f2ed; font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.concept-bar { min-height: 43px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #121315; color: #fff; font: 700 11px/1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; position: relative; z-index: 20; }
.concept-home { color: #d9ff4f; }
.concept-links { display: flex; height: 43px; }
.concept-link { display: flex; align-items: center; padding: 0 17px; color: #8f9299; border-left: 1px solid #2d3035; }
.concept-link:hover, .concept-link.active { color: #fff; background: #24262a; }
/* Review hub */
.review-home { min-height: 100vh; background: #efede8; }
.review-hero { padding: 8vw 7vw 5vw; max-width: 1120px; }
.eyebrow { margin: 0 0 20px; color: #575b62; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.review-hero h1 { margin: 0; max-width: 900px; font: 500 clamp(54px, 8vw, 112px)/.9 Georgia, serif; letter-spacing: -.055em; }
.review-intro { max-width: 670px; margin: 34px 0 0 auto; font-size: 19px; line-height: 1.55; color: #4e5156; }
.concept-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0 3vw 6vw; }
.concept-card { background: #fff; border: 1px solid #d8d5ce; transition: transform .25s ease, box-shadow .25s ease; }
.concept-card:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(20, 20, 20, .1); }
.concept-preview { height: 270px; padding: 24px; position: relative; overflow: hidden; }
.concept-card-copy { padding: 28px; min-height: 315px; display: flex; flex-direction: column; }
.concept-number { font: 700 12px/1 monospace; color: #777; }
.concept-card h2 { margin: 30px 0 12px; font: 600 32px/1 Georgia, serif; }
.concept-card p { margin: 0; color: #65666a; line-height: 1.55; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0; }
.tag-row span { border: 1px solid #ddd; border-radius: 100px; padding: 6px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.view-link { margin-top: auto; padding-top: 18px; border-top: 1px solid #eee; font-size: 13px; font-weight: 800; display: flex; justify-content: space-between; }
.review-footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px 3vw; border-top: 1px solid #d4d0c8; color: #63656a; font-size: 11px; }
/* Proof concept */
@media (max-width: 900px) {
  .concept-gallery { grid-template-columns: 1fr; }
  .concept-preview { height: 220px; }
}
@media (max-width: 620px) {
  .concept-bar { align-items: stretch; padding: 0; flex-direction: column; gap: 0; }
  .concept-home { padding: 14px 18px; }
  .concept-links { width: 100%; }
  .concept-link { flex: 1; justify-content: center; padding: 0 5px; font-size: 8px; }
  .review-hero { padding: 70px 6vw 45px; }
  .review-hero h1 { font-size: 54px; }
  .review-intro { font-size: 16px; }
  .concept-gallery { padding: 0 4vw 50px; }
  .review-footer { flex-direction: column; }
}
/* Compact review treatment: one decisive screen, then only terms and risk. */
@media (min-width: 901px) {
  .review-hero { padding: 4vw 7vw 2.5vw; }
  .review-hero h1 { font-size: clamp(50px, 6vw, 82px); }
  .review-intro { margin-top: 22px; font-size: 17px; }
  .concept-gallery { gap: 14px; padding-bottom: 3vw; }
  .concept-preview { height: 155px; }
  .concept-card-copy { min-height: 230px; padding: 22px; }
  .concept-card h2 { margin: 18px 0 9px; font-size: 27px; }
  .tag-row { margin: 15px 0; }
}
/* Comparison thumbnails now mirror the three genuinely different structures. */
.concept-preview i { display: block; position: absolute; }
/* 03 — Ledger First: a bold publication of evidence, not another hero/card split. */
@media (max-width: 620px) {
  .concept-links { overflow-x: auto; }
  .concept-link { min-width: max-content; padding: 0 10px; }
}
/* Eight concept links no longer fit one scrolling row on small screens: wrap them. */
@media (max-width: 900px) {
  .concept-bar { max-width: 100%; }
  .concept-links { width: 100%; min-width: 0; max-width: 100%; height: auto; flex-wrap: wrap; overflow: visible; }
  .concept-link { flex: 1 1 25%; min-width: 0; justify-content: center; padding: 11px 4px; font-size: 8px; border-top: 1px solid #2d3035; }
}
@media (max-width: 620px) {
  .concept-links { overflow: visible; }
  .concept-link { flex: 1 1 33.333%; min-width: 0; padding: 11px 3px; }
}
/* Rebuilt 03/04/05 thumbnails: mosaic, question ladder, record table. */
.concept-card.ladder .concept-preview { background: #131211; color: #f4703f; }
.ladder-preview i { background: #2c2926; }
.ladder-preview .la-top { left: 6%; top: 9%; width: 44%; height: 8%; background: #f2efe8; }
.ladder-preview .la-rule { left: 6%; right: 6%; top: 24%; height: 2px; background: #f2efe8; }
.ladder-preview .la-n { left: 6%; width: 4.5%; height: 4%; background: #f4703f; }
.ladder-preview .la-q { left: 14%; width: 26%; height: 4%; background: #f2efe8; }
.ladder-preview .la-a { left: 46%; right: 6%; height: 4%; }
.ladder-preview .r1 { top: 31%; }
.ladder-preview .r2 { top: 45%; }
.ladder-preview .r3 { top: 59%; }
.ladder-preview .r4 { top: 73%; }
.ladder-preview .r5 { top: 87%; }
.ladder-preview .la-q.r2 { width: 20%; }
.ladder-preview .la-q.r4 { width: 23%; }
.ladder-preview .la-a.r2 { right: 22%; }
.ladder-preview .la-a.r4 { right: 14%; }
.concept-card.record .concept-preview { background: #0e1118; color: #6b8cff; }
.record-preview .re-hd { left: 5%; right: 5%; top: 10%; height: 8%; background: #263149; }
.record-preview .re-bar { left: 7%; height: 4%; background: #2b3446; }
.record-preview .re-pill { right: 7%; width: 13%; height: 5%; border-radius: 2px; }
.record-preview .s1 { top: 27%; }
.record-preview .s2 { top: 42%; }
.record-preview .s3 { top: 57%; }
.record-preview .s4 { top: 72%; }
.record-preview .re-bar.s1 { width: 30%; }
.record-preview .re-bar.s2 { width: 24%; }
.record-preview .re-bar.s3 { width: 33%; }
.record-preview .re-bar.s4 { width: 21%; }
.record-preview .re-pill.s1 { background: #3a4560; }
.record-preview .re-pill.s2 { background: #3a4560; }
.record-preview .re-pill.s3 { background: #3a4560; }
.record-preview .re-pill.s4 { background: #3a4560; }
.record-preview .re-line { left: 5%; right: 5%; top: 36%; height: 1px; background: #242b3a; }
.record-preview .re-line2 { left: 5%; right: 5%; top: 51%; height: 1px; background: #242b3a; }
.record-preview .re-line3 { left: 5%; right: 5%; top: 66%; height: 1px; background: #242b3a; }
/* A concept that ships in more than one treatment carries a variant pill. */
.concept-card.has-variant { position: relative; }
.card-main { display: block; }
.variant-pills { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 6px; }
.variant-pill { padding: 5px 9px; border-radius: 3px; background: #1a1a18; color: #f7f5f0; font: 700 9px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.variant-pill:hover { background: #e0552b; color: #fff; }
.variant-pill.alt { background: #d9a441; color: #1a1005; }
.variant-pill.alt:hover { background: #e8b757; color: #1a1005; }
/* 06 Proof Board thumbnail: mosaic tiles with the record band through the middle. */
.concept-card.board .concept-preview { background: #0a0d0f; color: #ccff33; padding: 0; }
.board-preview i { background: #111619; border: 1px solid #1e262b; }
.board-preview .bo-nav { left: 5%; right: 5%; top: 6%; height: 4%; border: 0; background: #1a2228; }
.board-preview .bo-a { left: 5%; top: 14%; width: 29%; height: 24%; }
.board-preview .bo-b { left: 36%; top: 14%; width: 29%; height: 24%; }
.board-preview .bo-c { left: 67%; top: 14%; width: 28%; height: 24%; }
.board-preview .bo-hd { left: 8%; top: 19%; width: 20%; height: 5%; background: #e6ecef; border: 0; }
.board-preview .bo-hd2 { left: 8%; top: 27%; width: 14%; height: 5%; background: #ccff33; border: 0; }
.board-preview .bo-chip { left: 58%; top: 19%; width: 6%; height: 5%; background: #ccff33; border: 0; }
.board-preview .bo-rec { left: 5%; right: 5%; top: 40%; height: 30%; }
.board-preview .bo-rh { left: 7%; right: 7%; top: 43%; height: 4%; background: #182027; border: 0; }
.board-preview .bo-rr { left: 7%; height: 2.4%; background: #2b3740; border: 0; }
.board-preview .bo-rr.n1 { top: 50%; width: 60%; }
.board-preview .bo-rr.n2 { top: 56%; width: 54%; }
.board-preview .bo-rr.n3 { top: 62%; width: 58%; }
.board-preview .bo-rp { right: 7%; width: 9%; height: 2.4%; background: #8fb9dd; border: 0; }
.board-preview .bo-rp.n1 { top: 50%; }
.board-preview .bo-rp.n2 { top: 56%; }
.board-preview .bo-rp.n3 { top: 62%; }
.board-preview .bo-d { left: 5%; top: 73%; width: 40%; height: 21%; }
.board-preview .bo-e { left: 47%; top: 73%; width: 27%; height: 21%; }
.board-preview .bo-f { left: 76%; top: 73%; width: 19%; height: 21%; }
.board-preview .bo-btn { left: 78%; top: 84%; width: 13%; height: 5%; background: #ccff33; border: 0; }
/* 05 Voltage thumbnail: true black, brutal type, magenta, hard edges. */
.concept-card.voltage .concept-preview { background: #131211; color: #f4703f; padding: 0; }
.voltage-preview .vo-n { left: 0; right: 0; top: 7%; height: 4%; border-top: 1px solid #2c2926; border-bottom: 1px solid #2c2926; }
.voltage-preview .vo-t { top: 7.5%; height: 3%; background: #2c2926; }
.voltage-preview .vo-t.a { left: 6%; width: 12%; }
.voltage-preview .vo-t.b { left: 22%; width: 10%; }
.voltage-preview .vo-t.c { left: 36%; width: 14%; background: #f4703f; }
.voltage-preview .vo-t.d { left: 54%; width: 11%; }
.voltage-preview .vo-h { left: 4%; height: 13%; background: #f2efe8; }
.voltage-preview .vo-h.h1 { top: 19%; width: 62%; }
.voltage-preview .vo-h.h2 { top: 34%; width: 46%; }
.voltage-preview .vo-h.h3 { top: 49%; width: 54%; background: #f4703f; }
.voltage-preview .vo-card { right: 5%; top: 63%; width: 34%; height: 22%; background: #f2efe8; }
.voltage-preview .vo-cl { right: 8%; height: 2.2%; background: #6a655c; }
.voltage-preview .vo-cl.c1 { top: 69%; width: 22%; }
.voltage-preview .vo-cl.c2 { top: 74%; width: 26%; }
.voltage-preview .vo-btn { left: 4%; top: 68%; width: 24%; height: 6%; background: #f2efe8; }
.voltage-preview .vo-p { left: 0; right: 0; bottom: 0; height: 9%; background: #f4703f; }

/* 05 Voltage Complete thumbnail: the same register, many more rows. */
.concept-card.complete .concept-preview { background: #131211; color: #f4703f; padding: 0; }
.complete-preview i { background: #2c2926; }
.complete-preview .co-n { left: 0; right: 0; top: 6%; height: 3%; background: #1c1a18; }
.complete-preview .co-h { left: 5%; height: 6%; background: #f2efe8; }
.complete-preview .co-h.h1 { top: 12%; width: 36%; }
.complete-preview .co-h.h2 { top: 20%; width: 26%; background: #f4703f; }
.complete-preview .co-card { right: 5%; top: 12%; width: 32%; height: 20%; background: #f2efe8; }
.complete-preview .co-r { left: 5%; right: 5%; height: 6.5%; background: #1a1a18; border: 1px solid #2c2926; }
.complete-preview .co-r.r1 { top: 36%; right: 52%; } .complete-preview .co-r.r2 { top: 36%; left: 50%; }
.complete-preview .co-r.r3 { top: 52%; right: 52%; } .complete-preview .co-r.r4 { top: 52%; left: 50%; }
.complete-preview .co-r.r5 { top: 68%; right: 52%; } .complete-preview .co-r.r6 { top: 68%; left: 50%; }
.complete-preview .co-plate { left: 5%; right: 5%; top: 45%; height: 4%; background: #f4703f; border: 0; }
.complete-preview .co-p { left: 0; right: 0; bottom: 0; height: 8%; background: #f4703f; }

/* Five-option review. */
.concept-gallery.five-up { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.five-up .concept-card:nth-child(-n+2) { grid-column: span 3; }
.five-up .concept-card:nth-child(n+3) { grid-column: span 2; }
.five-up .concept-preview { height: 250px; }
.five-up .concept-card:nth-child(n+3) .concept-preview { height: 210px; }
.five-up .concept-card-copy { min-height: 290px; padding: 26px; }
.five-up .concept-card h2 { margin: 22px 0 10px; font-size: 28px; }
.five-up .concept-card:nth-child(n+3) h2 { font-size: 24px; }
.five-up .concept-card p { font-size: 14px; }
@media (max-width: 1100px) { .concept-gallery.five-up { grid-template-columns: repeat(2, minmax(0,1fr)); } .five-up .concept-card:nth-child(n) { grid-column: auto; } .five-up .concept-preview { height: 205px; } }
@media (max-width: 620px) { .concept-gallery.five-up { grid-template-columns: 1fr; } .five-up .concept-preview { height: 170px; } .five-up .concept-card-copy { min-height: 0; } }

.pal-inline { border-bottom: 1px solid currentColor; }