.sc-placeholder {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: 2px;
  box-sizing: border-box;
  overflow: hidden;
}
@keyframes sc-shine {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
html.sc-dc-streaming .sc-placeholder,
html.sc-dc-streaming .sc-interp.sc-missing {
  position: relative;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border-color: transparent;
}
html.sc-dc-streaming .sc-placeholder::before,
html.sc-dc-streaming .sc-interp.sc-missing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(217, 119, 87, 0) 25%,
    rgba(247, 225, 211, 0.95) 37%,
    rgba(217, 119, 87, 0) 63%
  );
  background-size: 400% 100%;
  animation: sc-shine 1.4s ease infinite;
}
html.sc-dc-streaming
  .sc-placeholder:nth-child(n + 9 of .sc-placeholder)::before,
html.sc-dc-streaming
  .sc-interp.sc-missing:nth-child(n + 9 of .sc-interp.sc-missing)::before {
  animation: none;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.sc-placeholder-error {
  padding: 4px 8px;
  font:
    11px/1.4 ui-monospace,
    monospace;
  color: color-mix(in srgb, currentColor 70%, transparent);
  word-break: break-word;
}
.sc-interp.sc-missing {
  display: inline-block;
  width: 2em;
  height: 1em;
  overflow: hidden;
  vertical-align: text-bottom;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  box-sizing: border-box;
  color: transparent;
  user-select: none;
}
.sc-interp.sc-unresolved {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  color: color-mix(in srgb, currentColor 50%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 3px;
  padding: 0 3px;
}
.sc-host.sc-has-error {
  position: relative;
}
.sc-logic-error {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2147483647;
  max-width: 60ch;
  padding: 6px 10px;
  background: #b00020;
  color: #fff;
  font:
    12px/1.4 ui-monospace,
    monospace;
  border-radius: 4px;
  white-space: pre-wrap;
  pointer-events: none;
}
/* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
@media print {
  @page {
    margin: 0.5cm;
  }
  figure,
  table {
    break-inside: avoid;
  }
  #dc-root,
  #dc-root > .sc-host {
    height: auto;
  }
  *,
  *::before,
  *::after {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation-delay: -99s !important;
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;
    transition-duration: 0s !important;
  }
}

x-dc {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
}
#dc-root,
#dc-root > .sc-host {
  height: 100%;
}

/* ===========================================================================
   Tgpaybot — Color tokens
   Sourced from the live site CSS (starlight_main.css, global.css) and the
   brand logo. Light surface, warm gold accent (dark golden), neutral ink.
   =========================================================================== */
:root {
  /* ---- Brand ------------------------------------------------------------ */
  --brand-yellow: #1558c8; /* 2026-09-06: brand is cobalt now (kept name — role pages reference it) */
  --brand-yellow-bright: #1558c8; /* theme-color, marketing glow */
  --brand-orange: #1558c8; /* primary action accent (legacy name, cobalt) */
  --brand-orange-hover: #0f47a8; /* hover accent */
  --brand-orange-soft: #e6c074; /* accent-high tint */
  --brand-orange-deep: #4a3500; /* accent-low / pressed shadow */
  --telegram-ink: #444444; /* Telegram badge body in the logo */

  /* ---- Neutral ink scale ------------------------------------------------ */
  --neutral-0: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #f6f6f6;
  --neutral-200: #eeeeee;
  --neutral-300: #c2c2c2;
  --neutral-400: #8b8b8b;
  --neutral-500: #585858;
  --neutral-600: #404040;
  --neutral-700: #383838;
  --neutral-800: #272727;
  --neutral-900: #181818;
  --neutral-950: #0a0a0a;

  /* ---- Accent ramp (yellow→dark golden) -------------------------------- */
  --amber-100: #fef3c7;
  --amber-200: #fde58a;
  --amber-300: #fcd34d;
  --amber-400: #facc15;
  --amber-500: #f1ad02;
  --orange-300: #e8c97a;
  --orange-400: #dcb44a;
  --orange-500: #d4a017;
  --orange-600: #b8860b;
  --orange-700: #8a6308;

  /* ---- Status ----------------------------------------------------------- */
  --success: #0f8a4d;
  --success-soft: #dcf3e5;
  --danger: #e5484d;
  --danger-soft: #fdeced;
  --info: #2b8aef;
  --info-soft: #e8f2fd;

  /* ---- Semantic: text --------------------------------------------------- */
  --color-text: #232326; /* default body ink */
  --color-text-strong: #0c0c0d; /* headings */
  --color-text-muted: #6b6b71; /* secondary copy */
  --color-text-subtle: #9c9ca3; /* captions, meta */
  --color-text-inverse: #ffffff; /* on dark / on accent */
  --color-text-accent: #33415c; /* links, emphasis (prototype gold-ink → navy) */

  /* ---- Semantic: surface ------------------------------------------------ */
  --color-surface: #ffffff; /* cards, raised panels */
  --color-surface-subtle: #ffffff; /* white bands on the grey page (rev3 rhythm) */
  --color-surface-sunken: #e9e9ec;
  --color-surface-page: #f1f1f3; /* page base (under the glow) */
  --color-surface-inverse: #0c0c0d;
  --color-surface-glass: rgba(255, 255, 255, 0.78); /* header backdrop */

  /* ---- Semantic: border ------------------------------------------------- */
  --color-border: #e0e0e3;
  --color-border-strong: #cacacf;
  --color-border-accent: rgba(255, 255, 255, 0.7); /* glass hairline */

  /* ---- Semantic: accent / action --------------------------------------- */
  --color-accent: #1558c8;
  --color-accent-hover: #0f47a8;
  --color-accent-soft: #e6edfd; /* tinted accent surface — pale cobalt */
  --color-accent-contrast: #ffffff;
  --color-focus-ring: rgba(21, 88, 200, 0.4);

  /* ---- Marketing glow (the soft page wash; cobalt since 2026-09-06 — the
     --yellow-* names stay because the role pages reference them inline) --- */
  --yellow-hsl: 218.5, 81%, 43.7%; /* @kind other */
  --overlay-yellow: hsla(var(--yellow-hsl), 0.12);
  --bg-page-glow:
    linear-gradient(215deg, var(--overlay-yellow), transparent 40%),
    radial-gradient(var(--overlay-yellow), transparent 40%) no-repeat center
      center / cover,
    radial-gradient(var(--overlay-yellow), transparent 65%) no-repeat center
      center / cover;
}

/* ===========================================================================
   Tgpaybot — Typography tokens
   The product ships no webfont: the site renders in the platform UI sans
   (Tailwind's default stack). The "tgpaybot" wordmark is a bespoke geometric
   logotype delivered as SVG (assets/logo/), NOT a body typeface — do not try
   to set text in it. Headings are tight, heavy and near-black.
   =========================================================================== */
:root {
  /* ---- Families --------------------------------------------------------- */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    monospace;
  --font-display: var(--font-sans); /* same family, heavier weight + tighter */

  /* ---- Weights ---------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Type scale (1.250 major-third-ish, px in rem) -------------------- */
  --text-xs: 0.75rem; /* 12 — legal, badges */
  --text-sm: 0.875rem; /* 14 — meta, captions */
  --text-base: 1rem; /* 16 — body */
  --text-lg: 1.125rem; /* 18 — lead body */
  --text-xl: 1.25rem; /* 20 — card titles */
  --text-2xl: 1.5rem; /* 24 — sub-headings */
  --text-3xl: 1.875rem; /* 30 — section H3 */
  --text-4xl: 2.25rem; /* 36 — section H2 */
  --text-5xl: 3rem; /* 48 — page H1 */
  --text-6xl: 3.75rem; /* 60 — hero */
  --text-7xl: 4.5rem; /* 72 — display hero */

  /* ---- Line heights ----------------------------------------------------- */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing --------------------------------------------------- */
  --tracking-tighter: -0.03em; /* hero display */
  --tracking-tight: -0.02em; /* headings */
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em; /* eyebrow / overline uppercase */

  /* ---- Semantic roles --------------------------------------------------- */
  --font-eyebrow-size: var(--text-sm);
  --font-eyebrow-weight: var(--weight-semibold);
  --font-h1-size: var(--text-5xl);
  --font-h1-weight: var(--weight-extrabold);
  --font-h2-size: var(--text-4xl);
  --font-h2-weight: var(--weight-bold);
  --font-body-size: var(--text-base);
  --font-body-weight: var(--weight-regular);
}

/* ===========================================================================
   Tgpaybot — Spacing & layout tokens
   4px base grid. Generous section rhythm (the landing breathes — large
   vertical gaps between sections, roomy card padding).
   =========================================================================== */
:root {
  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */
  --space-20: 5rem; /* 80 */
  --space-24: 6rem; /* 96 */
  --space-32: 8rem; /* 128 */

  /* ---- Semantic spacing ------------------------------------------------- */
  --gap-card: var(--space-6); /* inner card padding (24) */
  --gap-card-lg: var(--space-8); /* roomy card padding (32) */
  --gap-section-y: var(--space-24); /* between page sections (96) */
  --gap-stack: var(--space-4); /* default vertical rhythm */
  --gap-inline: var(--space-3); /* between inline chips/buttons */

  /* ---- Layout widths ---------------------------------------------------- */
  --container-max: 1536px; /* matches site max-w-screen-2xl header */
  --container-content: 1280px;
  --container-narrow: 768px;
  --measure: 68ch; /* prose line length */
  --page-gutter: var(--space-8); /* horizontal page padding (32) */

  /* ---- Component sizing ------------------------------------------------- */
  --control-height-sm: 2.25rem; /* 36 */
  --control-height-md: 2.75rem; /* 44 — default tap target */
  --control-height-lg: 3.25rem; /* 52 — hero CTA */
  --header-height: 4.5rem; /* 72 — glass nav pill */
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
}

/* ===========================================================================
   Tgpaybot — Radius & elevation tokens
   Rounded, friendly geometry: pill buttons, soft 24px cards, a 36px glass
   nav pill. Shadows are low-contrast and warm-neutral — never harsh.
   =========================================================================== */
:root {
  /* ---- Corner radius ---------------------------------------------------- */
  --radius-xs: 0.375rem; /* 6 — chips, inputs inside dense UI */
  --radius-sm: 0.5rem; /* 8 — small controls */
  --radius-md: 0.75rem; /* 12 — inputs, badges */
  --radius-lg: 1rem; /* 16 — buttons (rectangular), tiles */
  --radius-xl: 1.25rem; /* 20 — media tiles */
  --radius-2xl: 1.5rem; /* 24 — default card */
  --radius-3xl: 2rem; /* 32 — feature panels */
  --radius-pill: 9999px; /* fully rounded — buttons, badges, avatars */
  --radius-nav: 2.25rem; /* 36 — the glass header pill */

  /* ---- Elevation (soft, neutral) ---------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(24, 24, 24, 0.06);
  --shadow-sm:
    0 1px 3px rgba(24, 24, 24, 0.08), 0 1px 2px rgba(24, 24, 24, 0.04);
  --shadow-md: 0 6px 16px rgba(24, 24, 24, 0.08);
  --shadow-lg: 0 14px 34px rgba(24, 24, 24, 0.1);
  --shadow-xl: 0 26px 60px rgba(24, 24, 24, 0.12);

  /* ---- Warm glows (CTAs, brand moments) --------------------------------- */
  --shadow-glow-yellow: 0 10px 40px hsla(47.9, 95.8%, 53.1%, 0.3);
  --shadow-glow-orange: 0 12px 36px rgba(184, 134, 11, 0.3);
  --shadow-card: var(--shadow-md);
  --shadow-card-hover: var(--shadow-lg);

  /* ---- Focus ring ------------------------------------------------------- */
  --ring-width: 3px;
  --ring-color: var(--color-focus-ring);
  --ring-offset: 2px;

  /* ---- Glass / blur ----------------------------------------------------- */
  --blur-glass: 12px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 300ms; /* @kind other */
  --duration-slow: 500ms; /* @kind other */
}

/* ===========================================================================
   Tgpaybot — Base layer
   Minimal reset + applies the token system to document defaults. Imported
   last from styles.css so tokens are available.
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--color-border);
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-surface-page);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
}
button:not(:disabled),
[role="button"]:not(:disabled) {
  cursor: pointer;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: var(--ring-offset);
}

/* The signature soft yellow page wash. Apply to a full-bleed wrapper that
   sits behind page content (position the content above it). */
.tg-page-glow {
  background: var(--bg-page-glow);
  background-blend-mode: overlay;
}

/* Eyebrow / overline label used above section headings. */
.tg-eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--color-surface-page);
  font-family: var(--font-sans);
  color: var(--color-text);
}
h1,
h2,
h3 {
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: var(--gold-ink);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}
.tgp-hero > *,
.tgp-split > * {
  min-width: 0;
}
@media (max-width: 1120px) {
  .tgp-nav-links {
    display: none !important;
  }
}
@media (max-width: 1100px) {
  .tgp-g4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgp-g3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tgp-g2 {
    grid-template-columns: 1fr !important;
  }
  .tgp-hero,
  .tgp-split {
    grid-template-columns: 1fr !important;
    gap: var(--space-12) !important;
  }
}
@media (max-width: 1100px) {
  .tgp-split-text {
    align-items: center !important;
    text-align: center;
  }
  .tgp-split-text ul {
    width: 100%;
    max-width: 520px;
    text-align: left;
  }
  .tgp-split-text .tgp-block {
    width: 100%;
    text-align: left;
  }
}
@media (max-width: 760px) {
  .tgp-g4,
  .tgp-g3,
  .tgp-footer {
    grid-template-columns: 1fr !important;
  }
  .tgp-hero h1 {
    font-size: var(--text-4xl) !important;
  }
  .tgp-fee-row {
    grid-template-columns: 1fr !important;
  }
  .tgp-facts {
    grid-template-columns: 1fr !important;
  }
  .tgp-facts-cell {
    border-left: none !important;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-8);
  }
  .tgp-fee-row > span,
  .tgp-fee-row > div > span {
    justify-self: start !important;
    text-align: left !important;
  }
  .tgp-capsule-label {
    display: none !important;
  }
}

