/* ==========================================================================
   Reel 04 — "The Field Guide" (/resources/service-business-content-ideas/). Loaded after resources.css on that page only.
   Every rule is scoped to body.rg4 or an .rg4- class. Default CSS = the final, complete, visible state.
   One-shot pre-states exist only as  @media (prefers-reduced-motion: no-preference) { html.ready .x:not(.in) … }
   (pages.js adds .in to [data-io]); JS-dependent states only under html.rg4-live (set by /service-guide.js).
   Words never hide (labels may dim to .35); nothing loops (the ch03 caret blinks 4 times, then holds).
   Semantic marks use fixed colours (teal = a purpose / our production, #3478D4 = your team); var(--accent) is chrome only.
   No gold here: the only gold element is the shared .resg-go.is-primary booking link.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
.rg4 { --rg4-hh: 69px; --rg4-bar: 44px; --rg4-you: #3478D4; --rg4-you-t: color-mix(in srgb, #3478D4 62%, #fff);
       --rg4-hl: rgba(25, 230, 207, .2); --rg4-lab: 500 max(.7rem, 11px)/1.35 var(--mono); --rg4-panel: #0F1217; }
.rg4 [hidden] { display: none !important; }   /* JS-only controls stay out of the way until the script unhides them */
.rg4-lab { display: block; max-width: none; font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.rg4 .res-plate figcaption { font-size: max(.66rem, 11px); }
.rg4 .res3-pnl-head, .rg4 .res3-tw-head, .rg4 .res-tag::before, .rg4 .rg4-t thead th, .rg4 .rg4-t .res3-t-l::before { font-size: max(.6rem, 11px); }

/* ---------------------------------------------------------------- 2. hero: quick-start row + identification plate */
@media (min-width: 1100px) { .rg4-hero .res-plate { grid-row: 1 / span 7; } }   /* 7 left-column rows, incl. .rg4-start */
.rg4-start { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; max-width: none; }
.rg4-start a { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; padding: 0 18px; color: var(--text); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--teal) 60%, transparent); font: 500 max(.72rem, 11px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: background .3s, border-color .3s; }
.rg4-start a::after { content: '\2193'; content: '\2193' / ''; color: var(--teal); transition: transform .35s var(--ease); }
.rg4-start a:hover, .rg4-start a:focus-visible { background: rgba(25, 230, 207, .08); border-color: var(--teal); }
.rg4-start a:hover::after { transform: translateY(3px); }
.rg4-idp .rg4-mk { fill: none; stroke: var(--teal); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.rg4-idp .rg4-ld { fill: none; stroke: rgba(244, 243, 239, .6); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.rg4-idp .rg4-tg rect { fill: rgba(2, 3, 4, .74); stroke: rgba(25, 230, 207, .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rg4-idp text { font: 500 32px/1 var(--mono); letter-spacing: .14em; fill: #F4F3EF; }   /* 32 user units ≥ 11px on screen from 640px up */
.rg4-idp .rg4-dot { fill: var(--teal); }
@media (max-width: 639px) { .rg4-idp text, .rg4-idp .rg4-tg rect { display: none; } }   /* the marks stay; the caption carries the words */
.rg4-plate > .cb.br { top: 0; bottom: auto; margin-top: calc(56.25% - 22px); }   /* sits on the frame, not on a two-line caption */
@media (min-width: 1100px) { .rg4-plate > .cb.br { margin-top: calc(56.25% - 8px); } }   /* below the HUD text, like the top-left bracket */
@media (max-width: 559px) { .rg4-hero .res-crumbs li:last-child { flex-basis: 100%; } }

/* ---------------------------------------------------------------- 3. intro: three customers, one decision */
.rg4 .res-prose > p.rg4-cast { display: grid; gap: 22px; }
@media (min-width: 900px) {
  .rg4 .res-prose > p.rg4-cast { width: min(1040px, 100vw - 32px); margin: 0; margin-inline: calc(50% - min(520px, 50vw - 16px));
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
.rg4-c { display: block; padding-top: 16px; border-top: 1px solid var(--line2); transition: border-color .8s var(--ease) calc(var(--k, 0) * .25s + .2s); }
.rg4-role { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: var(--rg4-lab); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-t);
  transition: opacity .8s var(--ease) calc(var(--k, 0) * .25s + .2s); }
.rg4-role::before { content: ''; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.rg4-role::after { content: attr(data-l); content: attr(data-l) / ""; }
.rg4-c:nth-child(1) .rg4-role { --k: 0; } .rg4-c:nth-child(2) .rg4-role { --k: 1; } .rg4-c:nth-child(3) .rg4-role { --k: 2; }
.rg4-role[data-g="home"] { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7.6 8 2.6l6 5'/%3E%3Cpath d='M3.6 6.4v7h8.8v-7'/%3E%3Cpath d='M6.6 13.4V9.6h2.8v3.8'/%3E%3C/svg%3E"); }
.rg4-role[data-g="clock"] { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.6V8l2.4 1.6'/%3E%3C/svg%3E"); }
.rg4-role[data-g="tooth"] { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 2.6c1.3 0 2.1.7 3.4.7s2.1-.7 3.4-.7c1.8 0 2.6 1.6 2.4 3.4-.2 1.6-.9 2.6-1.2 4-.3 1.5-.6 3.4-1.6 3.4-.9 0-1-1.6-1.4-2.8-.2-.6-.5-1-1-1h-.2c-.5 0-.8.4-1 1-.4 1.2-.5 2.8-1.4 2.8-1 0-1.3-1.9-1.6-3.4-.3-1.4-1-2.4-1.2-4-.2-1.8.6-3.4 2.4-3.4z'/%3E%3C/svg%3E"); }
.rg4-role[data-g="pen"] { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l1-3.4 7.2-7.2 2.4 2.4L6.4 12 3 13z'/%3E%3Cpath d='M9.8 3.8l2.4 2.4'/%3E%3C/svg%3E"); }

/* the decision line: solid "beforehand", a tick for the decision, dashed "experiencing the work" */
.rg4-line { position: relative; display: flex; align-items: flex-end; height: 64px; margin: 1.6em 0 .2em; }
.rg4-line-a { position: relative; flex: 0 0 62%; height: 2px; background: var(--teal); box-shadow: 0 0 10px rgba(25, 230, 207, .5); transform-origin: left;
  transition: transform .9s var(--ease); }
.rg4-line-b { position: relative; flex: 1; border-bottom: 1px dashed var(--text2); opacity: .8; transition: opacity .6s var(--ease) 1.1s; }
.rg4-line-a::before, .rg4-line-b::before, .rg4-line-d::before { content: attr(data-l); content: attr(data-l) / ""; position: absolute; bottom: 14px;
  font: var(--rg4-lab); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transition: opacity .6s var(--ease) .3s; }
.rg4-line-a::before { left: 0; color: var(--accent-t); }
.rg4-line-b::before { right: 0; color: var(--text2); }
.rg4-line-d { position: absolute; left: 62%; bottom: -6px; width: 1px; height: 30px; background: var(--teal); transform-origin: bottom;
  transition: transform .4s var(--ease) .9s; }
.rg4-line-d::before { left: 50%; transform: translateX(-50%); bottom: 38px; color: var(--text); }
@media (min-width: 560px) { .rg4 .res-prose > p.rg4-belongs { max-width: 62%; } }
@media (max-width: 559px) {
  .rg4-line { margin-bottom: 2.2em; }
  .rg4-line-d::before { top: calc(100% + 10px); bottom: auto; }   /* the three labels never collide at 343px */
  .rg4-line-b::before { left: 8px; white-space: normal; text-align: right; line-height: 1.3; }
}

/* ---------------------------------------------------------------- 4. ch01: the sign and four views */
.rg4-views-g { display: grid; gap: 20px; }
@media (min-width: 760px) { .rg4-views-g { grid-template-columns: minmax(180px, 2.6fr) minmax(0, 7.4fr); gap: 28px; align-items: center; } }
.rg4-sign { display: grid; gap: 14px; padding: 20px 18px; border: 1px dashed var(--line2); background: rgba(244, 243, 239, .02); }
@media (max-width: 759px) { .rg4-sign { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; padding: 16px 14px; } }
.rg4-slot { display: block; }
.rg4-slot::before { content: attr(data-l); content: attr(data-l) / ""; display: block; margin-bottom: 8px; font: var(--rg4-lab); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text2); }
.rg4-slot.is-name::after { content: ''; display: block; width: 72%; height: 12px; border: 1px dashed color-mix(in srgb, var(--text2) 60%, transparent); }
.rg4-slot.is-logo::after { content: ''; display: block; width: 28px; height: 28px; border: 1px dashed color-mix(in srgb, var(--text2) 60%, transparent); border-radius: 50%; }
.rg4-slot.is-list i { display: block; height: 0; margin-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--text2) 60%, transparent); }
.rg4-slot.is-list i:nth-child(1) { width: 92%; } .rg4-slot.is-list i:nth-child(2) { width: 70%; } .rg4-slot.is-list i:nth-child(3) { width: 82%; }
.rg4-frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rg4-frame { position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding: 24px 16px 16px;
  background: rgba(244, 243, 239, .02); border: 1px solid var(--line2); transition: opacity .8s var(--ease) calc(var(--k, 0) * .22s + .3s); }
.rg4-frame::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-bottom: 1px solid var(--line2);
  background: radial-gradient(circle, rgba(244, 243, 239, .16) 1.6px, transparent 2px) 4px 50% / 12px 10px repeat-x; }   /* a film edge: a frame you could film */
.rg4-frame-l { display: block; }
.rg4-frame-l::before { content: attr(data-l); content: attr(data-l) / ""; display: block; font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-t); }
.rg4-frame-l::after { content: attr(data-r); content: attr(data-r) / ""; display: block; margin-top: 8px; font: 400 clamp(1.1rem, 1rem + .5vw, 1.35rem)/1.25 var(--serif); color: var(--text); }
@media (max-width: 420px) { .rg4-frame { padding: 22px 12px 12px; } .rg4-frame-l::after { font-size: 1.02rem; } }
.rg4-sign { position: relative; }
.rg4-sign::after { content: '\2192'; content: '\2192' / ''; position: absolute; color: var(--teal); font: 500 1.1rem/1 var(--mono); }
@media (min-width: 760px) { .rg4-sign::after { right: -22px; top: 50%; transform: translateY(-50%); } }
@media (max-width: 759px) { .rg4-views-g { gap: 26px; } .rg4-sign::after { content: '\2193'; content: '\2193' / ''; left: 50%; bottom: -21px; transform: translateX(-50%); } }

/* ---------------------------------------------------------------- 5. the directory: finder, index, position bar, entries */
.rg4-dir { width: min(1040px, 100vw - 32px); margin: 40px 0 0; margin-inline: calc(50% - min(520px, 50vw - 16px)); font-size: 1rem; }
.rg4-find { position: relative; padding: 24px clamp(16px, 3vw, 32px); background: rgba(15, 18, 23, .97); border: 1px solid var(--line); scroll-margin-top: 84px; }
.rg4-q-l { display: block; margin-bottom: 10px; font: 500 max(.72rem, 11px)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-t); }
.rg4-q-box { display: flex; gap: 8px; }
#rg4-q-in { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; font: 400 1.1rem/1 var(--sans); color: var(--text); background: rgba(244, 243, 239, .04);
  border: 1px solid var(--line2); border-radius: 0; caret-color: var(--teal); -webkit-appearance: none; appearance: none; }
#rg4-q-in:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
#rg4-q-in::placeholder { color: var(--text2); opacity: 1; }
#rg4-q-in::-webkit-search-cancel-button { -webkit-appearance: none; }
.rg4-q-x { flex: none; min-height: 52px; padding: 0 16px; font: 500 max(.7rem, 11px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text);
  background: transparent; border: 1px solid var(--line2); cursor: pointer; }
.rg4-q-x:hover { border-color: var(--teal); }
.rg4-q-say { min-height: 1.4em; margin-top: 10px; max-width: none; font: var(--rg4-lab); letter-spacing: .12em; color: var(--text2); }
.rg4-q-say:empty { margin-top: 4px; }
.rg4-hits { margin-top: 6px; border-top: 1px solid var(--line); }
.rg4-hits li a { display: grid; gap: 4px; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.rg4-hit-c { font: 400 1.15rem/1.3 var(--serif); color: var(--text); }
.rg4-hit-c::after { content: ' \2193'; content: ' \2193' / ''; color: var(--teal); font: 500 .8em/1 var(--mono); }
.rg4-hit-t { font: var(--rg4-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-t); }
.rg4-hits li a:hover .rg4-hit-c, .rg4-hits li a:focus-visible .rg4-hit-c { text-decoration: underline 1px var(--teal); text-underline-offset: 4px; }
.rg4-none { margin-top: 10px; max-width: 46em; font: 400 .98rem/1.6 var(--sans); color: var(--text2); }
.rg4-none a { color: var(--text); text-decoration: underline 1px var(--teal); text-underline-offset: 3px; white-space: nowrap; }

/* the native index (open without JS) */
.rg4-index { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--line); }
.rg4-q[hidden] + .rg4-index { margin-top: 0; padding-top: 0; border-top: 0; }
.rg4-index summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none;
  font: 500 max(.72rem, 11px)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.rg4-index summary::-webkit-details-marker { display: none; }
.rg4-index summary::before { content: ''; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal);
  transform: rotate(-45deg); transition: transform .25s var(--ease); }
.rg4-index[open] summary::before { transform: rotate(45deg); }
.rg4-index ol { margin-top: 6px; column-gap: 32px; }
@media (min-width: 700px) { .rg4-index ol { columns: 2; } }
@media (min-width: 1100px) { .rg4-index ol { columns: 3; } }
.rg4-index li { break-inside: avoid; }
.rg4-index li a { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line);
  font: 400 .95rem/1.35 var(--sans); color: var(--text); text-decoration: none; }
.rg4-ix-n { flex: none; width: 2.4em; }
.rg4-ix-n::before { content: attr(data-l); content: attr(data-l) / ""; font: 500 max(.66rem, 11px)/1 var(--mono); letter-spacing: .14em; color: var(--text2); transition: color .25s; }
.rg4-index li a:hover .rg4-ix-n::before, .rg4-index li a:focus-visible .rg4-ix-n::before { color: var(--accent-t); }
.rg4-index li a:hover { color: var(--accent-t); }
.rg4-skip { margin-top: 14px; max-width: none; }
.rg4-skip a { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); text-decoration: none; }
.rg4-skip a::after { content: '\2193'; content: '\2193' / ''; color: var(--teal); }
.rg4-skip a:hover, .rg4-skip a:focus-visible { color: var(--text); }

/* the one sticky position bar (JS only; takes no layout space; leaves with .rg4-cats) */
.rg4-cats { position: relative; margin-top: 28px; }
.rg4-here { position: sticky; top: var(--rg4-hh); z-index: 6; height: 0; }
.rg4-here-in { position: absolute; left: 0; right: 0; top: 0; height: var(--rg4-bar); display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: rgba(11, 13, 16, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); border-top: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s, transform .3s, visibility 0s .3s; }
.rg4-here.is-on .rg4-here-in { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s; }
.rg4-here-at { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.rg4-here-at b { font-weight: 500; color: var(--accent-t); }
.rg4-here a { flex: none; display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); text-decoration: none; }
.rg4-here a.rg4-here-ix::after { content: '\2191'; content: '\2191' / ''; color: var(--teal); }
.rg4-here a.rg4-here-next::after { content: '\2193'; content: '\2193' / ''; color: var(--teal); }
.rg4-narrow { display: none; }
@media (max-width: 559px) { .rg4-wide { display: none; } .rg4-narrow { display: inline; } .rg4-here-in { gap: 12px; padding: 0 12px; } }

/* legend for the highlighter (one mark, one meaning: an example idea you can take) */
.rg4-key { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; max-width: none; }
.rg4-key i { flex: none; width: 22px; height: 10px; background: linear-gradient(transparent 20%, var(--rg4-hl) 20% 90%, transparent 90%); border-bottom: 1px solid rgba(25, 230, 207, .5); }
.rg4-key span::before { content: attr(data-l); content: attr(data-l) / ""; font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }

/* entry: numeral · identification (name + business types) · field notes (guidance + one highlighted example) */
.rg4-entry { position: relative; display: grid; grid-template-columns: 76px minmax(0, 5fr) minmax(0, 6fr); column-gap: 32px; padding: 32px 0;
  border-top: 1px solid var(--line); scroll-margin-top: 136px; transition: background .5s var(--ease), box-shadow .5s var(--ease); }
.rg4-key + .rg4-entry { border-top-color: var(--line2); }
.rg4-no::before { content: attr(data-l); content: attr(data-l) / ""; display: block; font: 400 3.4rem/1 var(--serif); letter-spacing: -.03em; color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 45%, transparent); transition: -webkit-text-stroke-color .8s var(--ease); }
.rg4-no::after { content: attr(data-r); content: attr(data-r) / ""; display: block; margin-top: 8px; font: 500 max(.66rem, 11px)/1 var(--mono); letter-spacing: .14em; color: var(--text2); }
.rg4-id h3 { margin: 0 0 14px; font: 400 clamp(1.4rem, 1.15rem + .8vw, 1.75rem)/1.18 var(--serif); letter-spacing: -.01em; color: var(--text); scroll-margin-top: 136px; }
.rg4-id h3:focus { outline: none; }
.rg4-id h3:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; }
.rg4 .rg4-types { max-width: none; font: 400 .98rem/1.7 var(--sans); color: var(--text2); }
.rg4-bt { color: var(--ink); transition: background .4s, color .4s; }
.rg4 .rg4-show { max-width: none; font: 400 1.05rem/1.72 var(--sans); color: var(--ink); }
.rg4-entry.is-one .rg4-show .rg4-bt { color: var(--text); }
.rg4-ex { color: var(--text); background: linear-gradient(transparent 60%, var(--rg4-hl) 60% 94%, transparent 94%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rg4-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; }
.rg4-add, .rg4-addline, .rg4-acts button { min-height: 44px; padding: 0 16px; background: transparent; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--teal) 55%, transparent); border-radius: 0; font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: background .25s, border-color .25s; }
.rg4-add::before, .rg4-addline::before { content: '+'; content: '+' / ''; margin-right: .6em; color: var(--teal); }
.rg4-add:hover, .rg4-addline:hover, .rg4-acts button:hover { border-color: var(--teal); background: rgba(25, 230, 207, .06); }
.rg4-add.is-added { background: rgba(25, 230, 207, .12); border-color: var(--teal); }
.rg4-add.is-added::before { content: '\2713'; content: '\2713' / ''; }
.rg4-golist { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); text-decoration: none; }
.rg4-golist::after { content: '\2193'; content: '\2193' / ''; color: var(--teal); }
.rg4-golist:hover { color: var(--accent-t); }
.rg4-entry.is-hit, .rg4-entry:target { box-shadow: inset 2px 0 0 var(--teal); background: linear-gradient(90deg, rgba(25, 230, 207, .06), transparent 55%); }
.rg4-bt.is-hit { color: var(--text); background: rgba(25, 230, 207, .16); box-shadow: 0 1px 0 var(--teal); }
@media (min-width: 900px) { .rg4-entry.is-hit, .rg4-entry:target { padding-left: 0; } }
@media (max-width: 899px) and (min-width: 700px) {
  .rg4-entry { grid-template-columns: 56px minmax(0, 1fr); }
  .rg4-no { grid-row: 1 / span 2; }
  .rg4-no::before { font-size: 2.8rem; }
  .rg4-id, .rg4-notes { grid-column: 2; }
  .rg4-notes { margin-top: 14px; }
}
@media (max-width: 699px) {
  .rg4-entry { display: block; padding: 28px 0; }
  .rg4-entry.is-hit, .rg4-entry:target { padding-left: 12px; margin-left: -12px; margin-right: -12px; padding-right: 12px; }
  .rg4-no { position: absolute; top: 24px; right: 0; }
  .rg4-entry.is-hit .rg4-no, .rg4-entry:target .rg4-no { right: 12px; }
  .rg4-no::before { font-size: 2.6rem; }
  .rg4-no::after { display: none; }
  .rg4-id h3 { padding-right: 64px; }
  .rg4-notes { margin-top: 16px; }
}

