:root {
  --black: #000;
  --ink: #0a0a0a;
  --paper: #f1f0eb;
  --white: #fff;
  --gray-1: #d7d6d1;
  --gray-2: #a7a7a2;
  --gray-3: #72726e;
  --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: Arial, Helvetica, sans-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);
}


:root {
  --h-sec: clamp(1.6rem, 2.4vw, 2.5rem);   /* 30.72px at 1280 — the section head */
  --h-sub: clamp(1.4rem, 2vw, 2.1rem);
}

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

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;
}

.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: max(0.8125rem, 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; } }

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

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

.rule {
  height: 2px;
  margin: 30px 0;
  background: var(--paper);
}

.rule { box-shadow: 0 0 8px rgba(241,240,235,0.5), 0 0 18px rgba(241,240,235,0.22); transition: box-shadow 0.3s ease; }
.rule:hover { box-shadow: 0 0 12px rgba(241,240,235,0.75), 0 0 26px rgba(241,240,235,0.32); }
.s1-left, .s1-right, .s1-chapter, .s2-chapter, .s2-story, .s3-head,
.s3-margin-label, .film-strip-head, .s4-footer { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.s1-left  { border-right: 2px solid var(--paper); box-shadow: 3px 0 8px -1px rgba(241,240,235,0.5), 7px 0 18px -2px rgba(241,240,235,0.22); }
.s1-left:hover  { box-shadow: 3px 0 12px 0 rgba(241,240,235,0.7), 7px 0 26px -1px rgba(241,240,235,0.3); }
.s1-right { border-left: 2px solid var(--paper); box-shadow: -3px 0 8px -1px rgba(241,240,235,0.5), -7px 0 18px -2px rgba(241,240,235,0.22); }
.s1-right:hover { box-shadow: -3px 0 12px 0 rgba(241,240,235,0.7), -7px 0 26px -1px rgba(241,240,235,0.3); }
.s1-chapter, .s2-chapter, .film-strip-head { 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); }
.s1-chapter:hover, .s2-chapter:hover, .film-strip-head:hover { box-shadow: 0 3px 12px 0 rgba(241,240,235,0.7), 0 7px 26px -1px rgba(241,240,235,0.3); }
.s3-head { 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); }
.s3-head:hover { box-shadow: 0 3px 12px 0 rgba(241,240,235,0.7), 0 7px 26px -1px rgba(241,240,235,0.3); }
.s2-story { border-right-width: 2px; border-right-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); }
.s2-story:hover { box-shadow: 3px 0 12px 0 rgba(241,240,235,0.7), 7px 0 26px -1px rgba(241,240,235,0.3); }
.s3-margin-label { border-right-width: 2px; border-right-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); }
.s3-margin-label:hover { box-shadow: 3px 0 12px 0 rgba(241,240,235,0.7), 7px 0 26px -1px rgba(241,240,235,0.3); }
.s4-footer { 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); }
.s4-footer:hover { box-shadow: 0 -3px 12px 0 rgba(241,240,235,0.7), 0 -7px 26px -1px rgba(241,240,235,0.3); }
@media (prefers-reduced-motion: reduce) {
  .rule, .s1-left, .s1-right, .s1-chapter, .s2-chapter, .s2-story, .s3-head,
  .s3-margin-label, .film-strip-head, .s4-footer { transition: none; }
}
/* tag-qualified so the later base rules can't drag the lines back to faint */
aside.s1-left { border-right: 2px solid var(--paper); }
aside.s1-right { border-left: 2px solid var(--paper); }
section.s1-chapter, section.s2-chapter { border-bottom: 2px solid var(--paper); }
div.film-strip-head { border-bottom: 2px solid var(--paper); }
header.s3-head { border-bottom: 2px solid var(--paper); }
main.s2-story { border-right: 2px solid var(--paper); }
div.s3-margin-label { border-right: 2px solid var(--paper); }
footer.s4-footer { border-top: 2px solid var(--paper); }
#s2-tools-band { border-bottom: 2px solid var(--paper); }

.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 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.8125rem;
}

/* Inline links in a sentence: grow the hit box,
   then hand the height back so the line itself does not move. */
.s4-footer .disclosure a {
  display: inline-block;
  padding: 15px 8px; margin: -15px -4px;
}

/* Layout S1 */

.s1 {
  display: grid;
  grid-template-columns: minmax(205px, 15vw) minmax(0, 1fr);
}
@media (min-width: 901px) {
  aside.s1-right { display: none; }
}

.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: minmax(0, 1fr);
  padding: 12px 0;
  color: var(--paper);
  font-weight: 600;
  border-top: 2px solid var(--paper);
  font-size: 0.8rem;
  text-decoration: none;
}

.s1-nav a[aria-current="page"] { color: var(--paper); }
.s1-nav a[aria-current="page"] span:last-child { border-bottom: 1px solid var(--paper); padding-bottom: 2px; }
.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 h3 {
  margin: 0 0 7px;
  font-size: 1.4rem;
}


.bk-ov {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 24px;
  background: rgba(6, 7, 12, 0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow: auto; overscroll-behavior: contain;
}
.bk-ov[hidden] { display: none; }
.bk-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.bk-orb-blue { width: 520px; height: 520px; background: radial-gradient(circle, #1e3a6e 0%, #1e3a6e 30%, rgba(30,58,110,0) 72%); top: -140px; right: -80px; opacity: 0.5; }
/* .bk-orb-gold: the NAME is historical - the warm half of this orb pair is the ruled blue's dark slate (#2F5A88, a dark
   slate blue) since gold died on 2026-09-16; its cool half stays #1e3a6e. Renaming the class crosses into index.html. */
.bk-orb-gold { width: 420px; height: 420px; background: radial-gradient(circle, #2f5a88 0%, #2f5a88 30%, rgba(47,90,136,0) 72%); bottom: -160px; left: -100px; opacity: 0.32; }

.bk-card {
  position: relative; width: min(940px, 100%); max-height: calc(100vh - 48px);
  overflow: auto; overscroll-behavior: contain;
  padding: 30px 34px 26px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: var(--paper);
}
.bk-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; margin-bottom: 20px; }
.bk-kicker { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #9fb6e0; }
.bk-title { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.15; margin: 6px 0 0; }
.bk-sub { color: var(--gray-2); font-size: 0.9rem; margin: 8px 0 0; max-width: 52ch; }
.bk-x {
  appearance: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%;
  color: var(--paper); font-size: 1.05rem; line-height: 1;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: background 0.25s ease, transform 0.25s ease;
}
.bk-x:hover, .bk-x:focus-visible { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }

.bk-body { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 26px; align-items: start; }

/* ---- the month grid. Printed who/what/time, not a table of OPEN buttons ---- */
.bk-cal { display: grid; gap: 12px; }
.bk-cal-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.bk-cal-month { font-family: var(--serif); font-size: 1.02rem; letter-spacing: 0.04em; text-align: center; }
.bk-nav {
  appearance: none; cursor: pointer; width: 32px; height: 32px; border-radius: 10px;
  color: var(--paper); background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18); line-height: 1;
}
.bk-nav:hover:not(:disabled), .bk-nav:focus-visible { background: rgba(255, 255, 255, 0.13); }
.bk-nav:disabled { opacity: 0.32; cursor: default; }
.bk-dow, .bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-dow span { text-align: center; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-3); }
.bk-day {
  appearance: none; cursor: pointer; aspect-ratio: 1 / 1; min-height: 38px; border-radius: 10px;
  display: grid; place-items: center; gap: 2px;
  font-family: var(--sans); font-size: 0.82rem; color: var(--paper);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.bk-day:hover:not(:disabled), .bk-day:focus-visible { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.bk-day:disabled { opacity: 0.26; cursor: default; background: transparent; border-color: rgba(255, 255, 255, 0.07); }
.bk-day.is-blank { visibility: hidden; }
.bk-day .bk-dot { width: 4px; height: 4px; border-radius: 50%; background: #7fa8ff; }
.bk-day[aria-pressed="true"] {
  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-color: rgba(140, 180, 255, 0.45);
  box-shadow: 0 8px 24px rgba(15, 40, 100, 0.5), inset 0 2px 6px rgba(190, 215, 255, 0.4);
}
.bk-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.bk-time {
  appearance: none; cursor: pointer; padding: 11px 10px; border-radius: 999px;
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--paper);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.bk-time:hover, .bk-time:focus-visible { background: rgba(255, 255, 255, 0.13); transform: translateY(-2px); }
/* the pick = his blue bubble, specular highlight and all */
.bk-time[aria-pressed="true"] {
  position: relative; overflow: hidden; 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-color: rgba(140, 180, 255, 0.45);
  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);
}
.bk-time[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 7%; left: 12%; width: 42%; height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  border-radius: 999px; pointer-events: none;
}
.bk-daynote { font-size: 0.76rem; color: var(--gray-2); margin: 0; }

/* ---- the form: every control styled, never a default browser control ---- */
.bk-form { display: grid; gap: 12px; }
.bk-form label { display: grid; gap: 5px; }
.bk-form .bk-lab { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-2); }
.bk-form input, .bk-form textarea, .bk-form select {
  appearance: none; width: 100%; min-height: 44px; padding: 11px 13px;
  font-family: var(--sans); font-size: 0.88rem; color: var(--paper);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bk-form textarea { min-height: 82px; resize: vertical; line-height: 1.5; }
.bk-form input::placeholder, .bk-form textarea::placeholder { color: var(--gray-3); }
.bk-form input:focus, .bk-form textarea:focus { outline: none; border-color: rgba(140, 180, 255, 0.75); box-shadow: 0 0 0 3px rgba(90, 140, 255, 0.18); }
.bk-consent { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; font-size: 0.78rem; color: var(--gray-1); }
.bk-consent input[type="checkbox"] {
  appearance: none; width: 20px; height: 20px; min-height: 0; padding: 0; margin: 1px 0 0;
  border-radius: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.28);
  display: grid; place-items: center; cursor: pointer;
}
.bk-consent input[type="checkbox"]:checked {
  background: linear-gradient(160deg, rgba(120,170,255,.5), rgba(56,108,200,.3));
  border-color: rgba(150, 190, 255, 0.7);
}
.bk-consent input[type="checkbox"]:checked::after { content: "\2713"; font-size: 0.72rem; color: #eaf1ff; }
.bk-consent a { color: var(--gray-1); }

/* the primary action = the blue bubble, verbatim from his blessed sample */
.bk-go {
  position: relative; overflow: hidden; cursor: pointer; appearance: none;
  margin-top: 4px; 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;
}
.bk-go::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;
}
.bk-go::before {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none;
}
.bk-go:hover::before { left: 130%; }
.bk-go:hover, .bk-go:focus-visible {
  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);
}
.bk-held {
  margin: 16px 0 0; padding: 13px 15px; border-radius: 12px;
  font-size: 0.82rem; color: #dfe8ff;
  background: rgba(56, 108, 200, 0.12); border: 1px solid rgba(120, 165, 255, 0.3);
}
.bk-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.74rem; color: var(--gray-3); }
/* a laptop at 800px tall was cutting the last time row below the card's own
   scroll line - the popup scrolled, but a booking form whose times you have to
   go looking for is not the premium read. Compact, not cropped. */
@media (min-width: 821px) and (max-height: 900px) {
  .bk-card { padding: 22px 28px 20px; }
  .bk-head { margin-bottom: 14px; }
  .bk-title { font-size: 1.44rem; }
  .bk-sub { font-size: 0.84rem; margin-top: 6px; }
  .bk-body { gap: 22px; }
  .bk-cal { gap: 9px; }
  .bk-day { min-height: 32px; font-size: 0.78rem; }
  .bk-days, .bk-dow { gap: 5px; }
  .bk-time { padding: 9px 10px; }
  .bk-form { gap: 9px; }
  .bk-form input { min-height: 40px; padding: 9px 12px; }
  .bk-form textarea { min-height: 64px; }
  .bk-go { padding: 13px 28px; }
  .bk-foot { margin-top: 12px; padding-top: 10px; }
}
@media (max-width: 820px) {
  .bk-ov { padding: 0; place-items: end stretch; }
  .bk-card { width: 100%; max-height: 92svh; border-radius: 18px 18px 0 0; padding: 22px 18px 20px; }
  .bk-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bk-day { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-go, .bk-time, .bk-day, .bk-x { transition: none; }
  .bk-go::before { display: none; }
}

.rail-book { display: grid; gap: 8px; }
.rail-book__btn { display: block; text-align: center; }
.rail-book__note { color: var(--gray-2); font-size: 0.72rem; letter-spacing: 0.02em; }

.s1-right {
  display: grid;
  /* note 18: ticker tab, phone, the CLOSED audit drop, the two-square
     cutout face (1fr - the freed tile face), disclosure */
  grid-template-rows: auto auto auto minmax(200px, 1fr) auto;
  gap: 20px;
  padding: 26px;
  overflow: auto;
  border-left: 1px solid var(--soft-line);
}
button.ticker {
  appearance: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
}
button.ticker:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.ticker__track { display: flex; }
/* the tab is transparent on the black rail, so the traveling words carry
   the rail's ink-on-black otherwise — they follow the dark scheme here */
button.ticker .ticker__track span { color: var(--paper); }
.rail-audit-lbx { min-width: 0; }
.rail-audit-lbx > .fp-drop, .rail-audit-lbx .s1-audit { min-width: 0; }

.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 {
  display: grid;
  grid-template-rows: auto;
  background: var(--black);
  color: var(--white);
  padding-bottom: 0;
}

/* the rectangular frame box at the audit region — his correction 08-09: the
   last build mounts IN this box, never as a band backdrop. The deploy's
   frame-ancestors now allows marqueandheir.com + www (his GO, ~05:0x 08-09,
   verified serving), so ON THOSE ORIGINS the LIVE site mounts here as a
   lazy iframe. Any other ancestor origin is refused by that same header —
   and a refused frame still fires load (measured) — so the mount is
   origin-gated in the script, and everywhere else the ruled chain stands:
   his hero film, muted — then the live-capture still (always the still
   under reduced motion, and on no-JS nothing mounts). */
.s2-aperture {
  position: relative;
  margin: 28px 28px 0;
  height: clamp(260px, 38vh, 420px);
  overflow: hidden;
  clip-path: polygon(0 12%, 16% 12%, 16% 0, 100% 0, 100% 100%, 0 100%);
}

.s2-aperture .av video,
.s2-aperture .av .vidstill {
  pointer-events: none;
  object-position: center top;
}
.s2-aperture .av video { display: none; }
.s2-aperture .av .vidstill { display: block; }


/* ---------- S2, the last-build band: a short black strip closing the
   chapter. The build itself sits in the audit pane's frame box above — his
   correction 08-09: the box, not the band; no full-bleed backdrop of any
   kind behind the section. The left-edge door stays. ---------- */
.s2-lastbuild {
  position: relative;
  background: var(--black);
  padding: clamp(44px, 7vh, 76px) 8vw;
}
.s2-pane .s2-lastbuild { padding: 28px 24px 34px; }

.s2lb-copy {
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.s2lb-copy .kicker { color: #5AA9FF; }

.s2lb-copy p {
  margin-top: 14px;
  color: var(--gray-1);
  font-size: 1.05rem;
  max-width: 480px;
}

.s2lb-egg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 110px;
  color: #5AA9FF;
  font-size: 34px;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 5;
}

.s2lb-egg:hover { opacity: 1; }

.s2lb-found {
  position: absolute;
  left: 68px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #5AA9FF;
  color: var(--paper);
  z-index: 5;
}

.s2lb-found:target { display: flex; }

.s2lb-found b { color: #5AA9FF; }

/* note 12.2 closed the fork: touch gets TOLD — the egg exists and lives
   on the desktop site. No arrow, no hunt, on phones. Desktop hover
   behavior untouched. */
.s2lb-eggnote { display: none; margin-top: 18px; color: var(--gray-2); font-size: 0.85rem; max-width: 480px; }
@media (hover: none) {
  .s2lb-egg { display: none; }
  .s2lb-eggnote { display: block; }
}

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

/* Layout S3 */

.s3 {
  padding: 0;
}

.s3-head {
  display: grid;
  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: 0; /* 2026-09-28: the blog deck fills this box edge to edge - see THE DECK FILLS ITS FRAME */
}

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















.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;
}

/* note 22: seamless wrap. The track is
   two identical halves (each half = the five moments twice, 3110px), so
   the -50% wrap lands mid-identical content on any viewport up to
   3110px wide — no end-gap flash. 60s keeps the prior ~52px/s pace.
   translateZ pins the track to its own layer: transform-only motion. */
.marquee-track {
  display: flex;
  width: max-content;
  transform: translateZ(0);
  will-change: transform;
  animation: stripMove 60s 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%); }
}

/* SITEFIX-0813: this strip shipped 20 film-frame divs with nothing in them -
   a moving row of empty boxes, each painted with the diagonal "no image"
   slash. The tree carries no honest picture for these five labels: the
   rolls\ set is industry scenes named by trade, the pot\ set is unreferenced
   design boards, and the one real client capture is already used further up
   this page. Filling a claim-label like "Tracking / tested" with a stock
   trade photo would be fabricated proof, so the frames come out and his five
   phrases stay and carry the strip on their own. Card WIDTH is deliberately
   unchanged at 310px: the seamless -50% wrap depends on the two halves being
   identical and each half staying wider than the viewport, and 10 x 310px
   keeps the 3110px reach the wrap was built around. */
.film-strip--words .film-card {
  min-height: 0;
  grid-template-rows: auto;
  align-content: center;
  justify-items: center;
}
.film-strip--words .film-card p {
  padding: 26px 14px;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* his sizing 08-12: smaller boxes, about an inch between the reels, no labels,
   no scroll pills */
.pic-reels { display: grid; gap: 96px; margin: 26px 0 8px; }
.pic-reel { border-top: 1px solid var(--paper); border-bottom: 1px solid var(--paper); }
.pic-reels .film-card { width: 240px; min-height: 176px; }
.pic-reels .film-frame { min-height: 156px; }
.pic-reel .marquee-viewport { scrollbar-width: none; }
.pic-reel .marquee-viewport::-webkit-scrollbar { display: none; height: 0; }
.pic-reels .film-card { border-right: 0; }
.pic-reels .film-frame::before { display: none; }
/* dead-center in the gap: 11.5px air - 5px dots - 11.5px air, every gap */
.pic-reels .film-frame::after { right: auto; left: calc(100% + 11.5px); }
.pic-reel--right .marquee-track { animation-direction: reverse; }
/* his law 08-12: reels NEVER stop on hover. Arrows on both ends step them;
   clicking a frame opens the power-zoom viewer - the at-their-pace surface. */
.pic-reel { position: relative; }
.pic-reel .film-card { cursor: pointer; }
.reel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--black); border: 1px solid var(--paper); color: var(--paper);
  font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.reel-arrow--l { left: 10px; }
.reel-arrow--r { right: 10px; }
.reelzoom {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: rgba(0, 0, 0, 0.9); padding: 24px;
}
.reelzoom[hidden] { display: none; }
.reelzoom__frame { width: min(72vw, 1100px); }
.reelzoom__pic { min-height: min(60vh, 640px); margin: 0; border: 1px solid var(--gray-3); background: var(--ink); background-size: contain; background-position: center; background-repeat: no-repeat; }
.reelzoom__pic::before, .reelzoom__pic::after { display: none; }
.reelzoom__nav, .reelzoom__close {
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  background: var(--black); border: 1px solid var(--paper); color: var(--paper);
  font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.reelzoom__close { position: absolute; top: 16px; right: 16px; }
.auditwhy__card {
  max-width: 720px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  padding: 30px 34px;
  font-size: 1.12rem;
  line-height: 1.6;
}
.auditwhy__card .kicker { color: #5AA9FF; margin: 0 0 12px; }
.auditwhy__card p { margin: 0 0 14px; }





.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(0, 1fr);
  min-height: 0;
}
#layout-s4 { min-height: 0; }

.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 h3 {
  margin: 0;
  font-size: 1.25rem;
}

.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);
}

.s4-foot-book { margin: 0; }
.s4-foot-book a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--soft-line);
}
.s4-foot-book a:hover, .s4-foot-book a:focus-visible { border-bottom-color: var(--paper); }

