/* The landing page. Everything else is inline in index.html, value for value
 * from the design handoff, so the page can be checked against it line by line.
 * Six values differ from the handoff, each only as far as WCAG 2.1 AA needs:
 * --text-3 in both themes, --accent and --money in light, and --dim (the story's
 * inactive steps, 0.35 in the design) and --age (how much each older live-feed
 * row fades, 0.12 in the design). */
@font-face { font-family: Geist; src: url(fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap }
@font-face { font-family: 'Geist Mono'; src: url(fonts/geist-mono.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap }
:root{--bg:#0b0d10;--surface:#12151a;--surface-2:#181c22;--border:#242a33;--grid:#1d2229;--text:#f5f7fa;--text-2:#a7b0bd;--text-3:#7b8492;--accent:#b8ff3c;--money:#ffb547;--up:#5ee29b;--down:#ff6b6b;--ch1:#3987e5;--ch2:#d95926;--ch3:#199e70;--ch4:#c98500;--ch5:#d55181;--ch6:#008300;--tint:rgba(184,255,60,.1);--row:rgba(245,247,250,.055);--glow:rgba(184,255,60,.13);--dim:.67;--age:.07;color-scheme:dark}
html[data-theme="light"]{--bg:#fafaf7;--surface:#ffffff;--surface-2:#f3f4f1;--border:#e3e5e0;--grid:#eef0eb;--text:#0b0d10;--text-2:#4a525e;--text-3:#67707d;--accent:#417e00;--money:#a95b00;--up:#1c8a4e;--down:#d93838;--ch1:#2a78d6;--ch2:#eb6834;--ch3:#1baf7a;--ch4:#eda100;--ch5:#e87ba4;--ch6:#008300;--tint:rgba(77,138,0,.1);--row:rgba(11,13,16,.05);--glow:rgba(150,230,30,.25);--dim:.8;--age:.05;color-scheme:light}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;transition:background .3s,color .3s}
/* A focus ring for the keyboard only: a click or a tap draws none. */
:focus:not(:focus-visible){outline:none}
a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}
::selection{background:#b8ff3c;color:#0b0d10}
@keyframes tkb-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
@keyframes tkb-caret{50%{opacity:0}}
input[type=range].tkb{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--surface-2);outline:none}
input[type=range].tkb::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#b8ff3c;border:4px solid var(--bg);box-shadow:0 0 0 1px var(--border);cursor:grab}
input[type=range].tkb::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#b8ff3c;border:4px solid var(--bg);cursor:grab}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ---- Compare (from the handoff's compare-section.html) ----------------------
 * The ready-made build, scoped under .tkb-cmp. Two details follow the design
 * reference: the hovered cell gets a faint ring, and a competitor's best value
 * gets a lighter bar. DataFast is the one column that is not self-hostable, so
 * its server-RAM cell reads "hosted" with no bar. Each cell is positioned, so
 * its screen-reader label stays inside the scrolling table (in the handoff
 * build it escaped and widened the page on phones). */
.tkb-cmp{max-width:1280px;margin:0 auto;padding:clamp(64px,7vw,104px) clamp(20px,4vw,48px) 0}
.tkb-cmp__head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px 64px;align-items:end;margin-bottom:36px}
.tkb-cmp__eyebrow{font:500 12px "Geist Mono",ui-monospace,monospace;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.tkb-cmp h2{margin:0;font-size:clamp(38px,5vw,68px);font-weight:700;letter-spacing:-.05em;line-height:.96}
.tkb-cmp__lede{margin:0;font-size:17px;line-height:1.55;color:var(--text-2);max-width:460px;text-wrap:pretty}
.tkb-cmp__scroll{overflow-x:auto;margin:0 -10px;padding:10px 10px 4px}
.tkb-cmp__table{min-width:1000px}
.tkb-cmp__row{display:grid;grid-template-columns:minmax(230px,1.7fr) repeat(7,minmax(0,1fr))}
.tkb-cmp__row+.tkb-cmp__row{border-top:1px solid var(--border)}
.tkb-cmp__label{padding:20px 20px 20px 0;display:flex;flex-direction:column;gap:4px;justify-content:center}
.tkb-cmp__label b{font-weight:600;font-size:15.5px}
.tkb-cmp__label small{font-size:13px;color:var(--text-3)}
.tkb-cmp__col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:22px 8px 16px;text-align:center;font-size:14px;color:var(--text-2);border:1.5px solid transparent;border-bottom:0;border-radius:18px 18px 0 0;transition:opacity .2s}
.tkb-cmp__cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 8px;border-left:1.5px solid transparent;border-right:1.5px solid transparent;transition:opacity .2s,box-shadow .2s;outline:none}
.tkb-cmp__cell:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.tkb-cmp .is-us{background:var(--tint);border-left-color:var(--accent);border-right-color:var(--accent)}
.tkb-cmp .tkb-cmp__col.is-us{border-top-color:var(--accent);color:var(--text);font-weight:700;font-size:17px}
.tkb-cmp__extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.3,.9,.3,1)}
.tkb-cmp.is-open .tkb-cmp__extra{grid-template-rows:1fr}
.tkb-cmp__extra>div{min-height:0;overflow:hidden}
.tkb-cmp__extra .tkb-cmp__row:first-child{border-top:1px solid var(--border)}
.tkb-cmp .is-more{opacity:0;transform:translateY(-10px);transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.2,.5,1)}
.tkb-cmp.is-open .is-more{opacity:1;transform:none;transition-delay:calc(var(--mi) * 70ms + 120ms)}
.tkb-cmp .tkb-cmp__row.is-cut .is-us{transition:border-radius .3s ease}
.tkb-cmp:not(.is-open) .tkb-cmp__row.is-cut .is-us,.tkb-cmp .tkb-cmp__row:last-child .is-us{border-bottom:1.5px solid var(--accent);border-radius:0 0 18px 18px}
.tkb-cmp.is-dim [data-col]:not(.is-hot){opacity:.5}
.tkb-cmp .is-cell-hot{box-shadow:inset 0 0 0 1px var(--border)}
.tkb-cmp .tick{width:28px;height:28px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 14px Geist,sans-serif;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.tkb-cmp .tick--yes{background:var(--text-3);color:var(--surface)}
.tkb-cmp .is-us .tick--yes{background:#b8ff3c;color:#0b0d10;box-shadow:0 0 18px rgba(184,255,60,.45)}
.tkb-cmp .tick--part{border:1.5px solid var(--text-3);background:linear-gradient(90deg,var(--text-3) 50%,transparent 50%)}
.tkb-cmp .tick--no{border:1.5px solid var(--border)}
.tkb-cmp .val{font:600 14px "Geist Mono",ui-monospace,monospace;white-space:nowrap;font-variant-numeric:tabular-nums slashed-zero}
.tkb-cmp .val--na{color:var(--text-3);font-weight:500}
.tkb-cmp .is-us .val{color:var(--accent)}
/* On the tinted column the light theme's green needs one step darker for AA. */
html[data-theme="light"] .tkb-cmp .is-us .val{color:#3c7900}
.tkb-cmp .bar{width:72%;height:5px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.tkb-cmp .bar i{display:block;height:100%;width:0;border-radius:5px;background:var(--text-3);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.tkb-cmp .bar i.is-best{background:var(--text-2)}
.tkb-cmp .is-us .bar i{background:#b8ff3c}
.tkb-cmp.is-seen .tick{transform:scale(1)}
.tkb-cmp__more{margin:14px 0 0}
.tkb-cmp__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:16px;font-size:13px;color:var(--text-3)}
.tkb-cmp__note{min-height:18px}
.tkb-cmp__note.is-set{color:var(--text)}
.tkb-cmp__note.is-us-note{color:var(--accent)}
.tkb-cmp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.tkb-cmp .tick,.tkb-cmp .bar i{transition:none}}

/* ---- Phones and small tablets ------------------------------------------------
 * The design is drawn for desktop; these rules keep it composed on a phone.
 * The page's styles are inline (value for value from the handoff), so the
 * overrides need !important. */
.tkb-cmp__swipe{display:none}
/* "Hover" where there is a pointer, "Tap" on a touch screen */
.on-touch{display:none}
@media (hover:none){.on-hover{display:none}.on-touch{display:inline}}

/* ---- header controls ------------------------------------------------------
   One height, one radius, one focus ring. The theme switch is a sun that
   becomes a moon; the page follows it in a circle from the button. */
.hd-theme,.hd-login,.hd-cta{display:inline-flex;align-items:center;height:38px;border-radius:999px;font:500 14px Geist,sans-serif;transition:background .2s,color .2s,border-color .2s,transform .2s}
.hd-theme:focus-visible,.hd-login:focus-visible,.hd-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hd-theme{justify-content:center;width:38px;padding:0;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}
.hd-theme:hover{border-color:var(--text-3)}
.hd-theme:active{transform:scale(.92)}
.hd-theme-icon{overflow:visible}
.hd-core,.hd-bite,.hd-rays{transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s;transform-origin:12px 12px;transform-box:view-box}
/* dark: a moon (the bite covers part of a large disc, the rays are gone) */
.hd-rays{opacity:0;transform:rotate(-90deg) scale(.5)}
/* light: a sun (a smaller disc, the bite slides away, the rays turn in) */
html[data-theme="light"] .hd-core{transform:scale(.62)}
html[data-theme="light"] .hd-bite{transform:translate(9px,-9px)}
html[data-theme="light"] .hd-rays{opacity:1;transform:rotate(0) scale(1)}
.hd-login{padding:0 14px;color:var(--text-2)}
.hd-login:hover{color:var(--text);background:var(--row)}
.hd-nav{display:flex;align-items:center;gap:2px;margin-right:auto}
.hd-more{display:none;position:relative}
.hd-more-btn{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-2);cursor:pointer;transition:border-color .2s,color .2s}
.hd-more-btn:hover,.hd-more-btn[aria-expanded="true"]{border-color:var(--text-3);color:var(--text)}
.hd-more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hd-cta{position:relative;overflow:hidden;gap:6px;padding:0 14px 0 16px;background:#b8ff3c;color:#0b0d10;font-weight:600;white-space:nowrap}
.hd-cta:hover{background:#c9ff66;color:#0b0d10}
.hd-cta:active{transform:scale(.97)}
.hd-cta-arrow{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.hd-cta:hover .hd-cta-arrow{transform:translateX(3px)}
/* a light sweep across the button on hover */
.hd-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.hd-cta:hover::after{transform:translateX(120%);transition:transform .7s ease}
/* signed in: "Hi, Albin" and a small menu (Account, Sign out) */
.hd-me{position:relative}
.hd-me-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 4px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:500 14px Geist,sans-serif;cursor:pointer;transition:border-color .2s}
.hd-me-btn:hover,.hd-me-btn[aria-expanded="true"]{border-color:var(--text-3)}
.hd-me-btn:focus-visible,.hd-me-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hd-me-av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--accent);font-weight:600;font-size:13px}
.hd-me-caret{color:var(--text-3);transition:transform .2s}
.hd-me-btn[aria-expanded="true"] .hd-me-caret{transform:rotate(180deg)}
.hd-me-menu{position:absolute;right:0;top:calc(100% + 10px);width:236px;padding:6px;border:1px solid var(--border);border-radius:16px;background:radial-gradient(200px 90px at 0% 0%,color-mix(in srgb,#b8ff3c 10%,transparent),transparent 70%),var(--surface);box-shadow:0 18px 44px -10px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:2px;transform-origin:top right;animation:hdMeIn .18s cubic-bezier(.3,1.3,.5,1)}
.hd-me-menu[hidden]{display:none}
@keyframes hdMeIn{from{opacity:0;transform:translateY(-6px) scale(.96)}}
.hd-me-head{display:flex;align-items:center;gap:10px;padding:8px 8px 10px}
.hd-me-pic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--tint);color:var(--accent);font:600 16px Geist,sans-serif;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px color-mix(in srgb,#b8ff3c 55%,transparent)}
.hd-me-who{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.hd-me-name{font:600 14px Geist,sans-serif;color:var(--text);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-me-email{font:400 12px Geist,sans-serif;color:var(--text-3,var(--muted));max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-2px}
.hd-me-chip{padding:1px 7px;border-radius:999px;border:1px solid color-mix(in srgb,#b8ff3c 40%,transparent);color:var(--accent);font:500 10.5px 'Geist Mono',monospace;letter-spacing:.04em;text-transform:uppercase}
.hd-me-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--text-2);font:500 14px Geist,sans-serif;text-align:left;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.hd-me-item svg{flex:none;color:var(--text-3);transition:color .15s,transform .2s}
.hd-me-item:hover,.hd-me-item:focus-visible{color:var(--text);background:var(--row)}
.hd-me-item:hover svg,.hd-me-item:focus-visible svg{color:currentColor}
.hd-me-primary{margin-bottom:2px;background:#b8ff3c;color:#0b0d10;font-weight:600}
.hd-me-primary svg{color:#0b0d10}
.hd-me-primary:hover,.hd-me-primary:focus-visible{background:#c9ff66;color:#0b0d10}
.hd-me-go{margin-left:auto}
.hd-me-primary:hover .hd-me-go,.hd-me-primary:focus-visible .hd-me-go{transform:translateX(2px)}
.hd-me-sep{height:1px;margin:4px 6px;border:0;background:var(--border)}
.hd-me-out:hover,.hd-me-out:focus-visible{color:var(--down);background:color-mix(in srgb,var(--down) 10%,transparent)}
.hd-me-item:disabled{opacity:.6;cursor:progress}
.hd-me-item[hidden]{display:none}
/* the page itself changes theme in a circle; plain crossfade without it */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion: reduce){
  .hd-core,.hd-bite,.hd-rays,.hd-cta-arrow,.hd-theme,.hd-cta,.hd-more-btn,.hd-me-btn,.hd-me-caret,.hd-me-item,.hd-me-item svg{transition:none}
  .hd-me-menu{animation:none}
  .hd-cta:hover::after{transition:none;transform:translateX(-120%)}
}
@media (max-width: 560px){
  /* header on a phone: the logo, a menu (Docs, Log in) and the call to
     action, nothing more. The theme switch is in the demo's More menu. */
  .hd-theme,.hd-nav{display:none!important}
  .hd-more{display:block}
  .hd-more .hd-me-menu{width:200px}
  .hd-cta{padding:0 12px 0 14px!important;font-size:13.5px!important}
  /* signed in: only the initial, the same menu behind it */
  .hd-me-hi,.hd-me-caret{display:none}
  .hd-me-btn{width:38px;padding:0;justify-content:center}
}
@media (max-width: 380px){
  /* the smallest phones: the button keeps its words and drops the arrow */
  .hd-cta-arrow{display:none}
  .hd-cta{padding:0 12px!important}
}
@media (max-width: 640px){
  /* comparison: the row names stay put while the tools scroll past */
  .tkb-cmp__swipe{display:block;margin:-20px 0 10px;font:500 12px "Geist Mono",ui-monospace,monospace;color:var(--text-3)}
  .tkb-cmp__scroll{margin:0 -10px 0 0;padding:10px 10px 4px 0}
  .tkb-cmp__table{min-width:0;width:max-content}
  .tkb-cmp__row{grid-template-columns:148px repeat(7,92px)}
  .tkb-cmp__row>:first-child{position:sticky;left:0;z-index:2;background:var(--bg);padding-right:12px}
  .tkb-cmp__label b{font-size:14px}
  .tkb-cmp__label small{font-size:12px}
  .tkb-cmp__col{font-size:13px}
  .tkb-cmp .tkb-cmp__col.is-us{font-size:15px}
}

/* ---- hero ------------------------------------------------------------------
   The glow drifts, the copy arrives line by line, and the panel on the right
   is a small live dashboard (demo data) with the visitor's own visit a tab
   away. Nothing moves for anyone who asked for less motion. */
.hero-glow{position:absolute;inset:-10% -5% 0;background:radial-gradient(45% 40% at 72% 20%,var(--glow),transparent 70%),radial-gradient(30% 30% at 20% 70%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%);pointer-events:none;animation:heroDrift 18s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,3%,0) scale(1.08)}}
.hero-copy>*{animation:heroUp .8s cubic-bezier(.2,.8,.2,1) both}
.hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}.hero-copy>*:nth-child(4){animation-delay:.24s}.hero-copy>*:nth-child(5){animation-delay:.32s}
@keyframes heroUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* the headline's two beats: a line breaks between them, and inside one only when it must */
.h1-beat{display:inline-block}

.hv{position:relative;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 7%,transparent),0 1px 0 color-mix(in srgb,var(--accent) 6%,transparent),0 24px 48px -28px rgba(0,0,0,.45),0 60px 120px -60px color-mix(in srgb,var(--accent) 22%,transparent);animation:heroUp .9s .2s cubic-bezier(.2,.8,.2,1) both}
.hv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--border)}
.hv-title{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;min-width:0;padding-left:4px}
.hv-title #hvTitle{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-tabs{position:relative;display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);flex:none}
.hv-tabs button{position:relative;z-index:1;height:28px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:500 12.5px Geist,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.hv-tabs button[aria-selected="true"]{color:var(--text)}
.hv-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* who visits leads: one big number over its chart */
.hv-lead{position:relative}
.hv-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:16px 18px 0}
.hv-big-l{display:flex;align-items:center;gap:8px;flex-basis:100%;font-size:12.5px;color:var(--text-2)}
.hv-big b{font:600 clamp(34px,3.2vw,44px)/1.05 'Geist Mono',monospace;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hv-big i{font:500 12px 'Geist Mono',monospace;font-style:normal;color:var(--up)}
@keyframes hvBump{30%{transform:translateY(-2px);text-shadow:0 0 18px currentColor}}
.hv-plot{position:relative;margin-top:6px}
.hv-chart{display:block;width:100%;height:84px;overflow:visible}
.hv-chart path{transition:d .9s cubic-bezier(.2,.8,.2,1)}
.hv-glow{opacity:.22;filter:blur(3px)}
.hv-dots{position:absolute;inset:0;pointer-events:none}
.hv-dot{position:absolute;right:0;width:8px;height:8px;margin:-4px -2px 0 0;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent),0 0 14px var(--accent);animation:hvDrop 1.5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hvDrop{0%{opacity:0;transform:translateY(-22px) scale(.4)}25%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
/* then where they come from; revenue once, small: the second beat */
.hv-kpis{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1px;background:var(--border);border-top:1px solid var(--border)}
.hv-kpis>div{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px 18px 13px;background:var(--surface)}
.hv-kpis>div>span{font-size:12px;color:var(--text-2)}
.hv-bar{display:flex;gap:3px;height:6px}
.hv-bar i{width:var(--w);border-radius:3px;background:var(--c);transform-origin:left;animation:hvGrow .9s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes hvGrow{from{transform:scaleX(0)}}
.hv-legend{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;padding:0;list-style:none;font-size:12.5px;color:var(--text-2)}
.hv-legend li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.hv-legend li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--c)}
.hv-legend b{font:600 12px 'Geist Mono',monospace;color:var(--text)}
.hv-rev b{font:600 17px 'Geist Mono',monospace;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hv-rev b.bump{animation:hvBump .6s ease}
.hv-feed{list-style:none;margin:0;padding:6px 0;border-top:1px solid var(--border);height:196px;overflow:hidden;position:relative}
.hv-feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(transparent,var(--surface));pointer-events:none}
.hv-feed li{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;height:38px;padding:0 18px;font-size:13.5px;animation:hvIn .5s cubic-bezier(.2,.8,.2,1) both}
.hv-feed li .k{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;font:700 10px 'Geist Mono',monospace;letter-spacing:-.04em;background:color-mix(in srgb,var(--c,var(--text-3)) 22%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--text-3)) 35%,transparent);color:var(--text)}
.hv-feed li .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.hv-feed li .t em{font-style:normal;color:var(--text-3)}
.hv-feed li .w{display:flex;align-items:center;gap:6px;font:500 11.5px 'Geist Mono',monospace;color:var(--text-3);white-space:nowrap}
.hv-feed li .f{font:14px/1 system-ui,'Apple Color Emoji','Segoe UI Emoji',sans-serif}
.hv-feed li.goal .k{--c:var(--accent);color:var(--accent)}
.hv-feed li.pay .k{--c:var(--money)}
.hv-feed li.pay .t b{font-weight:600}
.hv-feed li.pay::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,#b8ff3c 22%,transparent) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;opacity:0;pointer-events:none;animation:hvGlint 1.1s .25s cubic-bezier(.2,.8,.2,1)}
@keyframes hvGlint{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-20% 0}}
@keyframes hvIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.hv-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 18px;background:var(--surface-2);border-top:1px solid var(--border);font:500 11.5px 'Geist Mono',monospace;color:var(--text-3)}
.hv-foot a{color:var(--text-2);transition:color .2s}
.hv-foot a:hover{color:var(--text)}
/* "Your visit": you, as trckable sees you, and what it keeps */
.vs-you{display:flex;align-items:center;gap:14px;padding:16px 18px 14px}
.vs-dev{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)}
.vs-dev svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vs-who{display:flex;flex-direction:column;gap:7px;min-width:0}
.vs-name{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.vs-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.vs-chips li{display:flex;align-items:center;gap:5px;max-width:100%;height:24px;padding:0 9px 0 7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-chips svg,.vs-rows svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;color:var(--text-3)}
.vs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.vs-tile{display:flex;flex-direction:column;gap:6px;min-width:0;height:86px;padding:12px 18px;background:var(--surface)}
.vs-l{font-size:12px;color:var(--text-2)}
.vs-v{display:inline-block;align-self:flex-start;font:600 26px/1.05 'Geist Mono',monospace;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vs-v em{font-style:normal;font-size:15px;font-weight:500;color:var(--text-3)}
.vs-v.bump{animation:vsBump .26s cubic-bezier(.2,.8,.2,1)}
@keyframes vsBump{40%{transform:translateY(-3px) scale(1.06)}}
.vs-meter{position:relative;height:4px;margin-top:auto;border-radius:2px;background:var(--surface-2);overflow:hidden}
.vs-meter i{position:absolute;inset:0;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.vs-segs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;height:4px;margin-top:auto}
.vs-segs i{border-radius:2px;background:var(--accent);opacity:.16;transition:opacity .25s}
.vs-segs i.on{opacity:1}
.vs-rows{margin:0;padding:6px 18px;list-style:none}
.vs-rows li{display:grid;grid-template-columns:13px auto minmax(0,1fr);align-items:center;gap:9px;height:32px;font-size:13px}
.vs-k{color:var(--text-3)}
.vs-t{text-align:right;font:500 12.5px 'Geist Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:11px 18px;background:var(--surface-2);border-top:1px solid var(--border);font-size:12.5px;color:var(--text-2)}
.vs-keep{display:flex;align-items:center;gap:7px;color:var(--text)}
.vs-keep svg{color:var(--up)}
.vs-size{font:500 11.5px 'Geist Mono',monospace;color:var(--text-3)}
.vs-size>span{color:var(--accent);text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
@media (prefers-reduced-motion: reduce){.vs-v.bump{animation:none}.vs-meter i,.vs-segs i{transition:none}}
/* the switch: a pill that glides, panels that trade places */
.hv-pill{position:absolute;left:3px;top:3px;height:28px;width:0;border-radius:999px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent);transition:transform .42s cubic-bezier(.34,1.45,.5,1)}
.hv-body{position:relative;overflow:hidden;transition:height .3s cubic-bezier(.2,.8,.2,1)}
.hv-panel{transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1),filter .22s ease}
.hv-panel.hv-out{opacity:0;transform:scale(.98);filter:blur(4px);transition-duration:.15s}
.hv-panel.hv-in{opacity:0;transform:translateY(8px) scale(.99);filter:blur(3px);transition:none}
/* "Your visit", fancier: the orb, the odometer, the liquid bar, the glint */
.vs-dev{position:relative;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 40%,var(--surface)),color-mix(in srgb,var(--accent) 10%,var(--surface)) 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),0 0 22px -4px color-mix(in srgb,var(--accent) 55%,transparent)}
.vs-dev::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);animation:vsBreathe 3.2s ease-in-out infinite}
@keyframes vsBreathe{0%,100%{opacity:.25;transform:scale(.94)}50%{opacity:.8;transform:scale(1.06)}}
.vs-tile{position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--text) 3.5%,var(--surface)),var(--surface) 60%);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent)}
.vs-odo{display:inline-flex;align-items:flex-start;height:1.05em;overflow:hidden}
.vs-d{display:block;height:1.05em;overflow:hidden}
.vs-d>span{display:block;line-height:1.05em;transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
.vs-c{padding:0 .04em;color:var(--text-3)}
.vs-meter{height:6px;border-radius:3px;overflow:visible;background:color-mix(in srgb,var(--text) 7%,transparent)}
.vs-meter i{border-radius:3px;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--accent));box-shadow:0 0 12px -1px color-mix(in srgb,var(--accent) 60%,transparent)}
.vs-meter u{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:vsSheen 2.8s ease-in-out infinite}
@keyframes vsSheen{60%,100%{transform:translateX(100%)}}
.vs-segs{height:6px}
.vs-segs i{position:relative;overflow:hidden;border-radius:3px}
.vs-segs i.on{box-shadow:0 0 8px -1px color-mix(in srgb,var(--accent) 70%,transparent)}
.vs-segs i.on::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);transform:translateX(-110%);animation:vsGlint .6s ease-out both;animation-delay:inherit}
@keyframes vsGlint{to{transform:translateX(110%)}}
.vs-shield{position:relative;display:grid;overflow:hidden;border-radius:4px}
.vs-shield::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);transform:translateX(-120%)}
.vs-open .vs-shield::after{animation:vsShine .9s .35s ease-out both}
@keyframes vsShine{to{transform:translateX(120%)}}
.vs-rows li{position:relative;margin:0 -10px;padding:0 10px}
.vs-rows li::before{content:"";position:absolute;inset:2px 0;border-radius:8px;background:var(--row);opacity:0;transition:opacity .2s}
.vs-rows li:hover::before{opacity:1}
.vs-rows li svg,.vs-rows .vs-k{position:relative;transition:transform .2s cubic-bezier(.2,.8,.2,1),color .2s}
.vs-rows li:hover svg{transform:translateX(2px);color:var(--accent)}
.vs-rows li:hover .vs-k{transform:translateX(2px)}
.vs-rest .vs-dev::after,.vs-rest .vs-meter u{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.hv-pill,.hv-body,.hv-panel,.vs-d>span,.vs-rows li svg,.vs-rows .vs-k{transition:none}.vs-dev::after,.vs-meter u,.vs-segs i.on::after,.vs-open .vs-shield::after{animation:none}}
@media (max-width:560px){
  .hv-kpis{grid-template-columns:1fr}
  .hv-kpis>.hv-rev{display:none} /* a phone keeps the analytics; a sale shows in the feed */
  .hv-title #hvTitle{display:none}
  .hv-foot span{display:none}
  .hv-feed{height:164px}
  .hv-feed li .w{font-size:11px}
}
@media (prefers-reduced-motion: reduce){
  .hero-glow,.hero-copy>*,.hv,.hv-feed li,.hv-feed li.pay::after,.hv-rev b.bump,.hv-dot,.hv-bar i{animation:none}
  .hv-chart path{transition:none}
}

