/* ==========================================================================
   COHORT — prelaunch website
   Single stylesheet. Mobile-first. No external font or asset requests.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Canonical brand colours */
  --cohort-ink: #0F2B4D;
  --cohort-ivory: #F4F1E8;

  /* Ink family */
  --cohort-ink-deep: #08192C;
  --cohort-ink-dark: #0B2039;
  --cohort-ink-hover: #173B63;
  --cohort-ink-muted: #28527E;

  /* Warm neutrals */
  --cohort-warm-white: #FAF8F3;
  --cohort-ivory-soft: #E9E2D5;
  --cohort-border-warm: #DDD6CB;
  --cohort-stone: #D2C9BC;

  /* Text neutrals */
  --cohort-charcoal: #1E2832;
  --cohort-slate: #596B7E;
  /* Part of the canonical palette, but held in reserve: at 3.5:1 on warm white
     it is below the 4.5:1 AA threshold for normal-size text, so small copy
     (.fine, hints, consent lines, field labels) uses --cohort-slate instead. */
  --cohort-muted-text: #7A8793;

  /* Derived, not a brand colour.
     --cohort-stone is too light to serve as the boundary of an interactive
     control: it lands near 1.6:1 on white, where WCAG 2.2 SC 1.4.11 requires
     3:1. This warm taupe stays in the same family and clears 3:1 on white,
     warm white, and ivory. Used for the secondary button and the mobile menu
     button. Decorative rules keep --cohort-border-warm. */
  --cohort-border-control: #8F8778;

  /* Restrained accents */
  --cohort-teal: #3E6F73;
  --cohort-sage: #7E9286;
  --cohort-brass: #B58E58;

  /* States */
  --cohort-success: #2F7A5A;
  --cohort-warning: #A86C1D;
  --cohort-error: #B44A4A;

  /* Typography */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --measure: 1160px;
  --gutter: 20px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 22px;

  /* Elevation — deliberately faint */
  --shadow-sm: 0 1px 2px rgba(15, 43, 77, 0.04);
  --shadow: 0 2px 10px rgba(15, 43, 77, 0.05);
  --shadow-lift: 0 12px 34px rgba(15, 43, 77, 0.09);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 180ms;

  /* Vertical rhythm of the page (layout, not the product term) */
  --section-y: 64px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: 88px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 40px; --section-y: 104px; }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--cohort-warm-white);
  color: var(--cohort-charcoal);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--cohort-ink);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1, h2 { font-family: var(--font-display); }

h1 { font-size: clamp(2.05rem, 1.35rem + 3.1vw, 3.35rem); }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.8vw, 2.45rem); }

h3 {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--cohort-ink); text-underline-offset: 3px; }
a:hover { color: var(--cohort-ink-hover); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: 0.45em; }

hr {
  border: 0;
  border-top: 1px solid var(--cohort-border-warm);
  margin: 2.5rem 0;
}

strong { font-weight: 600; color: var(--cohort-ink); }

::selection { background: var(--cohort-ivory-soft); color: var(--cohort-ink); }

/* Focus — never suppressed. */
:focus-visible {
  outline: 2px solid var(--cohort-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.on-ink :focus-visible { outline-color: var(--cohort-ivory); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.7); }

.section--ivory { background: var(--cohort-ivory); }

.section--ink {
  background: var(--cohort-ink);
  color: var(--cohort-ivory);
}

.section--ink h2,
.section--ink h3,
.section--ink h4 { color: var(--cohort-ivory); }

.section--ink a { color: var(--cohort-ivory); }

.rule { border-top: 1px solid var(--cohort-border-warm); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--cohort-ink);
  color: var(--cohort-ivory);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: top var(--speed) var(--ease);
}

.skip-link:focus { top: 12px; color: var(--cohort-ivory); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Typographic helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  margin: 0 0 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cohort-ink-muted);
}

.section--ink .eyebrow { color: var(--cohort-stone); }

.lede {
  font-size: clamp(1.06rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--cohort-slate);
  max-width: 60ch;
}

.section--ink .lede { color: var(--cohort-ivory-soft); }

.section-head { max-width: 44rem; margin-bottom: 40px; }
.section-head p:last-child { margin-bottom: 0; }

