/* ============================================================
   Page-level overrides + product-mockup chrome
   Pairs with colors_and_type.css + kit.css
   ============================================================ */

/* ----- reset bits the kit assumes ----- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* Wordmark mark — radial gradient dot, matches kit usage */
.wordmark-mark {
  inline-size: 1.5em; block-size: 1.5em;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-deep) 75%);
  display: inline-block; flex: 0 0 auto;
  position: relative;
}
.wordmark-mark::after {
  content: ""; position: absolute;
  inset: 25%; border-radius: 50%;
  background: var(--bg);
  opacity: 0.18;
}

/* ============================================================
   WORDMARK — real brand icon (kit defaults to a CSS disc)
   ============================================================ */
.wordmark-mark {
  background: url("../assets/icon.svg") center / contain no-repeat !important;
  border-radius: 0 !important;
}
.mock-sidebar-brand .wordmark-mark { inline-size: 1.1em; block-size: 1.1em; }

/* ============================================================
   WORDMARK — full lockup SVG (mark + outlined wordmark)
   ============================================================ */
.wordmark-img { display: block; height: 1.75rem; width: auto; }
.site-nav .wordmark-img { height: 1.85rem; }
.foot-brand .wordmark-img { height: 2rem; }

/* ============================================================
   TRUST STRIP — quiet credibility anchor under hero
   ============================================================ */
.trust-strip {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  border-block-end: 1px solid var(--border-light);
}
.trust-strip-inner {
  display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
}
.trust-strip-label {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  max-inline-size: 18ch;
  flex: 0 0 auto;
}
.trust-strip-logos {
  display: flex; align-items: center; gap: clamp(2rem, 5vw, 3.5rem);
  flex-wrap: wrap;
  flex: 1;
}
.trust-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--muted);
  letter-spacing: -0.01em;
  opacity: 0.7;
}

/* ============================================================
   HERO — restore original spacing (kit defaults are looser)
   ============================================================ */
.hero { padding-block: clamp(5rem, 11vw, 9rem) clamp(4rem, 9vw, 7rem); }
.hero-eyebrow { margin-block-end: 1.75rem; }
.hero-headline { margin: 0; }
.hero-sub { margin-block-start: 1.875rem; margin-block-end: 0; }
.hero-ctas { margin-block-start: 2.5rem; }

/* ============================================================
   FEATURE — head + beats (the kit ships the grid, not the head)
   ============================================================ */
.feature-head { margin-block-end: clamp(2.5rem, 5vw, 4rem); }
.feature-head .eyebrow { margin-block-end: 1rem; }
.feature-title-h {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-display-m); line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); max-inline-size: 22ch;
}
/* No extra padding — narrative top should align with mockup top.
   Kit's .feature-mockup-col is position:sticky; don't override its block-size. */
.beat-headline {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-display-s); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 0.625rem;
}
.beat-body {
  font-size: var(--t-body-l); line-height: 1.55; color: var(--ink-soft);
  text-wrap: pretty; margin: 0;
}
.beat-detail {
  margin-block-start: 1rem;
  font-size: var(--t-body-s); color: var(--muted);
}
.beat-detail strong { color: var(--ink-soft); font-weight: 500; }
.beat-list {
  margin: 1rem 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: var(--t-body-s); color: var(--ink-soft);
}
.beat-list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.beat-list li::before {
  content: ""; flex: 0 0 auto;
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--accent);
  margin-block-start: 0.5rem;
}

/* Stacked feature layout — narrative on top, screenshot full container width.
   Used when the mockup needs the full container width to be legible. */
.feature-grid--stack,
.feature--reverse .feature-grid--stack { grid-template-columns: 1fr; }
.feature-grid--stack .feature-narrative-col { max-inline-size: 64ch; }
.feature-grid--stack .feature-mockup-col,
.feature--reverse .feature-grid--stack .feature-mockup-col {
  position: relative;
  top: 0;
  order: 0;
  inline-size: 100%;
}

