/* ════════════════════════════════════════════════════════════════════════
 *  Testroute — Pricing page  ·  v1.0.0
 *  Carries the shared trh- hero shell, lifted verbatim from about.css so
 *  heights, type and rhythm match every other page 1:1, then the page's own
 *  trp- styles. !important throughout = Cornerstone.
 *
 *  NOTHING FROM THE CTA SYSTEM IS REPEATED HERE. .tr-chip arrives globally
 *  from assets/css/tr-cta-system.css, loaded by the header module, and the
 *  first line of CTA-SYSTEM.md is that you reuse those classes rather than
 *  copy them onto a page. Only the chevron gets behaviour, below, because
 *  the global file defines icon movement for .tr-cta and nothing else.
 *
 *  HEADER SPACING. Only .trh-hero > .trh-w carries the top padding, as
 *  calc(var(--hdr-total-h,72px) + gap). Never a hard-coded header height.
 *
 *  NO CORNERSTONE WRAPPER RESET. No other page has one, and adding one makes
 *  this page sit tighter under the header than every sibling.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 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(.trp-page){overflow-x:clip !important}
.x-section:has(.trp-page),
.x-row:has(.trp-page),
.x-col:has(.trp-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. */
.trp-page [id]{scroll-margin-top:calc(var(--hdr-total-h, 56px) + 20px) !important}
@media(min-width:769px){
  .trp-page [id]{scroll-margin-top:calc(var(--hdr-total-h, 72px) + 20px) !important}
}

@media(prefers-reduced-motion:reduce){.trp-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}

/* ════════════════════════════════════════════════════════════════════════
 *  COMPARISON
 *  Lifted from the approved prototype with lift.py, which cuts by brace
 *  depth rather than by line pattern: a regex that deletes "a line plus its
 *  indented continuations" eats the closing brace of the @media it sits
 *  inside, and the result parses fine right up until the last rule silently
 *  ends up inside a media query. That happened, and csscheck.py caught it.
 * ════════════════════════════════════════════════════════════════════════ */


/* ══ the section ══════════════════════════════════════════════════════ */
.trp-compare{background:var(--c-navy-2) !important;padding:clamp(32px,4.5vh,72px) 0 !important}
.trp-h2{font-size:clamp(1.375rem,calc((100vw - 32px) * .089),2rem) !important;line-height:1.16 !important;
  font-weight:800 !important;letter-spacing:-.03em !important;color:#fff !important;margin-bottom:14px !important;text-wrap:balance !important;
  max-width:20ch !important}

/* The paragraph a model lifts. Higher contrast than body copy, because it is
   also the first thing a person reads.

   The hairline that used to sit on the left is gone. It was there to pair
   the paragraph with its heading when there were two of each; with one
   heading and one paragraph, position already says which belongs to which
   and the rule was doing nothing but taking up sixteen pixels. */
.trp-answer{font-size:var(--t-6,17px) !important;line-height:1.7 !important;color:rgba(255,255,255,.72) !important;
  max-width:68ch !important;margin-bottom:clamp(24px,3vh,36px) !important;text-wrap:pretty !important}

.trp-sr{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;
  clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}

/* ══ THE TABLE ════════════════════════════════════════════════════════ */
/* table-layout:fixed, and this is not tidiness. The glass panel is placed
   with calc(34% + n × 22%), which is only true if the columns really are
   34% and 22%. With the default auto layout the browser sizes columns by
   content, so a long feature name would widen the first column, every plan
   column would shrink, and the panel would sit next to the column it is
   meant to be behind rather than on it.

   It also stops the columns resizing as the rows differ, which is what CXL
   flags as the thing that makes a comparison hard to read: content that
   moves while you are scanning it. */
.trp-table{width:100% !important;border-collapse:collapse !important;text-align:left !important;table-layout:fixed !important}
.trp-table thead th:not(.trp-th-first){width:var(--hero-w) !important}

/* No wrapping in a plan column. A feature name that breaks onto two lines
   in one column and not another puts the ticks on different rows and the
   comparison stops lining up. */
