/* ==========================================================================
   TAF site stylesheet
   One file. No framework. The only outside call is Google Fonts, loaded in
   the page head.

   Colour family follows the Salesforce Lightning Design System so the site
   reads as native to a Salesforce admin. TAF brand blue #048EF1 is the
   primary. No Salesforce logo, mark or font is used.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette, from the To A Finish brand guide */
  --taf-blue:        #0159E8;   /* Electric Blue, primary   CMYK 84/67/0/0 */
  --taf-blue-bright: #00C3FF;   /* Frost Blue, primary      CMYK 63/3/0/0 */
  --taf-green:       #4EE54E;   /* Bright Green, secondary  CMYK 61/0/97/0 */
  --taf-lime:        #CAF200;   /* Yellow Green, secondary  CMYK 26/0/100/0 */

  /* Derived from Electric Blue. The brand guide names no navy or neutral,
     so these are mixes of Electric Blue toward black and white. */
  --taf-blue-dark: #0143AE;   /* 25% black */
  --navy:          #013180;   /* 45% black, headings        11.98:1 on white */
  --navy-deep:     #002258;   /* 62% black, hero and footer 15.33:1 with white text */
  --cloud:         #F0F5FE;   /* 94% white, tile fill */
  --frost-tint:    #E0F8FF;   /* Frost Blue, 88% white */

  /* Hero wash. Light in the light theme, deep in the dark theme. */
  --wash-1: #E9F2FE;
  --wash-2: #E0F8FF;

  /* Neutrals */
  --canvas:   #FFFFFF;
  --surface:  #F7F9FB;
  --surface-2:#F4F4F4;
  --hairline: #E3E8EE;
  --ink:      #080707;
  --ink-soft: #181818;
  --muted:    #5B6672;

  /* Semantic. Frost Blue and both greens fail contrast as text on white,
     so they are fill colours only and always carry dark text. */
  --success: #2E844A;
  --warning: #DD7A01;
  --error:   #EA001E;
  --star:    #E8A33D;

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 80px;

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 32px; --r-full: 9999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(8, 7, 7, .06), 0 1px 3px rgba(8, 7, 7, .08);
  --shadow-2: 0 2px 8px rgba(8, 7, 7, .08), 0 8px 20px rgba(8, 7, 7, .06);
  --shadow-3: 0 12px 32px rgba(8, 7, 7, .14);

  /* Type */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Layout */
  --wrap: 1280px;
  --gutter: 24px;
  --header-h: 112px;

  /* Roles, remapped in dark mode */
  --bg:          var(--canvas);
  --bg-alt:      var(--surface);
  --bg-tile:     var(--cloud);
  --card-bg:     var(--canvas);
  --text:        var(--ink-soft);
  --text-dim:    var(--muted);
  --heading:     var(--navy);
  --link:        var(--taf-blue-dark);
  --link-strong: var(--taf-blue);
  --border:      var(--hairline);
  --header-bg:   rgba(255, 255, 255, .92);
  --footer-bg:   var(--navy-deep);
  --footer-text: #FFFFFF;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s3);
}
h1 { font-size: clamp(34px, 6vw, 64px); }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 24px); }
h4 { font-size: 17px; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s4); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre { font-family: var(--font-mono); font-size: .92em; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s6) 0; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--taf-blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.taf-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.taf-section { padding: var(--s9) 0; }
.taf-section--tight { padding: var(--s7) 0; }
.taf-section--alt { background: var(--bg-alt); }
.taf-center { text-align: center; }
.taf-lede { font-size: 18px; color: var(--text-dim); max-width: 62ch; }
/* A lede is capped at 62 characters. In a centred block the box itself
   has to centre too, or the text sits left of the heading above it.
   The navy hero is left aligned, so it keeps its left edge. */
.taf-center .taf-lede,
.taf-hero:not(.taf-hero--navy) .taf-lede { margin-left: auto; margin-right: auto; }
.taf-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--taf-blue);
  margin-bottom: var(--s2);
}
.taf-accent { color: var(--link-strong); }
.taf-skip {
  position: absolute; left: -9999px; top: 0; background: var(--taf-blue);
  color: #fff; padding: var(--s3) var(--s4); z-index: 100; border-radius: 0 0 var(--r-md) 0;
}
.taf-skip:focus { left: 0; }
.taf-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.taf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: inherit; font-weight: 800; line-height: 1;
  padding: 12px 22px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.taf-btn:hover { text-decoration: none; }
.taf-btn--primary { background: var(--taf-blue); color: #fff; }
.taf-btn--primary:hover { background: var(--taf-blue-dark); color: #fff; }
.taf-btn--outline { background: transparent; color: var(--link); border-color: var(--taf-blue); }
.taf-btn--outline:hover { background: var(--cloud); }
.taf-btn--ghost { background: transparent; color: var(--link); }
.taf-btn--ghost:hover { background: var(--bg-alt); }
.taf-btn--block { display: flex; width: 100%; }
.taf-btn--sm { padding: 8px 14px; font-size: 14px; }

/* Arrow link, as on the reference "Browse Learning ->" */
.taf-arrow { font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.taf-arrow::after { content: "\2192"; transition: transform .15s; }
.taf-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.taf-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.taf-header__top,
.taf-header__nav-row {
  display: flex; align-items: center; gap: var(--s5);
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
}
.taf-header__top { height: 60px; }
.taf-header__nav-row { height: 52px; }

/* Logo. The brand files are PNG with a transparent background.
   The colour version carries a black wordmark, so it needs a light
   background. The white version goes on navy and in the dark theme. */
.taf-logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.taf-logo:hover { text-decoration: none; }
/* Every rule below matches img plus a class, so they all carry the same
   specificity and the last matching one wins. A bare `.taf-logo img`
   display rule would outrank the class rules and show both logos. */
.taf-logo img { height: 38px; width: auto; }
.taf-logo img.taf-logo__on-light { display: block; }
.taf-logo img.taf-logo__on-dark  { display: none; }

/* Inside the footer the background is navy in both themes. */
.taf-footer .taf-logo img.taf-logo__on-light { display: none; }
.taf-footer .taf-logo img.taf-logo__on-dark  { display: block; }
.taf-footer .taf-logo img { height: 40px; }

.taf-header__spacer { flex: 1 1 auto; }

.taf-nav { display: flex; align-items: center; gap: var(--s5); }
.taf-nav__link {
  font-weight: 800; font-size: 15px; color: var(--heading);
  padding: 8px 12px; border-radius: var(--r-full);
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
}
.taf-nav__link:hover { color: var(--link-strong); text-decoration: none; }
.taf-nav__link[aria-expanded="true"],
.taf-nav__link.is-active { color: var(--link-strong); background: var(--cloud); }

/* Search */
.taf-search { position: relative; flex: 1 1 420px; max-width: 560px; }
.taf-search__icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--taf-blue); pointer-events: none;
}
.taf-search__input {
  width: 100%; font: inherit; font-weight: 500; color: var(--heading);
  padding: 11px 18px 11px 50px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-full);
}
.taf-search__input::placeholder { color: var(--heading); opacity: .85; font-weight: 500; }
.taf-search__input:focus { border-color: var(--taf-blue); }

/* Icon button, used for help and the theme toggle */
.taf-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); cursor: pointer; flex: none;
}
.taf-iconbtn:hover { background: var(--bg-alt); }
.taf-iconbtn svg { width: 19px; height: 19px; }

/* Hamburger, phone only */
.taf-burger { display: none; }

/* Phone drawer. Hidden everywhere until the phone breakpoint opens it. */
.taf-drawer { display: none; }

/* --------------------------------------------------------------------------
   5. Mega menu
   -------------------------------------------------------------------------- */

.taf-mega {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}
.taf-mega.is-open { display: block; }
.taf-mega__inner {
  display: grid; grid-template-columns: 240px 1fr 320px; gap: var(--s7);
  max-width: var(--wrap); margin: 0 auto; padding: var(--s6) var(--gutter) var(--s7);
}
.taf-mega__inner--2col { grid-template-columns: 240px 1fr; }

.taf-rail { display: flex; flex-direction: column; gap: var(--s1); border-right: 1px solid var(--border); padding-right: var(--s4); }
.taf-rail__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-full);
  font-weight: 800; font-size: 15px; color: var(--heading);
  background: transparent; border: 1px solid transparent;
  cursor: pointer; text-align: left; font-family: inherit;
}
.taf-rail__item svg { width: 18px; height: 18px; color: var(--taf-blue); flex: none; }
.taf-rail__item:hover { background: var(--bg-alt); }
.taf-rail__item.is-active {
  background: var(--cloud); border-color: var(--taf-blue); color: var(--link-strong);
}

.taf-mega__panel { display: none; }
.taf-mega__panel.is-active { display: block; }
.taf-mega__title { margin-bottom: var(--s1); }
.taf-mega__sub { color: var(--text-dim); margin-bottom: var(--s6); }

.taf-linkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s6); }
.taf-linkgrid--2 { grid-template-columns: repeat(2, 1fr); }
.taf-linkgrid__item a { font-weight: 800; color: var(--link-strong); display: inline-block; }
.taf-linkgrid__item p { margin: 2px 0 0; color: var(--text-dim); font-size: 15px; }

.taf-mega__aside { background: var(--bg-tile); border-radius: var(--r-lg); padding: var(--s5); }
.taf-mega__aside h4 { margin-bottom: var(--s4); }
.taf-asidecard {
  display: block; background: var(--card-bg); border-radius: var(--r-md);
  padding: var(--s4); margin-bottom: var(--s3); box-shadow: var(--shadow-1);
}
.taf-asidecard:hover { text-decoration: none; box-shadow: var(--shadow-2); }
.taf-asidecard strong { color: var(--link-strong); display: block; }
.taf-asidecard span { color: var(--text-dim); font-size: 14px; }

/* --------------------------------------------------------------------------
   6. Announcement strip
   -------------------------------------------------------------------------- */

/* Brand rule. Uses all four brand colours in order. */
.taf-rule {
  display: block;
  height: 5px; border-radius: var(--r-full); width: 128px;
  background: linear-gradient(90deg,
    var(--taf-blue) 0%, var(--taf-blue-bright) 40%,
    var(--taf-green) 74%, var(--taf-lime) 100%);
  margin: var(--s4) 0 var(--s5);
}
.taf-center .taf-rule, .taf-hero .taf-rule { margin-left: auto; margin-right: auto; }

.taf-strip {
  background: linear-gradient(90deg, var(--navy-deep) 0%, var(--taf-blue) 55%, var(--taf-blue-bright) 100%);
  color: #fff; text-align: center; padding: var(--s3) var(--gutter); font-weight: 800;
}
.taf-strip a { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.taf-hero { padding: var(--s9) 0; text-align: center; }
.taf-hero__title { max-width: 18ch; margin-inline: auto; }
.taf-hero__actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s5); }
.taf-hero--navy {
  background: var(--navy-deep); color: #fff; text-align: left;
}
.taf-hero--navy h1, .taf-hero--navy h2 { color: #fff; }
.taf-hero--navy .taf-lede { color: rgba(255, 255, 255, .88); }
.taf-hero--navy .taf-eyebrow { color: var(--taf-blue-bright); }
.taf-hero--navy .taf-card__title, .taf-hero--navy a { color: #fff; }
.taf-hero__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
.taf-hero__solo { max-width: 62ch; }

/* Swatch, used on the style guide. Holds its own colours in both themes. */
.taf-swatch { color: #080707; }
.taf-swatch h4 { color: #080707; }
.taf-swatch p { color: rgba(8, 7, 7, .7); }
.taf-swatch--onDark { color: #fff; }
.taf-swatch--onDark h4 { color: #fff; }
.taf-swatch--onDark p { color: rgba(255, 255, 255, .85); }

/* --------------------------------------------------------------------------
   8. Tiles and cards
   -------------------------------------------------------------------------- */

.taf-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s4); }
.taf-tiles--4 { grid-template-columns: repeat(4, 1fr); }
.taf-tiles--3 { grid-template-columns: repeat(3, 1fr); }

.taf-tile {
  display: block; background: var(--bg-tile); border-radius: var(--r-lg);
  padding: var(--s5); text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.taf-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-2); }
.taf-tile__icon { width: 26px; height: 26px; color: var(--taf-blue); margin-bottom: var(--s4); }
.taf-tile h3, .taf-tile h4 { margin-bottom: var(--s1); }
.taf-tile p { margin: 0; color: var(--text-dim); font-size: 15px; }

.taf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.taf-cards--2 { grid-template-columns: repeat(2, 1fr); }
.taf-cards--4 { grid-template-columns: repeat(4, 1fr); }

.taf-card {
  display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s5);
  box-shadow: var(--shadow-1); text-decoration: none; color: inherit;
  transition: box-shadow .15s, transform .15s;
  position: relative;
}
a.taf-card:hover { text-decoration: none; box-shadow: var(--shadow-2); transform: translateY(-2px); }
.taf-card__logo {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tile); color: var(--taf-blue); margin-bottom: var(--s4);
}
.taf-card__logo svg { width: 30px; height: 30px; }

/* A real app icon replaces the tinted box. The icon already carries its
   own rounded corners, so the wrapper adds no background and no padding. */
.taf-card__logo--img { width: 64px; height: 64px; background: none; border-radius: 0; }
.taf-card__logo--img img { display: block; width: 100%; height: 100%; }
.taf-card__badge {
  position: absolute; top: var(--s4); right: var(--s4);
  width: 30px; height: 30px; border-radius: var(--r-full);
  background: var(--bg-tile); color: var(--taf-blue);
  display: flex; align-items: center; justify-content: center;
}
.taf-card__badge svg { width: 17px; height: 17px; }
.taf-card__title { color: var(--link-strong); font-size: 19px; font-weight: 800; margin: 0 0 2px; }
.taf-card__vendor { color: var(--text-dim); font-size: 15px; margin: 0 0 var(--s2); }
.taf-card__body { color: var(--text); margin: 0 0 var(--s4); flex: 1 1 auto; }
.taf-card__foot { display: flex; flex-wrap: wrap; gap: var(--s2); }
.taf-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  border-top: 1px solid var(--border); margin-top: var(--s4); padding-top: var(--s3);
}

