/* ── FATHOM-INSPIRED DESIGN TOKENS ─── */
:root {
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: 'Courier New', ui-monospace, monospace;

  --font-weight:       400;
  --font-weight-light: 300;
  --font-weight-h:     600;
  --font-weight-bold:  700;

  --time: 0.18s;

  --leading-xs: 1.1;
  --leading-sm: 1.45;
  --leading:    1.65;

  --font-size-xxs: 0.75rem;
  --font-size-xs:  0.8rem;
  --font-size-sm:  0.875rem;
  --font-size-alt: 0.925rem;
  --font-size:     1.05rem;
  --font-size-lg:  1.125rem;
  --font-size-h4:  1.375rem;
  --font-size-h3:  1.875rem;
  --font-size-h2:  2.125rem;
  --font-size-h1:  3rem;

  --space-xs:   0.025rem;
  --space-sm:   0.25rem;
  --space:      0.5rem;
  --space-md:   0.675rem;
  --space-lg:   1rem;
  --space-xl:   1.5rem;
  --space-2x:   3rem;
  --space-3x:   4rem;
  --space-4x:   6rem;
  --space-5x:  10rem;

  --border-sm: 1px;
  --border:    1px;
  --border-md: 2px;
  --border-lg: 4px;

  --border-rad-sm:   0.5rem;
  --border-rad:      0.875rem;
  --border-rad-full: 100rem;

  --rapper:    68rem;
  --rapper-sm: 32rem;
  --rapper-md: 48rem;

  /* NEUTRALS — clean slate, no hue tint */
  --gray-0:  #FFFFFF;
  --gray-1:  #F6F7FB;
  --gray-2:  #F0F1F8;
  --gray-3:  #ECECF2;
  --gray-4:  #D8D9E3;
  --gray-5:  #9CA3AF;
  --gray-6:  #6B7280;
  --gray-7:  #4B5563;
  --gray-8:  #374151;
  --gray-9:  #1F2937;
  --gray-10: #111827;
  --gray-11: #1B1B2F;

  /* PRIMARY — vivid indigo-violet #5C3DF7 */
  --purple-2:    #EEF0FD;
  --purple-3:    #DFE1FB;
  --purple-4:    #B8B3FC;
  --purple-5:    #9B93FB;
  --purple:      #7B6AF5;
  --purple-7:    #5C3DF7;
  --purple-8:    #4B2EE8;
  --purple-9:    #3A20C7;
  --purple-10:   #2D18A0;
  --purple-fade: rgba(92, 61, 247, 0.10);

  /* ACCENT — soft mint, used sparingly */
  --green:       #7FDCA4;
  --green-fade:  rgba(127, 220, 164, 0.18);

  --drop: drop-shadow(0 1px 4px rgba(27, 27, 47, 0.08));
}

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  list-style: none; text-decoration: none;
  font-style: normal;
}

html {
  font-family: var(--font-sans);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--leading);
  color: var(--gray-11);
  background: var(--gray-0);
  scroll-behavior: smooth;
  scroll-padding-top: 62px;
  -webkit-font-smoothing: antialiased;
}

/* ── TYPOGRAPHY ──────────────────────────────────── */
h1, .h1 { font-size: var(--font-size-h1); letter-spacing: -0.04rem; }
h2, .h2 { font-size: var(--font-size-h2); letter-spacing: -0.03rem; }
h3, .h3 { font-size: var(--font-size-h3); letter-spacing: -0.025rem; }
h4, .h4 { font-size: var(--font-size-h4); letter-spacing: -0.018rem; }

h1, h2, h3, h4 {
  font-weight: var(--font-weight-h);
  line-height: var(--leading-xs);
  color: var(--gray-11);
}

p { line-height: var(--leading); color: var(--gray-7); }

/* ── RAPPER (fathom container) ──────────────────── */
.rapper {
  margin: auto; display: block;
  width: 100%; max-width: var(--rapper);
  padding: 0 var(--space-xl);
}
.rapper.sm { max-width: var(--rapper-sm); }
.rapper.md { max-width: var(--rapper-md); }

/* ── BUTTON BASE (tiksliai iš fathom.css) ─────── */
.button {
  display: inline-block;
  padding: var(--space) var(--space-lg);
  border-radius: var(--border-rad-sm);
  border: var(--border) solid transparent;
  background: var(--purple-7);
  color: var(--gray-1);
  font-family: var(--font-sans);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--leading-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--time), color var(--time), border-color var(--time);
  text-decoration: none !important;
}
.button:hover {
  background: var(--purple-8);
  color: var(--gray-0);
}
.button.lg { font-size: var(--font-size-lg); }
.button.sm { font-size: var(--font-size-sm); padding: var(--space-sm) var(--space-md); }

/* .button.warn – secondary gray */
.button.warn {
  background: var(--gray-2);
  color: var(--gray-7);
  border: var(--border) solid transparent;
}
.button.warn:hover { background: var(--gray-3); color: var(--gray-11); }

/* .button.outline */
.button.outline {
  background: transparent;
  border: var(--border-sm) solid var(--gray-4);
  color: var(--gray-8);
}
.button.outline:hover { border-color: var(--gray-6); color: var(--gray-11); }

/* .button.alt – dark */
.button.alt {
  background: var(--gray-9);
  color: var(--gray-1);
}
.button.alt:hover { background: var(--gray-8); color: var(--gray-0); }

/* ── BADGE-BUTTON (pill eyebrow tags) ─────────── */
.badge-button {
  display: inline-block;
  border-radius: var(--border-rad-full);
  padding: var(--space-sm) var(--space-lg);
  background: var(--gray-2);
  color: var(--gray-10);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  text-decoration: none !important;
  transition: background var(--time), color var(--time);
  margin-bottom: var(--space-sm);
}
.badge-button.alt {
  background: var(--purple-2);
  color: var(--purple-7);
}

/* ── ELEMENT (input / textarea base) ──────────── */
.element {
  display: block; width: 100%;
  padding: var(--space) var(--space-lg);
  border-radius: var(--border-rad-sm);
  border: var(--border) solid var(--gray-6);
  background: var(--gray-0);
  font-family: var(--font-sans);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--gray-11);
  line-height: var(--leading-sm);
  transition: border var(--time), box-shadow var(--time);
  outline: none;
  -webkit-appearance: none;
}
.element::placeholder { color: var(--gray-5); opacity: 0.8; }
.element:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-fade);
}

/* ── NAV (.morph-nav style) ───────────────────── */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--gray-0);
  border-bottom: var(--border-sm) solid var(--gray-3);
}
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 62px;
}
.header-logo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--gray-11);
  letter-spacing: -0.025rem;
}
.header-logo span { color: var(--purple-7); }
/* ⚠ DO NOT make .header-logo a flex container. Its content is a text node
   ("Teiso") followed by a <span> ("ra"): flex turns each into its own item and
   `gap` then opens a space INSIDE the word — it rendered as "Teiso ra". If a
   mark is ever placed beside the word, wrap the word in its own element first,
   and remember that `.header-logo span` colours any span it finds. */

.morph-nav { display: inline-flex; align-items: center; }
.morph-nav-items {
  display: flex; align-items: center; gap: var(--space-xl);
}
.morph-nav-link {
  font-size: var(--font-size-alt);
  color: var(--gray-7);
  font-weight: var(--font-weight);
  padding: var(--space) 0;
  display: inline-flex; align-items: center;
  line-height: var(--leading-sm);
  white-space: nowrap;
  transition: color var(--time);
}
.morph-nav-link:hover { color: var(--gray-11); }
/* The section being read. Colour alone would leave the state invisible to
   anyone who does not separate these two greys, so it carries a rule as well. */
.morph-nav-link.is-active {
  color: var(--purple-7);
  font-weight: var(--font-weight-h);
  box-shadow: inset 0 -2px 0 var(--purple-7);
}

.header-right { display: flex; align-items: center; gap: var(--space); }
.sign-in {
  font-size: var(--font-size-sm);
  color: var(--gray-7);
  padding: var(--space-sm) var(--space);
  border-radius: var(--border-rad-sm);
  transition: color var(--time);
}
.sign-in:hover { color: var(--gray-11); }
/* Sign-out has to be a <button> because it posts, so strip the native chrome:
   it should read as the quiet link it sits next to, not as a second CTA. */
.sign-out {
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

/* ── SECTIONS ─────────────────────────────────── */
/* Sections pad symmetrically, so the space BETWEEN two of them is twice this
   value: at --space-4x (6rem) that was 12rem — 192px of blank page, which read
   as a fault rather than as breathing room. At --space-2x the gap is 6rem,
   which also matches .features-head's own margin-bottom, so the rhythm inside
   a section and the rhythm between sections are the same measure.
   The token is deliberately not changed: --space-4x still sets grid gaps and
   page paddings elsewhere that are meant to be that large. */
section { padding: var(--space-2x) 0; }
section.alt { background: var(--gray-1); border-top: var(--border-sm) solid var(--gray-3); border-bottom: var(--border-sm) solid var(--gray-3); }

/* ── HERO ─────────────────────────────────────── */
#produktas {
  padding-top: calc(62px + var(--space-3x));
  padding-bottom: var(--space-3x);
  background: var(--gray-0);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4x);
  align-items: center;
}

/* Left column */
.hero-left h1 {
  font-size: clamp(2rem, 4vw, var(--font-size-h1));
  margin-bottom: var(--space-xl);
  line-height: 1.05;
}
.hero-news {
  display: inline-flex; align-items: center; gap: var(--space);
  margin-bottom: var(--space-xl);
  font-size: var(--font-size-sm);
  color: var(--gray-7);
}
.hero-news .new-tag {
  background: var(--purple-2); color: var(--purple-8);
  font-size: var(--font-size-xxs); font-weight: var(--font-weight-bold);
  padding: 0.1rem 0.5rem; border-radius: var(--border-rad-full);
  text-transform: uppercase; letter-spacing: 0.05em;
  flex-shrink: 0;
}
.hero-left p {
  font-size: var(--font-size);
  color: var(--gray-6);
  line-height: var(--leading);
  margin-bottom: var(--space-xl);
  max-width: 32rem;
}
.hero-btns {
  display: flex; gap: var(--space); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--space-lg);
}
.btn-demo {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-size: var(--font-size); font-weight: var(--font-weight);
  color: var(--gray-7);
  padding: var(--space) var(--space-lg);
  transition: color var(--time);
}
.btn-demo:hover { color: var(--gray-11); }
.trust-signals {
  display: flex; gap: var(--space-xl); flex-wrap: wrap;
}
.trust-signals span {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--font-size-xs); color: var(--gray-6);
}
.trust-signals span::before {
  content: '';
  display: inline-block; width: 0.9rem; height: 0.9rem;
  border: 1.5px solid var(--gray-4); border-radius: var(--border-rad-full);
  flex-shrink: 0;
}

/* Right column */
.hero-right {
  display: flex; flex-direction: column; gap: var(--space-lg);
}
.hero-mockup {
  background: var(--gray-1);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(27, 27, 47, 0.06), 0 1px 4px rgba(27, 27, 47, 0.04);
}
.mockup-bar {
  background: var(--gray-0);
  border-bottom: var(--border-sm) solid var(--gray-3);
  padding: var(--space-md) var(--space-lg);
  display: flex; align-items: center; gap: var(--space);
}
.mockup-dot {
  width: 0.55rem; height: 0.55rem;
  border-radius: var(--border-rad-full);
  background: var(--gray-3);
}
.mockup-title {
  font-size: var(--font-size-xs); color: var(--gray-5);
  flex: 1; text-align: center;
}
.mockup-body {
  padding: var(--space-xl);
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-5); font-size: var(--font-size-xs); text-align: center;
}
.mockup-table { width: 100%; }
.mockup-table th {
  font-size: var(--font-size-xxs); font-weight: var(--font-weight-bold);
  color: var(--gray-5); text-transform: uppercase; letter-spacing: 0.06em;
  padding: var(--space-sm) var(--space-lg) var(--space-sm) 0;
  text-align: left; border-bottom: var(--border-sm) solid var(--gray-3);
}
.mockup-table td {
  font-size: var(--font-size-sm); color: var(--gray-8);
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  border-bottom: var(--border-sm) solid var(--gray-2);
}
.mockup-table td:not(:first-child) { color: var(--gray-6); }
.mockup-table tr:last-child td { border-bottom: none; }
.td-url { color: var(--purple-7) !important; font-weight: var(--font-weight-h); }

