/* LitArbi — the unslopped look (29 Oct 2026, Leo: "unslop the website too", after the Paylio landing page).
   Loaded after styles.css and live.css only when build/scripts/site/design.py has LIVE = True.
   One-colour headlines, a quiet outlined badge, black pill buttons beside outlined ones, the product on a soft drawn sky
   (no photo), grey labels instead of bright blue capitals, the features as tabs, no purple glows. Inter stays. */

:root {
  --sky-1: #7aaedc; --sky-2: #a6c8ea; --sky-3: #d9e8f6; --sky-line: rgba(255, 255, 255, .22);
  --ink-btn: #111113; --ink-btn-hover: #2c2c30; --ink-btn-text: #ffffff;
}
.dark {
  --sky-1: #0e2644; --sky-2: #16365c; --sky-3: #18283c; --sky-line: rgba(255, 255, 255, .07);
  --ink-btn: #f5f5f7; --ink-btn-hover: #ffffff; --ink-btn-text: #0a0a0c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-1: #0e2644; --sky-2: #16365c; --sky-3: #18283c; --sky-line: rgba(255, 255, 255, .07);
    --ink-btn: #f5f5f7; --ink-btn-hover: #ffffff; --ink-btn-text: #0a0a0c;
  }
}

/* ---------- headlines: one colour, a touch lighter ---------- */
.hero__title { font-weight: 600; letter-spacing: -0.035em; max-width: 19ch; }
.hero__title-soft { color: inherit; }
.section__title { font-weight: 600; letter-spacing: -0.03em; }
.hero__sub { max-width: 40rem; }

/* ---------- the badge above the headline: outlined, no pulsing dot ---------- */
.eyebrow-pill { background: var(--surface); color: var(--foreground); border: 1px solid var(--border); font-weight: 500; padding: .45rem 1rem; }
.eyebrow-pill .pulse-dot { display: none; }
.eyebrow-pill__opt { color: var(--muted-foreground); }

/* ---------- labels: small and grey, never bright blue; on the home page the headings stand alone ---------- */
.eyebrow { color: var(--muted-foreground); letter-spacing: .08em; font-size: .72rem; font-weight: 600; }
.features__head .eyebrow, .audience__head .eyebrow, .business__head .eyebrow, .faq-home .eyebrow, .pricing-sec .eyebrow { display: none; }
.film-sec .features__head, .features__head--center { margin-inline: auto; text-align: center; max-width: 46rem; }
.film-sec .section__title, .features__head--center .section__title { margin-inline: auto; }
.film-sec .section__lede, .features__head--center .section__lede { margin-inline: auto; }

/* ---------- buttons: black pills, outlined secondaries ---------- */
.btn--primary { background: var(--ink-btn); color: var(--ink-btn-text); border-radius: 999px; box-shadow: none; }
.btn--primary:hover { background: var(--ink-btn-hover); color: var(--ink-btn-text); }
.btn--quiet { border-radius: 999px; box-shadow: none; }
.btn--quiet:hover { border-color: var(--foreground); color: var(--foreground); }
.beta-form__input { border-radius: 999px; }
.hero-tour a { padding: .7rem 1.35rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--foreground); font-weight: 500; }
.hero-tour a:hover { border-color: var(--foreground); text-decoration: none; }
.hero-tour a svg { display: none; }

/* ---------- the sky behind the live demo: clear blue, two faint arcs, melting into the page ---------- */
.hero-stage__sky,
.dark .hero-stage__sky {
  height: 80%;
  background:
    radial-gradient(circle at 12% 118%, transparent 0 22rem, var(--sky-line) 22rem calc(22rem + 1px), transparent calc(22rem + 2px)),
    radial-gradient(circle at 92% -30%, transparent 0 30rem, var(--sky-line) 30rem calc(30rem + 1px), transparent calc(30rem + 2px)),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 40%, var(--sky-3) 74%, var(--background) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-stage__sky {
    background:
      radial-gradient(circle at 12% 118%, transparent 0 22rem, var(--sky-line) 22rem calc(22rem + 1px), transparent calc(22rem + 2px)),
      radial-gradient(circle at 92% -30%, transparent 0 30rem, var(--sky-line) 30rem calc(30rem + 1px), transparent calc(30rem + 2px)),
      linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 40%, var(--sky-3) 74%, var(--background) 100%);
  }
}
.hero-stage__sky::after { background: none; }

