/* eventcnx.io marketing site: the approved ledger look (docs/site-sell.html, docs/site-pages.html).
   Author: C. Doherty · 2026-10-27 */

/* Layout: one problem-first story (cash problem → what changes → how a sale works → built for the night →
   treasurer → price → questions), rendered in three skins. The picker follows the viewer's theme; each skin
   is a deliberate single look and sets every color itself. */
:root{
  --c-bg:#eef0ec; --c-fg:#1a1f1b; --c-muted:#5f6a62; --c-line:#d3d9d3; --c-chip:#ffffff; --c-on:#0f4d2e; --c-on-fg:#ffffff;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c-bg:#101411; --c-fg:#e6ece7; --c-muted:#9aa89e; --c-line:#2b342e; --c-chip:#18201b; --c-on:#7fd3a3; --c-on-fg:#0e1311; color-scheme:dark}}
:root[data-theme="dark"]{--c-bg:#101411; --c-fg:#e6ece7; --c-muted:#9aa89e; --c-line:#2b342e; --c-chip:#18201b; --c-on:#7fd3a3; --c-on-fg:#0e1311; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0; background:var(--c-bg); color:var(--c-fg); font-family:"Figtree",system-ui,sans-serif}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--c-bg)}
.pad{padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
.in{max-width:1120px; margin:0 auto}

/* ---------- skin tokens ---------- */
.site{--bg:#0f3a25; --bg2:#0a2618; --panel:#efe6cf; --panel-fg:#1b2a20; --fg:#efe6cf; --muted:#c9bfa3; --head:#fff6dc; --accent:#e6b75c; --accent-fg:#1b1407;
  --bad:#ff8a7a; --good:#9fe0b4; --line:rgba(230,183,92,.3);
  --f-head:"Limelight",serif; --f-body:"Figtree",sans-serif; --f-num:"Figtree",sans-serif; --head-w:400; --head-case:none; --radius:18px;
  --ph-frame:#0b1f15; --ph-bg:#123a26; --ph-fg:#f4ead0; --ph-hand:#e6b75c; --ph-hand-fg:#1b1407;
  background:radial-gradient(120% 60% at 70% 0%,#1d5a3a 0%,var(--bg) 45%,var(--bg2) 100%); color:var(--fg); font-family:var(--f-body)}
.site.raffle{--bg:#ffffff; --bg2:#ffffff; --panel:#20161c; --panel-fg:#fff; --fg:#20161c; --muted:#5a4b53; --head:#20161c; --accent:#e8336d; --accent-fg:#fff;
  --bad:#d12d4f; --good:#1f8a52; --line:#20161c;
  --f-head:"Rubik Mono One",sans-serif; --f-body:"Rubik",sans-serif; --f-num:"Rubik Mono One",sans-serif; --head-w:400; --radius:8px;
  --ph-frame:#1e1e24; --ph-bg:#fff6f9; --ph-fg:#24161c; --ph-hand:#e8336d; --ph-hand-fg:#fff;
  background:#fff}
.site.ledger{--bg:#fbfdf8; --bg2:#fbfdf8; --panel:#18301f; --panel-fg:#fbfdf8; --fg:#18301f; --muted:#3f5747; --head:#18301f; --accent:#1f7a46; --accent-fg:#fff;
  --bad:#c0392b; --good:#1f7a46; --line:#18301f;
  --f-head:"IBM Plex Sans Condensed",sans-serif; --f-body:"IBM Plex Sans Condensed",sans-serif; --f-num:"IBM Plex Mono",monospace; --head-w:700; --radius:4px;
  --ph-frame:#2b2b2b; --ph-bg:#fbfdf8; --ph-fg:#18301f; --ph-hand:#1f7a46; --ph-hand-fg:#fff;
  background:#fbfdf8}

.site h1,.site h2{font-family:var(--f-head); font-weight:var(--head-w); color:var(--head); text-wrap:balance; margin:0}
.nav{display:flex; justify-content:space-between; align-items:center; padding-block:22px; gap:12px; flex-wrap:wrap}
.logo{font-family:var(--f-head); font-size:24px; color:var(--accent)}
.nav .links{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.nav a{color:var(--fg); text-decoration:none; font-weight:600; font-size:15px}
.btn{display:inline-block; background:var(--accent); color:var(--accent-fg)!important; font-weight:800; padding:14px 22px; border-radius:999px; text-decoration:none; font-size:16px}
.raffle .btn,.ledger .btn{border-radius:var(--radius)}
.link{color:var(--fg); font-weight:700; text-decoration:underline; text-underline-offset:4px}
.sec{padding-block:64px}
.kicker{font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--accent)}
.lede{font-size:19px; line-height:1.55; color:var(--muted); max-width:56ch}

/* hero: the problem in one picture */
.hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:44px; align-items:center; padding-block:30px 70px}
@media (max-width:880px){.hero{grid-template-columns:1fr}}
.hero h1{font-size:clamp(40px,6.2vw,76px); line-height:1; margin:14px 0 20px}
.ctas{display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-top:26px}
.scene{position:relative; min-height:420px}
.bubble{position:absolute; background:#fff; color:#1c1c1c; font:600 16px/1.3 "Figtree",sans-serif; padding:12px 16px; border-radius:16px; box-shadow:0 10px 30px -10px rgba(0,0,0,.4); max-width:230px}
.bubble::after{content:""; position:absolute; left:26px; bottom:-10px; border:10px solid transparent; border-top-color:#fff; border-bottom:0}
.bubble small{display:block; font-weight:500; font-size:12px; color:#6b6b6b; margin-top:4px}
.b1{left:0; top:0; transform:rotate(-2deg)}
.box{position:absolute; left:6px; bottom:20px; width:200px; height:120px; background:#7d8590; border-radius:10px; box-shadow:inset 0 -14px 0 rgba(0,0,0,.18), 0 18px 30px -12px rgba(0,0,0,.5); display:grid; place-items:end start; padding:0 16px 24px; color:#fff; font:800 13px "Figtree"; letter-spacing:.14em}
.box::before{content:""; position:absolute; left:70px; top:-16px; width:60px; height:22px; border:6px solid #5d636b; border-bottom:0; border-radius:10px 10px 0 0}
.box .note{position:absolute; right:-30px; top:-30px; background:#ffe680; color:#3b2f00; font:600 13px/1.25 "Figtree"; padding:10px 12px; transform:rotate(6deg); width:140px; box-shadow:0 6px 14px -6px rgba(0,0,0,.4); letter-spacing:0; margin:0}
.scene .phone{position:absolute; right:0; top:40px}

.phone{width:min(240px,62vw); aspect-ratio:9/17; border-radius:34px; padding:12px; background:var(--ph-frame); box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.screen{height:100%; border-radius:24px; background:var(--ph-bg); color:var(--ph-fg); display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 14px; text-align:center; font-family:"Figtree",sans-serif}
.screen .amt{font-size:30px; font-weight:800; font-variant-numeric:tabular-nums}
.screen .what{font-size:12px; opacity:.8}
.qr{width:78%; aspect-ratio:1; background:#fff; border-radius:10px; padding:8px; display:grid; grid-template-columns:repeat(21,1fr)}
.qr i{background:#111; display:block} .qr i.o{background:transparent}
.screen .paid{font-size:12px; font-weight:700; color:var(--good)}
.screen .hand{margin-top:auto; font-size:12px; font-weight:700; padding:7px 10px; border-radius:8px; background:var(--ph-hand); color:var(--ph-hand-fg); width:100%}

/* the problem, itemized */
.pains{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:30px}
.pain{border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:rgba(0,0,0,.08)}
.raffle .pain,.ledger .pain{background:transparent; border-width:2px}
.pain .q{font-family:var(--f-head); font-size:20px; line-height:1.15; color:var(--head); margin:0 0 10px}
.ledger .pain .q{font-weight:700}
.pain p{margin:0; color:var(--muted); line-height:1.5; font-size:16px}
.pain .cost{display:block; margin-top:12px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--bad)}

/* before / after */
.ba{display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius); overflow:hidden; margin-top:30px; border:1px solid var(--line)}
@media (max-width:760px){.ba{grid-template-columns:1fr}}
.ba > div{padding:28px}
.ba .before{background:rgba(0,0,0,.18)}
.raffle .ba .before{background:#f4eef1} .ledger .ba .before{background:#eef3ee}
.ba .after{background:var(--panel); color:var(--panel-fg)}
.ba h2{font-size:22px; margin-bottom:16px}
.ba .after h2{color:var(--panel-fg)}
.ba ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.ba li{display:grid; grid-template-columns:22px 1fr; gap:10px; line-height:1.45; font-size:16px}
.ba .before li::before{content:"✕"; color:var(--bad); font-weight:800}
.ba .after li::before{content:"✓"; color:var(--accent); font-weight:800}
.ledger .ba .after li::before{color:#9fe0b4}

/* how a sale works */
.how{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:44px; align-items:center}
@media (max-width:820px){.how{grid-template-columns:minmax(0,1fr)}}
.steps{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:18px; counter-reset:s}
.steps li{counter-increment:s; display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start}
.steps li::before{content:counter(s); font-family:var(--f-num); font-size:22px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--accent-fg)}
.steps b{display:block; font-size:18px; margin-bottom:2px}
.steps span{color:var(--muted); line-height:1.5}

/* built for the night */
.kinds{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:28px}
.kinds div{border-top:3px solid var(--accent); padding-top:14px}
.kinds b{display:block; font-size:18px; margin-bottom:6px; color:var(--head)}
.kinds p{margin:0; color:var(--muted); line-height:1.5}

/* treasurer + price */
.panel{background:var(--panel); color:var(--panel-fg); border-radius:calc(var(--radius) + 10px); padding:40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; align-items:center}
.panel h2{color:var(--panel-fg); font-size:clamp(28px,3.6vw,40px); line-height:1.05}
.panel p{margin:0 0 10px; line-height:1.6; font-size:17px}
.tot{font-family:var(--f-num); font-variant-numeric:tabular-nums; width:100%; border-collapse:collapse; font-size:15px}
.tot td{padding:8px 0; border-bottom:1px solid rgba(127,127,127,.35)}
.tot td:last-child{text-align:right}
.tot tr.net td{font-weight:800; border-bottom:0; font-size:18px}
.price{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:28px}
.price div{border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.raffle .price div,.ledger .price div{border-width:2px}
.price b{display:block; font-family:var(--f-head); font-weight:var(--head-w); font-size:22px; color:var(--head); margin-bottom:8px}
.price p{margin:0; color:var(--muted); line-height:1.5}
.price .amt{display:flex; align-items:baseline; gap:8px; font-family:var(--f-num); font-size:40px; line-height:1; color:var(--accent); margin:2px 0 14px; font-variant-numeric:tabular-nums}
.price .amt small{font-family:var(--f-body); font-size:14px; color:var(--muted)}
.price.notes{margin-top:20px}
.price.notes div{border-style:dashed}

/* questions */
.faq{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px 34px; margin-top:24px}
.faq details{border-bottom:1px solid var(--line); padding-block:14px}
.faq summary{cursor:pointer; font-weight:700; font-size:17px; color:var(--head)}
.faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.faq p{margin:10px 0 0; color:var(--muted); line-height:1.55}

.close{text-align:center; padding-block:70px}
.close h2{font-size:clamp(32px,5vw,56px); line-height:1.05; margin-bottom:16px}
.close .lede{margin:0 auto 26px}
.foot{border-top:1px solid var(--line); padding-block:22px 46px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.raffle .foot{border-top:2px dashed var(--line)} .ledger .foot{border-top:2px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---- product pages ---- */

/* Layout: the homepage's ledger skin, two pages behind a small picker. The picker follows the viewer's theme;
   the pages are one deliberate light look (green-bar paper, ink green, one red for problems). */
:root{
  --c-bg:#eef0ec; --c-fg:#1a1f1b; --c-muted:#5f6a62; --c-line:#d3d9d3; --c-chip:#ffffff; --c-on:#0f4d2e; --c-on-fg:#ffffff;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c-bg:#101411; --c-fg:#e6ece7; --c-muted:#9aa89e; --c-line:#2b342e; --c-chip:#18201b; --c-on:#7fd3a3; --c-on-fg:#0e1311; color-scheme:dark}}
:root[data-theme="dark"]{--c-bg:#101411; --c-fg:#e6ece7; --c-muted:#9aa89e; --c-line:#2b342e; --c-chip:#18201b; --c-on:#7fd3a3; --c-on-fg:#0e1311; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0; background:var(--c-bg); color:var(--c-fg); font-family:"Figtree",system-ui,sans-serif}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--c-bg)}
.pad{padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
.in{max-width:1120px; margin:0 auto}

/* ---------- ledger skin (same tokens as site-sell.html .ledger) ---------- */
.site{--bg:#fbfdf8; --panel:#18301f; --panel-fg:#fbfdf8; --fg:#18301f; --muted:#3f5747; --head:#18301f; --accent:#1f7a46; --accent-fg:#fff;
  --bad:#c0392b; --good:#1f7a46; --line:#18301f; --rule:#c7d9c9; --bar:#f1f8f1;
  --f-head:"IBM Plex Sans Condensed",sans-serif; --f-body:"IBM Plex Sans Condensed",sans-serif; --f-num:"IBM Plex Mono",monospace; --radius:4px;
  --ph-frame:#2b2b2b; --ph-bg:#fbfdf8; --ph-fg:#18301f; --ph-hand:#1f7a46; --ph-hand-fg:#fff;
  background:var(--bg); color:var(--fg); font-family:var(--f-body)}
.site h1,.site h2,.site h3{font-family:var(--f-head); font-weight:700; color:var(--head); text-wrap:balance; margin:0}
.nav{display:flex; justify-content:space-between; align-items:center; padding-block:22px; gap:12px; flex-wrap:wrap; border-bottom:2px solid var(--line)}
.logo{font:600 20px var(--f-num); color:var(--fg)}
.logo span{background:var(--fg); color:var(--bg); padding:0 6px; margin-left:2px}
.nav .links{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.nav a{color:var(--fg); text-decoration:none; font-weight:600; font-size:15px}
.nav a[aria-current="page"]{text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px}
.btn{display:inline-block; background:var(--accent); color:var(--accent-fg)!important; font-weight:700; padding:14px 20px; border-radius:var(--radius); text-decoration:none; font-size:16px}
.link{color:var(--fg); font-weight:700; text-decoration:underline; text-underline-offset:4px}
.kicker{font:600 12px var(--f-num); letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.lede{font-size:19px; line-height:1.55; color:var(--muted); max-width:58ch}
.sec{padding-block:56px; border-bottom:1px solid var(--rule)}
.sec:last-of-type{border-bottom:0}
.sec > .in > h2,.h3{font-size:clamp(28px,4vw,42px); line-height:1.05; margin:10px 0 14px}
.page-hero{padding-block:48px 44px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:end; border-bottom:2px solid var(--line)}
@media (max-width:860px){.page-hero{grid-template-columns:minmax(0,1fr)}}
.page-hero h1{font-size:clamp(38px,5.6vw,66px); line-height:1; letter-spacing:-.02em; margin:12px 0 18px}
.ctas{display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-top:22px}

/* label/value ledger rows */
.rows{display:grid; gap:0; border-top:2px solid var(--line)}
.rows > div{display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:20px; padding:18px 0; border-bottom:1px solid var(--rule)}
@media (max-width:680px){.rows > div{grid-template-columns:1fr; gap:6px}}
.rows b{font:600 13px var(--f-num); text-transform:uppercase; letter-spacing:.06em; color:var(--accent)}
.rows p{margin:0; font-size:17px; line-height:1.55}
.rows p + p{margin-top:8px}

/* money flow diagram */
.flow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:26px; border:2px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
@media (max-width:760px){.flow{grid-template-columns:1fr}}
.flow > div{padding:18px; position:relative; border-right:1px solid var(--rule)}
.flow > div:last-child{border-right:0}
@media (max-width:760px){.flow > div{border-right:0; border-bottom:1px solid var(--rule)} .flow > div:last-child{border-bottom:0}}
.flow small{display:block; font:600 11px var(--f-num); letter-spacing:.08em; text-transform:uppercase; color:#4f6b57; margin-bottom:6px}
.flow b{display:block; font-size:18px; margin-bottom:4px}
.flow p{margin:0; font-size:15px; color:var(--muted); line-height:1.45}
.flow .us{background:var(--bar)}
.flow .not{border:2px dashed var(--bad); border-radius:var(--radius); padding:6px 8px; margin-top:10px; font:500 12px var(--f-num); color:var(--bad); display:inline-block}

/* tables */
.sheet{background:#fff; border:1px solid var(--rule); box-shadow:0 1px 0 var(--rule), 0 18px 40px -24px rgba(24,48,31,.4); position:relative}
.sheet header{display:flex; justify-content:space-between; padding:12px 16px; font:500 12px var(--f-num); border-bottom:2px solid var(--line); flex-wrap:wrap; gap:6px}
.tw{overflow-x:auto}
table{width:100%; border-collapse:collapse; font:400 14px var(--f-num)}
th{font:600 11px var(--f-num); text-transform:uppercase; letter-spacing:.08em; text-align:left; padding:8px 12px; color:#4f6b57; border-bottom:1px solid var(--rule); white-space:nowrap}
td{padding:9px 12px; border-bottom:1px solid #e3eee4; white-space:nowrap}
tbody tr:nth-child(even) td{background:var(--bar)}
td.n,th.n{text-align:right; font-variant-numeric:tabular-nums}
tfoot td{font-weight:600; border-top:2px solid var(--line); background:#fff}
.flag{font:600 11px var(--f-num); color:var(--bad); border:1px solid var(--bad); padding:1px 5px; border-radius:3px}
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; margin-top:24px}
@media (max-width:860px){.two{grid-template-columns:minmax(0,1fr)}}
.note{font-size:13px; color:#4f6b57; margin:10px 0 0}

/* who sees what */
.who{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; border-top:2px solid var(--line); margin-top:24px}
.who div{padding:18px 18px 18px 0; border-bottom:1px solid var(--rule)}
.who h3{font-size:19px; margin-bottom:8px}
.who ul{margin:0; padding-left:18px; line-height:1.6; color:var(--muted)}

/* questions */
.faq{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:4px 34px; margin-top:20px}
.faq details{border-bottom:1px solid var(--rule); padding-block:14px}
.faq summary{cursor:pointer; font-weight:700; font-size:17px}
.faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.faq p{margin:10px 0 0; color:var(--muted); line-height:1.55}

/* checklist */
.check{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:0; border-top:2px solid var(--line)}
.check li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; padding:14px 0; border-bottom:1px solid var(--rule); font-size:17px; line-height:1.5}
.check li::before{content:""; width:18px; height:18px; border:2px solid var(--line); border-radius:3px; margin-top:3px}
.check b{display:block}
.check span{color:var(--muted)}

/* how it works: the night as a timeline */
.night{list-style:none; margin:0; padding:0; counter-reset:n}
.night > li{counter-increment:n; display:grid; grid-template-columns:120px minmax(0,1fr); gap:28px; padding-block:46px; border-bottom:1px solid var(--rule)}
.night > li:last-child{border-bottom:0}
@media (max-width:760px){.night > li{grid-template-columns:1fr; gap:10px}}
.night .when{font:600 13px var(--f-num); text-transform:uppercase; letter-spacing:.08em; color:var(--accent)}
.night .when::before{content:counter(n, decimal-leading-zero); display:block; font:600 44px var(--f-num); color:var(--fg); letter-spacing:-.04em; line-height:1}
.night h2{font-size:clamp(26px,3.4vw,36px); line-height:1.08; margin-bottom:12px}
.night p{font-size:17px; line-height:1.6; color:var(--muted); margin:0 0 10px; max-width:62ch}
.night ul{margin:10px 0 0; padding-left:20px; line-height:1.7; font-size:17px}
.tpl{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.tpl span{font:500 13px var(--f-num); border:1px solid var(--line); padding:4px 8px; border-radius:3px; background:#fff}

/* phones */
.phones{display:flex; gap:22px; flex-wrap:wrap; margin-top:22px; align-items:flex-start}
.ph{display:flex; flex-direction:column; gap:8px; align-items:center; flex:0 1 210px}
.ph figcaption{font:500 12px var(--f-num); color:#4f6b57; text-align:center}
.phone{width:min(210px,70vw); aspect-ratio:9/17; border-radius:30px; padding:10px; background:var(--ph-frame); box-shadow:0 24px 50px -22px rgba(0,0,0,.5)}
.screen{height:100%; border-radius:22px; background:var(--ph-bg); color:var(--ph-fg); display:flex; flex-direction:column; gap:8px; padding:14px 12px; font-family:"Figtree",sans-serif; font-size:12px; overflow:hidden}
.screen.c{align-items:center; text-align:center}
.screen .t{font-weight:800; font-size:13px}
.screen .amt{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums}
.screen .what{font-size:11px; opacity:.8}
.tile{border:1px solid #c7d9c9; border-radius:8px; padding:8px; display:flex; justify-content:space-between; font-weight:600}
.tile.sel{border:2px solid var(--accent); background:#eaf5ec}
.ph .screen:not(.c){align-items:stretch; text-align:left}
.opts{display:flex; gap:4px; flex-wrap:wrap}
.opts span{border:1px solid #c7d9c9; border-radius:6px; padding:4px 6px; font-size:10px}
.opts span.sel{background:var(--accent); color:#fff; border-color:var(--accent)}
.qr{width:80%; aspect-ratio:1; background:#fff; border-radius:8px; padding:6px; display:grid; grid-template-columns:repeat(21,1fr); border:1px solid #e3eee4}
.qr i{background:#111; display:block} .qr i.o{background:transparent}
.wait{font-size:11px; opacity:.75}
.big{font-size:44px; line-height:1; color:var(--good); font-weight:800}
.hand{margin-top:auto; font-size:12px; font-weight:700; padding:8px; border-radius:8px; background:var(--ph-hand); color:var(--ph-hand-fg); width:100%; text-align:center}
.cta{margin-top:auto; background:var(--accent); color:#fff; font-weight:700; text-align:center; padding:9px; border-radius:8px}

.needs{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0; border-top:2px solid var(--line); margin-top:20px}
.needs div{padding:20px 20px 20px 0; border-bottom:1px solid var(--rule)}
.needs h3{font-size:20px; margin-bottom:8px}
.needs ul{margin:0; padding-left:18px; line-height:1.7; font-size:17px}

.panel{background:var(--panel); color:var(--panel-fg); border-radius:calc(var(--radius) + 6px); padding:36px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center}
@media (max-width:760px){.panel{grid-template-columns:1fr}}
.panel h2{color:var(--panel-fg); font-size:clamp(26px,3.4vw,38px); line-height:1.05}
.panel p{margin:10px 0 0; line-height:1.6; font-size:17px; opacity:.9}
.foot{border-top:2px solid var(--line); padding-block:22px 46px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font:400 13px var(--f-num); color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* Site-wide: one deliberate light look. */
body{background:#fbfdf8; color:#18301f}
body::before{background:#fbfdf8}
.foot a{color:inherit}
.logo{text-decoration:none}

/* Footer byline (owner, 2026-10-27): bold black eventCNX, sthreelabs in the studio's orange wordmark. */
.foot .byline{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px}
.foot .ev{font-family:"Archivo",system-ui,sans-serif; font-weight:900; font-size:18px; letter-spacing:-.03em; color:#111}
.foot .s3{font-family:"Archivo",system-ui,sans-serif; font-weight:900; font-size:18px; letter-spacing:-.045em; color:#C56F2E}
.foot .note{font-size:13px}

/* Terms and privacy (2026-10-28) */
.legal{max-width:72ch; padding-block:40px 64px; display:flex; flex-direction:column; gap:14px}
.legal h1{font-size:clamp(28px,4vw,40px); margin-top:8px}
.legal .eff{margin:0; font-family:var(--f-num); font-size:13px; color:var(--muted)}
.legal h2{font-size:20px; margin-top:18px}
.legal p,.legal li{line-height:1.6; margin:0}
.legal ul{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px}
.legal a{color:var(--accent)}
/* Contact form (app.eventcnx.io/contact, templates/site/layout.html) */
.site-form form{display:flex; flex-direction:column; gap:16px; margin-top:8px}
.site-form label{display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:15px; color:var(--fg)}
.site-form input:not([type=checkbox]),.site-form select,.site-form textarea{font:inherit; font-weight:400; color:var(--fg); background:#fff; border:2px solid var(--line); border-radius:var(--radius); padding:11px 12px; width:100%}
.site-form textarea{resize:vertical}
.site-form input:focus-visible,.site-form select:focus-visible,.site-form textarea:focus-visible{outline:3px solid var(--accent); outline-offset:1px}
.site-form button.btn{border:0; cursor:pointer; font:inherit; font-weight:700}
.site-form .err{color:var(--bad); font-weight:600}
/* Sign-up form (app.eventcnx.io/signup) on the site look */
.site-form{color-scheme:light}
.site-form .hint{margin:0; font-size:14px; color:var(--muted)}
.site-form .ok{margin:0; font-size:14px; color:var(--good); font-weight:600}
.site-form p.err{margin:0; font-size:14px}
.site-form label.agree{flex-direction:row; align-items:flex-start; gap:10px; font-weight:400}
.site-form label.agree input{width:18px; height:18px; margin:3px 0 0; flex:none; accent-color:var(--accent)}
.site-form .slug{display:flex; align-items:center; background:#fff; border:2px solid var(--line); border-radius:var(--radius)}
.site-form .slug input{border:0; border-radius:var(--radius) 0 0 var(--radius); flex:1; min-width:0}
.site-form .slug span{font:400 15px var(--f-num); color:var(--muted); padding:0 12px; white-space:nowrap}
.site-form .slug:focus-within{outline:3px solid var(--accent); outline-offset:1px}
.site-form .slug input:focus-visible{outline:0}

/* STH-908: links inside cards take the site colors */
.kinds b a{color:inherit; text-decoration-color:var(--accent); text-underline-offset:3px}
.price p a{color:var(--accent)}
.how .sheet td:last-child{white-space:normal}
/* The striped-table rule hid the treasurer box's even rows (light text on a light bar). */
.tot tbody tr:nth-child(even) td{background:none}

/* Help pages (STH-915) */
.help-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:20px}
.help-grid a{display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--rule); border-top:3px solid var(--accent); background:#fff; text-decoration:none; color:inherit; min-width:0}
.help-grid a:hover b{text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px}
.help-grid a b{font-size:18px; color:var(--head)} .help-grid a span{color:var(--muted); line-height:1.45}
.help-grid small{font:600 12px var(--f-num); text-transform:uppercase; letter-spacing:.08em; color:var(--accent)}
.article{max-width:740px; padding-block:28px 56px}
.article h1{font-size:clamp(34px,5vw,52px); line-height:1.02; margin:10px 0 14px; text-wrap:balance}
.article h2{font-size:clamp(22px,3vw,28px); margin:36px 0 10px; scroll-margin-top:16px}
.article p,.article li{line-height:1.6; font-size:17px}
.article ol,.article ul{padding-left:22px; display:flex; flex-direction:column; gap:8px}
.article a{color:var(--accent)}
.crumbs{font:500 13px var(--f-num); color:var(--muted); margin:0} .crumbs a{color:var(--accent)}
.shot{margin:18px 0; display:flex; flex-direction:column; gap:8px}
.shot img{display:block; width:100%; height:auto; max-width:100%; border:1px solid var(--rule); border-radius:12px; background:#fff}
.shot.tall img{max-width:300px}
.shot figcaption{font-size:14px; color:var(--muted)}
.tip{border-left:3px solid var(--accent); background:#fff; padding:10px 14px; margin:16px 0}
.next{margin-top:32px; padding-top:16px; border-top:1px solid var(--rule); font-weight:600}