/* ============================================================================
   learn.css — Capstaq Learning (resources.html only)

   This page is deliberately NOT the cockpit. Adam's note: "This should be a
   totally different looking page. This should have nothing to do with anything
   but educational stuff."

   So the register flips. The cockpit is dense, cool-grey, Inter-only, boxed and
   photographic. This is the brand's other half, which the site has never used:
   warm paper ground, Playfair Display as the display voice (the brand guide's
   actual instruction, unused everywhere else), a reading rhythm instead of a
   dashboard grid, and no hero photography at all. A library, not a terminal.

   It still loads cockpit.css for the masthead, footer and buttons so the page
   is unmistakably Capstaq. Everything below the header is overridden here under
   `body.cockpit.learn`, so nothing in cockpit.css needed to change.
   ========================================================================== */

body.cockpit.learn{
  /* paper ramp, straight from tokens.css */
  --p-bg:#F7F5F0;
  --p-card:#FFFFFF;
  --p-card-2:#FCFAF6;
  --p-ink:#0C1B2E;
  --p-body:#2E3F52;
  --p-mut:#5A6B7D;
  --p-meta:#77808C;
  --p-rule:#E3DED4;
  --p-rule-soft:#EFEBE3;
  --p-gold:#C08A3E;
  --p-gold-ink:#7E5A1D;      /* the site paper gold (was #8A6321) */
  --p-navy:#08152A;

  --f-display:"Playfair Display","Iowan Old Style",Georgia,"Times New Roman",serif;

  background:var(--p-bg);
  color:var(--p-body);
}

/* A faint warm wash so the paper is not flat. Fixed so it does not band while
   the glossary scrolls. */
body.cockpit.learn::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(201,151,79,.10), transparent 62%),
    radial-gradient(760px 460px at 92% 4%, rgba(12,27,46,.05), transparent 60%);
}
/* Lift the content above the wash WITHOUT touching the header: a blanket
   `position:relative` on every child overrode .ck-hd's `position:sticky` and
   silently unpinned the masthead on this page. Name the two elements instead. */
body.cockpit.learn > main,
body.cockpit.learn > footer{position:relative;z-index:1}
body.cockpit.learn > .ck-hd{z-index:50}

.learn ::selection{background:rgba(201,151,79,.28)}

/* ---------------------------------------------------------------- layout -- */
.lw{max-width:1180px;margin:0 auto;padding:0 28px}
.lw--text{max-width:790px}

.learn-eyebrow{
  display:block;font:700 11px/1 var(--font-sans);letter-spacing:.19em;
  text-transform:uppercase;color:var(--p-gold-ink);margin:0 0 14px;
}
.learn-rule{height:2px;background:var(--p-gold);border:0;margin:0;width:56px}

/* ---------------------------------------------------------------- masthead */
.learn-mast{padding:64px 0 40px}
.learn-mast__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,352px);
  gap:56px;align-items:end;
}
.learn-mast h1{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(40px,5.6vw,68px);line-height:1.02;letter-spacing:-.02em;
  color:var(--p-ink);margin:0;
}
.learn-mast h1 em{font-style:italic;color:var(--p-gold-ink)}
.learn-mast__lede{
  font-size:17px;line-height:1.68;color:var(--p-body);margin:0 0 8px;
  border-left:2px solid var(--p-gold);padding-left:18px;
}
.learn-mast__note{font-size:13px;line-height:1.6;color:var(--p-mut);margin:14px 0 0}

/* --------------------------------------------------------------- chapters - */
.learn-chapters{padding:16px 0 8px}
.learn-chapters__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-top:1px solid var(--p-rule);padding-top:26px;flex-wrap:wrap;
}
.learn-chapters__head h2{
  font-family:var(--f-display);font-weight:500;font-size:clamp(26px,3.2vw,38px);
  line-height:1.1;letter-spacing:-.02em;color:var(--p-ink);margin:0;
}
.learn-chapters__head p{font-size:14px;color:var(--p-mut);margin:0;max-width:420px;line-height:1.6}

