/* ROI3 Leadership readers v16. Every selector starts at .l16-reader. Colours use the inherited site palette. No animation. */

/* Base */
.l16-reader { line-height: 1.45; color: var(--ink); }
.l16-reader * { min-width: 0; }
.l16-reader .l16-q { margin: .25rem 0 .2rem; font-size: 1.0625rem; font-weight: 800; line-height: 1.25; }
.l16-reader .l16-lede { margin: 0 0 .55rem; font-size: .97rem; line-height: 1.4; }
.l16-reader .l16-fig { margin: .55rem 0 0; }
.l16-reader .l16-cap { margin: 0 0 .35rem; font-size: .8125rem; font-weight: 700; line-height: 1.3; color: var(--muted); }
.l16-reader .l16-cap-c { margin: .6rem 0 .35rem; }
.l16-reader .l16-note { margin: .4rem 0 0; font-size: .875rem; line-height: 1.35; color: var(--muted); }
.l16-reader .l16-note-top { margin: 0 0 .4rem; }
.l16-reader .l16-para { margin: .6rem 0 0; font-size: .95rem; line-height: 1.45; }
.l16-reader .l16-band { margin: .75rem 0 0; padding: .5rem .75rem; border-left: 4px solid var(--blue); border-radius: .35rem; background: var(--bg); font-size: .92rem; line-height: 1.4; }

