/* Numbers V2 — /enterprise/
   Shared V2 styles live in /assets/v2.css (header agent); this file owns
   only what is specific to this page. Values below are Paper's (F3G-1). */

@import url("/css/tokens.css");

:root {
  --page: 1248px;
  --pad: 48px;
  --nav-h: 76px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground, var(--white));
  color: var(--fg, var(--ink));
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 27px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; }

/* engine helpers: hidden copy + nowrap word boxes */
.ah-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ah-w, .ah-w > .ah-l { display: inline-block; white-space: nowrap; }

/* ==========================================================================
   S1 / Hero (black, grid band HIRED) — Paper F3G-1
   ========================================================================== */

.hero--ent {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  margin-top: calc(var(--v2-nav-h, 76px) * -1);
  display: flex;
  flex-direction: column;
  background: var(--black);
  padding: 118px 0 92px;
  color: var(--white);
}

.hero-field {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 0;
  pointer-events: none;
  touch-action: pan-y;
  overflow: hidden;
}
.hero-field--band { height: 440px; }
.hero-field canvas { display: block; width: 100%; height: 100%; }

.band-edge {
  position: absolute;
  left: 0; right: 0; top: 428px;
  height: 1px;
  background: var(--line);
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
}

.ent-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  background: var(--raised);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body-on-black);
  white-space: nowrap;
}
.ent-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 6px;
  background: var(--electric);
  flex: 0 0 auto;
}

.hero-h1 {
  margin: 16px 0 0;
  display: block;
  font-family: var(--font-ui);
  font-size: 104px;
  font-weight: 900;
  line-height: 108px;
  letter-spacing: -0.03em;
  color: var(--white);
  text-align: center;
  text-wrap: balance;
}
.hero-h1 > span[aria-hidden="true"] { display: block; }
.h1-line { display: block; }
.br-m { display: none; }
.hero-h1 .chip {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 27px;
  align-items: center;
  height: 102px;
  padding: 0 21px;
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  line-height: 1;
}

.hero-sub {
  margin: 86px 0 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--body-on-black);
  text-align: center;
  letter-spacing: 0;
}

.hero-cta {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.btn--electric {
  height: 52px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 26px;
  background: var(--electric);
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
}
.btn--electric svg { flex: 0 0 auto; }
.hero-price { font-size: 17px; font-weight: 600; line-height: 22px; color: var(--white); }

.hero-checks {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  list-style: none;
}
.hero-checks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--body-on-black);
}
.hero-checks svg { flex: 0 0 auto; color: var(--electric); }

.hero-proof {
  margin-top: auto;
  padding-top: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.proof-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-on-black);
  text-align: center;
}
.proof-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
  row-gap: 22px;
}
.proof-logos img { width: auto; flex: 0 0 auto; }
.proof-logos .lg-medik8 { height: 27px; width: 111px; }
.proof-logos .lg-kettle { height: 19px; width: 132px; }
.proof-logos .lg-keto { height: 12px; width: 132px; }
.proof-logos .lg-hs { height: 25px; width: 122px; }
.proof-logos .lg-equip { height: 29px; width: 103px; }
.proof-logos .lg-lineage { height: 32px; width: 94px; }
.proof-logos .lg-rheal { height: 34px; width: 60px; }
.proof-logos .lg-adapt { height: 30px; width: 100px; }

/* ==========================================================================
   S2 / Do the math (white) — Paper F5V-1
   ========================================================================== */

.sec {
  background: var(--white);
  color: var(--ink);
  padding: 120px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.math-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 1248px;
  max-width: 100%;
  text-align: center;
}
.sec h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 800;
  line-height: 56px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ink-chip {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  line-height: 1;
  vertical-align: middle;
}
.math-head p {
  margin: 0;
  max-width: 640px;
  font-size: 20px;
  line-height: 30px;
  color: var(--body-ink);
  text-align: center;
}

.math-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  width: 1248px;
  max-width: 100%;
}

.receipt {
  width: 540px;
  flex: 0 0 auto;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 24px 48px rgba(10, 12, 15, 0.08);
  padding: 40px 40px 32px;
  transform: rotate(-1.5deg);
}
.receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.receipt-head span:last-child {
  font-size: 12px;
  font-weight: 500;
  color: var(--quiet);
}
.rline { height: 2px; background: var(--ink); flex: 0 0 auto; }
.rline--onblack { height: 1px; background: var(--line); }
.receipt-rows { margin: 0; }
.receipt-rows > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  border-bottom: 1px dashed var(--button-line);
}
.receipt-rows dt { font-size: 18px; font-weight: 500; line-height: 24px; color: var(--ink); }
.receipt-rows dd { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; color: var(--ink); }
.receipt-rows dd.muted { color: var(--mute); }
.receipt-total {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 0 24px;
}
.receipt-total .k {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.receipt-total .big {
  font-size: 44px;
  font-weight: 800;
  line-height: 50px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.receipt-total .small { font-size: 20px; font-weight: 500; line-height: 28px; color: var(--body-ink); }
.receipt-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 24px;
}
.barcode { fill: var(--ink); display: block; }
.receipt-foot span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
}

.ent-card {
  width: 560px;
  flex: 0 0 auto;
  background: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  color: var(--white);
}
.ent-card-bars { display: flex; height: 4px; border-radius: 2px; overflow: hidden; width: 100%; }
.ent-card-bars i { display: block; flex-basis: 0; }
.ent-card-bars i:nth-child(1) { flex-grow: 3; background: var(--sky); }
.ent-card-bars i:nth-child(2) { flex-grow: 4; background: var(--pink); }
.ent-card-bars i:nth-child(3) { flex-grow: 5; background: var(--electric); }
.ent-card-bars i:nth-child(4) { flex-grow: 7; background: var(--up); }
.ent-card-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 40px 44px 44px;
}
.card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body-on-black);
}
.card-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 6px;
  background: var(--electric);
}
.card-price { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.card-price strong {
  font-size: 64px;
  font-weight: 900;
  line-height: 64px;
  letter-spacing: -0.03em;
  color: var(--white);
}
.card-price span { font-size: 20px; font-weight: 500; line-height: 28px; color: var(--body-on-black); }
.card-line {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
  color: var(--white);
}
.card-checks { display: flex; flex-direction: column; gap: 12px; list-style: none; }
.card-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  line-height: 26px;
  color: var(--body-on-black);
}
.card-checks svg { flex: 0 0 auto; color: var(--electric); }
.ent-card .btn--electric { width: fit-content; }

.math-kicker {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
}

