@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===================== TOKENS ===================== */
:root{
  /* six roles. no pure black, no pure grey. */
  --ground:#0B0B0E;          /* page ground — animated per act */
  --surface:#141418;         /* raised */
  --hair:#26262C;            /* hairline */
  --ink:#F2F1EE;             /* primary text */
  --ink-2:#9C9AA4;           /* secondary — tinted violet-grey, not flat */
  --accent:#F2F1EE;          /* borrowed per act; monochrome by default */
  --on-accent:#0B0B0E;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 4px base */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --s8:64px;--s9:96px;--s10:128px;--s11:180px;--s12:240px;

  --maxw:1320px; --r:14px; --r-sm:8px;
  --e:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --ground:#F7F6F3; --surface:#FFFFFF; --hair:#E2DFD8;
  --ink:#121114; --ink-2:#615E68; --accent:#121114; --on-accent:#F7F6F3;
  color-scheme:light;
}
@media(prefers-color-scheme:light){
  :root:not([data-theme]){
    --ground:#F7F6F3; --surface:#FFFFFF; --hair:#E2DFD8;
    --ink:#121114; --ink-2:#615E68; --accent:#121114; --on-accent:#F7F6F3;
    color-scheme:light;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;
  transition:background 700ms var(--e-io),color 700ms var(--e-io);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--on-accent)}
:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}

/* grain — depth tool 5. one fixed layer, never per-element. */
body::after{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
@media print{body::after{display:none}}

/* ===================== TYPE =====================
   Tracking tightens as size grows. Measure 45–75ch.
   Line-height inverse to measure. */
/* SIZED TO FIT, NOT TO IMPRESS.
   Every .asm headline animates line-by-line, so a line that wraps breaks the
   effect — two visual lines slide as one block. Measured: the longest t-mega
   line is ~8em wide and the longest t-xl line ~11em, so these clamps keep both
   on one line down to 1024px. If you lengthen a headline, re-measure:
     probe.style.font='600 100px Inter'; probe.textContent=line;
     probe.offsetWidth/100  ->  must stay under ~8em (mega) / ~11em (xl). */
.t-mega{font-size:clamp(2.5rem,9.6vw,8.6rem);font-weight:600;line-height:.94;
  letter-spacing:-.05em;margin:0}
.t-xl{font-size:clamp(1.9rem,5.8vw,5.4rem);font-weight:600;line-height:1;
  letter-spacing:-.04em;margin:0}
.t-l{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:600;line-height:1.06;
  letter-spacing:-.032em;margin:0}
.t-m{font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:600;line-height:1.18;
  letter-spacing:-.022em;margin:0}
.t-s{font-size:1.125rem;font-weight:600;line-height:1.35;letter-spacing:-.012em;margin:0}
.lede{font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:300;line-height:1.5;
  letter-spacing:-.014em;color:var(--ink-2);margin:0;max-width:56ch}
.body{font-size:1.0625rem;line-height:1.65;color:var(--ink-2);margin:0 0 var(--s5);max-width:66ch}
.body:last-child{margin-bottom:0}
.body strong,.lede strong{color:var(--ink);font-weight:500}
.mono{font-family:var(--mono);font-size:.75rem;line-height:1.5;color:var(--ink-2);margin:0}
.kicker{font-family:var(--mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-2);margin:0}
.kicker-a{color:var(--accent)}
/* more space ABOVE a heading than below it */
.h-gap{margin-top:var(--s9)}

/* ===================== LAYOUT ===================== */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s5)}
/* A grid item with margin-inline:auto does NOT stretch — it shrink-wraps to its
   content and centres. Inside a .stage that made every act's left edge land
   somewhere different (1173 / 942 / 825px wide), so the page's margin jumped
   ~220px between acts. Force the stretch back. */
