/* ============================================================
   Eventbone marketing site: the one shared stylesheet.

   Every product page (index, officials, ticketing, clubs) and every demo
   (buy/, f/, c/) links this file first, then keeps only its own rules in
   an inline <style>. Before this file existed each page carried its own
   copy of the tokens, nav, buttons and footer, and the copies drifted:
   the logo moved 20px between pages and the nav changed height.

   If a rule is here, do not redefine it on a page. If a page needs it to
   look different, that is a design decision to make here, for all pages.

   Contrast (WCAG AA, measured, not estimated):
     --ink-3 #665e4f        5.30:1 on paper, 4.76:1 on paper-deep, 5.99:1 on card
     white on --teal-ink    5.87:1 (every primary button)
     --live-ink  #1f6644    5.58:1 on its pill (card), 5.00:1 on paper
     --amber-ink #7d4e09    5.75:1 on its pill (card), 5.11:1 on paper
     --flag-ink  #963823    5.77:1 on its pill (card), 5.16:1 on paper
     --teal-deep #095f6a    4.92:1 or better on a teal-soft tag, any background
     focus ring --teal-ink  4.36:1 or better against every page background (3:1 needed)
   The brighter --live / --amber / --flag stay for dots, fills and icons;
   text on a tinted pill uses the -ink variant.
   ============================================================ */

@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --paper:#f0e9dc; --paper-deep:#e7ddca; --card:#fbf7ee;
  --ink:#211f1a; --ink-2:#544d40; --ink-3:#665e4f;
  --line:rgba(33,31,26,.12); --line-soft:rgba(33,31,26,.07); --line-strong:rgba(33,31,26,.20);
  --teal:#0c8f9f; --teal-ink:#0a6f7c; --teal-deep:#095f6a; --teal-bright:#12a8b9;
  --teal-soft:rgba(12,143,159,.10); --teal-line:rgba(12,143,159,.28);
  --live:#2e9564; --live-ink:#1f6644; --live-soft:rgba(46,149,100,.13);
  --amber:#c07a17; --amber-ink:#7d4e09; --amber-soft:rgba(192,122,23,.14); --amber-line:rgba(192,122,23,.42);
  --flag:#b6472f; --flag-ink:#963823; --flag-soft:rgba(182,71,47,.12); --flag-line:rgba(182,71,47,.4);
  --shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 40px -24px rgba(58,44,20,.55);
  --shadow-pop:0 40px 80px -34px rgba(58,44,20,.6), 0 10px 30px -18px rgba(58,44,20,.4);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Segoe UI Mono",monospace;
  --wrap:1160px;
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* The ambient teal/amber glow behind the product pages. Demos opt out. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 84% -10%, rgba(12,143,159,.11), transparent 55%),radial-gradient(90% 80% at -10% 110%, rgba(192,122,23,.06), transparent 50%)}
a{color:inherit;text-decoration:none}
::selection{background:rgba(12,143,159,.24)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px;position:relative;z-index:1}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--font-display);font-optical-sizing:auto;letter-spacing:-.01em;line-height:1.04;text-wrap:balance;font-weight:600}

/* Keyboard focus: one visible ring everywhere, links, buttons and inputs. */
:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
a:not(.btn):focus-visible{border-radius:4px}

