/* ============================================================
   ELEVATE DIGITAL - guide long-read layout (26 Sep 2026)
   Loads AFTER ../style.css?v=10, which already supplies the tokens (--ed-*),
   fonts, nav, footer, .btn-primary, the body mesh + grain and the
   ed-rise / ed-rise-in keyframes. Everything here is scoped to .g-* classes.
   Motif: the TOC is a trajectory thread with glowing nodes (the homepage's
   stat nodes); the thread fills as the reader moves through the guide.
   ============================================================ */

:root {
  --g-copy: #D2D2E4;          /* long-read body copy: softer than --text, 12:1 on --ed-ink */
  --g-soft: #B7B8D2;          /* dek and CTA copy */
  --g-rail: 210px;            /* TOC rail width at >=1024px */
  --g-measure: 680px;         /* about 68ch of 18px Instrument Sans */
  --g-gap: 56px;
  --g-top: calc(var(--bar-h, 44px) + 28px);  /* sticky offset under the fixed announcement bar */
  --g-node: 9px;
}

/* style.css sets overflow-x: hidden on html AND body, which turns body into a scroll
   container (overflow-y computes to auto) so position: sticky never sticks. clip cuts the
   same edge without making a scroller; browsers without clip keep hidden and the TOC scrolls. */
body { overflow-x: clip; }

.g-main img { height: auto; }

/* ---------- Hero ---------- */
.g-hero { padding: 58px 0 0; }
.g-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: 64px; align-items: center;
}

.g-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
  font-family: var(--ed-font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-muted);
}
.g-kicker::before {
  content: ""; width: var(--g-node); height: var(--g-node); border-radius: 50%;
  background: var(--ed-gradient);
  box-shadow: 0 0 14px rgba(230, 77, 192, .8);
}

.g-title {
  font-weight: 800;
  font-size: clamp(32px, 3.5vw, 52px);
  line-height: 1.08; letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 15em;
  margin-bottom: 24px;
}
.g-dek { font-size: 19px; line-height: 1.55; color: var(--g-soft); max-width: 34em; }

.g-byline {
  display: flex; align-items: center; gap: 16px;
  margin-top: 34px; padding-top: 24px; max-width: 34em;
  border-top: 1px solid var(--ed-line);
}
.g-byline__avatar {
  width: 48px; height: auto; aspect-ratio: 1 / 1; flex-shrink: 0;
  object-fit: cover; object-position: 50% 16%;
  border-radius: 50%;
  border: 1px solid var(--ed-line-hot);
  box-shadow: 0 0 0 4px rgba(123, 47, 240, .12), 0 8px 24px rgba(0, 0, 0, .45);
}
.g-byline__name {
  font-weight: 600; font-size: 16px; color: var(--text);
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
.g-byline__name:hover { color: #fff; text-decoration-color: var(--ed-neon-4); }
.g-byline__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  margin-top: 3px;
  font-family: var(--ed-font-mono); font-size: 12px; letter-spacing: .03em;
  color: var(--text-muted);
}
.g-byline__meta > span + span { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--ed-line-hot); }

/* Visual slot: a framed plate. Each guide supplies its own object inside .g-visual__stage. */
.g-visual { position: relative; margin: 0; }
.g-visual::before {
  content: ""; position: absolute; inset: 10% -4% -6% 8%;
  background: radial-gradient(closest-side, rgba(155, 48, 242, .30), transparent 75%);
  filter: blur(18px);
  pointer-events: none;
}
.g-visual__frame {
  position: relative;
  padding: 1px; border-radius: 28px;
  background: linear-gradient(150deg, rgba(123, 47, 240, .85), rgba(155, 48, 242, .16) 36%, rgba(196, 45, 208, .10) 62%, rgba(230, 77, 192, .70));
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85);
}
.g-visual__stage {
  position: relative;
  min-height: 360px; padding: 34px;
  display: grid; place-items: center;
  border-radius: 27px;
  overflow: hidden;
  background:
    radial-gradient(420px 260px at 88% 0%, rgba(230, 77, 192, .14), transparent 70%),
    radial-gradient(380px 300px at 0% 100%, rgba(123, 47, 240, .20), transparent 70%),
    radial-gradient(rgba(242, 241, 250, .075) 1px, transparent 1.5px) 0 0 / 20px 20px,
    var(--ed-panel);
}
.g-visual__stage > * { position: relative; max-width: 100%; }
.g-visual__cap {
  position: relative;
  display: flex; gap: 12px; align-items: baseline;
  margin-top: 16px; padding: 0 4px;
  font-family: var(--ed-font-mono); font-size: 12px; line-height: 1.6; letter-spacing: .02em;
  color: var(--text-muted);
}
.g-visual__cap::before {
  content: ""; flex: 0 0 18px; height: 1px; transform: translateY(-4px);
  background: var(--ed-gradient);
}