/* Testimonial */
.hero-quote {
  background: var(--gray-1);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  padding: var(--space-xl);
}
.hero-quote blockquote {
  font-size: var(--font-size-sm); color: var(--gray-7);
  line-height: var(--leading); margin-bottom: var(--space-lg);
}
.hero-quote blockquote::before { content: '\201C'; color: var(--purple-5); font-size: 1.5em; line-height: 0; vertical-align: -0.3em; margin-right: 0.1em; }
.quote-author { display: flex; align-items: center; gap: var(--space-lg); }
.quote-av {
  width: 2rem; height: 2rem; border-radius: var(--border-rad-full);
  background: var(--gray-3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}
.quote-name { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--gray-9); }
.quote-org  { font-size: var(--font-size-xxs); color: var(--gray-6); }

/* Closing emphasis line */
.hero-emphasis { color: var(--gray-9); font-weight: var(--font-weight-h); }

/* ── MCP DATA-SOURCES DIAGRAM (hero right) ─────────
   Inline SVG so it inherits the design-system tokens below. Sources map to
   neutrals, the teisora.lt hub to the brand purple. Claude's output box keeps
   a terracotta accent (the project has no such token) via locally-scoped vars,
   so it reads as a distinct endpoint. Dark mode handled here since the site is
   otherwise light-only. */
.sources-diagram {
  max-width: 21.5rem;
  margin: 0 auto;
  /* Claude endpoint accent — no project token exists for terracotta. */
  --claude:       #D85A30;
  --claude-bg:    #FAECE7;
  --claude-title: #4A1B0C;
  --claude-sub:   #993C1D;
}
.sources-diagram svg { display: block; width: 100%; height: auto; }
/* Text inherits the group's box stroke otherwise, outlining every glyph and
   washing it out — paint fills only. */
.sources-diagram text { stroke: none; }
.sources-diagram .th { font: var(--font-weight-h) 14px var(--font-sans); }
.sources-diagram .ts { font: var(--font-weight) 12px var(--font-sans); }
/* stroke-width set in CSS (overrides the SVG's 0.5 attr) so borders read on
   white; --gray-5 ≈ the reference taupe, giving each box a visible edge. */
.sources-diagram .src     { fill: var(--gray-2); stroke: var(--gray-5); stroke-width: 1; }
.sources-diagram .src .th { fill: var(--gray-9); }
.sources-diagram .src .ts { fill: var(--gray-7); }
.sources-diagram .hub     { fill: var(--purple-2); stroke: var(--purple-7); stroke-width: 1.25; }
.sources-diagram .hub .th { fill: var(--purple-9); }
.sources-diagram .hub .ts { fill: var(--purple-8); }
.sources-diagram .out       { fill: var(--claude-bg); stroke: var(--claude); stroke-width: 1.25; }
.sources-diagram .out-title { fill: var(--claude-title); }
.sources-diagram .out-sub   { fill: var(--claude-sub); }
.sources-diagram .label { fill: var(--gray-7); }
.sources-diagram .frame { fill: none; stroke: var(--gray-4); stroke-width: 1; stroke-dasharray: 5 5; }
.sources-diagram .arr   { stroke: var(--gray-6); stroke-width: 1.75; fill: none; }
.sources-diagram .claude-logo { fill: var(--claude); }

@media (prefers-color-scheme: dark) {
  .sources-diagram {
    --claude:       #F0997B;
    --claude-bg:    #712B13;
    --claude-title: #FAECE7;
    --claude-sub:   #F5C4B3;
  }
  .sources-diagram .src     { fill: var(--gray-8); stroke: var(--gray-6); }
  .sources-diagram .src .th { fill: var(--gray-1); }
  .sources-diagram .src .ts { fill: var(--gray-4); }
  .sources-diagram .hub     { fill: var(--purple-10); stroke: var(--purple-4); }
  .sources-diagram .hub .th { fill: var(--purple-2); }
  .sources-diagram .hub .ts { fill: var(--purple-4); }
  .sources-diagram .label { fill: var(--gray-5); }
  .sources-diagram .frame { stroke: var(--gray-7); }
  .sources-diagram .arr   { stroke: var(--gray-5); }
}

/* ── STATS ────────────────────────────────────── */
/* ── KĄ GALIMA PAKLAUSTI: prompt examples ──────────────────────────────────
   ONE card, one numbered row per prompt — not nine standalone cards flowed
   into three columns. Nine cards in the same shape the rest of the page uses
   for features read as nine claims to weigh; a numbered list reads as a menu
   to pick from, which is what a reader who does not yet know what they are
   allowed to ask actually needs. It also ends the column layout's worst
   habit: prompts run from eight words to sixty, so the columns ended at
   ragged, unequal heights however the cards were ordered.

   The ordinal is a CSS counter rather than markup, so adding or removing a
   prompt cannot leave a stale number behind.

   The right-hand column names the corpus group, repeated on every row rather
   than printed only where the group changes: a column left blank on six rows
   out of nine reads as a rendering fault, not as grouping. */
.prompts {
  counter-reset: prompt;
  background: var(--gray-0);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  overflow: hidden;
}
.prompt {
  counter-increment: prompt;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0 var(--space-lg);
  align-items: baseline;
  padding: var(--space-lg) var(--space-xl);
}
/* Hairline BETWEEN rows only; a rule on every row would double against the
   card's own edge. */
.prompt + .prompt { border-top: var(--border-sm) solid var(--gray-3); }
/* Generated content is a grid item like any other, so the ordinal needs no
   span in the markup. Tabular figures keep 01 and 09 exactly as wide. */
.prompt::before {
  content: counter(prompt, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--gray-5);
}
.prompt__text { color: var(--gray-9); line-height: var(--leading); }
/* The salutation carries the accent so the eye lands on it first and reads
   every row as something typed, not as a feature bullet. */
.prompt__to { color: var(--purple-7); font-weight: var(--font-weight-h); }
/* Narrow screens have no room for a third column, so the group label drops
   under its prompt instead of squeezing the text to nothing. */
.prompt__tag {
  grid-column: 2;
  margin-top: var(--space-sm);
  font-size: var(--font-size-xxs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-5);
}
@media (min-width: 56rem) {
  .prompt { grid-template-columns: 2rem minmax(0, 1fr) 10rem; }
  .prompt__tag { grid-column: 3; margin-top: 0; text-align: right; }
}

.stats-band {
  background: var(--gray-1);
  border-top: var(--border-sm) solid var(--gray-3);
  border-bottom: var(--border-sm) solid var(--gray-3);
  padding: var(--space-xl) 0;
}
/* The band used to hold three statistics; it now holds one sentence, so it is
   centred and held to a readable measure rather than run to the full width. */
.daily {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  font-size: var(--font-size-lg);
  line-height: var(--leading);
  color: var(--gray-7);
  text-wrap: balance;
}
/* ── EMPHASIS INSIDE BODY COPY ─────────────────────────────────────────────
   Two tiers, deliberately only two, because a page with four kinds of
   highlight has none. Both reuse the accent already established by the
   ingest band below, so the whole page emphasises in one language.

   .hl   — the phrase a skimmer should catch. Colour + weight, no box.
   .hl-mark — ONE phrase per block, the single most valuable thing in it.
   A background is the loudest signal available in running text, so it is
   spent once; a second one on the same screen cancels the first.

   box-decoration-break: clone is not optional here — without it a marked
   phrase that wraps loses its padding and rounded end on the second line,
   which reads as a rendering bug rather than a highlight. */
.hl { color: var(--purple-7); font-weight: var(--font-weight-h); }
.hl-mark {
  background: var(--purple-2);
  color: var(--purple-8);
  font-weight: var(--font-weight-h);
  padding: 0.12em 0.35em;
  border-radius: var(--border-rad-sm);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The registers are the proof in this sentence. Accent + weight makes them
   findable without reading the line; nowrap keeps a register's name whole. */
.daily strong {
  color: var(--purple-7);
  font-weight: var(--font-weight-h);
  white-space: nowrap;
}
.daily-cta {
  margin-top: var(--space-lg);
  text-align: center;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h);
  color: var(--gray-11);
  letter-spacing: -0.025rem;
  line-height: var(--leading-xs);
}

/* ── HOW IT WORKS ─────────────────────────────── */
#kaip-veikia { background: var(--gray-0); }

/* ── KAIP TAI VEIKIA: source → what it gives you ───────────────────────────
   A definition list, not prose: the terms form a column the eye can run down
   to find one register, which is the only way this content gets read. The
   rule between rows does the separating, so the block needs no card borders
   and stays quiet next to the diagram above it. */
.hiw { margin: 0; }
.hiw-row {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-top: var(--border-sm) solid var(--gray-2);
}
.hiw-row:last-child { border-bottom: var(--border-sm) solid var(--gray-2); }
.hiw dt {
  color: var(--purple-7);
  font-weight: var(--font-weight-h);
  /* Long terms ("Seimo komitetų transkripcijos") must wrap inside the column
     rather than widen it, or the two columns stop lining up down the list. */
  overflow-wrap: anywhere;
}
.hiw dd { margin: 0; color: var(--gray-7); line-height: var(--leading); }
.hiw-more {
  margin-top: var(--space-lg);
  color: var(--gray-6);
  font-style: italic;
}
/* On a phone the term sits above its definition; a 14rem column there would
   leave the text in a gutter. */
@media (max-width: 720px) {
  .hiw-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}
/* Matches .features-head, and must not exceed the section's own 3rem padding:
   a heading that stands further from its content than the section stands from
   its neighbours reads as belonging to neither. */
.section-head { margin-bottom: var(--space-2x); }
.section-head h2 { margin-bottom: var(--space-lg); }
.section-head p { font-size: var(--font-size-lg); max-width: 34rem; }

/* Problem / Solution cards */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }

.card {
  padding: var(--space-2x);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  background: var(--gray-0);
}
.card.dark {
  background: var(--gray-11);
  border-color: var(--gray-10);
}
.card-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray-5);
  display: block;
  margin-bottom: var(--space-lg);
}
.card.dark .card-label { color: var(--purple-5); }
.card h3 { font-size: var(--font-size-h4); margin-bottom: var(--space-lg); }
.card h4 { margin-bottom: var(--space-lg); }
.card.dark h3 { color: var(--gray-1); }
.card p { font-size: var(--font-size-sm); line-height: var(--leading); color: var(--gray-6); }
/* Prominent, obviously-clickable in-card link (e.g. "Susisiekite →"). */
.card-link {
  display: inline-block;
  font-size: var(--font-size-lg); font-weight: var(--font-weight-h);
  color: var(--purple-7);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--time);
}
.card-link:hover { color: var(--purple-8); }
.card.dark p { color: var(--gray-5); }

/* Step cards */
.step-card {
  padding: var(--space-xl);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  background: var(--gray-1);
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  background: var(--purple-2); color: var(--purple-8);
  border-radius: var(--border-rad-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-lg);
}
.step-card h4 { margin-bottom: var(--space); font-size: var(--font-size-h4); }
.step-card p { font-size: var(--font-size-sm); color: var(--gray-6); }

/* ── PAVYZDYS (screenshot) ────────────────────── */
.example-media {
  max-width: 56rem;
  margin: 0 auto;
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(27, 27, 47, 0.08), 0 2px 8px rgba(27, 27, 47, 0.05);
}
.example-media img { display: block; width: 100%; height: auto; }

/* Sujungtų pavyzdžių sekcija: bendra antraštė + du .tsr blokai vienas po kito
   su nedideliu tarpu (buvo dvi atskiros sekcijos → ~12rem tarpas). */
#pavyzdziai { background: var(--gray-0); }
/* The scale that keeps the page legible, largest break to smallest:
     6rem  between two sections (2 × section padding)
     4rem  the "Daugiau pavyzdžių" subsection break inside one section
     3rem  between two stacked examples, which are members of a list
   A subsection break must stay SMALLER than a section gap or the hierarchy
   inverts — that is why both of these moved down when section padding did. */
.tsr-stack { display: flex; flex-direction: column; gap: var(--space-2x); }
/* .tsr is a <section>; cancel the global `section` padding so the gap between
   the two stacked examples is controlled solely by the stack. */
.tsr-stack > .tsr { padding: 0; }

/* ── PAVYZDYS: MCP atsakymo demo (.tsr) ─────────────
   Self-contained block from the design source; its --tsr-* theme vars are
   mapped onto the project tokens so accent/neutrals match the site (accent =
   brand purple, not the demo blue). danger/warn kept literal — no project
   token exists. */
