/* Tradelink Promotions. All classes use the tl- prefix. */

:root {
  --tl-card-radius: 12px;
  --tl-card-shadow: 0 2px 12px rgba(19, 38, 68, .10);
  --tl-light-blue: #e8eff7; /* TL Light Blue: separates content from white */
  --tl-blue: #003087;
  --tl-dark-blue: #132644; /* text and headings only, never backgrounds */
  --tl-stone: #e5e4de;
  --tl-light-stone: #f6f5f4;
  --tl-white: #fff;
  --tl-ink: #132644;
  --tl-max: 1320px;
}

/* Base (scoped to our pages) */
.tl-site *, .tl-site *::before, .tl-site *::after { margin: 0; padding: 0; box-sizing: border-box; }
html:has(.tl-site) { scroll-behavior: smooth; scrollbar-gutter: stable; }
/* While a popup is open the page behind it does not scroll. */
html.tl-lock, html.tl-lock body { overflow: hidden; }
.tl-site { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.55; color: var(--tl-ink); background: var(--tl-white); margin: 0; padding: 0; }
.tl-site a { color: var(--tl-blue); }
.tl-site a, .tl-site button, .tl-site select, .tl-site [role="button"] { -webkit-tap-highlight-color: transparent; }
.tl-site button:focus:not(:focus-visible) { outline: none; }
.tl-dialog h3:focus { outline: none; }
.tl-site a:focus-visible, .tl-site button:focus-visible { outline: 3px solid var(--tl-blue); outline-offset: 2px; }
.tl-site h1, .tl-site h2, .tl-site h3, .tl-site h4 { color: inherit; font-weight: 700; line-height: 1.25; }
.tl-site h1, .tl-site h2, .tl-h-cond { font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.08; }
.tl-site section[id], .tl-site footer[id] { scroll-margin-top: 96px; }
.tl-site ul { list-style: none; }
.tl-site img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .tl-dialog[open], .tl-dialog[open]::backdrop, .tl-dialog[open].tl-closing, .tl-dialog[open].tl-closing::backdrop { animation: none; } html:has(.tl-site) { scroll-behavior: auto; } .tl-site *, .tl-site *::before, .tl-site *::after { transition: none !important; } }

/* Full-bleed page: the content column is capped inside each section (.tl-wrap), so there is no outer frame. */
.tl-page { background: var(--tl-white); }
.tl-wrap { max-width: var(--tl-max); margin: 0 auto; padding: 0 clamp(24px, 3vw, 48px); }
.tl-site .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tl-skip { position: absolute; left: -9999px; background: var(--tl-white); color: var(--tl-blue); padding: 10px 16px; z-index: 99; }
.tl-skip:focus { left: 12px; top: 12px; }

/* Utility bar */
.tl-utility { background: var(--tl-blue); color: var(--tl-white); font-size: 13px; }
.tl-utility .tl-wrap { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 16px; }
.tl-utility a { color: var(--tl-white); text-decoration: none; margin-left: 20px; }
.tl-utility a:first-child { margin-left: 0; }
.tl-utility a:hover { text-decoration: underline; }

/* Header */
.tl-header { background: var(--tl-white); border-bottom: 1px solid var(--tl-stone); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 12px rgba(19, 38, 68, .07); }
.tl-header .tl-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.tl-logo { flex: 0 0 auto; }
.tl-logo img { display: block; height: 40px; width: auto; max-width: none; }
.tl-nav { display: flex; align-items: center; gap: 28px; }
/* The underline grows from the centre outwards on hover and is fully drawn on the current page. */
.tl-nav a { position: relative; color: var(--tl-ink); text-decoration: none; font-weight: 500; font-size: 15px; padding: 6px 0 8px; transition: color .2s ease; }
.tl-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tl-blue); transform: scaleX(0); transform-origin: center; transition: transform .25s ease; }
.tl-nav a:hover, .tl-nav a:focus-visible, .tl-nav a[aria-current] { color: var(--tl-blue); }
.tl-nav a:hover::after, .tl-nav a:focus-visible::after, .tl-nav a[aria-current]::after { transform: scaleX(1); }

/* Buttons */
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--tl-blue); color: var(--tl-white) !important; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; padding: 12px 22px; border: 2px solid var(--tl-blue); border-radius: 8px; cursor: pointer; font-family: inherit; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.tl-btn[hidden] { display: none; }
.tl-btn svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; }
/* Icons, and the words in tags: the offsets are set at Tradelink > Icons (printed as variables in the page head). */
.tl-header .tl-btn svg { position: relative; top: var(--tl-icon-signin, -2px); }
.tl-icon-apply svg { position: relative; top: var(--tl-icon-apply, 0); }
.tl-icon-register svg { position: relative; top: var(--tl-icon-register, 0); }
.tl-icon-vacancies svg { position: relative; top: var(--tl-icon-vacancies, 0); }
.tl-btn--sm { padding: 10px 18px; font-size: 13px; }
.tl-btn:hover { background: #00266b; border-color: #00266b; }
.tl-btn--ghost { background: transparent; border-color: var(--tl-white); }
.tl-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--tl-white); }
.tl-btn--ghost-blue { background: transparent; color: var(--tl-blue) !important; }
.tl-btn--ghost-blue:hover { background: var(--tl-blue); color: var(--tl-white) !important; }

/* Tags */
.tl-btn--light { background: var(--tl-white); border-color: var(--tl-white); color: var(--tl-blue) !important; }
.tl-btn--light:hover { background: var(--tl-light-blue); border-color: var(--tl-light-blue); }
.tl-tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 12px; border-radius: 100px; font-family: 'Roboto Condensed', sans-serif; }
.tl-tag--nat { background: var(--tl-blue); color: var(--tl-white); }
.tl-tag--reg { background: var(--tl-stone); color: var(--tl-dark-blue); }
.tl-tag--type { background: var(--tl-light-blue); color: var(--tl-blue); }
.tl-tag--end { background: var(--tl-white); border: 1px solid var(--tl-dark-blue); color: var(--tl-dark-blue); }

