/* ==========================================================================
   So'rah case study — Step 01 · The context (secondary research)
   Builds on sorah.css. Content: case presentation opener (J0BO…/0:3186…) +
   the two desk-research documents (E6J9…/819:532 and 887:8278), rebuilt live
   in the green look (the source boards are old blue brand and never shown).
   ========================================================================== */

/* ---------- hero: the research-file cover as a tilted card ---------- */
.cx-cover { max-width: 820px; }
.cx-cover__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #E6F7D6; box-shadow: 0 50px 90px -42px rgba(7,30,4,.5), 0 0 0 1px rgba(11,73,7,.06); transform: rotate(2.2deg); transition: transform .9s var(--ease); }
.cx-cover:hover .cx-cover__frame { transform: rotate(0) scale(1.01); }
.ch-hero__media.cx-cover img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.cx-cover__ptr { position: absolute; left: -3%; top: -9%; z-index: 2; }
.cx-cover__ptr .ptr { position: relative; }
.cx-cover__cap { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); padding-inline: .3em; font: 500 var(--t-micro)/1.3 var(--font); color: var(--fg-soft); }
.ch-hero__chips .chip { background: rgba(255,255,255,.55); }
@media (max-width: 900px) { .cx-cover { max-width: 560px; } .cx-cover__ptr { top: -14%; left: 0; } }

/* ---------- shared bits ---------- */
.cx-doctag { min-height: clamp(34px, calc(48 * var(--fx)), 48px); margin-bottom: var(--s-4); }
.cx-doctag .ptr { position: relative; }
.cx-gap { margin-top: 1.15em !important; }
.cx-cite { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(21,158,23,.55); transition: text-decoration-color .25s; }
.th-night .cx-cite, .th-forest .cx-cite { text-decoration-color: rgba(187,239,84,.6); }
.cx-cite sup { display: inline-block; margin-left: .18em; padding: .2em .38em; border-radius: 6px; background: var(--s-lime-2); color: var(--s-forest); font: 600 .62em/1 var(--font-mono); vertical-align: .55em; transition: background .25s, color .25s, transform .3s var(--ease-back); }
.cx-cite:hover sup, .cx-cite:focus-visible sup, .cx-cite.is-cited-link sup { background: var(--s-green); color: #fff; transform: scale(1.15); }
[data-cites] { border-radius: 10px; transition: background-color .35s, box-shadow .35s; }
.is-cited { background-color: rgba(187,239,84,.3) !important; box-shadow: 0 0 0 8px rgba(187,239,84,.3); }
.is-flash { animation: cx-flash 2s var(--ease); }
@keyframes cx-flash { 0%, 45% { background-color: rgba(187,239,84,.38); box-shadow: 0 0 0 10px rgba(141,219,29,.42); } 100% { background-color: transparent; box-shadow: 0 0 0 10px rgba(141,219,29,0); } }

/* tooltip (charts) */
.cx-tip { position: fixed; left: 0; top: 0; z-index: 125; max-width: 300px; padding: .6em .85em; border-radius: 10px; background: var(--s-night); color: #fff; font: 500 13px/1.35 var(--font); box-shadow: 0 16px 30px -12px rgba(7,30,4,.6), inset 0 0 0 1px rgba(255,255,255,.12); pointer-events: none; opacity: 0; transition: opacity .15s; }
.cx-tip.is-on { opacity: 1; }

/* chart frame */
.cx-chart { margin-block: var(--s-5); }
.cx-chart__hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.cx-chart__t { font: 600 var(--t-small)/1.3 var(--font); color: var(--fg); }
.cx-chart__s { margin-top: .25em; font-size: var(--t-micro); color: var(--fg-soft); }
.cx-chart__src { margin-top: var(--s-3); font-size: var(--t-micro); color: var(--fg-soft); }

/* "chart in the original document" note */
.cx-docnote { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; margin-block: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: 16px; background: var(--tile); font-size: var(--t-small); line-height: 1.5; color: var(--fg-soft); }
.cx-docnote b { color: var(--fg); font-weight: 600; }
.cx-docnote__ic { width: 26px; margin-top: .15em; color: var(--accent); }
.cx-docnote__k { margin-bottom: .45em; font: 600 var(--t-micro)/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }

/* single-series horizontal bars (labels above, value at the tip) */
.cx-bars { padding: var(--s-4); border-radius: var(--r-card); background: var(--tile); }
.cx-bars__list { display: grid; gap: var(--s-3); }
.cx-bar { display: grid; gap: .4em; border-radius: 8px; outline-offset: 5px; transition: opacity .3s; }
.cx-bars__list:hover .cx-bar:not(:hover) { opacity: .42; }
.cx-bar__l { font-size: var(--t-small); line-height: 1.35; color: var(--fg); }
.cx-bar__track { display: flex; align-items: center; height: clamp(16px, calc(22 * var(--fx)), 22px); }
.cx-bar__fill { display: block; flex: none; height: 100%; width: calc(var(--v) * 1%); background: var(--s-green); border-radius: 0 4px 4px 0; transform-origin: 0 50%; transition: transform 1.25s var(--ease) calc(var(--i, 0) * 90ms + 120ms); }
.cx-bar__v { flex: none; margin-left: .6em; font: 600 var(--t-small)/1 var(--font); color: var(--fg); font-variant-numeric: tabular-nums; transition: opacity .5s calc(var(--i, 0) * 90ms + 650ms); }
.js .cx-bar__fill { transform: scaleX(0); }
.js .cx-bar__v { opacity: 0; }
.cx-bars.is-in .cx-bar__fill { transform: none; }
.cx-bars.is-in .cx-bar__v { opacity: 1; }
.cx-bars--mini { padding: 0; background: none; margin: 0; }
.cx-bars--mini .cx-bars__list { gap: var(--s-2); margin-top: .6em; }

/* rings: every figure on its own 0–100% ring */
.cx-ring { position: relative; display: grid; justify-items: center; align-content: start; gap: .75em; text-align: center; border-radius: 14px; outline-offset: 6px; }
.cx-ring__dial { position: relative; width: 100%; max-width: 150px; }
.cx-ring--lg .cx-ring__dial { max-width: 188px; }
.cx-ring--sm .cx-ring__dial { max-width: 132px; }
.cx-ring svg { width: 100%; height: auto; transform: rotate(-90deg); overflow: visible; }
.cx-ring__trk { fill: none; stroke: var(--ring-trk, rgba(255,255,255,.12)); stroke-width: 9; }
.cx-ring__val { fill: none; stroke: var(--ring, var(--s-lime)); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--v)); transition: stroke-dashoffset 1.8s var(--ease) .15s, opacity .3s .15s; }
.js .cx-ring__val { stroke-dashoffset: 100; opacity: 0; }
.js .cx-ring.is-in .cx-ring__val { stroke-dashoffset: calc(100 - var(--v)); opacity: 1; }
.cx-ring__v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 clamp(17px, calc(30 * var(--fx)), 30px)/1 var(--font); letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.cx-ring--lg .cx-ring__v { font-size: clamp(20px, calc(40 * var(--fx)), 40px); }
.cx-ring figcaption { max-width: 22ch; font-size: var(--t-micro); line-height: 1.4; color: var(--fg-soft); }
.cx-ring figcaption b { color: var(--fg); font-weight: 600; }
.cx-ring:hover .cx-ring__dial, .cx-ring:focus-visible .cx-ring__dial { transform: scale(1.04); }
.cx-ring__dial { transition: transform .5s var(--ease-back); }

/* ---------- 01 · the problem (case presentation opener) ---------- */
.cx-problem { padding-bottom: 0; }
.cx-problem__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, .85fr); grid-template-areas: "txt phone"; gap: var(--s-5); align-items: end; }
.cx-problem__txt { grid-area: txt; padding-bottom: var(--s-8); }
.cx-problem__chips { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); }
.cx-pill { padding: .5em 1.5em; font-size: clamp(18px, calc(36 * var(--fx)), 36px); }
.cx-pill-img { height: clamp(44px, calc(92 * var(--fx)), 92px); width: auto; border-radius: 999px; }
.cx-statement { position: relative; z-index: 2; max-width: 24ch; font: 300 clamp(30px, calc(80 * var(--fx)), 80px)/1.12 var(--font); letter-spacing: -.03em; }
.cx-statement.story .w { color: var(--s-grey); }
.cx-statement b, .cx-statement.story b .w { font-weight: 700; color: var(--s-ink); }
.cx-problem__stats { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); margin-top: var(--s-6); }
.cx-pstat__v { font: 700 clamp(58px, calc(140 * var(--fx)), 140px)/.9 var(--font); letter-spacing: -.045em; color: var(--s-green); }
.cx-pstat__l { margin-top: .35em; max-width: 13ch; font: 400 var(--t-h4)/1.25 var(--font); }
.cx-pstat__l b { font-weight: 700; }
.cx-problem__note { margin-top: var(--s-5); max-width: 46ch; color: var(--fg-soft); }
.cx-problem__note a { color: var(--s-forest); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(21,158,23,.5); text-underline-offset: 3px; }
.cx-problem__phone { grid-area: phone; justify-self: end; width: min(122%, 640px); margin-left: -22%; margin-right: calc(var(--gutter) * -.35); }
.cx-problem__phone img { width: 100%; height: auto; transform-origin: 70% 100%; }
@media (max-width: 900px) {
  .cx-problem__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "phone"; }
  .cx-problem__txt { padding-bottom: 0; }
  .cx-statement { margin-right: 0; width: auto; }
  .cx-problem__phone { justify-self: center; width: min(78%, 420px); margin: var(--s-4) 0 0; }
}

/* ---------- 02 · the market: research notebook ---------- */
.cx-market { padding-bottom: var(--s-8); }
.cx-market__glow i { position: absolute; z-index: -1; border-radius: 50%; filter: blur(clamp(60px, 8vw, 130px)); opacity: .32; pointer-events: none; }
.cx-market__glow i:nth-child(1) { width: 52vw; aspect-ratio: 1; left: -16%; top: -8%; background: #2FBF2A; }
.cx-market__glow i:nth-child(2) { width: 42vw; aspect-ratio: 1; right: -12%; top: 45%; background: #158A1A; }
.cx-market .hd__title { max-width: 16ch; }
.cx-overview { max-width: 42ch; margin-bottom: var(--s-7); font: 300 var(--t-h3)/1.38 var(--font); letter-spacing: -.012em; }
.cx-overview b { font-weight: 600; }
.cx-overview__k { display: block; margin-bottom: .8em; font: 600 var(--t-micro)/1 var(--font) !important; letter-spacing: .14em; text-transform: uppercase; }
.cx-overview__k .w { color: var(--s-lime) !important; }

.cx-nb { display: grid; gap: var(--s-8); }
.cx-nb__step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-4) var(--s-7); align-items: stretch; scroll-margin-top: var(--bar-h); }
.cx-nb__vis { position: relative; }
.cx-page { position: sticky; top: calc(var(--bar-h) + var(--s-3)); padding: var(--s-5); border-radius: var(--r-card); background-color: #fff; background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(11,73,7,.055) 33px 34px); color: var(--s-ink); box-shadow: 0 50px 90px -50px rgba(0,0,0,.75); --ring: var(--s-green); --ring-trk: #E3F5DF; }
.js .cx-page[data-reveal] { transform: translateY(70px) rotate(calc(var(--rot, 0deg) * 4)); transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.js .cx-page[data-reveal].is-in { transform: rotate(var(--rot, 0deg)); }
.cx-page__hd { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.cx-page__no { font: 500 var(--t-micro)/1 var(--font-mono); color: var(--s-green); white-space: nowrap; }
.cx-page__ttl { font: 600 var(--t-small)/1.2 var(--font); }
.cx-page__tabs { display: flex; gap: 5px; margin-left: auto; }
.cx-page__tab { display: block; width: 20px; padding: 9px 0; background: rgba(24,24,24,.16); background-clip: content-box; border-radius: 6px; height: 24px; transition: background-color .3s, width .35s var(--ease); }
.cx-page__tab:hover { background-color: rgba(24,24,24,.45); }
.cx-page__tab.is-cur { width: 34px; background-color: var(--s-green); }
.cx-page__body > * + * { margin-top: var(--s-4); }
.cx-page__lbl { margin-top: .5em !important; max-width: 36ch; font-size: var(--t-small); line-height: 1.42; }
.cx-page__lbl b { font-weight: 600; }
.cx-page__foot { font-size: var(--t-micro); color: var(--fg-soft); }
.cx-page__row { padding-top: var(--s-2); }
.cx-page__row .cx-mid { font-size: clamp(28px, calc(56 * var(--fx)), 56px); }
.cx-page__stack > * + * { margin-top: var(--s-5); }
.cx-big { font: 700 clamp(64px, calc(168 * var(--fx)), 168px)/.88 var(--font); letter-spacing: -.05em; color: var(--s-green); }
.cx-mid { font: 700 clamp(34px, calc(70 * var(--fx)), 70px)/1 var(--font); letter-spacing: -.035em; color: var(--s-green); }
.cx-mid small { font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--s-ink); }
.cx-quarter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-3); border-radius: 16px; background: var(--s-mint); font-size: var(--t-small); line-height: 1.4; }
.cx-quarter svg { width: clamp(38px, calc(54 * var(--fx)), 54px); }
.cx-quarter .q-trk { fill: none; stroke: rgba(21,158,23,.3); stroke-width: 3; }
.cx-quarter .q-val { fill: var(--s-green); }
.cx-quarter b { font-weight: 600; }
.cx-vision { font: 300 clamp(48px, calc(118 * var(--fx)), 118px)/.92 var(--font); letter-spacing: -.045em; }
.cx-vision b { font-weight: 700; color: var(--s-green); }
.cx-vision__q { margin: 0; font: 400 var(--t-lead)/1.38 var(--font); color: var(--fg-soft); }
.cx-vision__q b { color: var(--fg); font-weight: 600; }