.stage>.wrap{width:100%}
@media(min-width:900px){.wrap{padding-inline:var(--s8)}}
.pad{padding-block:clamp(72px,11vh,var(--s11))}
.skip{position:absolute;left:-9999px;top:0;font-family:var(--mono);font-size:.8125rem;
  background:var(--accent);color:var(--on-accent);padding:var(--s3) var(--s4);z-index:200}
.skip:focus{left:var(--s4);top:var(--s4)}

/* ===================== HEADER ===================== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:70;
  background:color-mix(in srgb,var(--ground) 72%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--hair) 70%,transparent);
  transition:background 700ms var(--e-io),border-color 700ms var(--e-io)}
.hdr-in{display:flex;align-items:center;gap:var(--s4);padding-block:var(--s3);min-height:52px}
.wm{font-weight:600;font-size:.9375rem;letter-spacing:-.02em;display:inline-flex;gap:.55ch;align-items:center}
.wm i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:block;
  transition:background 700ms var(--e-io)}
.hnav{display:none;gap:var(--s2);margin-left:auto;margin-right:var(--s4)}
@media(min-width:820px){.hnav{display:flex}}
.hnav a{font-size:.8125rem;font-weight:500;color:var(--ink-2);padding:var(--s2) var(--s3);
  border-radius:100px;transition:color 180ms var(--e),background 180ms var(--e)}
.hnav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.hdr .btn{margin-left:auto}
@media(min-width:820px){.hdr .btn{margin-left:0}}

/* ===================== BUTTONS ===================== */
.btn{font-size:.875rem;font-weight:500;letter-spacing:-.01em;display:inline-flex;
  align-items:center;justify-content:center;gap:.6ch;padding:11px 22px;min-height:44px;
  border-radius:100px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform 180ms var(--e),background 180ms var(--e),
             color 180ms var(--e),border-color 180ms var(--e),opacity 180ms var(--e)}
.btn-1{background:var(--accent);color:var(--on-accent)}
.btn-1:hover{transform:translateY(-1px);opacity:.9}
.btn-2{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 26%,transparent)}
.btn-2:hover{border-color:var(--accent);color:var(--accent)}
.btn-3{background:transparent;color:var(--accent);padding-inline:0;min-height:32px}
.btn-3:hover{gap:1.1ch}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3)}
.theme-t{margin-left:var(--s3);background:none;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  color:var(--ink-2);border-radius:100px;width:44px;height:44px;cursor:pointer;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  transition:color 180ms var(--e),border-color 180ms var(--e)}
.theme-t:hover{color:var(--ink);border-color:var(--accent)}


/* ===================== SCROLL ACTS =====================
   Each .act exposes --p (0→1) written by scroll.js. CSS does the animating. */
.act{position:relative}
.stage{position:sticky;top:0;height:100svh;display:grid;align-content:center;overflow:hidden}
.act-tall{height:340svh}
.act-xtall{height:520svh}

/* line-by-line headline assembly, driven by --p */
.asm{display:block;overflow:hidden}
.asm > span{display:block;transform:translateY(var(--y,0));opacity:var(--o,1);
  will-change:transform,opacity}
/* the hero is at the top of the page, so it has no scroll to assemble under:
   it animates in on load, and scroll drives its EXIT instead. */
.asm-load > span{animation:asmIn 1150ms var(--e) both}
.asm-load > span:nth-child(2){animation-delay:110ms}
.asm-load > span:nth-child(3){animation-delay:220ms}
@keyframes asmIn{from{transform:translateY(104%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.asm-load > span{animation:none}}

/* generic reveal (IntersectionObserver) */
.rev{opacity:0;transform:translateY(26px);
  transition:opacity 900ms var(--e),transform 900ms var(--e)}
.rev.in{opacity:1;transform:none}
.rev-d1{transition-delay:90ms}.rev-d2{transition-delay:180ms}
.rev-d3{transition-delay:270ms}.rev-d4{transition-delay:360ms}

/* ===================== THE RIG (signature) =====================
   One device rig for the whole product act. It never unmounts; the screen
   inside it changes hands between four real products. */
/* The caption and the rig get their OWN columns. They used to share the stage —
   rig centred, caption absolutely positioned over the left — which overlapped by
   up to 275px between 1024 and 1600px. A grid cannot overlap itself. */
.rig-stage{grid-template-rows:auto auto auto;align-content:center;gap:var(--s5);
  padding:calc(52px + var(--s4)) var(--s5) var(--s7)}
.rig-stage>.rig-wrap{grid-row:1}
.rig-stage>.chaps{grid-row:3}
.rig-wrap{position:relative;display:grid;place-items:center;
  perspective:1900px;perspective-origin:50% 44%}
.rig{position:relative;transform-style:preserve-3d;will-change:transform;
  width:min(92%,800px);aspect-ratio:16/10.4}
/* small screens have no spare gutter, so the rig gives up width to keep the
   phone's overhang on-screen (it cleared by only 3px at 390 otherwise) */
@media(max-width:700px){.rig{width:82%}}

/* laptop */
.lid{position:absolute;inset:0;transform-style:preserve-3d;border-radius:16px;
  background:linear-gradient(180deg,#2A2A30,#141419);
  padding:10px 10px 22px;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.85), 0 8px 30px -10px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.09)}
.lid::before{content:'';position:absolute;inset:0 0 auto;height:1px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
.lid::after{content:'';position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  width:64px;height:4px;border-radius:3px;background:rgba(255,255,255,.14)}
.screen{position:absolute;inset:10px 10px 22px;border-radius:8px;overflow:hidden;
  background:var(--p-ground,#0A0A0C);isolation:isolate}
.base{position:absolute;left:-6%;right:-6%;top:100%;height:12px;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#33333A,#17171C);
  box-shadow:0 26px 50px -18px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.07);border-top:0}

/* phone, parented to the rig in 3D so it moves with it */
/* The overhang has to clear the viewport. translateZ magnifies in perspective
   (1900/(1900-z)), so the phone lands further right than its CSS offset implies
   — at translateZ(140) and right:-13.5% it was clipped 50px off-screen at 1280. */
.phone{position:absolute;right:-7.5%;bottom:-15%;width:18.5%;aspect-ratio:9/19.5;
  border-radius:26px;background:linear-gradient(160deg,#33333B,#131318);padding:5px;
  transform:translateZ(105px) rotateY(-13deg) rotateX(3deg);
  box-shadow:0 44px 80px -26px rgba(0,0,0,.9);border:1px solid rgba(255,255,255,.12)}
.phone-s{position:absolute;inset:5px;border-radius:21px;overflow:hidden;
  background:var(--p-ground,#0A0A0C)}
.phone::before{content:'';position:absolute;left:50%;top:11px;transform:translateX(-50%);
  width:26%;height:5px;border-radius:4px;background:rgba(0,0,0,.72);z-index:3}

/* the swapping product screens */
.pane{position:absolute;inset:0;opacity:0;transition:opacity 420ms var(--e-io);
  pointer-events:none;transform:translateZ(0)}
.pane.on{opacity:1}

/* chapter captions — stacked in their own cell, one visible at a time */
.chaps{position:relative;min-height:300px;z-index:4}
@media(max-width:1023px){
  .chap-facts .fact:nth-child(n+3){display:none}
  /* facts must not compete with the product name — they read as headings otherwise */
  .chap-facts{gap:var(--s5);margin-top:var(--s1)}
  .chap-facts .fact b{font-size:1.15rem}
  .chaps .t-l{font-size:2.4rem}
}
.chap{position:absolute;inset:0;display:grid;gap:var(--s3);align-content:start;
  pointer-events:none}
/* the long description is the first thing to go when there is no room for it */
@media(max-width:1023px){.chap-line{display:none}}
@media(min-width:1024px){
  .rig-stage{grid-template-columns:minmax(290px,30%) 1fr;grid-template-rows:1fr;
    align-items:center;gap:clamp(28px,4vw,72px);
    padding:0 clamp(56px,7vw,120px) 0 clamp(32px,5vw,88px)}
  .rig-stage>.chaps{grid-column:1;grid-row:1;min-height:500px;align-self:center}
  .rig-stage>.rig-wrap{grid-column:2;grid-row:1}
  .chap{align-content:center}
}
.chap-in{opacity:0;transform:translateY(14px);transition:opacity 460ms var(--e),transform 460ms var(--e)}
.chap.on .chap-in{opacity:1;transform:none;pointer-events:auto}
.chap-facts{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s2)}
.fact b{display:block;font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:var(--ink)}

/* progress rail — which chapter you are in */
/* Mobile: the rail is a real grid row between the device and the caption — it
   used to be absolutely positioned at the stage's bottom-left, where a long
   caption grew straight through it. Desktop keeps the vertical spine. */
.rail{display:flex;gap:6px;grid-row:2;justify-self:center;z-index:5}
@media(min-width:1024px){.rail{position:absolute;right:clamp(28px,3vw,52px);top:50%;
  transform:translateY(-50%);flex-direction:column;gap:10px}}
.rail i{display:block;width:26px;height:2px;border-radius:2px;
  background:color-mix(in srgb,var(--ink) 22%,transparent);transition:background 320ms var(--e)}
@media(min-width:1024px){.rail i{width:2px;height:30px}}
.rail i.on{background:var(--accent)}

/* ===================== CARDS / RAIL ===================== */
.hrail{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,410px);gap:var(--s4);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s4);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hrail::-webkit-scrollbar{display:none}
.hrail > *{scroll-snap-align:start}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:var(--s6);display:grid;gap:var(--s3);align-content:start;position:relative;
  box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 7%,transparent) inset;
  transition:border-color 220ms var(--e),transform 220ms var(--e)}
.card:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--hair))}