/* ---- install: one line, set large, and three small steps ----------------- */
/* three steps; with the script they wait off screen and light up in turn */
@keyframes inPop{40%{transform:scale(1.08)}}
@media (max-width:560px){
}

/* ---- pricing: one card, the price rolls, the ghost is the handle ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pr{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--surface);border:1px solid var(--border);border-radius:22px;overflow:hidden}
.pr-calc{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:18px;min-width:0}
.pr-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.pr-label{font:500 12px 'Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.pr-bill{display:flex;align-items:stretch;gap:6px;padding:4px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}
.pr-opt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:92px;padding:7px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:600 13.5px/1.2 Geist,sans-serif;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.pr-opt small{font:500 11.5px/1.2 'Geist Mono',monospace;color:var(--text-2)}
.pr-opt:hover{border-color:var(--accent)}
.pr-opt:active{transform:scale(.97)}
.pr-opt[aria-pressed="true"]{background:#b8ff3c;border-color:#b8ff3c;color:#0b0d10;box-shadow:0 6px 18px -8px rgba(184,255,60,.7)}
.pr-opt[aria-pressed="true"] small{color:#2c3a10}
.pr-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pr-sep{flex:none;width:1px;margin:6px 2px;background:var(--border)}
.pr-price{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pr-big{display:flex;align-items:baseline;gap:10px}
/* The rolling digits are clipped above and below only: the tight spacing lets
   a glyph reach past its box sideways, and that part must stay visible. */