/* the two "try it" switches: plain white pills, the chosen one outlined in ink; a small green dot for "live" */
.lp__big { min-width: 0; padding: .5rem 1.25rem .5rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(0, 0, 0, .06); box-shadow: none; }
.dark .lp__big { background: rgba(22, 22, 24, .86); border-color: rgba(255, 255, 255, .1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp__big { background: rgba(22, 22, 24, .86); border-color: rgba(255, 255, 255, .1); } }
.lp__big:hover { transform: none; }
.lp__big b { font-size: 1rem; font-weight: 600; }
.lp__big small { font-size: .85rem; }
.lp__big-ico { width: 2.4rem; height: 2.4rem; border-radius: 999px; }
.lp__big[aria-selected="true"] { border-color: var(--foreground); box-shadow: none; }
.lp__big[aria-selected="true"] b { color: var(--foreground); }
.lp__big[aria-selected="true"] .lp__big-ico { background: var(--foreground); color: var(--background); }
.lp__dot { background: #34c759; }
.lw-live { background: #1d1d1f; }

/* ---------- the features as tabs, each picture on a small sky ---------- */
.ftabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.75rem; max-width: 64rem; margin: 0 auto clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--border); }
.ftabs__tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .8rem .1rem;
  font: inherit; font-size: .95rem; color: var(--muted-foreground); cursor: pointer; }
.ftabs__tab:hover { color: var(--foreground); }
.ftabs__tab[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--foreground); font-weight: 600; }
.ftabs__tab:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
.ftabs__panel { display: grid; gap: 2rem; align-items: center; }
.ftabs__panel[hidden] { display: none; }
@media (min-width: 900px) { .ftabs__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; } }
.ftabs__title { margin: 0 0 1rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.ftabs__lede { margin: 0 0 1.25rem; color: var(--muted-foreground); font-size: 1.0625rem; line-height: 1.65; }
.ftabs__more { font-weight: 600; color: var(--foreground); }
.ftabs__pic { overflow: hidden; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: clamp(18px, 2.4vw, 28px);
  background:
    radial-gradient(circle at 10% 120%, transparent 0 14rem, var(--sky-line) 14rem calc(14rem + 1px), transparent calc(14rem + 2px)),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%); }
.ftabs__pic .shot-img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 24px 48px -24px rgba(16, 32, 64, .45); }

/* ---------- quieter surfaces: no purple glows, flatter cards ---------- */
.pricing-sec { background: none; }
.price-card { box-shadow: none; }
.story { --story-bg: linear-gradient(180deg, #0e2644 0%, #16365c 60%, #18283c 100%); }
.cta__block { border: 0; box-shadow: none; color: #0b1320;
  background:
    radial-gradient(circle at 88% 130%, transparent 0 18rem, rgba(255, 255, 255, .25) 18rem calc(18rem + 1px), transparent calc(18rem + 2px)),
    linear-gradient(180deg, #7aaedc 0%, #a6c8ea 55%, #d9e8f6 100%); }
.cta__sub { color: rgba(11, 19, 32, .72); }
.cta__btn { background: #111113; color: #ffffff; border-radius: 999px; }
.cta__btn:hover { background: #2c2c30; color: #ffffff; }

/* ---------- a tighter rhythm (Leo, 29 Oct: "not so much spacing") — about half the old gaps between sections ---------- */
.section { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.hero { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.eyebrow-pill { margin-bottom: 1.25rem; }
.hero .beta { margin-top: 1.75rem; }
.hero .beta-form__helper { margin-top: .6rem; }
.hero-tour { margin-top: 1rem; }
.hero-stage { padding-top: clamp(1.5rem, 3.5vw, 2.5rem); }
.features__head { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.ftabs__list { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.section.ph.ph-top { padding-top: clamp(7rem, 13vw, 11rem) !important; }   /* beats the photo block's own rule, which comes later in the page */
.business__head { margin-bottom: 1.75rem; }
/* sections on the same ground run into each other: one gap, not two */
.pricing-sec + .faq, .faq + .cta { padding-top: 0; }

/* ---------- the hero on wide screens (Leo, 29 Oct: the two columns were "fugly"): centred, as on the Paylio page — the
   headline one sentence per line, the text under it, then ONE row: the email field with its button, and the film beside it;
   the small print and the licence links one quiet line each underneath. .beta and the form step aside (display: contents) so
   the film can join the form's row; [hidden] still wins, it is !important in styles.css ---------- */
@media (min-width: 960px) {
  .hero > .container--narrow { max-width: 64rem; display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: .75rem; }   /* the outer tracks take what a long headline needs, the two middle ones stay as wide as the row */
  .hero .beta, .hero .beta-form { display: contents; }
  .hero > .container--narrow > *, .hero .beta > *, .hero .beta-form > * { grid-column: 1 / -1; }
  .hero .eyebrow-pill { justify-self: center; }
  .hero__title { max-width: none; margin: 0 auto 1.25rem; font-size: clamp(2.6rem, 5vw, 4.25rem); }
  .hero__title-soft { display: block; }
  .hero__sub { max-width: 42rem; margin: 0 auto; font-size: 1.125rem; line-height: 1.6; }
  .hero .beta-form__row { grid-column: 2; grid-row: 4; width: 30rem; margin-top: 2rem; }
  .hero .hero-tour { grid-column: 3; grid-row: 4; margin: 2rem 0 0; display: flex; }
  .hero-tour a { padding-block: 0; }
  .hero .beta:has(> .beta-success:not([hidden])) ~ .hero-tour { grid-column: 1 / -1; grid-row: auto; justify-content: center; margin-top: 1.25rem; }
  .hero .beta:has(> .beta-success:not([hidden])) ~ .hero-tour a { padding-block: .7rem; }
  .hero .beta-success { margin-top: 2rem; }
  .hero #beta-helper { margin-top: .9rem; }
  .hero .dl-gate__links { margin-top: .35rem; font-size: .8125rem; gap: .3rem 1.5rem; }
  .hero .dl-gate__links a { color: var(--foreground); font-weight: 500; }
  .hero .dl-gate__sep { display: none; }
}

/* ---------- the Microsoft Marketplace badge: big enough to read (Leo, 29 Oct: "too small") ---------- */
.mp-badge img { height: 64px; width: auto; }

/* ---------- footer: smaller type, the long product list in two columns ---------- */
.site-footer { padding-block: 2.75rem 2rem; }
.footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.footer__heading { font-size: .72rem; margin-bottom: .85rem; }
.footer__col ul { gap: .45rem; }
.footer__col a { font-size: .875rem; }
.footer__grid > .footer__col:nth-child(2) ul { display: block; columns: 2; column-gap: 2rem; }
.footer__grid > .footer__col:nth-child(2) li { break-inside: avoid; margin-bottom: .45rem; }
.footer__tagline { font-size: .8125rem; }
.footer__badges { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }   /* PeerPush + Product Hunt (3 Nov 2026) */
.footer__badges img { display: block; width: 230px; max-width: 100%; height: auto; }
.footer__bottom { margin-top: 2rem; padding-top: 1.25rem; }
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > .footer__col:nth-child(2) { grid-column: 1 / -1; }
}

/* phones: the tabs as one row that scrolls sideways, not three wrapped lines */
@media (max-width: 640px) {
  .ftabs__list { flex-wrap: nowrap; justify-content: flex-start; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ftabs__list::-webkit-scrollbar { display: none; }
  .ftabs__tab { white-space: nowrap; flex: none; }
}

/* Russian and Ukrainian headlines run long: a size smaller, so they take three lines, not four */
@media (min-width: 960px) {
  :lang(ru) .hero__title, :lang(uk) .hero__title { font-size: clamp(2.4rem, 4vw, 3.25rem); }
}