/* PDP merge — current page + deslop page, by the owner's section picks of 29 Oct 2026 (messages 22 and 26). Final form for
   the main site folder: no option switches. Loaded LAST on the five PDP pages (a <link> just before </body>).
   Sections from the new (deslop) page:  buy box, "Three places", "What to expect" (as new, no timeline rule or dots),
                                         "Built by people" + Supplement Facts (shorter shadow), the text side of "What to look for",
                                         FAQ, "Why we made Frend" letter, guarantee band.
   Sections kept current:                "Does any of this sound familiar" (+ one-colour headline, lighter circle), "You've heard it",
                                         "You keep meaning…" (+ lighter circle), the comparison chart, reviews, and the SURVEY band
                                         (until the owner picks a design for the 83%). Not named, kept current: announcement bar,
                                         header, footer. Sticky buy bar: matched to the new buy box (M12, message 27).
   Built from ~/whop/ecom/builds/tryfrend-pdpmerge/public/_whop/merge.css (comparison copy, port 3250). Change log, scoping and
   before-values: ecom repo run-state/pdp-merge-2026-10-29/MANIFEST.md and run-state/pdp-round2-2026-10-29/MANIFEST.md. */

html:root {
  --d-ink: #1f003d; --d-body: #43325c; --d-muted: #6e5a94; --d-ground: #ece3f8; --d-tint: #f4f1f8;
  --d-accent: #457f79; --d-white: #ffffff; --d-star: #e8a13a; --d-ondark: #cdbfdd;
}

/* ---------- M1 (deslop D1, scoped) · Headlines one colour, one style — in the "new" sections, the text side of the
   comparison band, and the "Does any of this sound familiar?" headline (named piece: "the one color headline") ---------- */
html body #MainContent :is([id$="__frend_buybox"], [id$="__frend_benefits"], [id$="__frend_timeline"], [id$="__frend_notbrand"], [id$="__frend_faq"], [id$="__frend_letter"], [id$="__frend_promise"], [id$="__frend_compare"] .comparison-header, [id$="__frend_compare"] .comparison-text-column-wrapper, [id$="__frend_recognition"])
  :is(h1, h2, h3, h4, .h1, .h2, .h3, .rich-text-title, .section-title, .comparison-heading)
  :is(em, .accent, .global-accent-text, .custom-accent-text, .accent-text, .new-hero-accent-text):not(#_):not(#_) {
  font-style: normal !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
  background-image: none !important;
}
/* letter sign-off upright (survey band stays current) */
#MainContent [id$="__frend_letter"] .gst-body em { font-style: normal !important; }

/* ---------- M2 (deslop D2, scoped) · Letter-spacing 0 — only inside the "new" sections, the comparison text side and the
   recognition headline. Body, sticky bar, header, footer, reviews and the "current" sections keep their −0.3px. ---------- */
html body #MainContent :is([id$="__frend_buybox"], [id$="__frend_benefits"], [id$="__frend_timeline"], [id$="__frend_notbrand"], [id$="__frend_faq"], [id$="__frend_letter"], [id$="__frend_promise"], [id$="__frend_compare"] .comparison-header, [id$="__frend_compare"] .comparison-text-column-wrapper, [id$="__frend_recognition"] h2):not(#_):not(#_) {
  --letter-spacing-heading: 0px !important; --letter-spacing-body: 0px !important; --letter-spacing-tight: 0px !important;
  --global-button-letter-spacing: 0px !important; --font-heading-letter-spacing: 0px !important;
  letter-spacing: 0 !important;
}
html body #MainContent :is([id$="__frend_buybox"], [id$="__frend_benefits"], [id$="__frend_timeline"], [id$="__frend_notbrand"], [id$="__frend_faq"], [id$="__frend_letter"], [id$="__frend_promise"], [id$="__frend_compare"] .comparison-header, [id$="__frend_compare"] .comparison-text-column-wrapper)
  :is(h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .rich-text-title, .section-title):not(#_):not(#_),
html body #MainContent :is([id$="__frend_buybox"], [id$="__frend_benefits"], [id$="__frend_timeline"], [id$="__frend_notbrand"], [id$="__frend_faq"], [id$="__frend_letter"], [id$="__frend_promise"], [id$="__frend_compare"] .comparison-header, [id$="__frend_compare"] .comparison-text-column-wrapper)
  :is(h1, h2, h3, h4, h5, h6) :is(p, span, em, b, strong):not(#_):not(#_),
html body #MainContent [id$="__frend_recognition"] h2:not(#_):not(#_),
html body #MainContent [id$="__frend_recognition"] h2 :is(p, span, em, b, strong):not(#_):not(#_),
html body #MainContent [id$="__frend_buybox"] [class*="custom-text-block-container-bb_headline"] :is(.custom-text-main, .custom-text-main p):not(#_):not(#_),
html body #MainContent :is([id$="__frend_buybox"], [id$="__frend_benefits"], [id$="__frend_timeline"], [id$="__frend_notbrand"], [id$="__frend_faq"], [id$="__frend_letter"], [id$="__frend_promise"]) .button:not(#_):not(#_),
#MainContent :is(.gpb-title, .gnb-panel h3, .gt-stop h3, [id$="__frend_compare"] .comparison-heading):not(#_) { letter-spacing: 0 !important; }

/* ---------- M3 (deslop D3, "new" sections only) · Over-detailed bits ----------
   Not carried over, because their sections stay current: D3c tilted quote cards, D3d pinned "We are one thing away" card,
   D3e floating "177mg" card, D3g line + saffron + line ornament. */
/* M3a (D3a) survey: not carried; the survey band stays current (its 142-mark tally stays) until the 83% design is picked. */

/* M3b (D3b; its rail and dot lines are in M9) timeline: ticks gone, photos one size and level, even gaps */
#MainContent [id$="__frend_timeline"] .gt-body::after,
#MainContent [id$="__frend_timeline"] .gt-shotwrap::before,
#MainContent [id$="__frend_timeline"] .gt-shotwrap::after { display: none !important; content: none !important; }
#MainContent [id$="__frend_timeline"] .gt-body { padding-top: 18px !important; }
@media (min-width: 750px) {
  #MainContent [id$="__frend_timeline"] .gt-stop .gt-shot { height: 152px !important; }
}
@media (max-width: 749px) {
  #MainContent [id$="__frend_timeline"] .gt-rail { padding-left: 0 !important; }
  #MainContent [id$="__frend_timeline"] .gt-body { padding-top: 0 !important; }
  #MainContent [id$="__frend_timeline"] .gt-stop:not(:last-child) { margin-bottom: 28px !important; }
}

/* M3f (D3f) check-list: out from under the Supplement Facts panel, straight, into the flow below it (shadow fix: M11) */
#MainContent [id$="__frend_notbrand"] .gnb-panel { padding-bottom: clamp(20px, 2.4vw, 28px) !important; }
#MainContent [id$="__frend_notbrand"] .gnb-badges {
  transform: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important;
  width: 92% !important; margin: 24px 0 0 8% !important; padding: 0 !important;
}
@media (max-width: 989px) {
  #MainContent [id$="__frend_notbrand"] .gnb-badges { width: 100% !important; margin-left: 0 !important; }
}

/* M3h (D3h) buy box: the animated white shine across the dark "First order covered" bar goes */
html body #MainContent [id$="__frend_buybox"] .frend-offer-head:not(#_):not(#_)::after { display: none !important; animation: none !important; }

/* ---------- M4 (deslop D4, as is — every rule is in a "new" section) · Decorative dividers out ---------- */
#MainContent [id$="__frend_benefits"] .gpb-row { border-top: 0 !important; border-bottom: 0 !important; }
#MainContent [id$="__frend_notbrand"] .gnb-claims li { border-top: 0 !important; border-bottom: 0 !important; padding: 0 0 14px !important; }
#MainContent [id$="__frend_notbrand"] .gnb-claims li:last-child { padding-bottom: 0 !important; }
#MainContent [id$="__frend_notbrand"] .gnb-fit > div { border-top: 0 !important; padding-top: 0 !important; }
#MainContent [id$="__frend_buybox"] .frend-trust-row { border-top: 0 !important; border-bottom: 0 !important; }

/* ---------- M5 (deslop D5, as is — text side of the comparison band) · the outlined, tilted callout loses its box ---------- */
#MainContent [id$="__frend_compare"] .comparison-desktop-description p:last-child {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  transform: none !important; padding: 0 !important; margin: 14px 0 0 0 !important; width: auto !important; max-width: 34ch !important;
}
@media (min-width: 1280px) {
  #MainContent [id$="__frend_compare"] .comparison-desktop-description { margin-left: -44px !important; }
}

/* ---------- M6 (deslop D6, scoped) · Palette — only inside the "new" sections and the comparison text side, plus the two
   named lighter circles. Not carried over: recognition and permission band grounds, permission cloud and photo fill,
   "177mg" text colours and saffron photo fill, comparison-chart colours (checks, crosses, cell text, header image),
   reviews, sticky bar, announcement, header, footer. ---------- */
/* M6a (D6a + D6h buy-box lines) buy box */
html body #MainContent [id$="__frend_buybox"] .shop-product-section:not(#_):not(#_) { color: var(--d-ink) !important; }
html body #MainContent [id$="__frend_buybox"] :is(.product-bullet-text, .custom-text-block-bb_reassure .custom-text-main p, .fo-feats, .fo-feats li, .fo-qty-label, #foCtaNote):not(#_):not(#_) { color: var(--d-body) !important; }
html body #MainContent [id$="__frend_buybox"] :is(.custom-text-main, .custom-text-content):not(#_):not(#_) { color: var(--d-body) !important; }
html body #MainContent [id$="__frend_buybox"] .custom-text-block-bb_headline .custom-text-main :is(h1, h2, p):not(#_):not(#_) { color: var(--d-ink) !important; }
html body #MainContent [id$="__frend_buybox"] .custom-text-block-bb_proofline p:not(#_):not(#_) { color: var(--d-body) !important; }
html body #MainContent [id$="__frend_buybox"] .custom-text-block-bb_proofline strong:not(#_):not(#_) { color: var(--d-ink) !important; }
html body #MainContent [id$="__frend_buybox"] .rating-component em:not(#_):not(#_) { color: var(--d-body) !important; }
html body #MainContent [id$="__frend_buybox"] .product-bullet-icon svg path:not(#_):not(#_) { fill: var(--d-ink) !important; }
html body #MainContent [id$="__frend_buybox"] .product-bullet-icon:not(#_):not(#_) { color: var(--d-ink) !important; }
html body #MainContent [id$="__frend_buybox"] :is(.fo-day, .fo-note, .fo-qty small, small, .custom-text-description, .custom-text-description p):not(#_):not(#_) { color: var(--d-muted) !important; }
html body #MainContent [id$="__frend_buybox"] .custom-text-block-bb_headline .custom-text-description p:not(#_):not(#_) { color: var(--d-body) !important; }
html body #MainContent [id$="__frend_buybox"] :is(button.on, .fo-badge):not(#_):not(#_) { background-color: var(--d-ground) !important; }
html body #MainContent [id$="__frend_buybox"] .shop-thumbnail:not(#_):not(#_) { background-color: var(--d-tint) !important; }
html body #MainContent [id$="__frend_buybox"] :is(.shop-image-container, .shop-main-image):not(#_):not(#_) { background-color: transparent !important; }
html body #MainContent [id$="__frend_buybox"] .frend-offer-head > span:last-child > span:last-child:not(#_):not(#_) { color: var(--d-ondark) !important; }
html body #MainContent [id$="__frend_buybox"] .frend-offer-stack > div:last-child > span > span:nth-child(1):not(#_):not(#_) { color: var(--d-muted) !important; }
html body #MainContent [id$="__frend_buybox"] .frend-offer-stack > div:last-child > span > span:nth-child(2):not(#_):not(#_) { color: var(--d-ink) !important; }
html body #MainContent [id$="__frend_buybox"] .frend-offer-stack > div:last-child > span > span:nth-child(3):not(#_):not(#_) { color: var(--d-body) !important; }
html body #MainContent section[id$="__frend_buybox"]:not(#_):not(#_) { color: var(--d-ink) !important; }
html body #MainContent [id$="__frend_buybox"] .product-bullet-icon :is(svg, path):not(#_):not(#_) { color: var(--d-ink) !important; }
html body #MainContent [id$="__frend_buybox"] .shop-product-info:not(#_):not(#_) { color: var(--d-ink) !important; }