/* Mockup zoom trigger — wraps the inline screenshot; subtle hover affordance. */
.mockup-zoom-trigger {
  display: block; inline-size: 100%;
  padding: 0; margin: 0; border: 0;
  background: transparent; cursor: zoom-in;
  border-radius: var(--r-lg);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.mockup-zoom-trigger:hover { transform: translateY(-2px); }
.mockup-zoom-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.mockup-zoom-trigger img { display: block; inline-size: 100%; block-size: auto; }

/* Mockup zoom dialog — native <dialog>, backdrop dims and blurs the page. */
.mockup-zoom {
  padding: 0; border: 0;
  background: transparent;
  inline-size: min(95vw, 110rem);
  max-block-size: 95vh;
  overflow: visible;
}
.mockup-zoom::backdrop {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
}
.mockup-zoom img {
  display: block;
  inline-size: 100%; block-size: auto;
  max-block-size: 95vh;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.5);
}
.mockup-zoom-close {
  position: absolute;
  inset-block-start: -1.25rem; inset-inline-end: -1.25rem;
  inline-size: 2.5rem; block-size: 2.5rem;
  border: 0; border-radius: 50%;
  background: var(--bg); color: var(--ink);
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
}
.mockup-zoom-close:hover { background: var(--bg-paper); }
.mockup-zoom-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .mockup-zoom-trigger { transition: none; }
  .mockup-zoom-trigger:hover { transform: none; }
}

/* ============================================================
   FEATURE section — extra top air; it's the centerpiece moment.
   ============================================================ */
.feature { padding-block: clamp(5rem, 9vw, 8rem) var(--section-pad) !important; }
#dashboard.feature .feature-head { margin-block-end: clamp(3rem, 5vw, 4.5rem); }

/* ============================================================
   PULL section — paper bg surface change for rhythm
   ============================================================ */
.pull {
  padding-block: var(--section-pad);
  background: var(--bg-paper);
  border-block: 1px solid var(--border-light);
}
.pull-statement {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-display-m); line-height: 1.1; letter-spacing: -0.018em;
  color: var(--ink); max-inline-size: 26ch;
}
.pull-statement em { font-style: italic; color: var(--accent-deep); display: block; }
.pull-byline {
  margin-block-start: 2.5rem;
  font-size: var(--t-body); color: var(--muted);
  max-inline-size: 50ch;
}

/* ============================================================
   PULL — thesis/resolution variant (two-column editorial)
   Used on the home page. Left = the problem stated boldly,
   right = the resolution in tight body. Vertical accent rule
   between columns; numeric eyebrows give it editorial rhythm.
   ============================================================ */
.pull--thesis .container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
  position: relative;
}
.pull-thesis-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 0.625rem;
  margin-block-end: 1.5rem;
}
.pull-thesis-eyebrow .num {
  font-family: var(--font-mono);
  color: var(--accent-deep);
  font-weight: 500;
}
.pull-thesis-eyebrow .dot {
  inline-size: 4px; block-size: 4px; border-radius: 50%;
  background: var(--border-strong);
}
.pull-thesis-statement {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink); margin: 0;
  max-inline-size: 16ch;
  text-wrap: balance;
}
.pull-thesis-statement em {
  font-style: italic;
  color: var(--accent-deep);
  display: block;
}
.pull-thesis-resolution {
  border-inline-start: 1px solid var(--border-light);
  padding-inline-start: clamp(1.5rem, 3vw, 2.25rem);
  padding-block-start: 0.625rem;
  position: relative;
}
.pull-thesis-resolution::before {
  content: "";
  position: absolute;
  inset-block-start: 0.625rem;
  inset-inline-start: -1px;
  inline-size: 2px;
  block-size: 4rem;
  background: var(--accent);
}
.pull-thesis-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 1.25rem;
  max-inline-size: 26ch;
  text-wrap: balance;
}
.pull-thesis-lede em {
  font-style: italic;
  color: var(--accent-deep);
}
.pull-thesis-body {
  font-size: var(--t-body-l);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-inline-size: 40ch;
  text-wrap: pretty;
}
.pull-thesis-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  margin-block-start: 1.75rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.pull-thesis-meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
.pull-thesis-meta span::before {
  content: ""; inline-size: 4px; block-size: 4px; border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 880px) {
  .pull--thesis .container { grid-template-columns: 1fr; gap: 2.25rem; }
  .pull-thesis-resolution {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border-light);
    padding-inline-start: 0;
    padding-block-start: 1.75rem;
  }
  .pull-thesis-resolution::before {
    inset-inline-start: 0;
    inset-block-start: -1px;
    inline-size: 4rem;
    block-size: 2px;
  }
}

