/* Utility and signup pages share brand.css; only page-specific layouts live here. */
.flow-main { padding-block: clamp(64px, 10vw, 120px); min-height: 58vh; }
.flow-main h1 { max-width: 15ch; }
.flow-section { margin-block: 64px; }
.flow-note { max-width: 65ch; margin: 20px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.flow-state { max-width: 820px; }
.number-card { max-width: 620px; margin-top: 36px; }
#line-number { margin: 8px 0 24px; font: 400 clamp(30px, 5vw, 48px)/1.2 var(--serif); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#qr-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
#qr-box { background: white; border-radius: 16px; padding: 12px; line-height: 0; max-width: 100%; }
#qr-wrap p { max-width: 27ch; margin: 0; }
.trial-example { display: flex; flex-direction: column; gap: 16px; }
.flow-message { width: fit-content; max-width: 90%; margin: 0; background: #d5d9e0; padding: 13px 18px; border-radius: 20px 20px 20px 5px; font-size: 16px; }
.flow-message-out { align-self: flex-end; background: #0067dc; color: white; border-radius: 20px 20px 5px 20px; }
.flow-page details { margin-block: 12px; }
.flow-page summary { cursor: pointer; padding: 16px 0; font-weight: 600; }
.flow-page details p { padding-bottom: 20px; }
@media (max-width: 760px) { .flow-main { padding-block: 54px; } .flow-section { margin-block: 44px; } }