/* ---------------------------------------------------------------- 6. ch03: couplet, sample trace, purposes */
.rg4 .res-prose > p.rg4-split { font: 400 clamp(1.3rem, 1.1rem + .7vw, 1.65rem)/1.35 var(--serif); color: var(--text); letter-spacing: -.005em; }
.rg4 .res-prose > p.rg4-split + p { margin-top: 1.4em; }
.rg4 .res-prose > * + p.rg4-split { margin-top: 1.6em; }
@media (min-width: 700px) {
  .rg4 .res-prose > p.rg4-split { display: grid; grid-template-columns: 1fr 1fr; }
  .rg4-split > span:first-child { padding-right: 28px; }
  .rg4-split > span:last-child { padding-left: 28px; border-left: 1px solid var(--line2); }
}
@media (max-width: 699px) {
  .rg4-split > span { display: block; }
  .rg4-split > span:last-child { margin-top: .6em; padding-top: .6em; border-top: 1px solid var(--line2); }
}
.rg4-steps { position: relative; display: grid; }
.rg4-steps::before { content: ''; position: absolute; background: color-mix(in srgb, var(--teal) 45%, transparent); transition: transform 1s var(--ease) .1s; }
.rg4-step { position: relative; transition: opacity .7s var(--ease) calc(var(--k, 0) * .18s + .2s); }
.rg4-step::before { content: ''; position: absolute; width: 9px; height: 9px; background: var(--rg4-panel); border: 1px solid var(--teal); transform: rotate(45deg); }
.rg4-step b { display: block; font: 400 1.25rem/1.25 var(--serif); color: var(--text); }
.rg4-step .rg4-lab { margin-top: 8px; }
.rg4-pcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
@media (min-width: 760px) {
  .rg4-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rg4-steps::before { top: 13px; left: 0; right: 0; height: 1px; transform-origin: left; }
  .rg4-step { padding: 30px 18px 0 0; }
  .rg4-step::before { top: 9px; left: 0; }
}
@media (max-width: 759px) {
  .rg4-steps::before { left: 4px; top: 0; bottom: 0; width: 1px; transform-origin: top; }
  .rg4-step { padding: 0 0 18px 26px; }
  .rg4-step::before { left: 0; top: 6px; }
}
.rg4-pc { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 10px; border: 1px solid var(--line2); border-radius: 999px;
  font: var(--rg4-lab); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); }
