/* PRODUCT v54, the sections below the story: triage bento, safety, the autonomy ledger, the decision record and
   audit trail, and the stack diagram. One white card shell (.bc); a different product object inside each. */
.bc { position: relative; padding: 32px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 37, 64, .08), 0 30px 60px -44px rgba(20, 45, 110, .4); }
.bc h3 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.bc > p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--slate); max-width: 46ch; }
.bc code, .lanes code { padding: 1px 5px; border-radius: 4px; background: #eef3ff; color: #1f55e6; font-size: 11.5px; font-weight: 500; }

/* 4. Triage bento */
.bx { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 56px; }
.bc-board { grid-column: 1 / -1; } .bc-dup { grid-column: 1 / 7; } .bc-ask { grid-column: 7 / 13; }
.lane .tk { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lane .tk small { margin-top: 0; flex: none; } .lane .tk.fixd { display: block; } .lane .tk.fixd small { margin-top: 6px; }
.bc-dup, .bc-ask { display: flex; flex-direction: column; } .bc-dup .dup { flex: 1; }
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.lane { padding: 14px; border-radius: 10px; background: #f4f7fb; box-shadow: inset 0 0 0 1px rgba(10, 37, 64, .04); }
.lh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .lh em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }
.tk { margin-top: 8px; padding: 12px 13px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 37, 64, .07), 0 6px 14px -10px rgba(20, 45, 110, .35); }
.tk b { display: block; font-size: 14px; line-height: 1.35; font-weight: 500; color: var(--ink); }
.tk small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--slate); }
.tk s { color: var(--muted); text-decoration-color: #e0566f; } .tk.fixd { box-shadow: 0 0 0 1.5px rgba(47, 107, 255, .45), 0 6px 14px -10px rgba(20, 45, 110, .35); }
.lane-n { margin-top: 12px; padding: 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.dup { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, .9fr); align-items: center; gap: 10px; margin-top: 26px; }
.fan { position: relative; height: 196px; }
.fan span { position: absolute; left: 0; right: 0; padding: 10px 12px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 37, 64, .08), 0 8px 18px -12px rgba(20, 45, 110, .45); font-size: 14px; line-height: 1.3; color: var(--ink); }
.fan small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.fan span:nth-child(1) { top: 0; transform: rotate(-2.5deg); } .fan span:nth-child(2) { top: 64px; transform: rotate(1.5deg) translateX(8px); } .fan span:nth-child(3) { top: 128px; transform: rotate(-1deg); }
.dup-ar { position: relative; height: 2px; background: linear-gradient(90deg, #cfd9ec, var(--accent)); }
.dup-ar::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); }
.one { display: grid; gap: 4px; padding: 16px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1.5px rgba(47, 107, 255, .5), 0 14px 28px -16px rgba(47, 107, 255, .55); }
.one code { justify-self: start; } .one b { font-size: 16px; font-weight: 600; color: var(--ink); } .one small { font-size: 12.5px; line-height: 1.4; color: var(--slate); }
.th { display: grid; gap: 8px; margin-top: 22px; font-size: 14px; line-height: 1.45; }
.th p { max-width: 86%; padding: 10px 13px; }
.th .me { justify-self: end; border-radius: 14px 14px 4px 14px; background: #f0f3f8; color: var(--ink); }
.th .tr { border-radius: 14px 14px 14px 4px; background: #eef3ff; color: var(--ink); } .th .tr b { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--accent); }
.th .t-res { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(47, 107, 255, .4); }

/* 5. Safety */
.sf { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 56px; }
.sf-cmp { grid-column: 1 / 9; display: flex; flex-direction: column; } .sf-cmp .sf-two { flex: 1; } .sf-lock { grid-column: 9 / 13; }
.sf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.jb { display: flex; flex-direction: column; padding: 18px; border-radius: 10px; background: #f8fafd; box-shadow: inset 0 0 0 1px rgba(10, 37, 64, .06); }
.jb-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 500; color: var(--ink); }
.jb-log { display: grid; gap: 4px; margin-top: 12px; padding: 14px 16px; border-radius: 8px; background: #0b1e3f; }
.jb-log code { padding: 0; background: none; color: #b9c8e6; font-size: 12.5px; font-weight: 400; line-height: 1.5; } .jb-log code.bad { color: #ff9cb3; font-weight: 500; }
.jb-v { flex: 1; display: grid; align-content: start; gap: 4px; margin-top: 16px; padding-left: 30px; position: relative; }
.jb-v b { font-size: 16px; font-weight: 600; } .jb-v span { font-size: 14px; line-height: 1.5; color: var(--slate); }
.jb-v::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; }
.jb-v.go b { color: #0f6b34; } .jb-v.go::before { background: #e3f6e9; }
.jb-v.go::after { content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 4px; border-left: 2px solid #0f6b34; border-bottom: 2px solid #0f6b34; transform: rotate(-45deg); }
.jb-v.stop b { color: #b3093c; } .jb-v.stop::before { background: #ffe8ee; }
.jb-v.stop::after { content: ""; position: absolute; left: 7px; top: 7px; width: 2px; height: 8px; border-left: 2px solid #b3093c; border-right: 2px solid #b3093c; padding-left: 2px; }
.lk { list-style: none; margin: 18px 0 0; padding: 0; }
.lk li { position: relative; padding: 14px 0 14px 28px; border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 500; color: var(--ink); }
.lk li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 12px; height: 9px; border-radius: 2px; background: var(--ink); }
.lk li::after { content: ""; position: absolute; left: 4.5px; top: 17px; width: 5px; height: 6px; border: 1.6px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; }

/* 6. Autonomy ledger */
.ld { margin-top: 56px; padding: 32px 36px 36px; }
.ld-top { display: flex; align-items: center; justify-content: space-between; } .ld-ex { font-size: 12.5px; color: var(--muted); padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.ld-t { margin-top: 18px; }
.ld-r { display: grid; grid-template-columns: 2.1fr .8fr 2.5fr .55fr 1.25fr; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.ld-r > span:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ld-r > span:first-child b { font-weight: 500; }
.ld-hd { padding: 0 0 12px; border-top: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); } .ld-hd small { font-weight: 400; }
.mt { display: grid; grid-template-columns: 1fr 42px; align-items: center; gap: 12px; }
.mt i { position: relative; height: 8px; border-radius: 4px; background: #eef2f8; }
.mt i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: 4px; background: linear-gradient(90deg, #22b8ff, #2f6bff); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s cubic-bezier(.3, .6, .2, 1); }
.mt.lo i::before { background: #a9c2fb; } .mt.part i::before { background: repeating-linear-gradient(90deg, #6e9bff 0 6px, #b9cdfb 6px 9px); }
.mt i::after { content: ""; position: absolute; left: 95%; top: -5px; bottom: -5px; width: 2px; border-radius: 1px; background: var(--ink); }
.mt em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ld.in .mt i::before { transform: scaleX(1); }
.ld-r:nth-child(3) .mt i::before { transition-delay: .1s; } .ld-r:nth-child(4) .mt i::before { transition-delay: .2s; } .ld-r:nth-child(5) .mt i::before { transition-delay: .3s; }
.ld-r.lock { color: var(--slate); } .mt-no { font-size: 13.5px; color: var(--muted); }
.apath { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 30px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); }
.apath li { position: relative; padding: 18px 18px 0 0; }
.apath li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #e4eaf5; }
.apath li::after { content: ""; position: absolute; left: 0; top: -5px; width: 2px; height: 12px; background: var(--ink); }
.apath li.end::before { background: linear-gradient(90deg, #2f6bff, #7b5cff); } .apath li.end::after { background: var(--accent); }
.apath b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); } .apath span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--slate); }
.apath li.end b { color: var(--accent); }

/* 7. Evidence */
.ev2 { display: grid; grid-template-columns: 7fr 5fr; gap: 18px; margin-top: 56px; }
.dr-doc { margin-top: 22px; }
.dr-q { font-size: 20px; line-height: 1.55; letter-spacing: -.01em; color: var(--ink); }
.dr-q u { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.dr-turn { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dr-turn span { display: block; font-size: 12.5px; color: var(--muted); } .dr-turn s { font-size: 17px; color: var(--muted); text-decoration-color: #e0566f; } .dr-turn b { font-size: 17px; font-weight: 600; color: var(--accent); }
.dr-ev { list-style: none; margin: 12px 0 0; padding: 0; }
.dr-ev li { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 15px; color: var(--ink); } .dr-ev code { justify-self: start; }
.dr-who { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 13px 16px; border-radius: 8px; background: #f6f9fc; font-size: 14.5px; } .dr-who span { color: var(--muted); } .dr-who b { font-weight: 600; color: var(--ink); }
.ch { list-style: none; margin: 22px 0 0; padding: 0; }
.ch li { display: grid; grid-template-columns: 66px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--slate); }
.ch time { font: 12px var(--mono); color: var(--muted); } .ch b { font-weight: 500; color: var(--ink); }
.ch code { position: relative; font-size: 11.5px; }
.ch li:not(:last-child) code::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 26px; background: rgba(47, 107, 255, .35); }

/* 8. The stack diagram */
.dg { display: grid; grid-template-columns: minmax(0, 1.25fr) 80px minmax(0, .95fr) 64px minmax(0, 1.1fr); align-items: center; margin-top: 56px; padding: 36px; }
.dg-k { margin-bottom: 10px; font-size: 13px; font-weight: 500; color: var(--muted); }
.src { list-style: none; margin: 0; padding: 0; } .src li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); } .src b { font-size: 15px; font-weight: 500; color: var(--ink); }
.dg-ln { width: 100%; height: 250px; overflow: visible; } .dg-ln path { fill: none; stroke: url(#dgg); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .dg-ln.r path { stroke: url(#dgh); }
.dg-core { display: grid; justify-items: center; gap: 6px; padding: 28px 20px 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1.5px rgba(47, 107, 255, .45), 0 24px 48px -26px rgba(47, 107, 255, .6); text-align: center; overflow: hidden; }
.dg-core .t-mark { width: 40px; height: 40px; border-radius: 10px; } .dg-core b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); } .dg-core small { font-size: 13px; color: var(--slate); }
.dg-side { display: grid; width: calc(100% + 40px); margin-top: 18px; } .dg-side span { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--slate); background: #fafbfd; }
.sap-b { padding: 18px; border-radius: 10px; background: #f4f7fb; } .sap-b b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); } .sap-b > span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--slate); }
.tc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .tc code { font-size: 12px; padding: 3px 7px; background: #fff; box-shadow: 0 0 0 1px rgba(47, 107, 255, .18); }
.dg-no { margin-top: 12px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.faq-h { margin-bottom: 36px; }

@media (max-width: 960px) {
  .bx, .sf, .ev2 { grid-template-columns: 1fr; } .bc-board, .bc-dup, .bc-ask, .sf-cmp, .sf-lock { grid-column: auto; grid-row: auto; }
  .ld { padding: 26px 22px; } .ld-hd { display: none; }
  .ld-r { grid-template-columns: 1fr auto; gap: 8px 14px; } .ld-r > :nth-child(2), .ld-r > :nth-child(4) { display: none; } .ld-r .mt, .ld-r .mt-no { grid-column: 1 / -1; grid-row: 2; }
  .apath { grid-template-columns: 1fr; gap: 16px; padding-top: 18px; } .apath li { padding: 0 0 0 20px; } .apath li::before { top: 0; bottom: -16px; left: 0; right: auto; width: 2px; height: auto; } .apath li::after { top: 6px; left: -5px; width: 12px; height: 2px; }
  .apath li.end::before { bottom: 0; }
  .dg { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; } .dg-ln { display: none; }
}
@media (max-width: 560px) {
  .lanes, .sf-two, .dr-turn { grid-template-columns: 1fr; } .bc { padding: 24px 20px; } .dup { grid-template-columns: 1fr; } .dup-ar { width: 2px; height: 28px; justify-self: center; background: linear-gradient(180deg, #cfd9ec, var(--accent)); }
  .dup-ar::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); } .dr-q { font-size: 18px; } .ch li { grid-template-columns: 62px 1fr; } .ch code { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mt i::before, .rules li::before { transition: none; } }

/* v56: what works today, under the stack heading */
.pv .today { margin-top: 18px; max-width: 760px; padding: 12px 16px; border-radius: 8px; background: #f2f7ff; box-shadow: inset 0 0 0 1px rgba(47, 107, 255, .14); font-size: 15px; line-height: 1.55; color: var(--slate); }
.pv .today b { color: var(--ink); } .pv .today a { color: var(--accent); font-weight: 500; }