.chapter-rail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin:30px 0 0;border-top:1px solid var(--p-rule);
}
.chapter{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;border-right:1px solid var(--p-rule);
  text-align:left;cursor:pointer;font-family:inherit;color:inherit;
  padding:24px 22px 26px;min-height:200px;
  display:flex;flex-direction:column;
  transition:background .18s ease, box-shadow .18s ease;
}
.chapter:last-child{border-right:0}
.chapter:hover,.chapter:focus-visible{background:rgba(255,255,255,.72)}
.chapter[aria-pressed="true"]{
  background:var(--p-card);
  box-shadow:inset 0 3px 0 var(--p-gold), 0 10px 30px rgba(12,27,46,.07);
}
/* --p-gold is the chrome/rule gold and stays as it is for borders and shadows.
   As 34px text on the paper ground it measured 2.77:1, under even the 3:1
   large-text bar. Scoped here rather than changed at the token, because the
   token's other uses are 1px rules where the lighter value is correct. */
.chapter__n{
  font-family:var(--f-display);font-size:34px;line-height:1;font-weight:400;
  color:#96610a;margin:0 0 14px;font-variant-numeric:lining-nums;
}
.chapter__t{
  font-family:var(--f-display);font-weight:500;font-size:20px;line-height:1.2;
  letter-spacing:-.01em;color:var(--p-ink);margin:0 0 9px;
}
.chapter__d{font-size:13.5px;line-height:1.6;color:var(--p-mut);margin:0}
.chapter__go{
  margin-top:auto;padding-top:16px;
  font:700 11.5px/1 var(--font-sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--p-gold-ink);
}
.chapter[aria-pressed="true"] .chapter__go::after{content:" · showing"}

/* --------------------------------------------------------------- glossary - */
.learn-glossary{padding:52px 0 0}
.learn-glossary__head{border-top:1px solid var(--p-rule);padding-top:26px}
.learn-glossary__head h2{
  font-family:var(--f-display);font-weight:500;font-size:clamp(28px,3.4vw,42px);
  line-height:1.08;letter-spacing:-.02em;color:var(--p-ink);margin:0 0 12px;
}
.learn-glossary__head p{font-size:15.5px;line-height:1.68;color:var(--p-body);margin:0;max-width:640px}

/* Sticky control bar — search stays reachable through all 46 entries.
   It is bled out to the full width of .lw (negative margin + matching padding)
   so entries pass behind it instead of beside it. Sized off the container
   rather than 100vw, which would overflow whenever a scrollbar is present. */
.gl-bar{
  position:sticky;top:64px;z-index:20;
  margin:26px -28px 0;padding:16px 28px 14px;
  background:rgba(247,245,240,.96);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--p-rule);
}
.gl-search{position:relative;display:block}
.gl-search svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:var(--p-mut);pointer-events:none;
}
.gl-search input{
  width:100%;height:52px;padding:0 108px 0 46px;
  font:400 16px/1 var(--font-sans);color:var(--p-ink);
  background:var(--p-card);border:1px solid var(--p-rule);border-radius:6px;
  box-shadow:0 1px 2px rgba(12,27,46,.05);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.gl-search input::placeholder{color:var(--p-meta)}
.gl-search input:focus{
  outline:0;border-color:var(--p-gold);
  box-shadow:0 0 0 3px rgba(201,151,79,.22);
}
/* --p-meta on the kbd chip's own card-2 ground measured 3.84:1 at 11px. This
   is the only place the token is used as text; #666e7b is the same grey at
   4.94:1. */
.gl-search kbd{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font:600 11px/1 var(--font-mono);color:#666e7b;
  border:1px solid var(--p-rule);border-radius:4px;padding:5px 7px;background:var(--p-card-2);
}
.gl-clear{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  min-width:40px;min-height:40px;display:none;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--p-mut);border-radius:6px;
}
.gl-clear:hover{color:var(--p-ink);background:var(--p-rule-soft)}
.gl-search.is-filled kbd{display:none}
.gl-search.is-filled .gl-clear{display:grid}

.gl-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.gl-chip{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  min-height:40px;padding:0 15px;display:inline-flex;align-items:center;gap:7px;
  background:var(--p-card);color:var(--p-body);
  border:1px solid var(--p-rule);border-radius:999px;
  font:600 13px/1 var(--font-sans);
  transition:.16s ease;
}
.gl-chip:hover{border-color:var(--p-gold);color:var(--p-ink)}
.gl-chip[aria-pressed="true"]{
  background:var(--p-navy);border-color:var(--p-navy);color:#fff;
}
/* The count beside each glossary term. It used to be the chip's own colour at
   opacity .62, which is not a colour anyone chose: on an unpressed chip it
   blended #2E3F52 toward white and landed on #7d8894, 3.6:1 at 11px. An
   opacity modifier on text is a contrast value nobody can read off the
   stylesheet, and it fails silently the moment the ground changes. Two solid
   tokens instead, one per state. --p-mut is 5.4:1 on the card. */
