/*
 * Solutions v3 (docs/landing-redesign-spec.md §5 and §5.1, slice R3). Desktop follows the
 * Solutions v3 board; phones follow §3's stacking rules. Tokens and the shared components
 * (.pill .frame .phone .card .chk .kick .dot) come from css/landing-v3.css. The small page base
 * (.sv3-wrap, .sv3-h2, .btn) mirrors landing-home.css and landing-features.css; the three lift
 * into landing-v3.css in a follow-up now that all three pages are on main.
 */

.sv3 { background: var(--woof-cream); color: var(--woof-text); font-family: var(--woof-font); -webkit-font-smoothing: antialiased; }
.sv3 *, .sv3 *::before, .sv3 *::after { box-sizing: border-box; }
.sv3 h1, .sv3 h2, .sv3 h3, .sv3 p, .sv3 ul { margin: 0; }
.sv3 ul { padding: 0; list-style: none; }
.sv3 img { display: block; max-width: 100%; }
.sv3-wrap { max-width: 1296px; margin: 0 auto; padding: 0 32px; }
.sv3-h2 { font-size: 48px; line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; color: var(--woof-text); }
.sv3-lead { font-size: 17px; line-height: 1.6; color: #4b5563; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 14px; font: 700 16px var(--woof-font); text-decoration: none; border: 0; white-space: nowrap; }
.btn-blue { background: var(--woof-blue); color: #fff; }
.btn-blue:hover { background: var(--woof-blue-ink); }
.btn-ghost { background: #fff; color: var(--woof-text); border: 1px solid #d1d5db; }
.btn-ghost:hover { border-color: var(--woof-blue); color: var(--woof-blue-ink); }
.sv3 a:focus-visible { outline: 2px solid var(--woof-blue); outline-offset: 2px; }
.sv3-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.sv3 [id] { scroll-margin-top: 96px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sv3-hero { padding: 88px 0 24px; text-align: center; }
.sv3-hero-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sv3-hero h1 { font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; max-width: 1000px; }
.sv3-hero .sv3-lead { font-size: 19px; max-width: 640px; }
.sv3-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.sv3-tab { padding: 10px 16px; border-radius: 999px; font: 700 14px var(--woof-font); color: #4b5563; text-decoration: none; border: 1px solid var(--woof-line); background: #fff; }
.sv3-tab:hover { border-color: var(--woof-blue); color: var(--woof-blue-ink); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.sv3-cards { display: flex; flex-direction: column; gap: 24px; padding: 24px 0 0; }
.sv3-seg { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--woof-line); }
.sv3-seg-copy { display: flex; flex-direction: column; gap: 14px; }
.sv3-seg-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sv3-seg-title h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.sv3-pain { padding: 12px 14px; border-radius: 12px; background: #fff1f2; font-size: 14px; color: #9f1239; }
.sv3-checks { display: flex; flex-direction: column; gap: 8px; }
.sv3-seg-copy .btn { align-self: flex-start; margin-top: 4px; }
/* Art: a real app screenshot in a frame until real salon photos exist (§5.1 D19). */
.sv3-seg-art { height: 360px; border-radius: 16px; background: var(--woof-sky); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; padding: 28px 28px 0; }
.sv3-seg-art .phone { width: 220px; height: 420px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.sv3-seg-art .frame { width: 100%; height: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.sv3-cta { margin-top: 72px; padding: 72px 0; background: var(--woof-sky); }
.sv3-cta-in { display: flex; align-items: center; gap: 48px; }
.sv3-cta-in > img { width: 180px; height: 180px; flex: 0 0 auto; }
.sv3-cta-copy { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.sv3-cta-copy .sv3-lead { font-size: 19px; }

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .sv3-hero h1 { font-size: 52px; }
}

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .sv3-wrap { padding: 0 16px; }
    .sv3-hero { padding: 92px 0 8px; } /* 64px fixed nav + 28px */
    .sv3-hero h1 { font-size: 38px; line-height: 1.02; }
    .sv3-hero .sv3-lead { font-size: 15px; }
    .sv3-tabs { gap: 6px; }
    .sv3-tab { font-size: 13px; padding: 8px 12px; }
    .sv3-cards { gap: 12px; padding-top: 16px; }
    .sv3-seg { grid-template-columns: 1fr; padding: 18px; gap: 14px; }
    .sv3-seg-art { order: -1; height: 200px; padding: 16px 16px 0; }
    .sv3-seg-art .phone { width: 150px; height: 280px; }
    .sv3-seg-title h2 { font-size: 20px; }
    .sv3-seg-copy .btn { align-self: stretch; }
    .sv3-h2 { font-size: 30px; }
    .sv3-lead { font-size: 15px; }
    .sv3-cta { margin-top: 40px; padding: 40px 0; }
    .sv3-cta-in { flex-direction: column; text-align: center; gap: 12px; }
    .sv3-cta-in > img { width: 120px; height: 120px; }
    .sv3-cta .sv3-ctas { width: 100%; flex-direction: column; }
    .sv3-cta .btn { width: 100%; }
    .sv3 [id] { scroll-margin-top: 76px; }
}