/* M6b (D6b, split) blobs and photo fills in the "new" sections */
html body #MainContent [id$="__frend_faq"] .gf-fredlobe *:not(#_):not(#_) { fill: var(--d-tint) !important; }
html body #MainContent [id$="__frend_notbrand"] .gnb-lobe:not(#_):not(#_) { background: var(--d-ground) !important; }
html body #MainContent :is(.gpb-cloud, .gst-lobe) *:not(#_):not(#_) { fill: var(--d-ground) !important; }
html body #MainContent :is(.gpb-shot, .gt-shot):not(#_):not(#_) { background-color: var(--d-ground) !important; }

/* M6c (D6c, split) rust gone in the "new" sections: figures in ink, labels in muted */
html body #MainContent [id$="__frend_faq"] .gf-answer a:not(#_):not(#_) { color: var(--d-ink) !important; }
html body #MainContent [id$="__frend_faq"] .gf-sign:not(#_):not(#_) { background: var(--d-white) !important; }
html body #MainContent [id$="__frend_letter"] .gst-ctafine:not(#_):not(#_) { color: var(--d-muted) !important; }

/* M6d (D6d, split) comparison band: the text side takes ink; the chart keeps its current colours */
html body #MainContent [id$="__frend_compare"] .comparison-desktop-description :is(p, p strong, p b):not(#_):not(#_) { color: var(--d-ink) !important; }

/* M6e (D6h promise line) guarantee band: the lobe behind the bottle in body ink */
html body #MainContent [id$="__frend_promise"] .gpp-lobe:not(#_):not(#_) { background: var(--d-body) !important; }

/* ---------- M7 (deslop D7, as is — buy box and guarantee band) · opacity tricks out ---------- */
html body #MainContent [id$="__frend_buybox"] .custom-text-description:not(#_):not(#_) { opacity: 1 !important; }
html body #MainContent [id$="__frend_promise"] .gpp-glow:not(#_):not(#_) { display: none !important; }
html body #MainContent [id$="__frend_promise"] .gpp-field:not(#_):not(#_) { opacity: 1 !important; }

/* ---------- M8 · Named pieces taken into "current" sections (from deslop D6b) ----------
   "the lighter circle color behind the cards" ("Does any of this sound familiar") and "the lighter circle of new"
   ("You keep meaning to do something for yourself."). The recognition headline is in M1 + M2. */
html body #MainContent :is([id$="__frend_recognition"] .gpr-lobe, [id$="__frend_why_saffron"] .gpm-lobe):not(#_):not(#_) { background: var(--d-tint) !important; }

/* ---------- M9 · "What to expect": new as built (deslop D3b in full), no timeline rule or dots ----------
   Owner, 29 Oct (message 26): "Timeline - ive decided i dont like the line actually - go with the first suggested new
   (without timeline)". The rule-and-dots and thread options of round 1 are gone; the source's rail line and rust dot are
   switched off exactly as deslop does it (M3b carries the rest of D3b). */
#MainContent [id$="__frend_timeline"] .gt-body::before { display: none !important; content: none !important; }
#MainContent [id$="__frend_timeline"] .gt-rail::before { display: none !important; content: none !important; }

/* ---------- M10 · Survey: not carried. The band stays as the current page until the owner picks a design for the 83%
   (options on the comparison copy, port 3250, ?merge=sv-fill / sv-big / sv-cloud / sv-answer). ---------- */