.pr-fig{--fs:clamp(64px,7vw,96px);display:inline-flex}
.pr-fig>.pr-odo{align-self:baseline}
/* The "~" of a rounded month sits before the $, half the digits' size, and fades and widens in; it is never one of the rolling digits. */
.pr-tilde{align-self:center;font:600 calc(var(--fs)*.5)/1 'Geist Mono',monospace;color:var(--text-2);overflow:hidden;max-width:0;opacity:0;transition:max-width .35s ease,opacity .25s ease}
.pr-tilde.on{max-width:.7em;opacity:1}
.pr-odo{display:inline-flex;font:600 var(--fs)/1 'Geist Mono',monospace;letter-spacing:-.06em;font-variant-numeric:tabular-nums;height:1em;clip-path:inset(0 -.2em);padding-right:.06em}
.pr-odo .d{display:inline-block;height:1em;clip-path:inset(0 -.2em)}
.pr-odo .d>span{display:block;transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.pr-mo{font:500 22px 'Geist Mono',monospace;color:var(--text-2)}
.pr-was{font:500 22px 'Geist Mono',monospace;color:var(--text-2);text-decoration-thickness:2px}
.pr-deal[hidden]{display:none}
.pr-deal{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pr-chip{font:600 13px/1 'Geist Mono',monospace;background:#b8ff3c;color:#0b0d10;padding:6px 11px;border-radius:999px;white-space:nowrap}
.pr-pill{font:500 12.5px/1 'Geist Mono',monospace;color:var(--text-2);border:1px solid var(--border);padding:5px 10px;border-radius:999px;white-space:nowrap}
.pr-deal:not([hidden]) .pr-chip{animation:pr-pop .18s ease-out}
@keyframes pr-pop{from{opacity:0;transform:translateY(4px) scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pr-deal:not([hidden]) .pr-chip{animation:none}}
.pr-per{display:flex;flex-direction:column;gap:2px;margin:0;font-size:15px;color:var(--text-2)}
.pr-per:empty{display:none}
.pr-per b{font-family:'Geist Mono',monospace;color:var(--text);font-weight:600}
input[type=range].pr-range{height:8px;margin:14px 0 0;background:linear-gradient(90deg,var(--accent) var(--p,25%),var(--surface-2) var(--p,25%))}
input[type=range].pr-range::-webkit-slider-thumb{width:40px;height:42px;border:0;border-radius:0;box-shadow:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 8 44 46'%3E%3Cpath d='M12 30a20 20 0 0 1 40 0v22l-5-3.5-5 3.5-5-3.5-5 3.5-5-3.5-5 3.5-5-3.5-5 3.5z' fill='%23b8ff3c' stroke='%230b0d10' stroke-width='2'/%3E%3Ccircle cx='25.5' cy='29' r='3.6' fill='%230b0d10'/%3E%3Ccircle cx='38.5' cy='29' r='3.6' fill='%230b0d10'/%3E%3C/svg%3E") center/contain no-repeat;transform:translateY(-4px);transition:transform .2s}
input[type=range].pr-range::-moz-range-thumb{width:40px;height:42px;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 8 44 46'%3E%3Cpath d='M12 30a20 20 0 0 1 40 0v22l-5-3.5-5 3.5-5-3.5-5 3.5-5-3.5-5 3.5-5-3.5-5 3.5z' fill='%23b8ff3c' stroke='%230b0d10' stroke-width='2'/%3E%3Ccircle cx='25.5' cy='29' r='3.6' fill='%230b0d10'/%3E%3Ccircle cx='38.5' cy='29' r='3.6' fill='%230b0d10'/%3E%3C/svg%3E") center/contain no-repeat}
input[type=range].pr-range:active::-webkit-slider-thumb{transform:translateY(-8px) scale(1.08)}
input[type=range].pr-range:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:6px}
/* Each label sits under its stop: the ghost's centre runs from 20px to 100% − 20px. */
.pr-ticks{position:relative;height:16px;margin-top:-6px;font:400 11.5px 'Geist Mono',monospace;color:var(--text-3)}
.pr-ticks span{position:absolute;top:0;left:calc(20px + var(--i) * (100% - 40px) / 6);transform:translateX(-50%);white-space:nowrap;transition:color .2s}
.pr-ticks span.on{color:var(--text);font-weight:600}
.pr-race{display:flex;flex-direction:column;gap:12px;margin-top:4px;padding-top:18px;border-top:1px solid var(--border)}
.pr-lane{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;font-size:13.5px;color:var(--text-2)}
.pr-lane b{font:600 14px 'Geist Mono',monospace;color:var(--text)}
.pr-lane i{grid-column:1/-1;height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.pr-lane em{display:block;height:100%;width:0;border-radius:5px;background:var(--text-3);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.pr-lane.is-us{color:var(--text);font-weight:600}
.pr-lane.is-us b{color:var(--accent)}
.pr-lane.is-us em{background:#b8ff3c;box-shadow:0 0 16px rgba(184,255,60,.4)}
.pr-note{margin:0;font-size:13px;color:var(--accent)}
.pr-plan{position:relative;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:18px;border-left:1px solid var(--border);background:radial-gradient(120% 70% at 100% 0%,var(--tint),transparent 60%)}
.pr-plan-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600;font-size:19px}
.pr-badge{font:600 11px 'Geist Mono',monospace;background:#b8ff3c;color:#0b0d10;padding:4px 9px;border-radius:999px;white-space:nowrap}
.pr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:14.5px;line-height:1.45;color:var(--text-2)}
.pr-list li{position:relative;padding-left:28px}
.pr-list li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384c51a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.pr-cta{margin-top:auto;display:flex;justify-content:center;align-items:center;gap:8px;height:50px;border-radius:999px;background:#b8ff3c;color:#0b0d10;font-weight:600;font-size:15px;transition:transform .2s,box-shadow .2s}
.pr-cta:hover{color:#0b0d10;transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(184,255,60,.6)}
.pr-fine{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-3)}
@media (max-width:860px){
  .pr{grid-template-columns:minmax(0,1fr)}
  .pr-plan{border-left:0;border-top:1px solid var(--border)}
}
@media (max-width:560px){
  .pr-bill{width:100%}
  .pr-opt{flex:1 1 0;min-width:0;padding:7px 10px}
  .pr-ticks{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){.pr-odo .d>span,.pr-tilde,.pr-lane em,.pr-cta{transition:none}}
.rv-cookie{margin:0;max-width:480px;font-size:14.5px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.rv-cookie a,.faq a,.pv-more a{color:var(--accent);font-weight:500;white-space:nowrap}
.rv-cookie a:hover,.faq a:hover,.pv-more a:hover{text-decoration:underline}
/* the questions, their own section */
.faq{margin:0}
.faq details{border-top:1px solid var(--border)}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 2px;font-weight:600;font-size:17px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:500 18px 'Geist Mono',monospace;color:var(--text-3);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.faq details p{margin:0;padding:0 2px 18px;font-size:15px;line-height:1.6;color:var(--text-2);max-width:760px}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---- footer: links, then the name from edge to edge ------------------------ */
.ft{border-top:1px solid var(--border);overflow:hidden}
.ft-in{max-width:1280px;margin:0 auto;padding:clamp(40px,5vw,64px) clamp(20px,4vw,48px) 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px 64px}
.ft-brand{max-width:400px;display:flex;flex-direction:column;gap:14px}
.ft-logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px}
.ft-brand p{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.ft-cols{display:grid;grid-template-columns:repeat(4,minmax(110px,auto));gap:28px clamp(32px,5vw,72px)}
.ft-cols>div{display:flex;flex-direction:column;gap:10px;font-size:14px}
.ft-cols a{color:var(--text-2);transition:color .15s}
.ft-cols a:hover{color:var(--text)}
.ft-h{margin:0 0 4px;font:500 12px 'Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ft-base{max-width:1280px;margin:0 auto;padding:36px clamp(20px,4vw,48px) 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font:400 12.5px 'Geist Mono',monospace;color:var(--text-3)}
.ft-mark{position:relative;display:flex;justify-content:center;margin-top:clamp(8px,2vw,24px);height:calc(var(--fs) * .8);--fs:min(26vw,640px);overflow:hidden;user-select:none}
.ft-word{position:relative;z-index:1;font:700 var(--fs)/1 Geist,sans-serif;letter-spacing:-.065em;white-space:nowrap;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,var(--bg)) 0%,var(--bg) 92%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.ft-fit{position:relative;display:inline-block}
.ft-ghost{position:absolute;z-index:0;left:54%;top:calc(var(--fs) * .5);width:calc(var(--fs) * .34);transform:translateY(90%);transition:transform .9s cubic-bezier(.3,1.5,.5,1)}
.ft-ghost svg{width:100%;height:auto}
.ft-mark.is-seen .ft-ghost{transform:translateY(-100%) rotate(-7deg)}
@media (max-width:640px){.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-cols>div:last-child{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:10px 20px}.ft-cols>div:last-child .ft-h{width:100%}}
@media (prefers-reduced-motion:reduce){.ft-ghost{transition:none}}

/* ---- phones: the same page, lighter to scroll ------------------------------ */
@media (max-width:560px){
  #top{padding-top:22px!important}
  #top>div:nth-child(2){gap:30px!important}
  .hero-copy{gap:18px!important}
  .hero-copy>a:first-child{font-size:12px!important}
  .hero-copy h1{font-size:46px!important}
  .hero-copy p{font-size:16px!important}
  .hero-copy>div:nth-of-type(2){flex-wrap:nowrap!important;gap:8px!important}
  .hero-copy>div:nth-of-type(2)>a{flex:1 1 auto;justify-content:center;height:46px!important;padding:0 14px!important;font-size:14px!important;white-space:nowrap}
  .hv-feed li:nth-child(n+5){display:none}
  #demo,#revenue,#pricing,.tkb-cmp{padding-top:52px!important}
  #privacy{margin-top:52px!important;padding:48px 0!important}
  #pricing{padding-bottom:56px!important}
  #demo h2,#revenue h2,#privacy h2,#pricing h2,.tkb-cmp h2{font-size:34px!important}
  #demo>div>div:first-child,#revenue>div>div:first-child,#pricing>div>div:first-child,.tkb-cmp__head{margin-bottom:22px!important;gap:12px!important}
  #demo p,#revenue p,#pricing>div>div:first-child p,.tkb-cmp__lede{font-size:15.5px!important}
  #chart>div>div:first-child{height:210px!important}
  #kpis{gap:8px!important}
  #kpis>div{min-height:0!important;padding:12px 14px!important;gap:4px!important}
  .pr-fig{--fs:60px}
  .pr-list{gap:9px;font-size:14px}
  .ft-mark{--fs:26vw}
}

/* the section dock steps aside when the page has ended */
body.at-end #dock{opacity:0!important;pointer-events:none!important}

/* ---- the name: "trck" is missing its a, and the a plays peekaboo --------- */
.logo{font-family:Geist,sans-serif}

/* ---- back to the top: a ghost that floats up with you --------------------- */
.to-top{position:fixed;right:20px;bottom:22px;z-index:61;display:flex;flex-direction:column;align-items:center;gap:0;padding:6px;border:0;background:transparent;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(30px) scale(.6);transition:opacity .3s,transform .6s cubic-bezier(.3,1.7,.5,1)}
.to-top.on{opacity:1;pointer-events:auto;transform:none}
.to-top-body{display:block;animation:ttFloat 2.8s ease-in-out infinite}
.to-top svg{width:30px;height:auto;filter:drop-shadow(0 6px 12px rgba(184,255,60,.35));transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.to-top svg g{transform-box:fill-box;transform-origin:center;animation:ttBlink 4.2s infinite}
.to-top-shadow{display:block;width:18px;height:4px;margin-top:3px;border-radius:50%;background:rgba(184,255,60,.25);animation:ttShadow 2.8s ease-in-out infinite}
.to-top-arrow{font:700 12px Geist,sans-serif;line-height:1;color:var(--accent);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .3s}
.to-top:hover .to-top-body,.to-top:focus-visible .to-top-body{animation:ttWiggle .6s ease-in-out infinite}
.to-top:hover .to-top-arrow,.to-top:focus-visible .to-top-arrow{opacity:1;transform:none;animation:ttArrow .8s ease-in-out infinite}
.to-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}
.to-top.fly .to-top-body{animation:none;transform:translateY(-120vh) rotate(-10deg);transition:transform .9s cubic-bezier(.5,0,.7,.4)}
.to-top.fly .to-top-shadow,.to-top.fly .to-top-arrow{opacity:0}
@keyframes ttFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ttShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.7);opacity:.5}}
@keyframes ttBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes ttWiggle{0%,100%{transform:translateY(-6px) rotate(0)}25%{transform:translateY(-8px) rotate(-8deg)}75%{transform:translateY(-8px) rotate(8deg)}}
@keyframes ttArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* on phones the section dock does the navigating; the ghost waits for the end of the page, where the dock steps aside */
@media (max-width:560px){.to-top{right:12px;bottom:22px}body:not(.at-end) .to-top{opacity:0;pointer-events:none;transform:translateY(30px) scale(.6)}}
@media (prefers-reduced-motion:reduce){.to-top,.to-top svg,.to-top-arrow,.to-top-body{transition:none;animation:none!important}.to-top svg g,.to-top-shadow{animation:none}}

/* the story's steps are buttons: click one to watch from there */
.st-step{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:opacity .3s,transform .3s}
.st-step:hover{opacity:1!important;transform:translateX(3px)}
.st-step:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px}

/* ---- rising into view (landing.js adds .rv, then .in) --------------------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--rv-d,0ms),transform .8s cubic-bezier(.2,.8,.2,1) var(--rv-d,0ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---- the demo: it assembles in 3D, then a spotlight follows the pointer --- */
.demo-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s;background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(184,255,60,.07),transparent 45%)}
#demoBoard:hover .demo-glow{opacity:1}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  #demo>div{perspective:1900px;perspective-origin:50% 0}
  #demoBoard{transform-style:preserve-3d;transform-origin:50% 0;will-change:transform;transform:translateY(calc(var(--x,0) * 70px)) rotateX(calc(var(--x,0) * 26deg)) scale(calc(1 - var(--x,0) * .06));box-shadow:0 calc(60px + var(--x,0) * 60px) calc(120px + var(--x,0) * 80px) -60px rgba(0,0,0,.6)!important}
  #demoBoard>:not(.demo-glow):not(.demo-cursor){transform:translateZ(calc(var(--x,0) * var(--z,0px)));transition:none}
  #demoBoard>.dt{--z:150px}
  #demoBoard>.dtb{--z:130px}
  #demoBoard>.db-overview{--z:80px}
  #panels{--z:24px}
}

/* pricing: Cloud or Self-host, the same card */
#pr[data-mode="cloud"] .pr-self,#pr[data-mode="self"] .pr-cloud{display:none!important}
.pr-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:6px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.pr-facts>div{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--surface)}
.pr-facts b{font:600 24px 'Geist Mono',monospace;letter-spacing:-.03em;color:var(--accent)}
.pr-facts span{font-size:13px;line-height:1.4;color:var(--text-2)}
@media (max-width:560px){.pr-facts{grid-template-columns:1fr}}
.pr-plan.pr-self .pr-cta{background:transparent;color:var(--text);border:1px solid var(--border)}
.pr-plan.pr-self .pr-cta:hover{color:var(--text);border-color:var(--accent);box-shadow:none}
.pr-plan,.pr-calc>*{animation:prIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes prIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pr-plan,.pr-calc>*{animation:none}}

/* back to the top: the ghost flies up and lands in the logo */
.logo.land svg{animation:tkbLand .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes tkbLand{0%{transform:translateY(-26px) scale(.7);opacity:.2}55%{transform:translateY(3px) scale(1.12,.88)}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.logo.land svg{animation:none}}
@media (max-width:560px){
  .pr-calc,.pr-plan{padding:20px}
  .pr-list{font-size:14px}
  .pr-lane{font-size:13px}
}

/* ---- the demo's tour: a ghost drives, then beacons ----------------------- */
.demo-cursor{position:absolute;left:0;top:0;z-index:6;width:0;height:0;pointer-events:none;opacity:0;transition:transform .75s cubic-bezier(.5,0,.2,1),opacity .35s}
.demo-cursor.on{opacity:1}
.demo-cursor.fast{transition:transform .07s linear,opacity .35s}
.demo-cursor svg{position:absolute;left:-10px;top:-8px;filter:drop-shadow(0 6px 14px rgba(184,255,60,.5));transition:transform .15s}
.demo-cursor.tap svg{transform:scale(.8)}
.demo-cursor.tap::after{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:2px solid #b8ff3c;animation:demoTap .5s ease-out}
@keyframes demoTap{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.demo-cursor-say{position:absolute;left:24px;top:-4px;white-space:nowrap;padding:6px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--accent);color:var(--text);font:500 12.5px Geist,sans-serif;box-shadow:0 10px 26px -12px rgba(0,0,0,.6);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .25s}
.demo-cursor.flip .demo-cursor-say{left:auto;right:18px}
.demo-cursor.talking .demo-cursor-say{opacity:1;transform:none}
/* ---- revenue: one sale, and the visit that earned it ---------------------- */
.jr{position:relative;background:radial-gradient(120% 70% at 100% 0%,var(--tint),transparent 60%),var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px 22px 18px;box-shadow:0 30px 60px -36px rgba(0,0,0,.5)}
.jr-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.jr-title{font-weight:600;font-size:15px}
.jr-model{display:flex;gap:4px;padding:3px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border)}
.jr-model button{height:32px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--text-2);font:500 13px Geist,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.jr-model button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.jr-model button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.jr-steps::before{content:"";position:absolute;left:11px;top:16px;bottom:16px;width:2px;background:var(--border);border-radius:2px}
.jr-steps li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 12px 12px 0;border-radius:12px;transition:background .4s}
.jr-steps li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.jr-steps li b{font-weight:600;font-size:15px}
.jr-steps li span:not(.jr-dot){font-size:13px;color:var(--text-2)}
.jr-dot{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--c,var(--money));box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 12px var(--c,var(--money))}
.jr-pay .jr-dot{--c:var(--money)}
.jr-pay b{color:var(--money)}
.jr-credit,.jr-skip{font-style:normal;font:600 13px 'Geist Mono',monospace;opacity:0;transform:scale(.7);transition:opacity .3s .15s,transform .45s .15s cubic-bezier(.3,1.6,.5,1)}
.jr-credit{color:var(--money)}
.jr-skip{font:500 12px 'Geist Mono',monospace;color:var(--text-3)}
.jr.play .jr-skip{opacity:1;transform:none;transition-delay:1.6s}
.jr-steps li.is-credited{background:color-mix(in srgb,var(--money) 10%,transparent)}
.jr-steps li.is-credited .jr-credit{opacity:1;transform:none}
.jr-coin{position:absolute;left:0;top:0;z-index:2;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--money);color:#0b0d10;font:700 13px 'Geist Mono',monospace;box-shadow:0 8px 20px -6px color-mix(in srgb,var(--money) 70%,transparent);opacity:0;transition:transform .9s cubic-bezier(.5,-.3,.3,1.3),opacity .3s}
.jr.play .jr-coin{opacity:1;transition:transform .9s cubic-bezier(.5,-.3,.3,1.3),opacity .3s 1.3s}
.jr-foot{margin:14px 0 0;font-size:13px;color:var(--text-2);min-height:2.9em}
/* the four stops arrive one after another */
.jr-steps li{transform:translateY(6px)} /* readable at rest; the play only slides them in */
.jr.play .jr-steps li{transform:none;transition:transform .5s,background .4s}
.jr.play .jr-steps li:nth-child(2){transition-delay:.3s,.3s,0s}
.jr.play .jr-steps li:nth-child(3){transition-delay:.6s,.6s,0s}
.jr.play .jr-steps li:nth-child(4){transition-delay:.9s,.9s,0s}
@media (prefers-reduced-motion:reduce){.jr-steps li,.jr-coin,.jr-credit,.jr-skip{transition:none!important}}

/* ---- the demo board: the dashboard as it is ------------------------------
   Value for value from the product's dashboard/src/styles.css: its tokens
   (the ones that differ from this page's), its header and toolbar, the
   overview card with its tiles and chart, the cards and the banner. The
   dashboard's breakpoints are the board's own width here, not the window's. */
#demoBoard{--sunken:#0f1216;--border-2:#353c46;--text-3:#8a93a1;--accent-ink:#0b0d10;--accent-soft:rgba(184,255,60,.14);--shadow:0 12px 32px rgba(0,0,0,.45);--ease:cubic-bezier(.2,.8,.2,1);container:demo/inline-size;display:flex;flex-direction:column;gap:16px;font-size:14px;line-height:1.4}
html[data-theme="light"] #demoBoard{--sunken:#f6f7f4;--border-2:#d2d5cf;--text-3:#616874;--accent:#487f00;--accent-ink:#fff;--accent-soft:rgba(72,127,0,.12);--money:#9c5a00;--up:#177a44;--down:#c62828;--shadow:0 12px 32px rgba(20,24,30,.12)}
#demoBoard [hidden]{display:none!important}
#demoBoard .num{font-family:'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums slashed-zero}
#demoBoard svg{flex:none}
.db-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;white-space:nowrap;cursor:pointer;transition:border-color .15s,background .15s}
.db-btn:hover{border-color:var(--border-2)}
.db-btn:disabled{opacity:.5;cursor:default}
.db-icon{width:40px;padding:0;justify-content:center}
.db-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.db-primary:hover{border-color:transparent}
.db-kbd{font:11px/1.4 'Geist Mono',ui-monospace,monospace;color:var(--text-3);border:1px solid var(--border-2);border-radius:5px;padding:1px 5px}
.db-primary .db-kbd{color:inherit;border-color:currentColor}
.db-muted{color:var(--text-2)}
.dt-btn{border:0;background:transparent;color:var(--text);font:inherit;cursor:pointer;transition:background .15s}
.dt-btn:focus-visible,.db-btn:focus-visible,.kpi:focus-visible,.bl-row:focus-visible,.tc-tabs button:focus-visible,.tc-sub button:focus-visible,.tc-full:focus-visible,.dt-round:focus-visible,.dt-plan:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the header: logo, site, then the tools at the far end */
.dt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:48px}
.dt-brand{display:flex;align-items:center;flex:none;margin-right:4px}
.dt-site{display:flex;align-items:stretch;min-width:0;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.dt-sitebtn{display:flex;align-items:center;gap:9px;min-width:0;max-width:280px;height:44px;padding:0 12px;border-radius:11px;white-space:nowrap}
.dt-sitebtn:hover,.dt-sitebtn[aria-expanded="true"]{background:var(--surface-2)}
.dt-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dt-chev{color:var(--text-3)}
.dt-markwrap{position:relative;display:inline-flex;flex:none}
.dt-sitemark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:7px;font-size:10px;font-weight:700;line-height:1;color:var(--c,#e48b58);background:color-mix(in srgb,var(--c,#e48b58) 16%,transparent)}
.dt-live{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}

/* the toolbar: filters in force on the left; period, Filter, Share, Views */
.dt-filter,.dt-views{gap:7px}
.dt-filter.on{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.dt-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:600}
.dt-views{max-width:240px}
.dt-views.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:var(--accent-soft)}
.dt-views #viewsText{overflow:hidden;text-overflow:ellipsis}
.db-chip{display:inline-flex;align-items:center;gap:8px;max-width:320px;height:36px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);font:inherit;font-size:13px;white-space:nowrap}
.db-chip b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.db-chip .faint{color:var(--text-3)}
.db-chip button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-2);cursor:pointer}
.db-chip button:hover{background:var(--surface-2)}
button.db-chip{gap:6px;padding:0 12px;color:var(--text-2);cursor:pointer}
button.db-chip:hover{color:var(--text)}
.db-dot{width:8px;height:8px;border-radius:2px;flex:none}

