/* ════════════════════════════════════════════════════════════════════════
 *  Testroute — Reviews page  ·  v1.0.0
 *  The shared trh- hero shell first, lifted verbatim so heights, type and
 *  the header clearance match every other page 1:1, then this page's own
 *  trv- styles. !important throughout = Cornerstone.
 *
 *  HEADER SPACING. The prototype had padding:92px hardcoded. It is the
 *  formula here: calc(var(--hdr-total-h,56px) + 20px), stepping to 72px
 *  above 769. Never a fixed number, because the header is 56 on mobile, 72
 *  above 769, and taller again when the notification bar is on.
 *
 *  NOTHING FROM THE CTA SYSTEM IS REPEATED. .tr-cta and .tr-chip arrive
 *  globally from assets/css/tr-cta-system.css. The prototype carries copies
 *  of both because a React preview has no header to load them from; the
 *  first line of CTA-SYSTEM.md says a page reuses those classes rather than
 *  copying them, so they are gone here.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── overflow, scoped to this page ─────────────────────────────
   The breakout uses width:100vw and 100vw counts the scrollbar on desktop,
   so without a clip there is a dozen pixels of sideways scroll. clip, never
   hidden: hidden creates a scroll container and kills position:sticky
   anywhere inside it. */
body:has(.trv-page){overflow-x:clip !important}
.x-section:has(.trv-page),
.x-row:has(.trv-page),
.x-col:has(.trv-page){overflow:visible !important}

/* ══ root + tokens, verbatim from about.css ═══════════════════════════ */
.trh-root{position:relative !important;left:50% !important;right:50% !important;
  margin-left:-50vw !important;margin-right:-50vw !important;
  width:100vw !important;max-width:100vw !important;overflow-x:clip !important;
  --c-navy:#0c1927 !important;--c-navy-2:#0f1d2c !important;--c-oefen:#122131 !important;
  --c-green:#03c988 !important;--c-green-d:#02a873 !important;
  --c-off:#f8f9fa !important;--c-amber:#f0997b !important;
  --c-deep:#152536 !important;--c-close:#1b2e42 !important;
  --r-sm:8px !important;--r-md:12px !important;--r-lg:24px !important;
  --ease:cubic-bezier(.4,0,.2,1) !important;--line:rgba(255,255,255,.10) !important;
  font-family:'Inter', 'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
  -webkit-font-smoothing:antialiased !important;color:#fff !important;
  line-height:1.5 !important;background:#0d1b2a !important}
.trh-root *,.trh-root *::before,.trh-root *::after{box-sizing:border-box !important;
  margin:0 !important;padding:0 !important;text-transform:none !important}
.trh-root :focus-visible{outline:2px solid var(--c-green) !important;outline-offset:3px !important;
  border-radius:8px !important}
.trh-w{max-width:1200px !important;margin:0 auto !important;padding:0 16px !important}
@media(min-width:700px){.trh-w{padding:0 32px !important}}

/* ══ hero shell, verbatim ═════════════════════════════════════════════ */
.trh-hero{background:var(--c-navy) !important;position:relative !important;overflow:hidden !important}
.trh-hero>.trh-w{max-width:1200px !important;margin:0 auto !important;padding:calc(var(--hdr-total-h,56px) + 20px) 16px clamp(44px, 6.5vh, 100px) !important}
@media(min-width:700px){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,56px) + 20px) 32px clamp(44px, 6.5vh, 100px) !important}}
@media(min-width:769px){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 20px) 32px clamp(44px, 6.5vh, 100px) !important}}
@media(min-width:1100px){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 24px) 32px clamp(44px, 6.5vh, 100px) !important}}

.trh-hero-grid{display:block !important;position:relative !important;z-index:2 !important}
@media(min-width:900px){.trh-hero-grid{display:grid !important;
  grid-template-columns:1.1fr .9fr !important;column-gap:56px !important;align-items:stretch !important}}
.trh-hero-grid.is-solo{display:block !important}
.trh-hero-left{position:relative !important;z-index:3 !important;
  display:flex !important;flex-direction:column !important;
  justify-content:flex-start !important;align-items:flex-start !important;
  padding:0 0 8px !important}

