/* Home page layout. Components and tokens live in /css/ds.css. */

.ink { color: var(--ink); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.badge-row, .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.section--tight { padding-top: var(--space-12); }
.section-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: 820px; margin: 0 auto var(--space-12); text-align: center; }
.kicker { font-size: 22px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-12) 56px; align-items: start; }
.split--center { align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.grid-2--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-6); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 56px; padding-bottom: var(--space-12); }
.hero .h-hero { font-size: clamp(36px, 4.4vw, 52px); }  /* long headline: cap below --fs-hero */
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; } }
.hero__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.hero__note { font-size: 14px; font-weight: 500; color: var(--slate); }
.hero__panel { display: flex; flex-direction: column; gap: var(--space-5); padding: 28px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.queue { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-subtle); box-shadow: var(--shadow-well); }
.queue__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); }
.queue__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: var(--slate); }
.queue__text b { font-size: 14px; color: var(--ink); }
.hero__panel .grid-2 { grid-template-columns: 1fr 1fr; }
.proof-strip { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); font-size: 15px; color: var(--slate); text-align: center; }
.proof-strip b { color: var(--ink); }
.proof-strip .badge { margin-right: var(--space-2); vertical-align: 1px; }

/* Problem: time bars */
.bars { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.bar { display: grid; grid-template-columns: 150px 1fr 64px; align-items: center; gap: var(--space-3); font-size: 14px; }
.bar i { height: 8px; border-radius: var(--radius-full); background: var(--border); position: relative; overflow: hidden; }
.bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 8px; border-radius: inherit; background: var(--accent); }
.bar b { text-align: right; font-weight: 600; }
.bar--slow b, .bar--slow span { color: var(--amber-500); font-weight: 600; }
.bar--slow i::after { background: var(--amber-500); }

/* System flow (ink band) */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-5); counter-reset: flow; }
.flow li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: rgba(255,255,255,.07); }
.flow h3 { font-size: 18px; }
.flow p { font-size: 15px; }
.flow__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(154,167,255,.16); color: var(--indigo-300); }
.flow__icon svg { width: 18px; height: 18px; }
.flow .flow__you { background: var(--white); }
.flow .flow__you h3 { color: var(--ink); }
.flow .flow__you p { color: var(--slate); }
.flow .flow__you .flow__icon { background: var(--indigo-100); color: var(--accent); }

/* Before vs after */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); max-width: 820px; margin: 0 auto; }
.versus__side { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8); text-align: center; }
.versus__num { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: var(--tracking-tight); }
.versus__num small { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.versus__vs { font-weight: 700; color: var(--slate-light); text-transform: uppercase; font-size: 13px; letter-spacing: var(--tracking-label); }
.result-list { width: fit-content; margin: var(--space-10) auto var(--space-8); }
@media (max-width: 640px) { .versus { grid-template-columns: 1fr; } }

/* How it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-5); }
.steps li { display: flex; flex-direction: column; gap: var(--space-3); }
.steps h3 { font-size: 18px; }
.steps__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--accent); color: var(--white); font-weight: 700; }

/* Founder */
.founder__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 0 0 1px var(--border), var(--shadow-md); background: var(--surface-subtle); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Testimonials */
.quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); }
.quote blockquote { margin: 0; font-size: var(--fs-body-l); font-weight: 500; line-height: 1.55; }
.quote figcaption { display: flex; align-items: center; gap: var(--space-3); }
.quote img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--border); }
.quote figcaption span { display: flex; flex-direction: column; font-size: 13px; color: var(--slate); }
.quote figcaption b { font-size: 15px; color: var(--ink); }

/* Closing */
.closing-wrap { padding-bottom: var(--space-24); }
.closing { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: 56px var(--space-6); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); text-align: center; }
.closing h2 { max-width: 720px; }
.closing p { max-width: 560px; font-size: var(--fs-body-l); }
.closing .closing__note { font-size: 14px; color: rgba(255,255,255,.6); }

@media (max-width: 600px) {
    .section { padding: var(--space-16) 0; }
    .section--tight { padding-top: var(--space-8); }
    .hero { padding-top: var(--space-8); }
    .bar { grid-template-columns: 110px 1fr 56px; font-size: 13px; }
    .btn-row .btn { width: 100%; }
}