/* ---------- M11 · "Built by people" / Supplement Facts: the panel's shadow no longer reaches the check-list below ----------
   The panel kept the current page's long drop shadow (0 30px 56px -34px, 90% ink), which was sized to fall behind a card
   that overlapped it; with the check-list now in the flow 24px below, it washed over the first lines. Same direction and
   colour, shorter throw. */
html body #MainContent [id$="__frend_notbrand"] .gnb-panel:not(#_):not(#_) { box-shadow: 0 16px 26px -18px rgba(31, 0, 61, .62) !important; }

/* ---------- M12 · Sticky buy bar matched to the new buy box (29 Oct, message 27) ----------
   Owner, 29 Oct (message 27): "sticky buy bar - yeah make it congruent." Deslop D6f (colours) plus deslop D2's letter-spacing 0,
   scoped to the bar (#stickyAddToCart). Styling only: every word in the bar, the rating line included, stays exactly as it was
   and shows or hides exactly as before. Proposed in run-state/pdp-round2-2026-10-29/sticky-match.css; moved by
   run-state/pdp-round3-2026-10-29 (MANIFEST step 7). */
html body #stickyAddToCart:not(#_):not(#_) {
  --letter-spacing-heading: 0px !important; --letter-spacing-body: 0px !important; --letter-spacing-tight: 0px !important;
  --global-button-letter-spacing: 0px !important; --font-heading-letter-spacing: 0px !important;
  letter-spacing: 0 !important;
}
html body #stickyAddToCart :is(.sticky-add-to-cart__title, .sticky-add-to-cart__title strong, .button):not(#_):not(#_) { letter-spacing: 0 !important; }
html body #stickyAddToCart :is(.sticky-add-to-cart__title, .sticky-add-to-cart__title strong):not(#_):not(#_) { color: var(--d-ink) !important; }
html body #stickyAddToCart :is(.sticky-add-to-cart__rating-text, .delivery-text):not(#_):not(#_) { color: var(--d-muted) !important; }
html body #stickyAddToCart .delivery-date:not(#_):not(#_) { color: var(--d-body) !important; }
html body #stickyAddToCart :is(.star, .star svg, .star path):not(#_):not(#_) { color: var(--d-star) !important; }
html body #stickyAddToCart .delivery-icon :is(svg, path):not(#_):not(#_) { color: var(--d-muted) !important; fill: var(--d-muted) !important; }
html body #stickyAddToCart .sticky-add-to-cart__image:not(#_):not(#_) { background-color: var(--d-ground) !important; }

/* ---------- M14 · Survey: the 83% as a road with Fred walking on it (moved 30 Oct 2026 from the comparison copy) ----------
   Owner, 29 Oct (message 31) on take 1 with the dark dashes: "83% is good now"; 30 Oct: "make fred layer on top so he doesnt go
   behind the text when he moves" (M14-1b) and "40px is good" (phone size). Final form: no option switches, so every
   html[data-merge~="fr-bar"] of the comparison copy is html:root here (same weight). Takes fr-lane / fr-path and the Fred swaps
   are not carried. Fred is /_whop/fred-walks-road.png (the same pixels the comparison copy had inline). The walk is
   /_whop/fred-road.js. M3a below (the 142-mark tally, its label and bracket go) is part of this design. */