.tsr {
  --tsr-bg:        var(--gray-1);
  --tsr-card:      var(--gray-0);
  --tsr-border:    var(--gray-3);
  --tsr-text:      var(--gray-11);
  --tsr-muted:     var(--gray-6);
  --tsr-faint:     var(--gray-5);
  --tsr-accent:    var(--purple-7);
  --tsr-accent-bg: var(--purple-2);
  --tsr-danger:    #B42318;
  --tsr-danger-bg: #FEF3F2;
  --tsr-warn:      #B54708;
  --tsr-warn-bg:   #FFFAEB;
  --tsr-info:      #175CD3;
  --tsr-info-bg:   #EFF6FF;
  --tsr-radius:    var(--border-rad);

  max-width: 880px;
  margin-inline: auto;
  color: var(--tsr-text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.tsr *, .tsr *::before, .tsr *::after { box-sizing: border-box; }
.tsr__head { text-align:center; margin-bottom:28px; }
.tsr__eyebrow { font-size:13px; letter-spacing:.04em; color:var(--tsr-muted); margin-bottom:8px; }
.tsr__title { margin:0 0 8px; font-size:28px; line-height:1.25; font-weight:600; }
.tsr__lead { margin:0 auto; max-width:520px; color:var(--tsr-muted); }
.tsr__panel { background:var(--tsr-bg); border-radius:var(--tsr-radius); padding:20px; }
.tsr__ask { display:flex; gap:12px; align-items:flex-start; margin-bottom:20px; }
.tsr__avatar {
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--tsr-accent-bg); color:var(--tsr-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
}
.tsr__bubble {
  background:var(--tsr-card); border:1px solid var(--tsr-border);
  border-radius:var(--tsr-radius); padding:12px 16px;
}
.tsr__source {
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--tsr-muted); margin-bottom:16px; padding-left:40px;
}
/* align-items:center parks the icon halfway down a source note that wraps to
   four lines, where it reads as a stray mark rather than a label. It belongs
   beside the first line. */
.tsr__source svg { flex:none; margin-top:2px; }
.tsr__answer { padding-left:40px; }
@media (max-width:640px){ .tsr__source, .tsr__answer { padding-left:0; } }
.tsr__answer > p:first-child { margin:0 0 16px; }
.tsr__tablewrap {
  background:var(--tsr-card); border:1px solid var(--tsr-border);
  border-radius:var(--tsr-radius); overflow:hidden;
}
.tsr__table { width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
.tsr__table thead th {
  text-align:left; font-weight:500; color:var(--tsr-muted);
  padding:10px 12px; background:var(--tsr-bg); border-bottom:1px solid var(--tsr-border);
}
.tsr__table td { padding:11px 12px; border-bottom:1px solid var(--tsr-border); vertical-align:top; }
.tsr__table tbody tr:last-child td { border-bottom:0; }
.tsr__table col.c1 { width:40%; }
.tsr__table col.c2 { width:23%; }
.tsr__table col.c3 { width:22%; }
.tsr__table col.c4 { width:15%; }
.tsr__sub { color:var(--tsr-faint); margin-top:3px; }
.tsr__date { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }
.tsr__tag {
  display:inline-block; padding:2px 8px; border-radius:6px;
  font-size:12px; white-space:nowrap;
  background:var(--tsr-bg); color:var(--tsr-muted);
}
.tsr__tag--danger { background:var(--tsr-danger-bg); color:var(--tsr-danger); }
.tsr__tag--warn   { background:var(--tsr-warn-bg);   color:var(--tsr-warn); }
.tsr__link {
  color:var(--tsr-accent); text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
  font-variant-numeric: tabular-nums;
}
.tsr__link:hover { text-decoration:underline; }
.tsr__link:focus-visible { outline:2px solid var(--tsr-accent); outline-offset:2px; border-radius:3px; }
.tsr__note {
  display:flex; gap:8px; align-items:flex-start;
  margin-top:16px; font-size:13px; color:var(--tsr-faint);
}
.tsr__note svg { flex:none; margin-top:3px; }
/* Mobilus: lentelė virsta kortelėmis */
@media (max-width:720px){
  .tsr__table, .tsr__table tbody, .tsr__table tr, .tsr__table td { display:block; width:100%; }
  .tsr__table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .tsr__table tr { padding:14px 12px; border-bottom:1px solid var(--tsr-border); }
  .tsr__table tbody tr:last-child { border-bottom:0; }
  .tsr__table td { padding:0; border:0; }
  .tsr__table td + td { margin-top:8px; }
  .tsr__table td[data-label]::before {
    content: attr(data-label);
    display:block; font-size:11px; text-transform:uppercase;
    letter-spacing:.05em; color:var(--tsr-faint); margin-bottom:2px;
  }
  .tsr__table td:first-child { font-weight:500; }
  .tsr__table td:first-child::before { content:none; }
}
/* Pavyzdys nr. 3 papildomi komponentai: santraukos kortelė, finansų lentelė, išvada */
.tsr__facts {
  background:var(--tsr-card); border:1px solid var(--tsr-border); border-radius:var(--tsr-radius);
  padding:20px 22px; margin:0 0 20px;
  display:grid; grid-template-columns:180px 1fr; gap:14px 24px;
}
.tsr__facts dt { color:var(--tsr-muted); font-size:14px; }
.tsr__facts dd { margin:0; font-size:14px; }
.tsr__facts .is-final { color:var(--tsr-danger); font-weight:600; }
@media (max-width:640px){
  .tsr__facts { grid-template-columns:1fr; gap:4px 0; padding:16px; }
  .tsr__facts dt { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--tsr-faint); margin-top:12px; }
  .tsr__facts dt:first-child { margin-top:0; }
}
.tsr__blocktitle { margin:28px 0 12px; font-size:18px; font-weight:600; }
/* auto layout overrides the base .tsr__table fixed layout for content-sized columns */
.tsr__fin { table-layout:auto; font-variant-numeric: tabular-nums; }
.tsr__fin th.num, .tsr__fin td.num { text-align:right; white-space:nowrap; }
.tsr__fin td.base { color:var(--tsr-muted); white-space:nowrap; }
.tsr__fin tr.is-flag td { background:var(--tsr-danger-bg); color:var(--tsr-danger); }
.tsr__fin tr.is-cut  td { background:var(--tsr-info-bg);   color:var(--tsr-info); }
.tsr__fin tr.is-flag td.base, .tsr__fin tr.is-cut td.base { color:inherit; }
.tsr__fin tr.is-total td { background:var(--tsr-bg); font-weight:600; }
.tsr__fin .peak { font-weight:700; }
/* ── Kaip prijungti prie Claude ───────────────────────────────────────────
   Step text on the left, a drawing of the relevant Claude screen on the right.
   The drawings are ours, not screenshots: another product's UI goes stale on
   their release schedule, and a photo of a whole window makes the reader hunt
   for the part that matters. */
/* The client switch sits above both arms; centred because the steps below it
   are a two-column layout with no obvious left edge to align to. */
.howto-switch { display: inline-flex; margin: 0 0 var(--space-lg); }
.howto-wrap { text-align: center; }
.howto-wrap .howto, .howto-wrap .howto-foot { text-align: left; }
/* The ChatGPT arm has no drawings, so its steps are one column: the two-column
   grid would leave every step with an empty half. */
.howto-step--plain { grid-template-columns: minmax(0, 1fr); }
.howto { display: flex; flex-direction: column; gap: var(--space-xl); margin-top: var(--space-xl); }
.howto-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-xl);
  align-items: center;
  padding-top: var(--space-xl);
  border-top: var(--border-sm) solid var(--gray-2);
}
.howto-step:first-child { padding-top: 0; border-top: 0; }
.howto-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; margin-bottom: var(--space-md);
  border-radius: var(--border-rad-full);
  background: var(--purple-2); color: var(--purple-7);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-h);
}
.howto-body h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-sm); }
.howto-body p { font-size: var(--font-size-sm); color: var(--gray-7); margin-bottom: var(--space); }
.howto-body p:last-child { margin-bottom: 0; }
.howto-foot {
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  border-top: var(--border-sm) solid var(--gray-2);
  font-size: var(--font-size-sm); color: var(--gray-6);
}
/* On a phone the drawing goes under its step rather than beside it. */
@media (max-width: 720px) {
  /* minmax(0, …), not 1fr: a bare 1fr keeps an `auto` minimum, so one long
     unbreakable value inside the drawing widens the track past the card and
     takes the whole page sideways with it. */
  .howto-step { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

/* ── Connection walkthrough: the AI-app switch on the logged-in /kaip-prisijungti.
   The public /mcp page keeps the smaller .howto-switch; this is the bigger
   two-tab control that leads the page, since choosing the app is the first
   decision. It is a toggle-button group (role=group + aria-pressed), styled to
   read as tabs. ── */
.conn-card { padding: var(--space-xl); }
.conn-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);
  background: var(--gray-2); border-radius: var(--border-rad);
  padding: var(--space-sm); margin-bottom: var(--space-xl);
}
.conn-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space);
  padding: calc(var(--space-md) + 0.2rem) var(--space-lg);
  border: 0; border-radius: var(--border-rad-sm); background: transparent;
  font-family: var(--font-sans); font-size: var(--font-size-lg);
  font-weight: var(--font-weight-h); color: var(--gray-6); cursor: pointer;
  transition: color var(--time), background var(--time), box-shadow var(--time);
}
.conn-tab:hover { color: var(--gray-10); }
.conn-tab.active {
  background: var(--gray-0); color: var(--gray-10);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.10), 0 1px 3px rgba(17, 24, 39, 0.06);
}
.conn-tab:focus-visible { outline: var(--border-md) solid var(--purple-7); outline-offset: 2px; }
.conn-mark {
  width: 1.5rem; height: 1.5rem; border-radius: var(--border-rad-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  color: #fff; flex: 0 0 auto;
}
.conn-mark.claude { background: #D97757; }
.conn-mark.chatgpt { background: #10A37F; }
/* The "enter the URL" hint that sits between the deep-link button and the copy
   field in the Claude arm's first step. */
.conn-openhint {
  display: block; margin: var(--space-lg) 0 var(--space);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-h); color: var(--gray-8);
}
@media (max-width: 720px) {
  .conn-tab { padding: var(--space-md) var(--space); font-size: var(--font-size-alt); }
}

/* ── API key, demoted to a collapsed block at the very bottom of the page — it
   is no longer needed to connect either AI app. It opens itself when a secret
   was just minted (the templ sets [open] when d.NewSecret != nil). ── */
.keys-extra {
  margin-top: var(--space-xl);
  background: var(--gray-1); border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad); padding: var(--space-lg) var(--space-xl);
}
.keys-extra > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  gap: var(--space); font-weight: var(--font-weight-h); color: var(--gray-8);
  font-size: var(--font-size-alt);
}
.keys-extra > summary::-webkit-details-marker { display: none; }
.keys-extra > summary::after {
  content: "▾"; margin-left: auto; color: var(--gray-5); transition: transform var(--time);
}
.keys-extra[open] > summary::after { transform: rotate(180deg); }
.keys-hint { font-weight: var(--font-weight); color: var(--gray-6); font-size: var(--font-size-sm); }
.keys-body { margin-top: var(--space-lg); }
.keys-body > .connect-steps { margin-top: var(--space-lg); }

/* The drawings. Flat and small on purpose: diagrams of where to click, traced
   from real screenshots of Claude's settings so the labels and controls match
   what the customer is looking at. */
.ui-window, .ui-dialog {
  background: var(--gray-0);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad-sm);
  box-shadow: 0 4px 16px rgba(27, 27, 47, 0.06);
  font-size: var(--font-size-xxs);
  overflow: hidden;
}
.ui-window { display: flex; }
.ui-window.mt { margin-top: var(--space-md); }
.ui-dialog { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); }
.ui-dialog.center { align-items: center; text-align: center; gap: var(--space); padding: var(--space-xl) var(--space-md); }

.ui-side {
  flex: none; width: 40%; padding: var(--space) var(--space-sm);
  background: var(--gray-1); border-right: var(--border-sm) solid var(--gray-2);
  display: flex; flex-direction: column; gap: 1px;
}
.ui-group {
  padding: var(--space-sm) var(--space-sm) 2px;
  color: var(--gray-5); font-size: 0.9em;
}
.ui-row { padding: 4px var(--space-sm); border-radius: var(--border-rad-sm); color: var(--gray-7); }
.ui-row.is-on { background: var(--gray-3); color: var(--gray-11); font-weight: var(--font-weight-h); }
.ui-main { flex: 1; min-width: 0; padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.ui-main.wide { width: 100%; }
.ui-title { font-weight: var(--font-weight-h); color: var(--gray-9); }
.ui-title.lg { font-size: 1.35em; }
.ui-line { height: 6px; border-radius: 3px; background: var(--gray-2); }
.ui-line.short { width: 55%; }
/* Wrapping, not scrolling: on a phone the sidebar leaves the panel about
   40px of room, and a title plus an Add button plus three tabs do not fit on
   one line. Let them stack rather than clip. */
.ui-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.ui-bar.end { justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-sm); }

