/* 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);
  /* 350 draws as thick as the Bureau's headings in their final layouts (TW-21). */
  font-weight: 350;
}
.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 band's copy starts clear of its strip: the padding on a strip edge is the
   strip's height plus a gap. Sector bands set their own; the testimonial
   strip's faint squares may sit behind its copy. */
.band.px-top:not(.sector, .testimonial-strip) { padding-top: calc(2 * var(--px-cell) + var(--space-6)); }
.band.px-bottom:not(.sector, .testimonial-strip) { padding-bottom: calc(2 * var(--px-cell) + var(--space-6)); }

/* 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: 350;
  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: 350; 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 { border-left-color: var(--t-blue); }
: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; }
.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; }
}

/* Roadmap (TW-39): the obligation blocks, four across, each ending with what
   Trancher does for that step. */
.roadmap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.roadmap .obligation p { max-width: none; }
.roadmap .obligation__num { color: var(--t-blue); }
.roadmap__support { margin-top: auto; padding-top: var(--space-3); color: var(--ink-strong); }
.roadmap__support .eyebrow { display: block; margin-bottom: var(--space-1); }
@media (max-width: 960px) { .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .roadmap { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Sector pages (TW-20): the Bureau's Accountants master layout of 15 October
   2026 (TRANCHER_Website_FINAL_LAYOUTS.pdf, page 4) and the twelve category
   headers. Every section of the sector template carries .sector
   (tools/partials/sector.html), so nothing here reaches other pages.
   Where the layout breaks an accessibility rule, the rule wins: the small
   red eyebrow stays cyan and "View article" is the darker label red.
   ========================================================================== */

/* Hero: midnight on the left with squares at its corners, the category photo
   filling the right half, edge to edge, with translucent squares over it. */
.hero--sector { padding-block: 168px 160px; }
.hero--sector::before {
  content: "";
  position: absolute;
  inset: 0 49% 0 0;
  z-index: 0;
  background:
    url("../img/pixels/sector-navy-tl.svg") left top / 500px 200px no-repeat,
    url("../img/pixels/sector-navy-tr.svg") right top / 88px 186px no-repeat,
    url("../img/pixels/sector-navy-ml.svg") left 0 top 56% / 100px 100px no-repeat,
    url("../img/pixels/sector-navy-bl.svg") left bottom / 503px 100px no-repeat,
    url("../img/pixels/sector-navy-br.svg") right bottom / 101px 100px no-repeat;
  pointer-events: none;
}
.hero--sector .hero__photo { left: 51%; overflow: hidden; }
.hero--sector .hero__photo img { object-position: var(--photo-x, 50%) var(--photo-y, 50%); }
.hero--sector .hero__photo--pixels::after { background: url("../img/pixels/sector-photo.svg") left top / cover no-repeat; }
.hero--sector .hero__text { max-width: 575px; }
.hero--sector .hero__text .body-lead { max-width: 520px; }
.hero--sector .eyebrow { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.hero--sector .hero__text .body-lead { font-size: 21px; line-height: 27px; }
.hero--sector .hero__actions { margin-top: var(--space-4); }
.hero--sector .specialist-link { margin-top: var(--space-3); font-size: 18px; line-height: 26px; }
/* The specialist line is one link: the question in cyan, the rest muted. */
.sector .specialist-link a:not(.btn) { font-weight: 400; color: var(--ink-on-navy-muted); text-decoration: none; }
.sector .specialist-link a span { color: var(--t-light-blue); }
.sector .specialist-link a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
/* On the electric blue, cyan is 3.8:1: the line stays white and underlined. */
.closing-cta.sector .specialist-link a:not(.btn), .closing-cta.sector .specialist-link a span { color: #ffffff; }
.closing-cta.sector .specialist-link a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }

/* Each header crops its photo its own way (measured off the headers PDF):
   the point to keep in view and, on wide screens, how far to zoom in. */
.hero__photo--accountants { --photo-x: 61%; --photo-zoom: 1.05; }
.hero__photo--conveyancers { --photo-x: 51%; --photo-zoom: 1.05; }
.hero__photo--tcsp { --photo-x: 31%; --photo-y: 100%; --photo-zoom: 1.05; }
.hero__photo--vasp { --photo-x: 35%; --photo-y: 67%; --photo-zoom: 1.1; }
.hero__photo--lawyers { --photo-x: 66%; --photo-y: 26%; --photo-zoom: 1.6; }
.hero__photo--real-estate { --photo-x: 86%; --photo-y: 36%; --photo-zoom: 1.4; }
.hero__photo--precious-metals { --photo-x: 81%; --photo-y: 74%; --photo-zoom: 1.2; }
.hero__photo--financial-institutions { --photo-x: 72%; --photo-y: 100%; --photo-zoom: 1.25; }
.hero__photo--superannuation { --photo-x: 50%; }
.hero__photo--remittance { --photo-x: 47%; }
.hero__photo--digital-currency { --photo-x: 47%; --photo-y: 58%; --photo-zoom: 1.1; }
.hero__photo--gambling { --photo-x: 43%; --photo-y: 67%; --photo-zoom: 1.05; }
.hero__photo--pubs-and-clubs { --photo-x: 50%; }
.hero__photo--bullion { --photo-x: 60%; --photo-y: 44%; --photo-zoom: 1.35; }
@media (min-width: 961px) {
  /* Every header is the same height (932px at 1440); short copy sits centred. */
  .hero--sector { display: flex; flex-direction: column; justify-content: center; min-height: 932px; }
  .hero--sector .hero__photo img { transform: scale(var(--photo-zoom, 1)); transform-origin: var(--photo-x, 50%) var(--photo-y, 50%); }
}
/* The square half-way down the left edge only clears the text on wide screens. */
@media (max-width: 1359px) {
  .hero--sector::before {
    background:
      url("../img/pixels/sector-navy-tl.svg") left top / 500px 200px no-repeat,
      url("../img/pixels/sector-navy-tr.svg") right top / 88px 186px no-repeat,
      url("../img/pixels/sector-navy-bl.svg") left bottom / 503px 100px no-repeat,
      url("../img/pixels/sector-navy-br.svg") right bottom / 101px 100px no-repeat;
  }
}
@media (max-width: 960px) {
  .hero--sector { padding-block: 0 var(--space-8); }
  .hero--sector::before { display: none; }
  .hero--sector .hero__photo { left: auto; }
}

/* Am I captured? */
.sector .captured__intro h2 { font-size: clamp(36px, 3.75vw, 54px); }
.sector .captured__list-wrap > .strong { font-size: 20px; line-height: 28px; }
.sector .captured-list li { font-size: 21px; line-height: 28px; }
.sector .obligation h3 { max-width: none; }
.sector .obligation p { font-size: 18px; line-height: 24px; }

/* Your obligations: squares down both sides as well as top and bottom; the
   introduction runs the width of the three columns, in T-Grey. */
.sector--obligations h2,
.sector--faq h2 { font-size: var(--display-3-size); line-height: var(--display-3-line); }
.band--navy.sector .section-head .body { max-width: 1070px; font-size: 20px; line-height: 27px; color: var(--t-grey); }
@media (min-width: 1300px) {
  .px-sides.band--navy, .px-sides.band--grey {
    background-image: url("../img/pixels/side-navy-left.svg"), url("../img/pixels/side-navy-right.svg");
    background-repeat: repeat-y;
    background-position: left 0 top 256px, right 0 top 128px;
    background-size: var(--px-cell) auto;
  }
  .px-sides.band--grey { background-image: url("../img/pixels/side-grey-left.svg"), url("../img/pixels/side-grey-right.svg"); }
}

/* How Trancher helps: midnight icons, the column rules run unbroken through
   both rows. */
.sector .section-head .body-lead { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.2; max-width: 1100px; }
.sector .capability-grid { row-gap: 0; }
.sector .capability-grid .capability-card { padding-block: 4px var(--space-8); }
.sector .capability-grid .capability-card svg { width: 56px; height: 56px; flex: none; color: var(--t-midnight); }
@media (max-width: 960px) {
  .sector .capability-grid { row-gap: var(--space-5); }
  .sector .capability-grid .capability-card { padding-block: 0; }
}

/* Three clear paths: numbered red discs (white figures at 40px, 3.7:1, large
   text), the first path's button filled. */
.path-card__num {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--t-red);
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  font-weight: 400;
  color: #ffffff;
}
.sector .two-paths__cards .path-card h3 { color: var(--t-blue-special); }
.sector .path-card .body { font-size: 20px; line-height: 28px; }
.sector .path-card__price { font-size: 20px; line-height: 28px; font-weight: 400; color: var(--t-midnight); }
.sector .two-paths__cards .btn { border-radius: 12px; }
/* The first path's button is T-Blue Special in the layout (white text 6.1:1). */
.sector .two-paths__cards .btn--primary { background: var(--t-blue-special); border-color: var(--t-blue-special); }
.sector .two-paths__cards .btn--primary:hover { background: #003bd1; border-color: #003bd1; }

/* How long does it take? */
.sector .timeline__when { color: var(--t-grey); }
.sector .timeline__what { max-width: 190px; font-size: 17px; line-height: 23px; }
.sector--timeline .section-head .body-lead { font-size: 21px; line-height: 28px; color: var(--ink-on-navy-muted); }

/* Articles: the sector tag, the title, a teaser and "View article". */
.sector .article-card__body { gap: var(--space-3); padding: 24px 26px 28px; }
.sector .article-card h3 { font-size: 27px; line-height: 31px; }
.sector .article-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 17px; line-height: 23px; color: var(--t-midnight); }
.sector .article-card__more { margin-top: auto; padding-top: var(--space-3); font-weight: 500; color: var(--label-red); }
.sector .article-card:hover .article-card__more { text-decoration: underline; text-underline-offset: 3px; }

/* Closing call to action: white copy, the larger lead of the final layout. */
/* The buttons sit just right of centre, not against the right edge. */
.closing-cta.sector .closing-cta__inner { justify-content: flex-start; column-gap: 96px; }
.closing-cta.sector .closing-cta__text { flex: 0 1 560px; }
.closing-cta.sector .body-lead { max-width: 500px; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.2; }

/* Band spacing, measured off the layout at 1440 (band edge to first and last
   line of text); scales down with the viewport like the shared padding. */
.sector--captured { padding-block: clamp(64px, 8.2vw, 118px) clamp(64px, 7.7vw, 111px); }
.sector--obligations { padding-block: clamp(96px, 15vw, 216px) clamp(80px, 11.6vw, 167px); }
.sector--helps { padding-block: clamp(80px, 11.4vw, 164px) clamp(80px, 11.25vw, 162px); }
.sector--paths { padding-block: clamp(96px, 13.5vw, 195px) clamp(80px, 11.1vw, 160px); }
.sector--timeline { padding-block: clamp(80px, 10.8vw, 156px) clamp(80px, 11.2vw, 161px); }
.sector--resources { padding-block: clamp(80px, 12.4vw, 178px) clamp(80px, 10.1vw, 146px); }
.sector--faq { padding-block: clamp(72px, 9.9vw, 142px) clamp(72px, 9.9vw, 143px); }
.closing-cta.sector--cta { padding-block: clamp(96px, 14vw, 201px) clamp(80px, 9.4vw, 136px); }
@media (min-width: 961px) {
  /* The column rules run past the text: 28px under the last capability row,
     56px under the path buttons. */
  .sector .capability-grid .capability-card:nth-child(n+4) { padding-bottom: 28px; }
  .sector .two-paths__cards { margin-top: var(--space-4); }
  .sector .two-paths__cards .path-card { padding-bottom: 56px; }
}
.sector .article-card__body { gap: var(--space-2); padding-bottom: 22px; }
.sector .article-card__more { padding-top: var(--space-2); }
/* Inner spacing, from the layout: a wider gap under the section intros, the
   timeline markers further from the intro, taller closed FAQ rows. */
.sector--helps .section-head { gap: var(--space-5); }
.sector--helps .capability-grid { margin-top: var(--space-3); }
.sector--timeline .timeline { margin-top: var(--space-4); }
.sector--faq .accordion summary { min-height: 68px; }
.sector--faq .accordion__a { padding-bottom: var(--space-4); }
@media (min-width: 961px) { .sector--obligations .obligations { row-gap: calc(var(--space-8) + 14px); } }

/* ==========================================================================
   TW-21: Home, Platform and Pricing, matched to the Bureau's final layouts
   (TRANCHER_Website_FINAL_LAYOUTS.pdf, 15 October 2026), measured at 1440
   wide. Scoped to those three pages; the other pages keep the TW-11 look
   above until they are matched too.

   Federico's decision (TW-21): follow the final layouts wherever they differ
   from the build, except where they break an accessibility rule. There this
   block follows the rule, as above: no lime text, small labels stay cyan on
   midnight, the quote on the blue band stays white, controls stay 48px.
   ========================================================================== */

/* Display type in the quote, the step numbers and price units at the
   site-wide heading weight. */
:is(body:has(.hero--home), body[data-section="platform"], body[data-section="pricing"]) :is(.band--blue .testimonial__quote p, .way__num, .price__unit) { font-weight: 350; }

/* Leads and body copy: larger and tighter, as drawn. */
:is(body:has(.hero--home), body[data-section="platform"], body[data-section="pricing"]) :is(.hero, .section-head, .closing-cta) .body-lead { font-size: clamp(21px, 2.15vw, 31px); line-height: 1.16; }
:is(body:has(.hero--home), body[data-section="platform"], body[data-section="pricing"]) .hero--home .body-lead { font-size: clamp(20px, 1.85vw, 27px); line-height: 1.2; }
:is(body:has(.hero--home), body[data-section="platform"], body[data-section="pricing"]) :is(.calc-teaser__text .body, .starter-kit__text .body, .security-copy .body) { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.17; }
:is(body:has(.hero--home), body[data-section="platform"], body[data-section="pricing"]) .closing-cta__text { max-width: 560px; }
:is(body:has(.hero--home), body[data-section="platform"], body[data-section="pricing"]) .closing-cta__text p { max-width: 500px; }
/* Section leads run as wide as drawn (about 1020px at 1440). */
:is(body:has(.hero--home), body[data-section="platform"], body[data-section="pricing"]) .section-head .body-lead { max-width: 1020px; }

/* Headings break where the line runs out, as in the layouts, rather than
   balanced. Phones keep the balanced wrap. */
@media (min-width: 961px) {
  :is(body:has(.hero--home), body[data-section="platform"], body[data-section="pricing"]) :is(h1, h2) { text-wrap: wrap; }
}

/* The faint dot grid: larger dots, wider apart. */
:is(body:has(.hero--home), body[data-section="platform"], body[data-section="pricing"]) .dots > .container::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 2.8px, transparent 3.1px);
  background-size: 27px 27px;
}
:is(body:has(.hero--home), body[data-section="platform"], body[data-section="pricing"]) :is(.band--grey, .hero--light).dots > .container::before {
  background-image: radial-gradient(rgba(15, 36, 61, 0.06) 2.8px, transparent 3.1px);
}