/* ---------- Layout: TOC + article (mobile first) ---------- */
.g-layout { margin-top: 48px; }

.g-toc {
  margin-bottom: 44px;
  padding: 18px 20px 16px;
  border: 1px solid var(--ed-line); border-radius: 18px;
  background: rgba(18, 21, 42, .6);
}
.g-toc__title {
  font-family: var(--ed-font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.g-toc__track { position: relative; }
.g-toc__list { list-style: none; counter-reset: gtoc; }
.g-toc__list li {
  position: relative; counter-increment: gtoc;
  padding: 8px 0 8px 32px;
  border-top: 1px solid rgba(155, 48, 242, .12);
}
.g-toc__list li:first-child { border-top: 0; }
.g-toc__list li::before {
  content: counter(gtoc, decimal-leading-zero);
  position: absolute; left: 0; top: 10px;
  font-family: var(--ed-font-mono); font-size: 11.5px; color: var(--ed-neon-4);
}
.g-toc__list a {
  display: block;
  font-size: 15px; line-height: 1.4;
  color: var(--g-copy); text-decoration: none;
  transition: color .15s ease;
}
.g-toc__list a:hover { color: #fff; }
.g-toc__fill { display: none; }

/* ---------- Article body ---------- */
.g-body {
  min-width: 0;
  font-size: 18px; line-height: 1.72;
  color: var(--g-copy);
}
.g-body > * { max-width: var(--g-measure); }
.g-body > .g-wide { max-width: none; }

/* Flow spacing: one owl for prose, bigger air around components, headings pull their content close. */
.g-body > * + * { margin-top: 1.15em; }
.g-body > :where(.g-callout, .g-takeaway, .g-pull, .g-steps, .g-checklist, .g-table, figure) { margin-top: 2em; }
.g-body > :where(.g-callout, .g-takeaway, .g-pull, .g-steps, .g-checklist, .g-table, figure) + * { margin-top: 2em; }
.g-body > h2 { margin-top: 2.3em; }
.g-body > h3 { margin-top: 1.8em; }
.g-body > :is(h2, h3) + * { margin-top: .7em; }
.g-body > :first-child { margin-top: 0; }

.g-lede { font-size: 21px; line-height: 1.6; color: var(--text); }

.g-body h2 {
  position: relative;
  font-weight: 700;
  font-size: clamp(24px, 2.3vw, 31px);
  line-height: 1.2; letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
  scroll-margin-top: 20px;
}
.g-body h3 {
  font-weight: 500; font-size: 19px; line-height: 1.35;
  color: var(--text);
  scroll-margin-top: 20px;
}
.g-body strong { color: var(--text); font-weight: 600; }
.g-body a:not([class]) {
  color: var(--text);
  text-decoration: underline; text-decoration-color: var(--ed-neon-3);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.g-body a:not([class]):hover { color: var(--ed-neon-4); text-decoration-color: var(--ed-neon-4); }

.g-body > ul:not([class]), .g-body > ol:not([class]) { list-style: none; }
.g-body > ul:not([class]) > li { position: relative; padding-left: 28px; }
.g-body > ul:not([class]) > li::before {
  content: ""; position: absolute; left: 2px; top: .8em;
  width: 12px; height: 2px; border-radius: 2px;
  background: var(--ed-gradient);
}
.g-body > ol:not([class]) { counter-reset: gol; }
.g-body > ol:not([class]) > li { position: relative; counter-increment: gol; padding-left: 34px; }
.g-body > ol:not([class]) > li::before {
  content: counter(gol) ".";
  position: absolute; left: 0; top: .12em;
  font-family: var(--ed-font-mono); font-size: 14px; color: var(--ed-neon-4);
}
.g-body li + li { margin-top: .55em; }

.g-body figure { margin: 0; }
.g-body figure img { display: block; width: 100%; border-radius: 18px; border: 1px solid var(--ed-line); }
.g-body figcaption {
  margin-top: 10px;
  font-family: var(--ed-font-mono); font-size: 12px; line-height: 1.6; color: var(--text-muted);
}

/* Table: wrap in .g-table (scrolls inside itself if a column ever outgrows a phone). */
.g-table {
  overflow-x: auto;
  border: 1px solid var(--ed-line); border-radius: 18px;
  background: rgba(18, 21, 42, .55);
}
.g-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.g-table caption {
  caption-side: top; text-align: left;
  padding: 16px 20px 12px;
  font-family: var(--ed-font-mono); font-size: 12px; color: var(--text-muted);
}
.g-table th {
  text-align: left; vertical-align: bottom;
  padding: 13px 20px;
  font-family: var(--ed-font-mono); font-weight: 400; font-size: 12px; letter-spacing: .05em;
  color: var(--text-muted);
  background: rgba(155, 48, 242, .07);
  border-bottom: 1px solid var(--ed-line);
}
.g-table td { padding: 14px 20px; vertical-align: top; border-top: 1px solid rgba(155, 48, 242, .12); }
.g-table tbody tr:first-child td { border-top: 0; }
.g-table td:first-child, .g-table th[scope="row"] { color: var(--text); font-weight: 600; }

/* .g-table--stack: on phones each row becomes a small block. Every td after the first carries
   data-label="<its column heading>"; the first td is the row title. Use it for 3+ columns or long cells. */
@media (max-width: 560px) {
  .g-table--stack { overflow: visible; }
  .g-table--stack thead { display: none; } /* the data-label on each cell carries the heading instead */
  .g-table--stack table, .g-table--stack tbody, .g-table--stack tr, .g-table--stack td { display: block; width: 100%; }
  .g-table--stack tbody tr { padding: 14px 16px 16px; border-top: 1px solid rgba(155, 48, 242, .14); }
  .g-table--stack tbody tr:first-child { border-top: 0; }
  .g-table.g-table--stack td, .g-table.g-table--stack tbody tr:first-child td { padding: 0; border: 0; } /* doubled class: outranks the later 860px .g-table td padding */
  .g-table--stack td:first-child { font-size: 16px; margin-bottom: 2px; }
  .g-table--stack td[data-label]::before {
    content: attr(data-label);
    display: block; margin-top: 8px;
    font-family: var(--ed-font-mono); font-weight: 400; font-size: 11px; letter-spacing: .05em;
    color: var(--text-muted);
  }
}

/* "From our pages": a first-hand note, always with its source line. */
.g-callout {
  position: relative;
  padding: 24px 26px 22px 30px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(123, 47, 240, .11), transparent 55%), var(--ed-panel-2);
  border: 1px solid rgba(155, 48, 242, .2);
  font-size: 17px; line-height: 1.65;
}
.g-callout::before {
  content: ""; position: absolute; left: -1px; top: 22px; bottom: 22px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--ed-neon-1), var(--ed-neon-4));
}
.g-callout__label {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  font-family: var(--ed-font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--ed-neon-4);
}
.g-callout__label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ed-neon-4); box-shadow: 0 0 10px rgba(230, 77, 192, .9);
}
.g-callout > p + p { margin-top: .8em; }
.g-callout > .g-callout__src {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed rgba(155, 48, 242, .28);
  font-family: var(--ed-font-mono); font-size: 12px; line-height: 1.6; color: var(--text-muted);
}

