/* The website check's own layout, on the shared Feel These Vib3s look (assets/brand/brand.css,
   copied by Website-Builder/scripts/sync_brand.py, never edited here). Every colour below is one
   of the kit's variables, so the page adds no colour of its own and nothing new to check. */

.hero { padding-block: 40px 28px; }
.hero .wrap, .why .wrap { max-width: 720px; }
.hero h1 { font-size: clamp(36px, 8.6vw, 60px); }

.promise { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.promise li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 15px; font-weight: 700; }

.check-card { padding: 22px; margin-top: 26px; box-shadow: var(--shadow); }
.form .opt { font-weight: 400; color: var(--soft); font-size: 14px; }
.form .tick { display: flex; gap: 12px; align-items: flex-start; }
.form .tick label { display: block; font-weight: 500; }
.form .tick input { width: 22px; height: 22px; min-height: 0; flex: none; margin: 3px 0 0; padding: 0; accent-color: var(--brand); }
.form input:disabled { opacity: .45; }
.ts { min-height: 65px; }
#go { width: 100%; }
#go:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.error { margin: 0; min-height: 1.2em; color: var(--brand); font-weight: 700; }
.small { font-size: 15px; color: var(--soft); }

.result h2 { font-size: clamp(26px, 5.4vw, 36px); margin-bottom: 6px; }
.finding { display: grid; grid-template-columns: 4.6rem 1fr; gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.finding:first-of-type { border-top: 0; }
.finding strong { font-weight: 700; }
.finding p { margin: 0; color: var(--soft); font-size: 16px; }
.badge { grid-row: span 2; align-self: start; margin-top: 3px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 2px solid currentColor; }
.badge.good { color: var(--mint); }
.badge.fix { color: var(--brand); }
.next { margin-top: 18px; background: var(--card-2); border-left: 4px solid var(--brand); border-radius: 12px; padding: 14px 16px; }
.next p { margin: 0 0 8px; }
.next p:last-child { margin: 0; }

.why { padding-block: 24px 40px; }
.why ul { padding-left: 1.2rem; color: var(--soft); }
.why li { margin: 6px 0; }

.foot { padding-block: 28px 44px; text-align: center; font-size: 15px; color: var(--soft); }
.foot p { margin: 4px 0; }

[hidden] { display: none !important; }