/* Rating row */
.taf-rating { display: flex; align-items: center; gap: 6px; margin-bottom: var(--s3); font-size: 15px; }
.taf-rating__stars { color: var(--star); letter-spacing: 1px; }
.taf-rating__stars .is-off { color: var(--border); }
.taf-rating__count { color: var(--text-dim); }
.taf-rating__score { font-weight: 800; color: var(--text); }

/* Pills */
.taf-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--cloud); color: var(--link-strong);
  font-size: 13px; font-weight: 800;
}
.taf-pill--grey { background: var(--bg-alt); color: var(--text-dim); }
.taf-pill--green { background: var(--taf-green); color: #04210B; }
.taf-pill--lime  { background: var(--taf-lime);  color: #1E2400; }
.taf-pill--frost { background: var(--taf-blue-bright); color: #002258; }
.taf-pill--removable button {
  border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; line-height: 1; padding: 0;
}

/* Article card */
.taf-article { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.taf-article:hover { text-decoration: none; }
.taf-article__media {
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-tile); display: flex; align-items: center; justify-content: center;
  color: var(--taf-blue); margin-bottom: var(--s4);
}
.taf-article__media svg { width: 56px; height: 56px; }
.taf-article h3 { color: var(--heading); }
.taf-article:hover h3 { color: var(--link-strong); }
.taf-article p { color: var(--text-dim); }

/* --------------------------------------------------------------------------
   9. Listing layout: filter rail plus results
   -------------------------------------------------------------------------- */

.taf-listing { display: grid; grid-template-columns: 300px 1fr; gap: var(--s7); align-items: start; }

.taf-filters {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s5);
  position: sticky; top: calc(var(--header-h) + 16px);
}
.taf-filters__search { position: relative; margin-bottom: var(--s5); }
.taf-filters__search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-dim);
}
.taf-filters__search input {
  width: 100%; font: inherit; padding: 10px 14px 10px 40px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg); color: var(--text);
}
.taf-fgroup { border-top: 1px solid var(--border); }
.taf-fgroup:first-of-type { border-top: 0; }
.taf-fgroup__head {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: 12px 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--heading); text-align: left;
}
.taf-fgroup__head .taf-chev { margin-left: auto; width: 16px; height: 16px; transition: transform .15s; color: var(--text-dim); }
.taf-fgroup__head[aria-expanded="true"] .taf-chev { transform: rotate(180deg); }
.taf-fgroup__body { display: none; padding: 0 0 var(--s3) var(--s5); }
.taf-fgroup__head[aria-expanded="true"] + .taf-fgroup__body { display: block; }
.taf-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 15px; }
.taf-check input { width: 17px; height: 17px; accent-color: var(--taf-blue); }

.taf-results__head {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5);
}
.taf-results__count { color: var(--text); }
.taf-results__sort { margin-left: auto; font-weight: 800; color: var(--link-strong); }

/* --------------------------------------------------------------------------
   10. Tabs
   -------------------------------------------------------------------------- */

.taf-tabs { display: flex; gap: var(--s6); border-bottom: 1px solid var(--border); margin-bottom: var(--s6); }
.taf-tabs__btn {
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 12px 2px; margin-bottom: -1px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 17px; color: var(--heading);
}
.taf-tabs__btn:hover { color: var(--link-strong); }
.taf-tabs__btn[aria-selected="true"] { color: var(--heading); border-bottom-color: var(--navy); }
.taf-tabs__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   11. Accordion
   -------------------------------------------------------------------------- */

.taf-acc { border-top: 1px solid var(--border); }
.taf-acc__item { border-bottom: 1px solid var(--border); }
.taf-acc__head {
  display: flex; align-items: center; gap: var(--s4); width: 100%;
  padding: var(--s5) 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 19px; color: var(--heading); text-align: left;
}
.taf-acc__sign {
  margin-left: auto; flex: none;
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--cloud); color: var(--link-strong);
  display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
}
.taf-acc__head[aria-expanded="true"] .taf-acc__sign::before { content: "\2212"; }
.taf-acc__head[aria-expanded="false"] .taf-acc__sign::before { content: "\002B"; }
.taf-acc__body { padding: 0 0 var(--s5); color: var(--text); max-width: 78ch; }
.taf-acc__body[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.taf-footer { background: var(--footer-bg); color: var(--footer-text); padding: var(--s8) 0 var(--s7); }
.taf-footer a { color: var(--footer-text); text-decoration: underline; }
.taf-footer__brand { margin-bottom: var(--s5); }
.taf-footer__links { display: flex; flex-wrap: wrap; gap: var(--s5); font-weight: 500; margin-bottom: var(--s6); }
.taf-footer__base { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; color: rgba(255,255,255,.72); font-size: 14px; }
.taf-footer__base a { color: rgba(255,255,255,.72); }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .taf-mega__inner { grid-template-columns: 220px 1fr; }
  .taf-mega__aside { display: none; }
  .taf-tiles { grid-template-columns: repeat(3, 1fr); }
  .taf-listing { grid-template-columns: 260px 1fr; gap: var(--s5); }
}

@media (max-width: 900px) {
  :root { --header-h: 116px; --gutter: 16px; }

  .taf-burger { display: inline-flex; }
  .taf-header__top { height: 58px; gap: var(--s3); }
  .taf-header__nav-row {
    height: auto; padding-bottom: var(--s3); padding-top: 0;
  }
  .taf-nav { display: none; }
  .taf-search { flex: 1 1 auto; max-width: none; }
  .taf-logo img { height: 28px; }

  /* The top row keeps the logo, the theme button and the menu button.
     The call-to-action buttons move into the drawer. */
  .taf-header__top .taf-btn { display: none; }
  .taf-header__spacer { display: block; }

  /* Phone drawer */
  .taf-drawer {
    border-top: 1px solid var(--border);
    background: var(--bg); padding: var(--s4) var(--gutter) var(--s6);
  }
  .taf-drawer.is-open { display: block; }
  .taf-drawer a, .taf-drawer button {
    display: block; width: 100%; text-align: left;
    padding: 12px 0; font: inherit; font-weight: 800; font-size: 17px;
    color: var(--heading); background: none; border: 0; border-bottom: 1px solid var(--border);
    cursor: pointer;
  }

  .taf-mega { display: none !important; }
  .taf-cards, .taf-cards--2, .taf-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .taf-tiles, .taf-tiles--4, .taf-tiles--3 { grid-template-columns: repeat(2, 1fr); }
  .taf-listing { grid-template-columns: 1fr; }
  .taf-filters { position: static; }
  .taf-hero__split { grid-template-columns: 1fr; }
  .taf-section { padding: var(--s7) 0; }
}

@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .taf-cards, .taf-cards--2, .taf-cards--4 { grid-template-columns: 1fr; }
  .taf-tiles, .taf-tiles--4, .taf-tiles--3 { grid-template-columns: 1fr; }
  .taf-linkgrid, .taf-linkgrid--2 { grid-template-columns: 1fr; }
  .taf-tabs { gap: var(--s4); overflow-x: auto; }
  .taf-footer__links { gap: var(--s3) var(--s4); }
  .taf-hero { padding: var(--s7) 0; }
}