/* Sections */
.tl-sec { padding: 64px 0; }
.tl-sec-head { margin-bottom: 28px; }
.tl-sec-head h2 { font-size: clamp(24px, 3vw, 34px); color: var(--tl-dark-blue); }
.tl-sec-head p { color: #4a5468; margin-top: 10px; }

/* Hero takeover (desktop 1920x625, mobile 786x717) */
.tl-hero-takeover { padding: 0; background: var(--tl-blue); }
.tl-hero-takeover[hidden] { display: none; }
.tl-hero-takeover > a, .tl-hero-slide > a { display: block; }
.tl-hero-takeover img { display: block; width: 100%; height: auto; }
/* Hero promotion bar: a promotion's card details on blue, under the hero image. */
.tl-hpromo { background: var(--tl-blue); color: var(--tl-white); border-top: 1px solid rgba(255, 255, 255, .14); padding: 18px 0; }
.tl-hpromo[hidden] { display: none; }
.tl-hpromo .tl-wrap { display: flex; align-items: center; gap: 16px 28px; }
.tl-hpromo-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tl-hpromo-title { font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; font-size: clamp(22px, 2.2vw, 28px); color: var(--tl-white); margin: 2px 0 0; }
.tl-hpromo .tl-promo-tags { margin: 0; }
.tl-hpromo .tl-tag { background: rgba(255, 255, 255, .16); color: var(--tl-white); border: 0; }
.tl-hpromo .tl-promo-tags .tl-tag { padding-top: calc(6px + var(--tl-icon-tag_hero, 0px)); padding-bottom: calc(2px - var(--tl-icon-tag_hero, 0px)); }
.tl-hpromo .tl-tag--end { background: transparent; border: 1px solid rgba(255, 255, 255, .7); }
.tl-hpromo .tl-promo-desc { max-width: 80ch; color: rgba(255, 255, 255, .92); }
.tl-hpromo .tl-promo-tbc { color: rgba(255, 255, 255, .78); font-style: italic; }
.tl-hpromo .tl-link-btn { color: var(--tl-white); }
.tl-hpromo-side { display: contents; }
.tl-hpromo-info { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tl-hpromo .tl-promo-count { border-left: 0; padding-left: 0; min-width: 0; text-align: center; }
.tl-hpromo .tl-count-num, .tl-hpromo .tl-count-soon, .tl-hpromo .tl-count-label { color: var(--tl-white); }
.tl-hpromo .tl-count-num { font-size: 44px; }
.tl-hpromo .tl-promo-facts { justify-content: center; color: rgba(255, 255, 255, .92); }
.tl-hpromo .tl-fact svg { stroke: var(--tl-white); }
.tl-hpromo .tl-fact--tbc { color: rgba(255, 255, 255, .8); }
.tl-hpromo .tl-promo-actions { margin-left: 0; justify-content: center; }
.tl-hpromo .tl-btn--ghost-blue { background: transparent; border-color: var(--tl-white); color: var(--tl-white) !important; }
.tl-hpromo .tl-btn--ghost-blue:hover { background: var(--tl-white); color: var(--tl-blue) !important; }
/* Tablets and desktop, left to right: days left, a vertical line, the title and tags on one row with the description and terms link under them, then the dates and buttons. */
@media (min-width: 768px) {
  .tl-hpromo .tl-promo-count { order: 1; align-self: stretch; justify-content: center; padding-right: 28px; border-right: 1px solid rgba(255, 255, 255, .28); }
  .tl-hpromo-main { order: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
  .tl-hpromo-title { order: 1; margin: 0; }
  .tl-hpromo .tl-promo-tags { order: 2; }
  .tl-hpromo-text { order: 3; flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
  .tl-hpromo .tl-promo-desc { margin: 0; }
  .tl-hpromo-info { order: 3; }
}
@media (max-width: 767px) {
  /* Phones, one column that reads like a promotion card: days left, tags, title, description and terms link, then the dates and full width buttons under a thin line. Everything is left aligned and in the normal flow, so nothing overlaps at any width. */
  .tl-hpromo { padding: 20px 0 22px; }
  .tl-hpromo .tl-wrap { flex-direction: column; align-items: stretch; gap: 12px; text-align: left; }
  .tl-hpromo-main { width: 100%; align-items: flex-start; text-align: left; gap: 8px; }
  .tl-hpromo-text { display: contents; }
  .tl-hpromo-title { font-size: 22px; }
  .tl-hpromo .tl-promo-tags { width: 100%; justify-content: flex-start; padding: 0; }
  .tl-hpromo .tl-promo-count { order: -1; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; width: auto; min-width: 0; text-align: left; }
  .tl-hpromo .tl-count-num { font-size: 36px; line-height: 1; }
  .tl-hpromo .tl-count-soon { font-size: 18px; }
  .tl-hpromo .tl-count-label { margin-top: 0; font-size: 13px; letter-spacing: .08em; white-space: nowrap; }
  .tl-hpromo-info { width: 100%; align-items: stretch; gap: 14px; text-align: left; }
  .tl-hpromo .tl-promo-facts { justify-content: flex-start; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); }
  .tl-hpromo .tl-promo-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
  .tl-hpromo .tl-promo-actions .tl-btn { width: 100%; max-width: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tl-hpromo .tl-wrap { gap: 16px 20px; }
  .tl-hpromo .tl-promo-count { padding-right: 18px; }
  .tl-hpromo .tl-count-num { font-size: 36px; }
  .tl-hpromo-title { font-size: 24px; }
}

/* Hero carousel: the banners sit on top of each other and cross-fade, so the hero is as tall as its tallest banner. */
.tl-hero-carousel { position: relative; }
.tl-hero-slides { display: grid; touch-action: pan-y; }
.tl-hero-stage { position: relative; }
.tl-hero-slide, .tl-hero-barslot { grid-area: 1 / 1; min-width: 0; }
.tl-hero-bars { display: grid; }
.tl-hero-carousel:not(.tl-ready) .tl-hero-slide:not(.tl-active), .tl-hero-carousel:not(.tl-ready) .tl-hero-barslot:not(.tl-active) { display: none; }
.tl-hero-carousel.tl-ready .tl-hero-slide, .tl-hero-carousel.tl-ready .tl-hero-barslot { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.tl-hero-carousel.tl-ready .tl-hero-slide.tl-active, .tl-hero-carousel.tl-ready .tl-hero-barslot.tl-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.tl-hero-controls { display: none; }
.tl-hero-carousel.tl-ready .tl-hero-controls { display: block; }
.tl-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(19, 38, 68, .55); color: #fff; cursor: pointer; }
.tl-hero-arrow svg { width: 22px; height: 22px; }
.tl-hero-prev { left: 14px; }
.tl-hero-next { right: 14px; }
.tl-hero-arrow:hover { background: rgba(19, 38, 68, .8); }
.tl-hero-bar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 2px; padding: 3px 10px; border-radius: 999px; background: rgba(19, 38, 68, .55); }
.tl-hero-dot { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.tl-hero-dot::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.tl-hero-dot.tl-active::before { background: #fff; }
.tl-hero-pause { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.tl-hero-pause svg { width: 14px; height: 14px; }
.tl-hero-pause .tl-i-play { display: none; }
.tl-hero-pause.tl-paused .tl-i-pause { display: none; }
.tl-hero-pause.tl-paused .tl-i-play { display: block; }
.tl-hero-arrow:focus-visible, .tl-hero-dot:focus-visible, .tl-hero-pause:focus-visible { outline: 3px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 5px var(--tl-blue); }
@media (max-width: 767px) {
  .tl-hero-arrow { width: 36px; height: 36px; }
  .tl-hero-arrow svg { width: 18px; height: 18px; }
  .tl-hero-prev { left: 8px; }
  .tl-hero-next { right: 8px; }
  .tl-hero-bar { bottom: 8px; }
}

/* Sections alternate so the page stays divided. Promotions page: hero promotion bar, light blue (live promotions), white (winners), light blue (app band), blue (credit tiles, matches the footer), blue footer. Careers: white, light blue (cadet), white (pillars), blue footer. */
#live, #careers { background: var(--tl-light-blue); }

/* Filters */
.tl-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 26px; }
.tl-region { display: none; }
.tl-sort { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tl-sort .tl-select-btn { min-width: 210px; min-height: 40px; }
.tl-chip { font-size: 14px; font-weight: 500; padding: 7px 16px; border: 1px solid #d3dae6; border-radius: 100px; background: var(--tl-white); color: var(--tl-ink); cursor: pointer; font-family: inherit; }
.tl-chip[aria-pressed="true"] { background: var(--tl-blue); color: var(--tl-white); border-color: var(--tl-blue); }
.tl-chip:hover { border-color: var(--tl-blue); }
.tl-chip { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }

/* Promotions (banner-format rows) */
.tl-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.tl-promo { border: 1px solid var(--tl-stone); border-radius: var(--tl-card-radius); box-shadow: var(--tl-card-shadow); background: var(--tl-white); display: flex; flex-direction: column; overflow: hidden; }
/* Banners show at their natural ratio: never cropped or stretched, whatever size the supplier sends. */
.tl-promo-art { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--tl-stone); }
.tl-promo-body { padding: 24px 28px 20px; display: flex; align-items: stretch; gap: 28px; flex: 1; }
.tl-promo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* Days-left countdown: blue number on the right of the card (filled in by main.js). */
.tl-promo-count { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 132px; padding-left: 28px; border-left: 1px solid var(--tl-stone); text-align: center; }
.tl-promo-count[hidden] { display: none; }
.tl-count-num { font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif; font-weight: 700; font-size: 64px; line-height: 1; color: var(--tl-blue); }
.tl-count--text .tl-count-num { font-size: 40px; }
.tl-promo-count--soon { min-width: 170px; }
.tl-count-soon { font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-blue); display: block; width: min-content; text-align: center; }
.tl-count-label { margin-top: 6px; font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-dark-blue); }
.tl-promo-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: -5px 0 5px; }
/* The condensed capitals sit a little high in the pill, so the padding is weighted to the top. */
.tl-promo-tags .tl-tag { padding: calc(6px + var(--tl-icon-tag_card, 0px)) 12px calc(2px - var(--tl-icon-tag_card, 0px)); }
.tl-promo h3 { font-size: 22px; line-height: 1.25; color: var(--tl-dark-blue); }
.tl-promo p { font-size: 15px; color: #4a5468; }
.tl-promo-desc { max-width: 90ch; }
.tl-promo-main .tl-terms-open { margin-top: 6px; }
.tl-promo-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 16px 28px; background: var(--tl-light-stone); border-top: 1px solid var(--tl-stone); }
.tl-promo-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 14px; color: #4a5468; }
.tl-fact { display: inline-flex; align-items: center; gap: 8px; line-height: 20px; }
.tl-fact svg { width: 18px; height: 18px; stroke: var(--tl-blue); flex-shrink: 0; position: relative; top: var(--tl-icon-facts, -1px); }
.tl-promo-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.tl-link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 14px; color: var(--tl-blue); cursor: pointer; text-decoration: underline; text-align: left; }
.tl-promo[hidden] { display: none; }
.tl-show-more-wrap { margin-top: 24px; text-align: center; }
.tl-dialog { margin: auto; border: 0; border-radius: var(--tl-card-radius); padding: 0; width: min(640px, calc(100% - 32px)); max-height: calc(100% - 64px); box-shadow: 0 12px 48px rgba(19, 38, 68, .35); color: var(--tl-ink); }
.tl-dialog::backdrop { background: rgba(19, 38, 68, .6); }
/* Quick entrance and exit (0.1s): the popup fades and moves slightly, the backdrop fades. The exit is run by the script before the popup closes. */
@keyframes tl-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tl-dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes tl-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tl-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
.tl-dialog[open] { animation: tl-dialog-in .1s ease-out; }
.tl-dialog[open]::backdrop { animation: tl-backdrop-in .1s ease-out; }
.tl-dialog[open].tl-closing { animation: tl-dialog-out .1s ease-in forwards; }
.tl-dialog[open].tl-closing::backdrop { animation: tl-backdrop-out .1s ease-in forwards; }
.tl-dialog-inner { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.tl-dialog-inner h3 { font-size: 20px; color: var(--tl-dark-blue); }
.tl-dialog-body { font-size: 14.5px; color: #4a5468; max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; }
.tl-dialog-body p { margin-bottom: 10px; }
/* Formatting from the terms editor: bold, bullet and numbered lists, links, and a heading or quote. */
.tl-dialog-body > :last-child { margin-bottom: 0; }
.tl-dialog-body strong { font-weight: 700; color: var(--tl-dark-blue); }
.tl-dialog-body ul, .tl-dialog-body ol { margin: 0 0 10px; padding-left: 22px; }
.tl-dialog-body ul { list-style: disc; }
.tl-dialog-body ol { list-style: decimal; }
.tl-dialog-body li { margin-bottom: 4px; padding-left: 2px; }
.tl-dialog-body a { color: var(--tl-blue); text-decoration: underline; }
.tl-dialog-body h4, .tl-dialog-body h5 { font-size: 15px; color: var(--tl-dark-blue); margin: 14px 0 6px; }
.tl-dialog-body blockquote { margin: 0 0 10px; padding-left: 14px; border-left: 3px solid var(--tl-stone); }
.tl-dialog-close { align-self: flex-start; }
.tl-no-results { display: none; padding: 32px; border: 1px dashed #c6cfdd; border-radius: var(--tl-card-radius); color: #6a7286; font-size: 15px; background: var(--tl-white); }
.tl-no-results.tl-show { display: block; }

/* Winners */
.tl-winners-list { background: var(--tl-white); border: 1px solid var(--tl-stone); border-radius: var(--tl-card-radius); box-shadow: var(--tl-card-shadow); overflow: hidden; }
.tl-winner { display: grid; grid-template-columns: 2.2fr 1.9fr .8fr 200px; gap: 16px; padding: 16px 22px; border-top: 1px solid #eef1f6; font-size: 15px; align-items: center; }
.tl-winner:first-child { border-top: 0; }
.tl-winners-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.tl-winners-sort { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; font-size: 14px; font-weight: 500; }
.tl-winners-sort .tl-select-btn { min-width: 210px; }
.tl-winner-name { font-weight: 700; color: var(--tl-dark-blue); }
.tl-winner-where { color: #4a5468; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-winner-where .tl-tag { font-size: 11px; padding: 3px 10px; }
/* Winners on the page: grouped by promotion, entries in a compact multi-column table. */
.tl-winner-groups { display: grid; gap: 24px; }
.tl-wgroup { scroll-margin-top: 96px; background: var(--tl-white); border: 1px solid var(--tl-stone); border-radius: var(--tl-card-radius); box-shadow: var(--tl-card-shadow); overflow: hidden; }
.tl-wgroup-head { padding: 16px 22px; background: var(--tl-light-stone); border-bottom: 1px solid var(--tl-stone); }
.tl-wgroup-head h3 { font-size: 18px; line-height: 1.3; color: var(--tl-dark-blue); }
.tl-wgroup-head p { margin: 2px 0 0; font-size: 14px; color: #4a5468; }
.tl-wlist { list-style: none; margin: 0 -1px -1px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.tl-wentry { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-bottom: 1px solid #eef1f6; border-right: 1px solid #eef1f6; font-size: 15px; }
.tl-when-none { color: #8a92a5; }
.tl-when-recent { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a92a5; }
.tl-wgroup-foot[hidden], .tl-wmore[hidden] { display: none; }
/* The rest of a region glides open and closed (quickly, like the popups). */
.tl-wmore { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .18s ease, visibility 0s linear .18s; }
.tl-wmore.tl-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .18s ease, visibility 0s; }
.tl-wmore-inner { min-height: 0; overflow: hidden; }
.tl-wmore, .tl-wmore * { overflow-anchor: none; }
@media (prefers-reduced-motion: reduce) { .tl-wmore, .tl-wmore.tl-open { transition: none; } }
.tl-wentry-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-wentry-sub { font-size: 12.5px; color: #6a7286; }
.tl-wgroup-foot { padding: 12px 22px; background: var(--tl-white); border-top: 1px solid #eef1f6; }
.tl-wentry-name { font-weight: 700; color: var(--tl-dark-blue); overflow-wrap: anywhere; }
.tl-wentry-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tl-wentry-group { font-size: 12.5px; color: #6a7286; text-align: right; }
.tl-wentry .tl-tag { font-size: 11px; padding: 3px 10px; }
.tl-promo .tl-promo-tbc { font-size: 14px; font-style: italic; color: #6a7286; }
.tl-fact--tbc { font-style: italic; color: #6a7286; }
.tl-winner-promo-wrap { display: flex; flex-direction: column; gap: 2px; }
.tl-winner-sub { font-size: 12.5px; color: #6a7286; }
.tl-winner-when { color: #6a7286; font-size: 13.5px; text-align: right; white-space: nowrap; }
.tl-winner[hidden] { display: none; }
.tl-winners-cta { margin-top: 20px; }
.tl-dialog--wide { width: min(860px, calc(100% - 32px)); }
/* Winners popup: the list uses the available height and scrolls under sticky column headings, inside one bordered box, with a footer bar. */
.tl-dialog--wide .tl-dialog-inner { max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px); }
.tl-dialog--wide .tl-dialog-body { flex: 1 1 auto; min-height: 160px; max-height: none; background: var(--tl-white); border: 1px solid var(--tl-stone); border-radius: var(--tl-card-radius); }
.tl-dialog--wide .tl-dialog-body .tl-winners-list { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.tl-dialog .tl-winner-head { position: sticky; top: 0; z-index: 2; }
.tl-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tl-winners-count { margin: 0; font-size: 14px; color: #6a7286; }
.tl-winner-head .tl-head-m { display: none; }
.tl-winners-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; font-weight: 500; }
.tl-select-label { font-size: 14px; font-weight: 500; }
.tl-select { position: relative; }
.tl-select-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 280px; max-width: 100%; min-height: 44px; padding: 10px 14px; font: inherit; font-size: 14px; color: var(--tl-ink); background: var(--tl-white); border: 1px solid #cfd6e3; border-radius: 8px; cursor: pointer; text-align: left; transition: border-color .18s ease; }
.tl-select-btn:hover, .tl-select.tl-open .tl-select-btn { border-color: var(--tl-blue); }
.tl-select-btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .18s ease; }
.tl-select.tl-open .tl-select-btn svg { transform: rotate(180deg); }
.tl-select-list { position: fixed; z-index: 1000; margin: 0; padding: 6px; list-style: none; background: var(--tl-white); border: 1px solid #cfd6e3; border-radius: 10px; box-shadow: 0 8px 24px rgba(19, 38, 68, .18); overflow-y: auto; overscroll-behavior: contain; outline: none; }
.tl-select-list[hidden] { display: none; }
.tl-select-list li { margin: 0; padding: 12px; min-height: 44px; display: flex; align-items: center; border-radius: 6px; font-size: 14px; line-height: 1.3; color: var(--tl-ink); cursor: pointer; }
.tl-select-list li.tl-opt-active { background: var(--tl-light-stone); }
.tl-select-list li[aria-selected="true"] { background: var(--tl-light-blue); color: var(--tl-blue); font-weight: 700; }
.tl-select-list li[aria-selected="true"].tl-opt-active { background: #dbe6f4; }
.tl-dialog .tl-winners-list { box-shadow: none; border: 1px solid var(--tl-stone); }
.tl-fine { margin-top: 26px; font-size: 13px; color: #6a7286; max-width: 80ch; }

/* App + integrations band */
.tl-app-band { background: var(--tl-light-blue); }
.tl-app-band .tl-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.tl-app-band h2 { font-size: clamp(22px, 2.6vw, 30px); color: var(--tl-dark-blue); margin-bottom: 10px; }
.tl-app-band p { color: #4a5468; font-size: 15px; max-width: 62ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.tl-app-tile, .tl-integrations { background: var(--tl-white); border-radius: var(--tl-card-radius); box-shadow: var(--tl-card-shadow); padding: 40px 28px 32px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
/* The list sizes to its content and is centred as a block, so the columns sit evenly under the heading and badges. */
.tl-mini-benefits { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 10px 40px; margin: 18px auto 0; width: fit-content; max-width: 100%; text-align: left; }
.tl-mini-benefits li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tl-ink); font-weight: 500; }
.tl-mini-benefits svg { width: 19px; height: 19px; stroke: var(--tl-blue); flex-shrink: 0; }
.tl-store-badges { display: flex; justify-content: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
/* Equal-size badge boxes; the artwork keeps its proportions inside. */
.tl-store-badges img { width: 208px; height: 62px; object-fit: contain; display: block; }
/* The heading matches "Take Tradelink with you": same font, size and capitals. */
.tl-integrations h3 { font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif; text-transform: uppercase; letter-spacing: .01em; line-height: 1.08; font-size: clamp(22px, 2.6vw, 30px); color: var(--tl-dark-blue); margin-bottom: 10px; }
.tl-integrations p { font-size: 15px; margin-bottom: 22px; max-width: 58ch; }
/* Pyramid: Xero on top, Fergus and Simpro below. Every logo sits in an equal-size box. */
.tl-integration-logos { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; align-items: center; gap: 18px clamp(20px, 3vw, 40px); }
/* Equal-size logo tiles, whatever the logo's shape. */
.tl-integration-logos { --logo-w: clamp(110px, 13vw, 190px); --logo-h: clamp(40px, 4.6vw, 66px); }
/* All three logos sit in the same size box (the Fergus box), whatever the logo's shape. Fergus is nudged up a little, Xero is scaled up and Simpro down inside their box, so they look the same size. */
.tl-integration-logos img { width: calc(var(--logo-w) * 1.2); height: calc(var(--logo-h) * 1.2); object-fit: contain; display: block; }
.tl-integration-logos img:first-child { grid-column: 1 / -1; justify-self: center; }
/* The standard logos are nudged and scaled inside their box so they look the same size; a logo chosen on the App and tools page is not. */
.tl-logo-xero { transform: scale(1.14); }
.tl-logo-fergus { transform: translateY(-3px); }
.tl-logo-simpro { transform: scale(.86); }
.tl-app-band .tl-wrap--single { grid-template-columns: minmax(0, 640px); justify-content: center; }

/* Winners on phones: only the first winner of a region shows before Show all (main.js moves the rest into the expandable part). This hides the rest before the script runs, so they do not flash; keep it in step with the phone limit in layout() in main.js. */
@media (max-width: 767px) {
  .tl-wgroup > .tl-wlist .tl-wentry:nth-child(n+2) { display: none; }
  .tl-toolbar--no-phone-filters { display: none; }
}

/* Forms band */
.tl-forms-band { background: var(--tl-blue); color: var(--tl-white); }
.tl-forms-band .tl-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tl-form-tile { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--tl-card-radius); padding: 30px; text-align: center; }
.tl-form-tile h3 { font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-size: 21px; margin-bottom: 10px; }
.tl-form-tile p { font-size: 15px; color: #dfe4ee; margin: 0 auto 20px; max-width: 48ch; }

/* Careers */
.tl-careers-hero { position: relative; background: var(--tl-blue); padding: 0; }
.tl-careers-hero img { width: 100%; height: 280px; object-fit: cover; display: block; opacity: .85; }
.tl-careers-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19, 38, 68, .88) 0%, rgba(19, 38, 68, .35) 70%, transparent 100%); display: flex; align-items: center; }
.tl-careers-overlay .tl-wrap { width: 100%; }
.tl-careers-hero h1 { color: var(--tl-white); font-size: clamp(30px, 4.4vw, 52px); max-width: 16ch; }
.tl-why { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.tl-why--single { grid-template-columns: 1fr; }
.tl-why-title { font-size: clamp(24px, 3vw, 34px); color: var(--tl-dark-blue); margin-bottom: 22px; }
.tl-intro-copy { color: #4a5468; font-size: 16.5px; line-height: 1.7; }
.tl-intro-copy p { margin-bottom: 16px; }
.tl-intro-copy p:first-child { font-size: 19px; line-height: 1.6; color: var(--tl-dark-blue); }
.tl-stats { background: var(--tl-blue); border-radius: var(--tl-card-radius); box-shadow: var(--tl-card-shadow); padding: 8px 36px; }
.tl-stat { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.tl-stat-icon { grid-column: 2; grid-row: 1 / 3; box-sizing: content-box; width: 32px; height: 32px; padding: 14px; stroke: var(--tl-white); background: rgba(255, 255, 255, .1); border-radius: 50%; }
.tl-stat:first-child { border-top: 0; }
.tl-stat-value { display: block; font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif; font-weight: 700; font-size: clamp(46px, 5vw, 66px); line-height: 1; color: var(--tl-white); }
.tl-stat-label { display: block; margin-top: 10px; font-size: 16px; color: #dfe4ee; }
.tl-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: stretch; }
.tl-careers-copy { background: var(--tl-white); border-radius: var(--tl-card-radius); box-shadow: var(--tl-card-shadow); padding: 44px 44px 40px; display: flex; flex-direction: column; }
.tl-careers-copy h2 { font-size: clamp(22px, 2.6vw, 30px); color: var(--tl-dark-blue); margin-bottom: 20px; }
.tl-careers-copy p { font-size: 16px; line-height: 1.65; color: #4a5468; margin-bottom: 18px; }
.tl-cadet { font-weight: 700; color: var(--tl-dark-blue); }
.tl-careers-actions { margin-top: auto; display: flex; gap: 14px; flex-wrap: wrap; padding-top: 32px; }
.tl-video { position: relative; border-radius: var(--tl-card-radius); overflow: hidden; background: var(--tl-blue); aspect-ratio: 16 / 9; align-self: center; cursor: pointer; box-shadow: 0 6px 22px rgba(19, 38, 68, .16); }
.tl-video-preview { position: absolute; inset: 0; background-size: cover; background-position: center; }
.tl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tl-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: var(--tl-blue); border: 3px solid var(--tl-white); display: flex; align-items: center; justify-content: center; transition: transform .15s ease; }
.tl-video.tl-playing { background: #000; cursor: default; }
.tl-video.tl-playing .tl-video-preview { display: none; }
.tl-play svg { width: 26px; height: 26px; fill: var(--tl-white); margin-left: 4px; }
.tl-video-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: linear-gradient(transparent, rgba(0, 48, 135, .85)); color: var(--tl-white); font-size: 14px; font-weight: 500; }
.tl-pillars-sec { background: var(--tl-white); padding: 56px 0; }
.tl-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* The three pillar cards grow slightly and gain a deeper shadow under a mouse. They are not links, so the cursor stays normal. The cadet card and the video card stay still. */
@media (hover: hover) {
  .tl-pillar { position: relative; transition: transform .2s ease, box-shadow .2s ease; }
  .tl-pillar:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 16px 34px rgba(19, 38, 68, .2); z-index: 2; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .tl-pillar:hover { transform: none; }
}
.tl-pillar { background: var(--tl-white); border: 1px solid var(--tl-stone); border-radius: var(--tl-card-radius); box-shadow: var(--tl-card-shadow); overflow: hidden; display: flex; flex-direction: column; }
.tl-pillar img { width: 100%; aspect-ratio: 470 / 315; object-fit: cover; display: block; background: var(--tl-light-stone); }
.tl-pillar-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tl-pillar h3 { font-size: 18px; color: var(--tl-dark-blue); }
.tl-pillar p { font-size: 14.5px; color: #4a5468; }

/* Footer */
.tl-footer { background: var(--tl-blue); color: #c9d4ea; border-top: 1px solid rgba(255, 255, 255, .14); padding: 44px 0 30px; }
.tl-footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.tl-footer img { height: 52px; width: auto; margin-bottom: 16px; margin-left: -10px; }
.tl-footer h4 { color: var(--tl-white); font-size: 14px; margin-bottom: 12px; }
.tl-footer li { margin-bottom: 8px; }
.tl-footer a { color: #c9d4ea; text-decoration: none; font-size: 14px; }
.tl-footer a:hover { color: var(--tl-white); text-decoration: underline; }
.tl-footer a.tl-btn:hover { text-decoration: none; }
.tl-footer-legal { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 20px; font-size: 12.5px; line-height: 1.7; }

/* Footer: brand column, follow us */
.tl-footer-tagline { font-size: 13.5px; max-width: 36ch; }
.tl-follow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 22px; }
.tl-footer .tl-follow-title { margin: 0 6px 0 0; line-height: 1; font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
.tl-social { display: flex; flex-wrap: wrap; gap: 0 4px; }
.tl-social li { margin: 0; }
.tl-footer .tl-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--tl-white); transition: color .18s ease; }
.tl-footer .tl-social a:hover { color: var(--tl-light-blue); text-decoration: none; }
/* Footer on a light colour (Tradelink > Footer): the background is set on the footer itself, the text, links and logo go dark. */
.tl-footer--light { color: #4a5468; border-top-color: rgba(19, 38, 68, .14); }
.tl-footer--light h4 { color: var(--tl-dark-blue); }
.tl-footer--light a { color: #2d3a55; }
.tl-footer--light a:hover { color: var(--tl-blue); }
.tl-footer--light .tl-footer-legal { border-top-color: rgba(19, 38, 68, .18); }
.tl-footer--light .tl-social a { color: var(--tl-dark-blue); }
.tl-footer--light .tl-social a:hover { color: var(--tl-blue); }

.tl-social svg { width: 26px; height: 26px; position: relative; top: var(--tl-icon-social, 0); }

/* Careers: contact block and card without a video */
.tl-careers-copy .tl-cadet-label { margin: 10px 0 6px; padding-top: 24px; border-top: 1px solid var(--tl-stone); }
.tl-careers-copy .tl-cadet-contact { margin-bottom: 0; line-height: 1.7; }
.tl-duo--single { grid-template-columns: 1fr; }
/* Winners table headings (tablet and desktop) */
.tl-winner-head { display: grid; grid-template-columns: 2.2fr 1.9fr .8fr 200px; gap: 16px; padding: 12px 22px; background: var(--tl-light-stone); border-bottom: 1px solid var(--tl-stone); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #565f73; }
.tl-winner-head span:last-child { text-align: right; }
.tl-winner-head + .tl-winner { border-top: 0; }

/* Burger menu button: mobile only */
.tl-burger { display: none; background: none; border: 0; padding: 8px; margin: 0 0 0 -8px; cursor: pointer; color: var(--tl-dark-blue); line-height: 0; }
.tl-burger svg { width: 26px; height: 26px; stroke: currentColor; }
.tl-sm-hide { display: inline; }
.tl-sm-show { display: none; }

/* Responsive. Two layouts: mobile below 768px, and desktop from 768px (tablets use the desktop layout). */

/* Narrow desktop and tablet: smaller badges and logo tiles so the cards stay on tidy rows */
@media (min-width: 768px) and (max-width: 1100px) {
  .tl-store-badges img { width: 184px; height: 55px; }
}

/* 768px to 1023px: keep the single-row header from overflowing */
@media (min-width: 768px) and (max-width: 1023px) {
  .tl-header .tl-wrap { gap: 16px; }
  .tl-nav { gap: 18px; }
  .tl-nav a { font-size: 14px; }
  .tl-header .tl-btn { padding: 10px 14px; font-size: 13px; }
}

@media (max-width: 767px) {
  .tl-wrap { padding: 0 20px; }
  .tl-sec { padding: 40px 0; }
  .tl-sec-head { margin-bottom: 20px; }

  /* Header: one compact row. Burger (left), logo, sign in (right). Menu drops down. */
  .tl-header .tl-wrap { min-height: 64px; gap: 12px; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
  .tl-burger { display: block; }
  .tl-logo img { height: 34px; }
  /* Narrow phones: a slightly smaller logo and a compact button so the logo is never squeezed. */
  @media (max-width: 380px) {
    .tl-logo img { height: 30px; }
    .tl-header .tl-btn { padding: 9px 12px; font-size: 12px; }
  }
  @media (max-width: 340px) { .tl-header .tl-btn svg { display: none; } }
  .tl-header .tl-btn { margin-left: auto; padding: 9px 14px; font-size: 13px; white-space: nowrap; }
  .tl-sm-hide { display: none; }
  .tl-sm-show { display: inline; }
  .tl-nav { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0 20px; background: var(--tl-white); border-bottom: 1px solid transparent; box-shadow: none; overflow: hidden; max-height: 0; visibility: hidden; transition: max-height .3s ease, padding .3s ease, box-shadow .3s ease, border-color .3s ease, visibility 0s linear .3s; }
  .tl-nav.tl-open { max-height: 320px; padding: 4px 20px 12px; visibility: visible; border-bottom-color: var(--tl-stone); box-shadow: 0 8px 16px rgba(19, 38, 68, .10); transition: max-height .3s ease, padding .3s ease, box-shadow .3s ease, border-color .3s ease, visibility 0s; }
  .tl-nav a { font-size: 16px; padding: 14px 0; border-bottom: 1px solid var(--tl-light-stone); white-space: normal; }
  .tl-nav a:last-child { border-bottom: 0; }
  .tl-nav a::after { display: none; }

  /* Filters and promotions */
  .tl-chip { padding: 9px 16px; }
  .tl-promo-body { padding: 20px 18px 16px; flex-direction: column; gap: 12px; }
  .tl-promo-count { order: -1; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; min-width: 0; padding: 0; border-left: 0; }
  .tl-count-num, .tl-count--text .tl-count-num { font-size: 32px; }
  .tl-count-label { margin-top: 0; font-size: 13px; }
  .tl-count-soon { font-size: 16px; width: auto; text-align: left; }
  .tl-filters { display: none; }
  .tl-toolbar { flex-direction: column; align-items: center; gap: 12px; }
  .tl-region, .tl-sort { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; margin: 0 auto; }
  .tl-region .tl-select, .tl-sort .tl-select { flex: 1; min-width: 0; }
  .tl-region .tl-select-label, .tl-sort .tl-select-label { flex: 0 0 62px; }
  .tl-winners-sort { width: 100%; margin-left: 0; }
  .tl-winners-sort .tl-select-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .tl-lead { display: block; }
  .tl-winners-sort .tl-select { flex: 1; }
  .tl-winner-tag:empty { display: none; }
  .tl-promo h3 { font-size: 20px; }
  .tl-promo-foot { flex-direction: column; align-items: stretch; padding: 16px 18px; }
  .tl-promo-actions { flex-direction: column; margin-left: 0; }
  .tl-promo-actions .tl-btn { width: 100%; }

  /* Winners: rows stack, so the sticky heading has two labels that match the two lines of a row */
  .tl-winner-head { grid-template-columns: 1fr auto; gap: 12px; padding: 10px 18px; }
  .tl-winner-head > span:not(.tl-head-m) { display: none; }
  .tl-winner-head .tl-head-m { display: block; }
  .tl-winner-head .tl-head-m:nth-child(2) { text-align: right; }
  .tl-winner { grid-template-columns: 1fr auto; grid-template-areas: "name tag" "promo when"; gap: 6px 14px; padding: 14px 18px; align-items: center; }
  .tl-winner-name { grid-area: name; }
  .tl-winner-where { grid-area: promo; font-size: 13.5px; }
  .tl-winner-tag { grid-area: tag; justify-self: end; }
  .tl-winner-when { grid-area: when; text-align: right; font-size: 12.5px; }
  .tl-winners-filter, .tl-select, .tl-select-btn { width: 100%; }
  .tl-select-btn { min-width: 0; }

  /* Dialogs */
  .tl-dialog-inner { padding: 20px; }

  /* App and forms bands, careers, footer */
  .tl-app-band .tl-wrap, .tl-duo { grid-template-columns: 1fr; gap: 22px; }
  .tl-duo { gap: 34px; }
  .tl-app-tile, .tl-integrations, .tl-form-tile { padding: 22px; }
  .tl-careers-copy { padding: 28px 24px; }
  .tl-why { grid-template-columns: 1fr; gap: 28px; }
  .tl-intro-copy p:first-child { font-size: 18px; }
  .tl-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px 4px; }
  .tl-stat { display: block; padding: 20px 14px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .22); text-align: center; }
  .tl-stat-icon { display: block; width: 22px; height: 22px; padding: 9px; margin: 0 auto 12px; }
  .tl-stat:first-child { border-left: 0; }
  /* Benefits as a 2 x 3 grid of equal tiles: icon fixed at the top, text starts the same distance below it. */
  .tl-mini-benefits { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; width: 100%; max-width: none; gap: 10px; margin: 18px 0 0; }
  .tl-mini-benefits li { display: grid; grid-template-rows: 26px 1fr; row-gap: 10px; justify-items: center; align-items: start; text-align: center; padding: 16px 12px; background: var(--tl-light-blue); border-radius: 10px; font-size: 13.5px; line-height: 1.3; }
  .tl-mini-benefits svg { width: 26px; height: 26px; }
  .tl-store-badges img { width: 220px; height: auto; }
  /* On phones the logos stack in one column, each in the same size box. */
  .tl-integration-logos { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .tl-integration-logos img, .tl-integration-logos img:first-child, .tl-integration-logos img:nth-child(2), .tl-integration-logos img:nth-child(3) { width: 200px; height: 58px; grid-column: auto; }
  .tl-logo-fergus { transform: translateY(-2px); }
  .tl-forms-band .tl-wrap { grid-template-columns: 1fr; }

  .tl-pillars { grid-template-columns: 1fr; }
  .tl-pillars-sec { padding: 40px 0; }
  .tl-careers-hero img { height: 200px; }
  .tl-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 480px) {
  .tl-footer-cols { grid-template-columns: 1fr; }
}

/* Mobile alignment. Short display content is centred (headings with intros, filters, tags, calls to action, small print).
   Long-form and data content stays left-aligned for readability (promotion cards, winner rows, Careers text, pillar cards). */
@media (max-width: 767px) {
  .tl-sec-head { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .tl-sec-head p { margin-left: auto; margin-right: auto; }
  .tl-sec-head--left { align-items: flex-start; text-align: left; }
  .tl-filters { justify-content: center; }
  .tl-no-results { text-align: center; }
  .tl-winners-cta { text-align: center; }
  .tl-fine { text-align: center; margin-left: auto; margin-right: auto; }
  .tl-form-tile { text-align: center; }
  .tl-form-tile p { margin-left: auto; margin-right: auto; }
  .tl-careers-overlay { justify-content: center; text-align: center; background: rgba(19, 38, 68, .62); }
  .tl-careers-hero h1 { margin: 0 auto; }
  .tl-careers-actions { flex-direction: column; }
  .tl-careers-actions .tl-btn { width: 100%; }
}

@media (max-width: 480px) {
  .tl-footer { text-align: center; }
  .tl-footer-cols { justify-items: center; }
  .tl-footer img { margin-left: auto; margin-right: auto; }
  .tl-footer p { margin-left: auto; margin-right: auto; }
  .tl-follow, .tl-social { justify-content: center; }
  .tl-footer img { margin-left: auto; }
}

/* Touch targets: 44px minimum on phones */
@media (max-width: 767px) {
  .tl-logo { display: flex; align-items: center; min-height: 44px; }
  .tl-chip { min-height: 44px; padding: 10px 18px; }
  .tl-readmore { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 404 page */
.tl-404-box { max-width: 640px; margin: 0 auto; padding: 24px 0 8px; text-align: center; }
.tl-404-code { font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif; font-weight: 700; font-size: clamp(64px, 14vw, 120px); line-height: 1; color: var(--tl-blue); }
.tl-404-box h1 { font-size: clamp(26px, 4vw, 38px); color: var(--tl-dark-blue); margin: 8px 0 14px; }
.tl-404-box p { color: #4a5468; font-size: 16px; max-width: 52ch; margin: 0 auto; }
.tl-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }