/* egz — vairavimo egzamino simuliatorius
   Prekės ženklo pagrindas: Asfaltas #1A1A18 · Signalas #2F5BFF · Kreida #F7F3EA
   Šriftai savame serveryje (CSP font-src 'self'), SIL Open Font License. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  src: url("/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  font-display: swap;
  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: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: u+00??, 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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  font-display: swap;
  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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: u+00??, 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;
}

:root {
  color-scheme: dark;

  /* Prekės ženklo spalvos */
  --asphalt: #1a1a18;
  --signal: #2f5bff;
  --signal-deep: #1a56d6;
  --chalk: #f7f3ea;

  /* Sąsajos atvaizdis */
  --ink: var(--chalk);
  --muted: #b4afa4;
  --link: #7c9bff;
  --link-hover: #a8bcff;
  --panel: #1a1a18;
  --panel-strong: #201f1d;
  --line: rgba(247, 243, 234, 0.14);
  --amber: #ffc66d;
  --cta: #ffc24a;
  --on-cta: #121211;
  --red: #ff9f97;
  --background: #121211;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.45);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-ui:
    "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-family: var(--font-ui);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

/* Ilgi lietuviški žodžiai („nepriklausomybės", „reikalavimai") niekada
   neišplečia konteinerio; media niekada neperauga stulpelio. */
h1, h2, h3, h4, p, li, dt, dd, th, td, summary, label, .lead, .lede {
  overflow-wrap: break-word;
  /* Etalone (Website.dc.html) zodziai niekada neskaidomi bruksneliu - vietoj to
     naudojamas `text-wrap: pretty`. `hyphens: auto` Chrome'e su lang="lt" davė
     „egza-minas“ ir „maršru-tais“, ko dizaine nėra. */
  hyphens: manual;
  text-wrap: pretty;
}

/* Nedalomi ilgi eilutės vienetai — el. paštai, URL, kodai. */
.contact-mail, .overline, code, .hud-cell, td, th {
  overflow-wrap: anywhere;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(47, 91, 255, 0.16), transparent 34rem),
    radial-gradient(circle at 90% 18%, rgba(47, 91, 255, 0.08), transparent 30rem),
    var(--background);
  line-height: 1.65;
}

a {
  color: var(--link);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  color: var(--chalk);
  background: var(--signal);
  border-radius: 0.5rem;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header,
.site-footer,
main,
.copyright {
  width: min(var(--shell), calc(100% - var(--gut) * 2));
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--s-3);
  align-items: center;
  justify-content: space-between;
  min-height: var(--hdr-h);
  border-bottom: 1px solid var(--line);
}

/* Logotipas: „egz" + signalinis brūkšnys.
   Geometrija fiksuota em vienetais, todėl nesikeičia jokiame dydyje:
   brūkšnys 0.30em x 0.13em, tarpas 0.10em, pakeltas 0.10em nuo pagrindo linijos. */
.brand {
  display: inline-flex;
  gap: 0.1em;
  align-items: flex-end;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 1.75rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-decoration: none;
}

/* Logotipo hit zona 44px, glifas nepasikeičia. */
.site-header .brand {
  position: relative;
}

.site-header .brand::before {
  position: absolute;
  inset: -0.75rem -0.5rem;
  content: "";
}

.brand::after {
  width: 0.3em;
  height: 0.13em;
  margin-bottom: 0.1em;
  background: var(--signal);
  border-radius: 1px;
  content: "";
}

.brand:hover {
  color: var(--ink);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--muted);
  font-size: 0.94rem;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

main {
  min-height: 60vh;
  padding-block: clamp(0.75rem, 3vw, 2.25rem) var(--s-4);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.eyebrow,
.badge {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  overflow-wrap: break-word;
  color: var(--link);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 1.5rem;
  height: 2px;
  content: "";
  background: currentColor;
}

h1,
h2,
h3 {
  margin-block: 0 0.55em;
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 20ch;
  font-size: var(--fs-h1);
}

.page-heading h1 {
  max-width: 22ch;
  font-size: clamp(1.625rem, 5.6vw, 3.6rem);
}

h2 {
  margin-top: clamp(1.25rem, 3vw, 2.4rem);
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

.lead {
  max-width: 56ch;
  color: #d6d1c6;
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.button {
  display: inline-flex;
  max-width: 100%;
  min-height: var(--tap);
  overflow-wrap: break-word;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
  padding: 0.6rem 1.1rem;
  color: var(--on-cta);
  background: var(--cta);
  border: 1px solid var(--cta);
  border-radius: 0.65rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  color: var(--on-cta);
  filter: brightness(1.1);
  background: var(--cta);
  border-color: #4a71ff;
}

.button svg {
  flex: 0 0 auto;
  margin-left: 0.4rem;
}

.button.secondary {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
}

.button.secondary:hover {
  color: var(--ink);
  background: rgba(247, 243, 234, 0.06);
  border-color: rgba(247, 243, 234, 0.3);
}

.button:active {
  transform: scale(0.99);
}

.pack-list a:active,
.pay-opt:active,
.q-opt:not(:disabled):not(.is-static):active,
.dot:active,
.seg:active,
.qtab:active,
.cat-chip:active,
.chip:active {
  transform: scale(0.995);
}

.footer-links a:active,
.footer-col > summary:active,
.faq summary:active,
.site-nav a:active {
  background: rgba(247, 243, 234, 0.05);
}

.button:disabled {
  color: #8a857a;
  background: #24231f;
  border-color: #34322d;
  cursor: not-allowed;
}

.signal-card,
.content-card,
.notice,
.reset-card {
  padding: clamp(1rem, 3.4vw, 1.75rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: var(--shadow);
}

.signal-card ol {
  display: grid;
  gap: 1rem;
  margin: 1.4rem 0 0;
  padding: 0;
  counter-reset: steps;
  list-style: none;
}

.signal-card li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.8rem;
  align-items: start;
  color: #d6d1c6;
}

.signal-card li::before {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: var(--link);
  background: rgba(47, 91, 255, 0.16);
  border-radius: 50%;
  content: counter(steps);
  counter-increment: steps;
  font-size: 0.78rem;
  font-weight: 700;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 4rem;
}

.grid .content-card {
  box-shadow: none;
}

.page-heading,
.content-column,
.reset-card {
  width: min(48rem, 100%);
  margin-inline: auto;
}

.self-service-grid {
  display: grid;
  width: min(64rem, 100%);
  margin: 2rem auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.self-service-grid .reset-card {
  width: 100%;
  margin-top: 0;
}

.danger-card {
  border-color: rgba(255, 159, 151, 0.34);
}

.danger-button {
  color: #190603;
  background: var(--red);
  border-color: var(--red);
}

.danger-button:hover {
  color: #190603;
  background: #ffc1bc;
  border-color: #ffc1bc;
}

code {
  padding: 0.1em 0.3em;
  color: var(--ink);
  background: #0d0d0c;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  font-size: 0.95em;
}

.content-column > p,
.content-column > ul,
.content-column > ol {
  color: #d6d1c6;
}

.notice {
  margin-block: 1.5rem;
  color: #e4dfd4;
  box-shadow: none;
}

.notice.warning {
  border-color: rgba(255, 198, 109, 0.42);
}

.notice.danger {
  border-color: rgba(255, 159, 151, 0.42);
}

.notice strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ink);
}

.legal-review {
  color: var(--amber);
}

.reset-card {
  margin-top: 2rem;
}

.form-field {
  margin-block: 1rem;
}

label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  color: var(--ink);
  background: #0d0d0c;
  border: 1px solid #45423b;
  border-radius: 0.55rem;
  font: inherit;
}

input:disabled {
  opacity: 0.55;
}

.help-text {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.status {
  min-height: 1.7rem;
  margin-block: 1rem;
  color: var(--muted);
}

.status[data-state="success"] {
  color: var(--link);
}

.status[data-state="warning"] {
  color: var(--amber);
}

.status[data-state="error"] {
  color: var(--red);
}

.site-footer {
  display: flex;
  gap: var(--s-3) 2rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-block: var(--s-4) var(--s-3);
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: var(--fs-body);
}

.site-footer p {
  max-width: 60ch;
  margin: 0;
}

.site-footer nav {
  display: flex;
  gap: 1rem;
}

[hidden] {
  display: none !important;
}

@media (max-width: 47.99rem) {
  .grid,
  .self-service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer nav {
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Vidiniai #anchor'ai niekada nelieka po sticky antrašte. */
section[id],
[id]:target {
  scroll-margin-top: calc(var(--hdr-h) + var(--s-3));
}


/* ─────────────────────────────────────────────────────────────
   Pradinio puslapio komponentai (2026 atnaujinimas)
   Papildymas: nė viena aukščiau esanti klasė nepakeista, todėl
   /download, /support, /privacy, /terms, /account puslapiai
   veikia be pakeitimų. Inline stilių nėra — CSP saugu.
   ───────────────────────────────────────────────────────────── */

:root {
  --radius-card: 1rem;
  --radius-control: 0.7rem;
  --hairline: rgba(247, 243, 234, 0.09);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── Responsive sistema ─────────────────────────────────────
     Vienas tokenų rinkinys visiems puslapiams. Ribos parinktos
     pagal turinį (kiek vietos reikia eilutei), ne pagal įrenginį:
     600px — dvi kortelės vienoje eilėje
     768px — dviejų stulpelių turinys, poraštės kolonos
     1024px — inline navigacija (6 punktai + CTA reikia ~1000px)
     1088px (68rem) — šešių plytelių eilė */
  --shell: 72rem;
  --gut: clamp(1rem, 4.2vw, 1.25rem);        /* 16 → 20 */
  --hdr-h: 3.5rem;                            /* 56 → 64 */
  --tap: 2.75rem;                             /* 44px hit zona */

  --s-1: 0.375rem;                            /* 6 */
  --s-2: 0.5rem;                              /* 8 */
  --s-3: clamp(0.625rem, 2.4vw, 1rem);        /* 10 → 16 */
  --s-4: clamp(0.875rem, 3.4vw, 1.5rem);      /* 14 → 24 */
  --s-card: clamp(1rem, 3.6vw, 1.375rem);     /* 16 → 22 */
  --s-sec: clamp(1.5rem, 7vw, 4.5rem);        /* 24 → 72 */

  --fs-h1: clamp(1.875rem, 7.4vw, 4.25rem);   /* 30 → 68 */
  --fs-h2: clamp(1.375rem, 4.4vw, 2.5rem);    /* 22 → 40 */
  --fs-h3: clamp(1.0625rem, 1.9vw, 1.25rem);  /* 17 → 20 */
  --fs-lead: clamp(0.9375rem, 2.1vw, 1.1875rem);
  --fs-body: clamp(0.875rem, 1.5vw, 1rem);
  --fs-meta: clamp(0.6875rem, 1.3vw, 0.8125rem);
  --lh-tight: 1.05;
  --lh-body: 1.55;
}

@media (min-width: 48rem) {
  :root {
    --hdr-h: 4rem;
  }
}

/* Lipni antraštė */
.site-header.is-sticky {
  position: sticky;
  z-index: 40;
  top: 0;
  width: 100%;
  padding-inline: max(var(--gut), calc((100% - var(--shell)) / 2));
  background: rgba(18, 18, 17, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  min-height: var(--hdr-h);
}

.site-header.is-sticky .site-nav a {
  padding: 0.5rem 0.85rem;
  border-radius: 0.5rem;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}

.site-header.is-sticky .site-nav a:hover {
  background: rgba(247, 243, 234, 0.05);
}

.header-cta {
  min-height: var(--tap);
  padding-inline: clamp(0.85rem, 3vw, 1.35rem);
  border-radius: var(--radius-control);
  font-size: clamp(0.8125rem, 2.6vw, 0.94rem);
  white-space: nowrap;
}

/* Bendra sekcijų ritmika */
.landing > section {
  padding-block-end: var(--s-sec);
  scroll-margin-top: calc(var(--hdr-h) + var(--s-3));
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-block-end: var(--s-4);
}

.section-head h2 {
  margin: 0;
  max-width: 26ch;
  font-size: var(--fs-h2);
  line-height: 1.12;
}

.section-head p {
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Hero */
.landing .hero {
  padding-block: var(--s-3) var(--s-4);
}

@media (min-width: 62rem) {
  .landing .hero {
    padding-block: clamp(1.75rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  }
}

.landing .hero h1 {
  max-width: 20ch;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
}

.landing .hero h1 .dim {
  color: #8a857a;
}

.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  align-items: center;
  margin-block: var(--s-3) 0;
  color: #8a857a;
  font-size: var(--fs-meta);
}

.hero-note svg {
  flex: 0 0 auto;
}

/* Simuliatoriaus kadras su HUD */
.sim-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: var(--radius-card);
  background: #0d0d0c;
  box-shadow: 0 2.5rem 5.5rem rgba(0, 0, 0, 0.55);
}

.sim-frame.is-hero {
  height: clamp(10.5rem, 40vw, 26rem);
}

.sim-frame.is-wide {
  height: clamp(9.5rem, 34vw, 25rem);
}

.sim-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 74%;
  filter: saturate(0.62) brightness(0.52) contrast(1.06);
}

.sim-frame.is-hero img {
  object-position: 56% 74%;
  filter: saturate(0.62) brightness(0.52) contrast(1.06);
}

.sim-frame.is-wide img {
  object-position: 50% 62%;
  filter: saturate(0.58) brightness(0.56) contrast(1.05);
}

.sim-frame::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(13, 13, 12, 0.72) 0%,
    rgba(13, 13, 12, 0.12) 32%,
    rgba(13, 13, 12, 0.1) 54%,
    rgba(13, 13, 12, 0.88) 100%
  );
}

.hud {
  position: absolute;
  z-index: 2;
  display: flex;
  max-width: 90%;
  flex-wrap: wrap;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.6rem;
  background: rgba(10, 14, 22, 0.76);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hud::before {
  flex: 0 0 2px;
  background: #ffc24a;
  content: "";
}

.hud-status {
  top: 7%;
  left: 5%;
}

.hud-cell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.95rem;
  overflow-wrap: anywhere;
}

.hud-cell + .hud-cell {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.hud-label {
  color: #8f98ac;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.hud-value {
  color: #edf0f6;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hud-live {
  top: 7%;
  right: 5%;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.8rem;
  color: #8f98ac;
  font-size: 0.7rem;
}

.hud-live::before {
  display: none;
}

.hud-live .dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #4cd08a;
  animation: hud-pulse 2.4s ease-in-out infinite;
}

.hud-subtitle {
  right: 5%;
  bottom: 9%;
  left: 5%;
}

.hud-subtitle .hud-cell {
  gap: 0.35rem;
  padding: 0.8rem 1.25rem;
  min-width: 0;
}

.hud-subtitle .hud-label {
  letter-spacing: 0.26em;
}

.hud-subtitle p {
  margin: 0;
  color: #edf0f6;
  font-size: clamp(0.8rem, 1.35vw, 1.05rem);
  line-height: 1.35;
  text-wrap: pretty;
}

@keyframes hud-pulse {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}

/* Statistikos juosta */
.stat-band {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}

.stat-band > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-card);
  background: var(--background);
}

.stat-band h2 {
  margin: 0;
  font-size: var(--fs-h3);
  letter-spacing: -0.025em;
}

.stat-band p {
  margin: 0;
  color: #8a857a;
  font-size: var(--fs-meta);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Dviejų kolonų sekcija */
.split {
  display: grid;
  gap: clamp(1.25rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* Dvi kolonos tik nuo 62rem — žemiau tekstas ir sąrašas dalinosi
   eilutę per siaurai ir kairėje likdavo didelė tuščia zona. */
@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* Numeruotas sąrašas */
.reason-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reason-list li {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: 1.6rem 1fr;
  padding-block: 1.4rem;
  border-top: 1px solid var(--hairline);
}

.reason-list .n {
  padding-top: 0.15rem;
  color: var(--signal);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.reason-list h3 {
  margin: 0 0 0.3rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  letter-spacing: 0;
}

.reason-list p {
  margin: 0;
  color: #8a857a;
  font-size: 0.94rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Aplinkos paaiškinimai ant kadro */
.callout {
  position: absolute;
  z-index: 2;
  display: flex;
  max-width: 44%;
  align-items: center;
}

.callout .pin {
  flex: 0 0 0.5625rem;
  width: 0.5625rem;
  height: 0.5625rem;
  border: 1.5px solid var(--signal);
  border-radius: 50%;
  background: rgba(47, 91, 255, 0.28);
}

.callout .leader {
  width: clamp(1.1rem, 3vw, 2.5rem);
  height: 1px;
  background: rgba(247, 243, 234, 0.34);
}

.callout span:last-child {
  min-width: 0;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(247, 243, 234, 0.14);
  border-radius: 0.375rem;
  background: rgba(13, 13, 12, 0.86);
  color: var(--chalk);
  font-size: clamp(0.56rem, 1.05vw, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.callout-1 { top: 14%; left: 6%; }
.callout-2 { top: 52%; left: 30%; }
.callout-3 { top: 76%; left: 8%; }
.callout-4 { top: 26%; right: 6%; flex-direction: row-reverse; }

/* Vienodų kortelių tinklelis */
.tile-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 0.9rem;
}

.tile-grid > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-card);
  background: var(--background);
  transition: background 0.2s var(--ease);
}

.tile-grid > div:hover {
  background: #181817;
}

.tile-head {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.tile-head .dot {
  flex: 0 0 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(247, 243, 234, 0.28);
}

.tile-head .dot.is-last {
  background: var(--signal);
}

.tile-head .rule {
  flex: 1;
  height: 1px;
  background: rgba(247, 243, 234, 0.14);
}

.tile-head .n {
  color: #8a857a;
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tile-grid h3 {
  margin: 0;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
}

.tile-grid p {
  margin: 0;
  color: #8a857a;
  font-size: var(--fs-meta);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Paprastas skirtukais dalytas sąrašas be rėmelio */
.plain-grid {
  display: grid;
  gap: 0 clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.plain-grid > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: var(--s-3);
  border-top: 1px solid var(--hairline);
}

.plain-grid h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  letter-spacing: 0;
}

.plain-grid p {
  margin: 0;
  color: #8a857a;
  font-size: 0.84rem;
  line-height: 1.5;
}

/* Kriterijų žymos */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding-inline: 0.9rem;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.5rem;
  color: #c9c4b8;
  font-size: 0.84rem;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.chips li:hover {
  border-color: rgba(247, 243, 234, 0.3);
  color: var(--chalk);
}

/* Ataskaitos peržiūra */
.report {
  overflow: hidden;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.9rem;
  background: #16161a;
}

.report-head {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-card);
  border-bottom: 1px solid var(--hairline);
}

.report-head .mark {
  display: grid;
  flex: 0 0 2.6rem;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border: 1px solid rgba(255, 94, 82, 0.3);
  border-radius: 50%;
  background: rgba(255, 94, 82, 0.12);
  color: #ff5e52;
  font-size: 1.25rem;
  font-weight: 700;
}

.report-head h3 {
  margin: 0 0 0.15rem;
  color: #edf0f6;
  font-size: 1.18rem;
}

.report-head p {
  margin: 0;
  color: #8f98ac;
  font-size: 0.82rem;
}

.report-tiles {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr));
  background: var(--hairline);
}

.report-tiles > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3);
  background: #1b1b20;
}

.report-tiles dt {
  color: #8a857a;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.report-tiles dd {
  margin: 0;
  color: #edf0f6;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.report-tiles dd.is-warn {
  color: #ffc24a;
}

.report-tiles dd.is-bad {
  color: #ff5e52;
}

.fault-list {
  margin: 0;
  padding: 0 var(--s-card) var(--s-2);
  list-style: none;
}

.fault-list li {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  padding-block: 0.6rem;
  border-bottom: 1px solid rgba(247, 243, 234, 0.07);
}

.fault-list .sev {
  display: grid;
  flex: 0 0 2.4rem;
  min-height: 1.45rem;
  place-items: center;
  border: 1px solid rgba(255, 194, 74, 0.28);
  border-radius: 2rem;
  background: rgba(255, 194, 74, 0.12);
  color: #ffc24a;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.fault-list .sev.is-critical {
  border-color: rgba(255, 94, 82, 0.3);
  background: rgba(255, 94, 82, 0.12);
  color: #ff5e52;
}

.fault-list .what {
  flex: 1 1 auto;
  min-width: 0;
  color: #edf0f6;
  font-size: var(--fs-body);
  line-height: 1.45;
  text-wrap: pretty;
}

.fault-list time {
  flex: 0 0 auto;
  color: #8f98ac;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.report-foot {
  padding: 0 var(--s-card) var(--s-card);
  color: #8a857a;
  font-size: var(--fs-meta);
}

/* Bandymų paketai */
.pack-list {
  overflow: hidden;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.9rem;
}

.pack-list a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: center;
  padding: var(--s-card);
  color: inherit;
  text-decoration: none;
  transition: background 0.18s var(--ease);
}

.pack-list a + a {
  border-top: 1px solid var(--hairline);
}

.pack-list a:hover {
  background: #181817;
}

.pack-name {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  gap: 0 0.6rem;
  align-items: baseline;
}

.pack-name strong {
  color: var(--chalk);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.pack-name span {
  color: #8a857a;
  font-size: var(--fs-meta);
}

.pack-meta {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  gap: var(--s-3);
  align-items: center;
  color: #8a857a;
  font-size: var(--fs-body);
}

.pack-meta .chev {
  display: grid;
  flex: 0 0 1.9rem;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(47, 91, 255, 0.12);
}

.section-head.is-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
}

.link-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--tap);
  padding: 0 1.375rem;
  color: var(--ink);
  border: 1px solid rgba(247, 243, 234, 0.16);
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.16s, border-color 0.16s;
}

.link-btn:hover {
  color: var(--ink);
  background: rgba(247, 243, 234, 0.06);
  border-color: rgba(247, 243, 234, 0.32);
}

.footnotes {
  display: grid;
  gap: var(--s-3) clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: var(--s-3);
}

.footnotes p {
  margin: 0;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(247, 243, 234, 0.14);
  color: #8a857a;
  font-size: var(--fs-meta);
  line-height: 1.5;
  text-wrap: pretty;
}

/* DUK */
.faq {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--hairline);
}

.faq details {
  border-top: 1px solid var(--hairline);
}

.faq summary {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  min-height: var(--tap);
  padding-block: var(--s-3);
  color: #c9c4b8;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: color 0.16s var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  display: grid;
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  border-radius: 0.45rem;
  background: rgba(247, 243, 234, 0.06);
  color: #8a857a;
  content: "+";
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.22s var(--ease), background 0.16s var(--ease),
    color 0.16s var(--ease);
}

.faq details[open] summary {
  color: var(--chalk);
}

.faq details[open] summary::after {
  background: var(--signal);
  color: var(--chalk);
  transform: rotate(45deg);
}

.faq summary span {
  flex: 1;
  text-wrap: pretty;
}

.faq p {
  margin: 0;
  padding: 0 var(--s-4) var(--s-3) 0;
  color: #8a857a;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* Baigiamasis blokas */
.cta-panel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: var(--s-card);
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: var(--radius-card);
  background:
    radial-gradient(90% 140% at 12% 50%, rgba(47, 91, 255, 0.16), transparent 62%),
    #16161a;
}

.cta-panel h2 {
  margin: 0 0 0.35rem;
  max-width: 30ch;
  font-size: var(--fs-h2);
  line-height: 1.1;
}

.cta-panel p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
}

.cta-panel .button {
  flex: 1 1 100%;
  min-height: var(--tap);
  padding-inline: 1.5rem;
  gap: 0.5rem;
  font-size: 0.94rem;
}

@media (min-width: 48rem) {
  .cta-panel {
    padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  }

  .cta-panel .button {
    flex: 0 0 auto;
    min-height: 3.25rem;
    padding-inline: 2rem;
  }
}

/* Poraštė: mobile — accordion sekcijos, ≥768px — kolonos.
   Ta pati semantika abiem: <details> + <summary><h2>. */
.site-footer.is-wide {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.footer-about {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.footer-about .brand {
  font-size: 1.35rem;
}

.footer-about p {
  max-width: 56ch;
  color: #8a857a;
  font-size: var(--fs-meta);
  line-height: 1.5;
  text-wrap: pretty;
}

.footer-cols {
  display: flex;
  flex-direction: column;
}

.footer-col {
  border-top: 1px solid var(--hairline);
}

.footer-col > summary {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
  cursor: pointer;
  list-style: none;
}

.footer-col > summary::-webkit-details-marker {
  display: none;
}

.footer-col > summary::after {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.2rem;
  border-right: 1.5px solid #8a857a;
  border-bottom: 1.5px solid #8a857a;
  content: "";
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.footer-col[open] > summary::after {
  transform: rotate(-135deg);
}

.footer-col h2 {
  margin: 0;
  color: #8a857a;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer-links {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--s-2);
}

.footer-links a {
  position: relative;
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

/* Hit zona plati net kai vizualus elementas žemas. */
.footer-links a::after {
  position: absolute;
  inset: -2px -0.75rem;
  content: "";
}

.footer-links a:hover {
  color: var(--chalk);
}

@media (min-width: 48rem) {
  .site-footer.is-wide {
    gap: clamp(1.5rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr);
  }

  .footer-cols {
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  .footer-col {
    border-top: 0;
  }

  .footer-col > summary {
    min-height: 0;
    margin-bottom: 0.6rem;
    pointer-events: none;
  }

  .footer-col > summary::after {
    display: none;
  }

  .footer-links a {
    min-height: 0;
    padding-block: 0.28rem;
  }
}

.copyright {
  padding-block: var(--s-2) var(--s-4);
  color: #8a857a;
  font-size: var(--fs-meta);
}

@media (min-width: 48rem) {
  .tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .tile-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .callout-2,
  .callout-3 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud-live .dot {
    animation: none;
  }

  .faq summary::after,
  .tile-grid > div,
  .pack-list a {
    transition: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   Vidiniai puslapiai: kainos, reikalavimai, paskyra, teisiniai
   ───────────────────────────────────────────────────────────── */

.page-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 42rem;
  padding-block: var(--s-3) 0;
}

.page-head h1 {
  margin: 0;
  font-size: clamp(1.625rem, 5.6vw, 3.4rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
}

.page-head .lead {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.page-head .updated {
  margin: 0;
  color: #8a857a;
  font-size: 0.875rem;
}

h2.sub {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
}

.overline {
  margin: 0;
  overflow-wrap: anywhere;
  color: #8a857a;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.after-grid {
  margin: 1.5rem 0 0;
  color: #8a857a;
  font-size: 0.875rem;
}

/* Kortelių tinklelis (paketai, valdymo įrenginiai) */
.pricing-cards {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 37.5rem) {
  .pricing-cards {
    gap: var(--s-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-card);
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.9rem;
  background: #16161a;
}

.price-card.is-featured {
  border-color: rgba(124, 155, 255, 0.34);
}

.price-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.price-card-top > * {
  min-width: 0;
}

.price-card-top h2,
.price-card-top h3 {
  white-space: nowrap;
}

.price-card h2,
.price-card h3 {
  margin: 0;
  font-size: var(--fs-h3);
  letter-spacing: -0.025em;
}

.price-card p {
  margin: 0;
  color: #8a857a;
  font-size: var(--fs-meta);
  line-height: 1.5;
  text-wrap: pretty;
}

.price-card hr {
  display: none;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--hairline);
}

@media (min-width: 37.5rem) {
  .price-card hr {
    display: block;
  }
}

.price-card .fit {
  color: var(--chalk);
}

.price-card .button {
  justify-content: center;
  min-height: var(--tap);
  margin-top: var(--s-1);
  width: 100%;
}

.price-card .price-note {
  margin-top: auto;
}

.price-credits {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  align-items: baseline;
}

.price-credits strong {
  color: var(--chalk);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.pill {
  display: inline-flex;
  min-height: 1.4rem;
  align-items: center;
  padding-inline: 0.625rem;
  border-radius: 1.25rem;
  background: rgba(47, 91, 255, 0.14);
  color: var(--link);
  max-width: 100%;
  padding-block: 0.15rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.25;
  overflow-wrap: break-word;
  text-align: center;
}

.pill.is-quiet {
  background: rgba(247, 243, 234, 0.06);
  color: #a39e92;
}

/* Sąrašai su varnelėmis ir taškais */
.check-list,
.bullet-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li,
.bullet-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--chalk);
  font-size: var(--fs-body);
  line-height: 1.45;
  text-wrap: pretty;
}

.check-list li::before {
  position: absolute;
  top: 0.06em;
  left: 0;
  width: 1rem;
  height: 1rem;
  content: "";
  background: var(--link);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8.4 6.2 11.6 13 4.8" fill="none" stroke="%23000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8.4 6.2 11.6 13 4.8" fill="none" stroke="%23000" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

.bullet-list li {
  padding-left: 1.1rem;
  color: var(--muted);
}

.bullet-list li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: var(--link);
  content: "";
}

/* Faktų sąrašas (dt/dd) */
.fact-list {
  margin: 0;
}

dt, dd {
  min-width: 0;
}

.fact-list > div {
  display: grid;
  gap: 0.5rem 1.25rem;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  padding-block: 1rem;
  border-top: 1px solid var(--hairline);
}

.fact-list dt {
  color: var(--chalk);
  font-size: 0.9rem;
  font-weight: 600;
}

.fact-list dd {
  margin: 0;
  color: #8a857a;
  font-size: 0.9rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.fact-list .hint {
  color: #8a857a;
  font-size: 0.82rem;
}

/* Numeruoti žingsniai */
.step-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  background: var(--hairline);
  list-style: none;
}

.step-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  background: var(--background);
}

.step-n {
  display: grid;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(47, 91, 255, 0.14);
  color: var(--link);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step-list h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-ui);
  font-size: 0.94rem;
  letter-spacing: 0;
}

.step-list p {
  margin: 0;
  color: #8a857a;
  font-size: 0.9rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Pastabų blokai */
.note {
  margin: 1.25rem 0 0;
  padding: 1rem 1.15rem;
  border-left: 2px solid rgba(247, 243, 234, 0.14);
  border-radius: 0.625rem;
  background: rgba(247, 243, 234, 0.04);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.note.is-info {
  border-left-color: var(--link);
}

.note.is-warn {
  border-left-color: #ffc66d;
  background: rgba(255, 198, 109, 0.07);
}

/* Bendras skydelis */
.panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1.25rem 1.35rem;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.75rem;
}

.panel h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  letter-spacing: 0;
}

.panel p {
  margin: 0;
  color: #8a857a;
  font-size: 0.9rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.panel.is-danger {
  border-color: rgba(255, 159, 151, 0.28);
}

.panel.is-danger h3 {
  color: #ffb3ac;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button.danger-outline {
  border: 1px solid rgba(255, 159, 151, 0.34);
  background: none;
  color: #ffb3ac;
}

.button.danger-outline:hover {
  background: rgba(255, 159, 151, 0.1);
  color: #ffb3ac;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-list li {
  display: inline-flex;
  max-width: 100%;
  min-height: 1.875rem;
  align-items: center;
  overflow-wrap: break-word;
  padding-inline: 0.75rem;
  border-radius: 0.375rem;
  background: rgba(247, 243, 234, 0.06);
  color: var(--chalk);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Lentelės */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.9rem;
}

.req-table,
.data-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  text-align: left;
}

.req-table th,
.req-table td,
.data-table th,
.data-table td {
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: top;
}

.req-table thead th,
.data-table thead th {
  background: #181817;
  color: #8a857a;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.req-table thead th.is-rec {
  color: var(--link);
}

.req-table tbody th,
.data-table tbody th {
  color: var(--chalk);
  font-weight: 600;
}

.req-table tbody td {
  color: #8a857a;
}

.req-table tbody td.is-rec {
  color: var(--chalk);
}

.req-table tbody tr,
.data-table tbody tr {
  border-top: 1px solid var(--hairline);
}

.data-table tbody td {
  color: #8a857a;
}

.data-table time {
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}

.data-table .is-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.data-table .is-end {
  text-align: right;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  padding-inline: 0.7rem;
  border: 1px solid;
  border-radius: 1.25rem;
  max-width: 100%;
  padding-block: 0.15rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.25;
  overflow-wrap: break-word;
  text-align: center;
}

.badge.is-pass {
  border-color: rgba(76, 208, 138, 0.28);
  background: rgba(76, 208, 138, 0.12);
  color: #6fdca4;
}

.badge.is-fail {
  border-color: rgba(255, 94, 82, 0.28);
  background: rgba(255, 94, 82, 0.12);
  color: #ff9f97;
}

.badge.is-none {
  border-color: rgba(247, 243, 234, 0.14);
  background: rgba(247, 243, 234, 0.05);
  color: #8a857a;
}

/* Paskyros antraštė */
.account-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  align-items: flex-start;
  justify-content: space-between;
  padding-block: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
}

.account-id {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.account-id > div {
  min-width: 0;
}

.account-id h2 {
  margin: 0 0 0.3rem;
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.account-id p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.avatar {
  display: grid;
  flex: 0 0 4rem;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border: 1px solid rgba(124, 155, 255, 0.3);
  border-radius: 50%;
  background: rgba(47, 91, 255, 0.14);
  color: var(--link);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.credit-box {
  display: flex;
  overflow: hidden;
  align-items: stretch;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.75rem;
}

.credit-box > div {
  padding: var(--s-3) var(--s-card);
  background: #16161a;
}

/* Paskyros būsenos: statinis puslapis rodo neprisijungusią būseną, serveris
   prisijungusiam uždeda <body class="is-signed-in">. */
body:not(.is-signed-in) [data-auth="user"] {
  display: none;
}

body.is-signed-in [data-auth="anon"] {
  display: none;
}

.login-card {
  width: min(30rem, 100%);
  margin-top: 0;
  margin-inline: 0;
}

.login-card .button {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
}

.login-card .status:empty {
  display: none;
}

/* Paskyros skiltys */
/* Atsisiuntimo puslapio dvi kolonos */
.dl-top {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 4.5rem);
  align-items: flex-start;
}

.dl-intro {
  flex: 1 1 26rem;
  min-width: 0;
}

.dl-steps {
  flex: 1 1 23rem;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--background);
  border: 1px solid rgba(247, 243, 234, 0.1);
  border-radius: 0.875rem;
}

.dl-steps .overline {
  margin: 0 0 1.25rem;
}

.step-list.is-compact li {
  padding-block: 0.75rem;
}

.step-list.is-compact h3 {
  font-size: 0.94rem;
}

.dl-note {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(247, 243, 234, 0.09);
  color: #8a857a;
  font-size: 0.81rem;
  line-height: 1.55;
}

.acc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  padding-top: 1.125rem;
}

.acc-tab {
  min-height: var(--tap);
  padding: 0.625rem 1rem;
  color: #8a857a;
  background: none;
  border: 0;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.16s, background 0.16s;
}

.acc-tab:hover {
  color: var(--ink);
}

.acc-tab.is-on {
  color: var(--ink);
  background: rgba(247, 243, 234, 0.06);
}

.acc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 1px;
  margin-bottom: var(--s-4);
  background: rgba(247, 243, 234, 0.09);
  border: 1px solid rgba(247, 243, 234, 0.09);
  border-radius: 0.75rem;
  overflow: hidden;
}

.acc-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.375rem;
  background: var(--background);
}

.acc-stats .overline {
  margin: 0;
}

.acc-stat-n {
  margin: 0;
  color: var(--chalk);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.acc-stat-n.is-pass { color: #6fdca4; }
.acc-stat-n.is-fail { color: var(--red); }

.acc-rows {
  display: flex;
  flex-direction: column;
}

.acc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  min-height: 3.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(247, 243, 234, 0.09);
}

.acc-row > div:first-child {
  flex: 1 1 9rem;
  min-width: 0;
}

.acc-row-label {
  margin: 0;
  color: var(--chalk);
  font-size: 0.94rem;
}

.acc-row-hint {
  margin: 0.15rem 0 0;
  color: #8a857a;
  font-size: 0.81rem;
}

.acc-row-value {
  margin: 0;
  color: #c9c4b8;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.acc-row-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0.875rem;
  color: var(--ink);
  background: none;
  border: 1px solid rgba(247, 243, 234, 0.16);
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.81rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}

.acc-row-action:hover {
  color: var(--ink);
  background: rgba(247, 243, 234, 0.06);
  border-color: rgba(247, 243, 234, 0.32);
}

.acc-logout {
  margin-top: var(--s-4);
}

.credit-cta {
  font: inherit;
  cursor: pointer;
}

.credit-n {
  margin: 0.3rem 0 0.15rem;
  color: var(--chalk);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.credit-sub {
  margin: 0;
  color: #8a857a;
  font-size: 0.75rem;
}

.credit-cta {
  display: inline-flex;
  align-items: center;
  padding-inline: 1.4rem;
  background: var(--cta);
  color: var(--on-cta);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.16s var(--ease);
}

.credit-cta:hover {
  color: var(--on-cta);
  filter: brightness(1.1);
}

/* Teisiniai puslapiai */
.legal {
  max-width: 48rem;
}

.legal-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--hairline);
}

.legal-section h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.legal-section p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block: 2rem;
}

.legal-nav a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding-inline: 1.25rem;
  border: 1px solid rgba(247, 243, 234, 0.16);
  border-radius: 0.625rem;
  color: var(--chalk);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.legal-nav a:hover {
  border-color: rgba(247, 243, 234, 0.32);
  color: var(--chalk);
}

.legal-nav a[aria-current="page"] {
  border-color: rgba(124, 155, 255, 0.4);
  background: rgba(47, 91, 255, 0.1);
}

/* Poraštės aprašas */
.footer-about {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-about .brand {
  font-size: 1.6rem;
}

.footer-about p {
  margin: 0;
  max-width: 42ch;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.footer-contact {
  color: #8a857a;
}

.site-nav a[aria-current="page"] {
  background: rgba(247, 243, 234, 0.06);
  color: var(--chalk);
}


.pack-meta .chev {
  display: grid;
  flex: 0 0 1.9rem;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(47, 91, 255, 0.12);
}

.pack-meta .chev::after {
  width: 0.8rem;
  height: 0.8rem;
  content: "";
  background: var(--link);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M4 2.5 9 7l-5 4.5" fill="none" stroke="%23000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M4 2.5 9 7l-5 4.5" fill="none" stroke="%23000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

.check-list.is-spaced {
  gap: 0;
}

.check-list.is-spaced li {
  padding-block: 1.1rem;
  border-top: 1px solid var(--hairline);
}

.check-list.is-spaced li::before {
  top: 1.16rem;
}

.note strong {
  color: var(--chalk);
  font-weight: 600;
}

.section-head .panel {
  margin-top: 0.5rem;
}

.hero-note {
  gap: 1.1rem;
}


/* Pagalbos puslapis */
.contact-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: center;
  padding: 1.35rem 1.6rem;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.9rem;
  background: #16161a;
}

.contact-box > div {
  flex: 1;
  min-width: 12.5rem;
}

.contact-mail {
  margin: 0.3rem 0 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.contact-box .button {
  min-height: 3rem;
  padding-inline: 1.5rem;
}

h2.sub-gap {
  margin-top: 2.25rem;
}

.cross-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cross-list li {
  position: relative;
  padding: 1.1rem 0 1.1rem 1.6rem;
  border-top: 1px solid var(--hairline);
  color: var(--chalk);
  font-size: 0.94rem;
  line-height: 1.55;
}

.cross-list li::before {
  position: absolute;
  top: 1.16rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  content: "";
  background: #ff9f97;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round"/></svg>') center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round"/></svg>') center / contain no-repeat;
}

.step-list.is-plain > div {
  padding: 1.1rem 1.25rem;
  background: var(--background);
}

.step-list.is-plain h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-ui);
  font-size: 0.94rem;
  letter-spacing: 0;
}

.step-list.is-plain p {
  margin: 0;
  color: #8a857a;
  font-size: 0.9rem;
  line-height: 1.55;
  text-wrap: pretty;
}


.cases-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: baseline;
  justify-content: space-between;
}

.cases-head h2 {
  margin-bottom: 0;
}

.cases-head p {
  margin: 0;
  color: #8a857a;
  font-size: 0.9rem;
}

.case-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  overflow: hidden;
  margin-top: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  background: var(--hairline);
}

.case-grid > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1.35rem;
  background: var(--background);
  transition: background 0.18s var(--ease);
}

.case-grid > div:hover {
  background: #181817;
}

.case-grid h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.97rem;
  letter-spacing: 0;
  text-wrap: pretty;
}

.case-grid p {
  margin: 0;
  color: #8a857a;
  font-size: 0.875rem;
  line-height: 1.6;
  text-wrap: pretty;
}


.price-credits span {
  color: #8a857a;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}


/* ── Atsisiuntimo puslapis ─────────────────────────────────────────── */

.pill.is-live {
  background: rgba(76, 208, 138, 0.12);
  color: #6fdca4;
}

.eyebrow .pill {
  margin-left: 0.5rem;
  vertical-align: 0.05em;
}

.fact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  margin: 1.5rem 0 0;
}

.fact-row div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.fact-row dt {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a857a;
}

.fact-row dd {
  margin: 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.changelog {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(247, 243, 234, 0.12);
}

.changelog article {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  padding: 1.7rem 0.25rem;
  border-bottom: 1px solid rgba(247, 243, 234, 0.07);
}

.cl-meta {
  flex: 0 0 12.5rem;
}

.cl-meta h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.35rem;
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cl-meta p {
  margin: 0;
  font-size: 0.85rem;
  color: #8a857a;
  font-variant-numeric: tabular-nums;
}

.changelog ul {
  flex: 1 1 20rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.changelog li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--chalk);
  text-wrap: pretty;
}

.changelog li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8a857a;
}

/* ── Bandymų pirkimas ─────────────────────────────────────────────── */

.pay-form {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.75rem 2.5rem;
  align-items: start;
}

.pay-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.pay-step legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a857a;
}

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: rgba(47, 91, 255, 0.16);
  color: var(--link);
  font-size: 0.7rem;
  letter-spacing: 0;
}

.pay-opt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.75rem;
  padding: var(--s-3) var(--s-card);
  border: 1px solid rgba(247, 243, 234, 0.1);
  border-radius: 12px;
  background: #121211;
  cursor: pointer;
  transition:
    background 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.16s;
}

.pay-opt:hover {
  border-color: rgba(247, 243, 234, 0.26);
}

.pay-opt.is-method {
  align-items: flex-start;
}

.pay-opt input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--cta);
}

.pay-opt.is-method input {
  margin-top: 0.2rem;
}

.pay-opt:has(input:checked) {
  background: #1a1a1e;
  border-color: rgba(255, 194, 74, 0.5);
}

.pay-opt:has(input:focus-visible) {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.pay-opt-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pay-opt-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pay-opt-sub {
  font-size: 0.85rem;
  color: #8a857a;
}

.pay-opt-price {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

.provider,
.brand-row span {
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
  padding: 0 0.65rem;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition:
    background 0.16s,
    color 0.16s;
}

.provider {
  background: rgba(247, 243, 234, 0.06);
  color: #a39e92;
}

.pay-opt:has(input:checked) .provider {
  background: rgba(255, 194, 74, 0.14);
  color: var(--cta);
}

.brand-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.brand-row span {
  background: rgba(247, 243, 234, 0.05);
  color: #8a857a;
}

.pay-opt:has(input:checked) .brand-row span {
  background: rgba(247, 243, 234, 0.1);
  color: var(--ink);
}

.pay-summary {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.6rem 1.75rem;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 14px;
  background: #16161a;
  position: sticky;
  top: 5.5rem;
}

.pay-summary h3 {
  margin: 0;
}

.pay-summary dl {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
}

.pay-summary dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
}

.pay-summary dt {
  font-size: 0.88rem;
  color: #8a857a;
}

.pay-summary dd {
  margin: 0;
  font-size: 0.88rem;
  text-align: right;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}

.pay-summary hr {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: rgba(247, 243, 234, 0.1);
}

.pay-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
}

.pay-total span {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.pay-total strong {
  font-family: var(--font-ui);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.button.is-pay {
  justify-content: center;
  gap: 0.4rem;
  background: var(--cta);
  color: var(--on-cta);
  border: 0;
  cursor: pointer;
}

.button.is-pay:hover {
  background: var(--cta);
  color: var(--on-cta);
  filter: brightness(1.08);
}

.button.is-pay:active {
  transform: scale(0.99);
}

/* Neaktyvus „Apmokėti".
   `.button:disabled` yra aukščiau faile ir turi mažesnį specifiškumą už
   `.button.is-pay`, todėl be šios taisyklės neaktyvus mygtukas ir toliau
   atrodydavo geltonas ir spaudžiamas: naudotojas spaustų, o nevyktų nieko ir
   be jokio paaiškinimo. Blokuoja tik sutikimo varnelės nebuvimas, tad būsena
   privalo būti matoma iš pirmo žvilgsnio. */
.button.is-pay:disabled,
.button.is-pay:disabled:hover {
  background: #24231f;
  color: #8a857a;
  cursor: not-allowed;
  filter: none;
}

.pay-note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #8a857a;
  text-wrap: pretty;
}

@media (max-width: 60rem) {
  .pay-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .pay-summary {
    grid-row: auto;
    position: static;
  }
}

@media (max-width: 40rem) {
  .cl-meta {
    flex: 1 1 100%;
  }

  .pay-opt {
    flex-wrap: wrap;
  }
}


.legend-note {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #8a857a;
}


/* Nemokamų KET testų įėjimas navigacijoje */
.nav-free {
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
}
.free-tag {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 0.38rem;
  border-radius: 5px;
  background: rgba(76, 208, 138, 0.16);
  color: #4cd08a;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
/* Navigacijoje — taškas, ne žodis: antraštė netelpa į vieną eilę su etikete */
.free-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4cd08a;
  flex: 0 0 6px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Teisinių dokumentų naršymas */
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.62rem;
  padding-top: 2rem;
}
.legal-nav a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 1.12rem;
  border: 1px solid rgba(247, 243, 234, 0.16);
  border-radius: 10px;
  color: var(--chalk);
  font-size: 0.875rem;
  text-decoration: none;
  transition: border-color 0.16s, background 0.16s;
}
.legal-nav a:hover {
  border-color: rgba(247, 243, 234, 0.32);
}
.legal-nav a.is-on {
  border-color: rgba(124, 155, 255, 0.4);
  background: rgba(47, 91, 255, 0.1);
}

/* Vieta teisiniam tekstui įklijuoti */
.paste-zone {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 420px;
  margin-top: 1.6rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.4rem, 3vw, 2.25rem);
  border: 1px dashed rgba(247, 243, 234, 0.26);
  border-radius: 12px;
  background: rgba(247, 243, 234, 0.02);
}
.paste-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.62rem;
}
.paste-hint {
  color: #8a857a;
  font-size: 0.84rem;
}
.paste-title {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #b4afa4;
}
.paste-body {
  max-width: 84ch;
  color: #8a857a;
  font-size: 0.97rem;
  line-height: 1.72;
  white-space: pre-wrap;
  tab-size: 3;
  text-wrap: pretty;
}
/* Įklijuotas dokumentas: numeracija stulpelyje */
.paste-body h2,
.paste-body h3 {
  margin: 2.2rem 0 0.4rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.06rem, 1.9vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--chalk);
}
.paste-body p {
  margin: 0 0 0.62rem;
}
.paste-body ol,
.paste-body ul {
  margin: 0.4rem 0 0.9rem;
  padding-left: 2.9rem;
}
.paste-body li {
  margin-bottom: 0.5rem;
  padding-left: 0.4rem;
}
.paste-body li::marker {
  color: #8a857a;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pill.is-draft {
  background: rgba(255, 198, 109, 0.18);
  border: 1px solid rgba(255, 198, 109, 0.45);
  color: #ffd79a;
  color: #ffc66d;
}
.note.is-info {
  border-left-color: var(--link, #7c9bff);
  background: rgba(47, 91, 255, 0.07);
}
.updated {
  margin: 0.5rem 0 0;
  color: #8a857a;
  font-size: 0.875rem;
}


/* ---------- KET teorijos platforma ---------- */
.eyebrow.is-free { color: #4cd08a; }
.theory-head { max-width: 56ch; }
.landing.theory > .page-head { padding-block-end: var(--s-3); }
.theory .lede { color: #b4afa4; }

.theory-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: clamp(0.875rem, 2vw, 1.25rem);
}
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(247, 243, 234, 0.09);
  border-radius: 12px;
  background: #16161a;
}
.seg {
  height: 40px;
  padding: 0 1.125rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #b4afa4;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.16s;
}
.seg:hover { color: var(--chalk); }
.seg.is-on { background: var(--chalk); color: #121211; font-weight: 600; }

.quiet-tabs { display: flex; flex-wrap: wrap; gap: 3px; }
.qtab {
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  height: 36px;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8a857a;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.qtab:hover { color: var(--chalk); }
.qtab.is-on { background: rgba(247, 243, 234, 0.07); color: var(--chalk); }
.qn { color: #a39e92; font-weight: 600; font-variant-numeric: tabular-nums; }

.onboard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.62rem 1.375rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid rgba(76, 208, 138, 0.2);
  border-radius: 11px;
  background: rgba(76, 208, 138, 0.05);
  margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
}
.onboard strong { color: #4cd08a; font-size: 0.84rem; white-space: nowrap; }
.onboard p { flex: 1 1 320px; margin: 0; color: #b4afa4; font-size: 0.84rem; line-height: 1.55; text-wrap: pretty; }

.stat-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding-bottom: clamp(1rem, 2.4vw, 1.5rem);
}
.stat-line span { display: inline-flex; align-items: baseline; gap: 0.44rem; color: #8a857a; font-size: 0.78rem; }
.stat-line b {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.stat-line b.ok, .ok { color: #4cd08a; }
.stat-line b.warn { color: #ffc24a; }
.stat-line b.bad, .bad { color: #ff8a7a; }

/* kortelė */
.q-card {
  border: 1px solid rgba(247, 243, 234, 0.11);
  border-radius: 14px;
  background: #16161a;
  overflow: hidden;
}
.q-body {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.375rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
.q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.62rem 0.875rem; }
.q-meta .push { margin-left: auto; }
.pill.is-topic { background: rgba(47, 91, 255, 0.13); color: #7c9bff; }
.q-ref { color: #8a857a; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.q-ref.is-link { color: #7c9bff; }

.intro-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding: clamp(1.5rem, 3.4vw, 2.375rem);
}
.intro-grid > div:first-child { flex: 1 1 400px; min-width: 0; }
.intro-grid h2 {
  margin: 0 0 0.875rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.31rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.22;
  text-wrap: pretty;
}
.intro-grid p { margin: 0 0 1.25rem; max-width: 54ch; color: #b4afa4; font-size: 0.94rem; line-height: 1.62; text-wrap: pretty; }
.spec { flex: 0 1 200px; min-width: 0; margin: 0; }
.spec > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.69rem 0;
  border-bottom: 1px solid rgba(247, 243, 234, 0.07);
}
.spec > div:last-child { border-bottom: 0; }
.spec dt { color: #8a857a; font-size: 0.84rem; }
.spec dd {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.q-split { display: flex; flex-wrap: wrap; gap: clamp(1.125rem, 2.6vw, 2rem); align-items: flex-start; }
.q-col { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.q-col h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.19rem, 2.3vw, 1.625rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.q-illu {
  flex: 1 1 300px;
  min-width: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid rgba(247, 243, 234, 0.09);
  border-radius: 11px;
  background: #1b1b1f;
}
.q-illu figcaption { color: #a39e92; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.q-illu span { color: #8a857a; font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.q-options { display: flex; flex-direction: column; gap: 0.56rem; }
.q-opt {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 58px;
  padding: 0.75rem 1.125rem;
  border: 1px solid rgba(247, 243, 234, 0.11);
  border-radius: 11px;
  background: #1b1b1f;
  color: #e4e0d6;
  font: inherit;
  font-size: 0.97rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.16s;
}
.q-opt.is-static { cursor: default; }
.q-opt:hover:not(:disabled):not(.is-static) { border-color: rgba(247, 243, 234, 0.22); }
.q-opt:disabled { cursor: default; }
.q-opt i {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(247, 243, 234, 0.06);
  color: #8a857a;
  font-size: 0.78rem;
  font-weight: 700;
  font-style: normal;
}
.q-opt span { flex: 1; min-width: 0; text-wrap: pretty; }
.q-opt em { flex: 0 0 auto; font-size: 0.94rem; font-weight: 700; font-style: normal; }
.q-opt em.tag { font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.q-opt.is-picked { background: rgba(47, 91, 255, 0.1); border-color: rgba(124, 155, 255, 0.5); color: var(--chalk); }
.q-opt.is-picked i { background: rgba(124, 155, 255, 0.18); color: #7c9bff; }
.q-opt.is-right { background: rgba(76, 208, 138, 0.1); border-color: rgba(76, 208, 138, 0.42); color: var(--chalk); }
.q-opt.is-right i, .q-opt.is-right em { color: #4cd08a; }
.q-opt.is-wrong { background: rgba(255, 94, 82, 0.09); border-color: rgba(255, 138, 122, 0.42); color: var(--chalk); }
.q-opt.is-wrong i, .q-opt.is-wrong em { color: #ff8a7a; }
.q-opt.is-dim { color: #8a857a; }

.q-feedback {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.94rem 1.06rem;
  border-radius: 10px;
}
.q-feedback i { flex: 0 0 3px; align-self: stretch; border-radius: 2px; }
.q-feedback strong { display: block; margin-bottom: 0.3rem; font-size: 0.875rem; }
.q-feedback p { margin: 0; color: #b4afa4; font-size: 0.9rem; line-height: 1.65; text-wrap: pretty; }
.q-feedback p.rule { margin-top: 0.38rem; color: #7c9bff; font-size: 0.82rem; }
.q-feedback.is-ok { background: rgba(76, 208, 138, 0.07); border: 1px solid rgba(76, 208, 138, 0.2); }
.q-feedback.is-ok i { background: #4cd08a; }
.q-feedback.is-ok strong { color: #4cd08a; }
.q-feedback.is-bad { background: rgba(255, 94, 82, 0.06); border: 1px solid rgba(255, 138, 122, 0.2); }
.q-feedback.is-bad i { background: #ff8a7a; }
.q-feedback.is-bad strong { color: #ff8a7a; }
.q-feedback.is-info { background: rgba(247, 243, 234, 0.03); border: 1px solid rgba(247, 243, 234, 0.07); }
.q-feedback.is-info i { background: #7c9bff; }

.q-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem clamp(1.375rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(247, 243, 234, 0.09);
  background: rgba(247, 243, 234, 0.02);
}
.q-foot.is-hints { gap: 0.38rem 1.25rem; padding-top: 0.81rem; padding-bottom: 0.81rem; color: #8a857a; font-size: 0.78rem; }
.q-foot.is-hints b { color: #c9c4b8; }
.q-foot .btn-cta:disabled { background: rgba(247, 243, 234, 0.06); color: #8a857a; cursor: default; filter: none; }
.btn.is-flagged { border-color: rgba(255, 194, 74, 0.45); color: #ffc24a; }

.theory-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.875rem; }
.theory-progress .bar { flex: 1; min-width: 0; height: 4px; border-radius: 3px; background: rgba(247, 243, 234, 0.1); overflow: hidden; }
.theory-progress .bar i { display: block; height: 100%; border-radius: 3px; background: #7c9bff; transition: width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.theory-progress span { color: #8a857a; font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dot-grid { display: flex; flex-wrap: wrap; gap: 0.38rem; margin-bottom: 0.875rem; }
.dot {
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(247, 243, 234, 0.05);
  color: #8a857a;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.dot.is-done { background: rgba(124, 155, 255, 0.16); color: #7c9bff; }
.dot.is-flag { border-color: rgba(255, 194, 74, 0.45); }
.dot.is-cur { border-color: rgba(247, 243, 234, 0.4); }
.dot.is-rev { width: 38px; height: 38px; font-size: 0.78rem; }
.dot.is-rev.is-ok { background: rgba(76, 208, 138, 0.13); color: #4cd08a; }
.dot.is-rev.is-bad { background: rgba(255, 94, 82, 0.12); color: #ff8a7a; }
.dot.is-rev.is-cur { border-color: var(--chalk); }

.result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.625rem, 4vw, 2.5rem);
  margin-bottom: clamp(1.25rem, 3vw, 1.875rem);
}
.result-head > div:first-child { flex: 1 1 340px; min-width: 0; }
.result-head h2 {
  margin: 0 0 0.56rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.result-head p { margin: 0; max-width: 56ch; color: #b4afa4; font-size: 0.94rem; line-height: 1.62; text-wrap: pretty; }
.res-score { display: flex; flex-direction: column; gap: 0.31rem; }
.res-score span { color: #8a857a; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.res-score strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.res-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.review { display: flex; flex-direction: column; gap: 1rem; }
.review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.review-head p { margin: 0; color: #8a857a; font-size: 0.82rem; text-wrap: pretty; }

.topic-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.topic-card {
  display: flex;
  flex-direction: column;
  gap: 0.81rem;
  padding: 1.25rem 1.375rem;
  border: 1px solid rgba(247, 243, 234, 0.11);
  border-radius: 12px;
  background: #16161a;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.topic-card:hover { border-color: rgba(247, 243, 234, 0.24); }
.tc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.tc-head strong { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; text-wrap: pretty; }
.tc-head em { color: #8a857a; font-size: 0.78rem; font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-bar { display: block; height: 4px; border-radius: 3px; background: rgba(247, 243, 234, 0.1); overflow: hidden; }
.tc-bar i { display: block; height: 100%; border-radius: 3px; background: #7c9bff; transition: width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tc-bar i.is-full { background: #4cd08a; }
.tc-meta { color: #8a857a; font-size: 0.82rem; }

.practice-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; margin-bottom: 0.875rem; }
.practice-head strong { font-family: "Space Grotesk", sans-serif; font-size: 1.19rem; font-weight: 600; letter-spacing: -0.02em; }
.practice-head span { margin-left: auto; color: #8a857a; font-size: 0.82rem; font-variant-numeric: tabular-nums; }

.cat-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.cat-search input {
  flex: 1 1 320px;
  min-width: 0;
  height: 48px;
  padding: 0 1.125rem;
  border: 1px solid rgba(247, 243, 234, 0.14);
  border-radius: 11px;
  background: #16161a;
  color: var(--chalk);
  font: inherit;
  font-size: 0.9rem;
}
.cat-search input:focus { outline: 2px solid rgba(124, 155, 255, 0.5); outline-offset: 1px; }
.cat-search span { color: #8a857a; font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.chip {
  height: 34px;
  padding: 0 0.875rem;
  border: 1px solid rgba(247, 243, 234, 0.11);
  border-radius: 8px;
  background: transparent;
  color: #b4afa4;
  font: inherit;
  font-size: 0.81rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.chip:hover { border-color: rgba(247, 243, 234, 0.28); color: var(--chalk); }
.chip.is-on { border-color: rgba(124, 155, 255, 0.4); background: rgba(47, 91, 255, 0.1); color: var(--chalk); }

.q-list { display: flex; flex-direction: column; gap: 0.56rem; }
.q-row { border: 1px solid rgba(247, 243, 234, 0.09); border-radius: 11px; background: #16161a; overflow: hidden; transition: border-color 0.16s; }
.q-row.is-open { border-color: rgba(124, 155, 255, 0.32); }
.q-row-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.q-id { flex: 0 0 auto; color: #8a857a; font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.q-txt { flex: 1; min-width: 0; color: #e4e0d6; font-size: 0.94rem; line-height: 1.45; text-wrap: pretty; }
.q-tp { flex: 0 0 auto; color: #7c9bff; font-size: 0.75rem; white-space: nowrap; }
.q-row-body { padding: 1rem 1.25rem 1.125rem; border-top: 1px solid rgba(247, 243, 234, 0.07); }
.q-row-body p { margin: 0 0 0.75rem; font-size: 0.9rem; line-height: 1.65; }
.q-row-body .expl { color: #b4afa4; }
.q-row-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.q-row-foot .rule { color: #7c9bff; font-size: 0.82rem; }

/* KET testų mygtukai. Ta pati geometrija kaip .button — vienas
   touch aukštis (--tap) visame projekte. */
.btn {
  display: inline-flex;
  max-width: 100%;
  min-height: var(--tap);
  overflow-wrap: break-word;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: none;
  color: var(--chalk);
  font: inherit;
  font-size: clamp(0.875rem, 2.4vw, 0.94rem);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.16s var(--ease), border-color 0.16s var(--ease),
    color 0.16s var(--ease), filter 0.16s var(--ease), transform 0.12s var(--ease);
}

.btn svg {
  flex: 0 0 auto;
  margin-left: 0.4rem;
}

.btn:active {
  transform: scale(0.985);
}

.btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.btn-cta {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--on-cta);
}

.btn-cta:hover {
  color: var(--on-cta);
  filter: brightness(1.08);
}

.btn-ghost {
  border-color: rgba(247, 243, 234, 0.18);
  color: var(--chalk);
}

.btn-ghost:hover {
  border-color: rgba(247, 243, 234, 0.32);
  background: rgba(247, 243, 234, 0.05);
  color: var(--chalk);
}

.btn:disabled {
  cursor: default;
  filter: none;
  opacity: 0.55;
}

.section-note {
  margin: var(--s-2) 0 0;
  color: #8a857a;
  font-size: var(--fs-meta);
  line-height: 1.5;
}

.btn-more {
  width: 100%;
  height: 50px;
  margin-top: 0.56rem;
  border: 1px solid rgba(247, 243, 234, 0.14);
  border-radius: 11px;
  background: transparent;
  color: #c9c4b8;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.btn-more:hover { background: rgba(247, 243, 234, 0.05); border-color: rgba(247, 243, 234, 0.28); color: var(--chalk); }

.list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; margin-bottom: 1rem; }
.list-head h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 1.31rem; font-weight: 600; letter-spacing: -0.02em; }
.list-head > span { color: #8a857a; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.list-head .btn { margin-left: auto; }

.empty {
  margin: 0;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px dashed rgba(247, 243, 234, 0.16);
  border-radius: 12px;
  color: #8a857a;
  font-size: 0.9rem;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

.practice-band {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3.4vw, 2.125rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(255, 194, 74, 0.2);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(255, 194, 74, 0.09) 0%, rgba(255, 194, 74, 0.03) 46%, rgba(47, 91, 255, 0.06) 100%);
  overflow: hidden;
}
.practice-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffc24a 0%, #ffd173 38%, #7c9bff 100%);
}
.practice-band > div { flex: 1 1 380px; min-width: 0; }
.practice-band strong { display: block; margin-bottom: 0.38rem; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.06rem, 2vw, 1.31rem); font-weight: 600; letter-spacing: -0.02em; text-wrap: pretty; }
.practice-band p { margin: 0; max-width: 58ch; color: #8a857a; font-size: 0.875rem; line-height: 1.6; text-wrap: pretty; }
.practice-band .btn { flex: 0 0 auto; }

/* ---------- Nemokamų testų juosta pradiniame ---------- */
.free-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid rgba(76, 208, 138, 0.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(47, 91, 255, 0.09) 0%, rgba(76, 208, 138, 0.02) 62%, rgba(18, 18, 17, 0) 100%);
}
.free-band > div:first-child { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.free-band h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.625rem, 3.6vw, 2.625rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}
.free-band h2 span { color: #8a857a; }
.free-band p { margin: 0; max-width: 50ch; color: #c9c4b8; font-size: clamp(0.94rem, 1.6vw, 1.09rem); line-height: 1.62; text-wrap: pretty; }
.free-band .btn-free {
  background: var(--link);
  color: #0b1410;
  border: 0;
}
.free-band .btn-free:hover { filter: brightness(1.08); color: #0b1410; }
.pill.is-free {
  align-self: flex-start;
  background: rgba(76, 208, 138, 0.14);
  border: 1px solid rgba(76, 208, 138, 0.28);
  color: #4cd08a;
}
.funnel {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid rgba(247, 243, 234, 0.09);
  border-radius: 13px;
  background: rgba(247, 243, 234, 0.09);
  overflow: hidden;
}
.funnel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.94rem;
  padding: 1.125rem 1.25rem;
  background: var(--asphalt-deep, #121211);
}
.funnel-row i {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  font-style: normal;
}
.funnel-row div { flex: 1 1 190px; min-width: 0; }
.funnel-row .tag-spacer { margin-left: auto; }
.funnel-row strong { display: block; font-size: 0.94rem; font-weight: 600; letter-spacing: -0.01em; }
.funnel-row span { color: #8a857a; font-size: var(--fs-meta); text-wrap: pretty; }
.funnel-row .tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 0.5rem;
  border-radius: 6px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.funnel-row.is-free i, .funnel-row.is-free .tag { background: rgba(76, 208, 138, 0.14); color: #4cd08a; }
.funnel-row.is-paid i, .funnel-row.is-paid .tag { background: rgba(255, 194, 74, 0.14); color: #ffc24a; }
.funnel-row.is-end i { background: rgba(247, 243, 234, 0.08); color: #b4afa4; }


.button.secondary.is-free {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  border-color: rgba(76, 208, 138, 0.34);
}
.button.secondary.is-free:hover {
  background: rgba(76, 208, 138, 0.08);
  border-color: rgba(76, 208, 138, 0.55);
}
.button.btn-free {
  background: var(--link);
  color: #0b1410;
  border-color: #4cd08a;
}
.button.btn-free:hover { filter: brightness(1.08); color: #0b1410; }


/* Bendra statistika + kategorijos */
#topic-overview { display: flex; flex-direction: column; gap: clamp(1rem, 2.4vw, 1.5rem); margin-bottom: clamp(1rem, 2.4vw, 1.5rem); }
.overview {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding: clamp(1.375rem, 3vw, 1.875rem);
  border: 1px solid rgba(247, 243, 234, 0.11);
  border-radius: 14px;
  background: #16161a;
}
.ov-copy { flex: 1 1 340px; min-width: 0; }
.ov-copy h2 {
  margin: 0.56rem 0 0.56rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.125rem, 2.2vw, 1.44rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.ov-copy p:last-child { margin: 0; max-width: 52ch; color: #8a857a; font-size: 0.875rem; line-height: 1.6; text-wrap: pretty; }
.ov-meter { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 0.875rem; justify-content: center; }
.ov-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.ov-row span { color: #8a857a; font-size: 0.82rem; }
.ov-row strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ov-meter .tc-bar { height: 5px; }
.ov-facts { display: flex; flex-wrap: wrap; gap: 0.38rem 1.125rem; }
.ov-facts span { color: #8a857a; font-size: 0.82rem; }
.ov-facts b { color: var(--chalk); font-weight: 600; font-variant-numeric: tabular-nums; }

.cat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.62rem 1.125rem; }
.cat-groups { display: flex; flex-wrap: wrap; gap: 0.62rem 1.125rem; }
.cat-group { display: inline-flex; gap: 0.31rem; }
.cat-chip {
  height: 32px;
  min-width: 38px;
  padding: 0 0.69rem;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 8px;
  background: transparent;
  color: #8a857a;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.cat-chip:hover { border-color: rgba(247, 243, 234, 0.3); }
.cat-chip.is-on { border-color: rgba(76, 208, 138, 0.45); background: rgba(76, 208, 138, 0.11); color: #4cd08a; }

.tc-desc { color: #8a857a; font-size: 0.82rem; line-height: 1.55; text-wrap: pretty; }
.topic-card .tc-bar { margin-top: auto; }
.topic-card .tc-meta { color: #a39e92; font-size: 0.78rem; }
.topic-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.finish-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.62rem 0.875rem; margin-left: auto; }
.blanks { color: #ffc24a; font-size: 0.78rem; }


/* --- Theory responsive --- */
/* 320–479 base · 480 large mobile · 768 tablet · 1024 desktop · 1440 wide.
   Mobile-first: the rules below only relax the compact base. */
@media (max-width: 767px) {
  .theory-head { max-width: none; }
  .theory .lede { font-size: 0.9rem; line-height: 1.55; }
  .theory-head h1 { font-size: clamp(1.56rem, 6.4vw, 2.4rem); line-height: 1.06; }
  .theory-head .eyebrow { font-size: 0.62rem; }
  .page-head.theory-head { padding-bottom: 0.94rem; }

  /* režimai: trys vienodi stulpeliai, tekstas laužiasi, o ne nukerpamas */
  .theory-bar { gap: 0.62rem; margin-bottom: 0.75rem; }
  .segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 3px; }
  .seg {
    height: auto;
    min-height: 44px;
    padding: 0.38rem 0.38rem;
    font-size: 0.78rem;
    line-height: 1.18;
    text-align: center;
    white-space: normal;
    text-wrap: balance;
  }
  /* antriniai veiksmai — žemesnio prioriteto, bet touch-friendly */
  .quiet-tabs { width: 100%; }
  .qtab { position: relative; height: 40px; padding: 0 0.75rem; font-size: 0.8rem; }
  .qtab::after { position: absolute; inset: -2px; content: ""; }

  .onboard { gap: 0.25rem 0.5rem; padding: 0.56rem 0.75rem; margin-bottom: 0.62rem; align-items: baseline; }
  .onboard strong { font-size: 0.75rem; }
  .onboard p {
    flex: 1 1 100%;
    font-size: 0.78rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .stat-line { gap: 0.5rem 1.125rem; padding-bottom: 0.875rem; }
  .stat-line span { flex: 1 1 0; min-width: 0; font-size: 0.72rem; }
  .stat-line b { font-size: 0.94rem; }

  /* kortelės ir tarpai suspausti */
  .q-card, .q-result, .overview, .topic-card, .q-row { border-radius: 12px; }
  .q-body { gap: 0.875rem; padding: 0.94rem 0.94rem 0.81rem; }
  .intro-grid { gap: 1rem; padding: 0.94rem; }
  .intro-grid h2 { font-size: clamp(1.19rem, 4.4vw, 1.56rem); margin-bottom: 0.56rem; }
  .intro-grid p { margin-bottom: 0.875rem; font-size: 0.875rem; }
  .intro-grid > div:first-child, .spec { flex: 1 1 100%; }

  /* Egzamino informacija telefone — viena metrikų eilutė
     (16 klausimų · 2 klaidos · 6 temos), o ne trys dashboard blokai. */
  .spec {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
  }

  .spec > div {
    display: inline-flex;
    gap: 0.3rem;
    align-items: baseline;
    padding: 0;
    border-bottom: 0;
  }

  .spec > div + div::before {
    margin-right: 0.45rem;
    color: rgba(247, 243, 234, 0.28);
    content: "·";
  }

  .spec dt { order: 2; font-size: 0.78rem; }
  .spec dd { order: 1; font-size: 0.94rem; }

  .q-foot { gap: 0.5rem; padding: 0.81rem 0.94rem; }

  /* Klaviatūros užuominos telefone nieko neduoda. */
  .q-foot.is-hints { display: none; }

  /* klausimas + iliustracija: viena kolona, žemesnė iliustracija */
  .q-split { gap: 0.875rem; }
  .q-col { flex: 1 1 100%; gap: 0.75rem; }
  .q-col h2 { font-size: clamp(1.09rem, 4.4vw, 1.375rem); line-height: 1.32; }
  .q-illu { flex: 1 1 100%; aspect-ratio: 16 / 9; }
  .q-options { gap: 0.44rem; }
  .q-opt { min-height: 50px; padding: 0.69rem 0.875rem; gap: 0.75rem; font-size: 0.9rem; }
  .q-opt i { flex: 0 0 26px; width: 26px; height: 26px; font-size: 0.72rem; }
  .q-feedback { padding: 0.75rem 0.875rem; gap: 0.62rem; }
  .q-feedback p { font-size: 0.84rem; }

  /* egzamino navigacija: 44px touch, tvarkingas tinklelis */
  .theory-progress { gap: 0.75rem; margin-bottom: 0.62rem; }
  .theory-progress span { font-size: 0.75rem; }
  .dot-grid { gap: 5px; margin-bottom: 0.62rem; }
  .dot { width: 34px; height: 34px; font-size: 0.75rem; }
  .dot.is-rev { width: 40px; height: 40px; font-size: 0.8rem; }
  #exam-prev, #exam-next { flex: 1 1 0; min-width: 0; justify-content: center; }
  .finish-wrap { flex: 1 1 100%; margin-left: 0; }
  .finish-wrap .btn { flex: 1 1 auto; justify-content: center; }

  /* rezultatas */
  .result-head { gap: 0.875rem 1rem; padding: 1rem 0.94rem; margin-bottom: 0.875rem; }
  .result-head h2 { font-size: clamp(1.375rem, 5.6vw, 1.75rem); }
  .result-head p { font-size: 0.875rem; }
  .res-score strong { font-size: 1.625rem; }
  .res-cta { flex: 1 1 100%; }
  .res-cta .btn { flex: 1 1 0; justify-content: center; }
  .review-head p { flex-basis: 100%; font-size: 0.75rem; }

  /* temos: kompaktiškas 2 stulpelių tinklelis be aprašymų */
  .overview { gap: 1rem; padding: 0.94rem; }
  .ov-copy, .ov-meter { flex: 1 1 100%; }
  .ov-copy h2 { font-size: 1.06rem; margin: 0.44rem 0 0.44rem; }
  .ov-copy p:last-child { font-size: 0.82rem; }
  .ov-facts span { font-size: 0.75rem; }
  #topic-overview { gap: 0.75rem; margin-bottom: 0.75rem; }
  .cat-row { gap: 0.44rem 0.75rem; }
  .cat-chip { height: 38px; min-width: 42px; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .topic-card { gap: 0.56rem; padding: 0.81rem 0.875rem; }
  .tc-head { flex-direction: column; align-items: flex-start; gap: 0.19rem; }
  .tc-head strong { font-size: 0.875rem; line-height: 1.28; }
  .tc-head em { font-size: 0.72rem; }
  .tc-desc { display: none; }
  .tc-meta { font-size: 0.72rem; }
  .practice-head { gap: 0.5rem 0.75rem; }
  .practice-head strong { font-size: 1rem; }

  /* katalogas: paieška pirma, tanki eilutė su 2 eilučių clamp */
  .cat-search { gap: 0.62rem; margin-bottom: 0.75rem; }
  .cat-search input { flex: 1 1 100%; height: 46px; font-size: 0.875rem; }
  .cat-search span { font-size: 0.75rem; }
  .chips { gap: 0.38rem; margin-bottom: 0.75rem; }
  .chip { height: 38px; padding: 0 0.75rem; font-size: 0.78rem; }
  .q-list { gap: 0.44rem; }
  .q-row-top { gap: 0.69rem; padding: 0.75rem 0.875rem; min-height: 44px; }
  .q-id { font-size: 0.72rem; }
  .q-txt {
    font-size: 0.875rem;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .q-tp { display: none; }
  .q-row-body { padding: 0.75rem 0.875rem 0.875rem; }
  .q-row-body p { font-size: 0.84rem; }
  .btn-more { height: 46px; font-size: 0.82rem; }

  .list-head { gap: 0.5rem 0.75rem; }
  .list-head h2 { font-size: 1.125rem; }
  .list-head .btn { flex: 1 1 100%; margin-left: 0; justify-content: center; }
  .empty { padding: 1.375rem 1rem; font-size: 0.84rem; }

  .practice-band { gap: 0.75rem; margin-top: 1.5rem; padding: 1rem 0.94rem; }
  .practice-band > div { flex: 1 1 100%; }
  .practice-band strong { font-size: 1rem; }
  .practice-band p { font-size: 0.8rem; }
  .practice-band .btn { flex: 1 1 100%; justify-content: center; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-col { flex: 1 1 300px; }
  .q-illu { flex: 1 1 240px; }
  .dot { width: 32px; height: 32px; }
}

/* ─────────────────────────────────────────────────────────────
   ANTRAŠTĖ IR MENIU
   Mobile (<1024px): viena 56px eilutė — logotipas · paskyra · CTA · meniu.
   Navigacija gyvena fixed drawer'yje, todėl nėra nei nukirptų
   tekstų, nei horizontalaus nav scroll'o. Riba 1024px pasirinkta
   pagal turinį: 6 punktai + CTA inline reikalauja ~1000px.
   ───────────────────────────────────────────────────────────── */
/* Kai naršyklės zoom ar sistemos šriftas išpučia eilutę, veiksmai
   persirikiuoja į kitą eilutę — niekada neišlenda už viewport'o. */
.header-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  margin-left: auto;
}

.header-cta {
  min-width: 0;
}

.header-acct {
  display: flex;
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}

.header-acct::before,
.header-acct::after {
  background: currentColor;
  content: "";
}

.header-acct::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.header-acct::after {
  width: 0.9rem;
  height: 0.4rem;
  border-radius: 0.45rem 0.45rem 0 0;
}

.header-acct:hover,
.header-acct:focus-visible {
  background: rgba(247, 243, 234, 0.06);
  color: var(--ink);
}

.header-acct[aria-current="page"] {
  color: var(--ink);
}

/* Meniu mygtukas: vizualiai 1.125rem brūkšniai, hit zona visi 44px. */
.nav-toggle {
  display: none;
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0.6rem;
  background: none;
  color: var(--ink);
  cursor: pointer;
  place-items: center;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: rgba(247, 243, 234, 0.06);
}

.nav-bars,
.nav-bars::before,
.nav-bars::after {
  display: block;
  width: 1.125rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s var(--ease), opacity 0.14s linear;
}

.nav-bars::before,
.nav-bars::after {
  position: absolute;
  content: "";
}

.nav-bars {
  position: relative;
}

.nav-bars::before {
  transform: translateY(-0.34rem);
}

.nav-bars::after {
  transform: translateY(0.34rem);
}

body.nav-open .nav-bars {
  transform: rotate(45deg);
}

body.nav-open .nav-bars::before {
  opacity: 0;
}

body.nav-open .nav-bars::after {
  transform: rotate(-90deg);
}

@media (max-width: 63.99rem) {
  .nav-toggle {
    display: grid;
  }

  .site-nav {
    position: fixed;
    z-index: 60;
    inset: var(--hdr-h) 0 0;
    display: flex;
    flex-direction: column;
    padding: var(--s-3) var(--gut) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(18, 18, 17, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  }

  /* Užraktą uždeda nav.js (išsaugo ir grąžina scroll poziciją);
     CSS taisyklė čia nuneštų vartotoją į puslapio viršų. */
  body.nav-open .site-header {
    border-bottom-color: transparent;
  }

  body.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Matomumas persijungia iškart, kad fokusas ir touch veiktų pirmame kadre. */
  .site-nav {
    transition-property: opacity, transform;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .site-header .site-nav a,
  .site-header.is-sticky .site-nav a {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.15rem;
    border-radius: 0;
    border-bottom: 1px solid var(--hairline);
    background: none;
    color: var(--chalk);
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
  }

  .site-header .site-nav a[aria-current="page"] {
    color: var(--ink);
  }

  .site-header .site-nav a[aria-current="page"]::after {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--signal);
    content: "";
  }

  .site-nav .nav-free {
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    text-transform: none;
  }

  .nav-cta-item {
    margin-top: var(--s-4);
  }


  .site-header .site-nav .nav-cta-item a,
  .site-header.is-sticky .site-nav .nav-cta-item a {
    justify-content: center;
    min-height: 3.25rem;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--cta);
    color: var(--on-cta);
    font-weight: 650;
  }
}

/* Drawer'io CTA nepaveldi nei .site-nav a pilkos, nei .button mėlynos. */
.nav-cta-item a {
  border-color: var(--cta);
  background: var(--cta);
  color: var(--on-cta);
}

@media (min-width: 64rem) {
  .nav-cta-item {
    display: none;
  }
}


/* --- Theory solidity: pilno pločio paviršiai, plonos siūlės --- */
/* Parašė deklaruota vieną kartą: main yra width:min(72rem, 100% - 2rem),
   todėl iki 1184px tikroji parašė yra lygiai 1rem. Bleed'as ją panaikina. */
@media (max-width: 767px) {
  .theory { --gut: 1rem; }
  /* viena valdymo juosta iki krašto, ne plaukiančios kortelės */
  .theory-bar {
    margin: 0 calc(var(--gut) * -1) 0.75rem;
    padding: 0.62rem var(--gut);
    background: #141413;
    border-bottom: 1px solid rgba(247, 243, 234, 0.09);
  }

  /* kortelės liečia ekrano kraštus, lieka tik viršaus/apačios linijos */
  .q-card, .q-result, .result-head, .overview, .q-list {
    margin-left: calc(var(--gut) * -1);
    margin-right: calc(var(--gut) * -1);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .q-list { border-top: 0; border-bottom: 0; overflow: hidden; }

  /* klausimų sąrašas — vienas sluoksnis su sulipusiomis siūlėmis */
  .q-list { gap: 0; }
  .q-row {
    margin-bottom: -1px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .q-row.is-open { border-color: rgba(124, 155, 255, 0.32); }

  /* temų tinklelis — plonos siūlės, ne 8px tarpai */
  .topic-grid {
    gap: 1px;
    margin-left: calc(var(--gut) * -1);
    margin-right: calc(var(--gut) * -1);
    background: rgba(247, 243, 234, 0.09);
    border-top: 1px solid rgba(247, 243, 234, 0.09);
    border-bottom: 1px solid rgba(247, 243, 234, 0.09);
  }
  .topic-card { border: 0; border-radius: 0; }

  /* onboarding ir statistika lieka teksto stulpelyje — bet lygiuojasi su juosta */
  .onboard { border-radius: 10px; }
}


/* ── Prototipo (Website.dc.html) matmenys ─────────────────────────────
   Reikšmės perimtos 1:1 iš prototipo, kad produkcijos puslapiai atrodytų
   identiškai: tipografijos skalė, sekcijų ritmas, mygtukų aukščiai.
   Šis blokas yra failo gale, todėl jis nugali senąsias reikšmes. */

/* Antraštės */
.landing .page-head h1,
.landing.legal h1 {
  font-size: clamp(2rem, 5vw, 3.625rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.landing .hero h1 {
  font-size: clamp(2.375rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.landing.theory .theory-head h1 {
  font-size: clamp(1.5625rem, 6.4vw, 2.875rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.account-head h2 {
  font-size: clamp(1.625rem, 3.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.landing h2 {
  letter-spacing: -0.035em;
}

.landing .section-head h2,
.landing .split > div > h2 {
  font-size: clamp(1.75rem, 4vw, 2.875rem);
  line-height: 1.08;
}

/* Įžanginis tekstas */
.hero .lead {
  max-width: 46ch;
  color: #c9c4b8;
  font-size: clamp(1rem, 1.7vw, 1.1875rem);
  line-height: 1.6;
}

.page-head .lead,
.theory-head .lede {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Sekcijų ritmas: prototipe kiekviena sekcija turi padding-top,
   ne apatinę paraštę — todėl paraštes nulinam. */
.landing .hero {
  padding-block: clamp(0.875rem, 5vw, 6.5rem) clamp(1.25rem, 4vw, 4rem);
}

.landing > section {
  margin-block: 0;
  padding-block: 0;
}

.landing > section + section,
.landing > .free-band + section {
  padding-top: clamp(1.75rem, 7vw, 7.5rem);
}

.landing > .stat-band + section {
  padding-top: clamp(1.75rem, 7vw, 7.5rem);
}

/* Paskyros skiltys — vienodas tarpas, nesvarbu kuri atidaryta. */
.landing > section[role="tabpanel"],
.landing > section[role="tabpanel"] + section[role="tabpanel"] {
  padding-top: 1.75rem;
}

/* Paskyros antraštė turi hairline apačioje — jai paraštė reikalinga. */
.landing > .account-head {
  padding-bottom: 1.75rem;
}

.landing .hero + .stat-band {
  padding-top: 0;
}

/* Hero paraštės perrašomos po nulinimo. */
.landing .hero {
  padding-block: clamp(0.875rem, 5vw, 6.5rem) clamp(1.25rem, 4vw, 4rem);
}

/* Statistikos juosta */
.stat-band {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
}

.stat-band > div {
  gap: 0.5rem;
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2.125rem);
}

.stat-band h2 {
  font-size: clamp(1.1875rem, 2vw, 1.4375rem);
  letter-spacing: -0.025em;
}

.stat-band p {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Mygtukai: hero 54, antriniai 48, kompaktiniai 46 */
.free-band .actions .button,
.hero .actions .button {
  padding-inline: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0.6875rem;
}

.free-band .actions .button {
  min-height: 3.25rem;
}

.hero .actions .button {
  min-height: 3.375rem;
}

/* KET juostos rėmas — mėlynas, kaip prototipe. */
.free-band {
  border-color: var(--signal);
}

.cta-panel .button {
  min-height: 3.375rem;
}


/* ── 2026-08 auditas: 3D sankryža, scroll progresas, reveal ─────────────── */
.stage-card {
  position: relative;
  margin-block-end: clamp(0.75rem, 2vw, 1.25rem);
  border: 1px solid rgba(247, 243, 234, .1);
  border-radius: 14px;
  overflow: hidden;
  background: #121211;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
}
.road-stage { display: block; width: 100%; height: clamp(11.25rem, 26vw, 18.75rem); }
.stage-cap {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.875rem clamp(1rem, 3vw, 1.5rem);
  background: linear-gradient(180deg, rgba(18, 18, 17, 0), rgba(18, 18, 17, .92) 62%);
  pointer-events: none;
}
.stage-cap b {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a857a;
}
.stage-cap b::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--cta, #ffc24a); }
.stage-cap span { min-width: 0; font-size: 0.84375rem; line-height: 1.5; color: #b4afa4; }

.scroll-progress { position: sticky; top: var(--hdr-h); z-index: 49; height: 2px; }
.scroll-progress i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cta, #ffc24a), #7c9bff);
}

@keyframes om-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes om-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll(root)) {
    .scroll-progress i { animation: om-grow linear both; animation-timeline: scroll(root); }
  }
  [data-reveal] {
    animation: om-reveal .5s cubic-bezier(.16, 1, .3, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .scroll-progress { display: none; }
}


/* ── 2026-08 auditas: progreso žiedas, puslapių perėjimai ───────────────── */
.stat-ring {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  margin-inline-end: 0.375rem;
  vertical-align: -0.2em;
  border-radius: 50%;
  background: conic-gradient(currentColor var(--pct, 0%), rgba(247, 243, 234, .12) 0);
  mask: radial-gradient(circle, transparent 52%, #000 54%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%);
}
.stat-ring.ok { color: #4cd08a; }
.stat-ring.warn { color: #ffc24a; }

/* Sklandus perėjimas tarp puslapių — naršyklėse su View Transitions. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}


/* Kortelių gylio reakcija — tas pats judesys kaip prototipe (2px pakilimas). */
@media (prefers-reduced-motion: no-preference) {
  .tile-grid > div,
  .case-grid > div,
  .pack-list a,
  .price-card {
    transition: background .22s cubic-bezier(.2, .8, .2, 1), transform .22s cubic-bezier(.2, .8, .2, 1),
      border-color .18s linear, box-shadow .22s cubic-bezier(.2, .8, .2, 1);
  }
  .tile-grid > div:hover,
  .case-grid > div:hover,
  .pack-list a:hover { transform: translateY(-2px); }
  .price-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
  }
  .pack-list a:active,
  .price-card:active { transform: translateY(0); }
}


.q-foot .is-quiet { color: #a39e92; }


/* ── Release polish: aiškumas, kontrastas, mobile ir saugios būsenos ───── */
:root {
  --muted-soft: #aaa59b;
}

/* Mažas tekstas anksčiau buvo per tamsus ant #121211. */
.landing .hero h1 .dim,
.hero-note,
.stat-band p,
.reason-list p,
.tile-head .n,
.tile-grid p,
.plain-grid p,
.report-tiles dt,
.report-foot,
.pack-name span,
.pack-meta,
.footnotes p,
.faq p,
.footer-about p,
.footer-contact,
.footer-col h2,
.copyright,
.page-head .updated,
.overline,
.after-grid,
.price-card p,
.fact-list dd,
.fact-list .hint,
.step-list p,
.panel p,
.req-table tbody td,
.data-table tbody td,
.acc-row-hint,
.stage-cap b,
.stage-cap span,
.tc-desc,
.topic-card .tc-meta,
.q-foot .is-quiet {
  color: var(--muted-soft);
}

.button:hover {
  border-color: #ffd474;
}

.hero-trust {
  max-width: 58ch;
  margin: 0.75rem 0 0;
  padding-left: 0.8rem;
  border-left: 2px solid rgba(124, 155, 255, 0.55);
  color: var(--muted-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

.text-link {
  display: inline-flex;
  min-height: var(--tap);
  align-items: center;
  color: var(--link);
  font-weight: 600;
  text-decoration-thickness: 1px;
}

/* Mažiau tuščio ploto desktop'e, aiškus ritmas telefone. */
.landing > section + section,
.landing > .free-band + section,
.landing > .stat-band + section {
  padding-top: clamp(2.5rem, 4.5vw, 5.5rem);
}

.landing .hero {
  padding-block: clamp(1.5rem, 4.5vw, 5rem) clamp(1.75rem, 3.5vw, 3.5rem);
}

.price-unit {
  min-height: 1.4em;
  color: var(--muted-soft) !important;
  font-variant-numeric: tabular-nums;
}

.faq details[open] summary::after {
  content: "−";
  transform: none;
}

.req-check {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1rem;
  align-items: center;
  margin-top: 1rem;
}

.req-check .note {
  flex: 1 1 34rem;
  margin: 0;
}

.req-check .button {
  flex: 0 0 auto;
}

.contact-box > div {
  min-width: 0;
}

/* Paskyros puslapis neberodo fiktyvaus vartotojo ar neveikiančio checkout. */
.account-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.account-entry-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(247, 243, 234, 0.14);
  border-radius: 0.9rem;
  background: #16161a;
}

.account-entry-card.is-primary {
  border-color: rgba(255, 194, 74, 0.42);
  background: linear-gradient(135deg, rgba(255, 194, 74, 0.07), #16161a 52%);
}

.account-entry-card h2 {
  margin-top: 0.45rem;
}

.account-entry-card > p:not(.eyebrow) {
  max-width: 48ch;
  margin: 0 0 1.25rem;
  color: var(--muted);
}

.account-entry-card > .button,
.account-entry-card > .actions {
  margin-top: auto;
}

/* Statinė schema lieka net visiškai neįsikrovus JavaScript. */
.road-stage-placeholder {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(110% 100% at 50% 118%, rgba(47, 91, 255, 0.17), transparent 58%),
    linear-gradient(152deg, transparent 43%, rgba(247, 243, 234, 0.08) 43.3% 57%, transparent 57.3%),
    linear-gradient(28deg, transparent 42%, rgba(247, 243, 234, 0.06) 42.3% 56%, transparent 56.3%),
    #141413;
}

road-stage[data-enhanced="true"] > .road-stage-placeholder {
  display: none;
}

@media (max-width: 47.99rem) {
  .landing > section + section,
  .landing > .free-band + section,
  .landing > .stat-band + section {
    padding-top: 2.5rem;
  }

  .price-card-top h2,
  .price-card-top h3 {
    white-space: normal;
  }

  .price-card-top .pill {
    max-width: 100%;
    line-height: 1.25;
    text-align: left;
  }

  .contact-box {
    align-items: stretch;
    padding: 1rem;
  }

  .contact-box > div,
  .contact-box .button {
    flex: 1 1 100%;
    width: 100%;
  }

  .account-entry-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-entry-card .actions,
  .account-entry-card .actions > * {
    width: 100%;
  }

  .req-check .button {
    width: 100%;
  }

  /* Reikalavimų lentelė telefone tampa skaitomomis komponentų kortelėmis. */
  .table-scroll:has(.req-table) {
    overflow: visible;
    border: 0;
  }

  .req-table,
  .req-table tbody,
  .req-table tr,
  .req-table th,
  .req-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

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

  .req-table tbody {
    display: grid;
    gap: 0.625rem;
  }

  .req-table tbody tr {
    overflow: hidden;
    border: 1px solid rgba(247, 243, 234, 0.13);
    border-radius: 0.75rem;
    background: #161615;
  }

  .req-table tbody th {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid rgba(247, 243, 234, 0.1);
    background: rgba(247, 243, 234, 0.025);
  }

  .req-table tbody td {
    display: grid;
    grid-template-columns: minmax(6.75rem, 0.75fr) minmax(0, 1.25fr);
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
  }

  .req-table tbody td + td {
    border-top: 1px solid rgba(247, 243, 234, 0.08);
  }

  .req-table tbody td::before {
    color: var(--muted-soft);
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .qtab {
    min-height: var(--tap);
  }

  .dot,
  .dot.is-rev {
    width: 40px;
    height: 40px;
  }
}

@media print {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .site-header,
  .scroll-progress,
  .nav-toggle {
    position: static !important;
  }
}

.q-row-top:focus-visible {
  outline-offset: -3px;
}

/* ---------------------------------------------------------------------------
   Release faktai: Windows build autentiškumas, pardavėjo rekvizitai,
   pamatuoti reikalavimai ir kainos. Visi šie blokai pagal nutylėjimą yra
   paslėpti (hidden), o parodomi tik tada, kai konfigūracija praeina
   release vartus. */

.build-facts {
  margin: 1.75rem 0 0;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(247, 243, 234, 0.03);
}

.build-facts .fact-row {
  margin: 0.85rem 0 0;
}

.hash-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin: 1.1rem 0 0;
}

.hash-label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a857a;
}

.hash-value {
  flex: 1 1 18rem;
  min-width: 0;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #0d0d0c;
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  /* Santrauka yra vienas ilgas žodis: be šito ji išplėstų puslapį horizontaliai. */
  overflow-wrap: anywhere;
  word-break: break-all;
}

.hash-copy {
  flex: 0 0 auto;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
}

.code-line {
  margin: 0.5rem 0 0;
  padding: 0;
  overflow-x: auto;
}

.code-line code {
  display: block;
  padding: 0.55rem 0.7rem;
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre;
}

/* Pardavėjo rekvizitai */
.requisites {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: 0.55rem 1.25rem;
  margin: 1rem 0 0;
}

.requisites dt {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a857a;
  align-self: center;
}

.requisites dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  .requisites {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .requisites dd {
    margin: 0 0 0.6rem;
  }
}

/* Pamatuotų konfigūracijų sąrašas */
.tested-list {
  margin: 0.85rem 0 0;
  padding: 0 0 0 1.15rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.tested-list li + li {
  margin-top: 0.35rem;
}

.tested-list strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Website.dc.html production parity

   Claude Design dokumentas yra galutinis išdėstymo šaltinis. Šis blokas
   sąmoningai laikomas failo gale: jis grąžina etalono konteinerį, sekcijų ritmą,
   hero proporcijas, 3 x 2 eigos tinklelį ir poraštės sandarą, kartu palikdamas
   semantinį HTML, realias nuorodas ir produkcijos būsenų logiką.
*/

:root {
  --shell: 73.75rem; /* 1180 px */
  --gut: clamp(1.25rem, 5vw, 3rem); /* 20 -> 48 px */
  --hdr-h: 3.5rem;
}

@media (min-width: 48rem) {
  :root {
    --hdr-h: 4rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --hdr-h: 4.5rem;
  }
}

html,
body {
  background: #121211;
}

body {
  position: relative;
  overflow-x: clip;
}

body::before {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 47.5rem;
  pointer-events: none;
  background: radial-gradient(110% 70% at 18% 0%, rgba(47, 91, 255, 0.1), transparent 62%);
  content: "";
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0d0d0c;
}

::-webkit-scrollbar-thumb {
  background: rgba(247, 243, 234, 0.14);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(247, 243, 234, 0.26);
}

.site-header.is-sticky {
  padding-inline: max(var(--gut), calc((100% - var(--shell)) / 2 + var(--gut)));
  min-height: var(--hdr-h);
  background: rgba(18, 18, 17, 0.86);
  border-bottom-color: rgba(247, 243, 234, 0.09);
}

main,
.site-footer,
.copyright {
  position: relative;
  z-index: 1;
  width: min(var(--shell), 100%);
  margin-inline: auto;
  padding-inline: var(--gut);
}

main.landing {
  padding-block: 0;
}

.landing .hero {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.875rem), 1fr));
  gap: clamp(1.125rem, 4vw, 3.5rem);
  padding: clamp(0.875rem, 5vw, 6.5rem) 0 clamp(1.25rem, 4vw, 4rem);
}

.landing .hero > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.landing .hero .eyebrow {
  gap: 0.6875rem;
  margin: 0;
  font-size: 0.6875rem;
  line-height: normal;
  letter-spacing: 0.2em;
}

.landing .hero .eyebrow::before {
  width: 1.625rem;
  height: 1px;
}

.landing .hero h1,
.landing .hero .lead,
.landing .hero .actions,
.landing .hero .hero-note {
  margin: 0;
}

.landing .hero .actions {
  margin-top: 2px;
}

.landing .hero .hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.125rem;
  color: #8a857a;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.hero-note .sep {
  color: #57534b;
}

.sim-frame.is-hero {
  height: clamp(15rem, 30vw, 26.25rem);
  border-radius: 1rem;
  box-shadow: 0 2.5rem 5.625rem rgba(0, 0, 0, 0.55);
}

.stat-band {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
  margin-inline: calc(var(--gut) * -1);
}

.stat-band > div {
  gap: 0.5rem;
  padding: clamp(1rem, 3vw, 2rem) var(--gut);
}

.stat-band h2 {
  font-size: clamp(1.1875rem, 2vw, 1.4375rem);
}

.stat-band p {
  font-size: 0.875rem;
}

.landing > section + section,
.landing > .free-band + section,
.landing > .stat-band + section {
  padding-top: clamp(1.75rem, 7vw, 7.5rem);
}

.section-head {
  gap: 1rem;
  margin-bottom: clamp(0.875rem, 3vw, 2.5rem);
}

.section-head.is-row > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-head.is-row .eyebrow,
.section-head.is-row h2 {
  margin: 0;
}

#kaip-veikia .section-head {
  margin-bottom: clamp(0.875rem, 3vw, 2.75rem);
}

.landing .section-head h2 {
  max-width: none;
}

.split {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20.625rem), 1fr));
  gap: clamp(1.25rem, 4vw, 4rem);
}

.tile-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
}

.tile-grid > div {
  gap: 0.75rem;
  padding: 1.625rem 1.5rem 1.875rem;
}

.tile-grid h3 {
  font-size: 1.125rem;
}

.tile-grid p {
  font-size: 0.875rem;
}

.plain-grid {
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.free-band {
  padding: clamp(1.75rem, 4vw, 3rem);
  gap: clamp(1.5rem, 4vw, 3.25rem);
}

.free-band .actions {
  margin-top: 0.25rem;
}

.free-band .actions .button {
  min-height: 3.25rem;
  padding-inline: 1.625rem;
}

.free-band .actions .button.secondary {
  color: var(--ink);
  background: transparent;
  border-color: rgba(247, 243, 234, 0.16);
  font-weight: 500;
}

.free-band .actions .button.secondary:hover {
  background: rgba(247, 243, 234, 0.06);
  border-color: rgba(247, 243, 234, 0.32);
}

.site-footer.is-wide {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 2.75rem);
  margin-top: clamp(1.75rem, 7vw, 7.5rem);
  padding-block: clamp(1.25rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(247, 243, 234, 0.09);
}

.site-footer.is-wide::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  border-top: 1px solid rgba(247, 243, 234, 0.09);
  content: "";
}

.footer-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem clamp(1.25rem, 3vw, 2.5rem);
}

.footer-about .brand,
.footer-about > p:not(.footer-contact) {
  grid-column: 1;
}

.footer-about .brand {
  font-size: 1.625rem;
}

.footer-about > p:not(.footer-contact) {
  max-width: 62ch;
  font-size: 0.84375rem;
  line-height: 1.6;
}

.footer-contact {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: start;
  padding-top: 0.375rem;
  font-size: 0.84375rem;
}

.footer-cols {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  padding-top: clamp(1rem, 3vw, 2.75rem);
  border-top: 1px solid rgba(247, 243, 234, 0.07);
}

.footer-about {
  width: 100%;
}

.copyright {
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  padding-bottom: clamp(1.25rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(247, 243, 234, 0.07);
  font-size: 0.75rem;
}

@media (min-width: 48rem) {
  .footer-cols {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }

  .footer-col {
    border-top: 0;
  }

  .footer-col > summary {
    min-height: 0;
    margin-bottom: 0.6875rem;
  }

  .footer-links {
    gap: 0.5625rem;
    padding-bottom: 0;
  }

  .footer-links a {
    min-height: 0;
    padding: 0;
  }
}

@media (max-width: 47.99rem) {
  .footer-about {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-contact {
    grid-row: auto;
    grid-column: 1;
    padding-top: 0;
  }
}

/* Išjungtas pirkimo veiksmas lieka matomas, bet nespustelimas. */
.button.is-disabled,
a.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.checkout-feedback {
  margin-block: 1rem 0;
}

.checkout-feedback .note,
.checkout-feedback p {
  margin-block: 0 0.75rem;
}

.checkout-feedback [data-kind="error"] {
  border-left-color: #ff7b7b;
  background: rgba(255, 88, 88, 0.08);
}

.checkout-feedback [data-kind="warn"] {
  border-left-color: #ffc66d;
  background: rgba(255, 198, 109, 0.07);
}

.payment-method-note {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Kainų ženkleliai rašomi normaliu registru HTML'e, o didžiosiomis paverčiami
   stiliumi: taip JS neturi kartoti to paties teksto dviem registrais. */
[data-uppercase] {
  text-transform: uppercase;
}

.requisites-box {
  margin: 1.25rem 0 0;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(247, 243, 234, 0.03);
}

/* KET banko krovimo būsenos. Bankas kraunamas dalimis, todėl vartotojas
   privalo matyti, kad kažkas vyksta, o ne tuščią sąrašą. */
.bank-status {
  margin-block: 1rem;
}

.q-illu img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 0.5rem;
}

.q-illu figcaption {
  padding-inline: 0.75rem;
}

.q-illu-fallback {
  padding: 1rem;
  text-align: center;
}

/* Nepatvirtintas teisinis dokumentas. Juodraštis, kuris atrodo kaip
   galiojančios sąlygos, yra pavojingesnis už jo nebuvimą. */
.legal-draft {
  margin-block: 0 1.5rem;
  border-left-width: 3px;
}

/* Paskyros prisijungimo formos */
.auth-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 26rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(247, 243, 234, 0.03);
}

.auth-form label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a857a;
}

.auth-form input {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #0d0d0c;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.auth-form input:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 1px;
}

.auth-form .hint {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.auth-form .actions {
  margin-top: 0.6rem;
}

.account-summary {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(247, 243, 234, 0.03);
}

.account-summary h2 {
  margin: 0.2rem 0 0;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

/* Vairuotojo pažymėjimo kategorijų filtras (KET bankas).
   Rodomas tik tada, kai banke tikrai yra daugiau nei viena kategorija —
   filtras su vienu mygtuku nieko nefiltruoja ir tik klaidina. */
.lic-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 1.25rem 0 0;
}

.lic-label {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a857a;
}

.lic-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
}

.lic-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.lic-chip {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.lic-chip:hover {
  border-color: rgba(247, 243, 234, 0.3);
  color: var(--ink);
}

.lic-chip.is-on {
  border-color: var(--cta);
  color: var(--ink);
  background: rgba(255, 194, 74, 0.12);
}

/* Teisiniai dokumentai, perkelti iš dizaino. Tekstas ilgas ir numeruotas,
   todėl skaitomumas svarbesnis už tankumą. */
.legal-doc {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin: 1.5rem 0 0;
}

.legal-doc h2 {
  margin: 1rem 0 0;
  font-family: "Space Grotesk", var(--sans, sans-serif);
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #b4afa4;
  text-wrap: balance;
}

.legal-doc .legal-body,
.legal-doc > div {
  max-width: 84ch;
  font-size: 0.97rem;
  line-height: 1.72;
  color: #8a857a;
  text-wrap: pretty;
  /* Word'e numeruoti punktai atskirti tabuliacija; be šito jie susilietų. */
  white-space: pre-wrap;
  tab-size: 3;
}

.legal-doc a {
  color: var(--link);
}

/* ---------------------------------------------------------------------------
   Website.dc.html antraštės ir tipografijos parity (2 etapas)

   Etalonas: Website.dc.html `[data-hdr]` tokenai ir eyebrow/nav/CTA inline
   stiliai. Blokas laikomas failo gale, kad perrašytų ankstesnes reikšmes,
   nekeičiant nė vieno HTML klasės pavadinimo.
   ------------------------------------------------------------------------- */

/* Antraštės tokenai — tie patys lūžio taškai kaip etalone: 768 / 1024 / 1180 px. */
:root {
  --hlogo: 25px;
  --hgap: 10px;
  --hnavi: 11px;
  --hcta: 15px;
  --hacctp: 8px;
}

@media (min-width: 48rem) {
  :root {
    --hlogo: 28px;
    --hgap: 14px;
    --hnavi: 12px;
    --hcta: 18px;
    --hacctp: 14px;
  }
}

@media (min-width: 64rem) {
  :root {
    --hlogo: 30px;
    --hgap: clamp(14px, 2.4vw, 30px);
    --hnavi: 12px;
    --hcta: 20px;
  }
}

@media (min-width: 73.75rem) {
  :root {
    --hgap: clamp(16px, 3vw, 36px);
    --hnavi: 13px;
  }
}

/* Etalone antraštės apatinis rėmelis yra UŽ 72 px eilutės, todėl bendras
   aukštis 73 px. Be šito visas puslapis pasislenka 1 px aukštyn. */
.site-header.is-sticky {
  gap: 0.25rem var(--hgap);
  align-items: center;
  min-height: calc(var(--hdr-h) + 1px);
}

.brand {
  font-size: var(--hlogo);
  line-height: 0.85;
  letter-spacing: -0.05em;
}

/* Tik nuo 1024 px navigacija yra eilutėje; žemiau ji gyvena drawer'yje ir
   turi savo taisykles, kurių šis blokas neturi liesti. */
@media (min-width: 64rem) {
  .site-nav ul {
    gap: 2px;
    align-items: center;
  }

  .site-header.is-sticky .site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px var(--hnavi);
    border-radius: 8px;
    color: #b4afa4;
    font-size: 13.5px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
  }

  .site-header.is-sticky .site-nav a:hover {
    color: #f7f3ea;
    background: rgba(247, 243, 234, 0.05);
  }

  .site-header.is-sticky .site-nav a[aria-current="page"] {
    color: #f7f3ea;
    background: rgba(247, 243, 234, 0.06);
  }
}

.header-actions {
  gap: 10px;
}

.header-cta {
  min-height: 42px;
  height: 42px;
  padding: 0 var(--hcta);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
}

/* Paskyros ženkliukas: apvalus avataras + etiketė. Etiketė pasirodo tik nuo
   1180 px — lygiai kaip etalone (`--hacct:flex`). */
.header-acct {
  display: flex;
  width: auto;
  height: 42px;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0 var(--hacctp) 0 8px;
  border: 1px solid rgba(247, 243, 234, 0.14);
  border-radius: 32px;
  color: var(--muted);
  text-decoration: none;
}

.header-acct::before,
.header-acct::after {
  content: none;
}

.header-acct-avatar {
  display: flex;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(124, 155, 255, 0.34);
  border-radius: 50%;
  background: rgba(47, 91, 255, 0.16);
  color: var(--link);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.header-acct-avatar svg {
  width: 13px;
  height: 13px;
}

.header-acct-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}

.header-acct-name {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.header-acct-meta {
  color: #a9a49a;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 73.75rem) {
  .header-acct-label {
    display: flex;
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

.header-acct:hover,
.header-acct:focus-visible {
  color: var(--muted);
  background: rgba(247, 243, 234, 0.07);
  border-color: rgba(247, 243, 234, 0.24);
}

.header-acct[aria-current="page"] {
  color: var(--muted);
  background: rgba(47, 91, 255, 0.1);
  border-color: rgba(124, 155, 255, 0.4);
}

/* Skiltis „akutė“: etalone linija 26 x 1 px, tarpas 11 px, 11 px / 0.2em.
   Sąrašas ilgesnis nei atrodo reikia: `.section-head p` ir `.theory-head`
   turi didesnį specifiškumą, todėl vien `.eyebrow` jų neperrašytų. */
.eyebrow,
.section-head .eyebrow,
.section-head.is-row .eyebrow,
.page-head .eyebrow,
.theory-head .eyebrow {
  gap: 11px;
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.2em;
}

.eyebrow::before,
.section-head .eyebrow::before,
.page-head .eyebrow::before,
.theory-head .eyebrow::before {
  width: 26px;
  height: 1px;
}

/* Hero mygtuko rodyklė: etalone tarpas 12 px, o ne 0.4rem paraštė. */
.hero .actions .button {
  gap: 12px;
}

.hero .actions .button svg {
  margin-left: 0;
}

/* Statistikos juostos antraštė: 600, natūralus tarpueilis (etalone 1.31). */
.stat-band h2 {
  font-weight: 600;
  line-height: normal;
}

/* Etalono pagrindiniai mygtukai neturi rėmelio. Produkcijoje jis buvo tos
   pačios spalvos kaip fonas — nematomas, bet pridėdavo 2 px pločio ir aukščio,
   todėl visos eilutės slinkdavo. Antriniai (`secondary`) rėmelį išlaiko. */
.hero .actions .button,
.free-band .actions .button,
.header-cta {
  border-width: 0;
}

.free-band .actions .button.secondary,
.hero .actions .button.secondary {
  border-width: 1px;
}

/* Hero smulkusis tekstas po mygtuku — etalone be papildomo tarpueilio. */
.landing .hero .hero-note {
  line-height: normal;
}

/* ---------------------------------------------------------------------------
   Website.dc.html sekcijų parity (3 etapas)
   ------------------------------------------------------------------------- */

/* Dviejų stulpelių sekcijose etalono „akutė“ yra pilka ir BE brūkšnelio;
   pilno pločio sekcijose — mėlyna su 26 px linija. */
.split .section-head {
  gap: 18px;
}

.split .section-head .eyebrow {
  gap: 0;
  color: #8a857a;
}

.split .section-head .eyebrow::before {
  content: none;
}

.split .section-head > p:not(.eyebrow) {
  max-width: 44ch;
  color: #b4afa4;
  font-size: 16px;
  line-height: 1.65;
}

/* Aplinkos sekcijos antraštė etalone siauresnė už turinį. */
#vilnius .section-head {
  max-width: 640px;
  margin-bottom: clamp(0.875rem, 3vw, 2.5rem);
}

#vilnius .section-head > p:not(.eyebrow) {
  color: #b4afa4;
  font-size: 16px;
  line-height: 1.65;
}

/* Varnelių sąrašas: etalone 18 px paraštės, 32 px įtrauka, 1.55 tarpueilis. */
.check-list.is-spaced li {
  padding-block: 18px;
  padding-left: 32px;
  color: #c9c4b8;
  line-height: 1.55;
}

.check-list.is-spaced li::before {
  top: 21px;
}

/* Realizmo tinklelis: etalone 20 px paraštės, 15 px / 600 antraštė ir
   14 px / 1.55 tekstas pilkame atspalvyje. */
.landing .plain-grid > div {
  gap: 6px;
  padding: 20px 0;
}

.landing .plain-grid h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
}

.landing .plain-grid > div > p {
  color: #8a857a;
  font-size: 14px;
  line-height: 1.55;
}

/* Aplinkos sekcijos pastaba — etalone neutralus, ne mėlynas fonas. */
#vilnius > .note {
  margin-top: 28px;
  padding: 18px 20px;
  color: #b4afa4;
  background: rgba(247, 243, 234, 0.04);
  font-size: 14px;
  line-height: 1.6;
}

/* Simuliatoriaus HUD: etalono matmenys iki pikselio. */
.hud {
  border-radius: 9px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hud-cell {
  gap: 3px;
  padding: 9px 15px;
}

.hud-label {
  color: #9aa3b5;
  font-size: 9px;
  line-height: normal;
}

.hud-live {
  gap: 8px;
  padding: 8px 13px;
  color: #9aa3b5;
  font-size: 11px;
  line-height: normal;
}

.hud-subtitle {
  background: rgba(10, 14, 22, 0.78);
}

.hud-subtitle .hud-cell {
  gap: 6px;
  padding: 13px 20px;
}

.hud-subtitle .hud-label {
  font-weight: 600;
}

.hud-subtitle p {
  font-size: clamp(13px, 1.35vw, 17px);
}

/* Hero antraštė etalone neturi 20ch ribos — nuo 768 px ji nukirsdavo eilutę
   anksčiau, nei to nori dizainas. */
.landing .hero h1 {
  max-width: none;
}

/* Meniu mygtukas etalone optiškai lygiuojamas su paraštės kraštu. */
.nav-toggle {
  margin-right: -10px;
}

/* Siaurame ekrane brūkšnelis lieka pirmoje eilutėje, o lūžta tik tekstas —
   kaip etalone. Su `flex-wrap: wrap` brūkšnelis nukrisdavo į atskirą eilutę. */
.eyebrow {
  flex-wrap: nowrap;
}

.eyebrow::before {
  flex: 0 0 26px;
}

/* ---------------------------------------------------------------------------
   Mobilus meniu: tikra klaida, ne stiliaus niuansas.

   `.site-header` turi `backdrop-filter`, o toks elementas pagal specifikaciją
   tampa containing block'u savo `position: fixed` palikuonims. Todėl drawer'io
   `inset: var(--hdr-h) 0 0` skaičiavo apačią nuo 56 px antraštės, o ne nuo
   lango — atsidaręs meniu būdavo 24 px aukščio, t. y. tuščias.

   Sprendimas: apačia neberišama prie containing block'o, aukštis imamas iš
   lango. Etalone drawer'is yra antraštės brolis, todėl ten šios problemos nėra.
   ------------------------------------------------------------------------- */
@media (max-width: 63.99rem) {
  .site-nav {
    inset: calc(var(--hdr-h) + 1px) 0 auto 0;
    height: calc(100vh - var(--hdr-h) - 1px);
    height: calc(100dvh - var(--hdr-h) - 1px);
    /* Dėl tos pačios `backdrop-filter` priežasties drawer'io paties suliejimas
       neveikia, todėl 2 % permatomas fonas rodė aštrų puslapio tekstą.
       Etalone meniu uždengia puslapį visiškai — čia tai užtikrina nepermatoma
       spalva (ta pati #121211, tik be likutinio permatomumo). */
    background: #121211;
  }
}

/* Drawer'io ritmas pagal etaloną: 12 px viršuje, 32 px apačioje, CTA per 20 px. */
@media (max-width: 63.99rem) {
  .site-nav {
    padding: 12px var(--gut) calc(32px + env(safe-area-inset-bottom, 0px));
  }

  .nav-cta-item {
    margin-top: 20px;
  }
}

/* ---------------------------------------------------------------------------
   Paskyros puslapis: prisijungimas, registracija, slaptažodžio atkūrimas

   Ankstesnė versija paveldėjo landing sekcijų ritmą (120 px tarpai) ir formą
   rodė kaip siaurą dėžutę kairėje, o dešinė pusė likdavo tuščia. Čia paskyra
   gauna savo ritmą ir vieną centruotą stulpelį: antraštė -> kortelė -> veiksmai.
   ------------------------------------------------------------------------- */

.account-entry > section + section {
  padding-top: clamp(1.5rem, 3.5vw, 2.75rem);
}

.account-entry > .page-head {
  align-items: center;
  width: min(34rem, 100%);
  max-width: none;
  margin-inline: auto;
  padding-block: clamp(1rem, 3vw, 2.5rem) 0;
  text-align: center;
}

.account-entry > .page-head + .auth-section {
  padding-top: clamp(1.75rem, 4vw, 3rem);
}

.account-entry .auth-section {
  width: min(30rem, 100%);
  gap: 0.75rem;
  margin-inline: auto;
}

/* Neprisijungus puslapis yra vienas centruotas stulpelis — ir pastaba po
   kortele lygiuojasi su ja, o ne su visu turinio pločiu. */
.account-entry > section:last-of-type {
  width: min(30rem, 100%);
  margin-inline: auto;
}

/* Kortelė: tas pats paviršius kaip paskyros veiksmų kortelių (#16161A). */
.auth-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.875rem;
  background: #16161a;
}

.auth-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(247, 243, 234, 0.09);
}

.auth-tab {
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8a857a;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}

.auth-tab:hover {
  color: var(--ink);
}

.auth-tab.is-on,
.auth-tab[aria-selected="true"] {
  color: var(--ink);
  background: rgba(247, 243, 234, 0.06);
}

/* Forma nebėra atskira dėžutė dėžutėje — kortelė jau yra rėmas. */
.auth-card .auth-form {
  gap: 1rem;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.auth-card .form-field {
  margin-block: 0;
}

.auth-card .auth-form label {
  margin-bottom: 0.5rem;
  color: var(--ink);
  font-size: 0.84375rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.auth-card input {
  min-height: 2.875rem;
  padding: 0.7rem 0.9rem;
  border-color: rgba(247, 243, 234, 0.16);
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  transition: border-color 0.16s var(--ease);
}

.auth-card input::placeholder {
  color: #6d6960;
}

.auth-card input:hover {
  border-color: rgba(247, 243, 234, 0.28);
}

.auth-card .auth-form .hint {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Veiksmai vienas po kito: 460 px kortelėje šalia jie susispaustų. */
.auth-card .auth-form .actions {
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.auth-card .auth-form .actions .button {
  width: 100%;
  min-height: 3rem;
  border-radius: 0.625rem;
  font-weight: 700;
}

.auth-card .auth-form .actions .button.secondary {
  color: var(--ink);
  background: transparent;
  border-color: rgba(247, 243, 234, 0.16);
  font-weight: 500;
}

.auth-card .auth-form .actions .button.secondary:hover {
  background: rgba(247, 243, 234, 0.06);
  border-color: rgba(247, 243, 234, 0.32);
}

.auth-aside {
  margin: 0;
  color: #8a857a;
  font-size: 0.8125rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.auth-aside b {
  color: #b4afa4;
  font-weight: 600;
}

/* Prisijungusio naudotojo kortelė — tas pats paviršius kaip auth kortelės. */
.account-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.875rem;
  background: #16161a;
}

.account-summary h2 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.account-summary > .eyebrow {
  margin: 0;
}

/* Likučiai — du vienodi blokeliai, o ne dvi eilutės tekstu. */
.account-summary .fact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(247, 243, 234, 0.1);
  border-radius: 0.75rem;
  background: rgba(247, 243, 234, 0.1);
}

.account-summary .fact-row div {
  gap: 0.375rem;
  padding: 1rem 1.125rem;
  background: #121211;
}

.account-summary .fact-row dt {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
}

.account-summary .fact-row dd {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.account-summary > .note {
  margin: 0;
}

.account-summary > .actions {
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0;
}

/* Abu mygtukai vienas po kito: „Duomenys ir ištrynimas" 460 px kortelėje
   greta „Atsijungti" laužydavosi į dvi eilutes. */
.account-summary > .actions .button {
  flex: 1 1 100%;
  min-height: 2.875rem;
  border-radius: 0.625rem;
}

/* Būsenų pranešimai lieka to paties pločio kaip kortelė. */
.account-entry .auth-section > .note,
.account-entry .auth-section > [data-auth-status] {
  margin: 0;
}

@media (max-width: 30rem) {
  .auth-tab {
    padding: 10px 11px;
  }

  .account-summary .fact-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Prisijungimas su Google

   Mygtukas laikosi Google tamsios temos gairių: nekeičiamas keturių spalvų
   „G" ženklas, tamsus paviršius, šviesus tekstas ir vienodas 48 px aukštis su
   kitais kortelės veiksmais. Skirtukas „arba" atskiria jį nuo el. pašto formos.
   ------------------------------------------------------------------------- */
.auth-oauth {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.oauth-button {
  display: flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(247, 243, 234, 0.22);
  border-radius: 0.625rem;
  background: #131314;
  color: #e3e3e3;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}

.oauth-button:hover {
  background: #1c1c1e;
  border-color: rgba(247, 243, 234, 0.34);
}

.oauth-button:active {
  transform: scale(0.99);
}

.oauth-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.oauth-mark {
  flex: 0 0 18px;
}

/* „arba" su plaukelio linijomis abiejose pusėse. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  color: #8a857a;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  flex: 1 1 auto;
  background: rgba(247, 243, 234, 0.1);
  content: "";
}

/* ---------------------------------------------------------------------------
   Prisijungusio naudotojo paskyra

   Struktūra iš Website.dc.html paskyros ekrano: avataras + tapatybė kairėje,
   bandymų likutis su „Papildyti" dešinėje, po plaukelio linija — paskyros
   eilutės. Rodomi TIK tikri duomenys: el. paštas, kreditai, bandymai ir
   prisijungimo būdas. Etalono demonstracinės istorijos ir pirkimų sąrašo čia
   nėra, nes svetainė tokių duomenų neturi.
   ------------------------------------------------------------------------- */

/* Prisijungusiam naudotojui rinkodaros įžanga nebereikalinga — jos vietoje
   iškart matoma paskyra, kaip etalone. */
.account-entry.is-signed-in > .page-head {
  display: none;
}

.account-entry.is-signed-in > .auth-section,
.account-entry.is-signed-in > section:last-of-type {
  width: 100%;
}

.account-board {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(247, 243, 234, 0.09);
}

.account-id {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1.125rem;
}

.account-avatar {
  display: flex;
  width: 4rem;
  height: 4rem;
  flex: 0 0 4rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(124, 155, 255, 0.3);
  border-radius: 50%;
  background: rgba(47, 91, 255, 0.14);
  color: var(--link);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}

.account-id-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.3125rem;
}

.account-id-text h1 {
  margin: 0;
  font-size: clamp(1.625rem, 3.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.account-id-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  color: #b4afa4;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.account-badge {
  display: inline-flex;
  height: 1.375rem;
  align-items: center;
  padding: 0 0.5625rem;
  border: 1px solid rgba(124, 155, 255, 0.28);
  border-radius: 1.25rem;
  background: rgba(124, 155, 255, 0.12);
  color: #9db3ff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Likutis: skaičius ir veiksmas viename rėmelyje, kaip etalone. */
.account-balance {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.75rem;
}

.account-balance-cell {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding: 1rem 1.5rem;
  background: #16161a;
}

.account-balance-caption {
  color: #a9a49a;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.account-balance-value {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.account-balance-sub {
  color: #a9a49a;
  font-size: 0.75rem;
}

.account-balance-cta {
  display: flex;
  align-items: center;
  padding: 0 1.375rem;
  background: var(--cta);
  color: var(--on-cta);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.16s var(--ease);
}

.account-balance-cta:hover {
  filter: brightness(1.1);
  color: var(--on-cta);
}

/* Paskyros eilutės: reikšmė dešinėje, plaukelio linija tarp eilučių. */
.account-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.account-rows > div {
  display: flex;
  flex-wrap: wrap;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(247, 243, 234, 0.09);
}

.account-rows > div:first-child {
  border-top: 0;
}

.account-rows dt {
  color: var(--ink);
  font-size: 0.9375rem;
}

.account-rows dd {
  margin: 0;
  color: #c9c4b8;
  font-size: 0.90625rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.account-board > .note {
  margin: 0;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.account-actions .button {
  min-height: 2.875rem;
  border-radius: 0.625rem;
}

@media (max-width: 34rem) {
  .account-head {
    flex-direction: column;
  }

  .account-balance {
    width: 100%;
  }

  .account-balance-cell {
    flex: 1 1 auto;
  }

  .account-actions .button {
    flex: 1 1 100%;
  }
}

/* SEO navigacijos kelias ir statinis KET paaiškinamasis turinys. */
.breadcrumbs {
  padding-top: clamp(0.75rem, 2vw, 1.25rem);
  color: #8a857a;
  font-size: 0.8125rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li + li::before {
  margin-right: 0.4rem;
  color: #5f5b53;
  content: "/";
}

.breadcrumbs a {
  color: #b9b3a7;
  text-underline-offset: 0.2em;
}

.breadcrumbs a:hover {
  color: var(--ink);
}

.theory-guide .step-list {
  margin: 0;
}

.theory-guide .source-box {
  align-self: start;
  margin: 0;
}

.theory-guide .source-box p + p {
  margin-top: 0.8rem;
}

/* ── Apmokėjimo būdo langas ──────────────────────────────────────────────
   Tas pats išdėstymas kaip Unity kliente (LobbyPaymentModal, UNITY-HANDOFF
   §6.11): užsakymas, trys būdai su radio pasirinkimu, suma, vienas CTA.
   Matmenys perskaičiuoti iš 660 px etalono į rem, kad veiktų ir telefone. */

html.has-modal,
html.has-modal body {
  overflow: hidden;
}

.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--gut);
}

.pay-modal[hidden] {
  display: none;
}

.pay-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 5, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pay-modal-card {
  position: relative;
  width: min(41.25rem, 100%);
  max-height: calc(100dvh - 2 * var(--gut));
  overflow-y: auto;
  padding: clamp(1.25rem, 4vw, 2.125rem) clamp(1rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}

.pay-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.pay-modal-close:hover {
  color: var(--ink);
  background: rgba(247, 243, 234, 0.06);
}

.pay-modal-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pay-modal-title {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  line-height: 1.2;
}

/* ── Užsakymas ── */

.pay-order {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.35rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--cta);
  border-radius: 0.625rem;
  background: rgba(247, 243, 234, 0.045);
}

.pay-order-main {
  min-width: 0;
}

.pay-order-name {
  margin: 0;
  font-weight: 600;
}

.pay-order-detail,
.pay-order-note {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.pay-order-price {
  text-align: right;
}

.pay-order-amount {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
}

/* ── Mokėjimo būdai ── */

.pay-section-label {
  margin: 1.4rem 0 0.6rem;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pay-methods {
  display: grid;
  gap: 1rem;
}

.pay-method {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 1.375rem;
  gap: 1rem;
  align-items: center;
  width: 100%;
  min-height: 5.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.625rem;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.pay-method:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.2);
}

.pay-method:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

.pay-method.is-selected {
  border-color: var(--cta);
  background: rgba(255, 194, 74, 0.05);
}

.pay-method.is-locked {
  cursor: not-allowed;
  opacity: 0.55;
}

.pay-mark {
  display: grid;
  place-items: center;
  height: 2.375rem;
  padding-inline: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.375rem;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pay-method.is-selected .pay-mark {
  border-color: rgba(255, 194, 74, 0.45);
  color: var(--cta);
}

.pay-method-body {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.pay-method-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.pay-method-name {
  font-size: 1rem;
  font-weight: 600;
}

.pay-soon {
  padding: 0.1rem 0.4rem;
  border: 1px solid rgba(255, 198, 109, 0.35);
  border-radius: 0.25rem;
  color: var(--amber);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pay-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.pay-brand {
  padding: 0.25rem 0.45rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pay-radio {
  position: relative;
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.pay-method.is-selected .pay-radio {
  border: 2px solid var(--cta);
}

.pay-method.is-selected .pay-radio::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0.625rem;
  height: 0.625rem;
  margin: auto;
  border-radius: 50%;
  background: var(--cta);
}

/* ── Suma ir veiksmai ── */

.pay-total {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.pay-total-label {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pay-total-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
}

/* Sutikimas dėl skaitmeninio turinio.
   Privaloma pirkimo sąlyga (Grąžinimo taisyklių 10 p.), todėl blokas turi būti
   pastebimas, bet neužgožti sumos. Naudojami tik esami dizaino kintamieji. */
/* Mokėjimo rezultato puslapių veiksmai. Anksčiau jie buvo aklavietė: iš
   /payment/success/ ir /payment/cancel/ nebuvo nė vienos nuorodos atgal į
   paskyrą ar kainas, nors pirkta buvo būtent naršyklėje. */
.pay-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.pay-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  margin-top: 1.1rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  cursor: pointer;
}

.pay-consent-box {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.05rem 0 0;
  accent-color: var(--cta);
  cursor: pointer;
  flex: none;
}

.pay-consent-text {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.pay-consent-link {
  color: inherit;
  text-underline-offset: 0.15em;
}

.pay-consent:focus-within {
  border-color: var(--cta);
}

.pay-modal-card .pay-status {
  margin: 1rem 0 0;
}

.pay-modal-card [data-kind="error"] {
  border-left-color: #ff7b7b;
  background: rgba(255, 88, 88, 0.08);
}

.pay-modal-card [data-kind="warn"] {
  border-left-color: #ffc66d;
  background: rgba(255, 198, 109, 0.07);
}

.pay-actions {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.pay-actions .button {
  justify-content: center;
  width: 100%;
}

.pay-redirect-note {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

@media (max-width: 30rem) {
  /* Telefone trys stulpeliai nebetelpa – žymos laužtųsi po vieną eilutėje.
     Viršuje lieka tiekėjo plytelė ir pasirinkimo žymė (jos turi būti viename
     lygyje, kitaip žymė atsiduria prie prekės ženklų ir nebeaišku, ką ji
     žymi), o pavadinimas su žymomis nusileidžia po jomis per visą plotį. */
  .pay-method {
    grid-template-columns: auto 1.375rem;
    grid-template-areas:
      "mark radio"
      "body body";
    gap: 0.85rem;
    justify-content: space-between;
    padding: 0.9rem 1rem;
  }

  .pay-mark {
    grid-area: mark;
    /* `auto` stulpelis išsitempia per likusį plotį – pati plytelė turi likti
       tokio pločio, kokio reikia tiekėjo pavadinimui. */
    justify-self: start;
  }

  .pay-radio {
    grid-area: radio;
  }

  .pay-method-body {
    grid-area: body;
  }

  .pay-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pay-method {
    transition: none;
  }
}

/* ── Paskyros skiltys, statistika ir lentelės ────────────────────────────
   Išdėstymas pagal Website.dc.html paskyros ekraną. Duomenys realūs: bandymai
   iš `runs`, pirkimai iš `checkout_intents` — todėl tuščia būsena čia yra
   normali būsena, o ne klaida. */

/* Balanso mygtukas tapo <button> (jis atveria skiltį, o ne kitą puslapį). */
.account-balance-cta {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  margin-top: 1.125rem;
}

.account-tab {
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 0.16s var(--ease), background-color 0.16s var(--ease);
}

.account-tab:hover {
  color: var(--ink);
}

.account-tab.is-on {
  background: rgba(247, 243, 234, 0.06);
  color: var(--ink);
}

.account-tab:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

.account-panel {
  padding-top: 1.75rem;
}

.account-panel:focus-visible {
  outline: none;
}

/* Plytelės sujungtos 1px tarpais – rėmelis atsiranda iš fono, be dvigubų linijų. */
.account-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 1px;
  margin-bottom: 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  background: var(--hairline);
  overflow: hidden;
}

.account-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 1.25rem 1.375rem;
  background: var(--background);
}

.account-stat-caption {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.account-stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.account-stat-value.is-good { color: #6fdca4; }
.account-stat-value.is-bad { color: var(--red); }

.account-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Lentelė siaurame ekrane slenka horizontaliai, o ne laužo stulpelių. */
.account-table-wrap {
  overflow-x: auto;
}

.account-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
}

.account-table th {
  padding: 0 0.25rem 0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-table td {
  padding: 0.875rem 0.25rem;
  border-bottom: 1px solid rgba(247, 243, 234, 0.07);
  font-size: 0.9rem;
  vertical-align: middle;
}

.account-table tbody tr:hover td {
  background: rgba(247, 243, 234, 0.03);
}

.account-table td:first-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.account-table .is-quiet { color: var(--muted); }

.account-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.account-table .is-end { text-align: right; }

.account-badge-state {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.7rem;
  border: 1px solid;
  border-radius: 1.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-badge-state.is-pass {
  border-color: rgba(76, 208, 138, 0.28);
  background: rgba(76, 208, 138, 0.12);
  color: #6fdca4;
}

.account-badge-state.is-fail {
  border-color: rgba(255, 94, 82, 0.28);
  background: rgba(255, 94, 82, 0.12);
  color: var(--red);
}

.account-badge-state.is-none {
  border-color: var(--line);
  background: rgba(247, 243, 234, 0.05);
  color: var(--muted);
}

.account-fine {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* Papildymo skilties paketai: tas pats kainoraštis, tik su mygtuku vietoj nuorodos. */
.pack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
}

.pack-row + .pack-row {
  margin-top: 0.75rem;
}

.pack-row .pack-name {
  flex: 1 1 12rem;
  min-width: 0;
}

.pack-row .pack-meta {
  white-space: nowrap;
}

/* ── Šilta aplinkos šviesa ───────────────────────────────────────────────
   Bazė lieka tamsi, todėl geltonas CTA ir toliau yra ryškiausias dalykas
   ekrane. Pridedami trys nejudantys gintariniai sluoksniai: vienas virš
   pirmo ekrano, vienas dešinėje pusėje ir vienas apačioje — puslapis nustoja
   atrodyti kaip juodas lapas, bet teksto kontrastas nenukenčia, nes po
   tekstu esantis fonas šviesėja tik keliais procentais. */

body {
  background-color: var(--background);
  background-image:
    radial-gradient(120% 62% at 50% -14%, rgba(255, 194, 74, 0.11), transparent 66%),
    radial-gradient(78% 52% at 96% 8%, rgba(255, 160, 60, 0.075), transparent 62%),
    radial-gradient(90% 46% at 8% 42%, rgba(47, 91, 255, 0.075), transparent 60%),
    radial-gradient(120% 44% at 50% 104%, rgba(255, 176, 74, 0.06), transparent 68%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Antraštė gauna savo švytėjimą, kad neatrodytų nukirpta nuo fono. */
.site-header {
  background-image: linear-gradient(180deg, rgba(255, 194, 74, 0.05), transparent 90%);
}

/* Kortelės pakyla nuo fono šilta briauna vietoj pilkos linijos. */
.q-card,
.price-card,
.account-board,
.pay-modal-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 140, 0.07),
    var(--shadow);
}

@media (prefers-reduced-transparency: reduce) {
  body { background-image: none; }
}

/* ── Egzamino kategorijos, laikmatis, nespręstų jungiklis ────────────────── */

.lic-picker {
  margin-bottom: var(--s-4);
}

.lic-picker-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
}

.lic-picker-lead {
  margin: 0.35rem 0 1rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.lic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
}

.lic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.05rem 3rem 1.05rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(247, 243, 234, 0.02);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.lic-card:hover:not(:disabled) {
  border-color: rgba(255, 194, 74, 0.35);
}

.lic-card:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

.lic-card.is-on {
  border-color: var(--cta);
  background: rgba(255, 194, 74, 0.06);
}

.lic-card.is-locked {
  cursor: not-allowed;
  opacity: 0.5;
}

.lic-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.lic-card-head strong {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.lic-soon {
  padding: 0.1rem 0.4rem;
  border: 1px solid rgba(255, 198, 109, 0.35);
  border-radius: 0.25rem;
  color: var(--amber);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lic-card-subs {
  color: var(--muted);
  font-size: 0.8125rem;
}

.lic-card-meta {
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.exam-toggle {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.875rem;
  cursor: pointer;
}

.exam-toggle input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--cta);
}

.exam-toggle-n {
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.exam-timer {
  margin-left: auto;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.exam-timer.is-warn {
  border-color: rgba(255, 198, 109, 0.45);
  color: var(--amber);
}

.exam-timer.is-danger {
  border-color: rgba(255, 94, 82, 0.5);
  background: rgba(255, 88, 88, 0.08);
  color: var(--red);
}

@media (prefers-reduced-motion: reduce) {
  .lic-card { transition: none; }
}

/* ── KET egzamino sąsaja (pagal „KET testai v2“ dizainą) ────────────────── */

.launcher {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--panel);
  box-shadow: 0 1.875rem 4.375rem rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

@media (max-width: 56rem) {
  .launcher { grid-template-columns: 1fr; }
}

.launcher-side {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: clamp(1.375rem, 3vw, 2.125rem);
}

.launcher-side.is-alt {
  border-left: 1px solid var(--hairline);
  background: #17171a;
}

@media (max-width: 56rem) {
  .launcher-side.is-alt { border-left: 0; border-top: 1px solid var(--hairline); }
}

.launcher-step {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-size: 0.656rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.launcher-step-n {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.375rem;
  background: rgba(247, 243, 234, 0.08);
  color: #c9c4b9;
  font-size: 0.625rem;
  letter-spacing: 0;
}

.launcher-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5625rem);
  font-weight: 600;
  letter-spacing: -0.026em;
}

.launcher-lead {
  margin: 0;
  color: var(--muted);
  font-size: 0.844rem;
  line-height: 1.6;
}

.launcher-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin: auto 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.launcher-hints b { color: #a39e92; font-weight: 600; }

/* Kategorijų kortelės su transporto priemonės piešiniu */
.lic-grid {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.875rem), 1fr));
}

.lic-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 0.9rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  background: rgba(247, 243, 234, 0.02);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.lic-card:hover { border-color: rgba(247, 243, 234, 0.3); }
.lic-card:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

.lic-card.is-on {
  border-color: var(--cta);
  background: rgba(255, 194, 74, 0.06);
}

.lic-card-top {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.lic-card-name {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.lic-card-name strong {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.lic-card-name span { color: #a39e92; font-size: 0.719rem; }

/*
 * Pasirinkimo žymė: pilnas geltonas apskritimas su varnele (SVG iš theory.js).
 * Tai įprastas `.lic-card-top` flex elementas, ne `position: absolute` —
 * kitaip telefone jis užlipa ant „A / A1 / A2 / AM“. `flex: none` neleidžia
 * siauroje kortelėje apskritimui susispausti į ovalą.
 */
.lic-card-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid rgba(247, 255, 255, 0.2);
  border-radius: 50%;
}

.lic-card.is-on .lic-card-mark {
  border-color: var(--cta);
  background: var(--cta);
  color: var(--on-cta);
}

.lic-card-art {
  display: block;
  height: 3.25rem;
  margin: 0.125rem 0 -0.125rem;
}

.lic-card-art svg { width: 100%; height: 100%; overflow: visible; }

.lic-card-foot {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.688rem;
}

.lic-card-tag {
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  background: rgba(247, 243, 234, 0.06);
  color: #a39e92;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sąlygų plytelės */
.spec-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  background: var(--panel);
  overflow: hidden;
}

.spec-tiles > div { padding: 0.875rem 0.9rem; }
.spec-tiles > div + div { border-left: 1px solid var(--hairline); }

.spec-tiles dt {
  color: var(--muted);
  font-size: 0.594rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.spec-tiles dd {
  margin: 0.1875rem 0 0;
  font-family: var(--font-display);
  font-size: 1.5625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.spec-tiles dd small { color: var(--muted); font-size: 0.8125rem; font-weight: 500; }

/* Nespręstų klausimų eilutė */
.unseen-row {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  background: rgba(247, 243, 234, 0.03);
  font-size: 0.813rem;
}

.unseen-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #4cd08a;
  flex: 0 0 auto;
}

.unseen-text { flex: 1; min-width: 0; color: #c9c4b9; }

.unseen-swap {
  min-height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: none;
  color: #a39e92;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.unseen-swap[aria-pressed="true"] {
  border-color: var(--cta);
  color: var(--cta);
}

.launcher-cta {
  display: inline-flex;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.5rem;
  border: 0;
  border-radius: 0.875rem;
  background: var(--cta);
  color: var(--on-cta);
  font: inherit;
  font-size: 1.031rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0.875rem 2.125rem rgba(255, 194, 74, 0.18);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}

.launcher-cta:hover { background: #ffd07a; transform: translateY(-1px); }
.launcher-fine { margin: 0; color: var(--muted); font-size: 0.719rem; line-height: 1.55; }

/* Sprendimo ekrano juosta */
.run-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 0.875rem;
  align-items: center;
  margin-bottom: 0.875rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  background: rgba(23, 23, 26, 0.82);
  backdrop-filter: blur(10px);
}

.run-badge {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 194, 74, 0.14);
  color: var(--cta);
  font-size: 0.688rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.run-track {
  flex: 1 1 10rem;
  min-width: 0;
  height: 0.375rem;
  border-radius: 0.25rem;
  background: rgba(247, 243, 234, 0.1);
  overflow: hidden;
}

.run-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0.25rem;
  background: #4cd08a;
  transition: width 0.3s var(--ease);
}

.run-counter {
  color: #c9c4b9;
  font-size: 0.781rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.run-finish-quiet {
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: none;
  color: #a39e92;
  font: inherit;
  font-size: 0.781rem;
  cursor: pointer;
}

.run-finish-quiet:hover { color: var(--ink); border-color: rgba(247, 243, 234, 0.34); }

.q-meta-gap, .q-foot-gap { flex: 1 1 auto; }

.q-chip {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.q-chip:hover { border-color: rgba(247, 243, 234, 0.34); color: var(--ink); }

.q-chip[aria-pressed="true"] {
  border-color: var(--cta);
  background: rgba(255, 194, 74, 0.08);
  color: var(--cta);
}

.q-foot.is-run {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

/* Iliustracija su didinimu */
.q-illu button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  background: #141413;
  cursor: zoom-in;
  overflow: hidden;
}

.q-illu img { display: block; width: 100%; height: auto; max-height: 21rem; object-fit: contain; }
.q-illu figcaption { margin-top: 0.5rem; color: var(--muted); font-size: 0.719rem; }

/* Modalai: patvirtinimas ir iliustracijos didinimas */
.egz-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: var(--gut);
}

.egz-modal[hidden] { display: none; }

.egz-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 5, 0.74);
  backdrop-filter: blur(6px);
}

.egz-modal-card {
  position: relative;
  width: min(28rem, 100%);
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
}

.egz-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.egz-modal-text { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.875rem; line-height: 1.6; }

.egz-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

.egz-zoom-card {
  position: relative;
  width: min(60rem, 100%);
  max-height: calc(100dvh - 2 * var(--gut));
}

.egz-zoom-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 2 * var(--gut));
  object-fit: contain;
  border-radius: var(--radius-card);
  background: #141413;
}

.egz-zoom-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 50%;
  background: rgba(6, 6, 5, 0.7);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* Navigatoriaus taškas su pažymėjimo žyme */
.dot.is-flagged::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cta);
}

.dot { position: relative; }

.exam-map-toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lic-card, .launcher-cta, .run-track i { transition: none; }
}

/* ── KET mokymosi suvestinė ir statistika ─────────────────────────────── */
.theory-v2 {
  --ket-card: #191918;
  --ket-card-strong: #1b1b1e;
  --ket-border: rgba(247, 243, 234, 0.12);
  --ket-muted: #8f8a80;
}

.theory-v2 .theory-breadcrumbs {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.theory-dashboard {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  min-height: clamp(25rem, 42vw, 32rem);
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border: 1px solid var(--ket-border);
  border-radius: 1.375rem;
  background:
    radial-gradient(70% 110% at 5% 0%, rgba(76, 208, 138, 0.09), transparent 60%),
    linear-gradient(135deg, rgba(25, 25, 24, 0.98), rgba(18, 18, 17, 0.95));
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.theory-road-stage {
  position: absolute !important;
  z-index: -2;
  inset: 0 0 0 38%;
  width: auto !important;
  height: 100% !important;
  opacity: 0.26;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%);
  mask-image: linear-gradient(90deg, transparent, #000 28%);
}

.theory-dashboard::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 18, 17, 0.7), rgba(18, 18, 17, 0.08) 72%);
  pointer-events: none;
}

.theory-hero-copy,
.theory-hero-side { min-width: 0; }

.theory-kicker {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin: 0 0 1.1rem;
  color: #4cd08a;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.theory-kicker > span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 1rem rgba(76, 208, 138, 0.45);
}

.theory-dashboard h1 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 650;
  line-height: 0.99;
  letter-spacing: -0.047em;
  text-wrap: balance;
}

.theory-hero-lead {
  max-width: 42rem;
  margin: 1.25rem 0 0;
  color: #b8b2a7;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.hero-facts,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.hero-facts { margin-top: 1.5rem; }
.hero-actions { margin-top: 1rem; }

.hero-fact {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
  min-height: 2.625rem;
  padding: 0.65rem 0.875rem;
  border: 1px solid rgba(247, 243, 234, 0.14);
  border-radius: 0.75rem;
  background: rgba(8, 8, 8, 0.26);
  color: var(--ink);
  font: inherit;
  font-size: 0.75rem;
}

button.hero-fact { cursor: pointer; }
.hero-fact span { color: var(--ket-muted); }
.hero-fact strong { font-family: var(--font-display); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.hero-actions .btn { min-height: 3rem; }
.hero-hint { margin: 0.75rem 0 0; color: var(--ket-muted); font-size: 0.75rem; }

.theory-hero-side {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-progress-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid rgba(247, 243, 234, 0.14);
  border-radius: 1.125rem;
  background: rgba(18, 18, 17, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1.25rem 3rem rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
}

.hero-ring-wrap {
  position: relative;
  width: 7.25rem;
  height: 7.25rem;
}

.hero-ring { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.hero-ring circle { fill: none; stroke: rgba(247, 243, 234, 0.1); stroke-width: 8; }
.hero-ring .hero-ring-value {
  stroke: #4cd08a;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 0.35rem rgba(76, 208, 138, 0.28));
  transition: stroke-dashoffset 0.5s var(--ease);
}

.hero-ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.hero-ring-label strong { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-ring-label span { margin-top: 0.3rem; color: var(--ket-muted); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; }
.hero-progress-copy h2 { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -0.02em; }
.hero-progress-copy > p { margin: 0.45rem 0 0; color: #a9a398; font-size: 0.8125rem; line-height: 1.5; }

.formula-toggle {
  min-height: 2.5rem;
  margin: 0.5rem 0 -0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: #7c9bff;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.formula-panel { padding-top: 0.25rem; }
.formula-panel p { margin: 0; color: var(--ket-muted); font-size: 0.71875rem; line-height: 1.5; }

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.hero-metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  min-width: 0;
  min-height: 6.25rem;
  padding: 0.875rem;
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: 0.875rem;
  background: rgba(18, 18, 17, 0.72);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.hero-metric span { color: var(--ket-muted); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-metric strong { margin-top: auto; font-family: var(--font-display); font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.hero-metric small { max-width: 100%; overflow: hidden; color: #9f998e; font-size: 0.6875rem; text-overflow: ellipsis; white-space: nowrap; }

.theory-v2 .theory-bar {
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}

.theory-v2 > .theory-stats,
.theory-v2 > .learning-next {
  padding-top: clamp(3.5rem, 7vw, 6.5rem) !important;
}

.stats-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.stats-heading h2,
.learning-head h2,
.mini-report h2 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

.stats-heading h2 { font-size: clamp(1.625rem, 3vw, 2.125rem); }
.stats-heading p { margin: 0; color: var(--ket-muted); font-size: 0.75rem; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem;
}

.stats-card {
  min-width: 0;
  border: 1px solid var(--ket-border);
  border-radius: 1.125rem;
  background: var(--ket-card);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.stats-accuracy-card {
  grid-column: span 6;
  min-height: 25rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: linear-gradient(145deg, #1c1c20, #181817);
}

.stats-tile {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  min-height: 8.25rem;
  padding: 1.25rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.stats-grid > .stats-tile:nth-child(2),
.stats-grid > .stats-tile:nth-child(3) { min-height: 25rem; }
.stats-card:hover { border-color: rgba(247, 243, 234, 0.22); }
.stats-card:focus-visible,
.hero-metric:focus-visible,
.hero-fact:focus-visible,
.learning-action:focus-visible { outline: 2px solid #7c9bff; outline-offset: 2px; }

.stats-label {
  display: block;
  color: var(--ket-muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.35;
  text-transform: uppercase;
}

.stats-tile strong {
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.stats-tile small { color: #9f998e; font-size: 0.75rem; line-height: 1.45; }
.stats-tile .is-green { color: #4cd08a; }
.stats-tile .is-amber { color: #ffc24a; }
.stats-tile .is-red { color: #ff9a91; }

.stats-card-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.stats-card-head strong {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(2.875rem, 6vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

.stats-card-head p { margin: 0.65rem 0 0; color: #9f998e; font-size: 0.75rem; line-height: 1.45; }
.stats-range { display: flex; padding: 0.1875rem; border: 1px solid var(--ket-border); border-radius: 0.625rem; }
.stats-range button {
  min-width: 3rem;
  min-height: 2rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--ket-muted);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.stats-range button.is-on { background: rgba(247, 243, 234, 0.09); color: var(--ink); }

.stats-chart-wrap { position: relative; margin: 1.5rem 0 0; }
.stats-chart-wrap svg { display: block; width: 100%; height: 10.25rem; overflow: visible; }
.stats-chart-wrap line { stroke: rgba(247, 243, 234, 0.055); stroke-width: 1; vector-effect: non-scaling-stroke; }
#stats-chart { fill: none; stroke: #4cd08a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.stats-chart-area { fill: rgba(76, 208, 138, 0.11); stroke: none; }
.stats-chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 1rem;
  color: var(--ket-muted);
  font-size: 0.75rem;
  text-align: center;
}
.stats-chart-empty[hidden] { display: none; }
.stats-chart-wrap figcaption { display: flex; justify-content: space-between; color: var(--ket-muted); font-size: 0.6875rem; }

.stats-breakdown { margin-top: 1rem; }
.stats-stack { display: flex; width: 100%; height: 0.625rem; border-radius: 999px; background: rgba(247, 243, 234, 0.08); overflow: hidden; }
.stats-stack i { display: block; min-width: 0; height: 100%; }
.stats-stack .is-correct { background: #4cd08a; }
.stats-stack .is-wrong { background: #ff9a91; }
.stats-stack .is-unseen { background: rgba(247, 243, 234, 0.17); }
.stats-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.75rem; color: var(--ket-muted); font-size: 0.6875rem; }
.stats-legend span::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.4rem; border-radius: 0.18rem; }
.stats-legend .is-correct::before { background: #4cd08a; }
.stats-legend .is-wrong::before { background: #ff9a91; }
.stats-legend .is-unseen::before { background: rgba(247, 243, 234, 0.22); }
.stats-legend b { color: #b9b3a8; font-variant-numeric: tabular-nums; }

.stats-mini-bar { display: block; width: 100%; height: 0.25rem; margin-top: 0.4rem; border-radius: 999px; background: rgba(247, 243, 234, 0.09); overflow: hidden; }
.stats-mini-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: #4cd08a; transition: width 0.35s var(--ease); }

.learning-next {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
  gap: 0.75rem;
  min-width: 0;
}

.learning-card,
.mini-report {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--ket-border);
  border-radius: 1.125rem;
  background: var(--ket-card);
}

.learning-card {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-color: rgba(255, 194, 74, 0.24);
  background: linear-gradient(145deg, rgba(255, 194, 74, 0.045), #181817 42%);
}

.learning-head,
.mini-report-head { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; }
.learning-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.875rem); }
.learning-head span,
.mini-report-head span { color: var(--ket-muted); font-size: 0.6875rem; }
.learning-card > p { margin: 0.85rem 0 1.125rem; color: #a9a398; font-size: 0.8125rem; line-height: 1.6; }
.learning-list { display: flex; flex-direction: column; gap: 0.625rem; }

.learning-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(247, 243, 234, 0.09);
  border-radius: 0.875rem;
  background: rgba(10, 10, 9, 0.22);
}
.learning-row-main { flex: 1 1 auto; min-width: 0; }
.learning-row-title { display: flex; gap: 0.75rem; align-items: baseline; justify-content: space-between; }
.learning-row-title strong { min-width: 0; overflow: hidden; font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.learning-row-title span { flex: 0 0 auto; color: #ffb0a9; font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.learning-progress { height: 0.25rem; margin-top: 0.65rem; border-radius: 999px; background: rgba(247, 243, 234, 0.09); overflow: hidden; }
.learning-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffc24a, #4cd08a); }
.learning-row small { display: block; margin-top: 0.45rem; color: var(--ket-muted); font-size: 0.65625rem; }
.learning-action {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid rgba(255, 194, 74, 0.32);
  border-radius: 0.75rem;
  background: rgba(255, 194, 74, 0.07);
  color: #ffc24a;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.learning-side { display: grid; gap: 0.75rem; min-width: 0; max-width: 100%; }
.mini-report { min-width: 0; padding: 1.25rem; }
.mini-report h2 { font-size: 1rem; }

.recent-exams {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: end;
  min-height: 8rem;
  margin-top: 1rem;
}
.recent-exams .report-empty { grid-column: 1 / -1; align-self: center; margin: 0; color: var(--ket-muted); font-size: 0.75rem; text-align: center; }
.recent-attempt { display: grid; grid-template-rows: auto 4.5rem auto auto; gap: 0.3rem; min-width: 0; text-align: center; }
.recent-score { color: #a9a398; font-size: 0.625rem; font-variant-numeric: tabular-nums; }
.recent-bar { position: relative; display: flex; align-items: end; border-radius: 0.35rem 0.35rem 0.1rem 0.1rem; background: rgba(247, 243, 234, 0.06); overflow: hidden; }
.recent-bar i { display: block; width: 100%; background: #4cd08a; }
.recent-attempt.is-fail .recent-bar i { background: #ff9a91; }
.recent-state { color: #4cd08a; font-size: 0.75rem; }
.recent-attempt.is-fail .recent-state { color: #ff9a91; }
.recent-attempt small { color: var(--ket-muted); font-size: 0.5625rem; }

.activity-grid { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 0.25rem; margin-top: 1.2rem; }
.activity-cell { min-width: 0; aspect-ratio: 1; min-height: 1rem; border: 1px solid rgba(247, 243, 234, 0.07); border-radius: 0.3rem; background: rgba(247, 243, 234, 0.035); }
.activity-cell.level-1 { border-color: rgba(76, 208, 138, 0.18); background: rgba(76, 208, 138, 0.28); }
.activity-cell.level-2 { border-color: rgba(76, 208, 138, 0.24); background: rgba(76, 208, 138, 0.48); }
.activity-cell.level-3 { border-color: rgba(76, 208, 138, 0.34); background: rgba(76, 208, 138, 0.76); }
.mini-report > p { margin: 0.85rem 0 0; color: var(--ket-muted); font-size: 0.6875rem; line-height: 1.5; }

@media (max-width: 68rem) {
  .theory-dashboard { grid-template-columns: 1fr; }
  .theory-dashboard h1 { max-width: 18ch; }
  .theory-road-stage { inset: 0 0 0 20%; opacity: 0.2; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-accuracy-card { grid-column: 1 / -1; }
  .stats-tile { grid-column: span 1; min-height: 9rem !important; }
  .learning-next { grid-template-columns: 1fr; }
  .learning-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
  .theory-v2 .theory-breadcrumbs { margin-bottom: 0.75rem; }
  .theory-dashboard {
    gap: 1.25rem;
    min-height: 0;
    margin-inline: calc(var(--gut) * -1);
    padding: 1.5rem var(--gut);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .theory-road-stage { inset: 0; opacity: 0.14; -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000); mask-image: linear-gradient(180deg, transparent 12%, #000); }
  .theory-dashboard h1 { max-width: 16ch; font-size: clamp(2.125rem, 11vw, 3.25rem); }
  .theory-hero-lead { font-size: 0.90625rem; }
  .hero-actions .btn { flex: 1 1 100%; width: 100%; }
  .hero-progress-card { grid-template-columns: 5.75rem minmax(0, 1fr); gap: 0.875rem; }
  .hero-ring-wrap { width: 5.75rem; height: 5.75rem; }
  .hero-ring-label strong { font-size: 1.25rem; }
  .hero-progress-copy h2 { font-size: 0.9375rem; }
  .hero-metrics { grid-template-columns: 1fr; }
  .hero-metric { min-height: 5.25rem; }
  .hero-metric small { white-space: normal; }
  .theory-v2 .theory-bar { overflow-x: auto; scrollbar-width: none; }
  .theory-v2 .theory-bar::-webkit-scrollbar { display: none; }
  .stats-heading { align-items: flex-start; flex-direction: column; }
  .stats-grid { grid-template-columns: 1fr; }
  .stats-accuracy-card,
  .stats-tile { grid-column: auto; min-height: 0 !important; }
  .stats-accuracy-card { padding: 1.125rem; }
  .stats-card-head { align-items: flex-start; }
  .stats-card-head strong { font-size: 3.125rem; }
  .stats-chart-wrap svg { height: 8rem; }
  .stats-tile { min-height: 7.5rem !important; }
  .learning-row { align-items: stretch; flex-direction: column; }
  .learning-action { width: 100%; }
  .learning-side { grid-template-columns: 1fr; }
  .activity-cell { min-height: 0; }
}

@media (max-width: 25rem) {
  .hero-progress-card { grid-template-columns: 1fr; }
  .hero-ring-wrap { margin-inline: auto; }
  .stats-card-head { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ring .hero-ring-value,
  .stats-mini-bar i { transition: none; }
}

/* ── KET mobile-first perkomponavimas ──────────────────────────────────
   Telefone svarbiausi veiksmai ir rodikliai telpa į trumpą, vienu nykščiu
   valdomą srautą. Turinys nėra slepiamas: kortelės tik persirikiuoja. */
@media (max-width: 47.99rem) {
  .theory-v2 { --gut: 0.875rem; }

  .theory-v2 .theory-breadcrumbs {
    margin-bottom: 0.625rem;
    font-size: 0.75rem;
  }

  .theory-dashboard {
    gap: 0.875rem;
    padding: 1.125rem var(--gut) 1rem;
    background:
      radial-gradient(90% 65% at 100% 0%, rgba(76, 208, 138, 0.06), transparent 72%),
      linear-gradient(155deg, #191918, #131312);
    box-shadow: none;
  }

  .theory-road-stage {
    inset: 42% -20% 0 24%;
    opacity: 0.075;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%);
    mask-image: linear-gradient(180deg, transparent, #000 42%);
  }

  .theory-kicker {
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    font-size: 0.625rem;
    line-height: 1.45;
    letter-spacing: 0.13em;
  }

  .theory-dashboard h1 {
    max-width: 15ch;
    font-size: clamp(2rem, 9.4vw, 2.35rem);
    line-height: 1.01;
    letter-spacing: -0.043em;
  }

  .theory-hero-lead {
    margin-top: 0.8rem;
    font-size: 0.875rem;
    line-height: 1.52;
  }

  .hero-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.9rem;
  }

  .hero-fact {
    justify-content: center;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.55rem 0.6rem;
    font-size: 0.6875rem;
    white-space: nowrap;
  }

  .hero-fact strong { font-size: 0.875rem; }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .hero-actions .btn {
    min-height: 3rem;
    padding-inline: 1rem;
    font-size: 0.875rem;
  }

  .hero-hint {
    margin-top: 0.55rem;
    font-size: 0.6875rem;
    line-height: 1.45;
  }

  .theory-hero-side { gap: 0.5rem; }

  .hero-progress-card {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.8rem;
    border-radius: 0.875rem;
  }

  .hero-ring-wrap {
    width: 4.5rem;
    height: 4.5rem;
  }

  .hero-ring circle { stroke-width: 9; }
  .hero-ring-label strong { font-size: 1.0625rem; }
  .hero-ring-label span { margin-top: 0.2rem; font-size: 0.5rem; }
  .hero-progress-copy h2 { font-size: 0.875rem; }
  .hero-progress-copy > p { margin-top: 0.3rem; font-size: 0.71875rem; line-height: 1.42; }

  .formula-toggle {
    min-height: 2.75rem;
    margin: 0.15rem 0 -0.45rem;
    font-size: 0.6875rem;
    text-align: left;
  }

  .formula-panel p { font-size: 0.6875rem; }

  .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
  }

  .hero-metric {
    min-height: 6.25rem;
    padding: 0.7rem 0.625rem;
    border-radius: 0.75rem;
  }

  .hero-metric span {
    font-size: 0.53125rem;
    line-height: 1.25;
    letter-spacing: 0.06em;
  }

  .hero-metric strong { font-size: 1.25rem; }
  .hero-metric small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.59375rem;
    line-height: 1.3;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Viena prilimpanti, horizontaliai braukiama režimų juosta palieka daugiau
     vertikalios vietos klausimams ir statistikai. */
  .theory-v2 .theory-bar {
    position: sticky;
    z-index: 24;
    top: 4rem;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.375rem;
    margin: 0 calc(var(--gut) * -1) 0.75rem;
    padding: 0.375rem var(--gut);
    border-top: 1px solid rgba(247, 243, 234, 0.07);
    border-bottom: 1px solid rgba(247, 243, 234, 0.1);
    background: rgba(18, 18, 17, 0.94);
    box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px) saturate(135%);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--gut);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .theory-v2 .theory-bar::-webkit-scrollbar { display: none; }

  .theory-v2 .segmented {
    display: inline-grid;
    grid-template-columns: repeat(3, max-content);
    flex: 0 0 auto;
    width: max-content;
    gap: 0.1875rem;
    padding: 0.1875rem;
    border-radius: 0.625rem;
  }

  .theory-v2 .quiet-tabs {
    display: inline-flex;
    flex: 0 0 auto;
    width: max-content;
    gap: 0.1875rem;
  }

  .theory-v2 .seg {
    min-height: 2.75rem;
    min-width: 5.75rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.71875rem;
    line-height: 1.15;
  }

  .theory-v2 .qtab {
    justify-content: center;
    min-width: max-content;
    height: 2.875rem;
    padding: 0 0.75rem;
    font-size: 0.6875rem;
    white-space: nowrap;
  }

  .theory-v2 .qn { font-size: 0.65625rem; }

  /* Paleidimas: visos trys kategorijos matomos vienoje eilėje. */
  .launcher { border-radius: 0.875rem; }
  .launcher-side {
    gap: 0.75rem;
    padding: 1rem;
  }

  .launcher-step { font-size: 0.59375rem; }
  .launcher-title { font-size: 1.1875rem; }
  .launcher-lead { font-size: 0.75rem; line-height: 1.5; }

  .lic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
  }

  .lic-card {
    gap: 0.35rem;
    min-width: 0;
    min-height: 8.375rem;
    padding: 0.625rem 0.5rem;
    border-radius: 0.75rem;
  }

  .lic-card-top { gap: 0.25rem; }
  .lic-card-name { min-width: 0; }
  .lic-card-name strong { font-size: 1.0625rem; }
  .lic-card-name span {
    min-height: 2.2em;
    font-size: 0.5625rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .lic-card-mark { width: 1.125rem; height: 1.125rem; }
  .lic-card-art { height: 2rem; margin: 0; }
  .lic-card-foot {
    gap: 0.2rem;
    align-items: flex-start;
    flex-direction: column;
    font-size: 0.5625rem;
    line-height: 1.2;
  }

  .lic-card-tag { font-size: 0.53125rem; }
  .launcher-hints { display: none; }

  .spec-tiles > div { min-width: 0; padding: 0.7rem 0.55rem; }
  .spec-tiles dt { font-size: 0.53125rem; letter-spacing: 0.08em; }
  .spec-tiles dd { font-size: 1.25rem; }
  .spec-tiles dd small { font-size: 0.6875rem; }

  .unseen-row {
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.71875rem;
  }

  .unseen-swap {
    min-height: 2.75rem;
    padding-inline: 0.625rem;
    font-size: 0.6875rem;
  }

  .launcher-cta { min-height: 3.25rem; font-size: 0.9375rem; }
  .launcher-fine { font-size: 0.65625rem; line-height: 1.45; }

  /* Egzamino veiksmai telefone turi realų 44 px paspaudimo plotą. */
  .run-finish-quiet,
  .q-chip { min-height: 2.75rem; }
  .dot-grid { gap: 0.375rem; }
  .dot,
  .dot.is-rev { width: 2.5rem; height: 2.5rem; }

  .theory-v2 > .theory-stats,
  .theory-v2 > .learning-next { padding-top: 2.5rem !important; }

  .stats-heading {
    gap: 0.3rem;
    margin-bottom: 0.875rem;
  }

  .stats-heading h2 { font-size: 1.5rem; }
  .stats-heading p { font-size: 0.6875rem; line-height: 1.45; }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .stats-accuracy-card {
    grid-column: 1 / -1;
    padding: 1rem;
    border-radius: 0.875rem;
  }

  .stats-card-head strong { font-size: 2.75rem; }
  .stats-card-head p { margin-top: 0.45rem; font-size: 0.6875rem; }
  .stats-range button { min-width: 2.75rem; min-height: 2.75rem; }
  .stats-chart-wrap { margin-top: 1rem; }
  .stats-chart-wrap svg { height: 6.75rem; }
  .stats-chart-empty { font-size: 0.6875rem; }
  .stats-breakdown { margin-top: 0.75rem; }
  .stats-legend { gap: 0.35rem 0.75rem; margin-top: 0.55rem; font-size: 0.625rem; }

  .stats-tile {
    grid-column: auto;
    min-height: 7.5rem !important;
    padding: 0.875rem;
    border-radius: 0.875rem;
  }

  .stats-label { font-size: 0.5625rem; letter-spacing: 0.08em; }
  .stats-tile strong { font-size: 1.625rem; }
  .stats-tile small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.65625rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .learning-next { gap: 0.5rem; }
  .learning-card,
  .mini-report { border-radius: 0.875rem; }
  .learning-card { padding: 1rem; }
  .learning-head { align-items: flex-start; }
  .learning-head h2 { font-size: 1.375rem; }
  .learning-head span { padding-top: 0.2rem; font-size: 0.625rem; white-space: nowrap; }
  .learning-card > p { margin: 0.65rem 0 0.85rem; font-size: 0.71875rem; line-height: 1.5; }
  .learning-list { gap: 0.5rem; }

  .learning-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.625rem;
    align-items: center;
    padding: 0.75rem;
  }

  .learning-row-title { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
  .learning-row-title strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.71875rem;
    line-height: 1.3;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .learning-row-title span { font-size: 0.625rem; }
  .learning-progress { margin-top: 0.5rem; }
  .learning-row small { margin-top: 0.35rem; font-size: 0.59375rem; line-height: 1.35; }
  .learning-action {
    width: auto;
    min-height: 2.75rem;
    padding-inline: 0.7rem;
    font-size: 0.65625rem;
  }

  .learning-side { grid-template-columns: 1fr; gap: 0.5rem; }
  .mini-report { padding: 1rem; }
  .recent-exams { min-height: 6.75rem; margin-top: 0.75rem; }
  .recent-attempt { grid-template-rows: auto 3.75rem auto auto; }
  .activity-grid { margin-top: 0.85rem; }

  .practice-band {
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.125rem;
  }

  .practice-band .btn { width: 100%; min-height: 3rem; }
}

@media (max-width: 22.5rem) {
  .theory-dashboard h1 { font-size: 1.875rem; }
  .hero-fact { padding-inline: 0.4rem; }
  .hero-fact span { font-size: 0.625rem; }
  .hero-progress-card { grid-template-columns: 4rem minmax(0, 1fr); }
  .hero-ring-wrap { width: 4rem; height: 4rem; }
  .hero-metric { min-height: 6.5rem; padding-inline: 0.45rem; }
  .theory-v2 .qtab { font-size: 0.625rem; }
  .launcher-side { padding-inline: 0.75rem; }
  .lic-grid { gap: 0.25rem; }
  .lic-card { padding-inline: 0.375rem; }
  .stats-tile { padding: 0.75rem; }
  .learning-action { padding-inline: 0.55rem; }
}

/* Planšetė ir didelis telefonas taip pat valdomi lietimu. */
@media (min-width: 48rem) and (max-width: 56rem) {
  .theory-v2 .seg,
  .theory-v2 .qtab,
  .formula-toggle,
  .unseen-swap,
  .stats-range button,
  .run-finish-quiet,
  .q-chip { min-height: 2.75rem; }

  .dot,
  .dot.is-rev { width: 2.5rem; height: 2.5rem; }
}

/* ── Fokusinis egzamino režimas telefonui ir planšetei ─────────────────
   Sprendžiant klausimą svetainės dashboardas laikinai užleidžia vietą
   egzamino darbo sričiai. Užbaigus ar pakeitus režimą viskas grįžta. */
@media (max-width: 56rem) {
  .theory-v2 #exam-result { scroll-margin-top: 8rem; }
  .theory-v2 #res-verdict:focus { outline: none; }

  html.has-active-exam {
    scroll-padding-top: calc(4.25rem + env(safe-area-inset-top, 0px));
  }

  html.has-active-exam .site-header,
  html.has-active-exam .site-footer,
  html.has-active-exam .copyright,
  html.has-active-exam .theory-v2 .theory-breadcrumbs,
  html.has-active-exam .theory-v2 .theory-dashboard,
  html.has-active-exam .theory-v2 .theory-bar,
  html.has-active-exam .theory-v2 > .theory-stats,
  html.has-active-exam .theory-v2 > .learning-next,
  html.has-active-exam .theory-v2 > .practice-band,
  html.has-active-exam .theory-v2 > .bank-status,
  html.has-active-exam .theory-v2 > .lic-row,
  html.has-active-exam .theory-v2 > .onboard,
  html.has-active-exam .theory-v2 > .stat-line {
    display: none !important;
  }

  html.has-active-exam body {
    min-height: 100dvh;
    background-color: #111110;
    background-image: none;
  }

  html.has-active-exam .theory-v2 {
    --gut: 0.875rem;
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: 0 var(--gut);
  }

  html.has-active-exam #mode-exam {
    width: 100%;
    min-width: 0;
  }

  html.has-active-exam #exam-run {
    min-height: 100dvh;
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
  }

  html.has-active-exam .run-bar {
    position: sticky;
    z-index: 80;
    top: 0;
    display: grid;
    grid-template-columns: auto minmax(2.5rem, 1fr) auto auto auto auto;
    gap: 0.5rem;
    align-items: center;
    min-height: calc(3.75rem + env(safe-area-inset-top, 0px));
    margin: 0 calc(var(--gut) * -1) 0.5rem;
    padding: calc(0.5rem + env(safe-area-inset-top, 0px)) var(--gut) 0.5rem;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: rgba(17, 17, 16, 0.96);
    box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px) saturate(135%);
  }

  /* Kalbos jungiklis rodomas TIK fokuso režime: būtent tada antraštė su
     pagrindiniu jungikliu yra paslėpta. Kitu metu jis liktų antra tos pačios
     paskirties juosta viena virš kitos. */
  html.has-active-exam .run-lang {
    display: inline-flex;
    height: 1.875rem;
    padding: 0.125rem;
  }

  html.has-active-exam .run-lang .lang-opt {
    min-width: 1.75rem;
    height: 1.625rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
  }

  html.has-active-exam .run-badge {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
  }

  html.has-active-exam .run-track {
    min-width: 3rem;
    height: 0.3125rem;
  }

  html.has-active-exam .run-counter {
    font-size: 0.75rem;
  }

  html.has-active-exam .exam-timer {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    margin-left: 0;
    padding: 0 0.55rem;
    font-size: 0.875rem;
  }

  html.has-active-exam .exam-timer[hidden] { display: none; }

  html.has-active-exam .run-finish-quiet {
    min-height: 2.75rem;
    padding: 0 0.65rem;
    color: #c8c2b7;
    font-size: 0.75rem;
  }

  html.has-active-exam .exam-map-toggle {
    position: sticky;
    z-index: 70;
    top: calc(3.75rem + env(safe-area-inset-top, 0px));
    display: flex;
    gap: 0.625rem;
    align-items: center;
    width: 100%;
    min-height: 3rem;
    margin: 0 0 0.625rem;
    padding: 0 0.875rem;
    border: 1px solid rgba(247, 243, 234, 0.11);
    border-radius: 0.75rem;
    background: rgba(22, 22, 21, 0.97);
    color: #c9c4b9;
    font: inherit;
    font-size: 0.75rem;
    text-align: left;
    cursor: pointer;
  }

  html.has-active-exam .exam-map-toggle strong {
    margin-left: auto;
    color: #a9a398;
    font-size: 0.6875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  html.has-active-exam .exam-map-toggle svg {
    flex: 0 0 auto;
    transition: transform 0.18s var(--ease);
  }

  html.has-active-exam .exam-map-toggle.is-open svg { transform: rotate(180deg); }

  html.has-active-exam #exam-dots:not(.is-open) { display: none; }

  html.has-active-exam #exam-dots.is-open {
    display: grid;
    grid-template-columns: repeat(6, 2.5rem);
    gap: 0.5rem;
    justify-content: space-between;
    margin: 0 0 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(247, 243, 234, 0.1);
    border-radius: 0.875rem;
    background: rgba(247, 243, 234, 0.025);
  }

  html.has-active-exam #exam-dots .dot,
  html.has-active-exam #exam-dots .dot.is-rev {
    width: 2.5rem;
    height: 2.5rem;
  }

  html.has-active-exam .q-card.is-run {
    margin-inline: calc(var(--gut) * -1);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  html.has-active-exam .q-card.is-run .q-body {
    gap: 0.75rem;
    padding: 0.875rem var(--gut) 1rem;
    background: #16161a;
  }

  html.has-active-exam .q-card.is-run .q-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    min-width: 0;
  }

  html.has-active-exam .q-card.is-run .q-meta-gap,
  html.has-active-exam .q-card.is-run #exam-num {
    display: none;
  }

  html.has-active-exam .q-card.is-run #exam-topic {
    min-width: 0;
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.has-active-exam .q-card.is-run .q-chip {
    min-height: 2.75rem;
    padding: 0 0.65rem;
    color: #aaa499;
    font-size: 0.75rem;
  }

  html.has-active-exam .q-card.is-run .q-split,
  html.has-active-exam .q-card.is-run .q-col {
    gap: 0.75rem;
  }

  html.has-active-exam .q-card.is-run #exam-q {
    scroll-margin-top: 4.5rem;
    font-size: clamp(1.125rem, 4.6vw, 1.25rem);
    line-height: 1.3;
  }

  html.has-active-exam .q-card.is-run #exam-q:focus { outline: none; }

  html.has-active-exam .q-card.is-run .q-options { gap: 0.5rem; }

  html.has-active-exam .q-card.is-run .q-opt {
    min-height: 3.5rem;
    padding: 0.75rem 0.875rem;
    font-size: 1rem;
    line-height: 1.4;
  }

  html.has-active-exam .q-card.is-run .q-opt.is-picked {
    border-color: rgba(255, 194, 74, 0.58);
    background: rgba(255, 194, 74, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 194, 74, 0.16);
  }

  html.has-active-exam .q-foot.is-run {
    position: fixed;
    z-index: 110;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 0.45rem 0.5rem;
    padding: 0.45rem var(--gut) calc(0.55rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(247, 243, 234, 0.13);
    background: rgba(17, 17, 16, 0.97);
    box-shadow: 0 -0.75rem 1.75rem rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(16px) saturate(135%);
  }

  html.has-active-exam .q-foot.is-run .q-foot-gap,
  html.has-active-exam .q-foot.is-run .finish-wrap {
    display: none !important;
  }

  html.has-active-exam .q-foot.is-run .blanks {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 1rem;
    color: #aaa499;
    font-size: 0;
    line-height: 1.2;
    text-align: center;
  }

  html.has-active-exam .q-foot.is-run .blanks::after {
    color: #aaa499;
    content: attr(data-mobile-label);
    font-size: 0.6875rem;
  }

  html.has-active-exam .q-foot.is-run #exam-prev,
  html.has-active-exam .q-foot.is-run #exam-next {
    grid-row: 2;
    width: 100%;
    min-height: 3rem;
    margin: 0;
    justify-content: center;
  }

  html.has-active-exam .q-foot.is-run #exam-next {
    grid-column: 2;
    border-color: #ffc24a;
    background: #ffc24a;
    color: #121211;
    font-weight: 650;
  }

  html.has-active-exam .q-foot.is-run #exam-next:hover { background: #ffd07a; }

  html.has-active-exam .q-foot.is-run #exam-prev { grid-column: 1; }
}

@media (max-width: 23rem) {
  html.has-active-exam .run-bar { gap: 0.35rem; }
  html.has-active-exam .run-finish-quiet { padding-inline: 0.45rem; }
  html.has-active-exam .exam-timer { padding-inline: 0.4rem; }
  html.has-active-exam .q-card.is-run .q-chip { padding-inline: 0.5rem; }
  html.has-active-exam #exam-dots.is-open { grid-template-columns: repeat(6, 2.25rem); }
  html.has-active-exam #exam-dots .dot,
  html.has-active-exam #exam-dots .dot.is-rev { width: 2.25rem; height: 2.25rem; }
}

/* ── 2026-09 mobile landing pages ─────────────────────────────────────────
   Scoped puslapių klasės sąmoningai perkomponuoja turinį į vieną prioritetų
   stulpelį. KET focused exam taisyklių šis blokas neliečia. */

.page-status-link {
  display: inline-flex;
  width: fit-content;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.55rem;
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 650;
}

.pricing-includes {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: start;
  margin: clamp(1.25rem, 3vw, 2rem) 0 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(124, 155, 255, 0.2);
  border-radius: 0.75rem;
  background: rgba(47, 91, 255, 0.055);
}

.pricing-includes .overline {
  padding-top: 0.25rem;
  color: #9db3ff;
}

.pricing-includes .check-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 1.25rem;
  margin: 0;
}

.pricing-includes .check-list li {
  padding-top: 0;
  padding-bottom: 0;
  color: #c9c4b8;
  font-size: 0.84375rem;
}

.pricing-page .price-card p:not(.price-note),
.requirements-page .price-card p {
  font-size: 0.875rem;
  line-height: 1.55;
}

.pricing-page .price-unit,
.pricing-page .price-card p.price-note {
  font-size: 0.8125rem;
}

.case-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  background: #151514;
}

.case-item > summary {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.case-item > summary::-webkit-details-marker { display: none; }

.case-item > summary::after {
  flex: 0 0 auto;
  color: #8a857a;
  content: "+";
  font-size: 1.125rem;
  font-weight: 400;
}

.case-item[open] > summary::after { content: "−"; }

.case-item > p {
  margin: 0;
  padding: 0 1rem 1rem;
  color: #aaa59b;
  font-size: 0.875rem;
  line-height: 1.6;
}

.case-item a { color: var(--link); }

@media (max-width: 63.99rem) {
  :where(body.page-home, body.page-pricing, body.page-requirements, body.page-support, body.page-download) .site-header {
    min-height: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    flex-wrap: nowrap;
  }

  :where(body.page-home, body.page-pricing, body.page-requirements, body.page-support, body.page-download) .header-actions {
    flex-wrap: nowrap;
  }

  :where(body.page-home, body.page-pricing, body.page-requirements, body.page-support, body.page-download) .site-nav {
    top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 1px);
    height: calc(100dvh - var(--hdr-h) - env(safe-area-inset-top, 0px) - 1px);
  }
}

@media (max-width: 47.99rem) {
  :where(body.page-home, body.page-pricing, body.page-requirements, body.page-support, body.page-download) .header-acct,
  :where(body.page-home, body.page-pricing, body.page-requirements, body.page-support, body.page-download) .header-cta,
  :where(body.page-home, body.page-pricing, body.page-requirements, body.page-support, body.page-download) .nav-toggle {
    min-height: 2.75rem;
  }

  :where(body.page-home, body.page-pricing, body.page-requirements, body.page-support, body.page-download) .nav-toggle {
    margin-right: 0;
  }

  :where(.pricing-page, .requirements-page, .support-page) .breadcrumbs,
  .download-page .breadcrumbs {
    padding-top: 0.75rem;
    font-size: 0.75rem;
  }

  :where(.pricing-page, .requirements-page, .support-page) .page-head {
    gap: 0.7rem;
    padding-top: 0.85rem;
  }

  :where(.pricing-page, .requirements-page, .support-page) .page-head h1 {
    font-size: clamp(2rem, 9vw, 2.45rem);
    line-height: 1.04;
    text-wrap: balance;
  }

  :where(.pricing-page, .requirements-page, .support-page) .page-head .lead {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  :where(.pricing-page, .requirements-page, .support-page, .download-page) > section + section {
    padding-top: 2.25rem;
  }

  /* Pradžia: kompaktiškas hero, pilno pločio CTA ir numeruotas timeline. */
  .home-page .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding-block: 1.25rem 2rem;
  }

  .home-page .hero > div:first-child { gap: 1rem; }

  .home-page .hero h1 {
    font-size: clamp(2.05rem, 9vw, 2.55rem);
    line-height: 1.04;
    text-wrap: balance;
  }

  .home-page .hero .lead {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .home-page .hero .actions,
  .home-page .free-band .actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
  }

  .home-page .hero .actions .button,
  .home-page .free-band .actions .button {
    width: 100%;
    min-height: 3.25rem;
    justify-content: center;
  }

  .home-page .hero-note,
  .download-page .hero-note {
    gap: 0.4rem;
  }

  .home-page .hero-note .sep,
  .download-page .hero-note .sep { display: none; }

  .home-page .hero-note > span:not(.sep),
  .download-page .hero-note > span:not(.sep) {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(247, 243, 234, 0.1);
    border-radius: 999px;
    background: rgba(247, 243, 234, 0.035);
    font-size: 0.75rem;
  }

  .landing .sim-frame.is-hero {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .home-page .stat-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    margin-inline: 0;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: 0.75rem;
    background: var(--hairline);
  }

  .home-page .stat-band > div {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 1.2fr);
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    background: #141413;
  }

  .home-page .stat-band h2 {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.35;
  }

  .home-page .stat-band p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .home-page .road-stage { height: 12rem; }

  .home-page .tile-grid {
    display: block;
    overflow: hidden;
    border-block: 1px solid var(--hairline);
    background: transparent;
  }

  .home-page .tile-grid > div {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.3rem 0.75rem;
    padding: 1rem 0;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;
  }

  .home-page .tile-grid > div:last-child { border-bottom: 0; }

  .home-page .tile-head {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: start;
    margin: 0;
  }

  .home-page .tile-head .dot,
  .home-page .tile-head .rule { display: none; }

  .home-page .tile-head .n {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(124, 155, 255, 0.25);
    border-radius: 50%;
    background: rgba(47, 91, 255, 0.09);
    color: #9db3ff;
    font-size: 0.6875rem;
  }

  .home-page .tile-grid h3,
  .home-page .tile-grid > div > p:last-child {
    grid-column: 2;
    margin: 0;
  }

  .home-page .tile-grid h3 { font-size: 0.9375rem; }

  .home-page .tile-grid > div > p:last-child {
    font-size: 0.84375rem;
    line-height: 1.5;
  }

  .home-page .split { gap: 1.25rem; }

  .home-page .check-list.is-spaced li {
    min-height: 2.75rem;
    padding-block: 0.8rem;
  }

  .home-page .free-band { padding: 1.25rem; }

  .home-page .free-band > div:first-child { min-width: 0; }

  .home-page .funnel-row {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
    padding: 0.875rem 1rem;
  }

  .home-page .funnel-row i {
    grid-row: 1 / span 2;
    grid-column: 1;
  }

  .home-page .funnel-row > div,
  .home-page .funnel-row .tag { grid-column: 2; }

  .home-page .funnel-row .tag { justify-self: start; }

  /* Kainos: bendri privalumai vienoje vietoje, o kortelėse lieka pasirinkimas. */
  .pricing-page .pricing-includes {
    display: block;
    margin-block: 1.25rem 0.75rem;
    padding: 1rem;
  }

  .pricing-page .pricing-includes .overline { padding: 0; }

  .pricing-page .pricing-includes .check-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    margin-top: 0.75rem;
  }

  .pricing-page .pricing-cards { gap: 0.75rem; }

  .pricing-page .price-card {
    gap: 0.65rem;
    padding: 1rem;
  }

  .pricing-page .price-card-top {
    align-items: flex-start;
  }

  .pricing-page .price-card-top .pill {
    flex: 0 1 auto;
    max-width: 100%;
  }

  .pricing-page .price-card p:not(.price-note),
  .requirements-page .price-card p {
    font-size: 0.875rem;
    line-height: 1.55;
  }

  .pricing-page .price-unit,
  .pricing-page .price-card p.price-note {
    font-size: 0.8125rem;
  }

  .pricing-page .price-card .button { min-height: 3.25rem; }

  .pricing-page .payment-method-note {
    font-size: 0.8125rem;
    line-height: 1.55;
  }

  .pricing-page .step-list li { padding: 1rem; }

  /* Reikalavimai: būsena ir CTA pirmiau, tada greta lyginamos reikšmės. */
  .requirements-page .req-check {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1rem;
  }

  .requirements-page .req-check .note,
  .requirements-page .req-check .button {
    width: 100%;
    margin: 0;
  }

  .requirements-page .req-check .button {
    min-height: 3.25rem;
    justify-content: center;
  }

  .requirements-page .req-table tbody { gap: 0.75rem; }

  .requirements-page .req-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .requirements-page .req-table tbody th {
    grid-column: 1 / -1;
  }

  .requirements-page .req-table tbody td {
    display: block;
    min-width: 0;
    padding: 0.75rem 0.8rem;
  }

  .requirements-page .req-table tbody td + td {
    border-top: 0;
    border-left: 1px solid rgba(247, 243, 234, 0.08);
  }

  .requirements-page .req-table tbody td::before {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    line-height: 1.35;
  }

  .requirements-page .pricing-cards { gap: 0.75rem; }

  .requirements-page .price-card {
    gap: 0.65rem;
    padding: 1rem;
  }

  /* Pagalba: veiksmas ir laiško duomenys pirmi, situacijos – disclosure. */
  .support-page .contact-mail a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    font-size: clamp(1rem, 4.4vw, 1.125rem);
  }

  .support-page .support-send-note { margin-top: 0.75rem; }

  .support-page .cases-head { gap: 0.35rem; }

  .support-page .case-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    border: 0;
    background: transparent;
  }

  .support-page .case-item > summary {
    min-height: 3.5rem;
    font-size: 0.9375rem;
  }

  .support-page .case-item > p {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .support-page .legal-nav,
  .download-page .legal-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .support-page .legal-nav a,
  .download-page .legal-nav a {
    width: 100%;
    min-height: 3rem;
    justify-content: space-between;
  }

  .support-page .faq summary {
    min-height: 3.25rem;
    font-size: 0.9375rem;
  }

  .support-page .faq p {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  /* Atsisiuntimas: vaizdas prieš ilgą release būseną, vienas aiškus timeline. */
  .download-page .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 1.25rem 2rem;
  }

  .download-page .hero > div:first-child { display: contents; }

  .download-page .hero .eyebrow { order: 1; }

  .download-page .hero h1 {
    order: 2;
    margin-top: 1rem;
    font-size: clamp(2.05rem, 9vw, 2.55rem);
    line-height: 1.04;
    text-wrap: balance;
  }

  .download-page .hero .lead {
    order: 3;
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .download-page .hero .actions {
    order: 4;
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
    margin-top: 1.25rem;
  }

  .download-page .hero .actions .button {
    width: 100%;
    min-height: 3.25rem;
    justify-content: center;
  }

  .download-page .hero .sim-frame.is-hero {
    order: 5;
    width: 100%;
    height: auto;
    align-self: stretch;
    margin-top: 1.25rem;
    aspect-ratio: 16 / 10;
  }

  .download-page .download-status {
    order: 6;
    margin-top: 1rem;
  }

  .download-page .download-status > p {
    margin: 0.45rem 0 0;
  }

  .download-page .release-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.75rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
  }

  .download-page .release-checks li {
    position: relative;
    padding-left: 0.9rem;
    color: #c9c4b8;
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .download-page .release-checks li::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--cta);
    content: "";
  }

  .download-page .hero-note {
    order: 7;
    margin-top: 0.875rem;
  }

  .download-page .dl-steps {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .download-page .step-list.is-compact {
    border: 0;
    border-block: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;
  }

  .download-page .step-list.is-compact li {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--hairline);
    background: transparent;
  }

  .download-page .step-list.is-compact li:last-child { border-bottom: 0; }

  .download-page .step-list.is-compact .step-n {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
  }

  .download-page .step-list.is-compact h3 { font-size: 0.9375rem; }

  .download-page .step-list.is-compact p {
    font-size: 0.875rem;
    line-height: 1.55;
  }

  .download-page .fact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .download-page .hash-copy { width: 100%; }
}

@media (min-width: 48rem) and (max-width: 56rem) {
  .pricing-page .price-card.is-featured,
  .requirements-page .price-card.is-featured {
    grid-column: 1 / -1;
  }

  .download-page .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .download-page .hero > div:first-child { display: contents; }
  .download-page .hero .eyebrow { order: 1; }
  .download-page .hero h1 { order: 2; margin-top: 1.25rem; }
  .download-page .hero .lead { order: 3; margin-top: 1.25rem; }
  .download-page .hero .actions { order: 4; margin-top: 1.25rem; }

  .download-page .hero .sim-frame.is-hero {
    order: 5;
    width: 100%;
    height: auto;
    margin-top: 1.5rem;
    aspect-ratio: 16 / 9;
  }

  .download-page .download-status { order: 6; margin-top: 1.25rem; }
  .download-page .hero-note { order: 7; margin-top: 1rem; }
}

/* ── 2026-09 KET mobiliojo ekrano pataisymai ───────────────────────────────
   1) Temos pavadinimas egzamino ekrane nebekarpomas daugtaškiu — leidžiama
      laužytis per kelias eilutes, kad tema perskaitoma visa.
   2) Egzamino kortelė užpildo tarpą iki prilipusios apatinės juostos — prie
      trumpų klausimų nebelieka tuščio ekrano.
   3) Režimų juosta gauna kraštinį gradientą — matyti, kad ji slenkama į šoną.
   Šis blokas tik papildo aukščiau esančias taisykles, nieko neperrašo. */

@media (max-width: 56rem) {
  /* 1 · tema laužoma, ne kerpama */
  html.has-active-exam .q-card.is-run .q-meta {
    align-items: center;
  }

  html.has-active-exam .q-card.is-run #exam-topic {
    min-width: 0;
    overflow: visible;
    padding-block: 0.25rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* 2 · kortelė užpildo likusį aukštį */
  html.has-active-exam #exam-run {
    display: flex;
    flex-direction: column;
  }

  html.has-active-exam .q-card.is-run {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  html.has-active-exam .q-card.is-run .q-body {
    flex: 1 1 auto;
  }

  /* Klausimas lieka priklijuotas prie viršaus — jo padėtis nešokinėja tarp
     klausimų. Laisvą vietą apačioje užima pati kortelė, todėl neberodoma
     kabanti kortelės briauna su kitos spalvos ruožu iki apatinės juostos. */
  html.has-active-exam .q-card.is-run .q-split {
    flex: 1 1 auto;
    align-content: flex-start;
  }

  /* Iliustracija išlaiko savo proporcijas ir nesitampo kartu su stulpeliu. */
  html.has-active-exam .q-card.is-run .q-illu {
    align-self: flex-start;
  }
}

@media (max-width: 47.99rem) {
  /* 3 · slinkimo užuomina režimų juostoje */
  .theory-v2 .theory-bar::after {
    position: sticky;
    right: calc(var(--gut) * -1);
    flex: 0 0 2rem;
    align-self: stretch;
    width: 2rem;
    margin-inline-start: -2rem;
    content: "";
    background: linear-gradient(
      to left,
      rgba(18, 18, 17, 0.97) 0%,
      rgba(18, 18, 17, 0.82) 45%,
      rgba(18, 18, 17, 0) 100%
    );
    pointer-events: none;
  }

  @supports (animation-timeline: scroll(nearest inline)) {
    .theory-v2 .theory-bar::after {
      animation: ket-tabbar-edge linear both;
      animation-timeline: scroll(nearest inline);
      animation-range: calc(100% - 2.5rem) 100%;
    }

    @keyframes ket-tabbar-edge {
      from { opacity: 1; }
      to { opacity: 0; }
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09 · MOBILE DENSITY PASS
   Tikslas — telefone sutalpinti daugiau prasmingo turinio į vieną ekraną
   nemažinant skaitomumo ir nepaliečiant desktop išdėstymo. Blokas laikomas
   failo gale, todėl jis nugali ankstesnes mobiliąsias taisykles.
   Principai: trumpi punktai → 2 stulpeliai, specifikacijos → label→value,
   pasirinkimai → segmented control, antriniai paaiškinimai → accordion.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 47.99rem) {
  /* ── Bendras ritmas ─────────────────────────────────────────────────────
     Sekcijų tarpai telefone buvo 28 px; 22 px pakanka atskirti sekcijas, o
     per puslapį susidaro pastebimas laimėjimas. */
  .home-page > section + section,
  .home-page > .stat-band + section,
  .pricing-page > section + section,
  .requirements-page > section + section {
    padding-top: 1.375rem;
  }

  .home-page .section-head,
  .pricing-page .section-head,
  .requirements-page .section-head {
    gap: 0.4rem;
    margin-bottom: 0.875rem;
  }

  .home-page .section-head h2,
  .requirements-page .section-head h2 {
    font-size: clamp(1.375rem, 6vw, 1.625rem);
    line-height: 1.12;
  }

  .home-page .section-head > p,
  .requirements-page .section-head > p {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .home-page .eyebrow,
  .pricing-page .eyebrow,
  .requirements-page .eyebrow {
    margin-bottom: 0.3rem;
    font-size: 0.625rem;
  }

  /* ── Pradžia · hero ─────────────────────────────────────────────────────
     Antraštė ir CTA turi likti stiprūs, todėl trumpinamas tik tarpas ir
     dekoratyvinė kadro dalis. */
  .home-page .hero { padding-block: 0.875rem 1.25rem; gap: 1rem; }
  .home-page .hero > div:first-child { gap: 0.8rem; }
  .home-page .hero .lead { font-size: 0.9rem; line-height: 1.48; }
  .home-page .hero .actions { gap: 0.5rem; }
  .home-page .hero .actions .button { min-height: 3rem; }
  .home-page .hero-note { gap: 0.35rem; margin-top: 0.25rem; }


  /* ── Pradžia · trys esminiai teiginiai → 2 stulpeliai ───────────────────
     Trečias blokas lieka per visą plotį: taip eilutė neatrodo nukirsta. */
  .home-page .stat-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .home-page .stat-band > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.8rem;
  }

  .home-page .stat-band > div:last-child { grid-column: 1 / -1; }

  .home-page .stat-band h2 { font-size: 0.9375rem; line-height: 1.2; }
  .home-page .stat-band p { font-size: 0.78rem; line-height: 1.4; }

  /* ── Pradžia · šeši žingsniai → 2 stulpeliai ────────────────────────────
     Numeris lieka virš pavadinimo, todėl siauroje kortelėje tekstas nelūžta
     per anksti. Paskutinis žingsnis prireikus išsitempia per visą plotį. */
  .home-page .road-stage { height: 7.5rem; }
  .home-page .stage-card { padding: 0.75rem; }
  .home-page .stage-cap { font-size: 0.78rem; line-height: 1.4; }

  .home-page .tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .home-page .tile-grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.7rem 0.75rem 0.8rem;
    border: 1px solid rgba(247, 243, 234, 0.09);
    border-bottom: 1px solid rgba(247, 243, 234, 0.09);
    border-radius: 0.75rem;
    background: rgba(247, 243, 234, 0.022);
  }

  .home-page .tile-grid > div:last-child { border-bottom: 1px solid rgba(247, 243, 234, 0.09); }

  .home-page .tile-head { margin: 0 0 0.1rem; }
  .home-page .tile-head .n { font-size: 0.6875rem; }
  .home-page .tile-grid h3 { font-size: 0.875rem; line-height: 1.2; }

  .home-page .tile-grid > div > p:last-child {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  /* ── Pradžia · sąrašai ──────────────────────────────────────────────────*/
  .home-page .split { gap: 0.875rem; }
  .home-page .check-list.is-spaced li { min-height: 0; padding-block: 0.3rem; }

  /* Antrinis paaiškinimas telefone suskleidžiamas: pagrindinę mintį perteikia
     šalia esanti ataskaitos demonstracija, o pilnas sąrašas lieka pasiekiamas
     vienu paspaudimu. Desktop'e ir be JS blokas rodomas išskleistas. */
  .home-page .panel.m-fold { padding: 0; }
  .home-page .panel.m-fold > summary {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.875rem;
    cursor: pointer;
    list-style: none;
  }
  .home-page .panel.m-fold > summary::-webkit-details-marker { display: none; }
  .home-page .panel.m-fold > summary::after {
    color: var(--muted-soft);
    content: "+";
    font-size: 1.05rem;
    line-height: 1;
  }
  .home-page .panel.m-fold[open] > summary::after { content: "−"; }
  .home-page .panel.m-fold > summary h3 { margin: 0; }
  .home-page .panel.m-fold > .check-list { padding: 0 0.875rem 0.875rem; }
  .home-page .check-list li { font-size: 0.86rem; line-height: 1.45; }

  /* ── Pradžia · Vilniaus aplinka → 2 stulpeliai ──────────────────────────*/
  .home-page .plain-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .home-page .plain-grid > div {
    min-width: 0;
    padding: 0.7rem 0.75rem 0.75rem;
    border: 1px solid rgba(247, 243, 234, 0.09);
    border-radius: 0.75rem;
    background: rgba(247, 243, 234, 0.022);
  }

  .home-page .plain-grid h3 { margin-bottom: 0.2rem; font-size: 0.875rem; line-height: 1.2; }
  .home-page .plain-grid p { font-size: 0.78rem; line-height: 1.4; }

  .landing .sim-frame.is-wide img { aspect-ratio: 16 / 8; object-fit: cover; }

  .home-page .note,
  .home-page #vilnius > .note {
    margin-top: 0.875rem;
    padding: 0.7rem 0.8rem;
    font-size: 0.8rem;
    line-height: 1.45;
  }

  /* ── Pradžia · ataskaitos demonstracija ─────────────────────────────────
     Trys skaitikliai telpa vienoje eilutėje, klaidų eilutės sutankinamos. */
  .home-page .report-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .home-page .report-tiles > div { padding: 0.55rem 0.5rem; }
  .home-page .report-tiles dt { font-size: 0.5625rem; letter-spacing: 0.07em; }
  .home-page .report-tiles dd { font-size: 1.25rem; }

  .home-page .report-head { padding: 0.75rem 0.8rem; }
  .home-page .fault-list li {
    gap: 0.45rem 0.6rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .home-page .report-foot { padding: 0.6rem 0.8rem; font-size: 0.72rem; line-height: 1.4; }

  .home-page .panel { padding: 0.875rem; }
  .home-page .panel .check-list li { font-size: 0.82rem; line-height: 1.4; }

  /* ── Pradžia · nemokamos KET juostos piltuvas ───────────────────────────*/
  .home-page .free-band { padding: 1rem; gap: 1rem; }
  .home-page .free-band h2 { font-size: 1.375rem; line-height: 1.14; }
  .home-page .free-band > div:first-child > p { font-size: 0.86rem; line-height: 1.45; }
  .home-page .funnel { gap: 0.4rem; }
  .home-page .funnel-row { padding: 0.6rem 0.7rem; row-gap: 0.15rem; }
  .home-page .funnel-row strong { font-size: 0.86rem; }
  .home-page .funnel-row span { font-size: 0.75rem; line-height: 1.35; }
}

/* Suskleidžiami blokai desktop'e visada atviri ir atrodo kaip paprasta
   antraštė — sulankstymas yra tik telefono taupymo priemonė. */
@media (min-width: 48rem) {
  .m-fold > summary {
    display: block;
    cursor: default;
    list-style: none;
  }

  .m-fold > summary::-webkit-details-marker,
  .m-fold > summary::after { display: none; }
}

/* ── Reikalavimai · stulpelio perjungiklis ────────────────────────────────
   Telefone dvi reikšmių skiltys viena šalia kitos suplaka lentelę į sieną,
   todėl rodomas vienas stulpelis, o kitas pasiekiamas perjungikliu. Be JS
   atributo nėra — tada matoma pilna lentelė, kaip ir anksčiau. */
.req-view { display: none; }

@media (max-width: 47.99rem) {
  .requirements-page .req-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    margin: 0 0 0.75rem;
    padding: 3px;
    border: 1px solid rgba(247, 243, 234, 0.12);
    border-radius: 0.7rem;
    background: rgba(247, 243, 234, 0.04);
  }

  .requirements-page .req-view-opt {
    min-height: 2.5rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--muted-soft);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
  }

  .requirements-page .req-view-opt.is-on {
    background: var(--chalk);
    color: #121211;
  }

  .requirements-page .req-view-opt:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
  }

  /* Vienas stulpelis · viena eilutė: komponentas → reikšmė. */
  .requirements-page[data-req-view] .req-table tbody {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(247, 243, 234, 0.13);
    border-radius: 0.75rem;
    background: #161615;
  }

  .requirements-page[data-req-view] .req-table tbody tr {
    display: grid;
    grid-template-columns: minmax(6.25rem, 0.9fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 0.15rem 0.75rem;
    padding: 0.6rem 0.8rem;
    border: 0;
    border-bottom: 1px solid rgba(247, 243, 234, 0.08);
    border-radius: 0;
    background: transparent;
  }

  .requirements-page[data-req-view] .req-table tbody tr:last-child { border-bottom: 0; }

  .requirements-page[data-req-view] .req-table tbody th {
    grid-column: 1;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-soft);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
  }

  .requirements-page[data-req-view] .req-table tbody td {
    grid-column: 2;
    display: block;
    padding: 0;
    border: 0;
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .requirements-page[data-req-view] .req-table tbody td::before { display: none; }

  .requirements-page[data-req-view="min"] .req-table tbody td.is-rec,
  .requirements-page[data-req-view="rec"] .req-table tbody td:not(.is-rec) { display: none; }

  /* ── Reikalavimai · likusi puslapio dalis ──────────────────────────────*/
  .requirements-page .page-head h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.08; }
  .requirements-page .page-head .lead { font-size: 0.875rem; line-height: 1.5; }

  .requirements-page .req-check { gap: 0.5rem; margin-bottom: 0.75rem; }
  .requirements-page .req-check .note { padding: 0.7rem 0.8rem; font-size: 0.8rem; line-height: 1.45; }
  .requirements-page .req-check .button { min-height: 2.875rem; }

  /* Valdymo įrenginiai — kompaktiškos eilutės vietoj aukštų kortelių:
     pavadinimas ir žyma vienoje eilutėje, „Tinka“ – vienas trumpas sakinys. */
  .requirements-page .pricing-cards { gap: 0.5rem; }

  .requirements-page .price-card {
    gap: 0.35rem;
    padding: 0.75rem 0.8rem;
  }

  .requirements-page .price-card-top { gap: 0.5rem; align-items: center; }
  .requirements-page .price-card h3 { font-size: 0.9375rem; line-height: 1.2; }
  .requirements-page .price-card p { font-size: 0.8rem; line-height: 1.4; }
  .requirements-page .price-card hr { display: none; }

  /* „Tinka“ – viena eilutė: etiketė ir sakinys viename bloke, be atskiro
     antraštės aukšto. Inline-blokai anksčiau persidengdavo, nes tėvas buvo
     flex, o vaikai grįždavo į bloko srautą. */
  .requirements-page .price-card .overline {
    display: none;
  }

  .requirements-page .price-card .fit {
    margin-top: 0.45rem;
    padding-top: 0.5rem;
    border-top: var(--line-card);
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .requirements-page .price-card .fit::before {
    color: var(--muted-soft);
    content: "Tinka: ";
    font-weight: 600;
  }

  /* Kiti praktiniai dalykai — antriniai klausimai suskleidžiami. */
  .requirements-page .plain-grid.is-folds {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
  }
}

/* Suskleidžiamas klausimas — ta pati išvaizda pagalbos puslapio kortelėse. */
.fold-item > summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.fold-item > summary::-webkit-details-marker { display: none; }

.fold-item > summary h3 { margin: 0; }

@media (max-width: 47.99rem) {
  .fold-item {
    padding: 0.15rem 0.8rem 0.15rem;
    border: 1px solid rgba(247, 243, 234, 0.1);
    border-radius: 0.7rem;
    background: rgba(247, 243, 234, 0.022);
  }

  .fold-item > summary::after {
    flex: 0 0 auto;
    color: var(--muted-soft);
    content: "+";
    font-size: 1.05rem;
    line-height: 1;
  }

  .fold-item[open] > summary::after { content: "−"; }
  .fold-item > summary h3 { font-size: 0.875rem; line-height: 1.25; }
  .fold-item > p { margin: 0 0 0.7rem; font-size: 0.8rem; line-height: 1.45; }
}

@media (max-width: 47.99rem) {
  /* „Tinka“ etiketė ir sakinys telefone telpa į vieną eilutę. */
  .requirements-page .price-card { display: block; }
  .requirements-page .price-card > * + * { margin-top: 0.35rem; }
  .requirements-page .price-card .overline + .fit { margin-top: 0; }

  /* ── Kainos ─────────────────────────────────────────────────────────────
     Kaina, bandymų skaičius ir CTA – trys svarbiausi elementai; visa kita
     rodoma smulkiau. Bendros paketų savybės ir toliau surašytos vieną kartą
     „Visuose paketuose“ bloke, o ne kartojamos kiekvienoje kortelėje. */
  .pricing-page .page-head h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.08; }
  .pricing-page .page-head .lead { font-size: 0.875rem; line-height: 1.5; }
  .pricing-page .page-status-link { min-height: 2.5rem; font-size: 0.8125rem; }

  .pricing-page .pricing-includes { margin-bottom: 0.75rem; padding: 0.75rem 0.85rem; }
  .pricing-page .pricing-includes .check-list { gap: 0.2rem; }
  .pricing-page .pricing-includes .check-list li { min-height: 0; font-size: 0.8rem; line-height: 1.4; }

  .pricing-page .pricing-cards { gap: 0.5rem; }

  .pricing-page .price-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.3rem 0.75rem;
    padding: 0.8rem 0.85rem;
  }

  .pricing-page .price-card-top { grid-column: 1 / -1; gap: 0.5rem; align-items: center; }
  .pricing-page .price-card-top h2 { font-size: 1rem; line-height: 1.2; }

  .pricing-page .price-credits {
    grid-column: 1;
    margin: 0;
    font-size: 0.75rem;
  }

  .pricing-page .price-credits strong { font-size: 1.625rem; line-height: 1.1; }

  .pricing-page .price-unit {
    grid-column: 2;
    margin: 0;
    font-size: 0.75rem;
    text-align: right;
  }

  .pricing-page .price-card p.price-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .pricing-page .price-card .button {
    grid-column: 1 / -1;
    min-height: 2.875rem;
    margin-top: 0.15rem;
  }

  .pricing-page .payment-method-note { font-size: 0.78rem; line-height: 1.45; }

  /* Po apmokėjimo — numeris ir tekstas vienoje kompaktiškoje eilutėje. */
  .pricing-page .step-list { gap: 0.375rem; }

  .pricing-page .step-list li {
    display: grid;
    grid-template-columns: 1.625rem minmax(0, 1fr);
    align-items: start;
    gap: 0.15rem 0.65rem;
    padding: 0.7rem 0.8rem;
  }

  .pricing-page .step-list .step-n {
    width: 1.625rem;
    height: 1.625rem;
    font-size: 0.75rem;
  }

  .pricing-page .step-list h3 { font-size: 0.875rem; line-height: 1.2; }
  .pricing-page .step-list p { font-size: 0.78rem; line-height: 1.4; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09 · TEISINIAI DOKUMENTAI — skaitymo patogumas
   Tekstas nekeičiamas ir netrumpinamas. Keičiasi tik jo pateikimas:
   ryškesnė hierarchija, matomi punktų numeriai su kabančia įtrauka,
   ribotas eilutės ilgis ir turinio navigacija (telefone – suskleidžiama,
   plačiame ekrane – prilipusi šoninė juosta).
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

/* Antraštės — ryškesnės už tekstą, su plona linija ir vieta prilipusiai
   svetainės antraštei, kad nuoroda nenuvestų po ja. */
.legal-doc h2 {
  margin: 1.5rem 0 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(247, 243, 234, 0.09);
  color: var(--chalk);
  font-size: clamp(1.0625rem, 3.4vw, 1.375rem);
  line-height: 1.25;
  scroll-margin-top: 5.5rem;
}

.legal-doc h2:first-of-type { margin-top: 0.5rem; }

.legal-doc .legal-body,
.legal-doc > div {
  max-width: 74ch;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Word'o eksporto apvalkalai turėjo `pre-wrap`, todėl tarp tagų buvęs šaltinio
   įtraukimas virsdavo tuščiomis eilutėmis. Tarpus valdo sekcijų ritmas, o
   `pre-wrap` lieka tik pačiam tekstui. */
.legal-doc > div,
.legal-doc > div > div,
.legal-doc > div > div > div:not(.legal-body) {
  white-space: normal;
}

/* Punktai — kiekvienas atskiras blokas su kabančiu numeriu. Pertvarkymą
   daro site-config.js ir tik tada, kai po jo tekstas nepakinta. */
.legal-doc .legal-body.is-clauses {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  white-space: normal;
}

.legal-clause {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.25rem 0.35rem;
  margin: 0;
  white-space: pre-wrap;
}

.legal-n {
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  /* Skyriklis saugomas tekste, bet nerodomas: `normal` nukerpa uodegos tarpą. */
  white-space: normal;
}

.legal-t { min-width: 0; white-space: pre-wrap; }

/* Įžanginės eilutės ir sąrašo punktai be numerio — per abu stulpelius. */
.legal-clause.is-plain { display: block; padding-left: 2.85rem; }

/* Turinys */
.legal-toc {
  border: 1px solid rgba(247, 243, 234, 0.11);
  border-radius: 0.75rem;
  background: rgba(247, 243, 234, 0.028);
}

.legal-toc-fold > summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  color: var(--muted-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.legal-toc-fold > summary::-webkit-details-marker { display: none; }

.legal-toc-fold > summary::after {
  color: var(--muted-soft);
  content: "+";
  font-size: 1.05rem;
  letter-spacing: 0;
  line-height: 1;
}

.legal-toc-fold[open] > summary::after { content: "−"; }

.legal-toc ol {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 0.5rem 0.5rem;
  list-style: none;
  counter-reset: legal-toc;
}

.legal-toc li { counter-increment: legal-toc; }

.legal-toc a {
  display: block;
  padding: 0.5rem 0.45rem;
  border-radius: 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.35;
  text-decoration: none;
}

.legal-toc a:hover,
.legal-toc a:focus-visible { background: rgba(247, 243, 234, 0.06); color: var(--chalk); }

@media (max-width: 63.99rem) {
  /* Telefone turinys prilimpa prie viršaus — grįžti prie navigacijos galima
     bet kurioje dokumento vietoje. */
  .legal-toc {
    position: sticky;
    z-index: 20;
    top: 3.75rem;
    background: rgba(20, 20, 19, 0.97);
    backdrop-filter: blur(14px) saturate(130%);
  }

  .legal-toc ol { max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; }
  .legal-doc .legal-body, .legal-doc > div { font-size: 0.9375rem; line-height: 1.65; }
  .legal-clause { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.2rem 0.3rem; }
  .legal-doc h2 { margin-top: 1.125rem; padding-top: 0.875rem; scroll-margin-top: 8.5rem; }
}

@media (min-width: 64rem) {
  /* Plačiame ekrane — prilipusi šoninė turinio juosta kairėje, tekstas dešinėje. */
  .legal-doc {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .legal-doc > .legal-toc {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .legal-toc-fold > summary { cursor: default; }
  .legal-toc-fold > summary::after { display: none; }
}

@media (max-width: 47.99rem) {
  /* Abu pagrindiniai veiksmai matomi vienu metu — nereikia slinkti, kad
     pamatytum nemokamą KET nuorodą. */
  .home-page .hero .actions,
  .home-page .free-band .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .home-page .hero .actions .button,
  .home-page .free-band .actions .button {
    min-height: 3rem;
    padding-inline: 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    text-align: center;
  }

  .home-page .hero .actions .button svg,
  .home-page .free-band .actions .button svg { flex: 0 0 auto; }

  /* Smulkesnis tekstas kortelėse — jos vis tiek lieka skaitomos, bet trys
     eilutės virsta dviem. */
  .home-page .tile-grid > div > p:last-child,
  .home-page .plain-grid p {
    font-size: 0.75rem;
    line-height: 1.38;
  }

  .home-page .stage-card { padding: 0.6rem; }
  .home-page .road-stage { height: 8.5rem; }
  .home-page .section-head > p { font-size: 0.84rem; line-height: 1.45; }

  .home-page .fault-list li { padding: 0.42rem 0.75rem; font-size: 0.78rem; }
  .home-page .fault-list .what { line-height: 1.3; }
  .home-page .free-band h2 { font-size: 1.25rem; }
  .home-page .funnel-row { padding: 0.55rem 0.65rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09 · MOBILE POLISH
   Vientisa tarpų skalė, hero kadras be persidengimo ir vienodos kortelės.
   Visa tai galioja tik siaurame ekrane – desktop išdėstymas nekeičiamas.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 47.99rem) {
  /* ── Tarpų ir paviršių skalė ────────────────────────────────────────────
     Vienas šaltinis visiems mobiliems tarpams: sekcija → blokas → kortelė.
     Sekcijos naudoja `--sp-section`, blokai `--sp-block`, kortelių tinklai
     `--sp-grid`, o kortelių vidus `--pad-card`. Taip niekur nebelieka
     atsitiktinių 0,45 / 0,62 / 0,875 rem reikšmių. */
  .landing {
    --sp-section: 1.75rem;
    --sp-block: 1rem;
    --sp-grid: 0.625rem;
    --sp-tight: 0.375rem;
    --pad-card: 0.875rem;
    --r-card: 0.875rem;
    --r-inner: 0.625rem;
    --line-card: 1px solid rgba(247, 243, 234, 0.1);
    --surface-card: rgba(247, 243, 234, 0.025);
  }

  .home-page > section + section,
  .home-page > .stat-band + section,
  .pricing-page > section + section,
  .requirements-page > section + section,
  .download-page > section + section,
  .support-page > section + section {
    padding-top: var(--sp-section);
  }

  .home-page .section-head,
  .pricing-page .section-head,
  .requirements-page .section-head {
    gap: 0.35rem;
    margin-bottom: var(--sp-block);
  }

  /* ── Hero kadras ────────────────────────────────────────────────────────
     Telefone HUD blokai nebėra absoliutūs sluoksniai: kadras tampa grid
     kortele, kurioje nuotrauka, metrikų juosta ir egzaminuotojo eilutė turi
     savo eilutes. Persidengti nebėra kaip, o aukštis tampa nuspėjamas. */
  .landing .sim-frame.is-hero {
    display: grid;
    position: relative;
    height: auto;
    aspect-ratio: auto;
    grid-template-rows: auto auto auto;
    overflow: hidden;
    border: var(--line-card);
    border-radius: var(--r-card);
    background: #0d0d0c;
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.42);
  }

  .landing .sim-frame.is-hero img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    grid-row: 1;
    object-fit: cover;
    object-position: 56% 70%;
    filter: saturate(0.72) brightness(0.66) contrast(1.04);
  }

  .landing .sim-frame.is-hero .hud {
    position: static;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Gyvos būsenos žyma lieka ant nuotraukos – ji maža ir nieko neuždengia. */
  .landing .sim-frame.is-hero .hud-live {
    position: absolute;
    z-index: 2;
    top: 0.6rem;
    right: 0.6rem;
    gap: 0.4rem;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(10, 14, 22, 0.82);
    color: #c9cfdd;
    font-size: 0.625rem;
    letter-spacing: 0.02em;
  }

  .landing .sim-frame.is-hero .hud-status {
    display: grid;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 16, 24, 0.92);
  }

  /* Geltonas akcentas iš flex juostelės virsta plona linija virš metrikų —
     grid'e jis kitaip užimtų visą langelį. */
  .landing .sim-frame.is-hero .hud-status::before {
    grid-column: 1 / -1;
    height: 2px;
    flex: none;
  }

  .landing .sim-frame.is-hero .hud-status .hud-cell {
    gap: 0.15rem;
    padding: 0.55rem 0.8rem;
  }

  .landing .sim-frame.is-hero .hud-status .hud-cell + .hud-cell {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .landing .sim-frame.is-hero .hud-subtitle {
    grid-row: 3;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 16, 24, 0.92);
  }

  .landing .sim-frame.is-hero .hud-subtitle .hud-cell {
    gap: 0.25rem;
    padding: 0.6rem 0.8rem 0.7rem;
  }

  .landing .sim-frame.is-hero .hud-subtitle p {
    margin: 0;
    color: #d7dbe4;
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .landing .sim-frame.is-hero .hud-label { font-size: 0.5rem; letter-spacing: 0.16em; }
  .landing .sim-frame.is-hero .hud-value { font-size: 1.0625rem; }

  /* Platesnis kadras be overlay – tik nuotrauka, todėl užtenka proporcijos. */
  .landing .sim-frame.is-wide {
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-card);
  }
}

/* Reikalavimų santrauka virš lentelės — trumpa mintis ir veiksmas vienoje
   juostoje; anksčiau čia buvo įspėjimo blokas. */
.req-check-lead {
  flex: 1 1 30rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  text-wrap: pretty;
}

@media (max-width: 47.99rem) {
  .requirements-page .req-check {
    gap: var(--sp-tight);
    margin-top: 0;
    margin-bottom: var(--sp-block);
  }

  .requirements-page .req-check-lead {
    flex: 1 1 100%;
    font-size: 0.86rem;
    line-height: 1.5;
  }

  .requirements-page .req-check .button {
    flex: 1 1 100%;
    min-height: 2.875rem;
    justify-content: center;
  }
}

@media (max-width: 47.99rem) {
  /* ── Vienodos kortelės ──────────────────────────────────────────────────
     Visi kortelių tinklai naudoja tą patį tarpą, spindulį, kraštinę ir
     paviršių. Anksčiau kiekviena sekcija turėjo savo reikšmes, todėl
     puslapis atrodė sudėtas iš skirtingų komponentų. */
  .landing .tile-grid,
  .landing .plain-grid,
  .landing .pricing-cards,
  .landing .stat-band,
  .landing .step-list,
  .landing .dl-steps .step-list,
  .landing .case-grid,
  .landing .funnel,
  .landing .fault-list {
    gap: var(--sp-grid);
  }

  .landing .tile-grid > div,
  .landing .plain-grid > div,
  .landing .plain-grid > .fold-item,
  .landing .price-card,
  .landing .stat-band > div,
  .landing .step-list li,
  .landing .case-item,
  .landing .panel,
  .landing .pricing-includes,
  .landing .report,
  .landing .free-band,
  .landing .stage-card,
  .landing .req-table tbody {
    border-radius: var(--r-card);
  }

  .landing .tile-grid > div,
  .landing .plain-grid > div,
  .landing .plain-grid > .fold-item {
    border: var(--line-card);
    background: var(--surface-card);
  }

  /* Vienodas kortelių vidus: antraštė → tekstas → veiksmas. */
  .landing .tile-grid > div,
  .landing .plain-grid > div {
    padding: var(--pad-card);
  }

  .landing .tile-grid h3,
  .landing .plain-grid h3 {
    margin: 0 0 0.2rem;
    font-size: 0.875rem;
    line-height: 1.25;
  }

  .landing .tile-grid > div > p:last-child,
  .landing .plain-grid p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
  }

  /* Vienodo aukščio kortelės ten, kur jos stovi greta — kitaip eilutės
     apačia atrodo nulaužta. */
  .landing .tile-grid,
  .landing .plain-grid {
    align-items: stretch;
  }

  .landing .tile-grid > div,
  .landing .plain-grid > div {
    display: flex;
    height: 100%;
    flex-direction: column;
  }

  /* ── Antraščių ritmas ───────────────────────────────────────────────────*/
  .landing .page-head { gap: 0.4rem; }
  .landing .page-head h1 { margin-bottom: 0.1rem; }
  .landing .page-head .lead { margin: 0; font-size: 0.875rem; line-height: 1.5; }
  .landing h2.sub { margin: 0 0 var(--sp-block); }

  /* ── Sąrašai ────────────────────────────────────────────────────────────*/
  .landing .check-list { gap: 0.3rem; }
  .landing .note + .note { margin-top: var(--sp-tight); }
}

/* ── Lietimo taikiniai ─────────────────────────────────────────────────────
   Antrinė navigacija telefone irgi turi būti patogi pirštui: iki šiol
   naršymo kelias, paskyros skiltys ir turinio nuorodos buvo 15–37 px. */
@media (max-width: 47.99rem) {
  .landing .breadcrumbs ol { align-items: center; min-height: 2.75rem; }
  .landing .breadcrumbs a {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    padding-right: 0.15rem;
  }

  .auth-tabs { gap: 0.25rem; }
  .auth-tab { min-height: 2.75rem; padding-inline: 0.75rem; }

  .legal-toc a { min-height: 2.75rem; display: flex; align-items: center; }
}

@media (max-width: 47.99rem) {
  /* Atsisiuntimo puslapis naudoja tą patį hero komponentą – tie patys
     veiksmų ir smulkiosios juostos dėsniai. */
  .download-page .hero { padding-block: 0.875rem 1.25rem; gap: 1rem; }
  .download-page .hero > div:first-child { gap: 0.8rem; }
  .download-page .hero .lead { font-size: 0.9rem; line-height: 1.48; }

  .download-page .hero .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
  }

  .download-page .hero .actions .button {
    width: 100%;
    min-height: 3rem;
    padding-inline: 0.6rem;
    justify-content: center;
    font-size: 0.8125rem;
    line-height: 1.2;
    text-align: center;
  }

  /* Kai atsisiuntimo nuoroda bus prijungta, ji tampa pirmu veiksmu ir
     užima visą eilutę – tada šalia jos esantys du veiksmai lieka antroje. */
  .download-page .hero .actions [data-download-link]:not([hidden]) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 47.99rem) {
  /* Atsisiuntimo hero turėjo savo proporciją, kuri suspausdavo naują grid
     kadrą iki linijos. Eiliškumas paliekamas, proporcija atiduodama turiniui. */
  .download-page .hero .sim-frame.is-hero {
    aspect-ratio: auto;
    height: auto;
  }
}

@media (max-width: 47.99rem) {
  /* ── Vertikalus ritmas: viskas iš 4 px skalės ──────────────────────────
     Iki šiol tuose pačiuose blokuose susimaišydavo 0,15 / 0,35 / 0,45 /
     0,55 rem tarpai, todėl tas pats komponentas skirtinguose puslapiuose
     atrodydavo kitaip. Struktūriniai tarpai dabar imami tik iš skalės. */
  .landing .hero > div:first-child { gap: var(--sp-block); }
  .landing .hero .actions,
  .landing .free-band .actions { gap: 0.5rem; }
  .landing .hero-note { gap: 0.5rem; }
  .landing .check-list { gap: 0.25rem; }
  .landing .funnel { gap: var(--sp-tight); }
  .landing .free-band { gap: var(--sp-block); padding: var(--pad-card); }
  .landing .report-tiles { gap: var(--sp-tight); }
  .landing .stat-band { gap: var(--sp-grid); }
  .landing .panel { padding: var(--pad-card); }
  .landing .stage-card { padding: 0.625rem; }

  /* ── Paskyros skiltys ──────────────────────────────────────────────────
     Trys skiltys nebesilaužo į „dvi viršuje, viena palaidai apačioje“:
     du pagrindiniai veiksmai vienoje eilutėje, trečias – per visą plotį. */
  .auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    width: 100%;
  }

  .auth-tab {
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: 0.5rem;
    font-size: 0.8125rem;
    text-align: center;
  }

  .auth-tab:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 47.99rem) {
  /* Varnelė lygiuojama su pirma teksto eilute, o ne su kortelės padding'u —
     dviejų eilučių punktuose ji atrodydavo nuslinkusi žemyn. */
  .landing .check-list.is-spaced li::before { top: calc(0.3rem + 0.06em); }

  /* Dekoratyvinė maršruto schema telefone žemesnė — kitaip po ja lieka
     tuščias kortelės plotas. */
  .home-page .road-stage { height: 7rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-02 — vizualiniai pataisymai
   
   Pagrindinis principas: telefone išdėstymas turi būti TOKS PAT kaip desktope,
   tik mažesnis. Anksčiau mobilus vaizdas ne mažindavo, o PERDARYDAVO tinklelius
   (3 kolonos virsdavo 2, inline eilutė virsdavo lipdukais, HUD nuo nuotraukos
   nukrisdavo po ja), todėl du įrenginiai rodydavo skirtingą produktą.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Šviesesnis fonas ───────────────────────────────────────────────────
   Geltonas ir mėlynas švytėjimas buvo tokie silpni, kad gradientas skaitėsi
   kaip plokščias juodas fonas. Atspalviai tie patys, pakeltas tik intensyvumas. */
body {
  background-image:
    radial-gradient(120% 62% at 50% -14%, rgba(255, 194, 74, 0.19), transparent 68%),
    radial-gradient(78% 52% at 96% 8%, rgba(255, 160, 60, 0.13), transparent 64%),
    radial-gradient(90% 46% at 8% 42%, rgba(47, 91, 255, 0.15), transparent 62%),
    radial-gradient(120% 44% at 50% 104%, rgba(255, 176, 74, 0.11), transparent 70%);
}

/* ── 2. Atsisiuntimo puslapio antriniai veiksmai ───────────────────────────
   Hero turi vieną pagrindinę nuorodą. „Diegimo instrukcija" ir „Sistemos
   reikalavimai" yra techninė informacija, todėl gyvena po hero, o ne šalia
   pagrindinio veiksmo. */
.dl-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.dl-secondary .button {
  flex: 1 1 auto;
  justify-content: center;
}

/* Kai hero turi vieną veiksmą, `.actions` nustoja būti mygtukų eilute:
   paaiškinimas, kodėl atsisiuntimo dar nėra, privalo gauti visą plotį, o ne
   susispausti į pusę kolonos šalia paslėpto mygtuko. */
.landing .hero .actions.is-single {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.landing .hero .actions.is-single > .button {
  align-self: flex-start;
}

.landing .hero .actions.is-single .dl-unavailable {
  width: 100%;
  max-width: 34rem;
  margin: 0;
}

/* ── 2b. Trūkstamas tarpas žymose ──────────────────────────────────────────
   `.pill` yra flex konteineris, todėl tekstas „Sutaupai " tampa atskiru flex
   elementu ir jo galinis tarpas nukerpamas — ekrane matėsi „SUTAUPAI1,99 €".
   Tai buvo matoma ir desktope. Tarpas grąžinamas per `gap`, o ne įrašant
   `&nbsp;` į HTML, nes reikšmę į span'ą įrašo JavaScript. */
.pill {
  gap: 0.25em;
}

/* ── 3. „Ką gauni po egzamino" padėtis ─────────────────────────────────────
   Desktope blokas lieka po sekcijos įvadu kairėje. Telefone jis atsiduria PO
   ataskaita: pirma parodome, kaip atrodo rezultatas, ir tik tada išvardijame,
   kas jame yra. Anksčiau tvarka buvo atvirkštinė ir sulankstytas sąrašas
   stovėjo prieš tai, ką jis aprašo. */
.split.has-aside {
  grid-template-columns: minmax(0, 1fr);
}

.split.has-aside > .section-head { order: 1; }
.split.has-aside > .report { order: 2; }
.split.has-aside > .split-aside { order: 3; margin-top: 0; }

@media (min-width: 62rem) {
  .split.has-aside {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "head report"
      "aside report";
    align-content: start;
  }

  .split.has-aside > .section-head { grid-area: head; }
  .split.has-aside > .split-aside { grid-area: aside; }
  .split.has-aside > .report { grid-area: report; }
}

/* ── 4. Ataskaitos metrikų juostos plyšiai ─────────────────────────────────
   `.report-tiles` skiriamąsias linijas piešia 1px tarpu, pro kurį matyti
   konteinerio `--hairline` fonas. Mobilus stilius tą tarpą buvo padidinęs iki
   0,4rem, todėl vietoje plaukelio atsirasdavo pilkos juostos tarp „NEKRITINĖS",
   „KRITINĖS" ir „TRUKMĖ" — būtent tie nelygumai, kurie krito į akis. */
@media (max-width: 47.99rem) {
  .home-page .report-tiles {
    gap: 1px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── 5. Telefonas = desktopo išdėstymas, tik mažesnis ──────────────────────
   Visi šio bloko override'ai turi vieną tikslą: grąžinti tą patį tinklelį,
   kurį mato desktopo lankytojas. */
@media (max-width: 47.99rem) {

  /* 5a. Hero HUD grįžta ANT nuotraukos.
     Anksčiau kadras telefone virsdavo grid kortele, kurioje „VAŽIAVIMAS EISME"
     ir „MARŠRUTAS" nukrisdavo po paveikslėliu atskiromis eilutėmis. Tai
     nustodavo atrodyti kaip žaidimo sąsaja ir tapdavo paprasta lentele. */
  .landing .sim-frame.is-hero {
    display: block;
    position: relative;
    height: auto;
    aspect-ratio: 16 / 10;
    grid-template-rows: none;
  }

  .landing .sim-frame.is-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 56% 68%;
    filter: saturate(0.82) brightness(0.74) contrast(1.04);
  }

  .landing .sim-frame.is-hero .hud {
    position: absolute;
    display: flex;
    max-width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    background: rgba(10, 14, 22, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .landing .sim-frame.is-hero .hud-status {
    top: 0.6rem;
    right: auto;
    bottom: auto;
    left: 0.6rem;
    grid-template-columns: none;
  }

  /* Geltona juostelė vėl yra vertikalus akcentas kairėje, o ne linija viršuje. */
  .landing .sim-frame.is-hero .hud-status::before {
    flex: 0 0 2px;
    height: auto;
    grid-column: auto;
  }

  .landing .sim-frame.is-hero .hud-live {
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.5625rem;
  }

  .landing .sim-frame.is-hero .hud-subtitle {
    top: auto;
    right: 0.6rem;
    bottom: 0.6rem;
    left: 0.6rem;
    max-width: none;
  }

  .landing .sim-frame.is-hero .hud-cell {
    gap: 0.15rem;
    padding: 0.4rem 0.6rem;
  }

  .landing .sim-frame.is-hero .hud-cell + .hud-cell {
    border-left: 1px solid rgba(255, 255, 255, 0.09);
  }

  .landing .sim-frame.is-hero .hud-subtitle .hud-cell {
    padding: 0.45rem 0.65rem;
  }

  .landing .sim-frame.is-hero .hud-label { font-size: 0.4375rem; letter-spacing: 0.16em; }
  .landing .sim-frame.is-hero .hud-value { font-size: 0.9375rem; }
  .landing .sim-frame.is-hero .hud-subtitle p { font-size: 0.6875rem; line-height: 1.3; }

  /* 5b. Hero prierašas vėl yra viena eilutė su taškais, kaip desktope.
     Lipdukai telefone atrodė kaip veiksmo mygtukai, kuriais jie nėra. */
  .landing .hero .hero-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.35rem;
    margin-top: 0.75rem;
    font-size: 0.625rem;
    line-height: 1.5;
  }

  /* Frazės nesilaužo per vidurį — laužiasi tik tarp jų, kaip desktope. */
  .landing .hero .hero-note > span:not(.sep) {
    white-space: nowrap;
  }

  .landing .hero .hero-note > span:not(.sep) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
  }

  .landing .hero .hero-note .sep {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
  }

  /* 5c. Trys blokai lieka trimis, o ne dviem su „našlaičiu" apačioje. */
  .home-page .stat-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-page .stat-band > div:last-child {
    grid-column: auto;
  }

  .home-page .stat-band h2 { font-size: 0.75rem; line-height: 1.2; }
  .home-page .stat-band p { font-size: 0.6875rem; line-height: 1.35; }

}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-02 (antras etapas) — tarpai, paveikslėliai ir kainų kortelių dizainas
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Reikalavimų puslapis: mygtukas nebekabo ant lentelės ───────────────
   Prieš tai virš `.req-check` buvo 117 px (sekcijos `padding-top` + jos pačios
   `margin-top`), o po juo — 1 px iki lentelės. Todėl mygtukas atrodė prilipęs
   prie lentelės viršaus, o virš jo žiojėjo tuščia juosta. */
.requirements-page .req-check {
  margin-top: 0;
  margin-bottom: 1.5rem;
  justify-content: space-between;
}

.requirements-page .req-check + [data-requirements-measured],
.requirements-page .req-check + [data-requirements-unmeasured] {
  margin-top: 0;
}

/* ── B. Teorijos puslapis: kategorijų juosta lygiuojasi su režimų juosta ───
   `.theory-bar` turi neigiamas šonines paraštes (`0 -14px`), o `.lic-row` –
   ne, todėl dvi viena po kitos einančios juostos baigdavosi skirtingose
   vietose ir tarp jų matėsi laiptelis. */
.theory .lic-row {
  margin: 0.75rem 0 0;
  padding: 0 0 1rem;
  gap: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(247, 243, 234, 0.07);
}

/* Po kategorijų juostos privalo likti oro: anksčiau jos apačia ir režimų
   juostos viršus sutapdavo tiksliai (877 px = 877 px), todėl du skirtingi
   valdikliai atrodė kaip vienas susiliejęs blokas. */
.theory .lic-row + .theory-bar {
  margin-top: 1rem;
}

/* ── C. Klausimo iliustracija ──────────────────────────────────────────────
   Paveikslėliai bus įvairaus dydžio, todėl fiksuotas 4/3 (mobiliajame 16/9)
   santykis netinka: mažas paveikslėlis paliktų tuščią dėžę, o didelis
   išstumtų atsakymus už ekrano ir atsirastų slinkimas.
   
   Figūra dabar prisitaiko prie turinio ir turi lubas, susietas su ekrano
   aukščiu. Sumažinimas nieko nepraranda – paspaudus paveikslėlis atidaromas
   per visą ekraną (`zoom-img`). */
/* Iliustracijos dėžė yra pastovaus aukščio, o paveikslėlis joje – centre ir
   visada toks, koks telpa (`contain`). Todėl bet kokio dydžio nuotrauka
   atrodo vienodai: nedidelė nesivarto mažame kampe, o didelė neišstumia
   atsakymų už ekrano ir nesukuria slinkimo. Nieko nenukerpama – paspaudus
   paveikslėlis atidaromas per visą ekraną. */
.q-illu {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0.5rem;
}

/* Pastovaus aukščio dėžė reikalinga TIK tada, kai paveikslėlis tikrai yra.
   Dalis klausimų iliustracijos neturi (egzamino varikliukas tokiu atveju
   paslepia `img`), ir anksčiau jiems likdavo tuščias rėmelis per pusę ekrano. */
.q-illu:has(img:not([hidden])) {
  height: min(34vh, 17rem);
}

.q-illu:not(:has(img:not([hidden]))):not(:has(.q-illu-fallback)) {
  display: none;
}

.q-illu button {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.q-illu img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 47.99rem) {
  .q-illu { flex: 1 1 100%; }

  .q-illu:has(img:not([hidden])) {
    height: min(28vh, 13rem);
  }
}

/* ── D. Paskyros likučio kortelė ───────────────────────────────────────────
   Geltonas „Papildyti" buvo pilno aukščio blokas, prilipęs prie kortelės
   viršaus, apačios ir dešinės – rėmelis aplink jį nutrūkdavo ir atrodė, kad
   mygtukas išsiveržęs iš kortelės. Dabar jis yra mygtukas kortelės VIDUJE. */
.account-balance {
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  overflow: visible;
  background: #16161a;
}

.account-balance-cell {
  flex: 1 1 auto;
  padding: 0.25rem 0.5rem;
  background: transparent;
}

.account-balance-cta {
  align-self: stretch;
  padding: 0.85rem 1.25rem;
  border-radius: 0.5rem;
}

/* Nustatymų eilutės: skiriamoji linija nebesiekia kortelės krašto. */
.account-rows > div {
  padding-inline: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Kainodaros sekcija
   
   Čia parduodami VIRTUALAUS EGZAMINO BANDYMAI, o ne prenumerata: vienkartinis
   mokėjimas už konkretų bandymų skaičių. Todėl nėra nei „per mėnesį", nei
   mėnesio/metų jungiklio — tik trys kiekiai ir jų kainos.

   Išskirtas paketas nustatomas iš REALIŲ kainų: `site-config.js` parodo
   `[data-price-best]` tik tam paketui, kurio kaina už vieną bandymą mažiausia.
   Todėl akcentas rišamas prie tos pačios žymos (`:has`), o ne prie rankomis
   įrašytos klasės — pasikeitus kainoraščiui paryškinimas persikelia pats.
   ═══════════════════════════════════════════════════════════════════════════ */

.pricing-page .price-card .button .btn-short { display: none; }

.pricing-page .lead-sub {
  max-width: 46rem;
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pricing-page .pricing-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1.75rem;
}

@media (min-width: 62rem) {
  .pricing-page .pricing-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
  }
}

/* ── Kortelė ─────────────────────────────────────────────────────────────── */
.pricing-page .price-card {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 1.6rem 1.35rem 1.35rem;
  border: 1px solid rgba(247, 243, 234, 0.11);
  border-radius: 1.15rem;
  background:
    linear-gradient(180deg, rgba(247, 243, 234, 0.035), rgba(247, 243, 234, 0) 42%),
    #16161a;
  box-shadow: 0 1px 0 rgba(247, 243, 234, 0.04) inset, 0 14px 34px rgba(0, 0, 0, 0.34);
  transition:
    transform 0.18s var(--ease),
    border-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

@media (hover: hover) {
  .pricing-page .price-card:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 155, 255, 0.34);
    box-shadow: 0 1px 0 rgba(247, 243, 234, 0.05) inset, 0 20px 44px rgba(0, 0, 0, 0.44);
  }
}

/* ── Paketo antraštė ─────────────────────────────────────────────────────── */
.pricing-page .price-card-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0;
}

.pricing-page .price-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.pricing-page .price-kicker {
  margin: 0;
  color: #8a857a;
  font-size: 0.75rem;
  line-height: 1.35;
}

/* ── Kaina ───────────────────────────────────────────────────────────────── */
.pricing-page .price-card p.price-credits {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.15rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.75rem;
  color: var(--muted);
}

.pricing-page .price-card p.price-credits strong {
  display: inline;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.pricing-page .price-card p.price-unit {
  margin: 0.45rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Sutaupoma suma — skaičiuojama iš tikrų kainų `site-config.js`, čia tik forma. */
.pricing-page .price-card p.price-save {
  display: inline-flex;
  align-self: flex-start;
  gap: 0.2rem;
  margin: 0.7rem 0 0;
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(124, 155, 255, 0.3);
  border-radius: 999px;
  background: rgba(47, 91, 255, 0.14);
  color: #b9c8ff;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Privalumai ──────────────────────────────────────────────────────────── */
.pricing-page .price-perks {
  margin: 1.15rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid rgba(247, 243, 234, 0.09);
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

/* Eilutė lieka paprastu bloku, o ne grid/flex konteineriu.
   Grid'e KIEKVIENAS vaikas tampa atskiru elementu, todėl „Bandymai galioja"
   ir jame esantis `<span>` su terminu atsidurdavo skirtinguose langeliuose –
   terminas buvo spaudžiamas į 1rem stulpelį ir laužėsi po vieną raidę.
   Su absoliučia varnele tekstas lieka vientisas, kad ir kiek jame būtų
   `<span>` elementų, kuriuos įrašo `site-config.js`. */
.pricing-page .price-perks li {
  display: block;
  position: relative;
  padding-left: 1.6rem;
  color: #c9c4b8;
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Varnelė piešiama CSS'u: viena mažiau atsisiunčiama byla ir spalva paveldima. */
.pricing-page .price-perks li::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.3rem;
  width: 0.4rem;
  height: 0.72rem;
  border: solid #7c9bff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* ── Veiksmas ir smulkus tekstas ─────────────────────────────────────────── */
.pricing-page .price-card .button {
  width: 100%;
  margin: auto 0 0;
  justify-content: center;
  min-height: 3rem;
  padding: 0.8rem 1rem;
  font-size: 0.9375rem;
  text-align: center;
}

.pricing-page .price-perks + .button {
  margin-top: 1.35rem;
}

.pricing-page .price-card .button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

.pricing-page .price-card .button:active {
  transform: translateY(1px);
}

.pricing-page .price-card p.price-note {
  margin: 0.7rem 0 0;
  padding: 0;
  color: #8a857a;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

/* ── Rekomenduojamas paketas ──────────────────────────────────────────────
   Paryškinimas rišamas prie `[data-price-best]`, kurį rodo `site-config.js`
   pagal mažiausią kainą už bandymą. `.is-featured` lieka kaip atsarginis
   variantas naršyklėms be `:has` palaikymo. */
/* Išryškinimas be ryškaus apvado: šviesa ateina iš viršaus (nuo juostelės),
   rėmelis lieka tylus, o gylį duoda minkštas aplinkos švytėjimas, ne kietas
   antras kontūras. */
.pricing-page .price-card.is-featured,
.pricing-page .price-card:has([data-price-best]:not([hidden])) {
  border-color: rgba(124, 155, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(124, 155, 255, 0.15), rgba(47, 91, 255, 0.035) 38%, rgba(22, 22, 26, 0) 72%),
    #16161a;
  box-shadow:
    0 1px 0 rgba(247, 243, 234, 0.08) inset,
    0 12px 32px rgba(16, 26, 74, 0.34),
    0 0 36px -14px rgba(124, 155, 255, 0.55);
}

@media (hover: hover) {
  .pricing-page .price-card.is-featured:hover,
  .pricing-page .price-card:has([data-price-best]:not([hidden])):hover {
    border-color: rgba(124, 155, 255, 0.48);
  }
}

/* Žyma sėdi ant viršutinio krašto — kaip skirtukas, o ne kaip dar viena eilutė
   kortelės viduje, todėl visų trijų kortelių antraštės lieka viename lygyje. */
.pricing-page .price-card p.price-flag {
  display: inline-flex;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
  padding: 0.3rem 0.7rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #7c9bff, #2f5bff);
  color: #0b1020;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(47, 91, 255, 0.36);
}

.pricing-page .price-card p.price-flag svg {
  flex: none;
}

/* Desktope rekomenduojama kortelė šiek tiek pakylėta virš kitų dviejų. */
@media (min-width: 62rem) {
  .pricing-page .price-card.is-featured,
  .pricing-page .price-card:has([data-price-best]:not([hidden])) {
    margin-top: -0.75rem;
    padding-bottom: 1.6rem;
  }
}

/* Bendras privalumų sąrašas rodomas TIK telefone. Desktope jis gyvena
   kortelėse, kur vietos pakanka. */
.pricing-page .pricing-shared { display: none; }

/* ── Telefonas: trys kolonos, premium kompaktiškas variantas ──────────────
   107 px pločio kortelė yra griežtas apribojimas, todėl kiekvienas elementas
   turi savo FIKSUOTO aukščio zoną: juostelė, paketo vardas, kaina, kaina už
   bandymą, nuolaida, mygtukas. Zonos vienodos visose trijose kortelėse net kai
   turinio nėra (pirmas paketas nuolaidos neturi), todėl eilutės ir mygtukai
   lygiuojasi tiksliai, be `margin: auto` stumdymo.

   Privalumų sąrašas iš kortelių iškeltas žemiau – jis visoms trims vienodas. */
@media (max-width: 47.99rem) {
  .pricing-page .pricing-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 1.75rem;
  }

  .pricing-page .price-card {
    /* Viršuje – vieta juostelei. Ją turi tik rekomenduojamas paketas, bet
       tarpas rezervuojamas visoms, kad vardai liktų viename lygyje. */
    align-items: stretch;
    gap: 0;
    padding: 1.5rem 0.45rem 0.55rem;
    border-radius: 0.85rem;
  }

  .pricing-page .price-card h2 {
    min-height: 1.7em;
    font-size: 0.71875rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .pricing-page .price-kicker { display: none; }

  /* Kaina – pagrindinis kortelės akcentas. */
  .pricing-page .price-card p.price-credits {
    display: block;
    margin: 0.3rem 0 0;
    font-size: 0;
  }

  .pricing-page .price-card p.price-credits strong {
    display: block;
    font-size: 1.3125rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
  }

  /* Kaina už bandymą – tyli, bet įskaitoma. */
  .pricing-page .price-card p.price-unit {
    min-height: 2.1em;
    margin: 0.2rem 0 0;
    color: #8a857a;
    font-size: 0.5625rem;
    line-height: 1.35;
    text-align: left;
  }

  /* Nuolaidos zona. Vienodo aukščio visose kortelėse, todėl mygtukai
     lygiuojasi ir tada, kai pirmas paketas nuolaidos neturi. */
  .pricing-page .price-card p.price-save {
    display: block;
    visibility: visible;
    align-self: stretch;
    min-height: 1.25rem;
    margin: 0.3rem 0 0;
    padding: 0.15rem 0.3rem;
    border: 0;
    border-radius: 0.35rem;
    background: rgba(124, 155, 255, 0.13);
    color: #b9c8ff;
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.01em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
  }

  .pricing-page .price-card .price-perks,
  .pricing-page .price-card p.price-note { display: none; }

  /* CTA: trumpas tekstas, viena eilutė, 44 px paspaudimo zona. */
  .pricing-page .price-card .button {
    /* `auto` viršuje prispaudžia mygtuką prie kortelės apačios. Kortelės
       vienodo aukščio, todėl visi trys atsiduria tame pačiame lygyje net kai
       pirmas paketas neturi nuolaidos eilutės. */
    width: 100%;
    min-height: 2.75rem;
    margin: auto 0 0;
    padding-top: 0.5rem;
    padding: 0.5rem 0.3rem;
    border-radius: 0.6rem;
    font-size: 0.78125rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  .pricing-page .price-card .button .btn-full { display: none; }
  .pricing-page .price-card .button .btn-short { display: inline; }

  /* Juostelė: plona, per visą kortelės viršų, be šešėlio. */
  .pricing-page .price-card p.price-flag {
    top: 0;
    right: 0;
    left: 0;
    justify-content: center;
    gap: 0.2rem;
    max-width: none;
    padding: 0.2rem 0.2rem;
    transform: none;
    border-radius: 0.8rem 0.8rem 0 0;
    line-height: 1;
    background: linear-gradient(180deg, rgba(140, 168, 255, 0.95), rgba(63, 104, 255, 0.95));
    box-shadow: none;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .pricing-page .price-card p.price-flag svg { width: 9px; height: 9px; }
  .pricing-page .price-flag-rest { display: none; }

  .pricing-page .price-card.is-featured,
  .pricing-page .price-card:has([data-price-best]:not([hidden])) {
    margin-top: 0;
  }

  .pricing-page .pricing-shared {
    display: block;
    margin-top: 1.35rem;
    padding: 1rem 1.05rem 1.1rem;
    border: 1px solid rgba(247, 243, 234, 0.1);
    border-radius: 0.9rem;
    background: rgba(247, 243, 234, 0.02);
  }

  .pricing-page .pricing-shared-title {
    margin: 0 0 0.7rem;
    color: #8a857a;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .pricing-page .price-perks-shared {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
  }

  .pricing-page .pricing-shared-note {
    margin: 0.85rem 0 0;
    color: #8a857a;
    font-size: 0.75rem;
    line-height: 1.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-page .price-card,
  .pricing-page .price-card:hover {
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-02 (trečias etapas)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Egzamino ataskaita lieka toje pačioje darbo srityje ──────────────────
   `theory.js` nebeišjungia fokusinio režimo paspaudus „Baigti", todėl čia
   rezultato blokui reikia to paties pilno ekrano elgesio, kokį turėjo
   klausimų vaizdas. Kitaip ataskaita kabotų viršuje, o po ja liktų tuščia. */
@media (max-width: 56rem) {
  html.has-active-exam #exam-result {
    min-height: 100dvh;
    padding: 0.5rem 0 calc(2rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── „Ką gauni po egzamino" — matosi, kad tai atidaroma ───────────────────
   Anksčiau tai buvo tiesiog rėmelis su antrašte: nei rodyklės, nei pelės
   žymeklio, nei jokio ženklo, kad viduje kažkas yra. Dabar turi sulankstymo
   ženklą, kuris pasisuka atidarius, ir aiškias hover/focus būsenas. */
.split-aside {
  border: 1px solid rgba(247, 243, 234, 0.11);
  border-radius: 0.9rem;
  background: rgba(247, 243, 234, 0.02);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.split-aside > summary {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

.split-aside > summary::-webkit-details-marker { display: none; }

.split-aside > summary h3 {
  margin: 0;
}

/* Ženklas: dvi linijos, kurių viena atidarius pranyksta – „+" virsta „−". */
.split-aside > summary::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: #8a857a;
  transition: transform 0.18s var(--ease), color 0.16s var(--ease);
}

.split-aside[open] > summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  transform: rotate(180deg);
}

.split-aside:hover {
  border-color: rgba(124, 155, 255, 0.3);
  background: rgba(247, 243, 234, 0.035);
}

.split-aside > summary:hover::after,
.split-aside[open] > summary::after {
  color: var(--link);
}

.split-aside > summary:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 0.9rem;
}

.split-aside > .check-list {
  margin: 0;
  padding: 0 1.1rem 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .split-aside,
  .split-aside > summary::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KET puslapio pertvarkymas
   
   Anksčiau viršuje stovėjo hero blokas su antrašte, kategorijos pasirinkimu ir
   mygtukais „Pradėti egzaminą" / „Mokytis pagal temas" — visa tai TAME PAČIAME
   puslapyje kartojosi žemiau, egzamino paleidimo bloke. Dabar viršuje yra tik
   režimų juosta, iš karto po jos — pats egzamino paleidimas, o mokymosi pažanga
   nukelta žemyn, prie statistikos, kur jai ir vieta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Režimų juosta: pasirinkimas centre ───────────────────────────────────── */
.theory-v2 .theory-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 clamp(1.1rem, 2.5vw, 1.6rem);
  padding-top: 0.25rem;
}

.theory-v2 .theory-bar > .segmented {
  grid-column: 2;
  justify-self: center;
}

.theory-v2 .theory-bar > .quiet-tabs {
  grid-column: 3;
  justify-self: end;
}

/* ── Pažangos blokas naujoje vietoje ──────────────────────────────────────
   Iš dviejų stulpelių liko vienas: teksto stulpelio nebėra, todėl senas
   `minmax(24rem, .95fr)` paliktų pusę bloko tuščią. Aukštis irgi nebeturi būti
   hero dydžio — tai jau ne pirmas ekranas, o statistikos įžanga. */
.theory-dashboard.is-progress {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  /* Apatinė paraštė būtina: `.theory-stats` savo viršutinės neturi, todėl
     pažangos blokas ir statistika liesdavosi be jokio tarpo. */
  margin: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1.15rem, 3vw, 2rem);
  align-items: stretch;
}

.theory-dashboard.is-progress .theory-road-stage {
  inset: 0;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%);
  mask-image: linear-gradient(180deg, transparent, #000 55%);
}

.theory-dashboard.is-progress::after {
  background: linear-gradient(180deg, rgba(18, 18, 17, 0.55), rgba(18, 18, 17, 0.12));
}

/* Kortelė ir metrikos vienoje eilėje, kai vietos pakanka. */
@media (min-width: 62rem) {
  .theory-dashboard.is-progress .theory-hero-side {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: center;
  }

  .theory-dashboard.is-progress .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Telefonas ───────────────────────────────────────────────────────────── */
@media (max-width: 47.99rem) {
  /* Juosta nebeslenka horizontaliai: trys režimai telpa per visą plotį, o
     „Išsaugoti" nusileidžia po jais į dešinę. */
  .theory-v2 .theory-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    margin-bottom: 1.1rem;
    padding: 0.25rem 0 0;
    overflow: visible;
  }

  .theory-v2 .theory-bar > .segmented {
    grid-column: auto;
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  /* Liko viena antrinė žyma, todėl jai nereikia viso mygtuko aukščio –
     kitaip po juosta lieka tuščia juosta per pusę ekrano pločio. */
  .theory-v2 .theory-bar > .quiet-tabs {
    grid-column: auto;
    justify-self: end;
    width: auto;
  }

  .theory-v2 .theory-bar .qtab {
    /* `.qtab` turi fiksuotą `height: 36px`, kurio `min-height` neatšaukia. */
    height: auto;
    min-height: 0;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
  }

  .theory-v2 .seg { min-width: 0; }

  .theory-dashboard.is-progress {
    margin: 1.5rem 0 1.25rem;
    padding: 1rem 0.875rem 1.125rem;
  }
}

/* ── KET juosta: permatomas fonas ir oras po kategorijomis ────────────────
   Juosta yra `position: sticky`, todėl jos fonas buvo beveik nepermatomas
   juodas stačiakampis — po „Išsaugoti" likdavo didelė juoda dėmė. Permatomas
   fonas su blur'u leidžia turiniui prasišviesti ir atrodo kaip sluoksnis, o ne
   kaip užklotas blokas. */
.theory-v2 .theory-bar {
  background: rgba(18, 18, 17, 0.62);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

@supports not (backdrop-filter: blur(2px)) {
  .theory-v2 .theory-bar { background: rgba(18, 18, 17, 0.9); }
}

/* „Išsaugoti" – tyli permatoma žyma, o ne tekstas ant juodo. */
.theory-v2 .theory-bar .qtab {
  border: 1px solid rgba(247, 243, 234, 0.09);
  border-radius: 999px;
  background: rgba(247, 243, 234, 0.045);
}

.theory-v2 .theory-bar .qtab:hover,
.theory-v2 .theory-bar .qtab.is-on {
  border-color: rgba(124, 155, 255, 0.32);
  background: rgba(124, 155, 255, 0.12);
}

/* Statistikos eilutė nebeprilipusi prie kategorijų juostos. */
.theory-v2 .stat-line {
  margin-top: 0.85rem;
}

.theory .lic-row {
  margin-bottom: 0;
  padding-bottom: 0.85rem;
}

/* ---------------------------------------------------------------------------
   Kalbos jungiklis (LT | EN)

   Dedamas antraštės dešinėje, prieš paskyros ženkliuką. Tai pasirinkimų grupė
   (role="group" + aria-pressed), o ne perjungiklis: abu variantai matomi
   vienu metu, todėl nereikia spėlioti, kas nutiks paspaudus.

   Aktyvi kalba žymima NE vien spalva: aktyvus mygtukas gauna foną, ryškesnį
   kontrastą ir `aria-current`, todėl skirtumas matomas ir vienspalviame
   ekrane, ir ekrano skaitytuvui.

   Telefone jungiklis LIEKA matomas — jis yra už meniu ribų, todėl kalbą
   galima pakeisti neatidarius navigacijos. */

.lang-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: rgba(247, 243, 234, 0.03);
}

.lang-opt {
  display: inline-flex;
  min-width: 34px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 0;
  border-radius: 32px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition: color 0.14s linear, background-color 0.14s linear;
}

.lang-opt:hover {
  color: var(--ink);
  background: rgba(247, 243, 234, 0.06);
}

.lang-opt:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.lang-opt.is-on {
  color: var(--ink);
  background: rgba(247, 243, 234, 0.12);
  box-shadow: inset 0 0 0 1px rgba(247, 243, 234, 0.16);
}

/* Skirtuko brūkšnio tarp LT ir EN NĖRA sąmoningai.
   Jis čia buvo, bet `position: absolute` be pozicionuoto tėvo nukeldavo jį ne
   į tarpą tarp mygtukų, o skersai aktyvaus mygtuko teksto. Dviejų variantų
   grupėje jis ir nereikalingas: aktyvų variantą jau rodo fonas, rėmelis ir
   `aria-pressed`. Mažiau dekoracijos — mažiau vietų suklysti. */

/* Egzamino juostos jungiklis pagal nutylėjimą paslėptas: jis reikalingas tik
   tada, kai fokuso režimas paslepia antraštę (žr. @media max-width: 56rem). */
.run-lang {
  display: none;
}

@media (max-width: 25rem) {
  /* Labai siaurame ekrane atsisakoma paskyros etiketės tarpo, o ne
     jungiklio: kalba yra vienintelis valdiklis, kurio negalima pasiekti
     kitur, jeigu visas tekstas nesuprantamas. */
  .lang-switch {
    height: 32px;
  }

  .lang-opt {
    min-width: 30px;
    padding: 0 7px;
    font-size: 11.5px;
  }
}

/* Kol EN žodynas dar neatsisiųstas, turinys nerodomas: kitaip lietuviškas
   tekstas mirktelėtų ir tik tada virstų anglišku. Numatytoji (lietuviška)
   versija šios žymos niekada negauna, todėl jai nieko nekainuoja.
   `i18n.js` žymą nuima ir tada, kai žodyno atsisiųsti nepavyko. */
html[data-i18n-pending] body {
  visibility: hidden;
}

/* Teisinių dokumentų kalbos paaiškinimas. Rodomas tik angliškoje versijoje —
   lietuviškoje jis būtų pastaba apie tai, ko nėra. */
.legal-lang-note {
  display: none;
}

html[lang="en"] .legal-lang-note {
  display: block;
  max-width: 64ch;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 0.5rem;
  background: rgba(247, 243, 234, 0.03);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-15 — vidiniai puslapiai arčiau viršaus, antraštė telpa telefone
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Pirmas turinio blokas iškart po puslapio antrašte ─────────────────
   `.landing > section + section` duoda iki 120 px `padding-top` — tai
   pradžios puslapio sekcijų ritmas. Kainose, reikalavimuose, pagalboje ir
   kontaktuose tas pats tarpas atsidurdavo tarp antraštės ir pirmo turinio
   bloko (kainose dar +28 px kortelių `margin-top`), todėl turinys nukrisdavo
   po tuščia juosta. Pirmas blokas dabar 24–40 px po antrašte, o tolesnės
   sekcijos turi ramesnį, bet vis dar erdvų ritmą: iki 80 px vietoj 120 px.
   Telefone tolesnių sekcijų tarpai lieka tokie patys (28 px). */
.landing:is(.pricing-page, .requirements-page, .support-page) > section + section {
  padding-top: clamp(1.75rem, 5.5vw, 5rem);
}

.landing:is(.pricing-page, .requirements-page, .support-page, .legal) > .page-head + section {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.landing.pricing-page > .page-head + .pricing-cards {
  margin-top: 0;
}

/* Desktope rekomenduojama kortelė pakelta 0.75rem, o jos juostelė dar kyšo
   virš krašto, todėl čia tarpas didesnis – kitaip juostelė beveik liestų tekstą. */
@media (min-width: 62rem) {
  .landing.pricing-page > .page-head + .pricing-cards {
    padding-top: clamp(3rem, 4vw, 3.5rem);
  }
}

/* Atsisiuntimo „Diegimo instrukcija" ir „Sistemos reikalavimai" priklauso
   hero blokui, todėl nebeatskiriami visu sekcijos tarpu. */
.landing.download-page > .hero + .dl-secondary {
  padding-top: clamp(0.5rem, 1.5vw, 1.25rem);
}

/* ── B. Telefono antraštė vienoje eilutėje visuose puslapiuose ────────────
   Iki šiol `flex-wrap: nowrap` turėjo tik penki puslapiai su `body.page-*`.
   Kituose (KET testai, paskyra, kontaktai, teisiniai) 360–390 px ekrane
   antraštė lūždavo į dvi eilutes (70 px, 320 px ekrane – 122 px), o
   `page-*` puslapiuose „Simuliatorius" mygtukas susispausdavo ir tekstas
   išlįsdavo už jo krašto. Dabar taisyklės vienodos visiems puslapiams, o
   siaurame ekrane mažėja tik tarpai ir paraštės – tekstas nekarpomas. */
@media (max-width: 63.99rem) {
  .site-header.is-sticky,
  .header-actions {
    flex-wrap: nowrap;
  }

  .header-cta {
    flex: none;
  }
}

@media (max-width: 47.99rem) {
  .header-acct,
  .header-cta,
  .nav-toggle {
    min-height: 2.75rem;
  }

  /* Meniu mygtukas visur optiškai lygiuojamas su paraštės kraštu (kaip etalone). */
  .nav-toggle {
    margin-right: -10px;
  }
}

@media (max-width: 25rem) {
  .site-header.is-sticky { column-gap: 8px; }
  .header-actions { gap: 6px; }

  .header-cta {
    padding-inline: 11px;
    font-size: 13px;
  }

  .lang-opt {
    min-width: 28px;
    padding: 0 6px;
  }
}

/* 360 px (dažniausias Android plotis) – dar kompaktiškiau, bet visi valdikliai lieka. */
@media (max-width: 23.4rem) {
  .site-header.is-sticky { column-gap: 6px; }
  .header-actions { gap: 4px; }
  .brand { font-size: 23px; }

  .header-acct {
    height: 40px;
    min-height: 40px;
    padding-inline: 6px;
  }

  .header-cta {
    padding-inline: 9px;
    font-size: 12.5px;
  }

  .lang-opt { min-width: 26px; }
}

/* Dar siauresniame ekrane „Simuliatorius" lieka tik meniu – ten jis yra visada. */
@media (max-width: 21.2rem) {
  .header-cta { display: none; }
}