/* www.pursuit-hp.com — the VSL page.

   The look is Stefan's second Manus build (firstrescue-cdka8qzh.manus.space,
   09-20-2026), measured off the page rather than guessed: ink and slate
   grounds with paper interludes, Barlow Condensed 800 uppercase set tight,
   DM Sans for everything read, one signal red, a 3px rule before every
   eyebrow, square corners everywhere. Nothing from the OfferOps app's own
   stylesheet is loaded here on purpose -- this is a customer's page, not a
   screen of the product. */
:root {
  --ink: #07090a;
  --ink-2: #0c0f10;
  --slate: #101517;
  --slate-2: #111719;
  --slate-hover: #151c1d;
  --paper: #f4f3ee;
  --signal: #e31b23;
  --signal-hover: #ff5b63;
  /* The buttons only. Black on the brand red is 4.2:1 -- under the 4.5 line
     for text this size, which is the one thing a phone in daylight punishes.
     White on a slightly deeper red is 6.1:1, and the hover comes down with
     it (white on the old hover was 3.0). The brand red itself is untouched:
     as TEXT on the dark page it reads 4.2:1, and deepening it there would
     make it worse, not better. Stefan chose this, 09-22-2026. */
  --signal-btn: #c3102c;
  --signal-btn-hover: #d9152f;
  --deep: #a70712;
  --deep-2: #b30716;
  --text: #f4f3ee;
  --muted: #aab7b4;
  --dim: #83908d;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .15);
  --paper-ink: #101517;
  --paper-muted: #56615f;
  --paper-line: rgba(16, 21, 23, .15);
  --display: "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
  --body: "DM Sans", Arial, -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 16px/1.5 var(--body); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
.s-ico { flex: 0 0 auto; vertical-align: middle; }
.s-ico.red, .red { color: var(--signal); }
.s-rel { position: relative; }
.s-center { text-align: center; }

/* ----------------------------------------------------------- containers */
.s-wrap { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.s-wrap.s-mid { max-width: 1200px; padding: 0 32px; }
.s-wrap.s-narrow { max-width: 896px; padding: 0 32px; }
.s-sec { position: relative; overflow: hidden; padding: 112px 0; }
.s-ink { background: var(--ink); }
.s-slate { background: var(--slate); }
.s-paper { background: var(--paper); color: var(--paper-ink); }

/* ------------------------------------------------------------- textures */
.s-noise { pointer-events: none; position: absolute; inset: 0; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.s-gridtex { pointer-events: none; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 52px 52px; }
.s-gridtex-50 { opacity: .5; }
.s-gridtex-30 { opacity: .3; }
.s-glow { pointer-events: none; position: absolute; right: -7rem; top: 0; width: 34rem; height: 34rem; border-radius: 50%;
  background: rgba(227, 27, 35, .055); filter: blur(64px); }
.s-radial { pointer-events: none; position: absolute; inset: 0; background: radial-gradient(circle at 72% 45%, rgba(255, 187, 23, .14), transparent 30%); }
.s-diag { pointer-events: none; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(227, 27, 35, .13), transparent 30%); }

/* ----------------------------------------------------------------- type */
.s-eyebrow { font: 700 .68rem/1.25 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--signal); }
.s-eyebrow.deep { color: #84111a; }
.s-eyebrow.s-rule { display: flex; align-items: center; gap: 12px; }
.s-eyebrow.s-rule::before { content: ""; flex: 0 0 auto; width: 2.75rem; height: 3px; background: currentColor; }
.s-paper .s-eyebrow { color: #a30712; }
.s-h1 { font: 800 clamp(2.5rem, 4.7vw, 4.25rem)/.9 var(--display); text-transform: uppercase; letter-spacing: -.03em; color: #fff;
  max-width: 880px; margin-top: 20px; text-wrap: balance; }
.s-h2 { font: 800 clamp(2.6rem, 4.6vw, 3.75rem)/.86 var(--display); text-transform: uppercase; letter-spacing: -.035em; color: #fff;
  margin-top: 20px; max-width: 30rem; text-wrap: balance; }
.s-h2.s-h2-lg { font-size: clamp(2.8rem, 5.6vw, 4.5rem); letter-spacing: -.04em; max-width: 42rem; }
.s-h2.left { text-align: left; }
.s-paper .s-h2 { color: var(--paper-ink); }
.s-h3 { font: 700 1.875rem/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; color: #fff; }
.s-h3.s-h3-xl { font-size: 2.25rem; font-weight: 800; }
.s-paper .s-h3 { color: var(--paper-ink); }
.s-lede { max-width: 640px; margin-top: 28px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: #d0d7d5; text-wrap: balance; }
.s-lead { font: 500 clamp(1.2rem, 1.8vw, 1.5rem)/1.55 var(--body); color: #fff; }
.s-copy { margin-top: 20px; max-width: 36rem; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.s-copy.sm { font-size: .875rem; }
.s-copy.lg { font-size: 1.125rem; margin-top: 28px; }
.s-copy.strong { color: #fff; font-weight: 500; }
.s-paper .s-lead { color: var(--paper-ink); }
.s-paper .s-copy { color: var(--paper-muted); }
.s-paper .s-copy.strong { color: #58625f; }
.s-bar-left { border-left: 2px solid var(--signal); padding-left: 36px; }
.s-bar-left > .s-lead + .s-copy { margin-top: 20px; max-width: 34rem; }
.s-paper .s-bar-left { border-color: var(--deep-2); }
.s-note { margin-top: 28px; font-size: .75rem; line-height: 1.6; color: var(--dim); }

/* -------------------------------------------------------------- buttons */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.5rem; padding: .9rem 1.25rem;
  background: var(--signal-btn); color: #fff; border: 1px solid var(--signal-btn); border-radius: 0; cursor: pointer; text-decoration: none;
  font: 800 .78rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  transition: transform .16s cubic-bezier(.23, 1, .32, 1), background .16s, color .16s, border-color .16s; }
.s-btn:hover { background: var(--signal-btn-hover); border-color: var(--signal-btn-hover); transform: translateY(-2px); }
.s-btn:active { transform: scale(.97); }
.s-btn:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.s-btn-sm { min-height: 0; padding: .75rem 1rem; font-size: .63rem; }
.s-btn-quiet { background: rgba(0, 0, 0, .16); color: #fff; border-color: rgba(255, 255, 255, .32); gap: .65rem; }
.s-btn-quiet:hover { background: rgba(255, 187, 23, .1); border-color: var(--signal); }
.s-btn-block { width: 100%; margin-top: 24px; }
/* The hero's button: "Apply now" on top, a faint rule that fades at both
   ends, the program's name under it (Stefan, 09-21-2026). */
.s-btn-cta { flex-direction: column; gap: 0; padding: 13px 22px 11px; }
.s-cta-main { display: inline-flex; align-items: center; gap: .75rem; font: 800 .86rem/1 var(--body); letter-spacing: .12em; }
.s-cta-rule { display: block; width: 100%; height: 1px; margin: 9px 0 7px;
  background: linear-gradient(to right, transparent, rgba(7, 9, 10, .45) 30%, rgba(7, 9, 10, .45) 70%, transparent); }
.s-cta-sub { font: 700 .66rem/1.2 var(--body); letter-spacing: .06em; text-transform: none; opacity: .88; }

/* ------------------------------------------------------------------ top */
.s-top { position: absolute; left: 0; right: 0; top: 0; z-index: 20; }
body:not(.s-home) .s-top { position: static; background: var(--ink); border-bottom: 1px solid var(--line); }
.s-top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.s-logo img { width: 200px; height: auto; }

/* ----------------------------------------------------------------- hero */
.s-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 810px; background: #080a0b; border-bottom: 1px solid var(--line); }
.s-hero-bg { position: absolute; inset: 0; background: url("/static/site/hero.jpg") 64% center / cover no-repeat; }
.s-hero-tint { position: absolute; inset: 0; background: linear-gradient(to top left, rgba(227, 27, 35, .25), transparent 50%); mix-blend-mode: color; }
.s-hero-fade { position: absolute; inset: 0;
  background: linear-gradient(to right, var(--ink) 0%, rgba(7, 9, 10, .92) 50%, rgba(7, 9, 10, .2) 100%),
              linear-gradient(to top, var(--ink) 0%, transparent 50%, rgba(7, 9, 10, .3) 100%); }
.s-hero-gridtex { top: auto; height: 11rem; opacity: .6; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.s-hero-in { position: relative; z-index: 10; padding-top: 150px; padding-bottom: 80px; }
.s-hero-row { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 460px) minmax(260px, 380px); gap: 36px; align-items: end; }
.s-vsl { background: #000; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.s-wistia { position: relative; width: 100%; background: #0b0d0e; overflow: hidden; }
.s-wistia::before { content: ""; display: block; padding-top: calc(100% / var(--aspect, 1.7778)); }
.s-wistia > * { position: absolute; inset: 0; width: 100%; height: 100%; }
/* A YouTube interview: its poster and a play button until pressed, then the player. */
.s-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0b0d0e; overflow: hidden; cursor: pointer; }
.s-yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s, transform .4s; }
.s-yt:hover img { opacity: 1; transform: scale(1.02); }
.s-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.s-yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--signal); color: #fff; cursor: pointer; box-shadow: 0 8px 30px rgba(0, 0, 0, .45); transition: transform .2s; }
.s-yt-play svg { margin-left: 4px; }
.s-yt:hover .s-yt-play { transform: scale(1.06); }
.s-hero-cta { display: flex; flex-direction: column; gap: 12px; }
.s-trust { list-style: none; margin: 20px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 12px;
  font: 600 .75rem/1.3 var(--body); color: #b4c0be; }
.s-trust li { display: inline-flex; align-items: center; gap: 8px; }
.s-fade { animation: s-fade-up .65s cubic-bezier(.23, 1, .32, 1) both; }
.s-fade-late { animation: s-fade-up .65s cubic-bezier(.23, 1, .32, 1) .12s both; }
@keyframes s-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .s-fade, .s-fade-late { animation: none; } .s-btn { transition: none; } }

/* ---------------------------------------------------------- split heads */
.s-split { display: grid; gap: 48px; }
.s-copy-side { margin-top: 0; max-width: 24rem; }
@media (min-width: 1024px) {
  .s-split-gap { grid-template-columns: .8fr 1.2fr; gap: 80px; }
  .s-split-end { grid-template-columns: 1fr .85fr; gap: 32px; align-items: end; }
  .s-split-head { grid-template-columns: 1fr minmax(0, 24rem); gap: 32px; align-items: end; }
  .s-split-diff { grid-template-columns: .9fr 1.1fr; gap: 80px; }
  .s-split-apply { grid-template-columns: 1fr .82fr; gap: 80px; align-items: center; }
}

/* ------------------------------------------------------ performance gap */
.s-cells { margin-top: 56px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); overflow: hidden; }
@media (min-width: 768px) { .s-cells { grid-template-columns: repeat(3, 1fr); } }
.s-cell { position: relative; background: var(--slate); padding: 36px; transition: background .2s; }
.s-cell:hover { background: var(--slate-hover); }
.s-cell-n { position: absolute; right: 24px; top: 20px; font: 700 2.25rem/1 var(--display); color: rgba(255, 255, 255, .1); }
.s-cell-ico { display: block; margin-bottom: 48px; }
.s-cell .s-copy { margin-top: 12px; max-width: 20rem; }

/* --------------------------------------------------------- who we coach */
.s-who { background: var(--ink-2); border-bottom: 1px solid var(--line); }
.s-who-cells .s-cell { background: var(--ink-2); }
.s-who-cells .s-cell:hover { background: var(--slate); }
.s-who-cells .s-cell .s-copy { max-width: 24rem; }
.s-who-line { margin-top: 8px; font: 700 .72rem/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--steel-dim, #8d9a98); }
.s-who-tail { margin-top: 20px; display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--line); border-left: 3px solid var(--signal);
  background: rgba(255, 255, 255, .025); padding: 18px 22px; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.s-who-tail .s-ico { margin-top: 2px; }
.s-who-tail strong { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------- method */
@media (min-width: 640px) { .s-phases4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .s-phases4 { grid-template-columns: repeat(4, 1fr); } }
/* Each card is a column with the "Owns" list pinned to its foot, so a
   one-liner that wraps (Perform's) does not push its list out of line with
   the others' (Stefan, 09-21-2026). */
.s-phase4 { border-top: 3px solid var(--signal); padding: 32px 28px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.s-phase4-ico { display: block; margin: 0 auto 22px; color: #fff; overflow: visible; }
.s-phase4 .s-eyebrow { margin-top: 0; }
.s-phase4 .s-h3 { margin-top: 8px; font-size: 2.1rem; font-weight: 800; color: var(--signal); }
.s-phase4 .s-copy { margin: 12px auto 0; max-width: 22rem; color: #e0e4e2; }
.s-owns { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.s-phase4 .s-copy { margin-bottom: 18px; }
.s-owns span { font: 700 .66rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.s-owns b { font: 600 .9rem/1.3 var(--body); color: #f4f3ee; }

/* -------------------------------------------------------------- program */
.s-phases { margin-top: 64px; display: grid; border-top: 1px solid var(--paper-line); }
.s-phase { padding: 32px 0; border-bottom: 1px solid var(--paper-line); }
.s-phase-top { display: flex; align-items: flex-start; justify-content: space-between; }
.s-phase-n { font: 800 3rem/1 var(--display); color: var(--deep); }
.s-phase-ico { color: rgba(16, 21, 23, .4); }
.s-phase .s-h3 { margin-top: 20px; }
.s-phase .s-copy { margin-top: 12px; max-width: 20rem; }
@media (min-width: 1024px) {
  .s-phases { grid-template-columns: repeat(4, 1fr); }
  .s-phase { padding: 0 28px; border-bottom: 0; border-left: 1px solid var(--paper-line); }
  .s-phase:first-child { border-left: 0; padding-left: 0; }
  .s-phase-top { display: block; }
  .s-phase-ico { display: block; margin-top: 48px; }
}
.s-close-row { margin-top: 56px; border-top: 1px solid var(--paper-line); padding-top: 28px; display: flex; flex-direction: column; gap: 20px; }
.s-close-row .s-copy { margin-top: 0; max-width: 42rem; }
@media (min-width: 640px) { .s-close-row { flex-direction: row; align-items: center; justify-content: space-between; } .s-close-row .s-btn { flex: 0 0 auto; } }

/* ------------------------------------------------------------- outcomes */
.s-quotes { margin-top: 56px; display: grid; gap: 20px; }
@media (min-width: 1024px) { .s-quotes { grid-template-columns: repeat(3, 1fr); } }
.s-quote { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 330px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--slate-2); padding: 32px; }
.s-quote-bg { position: absolute; right: -12px; top: -44px; font: 800 13rem/1 var(--display); color: rgba(255, 255, 255, .035); }
.s-quote-ico { position: relative; }
.s-quote-text { position: relative; margin-top: 32px; font: 500 1.125rem/1.6 var(--body); color: #e7e9e7; }
.s-quote-foot { position: relative; margin-top: 32px; border-top: 1px solid var(--line-2); padding-top: 20px; }
.s-quote-who { margin-top: 8px; font-size: .875rem; font-weight: 700; color: #fff; }
.s-quote-who span { font-weight: 400; color: var(--muted); }
.s-photos { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.s-photos figure { margin: 0; background: var(--slate-2); border: 1px solid var(--line); }
.s-photos img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; display: block; }
.s-photos-hint { display: none; }
/* Desktop lays the cards out in a grid, so there is nothing to swipe. */
.s-swipe { display: none; }

/* ----------------------------------------------------------- difference */
.s-diff { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.s-stats { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; border-top: 1px solid var(--line-2); padding-top: 28px; }
.s-stat-n { font: 800 clamp(3.25rem, 6vw, 5.4rem)/.8 var(--display); letter-spacing: -.05em; color: var(--signal); }
.s-stat-l { margin-top: 12px; font: 700 .75rem/1.3 var(--body); text-transform: uppercase; letter-spacing: .11em; color: var(--muted); }
.s-rows { border-top: 1px solid var(--line-2); }
.s-row { display: grid; grid-template-columns: 4rem 1fr; gap: 24px; border-bottom: 1px solid var(--line-2); padding: 28px 0; }
.s-row-n { font: 700 1.875rem/1 var(--display); color: var(--signal); }
.s-row .s-copy { margin-top: 8px; max-width: 36rem; }

/* ------------------------------------------------------------------- FAQ */
/* On the slate ground like the rest of the page (Stefan, 09-21-2026: "it
   doesn't match the rest of the page"). */
.s-faq { border-top: 1px solid var(--line); }
.s-rule-solo { display: block; width: 2.75rem; height: 3px; background: var(--signal); margin: 0 auto 20px; }
.s-faq .s-h2 { margin: 16px auto 0; }
.s-faq-list { margin-top: 48px; text-align: left; border-top: 1px solid var(--line-2); }
.s-faq-list details { border-bottom: 1px solid var(--line-2); }
.s-faq-list summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font: 600 1.05rem/1.35 var(--body); color: #fff; }
.s-faq-list summary::-webkit-details-marker { display: none; }
.s-faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: 400 28px/1 var(--body); color: var(--signal); }
.s-faq-list details[open] summary::after { content: "–"; }
.s-faq-list details p { padding: 0 0 26px; max-width: 42rem; color: var(--muted); font-size: .95rem; line-height: 1.65; }
/* An answer in several paragraphs: the gap between them is smaller than the
   gap that closes the answer, so the three beats read as one answer. */
.s-faq-list details p + p { padding-top: 0; }
.s-faq-list details p:not(:last-of-type) { padding-bottom: 14px; }

/* ---------------------------------------------------------- application */
.s-apply { border-top: 1px solid var(--line); }
.s-checks { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: .875rem; color: #d8dfdd; }
.s-checks li { display: flex; align-items: flex-start; gap: 12px; }
.s-apply-card { background: #fff; color: var(--paper-ink); border-top: 4px solid var(--signal); padding: 32px; box-shadow: 0 25px 50px rgba(0, 0, 0, .5); }
.s-apply-card .s-h3 { margin-top: 8px; color: var(--paper-ink); }
.s-apply-lines { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; font-size: .9rem; line-height: 1.5; color: #3d4745; }
.s-apply-lines li { position: relative; padding-left: 18px; }
.s-apply-lines li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--signal); }
.s-fine { margin-top: 16px; text-align: center; font-size: .66rem; line-height: 1.6; color: #697370; }

/* ---------------------------------------------------------- credentials */
.s-creds { background: var(--ink-2); border-top: 4px solid var(--signal); padding: 80px 0; }
.s-creds-img { margin: 28px auto 0; width: 100%; max-width: 896px; height: auto; }
.s-creds-lines { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 28px; display: grid; gap: 12px; }
.s-creds-lines p { font-size: .875rem; color: var(--muted); }
.s-creds-lines p.strong { color: #fff; font-weight: 500; }
@media (min-width: 640px) { .s-creds-lines { grid-template-columns: repeat(3, 1fr); text-align: left; } }

/* -------------------------------------------------------------- stories */
.s-stories-sec { border-top: 1px solid var(--line); }
.s-stories-head { border-bottom: 1px solid var(--line); padding: 0 0 48px; }
.s-stories-head .s-h2 { margin: 16px auto 0; }
.s-stories-head .s-copy { margin: 20px auto 0; max-width: 42rem; }
.s-hero-reviews { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.s-reviews-widget { margin-top: 18px; min-height: 120px; }
.s-stories { margin-top: 40px; display: grid; gap: 20px; }
.s-story { position: relative; border: 1px solid var(--line-2); background: var(--slate-2); padding: 24px; }
.s-story-n { position: absolute; right: 20px; top: 12px; font: 800 3rem/1 var(--display); color: rgba(255, 255, 255, .07); }
.s-story-media { display: grid; grid-template-columns: minmax(0, 1.7778fr) minmax(0, .5625fr); gap: 16px; align-items: start; }
.s-story-wide, .s-story-tall { background: #000; border: 1px solid var(--line); }
/* A story with only the vertical clip (no full interview yet). */
.s-story-media-clip { grid-template-columns: minmax(0, 300px); justify-content: center; }
.s-story-body { margin-top: 22px; }
.s-story-body .s-h3 { margin-top: 8px; }
.s-story-copy { margin-top: 12px; max-width: 60rem; color: #e0e4e2; font-size: .95rem; line-height: 1.65; }

/* ---------------------------------------------------------------- footer */
.s-foot { border-top: 1px solid var(--line); background: var(--ink); padding: 40px 0 48px; font-size: .75rem; color: var(--dim); }
.s-foot-in { display: flex; flex-direction: column; gap: 28px; }
.s-foot-logo { width: 168px; height: auto; }
.s-foot-blurb { margin-top: 12px; max-width: 28rem; line-height: 1.6; }
.s-foot-nav { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.s-foot-nav a { font: 700 .68rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #b4c0be; text-decoration: none; }
.s-foot-nav a:hover { color: #fff; }
.s-foot-right { max-width: 36rem; }
.s-foot-legal { margin-top: 8px; line-height: 1.6; }
@media (min-width: 768px) { .s-foot-in { flex-direction: row; align-items: flex-end; justify-content: space-between; } .s-foot-right { text-align: right; } }

/* ------------------------------------------------------------- to the top */
.s-totop { position: fixed; right: 22px; bottom: 22px; width: 50px; height: 50px; border-radius: 50%; border: 0;
  background: var(--signal); color: var(--ink); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45); z-index: 40; }
.s-totop[hidden] { display: none; }

/* ------------------------------------------------------- the application */
.s-apply-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(7, 9, 10, .84); display: flex; align-items: center; justify-content: center; padding: 24px; }
.s-apply-sheet[hidden] { display: none; }
.s-sheet-card { width: min(960px, 100%); height: min(880px, 100%); display: flex; flex-direction: column; background: var(--ink);
  border: 1px solid var(--line-2); border-top: 4px solid var(--signal); box-shadow: 0 40px 90px rgba(0, 0, 0, .65); }
@media (max-width: 720px) { .s-apply-sheet { padding: 0; } .s-sheet-card { width: 100%; height: 100%; border: 0; border-top: 4px solid var(--signal); } }
.s-apply-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px;
  font: 700 .7rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.s-apply-bar button { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid rgba(255, 255, 255, .32); color: #fff;
  font: 800 .66rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 10px 12px; cursor: pointer; }
.s-apply-sheet iframe { flex: 1 1 auto; width: 100%; border: 0; background: var(--ink); }
body.s-locked { overflow: hidden; }

/* ----------------------------------------------------------------- legal */
.s-legal { max-width: 760px; margin: 0 auto; padding: 48px 20px 40px; }
.s-legal .s-h2 { margin-top: 12px; max-width: none; }
.s-legal-date { margin-top: 10px; color: var(--dim); font-size: .8rem; }
.s-legal h2 { margin-top: 28px; font: 700 1.5rem/1.1 var(--display); text-transform: uppercase; color: #fff; }
.s-legal p, .s-legal li { margin-top: 12px; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.s-legal ul, .s-legal ol { padding-left: 22px; }
.s-legal a { color: var(--signal-hover); }
.s-legal b { color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 1023px) {
  .s-wrap { padding: 0 32px; }
}
@media (max-width: 720px) {
  .s-wrap, .s-wrap.s-mid, .s-wrap.s-narrow { padding: 0 20px; }
  .s-sec { padding: 72px 0; }
  /* A shorter bar on a phone. At 74px it was taller than the gap above the
     headline, so the eyebrow ran underneath the logo -- and every pixel it
     costs is a pixel the video and Apply now do not get. */
  .s-top-in { padding-top: 12px; padding-bottom: 12px; }
  .s-logo img { width: 140px; }
  .s-hero { min-height: 0; }
  /* The phone crop is the left of the garage only -- no firefighter, so his
     face never sits behind the headline. Stefan, 09-20-2026: "on the mobile
     version, I don't want to show this guy's face." */
  .s-hero-bg { background-image: url("/static/site/hero-m.jpg"); background-position: center 40%; }
  /* The first screen on a phone, and on Instagram's in-app browser, which is
     the shorter of the two: its own chrome takes a third of the screen, so the
     page gets roughly 390x580 rather than 390x844. Stefan, 09-23-2026: "the
     title and video are not in the same viewpoint on IG/mobile ... this is
     generally what they should be able to see without having to zoom out."
     What must land together is the headline, the video and Apply now.

     It was 1452px tall in a 580px viewport -- Apply now sat at y=945, more
     than a screen and a half down -- because the type is sized off the WIDTH
     and the VSL is square, so at 353px wide it was also 353px tall and ate
     most of the screen on its own.

     So the hero is sized off the HEIGHT as well here: svh is the small
     viewport, the one that stays put while the browser's bars come and go,
     which is what the in-app browser leaves. Each rule keeps a plain
     fallback first for anything that does not know the unit, in which case
     the width-based size still applies and it degrades to what it was. */
  .s-hero-in { padding-top: 68px; padding-bottom: 32px; }
  .s-hero-in { padding-top: max(66px, 8svh); }
  .s-hero-in .s-eyebrow { font-size: .62rem; letter-spacing: .16em; }
  .s-h1 { font-size: clamp(1.7rem, 8vw, 3rem); margin-top: 10px; line-height: .92; }
  .s-h1 { font-size: clamp(1.7rem, min(8vw, 5.2svh), 3rem); }
  .s-lede { margin-top: 12px; font-size: .95rem; line-height: 1.5; }
  .s-hero-row { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  /* The video is square, so capping its WIDTH is what caps its height -- and
     an explicit width, not a max-width, because `margin-inline: auto` takes a
     grid item off `stretch`, and a shrink-to-fit box whose only child is
     width 100% resolves to nothing at all. That collapsed it to 2px.

     The second line gives it what is LEFT once the headline, the sub and
     Apply now have had theirs. A flat fraction of the height does not work at
     both ends, because the fixed parts do not shrink with the screen: 28svh
     fitted a 580px viewport and overshot a 545px one by ten pixels. */
  .s-vsl { width: 300px; max-width: 100%; margin-inline: auto; }
  .s-vsl { width: min(100%, calc(52svh - 150px)); }
  .s-hero-cta { display: grid; gap: 8px; }
  .s-hero-cta .s-btn { width: 100%; }
  .s-btn-cta { padding-block: 13px; }
  .s-btn-quiet { padding-block: 11px; }
  /* Supporting, not the ask: these sit under the fold on a phone so the
     headline, the video and Apply now can be above it. */
  .s-trust { margin-top: 14px; }
  .s-hero-reviews { margin-top: 28px; }
  .s-bar-left { padding-left: 24px; }
  .s-cell { padding: 28px; }
  .s-quote { min-height: 0; padding: 28px; }
  /* On a phone the cards run in three rows that swipe sideways as one block
     (a 2-column grid of 40+ cards was a very long scroll). Each card is a
     little under half the screen so the next one shows, which says "swipe";
     the fade on the right says it too. Stefan, 09-21-2026: "I don't want
     them to have to scroll a super long way ... 2-3 rows of carousels." */
  .s-photos { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(3, auto); grid-auto-columns: 40vw; gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    margin-left: -20px; margin-right: -20px; padding: 0 20px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent); }
  .s-photos::-webkit-scrollbar { display: none; }
  .s-photos figure { scroll-snap-align: start; }
  /* Says the row moves, in the place where the eye already is -- between the
     line about the clients and the clients themselves. Red, spaced and with a
     moving arrow, so it does not read as one more line of the subtext, which
     is what the old caption underneath did. */
  .s-swipe { display: inline-flex; align-items: center; gap: 9px; margin: 16px 0 2px;
    padding: 8px 15px 8px 16px; border: 1px solid color-mix(in srgb, var(--signal) 55%, transparent);
    border-radius: 999px; background: color-mix(in srgb, var(--signal) 12%, transparent);
    color: #fff; font: 700 .72rem/1 var(--body); letter-spacing: .13em; text-transform: uppercase;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: opacity .3s ease, transform .3s ease, background .15s ease; }
  .s-swipe:active { background: color-mix(in srgb, var(--signal) 22%, transparent); }
  .s-swipe-arrow { display: inline-flex; color: var(--signal); animation: sNudge 1.5s ease-in-out infinite; }
  /* Gone once they have swiped: a hint that stays is a nag. */
  .s-swipe.went { opacity: 0; transform: translateY(-4px); pointer-events: none; }
  @keyframes sNudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(5px); } }
  @media (prefers-reduced-motion: reduce) { .s-swipe-arrow { animation: none; } }
  .s-stats { gap: 20px; }
  .s-row { grid-template-columns: 3rem 1fr; gap: 16px; }
  .s-apply-card { padding: 24px; }
  .s-story { padding: 16px; }
  .s-story-media { grid-template-columns: 1fr; }
  .s-story-tall { width: 100%; max-width: 260px; justify-self: center; }
  .s-creds { padding: 64px 0; }
  /* The four phases on a phone: one clean row each -- the glyph on the
     left, the phase, name and line beside it, the "Owns" as a short line of
     words underneath -- instead of four tall centred cards. */
  .s-phase4 { display: grid; grid-template-columns: 60px 1fr; column-gap: 16px; align-items: center; text-align: left; padding: 22px 18px 22px; }
  .s-phase4-ico { grid-row: 1 / span 2; width: 60px; height: 60px; margin: 0; }
  .s-phase4 .s-h3 { margin-top: 4px; font-size: 1.7rem; }
  /* The one-liner and the list run the full width under the glyph, so a
     short line stays one line ("off." and "before." were wrapping alone). */
  .s-phase4 .s-copy { grid-column: 1 / -1; margin: 12px 0 0; max-width: none; font-size: .9rem; text-wrap: balance; }
  /* "Owns" as a bulleted list under its label -- one item per line
     (Stefan, 09-21-2026: "bulleted and listed underneath"). */
  .s-owns { grid-column: 1 / -1; margin-top: 12px; padding-top: 0; border-top: 0; flex-direction: column; align-items: flex-start; gap: 5px; }
  .s-owns span { margin: 0 0 3px; }
  .s-owns b { position: relative; padding-left: 16px; font-size: .9rem; line-height: 1.3; }
  .s-owns b::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
}

/* ---------------------------------------------------------- call booked */
.s-hero-short { min-height: 0; }
.s-booked-in { padding-top: 150px; padding-bottom: 72px; max-width: 1100px; }
.s-booked-in .s-h1 { max-width: 15ch; }
.s-booked-steps { padding-top: 72px; }
.s-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: step; }
.s-step { position: relative; background: var(--slate-2); border: 1px solid var(--line-2); border-top: 3px solid var(--signal); padding: 36px 40px 40px; }
.s-step-head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.s-step-n { font: 800 4.4rem/1 var(--display); color: rgba(255, 255, 255, .09); letter-spacing: -.02em; margin-top: -8px; }
.s-step-head .s-eyebrow { margin-bottom: 8px; }
.s-step-head .s-h2 { text-align: left; margin: 0; }
.s-step-lead { margin-top: 10px; font-size: 1.15rem; font-weight: 600; color: #fff; }
.s-step-copy { margin-top: 18px; max-width: 62ch; }
.s-step-video { margin-top: 28px; border: 1px solid var(--line); background: #000; max-width: 960px; }
.s-step-checks { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 34rem; }
.s-step-checks li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--ink-2); border: 1px solid var(--line); font-size: 1.05rem; font-weight: 600; color: #fff; }
.s-step-links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.s-booked-reviews { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line-2); }
@media (max-width: 720px) {
  .s-booked-in { padding-top: 110px; padding-bottom: 48px; }
  .s-booked-steps { padding-top: 48px; }
  .s-step { padding: 26px 20px 28px; }
  .s-step-head { grid-template-columns: 1fr; gap: 6px; }
  .s-step-n { font-size: 2.6rem; margin-top: 0; }
  .s-step-links .s-btn { width: 100%; }
}
.s-btn-noted { flex-direction: column; align-items: flex-start; gap: 3px; }
.s-btn-noted .s-btn-main { display: inline-flex; align-items: center; gap: .65rem; }
.s-btn-note { display: block; font: 500 .62rem/1.3 var(--body); letter-spacing: .04em; text-transform: none; opacity: .7; }
/* Step two: the invite, drawn as it lands in an inbox. */
.s-step-two { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 24px; }
.s-step-two .s-step-checks { margin-top: 0; }
.s-mail { margin: 0; background: #fff; color: #1f2328; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.s-mail-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 0; }
.s-mail-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--signal); color: #fff; display: grid; place-items: center; font-weight: 700; }
.s-mail-who { display: flex; flex-direction: column; line-height: 1.2; font-size: .85rem; }
.s-mail-who b { font-weight: 700; }
.s-mail-who span { color: #5f6368; font-size: .72rem; }
.s-mail-when { margin-left: auto; color: #5f6368; font-size: .72rem; }
.s-mail-subject { margin: 10px 16px 0; font-size: .92rem; font-weight: 700; line-height: 1.35; }
.s-mail-body { margin: 12px 16px 16px; border: 1px solid #e0e3e7; border-radius: 10px; padding: 14px; background: #f8f9fb; }
.s-mail-title { margin: 0; font-weight: 700; font-size: .92rem; }
.s-mail-line { margin: 6px 0 0; font-size: .82rem; color: #3c4043; }
.s-mail-line.small { margin-top: 12px; font-size: .7rem; color: #5f6368; }
.s-mail-rsvp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: .8rem; color: #3c4043; }
.s-mail-rsvp b, .s-mail-rsvp em { font-style: normal; font-weight: 600; padding: 6px 14px; border-radius: 6px; border: 1px solid #dadce0; background: #fff; }
.s-mail-rsvp b.yes { background: #1a73e8; border-color: #1a73e8; color: #fff; box-shadow: 0 0 0 3px rgba(227, 27, 35, .35); }
.s-mail-yes { position: relative; display: inline-flex; flex-direction: column; align-items: center; margin-top: 22px; }
.s-mail-point { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; color: var(--signal); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; }
.s-mail-rsvp em { margin-top: 22px; }
.s-mail figcaption { padding: 10px 16px 14px; font-size: .72rem; line-height: 1.5; color: #5f6368; border-top: 1px solid #eceff1; }
@media (max-width: 900px) { .s-step-two { grid-template-columns: 1fr; } }
.s-rules { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px; padding: 18px 20px; background: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--signal); max-width: 62ch; }
.s-rules-icon { flex: 0 0 auto; margin-top: 2px; }
.s-rules-title { margin: 0; font: 800 .8rem/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.s-rules-text { margin: 8px 0 0; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.s-booked-cal { padding-top: 56px; padding-bottom: 0; }
.s-cal-box { background: #fff; border: 1px solid var(--line); }
.s-cal-box iframe { display: block; width: 100%; height: 900px; border: 0; background: #fff; }

/* ------------------------------------------------- client onboarding
   The first page somebody sees after they sign, and it wears the same
   clothes as the page that sold them: ink and slate, the one red, square
   corners, Barlow Condensed set tight. Stefan, 09-22-2026 -- "it should
   feel much like the landing page... I think we can make it look a lot
   better than the existing onboarding page." The old one was a stock
   funnel template. */
.s-onb-video { border: 1px solid var(--line-2); border-top: 3px solid var(--signal); background: #000; max-width: 900px; margin: 0 auto; }
.s-onb-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; object-fit: contain; }
.s-onb-video + .s-note { text-align: center; margin-top: 14px; }

/* The two stores, as two slabs rather than two badges from somebody else's
   brand guidelines. */
.s-onb-apps { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.s-onb-app { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 22px; min-width: 190px; text-decoration: none; }
.s-onb-app-lab { font: 800 1.35rem/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.s-onb-app-store { font: 500 .82rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; opacity: .78; }

/* Four walkthroughs. Thumbnails until asked: four embedded players on one
   page is four trackers and a slow first paint on a phone, and these are
   watched one at a time anyway. */
.s-onb-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.s-onb-vid { margin: 0; }
.s-onb-vid figcaption { margin-top: 10px; font: 800 1.1rem/1.2 var(--display); letter-spacing: .01em;
  text-transform: uppercase; color: #fff; }
.s-onb-play, .s-onb-vid iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line-2); background: #000 center/cover no-repeat; }
.s-onb-play { position: relative; cursor: pointer; padding: 0; }
.s-onb-play::after { content: ""; position: absolute; inset: 0; background: rgba(7, 9, 10, .38); transition: background .15s; }
.s-onb-play:hover::after, .s-onb-play:focus-visible::after { background: rgba(7, 9, 10, .18); }
.s-onb-play-ico { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; display: grid; place-items: center; background: var(--signal-btn); color: #fff; }
.s-onb-play:hover .s-onb-play-ico { background: var(--signal-btn-hover); }
.s-onb-vid iframe { border-top: 3px solid var(--signal); }

.s-onb-close { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line-2); text-align: center; }
.s-onb-close .s-h2 { margin: 0 0 12px; }
.s-onb-close .s-copy { margin: 0 auto; max-width: 54ch; }

@media (max-width: 720px) {
  .s-onb-grid { grid-template-columns: 1fr; gap: 22px; }
  .s-onb-app { flex: 1 1 100%; min-width: 0; }
}

/* The welcome email, drawn to match what Trainerize actually sends. White on
   the dark page on purpose: it reads as a screenshot of their inbox without
   being one -- sharp on a phone, readable by a screen reader, and it weighs
   nothing. Stefan asked for "the exact pic of the email", 09-22-2026; this is
   the same picture, made of text. */
.s-onb-mail { margin: 0; background: #fff; color: #202124; border: 1px solid var(--line-2);
  border-top: 3px solid var(--signal); font: 400 .92rem/1.5 var(--body); max-width: 560px; }
.s-onb-mail-bar { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; }
.s-onb-mail-subj { font-size: 1.12rem; color: #202124; }
.s-onb-mail-tag { font-size: .72rem; background: #e8eaed; color: #5f6368; padding: 2px 7px; }
.s-onb-mail-from { display: flex; align-items: center; gap: 12px; padding: 4px 18px 14px; font-size: .86rem; }
.s-onb-mail-av { width: 34px; height: 34px; border-radius: 50%; background: #dadce0; flex: 0 0 auto; }
.s-onb-mail-addr { color: #5f6368; }
.s-onb-mail-to { display: block; color: #5f6368; }
.s-onb-mail-pre { margin: 0; padding: 9px 18px; background: #eceff1; color: #5f6368; font-size: .82rem; text-align: center; }
.s-onb-mail-card { padding: 22px 20px 26px; }
.s-onb-mail-card p { margin: 0 0 14px; }
.s-onb-mail-h { font-size: 1.22rem; line-height: 1.3; color: #202124; }
/* The button as it appears in the email -- Trainerize's yellow, not ours.
   It is a picture of a button, not a button: the real one is in their inbox. */
.s-onb-mail-btn { background: #fbbc2e; color: #202124; text-align: center; font-weight: 700;
  padding: 15px 18px; margin-bottom: 18px !important; }
.s-onb-mail-stores { display: flex; gap: 10px; }
.s-onb-mail-stores span { background: #202124; color: #fff; font-size: .72rem; font-weight: 600;
  padding: 8px 14px; letter-spacing: .02em; }
.s-onb-mail-sig { color: #5f6368; margin-bottom: 0 !important; }
@media (max-width: 720px) { .s-onb-mail { max-width: 100%; } .s-onb-mail-card { padding: 18px 16px 22px; } }

/* The onboarding hero. Stefan, 09-22-2026: not the landing page's stock
   photograph -- "more PURSUIT branding". So the crest itself, set large and
   low on the right where the existing fade already darkens toward the text,
   with a red bloom behind it. A welcome page does not need to sell anybody a
   gym: they have already bought. It needs to look like the thing they joined. */
.s-onb-hero .s-hero-bg {
  background: radial-gradient(60% 70% at 72% 45%, rgba(227, 27, 35, .22), transparent 70%),
              url("/static/site/logo.png") 74% center / min(30rem, 46%) no-repeat,
              var(--ink);
  opacity: .9;
}
/* The photo's fade exists to lift text off a busy picture; over a crest it
   only hides it, so the right-hand end is lighter here. */
.s-onb-hero .s-hero-fade {
  background: linear-gradient(to right, var(--ink) 0%, rgba(7, 9, 10, .88) 42%, rgba(7, 9, 10, .35) 100%),
              linear-gradient(to top, var(--ink) 0%, transparent 55%, rgba(7, 9, 10, .25) 100%);
}
.s-onb-hero .s-hero-tint { display: none; }
@media (max-width: 720px) {
  /* On a phone the crest sits behind the words rather than beside them, so it
     drops back to a watermark. */
  .s-onb-hero .s-hero-bg {
    background: radial-gradient(70% 50% at 50% 30%, rgba(227, 27, 35, .18), transparent 70%),
                url("/static/site/logo.png") center 18% / min(19rem, 70%) no-repeat,
                var(--ink);
    opacity: .5;
  }
  .s-onb-hero .s-hero-fade {
    background: linear-gradient(to top, var(--ink) 0%, rgba(7, 9, 10, .72) 45%, rgba(7, 9, 10, .55) 100%);
  }
}

/* --------------------------------------------------- onboarding: the hub step
   The sign-in screen drawn rather than screenshotted, the same call the
   welcome email above it gets: sharp on a phone, readable by a screen reader,
   weighs nothing, and cannot go stale the way a PNG of a page we keep
   changing would. Dark, because the hub is. */
.s-onb-hub { margin: 0; border: 1px solid rgba(255,255,255,.14); background: #07090a;
  overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.5); }
.s-onb-hub-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: #101517; border-bottom: 1px solid rgba(255,255,255,.1);
  font: 600 .72rem/1 var(--body); letter-spacing: .04em; color: #8d9699; }
.s-onb-hub-bar::before { content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: #2c3538; flex: 0 0 auto; }
.s-onb-hub-body { padding: 20px 18px 22px; }
.s-onb-hub-crest { display: flex; justify-content: center; padding-bottom: 16px; }
.s-onb-hub-crest img { width: 150px; height: auto; opacity: .95; }
.s-onb-hub-h { margin: 0; font: 800 1.7rem/.95 var(--display); text-transform: uppercase;
  letter-spacing: -.03em; color: #f4f3ee; }
.s-onb-hub-sub { margin: 8px 0 16px; font-size: .82rem; line-height: 1.5; color: #9aa3a6; }
.s-onb-hub-lab { margin: 12px 0 5px; font: 700 .62rem/1 var(--body); letter-spacing: .16em;
  text-transform: uppercase; color: #7d868a; }
.s-onb-hub-field { display: block; height: 38px; border: 1px solid rgba(255,255,255,.16);
  background: #0b0e0f; }
.s-onb-hub-hint { margin: 6px 0 0; font-size: .72rem; color: #6f797c; }
.s-onb-hub-btn { margin: 18px 0 0; padding: 11px; text-align: center; background: var(--signal);
  color: #fff; font: 700 .78rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
/* The line they are actually here for. */
.s-onb-hub-first { margin: 16px 0 0; text-align: center; font: 700 .8rem/1.4 var(--body);
  color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.s-onb-hub-cap { margin-top: 10px; }
.s-onb-go { margin-top: 4px; }

/* --------------------------------------------- onboarding: how far they are */
.s-onb-prog { margin-top: 26px; max-width: 460px; }
.s-onb-bar { height: 5px; background: rgba(255,255,255,.12); overflow: hidden; }
.s-onb-bar i { display: block; height: 100%; width: 0; background: var(--signal);
  transition: width .3s cubic-bezier(.2,.8,.3,1); }
.s-onb-prog-t { margin: 10px 0 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.s-onb-prog-t b { color: #fff; font-weight: 700; }
.s-onb-prog-n { display: block; font-size: .74rem; color: var(--muted); opacity: .75; }

.s-onb-tick { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 10px 16px 10px 12px; border: 1px solid rgba(255,255,255,.2); background: transparent;
  color: #fff; font: 700 .76rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.s-onb-tick:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.04); }
.s-onb-tick-box { display: grid; place-items: center; width: 22px; height: 22px;
  border: 1px solid rgba(255,255,255,.3); color: transparent; flex: 0 0 auto;
  transition: background .15s ease, border-color .15s ease, color .15s ease; }
.s-onb-tick.on .s-onb-tick-box { background: var(--signal); border-color: var(--signal); color: #fff; }
.s-onb-tick.on { border-color: color-mix(in srgb, var(--signal) 55%, transparent); }
/* A finished step steps back rather than disappearing -- they may want to
   read it again, and a collapsing page loses your place. */
.s-step-done .s-step-head, .s-step-done .s-step-copy { opacity: .62; }

/* ----------------------------------- onboarding: the hub inside the app
   Stefan's own screenshot of the Pursuit Coaching App home screen, with the
   arrow drawn over it rather than burned in -- the words stay sharp at any
   size, a screen reader gets them, and the picture can be swapped without
   anybody redrawing an annotation. The arrow's position is a percentage of
   the image, measured off the shortcut tile, so it holds at every width. */
.s-onb-inapp { display: grid; grid-template-columns: 1fr minmax(0, 300px); gap: 28px;
  align-items: center; margin-top: 32px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12); }
.s-onb-shot { position: relative; margin: 0; }
.s-onb-shot img { display: block; width: 100%; height: auto;
  border: 1px solid rgba(255,255,255,.16); }
.s-onb-shot figcaption { margin-top: 9px; }
.s-onb-point { position: absolute; left: 30.5%; top: 76.6%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 7px; color: var(--signal);
  font: 800 .78rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap; }
.s-onb-point b { padding: 5px 9px; background: var(--signal); color: #fff; font-weight: 800; }
@media (max-width: 760px) {
  .s-onb-inapp { grid-template-columns: 1fr; gap: 18px; }
  /* On a phone the picture is the width of the page, so the arrow and its
     label sit under the tile rather than beside it -- there is no room to
     the right of a full-width screenshot. */
  .s-onb-shot { max-width: 320px; margin-inline: auto; }
  .s-onb-point { font-size: .7rem; }
}

/* ------------------------------------------------- Mission Ready Core, self-serve
   The replacement for the GoHighLevel sign-up funnel. Four terms side by side,
   each showing what it saves against the month-to-month rate -- the saving is
   the reason the ladder exists, so it is on the card and not in the small print. */
.s-core-hero { padding-top: 96px; padding-bottom: 88px; background: var(--ink); border-bottom: 1px solid var(--line); }
.s-core-hero-in { text-align: left; }
.s-core-hero .s-h1 { margin-top: 18px; max-width: 18ch; }
.s-core-jump { margin-top: 34px; }

.s-core-cells { grid-template-columns: repeat(3, 1fr); }
.s-core-steps { grid-template-columns: repeat(3, 1fr); }
.s-core-plans { background: var(--ink); }

.s-plans { margin-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); }
.s-plan { position: relative; display: flex; flex-direction: column; background: var(--ink-2); padding: 34px 26px 28px; }
/* The recommended term is lifted rather than recoloured: the red is the
   brand's, and spending it on one card of four makes the other three look
   broken. */
.s-plan.is-best { background: var(--slate); box-shadow: inset 0 3px 0 0 var(--signal); }
.s-plan-flag { position: absolute; top: 0; right: 0; background: var(--signal-btn); color: #fff;
  font: 700 .6rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; padding: 7px 10px; }
.s-plan-name { font: 700 1.5rem/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; color: #fff; margin: 0; }

.s-plan-price { margin: 22px 0 0; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.s-plan-amt { font: 800 3rem/.9 var(--display); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.s-plan-per { font-size: .82rem; color: var(--dim); }
.s-plan-total { margin: 12px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.5; }
.s-plan-total strong { color: var(--text); font-variant-numeric: tabular-nums; }

.s-plan-save { margin: 16px 0 24px; display: flex; align-items: center; gap: .5rem; padding-top: 16px;
  border-top: 1px solid var(--line); font-size: .85rem; font-weight: 600; color: #7fd6a8; line-height: 1.45; }
.s-plan-save svg { flex: 0 0 auto; }
.s-plan-save-none { color: var(--dim); font-weight: 400; }

/* Pushed to the bottom so four cards of different heights still line their
   buttons up. One rule, not two: `.s-plan .s-btn` outranks `.s-plan-btn` on
   specificity, so setting the gap there quietly cancelled the auto and the
   cards stopped agreeing. The gap is the save line's own bottom margin. */
.s-plan .s-btn { margin-top: auto; width: 100%; }
.s-plan.is-best .s-btn-cta { box-shadow: 0 0 0 1px var(--signal-hover); }

.s-core-terms { background: var(--ink-2); border-top: 1px solid var(--line); padding: 88px 0; }
.s-terms { margin: 32px 0 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.s-term { background: var(--ink-2); padding: 22px 26px; }
.s-term dt { font: 700 1.05rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.s-term dd { margin: 9px 0 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.s-terms-foot { margin-top: 20px; display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--dim); }

@media (max-width: 1100px) {
  .s-plans { grid-template-columns: repeat(2, 1fr); }
  .s-core-cells, .s-core-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .s-plans { grid-template-columns: 1fr; }
  .s-core-cells, .s-core-steps { grid-template-columns: 1fr; }
  .s-core-hero { padding-top: 64px; padding-bottom: 60px; }
  .s-plan { padding: 28px 22px 24px; }
  .s-plan-amt { font-size: 2.6rem; }
}

/* Core and Basics: the self-checkout pages. The reviews and the video sit
   between the hero and the offer, the way they do on the home page. */
.s-core-reviews { padding-top: 0; }
.s-core-reviews .s-reviews-widget { margin-top: 14px; }
.s-core-vsl { padding-top: 18px; padding-bottom: 6px; }
.s-core-vsl .s-vsl { margin: 0 auto; }

/* The checkout overlay. Stripe's own form, in Stripe's own frame, laid over
   the page somebody was reading -- Stefan, 09-29-2026: "I prefer the card to
   just pop up and the card to lay over." */
.co-open, .co-open body { overflow: hidden; }

.co-sheet { position: fixed; inset: 0; z-index: 9000; display: flex;
            align-items: flex-end; justify-content: center; }
@media (min-width: 720px) { .co-sheet { align-items: center; } }

.co-back { position: absolute; inset: 0; background: rgba(4, 6, 9, .78);
           backdrop-filter: blur(3px); animation: coFade .18s ease both; }

.co-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 44px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  animation: coUp .22s cubic-bezier(.2, .8, .3, 1) both;
}
@media (min-width: 720px) {
  .co-panel { border-radius: 16px; padding: 46px 20px 22px; }
}

.co-x {
  position: absolute; top: 8px; right: 10px;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: #eef0f3; color: #10131a;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.co-x:hover { background: #e2e5ea; }
.co-x:focus-visible { outline: 2px solid var(--signal, #e31b23); outline-offset: 2px; }

.co-wait { padding: 60px 0; text-align: center; color: #6b7280; font-size: 14px; }

@keyframes coFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes coUp { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }