@font-face { font-family: 'Onest'; font-weight: 100 900; font-display: swap; src: url(/fonts/onest-100-900-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Onest'; font-weight: 100 900; font-display: swap; src: url(/fonts/onest-100-900-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF; }

/* Same family as The Bar: grey canvas, white cards, one blue accent, sans only. */
:root {
  --canvas: #fbfaf9; --card: #fff; --panel: #fff6f0; --ink: #16130f; --text: #2b2723; --soft: #6b645d; --hair: #efe9e4; --hair-2: #e2d9d1;
  --accent: #c2410c; --accent-ink: #a8380a; --accent-bg: #fff1e8; --glow: #ff7a2f;
  --go: #1b7a43; --go-bg: #e8f6ee; --adjust: #8a5600; --adjust-bg: #fff4e0; --stop: #b4321f; --stop-bg: #fdecea;
  --shadow: 0 1px 2px rgba(40,20,5,.04), 0 8px 24px rgba(40,20,5,.05);
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 400 17px/1.55 Onest, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); }
b, strong { font-weight: 600; color: var(--ink); }
h1, h2, h3 { color: var(--ink); }
h1 { font-size: clamp(28px, 6vw, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin: 6px 0 12px; }
h2 { font-size: 21px; font-weight: 600; margin: 28px 0 8px; }
h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
h1:focus, main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 5; }
.skip:focus { left: 8px; }
.soft { color: var(--soft); }
.fine { color: var(--soft); font-size: 15px; }

.top { display: flex; justify-content: space-between; align-items: center; max-width: 760px; margin: 0 auto; padding: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 18px; }
.logo { width: 32px; height: 32px; border-radius: 9px; background: var(--accent) url(/favicon.svg) center/cover; }
.toplink { color: var(--soft); font-size: 15px; padding: 10px 4px; }
main { display: block; max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; }
.site-foot { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; color: var(--soft); font-size: 14px; }
.site-foot a { color: inherit; }

.panel { background: var(--card); border-radius: 24px; padding: clamp(20px, 5vw, 40px); box-shadow: var(--shadow); }
.panel + .panel { margin-top: 16px; }
.step { margin: 0; font-size: 14px; font-weight: 500; color: var(--soft); }
.lede { font-size: 19px; color: var(--soft); margin: 0 0 18px; max-width: 34em; }
.help { color: var(--soft); font-size: 15.5px; margin: 8px 0 0; }
.example { color: var(--soft); font-size: 15.5px; margin: 8px 0 0; }
.example b { color: var(--soft); font-weight: 600; }

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 0; }
.row.split { justify-content: space-between; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 22px; border-radius: 14px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; font: 600 16px/1 Onest, sans-serif; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--hair-2); }
.btn.ghost:hover { background: var(--panel); }
.btn.danger { background: var(--stop); border-color: var(--stop); }
.btn.small { min-height: 44px; padding: 10px 16px; font-size: 15px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.linkbtn { background: none; border: 0; padding: 10px 0; font: inherit; color: var(--accent-ink); text-decoration: underline; cursor: pointer; min-height: 44px; }

.field { display: grid; gap: 6px; margin: 18px 0 0; }
.field > span { font-weight: 600; color: var(--ink); }
.field em { font-style: normal; font-weight: 400; color: var(--soft); }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=url], textarea, select { font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--hair-2); border-radius: 12px; padding: 12px 14px; min-height: 50px; width: 100%; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-bg); }
input[readonly] { background: var(--panel); }
.err { color: var(--stop); font-weight: 500; margin: 8px 0 0; }
.nudge { background: var(--adjust-bg); color: #5c3900; border-radius: 12px; padding: 12px 14px; margin: 14px 0 0; }
.ok { background: var(--go-bg); color: #10502b; border-radius: 12px; padding: 12px 14px; margin: 14px 0 0; }

.sentence { font-size: 19px; line-height: 2.2; color: var(--ink); }
.sentence input { display: inline-block; width: auto; min-height: 44px; padding: 6px 10px; margin: 0 4px; }
.sentence input[type=number] { width: 6.5em; }
.sentence input[type=date] { width: 11em; }

.choices { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; border: 0; }
.choice { position: relative; display: block; background: var(--card); border: 1.5px solid var(--hair-2); border-radius: 16px; padding: 16px 18px 16px 52px; cursor: pointer; }
.choice input { position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; accent-color: var(--accent); }
.choice b { display: block; font-size: 17px; }
.choice span { display: block; color: var(--soft); font-size: 15.5px; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; border: 0; padding: 0; }
.swatch { position: relative; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.swatch:has(input:checked) { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); }
.swatch:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 6px; }

.progress { height: 6px; border-radius: 3px; background: var(--hair); margin: 0 0 18px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* the live preview of the founder's page */
.preview { margin-top: 20px; }
.preview > p { margin: 0 0 8px; }
.mini { border: 1.5px dashed var(--hair-2); border-radius: 20px; background: #efeff1; padding: 14px; }
.mini .card { background: #fff; border-radius: 16px; padding: 20px; }
.mini img { display: block; width: calc(100% + 40px); max-height: 180px; object-fit: cover; margin: -20px -20px 14px; border-radius: 16px 16px 0 0; }
.mini .eyebrow { margin: 0 0 4px; font-weight: 600; font-size: 14px; color: var(--pa); }
.mini h3 { font-size: 22px; line-height: 1.2; margin: 0 0 10px; }
.mini ul { margin: 0 0 10px; padding-left: 20px; }
.mini .price { font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 8px; }
.mini .nr { background: var(--pa-bg); border-radius: 10px; padding: 8px 12px; font-size: 14px; margin: 0 0 12px; }
.mini .fakebtn { display: block; text-align: center; background: var(--pa); color: #fff; border-radius: 12px; padding: 12px; font-weight: 600; }

/* watching */
.big { font-size: clamp(26px, 6vw, 36px); line-height: 1.2; font-weight: 600; color: var(--ink); margin: 6px 0 12px; }
.status { display: inline-block; border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 15px; }
.status.go { background: var(--go-bg); color: var(--go); }
.status.wait { background: var(--accent-bg); color: var(--accent-ink); }
.status.miss { background: var(--stop-bg); color: var(--stop); }
.status.off { background: var(--panel); color: var(--soft); }
details { border-top: 1px solid var(--hair); padding: 12px 0; }
details:last-of-type { border-bottom: 1px solid var(--hair); }
summary { cursor: pointer; font-weight: 600; color: var(--ink); min-height: 32px; }
table { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: 15.5px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--hair); }
th { color: var(--soft); font-weight: 500; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.people { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.people li { background: var(--panel); border-radius: 14px; padding: 12px 14px; }
.people .when { color: var(--soft); font-size: 14px; }
.linkbox { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--panel); border-radius: 14px; padding: 10px 12px; margin: 8px 0 0; }
.linkbox code { flex: 1 1 220px; word-break: break-all; font-size: 15px; color: var(--ink); }
.list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.list a.item { display: block; background: var(--card); border: 1.5px solid var(--hair); border-radius: 16px; padding: 14px 16px; text-decoration: none; color: var(--text); }
.list a.item:hover { border-color: var(--hair-2); }
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0; }
.versus > div { background: var(--panel); border-radius: 16px; padding: 14px 16px; }
.versus b { display: block; font-size: 24px; }
.quiet { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--hair); color: var(--soft); }
.qr svg { width: 160px; height: 160px; display: block; }
.posters { display: grid; gap: 12px; margin: 14px 0 0; }
.poster-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--panel); border-radius: 16px; padding: 12px; }
.poster-row .qr svg { width: 96px; height: 96px; background: #fff; border-radius: 8px; }
dialog { border: 0; border-radius: 20px; padding: 24px; max-width: min(460px, calc(100vw - 32px)); box-shadow: 0 10px 40px rgba(0,0,0,.2); color: var(--text); }
dialog::backdrop { background: rgba(20,20,23,.45); }
dialog h2 { margin-top: 0; }
.gloss { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 0; }
.gloss dt { font-weight: 600; color: var(--ink); }
.gloss dd { margin: 0; color: var(--soft); }

/* printing posters: only the sheets */
.sheet { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .top, .site-foot, .skip, .noprint, #live { display: none !important; }
  main { padding: 0; max-width: none; }
  .sheet { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 297mm; width: 210mm; padding: 22mm; page-break-after: always; break-after: page; }
  .sheet h1 { font-size: 40pt; margin: 0 0 8mm; }
  .sheet .name { font-size: 18pt; font-weight: 600; color: #1d5fd1; margin: 0 0 4mm; }
  .sheet .qr svg { width: 90mm; height: 90mm; }
  .sheet .short { font-size: 16pt; margin: 6mm 0 0; }
  .sheet .small { font-size: 11pt; color: #555; margin-top: 10mm; }
}
@media (max-width: 520px) { .versus { grid-template-columns: 1fr; } .sentence { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* accents for the preview and the swatches (classes, because the CSP allows no inline styles) */
.pa-blue { --pa: #1d5fd1; --pa-bg: #e6eefc; } .sw-blue { background: #1d5fd1; }
.pa-green { --pa: #1f7a45; --pa-bg: #e5f4ea; } .sw-green { background: #1f7a45; }
.pa-red { --pa: #b4321f; --pa-bg: #fbe9e6; } .sw-red { background: #b4321f; }
.pa-purple { --pa: #6f3fc0; --pa-bg: #efe8fa; } .sw-purple { background: #6f3fc0; }
.pa-amber { --pa: #8a5600; --pa-bg: #fbf0dc; } .sw-amber { background: #8a5600; }
.pa-ink { --pa: #23272f; --pa-bg: #ececef; } .sw-ink { background: #23272f; }
.grow { flex: 1 1 180px; width: auto !important; }
.choice.gap { margin-top: 16px; }
.big.mid { font-size: 22px; }
h2.first { margin-top: 0; }

/* ---------- warm style: white canvas, orange accent, pill buttons, soft orange glow, thin borders */
body { background: var(--canvas); }
h1 { font-weight: 600; letter-spacing: -.03em; }
.top { max-width: 820px; }
.logo { border-radius: 10px; background: url(/favicon.svg) center/cover; box-shadow: 0 4px 12px rgba(232, 89, 12, .3); }
.toplink { color: var(--ink); background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 9px 16px; text-decoration: none; font-weight: 500; }
.panel { border: 1px solid var(--hair); border-radius: 28px; box-shadow: var(--shadow); }
.btn { border-radius: 999px; padding: 13px 24px; }
.btn:not(.ghost):not(.danger) { background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 16px rgba(194, 65, 12, .25); }
.btn:not(.ghost):not(.danger):hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn.ghost { border-color: var(--hair-2); }
.btn.ghost:hover { background: var(--accent-bg); border-color: #f3c7aa; }
.btn.small { border-radius: 999px; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=url], textarea, select { border-color: var(--hair-2); border-radius: 14px; }
.choice { border-color: var(--hair); border-radius: 18px; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.choice input { accent-color: var(--accent); }
.progress { background: var(--accent-bg); }
.progress i { background: linear-gradient(90deg, #ff8a3d, var(--accent)); }
.step { display: inline-flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--hair); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.chip::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(145deg, #ff8a3d, #e8590c); }
h1 em, .big em { font-style: normal; color: var(--accent); }
.hero { position: relative; overflow: hidden; text-align: center; padding-top: clamp(32px, 7vw, 64px); padding-bottom: clamp(32px, 7vw, 56px); }
.hero::before { content: ''; position: absolute; inset: auto -20% -60% -20%; height: 90%; background: radial-gradient(closest-side, rgba(255, 138, 61, .22), transparent); pointer-events: none; }
.hero > * { position: relative; }
.hero h1 { font-size: clamp(32px, 7vw, 54px); max-width: 14em; margin: 14px auto 14px; }
.hero .lede { margin: 0 auto 8px; }
.hero .row { justify-content: center; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.fact { background: #fff; border: 1px solid var(--hair); border-radius: 22px; padding: 18px; box-shadow: var(--shadow); }
.fact b { display: block; font-size: 26px; letter-spacing: -.02em; }
.fact span { color: var(--soft); font-size: 15px; }
.mini { background: linear-gradient(180deg, #fff7f1, #fdece0); border: 1px solid #f6d9c5; border-style: solid; }
.versus > div, .poster-row, .people li, .linkbox { background: var(--panel); border: 1px solid #f6e4d7; }
.status.wait { background: var(--accent-bg); color: var(--accent-ink); }
.big { letter-spacing: -.02em; }
.ok { background: var(--go-bg); }
dialog { border-radius: 24px; border: 1px solid var(--hair); }
.list a.item { border-color: var(--hair); border-radius: 20px; }
.list a.item:hover { border-color: #f3c7aa; background: var(--panel); }
.site-foot { text-align: center; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }
.pa-orange { --pa: #c2410c; --pa-bg: #fff1e8; } .sw-orange { background: #c2410c; }

/* ---------- refinement: wider layout, side-by-side builder, stat tiles, sections, neutral shadows */
:root { --shadow: 0 1px 2px rgba(22, 19, 15, .04), 0 6px 20px rgba(22, 19, 15, .05); --shadow-btn: 0 1px 2px rgba(22, 19, 15, .12); }
.top, main, .site-foot { max-width: 1080px; }
main > .panel, main > .facts, main > .section, main > .band { max-width: 860px; margin-left: auto; margin-right: auto; }
main > .panel + .facts, .facts + .panel, .facts + .section, .panel + .section { margin-top: 16px; }
h1, h2, .big { text-wrap: balance; }
p, .lede { text-wrap: pretty; }
.logo, .btn:not(.ghost):not(.danger) { box-shadow: var(--shadow-btn); }
.btn.light { background: #fff !important; color: var(--ink) !important; border-color: #fff !important; }
.btn.light:hover { background: var(--accent-bg) !important; }

/* builder: form and live preview side by side on wide screens */
.builder { max-width: 860px; margin: 0 auto; }
.builder.with-preview { max-width: 1080px; display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) {
  .builder.with-preview { grid-template-columns: minmax(0, 1fr) 400px; }
  .side-preview { position: sticky; top: 20px; }
  .side-preview .preview { margin-top: 0; }
}
.side-preview .preview > p { font-weight: 600; color: var(--ink); }

/* tabs for a live test */
.tabs { display: flex; gap: 4px; padding: 4px; margin: 22px 0 6px; background: var(--panel); border: 1px solid #f6e4d7; border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
.tab { flex: 1 0 auto; text-align: center; padding: 10px 16px; min-height: 44px; border-radius: 999px; color: var(--soft); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-btn); }

/* the numbers */
.big { font-size: clamp(22px, 4vw, 28px); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 12px; }
.stat { display: grid; gap: 2px; align-content: start; background: #fff; border: 1px solid var(--hair); border-radius: 20px; padding: 16px 18px; }
.stat span { color: var(--soft); font-size: 14px; font-weight: 500; }
.stat b { font-size: 38px; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat b em { font-style: normal; color: var(--soft); font-size: 24px; font-weight: 500; }
.stat small { color: var(--soft); font-size: 13.5px; }
.stat.bar { background: var(--panel); border-color: #f6e4d7; }
.meter { height: 8px; border-radius: 4px; background: #f3dccb; overflow: hidden; margin: 8px 0 4px; }
.meter i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr 1fr; } .stat.bar { grid-column: 1 / -1; } }

/* home sections */
.facts .fact { display: grid; gap: 2px; }
.ico { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 10px; background: var(--accent-bg); color: var(--accent); font-style: normal; font-weight: 700; font-size: 14px; }
.section { margin-top: 56px; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: 18px; }
.section-head h2 { font-size: clamp(24px, 4vw, 32px); letter-spacing: -.025em; line-height: 1.15; margin: 12px 0 0; max-width: 14em; }
.section-head p { color: var(--soft); max-width: 22em; margin: 0; }
.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; margin: 0; }
.steps li { counter-increment: s; display: grid; gap: 4px; align-content: start; background: #fff; border: 1px solid var(--hair); border-radius: 20px; padding: 18px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; }
.steps b, .kind b { color: var(--ink); font-size: 17px; }
.steps span, .kind span { color: var(--soft); font-size: 15px; }
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kind { display: grid; gap: 6px; align-content: start; background: #fff; border: 1px solid var(--hair); border-radius: 20px; padding: 20px; }
.kind small { color: var(--accent-ink); font-size: 14px; font-weight: 500; margin-top: 6px; }
.band { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; background: #1d1813; color: #e9e2db; border-radius: 28px; padding: clamp(24px, 5vw, 40px); }
.band h2 { color: #fff; margin: 0 0 8px; }
.band p { margin: 0; max-width: 34em; color: #cfc6bd; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } .kinds { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.stat .status { justify-self: start; margin-top: 8px; font-size: 13.5px; padding: 4px 12px; }
@media (max-width: 480px) { .tab { padding: 10px 10px; font-size: 14.5px; } }
.sentence input:placeholder-shown { border-style: dashed; border-color: var(--accent); background: var(--accent-bg); }
.sentence input::placeholder { color: var(--accent); opacity: 1; font-weight: 600; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--stop) !important; border-style: solid !important; box-shadow: 0 0 0 3px var(--stop-bg); }