.trp-table thead th:not(.trp-th-first),
.trp-table tbody td{white-space:nowrap !important}
.trp-table tbody th{white-space:normal !important}
/* ── ROW HEIGHT ────────────────────────────────────────────────
   9px of padding and a line-height of 1.35 rather than 13px and the root's
   1.5. A row goes from 48px to 39px, and seven rows from 336 to 273.

   39 is a floor, not a preference. Below about 36 the eye starts losing the
   line while it travels from the label to the right column, which is the
   one thing a comparison table has to make easy. The 44px minimum that
   applies to a button does not apply here: a row is not a tap target.

   The rows were more than half the height of the table, so this is where
   the space actually is.

   4.37.0 — de celtekst ging van 14.5 naar 14 (de schaal in frame.css kent
   geen halve stappen) en het padding ging van 9 naar 10 om dat te
   compenseren. Opnieuw gerekend: 20 + 14 x 1.35 = 38.9 tegen 18 + 14.5 x
   1.35 = 37.6 daarvoor. De rij wordt dus 1.3px HOGER, niet lager, en blijft
   ruim boven de 36 waar het oog de regel begint kwijt te raken. */
.trp-table th,.trp-table td{padding:10px 14px !important;font-size:var(--t-4,14px) !important;
  line-height:1.35 !important;vertical-align:middle !important}
.trp-table tbody th{font-weight:400 !important;color:rgba(255,255,255,.72) !important;
  border-bottom:1px solid var(--line) !important}
.trp-table tbody td{text-align:center !important;border-bottom:1px solid var(--line) !important}

/* Head. Weight rather than size, so it stays compact: raising the size is
   what makes a sticky head eat the screen. */
.trp-table thead th{vertical-align:bottom !important;padding-bottom:14px !important;
  border-bottom:1px solid var(--line) !important;text-align:center !important;position:relative !important}
