/* The marketing site: /, /current-owners-and-leaders, /next-generation-leaders.
 *
 * Only these pages load this file. Anything generic — buttons, .wrap, .ticks,
 * .note, .confidentiality, the brandmark, the footer floor — lives in brand.css,
 * which every page loads. The rule that matters here (stylesheet-coverage.test.js):
 * a class used in this markup must be styled in brand.css, in this file, or
 * nowhere at all.
 *
 * .eyebrow, .lede and .wrap--wide are deliberate duplicates of plan.css — these
 * pages do not load plan.css, and importing a 2,000-line app stylesheet for
 * three utility classes would couple the marketing site to the app's redesigns.
 */

.site-body {
  background: var(--paper);
}

/* ------------------------------------------------------------- header */

.site-top {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

/* Wrapping, the same lesson the plan's `.chrome__inner` learned: a header row
   that cannot break takes the whole body sideways instead. The brandmark and
   the shrunk CTA come to 334px against 335px of content at 375px — ONE pixel
   of slack, which is why 375 looked fine and 320 scrolled 34px sideways. Below
   that the CTA drops to a second line rather than off the screen. */
.site-top__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  min-height: 64px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Scoped to the page links only. An unscoped `.site-nav a` outranks `.btn`
   (one class + one element beats one class), which turned the header CTA's
   white text dark on the green fill. */
.site-nav__page a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav__page a:hover {
  color: var(--ink);
}

.btn--small {
  min-height: 42px;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}

/* The audience-page links vanish on a phone; the header keeps the brandmark
   and the one action that matters. Both pages remain reachable through the
   path cards on the home page. The button shrinks so it stays on one line
   beside the brandmark at 375px. */
@media (max-width: 640px) {
  .site-nav__page {
    display: none;
  }

  .site-top .btn--small {
    min-height: 38px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------- shared */

.wrap--wide {
  max-width: 62rem;
}

.eyebrow {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0 0 0.4rem;
}

.lede {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  border-top: 1px solid var(--rule);
}

.section--flush {
  border-top: 0;
}

.section--alt {
  background: var(--paper-alt);
}

.section h2 {
  max-width: 26ch;
}

.section > .wrap > p,
.section > .wrap--wide > p {
  max-width: var(--measure);
}

/* -------------------------------------------------------------- hero */

.hero {
  padding-top: 4rem;
  padding-bottom: 3.5rem;
}

.hero h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  max-width: 22ch;
}

.hero .lede {
  max-width: 40rem;
  margin-bottom: 1.75rem;
}

.hero__cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.hero__meta {
  font-size: 0.875rem;
  color: var(--gray);
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
  margin-top: 1.5rem;
  max-width: 36rem;
}

/* Home only: copy on the left, the sample report's radar on the right. The
   radar is the deliverable, and showing the deliverable is the most
   interesting thing the first screen can do. Stacks below the CTA on a phone. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 3rem;
  align-items: center;
}

@media (max-width: 860px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ------------------------------------------------- the sample radar

   The SVG inside is the output of shared/radar.js — the same renderer the
   results page and the report PDF use, so the picture on the marketing site
   is exactly the deliverable. Regenerate it there, never redraw it here. */

.radar-sample {
  margin: 0;
  --radar-font: var(--body);
  --radar-display: var(--display);
}

.radar-sample svg {
  width: 100%;
  height: auto;
  display: block;
}

.radar-sample figcaption {
  font-size: 0.8125rem;
  color: var(--gray);
  margin-top: 0.35rem;
  text-align: center;
}

/* On the audience pages the radar sits inside the narrow column, centered —
   its caption centers within the figure, so the figure must center within
   the column or both read as drifting. */
.radar-sample--inline {
  max-width: 30rem;
  margin: 1.5rem auto 0;
}

/* A CTA directly under a centered figure: left-flush reads as misaligned
   against the chart's axis, and with no top margin it crowds the caption. */
.hero__cta--center {
  justify-content: center;
  margin-top: 1.5rem;
}

/* -------------------------------------------------- the two path cards */

/* `minmax(min(19rem, 100%), 1fr)` and not `minmax(19rem, 1fr)`.

   19rem is 304px, and a 320px phone leaves 280px inside `.wrap` — so the
   MINIMUM is wider than the track, the column refuses to shrink to it, and the
   card hangs 24px past the padding, which scrolls the whole PAGE sideways.
   `min(…, 100%)` says "19rem, or the whole track, whichever is smaller", which
   is what auto-fit was always meant to mean, and it changes nothing above
   304px. Every 19rem grid carries it — `.quotes` and `.video-grid` below, and
   `.demo-close__grid` in demo.css. `npm run widths -- --width=320` measures it. */
.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.path {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: 1.5rem 1.6rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease;
}

.path:hover {
  border-color: var(--green);
}

.path h3 {
  margin-bottom: 0.4rem;
}

.path p {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin: 0 0 0.75rem;
}

/* /cohort's "what each side gets" and "who it's for" blocks are lists. */
.path ul {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
}

.path li {
  margin-bottom: 0.4rem;
}

.path__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--green-dark);
}