.bk-real { margin: 16px 0 0; }
.ts-real { margin: 14px 0 0; }

/* Responsive behavior */

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

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

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

  .s1-work-grid {
    grid-template-columns: 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: 0 22px 22px;
  }

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

  .s3-head {
    display: block;
  }

  .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;
  }






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

  .marquee-track {
    animation: none;
  }

  .film-dup2 { display: none; }

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




  .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: 5rem;
    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 {
    grid-template-columns: 1fr;
  }


  .plan {
    min-height: 240px;
  }


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

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

  .marquee-track {
    animation: none;
  }
}
.s1-left, .s1-right { min-height: 100%; height: auto; align-self: stretch; }

/* ============================================================
   The content mount — dressing for the swapped-in pieces only.
   The block above is the composition file, untouched. Everything
   here is additive and scoped to the swapped content.
   ============================================================ */

/* ---------- S1 hero: the words ride in the weather; the lion
     below them, never behind them. Clouds run to both edges of
     the hero. Drift is transform-only on opposed clocks; reduced
     motion parks every layer. ---------- */
.hero-weather {
  position: relative;
  overflow-x: visible;
  overflow-y: clip;
}
/* --rail-l was hard-coded 205px against a rail that grows.
   The grid track is minmax(205px, 15vw), which renders exactly max(205px, 15vw) -
   measured 205 / 230.39 / 285.3 / 384 at 1280 / 1536 / 1902 / 2560. The storm
   stopped 0 / 25.39 / 80.3 / 179px short of the left rail's own edge. The variable
   now derives from the same two numbers as the grid, so the two cannot drift again.
   --rail-r stays a literal 300px because the grid's third track is a literal 300px. */
.s1-storm-on { position: relative; overflow-x: clip; --rail-l: max(205px, 15vw); --rail-r: 0px; }
/* the WRAPPER carries the bleed, not the images. An <img> is a replaced
   element: "width: auto" there resolves to its INTRINSIC size and silently
   drops the "right" constraint - measured, it stopped 9.22px short of the
   right rail and looked exactly like a working bleed. A plain div honours
   left + right. */
.s1-storm-on .sky-wrap {
  position: absolute; top: 0; bottom: 0;
  left: calc(-1 * var(--rail-l)); right: calc(-1 * var(--rail-r));
  z-index: 0; pointer-events: none; will-change: transform;
}
.s1-storm-on .s1-chapter.hero .lion-box {
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px);
          mask-image: linear-gradient(180deg, transparent 0, #000 120px);
}
.s1-storm-on .s1-chapter.hero { padding-bottom: 0; }
.s1-storm-on .s1-chapter.hero .lion-box { margin-bottom: 0; }
/* the rails float OVER the storm - and carry their own scrim so the tab list,
   the brand block and the audit drop stay readable against moving cloud. */
.s1-storm-on .s1-left, .s1-storm-on .s1-right { position: relative; z-index: 3; }
.s1-storm-on .s1-left { background: linear-gradient(90deg, rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.56)); }
.s1-storm-on .s1-right { background: linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.78)); }
.s1-storm-on .s1-center { position: relative; z-index: 1; }
@media (max-width: 1100px) {
  /* the three-column grid has collapsed - there are no side rails to hide behind */
  .s1-storm-on { --rail-l: 0px; --rail-r: 0px; }
  .s1-storm-on .s1-left, .s1-storm-on .s1-right { background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s1-storm-on .sky-wrap, .s1-storm-on .lion-box { transform: none !important; }
}
.hero-weather .skyfield {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56%;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
  will-change: transform;
}
.sky-a { object-position: 50% 4%;  z-index: 1; animation: skydrift-a 34s ease-in-out infinite alternate; }
.sky-b { object-position: 50% 26%; z-index: 2; opacity: 0.92; animation: skydrift-b 27s ease-in-out infinite alternate; }
@keyframes skydrift-a { from { transform: scale(1.05); } to { transform: translate3d(-20px, -8px, 0) scale(1.05); } }
@keyframes skydrift-b { from { transform: scale(1.05); } to { transform: translate3d(14px, 10px, 0) scale(1.05); } }
.hero-fore {
  position: relative;
  z-index: 5;
}
.hero-fore { text-align: center; }
.hero-fore .display { margin-left: auto; margin-right: auto; }
.hero-fore .lede { margin-left: auto; margin-right: auto; }
.hero .s1-action-row { justify-content: center; }
.hero-fore .display,
.hero-fore .lede {
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.6);
}
.lion-box {
  position: relative;
  z-index: 3;
  margin-top: clamp(20px, 3.6vh, 44px);
  min-height: 48vh;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px);
          mask-image: linear-gradient(180deg, transparent 0, #000 120px);
}
.lion-box img,
.lion-box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}
.lion-box img.cloudlayer { will-change: transform; pointer-events: none; }
.cloud-top  { z-index: 1; animation: drift-a 34s ease-in-out infinite alternate; }
.cloud-mid  { z-index: 2; animation: drift-b 27s ease-in-out infinite alternate; }
.cloud-fore { z-index: 3; animation: drift-c 39s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(-20px, -8px, 0); } }
@keyframes drift-b { to { transform: translate3d( 14px, 10px, 0); } }
@keyframes drift-c { to { transform: translate3d(-11px, 16px, 0); } }

/* ---------- the services wheel — a vertical drum. Static list is
     the default; motion is opt-in via .motion-on. ---------- */
.wheel-box {
  position: relative;
  background: var(--black);
  border: 1px solid var(--line);
  height: clamp(340px, 46vh, 500px);
  overflow: hidden;
}
.wheel-item {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  will-change: transform, opacity;
}
.wheel-static {
  display: block;
  margin: 0;
  padding: 22px;
  list-style: none;
}
.wheel-static li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.wheel-box.motion-on .wheel-static { display: none; }
.wheel-box:not(.motion-on) .wheel-track { display: none; }
.hero-wheel {
  position: absolute; z-index: 4;
  width: 210px; height: 46%;
  top: 50%; transform: translateY(-50%);
  background: transparent; border: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
  pointer-events: none;
}
.hero-wheel--l { left: 6%; }
.hero-wheel--r { right: 6%; }
.hero-wheel .wheel-item {
  font-size: clamp(0.82rem, 1.05vw, 1.05rem);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.75);
}
.hero-wheel .wheel-static { padding: 8px 0; }
.hero-wheel .wheel-static li { border: 0; padding: 4px 0; text-align: center; font-size: 0.85rem; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.75); }
.hero-wheel.motion-on .wheel-static { display: none; }
.hero-wheel:not(.motion-on) .wheel-track { display: none; }
@media (max-width: 1100px) { .hero-wheel { display: none; } }

/* ---------- 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 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 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;
}
/* note 20: the TILE carries the accent,
   every word goes white. The tinted-text device is dead. Surface tints
   are deepened from the ruled accents so white words measure clear
   (large-type >=3:1, body >=4.5:1) - tune the tint, never the ruling.
   Featured Local Authority rides the same mechanic (Command's read of
   the paper-face fork, flagged in the receipt); badge + border stay. */
/* his blessing 08-12 ("perfect replace the old look with that"): the four bars
   ARE the bronze/silver/gold/platinum plaques he approved - his generated image
   sliced per tier, names baked into the metal. Live titles stay in the markup
   for screen readers, visually the plaque carries the words. */
#s1-pricing .plan {
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  aspect-ratio: 606 / 241;
}
#s1-pricing .plan.featured { border: 0; }
#s1-pricing .bar-1 { background: url(/assets/img/home/tier/tier-1-bronze.png) center / 100% 100% no-repeat; background-image: image-set(url(/assets/img/home/tier/tier-1-bronze.avif) type("image/avif"), url(/assets/img/home/tier/tier-1-bronze.webp) type("image/webp"), url(/assets/img/home/tier/tier-1-bronze.png) type("image/png")); }
#s1-pricing .bar-2 { background: url(/assets/img/home/tier/tier-2-silver.png) center / 100% 100% no-repeat; background-image: image-set(url(/assets/img/home/tier/tier-2-silver.avif) type("image/avif"), url(/assets/img/home/tier/tier-2-silver.webp) type("image/webp"), url(/assets/img/home/tier/tier-2-silver.png) type("image/png")); }
#s1-pricing .bar-3 { background: url(/assets/img/home/tier/tier-3-gold.png) center / 100% 100% no-repeat; background-image: image-set(url(/assets/img/home/tier/tier-3-gold.avif) type("image/avif"), url(/assets/img/home/tier/tier-3-gold.webp) type("image/webp"), url(/assets/img/home/tier/tier-3-gold.png) type("image/png")); }
#s1-pricing .bar-4 { background: url(/assets/img/home/tier/tier-4-platinum.png) center / 100% 100% no-repeat; background-image: image-set(url(/assets/img/home/tier/tier-4-platinum.avif) type("image/avif"), url(/assets/img/home/tier/tier-4-platinum.webp) type("image/webp"), url(/assets/img/home/tier/tier-4-platinum.png) type("image/png")); }
#s1-pricing .plan-bar h3, #s1-pricing .plan-mark { opacity: 0; }
#s1-pricing .plan-bar { height: 100%; }
#s1-pricing .plan-bar:hover, #s1-pricing .plan-bar:focus-visible { background: transparent; }
#s1-pricing .plan:hover, #s1-pricing .plan:focus-within { filter: brightness(1.12); }

#s1-pricing .plan-grid { align-items: start; }
#s1-pricing .plan { min-height: 0; padding: 0; overflow: hidden; }
#s1-pricing .bar-1, #s1-pricing .bar-2, #s1-pricing .bar-3, #s1-pricing .bar-4 { min-height: 0; }

#s1-pricing .plan-grid { align-items: stretch; }
#s1-pricing .plan {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
#s1-pricing .plan-bar h3 { max-width: none; min-height: 0; white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 901px) {
  #s1-pricing .plan-bar h3 { white-space: normal; }
}
@media (min-width: 901px) and (max-width: 1450px) {
  #s1-pricing .plan-grid { grid-template-columns: 1fr 1fr; }
}
#s1-pricing .bar-1, #s1-pricing .bar-2,
#s1-pricing .bar-3, #s1-pricing .bar-4 { min-height: 0; }
/* the grid collapses below this, and a column of stacked bars has no left-to-right
   to climb — the step would read as four random heights, so it parks. */
@media (max-width: 900px) {
  #s1-pricing .bar-1, #s1-pricing .bar-2,
  #s1-pricing .bar-3, #s1-pricing .bar-4 { min-height: 0; }
  #s1-pricing .plan-grid { align-items: stretch; }
}
.plan-bar {
  appearance: none; width: 100%; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 18px 16px; margin: 0;
  color: var(--white); background: transparent; border: 0;
  font-family: inherit;
}
.plan-bar h3 { margin: 0; font-size: 1.02rem; line-height: 1.2; color: #ffffff; }
.plan-bar:hover, .plan-bar:focus-visible { background: rgba(255, 255, 255, 0.07); }
.plan-bar:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
.plan-mark {
  width: 13px; height: 13px; position: relative; flex: none; opacity: 0.85;
}
.plan-mark::before, .plan-mark::after {
  content: ""; position: absolute; background: currentColor;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.plan-mark::before { width: 13px; height: 1.5px; }
.plan-mark::after { width: 1.5px; height: 13px; transition: transform 0.2s ease; }
.plan-bar[aria-expanded="true"] .plan-mark::after { transform: translate(-50%, -50%) scaleY(0); }
.plan-core {
  display: grid; gap: 4px; align-content: start;
  padding: 0 16px 14px;
}
.plan-body {
  display: grid; gap: 4px; align-content: start;
  padding: 0 16px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 0; padding-top: 14px;
}
.plan-body[hidden] { display: none; }
.plan-deep {
  appearance: none; cursor: pointer; margin-top: 12px; padding: 10px 12px;
  font-family: inherit; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.4);
}
.plan-deep:hover, .plan-deep:focus-visible { color: var(--black); background: var(--paper); border-color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .plan-mark::after { transition: none; } }

#s1-pricing .plan h3 { color: #ffffff; }
#s1-pricing .plan .plan-label { color: #f1f0eb; }
#s1-pricing .plan .price { color: #ffffff; }
#s1-pricing .plan.featured .price { color: #ffffff; }
#s1-pricing .plan .term { color: #f1f0eb; }
#s1-pricing .plan.featured .term { color: #f1f0eb; }
#s1-pricing .plan .build { color: #ffffff; }
#s1-pricing .plan.featured .build { color: #ffffff; }
.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); }
/* the two-by-two above is the ruled shape for 901-1450. This block used to
   re-impose four columns underneath it at the same weight and, being later,
   won - which is why the band ran four clipped columns from 901 to 1180 and
   only became the ruled grid above it. The tighter gap and bar cap stay; the
   column count is left to the rule that owns it. */