.rg4-pc::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.rg4-pc.is-on { color: var(--text); border-color: color-mix(in srgb, var(--teal) 55%, transparent); }
.rg4-pc.is-on::before { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 8px var(--teal); }
.rg4-pc.is-open { border-style: dashed; }
.rg4-sample { margin-top: 28px; border-top: 1px solid var(--line2); }
.rg4-sl { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line2); transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (min-width: 760px) { .rg4-sl { grid-template-columns: 200px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 56px; padding: 12px 0; } }
.rg4-sl-k { font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.rg4-sl-t { font: italic 400 1.2rem/1.3 var(--serif); color: var(--text); }
.rg4-sl .rg4-pc { justify-self: start; }
.rg4-q-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px dashed var(--text2); border-radius: 50%; }
.rg4-q-mark::before { content: '?'; content: '?' / ''; font: 500 11px/1 var(--mono); color: var(--text2); }
.rg4-caret { display: inline-block; width: 1px; height: 1.1em; background: var(--teal); vertical-align: -.15em; }
.rg4-pur::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: .35em; border-radius: 50%; background: var(--teal); vertical-align: .12em; }

/* ---------------------------------------------------------------- 7. ch04: yield, price strips, recap table */
.rg4-yrs { display: grid; }
.rg4-yr { padding: 18px 0; border-top: 1px solid var(--line); }
.rg4-yr:first-child { border-top: 0; padding-top: 4px; }
@media (min-width: 760px) {
  .rg4-yr { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px 24px; align-items: start; }
  .rg4-yr > :not(.rg4-yr-k) { grid-column: 2; }   /* every lane (and the three-piece note) stays in the frames column */
  .rg4-yr .rg4-lane + .rg4-lane { margin-top: 0; }
}
@media (max-width: 759px) { .rg4-yr .rg4-lane { margin-top: 12px; } .rg4-yr.is-add .rg4-lane { margin-top: 0; } }
.rg4-yr-k b { display: block; font: 400 1.35rem/1.2 var(--serif); color: var(--text); }
.rg4-yr-k .rg4-lab { margin-top: 6px; color: var(--accent-t); }
.rg4-lane { display: grid; gap: 10px; padding: 8px 0 8px 14px; border-left: 2px solid var(--teal); }
.rg4-lane + .rg4-lane { margin-top: 10px; }
.rg4-lane.is-you { border-left-color: var(--rg4-you); }
.rg4-lane.is-you .rg4-lab { color: var(--rg4-you-t); }
.rg4-lane.is-add { border-left-color: rgba(25, 230, 207, .35); }
.rg4-lane-k { color: var(--accent-t); }
.rg4-lane.is-you .rg4-lane-k { color: var(--rg4-you-t); }
.rg4-gf { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 12px; align-items: center; }
@media (max-width: 559px) { .rg4-gf { display: block; } .rg4-gf .rg4-frs { margin-top: 8px; } }
.rg4-frs { display: flex; flex-wrap: wrap; gap: 4px; transition: clip-path .9s linear calc(var(--k, 0) * .25s + .2s); }
@media (max-width: 559px) { .rg4-frs { max-width: calc(10 * 18px); } .rg4-frs[data-f="clip"], .rg4-frs[data-f="story"] { max-width: calc(10 * 16px); } }   /* 10 frames a line */
.rg4-frs i { display: block; flex: none; }
.rg4-frs[data-f="reel"] i { width: 14px; height: 24px; border: 1px solid var(--teal); border-radius: 2px; }
.rg4-frs[data-f="car"] i { width: 14px; height: 14px; margin: 6px 0 4px; border: 1px solid var(--teal); box-shadow: 3px -3px 0 -1px var(--rg4-panel), 3px -3px 0 0 var(--line2); }
.rg4-frs[data-f="story"] i { width: 12px; height: 21px; background: rgba(25, 230, 207, .35); border: 1px solid var(--teal); border-radius: 2px; margin-top: 1px; }
.rg4-frs[data-f="clip"] i { width: 12px; height: 21px; border: 1px solid rgba(25, 230, 207, .55); border-radius: 2px; margin-top: 1px; }
.rg4-frs[data-f="prompt"] i { width: 14px; height: 18px; margin-top: 3px; border: 1px solid var(--rg4-you);
  background: linear-gradient(var(--rg4-you-t), var(--rg4-you-t)) 3px 5px / 7px 1px no-repeat, linear-gradient(var(--rg4-you-t), var(--rg4-you-t)) 3px 9px / 5px 1px no-repeat; }