/* Home hero: a wider text column for the larger lead. */
body:has(.hero--home) .hero--home .hero__text, body:has(.hero--home) .hero--home .hero__text .body-lead { max-width: 640px; }

/* The quote on the blue band runs wider, two lines at 1440. */
:is(body:has(.hero--home), body[data-section="pricing"]) .band--blue .testimonial__quote p { max-width: 1040px; }

/* Home, phones: "Who we help" and its link sit on the left once stacked. */
@media (max-width: 640px) { body:has(.hero--home) .section-head--split { align-items: flex-start; } }

/* Home: three ways to work. */
body:has(.hero--home) .section-head h2 { max-width: 780px; }
body:has(.hero--home) .way p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.28; }
body:has(.hero--home) .way .way__price { font-weight: 400; }

/* Home: Confidence in speed, a step smaller than the other section heads. */
body:has(.hero--home) .band:has(.capability-grid) .section-head h2 { max-width: 700px; }
body:has(.hero--home) .band:has(.timeline) h2 { font-size: var(--display-3-size); line-height: var(--display-3-line); }
body:has(.hero--home) .band:has(.timeline) .body-lead { max-width: 760px; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.15; }

/* Capability grid (Home, Platform): midnight icons, and column rules that run
   unbroken through both rows. The icons are decorative; each card's text
   carries the meaning. */