/* Native disclosures */
.l16-reader .l16-tap { border: 1px solid var(--line); border-radius: .55rem; background: #fff; }
.l16-reader .l16-tap > summary { display: block; min-height: 44px; padding: .5rem .65rem; border-radius: inherit; cursor: pointer; list-style: none; }
.l16-reader .l16-tap > summary::-webkit-details-marker { display: none; }
.l16-reader .l16-tap > summary::after { content: "Read more +"; display: block; margin-top: .2rem; font-size: .8125rem; font-weight: 700; line-height: 1.2; color: var(--teal); }
.l16-reader .l16-tap[open] > summary::after { content: "Close \2212"; }
.l16-reader .l16-tap > summary:hover { background: var(--bg); }
.l16-reader .l16-tap > summary:focus-visible, .l16-reader .l16-support > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.l16-reader .l16-tap-b { padding: .35rem .65rem .6rem; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.4; }
.l16-reader .l16-tap-b p { margin: 0 0 .45rem; }
.l16-reader .l16-tap-b p:last-child { margin-bottom: 0; }
.l16-reader .l16-wo[open] { grid-column: 1 / -1; }
.l16-reader .l16-dark { border-color: var(--ink); background: var(--ink); color: #fff; }
.l16-reader .l16-dark > summary::after { color: #8fe0d2; }
.l16-reader .l16-dark > summary:hover { background: #18325a; }
.l16-reader .l16-dark > summary:focus-visible { outline-color: #5eead4; }
.l16-reader .l16-dark .l16-tap-b { border-top-color: rgba(255, 255, 255, .35); }

/* Labels */
.l16-reader .l16-top { display: flex; align-items: flex-start; gap: .55rem; }
.l16-reader .l16-txt { display: block; flex: 1 1 auto; }
.l16-reader .l16-t { display: block; font-size: .97rem; font-weight: 800; line-height: 1.25; }
.l16-reader .l16-s { display: block; font-size: .9rem; line-height: 1.35; }
.l16-reader .l16-k { display: block; font-size: .8125rem; font-weight: 800; line-height: 1.25; color: var(--teal); }
.l16-reader .l16-tag { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; color: #fff; font-size: .8125rem; font-weight: 700; line-height: 1.3; }
.l16-reader .l16-tag-t { background: var(--teal); }
.l16-reader .l16-tag-n { background: var(--ink); }
.l16-reader .l16-tag-a { background: var(--amber); }
.l16-reader .l16-tag-b { background: var(--blue); }

/* SVG objects */
.l16-reader .l16-i { display: block; flex: none; width: 2.35rem; height: auto; }
.l16-reader .l16-i-sm { width: 1.6rem; }
.l16-reader .l16-i-team { width: 4.5rem; }
.l16-reader svg * { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.l16-reader svg .l16-f-w { fill: #fff; }
.l16-reader svg .l16-f-n { fill: var(--ink); }
.l16-reader svg .l16-f-t { fill: var(--teal); }
.l16-reader svg .l16-f-b { fill: var(--blue); }
.l16-reader svg .l16-f-g { fill: #e0a32e; }
.l16-reader svg .l16-f-c { fill: #fbf3e2; }
.l16-reader svg .l16-f-e { fill: #e6f3f1; }
.l16-reader svg .l16-f-m { fill: #8796ab; }
.l16-reader svg .l16-i-t { stroke: var(--teal); }
.l16-reader svg .l16-i-a { stroke: var(--amber); stroke-width: 3; }
.l16-reader svg .l16-i-b { stroke: var(--blue); }
.l16-reader svg .l16-i-m { stroke: #8796ab; }
.l16-reader svg .l16-i-w { stroke-width: 4; }
.l16-reader svg .l16-i-dash { stroke-dasharray: 3 3; }
.l16-reader svg .l16-i-tx { fill: var(--teal); stroke: none; font-size: 26px; font-weight: 800; }
.l16-reader svg .l16-i-ini { fill: #fff; stroke: none; font-size: 14px; font-weight: 800; }

/* Owned art: one third of the three-scene image, never stretched */
.l16-reader .l16-art { width: 100%; aspect-ratio: 1 / 1; background-image: url(/art/leadership-scenes-v14.png); background-repeat: no-repeat; background-size: 300% 100%; }
.l16-reader .l16-art-see { background-position: 0% 50%; }
.l16-reader .l16-art-coach { background-position: 50% 50%; }
.l16-reader .l16-art-team { background-position: 100% 50%; }
.l16-reader .l16-you-t { margin: 0; font-size: .92rem; line-height: 1.3; }
.l16-reader .l16-you-t strong, .l16-reader .l16-you-t span { display: block; }
.l16-reader .l16-you-t strong { font-size: 1rem; }

/* Ordered sequences. Arrows are decorative; order comes from the list. */
.l16-reader .l16-seq { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.l16-reader .l16-seq > li { position: relative; }
.l16-reader .l16-seq > li + li::before { content: ""; position: absolute; left: 1.4rem; top: -.72rem; width: .55rem; height: .55rem; border-top: 3px solid var(--teal); border-right: 3px solid var(--teal); transform: rotate(135deg); }

/* Next-depth link. The existing ID-scoped link rule owns its padding and pill shape. */
.l16-reader .l16-door { margin-top: .85rem; padding: .6rem .75rem .7rem; border: 2px solid var(--teal); border-radius: .65rem; background: #f2f8f7; }
.l16-reader .l16-door-q { margin: 0 0 .4rem; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.l16-reader .l16-door-a { min-height: 2.75rem; max-width: 100%; background: #fff; line-height: 1.75; }

/* Retained source */
.l16-reader .l16-support { margin-top: .9rem; border: 2px solid var(--ink); border-radius: .65rem; background: #fff; }
.l16-reader .l16-support > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 44px; padding: .55rem .85rem; border-radius: .55rem; cursor: pointer; list-style: none; }
.l16-reader .l16-support > summary::-webkit-details-marker { display: none; }
.l16-reader .l16-support > summary::after { content: ""; flex: none; width: .55rem; height: .55rem; margin-right: .2rem; border-right: 3px solid var(--teal); border-bottom: 3px solid var(--teal); transform: rotate(45deg); }
.l16-reader .l16-support[open] > summary::after { transform: rotate(225deg); }
.l16-reader .l16-support > summary:hover { background: var(--bg); }
.l16-reader .l16-sum { display: block; }
.l16-reader .l16-sum > strong { display: block; font-size: 1rem; line-height: 1.25; }
.l16-reader .l16-sum > span { display: block; font-size: .875rem; line-height: 1.3; color: var(--muted); }
.l16-reader .l16-retained { padding: .1rem .85rem .9rem; font-size: .97rem; }
.l16-reader .l16-retained p { margin: 0 0 .7rem; }
.l16-reader .l16-retained ul, .l16-reader .l16-retained ol { margin: 0 0 .7rem; padding-left: 1.25rem; }

/* Shared small layouts */
.l16-reader .l16-two { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); margin-top: .7rem; }

/* ldr-why: hub around a person */
.l16-reader .l16-hub { display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l16-reader .l16-hub .l16-top { display: block; }
.l16-reader .l16-hub .l16-i { margin-bottom: .2rem; }
.l16-reader .l16-hub .l16-decide .l16-top { display: flex; }
.l16-reader .l16-you { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .65rem; align-items: center; }
.l16-reader .l16-feeds { grid-column: 1 / -1; margin: 0; font-size: .875rem; font-weight: 800; color: var(--teal); text-align: center; }
.l16-reader .l16-feeds::after { content: " \2193"; }
.l16-reader .l16-decide { grid-column: 1 / -1; }
.l16-reader .l16-who { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); margin: .6rem 0 0; }
.l16-reader .l16-who > div { padding: .35rem .6rem; border-left: 4px solid var(--teal); background: var(--bg); }
.l16-reader .l16-who dt { font-size: .875rem; font-weight: 800; }
.l16-reader .l16-who dd { margin: 0; font-size: .9rem; line-height: 1.35; }
.l16-reader .l16-routes { display: grid; gap: .5rem; }
.l16-reader .l16-to { margin-top: .1rem; color: var(--blue); }
.l16-reader .l16-to::before { content: "\2192\00a0"; }

/* ldr-leverage: what travels and what stops */
.l16-reader .l16-reach { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.l16-reader .l16-src { padding: .55rem .7rem; border-radius: .55rem; background: var(--ink); color: #fff; }
.l16-reader .l16-src strong, .l16-reader .l16-src span, .l16-reader .l16-sink strong, .l16-reader .l16-sink span { display: block; }
.l16-reader .l16-src span, .l16-reader .l16-sink span { font-size: .9rem; line-height: 1.35; }
.l16-reader .l16-pipes { position: relative; display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l16-reader .l16-sink { position: relative; padding: .55rem .7rem; border-left: 4px solid var(--teal); border-radius: .35rem; background: #e6f3f1; }
.l16-reader .l16-pipes::before, .l16-reader .l16-sink::before { content: ""; position: absolute; left: 1.4rem; top: -.72rem; width: .55rem; height: .55rem; border-top: 3px solid var(--teal); border-right: 3px solid var(--teal); transform: rotate(135deg); }
.l16-reader .l16-stop { border: 2px dashed var(--amber); background: #fff7ea; }
.l16-reader .l16-scopes { display: grid; gap: .5rem; }
.l16-reader .l16-spanbar { display: block; min-width: min(100%, 11rem); margin: .2rem 0; padding: .2rem .55rem; border-left: 4px solid var(--teal); background: #e6f3f1; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.l16-reader .l16-s100 { width: 100%; }
.l16-reader .l16-s75 { width: 75%; }
.l16-reader .l16-s50 { width: 50%; }

/* ldr-see: decision lens */
.l16-reader .l16-heads { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: .45rem; }
.l16-reader .l16-heads p { margin: 0; font-size: .875rem; line-height: 1.3; }
.l16-reader .l16-heads strong { display: block; font-size: .92rem; }
.l16-reader .l16-heads p:first-child strong { color: var(--blue); }
.l16-reader .l16-heads p:last-child strong { color: var(--teal); }
.l16-reader .l16-pairs { display: grid; gap: .45rem; }
.l16-reader .l16-lab { display: block; margin-bottom: .2rem; font-size: .875rem; font-weight: 800; }
.l16-reader .l16-chips { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .35rem; align-items: center; }
.l16-reader .l16-chip-a, .l16-reader .l16-chip-o { display: block; padding: .25rem .45rem; border-radius: .35rem; font-size: .9rem; font-weight: 700; line-height: 1.25; }
.l16-reader .l16-chip-a { border: 2px solid var(--blue); background: #fff; color: var(--blue); }
.l16-reader .l16-chip-o { border: 2px solid var(--teal); background: var(--teal); color: #fff; }
.l16-reader .l16-chip-to { font-weight: 800; color: var(--muted); }
.l16-reader .l16-lens { margin: .65rem 0 0; padding: .55rem 18% .75rem; background: var(--ink); color: #fff; text-align: center; clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); }
.l16-reader .l16-lens strong, .l16-reader .l16-lens span { display: block; line-height: 1.25; }
.l16-reader .l16-lens strong { color: #8fe0d2; font-size: .875rem; }
.l16-reader .l16-lens span { font-size: .95rem; font-weight: 700; }
.l16-reader .l16-out { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }

/* ldr-activity-view: decision chains and level views */
.l16-reader .l16-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .2rem; font-size: .875rem; font-weight: 800; }
.l16-reader .l16-legend > li + li::before { content: "\2192\00a0"; color: var(--teal); }
.l16-reader .l16-cases { display: grid; gap: .55rem; }
.l16-reader .l16-cs .l16-t { margin: .25rem 0 .3rem; }
.l16-reader .l16-kvs { display: grid; gap: .3rem; }
.l16-reader .l16-kv { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .45rem; font-size: .9rem; line-height: 1.3; }
.l16-reader .l16-zoom { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
.l16-reader .l16-mini { display: block; width: 100%; max-width: 8rem; height: auto; margin-bottom: .25rem; }
.l16-reader .l16-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.l16-reader .l16-layers > li { padding: .35rem .6rem; border-left: 5px solid var(--ink); background: var(--bg); font-size: .9rem; line-height: 1.35; }
.l16-reader .l16-layers > li:nth-child(2) { margin-left: .75rem; border-left-color: var(--teal); }
.l16-reader .l16-layers > li:nth-child(3) { margin-left: 1.5rem; border-left-color: var(--blue); }
.l16-reader .l16-layers strong, .l16-reader .l16-layers span { display: block; }

/* ldr-act: accountability ring */
.l16-reader .l16-ring { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.l16-reader .l16-ring > li { position: relative; }
.l16-reader .l16-ring-hub { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .65rem; align-items: center; padding: .3rem .6rem; border-radius: .55rem; background: #fdf8ec; }
.l16-reader .l16-ring-up, .l16-reader .l16-ring-down { display: none; }
.l16-reader .l16-st + .l16-st::before { content: ""; position: absolute; left: 1.4rem; top: -.72rem; width: .55rem; height: .55rem; border-top: 3px solid var(--teal); border-right: 3px solid var(--teal); transform: rotate(135deg); }
.l16-reader .l16-loopback { display: flex; align-items: center; gap: .6rem; margin: .65rem 0 0; padding: .4rem .75rem; border: 2px dashed var(--teal); border-radius: .6rem; background: #f2f8f7; font-size: .92rem; line-height: 1.3; }

/* ldr-signal: case timeline */
.l16-reader .l16-casewrap { display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); }
.l16-reader .l16-inv { margin: 0; padding: .35rem .65rem; border: 2px solid var(--ink); border-radius: .4rem; background: #fff; }
.l16-reader .l16-inv > div { display: flex; justify-content: space-between; gap: .6rem; padding: .25rem 0; font-size: .9rem; line-height: 1.3; }
.l16-reader .l16-inv > div + div { border-top: 1px solid var(--line); }
.l16-reader .l16-inv dd { margin: 0; flex: none; max-width: 52%; font-weight: 800; text-align: right; }
.l16-reader .l16-inv .l16-inv-miss { margin: .1rem -.35rem; padding: .3rem .35rem; border: 2px dashed var(--amber); background: #fff7ea; }
.l16-reader .l16-inv .l16-inv-miss dd { color: var(--amber); }
.l16-reader .l16-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-bottom: .2rem; }
.l16-reader .l16-when { font-size: .875rem; font-weight: 600; color: var(--muted); }
.l16-reader .l16-when-key { padding: 0 .4rem; border: 2px solid var(--amber); border-radius: .3rem; color: var(--amber); font-weight: 800; }
.l16-reader .l16-fork { display: grid; gap: .55rem; grid-template-columns: minmax(0, 1fr); margin-top: .7rem; }
.l16-reader .l16-fork-a { margin: 0; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--bg); font-size: .92rem; line-height: 1.35; }
.l16-reader .l16-fork-a strong, .l16-reader .l16-fork-a span { display: block; }
.l16-reader .l16-fork-b { border: 2px solid var(--amber); }
.l16-reader .l16-roles { display: grid; gap: .45rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l16-reader .l16-roles .l16-tap > summary { padding: .45rem .5rem; }
.l16-reader .l16-roles .l16-t { margin-top: .2rem; }
.l16-reader .l16-up { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }

/* ldr-roll: rising staircase */
.l16-reader .l16-intro { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .65rem; align-items: center; }
.l16-reader .l16-intro .l16-q { margin: 0; }
.l16-reader .l16-r-roll .l16-lede, .l16-reader.l16-r-roll .l16-lede { margin-top: .4rem; }
.l16-reader .l16-stair .l16-t { margin-bottom: .25rem; }
.l16-reader .l16-grow { position: relative; margin: .75rem 0 0; padding: .3rem 1.75rem .3rem .65rem; background: linear-gradient(90deg, #e6f3f1, #bfe0da); font-size: .875rem; font-weight: 800; line-height: 1.3; clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%); }

/* ldr-ready: foundation */
.l16-reader .l16-slab { margin: 0; padding: .45rem .7rem; border-radius: .4rem .4rem 0 0; background: var(--ink); color: #fff; font-size: .9rem; line-height: 1.3; }
.l16-reader .l16-slab strong, .l16-reader .l16-slab span { display: block; }
.l16-reader .l16-pillars { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .5rem .35rem; background: var(--bg); }
.l16-reader .l16-pillars .l16-tap { border-width: 0 4px; border-color: var(--teal); border-radius: 0; }
.l16-reader .l16-pillars .l16-tap > summary { border-radius: 0; }
.l16-reader .l16-ground { margin: 0; padding: .35rem .7rem; border-radius: 0 0 .4rem .4rem; background: #d9b98f; font-size: .9rem; font-weight: 800; line-height: 1.3; text-align: center; }
.l16-reader .l16-ledger { display: grid; gap: .55rem; grid-template-columns: minmax(0, 1fr); }
.l16-reader .l16-ledger > div { padding: .5rem .7rem; border-radius: .5rem; font-size: .92rem; line-height: 1.35; }
.l16-reader .l16-ledger p { margin: 0 0 .25rem; }
.l16-reader .l16-ledger ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.l16-reader .l16-ledger li { position: relative; padding-left: 1.25rem; }
.l16-reader .l16-ledger li::before { position: absolute; left: 0; font-weight: 800; }
.l16-reader .l16-led-no { border: 2px dashed var(--amber); background: #fff7ea; }
.l16-reader .l16-led-no li::before { content: "\2715"; color: var(--amber); }
.l16-reader .l16-led-yes { border: 2px solid var(--teal); background: #f2f8f7; }
.l16-reader .l16-led-yes li::before { content: "\2713"; color: var(--teal); }

/* ldr-sales-see and ldr-sales-measure: charts on labelled scales */
.l16-reader .l16-panel { padding: .55rem .65rem .65rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--bg); }
.l16-reader .l16-chart-cap { margin-bottom: .4rem; }
.l16-reader .l16-chart-cap strong, .l16-reader .l16-chart-cap span { display: block; line-height: 1.3; }
.l16-reader .l16-chart-cap strong { font-size: .95rem; }
.l16-reader .l16-chart-cap span { font-size: .875rem; color: var(--muted); }
.l16-reader .l16-bars { display: grid; gap: .35rem; }
.l16-reader .l16-bar > summary { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 1.7rem; gap: .2rem .5rem; align-items: center; }
.l16-reader .l16-bar > summary::after { grid-column: 1 / -1; margin-top: 0; }
.l16-reader .l16-bar-l { font-size: .9rem; font-weight: 700; line-height: 1.2; }
.l16-reader .l16-bar-v { font-size: 1.15rem; font-weight: 800; line-height: 1; text-align: right; }
.l16-reader .l16-track { display: block; height: .85rem; border-radius: .2rem; background: var(--track); overflow: hidden; }
.l16-reader .l16-fill { display: block; height: 100%; }
.l16-reader .l16-f-blue { background: var(--blue); }
.l16-reader .l16-f-teal { background: var(--teal); }
.l16-reader .l16-f-mute { background: #8796ab; }
.l16-reader .l16-w100 { width: 100%; }
.l16-reader .l16-w83 { width: calc(500% / 6); }
.l16-reader .l16-w67 { width: calc(200% / 3); }
.l16-reader .l16-w17 { width: calc(100% / 6); }
.l16-reader .l16-gap { margin: .5rem 0; padding: .1rem 0 .1rem .65rem; border-left: 4px dotted var(--amber); font-size: .875rem; font-weight: 700; line-height: 1.3; color: var(--amber); }
.l16-reader .l16-flagpanel { margin: 0; padding: .55rem .65rem .65rem; border-top: 4px solid var(--amber); border-radius: .35rem; background: #fff7ea; }
.l16-reader .l16-flagd { border-color: var(--amber); }
.l16-reader .l16-stack { display: inline-flex; flex: none; gap: .18rem; padding-top: .1rem; }
.l16-reader .l16-stack i { display: block; width: .85rem; height: 1.1rem; background: var(--amber); clip-path: polygon(0 0, 68% 0, 100% 30%, 100% 100%, 0 100%); }
.l16-reader .l16-plainbars { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.l16-reader .l16-plainbars > li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 2rem; gap: .5rem; align-items: center; }
.l16-reader .l16-delta { margin: .55rem 0 0; font-size: .92rem; line-height: 1.35; }

/* ldr-sales-coach: fork and merge */
.l16-reader .l16-start { margin: 0 auto .75rem; padding: .25rem .8rem; width: fit-content; max-width: 100%; border-radius: 1rem; background: var(--ink); color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.3; text-align: center; }
.l16-reader .l16-forkcards { display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); }
.l16-reader .l16-card { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: .6rem .7rem .7rem; border-radius: .55rem; background: #fff; }
.l16-reader .l16-card > .l16-tap, .l16-reader .l16-card > .l16-meta { align-self: stretch; }
.l16-reader .l16-card > .l16-tap { margin-top: auto; }
.l16-reader .l16-card-a { border: 2px solid var(--amber); }
.l16-reader .l16-card-b { border: 2px dashed var(--blue); }
.l16-reader .l16-card-t { margin: 0; font-size: 1.02rem; font-weight: 800; line-height: 1.25; }
.l16-reader .l16-share { display: block; width: 100%; max-width: 11rem; height: auto; }
.l16-reader .l16-meta { margin: 0; display: grid; gap: .15rem; }
.l16-reader .l16-meta > div { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr); gap: .4rem; font-size: .9rem; line-height: 1.3; }
.l16-reader .l16-meta dt { font-weight: 800; }
.l16-reader .l16-meta dd { margin: 0; }
.l16-reader .l16-merge { margin-top: .75rem; padding: .5rem .65rem .65rem; border-radius: .55rem; background: #f2f8f7; border: 2px solid var(--teal); }
.l16-reader .l16-merge-t { margin: 0; text-align: center; }
.l16-reader .l16-merge .l16-two { margin-top: .4rem; }

/* ldr-sales-measure: locks and bridge */
.l16-reader .l16-locks { display: grid; gap: .45rem; grid-template-columns: minmax(0, 1fr); }
.l16-reader .l16-locks .l16-top { align-items: center; }
.l16-reader .l16-whybox { margin-top: .7rem; border: 2px dashed var(--amber); }
.l16-reader .l16-chipline { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.l16-reader .l16-chipline > span { padding: .05rem .5rem; border: 1px solid var(--amber); border-radius: 1rem; font-size: .875rem; font-weight: 700; }
.l16-reader .l16-bridge .l16-tap { border-style: dashed; border-color: #8796ab; }
.l16-reader .l16-bridge .l16-br-on .l16-tap { border: 2px solid var(--teal); background: #e6f3f1; }

/* Wider dialog */
@media (min-width: 641px) {
  .l16-reader .l16-seq.l16-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
  .l16-reader .l16-seq.l16-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
  .l16-reader .l16-seq.l16-c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
  .l16-reader .l16-c3 > li + li::before, .l16-reader .l16-c4 > li + li::before, .l16-reader .l16-c5 > li + li::before { left: -.88rem; top: 1.2rem; transform: rotate(45deg); }
  .l16-reader .l16-two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .l16-reader .l16-wo[open] { grid-column: auto; }

  .l16-reader .l16-hub { grid-template-columns: minmax(0, 1fr) 10.5rem minmax(0, 1fr); gap: .85rem; align-items: start; }
  .l16-reader .l16-you { grid-column: 2; grid-row: 1 / 3; display: block; text-align: center; align-self: center; }
  .l16-reader .l16-you::before, .l16-reader .l16-you::after { content: ""; position: absolute; left: -.85rem; right: -.85rem; height: 2px; background: linear-gradient(90deg, var(--teal) .85rem, transparent .85rem, transparent calc(100% - .85rem), var(--teal) calc(100% - .85rem)); }
  .l16-reader .l16-you::before { top: 25%; }
  .l16-reader .l16-you::after { top: 75%; }
  .l16-reader .l16-sp-a { grid-column: 1; grid-row: 1; }
  .l16-reader .l16-sp-b { grid-column: 3; grid-row: 1; }
  .l16-reader .l16-sp-c { grid-column: 1; grid-row: 2; }
  .l16-reader .l16-sp-d { grid-column: 3; grid-row: 2; }
  .l16-reader .l16-feeds { grid-row: 3; }
  .l16-reader .l16-decide { grid-row: 4; }
  .l16-reader .l16-who { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .l16-reader .l16-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

  .l16-reader .l16-reach { grid-template-columns: 9rem minmax(0, 1fr) 9rem; gap: 1.2rem; align-items: start; }
  .l16-reader .l16-pipes::before, .l16-reader .l16-sink::before { left: -.88rem; top: 1.2rem; transform: rotate(45deg); }
  .l16-reader .l16-stop { grid-column: 1 / -1; }

  .l16-reader .l16-out { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

  .l16-reader .l16-kvs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .l16-reader .l16-kv { display: block; }
  .l16-reader .l16-zoom { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

  .l16-reader .l16-ring { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 1.4rem; align-items: start; }
  .l16-reader .l16-ring-hub { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 7.5rem minmax(0, 1fr); margin: 0 2.4rem; padding: .25rem .75rem; }
  .l16-reader .l16-st1 { grid-column: 1; grid-row: 1; }
  .l16-reader .l16-st2 { grid-column: 2; grid-row: 1; }
  .l16-reader .l16-st3 { grid-column: 3; grid-row: 1; }
  .l16-reader .l16-st4 { grid-column: 3; grid-row: 3; }
  .l16-reader .l16-st5 { grid-column: 2; grid-row: 3; }
  .l16-reader .l16-st6 { grid-column: 1; grid-row: 3; }
  .l16-reader .l16-st2::before, .l16-reader .l16-st3::before { left: -1.03rem; top: 1.2rem; transform: rotate(45deg); }
  .l16-reader .l16-st5::before, .l16-reader .l16-st6::before { left: auto; right: -1.03rem; top: 1.2rem; transform: rotate(-135deg); }
  .l16-reader .l16-st + .l16-st4::before { display: none; }
  .l16-reader .l16-ring-up, .l16-reader .l16-ring-down { display: block; position: absolute; top: -.75rem; bottom: -.75rem; width: 3px; background: var(--teal); }
  .l16-reader .l16-ring-up { left: -1.5rem; }
  .l16-reader .l16-ring-down { right: -1.5rem; }
  .l16-reader .l16-ring-up::after, .l16-reader .l16-ring-down::after { content: ""; position: absolute; left: -4px; width: .6rem; height: .6rem; border-top: 3px solid var(--teal); border-right: 3px solid var(--teal); }
  .l16-reader .l16-ring-up::after { top: 0; transform: rotate(-45deg); }
  .l16-reader .l16-ring-down::after { bottom: 0; transform: rotate(135deg); }

  .l16-reader .l16-casewrap { grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem; align-items: start; }
  .l16-reader .l16-inv > div { display: block; }
  .l16-reader .l16-inv dd { max-width: none; text-align: left; }
  .l16-reader .l16-fork { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
  .l16-reader .l16-up { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .l16-reader .l16-up > li:nth-child(1) { margin-top: 2.4rem; }
  .l16-reader .l16-up > li:nth-child(2) { margin-top: 1.2rem; }

  .l16-reader .l16-intro { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .l16-reader .l16-stair { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
  .l16-reader .l16-stair > li:nth-child(1) { margin-top: 3rem; }
  .l16-reader .l16-stair > li:nth-child(2) { margin-top: 2rem; }
  .l16-reader .l16-stair > li:nth-child(3) { margin-top: 1rem; }
  .l16-reader .l16-stair > li + li::before { left: -.88rem; top: 1.2rem; transform: rotate(45deg); }
  .l16-reader .l16-stair .l16-kv { display: block; }

  .l16-reader .l16-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
  .l16-reader .l16-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .l16-reader .l16-forkcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
  .l16-reader .l16-locks { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* Narrow phones */
@media (max-width: 360px) {
  .l16-reader .l16-tap > summary { padding: .45rem .55rem; }
  .l16-reader .l16-you, .l16-reader .l16-ring-hub { grid-template-columns: 5rem minmax(0, 1fr); }
  .l16-reader .l16-intro { grid-template-columns: 5rem minmax(0, 1fr); }
  .l16-reader .l16-roles { grid-template-columns: minmax(0, 1fr); }
  .l16-reader .l16-plainbars > li { grid-template-columns: 5rem minmax(0, 1fr) 1.8rem; }
  .l16-reader .l16-lens { padding-left: 14%; padding-right: 14%; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
}