/* nodo.lt landing page.
 *
 * ONE STYLESHEET, NO BUILD STEP, NO WEB FONTS. The page is served by nginx straight off disk, so
 * every byte here is a byte the visitor waits for and nothing regenerates it. Edit it directly.
 *
 * CACHE TRAP - READ deploy/nginx/nodo.lt.conf BEFORE YOU EDIT THIS FILE. That config sets
 * `Cache-Control: immutable, max-age=31536000` on *.css. A returning visitor will not re-fetch
 * this file for a year. If you change it, rename it (style.2.css) and update the <link> in both
 * index.html and en.html. See site/README.md.
 *
 * NO INLINE STYLES ANYWHERE IN THE HTML, and no <style> block either: the Content-Security-Policy
 * in that same nginx config is `style-src 'self'`, which forbids both. Everything visual lives
 * here. Inline <svg> markup is fine - it is markup, not style - which is how the page gets icons
 * without a sprite file, an icon font or a request.
 *
 * ======================================================================================
 * THE HOUSE STYLE. This page is the third product on one shelf, next to manapensija.lt and
 * perkusai.com, and it is drawn to sit beside them rather than to be original. Both of those
 * pages were measured at 1440x900 and read out of their own stylesheets before a line of this
 * was written; what was taken from each is marked at the token that carries it.
 *
 * The three things all three pages now share: a warm off-white ground (never #fff), a confident
 * 700-weight headline in Inter, and exactly one accent used decisively.
 * ======================================================================================
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* GROUND. manapensija ships #faf8f4, perkusai #faf6f0; this is the midpoint, so the three
   * grounds are the same paper under different light. Warm off-white rather than white because
   * this is a page of statute text and paper reads better than a lightbox. */
  --bg:        #faf7f2;
  /* The alternating band. Both reference sites separate one section from the next by dropping it
   * onto a warmer sand rather than by drawing a rule, and it is the single change that stops a
   * long page reading as one undifferentiated column. manapensija #f3efe6, perkusai #f4eee4. */
  --bg-sand:   #f3eee5;
  --surface:   #ffffff;
  --line:      #e7e0d4;
  --line-soft: #f0ebe1;

  /* INK. perkusai's warm near-black, taken verbatim. manapensija's ink is a navy, which is right
   * there because navy is also its brand colour; here navy would be a second accent competing
   * with the teal, and the brief for this page is one accent. Warm black keeps the teal alone. */
  --ink:       #171512;   /* 17.0:1 on --bg */
  --ink-soft:  #4a443b;   /*  9.0:1 on --bg - secondary prose */
  --ink-mute:  #6e675d;   /*  5.2:1 on --bg, 4.8:1 on --bg-sand - captions, labels, table costs */

  /* THE ACCENT: deep teal.
   *
   * WHY THIS COLOUR, AND WHY NOT PERKUSAI'S ORANGE. The orange is a shopping colour - it is there
   * to make you want something, and this product's whole claim is the opposite: that it will tell
   * you no. What this service sells is that an answer can be checked, so the accent has to read as
   * confirmed rather than as exciting. Deep teal is the colour of a verification tick and of an
   * institutional seal at the same time; it is dark enough to carry body text (7.3:1 on the
   * ground, 6.8:1 on the sand band, 7.8:1 under white), which means the SAME hue can be the link
   * colour, the button fill and the plate behind the validity window instead of needing a darker
   * sibling for text the way orange does. It is also already the product's colour: favicon.svg
   * hard-codes #0b5c58 for the bracket mark, so the tab and the page now agree.
   *
   * Green would have been the obvious "correct" signal and is wrong here - green means pass/fail,
   * and this service does not grade a statute, it dates one. Teal is the same family without the
   * verdict. */
  --accent:      #0b5c58;
  --accent-deep: #084441;   /* hover / pressed - 11.0:1 under white */
  --accent-soft: #e2efec;   /* the plate under the validity window; accent on it is 6.6:1 */
  --accent-line: #b6d5d1;
  --on-accent:   #ffffff;

  /* WARN. Amber, not red: the answer in the card is not wrong, it has an expiry date, and red
   * would overstate it into an error. #8a5200 is perkusai's --gold-dark, which was already picked
   * to clear AA on a cream ground and does so here too (6.0:1 on --bg, 5.7:1 on --warn-soft). */
  --warn:      #8a5200;
  --warn-soft: #fdf4e6;
  --warn-line: #f0dcb9;

  /* FOOTER. Dark, which is manapensija's move: a page that has been light all the way down needs
   * an ending, and a rule does not provide one. Separate tokens rather than reusing --ink because
   * --ink inverts under the dark scheme and the footer must not. */
  --foot-bg:     #171512;
  --foot-ink:    #c8c1b6;   /* 10.2:1 on --foot-bg */
  --foot-strong: #f6f2ea;

  /* SPACING. manapensija's eight-step scale, adopted unchanged - this is the rhythm the two
   * sibling pages are built on and it is not worth being different. Nothing on this page uses a
   * value outside it.
   *
   * THE SCALES BELOW ARE KEPT COMPLETE even where this page does not reach the top of one (--s-8
   * and --shadow-md are currently unused). en.html is served from this same stylesheet and a
   * half-scale is how a second page ends up with a hand-written 3.5rem in it. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* RADIUS. Also manapensija's four steps. perkusai runs a single 16px everywhere; the four-step
   * scale is what lets a chip, a card and a plate inside a card read as three different objects. */
  --r-sm:   8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-full: 999px;

  /* SHADOW: manapensija's two-layer structure (a tight contact shadow plus a wide soft one),
   * re-tinted to perkusai's warm ink so it sits on a warm ground without turning grey. */
  --shadow-sm: 0 1px 2px rgba(23, 21, 18, 0.05), 0 2px 8px rgba(23, 21, 18, 0.04);
  --shadow-md: 0 2px 4px rgba(23, 21, 18, 0.06), 0 8px 24px rgba(23, 21, 18, 0.07);
  --shadow-lg: 0 4px 8px rgba(23, 21, 18, 0.06), 0 18px 44px rgba(23, 21, 18, 0.10);

  /* The only width token. Line length is set in ch further down, the way both reference sites do
   * it, because a measure is a count of characters and ch tracks the font the reader actually
   * got - which on this page may be Inter or may be the platform face. */
  --wrap: 1120px;

  /* TYPE. Inter first, then the system stack. perkusai self-hosts five woff2 files to guarantee
   * Inter; this page cannot - it ships two files and adding a font directory is out of scope -
   * and manapensija does not either, so this is the sibling behaviour: Inter for the readers who
   * have it, the platform UI face for everyone else. Both are humanist sans with the same
   * proportions, so the layout does not move. No @font-face means no third-party request, which
   * matters more here than a guaranteed glyph: a service selling verifiability does not leak its
   * visitors to a font CDN. */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

/* DARK MODE IS A PALETTE SWAP AND NOTHING ELSE. Light is the default and the design is drawn for
 * light; this block exists because the page used to be dark and somebody has the preference set.
 * The dark ground is warm (perkusai's #14120f family) rather than the blue-black most dark modes
 * use, so that a reader who flips the system switch sees the same page, not a different one. */
/* DARK MODE IS A PALETTE SWAP AND NOTHING ELSE, AND IT IS OPT-IN.
 *
 * This used to be `@media (prefers-color-scheme: dark)`, which meant the page followed the
 * operating system - so a reader whose laptop is dark had never once seen the design as it
 * was drawn, which is exactly how the owner came to review a light page and be shown a dark
 * one. The palette was built for light, so light is what an unconfigured visitor gets, and
 * dark is a choice made with the header toggle and remembered by theme.js.
 *
 * KEYED ON AN ATTRIBUTE, NOT A MEDIA QUERY. theme.js sets [data-theme] on <html> before the
 * first paint. A reader with no JavaScript gets light and no toggle - which is the default
 * anyway, so nothing is missing but the choice.
 *
 * The dark ground stays warm (perkusai's #14120f family) rather than the blue-black most dark
 * modes use, so a reader who flips it sees the same page, not a different one. */
:root[data-theme="dark"] {
  --bg:        #14120f;
  --bg-sand:   #1a1714;
  --surface:   #1d1a16;
  --line:      #3b352c;
  --line-soft: #2a2620;

  --ink:       #f2ede4;
  --ink-soft:  #cfc7b9;
  --ink-mute:  #a9a093;   /* 7.2:1 on --bg */

  --accent:      #6fc9c2;  /* 9.6:1 on --bg. The light teal cannot carry text here. */
  --accent-deep: #96ded8;
  --accent-soft: #123230;
  --accent-line: #2c5451;
  --on-accent:   #0d1211;  /* dark label on a light-teal fill - 9.9:1 */

  --warn:      #e6b76a;
  --warn-soft: #2a2317;
  --warn-line: #4a3c22;

  --foot-bg:     #100e0c;
  --foot-ink:    #b8b1a6;
  --foot-strong: #f2ede4;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.60);
}

/* ------------------------------------------------------------------ base */

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

html {
  /* 100% respects the reader's browser setting instead of overriding it. A lawyer reading statute
   * text all day has usually already made that choice. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;   /* 17px, manapensija's body size - this page is read, not scanned */
  line-height: 1.65;
  /* Long Lithuanian compounds (nekilnojamojo, administravimo) overflow a 320px viewport if they
   * are never allowed to break. */
  overflow-wrap: break-word;
}

/* The page must stay readable with CSS disabled, so structure carries the meaning and everything
 * below is only ever presentation. Nothing here hides content that has no other route to the
 * reader - which is also why the FAQ is headings and paragraphs rather than <details>. */

/* TYPE SCALE. h1 lands at 52px / 700 at 1440 and drops to 32px by 375, which puts it between
 * manapensija's 49.6px and perkusai's 57.6px - the same headline voice, one step quieter because
 * this headline is a question and questions do not shout. h2 and h3 are manapensija's clamps
 * unchanged. The -0.02em tracking at display sizes is common to both sites. */
h1, h2, h3, h4 {
  margin: 0 0 var(--s-3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.25rem); line-height: 1.14; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); letter-spacing: -0.01em; }

p, ul, ol, dl, table { margin: 0 0 var(--s-4); }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: var(--s-2); }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--accent-deep); text-decoration-thickness: 2px; }

/* VISIBLE FOCUS, on everything, always. Removing this is the single most common way a page like
 * this becomes unusable by keyboard. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.9375em; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* Inline code in running prose. Both reference sites tint their code spans; this one is a
 * hairline plate so a command name inside a sentence reads as a token, not as emphasis. */
p > code, li > code, dd > code, td > code {
  /* Tight sides. A code span in this page's prose is usually followed by a comma or a colon, and
   * generous horizontal padding opens a gap that reads as a typo. */
  padding: 0.1em 0.25em;
  background: var(--bg-sand);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  /* ALLOWED TO WRAP. The longest of these spans is the 41-character Authorization header, and
   * holding it on one line pushed the whole page 41px wider than a 375px phone. box-decoration-
   * break: clone is what makes a wrapped chip survive it - without it the second fragment loses
   * its padding and its rounded end and the span reads as two different things. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --------------------------------------------------------------- icons */

/* The icon sprite lives at the top of <body> as one hidden <svg> of <symbol>s, and every icon on
 * the page is a <use> pointing into it. No file, no request, no icon font, no JavaScript.
 *
 * WHY THE SPRITE IS SIZED TO ZERO IN THE MARKUP AND NOT HERE: with CSS disabled an <svg> with no
 * intrinsic size paints at 300x150, so the sprite would open the page with a blank grey slab.
 * width="0" height="0" as ATTRIBUTES survives a missing stylesheet. Same reason every <use> site
 * carries width/height attributes as well as the class below. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.i {
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
}

/* The rounded plate an icon sits on. perkusai's device, and the reason its feature list reads as
 * a product rather than as bullet points: the plate gives an icon a body, so a card has an object
 * at the top instead of a decoration. */
.plate {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.plate--warn { background: var(--warn-soft); color: var(--warn); }

/* ------------------------------------------------------------ skip link */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (max-width: 40em) {
  .wrap { padding-inline: var(--s-4); }
}

/* Measures in ch, which is how both reference sites set them: a line length is a count of
 * characters, and ch tracks the font the reader actually got. */
.prose    { max-width: 64ch; }
.measure  { max-width: 68ch; }

.section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

/* The band. Sections alternate plain / sand all the way down, so no two neighbours ever touch on
 * the same ground and the page never needs a horizontal rule to say "new topic". */
.section--sand {
  background: var(--bg-sand);
  border-block: 1px solid var(--line);
}

/* An anchored target must not land under the sticky header - and only where the header is
 * actually sticky, which is the same 48em breakpoint. Below it the header scrolls away and this
 * margin would just throw away a screenful of a phone. */
@media (min-width: 48em) {
  [id] { scroll-margin-top: 5.5rem; }
}

/* --------------------------------------------------------- section head */

/* label + heading + one-line sub. The eyebrow label is perkusai's .section-label (uppercase,
 * 0.08em tracking, accent) and the constrained sub is manapensija's .section-head. Together they
 * are what makes a heading look like a section heading rather than like bold text. */
.section__head {
  max-width: 62ch;
  margin-bottom: var(--s-6);
}
.section__label {
  margin: 0 0 var(--s-2);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.section__head h2 { margin-bottom: var(--s-3); }
.section__sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.subhead {
  margin-top: var(--s-7);
  margin-bottom: var(--s-4);
}

/* --------------------------------------------------------------- header */

.site-head {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* STICKY ONLY WHERE THERE IS ROOM. Both reference sites pin their header and both hide the nav
 * behind a JavaScript toggle below 48em. This page has no JavaScript of its own to spend on a
 * menu button, so the nav wraps to a second line instead - and a two-line header that is also
 * pinned would eat a third of a phone screen. Below 48em it scrolls away like normal content. */
@media (min-width: 48em) {
  .site-head {
    position: sticky;
    top: 0;
    z-index: 50;
    /* The translucent-plus-blur header is the one piece of chrome both sibling pages share
     * exactly. The alpha is high enough that a browser without backdrop-filter still gets a
     * legible bar rather than statute text sliding through it. */
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }
}

.site-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  min-height: 4.25rem;
  padding-block: var(--s-2);
}

/* The two controls on the right are one cluster, not two flex items. Without this the toggle
 * wraps onto a second line under the language switch as soon as the nav gets wide - which is
 * what it did, because `.site-head__inner` is `flex-wrap: wrap` and they were siblings. */
.head-tools {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.theme-slot { display: flex; }

.brand {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* A flex row of exactly two items: the mark, then the whole wordmark. Both pages wrap the word in
 * <span class="brand__word"> for that reason - loose text either side of the accent dot would be
 * three flex items with this gap opened between them, and the brand would read "nodo . lt". */
.brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
}
/* The wordmark carries the favicon: the same bracketed interval, on the same teal tile, at the
 * same corner radius. The tab and the page say one thing.
 *
 * THE THREE LINES OF DEPTH ARE THE WHOLE POLISH and they are worth naming, because "add a
 * gradient" is how a mark like this usually gets ruined. The tile stays one flat teal; what is
 * added is a highlight along the TOP EDGE ONLY (an inset white at 14%, which is how a physical
 * tile catches light) and a contact shadow beneath it. The mark inside is untouched - same
 * geometry, same three shapes, same meaning. At 28px the difference is small and it is the
 * difference between a coloured square and an object. */
.brand__mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(11, 92, 88, 0.28);
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease;
}

/* The mark leads and the word follows, which is the order the eye reads a lockup in. Lifting only
 * the tile keeps the baseline of the word still - a whole lockup that jumps on hover reads as a
 * button, and this is a link home. */
.brand a:hover .brand__mark {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 3px 8px rgba(11, 92, 88, 0.3);
}

.brand a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

/* -0.02em, tighter than the page default. A four-letter wordmark set at body tracking reads as a
 * word in a sentence; a mark wants to read as one object. The dot keeps the accent, which is the
 * third place the same teal appears in the header and the reason the lockup holds together. */
.brand__word { letter-spacing: -0.02em; }
.brand .dot { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .brand__mark, .brand a:hover .brand__mark { transition: none; transform: none; }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  font-size: 0.9375rem;
}
.nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li { margin: 0; }
.nav a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--accent-soft); color: var(--accent); }

.lang { font-size: 0.875rem; }
.lang ul {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.lang li { margin: 0; }
.lang a, .lang [aria-current] {
  display: block;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  text-decoration: none;
}
.lang a { color: var(--ink-soft); }
.lang a:hover { background: var(--accent-soft); color: var(--accent); }
.lang [aria-current] {
  background: var(--bg-sand);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}

/* MEASURED: left to wrap, the header is 183px tall on a 375px phone - three stacked rows before
 * a word of the page. Both reference sites solve this with a JavaScript menu button and this page
 * has no script of its own to spend on one, so the section links become one row that scrolls
 * sideways instead. Nothing is hidden and nothing needs JavaScript; the row is pulled out to the
 * screen edges so the overflow reads as a swipe rather than as a clipped list. */
@media (max-width: 48em) {
  .site-head__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand lang"
      "nav   nav";
    align-items: center;
    gap: var(--s-2) var(--s-4);
    min-height: 0;
  }
  .brand { grid-area: brand; }
  .lang  { grid-area: lang; }
  .nav {
    grid-area: nav;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    margin-inline: calc(var(--s-4) * -1);
    padding-inline: var(--s-4);
  }
  .nav ul { flex-wrap: nowrap; }
}

/* ----------------------------------------------------------------- hero */

.hero { padding-block: clamp(2rem, 1.2rem + 3.5vw, 3.5rem) clamp(2rem, 1.2rem + 3vw, 3rem); }

.hero__grid { display: grid; gap: var(--s-7); }

/* A grid item's automatic minimum size is its CONTENT's minimum, not zero, so one unbreakable
 * token anywhere inside a column silently widens the whole page. Every grid on this page that can
 * contain a command, a URL or a date range gets min-width: 0 so the column may shrink and the
 * inner element - which owns an overflow rule of its own - handles the rest. */
.hero__grid > *,
.steps > li,
.faq > div { min-width: 0; }

/* TWO COLUMNS, AND THE ORDER IS DELIBERATE IN BOTH DIRECTIONS.
 *
 * Both reference sites put the working product above the fold - manapensija a live calculator,
 * perkusai a live search with results - and this page had two paragraphs of prose. So the demo
 * gets its own column and runs the full height of the hero.
 *
 * The DOM order is copy -> demo -> command, which is the order a phone gets: headline, then the
 * answer, then how to connect. On a wide screen the grid puts the command back under the copy on
 * the left, where it belongs, without reordering the markup for anyone reading it linearly. */
@media (min-width: 64em) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    /* auto 1fr, and this is load-bearing. The demo spans both rows and is much the taller
     * column; with two auto rows the browser splits its surplus height evenly between them and
     * pushes the connect command a couple of hundred pixels down the page, below the fold on a
     * 900px laptop. Giving row 2 all the slack parks the command directly under the lede where
     * it was drawn to be. */
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 3.5vw, 3.5rem);
    row-gap: var(--s-6);
    align-items: start;
  }
  .hero__copy { grid-column: 1; grid-row: 1; }
  .hero__cta  { grid-column: 1; grid-row: 2; }
  .hero__demo { grid-column: 2; grid-row: 1 / span 2; }
}