html:root { --sv-track: #cdbfe6; }
#MainContent [id$="__frend_survey"] :is(.gps-fieldlab, .gps-ticks, .gps-brk) { display: none !important; }
#MainContent [id$="__frend_survey"] .gps-brklab { margin-top: 0 !important; }
/* The survey band takes the "new" page's treatment (owner, 29 Oct: survey from the new; it waited on the 83% design until
   30 Oct). Same rules as M1, M2, M4 and M6c of the comparison copy, scoped to the survey alone, same weight. */
html body #MainContent :is([id$="__frend_survey"])
  :is(h1, h2, h3, h4, .h1, .h2, .h3, .rich-text-title, .section-title, .comparison-heading)
  :is(em, .accent, .global-accent-text, .custom-accent-text, .accent-text, .new-hero-accent-text):not(#_):not(#_) {
  font-style: normal !important; font-weight: inherit !important; font-family: inherit !important; font-size: inherit !important;
  color: inherit !important; letter-spacing: inherit !important; background-image: none !important;
}
#MainContent [id$="__frend_survey"] .gps-cards em { font-style: normal !important; }
html body #MainContent :is([id$="__frend_survey"]):not(#_):not(#_) {
  --letter-spacing-heading: 0px !important; --letter-spacing-body: 0px !important; --letter-spacing-tight: 0px !important;
  --global-button-letter-spacing: 0px !important; --font-heading-letter-spacing: 0px !important;
  letter-spacing: 0 !important;
}
html body #MainContent :is([id$="__frend_survey"]) :is(h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .rich-text-title, .section-title):not(#_):not(#_),
html body #MainContent :is([id$="__frend_survey"]) :is(h1, h2, h3, h4, h5, h6) :is(p, span, em, b, strong):not(#_):not(#_),
html body #MainContent :is([id$="__frend_survey"]) .button:not(#_):not(#_),
#MainContent [id$="__frend_survey"] .gps-brklab b:not(#_) { letter-spacing: 0 !important; }
#MainContent [id$="__frend_survey"] .gps-cards li { border-top: 0 !important; padding-top: 0 !important; }
html body #MainContent [id$="__frend_survey"] .gps-brklab b:not(#_):not(#_) { color: var(--d-ink) !important; }
html body #MainContent [id$="__frend_survey"] .gps-cards em:not(#_):not(#_) { color: var(--d-muted) !important; }

@property --fr-p { syntax: "<number>"; inherits: true; initial-value: 0.831; }

/* shared · B exactly (M10-B numbers), plus the Fred files */
html:root #MainContent [id$="__frend_survey"] .gps-brklab:not(#_):not(#_) {
  align-items: last baseline !important; column-gap: 30px !important; max-width: none !important; position: relative;
  /* default (round 5): the new Fred without the bag, a 253 × 200 render of fred-canon/fred-walks-candidate-trace.svg cropped to his
     inked area (54..977 × 293..1024 of 1024), faces left in the file, so it is mirrored whole like the bag Fred. Front toe at 0.898
     of his height from his back edge. */
  --fr-img: var(--fr-img-nobag); --fr-ar: 1.265; --fr-bgs: 1.265; --fr-bgx: 0; --fr-bgy: 0; --fr-toe: 0.898; --fr-flip: -1;
  --fr-img-nobag: url("/_whop/fred-walks-road.png");
  --fr-h: 96px; --fr-p: 0.831; /* set here too, so a browser without @property still stands him at 83.1% */
}
html:root body #MainContent [id$="__frend_survey"] .gps-brklab b:not(#_):not(#_) {
  font-size: clamp(112px, 13.5vw, 184px) !important; line-height: .9 !important; font-weight: 400 !important;
}
html:root body #MainContent [id$="__frend_survey"] .gps-brklab span:not(#_):not(#_) {
  font-size: clamp(20px, 1.9vw, 25px) !important; max-width: 11em; text-wrap: balance; padding-bottom: .1em;
}
/* Fred himself: one box sized to his inked area, the file as its background. M14-1b puts him in front of the text. */
html:root #MainContent [id$="__frend_survey"] .gps-brklab::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: calc(var(--fr-h) * var(--fr-ar)); height: var(--fr-h);
  background: var(--fr-img) no-repeat;
  background-size: calc(var(--fr-h) * var(--fr-bgs)) auto;
  background-position: calc(var(--fr-h) * var(--fr-bgx)) calc(var(--fr-h) * var(--fr-bgy));
  transform: scaleX(var(--fr-flip));
}
@media (max-width: 989px) {
  html:root #MainContent [id$="__frend_survey"] .gps-brklab:not(#_):not(#_):not(#_):not(#_):not(#_) { --fr-h: 84px; }
}
@media (max-width: 749px) {
  html:root #MainContent [id$="__frend_survey"] .gps-brklab:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { row-gap: 0 !important; margin-top: 8px !important; --fr-h: 40px; }
  html:root body #MainContent [id$="__frend_survey"] .gps-brklab b:not(#_):not(#_) { font-size: 116px !important; }
  html:root body #MainContent [id$="__frend_survey"] .gps-brklab span:not(#_):not(#_) { font-size: 20px !important; max-width: none; }
}

