/* livedot: the home of live events. Windline (cycling) and RunFast (running) are its two apps.
   The frame is livedot's: deep navy #0B1B2B and the live green #2FD39B (brand/README.md). Each app keeps its own mark
   and accent for its sport. The chrome follows light and dark; maps and course tiles are always light. */
:root{
  --navy:#0B1B2B;--navy-2:#132A40;--navy-line:rgba(255,255,255,.1);--on-navy:#FFFFFF;--on-navy-2:#AFBDCB;--on-navy-3:#7D90A3;
  --live:#2FD39B;--live-ink:#0A7A54;--live-wash:rgba(47,211,155,.15);
  --warn:#F5A524;--warn-ink:#8A5300;--warn-wash:rgba(245,165,36,.16);
  --ground:#F3F5F7;--paper:#FFFFFF;--ink:#0B1B2B;--body:#3B4A5A;--muted:#5F6E7E;--faint:#8E9AA7;
  --line:rgba(11,27,43,.09);--line-2:rgba(11,27,43,.17);--soft:#EDF1F4;--hover:#F6F8FA;
  --cyc:#635BFF;--cyc-ink:#4B44D6;--cyc-wash:rgba(99,91,255,.1);
  --run:#EE7A1F;--run-ink:#B54708;--run-wash:rgba(238,122,31,.12);
  --sh:0 1px 2px rgba(11,27,43,.05),0 16px 36px -22px rgba(11,27,43,.3);
  --sh-lg:0 2px 6px rgba(11,27,43,.08),0 34px 70px -30px rgba(11,27,43,.55);
  /* type: one system (LIVEDOT-DIRECTIVE.md, Type). The wordmark is the voice: Schibsted Grotesk, 800, tracked -0.035em.
     Every heading wears it, in four sizes; everything else is body or small. */
  --font:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-display:clamp(46px,7vw,92px);   /* the hero's one line */
  --t-h1:clamp(30px,3.6vw,44px);      /* a section: Live now, Your people, Try it now, Two apps, one home, an organiser's name */
  --t-h2:clamp(22px,2.2vw,28px);      /* a feature or an app: Race day, wherever you are; Windline; a person's km */
  --t-h3:clamp(17px,1.35vw,19px);     /* a card: an event, a person, a number; also the lead paragraph's size */
  --t-body:16px;                      /* reading, buttons, fields, names in lists */
  --t-small:13px;                     /* captions, labels, pills, badges, meta */
  --fw-head:800;--fw-ui:600;--fw-body:400;
  --track-head:-.035em;               /* the wordmark's tracking, on every heading; text is untracked */
  --lh-head:1.06;--lh-body:1.55;--lh-small:1.4;
  --gut:16px;--max:1080px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#07111B;--paper:#0E1C2B;--ink:#EEF3F8;--body:#B5C2CF;--muted:#8697A8;--faint:#607286;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);--soft:#14263A;--hover:#122437;
  --live-ink:#2FD39B;--live-wash:rgba(47,211,155,.13);--warn-ink:#FFC266;--warn-wash:rgba(255,181,71,.14);
  --cyc:#8B85FF;--cyc-ink:#ABA6FF;--cyc-wash:rgba(139,133,255,.15);--run:#FF9A4D;--run-ink:#FFB27A;--run-wash:rgba(255,154,77,.15);
  --sh:0 1px 0 rgba(255,255,255,.04) inset,0 16px 36px -22px rgba(0,0,0,.8);--sh-lg:0 1px 0 rgba(255,255,255,.05) inset,0 34px 70px -30px rgba(0,0,0,.85);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#07111B;--paper:#0E1C2B;--ink:#EEF3F8;--body:#B5C2CF;--muted:#8697A8;--faint:#607286;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);--soft:#14263A;--hover:#122437;
  --live-ink:#2FD39B;--live-wash:rgba(47,211,155,.13);--warn-ink:#FFC266;--warn-wash:rgba(255,181,71,.14);
  --cyc:#8B85FF;--cyc-ink:#ABA6FF;--cyc-wash:rgba(139,133,255,.15);--run:#FF9A4D;--run-ink:#FFB27A;--run-wash:rgba(255,154,77,.15);
  --sh:0 1px 0 rgba(255,255,255,.04) inset,0 16px 36px -22px rgba(0,0,0,.8);--sh-lg:0 1px 0 rgba(255,255,255,.05) inset,0 34px 70px -30px rgba(0,0,0,.85);
  color-scheme:dark}
@media (min-width:640px){:root{--gut:24px}}