@media print {
  .taf-header, .taf-footer, .taf-strip, .taf-filters { display: none; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   15. App colour coding

   Chosen 24 Sep 2026. Each of the four apps carries one brand colour, in
   brand order. Set data-app on any element and everything inside it picks
   up that colour through --app-accent. Put it on the body tag of an app
   section page, or on a single card in a grid.

   The accents are decorative. No text ever sits on Bright Green or Yellow
   Green without a dark colour, because both fail contrast on white.
   ========================================================================== */

/* Two tokens per app.

   --app-accent      the brand colour. Fills only: bars, dots, blocks.
   --app-accent-text a darkened version that passes 4.5:1 on white, for any
                     text or icon that must stay readable. Frost Blue and
                     both greens are far too light to read at full strength,
                     so they are darkened. Electric Blue needs no change.

   In the dark theme the full-strength colours read well on the dark canvas,
   so --app-accent-text goes back to the brand value. */

:root {
  --app-accent: var(--taf-blue);
  --app-accent-text: var(--taf-blue);
}

[data-app="simple-signature"]     { --app-accent: #0159E8; --app-accent-text: #0159E8; }
[data-app="address-verification"] { --app-accent: #00C3FF; --app-accent-text: #007FA6; }
[data-app="highlighter"]          { --app-accent: #4EE54E; --app-accent-text: #2E872E; }
[data-app="list-browse"]          { --app-accent: #CAF200; --app-accent-text: #697E00; }

/* A card that represents an app wears its colour as a top bar. */
.taf-card--app { overflow: hidden; padding-top: calc(var(--s5) + 5px); }
.taf-card--app::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--app-accent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* App cards on the home page. The icon and title link to the app site.
   The button at the bottom links to the AppExchange listing. */
.taf-card--app:hover { box-shadow: var(--shadow-2); }
.taf-card--app .taf-card__logo--img { width: 96px; height: 96px; margin-bottom: var(--s4); }
.taf-card--app .taf-card__title a { color: inherit; text-decoration: none; }
.taf-card--app .taf-card__title a:hover { text-decoration: underline; }
.taf-card--app .taf-card__foot { flex-direction: column; align-items: flex-start; gap: var(--s2); }
.taf-card--app .taf-card__store { margin-top: var(--s4); align-self: stretch; }

/* The same colour drives the rule and the eyebrow on an app section page. */
[data-app] .taf-rule--app {
  background: var(--app-accent);
  width: 96px;
}
[data-app] .taf-eyebrow--app { color: var(--app-accent-text); }

/* A small dot, for menus and lists where a full bar is too much. */
.taf-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: var(--r-full);
  background: var(--app-accent); margin-right: 8px; flex: none;
}

/* ==========================================================================
   16. Home hero

   A soft brand wash sits behind the hero, and the accent word carries a
   blue gradient. Both came from the look Joseph picked.
   ========================================================================== */

.taf-hero--home {
  background: linear-gradient(180deg, var(--wash-1) 0%, var(--bg) 88%);
}
.taf-hero--home .taf-hero__title .taf-accent {
  background: linear-gradient(90deg, var(--taf-blue) 0%, var(--taf-blue-bright) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--link-strong);
}


/* ==========================================================================
   17. Forms

   Used by the Salesforce Web-to-Case form on the support page.
   ========================================================================== */

.taf-form { margin: 0; }
.taf-field { margin-bottom: var(--s4); }
.taf-field label {
  display: block; font-weight: 800; font-size: 15px;
  color: var(--heading); margin-bottom: 6px;
}
.taf-req {
  font-weight: 500; font-size: 13px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .06em; margin-left: 6px;
}
.taf-field input,
.taf-field select,
.taf-field textarea {
  width: 100%; font: inherit; font-weight: 500; color: var(--text);
  padding: 11px 14px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.taf-field textarea { resize: vertical; min-height: 140px; }
.taf-field input:focus,
.taf-field select:focus,
.taf-field textarea:focus {
  border-color: var(--taf-blue); outline: 2px solid var(--taf-blue); outline-offset: 1px;
}
.taf-field input::placeholder,
.taf-field textarea::placeholder { color: var(--text-dim); }
.taf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 620px) { .taf-field-row { grid-template-columns: 1fr; } }


/* ==========================================================================
   18. App section pages

   Added 29 Sep 2026 for Phase 3. Used by /highlighter/, /simple-signature/,
   /address-verification/ and /list-browse/. Each is one page, FAQs at the bottom.
   Set data-app on the body tag so the accent colour follows the app.
   ========================================================================== */

/* App hero. Text on the left, the app icon or a picture on the right. */
.taf-hero--app {
  text-align: left;
  background: linear-gradient(180deg, var(--wash-1) 0%, var(--bg) 88%);
}
.taf-hero--app .taf-hero__title { max-width: none; margin-inline: 0; }
/* Beats the centring rule for heroes in section 2, which carries the same weight. */
.taf-hero.taf-hero--app .taf-lede { margin-left: 0; margin-right: 0; }
.taf-hero--app .taf-rule { margin-left: 0; margin-right: 0; }
.taf-hero--app .taf-hero__actions { justify-content: flex-start; }
.taf-hero--app .taf-hero__split { grid-template-columns: 1.2fr 1fr; }
.taf-hero__media { display: flex; justify-content: center; }
.taf-app-icon { width: 220px; height: 220px; display: block; }

/* An outline button on navy needs a light border to stay visible. */
.taf-hero--navy .taf-btn--outline { border-color: rgba(255, 255, 255, .72); }
.taf-hero--navy .taf-btn--outline:hover { background: rgba(255, 255, 255, .1); }

/* Section heading on an app page */
.taf-head { margin-bottom: var(--s6); }
.taf-head .taf-lede { margin-left: 0; }
.taf-center.taf-head .taf-lede { margin-left: auto; }

/* Feature tiles on an app page. Same tile, with a check list inside. */
.taf-feature { background: var(--card-bg); border: 1px solid var(--border); border-top: 4px solid var(--app-accent); }
.taf-feature:hover { transform: none; box-shadow: var(--shadow-1); }
.taf-feature h3 { font-size: 20px; margin-bottom: var(--s3); }
.taf-feature p { color: var(--text); font-size: 16px; }
.taf-checklist { list-style: none; margin: 0; padding: 0; }
.taf-checklist li {
  position: relative; padding: 6px 0 6px 30px; color: var(--text);
}
.taf-checklist li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--app-accent);
}
/* The tick is dark, because text and marks on the light greens must be dark. */
.taf-checklist li::after {
  content: ""; position: absolute; left: 6px; top: 13px;
  width: 5px; height: 9px;
  border: solid var(--navy-deep); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[data-app="simple-signature"] .taf-checklist li::after { border-color: #fff; }

/* Picture frame for a screenshot or demo animation */
.taf-media {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-tile); box-shadow: var(--shadow-2);
}
.taf-media:not(.taf-shot) img { display: block; width: 100%; height: auto; }
.taf-media figcaption { padding: var(--s3) var(--s4); font-size: 14px; color: var(--text-dim); background: var(--card-bg); }

/* A picture that already carries its own device frame: no box around it. */
.taf-media--device { border: 0; background: none; box-shadow: none; border-radius: 0; }
/* Never stretch a picture past its own width. It goes soft. */
.taf-media--device img { width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.taf-media--device figcaption { background: none; text-align: center; padding: var(--s3) 0 0; }

/* Picture rows: a large picture on one side, a short text on the other.
   Every second row flips sides. The picture column is two thirds wide, so
   each screenshot shows close to its own size. */
.taf-showcase { display: grid; gap: var(--s8); }
.taf-showcase__row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s7); align-items: center; }
.taf-showcase__row--flip { grid-template-columns: 1fr 2fr; }
.taf-showcase__row--flip .taf-showcase__pic { order: 2; }
.taf-showcase__pic { display: block; }
.taf-showcase__pic img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.taf-showcase__pic:hover img { filter: brightness(1.03); }
.taf-showcase__text h3 { margin-bottom: var(--s2); }
.taf-showcase__text p { color: var(--text); margin: 0; }
.taf-showcase__text p + p { margin-top: var(--s3); }

/* Customer quotes */
.taf-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.taf-quote {
  margin: 0; display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--border);
  border-left: 5px solid var(--app-accent);
  border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1);
}
.taf-quote h3 { font-size: 18px; margin-bottom: var(--s3); }
/* Four quotes sit two by two. */
.taf-quotes--2 { grid-template-columns: repeat(2, 1fr); }
.taf-quote blockquote { margin: 0 0 var(--s4); color: var(--text); flex: 1 1 auto; }
.taf-quote figcaption { font-weight: 800; color: var(--heading); font-size: 15px; }

/* FAQ section: the question list sits in a narrow column */
.taf-faq { max-width: 860px; }
.taf-faq .taf-acc__head { font-size: 18px; }
/* Error text in a question can hold a long unbroken word, such as
   smartystreets.resetXXXAddress. Let it break, so it never pushes the page sideways on a phone. */
.taf-acc__head, .taf-acc__body { overflow-wrap: anywhere; }
.taf-acc__body ol, .taf-acc__body ul { padding-left: 1.3em; margin: 0 0 var(--s4); }
.taf-acc__body li { margin-bottom: 4px; }
.taf-acc__item { scroll-margin-top: calc(var(--header-h) + 16px); }
.taf-faq__more { margin-top: var(--s5); color: var(--text-dim); }
.taf-faq__more a { font-weight: 800; }
.taf-acc__link { display: inline-block; font-size: 14px; font-weight: 800; margin-top: var(--s2); }

@media (max-width: 900px) {
  .taf-hero--app .taf-hero__split { grid-template-columns: 1fr; }
  .taf-hero__media { justify-content: flex-start; }
  .taf-app-icon { width: 104px; height: 104px; }
  .taf-quotes, .taf-quotes--2 { grid-template-columns: 1fr; }
  .taf-showcase { gap: var(--s7); }
  .taf-showcase__row, .taf-showcase__row--flip { grid-template-columns: 1fr; gap: var(--s4); }
  .taf-showcase__row--flip .taf-showcase__pic { order: 0; }
}


/* ==========================================================================
   19. Pop-up box

   Added 30 Sep 2026. Used by the no-demo box on the Highlighter page and,
   later, the List Browse page. A link to #id opens it. With JavaScript off,
   :target still opens it. With JavaScript on, the script adds Escape, focus
   and a click outside the box to close.
   ========================================================================== */

.taf-modal {
  display: none; position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center; padding: var(--gutter);
}
.taf-modal:target, .taf-modal.is-open { display: flex; }
.taf-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 34, 88, .55); }
.taf-modal__box {
  position: relative; width: 100%; max-width: 520px;
  background: var(--card-bg); border-radius: var(--r-lg);
  border-top: 5px solid var(--app-accent);
  padding: var(--s6); box-shadow: var(--shadow-3);
}
.taf-modal__box h2 { font-size: 26px; }
.taf-modal__box p { color: var(--text); }
.taf-modal__box .taf-hero__actions { justify-content: flex-start; margin-top: var(--s4); }


/* ==========================================================================
   20. Support pages

   Added 1 Oct 2026 for Phase 4. Used by /support/, /support/changes/ and
   /support/grant-access/. The step list and the note box are also meant for
   the implementation guide pages later.
   ========================================================================== */

/* A reading column for text pages */
.taf-prose { max-width: 74ch; }
.taf-prose h2 { font-size: clamp(22px, 2.6vw, 30px); margin-top: var(--s7); }
.taf-prose h2:first-child { margin-top: 0; }
.taf-prose ul { padding-left: 1.2em; }
.taf-prose li { margin-bottom: 6px; }
.taf-prose strong { color: var(--heading); }
.taf-prose code { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 6px; }

/* Numbered steps. Each step is one action. */
.taf-steps { list-style: none; counter-reset: taf-step; margin: 0 0 var(--s5); padding: 0; }
.taf-steps > li {
  counter-increment: taf-step; position: relative;
  padding: 4px 0 var(--s4) 48px; min-height: 36px;
}
.taf-steps > li::before {
  content: counter(taf-step);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--cloud); color: var(--link-strong);
  font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}

/* Note box: one short fact the reader must not miss */
.taf-note {
  background: var(--cloud); border-left: 4px solid var(--taf-blue);
  border-radius: var(--r-md); padding: var(--s4) var(--s5); margin: 0 0 var(--s5);
}
.taf-note p:last-child { margin-bottom: 0; }
.taf-note__head { font-weight: 800; color: var(--heading); margin-bottom: var(--s1); }

/* Tabs inside a reading column sit closer to their content */
.taf-prose .taf-tabs { margin-bottom: var(--s5); }

/* Hub cards: one card per app, with a short link list */
.taf-applinks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.taf-applinks li { display: flex; align-items: center; gap: var(--s2); padding: 10px 0; border-bottom: 1px solid var(--border); }
.taf-applinks a { font-weight: 800; }
.taf-applinks .is-soon { font-weight: 800; color: var(--text-dim); }
.taf-hubapps .taf-card__logo--img { width: 72px; height: 72px; }

/* A tile that is not built yet */
.taf-tile--soon { opacity: .72; }
.taf-tile--soon:hover { transform: none; box-shadow: none; }

/* The case form section. The header button jumps here. */
#open-a-case { scroll-margin-top: calc(var(--header-h) + 8px); }

/* Change log: years on the left, releases on the right */
.taf-changes { display: grid; grid-template-columns: 180px 1fr; gap: var(--s7); align-items: start; }
.taf-changes__nav {
  position: sticky; top: calc(var(--header-h) + 16px);
  border-right: 1px solid var(--border); padding-right: var(--s4);
}
.taf-changes__nav h2 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--s3); }
.taf-changes__nav a {
  display: block; padding: 6px 12px; border-radius: var(--r-full);
  font-weight: 800; color: var(--heading);
}
.taf-changes__nav a:hover { background: var(--bg-alt); text-decoration: none; }
.taf-changes__year {
  font-size: clamp(24px, 3vw, 32px); margin: var(--s7) 0 0; padding-bottom: var(--s3);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.taf-changes__year:first-child { margin-top: 0; }

.taf-release {
  border-top: 1px solid var(--border); padding: var(--s5) 0;
  scroll-margin-top: calc(var(--header-h) + 16px);
  overflow-wrap: anywhere;
}
.taf-release:target { box-shadow: inset 4px 0 0 var(--app-accent); padding-left: var(--s4); background: var(--bg-alt); }
.taf-release__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s1); }
.taf-release__ver { font-size: 24px; margin: 0; }
.taf-release__link { margin-left: auto; font-size: 14px; font-weight: 800; }
.taf-release__meta { color: var(--text-dim); font-size: 15px; margin: 0 0 var(--s3); }
.taf-release__note { font-size: 15px; margin: 0 0 var(--s2); color: var(--heading); font-weight: 800; }
.taf-release ul { padding-left: 1.2em; margin: 0; }
.taf-release li { margin-bottom: 4px; }
.taf-release li ul { margin-top: 4px; }

/* Change log index: newest version per app */
.taf-latest { font-size: 15px; color: var(--text-dim); margin: 0 0 var(--s4); }
.taf-latest strong { color: var(--heading); font-size: 20px; display: block; }

@media (max-width: 900px) {
  .taf-changes { grid-template-columns: 1fr; gap: var(--s5); }
  .taf-changes__nav { position: static; border-right: 0; padding-right: 0; }
  .taf-changes__nav nav { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .taf-changes__nav a { background: var(--bg-alt); padding: 6px 14px; }
}


/* ==========================================================================
   21. Main menu items

   Added 1 Oct 2026. Support is a link to /support/. The arrow beside it
   opens the Support menu with a click, a tap or the keyboard. On a device
   with a mouse, pointing at Products or Support also opens its menu.
   ========================================================================== */

.taf-nav__item { display: inline-flex; align-items: center; gap: 2px; }
a.taf-nav__link { display: inline-block; }
a.taf-nav__link:hover { text-decoration: none; }
button.taf-nav__link { display: inline-flex; align-items: center; gap: 6px; }
.taf-nav__chev { width: 16px; height: 16px; transition: transform .15s; }
.taf-nav__caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--heading); cursor: pointer;
}
.taf-nav__caret svg { width: 16px; height: 16px; transition: transform .15s; }
.taf-nav__caret:hover,
.taf-nav__caret[aria-expanded="true"] { background: var(--cloud); color: var(--link-strong); }
.taf-nav__caret[aria-expanded="true"] svg,
.taf-nav__link[aria-expanded="true"] .taf-nav__chev { transform: rotate(180deg); }
.taf-nav__item:has(.taf-nav__caret[aria-expanded="true"]) a.taf-nav__link { color: var(--link-strong); }