/* Claude's own control is an "Add" button with a chevron, not a plus. */
.ui-addbtn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--space); border-radius: var(--border-rad-sm);
  border: var(--border-sm) solid var(--gray-3); color: var(--gray-9);
  white-space: nowrap;
}
.ui-addbtn i { font-style: normal; color: var(--gray-5); }
.ui-addbtn.is-on { border-color: var(--purple-7); color: var(--purple-7); }
.ui-tabs { display: flex; flex-wrap: wrap; gap: var(--space-sm); color: var(--gray-6); }
.ui-tabs i {
  font-style: normal; padding: 2px var(--space-sm); border-radius: var(--border-rad-sm);
}
.ui-tabs i.is-on { background: var(--gray-2); color: var(--gray-9); font-weight: var(--font-weight-h); }

.ui-menu {
  align-self: flex-end; min-width: 62%;
  padding: 3px; border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad-sm); background: var(--gray-0);
  box-shadow: 0 4px 12px rgba(27, 27, 47, 0.10);
  display: flex; flex-direction: column; gap: 1px;
}
.ui-menu-item { padding: 5px var(--space-sm); border-radius: var(--border-rad-sm); color: var(--gray-7); }
.ui-menu-item.is-on { background: var(--purple-2); color: var(--purple-7); font-weight: var(--font-weight-h); }

/* Dialog inputs carry no label of their own — the help sits underneath, the way
   Claude does it. */
.ui-input {
  padding: 7px var(--space-sm);
  border: var(--border-sm) solid var(--gray-3); border-radius: var(--border-rad-sm);
  color: var(--gray-9); overflow-wrap: anywhere;
}
.ui-input.is-focus { border-color: var(--purple-7); box-shadow: 0 0 0 2px var(--purple-2); }
.ui-input.ghost { color: var(--gray-5); }
.ui-help { color: var(--gray-5); padding: 0 2px; }
.ui-disclose { color: var(--gray-9); font-weight: var(--font-weight-h); margin-top: var(--space-sm); }
/* Radio option in the mocked connector dialog. The ring is drawn rather than
   using a real <input>: this whole block is aria-hidden decoration, so a focusable
   control here would put a dead stop in the keyboard path. */
/* Wraps because the hosted-metadata option carries a "Recommended" and a
   "Detected" marker. Without it that row is the widest thing in the mock and
   pushes the card sideways on a phone — the same overflow this walkthrough
   already hit once through a bare 1fr track. */
.ui-opt { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-sm); color: var(--gray-7); }
/* The real dialog is mostly description text: every radio carries one to three
   lines under it, and a drawing of bare one-line options does not read as the
   same screen. Indented past the radio dot (11px + gap) so it hangs under the
   label rather than under the circle. */
.ui-optdesc {
  margin: -2px 0 var(--space-sm) calc(11px + var(--space-sm));
  color: var(--gray-5);
}
/* "Recommended" is emphasis in Claude's UI, not a bordered pill like
   "Detected" — drawing both as pills lost the distinction the screen makes. */
.ui-rec { font-style: normal; font-weight: var(--font-weight-h); color: var(--gray-9); }
.ui-sub { color: var(--gray-5); }
.ui-hr { height: 1px; background: var(--gray-2); }
/* Two tab groups sit together on the left; auto margin after the second one
   pushes the search icon and Add to the right, as they are on the real panel. */
.ui-bar .ui-tabs + .ui-tabs { margin-right: auto; }
.ui-ico { color: var(--gray-6); }
.ui-cards { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.ui-card {
  flex: 1 1 28%; min-width: 0; display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-sm);
  padding: 4px var(--space-sm); color: var(--gray-9);
  border: var(--border-sm) solid var(--gray-3); border-radius: var(--border-rad-sm);
}
.ui-card i {
  font-style: normal; flex: none; color: var(--gray-6);
  border: var(--border-sm) solid var(--gray-3); border-radius: var(--border-rad-sm);
  padding: 1px 6px;
}
.ui-opt::before {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: 4px;
  border: var(--border-sm) solid var(--gray-4); border-radius: 50%;
}
.ui-opt.is-on { color: var(--gray-11); font-weight: var(--font-weight-h); }
.ui-opt.is-on::before { border-color: var(--purple-7); border-width: 3px; }
.ui-btn {
  padding: 5px var(--space); border-radius: var(--border-rad-sm);
  font-weight: var(--font-weight-h); white-space: nowrap;
}
.ui-btn.dark { background: var(--gray-11); color: var(--gray-0); }
.ui-btn.ghost { border: var(--border-sm) solid var(--gray-3); color: var(--gray-9); }
/* The ChatGPT sign-in card leads with a LIGHT primary button and a dark
   secondary — the reverse of Claude's, matching OpenAI's own consent screen. */
.ui-btn.light { border: var(--border-sm) solid var(--gray-4); background: var(--gray-0); color: var(--gray-10); }
.ui-bar.center { justify-content: center; margin-top: var(--space-sm); }
/* ChatGPT's risk acknowledgement — a real gating step, so it reads as a warning
   rather than helper text (Claude has no equivalent). */
.ui-warn {
  border-left: var(--border-md) solid #B42318; padding-left: var(--space);
  color: #B42318; font-size: 0.92em;
}

/* The connector's own page, before it is authorised. */
.ui-tile {
  width: 2.5rem; height: 2.5rem; border-radius: var(--border-rad-sm);
  border: var(--border-sm) solid var(--gray-3); background: var(--gray-1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4em; font-weight: var(--font-weight-h); color: var(--gray-9);
}
/* Two app icons side by side (the connector + ChatGPT) on the sign-in card. */
.ui-tiles { display: flex; align-items: center; gap: var(--space); }
.ui-tile.dark { background: var(--gray-11); border-color: var(--gray-11); color: var(--gray-0); }
.ui-url { color: var(--gray-6); font-family: var(--font-mono); overflow-wrap: anywhere; }
.ui-muted { color: var(--gray-7); }

/* The connectors table: Connector · Type · Status, with a Custom badge. */
.ui-tr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space); align-items: center;
  padding: var(--space-sm) 0; border-bottom: var(--border-sm) solid var(--gray-2);
}
.ui-tr:last-child { border-bottom: 0; }
.ui-tr.head { color: var(--gray-5); }
.ui-tr > span:first-child { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.ui-dot {
  flex: none; width: 1.1rem; height: 1.1rem; border-radius: var(--border-rad-sm);
  background: var(--purple-7); color: var(--gray-0);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: var(--font-weight-h); font-size: 0.85em;
}
.ui-badge {
  font-style: normal; padding: 1px 6px; border-radius: var(--border-rad-sm);
  border: var(--border-sm) solid var(--gray-3); color: var(--gray-6);
}
.ui-ok { color: var(--gray-9); }

/* ── Pavyzdžių tinklelis: klausimas kortelėje, atsakymas dialoge ──────────
   Six worked answers laid out in full would make the page endless, and a
   visitor scrolling past them learns less than one who opens the question that
   sounds like their own job. So the card carries the question and the answer
   lives one click away — in the same .tsr components as the two examples above,
   so nothing looks like a second design. */
/* The grid opens a second half of the section, under two worked examples that
   have no background of their own — so without this its heading sat flush
   against the example above it. --space-4x, not the --space-3x that separates
   the two examples: this is a new subsection, and it has to read as more of a
   break than the gap between two members of a list. */
/* Beware the cascade here: .features-head further down the file sets `margin`
   as a shorthand, which would silently reset this to 0 — that is exactly how
   the heading ended up flush against the example above it. */
.tsr.qgrid-head { margin-top: var(--space-3x); }
/* .tsr__head already leaves 28px under the lead, so the grid does not stack its
   own gap on top. */
.qgrid-head + .qgrid { margin-top: var(--space-lg); }
.qgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: 880px;
  margin: var(--space-2x) auto 0;
}
@media (max-width: 900px) { .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .qgrid { grid-template-columns: minmax(0, 1fr); } }

/* The whole card is the control, so the target is the card and not a link
   buried in it. */
.qcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  height: 100%;
  padding: var(--space-xl);
  text-align: left;
  background: var(--gray-0);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  cursor: pointer;
  transition: border-color var(--time), box-shadow var(--time), transform var(--time);
}
.qcard:hover {
  border-color: var(--purple-7);
  box-shadow: 0 8px 28px rgba(27, 27, 47, 0.08);
  transform: translateY(-2px);
}
.qcard:focus-visible { outline: var(--border-md) solid var(--purple-7); outline-offset: 2px; }
.qcard__tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.qcard__q {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-h);
  line-height: 1.3;
  color: var(--gray-11);
}
/* The task line is the argument, so it gets room; the card still ends level
   with its neighbours because the CTA is pushed down. */
.qcard__task { font-size: var(--font-size-sm); color: var(--gray-6); }
.qcard__cta {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-h);
  color: var(--purple-7);
}
.qcard__cta::after { content: " →"; }
.qgrid-note {
  max-width: 880px;
  margin: var(--space-xl) auto 0;
  font-size: var(--font-size-xs);
  color: var(--gray-5);
  text-align: center;
}

/* Three blocks the worked examples above did not need. They take their colours
   from the same --tsr-* theme, so they belong to the set rather than sit beside
   it. */
.tsr__verdict {
  background: var(--tsr-accent-bg);
  border-left: 2px solid var(--tsr-accent);
  border-radius: 0 var(--tsr-radius) var(--tsr-radius) 0;
  padding: 16px 18px;
  margin: 22px 0 0;
}
.tsr__caveat {
  background: var(--tsr-warn-bg);
  border-left: 2px solid var(--tsr-warn);
  border-radius: 0 var(--tsr-radius) var(--tsr-radius) 0;
  padding: 14px 18px;
  margin: 20px 0;
}
.tsr__verdict p, .tsr__caveat p { margin: 0; font-size: 14.5px; }
.tsr__verdict p { color: var(--gray-11); }
.tsr__caveat p { color: var(--tsr-warn); }
.tsr__verdict .h, .tsr__caveat .h {
  display: block;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: var(--font-weight-h);
  margin-bottom: 7px;
}
.tsr__verdict .h { color: var(--tsr-accent); }
.tsr__caveat .h { color: var(--tsr-warn); }
.tsr__why {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--tsr-border);
}
.tsr__why .k {
  flex: none; width: 104px; padding-top: 2px;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--tsr-faint);
}
.tsr__why p { margin: 0; font-size: 14.5px; color: var(--tsr-muted); }
@media (max-width: 640px) {
  .tsr__why { flex-direction: column; gap: 6px; }
  .tsr__why .k { width: auto; }
}
/* Prose inside an answer: the worked examples above are tables only, so lists
   and paragraph rhythm had no rules yet. */
.tsr__answer ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.tsr__answer li { margin-bottom: 8px; }
.tsr__answer > p { margin-bottom: 16px; }
.tsr__answer .tsr__sub { display: block; margin-top: 4px; font-size: 13px; }

.tsr__callout { margin-top:24px; background:var(--tsr-danger-bg); border-radius:var(--tsr-radius); padding:20px 22px; color:#7A1C14; }
.tsr__callout h3 { margin:0 0 12px; font-size:17px; font-weight:600; color:var(--tsr-danger); }
.tsr__callout p { margin:0 0 12px; font-size:14px; }
.tsr__callout p:last-child { margin-bottom:0; }
.tsr__callout strong { font-weight:600; }
@media (max-width:720px){
  .tsr__fin thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .tsr__fin td { display:block; padding:2px 12px; border:0; }
  .tsr__fin tr { display:block; padding:12px 0; border-bottom:1px solid var(--tsr-border); }
  .tsr__fin tbody tr:last-child { border-bottom:0; }
  .tsr__fin td.num { text-align:left; }
  .tsr__fin td.base { font-size:12px; }
}

/* ── PRICING ──────────────────────────────────── */
#kaina { background: var(--gray-1); }

/* Two pricing tiers side by side (credit plan + Pro). align-items: stretch so
   both cards take the row's full height; the cards are flex columns (below) so
   their CTAs still line up at the bottom whatever the list lengths. */
.pricing-grid {
  display: grid;
  /* minmax(0,1fr) lets the three tracks shrink below their content's min-width,
     so a nowrap toggle can't force the row wider than the container. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}

/* The trust/guarantee cards used to be the second grid column; with two plan
   tiers there, they drop to a full-width row of three beneath the tiers. */
.pricing-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2x);
}

