/* fullstyle.css - the homepage design system, extended site-wide (WH job 0808).
   Blocks 1-3 are carried from the homepage stylesheet verbatim; the interior
   layer at the end is the only new CSS. Interior pages link ONLY this file. */

:root {
  --black: #000;
  --ink: #0a0a0a;
  --paper: #f1f0eb;
  --white: #fff;
  --gray-1: #d7d6d1;
  --gray-2: #a7a7a2;
  /* contrast pass: was #72726e = 4.348:1 on black and 4.099:1 on --ink,
     under the 4.5 small-text floor. It carried 1,112 text runs across 46 interior
     pages (sitewide sweep, both widths) - .bloglist__meta, .num, .opt and bare
     elements. #7a7a76 = 4.873:1 on black, 4.594:1 on --ink: clears both grounds,
     six steps lighter, hue relationship kept. The homepage links no stylesheet,
     so this token cannot reach it. */
  --gray-3: #7a7a76;
  --gray-4: #252525;
  --line: #3b3b3b;
  --soft-line: rgba(255, 255, 255, 0.16);
  --pad: clamp(24px, 3.2vw, 64px);
  --sans: Arial, Helvetica, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --radius: 2px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  color: var(--paper);
  background: var(--black);
  font-family: var(--sans);
  line-height: 1.4;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 0.96;
}

.eyebrow,
.layout-tag,
.kicker,
.field-label,
.plan-label,
.frame-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.layout-tag {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid currentColor;
}

.layout-tag b {
  color: var(--gray-2);
}

.composition {
  position: relative;
  overflow: clip;
  background: var(--black);
  border-bottom: 12px solid var(--paper);
}

.display {
  max-width: 14ch;
  margin-bottom: 26px;
  font-size: clamp(4rem, 7.5vw, 8.7rem);
  font-weight: 700;
  letter-spacing: -0.075em;
}

/* .display is worn by BOTH the hero wordmark and section H2s, so a
   section head rendered at the wordmark's exact 96px. The hero keeps its size -
   that is the drama layer his words allow. A section H2 comes down to the band
   that reads "semi bigger" against 16px body, and no lower. */
h2.display { font-size: clamp(2.2rem, 4vw, 4.2rem); }
.section-title {
  max-width: 15ch;
  margin-bottom: 28px;
  font-size: var(--h-sec);
  letter-spacing: -0.055em;
}

.lede {
  max-width: 660px;
  color: var(--gray-1);
  font-size: clamp(1.15rem, 1.5vw, 1.55rem);
}

.muted {
  color: var(--gray-2);
}

.rule {
  height: 1px;
  margin: 30px 0;
  background: var(--soft-line);
}

.button,
.text-link {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--paper);
  color: var(--paper);
  background: transparent;
  font-weight: 700;
  text-decoration: none;
}

.button {
  padding: 0 20px;
}

.button:hover,
.button:focus-visible {
  color: var(--black);
  background: var(--paper);
}

.button.light {
  color: var(--black);
  border-color: var(--black);
  background: var(--paper);
}

.button.light:hover,
.button.light:focus-visible {
  color: var(--paper);
  background: var(--black);
}

.text-link {
  min-height: auto;
  justify-content: flex-start;
  border: 0;
  border-bottom: 1px solid currentColor;
}

.phone-line {
  display: grid;
  gap: 5px;
  padding-top: 18px;
  border-top: 1px solid var(--soft-line);
}

.phone-line strong {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.phone-line a {
  text-decoration: none;
}

.phone-line a:hover,
.phone-line a:focus-visible {
  text-decoration: underline;
}

.collapse-note {
  margin: 0;
  padding: 12px 16px;
  color: var(--gray-2);
  border: 1px solid var(--soft-line);
  font-size: 0.74rem;
}

.media-frame {
  position: relative;
  display: grid;
  min-height: 220px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--gray-3);
  background:
    linear-gradient(135deg, transparent 49.7%, var(--line) 50%, transparent 50.3%),
    linear-gradient(45deg, transparent 49.7%, var(--line) 50%, transparent 50.3%),
    var(--ink);
}

.media-frame::after {
  position: absolute;
  inset: 14px;
  border: 1px solid var(--soft-line);
  content: "";
  pointer-events: none;
}

.frame-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  padding: 22px;
  text-align: center;
}

.frame-copy strong {
  font-size: 1.3rem;
}

.proof-line {
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--soft-line);
  border-bottom: 1px solid var(--soft-line);
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  font-weight: 700;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.plan {
  position: relative;
  display: flex;
  min-height: 280px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--ink);
}

.plan.featured {
  color: var(--black);
  background: var(--paper);
  border-color: var(--paper);
}

.plan h2,
.plan h3 {
  max-width: 9ch;
  min-height: 2em;
  margin: 18px 0 30px;
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.plan .price {
  margin-top: auto;
  font-size: clamp(2rem, 3vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.06em;
}

.plan .term,
.plan .build {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
}

.badge {
  align-self: flex-start;
  padding: 5px 7px;
  color: var(--black);
  background: var(--paper);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.featured .badge {
  color: var(--paper);
  background: var(--black);
}

.audit-form {
  display: grid;
  gap: 13px;
}

.audit-form label {
  display: grid;
  gap: 6px;
}

.audit-form input,
.audit-form select,
.audit-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  color: var(--paper);
  border: 1px solid var(--gray-3);
  border-radius: 0;
  outline: 0;
  background: var(--black);
}

.audit-form textarea {
  min-height: 88px;
  resize: vertical;
}

.audit-form input:focus,
.audit-form select:focus,
.audit-form textarea:focus {
  border-color: var(--paper);
  box-shadow: 0 0 0 1px var(--paper);
}

.audit-form .button {
  width: 100%;
}

.form-note,
.form-status {
  margin: 0;
  color: var(--gray-2);
  font-size: 0.76rem;
}

.form-status {
  min-height: 1.2em;
  color: var(--paper);
}

.disclosure {
  margin: 0;
  color: var(--gray-2);
  font-size: 0.75rem;
}

/* Layout S1 */

.s1 {
  display: grid;
  grid-template-columns: minmax(205px, 15vw) minmax(0, 1fr) minmax(300px, 23vw);
}

.s1-left,
.s1-right {
  align-self: start;
  position: sticky;
  top: 0;
  height: 100vh;
}

.s1-left {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 26px 24px;
  border-right: 1px solid var(--soft-line);
}

.s1-brand {
  font-family: var(--serif);
  font-size: 1.25rem;
}

.s1-nav {
  display: grid;
  margin-top: auto;
}

.s1-nav a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 12px 0;
  color: var(--paper); 
  border-top: 1px solid var(--paper); 
  font-size: 0.8rem;
  text-decoration: none;
}

.s1-nav a:hover,
.s1-nav a:focus-visible {
  color: var(--paper);
}

.s1-center {
  min-width: 0;
}

.s1-chapter {
  padding: clamp(44px, 5vw, 84px) var(--pad);
  border-bottom: 1px solid var(--soft-line);
}

.s1-chapter.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.s1-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.s1-work-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 34px;
  align-items: start;
}

.s1-work-list {
  display: grid;
}

.s1-work-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--soft-line);
}

.s1-work-item span {
  color: var(--gray-3);
}

.s1-work-item h2,
.s1-work-item h3 {
  margin: 0 0 7px;
  font-size: 1.4rem;
  line-height: 0.96;
}

.s1-right {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 20px;
  padding: 26px;
  overflow: auto;
  border-left: 1px solid var(--soft-line);
}

.s1-audit {
  padding: 20px;
  border: 1px solid var(--paper);
}

.s1-audit h2 {
  margin-bottom: 8px;
  font-size: 1.8rem;
}

.s1-mobile-phone {
  display: none;
}

/* Layout S2 */

.s2 {
}

.s2-label {
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 24px;
}

.s2-grid {
  display: grid;
  grid-template-columns: 55% 45%;
}

.s2-story {
  min-width: 0;
  border-right: 1px solid var(--soft-line);
}

.s2-chapter {
  display: flex;
  flex-direction: column;
  padding: clamp(52px, 6vw, 96px) clamp(32px, 6vw, 100px);
  border-bottom: 1px solid var(--soft-line);
}

.s2-chapter .plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.s2-pane-wrap {
  position: relative;
}

.s2-pane {
  position: sticky;
  top: 0;
  display: grid;
  height: 100vh;
  grid-template-rows: minmax(210px, 0.8fr) 1.2fr;
  background: var(--paper);
  color: var(--black);
}

.s2-aperture {
  position: relative;
  margin: 28px 28px 0;
  overflow: hidden;
  clip-path: polygon(0 12%, 16% 12%, 16% 0, 100% 0, 100% 100%, 0 100%);
}

.s2-aperture .media-frame {
  height: 100%;
  min-height: 0;
  color: var(--paper);
  border: 0;
}

.s2-proof {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.s2-proof h2 {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.3vw, 4rem);
}

.s2-proof .phone-line {
  border-color: rgba(0, 0, 0, 0.25);
}

.s2-proof .muted,
.s2-pane .form-note {
  color: #4d4d49;
}

.s2-pane .audit-form input,
.s2-pane .audit-form select,
.s2-pane .audit-form textarea {
  color: var(--black);
  border-color: #73736e;
  background: transparent;
}

.s2-pane .audit-form input:focus,
.s2-pane .audit-form select:focus,
.s2-pane .audit-form textarea:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 1px var(--black);
}

.s2-pane .form-status {
  color: var(--black);
}

.s2-note {
  margin-top: 28px;
}

/* Layout S3 */

.s3 {
  padding: 0;
}

.s3-head {
  display: grid;
  min-height: 82vh;
  grid-template-columns: minmax(170px, 15vw) 1fr;
  border-bottom: 1px solid var(--soft-line);
}

.s3-margin-label {
  display: flex;
  align-items: flex-end;
  padding: 30px;
  border-right: 1px solid var(--soft-line);
}

.s3-margin-label span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.s3-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px var(--pad);
}

.s3-hero-copy .display {
  max-width: 16ch;
}

.bento {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr 0.9fr 1.1fr;
  grid-auto-rows: minmax(230px, auto);
}

.bento-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 30px;
  border-right: 1px solid var(--soft-line);
  border-bottom: 1px solid var(--soft-line);
  background: var(--black);
}

.bento-tile.light {
  color: var(--black);
  background: var(--paper);
}

.bento-tile.wide {
  grid-column: span 2;
}

.bento-tile.tall {
  grid-row: span 2;
}

.bento-tile h2,
.bento-tile h3 {
  max-width: 12ch;
  margin-bottom: 24px;
  font-size: var(--h-sub);
}

.bento-tile p {
  max-width: 42ch;
}

.bento-tile .media-frame {
  width: 100%;
  min-height: 100%;
}

.film-strip {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
}

.film-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--soft-line);
}

.marquee-toggle {
  padding: 7px 10px;
  color: var(--paper);
  border: 1px solid var(--gray-3);
  background: transparent;
  font-size: 0.72rem;
  font-weight: 700;
}

.marquee-viewport {
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: stripMove 30s linear infinite;
}

.marquee-track.paused {
  animation-play-state: paused;
}

.film-card {
  display: grid;
  width: 310px;
  min-height: 190px;
  grid-template-rows: 1fr auto;
  border-right: 1px solid var(--soft-line);
}

.film-card .film-frame {
  position: relative;
  margin: 14px;
  border: 1px solid var(--gray-3);
  background:
    linear-gradient(115deg, transparent 48%, var(--line) 49%, transparent 50%),
    var(--ink);
}

.film-card .film-frame::before,
.film-card .film-frame::after {
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 5px;
  background: repeating-linear-gradient(
    to bottom,
    var(--paper) 0 5px,
    transparent 5px 12px
  );
  content: "";
}

.film-card .film-frame::before {
  left: -9px;
}

.film-card .film-frame::after {
  right: -9px;
}

.film-card p {
  margin: 0;
  padding: 14px;
  font-weight: 700;
}

@keyframes stripMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.s3-pricing {
  padding: 110px var(--pad);
}

.s3-pricing-head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 0.45fr);
  gap: 40px;
  margin-bottom: 52px;
  align-items: end;
}

.s3-audit-band {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 50px;
  padding: 70px var(--pad);
  color: var(--black);
  background: var(--paper);
}

.s3-audit-band h2 {
  max-width: 9ch;
  font-size: var(--h-sec);
}

.s3-footer-line {
  display: grid;
  gap: 18px;
  padding: 26px var(--pad);
}

/* Layout S4 */

.s4 {
  font-family: var(--serif);
}

.s4-shell {
  display: grid;
  grid-template-columns: minmax(110px, 10vw) minmax(0, 1fr) 62px;
}

.s4-gutter {
  padding: 30px 18px;
  border-right: 1px solid var(--soft-line);
}

.s4-gutter .layout-tag {
  font-family: var(--sans);
  writing-mode: vertical-rl;
}

.s4-pages {
  min-width: 0;
}

.ledger-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.22fr) minmax(0, 0.92fr) minmax(260px, 0.58fr);
  border-bottom: 1px solid var(--soft-line);
}

.ledger-number {
  align-self: start;
  margin: 0;
  padding: 50px 0 0 24px;
  color: var(--gray-4);
  font-family: var(--sans);
  font-size: var(--h-sec);
  font-weight: 700;
  letter-spacing: -0.1em;
  line-height: 0.75;
}

.ledger-main,
.ledger-side {
  padding: clamp(60px, 7vw, 120px) clamp(28px, 4vw, 68px);
}

.ledger-main {
  border-left: 1px solid var(--soft-line);
}

.ledger-side {
  align-self: stretch;
  border-left: 1px solid var(--soft-line);
}

.s4-display {
  max-width: 11ch;
  margin-bottom: 34px;
  font-size: clamp(2.6rem, 5vw, 5.4rem);
  letter-spacing: -0.065em;
}

.s4 .lede,
.s4 .proof-line,
.s4 .plan,
.s4 .audit-form,
.s4 .collapse-note,
.s4 .disclosure,
.s4 .phone-line,
.s4 .kicker {
  font-family: var(--sans);
}

.s4-aperture {
  width: calc(100% + clamp(28px, 4vw, 68px));
  margin: 40px calc(clamp(28px, 4vw, 68px) * -1) 0 0;
  clip-path: polygon(0 0, 78% 0, 78% 11%, 100% 11%, 100% 100%, 0 100%);
}

.s4-aperture .media-frame {
  aspect-ratio: 16 / 9;
}

.s4-side-quote {
  position: sticky;
  top: 80px;
}

.s4-side-quote blockquote {
  margin: 0;
  font-size: var(--h-sub);
  line-height: 1.08;
}

.s4-plans {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--soft-line);
}

.s4-plan {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 25px 0;
  border-bottom: 1px solid var(--soft-line);
  font-family: var(--sans);
}

.s4-plan h2,
.s4-plan h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 0.96;
}

.s4-plan strong {
  font-size: 1.35rem;
}

.s4-plan small {
  display: block;
  margin-top: 5px;
  color: var(--gray-2);
}

.s4-plan.featured {
  padding-right: 18px;
  padding-left: 18px;
  color: var(--black);
  background: var(--paper);
}

.s4-plan.featured small {
  color: #454541;
}

.s4-audit {
  max-width: 610px;
  padding: 32px;
  border: 1px solid var(--paper);
  font-family: var(--sans);
}

.s4-edge {
  position: relative;
  border-left: 1px solid var(--soft-line);
}

.audit-tab {
  position: sticky;
  top: 22vh;
  display: flex;
  width: 100%;
  min-height: 390px;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  color: var(--black);
  border: 0;
  background: var(--paper);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
}

.s4-footer {
  display: grid;
  gap: 20px;
  padding: 36px var(--pad);
  border-top: 1px solid var(--soft-line);
  font-family: var(--sans);
}

/* Responsive behavior */

@media (max-width: 1180px) {
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s1 {
    grid-template-columns: 180px minmax(0, 1fr) 300px;
  }

  .s1-left,
  .s1-right {
    padding: 20px 16px;
  }

  .s1-work-grid {
    grid-template-columns: 1fr;
  }

  .s2-proof h2 {
    font-size: 2rem;
  }

  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ledger-row {
    grid-template-columns: 105px minmax(0, 1fr) minmax(240px, 0.55fr);
  }
}

@media (max-width: 900px) {
  .display {
    font-size: clamp(3.4rem, 14vw, 6rem);
  }

  .composition {
    overflow: hidden;
  }

  .s1 {
    display: block;
  }

  .s1-left,
  .s1-right {
    position: static;
    width: auto;
    height: auto;
    border: 0;
  }

  .s1-left {
    padding: 22px;
    border-bottom: 1px solid var(--soft-line);
  }

  .s1-nav,
  .s1-left .phone-line,
  .s1-left .collapse-note {
    display: none;
  }

  .s1-right {
    padding: 30px 22px 90px;
    border-top: 1px solid var(--soft-line);
  }

  .s1-chapter {
    min-height: auto;
    padding: 90px 22px;
  }

  .s1-mobile-phone {
    position: sticky;
    z-index: 8;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    color: var(--black);
    background: var(--paper);
    font-size: 0.76rem;
    font-weight: 700;
  }

  .s2,
  .s2-grid {
    min-height: auto;
  }

  .s2-grid {
    display: flex;
    flex-direction: column;
  }

  .s2-story {
    order: 2;
    border: 0;
  }

  .s2-pane-wrap {
    order: 1;
  }

  .s2-pane {
    position: static;
    height: auto;
    grid-template-rows: auto auto;
  }

  .s2-aperture {
    min-height: 300px;
    margin-top: 76px;
  }

  .s2-chapter {
    min-height: auto;
    padding: 100px 22px;
  }

  .s3-head {
    display: block;
    min-height: auto;
  }

  .s3-margin-label {
    padding: 20px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--soft-line);
  }

  .s3-margin-label span {
    writing-mode: initial;
    transform: none;
  }

  .s3-hero-copy {
    min-height: 75vh;
    padding: 90px 22px;
  }

  .marquee-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .marquee-track {
    animation: none;
  }

  .film-card {
    scroll-snap-align: start;
  }

  .s3-pricing {
    padding: 90px 22px;
  }

  .s3-pricing-head,
  .s3-audit-band {
    grid-template-columns: 1fr;
  }

  .s3-audit-band {
    padding: 70px 22px;
  }

  .s4-shell {
    grid-template-columns: 1fr;
  }

  .s4-gutter {
    padding: 20px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--soft-line);
  }

  .s4-gutter .layout-tag {
    writing-mode: initial;
  }

  .ledger-row {
    display: block;
    min-height: auto;
  }

  .ledger-number {
    padding: 45px 22px 0;
    font-size: var(--h-sec);
    line-height: 1;
  }

  .ledger-main,
  .ledger-side {
    padding: 45px 22px 70px;
    border-left: 0;
  }

  .ledger-side {
    border-top: 1px solid var(--soft-line);
  }

  .s4-aperture {
    width: calc(100% + 44px);
    margin-right: -22px;
    margin-left: -22px;
  }

  .s4-edge {
    border: 0;
  }

  .audit-tab {
    position: static;
    min-height: 52px;
    writing-mode: initial;
  }
}

