/*
 * tt.css — the TempTag marketing site.
 *
 * Built to the system described in ignis-site/docs/realm-direction-spec.md, with
 * TempTag's own identity substituted at the token layer. Two rules from that
 * spec are carried over verbatim because they are what make it hold together:
 *
 *   1. COLOUR COMES FROM THE SECTION, NOT THE ELEMENT. A section declares
 *      .s1-.s7; children read --bg, --text, --text-2, --fg, --accent, --line.
 *      A button that hard-codes a colour is a bug, because it will be wrong the
 *      first time it is moved into another scheme.
 *
 *   2. BORDERS, NOT SHADOWS. There is no box-shadow on any marketing surface.
 *      The product's Fluent elevation lives inside .app blocks and nowhere else.
 *
 * What is deliberately NOT carried over from IGNIS:
 *
 *   - Type. IGNIS sets Geist/Inter. TempTag sets Barlow Condensed 800 uppercase
 *     for display and Barlow for body, per docs/brand-guidelines.md section 4.1.
 *     Typeface is what stops a shared system reading as the same company.
 *   - The one-red-field rule. IGNIS allows a single flat red band. TempTag adds
 *     .s7, a full-bleed gradient, which is the brief. It is weighted dark so the
 *     bright stop is a corner highlight rather than a field of alarm red - see
 *     the note on --bleed below.
 *
 * Everything is scoped under .tt so it can be lifted into the product repo as
 * Inertia pages without reaching the Fluent console.
 */

/* ====================================================================== */
/* 1. Tokens                                                              */
/* ====================================================================== */