/* ============================================================
   VALUE PILLARS — three-up, compact, sits under hero
   No top border: pillars belong to the hero zone, not a new section.
   ============================================================ */
.pillars {
  padding-block: var(--section-pad);
}
.pillars-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.pillar {
  display: flex; flex-direction: column; gap: 0.75rem;
}
.pillar-num {
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep);
}
.pillar-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1.2;
  color: var(--ink); margin: 0;
}
.pillar-body {
  font-size: var(--t-body); color: var(--ink-soft); line-height: 1.55;
  margin: 0; max-inline-size: 36ch;
}
@media (max-width: 880px) { .pillars-grid { grid-template-columns: 1fr; } }

/* ============================================================
   AUDIENCE section header
   ============================================================ */
.section-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-display-l); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink); max-inline-size: 22ch;
}
.section-title em { font-style: italic; color: var(--accent-deep); }
.section-head { margin-block-end: clamp(2.5rem, 5vw, 4rem); }
.section-head .pull-rule { margin-block-end: 1.25rem; }
.section-head .eyebrow { margin-block-end: 0.75rem !important; }
.section-head .section-title { margin: 0; }

/* Audience card mark — square mono initial */
.audience-card-mark {
  inline-size: 2rem; block-size: 2rem;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500; font-size: 13px;
  letter-spacing: 0;
}

/* ============================================================
   RISK PILLARS — a darker variant of the value pillars
   pulls accent-deep + a left rule to signal weight/seriousness
   ============================================================ */
.risks { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); }
.risks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.risk {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--accent-deep);
}
.risk-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep);
}
.risk-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1.2;
  color: var(--ink); margin: 0;
}
.risk-body { font-size: var(--t-body); color: var(--ink-soft); line-height: 1.55; margin: 0; max-inline-size: 36ch; }
@media (max-width: 880px) { .risks-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CAPABILITIES — 4-up grid, dense, typographic, no images
   ============================================================ */
.capabilities-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-block-start: 1px solid var(--border);
  border-inline-start: 1px solid var(--border);
}
.capability {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-block-end: 1px solid var(--border);
  border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.875rem;
  background: var(--bg);
}
.capability-mark {
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.capability-mark::before {
  content: ""; inline-size: 8px; block-size: 8px;
  background: var(--accent); border-radius: 50%;
}
.capability-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1.2;
  color: var(--ink); margin: 0;
}
.capability-body {
  font-size: var(--t-body); color: var(--ink-soft); line-height: 1.55;
  margin: 0; max-inline-size: 42ch;
}
@media (max-width: 760px) { .capabilities-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PULL-QUOTE — large italic Newsreader, paper bg, centered
   ============================================================ */
.quote {
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--bg-paper);
  border-block: 1px solid var(--border-light);
}
.quote + .acknowledgement,
.acknowledgement + .quote { border-block-start: 0; }
.quote:has(+ .acknowledgement) { border-block-end: 0; }
.quote-mark {
  font-family: var(--font-display); font-style: italic;
  font-size: 6rem; line-height: 0.8; color: var(--accent);
  display: block; margin-block-end: 1rem;
}
.quote-body {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ink); max-inline-size: 28ch; margin: 0;
}
.quote-body em { font-style: italic; color: var(--accent-deep); }