@media (max-width: 1180px) and (min-width: 901px) {
  #s1-pricing .plan-grid {
    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: 901px) {
  .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; }
}


#boardmount-root {
  --toolband: #000000;
}
.s2-tools {
  background: var(--toolband);
}
.s2-tools .display { font-size: clamp(2rem, 3.2vw, 3rem); }
.tools-bento {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr 0.9fr 1.1fr;
  grid-auto-rows: minmax(190px, auto);
  grid-auto-flow: dense;
  margin-top: 40px;
  border-top: 1px solid rgba(241, 240, 235, 0.22);
  border-left: 1px solid rgba(241, 240, 235, 0.22);
}
.b-tile {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.42);
  border-right: 1px solid rgba(241, 240, 235, 0.22);
  border-bottom: 1px solid rgba(241, 240, 235, 0.22);
}
.b-wide { grid-column: span 2; }
.b-tall { grid-row: span 2; }
.b-tile video,
.b-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: rgba(0, 0, 0, 0.42);
}
.b-tile .cardstill { display: none; }
.b-tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 1180px) {
  .tools-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .tools-bento { grid-template-columns: minmax(0, 1fr); }
  .b-wide { grid-column: auto; }
  .b-tall { grid-row: auto; }
}

/* ---------- the terminal — real source from our own builds typing
     in a loop. Mono at letter-spacing 0: a terminal is the one
     legitimate home for monospace, and it reads as code here. ---------- */
.showcase-terminal {
  position: relative;
  height: clamp(380px, 50vh, 540px);
  margin: 34px 0 0;
  border: 1px solid var(--gray-3);
  overflow: hidden;
}
.tl {
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
          Menlo, Consolas, "Liberation Mono", monospace;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0b0b0b;
}
.tl::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #2F5A88 18%, #5AA9FF 50%, #2F5A88 82%, transparent 100%);
  opacity: 0.55;
  z-index: 2;
}
.tl__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.tl__dots { display: flex; gap: 6px; flex: none; }
.tl__dot { width: 9px; height: 9px; border-radius: 50%; background: #2a2a2a; border: 1px solid #383838; }
.tl__path {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0;
  color: var(--gray-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-inline-start: 4px;
}
.tl__screen {
  flex: 1;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 100%);
}
.tl__line {
  font-family: var(--mono);
  font-size: clamp(10.5px, 1.1vw, 13px);
  letter-spacing: 0;
  line-height: 1.62;
  color: var(--paper);
  white-space: pre;
  min-height: 1.62em;
  tab-size: 2;
}
.c-com { color: #8ac4ff; }
.c-str { color: #ff9e64; }
.c-key { color: #bb9af7; }
.c-prop { color: #7aa2f7; }
.c-num { color: #8ac4ff; }
/* THE MATRIX BUILD, canvas engine — his grades 22:5x: movie green not gold,
   bytes that MUTATE as they fall, fine cells not big blocks, streams that DIE
   at the build frontier instead of passing the finished pieces, and the
   terminal words holding still while it runs. One canvas node, ~2,300 cells,
   ~2m50s bottom-up. One shot per load; reduced motion skips it all. */
.s2-aperture { position: relative; }
.cr-canvas { position: absolute; inset: 0; z-index: 5; pointer-events: none; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .cr-canvas { display: none !important; } }
.tl__cur {
  display: inline-block;
  width: 0.58em;
  height: 1.02em;
  vertical-align: text-bottom;
  background: #8AC4FF;
  margin-inline-start: 1px;
  animation: tl-blink 1.05s steps(1, end) infinite;
}
@keyframes tl-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ---------- 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.8125rem;
  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; }
}

.show-solo {
  display: grid;
  justify-items: center;
  margin-top: 36px;
}
.show-tile.st-solo {
  width: min(320px, 100%);
  min-height: 0;
  aspect-ratio: 9 / 16;
}
.show-tile.st-solo .av { aspect-ratio: 9 / 16; }
.show-tile.st-solo .st-cap { font-size: 0.68rem; }


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

.facts-band { margin-top: clamp(36px, 5vw, 64px); }
.s1-work-list .fact-src { display: block; margin: 4px 0 10px; font-size: 0.8125rem; color: var(--gray-2); }
.facts-intro { color: var(--gray-2); max-width: 640px; margin: 0 0 26px; }
/* note 14: the findings ride the accordion — each row collapsed to its
   fact line, the source line drops open. Facts and citations verbatim;
   the pricing ranges block below keeps its own collapse. */
.fact-row {
  display: block;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  max-width: 860px;
}
.fact-row summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
}
.fact-row summary::-webkit-details-marker { display: none; }
.fact-row summary::after {
  content: "+";
  color: var(--gray-3);
  font-size: 1.1rem;
  line-height: 1;
  padding-top: 3px;
}
.fact-row[open] summary::after { content: "\2212"; }
.fact-row summary:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.fact-row .fact-no {
  color: var(--gray-3);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  padding-top: 3px;
}
/* his ~06:5x bounce: collapsed = ONE SHORT fact line, uniform size, one
   flush column; open = the FULL finding + its source together. The
   distilled headlines are new copy and never change a number. */
.fact-row .fact-line {
  color: var(--paper);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 700px;
}
.fact-full { margin: 12px 0 2px 60px; display: grid; gap: 8px; }
.fact-full p { color: var(--gray-1); font-size: 1rem; margin: 0; max-width: 640px; }
.fact-row p.fact-src {
  color: var(--gray-2);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  max-width: 640px;
}
.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 — his ~07:2x word: subline directly
     under the headline, four cards one equal size, one row, flush
     edges (the distinct-treatments line is dead) ---------- */

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

/* ---------- the fine-print tabs: panels swap in place, nothing scrolls ---------- */
.fp-tabrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.fp-tab {
  appearance: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-2);
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 10px 14px;
}
.fp-tab[aria-selected="true"] {
  color: var(--black);
  background: var(--paper);
  border-color: var(--paper);
}
.fp-tab:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* note 19: the panel sizes to its words.
   min-height fiat (250/300 here + part-tile's 230) is dead in fp scope,
   the tiny-label floor-pin is neutralized, and the h4 rides normal type
   rhythm — no dead stretch between kicker and headline. */
.fp-panel {
  border: 1px solid var(--line);
  min-height: 0;
}
.fp-panel .tiny-label { margin: 0; }
.fp-panel h4 { margin: 0.85rem 0 10px; }
.fp-panel[hidden] { display: none; }

/* ---------- the compare popout: every plan side by side, page stays put ---------- */
#s1-pricing .plan { 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); }
/* the tier detail popout (note 17) */
.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; }
.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;
}
.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; }
}
@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;
}
.ct-ask, .ct-ask * { font-weight: 400; }
.ct-askblue { color: var(--g-blue-kick, #9fb6e0); }
.ts-custom .ct-face { display: none; }

.paidaudit-row { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.pa-band {
  position: relative; display: inline-flex; align-items: center;
  background: var(--paper); color: #000; font-weight: 700; font-size: 0.9rem;
  padding: 10px 18px; min-height: 44px; text-decoration: none; border-radius: 6px;
}
.pa-band:hover, .pa-band:focus, .pa-band:focus-visible { background: #fff; color: #000; }
.pa-band .mp-tip { display: none; position: absolute; right: 0; left: auto; top: calc(100% + 8px); z-index: 6; min-width: 250px; background: #000; color: var(--paper); border: 1px solid var(--paper); border-radius: 8px; padding: 10px 12px; font-size: 0.8rem; font-weight: 400; line-height: 1.55; }
.pa-band:hover .mp-tip, .pa-band:focus .mp-tip, .pa-band:focus-visible .mp-tip { display: block; }

/* 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; }
.td-tab {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 700;
  border: 1px solid var(--line); color: #000;
  min-width: 158px; min-height: 46px; padding: 0 14px;
  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); background-image: image-set(url(/assets/img/home/tier/tex-1-bronze.avif) type("image/avif"), url(/assets/img/home/tier/tex-1-bronze.webp) type("image/webp"), url(/assets/img/home/tier/tex-1-bronze.png) type("image/png")); }
.td-tab[data-td-tab="2"] { background-image: url(/assets/img/home/tier/tex-2-silver.png); background-image: image-set(url(/assets/img/home/tier/tex-2-silver.avif) type("image/avif"), url(/assets/img/home/tier/tex-2-silver.webp) type("image/webp"), url(/assets/img/home/tier/tex-2-silver.png) type("image/png")); }
.td-tab[data-td-tab="3"] { background-image: url(/assets/img/home/tier/tex-3-gold.png); background-image: image-set(url(/assets/img/home/tier/tex-3-gold.avif) type("image/avif"), url(/assets/img/home/tier/tex-3-gold.webp) type("image/webp"), url(/assets/img/home/tier/tex-3-gold.png) type("image/png")); }
.td-tab[data-td-tab="4"] { background-image: url(/assets/img/home/tier/tex-4-platinum.png); background-image: image-set(url(/assets/img/home/tier/tex-4-platinum.avif) type("image/avif"), url(/assets/img/home/tier/tex-4-platinum.webp) type("image/webp"), url(/assets/img/home/tier/tex-4-platinum.png) type("image/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-card.td-metal--1 { background: url(/assets/img/home/tier/card-1-bronze.png) center / cover no-repeat; background-image: image-set(url(/assets/img/home/tier/card-1-bronze.avif) type("image/avif"), url(/assets/img/home/tier/card-1-bronze.webp) type("image/webp"), url(/assets/img/home/tier/card-1-bronze.png) type("image/png")); }
.td-card.td-metal--2 { background: url(/assets/img/home/tier/card-2-silver.png) center / cover no-repeat; background-image: image-set(url(/assets/img/home/tier/card-2-silver.avif) type("image/avif"), url(/assets/img/home/tier/card-2-silver.webp) type("image/webp"), url(/assets/img/home/tier/card-2-silver.png) type("image/png")); }
.td-card.td-metal--3 { background: url(/assets/img/home/tier/card-3-gold.png) center / cover no-repeat; background-image: image-set(url(/assets/img/home/tier/card-3-gold.avif) type("image/avif"), url(/assets/img/home/tier/card-3-gold.webp) type("image/webp"), url(/assets/img/home/tier/card-3-gold.png) type("image/png")); }
.td-card.td-metal--4 { background: url(/assets/img/home/tier/card-4-platinum.png) center / cover no-repeat; background-image: image-set(url(/assets/img/home/tier/card-4-platinum.avif) type("image/avif"), url(/assets/img/home/tier/card-4-platinum.webp) type("image/webp"), url(/assets/img/home/tier/card-4-platinum.png) type("image/png")); }
.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); }

.td-tab:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.td-panel[hidden] { display: none; }
.td-panel h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  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); }
.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;
  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 {
  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 li {
  margin: 4px 0;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.cmp-col .badge { margin-bottom: 0; }
/* own accent classes — never the tile bar-N classes, whose media rules
   (min-height at <=900px) would size these columns to 240px and overlap */
.cmp-col.cacc-1 { --acc-text: #c97d75; }
.cmp-col.cacc-2 { --acc-text: #5aa9ff; }
.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); }
}

/* ---------- lifted panel surfaces: measured 1.00-1.06:1 against the black
   ground before this — panels that existed only as borders. One warm panel
   tone (1.34:1 vs #000) lifts the class; paper surfaces keep their ground. */
:root { --panel: #232320; }
.scope-box, .plan, .film-frame, .show-tile {
  background: var(--panel);
}
.film-card .film-frame { background: var(--panel); }

/* ---------- 02/SCOPE: four large squares, three coded template faces
   each — HTML/CSS website mocks, one per business genre, cycling
   STAGGERED on distinct phase offsets (note 15 — note 3's sync line is
   dead). Reduced motion holds one face per square. ---------- */
.genre-squares {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.genre-square { margin: 0; }
/* SQUARESFLOW: each square = chrome + a windowed viewport onto the
   column's filmstrip + the pinned tag. The strip is transform-only;
   the tag never scrolls with it. */
.gsq {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.gs-chrome { display: flex; gap: 5px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.gs-chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-3); }
.gs-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--black);
  border: 1px solid var(--line);
}
.gs-strip {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  will-change: transform;
}
.gs-strip img {
  display: block;
  width: 100%;
  height: var(--face-h, 100%);
  object-fit: cover;
  object-position: top;
}
.gs-tag {
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-1);
}
/* reduced motion: the JS branch never arms its clock - it parks each
   window on its own clean still instead (one face per window). */
@media (max-width: 900px) {
  .genre-squares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#s1-work .wheel-box {
  margin: 26px auto 0;
  max-width: min(620px, 100%);
}

/* ---------- the numbered ledger rides a browser box, scroll inside ---------- */
.ledger-browser { margin-top: 10px; border: 1px solid var(--line); background: var(--panel); }
.lb-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 2px solid var(--paper);
  background: var(--black);
}
.lb-dots { display: flex; gap: 5px; }
.lb-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-3); }
.lb-path {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
}
/* note 11 + his boxdrop rider: the WHOLE box is a dropdown — closed to
   its title bar by default; the bar toggles (native summary: focusable,
   Enter/Space). The fine-print block below it rides the identical device
   ("the other one under it too"). Inner rows keep their own +/− drops. */
.lbx > summary { list-style: none; cursor: pointer; }
.lbx > summary::-webkit-details-marker { display: none; }
.lbx > .lb-bar { display: flex; align-items: center; gap: 12px; }
.lbx-mark { margin-left: auto; color: var(--paper); font-size: 1rem; }
.lbx-mark::before { content: "+"; }
.lbx[open] > summary .lbx-mark::before { content: "\2212"; }
.lbx > summary:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
.lb-bar.fp-bar { border: 2px solid var(--paper); background: var(--black); padding: 10px 14px; }
.fineprint .fp-bar .lb-path { color: var(--paper); }
.fp-drop { padding-top: 4px; }

/* 2026-09-05: the ledger rides the same bold-white-on-black treatment as the store board. */
.lb-viewport { height: auto; max-height: var(--lb-h, 648px); overflow-y: auto; padding: 0 18px; background: var(--black); color: var(--paper); }
.lb-item { border-top: 1px solid rgba(237, 241, 246, 0.18); }
.lb-item:first-child { border-top: 0; }
.lb-sum { list-style: none; cursor: pointer; display: block; min-height: 44px; padding: 13px 2px; }
.lb-sum::-webkit-details-marker { display: none; }
.lb-sum h3 { display: flex; align-items: baseline; gap: 14px; margin: 0; font-size: 1.15rem; line-height: 1.25; font-weight: 700; color: var(--paper); letter-spacing: -0.01em; }
.lb-sum h3 span { flex: 0 0 auto; font-weight: 700; font-size: 0.8125rem; color: rgba(241, 240, 235, 0.85); }
.lb-sum h3 .lb-t { flex: 1 1 auto; font-size: inherit; font-weight: inherit; color: inherit; }
.lb-sum h3::after { content: "+"; margin-left: auto; padding-left: 12px; color: rgba(241, 240, 235, 0.85); font-weight: 400; font-size: 1.35rem; line-height: 1; }
.lb-item[open] .lb-sum h3::after { content: "\2212"; }
.lb-sum:hover h3 .lb-t, .lb-sum:focus-visible h3 .lb-t { text-decoration: underline; text-underline-offset: .14em; }
.lb-sum:hover h3::after, .lb-sum:focus-visible h3::after { color: var(--paper); }
.lb-sum:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
.lb-item .muted { color: rgba(241, 240, 235, 0.85); margin: 0 2px 14px; max-width: 70ch; }

