/* Homepage sections: three steps, split (intro + main), FAQ accordion, final action. Moved out of home.css
   (2026-11-05). Loaded on the homepage only since the /email-verify/ guide was redone the same day. */

/* ---------- Three steps ---------- */
.steps h2 { margin-bottom: var(--space-32); }
.steps__list { display: grid; }
.steps__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-16); align-items: start; padding-block: var(--space-20); border-top: var(--border-thin) solid var(--color-border); }
.steps__item:first-child { border-top: 0; padding-top: 0; }
.steps__num { display: block; min-width: 2ch; font-family: var(--font-display); font-size: clamp(44px, 2.1rem + 3.5vw, 90px); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.steps__title { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.steps__text p { margin-top: var(--space-8); max-width: 44ch; }
@media (min-width: 768px) {
	.steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.steps__item, .steps__item:first-child { display: block; padding: 0 var(--space-24); border-top: 0; border-left: var(--border-thin) solid var(--color-border); }
	.steps__item:first-child { padding-left: 0; border-left: 0; }
	.steps__num { margin-bottom: var(--space-16); }
}
@media (min-width: 1024px) {
	.steps__title { font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); }
}

/* ---------- Split (checks, FAQ): stacks below 1024, intro sticks from 1024 ---------- */
.split { display: grid; gap: var(--space-32); }
.split__intro p { margin-top: var(--space-24); max-width: 44ch; }
@media (min-width: 1024px) {
	.split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-48); align-items: start; }
	.split__intro { position: sticky; top: calc(var(--header-height) + var(--space-32)); }
	.admin-bar .split__intro { top: calc(var(--header-height) + var(--space-32) + 32px); }
}

/* ---------- FAQ accordion ---------- */
.accordion__item { border-bottom: var(--border-thin) solid var(--color-border); }
.accordion__item:first-child { border-top: var(--border-thin) solid var(--color-border); }
.accordion__heading { font: inherit; letter-spacing: 0; }
/* Brand book: accordion title 18px 600. The 18px step is the lead token at 390. */
.accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); width: 100%; min-height: 56px; padding: var(--space-16) 0; border: 0; background: none; color: var(--color-text); font-family: var(--font-body); font-size: var(--font-size-lead-390); font-weight: 600; line-height: var(--line-height-label); text-align: left; }
.accordion__trigger:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.accordion__trigger .icon { transition: transform var(--motion-fast) var(--motion-ease); }
.accordion__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.accordion__panel { padding-top: var(--space-8); padding-bottom: var(--space-20); max-width: 72ch; }
.accordion__panel p + p { margin-top: var(--space-8); }
.no-js .accordion__panel[hidden] { display: block !important; }
.no-js .accordion__trigger .icon { display: none; }

/* ---------- Final action ---------- */
.cta { padding-block: calc(var(--page-section) / 2) var(--page-section); }
.cta__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-24); padding: var(--space-20); background: var(--color-surface-muted); }
.cta__box p { margin-top: var(--space-8); color: var(--color-text-muted); }
@media (max-width: 767px) { .cta__box .btn { width: 100%; } }
@media (min-width: 768px) { .cta__box { padding: var(--space-32); } }