/* ============================================================
   PAIN PILLARS — softer than risk pillars; daily-grind tone
   muted X mark, no left rule, conversational
   ============================================================ */
.pains {
  padding-block: clamp(4rem, 7vw, 6rem) clamp(3rem, 5vw, 4.5rem);
  background: var(--bg-paper);
  border-block-start: 1px solid var(--border-light);
  border-block-end: 1px solid var(--border-light);
}
.pains-head {
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
  padding-block-end: clamp(1.5rem, 3vw, 2rem);
  border-block-end: 1px solid var(--border-light);
}
.pains-eyebrow { margin-block-end: 1.25rem; }
.pains-lede {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  letter-spacing: -0.015em; line-height: 1.1;
  color: var(--ink); margin: 0;
  max-inline-size: 22ch;
}

.pains-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.pain {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
  border-inline-start: 1px solid var(--border-light);
  transition: background var(--t-fast) var(--ease);
}
.pain:first-child { border-inline-start: 0; padding-inline-start: 0; }
.pain:last-child { padding-inline-end: 0; }
.pain:hover { background: color-mix(in oklch, var(--accent-soft) 50%, transparent); }

.pain-num {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: -0.02em;
  align-self: start;
  /* tabular-like alignment so 01/02/03 sit on the same baseline */
  font-variant-numeric: lining-nums;
}
.pain-body-wrap { display: flex; flex-direction: column; gap: 0.625rem; min-inline-size: 0; }

.pain-tag {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.pain-tag::before {
  content: ""; inline-size: 0.5rem; block-size: 1px;
  background: currentColor; opacity: 0.6;
}

.pain-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 1.9vw, 1.625rem);
  letter-spacing: -0.012em; line-height: 1.15;
  color: var(--ink); margin: 0;
  text-wrap: balance;
}
.pain-body {
  font-size: var(--t-body); color: var(--ink-soft);
  line-height: 1.55; margin: 0; max-inline-size: 34ch;
}

@media (max-width: 880px) {
  .pains-grid { grid-template-columns: 1fr; }
  .pain {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border-light);
    padding: 1.5rem 0;
  }
  .pain:first-child { border-block-start: 0; padding-block-start: 0; }
  .pain:last-child { padding-block-end: 0; }
}

/* ============================================================
   TESTIMONIAL — italic display quote, intimate scale
   ============================================================ */
.testimonial {
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--bg-paper);
  border-block: 1px solid var(--border-light);
}
.testimonial-inner {
  max-inline-size: 60ch;
  margin-inline: auto;
  text-align: center;
}
.testimonial-mark {
  font-family: var(--font-display); font-style: italic;
  font-size: 4.5rem; line-height: 0.8; color: var(--accent);
  display: block; margin-block-end: 1rem;
}
.testimonial-body {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
  text-wrap: pretty;
}
.testimonial-body em { color: var(--accent-deep); }
.testimonial-attr {
  margin-block-start: 2.5rem;
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.testimonial-attr-name { color: var(--ink); }
.testimonial-attr-role { color: var(--muted); }

/* ============================================================
   MANIFESTO — single-column reading section, generous leading
   ============================================================ */
.manifesto {
  padding-block: clamp(4rem, 8vw, 7rem);
  border-block-start: 1px solid var(--border-light);
  border-block-end: 1px solid var(--border-light);
  background: var(--bg-paper);
}
.manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.manifesto-aside {
  position: sticky; top: 6rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.manifesto-lede {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.95; letter-spacing: -0.03em;
  color: var(--ink); margin: 0;
  text-wrap: balance;
}
.manifesto-body { display: flex; flex-direction: column; gap: 1.5rem; max-inline-size: 52ch; }
.manifesto-body > p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.5; color: var(--ink-soft);
  margin: 0; text-wrap: pretty;
}
.manifesto-opener {
  font-size: clamp(1.5rem, 2vw, 1.875rem) !important;
  color: var(--ink) !important;
  padding-block-start: 0.25rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--accent);
}
@media (max-width: 880px) {
  .manifesto-grid { grid-template-columns: 1fr; gap: 2rem; }
  .manifesto-aside { position: static; }
}