.plan-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--gray-0);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  /* Trimmed horizontal padding vs the old two-up layout: three cards share the
     68rem container, so the interior has to give the toggle room to fit. */
  padding: var(--space-xl);
  text-align: center;
  box-shadow: 0 4px 24px rgba(27, 27, 47, 0.07), 0 1px 4px rgba(27, 27, 47, 0.04);
}
/* Featured tier (Pro): an accent ring so the fuller, unlimited offer reads as
   primary without a louder "most popular" claim we cannot substantiate. */
.plan-tier--featured {
  border-color: var(--purple-7);
  box-shadow: 0 0 0 1px var(--purple-7), 0 8px 32px rgba(92, 61, 247, 0.12);
}
.plan-name {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h);
  color: var(--gray-11);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
}
/* Billing-period switch: a segmented control sitting where the plan badge used
   to be. The track is the recessed surface, the selected option is the raised
   one — so the card reads the same at a glance as the old static badge did. */
.plan-toggle {
  display: flex;
  width: 100%;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-lg);
  background: var(--gray-2);
  border-radius: var(--border-rad-full);
}
.plan-toggle-opt {
  display: inline-flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 44px; /* touch target */
  padding: var(--space) var(--space-sm);
  border: 0;
  border-radius: var(--border-rad-full);
  background: transparent;
  color: var(--gray-6);
  font-family: inherit;
  font-size: var(--font-size-xxs);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--time), color var(--time), box-shadow var(--time);
}
.plan-toggle-opt:hover { color: var(--gray-10); }
/* Kontora has no period choice: its single option is a static label filling the
   toggle's slot so the three cards' price rows align — not a control, so no
   pointer cursor. */
.plan-toggle[role="presentation"] .plan-toggle-opt { cursor: default; }
.plan-toggle-opt:focus-visible {
  outline: var(--border-md) solid var(--purple-7);
  outline-offset: 2px;
}
.plan-toggle-opt.active {
  background: var(--gray-0);
  color: var(--purple-7);
  font-weight: var(--font-weight-h);
  box-shadow: 0 1px 3px rgba(27, 27, 47, 0.12);
}
/* The buyer-type switch wears the same segmented look but is a real radio
   group: the choice posts with the form on its own, and arrow-key navigation
   comes from the browser. The input is hidden, never display:none, so it stays
   focusable. */
label.plan-toggle-opt { cursor: pointer; }
.plan-toggle-opt input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.plan-toggle-opt:has(input:focus-visible) {
  outline: var(--border-md) solid var(--purple-7);
  outline-offset: 2px;
}

.plan-toggle-save {
  padding: 1px var(--space);
  border-radius: var(--border-rad-full);
  background: var(--purple-2);
  color: var(--purple-7);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-h);
}
/* Inactive option: the badge must not compete with the selected price. */
.plan-toggle-opt:not(.active) .plan-toggle-save {
  background: var(--gray-3);
  color: var(--gray-6);
}
/* On phones the two options plus the badge are wider than the card interior,
   so the switch goes full width and the card gives back its desktop padding. */
@media (max-width: 480px) {
  .plan-card { padding: var(--space-xl) var(--space-lg); }
  .plan-toggle { display: flex; width: 100%; }
  .plan-toggle-opt {
    flex: 1;
    justify-content: center;
    padding: var(--space);
  }
}

.plan-price { line-height: 1; margin-bottom: var(--space-sm); }
.plan-price .per {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight);
  color: var(--gray-5);
  margin-left: var(--space-sm);
}
.plan-price .sym {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-h);
  color: var(--gray-7);
  vertical-align: 7px;
  line-height: 1;
}
.plan-price .amt {
  font-size: 2.75rem;
  font-weight: var(--font-weight-h);
  color: var(--gray-11);
  letter-spacing: -0.04rem;
}
/* Stands where the price stands, and is given the price block's height so the
   card does not resize when the reader switches to the company option. */
.plan-enterprise {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 4rem;
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-lg);
  line-height: var(--leading-sm);
  color: var(--gray-7);
}
/* The phrase is the link, so it takes .card-link's accent and underline; this
   only stops the inherited line-height from spacing the two lines apart. */
.plan-enterprise .card-link { margin-top: 2px; }
.plan-period {
  font-size: var(--font-size-sm);
  color: var(--gray-5);
  /* Reserve exactly one line box: the monthly period leaves this empty, and
     collapsing it would jog the feature list up and down on every switch. */
  min-height: calc(var(--leading) * 1em);
  margin-bottom: var(--space-lg);
}
.plan-list { width: 100%; text-align: left; margin-bottom: var(--space-lg); }
.plan-list li {
  display: flex; align-items: flex-start; gap: var(--space);
  padding: var(--space) 0;
  font-size: var(--font-size-sm);
  color: var(--gray-7);
  border-bottom: var(--border-sm) solid var(--gray-2);
}
.plan-list li:last-child { border-bottom: none; }
/* The plan CTA fills the card: it is the only action here, so it should not
   have to be hunted for. */
/* margin-top:auto pins the CTA to the card bottom so the two tiers' buttons
   align even though their feature lists differ in length. */
/* No margin-top:auto here — the bottom variants table (.plan-packs) carries the
   auto and pins itself + this button to the card bottom. Two auto margins would
   split the free space and leave the table floating mid-card. */
.plan-cta { display: block; width: 100%; text-align: center; }
.plan-list li::before {
  content: '✓';
  color: var(--green);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  margin-top: 1px;
}
/* "nuo" prefix before the lead price. */
.plan-price .from {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight);
  color: var(--gray-5);
  vertical-align: 6px;
  margin-right: var(--space-sm);
}
/* Bottom variants table: each plan's sizes/periods and their prices, listed at
   the foot of the card. margin-top:auto pins the table (and the CTA under it) to
   the bottom, so the three cards' tables and buttons line up whatever the feature
   list length. */
.plan-packs {
  width: 100%;
  margin-top: auto;
  margin-bottom: var(--space-md);
  text-align: left;
  padding-top: var(--space-md);
  border-top: var(--border-sm) solid var(--gray-3);
}
.plan-packs h4 {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-6);
  margin-bottom: var(--space-sm);
}
.plan-pack {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space);
  padding: var(--space-sm) 0;
  border-top: var(--border-sm) solid var(--gray-2);
  font-size: var(--font-size-sm);
}
.plan-pack-lbl { color: var(--gray-8); }
.plan-pack-note {
  color: #b4472f;
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-h);
  margin-left: var(--space-sm);
}
.plan-pack-val {
  font-weight: var(--font-weight-bold);
  color: var(--gray-11);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Selectable variant rows on /planai: one radio row per pack/period, the CTA's
   total following the choice. The selected row is tinted with the accent. */
.plan-variant {
  display: flex;
  align-items: center;
  gap: var(--space);
  padding: var(--space-md);
  margin-top: var(--space-sm);
  border: var(--border) solid var(--gray-3);
  border-radius: var(--border-rad-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: border-color var(--time), background var(--time);
}
.plan-variant:hover { border-color: var(--gray-5); }
.plan-variant.selected { border-color: var(--purple-7); background: var(--purple-1, #f2effe); }
.plan-variant input { accent-color: var(--purple-7); margin: 0; flex: none; }
.plan-variant-lbl { flex: 1; color: var(--gray-9); }
.plan-variant-val {
  font-weight: var(--font-weight-bold);
  color: var(--gray-11);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── ABOUT / KONTAKTAI ────────────────────────── */
#kontaktai { background: var(--gray-0); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4x); align-items: center; }
.about-text h2 { margin-bottom: var(--space-xl); }
.about-text p { font-size: var(--font-size-sm); margin-bottom: var(--space-lg); }

/* Contact rows — same editorial purple keyline as the section cards; the whole
   row is the mailto/tel link. */
.contact-list { display: flex; flex-direction: column; gap: var(--space-xl); }
.contact-item {
  display: flex; flex-direction: column; gap: var(--space-sm);
  border-left: 2px solid var(--purple-5);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  transition: border-color var(--time);
}
.contact-item:hover { border-color: var(--purple-7); }
.contact-label {
  font-size: var(--font-size-xs); color: var(--gray-6);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.contact-value {
  font-size: var(--font-size-h4); font-weight: var(--font-weight-h);
  color: var(--gray-11); transition: color var(--time);
}
.contact-item:hover .contact-value { color: var(--purple-7); }
/* Static company details — muted gray keyline signals it is info, not a link. */
.contact-org {
  display: flex; flex-direction: column; gap: var(--space-xs);
  border-left: 2px solid var(--gray-4);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
}
.contact-org-name { font-size: var(--font-size); font-weight: var(--font-weight-h); color: var(--gray-9); }
.contact-org-addr { font-size: var(--font-size-sm); color: var(--gray-6); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-2x); }
/* Editorial cards: a thin purple keyline on the left instead of an icon tile —
   reads as intentional design, avoids the "AI-made" emoji/icon look. */
.team-card {
  border-left: 2px solid var(--purple-5);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
}
.team-card h4 { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); margin-bottom: var(--space-sm); }
.team-card p { font-size: var(--font-size-xs); color: var(--gray-6); line-height: var(--leading-sm); }

/* ── FOOTER ───────────────────────────────────── */
footer {
  background: var(--gray-1);
  border-top: var(--border-sm) solid var(--gray-3);
  padding: var(--space-2x) 0;
}
.footer-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-lg);
}
.f-logo { font-size: var(--font-size); font-weight: var(--font-weight-bold); color: var(--gray-11); letter-spacing: -0.02rem; }
.f-logo span { color: var(--purple-7); }
.f-links { display: flex; gap: var(--space-xl); flex-wrap: wrap; }
.f-links a { font-size: var(--font-size-sm); color: var(--gray-6); transition: color var(--time); }
.f-links a:hover { color: var(--gray-11); }
.f-copy { font-size: var(--font-size-xs); color: var(--gray-5); }
/* Legal document links — a subtle second row under the main footer row. */
.footer-legal {
  display: flex; gap: var(--space-lg); flex-wrap: wrap;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--border-sm) solid var(--gray-3);
}
.footer-legal a { font-size: var(--font-size-xs); color: var(--gray-6); transition: color var(--time); }
.footer-legal a:hover { color: var(--purple-7); }

/* ── LEGAL DOCUMENT PAGES (taisyklės / privatumas / grąžinimai) ──────
   Typography for the goldmark-rendered Markdown. The global reset strips list
   markers, so they are restored here. */
/* ── /mcp: the connection walkthrough as a public page ────────────────────
   Full .rapper width, not .rapper.md: each step is a two-column grid of text
   beside a drawing, and at the narrower document measure the drawings shrink
   to the point where their labels stop being readable — which is the only
   reason they exist. */
.mcp-main {
  /* Clear the fixed 62px header, same pattern as the other standalone pages. */
  padding: calc(62px + var(--space-2x)) 0 var(--space-2x);
  background: var(--gray-0);
  min-height: 70vh;
}
.mcp-main .section-head h1 { margin-bottom: var(--space-lg); }
/* The address block sits between the lead and the steps, centred and held to
   the same measure as the lead so the page has one column of attention. */
.mcp-url {
  max-width: 34rem;
  margin: 0 auto var(--space-2x);
  text-align: center;
}
/* The steps carry their own top borders, so on this page they need no card
   around them — a bordered box inside a bordered page reads as a widget that
   escaped from the dashboard. */
.mcp-main .howto { margin-top: 0; }
/* Section headings on a page that already spent its h1 on the title. Kept at
   the section rhythm (3rem above, 1rem below) so "Ką jungtis moka", "Kaip
   prijungti" and "Paskyra ir pagalba" read as three parts of one page rather
   than three stacked blocks. */
.mcp-h2 {
  margin: var(--space-2x) 0 var(--space-lg);
  font-size: var(--font-size-h4);
}
.mcp-foot {
  margin-top: var(--space-2x);
  padding-top: var(--space-2x);
  border-top: var(--border-sm) solid var(--gray-2);
}
.mcp-foot p { color: var(--gray-7); }
.mcp-foot p + p { margin-top: var(--space-md); }

.legal-main {
  /* Clear the fixed 62px header, same pattern as the dashboard/auth pages. */
  padding: calc(62px + var(--space-2x)) 0 var(--space-4x);
  background: var(--gray-0);
  min-height: 70vh;
}
.legal { color: var(--gray-8); font-size: var(--font-size); line-height: var(--leading); }
.legal h1 { font-size: var(--font-size-h2); color: var(--gray-11); line-height: 1.15; margin-bottom: var(--space-lg); }
.legal h2 { font-size: var(--font-size-h4); color: var(--gray-11); margin: var(--space-2x) 0 var(--space); }
.legal h3 { font-size: var(--font-size-lg); color: var(--gray-10); margin: var(--space-xl) 0 var(--space); }
.legal p { margin-bottom: var(--space-lg); }
.legal ul { list-style: disc; padding-left: var(--space-xl); margin-bottom: var(--space-lg); }
.legal ol { list-style: decimal; padding-left: var(--space-xl); margin-bottom: var(--space-lg); }
.legal li { margin-bottom: var(--space-sm); }
.legal a { color: var(--purple-7); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--purple-8); }
.legal strong { color: var(--gray-11); font-weight: var(--font-weight-h); }
.legal em { font-style: italic; }
.legal hr { border: none; border-top: var(--border-sm) solid var(--gray-3); margin: var(--space-2x) 0; }
.legal blockquote {
  border-left: 3px solid var(--purple-4);
  padding-left: var(--space-lg); margin: 0 0 var(--space-lg);
  color: var(--gray-6);
}
/* Markdown tables come with no wrapper of ours to scroll them, so the table is
   its own scroll container. Without this the privacy policy pushed the page
   10px sideways at 375. */