/* mechanism steps */
.steps{display:grid;gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--ground);padding:var(--s7) var(--s5);display:grid;gap:var(--s3);
  align-content:start;position:relative;transition:background 700ms var(--e-io)}
.step-n{width:26px;height:26px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);
  display:grid;place-items:center;font-family:var(--mono);font-size:.6875rem;flex:none}

/* proof */
.proof{display:grid;gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
@media(min-width:640px){.proof{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.proof{grid-template-columns:repeat(4,1fr)}}
.pcell{background:var(--ground);padding:var(--s7) var(--s5);display:grid;gap:var(--s2);
  transition:background 700ms var(--e-io)}
.pcell b{font-size:clamp(2.6rem,5vw,4rem);font-weight:600;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums}

.grid2{display:grid;gap:var(--s6)}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr;gap:var(--s8)}}
.grid4{display:grid;gap:var(--s6)}
@media(min-width:700px){.grid4{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.grid4{grid-template-columns:repeat(4,1fr);gap:var(--s6)}}

.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--mono);font-size:.6875rem;color:var(--ink-2);
  border:1px solid var(--hair);border-radius:100px;padding:3px 10px}

/* footer */
.ftr{border-top:1px solid var(--hair);padding-block:var(--s8) var(--s7)}
.ftr-g{display:grid;gap:var(--s7)}
@media(min-width:768px){.ftr-g{grid-template-columns:1.6fr 1fr 1fr}}
.ftr-c{display:grid;gap:var(--s2);align-content:start}
.ftr-c a{font-size:.875rem;color:var(--ink-2);min-height:30px;display:inline-flex;align-items:center;
  transition:color 180ms var(--e)}
.ftr-c a:hover{color:var(--accent)}
.ftr-b{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:center;
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--hair)}

/* device frame for the mobile review card */
.dev{max-width:390px;margin-inline:auto;border:1px solid var(--hair);border-radius:30px;
  overflow:hidden;background:var(--ground)}