/* ==========================================================================
   S3 / The bench (cloud) — Paper F94-1
   ========================================================================== */

.sec--bench { background: var(--cloud); gap: 64px; }
.bench-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  width: 1248px;
  max-width: 100%;
}
.bench-head h2 {
  font-size: 56px;
  line-height: 64px;
}
.ink-chip--lg {
  height: 58px;
  padding: 0 11px;
  border-radius: 10px;
}
.bench-head p {
  margin: 0;
  width: 470px;
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 30px;
  color: var(--body-ink);
}

.bench-grid {
  display: flex;
  gap: 24px;
  width: 1248px;
  max-width: 100%;
}
.bench-card {
  width: 612px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 44px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.bench-stat { margin: 0; display: flex; align-items: baseline; gap: 16px; }
.bench-stat strong {
  font-size: 112px;
  font-weight: 900;
  line-height: 104px;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.bench-stat span { font-size: 20px; font-weight: 600; line-height: 28px; color: var(--body-ink); }
.bench-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.pills { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
.pill {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}
.pill--on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pill--more { background: transparent; border-style: dashed; border-color: var(--button-line); color: var(--mute); }
.pills--tools { gap: 10px; }
.pill--sm { height: 36px; font-size: 15px; line-height: 20px; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tool-cell {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.tool-cell img { width: auto; max-width: 80%; object-fit: contain; }

/* ==========================================================================
   S4 / We are AI (white) — Paper FCC-1
   ========================================================================== */

.sec--ai { position: relative; gap: 72px; }
.ai-head h2 { font-size: 56px; line-height: 66px; text-align: center; }
.ink-chip--xl { height: 60px; padding: 0 11px; border-radius: 10px; }

.ai-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  width: 1248px;
  max-width: 100%;
}

.run-card {
  width: 620px;
  flex: 0 0 auto;
  background: var(--ink);
  border-radius: 16px;
  padding: 32px 36px 36px;
  color: var(--white);
}
.run-bars { display: flex; height: 4px; border-radius: 2px; overflow: hidden; margin-bottom: 24px; }
.run-bars i { display: block; flex-basis: 0; }
.run-bars i:nth-child(1) { flex-grow: 3; background: var(--sky); }
.run-bars i:nth-child(2) { flex-grow: 4; background: var(--pink); }
.run-bars i:nth-child(3) { flex-grow: 5; background: var(--electric); }
.run-bars i:nth-child(4) { flex-grow: 7; background: var(--up); }
.run-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body-on-black);
}
.run-head .dot { width: 6px; height: 6px; border-radius: 6px; background: var(--electric); }
.run-rows { list-style: none; }
.run-row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  border-bottom: 1px solid var(--line);
}
.run-row .ic {
  width: 18px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--electric);
}
.run-row .who {
  width: 72px;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-on-black);
}
.run-row .what { flex: 1 1 0; font-size: 16px; font-weight: 500; line-height: 22px; color: var(--body-on-black); }
.run-row .state {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--electric);
}
.run-row--person .who, .run-row--person .what { color: var(--white); }
.run-row--person .sq { width: 8px; height: 8px; border-radius: 8px; background: var(--white); display: block; }
.signed {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.run-foot { display: flex; align-items: center; gap: 12px; padding-top: 24px; }
.run-foot strong {
  font-size: 32px;
  font-weight: 900;
  line-height: 36px;
  letter-spacing: -0.03em;
  color: var(--white);
}
.run-foot span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-on-black);
}

.ai-points { width: 520px; max-width: 100%; }
.point {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}
.point h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.point p { margin: 0; font-size: 18px; line-height: 28px; color: var(--mute); }
.ai-kicker {
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font-size: 40px;
  font-weight: 900;
  line-height: 44px;
  letter-spacing: -0.03em;
  color: var(--ink);
}


/* ==========================================================================
   S5 / On your team. On call. (cloud) — Paper FF7-1
   ========================================================================== */

.sec--team { background: var(--cloud); gap: 72px; }
.team-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 1248px;
  max-width: 100%;
  text-align: center;
}
.team-head p { margin: 0; max-width: 640px; font-size: 20px; line-height: 30px; color: var(--body-ink); }

.team-body {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  width: 1248px;
  max-width: 100%;
}
.team-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 720px;
  flex: 0 0 auto;
}
.team-card {
  width: 348px;
  height: 232px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.team-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.team-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 6px;
  background: var(--up);
  flex: 0 0 auto;
}
.team-card--dark { background: var(--ink); border-color: var(--ink); }
.team-card--dark .team-label { color: var(--body-on-black); }
.team-card--dark .team-label::before { background: var(--electric); }
.team-copy { display: flex; flex-direction: column; gap: 10px; }
.team-copy h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 32px;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.team-copy p { margin: 0; font-size: 17px; line-height: 26px; color: var(--mute); }
.team-card--dark .team-copy h3 { color: var(--white); }
.team-card--dark .team-copy p { color: var(--body-on-black); }

.quote-card {
  width: 480px;
  height: 488px;
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.quote-mark {
  display: block;
  font-size: 96px;
  font-weight: 900;
  line-height: 64px;
  color: var(--ink);
}
.quote-card blockquote {
  margin: 0;
  max-width: 392px;
  font-size: 44px;
  font-weight: 800;
  line-height: 50px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.quote-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.quote-card figcaption img { width: 134px; height: 19px; object-fit: contain; object-position: left center; }
.quote-card figcaption span { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--mute); }

/* ==========================================================================
   S6 / A month on Enterprise (white) — Paper FGK-1
   ========================================================================== */

.sec--month { gap: 64px; }
.month-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 1248px;
  max-width: 100%;
  text-align: center;
}
.month-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 15px;
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.month-pill::before { content: ""; width: 6px; height: 6px; border-radius: 6px; background: var(--up); }
.month-head h2 { font-size: 48px; line-height: 66px; }
.month-head .ink-chip { height: 60px; }
.month-head p { margin: 0; max-width: 700px; font-size: 20px; line-height: 30px; color: var(--body-ink); }

.month-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  width: 1248px;
  max-width: 100%;
}
.board {
  width: 620px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 40px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--white);
}
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.board-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.board-label::before { content: ""; width: 6px; height: 6px; border-radius: 6px; background: var(--up); flex: 0 0 auto; }
.board-state {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--up);
}
.board-stats { display: flex; flex-direction: column; }
.board-stats span { font-size: 40px; font-weight: 800; line-height: 46px; letter-spacing: -0.03em; color: var(--ink); }
.board-stats .green { color: var(--up); }
.rline--hair { height: 1px; background: var(--hairline); }
.tasks { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.task {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--cloud);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}
.task svg { flex: 0 0 auto; color: var(--up); }
.task--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.task--dark svg { color: var(--electric); }

.screen-col { width: 580px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 16px; }
.screen-card {
  width: 580px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 30px 60px rgba(10, 12, 15, 0.10);
}
.screen-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--cloud);
  border-bottom: 1px solid var(--hairline);
}
.screen-bar i { width: 10px; height: 10px; border-radius: 5px; background: var(--hairline); display: block; }
.screen-url {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-left: 12px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: var(--white);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--mute);
}
.screen-card img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: 50% 100%;
}
.screen-caption {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: var(--mute);
}
.screen-caption .dot { width: 6px; height: 6px; border-radius: 6px; background: var(--up); flex: 0 0 auto; }

.hs-quote {
  margin: 0;
  padding-top: 16px;
  width: 900px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hs-quote blockquote {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 48px;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-align: center;
}
.hs-quote figcaption { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hs-quote figcaption img { width: 109px; height: 22px; object-fit: contain; }
.hs-quote figcaption span { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--mute); }

/* ==========================================================================
   S7 / The receipts (cloud) — Paper FJT-1
   ========================================================================== */

.sec--receipts { position: relative; background: var(--cloud); gap: 64px; }
.receipts-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 1248px;
  max-width: 100%;
  text-align: center;
}
.receipts-head h2 { font-size: 48px; line-height: 66px; }
.receipts-head p { margin: 0; max-width: 720px; font-size: 20px; line-height: 30px; color: var(--body-ink); }