/* Scroll reveal. The hidden start state applies only once the page's head
   script has added .js to <html>, so with no JavaScript nothing stays
   invisible. Reduced motion shows everything at once (below). */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal{opacity:1;transform:none}
}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink);font-weight:600;display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--teal);border-radius:2px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:rgba(240,233,220,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;min-width:0;white-space:nowrap}
.brand svg{width:26px;height:26px;display:block;flex:none}
.brand .tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);background:var(--teal-soft);border:1px solid var(--teal-line);border-radius:6px;padding:2px 7px;white-space:nowrap}
.nav-spring{flex:1}
.nav-links{display:flex;gap:24px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav .btn{flex:none}
/* The product switcher. Hidden while the desktop nav carries the links; on a
   phone it is the second row of the bar. Todd, 2026-09-24, on his phone: "How
   do I get to ticketing or officials from phone on website" -- the links were
   display:none below 900px with nothing in their place. */
.nav-products{display:none}
/* A flat button in the nav: the glow bled below the bar. */
.nav .btn-primary{box-shadow:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:700;white-space:nowrap;border-radius:11px;cursor:pointer;border:1px solid transparent;transition:transform .06s, filter .15s, background .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal-ink);color:#fff;box-shadow:0 12px 24px -12px rgba(12,143,159,.7)}
.btn-primary:hover{background:var(--teal-deep)}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:#fff}
.btn-sm{padding:8px 15px;font-size:14px}
.btn-lg{padding:13px 22px;font-size:15.5px}

/* ---------- hero pieces every product page shares ---------- */
.hl{color:var(--teal-ink);position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:-1%;right:-1%;bottom:-.14em;height:.22em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13c48-9 118 7 172 1s96-9 120-3' fill='none' stroke='%230c8f9f' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;opacity:.92;pointer-events:none}
.lead{font-size:18px;color:var(--ink-2);margin-top:20px;max-width:50ch}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hero-note{margin-top:16px;font-size:13px;color:var(--ink-3);font-family:var(--mono)}

/* Stat strip. A grid whose 1px gaps show the line color, so every divider
   is complete however the cells wrap. */
.hero-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;margin-top:24px;background:var(--line-soft);border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:430px}
.hero-stats .s{padding:13px 14px;text-align:center;background:var(--card)}
.hero-stats .n{font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:-.02em;white-space:nowrap}
.hero-stats .n.big{color:var(--teal-ink)}
.hero-stats .l{font-size:10px;color:var(--ink-3);font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}

/* ---------- sections ---------- */
.sec{padding:70px 0;position:relative}
.sec-alt{background:var(--paper-deep)}
.sec-head{max-width:60ch;margin-bottom:38px}
.sec-head.center{margin:0 auto 40px;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);margin:14px 0 0}
.sec-head p{font-size:16.5px;color:var(--ink-2);margin-top:14px;max-width:58ch}
.sec-head.center p{margin-left:auto;margin-right:auto}

.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.flip .split-copy{order:2}
.split-copy h3{font-size:clamp(23px,2.7vw,30px)}
.split-copy>.eyebrow{margin-bottom:12px}
.split-copy .body{font-size:16px;color:var(--ink-2);margin:14px 0 18px;max-width:50ch}

/* ---------- mockup primitives (the parts every mockup draws the same) ---------- */
.mk{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-pop);overflow:hidden}
.mk-h{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line-soft);background:var(--paper)}
.mk-h .t{font-weight:700;font-size:13.5px}
.mk-h .d{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:auto}
.mk-b{padding:15px 16px}
.mk-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.mk-row:last-child{border-bottom:none}
.mk-row .k{color:var(--ink-2)}
.mk-row .v{margin-left:auto;font-family:var(--mono);font-weight:700}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;font-family:var(--mono);border-radius:999px;padding:3px 9px}
.pill.ok{color:var(--live-ink);background:var(--live-soft)}
.pill.warn{color:var(--amber-ink);background:var(--amber-soft)}
.pill.flag{color:var(--flag-ink);background:var(--flag-soft)}
.pill.teal{color:var(--teal-ink);background:var(--teal-soft)}

/* ---------- product screenshots ----------
   Every picture of the product is a real screen from the app, captured with
   one sample weekend of data (admin/scripts/capture-site-shots.mjs writes
   img/app/). Two frames, used the same way on every page:
     .shot-desk   a desktop screen in a plain window with a thin top bar
     .shot-phone  a phone screen in one simple phone body
   The screens keep the app's own look (white and slate, system sans, blue);
   the frames are neutral so they sit on the site's paper without clashing. */
.shot{margin:0;position:relative}
.shot img{display:block;width:100%;height:auto}
.shot-desk{background:#fff;border:1px solid rgba(15,23,42,.14);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -32px rgba(15,23,42,.45),0 8px 20px -12px rgba(15,23,42,.18)}
.shot-desk .bar{display:flex;align-items:center;gap:6px;height:24px;padding:0 11px;background:#f1f5f9;border-bottom:1px solid rgba(15,23,42,.08)}
.shot-desk .bar i{width:8px;height:8px;border-radius:50%;background:#cbd5e1}
.shot-phone{width:100%;max-width:280px;margin:0 auto;padding:7px;background:#0f172a;border-radius:38px;box-shadow:0 30px 60px -30px rgba(15,23,42,.55),0 8px 20px -12px rgba(15,23,42,.25)}
.shot-phone img{border-radius:31px}
/* Two phones side by side (a before and after, or two views of one job). */
.shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:560px;margin:0 auto;align-items:start}
.shot-pair .shot-phone{max-width:none}
.shot-pair .shot-phone:nth-child(2){margin-top:36px}
@media(max-width:560px){
  .shot-pair{gap:12px}
  .shot-pair .shot-phone{padding:5px;border-radius:26px}
  .shot-pair .shot-phone img{border-radius:22px}
  .shot-pair .shot-phone:nth-child(2){margin-top:24px}
}

/* ---------- scale band ---------- */
.scale{background:var(--ink);color:var(--paper);padding:56px 0}
.scale .eyebrow{color:#8fe3c0}
.scale .eyebrow::before{background:#8fe3c0}
.scale h2{color:var(--paper);font-size:clamp(26px,3.4vw,38px);margin:14px 0 26px}
.scale-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.scale-grid .n{font-family:var(--mono);font-weight:700;font-size:clamp(30px,4vw,46px);letter-spacing:-.03em;color:#fff}
.scale-grid .l{font-size:12.5px;color:#c9c2b2;margin-top:6px}
.scale p{margin-top:26px;color:#c9c2b2;font-size:15px;max-width:64ch}
.scale b{color:#fff}

/* ---------- closing CTA ---------- */
.cta{padding:78px 0}
.cta-box{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-pop);padding:52px 40px;text-align:center;max-width:720px;margin:0 auto}
.cta-box h2{font-size:clamp(26px,3.4vw,38px)}
.cta-box p{font-size:16px;color:var(--ink-2);margin:14px auto 24px;max-width:54ch}
/* The last line carries no bottom margin, so the box pads evenly. */
.cta-box .sub{margin:14px auto 0;font-size:13.5px;color:var(--ink-3);font-family:var(--mono)}

/* ---------- footer ---------- */
.footer{background:var(--paper-deep);border-top:1px solid var(--line);padding:46px 0 34px}
.foot-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
.foot-brand .bl{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px}
.foot-brand .bl svg{width:22px;height:22px}
.foot-brand .tl{color:var(--ink-3);font-size:13.5px;margin-top:10px}
.footer h5{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:12px;font-family:var(--mono)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-2)}
.footer a:hover{color:var(--ink)}
.foot-legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-3)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-in{flex-wrap:wrap;height:auto;padding-top:12px;row-gap:0}
  .nav-products{display:flex;width:100%;margin-top:10px;border-top:1px solid var(--line-soft)}
  .nav-products a{flex:1;text-align:center;padding:11px 0 12px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
  .nav-products a[aria-current="page"]{color:var(--teal-deep);box-shadow:inset 0 -2px 0 var(--teal)}
  html{scroll-padding-top:112px}
  .split{grid-template-columns:1fr}
  .split.flip .split-copy{order:0}
  .scale-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .scale-grid,.foot-in{grid-template-columns:1fr}
  /* Hero CTAs stack full width and equal. */
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  /* Stat strip on a phone: two columns, an odd last cell spans both, and the
     labels drop to one line of plain sans instead of wrapped mono caps. */
  .hero-stats{grid-auto-flow:row;grid-template-columns:1fr 1fr;max-width:none}
  .hero-stats .s:last-child:nth-child(odd){grid-column:1 / -1}
  .hero-stats .s{padding:12px 10px}
  .hero-stats .l{font-family:var(--font);font-size:12px;text-transform:none;letter-spacing:0;white-space:nowrap}
  .cta-box{padding:40px 24px}
}
/* The page tag beside the logo goes on narrow phones, so "Talk to us" keeps
   the same 26px gutter on the right as the logo has on the left. */
@media(max-width:420px){
  .brand .tag{display:none}
}
