/* Building blocks shared across pages: cards, statements, questions, steps, the water divider, long-form text. */

/* Cards: one radius, a hairline edge, and a quiet lift on hover when the card is a link */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-16); }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-32); border-radius: var(--radius-card); background: var(--color-ink-raised); color: var(--color-stone); text-decoration: none; }
.section-raised .card { background: var(--surface-lifted); }
/* Short titles fill the card's width; balance (right for big headlines) squeezed them into narrow stacks */
.card h3 { font-size: var(--text-24); text-wrap: pretty; }
.card p { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.card .card-detail { margin-top: auto; padding-top: var(--space-16); font-size: var(--text-14); color: var(--text-muted); }
a.card { transition: box-shadow .3s var(--ease-soft), background-color .3s var(--ease-soft); }
a.card:hover { box-shadow: inset 0 0 0 1px var(--color-water-lit); }
a.card .arrow-link { margin-top: auto; padding-top: var(--space-16); color: var(--color-water-lit); }
.card-number { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--text-14); color: var(--color-water-lit); font-variant-numeric: lining-nums tabular-nums; }

/* A centered statement: one idea, given the whole width */
.statement { max-width: 22ch; margin: 0 auto; text-align: center; font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: clamp(var(--text-36), 4.4vw, 3.5rem); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.statement-note { max-width: 40rem; margin: var(--space-32) auto 0; text-align: center; font-size: var(--text-21); line-height: 1.55; color: var(--text-secondary); }

/* The reader's own questions, set as three voices side by side */
.questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32); margin: 0; padding: 0; list-style: none; }
.questions-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.questions li { padding-top: var(--space-24); border-top: 2px solid var(--color-water-lit); font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--text-24); line-height: 1.3; }
.questions-label { margin: 0 0 var(--space-32); text-align: center; color: var(--text-secondary); }

/* Steps of a real sequence, numbered */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-32); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-top: var(--space-32); border-top: 1px solid var(--rule-on-stone); counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: -18px; left: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-ink); color: var(--color-stone); font-family: var(--font-heading); font-weight: var(--weight-heading); font-variant-numeric: lining-nums; }
.steps h3 { margin: var(--space-16) 0 var(--space-12); }
.steps p { margin: 0; line-height: 1.6; color: var(--text-on-stone-secondary); }
.step-note { display: block; margin-top: var(--space-16); font-size: var(--text-14); font-weight: var(--weight-strong); color: var(--color-water-deep); }

/* Ground line and water: the brand's cross-section */
.ground { position: relative; }
.ground-line { height: 2px; background: var(--color-stone); }
.water { display: block; width: 100%; height: 44px; color: var(--color-water-lit); }
.water path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .water path { animation: water-runs 2.4s var(--ease-soft) .3s both; }
  .water path:nth-child(2) { animation-delay: .55s; }
  .water path:nth-child(3) { animation-delay: .8s; }
}
@keyframes water-runs { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Two columns on a stone band: where AI fits, what we can't fix */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-64); }
.split h3 { margin-bottom: var(--space-16); font-size: var(--text-36); }
.split p { margin: 0; max-width: 34rem; font-size: var(--text-18); line-height: 1.6; color: var(--text-on-stone-secondary); }

/* Long-form text, such as the privacy page: one readable column */
.prose { max-width: 46rem; }
.prose h1 { font-size: clamp(var(--text-36), 4.4vw, 3.5rem); }
.prose h2 { margin: var(--space-48) 0 var(--space-16); font-size: var(--text-24); }
.prose p, .prose li { font-size: var(--text-18); line-height: 1.65; color: var(--text-secondary); }
.prose p { margin: 0 0 var(--space-16); }
.prose ul { margin: 0; padding-left: var(--space-24); }
.prose li + li { margin-top: var(--space-12); }
.prose strong { color: var(--color-stone); }
.prose .prose-lede { margin-top: var(--space-24); font-size: var(--text-21); color: var(--color-stone); }
.prose .prose-note { margin-top: var(--space-48); font-size: var(--text-14); color: var(--text-muted); }

@media (max-width: 1000px) {
  .steps, .questions-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-48); }
}

@media (max-width: 760px) {
  .card-grid-2, .questions, .questions-4, .steps, .split { grid-template-columns: 1fr; }
  .questions { gap: var(--space-24); }
  .questions li { font-size: var(--text-21); }
  .card { padding: var(--space-24); }
  .statement-note { font-size: var(--text-18); }
  .split { gap: var(--space-48); }
  .split h3 { font-size: var(--text-24); }
}