@media (max-width: 620px) {
  .plan-grid,
  .s2-chapter .plan-grid,
  .bento,
  .s3-audit-band .audit-form {
    grid-template-columns: 1fr;
  }

  .bento-tile.wide,
  .bento-tile.tall {
    grid-column: auto;
    grid-row: auto;
  }

  .plan {
    min-height: 240px;
  }

  .s3-pricing-head {
    display: block;
  }

  .s4-plan {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee-track {
    animation: none;
  }
}

/* ==== carried content-mount layer (homepage-only chunks omitted:
     hero weather, services wheel, tool band, terminal) ==== */

/* ---------- the four scope boxes — not connected, spaced even. ---------- */
.scope-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.scope-box {
  margin: 0;
  border: 1px solid var(--gray-3);
  background: var(--ink);
}
.scope-box img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: top;
}
.scope-box figcaption,
.mount-cap {
  margin: 0;
  padding: 8px 10px;
  color: var(--gray-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- the stated-parts tiles under the services detail ---------- */
.parts-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr 0.9fr 1.05fr;
  margin-top: 22px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.part-tile {
  margin: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  padding: 22px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
}
.part-tile.pt-light { background: var(--paper); }
.part-tile.pt-light .tiny-label { color: #4d4d49; }
.part-tile.pt-light h3, .part-tile.pt-light h4 { color: var(--black); }
.part-tile.pt-light p { color: #33332f; }
.part-tile .tiny-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-2);
  margin: 0 0 auto;
}
.part-tile h3,
.part-tile h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 2.4rem 0 10px;
}
.part-tile p { color: var(--gray-2); margin: 0; font-size: 0.92rem; }
.fineprint { margin-top: clamp(40px, 5vw, 64px); }
.fineprint > h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}

/* ---------- S1 pricing: signal bars. Bottom-aligned tiles, heights
     climbing left to right at every desktop width, accents riding
     muted rose to green — top band + price tint only; grounds stay
     in the black lane. ---------- */
#s1-pricing .plan-grid {
  align-items: end;
  --barmax: 470px;
}
#s1-pricing .plan {
  min-height: 0;
  border-top: 3px solid var(--acc, var(--line));
}
#s1-pricing .plan.featured { border-color: var(--paper); border-top-color: var(--acc); }
#s1-pricing .bar-1 { --acc: #a35952; --acc-text: #c97d75; min-height: calc(var(--barmax) * 0.78); }
#s1-pricing .bar-2 { --acc: #b08447; --acc-text: #c29552; min-height: calc(var(--barmax) * 0.86); }
#s1-pricing .bar-3 { --acc: #7f9a4e; --acc-text: #9db36a; min-height: calc(var(--barmax) * 0.93); }
#s1-pricing .bar-4 { --acc: #4f9d63; --acc-text: #6fbe8a; min-height: var(--barmax); }
#s1-pricing .plan .price { color: var(--acc-text); }
#s1-pricing .plan.featured .price { color: var(--black); }
#s1-pricing .plan .term { color: var(--gray-2); }
#s1-pricing .plan.featured .term { color: #4d4d49; }
#s1-pricing .plan .build { color: var(--gray-1); }
#s1-pricing .plan.featured .build { color: #33332f; }
.plan-more summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 0 0;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.plan-more summary::-webkit-details-marker { display: none; }
.plan-more summary::after { content: " +"; color: var(--acc-text, var(--gray-2)); }
.plan-more[open] summary::after { content: " \2212"; }
.plan-more ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--gray-2);
  font-size: 0.85rem;
}
.plan-more li {
  margin: 4px 0;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.plan-tool-line { margin: 12px 0 0; font-size: 0.85rem; }
.plan-tool-line a { font-weight: 700; }
.plan-together { color: var(--gray-2); font-size: 0.82rem; margin: 10px 0 0; }
.plan-together strong { color: var(--gray-1); }
.featured .plan-more summary { border-top-color: #a8a49b; }
.featured .plan-more ul, .featured .plan-together { color: #33332f; }
.featured .plan-together strong { color: var(--black); }
@media (max-width: 1180px) and (min-width: 901px) {
  #s1-pricing .plan-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    --barmax: 360px;
  }
  #s1-pricing .plan { padding: 16px; }
}
@media (max-width: 900px) {
  #s1-pricing .plan-grid { --barmax: 0px; align-items: stretch; }
  #s1-pricing .bar-1, #s1-pricing .bar-2, #s1-pricing .bar-3, #s1-pricing .bar-4 { min-height: 240px; }
}

/* ---------- the white ticker — black words traveling left to right ---------- */
.ticker {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  min-height: 84px;
  display: flex;
  align-items: center;
}
.ticker__track {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  animation: ticker-run 9s linear infinite;
}
.ticker__track span {
  color: var(--ink);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  padding-right: 56px;
}
@keyframes ticker-run {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* At rail widths .ticker is 247px and the phrase inks
   245.05px - 1.95px of slack, so the running phrase was whole for 0.1s of every
   9s loop (1.11%, stepped deterministically) and the reduced-motion state's
   18px indent clipped it by 17.05px permanently. A CTA whose label cannot be
   read is not a CTA. Above the rail breakpoint it parks and centres: readable
   100% of the time, both motion preferences. Below 1101px the box is 390px with
   144.95px of slack and the run reads at 48.33% - untouched.
   To put the motion back, delete this block; nothing else depends on it. */
@media (min-width: 1101px) {
  .ticker__track { animation: none; width: 100%; justify-content: center; padding-left: 0; }
  .ticker__track span { padding-right: 0; font-size: 1.25rem; }
  .ticker__track span ~ span { display: none; }
}


/* ---------- the S2 film tiles: the cycle, plus two held frames.
     Held frames carry film sprockets so an empty slot reads as
     held film, not dead space. ---------- */
.show-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.show-tile {
  position: relative;
  margin: 0;
  border: 1px solid var(--gray-3);
  background: var(--ink);
  min-height: 220px;
  overflow: hidden;
}
.show-tile.st-gif {
  grid-column: span 2;
  min-height: clamp(300px, 42vh, 460px);
}
.show-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.show-tile .gifstill { display: none; }
.show-tile .st-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 10px 12px;
  margin: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.show-tile.reserved::before,
.show-tile.reserved::after {
  content: "";
  position: absolute;
  top: 10px; bottom: 10px;
  width: 5px;
  background: repeating-linear-gradient(to bottom, var(--paper) 0 5px, transparent 5px 12px);
  pointer-events: none;
  opacity: 0.8;
}
.show-tile.reserved::before { left: 14px; }
.show-tile.reserved::after { right: 14px; }
.slot-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-2);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 30px;
}
@media (max-width: 620px) {
  .show-grid { grid-template-columns: minmax(0, 1fr); }
  .show-tile.st-gif { grid-column: auto; }
}

/* ---------- the pane's form fits its sticky box: content scrolls
     inside the pane instead of painting past its paper edge ---------- */
.s2-pane .audit-form { gap: 8px; }
.s2-pane .audit-form label { gap: 3px; }
.s2-pane .audit-form input { min-height: 36px; padding: 7px 10px; }
.s2-pane .audit-form textarea { min-height: 56px; }
.s2-pane .audit-form .button { min-height: 40px; }
.s2-pane .form-note { font-size: 0.7rem; }

/* ---------- mounted video frames (S2 aperture, S4 aperture) ---------- */
.av {
  position: relative;
  height: 100%;
  min-height: 0;
  background: var(--ink);
}
.av video,
.av .vidstill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.av .vidstill { display: none; }
.av .mount-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  color: var(--paper);
}
.s4-av {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--gray-3);
  background: var(--ink);
}
/* an .av inside an auto-height tile fills the tile's box, never a
   collapsed percentage */
.show-tile .av {
  position: absolute;
  inset: 0;
  height: auto;
}
.bento-tile > .av {
  flex: 1 1 auto;
  height: auto;
  min-height: 380px;
}

.facts-band { margin-top: clamp(36px, 5vw, 64px); }
.facts-intro { color: var(--gray-2); max-width: 640px; margin: 0 0 26px; }
.fact-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  max-width: 860px;
}
.fact-row span {
  color: var(--gray-3);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  padding-top: 3px;
}
.fact-row p { color: var(--gray-1); font-size: 1rem; margin: 0; max-width: 640px; }
.fact-row.fact-pull {
  padding: 22px 0;
  border-top: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
}
.fact-row.fact-pull + .fact-row { border-top: 0; }
.fact-row.fact-pull p {
  color: var(--paper);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 760px;
}
.fact-row p.fact-src {
  color: var(--gray-2);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 5px 0 0;
  max-width: 640px;
}
.fact-row:nth-child(even) { margin-left: clamp(0px, 4vw, 64px); }
.ranges {
  margin-top: 30px;
  max-width: 720px;
  border: 1px solid var(--line);
  background: var(--ink);
}
.ranges summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 18px;
}
.ranges summary::-webkit-details-marker { display: none; }
.ranges summary::after { content: " +"; color: var(--gray-2); }
.ranges[open] summary::after { content: " \2212"; }
.ranges .ranges-in { padding: 0 18px 16px; }
.ranges p { color: var(--gray-1); font-size: 0.95rem; margin: 0 0 12px; }
.ranges .range-src { color: var(--gray-2); font-size: 0.78rem; margin: 0 0 2px; }
.ranges .range-note {
  color: var(--gray-2);
  font-size: 0.85rem;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.manifesto { max-width: 920px; margin: 44px 0 10px; }
.manifesto p {
  color: var(--gray-1);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0 0 16px;
}
.manifesto p.big {
  color: var(--paper);
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.045em;
}
.manifesto p .aside { color: var(--gray-2); font-size: 0.58em; }
.manifesto p:last-child { margin-bottom: 0; }

/* ---------- the science cards ride the plan tiles — four distinct
     treatments, never a uniform row ---------- */
#s3-science .plan h2,
#s3-science .plan h3 {
  max-width: none;
  min-height: 0;
  margin: 14px 0 12px;
  font-size: 1.3rem;
}
#s3-science .plan p { margin: 0 0 10px; font-size: 0.95rem; }
#s3-science .plan .sci-src { margin: auto 0 0; color: var(--gray-2); font-size: 0.78rem; }
#s3-science .plan.featured p { color: #33332f; }
#s3-science .plan.featured .sci-src { color: #4d4d49; }
#s3-science .plan.sci-first {
  min-height: 330px;
  border-top: 3px solid var(--gray-3);
}
#s3-science .plan.sci-proof {
  background: var(--black);
  border-style: dashed;
}
#s3-science .plan.sci-measure {
  min-height: 250px;
  align-self: end;
  border-bottom: 3px solid var(--gray-3);
}

/* ---------- the blog ledger rows are links ---------- */
.s4-plan a { text-decoration: none; }
.s4-plan a:hover h3, .s4-plan a:focus-visible h3 { text-decoration: underline; }
.s4-plan .text-link { font-size: 0.9rem; align-self: center; }

/* ---------- reduced motion: everything parks ---------- */
@media (prefers-reduced-motion: reduce) {
  .sky-a, .sky-b { animation: none; transform: none; }
  .cloud-top, .cloud-mid, .cloud-fore { animation: none; transform: none; }
  .ticker__track { animation: none; padding-left: 18px; }
  .tl__cur { animation: none; opacity: 1; }
  .tl__screen { justify-content: flex-start; }
  .b-tile video { display: none; }
  .b-tile .cardstill { display: block; }
  .av video { display: none; }
  .av .vidstill { display: block; }
  .show-tile .gifanim { display: none; }
  .show-tile .gifstill { display: block; }
}

/* ============================================================
   INTERIOR LAYER — the homepage design system extended to the
   44 interior pages. Everything above this line is carried from
   the homepage byte-for-byte; everything below is additive shell
   for cross-page navigation, page heads, prose, and footers.
   ============================================================ */

/* ---------- the shell: left rail + one content column ---------- */
.in-shell {
  display: grid;
  /* the left rail was dropped sitewide on his order - one content column,
     no orphan gutter where the 205px..15vw rail track used to be */
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  background: var(--black);
}
.in-main { min-width: 0; }

/* the rail nav gets its own class so the homepage's mobile hide
   never removes cross-page navigation */
.rail-nav { display: grid; margin-top: auto; }
.rail-nav a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 12px 0;
  color: var(--gray-2);
  border-top: 1px solid var(--soft-line);
  font-size: 0.8rem;
  text-decoration: none;
}
.rail-nav a:hover,
.rail-nav a:focus-visible { color: var(--paper); }
.rail-nav a[aria-current="page"] { color: var(--paper); }
.rail-nav a[aria-current="page"] span:last-child { border-bottom: 1px solid var(--paper); padding-bottom: 2px; }

.rail-drop { border-top: 1px solid var(--soft-line); }
.rail-drop > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 0; color: var(--gray-2); font-size: 0.8rem; font-weight: 700; }
.rail-drop > summary::-webkit-details-marker { display: none; }
.rail-drop > summary:hover, .rail-drop > summary:focus-visible { color: var(--paper); }
.rail-drop > summary .drop-mark::before { content: "+"; }
.rail-drop[open] > summary .drop-mark::before { content: "\2212"; }
.rail-drop a { display: grid; grid-template-columns: minmax(0, 1fr); padding: 9px 0 9px 12px; color: var(--gray-2); border-top: 1px solid var(--soft-line); font-size: 0.78rem; text-decoration: none; }
.rail-drop a:hover, .rail-drop a:focus-visible { color: var(--paper); }

/* ---------- page head: S4 huge-serif chapter treatment ---------- */
.page-head {
  padding: clamp(56px, 7vw, 100px) var(--pad) clamp(36px, 4vw, 60px);
  border-bottom: 1px solid var(--soft-line);
}
.page-display {
  max-width: 14ch;
  margin: 18px 0 24px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 4.8rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.page-head .lede { max-width: 620px; }

/* ---------- sections: varied rhythm, never one padding ---------- */
.page-sec {
  padding: clamp(64px, 7vw, 112px) var(--pad);
  border-bottom: 1px solid var(--soft-line);
}
.page-sec.tight { padding: clamp(36px, 4vw, 60px) var(--pad); }
.page-sec.deep { padding: clamp(64px, 7vw, 110px) var(--pad); }
.page-sec.band {
  color: var(--black);
  background: var(--paper);
}
.page-sec.band .muted { color: #4d4d49; }
.page-sec.band .lede { color: #33332f; }

/* ---------- prose: article/legal body in the system voice ---------- */
.prose { max-width: 72ch; }
.prose h2 {
  max-width: 24ch;
  margin: 2.6em 0 0.5em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  letter-spacing: -0.03em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin: 2em 0 0.4em;
  font-size: 1.15rem;
}
.prose p, .prose li { color: var(--gray-1); font-size: 1.02rem; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: 0.35em 0; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--paper);
  font-family: var(--serif);
  font-size: 1.25rem;
}
.prose strong { color: var(--paper); }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose hr { border: 0; height: 1px; margin: 2.2em 0; background: var(--soft-line); }

/* article meta line */
.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--gray-2);
  font-size: 0.82rem;
}

/* ---------- numbered ledger list (index pages) ---------- */
.index-ledger { display: grid; border-top: 1px solid var(--soft-line); }
.index-row {
  display: grid;
  grid-template-columns: minmax(64px, 0.14fr) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--soft-line);
  text-decoration: none;
}
.index-row span.n {
  color: var(--gray-4);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
}
.index-row h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  letter-spacing: -0.03em;
}
.index-row:hover h3, .index-row:focus-visible h3 { text-decoration: underline; }
.index-row p { margin: 0; color: var(--gray-2); font-size: 0.95rem; max-width: 60ch; }
.index-row .go { color: var(--gray-2); font-size: 0.9rem; }

/* ---------- signal-bar pricing on the pricing page: NOTE 20 — the TILE
     carries the accent surface, every word rides white (the homepage's
     ruled mechanic, mirrored; contrast cleared 7.41:1+ on these hexes) ---------- */
.bar-plans { align-items: stretch; --barmax: 470px; }
/* ONE CLOSED HEIGHT AT BOTH WIDTHS.
   At 1280 the four cards sit in one grid row, so align-items:stretch already
   equalises them (measured spread 0px). At <=900 the grid collapses to a single
   column, which gives every card its OWN row - so each sizes to its own content
   and the four closed cards render ragged (measured spread 49.19px, the widest
   card 645.30 against the narrowest 596.11). Equal implicit rows restore one
   height on the phone without touching the desktop shape. Scoped to .bar-plans,
   which exists only on /pricing/, so the homepage tier stair is not disturbed. */