/* small variant of .quote for inline pull-quotes */
.quote--inline { padding-block: clamp(3rem, 6vw, 5rem); border-block-start: 0; }
/* When an inline quote follows a paper section (e.g. founders), nestle it
   close to the bottom of the section above instead of leaving twin gaps. */
section.section--paper:has(+ .quote--inline) { padding-block-end: clamp(1rem, 2vw, 1.5rem); }
.section--paper + .quote--inline { padding-block-start: clamp(0.5rem, 1.5vw, 1.25rem); }
.quote--inline .quote-mark { font-size: 4.5rem; }
.quote--inline .quote-body {
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  max-inline-size: none;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .quote--inline .quote-body { white-space: normal; max-inline-size: 36ch; }
}

/* ============================================================
   FOUNDER / TEAM CARDS — image left, prose right
   ============================================================ */
.founders-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.founder {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.founder-photo {
  inline-size: 100%;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  background: var(--bg-paper);
  overflow: hidden;
}
.founder-photo image-slot {
  inline-size: 100% !important;
  block-size: 100% !important;
  border-radius: var(--r-lg);
}
.founder-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.015em; line-height: 1.1;
  color: var(--ink); margin: 0 0 0.5rem;
}
.founder-role {
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep);
  margin: 0 0 1.25rem;
}
.founder-bio {
  font-size: var(--t-body-l); color: var(--ink-soft); line-height: 1.6;
  margin: 0; max-inline-size: 50ch;
}
.founder-bio + .founder-bio { margin-block-start: 1rem; }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; } .founder-photo { max-inline-size: 16rem; } }

/* ============================================================
   ADVISORS — 3-up compact, monogram or photo
   ============================================================ */