/* Key points box: the short version of the whole guide. */
.g-takeaway {
  position: relative;
  padding: 30px 32px;
  border-radius: 26px;
  border: 1px solid transparent;
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(230, 77, 192, .10), transparent 70%) padding-box,
    linear-gradient(var(--ed-panel), var(--ed-panel)) padding-box,
    linear-gradient(135deg, rgba(123, 47, 240, .9), rgba(196, 45, 208, .22) 50%, rgba(230, 77, 192, .8)) border-box;
  box-shadow: 0 30px 80px -44px rgba(123, 47, 240, .7);
}
.g-takeaway__title {
  font-family: var(--ed-font-display); font-weight: 700; font-size: 17px; letter-spacing: .01em;
  color: var(--text);
  margin-bottom: 16px;
}
.g-takeaway ul { list-style: none; }
.g-takeaway li { position: relative; padding-left: 28px; font-size: 17px; line-height: 1.6; color: var(--text); }
.g-takeaway li + li { margin-top: 12px; }
.g-takeaway li::before {
  content: ""; position: absolute; left: 1px; top: .55em;
  width: var(--g-node); height: var(--g-node); border-radius: 50%;
  background: var(--ed-gradient); box-shadow: 0 0 12px rgba(230, 77, 192, .7);
}

/* Pull quote: display face, breaks out into the right margin when marked .g-wide. */
.g-pull {
  padding: 4px 0 4px 28px;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, var(--ed-neon-1), var(--ed-neon-4)) 1;
}
.g-pull p {
  max-width: 24em;
  font-family: var(--ed-font-display); font-weight: 500;
  font-size: clamp(21px, 2.2vw, 29px); line-height: 1.32; letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}
