@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── shared root / tokens (identical to the other pillar pages) ──
   The negative-margin block is what breaks the section out of Cornerstone's
   column so it spans the viewport. Without it the whole page sits inset
   inside the page builder's container, which is exactly the too-narrow
   layout this replaced. */
.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-green:#03c988 !important; --c-green-d:#02a873 !important;
	--c-off:#f8f9fa !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;
}
/* text-transform:none undoes the X theme's uppercase headings. Without this
   the H1 renders in caps and inherits Cornerstone's type styling. */
.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}

/* THE gutter: only .trh-w carries it. Single class on purpose, so the hero
   rule below (.traff-hero > .trh-w, two classes) OUTRANKS this and its top
   padding wins. A three-class version such as .trh-root .trh-w.trh-w would
   beat the hero rule, force padding:0 and kill the header clearance. That is
   the "no padding under the header" bug documented in about.css. */
.trh-w{max-width:1200px !important;margin:0 auto !important;padding:0 16px !important}
@media(min-width:700px){.trh-w{padding:0 32px !important}}

/* ════════════════════════════════════════════════════════════════════
 *  HEADER CLEARANCE — the thing that is easy to get wrong
 *
 *  The padding goes on `.trh-hero > .trh-w`, NOT on the section. It is
 *  calc(var(--hdr-total-h) + gap), where --hdr-total-h is written to
 *  documentElement by header.js and equals barTop + barH, so it already
 *  includes the admin bar and the notification bar.
 *
 *  Two details that a hand-written value would miss:
 *   1. The FALLBACK changes from 56px to 72px at 769px, because the mobile
 *      header is shorter. A single fallback is wrong on one of the two.
 *   2. The gap grows from 20px to 24px at 1100px.
 *
 *  The bottom is clamp(44px, 6.5vh, 100px): the same viewport-relative
 *  rhythm the About page uses, so the section squeezes on a short laptop
 *  instead of holding a fixed value.
 *
 *  Values copied verbatim from modules/about/assets/about.css.
 * ════════════════════════════════════════════════════════════════════ */
.traff-hero{background:var(--c-navy) !important}
.traff-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){
	.traff-hero>.trh-w{padding:calc(var(--hdr-total-h,56px) + 20px) 32px clamp(44px, 6.5vh, 100px) !important}
}
@media(min-width:769px){
	.traff-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 20px) 32px clamp(44px, 6.5vh, 100px) !important}
}
@media(min-width:1100px){
	.traff-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 24px) 32px clamp(44px, 6.5vh, 100px) !important}
}

/* ── grid, breadcrumb en typografie: about.css ── */
.trh-hero-grid{display:block !important}
@media(min-width:900px){
	.trh-hero-grid{display:grid !important;grid-template-columns:1.1fr .9fr !important;column-gap:56px !important;align-items:center !important}
}

.trh-hero-bread{display:flex !important;align-items:center !important;gap:7px !important;font-size:12px !important;color:rgba(255,255,255,.55) !important;margin-bottom:clamp(1.5rem,1.2rem + 1.05vw,2rem) !important}
.trh-hero-bread a{color:inherit !important;text-decoration:none !important}
.trh-hero-bread a:hover{color:rgba(255,255,255,.85) !important}
.trh-hero-bread-sep{color:rgba(255,255,255,.3) !important}
.trh-hero-bread-cur{color:rgba(255,255,255,.8) !important;font-weight:500 !important}

.trh-hero-h1{margin:0 !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;text-transform:none !important}
/* Only used when a forced second line is filled in. Left empty, the heading
   wraps naturally like every other H1 on the site. display:block rather than
   a max-width in ch, because a ch value shifts the moment the type size or
   the wording changes. */
.traff-h1-break{display:block !important}

.trh-hero-intro{font-size:16.5px !important;color:rgba(255,255,255,.62) !important;line-height:1.65 !important;margin:clamp(1.1rem,.9rem + .6vw,1.35rem) 0 clamp(1.75rem,.8rem + 1.4vw,2rem) !important;max-width:540px !important}