@media (max-width: 900px) {
  .bar-plans { grid-auto-rows: 1fr; }
}
.bar-plans .plan {
  min-height: 0;
  background: var(--acc-surface, var(--ink));
  border-color: var(--acc-surface, var(--line));
  border-top: 3px solid var(--acc, var(--line));
  color: var(--white);
}
.bar-plans .plan.featured { background: var(--acc-surface); color: var(--white); border-color: var(--paper); border-top-color: var(--acc); }
.acc-1 { --acc: #a35952; --acc-surface: #63352f; }
.acc-2 { --acc: #b08447; --acc-surface: #614722; }
.acc-3 { --acc: #7f9a4e; --acc-surface: #445226; }
.acc-4 { --acc: #4f9d63; --acc-surface: #2a5636; }
.bar-plans .bh-1, .bar-plans .bh-2, .bar-plans .bh-3, .bar-plans .bh-4 { min-height: calc(var(--barmax) * 0.78); }
.bar-plans .plan h2, .bar-plans .plan h3 { color: #ffffff; }
.bar-plans .plan .plan-label { color: #f1f0eb; }
.bar-plans .plan .price { color: #ffffff; }
.bar-plans .plan.featured .price { color: #ffffff; }
.bar-plans .plan .term { color: #f1f0eb; }
.bar-plans .plan.featured .term { color: #f1f0eb; }
.bar-plans .plan .build-line { color: #ffffff; display: block; margin-top: 6px; font-size: 0.86rem; }
.bar-plans .plan.featured .build-line { color: #ffffff; }
/* tile body copy: the services tiles carry paragraphs the homepage tiles never
   had; .muted's class rule beats the container's inherited white, so the copy
   needs its own line (measured 8.84 / 7.57 / 7.42 / 7.41 on the four surfaces) */
.bar-plans .plan p { color: #f1f0eb; }
.bar-plans .plan ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--gray-2);
  font-size: 0.85rem;
}
.bar-plans .plan li { margin: 4px 0; padding-left: 8px; border-left: 1px solid var(--line); }
.bar-plans .plan.featured ul { color: #33332f; }
.bar-plans .plan.featured li { border-left-color: #a8a49b; }
@media (max-width: 1180px) and (min-width: 901px) {
  .bar-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; --barmax: 360px; }
  .bar-plans .plan { padding: 16px; }
}
@media (max-width: 900px) {
  .bar-plans { --barmax: 0px; align-items: stretch; }
  .bar-plans .bh-1, .bar-plans .bh-2, .bar-plans .bh-3, .bar-plans .bh-4 { min-height: 0; }
}

/* a single tier page carries its position's accent on the head */
.tier-accent { border-top: 3px solid var(--acc, var(--line)); }
.tier-accent .price-line { color: var(--acc-text, var(--paper)); }

/* ---------- empty media placeholders: named frames, three shapes ---------- */
.ph-16x9 { aspect-ratio: 16 / 9; min-height: 0; }
.ph-4x3 { aspect-ratio: 4 / 3; min-height: 0; }
.ph-tall { min-height: 380px; }

/* compact ledger rows for interior chapters (the 92vh drama stays
   for feature rows; supporting chapters sit shorter) */
.ledger-row.compact { min-height: 52vh; }
.step-adds { color: var(--gray-1); font-size: 0.98rem; max-width: 58ch; margin: 8px 0 0; }
.reach-line { color: var(--gray-2); font-size: 0.95rem; }
.reach-line a { font-weight: 700; text-decoration: none; }
.reach-line a:hover, .reach-line a:focus-visible { text-decoration: underline; }

/* ---------- interior footer ---------- */
.in-foot {
  border-top: 1px solid var(--paper);
  padding: clamp(36px, 4vw, 56px) var(--pad) 28px;
  display: grid;
  gap: 34px;
}
.in-foot-cols {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(140px, 0.8fr));
  gap: 28px;
}
.in-foot .s1-brand { margin-bottom: 10px; }
.in-foot-tag { color: var(--gray-2); font-size: 0.88rem; max-width: 34ch; }
.in-foot nav { display: grid; align-content: start; gap: 0; }
.in-foot nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 7px 0;
  color: var(--gray-2);
  border-top: 1px solid var(--soft-line);
  font-size: 0.82rem;
  text-decoration: none;
}
.in-foot nav a:hover, .in-foot nav a:focus-visible { color: var(--paper); }
.in-foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--soft-line);
}
.in-foot-base p { margin: 0; }
.in-foot-seal { font-family: var(--serif); color: var(--gray-2); font-size: 0.9rem; }

/* ---------- skip link: visible on focus, readable everywhere ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 50;
  padding: 12px 18px;
  color: var(--black);
  background: var(--paper);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus-visible { left: 12px; top: 12px; }

/* ---------- responsive shell ---------- */
@media (max-width: 900px) {
  .in-shell { display: block; }
  /* the carried parts-grid has no phone collapse of its own */
  .parts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* keep cross-page tabs alive on phone: the rail folds to a wrap row */
  .rail-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    margin-top: 14px;
  }
  .rail-nav a {
    display: inline-flex;
    gap: 6px;
    padding: 7px 10px 7px 0;
    border-top: 0;
    font-size: 0.78rem;
  }
  .page-head { padding: 70px 22px 40px; }
  .page-sec { padding: 60px 22px; }
  .page-sec.tight { padding: 34px 22px; }
  .page-sec.deep { padding: 80px 22px; }
  .in-foot { padding: 36px 22px 24px; }
  .in-foot-cols { grid-template-columns: 1fr 1fr; }
  .index-row { grid-template-columns: 44px minmax(0, 1fr); }
  .index-row .go { display: none; }
}
@media (max-width: 620px) {
  .in-foot-cols { grid-template-columns: 1fr; }
  .parts-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   CARRIED-VOCABULARY LAYER — the old pages' class names, re-dressed
   in the homepage design system. Markup (and therefore copy) is
   carried; only the dress is new. Media elements were removed at
   transform time, so old media containers render as held frames.
   ============================================================ */

/* ---- old section heads ---- */
.sec-head { margin: 0 0 26px; }
.sec-label {
  margin: 0 0 12px;
  color: var(--gray-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sec-h2 {
  max-width: 26ch;
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 3.1rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.sec-intro {
  max-width: 660px;
  margin: 0 0 14px;
  color: var(--gray-1);
  font-size: clamp(1.02rem, 1.3vw, 1.3rem);
}

/* ---- numbered steps ---- */
.steps { list-style: none; margin: 26px 0 0; padding: 0; max-width: 860px; }
.step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--soft-line);
}
.step__k { margin: 0; }
.step .num { color: var(--gray-3); font-size: 0.95rem; font-weight: 700; }
.step__t { margin: 0 0 7px; font-size: 1.35rem; }
.step__b { margin: 0; color: var(--gray-2); }
.step__b strong { color: var(--gray-1); }

/* ---- the fa two-column body with sticky aside ---- */
.fa__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 44px;
  align-items: start;
}
.fa__aside { display: grid; gap: 18px; position: sticky; top: 24px; }
.fa__next, .fa__paid, .startbox {
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--ink);
}
.fa__paid { color: var(--black); background: var(--paper); border-color: var(--paper); }
.fa__paid .fa__next-b, .fa__paid p { color: #33332f; }
.fa__paid .fa__next-h { color: var(--black); }
.fa__next-h {
  margin: 2.2em 0 0.5em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.fa__next-h:first-child { margin-top: 0; }
.fa__next .fa__next-h, .fa__paid .fa__next-h { font-size: 1.25rem; margin: 0 0 10px; }
.fa__next-b { margin: 0 0 14px; color: var(--gray-1); max-width: 66ch; }
.fa__next-b:last-child { margin-bottom: 0; }
.fa__next-b strong { color: var(--paper); }
.fa__paid .fa__next-b strong { color: var(--black); }

/* ---- the plain-words box ---- */
.plain { max-width: 860px; margin: 6px 0 34px; padding: 24px; border: 1px solid var(--paper); }
.plain__h {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -0.03em;
}
.plain__b { margin: 0 0 12px; color: var(--gray-1); }
.plain__list { margin: 0; padding-left: 1.1em; color: var(--gray-1); }
.plain__list li { margin: 0.5em 0; }
.plain__term { font-weight: 700; color: var(--paper); }

/* ---- old media slots: media was removed at transform time; the
       container renders as a held frame in the system language ---- */
.mslot, .post__hero, .tool__art, .tdetail__art, .ax-tile__art, .bloglist__art {
  position: relative;
  display: grid;
  gap: 7px;
  place-content: center;
  min-height: 210px;
  margin: 24px 0;
  padding: 22px;
  text-align: center;
  overflow: hidden;
  border: 1px solid var(--gray-3);
  background:
    linear-gradient(135deg, transparent 49.7%, var(--line) 50%, transparent 50.3%),
    linear-gradient(45deg, transparent 49.7%, var(--line) 50%, transparent 50.3%),
    var(--ink);
}
.mslot::after, .post__hero::after, .tool__art::after, .tdetail__art::after,
.ax-tile__art::after, .bloglist__art::after {
  position: absolute;
  inset: 12px;
  border: 1px solid var(--soft-line);
  content: "";
  pointer-events: none;
}
.mslot__k, .mslot__label, .mslot__cap, .mslot__b, .mslot__note {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--gray-2);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mslot__b, .mslot__note, .mslot__cap { font-weight: 400; letter-spacing: 0.02em; text-transform: none; font-size: 0.85rem; max-width: 46ch; }
.tool__art, .ax-tile__art, .bloglist__art { min-height: 150px; margin: 0 0 14px; }
.tdetail__art { min-height: 0; width: 100%; max-width: 100%; }
/* the framed-plate device from the design boards.
   The frame is what upgrades - the primary label rides the plate's
   bottom-left chip, honest text unchanged, slots stay empty. */
.mslot__label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: calc(100% - 28px);
  padding: 6px 9px;
  text-align: left;
  color: var(--paper);
  background: var(--black);
  border: 1px solid var(--soft-line);
}
.mslot--video .mslot__note, .mslot--empty .mslot__note { padding-bottom: 40px; }
.post__hero::before, .bloglist__art::before {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 6px 9px;
  border: 1px solid var(--soft-line);
  background: var(--black);
  color: var(--gray-2);
  content: "Media placeholder";
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* ---------- a filled art well: the photo replaces the placeholder plate ---------- */
.post__hero--filled, .bloglist__art--filled {
  display: block;
  min-height: 0;
  padding: 0;
  background: var(--black);
  border: 1px solid var(--soft-line);
}
.post__hero--filled::before, .bloglist__art--filled::before,
.post__hero--filled::after, .bloglist__art--filled::after { content: none; }
.post__hero--filled img, .bloglist__art--filled img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---- old buttons and text links ---- */
.btn, .cform__submit, .tform__submit {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  color: var(--paper);
  border: 1px solid var(--paper);
  background: transparent;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible, .cform__submit:hover, .cform__submit:focus-visible,
.tform__submit:hover, .tform__submit:focus-visible { color: var(--black); background: var(--paper); }
.btn--ghost { border-color: var(--gray-3); color: var(--gray-1); }
/* .band--offer dropped out of this group: black-on-black measured 1.1:1 in the
   injection pass. Its primary action is the homepage's blue bubble instead. */
.band--close .btn, .fa__paid .btn, .post__cta .btn {
  color: var(--black); border-color: var(--black);
}
.band--close .btn:hover, .fa__paid .btn:hover, .post__cta .btn:hover {
  color: var(--paper); background: var(--black);
}
.spoke {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: inherit;
  border-bottom: 1px solid currentColor;
  font-weight: 700;
  text-decoration: none;
}

/* ---- bands ---- */
.band { padding: clamp(56px, 6.5vw, 100px) var(--pad); border-bottom: 1px solid var(--soft-line); }
.band__in { max-width: 1060px; }
/* .band--close stays paper: it is an ACCENT band (one band, 7.4% of /tools/).
   .band--offer was the same rule and is the PAGE GROUND on the 9 tool detail
   pages (57.6-65.9% of each page, measured 2026-08-11) — it inverted the ruled
   TRUE BLACK ground on the only pages that carry a price. Split, and rebuilt
   in the R3 face layer at the end of this file. */
.band--close { color: var(--black); background: var(--paper); }
.band--close .sec-label { color: #4d4d49; }
.band--close .sec-intro, .band--close p { color: #33332f; }
.band--close .sec-h2, .band--close h2 { color: var(--black); }

/* ---- old m2 record chapters ---- */
.m2-chapter {
  display: grid;
  grid-template-columns: minmax(80px, 0.16fr) minmax(0, 1fr);
  gap: 26px;
  padding: 44px 0;
  border-top: 1px solid var(--soft-line);
}
.m2-numeral {
  margin: 0;
  color: var(--gray-4);
  font-size: var(--h-sec);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.8;
}
.m2-kicker {
  margin: 0 0 14px;
  color: var(--gray-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.m2-lead {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.m2-small p { margin: 0 0 12px; color: var(--gray-1); }
.m2-asym {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 30px;
  align-items: start;
}
.m2-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.m2-ledger > div { padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink); }
.m2-ledger dt { color: var(--gray-2); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 8px; }
.m2-ledger dd { margin: 0; color: var(--gray-1); }
.m2-ledger .m2-ledger__wide { grid-column: 1 / -1; }
.m2-status { font-weight: 700; color: var(--paper); }
.m2-step { display: grid; grid-template-columns: minmax(180px, 0.4fr) 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--soft-line); }
.m2-ladder { list-style: none; margin: 20px 0 0; padding: 0; }
.m2-step__name { margin: 0; font-weight: 700; }
.m2-step__fig { margin: 4px 0 0; color: var(--gray-2); font-size: 0.9rem; }
.m2-step__adds { margin: 0; color: var(--gray-1); }

/* ---- tools hub ---- */
.toolhead__b { max-width: 660px; color: var(--gray-1); }
.toolgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
  border-top: 1px solid var(--soft-line);
  border-left: 1px solid var(--soft-line);
}
.tool {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  color: inherit;
  border-right: 1px solid var(--soft-line);
  border-bottom: 1px solid var(--soft-line);
  background: var(--black);
  text-decoration: none;
}
.tool--wide { grid-column: span 2; }
.tool__plate {
  margin: 0 0 10px;
  color: var(--gray-2);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tool__name {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -0.03em;
}
.tool__line { margin: 0 0 14px; color: var(--gray-2); font-size: 0.95rem; }
.tool__body { margin: 0 0 14px; color: var(--gray-1); font-size: 0.95rem; }
.tool__door {
  margin-top: auto;
  align-self: flex-start;
  border-bottom: 1px solid currentColor;
  font-weight: 700;
}
a.tool:hover .tool__name, a.tool:focus-visible .tool__name { text-decoration: underline; }

/* ---- tool detail pages ---- */
.tdetail__b { max-width: 660px; color: var(--gray-1); margin: 0 0 14px; }
.tdetail__price { font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 700; letter-spacing: -0.06em; }
.tdetail__per { color: var(--gray-2); font-size: 0.95rem; }
.tdetail__fig { margin: 0; }
.tdetail__need, .tdetail__honest {
  max-width: 720px;
  margin: 22px 0 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--gray-1);
}
.tsig__beats { list-style: none; margin: 22px 0 0; padding: 0; max-width: 860px; }
/* beats are title-over-body pairs — the old 52px marker grid (a .step
   numeral slot) crushed every sentence title to one word per line. */
.tsig__beat { padding: 18px 0; border-top: 1px solid var(--soft-line); }
.tsig__k { margin: 0; color: var(--gray-3); font-weight: 700; }
.tsig__t { display: block; margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
.tsig__b { display: block; margin: 0; color: var(--gray-2); }
.tform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.tform__head { margin: 0 0 12px; font-size: 1.3rem; font-weight: 700; }
.tform__promise { color: var(--gray-2); font-size: 0.8rem; }
.tform { max-width: 720px; padding: 24px; border: 1px solid var(--paper); }
.tform__f { display: grid; gap: 6px; }
.closer__reach, .closer__body { color: inherit; }
.closer__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }

/* ---- forms carried with their old classes ---- */
.cform { display: grid; gap: 13px; max-width: 560px; padding: 24px; border: 1px solid var(--paper); }
.cform__head { margin: 0 0 4px; font-size: 1.3rem; font-weight: 700; }
.cform__row { display: grid; gap: 6px; }
.cform__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.cform__in, .tform__f input, .tform__f textarea, .ax-form__f input, .ax-form__f textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  color: var(--paper);
  border: 1px solid var(--gray-3);
  border-radius: 0;
  outline: 0;
  background: var(--black);
  font: inherit;
}
.cform__area { min-height: 88px; resize: vertical; }
.cform__in:focus, .tform__f input:focus, .tform__f textarea:focus,
.ax-form__f input:focus, .ax-form__f textarea:focus {
  border-color: var(--paper);
  box-shadow: 0 0 0 1px var(--paper);
}
.cform__note { margin: 0; color: var(--gray-2); font-size: 0.78rem; }

/* ---- blog hub (item shape: li > .bloglist__pin > art + body) ---- */
.bloglist__list { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--soft-line); }
.bloglist__item { padding: 26px 0; border-bottom: 1px solid var(--soft-line); }
.bloglist__pin {
  display: grid;
  grid-template-columns: minmax(180px, 0.26fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
/* a card with no art collapses to one column rather than reserving an empty
   180px well. The art element is dropped from the markup, not hidden: an empty
   .bloglist__art still paints the "Media placeholder" chip through its ::before,
   which is the same rule that shows on a bare post hero. */
.bloglist__pin--noart {
  grid-template-columns: minmax(0, 1fr);
}
.bloglist__t {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.8rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  /* titles clamp at two lines so the list reads as one shape: measured
     unclamped at 1-2 lines at 1280 and 2-3 at 390, which staggered every
     card below the title. Both the prefixed and the standard property are
     set - the prefixed pair is what actually clamps in every current engine. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.bloglist__t a { text-decoration: none; }
.bloglist__t a:hover, .bloglist__t a:focus-visible { text-decoration: underline; }
.bloglist__d { margin: 0 0 10px; color: var(--gray-2); max-width: 62ch; }
.bloglist__meta { display: flex; gap: 8px; margin: 0 0 8px; color: var(--gray-3); font-size: 0.8rem; }
.bloglist__read { margin: 0; font-size: 0.9rem; }
.bloglist__read a { font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.bloglist__art { min-height: 120px; margin: 0; }

/* ---- blog post pages ---- */
.post__in { max-width: 860px; }
.post__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 8px; color: var(--gray-2); font-size: 0.82rem; }
.post__body { max-width: 72ch; }
.post__body h2 {
  max-width: 26ch;
  margin: 2.4em 0 0.5em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  letter-spacing: -0.03em;
}
.post__body h3 { margin: 1.8em 0 0.4em; font-size: 1.15rem; }
.post__body p, .post__body li { color: var(--gray-1); font-size: 1.02rem; }
.post__body ul, .post__body ol { padding-left: 1.2em; }
.post__body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--paper);
  font-family: var(--serif);
  font-size: 1.25rem;
}
.post__body strong { color: var(--paper); }
.post__body hr { border: 0; height: 1px; margin: 2.2em 0; background: var(--soft-line); }
.post__back, .post__backline { color: var(--gray-2); font-size: 0.85rem; }
.post__cta {
  margin: 40px 0 0;
  padding: 26px;
  color: var(--black);
  background: var(--paper);
}
.post__cta p { color: #33332f; }
.post__cta .post__cta-lead { margin: 0 0 12px; color: var(--black); font-weight: 700; font-size: 1.15rem; }
.post__cta-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.script-quote {
  margin: 1.6em 0;
  padding: 14px 0 14px 20px;
  border-left: 1px solid var(--paper);
  font-family: var(--serif);
  font-size: 1.2rem;
}
.optin-check { padding-left: 1.2em; color: var(--gray-1); }
.tablewrap { overflow-x: auto; margin: 1.4em 0; }
.tablewrap table, .post__body table { border-collapse: collapse; width: 100%; }
.post__body th, .post__body td {
  padding: 9px 12px;
  border: 1px solid var(--line);
  color: var(--gray-1);
  font-size: 0.92rem;
  text-align: left;
}
.post__body th { color: var(--paper); background: var(--ink); }

/* ---- add-ons ---- */
.ax-wrap { max-width: 1100px; }
.ax-hero { margin-bottom: 30px; }
.ax-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--soft-line);
  border-left: 1px solid var(--soft-line);
}
.ax-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 22px;
  border-right: 1px solid var(--soft-line);
  border-bottom: 1px solid var(--soft-line);
  background: var(--black);
}
.ax-tile--feature, .ax-tile--tall { grid-row: span 2; }
.ax-tile--gilt { color: var(--black); background: var(--paper); }
.ax-tile--gilt p, .ax-tile--gilt .ax-tile__line { color: #33332f; }
.ax-tile--ledger { background: var(--ink); }
.ax-tile__name {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.8rem);
  letter-spacing: -0.03em;
}
.ax-tile__line, .ax-tile__body { margin: 0 0 12px; color: var(--gray-2); font-size: 0.92rem; }
.ax-tile__price, .ax-price { margin-top: auto; font-size: clamp(1.5rem, 2.2vw, 2.2rem); font-weight: 700; letter-spacing: -0.05em; }
.ax-tile__mono { font-size: 0.75rem; color: var(--gray-3); letter-spacing: 0.08em; }
.ax-tile__gate { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--gray-2); font-size: 0.8rem; }
.ax-detail, .ax-honest, .ax-promise, .ax-up {
  max-width: 760px;
  margin: 26px 0 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--gray-1);
}
.ax-request { margin-top: 40px; }
.ax-form { display: grid; gap: 13px; max-width: 720px; padding: 24px; border: 1px solid var(--paper); }
.ax-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.ax-form__f { display: grid; gap: 6px; }
.ax-form__f--wide { grid-column: 1 / -1; }

/* ---- page-message trio (thanks, hiring thanks, 404) ---- */
/* .pagemsg — see the R3 face layer at the end of this file for __code/__h1.
   min-height 62vh held an empty column under a short message. */
.pagemsg { display: grid; align-content: center; }
.pagemsg__in { max-width: 720px; }
/* .pagemsg__code was built as a 404 NUMERAL — 128px at 1280, line-height 0.8,
   colour var(--gray-4) #252525 = 1.37:1 on black. All three pages that use it
   put a PHRASE in it ("Request received" / "Application received" / "Error
   404"), so it wrapped to two lines and became a grey slab sitting on top of
   the real headline. It is now the site's eyebrow — see the R3 face layer. */
.pagemsg__code {
  margin: 0 0 10px;
  color: var(--gray-4);
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.8;
}
.pagemsg__h1 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.pagemsg__sub { margin: 0 0 22px; color: var(--gray-1); font-size: clamp(1.05rem, 1.4vw, 1.35rem); max-width: 56ch; }
.pagemsg__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- the card page ---- */
.card-wrap { display: grid; gap: 34px; max-width: 860px; }
.card {
  padding: 28px;
  border: 1px solid var(--paper);
  background: var(--ink);
  max-width: 460px;
}
.card__name { margin: 0 0 4px; font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -0.03em; }
.card__role { margin: 0 0 18px; color: var(--gray-2); font-size: 0.9rem; }
.card__rule { height: 1px; margin: 14px 0; background: var(--soft-line); }
.card__lines { display: grid; gap: 8px; }
.card__line { display: grid; grid-template-columns: 92px 1fr; gap: 12px; font-size: 0.95rem; }
.card__k { color: var(--gray-3); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 3px; }
.card__v { color: var(--gray-1); overflow-wrap: anywhere; }
.card__v a { text-decoration: none; }
.card__v a:hover, .card__v a:focus-visible { text-decoration: underline; }
.card__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.card__foot { margin-top: 16px; color: var(--gray-3); font-size: 0.78rem; }
.mark { display: inline-flex; gap: 2px; align-items: baseline; color: inherit; font-weight: 700; text-decoration: none; }
.mark__amp { color: #C9A227; font-style: italic; }
.mark__full { margin-left: 10px; font-family: var(--serif); font-weight: 400; }
.memo { max-width: 62ch; }
.memo__p { color: var(--gray-1); font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; }
.memo__sign { color: var(--gray-2); font-family: var(--serif); font-style: italic; }

/* ---- hiring page vocabulary ---- */
.edition, .v3x-eyebrow, .form-kicker, .section-kicker {
  margin: 0 0 12px;
  color: var(--gray-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-body { max-width: 660px; color: var(--gray-1); font-size: clamp(1.02rem, 1.3vw, 1.3rem); }
/* SITEFIX-0813: BAN-LAYOUT-001 fired here - three equal columns carrying three
   cells with one identical class is the uniform-card-grid shape the ban names
   ("equal-width equal-height 3-up rows of identical cells"). The remedy the
   ban itself prescribes is structural asymmetry, so the equal-width axis is
   broken and the tracks are sized to the content that actually sits in them:
   "From home" (9ch) is the shortest, "Any local business" (18ch) the
   longest. Markup untouched - no cell added, renamed, reordered or restyled,
   and the label/value hierarchy is exactly as it was. Under 900px the ledger
   still stacks to one column. Used on /hiring/ only. */
.hero-ledger {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.12fr) minmax(0, 1fr);
  max-width: 760px;
  margin-top: 26px;
  border-top: 1px solid var(--soft-line);
  border-left: 1px solid var(--soft-line);
}
.hero-ledger-item {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-right: 1px solid var(--soft-line);
  border-bottom: 1px solid var(--soft-line);
  background: var(--ink);
}
.hero-ledger-label { color: var(--gray-2); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-ledger-value { font-weight: 700; }
.ledger-section {
  display: grid;
  grid-template-columns: minmax(70px, 0.14fr) minmax(0, 1fr);
  gap: 26px;
}
.section-number {
  color: var(--gray-4);
  font-size: var(--h-sec);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.8;
}
.section-heading {
  max-width: 26ch;
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.section-intro { max-width: 660px; margin: 0 0 14px; color: var(--gray-1); font-size: clamp(1rem, 1.25vw, 1.25rem); }
.section-content p { color: var(--gray-1); max-width: 70ch; }
.standard-copy p { color: var(--gray-1); max-width: 70ch; }
.tool-note { color: var(--gray-2); font-size: 0.9rem; max-width: 66ch; }
.process-index, .role-steps, .build-grid, .role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.process-step, .role-step, .build-item {
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--gray-1);
  font-size: 0.95rem;
}
.money-table-wrap { overflow-x: auto; margin: 22px 0 0; }
.money-table { border-collapse: collapse; width: 100%; }
.money-table th, .money-table td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  color: var(--gray-1);
  font-size: 0.92rem;
  text-align: left;
}
.money-table th { color: var(--paper); background: var(--ink); }
.pay-details, .pay-detail { color: var(--gray-1); }
.media-frame-portrait { aspect-ratio: 3 / 4; min-height: 300px; }
.media-frame-wide { aspect-ratio: 16 / 9; min-height: 0; }
.apply-pane { max-width: 980px; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--paper); background: var(--ink); }
.apply-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  letter-spacing: -0.03em;
}
.apply-intro { margin: 0 0 18px; color: var(--gray-1); max-width: 66ch; }
.af { display: grid; gap: 18px; }
.af fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
/* ONE COLUMN. The application-form standard: Baymard rules against multi-column form structure -
   side-by-side fields slow scanning and break on a phone. This was the two-column
   grid behind his "fields all over the place". Nothing on this form sits beside
   anything now, so .af__row--full is a no-op that stays harmless. */
.af__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: end; }

/* ---------- THE APPLICATION WIZARD ---------- */
.af__prog { position: sticky; top: 0; z-index: 3; padding: 12px 0 14px; background: var(--ink); border-bottom: 1px solid var(--soft-line); }
.af__prog-t { margin: 0 0 8px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); }
.af__prog-bar { height: 6px; background: rgba(255, 255, 255, 0.14); border-radius: 3px; overflow: hidden; }
.af__prog-fill { display: block; height: 100%; background: var(--gold, #c9a227); transition: width 0.25s ease; }
.af__prog-save { margin: 8px 0 0; min-height: 1em; font-size: 0.76rem; letter-spacing: 0.02em; color: var(--gray-2); }

.af__step { display: grid; gap: 18px; }
.af__step[hidden] { display: none; }
.af__step-h { margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -0.02em; }
.af__step-h:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
/* "Step X of Y" is already printed, persistently, by the sticky progress bar -
   in the frame it read twice within 90px. It stays in the DOM and OUT of sight
   rather than being deleted: focus moves to this heading on every advance, so a
   screen reader should announce "Step 2 of 6, Role and experience". display:none
   would strip it from the accessibility tree and lose that. */
.af__step-of { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.af__step-err { margin: 0; padding: 10px 12px; border: 1px solid var(--gold, #c9a227); background: rgba(201, 162, 39, 0.10); color: var(--paper); font-size: 0.85rem; }
.af__step-err[hidden] { display: none; }
.af__fielderr { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--gold, #c9a227); }
.af__in[aria-invalid="true"], .af__ta[aria-invalid="true"] { border-color: var(--gold, #c9a227); }

.af__nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 6px; }
.af__nav .btn { min-height: 44px; }
.af__back[hidden], .af__submitwrap[hidden], .af__next[hidden] { display: none; }

@media (max-width: 900px) {
  /* the Next control is the whole job on a phone - it stays reachable without a
     scroll back, per the application-form standard's sticky-Next line. 44px floor held.
     .af drops to BLOCK here on purpose: as a grid, every child gets its own
     one-row grid area, so a sticky child's containing block is exactly its own
     box and it has ZERO travel to stick within - measured, the bar never pinned.
     Normal flow gives it the form's full height to stick against. The grid's
     18px gap is restored as a margin so nothing else moves. */
  .af { display: block; }
  .af > * + * { margin-top: 18px; }
  /* SITS ABOVE THE PHONE BAR, NOT UNDER IT. Measured: .s1-mobile-phone is
     sticky, bottom:0, z-index:8, 45px tall, so it painted over the pinned Next
     and elementFromPoint returned the phone bar at the button's own centre -
     the control was pinned and unclickable. Raising the nav's z-index instead
     would bury a live phone number, which is a conversion device, not chrome.
     Both stay usable: Next rests on top of the 45px bar. */
  .af__nav { position: sticky; bottom: 45px; z-index: 9; margin: 18px -14px 0; padding: 12px 14px; background: var(--ink); border-top: 1px solid var(--soft-line); }
  .af__nav .btn, .af__nav .af__submitwrap, .af__nav .af__submitwrap .btn { width: 100%; justify-content: center; }
}
.af__row { display: grid; gap: 6px; margin: 0; }
.af__row--full { grid-column: 1 / -1; }
.af__l { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.af__l .opt { color: var(--gray-3); font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
.af__in, .af__ta {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  color: var(--paper);
  border: 1px solid var(--gray-3);
  border-radius: 0;
  outline: 0;
  background: var(--black);
  font: inherit;
}
.af__ta { min-height: 88px; resize: vertical; }
.af__in:focus, .af__ta:focus { border-color: var(--paper); box-shadow: 0 0 0 1px var(--paper); }
.af__sec { padding-top: 22px; border-top: 1px solid var(--soft-line); }
.af__sec-h { display: flex; gap: 12px; align-items: baseline; margin: 0 0 8px; }
.af__sec-n { color: var(--gray-3); font-weight: 700; }
.af__sec-t { font-size: 1.15rem; font-weight: 700; }
.af__sec-note { margin: 0 0 12px; color: var(--gray-2); font-size: 0.85rem; max-width: 66ch; }
.af__subgroup { border: 1px solid var(--line) !important; padding: 14px !important; }
.af__subgroup-t { font-size: 0.85rem; font-weight: 700; margin: 0 0 8px; }
.af__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.af__checks { display: grid; gap: 8px; }
/* THE TAP FLOOR IS NOT A PHONE FEATURE. The 44px min-height for these labels was
   declared ONLY inside @media (max-width:900px), so 20 of the 21 checkbox targets
   on the application measured 21.3px tall at 1280 - below even the 24px AA floor -
   while passing on a phone. A pointer is not more accurate than a thumb by enough
   to matter, and this is the form somebody fills in to come work here. The floor
   now holds at EVERY width; the phone block's copy is left in place, harmless. */
.af__chk { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 4px 0; color: var(--gray-1); font-size: 0.95rem; }
.af__chk input { accent-color: var(--paper); margin-top: 3px; }
.af__help, .af__note { color: var(--gray-2); font-size: 0.8rem; }
.af__sig { display: grid; gap: 6px; }
.af__submitrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; }

/* ---- carried-vocabulary responsive ---- */
@media (max-width: 1180px) {
  .toolgrid, .ax-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fa__grid, .m2-asym { grid-template-columns: 1fr; }
  .ledger-section { grid-template-columns: 1fr; gap: 10px; }
  .section-number { font-size: var(--h-sec); }
  .hero-ledger { grid-template-columns: 1fr; }
  .af__grid, .af__pair { grid-template-columns: 1fr; }
  .fa__aside { position: static; }
  .m2-chapter { grid-template-columns: 1fr; gap: 10px; padding: 34px 0; }
  .m2-numeral { font-size: var(--h-sec); }
  .m2-step { grid-template-columns: 1fr; gap: 6px; }
  .bloglist__pin { grid-template-columns: 1fr; }
  /* the card is one column here, so the art rides above the words instead of
     beside them. Hiding it left the list with no pictures at all on a phone. */
  .bloglist__art { min-height: 0; margin: 0 0 12px; }
  /* three lines on a phone: at this width the longest titles lost their last
     line to a two-line clamp and the reader never saw the end of the sentence. */
  .bloglist__t { -webkit-line-clamp: 3; line-clamp: 3; }
  .tform__grid, .ax-form__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .toolgrid, .ax-grid { grid-template-columns: minmax(0, 1fr); }
  .tool--wide { grid-column: auto; }
  .ax-tile--feature, .ax-tile--tall { grid-row: auto; }
  .m2-ledger { grid-template-columns: 1fr; }
  .step { grid-template-columns: 40px 1fr; gap: 12px; }
  .card__line { grid-template-columns: 1fr; gap: 2px; }
}

/* ===================================================================
   AN EARLIER LAYOUT PASS — the plan compare popout (demo #23).
   Own cmp-/cacc- vocabulary; never the tile bar-N classes, whose
   media rules (min-height at <=900px) size foreign boxes. ============ */
.plan[data-cmp-open] { cursor: pointer; }
.cmp-open-row { margin-top: 18px; }
.cmp-more { margin: 10px 0 0; color: var(--gray-2); font-size: 0.95rem; }
.cmp-more .text-link { color: var(--paper); }
.cmp-ov {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(0, 0, 0, 0.74);
}
.cmp-ov[hidden] { display: none; }
.cmp-card {
  background: var(--ink);
  border: 1px solid var(--line);
  width: 100%;
  max-width: 1180px;
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
}
.cmp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.cmp-close {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  color: var(--paper);
  background: none;
  border: 1px solid var(--line);
  font-size: 1.3rem;
  line-height: 1;
}
.cmp-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.cmp-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow-y: auto;
}
.cmp-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px;
  border-right: 1px solid var(--line);
}
.cmp-col:last-child { border-right: 0; }
.cmp-col h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  letter-spacing: -0.03em;
  margin: 12px 0 14px;
}
.cmp-price {
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.05em;
  color: var(--acc-text, var(--paper));
}
.cmp-term, .cmp-build {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--gray-2);
}
.cmp-col ul,
.cmp-col > p {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  color: var(--gray-2);
  font-size: 0.85rem;
}
.cmp-col ul { padding-left: 0; }
.cmp-col li {
  margin: 4px 0;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.cmp-col .badge { margin-bottom: 0; }
.cmp-col.cacc-1 { --acc-text: #c97d75; }
.cmp-col.cacc-2 { --acc-text: #c29552; }
.cmp-col.cacc-3 { --acc-text: #9db36a; }
.cmp-col.cacc-4 { --acc-text: #6fbe8a; }
@media (max-width: 900px) {
  .cmp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-col { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .cmp-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ===== AN EARLIER LAYOUT PASS — the application uses the width it has.
   The pane uncaps and short fields run four across at desktop, so the
   form stops running as a skinny column (measured 4493px tall in two
   443px columns before this; the info sections stay at the top). ===== */
@media (min-width: 1100px) {
  .apply-pane { max-width: none; }
  .af__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .af__pair { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  /* the form flows as two newspaper columns — section order runs down
     the left column then the right, so the whole application reads in
     roughly half its stacked height. Sections never split mid-block. */
  .af { display: block; columns: 2; column-gap: 34px; }
  .af__sec { break-inside: avoid; margin: 0 0 26px; }
  .af__submitrow { break-inside: avoid; }
  /* paired blocks (Experience 1/2, License 1/2, yes/no pairs) sit side
     by side inside their section; a lone fieldset keeps the full row */
  .af__sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; align-items: end; }
  .af__sec > .af__sec-h, .af__sec > .af__sec-note, .af__sec > .af__checks, .af__sec > .af__grid { grid-column: 1 / -1; }
  .af__sec > fieldset:only-of-type { grid-column: 1 / -1; }
  /* inside a half-page column, field rows run two across */
  .af__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== SUPERSEDES THE TWO BLOCKS ABOVE FOR THE APPLICATION — 2026-08-12 =====
   That earlier pass was right for what it was solving: a 77-field form on ONE
   page ran 4,493px tall as a skinny column, so it was widened to four-across
   fields and two newspaper columns. That optimisation IS the reported defect -
   two gigantic stacked boxes with fields all over the place - and the
   application-form standard rules against it directly: Baymard finds multi-column form
   structure slows scanning and breaks on a phone; one column only.
   The height problem it solved is now solved better, by the wizard: no step is
   tall, so no column trick is needed. The rules above are LEFT IN PLACE rather
   than deleted, so the reasoning stays on the record, and are overridden here.
   Scoped to the wizard (.af:has(.af__step)) so any other .af form keeps the
   old behaviour, with a plain .af fallback for engines without :has(). */
@media (min-width: 1100px) {
  .af { display: grid; columns: auto; column-gap: normal; gap: 18px; }
  .af__sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; }
  .af__grid, .af__pair { grid-template-columns: minmax(0, 1fr); }
  /* a one-column form must not run the full width of an uncapped pane - long
     line lengths are their own reading defect. This is the measure, not the pane. */
  .apply-pane { max-width: 780px; }
}

/* ===== AN EARLIER LAYOUT PASS — lifted panel surfaces. Measured on the live
   render: .tool 1.00:1, .tool__art/.plan/.part-tile/frames 1.06:1 against
   the black ground — panels that existed only as borders. One panel tone
   (warm, in the paper-tile language, 1.34:1 vs #000) lifts the class.
   Paper surfaces (.featured, .pt-light) keep their own ground. ===== */
:root { --panel: #232320; }
.tool, .tool__art,
.part-tile, .plan, .post__hero, .card,
.mslot, .media-frame, .role-step, .process-step,
.film-frame, .show-tile, .ax-tile, .bento-tile {
  background: var(--panel);
}
/* residuals caught by the after-sweep: compound selectors outrank the
   single-class lift, and the art well needs its own step off the panel */
.film-card .film-frame { background: var(--panel); }
.hero-ledger-item { background: var(--panel); }
.tool__art { background: var(--black); }

/* ===== AN EARLIER LAYOUT PASS — the crushed column. .fact-row is a
   44px/1fr grid for a number span + body; a row written with no span
   auto-places its lone <p> into the 44px NUMBER track — one word per line
   (/work/ "Numbers we have not checked…", measured 44px). A lone <p> owns
   the full row. ===== */
.fact-row > p:only-child { grid-column: 1 / -1; }

/* Same class, second member (the sweep's find): .parts-grid is a weighted
   4-across built for the full-width band; /pricing/ carries it inside the
   half-width ledger-main, crushing sentence h4s to 91–94px (~10 chars/line,
   measured). In that container it runs 2×2 — but only above 620px, where
   the sitewide single-column phone collapse must keep winning. */
@media (min-width: 621px) {
  .ledger-main .parts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ledger-row.compact.lg-drop { min-height: 0; grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1.5fr); }
/* this is the rule that actually paints the big index numerals - it is
   more specific than .ledger-number and was still resolving to 89.6px on /about/,
   LARGER than that page's own H1. Retuned to sit under the title it labels. */
.lg-drop .ledger-number { font-size: var(--h-sec); padding-top: 30px; }
.lgd { border-left: 1px solid var(--soft-line); min-width: 0; }
.lgd-sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(22px, 3vw, 38px) clamp(28px, 4vw, 68px); }
.lgd-sum::-webkit-details-marker { display: none; }
.lgd-sum::after { content: "+"; flex: 0 0 auto; color: var(--gray-2); font-size: 1.5rem; line-height: 1; }
.lgd[open] > .lgd-sum::after { content: "\2212"; }
.lgd-h { margin: 0; font-size: clamp(1.35rem, 2.1vw, 2rem); letter-spacing: -0.03em; font-weight: 400; }
.lgd-sum:hover .lgd-h, .lgd-sum:focus-visible .lgd-h { text-decoration: underline; }
.lgd-sum:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
.lgd-body { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.55fr); }
.lgd-body .ledger-main { border-left: 0; padding-top: 0; }
.lgd-body .ledger-side { padding-top: 0; }
@media (max-width: 900px) {
  .ledger-row.compact.lg-drop { grid-template-columns: 1fr; }
  .lg-drop .ledger-number { font-size: var(--h-sec); padding: 22px 22px 0; }
  .lgd { border-left: 0; }
  .lgd-sum { padding: 18px 22px; }
  .lgd-body { grid-template-columns: 1fr; }
}

/* ---- the tier detail popout (note 17):
   one tier at a time, every included item in plain words, the custom
   tools named, the build time as HIS slot ---- */
.td-ov {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
}
.td-ov[hidden] { display: none; }
/* his ruling 08-12, final shape: tier bars open the CARD; "Want even more
   details? Click here" opens the FULL-SCREEN tabbed switcher (piece 16);
   Compare the plans keeps the compare popout. */
.td-ov--full { padding: 0; }
.td-ov--full .td-card {
  width: 100vw; height: 100vh; max-height: 100vh;
  border: 0; padding: 16px clamp(24px, 4vw, 64px) 24px;
}
/* his order 08-12, third telling: condense BOTH popup shapes - the card and
   the full switcher. Header folds to one line, air tightens, no scroll. */
.td-ov .plan-label, .td-ov .badge { display: inline-block; margin: 0 12px 0 0; vertical-align: middle; }
.td-ov .td-panel h4 { display: inline; font-size: 1.4rem; margin: 0 14px 0 0; vertical-align: middle; }
.td-ov .cmp-price { display: inline; font-size: 1.4rem; font-weight: 700; margin: 0 10px 0 0; vertical-align: middle; }
.td-ov .cmp-term, .td-ov .cmp-build { display: inline; margin-right: 12px; vertical-align: middle; }
.td-ov .td-buildtime { margin: 8px 0 0; padding: 5px 9px; font-size: 0.78rem; }
.td-ov .td-h { margin: 12px 0 6px; }
.td-ov .td-list dt { margin-top: 8px; font-size: 0.88rem; }
.td-ov .td-list dd { font-size: 0.85rem; }
.td-ov .s1-action-row { margin-top: 14px; }
@media (min-width: 1100px) { .td-ov--full .td-list { columns: 3; column-gap: 40px; } }
.td-card {
  width: min(980px, 94vw);
  max-height: 86vh;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 22px 28px 28px;
}
/* On a phone the card was capped at 86vh with taller content inside it, so the
   reader was scrolling a box inside a page that is held still - the one thing
   the ruling forbids. Below this width the card stops being a scroller and the
   sheet moves as one surface, with the head still pinned to the top of it. */
@media (max-width: 900px) {
  .td-ov { align-items: flex-start; overflow: auto; overscroll-behavior: contain; }
  .td-card, .td-ov--full .td-card { max-height: none; height: auto; overflow: visible; }
  .td-ov--full .td-card { min-height: 100vh; }
}
/* the detail-page switcher: the four names ride the top of each plan page;
   the current one is lit; a click swaps to that package's page */
.plan-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.plan-tabs .td-tab { text-decoration: none; display: inline-flex; align-items: center; }
.plan-tabs .td-tab[aria-current="page"] { background: var(--paper); color: var(--black); border-color: var(--paper); }
@media (min-width: 901px) {
  .td-list { columns: 2; column-gap: 48px; }
  .td-list dt { break-inside: avoid; break-after: avoid; }
  .td-list dd { break-inside: avoid; }
}
/* the card's close never scrolls away - same law as the tool wells */
.td-card .cmp-head, .cmp-card .cmp-head {
  position: sticky; top: -22px; z-index: 5;
  background: var(--ink); margin-top: -22px; padding-top: 22px;
}
/* his order 08-12: the tools page tabbed switcher (piece 16) - names as tabs,
   the picked one gold-underlined, panels swap in place */
.tool-tabs { display: flex; flex-wrap: wrap; gap: 2px 24px; border-bottom: 1px solid var(--line); margin: clamp(20px,3vh,34px) 0 26px; }
/* SITEFIX-0813: the tap floor was written down on one axis only. min-height
   held 44px, but padding 10px 2px 12px makes the box the WORD plus 4px, so a
   short label fell under the floor on the NARROW axis: "Home" measured
   43.3 x 44.6 on 25 pages and "FAQ" 33.5 x 44.6 - 26 of 164 tabs. min-width
   closes the second axis; justify-content centres the label inside the wider
   box (a.tool-tab is inline-flex, so without it the text packs left). The
   other 138 tabs are already wider than 44px and do not move. */
.tool-tab {
  appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--paper); font: inherit; font-size: 0.92rem; padding: 10px 2px 12px;
  min-height: 44px; min-width: 44px; justify-content: center; cursor: pointer;
}
.tool-tab[aria-selected="true"] { font-weight: 700; border-bottom-color: #C9A227; }
.tool-tab:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* the interior top tab row. The tools-page .tool-tabs/.tool-tab device is
   reused VERBATIM (never a new skin); only the anchor variant is declared
   here, because an inline <a> ignores min-height and the 44px tap floor
   would be a number that is written down but not real. */
a.tool-tab { display: inline-flex; align-items: center; text-decoration: none; }
a.tool-tab[aria-current] { font-weight: 700; border-bottom-color: #C9A227; }
/* the device normally sits inside a padded band; here it sits straight in
   the content column, so it has to carry the column inset itself or it
   bleeds to x=0 while the h1 above it starts at var(--pad). Measured: h1
   left 41px @1280 / 22px @390 vs the row at 0. Mirrors .page-head exactly,
   including its 22px phone override, so the two stay locked together. */
.page-tabs { margin-top: 0; padding-left: var(--pad); padding-right: var(--pad); }
@media (max-width: 900px) {
  .page-tabs { padding-left: 22px; padding-right: 22px; }
}
.tool-panel[hidden] { display: none; }
.tool-panel { max-width: 760px; }
.tool-panel__name { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 0 0 6px; }
.tool-panel__price { margin: 0 0 12px; }
.tool-panel__price .price { font-size: 2rem; font-weight: 700; }
.tool-panel__per { color: var(--gray-1); margin-left: 2px; }
.tool-panel__h { margin: 18px 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tool-panel ul { margin: 0; padding-left: 20px; }
.tool-panel li { margin: 5px 0; }

/* his order 08-12: the audit form wears the CALENDAR's glass - the flat
   black/grey boxes died ("im over it"). Same recipe as the book-page surface:
   fill .06, line .16, 18px, blur 16. */
.audit-form {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  padding: 24px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.audit-form input[type="text"], .audit-form input[type="url"] {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  color: var(--paper);
}
.audit-form input[type="text"]:focus-visible, .audit-form input[type="url"]:focus-visible {
  outline: 2px solid var(--paper); outline-offset: 1px;
}
.audit-form .button { border-radius: 12px; }
.af-add { margin: 4px 0 12px; min-height: 44px; }
.af-extra__head { margin-top: 18px; }

/* the four names ride the top of the card - click one, that package opens */
.td-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
/* his order 08-12: the tabs wear the SAME metal plaques as the tier buttons -
   bronze/silver/gold/platinum, sliced from his blessed image. The picked tab
   burns full-bright with a white edge; the rest sit dimmed. Names are baked
   into the metal; live text stays for screen readers. */
.td-tab {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.85rem;
  border: 1px solid var(--line); color: #000;
  min-width: 158px; min-height: 46px; padding: 0;
  background: var(--black) center / cover no-repeat;
  filter: brightness(0.55);
}
.td-tab[data-td-tab="1"] { background-image: url(/assets/img/home/tier/tex-1-bronze.png); }
.td-tab[data-td-tab="2"] { background-image: url(/assets/img/home/tier/tex-2-silver.png); }
.td-tab[data-td-tab="3"] { background-image: url(/assets/img/home/tier/tex-3-gold.png); }
.td-tab[data-td-tab="4"] { background-image: url(/assets/img/home/tier/tex-4-platinum.png); }
.td-tab:hover { filter: brightness(0.85); }
.td-tab[aria-selected="true"] { filter: none; border-color: var(--paper); outline: 2px solid var(--paper); outline-offset: 1px; }
.td-tab:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.td-panel[hidden] { display: none; }
.td-panel h3,
.td-panel h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  line-height: 1.4;
  margin: 10px 0 12px;
}
/* The build-time line carries the ruled range statement. .td-buildtime is
   display:inline-block, so a `hidden` attribute needs its own rule here - this
   tree carries no global [hidden] declaration. The rule stays as a guard. */
.td-buildtime[hidden] { display: none; }
.td-buildtime {
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--gray-2);
  display: inline-block;
  font-size: 0.85rem;
  color: var(--gray-1);
}
.td-h {
  margin: 22px 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-2);
}
.td-list { margin: 0; }
.td-list dt { font-weight: 700; font-size: 0.92rem; margin-top: 12px; }
.td-list dd { margin: 3px 0 0; font-size: 0.88rem; color: var(--gray-1); }

/* ===== token/scheme repairs, measured on the rendered pages.
   1) The panel lift outranks .ax-tile--gilt by source order (equal
      specificity) and stole the gilt tile's paper face — restore it.
   2) Inside light bands, dark boxes keep dark-scheme text, and secondary
      text uses the band's own tones (the tools template mixed schemes:
      black h2 on ink 1.06:1, #33332f caveats on ink 1.56:1, gray-2 on
      paper 2.12:1).
   3) The audit band's CTAs were paper-on-paper 1.0:1 — they follow the
      band's ink like the .btn family already does.
   4) Small glyph labels step up one tone to clear 4.5:1 on their grounds
      (mono 4.10, card keys 3.26, card foot 4.35 — all measured). ===== */
.ax-tile--gilt { background: var(--paper); }
.ax-tile__mono { color: var(--gray-2); }
.ax-tile--gilt .ax-tile__mono, .ax-tile--gilt .ax-tile__gate { color: #4d4d49; }
.card__k { color: var(--gray-2); }
.card__foot { color: var(--gray-2); }
/* the .band--offer compensations moved to the R3 face layer at the end of this
   file — #4d4d49 / #33332f were dark-on-paper and go invisible on the restored
   ground. The components under them (.tdetail__need, .tform, .tsig__*) were
   authored dark-native all along. */
.s3-audit-band .button, .s3-audit-band .text-link { color: var(--black); border-color: var(--black); }
.s3-audit-band .button:hover, .s3-audit-band .button:focus-visible { color: var(--paper); background: var(--black); }

/* ===== mobile structure: the rail's phone shape + the component floors.
   The drawer carries the FULL 12-tab rail (the full-rail ruling) behind a
   typographic MENU toggle — words, never icon glyphs. The interim wrap row
   folds away; the drawer is the rail's phone shape. Floors are the classes
   measured at 375: taps to 44px, form text to 16px, labels to 12px. ===== */
.mnav { display: none; }
@media (max-width: 900px) {
  .mnav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 18px;
    background: var(--black);
    border-bottom: 1px solid var(--soft-line);
  }
  .mnav__brand { font-family: var(--serif); font-size: 1.05rem; color: var(--paper); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
  .mnav__toggle {
    appearance: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    color: var(--paper);
    background: transparent;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }
  .mnav__toggle[aria-expanded="true"] { color: #fff; background: transparent; }
  .mnav__drawer {
    position: fixed;
    inset: 54px 0 0 0;
    z-index: 39;
    overflow: auto;
    padding: 10px 18px 30px;
    background: var(--ink);
    border-top: 1px solid var(--soft-line);
  }
  .mnav__drawer[hidden] { display: none; }
  .mnav__drawer a {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 48px;
    color: var(--gray-1);
    border-bottom: 1px solid var(--soft-line);
    font-weight: 700;
    text-decoration: none;
  }
  .mnav__drawer a span:first-child { color: var(--gray-3); font-size: 0.78rem; }
  .mnav__drawer a[aria-current="page"] { color: var(--paper); }
  .mnav__drawer a[aria-current="page"] span:last-child { border-bottom: 1px solid var(--paper); }
  .mnav__phone { display: flex; justify-content: space-between; align-items: center; min-height: 48px; margin: 8px 0 0; }
  .mnav__phone a { color: var(--paper); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
  /* The phone drawer's booking door. The drawer is the only menu a phone
     visitor sees, and it carried no route to the calendar on any page. This
     entry sits ABOVE the numbered run and deliberately outside it - those
     numbers are a complete set - because it is the money path. Its closed
     state is the drawer's own [hidden] rule above; nothing here puts a
     display on a [hidden] element, which is what would defeat it. */
  .mnav__drawer .mnav__book { display: block; margin: 2px 0 14px; }
  .mnav__drawer .mnav__book a {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px;
    color: var(--black);
    background: var(--paper);
    border: 1px solid var(--paper);
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .mnav__drawer .mnav__book a span:first-child { color: var(--black); font-size: 1rem; }
  .mnav__drawer .mnav__book a[aria-current="page"] { color: var(--black); }
  .mnav__drawer .mnav__book a[aria-current="page"] span:last-child { border-bottom: 0; }
  .s1-left .rail-nav { display: none; }

  input, select, textarea { font-size: 16px; }
  .cform__in, .tform__f input, .tform__f textarea, .ax-form__f input, .ax-form__f textarea,
  .af__in, .af__ta { min-height: 44px; }
  .in-foot a, .text-link, .spoke, .post__back, .bloglist__read a,
  .card__v a, a.card__v { min-height: 44px; display: inline-flex; align-items: center; }
  .af__l { font-size: 12px; }
  .af__chk { min-height: 44px; align-items: center; }
  .af__help, .af__note { font-size: 12px; }
  .eyebrow, .kicker, .field-label, .plan-label, .section-kicker,
  .cform__label, .badge, .mslot__label, .tool__plate, .ax-tile__mono,
  .bloglist__meta, .post__meta, .tform__promise, .cform__note, .ax-tile__gate,
  .tdetail__per, .tsig__k, .m2-kicker, .m2-step__fig,
  .card__k, .tiny-label, .v3x-eyebrow, .hero-ledger-label, .edition,
  .form-kicker, .sec-label, .m2-ledger dt, .spoke { font-size: 12px; }
}

/* OS scheme support baseline */
@media (forced-colors: active) {
  img, video, canvas { forced-color-adjust: none; }
  .button, button { border: 1px solid ButtonText; }
  a { text-decoration: underline; }
}
@media (prefers-contrast: more) {
  :root {
    --gray-2: #cfcfca;
    --gray-3: #a3a39e;
    --soft-line: rgba(255, 255, 255, 0.35);
    --line: #6b6b6b;
  }
}

.s1-left {
  align-self: stretch;
  position: static;
  height: auto;
  display: block;
  padding: 0;
}
.s1-left-in {
  position: sticky;
  top: 0;
  max-height: 100vh;
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 26px 24px;
}
/* the raised hiring stop reads as a live door without inventing a word of copy */
.s1-nav .rail-hire span:last-child,
.rail-nav .rail-hire span:last-child { color: var(--paper); }

@media (max-width: 1180px) {
  .s1-left { padding: 0; }
  .s1-left-in { padding: 20px 16px; }
}
@media (max-width: 900px) {
  .s1-left { padding: 0; border-bottom: 1px solid var(--soft-line); }
  .s1-left-in {
    position: static;
    max-height: none;
    overflow: visible;
    gap: 14px;
    padding: 22px;
  }
}

.cnst {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}
/* THE CARD READS AS A CARD. It carried the page's own border and background already, then gave
   both up at 620px - border-left:0, border-right:0, and the wrapper's padding to 0 - so on a
   phone it landed as a full-bleed slab of the same near-black as the page behind it, with no edge
   anywhere and no corner. That is what made a legal notice look like debug output. It keeps its
   border on all four sides now, takes the sheet's own --radius, and sits in the same gutter every
   other panel on the site sits in. */
.cnst__card {
  pointer-events: auto;
  width: min(760px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--ink);
  border: 1px solid var(--soft-line);
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 22px);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
  animation: cnst-rise 260ms ease-out both;
}
/* .cnst__t and .cnst__fine are no longer emitted - the notice is one sentence as of
   HORSE-SMALLTEXT-0824. Their rules are KEPT, not deleted: consent.js is served with a cache
   key, so a browser holding the older copy of the script still builds a headline and a
   fine-print line, and an unstyled one of those is the exact defect this pass removed. */
.cnst__t {
  margin: 0 0 10px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.3rem;
  outline: 0;
}
/* THE NOTICE ITSELF. It is one sentence of body copy in the page's own kit - the site's body
   size and its --gray-1 body colour, not fine print in --gray-2 - because a sentence a visitor
   is being asked to answer is not a footnote. It is also the focus target, so it takes the
   sheet's own focus ring rather than the browser's default outline on a paragraph. */
.cnst__p {
  margin: 0 0 14px;
  color: var(--gray-1);
  font-size: 1rem;
  line-height: 1.55;
  outline: 0;
}
.cnst__p a { color: var(--paper); }
.cnst__p strong { color: var(--paper); }
.cnst__q {
  margin: 0 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--soft-line);
  color: var(--gray-2);
  font-size: 0.85rem;
  line-height: 1.5;
}
.cnst__q strong { color: var(--paper); }
.cnst__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cnst__b { flex: 1 1 240px; }
.cnst__fine {
  margin: 14px 0 0;
  color: var(--gray-3);
  font-size: 0.8rem;
  line-height: 1.5;
}
.cnst__fine a { color: var(--gray-2); }
@keyframes cnst-rise {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cnst__card { animation: none; }
}
@media (max-width: 620px) {
  /* the gutter and the four borders STAY on a phone - this is where the slab was made. Only the
     stacking of the two answers is phone-specific. */
  .cnst { padding: 0 12px 12px; }
  .cnst__b { flex: 1 1 100%; }
}

/* ===== THE MENU DEVICE — a labeled control opening a grouped panel =====
   The control is a WORD, never an icon glyph, and it is visible rather than
   hidden behind a corner mark — the same rule the phone bar's toggle follows,
   so the two read as one voice.

   Desktop only, on purpose. At 900px and below the phone bar already carries
   its own labeled Menu and its drawer; a second Menu on one screen is two
   devices doing one job. The control hides there and the phone bar is
   untouched.

   The panel is grouped, not a flat list: a site this size cannot be navigated
   from one column of links. Groups are laid out in columns on a wide screen
   and stack on a narrow one.

   Closed, the panel is visibility:hidden — that takes its links out of the tab
   order instead of leaving them focusable off-screen, which is what a panel
   parked with transform alone does. */
.menu-btn{position:fixed;top:18px;right:18px;z-index:62;appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;font-family:inherit;font-size:1.5rem;line-height:1;color:var(--paper,#edf1f6);background:transparent;border:0;}
.menu-btn:hover{color:#ffffff;background:transparent;}
.menu-btn:focus-visible{outline:2px solid var(--paper,#edf1f6);outline-offset:2px;}
.menu-btn[aria-expanded="true"]{color:var(--paper,#edf1f6);}
@media (max-width: 900px){.menu-btn{display:none;}}

.menu-panel{position:fixed;top:0;right:0;height:100vh;height:100svh;width:min(1080px,96vw);z-index:61;visibility:hidden;transform:translateX(102%);transition:transform 0.22s ease, visibility 0s linear 0.22s;background:#0a0a0b;border-left:1px solid var(--glass-line,rgba(255,255,255,0.16));box-shadow:-24px 0 60px rgba(0,0,0,0.55);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:0 0 22px;}
.menu-panel.open{visibility:visible;transform:none;transition:transform 0.22s ease, visibility 0s;}
.menu-panel__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 26px 14px;border-bottom:1px solid rgba(255,255,255,0.10);position:sticky;top:0;background:#0a0a0b;z-index:1;}
.menu-panel__head b{font-size:0.8rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--paper,#edf1f6);}
.menu-panel__close{appearance:none;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,0.2);border-radius:6px;color:var(--paper,#edf1f6);font-family:inherit;font-size:1rem;line-height:1;min-height:44px;min-width:44px;}
.menu-panel__close:hover{background:rgba(255,255,255,0.06);}
.menu-panel__close:focus-visible{outline:2px solid var(--paper,#edf1f6);outline-offset:2px;}
/* his order 08-12: the menu tightened - rows keep the 44px touch floor, the
   AIR between rows/groups dies so the panel stops scrolling for no reason */
.menu-panel__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 26px;padding:14px 26px 6px;align-items:start;}
/* Every column also carries its own modifier (.menu-grp--tools and friends) so
   a single column can be tuned without touching the rest. They are deliberate
   handles, not decoration. */
.menu-grp{min-width:0;margin-bottom:8px;}
.menu-grp__h{display:block;font-size:0.76rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--glass-kicker,#9fb6e0);padding:0 0 5px;border-bottom:1px solid rgba(255,255,255,0.10);margin-bottom:3px;}
.menu-panel a{display:flex;align-items:center;min-height:44px;padding:2px 8px;margin:0 -8px;border-radius:6px;color:var(--paper,#edf1f6);text-decoration:none;font-size:0.9rem;line-height:1.2;}
/* the Paid Audit chip - white with black letters, focus tooltip carries what it
   adds over the free check (the filed $500 tile copy, nothing invented) */
.menu-panel a.mp-paid{position:relative;background:var(--paper,#edf1f6);color:#000;font-weight:700;}
.menu-panel a.mp-paid:hover,.menu-panel a.mp-paid:focus,.menu-panel a.mp-paid:focus-visible{background:#fff;color:#000;}
.mp-tip{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:6;min-width:250px;background:#000;color:var(--paper,#edf1f6);border:1px solid var(--paper,#edf1f6);border-radius:8px;padding:10px 12px;font-size:0.8rem;font-weight:400;line-height:1.55;}
.mp-paid:hover .mp-tip,.mp-paid:focus .mp-tip,.mp-paid:focus-visible .mp-tip{display:block;}
/* desktop fine-pointer: compact rows (the 44px floor is a TOUCH floor) and the
   two tall groups run two columns - the panel stops scrolling for no reason */
@media (hover:hover) and (pointer:fine){
  .menu-panel a{min-height:34px;padding:1px 8px;font-size:0.88rem;}
  .menu-panel a.mp-paid{min-height:38px;}
}
.menu-grp--tools>a,.menu-grp--writing>a{break-inside:avoid;}
@media (min-width: 901px){
  .menu-grp--tools{column-count:2;column-gap:24px;}
  .menu-grp--writing{column-count:2;column-gap:24px;}
  .menu-grp--tools>.menu-grp__h,.menu-grp--writing>.menu-grp__h{column-span:all;}
}
.menu-panel a:hover,.menu-panel a:focus-visible{background:rgba(255,255,255,0.06);}
.menu-panel a:focus-visible{outline:2px solid var(--paper,#edf1f6);outline-offset:-2px;}
.menu-panel__foot{display:flex;flex-wrap:wrap;gap:0 22px;padding:14px 26px 0;margin-top:auto;border-top:1px solid rgba(255,255,255,0.10);}
.menu-panel__foot a{font-size:0.84rem;color:var(--gray-1,#cfcfca);}
@media (max-width: 1180px){.menu-panel__grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width: 900px){.menu-panel__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 620px){.menu-panel{width:min(420px,92vw);}.menu-panel__grid{grid-template-columns:minmax(0,1fr);}}
@media (prefers-reduced-motion: reduce){.menu-panel{transition:visibility 0s;}.menu-panel.open{transition:visibility 0s;}}
/* F-1 tap floor. The back-to-top control renders 57.66 x 39.47px at a true 390 on
   the 46 pages that carry it - 4.53px under the 44px touch floor, and the only
   sub-44 control among the tap targets on those pages. The button is styled by a
   per-page inline block that declares no min-height, so one rule here reaches all
   46 without touching 46 files. Boxes were measured, not declarations read. */
.to-top{min-height:44px;}
.rail-nav a[aria-current="true"],.s1-nav a[aria-current="true"],.mnav__drawer a[aria-current="true"]{color:var(--gray-1,#cfcfca);}
.rail-nav a[aria-current="true"] span:last-child,.s1-nav a[aria-current="true"] span:last-child,.mnav__drawer a[aria-current="true"] span:last-child{border-bottom:1px dotted var(--gray-2,#a7a7a2);padding-bottom:2px;}
/* the ruled Team sign-in link — the footer's existing small-link look, no new
   colour and no button treatment, exactly as the 08-10 handoff specifies */
.footer-team-link{color:inherit;}


:root {
  --glass-fill: rgba(255, 255, 255, 0.06);
  --glass-line: rgba(255, 255, 255, 0.16);
  --glass-radius: 18px;
  --glass-blur: 16px;
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --glass-kicker: #9fb6e0;
}

/* the one elevated surface every interior can use */
.glass {
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  color: var(--paper);
}

/* ---- WORST #1 — the 9 tool detail pages -----------------------------
   .band--offer is used by those 9 pages and nothing else (measured). It set
   `background: var(--paper)`, which inverted the ruled ground across
   57.6-65.9% of each page. The components inside it (.tdetail__need,
   .tform, .tsig__*) were authored DARK-NATIVE (background: var(--ink),
   color: var(--gray-1)) and were being compensated back to light by four
   override rules. Dropping the paper ground RESTORES them; it does not
   re-skin them. .band--close (the /tools/ index accent band, one band at
   7.4% of that page) keeps paper on purpose and is split out below. */
.band--close { color: var(--black); background: var(--paper); }
.band--close .sec-label { color: #4d4d49; }
.band--close .sec-intro, .band--close p { color: #33332f; }
.band--close .sec-h2, .band--close h2 { color: var(--black); }

.band--offer {
  color: var(--paper);
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(30, 58, 110, 0.38), transparent 62%),
    radial-gradient(620px 380px at 4% 108%, rgba(110, 90, 30, 0.16), transparent 60%),
    var(--black);
}
.band--offer .sec-label { color: var(--glass-kicker); }
.band--offer .sec-intro, .band--offer p { color: var(--gray-1); }
.band--offer .sec-h2, .band--offer h2 { color: var(--paper); }

/* the offer's own furniture, on the restored ground */
.band--offer .tdetail__need,
.band--offer .tdetail__honest,
.band--offer .tform {
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  color: var(--gray-1);
}
.band--offer .tdetail__need h2,
.band--offer .tdetail__honest h2,
.band--offer .tform__head { color: var(--paper); }
.band--offer .tdetail__need p,
.band--offer p.tdetail__honest,
.band--offer .tdetail__honest p { color: var(--gray-1); }
.band--offer .tdetail__price { color: var(--paper); }
.band--offer .tdetail__per { color: var(--gray-2); }
.band--offer .tsig__t { color: var(--paper); }
.band--offer .tsig__b { color: var(--gray-2); }
/* .tsig__k holds a sentence-case section label ("What it looks like"), not a
   kicker. Rendering it in the blue accent made it read as a link in the
   injected frame, so it stays neutral — the accent is reserved for true
   uppercase kickers (.sec-label, .pagemsg__code). --gray-2 also lifts it off
   the base --gray-3, which is 4.36:1 at 16px bold and under the 4.5 floor. */
.band--offer .tsig__k { color: var(--gray-2); }
.band--offer .tsig { margin-top: 40px; }
.band--offer .tool__plate { color: var(--gray-2); }
.band--offer .tdetail__b { color: var(--gray-1); }
.band--offer .text-link, .band--offer a { color: var(--paper); }

/* The paper ground had its own button rule — `.band--offer .btn { color:
   var(--black) }` — which the live-injection pass caught at 1.1:1 the moment
   the ground went black ("Send the request", 16px, black on the glass). The
   primary action becomes the homepage's OWN blessed blue bubble (.bk-go,
   copied number for number out of index.html, same as R2 did for the band),
   so the tool pages carry the same primary action the homepage does. */
.band--offer .btn, .band--offer .tform__submit {
  position: relative; overflow: hidden; cursor: pointer; appearance: none;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.84rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #eaf1ff;
  background: linear-gradient(160deg, rgba(120,170,255,.38) 0%, rgba(56,108,200,.16) 38%, rgba(30,58,110,.12) 60%, rgba(120,170,255,.20) 100%);
  border: 1px solid rgba(140, 180, 255, 0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px rgba(15,40,100,.55), 0 0 24px rgba(90,140,255,.22), inset 0 2px 6px rgba(190,215,255,.45), inset 0 -6px 14px rgba(10,25,60,.35);
  transition: all 0.35s ease;
}
.band--offer .btn::after, .band--offer .tform__submit::after {
  content: ""; position: absolute; top: 7%; left: 12%; width: 42%; height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  border-radius: 999px; pointer-events: none;
}
.band--offer .btn:hover, .band--offer .btn:focus-visible,
.band--offer .tform__submit:hover, .band--offer .tform__submit:focus-visible {
  color: #eaf1ff;
  background: linear-gradient(160deg, rgba(120,170,255,.38) 0%, rgba(56,108,200,.16) 38%, rgba(30,58,110,.12) 60%, rgba(120,170,255,.20) 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 44px rgba(15,40,100,.6), 0 0 38px rgba(100,150,255,.4), inset 0 2px 8px rgba(200,222,255,.6), inset 0 -6px 14px rgba(10,25,60,.35);
}
/* the secondary action on that ground stays the site's outline button */
.band--offer .btn--ghost {
  padding: 0 20px; border-radius: 0; text-transform: none; letter-spacing: normal;
  font-size: 1rem; color: var(--gray-1); border: 1px solid var(--gray-3);
  background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.band--offer .btn--ghost::after { content: none; }

/* ---- WORST #2 — /book/, the booking surface -------------------------
   The Cal.com wrapper carried `background: var(--paper)` as an INLINE style,
   so the calendar sat on a 993x642 cream slab (30.6% of the page) with no
   frame and no class. It becomes the same glass surface as everything else.
   The embed itself is third party: see the receipt's UNVERIFIED note. */
.embed-surface {
  max-width: 1000px;
  margin-top: 30px;
  padding: 10px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  color: var(--paper);
}
.embed-surface > div { border-radius: calc(var(--glass-radius) - 8px); overflow: hidden; }
.embed-surface .embed-wait {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  min-height: 640px;
  padding: 26px;
  color: var(--gray-2);
}
.embed-surface .embed-wait strong { color: var(--paper); font-weight: 700; }

/* ---- WORST #3 — the three receipt/error pages -----------------------
   .pagemsg__code was built as a 404 NUMERAL: 128px at 1280, line-height 0.8,
   colour var(--gray-4) #252525 = 1.37:1 on black. All three pages put a
   PHRASE in it ("Request received", "Application received", "Error 404"), so
   it wrapped to two lines and became a grey slab sitting on top of the real
   headline. It becomes the site's own eyebrow — the section language every
   other page already uses — and the headline joins the one display scale
   (.page-display's clamp), so these pages stop being off-system. */
.pagemsg { min-height: auto; }
.pagemsg__code {
  margin: 0 0 18px;
  color: var(--glass-kicker);
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
}
.pagemsg__h1 {
  max-width: 18ch;
  font-size: clamp(2.4rem, 4.6vw, 4.8rem);
  letter-spacing: -0.045em;
}
.pagemsg__in { max-width: 820px; }


:root {
  --h-sec: clamp(1.6rem, 2.4vw, 2.5rem);   /* 30.72px at 1280 — the section head */
  /* the step under it. NOT invented: this is the homepage's OWN .part-tile h3
     clamp, which /free-audit/, /pricing/ and /work/ already carry. Matching it
     means the interior card head wears the homepage component rather than a
     third size sitting between the two. 25.6px at 1280, 22.4px at 390. */
  --h-sub: clamp(1.4rem, 2vw, 2.1rem);
}

.prose h2,
.fa__next-h,
.lgd-h,
.plain__h,
.bloglist__t,
.section-heading,
.apply-title,
.sec-h2 {
  font-size: var(--h-sec);
  letter-spacing: -0.03em;
}

/* the nested variants keep their smaller step — they are a level down, not the
   same level set differently. Both were a flat 1.25rem with no viewport slope,
   so they alone did not scale with everything around them. */
.fa__next .fa__next-h,
.fa__paid .fa__next-h {
  font-size: var(--h-sub);
}

@media (max-width: 900px) {
  .cnst__card { max-height: 52vh; }
}




/* ============================================================================
   TOOL SIGNATURE FACES ON THE TOOL SURFACES (W1)
   The homepage band device, verbatim, with its band ID scope replaced by a
   marker the face itself carries. It mounts in the ruled STILL state
   (.is-settled), so no @keyframes are needed and nothing animates inside a link.
   Appended last on purpose: it has to outrank the .tool__art placeholder-plate
   rules earlier in this sheet at equal specificity.
   ========================================================================== */
/* W1 — the nine catalog tiles wear the RULED signature faces, not the monogram
   plates the walk rejected and not an empty black box. Device, skin and still
   state are lifted from the homepage band verbatim; only the scope changed
   (the band ID scope becomes .tsf--site, carried on the face itself). Nothing new. */
.tsf--site {
  --g-line-soft:   rgba(255, 255, 255, 0.12);
  --g-blue-edge:   rgba(140, 180, 255, 0.45);
  --g-blue-ink:    #eaf1ff;
  --g-blue-kick:   #9fb6e0;
  --g-blue-fill:   linear-gradient(160deg, rgba(120,170,255,.38) 0%, rgba(56,108,200,.16) 38%, rgba(30,58,110,.12) 60%, rgba(120,170,255,.20) 100%);
}
/* the art well becomes the frame the face sits in: same device, same skin, no
   plate. The face is inert on these surfaces — a catalog tile is a link, so the
   demo is a STILL and the click belongs to the tile.
   ONE fixed art height, not min-height: the faces have different intrinsic heights
   (measured 150-219px across the nine at both widths) and a bento of ragged art
   wells is exactly the "equal card" discipline the tile round already ruled. The
   face centres itself inside it — .tsf is a grid with align-content:center — so
   nothing is clipped at the height chosen. */
.toolgrid .tool__art { height: 226px; min-height: 0; padding: 0; background: transparent; display: block; }
.toolgrid .tool__art::after { content: none; }
/* the tool's own page carried the same rejected monogram plate in a 8:5 well on five
   of the nine. Opt-in class rather than :has(), so the state is emitted by the same
   pass that emits the face and cannot drift out of step with it. */
.tdetail__art--face { aspect-ratio: 8 / 5; display: block; padding: 0; background: none; border: 0; }
.tdetail__art--face::after { content: none; }
.toolgrid .tsf--site, .tdetail__art--face > .tsf--site { width: 100%; height: 100%; min-height: 0; }
@media (max-width: 620px) { .toolgrid .tool__art { height: 236px; } }
.tsf {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 170px;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid #2c2c2c;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 34%), #0a0a0a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  font-family: var(--sans);
}
.tool:hover .tsf, .tool:focus-visible .tsf { border-color: #515151; }
.tsf span, .tsf b, .tsf small, .tsf i { display: block; min-width: 0; }
.tsf b { font-size: 0.6rem; color: #f4f4f0; line-height: 1.3; }
.tsf small { font-size: 0.5rem; color: #999; line-height: 1.3; }
.tsf-card { border: 1px solid #2c2c2c; border-radius: 7px; background: #111; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.tsf-tiny { color: #999; font-size: 0.44rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsf-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border: 1px solid #515151;
  border-radius: 999px;
  color: #c8c8c8;
  font-size: 0.44rem;
  white-space: nowrap;
}
.tsf-chip::before { width: 3px; height: 3px; border: 1px solid currentColor; border-radius: 50%; content: ""; flex: 0 0 auto; }
.tsf-note { color: #999; font-size: 0.46rem; line-height: 1.35; }
.tsf-review-card { padding: 10px 8px; text-align: center; display: grid; gap: 4px; justify-items: center; animation: tsfReviewCard 9s ease-in-out infinite; }
.tsf-review-h { font-family: var(--serif); font-size: 0.82rem; color: #f4f4f0; }
.tsf-review-p { font-size: 0.5rem; color: #999; }
.tsf-stars { position: relative; width: max-content; margin-top: 4px; font-size: 0.95rem; letter-spacing: 0.1em; line-height: 1; white-space: nowrap; }
.tsf-stars-base { color: #515151; }
.tsf-stars-fill { position: absolute; inset: 0 auto 0 0; width: 100%; overflow: hidden; color: #fff; white-space: nowrap; animation: tsfStarFill 9s steps(5, end) infinite; }
.tsf-track { grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
.tsf-count { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 6px; align-items: center; padding: 6px 8px; }
.tsf-count .tsf-tiny { grid-column: 1 / -1; }
.tsf-count-stack { position: relative; width: 1.6rem; height: 1rem; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #f4f4f0; }
.tsf-count-stack span { position: absolute; inset: 0; }
.tsf-c0, .tsf-c1 { opacity: 0; }
.tsf-c0 { animation: tsfCountZero 9s infinite; }
.tsf-c1 { animation: tsfCountOne 9s infinite; }
.tsf-c2 { animation: tsfCountTwo 9s infinite; }
.tsf-log { padding: 5px 7px; display: grid; gap: 0; align-content: start; }
.tsf-loghead { display: flex !important; justify-content: space-between; padding: 1px 1px 4px; border-bottom: 1px solid #2c2c2c; }
.tsf-logline { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 3px 6px; align-items: center; padding: 5px 1px; border-bottom: 1px solid #2c2c2c; }
.tsf-logline .tsf-chip { grid-column: 2; justify-self: start; }
.tsf-log2 { border-bottom: 0; }
.tsf-time { color: #999; font-size: 0.42rem; }
.tsf-logline b { font-size: 0.54rem; }
.tsf-logline small { font-size: 0.44rem; }
.tsf-log1 { animation: tsfLogOne 9s ease-in-out infinite; }
.tsf-log2 { animation: tsfLogTwo 9s ease-in-out infinite; }
.tsf-chan { padding: 6px; display: grid; gap: 5px; }
.tsf-chanhead { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; }
.tsf-chanmark { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; display: grid !important; place-items: center; border: 1px solid #515151; border-radius: 4px; font-size: 0.44rem; color: #f4f4f0; }
.tsf-channame { font-weight: 700; font-size: 0.54rem; color: #f4f4f0; flex: 1 1 auto; }
.tsf-pulse { position: relative; }
.tsf-pulse::after { position: absolute; inset: -3px; border: 1px solid #c8c8c8; border-radius: 999px; content: ""; animation: tsfPublishPulse 2s ease-out infinite; }
.tsf-post { border: 1px solid #2c2c2c; border-radius: 5px; overflow: hidden; background: #171717; animation: tsfPostA 10s ease-in-out infinite; }
.tsf-postimg {
  min-height: 34px;
  display: grid !important;
  place-items: center;
  background: linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, 0.08) 48% 52%, transparent 52%), #111;
  color: #999;
  font-size: 0.42rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tsf-postcopy { padding: 5px 7px; }
.tsf-postcopy b { font-size: 0.54rem; }
.tsf-postcopy small { font-size: 0.46rem; }
.tsf-chan-b { animation: tsfPostB 10s ease-in-out infinite; }
.tsf-bar { min-height: 1.5rem; display: flex !important; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #515151; border-radius: 999px; background: #111; }
.tsf-ico { width: 0.5rem; height: 0.5rem; flex: 0 0 auto; border: 1px solid #c8c8c8; border-radius: 50%; }
.tsf-query { width: 26ch; max-width: 100%; overflow: hidden; font-size: 0.46rem; white-space: nowrap; color: #f4f4f0; animation: tsfQueryType 9s steps(26, end) infinite; }
.tsf-results { position: relative; height: 7.2rem; margin-top: 2px; }
.tsf-results > span { position: absolute; right: 0; left: 0; }
.tsf-newresult { z-index: 3; top: 0; padding: 6px 8px; border-color: #515151; display: grid !important; gap: 2px; animation: tsfResultRise 9s ease-in-out infinite; }
.tsf-newresult b { font-family: var(--serif); font-weight: 400; font-size: 0.62rem; }
.tsf-newresult small { font-size: 0.44rem; }
.tsf-ph { min-height: 1.7rem; background: #0a0a0a; padding: 6px 8px; }
.tsf-ph::before, .tsf-ph::after { display: block; height: 3px; border-radius: 999px; background: #2c2c2c; content: ""; }
.tsf-ph::before { width: 55%; }
.tsf-ph::after { width: 78%; margin-top: 5px; }
.tsf-ph1 { top: 3.6rem; }
.tsf-ph2 { top: 5.2rem; }
.tsf-cal { padding: 5px; display: grid; gap: 3px; }
.tsf-weekhead { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 2px; color: #999; font-size: 0.34rem; text-align: center; text-transform: uppercase; }
.tsf-week { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.tsf-day { min-height: 3rem; padding: 2px; border: 1px solid #2c2c2c; border-radius: 3px; background: #0a0a0a; display: grid !important; align-content: start; gap: 2px; }
.tsf-slot { min-height: 0.85rem; display: grid !important; place-items: center; overflow: hidden; border: 1px solid #2c2c2c; border-radius: 2px; background: #171717; color: #666; font-size: 0.3rem; }
.tsf-open { position: relative; border-style: dashed; color: #f4f4f0; }
.tsf-open::after {
  position: absolute;
  inset: 1px;
  display: grid;
  place-items: center;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  background: #111;
  content: "SELECTED";
  font-size: 0.26rem;
  animation: tsfSelected 9s ease-in-out infinite;
}
.tsf-confirm { display: flex !important; align-items: center; gap: 7px; padding: 6px 8px; animation: tsfConfirm 9s ease-in-out infinite; }
.tsf-mark { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; display: grid !important; place-items: center; border: 1px solid #fff; border-radius: 50%; color: #f4f4f0; font-size: 0.6rem; }
.tsf-confirm-main { display: grid !important; gap: 1px; }
.tsf-confirm-main b { font-family: var(--serif); font-weight: 400; font-size: 0.66rem; }
.tsf-phoneframe {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #515151;
  border-radius: 13px;
  background: #111;
  box-shadow: inset 0 0 0 3px #000, 0 10px 26px rgba(0, 0, 0, 0.5);
}
.tsf-phonebar { width: 34%; height: 2px; margin: 5px auto 5px; border-radius: 999px; background: #515151; }
.tsf-phonehead { display: flex !important; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 8px 5px; border-bottom: 1px solid #2c2c2c; }
.tsf-phonehead b { font-size: 0.54rem; }
.tsf-convo { display: flex !important; flex-direction: column; gap: 4px; padding: 6px; }
.tsf-missed { padding: 4px 6px; border: 1px solid #515151; border-radius: 4px; background: #171717; animation: tsfMissed 10s ease-in-out infinite; }
.tsf-missed b { font-size: 0.5rem; }
.tsf-missed small { font-size: 0.42rem; }
.tsf-bubble { max-width: 88%; padding: 4px 6px; border: 1px solid #2c2c2c; border-radius: 7px; font-size: 0.48rem; line-height: 1.35; }
.tsf-bubble small { margin-top: 2px; font-size: 0.38rem; letter-spacing: 0.05em; }
.tsf-out { align-self: flex-end; border-bottom-right-radius: 3px; background: #fff; color: #000; animation: tsfTextSent 10s ease-in-out infinite; }
.tsf-out small { color: #666; }
.tsf-in { align-self: flex-start; border-bottom-left-radius: 3px; background: #171717; color: #f4f4f0; animation: tsfReply 10s ease-in-out infinite; }
.tsf-envstage { display: grid; place-items: center; padding: 7px; }
.tsf-env { position: relative; width: 4.6rem; height: 3rem; overflow: hidden; border: 1px solid #515151; border-radius: 4px; background: #171717; animation: tsfEnvSend 10s ease-in-out infinite; }
.tsf-env::before {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-right: 2.3rem solid transparent;
  border-left: 2.3rem solid transparent;
  border-top: 1.65rem solid #515151;
  content: "";
  transform-origin: top;
  animation: tsfEnvSeal 10s ease-in-out infinite;
}
.tsf-env::after { position: absolute; right: 6px; bottom: 5px; left: 6px; height: 3px; border-radius: 999px; background: #515151; box-shadow: 0 -7px 0 #2c2c2c; content: ""; }
.tsf-month { margin-top: 5px; font-size: 0.42rem; letter-spacing: 0.05em; color: #f4f4f0; }
.tsf-cycle { display: grid; gap: 4px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.tsf-cyclerow { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px; align-items: center; padding: 4px 6px; border: 1px solid #2c2c2c; border-radius: 4px; background: #0a0a0a; }
.tsf-cyidx { color: #999; font-size: 0.4rem; }
.tsf-cyclerow b { font-size: 0.5rem; }
.tsf-cyclerow small { font-size: 0.42rem; }
.tsf-cy1 { animation: tsfEmailSent 10s ease-in-out infinite; }
.tsf-cy2 { animation: tsfEmailOpen 10s ease-in-out infinite; }
.tsf-cy3 { animation: tsfEmailNext 10s ease-in-out infinite; }
.tsf-dashwrap { padding: 6px; display: grid; gap: 4px; }
.tsf-dashhead { display: flex !important; align-items: center; justify-content: space-between; gap: 4px; padding: 1px 1px 2px; }
.tsf-dashhead b { font-size: 0.56rem; }
.tsf-mrow { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.tsf-metric { padding: 4px 7px; border: 1px solid #2c2c2c; border-radius: 4px; background: #0a0a0a; display: flex !important; align-items: center; justify-content: space-between; gap: 5px; }
.tsf-metric .tsf-tiny { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.tsf-mnum { position: relative; width: 1.4rem; height: 0.75rem; font-size: 0.68rem; line-height: 1; color: #f4f4f0; text-align: right; }
.tsf-mnum span { position: absolute; inset: 0; }
.tsf-p0, .tsf-p1 { opacity: 0; }
.tsf-p0 { animation: tsfMetricZero 9s infinite; }
.tsf-p1 { animation: tsfMetricOne 9s infinite; }
.tsf-p2 { animation: tsfMetricTwo 9s infinite; }
.tsf-spark { border: 1px solid #2c2c2c; border-radius: 4px; background: #0a0a0a; padding: 4px; }
.tsf-spark svg { width: 100%; height: 2.4rem; display: block; overflow: visible; }
.tsf-sparkgrid { stroke: #2c2c2c; stroke-width: 1; fill: none; }
.tsf-sparkline { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: tsfSparkDraw 9s ease-in-out infinite; }
.tsf-lanebox { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; padding: 6px 8px; border: 1px solid #2c2c2c; background: #111; }
.tsf-lanebox .tsf-track { grid-column: 1 / -1; margin: 4px 2px 2px; }
.tsf-lane1 { border-radius: 6px 6px 0 0; }
.tsf-lane2 { border-top: 0; border-radius: 0 0 6px 6px; }
.tsf-lanelabel b { font-size: 0.5rem; }
.tsf-lanelabel small { font-size: 0.4rem; }
.tsf-track { position: relative; height: 1px; background: #515151; }
.tsf-track::before, .tsf-track::after {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid #c8c8c8;
  border-radius: 50%;
  background: #000;
  content: "";
  transform: translateY(-50%);
}
.tsf-track::before { left: 0; }
.tsf-track::after { right: 0; }
.tsf-runner { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; display: grid !important; place-items: center; border: 1px solid #fff; border-radius: 50%; background: #111; transform: translate(-50%, -50%); }
.tsf-runner::after { width: 3px; height: 3px; border-radius: 50%; background: #fff; content: ""; }
.tsf-run-man { animation: tsfManualRace 8s linear infinite; }
.tsf-run-sys { animation: tsfSystemRace 8s ease-out infinite; }
.tsf-timerbox { text-align: right; }
.tsf-tdigits { position: relative; width: 3.2rem; height: 0.7rem; font-size: 0.54rem; font-weight: 700; color: #f4f4f0; }
.tsf-tdigits span { position: absolute; inset: 0; }
.tsf-t0, .tsf-t1 { opacity: 0; }
.tsf-t0 { animation: tsfTimerZero 8s infinite; }
.tsf-t1 { animation: tsfTimerOne 8s infinite; }
.tsf-t2 { animation: tsfTimerTwo 8s infinite; }
.tsf-timerbox small { font-size: 0.5rem; }
@media (prefers-reduced-motion: reduce) {
  .tsf *, .tsf *::before, .tsf *::after { animation: none !important; }
  .tsf-stars-fill, .tsf-query { width: 100%; }
  .tsf-c0, .tsf-c1, .tsf-p0, .tsf-p1, .tsf-t0, .tsf-t1 { opacity: 0; }
  .tsf-review-card, .tsf-logline, .tsf-post, .tsf-chan-b, .tsf-newresult, .tsf-confirm, .tsf-missed, .tsf-bubble, .tsf-cyclerow { opacity: 1; transform: none; }
  .tsf-open::after { opacity: 1; transform: scale(1); }
  .tsf-run-man, .tsf-run-sys { left: 100%; }
  .tsf-sparkline { stroke-dashoffset: 0; }
}
@media (max-width: 620px) {
  .tsf { min-height: 130px; padding: 6px; border-radius: 8px; gap: 4px; }
  .tsf-review-h { font-size: 0.68rem; }
  .tsf-stars { font-size: 0.78rem; }
  .tsf-results { height: 5.6rem; }
  .tsf-ph1 { top: 3.2rem; }
  .tsf-ph2 { top: 4.6rem; }
  .tsf-day { min-height: 2.4rem; }
  .tsf-open::after { content: ""; }
  .tsf-env { width: 3.6rem; height: 2.3rem; }
  .tsf-env::before { border-right-width: 1.8rem; border-left-width: 1.8rem; border-top-width: 1.3rem; }
  .tsf-spark svg { height: 1.8rem; }
}
.tsf-report { align-content: center; padding: 10px; }
.tsf-sheet { padding: 6px 8px; display: grid !important; gap: 0; align-content: start; }
.tsf-sheethead { display: flex !important; justify-content: space-between; align-items: center; gap: 6px; padding: 1px 1px 5px; border-bottom: 1px solid #2c2c2c; }
.tsf-repline { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 6px 1px; border-bottom: 1px solid #2c2c2c; }
.tsf-repnum { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #f4f4f0; }
.tsf-repfoot { display: grid !important; gap: 2px; padding: 6px 1px 0; }
.tsf b { font-size: 0.72rem; }
.tsf small { font-size: 0.6rem; }
.tsf-tiny { font-size: 0.52rem; }
.tsf-chip { font-size: 0.52rem; }
.tsf-note { font-size: 0.56rem; }
@media (max-width: 900px) {
  .tsf-tiny, .tsf-chip, .tsf-slot { font-size: 12px; }
}
.tsf b { font-size: 0.86rem; }
.tsf small { font-size: 0.75rem; }
.tsf-tiny, .tsf-chip { font-size: 0.68rem; }
.tsf-note { font-size: 0.72rem; }
.tsf-review-p, .tsf-newresult small, .tsf-logline small, .tsf-postcopy small, .tsf-cyclerow small, .tsf-missed small, .tsf-lanelabel small, .tsf-timerbox small, .tsf-time { font-size: 0.7rem; }
.tsf-query, .tsf-bubble, .tsf-logline b, .tsf-channame, .tsf-postcopy b, .tsf-newresult small, .tsf-cyclerow b, .tsf-missed b, .tsf-phonehead b, .tsf-lanelabel b, .tsf-dashhead b, .tsf-chanmark { font-size: 0.76rem; }
.tsf-slot { font-size: 0.66rem; min-height: 1.35rem; }
.tsf-weekhead, .tsf-bubble small, .tsf-cyidx, .tsf-repfoot small, .tsf-sheethead .tsf-tiny, .tsf-month, .tsf-postimg { font-size: 0.66rem; }
.tsf-review-h, .tsf-newresult b, .tsf-confirm-main b { font-size: 0.92rem; }
.tsf-tdigits { font-size: 0.78rem; width: 4.4rem; height: 1rem; }
.tsf-mnum { font-size: 0.95rem; width: 2rem; height: 1.05rem; }
.tsf-count-stack { font-size: 1.1rem; width: 1.9rem; height: 1.15rem; }
.tsf { min-height: 178px; }
@media (max-width: 620px) {
  .tsf { min-height: 150px; }
  .tsf-review-h { font-size: 0.86rem; }
  .tsf-stars { font-size: 0.9rem; }
}
.tsf.is-settled *, .tsf.is-settled *::before, .tsf.is-settled *::after { animation: none !important; }
.tsf.is-settled .tsf-stars-fill, .tsf.is-settled .tsf-query { width: 100%; }
.tsf.is-settled .tsf-c0, .tsf.is-settled .tsf-c1, .tsf.is-settled .tsf-p0, .tsf.is-settled .tsf-p1, .tsf.is-settled .tsf-t0, .tsf.is-settled .tsf-t1 { opacity: 0; }
.tsf.is-settled .tsf-review-card, .tsf.is-settled .tsf-logline, .tsf.is-settled .tsf-post, .tsf.is-settled .tsf-chan-b, .tsf.is-settled .tsf-newresult, .tsf.is-settled .tsf-confirm, .tsf.is-settled .tsf-missed, .tsf.is-settled .tsf-bubble, .tsf.is-settled .tsf-cyclerow { opacity: 1; transform: none; }
.tsf.is-settled .tsf-open::after { opacity: 1; transform: scale(1); }
.tsf.is-settled .tsf-run-man, .tsf.is-settled .tsf-run-sys { left: 100%; }
.tsf.is-settled .tsf-sparkline { stroke-dashoffset: 0; }
.tsf--site {
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--g-line-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.tool:hover .tsf--site { border-color: var(--g-blue-edge); }
.tsf--site .tsf-card {
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  border: 1px solid var(--g-line-soft);
  box-shadow: 0 6px 18px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.16);
}
.tsf--site .tsf-bar, .tsf--site .tsf-lanebox, .tsf--site .tsf-phoneframe {
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--g-line-soft);
}
.tsf--site .tsf-bar { border-radius: 999px; }
.tsf--site .tsf-chip {
  border-radius: 999px; color: var(--g-blue-kick);
  background: rgba(120,170,255,.12); border: 1px solid rgba(140,180,255,.3);
}
.tsf--site .tsf-tiny { color: #a8bbdd; }
.tsf--site .tsf-track { background: rgba(255,255,255,.22); }
.tsf--site .tsf-out { background: var(--g-blue-fill); color: var(--g-blue-ink); border: 1px solid var(--g-blue-edge); }
.tsf--site .tsf-in { background: rgba(255,255,255,.07); color: var(--paper); }
.tsf--site .tsf-open { border-color: var(--g-blue-edge); color: var(--g-blue-ink); }
.tsf--site .tsf-review-card { animation: none; opacity: 1; transform: none; }
.tsf--site .tsf.is-paused, .tsf--site .tsf.is-paused *, .tsf--site .tsf.is-paused *::before, .tsf--site .tsf.is-paused *::after { animation-play-state: paused !important; }
.mission-wrap { container-type: inline-size; }
/* ONE LINE at every width. The size was floored at a value the phone cannot
   fit, so the line was allowed to wrap there instead; now it is tied to the
   container it sits in and scales to the room it has, and the wrapper takes the
   full phone width so the type stays the size it always was. */
.mission-line { max-width: none; font-size: min(2.4rem, 3.5cqi); letter-spacing: -0.01em; text-align: center; white-space: nowrap; }
@media (max-width: 640px) { .mission-wrap { margin-inline: calc(50% - 50vw); padding-inline: 8px; } }
.industries { margin: 18px 0 6px; text-align: left; }
.industries__head { margin: 0 0 12px; color: var(--paper); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.industries__cols ul { columns: 5; column-gap: 26px; margin: 0; padding: 0; list-style: none; }
.industries__cols li { margin: 0 0 7px; break-inside: avoid; color: var(--paper); font-size: 0.84rem; line-height: 1.35; }
.industries__close { margin: 16px 0 0; color: var(--paper); font-family: var(--serif); font-size: 1.05rem; }
@media (max-width: 1100px) { .industries__cols ul { columns: 3; } }
@media (max-width: 640px) { .industries__cols ul { columns: 2; } }
@media (max-width: 640px) { .industries__cols { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* his order 08-12: the popup's information box IS the large plaque - the open
   tier's metal as the whole card, his words and boxes riding on it in black */
.td-card.td-metal--1 { background: url(/assets/img/home/tier/card-1-bronze.png) center / cover no-repeat; }
.td-card.td-metal--2 { background: url(/assets/img/home/tier/card-2-silver.png) center / cover no-repeat; }
.td-card.td-metal--3 { background: url(/assets/img/home/tier/card-3-gold.png) center / cover no-repeat; }
.td-card.td-metal--4 { background: url(/assets/img/home/tier/card-4-platinum.png) center / cover no-repeat; }
.td-metal, .td-metal .td-panel h4, .td-metal .td-panel h3, .td-metal .cmp-price, .td-metal .cmp-term,
.td-metal .cmp-build, .td-metal .td-list dt, .td-metal .td-list dd, .td-metal .plan-label,
.td-metal .td-h, .td-metal .td-buildtime, .td-metal .kicker { color: #000; }
.td-metal .badge { background: #000; color: #fff; }
/* row 139: the burn belongs on the LETTERS, not the plaque edges - display text
   sears into the metal (charred #1b0f05, light catch below, dark bite above);
   body text stays plain black for the read */
.td-metal .td-panel h4, .td-metal .td-panel h3, .td-metal .cmp-price,
.td-metal .plan-label, .td-metal .td-h, .td-metal .kicker, .td-metal .td-list dt {
  color: #1b0f05;
  text-shadow: 0 1px 0 rgba(255, 241, 199, 0.45), 0 -1px 1px rgba(24, 10, 0, 0.7);
}
.td-metal .td-buildtime { border-color: #000; }
.td-metal .cmp-head { background: transparent; }
.td-metal .cmp-close { background: transparent; border-color: #000; color: #000; }
.td-metal .s1-action-row .button { background: transparent; border: 1px solid #000; color: #000; }
.td-metal .s1-action-row .text-link { color: #000; }
.td-metal .td-tab { border-color: rgba(0,0,0,0.45); }

/* ---- numbered markers and the lines that ride their blocks ----------------
   These numerals shipped at #252525 on black — 1.37:1, measured in render,
   effectively invisible. They take the same treatment the home page gives its
   structural grid lines: paper white with the ruled glow, and the line riding
   each numbered block goes to a 2px paper rule with the same bloom, brighter
   while the cursor is in the block whose line it is. Scoped to the blocks that
   actually carry a numeral — the generic .page-sec separator is untouched. */
.ledger-number,
.section-number,
.m2-numeral {
  color: var(--paper);
  text-shadow: 0 0 8px rgba(241, 240, 235, 0.5), 0 0 18px rgba(241, 240, 235, 0.22);
}
.ledger-row,
.page-sec.ledger-section,
.m2-chapter {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.ledger-row,
.page-sec.ledger-section {
  border-bottom-width: 2px;
  border-bottom-color: var(--paper);
  box-shadow: 0 3px 8px -1px rgba(241, 240, 235, 0.5), 0 7px 18px -2px rgba(241, 240, 235, 0.22);
}
.ledger-row:hover,
.page-sec.ledger-section:hover {
  box-shadow: 0 3px 12px 0 rgba(241, 240, 235, 0.7), 0 7px 26px -1px rgba(241, 240, 235, 0.3);
}
.m2-chapter {
  border-top-width: 2px;
  border-top-color: var(--paper);
  box-shadow: 0 -3px 8px -1px rgba(241, 240, 235, 0.5), 0 -7px 18px -2px rgba(241, 240, 235, 0.22);
}
.m2-chapter:hover {
  box-shadow: 0 -3px 12px 0 rgba(241, 240, 235, 0.7), 0 -7px 26px -1px rgba(241, 240, 235, 0.3);
}
/* the column dividers inside those same blocks, so a numbered block is not half
   white rules and half grey ones. Held above 900px only: below it these borders
   are already switched off and the row stacks, and a width here would put them
   back. The expanded detail body has no left border, so it takes no glow. */
@media (min-width: 901px) {
  .ledger-main,
  .ledger-side {
    border-left-width: 2px;
    border-left-color: var(--paper);
    box-shadow: -3px 0 8px -1px rgba(241, 240, 235, 0.5), -7px 0 18px -2px rgba(241, 240, 235, 0.22);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .ledger-main:hover,
  .ledger-side:hover {
    box-shadow: -3px 0 12px 0 rgba(241, 240, 235, 0.7), -7px 0 26px -1px rgba(241, 240, 235, 0.3);
  }
  .lgd-body .ledger-main { box-shadow: none; }
}

/* ---- the site menu: five groups, one row ----------------------------------
   The panel ran a four-column grid over five groups, so Company — the group
   holding Hiring — wrapped alone onto a second row under ~290px of dead space,
   and on a first visit the storage notice (z 95) sat on top of it: a click at
   the centre of the Hiring link landed on the notice, not the link. Five
   columns put every group on one row, and the panel outranks the notice while
   it is open, which is what a visitor who just opened the menu expects. */
.menu-panel { z-index: 96; }
.menu-btn { z-index: 97; }
@media (min-width: 1200px) {
  .menu-panel { width: min(1280px, 96vw); }
  .menu-panel__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .menu-grp--tools, .menu-grp--writing { column-count: auto; }
}

/* ---- legibility floors: measured sub-12px copy, raised one surface at a time.
   Doubled/tripled class names carry the weight needed to land on top of the
   declarations that set these sizes; nothing is shrunk and nothing is global. ---- */
.bk-dow.bk-dow span { font-size: 0.75rem; }
.bk-lab.bk-lab.bk-lab { font-size: 0.75rem; }
.opt.opt.opt { font-size: 0.75rem; }
.bk-kicker.bk-kicker.bk-kicker { font-size: 0.75rem; }
.bk-foot.bk-foot.bk-foot { font-size: 0.75rem; }
.badge.badge.badge { font-size: 0.75rem; }
.ts-label.ts-label.ts-label { font-size: 0.75rem; }
.st-cap.st-cap.st-cap { font-size: 0.75rem; }
.eyebrow.eyebrow.eyebrow { font-size: 0.75rem; }
.kicker.kicker.kicker { font-size: 0.75rem; }
.mount-cap.mount-cap.mount-cap { font-size: 0.75rem; }
.plan-label.plan-label.plan-label { font-size: 0.75rem; }
.tl__path.tl__path.tl__path { font-size: 0.75rem; }
.lb-path.lb-path.lb-path { font-size: 0.75rem; }
.marquee-toggle.marquee-toggle.marquee-toggle { font-size: 0.75rem; }
.tsf-note.tsf-note.tsf-note { font-size: 0.75rem; }
.audit-panel.audit-panel form label { font-size: 0.75rem; }
/* a heading, not a label - it reads a step above the floor */
.td-h.td-h.td-h { font-size: 0.8rem; }

/* row 156, his goodnight order: the HH TEAM rail button - the right rail he
   cleared at row 150 gets its real tenant - straight to the Hustle House
   team sign-in door (/team/, the TEAMDOOR landing). */
.hhteam-tab { position: fixed; right: 0; top: 38vh; z-index: 60; display: flex; align-items: center; justify-content: center; width: 48px; min-height: 0; line-height: 1.1; writing-mode: vertical-rl; letter-spacing: 0.05em; font-size: 0.9rem; font-weight: 700; color: #000; background: #fff; border: 1px solid #000; border-right: 0; padding: 16px 9px; border-radius: 18px 0 0 18px; text-decoration: none; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.hhteam-tab:hover, .hhteam-tab:focus-visible { background: #e6e6e6; }
.hhteam-tab:focus-visible { outline: 2px solid #000; outline-offset: -2px; }

/* --- ROW 199 rider: the pricing recap tiles ------------------------------
   His row says the tier boxes should "all become the same size". On the
   homepage they already are. On /pricing/ the .s4-plans recap tiles are NOT:
   measured at a true 375 they render 312.3 / 356.2 / 290.3 / 290.3 px tall -
   a 66px spread, with Launchpad shorter than Local Authority. That is the
   only surface on either page where his "smaller" complaint reproduces, and
   it sits outside the tier-button pass that measured them equal. Equalised
   here; NOT forced into 2x2 - see the receipt, that half needs his word. */
@media (max-width: 620px) {
  .s4-plans { grid-auto-rows: 1fr; align-items: stretch; }
  .s4-plans .s4-plan { height: 100%; }
}

/* === the phone contact bar =================================================
   MEASURED BEFORE THE EDIT, at a true 375:
     - the bar already existed on 46 of 47 pages, but as position: sticky,
       so it only holds while its OWN parent is on screen. On an interior
       (.in-main wraps the page) that is 100% of the scroll. On the HOME page
       its parent is section.s1, which ends at document y 2893: the bar
       unstuck at scrollY 2069 of 11138 - present for 18.6% of the page and
       GONE for the other 81.4%. That is why there was no tap-to-call.
     - the tap target inside it measured 83.2 x 17px - under the 44px floor.
     - there was no text-us anywhere on the site (0 sms: links on 47 pages).
   position: fixed makes it hold on every page at every scroll. Kept at the
   component's own <=900px breakpoint - the bar has always appeared there, and
   scoping the new look to <=700 would leave a broken 701-900 band.
   The stack is measured, not guessed: consent bar (z95) and back-to-top (z59)
   are both lifted clear so nothing sits on top of the call action. */
@media (max-width: 900px) {
  .s1-mobile-phone {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px; padding: 0;
    background: rgba(241, 240, 235, 0.3);
    border-top: 1px solid rgba(241, 240, 235, 0.3);
  }
  .s1-mobile-phone .mhbar__act {
    min-height: 48px; display: flex; align-items: center; justify-content: center;
    padding: 6px 4px; text-align: center; text-decoration: none;
    background: var(--black); color: var(--paper);
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em;
  }
  /* call wins: one primary action, inverted so it reads first */
  .s1-mobile-phone .mhbar__act--call { background: var(--paper); color: var(--black); }
  .s1-mobile-phone .mhbar__act:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; }

  /* the bar is out of flow now, so give the page its height back */
  body { padding-bottom: 49px; }
  /* consent bar sits ON TOP of the call bar, never over it */
  .cnst { bottom: 49px; }
  /* back-to-top clears the bar too */
  .to-top { bottom: 61px; }
  /* the application form pins its Next above the bar; it was tuned to the old
     45px height and is re-tuned here to the measured 48px + 1px rule. */
  .af__nav { bottom: 49px; }
}

/* Item 4: the contact taps. Measured at a true 375 - the tel: and mailto:
   links in body copy rendered 17px tall (e.g. /contact/: 245.7x17 and
   109.4x17), well under the 44px floor. This uses the sheet's own existing
   idiom for the same problem (see .text-link / .marquee-toggle above):
   inline-flex with a min-height, which grows the tap box without moving the
   text. The three bar actions are excluded - they already measure 48px. */
@media (max-width: 900px) {
  a[href^="tel:"]:not(.mhbar__act),
  a[href^="mailto:"]:not(.mhbar__act),
  a[href^="sms:"]:not(.mhbar__act) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ===== THE CONSENT SHEET RESERVES ITS OWN BAND =============================
   Measured on these staged bytes, 2026-08-14.

   THE DEFECT. `.cnst` is position:fixed at z-index 95; the wizard's `.af__nav`
   is position:sticky at z-index 9. Both are anchored to the bottom of the
   viewport, so on a FIRST visit the sheet lands exactly on the pinned Next bar:

     viewport | #af-next box   | covered | 5-point rake owned by Next
        375   | 23,753 329x44  |  100%   | 0 of 5  (all five hit P.cnst__fine)
        390   | 23,776 344x44  |  100%   | 0 of 5
        900   | 28,695 829x44  |  91.7%  | 0 of 5
        985   | 31,451 100x44  |  19.1%  | 4 of 5  (nav is static up here)

   Control, taken at every width: hide `.cnst` and re-rake the identical points
   and the button owns 5 of 5, then 0 of 5 again when it is restored - so the
   probe can fail, and its pass means something.

   WHY NOT z-index. Raising the nav over the sheet would bury the consent copy
   under a button. That is the same trade this sheet already refused when it was
   put ABOVE the phone bar rather than over it (see `.cnst { bottom: 49px }`),
   and burying a legal disclosure is the worse of the two defects.

   THE MECHANISM. `consent.js` marks <html> with `.cnst-open` and publishes
   `--cnst-lift` = the card's measured height + a 10px gap, kept true by a
   ResizeObserver while the sheet is up. It removes BOTH on close. So every rule
   below stops matching the moment the sheet is answered, and the `var(…, 0px)`
   fallback means a page that never shows the sheet is byte-for-byte unchanged.
   The sheet is shown once, ever, so this is a first-visit geometry only.

   This block is LAST in the file on purpose: `.af__nav { bottom }` is set three
   times above (2694, 2714, 4262) and at equal specificity the later rule wins. */

/* the wizard scrolls its own error box into view on a failed Next; without this
   that scroll can land the message underneath the sheet. */
.cnst-open { scroll-padding-bottom: var(--cnst-lift, 0px); }

@media (max-width: 900px) {
  /* the pinned Next bar steps up over the sheet instead of under it. 49px is the
     call-bar floor it already stood on. */
  .cnst-open .af__nav { bottom: calc(49px + var(--cnst-lift, 0px)); }
  /* the back-to-top button is buried by the same band; its certified 61px
     clearance of the call bar is untouched once the sheet is answered. */
  .cnst-open .to-top { bottom: calc(61px + var(--cnst-lift, 0px)); }
}

@media (min-width: 901px) {
  /* Above the breakpoint `.af__nav` is static, so it cannot be lifted - the sheet
     parks clear of the form column instead of centred across it. Scoped to the
     page that actually carries the wizard so the other 47 pages keep the centred
     sheet they were signed off with. */
  .cnst-open body:has(.af__step) .cnst { justify-content: flex-end; }
  /* right-parking alone is not enough at the bottom of this range: at a true
     VW of 900 the 760px card still reached x 124 while Next ended at x 129.1,
     leaving a 5.1px sliver of the button underneath it. The card is capped so
     the sheet cannot reach the form column at ANY width in this branch. The
     two answers simply wrap to a row each, as they already do under 620px. */
  .cnst-open body:has(.af__step) .cnst__card { width: min(460px, 100%); }
}

/* ===== PHONE PACK - the header number, the tap floor, the small-text floor =====
   Measured on this tree at a true 375 wide with real device metrics, every public
   page walked before and after, not a sample.

   1. THE NUMBER IN THE HEADER BAR.
      Before this, the digits existed on a phone in exactly one place: inside the
      closed menu drawer. The bottom bar's Call button carried them in an aria-label
      only, which is not a number to a person who is looking at the screen. Measured
      at 375: the number was visible without scrolling on 6 of 64 pages.
      The bar is flex with space-between, so the number takes the middle slot between
      the brand and the menu button. Typographic - no glyph, no icon. */
@media (max-width: 900px) {
  .mnav__call {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: var(--paper);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: rgba(241, 240, 235, 0.45);
  }
  .mnav__call:hover, .mnav__call:focus-visible { text-decoration-color: var(--paper); }
  .mnav__call:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

  /* 2. THE TAP FLOOR ON LINKS INSIDE SENTENCES.
     237 of them measured 14 to 22px tall - about a third of a thumb. The hit area is
     grown to a full 44px with a transparent pseudo-element rather than padding:
     measured on this tree, a quarter of these links are block or inline-block, and
     padding on those would move the page. This reflows nothing at any display type.
     It grows up and down only, never sideways, so a tap on the next word still
     belongs to the next word. 44px is the HIT floor and never the painted size, so
     no text changes size or position. Measured before writing it: zero links in this
     position already own a pseudo-element, so no decoration is overwritten. */
  main p > a, main li > a, main dd > a, main dt > a,
  main blockquote > a, main h2 > a, main h3 > a, main h4 > a { position: relative; }
  main p > a::after, main li > a::after, main dd > a::after, main dt > a::after,
  main blockquote > a::after, main h2 > a::after, main h3 > a::after, main h4 > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

}

/* 4. THE APPLICATION PAGE'S FOUR ROLE CARDS.
   The page dragged 21px sideways at 375 - the only page on the site that did. The
   bottom call bar was recorded as the cause once; the bar is a passenger. It spans
   whatever the layout viewport is, and the layout viewport had already stretched to
   fit the overflow, which is also why a scroll check measured against the stretched
   width read clean. The cause is the four role cards held in one unwrappable row:
   the row and each card carry style attributes on the elements themselves, and an
   element attribute beats a stylesheet, so the phone rule written to wrap them could
   never apply to the cards. Matching that weight is the fix. Desktop is untouched -
   this sits in the same 700px branch the original wrap rule was written in. */
@media (max-width: 700px) {
  body[data-page="hiring"] .role-steps > .role-step { flex: 1 1 100% !important; min-width: 0 !important; }
}