.section__after { margin: 32px 0 0; }
.measure-prose { max-width: 62ch; }

.fine {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--cohort-slate);
}

/* --------------------------------------------------------------------------
   5. Brand mark
   -------------------------------------------------------------------------- */

/* The C–O mark, traced from the supplied artwork — see assets/icons/cohort-mark.svg
   for the measured construction. It stands alone and is never paired with
   lettering: setting it beside "HORT" made the eye group it as one symbol and
   read the result as two words, "CO HORT". The product name instead appears in
   the page title, the accessible label on this link, and the body copy of the
   first viewport on every page.

   The inline SVG has aspect ratio 1840.8 : 1011.8 (≈1.82), so `width: auto`
   against a fixed height is what keeps it undistorted. Never set both. */
.cohort-mark {
  display: inline-flex;
  align-items: center;
  color: var(--cohort-ink);
  line-height: 1;
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}

.cohort-mark__glyph {
  display: block;
  height: 26px;
  width: auto;
  flex: none;
}

@media (min-width: 900px) {
  .cohort-mark__glyph { height: 30px; }
}

.cohort-mark:hover { color: var(--cohort-ink-hover); }

.on-ink .cohort-mark,
.cohort-mark--ivory { color: var(--cohort-ivory); }
.cohort-mark--ivory:hover { color: #fff; }

/* The footer mark sits above the tagline and can carry a little more weight. */
.site-footer .cohort-mark__glyph { height: 34px; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

/* A button should feel like it takes the press. Small lift on hover, and a
   settle back down on click — no bounce, no scale-up. */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 60ms; }

.btn--primary:hover { box-shadow: 0 6px 16px rgba(15, 43, 77, 0.18); }
.btn--primary:active { box-shadow: 0 1px 3px rgba(15, 43, 77, 0.2); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

.btn--primary {
  background: var(--cohort-ink);
  border-color: var(--cohort-ink);
  color: var(--cohort-ivory);
}

.btn--primary:hover {
  background: var(--cohort-ink-hover);
  border-color: var(--cohort-ink-hover);
  color: var(--cohort-ivory);
}

.btn--secondary {
  background: transparent;
  border-color: var(--cohort-border-control);
  color: var(--cohort-ink);
}

.btn--secondary:hover {
  border-color: var(--cohort-ink);
  background: rgba(15, 43, 77, 0.03);
}

.btn--on-ink {
  background: var(--cohort-ivory);
  border-color: var(--cohort-ivory);
  color: var(--cohort-ink);
}

.btn--on-ink:hover { background: #fff; border-color: #fff; color: var(--cohort-ink); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cohort-slate);
  padding-inline: 14px;
}

.btn--ghost:hover { color: var(--cohort-ink); background: rgba(15, 43, 77, 0.04); }
.btn--ghost.is-copied { color: var(--cohort-success); background: rgba(47, 122, 90, 0.07); }

.btn--lg { min-height: 52px; padding: 15px 28px; font-size: 1rem; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cohort-ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.link-quiet:hover {
  color: var(--cohort-ink);
  border-bottom-color: var(--cohort-stone);
}

.link-quiet__arrow {
  display: inline-block;
  transition: transform var(--speed) var(--ease);
}

.link-quiet:hover .link-quiet__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .link-quiet:hover .link-quiet__arrow { transform: none; }
}

.link-quiet--on-ink { color: var(--cohort-ivory-soft); }
.link-quiet--on-ink:hover { color: var(--cohort-ivory); border-bottom-color: var(--cohort-stone); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.site-header.is-stuck {
  background: rgba(250, 248, 243, 0.92);
  border-bottom-color: var(--cohort-border-warm);
}

@supports (backdrop-filter: blur(8px)) {
  .site-header.is-stuck { backdrop-filter: blur(8px); }
}

/* Hairline reading progress along the bottom edge of the header. */
.site-header__progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
}

.site-header.is-stuck .site-header__progress { opacity: 1; }

.site-header__progress span {
  display: block;
  height: 100%;
  background: var(--cohort-teal);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--cohort-border-control);
  border-radius: var(--radius-sm);
  color: var(--cohort-ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 550;
  cursor: pointer;
}

.site-nav__toggle-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 10px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transition: border-color var(--speed) var(--ease);
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.site-nav__toggle-icon::before { top: 4.25px; }
.site-nav__toggle-icon::after { top: 4.25px; }

/* Open: the two rules become a cross. */
.site-nav__toggle.is-open .site-nav__toggle-icon { border-color: transparent; }
.site-nav__toggle.is-open .site-nav__toggle-icon::before { opacity: 1; transform: rotate(45deg); }
.site-nav__toggle.is-open .site-nav__toggle-icon::after { opacity: 1; transform: rotate(-45deg); }

.site-nav__toggle:hover { border-color: var(--cohort-ink); }

.site-nav__panel {
  display: none;
  padding: 4px 0 24px;
}

.site-nav__panel.is-open {
  display: block;
  animation: nav-drop 220ms var(--ease);
}

@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__panel.is-open { animation: none; }
}

.site-nav__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.site-nav__list li { margin: 0; }

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 2px;
  color: var(--cohort-charcoal);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--cohort-border-warm);
}

