:root { --paper:#faf9f6; --ink:#262622; --muted:#61615b; --accent:#9f4625; --line:#d8d6ce; --tint:#f0eee7; font-family:"Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; }
a { color:inherit; text-underline-offset:4px; }
button { font:inherit; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
img { display:block; max-width:100%; height:auto; }
figure,p,h1,h2,h3 { margin:0; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; text-wrap:balance; }
h1 { font-size:70px; line-height:1.05; letter-spacing:-.035em; }
h2 { font-size:44px; line-height:1.12; letter-spacing:-.025em; }
h3 { font-size:25px; font-weight:600; line-height:1.2; letter-spacing:-.02em; }
p { font-size:16px; line-height:1.55; }
figcaption { margin-top:12px; color:var(--muted); font-size:13px; line-height:1.5; }
figcaption a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font-size:15px; }
.wrap { width:min(1240px,calc(100% - 96px)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:20; top:-100px; left:12px; padding:12px 18px; background:var(--ink); color:var(--paper); }
.skip-link:focus { top:12px; }
.eyebrow { color:var(--accent); font-size:14px; font-weight:600; line-height:1.55; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:50px; padding:12px 18px; border:1px solid var(--accent); background:var(--accent); color:#fff; font-size:16px; font-weight:600; text-decoration:none; border-radius:5px; transition:background .16s; }
.button:hover { background:#84381e; }
.button span[aria-hidden] { font-size:21px; line-height:1; }
.text-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:16px; font-weight:600; }
.text-link:hover { text-decoration-thickness:2px; }
.header-inner { min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:24px; font-weight:650; line-height:1; letter-spacing:-.04em; text-decoration:none; flex-shrink:0; }
.brand-mark { width:56px; height:56px; object-fit:contain; }
.brand-sub { display:block; margin-top:4px; font-size:14px; font-weight:450; letter-spacing:.025em; }
.site-nav,.section-links,.nav-actions { display:flex; align-items:center; gap:26px; }
.site-nav { gap:32px; }
.site-nav a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.site-nav a:hover { text-decoration:underline; }
.nav-actions { gap:22px; }
.account-link { color:var(--accent); }
.menu-toggle { display:none; }
.hero { padding-block:64px 72px; display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.hero-copy { min-width:0; }
.hero h1 { max-width:510px; margin-top:18px; }
.hero-description { margin-top:24px; max-width:510px; color:var(--muted); font-size:18px; line-height:1.55; }
.hero-actions { display:flex; align-items:center; gap:16px 24px; flex-wrap:wrap; margin-top:28px; }
.hero-footnote { color:var(--muted); font-size:13px; margin-top:18px; }
.hero-footnote a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font-size:15px; }
.hero-fan { min-width:0; }
.hero-fan-stage { position:relative; width:100%; aspect-ratio:1.16; }
.hero-fan-card { position:absolute; border:1px solid var(--line); border-radius:5px; background:var(--paper); padding:5px; box-shadow:0 8px 20px #26262212,0 2px 4px #2626220a; }
.hero-fan-card img { width:100%; height:auto; border:1px solid var(--line); border-radius:2px; }
.hero-view-label { display:table; color:var(--ink); font-size:12px; font-weight:600; line-height:1.4; padding:4px 6px 8px; }
.hero-kiosk { width:60%; left:2%; top:1%; transform:rotate(-4deg); z-index:1; }
.hero-dashboard { width:36%; right:2%; top:1%; transform:rotate(3deg); z-index:2; }
.hero-desk { width:90%; left:5%; bottom:1%; transform:rotate(-1deg); z-index:3; }
.hero-fan figcaption { margin:14px 2% 0; }
.hero-fan figcaption a { margin-right:8px; }
.section-heading { margin-bottom:36px; }
.section-heading h2 { max-width:850px; }
.classroom-section { padding-bottom:72px; }
.classroom-roles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.classroom-role { min-width:0; }
.role-tab { color:var(--muted); font-size:14px; line-height:1.5; }
.classroom-role h3 { margin-top:10px; }
.classroom-role > p:not(.role-tab) { color:var(--muted); margin-top:14px; min-height:100px; }
.classroom-role figure { margin-top:24px; }
.screen { width:100%; height:auto; border:1px solid var(--line); border-radius:5px; background:white; }
.role-image-well { display:flex; align-items:center; justify-content:center; width:100%; height:360px; padding:8px; border:1px solid var(--line); border-radius:5px; background:var(--tint); }
.role-image-well picture { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.role-image-well img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.classroom-role figcaption a,.connection-result figcaption a { display:flex; width:fit-content; }
.desk-demo-entry { margin-top:8px; color:var(--accent); }
.board-detail-caption { display:none; }
.role-boundary { margin-top:32px; color:var(--muted); font-size:16px; max-width:900px; }
.workflow { background:var(--tint); padding-block:72px; }
.connection-proof { display:grid; grid-template-columns:1fr .72fr; gap:80px; align-items:center; }
.connection-copy > p { color:var(--muted); margin-top:22px; max-width:530px; }
.connection-copy > .text-link { margin-top:20px; color:var(--accent); }
.connection-result { width:100%; max-width:400px; justify-self:center; }
.connection-totals { margin:30px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.connection-totals div { border-top:2px solid var(--accent); padding-top:14px; }
.connection-totals dt { font-size:14px; font-weight:600; line-height:1.5; }
.connection-totals dd { margin:10px 0 0; font-size:28px; font-weight:600; letter-spacing:-.025em; white-space:nowrap; }
.connection-totals dd span { color:var(--accent); padding-inline:3px; }
.features-section { padding-block:72px 40px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 40px; }
.feature-card p { color:var(--muted); margin-top:12px; }
.feature-card .text-link { display:flex; width:fit-content; margin-top:12px; color:var(--accent); }
.feature-card .text-link + .text-link { display:flex; width:fit-content; margin-top:0; }
.preview-note { padding-bottom:40px; color:var(--muted); font-size:13px; line-height:1.55; }
.final-section { padding-block:64px; background:var(--ink); color:var(--paper); }
.final-section :focus-visible { outline-color:var(--paper); }
.final-section .wrap { display:grid; grid-template-columns:1fr auto; align-items:center; gap:64px; }
.final-section h2 { max-width:620px; }
.final-section p:not(.account-availability) { margin-top:20px; max-width:620px; font-size:16px; color:var(--paper); }
.final-actions { display:flex; align-items:start; flex-direction:column; gap:12px; }
.account-availability { color:var(--paper); font-size:13px; }
.account-availability a { display:flex; align-items:center; min-height:44px; font-size:15px; }
.site-footer { display:flex; align-items:center; flex-wrap:wrap; gap:24px; padding-block:36px; }
.site-footer .brand { font-size:21px; }
.site-footer .brand-mark { width:48px; height:48px; }
.site-footer > p { color:var(--muted); font-size:16px; flex:1; }
.site-footer > a:last-of-type { font-size:15px; min-height:44px; display:inline-flex; align-items:center; }
.site-footer > small { width:100%; padding-top:8px; font-size:12px; color:var(--muted); }
.account-dialog { width:min(480px,calc(100% - 32px)); max-height:calc(100dvh - 40px); overflow:auto; border:1px solid var(--line); border-radius:5px; background:var(--paper); color:var(--ink); padding:40px; }
.account-dialog::backdrop { background:#262622b8; }
.dialog-close { position:absolute; top:12px; right:12px; width:44px; height:44px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:28px; }
.dialog-mark { margin-bottom:22px; }
.account-dialog h2 { font-size:38px; margin-top:12px; }
.account-dialog > p:not(.eyebrow) { color:var(--muted); font-size:16px; margin-top:20px; }
.account-dialog .button { margin-top:24px; }
.account-dialog > .text-link { margin-top:16px; color:var(--accent); }
.dialog-done { display:block; min-height:44px; padding:0; margin-top:12px; background:transparent; border:0; color:var(--ink); font-size:16px; text-decoration:underline; text-underline-offset:4px; }
.dialog-open { overflow:hidden; }
.feature-preview-dialog { width:min(1480px,calc(100% - 24px)); height:min(980px,calc(100dvh - 24px)); max-width:none; max-height:none; margin:auto; padding:clamp(16px,2.6vw,36px); border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); }
.feature-preview-dialog[open] { display:flex; flex-direction:column; gap:16px; }
.feature-preview-dialog::backdrop { background:#262622d9; }
.feature-preview-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.feature-preview-header h2 { margin:4px 0 6px; font-size:clamp(24px,3vw,36px); }
.feature-preview-header p:last-child { margin:0; color:var(--muted); }
.feature-preview-close { flex:none; width:44px; height:44px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--ink); font-size:28px; }
.feature-preview-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.feature-preview-toolbar button { min-width:44px; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); font:inherit; }
.feature-preview-toolbar .button { margin-left:auto; }
.feature-preview-stage { position:relative; flex:1; min-height:0; overflow:auto; border:1px solid var(--line); border-radius:4px; background:#eeece7; overscroll-behavior:contain; scrollbar-gutter:stable; }
.feature-preview-image { display:block; max-width:none; max-height:none; margin:0 auto; }
.feature-preview-image[hidden] { display:none; }
.feature-preview-loading,.feature-preview-error { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; margin:0; color:var(--muted); text-align:center; }
.feature-preview-loading[hidden],.feature-preview-error[hidden] { display:none; }
.feature-preview-error button { min-height:44px; padding:8px 16px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); font:inherit; }
.feature-preview-error a { color:var(--accent); }
@media (max-width:1230px) and (min-width:1060px) { .site-nav,.section-links { gap:18px; } .nav-actions { gap:16px; } .brand { font-size:22px; } }
@media (max-width:1059px) {
  .wrap { width:calc(100% - 64px); }
  .header-inner { min-height:90px; flex-wrap:wrap; gap:0; }
  .js .menu-toggle { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:5px; font-size:14px; }
  .menu-bars,.menu-bars::before,.menu-bars::after { display:block; width:16px; height:1px; background:currentColor; }
  .menu-bars { position:relative; }
  .menu-bars::before,.menu-bars::after { content:''; position:absolute; left:0; }
  .menu-bars::before { top:-5px; } .menu-bars::after { top:5px; }
  .site-nav { flex-basis:100%; justify-content:space-between; padding-block:16px 20px; gap:20px; }
  .js .site-nav { display:none; } .js .site-nav.is-open { display:flex; }
  .section-links { gap:18px; } .nav-actions { gap:18px; }
  .hero { padding-block:48px 64px; gap:32px; grid-template-columns:1fr 1.1fr; }
  .hero h1 { font-size:58px; }
  .hero-fan-stage { aspect-ratio:1.12; }
  .classroom-roles { gap:22px; }
  .classroom-role > p:not(.role-tab) { min-height:125px; }
  .role-image-well { height:300px; }
  .connection-proof { gap:44px; }
  .connection-totals { gap:12px; }
  .connection-totals dd { font-size:26px; }
  .feature-grid { gap:32px; }
  .final-section .wrap { gap:40px; }
}
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; gap:32px; }
  .hero h1,.hero-description { max-width:650px; }
  .hero-fan { width:100%; max-width:620px; justify-self:center; }
  .classroom-roles { grid-template-columns:1fr; gap:40px; }
  .classroom-role { max-width:620px; width:100%; margin-inline:auto; }
  .classroom-role > p:not(.role-tab) { min-height:0; }
  .role-image-well { height:auto; padding:6px; }
  .role-image-well picture { height:auto; }
  .role-image-well img { width:100%; max-height:none; }
  .connection-proof { grid-template-columns:1fr; gap:36px; }
  .connection-result { max-width:500px; justify-self:start; }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .final-section .wrap { display:block; }
  .final-actions { margin-top:28px; }
}
@media (max-width:760px) {
  .wrap { width:calc(100% - 40px); }
  .header-inner { min-height:80px; }
  .brand { font-size:23px; gap:10px; } .brand-mark { width:48px; height:48px; }
  .site-nav,.js .site-nav.is-open { flex-direction:column; align-items:stretch; gap:12px; }
  .section-links { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
  .site-nav a { white-space:normal; line-height:1.5; }
  .nav-actions { justify-content:space-between; gap:16px; }
  h2 { font-size:33px; }
  .hero { padding-block:32px 40px; gap:24px; }
  .hero h1 { font-size:42px; margin-top:16px; }
  .hero-description { margin-top:20px; font-size:17px; line-height:1.55; }
  .hero-actions { gap:12px 20px; margin-top:24px; }
  .hero-footnote { margin-top:16px; }
  .hero-fan { max-width:500px; }
  .hero-fan-stage { aspect-ratio:1.015; }
  .hero-kiosk { width:60%; left:2%; top:1%; transform:rotate(-3deg); }
  .hero-dashboard { width:38%; right:2%; top:1%; transform:rotate(2deg); }
  .hero-desk { width:94%; left:3%; bottom:1%; transform:rotate(-1deg); }
  .hero-view-label { font-size:11px; padding:4px 3px 7px; }
  .hero-fan figcaption { margin-top:12px; }
  .section-heading { margin-bottom:28px; }
  .classroom-section { padding-bottom:40px; }
  .classroom-role h3 { margin-top:10px; }
  .classroom-role > p:not(.role-tab) { margin-top:12px; }
  .classroom-role figure { margin-top:20px; }
  .board-full-caption { display:none; } .board-detail-caption { display:inline; }
  .role-boundary { margin-top:32px; }
  .workflow { padding-block:40px; }
  .connection-copy > p { margin-top:20px; }
  .connection-totals { margin-top:26px; gap:12px; }
  .connection-totals dt { font-size:13px; }
  .connection-totals dd { font-size:24px; }
  .connection-result { max-width:440px; }
  .features-section { padding-block:40px 32px; }
  .feature-grid { grid-template-columns:1fr; gap:28px; }
  .feature-card p { margin-top:10px; }
  .feature-card .text-link { margin-top:8px; }
  .preview-note { padding-bottom:36px; }
  .final-section { padding-block:40px; }
  .final-section p:not(.account-availability) { margin-top:18px; }
  .final-actions { margin-top:24px; }
  .site-footer { gap:16px; padding-block:28px; }
  .site-footer > p { flex-basis:100%; }
  .account-dialog { padding:32px 24px; } .account-dialog h2 { font-size:34px; }
  .feature-preview-dialog { width:calc(100% - 16px); height:calc(100dvh - 16px); padding:12px; }
  .feature-preview-dialog[open] { gap:12px; }
  .feature-preview-toolbar { gap:6px; }
  .feature-preview-toolbar .button { margin-left:0; }
  .feature-preview-stage { min-height:180px; }
}
@media (max-width:350px) {
  .wrap { width:calc(100% - 40px); }
  .brand { font-size:21px; } .brand-sub { font-size:13px; }
  .hero h1 { font-size:37px; }
  .hero-actions { align-items:start; gap:10px; }
  .hero-fan-stage { aspect-ratio:.95; }
  .nav-actions { flex-direction:column; align-items:start; gap:0; }
  .connection-totals { gap:8px; }
  .connection-totals dd { font-size:21px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }