/* Theme v3: the Bureau's design (TW-11).

   The layouts the Bureau supplied on 14 October 2026 (TRANCHER_Website_F.pdf):
   light, midnight and bright-blue bands, loose squares along band edges and
   over photos, and Stack Sans Notch ExtraLight for every heading. Loaded
   after site.css, which keeps the base layout and components.

   Colours are the Bureau's swatches. Most are already design tokens; three
   are new (T-Blue, T-Blue Special and the electric blue), and T-Grey replaces
   the sunken surface.

   Where the design breaks an accessibility rule, this file follows the rule:
   small red or blue text on dark bands becomes cyan, lime is never text, and
   the quote on the blue band is white instead of midnight. TW-13 lists each
   difference for the Bureau. */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  --t-midnight: #0f243d;
  --t-blue: #296beb;
  --t-blue-hover: #1d56c8;
  --t-blue-special: #004aff;
  --t-electric: #2121ff;
  --t-grey: #f7f7f7;
  --t-light-blue: #45c2ff;
  --t-red: #ff294c;
  --t-green: #8fe800;

  /* Body copy on midnight, from the PDF. 8.6:1. */
  --ink-on-navy-muted: #b7bdc5;
  --surface-sunken: var(--t-grey);
  --surface-raised: var(--t-grey);

  /* Small red text on light bands: the design system's danger red, 5.8:1
     on T-Grey. The Bureau's red stays for large type and shapes. */
  --label-red: #c2102f;

  /* Type, measured off the PDF at 1440 wide. */
  --display-1-size: clamp(46px, 5.9vw, 84px);
  --display-1-line: 1;
  --display-1-tracking: -0.02em;
  --display-2-size: clamp(36px, 4.2vw, 61px);
  --display-2-line: 1.04;
  --display-2-tracking: -0.02em;
  --display-3-size: clamp(30px, 3.2vw, 46px);
  --display-3-line: 1.1;
  --display-3-tracking: -0.015em;
  --heading-1-size: 32px;
  --heading-1-line: 38px;
  --heading-2-size: 25px;
  --heading-2-line: 31px;
  --body-lead-size: 24px;
  --body-lead-line: 34px;
  --body-size: 18px;
  --body-line: 28px;
  --body-sm-size: 16px;
  --body-sm-line: 25px;

  --header-height: 76px;
  --px-cell: 64px;
}