.rg4-three { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-left: 16px; }
.rg4-three .rg4-frs { position: relative; padding-bottom: 6px; border-bottom: 1px solid var(--teal); }
.rg4-three .rg4-frs::before, .rg4-three .rg4-frs::after { content: ''; position: absolute; bottom: -1px; width: 1px; height: 5px; background: var(--teal); }
.rg4-three .rg4-frs::before { left: 0; } .rg4-three .rg4-frs::after { right: 0; }
.rg4-three .rg4-lab { flex: 1; min-width: 0; }
.rg4 .res-prose > h3.rg4-pk { margin: 2.2em 0 .5em; padding-top: 18px; border-top: 1px solid var(--line); font: 400 clamp(1.55rem, 1.25rem + 1vw, 2rem)/1.15 var(--serif);
  letter-spacing: -.01em; color: var(--text); }
.rg4 .res-prose > .rg4-yield + h3.rg4-pk { margin-top: 1.4em; }
.rg4 .res-prose > p.rg4-price { margin-top: .3em; padding: 10px 0 10px 16px; border-left: 2px solid var(--accent); font: 600 1rem/1.5 var(--sans); color: var(--text); }
.rg4 .res-prose > p.rg4-price + p { margin-top: .9em; }
.rg4-t thead th:first-child { width: 30%; }
.rg4-t thead th:last-child { width: 16%; }
.rg4-t tfoot th, .rg4-t tfoot td { padding: 16px; border-top: 1px solid var(--line2); font: 400 .95rem/1.55 var(--sans); color: var(--text2); text-align: left; }
.rg4-t tfoot th { font: 400 1.05rem/1.35 var(--serif); color: var(--text); }
@media (max-width: 760px) {
  .rg4-t tfoot, .rg4-t tfoot tr, .rg4-t tfoot th, .rg4-t tfoot td { display: block; }
  .rg4-t tfoot tr { margin-top: 12px; padding: 18px; border: 1px solid var(--line); background: rgba(21, 25, 31, .7); }
  .rg4-t tfoot th { padding: 0; border: 0; }
  .rg4-t tfoot td { padding: 10px 0 0; border: 0; }
}