:is(body:has(.hero--home), body[data-section="platform"]) .capability-grid { row-gap: 0; }
:is(body:has(.hero--home), body[data-section="platform"]) .capability-grid .capability-card { gap: var(--space-6); padding-bottom: 72px; }
:is(body:has(.hero--home), body[data-section="platform"]) .capability-grid .capability-card:nth-last-child(-n+3) { padding-bottom: 4px; }
:is(body:has(.hero--home), body[data-section="platform"]) .band--blue .capability-grid .capability-card svg { flex: none; width: 56px; height: 56px; color: var(--t-midnight); }
@media (max-width: 960px) {
  :is(body:has(.hero--home), body[data-section="platform"]) .capability-grid { row-gap: var(--space-5); }
  :is(body:has(.hero--home), body[data-section="platform"]) .capability-grid .capability-card,
  :is(body:has(.hero--home), body[data-section="platform"]) .capability-grid .capability-card:nth-last-child(-n+3) { padding-bottom: 0; }
  :is(body:has(.hero--home), body[data-section="platform"]) .band--blue .capability-grid .capability-card svg { width: 44px; height: 44px; }
}

/* Platform hero: white squares on T-Grey, a taller band, and the laptop
   large, running off the right edge with a soft reflection. */
body[data-section="platform"] .hero--light { --px-strip: url("../img/pixels/edge-white.svg"); padding-block: clamp(96px, 11vw, 160px); }
body[data-section="platform"] .hero--light .hero__text { max-width: 520px; }
body[data-section="platform"] .hero--light .hero__text h1 { max-width: 520px; }
@media (min-width: 961px) {
  body[data-section="platform"] .hero__split { position: static; }
  body[data-section="platform"] .hero__media--laptop {
    position: absolute;
    top: 50%;
    left: 51.4%;
    width: 64vw;
    margin: 0;
    transform: translateY(-50%);
  }
  /* The image has 58px of transparent space under the laptop (of 1400 wide,
     shown at 64vw); the offset pulls the reflection up past both copies of it. */
  body[data-section="platform"] .hero__media--laptop img { -webkit-box-reflect: below calc(-2 * 58 / 1400 * 64vw) linear-gradient(transparent 80%, rgba(255, 255, 255, 0.28)); }
}