.toolsuite {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: 16px;
  margin-top: 40px;
}
.ts-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.ts-custom { grid-column: 1 / -1; padding: 0; background: transparent; border: 0; min-height: 0; align-self: start; }
.ct-face {
  appearance: none; cursor: pointer; width: 100%; display: block;
  padding: 10px 0; margin: 0; text-align: center;
  color: var(--paper); background: transparent; border: 0; outline: none; font-family: inherit;
}
.ct-line { font-family: var(--serif); font-size: clamp(1.12rem, 1.9vw, 1.5rem); line-height: 1.2; }
.ct-click { color: var(--gray-1); text-decoration: underline; text-underline-offset: 3px; }
.ct-sub { color: var(--gray-2); font-size: 0.84rem; }
.ct-face:hover, .ct-face:focus-visible { background: transparent; }
.ct-face:hover .ct-click, .ct-face:focus-visible .ct-click { color: var(--paper); }
.ct-face:focus-visible .ct-click { outline: 2px solid var(--paper); outline-offset: 3px; }
.ts-custom:hover { border: 0; }
.ct-sub { display: none; }
.ct-form textarea {
  width: 100%; min-height: 76px; padding: 10px 12px; resize: vertical; line-height: 1.5;
  font-family: var(--sans); font-size: 0.88rem; color: var(--paper);
  background: var(--black); border: 1px solid var(--line);
}
.ct-form textarea:focus { outline: none; border-color: var(--paper); }
.ct-note { margin-top: 14px; }
@media (max-width: 900px) { .ct-face { padding: 20px 14px; } }

.ts-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.ts-topline .ts-label { min-width: 0; }
.ts-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-2);
}
.ts-chip {
  padding: 3px 8px;
  border: 1px solid var(--gray-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-1);
  white-space: nowrap;
}
.ts-chip-staged { color: var(--gray-2); border-color: var(--line); }
.ts-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  letter-spacing: -0.02em;
}
.ts-sub { margin: 0; color: var(--gray-2); font-size: 0.85rem; }
.ts-cardline { margin: 0; font-size: 1.05rem; }
.ts-note { margin: 0; color: var(--gray-2); font-size: 0.72rem; }
.ts-stage { display: none; }
.ts-stage.on { display: flex; flex-direction: column; gap: 10px; }
.ts-stars { display: flex; flex-wrap: wrap; gap: 5px; }
.ts-ask-row { margin: 10px 0 0; }
.ts-stars button {
  appearance: none;
  cursor: pointer;
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--gray-2);
  font-size: 1.05rem;
  line-height: 1;
  padding: 7px 9px;
}
.ts-stars button.lit { color: var(--paper); border-color: var(--gray-2); }
.ts-stars button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.ts-form { display: flex; flex-direction: column; gap: 10px; }
.ts-form label { display: grid; gap: 5px; }
.ts-form input[type="text"], .ts-form input[type="email"], .ts-form input[type="tel"], .ts-form select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--paper);
  font: inherit;
  font-size: 0.9rem;
  padding: 9px 10px;
}
.ts-form select { appearance: none; }
.ts-consent {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  color: var(--gray-1);
  font-size: 0.78rem;
}
.ts-consent input { margin-top: 2px; }
.ts-consent a { color: var(--gray-1); }
.ts-btn {
  align-self: flex-start;
  white-space: normal;
  max-width: 100%;
  box-sizing: border-box;
}
.ts-tile { overflow-wrap: break-word; }
.ts-staged { margin: 0; color: var(--gray-1); font-size: 0.78rem; border-left: 1px solid var(--gray-2); padding-left: 10px; }
.ts-staged.is-real { color: var(--ink); font-size: 0.95rem; font-weight: 700; }
.ts-counter { margin: 0; font-weight: 700; font-size: 0.85rem; color: var(--gray-1); }
.ts-logpanel, .ts-history { border: 1px solid var(--line); background: var(--black); }
.ts-loghead { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ts-form .field-label { white-space: normal; }
.ts-logbody { max-height: 132px; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.ts-logbody .ts-row { border: 1px solid var(--line); padding: 6px 9px; font-size: 0.78rem; color: var(--gray-1); }
.ts-empty { margin: 0; color: var(--gray-2); font-size: 0.78rem; }
.ts-channels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ts-channel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-width: 0;
  border: 1px solid var(--line); background: var(--black);
  padding: 9px 10px; font-size: 0.78rem; color: var(--gray-1);
}
.ts-mark { font-weight: 700; color: var(--gray-2); }
.ts-channel .ts-chip { margin-left: auto; }
.ts-phone { border: 1px solid var(--line); background: var(--black); padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.ts-missed { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); padding: 8px 10px; font-size: 0.78rem; color: var(--gray-1); }
.ts-msg { max-width: 88%; padding: 9px 11px; font-size: 0.82rem; border: 1px solid var(--line); }
.ts-msg small { display: block; margin-top: 5px; font-size: 0.62rem; letter-spacing: 0.08em; color: var(--gray-2); }
.ts-msg-out { align-self: flex-end; background: var(--paper); color: var(--black); }
.ts-msg-out small { color: #4d4d49; }
.ts-msg-in { align-self: flex-start; color: var(--gray-1); }
.ts-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ts-pick {
  appearance: none; cursor: pointer;
  background: var(--black); border: 1px solid var(--line);
  color: var(--gray-1); font: inherit; font-size: 0.76rem;
  padding: 9px 8px; text-align: left;
}
.ts-pick[aria-pressed="true"] { background: var(--paper); color: var(--black); border-color: var(--paper); }
/* the five device-session metric cells were replaced this round by the
   running record (.ts-permrec) the dashboard now carries; their rules left
   with their markup. */
.ts-spark { display: flex; align-items: flex-end; gap: 3px; height: 56px; border: 1px solid var(--line); background: var(--black); padding: 6px; }
.ts-spark i { flex: 1 1 auto; background: var(--gray-3); min-height: 2px; }
.ts-lane { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); background: var(--black); padding: 9px 12px; }
.ts-lane-label b { font-size: 0.85rem; display: block; }
.ts-lane-label small { color: var(--gray-2); font-size: 0.7rem; }
.ts-timer { text-align: right; }
.ts-timer span { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; }
.ts-timer small { display: block; color: var(--gray-2); font-size: 0.66rem; }
.opt { color: var(--gray-2); font-weight: 400; }


.ts-tile { min-height: 220px; }
.ts-face {
  appearance: none;
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 10px 0 2px;
  color: inherit;
  font: inherit;
  text-align: left;
}
.ts-tile .ts-name { text-align: center; }
.ts-face:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* the board's demo-shell device at tile scale: hairline ring, corner
   veil sheen, near-black panel, raised cards inside */
.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);
}
.ts-face:hover .tsf, .ts-face: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; }
/* 01 — review request card (board study 01) */
.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; }
@keyframes tsfReviewCard {
  0%, 20% { opacity: 0; transform: translateY(12px); }
  31%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes tsfStarFill {
  0%, 34% { width: 0; }
  72%, 92% { width: 100%; }
  100% { width: 0; }
}
/* 02 — tracked calls count + lead log (board study 02, stacked at tile width) */
.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; }
@keyframes tsfCountZero { 0%, 19% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes tsfCountOne { 0%, 19%, 48%, 100% { opacity: 0; } 22%, 45% { opacity: 1; } }
@keyframes tsfCountTwo { 0%, 48%, 100% { opacity: 0; } 51%, 94% { opacity: 1; } }
@keyframes tsfLogOne {
  0%, 16% { opacity: 0; transform: translateX(10px); }
  25%, 94% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; }
}
@keyframes tsfLogTwo {
  0%, 45% { opacity: 0; transform: translateX(10px); }
  54%, 94% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; }
}
/* 03 — channel cards with publish states (board study 03) */
.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; }
@keyframes tsfPostA {
  0%, 8% { opacity: 0; transform: translateY(8px); }
  18%, 62% { opacity: 1; transform: translateY(0); }
  72%, 100% { opacity: 0.35; transform: translateY(0); }
}
@keyframes tsfPostB {
  0%, 40% { opacity: 0.35; }
  52%, 92% { opacity: 1; }
  100% { opacity: 0.35; }
}
@keyframes tsfPublishPulse {
  0% { opacity: 0.7; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.35); }
}
/* 04 — search bar + rising landing page (board study 04) */
.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; }
@keyframes tsfQueryType {
  0%, 8% { width: 0; }
  38%, 92% { width: 26ch; }
  100% { width: 0; }
}
@keyframes tsfResultRise {
  0%, 42% { opacity: 0; transform: translateY(3.4rem); }
  56%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
/* 05 — booking week + confirmation (board study 05) */
.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; }
@keyframes tsfSelected {
  0%, 32% { opacity: 0; transform: scale(0.8); }
  43%, 92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}
@keyframes tsfConfirm {
  0%, 48% { opacity: 0; transform: translateY(8px); }
  58%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}
/* 06 — text-back phone (board study 06) */
.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; }
@keyframes tsfMissed {
  0%, 8% { opacity: 0; transform: translateY(-7px); }
  16%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}
@keyframes tsfTextSent {
  0%, 28% { opacity: 0; transform: translateY(7px) scale(0.96); }
  38%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; }
}
@keyframes tsfReply {
  0%, 57% { opacity: 0; transform: translateY(7px) scale(0.96); }
  68%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; }
}
/* 07 — envelope + monthly cycle (board study 07) */
.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; }
@keyframes tsfEnvSeal {
  0%, 15% { transform: rotateX(180deg); }
  28%, 92% { transform: rotateX(0); }
  100% { transform: rotateX(180deg); }
}
@keyframes tsfEnvSend {
  0%, 34% { opacity: 1; transform: translateX(0) scale(1); }
  48% { opacity: 0; transform: translateX(4rem) scale(0.8); }
  62% { opacity: 0; transform: translateX(-1.2rem) scale(0.8); }
  72%, 100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes tsfEmailSent { 0%, 38% { opacity: 0.35; } 48%, 92% { opacity: 1; } 100% { opacity: 0.35; } }
@keyframes tsfEmailOpen {
  0%, 56% { opacity: 0.35; transform: translateX(0); }
  66%, 92% { opacity: 1; transform: translateX(3px); }
  100% { opacity: 0.35; }
}
@keyframes tsfEmailNext { 0%, 70% { opacity: 0.35; } 80%, 92% { opacity: 1; } 100% { opacity: 0.35; } }
/* 08 — live dashboard metrics + drawn line (board study 08; metrics
   stack as rows at tile width — 3-across cannot hold the labels) */
.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; }
@keyframes tsfMetricZero { 0%, 18% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes tsfMetricOne { 0%, 18%, 49%, 100% { opacity: 0; } 22%, 45% { opacity: 1; } }
@keyframes tsfMetricTwo { 0%, 49%, 100% { opacity: 0; } 53%, 94% { opacity: 1; } }
@keyframes tsfSparkDraw {
  0%, 18% { stroke-dashoffset: 1; }
  62%, 92% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}
/* 09 — speed-to-lead lanes (board study 09; label+timer above the
   track at tile width — the three-across lane needs more room) */
.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; }
@keyframes tsfManualRace {
  0%, 8% { left: 0; }
  88%, 94% { left: 100%; }
  100% { left: 0; }
}
@keyframes tsfSystemRace {
  0%, 8% { left: 0; }
  28%, 94% { left: 100%; }
  100% { left: 0; }
}
@keyframes tsfTimerZero { 0%, 16% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes tsfTimerOne { 0%, 16%, 54%, 100% { opacity: 0; } 20%, 50% { opacity: 1; } }
@keyframes tsfTimerTwo { 0%, 54%, 100% { opacity: 0; } 58%, 94% { opacity: 1; } }
/* reduced motion: every face holds the board's ruled still state */
@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) {
  .ts-tile { min-height: 168px; padding: 10px; }
  .ts-name { font-size: 0.92rem; }
  .ts-label { display: none; }
  .ts-topline { justify-content: flex-end; padding-bottom: 6px; }
  .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; }
}

/* the monthly report face: a one-page sheet — the month's two counts over
   the line that says where they came from. No motion here on purpose: the
   report is a document the owner reads, not a live feed. */
.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; }

/* the well: the tool's whole fill-out, fixed above the page when open.
   It never leaves its tile in the DOM, so every binding holds. */
.ts-well {
  position: fixed;
  z-index: 92;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 28px));
  max-height: 86vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--gray-2);
  padding: 22px;
}
.ts-well[hidden] { display: none; }
.ts-well.zoom { transition: transform 0.26s ease, opacity 0.26s ease; }
.ts-well-head {
  position: sticky;
  top: 0;
  z-index: 8;
  background: inherit;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.ts-well-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.ts-well-close {
  appearance: none;
  cursor: pointer;
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--paper);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 8px 11px;
  min-width: 44px;
  min-height: 44px;
}
.ts-well-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.ts-back { position: fixed; inset: 0; z-index: 88; background: rgba(0, 0, 0, 0.74); }
.ts-back[hidden] { display: none; }

.gf { gap: 7px; }

/* padding + the 1px border IS the gap the eye measures: 13+1 = 14.00 before,
   a third closed = 9.33, so the padding is 8.33. Setting it to 9.33 left the
   gap at 10.33 and closed only 26.2% - a real 4-point miss caused by ignoring
   a 1px border. */
.gsq { padding: 8.33px; gap: 0; }

/* --- tab strip: dots, a real tab, a new-tab plus --- */
.gs-bar { display: flex; align-items: flex-end; gap: 7px; height: 20px; margin-bottom: 5px; }
.gs-chrome { display: flex; gap: 4px; align-items: center; padding: 0; border-bottom: 0; height: 20px; }
.gs-chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-3); }
.gs-chrome i:first-child { background: #6d4642; }
.gs-chrome i:nth-child(2) { background: #6e5a34; }
.gs-chrome i:last-child { background: #3f6045; }
.gs-tab {
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto;
  height: 20px; padding: 0 9px;
  background: var(--black); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.gs-fav { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--gray-3); }
.gs-tab .gs-search-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray-1); cursor: pointer;
}
.gs-plus { flex: none; color: var(--gray-3); font-size: 0.7rem; line-height: 1; padding-bottom: 4px; }

/* --- address bar: history glyphs, lock, plausible URL, the field, the go --- */
.gs-search {
  display: flex; align-items: center; gap: 5px; height: 31.11px;
  padding: 0 4px; text-align: left;
  background: var(--black); border: 1px solid var(--line); border-bottom: 0;
}
.gs-hist { display: flex; align-items: center; gap: 5px; flex: none; padding-left: 2px; }
.gs-hist i { width: 6px; height: 6px; border: 1px solid var(--gray-3); border-width: 1px 1px 0 0; transform: rotate(-135deg); }
.gs-hist i.gs-h-fwd { transform: rotate(45deg); }
.gs-hist i.gs-h-rel { border-width: 1px 1px 1px 0; border-radius: 50%; transform: none; }
.gs-url {
  display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0;
  height: 21px; padding: 0 8px; border-radius: 999px;
  background: #131311; border: 1px solid var(--line);
}
.gs-lock { flex: none; width: 5px; height: 6px; border: 1px solid var(--gray-2); border-radius: 1px; position: relative; }
.gs-lock::before {
  content: ""; position: absolute; left: 0.5px; top: -3px; width: 3px; height: 3px;
  border: 1px solid var(--gray-2); border-bottom: 0; border-radius: 2px 2px 0 0;
}
.gs-host { flex: none; font-size: 0.55rem; letter-spacing: 0.01em; color: var(--gray-3); white-space: nowrap; }
.gs-search input[type="text"] {
  flex: 1 1 auto; min-width: 0; min-height: 0; height: 19px;
  padding: 0; font-size: 0.62rem; color: var(--paper);
  background: transparent; border: 0;
}
.gs-search input[type="text"]:focus { outline: none; }
.gs-url:focus-within { border-color: var(--gray-2); }
.gs-search button {
  flex: none; min-height: 0; height: 21px; padding: 0 8px;
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--paper); background: transparent; border: 1px solid var(--gray-3); border-radius: 999px; cursor: pointer;
}
.gs-search button:hover, .gs-search button:focus-visible { color: var(--black); background: var(--paper); }
.gs-viewport { flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--line); }
.gs-tag { margin-top: 2px; }