/* ==== additions for the static site (placeholders, language menu) ==== */
.shot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: var(--color-surface-sunken);
}
.lang-menu {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.lang-btn:hover {
  background: rgba(12, 12, 13, 0.05);
  color: var(--ink-strong);
}
.lang-pop {
  position: absolute;
  right: 0;
  top: 46px;
  min-width: 148px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.lang-pop button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-strong);
  text-align: left;
  cursor: pointer;
}
.lang-pop[hidden] {
  display: none;
}
.lang-pop button:hover {
  background: var(--bg-sunken);
}
.lang-pop button[data-active] {
  color: var(--accent);
}
@media (max-width: 560px) {
  .tgp-nav-cta-label {
    display: none !important;
  }
}
@media (max-width: 420px) {
  .tgp-logo-full {
    display: none !important;
  }
}

/* Role capsule: dismissable (the × survives in sessionStorage via
   site.js); overflow must stay visible for the corner button. */
.role-capsule {
  overflow: visible !important;
}
.capsule-close {
  position: absolute;
  top: -10px;
  right: -6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-subtle);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.capsule-close:hover {
  color: var(--color-text-strong);
}

/* Role capsule: wrap into rows on narrow screens instead of clipping. */
@media (max-width: 979px) {
  .role-capsule {
    flex-wrap: wrap;
    width: calc(100vw - 32px);
    height: auto !important;
    justify-content: center;
    padding: 10px 14px !important;
    border-radius: 24px !important;
    row-gap: 2px;
    overflow-x: visible !important;
  }
  .role-capsule [role="group"] {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    flex-shrink: 1 !important;
    row-gap: 2px;
  }
  .role-capsule [role="group"] a {
    padding: 0 11px !important;
    font-size: 15px !important;
    height: 36px !important;
  }
}

