/* Guide figures: advice group. Tokens only, so light and dark both work.
   advice-and-compliance, wholesale-investor-test and the three perspective
   pieces. Square corners, one colour (--accent / --accent-bg), greys for the
   rest. Everything restacks below 700px. */

/* ---------- decision ladder (advice-and-compliance) ----------
   Each rung is a question on the left and the "yes" outcome on the right; the
   "no" path drops down the left edge to the next rung. Restacks on a phone,
   with the outcome indented under its question. */
.af-fig .adv-tree{list-style:none;margin:0;padding:0}
.af-fig .adv-tree > li{margin:0;padding:0;list-style:none}
.af-fig .adv-tree > li::before{content:none}
.af-fig .adv-rung{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:center}
.af-fig .adv-q,.af-fig .adv-o{border:1px solid var(--border-2);padding:14px 16px;background:var(--card)}
.af-fig .adv-q .n{display:block;font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.af-fig .adv-q p,.af-fig .adv-o p{font-size:14px!important;line-height:21px!important;color:var(--muted);margin:0!important}
.af-fig .adv-q p b{color:var(--text);font-weight:600}
.af-fig .adv-o h4{font-size:15px;line-height:21px;font-weight:600;color:var(--text);margin:0 0 4px}
.af-fig .adv-o.on{border-color:var(--accent);background:var(--accent-bg)}
.af-fig .adv-o.end{background:none;border-style:dashed}
.af-fig .adv-o ul{margin:6px 0 0;padding:0;list-style:none}
.af-fig .adv-o ul li{position:relative;margin:0;padding:3px 0 3px 14px;font-size:14px;line-height:20px;color:var(--muted)}
.af-fig .adv-o ul li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:1px;background:var(--muted-2)}
.af-fig .adv-o.on ul li{color:var(--text)}
/* the "yes" arrow between question and outcome */
.af-fig .adv-yes{position:relative;display:flex;align-items:center;justify-content:center}
.af-fig .adv-yes::before{content:"";position:absolute;left:0;right:6px;top:50%;height:1px;background:var(--border-2)}
.af-fig .adv-yes::after{content:"";position:absolute;right:2px;top:calc(50% - 4px);width:7px;height:7px;
  border-top:1px solid var(--border-2);border-right:1px solid var(--border-2);transform:rotate(45deg)}
.af-fig .adv-yes span,.af-fig .adv-no span{position:relative;z-index:1;font-family:var(--font-mono);font-size:11px;
  line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);background:var(--bg);padding:0 6px}
/* the "no" drop to the next rung */
.af-fig .adv-no{position:relative;height:40px;margin-left:28px;border-left:1px solid var(--border-2);display:flex;align-items:center}
.af-fig .adv-no::after{content:"";position:absolute;left:-4px;bottom:1px;width:7px;height:7px;
  border-right:1px solid var(--border-2);border-bottom:1px solid var(--border-2);transform:rotate(45deg)}
.af-fig .adv-no span{margin-left:-1px}
.af-fig .adv-split{margin:22px 0 14px;padding-top:18px;border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.af-fig .adv-endrow{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}
@media (max-width:700px){
  .af-fig .adv-rung,.af-fig .adv-endrow{grid-template-columns:1fr}
  .af-fig .adv-yes{justify-content:flex-start;height:34px;margin-left:28px;border-left:1px solid var(--border-2)}
  .af-fig .adv-yes::before{left:0;right:auto;width:14px}
  .af-fig .adv-yes::after{left:10px;right:auto}
  .af-fig .adv-yes span{margin-left:20px}
  .af-fig .adv-rung .adv-o{margin-left:28px}
  .af-fig .adv-endrow > span{display:none}
}

/* ---------- process flow with documents (advice-and-compliance) ----------
   .af-flow from article-figs.css draws the steps. Each step also names the
   paper it leaves on the file, in the mono voice under a hairline. */
.af-fig .adv-flow{grid-template-columns:repeat(5,minmax(0,1fr))}
.af-fig .adv-flow li{display:flex;flex-direction:column}
.af-fig .adv-flow .doc{margin-top:auto!important}
.af-fig .adv-flow p{margin-bottom:12px!important}
.af-fig .adv-flow .doc{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--muted-2)}
.af-fig .adv-flow .doc b{display:block;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:2px}
@media (max-width:900px) and (min-width:701px){
  .af-fig .adv-flow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
}
@media (max-width:700px){
  .af-fig .adv-flow{grid-template-columns:1fr}
}