@media (max-width: 900px) {
  /* the card is 165 square on a phone - the chrome keeps every part but reads
     tighter, and the capture still takes the third it gained. */
  .gsq { padding: 8.33px; }
  .gs-bar { height: 16px; gap: 5px; margin-bottom: 4px; }
  .gs-chrome { height: 16px; gap: 3px; }
  .gs-chrome i { width: 5px; height: 5px; }
  .gs-tab { height: 16px; padding: 0 6px; gap: 4px; }
  .gs-tab .gs-search-label { font-size: 0.48rem; letter-spacing: 0.06em; }
  .gs-fav { width: 6px; height: 6px; }
  .gs-search { height: 24px; gap: 4px; }
  .gs-hist { display: none; }
  .gs-url { height: 17px; padding: 0 6px; }
  .gs-host { font-size: 0.46rem; }
  .gs-search input[type="text"] { height: 15px; font-size: 0.55rem; }
  .gs-search button { height: 17px; padding: 0 6px; font-size: 0.46rem; }
}

@media (max-width: 900px) {
  #s1-pricing .plan,
  #s1-pricing .bar-1, #s1-pricing .bar-2, #s1-pricing .bar-3, #s1-pricing .bar-4 { min-height: 0; }
}
.gs-face {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  object-position: center top;
}

/* the live embed rides above the film; it only appears once its load
   event proves it (no visible flash — the film holds the frame till then). */
.s2-aperture .av-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 3;
}
.s2-aperture.live .av-live { opacity: 1; }
.s2-aperture .av .mount-cap { z-index: 4; }

/* the rail navigates the page (his ~07:0x revision): anchor travel is
   smooth, reduced motion jumps, the tracker lights the tab in view. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.band-deep { margin-top: 20px; }
.s2lb-copy .band-deep a { pointer-events: auto; }
#s1-work, #s1-proof { text-align: center; }
#s1-work .section-title, #s1-proof .section-title,
#s1-work .lede, #s1-proof .lede { margin-left: auto; margin-right: auto; }
#s1-proof .ledger-browser, #s1-proof .fineprint {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

#s1-work .genre-squares { max-width: min(660px, 100%); margin-left: auto; margin-right: auto; gap: 16px; }

.gs-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 6px; align-items: center; text-align: left; }
.gs-search .gs-search-label { grid-column: 1 / -1; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-2); }
.gs-search input { min-height: 30px; padding: 4px 8px; font-size: 0.78rem; color: var(--paper); background: var(--black); border: 1px solid var(--line); min-width: 0; }
.gs-search input:focus { outline: none; border-color: var(--paper); }
.gs-search button { min-height: 30px; padding: 0 10px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; color: var(--paper); background: transparent; border: 1px solid var(--gray-3); cursor: pointer; }
.gs-search button:hover, .gs-search button:focus-visible { color: var(--black); background: var(--paper); }

.wheel-box { height: clamp(190px, 24vh, 260px); }
#s1-work .wheel-box { max-width: min(520px, 100%); }

#s2-tools-band { text-align: center; border-bottom: 2px solid var(--paper); }
#s2-tools-band .display, #s2-tools-band .lede { margin-left: auto; margin-right: auto; }
#s2-tools-band .toolsuite { text-align: left; gap: 24px; max-width: 1180px; margin-left: auto; margin-right: auto; }
.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; }

.ts-well { width: min(640px, calc(100vw - 28px)); }
/* WELLFIX 0812 — flex-shrink:0 is load-bearing, not decoration. The well is a
   column flexbox capped at max-height:86vh. A flex item's AUTOMATIC MINIMUM
   SIZE (min-height:auto) is what normally stops it being squashed below its
   content — but the spec zeroes that protection for any item whose overflow is
   not `visible`. The glass restyle gave .ts-app `overflow:hidden` for its 14px
   radius clip, which silently switched the protection off: the flex parent then
   shrank .ts-app and it clipped its own form — 248px at 1280, 549px at a true
   390 — while .ts-well reported scrollHeight === clientHeight, so nothing
   scrolled and nothing could reach the cut-off fields. That is his shot. */
.ts-app { border: 1px solid var(--line); background: #080808; flex-shrink: 0; }
.ts-app-bar { position: sticky; top: 54px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--black); }
.ts-app-bar .lb-dots { flex: 0 0 auto; }
.ts-app-title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--paper); }
.ts-app-bar > .ts-chip { margin-left: auto; }
.ts-app-body { display: grid; gap: 12px; padding: 12px; }
.ts-app-rows { display: grid; border: 1px solid var(--line); background: var(--panel); }
.ts-app-rows > :last-child { border-bottom: 0; }
.ts-app-cols { display: grid; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gray-2); }
.ts-approw { display: grid; gap: 3px 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 0.8rem; }
.ts-approw b { font-weight: 700; }
.ts-approw small { color: var(--gray-2); font-size: 0.7rem; }
.ts-approw .ts-chip { justify-self: start; }
.ts-r-tag { justify-self: start; padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gray-2); }
.tsw-c3 { grid-template-columns: auto minmax(0, 1fr) auto; }
.tsw-c4 { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 190px; }
.ts-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line); background: var(--panel); font-size: 0.8rem; }
.ts-kv .tiny-label { align-self: center; }
.ts-help { margin: 0; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--gray-2); font-size: 0.74rem; text-align: left; }

.s1-nav .rail-sec { font-size: 0.76rem; }
.s1-nav .rail-sec span:first-child { color: var(--paper); }
.rail-drop { border-top: 2px solid var(--paper); }
.rail-drop > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 0; color: var(--paper); 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(--paper); font-weight: 600; border-top: 2px solid var(--paper); font-size: 0.78rem; text-decoration: none; }
.rail-drop a:hover, .rail-drop a:focus-visible { color: var(--paper); }

/* mobile structure: the rail's phone shape + the floors (mirror of the
   interior sheet's block — this page carries its own styles). The drawer
   holds the FULL 12-tab rail behind a typographic MENU toggle. */
.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__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; }

  /* text floors, measured at 375: nothing under 12px keeps its size */
  input, select, textarea { font-size: 16px; }
  .tsf-tiny, .tsf-chip, .tsf-slot, .ts-chip, .tl__line, .c-str, .eyebrow, .kicker, .field-label, .plan-label, .badge, .fact-src, .layout-tag, .layout-tag b, .gs-tag, .gsq span, .lb-bar span, .lb-path, .tl__path, .mount-cap, .show-tile .st-cap, .st-cap, .form-note, .marquee-toggle, .audit-tab { font-size: 13px; }
  .text-link, .marquee-toggle, .audit-tab { min-height: 44px; display: inline-flex; align-items: center; }
  /* The .tsf-* / .ts-face miniature mock-screen faces carry their own
     floor in the readable-content sheet below — illustrative texture per
     the ruled tile-faces look, but never below the legibility floor. */
}


.ts-well { width: min(880px, calc(100vw - 40px)); padding: 26px; }
.ts-well-title { font-size: 1.5rem; }

/* --- the reading floor --- */
.ts-sub { font-size: 1rem; }
.ts-cardline { font-size: 1.2rem; }
.ts-note { font-size: 1rem; }
.ts-staged { font-size: 1rem; }
.ts-counter { font-size: 1rem; }
.ts-empty { font-size: 1rem; }
.ts-logbody .ts-row { font-size: 1rem; padding: 9px 12px; }
.ts-channel { font-size: 1rem; padding: 12px 14px; }
.ts-missed { font-size: 1rem; padding: 11px 13px; }
.ts-msg { font-size: 1.05rem; padding: 12px 14px; }
.ts-msg small { font-size: 0.8rem; }
.ts-pick { font-size: 1rem; padding: 12px 11px; }
.ts-consent { font-size: 1rem; }
.ts-help { font-size: 1rem; padding: 12px 14px; }
.ts-kv { font-size: 1rem; padding: 11px 13px; }
.ts-approw { font-size: 1rem; padding: 11px 13px; }
.ts-approw small { font-size: 1rem; }
.ts-lane-label b { font-size: 1.05rem; }
.ts-lane-label small { font-size: 1rem; }
.ts-timer span { font-size: 1.45rem; }
.ts-timer small { font-size: 1rem; }
.ts-form input[type="text"], .ts-form input[type="email"], .ts-form input[type="tel"], .ts-form select { font-size: 1rem; padding: 11px 12px; }
.ts-form .field-label { font-size: 0.78rem; }
.ts-stars button { font-size: 1.35rem; padding: 9px 12px; }
.ts-app-body { gap: 14px; padding: 14px; }

/* --- the furniture floor --- */
.ts-app-title { font-size: 0.8rem; }
.ts-app-cols { font-size: 0.75rem; padding: 9px 13px; }
.ts-chip { font-size: 0.8125rem; padding: 4px 9px; }
.ts-r-tag { font-size: 0.75rem; padding: 2px 8px; }
.ts-well .tiny-label { font-size: 0.75rem; }

/* --- the tile faces: still miniatures, never below legibility --- */
.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; }

/* The band held THREE tracks at every width, so on a 390 phone each tile
   measured 99px wide and 1394px tall and no type size on earth would have
   made that readable — the tile was the reason the words did not read, not
   the type. Measured, not assumed. The uniformity ruling is untouched:
   every tile is still exactly the same size as every other tile at any
   given width, and nothing spans or resizes. */
@media (max-width: 900px) {
  .toolsuite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .toolsuite { grid-template-columns: minmax(0, 1fr); }
  /* the phone keeps the same two floors — a narrower column is a reason to
     stack, never a reason to shrink the words. */
  .ts-well { width: calc(100vw - 20px); padding: 16px; }
  .ts-app-body { gap: 11px; padding: 11px; }
  .ts-approw, .ts-kv { font-size: 1rem; padding: 10px; }
  .ts-approw.tsw-c3, .ts-approw.tsw-c4 { grid-template-columns: auto minmax(0, 1fr); }
  .ts-approw.tsw-c3 > :nth-child(n+3), .ts-approw.tsw-c4 > :nth-child(n+3) { grid-column: 2; }
  .ts-app-cols { display: none; }
  .ts-picker { grid-template-columns: minmax(0, 1fr); }
  .ts-prow b { font-size: 1.35rem; }
  .tsf { min-height: 150px; }
  .tsf-review-h { font-size: 0.86rem; }
  .tsf-stars { font-size: 0.9rem; }
}


/* a picked time slot is a button, not a row of text - and once it is
   yours it stays yours through a reload. */
.ts-slot {
  appearance: none;
  width: 100%;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.ts-slot:hover, .ts-slot:focus-visible { background: #101010; }
.ts-slot:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
.ts-slot[aria-pressed="true"] { background: var(--paper); color: var(--black); }
.ts-slot[aria-pressed="true"] .ts-chip { color: var(--black); border-color: var(--black); }
.ts-slot[aria-pressed="true"] .ts-r-tag { color: #4d4d49; border-color: #b4b4ae; }
.ts-slot[aria-pressed="true"] small { color: #4d4d49; }
/* the booking column reads from its right edge — chips and the header label
   share it, so variable-width pills stop making ragged left edges. */
.tsw-c4 .ts-chip { justify-self: end; }
.ts-app-cols.tsw-c4 > :last-child { justify-self: end; text-align: right; }
.ts-held {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--paper);
  font-size: 1rem;
  color: var(--paper);
}
.ts-held[hidden] { display: none; }

/* the reply box: what gets typed shows in the thread as it is typed */
.ts-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.ts-compose-field { display: grid; gap: 5px; min-width: 0; }
.ts-compose-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--paper);
  font: inherit;
  font-size: 1rem;
  padding: 11px 12px;
}
.ts-compose-field input:focus { outline: none; border-color: var(--paper); }
.ts-compose-field .field-label { font-size: 0.78rem; }
.ts-msg.is-typing { opacity: 0.62; border-style: dashed; }

/* the running record: four counts that do not reset. Distinct treatment
   per cell on purpose - this is a readout inside a tool, never a row of
   decorative numerals standing in for proof. */
.ts-permrec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ts-prow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); background: var(--black); }
.ts-prow b { font-size: 1.6rem; letter-spacing: -0.02em; }
.ts-pr-call { border-left: 3px solid var(--paper); }
.ts-pr-form { border-left: 3px solid var(--gray-2); }
.ts-pr-book { border-left: 3px solid var(--gray-3); }
.ts-pr-lead { border-left: 3px solid var(--paper); background: #101010; }

/* every tile can be put back to its opening state, in the open - the
   alternative was a silent loop wiping the visitor's work, which is the
   thing he called out. */
.ts-reset {
  appearance: none;
  justify-self: start;
  align-self: flex-start;
  padding: 8px 11px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--gray-2);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.ts-reset:hover, .ts-reset:focus-visible { color: var(--paper); border-color: var(--paper); }

/* a face settles instead of looping forever. The held state below is the
   same one the reduced-motion rule already rules for these faces - the
   loop now plays once and lands there rather than wiping and restarting. */
.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; }

@media (max-width: 620px) {
  .ts-permrec { grid-template-columns: minmax(0, 1fr); }
  .ts-compose { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
}


#s2-tools-band {
  position: relative;
  /* the glass vocabulary, one place */
  --g-fill:        rgba(255, 255, 255, 0.06);
  --g-fill-2:      rgba(255, 255, 255, 0.05);
  --g-fill-hi:     rgba(255, 255, 255, 0.13);
  --g-line:        rgba(255, 255, 255, 0.16);
  --g-line-soft:   rgba(255, 255, 255, 0.12);
  --g-line-strong: rgba(255, 255, 255, 0.22);
  --g-inset:       inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --g-drop:        0 12px 40px rgba(0, 0, 0, 0.45);
  --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%);
  --g-blue-glow:   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);
}

/* ---- the orbs. Clipped by their own field so a 90px blur cannot bleed into
   the neighbouring bands, and never a containing block for the fixed well. -- */
.ts-orbfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* his freeze report 08-12: the 90px live blurs were the heaviest layers on the
   page - same glow, drawn as a gradient instead, zero per-frame filter cost. */
.ts-orb { position: absolute; border-radius: 50%; }
.ts-orb-blue { width: 620px; height: 620px; background: radial-gradient(circle, #1e3a6e 0%, #1e3a6e 30%, rgba(30,58,110,0) 72%); top: -180px; right: -160px; opacity: 0.46; }
/* .ts-orb-gold: the NAME is historical, as .bk-orb-gold above. */
.ts-orb-gold { width: 470px; height: 470px; background: radial-gradient(circle, #2f5a88 0%, #2f5a88 30%, rgba(47,90,136,0) 72%); bottom: -190px; left: -150px; opacity: 0.26; }
#s2-tools-band > *:not(.ts-orbfield) { position: relative; z-index: 1; }

/* ---- the tile: the popup's card, at tile scale ---- */
#s2-tools-band .ts-tile {
  padding: 18px;
  background: var(--g-fill);
  border: 1px solid var(--g-line);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--g-drop), var(--g-inset);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
#s2-tools-band .ts-tile:hover,
#s2-tools-band .ts-tile:focus-within {
  border-color: var(--g-blue-edge);
  box-shadow: 0 18px 52px rgba(0,0,0,.5), 0 0 30px rgba(90,140,255,.16), var(--g-inset);
  transform: translateY(-2px);
}
#s2-tools-band .ts-tile.ts-tile--open,
.ts-tile.ts-tile--open {
  transform: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  filter: none !important;
}
.toolsuite.toolsuite--wellopen { z-index: auto !important; }
/* and the wells join the layer F1 defined for modals the visitor OPENED, above the
   non-modal consent sheet at 95 — F1 raised .bk-ov/.td-ov/.cmp-ov and left these
   eleven behind at 92, which is the same defect one layer down. */
.ts-well { z-index: 100; }
/* the custom-tool LINE stays a line — his second strike said so. No glass box. */
#s2-tools-band .ts-custom,
#s2-tools-band .ts-custom:hover {
  background: transparent; border: 0; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; transform: none; padding: 0;
}
#s2-tools-band .ts-topline { border-bottom: 1px solid var(--g-line-soft); }
#s2-tools-band .ts-label { color: var(--g-blue-kick); letter-spacing: 0.18em; }
#s2-tools-band .ts-name { color: var(--paper); }

/* ---- chips: the popup's pill, small ---- */
#s2-tools-band .ts-chip {
  border-radius: 999px; padding: 4px 10px;
  color: var(--paper);
  background: var(--g-fill);
  border: 1px solid var(--g-line-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--g-inset);
}
#s2-tools-band .ts-chip-staged {
  color: var(--gray-1); background: rgba(255,255,255,.035);
  border-color: var(--g-line-soft); box-shadow: none;
}
#s2-tools-band .ts-r-tag {
  border-radius: 999px; color: var(--g-blue-kick);
  background: rgba(120,170,255,.10); border: 1px solid rgba(140,180,255,.28);
}