.gl-chip__n{font:600 11px/1 var(--font-mono);color:var(--p-mut)}
.gl-chip[aria-pressed="true"] .gl-chip__n{color:#d5dbe4}
.gl-count{
  margin-left:auto;font:600 12.5px/1.4 var(--font-mono);color:var(--p-mut);
  letter-spacing:.02em;padding:4px 0;
}
.gl-count b{color:var(--p-ink)}

/* the entries */
.gl-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  margin:22px 0 0;padding:0;list-style:none;
}
.gl-item{
  background:var(--p-card);border:1px solid var(--p-rule);border-radius:8px;
  padding:20px 22px 18px;scroll-margin-top:150px;
}
.gl-item.is-hit{
  border-color:var(--p-gold);
  box-shadow:0 0 0 3px rgba(201,151,79,.20);
}
.gl-item[hidden]{display:none}
.gl-item__top{display:flex;align-items:baseline;gap:12px;margin:0 0 9px}
.gl-item__term{
  font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.2;
  letter-spacing:-.01em;color:var(--p-ink);margin:0;
}
.gl-item__cat{
  margin-left:auto;flex:none;
  font:600 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-gold-ink);
}
.gl-item__def{font-size:14.5px;line-height:1.66;color:var(--p-body);margin:0}
.gl-item__catch{
  margin:13px 0 0;padding:11px 0 0 14px;
  border-top:1px solid var(--p-rule-soft);border-left:2px solid var(--p-gold);
  font-size:13.5px;line-height:1.62;color:var(--p-mut);
}
.gl-item__catch b{
  display:block;
  font:700 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-gold-ink);margin:0 0 6px;
}
.gl-item mark{background:rgba(201,151,79,.32);color:inherit;border-radius:2px;padding:0 1px}

.gl-empty{
  display:none;margin:22px 0 0;padding:44px 28px;text-align:center;
  background:var(--p-card);border:1px dashed var(--p-rule);border-radius:8px;
}
.gl-empty.is-on{display:block}
.gl-empty h3{
  font-family:var(--f-display);font-weight:500;font-size:22px;color:var(--p-ink);margin:0 0 8px;
}
.gl-empty p{font-size:14px;line-height:1.6;color:var(--p-mut);margin:0 0 18px}