/* ------------------------------------------------------ the bell curve */

/* The chart and its kicker are a centered composition: the figure was
   left-pinned at a different width than the text column above it, which read
   as accidentally off-center. */
.bell {
  margin: 1.5rem auto 0;
  max-width: 40rem;
}

.bell svg {
  width: 100%;
  height: auto;
  display: block;
}

.bell figcaption {
  font-size: 0.8125rem;
  color: var(--gray);
  margin-top: 0.5rem;
  text-align: center;
}

.bell__label {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  fill: var(--ink-soft);
}

.bell__label--mid {
  fill: var(--green-dark);
}

/* The annotation over the fork's origin, and the two fork labels. */
.bell__note {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink);
}

.bell__fork {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
}

/* The punchline, promoted out of the paragraph body: the last thing read
   before the assessment section starts. */
.bell-kicker {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--ink);
  max-width: 36rem;
  margin: 1.25rem auto 0;
  text-align: center;
}

/* The SVG scales with the viewport, so at 375px its 13-15px text renders
   around 7px. Bumping the SVG font sizes compensates; the side labels are
   anchored to the chart's edges in the markup so nothing collides. */
@media (max-width: 640px) {
  .bell__label {
    font-size: 18px;
  }

  .bell__note {
    font-size: 20px;
  }

  .bell__fork {
    font-size: 18px;
  }
}

/* ------------------------------------------------------- quoted stakes */

.stakes {
  border-left: 3px solid var(--green);
  padding-left: 1.25rem;
  max-width: var(--measure);
  margin: 0;
}

.stakes p {
  font-size: 1.0625rem;
  color: var(--ink);
}

.stakes p:last-child {
  margin-bottom: 0;
}

/* The one link inside the owners' stakes block, to the /at-stake calculator:
   an owner's own figure anchors better than the range the prose gives. Quiet on
   purpose — a text link, not a button — so the page keeps one primary action. */
.stakes__link {
  margin-top: 0.75rem;
}

.stakes__link a {
  font-family: var(--display);
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: none;
}

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

/* ------------------------------------------- the ladder, as three steps */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.75rem;
  margin-top: 1.5rem;
  counter-reset: step;
}

.step {
  counter-increment: step;
  border-top: 3px solid var(--green);
  padding-top: 1rem;
}

.step h3::before {
  content: 'Step ' counter(step);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 0.35rem;
}

.step p {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin: 0 0 0.6rem;
}

.step__go {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.875rem;
}

/* --------------------------------------------------------- credibility */

.bio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  max-width: 46rem;
}

.bio p {
  font-size: 1.0625rem;
}

.colleagues {
  max-width: 46rem;
  margin-top: 2.75rem;
}

.colleagues h3 {
  margin-bottom: 0.5rem;
}

.colleagues p {
  font-size: 1.0625rem;
}

.colleagues__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 1rem;
}