/* ==========================================================================
   22. Implementation guide pages

   Added 6 Oct 2026. First used on /support/guides/highlighter/.
   Chapters on the left, steps on the right. Each step has a tick box, its
   own link and, where it helps, a picture. A ticked step gets a highlighter
   stroke in the app colour. Ticks live in the page only and clear when the
   page reloads, so the site still stores nothing in the browser.
   ========================================================================== */

/* A shorter hero, so the steps start higher on the page */
.taf-hero--guide { padding: var(--s7) 0 var(--s6); }
.taf-hero--guide .taf-hero__title { font-size: clamp(30px, 4.4vw, 52px); max-width: none; margin: 0; }
.taf-guidehead { display: flex; align-items: center; gap: var(--s5); }
.taf-guidehead__icon { width: 88px; height: 88px; flex: none; }
@media (max-width: 620px) { .taf-guidehead__icon { width: 56px; height: 56px; } .taf-guidehead { gap: var(--s4); } }

.taf-section--tight.taf-guide-section { padding-top: var(--s5); }

.taf-guide {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--s7); align-items: start;
}

/* Left column: progress, then the chapter list */
.taf-guide__nav {
  position: sticky; top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto;
  border-right: 1px solid var(--border); padding: 0 var(--s4) var(--s4) 0;
}
.taf-progress { margin-bottom: var(--s5); }
.taf-progress__count { font-weight: 800; color: var(--heading); margin: 0 0 var(--s2); font-size: 15px; }
.taf-progress__track {
  height: 8px; border-radius: var(--r-full); background: var(--bg-alt);
  border: 1px solid var(--border); overflow: hidden;
}
.taf-progress__fill {
  display: block; height: 100%; width: 0; background: var(--app-accent);
  transition: width .2s ease;
}
.taf-progress__foot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.taf-progress__note { font-size: 13px; color: var(--text-dim); margin: 0; line-height: 1.4; }
.taf-progress__clear {
  margin-left: auto; flex: none; background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; color: var(--link);
}
.taf-progress__clear:hover { text-decoration: underline; }

.taf-guide__chapters { list-style: none; margin: 0; padding: 0; counter-reset: taf-chap; }
.taf-guide__chapters a {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: 7px 10px; border-radius: var(--r-md);
  font-weight: 800; font-size: 15px; color: var(--heading); line-height: 1.3;
}
.taf-guide__chapters a:hover { background: var(--bg-alt); text-decoration: none; }
.taf-guide__chapters a[aria-current="true"] { background: var(--cloud); box-shadow: inset 3px 0 0 var(--app-accent-text); }
.taf-guide__chapnum { color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 1.1em; }
.taf-guide__chapcount {
  margin-left: auto; font-size: 13px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.taf-guide__chapters a.is-done .taf-guide__chapcount { color: var(--app-accent-text); }
.taf-guide__chapters a.is-done .taf-guide__chapcount::before { content: "\2713\00A0"; }
.taf-guide__navlinks { list-style: none; margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--border); font-size: 14px; }
.taf-guide__navlinks li { margin-bottom: var(--s2); }
.taf-guide__navlinks a { font-weight: 800; }

/* Right column */
.taf-guide__body { min-width: 0; max-width: 68ch; }
.taf-chapter { scroll-margin-top: calc(var(--header-h) + 16px); padding-bottom: var(--s6); }
.taf-chapter + .taf-chapter { border-top: 1px solid var(--border); padding-top: var(--s7); }
.taf-chapter > h2 { display: flex; align-items: baseline; gap: var(--s3); }
.taf-chapter__num { color: var(--app-accent-text); font-variant-numeric: tabular-nums; }
.taf-chapter h3 { font-size: 20px; margin-top: var(--s6); scroll-margin-top: calc(var(--header-h) + 16px); }
.taf-chapter__optional { font-size: 14px; font-weight: 800; color: var(--text-dim); margin: calc(-1 * var(--s2)) 0 var(--s4); }

/* Tick-off steps. The number circle is the tick box. */
.taf-ticks { list-style: none; margin: var(--s4) 0 var(--s5); padding: 0; }
/* Each step is a lightly tinted block in the app colour, so a long chapter
   does not read as one wall of text. */
.taf-tick {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 var(--s4);
  padding: var(--s4) var(--s4) var(--s4) var(--s3); margin: 0;
  background: color-mix(in srgb, var(--app-accent) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--app-accent) 24%, var(--border));
  border-radius: var(--r-lg); scroll-margin-top: calc(var(--header-h) + 24px);
  transition: background .2s;
}
.taf-tick:has(.taf-tick__box:checked) { background: color-mix(in srgb, var(--app-accent) 13%, #fff); }
.taf-tick__box { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.taf-tick__mark {
  grid-column: 1; grid-row: 1 / span 9; align-self: start;
  width: 34px; height: 34px; border-radius: var(--r-full); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--link-strong);
  border: 2px solid color-mix(in srgb, var(--app-accent) 40%, var(--border));
  font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s;
}
.taf-tick__mark:hover { border-color: var(--app-accent-text); }
.taf-tick__box:focus-visible + .taf-tick__mark { outline: 2px solid var(--taf-blue); outline-offset: 2px; }
.taf-tick__box:checked + .taf-tick__mark { background: var(--app-accent); border-color: var(--app-accent); color: var(--navy-deep); }
[data-app="simple-signature"] .taf-tick__box:checked + .taf-tick__mark { color: #fff; }
.taf-tick__box:checked + .taf-tick__mark .taf-tick__num { display: none; }
.taf-tick__box:checked + .taf-tick__mark::after { content: "\2713"; font-size: 18px; line-height: 1; }
.taf-tick__body { grid-column: 2; min-width: 0; }
.taf-tick__body > :last-child,
.taf-tick__body > :nth-last-child(2) { margin-bottom: 0; }
.taf-ticks > .taf-tick { margin-bottom: var(--s3); }
.taf-tick__body p { margin: 0 0 var(--s2); }
.taf-tick__lead { font-weight: 800; color: var(--heading); padding-top: 5px; }
.taf-tick__lead span {
  background-repeat: no-repeat; background-size: 0% 100%;
  background-image: linear-gradient(transparent 52%, color-mix(in srgb, var(--app-accent) 60%, transparent) 52%, color-mix(in srgb, var(--app-accent) 60%, transparent) 92%, transparent 92%);
  transition: background-size .35s ease;
}
.taf-tick__box:checked ~ .taf-tick__body .taf-tick__lead span { background-size: 100% 100%; }
.taf-tick__box:checked ~ .taf-tick__body > :not(.taf-tick__lead):not(.taf-tick__tools) { opacity: .62; }
.taf-tick:target { border-color: var(--app-accent-text); box-shadow: inset 4px 0 0 var(--app-accent-text); }

.taf-tick__tools { display: flex; gap: var(--s4); margin-top: var(--s2); }
.taf-tick__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.taf-tick__link svg { width: 14px; height: 14px; }
.taf-tick__link:hover, .taf-tick__link:focus-visible { color: var(--link); }
/* With a mouse, the step link sits at the top right of the step and shows
   when the pointer rests on the step, so it takes no room. Keyboard focus
   and a linked step always show it. On a touch screen it sits under the
   step and always shows. */
@media (hover: hover) and (pointer: fine) {
  .taf-tick__lead { padding-right: 104px; }
  .taf-tick__tools {
    position: absolute; top: calc(var(--s4) + 7px); right: var(--s4); margin: 0;
    opacity: 0; transition: opacity .15s;
  }
  .taf-tick:hover .taf-tick__tools,
  .taf-tick:focus-within .taf-tick__tools,
  .taf-tick:target .taf-tick__tools { opacity: 1; }
}

/* A value the reader types or picks, with a copy button */
.taf-copy {
  display: inline-flex; align-items: stretch; max-width: 100%; margin: 2px 0 var(--s2);
  border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; vertical-align: middle;
}
.taf-copy code {
  font-family: var(--font-mono); font-size: 14px; padding: 4px 10px; background: var(--bg-alt);
  color: var(--heading); overflow-wrap: anywhere; border: 0; border-radius: 0;
}
.taf-copy button {
  flex: none; border: 0; border-left: 1px solid var(--border); background: var(--card-bg); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; color: var(--link); padding: 4px 10px;
}
.taf-copy button:hover { background: var(--cloud); }

/* Screenshots inside a step. Never stretched past their own width. */
.taf-shot { width: fit-content; max-width: 100%; margin: var(--s3) 0 var(--s3); }
/* No width here: the width and height on each picture hold its space before it loads, so a link jump lands on target. Changed 13 Oct 2026. */
.taf-shot img { display: block; max-width: 100%; height: auto; }
.taf-shot a { display: block; }

/* The two ways to start a guide: do it yourself, or copy the guide into an
   AI that works in the browser. Two equal cards, one column on a phone. */
.taf-paths {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4);
  max-width: 880px; margin: var(--s5) 0 0;
}
.taf-path {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
  padding: var(--s5); background: rgba(255, 255, 255, .78);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.taf-path__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--heading); }
.taf-path__text { flex: 1; margin: 0 0 var(--s3); font-size: 15px; line-height: 1.55; }
@media (max-width: 620px) { .taf-paths { grid-template-columns: 1fr; } }

/* A warning note */
.taf-note--warn { border-left-color: var(--warning); background: #FFF4E5; }

/* Simple data tables */
.taf-tablewrap { overflow-x: auto; margin: 0 0 var(--s5); }
.taf-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.taf-table th { text-align: left; color: var(--heading); font-weight: 800; padding: 8px 12px 8px 0; border-bottom: 2px solid var(--border); }
.taf-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.taf-table td:first-child { font-weight: 800; color: var(--heading); white-space: nowrap; }

@media (max-width: 900px) {
  .taf-guide { grid-template-columns: 1fr; gap: var(--s5); }
  .taf-guide__nav {
    position: static; max-height: none; overflow: visible;
    border-right: 0; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: var(--s4); background: var(--bg-alt);
  }
  .taf-guide__navlinks { display: none; }
  .taf-table td:first-child { white-space: normal; }
}

@media print {
  .taf-guide { display: block; }
  .taf-guide__nav, .taf-tick__tools, .taf-copy button { display: none; }
}


/* ==========================================================================
   23. About page

   Added 6 Oct 2026. Joseph's philosophy, word for word, and the
   O. S. Marden quote the company name comes from.
   ========================================================================== */

.taf-about { margin-inline: auto; }
.taf-about p { font-size: 17px; }
.taf-about .taf-applinks { padding-left: 0; }
.taf-about__close { font-weight: 800; color: var(--heading); }
.taf-pullquote { margin: var(--s7) 0; padding: var(--s5) 0 var(--s5) var(--s5); position: relative; }
.taf-pullquote::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--taf-blue) 0%, var(--taf-blue-bright) 40%, var(--taf-green) 74%, var(--taf-lime) 100%);
}
.taf-pullquote blockquote {
  margin: 0; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; font-weight: 800;
  color: var(--heading); letter-spacing: -0.01em;
}
.taf-pullquote figcaption { margin-top: var(--s3); color: var(--text-dim); font-weight: 800; }


/* ==========================================================================
   24. Install box on a change log page

   Added 6 Oct 2026. The newest version of one app, with an install link
   for sandboxes and one for production. The AppExchange no longer
   updates an installed app, so customers update from here.
   ========================================================================== */

.taf-install {
  border: 1px solid var(--border); border-left: 4px solid var(--app-accent-text);
  border-radius: var(--r-md); background: var(--bg-alt);
  padding: var(--s5); margin: 0 0 var(--s5); scroll-margin-top: calc(var(--header-h) + 16px);
}
.taf-install__head { font-weight: 800; color: var(--heading); font-size: 18px; margin: 0 0 var(--s2); }
.taf-install p { margin: 0 0 var(--s4); }
.taf-install__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.taf-tick__body .taf-table td:first-child { white-space: normal; }
@media (max-width: 620px) {
  .taf-tick { padding: var(--s3); gap: 0 var(--s3); grid-template-columns: 34px minmax(0, 1fr); }
}


/* ==========================================================================
   25. Code blocks on a guide page

   Added 7 Oct 2026 for the List Browse guide. A block of code the reader
   pastes, with a copy button, and a block of error text that wraps on a
   phone.
   ========================================================================== */

