/* ── 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); }

.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 ─────────────────────────────────── */
section { padding: var(--space-4x) 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 ────────────────────────────────────── */
.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;
}
.stats-row {
  display: flex; gap: var(--space-3x); flex-wrap: wrap; align-items: center;
}
.stat-item strong {
  display: block;
  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);
}
.stat-item span {
  font-size: var(--font-size-xs);
  color: var(--gray-6);
}

/* ── HOW IT WORKS ─────────────────────────────── */
#kaip-veikia { background: var(--gray-0); }
.section-head { margin-bottom: var(--space-3x); }
.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); }
.tsr-stack { display: flex; flex-direction: column; gap: var(--space-3x); }
/* .tsr is a <section>; cancel the global `section` 6rem 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. */
.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); }
}

/* 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); }
.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 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);
}
.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-4x); }
/* .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); }

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2x);
  align-items: start;
}

.pricing-trust h3 {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-xl);
}

.pricing-trust .card { margin-bottom: var(--space-lg); }
.pricing-trust .card:last-child { margin-bottom: 0; }

.plan-card {
  background: var(--gray-0);
  border: var(--border-sm) solid var(--gray-3);
  border-radius: var(--border-rad);
  padding: var(--space-2x);
  text-align: center;
  box-shadow: 0 4px 24px rgba(27, 27, 47, 0.07), 0 1px 4px rgba(27, 27, 47, 0.04);
}
.plan-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--gray-6);
  margin-bottom: var(--space-lg);
}
/* 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: inline-flex;
  gap: var(--space-xs);
  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;
  align-items: center;
  gap: var(--space);
  min-height: 44px; /* touch target */
  padding: var(--space) var(--space-xl);
  border: 0;
  border-radius: var(--border-rad-full);
  background: transparent;
  color: var(--gray-6);
  font-family: inherit;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--time), color var(--time), box-shadow var(--time);
}
.plan-toggle-opt:hover { color: var(--gray-10); }
.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-h4);
  font-weight: var(--font-weight-h);
  color: var(--gray-7);
  vertical-align: 14px;
  line-height: 1;
}
.plan-price .amt {
  font-size: 4rem;
  font-weight: var(--font-weight-h);
  color: var(--gray-11);
  letter-spacing: -0.05rem;
}
.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-2x);
}
.plan-list { text-align: left; margin-bottom: var(--space-2x); }
.plan-list li {
  display: flex; align-items: flex-start; gap: var(--space);
  padding: var(--space-md) 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. */
.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;
}

/* ── 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. */
.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 { 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); }

/* ── 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); }
.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 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; }

/* 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;
  font-size: var(--font-size-lg);
  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); }

.deflist { margin: var(--space-lg) 0; }
.deflist > div {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--space-lg);
  padding: var(--space-md) 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); }
.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); }

/* 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); }

/* ── 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); }