/* Platform: starter kit. Regular-weight card title, button sized to its label. */
body[data-section="platform"] .starter-kit__title { font-family: var(--font-sans); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.2; font-weight: 400; }
body[data-section="platform"] .starter-kit__action .btn { width: auto; }
body[data-section="platform"] .split-ruled > :last-child { padding-left: var(--space-9); }
body[data-section="platform"] .band--navy .split-ruled > .starter-kit__card { border-left: 1px solid rgba(247, 247, 247, 0.6); }
@media (max-width: 960px) { body[data-section="platform"] .band--navy .split-ruled > .starter-kit__card { padding-left: 0; border-left: 0; border-top: 1px solid rgba(247, 247, 247, 0.4); } }
body[data-section="platform"] .media-pair { gap: 34px; }
body[data-section="platform"] .media-pair img { height: auto; aspect-ratio: 3 / 2; max-height: none; object-position: left top; }

/* Platform: security. The certification logos large, ISO over IEC over FIPS,
   cut from the one ISO/IEC file. */
body[data-section="platform"] .cert-logos { gap: var(--space-5); }
body[data-section="platform"] .cert-logos img { width: 212px; }
body[data-section="platform"] .cert-logos :is(.cert-logos__iso, .cert-logos__iec) { height: 212px; object-fit: cover; }
body[data-section="platform"] .cert-logos .cert-logos__iso { object-position: left center; clip-path: inset(0 2.5% 0 0); }
body[data-section="platform"] .cert-logos .cert-logos__iec { object-position: right center; }
@media (max-width: 960px) { body[data-section="platform"] .cert-logos img { width: 160px; } body[data-section="platform"] .cert-logos :is(.cert-logos__iso, .cert-logos__iec) { height: 160px; } }