/* the overview: the tiles, and the chart under them, in one card */
.db-overview{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--grid);border-radius:16px;background:radial-gradient(700px 240px at 0% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),var(--surface)}
#demoBoard .tone-up{color:var(--up)}
#demoBoard .tone-down{color:var(--down)}
.db-chart{display:flex;flex-direction:column;gap:12px;padding:18px 20px 16px}
.db-chart-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.db-h{font-size:15px;font-weight:600}
#chart{position:relative;cursor:crosshair}
#chart>svg{display:block;overflow:visible}
.chart-now-halo{transform-box:fill-box;transform-origin:center;animation:dbBreathe 2.4s ease-in-out infinite}
@keyframes dbBreathe{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:0;transform:scale(1.6)}}
.db-note{position:absolute;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.db-note i{width:2px;height:14px;background:var(--money);opacity:.7}
.db-note em{position:absolute;bottom:16px;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 6px;border-radius:7px;border:1px solid var(--grid);background:var(--surface);color:var(--money);font-size:11px;font-style:normal}
.db-ago{position:absolute;bottom:0;transform:translateX(-50%);padding:2px 9px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:11px;white-space:nowrap;pointer-events:none}
.db-tip{position:absolute;top:6px;z-index:30;display:flex;flex-direction:column;gap:10px;width:244px;padding:12px 14px;border-radius:14px;border:1px solid var(--border-2);background:radial-gradient(220px 90px at 0% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 40px rgb(0 0 0/.4);font-size:12.5px;pointer-events:none;animation:dmIn .12s var(--ease) backwards}
.ct-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ct-live{padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:10.5px}
.ct-hero{display:grid;gap:2px}
.ct-label{display:flex;align-items:center;gap:6px;color:var(--text-2);font-size:11.5px}
.ct-label i{width:8px;height:8px;border-radius:3px}
.ct-big{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.ct-hero.money .ct-big{color:var(--money)}
.ct-vs{color:var(--text-3);font-size:11.5px}
.ct-vs em{margin-right:2px;font-style:normal}
.ct-split{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
.ct-split-bar{grid-column:1/-1;height:4px;border-radius:2px;background:var(--grid);overflow:hidden}
.ct-split-bar>span{display:block;height:100%;border-radius:2px;background:var(--accent)}
.ct-split em{color:var(--text-3);font-size:11px;font-style:normal}
.ct-split em .num{color:var(--text-2)}
.ct-split em.right{text-align:right}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding-top:10px;border-top:1px solid var(--border)}
.ct-grid span{display:grid;gap:1px}
.ct-grid em{color:var(--text-3);font-size:10.5px;font-style:normal}
.ct-grid b{font-size:13px;font-weight:500}
.tip-note{margin:2px 0 -4px;padding:6px 8px;border-left:2px solid var(--money);border-radius:0 6px 6px 0;background:color-mix(in srgb,var(--money) 10%,transparent);font-size:12.5px;line-height:1.4}
.db-scrub{display:flex;align-items:center;gap:14px}
.db-scrub .db-btn{height:38px;border-radius:999px}
#playBtn{padding:0 14px 0 10px}
.db-speed{gap:6px;padding:0 10px 0 12px;color:var(--text-2);font-size:13px}
.db-speed:hover,.db-speed[aria-expanded="true"]{color:var(--text)}
.db-viewing{min-width:0}
input[type=range].db-range{-webkit-appearance:none;appearance:none;flex:1;min-width:80px;height:28px;margin:0;background:transparent;cursor:pointer}
input[type=range].db-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--border)}
input[type=range].db-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--accent)}
input[type=range].db-range::-moz-range-track{height:4px;border-radius:2px;background:var(--border)}
input[type=range].db-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--surface)}
input[type=range].db-range:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* the cards: a title with its fold, tabs, and one bar under every name */
.db-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.db-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px 20px;border:1px solid var(--grid);border-radius:16px;background:var(--surface)}
.db-cols{display:flex;align-items:flex-end;gap:12px;padding:0 10px 4px;font-size:11px;color:var(--text-3)}
.db-cols span:first-child{flex:1}
.bl-row{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:5px 10px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:opacity .25s,background .15s,box-shadow .2s}
.bl-row:hover{background:var(--sunken)}
.bl-label{display:grid;flex:1;gap:5px;min-width:0}
.bl-name{display:flex;align-items:center;gap:8px;min-width:0}
.bl-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-track{display:block;height:3px;border-radius:2px;background:var(--grid);overflow:hidden}
.bl-bar{display:block;height:100%;border-radius:2px;background:var(--accent);opacity:.75;transition:width .45s var(--ease),opacity .15s,background .2s}
.bl-row:hover .bl-bar{opacity:1}
.bl-val{flex:none;width:64px;text-align:right;white-space:nowrap}
.bl-val.sub{width:56px;color:var(--text-2)}
.bl-val.bl-d{width:60px;font-size:11.5px}
.bl-val.money{color:var(--money)}
.db-cols .bl-val{font-size:11px;color:var(--text-3)}
div.bl-row{cursor:default}
div.bl-row:hover{background:none}
.db-map{display:block;width:100%;height:auto;margin-top:4px}
.db-map circle[data-row]{cursor:pointer}