.gl-foot{
  margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--p-rule);
  font-size:13px;line-height:1.6;color:var(--p-mut);
}
.gl-foot a{color:var(--p-gold-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------------ asset class - */
.learn-assets{padding:56px 0 0}
.learn-assets__head{border-top:1px solid var(--p-rule);padding-top:26px;margin:0 0 26px}
.learn-assets__head h2{
  font-family:var(--f-display);font-weight:500;font-size:clamp(28px,3.4vw,42px);
  line-height:1.08;letter-spacing:-.02em;color:var(--p-ink);margin:0 0 12px;
}
.learn-assets__head p{font-size:15.5px;line-height:1.68;color:var(--p-body);margin:0;max-width:660px}

.asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.asset-card{
  display:flex;flex-direction:column;
  background:var(--p-card);border:1px solid var(--p-rule);border-radius:8px;
  overflow:hidden;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.asset-card:hover,.asset-card:focus-visible{
  transform:translateY(-3px);border-color:var(--p-gold);
  box-shadow:0 14px 38px rgba(12,27,46,.13);
}
/* Image sits above the text. Nothing is set over it, so no scrim is required.
   `height:auto` is load-bearing: the img's HTML height attribute is a
   presentational hint that makes the height definite, which makes the browser
   ignore aspect-ratio entirely. Without it these render at a fixed 394px. */
.asset-card__img{
  aspect-ratio:16/9;width:100%;height:auto;
  object-fit:cover;background:var(--p-rule-soft);
}
.asset-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.asset-card__t{
  font-family:var(--f-display);font-weight:600;font-size:21px;line-height:1.16;
  letter-spacing:-.01em;color:var(--p-ink);margin:0 0 14px;
}
.asset-card dl{margin:0;display:grid;gap:11px}
.asset-card dt{
  font:700 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-gold-ink);margin:0 0 4px;
}
.asset-card dd{margin:0;font-size:13.5px;line-height:1.6;color:var(--p-body)}
.asset-card dd.is-warn{color:var(--p-mut)}
.asset-card__go{
  margin-top:auto;padding-top:18px;
  font:700 12px/1 var(--font-sans);letter-spacing:.05em;color:var(--p-gold-ink);
}
.asset-card:hover .asset-card__go{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------------ video - */
.learn-video{padding:56px 0 0}
.learn-video__head{
  border-top:1px solid var(--p-rule);padding-top:26px;margin:0 0 24px;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.learn-video__head h2{
  font-family:var(--f-display);font-weight:500;font-size:clamp(28px,3.4vw,42px);
  line-height:1.08;letter-spacing:-.02em;color:var(--p-ink);margin:0;
}
.learn-video__head p{font-size:14px;line-height:1.6;color:var(--p-mut);margin:0;max-width:420px}
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* Deliberately not a player and not a fake thumbnail. No play control, because
   there is nothing to play yet. It reads as a scheduled series, not a break. */
.video-slot{
  background:var(--p-card-2);border:1px dashed var(--p-rule);border-radius:8px;
  padding:18px 18px 20px;display:flex;flex-direction:column;min-height:186px;
}
.video-slot__slate{
  height:6px;border-radius:3px;margin:0 0 16px;
  background:repeating-linear-gradient(90deg,var(--p-rule) 0 10px,transparent 10px 18px);
}
.video-slot__ch{
  font:600 11px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--p-gold-ink);margin:0 0 8px;
}
.video-slot__t{
  font-family:var(--f-display);font-weight:600;font-size:17.5px;line-height:1.2;
  color:var(--p-ink);margin:0 0 8px;
}
.video-slot__d{font-size:13px;line-height:1.55;color:var(--p-mut);margin:0}
.video-slot__status{
  margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;
  font:700 11px/1 var(--font-sans);letter-spacing:.06em;color:var(--p-mut);
}
.video-slot__status i{
  width:7px;height:7px;border-radius:50%;background:var(--p-gold);flex:none;
}

/* ------------------------------------------------------------------- next - */
.learn-next{margin:56px 0 0;background:var(--p-navy);color:#fff;border-radius:10px;overflow:hidden}
.learn-next__in{
  padding:38px 40px;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:28px;align-items:center;
}
.learn-next h2{
  font-family:var(--f-display);font-weight:500;font-size:clamp(24px,3vw,34px);
  line-height:1.1;letter-spacing:-.02em;color:#fff;margin:0 0 10px;
}
.learn-next p{font-size:15px;line-height:1.66;color:#C9D4E0;margin:0;max-width:560px}
.learn-next__cta{display:flex;gap:12px;flex-wrap:wrap}

.learn-fine{
  margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--p-rule);
  font-size:12.5px;line-height:1.65;color:var(--p-mut);
}
.learn-foot-space{height:56px}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1080px){
  .lw{padding:0 22px}
  .gl-bar{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
  .learn-mast__grid{grid-template-columns:1fr;gap:26px;align-items:start}
  .chapter-rail{grid-template-columns:repeat(2,1fr)}
  .chapter{border-bottom:1px solid var(--p-rule);min-height:0}
  .chapter:nth-child(2n){border-right:0}
  .asset-grid{grid-template-columns:repeat(2,1fr)}
  .video-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:720px){
  .learn-mast{padding:38px 0 26px}
  .lw{padding:0 18px}
  .gl-bar{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .gl-list{grid-template-columns:1fr}
  .asset-grid{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr}
  .learn-next__in{grid-template-columns:1fr;padding:28px 22px}
  .learn-glossary,.learn-assets,.learn-video{padding-top:40px}
  .gl-count{margin-left:0;width:100%;order:-1;padding-bottom:2px}
  .gl-search input{height:50px;padding-right:56px;font-size:16px}
  .gl-search kbd{display:none}
  .learn-mast__lede{font-size:16px}
}

@media (max-width:400px){
  .lw{padding:0 15px}
  .gl-bar{margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px}
  .chapter-rail{grid-template-columns:1fr}
  .chapter{border-right:0;padding:20px 18px 22px}
  .gl-item{padding:18px 18px 16px}
  .learn-mast h1{font-size:34px}
}

@media (prefers-reduced-motion:reduce){
  .learn *{transition:none !important;animation:none !important}
}

/* -------------------------------------------------------------- utilities */
/* cockpit.css has no visually-hidden helper and the search field needs a real
   label rather than a placeholder standing in for one. */
.learn .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* cockpit.css drops .x-fine to 10.5px under 760px, which is below the 11px
   floor we hold. Corrected for this page only; the shared rule is untouched. */
body.cockpit.learn .ck-ft .x-fine{font-size:11.5px;line-height:1.6}
body.cockpit.learn .ck-ft .x-fine a{text-decoration:underline;text-underline-offset:2px}

/* ============================================================================
   INSIGHTS — the essay layer of the learning surface (investor-insights.html)

   investor-insights held six real essays and a question set, sitting in the
   cockpit register on the same four-box router template as the other ten.
   Its content is reading, not routing, so it belongs on the paper ground this
   file established for resources: warm ground, Playfair display voice, a
   reading measure. Meridian's review recommends merging this page into
   resources; putting them in one register is the step that makes that merge a
   move rather than a rebuild.
   ========================================================================== */

/* Topic index. Not four buttons that each navigate away — a contents list. */
.ins-index{padding:14px 0 0}
.ins-index__head{border-top:1px solid var(--p-rule);padding-top:26px;margin-bottom:8px}
.ins-index__head h2{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3vw,38px);
  line-height:1.1;color:var(--p-ink);margin:0 0 10px;letter-spacing:-.01em}
.ins-index__head p{font-size:15px;line-height:1.68;color:var(--p-mut);margin:0;max-width:66ch}
.ins-index ol{list-style:none;margin:22px 0 0;padding:0;counter-reset:ins}
.ins-index li{counter-increment:ins;border-top:1px solid var(--p-rule-soft)}
.ins-index li:last-child{border-bottom:1px solid var(--p-rule-soft)}
.ins-index a{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:0 clamp(16px,2.4vw,30px);
  align-items:baseline;padding:16px 0;color:inherit;text-decoration:none;transition:background .15s}
.ins-index a:hover{background:rgba(255,255,255,.6)}
.ins-index a::before{content:counter(ins,decimal-leading-zero);font-family:var(--f-display);
  font-size:19px;color:var(--p-gold-ink);line-height:1.3}
.ins-index__t{min-width:0}
.ins-index__t b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(19px,2vw,24px);
  line-height:1.2;color:var(--p-ink)}
.ins-index__t span{display:block;margin-top:5px;font-size:14.5px;line-height:1.6;color:var(--p-mut)}
.ins-index__cat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-mut);white-space:nowrap;padding-left:14px}
@media(max-width:640px){
  .ins-index a{grid-template-columns:40px minmax(0,1fr);padding:14px 0}
  .ins-index__cat{grid-column:2;padding-left:0;margin-top:8px}
}

/* The essays. A reading measure, a display-serif head, and a hairline rule
   between pieces. No cards. */
.ins-essays{padding:clamp(38px,4.6vw,62px) 0 0}
.ins-essay{padding:clamp(30px,3.6vw,46px) 0;border-top:1px solid var(--p-rule)}
.ins-essay:first-child{border-top:2px solid var(--p-gold)}
.ins-essay__cat{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--p-gold-ink);margin:0 0 14px}
.ins-essay h3{font-family:var(--f-display);font-weight:400;font-size:clamp(25px,3.2vw,40px);
  line-height:1.1;letter-spacing:-.012em;color:var(--p-ink);margin:0 0 18px;max-width:36ch}
