/* "Content is scaling. Review capacity isn't" panel on /index-test-temp, the
   third section. Built from review-gap-panel-handoff.md (Downloads) and its
   reference mock; the brand hub (/about/brand, #ai-layer and #web-color) wins
   where they differ, e.g. corner marks sit 6px outside the frame.

   Colors are role tokens scoped to the section (light by default, dark under
   data-theme="dark"); the SVG reads them through classes, never hex.
   The chart's words are HTML laid over the SVG and sized in container units,
   so they track the drawing on desktop but never drop below a legible size on
   phones (the drawing itself is ~0.35x there). */

.rg-section {
  --rg-surface: #FFFFFF;
  --rg-raised: #F8F7F7;
  --rg-ink: #201F1D;
  --rg-ink-muted: #6B665E;
  --rg-label: #0A7891;
  --rg-curve: #0C505D;               /* Teal Shade */
  --rg-accent-ink: #201F1D;          /* text on the Citron band */
  --rg-line: rgba(32, 31, 29, .08);
  --rg-line-strong: rgba(32, 31, 29, .15);
  --rg-tick: rgba(32, 31, 29, .38);
  --rg-hatch: rgba(10, 120, 145, .22);
  --rg-halo: rgba(10, 120, 145, .15);
  --rg-chip: #FFFFFF;
  --rg-ships: #6B665E;               /* Ivory Dark: what ships today */
  --rg-help: #FFFA66;                /* Citron Highlight: where Stensul can help */
  /* Chip tints: each chip hints at the area it names. */
  --rg-chip-gap-bg: #F1FAFB;   --rg-chip-gap-line: rgba(10, 120, 145, .35);   --rg-chip-gap-ink: #0A7891;
  /* Phase-two notes take their area's own colour (Rurik, 2026-10-12): solid grey
     with white text for what ships, solid citron for what Stensul unblocks. */
  --rg-chip-ships-bg: #6B665E; --rg-chip-ships-line: #6B665E;              --rg-chip-ships-ink: #FFFFFF;
  --rg-chip-help-bg: #FFFA66;  --rg-chip-help-line: rgba(108, 117, 0, .55); --rg-chip-help-ink: #3D4600;
  --rg-help-line: rgba(108, 117, 0, .3);   /* Citron Medium */
  --rg-ships-line: rgba(32, 31, 29, .35);
  --rg-glow-core: rgba(10, 120, 145, .20);
  --rg-glow-cyan: rgba(201, 254, 255, .55);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--rg-surface);
  color: var(--rg-ink);
}

/* Dark sections: brand dark role values. The curve moves to Teal Highlight,
   since Teal Shade disappears on Teal Dark, and the corner glow is light-only. */
[data-theme="dark"] .rg-section,
.rg-section[data-theme="dark"] {
  --rg-surface: #0D2828;
  --rg-raised: rgba(255, 255, 255, .04);
  --rg-ink: #FFFFFF;
  --rg-ink-muted: rgba(255, 255, 255, .72);
  --rg-label: #C9FEFF;
  --rg-curve: #C9FEFF;
  --rg-line: rgba(201, 254, 255, .08);
  --rg-line-strong: rgba(201, 254, 255, .16);
  --rg-tick: rgba(201, 254, 255, .42);
  --rg-hatch: rgba(201, 254, 255, .18);
  --rg-halo: rgba(201, 254, 255, .18);
  --rg-chip: #0D2828;
  --rg-ships: rgba(255, 255, 255, .55);
  --rg-ships-line: rgba(255, 255, 255, .35);
  --rg-chip-gap-bg: rgba(201, 254, 255, .08);  --rg-chip-gap-line: rgba(201, 254, 255, .35);  --rg-chip-gap-ink: #C9FEFF;
  --rg-chip-ships-bg: rgba(255, 255, 255, .55); --rg-chip-ships-line: transparent; --rg-chip-ships-ink: #0D2828;
  --rg-chip-help-bg: #FFFA66; --rg-chip-help-line: transparent; --rg-chip-help-ink: #201F1D;
  --rg-glow-core: transparent;
  --rg-glow-cyan: transparent;
}

/* Teal-to-cyan corner glow, top right, well clear of the headline. */
.rg-section::before {
  content: "";
  position: absolute;
  top: -320px;
  right: -300px;
  z-index: -1;
  width: 760px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--rg-glow-core), var(--rg-glow-cyan) 55%, transparent 100%);
  pointer-events: none;
}

/* Stacked section (css/layout.css): heading on top, chart below. Side margins
   and width come from layout.css. */
.rg-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--l-section-gap, 48px);
  padding-top: 96px;
  padding-bottom: 96px;
}

/* Shared .section-heading type (H2, css/type.css). At the standard 1.26 the
   band on line two still clears the descenders of "scaling." above it. */
.rg-section .rg-heading {
  color: var(--rg-ink);
}

/* The highlighted phrase stays on one line, so the band is one piece. */
/* Eyebrow in the section's label colour, so it follows the dark theme too. */
.rg-section .eyebrow { color: var(--rg-label); }

.rg-section .rg-heading .highlight { color: var(--rg-accent-ink); white-space: nowrap; }

/* ---------- Chart frame ---------- */

/* Portrait chart (phones, tablets) capped at 720px; from desktop the landscape
   chart spans the content width. */
.rg-figure {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 720px;
}

.rg-chart--wide { display: none; }

@media (min-width: 1024px) {
  .rg-figure { max-width: none; }
  .rg-chart--tall { display: none; }
  .rg-chart--wide { display: block; }
}

.rg-frame {
  position: relative;
  border: 1px solid var(--rg-line-strong);
  border-radius: 4px;
  background: var(--rg-raised);
}

/* L-shaped ticks 6px outside each corner, so corners read as grid intersections. */
.rg-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--rg-tick);
  pointer-events: none;
}

.rg-corner--tl { top: -7px; left: -7px; border-width: 1.5px 0 0 1.5px; }
.rg-corner--tr { top: -7px; right: -7px; border-width: 1.5px 1.5px 0 0; }
.rg-corner--bl { bottom: -7px; left: -7px; border-width: 0 0 1.5px 1.5px; }
.rg-corner--br { bottom: -7px; right: -7px; border-width: 0 1.5px 1.5px 0; }

.rg-chart {
  position: relative;
  container-type: inline-size;
}

.rg-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- SVG parts (all colors from the tokens above) ---------- */

.rg-grid-line { fill: none; stroke: var(--rg-line); stroke-width: 1; }
.rg-hatch-line { stroke: var(--rg-hatch); stroke-width: 1.75; }
.rg-stop { stop-color: var(--rg-curve); }
.rg-stop--top { stop-opacity: .12; }
.rg-stop--bottom { stop-opacity: .03; }

.rg-reviewers {
  stroke: var(--rg-ink-muted);
  stroke-linecap: round;
}

.rg-curve {
  fill: none;
  stroke: var(--rg-curve);
  stroke-linecap: round;
}

/* Line weights per chart, in viewBox units. The portrait chart is drawn
   smaller (about 0.37x on a phone), so its lines are a little heavier in units
   to land at a similar on-screen weight. */
.rg-chart--tall .rg-curve { stroke-width: 5; }
.rg-chart--tall .rg-reviewers { stroke-width: 3; stroke-dasharray: 11 9; }
.rg-chart--wide .rg-curve { stroke-width: 4; }
.rg-chart--wide .rg-reviewers { stroke-width: 2.5; stroke-dasharray: 9 7; }

.rg-dot-start { fill: var(--rg-surface); stroke: var(--rg-curve); stroke-width: 2.5; }
/* Both lines end in a dot: the content line's with a soft halo. */
.rg-dot-halo { fill: var(--rg-halo); }
.rg-dot-end { fill: var(--rg-curve); }
.rg-dot-reviewers { fill: var(--rg-ink-muted); }