.trh-hero-bread{display:none !important;font-size:12px !important;color:rgba(255,255,255,.55) !important;
  margin-bottom:clamp(1.5rem,1.2rem + 1.05vw,2rem) !important;align-items:center !important;gap:6px !important}
@media(min-width:700px){.trh-hero-bread{display:flex !important}}
.trh-hero-bread a{color:rgba(255,255,255,.55) !important;text-decoration:none !important}
.trh-hero-bread a:hover{color:#fff !important}
.trh-hero-bread-sep{color:rgba(255,255,255,.3) !important;flex:none !important}
.trh-hero-bread-cur{color:rgba(255,255,255,.8) !important;font-weight:500 !important}
.trh-hero-bread-back{display:inline-flex !important;align-items:center !important;gap:6px !important;
  margin:0 auto 2px -4px !important;padding:2px 4px 14px !important;font-size:13px !important;
  font-weight:500 !important;color:rgba(255,255,255,.55) !important;text-decoration:none !important}
@media(min-width:700px){.trh-hero-bread-back{display:none !important}}

.trh-hero-h1{max-width:600px !important;margin:0 0 clamp(.875rem,.65rem + .8vw,1.25rem) !important;
  letter-spacing:-.03em !important;line-height:1.08 !important;text-wrap:balance !important}
.trh-hero-lead{display:inline !important;
  font-size:clamp(1.75rem,calc((100vw - 32px) * 0.1142),2.875rem) !important;
  font-weight:700 !important;color:var(--c-off) !important;
  letter-spacing:-.03em !important;line-height:1.08 !important}
.trh-hero-intro{font-size:16.5px !important;line-height:1.65 !important;
  color:rgba(255,255,255,.62) !important;max-width:540px !important;
  margin:0 0 clamp(1.75rem,.8rem + 1.55vw,2rem) !important;text-wrap:pretty !important}

/* ── THE ILLUSTRATION COLUMN, AND WHY IT IS display:block ──────
   This carried display:flex, justify-content:center and min-height:280px,
   all three of them mine and none of them in the shell. The grid also
   carried align-items:center instead of stretch.

   Together they moved the text. The left column is about 261px of content;
   min-height forced the row to 280; align-items:center then centred the
   text in that row rather than starting it at the top, so the breadcrumb
   sat low and there was air under the intro that no rule in this file
   accounts for. The illustration was setting the position of the headline.

   about.css uses stretch and block. With those, the left column fills the
   row and justify-content:flex-start starts the text at the top, exactly
   as on every other page. The illustration centres itself through its own
   margin instead of through the column. */
.trh-hero-vis{position:relative !important;display:none !important}
@media(min-width:900px){.trh-hero-vis{display:block !important}}
/* The shared decorative glow, same values as road-signs.css. This page does
   not render one, because tr_hero_ill_pricing() carries its own inside the
   SVG, but the rule stays: it is part of the hero shell that is lifted
   verbatim, and a page that drops half the shell is how the shell stops
   being the same everywhere. */
.trh-glow{position:absolute !important;inset:0 !important;margin:auto !important;
  width:420px !important;height:420px !important;border-radius:999px !important;
  background:radial-gradient(circle at center,rgba(3,201,136,.10),rgba(3,201,136,0) 68%) !important;
  pointer-events:none !important;z-index:0 !important}

/* ══ the hero's own bits ══════════════════════════════════════════════ */

/* Only the second figure is at full contrast, because only one of the two
   is the point. */

/* ── THE JUMP CHIP ─────────────────────────────────────────────
   .tr-chip comes from the global CTA system, which names it for jump-nav.
   Nothing is restyled here; only the chevron gets behaviour, which the
   global file does not define for any control except .tr-cta.

   It slides DOWN, because the target is down the page. A chip has no
   underline, so there is nothing for it to collide with: on .tr-link the
   same 2px would put the chevron on top of the border.

   Spacing matches the CTA row it replaces: clamp(20px, 2.4vh, 30px). */
.trp-jump{margin-top:clamp(20px,2.4vh,30px) !important;align-self:flex-start !important}
.trp-jump svg{flex:none !important;
  transition:transform .15s cubic-bezier(.22,1,.36,1) !important}
.trp-jump:hover svg{transform:translateY(2px) !important}

/* ── TRAP 4, THE ANCHOR ────────────────────────────────────────
   Without this the browser scrolls #plans to y=0 and the heading lands
   underneath a fixed header. The clearance uses the same variable the hero
   padding does, never a hard-coded height, because the header is 56 on
   mobile and 72 above 769 and it changes when the notification bar is on. */
.trv-page [id]{scroll-margin-top:calc(var(--hdr-total-h, 56px) + 20px) !important}
@media(min-width:769px){
  .trv-page [id]{scroll-margin-top:calc(var(--hdr-total-h, 72px) + 20px) !important}
}

@media(prefers-reduced-motion:reduce){.trv-page *{transition:none !important}}

/* ── THE ILLUSTRATION ──────────────────────────────────────────
   .trh-herofill and .trh-herofill-svg are the shared wrapper the other
   seven use; values lifted from road-signs.css so this sits at exactly the
   same size as every other hero drawing on the site. */
.trh-herofill{position:relative !important;z-index:1 !important;
  width:100% !important;max-width:330px !important;
  margin:0 auto !important}
.trh-herofill-svg{width:100% !important;height:auto !important;display:block !important}

/* ── EYEBROW ───────────────────────────────────────────────────
   The shared caption above a section heading, values identical to the four
   other pages that use it. Grey, not green: green is reserved for the thing
   you click, and an eyebrow is not clickable. */
.trh-eyebrow{font-size:11.5px !important;font-weight:700 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  color:rgba(255,255,255,.34) !important;margin-bottom:14px !important}


/* ── .tr-cta, lifted verbatim from assets/css/tr-cta-system.css ──
   Every rule below is copied exactly, !important and all, and NONE of it
   belongs in a module stylesheet. In the plugin these arrive globally from
   the header, and the first line of CTA-SYSTEM.md is that you reuse the
   classes rather than copy them onto a page. This block is here only
   because a React preview has no header to load the shared sheet from.
   Delete it when this becomes a template.

   Two mistakes got it here. The base rule was missing entirely, so the
   button rendered as a bare link, which is the same thing that happened to
   the chip on the pricing page. And I then declared .tr-cta--lg locally,
   which is exactly what I had twice told you not to do. */
.tr-cta{box-sizing:border-box !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;height:44px !important;padding:0 22px !important;font-family:inherit !important;font-size:14.5px !important;font-weight:700 !important;line-height:1 !important;color:#0c1927 !important;background:#03c988 !important;border:none !important;border-radius:8px !important;cursor:pointer !important;text-decoration:none !important;white-space:nowrap !important;transition:background .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1),border-color .18s cubic-bezier(.22,1,.36,1),color .18s cubic-bezier(.22,1,.36,1) !important}

/* ── CENTRED, and only the head. The breadcrumb stays left, because a
   centred breadcrumb reads as a title rather than as a path back. */

/* ── CENTRED, and only the head ─────────────────────────────────
   The breadcrumb stays left: a centred breadcrumb reads as a title rather
   than as a way back. It was a switch in the prototype; here it is the
   design, so there is no modifier class. */
.trv-head{text-align:center !important}
.trv-head .trh-hero-h1{margin-left:auto !important;margin-right:auto !important}
.trv-head .trv-stars{justify-content:center !important}
/* Staat hier alleen nog als aanwijzing: de volledige regel voor dit blok
   staat bij THE WAY OUT onderaan. Twee losse regels voor dezelfde selector
   is precies hoe de knop links kwam te staan. */

/* max-width zonder auto-marges is een blok van 56ch dat links tegen de rand
   plakt met zijn tekst netjes gecentreerd erbinnen. De h1 kreeg die marges
   een regel hoger wel, deze niet. */
.trv-intro{font-size:16.5px !important;line-height:1.65 !important;color:rgba(255,255,255,.62) !important;
  max-width:56ch !important;margin-left:auto !important;margin-right:auto !important;
  text-wrap:pretty !important}

/* ── THE NUMBER IS GONE ────────────────────────────────────────
   The figure sat here at 4rem with "out of 5" beside it. Under a centred
   heading that is a second headline arguing with the first, and Trustpilot's
   stars say the same thing without asking to be read.

   Nothing is lost. The figure is in the alt text of the stars image, which
   is what a crawler and a model read, and the wording and the count are
   still in the sentence below it.

   ── AND THE RULE UNDER IT ─────────────────────────────────────
   Capped at 600px, the same as the h1, not the 1200px of .trh-w. A hairline
   running the full container under a 500px stack of centred text reads as a
   band laid across the page; one that ends where the composition ends reads
   as the head finishing. Same device as .trh-trust on the other heroes,
   turned the other way up. */
.trv-score{display:flex !important;flex-direction:column !important;gap:8px !important;
  margin-top:clamp(24px,3vh,34px) !important;align-items:center !important;
  max-width:600px !important;margin-left:auto !important;margin-right:auto !important;
  padding-bottom:clamp(26px,3.5vh,38px) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important}

/* ══ THE SCORE ════════════════════════════════════════════════════════
   Trustpilot's number, with their name on it, their stars, a link to the
   profile and the date it was checked. Their brand rules ask for all three,
   and the date is also the only honest way to show a hand-copied figure. */
/* De auto-marges doen hier twee dingen: ze centreren het plaatje, en ze
   zetten align-items:stretch van de kolom eromheen uit. Zonder die marges
   rekt een img met width:auto mee met de kolom en vervormt de SVG. */
.trv-score-img{height:22px !important;width:auto !important;display:block !important;
  margin-left:auto !important;margin-right:auto !important}

/* ── DE STERREN PER REVIEW, ALS PLAATJE ───────────────────────
   Zelfde hoogtes als de getekende variant die het vervangt: 20px in het
   scoreblok, 15px op een kaart. Zo verspringt er niets op het moment dat je
   de SVG's uploadt of weer weghaalt. */
.trv-stars-img{height:20px !important;width:auto !important;display:block !important}
.trv-card .trv-stars-img{height:15px !important;margin-bottom:12px !important}
.trv-cols .trv-stars-img{margin-left:auto !important;margin-right:auto !important}
.trv-stars{display:flex !important;gap:3px !important}
.trv-stars svg{width:20px !important;height:20px !important;fill:rgba(255,255,255,.16) !important}
/* ── ONE GREEN ─────────────────────────────────────────────────
   These were Trustpilot's #00b67a beside the site's #03c988. Measured, that
   is the same hue to the degree and twenty percent apart in luminance: too
   close to read as two colours, too far to read as one. Side by side it
   looks like a printing fault rather than a choice.

   So the stars take the site's green. The attribution is not lost, it is in
   the words: the eyebrow says Left on Trustpilot and the score says
   TrustScore, which is what their brand rules actually ask for. */
.trv-stars svg.is-on{fill:var(--c-green) !important}
.trv-score-l{font-size:15.5px !important;color:rgba(255,255,255,.72) !important}
.trv-score-l b{color:#fff !important;font-weight:700 !important}
.trv-score-s{font-size:13px !important;color:rgba(255,255,255,.45) !important}
.trv-score-a{color:rgba(255,255,255,.7) !important;text-decoration:underline !important;
  text-underline-offset:3px !important;text-decoration-color:rgba(255,255,255,.3) !important}
.trv-score-a:hover{color:#fff !important;text-decoration-color:#fff !important}

/* ══ THE WALL ═════════════════════════════════════════════════════════
   Two rows moving in opposite directions. It is a texture: moving text
   cannot be read, so what this says is "there are a lot of these", and the
   quote you happen to catch is a bonus.

   Duplicated markup and a CSS animation to -50%, so the second copy arrives
   exactly as the first leaves and the loop has no seam. No JavaScript builds
   any of it, because the crawler this page exists for does not run any. */
/* ── ONE COLOUR ────────────────────────────────────────────────
   A section colour says "something new starts here". This page has one H1
   and no visible H2, so nothing new starts anywhere: it is the score, what
   they said, and the way out.

   The step it used to carry was 1.04x in luminance, which is the step I
   measured earlier as being below the threshold where an eye sees an edge
   without looking for it. It cost a rule and showed nothing.

   The cards have no fill either, so an outline reads the same on any tone
   in the ladder. The wall never needed a ground of its own. */
.trv-wall{background:var(--c-navy) !important;padding:clamp(32px,4.5vh,64px) 0 clamp(24px,3vh,40px) !important;
  overflow:hidden !important;position:relative !important}
.trv-sr{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;
  white-space:nowrap !important}

.trv-row{overflow:hidden !important;margin-bottom:16px !important;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent) !important;
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent) !important}
.trv-track{display:flex !important;align-items:center !important;gap:16px !important;width:max-content !important;
  animation:trv-scroll 46s linear infinite !important}
.trv-row.is-rev .trv-track{animation-direction:reverse !important}
.trv-row:hover .trv-track,
.trv-row.is-paused .trv-track{animation-play-state:paused !important}
@keyframes trv-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── THE CARD SIZES ITSELF ─────────────────────────────────────
   The reviews run from eleven characters to two hundred and twenty eight,
   a factor of twenty one. No single card width survives that: at 330px
   fixed, "useful info!" got the same height as a five line quote and the
   rest of it was empty, because a flex row stretches every item to the
   tallest.

   So the card is sized by its content, capped at 360 so a long one still
   breaks into readable lines and floored at 190 so a two word one is a tile
   rather than a sliver. The row centres them instead of stretching them, so
   a short card is small and sits in the middle of the band.

   That is also why the wall reads better: a row of identical rectangles is
   a table, a row of different ones is a wall. */
/* ── THE OUTLINE ───────────────────────────────────────────────
   A gradient border rather than a flat one: bright at the top left, almost
   nothing by the bottom right, as if a light source sits above the page.
   That is the same cue the glass surfaces elsewhere are reaching for, and
   on a card with no fill it is the only thing left to do the reaching.

   Done with a masked pseudo-element, which is the one technique that gives
   a gradient border WITHOUT a fill behind it. The usual background-clip
   trick needs a solid padding-box layer to hide the gradient in the middle,
   and this card is deliberately transparent.

   Two masks, composited to exclude: the outer covers the whole box, the
   inner covers everything inside the 1px padding, and excluding one from
   the other leaves exactly the 1px frame. -webkit- prefixes for Safari.

   It reads as light on an edge rather than as a border, which is why it
   lifts the wall without adding weight to it. */
/* The flat border is the base and stays. A browser without mask-composite
   would otherwise render the pseudo-element as a filled rectangle over the
   card, which is a much worse failure than no gradient at all: Safari below
   15.4 would show a pale block instead of an edge. @supports keeps the
   effect to browsers that can actually cut the middle out. */
.trv-card{position:relative !important;border:1px solid rgba(255,255,255,.09) !important}
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
.trv-card{border-color:transparent !important}
.trv-card::before{content:"" !important;position:absolute !important;inset:0 !important;border-radius:inherit !important;
  padding:1px !important;pointer-events:none !important;
  background:linear-gradient(150deg,
    rgba(255,255,255,.26) 0%,
    rgba(255,255,255,.10) 32%,
    rgba(255,255,255,.04) 62%,
    rgba(255,255,255,.02) 100%) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;mask-composite:exclude !important}}

/* The recommended-plan trick from the pricing table, borrowed: a card with
   a story in it earns a touch more light than a two word one. Applied by
   length rather than by hand, so it follows the content. */
.trv-card.is-long::before{background:linear-gradient(150deg,
  rgba(255,255,255,.34) 0%,
  rgba(255,255,255,.13) 32%,
  rgba(255,255,255,.05) 62%,
  rgba(255,255,255,.02) 100%) !important}

/* In blocks the text is always centred. Left was a switch when the cards
   were a fixed width and a short quote looked stranded; with a minimum
   height and the content centred in it, left alignment is a leftover. */
.trv-cols .trv-card{text-align:center !important}
.trv-cols .trv-stars{justify-content:center !important}
.trv-card{flex:0 0 auto !important;width:auto !important;min-width:190px !important;max-width:360px !important;
  padding:18px 20px !important;border-radius:var(--r-lg) !important;
  /* No fill. This is the seventh place on the site carrying the same .04
     tile with a .08 border, and here it is the least earned: a review card
     is pure content, there is nothing on it to click. Dropping the fill and
     keeping the outline makes the wall about the words rather than about
     the boxes, and it leaves the filled treatment to mean "this is a
     choice", which is what it should have meant all along. */
  background:none !important}
.trv-card .trv-stars{margin-bottom:12px !important}
.trv-card .trv-stars svg{width:15px !important;height:15px !important}
.trv-q{font-size:15px !important;line-height:1.6 !important;color:rgba(255,255,255,.78) !important;text-wrap:pretty !important}
.trv-q b{color:#fff !important;font-weight:600 !important}
.trv-by{margin-top:14px !important;font-size:12.5px !important;color:rgba(255,255,255,.4) !important}
.trv-dot{opacity:.4 !important;margin:0 6px !important}

.trv-ctrl{display:flex !important;justify-content:center !important;margin-top:8px !important}

/* prefers-reduced-motion stops it dead and lays the cards out as a grid.
   Not slower, stopped: the requirement is that motion can be turned off, and
   a slow marquee is still a marquee. */
@media(prefers-reduced-motion:reduce){
  .trv-row{mask-image:none !important;-webkit-mask-image:none !important;overflow:visible !important}
  .trv-track{animation:none !important;flex-wrap:wrap !important;width:auto !important;justify-content:center !important}
  .trv-card[aria-hidden="true"]{display:none !important}
  .trv-ctrl{display:none !important}
}

/* ══ MASONRY ══════════════════════════════════════════════════════════
   CSS columns, not a grid and not a script. Cards flow into whichever
   column has room, so nothing is stretched to match a neighbour and there
   is no dead space anywhere. break-inside is what stops a card being sawn
   in half across a column break, and it is the whole trick.

   Reading order runs down column one then column two, which is wrong for
   an article and fine here: no review is more important than another. */
/* ── CONTAINER, NOT VIEWPORT ───────────────────────────────────
   Applies to the short list below as well; the two padding queries on
   .trh-w stay on @media, because gutters answer to the screen edge and
   not to the box.

   @media measures the window. This section does not live in the window: in
   the preview it sits in a panel narrower than the screen, and in the built
   page it will sit inside a Cornerstone column that can also be narrower.
   Either way the query said "under 640" and every card filled the width.

   @container measures the parent, so the layout answers to the space it
   actually has. That is what "three columns above a thousand" was always
   supposed to mean, and it is the difference between a layout that works
   where it is put and one that works only at full bleed. */
.trv-wall .trh-w{container-type:inline-size !important}
.trv-cols{columns:1 !important;column-gap:16px !important}
@container (min-width:600px){.trv-cols{columns:2 !important}}
@container (min-width:940px){.trv-cols{columns:3 !important}}
/* ── LET THE TYPE DO IT, NOT THE BOX ───────────────────────────
   There was a min-height here, put in to even out the wall. Measured, it
   made the heights more equal (2.0x down to 1.5x) and paid for it with
   empty space in twelve of the seventeen cards. That is the wrong trade:
   a wall of cards at different heights is normal, which is what masonry is
   for, but a card with a hole in it is not. The eye reads density, not
   height.

   So the box follows its content and the TYPE carries the weight instead.
   A two word review is set at 21px, a middling one at 17, a paragraph at
   15. It is an old editorial rule, the one that sets a short pull quote
   large, and it turns the one-liners from leftovers into statements.

   The heights stay uneven. That is allowed. */
.trv-cols .trv-card{break-inside:avoid !important;-webkit-column-break-inside:avoid !important;
  width:auto !important;max-width:none !important;margin:0 0 16px !important;display:block !important}

/* ══ THE SHORT ONES ═══════════════════════════════════════════════════
   Nine reviews of one line each. A card apiece would be nine mostly empty
   boxes pretending to be more than they are; a band of lines reads as what
   it is, which is nine more people who agreed and did not elaborate.

   Still a real list with real names and dates. Quieter, not lesser. */

/* The marquee's own furniture only exists in that layout. */
.trv-wall.is-masonry,.trv-wall.is-split{overflow:visible !important}

/* ══ THE WAY OUT ══════════════════════════════════════════════════════ */
/* Continues the wall rather than starting after it. The gradient begins on
   --c-navy-2, the colour the wall ends on, so there is no seam: the button
   is the wall's conclusion, not a new chapter.

   It began on --c-close, copied from the pricing FAQ, which is a 1.23x step
   up in luminance and plainly visible. That step is right there, where the
   FAQ opens a new subject. It is wrong here. */
.trv-end{padding:clamp(36px,5vh,72px) 0 clamp(48px,7vh,104px) !important;
  background:linear-gradient(to bottom,
    var(--c-navy,#0c1927) 0,
    var(--c-navy,#0c1927) 60px,
    var(--ftr-bg,#0d1b2a) 100%) !important}
/* align-items:center, niet flex-start. Deze regel stond eerder twee keer in
   het bestand: hierboven met center, hier met flex-start. Gelijke
   specificiteit, dus deze won en de knop plakte links terwijl de tekst
   erboven wel gecentreerd was — text-align stond namelijk alleen in de
   andere regel. Nu één regel. */
.trv-end .trh-w{display:flex !important;flex-direction:column !important;
  align-items:center !important;text-align:center !important;gap:20px !important}
/* ── ÉÉN REGEL, ZONDER EEN BREEDTE TE GOKKEN ───────────────────
   Stond op max-width:44ch, wat de zin op twee regels brak.

   width:fit-content laat het blok precies zo breed worden als de zin nodig
   heeft, dus past hij op één regel zolang er ruimte is — welk lettertype er
   ook geladen wordt. Dat is het verschil met een vaste breedte kiezen: die
   klopt in één font en breekt in het volgende.

   De cap van 64ch is alleen een plafond, geen breedte. Gemeten is deze zin
   ongeveer 50ch, dus er zit ruimte in; schrijf je een langere afsluiter, dan
   wikkelt hij op een leesbare maat in plaats van over 1200px te lopen. En op
   een smal scherm wint max-width:100% en breekt hij gewoon. */
.trv-end-l{font-size:17px !important;line-height:1.6 !important;color:rgba(255,255,255,.68) !important;
  width:fit-content !important;max-width:min(64ch,100%) !important;
  text-wrap:pretty !important}

/* ══ panel ════════════════════════════════════════════════════════════ */
.tr-seg{display:inline-flex !important;flex-wrap:wrap !important;gap:4px !important;background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.1) !important;border-radius:10px !important;padding:5px !important}

/* ── THE PAUSE BUTTON ──────────────────────────────────────────
   Hidden until reviews.js marks it live. Without the script the click does
   nothing, and a control that does nothing is worse than no control: it
   promises a way to stop the motion and then does not deliver one.

   Reduced motion stops the marquee outright, so the button is redundant
   there and goes as well. */
/* The label is swapped between Pause and Resume by reviews.js, so it needs
   no styling of its own beyond inheriting the chip. Declared so the class
   is not an orphan: a class in the markup with no rule anywhere is how a
   typo hides. */
.trv-pause-t{display:inline !important}
.trv-pause{display:none !important}
.trv-pause.is-live{display:inline-flex !important}
@media(prefers-reduced-motion:reduce){.trv-ctrl{display:none !important}}

/* Hover pauses, and so does the class the button sets. Both, because a
   hover is not a mechanism under WCAG 2.2.2 and the button is. */
.trv-wall.is-paused .trv-track{animation-play-state:paused !important}