*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--ground);color:var(--body);font:var(--fw-body) var(--t-body)/var(--lh-body) var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}button,input{font:inherit;color:inherit}
img,svg{display:block}
:focus-visible{outline:2.5px solid var(--live);outline-offset:2px;border-radius:6px}
.num{white-space:nowrap} /* inline numbers stay whole; tabular figures only where numbers line up (date tiles, chips) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
main{flex:1 0 auto}

/* ---------------------------------------------------------------- the frame: livedot's navy bar, wordmark first */
.top{background:var(--navy);color:var(--on-navy)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.wm{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-navy);flex:none}
.wm img{width:30px;height:30px}
.wm span{font-weight:800;font-size:24px;letter-spacing:-.035em;line-height:1;padding-bottom:2px}
.wm:focus-visible{outline-color:var(--live);outline-offset:4px}
.apps{display:flex;align-items:center;gap:4px}
.apps a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:10px;color:var(--on-navy-2);font-size:var(--t-body);font-weight:var(--fw-body);text-decoration:none;transition:background .15s,color .15s}
.apps a:hover{background:var(--navy-2);color:var(--on-navy)}
.apps a svg{width:20px;height:20px;border-radius:5px}
.apps a.find{color:var(--on-navy);box-shadow:inset 0 0 0 1px var(--navy-line)}
.apps a.find svg{border-radius:0;width:17px;height:17px}
@media (max-width:520px){.apps .lbl{display:none}.apps a{padding:0 8px}}

/* ---------------------------------------------------------------- sport badges: each app's own mark and accent */
.s-cycling{--s:var(--cyc);--s-ink:var(--cyc-ink);--s-wash:var(--cyc-wash)}
.s-running{--s:var(--run);--s-ink:var(--run-ink);--s-wash:var(--run-wash)}
.sb{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px 0 4px;border-radius:999px;background:var(--s-wash);color:var(--s-ink);font-size:var(--t-small);font-weight:var(--fw-ui);white-space:nowrap;flex:none}
.sb svg{width:18px;height:18px;border-radius:5px;flex:none}
.sb .app{font-weight:500;opacity:.85}
.sb.sm{height:22px;padding:0 8px 0 3px;font-size:var(--t-small);gap:6px}.sb.sm svg{width:16px;height:16px;border-radius:4px}

/* the live pill: livedot's dot, beating only while live */
.lp{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 8px;border-radius:999px;background:var(--live-wash);color:var(--live-ink);font-size:var(--t-small);font-weight:var(--fw-ui);white-space:nowrap;flex:none}
.lp i{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(47,211,155,.6);animation:beat 1.8s ease-out infinite}
.lp.warn{background:var(--warn-wash);color:var(--warn-ink)}.lp.warn i{background:var(--warn);animation:none}
.lp.quiet{background:var(--soft);color:var(--muted)}.lp.quiet i{background:var(--faint);animation:none}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(47,211,155,.6)}70%{box-shadow:0 0 0 7px rgba(47,211,155,0)}100%{box-shadow:0 0 0 0 rgba(47,211,155,0)}}
@media (prefers-reduced-motion:reduce){.lp i,.pulse{animation:none!important}}