.site-nav__link:hover { color: var(--cohort-ink); }
.site-nav__link[aria-current] { color: var(--cohort-ink); font-weight: 600; }

.site-nav__cta { display: block; }
.site-nav__cta .btn { width: 100%; }

.site-header__cta-desktop { display: none; }

@media (min-width: 900px) {
  .site-nav__toggle { display: none; }

  .site-nav__panel {
    display: flex !important;
    align-items: center;
    gap: 28px;
    padding: 0;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0;
  }

  .site-nav__link {
    min-height: 44px;
    padding: 0;
    border-bottom: 1px solid transparent;
    font-size: 0.9375rem;
    color: var(--cohort-slate);
    transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
  }

  .site-nav__link:hover { color: var(--cohort-ink); border-bottom-color: var(--cohort-stone); }

  /* Scroll spy. The weight change carries the state as well as the rule, so
     it is never signalled by colour alone. */
  .site-nav__link[aria-current] {
    color: var(--cohort-ink);
    font-weight: 600;
    border-bottom-color: var(--cohort-teal);
  }

  .site-nav__cta { display: none; }
  .site-header__cta-desktop { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: 44px calc(var(--section-y) * 0.9); }

.hero__grid {
  display: grid;
  gap: 48px;
  align-items: start;
}

@media (min-width: 1024px) {
  .hero { padding-block: 64px var(--section-y); }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 64px;
    align-items: center;
  }
}

.hero__headline { margin-bottom: 22px; }

.hero__support { max-width: 46ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 28px;
}

/* On narrow screens a call to action reads better full width. */
@media (max-width: 479px) {
  .hero__actions .btn { width: 100%; }
}

.hero__status {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--cohort-border-warm);
  max-width: 46ch;
}

.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--cohort-teal);
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   9. Product mockup (HTML/CSS — not a screenshot)
   -------------------------------------------------------------------------- */

.mockup {
  background: #fff;
  border: 1px solid var(--cohort-border-warm);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.mockup__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--cohort-ivory);
  border-bottom: 1px solid var(--cohort-border-warm);
}

.mockup__title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cohort-ink-muted);
}

.mockup__meta { font-size: 0.75rem; color: var(--cohort-slate); }

.mockup__tabs {
  display: flex;
  gap: 4px;
  padding: 12px 12px 0;
  border-bottom: 1px solid var(--cohort-border-warm);
  overflow-x: auto;
  scrollbar-width: none;
}

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

.mockup__tab {
  flex: none;
  min-height: 44px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--cohort-slate);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.mockup__tab:hover { color: var(--cohort-ink); border-bottom-color: var(--cohort-stone); }

.mockup__tab[aria-selected="true"] {
  color: var(--cohort-ink);
  border-bottom-color: var(--cohort-ink);
}

.mockup__panel { padding: 8px 18px 20px; }
.mockup__panel[hidden] { display: none; }

/* Switching horizon should feel like the list refreshed, not like the page
   jumped. Runs once per switch and never loops. */
.mockup__panel.is-entering { animation: panel-in 240ms var(--ease); }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mockup__panel.is-entering { animation: none; }
}

.attention-list { list-style: none; margin: 0; padding: 0; }

.attention-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--cohort-ivory-soft);
  margin: 0;
}

.attention-item:last-child { border-bottom: 0; padding-bottom: 4px; }