/* ── action row: .trdtc-hero-cta from the DTC hero ──
   Primary first, text link to its right. flex-wrap drops it onto a second
   line on narrow screens rather than letting it squeeze. */
.traff-cta-row{display:flex !important;align-items:center !important;gap:16px !important;flex-wrap:wrap !important}

/* ── trust bar ──
   Shared .trh-trust, the same values as the About, Show me tell me and
   Work With Us heroes: 28px above, an 18px gap under a 1px rule, 13.5px
   type. The contents come from tr_trustpilot_render(), so a change to the
   rating or the review count lands here too. */
.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 var(--line,rgba(255,255,255,.10)) !important;font-size:13.5px !important;color:rgba(255,255,255,.55) !important}

/* ── illustration ──
   Rendered by tr_hero_visual( 'affiliate' ) from includes/hero-illustrations.php,
   so it shares the wrapper, the drawing language and the size with the other
   hub heroes. .trh-herofill sits at 300px, the same as show me tell me. */
.traff-vis{display:none !important}
@media(min-width:900px){.traff-vis{display:block !important}}
.trh-herofill{position:relative !important;width:100% !important;max-width:300px !important;margin:0 auto !important;z-index:1 !important}
.trh-herofill-svg{display:block !important;width:100% !important;height:auto !important}

/* ════════════════════════════════════════════════════════════════════
 *  SECTION 2 — What you earn
 *
 *  Same shape as What you get on Work with us: three values, a marker
 *  stroke that draws itself, and one piece of proof.
 *
 *  The payout is deliberately NOT here. It lives in step 3 of the next
 *  section, and having it in both places made that step the only one in
 *  the three-step run that added nothing.
 *
 *  Descriptions run 41 to 64 characters. Inside that band each one takes
 *  the same number of lines at every column width, from 236px at the
 *  breakpoint to 290px above it. subgrid keeps the rows level even if the
 *  copy changes later.
 * ════════════════════════════════════════════════════════════════════ */
.traff-earn{background:var(--c-navy-2,#0f1d2c) !important;padding:clamp(32px,4.5vh,72px) 0 clamp(44px,6.5vh,100px) !important;scroll-margin-top:calc(var(--hdr-total-h,72px) + 24px) !important}
.traff-head{max-width:620px !important;margin-bottom:40px !important}
.traff-kicker{display:block !important;font-size:11px !important;line-height:1.4 !important;font-weight:700 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:rgba(255,255,255,.34) !important;margin-bottom:16px !important}
.traff-h2{font-size:clamp(1.375rem,calc((100vw - 32px) * 0.089),2.25rem) !important;line-height:1.16 !important;font-weight:800 !important;color:#fff !important;letter-spacing:-.03em !important;text-wrap:balance !important}

.traff-earns{display:grid !important;grid-template-columns:1fr !important;gap:34px !important;margin:0 !important}
@media(min-width:860px){
	.traff-earns{grid-template-columns:repeat(3,1fr) !important;grid-template-rows:auto auto !important;column-gap:44px !important;row-gap:0 !important}
	.traff-earn-i{display:grid !important;grid-template-rows:subgrid !important;grid-row:span 2 !important}
}
@media(min-width:1100px){.traff-earns{column-gap:64px !important}}
.traff-earn-i dt{font-size:28px !important;font-weight:800 !important;color:var(--c-off,#f8f9fa) !important;letter-spacing:-.03em !important;margin:0 !important}
@media(min-width:700px){.traff-earn-i dt{font-size:31px !important}}
.traff-earn-i dd{font-size:14.5px !important;line-height:1.68 !important;color:rgba(255,255,255,.5) !important;max-width:290px !important;margin:18px 0 0 !important}

/* Marker position from the W3C guidance: top of the stroke 0.28em below the
   baseline, which clears Inter's descenders at about 0.22em. The thickness
   drives the padding, so changing it moves the stroke automatically.
   nowrap so a two-word value never splits the stroke in half. */
.traff-v{position:relative !important;display:inline-block !important;white-space:nowrap !important;line-height:1 !important;--mo:.28em;--mt:.34em;--md:.22em;padding-bottom:calc(var(--mo) + var(--mt) - var(--md)) !important}
.traff-v-t{position:relative !important;z-index:2 !important}
/* 700ms with a gentler ease-out than the house curve. cubic-bezier(.22,1,.36,1)
   is at 67 per cent after a fifth of the time, so a stroke on it looks done
   in 150ms: you see the result, not the drawing. */
.traff-mark{position:absolute !important;left:-.06em !important;right:-.06em !important;bottom:0 !important;height:var(--mt) !important;z-index:1 !important;opacity:.45 !important;background-repeat:no-repeat !important;background-size:100% 100% !important;transform-origin:left center !important;transform:scaleX(0) !important;transition:transform 700ms cubic-bezier(.33,1,.68,1) var(--d,0ms) !important;will-change:transform !important}
.traff-earn-i[data-in] .traff-mark{transform:scaleX(1) !important}

.traff-proof{margin:42px 0 0 !important;padding-top:26px !important;border-top:1px solid rgba(255,255,255,.07) !important}
.traff-dash{max-width:460px !important;border-radius:12px !important;background:rgba(255,255,255,.03) !important;border:.5px solid rgba(255,255,255,.09) !important;overflow:hidden !important}
.traff-dash-h{display:flex !important;align-items:center !important;gap:9px !important;padding:11px 16px !important;border-bottom:1px solid rgba(255,255,255,.06) !important}
.traff-dash-dot{width:7px !important;height:7px !important;border-radius:50% !important;background:var(--c-green,#03c988) !important;flex:none !important}
.traff-dash-t{font-size:12.5px !important;font-weight:600 !important;color:rgba(255,255,255,.7) !important;margin-right:auto !important}
.traff-dash-live{font-size:10px !important;font-weight:700 !important;letter-spacing:.08em !important;text-transform:uppercase !important;color:rgba(3,201,136,.75) !important}
.traff-dash-tbl{width:100% !important;border-collapse:collapse !important}
.traff-dash-tbl th{font-size:10.5px !important;font-weight:700 !important;letter-spacing:.07em !important;text-transform:uppercase !important;color:rgba(255,255,255,.3) !important;text-align:right !important;padding:10px 16px 6px !important}
.traff-dash-tbl th:first-child{text-align:left !important}
.traff-dash-tbl td{font-size:13.5px !important;color:rgba(255,255,255,.62) !important;text-align:right !important;padding:8px 16px !important;border-top:1px solid rgba(255,255,255,.05) !important;font-variant-numeric:tabular-nums !important}
.traff-dash-l{text-align:left !important;color:rgba(255,255,255,.45) !important}
.traff-dash-a{color:rgba(255,255,255,.88) !important;font-weight:700 !important}
.traff-proof figcaption{margin-top:11px !important;font-size:12px !important;line-height:1.6 !important;color:rgba(255,255,255,.32) !important}

/* ════════════════════════════════════════════════════════════════════
 *  SECTION 3 — How it works
 *
 *  The three steps from the NL page, with three changes: they sit ON a
 *  route instead of being loose circles, there are three columns instead
 *  of two plus one, and it is left aligned like the rest of the site.
 *
 *  The route is the construction from the hero illustration: a line with
 *  ringed markers on it. It draws itself left to right and the markers
 *  come up behind it, so it reads as a route being driven rather than
 *  three things appearing.
 * ════════════════════════════════════════════════════════════════════ */
.traff-how{background:var(--c-oefen,#122131) !important;padding:clamp(32px,4.5vh,72px) 0 clamp(44px,6.5vh,100px) !important;scroll-margin-top:calc(var(--hdr-total-h,72px) + 24px) !important}
.traff-steps{position:relative !important;display:grid !important;grid-template-columns:1fr !important;gap:34px !important;list-style:none !important;margin:0 !important;padding:0 !important}
@media(min-width:860px){
	.traff-steps{grid-template-columns:repeat(3,1fr) !important;grid-template-rows:auto auto auto !important;column-gap:44px !important;row-gap:0 !important}
	.traff-step{display:grid !important;grid-template-rows:subgrid !important;grid-row:span 3 !important}
}
@media(min-width:1100px){.traff-steps{column-gap:64px !important}}

.traff-route{position:absolute !important;left:15px !important;top:9px !important;bottom:9px !important;width:2px !important;overflow:hidden !important;z-index:0 !important}
.traff-route-l{display:block !important;width:100% !important;height:100% !important;background:rgba(174,188,203,.22) !important;transform:scaleY(0) !important;transform-origin:top center !important;transition:transform 700ms cubic-bezier(.33,1,.68,1) !important}
.traff-steps[data-in] .traff-route-l{transform:scaleY(1) !important}
@media(min-width:860px){
	.traff-route{left:15px !important;right:15px !important;top:15px !important;bottom:auto !important;width:auto !important;height:2px !important}
	.traff-route-l{transform:scaleX(0) !important;transform-origin:left center !important}
	.traff-steps[data-in] .traff-route-l{transform:scaleX(1) !important}
}
.traff-step{position:relative !important;z-index:1 !important;padding-left:46px !important}
@media(min-width:860px){.traff-step{padding-left:0 !important}}
.traff-marker{position:absolute !important;left:0 !important;top:0 !important;width:32px !important;height:32px !important;border-radius:50% !important;display:grid !important;place-items:center !important;background:var(--c-oefen,#122131) !important;border:1.5px solid rgba(174,188,203,.4) !important;color:rgba(255,255,255,.75) !important;opacity:0 !important;transform:scale(.7) !important;transition:opacity .4s cubic-bezier(.33,1,.68,1),transform .4s cubic-bezier(.33,1,.68,1) !important;transition-delay:calc(300ms + var(--i) * 180ms) !important}
.traff-steps[data-in] .traff-marker{opacity:1 !important;transform:scale(1) !important}
@media(min-width:860px){.traff-marker{position:static !important;margin-bottom:20px !important}}
.traff-marker-n{font-size:13.5px !important;font-weight:700 !important;line-height:1 !important;font-variant-numeric:tabular-nums !important}
.traff-st{font-size:18px !important;line-height:1.3 !important;font-weight:700 !important;color:var(--c-off,#f8f9fa) !important;letter-spacing:-.015em !important;margin:0 !important}
@media(min-width:700px){.traff-st{font-size:19.5px !important}}
.traff-sd{font-size:14.5px !important;line-height:1.68 !important;color:rgba(255,255,255,.5) !important;max-width:290px !important;margin:9px 0 0 !important}

/* Without this row the section came out a third shorter than the one above
   it, 458px against 685px, which reads as an interlude rather than a
   chapter. The alt line is a quiet link and not a second button: it sends
   instructors to the right page instead of letting the two compete. */
.traff-how-cta{display:flex !important;align-items:center !important;flex-wrap:wrap !important;gap:14px 22px !important;margin-top:44px !important;padding-top:26px !important;border-top:1px solid var(--line,rgba(255,255,255,.10)) !important}
.traff-alt{font-size:13.5px !important;color:rgba(255,255,255,.38) !important}
.traff-alt a{color:rgba(255,255,255,.62) !important;text-decoration:none !important;border-bottom:1px solid rgba(255,255,255,.16) !important;padding-bottom:1px !important}
.traff-alt a:hover{color:#fff !important}

/* ════════════════════════════════════════════════════════════════════
 *  SECTION 4 — Before you join
 *
 *  Fades into the footer, the same construction as .tra-close on About:
 *  solid for the first 60px, then across to the footer colour. The ladder
 *  climbs to #152536 and the footer drops back to #0d1b2a, and this bridges
 *  that step instead of leaving a hard edge.
 * ════════════════════════════════════════════════════════════════════ */
.traff-ask{background:linear-gradient(to bottom,var(--c-deep,#152536) 0,var(--c-deep,#152536) 60px,var(--ftr-bg,#0d1b2a) 100%) !important;padding:clamp(32px,4.5vh,72px) 0 clamp(44px,6.5vh,100px) !important;scroll-margin-top:calc(var(--hdr-total-h,72px) + 24px) !important}
.traff-doubts{display:grid !important;grid-template-columns:1fr !important;gap:0 !important;margin:0 !important}
@media(min-width:820px){.traff-doubts{grid-template-columns:1fr 1fr !important;column-gap:56px !important}}
.traff-doubt{padding:16px 0 !important;border-top:1px solid rgba(255,255,255,.10) !important}
.traff-doubt:first-child{border-top:0 !important;padding-top:0 !important}
@media(min-width:820px){.traff-doubt:nth-child(2){border-top:0 !important;padding-top:0 !important}}
.traff-doubt dt{font-size:15px !important;font-weight:600 !important;color:rgba(255,255,255,.84) !important;line-height:1.45 !important;margin:0 !important}
.traff-doubt dd{font-size:14.5px !important;line-height:1.6 !important;color:rgba(255,255,255,.5) !important;margin:5px 0 0 !important}
.traff-ask-cta{display:flex !important;align-items:center !important;flex-wrap:wrap !important;gap:14px 20px !important;margin-top:34px !important;padding-top:26px !important;border-top:1px solid rgba(255,255,255,.10) !important}
.traff-note{font-size:13.5px !important;color:rgba(255,255,255,.38) !important}

@media (prefers-reduced-motion: reduce){
	.traff-mark{transform:scaleX(1) !important;transition:none !important}
	.traff-route-l{transform:none !important;transition:none !important}
	.traff-marker{opacity:1 !important;transform:none !important;transition:none !important}
}


/* ── SPRINGRIJ ────────────────────────────────────────────────────────
   Zelfde vorm als .tsmt-hero-jump op road-signs en show-tell: een rij
   chips onder de trust-rij die naar de secties hieronder springt.

   De chip komt uit het gedeelde CTA-systeem (.tr-chip, 34px hoog), niet
   uit een eigen kopie. Met de marge erboven kost de rij 70px, wat de
   inhoud van deze hero van 362 op 432 brengt — binnen de band van 425 tot
   445 waar manoeuvres, show-tell, road-signs en share-routes in zitten.

   36px marge, dezelfde afstand die show-tell aanhoudt tussen de trust-rij
   en de springrij. */
.traff-hero-jump{display:flex !important;flex-wrap:wrap !important;gap:8px !important;
  margin-top:36px !important;max-width:600px !important}
@media(max-width:599px){.traff-hero-jump{gap:6px !important;margin-top:30px !important;max-width:none !important}}

/* ── AL AFFILIATE? ───────────────────────────────────────────────────
   Onder de knoppenrij, gedempt. Wie hier voor het eerst komt moet hem
   kunnen negeren; wie terugkomt moet hem kunnen vinden. Zelfde toon als
   .trp-nosub op de prijspagina: klein, geen kader, geen tweede knop. */
.traff-hero-login{margin:14px 0 0 !important;font-size:13px !important;line-height:1.5 !important;
  color:rgba(255,255,255,.45) !important}
.traff-hero-login a{color:var(--c-green) !important;text-decoration:underline !important;
  text-underline-offset:2px !important;font-weight:500 !important;white-space:nowrap !important}
.traff-hero-login a:hover{color:var(--c-green-d) !important}