/* the board's menus, in the dashboard's menu look */
.dm-pop{position:absolute;z-index:8;display:flex;flex-direction:column;gap:1px;min-width:230px;max-width:calc(100% - 24px);max-height:380px;overflow:auto;padding:6px;border-radius:16px;border:1px solid var(--border-2);background:radial-gradient(300px 120px at 0% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),var(--surface);box-shadow:var(--shadow);animation:dmIn .18s var(--ease) backwards}
@keyframes dmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dm-pop button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:4px 10px;border:0;border-radius:9px;background:transparent;color:var(--text);font:500 13px Geist,sans-serif;text-align:left;cursor:pointer}
.dm-pop a{display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 10px;border-radius:9px;color:var(--accent);font:600 13px Geist,sans-serif;text-decoration:none}
.dm-pop button:hover,.dm-pop button:focus-visible,.dm-pop a:hover,.dm-pop a:focus-visible{background:var(--sunken);outline:none}
.dm-pop .pulse{margin-left:6px}
.dm-pop button.on{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.dm-pop button>svg{color:var(--text-2)}
.dm-pop .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-pop .ck{display:grid;place-items:center;width:16px;flex:none;color:var(--accent)}
.dm-pop .chipn{padding:2px 7px;border-radius:6px;background:var(--sunken);color:var(--text-2);font:11.5px 'Geist Mono',monospace}
.dm-pop .dm-h{display:flex;align-items:center;gap:8px;padding:8px 10px 6px;font-size:12.5px;font-weight:600}
.dm-pop .dm-more{color:var(--text-2)}
.dm-pop .dm-more[aria-expanded=true]>svg{transform:rotate(180deg)}
.dm-pop .dm-note{margin:0;padding:2px 10px 10px;max-width:300px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.dm-pop hr{margin:5px 4px;border:0;border-top:1px solid var(--border)}
.dm-pop .dm-seg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;font-size:13px;color:var(--text-3)}
.dm-pop .dm-seg span{display:flex;gap:2px;padding:2px;border-radius:10px;border:1px solid var(--border);background:var(--surface)}
.dm-pop .dm-seg button{width:auto;min-height:26px;padding:0 10px;border-radius:8px;color:var(--text-2);font-size:12px}
.dm-pop .dm-seg button[aria-pressed="true"]{background:var(--border);color:var(--text)}

.dm-sheet{position:absolute;inset:0;z-index:9;display:grid;place-items:start center;padding:clamp(12px,4vw,56px) 12px;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:inherit}
.dm-sheet-in{width:min(920px,100%);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);overflow:hidden;animation:dmIn .2s ease-out}
.dm-sheet-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.dm-sheet-head button{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}
.dm-tabs{display:flex;gap:4px;padding:8px 12px;overflow-x:auto;border-bottom:1px solid var(--border)}
.dm-tabs button{flex:none;height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font:500 13px Geist,sans-serif;cursor:pointer}
.dm-tabs button[aria-selected="true"]{background:var(--surface-2);color:var(--text)}
.dm-shot{max-height:min(62vh,560px);overflow:auto;background:var(--bg)}
.dm-shot img{display:block;width:100%;height:auto}
.dm-note{margin:0;padding:10px 16px;font-size:12.5px;color:var(--text-3);border-top:1px solid var(--border)}