.dev-c{background:var(--surface);border-bottom:1px solid var(--hair);padding:10px var(--s4);
  font-family:var(--mono);font-size:.625rem;color:var(--ink-2);text-align:center}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important;
    scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
  .stage{position:relative;height:auto;padding-block:var(--s9)}
  .act-tall,.act-xtall{height:auto}
  .chap{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;max-width:none;
    margin-top:var(--s7)}
  .chap-in{opacity:1;transform:none}
  .pane{position:relative;opacity:1}
}


.screen,.phone-s{container-type:size}
.ui{position:absolute;inset:0;font-family:var(--sans);overflow:hidden;
  display:flex;flex-direction:column}
.screen .ui{font-size:1.62cqw}
.phone-s .ui{font-size:4.6cqw}
.ui *{box-sizing:border-box}
.ui-bar{display:flex;align-items:center;gap:.6em;padding:.75em 1em;flex:none}
.ui-dot{width:.5em;height:.5em;border-radius:50%;background:currentColor;opacity:.3}
.ui-body{flex:1;display:flex;min-height:0}
.ui-side{width:15%;flex:none;padding:.9em .7em;display:flex;flex-direction:column;gap:.5em}
.ui-main{flex:1;padding:1em 1.1em;display:flex;flex-direction:column;gap:.8em;min-height:0}
.ui-h{font-weight:600;letter-spacing:-.02em}
.ui-mut{opacity:.58}
.ui-chip{border-radius:1em;padding:.18em .6em;font-size:.72em;font-weight:500;display:inline-block}
.ui-card{border-radius:.5em;padding:.7em .8em;display:flex;flex-direction:column;gap:.35em}
.ui-row{display:flex;align-items:center;gap:.5em}
.ui-cols{display:grid;gap:.55em;flex:1;min-height:0}
.ui-col{display:flex;flex-direction:column;gap:.45em;min-height:0}
.ui-lbl{font-family:var(--mono);font-size:.66em;text-transform:uppercase;letter-spacing:.1em;opacity:.55}

/* ---------- tickOver: lead pipeline + live AI call ---------- */
.ui-tickover{background:#0A0A0C;color:#F5F6F8}
.ui-tickover .pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em;flex:1;min-height:0}
.ui-tickover .stg{background:#121319;border:1px solid #1E2028;border-radius:.55em;padding:.6em;
  display:flex;flex-direction:column;gap:.45em}
.ui-tickover .ld{background:#181A22;border:1px solid #23262F;border-radius:.4em;padding:.5em .55em;
  display:flex;flex-direction:column;gap:.25em}