/* ---------------------------------------------------------------- 8. ch05: fit rows */
.rg4-fit ol { display: grid; }
.rg4-fit-r { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.rg4-fit-r:first-child { border-top: 0; padding-top: 4px; }
.rg4-fit-a { font: 400 .98rem/1.5 var(--sans); color: var(--text2); }
.rg4-fit-r i { position: relative; display: block; background: var(--teal); transition: transform .7s var(--ease) .15s; }
.rg4-fit-r i::after { content: ''; position: absolute; width: 7px; height: 7px; border-right: 1px solid var(--teal); border-bottom: 1px solid var(--teal); }
.rg4-fit-b { font: 400 1.25rem/1.3 var(--serif); color: var(--text); transition: opacity .7s var(--ease) .45s; }
@media (min-width: 700px) {
  .rg4-fit-r { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 12px; align-items: center; }
  .rg4-fit-r i { height: 1px; transform-origin: left; }
  .rg4-fit-r i::after { right: 0; top: -3px; transform: rotate(-45deg); }
}
@media (max-width: 699px) {
  .rg4-fit-r i { width: 1px; height: 22px; margin-left: 4px; transform-origin: top; }
  .rg4-fit-r i::after { left: -3px; bottom: 0; transform: rotate(45deg); }
}

/* ---------------------------------------------------------------- 9. ch06: superscripts, starter list, finale */
.rg4-sup::after { content: attr(data-n); content: attr(data-n) / ""; display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; margin-left: .3em;
  border: 1px solid color-mix(in srgb, var(--teal) 60%, transparent); font: 500 max(.6em, 11px)/1 var(--mono); color: var(--teal); vertical-align: .12em; }
.rg4-sheet { padding-top: 28px; scroll-margin-top: 84px; }
.rg4-sheet-cast { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 18px; }
.rg4-sheet-cast .rg4-role { margin-bottom: 0; }
.rg4-role.is-past { color: var(--text2); opacity: .55; }
.rg4-role.is-you { color: var(--accent-t); padding: 6px 10px; border: 1px dashed color-mix(in srgb, var(--teal) 55%, transparent); }
.rg4-sheet h3 { margin: 0 0 8px; font: 400 clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem)/1.1 var(--serif); letter-spacing: -.01em; color: var(--text); }
.rg4-sheet-lede, .rg4-priv { max-width: 40em; font: 400 .98rem/1.6 var(--sans); color: var(--text2); }
.rg4-priv { margin-top: 6px; font-size: .92rem; }
.rg4-biz { display: grid; gap: 8px; max-width: 520px; margin: 22px 0 8px; }
.rg4-biz label, .rg4-psel label { font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.rg4-opt { letter-spacing: .08em; text-transform: none; }
.rg4-sheet select { min-width: 0; min-height: 44px; padding: 0 36px 0 12px; font: 400 1rem/1.2 var(--sans); color: var(--text); border: 1px solid var(--line2); border-radius: 0;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--rg4-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2319E6CF' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px; }
.rg4-sheet select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.rg4-sheet option { color: #F4F3EF; background: #15191F; }
.rg4-grp { min-width: 0; margin: 26px 0 0; padding: 0; border: 0; }
.rg4-grp legend { margin-bottom: 6px; padding: 0; font: 500 max(.74rem, 11px)/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-t); }
.rg4-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line2); }
.rg4-grp > .rg4-row:first-of-type, .rg4-more-rows > .rg4-row:first-child { border-top: 1px solid var(--line2); }
@media (min-width: 760px) {
  .rg4-row { grid-template-columns: 190px minmax(0, 1fr) 240px; gap: 8px 16px; align-items: start; }
  .rg4-row .rg4-rm { grid-column: 2 / -1; justify-self: end; }
}
.rg4-row-k { display: flex; gap: 10px; align-items: baseline; padding-top: 10px; font: 500 .9rem/1.3 var(--sans); color: var(--text); }
.rg4-row-k b { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; border: 1px solid color-mix(in srgb, var(--teal) 60%, transparent);
  font: 500 11px/1 var(--mono); color: var(--teal); align-self: center; }