/* The pill above the headline. manapensija's .hero__eyebrow, unchanged in shape: it names the
 * thing before the headline asks its question. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  padding: var(--s-1) var(--s-3);
  background: var(--accent-soft);
  border-radius: var(--r-full);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
}

/* 22ch, not 16. The headline used to be a six-word question; it is now a sentence whose last
 * phrase moves, and at 16ch that sentence broke into six stacked fragments. */
.hero h1 { max-width: 22ch; }

/* THE MOVING PHRASE, AT HEADLINE SCALE. Inside the h1 the swap takes a line of its own - the
 * sentence reads "Legal questions in plain language. Answers -" and then the accent phrase lands
 * underneath it, which is where the eye is already going.
 *
 * `white-space: normal` here and not `nowrap`: at 3.25rem the longest alternative is wider than
 * the hero column, and the grid still reserves the tallest and widest cell, so a two-line phrase
 * taking over from a one-line phrase does not move anything below it. */
.hero h1 .swap {
  display: grid;
  margin-top: 0.15em;
  vertical-align: baseline;
}

.hero h1 .swap > b {
  font-weight: inherit;
  white-space: normal;
}

.lead {
  max-width: 56ch;
  margin-bottom: var(--s-4);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  color: var(--ink-soft);
}
.lead--first { color: var(--ink); }

/* --------------------------------------------------------------- trust */

/* The row of checked facts closing the hero. manapensija's .hero__trust: three claims the page
 * proves further down, each with the accent tick, on one line. It is the cheapest way to make a
 * page look measured rather than written. */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin: var(--s-7) 0 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.trust li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
}
.trust .i { color: var(--accent); margin-top: 0.15em; }

/* ------------------------------------------------------- connect command */

/* The demo's heading is a real <h2> - it is the section that used to sit below the fold, and its
 * id is still #pavyzdys so an old link lands on it - but inside the hero it is titling an object,
 * not opening a section, and at the full h2 size it argues with the h1 two columns away. Sized to
 * a card title. The section headings further down keep the full scale. */
.hero__demo h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.55rem);
  margin-bottom: var(--s-2);
}
.hero__demo .answer { margin-top: var(--s-4); }