/* ---- the face miniature: a glass slab, not a grey card ---- */
#s2-tools-band .tsf {
  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);
}
#s2-tools-band .ts-face:hover .tsf,
#s2-tools-band .ts-face:focus-visible .tsf { border-color: var(--g-blue-edge); }
#s2-tools-band .ts-face:focus-visible { outline: 2px solid var(--g-blue-edge); outline-offset: 3px; }
#s2-tools-band .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);
}
#s2-tools-band .tsf-bar,
#s2-tools-band .tsf-lanebox,
#s2-tools-band .tsf-phoneframe {
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--g-line-soft);
}
#s2-tools-band .tsf-bar { border-radius: 999px; }
#s2-tools-band .tsf-chip {
  border-radius: 999px; color: var(--g-blue-kick);
  background: rgba(120,170,255,.12); border: 1px solid rgba(140,180,255,.3);
}
#s2-tools-band .tsf-tiny { color: #a8bbdd; }
#s2-tools-band .tsf-track { background: rgba(255,255,255,.22); }
/* the sample text bubbles read like the popup's own two-tone */
#s2-tools-band .tsf-out { background: var(--g-blue-fill); color: var(--g-blue-ink); border: 1px solid var(--g-blue-edge); }
#s2-tools-band .tsf-in  { background: rgba(255,255,255,.07); color: var(--paper); }
#s2-tools-band .tsf-open { border-color: var(--g-blue-edge); color: var(--g-blue-ink); }

/* ---- the well: the popup card itself ---- */
#s2-tools-band .ts-well {
  padding: 26px; border-radius: 18px;
  background: #000000;
  border: 1px solid var(--g-line);
  box-shadow: 0 22px 60px rgba(0,0,0,.55), var(--g-inset);
}
.ts-back { background: rgba(6, 7, 12, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#s2-tools-band .ts-app {
  border-radius: 14px; background: var(--g-fill-2);
  /* WELLFIX 0812 — `clip`, never `hidden`. Both clip the corner radius, but
     `hidden` makes .ts-app a SCROLL CONTAINER, and that is what painted the
     dead band at the top of every well: .ts-app-bar is sticky at top:54px
     (meant to park it under the 55px head while the WELL scrolls), and a
     scroll-container parent captured that offset, so the bar was pushed 55px
     down from the top of .ts-app with nothing in the space — measured 55.0px
     in all 11 wells at 1280 AND at a true 390. `clip` clips without becoming a
     scroll container, so the sticky resolves against .ts-well as designed: the
     gap collapses to the 1px border and the bar actually pins for the first
     time. Measured either way, both widths — see the receipt table. */
  border: 1px solid var(--g-line-soft); overflow: clip;
}
#s2-tools-band .ts-app-bar {
  /* solid under the glass tint - a sticky bar can't be see-through */
  background: #0e0e10;
  border-bottom: 1px solid var(--g-line-soft);
}
#s2-tools-band .ts-app-cols,
#s2-tools-band .ts-approw { border-bottom: 1px solid var(--g-line-soft); }
#s2-tools-band .ts-kv,
#s2-tools-band .ts-logpanel,
#s2-tools-band .ts-history,
#s2-tools-band .ts-phone,
#s2-tools-band .ts-channel,
#s2-tools-band .ts-lane,
#s2-tools-band .ts-spark,
#s2-tools-band .ts-prow,
#s2-tools-band .ts-missed {
  border-radius: 12px; background: var(--g-fill-2);
  border: 1px solid var(--g-line-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#s2-tools-band .ts-loghead { border-bottom: 1px solid var(--g-line-soft); }
#s2-tools-band .ts-logbody .ts-row {
  border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--g-line-soft);
}
#s2-tools-band .ts-msg { border-radius: 12px; border: 1px solid var(--g-line-soft); }
#s2-tools-band .ts-msg-out {
  background: var(--g-blue-fill); color: var(--g-blue-ink);
  border-color: var(--g-blue-edge); border-bottom-right-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(200,222,255,.35);
}
#s2-tools-band .ts-msg-out small { color: rgba(234,241,255,.75); }
#s2-tools-band .ts-msg-in { background: rgba(255,255,255,.07); border-bottom-left-radius: 4px; }
#s2-tools-band .ts-spark i { background: rgba(140,180,255,.55); border-radius: 2px 2px 0 0; }

/* ---- fields: every control styled, never a default browser control ---- */
#s2-tools-band .ts-form input[type="text"],
#s2-tools-band .ts-form input[type="email"],
#s2-tools-band .ts-form input[type="tel"],
#s2-tools-band .ts-form select,
#s2-tools-band .ts-compose input,
#s2-tools-band .ct-form textarea {
  min-height: 44px; border-radius: 10px; padding: 11px 13px;
  color: var(--paper);
  background: var(--g-fill-2);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#s2-tools-band .ct-form textarea { min-height: 82px; }
#s2-tools-band .ts-form input[type="text"]:focus,
#s2-tools-band .ts-form input[type="email"]:focus,
#s2-tools-band .ts-form input[type="tel"]:focus,
#s2-tools-band .ts-form select:focus,
#s2-tools-band .ts-compose input:focus,
#s2-tools-band .ct-form textarea:focus {
  outline: none; border-color: rgba(140,180,255,.75);
  box-shadow: 0 0 0 3px rgba(90,140,255,.18);
}
#s2-tools-band .ts-form input::placeholder,
#s2-tools-band .ts-compose input::placeholder { color: var(--gray-3); }
#s2-tools-band .ts-consent {
  min-height: 44px; align-items: center; padding: 6px 0; cursor: pointer;
}
#s2-tools-band .ts-consent input[type="checkbox"] {
  appearance: none; width: 20px; height: 20px; min-height: 0; padding: 0; margin: 1px 0 0;
  border-radius: 6px; cursor: pointer; display: grid; place-items: center;
  background: var(--g-fill); border: 1px solid var(--g-line-strong);
}
#s2-tools-band .ts-consent input[type="checkbox"]:checked {
  background: linear-gradient(160deg, rgba(120,170,255,.5), rgba(56,108,200,.3));
  border-color: rgba(150,190,255,.7);
}
#s2-tools-band .ts-consent input[type="checkbox"]:checked::after { content: "\2713"; font-size: 0.72rem; color: var(--g-blue-ink); }

/* ---- the primary action: his blue bubble, specular highlight and shine ---- */
#s2-tools-band .ts-btn {
  position: relative; overflow: hidden;
  min-height: 44px; padding: 13px 26px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem;
  color: var(--g-blue-ink);
  background: var(--g-blue-fill);
  border: 1px solid var(--g-blue-edge);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--g-blue-glow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
#s2-tools-band .ts-btn::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;
}
#s2-tools-band .ts-btn::before {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none;
}
#s2-tools-band .ts-btn:hover::before, #s2-tools-band .ts-btn:focus-visible::before { left: 130%; }
#s2-tools-band .ts-btn:hover, #s2-tools-band .ts-btn:focus-visible {
  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 reset control is a quiet glass pill — never the loud bubble */
#s2-tools-band .ts-reset {
  appearance: none; cursor: pointer; align-self: flex-start;
  min-height: 44px; padding: 11px 18px; border-radius: 999px;
  font: inherit; font-size: 0.78rem; color: var(--gray-1);
  background: var(--g-fill); border: 1px solid var(--g-line-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--g-inset);
  transition: background 0.25s ease, color 0.25s ease;
}
#s2-tools-band .ts-reset:hover, #s2-tools-band .ts-reset:focus-visible { background: var(--g-fill-hi); color: var(--paper); }

/* ---- selectable things: glass at rest, the blue bubble when picked.
   The pick also LIFTS and gains a mark, so the state never rides hue alone. -- */
#s2-tools-band .ts-pick,
#s2-tools-band .ts-stars button {
  min-height: 44px; border-radius: 999px;
  color: var(--gray-1);
  background: var(--g-fill); border: 1px solid var(--g-line-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--g-inset);
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
#s2-tools-band .ts-pick { border-radius: 12px; padding: 11px 13px; }
#s2-tools-band .ts-pick:hover, #s2-tools-band .ts-stars button:hover,
#s2-tools-band .ts-pick:focus-visible, #s2-tools-band .ts-stars button:focus-visible {
  background: var(--g-fill-hi); color: var(--paper); transform: translateY(-1px);
}
#s2-tools-band .ts-pick[aria-pressed="true"],
#s2-tools-band .ts-stars button.lit {
  color: var(--g-blue-ink); background: var(--g-blue-fill);
  border-color: var(--g-blue-edge); box-shadow: var(--g-blue-glow);
  transform: translateY(-1px);
}
#s2-tools-band .ts-pick:focus-visible,
#s2-tools-band .ts-stars button:focus-visible,
#s2-tools-band .ts-reset:focus-visible,
#s2-tools-band .ts-btn:focus-visible,
#s2-tools-band .ts-slot:focus-visible { outline: 2px solid rgba(140,180,255,.9); outline-offset: 3px; }

/* the booking rows: an open time is a glass row; the held one is his bubble */
#s2-tools-band .ts-slot {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  font: inherit; color: var(--paper);
  background: rgba(255,255,255,.035); border: 1px solid transparent;
  border-bottom: 1px solid var(--g-line-soft);
  transition: background 0.25s ease;
}
#s2-tools-band .ts-slot:hover { background: var(--g-fill-hi); }
#s2-tools-band .ts-slot[aria-pressed="true"] {
  border-radius: 12px; color: var(--g-blue-ink);
  background: var(--g-blue-fill); border: 1px solid var(--g-blue-edge);
  box-shadow: var(--g-blue-glow);
}
#s2-tools-band .ts-slot[aria-pressed="true"] small { color: rgba(234,241,255,.8); }

/* held / staged notes: the popup's own held panel */
#s2-tools-band .ts-held,
#s2-tools-band .ts-staged {
  border-radius: 12px; padding: 13px 15px; border-left: 0;
  color: #dfe8ff; background: rgba(56,108,200,.12);
  border: 1px solid rgba(120,165,255,.3);
}
#s2-tools-band .ts-counter { color: var(--g-blue-kick); }

/* the band heading sits on the glass, not on a slab */
#s2-tools-band .ct-face:focus-visible .ct-click { outline: 2px solid rgba(140,180,255,.9); outline-offset: 3px; }
#s2-tools-band .ct-click { color: var(--g-blue-kick); }
#s2-tools-band .ct-face:hover .ct-click, #s2-tools-band .ct-face:focus-visible .ct-click { color: var(--g-blue-ink); }

/* ===== ROW B — TOUCH-PAUSE-30, the paused state =============================
   His spec: any pointer/focus interaction on a tool PAUSES that tool's ambient
   loop for 30 seconds, then it kicks back on by itself. "Pause" is taken
   literally — animation-play-state, so the face freezes where it stands and
   RESUMES from there rather than snapping back to frame zero. Per tool, never
   band-wide. .is-settled stays what it always was: the ruled STILL state, used
   for reduced motion and for a tool that is holding the visitor's own input.
   ========================================================================== */
/* ROW B, measured not guessed: with the loop restored, ONE face faded its
   whole card out — .tsf-review-card sat at 0% visible ink for 2250ms of every
   9s cycle (20% of it), so that tile read as an empty box on a showpiece band.
   Every other face holds 52-100% ink throughout, so this is one keyframe, not
   a design problem. His row asks for "the review stars fill and reset" — not
   for the card to vanish between cycles. The card holds; the stars keep
   filling, which is the action he actually named. */
#s2-tools-band .tsf-review-card { animation: none; opacity: 1; transform: none; }

#s2-tools-band .tsf.is-paused,
#s2-tools-band .tsf.is-paused *,
#s2-tools-band .tsf.is-paused *::before,
#s2-tools-band .tsf.is-paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  #s2-tools-band .ts-tile,
  #s2-tools-band .ts-btn,
  #s2-tools-band .ts-pick,
  #s2-tools-band .ts-stars button { transition: none; transform: none; }
  #s2-tools-band .ts-tile:hover, #s2-tools-band .ts-tile:focus-within { transform: none; }
  #s2-tools-band .ts-btn::before { display: none; }
  .ts-orb { display: none; }
}


