/* Landing-page layout. Loaded only by index.html. */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(120px, 18vh, 200px) 0;
}

.hero h1 { margin-top: 30px; }

/* The second line sits back so the first reads as the statement and the second
   as the qualifier. */
.hero h1 .quiet {
  font-style: italic;
  color: var(--ink-dim);
}

.hero .lede { margin-top: 34px; }

.hero-actions {
  margin-top: 46px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.hero-meta {
  margin-top: auto;
  padding-block: 44px;
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-head { margin-top: 26px; max-width: 20ch; }

/* ── Interior page header ─────────────────────────────────────────────── */
/* Shorter than the landing hero — these pages should get to the content. */

.page-head { padding: clamp(130px, 20vh, 190px) 0 clamp(48px, 7vw, 76px); }
.page-head h1 { margin-top: 26px; font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
.page-head .lede { margin-top: 28px; }

/* ── Long-form prose ──────────────────────────────────────────────────── */

.prose { margin-top: 34px; max-width: 66ch; }
.prose p { color: var(--ink-dim); margin-bottom: 20px; }
.prose p:last-child { margin-bottom: 0; }

/* The FAQ page has no intro section above the list, so it needs its own top
   spacing that the landing page's inline version doesn't. */
.faq-page { margin-top: 0; }

/* ── Arrangement ──────────────────────────────────────────────────────── */

.columns {
  margin-top: 76px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft); /* shows through as hairlines between cells */
  border-block: 1px solid var(--line-soft);
}

.col {
  background: var(--bg);
  padding: 40px 34px 46px;
  transition: background .5s var(--ease);
}
.col:hover { background: var(--bg-raised); }

.col-index {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--accent-dim);
}

.col h3 { margin: 20px 0 14px; }

.columns.four { grid-template-columns: repeat(4, 1fr); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq { margin-top: 56px; max-width: 780px; }

.faq details {
  border-top: 1px solid var(--line-soft);
}
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

/* A plus that rotates into a minus when open. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--muted), var(--muted)) center/11px 1px no-repeat,
    linear-gradient(var(--muted), var(--muted)) center/1px 11px no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .35s var(--ease);
}
.faq details[open] summary::after {
  transform: translateY(-50%) rotate(135deg);
}

.faq details p { padding: 0 40px 24px 0; max-width: 62ch; }

/* ── Candour ledger ───────────────────────────────────────────────────── */

.ledger {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}

.ledger h2 { margin-top: 24px; }

.ledger-lists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 52px);
}

.ledger-list ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  font-size: .93rem;
}

.ledger-list li {
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-dim);
}
.ledger-list li:last-child { border-bottom: 1px solid var(--line-soft); }

/* The "will not" column is visually receded — the refusal is stated, not sold. */
.muted-list li { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }

/* ── Intake ───────────────────────────────────────────────────────────── */

.intake h2 { margin-top: 26px; }

.steps {
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  max-width: 640px;
}

.steps li {
  display: flex;
  gap: 26px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-dim);
}
.steps li:last-child { border-bottom: 1px solid var(--line-soft); }

.step-n {
  font-family: var(--serif);
  font-size: .85rem;
  color: var(--accent-dim);
  letter-spacing: .1em;
  flex: none;
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .columns.four { grid-template-columns: repeat(2, 1fr); }
}

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

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

@media (max-width: 560px) {
  .ledger-lists { grid-template-columns: 1fr; }
  .hero-meta { gap: 18px; }
}