.colleague dt {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

/* 96px, not the 74px a literal half of David's would be: at 74px a face stops
   being readable and the two of them read as decoration rather than as people,
   which is the opposite of why they are named here at all. */
/* Both sources come from delkconsulting.com, cropped square through the
   project's own Chromium (there is no ImageMagick here, and
   /c/WINDOWS/system32/convert is the Windows disk utility). Two things to
   know if these are ever regenerated:

   - Fetch with an explicit Accept: image/jpeg or image/png. That CDN
     transcodes to WebP and serves it under the original .JPG/.PNG name.
   - Rick's source is a TRANSPARENT png, so his backdrop is painted in rather
     than photographed: Brandon's studio grey, sampled — rgb(212) at the top
     easing to rgb(203) — so the two of them read as one set. His own pixels
     are drawn over it untouched. David's photo is a real room and is
     deliberately NOT matched; faking it would mean masking him out.

   The background below is only what shows if an image fails to load. */
.colleague__photo {
  flex: none;
  width: 96px;
  height: 96px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: rgb(209, 209, 209);
}

.colleague dd {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* A circle, not a rounded rectangle, since the two colleagues below are
   circles too — three people in two frame shapes reads as an accident. The
   source is still the 534x800 portrait; the square crop and the face position
   are done here rather than by cutting a second asset. */
.bio__photo {
  display: block;
  width: 176px;
  height: 176px;
  aspect-ratio: 1;
  object-fit: cover;
  /* 6%, not a centre crop and not the 22% this shipped with: a square taken
     out of a 534x800 portrait has ~87px of vertical overflow, and 22% of it
     came off the top, which put David's hair against the edge of the circle.
     Reported by David. Lower the number for more headroom. */
  object-position: 50% 6%;
  border-radius: 50%;
  box-shadow: var(--shadow);
}

@media (max-width: 560px) {
  .bio {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .bio__photo {
    width: 132px;
  }
}

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1.75rem 2.5rem;
  margin-top: 2rem;
}

/* ------------------------------------------------ testimonial carousel

   A scroll-snap row, not an auto-advancing carousel: it never moves on its
   own (motion nobody asked for reads as advertising), it works with plain
   swipe/scroll when JavaScript is off, and the arrows and dots are wired up
   by site.js when it loads. */

.carousel {
  position: relative;
  margin-top: 2rem;
}

.carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel .quote {
  flex: 0 0 min(100%, 26rem);
  scroll-snap-align: start;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--green);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem 1.25rem;
}

.carousel .quote blockquote {
  border-left: 0;
  padding-left: 0;
  font-size: 1.0625rem;
}

.carousel .quote figcaption {
  margin-left: 0;
}

.carousel__nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.carousel__btn {
  width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.carousel__btn:hover {
  border-color: var(--gray);
  background: var(--paper-alt);
}

.carousel__dots {
  display: flex;
  gap: 0.5rem;
  margin: 0 0.25rem;
  padding: 0;
  list-style: none;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rule);
  cursor: pointer;
}

.carousel__dot.is-active {
  background: var(--green);
}

.quote {
  margin: 0;
}

.quote blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  border-left: 3px solid var(--green);
  padding-left: 1.1rem;
}

.quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.75rem 0 0 1.35rem;
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray);
}

/* The thumbnails are generated from the archived live-site photos
   (squarespace-archive/images) — the same pictures these five people already
   appeared with on Squarespace. Alt is empty on purpose: the name is the very
   next text, and a screen reader should not say it twice. */
.quote__face {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------- /at-stake calculator */

.calc {
  border: 2.5px solid var(--green);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.75rem 1.1rem;
  max-width: 34rem;
}

.calc input[type='range'] {
  width: 100%;
  accent-color: var(--green);
}

.calc-out {
  max-width: 34rem;
  margin-top: 1.75rem;
}

.calc-out__label {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0;
}

.calc-out__big {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.15rem;
}

.calc-out__per {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin: 0 0 1rem;
}

.calc-out__narrative {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.45;
  max-width: 32rem;
}

/* The sentence over the worth table: what a point of confidence is read as. */
.calc-out__worth {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 32rem;
  margin: 1rem 0 0;
}

.calc-out__table {
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-variant-numeric: tabular-nums;
}

.calc-out__table td {
  border-top: 1px solid var(--rule);
  padding: 0.4rem 2.25rem 0.4rem 0;
  color: var(--ink-soft);
}

.calc-out__table td:last-child {
  font-weight: 700;
  color: var(--ink);
}

.calc-out__costs {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 32rem;
}

.calc-privacy {
  max-width: 34rem;
  margin-top: 0.75rem;
}

/* ------------------------------------------------------- video page

   /video-resource — the live site's path, preserved. Vimeo iframes in fixed
   16:9 boxes so the page never reflows as players initialize. */

.video {
  margin: 0;
}

.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  display: block;
}