.advisors-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}
.advisor {
  display: flex; flex-direction: column; gap: 1rem;
}
.advisor-mono {
  inline-size: 4rem; block-size: 4rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem;
  letter-spacing: 0;
}
.advisor-mono.is-placeholder { background: var(--bg-paper); color: var(--muted); border: 1px dashed var(--border); }
.advisor-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.25rem; letter-spacing: -0.005em; color: var(--ink); margin: 0;
}
.advisor-role {
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin: 0.25rem 0 0;
}
.advisor-bio { font-size: var(--t-body-s); color: var(--ink-soft); line-height: 1.55; margin: 0.875rem 0 0; }
@media (max-width: 760px) { .advisors-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ACKNOWLEDGEMENT — quiet, paper, left-rule
   ============================================================ */
.acknowledgement {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--bg-paper);
  border-block: 1px solid var(--border-light);
}
.acknowledgement-inner {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  max-inline-size: none;
  padding-inline-start: 0;
  border-inline-start: 0;
}
.acknowledgement-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-block-end: 0;
  padding-block-start: 0.5rem;
}
.acknowledgement-eyebrow::before {
  content: ""; inline-size: 1.5rem; block-size: 1px;
  background: currentColor; opacity: 0.6;
}
.acknowledgement-body {
  font-family: var(--font-body); font-weight: 400; font-style: normal;
  font-size: var(--t-body); line-height: 1.6;
  color: var(--ink-soft); margin: 0;
  max-inline-size: 60ch;
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .acknowledgement-inner { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   ACKNOWLEDGEMENT — tan variant (slightly deeper than paper bg)
   ============================================================ */
.acknowledgement--dark {
  background: var(--bg);
  border-block: 0;
}

/* ============================================================
   COMPARISON — kit ships the grid + cols, page styles tweak
   ============================================================ */
.compare-headline {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-display-s); letter-spacing: -0.01em; line-height: 1.15;
  color: var(--ink); margin: 0;
}
.compare-headline em { font-style: italic; color: var(--accent-deep); }

.compare-section + .compare-section { margin-block-start: 2rem; }
.compare-subhead {
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 0.875rem;
}

/* ============================================================
   VALUES
   ============================================================ */
.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  margin-block-end: clamp(3rem, 6vw, 5rem);
}
.value {
  display: flex; flex-direction: column; gap: 0.625rem;
  padding-inline-start: 1.125rem;
  border-inline-start: 2px solid var(--accent);
}
.value-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.25rem; letter-spacing: -0.01em; color: var(--ink);
  margin: 0;
}
.value-body {
  font-size: var(--t-body); color: var(--ink-soft); line-height: 1.55;
  margin: 0;
}
@media (max-width: 880px) { .values-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FOUNDING — editorial wide variant (full-width, no stats column)
   Hairline eyebrow row across the top, big title left, prose right
   with a thin vertical rule. Restraint over ornament.
   ============================================================ */
.founding--editorial {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4.5rem) !important;
}
.founding-head {
  display: flex; align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-block-end: clamp(2.5rem, 5vw, 3.75rem);
}
.founding--editorial .founding-eyebrow { margin-block-end: 0; }
.founding-head-rule {
  flex: 1; block-size: 1px;
  background: linear-gradient(to right,
    oklch(48% 0.020 240) 0%,
    oklch(32% 0.020 240) 100%);
}
.founding-head-mark {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 1.5rem; line-height: 1;
  color: oklch(72% 0.13 145);
  letter-spacing: -0.02em;
}
.founding-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.founding--editorial .founding-title {
  font-size: clamp(2.5rem, 5.4vw, 4.25rem) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.025em !important;
  max-inline-size: 13ch !important;
  margin: 0 !important;
  text-wrap: balance;
}
.founding-prose {
  display: flex; flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-block-start: 0.625rem;
  padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
  border-inline-start: 1px solid oklch(35% 0.020 240);
  position: relative;
}
.founding-prose::before {
  content: "";
  position: absolute;
  inset-block-start: 0.625rem;
  inset-inline-start: -1px;
  inline-size: 2px;
  block-size: 3.5rem;
  background: oklch(72% 0.13 145);
}
.founding--editorial .founding-body {
  margin: 0 !important;
  max-inline-size: 44ch !important;
  font-size: var(--t-body-l);
  line-height: 1.6;
}
.founding--editorial .founding-actions {
  margin: 0 !important;
}
@media (max-width: 880px) {
  .founding-head { flex-wrap: wrap; gap: 0.875rem; }
  .founding-head-rule { min-inline-size: 3rem; }
  .founding-body-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .founding-prose {
    border-inline-start: 0;
    padding-inline-start: 0;
    padding-block-start: 1.75rem;
    border-block-start: 1px solid oklch(35% 0.020 240);
  }
  .founding-prose::before {
    inset-inline-start: 0;
    inset-block-start: -1px;
    inline-size: 3rem;
    block-size: 2px;
  }
}

/* Founding block — tighten + align */
.founding { align-items: start; }
.founding-title { margin: 0; }
.founding-eyebrow { margin-block-end: 1rem; }
.founding-body { margin-block-start: 1rem; max-inline-size: 44ch; }
.founding-actions { margin-block-start: 1.5rem; }
.founding-meta { gap: 1.5rem; padding-block-start: 0.25rem; }
.founding-stat { gap: 0.375rem; }
.founding-stat-num { font-size: 2rem; }