/* M14-1 fr-bar · take 1, the bar's fill as a dark dashed line (29 Oct, message 31: "THE BAR WAS SUPPOSED TO BE A DOTTED LINE UP TO
   THE POINT ITS FILLED ... INSTEAD OF A SOLID FILL ITS A DOTTED LINE FILL ... LIKE THE LINES WITH SPLIT IN BETWEEN STYLE OF DOTTED").
   Dashes in the page ink from the left of the text column up to Fred's front toe (83.1%), growing with him as he walks; the 17%
   still ahead stays the old unfilled lavender, at the same thickness. No orange. Phones: under the sentence, shorter dashes. */
html:root #MainContent [id$="__frend_survey"] .gps-brklab:not(#_):not(#_) { --fr-road: 4px; --fr-dash-on: 12px; --fr-dash-off: 7px; padding-bottom: calc(30px + var(--fr-road)) !important; }
html:root body #MainContent [id$="__frend_survey"] .gps-brklab b:not(#_):not(#_) { margin-bottom: -.13em; }
html:root #MainContent [id$="__frend_survey"] .gps-brklab::after {
  content: ""; position: absolute; z-index: -2; left: 0; right: 0; bottom: 0; height: var(--fr-road); pointer-events: none; /* under Fred, so his feet stand on the line */
  background:
    repeating-linear-gradient(90deg, var(--d-ink) 0 var(--fr-dash-on), transparent var(--fr-dash-on) calc(var(--fr-dash-on) + var(--fr-dash-off))) 0 0 / calc(var(--fr-p) * 100% + var(--fr-toe) * var(--fr-h) * (1 - var(--fr-p) / 0.831)) 100% no-repeat,
    linear-gradient(90deg, transparent 0 calc(var(--fr-p) * 100% + var(--fr-toe) * var(--fr-h) * (1 - var(--fr-p) / 0.831)), var(--sv-track) 0 100%);
}
html:root #MainContent [id$="__frend_survey"] .gps-brklab::before {
  bottom: calc(var(--fr-road) - 1px);
  left: calc(var(--fr-p) * (100% - var(--fr-toe) * var(--fr-h) / 0.831));
}
@media (max-width: 749px) {
  html:root #MainContent [id$="__frend_survey"] .gps-brklab:not(#_):not(#_) { --fr-road: 3px; --fr-dash-on: 8px; --fr-dash-off: 5px; padding-bottom: calc(8px + var(--fr-h) + var(--fr-road)) !important; }
  html:root body #MainContent [id$="__frend_survey"] .gps-brklab b:not(#_):not(#_) { margin-bottom: 0; }
}


/* motion: only when the visitor hasn't asked for reduced motion; the script sets the start, once */
@media (prefers-reduced-motion: no-preference) {
  html:root #MainContent [id$="__frend_survey"] .gps-brklab.fr-wait:not(#_):not(#_) { --fr-p: 0; transition: none; }
  html:root #MainContent [id$="__frend_survey"] .gps-brklab.fr-go:not(#_):not(#_) { transition: --fr-p 2.4s cubic-bezier(.42, 0, .3, 1); }
}
/* M14-1b, 30 Oct (owner: "make fred layer on top so he doesnt go behind the text when he moves"): Fred walks in front of the 83 and the label; the road stays under him. */
html:root #MainContent [id$="__frend_survey"] .gps-brklab:not(#_):not(#_) { isolation: isolate; }
html:root #MainContent [id$="__frend_survey"] .gps-brklab::before { z-index: 3 !important; }