.tt {
  /* ---------------------------------------------------------- brand red */
  /* Stops 80/90 of the console ramp in resources/js/theme.ts, plus darker
     extensions that exist only to give the gradient somewhere to start. */
  --red-500: #e30613;   /* ramp stop 80 - the brand colour proper */
  --red-600: #c8102e;   /* Pantone 186 C, the heritage anchor */
  --red-700: #a50e26;
  --red-800: #8e0b16;
  --red-900: #6b0715;
  --red-950: #3f030c;
  --red-1000: #2c0208;
  --red-50:  #fdf3f4;
  --red-100: #fce7eb;
  --red-300: #ec8a95;   /* the ramp's light stop - links reversed out on ink */

  /* ------------------------------------------------------ warm neutrals */
  --ink-900: #14110f;
  --ink-800: #1c1a19;
  --ink-700: #35302c;
  --ink-600: #5b5650;
  --ink-500: #8a857d;
  --ink-400: #b3ada4;
  --ink-300: #d6d1c9;
  --ink-200: #eae6e1;
  --ink-100: #f4f1ed;
  --canvas:  #faf8f6;

  /* Steel. The site tone - scaffold, mesh, galvanised. Keeps the palette from
     being warm-only, and reads as site rather than studio. */
  --steel-100: #eceef0;
  --steel-300: #c9ced3;
  --steel-700: #4a5158;
  --steel-900: #22262a;

  /* ------------------------------------------- safety, fixed, never brand */
  /* These carry meaning. They are not derived from the brand ramp and they do
     not move for a white-label customer. brand-guidelines.md section 3.2. */
  --danger:  #c8102e;  --danger-tint:  #fdf3f4;  --danger-ink:  #8e0b16;
  --safe:    #107c41;  --safe-tint:    #e7f3eb;  --safe-ink:    #0b5c30;
  --caution: #9a6700;  --caution-tint: #fdf6e3;  --caution-ink: #5e4108;
  --info:    #0f6cbd;  --info-tint:    #eff6fc;  --info-ink:    #0a3a63;

  /* ------------------------------------------------------------ gradient */
  /* MARKETING SURFACES ONLY. Never the console, the field app, a PDF, or any
     status surface. The bright stop sits at 100% alone so it reads as a corner
     highlight; roughly three quarters of the field is #3f030c-#a50e26. */
  /* Light from the top left and carried well across the field, deepening only
     into the far corner. Contrast floor: white on #e30613 is 4.88:1 and on
     #c8102e about 6:1 - both clear AA for body copy - so the sweep can stay
     bright for most of its length without putting any text at risk. */
  --bleed:      linear-gradient(118deg, #e30613 0%, #e30613 20%, #c8102e 46%, #a50e26 68%, #6b0715 89%, #3f030c 100%);
  --bleed-rev:  linear-gradient(298deg, #e30613 0%, #e30613 20%, #c8102e 46%, #a50e26 68%, #6b0715 89%, #3f030c 100%);
  --bleed-deep: linear-gradient(160deg, #c8102e 0%, #8e0b16 44%, #5e0512 100%);

  /* ---------------------------------------------------------------- type */
  --display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* -------------------------------------------------------------- system */
  --line: rgba(0, 0, 0, .14);
  --line-on-dark: rgba(255, 255, 255, .22);
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --nav-h: 84px;
  --nav-h-sm: 62px;
  --ease: cubic-bezier(.19, 1, .22, 1);
}

/* ====================================================================== */
/* 2. Section schemes                                                     */
/* ====================================================================== */

.tt .s1, .tt .s2, .tt .s3,
.tt .s5, .tt .s6, .tt .s7 {
  background: var(--bg);
  color: var(--text);
}

.tt .s1 {
  --bg: #fff; --text: var(--ink-900); --text-2: var(--ink-600);
  --fg: var(--ink-100); --accent: var(--red-600); --edge: var(--line);
}
.tt .s2 {
  --bg: var(--ink-100); --text: var(--ink-900); --text-2: var(--ink-600);
  --fg: #fff; --accent: var(--red-600); --edge: var(--line);
}
/* Steel. Used where the page talks about the physical job - standards, tags,
   the yard - so the shift in temperature does some work. */
.tt .s3 {
  --bg: var(--steel-100); --text: var(--steel-900); --text-2: var(--steel-700);
  --fg: #fff; --accent: var(--red-600); --edge: rgba(0, 0, 0, .12);
}
/* Flat deep red. The quiet red band, for when a gradient would be too much. */
.tt .s5 {
  --bg: var(--red-900); --text: #fff; --text-2: rgba(255, 255, 255, .84);
  --fg: rgba(255, 255, 255, .10); --accent: #fff; --edge: var(--line-on-dark);
}
.tt .s6 {
  --bg: var(--ink-900); --text: #fff; --text-2: var(--ink-400);
  --fg: #262220; --accent: #fff; --edge: var(--line-on-dark);
}
/* The bleed. Budget: at most three .s7 bands per page, one of which is the hero. */
.tt .s7 {
  --bg: var(--bleed); --text: #fff; --text-2: rgba(255, 255, 255, .86);
  --fg: rgba(255, 255, 255, .10); --accent: #fff; --edge: rgba(255, 255, 255, .20);
}
.tt .s7--rev  { --bg: var(--bleed-rev); }
.tt .s7--deep { --bg: var(--bleed-deep); }

@media (forced-colors: active) {
  .tt .s7, .tt .s7--rev, .tt .s7--deep { background: #6b0715; }
}

/* ====================================================================== */
/* 3. Reset and base                                                      */
/* ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The bar is fixed and now stays for the whole page, so an anchor jump has to
   clear it or the heading it landed on sits underneath. */
.tt [id] { scroll-margin-top: calc(var(--nav-h-sm) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit; color: inherit;
  background: none; border: 0; cursor: pointer;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.tt :focus-visible {
  outline: 2px solid var(--accent, var(--red-600));
  outline-offset: 3px;
  border-radius: 2px;
}
/* On the gradient a red ring vanishes. White with a dark offset reads against
   both ends of the sweep. */
.tt .s7 :focus-visible, .tt .s5 :focus-visible, .tt .s6 :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(63, 3, 12, .8);
}

.tt .skip {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  padding: 10px 18px; background: var(--red-600); color: #fff;
  font: 600 15px/1 var(--body); border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.tt .skip:focus { top: 16px; }

/* ====================================================================== */
/* 4. Layout                                                              */
/* ====================================================================== */

.tt .wrap { padding-left: 20px; padding-right: 20px; }
.tt .container { max-width: 1280px; margin: 0 auto; }
.tt .container--md { max-width: 980px; }
.tt .container--sm { max-width: 720px; }

.tt .section { padding-top: 88px; padding-bottom: 88px; }
.tt .section--md { padding-top: 60px; padding-bottom: 60px; }
.tt .section--sm { padding-top: 40px; padding-bottom: 40px; }
.tt .section--flush-t { padding-top: 0; }
.tt .section--flush-b { padding-bottom: 0; }

.tt .head { max-width: 820px; margin-bottom: 56px; }
.tt .head--center { margin-left: auto; margin-right: auto; text-align: center; }

.tt .grid { display: grid; gap: 28px; }
.tt .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tt .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tt .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ====================================================================== */
/* 5. Type                                                                */
/* ====================================================================== */

/* Barlow Condensed 800 uppercase is the whole display voice. It is set tight
   and large; at 1.05 line-height a two-line headline sets as a block, which is
   the point - it should read like site signage, not like a magazine. */
.tt .d1, .tt h1 {
  font: 800 clamp(40px, 5.4vw, 70px)/1.0 var(--display);
  text-transform: uppercase; letter-spacing: .5px;
}
.tt .d2, .tt h2 {
  font: 800 clamp(30px, 3.6vw, 48px)/1.05 var(--display);
  text-transform: uppercase; letter-spacing: .5px;
}
.tt .d3, .tt h3 {
  font: 800 clamp(24px, 2.3vw, 32px)/1.1 var(--display);
  text-transform: uppercase; letter-spacing: .4px;
}
.tt .d4, .tt h4 {
  font: 700 21px/1.25 var(--body); letter-spacing: -.1px;
}
.tt h5 { font: 700 18px/1.35 var(--body); }

.tt .lead { font-size: 19px; line-height: 1.55; color: var(--text-2); }
.tt .t-lg { font-size: 18px; }
.tt .t-sm { font-size: 15px; }
.tt .t-xs { font-size: 13.5px; }
.tt .muted { color: var(--text-2); }
.tt .mono { font-family: var(--mono); font-size: 13px; letter-spacing: -.2px; }

/* Eyebrow. 14px 700 uppercase, 2.5px tracking - brand-guidelines.md 4.1. */
.tt .eyebrow {
  display: inline-block; margin-bottom: 18px;
  font: 700 14px/1 var(--body);
  text-transform: uppercase; letter-spacing: 2.5px;
  color: var(--accent);
}
.tt .s7 .eyebrow, .tt .s5 .eyebrow, .tt .s6 .eyebrow { color: rgba(255, 255, 255, .9); }

/* A bordered eyebrow, for where the plain one gets lost against imagery. */
.tt .tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border: 1px solid var(--edge); border-radius: var(--r-sm);
  font: 700 12.5px/1.5 var(--body);
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text-2);
}
.tt .tag--fill { background: var(--fg); border-color: transparent; }

/* ====================================================================== */
/* 6. Controls                                                            */
/* ====================================================================== */

.tt .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px;
  font: 700 17px/1 var(--body); letter-spacing: .2px;
  border: 1.5px solid var(--red-600); border-radius: 7px;
  background: var(--red-600); color: #fff;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.tt .btn:hover { background: var(--red-700); border-color: var(--red-700); }

.tt .btn--ghost {
  background: transparent; color: var(--text); border-color: var(--edge);
}
.tt .btn--ghost:hover { background: transparent; border-color: var(--text); }

/* On any dark or gradient scheme the primary inverts: a red button on a red
   field is invisible, and a red button on near-black reads as an alarm. */
.tt .s7 .btn, .tt .s5 .btn, .tt .s6 .btn {
  background: #fff; color: var(--red-700); border-color: #fff;
}
.tt .s7 .btn:hover, .tt .s5 .btn:hover, .tt .s6 .btn:hover {
  background: var(--ink-100); border-color: var(--ink-100);
}
.tt .s7 .btn--ghost, .tt .s5 .btn--ghost, .tt .s6 .btn--ghost {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55);
}
.tt .s7 .btn--ghost:hover, .tt .s5 .btn--ghost:hover, .tt .s6 .btn--ghost:hover {
  border-color: #fff;
}

.tt .btn--sm { padding: 9px 18px; font-size: 15.5px; }
.tt .btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Chevron link. The chevron moves 4px on hover and nothing else does. */
.tt .lnk {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 15.5px/1 var(--body); color: var(--accent);
}
.tt .lnk svg { transition: transform .3s var(--ease); }
.tt .lnk:hover svg { transform: translateX(4px); }
.tt .s7 .lnk, .tt .s5 .lnk, .tt .s6 .lnk { color: #fff; }

/* ====================================================================== */
/* 7. Navigation                                                          */
/* ====================================================================== */

/* Fixed rather than sticky, so the hero gradient starts at the true top of the
   viewport and runs behind a transparent bar. The hero pays for the offset with
   its own padding-top, not a body margin. */
.tt .nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: #fff;
  transition: background-color .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease);
}
/* White whenever the bar is scrolled OR a mega panel is open. The panel itself is
   white, so at the top of the page an open panel used to hang off a transparent bar
   with the white logo still on it — the panel read as detached from the header it
   came out of. Colour only: the bar does NOT condense on open, because that would
   move the page under the cursor that opened the menu. */
.tt .nav.is-solid,
.tt .nav.is-open-platform,
.tt .nav.is-open-solutions,
.tt .nav.is-open-company {
  background: #fff; color: var(--ink-900);
}
/* The rule under the bar belongs to the SCROLLED state only. At the top of the page
   the open panel is joined to the header — one white shape — and a grey line across
   it cuts the shape in half for no reason. Scrolled, the line is what separates the
   bar from the page moving under it, so it stays. */
.tt .nav.is-solid { border-bottom-color: var(--line); }

@media (prefers-reduced-motion: reduce) {
  .tt .nav { transition: background-color .18s linear, border-color .18s linear; }
  .tt .mega .stagger > * { opacity: 1; transform: none; transition: none; }
  .tt .tile::after { transition: none; }
  .tt .marquee-t { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .tt .marquee-set:nth-child(2) { display: none; }
  .tt .marquee-set { flex-wrap: wrap; justify-content: center; }
  .tt .live { animation: none; }
  .tt .card--ben::before { transition: none; }
}
@media print { .tt .nav { display: none; } }

.tt .nav-in {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px;
  min-height: var(--nav-h);
  transition: min-height .18s var(--ease);
}
.tt .nav.is-solid .nav-in { min-height: var(--nav-h-sm); }

.tt .brand { display: inline-flex; align-items: center; }
/* One height, scrolled or not. The bar still condenses from --nav-h to --nav-h-sm,
   which is the part that should move; the mark shrinking with it read as the logo
   itself being unstable. 34px clears the 62px condensed bar with room either side. */
.tt .brand img { height: 34px; width: auto; }
.tt .brand .on-dark { display: block; }
.tt .brand .on-light { display: none; }
.tt .nav.is-solid .brand .on-dark,
.tt .nav.is-open-platform .brand .on-dark,
.tt .nav.is-open-solutions .brand .on-dark,
.tt .nav.is-open-company .brand .on-dark { display: none; }
.tt .nav.is-solid .brand .on-light,
.tt .nav.is-open-platform .brand .on-light,
.tt .nav.is-open-solutions .brand .on-light,
.tt .nav.is-open-company .brand .on-light { display: block; }

.tt .menu { display: flex; justify-content: center; align-items: center; }
.tt .menu > li { position: relative; }
.tt .menu > li > a,
.tt .menu > li > button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 15px;
  font: 600 16px/1.4 var(--body);
  opacity: .92;
  transition: opacity .3s var(--ease);
}
.tt .menu > li > a:hover,
.tt .menu > li > button:hover { opacity: 1; }
.tt .menu.is-dim > li:not(.is-open) > a,
.tt .menu.is-dim > li:not(.is-open) > button { opacity: .45; }
.tt .menu .chev { transition: transform .3s var(--ease); }
.tt .menu > li.is-open .chev { transform: rotate(180deg); }

.tt .nav-cta { display: flex; align-items: center; gap: 10px; }

.tt .burger { display: none; width: 44px; height: 44px; place-items: center; }
.tt .burger span {
  display: block; width: 22px; height: 2px; background: currentColor;
  box-shadow: 0 7px 0 currentColor, 0 -7px 0 currentColor;
}

/* --- Mega panel ------------------------------------------------------- */
/* Full-width white panel dropping out of the bar, per Passport 360. It is the
   whole point of the header: a visitor should be able to see the shape of the
   product without clicking anything. */
.tt .mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; color: var(--ink-900);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.tt .nav.is-open-platform #mega-platform,
.tt .nav.is-open-solutions #mega-solutions,
.tt .nav.is-open-company #mega-company {
  opacity: 1; visibility: visible; pointer-events: auto;
}

.tt .mega-in { display: grid; gap: 30px; padding: 30px 0 38px; }

/* Featured row across the head of a panel, columns beneath it - the IGNIS
   arrangement. Three tiles plus a wider gradient card, which is the only
   gradient anywhere in the chrome and the reason the panel has a focal point. */
.tt .mega-feat {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.45fr; gap: 10px;
}
/* Label and chevron only. The supporting sentence under each tile was saying again
   what the four link columns beneath already say, and the panel reads faster without
   it, so the tile is now a single row rather than a two-line card. */
.tt .tile {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 62px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
/* The rule sweeps in rather than the card lifting - borders, not shadows. */
.tt .tile::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--red-600);
  transition: width .45s var(--ease);
}
.tt .tile:hover::after, .tt .tile:focus-visible::after { width: 100%; }
.tt .tile:hover { border-color: var(--ink-400); }
.tt .tile--red   { background: var(--red-50); }
.tt .tile--stone { background: var(--ink-100); }
.tt .tile--steel { background: var(--steel-100); }
.tt .tile--spot {
  background: var(--bleed); border-color: transparent; color: #fff;
}
.tt .tile--spot::after { background: #fff; }
.tt .tile--spot:hover { border-color: transparent; }
.tt .tile-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  font: 700 16px/1.3 var(--body);
}

/* Panel contents rise as the panel opens, a column at a time. */
.tt .mega .stagger > * {
  opacity: 0; transform: translateY(9px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.tt .nav.is-open-platform  #mega-platform  .stagger > *,
.tt .nav.is-open-solutions #mega-solutions .stagger > *,
.tt .nav.is-open-company   #mega-company   .stagger > * { opacity: 1; transform: none; }
.tt .mega .stagger > :nth-child(2) { transition-delay: .05s; }
.tt .mega .stagger > :nth-child(3) { transition-delay: .1s; }
.tt .mega .stagger > :nth-child(4) { transition-delay: .15s; }

/* The same four tracks and the same gap as .mega-feat, so "The record" sits under
   the register tile and "The proof" under the wide gradient one. It was four equal
   columns at a 28px gap against three-plus-1.45fr at a 10px gap, which lined nothing
   up with anything. The 18px inset matches .tile's own horizontal padding: without it
   the headings start at the track edge while the tile labels start 18px inside it,
   and the row still reads as crooked. */
.tt .mega-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.45fr;
  column-gap: 10px; row-gap: 28px;
}
.tt .mega-cols > div { padding: 0 18px; }
.tt .mega-cols h6 {
  margin: 0 0 10px;
  font: 700 12px/1.4 var(--body);
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-500);
}
.tt .mega-cols a {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 0; font-size: 15px; color: var(--ink-800);
  transition: color .3s var(--ease);
}
.tt .mega-cols a:hover { color: var(--red-600); }
.tt .mega-cols a.is-all { font-weight: 700; color: var(--red-600); }

