/* ==========================================================================
   Section patterns (section-patterns.js): interactive ways to show a case
   study section. Quiet, on the case-study tokens; 4-point spacing.
   ========================================================================== */
.sp{position:relative;display:flex;flex-direction:column}
.sp__pane{display:flex;flex-direction:column;gap:clamp(24px,2.6vw,32px)}
.sp__pane[hidden]{display:none}
.sp__pane.is-in{animation:sp-in .3s cubic-bezier(.3,.7,.2,1)}
@keyframes sp-in{from{opacity:0;translate:var(--from,24px) 0}}
.sp-stack{display:flex;flex-direction:column;gap:clamp(24px,2.6vw,32px)}

/* review switcher */
.spsw{align-self:flex-end;display:inline-flex;align-items:center;gap:4px;margin:0 0 16px;padding:4px;border-radius:999px;
  background:#111;color:#fff;font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  box-shadow:0 4px 12px rgba(0,0,0,.18);user-select:none}
/* above the section's heading: it takes the heading's top margin, and sits
   12px over the heading instead of a full paragraph gap */
.content > .spsw{margin:clamp(20px,2.8vw,32px) 0 calc(12px - clamp(24px,2.6vw,32px))}
.content > .spsw:first-child{margin-top:0}
.content > .spsw + h2{margin-top:0}
.spsw button{all:unset;cursor:pointer;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:16px}
.spsw button:hover{background:rgba(255,255,255,.16)}
.spsw button:focus-visible{outline:2px solid #fff}
.spsw__name{padding:0 8px;white-space:pre;font-variant-numeric:tabular-nums}
/* edit mode: commit this section's pattern (gk-commit.js) */
.spsw button.spsw__commit{width:auto;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:#5b2bb8;margin-left:4px}
.spsw button.spsw__commit[data-state="same"]{background:transparent;opacity:.72}

/* tiles */
.sp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.sp-tile{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:8px;background:var(--panel);
  font-size:var(--fs-meta);line-height:1.5;color:var(--body)}
.sp-tile b{font-weight:500;color:var(--ink)}
.sp-tile__n{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.sp-tile__ico{width:24px;height:24px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sp-callout{padding:16px 20px;border-left:2px solid var(--ink);background:var(--panel);line-height:1.6;color:var(--ink)}
.sp-callout__k{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* details */
.sp-details{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sp-details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;font-size:var(--fs-meta);color:var(--ink)}
.sp-details summary::-webkit-details-marker{display:none}
.sp-details summary::after{content:"+";font-size:18px;line-height:1;transition:rotate .2s}
.sp-details[open] summary::after{rotate:45deg}
.sp-details__body{display:flex;flex-direction:column;gap:16px;padding:0 0 16px}

/* pull quote. Leads and quotes (here, .sp-lead, .sp-band) never outsize the section titles: capped at --fs-h2 */
.sp-pull{font-size:min(clamp(22px,2.4vw,28px),var(--fs-h2));line-height:1.3;letter-spacing:-.02em;color:var(--ink);font-weight:400;
  padding-left:20px;border-left:2px solid var(--ink)}

/* tabs */
.sp-tabs{display:flex;flex-direction:column;gap:16px}
.sp-tabs__list{display:flex;flex-wrap:wrap;gap:4px}
.sp-tabs__tab{font:inherit;font-size:var(--fs-meta);cursor:pointer;padding:8px 12px;border-radius:999px;
  border:1px solid var(--hair);background:none;color:var(--body)}
.sp-tabs__tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sp-tabs__tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sp-tabs__panel{padding:16px 20px;border-radius:8px;background:var(--panel);line-height:1.6;color:var(--ink);min-height:72px}
/* Inner Bloom, Designing for trust with AI: the chips and the text they switch
   share one outlined container, with no grey fill behind the text */
[data-sp="trust-with-ai"] .sp-tabs{padding:20px 24px;border:1px solid var(--hair);border-radius:8px;gap:20px}
[data-sp="trust-with-ai"] .sp-tabs__panel{padding:0;border-radius:0;background:none;min-height:0}
@media (max-width:560px){[data-sp="trust-with-ai"] .sp-tabs{padding:16px}}

/* annotated screenshot */
.sp-annot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:center}
/* the phone is a cutout (no black box behind it), sized up a little */
.sp-annot__stage{position:relative;display:grid;place-items:center}
.sp-annot__shot{position:relative;width:100%;max-width:400px}
.sp-annot__stage img{display:block;width:100%;height:auto;background:none;border-radius:0}
.sp-annot__dot{position:absolute;translate:-50% -50%;width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:#000;font:600 12px/1 var(--sans);box-shadow:0 0 0 4px rgba(255,255,255,.28);transition:scale .15s}
.sp-annot__dot.is-on{scale:1.25;background:#e8ff59;box-shadow:0 0 0 6px rgb(232 255 89 / .35)}
.sp-annot__stage.has-on .sp-annot__dot:not(.is-on){opacity:.5}
.sp-annot__dot{transition:scale .15s,opacity .15s,background .15s}
/* each description carries its dot's number; the one picked is lit in the
   dot's yellow, the rest fade back */
.sp-annot__notes{margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-meta);color:var(--body);line-height:1.5}
.sp-annot__notes li{list-style:none;display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;padding:10px 12px;
  border-radius:8px;cursor:pointer;transition:background .15s,opacity .15s,color .15s}
.sp-annot__n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--hair);
  font:600 12px/1 var(--sans);color:var(--ink);transition:background .15s,border-color .15s}
.sp-annot__notes.has-on li:not(.is-on){opacity:.45}
.sp-annot__notes li.is-on{background:#f6ffc9;color:var(--ink)}
.sp-annot__notes li.is-on .sp-annot__n{background:#e8ff59;border-color:#000}
.sp-annot__notes b{color:var(--ink)}
:root .content .sp-annot__notes li b{font-weight:700}   /* outranks the Type panel's universal weight */
@media (prefers-reduced-motion:reduce){.sp-annot__dot,.sp-annot__notes li,.sp-annot__n{transition:none}}
.sp-annot figcaption{grid-column:1 / -1}
@media (max-width:640px){.sp-annot{grid-template-columns:1fr}}

/* click-through flow */
.sp-flow{display:flex;flex-direction:column;gap:12px}
.sp-flow__frame{background:#000;aspect-ratio:1;display:grid;place-items:center;padding:24px}
.sp-flow__step{margin:0;height:100%;display:grid;place-items:center}
.sp-flow__step[hidden]{display:none}
.sp-flow__step img{height:100%;width:auto;object-fit:contain;animation:sp-fade .25s ease}
@keyframes sp-fade{from{opacity:0}}
.sp-flow__bar{display:flex;align-items:center;gap:12px}
.sp-flow__cap{flex:1;margin:0;font-size:var(--fs-meta);color:var(--body)}
.sp-flow__cap b{font-weight:500;color:var(--ink);margin-right:8px}
.sp-flow__bar button,.sp-carousel__arrow{width:32px;height:32px;border-radius:50%;border:1px solid var(--hair);background:none;cursor:pointer;font-size:16px;color:var(--ink)}
.sp-flow__bar button:hover,.sp-carousel__arrow:hover{border-color:var(--ink)}

/* compare slider */
.sp-compare{position:relative;aspect-ratio:1;background:#000;overflow:hidden;--cut:50%}
.sp-compare img{position:absolute;inset:24px;width:calc(100% - 48px);height:calc(100% - 48px);object-fit:contain}
.sp-compare__b{clip-path:inset(0 0 0 var(--cut))}
.sp-compare__line{position:absolute;top:0;bottom:0;left:var(--cut);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.sp-compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.sp-compare__labels{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;pointer-events:none}
.sp-compare__labels span{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.9);color:#000;font-size:12px}
.sp-compare__labels span:empty{display:none}

/* metric tiles */
.sp-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.sp-metric{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:8px;background:var(--panel)}
.sp-metric b{font-size:clamp(28px,3vw,40px);line-height:1;font-weight:400;letter-spacing:-.03em;color:var(--ink)}
.sp-metric span{font-size:var(--fs-meta);color:var(--body);line-height:1.4}

/* quotes */
.sp-carousel{display:flex;flex-direction:column;gap:16px}
.sp-carousel__slide[hidden]{display:none}
.sp-carousel__slide{animation:sp-fade .25s ease}
.sp-carousel__bar{display:flex;align-items:center;gap:12px}
.sp-carousel__dots{display:flex;gap:8px}
.sp-carousel__dots button{width:8px;height:8px;padding:0;border-radius:50%;border:0;background:var(--hair);cursor:pointer}
.sp-carousel__dots button[aria-current="true"]{background:var(--ink)}
.sp-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.sp-quotes .quote{margin:0;padding:20px;border-radius:8px;background:var(--panel)}
@media (prefers-reduced-motion:reduce){.sp__pane.is-in,.sp-flow__step img,.sp-carousel__slide{animation:none}}

/* three of anything sit three across (never wrapping to 2 + 1); four make a 2×2 */
.sp-tiles:has(> :nth-child(3):last-child),.sp-metrics:has(> :nth-child(3):last-child),.sp-quotes:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-tiles:has(> :nth-child(2):last-child),.sp-metrics:has(> :nth-child(2):last-child),.sp-quotes:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-tiles:has(> :nth-child(4):last-child),.sp-metrics:has(> :nth-child(4):last-child),.sp-quotes:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-tiles:has(> :nth-child(6):last-child),.sp-tiles:has(> :nth-child(9):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}   /* six or nine: an even grid, three across */
.sp-tile,.sp-metric,.sp-quotes .quote{min-width:0;overflow-wrap:break-word}
/* three metrics across: the big figure scales down so a word like "Immediate" stays whole */
.sp-metrics:has(> :nth-child(3):last-child) b{font-size:clamp(20px,2vw,28px)}
.sp-tabs__panel ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:.45em}
.sp-tabs__panel li{list-style:disc}
@media (max-width:480px){
  .sp-tiles,.sp-metrics,.sp-quotes{grid-template-columns:1fr !important}
}

/* landscape screenshots (compare, click-through) keep their own shape on the
   panel grey; phone screenshots sit in the black square (set by the script) */
.sp-compare.is-wide,.sp-flow__frame.is-wide{aspect-ratio:var(--ar);background:var(--panel);padding:0}
.sp-compare.is-wide img{inset:0;width:100%;height:100%;object-fit:cover}
.sp-flow__frame.is-wide .sp-flow__step img{width:100%;height:auto}

/* side-by-side cards: who can do what, each point ticked */
.sp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sp-col{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:8px;background:var(--panel)}
.sp-col__head{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink)}
.sp-col__head svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sp-checks{margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.content .sp-checks li{list-style:none;position:relative;padding-left:24px;color:var(--body);line-height:1.5}
.sp-checks li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center/contain no-repeat}
/* step lanes: one row per person, the steps numbered and read across */
.sp-lanes{display:flex;flex-direction:column;gap:16px}
.sp-lane{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:start}
.sp-lane__name{font-weight:500;color:var(--ink);font-size:var(--fs-meta);padding-top:6px}
.sp-steps{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:st}
.content .sp-steps li{list-style:none;counter-increment:st;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;
  border:1px solid var(--hair);font-size:var(--fs-meta);color:var(--body);line-height:1.3}
.sp-steps li::before{content:counter(st);display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:var(--bg);font-size:11px;font-variant-numeric:tabular-nums}
@media (max-width:560px){.sp-cols{grid-template-columns:1fr}.sp-lane{grid-template-columns:1fr;gap:8px}}

/* pull quotes without their side rule (Layout options → Cases → Pull quotes) */
:root[data-pullline="off"] :is(.sp-pull, .content .quote){border-left:0;padding-left:0}

/* large lead (standfirst) */
.content .sp-lead{font-size:min(clamp(20px,1.8vw,24px),var(--fs-h2));line-height:1.45;letter-spacing:-.015em;color:var(--ink)}
/* numbered beats */
.sp-beat{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start}
.sp-beat__n{font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
/* timeline */
.sp-tl{margin:0;padding:0;display:flex;flex-direction:column;gap:24px;position:relative}
.content .sp-tl__item{list-style:none;position:relative;padding-left:28px;display:flex;flex-direction:column;gap:16px}
.sp-tl__item::before{content:"";position:absolute;left:4px;top:10px;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.sp-tl__item::after{content:"";position:absolute;left:8px;top:24px;bottom:-24px;width:1px;background:var(--hair)}
.sp-tl__item:last-child::after{display:none}
.content .sp-tl__media{padding-left:28px}   /* images in a timeline: in line with the steps' text, no dot */
.content .sp-tl__rest,.content .sp-tl__rest strong{color:var(--muted)}   /* after each step's first sentence: secondary grey (5.0:1, AA) */
/* checklist on a panel */
.sp-checks--panel{padding:20px;border-radius:8px;background:var(--panel)}
/* big numbers */
.sp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:12px}
.sp-stat{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:8px;border:1px solid var(--hair)}
.sp-stat b{font-size:clamp(26px,2.6vw,36px);line-height:1.05;font-weight:400;letter-spacing:-.03em;color:var(--ink)}
.sp-stat span{font-size:var(--fs-meta);color:var(--body);line-height:1.4}
/* before / after */
.sp-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sp-vs__card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:8px}
.sp-vs__card--before{border:1px dashed #c9c9cc;color:var(--body)}
.sp-vs__card--after{background:var(--ink);color:#fff}
.sp-vs__card b{font-weight:500;font-size:var(--fs-body)}
.content .sp-vs__card p{margin:0;font-size:var(--fs-meta);line-height:1.5;color:inherit}
.sp-vs__k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
@media (max-width:560px){.sp-vs,.sp-stats{grid-template-columns:1fr;grid-auto-flow:row}.sp-beat{grid-template-columns:32px minmax(0,1fr)}}

/* paragraph cards */
.sp-cardgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sp-pcard{padding:20px;border-radius:8px;background:var(--panel)}
.content .sp-pcard p{margin:0;font-size:var(--fs-meta);line-height:1.55}
/* accordion */
.sp-acc{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.sp-acc__item{border-bottom:1px solid var(--hair)}
.sp-acc__item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:14px 0;color:var(--ink);line-height:1.45}
.sp-acc__item summary::-webkit-details-marker{display:none}
.sp-acc__head strong{font-weight:inherit}   /* the item's bold title, set as the heading */
.sp-acc__item summary::after{content:"+";flex:none;font-size:18px;line-height:1.2;transition:rotate .2s}
.sp-acc__item[open] summary::after{rotate:45deg}
.sp-acc__body{padding:0 0 16px}
.sp-acc__title{display:flex;gap:12px}
.sp-acc__n{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}   /* cfg.numbered */
/* sideways strip */
.sp-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.sp-strip__card{flex:0 0 min(78%,320px);scroll-snap-align:start;padding:20px;border-radius:8px;border:1px solid var(--hair)}
.content .sp-strip__card p{margin:0;font-size:var(--fs-meta);line-height:1.55}
.content .sp-strip__hint{margin:-12px 0 0;font-size:12px;color:var(--muted)}
/* dark band */
/* band breakout (Hixy overview): the paragraphs around the band, each in its own treatment */
.sp-bx--stat,.sp-bx--label{display:grid;grid-template-columns:clamp(150px,14vw,184px) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:start}
.sp-bx__stat{display:flex;flex-direction:column;justify-content:space-between;gap:8px;aspect-ratio:1;padding:clamp(14px,1.6vw,20px);border-radius:8px;border:1px solid var(--hair);container-type:inline-size}
.sp-bx__stat b{white-space:nowrap}
.sp-bx__stat b{font-size:clamp(32px,3.4vw,48px);line-height:1;font-weight:400;letter-spacing:-.03em;color:var(--ink)}
.sp-bx__stat span,.sp-bx__k{font-size:var(--fs-cap);color:var(--muted);line-height:1.4}
.sp-bx__k{text-transform:uppercase;letter-spacing:.06em;padding-top:.3em}
.sp-bx--card{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2.4vw,28px);border-radius:8px;background:var(--panel)}
.sp-bx--card .sp-bx__k{padding-top:0}
.sp-bx > p{margin:0}
/* Next to its paragraph the stat tile takes the paragraph's height; stacked on phones it stays square */
.sp-bx--stat{align-items:stretch}.sp-bx--stat .sp-bx__stat{aspect-ratio:auto}
@media (max-width:560px){.sp-bx--stat,.sp-bx--label{grid-template-columns:1fr;gap:8px}.sp-bx--stat{gap:16px}.sp-bx__stat{width:min(200px,60%)}.sp-bx--stat .sp-bx__stat{aspect-ratio:1}}
.sp-band{position:relative;padding:clamp(28px,4vw,48px);border-radius:8px;background:#000;overflow:hidden}
.content .sp-band p{position:relative;z-index:1}
.sp-band__sky{position:absolute;left:0;right:0;pointer-events:none;will-change:transform}
.sp-px{transition:visibility 0s}
.sp-px.is-under{visibility:hidden}   /* never behind the words */
/* the band's sparkly pixels (placed by section-patterns.js): 2px pixels,
   4px dots and pixel pluses, fading in and out like the footer's sky */
.sp-px{position:absolute;width:2px;height:2px;background:#fff;animation:sp-twinkle 3s ease-in-out infinite}
.sp-px--dot{width:4px;height:4px}
.sp-px--plus{width:4px;height:4px;box-shadow:-4px 0 #fff,4px 0 #fff,0 -4px #fff,0 4px #fff}
@keyframes sp-twinkle{0%,100%{opacity:.15}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.sp-px{animation:none;opacity:.7}}
.content .sp-band p{margin:0;color:#fff;font-size:min(clamp(20px,2.2vw,26px),var(--fs-h2));line-height:1.35;letter-spacing:-.015em}
/* margin note */
.sp-marginwrap{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:24px;align-items:start}
/* the star leads, then the rule, then the note */
.sp-margin{position:sticky;top:96px;font-size:var(--fs-meta);line-height:1.5;color:var(--ink)}
/* star and rule on one line: the rule runs from the star to the edge */
.sp-margin span{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;line-height:1}
.sp-margin span::after{content:"";flex:1;height:1px;background:var(--ink)}
@media (max-width:720px){.sp-cardgrid{grid-template-columns:1fr}.sp-marginwrap{grid-template-columns:1fr}.sp-margin{position:static}}
/* edit mode: the section under the pointer answers to ← / → (section-patterns.js); its switcher says so */
.spsw.is-keyed{box-shadow:0 0 0 2px #5b2bb8}
.spsw.is-keyed .spsw__name::after{content:"  ← →";opacity:.6}

/* trust notes (end of the Inner Bloom case study, edit mode only; trust-notes.js):
   accordion items, each a four-step carousel from beginner to the case-study wording */
.tnotes{grid-column:2;min-width:0;max-width:var(--measure);margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid var(--ink)}
.tnotes[hidden]{display:none}
.tnotes__eyebrow{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tnotes h2{margin:0 0 12px;font-size:var(--fs-h2,24px);font-weight:500;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.tnotes__intro{margin:0 0 24px;color:var(--body);line-height:1.6}
.tnote{border-bottom:1px solid var(--hair)}
.tnote:first-of-type{border-top:1px solid var(--hair)}
.tnote summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline;padding:16px 0;color:var(--ink);line-height:1.45}
.tnote summary::-webkit-details-marker{display:none}
.tnote summary::after{content:"+";margin-left:auto;flex:none;font-size:18px;line-height:1;transition:rotate .2s}
.tnote[open] summary::after{rotate:45deg}
.tnote__n{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tnote__car{min-width:0;padding:0 0 20px}
.tnote__steps{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.tnote__step{font:inherit;font-size:12px;cursor:pointer;padding:4px 10px;min-height:28px;border-radius:999px;border:1px solid var(--hair);background:var(--bg,#fff);color:var(--body)}
.tnote__step[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.tnote__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:8px;border:1px solid var(--hair)}
.tnote__track::-webkit-scrollbar{display:none}
.tnote__track:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tnote__slide{flex:0 0 100%;scroll-snap-align:start;padding:20px;box-sizing:border-box}
.tnote__slide p{margin:0;color:var(--ink);line-height:1.6}
.tnote__slide .tnote__level{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tnote__title{margin:0 0 8px;font-size:var(--fs-sub,18px);font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.tnote__slide .tnote__eg{margin:16px 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tnote__slide blockquote{margin:0;padding:10px 14px;border-left:2px solid var(--ink);background:#f6f6f4}
.tnote__nav{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:8px}
.tnote__nav button{font:inherit;cursor:pointer;width:32px;height:32px;border-radius:50%;border:1px solid var(--hair);background:var(--bg,#fff);color:var(--ink)}
.tnote__nav button:disabled{opacity:.35;cursor:default}
.tnote__count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:850px){.tnotes{grid-column:1 / -1}}   /* the article goes to one column here (case.css) */

/* Risk cards (riskcards): each row of a table as a card showing its name; a
   second card sits just behind it, its edge showing, and turning the tile
   (click, tap, or the Details button) brings it forward with the rest of the
   row. Both cards share one grid cell, so a tile is as tall as its longer side;
   the 8px inset on the tile is the room the card behind peeks into. */
.sp-rc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:20px 16px}   /* every row as tall as the tallest: all cards one size */
@media (max-width:560px){.sp-rc{grid-template-columns:minmax(0,1fr)}}
.sp-rc__tile{position:relative;display:grid;padding:0 8px 8px 0;cursor:pointer}
.sp-rc__card{grid-area:1/1;min-height:136px;padding:20px;border-radius:12px;border:1px solid var(--hair);background:var(--bg);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .35s ease,box-shadow .35s ease}
.sp-rc__card > *{transition:opacity .2s ease}
.sp-rc__front{z-index:2;box-shadow:0 1px 3px rgb(0 0 0 / .05);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
/* the front reads like an index card: its number up top, the name at the foot */
.sp-rc__n{font:400 var(--fs-cap)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);padding-top:4px}
.content .sp-rc__name{padding-right:0}
.sp-rc__back{z-index:1;transform:translate(8px,8px);background:var(--panel)}
.sp-rc__back > *{opacity:0}
.sp-rc__tile.is-open .sp-rc__back{z-index:2;transform:none;background:var(--bg);box-shadow:0 1px 3px rgb(0 0 0 / .05)}
.sp-rc__tile.is-open .sp-rc__back > *{opacity:1}
.sp-rc__tile.is-open .sp-rc__front{z-index:1;transform:translate(8px,8px);background:var(--panel);box-shadow:none}
.sp-rc__tile.is-open .sp-rc__front > *{opacity:0}
.sp-rc__tile:hover .sp-rc__card:not(:only-child){border-color:#d6d6d6}
.content .sp-rc__name{margin:0;font-size:calc(18px * var(--type,1));font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.sp-rc__back{padding-right:20px}
.content .sp-rc__back .sp-rc__k:first-child{padding-right:72px}   /* clear of the Back button */
.content .sp-rc__k{margin:0 0 2px;font-size:var(--fs-cap);line-height:1.4;color:var(--muted)}
.content .sp-rc__v{margin:0 0 14px;font-size:var(--fs-meta);line-height:1.5;color:var(--body)}
.content .sp-rc__v:last-child{margin-bottom:0}
.sp-rc__flip{position:absolute;top:14px;right:22px;z-index:3;font:500 12px/1 var(--sans);color:var(--ink);background:var(--bg);
  border:1px solid var(--hair);border-radius:999px;padding:6px 10px;cursor:pointer}
.sp-rc__flip:hover{border-color:var(--ink)}
.sp-rc__flip:focus-visible{outline:2px solid var(--accent,#5b2bb8);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sp-rc__card,.sp-rc__card > *{transition:none}}

/* Card stack (card-stack.js; "~ title" lines in the Markdown): numbered cards
   stacked in one grid cell, the next two peeking out below the top one; the
   words on the cards behind stay hidden so only the top card reads */
.cs-stack{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:8px;align-items:baseline}
.cs-stack > .cs-cards{grid-column:1/-1}
.cs-stack > .cs-stack__cap{grid-column:1;grid-row:2}   /* the caption and the count share one line */
.cs-stack > .cs-stack__bar{grid-column:2;grid-row:2}
.cs-cards{list-style:none;margin:0;padding:0 0 14px;display:grid;counter-reset:card}   /* room for the two cards peeking below, then the caption close under them */
.content .cs-cards > li{grid-area:1/1;counter-increment:card;min-height:180px;padding:24px 28px;border-radius:12px;background:var(--bg);
  border:1px solid var(--hair);box-shadow:0 1px 3px rgb(0 0 0 / .05);display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  font-size:min(calc(22px * var(--type,1)),var(--fs-h2));line-height:1.3;letter-spacing:-.01em;color:var(--ink);list-style:none;
  transform-origin:50% 0;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .25s ease,color .2s ease;cursor:pointer}
.content .cs-cards > li::before{content:counter(card,decimal-leading-zero);font:400 var(--fs-cap)/1 var(--sans);letter-spacing:0;color:var(--body)}
/* a colour per card, taken from the garden itself (grass, sky, sunset gold,
   meadow, coral sky), lightened so the words stay easy to read; each keeps its
   colour as it moves through the stack. Black words are 11:1 or better on every
   one, the numbers 6:1 or better */
.content .cs-cards > li{border-color:rgb(0 0 0 / .06)}
.content .cs-cards > li::before{color:rgb(0 0 0 / .68)}
.content .cs-cards > li:nth-child(5n+1){background:#bfe68a}
.content .cs-cards > li:nth-child(5n+2){background:#cbe8f4}
.content .cs-cards > li:nth-child(5n+3){background:#f1d3a6}
.content .cs-cards > li:nth-child(5n+4){background:#d3dba0}
.content .cs-cards > li:nth-child(5n+5){background:#ecbd9f}
.cs-cards:focus-visible{outline:2px solid var(--accent,#5b2bb8);outline-offset:6px;border-radius:14px}
.cs-cards > li[data-pos="0"]{z-index:5}
.cs-cards > li[data-pos="1"]{z-index:4;transform:translateY(14px) scale(.96)}
.cs-cards > li[data-pos="2"]{z-index:3;transform:translateY(28px) scale(.92)}
.cs-cards > li[data-pos]:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]){z-index:1;transform:translateY(28px) scale(.92);opacity:0}
.content .cs-cards > li[data-pos]:not([data-pos="0"]),.content .cs-cards > li[data-pos]:not([data-pos="0"])::before{color:transparent;cursor:default}
.cs-cards > li.is-leaving{transform:translateX(-32px) rotate(-4deg);opacity:0}
.cs-stack__bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cs-stack__count{font-size:var(--fs-cap);color:var(--muted);font-variant-numeric:tabular-nums}
.content .cs-stack__cap{margin:0;font-size:var(--fs-cap);line-height:1.5;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.content .cs-cards > li{transition:none}}
/* edit mode: the stack lies flat so every card can be edited */
.is-copyediting .cs-cards{display:flex;flex-direction:column;gap:8px;padding:0}
/* (important: the stacked positions above are more specific, and editing must always win) */
.is-copyediting .content .cs-cards > li[data-pos]{transform:none !important;opacity:1 !important;color:var(--ink) !important;min-height:0;cursor:text}
.is-copyediting .content .cs-cards > li[data-pos]::before{color:var(--body) !important}
.is-copyediting .cs-stack__bar{display:none}

/* Stacked text (rows): a table read top to bottom, one short block per row */
.sp-rows{display:flex;flex-direction:column;gap:24px}
.sp-row{border-top:1px solid var(--hair);padding-top:16px}
.content .sp-row__name{margin:0 0 12px;font-size:calc(18px * var(--type,1));font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.content .sp-row__k{margin:0 0 2px;font-size:var(--fs-cap);line-height:1.4;color:var(--muted)}
.content .sp-row__v{margin:0 0 12px;line-height:1.6;color:var(--body)}
.content .sp-row__v:last-child{margin-bottom:0}

/* Lesson cards: numbered cards, three across (two on tablets, one on phones) */
.sp-lessons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sp-lesson{display:flex;flex-direction:column;gap:8px;padding:clamp(16px,2vw,24px);border-radius:8px;background:var(--panel);min-width:0}
.sp-lesson__n{font-size:clamp(28px,3vw,40px);line-height:1;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px}
.sp-lesson b{font-weight:500;color:var(--ink)}
.sp-lesson p{margin:0;color:var(--muted)}
@media (max-width:900px){.sp-lessons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sp-lessons{grid-template-columns:1fr}}
/* a bold lead-in reads as a title in the numbered beats */
.sp-beat p:has(> strong:first-child){color:var(--muted)}
.sp-beat p > strong:first-child{font-weight:500;color:var(--ink)}

/* a fact on its own dark band (cfg.statband): the number in its own column,
   the number at the same size as Hixy's 1.5M+ stat, the sentence beside it */
.content .sp-band--stat p{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,3vw,40px);align-items:center;justify-content:start}
.content .sp-band__stat{font-size:clamp(32px,3.4vw,48px);line-height:1;letter-spacing:-.03em;white-space:nowrap}   /* the same size as Hixy's 1.5M+ (.sp-bx__stat b) */

/* Complex's quote cards: white tiles with a black line */
.content [data-sp="culture-persists"] .cs-cards > li{background:var(--bg,#fff);border:1px solid var(--ink);
  font-size:min(clamp(18px,2vw,22px),var(--fs-h2));line-height:1.4;letter-spacing:-.01em}

/* Margin note (outside): the note in the page margin, the text full width */
.sp-marginwrap--out{display:block;position:relative}
.sp-marginwrap--out > .sp-margin-rail{position:absolute;top:0;bottom:0;left:calc(100% + 24px);width:var(--mo-w,180px)}
.sp-marginwrap--out.is-tight > .sp-margin-rail{position:static;width:auto;margin-top:24px}
.sp-marginwrap--out.is-tight .sp-margin{position:static}

/* the grey question box after numbered beats */
.sp-callout--box{border-left:0;border-radius:8px;padding:20px 24px}
.content .sp-callout--box p{margin:0;font-size:min(clamp(18px,2vw,22px),var(--fs-h2));line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.sp-beat p.sp-beat__own:has(> strong:first-child){color:var(--ink)}   /* a beat rewritten for one layout keeps the beats' black text */
.sp-beat--box{background:var(--panel);border-radius:8px;padding:20px 16px;margin-inline:-16px}   /* a beat set on the grey box (numbered cfg.boxed) */
.sp-beat__ico{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
.sp-beat--q p{color:var(--ink)}
/* "Icon beats": a drawn icon in each number's place, at the numbers' size, in their grey */
.sp-beat:not(.sp-beat--q) > .sp-beat__n > .sp-beat__ico{width:30px;height:30px;stroke:var(--muted);margin-top:-1px}
/* "Numbered beats, 03 called out": the boxed beat's number in ink, and its question on a line of its own at the callout's size */
.sp-beat--box .sp-beat__n{color:var(--ink)}
.sp-beat__q{display:block;margin-top:12px;font-size:min(clamp(18px,2vw,22px),var(--fs-h2));line-height:1.4;letter-spacing:-.01em;font-weight:500;color:var(--ink)}

/* Collector cards (collect): a trading-card take on a table's rows */
.sp-cc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch;min-width:0;max-width:100%}
.sp-cc__card{--frame:#f2c94c;--art:#e9f7c9;--ink2:#1b1b1b;position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;
  padding:10px 10px 8px;border-radius:14px;background:var(--frame);box-shadow:0 1px 0 rgb(0 0 0/.08),0 8px 20px -12px rgb(0 0 0/.35);overflow:hidden}
.sp-cc__card--1{--frame:#9fc7ef;--art:#e3f0fc}
.sp-cc__card--2{--frame:#f2a7c3;--art:#fde7ef}
.sp-cc__card > *{position:relative;z-index:1}
.sp-cc__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px}
.content .sp-cc__head h3{margin:0;font-size:var(--fs-body);font-weight:500;line-height:1.2;color:var(--ink2);letter-spacing:-.01em}
.sp-cc__art{position:relative}
.sp-cc__badge{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#111;color:#fff;font-size:11px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
.sp-cc__art{display:grid;place-items:center;aspect-ratio:4/3;border-radius:6px;border:3px solid rgb(255 255 255/.85);
  background:radial-gradient(circle at 50% 40%,#fff 0,var(--art) 60%);box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)}
.sp-cc__art svg{width:38%;height:auto;fill:none;stroke:#111;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.content .sp-cc__kind{margin:0;padding:3px 8px;border-radius:4px;background:rgb(255 255 255/.6);font-size:11px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);text-align:center}
.content .sp-cc__text{flex:1;margin:0;padding:10px;border-radius:6px;background:rgb(255 255 255/.9);font-size:var(--fs-cap);line-height:1.45;color:var(--ink2)}
.sp-cc__stats{margin:0;padding:8px 10px;list-style:none;display:flex;flex-direction:column;gap:6px;border-radius:6px;background:rgb(255 255 255/.9)}
.content .sp-cc__stats li{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink2)}
.sp-cc__pips{display:flex;gap:3px}
.sp-cc__pips i{width:10px;height:10px;border-radius:50%;border:1px solid #111;background:transparent}
.sp-cc__pips i.on{background:#111}
.sp-cc__foot{display:flex;justify-content:space-between;gap:8px;padding:0 4px;font-size:10px;letter-spacing:.04em;color:rgb(0 0 0/.6)}
/* the chosen card: a foil sheen across the frame */
.sp-cc__card.is-pick::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgb(255 255 255/.55) 35%,rgb(180 255 240/.35) 42%,rgb(255 200 250/.35) 50%,transparent 62%);
  background-size:250% 100%;animation:sp-foil 5s ease-in-out infinite}
@keyframes sp-foil{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.sp-cc__card.is-pick::before{animation:none;background-position:50% 0}}
@media (max-width:760px){.sp-cc{grid-template-columns:repeat(3,220px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.sp-cc__card{scroll-snap-align:start}}
.content,.sp,.sp__pane{min-width:0}   /* a sideways scroller inside a layout scrolls; it never widens the page */
.sp-beat[hidden]{display:none}   /* a beat a layout leaves out (numbered cfg.order) */

/* Complex, Three directions: each row carries its audience's icon (the same as the For everyone /
   style geek / collector tiles), in the table and in the stacked rows */
[data-sp="directions"] tbody th::before,[data-sp="directions"] .sp-row__name::before{content:"";display:block;width:24px;height:24px;margin-bottom:8px;background:center/contain no-repeat}
[data-sp="directions"] tbody tr:nth-child(1) th::before,[data-sp="directions"] .sp-row:nth-child(1) .sp-row__name::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='3'/%3E%3Cpath d='M6.5 19.5a5.5 5.5 0 0 1 11 0'/%3E%3Ccircle cx='5' cy='10' r='2'/%3E%3Cpath d='M1.5 18a3.5 3.5 0 0 1 4.6-3.3'/%3E%3Ccircle cx='19' cy='10' r='2'/%3E%3Cpath d='M22.5 18a3.5 3.5 0 0 0-4.6-3.3'/%3E%3C/svg%3E")}
[data-sp="directions"] tbody tr:nth-child(2) th::before,[data-sp="directions"] .sp-row:nth-child(2) .sp-row__name::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5.5a2 2 0 1 1 2 2v1.6'/%3E%3Cpath d='M12 9.1 2.9 15.6a.9.9 0 0 0 .5 1.6h17.2a.9.9 0 0 0 .5-1.6Z'/%3E%3C/svg%3E")}
[data-sp="directions"] tbody tr:nth-child(3) th::before,[data-sp="directions"] .sp-row:nth-child(3) .sp-row__name::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17.5V10l3.5-.8 2.2 1.8 3.3-2.6 3.3 3.1c3.4.3 6.7 1.5 6.7 4.2v1.8Z'/%3E%3Cpath d='M2.5 15h19'/%3E%3Cpath d='M10 11.3l1.2 1.1M12 10.2l1.2 1.1'/%3E%3C/svg%3E")}

/* Complex, Three directions: the For everyone / style geek / collector list set as tiles,
   in every layout of the section, with the same icons as the rows above (styling only,
   so the list stays an ordinary, editable list) */
.content [data-sp="directions"] ul:not([class]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;margin:0}
.content [data-sp="directions"] ul:not([class]) > li{list-style:none;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:8px;background:var(--panel);color:var(--body);min-width:0}
.content [data-sp="directions"] ul:not([class]) > li::before{content:"";width:24px;height:24px;background:center/contain no-repeat}
.content [data-sp="directions"] ul:not([class]) > li strong{display:block;font-weight:500;color:var(--ink)}
@media (max-width:640px){.content [data-sp="directions"] ul:not([class]){grid-template-columns:1fr}}
.content [data-sp="directions"] ul:not([class]) > li:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='3'/%3E%3Cpath d='M6.5 19.5a5.5 5.5 0 0 1 11 0'/%3E%3Ccircle cx='5' cy='10' r='2'/%3E%3Cpath d='M1.5 18a3.5 3.5 0 0 1 4.6-3.3'/%3E%3Ccircle cx='19' cy='10' r='2'/%3E%3Cpath d='M22.5 18a3.5 3.5 0 0 0-4.6-3.3'/%3E%3C/svg%3E")}
.content [data-sp="directions"] ul:not([class]) > li:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5.5a2 2 0 1 1 2 2v1.6'/%3E%3Cpath d='M12 9.1 2.9 15.6a.9.9 0 0 0 .5 1.6h17.2a.9.9 0 0 0 .5-1.6Z'/%3E%3C/svg%3E")}
.content [data-sp="directions"] ul:not([class]) > li:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17.5V10l3.5-.8 2.2 1.8 3.3-2.6 3.3 3.1c3.4.3 6.7 1.5 6.7 4.2v1.8Z'/%3E%3Cpath d='M2.5 15h19'/%3E%3Cpath d='M10 11.3l1.2 1.1M12 10.2l1.2 1.1'/%3E%3C/svg%3E")}
.sp-vs:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}   /* before / after + a stat card */
.sp-vs__card--stat{background:var(--ink);color:#fff}
.sp-vs__card b.sp-vs__num{font-size:clamp(32px,3.4vw,48px);line-height:1;font-weight:400;letter-spacing:-.03em}   /* as Hixy's 1.5M+ */
/* the quote cards name who said it, in place of 01 / 02 */
.content [data-sp="culture-persists"] .cs-cards > li:nth-child(1)::before{content:"J.Hi, streetwear fan"}
.content [data-sp="culture-persists"] .cs-cards > li:nth-child(2)::before{content:"D.Huey, streetwear designer"}
.content [data-sp="culture-persists"] .cs-cards > li:nth-child(3)::before{content:"Complex Discord member"}
/* Complex, Brand loyalty is dead: the three cards step from white to grey to black */
[data-sp="culture-persists"] .sp-vs__card--before{background:#fff;border:1px solid #d9d9dc;color:var(--ink)}
[data-sp="culture-persists"] .sp-vs__card--after{background:#5e5e61;color:#fff}   /* white on this grey: 6.5:1 (WCAG AA) */
[data-sp="culture-persists"] .sp-vs__card--after .sp-vs__k{opacity:.85}   /* the small label stays above 4.5:1 too (5.2:1) */
[data-sp="culture-persists"] .sp-vs__card--stat{background:#111;color:#fff}