.taf-codeblock {
  position: relative; max-width: 100%; margin: var(--s2) 0 var(--s3);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-alt);
}
.taf-codeblock pre { margin: 0; padding: 12px 72px 12px 14px; overflow-x: auto; line-height: 1.55; }
.taf-prose .taf-codeblock code { background: none; border: 0; padding: 0; font-size: 14px; color: var(--heading); }
.taf-codeblock__btn {
  position: absolute; top: 6px; right: 6px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--card-bg); cursor: pointer; font: inherit; font-size: 13px; font-weight: 800;
  color: var(--link); padding: 4px 10px;
}
.taf-codeblock__btn:hover { background: var(--cloud); }
.taf-prose pre.taf-errortext {
  margin: var(--s2) 0 var(--s3); padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere;
  border: 1px solid var(--border); border-left: 4px solid #C23934; border-radius: var(--r-sm); background: var(--bg-alt);
  line-height: 1.55;
}
.taf-prose pre.taf-errortext code { background: none; border: 0; padding: 0; font-size: 14px; }
@media print { .taf-codeblock__btn { display: none; } }


/* ==========================================================================
   26. Free and paid chapter groups on a guide page

   Added 9 Oct 2026 for the Simple Signature guide, at Reece's call. A guide
   with free and paid chapters splits its chapter list into labelled groups.
   Each label is a theme pill with the chapter range under it. The paid group
   sits in a Frost Blue box, and a band of the same colour marks where the paid
   chapters start in the page. Bright Green and Frost Blue stay fills only, as
   the theme rules ask; all text on them is dark.
   ========================================================================== */

.taf-guide__group { margin: var(--s4) 0 6px; padding: 0 10px; line-height: 1.3; }
.taf-guide__group .taf-pill { font-size: 12px; padding: 3px 8px; letter-spacing: .05em; text-transform: uppercase; }
.taf-guide__group .taf-pill--grey { box-shadow: inset 0 0 0 1px var(--border); background: var(--canvas); }
.taf-guide__grouprange { display: block; margin-top: 5px; font-size: 12px; font-weight: 800; color: var(--text-dim); }
.taf-guide__group:first-of-type { margin-top: 0; }
.taf-guide__paid {
  margin: var(--s4) 0 0; padding: 2px 4px var(--s2) 0;
  background: var(--frost-tint); border-left: 4px solid var(--taf-blue-bright); border-radius: var(--r-md);
}
.taf-guide__paid .taf-guide__group { margin-top: 10px; }
.taf-guide__paid .taf-guide__chapters a:hover,
.taf-guide__paid .taf-guide__chapters a[aria-current="true"] { background: var(--canvas); }
/* Two-digit chapter numbers: keep the titles in one line down the list. */
.taf-guide__group + .taf-guide__chapters .taf-guide__chapnum,
.taf-guide__paid .taf-guide__chapnum { min-width: 1.5em; }
.taf-guide__subgroup {
  margin: 10px 0 2px; padding: 0 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim);
}

.taf-tierband {
  margin: 0 0 var(--s6); padding: 14px 18px;
  background: var(--frost-tint); border-left: 5px solid var(--taf-blue-bright); border-radius: var(--r-md);
}
.taf-prose .taf-tierband p { margin: 0; }
.taf-prose .taf-tierband .taf-tierband__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  font-weight: 800; color: var(--heading); margin-bottom: var(--s2);
}
.taf-tierband__head .taf-pill { letter-spacing: .05em; text-transform: uppercase; }
.taf-chapter > h2 .taf-pill { margin-left: auto; align-self: center; flex: none; }
/* The chapter list scrolls on its own and never moves the page.
   taf-docs.js scrolls it to the current chapter when the page moves. Added 9 Oct 2026. */
.taf-guide__nav { overscroll-behavior: contain; }
/* A long address or code in a sentence breaks at the edge on a phone, not past it. Added 9 Oct 2026. */
.taf-guide__body p code, .taf-guide__body li code, .taf-guide__body td code { overflow-wrap: anywhere; }
/* Code shows each character as the reader types it: no font ligatures, so -< does not look like an arrow. Added 9 Oct 2026. */
.taf-guide__body code { font-variant-ligatures: none; }
@media print { .taf-tierband { border: 1px solid var(--border); border-left-width: 5px; } }

/* ==========================================================================
   28. Accessibility fixes from the WCAG 2.2 AA check

   Added 14 Oct 2026. Report: claude/accessibility-check-2026-10-14.md.
   ========================================================================== */

/* A link inside running text shows by more than its color (1.4.1). Buttons keep their look. */
main p a:not(.taf-btn), .taf-prose li a:not(.taf-btn), .taf-prose td a:not(.taf-btn),
.taf-guide__body li a:not(.taf-btn), .taf-guide__body td a:not(.taf-btn) {
  text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px;
}
/* A code box that scrolls takes keyboard focus (2.1.1), and the focus shows. */
.taf-codeblock pre:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
/* The article column may shrink, so a wide table or code box scrolls inside its own frame on a phone (1.4.10). */
.taf-howto > *, .taf-guide > * { min-width: 0; }
.taf-release li a:not(.taf-btn) { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.taf-prose pre:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
/* A long name with no spaces, such as BackgroundVerificationTracker, breaks at the edge of a phone screen (1.4.10). */
.taf-prose p, .taf-prose li, .taf-guide__body p, .taf-guide__body li { overflow-wrap: break-word; }

/* ==========================================================================
   29. Bot trap on the Web-to-Case forms

   Added 14 Oct 2026. People never see this field; bots fill it in, and the Case
   validation rule Block_Bot_Trap refuses the Case. Script: claude/tools/apply_trap_live.py.
   ========================================================================== */
.taf-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   31. Fonts on our own site. Push 23, 17 Oct 2026 (site check S1, S11).
   The two fonts now load from /assets/fonts, not from Google Fonts.
   Both fonts use the SIL Open Font License 1.1 (OFL files in /assets/fonts).
   Files: Fontsource 5.3.0. Split by character range, as Google does: a page
   loads the latin-ext file only when it shows such a character.
   The Fallback faces stretch Arial (or Roboto on Android) to the size of
   Plus Jakarta Sans, so text does not move when the real font arrives.
   ========================================================================== */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext-800-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans Fallback"; font-weight: 100 600; src: local("Arial"), local("ArialMT");
  size-adjust: 105.6%; ascent-override: 98.3%; descent-override: 21.02%; line-gap-override: 0%; }
@font-face { font-family: "Plus Jakarta Sans Fallback"; font-weight: 700 900; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 100.52%; ascent-override: 103.26%; descent-override: 22.08%; line-gap-override: 0%; }
@font-face { font-family: "Plus Jakarta Sans Fallback Roboto"; font-weight: 100 600; src: local("Roboto");
  size-adjust: 105.4%; ascent-override: 98.48%; descent-override: 21.06%; line-gap-override: 0%; }