/* avatars and logos */
.av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;background:var(--bg,#5F6E7E);color:#fff;font-size:var(--t-small);font-weight:var(--fw-ui);letter-spacing:.02em}
.av img{width:100%;height:100%;object-fit:cover}
.lg{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:#fff;box-shadow:inset 0 0 0 1px rgba(11,27,43,.08);overflow:hidden}
.lg img{width:84%;height:84%;object-fit:contain}
.lg.mono{background:var(--bg,#0B1B2B);color:#fff;font-weight:var(--fw-ui);font-size:var(--t-small)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-size:var(--t-body);font-weight:var(--fw-ui);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,box-shadow .15s,transform .1s}
.btn:hover{background:var(--navy-2)}.btn:active{transform:scale(.98)}
.btn svg{width:17px;height:17px;flex:none}
.btn.soft{background:var(--soft);color:var(--ink)}.btn.soft:hover{background:var(--line-2)}
:root[data-theme="dark"] .btn:not(.soft){background:#EEF3F8;color:var(--navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn:not(.soft){background:#EEF3F8;color:var(--navy)}:root:not([data-theme="light"]) .btn:not(.soft):hover{background:#fff}}
:root[data-theme="dark"] .btn:not(.soft):hover{background:#fff}

/* ---------------------------------------------------------------- sections */
.sec{padding:40px 0 8px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px;flex-wrap:wrap;column-gap:16px;row-gap:6px}
.sec-h h2{white-space:nowrap;margin:0;color:var(--ink);font-size:var(--t-h1);font-weight:var(--fw-head);letter-spacing:var(--track-head);line-height:var(--lh-head)}
.sec-h p{margin:0;color:var(--muted);font-size:var(--t-small)}
.quiet{color:var(--muted);font-size:var(--t-body);margin:0}
.quiet a{color:var(--ink);font-weight:600;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.quiet a:hover{text-decoration-color:currentColor}

/* course tiles: a light "map" with the course, and the people on it as live dots */
.tile{position:relative;display:block;background:#EEF2EF;overflow:hidden}
.tile svg{width:100%;height:100%}
.tile .pulse{transform-box:fill-box;transform-origin:center;animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}

/* ---------------------------------------------------------------- live events (the home's Live now, search) */
.lv{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lv li{display:grid;grid-template-columns:300px 1fr;gap:0;background:var(--paper);border-radius:18px;box-shadow:var(--sh);overflow:hidden}
.lv .tile{height:100%;min-height:168px}
.lv .tx{display:flex;flex-direction:column;gap:10px;padding:18px 20px;min-width:0}
.lv .tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lv h3{margin:0;color:var(--ink);font-size:var(--t-h3);font-weight:var(--fw-head);letter-spacing:var(--track-head);line-height:var(--lh-head)}
.lv h3 a{text-decoration:none}.lv h3 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.lv .what{margin:0;color:var(--body);font-size:var(--t-body)}
.lv .foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.org{display:inline-flex;align-items:center;gap:9px;min-width:0;color:var(--ink);font-size:var(--t-small);font-weight:var(--fw-ui);text-decoration:none}
.org .lg{width:28px;height:28px;border-radius:8px}
.org span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org:hover span{text-decoration:underline;text-underline-offset:3px}
.bar{height:5px;border-radius:999px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--s,var(--live))}
@media (max-width:760px){
  .lv li{grid-template-columns:1fr}
  .lv .tile{height:150px;min-height:0}
  .lv .tx{padding:16px}
  .lv .foot .btn{flex:1}
}

/* skeletons */
.sk{display:block;border-radius:8px;background:linear-gradient(90deg,var(--soft) 0,var(--hover) 50%,var(--soft) 100%);background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* ---------------------------------------------------------------- the sponsor line: who keeps livedot free (Windline's platform sponsor) */
.ldsp{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:var(--t-small);font-weight:var(--fw-body);line-height:1.4;color:inherit}
.ldsp[hidden]{display:none}.ldsp .s{display:none}
.ldsp a.who{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:inherit;text-decoration:none}
.ldsp a.who:hover{text-decoration:underline;text-underline-offset:3px}
.ldsp a.who img{width:20px;height:20px;border-radius:5px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px rgba(11,27,43,.08)}
.ldsp .q{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(127,140,153,.2);font-size:var(--t-small);font-weight:var(--fw-ui);line-height:1;cursor:help;outline:none}
.ldsp .q:focus-visible{box-shadow:0 0 0 2px currentColor}
.ldsp .q>span{display:none;position:absolute;left:50%;top:calc(100% + 10px);z-index:30;width:260px;margin-left:-130px;padding:12px 14px;border-radius:12px;background:#0B1B2B;color:#D9E2EA;font-size:var(--t-small);font-weight:var(--fw-body);line-height:1.5;text-align:left;box-shadow:0 14px 34px rgba(11,27,43,.35)}
.ldsp .q>span b{color:#fff}.ldsp .q>span a{color:#2FD39B;font-weight:600;text-decoration:none}.ldsp .q>span a:hover{text-decoration:underline}
.ldsp .q:hover>span,.ldsp .q:focus>span,.ldsp .q:focus-within>span{display:block}
.ldsp.tip-up .q>span{top:auto;bottom:calc(100% + 10px)} /* not ".up": the upcoming cards own that class */
@media (max-width:420px){.ldsp .l{display:none}.ldsp .s{display:inline}.ldsp .q>span{left:auto;right:-8px;margin-left:0}}

/* the header's anchors (home) */
.nav{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:8px}
.nav a{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:10px;color:var(--on-navy-2);font-size:var(--t-body);font-weight:var(--fw-body);text-decoration:none;transition:color .15s,background .15s}
.nav a:hover{color:#fff;background:var(--navy-2)}
@media (max-width:900px){.nav{display:none}}

/* ---------------------------------------------------------------- the footer: livedot's navy, the apps, organisers, help */
.foot-site{margin-top:0;padding:56px 0 calc(28px + env(safe-area-inset-bottom));background:var(--navy);color:var(--on-navy-2);font-size:var(--t-small);border-top:1px solid var(--navy-line)}
.foot-site .top-row{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:32px}
.foot-site .brand .wm span{font-size:26px}
.foot-site .brand p{margin:14px 0 0;max-width:34ch;line-height:1.55}
.foot-site .brand .ldsp{margin-top:16px;color:#fff}
.foot-site h2{margin:6px 0 12px;color:#fff;font-size:var(--t-small);font-weight:var(--fw-ui)}
.foot-site ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-site ul a{display:inline-flex;align-items:center;gap:8px;color:var(--on-navy-2);text-decoration:none}
.foot-site ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-site ul svg{width:18px;height:18px;border-radius:5px;flex:none}
.foot-site .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:44px;padding-top:20px;border-top:1px solid var(--navy-line);color:var(--on-navy-3);font-size:var(--t-small)}
@media (max-width:900px){.foot-site .top-row{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-site .brand{grid-column:1/-1}}
@media (max-width:420px){.foot-site .top-row{gap:28px 18px}}

/* ---------------------------------------------------------------- feature rows and product shots (the home's How it works, the organisers page)
   the shots are crops of the apps' real live pages at 3x, with their own UI pieces floating over them, at reading size */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,96px);align-items:center;padding:56px 0}
.feat+.feat{border-top:1px solid var(--line)}
.feat.rev .ft{order:2}
.ft h3{margin:0;color:var(--ink);font-size:var(--t-h2);font-weight:var(--fw-head);line-height:var(--lh-head);letter-spacing:var(--track-head)}
.ft p{margin:14px 0 0;max-width:30em;font-size:var(--t-h3);line-height:1.6}
.ft ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.ft li{position:relative;padding-left:26px;color:var(--ink);font-size:var(--t-body);font-weight:var(--fw-body)}
.ft li::before{content:'';position:absolute;left:3px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px var(--live-wash)}
.ft .from{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:var(--muted);font-size:var(--t-small)}
.ft .from svg{width:18px;height:18px;border-radius:5px;flex:none}
.desk{display:block;position:relative;margin:0;width:100%;border-radius:16px;overflow:hidden;background:#E9EDF1;box-shadow:0 0 0 1px rgba(11,27,43,.12),0 40px 80px -40px rgba(11,27,43,.6)}
.desk img{display:block;width:100%;height:auto}
.comp{position:relative;margin:0;padding:0 0 56px}
.cmap{display:block;width:100%;height:auto;border-radius:18px;background:#DDE3E0;box-shadow:0 0 0 1px rgba(11,27,43,.1),0 36px 70px -34px rgba(11,27,43,.55),0 14px 28px -18px rgba(11,27,43,.3)}
.cfrag{position:absolute;display:block;height:auto;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(11,27,43,.07),0 28px 56px -22px rgba(11,27,43,.5),0 10px 20px -12px rgba(11,27,43,.25)}
.c-follow .cmap{width:94%;margin-left:auto}
.c-follow .cf-card{left:0;bottom:0;width:300px}
.c-goal .cmap{width:94%}
.c-goal .cf-tap{right:0;bottom:0;width:320px;border-radius:18px}
.c-weather{padding:0 0 120px;min-height:420px}
.c-weather .cmap.a{width:78%}
.c-weather .cmap.b{position:absolute;right:0;bottom:0;width:62%}
.c-weather .t1{left:calc(78% - 70px);top:22px;width:100px;border-radius:14px}
.c-weather .t2{left:calc(38% - 64px);bottom:46px;width:96px;border-radius:14px}
@media (max-width:860px){
  .feat{grid-template-columns:1fr;gap:34px;padding:44px 0}
  .feat.rev .ft{order:0}
  .c-follow .cf-card{width:min(300px,72%)}
  .c-goal .cf-tap{width:min(320px,80%)}
}
@media (max-width:520px){
  .comp{padding-bottom:70px}
  .c-follow .cmap,.c-goal .cmap{width:100%}
  .c-follow .cf-card{left:-6px;bottom:0;width:72%}
  .c-goal .cf-tap{right:-6px;width:84%}
  .c-weather{padding-bottom:110px;min-height:0}
  .c-weather .cmap.a{width:86%}.c-weather .cmap.b{width:70%}
  .c-weather .t1{left:auto;right:6px;top:12px;width:92px}.c-weather .t2{left:4px;bottom:30px;width:88px}
}
/* livedot.me/example, as a picture: its live card, with its head floating over the top corner (both captured at reading size) */
.exfig{position:relative;display:block;padding:78px 0 0;text-decoration:none;transition:transform .2s ease}
.exfig:hover{transform:translateY(-2px)}
.exfig .excard{width:92%;margin-left:auto;border-radius:20px}
.exfig .exhead{left:0;top:0;width:min(420px,84%);border-radius:18px}
@media (max-width:520px){.exfig{padding-top:58px}.exfig .excard{width:100%}.exfig .exhead{left:-6px;width:88%}}