.ins-essay h3 em{font-style:italic;color:var(--p-gold-ink)}
.ins-essay p{font-size:17px;line-height:1.75;color:var(--p-body);margin:0 0 16px;max-width:68ch}
.ins-essay p:last-child{margin-bottom:0}

/* The question set is the operative part of the operator essay, so it reads as
   a list of questions rather than a paragraph of them. */
.ins-qset{margin:26px 0 0;padding:24px clamp(20px,2.6vw,30px);background:var(--p-card);
  border:1px solid var(--p-rule);border-left:3px solid var(--p-gold);border-radius:3px;max-width:74ch}
.ins-qset > b{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-mut);margin:0 0 16px}
.ins-qset ol{list-style:none;margin:0;padding:0;counter-reset:q;display:grid;gap:13px}
.ins-qset li{counter-increment:q;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;
  font-size:16.5px;line-height:1.58;color:var(--p-ink)}
.ins-qset li::before{content:counter(q);font-family:var(--f-display);font-size:17px;
  color:var(--p-gold-ink);line-height:1.5}

.ins-fine{margin:clamp(34px,4vw,52px) 0 0;padding:20px 0 clamp(40px,5vw,66px);
  border-top:1px solid var(--p-rule);font-size:12.5px;line-height:1.7;color:var(--p-mut);max-width:88ch}