.ui-tickover .ld b{font-weight:600;font-size:.92em}
.ui-tickover .ld span{font-size:.76em;opacity:.55}
.ui-tickover .ld.live{border-color:#3B82F6;box-shadow:0 0 0 1px #3B82F6 inset}
.ui-tickover .call{background:#101724;border:1px solid #1D3559;border-radius:.55em;padding:.7em .8em;
  display:flex;flex-direction:column;gap:.5em;flex:none}
.ui-tickover .wave{display:flex;align-items:center;gap:.14em;height:1.8em}
.ui-tickover .wave i{flex:1;background:#3B82F6;border-radius:.1em;display:block;opacity:.85}
.ui-tickover .tx{font-size:.8em;line-height:1.45;opacity:.75}
.ui-tickover .tx b{color:#3B82F6;font-weight:500}

/* ---------- PhaseBoard: six-stage board + attributed trail ---------- */
.ui-phaseboard{background:#161826;color:#E9E9ED}
.ui-phaseboard .brd{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em;flex:1;min-height:0}
.ui-phaseboard .col{display:flex;flex-direction:column;gap:.4em;min-height:0}
.ui-phaseboard .tk{background:#1E2032;border:1px solid #2A2D42;border-radius:.45em;padding:.55em .6em;
  display:flex;flex-direction:column;gap:.3em}
.ui-phaseboard .tk b{font-weight:500;font-size:.88em;line-height:1.3}
.ui-phaseboard .tk .m{display:flex;gap:.4em;align-items:center;font-family:var(--mono);
  font-size:.68em;opacity:.6}
.ui-phaseboard .av{width:1.35em;height:1.35em;border-radius:50%;display:grid;place-items:center;
  font-size:.6em;font-weight:600;flex:none}
.ui-phaseboard .av.bot{background:#9184D9;color:#12131F}
.ui-phaseboard .av.hum{background:#7FB2A6;color:#12131F}
.ui-phaseboard .trail{background:#12131F;border:1px solid #262940;border-radius:.5em;padding:.6em .7em;
  display:flex;flex-direction:column;gap:.42em;flex:none}
.ui-phaseboard .tr{display:flex;align-items:center;gap:.45em;font-size:.78em}
.ui-phaseboard .tr em{font-style:normal;color:#9184D9;font-family:var(--mono);font-size:.9em}

/* ---------- FR Sports: court availability grid ---------- */
.ui-frsports{background:#0C0D10;color:#F7F7F8}
.ui-frsports .hd{display:flex;align-items:center;gap:.5em}
.ui-frsports .logo{font-weight:700;letter-spacing:-.04em;color:#E5352B}
.ui-frsports .days{display:flex;gap:.35em}
.ui-frsports .day{border:1px solid #22242B;border-radius:.4em;padding:.35em .55em;text-align:center;
  font-size:.78em;line-height:1.2}
.ui-frsports .day.on{background:#E5352B;border-color:#E5352B;color:#fff;font-weight:600}
.ui-frsports .slots{display:grid;grid-template-columns:repeat(6,1fr);gap:.4em;
  grid-auto-rows:min-content;align-content:start;min-height:0}
.ui-frsports .sl{border:1px solid #22242B;border-radius:.38em;padding:.45em .3em;text-align:center;
  font-size:.76em;background:#131519}
.ui-frsports .sl.free{border-color:#2E7D4F;color:#6FDB9C}
.ui-frsports .sl.gone{opacity:.3;text-decoration:line-through}
.ui-frsports .sl.pick{background:#E5352B;border-color:#E5352B;color:#fff;font-weight:600}
.ui-frsports .sum{background:#131519;border:1px solid #22242B;border-radius:.5em;padding:.6em .75em;
  display:flex;gap:1.4em;align-items:center;flex:none;margin-top:auto}
.ui-frsports .sum b{color:#F5C518;font-weight:600}

/* ---------- Tallyr: light dashboard + magenta stamp card ---------- */
.ui-tallyr{background:#F7F5F1;color:#14201F}
.ui-tallyr .side{background:#EDEAE3;border-right:1px solid #DFDBD2}
.ui-tallyr .nav{border-radius:.35em;padding:.35em .5em;font-size:.82em}
.ui-tallyr .nav.on{background:#1F5F5B;color:#fff;font-weight:500}
.ui-tallyr .kpis{display:grid;grid-template-columns:1fr 1fr;gap:.6em;flex:none}
.ui-tallyr .kpi{background:#fff;border:1px solid #E4E0D8;border-radius:.5em;padding:.6em .7em}
.ui-tallyr .kpi b{display:block;font-size:1.7em;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.ui-tallyr .chart{background:#fff;border:1px solid #E4E0D8;border-radius:.5em;padding:.7em;
  display:flex;align-items:flex-end;gap:.4em;flex:1;min-height:0}
.ui-tallyr .chart i{flex:1;background:#CFE0DE;border-radius:.15em .15em 0 0;display:block}
.ui-tallyr .chart i.hi{background:#1F5F5B}
.ui-tallyr .stampcard{background:#B0316A;color:#fff;border-radius:.6em;padding:.8em .9em;
  display:flex;flex-direction:column;gap:.6em;flex:none}
.ui-tallyr .stamps{display:flex;gap:.35em}
.ui-tallyr .st{width:1.55em;height:1.55em;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  display:grid;place-items:center;font-size:.8em}
.ui-tallyr .st.done{background:#fff;color:#B0316A;border-color:#fff;font-weight:700}