.attention-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}

.attention-item__who {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--cohort-ink);
  letter-spacing: -0.005em;
}

.attention-item__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cohort-teal);
}

.attention-item__why {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--cohort-slate);
  max-width: none;
}

.attention-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--cohort-border-warm);
  border-radius: 999px;
  background: var(--cohort-warm-white);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cohort-slate);
}

.chip--ink { border-color: var(--cohort-ink); color: var(--cohort-ink); background: #fff; }

.chip { transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease); }
.attention-item:hover .chip--ink { border-color: var(--cohort-ink-hover); color: var(--cohort-ink-hover); }
.groups .chip:hover { border-color: var(--cohort-ink); color: var(--cohort-ink); }

/* --------------------------------------------------------------------------
   10. Cards & grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 20px; }

@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 940px) {
  .grid { gap: 26px; }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--cohort-border-warm);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--cohort-stone);
}

.card--plain:hover, .card--ink:hover { transform: none; box-shadow: none; }
.card--ink:hover { border-color: rgba(244, 241, 232, 0.3); }

@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
}

.section--ivory .card { background: var(--cohort-warm-white); }

.card__numeral {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--cohort-stone);
  line-height: 1;
}

.card p {
  margin-bottom: 0;
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--cohort-slate);
}

.card--plain {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   10b. Audience hierarchy

   Two primary segments carry the market case and get the full card treatment.
   The high-intensity groups below them are examples of those same two problems,
   not additional personas — so they are set quieter and introduced by a label
   that says so. Four equally weighted cards blurred exactly this distinction.
   -------------------------------------------------------------------------- */

.audience__primary .card { padding: 32px 30px; }

.audience__primary .card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.08rem + 0.6vw, 1.45rem);
  margin-bottom: 12px;
}

.audience__primary .card p { font-size: 1.0313rem; }

.audience__acute {
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--cohort-border-warm);
}

.audience__acute-label {
  margin: 0 0 26px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cohort-ink-muted);
}

.audience__acute h4 {
  margin-bottom: 7px;
  font-size: 1.0313rem;
  color: var(--cohort-ink);
}

.audience__acute p {
  margin: 0;
  font-size: 0.9688rem;
  color: var(--cohort-slate);
}

.card--ink {
  background: var(--cohort-ink-dark);
  border-color: rgba(244, 241, 232, 0.14);
  box-shadow: none;
}

.card--ink h3 { color: var(--cohort-ivory); }
.card--ink p { color: var(--cohort-ivory-soft); }

/* --------------------------------------------------------------------------
   11. Product preview
   -------------------------------------------------------------------------- */

.preview {
  display: grid;
  gap: 28px;
  align-items: center;
  padding-block: 34px;
  border-top: 1px solid var(--cohort-border-warm);
}

.preview:first-of-type { border-top: 0; padding-top: 6px; }

@media (min-width: 900px) {
  .preview {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
    padding-block: 48px;
  }
  .preview--flip .preview__body { order: 2; }
  .preview--flip .preview__figure { order: 1; }
}

.preview__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  font-weight: 500;
}

.preview__figure { min-width: 0; }

/* Person card */
.person {
  background: #fff;
  border: 1px solid var(--cohort-border-warm);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.person__head {
  padding: 26px 26px 22px;
  border-bottom: 1px solid var(--cohort-ivory-soft);
}

.person__name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem);
  font-weight: 500;
  color: var(--cohort-ink);
  letter-spacing: -0.01em;
}

.person__relation {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--cohort-slate);
}

.person__facts {
  margin: 0;
  padding: 22px 26px;
  display: grid;
  gap: 16px;
}

@media (min-width: 560px) {
  .person__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
}

.person__facts div { min-width: 0; }

.person__facts dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cohort-slate);
  margin-bottom: 4px;
}

.person__facts dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--cohort-charcoal);
}

.person__note {
  padding: 20px 26px;
  border-top: 1px solid var(--cohort-ivory-soft);
  background: var(--cohort-warm-white);
}

.person__note p { font-size: 0.9375rem; color: var(--cohort-slate); }

.person__next {
  padding: 18px 26px;
  border-top: 1px solid var(--cohort-ivory-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.person__next-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cohort-slate);
}