/* Founding stats overrides */
.founding-stat { display: flex; flex-direction: column; gap: 0.25rem; }
.founding-stat-num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 2.25rem; letter-spacing: -0.025em; line-height: 1;
  color: white; font-variant-numeric: tabular-nums;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final { padding-block: var(--section-pad); }
.cta-final-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: end;
}
.cta-final-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-display-l); line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink); max-inline-size: 18ch; margin: 0;
}
.cta-final-title em { color: var(--accent-deep); font-style: italic; }
.cta-final-body {
  font-size: var(--t-body-l); color: var(--ink-soft); line-height: 1.55;
  max-inline-size: 42ch; margin: 0 0 2rem;
}
.cta-final-actions { display: flex; gap: 0.875rem; flex-wrap: wrap; }
@media (max-width: 880px) { .cta-final-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER (full version, replaces kit's compact one)
   ============================================================ */
.site-foot {
  padding-block: clamp(3rem, 5vw, 4.5rem) 2.5rem;
  border-block-start: 1px solid var(--border-light);
  background: var(--bg-paper);
  font-size: var(--t-body-s);
}
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 2fr);
  gap: clamp(4rem, 9vw, 8rem); margin-block-end: 3rem;
  align-items: start;
}
.foot-cols {
  display: grid; grid-template-columns: 1fr 0.6fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.foot-brand .wordmark { margin-block-end: 1.25rem; }
.foot-tagline {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--ink); max-inline-size: 26ch;
  margin: 0 0 1.5rem;
}
.foot-tagline em { font-style: italic; color: var(--accent-deep); }
.foot-locations {
  font-family: var(--font-mono); font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  display: flex; flex-direction: row; gap: 0.55rem; align-items: center;
}
.foot-locations .sep { color: var(--border-strong); }
.foot-social {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: flex; flex-direction: row; gap: 0.875rem; align-items: center;
}
.foot-social a {
  display: inline-flex; color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.foot-social a:hover { color: var(--accent-deep); }
.foot-social svg { width: 1.25rem; height: 1.25rem; display: block; }
.foot-col h4 {
  font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 1rem;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.foot-col a { color: var(--ink-soft); font-weight: 500; transition: color var(--t-fast) var(--ease); }
.foot-col a:hover { color: var(--accent-deep); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  padding-block-start: 1.5rem; border-block-start: 1px solid var(--border-light);
  color: var(--muted); font-size: var(--t-meta);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
}
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .feature-beat { opacity: 1 !important; }
}


/* ============================================================
   FEATURE MOCKUP — image-slot placeholders
   ============================================================ */
.feature-mockup-col image-slot,
.feature-simple-mockup image-slot {
  inline-size: 100%;
  block-size: clamp(360px, 42vw, 560px);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.18);
}
.feature-grid--stack image-slot {
  block-size: clamp(360px, 50vw, 720px);
}

.feature-mockup-col .feature-screenshot,
.feature-simple-mockup .feature-screenshot {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 100%;
}

/* Beat-driven mockup swap — only one .feature-mockup visible per section. */
.feature-mockup-col .feature-mockup {
  display: none;
  inline-size: 100%;
  block-size: auto;
}
.feature-mockup-col .feature-mockup.is-active { display: block; }

/* Simple (non-sticky) feature layout — used when there's only one beat */
.feature-grid--simple {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.feature-simple-narrative { display: flex; flex-direction: column; gap: 1.25rem; }
.feature-simple-narrative .beat-body { font-size: var(--t-body-l); line-height: 1.55; color: var(--ink-soft); margin: 0; }
@media (max-width: 920px) {
  .feature-grid--simple { grid-template-columns: 1fr; }
}


/* ============================================================
   SECTION-HEAD utilities (consolidated from inline styles)
   ============================================================ */
.section-head .pull-byline { margin-block-start: 1.5rem; }
.beat-cta { margin-block-start: 2rem; }
.founding-stat-num .stat-unit { font-size: 0.55em; opacity: 0.7; font-weight: 400; }