.g-pull .g-pull__by {
  margin-top: 14px;
  font-family: var(--ed-font-mono); font-weight: 400; font-size: 12px; letter-spacing: .04em; line-height: 1.5;
  color: var(--text-muted);
}

/* Numbered steps: a real sequence, so the numbers carry information. */
.g-steps { list-style: none; counter-reset: gstep; }
.g-steps > li { position: relative; counter-increment: gstep; padding: 0 0 28px 62px; }
.g-steps > li + li { margin-top: 0; }
.g-steps > li:last-child { padding-bottom: 0; }
.g-steps > li::before {
  content: counter(gstep);
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--ed-font-display); font-weight: 700; font-size: 15px; color: var(--text);
  border: 1px solid transparent;
  background: linear-gradient(var(--ed-ink), var(--ed-ink)) padding-box, var(--ed-gradient) border-box;
  box-shadow: 0 0 20px rgba(196, 45, 208, .28);
}
.g-steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 20px; top: 46px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, rgba(196, 45, 208, .6), rgba(123, 47, 240, .12));
}
.g-body .g-steps h3 { margin: 7px 0 6px; font-size: 18px; }
.g-steps p + p { margin-top: .6em; }

/* Checklist: things to do, each ticked in the brand gradient. */
.g-checklist { list-style: none; border-top: 1px solid var(--ed-line); }
.g-checklist > li {
  position: relative;
  padding: 14px 0 14px 40px;
  border-bottom: 1px solid var(--ed-line);
}
.g-body .g-checklist > li + li { margin-top: 0; }
.g-checklist > li::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 24px; height: 24px; border-radius: 7px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4 9-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat,
    var(--ed-gradient);
  box-shadow: 0 4px 14px rgba(155, 48, 242, .35);
}

/* ---------- End CTA ---------- */
.g-cta { padding: 110px 0 0; }
.g-cta__panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: 48px; align-items: center;
  padding: 56px;
  border-radius: 32px;
  border: 1px solid rgba(196, 45, 208, .3);
  background:
    radial-gradient(700px 360px at 100% 115%, rgba(230, 77, 192, .26), transparent 70%),
    radial-gradient(560px 300px at 0% -25%, rgba(123, 47, 240, .32), transparent 70%),
    var(--ed-panel);
}
.g-cta__panel h2 {
  font-size: clamp(26px, 3vw, 40px); line-height: 1.12;
  text-wrap: balance; max-width: 15em;
  margin: 0 0 16px;
}
.g-cta__text { color: var(--g-soft); font-size: 17px; max-width: 32em; }
.g-cta__action {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding-left: 44px;
  border-left: 1px solid rgba(196, 45, 208, .25);
}
.g-cta__label { font-family: var(--ed-font-mono); font-size: 12px; letter-spacing: .06em; color: var(--text-muted); }
.g-cta__num {
  margin-top: -8px;
  font-family: var(--ed-font-mono); font-weight: 700; font-size: 26px; letter-spacing: .02em;
  color: var(--text); white-space: nowrap;
}
.g-cta__save {
  font-family: var(--ed-font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--text-muted);
  text-decoration: underline; text-decoration-color: var(--ed-neon-3); text-underline-offset: 4px;
}
.g-cta__save:hover { color: var(--ed-neon-4); }