.rg4-row-k { align-items: center; }
.rg4-row-src { display: block; margin-bottom: 4px; font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-t); }
.rg4-row textarea { width: 100%; min-height: 64px; resize: vertical; padding: 10px 12px; font: 400 1rem/1.5 var(--sans); color: var(--text);
  background: rgba(244, 243, 239, .03); border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; }
.rg4-row textarea:focus { outline: none; border-bottom-color: var(--teal); box-shadow: 0 1px 0 var(--teal); }
.rg4-row textarea::placeholder { color: var(--text2); opacity: .75; }
.rg4-psel { display: flex; align-items: center; gap: 10px; }
.rg4-psel select { flex: 1; }
@media (min-width: 760px) { .rg4-psel { flex-direction: column; align-items: stretch; gap: 6px; } }
.rg4-rm { justify-self: start; min-height: 44px; padding: 0 2px; background: none; border: 0; font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text2); text-decoration: underline 1px; text-underline-offset: 4px; cursor: pointer; }
.rg4-rm:hover { color: var(--text); }
.rg4-tools { margin-top: 14px; }
.rg4-cov { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.rg4-lamps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 559px) { .rg4-lamps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rg4-lamps li { display: flex; gap: 8px; align-items: center; font: var(--rg4-lab); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); }
.rg4-lamps li::before { content: ''; flex: none; width: 9px; height: 9px; border: 1px solid var(--text2); border-radius: 50%; transition: background .3s, box-shadow .3s, border-color .3s; }
.rg4-lamps li::after { content: attr(data-l); content: attr(data-l) / ""; }
.rg4-lamps li.is-lit { color: var(--text); }
.rg4-lamps li.is-lit::before { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 8px var(--teal); }
.rg4-cov-say { margin-top: 10px; max-width: none; font: 400 .98rem/1.5 var(--sans); color: var(--text); }
.rg4-mail { display: grid; gap: 8px; max-width: 640px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line2); }
.rg4-mail-h { margin: 0; font: 400 clamp(1.25rem, 1.1rem + .6vw, 1.55rem)/1.2 var(--serif); color: var(--text); }
.rg4-mail-h .rg4-opt { font: 400 .9rem/1 var(--sans); color: var(--text2); }
.rg4-mail-l { margin-top: 6px; font: 500 max(.74rem, 11px)/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-t); }
.rg4-mail-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .rg4-mail-row { grid-template-columns: minmax(0, 1fr) auto; } }
.rg4-send { min-height: 52px; padding: 0 22px; background: rgba(25, 230, 207, .08); color: var(--text); border: 1px solid var(--teal); border-radius: 0;
  font: var(--rg4-lab); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .25s; }
