/* Creator Tools — global styles: tokens, base, header, footer. Template and page styles live in template-*.css and page-*.css. */

/* Fonts: Manrope (SIL OFL, from Google Fonts) for text, Oddval SemiBold (the site's own heading font) for headings.
   Named 'CT …' so the prices stylesheet, which declares its own Manrope and Oddval, cannot swap these files out. */
@font-face {
  font-family: 'CT Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'CT Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'CT Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Oddval is split like Manrope (Latin with Polish/Spanish, Cyrillic), without hinting: 27 KB + 9 KB instead of 75 KB. */
@font-face {
  font-family: 'CT Oddval';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/oddval-semibold-latin.woff2') format('woff2');
  unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2264-2265, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'CT Oddval';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/oddval-semibold-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --ink: #190b28;
  --text: #000000;
  --muted: #5f5f66;
  --accent: #04bacb;
  --accent-ink: #00737f;
  --accent-soft: #e6f8f9;
  --line: #c7c7c7;
  --surface: #ffffff;
  --soft: #fafaf7;
  --footer-bg: #190b28;
  --footer-text: #ffffff;
  --radius: 12px;
  --shadow: 0 12px 32px rgba(25, 11, 40, 0.14);
  /* Call to action (the streaming page's look): teal-to-blue gradient, white text. White on every stop passes AA. */
  --cta-bg: linear-gradient(90deg, #00737f 0%, #0b6a8c 65%, #3a6a8c 100%);
  --cta-bg-hover: linear-gradient(90deg, #005f69 0%, #095a78 65%, #2f5878 100%);
  --cta-border: 1px solid rgba(255, 255, 255, 0.35);
  --cta-shadow: 0 10px 28px rgba(2, 147, 168, 0.35);
  /* Dark call-to-action band (the streaming page's final section). */
  --cta-band-bg: linear-gradient(105deg, #3a1a35 0%, #1c1c3d 55%, #10223f 100%);
  --font-text: 'CT Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'CT Oddval', 'CT Manrope', system-ui, sans-serif;
  --wrap: 1250px;
  --gutter: 16px;
  color-scheme: light;
}

/* Links to a place on the page (#features, a chapter list) scroll there smoothly, like "back to top";
   instantly for people who ask for reduced motion. A target keeps a little space above it. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
section[id],
h2[id],
h3[id] {
  scroll-margin-top: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Base element rules carry one extra type selector (html …), so a later reset of plain elements cannot undo them:
 * the prices stylesheet at the end of the body brings Tailwind's reset, and without this the page shifts once it
 * arrives. They stay below every class rule. :not(:where(#app *)) keeps them out of the prices widget, which is built on
 * that reset; :where() adds no specificity.
 */
html body {
  margin: 0;
  font: 400 1rem/1.6 var(--font-text);
  color: var(--ink);
  background: var(--surface);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

html a:not(:where(#app *)) {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Tap targets of at least 44 px (AC-8). */
html a:not(:where(#app *)),
html button:not(:where(#app *)),
html summary:not(:where(#app *)) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

summary {
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 8px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: 8px;
  font-weight: 600;
}
.skip-link:focus {
  top: 8px;
}

/* Dropdown toggles. Named by class so a later reset of plain summary (e.g. a third-party stylesheet) cannot undo them. */
.site-nav__sub > summary,
.lang-switcher > summary {
  display: inline-flex;
  align-items: center;
}

/* Chevron used by dropdowns. */
.site-nav__sub > summary::after,
.lang-switcher > summary::after {
  content: '';
  display: block;
  box-sizing: content-box;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.site-nav__sub[open] > summary::after,
.lang-switcher[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

/* ---------- Buttons (landing pages and the article call to action) ---------- */

.button {
  justify-content: center;
  padding: 10px 28px;
  border-radius: 999px;
  border: var(--cta-border);
  background: var(--cta-bg);
  box-shadow: var(--cta-shadow);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}
.button:hover {
  background: var(--cta-bg-hover);
}

/* Free-trial buttons: the owner's script fills [data-trial-slot]; until then this link is shown. */
.trial-slot {
  display: inline-block;
}
.button--trial {
  min-height: 56px;
  font-size: 1.25rem;
}
.button--wide {
  width: min(100%, 520px);
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid #eeeeee;
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--wrap);
  min-height: 72px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-header__brand {
  flex: none;
  margin-right: auto;
}
.site-header__brand img {
  display: block;
  width: 120px;
}

.site-menu {
  order: 3;
}

.site-menu__toggle {
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--ink);
}
.burger,
.burger::before,
.burger::after {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.burger {
  position: relative;
}
.burger::before,
.burger::after {
  content: '';
  position: absolute;
  left: 0;
}
.burger::before {
  top: -8px;
}
.burger::after {
  top: 8px;
}
.site-menu[open] .burger {
  background: transparent;
}
.site-menu[open] .burger::before {
  transform: translateY(8px) rotate(45deg);
}
.site-menu[open] .burger::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile: the menu opens as a panel under the header bar. */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 8px var(--gutter) 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.site-nav__list,
.site-nav__sub ul,
.lang-switcher__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}

.site-nav a {
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--accent-ink);
}
/* The current page: a soft teal pill (shape as well as colour, so it is not shown by colour alone). */
.site-nav a[aria-current='page'] {
  background: var(--accent-soft);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 115, 127, 0.25);
}
.site-nav__sub ul a[aria-current='page'] {
  border-radius: 8px;
  box-shadow: none;
}
.site-nav__item > a {
  flex: 1;
  padding: 10px 12px;
  margin-left: -12px;
}

.site-nav__sub {
  display: contents;
}
.site-nav__sub > summary {
  justify-content: center;
  width: 44px;
  min-height: 44px;
  color: var(--text);
}
.site-nav__sub ul {
  flex-basis: 100%;
  padding: 0 0 8px 12px;
}
.site-nav__sub ul a {
  display: block;
  width: 100%;
  padding: 10px 0;
  font-weight: 500;
  font-size: 0.9375rem;
}

/* Language switcher (server-rendered, links only to languages the page exists in). */
.lang-switcher {
  position: relative;
  order: 1;
}
.lang-switcher > summary {
  gap: 8px;
  white-space: nowrap;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 1rem;
  color: var(--text);
}
.lang-switcher > summary::after {
  margin: 0;
}
/* Globe before the language name: the usual sign for a language choice. */
.lang-switcher > summary::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lang-switcher[open] > summary {
  background: #e6e6e6;
}
.lang-switcher__list {
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 100%;
  padding: 4px 0;
  background: var(--surface);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow);
}
.lang-switcher__list a {
  width: 100%;
  padding: 0 14px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.lang-switcher__list a:hover {
  background: var(--accent-soft);
}

/* Account (Log in / Register), far right as on the live site. The prices app replaces the link, once signed in, with
   div.profile-btn-des: a button with the initial in a circle that opens the profile panel. The slot stacks the link on
   an invisible copy of it, so it keeps the link's width and nothing in the bar moves when the circle comes in. */
.site-account-slot {
  order: 2;
  flex: none;
  display: grid;
  align-items: center;
  /* The profile circle sits where the button was. */
  justify-items: center;
}
.site-account-slot > * {
  grid-area: 1 / 1;
}
.site-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: #edeec0;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.site-account:hover {
  background: #f6f6dc;
}
.site-account--sizer {
  visibility: hidden;
}
.site-account__icon {
  display: none;
  flex: none;
}
.site-account-slot > .profile-btn-des {
  display: flex;
}
.site-account-slot > .profile-btn-des > button {
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  cursor: pointer;
}

/* Small phones: the account button is the icon alone (the label stays for screen readers), so the logo, account,
   language and menu fit in one row at 320px. */
@media (max-width: 479px) {
  .site-account {
    min-height: 44px;
    padding: 0;
  }
  .site-account__icon {
    display: block;
  }
  .site-account__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 399px) {
  .site-header__bar {
    gap: 4px;
  }
  .site-header__brand img {
    width: 100px;
  }
  .lang-switcher > summary {
    padding: 0 6px;
    gap: 6px;
  }
  .lang-switcher > summary::before {
    display: none;
  }
}

@media (min-width: 960px) {
  .site-header__bar {
    min-height: 90px;
    gap: 24px;
  }
  .site-header__brand {
    margin-right: 0;
  }
  .site-header__brand img {
    width: 188px;
  }

  /* Desktop: the menu is always shown, in the bar. */
  /* The menu follows the logo; language and account sit together on the right, so a change there never moves it. */
  .site-menu {
    order: 0;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    padding-left: 16px;
  }
  .site-menu > .site-menu__toggle {
    display: none;
  }
  .site-menu::details-content {
    content-visibility: visible;
    display: contents;
  }
  .site-nav {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    box-shadow: none;
    background: none;
  }
  .site-nav__list {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .site-nav__item {
    position: relative;
    flex-wrap: nowrap;
    border: 0;
  }
  .site-nav__item > a {
    flex: none;
    padding: 8px 14px;
    margin-left: 0;
  }
  .site-nav__sub {
    display: block;
  }
  .site-nav__sub > summary {
    width: 28px;
    min-width: 28px;
    min-height: 44px;
  }
  .site-nav__sub ul {
    position: absolute;
    left: -16px;
    top: calc(100% + 6px);
    min-width: 260px;
    padding: 10px 0;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .site-nav__sub ul a {
    padding: 8px 18px;
  }
  .site-nav__sub ul a:hover {
    background: var(--accent-soft);
  }

  .lang-switcher > summary {
    padding: 0 12px;
  }
}

/* ---------- Page templates ---------- */

main {
  display: block;
  max-width: 820px;
  margin: 0 auto;
  padding: 32px var(--gutter) 64px;
}
.template-page main {
  max-width: var(--wrap);
}

html h1:not(:where(#app *)),
html h2:not(:where(#app *)),
html h3:not(:where(#app *)) {
  color: var(--ink);
  text-wrap: balance;
}
html h1:not(:where(#app *)),
html h2:not(:where(#app *)) {
  font-family: var(--font-head);
  font-weight: 700;
}
html h1:not(:where(#app *)) {
  font-size: clamp(2.125rem, 1.4rem + 3.4vw, 3.125rem);
  line-height: 1.1;
  margin: 0.4em 0 0.5em;
}
html h2:not(:where(#app *)) {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  margin: 1.6em 0 0.5em;
}
html h3:not(:where(#app *)) {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 1.4em 0 0.4em;
}

main p,
main li {
  font-size: 1.0625rem;
}
main ul,
main ol {
  padding-left: 1.25em;
}
main img {
  border-radius: var(--radius);
}

/* ---------- Article card (More articles, article lists, home blog) ---------- */

.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  list-style: none;
}
.article-card__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.article-card__media--empty {
  background: linear-gradient(135deg, var(--accent-soft), #cdecef);
}
.article-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.125rem;
  line-height: 1.3;
}
.article-card__title a {
  color: var(--ink);
  text-decoration: none;
}
/* The title link covers the whole card, so the card has one link and one large click area. */
.article-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.article-card__title a:focus-visible {
  outline: none;
}
.article-card__title a:focus-visible::after {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
}
.article-card:hover .article-card__title a {
  color: var(--accent-ink);
  text-decoration: underline;
}
.article-card__text {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Back to top ----------
   The selector carries an extra `html`, so a later reset of button backgrounds (the prices stylesheet brings one) cannot undo it. */

html .to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.to-top.is-visible {
  opacity: 1;
  transform: none;
}
html .to-top:hover {
  background: var(--accent-ink);
}
.to-top:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
}
@media (min-width: 960px) {
  .to-top {
    right: 24px;
    bottom: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
    transform: none;
  }
}
@media print {
  .to-top {
    display: none;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--accent);
  font-size: 0.875rem;
  line-height: 1.6;
}

.site-footer a {
  color: var(--footer-text);
  font-weight: 500;
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--accent);
}

.site-footer__inner {
  display: grid;
  gap: 32px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 48px var(--gutter) 32px;
}

.site-footer__brand img {
  display: block;
  width: 190px;
}
.site-footer__tagline {
  margin: 16px 0;
}

.site-footer__social {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__social a {
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.site-footer__social img {
  width: 32px;
  height: 32px;
}

.site-footer__nav {
  display: grid;
  gap: 24px;
}
.site-footer__title {
  margin: 0 0 4px;
  font: 700 0.875rem/1.6 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--footer-text);
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__copy {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px var(--gutter) 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 500;
}

@media (min-width: 720px) {
  :root {
    --gutter: 24px;
  }
  .site-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  :root {
    --gutter: 40px;
  }
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 48px;
    padding-top: 64px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Cookie banner (consent.css, now at /assets/files/consent/consent.css) ---------- */
/* Its grey text and turquoise link fall short of WCAG AA contrast on white; body raises the specificity,
   because consent.css loads after this file. */
body .ct-consent-description,
body .ct-category-desc,
body .ct-consent-btn-decline {
  color: var(--muted);
}
body .ct-consent-description a {
  color: var(--accent-ink);
}