/* ---- the demo guide ------------------------------------------------------- */
.guide-dot{position:absolute;left:0;top:0;z-index:4;width:28px;height:28px;padding:0;border:0;background:transparent;cursor:help;display:grid;place-items:center;animation:guideIn .45s cubic-bezier(.3,1.6,.5,1) both}
.guide-dot::before{content:"";width:12px;height:12px;border-radius:50%;background:#b8ff3c;box-shadow:0 0 0 0 rgba(184,255,60,.55);animation:guidePulse 1.9s ease-out infinite}
.guide-dot:hover::before,.guide-dot:focus-visible::before{transform:scale(1.25)}
.guide-dot:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-radius:50%}
.guide-dot.gone{opacity:0;transform:scale(.3);transition:opacity .35s,transform .35s}
@keyframes guidePulse{0%{box-shadow:0 0 0 0 rgba(184,255,60,.55)}100%{box-shadow:0 0 0 12px rgba(184,255,60,0)}}
@keyframes guideIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.guide-tip{position:absolute;z-index:10;width:max-content;max-width:min(280px,calc(100% - 20px));display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--accent);box-shadow:0 18px 40px -16px rgba(0,0,0,.65);font-size:13px;line-height:1.45;color:var(--text-2);pointer-events:none;animation:dmIn .15s ease-out}
.guide-tip b{color:var(--text);font-weight:600;font-size:13.5px}
@media (max-width:640px){.guide-dot{width:32px;height:32px}.guide-dot::before{width:11px;height:11px}}
@media (prefers-reduced-motion:reduce){.guide-dot,.guide-dot::before{animation:none}}

/* hidden means hidden, whatever display the element has when shown */
.dm-sheet[hidden],.dm-pop[hidden],.guide-tip[hidden],.guide-dot[hidden]{display:none!important}
.pr-list li b{color:var(--text);font-weight:600}

/* every plan line that follows the slider flashes when it changes */
.pr-list li{border-radius:8px}
.pr-list li.flash{animation:tierFlash .9s ease-out}
@keyframes tierFlash{0%{background:var(--tint)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.pr-list li.flash{animation:none}}

/* pricing: three quick picks over the slider */
.pr-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:22px}
.pr-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.pr-pick:hover{border-color:var(--accent)}
.pr-pick:active{transform:scale(.98)}
.pr-pick .n{font:600 13.5px Geist,sans-serif}
.pr-pick .e{font:500 11.5px 'Geist Mono',monospace;color:var(--text-3)}
.pr-pick.best{position:relative;border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.pr-best{position:absolute;top:-9px;right:10px;padding:1px 7px;border-radius:999px;background:var(--accent);color:#0b0d10;font:600 10.5px Geist,sans-serif;font-style:normal;letter-spacing:.01em}
html[data-theme="light"] .pr-best{color:#fff}
.pr-ticks span.best{color:var(--accent)}
.pr-pick b{margin-top:4px;font:600 15px 'Geist Mono',monospace;letter-spacing:-.02em}
.pr-pick[aria-pressed="true"]{border-color:var(--accent);background:var(--tint)}
.pr-pick[aria-pressed="true"] b{color:var(--accent)}
.pr-pick[aria-pressed="true"] .e{color:var(--text-2)}
.pr-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:420px){.pr-pick{padding:9px 9px}.pr-pick .n{font-size:12.5px}}


/* the board is 3D only while it assembles; settled, it is a plain flat board */
#demoBoard.settled{transform:none!important;transform-style:flat!important;will-change:auto}
#demoBoard.settled>*{transform:none!important}
#demoBoard.settled>.demo-cursor{transform:var(--cur,none)!important}



/* the market comparison: one line */
.pr-save{margin:0;font-size:14px;color:var(--text-2)}
.pr-save{font-size:14.5px;line-height:1.5}
.pr-save b{color:var(--accent);font-weight:650}
.pr-save #saveAmt{font-family:'Geist Mono',monospace;letter-spacing:-.02em}

/* The Cloud plan's extra lines: closed, a dashed rule with a count. */
.pr-list li.more{display:none}
.pr-list.open li.more:not([hidden]){display:block;animation:prMore .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes prMore{from{opacity:0;transform:translateY(-4px)}}
.pr-more{display:flex;align-items:center;gap:12px;width:100%;margin:-4px 0 -2px;padding:6px 0;border:0;background:none;color:var(--text-2);font:500 13px 'Geist Mono',monospace;cursor:pointer}
.pr-more::before,.pr-more::after{content:"";flex:1;border-top:1px dashed var(--border);transition:border-color .2s}
.pr-more:hover{color:var(--text)}
.pr-more:hover::before,.pr-more:hover::after{border-color:var(--text-3)}
.pr-more:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.pr-list.open li.more{animation:none}}
.pr-fine a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* The hero's one number: the weight of the script, in the accent and mono. */
.hero-kb{font:600 .95em 'Geist Mono',monospace;letter-spacing:-.02em;color:var(--accent);background:var(--tint);padding:.05em .35em;border-radius:6px;white-space:nowrap}
/* Cards with depth: each [data-tilt] card sits in a wrapper that leans toward
   the pointer (a few degrees) and carries a soft accent glow under it. The
   wrapper moves, never the card, so the cards' own animations are untouched.
   Mouse only, and never for someone who asked for less motion. */
.tilt{perspective:1100px}
.tilt-in{position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}
.tilt-in::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 12%,transparent),transparent 45%);opacity:0;transition:opacity .35s}
.tilt.on .tilt-in{transition-duration:.15s}
.tilt.on .tilt-in::after{opacity:1}
@media (prefers-reduced-motion:reduce){.tilt-in{transform:none!important}}

/* Under the demo board: a badge that says it is interactive, and three hints
   with hand-drawn arrows pointing up into it. On a phone, the badge alone. */