.cx-nb__txt { padding-top: var(--s-2); font-size: var(--t-body); line-height: 1.6; }
.cx-nb__txt p { color: var(--fg-soft); }
.cx-nb__txt p + p { margin-top: .4em; }
.cx-nb__txt b { color: #fff; font-weight: 600; }
.cx-nb__h { margin-bottom: var(--s-3); font: 600 var(--t-h3)/1.15 var(--font); color: #fff; }
.cx-nb__wide { position: relative; z-index: 1; grid-column: 1 / -1; }
.cx-nb__txt .cx-docnote { background: rgba(255,255,255,.07); }
.cx-nb__txt .cx-docnote b { color: #fff; }

.cx-rings { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.cx-rings__row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--s-3); align-items: start; }
.cx-rings__note { font-size: var(--t-micro); color: var(--fg-soft); }
.cx-rings--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }

/* (B) comparison to obesity: small multiples of stacked bars on a paper card */
.cx-cmp { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-card); }
.cx-legend { display: flex; flex-wrap: wrap; gap: .5em var(--s-3); font-size: var(--t-micro); color: var(--fg-soft); }
.cx-legend li { display: inline-flex; align-items: center; gap: .45em; }
.cx-legend i { width: 12px; height: 12px; border-radius: 3px; }
.sw-as { background: #1E8F2A; }
.sw-more { background: #7CC519; }
.cx-cmp__grid { display: grid; gap: 10px; }
.cx-cmp__row { display: grid; grid-template-columns: minmax(96px, .62fr) repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: center; }
.cx-cmp__row--hd { padding-bottom: 4px; }
.cx-cmp__row--hd span { font: 600 var(--t-micro)/1.3 var(--font); color: var(--fg-soft); }
.cx-cmp__c { font-size: var(--t-small); }
.cx-cmp__bar { position: relative; display: flex; height: 24px; outline-offset: 4px; border-radius: 4px; transition: opacity .3s; }
.cx-cmp__bar i { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: calc(var(--w) * 1%); }
.cx-cmp__bar b { font: 600 11px/1 var(--font); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-cmp__as { background: #1E8F2A; color: #fff; }
.cx-cmp__more { margin-left: 2px; background: #7CC519; color: var(--s-ink); border-radius: 0 4px 4px 0; }
.cx-cmp__more.is-out b { position: absolute; left: calc(100% + 5px); color: var(--fg); }
.cx-cmp__bar i.is-hide b { visibility: hidden; }
.js .cx-cmp__bar { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease) calc(var(--i, 0) * 70ms + 100ms), opacity .3s; }
.js .cx-cmp.is-in .cx-cmp__bar { clip-path: inset(-6px -60px -6px -6px); }
.cx-cmp__grid:hover .cx-cmp__row:not(:hover):not(.cx-cmp__row--hd) .cx-cmp__bar { opacity: .4; }

/* ---------- 03 · segments ---------- */
.cx-segs .hd__aside { max-width: 52ch; }
.cx-agenda__k { margin-bottom: var(--s-2); font: 600 var(--t-micro)/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); }
.cx-intro { max-width: 44ch; font: 300 var(--t-h3)/1.36 var(--font); letter-spacing: -.012em; }
.cx-segs__lead { margin-top: var(--s-5); max-width: 48ch; }
.cx-segcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--s-6); scroll-margin-top: calc(var(--bar-h) + 20px); }
.cx-segcard { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: space-between; gap: var(--s-6); min-height: clamp(300px, calc(470 * var(--fx)), 470px); padding: var(--s-5); border-radius: var(--r-card); background: var(--s-paper); transition: background-color .6s var(--ease), color .6s, transform .8s var(--ease); }
.cx-segcard__n { font: 700 clamp(64px, calc(150 * var(--fx)), 150px)/.82 var(--font); letter-spacing: -.055em; color: rgba(24,24,24,.12); transition: color .6s; }
.cx-segcard__t { max-width: 14ch; font: 500 var(--t-h3)/1.12 var(--font); letter-spacing: -.015em; }
.cx-segcard__go { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.cx-segcard__go a { padding: .5em .85em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font: 600 var(--t-micro)/1 var(--font); transition: box-shadow .25s, background .25s; }
.cx-segcard__go a:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.cx-segcard__bar { position: absolute; inset: auto 0 0 0; height: 6px; background: var(--grad-brand); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease); }
.cx-segcard.is-on { background: var(--s-mint); }
.cx-segcard.is-on .cx-segcard__n { color: var(--s-green); }
.cx-segcard.is-on .cx-segcard__bar { transform: none; }
.cx-segcard.is-cur { background: var(--s-green); color: #fff; transform: translateY(-10px); }
.cx-segcard.is-cur .cx-segcard__n { color: var(--s-lime-2); }
.cx-segcard.is-cur .cx-segcard__go a { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.cx-segcard.is-cur .cx-segcard__go a:hover { background: #fff; color: var(--s-forest); }
@media (max-width: 900px) { .cx-segcards { grid-template-columns: minmax(0, 1fr); } .cx-segcard { min-height: 0; gap: var(--s-4); } .cx-segcard.is-cur { transform: none; } }

/* ---------- 04/05 · lens sections (motivations, challenges) with a sticky segment key ---------- */
.cx-lens__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
.cx-lens__aside { align-self: stretch; }
.cx-lens__stick { position: sticky; top: calc(var(--bar-h) + var(--s-4)); }
.cx-lens__lead { margin-top: var(--s-3); max-width: 30ch; }
.cx-key { display: grid; gap: 10px; margin-top: var(--s-5); max-width: 340px; }
.cx-key__i { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9em; padding: .85em 1.1em; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); font: 600 var(--t-small)/1.2 var(--font); transition: background .35s, color .35s, box-shadow .35s, transform .5s var(--ease); }
.cx-key__i b { font: 500 var(--t-micro)/1 var(--font-mono); color: var(--s-green); }
.cx-key__i:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.cx-key__i.is-on { background: var(--s-night); color: #fff; box-shadow: none; transform: translateX(10px); }
.cx-key__i.is-on b { color: var(--s-lime); }
.cx-seg { scroll-margin-top: calc(var(--bar-h) + 16px); }
.cx-seg + .cx-seg { margin-top: var(--s-7); }
.cx-seg__h { display: flex; align-items: center; gap: .65em; margin-bottom: var(--s-4); font: 600 var(--t-h3)/1.15 var(--font); letter-spacing: -.012em; }
.cx-seg__n { display: inline-grid; place-items: center; flex: none; min-width: 2.6em; padding: .45em .65em; border-radius: 999px; background: var(--s-lime-2); color: var(--s-forest); font: 600 var(--t-micro)/1 var(--font-mono); letter-spacing: 0; }
.cx-seg p, .cx-claim p { color: var(--fg-soft); }
.cx-seg p b { color: var(--fg); font-weight: 600; }
.cx-seg p + p { margin-top: .45em; }
.cx-claim { margin-top: var(--s-5); }
.cx-sub { margin-bottom: var(--s-2); font: 600 var(--t-h4)/1.25 var(--font); letter-spacing: -.008em; }
.cx-sub .cx-cite sup { font-size: .5em; }
@media (max-width: 900px) {
  .cx-lens__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .cx-lens__stick { position: static; }
  .cx-key { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .cx-key__i { grid-template-columns: 1fr; gap: .4em; padding: .75em .8em; font-size: 13px; }
  .cx-key__i.is-on { transform: none; }
}

/* dietary-habits table (live, with row-percentage bars) */
.cx-diet { padding: var(--s-4); border-radius: var(--r-card); background: var(--tile); }
.th-paper .cx-diet, .th-paper .cx-bars { background: #fff; }
.cx-lens__body, .cx-seg, .cx-chart, .cx-nb__txt, .cx-nb__vis { min-width: 0; }
.cx-diet__scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 10px; }
.cx-diet__t { width: 100%; min-width: 540px; border-collapse: collapse; font-size: var(--t-micro); font-variant-numeric: tabular-nums; }
.cx-diet__t th, .cx-diet__t td { padding: .42em .55em; text-align: left; vertical-align: middle; font-weight: 400; transition: opacity .3s, background .25s; }
.cx-diet__t thead th { font-weight: 600; color: var(--fg-soft); }
.cx-diet__t thead th small { font-weight: 400; }
.cx-diet__gh th { padding-top: 1.1em !important; font-weight: 600 !important; color: var(--fg); }
.cx-diet__t tbody th[scope="row"] { color: var(--fg-soft); }
.cx-diet__t td[data-col] { width: 21%; }
.cx-diet__v small { color: var(--fg-soft); font-size: 1em; }
.cx-diet__bar { display: block; height: 5px; margin-top: 4px; width: calc(var(--w) / 40 * 100%); border-radius: 0 3px 3px 0; background: var(--s-green); transform-origin: 0 50%; transition: transform 1.1s var(--ease) .2s; }
.js .cx-diet__bar { transform: scaleX(0); }
.js .cx-diet.is-in .cx-diet__bar { transform: none; }
.cx-diet__p { text-align: right !important; color: var(--fg-soft); white-space: nowrap; }
.cx-diet__gh .cx-diet__p { color: var(--fg); font-weight: 600; }
.cx-diet__t tbody tr:not(.cx-diet__gh):hover > * { background: rgba(141,219,29,.16); }
.cx-diet[data-focus="normal"] [data-col]:not([data-col="normal"]),
.cx-diet[data-focus="over"] [data-col]:not([data-col="over"]),
.cx-diet[data-focus="obese"] [data-col]:not([data-col="obese"]) { opacity: .3; }
.cx-diet .seg button { font-size: var(--t-micro); }

/* ---------- 06 · past strategies ---------- */
.cx-past__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cx-past__card { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-card); background: var(--tile); scroll-margin-top: calc(var(--bar-h) + 16px); }
.cx-past__card .cx-seg__n { justify-self: start; }
.cx-past__card p { color: var(--fg-soft); }
.cx-past__card p + p { margin-top: .2em; }
@media (max-width: 900px) { .cx-past__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 07 · opportunity ---------- */
.cx-opp__glow { position: absolute; z-index: -1; width: 70vw; aspect-ratio: 1; right: -20%; top: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(141,219,29,.35), transparent); pointer-events: none; }
.cx-opp .hd__title { max-width: none; }
.cx-opp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cx-opp__col { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-card); background: var(--tile); scroll-margin-top: calc(var(--bar-h) + 16px); }
.cx-opp__col .cx-seg__n { justify-self: start; }
.cx-checks { gap: var(--s-3); margin-top: var(--s-2); }
.cx-checks li { align-items: start; font-size: var(--t-small); line-height: 1.45; }
.cx-checks li::before { width: clamp(26px, calc(38 * var(--fx)), 38px); border-radius: 9px; transition: transform .7s var(--ease-back) calc(var(--d, 0) * 1ms + 250ms), opacity .3s calc(var(--d, 0) * 1ms + 250ms); }
.js .cx-checks li::before { transform: scale(.3) rotate(-20deg); opacity: 0; }
.js .cx-checks li.is-in::before { transform: none; opacity: 1; }
.cx-ins { margin-top: var(--s-7); }
.cx-ins__hd { display: grid; justify-items: start; gap: var(--s-3); margin-bottom: var(--s-5); }
.cx-ins__hd .ptr { position: relative; }
.cx-ins__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cx-ins__i { display: grid; align-content: start; gap: .55em; padding: var(--s-4); border-radius: var(--r-card); background: rgba(255,255,255,.08); }
.cx-ins__n { font: 500 var(--t-micro)/1 var(--font-mono); color: var(--s-lime); }
.cx-ins__i h4 { font: 600 var(--t-h4)/1.2 var(--font); color: #fff; }
.cx-ins__i p { font-size: var(--t-small); color: var(--fg-soft); }
.cx-opp__next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); font: 300 var(--t-h4)/1.35 var(--font); color: #fff; }
.cx-opp__next .btn svg { width: 1.1em; }
@media (max-width: 1100px) { .cx-ins__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cx-opp__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .cx-ins__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 08 · sources ---------- */
.cx-src__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
.cx-src__h { display: grid; gap: .35em; margin-bottom: var(--s-3); font: 600 var(--t-h4)/1.2 var(--font); }
.cx-src__h span { font: 600 var(--t-micro)/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--s-green); }
.cx-src__h--sm { margin-top: var(--s-5); font-size: var(--t-small); }
.cx-src__list { display: grid; gap: 4px; }
.cx-src__i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); align-items: start; padding: .7em .85em; border-radius: 14px; scroll-margin-top: calc(var(--bar-h) + 20px); transition: background .3s; }
.cx-src__i:hover, .cx-src__i:focus-within, .cx-src__i.is-hot { background: #fff; }
.cx-src__n { display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: #E7E7E7; font: 600 var(--t-micro)/1 var(--font-mono); }
.cx-src__i[data-used] .cx-src__n { background: var(--s-lime-2); color: var(--s-forest); }
.cx-src__b { min-width: 0; padding-top: .2em; }
.cx-src__a { font-size: var(--t-small); line-height: 1.4; overflow-wrap: anywhere; }
.cx-src__a b { font-weight: 600; }
.cx-src__a span { margin-left: .35em; color: var(--fg-soft); }
.cx-src__a svg { display: inline-block; width: .85em; height: .85em; margin-left: .3em; vertical-align: -.05em; color: var(--s-green); }
.cx-src__a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cx-src__use { margin-top: .4em; font-size: var(--t-micro); line-height: 1.5; color: var(--fg-soft); }
.cx-src__use span { margin-right: .4em; }
.cx-src__use a { display: inline-block; margin-right: .8em; color: var(--s-forest); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(21,158,23,.45); text-underline-offset: 3px; }
.cx-src__use a:hover { text-decoration-color: var(--s-green); }
.cx-src__key { display: inline-block; padding: .05em .5em; border-radius: 999px; background: var(--s-lime-2); color: var(--s-forest); font-weight: 600; }
.cx-src__also { margin-top: var(--s-3); font-size: var(--t-micro); color: var(--fg-soft); }
@media (max-width: 900px) { .cx-src__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .cx-nb { gap: var(--s-7); }
  .cx-nb__step { grid-template-columns: minmax(0, 1fr); }
  .cx-page { position: relative; top: auto; padding: var(--s-4); }
  .cx-rings__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .cx-cmp { padding: var(--s-4); }
  .cx-cmp__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 6px; }
  .cx-cmp__row--hd { display: none; }
  .cx-cmp__c { font-weight: 600; }
  .cx-cmp__cell { display: grid; grid-template-columns: minmax(84px, .5fr) minmax(0, 1fr); align-items: center; gap: var(--s-2); }
  .cx-cmp__cell::before { content: attr(data-g); font-size: 11px; line-height: 1.25; color: var(--fg-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .js .cx-bar__fill, .js .cx-diet__bar { transform: none !important; }
  .js .cx-bar__v { opacity: 1 !important; }
  .js .cx-cmp__bar { clip-path: none !important; }
  .js .cx-ring__val { stroke-dashoffset: calc(100 - var(--v)) !important; opacity: 1 !important; }
  .js .cx-checks li::before { transform: none !important; opacity: 1 !important; }
  .js .cx-page[data-reveal] { transform: none !important; }
}