.rg-axis { stroke: var(--rg-tick); stroke-width: 2; stroke-linecap: round; fill: none; }
.rg-arrowhead { fill: none; stroke: var(--rg-tick); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Labels over the SVG ---------- */
/* Positions are viewBox coordinates as percentages: the portrait chart is
   934 x 958 (the mock), the landscape one 1280 x 560. Sizes are viewBox units
   in cqw, with a floor so phone sizes stay legible. */

.rg-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rg-labels > * {
  position: absolute;
  margin: 0;
  white-space: nowrap;
}

.rg-mono {
  font-family: 'DM Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rg-ink-muted);
}

/* Series labels in the H4 style, matching "Govern centrally. Enforce
   everywhere." in the platform diagram (20 / 18 / 18, Semibold). */
.rg-series {
  font-family: 'Synapse', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--type-h4);
  font-weight: 600;
  line-height: var(--type-h4-lh);
  letter-spacing: var(--type-h4-ls);
}

.rg-content { color: var(--rg-curve); }
.rg-people { color: var(--rg-ink); }

.rg-chip {
  transform: translate(-50%, -50%);   /* left/top give the chip's centre */
  display: flex;
  align-items: center;
  gap: .9em;
  padding: .7em 1.15em;
  border: 1px solid var(--rg-line-strong);
  border-radius: 10px;
  background: var(--rg-chip);
  font-family: 'DM Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rg-label);
}


/* One note style for all three (Rurik, 2026-10-12: the notes must look related):
   same corners, padding, type and border; each takes a light tint of the area it names:
   teal for the unreviewed gap, grey for what ships, citron for where
   Stensul helps (dark olive text, since citron itself is too light to read). */
.rg-chip--gap { background: var(--rg-chip-gap-bg); border-color: var(--rg-chip-gap-line); color: var(--rg-chip-gap-ink); }
.rg-chip--ships { background: var(--rg-chip-ships-bg); border-color: var(--rg-chip-ships-line); color: var(--rg-chip-ships-ink); }
.rg-chip--help { background: var(--rg-chip-help-bg); border-color: var(--rg-chip-help-line); color: var(--rg-chip-help-ink); }

/* The two phase-two notes (Rurik, 2026-10-12): "This is what / Stensul
   unblocks" (citron) above "This is the most / you can ship today" (grey), both
   two lines, hugging their text and centred on one vertical line. The centre
   sits half the grey note's width (--rg-note-w) in from --rg-notes-r (a % of the
   chart, near the shading's right edge). The grey note's bottom sits a little
   above the grey band, with a tiny centred arrow pointing down at it; the citron
   note sits above the grey one. Bottoms are set per chart below. */
.rg-chip:is(.rg-chip--ships, .rg-chip--help) {
  left: calc(100% - var(--rg-notes-r) - var(--rg-note-w) / 2);
  right: auto;
  top: auto;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1.2;
  text-align: center;
}
.rg-labels { --rg-note-w: 15.1em; }   /* the grey note's width */

/* The arrow: a short centred line from the note's bottom edge, ending in a
   chevron. js/review-gap.js sets its height so the tip stops 3px above the
   band; --rg-arrow-h is the fallback. Drawn in the band's own grey. */
.rg-ships-arrow {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: var(--rg-arrow-h, 6px);
  margin-left: -.75px;
  border-left: 1.5px solid var(--rg-ships);
  pointer-events: none;
}

.rg-ships-arrow::after {
  content: "";
  position: absolute;
  left: calc(-.2em - 1px);
  bottom: 1px;
  width: .32em;
  height: .32em;
  border-right: 1.5px solid var(--rg-ships);
  border-bottom: 1.5px solid var(--rg-ships);
  transform: rotate(45deg);
}

/* Portrait (934 x 958). Baselines at y=80 and y=930; mono descenders ~.2em. */
.rg-chart--tall .rg-mono { font-size: max(12px, 2.195cqw); }      /* 20.5 units */
.rg-chart--tall .rg-chip { font-size: max(12px, 1.82cqw); }
/* (Rurik, 2026-10-12) "Unreviewed gap" near the shaded area's right edge, about
   halfway up the gap (centre 734, 600; the curve is at x=585 there). "What ships
   today" ends at x=846 like "People available to review" below it, straddling the
   grey band's top edge. Later the same day: both notes inset 20 units from the
   shading's right edge (x=826) and up a little: "What ships today" centred at
   y=948 with its arrow down to the band (~967), the card's bottom at y=896. */
.rg-chart--tall .rg-chip--gap { left: 78.59%; top: 50.08%; }
/* Notes end near x=836; the grey note's bottom ~15 units above the band (~968). */
.rg-chart--tall .rg-labels { --rg-notes-r: 10.49%; }
.rg-chart--tall .rg-chip--ships { bottom: 20.45%; }
.rg-chart--tall .rg-chip--help { bottom: calc(20.45% + 3.8em + 10px); }
.rg-chart--tall .rg-volume { left: 6.852%; bottom: calc(100% - 7.28%); }
.rg-chart--tall .rg-today { left: 6.852%; bottom: 1.92%; }
.rg-chart--tall .rg-grows { right: 6.852%; bottom: 1.92%; }
/* Lines run to x=846, just short of the axis arrow. (Rurik, 2026-10-12)
   "AI-generated content" sits nearer the curve's middle: left x=64 (with
   "Volume" and "Today"), bottom y=540, where a phone-size label still ends left
   of the curve (x=624 there). "People available to review" starts on the same
   left edge under the dashed line. */
.rg-chart--tall .rg-content { left: 6.852%; bottom: 54.92%; }
.rg-chart--tall .rg-people { left: 6.852%; top: 85.81%; }

/* On a narrow chart the chip is relatively larger: drop it to y=668, where
   the gap is wider, so it never crosses the curve. */