.gsq {
  padding: 0; gap: 0;
  border-radius: 12px; overflow: hidden;
  background: #0b0c0f;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.62), 0 2px 8px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* --- the titlebar: its own surface, with the tab sitting ON it --- */
.gs-bar {
  height: 30px; margin: 0; padding: 0 10px; gap: 8px;
  align-items: flex-end;
  background: linear-gradient(180deg, #242424 0%, #1b1b1b 100%);
}
.gs-chrome { height: 30px; gap: 6px; align-items: center; }
.gs-chrome i { width: 9px; height: 9px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); }
.gs-chrome i:first-child  { background: #ed6a5e; }
.gs-chrome i:nth-child(2) { background: #8ac4ff; }
.gs-chrome i:last-child   { background: #61c454; }
/* the tab reads connected because it IS the toolbar's colour, and its bottom
   edge is the toolbar's top edge — no gap, no separate border */
.gs-tab {
  height: 24px; padding: 0 12px 0 9px; gap: 7px;
  flex: 0 1 auto; max-width: 64%;
  background: #2b2b2b;
  border: 0; border-radius: 9px 9px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.gs-fav { width: 9px; height: 9px; border-radius: 2px; background: linear-gradient(150deg, #8fb4ff, #3f6ecb); }
.gs-tab .gs-search-label { font-size: 0.54rem; letter-spacing: 0.08em; color: #d6d9e2; }
.gs-plus { padding: 0 0 6px; color: #8b909c; font-size: 0.86rem; }
/* --- the toolbar: history, a real address field, the site's own action --- */
.gs-search {
  height: 34px; padding: 0 9px; gap: 7px;
  background: #2b2b2b;
  border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
.gs-hist i { border-color: #9aa0ad; }
.gs-url {
  height: 23px; padding: 0 10px; border-radius: 999px;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.gs-url:focus-within { border-color: rgba(140, 180, 255, 0.6); box-shadow: 0 0 0 2px rgba(90, 140, 255, 0.16); }
.gs-lock { border-color: #7fbf8a; }
.gs-lock::before { border-color: #7fbf8a; }
.gs-host { color: #9aa0ad; }
.gs-search input[type="text"] { color: #eef0f5; }
.gs-search input[type="text"]::placeholder { color: #767c88; }
.gs-search button {
  height: 23px; padding: 0 11px; border-radius: 999px;
  color: #eaf1ff;
  background: linear-gradient(160deg, rgba(120,170,255,.34) 0%, rgba(56,108,200,.18) 60%, rgba(120,170,255,.20) 100%);
  border: 1px solid rgba(140, 180, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(200, 222, 255, 0.3);
}
.gs-search button:hover, .gs-search button:focus-visible {
  color: #fff; background: linear-gradient(160deg, rgba(140,185,255,.5), rgba(70,125,215,.3));
  border-color: rgba(160, 195, 255, 0.7);
}
/* --- the content area: edge to edge, the way a page fills a window --- */
.gs-viewport { border: 0; border-top: 0; background: #000; }
/* --- the tag becomes the window's status strip, pinned to the chrome --- */
.gs-tag {
  margin: 0; padding: 7px 11px; min-height: 26px;
  background: #161616;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.58rem; letter-spacing: 0.1em; color: #a7adba;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .gsq { padding: 0; border-radius: 9px; }
  .gs-bar { height: 20px; padding: 0 6px; gap: 5px; margin-bottom: 0; }
  .gs-chrome { height: 20px; gap: 4px; }
  .gs-chrome i { width: 6px; height: 6px; }
  .gs-tab { height: 16px; padding: 0 7px 0 6px; gap: 4px; border-radius: 6px 6px 0 0; }
  .gs-fav { width: 6px; height: 6px; }
  .gs-search { height: 24px; padding: 0 6px; }
  .gs-url { height: 17px; padding: 0 7px; }
  .gs-search button { height: 17px; padding: 0 8px; }
  .gs-tag { padding: 5px 8px; min-height: 20px; font-size: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) { .gsq { box-shadow: 0 8px 20px rgba(0,0,0,.5); } }

@media (max-width: 620px) {
  #s2-tools-band .ts-tile { padding: 12px; border-radius: 14px; }
  #s2-tools-band .ts-well { padding: 18px; border-radius: 16px; }
  .ts-orb-blue { width: 380px; height: 380px; top: -120px; right: -120px; }
  .ts-orb-gold { width: 300px; height: 300px; bottom: -130px; left: -110px; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 60;
  padding: 12px 18px;
  color: var(--black);
  background: var(--paper);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus-visible { left: 12px; top: 12px; }
@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 (HORSE-SMALLTEXT-0824). It gave up its side borders and its gutter at
   620px, so on a phone the storage notice landed as a full-bleed slab of the same near-black as
   the page behind it - no edge, no corner, nothing saying where the page stopped and the notice
   started. Four borders, the sheet's own --radius, and the site's gutter. */
.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 {
  margin: 0 0 10px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.3rem;
  outline: 0;
}
/* THE NOTICE IS THE SENTENCE. It is body copy in the page's own kit - body size, body colour -
   because a sentence a visitor is being asked to answer is not a footnote. .cnst__t and
   .cnst__fine are no longer emitted by consent.js; their rules are kept, not deleted, so a
   browser still holding the cached older script does not render an unstyled headline. */
.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; }
}
/* W-290 - the sheet covered the page's own bottom band on a first visit: consent.js
   publishes --cnst-lift (card height + gap) while the sheet is up, but this page's
   inline sheet consumed none of it, so content could never scroll clear of the
   card. The body borrows the lift; the page ends above the card. First-visit
   geometry only - the class and the variable are both removed on close. */
.cnst-open body { padding-bottom: var(--cnst-lift, 0px); }
.cnst-open { scroll-padding-bottom: var(--cnst-lift, 0px); }
@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. */
  .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;}
.menu-panel__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 28px;padding:22px 26px 8px;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:18px;}
.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 8px;border-bottom:1px solid rgba(255,255,255,0.10);margin-bottom:6px;}
.menu-panel a{display:flex;align-items:center;min-height:44px;padding:4px 8px;margin:0 -8px;border-radius:6px;color:var(--paper,#edf1f6);text-decoration:none;font-size:0.94rem;line-height:1.25;}
.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;}}
.rail-nav a[aria-current="true"],.s1-nav a[aria-current="true"],.mnav__drawer a[aria-current="true"]{color:var(--paper);}
.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;}

/* 2026-09-06 - his 09-05 23:4x words: the box was not to be erased. It comes back
   holding one tile per listed blog post with the title on the picture, and Keith's frame
   bigger and lower inside it under one line and the site's own booking button.
   Every rule below is this order's; the restored r7 rules live where they always did. */

/* ROW 2 - the box holds content now, so the content sets the height (was 82vh, empty).
   2026-09-28 - this is the box's ONE height rule: the 82vh on .s3-head, the phone's auto on
   .s3-head and the phone's 75vh on .s3-hero-copy are gone, so three rows of tiles set the
   height at every width. */
.s3-head { min-height: 0; }

/* ROW 3 - the tiles. One ratio for the whole list (960:536, RES-0812-LOOKSTD sec 2), one
   treatment, titles clamped. auto-fill, not repeat(3,...): the ladder is 3 across at 1440,
   2 at 768, 1 at 375 with no width ever dropping a tile under 300px. */
.btiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.btile { margin: 0; min-width: 0; }
.btile__a {
  position: relative;
  display: block;
  min-height: 44px;
  color: var(--paper);
  text-decoration: none;
  border: 1px solid var(--soft-line);
  background: var(--black);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.btile__a:hover, .btile__a:focus-visible { transform: translateY(-2px); border-color: var(--paper); }
.btile__a:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.btile__art {
  position: relative;
  display: block;
  aspect-ratio: 960 / 536;
  overflow: hidden;
  background: var(--black);
}
.btile__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the title reads on the brightest picture: it sits in the foot of a black-to-transparent
   band, never on bare art. Measured both ways in a real browser - see 00-CHANGES. */
.btile__t {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  padding: 48px 14px 12px;
  color: var(--paper);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.22;
  background: linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.88) 62%, rgba(0,0,0,0.60) 84%, rgba(0,0,0,0) 100%);
}
.btile__a:hover .btile__t, .btile__a:focus-visible .btile__t { text-decoration: underline; text-underline-offset: 0.14em; }
@media (prefers-reduced-motion: reduce) {
  .btile__a { transition: none; }
  .btile__a:hover, .btile__a:focus-visible { transform: none; }
}

.s2-next { padding: 28px 28px 0; }
.s3-next-h { max-width: 22ch; margin: 0 0 14px; }
.s3-next-go { margin: 0; }
@media (max-width: 900px) {
  .s2-next { padding: 22px 22px 0; }
}

/* 2026-09-07 ITEM 7 - three rows, each scrolling sideways inside itself.
   NOT a repeat(3|4, ...) grid: the row declares no fixed column count, it lays its blocks
   out on one implicit track and the width decides how many of them you can see - 4 at 1440,
   2 at 768, 1 at 375, measured. The blocks themselves are the same .btile markup as before. */
.bdeck { display: grid; gap: 18px; }
.bdeck__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.bdeck__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3);
  gap: 18px; margin: 0; padding: 2px; list-style: none;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none;
}
.bdeck__track::-webkit-scrollbar { display: none; }
.bdeck__track > .btile { scroll-snap-align: start; }
.bdeck__track:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
/* the arrows are the picture viewer's own control, to the letter */
.bdeck__nav {
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  background: var(--black); border: 1px solid var(--paper); color: var(--paper);
  font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.bdeck__nav[disabled] { opacity: 0.35; cursor: default; }
.bdeck__nav:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
@media (max-width: 960px) { .bdeck__track { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 620px) {
  .bdeck__track { grid-auto-columns: 100%; }
  .bdeck__row { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .bdeck__track { scroll-behavior: auto; } }
/* MEASURED, and the reason is written down: four blocks to a row makes each block 239px at
   1440 where the old grid never went below 300, and at 239 the five longest titles need a
   FOURTH line - clamped at three they lost their last words. The clamp goes to four on the
   deck blocks and the band top padding comes in to 34px so four lines still sit inside the
   block. Measured after: 0 titles clipped at 1440, 768 and 375. Nothing outside .bdeck. */
.bdeck .btile__t { -webkit-line-clamp: 4; padding-top: 34px; }
/* 2026-09-28 - THE DECK FILLS ITS FRAME. His 09-28 order, from a photo of the home page: the three
   rows of blog tiles fill the black box between the white line above, the white line below and
   the label's line on the left, edge to edge and top to bottom. The box keeps no padding of its
   own (.s3-hero-copy, padding 0 - was 90px plus the side gutter, and 90px 22px on a phone), so the
   arrows sit on the box's edges and the tiles fill between them. Same picture shape (960:536),
   nothing re-cropped, the 18px gaps kept. Three tiles to a row on a desktop (was four), two from
   960px down, one from 620px down. MEASURED: two start at 960, not 900, because three to a row at
   901-939px makes 194-207px tiles and up to four titles then need a fifth line (none from 940 up;
   960 keeps a margin). The track keeps its 2px inner room (the tile's hover lift and focus ring);
   the deck hands that room back at its top and bottom so the first and last rows sit on the lines.
   The title clamp, re-measured at the new sizes: at 1440 no title needs more than two lines and at
   1280 three, but four are still needed at 961-1100px, 621-640px and 320-375px, so the clamp
   stays at four and the band's top padding at 34px. Measured after at 1440: tiles 359 x 201, 0px
   to each of the four lines, 3 to a row; 0 titles clipped at any width from 320 to 1920. */
.bdeck { margin: -2px 0; }

/* Phone: below 700px each open
   category is one card at a time on a sideways swipe track instead of a table running down the page;
   the card opens the tool's own words in the site's power-zoom window. Desktop is untouched:
   the deck is display:none above 700px and the table is the only thing that renders. */
.tdeck { display: none; }
@media (max-width: 700px) {
  .tg-acc .tg-wrap { display: none; }
  .tdeck { display: block; margin: 4px 0 18px; }
  .tdeck__rail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; gap: 8px; }
  .tdeck__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    gap: 10px; margin: 0; padding: 0; list-style: none;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none;
  }
  .tdeck__track::-webkit-scrollbar { display: none; }
  .tdeck__card { margin: 0; min-width: 0; scroll-snap-align: start; }
  .tdeck__open {
    display: grid; gap: 6px; width: 100%; min-height: 116px; padding: 14px 14px 12px;
    text-align: left; background: var(--black); border: 1px solid rgba(237, 241, 246, 0.28);
    color: var(--paper); font: inherit; cursor: pointer;
  }
  .tdeck__open:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
  .tdeck__n { font-size: 1.08rem; font-weight: 700; line-height: 1.25; }
  .tdeck__p { font-size: 1rem; font-weight: 700; color: rgba(241, 240, 235, 0.85); }
  .tdeck__cue { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(241, 240, 235, 0.7); }
  .tdeck__nav {
    min-width: 44px; min-height: 44px; display: grid; place-items: center;
    background: var(--black); border: 1px solid var(--paper); color: var(--paper);
    font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
  }
  .tdeck__nav[disabled] { opacity: 0.35; cursor: default; }
  .tdeck__nav:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
  .tdeck__pos { margin: 8px 0 0; font-size: 0.82rem; letter-spacing: 0.06em; color: rgba(241, 240, 235, 0.85); }
}
@media (prefers-reduced-motion: reduce) { .tdeck__track { scroll-behavior: auto; } }
/* the tool window - the industries zoom's own rules, one device sitewide */
.toolzoom {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: rgba(0, 0, 0, 0.9); padding: 24px;
}
.toolzoom[hidden] { display: none; }
@media (max-width: 700px) { .toolzoom { padding: 14px; } }
.toolzoom__frame {
  flex: 1 1 0%; min-width: 0; width: auto; max-width: 640px; max-height: 86vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: block; border: 1px solid var(--gray-3); background: var(--ink); padding: 22px 18px 26px;
}
.toolzoom__cat { margin: 0 0 10px; color: var(--paper); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.toolzoom__head { margin: 0 0 10px; color: var(--paper); font-size: 1.3rem; line-height: 1.25; }
.toolzoom__what { margin: 0 0 14px; color: rgba(241, 240, 235, 0.85); font-size: 1.02rem; line-height: 1.45; }
.toolzoom__price { margin: 0 0 16px; color: var(--paper); font-size: 1.1rem; font-weight: 700; }
.toolzoom__go a { color: var(--paper); }
.toolzoom .reelzoom__close { position: absolute; top: 16px; right: 16px; }

          .tg-ledger{width:100%;border-collapse:collapse;margin-top:18px}
          .tg-ledger th{text-align:left;font-size:.8em;letter-spacing:.08em;text-transform:uppercase;opacity:.6;
                        padding:0 12px 10px;border-bottom:1px solid rgba(237,241,246,.22)}
          .tg-ledger td{padding:13px 12px;border-bottom:1px solid rgba(237,241,246,.18);vertical-align:top}
          .tg-ledger tr:hover td{background:rgba(90,169,255,.06)}
          .tg-ledger .tg-name a{font-weight:700;color:inherit;text-decoration:none;border-bottom:1px solid #5AA9FF}
          .tg-ledger .tg-price{color:#5AA9FF;font-weight:700;white-space:nowrap}
          .tg-ledger .tg-go a{color:inherit;white-space:nowrap;text-decoration:underline}
          .tg-wrap{overflow-x:auto}
          .tg-ledger .tg-name{font-weight:700}
          .tg-ledger{margin-top:0}
          .tg-board{margin-top:18px;border-top:1px solid rgba(237,241,246,.22);background:var(--black)}
          .tg-acc{border-bottom:1px solid rgba(237,241,246,.18)}
          .tg-acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:44px;padding:14px 12px;font-size:1.15rem;line-height:1.25;font-weight:700;color:var(--paper)}
          .tg-acc summary::-webkit-details-marker{display:none}
          .tg-acc .tg-n{font-weight:700;color:rgba(241,240,235,.85);white-space:nowrap}
          .tg-acc .tg-open{flex:0 0 auto;font-weight:400;font-size:1.35rem;line-height:1;color:rgba(241,240,235,.85)}
          .tg-acc .tg-open::after{content:"+"}
          .tg-acc[open] .tg-open::after{content:"\2212"}
          .tg-acc summary:hover .tg-cat,.tg-acc summary:focus-visible .tg-cat{text-decoration:underline;text-underline-offset:.14em}
          .tg-acc summary:hover .tg-open,.tg-acc summary:focus-visible .tg-open{color:var(--paper)}
          .tg-acc summary:focus-visible{outline:2px solid var(--paper);outline-offset:-2px}
          .tg-acc[open] .tg-ledger td{color:rgba(241,240,235,.85)}
          @media (max-width:640px){.tg-ledger .tg-what{display:none}}
        
.audit-tab,.consult-tab{position:fixed;right:0;top:34vh;z-index:60;display:flex;align-items:center;justify-content:center;width:48px;height:auto;min-height:0;line-height:1.1;appearance:none;cursor:pointer;font-family:inherit;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);}
.consult-tab{top:calc(34vh + 195px);}
.audit-tab:hover,.audit-tab:focus-visible,.consult-tab:hover,.consult-tab:focus-visible{background:#e6e6e6;}
.audit-tab:focus-visible,.consult-tab:focus-visible{outline:2px solid #000;outline-offset:-2px;}
.audit-panel{position:fixed;right:0;top:0;left:auto;bottom:auto;margin:0;height:100vh;height:100svh;width:min(340px,88vw);z-index:61;transform:translateX(103%);transition:transform 0.22s ease;background:#0a0a0b;border-left:1px solid rgba(255,255,255,0.14);overflow-y:auto;overscroll-behavior:contain;padding:20px 18px;}
.audit-panel.open{transform:none;}
.audit-panel h2{margin:0 0 6px;font-size:1.05rem;}
.audit-panel label{display:block;margin:12px 0 0;font-size:0.72rem;letter-spacing:0.05em;color:#b9bec7;}
.audit-panel input{width:100%;margin-top:6px;padding:10px 12px;font-family:inherit;font-size:0.9rem;color:#edf1f6;background:#000;border:1px solid rgba(255,255,255,0.2);}
.audit-panel input:focus{outline:none;border-color:#edf1f6;}
.audit-panel .audit-go{margin-top:16px;width:100%;padding:11px 12px;font-family:inherit;font-weight:700;font-size:0.8rem;letter-spacing:0.06em;color:#000;background:#edf1f6;border:0;cursor:pointer;}
.audit-panel .audit-note{margin-top:12px;font-size:0.78rem;color:#b9bec7;}
.audit-panel .audit-close{position:absolute;top:12px;right:12px;appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:transparent;border:1px solid rgba(255,255,255,0.2);color:#edf1f6;font-family:inherit;font-size:0.9rem;line-height:1;padding:6px 9px;}
@media (prefers-reduced-motion: reduce){.audit-panel{transition:none;}}
.to-top{position:fixed;min-height:44px;left:18px;bottom:18px;z-index:59;appearance:none;cursor:pointer;font-family:inherit;font-size:0.78rem;font-weight:700;color:#edf1f6;background:#0a0a0b;border:1px solid rgba(255,255,255,0.16);padding:10px 12px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity 0.2s;}
.to-top.show{opacity:1;pointer-events:auto;}
/* the call bar owns the bottom of a phone screen. Without this, the block above
   shadows the shared sheet's lift and this button covers 43% of Call Us - its centre
   scrolled the page instead of dialling. */
@media (max-width:900px){.to-top{bottom:61px;}}
.to-top:hover,.to-top:focus-visible{background:#141416;}
@media (prefers-reduced-motion: reduce){.to-top{transition:none;}}

/* the track list, rebuilt for what is actually in the rail */
.s1-right {
  display: block;
  grid-template-rows: none;
  padding: 0;
  overflow: visible;
}

/* the sticky inner column — the same pattern as .s1-left-in */
.s1-right-in {
  position: sticky;
  top: 0;
  max-height: 100vh;
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 26px;
}

/* THE CORNER IS ONE DEVICE — homepage only.
   His verdict on what was there: three disconnected stacked boxes. Measured, he
   was describing real geometry - the fixed MENU control sat at right:18 / 81px
   wide / 8px radius, while the rail's audit pill and Book button sat at right:26
   / 247px wide / 18px radius. Three edges, three widths, two radii, and the MENU
   overlapped the pill by 73 x 36px on top of that.
   They now share ONE right edge, ONE width and ONE radius, stacked with one
   rhythm, so the corner reads as a single control group: MENU (26-70) · audit
   pill (82+) · Book the call. The rail column is a fixed 300px with 26px padding,
   so 248px is the shared measure, not a guess.
   Desktop only - the control is display:none at <=900px, where the phone bar
   carries its own Menu, so the phone rail must not be pushed down for a button
   that is not there. */
@media (min-width: 901px) {
  .menu-btn {
    top: 26px;
    right: 26px;
  }
  /* row 151: the old small ::after glyph died - one burger, one size */
  /* 26 top + 44 control + 18 gap = 88, so the gap under the control equals the
     rail's own 18px gap between the pill and the button. One rhythm, not two. */
  .s1-right-in { padding-top: 88px; }
  .s1-right-in > .ticker { border-radius: 18px; }
  .rail-book__btn { border-radius: 18px; }
}

/* ===== THE CORNER'S SKIN =====
   An earlier pass composed the GEOMETRY and did it properly: re-measured true
   here at 1280, the three parts share ONE right edge (1254), ONE width (247),
   ONE radius (18px) and an 18/18 rhythm, with no overlap. What it did not do is
   use the house recipe; it matched the existing look instead. So the corner was
   still three different MATERIALS in one device:

     MENU           background rgb(10, 10, 11)          border rgba(255,255,255,0.16)
     audit pill     background rgba(255,255,255,0.06)   border rgba(255,255,255,0.16)
     Book the call  background rgba(0, 0, 0, 0)         border rgb(241,240,235)

   Measured, not read off the declarations: three backgrounds, two borders.
   And the homepage defined NEITHER .glass NOR the --glass-* custom properties,
   so .menu-btn's own var(--glass-line, …) references were resolving to their
   FALLBACKS rather than to the recipe. The homepage carries no external sheet
   (inline blocks only, no <link> to fullstyle.css), so the recipe has to be
   lifted into this file or it does not land at all.

   Lifted VERBATIM from assets/css/fullstyle.css — the :root glass block and the
   .glass rule exactly as authored there. The house recipe, never a fresh skin. */
: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);
}

/* The pill already wore the recipe's VALUES as literals. Same declarations,
   now pointing at the recipe itself — the computed box is byte-for-byte what
   it was (fill .06, line .16, radius 18, blur 16, the two-part shadow), which
   is the point: this half of the change must measure as a no-op. Unconditional,
   exactly as before, because the pill exists at every width. */
.s1-right-in .ticker {
  min-height: 84px;
  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);
}
.s1-right-in .ticker .ticker__track > span { color: var(--paper); }

/* MENU and Book join the pill on that one recipe, so the corner reads as one
   material as well as one geometry. DESKTOP ONLY on purpose: .menu-btn is
   display:none at <=900px, so below that there is no three-part corner to make
   coherent, and the phone rail keeps the bright-bordered Book button it has
   today. Scoping this to the zone where the device exists is the same rule the
   geometry block above follows. */
@media (min-width: 901px) {
  /* rows 140-142: menu is bare lines, the book pill died - glass recipe no longer rides here */
}

.s1-right-in .rail-book { display: grid; gap: 8px; }

/* the stacked layout at max-width 900px — the breakpoint where .s1 goes
   display:block and .s1-left/.s1-right go position:static (measured, not
   guessed: the two @media blocks in range are 1180px and 900px, and the
   static rule is in the 900px one). Below it: the inner column stops being a
   sticky viewport-tall block, exactly as .s1-left/.s1-right go static there. */
@media (max-width: 900px) {
  .s1-right-in {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
  }
}


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



/* the home page carries its own copy of the menu sheet; these two rules exist in
   the shared sheet and were missing here, which made this page's menu taller than
   every other page's */
@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; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .menu-grp--tools, .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 { 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; }
}
/* this page has no .ledger-row markup, so the rule below is inert here; it is
   conformed anyway so the two copies of the sheet never drift apart again */
.ledger-number { color: var(--paper); text-shadow: 0 0 8px rgba(241, 240, 235, 0.5), 0 0 18px rgba(241, 240, 235, 0.22); }

/* ---- 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.8125rem; }
.mount-cap.mount-cap.mount-cap { font-size: 0.8125rem; }
.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.8125rem; }
.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; }

/* ============================================================
   Phone pass, 2026-08-13. Additive and last in the cascade on
   purpose: every rule here overrides an existing declaration, so
   it is auditable and revertible as one block. The 375-390 render
   is the one graded first.
   ============================================================ */

/* --- ROW 196 part 1: "camera rolls do not move" -------------------
   MEASURED CAUSE: the @media (max-width: 900px) block above carries a
   blanket `.marquee-track { animation: none; }` and turns the viewport
   into a scroll-snap strip. That killed the drift on BOTH picture reels
   at every width below 900 - which is the width most of his visitors
   use. His ruled reel law: reels drift continuously, never pause on
   hover, end arrows step, a click opens the power-zoom viewer.
   Restored for the picture reels ONLY - the words strip below them is a
   different device and is not this row. The arrow handler needs no
   change: step() already advances animation currentTime when a running
   animation exists and falls back to scrollBy when one does not. */
@media (max-width: 900px) {
  .pic-reel .marquee-track { animation: stripMove 60s linear infinite; }
  .pic-reel--right .marquee-track { animation-direction: reverse; }
  .pic-reel .marquee-viewport { overflow: hidden; scroll-snap-type: none; }
  .pic-reel .film-card { scroll-snap-align: none; }
}

/* A reduced-motion reader gets a WORKING roll, never a frozen one: the
   track parks, the viewport becomes scrollable again, and step() takes
   its scrollBy branch so both end arrows still walk the reel by hand.
   Placed after the block above and at equal specificity, so it wins. */
@media (prefers-reduced-motion: reduce) {
  .pic-reel .marquee-track { animation: none; }
  .pic-reel .marquee-viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
  .pic-reel .film-card { scroll-snap-align: start; }
}

/* --- ROW 196 part 2: "the big black arrows ... make them a bit clear"
   Was: solid var(--black) #000 at full strength - black slabs sitting on
   his pictures. Now translucent over the art while the glyph stays
   legible. The 44x44 box is inherited untouched, so the tap floor holds.
   Hover/focus firms up so the control never reads as decoration. */
.pic-reel .reel-arrow {
  background: rgba(0, 0, 0, 0.38);
  border-color: rgba(241, 240, 235, 0.55);
  color: rgba(241, 240, 235, 0.92);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* --- ROW 199: the tier buttons, equal size, 2x2 on the phone -------------
   MEASURED FIRST, at a true 375, before any edit:
     - all four tier bars already render 331 x 131.6 - IDENTICAL. So the
       "the launch pad button is smaller" half does NOT reproduce here, which
       matches Command's own four-width pass. Nothing was resized.
     - what DOES reproduce is "they are list going down": the @media
       (max-width: 620px) block above collapses .plan-grid to a single column,
       so the four bars stack. Between 621 and 1180 they are ALREADY 2x2 -
       which is why the desktop looked right and the phone did not.
   Scoped to #s1-pricing on purpose (the homepage's second .plan-grid, the four
   explainer cards, was removed with its section 2026-09-05). grid-auto-rows keeps the four boxes equal once the
   longer names wrap onto two lines at half width. */
@media (max-width: 620px) {
  #s1-pricing .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
  #s1-pricing .plan-grid .plan { height: 100%; }
  #s1-pricing .plan-grid .plan-bar { height: 100%; }
  /* the bar label ships white-space: nowrap. At full width that is fine; at
     half width it silently CLIPPED three of the four names ("Local Authority",
     "Growth Engine", "Market Leader") - the box measured correct while the word
     was cut. Let them wrap; grid-auto-rows: 1fr keeps all four boxes equal. */
  #s1-pricing .plan-grid .plan-bar h3 { white-space: normal; }
}

/* --- ROW 197: the companies list becomes a power-zoom on the phone -------
   MEASURED: at 375 the 61-item trade list renders 794px tall - a long scroll
   in the middle of the page, which is his complaint. At <=700px the columns
   are replaced by one trigger and the ruled power-zoom viewer. Desktop is
   untouched. The viewer deliberately reuses the reel viewer's own control
   classes (.reelzoom__nav / .reelzoom__close) so this is ONE device with one
   behavior sitewide, not a second zoom pattern. */
.bizzoom-open { display: none; }
@media (max-width: 700px) {
  .industries__cols { display: none; }
  .bizzoom-open {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 56px; padding: 12px 16px; margin: 2px 0 0;
    background: rgba(241, 240, 235, 0.06); border: 1px solid rgba(241, 240, 235, 0.28);
    color: var(--paper); font: inherit; text-align: left; cursor: pointer;
  }
  .bizzoom-open__n { font-size: 0.95rem; font-weight: 700; }
  .bizzoom-open__cta { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.82; }
  .bizzoom-open:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
}
.bizzoom {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: rgba(0, 0, 0, 0.9); padding: 24px;
}
.bizzoom[hidden] { display: none; }
@media (max-width: 700px) { .bizzoom { padding: 14px; } }
.bizzoom__frame {
  flex: 1 1 0%; min-width: 0; width: auto; max-width: 720px; max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: block; border: 1px solid var(--gray-3); background: var(--ink); padding: 22px 18px 26px;
}
.bizzoom__head { margin: 0 0 14px; color: var(--paper); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.bizzoom__lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
.bizzoom__lists ul { margin: 0; padding: 0; list-style: none; }
.bizzoom__lists li { color: var(--paper); font-size: 1.02rem; line-height: 1.4; padding: 8px 0; border-bottom: 1px solid rgba(241, 240, 235, 0.14); overflow-wrap: anywhere; }
.industries__cols li a, .bizzoom__lists li a { color: inherit; text-decoration: underline; text-decoration-color: rgba(241, 240, 235, 0.35); text-underline-offset: 3px; }
.industries__cols li a:hover, .industries__cols li a:focus-visible, .bizzoom__lists li a:hover, .bizzoom__lists li a:focus-visible { text-decoration-color: currentColor; }
.bizzoom__lists li a { display: block; margin: -8px 0; padding: 8px 0; }
.bizzoom .reelzoom__close { position: absolute; top: 16px; right: 16px; }

.pic-reel .reel-arrow:hover,
.pic-reel .reel-arrow:focus-visible {
  background: rgba(0, 0, 0, 0.62);
  border-color: rgba(241, 240, 235, 0.85);
  color: #f1f0eb;
}

/* --- the phone contact bar (home) ---------------------------------------
   This page links NO stylesheet - it is entirely inline - so the shared
   rule in fullstyle.css never reaches it and has to be mirrored here.
   MEASURED on this page before the edit: the bar is position: sticky inside
   section.s1, which ends at document y 2893. It unstuck at scrollY 2069 of
   11138 - present for 18.6% of the page, gone for the other 81.4%. Its tap
   target measured 83.2 x 17px. position: fixed holds it for the whole page. */
@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;
  }
  .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; }
  body { padding-bottom: 49px; }
  .cnst { bottom: 49px; }
  .to-top { bottom: 61px; }
}

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

/* Item 7: the sub-12px sweep. Censused at a true 375: 13 distinct runs / 53
   elements rendered under 12px, and EVERY one of them sits inside .toolsuite -
   the live tool demos. They are not decorative screenshots; they are the
   working faces, so their words have to be readable without a pinch.
   Floor set to 12px. Deliberately NOT written as a blanket ".toolsuite *"
   rule: 401 elements in that block already measure 12px or more, and a blanket
   font-size would have dragged those DOWN. Only the measured runs are named.
   .toolsuite exists on this page and nowhere else in the tree - checked. */
@media (max-width: 900px) {
  .toolsuite .tsf-postimg,
  .toolsuite .tsf-slot,
  .toolsuite .tsf-month,
  .toolsuite .tsf-cyidx,
  .toolsuite .tsf-tiny,
  .toolsuite .tsf-chip,
  .toolsuite .tsf-review-p,
  .toolsuite .tsf-time,
  .toolsuite .tsf-weekhead span,
  .toolsuite small {
    font-size: 12px;
  }

  /* NOT FIXED HERE, AND SAID PLAINLY: two of the ten demo faces clip their own
     content at this width - .tsf-track and .tsf-search. Measured with the
     ORIGINAL type sizes still in place they already overflowed by 39px and
     26px, so the clip pre-dates this pass; the 12px floor widens it to 38px
     and 44px. An `overflow: clip; flex-shrink: 0` pass was tried here and
     REMOVED again because it changed nothing: the cap is an ancestor height,
     not the flex-minimum trap it resembled. Left as a measured open row rather
     than a change that fixes nothing. */
}

/* PW-FORMATS-0813 — FIX-2 MODERN FORMATS (staged 2026-08-13, page-weight prep)
   Every rule above pairs a plain url() with an image-set(). The url() is the
   JPEG/PNG fallback and is deliberately FIRST: an engine that cannot parse
   image-set() drops that declaration and keeps the one before it. */

/* PW-LAZY-0813 — FIX-1 TRUE LAZY (staged 2026-08-13, page-weight prep) */
/* a lazy frame must not flash the page white before its picture lands, so it
   holds the same ink the film strip already sits on */
.film-frame.pw-lazy { background-color: #0b0c0f; }
/* the band plaques: (0,2,1) beats the (0,1,1) of #s1-pricing .bar-N */
body.pw-bars-idle #s1-pricing .bar-1,
body.pw-bars-idle #s1-pricing .bar-2,
body.pw-bars-idle #s1-pricing .bar-3,
body.pw-bars-idle #s1-pricing .bar-4 { background-image: none; }

/* JS off: every picture comes back at once rather than a page of dark holes */
body.pw-bars-idle #s1-pricing .bar-1,
body.pw-bars-idle #s1-pricing .bar-2,
body.pw-bars-idle #s1-pricing .bar-3,
body.pw-bars-idle #s1-pricing .bar-4 { background-image: revert-layer; }

/* Keith's frame: his corner notch stays; the capture rides below the notch line and pins to the left edge,
   so the client's own mark reads whole instead of being cut by the notch and the side crop. */
.s2-aperture .av { top: 12%; height: 88%; }
.s2-aperture .av video,
.s2-aperture .av .vidstill { object-position: left top;
  /* the phone tap rules follow, after this block */
}
/* Phone tap floor, 2026-09-18. A bare link inside copy keeps its line and gains a tap box at least 44px tall: vertical padding on an inline box never moves the line it sits in. Navigation, menu, footer, card and bottom-bar links are excluded - they are already blocks with their own height. A browser that cannot parse the selector drops this rule and loses nothing else. */
a:where(:not([class]):not([role]):not(nav *):not(.menu-panel *):not(.mnav__drawer *):not(.mnav__phone *):not(.card__v *):not(.in-foot *):not(.s1-mobile-phone *):not(.post__cta-links *)) { padding-block: 15px; }
/* The side padding is what makes a SHORT link - one word inside a sentence - 44px wide as well, and the equal negative margin cancels it so the words beside it do not move. It is given only to a link inside a paragraph: a link that is a list item's own child is laid out by its list, and shrinking its outer box re-packs that list. Measured before this scoping: a town list re-packed its columns on two pages. */
p a:where(:not([class]):not([role]):not(nav *):not(.menu-panel *):not(.mnav__drawer *):not(.mnav__phone *):not(.card__v *):not(.in-foot *):not(.s1-mobile-phone *):not(.post__cta-links *)) { padding-inline: 8px; margin-inline: -8px; }
/* the miniature product frames draw a screen inside a fixed box that hides whatever is taller than itself, so
   their type keeps the size it is drawn at: the line above raises the page's own eyebrows and kickers, not the drawing. */
.tsf .tsf-tiny, .tsf .tsf-chip, .tsf .tsf-slot { font-size: 12px; }