.rg4-send::after { content: ' \2192'; content: ' \2192' / ''; color: var(--teal); }
.rg4-send:hover { background: rgba(25, 230, 207, .16); }
.rg4-send:disabled { opacity: .6; cursor: progress; }
.rg4-mail-hint { max-width: 40em; font: 400 .92rem/1.55 var(--sans); color: var(--text2); }
.rg4-mail-hint a { color: var(--text); text-decoration: underline 1px var(--teal); text-underline-offset: 3px; white-space: nowrap; }
#rg4-email { width: 100%; min-height: 52px; padding: 0 16px; font: 400 1.05rem/1 var(--sans); color: var(--text); background: rgba(244, 243, 239, .04);
  border: 1px solid var(--line2); border-radius: 0; caret-color: var(--teal); }
#rg4-email:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
#rg4-email[aria-invalid="true"] { border-color: #FF8A8A; box-shadow: 0 0 0 1px #FF8A8A; }
.rg4-mail-err { font: 400 .95rem/1.5 var(--sans); color: #FFB3B3; }
.rg4-mail-err:empty, .rg4-mail-ok:empty { display: none; }
.rg4-mail-ok { font: 400 .95rem/1.5 var(--sans); color: var(--text); }
.rg4-mail-ok::before { content: '\2713'; content: '\2713' / ''; margin-right: .5em; color: var(--teal); }
.rg4-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* a field for bots only: people never see it */
.rg4-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (max-width: 559px) { .rg4-acts { display: grid; grid-template-columns: 1fr 1fr; } }
.rg4-acts button[data-armed] { border-color: var(--teal); background: rgba(25, 230, 207, .12); }
.rg4-acts-say { margin-top: 12px; min-height: 1.5em; max-width: none; font: 400 .95rem/1.5 var(--sans); color: var(--text); }
.rg4-also { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin-top: 28px; }
.rg4-printroot { display: none; }
.rg4 .res-rel .res-one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
  .rg4 .res-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; align-items: stretch; }
  .rg4 .res-rel-l { grid-column: 1 / -1; }
  .rg4 .res-rel .res-one + .res-one { margin-top: 0; }
  .rg4 .res-rel .res-rel-t { font-size: clamp(1.4rem, 1.05rem + .8vw, 1.75rem); }
  .rg4 .res-rel .res-topics { min-height: 2.9em; }
}