.legal table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  width: 100%; border-collapse: collapse;
  margin: 0 0 var(--space-xl); font-size: var(--font-size-sm);
}
.legal th, .legal td {
  text-align: left; vertical-align: top;
  padding: var(--space) var(--space-md);
  border: var(--border-sm) solid var(--gray-3);
}
.legal th { background: var(--gray-1); font-weight: var(--font-weight-h); color: var(--gray-9); }
.legal code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--gray-2); padding: 0.1em 0.35em; border-radius: var(--border-rad-sm);
}

/* ── MODAL OVERLAY (pure CSS :target) ────────── */
.overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(27, 27, 47, 0.52);
  backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: var(--space-lg);
}
.overlay:target { display: flex; }

.modal-box {
  background: var(--gray-0);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  padding: var(--space-2x);
  width: 100%; max-width: 26rem;
  position: relative;
  box-shadow: 0 8px 32px rgba(27, 27, 47, 0.10), 0 2px 8px rgba(27, 27, 47, 0.06);
}
.modal-x {
  position: absolute; top: var(--space-lg); right: var(--space-lg);
  width: 1.75rem; height: 1.75rem;
  background: var(--gray-2); border-radius: var(--border-rad-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-6); font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  transition: background var(--time);
}
.modal-x:hover { background: var(--gray-3); }
.modal-box h2 { font-size: var(--font-size-h4); margin-bottom: var(--space-sm); }
.modal-sub { font-size: var(--font-size-sm); color: var(--gray-6); margin-bottom: var(--space-2x); }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: var(--space-md);
  width: 100%; padding: var(--space) var(--space-lg);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad-sm);
  font-size: var(--font-size-sm); font-weight: var(--font-weight);
  color: var(--gray-7); background: var(--gray-0);
  margin-bottom: var(--space-lg);
  transition: border-color var(--time), background var(--time);
}
.btn-google:hover { border-color: var(--gray-5); background: var(--gray-1); }

.sep {
  display: flex; align-items: center; gap: var(--space-lg);
  font-size: var(--font-size-xs); color: var(--gray-5);
  margin: var(--space-lg) 0;
}
.sep::before, .sep::after { content: ''; flex: 1; height: 1px; background: var(--gray-3); }

.field { margin-bottom: var(--space-lg); }
.field label {
  display: block; font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold); color: var(--gray-8);
  margin-bottom: var(--space-sm);
}
.modal-foot { font-size: var(--font-size-xs); color: var(--gray-5); text-align: center; margin-top: var(--space-lg); }
.modal-foot a { color: var(--gray-7); font-weight: var(--font-weight-bold); }

/* Dashboard */
#dashboard .modal-box { max-width: 34rem; max-height: 92vh; overflow-y: auto; }
.dash-s { margin-bottom: var(--space-xl); }
.dash-label {
  font-size: var(--font-size-xxs); font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray-5); display: block; margin-bottom: var(--space-md);
}
.code-box {
  background: var(--gray-11); color: var(--purple-4);
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  padding: var(--space-lg); border-radius: var(--border-rad-sm);
  word-break: break-all; line-height: var(--leading);
}
.usage-track { background: var(--gray-2); border-radius: var(--border-rad-full); height: 6px; margin-top: var(--space); overflow: hidden; }
.usage-fill { background: var(--green); height: 100%; width: 23%; border-radius: var(--border-rad-full); }
.usage-meta { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--gray-6); margin-top: var(--space-sm); }
.cfg-list { counter-reset: c; }
.cfg-list li {
  counter-increment: c;
  display: flex; gap: var(--space-md); align-items: flex-start;
  padding: var(--space-sm) 0; font-size: var(--font-size-sm); color: var(--gray-7); line-height: var(--leading-sm);
}
.cfg-list li::before {
  content: counter(c);
  background: var(--gray-2); color: var(--gray-7);
  min-width: 1.3rem; height: 1.3rem;
  border-radius: var(--border-rad-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xxs); font-weight: var(--font-weight-bold); flex-shrink: 0;
}
code {
  background: var(--gray-2); color: var(--gray-8);
  padding: 0.08rem 0.3rem; border-radius: var(--border-rad-sm);
  font-size: var(--font-size-xs); font-family: var(--font-mono);
}

/* ── FEATURES (why-us block) ─────────────────── */
.features-head {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto var(--space-2x);
}
.features-head h2 { margin-bottom: var(--space-lg); }
.features-head h2:last-child { margin-bottom: 0; }
.features-head p  { font-size: var(--font-size-lg); color: var(--gray-6); }

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2x) var(--space-xl);
}

.feature-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.feature-check {
  color: var(--green);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-xs);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.feature-item h4 {
  font-size: var(--font-size);
  font-weight: var(--font-weight-bold);
  color: var(--gray-11);
  margin-bottom: var(--space);
  line-height: var(--leading-sm);
}

.feature-item p {
  font-size: var(--font-size-sm);
  color: var(--gray-6);
  line-height: var(--leading);
}

/* ── AUTH PAGES (prisijungti / registruotis) ───
   Full standalone pages instead of overlay modals — a real
   login/registration screen is clearer UX than a :target popup. */
.auth-main {
  min-height: calc(100vh - 62px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-3x) var(--space-lg);
  background: var(--gray-1);
}
.auth-card {
  background: var(--gray-0);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  padding: var(--space-2x);
  /* min-width:0 defeats the flex-item min-content floor — without it the card
     refuses to shrink below its max-content size and overflows narrow phones. */
  width: 100%; max-width: 25rem; min-width: 0;
  box-shadow: 0 8px 32px rgba(27, 27, 47, 0.10), 0 2px 8px rgba(27, 27, 47, 0.06);
}
.auth-head { text-align: center; margin-bottom: var(--space-xl); }
.auth-head h1 { font-size: var(--font-size-h3); margin-bottom: var(--space-sm); }
.auth-head p { font-size: var(--font-size-sm); color: var(--gray-6); }

/* Label row that carries a right-aligned helper link (e.g. "Pamiršote?"). */
.field-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-sm);
}
.field-row label { margin-bottom: 0; }
.forgot { font-size: var(--font-size-xs); color: var(--purple-7); transition: color var(--time); }
.forgot:hover { color: var(--purple-8); text-decoration: underline; }

.auth-submit { display: block; width: 100%; text-align: center; margin-top: var(--space-lg); }
.auth-foot { font-size: var(--font-size-sm); color: var(--gray-6); text-align: center; margin-top: var(--space-xl); }
.auth-foot a { color: var(--purple-7); font-weight: var(--font-weight-h); }
.auth-foot a:hover { color: var(--purple-8); }

/* Header hint ("Neturite paskyros?", account email) — redundant on phones
   where it would overflow the bar; the card footer already carries it. */
@media (max-width: 560px) { .auth-hint { display: none; } }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 720px) {
  .hero-grid, .two-col, .three-col, .about-grid, .team-grid, .features-grid, .pricing-grid, .pricing-trust-row { grid-template-columns: 1fr; }
  .hero-grid { gap: var(--space-2x); }
  .about-grid { gap: 2rem; }
  .morph-nav-items .morph-nav-link:not(:last-child) { display: none; }
  .stats-row { gap: var(--space-xl); }
  .trust-signals { gap: var(--space-lg); }
}
@media (max-width: 960px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  :root { --space-4x: 4rem; }
  .rapper { padding: 0 var(--space-lg); }
}

/* ── Semantic state colors ─────────────────────────────────────────
   The base palette signals positive with --green and emphasis with
   --purple, but has no danger/feedback ramp. Define a minimal one here so
   state colors come from tokens (used by the dashboard + auth feedback),
   not scattered hardcoded hexes. */
:root {
  --success:      #0F5132;            /* readable green text on light surfaces */
  --success-fade: var(--green-fade);  /* pale mint surface, matches DS callouts */
  --danger:       #B42318;            /* destructive / error */
  --danger-fade:  #FEF3F2;            /* danger surface tint */
  --danger-line:  #FECDCA;            /* danger border */
}

/* ── Auth feedback (datastar-driven) ───────────────────────────────
   Inline status/error banners for the auth + dashboard forms, shown via
   datastar. Mirrors the design-system callout pattern: tinted surface +
   matching border + readable text, all from tokens. */
.auth-error,
.auth-notice {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-rad-sm);
  font-size: var(--font-size-sm);
  line-height: var(--leading-sm);
}
.auth-error  { color: var(--danger);  background: var(--danger-fade);  border: var(--border-sm) solid var(--danger-line); }
.auth-notice { color: var(--success); background: var(--success-fade); border: var(--border-sm) solid var(--green); }

/* ── OAuth consent destination ─────────────────────────────────────
   The destination host is the ONE fact separating a connection the user
   started from one an attacker did, so it does NOT share the .element
   treatment with the account row above it — it is set larger, heavier and
   monospaced so it is read rather than skimmed.

   This matters more since dynamic client registration was opened: any
   https callback may now register, so this line and the notice beneath it
   are what stands between a self-declared destination and a code. */
.consent-dest { margin-bottom: var(--space-xl); }
.consent-host {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-h);
  color: var(--gray-10);
  margin: 0;
  /* A hostile hostname can be arbitrarily long and is chosen to mislead.
     Wrap it instead of letting it widen the card or clip the tail — the
     end of a host is exactly where a suffix trick hides. */
  overflow-wrap: anywhere;
}
.consent-warn {
  display: flex; align-items: flex-start; gap: var(--space);
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  border-radius: var(--border-rad-sm);
  color: var(--danger);
  background: var(--danger-fade);
  border: var(--border-sm) solid var(--danger-line);
  font-size: var(--font-size-sm);
  line-height: var(--leading-sm);
}
/* flex:none stops the triangle being squashed by a long hostname beside it. */
.consent-warn-icon { flex: none; margin-top: 0.15em; }

/* ── Dashboard (Skydelis) ──────────────────────────────────────────
   Plan, usage, and API-key management. Built entirely on the design-system
   tokens + the shared .card so it reads as one system with the rest of the
   site (no invented tokens, no foreign palette). */
/* Clear the fixed 62px header (same pattern as #produktas) so the heading
   isn't hidden underneath it. */
.dash-main { padding: calc(62px + var(--space-2x)) 0 var(--space-4x); }
.dash-head { margin-bottom: var(--space-xl); }
.dash-head h1 {
  /* Interior pages, not the landing hero: 3rem reads as marketing and swamps
     the content it introduces. */
  font-size: var(--font-size-h2);
  margin: 0 0 var(--space-sm);
}
.dash-head p { margin: 0; color: var(--gray-6); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.dash-card { padding: var(--space-xl); }
/* Cards stacked outside .dash-grid have no gap of their own: the global reset
   strips every margin, and only the grid supplies one through `gap`. Without
   this, two consecutive cards sit border-to-border and read as one broken box. */
.dash-card + .dash-card { margin-top: var(--space-lg); }
/* The dashboard's requisites (#requisites) and payments (#payments) blocks are
   each wrapped in their own section/div so SSE can morph them independently,
   which breaks the .dash-card + .dash-card adjacency above — so give them
   explicit top spacing, or they sit border-to-border against the block before. */
#requisites, #payments { margin-top: var(--space-lg); }
/* …but inside the grid, spacing comes from `gap`, so the rule above would push
   the second card down and break the top-edge alignment with the first. Zero it
   for grid children — gap handles both the side-by-side and the wrapped case. */
.dash-grid > .dash-card + .dash-card { margin-top: 0; }
.dash-card h2 { margin: 0 0 var(--space-lg); font-size: var(--font-size-h4); }

.muted { color: var(--gray-6); font-size: var(--font-size-sm); }
.mono { font-family: var(--font-mono); font-size: var(--font-size-sm); }

/* Disabled buttons (e.g. the plan you're already on) — dimmed, non-interactive. */
.button:disabled,
.button[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.plan-state { margin: 0 0 var(--space-sm); }
.plan-state.active { color: var(--success); font-weight: var(--font-weight-h); }
/* Plan STATUS strip (agreed design): a marker, the standing with a state pill,
   a key figure, and one action row — the dashboard links out to /planai. */
.pstat { border: var(--border) solid var(--gray-3); border-radius: var(--border-rad); background: var(--gray-0); padding: 18px; }
.pstat-top { display: flex; align-items: center; gap: 14px; }
.pstat-mk { width: 44px; height: 44px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 1.15rem; background: var(--purple-2); color: var(--purple-7); }
.pstat-lead { flex: 1; min-width: 0; }
.pstat-lead .t { font-weight: var(--font-weight-bold); font-size: 1.05rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; line-height: 1.2; }
.pstat-lead .s { color: var(--gray-6); font-size: 0.82rem; margin-top: 3px; }
.pstat-mid { text-align: right; flex: none; }
.pstat-mid .big { font-size: 1.5rem; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; line-height: 1; color: var(--gray-11); }
.pstat-mid .lbl { font-size: 0.72rem; color: var(--gray-5); margin-top: 3px; }
.pstat-act { display: flex; gap: 8px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: var(--border) solid var(--gray-2); flex-wrap: wrap; }
.pstat-act .grow { flex: 1; }
.pstat-act .plink { color: var(--purple-7); font-weight: var(--font-weight-h); font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.pstat-act .plink:hover { text-decoration: underline; }
.pstat-off { color: var(--gray-6); font-size: 0.85rem; }
.ppill { font-size: 0.7rem; font-weight: var(--font-weight-bold); padding: 2px 8px; border-radius: var(--border-rad-full); background: var(--gray-1); color: var(--gray-6); border: var(--border) solid var(--gray-3); }
.ppill.on { background: #eafaf1; color: var(--success); border-color: #c9ecd8; }
/* Plan chooser: the billing periods sit side by side so they are compared, not
   read as a list of buttons. Same visual language as the landing plan card —
   name, price, bonus pill — so the price a visitor was shown is the price they
   meet again once signed in. */
.plan-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.plan-option {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  padding: var(--space-xl) var(--space-lg);
  background: var(--gray-0);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
}
/* The plan in force is a state, not an offer: tinted rather than sold. */
.plan-option.current {
  border-color: var(--purple-4);
  background: var(--purple-2);
}
/* The plan in force is still worth naming, but as a label beside it rather
   than a disabled button across it — renewing is exactly what this card is for. */
.plan-option-now {
  margin-left: var(--space);
  padding: 1px var(--space);
  border-radius: var(--border-rad-full);
  background: var(--purple-2); color: var(--purple-7);
  font-size: var(--font-size-xxs); font-weight: var(--font-weight-h);
  white-space: nowrap;
}

.plan-option-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--gray-9);
}
/* Reserved whether or not this plan has a bonus, so the CTAs and prices of the
   options line up instead of stepping down by a row. */
.plan-option-note { min-height: 1.5rem; display: flex; align-items: center; }
.plan-option-bonus {
  padding: 1px var(--space);
  border-radius: var(--border-rad-full);
  background: var(--purple-2);
  color: var(--purple-7);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-h);
}
.plan-option.current .plan-option-bonus { background: var(--gray-0); }
.plan-option-price {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h);
  color: var(--gray-11);
  line-height: var(--leading-xs);
}
.plan-option-price span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight);
  color: var(--gray-5);
}
/* Push the CTA down so both cards' buttons line up even when only one of them
   carries a bonus pill. */
.plan-option-cta {
  margin-top: auto;
  width: 100%;
  text-align: center;
  white-space: normal;
}
.plan-option-cta:disabled { background: var(--gray-3); color: var(--gray-6); cursor: default; }

.usage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--space);
}
.usage-stat {
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  background: var(--gray-1);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad-sm);
}
.usage-stat strong { display: block; font-size: var(--font-size-h4); line-height: var(--leading-xs); font-variant-numeric: tabular-nums; color: var(--gray-10); }
.usage-stat span { font-size: var(--font-size-xxs); color: var(--gray-6); }

.usage-bars { display: flex; align-items: flex-end; gap: 2px; height: 56px; margin-top: var(--space-lg); }
.usage-bar { flex: 1 1 0; min-height: 2px; background: var(--purple-7); border-radius: 2px 2px 0 0; opacity: 0.85; }

/* ── AFFILIATE (partner program) ───────────────────────────────────────────
   Reuses .usage-stats for the summary row; the balance stat carries the accent
   because it is the number the reader can act on. The history is its own table
   (no dashboard table existed) in the site's tokens, scrollable on narrow
   screens so a wide row never pushes the card sideways. */
.aff-lead { max-width: 44rem; margin: 0 0 var(--space-lg); color: var(--gray-6); }
.aff-link { margin-bottom: var(--space-lg); }
.aff-link .connect-label { display: block; margin-bottom: var(--space); font-size: var(--font-size-sm); font-weight: var(--font-weight-h); color: var(--gray-8); }
.usage-stat.is-balance strong { color: var(--purple-7); }
.aff-balance-note { margin: var(--space) 0 0; font-size: var(--font-size-xs); color: var(--gray-6); }
.aff-sub { margin: var(--space-2x) 0 var(--space); font-size: var(--font-size-sm); font-weight: var(--font-weight-h); color: var(--gray-9); }
.aff-empty { margin-top: var(--space-2x); }

.aff-log-wrap { overflow-x: auto; }
.aff-log { width: 100%; border-collapse: collapse; }
.aff-log th, .aff-log td { text-align: left; padding: var(--space) var(--space-md); font-size: var(--font-size-sm); white-space: nowrap; }
.aff-log thead th { font-size: var(--font-size-xxs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-5); font-weight: var(--font-weight-h); border-bottom: var(--border-sm) solid var(--gray-3); }
.aff-log tbody tr { border-bottom: var(--border-sm) solid var(--gray-2); }
.aff-log tbody tr:last-child { border-bottom: 0; }
.aff-log .who { font-family: var(--font-mono); color: var(--gray-8); }
.aff-log .amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-7); }
.aff-log .comm { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-h); color: var(--purple-7); }
.aff-log .muted { color: var(--gray-4); }
.aff-event { display: inline-flex; align-items: center; gap: 0.5em; }
.aff-dot { width: 0.5em; height: 0.5em; border-radius: 50%; flex: none; }
.aff-dot--pay { background: var(--purple-7); }
.aff-dot--reg { background: var(--gray-4); }

/* Freshly created secret — branded "important" callout (purple = emphasis in
   the design system) so it stands out without inventing a warning palette. */
/* Override .button's inline-block so the download glyph aligns with the label. */




/* Account settings: vertical form layout + delete danger zone. */
.stack { display: flex; flex-direction: column; gap: var(--space); align-items: stretch; }
.stack .button { align-self: flex-start; }
/* .stack stretches its children, which turns the segmented switch into a
   full-width bar with one option hugging its text and the other sprawling. It
   should stay the width of its two options. */
.stack > .plan-toggle { align-self: flex-start; }
.danger-zone { border-color: var(--danger-line); }
.danger-zone h2 { color: var(--danger); }
.danger-btn { background: var(--danger); border-color: var(--danger); }
.danger-btn:hover { background: #912018; border-color: #912018; }

.link-danger { background: none; border: none; color: var(--danger); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.link-danger:hover { color: #842029; }

@media (max-width: 560px) {
  /* One plan per row on phones — side-by-side cards get too narrow to read. */
  .plan-options { grid-template-columns: 1fr; }
}

/* ── CHECKOUT (order summary) ─────────────────
   The summary is a legal disclosure as much as a page: the terms require the
   scope, final price, duration, minimum term and termination conditions to be
   readable before the customer commits. So it is laid out for reading — a
   definition list, generous line height — not as a compact form. */
.co-line {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-lg); flex-wrap: wrap;
  padding-bottom: var(--space-lg);
  border-bottom: var(--border-sm) solid var(--gray-3);
}
.co-name {
  display: block;
  /* Match the requisites card's h2 so the two cards' titles are the same weight
     across the columns. */
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h);
  color: var(--gray-11);
  margin-bottom: var(--space-sm);
}
.co-price {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h);
  color: var(--gray-11);
  white-space: nowrap;
}
.co-price span { font-size: var(--font-size-sm); font-weight: var(--font-weight); color: var(--gray-5); }

/* Checkout is two columns on desktop — the summary (required disclosure) beside
   the requisites + payment + pay button — so the button is reachable without
   scrolling past the whole summary. One column on narrow screens. */
.co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
@media (max-width: 60rem) { .co-grid { grid-template-columns: 1fr; } }
/* Tighten the cards on checkout so the pay button sits near the fold: less card
   padding, tighter field spacing, smaller heading gap. */
.co-grid .dash-card { padding: var(--space-lg); }
.co-grid .dash-card h2 { margin-bottom: var(--space); }
.co-grid .field { margin-bottom: var(--space-md); }
.co-grid .co-methods { margin: var(--space-md) 0; display: flex; flex-wrap: wrap; gap: var(--space); }
.co-grid .co-method { flex: 1 1 10rem; margin-bottom: 0; }
.co-grid .co-fineprint { margin-top: var(--space); }
/* Checkout is a focused, one-shot page — trim the top space so the summary, the
   form and the pay button sit higher and reach the fold. */
.dash-main.co-page { padding-top: calc(62px + var(--space-lg)); }
.co-page .dash-head { margin-bottom: var(--space-lg); }
.co-page .dash-head h1 { font-size: var(--font-size-h3); }
/* Payment sits in the same card as the requisites now (one "fill and pay"
   panel), separated by space + a subheading. No rule: a lone horizontal line
   here floats at a different height than the summary card's lines beside it and
   reads as broken. */
.co-grid h2.co-subhead { margin: var(--space-xl) 0 var(--space); font-size: var(--font-size-h4); }

.deflist { margin: var(--space) 0 0; }
.deflist > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-lg);
  padding: var(--space) 0;
  border-bottom: var(--border-sm) solid var(--gray-2);
}
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { font-size: var(--font-size-sm); font-weight: var(--font-weight-h); color: var(--gray-9); }
.deflist dd { font-size: var(--font-size-sm); color: var(--gray-7); line-height: var(--leading-sm); }
.deflist a { color: var(--purple-7); text-decoration: underline; }

/* Save and cancel sit on one line; .stack would otherwise stretch them apart. */
.req-actions { display: flex; align-items: center; gap: var(--space-md); }

/* Company lookup feedback under the code field. The line keeps its height
   whether or not there is a message, so filling the form never shifts it. */
.co-lookup { min-height: 1.1rem; margin-top: var(--space-sm); font-size: var(--font-size-xs); }
.co-lookup-ok { color: var(--success); font-weight: var(--font-weight-h); }
.co-lookup-note { color: var(--gray-6); }
/* An optional field says so in its label, quietly, rather than in a note below
   it that reads as an error. */
.co-optional { font-weight: var(--font-weight); color: var(--gray-5); }
/* Inline per-field validation on the checkout form: the message sits under its
   own field (never in a top banner), and the input takes a danger border, so
   every field's error reads the same. */
.field-error {
  margin: var(--space-sm) 0 0;
  font-size: var(--font-size-sm);
  color: var(--danger);
}
.element.has-error { border-color: var(--danger); }
.element.has-error:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-fade); }

/* Saved invoice requisites: shown read-only for a returning customer, with a
   single "Keisti" button that swaps in the full form. */
.co-saved { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.co-saved-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-sm) var(--space-xl);
  margin: 0;
  width: 100%;
}
.co-saved-list dt { font-size: var(--font-size-sm); color: var(--gray-7); }
.co-saved-list dd { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-h); color: var(--gray-11); }
@media (max-width: 32rem) {
  .co-saved-list { grid-template-columns: 1fr; gap: var(--space-xs) var(--space-xl); }
  .co-saved-list dd { margin-bottom: var(--space-sm); }
}

