/* Buyer-routed Academy public site refresh. The legacy sheet remains available
   to the preserved deep product tour and privacy page. */

.page-refresh {
  --refresh-ink: #20242a;
  --refresh-muted: #616a73;
  --refresh-paper: #f7f8fa;
  --refresh-warm: #f3f0e9;
  --refresh-green-soft: #d9fbe0;
  --refresh-rule: #d9dde2;
  background: var(--refresh-paper);
}

.page-refresh .wrap {
  width: min(100% - 48px, 1320px);
}

/*
 * Big screens got nothing.
 *
 * The measure was capped at 1320px with no breakpoint above it, so a 1080p, a
 * 1440p and a 4K screen all rendered every product capture at exactly the same
 * CSS size — the hero dashboard at 683px, a full-width figure at 736px. The
 * captures are 2880px wide, so that is the app's own interface displayed at
 * about a quarter scale: a 14px label lands at 3.6px. It reads as blur, but
 * nothing is being resampled badly — it is simply too small to be legible, and
 * on a 4K screen it also occupied barely a third of the width.
 *
 * Text does not want a wider measure, so the copy columns keep their own
 * max-widths; this only lets the container — and therefore the pictures inside
 * it — use the screen it is actually on.
 */
@media (min-width: 1600px) {
  .page-refresh .wrap {
    width: min(100% - 72px, 1520px);
  }
}

@media (min-width: 2100px) {
  .page-refresh .wrap {
    width: min(100% - 96px, 1780px);
  }
}

/* A true 4K viewport — an unscaled 32" panel or a TV — otherwise left the
   measure sitting in the middle third of the screen. Text keeps its own
   max-widths, so this widens the pictures, not the prose. */
@media (min-width: 2600px) {
  .page-refresh .wrap {
    width: min(100% - 120px, 2100px);
  }
}

/* The long-form tour and privacy page keep their established desktop measure
   while sharing the refreshed header and purpose-built phone navigation. */
.page-refresh.page-legacy .wrap {
  width: min(100% - 40px, 1240px);
}

.page-refresh h1,
.page-refresh h2,
.page-refresh h3 {
  text-wrap: balance;
}