.trp-table thead th.trp-th-first{width:34% !important;min-width:210px !important;text-align:left !important}
.trp-th-n{display:block !important;font-size:var(--t-5,15px) !important;font-weight:700 !important;color:#fff !important;letter-spacing:-.01em !important}
.trp-th-p{display:block !important;margin-top:6px !important;line-height:1.1 !important}
.trp-price{display:inline-flex !important;align-items:flex-start !important}
.trp-price-cur{font-size:var(--t-5,15px) !important;font-weight:700 !important;color:rgba(255,255,255,.5) !important;
  margin-top:4px !important;margin-right:1px !important}
.trp-price-n{font-size:26px !important;font-weight:800 !important;letter-spacing:-.03em !important;color:var(--c-off) !important;
  font-variant-numeric:tabular-nums !important;line-height:1.1 !important}
.trp-price-dec{font-size:26px !important;font-weight:800 !important;letter-spacing:-.03em !important;color:var(--c-off) !important;
  font-variant-numeric:tabular-nums !important;line-height:1.1 !important}

/* ── THE .99, QUIETED ──────────────────────────────────────────
   Smaller and dimmer, raised to sit against the top of the figure rather
   than on its baseline.

   Two reasons, and neither is decoration. It is the least useful part of
   the number: nobody chooses between plans on two pence, so it should not
   carry the same weight as the pounds. And a column of tabular figures
   scans as one shape, which is what makes £14 / £19 / £29 legible at a
   glance, while three full decimals give the eye three extra stops.

   Not made tiny. It still has to be readable, because a price with an
   unreadable decimal is the shape a reader distrusts. */
.trp-th-p.is-quiet .trp-price-dec{font-size:var(--t-4,14px) !important;font-weight:700 !important;letter-spacing:0 !important;
  color:rgba(255,255,255,.42) !important;margin-top:3px !important;align-self:flex-start !important}
.trp-th-p.is-quiet .trp-price-cur{margin-top:3px !important}
.trp-th-once{display:block !important;margin-top:2px !important;font-size:var(--t-2,12px) !important;color:rgba(255,255,255,.42) !important}

/* The recommended column. Light, never green: green is the button inside it,
   and the CTA system allows one meaning per colour. */
/* The cells carry no tint of their own: the panel behind them does it.
   Both together is a stripe inside a panel. */
.trp-table .is-hero,.trp-table thead th.is-hero{background:transparent !important}
/* ── THREE BADGES, ONE OF THEM LOUDER ──────────────────────────
   With a badge on every column the badge stops being what marks the
   recommended plan, so the panel has to do that job on its own. It does:
   Duke's finding is about a visually distinct COLUMN, not about a label.

   So the badges split into two weights. The recommended one keeps the solid
   off-white pill it had. The other two become outlines, which reads as a
   label on the plan rather than as a claim about it, and stops three pills
   competing for the same attention. */
.trp-badge{display:inline-block !important;margin-bottom:8px !important;padding:3px 9px !important;border-radius:999px !important;
  font-size:var(--t-1,11px) !important;font-weight:800 !important;letter-spacing:.06em !important;text-transform:uppercase !important;
  background:transparent !important;color:rgba(255,255,255,.5) !important;
  border:1px solid rgba(255,255,255,.16) !important}
.trp-table thead th.is-hero .trp-badge{background:var(--c-off) !important;color:var(--c-navy) !important;
  border-color:var(--c-off) !important}

/* The duration row no longer buys extra air. It already stands out through
   the bold figure, so the padding was doing the job twice. */
.trp-row-dur th,.trp-row-dur td{padding-top:12px !important;padding-bottom:12px !important}
.trp-row-dur td strong{font-size:var(--t-5,15px) !important;font-weight:700 !important;color:#fff !important}

/* Group headers. Rows grouped under a label mirror how the decision is made,
   and they stop a reader scanning six rows of identical ticks for a
   difference that is not there. */
.trp-group th{padding:15px 14px 6px !important;font-size:var(--t-1,11px) !important;font-weight:700 !important;letter-spacing:.12em !important;
  text-transform:uppercase !important;color:rgba(255,255,255,.34) !important;border-bottom:0 !important}

/* ── ONE BOX, TWO MARKS ────────────────────────────────────────
   The tick is an SVG and the dash is a text glyph, and those two things sit
   differently on a line. An inline SVG defaults to vertical-align:baseline,
   so its BOTTOM edge lands on the baseline and its optical centre is about
   8px above it. The dash is text and sits around half the x-height, roughly
   5px up. Three pixels apart, which is exactly enough to see when you scan
   a column top to bottom.

   The fix is not to match the glyphs but to give them the same box: 16 by 16
   for both, middle-aligned, with the dash centring itself inside via
   line-height and text-align. Then it stops mattering that one is a shape
   and the other is a letter. */
.trp-tick,.trp-no{display:inline-block !important;width:16px !important;height:16px !important;
  line-height:16px !important;vertical-align:middle !important;text-align:center !important}
.trp-tick{color:var(--c-green) !important}
.trp-no{color:rgba(255,255,255,.22) !important;font-size:var(--t-5,15px) !important}
/* ── THE BUTTON ROW ────────────────────────────────────────────
   Two things went wrong here at once and they made each other worse.

   text-align:center is set on `.trp-table tbody td`, so the foot never got
   it and inherited left from the table. And width:100% lost: the global
   .tr-cta:not(#_trcta) carries width:auto at 1,1,0, which beats a rule with
   three classes but no id. So each button was exactly as wide as its own
   label and all three sat left: "Get quick prep", "Get complete", "Get
   comfort", three widths, none lined up with its column.

   The same :not(#_trcta) that made the global rule win is what lets this one
   through, which is the pattern the CTA system documents for exactly this. */
.trp-table tfoot td{padding-top:16px !important;border-bottom:0 !important;
  text-align:center !important}
/* The button is full width through tr-cta--block, the documented
   modifier, rather than a local width rule. */

/* ── THE RECOMMENDED COLUMN ────────────────────────────────────
   One panel, not twenty four tinted cells. A tint per cell reads as a stripe
   through the rows; a panel reads as one plan lifted out of them, which is
   the only reason to mark a plan at all.

   Flat, and that was a decision rather than a default. A glass version was
   built and dropped: backdrop-filter refracts what is behind it, and behind
   a table on a flat navy section there is nothing, so it needed a green halo
   invented to do anything at all. A green glow behind the plan being sold is
   green as decoration, and the house rule reserves green for actions.

   What the column does need is to be distinct: Duke 2023 puts the lift from
   a visually distinct recommended plan at 35 to 50%. A border, a lighter
   fill, rounded corners and 14px of overhang do that on their own, which is
   what Notion and Linear use, and none of them blur anything.

   Placed with calc(34% + n x w%), which is only true because the table is
   table-layout:fixed. The two custom properties come from PHP, worked out
   from which plan carries highlighted, so it follows the data rather than a
   hardcoded column number. */
.trp-tablewrap{position:relative !important}

/* One panel, not twenty four tinted cells. A tint per cell reads as a
   stripe through the rows; a panel reads as one plan lifted out of them,
   which is the only reason to mark a plan at all. It also means one blur
   layer instead of one per cell, which is the difference between this
   being free and being the slowest thing on the page. */
.trp-hero-panel{position:absolute !important;z-index:0 !important;
  pointer-events:none !important;
  left:var(--hero-left) !important;width:var(--hero-w) !important;
  top:-14px !important;bottom:-14px !important;
  border-radius:var(--r-lg) !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.22) !important}

.trp-table{position:relative !important;z-index:1 !important}

/* ══ BELOW 860px ══════════════════════════════════════════════════════
   The same markup, restyled. Not a second rendering and not JavaScript:
   the crawler that matters does not run JS, and a table it cannot see is
   worth nothing to the thing this section exists for.

   Each plan becomes a card. The row labels come back through a data
   attribute, so a cell never reads as a lone tick with no name on it. */

/* Sideways scroll, kept only for comparison. The research is blunt that this
   is "technically responsive and practically unusable". */
.trp-tablewrap.is-scroll{overflow-x:auto !important;-webkit-overflow-scrolling:touch !important}
.trp-tablewrap.is-scroll .trp-table{min-width:680px !important}

/* ══ ONE VIEW AT A TIME ═══════════════════════════════════════════════
   860 is where three plan columns plus a label column stop fitting without
   the figures colliding. Below it the table is gone from the layout and
   from the accessibility tree, and the cards take over; above it the
   reverse. Never both, which is the one thing that has to be true. */
.trp-cards{display:grid !important;gap:14px !important}
.trp-tablewrap{display:none !important}
@media(min-width:860px){
  .trp-cards{display:none !important}
  .trp-tablewrap{display:block !important}}

/* ══ THE CARDS ════════════════════════════════════════════════════════ */
.trp-card{padding:20px !important;border-radius:var(--r-lg) !important;
  background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.08) !important}
/* The recommended one, same treatment as the desktop panel: lighter and
   lifted, never green. Green is the button inside it. */
.trp-card.is-hero{background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.16) !important;box-shadow:0 14px 34px rgba(0,0,0,.22) !important}
.trp-card .trp-badge{margin-bottom:10px !important}
.trp-card.is-hero .trp-badge{background:var(--c-off) !important;color:var(--c-navy) !important;
  border-color:var(--c-off) !important}
.trp-card-n{display:block !important;font-size:var(--t-5,15px) !important;font-weight:700 !important;color:#fff !important;
  letter-spacing:-.01em !important}
.trp-card .trp-th-p{display:block !important;margin-top:4px !important}
.trp-card-once{display:block !important;margin-top:2px !important;font-size:var(--t-2,12px) !important;color:rgba(255,255,255,.42) !important}
.trp-card-dur{display:block !important;margin-top:10px !important;padding-top:10px !important;
  border-top:1px solid var(--line) !important;font-size:var(--t-5,15px) !important;font-weight:600 !important;color:#fff !important}

/* Same tightening as the table rows, so the two views stay one design. A
   card row is 19px of text with a 7px gap instead of 9, which lands at the
   same rhythm as the table row. (14 x 1.35 = 18.9; was 14.5 x 1.35 = 19.6
   voordat de schaal de halve stappen eruit haalde.) */
.trp-card-list{list-style:none !important;margin:12px 0 18px !important;display:flex !important;
  flex-direction:column !important;gap:7px !important}
.trp-card-list li{display:flex !important;align-items:flex-start !important;gap:10px !important;
  font-size:var(--t-4,14px) !important;line-height:1.35 !important;color:rgba(255,255,255,.72) !important}
/* Not in this plan: dimmed, not hidden. The section is called "what is the
   difference", so a card that only listed what you get would be answering a
   different question. */
.trp-card-list li.is-off{color:rgba(255,255,255,.3) !important}
.trp-card-list .trp-tick,.trp-card-list .trp-no{flex:none !important;margin-top:2px !important}

/* ══ panel ════════════════════════════════════════════════════════════ */

/* Below 860 there is no column for a panel to sit behind, and the cards
   carry the emphasis instead. */
@media(max-width:859px){
  .trp-hero-panel{display:none !important}
}

/* ════════════════════════════════════════════════════════════════════════
 *  THE QUESTIONS, and the landing
 *
 *  Last section on the page, so it carries the house gradient: 60px of flat
 *  colour and then a fade to the footer background. Same formula as About,
 *  Work with us, Affiliate and Share a route, lifted verbatim rather than
 *  approximated, because a landing that is nearly the same is a seam.
 *
 *  <details> and <summary>. Trap 2 says never hand-roll an accordion, and
 *  the FAQ elsewhere on the site does exactly that with max-height:360px,
 *  which caps a long answer and animates out of step with its content. This
 *  needs no JavaScript either, which matters here more than usual: the
 *  crawler this page is written for does not run any.
 * ════════════════════════════════════════════════════════════════════════ */
.trp-faq{padding:clamp(32px,4.5vh,72px) 0 clamp(44px,6.5vh,100px) !important;
  background:linear-gradient(to bottom,
    var(--c-close,#1b2e42) 0,
    var(--c-close,#1b2e42) 60px,
    var(--ftr-bg,#0d1b2a) 100%) !important}

.trp-faq-list{max-width:820px !important;margin-top:8px !important;
  border-top:1px solid var(--line) !important}
.trp-q{border-bottom:1px solid var(--line) !important}
.trp-q-s{display:flex !important;align-items:center !important;
  justify-content:space-between !important;gap:16px !important;
  padding:18px 0 !important;cursor:pointer !important;list-style:none !important;
  font-size:var(--t-5,15px) !important;font-weight:600 !important;
  color:rgba(255,255,255,.85) !important;letter-spacing:-.01em !important;
  transition:color .15s !important}
/* details brings its own marker in two dialects. */
.trp-q-s::-webkit-details-marker{display:none !important}
.trp-q-s::marker{content:"" !important}
.trp-q-s:hover{color:#fff !important}
.trp-q-s svg{flex:none !important;color:rgba(255,255,255,.4) !important;
  transition:transform .2s var(--ease) !important}
.trp-q[open] .trp-q-s{color:#fff !important}
.trp-q[open] .trp-q-s svg{transform:rotate(90deg) !important}
.trp-q-a{padding:0 0 20px !important;max-width:70ch !important}
.trp-q-a p{font-size:var(--t-5,15px) !important;line-height:1.7 !important;
  color:rgba(255,255,255,.62) !important;text-wrap:pretty !important}


/* ── DE EENMALIG-REGEL EN DE TRUSTPILOT-RIJ ───────────────────────────
   .trp-nosub staat tussen de intro en de springchip. Zelfde toon als
   .trh-hero-status op road-signs en show-tell: klein, gedempt, geen kader.
   Het is een geruststelling, geen claim, en hij mag de H1 niet beconcurreren.

   .trh-trust is de gedeelde rij en heeft hier dezelfde maatvoering als op de
   andere hero's: 28px marge, een lijn, 18px eronder. Gemeten kost dat 83px
   en de nosub-regel 36; samen brengen ze de inhoud van 279 naar 398. */
.trp-nosub{margin:0 0 16px !important;font-size:var(--t-3,13px) !important;line-height:1.5 !important;
  color:rgba(255,255,255,.62) !important;font-weight:500 !important}
.trh-trust{display:flex !important;flex-wrap:wrap !important;align-items:center !important;
  gap:10px !important;row-gap:6px !important;margin-top:28px !important;padding-top:18px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  font-size:13.5px !important;color:rgba(255,255,255,.55) !important}