/* ---------------------------------------------------------------- 10. one-shot reveals (pre-states only; default above is complete) */
@media (prefers-reduced-motion: no-preference) {
  /* hero plate: keyed to the plate's own .in, so on phones the marks draw when the plate is seen */
  .rg4-idp .rg4-dr { transition: stroke-dashoffset 1.1s var(--ease) calc(.25s + var(--k, 0) * .14s); }
  .rg4-idp .rg4-tg { transition: opacity .8s var(--ease) calc(.35s + var(--k, 0) * .14s); }
  html.ready.res-motion .rg4-plate:not(.in) .rg4-idp .rg4-dr { stroke-dashoffset: 1; }
  html.ready.res-motion .rg4-plate:not(.in) .rg4-idp .rg4-tg { opacity: .35; }
  /* intro */
  html.ready .rg4-cast:not(.in) .rg4-role { opacity: .35; }
  html.ready .rg4-cast:not(.in) .rg4-c { border-top-color: transparent; }
  html.ready .rg4-line:not(.in) .rg4-line-a { transform: scaleX(0); }
  html.ready .rg4-line:not(.in) .rg4-line-d { transform: scaleY(0); }
  html.ready .rg4-line:not(.in) .rg4-line-b { opacity: 0; }
  html.ready .rg4-line:not(.in) [data-l]::before { opacity: .35; }
  /* ch01: the frames develop in order */
  html.ready .rg4-views:not(.in) .rg4-frame { opacity: .35; }
  /* directory: the highlighter sweeps once; the text is always there */
  .rg4-ex { transition: background-size 1.1s var(--ease) .35s; }
  html.ready .rg4-entry:not(.in) .rg4-ex { background-size: 0 100%; }
  html.ready .rg4-entry:not(.in) .rg4-no::before { -webkit-text-stroke-color: transparent; }
  /* ch03 (one-shot per row, so a tall phone stack never animates off-screen) */
  html.ready .rg4-steps:not(.in)::before { transform: scaleX(0); }
  html.ready .rg4-steps:not(.in) .rg4-step { opacity: .35; }
  html.ready .rg4-sl:not(.in) { opacity: .35; transform: translateX(-10px); }
  html.ready .rg4-sl.is-blank.in .rg4-caret { animation: resBlink 1.1s steps(1) .9s 4; }
  /* ch04: frames wipe in like counting */
  html.ready .rg4-yr:not(.in) .rg4-frs { clip-path: inset(0 100% 0 0); }
  html.ready .rg4-yr:not(.in) .rg4-lab { opacity: .35; }
  .rg4-yr .rg4-lab { transition: opacity .7s var(--ease) .15s; }
  /* ch05 */
  html.ready .rg4-fit-r:not(.in) i { transform: scaleX(0); }
  html.ready .rg4-fit-r:not(.in) .rg4-fit-b { opacity: .35; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 759px) {
  html.ready .rg4-steps:not(.in)::before { transform: scaleY(0); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 699px) {
  html.ready .rg4-fit-r:not(.in) i { transform: scaleY(0); }
}

/* ---------------------------------------------------------------- 11. reduced motion (belt and braces) */
@media (prefers-reduced-motion: reduce) {
  .rg4 [class*="rg4-"], .rg4 [class*="rg4-"]::before, .rg4 [class*="rg4-"]::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- 12. forced colours */
@media (forced-colors: active) {
  .rg4-add.is-added, .rg4-pc.is-on::before, .rg4-lamps li.is-lit::before, .rg4-acts button[data-armed] {
    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .rg4-sign, .rg4-slot.is-name::after, .rg4-slot.is-logo::after, .rg4-slot.is-list i, .rg4-line-b, .rg4-pc.is-open, .rg4-q-mark, .rg4-role.is-you { border-color: CanvasText; }
  .rg4-ex, .rg4-bt.is-hit { forced-color-adjust: none; background: Mark; color: MarkText; }
}

/* ---------------------------------------------------------------- 13. print */
@media print {
  .rg4-q, .rg4-here, .rg4-act, .rg4-tools, .rg4-cov, .rg4-acts, .rg4-acts-say, .rg4-mail, .rg4-skip, .rg4-key, .rg4-line, .rg4-role, .rg4-sheet-cast, .rg4-idp,
  .rg4-views-g, .rg4-trace, .rg4-yield, .rg4-fit, .rg4-start, .rg4-also { display: none !important; }
  .rg4-dir, .rg4 .res-prose > p.rg4-cast { width: auto; margin-inline: 0; display: block; }
  .rg4-c { display: block; border: 0; padding: 0; }
  .rg4-c + .rg4-c { margin-top: .5em; }
  .rg4-find { padding: 0; border: 0; background: none; }
  .rg4-entry { display: block; break-inside: avoid; padding: 12pt 0; border-top: 1px solid #999; box-shadow: none !important; background: none !important; }
  .rg4-no { display: none; }
  .rg4-id h3, .rg4-types, .rg4-show, .rg4-bt, .rg4-split, .rg4-close, .rg4-sheet h3, .rg4-sheet-lede, .rg4-priv, .rg4-grp legend, .rg4-row-k,
  .rg4 .res-prose > h3.rg4-pk, .rg4 .res-prose > p.rg4-price, .rg4-index li a { color: #000 !important; }
  .rg4-ex { background: none !important; text-decoration: underline; }
  .rg4-index summary { display: none; }
  .rg4-index > nav { display: block; }
  .rg4-sheet { border: 1px solid #999; background: none; }
  .rg4-sheet textarea, .rg4-sheet select { border: 0; border-bottom: 1px solid #000; background: none; color: #000; }
  html.rg4-print-sheet body > :not(.rg4-printroot) { display: none !important; }
  html.rg4-print-sheet .rg4-printroot { display: block !important; }
  .rg4-printroot pre { margin: 0; white-space: pre-wrap; font: 11pt/1.55 Georgia, serif; color: #000; }
}