/* ---------- More guides ---------- */
.g-more { padding: 96px 0 110px; }
.g-more__title { font-size: clamp(21px, 2vw, 26px); margin-bottom: 26px; }
.g-more__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; }
.g-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 230px; padding: 28px 28px 24px;
  border-radius: 22px;
  border: 1px solid rgba(155, 48, 242, .16);
  background: var(--ed-panel);
  color: var(--text); text-decoration: none;
  transition: transform .2s var(--ed-ease), border-color .2s var(--ed-ease), background-color .2s ease;
}
.g-card:first-child {
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(196, 45, 208, .16), transparent 70%),
    var(--ed-panel);
}
.g-card__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-muted);
}
.g-card__kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ed-gradient);
}
.g-card__title {
  font-family: var(--ed-font-display); font-weight: 700;
  font-size: 19px; line-height: 1.28; text-wrap: balance;
}
.g-card:first-child .g-card__title { font-size: 23px; }
.g-card__dek { color: var(--text-muted); font-size: 15.5px; line-height: 1.55; }
.g-card__foot {
  margin-top: auto; padding-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--ed-font-mono); font-size: 12px; color: var(--text-muted);
}
.g-card__go {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid transparent;
  background: linear-gradient(var(--ed-panel), var(--ed-panel)) padding-box, var(--ed-gradient) border-box;
  transition: background .2s ease;
}
.g-card__go svg { width: 16px; height: 16px; display: block; }
@media (hover: hover) and (pointer: fine) {
  .g-card:hover { transform: translateY(-3px); border-color: var(--ed-line-hot); background-color: var(--ed-panel-2); }
  .g-card:hover .g-card__go { background: var(--ed-gradient) padding-box, var(--ed-gradient) border-box; }
}
.g-card:active { transform: scale(.98); transition-duration: .12s; }
.g-card:focus-visible { outline: 2px solid var(--ed-neon-4); outline-offset: 3px; }

/* ---------- Motion: one load sequence in the hero ---------- */
.g-hero .g-kicker, .g-hero .g-dek, .g-hero .g-byline { animation: ed-rise-in .3s var(--ed-ease) both; }
/* The h1 and the visual move without opacity: either can be the LCP element, and a paint at opacity 0 does not count. */
.g-title, .g-visual { animation: ed-rise .3s var(--ed-ease) both; }
.g-title { animation-delay: 40ms; }
.g-hero .g-dek { animation-delay: 90ms; }
.g-visual { animation-delay: 120ms; }
.g-hero .g-byline { animation-delay: 150ms; }