.connect__label,
.demo__label {
  display: block;
  margin: 0 0 var(--s-2);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.cmd {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 34rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cmd pre {
  flex: 1 1 auto;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  /* WRAPPED, WITH A HANGING INDENT, and this replaces an earlier decision to scroll instead.
   * Measured: the command needs 546px of text and the hero's left column gives it 404, so a
   * non-wrapping box hides `https://mcp.nodo.lt/mcp` - the one part of the line a reader is here
   * to see - behind a horizontal scrollbar. pre-wrap breaks only at the spaces that are already
   * in the string, so nothing is inserted and the copy is byte-identical either way; the
   * continuation indent is the ordinary shell convention and stops two lines reading as two
   * commands. overflow-wrap is forced back to normal because body sets break-word, which would
   * otherwise be free to split the URL down the middle. */
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
  padding-left: calc(var(--s-4) + 1.6em);
  text-indent: -1.6em;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}
.cmd pre code { font-size: inherit; }
.cmd .flag { color: var(--ink-mute); }
.cmd .host { color: var(--accent); font-weight: 650; }

/* Injected by copy.js as the last child of .cmd. It does not exist in the HTML, so a reader with
 * JavaScript off never sees a button that would not work - they see the command, which is
 * selectable text. Filled in the accent because on this page it is the primary action. */
.copy {
  flex: none;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  padding-inline: var(--s-4);
  cursor: pointer;
}
.copy:hover { background: var(--accent-deep); }
.copy[data-state="done"] { background: var(--accent-deep); }

/* On a phone the button beside the command steals the width the URL needs, and the URL is the
 * one token that must not be broken. Below 30em it goes underneath and takes the full width,
 * which also makes it a comfortable tap target. */
@media (max-width: 30em) {
  .cmd { flex-wrap: wrap; }
  .cmd pre { flex: 1 1 100%; }
  .copy {
    width: 100%;
    padding-block: var(--s-3);
    border-top: 1px solid var(--line);
  }
}

.connect__note {
  max-width: 60ch;
  margin: var(--s-3) 0 0;
  font-size: 0.875rem;
  color: var(--ink-mute);
}

/* --------------------------------------------------------- answer card */

/* THE DEMONSTRATION, and the reason the page exists in this shape. Everything inside is a real
 * response from the running server, so the styling job is to render the parts as the parts they
 * are - a window is a window, a warning is a warning, a verify link is a link - and then let the
 * statute text look like statute text. */

.answer {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.answer__head {
  padding: var(--s-4) var(--s-5);
  background: var(--bg-sand);
  border-bottom: 1px solid var(--line);
}
.answer__who {
  display: block;
  margin: 0 0 var(--s-1);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.answer__q {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.answer__body { padding: var(--s-5); }

/* THE VALIDITY WINDOW. This is the product in one line, so it gets the most colour on the page:
 * the accent plate, the accent bracket mark, and the two dates in monospace because they are the
 * part a reader will compare against the register by eye. */
.window {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  color: var(--ink);
}
.window > .i { color: var(--accent); margin-top: 0.2em; }
.window p { margin: 0; }
/* The two dates are each nowrap (see .nb in the markup) but the phrase between them is allowed to
 * break. Holding the whole range on one line gave this block a 334px minimum, which was the
 * single widest thing on the page and pushed a 375px phone into horizontal scroll. */
.window .dates {
  font-family: var(--mono);
  font-weight: 650;
  color: var(--accent);
}
.window .asof {
  display: block;
  margin-top: var(--s-1);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* THE WARNING, treated as a warning: its own plate, its own border, its own colour, the icon that
 * means "read this". Amber and not red - see --warn. */
.warn {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  color: var(--warn);
}
.warn > .i { margin-top: 0.15em; }
.warn p { margin: 0; }
.warn strong { font-family: var(--mono); font-weight: 700; }

.verify {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-size: 0.875rem;
}
.verify > .i { color: var(--accent); margin-top: 0.2em; }
.verify p { margin: 0; }
.verify .k {
  display: block;
  font-weight: 650;
  color: var(--ink);
}
.verify a {
  font-family: var(--mono);
  font-size: 0.8125rem;
  /* Register URLs carry a 32-character hash. Let it break rather than blow out 320px. */
  overflow-wrap: anywhere;
}
.verify .note {
  display: block;
  margin-top: var(--s-1);
  color: var(--ink-mute);
}

/* The payload. Sunk onto the sand so it reads as quoted material rather than as this page's own
 * words - which is exactly what it is. */
.statute {
  padding: var(--s-4);
  background: var(--bg-sand);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
}
.statute h3 {
  margin: 0 0 var(--s-2);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
}
.statute p { margin: 0; color: var(--ink-soft); }
.statute .snip {
  display: block;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

.answer__foot {
  margin: var(--s-4) 0 0;
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

.caption {
  margin: var(--s-3) 0 0;
  font-size: 0.875rem;
  color: var(--ink-mute);
}

/* ---------------------------------------------------------------- cards */

.cards {
  display: grid;
  /* min() so the track floor never exceeds the viewport - a bare minmax(16rem, 1fr) is 256px
   * wide even inside a 288px phone gutter, which is how a card grid becomes a horizontal
   * scrollbar. Same guard on every auto-fit grid below. */
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  margin: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.card .plate { margin-bottom: var(--s-4); }
.card h3 {
  margin-bottom: var(--s-2);
  font-size: 1.0625rem;
}
.card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- stats */

/* manapensija's stat tiles: a bordered card, one big tabular figure in the accent, one muted
 * caption under it. Every number here was measured; tabular-nums is what stops six-digit figures
 * from looking approximate. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--s-4);
  margin: 0 0 var(--s-6);
}
.stats > div {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
/* The figure is the point, so it is painted first and the label follows it. The DOM keeps
 * dt-before-dd because that is what a definition list means. */
.stats dd {
  order: 1;
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stats dt {
  order: 2;
  margin-top: var(--s-2);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-mute);
}

/* ---------------------------------------------------------------- table */

/* The tool list really is a table - eight rows, three columns, one of them money - so it is one.
 * manapensija's .table-scroll wrapper: the border and radius belong to the box, not the table, so
 * a narrow screen scrolls the rows sideways inside a card instead of tearing the layout open. */
.table-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

table.data {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
table.data th,
table.data td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
table.data thead th {
  background: var(--bg-sand);
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
table.data tbody th {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--accent);
  white-space: nowrap;
}
table.data tbody tr:last-child th,
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.what { min-width: 22ch; color: var(--ink-soft); }
table.data td.cost { white-space: nowrap; }

/* The price column reads at a glance: free is a filled chip, billed is plain text. Nothing else
 * on the page uses the accent as a fill except the copy button and the step numbers, so the eye
 * finds the four free tools immediately. */
.tag {
  display: inline-block;
  padding: 0.1rem var(--s-3);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.tag--free { background: var(--accent-soft); color: var(--accent); }
.tag--paid { color: var(--ink-mute); font-family: var(--mono); font-size: 0.75rem; }

/* ----------------------------------------------------------- act chips */

/* Fifty-eight acts is an inventory, and perkusai renders inventory as chips. A three-column list
 * of the same names reads as a table of contents; chips read as stock, which is the honest
 * impression - this is what is on the shelf. They wrap rather than truncate because the longest
 * name on the list is 58 characters and truncating a statute's name is not an option. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
}
.chips li {
  margin: 0;
  padding: 0.3rem var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- limits */

/* Four honest limits. Cards, not bullets, because a limit a reader skims past is a limit that
 * gets discovered after connecting - which is precisely what the copy says it is trying to
 * avoid. Each one gets the icon of the thing it is a limit on. */
.limits {
  display: grid;
  /* 26rem, not 20: at the page's full width 20rem fits three across and there are four limits, so
   * the fourth sits alone on a second row looking like an afterthought. Two columns give a 2x2. */
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.limits > li {
  display: flex;
  gap: var(--s-4);
  margin: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.limits .plate {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-sm);
}
.limits p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }
.limits strong {
  display: block;
  margin-bottom: var(--s-1);
  font-size: 1rem;
  color: var(--ink);
}

/* ------------------------------------------------------------------ faq */

/* Headings and paragraphs, always open.
 *
 * WHY NOT <details>, which is what perkusai uses and what this section is shaped for: every one
 * of these answers is repeated verbatim in the FAQPage JSON-LD in the <head>, and this site's own
 * rule is that nothing may be claimed in markup that a reader cannot see. A collapsed answer is
 * the same claim behind a click. The rule costs a little vertical space and is worth it. */
.faq {
  display: grid;
  gap: var(--s-3);
  max-width: 78ch;
}
.faq > div {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.faq h3 {
  margin: 0 0 var(--s-2);
  font-size: 1.0625rem;
}
.faq p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }

/* --------------------------------------------------------------- steps */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--s-5);
  max-width: 68ch;
  margin: 0 0 var(--s-6);
  list-style: none;
  padding: 0;
}
.steps > li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding-left: 3.5rem;
  min-height: 2.5rem;
}
/* The numeral is drawn by the counter rather than written in the markup, so the numbering cannot
 * drift out of step with the list if a step is inserted. */
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.steps strong { display: block; margin-bottom: var(--s-2); }

pre.block {
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* A short note that needs to be read before it is acted on, but is not a warning about the data.
 * Used for the "do not use --transport sse" paragraph. */
.note {
  display: flex;
  gap: var(--s-3);
  max-width: 68ch;
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  background: var(--bg-sand);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.note > .i { color: var(--ink-mute); margin-top: 0.2em; }
.note p { margin: 0; }
.note p + p { margin-top: var(--s-2); }

/* --------------------------------------------------------------- footer */

.site-foot {
  background: var(--foot-bg);
  color: var(--foot-ink);
  padding-block: var(--s-7) var(--s-6);
  font-size: 0.9375rem;
}
.site-foot p { max-width: 74ch; }
.site-foot a { color: var(--foot-strong); }
.site-foot .disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--foot-strong);
  font-size: 1.0625rem;
  font-weight: 600;
}
.site-foot .disclaimer .i { margin-top: 0.2em; }
.site-foot .disclaimer p { margin: 0; }
.site-foot__end {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
.site-foot__end li { margin: 0; }

/* ------------------------------------------------------------ utilities */

/* body sets overflow-wrap: break-word so that Lithuanian compounds survive a 320px viewport, and
 * a browser will happily take the same licence with an ISO date - "2026-\n08-24". On a page whose
 * entire claim is that it tells you which dates a text is true between, a date broken over two
 * lines is the one thing that must not happen. Applied to every date that is not already inside a
 * nowrap element. */
.nb { white-space: nowrap; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print: a lawyer forwarding this to a colleague should get the substance, not the chrome. */
@media print {
  .site-head, .copy, .skip, .sprite, .plate, .eyebrow { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
  .section--sand { background: none; }
  .verify a::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .answer, .card, .limits > li, .faq > div, .table-scroll, .cmd, pre.block {
    box-shadow: none;
    border: 1px solid #999;
  }
  .section { page-break-inside: avoid; border-top: 1px solid #ccc; }
  .site-foot { background: none; color: #000; }
  .site-foot a { color: #000; }
}

/* ------------------------------------------------- theme toggle */

/* Built by theme.js and appended into [data-theme-toggle], so it exists only for a reader who
 * can use it. Sized and shaped like the language switch beside it rather than like a primary
 * action - it changes how the page looks, not what it says. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  /* Only the colours move. Transitioning the whole page on a theme change is the thing that
   * makes a toggle feel slow, and `prefers-reduced-motion` readers get none of it. */
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.theme-toggle:hover {
  border-color: var(--accent-line);
  color: var(--accent);
  background: var(--accent-soft);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}

/* ======================================================================================
 * PART TWO - THE COMMERCIAL PAGE.
 *
 * Everything above this line was written when nodo.lt was a README with a stylesheet: it
 * explained the service and stopped. This half is what turns it into something a person can
 * buy - plans, the people it is for, the proof that it works, and the three minutes between
 * landing here and having it answer a question.
 *
 * TWO RULES CARRIED DOWN FROM ABOVE, because they are the ones that break silently.
 *   1. NO style="" AND NO INLINE <script>. `style-src 'self'; script-src 'self'`. Every visual
 *      decision is in this file; every behaviour is in motion.js, copy.js or theme.js.
 *   2. NOTHING LOAD-BEARING MAY EXIST ONLY IN CSS. A price that lives in a ::before, a heading
 *      drawn as a background, a section revealed by :target - all invisible to a crawler, to a
 *      screen reader and to `test_the_page_still_reads_with_the_stylesheet_switched_off`.
 *
 * AND ONE NEW ONE, which is what this whole half rests on:
 *   3. MOTION IS AN ENHANCEMENT AND IS NEVER THE THING ITSELF. Every animated number is written
 *      out in the markup at its final value and counted UP TO that value; every revealed block is
 *      visible until JavaScript says otherwise (`html[data-js]`); every looping ribbon holds real
 *      text that is in the DOM whether it moves or not. A reader with JavaScript off, a crawler,
 *      and a reader who set `prefers-reduced-motion` all get the same page, still.
 * ====================================================================================== */

/* ------------------------------------------------------------------ buttons */

/* THE PAGE HAD NO BUTTON UNTIL NOW and that was the single largest thing wrong with it: the only
 * clickable affordance above the fold was a copy-to-clipboard on a shell command, which asks a
 * reader to already be a developer with a terminal open. A landing page that wants to be bought
 * from needs one obvious next move.
 *
 * ONE FILLED BUTTON PER SCREEN, and the accent is what fills it. The teal is the same hue the
 * validity plate uses, so the thing you click and the thing you are buying are the same colour. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
              transform .15s ease, box-shadow .15s ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
/* `color` IS REPEATED HERE AND IT IS NOT REDUNDANT - leaving it out made the label vanish.
 * A `.btn` is an `<a>`, and the global `a:hover` two hundred lines up sets
 * `color: var(--accent-deep)`. Specificity: `a:hover` is (0,1,1) and `.btn--primary` is (0,1,0),
 * so the link rule wins the colour while THIS rule wins the background - and both land on
 * `--accent-deep`. The result is the same colour on the same colour: a solid green lozenge with
 * no text on it, in both themes, on the one button that says "Pradėti nemokamai".
 * `.btn--ghost:hover` never had the bug because it always named its own colour. */
.btn--primary:hover {
  background: var(--accent-deep);
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }

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

.btn .i { flex: none; }

/* The pair under the hero copy. Wraps on a phone rather than shrinking, because a button that
 * has been squeezed below its label reads as broken. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.hero__reassure {
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

/* ----------------------------------------------------------- reveal on scroll */

/* THE OPT-IN IS `html[data-js]`, SET BY theme.js BEFORE FIRST PAINT. Without it these rules do
 * not apply at all, so a reader with JavaScript disabled gets a fully visible page rather than a
 * blank one - which is the failure mode of every scroll-reveal library ever shipped.
 *
 * The transform is 10px and the easing decelerates hard. Anything larger reads as a page
 * assembling itself, which on a service selling reliability is the wrong feeling entirely. */
html[data-js] .reveal {
  opacity: 0;
  transform: translateY(10px);
}
html[data-js] .reveal.is-in {
  animation: rise .55s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* THE ESCAPE HATCH, AND IT IS NOT THE SAME RULE WITH A SHORTER DURATION. `.is-in` asks for an
 * ANIMATION to reach opacity 1, and an animation is exactly the thing a browser declines to run in
 * a backgrounded tab - so the class lands, the animation never advances, and the element sits at
 * the `opacity: 0` above it forever. Measured: seventeen blocks of this page, invisible.
 *
 * `.is-set` states the end position outright, with no animation to schedule and nothing to
 * throttle. motion.js uses it for every case where nobody can be watching anyway. */
html[data-js] .reveal.is-set {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* A stagger, so a row of four cards arrives as a row rather than as four simultaneous cards.
 * Set as a custom property by motion.js from the element's index within its group. */
html[data-js] .reveal.is-in { animation-delay: calc(var(--stagger, 0) * 70ms); }

/* --------------------------------------------------------------- live badge */

/* The dot that says the number next to it came from a machine that is up. It pulses, and the
 * pulse is the only thing on this page that loops forever - everything else runs once. */
.live {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: ping 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(11, 92, 88, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(11, 92, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(11, 92, 88, 0); }
}

:root[data-theme="dark"] .live::before { animation-name: ping-dark; }
@keyframes ping-dark {
  0%   { box-shadow: 0 0 0 0 rgba(111, 201, 194, .40); }
  70%  { box-shadow: 0 0 0 7px rgba(111, 201, 194, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 201, 194, 0); }
}

/* ------------------------------------------------------- the answering demo */

/* THE HERO ANSWER, ANIMATED. The markup is the finished answer - the same elements as before,
 * every word present in the DOM - and motion.js replays it: the question types itself, then the
 * four parts of the answer arrive in the order the server produces them. Turn JavaScript off and
 * the whole answer is simply there, which is what a crawler and a screen reader see anyway.
 *
 * `data-typing` is written by the script onto the question element while it is typing, so the
 * caret exists for exactly as long as the typing does. */
.answer__q[data-typing]::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: caret 1s steps(1, end) infinite;
}

@keyframes caret {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* The staged parts. Hidden only under [data-js] and only until their turn, and `.is-shown` is
 * added by the script - never by a :target or a :checked, both of which would hide content from
 * a reader with no stylesheet. */
html[data-js] .answer__body[data-staged] > * {
  opacity: 0;
  transform: translateY(6px);
}
html[data-js] .answer__body[data-staged] > .is-shown {
  animation: rise .45s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* The whole card lifts a little while it is working, then settles. A one-pixel move: enough to
 * register, not enough to be a bounce. */
.hero__demo .answer { transition: box-shadow .4s ease; }
.hero__demo .answer[data-working] { box-shadow: var(--shadow-lg); }

/* The replay control. Sits under the card as a quiet text button, because replaying is a thing
 * one reader in twenty wants and nineteen should not have to look at. */
.demo__replay {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-mute);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.demo__replay:hover { color: var(--accent); border-color: var(--accent-line); }
.demo__replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ personas */

/* WHO THIS IS FOR, said in their words rather than in ours. Each card names a job and the
 * question that job asks, because the fastest way for a reader to know whether a service is for
 * them is to see their own question written down by somebody else. */
/* 19rem AND NOT 15rem, and the number is arithmetic rather than taste. There are six of these.
 * At the 1120px wrap a 15rem minimum fits four across, which lays six cards out as four and then
 * a stranded two - a row that reads as "we ran out" rather than as a set. 19rem forces three, so
 * six become two full rows of three at desktop, three rows of two on a tablet and one column on a
 * phone. If a seventh persona is ever added, this number is the thing to reconsider. */
.personas {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.personas > li {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.personas > li:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.personas h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.personas .persona__q {
  margin: 0;
  padding-left: var(--s-4);
  border-left: 2px solid var(--accent-line);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-style: italic;
}

.personas .persona__a {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-mute);
}

.personas .plate { width: 2.25rem; height: 2.25rem; }

/* ------------------------------------------------------------- capability flow */

/* THE EIGHT TOOLS AS ONE MOVEMENT. A table tells you what exists; this shows the order a real
 * question goes through - find the act, list its editions, fetch the article, check it is still
 * good. motion.js walks the highlight along the row on a timer and on hover, so a reader watching
 * for four seconds learns the sequence without reading anything.
 *
 * It degrades to a plain ordered list of four steps with all four descriptions visible. */
.flow {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  counter-reset: flow;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.flow > li {
  position: relative;
  margin: 0;
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.flow > li[data-active] {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

/* The connecting rule between steps, drawn only where there is a next step to connect to and
 * only when the row is actually a row. Decorative: the ordering is in the <ol>. */
@media (min-width: 56em) {
  .flow > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--s-4) * -1 - 1px);
    width: var(--s-4);
    height: 1px;
    background: var(--line);
  }
}

.flow__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--s-3);
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: background-color .3s ease, color .3s ease;
}

.flow > li[data-active] .flow__n { background: var(--accent); color: var(--on-accent); }

.flow h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.flow p { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }

.flow .tag { margin-top: var(--s-3); }

/* ------------------------------------------------------------------- counters */

/* The number is written out in the markup at its final value; the script counts up to it and
 * puts the exact original string back at the end. So the page states the figure whether or not
 * anything runs, which is what `test_every_figure_in_the_structured_data_is_also_in_the_visible_text`
 * reads and what a crawler indexes.
 *
 * `font-variant-numeric: tabular-nums` matters more here than anywhere else on the page: without
 * it a counting number changes width on every frame and the card jitters. */
.count { font-variant-numeric: tabular-nums; }

.stats dd .count { display: inline-block; }

/* --------------------------------------------------------------- act ribbon */

/* WHAT IS IN THE CATALOGUE, MOVING. Two identical tracks side by side, the second aria-hidden,
 * translated by exactly -50% so the seam lands where the first track's copy begins. Real act
 * names, in the DOM, linked to the full list.
 *
 * The mask fades both ends so names do not appear to be cut off by the viewport edge - the one
 * visual trick here that a reader would notice if it were missing. */
.ribbon {
  position: relative;
  margin-top: var(--s-5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ribbon + .ribbon { margin-top: var(--s-3); }

.ribbon__track {
  display: flex;
  width: max-content;
  gap: var(--s-3);
  animation: slide 64s linear infinite;
}

/* The second row runs the other way, so the band reads as a body of material rather than as a
 * single conveyor belt. */
.ribbon--back .ribbon__track { animation-direction: reverse; animation-duration: 78s; }

.ribbon:hover .ribbon__track,
.ribbon:focus-within .ribbon__track { animation-play-state: paused; }

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ribbon__track > span {
  flex: none;
  padding: 0.4375rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ------------------------------------------------------------------- plans */

/* PRICING. Four columns on a desktop, one per screen on a phone, and the recommended one is
 * raised rather than recoloured - a differently coloured card in a row of four reads as a
 * different product, not as the same product recommended.
 *
 * `align-items: stretch` plus a flex column inside each card is what keeps the four buttons on
 * one line across the row when the feature lists are different lengths. */
.plans {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}

/* THE FOUR CARDS HAVE TO LINE UP ROW BY ROW, and getting that wrong is what makes a price table
 * look improvised. Four things push a row out of line and each is pinned below: the recommended
 * card's flag, a one-line description next to a three-line one, a price that wraps, and feature
 * lists of different lengths.
 *
 * `position: relative` and `padding-top` reserve the flag's row on EVERY card, so the four <h3>
 * elements start at the same y whether or not their card carries a flag. */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: calc(var(--s-5) + 1.5rem) var(--s-5) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.plan:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.plan--pick {
  border-color: var(--accent);
  border-width: 1.5px;
  box-shadow: var(--shadow-md);
}

.plan__flag {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  padding: 0.1875rem 0.625rem;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan h3 {
  margin: 0 0 var(--s-1);
  font-size: 1.0625rem;
}

/* Three lines reserved, because the longest of the four descriptions is three lines at the
 * narrowest column this grid produces. A shorter one pads out and the prices below stay level. */
.plan__who {
  margin: 0 0 var(--s-4);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-mute);
  min-height: 4.35em;
}

.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

/* `nuo` / `from` at body size rather than at 36px. Set large it took a line of its own and pushed
 * "/ mėn." onto a third, so the Institution card's price block stood two lines taller than the
 * other three and every row below it was out of step. */
.plan__price .from,
.plan__price .per {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-mute);
}

.plan__vat {
  margin: var(--s-2) 0 var(--s-4);
  font-size: 0.75rem;
  color: var(--ink-mute);
}

.plan__quota {
  margin: 0 0 var(--s-4);
  padding: var(--s-3);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

.plan ul {
  flex: 1;
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2);
}

.plan ul li {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  gap: var(--s-2);
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.plan ul .i { color: var(--accent); margin-top: 0.2em; }
.plan ul .i--no { color: var(--ink-mute); }

.plan .btn { width: 100%; }

/* The line under the row that says what a unit is. It is the one number a buyer has to
 * understand and it does not belong inside any single card. */
.plans__note {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.plans__note strong { color: var(--ink); }

/* ---------------------------------------------------------------- guarantee */

/* THIRTY DAYS. Given its own plate rather than a bullet in a plan, because it is the sentence
 * that removes the last reason not to try, and a reader skimming prices has to hit it. */
.guarantee {
  display: grid;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
}

@media (min-width: 42em) {
  .guarantee { grid-template-columns: auto 1fr; gap: var(--s-5); }
}

.guarantee__seal {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  text-align: center;
  line-height: 1.1;
}

.guarantee__seal .n {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.guarantee__seal .u {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guarantee h3 { margin: 0 0 var(--s-2); font-size: 1.0625rem; color: var(--accent); }
.guarantee p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); max-width: 62ch; }
.guarantee p + p { margin-top: var(--s-2); }

/* ---------------------------------------------------------------- comparison */

/* WHAT ELSE A READER COULD DO INSTEAD, including the free option, named. A comparison that
 * omits the free official register would be the kind of table nobody believes. */
.compare td .i, .compare th .i { vertical-align: -0.15em; }
.compare .yes { color: var(--accent); }
.compare .no  { color: var(--ink-mute); }
.compare .part { color: var(--warn); }
/* BACK TO THE BODY FACE. `.data tbody th` is monospace because in the tools table a row header IS
 * a tool name - `get_article` - and monospace is what says "type this exactly". Here a row header
 * is a sentence in Lithuanian, and the inherited rule set "Galiojimo laikotarpis prie teksto" in a
 * code font, which reads as an identifier the reader is supposed to recognise. */
/* `table.data.compare`, NOT `.compare`. The base rule is `table.data tbody th` - one class and
 * three elements - so a plain `.compare tbody th` loses on specificity no matter where it sits in
 * the file. This was written once as `.compare` and reported as fixed while the row headers stayed
 * in a code font; the lesson is that a CSS override needs to be looked at, not reasoned about.
 *
 * `white-space: normal` because the base rule sets `nowrap` for tool names, and these row headers
 * are sentences that have to be allowed to wrap. */
table.data.compare tbody th {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0;
  white-space: normal;
  color: var(--ink);
}
.compare .us { background: var(--accent-soft); }
.compare thead .us { border-radius: var(--r-sm) var(--r-sm) 0 0; }

/* ---------------------------------------------------------------------- tabs */

/* THE THREE WAYS IN. Claude Code is a terminal command, the connector is a dialogue in a
 * browser, and everything else is a JSON file. They are genuinely different procedures, so they
 * are three panels rather than one long page - but every panel is in the DOM and readable with
 * the stylesheet off, and the tab strip is built by motion.js on top of headings that are already
 * there. No :target, no :checked, nothing that hides content from a crawler. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding: var(--s-1);
  background: var(--bg-sand);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  width: max-content;
  max-width: 100%;
}

:root[data-theme="dark"] .tabs { background: var(--surface); }

.tabs button {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.tabs button:hover { color: var(--accent); }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Only ever set by motion.js, and only on a panel whose sibling is showing. A panel with no
 * script keeps all of them open, which is the correct fallback for a procedure. */
.panel[data-hidden] { display: none; }

.panel > h3:first-child { margin-top: 0; }

/* ------------------------------------------------------- the connector walk */

/* THE VISUAL INSTRUCTION. Three drawn frames of the dialogue a reader is about to see, with the
 * field they have to fill highlighted. Inline SVG rather than screenshots: a screenshot of
 * somebody else's product goes stale the week they redesign it, weighs 200 kB, and cannot follow
 * the page into dark mode. These are drawn from the same tokens as everything else.
 *
 * Each frame carries its instruction as real text underneath, so the sequence works read aloud. */
.walk {
  display: grid;
  gap: var(--s-5);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: walk;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.walk > li { margin: 0; }

.walk figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
}

.walk__frame {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.walk figcaption {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s-2);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.walk figcaption .s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.walk figcaption strong { display: block; color: var(--ink); }

/* The pulse on the field the reader has to fill. Runs three times and stops - a permanent pulse
 * in an instruction diagram is a distraction once you have understood it. */
.walk__frame .hot { animation: hot 1.8s ease-in-out 3; transform-box: fill-box; transform-origin: center; }

@keyframes hot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ------------------------------------------------------------------- authors */

/* WHO BUILT IT. A tool that tells a lawyer what the law said on a date is a claim about
 * competence, and an anonymous claim about competence is worth nothing. Two people, named, with
 * the profile a reader can check. */
.authors {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.authors > li {
  display: flex;
  gap: var(--s-4);
  margin: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* The initials tile. Not a photograph: two photographs would be the heaviest thing on the page
 * and the page loads nothing from anybody. */
.authors .who {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.authors h3 { margin: 0 0 0.125rem; font-size: 1rem; }
.authors .role { margin: 0 0 var(--s-2); font-size: 0.8125rem; color: var(--ink-mute); }
.authors .bio { margin: 0 0 var(--s-3); font-size: 0.875rem; color: var(--ink-soft); }

.authors .li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
}
.authors .li:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ closing */

/* THE LAST SCREEN. Dark, the same ink the footer uses, so the page has an ending before the
 * small print rather than trailing off into it. */
.closer {
  background: var(--foot-bg);
  color: var(--foot-ink);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  text-align: center;
}

/* 30ch, not 20. A measure is a reading control and this heading is not being read - it is being
 * taken in at a glance, centred, as the last thing before the small print. At 20ch the Lithuanian
 * line broke into five stacked fragments and stopped looking like a sentence. */
.closer h2 { color: var(--foot-strong); max-width: 30ch; margin-inline: auto; }
.closer p { color: var(--foot-ink); max-width: 56ch; margin-inline: auto; }
.closer .hero__actions { justify-content: center; }
.closer .btn--ghost { border-color: rgba(246, 242, 234, .3); color: var(--foot-strong); }
.closer .btn--ghost:hover { background: rgba(246, 242, 234, .1); border-color: var(--foot-strong); color: var(--foot-strong); }
.closer .btn--primary { background: var(--foot-strong); color: var(--foot-bg); }
/* Same trap, same repair: on a white fill the label has to be named, or `a:hover` paints it
 * `--accent-deep` and the closing call to action loses its words too. */
.closer .btn--primary:hover { background: #fff; color: var(--accent-deep); }
.closer .closer__note { font-size: 0.8125rem; color: var(--foot-ink); opacity: .8; margin-top: var(--s-4); }

/* ------------------------------------------------------------- the acts page */

/* /aktai and /acts. A different job from the landing page: this one exists to be found. Every
 * act the catalogue serves, named in full, grouped by subject, each linked to its own page in the
 * official register. It is the long tail - somebody searching the exact title of a 1997 statute -
 * and it is generated from `ltlaw.ingest.catalogue`, so it cannot claim an act the server does
 * not hold. */
.acts-intro { margin-bottom: var(--s-6); }

.acts-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-6);
  padding: var(--s-4);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.acts-jump li { margin: 0; }

.acts-jump a {
  display: inline-block;
  padding: 0.3125rem 0.6875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.acts-jump a:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }

.acts-group { margin-bottom: var(--s-7); scroll-margin-top: 5rem; }

.acts-group h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: 1.25rem;
}

.acts-group h2 .n {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-mute);
}

/* `align-items: start` and it is load-bearing. A grid item stretches to its row by default, and
 * these titles are Lithuanian statute names - one of them runs to eight lines - so every card in
 * that row grew to eight lines too and the page filled with tall empty boxes. Each card now hugs
 * its own text and the rows are ragged, which is what a list of names should look like. */
.acts-list {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  align-items: start;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
}

.acts-list > li {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  transition: border-color .15s ease, background-color .15s ease;
}

.acts-list > li:hover { border-color: var(--accent-line); }

.acts-list .t { display: block; color: var(--ink); font-weight: 550; line-height: 1.35; }
.acts-list .t a { color: inherit; text-decoration: none; }
.acts-list .t a:hover { color: var(--accent); text-decoration: underline; }

.acts-list .m {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-1);
  font-size: 0.75rem;
  color: var(--ink-mute);
}

.acts-list .m code {
  font-family: var(--mono);
  font-size: 0.6875rem;
  padding: 0.0625rem 0.3125rem;
  background: var(--bg-sand);
  border-radius: 4px;
}

:root[data-theme="dark"] .acts-list .m code { background: var(--bg); }

.acts-list .gone { color: var(--warn); }

/* --------------------------------------------------------- reduced motion */

/* THE SECOND HALF OF THE PROMISE. The blanket rule near the top of this file kills durations;
 * these turn off the things that would still move or still be hidden if only their duration were
 * shortened - an infinite loop restarted every 0.01ms is a strobe, not a stillness. */
@media (prefers-reduced-motion: reduce) {
  .ribbon__track { animation: none; transform: none; }
  .live::before { animation: none; }
  .answer__q[data-typing]::after { display: none; }
  .walk__frame .hot { animation: none; }
  html[data-js] .reveal,
  html[data-js] .answer__body[data-staged] > * { opacity: 1; transform: none; animation: none; }
  .btn--primary:hover, .plan:hover, .personas > li:hover { transform: none; }
}

/* ---------------------------------------------------------------- print */

@media print {
  .btn, .demo__replay, .tabs, .ribbon, .closer .hero__actions { display: none; }
  .plan, .personas > li, .authors > li, .flow > li, .walk__frame {
    box-shadow: none;
    border: 1px solid #999;
  }
  .closer { background: none; color: #000; }
  .closer h2, .closer p { color: #000; }
  .guarantee { background: none; border: 1px solid #999; }
  .guarantee h3 { color: #000; }
  .panel[data-hidden] { display: block; }
  .acts-list > li { break-inside: avoid; }
}

/* ------------------------------------------------------- the answer deck */

/* THREE ANSWERS, ONE AT A TIME - AND ALL THREE ON THE PAGE WITHOUT JAVASCRIPT. `data-hidden` is
 * set only by motion.js and only when it has built the dots that let a reader get back to the
 * other two. With the script off there is no attribute, no dots, and three worked examples
 * stacked down the column, which is a complete page rather than a broken carousel.
 *
 * A CLASS, NOT THE `hidden` ATTRIBUTE AND NOT AN INLINE display:none. Both of those remove
 * content for everybody - stylesheet on or off, screen reader or not - and
 * `test_nothing_substantial_is_parked_behind_a_hidden_attribute` fails the build for exactly
 * this. The rotation is a stylesheet decision, so it lives in the stylesheet. */
.demo__deck > .answer[data-hidden] { display: none; }

/* BEFORE THE SCRIPT ARRIVES, ONE CARD - and this rule is why the hero is not a wall of text.
 * `motion.js` is deferred, so the browser paints all nine answers stacked, about two screens of
 * it, and only then collapses them to one. On a slow connection that flash is the first thing a
 * visitor sees; if the script never runs it is the only thing. `data-ready` is set by the script
 * AFTER it has hidden the rest, so the two rules never fight over the same frame.
 *
 * `scripting: none` puts every card back for a reader with JavaScript switched off, which is the
 * state this markup was deliberately written open for. A browser too old for that media feature
 * shows one card - less than the nine it used to, and much better than the wall. */
.demo__deck:not([data-ready]) > .answer:not(:first-of-type) { display: none; }

@media (scripting: none) {
  .demo__deck:not([data-ready]) > .answer:not(:first-of-type) { display: block; }
}
.demo__deck > .answer + .answer { margin-top: var(--s-4); }

/* Two colours, one for the sentence that WAS true and one for the sentence that is. This is the
 * whole argument of the first card and it must survive a reader who only skims. */
.statute .was,
.statute .now {
  display: inline-block;
  margin-right: 0.375rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 0.05em;
}
.statute .was { background: var(--warn-soft); color: var(--warn); }
.statute .now { background: var(--accent-soft); color: var(--accent); }
.statute p + p { margin-top: var(--s-3); }

/* The dots and the replay, built by motion.js and therefore styled for an element that may not
 * exist. `justify-content: space-between` keeps the replay at the far end without a spacer div. */
.demo__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}

.demo__nav[data-hidden] { display: none; }

.demo__dots {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* A 10px target is below every guideline, so the button is 22px and the DOT is drawn inside it
 * with a border. The hit area is the button; the mark is the ::before. */
.demo__dots button {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.demo__dots button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .2s ease, transform .2s ease;
}

.demo__dots button:hover::before { background: var(--accent-line); }

.demo__dots button[aria-selected="true"]::before {
  background: var(--accent);
  transform: scale(1.45);
}

.demo__dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .demo__dots button::before { transition: none; }
}

@media print {
  .demo__deck > .answer[data-hidden] { display: block; }
  .demo__nav { display: none; }
}

/* The contact line in the footer. Two addresses rather than one because they answer different
 * questions and a single inbox for both is how a refund request ends up behind forty sales
 * emails. Sits above the link row, since a reader looking for a way to reach a person is looking
 * for a sentence rather than for a nav item. */
.site-foot__contact {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(246, 242, 234, 0.12);
  font-size: 0.875rem;
}

.site-foot__contact a { text-decoration: underline; text-underline-offset: 2px; }

/* The subject chip on each answer. Six cards rotating through six different areas of law only
 * reads as breadth if the reader can see WHICH area without reading the question first - a
 * pensioner scrolling past a card about crypto should know in a glance that the next one might
 * be theirs. Sits in the card head opposite the "Question" label. */
.answer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
}

.answer__head .answer__q { flex-basis: 100%; }

.answer__topic {
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

:root[data-theme="dark"] .answer__topic { background: var(--accent-soft); }

/* ------------------------------------------------------------- the tagline */

/* ONE SENTENCE WHOSE LAST PHRASE MOVES. The claim is complete at every moment: "Answers - with an
 * exact date" reads whole, then becomes "Answers - with the validity window", and so on. A
 * carousel of four slogans would leave half a thought on the screen between beats; this cannot,
 * because only the closing noun phrase is ever in motion.
 *
 * THE ALTERNATIVES ARE ALL IN THE MARKUP and the stylesheet shows the first. It is the one place
 * on this page where CSS hides content on purpose, and it is defensible for a reason worth
 * stating: these four are VARIATIONS ON ONE CLAIM, not four separate facts. A reader who never
 * sees the other three has lost a flourish, not information. With the stylesheet off, all four
 * simply appear in a row - which is why the no-stylesheet test still passes. */
.swap {
  display: inline-grid;
  vertical-align: bottom;
}

/* Stacked in one grid cell, so the paragraph reserves the width of the LONGEST alternative from
 * first paint and the line never reflows as the phrases change under it. */
.swap > b {
  grid-area: 1 / 1;
  color: var(--accent);
  font-weight: 650;
  white-space: nowrap;
}

/* Without JavaScript: the first, and only the first. `visibility` rather than `display` so the
 * grid still reserves the widest cell and nothing shifts if the script arrives late. */
.swap > b + b { visibility: hidden; }

html[data-js] .swap > b { visibility: hidden; opacity: 0; }
html[data-js] .swap > b.is-on {
  visibility: visible;
  animation: swap-in .5s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes swap-in {
  from { opacity: 0; transform: translateY(0.3em); }
  to   { opacity: 1; transform: none; }
}

/* The same escape hatch the reveals use: a class that states the end position outright, with no
 * animation to schedule, for every case where nobody can be watching. */
html[data-js] .swap > b.is-set {
  visibility: visible;
  opacity: 1;
  transform: none;
  animation: none;
}

@media (max-width: 34em) {
  /* On a narrow column the longest phrase would set a width the page cannot hold, so the
   * alternatives are allowed to wrap and the grid stops being a fixed cell. */
  .swap { display: inline; }
  .swap > b { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-js] .swap > b.is-on { animation: none; opacity: 1; }
}

/* ------------------------------------------------------------- author portraits */

/* THE INITIALS TILE BECAME A PHOTOGRAPH, and `.who` now styles an <img> rather than a <span>.
 * The rules that were about text (grid, place-items, font) are inert on a replaced element and
 * are left in the block above rather than deleted, because the initials are the fallback the
 * moment a portrait is removed.
 *
 * `alt=""`, NOT a name. The heading beside each photo already says who this is, so a filled alt
 * would make a screen reader read the same name twice in a row. An empty alt is the correct and
 * meaningful value for an image that repeats its adjacent text - and the attribute is PRESENT,
 * which is what `test_every_image_carries_an_alt_attribute` is really about.
 *
 * `width`/`height` are the intrinsic 480x480, so the browser reserves the square before the file
 * arrives and the card does not jump. CSS then paints it at 3.25rem. */
img.who {
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--accent-soft);
}

/* A hair larger than the initials tile was, because a face needs more room than two letters to
 * read as a person rather than as a bullet. */
.authors .who { width: 3.75rem; height: 3.75rem; }

/* The requirements table inside a connect panel needs a heading of its own, and it is an h4
 * because the panel already opens with an h3 - skipping to h5 or reusing h3 would both break the
 * outline a screen reader reads. Sized just above body text: it is a label for a table, not a
 * section of the page. */
.panel h4 {
  margin: var(--s-6) 0 var(--s-3);
  font-size: 1rem;
  letter-spacing: -0.005em;
}

.panel .table-scroll { margin-bottom: var(--s-4); }

/* The annual option, under the button rather than beside it. A month/year toggle above the row
 * is the conventional pattern and it hides one of the two prices behind a control; a second link
 * shows both at once, which on a four-card row is the shorter path to "how much is it really". */
.plan__alt {
  margin: var(--s-2) 0 0;
  text-align: center;
  font-size: 0.8125rem;
}
.plan__alt a { color: var(--ink-mute); }
.plan__alt a:hover { color: var(--accent); }

/* A ROADMAP TAG, AND THE ONLY ONE ON THE PAGE. It sits beside a limit that is stated plainly -
 * "there is no case law" - and says the limit is known rather than permanent. Deliberately
 * carries no date: a tag that promised a month would be a claim this project cannot check, and
 * the sentence next to it has to stay the honest half of the pair. */
.soon {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.4375rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

/* --------------------------------------------------------------- server status
 *
 * A LIVE BADGE ON AN OTHERWISE STATIC PAGE, and the one place the rule bends. It fetches this
 * host's own `/health/ready` - same origin, no third party, no cookie - and says whether the
 * server is answering. It sits in the connect section because that is where somebody is deciding
 * whether to spend three minutes wiring it up.
 *
 * THE DEFAULT STATE CLAIMS NOTHING. Without JavaScript, or before the fetch lands, the badge
 * reads "Būsena tikrinama" beside a grey dot. A status widget that defaults to "up" is worse than
 * no widget: it is a claim the page cannot back, made loudest at the moment it is wrong. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: var(--s-3) 0 0;
  padding: 0.25rem 0.6875rem 0.25rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-sand);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.status__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink-mute);
  flex: none;
}

.status[data-state="ok"]   { border-color: var(--accent-line); color: var(--accent); }
.status[data-state="ok"]   .status__dot { background: var(--accent); }
.status[data-state="slow"] .status__dot { background: #b8860b; }
.status[data-state="down"] .status__dot { background: #a33a2f; }

/* The client mark inside a tab. `inline-flex` on the button so the mark and the word share a
 * baseline box rather than the image sitting on the text baseline with a descender's gap under
 * it. Sized in ems so it tracks the label if the type scale ever moves. */
.tabs button { display: inline-flex; align-items: center; gap: 0.4375rem; }

.tabs__mark {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  /* The Claude mark is a coloured PNG and keeps its own colour, which is what its guidelines ask
   * for. On the selected tab the fill behind it is the accent, so it is given a touch of contrast
   * rather than being recoloured - a brand mark repainted to match our palette is the one thing
   * both companies' terms rule out. */
  object-fit: contain;
}

/* THE CLIENT MARKS, INLINE. Not a saving of two requests - a fix for the one asset class that
 * could not be cache-busted. Every URL this page references carries `?v=<hash>`, which is what
 * makes a year of `immutable` safe; a mask URL in a static stylesheet cannot carry one. Measured
 * on production: the origin served the new mark while Cloudflare served the old one with
 * `cf-cache-status: HIT` under `max-age=31536000, immutable`. Inline, they version with the
 * stylesheet that holds them.
 *
 * The PNGs remain in `site_files/nodo/` as the reviewable source and are regenerated into these
 * two rules by `scripts/inline_marks.py`. They are no longer served.
 *
 * Claude keeps its own colour, so it is a background image. The OpenAI mark is monochrome by
 * design, so it is a mask filled with `currentColor` - one shape that renders black on the light
 * theme, white on the dark, and `--on-accent` on the selected tab, which are the variants its
 * guidelines prescribe. */
.tabs__mark--claude {
  background: url("data:image/png;base64,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") center / contain no-repeat;
}

.tabs__mark--chatgpt {
  background: currentColor;
  -webkit-mask: url("data:image/png;base64,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") center / contain no-repeat;
  mask: url("data:image/png;base64,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") center / contain no-repeat;
}

.tabs__mark--mistral {
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgzIiBoZWlnaHQ9IjE4MyIgdmlld0JveD0iMCAwIDE4MyAxODMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjMzIiB5PSIzMyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjIzIiBmaWxsPSIjRkZBRjAxIi8+CjxyZWN0IHg9IjMzIiB5PSI1NiIgd2lkdGg9IjQ3IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRkY4MjA0Ii8+CjxyZWN0IHg9IjMzIiB5PSI4MCIgd2lkdGg9IjExOCIgaGVpZ2h0PSIyMyIgZmlsbD0iI0ZBNTAwRiIvPgo8cmVjdCB4PSIxMjciIHk9IjEwMyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRTEwNTAwIi8+CjxyZWN0IHg9IjgwIiB5PSIxMDMiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0UxMDUwMCIvPgo8cmVjdCB4PSIzMyIgeT0iMTAzIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiNFMTA1MDAiLz4KPHJlY3QgeD0iMTA0IiB5PSIxMjciIHdpZHRoPSI3MCIgaGVpZ2h0PSIyMyIgZmlsbD0iI0M0MDAxRCIvPgo8cmVjdCB4PSIxMCIgeT0iMTI3IiB3aWR0aD0iNzAiIGhlaWdodD0iMjMiIGZpbGw9IiNDNDAwMUQiLz4KPHJlY3QgeD0iMTA0IiB5PSI1NiIgd2lkdGg9IjQ3IiBoZWlnaHQ9IjI0IiBmaWxsPSIjRkY4MjA0Ii8+CjxyZWN0IHg9IjEyNyIgeT0iMzMiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyMyIgZmlsbD0iI0ZGQUYwMSIvPgo8L3N2Zz4K") center / contain no-repeat;
}

.tabs__mark--copilot {
  background: url("data:image/png;base64,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") center / contain no-repeat;
}