.page-refresh .eyebrow {
  margin-bottom: 20px;
  color: var(--ct-green-deep);
  font: 600 11px/1.4 var(--ct-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--refresh-ink);
  font: 600 14px/1.4 var(--ct-font-display);
  text-decoration: underline;
  text-decoration-color: var(--ct-green-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.text-link:hover {
  color: var(--ct-green-deep);
  text-decoration-thickness: 2px;
}

/* Header */

.page-refresh .nav-header {
  border-bottom: 1px solid var(--refresh-rule);
  background: rgba(247, 248, 250, .96);
}

.nav-shell {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 28px;
  align-items: center;
  min-height: 76px;
  padding-block: 10px;
}

.page-refresh .product-brand {
  grid-area: auto;
  opacity: 1;
}

.page-refresh .product-brand img {
  width: 118px;
}

.page-refresh .product-brand span {
  display: none;
  font-size: 13px;
  letter-spacing: .08em;
}

.main-nav {
  display: flex;
  gap: clamp(16px, 2.2vw, 32px);
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.main-nav a,
.nav-signin {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--refresh-muted);
  font: 500 13px/1.4 var(--ct-font-text);
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a[aria-current="page"],
.nav-signin:hover {
  color: var(--refresh-ink);
}

.main-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--ct-green-mid);
  text-underline-offset: 7px;
}

.nav-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.nav-signin {
  color: var(--refresh-ink);
  font-weight: 600;
}

/* EN/NL language toggle — shares .nav-signin type but reads as a quiet chip,
   and must stay visible at every width (its .nav-signin base is hidden on
   narrow screens). */
.nav-lang {
  min-height: 34px;
  padding: 2px 10px;
  border: 1px solid var(--ct-hairline, #e1e4e8);
  border-radius: var(--ct-pill, 999px);
  font: 600 11.5px/1.3 var(--ct-font-mono);
  letter-spacing: .08em;
}

.nav-toggle,
.mobile-nav-signin {
  display: none;
}

/* The in-rail sign-in is a mobile-only affordance. Without this, the higher
   specificity of `.main-nav a` above re-shows it on desktop, duplicating the
   sign-in link next to the button. The max-width:620px rule re-enables it. */
.main-nav .mobile-nav-signin {
  display: none;
}

.nav-toggle {
  border: 1px solid var(--refresh-rule);
  border-radius: 50%;
  background: #fff;
  color: var(--refresh-ink);
}

.nav-toggle:focus-visible {
  outline: 3px solid rgba(37, 192, 72, .32);
  outline-offset: 2px;
}

/* Home hero */

.home-hero {
  position: relative;
  overflow: clip;
  padding: clamp(26px, 3vw, 42px) 0 0;
  background:
    radial-gradient(circle at 92% 5%, rgba(97, 237, 106, .12), transparent 28%),
    linear-gradient(180deg, #fbfbfa 0%, var(--refresh-paper) 100%);
}

.home-brand-track {
  height: clamp(118px, 18vh, 148px);
  margin-bottom: clamp(10px, 1.8vh, 20px);
}

.page-home .hero-brand img {
  width: min(56vw, 540px);
}

.home-hero__grid {
  display: grid;
  /* The product side carries the argument, so it gets the room — but not so
     much that the headline has to wrap into a column. */
  grid-template-columns: minmax(420px, .95fr) minmax(560px, 1.2fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: center;
}

.home-hero__copy {
  position: relative;
  z-index: 2;
  padding-bottom: 56px;
}

.home-hero h1 {
  max-width: 740px;
  margin-bottom: 22px;
  font-size: clamp(48px, 5vw, 72px);
  letter-spacing: -.055em;
  line-height: .98;
}

.home-hero__lede {
  max-width: 660px;
  margin-bottom: 24px;
  color: var(--refresh-muted);
  font-size: clamp(18px, 1.65vw, 23px);
  line-height: 1.48;
}

.home-hero .button-row {
  margin-bottom: 14px;
}

.demo-note {
  max-width: 540px;
  color: var(--ct-text-tertiary);
  font: 500 12px/1.6 var(--ct-font-mono);
}

.hero-product {
  position: relative;
  /*
   * One variable drives the whole composition.
   *
   * The phones used to be positioned from the FIGURE's bottom while the
   * browser frame had its own height, so growing the figure tore the two
   * apart — the phones slid down the page and landed on the headline. They
   * are both derived from the window height now, so the fan cannot detach
   * from the screen it is meant to be sitting on.
   */
  --hero-window: clamp(360px, 26vw, 620px);
  min-height: calc(var(--hero-window) + 250px);
  margin: 0;
  padding-bottom: 62px;
}

.hero-browser {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  /*
   * House style, arrived at by looking at what the best product sites
   * actually ship rather than by taste.
   *
   * Linear, Attio, Vercel and Railway all frame product UI the same way: a
   * hairline INSET shadow instead of a border and a drop shadow, corners
   * rounded on the top only, and the panel bleeding off the bottom behind a
   * fade. None of them draw browser chrome or a device body. The old
   * treatment — 1px border plus a 30/80px drop shadow — is what a screenshot
   * in a slide deck looks like; this is what a screenshot in a product page
   * looks like.
   */
  border: 0;
  border-radius: 12px 12px 0 0;
  background: #eef1f4;
  box-shadow: inset 0 0 0 1px rgba(27, 34, 39, .13), 0 24px 60px rgba(27, 34, 39, .10);
  transform: rotate(-1.1deg);
  /* Fade, don't shrink: the panel runs past its frame and dissolves rather
     than being scaled down further to fit. */
  mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
}

.evidence-bar {
  display: flex;
  min-height: 36px;
  padding: 8px 12px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d8dce1;
  background: #fff;
  color: #69727b;
  font: 500 9px/1 var(--ct-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-browser > img {
  /*
   * Zoomed, not shrunk.
   *
   * At 100% the whole 2880px capture was squeezed into the column, so the
   * app's own interface rendered at about a quarter scale and nothing in it
   * could be read. Overflowing the frame shows the left portion — sidebar,
   * greeting, the Needs You strip and the first lessons — at half again the
   * size, which is the difference between a picture of software and a picture
   * you can actually see software in.
   */
  display: block;
  width: 156%;
  max-width: none;
  /* The frame is a fixed window; the image overflows INSIDE it. Driving the
     height from the image's own aspect-ratio instead let the zoom push the
     browser out of the hero and under the section below it. */
  height: var(--hero-window);
  object-fit: cover;
  object-position: top left;
}

.hero-phone {
  position: absolute;
  z-index: 3;
  /* Overlapping the lower half of the browser window, whatever size it is. */
  top: calc(var(--hero-window) * .46);
  overflow: hidden;
  /* Proportional to the hero column, not a fixed 178px, so the fan grows with
     the screen instead of shrinking into it. */
  width: clamp(178px, 27%, 310px);
  aspect-ratio: 430 / 932;
  border: 6px solid #20242a;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 46px rgba(27, 34, 39, .22);
}

.hero-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-phone-rail {
  display: contents;
}

.hero-phone-label {
  display: none;
}

.hero-phone--coach {
  right: 22%;
  transform: rotate(1.25deg);
}

.hero-phone--member {
  right: 1.2%;
  top: calc(var(--hero-window) * .52);
  transform: rotate(2.25deg);
}

/* A third phone joins the hero rail so the "Members book courts" line in the
   proof strip below has a picture too (2026-08-14). It sits furthest left and
   leans the other way, so the three read as a fan rather than a stack. */
.hero-phone--book {
  right: 43%;
  top: calc(var(--hero-window) * .40);
  transform: rotate(-1.25deg);
}

.hero-product figcaption {
  position: absolute;
  bottom: 5px;
  left: 0;
  color: #626a73;
  font: 500 12.5px/1.5 var(--ct-font-text);
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 18px;
  border-top: 1px solid var(--refresh-rule);
  border-bottom: 1px solid var(--refresh-rule);
  background: rgba(255, 255, 255, .66);
}

.proof-strip > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 3px 10px;
  min-height: 112px;
  padding: 24px;
  border-right: 1px solid var(--refresh-rule);
}

.proof-strip > div:last-child {
  border-right: 0;
}

.proof-strip span {
  grid-row: span 2;
  color: var(--ct-green-deep);
  font: 600 10px/1.6 var(--ct-font-mono);
}

.proof-strip strong {
  font: 600 14px/1.35 var(--ct-font-display);
}

.proof-strip small {
  color: var(--refresh-muted);
  font-size: 12px;
  line-height: 1.45;
}

.validation-section {
  background:
    linear-gradient(135deg, rgba(203, 249, 218, .32), transparent 52%),
    #fff;
}

.validation-note {
  margin-top: 20px;
  color: #626a73;
  font: 600 12px/1.55 var(--ct-font-mono);
  letter-spacing: .02em;
}

/* Shared sections */

.refresh-section {
  padding: clamp(84px, 10vw, 148px) 0;
  border-bottom: 1px solid var(--refresh-rule);
}

.section-intro {
  max-width: 790px;
  margin-bottom: 56px;
}

.section-intro--wide {
  max-width: 980px;
}

.section-intro h2,
.split-heading h2,
.price-preview h2,
.founder-preview h2,
.refresh-final h2 {
  margin-bottom: 22px;
  font-size: clamp(39px, 4.8vw, 68px);
  letter-spacing: -.05em;
  line-height: 1;
}

.section-intro > p:last-child,
.split-heading > div > p,
.price-preview__inner > div > p,
.founder-preview__grid > div > p,
.refresh-final__inner > div > p {
  max-width: 720px;
  color: var(--refresh-muted);
  font-size: 18px;
  line-height: 1.55;
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
  margin-bottom: 58px;
}

.split-heading > .eyebrow {
  padding-top: 8px;
}

/* Problem */

.problem-section {
  background: var(--refresh-warm);
}

.handoff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #cec9bd;
  border-bottom: 1px solid #cec9bd;
}

.handoff-grid article {
  min-height: 245px;
  padding: 32px 30px;
  border-right: 1px solid #cec9bd;
}

.handoff-grid article:last-child {
  border-right: 0;
}

.handoff-grid span,
.workflow-card__label,
.solution-route__status,
.trust-grid article > span {
  display: block;
  margin-bottom: 42px;
  color: var(--ct-green-deep);
  font: 600 10px/1.4 var(--ct-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.handoff-grid h3 {
  max-width: 330px;
  margin: 0;
  font-size: clamp(23px, 2.1vw, 31px);
  line-height: 1.16;
}

/* Mechanism */

.mechanism-section {
  background: #fbfcfb;
}

.record-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--refresh-rule);
  border-radius: 8px;
  background: var(--refresh-rule);
  box-shadow: var(--ct-shadow);
}

.record-core {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  min-height: 210px;
  padding: 48px;
  align-content: center;
  justify-items: center;
  background: var(--refresh-ink);
  color: #fff;
  text-align: center;
}

.record-core span {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: var(--ct-pill);
  background: var(--ct-green);
  color: #162119;
  font: 600 10px/1.3 var(--ct-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.record-core strong {
  font: 600 clamp(24px, 3vw, 40px)/1.15 var(--ct-font-display);
  letter-spacing: -.025em;
}

.record-core small {
  color: #bdc3c9;
  font: 400 13px/1.5 var(--ct-font-mono);
}

.record-map article {
  position: relative;
  min-height: 210px;
  padding: 34px;
  background: #fff;
}

.record-map article::before {
  position: absolute;
  top: -18px;
  left: 50%;
  width: 36px;
  height: 36px;
  border: 1px solid var(--refresh-rule);
  border-radius: 50%;
  background: #fff;
  color: var(--ct-green-deep);
  content: "↓";
  font: 600 17px/34px var(--ct-font-mono);
  text-align: center;
  transform: translateX(-50%);
}

.record-map article span {
  display: block;
  margin: 14px 0 23px;
  color: var(--ct-green-deep);
  font: 600 10px/1.4 var(--ct-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.record-map article h3 {
  margin-bottom: 12px;
  font-size: 30px;
}

.record-map article p {
  color: var(--refresh-muted);
  line-height: 1.5;
}

/* Workflows */

.workflow-section {
  background: #eef0f2;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.workflow-card {
  position: relative;
  display: block;
  /* These carry a full app screenshot each; at the old size the UI inside was
     unreadable, which made three cards look like three grey rectangles. */
  min-height: clamp(520px, 34vw, 720px);
  overflow: hidden;
  border: 1px solid #d6dade;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: translate .28s cubic-bezier(.2, .7, .2, 1), border-color .28s ease, box-shadow .28s ease;
}

.workflow-grid figure {
  overflow: hidden;
  margin: 0;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid #d6dade;
  background: #edf0f2;
}

.workflow-grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform .4s ease;
}

.workflow-card:hover figure img,
.workflow-card:focus-visible figure img {
  transform: scale(1.018);
}

.workflow-card > div {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 28px;
}

.workflow-card__label {
  margin-bottom: 28px;
}

.workflow-grid h3 {
  margin-bottom: 16px;
  font-size: 28px;
  line-height: 1.12;
}

.workflow-grid p {
  color: var(--refresh-muted);
  line-height: 1.55;
}

.workflow-card__cta {
  display: flex;
  margin-top: auto;
  padding-top: 28px;
  align-items: center;
  justify-content: space-between;
  color: var(--refresh-ink);
  font: 600 12px/1.4 var(--ct-font-display);
  letter-spacing: .02em;
}

.workflow-card__cta > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #cfd4d9;
  border-radius: 50%;
  color: var(--ct-green-deep);
  font: 600 17px/1 var(--ct-font-mono);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), border-color .28s ease, background-color .28s ease;
}

.workflow-card:hover,
.workflow-card:focus-visible {
  translate: 0 -6px;
  border-color: rgba(24, 126, 57, .52);
  box-shadow: 0 18px 34px rgba(27, 34, 39, .12);
}

.workflow-card:focus-visible {
  outline: 3px solid rgba(24, 126, 57, .26);
  outline-offset: 4px;
}

.workflow-card:hover .workflow-card__cta > span,
.workflow-card:focus-visible .workflow-card__cta > span {
  border-color: var(--ct-green-deep);
  background: var(--ct-green-deep);
  color: #fff;
  transform: translateX(4px);
}

.reveal-armed .workflow-card.is-in .workflow-card__cta > span {
  animation: workflow-card-cue 1.2s cubic-bezier(.2, .7, .2, 1) .3s 2;
}

@keyframes workflow-card-cue {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* Solutions */

.solutions-section {
  background: #f9faf9;
}

.solution-routes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.solution-route {
  position: relative;
  display: grid;
  min-height: clamp(600px, 40vw, 820px);
  padding: 0;
  grid-template-rows: auto minmax(0, 1fr) minmax(260px, 30%);
  overflow: hidden;
  border: 1px solid var(--refresh-rule);
  border-radius: 8px;
  color: var(--refresh-ink);
  text-decoration: none;
  isolation: isolate;
  transition: border-color .25s ease, translate .25s ease, box-shadow .25s ease;
}

.solution-route--clubs {
  background: linear-gradient(135deg, #e0fbe5 0%, #f7fbf7 64%);
}

.solution-route--programs {
  background: linear-gradient(135deg, #f2eee5 0%, #fbfaf7 64%);
}

/* Managed — the third route tile, full-width under clubs/programs, in the
   route's graphite family. Anatomy and animation identical to the others. */
.solution-route--managed {
  grid-column: 1 / -1;
  min-height: 480px;
  background: linear-gradient(135deg, #e6e9ed 0%, #f7f8fa 64%);
}

.solution-route--managed .solution-route__media {
  max-height: 260px;
}


.solution-route.is-open {
  border-color: #b8c0c7;
  box-shadow: 0 16px 38px rgba(31, 35, 40, .08);
  color: var(--refresh-ink);
  translate: 0 -4px;
}

.solution-route:focus-visible {
  translate: 0 -4px;
  outline: 3px solid rgba(24, 126, 57, .26);
  outline-offset: 4px;
}

.solution-route__head {
  position: relative;
  z-index: 5;
  display: flex;
  min-width: 0;
  padding: 30px 34px 0;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.route-lockup {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
  color: var(--refresh-ink);
  white-space: nowrap;
}

.route-lockup img {
  width: 126px;
  height: auto;
}

.route-lockup__label {
  padding-left: 13px;
  border-left: 1px solid rgba(31, 35, 40, .16);
  color: var(--refresh-muted);
  font: 500 19px/1.2 var(--ct-font-display);
  letter-spacing: -.01em;
}

.solution-route__status {
  --route-join-x: 0px;
  --route-join-y: 0px;
  --route-join-scale: 1;
  position: relative;
  flex: 0 1 auto;
  margin: 0;
  color: var(--refresh-ink);
  font: 500 15px/1.2 var(--ct-font-display);
  letter-spacing: -.01em;
  text-align: right;
  text-transform: none;
  transform-origin: center;
  transition: color .24s ease, transform .26s cubic-bezier(.16, .84, .3, 1);
}

.solution-route__status::before {
  position: absolute;
  top: 50%;
  left: -13px;
  width: 1px;
  height: 1.2em;
  background: rgba(31, 35, 40, .2);
  content: "";
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .16s ease;
}

.solution-route__head .route-lockup img {
  --route-join-x: 0px;
  --route-join-y: 0px;
  --route-join-scale: 1;
  transform-origin: center;
  transition: transform .26s cubic-bezier(.16, .84, .3, 1);
}

.solution-route.is-route-join-active .solution-route__head .route-lockup img,
.solution-route.is-route-join-active .solution-route__status {
  transform: translate3d(var(--route-join-x), var(--route-join-y), 0) scale(var(--route-join-scale));
}

.solution-route.is-route-join-active .solution-route__status {
  color: var(--refresh-muted);
}

.solution-route.is-route-join-active .solution-route__status::before {
  opacity: 1;
}

.solution-route__copy {
  position: relative;
  z-index: 1;
  display: flex;
  padding: 34px 34px 26px;
  flex-direction: column;
}

.solution-route h3 {
  max-width: 480px;
  margin: 0 0 18px;
  font-size: clamp(35px, 3.5vw, 50px);
  letter-spacing: -.045em;
}

.solution-route p {
  position: relative;
  z-index: 1;
  max-width: 500px;
  color: var(--refresh-muted);
  font-size: 17px;
  line-height: 1.5;
}

.solution-route strong {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 22px;
  font: 600 14px/1.4 var(--ct-font-display);
}

.solution-route__media {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0;
  border-top: 1px solid var(--refresh-rule);
  background: #edf0f2;
}

.solution-route__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: filter .35s ease, opacity .35s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.solution-route.is-open .solution-route__media img,
.solution-route:focus-visible .solution-route__media img {
  transform: scale(1.025);
}

.solution-route__media figcaption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 7px 9px;
  border: 1px solid rgba(31, 35, 40, .12);
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  color: #626a73;
  font: 500 9px/1.35 var(--ct-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.solution-route__head,
.solution-route__copy,
.solution-route__media figcaption {
  transition: filter .28s ease, opacity .28s ease, transform .45s cubic-bezier(.2, .75, .2, 1);
}

.solution-route__curtain {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  overflow: hidden;
  padding: 38px;
  align-items: center;
  pointer-events: none;
  transform: translate3d(0, 101%, 0);
  transition: transform .46s cubic-bezier(.16, .84, .3, 1);
}

.solution-route--clubs .solution-route__curtain {
  background:
    linear-gradient(rgba(23, 126, 57, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 126, 57, .1) 1px, transparent 1px),
    linear-gradient(145deg, #c9f7d1, #f1fbf3 72%);
  background-size: 72px 72px, 72px 72px, auto;
}

.solution-route--programs .solution-route__curtain {
  background:
    radial-gradient(circle at 78% 26%, rgba(205, 158, 69, .2) 0 5px, transparent 6px),
    linear-gradient(rgba(133, 110, 70, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(133, 110, 70, .08) 1px, transparent 1px),
    linear-gradient(145deg, #eee5d6, #fbf8f1 72%);
  background-size: auto, 88px 54px, 88px 54px, auto;
}

.solution-route--managed .solution-route__curtain {
  background:
    linear-gradient(rgba(32, 36, 42, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 36, 42, .08) 1px, transparent 1px),
    linear-gradient(145deg, #dfe3e8, #f4f5f7 72%);
  background-size: 84px 60px, 84px 60px, auto;
}

.solution-route__curtain::before {
  position: absolute;
  inset: 12% 8%;
  border: 1px solid rgba(31, 35, 40, .14);
  border-radius: 999px;
  content: "";
  transform: rotate(-8deg) scale(.9);
  transition: transform .8s cubic-bezier(.16, .84, .3, 1) .08s;
}

.solution-route__curtain-content {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 440px;
  gap: 24px;
  transform: translateY(52px);
  transition: transform .44s cubic-bezier(.16, .84, .3, 1) .02s;
}

.route-lockup--curtain img {
  width: 150px;
}

.route-lockup--curtain {
  width: max-content;
  max-width: 100%;
  justify-self: start;
}

.route-handoff-armed .route-lockup--curtain {
  visibility: hidden;
}

body:not(.route-handoff-armed) .solution-route.is-open .solution-route__head,
body:not(.route-handoff-armed) .solution-route:focus-visible .solution-route__head {
  opacity: 0;
}

.solution-route.is-route-measuring .solution-route__curtain,
.solution-route.is-route-measuring .solution-route__curtain-content {
  transform: none !important;
  transition: none !important;
}

.solution-route.is-route-measuring .solution-route__curtain {
  visibility: hidden;
}

.solution-route__curtain-content > span {
  color: var(--ct-green-deep);
  font: 600 11px/1.4 var(--ct-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.solution-route__curtain-content > strong {
  max-width: 380px;
  font: 600 clamp(30px, 3.4vw, 48px)/1.04 var(--ct-font-display);
  letter-spacing: -.045em;
}

.solution-route__curtain-content i {
  display: inline-block;
  margin-left: 6px;
  font-style: normal;
  transition: transform .24s ease;
}

.solution-route.is-open .solution-route__curtain {
  transform: translate3d(0, 0, 0);
}

.solution-route.is-open .solution-route__curtain::before,
.solution-route.is-open .solution-route__curtain-content {
  transform: none;
}

.solution-route.is-open .solution-route__copy,
.solution-route.is-open .solution-route__media figcaption {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(-12px);
}

.solution-route.is-open .solution-route__media img {
  opacity: .24;
  filter: blur(12px) saturate(.7);
  transform: scale(1.08);
}

.solution-route.is-open .solution-route__curtain-content i {
  transform: translateX(5px);
}

.solution-route:focus-visible .solution-route__curtain {
  transform: translate3d(0, 0, 0);
}

.solution-route:focus-visible .solution-route__curtain::before,
.solution-route:focus-visible .solution-route__curtain-content {
  transform: none;
}

.solution-route.is-route-committing .solution-route__curtain {
  transform: translate3d(0, 0, 0);
  transition-duration: .28s;
}

.solution-route.is-route-committing .solution-route__curtain::before,
.solution-route.is-route-committing .solution-route__curtain-content {
  transform: none;
  transition-duration: .28s;
}

.solution-route.is-route-committing .solution-route__copy,
.solution-route.is-route-committing .solution-route__media figcaption {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(-12px);
}

.solution-route.is-route-committing .solution-route__media img {
  opacity: .24;
  filter: blur(12px) saturate(.7);
  transform: scale(1.08);
}

/* Capability ledger */

.capability-section {
  background: var(--refresh-warm);
}

.capability-layout {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(60px, 9vw, 140px);
  align-items: start;
}

.capability-layout .section-intro {
  position: sticky;
  top: 128px;
  margin: 0;
}

.capability-ledger {
  border-top: 1px solid #cec9bd;
}

.capability-ledger article {
  display: grid;
  grid-template-columns: 44px minmax(150px, .55fr) minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid #cec9bd;
}

.capability-ledger span {
  color: var(--ct-green-deep);
  font: 600 10px/1.4 var(--ct-font-mono);
}

.capability-ledger h3 {
  margin: 0;
  font-size: 26px;
}

.capability-ledger p {
  margin: 0;
  color: var(--refresh-muted);
}

/* Trust */

.trust-section {
  background: #fbfcfb;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--refresh-rule);
  border-radius: 8px;
  background: var(--refresh-rule);
}

.trust-grid article {
  min-height: 325px;
  padding: 30px;
  background: #fff;
}

.trust-grid article > span {
  margin-bottom: 45px;
}

.trust-grid h3 {
  margin-bottom: 16px;
  font-size: 25px;
  line-height: 1.15;
}

.trust-grid p {
  color: var(--refresh-muted);
  font-size: 15px;
  line-height: 1.55;
}

.platform-status {
  display: grid;
  grid-template-columns: .45fr 1.55fr;
  gap: 32px;
  margin-top: 22px;
  padding: 30px;
  border: 1px solid var(--refresh-rule);
  border-radius: 8px;
  background: #f2f4f5;
}

.platform-status > p {
  margin: 0;
  font: 600 13px/1.4 var(--ct-font-display);
}

.platform-status dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 30px;
  margin: 0;
}

.platform-status dt {
  margin-bottom: 5px;
  color: var(--ct-text-tertiary);
  font: 600 9px/1.4 var(--ct-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.platform-status dd {
  color: var(--refresh-muted);
  font-size: 13px;
  line-height: 1.45;
}

/* Pricing preview */

.price-preview {
  padding-bottom: 52px;
  background: var(--refresh-ink);
  color: #fff;
}

.price-preview h2,
.price-preview .eyebrow {
  color: #fff;
}

.price-preview .eyebrow {
  opacity: .65;
}

.price-preview__inner {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 80px;
  align-items: end;
}

.price-preview__inner > div > p {
  color: #bdc3c9;
}

.price-callout {
  display: grid;
  padding: 32px;
  border: 1px solid #485058;
  border-radius: 8px;
}

.price-callout > span {
  color: #bdc3c9;
  font: 600 10px/1.4 var(--ct-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.price-callout > strong {
  margin-top: 8px;
  color: #fff;
  font: 600 74px/1 var(--ct-font-display);
  letter-spacing: -.06em;
}

.price-callout > small {
  margin-bottom: 24px;
  color: #bdc3c9;
}

.price-callout .text-link {
  color: #fff;
}

.boundary-line {
  display: flex;
  margin-top: 42px;
  padding-top: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid #485058;
  color: #aeb5bc;
  font: 400 13px/1.55 var(--ct-font-display);
}

.boundary-line p {
  margin: 0;
}

.boundary-line strong,
.boundary-line .text-link {
  color: #fff;
}

.boundary-line .text-link {
  flex: none;
}

/* Founder and FAQ */

.founder-preview {
  background: #f6f3ec;
}

.founder-preview__grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: center;
}

.founder-preview figure {
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: #ddd;
}

.founder-preview figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-preview__grid > div > p {
  margin-bottom: 28px;
}

.faq-section {
  background: #fbfcfb;
}

.faq-layout {
  display: grid;
  grid-template-columns: .58fr 1.42fr;
  gap: clamp(50px, 9vw, 140px);
  align-items: start;
}

.faq-layout .section-intro {
  position: sticky;
  top: 128px;
  margin: 0;
}

.page-refresh .faq-list {
  border-top: 1px solid var(--refresh-rule);
}

.page-refresh .faq-list details {
  border-bottom: 1px solid var(--refresh-rule);
}

.page-refresh .faq-list summary {
  min-height: 84px;
  padding: 24px 48px 24px 0;
  font-size: 18px;
}

.page-refresh .faq-list details p {
  max-width: 780px;
  padding: 0 60px 28px 0;
  color: var(--refresh-muted);
}

/* Club route stories */

.club-stories {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 10vw, 150px) 0;
  border-top: 1px solid var(--refresh-rule);
  border-bottom: 1px solid var(--refresh-rule);
  background:
    linear-gradient(rgba(30, 123, 51, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 123, 51, .045) 1px, transparent 1px),
    #f4f8f5;
  background-size: 92px 64px, 92px 64px, auto;
}

.club-stories::before {
  position: absolute;
  width: min(52vw, 760px);
  aspect-ratio: 2 / 1;
  top: 16%;
  left: -18vw;
  border: 1px solid rgba(30, 123, 51, .1);
  border-radius: 0 0 50% 50%;
  content: "";
  transform: rotate(7deg);
}

.club-stories > .wrap {
  position: relative;
  z-index: 1;
}

.club-stories__head {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(320px, 1.3fr);
  gap: clamp(32px, 8vw, 120px);
  margin-bottom: clamp(48px, 7vw, 92px);
  align-items: end;
}

.club-stories__head .eyebrow {
  align-self: start;
}

.club-stories__head h2 {
  margin: 0;
  font-size: clamp(42px, 5.6vw, 76px);
  letter-spacing: -.055em;
  line-height: .98;
}

.club-stories__head > p:last-child {
  grid-column: 2;
  max-width: 780px;
  margin: 20px 0 0;
  color: var(--refresh-muted);
  font-size: 19px;
  line-height: 1.6;
}

.club-story-list {
  display: grid;
  gap: clamp(22px, 3vw, 38px);
}

.club-story {
  display: grid;
  grid-template-columns: minmax(270px, .68fr) minmax(0, 1.32fr);
  gap: clamp(28px, 5vw, 72px);
  min-height: 610px;
  padding: clamp(26px, 4vw, 52px);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(85, 105, 92, .2);
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 24px 80px rgba(39, 66, 46, .065);
}

.club-story__number {
  margin: 0 0 25px;
  color: var(--ct-green-deep);
  font: 600 11px/1.2 var(--ct-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.club-story__copy h3 {
  margin: 0 0 20px;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -.05em;
  line-height: 1;
}

.club-story__copy > p:not(.club-story__number) {
  margin: 0;
  color: var(--refresh-muted);
  font-size: 17px;
  line-height: 1.65;
}

.club-story__beats {
  display: grid;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--refresh-rule);
}

.club-story__beats li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--refresh-rule);
  color: var(--refresh-muted);
  font-size: 13px;
  line-height: 1.45;
}

.club-story__beats span {
  color: var(--refresh-ink);
  font: 600 10px/1.45 var(--ct-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.club-story__visual,
.club-proof-duo figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid #d6dade;
  border-radius: 9px;
  background: #edf0f2;
  box-shadow: 0 18px 54px rgba(31, 35, 40, .1);
}

.club-story__visual img,
.club-proof-duo img {
  display: block;
  width: 100%;
  height: auto;
}

.club-story__visual figcaption,
.club-proof-duo figcaption {
  display: flex;
  min-height: 48px;
  padding: 12px 15px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid #d6dade;
  background: #fff;
  color: var(--ct-text-tertiary);
  font: 500 10px/1.4 var(--ct-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.club-story__visual figcaption strong {
  color: var(--ct-green-deep);
  font-weight: 600;
  text-align: right;
}

.club-proof-duo {
  position: relative;
  min-height: 540px;
}

.club-proof-duo figure:first-child {
  width: 82%;
}

.club-proof-duo figure:last-child {
  position: absolute;
  width: 76%;
  right: 0;
  bottom: 0;
  border-color: #b9c5bc;
}

.club-proof-duo figcaption {
  justify-content: flex-start;
}

.club-proof-duo__arrow {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 54px;
  height: 54px;
  top: 43%;
  left: 64%;
  place-items: center;
  border: 1px solid #b9c5bc;
  border-radius: 50%;
  background: var(--ct-green-deep);
  color: #fff;
  box-shadow: 0 12px 30px rgba(30, 123, 51, .18);
  font: 600 22px/1 var(--ct-font-display);
  transform: translate(-50%, -50%);
}

.club-proof-duo--outcome {
  min-height: 560px;
}

.club-proof-duo--outcome figure:first-child {
  width: 88%;
}

.club-proof-duo--outcome figure.club-proof-duo__phone {
  z-index: 2;
  width: min(34%, 250px);
  right: 2%;
  bottom: 20px;
  border-radius: 22px;
}

.club-proof-duo--outcome .club-proof-duo__arrow {
  z-index: 3;
  width: 42px;
  height: 28px;
  top: 41%;
  left: 65%;
  border-color: rgba(30, 123, 51, .42);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: var(--ct-green-deep);
  box-shadow: 0 8px 20px rgba(27, 52, 35, .12);
  font-size: 18px;
}

.club-proof-duo--outcome .club-proof-duo__phone img {
  background: #eef1f2;
}

.club-story--guest {
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(249, 247, 240, .94));
}

.club-story--rain {
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(243, 248, 245, .94));
}

.program-stories {
  background:
    radial-gradient(circle at 84% 12%, rgba(195, 143, 61, .12) 0 5px, transparent 6px),
    linear-gradient(rgba(125, 103, 69, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 103, 69, .045) 1px, transparent 1px),
    #fbf8f1;
  background-size: auto, 96px 64px, 96px 64px, auto;
}

.program-stories::before {
  left: auto;
  right: -17vw;
  border-color: rgba(125, 103, 69, .11);
  border-radius: 50% 50% 0 0;
  transform: rotate(-6deg);
}

.program-story {
  border-color: rgba(125, 103, 69, .2);
  background: rgba(255, 254, 250, .93);
  box-shadow: 0 24px 80px rgba(91, 72, 43, .065);
}

.program-story--transfer {
  background: linear-gradient(145deg, rgba(255, 254, 250, .96), rgba(246, 247, 252, .94));
}

.program-story--delivery {
  background: linear-gradient(145deg, rgba(255, 254, 250, .96), rgba(242, 248, 244, .94));
}

.program-proof {
  position: relative;
  min-height: 600px;
}

.program-proof figure,
.program-calendar-shift figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid #d6dade;
  border-radius: 9px;
  background: #edf0f2;
  box-shadow: 0 18px 54px rgba(31, 35, 40, .1);
}

.program-proof img,
.program-calendar-shift img {
  display: block;
  width: 100%;
  height: auto;
}

.program-proof figcaption,
.program-calendar-shift figcaption {
  min-height: 43px;
  padding: 11px 13px;
  border-top: 1px solid #d6dade;
  background: #fff;
  color: var(--ct-text-tertiary);
  font: 500 9px/1.4 var(--ct-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.program-proof > figure,
.program-proof > .program-calendar-shift {
  position: absolute;
}

.program-proof__phone {
  z-index: 2;
  width: min(29%, 220px);
}

.program-proof__wide {
  z-index: 1;
  width: 76%;
}

.program-proof__arrow {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(30, 123, 51, .28);
  border-radius: 50%;
  background: var(--ct-green-deep);
  color: #fff;
  box-shadow: 0 12px 30px rgba(30, 123, 51, .18);
  font: 600 19px/1 var(--ct-font-display);
}

.program-proof--enrollment .program-proof__wide {
  top: 96px;
  right: 0;
}

.program-proof__phone--left {
  top: 0;
  left: 0;
}

.program-proof__phone--middle {
  bottom: 0;
  left: 21%;
}

.program-proof--enrollment .program-proof__arrow--one {
  top: 38%;
  left: 25%;
}

.program-proof--enrollment .program-proof__arrow--two {
  right: 46%;
  bottom: 24%;
}

.program-proof--transfer .program-proof__phone--request {
  top: 0;
  left: 0;
}

.program-calendar-shift {
  z-index: 1;
  display: grid;
  width: 42%;
  top: 44px;
  left: 29%;
  gap: 8px;
}

.program-calendar-shift > span {
  display: grid;
  width: 34px;
  height: 34px;
  margin: -14px auto;
  place-items: center;
  border-radius: 50%;
  background: var(--ct-green-deep);
  color: #fff;
  font: 600 16px/1 var(--ct-font-display);
}

.program-proof--transfer .program-proof__phone--invite {
  right: 0;
  bottom: 0;
}

.program-proof__arrow--transfer {
  top: 48%;
  right: 25%;
}

.program-proof--delivery .program-proof__wide--attendance {
  top: 34px;
  left: 12%;
}

.program-proof--delivery .program-proof__phone--coach {
  bottom: 0;
  left: 0;
  width: min(31%, 235px);
}

.program-proof--delivery .program-proof__phone--household {
  right: 0;
  bottom: 0;
  width: min(31%, 235px);
}

.program-proof__arrow--delivery-one {
  top: 51%;
  left: 27%;
}

.program-proof__arrow--delivery-two {
  top: 51%;
  right: 27%;
}

/* Final CTA and footer */

.refresh-final {
  padding: clamp(82px, 10vw, 145px) 0;
  background: var(--ct-green);
  color: #162119;
}

.refresh-final .eyebrow,
.refresh-final h2 {
  color: #162119;
}

.refresh-final__inner {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 80px;
  align-items: end;
}

.refresh-final__inner > div > p {
  color: #2a4e30;
}

.refresh-final__actions {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.refresh-final .button {
  border-color: #17261a;
  background: #17261a;
  box-shadow: none;
}

.refresh-final .text-link {
  color: #17261a;
}

.refresh-final--clubs {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(15, 55, 24, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 55, 24, .09) 1px, transparent 1px),
    var(--ct-green);
  background-size: 96px 96px, 96px 96px, auto;
}

.refresh-final--clubs::before {
  position: absolute;
  width: min(44vw, 620px);
  aspect-ratio: 2 / 1;
  right: -8vw;
  bottom: -11vw;
  border: 1px solid rgba(15, 55, 24, .18);
  border-radius: 50% 50% 0 0;
  content: "";
  transform: rotate(-8deg);
}

.refresh-final--clubs .refresh-final__inner {
  position: relative;
  z-index: 1;
  align-items: center;
}

.refresh-final--programs {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(99, 76, 43, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 76, 43, .075) 1px, transparent 1px),
    #eadbbd;
  background-size: 96px 72px, 96px 72px, auto;
  color: #282219;
}

.refresh-final--programs::before {
  position: absolute;
  width: min(42vw, 580px);
  aspect-ratio: 1.8 / 1;
  left: -8vw;
  bottom: -10vw;
  border: 1px solid rgba(99, 76, 43, .15);
  border-radius: 50% 50% 0 0;
  content: "";
  transform: rotate(8deg);
}

.refresh-final--programs .refresh-final__inner {
  position: relative;
  z-index: 1;
  align-items: center;
}

.refresh-final--programs .eyebrow,
.refresh-final--programs h2 {
  color: #282219;
}

.refresh-final--programs .refresh-final__inner > div > p {
  color: #5b4b36;
}

.program-final-card {
  border-color: rgba(99, 76, 43, .24);
  background: rgba(255, 253, 247, .86);
  box-shadow: 0 20px 60px rgba(91, 72, 43, .1);
}

.club-final-card {
  width: min(100%, 430px);
  justify-self: end;
  padding: 30px;
  border: 1px solid rgba(17, 49, 24, .25);
  border-radius: 8px;
  background: rgba(240, 255, 241, .82);
  box-shadow: 0 20px 60px rgba(15, 55, 24, .1);
  backdrop-filter: blur(10px);
}

.club-final-card .eyebrow {
  margin-bottom: 18px;
}

.club-final-card ol {
  display: grid;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(17, 49, 24, .18);
}

.club-final-card li {
  display: flex;
  padding: 13px 0;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(17, 49, 24, .18);
  font: 600 16px/1.3 var(--ct-font-display);
}

.club-final-card li span {
  color: var(--ct-green-deep);
  font: 600 10px/1 var(--ct-font-mono);
  letter-spacing: .08em;
}

.club-final-card .button {
  width: 100%;
  justify-content: center;
}

.club-final-card__price {
  display: block;
  margin-top: 15px;
  color: #17261a;
  font: 600 13px/1.4 var(--ct-font-display);
  text-align: center;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.refresh-footer {
  border-top: 0;
}

/* Secondary pages */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(78px, 10vw, 145px) 0 clamp(72px, 9vw, 125px);
  border-bottom: 1px solid var(--refresh-rule);
  background:
    radial-gradient(circle at 85% 10%, rgba(97, 237, 106, .11), transparent 30%),
    #fbfcfb;
}

.page-hero > .wrap {
  position: relative;
  z-index: 1;
}

.route-theme--clubs .page-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(63, 199, 87, .12), transparent 25%),
    linear-gradient(rgba(28, 126, 57, .052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 126, 57, .052) 1px, transparent 1px),
    #f8fcf9;
  background-size: auto, 78px 56px, 78px 56px, auto;
}

.route-theme--clubs .page-hero::after {
  position: absolute;
  width: clamp(300px, 36vw, 610px);
  aspect-ratio: 1.9 / 1;
  right: -5vw;
  bottom: -5vw;
  border: 1px solid rgba(28, 126, 57, .12);
  border-radius: 50% 50% 0 0;
  content: "";
  transform: rotate(-7deg);
}

.route-theme--programs .page-hero {
  background:
    radial-gradient(circle at 83% 24%, rgba(195, 143, 61, .13) 0 5px, transparent 6px),
    radial-gradient(circle at 76% 38%, rgba(43, 137, 75, .1) 0 4px, transparent 5px),
    linear-gradient(rgba(125, 103, 69, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 103, 69, .045) 1px, transparent 1px),
    #fcfaf5;
  background-size: auto, auto, 96px 64px, 96px 64px, auto;
}

.route-theme .page-hero {
  overflow: clip;
}

/* Keep the moving route lockup in the root stacking context, like the home
   wordmark. The copy grid remains above the decorative court/program motif. */
.route-theme .page-hero > .route-brand-track {
  z-index: auto;
  height: auto;
  margin-bottom: clamp(32px, 5vw, 60px);
}

.route-theme--programs .page-hero::after {
  position: absolute;
  width: clamp(260px, 31vw, 510px);
  height: clamp(180px, 24vw, 350px);
  right: 4vw;
  bottom: -9vw;
  border: 1px solid rgba(125, 103, 69, .12);
  border-radius: 46% 46% 8px 8px;
  content: "";
  transform: rotate(5deg);
}

.route-page-lockup {
  display: inline-flex;
  margin-bottom: 0;
  align-items: center;
  gap: 16px;
}

.route-page-lockup img {
  width: clamp(138px, 14vw, 180px);
  height: auto;
}

.route-page-lockup span {
  padding-left: 16px;
  border-left: 1px solid rgba(31, 35, 40, .2);
  color: var(--refresh-muted);
  font: 500 clamp(17px, 1.8vw, 23px)/1.2 var(--ct-font-display);
  letter-spacing: -.015em;
}

.page-refresh .route-product-brand {
  gap: 10px;
}

.page-refresh .route-product-brand span {
  display: inline-block;
  padding-left: 10px;
  border-left: 1px solid rgba(31, 35, 40, .2);
  color: var(--refresh-muted);
  font: 500 15px/1.2 var(--ct-font-display);
  letter-spacing: -.015em;
  white-space: nowrap;
}

.route-page-transition {
  --route-origin-x: 50vw;
  --route-origin-y: 50vh;
  --route-expand-radius: 150vmax;
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  padding: clamp(28px, 6vw, 96px);
  place-items: center;
  overflow: hidden;
  cursor: progress;
  pointer-events: auto;
  touch-action: none;
}

.route-page-transition::before {
  position: absolute;
  inset: 0;
  content: "";
  clip-path: circle(0 at var(--route-origin-x) var(--route-origin-y));
  transition: clip-path .42s cubic-bezier(.16, .84, .3, 1);
}

.route-page-transition--clubs::before {
  background:
    linear-gradient(rgba(28, 126, 57, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 126, 57, .08) 1px, transparent 1px),
    #daf9df;
  background-size: 78px 56px, 78px 56px, auto;
}

.route-page-transition--programs::before {
  background:
    radial-gradient(circle at 80% 25%, rgba(195, 143, 61, .18) 0 5px, transparent 6px),
    linear-gradient(rgba(125, 103, 69, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 103, 69, .06) 1px, transparent 1px),
    #f5eee2;
  background-size: auto, 96px 64px, 96px 64px, auto;
}

.route-page-transition--managed::before {
  background:
    linear-gradient(rgba(32, 36, 42, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 36, 42, .06) 1px, transparent 1px),
    #e9ebee;
  background-size: 84px 60px, 84px 60px, auto;
}

.route-page-transition.is-active::before {
  clip-path: circle(var(--route-expand-radius) at var(--route-origin-x) var(--route-origin-y));
}

.route-page-transition__content {
  --route-start-x: 0px;
  --route-start-y: 0px;
  --route-start-scale: 1;
  display: flex;
  position: relative;
  z-index: 1;
  width: max-content;
  max-width: calc(100vw - clamp(56px, 12vw, 192px));
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.05vw, 26px);
  opacity: 1;
  transform: translate3d(var(--route-start-x), var(--route-start-y), 0) scale(var(--route-start-scale));
  transform-origin: center;
  transition: transform .42s cubic-bezier(.16, .84, .3, 1);
}

.route-page-transition.is-positioning .route-page-transition__content {
  transition: none;
}

.route-page-transition.is-active .route-page-transition__content {
  transform: none;
}

.route-page-transition__content img {
  width: clamp(190px, 23.5vw, 300px);
  height: auto;
}

.route-page-transition__content span {
  padding-left: clamp(16px, 2.05vw, 26px);
  border-left: 1px solid rgba(31, 35, 40, .24);
  color: var(--refresh-ink);
  font: 500 clamp(24px, 3vw, 38px)/1.1 var(--ct-font-display);
  letter-spacing: -.015em;
  white-space: nowrap;
}

.route-arrival-veil {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  padding: clamp(28px, 6vw, 96px);
  place-items: center;
  overflow: hidden;
  cursor: progress;
  pointer-events: auto;
  touch-action: none;
}

.route-arrival-veil::before {
  position: absolute;
  inset: 0;
  opacity: 1;
  content: "";
  transition: opacity .34s ease .04s;
}

.route-arrival-veil--clubs::before {
  background:
    linear-gradient(rgba(28, 126, 57, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 126, 57, .08) 1px, transparent 1px),
    #daf9df;
  background-size: 78px 56px, 78px 56px, auto;
}

.route-arrival-veil--programs::before {
  background:
    radial-gradient(circle at 80% 25%, rgba(195, 143, 61, .18) 0 5px, transparent 6px),
    linear-gradient(rgba(125, 103, 69, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 103, 69, .06) 1px, transparent 1px),
    #f5eee2;
  background-size: auto, 96px 64px, 96px 64px, auto;
}

.route-arrival-veil--managed::before {
  background:
    linear-gradient(rgba(32, 36, 42, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 36, 42, .06) 1px, transparent 1px),
    #e9ebee;
  background-size: 84px 60px, 84px 60px, auto;
}

.route-arrival-veil .route-page-transition__content {
  --route-target-x: 0px;
  --route-target-y: 0px;
  --route-target-scale: 1;
  opacity: 1;
  transform: none;
  transition: transform .42s cubic-bezier(.16, .84, .3, 1);
}

.route-arrival-veil.is-leaving::before {
  opacity: 0;
}

.route-arrival-veil.is-leaving .route-page-transition__content {
  transform: translate3d(var(--route-target-x), var(--route-target-y), 0) scale(var(--route-target-scale));
}

.route-arrival [data-hero-brand] {
  opacity: 0 !important;
}

body.route-departing,
body.route-arrival {
  overflow: hidden;
}

body.route-departing .solution-route.is-route-committing .solution-route__head {
  opacity: 0;
  transition: opacity .08s ease;
}

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 80px;
  align-items: end;
}

.page-hero h1 {
  max-width: 900px;
  margin-bottom: 26px;
  font-size: clamp(52px, 7vw, 96px);
  letter-spacing: -.06em;
  line-height: .94;
}

.page-hero__lede {
  max-width: 720px;
  color: var(--refresh-muted);
  font-size: 21px;
  line-height: 1.5;
}

.page-hero__aside {
  padding: 28px;
  border-top: 2px solid var(--ct-green-mid);
  border-bottom: 1px solid var(--refresh-rule);
  color: var(--refresh-muted);
}

.page-hero__aside strong {
  display: block;
  margin-bottom: 10px;
  color: var(--refresh-ink);
  font-family: var(--ct-font-display);
}

.editorial-grid {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: clamp(50px, 9vw, 140px);
  align-items: start;
}

.editorial-grid > aside {
  position: sticky;
  top: 120px;
}

.editorial-grid > aside p {
  color: var(--refresh-muted);
}

.editorial-copy {
  max-width: 850px;
}

.editorial-copy h2 {
  margin: 72px 0 18px;
  font-size: clamp(32px, 4vw, 52px);
}

.editorial-copy h2:first-child {
  margin-top: 0;
}

.editorial-copy h3 {
  margin: 38px 0 12px;
  font-size: 26px;
}

.editorial-copy p,
.editorial-copy li {
  color: var(--refresh-muted);
  font-size: 18px;
  line-height: 1.65;
}

.editorial-copy ul {
  padding-left: 22px;
}

.page-image {
  overflow: hidden;
  margin: 42px 0;
  border: 1px solid var(--refresh-rule);
  border-radius: 8px;
  background: #edf0f2;
}

.page-image img {
  width: 100%;
}

.page-image figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--refresh-rule);
  background: #fff;
  color: var(--ct-text-tertiary);
  font: 500 9px/1.5 var(--ct-font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* The two recorded outcomes of a resolved cancellation (makeup / credit),
   shown as a matched pair spanning the full story card, under the resolution
   shot (2026-07-24). */
.cancellation-outcomes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--refresh-rule);
}

.cancellation-outcomes .page-image {
  margin: 0;
}

@media (max-width: 720px) {
  .cancellation-outcomes {
    grid-template-columns: 1fr;
  }
}

.role-proof-grid {
  display: grid;
  grid-template-columns: 1.15fr .425fr .425fr;
  gap: 18px;
  align-items: stretch;
}

.role-proof-grid figure {
  display: flex;
  margin: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--refresh-rule);
  border-radius: 8px;
  background: #fff;
}

.role-proof-grid figure > div {
  flex: 1;
  overflow: hidden;
  background: #edf0f2;
}

.role-proof-grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.role-proof-grid figure:first-child img {
  aspect-ratio: 16 / 9;
}

.role-proof-grid figcaption {
  padding: 16px;
  border-top: 1px solid var(--refresh-rule);
  font: 600 12px/1.4 var(--ct-font-display);
}

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

.pricing-card {
  display: flex;
  min-height: 550px;
  padding: 28px;
  flex-direction: column;
  border: 1px solid var(--refresh-rule);
  border-radius: 8px;
  background: #fff;
}

.pricing-card--managed {
  background: var(--refresh-ink);
  color: #fff;
}

.pricing-card > span {
  min-height: 42px;
  color: var(--ct-green-deep);
  font: 600 10px/1.4 var(--ct-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pricing-card--managed > span,
.pricing-card--managed h3,
.pricing-card--managed .pricing-amount {
  color: #fff;
}

.pricing-card h3 {
  margin: 8px 0 14px;
  font-size: 28px;
}

.pricing-amount {
  margin-bottom: 24px;
  font: 600 48px/1 var(--ct-font-display);
  letter-spacing: -.05em;
}

.pricing-amount small {
  color: var(--refresh-muted);
  font: 400 12px/1.4 var(--ct-font-text);
  letter-spacing: 0;
}

.pricing-card--managed .pricing-amount small,
.pricing-card--managed p,
.pricing-card--managed li {
  color: #bdc3c9;
}

.pricing-card p,
.pricing-card li {
  color: var(--refresh-muted);
  font-size: 14px;
  line-height: 1.55;
}

.pricing-card ul {
  padding-left: 18px;
}

.pricing-card .text-link {
  margin-top: auto;
}

.pricing-card__shot {
  margin: 4px 0 16px;
  overflow: hidden;
  border: 1px solid var(--refresh-rule);
  border-radius: 6px;
}

.pricing-card__shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
}

.pricing-card__shot figcaption {
  padding: 6px 9px;
  border-top: 1px solid var(--refresh-rule);
  color: var(--refresh-muted);
  font: 500 10px/1.3 var(--ct-font-mono);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.pricing-card--managed .text-link {
  color: #fff;
}

.pricing-boundary {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--ct-warning-border);
  border-radius: 8px;
  background: var(--ct-warning-surface);
  color: var(--ct-warning-ink);
  font-size: 14px;
}

.pricing-start-row {
  margin-top: 24px;
}

/* Responsive */

@media (max-width: 1120px) {
  .nav-shell {
    grid-template-columns: max-content 1fr max-content;
    gap: 18px;
  }

  .main-nav {
    gap: 16px;
  }

  .nav-signin {
    display: none;
  }

  .nav-signin.nav-lang {
    display: inline-flex;
  }

  .home-hero__grid {
    grid-template-columns: .9fr 1.1fr;
    gap: 38px;
  }

  .hero-product {
    min-height: 510px;
  }

  .hero-phone {
    width: 148px;
  }

  .hero-phone--coach {
    right: 112px;
  }

  .hero-phone--member {
    right: 4px;
  }

  .hero-phone--book {
    right: 220px;
  }

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

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

@media (max-width: 900px) {
  .page-refresh .wrap {
    width: min(100% - 36px, 780px);
  }

  .nav-shell {
    grid-template-areas: "brand actions" "nav nav";
    grid-template-columns: minmax(0, 1fr) max-content;
    padding-top: 8px;
  }

  .page-refresh .product-brand {
    grid-area: brand;
  }

  .main-nav {
    grid-area: nav;
    justify-content: flex-start;
    overflow-x: auto;
    border-top: 1px solid var(--refresh-rule);
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-actions {
    grid-area: actions;
  }

  .home-hero {
    padding-top: 34px;
  }

  .club-stories__head,
  .club-story {
    grid-template-columns: 1fr;
  }

  .club-stories__head > p:last-child {
    grid-column: 1;
    margin-top: 0;
  }

  .club-story {
    min-height: 0;
  }

  .club-proof-duo {
    min-height: 510px;
  }

  .home-brand-track {
    height: clamp(82px, 11vh, 104px);
    margin-bottom: 12px;
  }

  .home-hero__grid {
    grid-template-columns: 1fr;
  }

  .home-hero__copy {
    padding-bottom: 12px;
  }

  .hero-product {
    min-height: 540px;
  }

  .hero-browser {
    right: 0;
  }

  .proof-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .proof-strip > div:nth-child(2) {
    border-right: 0;
  }

  .proof-strip > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--refresh-rule);
  }

  .split-heading,
  .capability-layout,
  .faq-layout,
  .price-preview__inner,
  .founder-preview__grid,
  .refresh-final__inner,
  .page-hero__grid,
  .editorial-grid {
    grid-template-columns: 1fr;
  }

  .handoff-grid,
  .workflow-grid {
    grid-template-columns: 1fr;
  }

  .handoff-grid article {
    min-height: 185px;
    border-right: 0;
    border-bottom: 1px solid #cec9bd;
  }

  .handoff-grid article:last-child {
    border-bottom: 0;
  }

  .handoff-grid span {
    margin-bottom: 25px;
  }

  .workflow-card {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
  }

  .workflow-grid figure {
    aspect-ratio: auto;
    border-right: 1px solid #d6dade;
    border-bottom: 0;
  }

  .solution-routes {
    grid-template-columns: 1fr;
  }

  .capability-layout .section-intro,
  .faq-layout .section-intro,
  .editorial-grid > aside {
    position: static;
  }

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

  .platform-status {
    grid-template-columns: 1fr;
  }

  .price-preview__inner,
  .refresh-final__inner {
    align-items: start;
  }

  .price-callout {
    max-width: 440px;
  }

  .role-proof-grid {
    grid-template-columns: 1fr 1fr;
  }

  .role-proof-grid figure:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .page-refresh .wrap {
    width: min(100% - 28px, 540px);
  }

  .page-refresh.page-legacy .wrap {
    width: min(100% - 28px, 540px);
  }

  .nav-shell {
    column-gap: 10px;
  }

  .page-refresh .product-brand img {
    width: 98px;
  }

  .page-refresh .product-brand span {
    display: none;
    padding-left: 8px;
    font-size: 11px;
  }

  .page-refresh .route-product-brand {
    gap: 8px;
  }

  .page-refresh .route-product-brand span {
    display: inline-block;
    padding-left: 8px;
    font-size: 12px;
  }

  .nav-actions .button {
    min-height: 40px;
    padding: 8px 13px;
    font-size: 12px;
  }

  .main-nav {
    gap: 20px;
  }

  .main-nav a {
    min-height: 40px;
    font-size: 12px;
  }

  .club-stories {
    padding: 66px 0;
  }

  .club-stories__head {
    margin-bottom: 38px;
    gap: 18px;
  }

  .club-stories__head h2 {
    font-size: clamp(36px, 10.5vw, 46px);
  }

  .club-stories__head > p:last-child {
    font-size: 17px;
  }

  .club-story {
    gap: 28px;
    padding: 22px;
  }

  .club-story__copy h3 {
    font-size: clamp(32px, 9.4vw, 41px);
  }

  .club-story__beats li {
    grid-template-columns: 66px 1fr;
  }

  .club-story__visual figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .club-story__visual figcaption strong {
    text-align: left;
  }

  .club-proof-duo,
  .club-proof-duo--outcome {
    display: grid;
    min-height: 0;
    gap: 12px;
  }

  .club-proof-duo figure:first-child,
  .club-proof-duo figure:last-child,
  .club-proof-duo--outcome figure:first-child,
  .club-proof-duo--outcome figure.club-proof-duo__phone {
    position: static;
    width: 100%;
  }

  .club-proof-duo--outcome figure.club-proof-duo__phone {
    width: min(100%, 320px);
    justify-self: center;
  }

  .club-proof-duo__arrow {
    position: static;
    width: 46px;
    height: 46px;
    margin: -2px auto;
    transform: rotate(90deg);
  }

  .club-proof-duo--outcome .club-proof-duo__arrow {
    width: 36px;
    height: 26px;
    margin: 2px auto;
    transform: rotate(90deg);
  }

  .program-proof {
    display: grid;
    min-height: 0;
    gap: 12px;
  }

  .program-proof > figure,
  .program-proof > .program-calendar-shift {
    position: static !important;
  }

  .program-proof > figure.program-proof__phone {
    width: min(100%, 300px) !important;
    justify-self: center;
  }

  .program-proof > figure.program-proof__wide,
  .program-proof > .program-calendar-shift {
    width: 100% !important;
  }

  .program-proof__arrow {
    position: static;
    width: 46px;
    height: 46px;
    margin: -2px auto;
    transform: rotate(90deg);
  }

  .program-calendar-shift {
    gap: 12px;
  }

  .home-hero {
    padding-top: 24px;
  }

  .home-brand-track {
    height: 72px;
    margin-bottom: 8px;
  }

  .home-hero h1 {
    font-size: clamp(44px, 13.2vw, 62px);
  }

  .home-hero__lede {
    font-size: 18px;
  }

  .home-hero .demo-note {
    display: none;
  }

  .hero-product {
    min-height: 340px;
    padding-bottom: 42px;
  }

  .hero-browser {
    right: 0;
  }

  .hero-phone {
    display: none;
  }

  .hero-product figcaption {
    max-width: 90%;
  }

  .proof-strip {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .proof-strip > div {
    min-height: 94px;
    border-right: 0;
    border-bottom: 1px solid var(--refresh-rule);
  }

  .proof-strip > div:last-child {
    border-bottom: 0;
  }

  .refresh-section {
    padding: 80px 0;
  }

  .section-intro h2,
  .split-heading h2,
  .price-preview h2,
  .founder-preview h2,
  .refresh-final h2 {
    font-size: clamp(36px, 11vw, 50px);
  }

  .record-map {
    grid-template-columns: 1fr;
  }

  .record-core {
    grid-column: auto;
    min-height: 240px;
    padding: 34px 24px;
  }

  .record-map article {
    min-height: 180px;
  }

  .workflow-card {
    display: block;
  }

  .workflow-grid figure {
    aspect-ratio: 16 / 10;
    border-right: 0;
    border-bottom: 1px solid #d6dade;
  }

  .workflow-card > div {
    min-height: 0;
  }

  .solution-route {
    min-height: 560px;
    grid-template-rows: auto minmax(0, 1fr) 250px;
  }

  .capability-ledger article {
    grid-template-columns: 34px 1fr;
  }

  .capability-ledger p {
    grid-column: 2;
  }

  .trust-grid,
  .platform-status dl,
  .pricing-grid,
  .role-proof-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid article {
    min-height: 270px;
  }

  .platform-status {
    padding: 24px;
  }

  .founder-preview__grid {
    gap: 42px;
  }

  .founder-preview figure {
    max-height: 520px;
  }

  .page-hero {
    padding-top: 66px;
  }

  .page-hero h1 {
    font-size: clamp(48px, 15vw, 72px);
  }

  .page-hero__lede {
    font-size: 18px;
  }

  .role-proof-grid figure:first-child {
    grid-column: auto;
  }

  .pricing-card {
    min-height: 0;
  }

  /* Phone presentation: shared content, purpose-built composition. */
  .nav-shell {
    grid-template-areas:
      "brand actions toggle"
      "nav nav nav";
    grid-template-columns: minmax(0, 1fr) max-content 44px;
    gap: 0 8px;
    min-height: 68px;
    padding-block: 8px;
  }

  .page-refresh .nav-header {
    box-shadow: 0 8px 24px rgba(31, 35, 40, .04);
  }

  .page-refresh .product-brand img {
    width: 92px;
  }

  .nav-toggle {
    display: grid;
    grid-area: toggle;
    width: 44px;
    height: 44px;
    padding: 0;
    place-content: center;
    gap: 6px;
    cursor: pointer;
  }

  .nav-toggle i {
    display: block;
    width: 16px;
    height: 1px;
    background: currentColor;
    transition: transform .2s ease;
  }

  .nav-toggle[aria-expanded="true"] i:first-of-type {
    transform: translateY(3.5px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] i:last-of-type {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .main-nav {
    display: none;
    grid-area: nav;
    gap: 0;
    margin: 8px -14px -8px;
    padding: 8px 14px 14px;
    overflow: visible;
    border-top: 1px solid var(--refresh-rule);
    background: #f7f8fa;
  }

  .nav-shell.is-open .main-nav {
    display: grid;
  }

  .main-nav a {
    min-height: 48px;
    justify-content: space-between;
    border-bottom: 1px solid var(--refresh-rule);
    font-size: 14px;
  }

  .main-nav a:last-child {
    border-bottom: 0;
  }

  .main-nav .mobile-nav-signin {
    display: inline-flex;
    color: var(--refresh-ink);
    font-weight: 600;
  }

  .nav-actions {
    grid-area: actions;
  }

  .nav-actions .button {
    min-height: 44px;
    padding-inline: 14px;
  }

  .home-hero {
    overflow: hidden;
  }

  .home-brand-track {
    height: 64px;
  }

  .home-hero__grid {
    gap: 28px;
  }

  .home-hero h1 {
    font-size: clamp(42px, 12vw, 50px);
    line-height: 1;
  }

  .home-hero__lede {
    font-size: 17px;
    line-height: 1.5;
  }

  .home-hero .button-row {
    display: grid;
    gap: 4px;
  }

  .home-hero .button-row .button,
  .home-hero .button-row .text-link {
    width: 100%;
    justify-content: center;
  }

  .hero-product {
    display: grid;
    min-height: 0;
    gap: 16px;
    padding-bottom: 0;
  }

  .hero-browser {
    position: relative;
    inset: auto;
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(27, 34, 39, .14);
    transform: none;
  }

  .hero-browser > img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: right top;
  }

  .hero-phone-rail {
    display: grid;
    grid-auto-columns: min(64vw, 230px);
    grid-auto-flow: column;
    gap: 12px;
    padding: 2px 2px 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .hero-phone-rail::-webkit-scrollbar,
  .proof-strip::-webkit-scrollbar,
  .solution-routes::-webkit-scrollbar,
  .trust-grid::-webkit-scrollbar,
  .pricing-grid::-webkit-scrollbar {
    display: none;
  }

  .hero-phone {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    width: 100%;
    border-width: 5px;
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(27, 34, 39, .18);
    scroll-snap-align: start;
    transform: none;
  }

  .hero-phone-label {
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--refresh-ink);
    font: 600 9px/1.2 var(--ct-font-mono);
    box-shadow: 0 2px 8px rgba(27, 34, 39, .12);
  }

  .hero-product figcaption {
    position: static;
    max-width: 100%;
    padding-bottom: 4px;
  }

  .proof-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 14px 18px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .proof-strip > div,
  .proof-strip > div:nth-child(-n + 2) {
    min-height: 150px;
    padding: 18px 16px;
    border: 1px solid var(--refresh-rule);
    border-radius: 8px;
    background: #fff;
  }

  .refresh-section {
    padding: 64px 0;
  }

  .section-intro {
    margin-bottom: 32px;
  }

  .split-heading,
  .capability-layout,
  .faq-layout,
  .page-hero__grid,
  .editorial-grid,
  .price-preview__inner,
  .refresh-final__inner {
    gap: 32px;
  }

  .split-heading {
    margin-bottom: 36px;
  }

  .section-intro h2,
  .split-heading h2,
  .price-preview h2,
  .founder-preview h2,
  .refresh-final h2 {
    font-size: clamp(34px, 9.6vw, 42px);
  }

  .handoff-grid article {
    min-height: 0;
    padding: 26px 22px;
  }

  .handoff-grid span {
    margin-bottom: 18px;
  }

  .record-core {
    min-height: 200px;
    padding: 30px 22px;
  }

  .record-map article {
    min-height: 0;
    padding: 30px 24px;
  }

  .workflow-grid {
    gap: 14px;
  }

  .workflow-grid figure {
    aspect-ratio: 4 / 3;
  }

  .workflow-grid figure img,
  .page-image img {
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
  }

  .workflow-card > div {
    padding: 24px;
  }

  .workflow-card__label {
    margin-bottom: 20px;
  }

  .solution-routes,
  .trust-grid,
  .pricing-grid {
    grid-template-columns: none;
    grid-auto-columns: min(84vw, 340px);
    grid-auto-flow: column;
    gap: 12px;
    padding: 2px 2px 12px;
    overflow-x: auto;
    border: 0;
    background: transparent;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .solution-route,
  .trust-grid article,
  .pricing-card {
    min-height: 0;
    scroll-snap-align: start;
  }

  .solution-route {
    min-height: 540px;
    padding: 0;
    grid-template-rows: auto minmax(0, 1fr) 190px;
  }

  .solution-route__head {
    padding: 24px 22px 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .route-lockup {
    gap: 11px;
  }

  .route-lockup img {
    width: 112px;
  }

  .route-lockup__label {
    padding-left: 11px;
    font-size: 15px;
  }

  .solution-route__status {
    text-align: left;
  }

  .solution-route__copy {
    padding: 34px 22px 24px;
  }

  .solution-route h3 {
    margin-top: 0;
  }

  .solution-route__media figcaption {
    right: auto;
    bottom: 10px;
    left: 10px;
  }

  .trust-grid article {
    min-height: 245px;
    padding: 26px;
    border: 1px solid var(--refresh-rule);
    border-radius: 8px;
  }

  .trust-grid article > span {
    margin-bottom: 28px;
  }

  .capability-ledger article {
    padding-block: 22px;
  }

  .platform-status,
  .price-callout {
    padding: 24px;
  }

  .price-preview {
    padding-bottom: 44px;
  }

  .price-preview__inner {
    align-items: stretch;
  }

  .boundary-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .price-callout {
    max-width: none;
  }

  .founder-preview__grid {
    gap: 30px;
  }

  .founder-preview__grid > div {
    order: 1;
  }

  .founder-preview__grid > figure {
    order: 2;
    max-height: 460px;
    aspect-ratio: 3 / 4;
  }

  .page-hero {
    padding: 56px 0 62px;
  }

  .page-hero h1 {
    font-size: clamp(40px, 11.5vw, 48px);
    line-height: 1;
  }

  .page-hero__lede,
  .editorial-copy p,
  .editorial-copy li {
    font-size: 17px;
  }

  .page-hero__aside {
    padding: 22px 0;
  }

  .editorial-copy h2 {
    margin: 46px 0 14px;
    font-size: clamp(32px, 9.2vw, 40px);
  }

  .page-image {
    margin: 30px 0;
  }

  .role-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .role-proof-grid figure:first-child {
    grid-column: 1 / -1;
  }

  .role-proof-grid figure:not(:first-child) > div {
    flex: none;
    aspect-ratio: 430 / 932;
  }

  .role-proof-grid figcaption {
    padding: 12px;
    font-size: 11px;
  }

  .pricing-card {
    padding: 26px;
  }

  .refresh-final {
    padding: 68px 0;
  }

  .refresh-final__actions,
  .refresh-final__actions .button,
  .refresh-final__actions .text-link,
  .editorial-copy > .button {
    width: 100%;
  }

  .refresh-final__actions .button,
  .refresh-final__actions .text-link,
  .editorial-copy > .button {
    justify-content: center;
  }

  .club-final-card {
    width: 100%;
    padding: 24px;
    justify-self: stretch;
  }

  .route-page-lockup {
    margin-bottom: 32px;
  }

  .route-page-lockup img {
    width: 132px;
  }

  .route-page-lockup span {
    font-size: 16px;
  }

  .solution-route__curtain {
    padding: 26px;
  }

  /* Long-form tour: keep one source of content, but compose it for thumbs and
     a narrow reading measure instead of stacking miniature desktop grids. */
  .page-product-tour .hero {
    padding-top: 28px;
  }

  .page-product-tour .hero-intro .button-row {
    display: grid;
    gap: 8px;
  }

  .page-product-tour .hero-intro .button {
    width: 100%;
    justify-content: center;
  }

  .page-product-tour .hero-exhibit--full .browser-frame > img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: right top;
  }

  .page-product-tour .spec-rail,
  .page-product-tour .seam-grid,
  .page-product-tour .role-grid,
  .page-product-tour .tier-cards {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: min(84vw, 328px);
    grid-auto-flow: column;
    gap: 12px;
    padding: 2px 2px 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .page-product-tour .spec-rail::-webkit-scrollbar,
  .page-product-tour .seam-grid::-webkit-scrollbar,
  .page-product-tour .role-grid::-webkit-scrollbar,
  .page-product-tour .tier-cards::-webkit-scrollbar {
    display: none;
  }

  .page-product-tour .spec-rail > *,
  .page-product-tour .seam-grid > *,
  .page-product-tour .role-grid > *,
  .page-product-tour .tier-cards > * {
    scroll-snap-align: start;
  }

  .page-product-tour .spec-rail div,
  .page-product-tour .spec-rail div:first-child {
    min-height: 126px;
    padding: 20px;
    border: 1px solid var(--ct-hairline);
    border-radius: 8px;
    background: #fff;
  }

  .page-product-tour .seam-grid article,
  .page-product-tour .role-card,
  .page-product-tour .terms-card--tier {
    min-height: 0;
  }

  .page-product-tour .week-list--stories {
    gap: 64px;
  }

  .page-product-tour .week-entry--scrolly .story-head {
    margin-bottom: 18px;
  }

  .page-product-tour .scrolly-step,
  .page-product-tour .scrolly-step:not(.is-active) {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .page-product-tour .scrolly-detail {
    min-height: 82px;
    font-size: 14px;
  }

  .page-product-tour .founder-grid > div {
    order: 1;
  }

  .page-product-tour .founder-grid > figure {
    order: 2;
  }

  .page-privacy .privacy-main .section {
    padding-top: 54px;
  }
}

@media (max-width: 350px) {
  .page-refresh .wrap {
    width: min(100% - 24px, 540px);
  }

  .nav-shell {
    grid-template-columns: minmax(0, 1fr) max-content 44px;
    gap: 0 6px;
  }

  .page-refresh .product-brand img {
    width: 84px;
  }

  .page-refresh .route-product-brand {
    gap: 6px;
  }

  .page-refresh .route-product-brand img {
    width: 76px;
  }

  .page-refresh .route-product-brand span {
    padding-left: 6px;
    font-size: 10px;
  }

  .nav-actions .button {
    padding-inline: 11px;
    font-size: 11px;
  }

  .home-hero h1 {
    font-size: 40px;
  }

  .home-hero__lede,
  .page-hero__lede {
    font-size: 16px;
  }

  .refresh-section {
    padding: 56px 0;
  }

  .solution-routes,
  .trust-grid,
  .pricing-grid {
    grid-auto-columns: 88vw;
  }

  .hero-phone-rail {
    grid-auto-columns: 220px;
  }

  .proof-strip {
    grid-template-columns: 1fr;
  }

  .price-callout > strong {
    font-size: 62px;
  }

  .page-product-tour .spec-rail,
  .page-product-tour .seam-grid,
  .page-product-tour .role-grid,
  .page-product-tour .tier-cards {
    grid-auto-columns: 88vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solution-route,
  .solution-route__media img,
  .solution-route__head,
  .solution-route__copy,
  .solution-route__media figcaption,
  .solution-route__curtain,
  .solution-route__curtain::before,
  .solution-route__curtain-content,
  .workflow-card,
  .workflow-card__cta > span,
  .workflow-grid figure img,
  .nav-toggle i,
  .route-page-lockup {
    transition: none;
    animation: none;
  }

  .solution-route:hover,
  .solution-route:focus-visible,
  .workflow-card:hover,
  .workflow-card:focus-visible {
    translate: none;
  }

  .solution-route.is-open .solution-route__media img,
  .solution-route:focus-visible .solution-route__media img,
  .workflow-card:hover figure img,
  .workflow-card:focus-visible figure img,
  .workflow-card:hover .workflow-card__cta > span,
  .workflow-card:focus-visible .workflow-card__cta > span {
    transform: none;
  }

  .reveal-armed .workflow-card.is-in .workflow-card__cta > span {
    animation: none;
  }
}

/* ==================================================================
   CRM · communication · front door · creator showcase · founding
   Buyer-language sections added 2026-07-24. Desktop-first base with
   max-width overrides at the end of this block, matching the sheet's
   convention. Everything reuses the existing tokens and rhythm.
   ================================================================== */

/* Plan-availability tag, e.g. "Plus and up" */
.plan-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid #cfe8d5;
  border-radius: var(--ct-pill);
  background: #e9f6ec;
  color: var(--ct-green-deep);
  font: 600 10px/1.3 var(--ct-font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.plan-tag::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ct-green-mid);
  content: "";
}

.split-heading .plan-tag {
  margin-top: 16px;
}

/* Re-assert the chip type against higher-specificity paragraph rules
   (.split-heading > div > p outranks the bare class). */
.split-heading > div > p.plan-tag {
  color: var(--ct-green-deep);
  font: 600 10px/1.3 var(--ct-font-mono);
  letter-spacing: .09em;
  max-width: none;
}

/* Inline links inside the plan comparison and plan cards were colour-only. */
.compare-table a,
.pricing-card a:not(.button) {
  text-decoration: underline;
  text-decoration-color: var(--ct-green-mid);
  text-underline-offset: 3px;
}

/* Width/height-stable capture wells with a graceful labelled fallback.
   The image sits above a neutral placeholder that shows through until the
   real screenshot loads (or stays if a shot lags). site.js flags a failed
   load so no broken-image glyph is shown. */
.capture-slot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--refresh-rule);
  border-radius: 9px;
  background: #edf0f2;
  box-shadow: 0 18px 54px rgba(31, 35, 40, .1);
}

.capture-slot::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  padding: 22px;
  place-items: center;
  color: var(--ct-text-tertiary);
  content: attr(data-fallback);
  font: 500 10px/1.6 var(--ct-font-mono);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.capture-slot img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: opacity .3s ease;
}

.capture-slot img.is-missing {
  opacity: 0;
}

.capture-slot--wide { aspect-ratio: 16 / 10; }
.capture-slot--web { aspect-ratio: 16 / 9; }
.capture-slot--phone {
  aspect-ratio: 430 / 932;
  border-radius: 22px;
}

.capture-slot figcaption,
.capture-figure figcaption {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  padding: 7px 9px;
  border: 1px solid rgba(31, 35, 40, .12);
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  color: #626a73;
  font: 500 9px/1.35 var(--ct-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* A captioned figure that pairs a capture-slot with a caption bar below it. */
.capture-figure {
  margin: 0;
}

.capture-figure > figcaption {
  position: static;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ct-text-tertiary);
}

/* Spotlight — a feature explained with copy, points and one live capture. */
.spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(40px, 6vw, 92px);
  align-items: center;
}

.spotlight + .spotlight {
  margin-top: clamp(56px, 7vw, 104px);
}

.spotlight--reverse .spotlight__body { order: 2; }
.spotlight--reverse .spotlight__media { order: 1; }

.spotlight__body h3 {
  margin: 14px 0 16px;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -.03em;
  line-height: 1.04;
}

.spotlight__body > p {
  max-width: 560px;
  color: var(--refresh-muted);
  font-size: 17px;
  line-height: 1.55;
}

.spotlight__points {
  display: grid;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--refresh-rule);
}

.spotlight__points li {
  position: relative;
  padding: 15px 0 15px 28px;
  border-bottom: 1px solid var(--refresh-rule);
  color: var(--refresh-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.spotlight__points li::before {
  position: absolute;
  top: 15px;
  left: 0;
  color: var(--ct-green-deep);
  content: "→";
  font: 600 15px/1.5 var(--ct-font-mono);
}

.spotlight__points strong {
  color: var(--refresh-ink);
  font-weight: 600;
}

.spotlight__media {
  display: grid;
  gap: 14px;
}

/* Two desk captures, one above the other. Used where both frames belong on a
   desk — the lead workbench and the retention board — so neither is squeezed
   into a phone it is never worked on (2026-08-14). */
.media-stack {
  display: grid;
  gap: 14px;
}

/* A phone in the stack sizes against the column, never against its own image —
   a lone phone in `media-duo` had nothing to measure and collapsed to zero.
   The 220px cap put the app's own type at about 7px on screen, which is
   texture rather than text; 340px lands it near 11px, the size the densest
   reference heroes settle on. */
.media-stack .capture-slot--phone {
  width: min(70%, 340px);
}

/* A paired media composition: a wide web capture beside a phone. The two read
   side-by-side; the phone only edge-kisses the web shot's right margin so the
   web's own content is never covered (2026-07-24 founder review). */
/*
 * Two captures, side by side, both readable.
 *
 * These used to overlap by design — the desk view owned the left and the phone
 * sat on top of its right edge. The intent was a composition; the effect was
 * that neither could be read, because the overlap ate the desk capture's right
 * third and the phone was pinned to 200px. A visitor could see two pictures
 * and read neither.
 *
 * They now share a row with a real gap. The phone gets enough width for the
 * app's own type to survive the downscale, and the desk view keeps the rest.
 */
.media-duo {
  display: grid;
  align-items: end;
  gap: clamp(20px, 2.4vw, 40px);
  grid-template-columns: minmax(0, 1fr) clamp(270px, 28%, 360px);
}

.media-duo .capture-slot--web,
.media-duo .capture-slot--phone {
  width: 100%;
}

.media-duo .capture-slot--phone {
  box-shadow: 0 22px 46px rgba(27, 34, 39, .18);
}

@media (max-width: 900px) {
  .media-duo {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .media-duo .capture-slot--phone {
    max-width: 300px;
  }
}

/* Creator showcase — the setup experience, per tier, leading into the CTA. */
.showcase-section {
  background: #fbfcfb;
}

.showcase-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--refresh-rule);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--ct-shadow);
}

.showcase-card__media {
  position: relative;
  border-bottom: 1px solid var(--refresh-rule);
}

.showcase-card__media .capture-slot {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.showcase-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 22px 24px;
}

.showcase-card__body h3 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -.02em;
}

.showcase-card__body p {
  margin: 0;
  color: var(--refresh-muted);
  font-size: 14px;
  line-height: 1.55;
}

.showcase-card__tier {
  display: block;
  margin-bottom: 12px;
  color: var(--ct-green-deep);
  font: 600 10px/1.4 var(--ct-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.showcase-lead {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding: 28px 32px;
  border: 1px solid var(--refresh-rule);
  border-radius: 10px;
  background: var(--refresh-ink);
  color: #fff;
}

.showcase-lead p {
  max-width: 620px;
  margin: 0;
  color: #cdd2d7;
  font-size: 15px;
  line-height: 1.55;
}

.showcase-lead p strong {
  color: #fff;
}

.showcase-lead .button {
  flex: none;
}

/* Founding-cohort band — honest scarcity, no countdown mechanics. */
.founding-band {
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--refresh-rule);
  background:
    linear-gradient(rgba(15, 55, 24, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 55, 24, .05) 1px, transparent 1px),
    #0f1a12;
  background-size: 96px 96px, 96px 96px, auto;
  color: #eaf4ec;
}

.founding-band::before {
  position: absolute;
  width: min(44vw, 620px);
  aspect-ratio: 2 / 1;
  right: -8vw;
  bottom: -12vw;
  border: 1px solid rgba(97, 237, 106, .18);
  border-radius: 50% 50% 0 0;
  content: "";
  transform: rotate(-8deg);
}

.founding-band > .wrap {
  position: relative;
  z-index: 1;
}

.founding-band__grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.founding-band .eyebrow {
  color: var(--ct-green);
}

.founding-band h2 {
  margin-bottom: 20px;
  color: #fff;
  font-size: clamp(36px, 4.4vw, 60px);
  letter-spacing: -.05em;
  line-height: 1;
}

.founding-band__lede {
  max-width: 620px;
  color: #b9c6bd;
  font-size: 18px;
  line-height: 1.55;
}

.founding-card {
  padding: 30px;
  border: 1px solid rgba(97, 237, 106, .28);
  border-radius: 10px;
  background: rgba(15, 30, 20, .55);
}

.founding-card dl {
  display: grid;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.founding-card dl > div {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.founding-card dt {
  margin-bottom: 4px;
  color: var(--ct-green);
  font: 600 10px/1.4 var(--ct-font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.founding-card dd {
  margin: 0;
  color: #eaf4ec;
  font: 600 18px/1.3 var(--ct-font-display);
}

.founding-card dd small {
  display: block;
  margin-top: 3px;
  color: #9fb0a4;
  font: 400 12px/1.5 var(--ct-font-text);
}

.founding-card .button {
  width: 100%;
  margin-top: 22px;
  justify-content: center;
}

.founding-card__note {
  margin: 14px 0 0;
  color: #8fa295;
  font: 500 11px/1.5 var(--ct-font-mono);
  text-align: center;
}

/* Feature-by-tier comparison. Scrolls inside its own container on narrow
   screens so the page body never scrolls sideways. */
.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--refresh-rule);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
}

.compare-table th,
.compare-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--refresh-rule);
  text-align: left;
  vertical-align: middle;
}

.compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--refresh-ink);
  color: #fff;
  font: 600 13px/1.3 var(--ct-font-display);
  letter-spacing: -.01em;
}

.compare-table thead th:first-child {
  font-size: 11px;
  font-family: var(--ct-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.compare-table thead th small {
  display: block;
  margin-top: 3px;
  color: #aeb5bc;
  font: 400 11px/1.4 var(--ct-font-mono);
}

.compare-table tbody th {
  color: var(--refresh-ink);
  font: 500 14px/1.4 var(--ct-font-text);
}

.compare-table tbody th small {
  display: block;
  margin-top: 2px;
  color: var(--refresh-muted);
  font: 400 12px/1.45 var(--ct-font-text);
}

.compare-table td {
  color: var(--refresh-muted);
  font-size: 13.5px;
}

/* Cell sub-labels (e.g. "contracted") stack under the value instead of
   running together into "Unlimitedcontracted" (2026-07-24). */
.compare-table td small {
  display: block;
  margin-top: 2px;
  color: var(--ct-text-tertiary);
  font: 400 11px/1.4 var(--ct-font-text);
}

.compare-table .compare-group th {
  padding-top: 26px;
  color: var(--ct-green-deep);
  font: 600 10px/1.4 var(--ct-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.compare-yes {
  color: var(--ct-green-deep);
  font-weight: 600;
}

.compare-no {
  color: var(--ct-text-tertiary);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Desktop: the table fits without horizontal scroll, so let the page own the
   vertical scroll — the dark header row then sticks under the site header as
   you read down the comparison. On narrower screens the wrap keeps its own
   horizontal scroll (sticky-to-page can't apply there, which is fine). */
@media (min-width: 900px) {
  .compare-wrap {
    overflow: visible;
  }
  .compare-table thead th {
    top: 78px;
  }
}

/* Responsive — new components only. */
@media (max-width: 900px) {
  .spotlight,
  .founding-band__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .spotlight--reverse .spotlight__body,
  .spotlight--reverse .spotlight__media {
    order: 0;
  }

  .showcase-strip {
    grid-template-columns: none;
    grid-auto-columns: min(82vw, 320px);
    grid-auto-flow: column;
    gap: 12px;
    padding: 2px 2px 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .showcase-strip::-webkit-scrollbar { display: none; }
  .showcase-card { scroll-snap-align: start; }

  .showcase-lead {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .media-duo {
    min-height: 0;
  }

  .media-duo .capture-slot--web {
    width: 100%;
  }

  .media-duo .capture-slot--phone {
    position: static;
    width: min(56%, 200px);
    margin-top: 12px;
  }

  .showcase-lead {
    padding: 24px;
  }

  .showcase-lead .button {
    width: 100%;
  }

  .founding-card .button {
    width: 100%;
  }
}

.founding-card__lede {
  margin: 0 0 22px;
  color: #c3cfc7;
  font-size: 15px;
  line-height: 1.55;
}

.grow-retention {
  margin-top: clamp(40px, 6vw, 80px);
}

/* 2026-07-24 composition pass (founder feedback): the green circle-arrow
   badges over the story exhibits read as clutter — retire them everywhere.
   The captions and layout already tell the sequence. */
.program-proof__arrow,
.club-proof-duo__arrow,
.calendar-zoom-arrow,
.transfer-calendar-arrow {
  display: none !important;
}

/* 2026-07-24 composition pass — Lily/enrollment exhibit: the middle phone sat
   over the roster's content and the first phone's caption. New arrangement:
   the web roster owns the left, the two phones stagger down the right edge and
   only kiss the shot's margin. Readable overlap, not coverage. */
.program-proof--enrollment .program-proof__wide {
  top: 40px;
  right: auto;
  left: 0;
  width: 72%;
}
.program-proof--enrollment .program-proof__phone--left {
  top: 0;
  left: auto;
  right: 19%;
}
.program-proof--enrollment .program-proof__phone--middle {
  bottom: 0;
  left: auto;
  right: 0;
  z-index: 3;
}

/* Max/transfer exhibit: the solid green ↓ pill between the calendars joins the
   retired arrow set; the calendars breathe with a plain gap instead, and the
   three columns get more air so nothing feels stacked. */
.program-calendar-shift > span {
  display: none;
}
.program-calendar-shift {
  gap: 16px;
  left: 30.5%;
  width: 39%;
}
.program-proof--transfer .program-proof__phone--request {
  z-index: 2;
}
.program-proof--transfer .program-proof__phone--invite {
  right: 0;
  bottom: 0;
  z-index: 2;
}

/* Sam/delivery exhibit: slightly slimmer phones so the register's caption
   stays readable between them. */
.program-proof--delivery .program-proof__phone--coach,
.program-proof--delivery .program-proof__phone--household {
  width: min(28.5%, 215px);
}

/* ——— The engineering band (about.html, 2026-07-24) ———
   A dark, quiet, premium statement of how the platform is built. Ink base,
   hairline rules, mono numerals — the Managed-card language at section scale. */
.craft-band {
  padding: clamp(72px, 9vw, 140px) 0;
  background: var(--refresh-ink);
  color: #f4f6f5;
}

.craft-band .eyebrow {
  color: var(--ct-green-core, #43d478);
}

.craft-band h2 {
  color: #fff;
}

.craft-band .split-heading p:not(.eyebrow) {
  color: #b9c0c6;
}

.craft-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 48px);
}

.craft-platforms span {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #e7ebe9;
  font: 500 11px/1 var(--ct-font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.craft-platforms span em {
  color: #8f979e;
  font-style: normal;
}

.craft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 6vw, 88px);
  margin-top: clamp(34px, 5vw, 60px);
}

.craft-grid article {
  padding: 26px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.craft-grid article > span {
  color: var(--ct-green-core, #43d478);
  font: 600 11px/1 var(--ct-font-mono);
  letter-spacing: .1em;
}

.craft-grid h3 {
  margin: 12px 0 8px;
  color: #fff;
  font-size: 21px;
  letter-spacing: -.02em;
}

.craft-grid p {
  margin: 0;
  color: #b9c0c6;
  font-size: 15px;
  line-height: 1.6;
}

.craft-band .craft-foot {
  margin-top: clamp(30px, 4vw, 48px);
  color: #8f979e;
  font-size: 14px;
}

.craft-band .craft-foot a {
  color: #fff;
}

@media (max-width: 760px) {
  .craft-grid {
    grid-template-columns: 1fr;
  }
}

/* ——— Raw device captures (2026-08-14) ———
   Phone imagery is now the untouched device capture — 1206 × 2622, straight
   off the simulator, with nothing drawn around it. The baked phone-body frame
   below was rejected; these slots get rounded corners and a soft shadow and
   nothing more, so what ships is exactly what the screen showed. */
.hero-phone.is-raw,
.media-duo .capture-slot--phone.is-raw,
.capture-slot--phone.is-raw {
  overflow: hidden;
  aspect-ratio: 1206 / 2622;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(27, 34, 39, .18);
}

.capture-slot--phone.is-raw::after { content: none; }

.hero-phone.is-raw img,
.capture-slot--phone.is-raw img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: top center;
}

/* The 2026-07-24 `is-baked` rules stood here. They existed to stop the CSS
   double-framing a PNG that already carried a drawn phone body; that treatment
   was rejected, the framed PNGs are gone, and no page carries the class. */

/* ——— Workspace carousel (home, 2026-07-24 round 5) ———
   A horizontal, snap-scrolling strip of real workspaces across the demo
   organizations, each guiding into its route page. */
.workspace-carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px 4px 26px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c6ccd2 transparent;
}

.workspace-card {
  /* Deliberately under a full width so the next card always peeks — the
     cheapest and least noisy way to say "this moves sideways". */
  flex: 0 0 min(66%, 900px);
  overflow: hidden;
  border: 1px solid var(--refresh-rule);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(31, 35, 40, .08);
  color: inherit;
  scroll-snap-align: start;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.workspace-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 64px rgba(31, 35, 40, .13);
}

.workspace-card figure {
  margin: 0;
}

.workspace-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
  border-bottom: 1px solid var(--refresh-rule);
}

.workspace-card figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding: 15px 18px;
}

.workspace-card figcaption strong {
  color: var(--refresh-ink);
  font: 600 16px/1.3 var(--ct-font-display);
  letter-spacing: -.01em;
}

.workspace-card figcaption span {
  color: var(--refresh-muted);
  font-size: 13.5px;
}

.workspace-card figcaption em {
  margin-left: auto;
  color: var(--ct-green-deep);
  font: 600 11px/1.4 var(--ct-font-mono);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.workspace-card--managed {
  background: var(--refresh-ink);
}

.workspace-card--managed img {
  border-bottom-color: rgba(255, 255, 255, .16);
}

.workspace-card--managed figcaption strong { color: #fff; }
.workspace-card--managed figcaption span { color: #b9c0c6; }
.workspace-card--managed figcaption em { color: var(--ct-green-core, #43d478); }

@media (max-width: 620px) {
  .workspace-card { flex-basis: 88%; }
}



/* Managed route theme (onboarding.html joins clubs/programs as a full route). */
.route-theme--managed .page-hero {
  background:
    radial-gradient(circle at 82% 20%, rgba(32, 36, 42, .1), transparent 26%),
    linear-gradient(rgba(32, 36, 42, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 36, 42, .05) 1px, transparent 1px),
    #f7f8f9;
  background-size: auto, 84px 60px, 84px 60px, auto;
}

.route-theme--managed .page-hero::after {
  position: absolute;
  width: clamp(280px, 34vw, 560px);
  aspect-ratio: 1.6 / 1;
  right: -4vw;
  bottom: -7vw;
  border: 1px solid rgba(32, 36, 42, .14);
  border-radius: 14px;
  content: "";
  transform: rotate(-4deg);
}

.route-theme--managed .trust-grid {
  grid-template-columns: repeat(5, 1fr);
}

/* ——— Technical dossier (Company page) — spec-sheet grid under the band. */
.dossier-section {
  background: #fbfcfb;
}

.dossier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 56px) clamp(36px, 5vw, 84px);
  margin-top: clamp(30px, 4vw, 54px);
}

.dossier-group h3 {
  margin: 0 0 6px;
  color: var(--ct-green-deep);
  font: 600 11px/1.4 var(--ct-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dossier-group dl {
  margin: 0;
}

.dossier-group dl > div {
  display: grid;
  grid-template-columns: minmax(120px, 150px) 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--refresh-rule);
}

.dossier-group dl > div:last-child {
  border-bottom: 0;
}

.dossier-group dt {
  color: var(--refresh-ink);
  font: 600 14px/1.45 var(--ct-font-text);
}

.dossier-group dd {
  margin: 0;
  color: var(--refresh-muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .dossier-grid { grid-template-columns: 1fr; }
  .dossier-group dl > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ——— "Made yours" theming exhibits (Managed page, 2026-07-24) ——— */
.theming-section {
  background: #fbfcfb;
}

.theming-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.5vw, 30px);
  margin-top: clamp(30px, 4vw, 54px);
}

.theming-card {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--refresh-rule);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(31, 35, 40, .08);
}

.theming-card img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--refresh-rule);
}

.theming-card figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding: 13px 16px;
}

.theming-card figcaption strong {
  color: var(--refresh-ink);
  font: 600 15px/1.3 var(--ct-font-display);
  letter-spacing: -.01em;
}

.theming-card figcaption span {
  color: var(--refresh-muted);
  font-size: 13px;
}

.theming-card figcaption em {
  margin-left: auto;
  color: var(--ct-text-tertiary);
  font: 500 9px/1.4 var(--ct-font-mono);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .theming-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tap any capture to see it properly
   ═══════════════════════════════════════════════════════════════════════════

   The affordance has to be quiet. A visitor scanning features cares about two
   of them and not the other six, so this must be findable without competing
   with the copy: the cursor changes, and a low-contrast chip fades in under
   the pointer. Nothing moves, pulses or announces itself until a click.
   ------------------------------------------------------------------------ */

.is-zoomable {
  cursor: zoom-in;
}

.is-zoomable:focus-visible {
  outline: 2px solid var(--ct-green-deep, #0f6b3d);
  outline-offset: 3px;
}

/*
 * The chip rides the figure, not the image, so it survives the image being
 * cropped or overflowing its frame.
 *
 * Only elements that are STATIC need a positioning context. Listing
 * `.hero-phone` here overrode its own `position: absolute` and dropped the
 * whole hero fan into normal flow, stacking three phones on top of the
 * headline — so anything already positioned is left alone.
 */
figure:has(> .is-zoomable),
.hero-browser:has(.is-zoomable),
.spotlight__media:has(.is-zoomable) {
  position: relative;
}

figure:has(> .is-zoomable)::after,
.hero-browser:has(.is-zoomable)::after {
  content: "⤢";
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 12px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: rgba(21, 26, 30, .55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

@media (hover: hover) and (pointer: fine) {
  figure:has(> .is-zoomable):hover::after,
  .hero-browser:has(.is-zoomable):hover::after {
    opacity: 1;
  }
}

.lb {
  position: fixed;
  z-index: 200;
  inset: 0;
}

.lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 20, 24, .82);
  opacity: 0;
  transition: opacity .34s ease;
  backdrop-filter: blur(3px);
}

.lb__img {
  position: absolute;
  /* The opened picture is the thumbnail, moved and grown — so it starts at the
     thumbnail's exact rect and the eye never loses the subject. Only transform
     is animated, so this stays on the compositor. */
  transform-origin: center center;
  border-radius: 10px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .45);
  cursor: zoom-out;
  will-change: transform;
}

.lb__close {
  position: absolute;
  top: 20px;
  right: 24px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease;
}

.lb__close:hover,
.lb__close:focus-visible {
  background: rgba(255, 255, 255, .24);
}

@media (prefers-reduced-motion: reduce) {
  .lb__backdrop,
  .lb__img {
    transition: none !important;
  }
}

/* ── The carousel says out loud that it moves ─────────────────────────────
   Three signals, none of them noisy: the next card always peeks past the
   right edge, that edge fades, and two arrows sit on the rail. The arrows
   disable themselves at each end rather than disappearing, so the control
   never moves under the pointer. */

.carousel-rail {
  position: relative;
}

.carousel-rail::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 96px;
  height: 100%;
  background: linear-gradient(90deg, rgba(250, 250, 249, 0), var(--refresh-bg, #fafaf9));
  opacity: 1;
  transition: opacity .25s ease;
  pointer-events: none;
}

.carousel-rail.is-at-end::after {
  opacity: 0;
}

.carousel-nav {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 0 0 14px;
}

.carousel-nav__btn {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--refresh-rule, #d6dade);
  border-radius: 999px;
  background: #fff;
  color: var(--refresh-ink, #1b2227);
  cursor: pointer;
  transition: border-color .2s ease, opacity .2s ease, background .2s ease;
}

.carousel-nav__btn:hover:not(:disabled) {
  border-color: var(--ct-green-deep, #0f6b3d);
  background: #f4f8f5;
}

.carousel-nav__btn:disabled {
  cursor: default;
  opacity: .3;
}

@media (max-width: 767px) {
  .carousel-nav {
    display: none;
  }
}