/* On a narrow chart the chips wrap to two lines, so they fit inside the gap. */
@container (max-width: 560px) {
  .rg-chart--tall .rg-chip {
    max-width: 8em;
    padding: .55em .9em;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .04em;
    text-align: center;
    white-space: normal;
  }

  /* "What ships today" stays on one line on the band (above "People available
     to review"); the shared gap/helps spot moves up and right (centre 710, 575)
     so the two-line chips stay clear of both the curve and that chip. */
  .rg-chart--tall .rg-chip--gap { left: 77.2%; top: 54.26%; }

  /* Phase two, a step smaller (10px). "What ships today" keeps its tablet
     spot across the band's top edge. The card is wider than the yellow here,
     so it sits right above that chip (bottom = chip centre 74.95% + half its
     ~23px height + 4px) and runs past the yellow's right edge to 6px inside
     the frame, clear of the curve on its left (Rurik, 2026-10-10). */
  .rg-chart--tall .rg-chip--ships {
    max-width: none;
    padding: .55em .6em .55em .5em;
    font-size: 10px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .rg-chart--tall .rg-chip.rg-chip--help {
    bottom: calc(21.1% + 3.4em + 8px);
    max-width: none;
    padding: .55em .6em .55em .5em;
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1.15;
    white-space: nowrap;
  }

  /* On a phone the notes end 4px inside the frame (no room to inset); the grey
     note's bottom sits ~25 units above the band, the citron note above it. */
  .rg-chart--tall .rg-labels { --rg-note-w: 12.1em; --rg-notes-r: 4px; }
  .rg-chart--tall .rg-chip--ships { bottom: 21.1%; line-height: 1.15; }
}

/* Landscape (1280 x 560): plot from (64, 440) to (1190, 80), running to just
   short of the axis arrow (x=1214); axis at y=496. */
.rg-chart--wide .rg-mono { font-size: max(12px, 1.02cqw); }       /* 13 units */
.rg-chart--wide .rg-chip { font-size: max(12px, 1.02cqw); }
/* (Rurik, 2026-10-12) "Unreviewed gap" near the shaded area's right edge, about
   halfway up it (centre 1090, 253; the curve is at x=853 there). "What ships
   today" ends at x=1190 like "People available to review" below it, straddling
   the grey band's top edge (centre y=421), clear of the dashed line at 440.
   Later the same day: both notes inset 20 units from the shading's right edge
   (x=1170) and up a little: "What ships today" centred at y=400 with its arrow
   down into the band (~427), the card's bottom at y=355. */
.rg-chart--wide .rg-chip--gap { left: 85.16%; top: 45.18%; }
/* Notes end near x=1180; the grey note's bottom ~12 units above the band (~427). */
.rg-chart--wide .rg-labels { --rg-notes-r: 7.81%; }
.rg-chart--wide .rg-chip--ships { bottom: 25.9%; }
.rg-chart--wide .rg-chip--help { bottom: calc(25.9% + 3.8em + 10px); }
/* 1024-1279: the chips hit their 12px floor and are larger against the chart,
   so the notes sit a little closer to the edge. */
@media (max-width: 1279.98px) {
  .rg-chart--wide .rg-labels { --rg-notes-r: 7.42%; }
}
.rg-chart--wide .rg-volume { left: 5%; bottom: calc(100% - 9.3%); }
.rg-chart--wide .rg-today { left: 5%; bottom: 3.6%; }
.rg-chart--wide .rg-grows { right: 5%; bottom: 3.6%; }
/* (Rurik, 2026-10-12) "AI-generated content" above the curve's middle (the
   midpoint is 673, 326): left x=400, bottom y=305, so even the larger
   1024-1279 label ends left of the curve (x=742 at that height). "People available to review" starts on the same left edge,
   top y=450, between the dashed line (440) and the axis (496). */
.rg-chart--wide .rg-content { left: 31.25%; bottom: 45.54%; }
.rg-chart--wide .rg-people { left: 31.25%; top: 80.36%; }

/* ---------- Motion: four phases, once, about 5s ---------- */
/* js/review-gap.js adds .rg-anim (only without reduced motion) and .is-drawn
   when the chart scrolls into view. Without it the final state shows.
     1  0.0s   the teal content line draws, its arrowhead lands (1.05s)
     2  1.3s   "AI-generated content"
     3  1.9s   the dashed reviewer line wipes in left to right, its arrowhead
               lands (2.85s), then "People available to review" (3.0s)
     4  3.5s   the gap: gradient fades, hatch sweeps left to right; the
               "Unreviewed gap" chip follows (4.4s)
   The dashed line can't use the dash-offset draw (its dasharray makes the
   dashes), so it and the hatch are revealed with a clip-path wipe. */

/* Hidden state: applied instantly when .rg-anim is added. The timed
   transitions live only on .is-drawn, so hiding never waits on a delay. */
.rg-anim .rg-curve { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rg-anim :is(.rg-reviewers, .rg-hatch) { clip-path: inset(-20px 100% -20px -20px); }
.rg-anim .rg-end { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.rg-anim :is(.rg-content, .rg-people) { opacity: 0; transform: translateY(6px); }
.rg-anim :is(.rg-area, .rg-chip--gap) { opacity: 0; }

/* Played state, phase by phase. */
.rg-anim.is-drawn .rg-curve {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s cubic-bezier(.22, .61, .36, 1);
}

.rg-anim.is-drawn :is(.rg-reviewers, .rg-hatch) {
  clip-path: inset(-20px -20px -20px -20px);
  transition: clip-path 1s cubic-bezier(.45, 0, .25, 1);
}

.rg-anim.is-drawn .rg-reviewers { transition-delay: 1.9s; }
.rg-anim.is-drawn .rg-hatch { transition-delay: 3.5s; }

.rg-anim.is-drawn .rg-end {
  opacity: 1;
  transform: none;
  transition: opacity .25s ease-out, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.rg-anim.is-drawn .rg-end--content { transition-delay: 1.05s; }
.rg-anim.is-drawn .rg-end--people { transition-delay: 2.85s; }

.rg-anim.is-drawn :is(.rg-content, .rg-people) {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease-out, transform .5s ease-out;
}

.rg-anim.is-drawn .rg-content { transition-delay: 1.3s; }
.rg-anim.is-drawn .rg-people { transition-delay: 3s; }

.rg-anim.is-drawn .rg-area { opacity: 1; transition: opacity .6s ease-out 3.5s; }
/* The chip keeps its own centring transform, so it only fades. */
.rg-anim.is-drawn .rg-chip--gap { opacity: 1; transition: opacity .5s ease-out 4.4s; }

@media (prefers-reduced-motion: reduce) {
  .rg-anim .rg-curve { stroke-dasharray: none; transition: none; }
  .rg-anim :is(.rg-reviewers, .rg-hatch) { clip-path: none; transition: none; }
  .rg-anim :is(.rg-end, .rg-content, .rg-people, .rg-area, .rg-chip--gap) { opacity: 1; transform: none; transition: none; }
  .rg-anim .rg-chip--gap { transform: translate(-50%, -50%); } /* only the gap chip is centred */
}

/* ---------- Phase two: split the gap ---------- */
/* js/review-gap.js adds these classes to .rg-figure after phase one:
     is-gap-out  7.7s  the "Unreviewed gap" chip fades out (after ~2.8s on screen)
     is-ships    8.0s  a dark-grey band along the reviewer line (rising slightly,
                       to 4% of the gap at the end) wipes in, then the "What ships
                       today" chip fades in
     is-help     9.4s  the rest of the gap fills citron from the bottom up as the
                       hatch fades, then "This is what Stensul unblocks" fades in
   The chart stays full width. Reduced motion: the script adds them all at once
   with .rg-static. Without the script the chart stays at phase one's end. */

/* Both segments are shaded like the phase-one gap: a vertical gradient of the
   segment colour plus 45° hatch lines. Citron: stronger at the top, with
   Citron Medium lines; grey: Ivory Dark with darker lines. */
.rg-stop-help { stop-color: var(--rg-help); }
.rg-stop-help--top { stop-opacity: .85; }
.rg-stop-help--bottom { stop-opacity: .4; }
.rg-hatch-line--help { stroke: var(--rg-help-line); stroke-width: 1.75; }

.rg-stop-ships { stop-color: var(--rg-ships); }
.rg-stop-ships--top { stop-opacity: 1; }
.rg-stop-ships--bottom { stop-opacity: .85; }
.rg-hatch-line--ships { stroke: var(--rg-ships-line); stroke-width: 1.75; }

/* The segments start hidden: grey wipes left to right, citron bottom up. */
.rg-ships { clip-path: inset(-5px 100% -5px -5px); }
.rg-help { clip-path: inset(100% -5px -5px -5px); }

/* The phase-two chips start hidden, with or without the script. */
:is(.rg-chip--ships, .rg-chip--help) { opacity: 0; }

.rg-figure.is-gap-out .rg-chip--gap {
  opacity: 0;
  transition: opacity .3s ease-out;
}

.rg-figure.is-ships .rg-ships {
  clip-path: inset(-5px);
  transition: clip-path .6s cubic-bezier(.45, 0, .25, 1);
}

.rg-figure.is-ships .rg-chip--ships { opacity: 1; transition: opacity .4s ease-out .65s; }

.rg-figure.is-help .rg-help {
  clip-path: inset(-5px);
  transition: clip-path 1s cubic-bezier(.45, 0, .25, 1);
}

.rg-figure.is-help :is(.rg-hatch, .rg-area) {
  opacity: 0;
  transition: opacity .8s ease-out;
}

.rg-figure.is-help .rg-chip--help { opacity: 1; transition: opacity .4s ease-out 1.05s; }


/* Reduced motion: final state, no transitions. */
.rg-static,
.rg-static * { transition: none !important; }

/* ---------- Responsive ---------- */

@media (max-width: 767.98px) {
  .rg-inner { padding-top: 64px; padding-bottom: 64px; }
  .rg-section::before { display: none; }
}