.demo-cue{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px 24px;max-width:1080px;margin:18px auto 0;padding:0 8px;position:relative}
.cue-badge{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 8px 0;max-width:420px}
.cue-badge strong{display:flex;align-items:center;gap:8px;font:500 12px 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.cue-badge>span{font-size:14px;color:var(--text-2);line-height:1.45}
.cue-badge strong::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);animation:cue-pulse 1.8s ease-out infinite}
.cue-hint{margin:0;display:flex;flex-direction:column;font:500 14px Geist,sans-serif;color:var(--text);position:relative;padding-top:66px}
.cue-hint span{font-weight:400;color:var(--text-3);font-size:12px}
.cue-l{grid-column:1;grid-row:1;justify-self:end;text-align:right;align-items:flex-end;margin-right:40px}
.cue-r{grid-column:3;grid-row:1;justify-self:start;align-items:flex-start;margin-left:40px}
.cue-arrow{position:absolute;top:-6px;width:104px;height:74px;fill:none;stroke:color-mix(in srgb,var(--accent) 70%,var(--text-2));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3 4;animation:cue-bob 2.4s ease-in-out infinite}
.cue-arrow path+path{stroke-dasharray:none}
.cue-l .cue-arrow{right:-60px;transform-origin:top right}
.cue-r .cue-arrow{left:-60px}
@keyframes cue-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
@keyframes cue-bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media (prefers-reduced-motion:reduce){.cue-arrow,.cue-badge strong::before{animation:none}}
@media (max-width:760px){.demo-cue{grid-template-columns:1fr}.cue-hint{display:none}.cue-badge{grid-column:1;grid-row:auto;justify-self:center}}
/* On a phone the section name matters more than its number. */
@media (max-width:420px){#dockNum{display:none}}

/* The brand's playful line, small above the headline that says what it is. */
.hero-eyebrow{font:500 14px 'Geist Mono',monospace;letter-spacing:.04em;color:var(--accent)}

/* The hero's section strip: one line at a time, sliding up. */
.ticker{align-self:flex-start;position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 12px 0 5px;border-radius:999px;background:var(--surface);border:1px solid var(--border);max-width:100%;overflow:hidden}
.tick-track{position:relative;height:34px;min-width:0;flex:1 1 auto;display:grid}
.tick-item{grid-area:1/1;display:flex;align-items:center;gap:10px;height:34px;color:var(--text);font-size:13px;white-space:nowrap;min-width:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease;transform:translateY(100%);opacity:0}
.tick-item.on{transform:none;opacity:1}
.tick-item.out{transform:translateY(-100%);opacity:0}
.tick-item:hover .tick-text{color:var(--accent)}
.tick-text{overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.tick-chip{flex:none;background:#b8ff3c;color:#0b0d10;font-weight:700;font-size:11px;letter-spacing:.02em;padding:3px 8px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.tick-item{transition:none}}
.pv-points{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;max-width:500px}
.pv-points li{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--text)}
.pv-points li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translateY(-1px)}
.pv-more{margin:0;font-size:14.5px;color:var(--text-2);max-width:500px}
@media (max-width:420px){.pv-points{grid-template-columns:minmax(0,1fr)}}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.faq-grid details{border:1px solid var(--border)!important;border-radius:14px;background:var(--surface);padding:0 18px;transition:border-color .25s,background .25s}
.faq-grid details:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))!important}
.faq-grid details[open]{border-color:color-mix(in srgb,var(--accent) 55%,var(--border))!important;background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.faq-grid summary{padding:18px 0!important;font-size:17px!important;align-items:center}
.faq-k{flex:none;order:-1;font:500 11px 'Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);margin-right:4px}
.faq-grid summary{justify-content:flex-start!important}
.faq-grid summary::after{margin-left:auto}
.faq-grid details p{padding-bottom:18px!important}
.faq-grid details[open] p{animation:faqIn .3s cubic-bezier(.2,.8,.2,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.faq-grid details[open] p{animation:none}}
@media (max-width:760px){.faq-grid{grid-template-columns:minmax(0,1fr)}}
.pr-how{margin:14px 0 0;font-size:13px;color:var(--text-2);text-align:center}

/* ---- Live mode: the dashboard's Live | Data switch and Live view, value for
   value from the product (dashboard/src/features/live/Live.css and the
   .view-switch rules in styles.css), on the demo's own tokens. */
.view-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;flex:none;padding:3px;border-radius:999px;border:1px solid var(--border);background:var(--surface)}
.view-pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--surface-2);box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 0 0 1px var(--border-2,var(--border));transform:translateX(100%);transition:transform .42s cubic-bezier(.34,1.45,.5,1)}
.view-switch.live .view-pill{transform:none}
.view-switch button{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 14px;border:0;border-radius:999px;background:none;font:600 13px Geist,ui-sans-serif,system-ui,sans-serif;color:var(--text-3);cursor:pointer}
.view-switch button[aria-pressed="true"]{color:var(--text)}
.view-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pulse{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:lvPulse 2s ease-out infinite}
@keyframes lvPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}80%,100%{box-shadow:0 0 0 9px transparent}}
.view-switch:not(.live) .pulse{animation:none;opacity:.55}
.kpi-live .kpi-l::after{content:'→';margin-left:2px;color:var(--text-3);transition:transform .2s var(--ease),color .2s}
.kpi-live:hover .kpi-l::after{color:var(--accent);transform:translateX(2px)}
#demoBoard.is-live>.db-overview,#demoBoard.is-live>#panels,#demoBoard.is-live>.dtb{display:none}

