/* site.css — marketing surfaces only (landing, pricing, how-it-works,
   comparison). Loaded by the public Layout shell on top of app.css; player,
   organizer, TV, and guides pages never download it. */
/* landing */
.hero2{display:flex;gap:36px;align-items:center;flex-wrap:wrap;padding:20px 0 10px}
.hero-copy{flex:1 1 340px;min-width:0}
.hero2 h1{font-size:clamp(27px,4.4vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:6px 0 0}
.hero2 p.lede{font-size:clamp(15px,1.8vw,18px);color:var(--muted);max-width:56ch;margin:12px 0 22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-board{flex:1 1 280px;max-width:430px;min-width:0;background:var(--board);color:var(--board-ink);border-radius:16px;padding:16px 18px 12px;border-bottom:4px solid var(--live);box-shadow:0 18px 44px rgba(10,30,20,.22)}
.hb-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.hb-title{font-weight:800;font-size:clamp(15px,2vw,18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-row{display:grid;grid-template-columns:36px minmax(0,1fr) 52px 42px;gap:6px;align-items:baseline;padding:8px 2px;border-bottom:1px solid var(--board-line);font-size:clamp(13px,1.7vw,15px)}
.hb-row.h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--board-muted);font-weight:700;border-bottom:1px solid var(--board-line)}
.hb-row .p{font-weight:800;color:var(--board-muted)}
.hb-row span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.hb-row .n{text-align:right;font-variant-numeric:tabular-nums}
.hb-row .u{color:var(--under);font-weight:800}
.hb-row .e{color:var(--board-muted);font-weight:700}
.hb-foot{display:flex;align-items:center;gap:12px;padding:10px 2px 2px;font-size:12px;color:var(--board-muted);letter-spacing:.05em}
.hb-qr{flex:0 0 auto;width:56px;height:56px;background:#fff;border-radius:6px;padding:3px;box-sizing:border-box}
@media (max-width:720px){.hero-board{max-width:none;flex-basis:100%}}
/* fixed 4→2→1 columns (never 3) so the 8 cards always fill even rows */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:30px 0}
@media (min-width:900px){.features{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.features{grid-template-columns:1fr}}
.feature h3{font-size:16px}
.feature p{color:var(--muted);font-size:14px;margin:4px 0 0}
.trustline{margin:14px 0 0;font-size:12.5px;color:var(--muted);letter-spacing:.02em}

/* comparison table */
.cmp-wrap{margin:30px 0}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.cmp th,.cmp td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;border-bottom:2px solid var(--line)}
.cmp td:first-child{color:var(--muted);font-weight:600}
.cmp .us{color:var(--accent);font-weight:700}
.cmp thead th.us{color:var(--accent)}
.cmp tbody td.us{background:var(--chip)}
.cmp tr td.us{font-weight:700}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-top:18px}
.plan{display:flex;flex-direction:column}
.plan.hi{border-color:var(--accent);border-width:2px}
.plan .price{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:4px 0 0}
.plan .price small{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-top:2px}
.plan ul{padding-left:18px;margin:12px 0;flex:1;font-size:13.5px}
.plan li{margin:5px 0}
/* Every plan CTA is the same box whether it renders as a link, a form
   button, or the htmx interest form - the wrapper takes the auto margin
   so the button always sits on the card floor at one fixed height. */
.plan .cta,.plan .ctawrap{margin-top:auto}
.plan .ctawrap form{margin:0}
.plan .btn.cta,.plan button.cta{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:46px;padding:11px 14px;line-height:1.2;font-family:inherit}

/* how-it-works steps */
.steps{list-style:none;padding:0;margin:0;counter-reset:step}
.steps li{counter-increment:step;display:flex;gap:14px;margin:16px 0}
.steps li::before{content:counter(step);flex:none;width:30px;height:30px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;display:flex;align-items:center;justify-content:center}
.steps .shots{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-top:12px}
.steps .shots img{height:300px;width:auto;max-width:100%;border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
@media (max-width:560px){.steps .shots img{height:auto;width:100%}}

/* ── flow: the how-it-works stepper and the homepage band ──────────
   Both surfaces render the same Site.HowItWorks data. /how-it-works
   gets a sticky rail with every step in the DOM (readable by scrolling
   alone, which a first-time reader is owed); the homepage gets one
   step at a time behind controls that name where they go. Shared: the
   numbered-chip vocabulary, so the two pages agree.
   Both degrade without JS - the rail is a plain anchor list and the
   band renders every step stacked. */
.flow{display:grid;grid-template-columns:236px minmax(0,1fr);gap:30px;align-items:start;margin-top:22px}
.flow-rail{position:sticky;top:14px;display:flex;flex-direction:column;gap:4px;
	background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:13px 11px}
.flow-rail .rl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
	color:var(--muted);padding:2px 8px 8px}
.flow-step{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;
	width:100%;text-align:left;background:transparent;border:1px solid transparent;
	border-radius:10px;padding:9px;cursor:pointer;color:var(--ink);font:inherit;
	font-size:13.8px;text-decoration:none;min-height:44px}
.flow-step:hover{background:var(--chip);border-color:var(--line);text-decoration:none}
.flow-step .n{width:26px;height:26px;border-radius:999px;background:var(--surface);
	border:1px solid var(--line);color:var(--muted);font-weight:800;font-size:12.5px;
	display:flex;align-items:center;justify-content:center;flex:none}
.flow-step .t{font-weight:600;line-height:1.34;min-width:0}
.flow-step[aria-current="step"]{background:var(--surface);border-color:var(--accent);
	box-shadow:0 2px 10px rgba(0,0,0,.06)}
.flow-step[aria-current="step"] .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.flow-step[aria-current="step"] .t{font-weight:700}
.flow-pane{padding:8px 0 34px;border-bottom:1px solid var(--line);scroll-margin-top:18px}
.flow-pane:last-child{border-bottom:none}
.flow-eye{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.11em;
	text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.flow-pane h3{margin:0;font-size:21px;letter-spacing:-.02em}
.flow-inc{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}
.flow-inc li{display:flex;gap:9px;font-size:14px;color:var(--muted);line-height:1.5}
.flow-inc li::before{content:"\2713";color:var(--accent);font-weight:800;flex:none}
/* Screenshots carry the argument on this page, so they get real size.
   Size them by WIDTH, not by a shared row height: a fixed 340px height
   put a 1180px-wide app screenshot in a ~500px box, a 2.4x downscale
   that turned every label into mush. Filling the column instead keeps
   the source-to-display ratio near 1:1 (see how.js viewports). */
.flow-media{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;align-items:flex-start}
.flow-media img{width:100%;max-width:660px;height:auto;border:1px solid var(--line);
	border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.08);background:var(--surface);display:block}
/* Phone screenshots are far narrower than the app ones - stretched to
   the column they would be absurd. Cap them near their own native
   width (390 CSS px) so they render close to life size. */
.flow-media img.tall{max-width:352px}
/* A step with more than one picture: show one at a time. Side by side
   they each came out too narrow to read. No JS = every image shows,
   which is the same as the old behaviour; .fm-on hides the rest. */
.fm-nav{display:none;align-items:center;gap:10px;margin-top:12px}
.fm.fm-on{display:block}
.fm.fm-on img{display:none}
.fm.fm-on img[data-fm-on]{display:block}
.fm.fm-on .fm-nav{display:flex}
.fm-btn{width:40px;height:40px;flex:none;border-radius:9px;border:1px solid var(--line);
	background:var(--surface);color:var(--ink);font:inherit;font-size:17px;cursor:pointer;
	padding:0;display:flex;align-items:center;justify-content:center}
.fm-btn:hover{border-color:var(--accent)}
.fm-btn[disabled]{opacity:.35;cursor:not-allowed}
.fm-dots{display:flex;gap:6px}
.fm-dot{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
	background:var(--surface);color:var(--muted);font:inherit;font-size:13px;font-weight:700;
	cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.fm-dot:hover{border-color:var(--accent);color:var(--ink)}
.fm-dot[aria-current="step"]{background:var(--board);border-color:var(--board);color:var(--board-ink)}
.flow-chips{display:none}
.flow-chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:9px 13px;
	border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
	font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
	text-decoration:none;min-height:40px}
.flow-chip .n{font-weight:800;opacity:.5}
.flow-chip[aria-current="step"]{background:var(--board);border-color:var(--board);color:var(--board-ink)}
.flow-chip[aria-current="step"] .n{opacity:.8}
/* Mobile: the rail flattens to a sticky chip strip, so position stays
   on screen the whole way down a long page. */
@media (max-width:860px){
	.flow{grid-template-columns:minmax(0,1fr);gap:0}
	.flow-rail{display:none}
	.flow-chips{display:flex;gap:7px;overflow-x:auto;position:sticky;top:0;z-index:20;
		padding:10px 0;margin:14px 0 0;background:var(--bg);border-bottom:1px solid var(--line);
		scrollbar-width:none;-webkit-overflow-scrolling:touch}
	.flow-chips::-webkit-scrollbar{display:none}
}

/* §C4 "See it run" chips under a how-it-works step */
.flow-demos{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:12px}
.flow-demo{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;text-decoration:none;color:var(--ink);background:var(--card)}
.flow-demo:hover{border-color:var(--ink)}

/* §D5 help tiles: uniform clickable cards on the .features grid */
a.helptile{display:block;text-decoration:none;color:inherit;margin:0;height:100%}
a.helptile h3{margin:0 0 6px;font-size:16px}
a.helptile p{margin:0;font-size:13.5px;color:var(--muted)}
a.helptile:hover{border-color:var(--ink)}

/* Auth flow (AUTH-PLAN-2.0 A1): the sign-in / verify / logout cards. These
   pages run under the strict auth CSP - every rule must live here, never in
   a style attribute. */
.authwrap{display:flex;justify-content:center;padding:48px 16px}
.authcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px 26px;max-width:420px;width:100%}
.authcard h1{margin:0 0 10px;font-size:22px}
.authsub{margin:0 0 16px;font-size:14.5px;color:var(--muted);line-height:1.55}
.authform{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.authform label{font-size:13px;font-weight:600}
.authform input[type=email]{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:var(--card);color:var(--ink)}
.authnote{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.autherr{margin:0 0 12px;font-size:13.5px;color:#b3261e;background:rgba(179,38,30,.08);border:1px solid rgba(179,38,30,.25);border-radius:10px;padding:8px 12px}

/* ── landing 2026-08-28 (the "E" page): section vocabulary ──────────
   One family of blocks: .secband is a white section card, .sechead a
   plain heading run, .chipflow the arrow-chip pipelines. Everything is
   token-colored so the three themes keep working; spacing one-offs stay
   inline in home.templ like the rest of the page. */
.sechead{margin:38px 0 18px}
.sechead h2{margin:4px 0 0;font-size:26px;letter-spacing:-.02em}
.sechead .sub{margin:6px 0 0;font-size:15px;max-width:62ch}
.sechead.center{text-align:center}
.sechead.center .sub{margin-left:auto;margin-right:auto}
.secband{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 28px;margin:28px 0}
.chipflow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.chipflow .fc{display:inline-block;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}
.chipflow .fc.hot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chipflow svg{flex:none}
/* Two-column feature bands: copy beside a mock. The mock never squeezes
   the copy - it stacks under it on a phone. */
.twocol{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:center}
.twocol.wide{grid-template-columns:.9fr minmax(0,1.1fr)}
/* The setup-wizard mock (static markup, not a screenshot - it can never
   go stale against a CSS change). */
.uimock{display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:20px}
.wizmock{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;width:92%;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.wizmock .wt{margin:0 0 10px;font-size:13px;font-weight:700}
.wizmock .wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wizmock .wtile{border:1px solid var(--line);border-radius:8px;padding:10px 8px;font-size:12px;font-weight:700}
.wizmock .wtile span{display:block;font-weight:500;color:var(--muted);font-size:11px}
.wizmock .wtile.on{border:2px solid var(--accent);background:var(--chip);padding:9px 7px}
/* The phone mock: a scoring screen inside a dark bezel. */
.phonemock{justify-self:center;width:250px;background:var(--board);border-radius:26px;padding:10px;box-shadow:0 14px 34px rgba(10,30,20,.24)}
.pm-in{background:var(--bg);border-radius:18px;padding:14px 13px;color:var(--ink)}
.pm-head{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:9px;font-size:12px;font-weight:800}
.pm-chip{font-size:10px;font-weight:700;background:var(--live);color:#1C2B22;border-radius:999px;padding:3px 8px;white-space:nowrap}
.pm-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.pm-row b{flex:1;font-size:12.5px}
.pm-row .pb{width:26px;height:26px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted)}
.pm-row .pn{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.pm-note{margin:9px 0 0;text-align:center;font-size:10.5px;color:var(--muted)}
/* The offline band commits to the scoreboard look in every theme. It is
   centered like the page's other full-width statement bands - only bands
   with a mock beside them run left. */
.offdark{background:var(--board);color:var(--board-ink);border-radius:16px;padding:28px 30px;margin:28px 0;border-bottom:4px solid var(--live);text-align:center}
.offdark .eye{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--live);margin:0 0 6px}
.offdark h2{margin:0 0 10px;font-size:28px;letter-spacing:-.02em}
.offdark .sub{color:var(--board-muted);margin:0 auto 18px;font-size:15.5px;max-width:56ch}
.offsteps{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.offsteps .os{border:1px solid var(--board-line);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.offsteps .os.done{background:var(--live);color:#1C2B22;border-color:var(--live)}
.offdark .fine{margin:16px 0 0;font-size:12.5px;color:var(--board-muted)}
/* Why-cards: the numbered trio above the comparison. */
.whycards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}
.whycards .num{margin:0;font-size:30px;font-weight:800;color:var(--line);font-variant-numeric:tabular-nums}
.whycards b{display:block;font-size:17px;margin:6px 0 4px}
.whycards span{font-size:14px;color:var(--muted);line-height:1.5}
/* Pricing, yearly-led: two pass cards over the per-event strip. */
.passgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}
.pass{display:flex;flex-direction:column;padding:22px 24px}
.pass .aud{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-weight:700}
.pass .price{margin:0;font-size:32px;font-weight:800;letter-spacing:-.02em}
.pass .price small{font-size:14px;font-weight:600;color:var(--muted)}
.pass .pname{display:block;font-size:15px;margin:6px 0 4px;font-weight:700}
.pass .pdesc{font-size:13.5px;color:var(--muted);line-height:1.55}
.eventstrip{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:14px;text-align:center;padding:14px 20px}
/* Support row + the sample doors share a centered band. */
.supportrow{display:flex;align-items:center;gap:14px;padding:16px 20px}
.supportrow svg{flex:none}
.doorrow{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
@media (max-width:860px){
	.twocol,.twocol.wide{grid-template-columns:minmax(0,1fr)}
	.whycards{grid-template-columns:minmax(0,1fr)}
	.passgrid{grid-template-columns:minmax(0,1fr)}
	.sechead h2{font-size:22px}
	.offdark{padding:20px 18px}
	.offdark h2{font-size:23px}
}
/* Inert sample-page "buttons": the shape of the real action without the
   tap - a sample never takes a write it can't honor. */
.demo-inert{opacity:.55;cursor:default}