/* trailback.app in dark (Nov 2026). Loaded after site.css / home.css / blog.css on every public page.
   Apple-style: a black page, each section raised on its own dark panel, near-white headings, soft grey text.
   The app windows in the demos stay in their light look, like product screenshots: "light islands" below
   get the light colours back, so their text never turns white on white. */

:root { color-scheme: dark; }
html, body { background: #000; }

/* ------------------------------------------------------------------ colours (inner pages: site.css tokens) */
:root, body {
  --bg: #000;
  --bg-2: #0b0b0d;
  --ink: #f5f5f7;
  --ink-2: #d2d2d7;
  --ink-3: #98989d;
  --line: rgba(255,255,255,.10);
  --tint: rgba(41,151,255,.14);
  --navy: #0b0b0d;
  --tone-bg: #121214;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -30px rgba(0,0,0,.9);
}

/* ------------------------------------------------------------------ home page tokens (home.css .lc) */
.lc {
  --lc-ink: #f5f5f7;
  --lc-ink-2: #d2d2d7;
  --lc-ink-3: #a1a1a6;
  --lc-muted: #8e8e93;
  --lc-line: rgba(255,255,255,.10);
  --lc-line-2: rgba(255,255,255,.16);
  --lc-paper: #000;
  --lc-blue: #2f80ff;
  --lc-blue-dark: #1a6ae6;
  --lc-blue-light: #6eaaff;
  --lc-navy: #111114;
  --lc-navy-2: #18181c;
  --lc-on-dark: #c7c7cc;
  /* the raised panel every section sits on */
  --dk-panel: linear-gradient(180deg, #17171a 0%, #0e0e10 100%);
  --dk-panel-edge: rgba(255,255,255,.08);
  --dk-card: #1c1c1f;
  --dk-card-2: #232327;
  background: #000;
  color: var(--lc-ink);
}

/* Light islands: demo app windows and desktop scenes keep the light design's colours. */
.lc .lc-win, .lc .dk-light {
  --lc-ink: #10142B; --lc-ink-2: #3F4358; --lc-ink-3: #4A5068; --lc-muted: #5B6178;
  --lc-line: #E3E5EC; --lc-line-2: #D9DCE5; --lc-blue: #2457E6; --lc-blue-dark: #1B44B8;
  color: #10142B;
}
.lc .lc-screen, .lc .lc-z141, .lc .lc-ba, .lc .lc-sc, .lc .lc-z105, .lc .lc-z256, .lc .lc-z262, .lc .lc-z266, .lc .lc-z270 {
  --lc-ink: #10142B; --lc-ink-2: #3F4358; --lc-ink-3: #4A5068; --lc-muted: #5B6178;
  --lc-line: #E3E5EC; --lc-line-2: #D9DCE5; --lc-blue: #2457E6; --lc-blue-dark: #1B44B8;
  color: #10142B;
}

/* ------------------------------------------------------------------ sections: each raised on its own panel */
.lc section.lc-z129:not(#love):not(#privacy):not(#pricing) > .lc-wrap {
  background: var(--dk-panel);
  border: 1px solid var(--dk-panel-edge);
  border-radius: 32px;
  padding: clamp(28px, 4.5vw, 64px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 120px -70px rgba(47,128,255,.45);
  max-width: 1180px;
}
@media (max-width: 760px) {
  .lc section.lc-z129:not(#love):not(#privacy):not(#pricing) > .lc-wrap { border-radius: 24px; padding: 24px 18px; margin-left: 12px; margin-right: 12px; }
}

/* cards: one step lighter than the panel they sit on */
.lc .lc-z95, .lc .lc-z120, .lc .lc-n7c, .lc .lc-z255, .lc .lc-facts-card, .lc .lc-z338, .lc .lc-z303 {
  background: var(--dk-card);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 70px -40px rgba(0,0,0,.9);
}
.lc section.lc-z94 .lc-z95, .lc section.lc-z117 .lc-z120, .lc #in-short .lc-facts-card {
  background: var(--dk-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 120px -70px rgba(47,128,255,.45);
}
.lc .lc-lift:hover { box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.14); }

/* text that had a fixed dark colour */
.lc .lc-ticks, .lc .lc-z201 { color: var(--lc-ink-2); }
.lc-cmp > div { border-top-color: rgba(255,255,255,.08) !important; }
.lc-cmp .lc-tbk { background: rgba(47,128,255,.12) !important; }

/* ------------------------------------------------------------------ buttons (rest · hover · pressed · keyboard) */
.lc .lc-btn, .lc .lc-newPill, .lc .lc-chip, .lc .lc-z111, .nav-in .cta { transition: background-color .18s, border-color .18s, color .18s, transform .12s, box-shadow .18s; }
/* primary: Apple blue */
.lc .lc-z8 { background: #0071e3; color: #fff; box-shadow: 0 14px 30px -14px rgba(0,113,227,.9); }
.lc .lc-z8:hover { background: #0a7cf0; }
.lc .lc-z8:active { background: #0062c4; transform: scale(.98); }
/* secondary: a quiet glass button */
.lc .lc-z9 { background: rgba(255,255,255,.08); color: #f5f5f7; border: 1px solid rgba(255,255,255,.18); }
.lc .lc-z9:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.lc .lc-z9:active { background: rgba(255,255,255,.2); transform: scale(.98); }
.lc .lc-z9 svg path { fill: #f5f5f7; }
/* light buttons on blue and on dark cards */
.lc .lc-z323, .lc .lc-z352, .nav-in .cta { background: #f5f5f7; color: #1d1d1f; }
.lc .lc-z323:hover, .lc .lc-z352:hover, .nav-in .cta:hover { background: #fff; }
.lc .lc-z323:active, .lc .lc-z352:active, .nav-in .cta:active { background: #e3e3e8; transform: scale(.98); }
/* store buttons ("Add to Chrome") */
.lc .lc-z111 { background: #232327; border-color: rgba(255,255,255,.10); color: #f5f5f7; }
.lc .lc-z111:hover { background: #2c2c31; border-color: rgba(255,255,255,.18); }
.lc .lc-z111:active { background: #1c1c1f; transform: scale(.99); }
/* pills and chips */
.lc .lc-newPill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #f5f5f7; }
.lc .lc-newPill:hover { background: rgba(255,255,255,.11); border-color: rgba(110,170,255,.55); }
.lc .lc-newPill:active { background: rgba(255,255,255,.16); }
.lc .lc-newPill svg { color: #4da3ff; }
.lc .lc-chip { background: #1c1c1f; border-color: rgba(255,255,255,.14); color: #f5f5f7; }
.lc .lc-chip:hover { background: #26262a; border-color: rgba(110,170,255,.6); }
.lc .lc-chip:active { background: #2e2e33; }
.lc .lc-chip[aria-pressed="true"] { background: #0071e3; border-color: #0071e3; color: #fff; }
/* hero tabs: a dark segmented control */
.lc .lc-tabs { background: #1c1c1f !important; border: 1px solid rgba(255,255,255,.08); }
.lc .lc-tab { color: #a1a1a6; }
.lc .lc-tab:hover { background: rgba(255,255,255,.08); color: #f5f5f7; }
.lc .lc-tabOn { background: #3a3a40 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.5) !important; }
.lc a:focus-visible, .lc button:focus-visible, .lc .lc-tab:focus-visible { outline: 3px solid #2997ff; outline-offset: 3px; }

/* the sale pill under the hero */
.lc .sale:not(.saleCard) { background: rgba(255,149,0,.14); color: #ffb45e; border: 1px solid rgba(255,149,0,.25); }
.lc .sale:not(.saleCard) b { color: #ffd39c; }

/* ------------------------------------------------------------------ pricing */
.lc .lc-z307 { background: linear-gradient(160deg, #0a6be8 0%, #0750c2 100%); }
.lc .lc-z319 { background: #f5f5f7; }
.lc .lc-z321 { color: #1d1d1f; }
.lc .lc-z320 { background: #e6e6eb; color: #0750c2; }
.lc .lc-z322 { background: #0750c2; }

/* hero tabs while the scenes play by themselves: the moving highlight, in dark */
@keyframes lc-tact { 0%,24.9% { background: #3a3a40; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); } 25%,100% { background: transparent; color: #a1a1a6; box-shadow: none; } }
.lc .lc-z116 { background: #f5f5f7; color: #1d1d1f; }
.lc .lc-new { background: rgba(47,128,255,.18); color: #6eaaff; }

/* ================================================================== inner pages (site.css) */
/* Cards and panels: raised dark surfaces with a hairline edge. */
.steps4 .s, .who .card, .contact-card, .setup-steps-wrap, .rf-card, .rf-steps li, .rf-stat, .fb-card, .compare {
  background: linear-gradient(180deg, #17171a 0%, #111113 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -50px rgba(47,128,255,.35);
  border-color: rgba(255,255,255,.08);
}
.fb-card { transition: transform .2s, box-shadow .2s, background-color .2s; }
.fb-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(110,170,255,.45), 0 30px 80px -40px rgba(47,128,255,.5); transform: translateY(-2px); }
.fb-card:active { transform: translateY(0); }
.fb-card.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 2px #2f80ff; }
.fb-ic, .rf-n { background: rgba(47,128,255,.16); color: #6eaaff; }

/* Buttons */
.btn { background: #0071e3; box-shadow: 0 10px 24px -12px rgba(0,113,227,.9); transition: background-color .18s, transform .12s, box-shadow .18s; }
.btn:hover { background: #0a7cf0; box-shadow: 0 14px 30px -12px rgba(0,113,227,.95); }
.btn:active { background: #0062c4; transform: scale(.98); }
.btn.ghost { background: rgba(255,255,255,.08); color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.btn.ghost:hover { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.btn.ghost:active { background: rgba(255,255,255,.2); }
.btn.white { background: #f5f5f7; color: #1d1d1f; }
.btn.white:hover { background: #fff; }
.btn.white:active { background: #e3e3e8; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #2997ff; outline-offset: 3px; }

/* Forms */
.rf-row input, .rf-linkrow input, .fb-form input, .fb-form textarea, .fb-form select, input.field, textarea, select {
  background: #1c1c1f; color: #f5f5f7; border-color: rgba(255,255,255,.16);
}
.rf-row input:focus, .rf-linkrow input:focus, .fb-form input:focus, .fb-form textarea:focus, .fb-form select:focus { border-color: #2f80ff; outline: none; box-shadow: 0 0 0 3px rgba(47,128,255,.3); }
::placeholder { color: #6e6e73; }

/* Notes, tags and status pills */
.rf-note.ok, .rf-st.available { background: rgba(48,209,88,.14); color: #5fe08a; }
.rf-note.bad, .rf-st.cancelled { background: rgba(255,69,58,.14); color: #ff8a80; }
.rf-paused { background: rgba(255,159,10,.14); color: #ffc46b; }
.rf-st { background: rgba(255,255,255,.08); color: #d2d2d7; }
.rf-st.paid { background: rgba(47,128,255,.16); color: #6eaaff; }
.rf-bar { background: rgba(255,255,255,.1); }
.changelog .cl-new { background: rgba(48,209,88,.14); color: #5fe08a; }
.changelog .cl-improved { background: rgba(47,128,255,.16); color: #6eaaff; }
.changelog .cl-fixed { background: rgba(255,159,10,.14); color: #ffc46b; }

/* Wall of love: filter chips and the picture viewer */
.wl-chip { background: #1c1c1f; color: #d2d2d7; border-color: rgba(255,255,255,.14); }
.wl-chip:hover { background: #26262a; }
.wl-chip.on { background: #f5f5f7; color: #1d1d1f; border-color: #f5f5f7; }
.wl-lb button { background: #f5f5f7; color: #1d1d1f; }

/* Small floating bits */
.cookie, .offer { background: #1c1c1f; color: #f5f5f7; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px -20px rgba(0,0,0,.9); }

/* Footer */
footer.site { background: #000; border-top: 1px solid rgba(255,255,255,.08); }
footer.site .f-badges a { background: #f5f5f7; }

/* ================================================================== blog (blog.css) */
.blog {
  --ink: #f5f5f7; --ink-2: #d2d2d7; --ink-3: #98989d; --line: rgba(255,255,255,.10);
  --bg-2: #161618; --tint: rgba(47,128,255,.14); --navy: #000; --blue: #4da3ff;
}
.blog .bindex { background: radial-gradient(1200px 500px at 50% -10%, rgba(47,128,255,.18) 0%, rgba(0,0,0,0) 70%); }
.blog .card { background: linear-gradient(180deg, #17171a 0%, #111113 100%); border-color: rgba(255,255,255,.09); }
.blog .card:hover { box-shadow: 0 0 0 1px rgba(110,170,255,.4), 0 30px 60px -30px rgba(47,128,255,.45); }
.blog .card img { border-color: rgba(255,255,255,.08); }
.blog .chip { color: #6eaaff; border-color: rgba(47,128,255,.3); }
.blog .chips button { background: #1c1c1f; color: #d2d2d7; border-color: rgba(255,255,255,.14); }
.blog .chips button:hover { background: #26262a; border-color: rgba(110,170,255,.6); color: #f5f5f7; }
.blog .chips button.on { background: #f5f5f7; color: #1d1d1f; border-color: #f5f5f7; }
.blog .faq details { background: #141416; border-color: rgba(255,255,255,.1); }
.blog .prose table, .blog .prose th, .blog .prose td { border-color: rgba(255,255,255,.1); }
.blog .prose th { background: #161618; }
.blog .ctabox { background: linear-gradient(150deg, #101a3a, #0b1230); box-shadow: 0 0 0 1px rgba(110,170,255,.25); }

/* Inner pages: the tinted section bands become raised dark panels, each keeping a hint of its colour. */
section[data-tone] { --tone-bg: #111114; --tone-glow: rgba(47,128,255,.20); }
section[data-tone="lavender"], section[data-tone="lilac"] { --tone-glow: rgba(140,100,255,.22); }
section[data-tone="ice"] { --tone-glow: rgba(40,170,240,.20); }
section[data-tone="navy"] { --tone-bg: #0d0f1a; --tone-glow: rgba(78,99,234,.40); }
section[data-tone]::before { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.08); }

/* The floating menu: dark glass, like Apple's */
.nav-in { background: rgba(28,28,31,.72); box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 12px 32px -12px rgba(0,0,0,.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.blog .btn { background: #0071e3; box-shadow: 0 10px 24px -12px rgba(0,113,227,.9); transition: background-color .18s, transform .12s; }
.blog .btn:hover { background: #0a7cf0; transform: none; }
.blog .btn:active { background: #0062c4; transform: scale(.98); }

/* ================================================================== review pass 2: what a visitor sees */
/* Panels stand clearly off the black page: a lighter surface, a visible edge, a light top rim and a blue glow. */
.lc {
  --dk-panel: linear-gradient(180deg, #1e1e21 0%, #151517 100%);
  --dk-panel-edge: rgba(255,255,255,.11);
  --dk-glow: 0 50px 140px -80px rgba(47,128,255,.6);
  --dk-card: #26262a;
}
.lc section.lc-z129:not(#love):not(#privacy):not(#pricing) > .lc-wrap,
.lc section.lc-z94 .lc-z95, .lc section.lc-z117 .lc-z120, .lc #in-short .lc-facts-card,
.lc .lc-z278, .lc .lc-z344, .lc .lc-z303 {
  background: var(--dk-panel);
  border: 1px solid var(--dk-panel-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--dk-glow);
}
.lc .lc-z303 { background: var(--dk-panel); }
.lc .lc-z304 { background: transparent; }

/* Cards inside a panel: one clear step lighter, brighter edge on hover. */
.lc .lc-n7c, .lc .lc-z255, .lc .lc-z338 { background: var(--dk-card); border-color: rgba(255,255,255,.10); box-shadow: none; }
.lc .lc-n7c:hover, .lc .lc-z255:hover, .lc .lc-z338:hover { border-color: rgba(255,255,255,.2); }
.lc .lc-z111 { background: var(--dk-card); }
.lc .lc-z111:hover { background: #2f2f34; }

/* Privacy: neutral glass pills instead of the old navy. */
.lc .lc-z281, .lc .lc-z286 { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); color: #e5e5ea; }
.lc .lc-z281 svg { stroke: #6eaaff; }

/* Chips that sit inside a light demo card keep the light look. */
.lc .lc-ba .lc-chip { background: #fff; border-color: #D9DCE5; color: #10142B; }
.lc .lc-ba .lc-chip:hover { border-color: #8FB0FF; background: #fff; }
.lc .lc-ba .lc-chip[aria-pressed="true"] { background: #2F6BF6; border-color: #2F6BF6; color: #fff; }

/* The floating menu: a clear glass bar, a quiet "2.7", and the main action in Apple blue (one white button less). */
.nav-in { background: rgba(32,32,36,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 16px 40px -16px rgba(0,0,0,.9); }
.nav-in a.l { color: #d2d2d7; }
.nav-in a.l:hover, .nav-in a.l.on { color: #fff; }
.nav-in .nv { background: rgba(47,128,255,.22); color: #8fc2ff; }
.nav-in .cta { background: #0071e3; color: #fff; }
.nav-in .cta:hover { background: #0a7cf0; }
.nav-in .cta:active { background: #0062c4; transform: scale(.98); }

/* Footer badges: Product Hunt's own dark badge sits straight on the page; the others keep a soft light tile. */
footer.site .f-badges a { background: #e8e8ed; box-shadow: none; }
footer.site .f-badges a.f-b-dark { background: transparent; padding: 0; }
/* The closing panel's button: the same Apple blue as the hero */
.lc .lc-z352 { background: #0071e3; color: #fff; box-shadow: 0 14px 30px -14px rgba(0,113,227,.9); }
.lc .lc-z352:hover { background: #0a7cf0; }
.lc .lc-z352:active { background: #0062c4; transform: scale(.98); }

/* Reviews: the whole section sits on a raised panel, and each post is a lighter card (they were black on black). */
.lc section#love {
  width: min(1180px, calc(100% - 2 * clamp(16px, 3.5vw, 40px)));
  margin: clamp(64px, 7vw, 96px) auto 0;
  padding: clamp(40px, 5vw, 64px) 0;
  background: var(--dk-panel);
  border: 1px solid var(--dk-panel-edge);
  border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--dk-glow);
  overflow: hidden;
}
.tw { background: #26262a; border-color: rgba(255,255,255,.10); box-shadow: none; }
.tw:hover { border-color: rgba(255,255,255,.22); }
.tw-h span { color: rgba(255,255,255,.55); }
/* the Wall of love page: the same cards on the black page get a raised surface too */
.love .tw, .wl-wall .tw { background: #1c1c1f; }

/* Cards inside panels: a clearer step lighter than the panel, not just an outline. */
.lc { --dk-card: #2c2c30; }
.lc .lc-n7c, .lc .lc-z255, .lc .lc-z338, .lc .lc-z111, .tw { background: #2c2c30; }
.lc .lc-z111:hover { background: #35353a; }
/* Wall of love page: each post on its own raised card (they were black on black). */
.wl-card { background: #1c1c1f; border-color: rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 70px -45px rgba(47,128,255,.45); }
.wl-card:hover { border-color: rgba(255,255,255,.2); }
.nav-in .nv { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 5px; margin-left: 4px; text-decoration: none; }

/* Text pages (Privacy, Refund, Changelog): the text sits on one raised panel, like a document. */
main.legal, main.thanks {
  max-width: 820px; margin: 112px auto 64px; padding: clamp(28px, 5vw, 56px);
  background: linear-gradient(180deg, #1e1e21 0%, #151517 100%);
  border: 1px solid rgba(255,255,255,.11); border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 50px 140px -80px rgba(47,128,255,.55);
}
main.legal a { color: #6eaaff; }
@media (max-width: 760px) { main.legal, main.thanks { margin: 80px 12px 40px; border-radius: 22px; } }

/* The footer's closing call to buy: a raised panel with the same blue button. */
footer.site .f-cta {
  margin: 56px 0 8px; padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 48px);
  background: linear-gradient(180deg, #1e1e21 0%, #151517 100%);
  border: 1px solid rgba(255,255,255,.11); border-radius: 28px; border-bottom: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 50px 140px -80px rgba(47,128,255,.55);
}
footer.site .f-cta h2 span { color: #8e8e93; }
footer.site .btn.white { background: #0071e3; color: #fff; box-shadow: 0 10px 24px -12px rgba(0,113,227,.9); }
footer.site .btn.white:hover { background: #0a7cf0; }
footer.site .btn.white:active { background: #0062c4; transform: scale(.98); }

/* Pricing (two-column card) */
.lc .pr { background: var(--dk-panel); border-color: rgba(255,255,255,.11); box-shadow: 0 30px 80px -40px rgba(10,132,255,.45); }
.lc .pr-inc { color: #f5f5f7; }
.lc .pr-inc .pr-label, .lc .pr-al-s { color: #a1a1a6; }
.lc .pr-list svg { color: #30d158; }
.lc .pr-promises { border-top-color: rgba(255,255,255,.1); }
.lc .pr-pm { background: #2c2c30; color: #a1a1a6; }
.lc .pr-pm b, .lc .pr-al-t { color: #f5f5f7; }
.lc .pr-pi { background: rgba(10,132,255,.18); color: #4da3ff; }
.lc .pr-already { background: var(--dk-panel); border-color: rgba(255,255,255,.11); }
.lc .pr-dl .lc-z328 { background: #0071e3; }
.lc .pr-dl .lc-z328:hover { background: #0a7cf0; }
.lc .pr-dl .lc-z328:active { background: #0062c4; transform: scale(.98); }
.lc .qx-kg i, .lc .qx-kg em { color: #a1a1a6; }
.lc .qx-own kbd { background: #1a2a44; border-color: #2b4a7a; box-shadow: 0 3px 0 #22395f; color: #6cb2ff; }
.lc .qx-kg kbd { background: #f5f5f7; color: #1d1d1f; border-color: #d2d2d7; box-shadow: 0 3px 0 #8e8e93; }
.lc .qx-own kbd { background: #1a2a44; border-color: #2b4a7a; box-shadow: 0 3px 0 #22395f; color: #6cb2ff; }
.lc .lc-facts-i { color: #c7c7cc; }

/* Hero background: soft blue/violet glow + a faint dot grid that fades out (dark site only) */
.lc #top { position: relative; isolation: isolate; }
.lc #top::before, .lc #top::after { content: ""; position: absolute; left: 0; right: 0; top: -58px; bottom: 0; z-index: -1; pointer-events: none; }
.lc #top::before {
  background:
    radial-gradient(55% 38% at 50% 4%, rgba(10,132,255,.42), transparent 72%),
    radial-gradient(30% 26% at 16% 18%, rgba(124,92,255,.30), transparent 72%),
    radial-gradient(30% 26% at 84% 22%, rgba(0,190,255,.24), transparent 72%),
    radial-gradient(45% 22% at 50% 58%, rgba(10,132,255,.26), transparent 78%);
  animation: tb-aurora 16s ease-in-out infinite alternate;
}
.lc #top::after {
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 42% at 50% 22%, #000 25%, transparent 78%);
          mask-image: radial-gradient(70% 42% at 50% 22%, #000 25%, transparent 78%);
}
@keyframes tb-aurora { from { transform: translate3d(0,0,0) scale(1); opacity: .9; } to { transform: translate3d(0,14px,0) scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lc #top::before { animation: none; } }

/* ================================================================== Calm dark look (Nov 2026, after vitalsmac.com)
   Charcoal page, no panels or glows: sections sit on the page and are separated by space. One card colour, Apple's
   system font, plain white headings, soft grey text, colour only on buttons and the small numbered labels.
   The white app demos stay white on purpose: they are the bright spots that carry the message. */
:root, body { --bg: #131315; --bg-2: #131315; --tone-bg: #1f1f22; }
html, body, .lc, footer.site { background: #131315 !important; }
.lc { --lc-paper: #131315; --dk-panel: #1f1f22; --dk-panel-edge: rgba(255,255,255,.07); --dk-card: #1f1f22; --dk-glow: none; --sys: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; }
.lc, .nav-in, footer.site, main.legal, main.thanks, .blog { font-family: var(--sys, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif); }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; }

/* headings: system font, semibold, plain white */
.lc .lc-d, .lc h1, .lc h2, .lc h3, main.legal h1, footer.site h2, .blog h1, .blog h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; font-weight: 600; color: #f5f5f7; }
.lc .lc-z3 { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -0.032em; }
.lc .lc-h2, .lc .lc-z97, .lc .lc-z282, .lc .lc-z350 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.026em; font-weight: 600; }
.lc .lc-chap .lc-h2 { font-size: clamp(28px, 2.8vw, 40px); }
.lc .lc-z283, .lc .lc-z351 { color: #f5f5f7; }
.lc .lc-z4 { color: #0a84ff; }            /* "Trailback" in the hero keeps the brand blue */
.lc .lc-z5 { color: inherit; }

/* text */
.lc .lc-z6 { color: #a1a1a6; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; }
.lc .lc-body, .lc .lc-z98, .lc .lc-z119, .lc .lc-z284, .lc .lc-ticks, .lc .lc-z201 { color: #a1a1a6; font-size: 17px; line-height: 1.6; }
.lc .lc-lead { color: #f5f5f7; font-weight: 500; }
.lc .lc-fine, .lc .lc-z10 { color: #8e8e93; }

/* sections: no panels, no glows */
.lc section.lc-z129:not(#love):not(#privacy):not(#pricing) > .lc-wrap,
.lc section.lc-z94 .lc-z95, .lc #in-short .lc-facts-card:not(.keep) {
  background: transparent; border: 0; box-shadow: none; border-radius: 0; padding-left: 0; padding-right: 0;
}
.lc section.lc-z129:not(#love):not(#privacy):not(#pricing) > .lc-wrap { max-width: 1120px; padding-top: 0; padding-bottom: 0; }
.lc section#love { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; width: auto; }
.lc .lc-z278, .lc .lc-z344 { background: transparent; border: 0; box-shadow: none; }
.lc section.lc-z129, .lc section.lc-z94, .lc section.lc-z117, .lc section#love { margin-top: clamp(80px, 9vw, 140px); }

/* one card style */
.lc .lc-z120, .lc .lc-facts-card, .lc .lc-z303, .lc .pr, .lc .pr-already, .lc .lc-n7c, .lc .lc-z255, .lc .lc-z338, .tw, .lc .lc-z111, .lc main details, .lc .lc-z333 details {
  background: #1f1f22; border: 1px solid rgba(255,255,255,.07); box-shadow: none;
}
.lc .lc-z255, .lc .lc-z338, .lc .lc-facts-card, .lc .lc-z120, .lc .pr { border-radius: 28px; }
.lc .lc-z111:hover, .lc .lc-n7c:hover, .lc .lc-z255:hover, .lc .lc-z338:hover, .tw:hover { border-color: rgba(255,255,255,.16); background: #232327; }
.lc .lc-lift:hover { box-shadow: none; transform: translateY(-2px); }
.lc .lc-z281, .lc .lc-z286 { background: #1f1f22; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }

/* hero: no colour glow, only a faint dot grid like a quiet texture */
.lc #top::before { display: none; }
.lc #top::after { background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px); }

/* buttons: Apple's dark-mode blue */
.lc .lc-z8, .nav-in .cta, .lc .lc-z352, .btn, .lc .pr-dl .lc-z328 { background: #0a84ff; box-shadow: none; }
.lc .lc-z8:hover, .nav-in .cta:hover, .lc .lc-z352:hover, .btn:hover, .lc .pr-dl .lc-z328:hover { background: #2a95ff; }
.lc .lc-z9 { background: #1f1f22; border-color: rgba(255,255,255,.12); }

/* numbered labels: "01 — DESCRIBE IT", one colour each */
.lc .nb { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; display: flex; gap: 6px; align-items: center; }
.lc .nb b { font-weight: 700; letter-spacing: .04em; }
.lc .nb i { display: none; }
.lc .nb-blue { color: #0a84ff; } .lc .nb-orange { color: #ff9f0a; } .lc .nb-green { color: #30d158; } .lc .nb-purple { color: #bf5af2; } .lc .nb-pink { color: #ff375f; }

/* pill above the heading */
.lc .lc-pill2 { display: inline-flex; margin: 0 0 22px; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: #d1d1d6; background: #1f1f22; border: 1px solid rgba(255,255,255,.1); }

/* proof under the buttons */
.lc .lc-proof { display: inline-flex; align-items: center; gap: 12px; margin: 22px auto 0; color: #a1a1a6; font-size: 14px; text-decoration: none; }
.lc .lc-proof b { color: #e5e5ea; font-weight: 500; }
.lc .lc-faces { display: inline-flex; }
.lc .lc-faces img, .lc .lc-faces span { width: 30px; height: 30px; border-radius: 50%; margin-left: -8px; border: 2px solid #131315; object-fit: cover; background: #2c2c30; color: #f5f5f7; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.lc .lc-faces > :first-child { margin-left: 0; }
.lc .lc-stars { color: #ffd60a; letter-spacing: 1px; }

/* three short quotes under the demo */
.lc .lc-quotes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 3vw, 40px); max-width: 1000px; margin: clamp(56px, 6vw, 80px) auto 0; }
.lc .lc-q { margin: 0; }
.lc .lc-q blockquote { margin: 0; color: #e5e5ea; font-size: 15.5px; line-height: 1.55; }
.lc .lc-q blockquote::before { content: "“"; display: block; color: #6e6e73; font-size: 28px; line-height: 1; margin-bottom: 6px; }
.lc .lc-q figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: #8e8e93; }
.lc .lc-q figcaption img, .lc .lc-q .av-i { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #2c2c30; display: grid; place-items: center; color: #f5f5f7; font-weight: 600; }
.lc .lc-q figcaption b { display: flex; align-items: center; gap: 4px; color: #e5e5ea; font-weight: 600; }
.lc .lc-q figcaption b svg { width: 14px; height: 14px; fill: #0a84ff; }
.lc .lc-q figcaption i { display: block; font-style: normal; }
.lc .lc-feat { max-width: 760px; margin: clamp(56px, 6vw, 80px) auto 0; text-align: center; }
.lc .lc-feat blockquote { margin: 0; color: #f5f5f7; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.5; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.lc .lc-feat blockquote::before { content: "“"; display: block; color: #6e6e73; font-size: 44px; line-height: 1; margin-bottom: 10px; }
.lc .lc-feat figcaption { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: #8e8e93; text-align: left; }
.lc .lc-feat .av-i { width: 36px; height: 36px; border-radius: 50%; background: #2c2c30; display: grid; place-items: center; color: #f5f5f7; font-weight: 600; }
.lc .lc-feat b { display: block; color: #e5e5ea; font-weight: 600; }
.lc .lc-feat i { display: block; font-style: normal; }
.lc .lc-feats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); max-width: 1040px; margin: clamp(56px, 6vw, 80px) auto 0; }
.lc .lc-feats .lc-feat { margin: 0; max-width: none; display: flex; flex-direction: column; align-items: center; }
.lc .lc-feats .lc-feat blockquote { flex: 1; }
.lc .lc-feats .lc-feat blockquote { font-size: clamp(18px, 1.9vw, 21px); }
@media (max-width: 760px) { .lc .lc-feats { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .lc .lc-quotes { grid-template-columns: 1fr; max-width: 520px; } }

/* pricing: a dark card; the buying side gets only a faint blue tint and a thin blue edge */
.lc .pr-buy { background: linear-gradient(180deg, rgba(10,132,255,.16), rgba(10,132,255,.04)); box-shadow: inset 0 0 0 1px rgba(10,132,255,.35); border-radius: 28px 0 0 28px; color: #f5f5f7; }
.lc .pr-buy .pr-label { color: #0a84ff; }
.lc .pr-was { color: #8e8e93; }
.lc .pr-once, .lc .pr-secure { color: #a1a1a6; }
.lc .pr-secure a { color: #d1d1d6; }
.lc .pr-buy .lc-z318 { color: #a1a1a6; }
.lc .pr-act .lc-z213 { border-color: rgba(255,255,255,.08); }
.lc .pr-cta, .lc .lc-z323 { background: #0a84ff; color: #fff; }
.lc .pr-cta:hover, .lc .lc-z323:hover { background: #2a95ff; }
.lc .lc-z319 { background: #2c2c30; }
.lc .lc-z320 { background: #3a3a3f; color: #f5f5f7; }
.lc .lc-z321 { color: #f5f5f7; }
.lc .lc-z322 { background: #0a84ff; }
.lc .pr-pm { background: #26262a; }
@media (max-width: 860px) { .lc .pr-buy { border-radius: 28px 28px 0 0; } }

/* FAQ: grouped, each question its own soft row */
.lc .faq-g { margin: 26px 0 10px; font-size: 13px; font-weight: 600; color: #8e8e93; }
.lc .faq-g:first-child { margin-top: 0; }
.lc .lc-z333 details { border-radius: 20px; padding: 0 20px; margin-bottom: 10px; border-bottom: 0; }

/* menu and footer */
.nav-in { background: rgba(31,31,34,.78); }
footer.site { border-top-color: rgba(255,255,255,.07); }
footer.site .f-cta { background: #1f1f22; border-color: rgba(255,255,255,.07); box-shadow: none; }
main.legal, main.thanks { background: #1f1f22; border-color: rgba(255,255,255,.07); box-shadow: none; }
.lc .nb { display: inline-flex; }
.lc .lc-proof { display: flex; width: fit-content; margin: 22px auto 0; }
.lc .lc-proof + .sale { margin-top: 14px; }
@media (max-width:600px){.lc .lc-proof{flex-direction:column;gap:8px;text-align:center}.lc .lc-faces>:nth-child(n+6){display:none}}
.nav-in .dd-t { color: #d2d2d7; }
/* Reviews row: soft fade at both ends instead of a hard cut at the screen edge */
.lc .lc-loveWrap { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.lc .lc-loveWrap { -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 5%, #000 16%, #000 84%, rgba(0,0,0,.35) 95%, transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 5%, #000 16%, #000 84%, rgba(0,0,0,.35) 95%, transparent 100%) !important; }
.lc .lc-loveWrap { max-width: 1240px; margin-left: auto; margin-right: auto; overflow: hidden; }

/* Tighter rhythm: section spacing about 18% less than before */
.lc section.lc-z129, .lc section.lc-z94, .lc section.lc-z117, .lc section#love { margin-top: clamp(64px, 7.4vw, 115px); }
.lc .lc-z129 { padding-top: clamp(52px, 5.7vw, 79px); }
@media (max-width: 760px) { .lc section.lc-z129, .lc section.lc-z94, .lc section.lc-z117, .lc section#love { margin-top: 52px; } .lc .lc-z129 { padding-top: 40px; } }

/* Pill above the heading */
.lc .lc-pill2u { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 600; color: #c7c7cc; padding: 7px 16px; }

/* Privacy label sits above the Wi-Fi pill */
.lc .pv-nb { margin: 0 0 16px; }

/* Smaller follow-on sections (Your week, Upcoming dates, Add a background): less weight than the main features */
.lc section.sec-small { margin-top: clamp(32px, 4vw, 56px); padding-top: 0; }
.lc section.sec-small > .lc-wrap { max-width: 980px; }
.lc section.sec-small .lc-chap { gap: clamp(24px, 4vw, 48px); align-items: center; }
.lc section.sec-small .lc-h2 { font-size: clamp(24px, 2.2vw, 30px); }
.lc section.sec-small .lc-ticks { display: none; }
.lc section.sec-small .lc-ba, .lc section.sec-small .lc-win { transform: scale(.88); transform-origin: center; }
@media (max-width: 900px) { .lc section.sec-small .lc-ba, .lc section.sec-small .lc-win { transform: none; } }
.lc #dates .dates-card { max-width: 420px; margin: 0 auto; width: 100%; }

/* The three pillars strip */
.lc .pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 40px; }
.lc .pl-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 28px; background: #1f1f22; border: 1px solid rgba(255,255,255,.07); color: #f5f5f7; text-decoration: none; transition: border-color .18s, background-color .18s, transform .18s; }
.lc .pl-card:hover { border-color: rgba(255,255,255,.16); background: #232327; transform: translateY(-2px); }
.lc .pl-card > b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.lc .pl-card ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.lc .pl-card li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: #c7c7cc; }
.lc .pl-card li svg { flex: none; margin-top: 2px; }
.lc .pl-go { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; }
.lc .pl-n { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lc .pl-blue .pl-n, .lc .pl-blue.pl-n, .lc .pl-blue li svg, .lc .pl-blue .pl-go { color: #0a84ff; }
.lc .pl-orange .pl-n, .lc .pl-orange.pl-n, .lc .pl-orange li svg, .lc .pl-orange .pl-go { color: #ff9f0a; }
.lc .pl-green .pl-n, .lc .pl-green.pl-n, .lc .pl-green li svg, .lc .pl-green .pl-go { color: #30d158; }
@media (max-width: 900px) { .lc .pl-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }

/* Pillar headers: centred title between the groups */
.lc section.pl-h > .lc-wrap { text-align: center; max-width: 760px; padding-top: clamp(24px, 4vw, 56px); border-top: 1px solid rgba(255,255,255,.08) !important; }
.lc section.pl-h .lc-h2 { font-size: clamp(36px, 4vw, 54px); margin-top: 10px; }
.lc section.pl-h .pl-n { margin: 0; }
.lc .nb-green { color: #30d158; }

/* Small tools: five cards, three then two centred */
@media (min-width: 900px) {
  .lc #tools .lc-g3 { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .lc #tools .lc-g3 > * { grid-column: span 2; }
  .lc #tools .lc-g3 > :nth-child(4) { grid-column: 2 / span 2; }
}

/* Menu: Features list grouped by pillar */
.nav-in .dd-m a.dd-g { margin-top: 6px; padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8e8e93; }
.nav-in .dd-m a.dd-g:first-child { margin-top: 0; }
.nav-in .dd-m a:not(.dd-g) { padding: 7px 12px 7px 20px; }
.nav-in .dd-m { max-height: calc(100vh - 90px); overflow: auto; }
.lc section.pl-h + section { margin-top: clamp(20px, 2.5vw, 36px); }
.lc section.pl-h + section.lc-z129 { padding-top: clamp(24px, 3vw, 40px); }
.lc #privacy .pv-nb { margin: 0 0 18px; }

/* ===== One even rhythm between sections (replaces the stacked margins + paddings above) =====
   Every top-level section: no margin, one top padding. Pillar titles get a little more air above,
   and sit close to their first section; the smaller follow-ons sit closer still. */
.lc section.lc-z129, .lc section.lc-z94, .lc section.lc-z117, .lc section#love, .lc section.lc-facts, .lc section.lc-z343 {
  margin-top: 0 !important; padding-top: clamp(56px, 6.6vw, 96px) !important; padding-bottom: 0 !important;
}
.lc section.pl-h { padding-top: clamp(64px, 8vw, 112px) !important; }
.lc section.pl-h + section { padding-top: clamp(28px, 3vw, 40px) !important; }
.lc section.sec-small { padding-top: clamp(32px, 4vw, 48px) !important; }
.lc section.lc-z343 { padding-bottom: clamp(56px, 6.6vw, 96px) !important; }
.lc section.pl-h > .lc-wrap { padding-top: clamp(24px, 3vw, 40px); }
@media (max-width: 760px) {
  .lc section.lc-z129, .lc section.lc-z94, .lc section.lc-z117, .lc section#love, .lc section.lc-facts, .lc section.lc-z343 { padding-top: 56px !important; }
  .lc section.pl-h { padding-top: 64px !important; }
  .lc section.pl-h + section { padding-top: 28px !important; }
  .lc section.sec-small { padding-top: 36px !important; }
}

/* pricing on wide screens: what's included on the left, the buying side on the right (phones keep buy first) */
@media (min-width: 861px) {
  .lc .pr { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .lc .pr-buy { order: 2; border-radius: 0 28px 28px 0; }
  .lc .pr-inc { order: 1; }
}

/* AI apps (MCP) section: a chat that plays three asks */
.lc .dj-link { color: #0a84ff; text-decoration: none; font-weight: 600; }
.lc .dj-link:hover { text-decoration: underline; }
.lc .ai-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 40px; }
@media (max-width: 900px) { .lc .ai-grid { grid-template-columns: 1fr; } }
.lc .ai-win { background: #1c1c1f; border-color: rgba(255,255,255,.10); color: #f5f5f7; }
.lc .ai-pane { display: grid; padding: 18px clamp(14px, 2.4vw, 24px) 22px; min-height: 360px; align-content: start; }
.lc .ai-sc { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; opacity: 0; animation: 27s ease infinite both; }
.lc .ai-s0 { animation-name: ai-s0; } .lc .ai-s1 { animation-name: ai-s1; } .lc .ai-s2 { animation-name: ai-s2; }
.lc .ai-app { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #8e8e93; text-transform: uppercase; }
.lc .ai-dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; }
.lc .ai-q { align-self: flex-end; max-width: 85%; background: #0a84ff; color: #fff; border-radius: 18px 18px 4px 18px; padding: 10px 14px; font-size: 15px; line-height: 1.45; }
.lc .ai-tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #a1a1a6; background: #26262a; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 6px 12px 6px 6px; }
.lc .ai-tl { background: rgba(48,209,88,.16); color: #30d158; font-weight: 700; border-radius: 999px; padding: 3px 9px; font-size: 12px; }
.lc .ai-a { align-self: flex-start; max-width: 92%; background: #26262a; border-radius: 18px 18px 18px 4px; padding: 12px 16px; font-size: 14.5px; line-height: 1.55; color: #e5e5ea; }
.lc .ai-a p { margin: 0; } .lc .ai-a p + p, .lc .ai-a p + ul { margin-top: 8px; }
.lc .ai-a ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.lc .ai-a b { color: #fff; }
.lc .ai-file { display: flex; gap: 10px; align-items: center; background: #1c1c1f; border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.lc .ai-file span span { color: #8e8e93; }
.lc .ai-ft { background: #ff453a; color: #fff; font-weight: 700; font-size: 11px; border-radius: 6px; padding: 5px 6px; }
.lc .ai-pts { display: grid; gap: 18px; }
.lc .ai-pt { display: grid; gap: 4px; padding-left: 16px; border-left: 2px solid rgba(48,209,88,.5); font-size: 15px; line-height: 1.5; color: #a1a1a6; }
.lc .ai-pt b { color: #f5f5f7; font-size: 16px; }
.lc .ai-note { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: #8e8e93; }
@keyframes ai-s0 { 0%, 0.0% { opacity: 0; } 0.8%, 32.1% { opacity: 1; } 33.1%, 100% { opacity: 0; } }
@keyframes ai-q0 { 0%, 2.0% { opacity: 0; transform: translateY(6px); } 4.0%, 32.8% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lc .ai-q0 { animation: ai-q0 27s ease infinite both; }
@keyframes ai-t0 { 0%, 8.0% { opacity: 0; transform: translateY(6px); } 10.0%, 32.8% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lc .ai-t0 { animation: ai-t0 27s ease infinite both; }
@keyframes ai-a0 { 0%, 14.0% { opacity: 0; transform: translateY(6px); } 16.0%, 32.8% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lc .ai-a0 { animation: ai-a0 27s ease infinite both; }
@keyframes ai-s1 { 0%, 33.3% { opacity: 0; } 34.1%, 65.5% { opacity: 1; } 66.5%, 100% { opacity: 0; } }
@keyframes ai-q1 { 0%, 35.3% { opacity: 0; transform: translateY(6px); } 37.3%, 66.2% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lc .ai-q1 { animation: ai-q1 27s ease infinite both; }
@keyframes ai-t1 { 0%, 41.3% { opacity: 0; transform: translateY(6px); } 43.3%, 66.2% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lc .ai-t1 { animation: ai-t1 27s ease infinite both; }
@keyframes ai-a1 { 0%, 47.3% { opacity: 0; transform: translateY(6px); } 49.3%, 66.2% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lc .ai-a1 { animation: ai-a1 27s ease infinite both; }
@keyframes ai-s2 { 0%, 66.7% { opacity: 0; } 67.5%, 98.8% { opacity: 1; } 99.8%, 100% { opacity: 0; } }
@keyframes ai-q2 { 0%, 68.7% { opacity: 0; transform: translateY(6px); } 70.7%, 99.5% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lc .ai-q2 { animation: ai-q2 27s ease infinite both; }
@keyframes ai-t2 { 0%, 74.7% { opacity: 0; transform: translateY(6px); } 76.7%, 99.5% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lc .ai-t2 { animation: ai-t2 27s ease infinite both; }
@keyframes ai-a2 { 0%, 80.7% { opacity: 0; transform: translateY(6px); } 82.7%, 99.5% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lc .ai-a2 { animation: ai-a2 27s ease infinite both; }
@media (prefers-reduced-motion: reduce) {
  .lc .ai-sc, .lc .ai-q0, .lc .ai-t0, .lc .ai-a0, .lc .ai-q1, .lc .ai-t1, .lc .ai-a1, .lc .ai-q2, .lc .ai-t2, .lc .ai-a2 { animation: none; }
  .lc .ai-s0 { opacity: 1; } .lc .ai-s1, .lc .ai-s2 { display: none; }
}
.lc .ai-win .lc-tb { background: #26262a; border-bottom: 1px solid rgba(255,255,255,.08); } .lc .ai-win .lc-z15 { color: #a1a1a6; }