/* ---- flicker-free navigation (2026-08-10) ---- */

/* Cross-document view transitions: role/page switches cross-fade
   instead of flashing white and jumping (same-origin, progressive —
   browsers without support just navigate normally). */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Non-RU locales: the <head> boot script sets this attribute and
   site.js removes it once the dictionary is applied, so the first
   paint is already translated (1.5 s failsafe in the boot script). */
html[data-l10n-pending] body {
  visibility: hidden;
}

/* ==== rev3 prototype vocabulary (main page, 2026-09-06 cobalt rebrand) ====
   web/index.html is ported from the single-page Claude Design prototype
   (tools/port_main.py) and speaks the design-kit token names below; the
   role pages still use the --color-* names above, retinted to the same
   values so all four pages read as one site. Keep both in sync. */
:root {
  --accent: #1558c8;
  --accent-hover: #0f47a8;
  --accent-strong: #1558c8;
  --accent-strong-hover: #0f47a8;
  --accent-strong-fg: #ffffff;
  --accent-grad:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 10px),
    linear-gradient(180deg, #1c62d8, #0f4cb0);
  --accent-grad-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 10px),
    linear-gradient(180deg, #1a5bcb, #0d43a0);
  --accent-soft: #e6edfd;
  --brand-gold: #1558c8;
  --bg: #ffffff;
  --bg-subtle: #f7f7f8;
  --bg-sunken: #e9e9ec;
  --bg-page: #f1f1f3;
  --surface: #ffffff;
  --ink: #232326;
  --ink-strong: #0c0c0d;
  --muted: #6b6b71;
  --subtle: #9c9ca3;
  --border: #e0e0e3;
  --border-strong: #cacacf;
  --gold-grad-from: #eaeef5;
  --gold-grad-to: #f7f9fc;
  --gold-border: #dde3ec;
  --gold-ink: #33415c;
  --success-ink: #0b6238;
  --danger: #d02b20;
  --danger-soft: #fbe4e2;
  --danger-ink: #93211a;
  --info: #1558c8;
  --info-soft: #e6edfd;
  --info-ink: #123f92;
  --warn: #9a6a08;
  --warn-soft: #f7edd6;
  --warn-ink: #6b4906;
  --shadow-gold: 0 1px 3px rgba(21, 88, 200, 0.3);
}
/* The "tgpay crypto" wordmark next to the mark (nav + footer) is set in
   Plus Jakarta Sans 800 — latin subset only, the wordmark is Latin. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-800-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;
}
/* hover classes — the prototype's style-hover attributes, mapped by
   tools/port_main.py (HOVER table) */
.hv-nav:hover {
  color: var(--ink-strong);
  background: rgba(12, 12, 13, 0.05);
  text-decoration: none;
}
.hv-primary:hover {
  background-image: var(--accent-grad-hover);
  color: #fff;
  text-decoration: none;
}
.hv-sunken:hover {
  background: var(--bg-sunken);
  color: var(--ink-strong);
  text-decoration: none;
}
.tgp-faq-btn:hover {
  background: var(--bg-subtle);
}
.tgp-faq-btn:active {
  background: var(--bg-sunken);
}