.video figcaption {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  margin-top: 0.5rem;
}

.video--feature {
  max-width: 46rem;
  margin-bottom: 2.5rem;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 2rem 2.5rem;
}

/* ------------------------------------------------------------ closing

   A full-bleed band in the darkened brand green (the derived step, not the
   logo green — white text on #00af85 fails contrast; on --green-dark it
   passes). The one loud moment on the page, which is why there is only one. */

.close-cta {
  background: var(--green-dark);
  color: #fff;
  padding-top: 4rem;
  padding-bottom: 4.5rem;
  text-align: left;
}

.close-cta h2 {
  color: #fff;
  max-width: 24ch;
}

.close-cta .hero__cta {
  margin-top: 1.25rem;
}

.btn--inverse {
  background: #fff;
  color: var(--green-dark);
}

/* ------------------------------------------------ the cohort page (/cohort) */

.cohort-facts {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0.75rem 0 1.25rem;
}

/* The two-column cards, reused as static panels rather than links. */
.path--static {
  cursor: default;
}

.yr {
  margin: 1.25rem 0 0;
  padding-left: 1.25rem;
  max-width: var(--measure);
}

.yr li {
  margin-bottom: 0.6rem;
}

.qa {
  max-width: var(--measure);
  margin: 1.25rem 0 0;
}

.qa dt {
  font-family: var(--display);
  font-weight: 700;
  margin-top: 1.1rem;
}

.qa dd {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
}

/* --------------------------------------------------- the application form */

.app {
  max-width: var(--measure);
}

.app__q {
  border: 0;
  padding: 0;
  margin: 1.5rem 0 0;
}

.app__q legend {
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding: 0;
}

.app__q legend small,
.app__field small {
  font-weight: 400;
  color: var(--gray);
}

.app__choices {
  display: grid;
  gap: 0.4rem;
}

.app__choice {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}

.app__choice:has(input:checked) {
  border-color: var(--green);
  background: var(--paper-alt);
}

.app__row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: 1rem;
}

.app__field {
  display: grid;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.app__field input,
.app__q textarea {
  font: inherit;
  font-weight: 400;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}

.app__q textarea {
  resize: vertical;
}

.app__err {
  color: var(--flag-priority, #c0392b);
  font-size: 0.85rem;
  font-style: normal;
  margin: 0.3rem 0 0;
}

.app__invite {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
}

.app__invite h3 {
  margin: 0 0 0.4rem;
}

.app__invite p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* The honeypot: absent for people, present for scrapers. */
.app__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.app__submit {
  margin-top: 1.75rem;
}

.app__done {
  max-width: var(--measure);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--green);
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
}

.btn--inverse:hover:not(:disabled) {
  background: var(--green-tint);
  color: var(--green-dark);
}

/* One testimonial set apart as the proof for the claim right above it — the
   owners' page puts Thomas Renfrow under the bell curve, because he is the
   middle group that succeeded with a plan. Same .quote inside; only the frame
   and the width change. */
.quote-feature {
  max-width: 36rem;
  margin: 2.5rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

/* /at-stake: what to count in the amount, as a line under the question rather
   than a placeholder — a placeholder disappears at the first keystroke, which
   is exactly when somebody is working out what to include. */
.calc__hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--gray);
  margin: -0.15rem 0 0.45rem;
}

/* The years box. brand.css styles text and email fields but not number ones,
   so this sat as a bare browser box under a full-width amount field. Same
   look as the text input, sized to the two digits it holds. */
.calc input[type='number'] {
  width: 7rem;
  min-height: 50px;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
}

/* The calculator follows the hero directly: the hero's bottom padding plus a
   full section top left a screen-height gap between the question and the
   place to answer it. */
.calc-section {
  padding-top: 0;
}