.tt .mega-lbl {
  margin: 0 0 12px;
  font: 700 12px/1.4 var(--body);
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-500);
}

/* Role list in the Solutions panel. Four columns of label + one-line note. */
.tt .roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 18px; }
.tt .role {
  display: block; padding: 11px 12px;
  border-radius: var(--r-sm);
  transition: background-color .3s var(--ease);
}
.tt .role:hover { background: var(--ink-100); }
.tt .role-h {
  display: flex; align-items: center; gap: 6px;
  font: 700 15.5px/1.35 var(--body);
}
.tt .role-n { display: block; font-size: 13.5px; color: var(--ink-600); line-height: 1.4; }

/* Sectors sit on a rail under the roles rather than in a box beside them, so
   the panel keeps one reading direction: across, then down. */
.tt .mega-rail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.tt .mega-rail h6 {
  margin: 0 14px 0 0;
  font: 700 12px/1.4 var(--body);
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-500);
}
.tt .mega-rail a {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 13px; font-size: 14.5px; color: var(--ink-800);
  border: 1px solid var(--line); border-radius: 100px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.tt .mega-rail a:hover { border-color: var(--red-600); color: var(--red-600); }
.tt .mega-rail a.is-all { font-weight: 700; color: var(--red-600); border-color: var(--red-100); }

/* --- Mobile drawer ---------------------------------------------------- */
.tt .drawer {
  display: none;
  position: fixed; inset: var(--nav-h-sm) 0 0; z-index: 890;
  background: #fff; color: var(--ink-900);
  overflow-y: auto; padding: 20px;
}
.tt .nav.is-drawer .drawer { display: block; }
.tt .drawer a {
  display: block; padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font: 700 19px/1.3 var(--display); text-transform: uppercase; letter-spacing: .4px;
}
.tt .drawer a.sub {
  font: 500 15.5px/1.3 var(--body); text-transform: none; letter-spacing: 0;
  padding: 9px 0 9px 14px; color: var(--ink-600); border-bottom: 0;
}
.tt .drawer .btn-row { margin-top: 24px; }
.tt .drawer .btn-row .btn { flex: 1; }

@media (max-width: 1080px) {
  .tt .menu, .tt .nav-cta { display: none; }
  .tt .burger { display: grid; }
  .tt .nav-in { grid-template-columns: auto 1fr; }
  .tt .burger { justify-self: end; }
  .tt .nav { --nav-h: var(--nav-h-sm); }
}

/* ====================================================================== */
/* 8. Hero                                                                */
/* ====================================================================== */

.tt .hero { padding-top: calc(var(--nav-h) + 44px); padding-bottom: 0; }
.tt .hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 58px; align-items: center;
}
.tt .hero h1 { max-width: 15ch; }
.tt .hero .lead { margin-top: 24px; max-width: 54ch; }
.tt .hero .btn-row { margin-top: 34px; }
.tt .hero-note { margin-top: 18px; font-size: 14.5px; color: var(--text-2); }

/* The cluster. Four frames of the work in two columns, the right one dropped and
   the frames deliberately unequal - portrait against square - so it reads as a
   shaped block of site photography rather than a grid of thumbnails. The outer
   corners of the cluster take a large radius, which is what gives the whole
   group a silhouette instead of four square edges.
   Four and not six: six stacked three deep made the image column half as tall
   again as the copy beside it, and the hero paid for that in dead gradient. */
.tt .film { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tt .film-col { display: grid; gap: 12px; align-content: start; }
.tt .film-col:nth-child(2) { padding-top: 40px; }

.tt .shot {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .07);
}
.tt .film-col:nth-child(1) .shot:nth-child(1) { aspect-ratio: 3 / 4; }
.tt .film-col:nth-child(1) .shot:nth-child(2) { aspect-ratio: 1 / 1; }
.tt .film-col:nth-child(2) .shot:nth-child(1) { aspect-ratio: 1 / 1; }
.tt .film-col:nth-child(2) .shot:nth-child(2) { aspect-ratio: 3 / 4; }

.tt .film-col:nth-child(1) .shot:first-child { border-top-left-radius: 30px; }
.tt .film-col:nth-child(1) .shot:last-child  { border-bottom-left-radius: 30px; }
.tt .film-col:nth-child(2) .shot:first-child { border-top-right-radius: 30px; }
.tt .film-col:nth-child(2) .shot:last-child  { border-bottom-right-radius: 30px; }

.tt .shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tt .shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 12px 10px;
  font: 700 11.5px/1.15 var(--display);
  text-transform: uppercase; letter-spacing: .09em;
  color: #fff;
  background: linear-gradient(to top, rgba(8, 3, 5, .88), rgba(8, 3, 5, 0));
}

/* --- Trusted by ------------------------------------------------------- */
/* White plates on the gradient, because a real customer logo is dark art on a
   light ground and this is how it will actually have to sit. */
.tt .trust { padding-top: 86px; padding-bottom: 78px; }
.tt .trust-l {
  text-align: center; margin-bottom: 26px;
  font: 700 12px/1.4 var(--body);
  text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--text-2);
}
.tt .marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.tt .marquee-t { display: flex; width: max-content; animation: tt-marq 46s linear infinite; }
.tt .marquee:hover .marquee-t, .tt .marquee:focus-within .marquee-t { animation-play-state: paused; }
.tt .marquee-set { display: flex; gap: 14px; padding-right: 14px; }
@keyframes tt-marq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.tt .plate {
  display: grid; place-items: center;
  width: 168px; height: 74px; flex: none;
  background: #fff; border-radius: var(--r-md);
}
/* The empty-slot mark. It reads as "a logo belongs here", which is the honest
   state until written permission is on file for each customer. */
.tt .plate-m {
  width: 74px; height: 12px; border-radius: 100px;
  background: var(--ink-200);
}

/* --- Live counters ---------------------------------------------------- */
.tt .live {
  display: inline-block; width: 7px; height: 7px; margin-left: 7px;
  border-radius: 50%; background: var(--red-500); vertical-align: middle;
  animation: tt-pulse 2.4s var(--ease) infinite;
}
@keyframes tt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ====================================================================== */
/* 9. Cards and blocks                                                    */
/* ====================================================================== */

/* Benefit cards carry a hairline that fills on hover - the same device as the
   nav tiles, so the two read as one family. */
/* Clipped to the card's 8px radius: the bar used to be inset -1px and
   `calc(100% + 2px)` wide, so it drew square across both rounded top corners. */
.tt .card--ben { position: relative; padding-top: 30px; overflow: hidden; }
.tt .card--ben::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 46px;
  background: var(--red-600);
  transition: width .5s var(--ease);
}
.tt .card--ben:hover::before { width: 100%; }
.tt .ben-n {
  display: block; margin-bottom: 12px;
  font: 600 12px/1 var(--mono); letter-spacing: .06em;
  color: var(--red-600);
}

.tt .card {
  padding: 26px;
  background: var(--fg);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
}
.tt .card h4, .tt .card .d4 { margin-bottom: 8px; }
.tt .card p { color: var(--text-2); font-size: 15.5px; }
.tt .card .lnk { margin-top: 16px; }

/* Numbered capability card. The numeral is set in the display face at a size
   that makes it a graphic element, not a list marker. */
.tt .card-num {
  display: block; margin-bottom: 14px;
  font: 800 30px/1 var(--display); letter-spacing: 1px;
  color: var(--accent); opacity: .35;
}

/* A card that sits ON the gradient: solid white, so the 12-16px prose inside it
   is never set directly on the sweep. See the contrast rules in the spec. */
.tt .s7 .card, .tt .s5 .card {
  background: #fff; color: var(--ink-900); border-color: transparent;
}
.tt .s7 .card p, .tt .s5 .card p { color: var(--ink-600); }
.tt .s7 .card .lnk, .tt .s5 .card .lnk { color: var(--red-600); }
.tt .s7 .card .card-num, .tt .s5 .card .card-num { color: var(--red-600); }

/* Media card - image cap over a white body. The industries grid. */
.tt .mcard {
  display: flex; flex-direction: column;
  background: #fff; color: var(--ink-900);
  border-radius: var(--r-md); overflow: hidden;
  transition: transform .35s var(--ease);
}
.tt .mcard:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .tt .mcard:hover { transform: none; } }
.tt .mcard-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--steel-100); }
.tt .mcard-img img { width: 100%; height: 100%; object-fit: cover; }
.tt .mcard-b { padding: 18px 20px 22px; }
.tt .mcard-b .d4 { font-size: 18px; margin-bottom: 6px; }
.tt .mcard-b p { font-size: 14.5px; color: var(--ink-600); line-height: 1.45; }

/* The CTA tile that closes the industries grid, per Passport 360. */
.tt .mcard--cta {
  background: var(--bleed-deep); color: #fff;
  justify-content: center; padding: 28px 24px;
}
.tt .mcard--cta .d4 { font-size: 20px; line-height: 1.3; margin-bottom: 18px; }

/* ====================================================================== */
/* 10. Lifecycle rail                                                     */
/* ====================================================================== */

/* The golden thread. Seven stages, read left to right, joined by a hairline so
   it reads as one run rather than seven cards. */
.tt .rail {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--edge);
}
.tt .rail-step { padding: 22px 18px 0; border-right: 1px solid var(--edge); }
.tt .rail-step:last-child { border-right: 0; }
.tt .rail-n {
  display: inline-block; margin-bottom: 12px;
  font: 700 12px/1 var(--mono); letter-spacing: 1px; color: var(--accent);
}
/* CHG-S1287 — this was an h5 directly under the section's h2, which skipped two levels of the
   outline. Now an h3, so the declarations that were coming from `.tt h5` are restated here. */
.tt .rail-step h3 {
  margin-bottom: 6px; font: 700 16.5px/1.35 var(--body);
  text-transform: none; letter-spacing: normal;
}
.tt .rail-step p { font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* ====================================================================== */
/* 11. Use-case tabs                                                      */
/* ====================================================================== */

.tt .uc-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--fg); border: 1px solid var(--edge);
  border-radius: var(--r-md); margin-bottom: 40px;
}
.tt .uc-tab {
  padding: 9px 22px; border-radius: var(--r-sm);
  font: 700 15px/1 var(--body); letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-2);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.tt .uc-tab[aria-selected="true"] { background: var(--red-600); color: #fff; }

/* Stacked, not swapped. Every panel occupies the same grid cell, so the section is
   sized by the tallest one and the page below it does not move as the tabs are
   clicked. `visibility` rather than `display` because a display:none panel adds no
   height, which is the one thing this wrapper exists to prevent. Both keep the
   inactive panels out of the tab order and out of the accessibility tree. */
.tt .uc-panels { display: grid; }
.tt .uc-panel { grid-area: 1 / 1; visibility: hidden; }
.tt .uc-panel.is-on { visibility: visible; }
.tt .uc-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 52px; align-items: center;
}
.tt .uc-grid h3 { margin-bottom: 16px; max-width: 18ch; }
.tt .uc-grid p { color: var(--text-2); font-size: 17px; }
.tt .uc-grid .lnk { margin-top: 22px; }
.tt .uc-shot {
  border: 1px solid var(--edge); border-radius: var(--r-md); overflow: hidden;
  background: var(--fg);
}
/* Fill the column. Without this an image NARROWER than the column renders at its
   natural size inside the plate: the phone shot that used to sit here was 414px
   wide in a 657px frame and 896px tall, so the panel grew to 900px of mostly
   white and the tab read as empty. */
.tt .uc-shot img { width: 100%; }

/* Inside the tab panels the box is a FIXED 16:9 whatever the shot is, because the
   four shots range from 1.51 to 3.13 and the panel was growing and shrinking as the
   tabs were clicked — everything below the section jumped with it. `contain` rather
   than `cover`: these are screenshots, and cropping one to fit loses the part of the
   screen the tab is there to show. */
.tt .uc-panel .uc-shot { aspect-ratio: 16 / 9; }
.tt .uc-panel .uc-shot img {
  width: 100%; height: 100%; object-fit: contain;
}
/* A composed device image brings its own frames and shadow on a transparent
   background, so it takes no plate. */
.tt .uc-shot--bare {
  border: 0; background: none; border-radius: 0; overflow: visible;
}

/* ====================================================================== */
/* 12. Standards strip                                                    */
/* ====================================================================== */

.tt .std-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--edge);
  border: 1px solid var(--edge); border-radius: var(--r-md); overflow: hidden;
}
.tt .std {
  padding: 20px; background: var(--bg);
  transition: background-color .3s var(--ease);
}
.tt .std:hover { background: var(--fg); }
.tt .std-c {
  display: block; margin-bottom: 6px;
  font: 600 12.5px/1 var(--mono); letter-spacing: -.2px; color: var(--red-600);
}
.tt .std-n { font-size: 15px; font-weight: 600; line-height: 1.35; }
.tt .std-d { font-size: 13.5px; color: var(--text-2); line-height: 1.4; margin-top: 4px; }

/* ====================================================================== */
/* 13. Stats, logo strip, matrix                                          */
/* ====================================================================== */

.tt .stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px; background: var(--edge);
}
.tt .stat { padding: 22px 18px; background: var(--bg); }
.tt .stat-v {
  display: block; font: 800 34px/1 var(--display); letter-spacing: .5px;
}
.tt .stat-l {
  display: block; margin-top: 6px;
  font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-2);
}
.tt .s7 .stat, .tt .s5 .stat { background: transparent; }
.tt .s7 .stats, .tt .s5 .stats { background: var(--edge); }

.tt .strip-l {
  text-align: center; font-size: 14.5px; color: var(--text-2); margin-bottom: 26px;
}
.tt .strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 12px;
}
.tt .strip-i {
  padding: 8px 16px;
  border: 1px solid var(--edge); border-radius: 100px;
  font: 600 14px/1.4 var(--body); color: var(--text-2);
}
.tt .s7 .strip-i { color: rgba(255, 255, 255, .92); }

.tt .matrix { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tt .matrix th, .tt .matrix td {
  padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--edge);
  vertical-align: top;
}
.tt .matrix thead th {
  font: 700 13px/1.4 var(--body);
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-2);
}
.tt .matrix td + td, .tt .matrix th + th { text-align: center; width: 21%; }
.tt .matrix .grp td {
  font: 700 12.5px/1.4 var(--body);
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--red-600); background: var(--fg);
}
/* Brand red, not --safe. Green on this site means an item is safe to load;
   spending it on "this edition includes the feature" dilutes the one place the
   colour has to be unambiguous. */
.tt .matrix .yes { color: var(--red-600); font-weight: 700; }
.tt .matrix .no { color: var(--ink-400); }
.tt .matrix .note { display: block; font-size: 13.5px; color: var(--text-2); }

/* ====================================================================== */
/* 14. Honesty note                                                       */
/* ====================================================================== */

/* Never set on the gradient - it is 13px prose. On .s7 it gets its own card. */
.tt .honest {
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.tt .s7 .honest, .tt .s5 .honest, .tt .s6 .honest {
  display: inline-block; padding: 8px 14px;
  background: rgba(0, 0, 0, .28); border-radius: var(--r-sm);
  color: rgba(255, 255, 255, .95);
}

/* ====================================================================== */
/* 15. Footer                                                             */
/* ====================================================================== */

/* The footer opens with air of its own. It follows a gradient band, and butting
   the mark straight up against that edge read as the page running out rather
   than closing. */
.tt footer { padding-top: 72px; }
.tt .foot-top { padding-bottom: 44px; border-bottom: 1px solid var(--edge); }
.tt .foot-top img { display: block; }
.tt .foot-cols {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px; padding: 52px 0 56px;
}
.tt .foot-cols h6 {
  margin: 0 0 12px;
  font: 700 12px/1.4 var(--body);
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-500);
}
.tt .foot-cols a {
  display: block; padding: 6px 0; font-size: 14.5px; color: var(--ink-300);
  transition: color .3s var(--ease);
}
.tt .foot-cols a:hover { color: var(--red-300); }
.tt .foot-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 26px 0 52px; border-top: 1px solid var(--edge);
  font-size: 13.5px; color: var(--ink-400);
}
.tt .foot-bar a:hover { color: var(--red-300); }
.tt .foot-blurb {
  margin-top: 20px; max-width: 62ch;
  font-size: 14px; color: var(--ink-400); line-height: 1.6;
}

.tt .foot-cred {
  margin: 0 0 26px; padding-bottom: 26px;
  border-bottom: 1px solid var(--line-on-dark);
  font-size: 12px; line-height: 1.7; color: var(--ink-500);
}
.tt .foot-cred a { color: var(--ink-400); text-decoration: underline; }

/* --- Platform: the item record ---------------------------------------- */
/* A dense enumerated list rather than a card grid. Twelve cards would say
   "twelve features"; a ruled list says "one record with twelve panels", which
   is the actual claim. */
.tt .named {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px; border-top: 1px solid var(--edge);
}
.tt .named > div {
  display: grid; grid-template-columns: 30px minmax(0, 1fr);
  gap: 0 14px; padding: 17px 0; border-bottom: 1px solid var(--edge);
}
.tt .named-n {
  grid-row: span 2; padding-top: 3px;
  font: 600 12px/1 var(--mono); color: var(--red-600);
}
.tt .named b { font: 700 16.5px/1.35 var(--body); }
.tt .named > div > span:last-child {
  margin-top: 3px; font-size: 14.5px; line-height: 1.55; color: var(--text-2);
}

/* --- Platform: capability families ------------------------------------ */
.tt .fam {
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 40px; padding: 40px 0; border-top: 1px solid var(--edge);
}
.tt .fam:last-child { border-bottom: 1px solid var(--edge); }
.tt .fam-h { position: sticky; top: calc(var(--nav-h-sm) + 26px); align-self: start; }
.tt .fam-h h3 { font-size: clamp(24px, 2.2vw, 30px); }
.tt .fam-h p { margin-top: 12px; font-size: 15px; color: var(--text-2); }
.tt .fam-c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* --- Tick list -------------------------------------------------------- */
.tt .ticks { display: grid; gap: 12px; margin-top: 26px; }
.tt .ticks li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px;
  font-size: 15.5px; color: var(--text-2);
}
.tt .ticks li::before {
  content: ""; margin-top: 7px;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--red-600);
}

/* ====================================================================== */
/* 16. Forms                                                              */
/* ====================================================================== */

/* Two real forms use these: the demo request and the tag order. Both post to
   MarketingController, so the markup has to satisfy that validator rather than
   just look like a form. Three rules are load-bearing rather than cosmetic:

   - `.hp` is the honeypot. It is positioned off-screen and NOT `display:none`,
     because some bots skip hidden fields and fill positioned ones. Its label
     stays in the markup for anyone reading with a screen reader.
   - `.bad` and `.ok` are the only places on the site that carry a status
     colour, and they still avoid the safety palette: an invalid postcode is not
     a temporary works hazard, so it does not get the hazard red.
   - Controls are 16px minimum. Anything smaller makes iOS Safari zoom the page
     on focus, which on a phone reads as the form jumping away from the finger. */

.tt .frm { display: grid; gap: 14px; margin-top: 24px; }
.tt .frm .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tt .frm .field { display: grid; gap: 6px; }

.tt .frm label {
  font: 600 14px/1.3 var(--body);
  color: var(--ink-700);
}

.tt .frm input[type="text"],
.tt .frm input[type="email"],
.tt .frm input[type="tel"],
.tt .frm input[type="number"],
.tt .frm select,
.tt .frm textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: 400 16px/1.4 var(--body);
  color: var(--ink-900);
  background: #fff;
}

.tt .frm textarea { resize: vertical; }

.tt .frm input:focus-visible,
.tt .frm select:focus-visible,
.tt .frm textarea:focus-visible {
  outline: 2px solid var(--red-600);
  outline-offset: 1px;
  border-color: var(--red-600);
}

.tt .frm .consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 4px;
}

.tt .frm .consent input { margin-top: 3px; }
.tt .frm .consent label { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--ink-600); }
.tt .frm .consent a { color: var(--red-700); }

.tt .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tt .ok,
.tt .bad {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  padding: 18px 20px;
  background: var(--ink-100);
  color: var(--ink-900);
}

.tt .ok { border-left-color: var(--ink-900); }
.tt .bad { border-left-color: var(--red-600); }
/* The demo page carries this as an h2 and the shop page as an h3: same panel, different
   depth in each page's outline. */
.tt .ok h3, .tt .ok h2 { font: 800 22px/1.15 var(--display); text-transform: uppercase; letter-spacing: .4px; }
.tt .ok p, .tt .bad li { font-size: 15.5px; line-height: 1.55; color: var(--ink-600); }
.tt .bad ul { margin-top: 8px; padding-left: 18px; list-style: disc; }

/* ====================================================================== */
/* 17. Responsive                                                         */
/* ====================================================================== */

@media (max-width: 1080px) {
  .tt .section { padding-top: 64px; padding-bottom: 64px; }
  .tt .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .tt .hero h1 { max-width: 18ch; }
  .tt .film-col:nth-child(2) { padding-top: 28px; }
  .tt .trust { padding-top: 64px; padding-bottom: 60px; }
  .tt .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt .std-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .tt .rail-step {
    border: 1px solid var(--edge); border-radius: var(--r-md);
    padding: 18px; margin-bottom: -1px;
  }
  .tt .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tt .uc-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tt .named { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tt .fam { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 0; }
  .tt .fam-h { position: static; }
  .tt .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
}

@media (max-width: 720px) {
  .tt .section { padding-top: 52px; padding-bottom: 52px; }
  .tt .head { margin-bottom: 36px; }
  .tt .grid--2, .tt .grid--3, .tt .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .tt .fam-c { grid-template-columns: minmax(0, 1fr); }
  .tt .std-grid { grid-template-columns: minmax(0, 1fr); }
  .tt .rail { grid-template-columns: minmax(0, 1fr); }
  .tt .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt .uc-tabs { display: flex; width: 100%; overflow-x: auto; }
  .tt .film { gap: 10px; }
  .tt .film-col { gap: 10px; }
  .tt .film-col:nth-child(2) { padding-top: 0; }
  .tt .plate { width: 132px; height: 62px; }
  .tt .btn-row .btn { flex: 1 1 auto; }
  .tt .matrix { font-size: 14px; }
  .tt .matrix th, .tt .matrix td { padding: 10px 8px; }
}

@media (max-width: 560px) {
  .tt .frm .pair { grid-template-columns: minmax(0, 1fr); }
}

/* ====================================================================== */
/* 18. Legal pages                                                        */
/* ====================================================================== */

/* Privacy and Terms keep the markup they already had, because that text is the
   URL Google Play and the App Store hold on file and it is not worth a diff to
   restyle. This maps the handful of class names and the two colour variables
   those two files use onto the v2 tokens, so they render inside the new chrome
   without their text being touched.
   The lucide `data-lucide` placeholders are hidden rather than filled: the v2
   site does not load an icon library, and an unfilled one renders as a gap. */

.tt .legal { --red: var(--red-600); --muted: var(--ink-600); }
.tt .legal [data-lucide] { display: none; }

.tt .legal .pagehead {
  padding: 132px 0 48px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.tt .legal .pagehead h1 {
  font: 800 clamp(34px, 5vw, 54px)/1.05 var(--display);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 14px;
}

.tt .legal .crumbs { font-size: 14px; color: var(--ink-600); }
.tt .legal .crumbs a { color: var(--ink-600); }
.tt .legal .crumbs .sep { padding: 0 8px; }
.tt .legal .eyebrow.center { display: inline-block; margin-top: 18px; }
.tt .legal .sub { margin-top: 12px; font-size: 15px; color: var(--ink-600); }

.tt .legal section + section { padding: 56px 0 88px; }
.tt .legal .card { background: #fff; border: 1px solid var(--line); }

/* The legal text uses `h2.h3`, so it must not take the display-face heading
   treatment the rest of the site gives an h2. */
.tt .legal .h3 {
  font: 700 21px/1.3 var(--body);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 30px;
}

.tt .legal .h3:first-child { margin-top: 0; }
.tt .legal p, .tt .legal li { font-size: 16px; line-height: 1.65; color: var(--ink-700); }
.tt .legal a { color: var(--red-700); text-decoration: underline; }
.tt .legal ul { list-style: disc; }

@media (max-width: 720px) {
  .tt .legal .pagehead { padding-top: 104px; }
}

/* --- 19. Partial last rows (G549) ------------------------------------- */

/* A grid whose item count does not divide by its column count leaves a short
   final row that reads as a mistake rather than as a stop. Two grids on the
   site do it, and both are fixed by letting the stragglers widen rather than
   by padding the data out with an item nobody asked for. */

/* The module families on /platform. One family carries an odd number of
   modules, which left a single card alone beside a gap. */
.tt .fam-c > article:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* The sector cards on /solutions. Seven items in four columns left three
   adrift. Twelve tracks lets the first four span three each and the last
   three span four each, so both rows fill exactly.
   ★ This arithmetic is tied to there being SEVEN sectors in
   MarketingV2::solutions(). Adding or removing one means revisiting it. */
@media (min-width: 1081px) {
  .tt #sectors .grid--4 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tt #sectors .grid--4 > * { grid-column: span 3; }
  .tt #sectors .grid--4 > :nth-child(n + 5) { grid-column: span 4; }
}

/* At two columns the seventh card is the odd one out instead. */
@media (min-width: 721px) and (max-width: 1080px) {
  .tt #sectors .grid--4 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}