/* ---------- >=1024px: sticky trajectory rail + article on a subgrid ---------- */
@media (min-width: 1024px) {
  .g-layout {
    display: grid;
    grid-template-columns: var(--g-rail) minmax(0, var(--g-measure)) minmax(0, 1fr);
    column-gap: var(--g-gap);
    align-items: start;
    margin-top: 96px;
  }

  .g-toc {
    position: sticky; top: var(--g-top);
    max-height: calc(100vh - var(--g-top) - 24px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    margin: 0 0 0 -14px; padding: 2px 6px 12px 14px; /* room for the node glow: overflow-y auto clips at the padding edge */
    border: 0; border-radius: 0; background: none;
  }
  .g-toc__title { margin-bottom: 20px; padding-left: 26px; }
  .g-toc__track { --node-y: 10px; }
  .g-toc__list li { padding: 0 0 18px 26px; border-top: 0; }
  .g-toc__list li:last-child { padding-bottom: 0; }
  .g-toc__list li::before {
    content: ""; z-index: 1;
    left: 0; top: calc(var(--node-y) - var(--g-node) / 2);
    width: var(--g-node); height: var(--g-node); border-radius: 50%;
    background: var(--ed-ink);
    border: 1px solid rgba(155, 48, 242, .55);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .g-toc__list li:not(:last-child)::after {
    content: ""; position: absolute;
    left: calc(var(--g-node) / 2 - .5px); top: var(--node-y); bottom: calc(-1 * var(--node-y));
    width: 1px; background: rgba(155, 48, 242, .22);
  }
  .g-toc__list a { font-size: 14.5px; color: var(--text-muted); }
  .g-toc__list a[aria-current="true"] { color: var(--text); }
  .g-toc__list li.is-past::before { background: var(--ed-neon-1); border-color: var(--ed-neon-1); }
  .g-toc__list li.is-on::before {
    background: var(--ed-gradient); border-color: transparent;
    box-shadow: 0 0 0 4px rgba(196, 45, 208, .14), 0 0 16px rgba(230, 77, 192, .85);
  }
  /* The lit part of the thread. The inline script sizes it once and scales it per scroll. */
  .g-toc__fill {
    display: block;
    position: absolute; left: calc(var(--g-node) / 2 - .5px); top: 0;
    width: 1px; height: 0;
    background: linear-gradient(180deg, var(--ed-neon-1), var(--ed-neon-4));
    box-shadow: 0 0 8px rgba(230, 77, 192, .55);
    transform-origin: 50% 0; transform: scaleY(0);
    pointer-events: none;
  }

  .g-body { grid-column: 2 / 4; display: grid; grid-template-columns: subgrid; align-content: start; }
  .g-body > * { grid-column: 1; }
  .g-body > .g-wide { grid-column: 1 / -1; }
  .g-body > h2::before {
    content: ""; position: absolute;
    left: calc(-1 * var(--g-gap) / 2 - var(--g-node) / 2); top: calc(.6em - var(--g-node) / 2);
    width: var(--g-node); height: var(--g-node); border-radius: 50%;
    background: var(--ed-gradient); opacity: .8;
  }
}

@media (min-width: 1024px) and (max-width: 1179px) {
  :root { --g-rail: 190px; --g-gap: 44px; }
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 1023px) {
  .g-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .g-visual { max-width: 560px; }
  .g-cta__panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .g-cta__action { padding-left: 0; padding-top: 28px; border-left: 0; border-top: 1px solid rgba(196, 45, 208, .25); }
}

@media (max-width: 860px) {
  .g-hero { padding-top: 32px; }
  .g-title { font-size: 31px; line-height: 1.12; }
  .g-dek { font-size: 17.5px; }
  .g-byline { margin-top: 28px; padding-top: 20px; }
  .g-visual__stage { min-height: 260px; padding: 22px; }

  .g-layout { margin-top: 44px; }
  .g-body { font-size: 17px; line-height: 1.7; }
  .g-lede { font-size: 19px; }
  .g-body > h2 { margin-top: 2.1em; }
  .g-body h2 { font-size: 23px; }
  .g-body h3 { font-size: 18px; }

  .g-callout { padding: 22px 20px 20px 24px; font-size: 16px; }
  .g-takeaway { padding: 24px 22px; border-radius: 22px; }
  .g-takeaway li { font-size: 16px; }
  .g-pull { padding-left: 20px; }
  .g-steps > li { padding-left: 56px; }
  .g-table table { font-size: 14.5px; }
  .g-table th, .g-table td { padding: 12px 14px; }
  .g-table caption { padding: 14px 14px 10px; }

  .g-cta { padding-top: 84px; }
  .g-cta__panel { padding: 40px 24px 36px; border-radius: 26px; }
  .g-cta__num { font-size: 22px; }
  .g-more { padding: 72px 0 84px; }
  .g-more__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .g-card { min-height: 0; padding: 24px 22px 20px; }
  .g-card:first-child .g-card__title { font-size: 20px; }
}

@media (max-width: 520px) {
  .g-byline { align-items: flex-start; }
  .g-byline__meta { flex-direction: column; align-items: flex-start; }
  .g-byline__meta > span + span { margin-left: 0; padding-left: 0; border-left: 0; }
}

@media (max-width: 340px) {
  .g-title { font-size: 27px; }
}