.person__next-value { font-size: 0.9375rem; font-weight: 550; color: var(--cohort-ink); }

/* Overlapping group chips */
.groups {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 30px 26px;
  background: #fff;
  border: 1px solid var(--cohort-border-warm);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  list-style: none;
  margin: 0;
}

.groups li { margin: 0; }

.groups .chip { background: var(--cohort-warm-white); }
.groups .chip--accent { border-color: var(--cohort-teal); color: var(--cohort-teal); }
.groups .chip--brass { border-color: var(--cohort-brass); color: #8C6B3C; }

/* Relationship heartbeats.
   Class names use the canonical product vocabulary on purpose. "rhythm" and
   "cadence" are banned brand terms; naming the components after them is how
   those words creep back into the copy. */
.heartbeats {
  list-style: none;
  margin: 0;
  padding: 8px 26px;
  background: #fff;
  border: 1px solid var(--cohort-border-warm);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.heartbeat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid var(--cohort-ivory-soft);
}

.heartbeat:last-child { border-bottom: 0; }

.heartbeat { transition: padding-left var(--speed) var(--ease); }
.heartbeat:hover { padding-left: 6px; }
.heartbeat:hover .heartbeat__pace { color: var(--cohort-teal); }
.heartbeat__pace { transition: color var(--speed) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .heartbeat:hover { padding-left: 0; }
}

.heartbeat__who {
  font-size: 1rem;
  font-weight: 550;
  color: var(--cohort-ink);
}

.heartbeat__pace {
  font-size: 0.875rem;
  color: var(--cohort-slate);
}

/* Disclaimer sitting directly beneath the hero mockup. */
.mockup__disclaimer {
  margin: 14px 2px 0;
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   12. Timeline
   -------------------------------------------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.timeline__item {
  position: relative;
  margin: 0;
  padding: 26px 0 26px 30px;
  border-top: 1px solid var(--cohort-border-warm);
}

.timeline__item:first-child { border-top: 0; }

.timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 34px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--cohort-stone);
  border-radius: 50%;
  background: var(--cohort-warm-white);
}

.timeline__item:first-child::before { top: 8px; }

.timeline__item--current::before {
  border-color: var(--cohort-teal);
  background: var(--cohort-teal);
}

.timeline__stage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 8px;
}

.timeline__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--cohort-ink);
}

.timeline__badge {
  padding: 3px 10px;
  border: 1px solid var(--cohort-teal);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cohort-teal);
  white-space: nowrap;
}

/* Future stages: same shape, quieter, so "Currently underway" stays the one
   badge that draws the eye. */
.timeline__badge--next {
  border-color: var(--cohort-border-control);
  color: var(--cohort-slate);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
  white-space: normal;
}

.timeline__item p { font-size: 0.9688rem; color: var(--cohort-slate); }

.timeline__item::before { transition: transform var(--speed) var(--ease); }
.timeline__item:hover::before { transform: scale(1.35); }

/* The current stage keeps a slow, shallow pulse so the eye finds it. */
.timeline__item--current::before { animation: stage-pulse 3.2s ease-in-out infinite; }

@keyframes stage-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62, 111, 115, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(62, 111, 115, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .timeline__item--current::before { animation: none; }
  .timeline__item:hover::before { transform: none; }
}

/* Four stages: two columns at tablet, four across on wide screens. */
@media (min-width: 700px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; }
  .timeline__item {
    padding: 30px 0 0;
    border-top: 1px solid var(--cohort-border-warm);
  }
  .timeline__item::before { top: -6px; left: 0; }
  .timeline__item:first-child::before { top: -6px; }
}

@media (min-width: 1024px) {
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
  .timeline__name { font-size: 1.2rem; }
}

/* --------------------------------------------------------------------------
   13. Notices & contact
   The site has no forms. What remains is the notice box used on the legal
   pages, and the direct-contact block that replaced the two form sections.
   -------------------------------------------------------------------------- */