/* ---------- net assets balance (wholesale-investor-test) ----------
   Three rows on one scale: what the client owns, what they owe, and what is
   left. A vertical line marks the $2.5m threshold through all three. The part
   whose treatment is worth confirming (super) is hatched, not coloured. */
.af-fig .adv-bal{position:relative}
.af-fig .adv-bal .row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;padding:10px 0}
.af-fig .adv-bal .lb{font-size:14px;line-height:20px;color:var(--muted)}
.af-fig .adv-bal .lb b{display:block;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.af-fig .adv-bal .track{position:relative;height:38px;background:var(--surface)}
.af-fig .adv-bal .seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;
  padding:0 8px;font-size:12px;line-height:14px;white-space:nowrap;color:var(--text);
  border-right:1px solid var(--bg)}
.af-fig .adv-bal .seg.g9{background:var(--to-grey-900);color:var(--to-grey-50)}
.af-fig .adv-bal .seg.g5{background:var(--to-grey-500);color:var(--to-ink)}
.af-fig .adv-bal .seg.ht{justify-content:flex-end;background:repeating-linear-gradient(135deg,transparent 0 5px,var(--border-2) 5px 7px);
  outline:1px solid var(--border-2);outline-offset:-1px}
.af-fig .adv-bal .seg.dbt{background:none;outline:1px solid var(--border-2);outline-offset:-1px;color:var(--muted)}
.af-fig .adv-bal .seg.net{background:var(--accent-bg);outline:1px solid var(--accent);outline-offset:-1px;font-weight:600}
.af-fig .adv-bal .thr{position:absolute;width:0;pointer-events:none;border-left:2px dashed var(--text);z-index:2}
.af-fig .adv-bal .thr i{position:absolute;top:-22px;left:-1px;transform:translateX(-50%);white-space:nowrap;font-style:normal;
  font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--text)}
.af-fig .adv-bal .rows{position:relative;padding-top:24px}
.af-fig .adv-bal .scale div span{position:absolute;top:6px;transform:translateX(-50%)}
.af-fig .adv-bal .scale div span:first-child{transform:none}
.af-fig .adv-bal .rows > .thr{left:calc(166px + (100% - 166px) * var(--x));top:22px;bottom:26px}
.af-fig .adv-bal .rows > .thr i{top:-20px}
.af-fig .adv-bal .scale{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px}
.af-fig .adv-bal .scale > div{position:relative;height:24px;font-family:var(--font-mono);font-size:11px;
  line-height:16px;color:var(--faint);border-top:1px solid var(--border);padding-top:6px}
.af-fig .adv-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
.af-fig .adv-key .k{display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;color:var(--muted)}
.af-fig .adv-key .k::before{content:"";width:12px;height:12px;flex:none;background:var(--to-grey-900)}
.af-fig .adv-key .k.ht::before{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--border-2) 3px 5px);
  outline:1px solid var(--border-2);outline-offset:-1px}
.af-fig .adv-key .k.net::before{background:var(--accent-bg);outline:1px solid var(--accent);outline-offset:-1px}
.af-fig .adv-key .k.thr::before{width:0;height:14px;background:none;border-left:2px dashed var(--text)}
@media (max-width:700px){
  .af-fig .adv-bal .row{grid-template-columns:1fr;gap:6px}
  .af-fig .adv-bal .scale{grid-template-columns:1fr}
  .af-fig .adv-bal .scale > span{display:none}
  .af-fig .adv-bal .rows > .thr{left:calc(100% * var(--x))}
  .af-fig .adv-bal .seg{font-size:11px;padding:0 5px}
  .af-fig .adv-bal .seg .hide-s{display:none}
}

/* ---------- at a glance (perspective pieces) ----------
   A fact panel: a ruled grid of short label/value pairs, no box, the one
   highlighted cell carrying the piece's main point. */
.af-fig .adv-glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--border)}
.af-fig .adv-glance > div{padding:16px 22px 16px 0;border-bottom:1px solid var(--hairline)}
.af-fig .adv-glance > div:nth-child(even){padding-left:22px;padding-right:0;border-left:1px solid var(--hairline)}
.af-fig .adv-glance dt{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.af-fig .adv-glance dd{margin:0;font-size:15px;line-height:22px;color:var(--text)}
.af-fig .adv-glance dd small{display:block;font-size:13px;line-height:19px;color:var(--muted-2);margin-top:2px}
.af-fig .adv-glance .on dt{color:var(--accent)}
.af-fig .adv-glance .wide{grid-column:1 / -1;border-left:none!important;padding-left:0!important}
.af-fig .adv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.af-fig .adv-chips span{font-size:13px;line-height:18px;color:var(--text);border:1px solid var(--border-2);padding:4px 10px}
@media (max-width:620px){
  .af-fig .adv-glance{grid-template-columns:1fr}
  .af-fig .adv-glance > div,.af-fig .adv-glance > div:nth-child(even){padding:14px 0;border-left:none}
}

/* ---------- the mix (perspective-university) ----------
   Four routes in a row, equal width because the piece gives no weights. The
   one the piece is about takes the colour and says why, in his words. */
.af-fig .adv-mix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:start;margin:0;padding:0;list-style:none}
.af-fig .adv-mix li{margin:0;padding:14px 14px 16px;border:1px solid var(--border-2);list-style:none}
.af-fig .adv-mix li::before{content:none}
.af-fig .adv-mix .n{display:block;font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--faint);margin-bottom:8px}
.af-fig .adv-mix h4{font-size:15px;line-height:21px;font-weight:600;color:var(--text);margin:0}
.af-fig .adv-mix li.on{border-color:var(--accent);background:var(--accent-bg)}
.af-fig .adv-mix li.on .n{color:var(--accent)}
.af-fig .adv-mix ul{margin:10px 0 0;padding:0;list-style:none}
.af-fig .adv-mix ul li{border:0;padding:3px 0 3px 12px;position:relative;font-size:13px;line-height:19px;color:var(--text);background:none}
.af-fig .adv-mix ul li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:1px;background:var(--text)}
.af-fig .adv-mix-note{margin:14px 0 0!important;font-size:14px!important;line-height:21px!important;color:var(--muted)}
@media (max-width:700px){
  .af-fig .adv-mix{grid-template-columns:repeat(2,minmax(0,1fr))}
  .af-fig .adv-mix li.on{grid-column:1 / -1;order:-1}
}

/* ---------- two routes, two jobs (perspective-founder) ----------
   Funds on one side, direct deals on the other, the same four questions down
   both so the reader compares across. */
.af-fig .adv-two{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--border)}
.af-fig .adv-two > *{padding:12px 16px 12px 0;border-bottom:1px solid var(--hairline);font-size:14px;line-height:21px;color:var(--muted)}
.af-fig .adv-two > .c2,.af-fig .adv-two > .c3{padding-left:16px;border-left:1px solid var(--hairline)}
.af-fig .adv-two .hd{font-size:16px;line-height:22px;font-weight:600;color:var(--text);padding-top:14px;padding-bottom:14px}
.af-fig .adv-two .hd.on{box-shadow:inset 0 3px 0 var(--accent);background:var(--accent-bg)}
.af-fig .adv-two .rl{font-family:var(--font-mono);font-size:11px;line-height:21px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.af-fig .adv-two .c2:not(.hd){color:var(--text)}
@media (max-width:620px){
  .af-fig .adv-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .af-fig .adv-two .rl{grid-column:1 / -1;padding-bottom:0;border-bottom:none;padding-top:12px}
  .af-fig .adv-two > .c2{padding-left:0;border-left:none}
  .af-fig .adv-two .sp{display:none}
}
.af-fig .adv-bal .seg.ht.l{justify-content:flex-start}