@font-face { font-family: "Plus Jakarta Sans Fallback Roboto"; font-weight: 700 900; src: local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 107.01%; ascent-override: 97%; descent-override: 20.75%; line-gap-override: 0%; }
:root {
  --font-body: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", "Plus Jakarta Sans Fallback Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* S11: code in the first table column used weight 800, and only 400 of JetBrains Mono exists. */
.taf-table td:first-child code { font-weight: 400; }

/* ==========================================================================
   32. Demo videos (site check S3, 17 Oct 2026)

   The demo GIFs on the app pages became short muted MP4 videos. They take the
   same frame and sizes as the pictures did. Builder: apply_demo_video_live.py.
   ========================================================================== */
.taf-media:not(.taf-shot) video { display: block; width: 100%; height: auto; }
.taf-media--device video { width: auto; max-width: 100%; height: auto; margin: 0 auto; }

/* ==========================================================================
   33. The Peak look, 21 Oct 2026

   The mountain theme. Joseph approved it after the hidden preview at
   /preview/, 21 Oct 2026. Brand colours only. The mountains are inline SVG
   in this file, so the pages make no outside call. The TAF peak is traced
   from the brand file "To A Finish - Social Icon - Light.jpg". Middle ranges
   are medium blue, near ranges are dark, and each peak has a shaded right
   face like the logo. On the home page, the reviews section fades to dusk
   and the support section sits under a night sky with a few faint stars.
   Builder: apply_peak_live.py.
   ========================================================================== */

:root {
  --peak-sky: #EEF5FF;
  --peak-front: #A9E8FF;
  --peak-line: linear-gradient(90deg, #0159E8 0 25%, #00C3FF 25% 50%, #4EE54E 50% 75%, #CAF200 75% 100%);
}

/* The brand colours in one straight line, at the top of every page. */
.taf-header { border-top: 6px solid transparent; border-image: var(--peak-line) 1; }

/* Buttons: a little less round. */
.taf-btn { border-radius: 6px; }

/* --------------------------------------------------------------------------
   Hero: light sky, a medium blue range behind, a dark blue range in front,
   and the TAF peak with its flag on the right.
   -------------------------------------------------------------------------- */
.taf-hero:not(.taf-hero--navy) {
  background-color: var(--peak-sky);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%20560'%3E%3Cpath%20d%3D'M-50%20560%20L140%20400%20L330%20560%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M140%20400%20L330%20560%20L182%20560%20L144%20499%20L159%20460%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M210%20560%20L420%20370%20L630%20560%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M420%20370%20L630%20560%20L466%20560%20L424%20488%20L441%20442%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M500%20560%20L700%20410%20L900%20560%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M700%20410%20L900%20560%20L744%20560%20L704%20503%20L720%20467%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M740%20560%20L930%20390%20L1120%20560%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M930%20390%20L1120%20560%20L972%20560%20L934%20495%20L949%20454%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cg%20transform%3D'translate(597.1%20-309.6)%20scale(1.180)'%3E%3Cpath%20d%3D'M282%20700%20L538%20670%20L538%20760%20L282%20760%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M538%20670%20L734%20670%20L734%20760%20L538%20760%20Z'%20fill%3D'%230159E8'%2F%3E%3Cpath%20d%3D'M470%20278%20L478%20278%20L478%20383%20L472%20391%20L470%20391%20Z'%20fill%3D'%230159E8'%2F%3E%3Cpath%20d%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20fill%3D'%2300C3FF'%3E%3Canimate%20attributeName%3D'd'%20values%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C502%20291%20520%20294%20533%20292%20C543%20289%20558%20293%20581%20297%20L568%20321%20L583%20344%20C560%20345%20543%20349%20531%20350%20C519%20346%20503%20343%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20dur%3D'3s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D'M494%20382%20L459%20502%20L530%20506%20L452%20592%20L538%20687%20Q400%20697%20266%20722%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M496%20380%20L734%20686%20Q630%20683%20538%20687%20L452%20592%20L530%20506%20L459%20502%20Z'%20fill%3D'%230159E8'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M1250%20560%20L1420%20420%20L1590%20560%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M1420%20420%20L1590%20560%20L1457%20560%20L1423%20507%20L1437%20473%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M-210%20560%20L0%20470%20L210%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M0%20470%20L210%20560%20L42%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M30%20560%20L260%20455%20L490%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M260%20455%20L490%20560%20L306%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M320%20560%20L540%20480%20L760%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M540%20480%20L760%20560%20L584%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M570%20560%20L800%20462%20L1030%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M800%20462%20L1030%20560%20L846%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M850%20560%20L1060%20485%20L1270%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M1060%20485%20L1270%20560%20L1102%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M1000%20560%20L1200%20478%20L1400%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M1200%20478%20L1400%20560%20L1240%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M1120%20560%20L1300%20484%20L1480%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M1300%20484%20L1480%20560%20L1336%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M1170%20560%20L1400%20468%20L1630%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M1400%20468%20L1630%20560%20L1446%20560%20Z'%20fill%3D'%23013180'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: max(100%, 960px) auto;
  padding-bottom: clamp(200px, 17vw, 260px);
}
/* App pages already show the app icon on the right, so their hero gets the
   two ranges without the big TAF peak. */
.taf-hero.taf-hero--app {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%20220'%3E%3Cpath%20d%3D'M10%20220%20L200%2090%20L390%20220%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M200%2090%20L390%20220%20L242%20220%20L204%20171%20L219%20139%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M290%20220%20L500%2070%20L710%20220%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M500%2070%20L710%20220%20L546%20220%20L504%20163%20L521%20127%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M600%20220%20L800%20100%20L1000%20220%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M800%20100%20L1000%20220%20L844%20220%20L804%20174%20L820%20145%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M890%20220%20L1100%2080%20L1310%20220%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M1100%2080%20L1310%20220%20L1146%20220%20L1104%20167%20L1121%20133%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M1190%20220%20L1380%2095%20L1570%20220%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M1380%2095%20L1570%20220%20L1422%20220%20L1384%20172%20L1399%20142%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M-210%20220%20L0%20160%20L210%20220%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M0%20160%20L210%20220%20L42%20220%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M50%20220%20L280%20145%20L510%20220%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M280%20145%20L510%20220%20L326%20220%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M340%20220%20L560%20168%20L780%20220%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M560%20168%20L780%20220%20L604%20220%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M610%20220%20L840%20150%20L1070%20220%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M840%20150%20L1070%20220%20L886%20220%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M910%20220%20L1120%20170%20L1330%20220%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M1120%20170%20L1330%20220%20L1162%20220%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M1170%20220%20L1400%20155%20L1630%20220%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M1400%20155%20L1630%20220%20L1446%20220%20Z'%20fill%3D'%23013180'%2F%3E%3C%2Fsvg%3E");
  background-size: max(100%, 960px) auto;
  padding-bottom: clamp(150px, 16vw, 230px);
}
@media (max-width: 720px) {
  .taf-hero:not(.taf-hero--navy) { background-size: 640px auto; padding-bottom: 250px; }
  .taf-hero.taf-hero--app { padding-bottom: 130px; }
}
.taf-hero.taf-hero--home .taf-wrap { text-align: left; }
.taf-hero.taf-hero--home .taf-wrap > * { max-width: 640px; margin-left: 0; margin-right: 0; }
.taf-hero.taf-hero--home .taf-hero__actions,
.taf-hero.taf-hero--home .taf-stats { justify-content: flex-start; }
.taf-hero.taf-hero--home .taf-stats { border-top-color: #C9DBF6; }
.taf-hero .taf-rule { display: none; }
/* "Salesforce" in plain heading colour, no colour fade. */
.taf-hero .taf-hero__title .taf-accent { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: inherit; }

/* --------------------------------------------------------------------------
   Home and Support hero: a small bird circles the TAF peak, in front of it
   and behind it, rising and dipping a little as it goes. The scene is split
   in two layers for this: the middle range stays the background, and the
   peak with the near range sits in ::after. The bird is ::before. It is
   hidden on phones and for visitors who turn on reduce motion.
   -------------------------------------------------------------------------- */
.taf-hero.taf-hero--home { position: relative; isolation: isolate; overflow: hidden; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%20560'%3E%3Cpath%20d%3D'M-50%20560%20L140%20400%20L330%20560%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M140%20400%20L330%20560%20L182%20560%20L144%20499%20L159%20460%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M210%20560%20L420%20370%20L630%20560%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M420%20370%20L630%20560%20L466%20560%20L424%20488%20L441%20442%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M500%20560%20L700%20410%20L900%20560%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M700%20410%20L900%20560%20L744%20560%20L704%20503%20L720%20467%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M740%20560%20L930%20390%20L1120%20560%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M930%20390%20L1120%20560%20L972%20560%20L934%20495%20L949%20454%20Z'%20fill%3D'%233F82EC'%2F%3E%3C%2Fsvg%3E"); }
.taf-hero.taf-hero--home > .taf-wrap { position: relative; z-index: 4; }
.taf-hero.taf-hero--home::before,
.taf-hero.taf-hero--home::after { content: ""; position: absolute; right: 0; bottom: 0; width: max(100%, 960px); aspect-ratio: 1440 / 560; pointer-events: none; }
.taf-hero.taf-hero--home::after { z-index: 2; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%20560'%3E%3Cg%20transform%3D'translate(597.1%20-309.6)%20scale(1.180)'%3E%3Cpath%20d%3D'M282%20700%20L538%20670%20L538%20760%20L282%20760%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M538%20670%20L734%20670%20L734%20760%20L538%20760%20Z'%20fill%3D'%230159E8'%2F%3E%3Cpath%20d%3D'M470%20278%20L478%20278%20L478%20383%20L472%20391%20L470%20391%20Z'%20fill%3D'%230159E8'%2F%3E%3Cpath%20d%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20fill%3D'%2300C3FF'%3E%3Canimate%20attributeName%3D'd'%20values%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C502%20291%20520%20294%20533%20292%20C543%20289%20558%20293%20581%20297%20L568%20321%20L583%20344%20C560%20345%20543%20349%20531%20350%20C519%20346%20503%20343%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20dur%3D'3s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D'M494%20382%20L459%20502%20L530%20506%20L452%20592%20L538%20687%20Q400%20697%20266%20722%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M496%20380%20L734%20686%20Q630%20683%20538%20687%20L452%20592%20L530%20506%20L459%20502%20Z'%20fill%3D'%230159E8'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M1250%20560%20L1420%20420%20L1590%20560%20Z'%20fill%3D'%235E9BF2'%2F%3E%3Cpath%20d%3D'M1420%20420%20L1590%20560%20L1457%20560%20L1423%20507%20L1437%20473%20Z'%20fill%3D'%233F82EC'%2F%3E%3Cpath%20d%3D'M-210%20560%20L0%20470%20L210%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M0%20470%20L210%20560%20L42%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M30%20560%20L260%20455%20L490%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M260%20455%20L490%20560%20L306%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M320%20560%20L540%20480%20L760%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M540%20480%20L760%20560%20L584%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M570%20560%20L800%20462%20L1030%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M800%20462%20L1030%20560%20L846%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M850%20560%20L1060%20485%20L1270%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M1060%20485%20L1270%20560%20L1102%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M1000%20560%20L1200%20478%20L1400%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M1200%20478%20L1400%20560%20L1240%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M1120%20560%20L1300%20484%20L1480%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M1300%20484%20L1480%20560%20L1336%20560%20Z'%20fill%3D'%23013180'%2F%3E%3Cpath%20d%3D'M1170%20560%20L1400%20468%20L1630%20560%20Z'%20fill%3D'%230143AE'%2F%3E%3Cpath%20d%3D'M1400%20468%20L1630%20560%20L1446%20560%20Z'%20fill%3D'%23013180'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
.taf-hero.taf-hero--home::before { z-index: 3; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2012'%3E%3Cpath%20d%3D'M1%207.5%20Q8%205%2015%206%20L19.5%205.2%20L17%207.2%20Q9%209.2%201%207.5%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M8%206.4%20L13%201%20L12%206.4%20Z'%20fill%3D'%2300143A'%3E%3Canimate%20attributeName%3D'd'%20values%3D'M8%206.4%20L13%201%20L12%206.4%20Z%3BM8%206.4%20L13%2011%20L12%206.4%20Z%3BM8%206.4%20L13%201%20L12%206.4%20Z'%20dur%3D'0.6s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat 0 0 / 1.1% auto, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2012'%3E%3Cellipse%20cx%3D'12'%20cy%3D'7'%20rx%3D'1.3'%20ry%3D'1.6'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M2.5%204%20Q8%206.5%2012%206.6%20Q16%206.5%2021.5%204'%20fill%3D'none'%20stroke%3D'%2300143A'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%3E%3Canimate%20attributeName%3D'd'%20values%3D'M2.5%204%20Q8%206.5%2012%206.6%20Q16%206.5%2021.5%204%3BM2.5%209.5%20Q8%207.5%2012%206.6%20Q16%207.5%2021.5%209.5%3BM2.5%204%20Q8%206.5%2012%206.6%20Q16%206.5%2021.5%204'%20dur%3D'0.6s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat 0 0 / 0% auto; transform-origin: .55% .7%; animation: peak-eagle 38.8s linear infinite; }
@keyframes peak-eagle {
  0% { transform: translate(64.35%, 54.10%) scale(0.5, 0.52) rotate(0deg); z-index: 1; opacity: 0.85; background-size: 0% auto, 1.1% auto; }
  6.186% { transform: translate(64.35%, 55.30%) scale(0.95, 1) rotate(0deg); z-index: 3; opacity: 1; background-size: 0% auto, 1.1% auto; }
  6.536% { transform: translate(64.41%, 55.67%) scale(0.45, 0.88) rotate(0deg); z-index: 3; opacity: 1; background-size: 0% auto, 1.1% auto; }
  6.624% { transform: translate(64.42%, 55.76%) scale(0.1, 0.9) rotate(-8deg); z-index: 3; opacity: 1; background-size: 1.1% auto, 0% auto; }
  7.237% { transform: translate(64.52%, 56.41%) scale(0.5, 0.95) rotate(-6deg); z-index: 3; opacity: 1; background-size: 1.1% auto, 0% auto; }
  9.84% { transform: translate(64.93%, 59.17%) scale(1, 1) rotate(0deg); z-index: 3; opacity: 1; }
  13.485% { transform: translate(66.63%, 60.60%) scale(1, 1) rotate(0deg); z-index: 3; opacity: 1; }
  17.139% { transform: translate(69.33%, 60.53%) scale(1, 1) rotate(0deg); z-index: 3; opacity: 1; }
  20.793% { transform: translate(72.85%, 61.71%) scale(1, 1) rotate(0deg); z-index: 3; opacity: 1; }
  24.439% { transform: translate(76.95%, 64.41%) scale(1, 1) rotate(0deg); z-index: 3; opacity: 1; }
  28.093% { transform: translate(81.35%, 65.90%) scale(1, 1) rotate(0deg); z-index: 3; opacity: 1; }
  31.747% { transform: translate(85.75%, 64.41%) scale(1, 1) rotate(0deg); z-index: 3; opacity: 1; }
  35.392% { transform: translate(89.85%, 61.71%) scale(1, 1) rotate(0deg); z-index: 3; opacity: 1; }
  39.046% { transform: translate(93.37%, 60.53%) scale(1, 1) rotate(0deg); z-index: 3; opacity: 1; }
  42.701% { transform: translate(96.07%, 60.60%) scale(1, 1) rotate(0deg); z-index: 3; opacity: 1; }
  46.346% { transform: translate(97.77%, 59.17%) scale(1, 1) rotate(0deg); z-index: 3; opacity: 1; }
  48.948% { transform: translate(98.18%, 56.41%) scale(0.5, 0.95) rotate(-6deg); z-index: 3; opacity: 1; background-size: 1.1% auto, 0% auto; }
  49.562% { transform: translate(98.28%, 55.76%) scale(0.1, 0.9) rotate(-8deg); z-index: 3; opacity: 1; background-size: 1.1% auto, 0% auto; }
  49.649% { transform: translate(98.29%, 55.67%) scale(0.45, 0.88) rotate(0deg); z-index: 3; opacity: 1; background-size: 0% auto, 1.1% auto; }
  50% { transform: translate(98.35%, 55.30%) scale(0.95, 1) rotate(0deg); z-index: 2; opacity: 0.95; background-size: 0% auto, 1.1% auto; }
  56.186% { transform: translate(98.35%, 54.10%) scale(0.5, 0.52) rotate(0deg); z-index: 1; opacity: 0.85; background-size: 0% auto, 1.1% auto; }
  56.536% { transform: translate(98.29%, 54.93%) scale(0.3, 0.5) rotate(0deg); z-index: 1; opacity: 0.85; background-size: 0% auto, 1.1% auto; }
  56.624% { transform: translate(98.28%, 54.84%) scale(-0.06, 0.62) rotate(8deg); z-index: 1; opacity: 0.85; background-size: 1.1% auto, 0% auto; }
  57.237% { transform: translate(98.18%, 54.19%) scale(-0.39, 0.7) rotate(6deg); z-index: 1; opacity: 0.85; background-size: 1.1% auto, 0% auto; }
  59.84% { transform: translate(97.77%, 51.43%) scale(-0.78, 0.78) rotate(0deg); z-index: 1; opacity: 0.85; }
  63.485% { transform: translate(96.07%, 50.00%) scale(-0.78, 0.78) rotate(0deg); z-index: 1; opacity: 0.85; }
  67.139% { transform: translate(93.37%, 50.07%) scale(-0.78, 0.78) rotate(0deg); z-index: 1; opacity: 0.85; }
  70.793% { transform: translate(89.85%, 48.89%) scale(-0.78, 0.78) rotate(0deg); z-index: 1; opacity: 0.85; }
  74.439% { transform: translate(85.75%, 46.19%) scale(-0.78, 0.78) rotate(0deg); z-index: 1; opacity: 0.85; }
  78.093% { transform: translate(81.35%, 44.70%) scale(-0.78, 0.78) rotate(0deg); z-index: 1; opacity: 0.85; }
  81.747% { transform: translate(76.95%, 46.19%) scale(-0.78, 0.78) rotate(0deg); z-index: 1; opacity: 0.85; }
  85.392% { transform: translate(72.85%, 48.89%) scale(-0.78, 0.78) rotate(0deg); z-index: 1; opacity: 0.85; }
  89.046% { transform: translate(69.33%, 50.07%) scale(-0.78, 0.78) rotate(0deg); z-index: 1; opacity: 0.85; }
  92.701% { transform: translate(66.63%, 50.00%) scale(-0.78, 0.78) rotate(0deg); z-index: 1; opacity: 0.85; }
  96.346% { transform: translate(64.93%, 51.43%) scale(-0.78, 0.78) rotate(0deg); z-index: 1; opacity: 0.85; }
  98.948% { transform: translate(64.52%, 54.19%) scale(-0.39, 0.7) rotate(6deg); z-index: 1; opacity: 0.85; background-size: 1.1% auto, 0% auto; }
  99.562% { transform: translate(64.42%, 54.84%) scale(-0.06, 0.62) rotate(8deg); z-index: 1; opacity: 0.85; background-size: 1.1% auto, 0% auto; }
  99.649% { transform: translate(64.41%, 54.93%) scale(0.3, 0.5) rotate(0deg); z-index: 1; opacity: 0.85; background-size: 0% auto, 1.1% auto; }
  100% { transform: translate(64.35%, 54.10%) scale(0.5, 0.52) rotate(0deg); z-index: 1; opacity: 0.85; background-size: 0% auto, 1.1% auto; }
}
@media (max-width: 720px) {
  .taf-hero.taf-hero--home::after { width: 640px; }
  .taf-hero.taf-hero--home::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .taf-hero.taf-hero--home::before { display: none; }
}

/* --------------------------------------------------------------------------
   App cards: rounder corners and a soft shadow. The colour bar on top
   comes from taf-docs.css.
   -------------------------------------------------------------------------- */
.taf-card--app { border-radius: 12px; box-shadow: 0 10px 26px rgba(1, 49, 128, .08); }

/* --------------------------------------------------------------------------
   Home page, apps: the foothills. The hero's near range runs into a dark
   blue ground with a fine grain. Left-aligned heading. Each icon rises above
   its card, and each card ends in a strip of its app's colour.
   -------------------------------------------------------------------------- */
#apps.taf-section, .peak-foothills.taf-section { background-color: #013180; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'220'%20height%3D'220'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.85'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%20.09%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'220'%20height%3D'220'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E"); padding-top: 40px; }
#apps .taf-wrap > .taf-center, .peak-foothills .taf-wrap > .taf-center { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 48px; text-align: left; max-width: none; margin: 0 0 88px; }
#apps .taf-center::before, .peak-foothills .taf-center::before { content: "The apps"; flex-basis: 100%; font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #CAF200; }
#apps .taf-center h2, .peak-foothills .taf-center h2 { flex: 1 1 420px; margin: 0; color: #FFFFFF; text-align: left; }
#apps .taf-center p, .peak-foothills .taf-center p { flex: 0 1 420px; margin: 0; color: #D5E2FA; text-align: left; }
#apps .taf-cards--4, .peak-foothills .taf-cards--4 { row-gap: 64px; }
#apps .taf-card--app, .peak-foothills .taf-card--app { position: relative; overflow: visible; border: 0; border-radius: 14px; padding-bottom: 32px; box-shadow: 0 18px 40px rgba(0, 20, 58, .45); }
#apps .taf-card--app::before, .peak-foothills .taf-card--app::before { display: none; }
#apps .taf-card--app::after, .peak-foothills .taf-card--app::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 0 0 14px 14px; background: var(--peak-app, #0159E8); }
#apps .taf-card__logo, .peak-foothills .taf-card__logo { margin-top: -64px; filter: drop-shadow(0 8px 14px rgba(0, 20, 58, .35)); }

/* --------------------------------------------------------------------------
   Home page, reviews: light again. A summary on the left, the review row on
   the right. Lime stars on a navy chip, the app name on a flag-shaped tag.
   -------------------------------------------------------------------------- */
#reviews.taf-section { background: var(--peak-sky); }
@media (min-width: 960px) {
  #reviews .taf-wrap { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  #reviews .taf-head { grid-row: 1 / span 2; }
  #reviews .taf-reviews, #reviews .taf-reviews__foot { grid-column: 2; }
}
#reviews .taf-head { text-align: left; margin: 0 0 32px; }
#reviews .peak-sum__num { display: block; font-size: clamp(72px, 9vw, 104px); line-height: 1; letter-spacing: -.03em; }
#reviews .peak-sum h2 { font-size: 22px; line-height: 1.3; }
#reviews .peak-key { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; font-weight: 800; color: var(--navy); }
#reviews .peak-key li { display: inline-flex; align-items: center; gap: 6px; }
#reviews .peak-key li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--peak-app); }
#reviews .peak-key li[data-app="list-browse"]::before { box-shadow: inset 0 0 0 1px #9DBB00; }
[data-app="simple-signature"] { --peak-app: #0159E8; --peak-app-ink: #FFFFFF; }
[data-app="address-verification"] { --peak-app: #00C3FF; --peak-app-ink: #013180; }
[data-app="highlighter"] { --peak-app: #4EE54E; --peak-app-ink: #013180; }
[data-app="list-browse"] { --peak-app: #CAF200; --peak-app-ink: #013180; }
#reviews .taf-review figure { background: #FFFFFF; border: 0; border-radius: 14px; box-shadow: 0 12px 30px rgba(1, 49, 128, .10); }
#reviews .taf-review__stars { background: var(--navy); color: #CAF200; padding: 3px 9px; border-radius: 6px; letter-spacing: 2px; }
#reviews .taf-review__app { background: var(--peak-app); color: var(--peak-app-ink); font-weight: 800; padding: 5px 22px 5px 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
#reviews .taf-review blockquote { color: var(--navy); }

/* --------------------------------------------------------------------------
   Navy band: the colour line on top, a mountain range along the bottom.
   One small peak is the TAF logo with its flag.
   -------------------------------------------------------------------------- */
.taf-hero--navy {
  border-top: 6px solid transparent; border-image: var(--peak-line) 1;
  background-color: var(--navy-deep);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%20220'%3E%3Cpath%20d%3D'M10%20220%20L240%20115%20L470%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M240%20115%20L470%20220%20L291%20220%20L245%20180%20L263%20154%20Z'%20fill%3D'%2308306F'%2F%3E%3Cpath%20d%3D'M320%20220%20L600%2095%20L880%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M600%2095%20L880%20220%20L662%20220%20L606%20172%20L628%20142%20Z'%20fill%3D'%2308306F'%2F%3E%3Cpath%20d%3D'M1180%20220%20L1380%20125%20L1580%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M1380%20125%20L1580%20220%20L1424%20220%20L1384%20184%20L1400%20161%20Z'%20fill%3D'%2308306F'%2F%3E%3Cg%20transform%3D'translate(744.2%20-190.7)%20scale(0.700)'%3E%3Cpath%20d%3D'M470%20278%20L478%20278%20L478%20383%20L472%20391%20L470%20391%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20fill%3D'%23FFFFFF'%3E%3Canimate%20attributeName%3D'd'%20values%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C502%20291%20520%20294%20533%20292%20C543%20289%20558%20293%20581%20297%20L568%20321%20L583%20344%20C560%20345%20543%20349%20531%20350%20C519%20346%20503%20343%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20dur%3D'3s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D'M494%20382%20L459%20502%20L530%20506%20L452%20592%20L538%20687%20Q400%20697%20266%20722%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M496%20380%20L734%20686%20Q630%20683%20538%20687%20L452%20592%20L530%20506%20L459%20502%20Z'%20fill%3D'%230159E8'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M-140%20220%20L80%20170%20L300%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M80%20170%20L300%20220%20L124%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M180%20220%20L420%20160%20L660%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M420%20160%20L660%20220%20L468%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M550%20220%20L760%20180%20L970%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M760%20180%20L970%20220%20L802%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M1160%20220%20L1380%20172%20L1600%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M1380%20172%20L1600%20220%20L1424%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: max(100%, 900px) auto;
  padding-bottom: clamp(150px, 16vw, 240px);
}
.taf-hero--navy .taf-eyebrow { color: #CAF200; }

/* The colour line again above the footer. */
.taf-footer { border-top: 6px solid transparent; border-image: var(--peak-line) 1; }

/* Pages without the navy band or the dusk section: the footer carries the
   mountain range and the small TAF peak along its top, with the colour line
   as the ground under them. Needs :has(). */
body:not(:has(.taf-hero--navy, .peak-dusk, .peak-night)) .taf-footer {
  --peak-range: calc(max(100vw, 900px) * 220 / 1440);
  border-top: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%20220'%3E%3Cpath%20d%3D'M10%20220%20L240%20115%20L470%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M240%20115%20L470%20220%20L291%20220%20L245%20180%20L263%20154%20Z'%20fill%3D'%2308306F'%2F%3E%3Cpath%20d%3D'M320%20220%20L600%2095%20L880%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M600%2095%20L880%20220%20L662%20220%20L606%20172%20L628%20142%20Z'%20fill%3D'%2308306F'%2F%3E%3Cpath%20d%3D'M1180%20220%20L1380%20125%20L1580%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M1380%20125%20L1580%20220%20L1424%20220%20L1384%20184%20L1400%20161%20Z'%20fill%3D'%2308306F'%2F%3E%3Cg%20transform%3D'translate(744.2%20-190.7)%20scale(0.700)'%3E%3Cpath%20d%3D'M470%20278%20L478%20278%20L478%20383%20L472%20391%20L470%20391%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20fill%3D'%23FFFFFF'%3E%3Canimate%20attributeName%3D'd'%20values%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C502%20291%20520%20294%20533%20292%20C543%20289%20558%20293%20581%20297%20L568%20321%20L583%20344%20C560%20345%20543%20349%20531%20350%20C519%20346%20503%20343%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20dur%3D'3s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D'M494%20382%20L459%20502%20L530%20506%20L452%20592%20L538%20687%20Q400%20697%20266%20722%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M496%20380%20L734%20686%20Q630%20683%20538%20687%20L452%20592%20L530%20506%20L459%20502%20Z'%20fill%3D'%230159E8'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M-140%20220%20L80%20170%20L300%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M80%20170%20L300%20220%20L124%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M180%20220%20L420%20160%20L660%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M420%20160%20L660%20220%20L468%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M550%20220%20L760%20180%20L970%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M760%20180%20L970%20220%20L802%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M1160%20220%20L1380%20172%20L1600%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M1380%20172%20L1600%20220%20L1424%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3C%2Fsvg%3E"), var(--peak-line);
  background-repeat: no-repeat, no-repeat;
  background-position: right 0 top 24px, 0 calc(24px + var(--peak-range) - 2px);
  background-size: max(100%, 900px) auto, 100% 6px;
  padding-top: calc(24px + var(--peak-range) + 56px);
}

/* --------------------------------------------------------------------------
   Home page: the reviews section turns to dusk at the bottom. The support
   section under it has a short night sky, a few stars that twinkle a little,
   and the mountain range with the small TAF peak.
   -------------------------------------------------------------------------- */
#reviews.taf-section:has(+ .peak-dusk) {
  background: linear-gradient(180deg, var(--peak-sky) 0%, var(--peak-sky) 45%, #D9E7FD 72%, #B4CFF7 100%);
}
.peak-dusk, .peak-night {
  --peak-scene: calc(max(100vw, 900px) * 330 / 1440);
  color: #FFFFFF;
  background-color: #001A47;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%20330'%3E%3Cg%20fill%3D'%23FFFFFF'%3E%3Ccircle%20cx%3D'140'%20cy%3D'150'%20r%3D'1.5'%20opacity%3D'0.6'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.6%3B0.21%3B0.6'%20dur%3D'4.2s'%20begin%3D'0s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'310'%20cy%3D'176'%20r%3D'1.2'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'470'%20cy%3D'140'%20r%3D'1.4'%20opacity%3D'0.45'%2F%3E%3Ccircle%20cx%3D'690'%20cy%3D'168'%20r%3D'1.7'%20opacity%3D'0.7'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.7%3B0.24%3B0.7'%20dur%3D'5.0s'%20begin%3D'1.6s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'860'%20cy%3D'146'%20r%3D'1.2'%20opacity%3D'0.45'%2F%3E%3Ccircle%20cx%3D'1010'%20cy%3D'184'%20r%3D'1.5'%20opacity%3D'0.6'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.6%3B0.21%3B0.6'%20dur%3D'3.6s'%20begin%3D'0.8s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'1210'%20cy%3D'150'%20r%3D'1.3'%20opacity%3D'0.55'%2F%3E%3Ccircle%20cx%3D'1350'%20cy%3D'136'%20r%3D'1.1'%20opacity%3D'0.4'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.4%3B0.14%3B0.4'%20dur%3D'4.6s'%20begin%3D'2.4s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'560'%20cy%3D'196'%20r%3D'1.1'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'1290'%20cy%3D'200'%20r%3D'1.5'%20opacity%3D'0.65'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.65%3B0.23%3B0.65'%20dur%3D'5.4s'%20begin%3D'0.3s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'60'%20cy%3D'188'%20r%3D'1.2'%20opacity%3D'0.5'%2F%3E%3Ccircle%20cx%3D'920'%20cy%3D'206'%20r%3D'1.1'%20opacity%3D'0.55'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.55%3B0.19%3B0.55'%20dur%3D'3.9s'%20begin%3D'3.1s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D'240'%20cy%3D'214'%20r%3D'1.0'%20opacity%3D'0.45'%2F%3E%3Ccircle%20cx%3D'1120'%20cy%3D'222'%20r%3D'1.1'%20opacity%3D'0.5'%3E%3Canimate%20attributeName%3D'opacity'%20values%3D'0.5%3B0.17%3B0.5'%20dur%3D'4.8s'%20begin%3D'1.1s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fcircle%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(0%20110)'%3E%3Cpath%20d%3D'M10%20220%20L240%20115%20L470%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M240%20115%20L470%20220%20L291%20220%20L245%20180%20L263%20154%20Z'%20fill%3D'%2308306F'%2F%3E%3Cpath%20d%3D'M320%20220%20L600%2095%20L880%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M600%2095%20L880%20220%20L662%20220%20L606%20172%20L628%20142%20Z'%20fill%3D'%2308306F'%2F%3E%3Cpath%20d%3D'M1180%20220%20L1380%20125%20L1580%20220%20Z'%20fill%3D'%230B3A82'%2F%3E%3Cpath%20d%3D'M1380%20125%20L1580%20220%20L1424%20220%20L1384%20184%20L1400%20161%20Z'%20fill%3D'%2308306F'%2F%3E%3Cg%20transform%3D'translate(744.2%20-190.7)%20scale(0.700)'%3E%3Cpath%20d%3D'M470%20278%20L478%20278%20L478%20383%20L472%20391%20L470%20391%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20fill%3D'%23FFFFFF'%3E%3Canimate%20attributeName%3D'd'%20values%3D'M487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C502%20291%20520%20294%20533%20292%20C543%20289%20558%20293%20581%20297%20L568%20321%20L583%20344%20C560%20345%20543%20349%20531%20350%20C519%20346%20503%20343%20487%20341%20C490%20324%20490%20306%20487%20289%20Z%3BM487%20289%20C503%20284%20522%20282%20534%20288%20C541%20297%20556%20302%20581%20299%20L567%20322%20L583%20346%20C560%20353%20541%20352%20531%20344%20C520%20336%20503%20337%20487%20341%20C490%20324%20490%20306%20487%20289%20Z'%20dur%3D'3s'%20repeatCount%3D'indefinite'%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D'M494%20382%20L459%20502%20L530%20506%20L452%20592%20L538%20687%20Q400%20697%20266%20722%20Z'%20fill%3D'%2300C3FF'%2F%3E%3Cpath%20d%3D'M496%20380%20L734%20686%20Q630%20683%20538%20687%20L452%20592%20L530%20506%20L459%20502%20Z'%20fill%3D'%230159E8'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M-140%20220%20L80%20170%20L300%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M80%20170%20L300%20220%20L124%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M180%20220%20L420%20160%20L660%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M420%20160%20L660%20220%20L468%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M550%20220%20L760%20180%20L970%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M760%20180%20L970%20220%20L802%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3Cpath%20d%3D'M1160%20220%20L1380%20172%20L1600%20220%20Z'%20fill%3D'%23001A47'%2F%3E%3Cpath%20d%3D'M1380%20172%20L1600%20220%20L1424%20220%20Z'%20fill%3D'%2300143A'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), linear-gradient(180deg, #B4CFF7 0%, #6E9DEB 18%, #2F6FDB 36%, #0B3F9E 56%, #062B70 78%, #002258 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right top, 0 0;
  background-size: max(100%, 900px) auto, 100% calc(var(--peak-scene) - 4px);
  padding: calc(var(--peak-scene) + var(--s7)) 0 var(--s8);
}
.peak-dusk__grid { display: flex; flex-wrap: wrap; gap: var(--s7) var(--s8); align-items: flex-start; }
.peak-dusk__lead { flex: 1 1 340px; min-width: 0; }
.peak-dusk .taf-eyebrow { color: #CAF200; }
.peak-dusk h2 { color: #FFFFFF; margin: 0; }
.peak-dusk .taf-lede { color: #D5DEF5; max-width: 30rem; margin-top: var(--s4); }
.peak-dusk .peak-dusk__cta { margin-top: var(--s6); background: #CAF200; color: #013180; border-color: #CAF200; }
.peak-dusk .peak-dusk__cta:hover { background: #DDFF4D; color: #013180; }
.peak-dusk__note { margin: 12px 0 0; font-size: 15px; color: #D5DEF5; }
.peak-dusk__list { flex: 1 1 480px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.peak-dusk__list li { border-top: 1px solid rgba(255, 255, 255, .14); margin: 0; }
.peak-dusk__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.peak-dusk__list a { display: flex; align-items: center; gap: 18px; padding: 20px 4px; color: #FFFFFF; text-decoration: none; }
.peak-dusk__list a:hover .peak-dusk__name, .peak-dusk__list a:focus-visible .peak-dusk__name { color: #CAF200; }
.peak-dusk__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #0159E8; color: #00C3FF; }
.peak-dusk__icon svg { width: 24px; height: 24px; }
.peak-dusk__text { flex-grow: 1; min-width: 0; }
.peak-dusk__name { display: block; font-size: 19px; font-weight: 800; }
.peak-dusk__desc { display: block; margin-top: 2px; font-size: 15px; color: #C9D3EE; }
.peak-dusk__go { font-size: 22px; color: #CAF200; }

/* ==========================================================================
   34. One-row header, hero peak base, shorter review boxes, 21 Oct 2026

   Reece's requests after the Peak look went live. On wide screens the
   menu moves up into the logo row, so the header is one row. The hero
   logo peak gets a fill under its base, so no sky shows between it and
   the near range (the fill is in section 33's hero picture). A review box
   shows at most 8 lines of the quote. Builder: apply_peak_live.py.
   ========================================================================== */
@media (min-width: 901px) {
  :root { --header-h: 68px; }
  .taf-header { display: grid; }
  .taf-header__top, .taf-header__nav-row { grid-area: 1 / 1; width: 100%; box-sizing: border-box; }
  .taf-header__nav-row { height: 60px; padding-left: calc(var(--gutter) + 125px + var(--s7)); pointer-events: none; }
  .taf-header__nav-row .taf-nav, .taf-header__nav-row .taf-mega { pointer-events: auto; }
}
#reviews .taf-review blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.peak-dusk .taf-eyebrow { font-size: 22px; letter-spacing: .14em; margin-bottom: 4px; }

/* ==========================================================================
   35. The climber in the home page dusk section, 21 Oct 2026

   Reece's idea: a tiny climber in a TAF green jacket searches the dark
   range for answers. He turns like a real figure, looks at 2 or 3 places
   at each stop, and a soft headlamp beam shows where he looks. At the
   foot of the TAF peak his beam finds the flag, and the flag glows. One
   walk is about 113 seconds. The picture is /assets/peak-climber.svg
   (SMIL inside the picture, no script); only the home page loads it.
   To take him off, delete this section. Builder: climber3.js.
   ========================================================================== */
.peak-dusk { position: relative; }
.peak-dusk::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--peak-scene); pointer-events: none;
  background: url("/assets/peak-climber.svg") right top / max(100%, 900px) auto no-repeat;
}

/* ==========================================================================
   36. Support pages: the helicopter rescue, and the Support home flow,
       22 Oct 2026

   Reece's idea: on every support page, the climber from the home page sits
   hurt on a small peak and waves. A helicopter lowers a line, lifts him to a
   tent at the foot of the TAF peak, and he waves thanks, then rests. It loops
   every 27.5 seconds. The picture is /assets/peak-rescue.svg (SMIL inside
   the picture, no script). Only pages with a .peak-rescue element load it.
   It sits on the navy band of each support page, and at the top of the night
   section of the Support home. Hidden on phones and with reduce motion.
   Mockup G9. Builder: heli-rescue.py.

   The Support home follows the home page: the hero runs into the foothills
   (the apps), the foothills fade to day (the guides and fixes), and the day
   fades to night (Open a case).
   ========================================================================== */
.peak-rescue { position: relative; overflow: hidden; }
.peak-rescue > .taf-wrap { position: relative; z-index: 1; }
.peak-rescue::before {
  content: ""; position: absolute; right: 0; bottom: 0; width: max(100%, 900px); aspect-ratio: 1440 / 330; pointer-events: none;
  background: url("/assets/peak-rescue.svg") 0 0 / 100% 100% no-repeat;
}
.peak-night.peak-rescue::before { top: 0; bottom: auto; }
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .peak-rescue::before { display: none; }
}

/* Support home: Choose your app sits in the foothills (see #apps above). */
.peak-foothills .taf-hubapps .taf-card__logo--img { width: 88px; height: 88px; }

/* Support home: the guides and fixes. Day, with a hard edge under the
   foothills (Reece, 22 Oct 2026), then dusk at the bottom, into the night
   section. */
.peak-library.taf-section {
  background: linear-gradient(180deg, var(--peak-sky) 0, var(--peak-sky) 74%, #D9E7FD 90%, #B4CFF7 100%);
}
.peak-library .taf-wrap > .taf-center { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 48px; text-align: left; max-width: none; margin: 0 0 var(--s7); }
.peak-library .taf-center::before { content: "Support"; flex-basis: 100%; font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #0159E8; }
.peak-library .taf-center h2 { flex: 1 1 420px; margin: 0; text-align: left; }
.peak-library .taf-center p { flex: 0 1 420px; margin: 0; text-align: left; }
.peak-library .taf-tile { --peak-tile: #0159E8; --peak-tile-ink: #FFFFFF; position: relative; overflow: hidden; background: #FFFFFF; border: 0; border-radius: 14px; padding-bottom: 30px; box-shadow: 0 12px 30px rgba(1, 49, 128, .10); }
.peak-library .taf-tile:nth-child(4n+2) { --peak-tile: #00C3FF; --peak-tile-ink: #013180; }
.peak-library .taf-tile:nth-child(4n+3) { --peak-tile: #4EE54E; --peak-tile-ink: #013180; }
.peak-library .taf-tile:nth-child(4n+4) { --peak-tile: #CAF200; --peak-tile-ink: #013180; }
.peak-library .taf-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--peak-tile); }
.peak-library .taf-tile:hover { box-shadow: 0 18px 40px rgba(1, 49, 128, .18); }
.peak-library .taf-tile__icon { box-sizing: border-box; width: 48px; height: 48px; padding: 12px; border-radius: 12px; background: var(--peak-tile); color: var(--peak-tile-ink); }
.peak-library .taf-tile h4 { color: var(--navy); }

/* Support home: Open a case under the night sky. The form sits on a white card. */
.peak-night .taf-head h2 { color: #FFFFFF; }
.peak-night .taf-head .taf-lede { color: #D5DEF5; }
.peak-night .taf-listing { background: #FFFFFF; color: var(--text); border-radius: 16px; padding: clamp(20px, 4vw, 40px); box-shadow: 0 24px 60px rgba(0, 8, 30, .45); }

/* ==========================================================================
   37. Wide screens: the hero grows with its mountains, 22 Oct 2026

   The hero scene scales with the screen width, so on a wide screen it was
   taller than the hero. The TAF flag went under the header, and the middle
   peaks rose into the text. Now the hero is at least as tall as the scene,
   and the text ends above the middle range (the bottom 38% of the scene).
   Phones keep their own sizes from section 33. Reece's report from a wide
   monitor at 100% zoom.
   ========================================================================== */
@media (min-width: 721px) {
  .taf-hero:not(.taf-hero--navy):not(.taf-hero--app) {
    min-height: calc(max(100vw, 960px) * 560 / 1440);
    padding-bottom: max(clamp(200px, 17vw, 260px), calc(max(100vw, 960px) * 560 / 1440 * .38));
  }
}

/* Home page and Support home: a soft seam where the hero's near range meets
   the foothills. The range colour fades into the foothills over 96px, so
   the edge is hard to see (Reece, 22 Oct 2026). */
#apps.taf-section, .peak-foothills.taf-section { position: relative; }
#apps > .taf-wrap, .peak-foothills > .taf-wrap { position: relative; z-index: 1; }
#apps::before, .peak-foothills::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 96px; pointer-events: none; background: linear-gradient(180deg, #0143AE 0, rgba(1, 67, 174, .55) 30%, rgba(1, 67, 174, .18) 65%, rgba(1, 67, 174, 0) 100%); }