/* ==========================================================================
   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; } }