.live-view{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;height:600px;min-height:0}
.live-view[hidden]{display:none}
.db-card.live-panel{padding:0;gap:0;overflow:hidden;min-height:0}
.live-head-row{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--grid)}
#demoBoard .live-head-row h2{margin:0;font-size:15px!important;font-weight:600;letter-spacing:-.01em;line-height:1.3} /* beats the phone size of #demo h2 */
.live-meta{margin-left:auto;font-family:var(--mono,'Geist Mono',monospace);font-size:12px;text-align:right}
.live-label{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:400;color:var(--text-2)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.live-now{display:flex;flex-direction:column}
.live-figures{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 40px;padding:20px 22px 0}
.live-figure{display:flex;flex-direction:column;gap:6px;min-width:0}
.live-view .live-online,.live-view .live-visitors{font-family:Geist,ui-sans-serif,system-ui,sans-serif;color:var(--text);font-variant-numeric:tabular-nums}
.live-online{font-size:76px;line-height:1;font-weight:700;letter-spacing:-.05em}
.live-visitors{font-size:36px;line-height:1;font-weight:600;letter-spacing:-.03em}
.live-view .live-delta{font-size:12px;color:var(--text-3)}
.live-view .live-delta.tone-up{color:var(--up)}
.live-view .live-delta.tone-down{color:var(--down)}
.live-chart{flex:1;min-height:120px;display:flex;flex-direction:column;padding:10px 0 12px}
.live-line{position:relative;flex:1;min-height:96px}
.live-line svg{position:absolute;inset:0;display:block;overflow:visible}
.live-glow{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 55%,transparent))}
.live-head{filter:drop-shadow(0 0 5px var(--accent));animation:lvBeat 2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes lvBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.35)}}
.live-axis{display:flex;justify-content:space-between;padding:6px 22px 0;font-size:11px}
.live-bottom{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--grid)}
.live-bottom.money{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.live-sources,.live-revenue{display:flex;flex-direction:column;gap:12px;padding:18px 22px;min-width:0}
.live-bottom.money .live-sources{border-right:1px solid var(--grid)}
.live-split{display:flex;gap:3px;height:10px}
.live-split span{min-width:4px;border-radius:5px;transition:flex-grow .5s var(--ease)}
.live-other{background:var(--border-2,var(--border))}
.live-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--text)}
.live-legend li{display:flex;align-items:center;gap:7px}
.live-legend b{font-weight:600}
.live-swatch{width:10px;height:10px;border-radius:3px}
.live-view .live-money{font-size:30px;line-height:1;font-weight:700;color:var(--money)}
.live-view .live-sold{font-size:12px;font-weight:500;color:var(--accent);animation:lvIn .45s var(--ease) backwards}
.live-onsite{display:flex;flex-direction:column}
.live-feed{flex:1;min-height:0;overflow-y:auto;margin:0;padding:0;list-style:none;overscroll-behavior:contain}
.live-row{display:flex;align-items:center;gap:12px;padding:11px 22px;border-bottom:1px solid var(--grid);animation:lvIn .45s var(--ease) backwards;transition:opacity .6s ease}
.live-row.leaving{pointer-events:none;animation:lvOut .6s var(--ease) forwards}
.live-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2)}
.live-what{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.live-view .live-page{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-from{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-country{flex-shrink:0;max-width:38%;font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-foot{margin:0;padding:12px 22px;border-top:1px solid var(--grid);font-family:var(--mono,'Geist Mono',monospace);font-size:11px}
@keyframes lvIn{from{opacity:0;transform:translateY(-10px)}}
@keyframes lvOut{to{opacity:0;transform:translateX(12px)}}
/* the dashboard's breakpoints (960 and 520 px), on the board's width */
@container demo (max-width:900px){
  .live-view{grid-template-columns:minmax(0,1fr);height:auto}
  .live-chart{flex:none;height:200px}
  .live-onsite{height:min(70dvh,520px)}
}
@container demo (max-width:600px){
  .view-switch button{height:30px;padding:0 11px}
  .live-head-row{padding:14px 16px}
  .live-meta{font-size:11px}
  .live-calm{display:none}
  .live-figures{padding:16px 16px 0;gap:12px 24px}
  .live-online{font-size:60px}
  .live-visitors{font-size:30px}
  .live-axis{padding:6px 16px 0}
  .live-bottom.money{grid-template-columns:minmax(0,1fr)}
  .live-bottom.money .live-sources{border-right:0;border-bottom:1px solid var(--grid)}
  .live-sources,.live-revenue{padding:16px}
  .live-row{padding:10px 16px}
  .live-foot{padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){
  .view-pill,.live-split span,.live-row{transition:none}
  .pulse,.live-row,.live-row.leaving,.live-sold,.live-head{animation:none}
}

/* The plain words under a slogan heading: what the section is, as people search for it. */
.kw-lead { margin: 10px 0 0; font: 500 13px/1.4 'Geist Mono', monospace; letter-spacing: .02em; color: var(--text-3); text-wrap: pretty }

/* The board as the dashboard is now (features/header, overview, cards). Row
   one: the logo, the site and its cog as one hairline card, then Live/Data,
   Peek, the plan's pill, the bell and the avatar at the right end. Row two,
   in Data only: the filters in force on the left, two capsules on the right
   (period, comparison and Filter; Share and ⋯). The key numbers are one light
   strip, the chart one line, and the two cards under it carry their tabs. */
#demoBoard .dt{flex-wrap:nowrap;gap:8px;min-height:48px}
#demoBoard .dt-site{flex:0 1 auto;min-width:44px;height:38px;border-color:var(--border);border-radius:12px}
#demoBoard .dt-sitebtn{height:36px;min-width:0;padding:0 10px;border-radius:11px 0 0 11px}
#demoBoard .dt-gear{display:grid;place-items:center;flex:none;width:36px;border-left:1px solid var(--border);color:var(--text-2)}
#demoBoard .dt-tools{display:flex;align-items:center;justify-content:flex-end;flex:1 1 0;min-width:0;gap:6px}
#demoBoard .dt-tools>*{flex:none}
#demoBoard .dt-ask{height:36px;padding:0 10px;gap:6px;border-color:transparent;background:transparent;color:var(--text-2)}
#demoBoard .dt-ask:hover,#demoBoard .dt-ask[aria-expanded="true"]{background:var(--surface-2);color:var(--text)}
.dt-plan{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 7px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);font:500 13px 'Geist Mono',ui-monospace,monospace;white-space:nowrap;cursor:pointer;transition:border-color .15s}
.dt-plan:hover,.dt-plan[aria-expanded="true"]{border-color:var(--border-2)}
.dt-ring{position:relative;display:grid;place-items:center;width:22px;height:22px;color:var(--accent)}
.dt-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.dt-ring circle{fill:none;stroke-width:2.5}
.dt-ring .tr{stroke:var(--border-2)}
.dt-ring .fl{stroke:currentColor;stroke-linecap:round}
.dt-round{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text-2);font:inherit;cursor:pointer;transition:border-color .15s,color .15s}
.dt-round:hover,.dt-round[aria-expanded="true"]{border-color:var(--accent);color:var(--text)}
.dt-me{background:var(--accent-soft);color:var(--accent);font:600 15px Geist,ui-sans-serif,system-ui,sans-serif}
#demoBoard .dtb{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-top:-6px}
#demoBoard .dtb-filters{display:flex;flex-wrap:wrap;align-items:center;flex:1 1 auto;gap:8px;min-width:0}
.dt-cap{position:relative;display:flex;align-items:center;flex:none;height:38px;padding:2px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.dt-see{margin-left:auto}
.dt-cap .dt-btn{display:flex;align-items:center;gap:8px;height:32px;padding:0;border-radius:8px;color:var(--text-2);font-size:13px;white-space:nowrap}
.dt-cap .dt-btn:hover:not(:disabled),.dt-cap .dt-btn[aria-expanded="true"]{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.dt-cap .dt-btn:disabled{opacity:.4;cursor:default}
.dt-arrow{justify-content:center;width:30px}
.dt-range{min-width:0;padding:0 8px!important;color:var(--text)!important;font-size:14px}
.dt-range b{font-weight:600}
.dt-range [data-ico]{color:var(--text-2)}
.dt-days{color:var(--text-3);font-size:12px;font-weight:400}
.dt-ico{justify-content:center;width:32px}
.dt-ico.on{color:var(--accent)!important}
.dt-filter{padding:0 9px!important}
.dt-div{flex:none;width:1px;height:18px;background:var(--border)}
.dt-short,.dt-chev2{display:none!important}
.dt-share.on{color:var(--accent)!important}
/* the key numbers: one light strip, a name with its small mark, a number, a change; the charted one is underlined */
.db-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(118px,calc(100% / 7 - 1px)),1fr));gap:4px 0;padding:10px 12px 0;border-bottom:1px solid var(--grid)}
.kpi{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;margin:0;padding:8px 12px 12px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;container-type:inline-size}
.kpi-l{display:flex;align-items:center;gap:6px;max-width:100%;font-size:12.5px;color:var(--text-3)}
.kpi-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-ico{display:flex;flex:none}
.kpi:hover .kpi-l,.kpi[aria-pressed="true"] .kpi-l{color:var(--text)}
.kpi-v{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(18px,15cqi,28px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.kpi-d{min-height:16px;font-size:12px;line-height:16px;white-space:nowrap;color:var(--text-2)}
#demoBoard .tone-flat{color:var(--text-3)}
.kpi[aria-pressed="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:var(--accent)}
.kpi.money[aria-pressed="true"]::after{background:var(--money)}
.kpi .pulse{margin:0 2px 0 2px}
/* the chart: one line, Replay a small ▶ whose controls show on hover or focus */
#demoBoard .db-chart-head{align-items:center}
#demoBoard .db-play{order:9;margin-left:auto;width:32px;height:32px;padding:0;justify-content:center;border:0;border-radius:8px;background:none;color:var(--text-2)}
#demoBoard .db-play:hover{color:var(--text)}
#demoBoard .db-play[data-on="true"]{color:var(--accent)}
.db-scrub{opacity:0;transition:opacity .2s}
.db-chart:hover .db-scrub,.db-chart:focus-within .db-scrub,.db-chart:has(#playBtn[data-on="true"]) .db-scrub,.db-chart:has(.db-viewing:not([hidden])) .db-scrub{opacity:1}
@media (hover:none){.db-scrub{opacity:1}}
/* Who came and What they did: a card each, its tabs along the top */
.db-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.db-card.tc{gap:0;padding:0;overflow:hidden}
.tc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:0 10px 0 8px;border-bottom:1px solid var(--grid)}
.tc-tabs{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tc-tabs::-webkit-scrollbar{display:none}
.tc-tabs button{position:relative;flex:none;height:44px;padding:0 12px;border:0;background:none;color:var(--text-3);font:inherit;font-size:13.5px;cursor:pointer}
.tc-tabs button:hover{color:var(--text)}
.tc-tabs button[aria-selected="true"]{color:var(--text);font-weight:600}
.tc-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.tc-full{display:inline-flex;align-items:center;flex:none;gap:6px;height:28px;padding:0 6px 0 8px;border:0;border-radius:6px;background:none;color:var(--text-2);font:inherit;font-size:13px;cursor:pointer}
.tc-full:hover{color:var(--text)}
.tc-sub{display:flex;gap:2px;padding:12px 12px 4px}
.tc-sub button{height:28px;padding:0 9px;border:0;border-radius:7px;background:none;color:var(--text-3);font:inherit;font-size:12.5px;cursor:pointer}
.tc-sub button:hover{color:var(--text)}
.tc-sub button[aria-selected="true"]{background:var(--surface-2);color:var(--text)}
.tc .bl,.tc .db-map{margin:8px 12px 14px;width:auto}
/* narrower: the board's own width, not the window's */
@container demo (max-width:960px){.dt-asklabel,.dt-key{display:none}.dt-ask{padding:0 9px!important}}
@container demo (max-width:900px){.db-grid{grid-template-columns:minmax(0,1fr)}.dt-planname{display:none}.dt-plan{padding:0 7px}}
@container demo (max-width:640px){
  #demoBoard .dt{flex-wrap:wrap;row-gap:10px}
  #demoBoard .dt-brand{margin-right:0}
  #demoBoard .dt-brand .tkb-wm{display:none}
  #demoBoard .dt-site{flex:1 1 120px}
  #demoBoard .dt-sitebtn{flex:1;max-width:none}
  #demoBoard .dt-gear,.dt-plan,.dt-bell{display:none}
  #demoBoard .dt-tools{display:contents}
  #demoBoard .view-switch{order:9}
  #demoBoard .dtb{flex-wrap:wrap}
  .dt-cap .dt-arrow,.dt-long,.dt-days,.dt-filterlabel{display:none}
  .dt-short{display:inline!important}
  .dt-chev2{display:contents!important}
  .dt-range{gap:6px}
  .db-kpis{padding:6px 4px 0}
  .kpi{padding:8px 8px 10px}
  .kpi[aria-pressed="true"]::after{left:8px;right:8px}
  .db-chart{padding:14px 12px 12px}
  .db-scrub{flex-wrap:wrap;gap:10px}
  input[type=range].db-range{flex:1 1 80px;min-width:0}
  .db-viewing{order:3;flex:1 0 100%;justify-content:flex-start;overflow:hidden}
  .bl-val.bl-d{display:none}
}
@media (prefers-reduced-motion:reduce){.kpi,.bl-bar,.db-scrub{transition:none}.chart-now-halo{animation:none;opacity:.2}}

/* On the site right now: the dashboard's faces (components/visitor), a
   ticking time chip, and a row that opens the visitor's journey. */
.v-avatar{--v-hue:200;position:relative;display:inline-grid;place-items:center;flex:none;border-radius:999px;font-weight:700;letter-spacing:-.02em;color:hsl(var(--v-hue) 70% 96%);background:radial-gradient(circle at 30% 25%,hsl(calc(var(--v-hue) + 40) 80% 62%),transparent 70%),linear-gradient(140deg,hsl(var(--v-hue) 62% 38%),hsl(calc(var(--v-hue) + 60) 58% 28%));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14)}
.v-avatar.live::after{content:"";position:absolute;left:-1px;top:-1px;width:28%;height:28%;border-radius:999px;background:var(--up);box-shadow:0 0 0 2px var(--surface);animation:v-pulse 1.8s ease-out infinite}
@keyframes v-pulse{0%{box-shadow:0 0 0 2px var(--surface),0 0 0 2px color-mix(in srgb,var(--up) 60%,transparent)}100%{box-shadow:0 0 0 2px var(--surface),0 0 0 9px transparent}}
.v-mark{display:inline-grid;place-items:center;flex:none;border-radius:9px;background:color-mix(in srgb,var(--v-ring) 12%,var(--surface-2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v-ring) 42%,var(--border));font-weight:750;line-height:1}
.live-view .live-row{display:block;padding:0}
.live-open{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:11px 22px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background .18s ease}
.live-open:hover{background:var(--row)}
.live-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.live-face{position:relative;flex:none;display:inline-flex}
.live-face-src{position:absolute;right:-6px;bottom:-5px;display:inline-flex;border-radius:999px;box-shadow:0 0 0 2px var(--surface)}
.live-face-src .v-mark{border-radius:999px}
.live-side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:38%}
.live-side .live-country{max-width:100%}
.live-ago{padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--text-2);background:var(--sunken);border:1px solid var(--border);white-space:nowrap}
.live-ago.active{color:var(--up);border-color:color-mix(in srgb,var(--up) 40%,var(--border))}
.live-go{flex:none;display:grid;place-items:center;width:0;height:26px;margin-left:-14px;border-radius:999px;border:1px solid var(--border-2);background:var(--surface-2);color:var(--accent);opacity:0;overflow:hidden;transition:width .18s var(--ease),margin .18s var(--ease),opacity .18s ease}
@media (hover:hover){.live-open:hover .live-go{width:26px;margin-left:0;opacity:1}}
.live-open:focus-visible .live-go{width:26px;margin-left:0;opacity:1}

/* The visitor's journey (features/journey), as a card over the board. */
.jr-card{box-sizing:border-box;position:absolute;z-index:9;top:72px;right:clamp(12px,2vw,24px);width:min(400px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;padding:20px;border-radius:18px;border:1px solid var(--border-2);background:var(--surface);box-shadow:0 30px 60px -20px rgba(0,0,0,.55);animation:jrIn .28s var(--ease) both}
@keyframes jrIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
.jr-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:999px;background:transparent;color:var(--text-2);cursor:pointer}
.jr-close:hover{background:var(--sunken);color:var(--text)}
.jr-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jr-ld{min-height:180px}
.jr-card .ld{--accent-soft:var(--glow)}
.jr-who{display:flex;gap:14px;align-items:center;padding-right:32px}
.jr-who-text{display:flex;flex-direction:column;gap:4px;min-width:0}
#demoBoard .jr-who h2{margin:0;font:600 16px 'Geist Mono',monospace;font-size:16px!important;letter-spacing:-.01em;line-height:1.3}
.jr-who-line{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:12.5px;color:var(--text-2)}
.jr-badges{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
.jr-badge{padding:2px 8px;border-radius:999px;border:1px solid var(--border);font-size:11.5px;font-weight:600;color:var(--text-2)}
.jr-badge.returning{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.jr-live{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--up);background:color-mix(in srgb,var(--up) 10%,transparent)}
.jr-live-dot{width:7px;height:7px;border-radius:50%;background:var(--up)}
.jr-visit{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.jr-visit-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.jr-visit-no{font-size:12.5px;font-weight:600;color:var(--text-2)}
.jr-chip{display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;color:var(--text-2)}
.jr-timeline{position:relative;margin:0;padding:0 0 0 18px;list-style:none}
.jr-timeline::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--border)}
.jr-node{position:relative;display:flex;align-items:baseline;gap:10px;padding:6px 0;font-size:13px}
.jr-node .jr-dot{position:absolute;left:-18px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--text-3)}
.jr-node.here .jr-dot,.jr-node.now .jr-dot{box-shadow:inset 0 0 0 2px var(--accent)}
.jr-node.now .jr-dot{background:var(--accent)}
.jr-node.goal .jr-dot{background:var(--accent);box-shadow:none}
.jr-path{flex:1;min-width:0;font-family:'Geist Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jr-when{flex:none;font-size:12px;color:var(--text-3)}
.jr-kind{font-size:12px;font-weight:600;color:var(--text-2)}
.jr-node.goal .jr-kind{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.v-avatar.live::after,.jr-card{animation:none}.live-open,.live-go{transition:none}}
button.pr-tip{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:2px;padding:0;border:1px solid var(--line,currentColor);border-radius:50%;background:none;color:inherit;font:600 10px/1 inherit;cursor:help;vertical-align:1px;opacity:.7}
button.pr-tip:hover,button.pr-tip:focus-visible{opacity:1}

/* A word with a one-line explanation on hover. */
.pr-tip:not(button) {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}
/* the hero while the launch is on: a thin lime line sweeps under the second beat of the headline */
html[data-launch="on"] h1 .h1-beat:last-child{position:relative}
html[data-launch="on"] h1 .h1-beat:last-child::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent) 45%,transparent);background-size:220% 100%;box-shadow:0 0 14px var(--glow);animation:launch-sweep 3.4s ease-in-out infinite}
@keyframes launch-sweep{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){html[data-launch="on"] h1 .h1-beat:last-child::after{animation:none}html[data-launch="on"] h1 .h1-beat:last-child::after{background-position:50% 0}}
.ph-badge{display:flex;min-height:54px;line-height:0}
.ph-badge[hidden]{display:none}
.ph-badge img{display:block;max-width:100%;height:auto}