.notice {
  padding: 14px 16px;
  border: 1px solid var(--cohort-border-warm);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.notice--warning { border-left-color: var(--cohort-warning); background: rgba(168, 108, 29, 0.05); }

.notice p { margin: 0; }
.notice ul { margin: 8px 0 0; }

/* Direct contact block. Deliberately not styled as a form: no panel that reads
   as an input surface, and no control resembling a submit button beyond the
   site's ordinary link button. */
.contact-block { max-width: 44rem; }

.contact-block > p { margin-bottom: 18px; }

.contact-block__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.contact-block--compact { margin-top: 22px; }
.contact-block > p:last-child { margin-bottom: 0; }

.contact-block__person {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  color: var(--cohort-ink);
  margin-bottom: 14px;
}

/* The address is shown as text as well as linked, so it can be copied by
   anyone using webmail or a device with no mail client configured. */
.contact-block__address {
  font-size: 1.0625rem;
  margin-bottom: 22px;
}

.contact-block__address a {
  color: var(--cohort-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.contact-block__address a:hover { color: var(--cohort-ink-hover); }

@media (max-width: 479px) {
  .contact-block .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   14. Investor disclosure
   -------------------------------------------------------------------------- */

.investor-panel { max-width: 52rem; }

.investor-panel__title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

/* Disclosure toggle. Reads as a control, not a call to action — the early
   access CTA above it must stay visually dominant. */
.disclosure__toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 26px;
  padding: 12px 20px 12px 16px;
  background: transparent;
  border: 1px solid var(--cohort-border-control);
  border-radius: var(--radius-sm);
  color: var(--cohort-ink);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease),
              background-color var(--speed) var(--ease);
}

.disclosure__toggle:hover {
  border-color: var(--cohort-ink);
  background: rgba(15, 43, 77, 0.03);
}

/* Chevron drawn from two borders; rotates a quarter turn when open. */
.disclosure__icon {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform 220ms var(--ease);
}

.disclosure__toggle.is-open .disclosure__icon { transform: rotate(225deg); }

/* Height animation without measuring: 0fr -> 1fr on a single grid row. */
.disclosure__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease), opacity 220ms var(--ease);
  opacity: 0;
}

.disclosure__panel.is-open { grid-template-rows: 1fr; opacity: 1; }

/* `display: grid` above is an author rule, so it beats the user-agent
   `[hidden] { display: none }` and the attribute would otherwise do nothing.
   Restate it explicitly, or the collapsed panel stays in the tab order. */
.disclosure__panel[hidden] { display: none; }

.disclosure__inner {
  overflow: hidden;
  min-height: 0;   /* required for the grid row to collapse fully */
}

.disclosure__panel.is-open .disclosure__inner { padding-top: 34px; }

.disclosure__inner h3 {
  margin-top: 2em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
}

.disclosure__inner h3:first-child { margin-top: 0; }

/* Without JavaScript the panel is simply open; no animation, no toggle state.
   The [hidden] attribute in the markup has to be overridden here, otherwise
   the investor overview would be unreachable with scripting off. */
.no-js .disclosure__panel,
.no-js .disclosure__panel[hidden] {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}

.no-js .disclosure__panel .disclosure__inner { padding-top: 34px; }
.no-js .disclosure__toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
  .disclosure__panel { transition: none; }
  .disclosure__icon { transition: none; }
}

/* --------------------------------------------------------------------------
   14b. Back to top
   -------------------------------------------------------------------------- */

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--cohort-ink);
  border: 0;
  border-radius: 50%;
  color: var(--cohort-ivory);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 43, 77, 0.22);
  animation: to-top-in 200ms var(--ease);
  transition: background-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.to-top[hidden] { display: none; }
.to-top:hover { background: var(--cohort-ink-hover); transform: translateY(-2px); }
.to-top:active { transform: translateY(0); }
.to-top__arrow { font-size: 1.05rem; line-height: 1; }

@keyframes to-top-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 768px) {
  .to-top { right: 28px; bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { animation: none; }
  .to-top:hover, .to-top:active { transform: none; }
}

/* --------------------------------------------------------------------------
   15. Prose pages
   -------------------------------------------------------------------------- */

.prose { max-width: 42rem; }
.prose h2 { margin-top: 2.4em; font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem); }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin-top: 1.9em; }
.prose p, .prose li { color: var(--cohort-slate); }
.prose li { max-width: 68ch; }
.prose dl { margin: 0 0 1.4em; }
.prose dt { font-weight: 600; color: var(--cohort-ink); margin-top: 1.1em; }
.prose dd { margin: 4px 0 0; color: var(--cohort-slate); }