.results {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 1248px;
  max-width: 100%;
}
.result {
  width: 400px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.result-photo {
  display: block;
  width: 100%;
  height: 270px;
  object-fit: cover;
  border-radius: 10px;
}
.result-body { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px 20px; }
.result-stat { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.result-stat strong {
  font-size: 72px;
  font-weight: 900;
  line-height: 72px;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.result-stat strong.sm { font-size: 34px; line-height: 40px; letter-spacing: -0.03em; }
.result-stat svg { color: var(--up); flex: 0 0 auto; }
.result-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.result-brand { font-size: 17px; font-weight: 600; line-height: 22px; color: var(--ink); }
.result-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.reference-row {
  display: flex;
  align-items: center;
  gap: 48px;
  width: 1248px;
  max-width: 100%;
  padding-top: 8px;
}
.dean-quote { display: flex; align-items: center; gap: 28px; flex: 1 1 0; }
.dean-quote img { width: 120px; height: 120px; border-radius: 60px; object-fit: cover; flex: 0 0 auto; }
.dean-quote > div { display: flex; flex-direction: column; gap: 12px; }
.dean-line { margin: 0; font-size: 36px; font-weight: 800; line-height: 44px; letter-spacing: -0.03em; color: var(--ink); }
.dean-name { margin: 0; font-size: 15px; font-weight: 500; line-height: 20px; color: var(--mute); }
.reference-card {
  width: 400px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.reference-card h3 { margin: 0; font-size: 24px; font-weight: 800; line-height: 30px; letter-spacing: -0.02em; color: var(--ink); }
.reference-card p { margin: 0; max-width: 336px; font-size: 17px; line-height: 26px; color: var(--mute); }
.btn--ink {
  height: 44px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  border-radius: 22px;
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}
.btn--sm { height: 44px; }


/* ==========================================================================
   S8 / From call to crew in a week (white) — Paper FMA-1
   ========================================================================== */

.sec--how { position: relative; gap: 72px; }
.how-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 1248px;
  max-width: 100%;
  text-align: center;
}
.how-head h2 { font-size: 48px; line-height: 56px; }

.timeline { display: flex; gap: 24px; width: 1248px; max-width: 100%; }
.step { width: 294px; flex: 1 1 0; display: flex; flex-direction: column; gap: 22px; }
.step-top { display: flex; align-items: center; gap: 12px; }
.step-num {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  color: var(--ink);
}
.step-line { display: block; flex: 1 1 0; height: 2px; background: var(--ink); }
.step-day {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--fill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.step-day--dark { background: var(--ink); color: var(--white); }
.step-copy { display: flex; flex-direction: column; gap: 8px; }
.step-copy h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.step-copy p { margin: 0; font-size: 17px; line-height: 26px; color: var(--mute); }
.step--now .step-num { background: var(--ink); border-color: var(--ink); }
.step-sq { display: block; width: 8px; height: 8px; border-radius: 8px; background: var(--electric); }
.step--now .step-line { height: 0; border-top: 2px dashed var(--button-line); background: none; }

.how-cta { display: flex; align-items: center; gap: 20px; }
.how-cta .btn--primary {
  height: 52px;
  padding: 0 26px;
  border-radius: 26px;
  font-size: 17px;
  line-height: 22px;
}
.how-cta > span { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--mute); }


/* ==========================================================================
   S9 / Asked on every call + one more way in (cloud) — Paper FP7-1
   ========================================================================== */

.sec--faq { background: var(--cloud); gap: 80px; }
.faq-top { display: flex; justify-content: space-between; gap: 48px; width: 1248px; max-width: 100%; }
.faq-intro { width: 400px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 24px; }
.faq-intro h2 { font-size: 56px; line-height: 76px; }
.ink-chip--xxl { height: 70px; padding: 0 11px; border-radius: 10px; }
.faq-intro > p { margin: 0; font-size: 20px; line-height: 30px; color: var(--body-ink); }
.faq-cta { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.faq-cta > span { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--mute); }

.faq-grid { width: 800px; max-width: 100%; display: flex; flex-wrap: wrap; column-gap: 48px; }
.faq-item {
  width: 376px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--button-line);
}
.faq-item h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: -0.01em; color: var(--ink); }
.faq-item p { margin: 0; font-size: 17px; line-height: 26px; color: var(--mute); }

.flagship-card {
  width: 1248px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding: 44px 48px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.flagship-copy { width: 640px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }
.flagship-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.flagship-label::before { content: ""; width: 6px; height: 6px; border-radius: 6px; background: var(--up); flex: 0 0 auto; }
.flagship-title { margin: 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.flagship-title strong { font-size: 40px; font-weight: 800; line-height: 44px; letter-spacing: -0.03em; color: var(--ink); }
.flagship-title span { font-size: 20px; font-weight: 600; line-height: 28px; color: var(--body-ink); }
.flagship-body { margin: 0; font-size: 17px; line-height: 26px; color: var(--mute); }
.flagship-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: 0 0 auto; }
.flagship-price { font-size: 17px; font-weight: 600; line-height: 22px; color: var(--ink); }
.flagship-note { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--mute); }

/* ==========================================================================
   S10 / Let's run it up. (light HIRED bookend) — Paper FRA-1
   ========================================================================== */

.sec--bookend {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  padding: 128px 96px 96px;
  background: var(--white);
  border-top: 1px solid var(--hairline);
  gap: 0;
}
.bookend-field {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 330px;
  pointer-events: none;
  overflow: hidden;
}
.bookend-field canvas { display: block; width: 100%; height: 100%; }

.bookend-h {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
  font-size: 96px;
  font-weight: 900;
  line-height: 104px;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-align: center;
}
.ink-chip--book { height: 98px; padding: 0 19px; border-radius: 14px; }

.bookend-sub {
  position: relative;
  z-index: 1;
  margin: 104px 0 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
  color: var(--body-ink);
  text-align: center;
}
.bookend-cta { position: relative; z-index: 1; margin-top: 40px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.bookend-btn { height: 52px; padding: 0 26px; border-radius: 26px; font-size: 17px; line-height: 22px; }
.bookend-note {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--mute);
}
.bookend-note svg { color: var(--up); flex: 0 0 auto; }

/* ==========================================================================
   Responsive
   Phone layout from Paper FT5-1 (390 × 12906); tablet is the same system
   stacked at 1180, so nothing squeezes before the phone breakpoint.
   ========================================================================== */

@media (max-width: 1180px) {
  .sec { padding: 96px 48px; }

  .hero-h1 { font-size: 86px; line-height: 90px; }
  .hero-h1 .chip { height: 86px; }
  .hero-sub { margin-top: 64px; }

  .math-grid,
  .bench-head,
  .bench-grid,
  .ai-body,
  .team-body,
  .month-body,
  .reference-row,
  .faq-top,
  .flagship-card {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  .math-grid { align-items: center; }
  .math-head,
  .bench-head,
  .team-head,
  .how-head,
  .month-head,
  .receipts-head,
  .faq-intro,
  .ai-points,
  .flagship-copy { width: 100%; max-width: 620px; margin-inline: auto; }
  .ai-head h2 br { display: none; }
  .ai-head h2 { max-width: 760px; margin-inline: auto; }
  .run-card,
  .quote-card,
  .board,
  .screen-col,
  .screen-card,
  .reference-card { width: 100%; max-width: 620px; margin-inline: auto; }
  .screen-card img { width: 100%; }
  .team-cards { width: 100%; max-width: 720px; margin-inline: auto; }
  .team-card { flex: 1 1 300px; }
  .results { justify-content: center; }
  .timeline { flex-wrap: wrap; }
  .step { flex: 1 1 45%; width: auto; min-width: 240px; }
  .faq-grid { width: 100%; max-width: 800px; margin-inline: auto; }
  .flagship-side { align-items: flex-start; }
}

@media (max-width: 900px) {
  .hero--ent { padding-top: 100px; }
  .hero-h1 { font-size: 64px; line-height: 68px; }
  .h1-line { gap: 18px; }
  .hero-h1 .chip { height: 64px; padding: 0 14px; border-radius: 10px; }
  .hero-sub { margin-top: 48px; font-size: 18px; line-height: 28px; }
  .hero-checks { flex-wrap: wrap; row-gap: 10px; }
  .proof-logos { gap: 30px; }
  .receipt,
  .ent-card { width: 100%; max-width: 560px; }
  .step { flex: 1 1 100%; }
}

@media (max-width: 600px) {
  :root { --pad: 20px; }

  /* ---------- S1 hero — M1 ---------- */
  .hero--ent {
    padding: 96px 0 64px;
    min-height: 100svh;
    margin-top: -60px;
  }
  .hero-inner { padding: 0 20px; }
  .hero-field--band { height: 362px; }
  .band-edge { top: 360px; }
  .ent-eyebrow { height: 30px; padding: 0 14px; font-size: 12px; }
  .hero-h1 {
    margin-top: 10px;
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -0.03em;
  }
  .h1-line { display: block; }
  .h1-line:last-child { white-space: nowrap; }
  .br-m { display: inline; }
  .hero-h1 .chip { height: 48px; padding: 0 8px; border-radius: 10px; margin-left: 8px; }
  .hero-sub {
    margin-top: 84px;
    max-width: 350px;
    font-size: 17px;
    line-height: 26px;
  }
  .hero-sub br { display: none; }
  .hero-cta { margin-top: 20px; flex-direction: column; gap: 10px; width: 100%; max-width: 350px; }
  .hero-cta .btn--electric { width: 100%; justify-content: center; }
  .hero-price { font-size: 16px; line-height: 22px; }
  .hero-checks { margin-top: 18px; flex-direction: column; gap: 6px; align-items: center; }
  .hero-checks li { font-size: 14px; line-height: 20px; gap: 6px; }
  .hero-checks svg { width: 14px; height: 14px; }
  .hero-proof { margin-top: 28px; padding-top: 0; gap: 14px; }
  .proof-label { font-size: 10px; line-height: 16px; }
  .proof-logos {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    align-items: center;
    width: 300px;
    max-width: 100%;
    gap: 14px 0;
  }
  .proof-logos img { width: auto; }
  .proof-logos .lg-medik8 { height: 19px; }
  .proof-logos .lg-kettle { height: 14px; }
  .proof-logos .lg-keto { height: 8px; }
  .proof-logos .lg-hs { height: 17px; }
  .proof-logos .lg-equip { height: 21px; }
  .proof-logos .lg-lineage { height: 23px; }
  .proof-logos .lg-rheal,
  .proof-logos .lg-adapt { display: none; }

  /* ---------- sections ---------- */
  .sec { padding: 64px 20px; gap: 32px; }
  .sec h2 { font-size: 32px; line-height: 42px; letter-spacing: -0.025em; }
  .ink-chip { height: 36px; padding: 0 6px; border-radius: 8px; }

  /* ---------- S2 do the math — M2 ---------- */
  .math-head { gap: 14px; }
  .math-head p { font-size: 17px; line-height: 26px; }
  .math-grid { gap: 40px; }
  .receipt {
    width: 330px;
    max-width: 100%;
    padding: 28px 24px 24px;
    box-shadow: 0 18px 36px rgba(10, 12, 15, 0.08);
  }
  .receipt-head { padding-bottom: 14px; font-size: 12px; }
  .receipt-head span:last-child { font-size: 11px; }
  .receipt-rows > div { height: 46px; }
  .receipt-rows dt,
  .receipt-rows dd { font-size: 16px; line-height: 22px; }
  .receipt-total { padding: 20px 0 18px; gap: 4px; }
  .receipt-total .k { font-size: 11px; }
  .receipt-total .big { font-size: 32px; line-height: 38px; }
  .receipt-total .small { font-size: 16px; line-height: 24px; }
  .receipt-foot { padding-top: 18px; }
  .receipt-foot .barcode { width: 140px; height: 28px; }
  .receipt-foot span { font-size: 11px; }

  .ent-card { width: 350px; max-width: 100%; border-radius: 16px; }
  .ent-card-body { gap: 22px; padding: 28px 24px; }
  .card-eyebrow { font-size: 12px; }
  .card-price { gap: 10px; }
  .card-price strong { font-size: 44px; line-height: 46px; }
  .card-price span { font-size: 16px; line-height: 22px; }
  .card-line { font-size: 19px; line-height: 26px; }
  .card-checks { gap: 10px; }
  .card-checks li { font-size: 15px; line-height: 22px; align-items: flex-start; }
  .card-checks svg { width: 16px; height: 16px; margin-top: 3px; }
  .ent-card .btn--electric { width: 100%; justify-content: center; }
  .math-kicker { max-width: 350px; font-size: 22px; line-height: 28px; letter-spacing: -0.015em; }

  /* ---------- S3 the bench — M3 ---------- */
  .sec--bench { gap: 32px; }
  .bench-head { gap: 14px; align-items: flex-start; }
  .bench-head h2 { font-size: 32px; line-height: 42px; }
  .ink-chip--lg { height: 36px; padding: 0 6px; }
  .bench-head p { width: 100%; font-size: 17px; line-height: 26px; }
  .bench-grid { gap: 32px; }
  .bench-card { width: 350px; max-width: 100%; padding: 24px; gap: 18px; border-radius: 16px; }
  .bench-stat { gap: 12px; }
  .bench-stat strong { font-size: 72px; line-height: 68px; }
  .bench-stat span { font-size: 16px; line-height: 22px; }
  .bench-label { font-size: 11px; }
  .pills { gap: 8px; }
  .pill { height: 34px; padding: 0 14px; font-size: 14px; line-height: 20px; }
  .pills--tools { gap: 8px; }
  .pill--sm { height: 32px; font-size: 13px; }
  .tool-grid { gap: 8px; }
  .tool-cell { height: 64px; border-radius: 10px; }
  .tool-cell img { max-height: 22px; }

  /* ---------- S4 we are AI — M4 ---------- */
  .sec--ai { gap: 40px; overflow: hidden; }
  .ai-head { width: 100%; }
  .ai-head h2 { font-size: 32px; line-height: 42px; }
  .ink-chip--xl { height: 36px; padding: 0 6px; }
  .ai-body { gap: 32px; }
  .run-card { width: 350px; max-width: 100%; padding: 24px 20px; border-radius: 16px; }
  .run-bars { margin-bottom: 18px; }
  .run-head { font-size: 11px; padding-bottom: 12px; }
  .run-row { height: 46px; gap: 10px; }
  .run-row .ic { width: 14px; }
  .run-row .ic svg { width: 14px; height: 14px; }
  .run-row .who { display: none; }
  .run-row .what { font-size: 14px; line-height: 20px; }
  .run-row .state { font-size: 11px; }
  .run-row--person .sq { width: 7px; height: 7px; }
  .signed { height: 22px; padding: 0 8px; font-size: 10px; }
  .run-foot { padding-top: 18px; gap: 10px; }
  .run-foot strong { font-size: 26px; line-height: 30px; }
  .run-foot span { font-size: 10px; }
  .ai-points { width: 350px; }
  .point { padding: 20px 0; gap: 6px; }
  .point h3 { font-size: 22px; line-height: 28px; letter-spacing: -0.015em; }
  .point p { font-size: 16px; line-height: 25px; }
  .ai-kicker { padding-top: 22px; font-size: 30px; line-height: 34px; }

  /* ---------- S5 team — M5 ---------- */
  .sec--team { gap: 32px; }
  .team-head { gap: 14px; }
  .team-head h2 { font-size: 32px; line-height: 42px; }
  .team-head p { font-size: 17px; line-height: 26px; }
  .team-body { gap: 12px; }
  .team-cards { gap: 12px; width: 350px; }
  .team-card { width: 350px; height: auto; padding: 24px; gap: 16px; }
  .team-label { font-size: 11px; }
  .team-copy { gap: 6px; }
  .team-copy h3 { font-size: 22px; line-height: 28px; letter-spacing: -0.02em; }
  .team-copy p { font-size: 16px; line-height: 25px; }
  .quote-card { width: 350px; height: auto; padding: 28px 24px; gap: 18px; }
  .quote-mark { font-size: 64px; line-height: 40px; }
  .quote-card blockquote { font-size: 30px; line-height: 36px; }
  .quote-card figcaption { padding-top: 18px; gap: 12px; }
  .quote-card figcaption img { width: 118px; height: 17px; }
  .quote-card figcaption span { font-size: 14px; line-height: 20px; }

  /* ---------- S6 a month — M6 ---------- */
  .sec--month { gap: 32px; }
  .month-head { gap: 14px; }
  .month-pill { font-size: 12px; }
  .month-head h2 { font-size: 32px; line-height: 44px; }
  .month-head .ink-chip { height: 38px; padding: 0 6px; }
  .month-head p { font-size: 17px; line-height: 26px; }
  .month-body { gap: 32px; }
  .board { width: 350px; max-width: 100%; padding: 24px; gap: 22px; }
  .board-head { gap: 10px; }
  .board-label,
  .board-state { font-size: 11px; }
  .board-stats span { font-size: 28px; line-height: 34px; }
  .tasks { column-gap: 16px; row-gap: 4px; }
  .task {
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 6px;
    font-size: 13px;
    line-height: 18px;
  }
  .task svg { width: 12px; height: 12px; }
  .task--dark { border-radius: 7px; padding: 0 10px 0 8px; background: var(--ink); }
  .screen-col { width: 350px; max-width: 100%; gap: 12px; }
  .screen-card { width: 350px; max-width: 100%; }
  .screen-card img { height: 320px; }
  .screen-caption { align-items: flex-start; gap: 8px; font-size: 14px; line-height: 22px; }
  .screen-caption .dot { margin-top: 8px; }
  .hs-quote { padding-top: 8px; gap: 14px; width: 350px; }
  .hs-quote blockquote { font-size: 26px; line-height: 32px; letter-spacing: -0.025em; }
  .hs-quote figcaption { gap: 10px; }
  .hs-quote figcaption img { width: 89px; height: 18px; }
  .hs-quote figcaption span { font-size: 13px; line-height: 18px; }

  /* ---------- S7 receipts — M7 ---------- */
  .sec--receipts { gap: 32px; overflow: hidden; }
  .receipts-head { gap: 14px; }
  .receipts-head h2 { font-size: 32px; line-height: 46px; }
  .receipts-head .ink-chip { height: 40px; padding: 0 6px; }
  .receipts-head p { font-size: 17px; line-height: 26px; }
  .results { width: 350px; gap: 10px; }
  .result {
    width: 350px;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 8px;
    border-radius: 16px;
  }
  .result-photo { width: 112px; height: 112px; flex: 0 0 auto; border-radius: 10px; }
  .result-body { flex: 1 1 0; min-width: 0; padding: 0; gap: 8px; }
  .result-stat { height: auto; min-height: 44px; }
  .result-stat strong { font-size: 44px; line-height: 44px; }
  .result-stat strong.sm { font-size: 22px; line-height: 26px; letter-spacing: -0.025em; }
  .result-stat svg { width: 20px; height: 20px; }
  .result-foot { padding-top: 8px; gap: 4px; flex-direction: column; align-items: flex-start; }
  .result-brand { font-size: 15px; line-height: 20px; }
  .result-label { font-size: 10px; }
  .reference-row { padding-top: 8px; gap: 16px; align-items: flex-start; }
  .dean-quote { flex-direction: column; align-items: flex-start; gap: 16px; width: 350px; max-width: 100%; }
  .dean-quote img { width: 72px; height: 72px; border-radius: 36px; }
  .dean-line { font-size: 28px; line-height: 34px; letter-spacing: -0.025em; }
  .dean-name { font-size: 14px; line-height: 20px; }
  .reference-card { width: 350px; max-width: 100%; padding: 24px; gap: 12px; }
  .reference-card h3 { font-size: 22px; line-height: 28px; }
  .reference-card p { font-size: 16px; line-height: 25px; }
  .reference-card .btn { margin-top: 4px; }

  /* ---------- S8 how it works — M8 ---------- */
  .sec--how { gap: 36px; overflow: hidden; }
  .how-head { gap: 14px; }
  .how-head h2 { font-size: 32px; line-height: 42px; }
  .timeline { flex-direction: column; gap: 0; }
  .step {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 16px;
    row-gap: 10px;
    width: 350px;
    max-width: 100%;
    padding-bottom: 0;
  }
  .step-top {
    grid-row: 1 / span 3;
    grid-column: 1;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    align-self: stretch;
  }
  .step-num { width: 28px; height: 28px; }
  .step-line { width: 2px; height: auto; flex: 1 1 auto; }
  .step-day { grid-column: 2; grid-row: 1; height: 26px; padding: 0 10px; font-size: 11px; }
  .step-copy { grid-column: 2; grid-row: 2 / span 2; gap: 10px; padding-bottom: 28px; }
  .step-copy h3 { font-size: 22px; line-height: 28px; }
  .step-copy p { font-size: 16px; line-height: 25px; }
  .step--now .step-copy { padding-bottom: 0; }
  .how-cta { flex-direction: column; gap: 12px; width: 350px; max-width: 100%; }
  .how-cta .btn--primary { width: 100%; justify-content: center; }
  .how-cta > span { font-size: 14px; line-height: 20px; text-align: center; }

  /* ---------- S9 FAQ — M9 ---------- */
  .sec--faq { gap: 32px; }
  .faq-top { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .faq-intro { display: contents; }
  .faq-intro h2 { font-size: 32px; line-height: 48px; order: 1; }
  .ink-chip--xxl { height: 42px; padding: 0 6px; }
  .faq-intro > p { margin: 14px 0 0; font-size: 17px; line-height: 26px; order: 2; }
  .faq-grid { display: flex; flex-direction: column; width: 350px; max-width: 100%; margin-top: 32px; order: 3; }
  .faq-item { width: 350px; max-width: 100%; padding: 20px 0 22px; gap: 8px; }
  .faq-item h3 { font-size: 18px; line-height: 24px; }
  .faq-item p { font-size: 16px; line-height: 25px; }
  .faq-cta { order: 4; margin-top: 32px; padding-top: 0; align-items: center; }
  .faq-cta .btn { width: 100%; max-width: 350px; justify-content: center; }
  .faq-cta > span { font-size: 14px; line-height: 20px; }
  .flagship-card { width: 350px; max-width: 100%; padding: 24px; gap: 14px; }
  .flagship-copy { gap: 14px; }
  .flagship-label { font-size: 11px; }
  .flagship-title { display: block; }
  .flagship-title strong { display: block; font-size: 32px; line-height: 36px; }
  .flagship-title span { display: block; margin-top: 6px; font-size: 17px; line-height: 24px; }
  .flagship-body { font-size: 16px; line-height: 25px; }
  .flagship-side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline);
  }
  .flagship-price { order: 1; font-size: 15px; line-height: 20px; }
  .flagship-side .btn { order: 2; height: 36px; padding: 0 16px; font-size: 14px; }
  .flagship-note { order: 3; width: 100%; font-size: 13px; line-height: 18px; }

  /* ---------- S10 bookend — M10 ---------- */
  .sec--bookend {
    min-height: 600px;
    padding: 104px 20px 28px;
  }
  .bookend-field { height: 270px; }
  .bookend-h { font-size: 48px; line-height: 54px; gap: 12px; }
  .ink-chip--book { height: 48px; padding: 0 10px; border-radius: 10px; }
  .bookend-sub { margin-top: 88px; font-size: 17px; line-height: 26px; font-weight: 500; }
  .bookend-sub span { display: block; }
  .bookend-cta { margin-top: 30px; flex-direction: column; gap: 10px; width: 350px; max-width: 100%; }
  .bookend-btn { width: 100%; justify-content: center; }
  .bookend-note { margin-top: 30px; font-size: 14px; line-height: 20px; }
  .bookend-note svg { width: 14px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Stickers R3 (v2/out/STICKER-PLAN.md sections 3 + 7)
   .stk is the placed layer: Paper's left/top/width and its rotate about the
   top-left corner (Paper's transform-origin 0 0), so the static frame is
   exactly Paper's. The <img> inside does the motion, relative to that tilt.
   The PNG art carries the family shadow, so no filter is animated.
   Behaviours: slap, peel (hover), swing, stamp, tape, reward (count-up then
   slap), seal (peels toward the primary button on its hover).
   Reduced motion or no JS: the piece is simply there.
   ========================================================================== */
.stk {
  position: absolute;
  z-index: 4;
  display: block;
  width: var(--w);
  left: var(--x);
  top: var(--y);
  rotate: var(--tilt, 0deg);
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
}
.stk img { display: block; width: 100%; height: auto; transform-origin: 50% 50%; }
.stk--swing img { transform-origin: var(--hole, 50% 4%); }
.stk--tape img { transform-origin: 0 50%; }

/* armed by JS (motion allowed): hidden until its moment */
.stk-on .stk[data-stk]:not(.is-in) img { opacity: 0; }
.stk-on .stk.is-in[data-stk~="slap"] img,
.stk-on .stk.is-in[data-stk~="reward"] img,
.stk-on .stk.is-in[data-stk~="seal"] img {
  animation: stk-slap 440ms cubic-bezier(.2, .9, .25, 1.15) both;
}
.stk-on .stk.is-in[data-stk~="stamp"] img { animation: stk-stamp 260ms cubic-bezier(.55, 0, .3, 1) both; }
.stk-on .stk.is-in[data-stk~="tape"] img { animation: stk-tape 280ms cubic-bezier(.2, .7, .3, 1) both; }
.stk-on .stk.is-in[data-stk~="swing"] img { animation: stk-swing 1400ms linear both; }
.stk-on .stk.is-in.is-done[data-stk] img { animation: none; opacity: 1; }

@keyframes stk-slap {
  from { opacity: 0; transform: translateY(-28px) rotate(9deg) scale(1.22); }
  62% { opacity: 1; transform: rotate(-1.5deg) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes stk-stamp {
  from { opacity: 0; transform: scale(1.7); }
  55% { opacity: .96; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes stk-tape {
  from { opacity: 1; transform: scaleX(0); }
  to { opacity: 1; transform: none; }
}
/* damped spring, three swings */
@keyframes stk-swing {
  0% { opacity: 0; transform: rotate(14deg); }
  6% { opacity: 1; }
  22% { transform: rotate(-8deg); }
  44% { transform: rotate(4.5deg); }
  64% { transform: rotate(-2deg); }
  82% { transform: rotate(.8deg); }
  100% { opacity: 1; transform: none; }
}
/* PEEL: desktop hover lifts the sticker off the page */
@media (hover: hover) and (pointer: fine) {
  .stk[data-stk~="peel"] { pointer-events: auto; }
  .stk[data-stk~="peel"] img,
  .stk[data-stk~="seal"] img { transition: transform 240ms ease-out, filter 240ms ease-out; }
  .stk.is-in[data-stk~="peel"]:hover img,
  .stk.is-in.is-peel[data-stk~="seal"] img {
    animation: none;
    transform: translateY(-5px) rotate(2deg);
    filter: drop-shadow(0 12px 10px rgba(10, 12, 15, .16));
    transition-duration: 180ms;
  }
  .stk[data-stk~="swing"] { pointer-events: auto; }
}
/* phone: a tap gives a 2-degree wiggle (WAAPI in page.js) */
@media (hover: none) {
  .stk[data-stk~="peel"] { pointer-events: auto; }
}

.stk-count { font-variant-numeric: tabular-nums; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .stk img { animation: none !important; opacity: 1 !important; transition: none !important; }
}

/* Sticker placements, Paper F3F-1 / FT5-1 after stickers R3. Each piece sits
   inside the card it is stuck to; x is measured from the card's right edge
   so it keeps Paper's overhang at every width. */
.ent-card { position: relative; overflow: visible; }
.run-card, .result--rheal, .step--hired { position: relative; }
.sec--math, .sec--ai, .sec--receipts, .sec--how { overflow-x: clip; }
/* E1 hang tag: tied to the card's top-right corner, hanging in the margin */
.stk--tag { --w: 200px; --x: calc(100% - 46px); --y: -9px; --tilt: -3deg; --hole: 10% 3%; z-index: 5; }
/* E2 05 "AI with receipts." on the run-log card */
.stk--ai { --w: 156px; --x: calc(100% - 88px); --y: -88px; --tilt: -4deg; }
/* E3 01 "Numbers go up." on the 12x Rheal card */
.stk--up { --w: 176px; --x: calc(100% - 88px); --y: -88px; --tilt: 3deg; }
/* E4 HIRED stamp on step 3's WEEK 1 chip */
.stk--hired { --w: 200px; --x: 50px; --y: -10px; --tilt: -6deg; }

/* ==========================================================================
   QA pass (Claude Code, Paper F3F-1 / FT5-1)
   ========================================================================== */
/* S10: `.sec h2` (0,1,1) was beating `.bookend-h`, so the headline rendered at
   48 px beside a 98 px chip. Paper FRA-1: 96 / 104, 900. */
.sec .bookend-h { font-size: 96px; font-weight: 900; line-height: 104px; letter-spacing: -0.03em; }
/* S1: the chip sat on `vertical-align: middle` and grew line 2 to 115 px
   (H1 223 tall, Paper 216). Top-align it and centre it in the 108 px line. */
.hero-h1 .chip { vertical-align: top; position: relative; top: 3px; }
@media (max-width: 1180px) { .hero-h1 .chip { top: 2px; } }
@media (max-width: 600px) { .hero-h1 .chip { top: 3px; } }
/* S7: keep the arrow off "Acquired by L'Oréal" when the line runs long */
.result-stat { gap: 8px; }
/* S4, S6, S9 card: Paper centres these rows (alignItems center) */
.ai-body, .month-body, .flagship-card { align-items: center; }
/* S9: Paper sets "Asked on [every]" / "call." as two fixed lines */
.faq-intro h2 { white-space: nowrap; }
/* S2 phone/tablet: never break "From $50K"; "a month" may drop instead */
.card-price { flex-wrap: wrap; }
.card-price strong { white-space: nowrap; }

/* 1181–1439: the fixed 1440 widths overflowed (scrollWidth 1386 at 1200/1280).
   Narrower gutters and shrinkable columns keep Paper's layout without scroll. */
@media (min-width: 1181px) and (max-width: 1439px) {
  .sec { padding-left: 48px; padding-right: 48px; }
  .team-cards { flex: 0 1 720px; min-width: 0; }
  .quote-card { flex: 1 1 0; width: auto; min-width: 0; }
  .board { flex: 0 1 620px; min-width: 0; }
  .screen-col { flex: 1 1 0; width: auto; min-width: 0; }
  .screen-card { width: 100%; }
  .screen-card img { width: 100%; height: auto; }
  .run-card { flex: 0 1 620px; min-width: 0; }
  .ai-points { flex: 1 1 0; min-width: 0; }
}
/* the hang tag needs the margin beside the card: hide it where there is none */
@media (max-width: 1379px) and (min-width: 1181px), (max-width: 900px) {
  .stk--tag { display: none; }
}
@media (max-width: 1180px) {
  .faq-intro h2 { white-space: normal; }
}

@media (max-width: 600px) {
  /* M10 (Paper GDI-1): "Let's run" / "it [up.]" on two 54 px lines, note 16 px under the buttons */
  /* M2: Paper's 10 px gap leaves "a month" 1 px short of the 302 px line with
     this build of Inter; 8 px keeps the price on one line as drawn */
  .card-price { gap: 8px; }
  /* M1 proof (Paper FUE-1): two rows, each spread across 300 px. The 3-column
     grid sized row 2 by row 1's columns, so it sat 6 px off centre. */
  .proof-logos { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; row-gap: 14px; }
  .proof-logos .lg-medik8 { width: 79px; height: 19px; }
  .proof-logos .lg-kettle { width: 96px; height: 14px; }
  .proof-logos .lg-keto { width: 96px; height: 8px; }
  .proof-logos .lg-hs { width: 86px; height: 17px; }
  .proof-logos .lg-equip { width: 73px; height: 21px; }
  .proof-logos .lg-lineage { width: 67px; height: 23px; }
  .sec--bookend { gap: 0; }
  .sec--bookend .bookend-h { display: block; font-size: 48px; line-height: 54px; }
  .bookend-h .ink-chip--book { vertical-align: top; position: relative; top: 3px; }
  .bookend-note { margin-top: 16px; }
  .ai-head h2 br { display: inline; }
  .stk--ai { --w: 108px; --x: calc(100% - 92px); --y: -44px; --tilt: -5deg; }
  .stk--up { --w: 92px; --x: calc(100% - 66px); --y: 0px; --tilt: 3deg; }
  .stk--hired { --w: 130px; --x: 215px; --y: 8px; --tilt: -6deg; }
  /* M8: the day chips are fit-content in Paper (the grid stretched them to 306 px) */
  .step-day { justify-self: start; }
  /* M7: Paper's result rows carry no arrow (the stat reads alone) */
  .result-stat svg { display: none; }
  /* M5: 32 px between the header, the four cards and the quote (was 12) */
  .team-body { gap: 32px; }
  .team-cards, .team-card, .quote-card { max-width: 100%; }
  .team-copy br { display: none; }
  /* M6: Paper centres the buy-box shot on the phone (desktop stays bottom) */
  .screen-card img { object-position: 50% 50%; }
  /* M9 (Paper GCV-1, GD2-1): 52 px CTA at 17 px; the card's rows sit 14 px apart */
  .faq-cta .btn { height: 52px; border-radius: 26px; font-size: 17px; line-height: 22px; }
  .flagship-title span { margin-top: 14px; }
  .flagship-side { padding-top: 14px; row-gap: 14px; }
  .flagship-side .btn { height: 36px; padding: 0 16px; border-radius: 18px; }
}

/* ==========================================================================
   Hero check (Claude Code, launch film): first screen against Paper F3G-1 / FT6-1
   ========================================================================== */
/* The H1 painted whole at first paint, vanished when the engine split it
   (~0.45 s), then typed in at 1.2 s. Hold it (layout kept) until the split.
   page.js drops .ent-hold if the engine never splits (no JS, low-end, error). */
.ent-hold .hero-h1:not([data-ah-split]) { visibility: hidden; }

/* "Already" / chip: Paper F3Y-1 is a flex row, gap 27 (12 on the phone). The
   inline space plus a 27 px margin left a 44 px gap. */
.hero-h1 .h1-line:last-child { display: flex; justify-content: center; align-items: center; gap: 27px; }
.hero-h1 .h1-line:last-child .chip { margin-left: 0; top: 0; vertical-align: baseline; }
@media (max-width: 1180px) { .hero-h1 .h1-line:last-child { gap: 22px; } }
@media (max-width: 900px) { .hero-h1 .h1-line:last-child { gap: 18px; } }
@media (max-width: 600px) {
  .hero-h1 .h1-line:last-child { gap: 12px; }
  /* FTQ-1: 10 px sides (8 was only there to fit the wider Inter) */
  .hero-h1 .chip { padding: 0 10px; }
}

/* Tablet (601-1180): the H1 shrinks to 86 / 64 px but the band stays 440 px with its
   rule at 428, so the sub rose into the band and the rule ran through it (768: rule
   at 412, sub 382-438; 1024: rule 428, sub 408-468). Fill the band with the H1 block
   (lines centred, as on desktop) and keep desktop's 38 px from the rule to the sub.
   The engine parts on the two .h1-line boxes, so the taller block clears no extra rows. */
@media (min-width: 601px) and (max-width: 1180px) {
  .hero-inner { padding: 0 48px; }
  .hero-h1 { min-height: 264px; display: flex; flex-direction: column; justify-content: center; }
  .hero-sub { margin-top: 38px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero-h1 { min-height: 282px; } /* padding-top 100: H1 at 146, rule at 428 */
}
/* the nav is 60 px up to 960 (header.css) while --v2-nav-h stays 76: the hero sat
   16 px above the page top. Phone already pulls by 60. */
@media (min-width: 601px) and (max-width: 960px) {
  .hero--ent { margin-top: -60px; }
}
/* 1181-1439: the eight logos (854 px of marks + 7 x 44) wrapped to a second row at
   the fold (hero 952 px at 1280). One row: 48 px sides, gaps ease from 44 down to 28. */
@media (min-width: 1181px) and (max-width: 1439px) {
  .hero-inner { padding: 0 48px; }
  .proof-logos { flex-wrap: nowrap; gap: clamp(28px, calc((100vw - 96px - 854px) / 7), 44px); }
}
/* The nav resolved its light colours once before .is-dark landed, then header.css's
   .18 s colour transitions faded it to dark on camera (white pill, missing links,
   ~0.25 s). No nav transitions until load; page.js drops .ent-boot. */
.ent-boot .site-nav, .ent-boot .site-nav *, .ent-boot .site-menu, .ent-boot .site-menu * { transition: none !important; }