body { background: #ffffff; color: var(--t-midnight); }

h1, h2, h3, h4,
.display-1, .display-2, .display-3, .heading-1, .heading-2,
.timeline__when, .qualifier p, .accordion__q, .price, .calc-outputs__figure, .gains-list p {
  font-family: var(--font-display);
  font-weight: 200;
}
.heading-3 { font-weight: 500; font-family: var(--font-sans); }

/* site.css drops display sizes one step on phones; the clamps already scale. */
@media (max-width: 640px) {
  .display-1 { font-size: var(--display-1-size); line-height: var(--display-1-line); }
  .display-2 { font-size: var(--display-2-size); line-height: var(--display-2-line); }
  .display-3 { font-size: var(--display-3-size); line-height: var(--display-3-line); }
  :root {
    --body-lead-size: 20px;
    --body-lead-line: 29px;
    --body-size: 17px;
    --body-line: 27px;
  }
}

/* ==========================================================================
   Bands. Square edges, one colour each:
   grey (T-Grey), navy (T-Midnight), blue (T-Blue Special), electric.
   ========================================================================== */

.band { padding-block: clamp(72px, 9vw, 128px); }
.band--grey, .band--sunken, .band--raised, .band--blue-soft, .band--cyan-soft, .band--lime-soft { background: var(--t-grey); }
.band--navy { background: var(--t-midnight); color: var(--ink-on-navy-muted); }
.band--blue { background: var(--t-blue-special); color: #ffffff; }
.band--electric { background: var(--t-electric); color: #ffffff; }

/* Headings and copy on the three dark bands. */
:is(.band--navy, .band--blue, .band--electric, .hero, .closing-cta) :is(h1, h2, h3, .strong, .heading-1, .heading-2) { color: var(--t-grey); }
:is(.band--navy, .hero, .closing-cta) :is(.body-lead, .body, .body-sm, p) { color: var(--ink-on-navy-muted); }
:is(.band--blue, .band--electric) :is(.body-lead, .body, .body-sm, p) { color: #ffffff; }
:is(.band--blue, .band--electric, .closing-cta) :is(h2, .display-2, .display-3) { color: var(--t-light-blue); }

/* An accent heading: T-Blue on light and midnight bands (large text only,
   3.3:1 on midnight), cyan on the blue bands. */
.h-accent { color: var(--t-blue) !important; }
:is(.band--blue, .band--electric) .h-accent { color: var(--t-light-blue) !important; }

.eyebrow { color: var(--t-midnight); }
:is(.band--navy, .band--blue, .band--electric, .hero, .closing-cta) .eyebrow,
.eyebrow--on-navy { color: var(--t-light-blue); }
:is(.band--blue, .band--electric) .eyebrow { color: #ffffff; }

a { color: var(--t-blue-hover); }
:is(.band--navy, .hero, .closing-cta, .band--blue, .band--electric) p a:not(.btn) { color: var(--t-light-blue); }
:is(.band--blue, .band--electric) p a:not(.btn) { color: #ffffff; text-decoration: underline; }

/* ==========================================================================
   Pixel squares along band edges. .px-top and .px-bottom draw a strip of
   loose squares; the band's colour picks the palette.
   ========================================================================== */

.px-top, .px-bottom { position: relative; isolation: isolate; overflow: hidden; }
.px-top::before, .px-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  height: calc(2 * var(--px-cell));
  background-image: var(--px-strip, url("../img/pixels/edge-navy.svg"));
  background-repeat: repeat-x;
  background-size: calc(24 * var(--px-cell)) calc(2 * var(--px-cell));
  pointer-events: none;
}
.px-top::before { top: 0; transform: scaleY(-1); }
.px-bottom::after { bottom: 0; background-position: 37% 0; }
.band--grey, .band--sunken, .hero--light { --px-strip: url("../img/pixels/edge-grey.svg"); }
.band--blue { --px-strip: url("../img/pixels/edge-blue.svg"); }
.band--electric, .closing-cta { --px-strip: url("../img/pixels/edge-electric.svg"); }

/* A faint dot grid (the Bureau's DOTS artwork), on the right of the band. */
.dots { position: relative; isolation: isolate; }
.dots > .container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.6px, transparent 1.8px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
  pointer-events: none;
}
.band--grey.dots > .container::before, .hero--light.dots > .container::before {
  background-image: radial-gradient(rgba(15, 36, 61, 0.06) 1.6px, transparent 1.8px);
}

@media (max-width: 640px) {
  :root { --px-cell: 40px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn { min-height: 48px; padding: 12px 22px; border-width: 1.5px; border-radius: 8px; font-weight: 500; }
.btn--primary { background: var(--t-blue); border-color: var(--t-blue); color: #ffffff; }
.btn--primary:hover { background: var(--t-blue-hover); border-color: var(--t-blue-hover); color: #ffffff; }
.btn--secondary { background: transparent; border-color: var(--t-midnight); color: var(--t-midnight); }
.btn--secondary:hover { background: rgba(15, 36, 61, 0.06); color: var(--t-midnight); }
.btn--light { background: #ffffff; border-color: #ffffff; color: var(--t-midnight); }
.btn--light:hover { background: var(--t-grey); border-color: var(--t-grey); color: var(--t-midnight); }
.btn--outline-light { background: transparent; border-color: #ffffff; color: #ffffff; }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; color: #ffffff; }
:is(.band--navy, .band--blue, .band--electric, .hero, .closing-cta) .btn--secondary { border-color: #ffffff; color: #ffffff; }
:is(.band--navy, .band--blue, .band--electric, .hero, .closing-cta) .btn--secondary:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.hero--light .btn--outline-light { border-color: var(--t-midnight); color: var(--t-midnight); }
.hero--light .btn--outline-light:hover { background: rgba(15, 36, 61, 0.06); color: var(--t-midnight); }

.link-arrow { font-weight: 500; color: var(--t-midnight); }
:is(.band--navy, .band--blue, .band--electric, .hero, .closing-cta) .link-arrow { color: #ffffff; }
:is(.band--navy, .band--blue, .band--electric, .hero, .closing-cta) .link-arrow:hover { color: var(--t-light-blue); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header { background: var(--t-midnight); box-shadow: none; }
.site-header__bar { height: var(--header-height); }
.nav-main__item, .site-header__signin { font-size: 15px; font-weight: 400; color: var(--t-grey); }
.nav-main__item:hover, .site-header__signin:hover { color: #ffffff; }
.site-header__actions .btn { min-height: 44px; padding: 10px 18px; }
.site-header__actions .btn--primary { background: var(--t-blue); border-color: var(--t-blue); }
.brand__word { font-weight: 500; }

/* ==========================================================================
   Heroes
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 128px);
  background: var(--t-midnight);
}
.hero__text h1 { max-width: 760px; }
.hero__text .body-lead { max-width: 640px; }
.hero .breadcrumb, .hero .breadcrumb a { color: var(--ink-on-navy-muted); }

/* Light hero (Platform, Pricing): T-Grey, midnight type. */
.hero--light { background: var(--t-grey); }
.hero--light :is(h1, h2, .display-1, .display-2) { color: var(--t-midnight); }
.hero--light :is(.body-lead, .body, p) { color: var(--t-midnight); }
.hero--light .specialist-link a { color: var(--t-blue-hover); }

/* A photo filling the right half of a hero, edge to edge. */
.hero--photo .hero__inner, .hero--photo > .container { position: relative; z-index: 1; }
.hero--photo .hero__text { max-width: 560px; }
.hero__photo {
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 0;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo--pixels::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/pixels/photo-sector.svg") left center / cover no-repeat;
}
.hero--light .hero__photo--pixels::after { background-image: url("../img/pixels/photo-light.svg"); }

@media (max-width: 960px) {
  .hero--photo { padding-bottom: 0; }
  .hero--photo .hero__text { max-width: none; }
  .hero__photo { position: relative; inset: auto; height: 340px; margin-top: var(--space-7); }
  .hero__photo--pixels::after { background-position: center top; }
}

/* Home hero: the Bureau's looping video behind the text. */
.hero--home { min-height: min(760px, 88vh); display: flex; align-items: center; background: #f1f1f1; }
.hero--home .hero__inner { position: relative; z-index: 1; }
.hero--home .hero__text { max-width: 600px; }
.hero--home :is(h1, .body-lead, p) { color: var(--t-midnight); }
.hero--home .specialist-link { color: var(--t-midnight); }
.hero__video { position: absolute; inset: 0; z-index: 0; }
.hero__video video, .hero__video img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
/* Keeps the headline readable over the squares on the left of the video. */
.hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(241, 241, 241, 0.94) 0%, rgba(241, 241, 241, 0.86) 38%, rgba(241, 241, 241, 0) 62%);
}
.hero__video-toggle {
  position: absolute;
  right: var(--container-gutter);
  bottom: var(--space-5);
  z-index: 2;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--t-midnight);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--t-midnight);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
@media (max-width: 960px) {
  .hero--home { min-height: 0; padding-top: 0; flex-direction: column; align-items: stretch; }
  .hero--home .hero__video { position: relative; height: 300px; }
  .hero--home .hero__video::after { background: linear-gradient(0deg, rgba(241, 241, 241, 1) 0%, rgba(241, 241, 241, 0) 40%); }
  .hero--home .hero__inner { padding-block: var(--space-6) var(--space-8); }
  .hero__video-toggle { top: 240px; bottom: auto; }
}

/* ==========================================================================
   Section head
   ========================================================================== */

.section-head { gap: var(--space-4); }
.section-head h2 { max-width: 900px; }
.section-head .body-lead { max-width: 820px; }
.section-head--split { align-items: flex-end; }

/* ==========================================================================
   Home: three ways to work
   ========================================================================== */

.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-8); }
.way { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-7) var(--space-2); border-left: 1px solid rgba(247, 247, 247, 0.55); }
.way:first-child { padding-left: 0; border-left: 0; }
.way__num {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--t-red);
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  font-weight: 300;
  color: #ffffff;
}
.way h3 { font-size: 30px; line-height: 34px; color: var(--t-blue) !important; }
.way p { font-size: var(--body-size); line-height: var(--body-line); color: var(--t-grey) !important; }
.way .way__price { font-weight: 600; }
@media (max-width: 960px) {
  .ways { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .way { padding: var(--space-6) 0 0; border-left: 0; border-top: 1px solid rgba(247, 247, 247, 0.4); }
  .way:first-child { padding-top: 0; border-top: 0; }
}

/* ==========================================================================
   Testimonials on the blue band
   ========================================================================== */

.testimonial-strip.band--blue { padding-block: clamp(64px, 7vw, 96px); }
.band--blue .testimonial__path { color: #ffffff; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.band--blue .testimonial__num { display: none; }
.band--blue .testimonial__quote p {
  max-width: 1020px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 37px);
  line-height: 1.25;
  font-weight: 200;
  color: #ffffff;
}
.band--blue .testimonial { padding-left: 0; border-left: 0; }
.band--blue .rotator__dot span { border-color: #ffffff; }
/* The current dot is filled red; the others are white rings. */
.band--blue .rotator__dot[aria-current="true"] span { background: var(--t-red); border-color: var(--t-red); }
.band--blue .rotator__slides { grid-template-columns: 1fr; gap: var(--space-6); }
.band--blue .rotator__toggle { border-color: #ffffff; color: #ffffff; }
.band--blue .disclaimer { margin-top: var(--space-5); }

/* ==========================================================================
   Sector cards
   ========================================================================== */

.sector-card { position: relative; border: 0; border-radius: 0; background: #ffffff; }
.sector-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  aspect-ratio: 3 / 2;
  background: url("../img/pixels/card-1.svg") center / cover no-repeat;
  pointer-events: none;
}
.sector-card:nth-child(4n+2)::before { background-image: url("../img/pixels/card-2.svg"); }
.sector-card:nth-child(4n+3)::before { background-image: url("../img/pixels/card-3.svg"); }
.sector-card:nth-child(4n+4)::before { background-image: url("../img/pixels/card-4.svg"); }
.sector-card img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.sector-card:hover { outline: 2px solid var(--t-blue); outline-offset: 0; }
.sector-card__body { gap: 8px; padding: 20px 22px 24px; }
.sector-card .tag { padding: 0; border: 0; background: none; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--t-midnight); }
.sector-card h3 { font-size: 26px; line-height: 30px; color: var(--t-blue); }
.sector-card__line { color: var(--t-midnight); }
.sector-card__cta { color: var(--label-red); font-weight: 500; }

/* ==========================================================================
   Timeline
   ========================================================================== */

.timeline { gap: var(--space-7); }
.timeline li { border-top: 0; gap: var(--space-4); }
.timeline li::before {
  width: 14px;
  height: 14px;
  margin-top: 0;
  border: 1.5px solid var(--t-red);
  border-radius: 50%;
  background: transparent;
  box-shadow: 20px 6px 0 -6px transparent;
}
.timeline li { background: linear-gradient(rgba(247, 247, 247, 0.8), rgba(247, 247, 247, 0.8)) 30px 6px / calc(100% - 30px) 1px no-repeat; }
.timeline li:nth-child(2)::before { border-color: var(--t-light-blue); }
.timeline li:last-child::before { width: 14px; border-color: var(--t-green); background: var(--t-green); }
.timeline__when { font-size: clamp(34px, 3vw, 45px); line-height: 1.1; color: var(--t-grey); }
.timeline__what { color: var(--ink-on-navy-muted); }
@media (max-width: 960px) {
  .timeline { border-left: 0; margin-left: 0; gap: var(--space-5); }
  .timeline li { padding: 0; background: none; }
  .timeline li::before { position: static; }
  .timeline li:last-child::before { height: 14px; }
  .timeline__when { margin-top: 0; }
}

/* ==========================================================================
   Capability grid: icons and text on the blue bands, columns ruled.
   ========================================================================== */

.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-7); }
.capability-grid .capability-card { flex-direction: row; align-items: flex-start; gap: var(--space-5); padding: 4px var(--space-6); border: 0; border-left: 1px solid rgba(255, 255, 255, 0.6); border-radius: 0; background: none; }
.capability-grid .capability-card:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.capability-grid .capability-card svg { width: 44px; height: 44px; color: #ffffff; }
.capability-grid .capability-card svg path { fill: currentColor; }
.capability-grid .capability-card h3 { font-family: var(--font-sans); font-size: 18px; line-height: 25px; font-weight: 400; color: #ffffff !important; }
.band--grey .capability-grid .capability-card { border-left-color: rgba(15, 36, 61, 0.4); }
.band--grey .capability-grid .capability-card svg, .band--grey .capability-grid .capability-card h3 { color: var(--t-midnight) !important; }
@media (max-width: 960px) {
  .capability-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .capability-grid .capability-card { padding: 0; border-left: 0; }
}

/* ==========================================================================
   What you gain
   ========================================================================== */

.gains-head::before { display: none; }
.gains-list { gap: var(--space-5); margin-top: var(--space-5); }
.gains-list li { border-top: 1.5px solid var(--t-blue); }
.gains-list p { font-family: var(--font-sans); font-size: 18px; line-height: 25px; font-weight: 400; color: var(--t-midnight); }

/* ==========================================================================
   Calculator teaser, on midnight
   ========================================================================== */

.band--navy .calc-teaser__panel { padding: 0; border: 0; background: none; }
.band--navy .calc-teaser__panel .eyebrow { color: #ffffff; }
.band--navy .field__label { color: var(--ink-on-navy-muted); font-weight: 400; }
.band--navy .field__input { border: 1.5px solid var(--ink-on-navy-muted); border-radius: 8px; background: transparent; color: #ffffff; }
.band--navy .field__input option { color: var(--t-midnight); }
.band--navy .calc-outputs { border-top-color: rgba(183, 189, 197, 0.5); }
.band--navy .calc-outputs .caption { color: var(--ink-on-navy-muted); }
.band--navy .calc-outputs__figure { font-size: 36px; line-height: 42px; color: var(--t-light-blue); }
.calc-teaser__text .body + .body { margin-top: var(--space-2); }

/* ==========================================================================
   Closing call to action, on the electric blue
   ========================================================================== */

.closing-cta { padding-block: clamp(96px, 11vw, 168px); background: var(--t-electric); }
.closing-cta__text h2 { color: var(--t-light-blue); }
.closing-cta__text p { color: #ffffff; }
.closing-cta .specialist-link, .closing-cta .specialist-link a { color: #ffffff; }
.closing-cta .specialist-link a { text-decoration: underline; }
.closing-cta__inner { align-items: center; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--t-midnight); border-top: 0; color: #c3c8cf; }
.site-footer__heading { font-size: 12px; color: var(--t-grey); }
.site-footer__cols a { font-size: 15px; font-weight: 400; color: var(--t-grey); }
.site-footer__social { gap: var(--space-2); }
.site-footer__social a { min-width: 48px; justify-content: center; padding: 0; border: 0; }
.site-footer__social svg { width: 26px; height: 26px; fill: #ffffff; }
.site-footer__legal { border-top: 0; color: var(--t-grey); }
.site-footer__legal-links a, .site-footer__legal p { color: var(--t-grey); }
.site-footer__legal-links a + a::before, .site-footer__legal p::before { content: "|"; margin-right: var(--space-5); color: var(--t-light-blue); }
.site-footer__legal { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); }
.site-footer__legal p::before { margin-right: var(--space-5); }
@media (max-width: 960px) {
  .site-footer__legal { flex-direction: column; align-items: flex-start; }
  .site-footer__legal-links a + a::before, .site-footer__legal p::before { content: none; }
}

/* ==========================================================================
   Sector pages: captured list, obligations, two paths, resources, FAQ
   ========================================================================== */

.captured__intro h2 { color: var(--t-blue); }
.captured__intro .body-lead { color: var(--t-midnight); }
.captured-list { border-bottom: 0; }
.captured-list li { color: var(--t-midnight); border-top: 0; border-bottom: 1px solid rgba(15, 36, 61, 0.5); }
.captured-list li::before { width: 13px; height: 13px; margin-top: 7px; border: 1.5px solid var(--t-red); border-radius: 50%; }
.qualifier::before { display: none; }
.qualifier p { font-size: clamp(26px, 2.4vw, 33px); line-height: 1.2; color: var(--t-midnight); }

.obligations { column-gap: var(--space-7); row-gap: var(--space-8); }
.obligation { border-top: 1px solid rgba(41, 107, 235, 0.9); padding-top: var(--space-5); gap: var(--space-3); }
.obligation__num { font-family: var(--font-display); font-size: 54px; line-height: 1; font-weight: 200; color: var(--t-grey); }
.band--navy .obligation h3 { font-size: 29px; line-height: 33px; color: var(--t-red) !important; }
.band--navy .obligation p { color: var(--ink-on-navy-muted); }
.band--navy .caption, .band--navy .caption a { color: var(--ink-on-navy-muted); }
.band--navy .caption a { text-decoration: underline; }

.two-paths__cards { gap: 0; }
.two-paths__cards .path-card { padding: 0 var(--space-7) 0 0; border: 0; border-radius: 0; background: none; }
.two-paths__cards .path-card + .path-card { padding: 0 0 0 var(--space-7); border-left: 1px solid var(--t-midnight); }
.path-card__label::before { display: none; }
.path-card__label.eyebrow { color: var(--label-red); }
.two-paths__cards .path-card h3 { color: var(--t-blue); }
.two-paths__cards .path-card .body { color: var(--t-midnight); }
@media (max-width: 960px) {
  .two-paths__cards { gap: var(--space-6); }
  .two-paths__cards .path-card, .two-paths__cards .path-card + .path-card { padding: 0; border-left: 0; }
  .two-paths__cards .path-card + .path-card { padding-top: var(--space-6); border-top: 1px solid var(--t-midnight); }
}

.article-card { border: 0; border-radius: 0; background: #ffffff; }
.article-card:hover { outline: 2px solid var(--t-blue); }
.article-card h3 { font-family: var(--font-display); color: var(--t-blue); }
.article-card .tag { padding: 0; border: 0; background: none; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-midnight); }

.accordion { border-top-color: rgba(15, 36, 61, 0.35); }
.accordion details { border-bottom-color: rgba(15, 36, 61, 0.35); }
.accordion__q { font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 600; }
.band--navy .accordion, .band--navy .accordion details { border-color: rgba(247, 247, 247, 0.5); }
.band--navy .accordion summary { color: var(--t-grey); }
.band--navy .accordion__a, .band--navy .accordion__a p { color: var(--ink-on-navy-muted); }

/* Placeholders: still visible on every band. */
.copy-needed { color: inherit; }
:is(.band--navy, .band--blue, .band--electric, .hero:not(.hero--light), .closing-cta) .copy-needed { background: rgba(255, 255, 255, 0.08); border-color: currentColor; color: #ffffff; }

/* Disclaimers on dark bands: a light card so the amber note still reads. */
:is(.band--navy, .band--blue, .band--electric) .disclaimer { background: #ffffff; }
:is(.band--navy, .band--blue, .band--electric) .disclaimer:not(.disclaimer--verify) { border-left-color: var(--t-blue); }
:is(.band--navy, .band--blue, .band--electric) .disclaimer--verify { background: var(--signal-warning-soft); }
:is(.band--navy, .band--blue, .band--electric) .disclaimer :is(.disclaimer__title, .disclaimer__body) { color: var(--t-midnight) !important; }

/* ==========================================================================
   Platform: starter kit, security and logos
   ========================================================================== */

.split-ruled { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split-ruled > :first-child { padding-right: var(--space-8); }
.split-ruled > :last-child { padding-left: var(--space-8); border-left: 1px solid currentColor; }
.band--navy .split-ruled > :last-child { border-left-color: rgba(247, 247, 247, 0.6); }
.band--grey .split-ruled > :last-child, .band:not([class*="band--"]) .split-ruled > :last-child { border-left-color: var(--t-midnight); }
@media (max-width: 960px) {
  .split-ruled { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); }
  .split-ruled > :first-child { padding-right: 0; }
  .split-ruled > :last-child { padding-left: 0; padding-top: var(--space-7); border-left: 0; border-top: 1px solid rgba(247, 247, 247, 0.4); }
  .band--grey .split-ruled > :last-child { border-top-color: var(--t-midnight); }
}

.starter-kit__title { font-size: 25px; line-height: 32px; color: var(--t-grey); }
.price { color: var(--t-light-blue); }
.price__unit { font-family: var(--font-display); font-weight: 300; color: var(--ink-on-navy-muted); }
/* The Bureau's red is 3.7:1 under white button text; this step darker is 4.8:1. */
.starter-kit__action .btn--primary { background: #e0173c; border-color: #e0173c; color: #ffffff; }
.starter-kit__action .btn--primary:hover { background: #cc1236; border-color: #cc1236; }
.band--navy .starter-kit__card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.band--navy .starter-kit__card :is(p, .body-sm) { color: var(--ink-on-navy-muted); }
.band--navy .starter-kit__card .starter-kit__title { color: var(--t-grey); }

.media-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); margin-top: var(--space-8); }
.media-pair img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; object-position: top; }
@media (max-width: 960px) { .media-pair { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

.cert-logos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); }
.cert-logos img { width: 150px; height: auto; }
.cert-logos .flag-pending { align-self: center; }
.security-copy h3 { font-family: var(--font-display); font-size: 27px; line-height: 32px; color: var(--t-blue); }
.security-copy { display: flex; flex-direction: column; gap: var(--space-3); }
.security-copy h3:not(:first-child) { margin-top: var(--space-5); }

/* ==========================================================================
   Pricing: plans and extras on midnight
   ========================================================================== */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plans .plan-card, .plans .plan-card--featured { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-6); border: 0; border-left: 1px solid rgba(247, 247, 247, 0.6); border-radius: 0; background: none; box-shadow: none; }
.plans .plan-card:first-child { padding-left: 0; border-left: 0; }
.plans .plan-card h2 { font-family: var(--font-sans); font-size: 34px; line-height: 40px; font-weight: 400; color: #ffffff; }
.plan-card__seats { color: var(--t-light-blue) !important; }
.plans .price { font-size: 46px; line-height: 50px; color: var(--t-red); }
.plans .price__unit { font-size: 18px; color: var(--ink-on-navy-muted); }
.plans .plan-card__sub { color: var(--ink-on-navy-muted); }
.plans .plan-card__costs-label { margin-top: var(--space-4); color: var(--t-light-blue) !important; }
.plans .plan-card__costs { border-bottom: 1.5px solid #ffffff; }
.plans .plan-card__costs li { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1.5px solid #ffffff; color: #ffffff; }
.plans .plan-card__costs b { color: #ffffff; }
.plans .plan-card__action { margin-top: auto; padding-top: var(--space-5); }
.plans .plan-card__action .btn { width: 100%; }
@media (max-width: 960px) {
  .plans { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .plans .plan-card { padding: var(--space-7) 0 0; border-left: 0; border-top: 1px solid rgba(247, 247, 247, 0.4); }
  .plans .plan-card:first-child { padding-top: 0; border-top: 0; }
}
.band--navy .pricing-table__note { color: var(--ink-on-navy-muted); }
.band--navy .pricing-table__note strong, .band--navy .strong { color: #ffffff; }

.pricing-extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-top: var(--space-8); border-top: 1.5px solid #ffffff; }
.pricing-extras__card { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-6); border: 0; border-left: 1px solid rgba(247, 247, 247, 0.6); background: none; border-radius: 0; }
.pricing-extras__card:first-child { padding-left: 0; border-left: 0; }
.pricing-extras__card h2 { font-family: var(--font-sans); font-size: 27px; line-height: 34px; font-weight: 400; color: #ffffff; }
.pricing-extras__card .eyebrow { color: var(--t-light-blue); }
.pricing-extras__list { padding-left: 1.1em; list-style: disc; color: var(--ink-on-navy-muted); }
.pricing-extras__action { margin-top: auto; padding-top: var(--space-4); }
@media (max-width: 960px) {
  .pricing-extras { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .pricing-extras__card { padding: 0; border-left: 0; }
}

/* ==========================================================================
   Everything else: cards and surfaces on the light bands
   ========================================================================== */

.capability-card, .path-card, .plan-card, .team-card { border-radius: 0; }
.slot { border-radius: 0; }
img.slot--filled { border-radius: 0; }
.tag--lime { background: none; }

/* Two midnight bands in a row read as one. */
.band--navy + .band--navy { padding-top: 0; }

/* Light heroes: outline buttons and links in midnight and blue. */
:is(.hero--home, .hero--light) .btn--secondary { border-color: var(--t-midnight); color: var(--t-midnight); }
:is(.hero--home, .hero--light) .btn--secondary:hover { background: rgba(15, 36, 61, 0.06); color: var(--t-midnight); }
:is(.hero--home, .hero--light) .specialist-link { color: var(--t-midnight); }
:is(.hero--home, .hero--light) :is(.specialist-link a, p a:not(.btn)) { color: var(--t-blue-hover); }

/* Platform: the laptop sits large and runs off the right edge. */
.hero__media--laptop { flex: 0 0 52%; margin-right: calc(-1 * var(--container-gutter) - 6vw); }
.hero__media--laptop img { width: 100%; height: auto; aspect-ratio: auto; }
@media (max-width: 960px) { .hero__media--laptop { margin-right: 0; } }

/* Pricing: the portrait's white backdrop takes on the hero's grey. */
.hero--light .hero__photo img { mix-blend-mode: multiply; object-position: right center; }

/* Closing call to action: white copy. */
.closing-cta .closing-cta__text p { color: #ffffff; }

/* Quote credits on the blue band. */
.band--blue .testimonial__by, .band--blue .testimonial__by .copy-needed { color: #ffffff; }

/* Footer legal line: links on one row, the company line below. */
.site-footer__legal { flex-direction: column; align-items: flex-start; }
.site-footer__legal p::before { content: none; }

/* Phones: hero photos sit flush at the top, text below, no extra gaps. */
@media (max-width: 960px) {
  .hero--photo { padding-top: 0; padding-bottom: var(--space-8); }
  .hero--photo .hero__photo { margin: 0 0 var(--space-7); height: 300px; }
  .hero--home { padding-block: 0; }
  .hero--home .hero__inner { padding-block: var(--space-5) var(--space-8); }
}
.plans .plan-card--featured { border-top: 0; box-shadow: none; }
@media (max-width: 960px) { .plans .plan-card--featured { border-top: 1px solid rgba(247, 247, 247, 0.4); } }
.plans .plan-card--featured::before { display: none; }

/* Three paths: even padding either side of each rule. */
@media (min-width: 961px) {
  .two-paths__cards .path-card, .two-paths__cards .path-card + .path-card { padding: 0 var(--space-6); }
  .two-paths__cards .path-card:first-child { padding-left: 0; }
  .two-paths__cards .path-card:last-child { padding-right: 0; }
}