/* Six principles, two columns on desktop. No numerals, no cards, no icons —
   the weight comes from the type and the space around it. Each entry is a
   short heading plus two sentences, so the page scans in about a minute. */
.principles {
  display: grid;
  gap: 0;
}

.principle {
  padding: 26px 0;
  border-top: 1px solid var(--cohort-border-warm);
}

.principle h3 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.08rem + 0.6vw, 1.45rem);
  letter-spacing: -0.008em;
}

.principle p {
  margin: 0;
  max-width: 58ch;   /* keeps each entry inside a comfortable measure */
  color: var(--cohort-slate);
}

/* On the ink band. */
.section--ink .principle { border-top-color: rgba(244, 241, 232, 0.18); }
.section--ink .principle h3 { color: var(--cohort-ivory); }
.section--ink .principle p { color: var(--cohort-ivory-soft); }

/* A quiet response to the pointer — the entry brightens and steps in.
   Nothing moves unless the pointer is on it. */
.principle {
  transition: transform var(--speed) var(--ease);
}

.section--ink .principle p { transition: color var(--speed) var(--ease); }
.section--ink .principle:hover p { color: var(--cohort-ivory); }
.principle:hover { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .principle:hover { transform: none; }
}

@media (min-width: 820px) {
  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
  }
  .principle { padding: 32px 0; }

  /* Both entries in the top row sit against the section rule already above
     them, so they do not need one of their own. */
  .principle:nth-child(-n + 2) { border-top: 0; padding-top: 4px; }

  /* The strategic differentiator closes the set at full width, so an odd
     seventh entry never sits as an orphan beside empty space. */
  .principle--wide { grid-column: 1 / -1; }
}

.principle--wide p { max-width: 66ch; }

.principle--wide h3 {
  font-size: clamp(1.3rem, 1.12rem + 0.8vw, 1.65rem);
}

/* On the ink band the wide entry earns a touch more presence. */
.section--ink .principle--wide h3 { color: #fff; }

@media (max-width: 819px) {
  .principle:first-child { border-top: 0; padding-top: 4px; }
}

.closing-statement {
  margin-top: 48px;
  padding: 30px 26px;
  background: var(--cohort-ivory);
  border-radius: var(--radius-xl);
  max-width: 46rem;
}

.section--ink .closing-statement {
  background: var(--cohort-ink-dark);
  border: 1px solid rgba(244, 241, 232, 0.18);
}

.section--ink .closing-statement p { color: var(--cohort-ivory); }
.section--ink .closing-statement .closing-statement__lead { color: var(--cohort-stone); }

.closing-statement p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--cohort-ink);
  max-width: 60ch;
}

/* Two classes, so this beats `.closing-statement p` on specificity without
   reaching for !important. */
.closing-statement .closing-statement__lead {
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--cohort-slate);
}

.placeholder {
  padding: 1px 5px;
  background: var(--cohort-ivory-soft);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  color: var(--cohort-ink);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 48px 40px;
  background: var(--cohort-ink);
  color: var(--cohort-ivory-soft);
}

.site-footer__grid {
  display: grid;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(244, 241, 232, 0.16);
}

@media (min-width: 760px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}

.site-footer__tagline {
  margin: 16px 0 0;
  font-size: 0.9375rem;
  color: var(--cohort-stone);
  max-width: 34ch;
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cohort-stone);
  margin-bottom: 14px;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cohort-ivory);
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-footer a:hover { border-bottom-color: rgba(244, 241, 232, 0.5); color: #fff; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 26px;
  font-size: 0.8125rem;
  color: var(--cohort-stone);
}

.site-footer__base p { margin: 0; max-width: 60ch; }

/* --------------------------------------------------------------------------
   17. 404
   -------------------------------------------------------------------------- */

.page-404 {
  display: flex;
  align-items: center;
  min-height: 58vh;
  padding-block: var(--section-y);
}

/* --------------------------------------------------------------------------
   18. Motion
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

.reveal.is-visible { opacity: 1; transform: none; }

/* No JS, or reduced motion: content must always be visible. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .form, .mockup__tabs { display: none; }
  body { background: #fff; color: #000; }
}