/* Landing page: four work areas up front, one bar per area per client, full numbers behind a disclosure. */
.four { margin: 0 0 56px; }
.four h2, .board-head h2 { margin: 0 0 18px; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -.03em; }
.areas4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.areas4 li { background: #fff; padding: 20px 20px 22px; border-top: 4px solid var(--ink); }
.areas4 b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; }
.areas4 h3 { margin: 12px 0 6px; font-size: 21px; line-height: 1.15; }
.areas4 p { margin: 0; color: #5d6878; font-size: 15px; line-height: 1.45; }

.board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.board-head h2 { margin-bottom: 6px; }
.board-head p { margin: 0; max-width: 62ch; color: #5d6878; }
.expand-all { flex: none; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.expand-all:hover { background: var(--ink); color: #fff; }

.group { margin: 28px 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #5d6878; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who open" "ov ov" "more more"; gap: 14px 32px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.row:last-of-type { border-bottom: 1px solid var(--line); }
.scores { display: contents; }
.who { grid-area: who; }
.who h3 { margin: 0; font-size: 21px; line-height: 1.15; letter-spacing: -.01em; }
.who .kind { margin: 3px 0 0; font-size: 13px; font-weight: 750; color: #5d6878; }
.who .desc { display: none; }
.who .status { margin: 8px 0 0; font-size: 13px; font-weight: 750; color: #2f6b4f; }
.who .status.is-caution { color: #a45b00; }
.open { grid-area: open; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--gold); white-space: nowrap; }
.open:hover { text-decoration-color: var(--ink); }
.sb-load { grid-area: ov; margin: 0; color: #5d6878; font-size: 14px; }

.ov { grid-area: ov; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bar-name { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5d6878; }
.bar-track { position: relative; display: block; height: 12px; border-radius: 6px; background: linear-gradient(var(--ink), var(--ink)) 0 / var(--w) 100% no-repeat, #e5e1d7; }
.bar-track::after { content: ""; position: absolute; left: 80%; top: -4px; bottom: -4px; width: 2px; background: var(--gold); }

.more { grid-area: more; }
.more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 800; color: var(--ink); list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.more[open] summary::before { transform: rotate(45deg); }
.more[open] summary { font-size: 0; }
.more[open] summary::after { content: "Hide breakdown"; font-size: 16px; }
.more-body { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr) 1fr; gap: 20px; padding: 14px 0 6px; }
.more-body .observed { grid-column: 1 / -1; margin: 0; }

.method-wrap { margin-top: 64px; border-top: 2px solid var(--ink); }
.method-wrap > summary { display: flex; align-items: center; min-height: 64px; cursor: pointer; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; list-style: none; }
.method-wrap > summary::-webkit-details-marker { display: none; }
.method-wrap > summary::after { content: "+"; margin-left: auto; font-size: 28px; font-weight: 400; }
.method-wrap[open] > summary::after { content: "–"; }
.method-wrap .method { margin-top: 0; border-top: 0; }

@media (max-width: 1300px) {
  .areas4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .areas4 { grid-template-columns: 1fr; }
  .board-head { flex-direction: column; align-items: stretch; }
  .ov { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .more summary::before { transition: none; } }

/* Experts: small, on the right, not the main event. */
.shell { max-width: 1440px; margin: auto; padding: 64px clamp(20px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.shell > main { max-width: none; margin: 0; padding: 0; }
.side { position: sticky; top: 24px; }
.side .experts-wrap, .side section { padding: 0; }
.side .experts { max-width: none; }
.side .coach { display: block; padding: 20px; background: #fff; border-top: 4px solid var(--gold); }
.side .coach h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; }
.side .coach-lede { font-size: 15px; line-height: 1.45; }
.side .coach-team { font-size: 14px; margin: 8px 0 12px; }
.side .team { margin-top: 14px; }
.side .team h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #5d6878; }
.side .expert-list { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.side .expert-list li { padding: 12px 14px; background: #fff; }
@media (max-width: 1180px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .side { position: static; }
}

/* Side rail overrides: win over experts.css, which is written for a full-width band. */
.side .experts .coach h2 { font-size: 22px; line-height: 1.15; letter-spacing: -.02em; }
.side .experts .coach-lede { font-size: 15px; max-width: none; }
.side .experts .expert-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.side .experts .expert-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.side .experts .expert-copy span { display: block; font-size: 14px; line-height: 1.4; }
.side .experts .team-ask { justify-self: start; min-height: 40px; padding: 8px 14px; font-size: 14px; }
.hero h1 { font-size: clamp(40px, 6vw, 72px); }
.hero { padding-block: clamp(44px, 6vw, 80px); }
.four-lede { margin: -8px 0 20px; max-width: 62ch; color: #5d6878; }
.shell .flow { margin: 48px 0 0; }
.side .experts .team-ask { text-decoration-color: var(--gold); }



/* Walk-through: one panel per step for a sample business. */
.walk { margin: 40px 0; padding: 24px; background: var(--surface); border-top: 3px solid var(--ink); }
.walk h2 { margin: 0 0 4px; font-size: clamp(24px,3vw,32px); }
.walk-lede { margin: 0 0 16px; color: #5b6472; }
.walk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.walk button { font: inherit; font-weight: 700; padding: 10px 16px; min-height: 44px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); cursor: pointer; }
.walk button[aria-selected="true"], .walk-nav [data-next]:not(:disabled) { background: var(--ink); color: #fff; }
.walk button:disabled { opacity: .35; cursor: default; }
.walk-panel h3 { margin: 0 0 6px; font-size: 22px; }
.walk-panel[hidden] { display: none; }
.qa, .pick, .all-an ul { list-style: none; margin: 14px 0 0; padding: 0; }
.qa li { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) auto; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline; }
.qa i { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.more-q { color: #5b6472; font-size: 14px; }
.pick li { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); }
.pick li b { display: block; }
.pick li.rec { border: 2px solid var(--gold); background: #fbf6ea; }
.dash { display: grid; gap: 14px; margin-top: 14px; }
.dash div { display: grid; grid-template-columns: 110px minmax(0,1fr) minmax(0,1.2fr); gap: 12px; align-items: center; }
.dash .bar { height: 12px; background: #e6e3da; }
.dash .bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; }
.dash em { font-style: normal; font-size: 14px; color: #5b6472; }
.all-an { margin-top: 16px; } .all-an summary { cursor: pointer; font-weight: 700; }
.all-an li { padding: 4px 0 4px 16px; position: relative; } .all-an li::before { content: "·"; position: absolute; left: 4px; }
.walk-nav { display: flex; gap: 8px; margin-top: 20px; }
@media (prefers-reduced-motion: no-preference) { .dash .bar i { animation: barfill .8s ease-out both; } .walk-panel:not([hidden]) { animation: walkin .25s ease-out; } @keyframes walkin { from { opacity: 0; transform: translateY(6px); } } }
@media (max-width: 640px) { .walk { padding: 18px 16px; } .qa li, .dash div { grid-template-columns: 1fr; } }

/* Presenter guide, replaces the PDF banner. */
.guide { margin: 32px 0; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); }
.guide summary { cursor: pointer; padding: 16px 20px; list-style: none; display: grid; gap: 2px; min-height: 44px; }
.guide summary::-webkit-details-marker { display: none; }
.guide summary span { font-weight: 800; font-size: 18px; }
.guide summary small { color: #5b6472; font-size: 14px; }
.guide summary::after { content: "Open"; justify-self: start; margin-top: 6px; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.guide details[open] summary::after { content: "Close"; }
.guide details > :not(summary) { margin-left: 20px; margin-right: 20px; }
.g-pitch { background: #fbf6ea; padding: 12px 14px; margin-top: 0; }
.g-steps { padding-left: 22px; } .g-steps li { margin-bottom: 10px; } .g-steps i { display: block; color: #5b6472; }
.guide h3 { margin: 18px 20px 6px; font-size: 16px; }
.g-qa { margin-bottom: 20px; } .g-qa dt { font-weight: 700; } .g-qa dd { margin: 0 0 8px; color: #3d4756; }

/* Evidence tags on walk-through lines. */
.qa i.t-seen { color: #16734a; } .qa i.t-prop { color: #8a6a1f; } .qa i.t-miss { color: #a4361f; }

/* Bars grow in on load. */
@media (prefers-reduced-motion: no-preference) {
  .bar-track { animation: barfill .9s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes barfill { from { background-size: 0 100%, 100% 100%; } }
}

/* The loop: footprint, four reviewed areas, Monday, and back. */
.loop { margin: 0 0 24px; }
.loop-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: .9fr repeat(4, 1.1fr) .9fr; gap: 22px; align-items: stretch; }
.loop-row > li { position: relative; padding: 14px 12px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink); }
.loop-row > li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -17px; width: 12px; height: 12px; border-top: 3px solid #9aa3b2; border-right: 3px solid #9aa3b2; transform: translateY(-50%) rotate(45deg); }
.loop-row span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7a8494; }
.loop-row b { display: block; margin-top: 2px; font-size: 15px; line-height: 1.25; }
.loop-row i { display: block; margin-top: 2px; font-size: 13px; font-style: normal; color: #5b6472; }
.loop-row .lp-end { background: #f0ece2; border-top-color: var(--gold); }
.lp-box em { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-weight: 800; font-size: 13px; }
.lp-box u { display: block; width: fit-content; margin: 10px auto 0; padding: 3px 10px 3px 26px; text-decoration: none; font-size: 12px; font-weight: 800; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; position: relative; background: var(--surface); }
.lp-box u::before { content: ""; position: absolute; left: 8px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid var(--ink); box-sizing: border-box; }
.lp-box small { display: block; margin-top: 6px; font-size: 12px; color: #8a6a1f; font-weight: 700; }
.lp-return { position: relative; height: 26px; margin: 10px 8% 0; border: 2px solid #b8bfcb; border-top: none; border-radius: 0 0 10px 10px; }
.lp-return span { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); background: var(--paper); padding: 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7a8494; }
.lp-return i { position: absolute; bottom: -7px; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); opacity: 0; }
.lp-cap { margin: 22px 0 0; font-size: 14px; color: #5b6472; max-width: 760px; }
@media (prefers-reduced-motion: no-preference) {
  .lp-box u::before { animation-duration: 6s; animation-iteration-count: 2; animation-fill-mode: forwards; animation-timing-function: step-end; }
  .lp1 u::before { animation-name: lp-on1 } .lp2 u::before { animation-name: lp-on2 } .lp3 u::before { animation-name: lp-on3 } .lp4 u::before { animation-name: lp-on4 }
  @keyframes lp-on1 { 0% { background: transparent } 8% { background: var(--gold) } 100% { background: var(--gold) } }
  @keyframes lp-on2 { 0% { background: transparent } 20% { background: var(--gold) } 100% { background: var(--gold) } }
  @keyframes lp-on3 { 0% { background: transparent } 32% { background: var(--gold) } 100% { background: var(--gold) } }
  @keyframes lp-on4 { 0% { background: transparent } 44% { background: var(--gold) } 100% { background: var(--gold) } }
  .lp-return i { animation: lp-dot 6s 2 forwards linear; }
  @keyframes lp-dot { 0%, 52% { right: 0; opacity: 0 } 56% { right: 0; opacity: 1 } 96% { right: calc(100% - 12px); opacity: 1 } 100% { right: calc(100% - 12px); opacity: 0 } }
}
@media (prefers-reduced-motion: reduce) { .lp-box u::before { background: var(--gold); } }
@media (max-width: 860px) {
  .loop-row { grid-template-columns: 1fr; gap: 18px; }
  .loop-row > li { text-align: left; }
  .loop-row > li:not(:last-child)::after { top: auto; bottom: -16px; right: auto; left: 24px; transform: rotate(135deg); }
  .lp-box u { margin-left: 0; }
  .lp-return { display: none; }
}