/* Invoice link in the payments table: the number is the link, PDF is the hint. */
.pay-invoice {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  color: var(--purple-7); font-weight: var(--font-weight-h);
  font-size: var(--font-size-sm); white-space: nowrap;
}
.pay-invoice:hover { color: var(--purple-8); text-decoration: underline; }
.pay-invoice-hint {
  padding: 1px var(--space-sm);
  border-radius: var(--border-rad-sm);
  background: var(--gray-2); color: var(--gray-6);
  font-size: var(--font-size-xxs); font-weight: var(--font-weight-h);
}
/* A small outline button sits inside a table row without stretching it. */
.button.sm {
  min-height: 32px; padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-xs);
}

.co-methods { border: 0; margin: var(--space-lg) 0; }
.co-methods legend {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-h);
  color: var(--gray-9); margin-bottom: var(--space);
}
.co-method {
  display: flex; align-items: center; gap: var(--space);
  min-height: 44px; /* touch target */
  padding: 0 var(--space-md);
  margin-bottom: var(--space);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad-sm);
  font-size: var(--font-size-sm); color: var(--gray-8);
  cursor: pointer;
  transition: border-color var(--time), background var(--time);
}
.co-method:hover { border-color: var(--gray-5); }
.co-method:has(input:checked) { border-color: var(--purple-7); background: var(--purple-2); }
.co-method:focus-within { outline: var(--border-md) solid var(--purple-7); outline-offset: 2px; }

.co-submit { display: block; width: 100%; text-align: center; }
.co-fineprint {
  margin-top: var(--space-lg);
  font-size: var(--font-size-xs); color: var(--gray-6); line-height: var(--leading);
}
.co-fineprint a { color: var(--purple-7); text-decoration: underline; }
.co-back { margin-top: var(--space-lg); font-size: var(--font-size-sm); }
.co-back a { color: var(--gray-6); }
.co-back a:hover { color: var(--gray-10); }

.co-result { text-align: center; }
.co-result h1 { font-size: var(--font-size-h4); margin: var(--space-lg) 0 var(--space); }
.co-result p { margin-bottom: var(--space-xl); }
.co-result-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--border-rad-full);
  background: var(--danger-fade); color: var(--danger);
  font-size: var(--font-size-h4); font-weight: var(--font-weight-bold);
}
.co-result-mark.ok { background: var(--success-fade); color: var(--success); }

@media (max-width: 560px) {
  /* Stacked labels read better than a 12rem column squeezed to nothing. */
  .deflist > div { grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* ── USER MENU (signed-in header) ─────────────
   The email is the trigger: it says which account you are in and opens the two
   things you can do about it. One control instead of two competing buttons. */
.user-menu { position: relative; }
.user-menu-trigger {
  display: inline-flex; align-items: center; gap: var(--space);
  min-height: 40px;
  padding: var(--space-sm) var(--space-md);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad-full);
  background: var(--gray-0);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--gray-8);
  cursor: pointer;
  transition: border-color var(--time), background var(--time);
}
.user-menu-trigger:hover { border-color: var(--gray-5); }
.user-menu-trigger.open { border-color: var(--purple-7); background: var(--purple-2); color: var(--purple-9); }
.user-menu-trigger:focus-visible { outline: var(--border-md) solid var(--purple-7); outline-offset: 2px; }
/* Addresses are long and the header is not: truncate rather than push the nav. */
.user-menu-email {
  max-width: 14rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu-caret { flex-shrink: 0; color: var(--gray-5); transition: transform var(--time); }
.user-menu-trigger.open .user-menu-caret { transform: rotate(180deg); color: var(--purple-7); }

.user-menu-list {
  position: absolute; top: calc(100% + var(--space-sm)); right: 0;
  min-width: 12rem;
  padding: var(--space-sm);
  background: var(--gray-0);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad-sm);
  box-shadow: 0 8px 24px rgba(27, 27, 47, 0.12), 0 2px 6px rgba(27, 27, 47, 0.06);
  z-index: 110; /* above the fixed header itself */
}
.user-menu-item {
  display: block; width: 100%;
  padding: var(--space) var(--space-md);
  border: 0; border-radius: var(--border-rad-sm);
  background: none;
  font-family: inherit; font-size: var(--font-size-sm); text-align: left;
  color: var(--gray-8);
  cursor: pointer;
  transition: background var(--time), color var(--time);
}
.user-menu-item:hover { background: var(--gray-1); color: var(--gray-11); }
.user-menu-item:focus-visible { outline: var(--border-md) solid var(--purple-7); outline-offset: -2px; }

@media (max-width: 560px) {
  /* Keep the menu reachable on a phone: shrink the address, never hide it —
     it is the only way out of the account. */
  .user-menu-email { max-width: 8rem; }
}

/* ── CONNECT CARD (MCP setup instructions) ────
   Three fields, in the order the Claude dialog asks for them. Laid out for
   following along while that dialog is open in another window, so each step is
   headed by the exact field label the customer is looking at. */
.connect-steps { counter-reset: step; margin: var(--space-lg) 0 0; }
.connect-steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--space-lg) var(--space-xl);
  border-left: var(--border-md) solid var(--gray-3);
  margin-left: var(--space-md);
}
.connect-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.connect-steps > li::before {
  content: counter(step);
  position: absolute; left: -0.9rem; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: var(--border-rad-full);
  background: var(--purple-2); color: var(--purple-7);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-h);
}
.connect-label {
  display: block;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-h);
  color: var(--gray-9);
  margin-bottom: var(--space-sm);
}
.connect-steps p { font-size: var(--font-size-sm); color: var(--gray-7); }

.connect-copy { display: flex; align-items: center; gap: var(--space); flex-wrap: wrap; }
.connect-url {
  flex: 1; min-width: 0;
  padding: var(--space) var(--space-md);
  background: var(--gray-1);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad-sm);
  /* A long URL wraps instead of widening the card. */
  overflow-wrap: anywhere;
}

/* The "optional" trap deserves to look like a warning, not body text. */
.connect-note {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--danger-fade);
  border: var(--border-sm) solid var(--danger-line);
  border-radius: var(--border-rad-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-9);
}

/* Actions under the connection steps: issue a key, or replace it. */
.connect-actions {
  display: flex; align-items: center; gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
/* The secret is on screen for one page load, so say so where it cannot be missed. */
.connect-warn {
  margin-top: var(--space);
  padding: var(--space-md);
  background: var(--success-fade);
  border: var(--border-sm) solid var(--green);
  border-radius: var(--border-rad-sm);
  font-size: var(--font-size-sm);
  color: var(--gray-9);
}

/* ── MODAL (native <dialog>) ──────────────────
   Used for the one destructive action left in the app: replacing an API key,
   which breaks a live connection until the customer re-enters the new one. */
.modal {
  /* The global reset sets margin:0 on everything, which kills the UA's
     `dialog:modal { margin: auto }` — the rule that centres a modal. Without
     this line the dialog opens in the top-left corner. */
  margin: auto;
  max-width: 30rem;
  width: calc(100vw - var(--space-2x));
  padding: var(--space-2x);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  background: var(--gray-0);
  color: var(--gray-9);
  box-shadow: 0 16px 48px rgba(27, 27, 47, 0.18);
}
.modal::backdrop { background: rgba(27, 27, 47, 0.35); }

/* An answer is long, so the dialog scrolls its body and keeps the question —
   and the way out — in view. */
.modal-wide {
  max-width: 62rem;
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
}
/* Scoped to [open] on purpose. A bare `display: flex` here would override the
   UA's `dialog:not([open]) { display: none }` and print all six answers into
   the page — which it did, until a browser run found the closed dialogs
   swallowing clicks meant for the cards. */
.modal-wide[open] { display: flex; flex-direction: column; }
.qmodal__head {
  position: relative;
  flex: none;
  padding: var(--space-2x) var(--space-2x) var(--space-lg);
  border-bottom: var(--border-sm) solid var(--gray-2);
}
.qmodal__head .qcard__tags { margin-bottom: var(--space-md); }
.qmodal__q { font-size: var(--font-size-h4); line-height: 1.25; margin: 0 var(--space-2x) var(--space-sm) 0; }
.qmodal__task { font-size: var(--font-size-sm); color: var(--gray-6); margin: 0; }
.qmodal__body { overflow-y: auto; padding: var(--space-2x); }
@media (max-width: 640px) {
  .qmodal__head { padding: var(--space-xl) var(--space-lg) var(--space); }
  .qmodal__body { padding: var(--space-lg); }
  /* Nested padding adds up: the dialog pads, then the panel pads, then the
     avatar column indents — leaving a 375px phone barely 200px of prose. The
     panel and the avatar give some back; the dialog keeps its own so the
     content never touches the edge. */
  .qmodal__body .tsr__panel { padding: var(--space-lg) var(--space); }
  .qmodal__body .tsr__ask { gap: var(--space); }
  .qmodal__body .tsr__avatar { width: 24px; height: 24px; font-size: 12px; }
  .qmodal__body .tsr__bubble { padding: var(--space-lg) var(--space); }
}

.modal h3 { font-size: var(--font-size-h4); margin-bottom: var(--space); }
.modal p { font-size: var(--font-size-sm); line-height: var(--leading); }
.modal-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  /* Stack so neither action is cramped, with the confirm on top of the reach. */
  .modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .modal-actions form, .modal-actions .button { width: 100%; text-align: center; }
}

/* ── USAGE: empty state ───────────────────────
   Before the first request there is nothing to plot. A row of zeros reads as a
   fault, so the card shows the shape it will take — blurred hard enough that no
   invented figure can be mistaken for a real one — with the true state stated
   over it. The illustration is aria-hidden and inert in the markup, so this is
   purely visual. */
.usage-empty { position: relative; }
.usage-ghost {
  filter: blur(5px);
  opacity: .45;
  user-select: none;
  pointer-events: none;
}
.usage-empty__note {
  position: absolute; inset: 0;
  /* A soft scrim rather than a panel: the text needs contrast against the blur,
     but a hard box would look like a second card sitting on the first. */
  background: radial-gradient(58% 52% at 50% 50%,
              rgba(255, 255, 255, .94) 40%, rgba(255, 255, 255, 0) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--gray-7);
}
.usage-empty__note strong { display: block; font-size: var(--font-size); color: var(--gray-11); }
.usage-empty__link { margin-top: var(--space); color: var(--purple-7); font-weight: var(--font-weight-h); text-decoration: none; }
.usage-empty__link:hover { text-decoration: underline; }

/* ── PAYMENTS TABLE ───────────────────────────
   Scrolls inside its own box on narrow screens rather than widening the page —
   the mistake the old keys table made. */
.pay-table { width: 100%; border-collapse: collapse; margin-top: var(--space-lg); display: block; overflow-x: auto; }
.pay-table thead th {
  text-align: left; white-space: nowrap;
  padding: 0 var(--space-lg) var(--space) 0;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-h);
  color: var(--gray-6); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: var(--border-sm) solid var(--gray-3);
}
.pay-table td {
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  font-size: var(--font-size-sm); color: var(--gray-8);
  border-bottom: var(--border-sm) solid var(--gray-2);
  white-space: nowrap;
}
.pay-table tbody tr:last-child td { border-bottom: 0; }
.pay-amount { font-weight: var(--font-weight-h); color: var(--gray-11); }
.pay-note {
  margin-left: var(--space);
  padding: 1px var(--space);
  border-radius: var(--border-rad-full);
  background: var(--gray-2); color: var(--gray-6);
  font-size: var(--font-size-xxs);
}
/* Card heading with the plan state beside it, so the answer to "what am I on"
   sits in the title rather than a paragraph below it. */
.pay-head { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space); }
.pay-head h2 { margin: 0; }
.pay-badge {
  padding: 2px var(--space-md);
  border-radius: var(--border-rad-full);
  background: var(--gray-2); color: var(--gray-7);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-h);
}
.pay-badge.active { background: var(--success-fade); color: var(--success); }

/* An empty section should look deliberate. Centred and padded, not a stray
   sentence hanging at the left edge of a large card. */
.pay-empty {
  margin: var(--space-lg) 0 0;
  padding: var(--space-2x) var(--space-lg);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--gray-8);
  background: var(--gray-1);
  border: var(--border-sm) dashed var(--gray-4);
  border-radius: var(--border-rad-sm);
}
.pay-empty span { display: inline-block; margin-top: var(--space-sm); color: var(--gray-6); }