/* Pricing hero: the portrait across the whole band, the text over its pale
   backdrop on the left. */
body[data-section="pricing"] .hero--photo .hero__text { max-width: 470px; }
@media (min-width: 961px) {
  body[data-section="pricing"] .hero--photo { padding-block: clamp(96px, 12vw, 172px); }
  body[data-section="pricing"] .hero__photo { inset: 0; }
  body[data-section="pricing"] .hero__photo img { object-position: right top; }
}

/* Pricing: plans. Seats sit tight under the name; Solo and Practice take
   outline buttons, Custom the filled one. */
body[data-section="pricing"] .plans .plan-card h2 { font-size: clamp(30px, 2.85vw, 41px); line-height: 1.1; }
body[data-section="pricing"] .plans .plan-card__seats { margin-top: calc(-1 * var(--space-2)); font-size: clamp(17px, 1.4vw, 20px); }
body[data-section="pricing"] .plans .price__unit { font-size: clamp(16px, 1.3vw, 18px); }
body[data-section="pricing"] .pricing-table__note { max-width: none; font-size: 13px; line-height: 18px; }
body[data-section="pricing"] .pricing-extras__card h2 { font-size: clamp(24px, 2.15vw, 31px); line-height: 1.15; }
body[data-section="pricing"] .pricing-extras__action .btn { width: 100%; }

/* Pricing questions: a smaller head, larger questions and answers. */
body[data-section="pricing"] .band:has(.accordion) h2 { font-size: var(--display-3-size); line-height: var(--display-3-line); }
body[data-section="pricing"] .accordion { border-top: 0; }
body[data-section="pricing"] .accordion__q { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.25; }
body[data-section="pricing"] .accordion__a, body[data-section="pricing"] .accordion__a p { max-width: none; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.35; }

/* ==========================================================================
   TW-21: site-wide container, header and footer, from the final layouts.
   ========================================================================== */

/* Content 1150px wide: the layouts put every section edge at 145px from
   each side at 1440. */
:root { --container-max: 1150px; }

/* Header: a larger wordmark, nav at 16px, no dropdown arrows (the buttons
   still open their panels and report aria-expanded). */
.site-header .brand svg { width: 26px; height: 27px; }
.site-header .brand__word { font-size: 28px; }
.nav-main__item, .site-header__signin { font-size: 16px; }
.nav-main__list { gap: 30px; }
.site-header__actions { gap: var(--space-8); }
@media (max-width: 1200px) {
  .nav-main__list { gap: 22px; }
  .site-header__actions { gap: var(--space-5); }
}

/* Footer: a large wordmark, four columns of equal width (the Bureau's
   Pricing column was dropped at Aaron's request, TW-44), headings without
   tracking, and the legal line on one row. Links keep their 48px height. */
.site-footer { padding-block: clamp(64px, 7.5vw, 108px) var(--space-6); }
.site-footer__top { gap: 0; }
.site-footer__brand { flex: 0 0 360px; gap: var(--space-5); }
.site-footer .brand svg { width: 32px; height: 34px; }
.site-footer .brand__word { font-size: 37px; }
.site-footer__brand > p { max-width: 230px; font-size: 16px; line-height: 21px; color: #c3c8cf; }
.site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-4); }
.site-footer__heading { font-size: 13px; letter-spacing: 0; }
.site-footer__cols a { font-size: 16px; }
.site-footer__legal { margin-top: var(--space-8); }
/* The layouts run the company line on the same row. With the "Wording
   pending sign-off" flag (kept until the wording is signed off) the row is
   wider than the container, so the company line stays on its own row. */
@media (min-width: 961px) {
  .site-footer__cols { flex: 0 1 745px; margin-left: auto; }
  .site-footer__legal-links a, .site-footer__legal p { font-size: 16px; }
}
@media (max-width: 960px) {
  .site-footer__top { gap: 40px; }
  .site-footer__brand { flex-basis: auto; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
}