/* ==================================================================== *
 * kvedo.css. The site's shared stylesheet, since step 2 of
 * KVEDO-SITE-BRIEF.md (2026-09-15). Redrawn on 2026-09-16 to the Claude
 * Design export (DESIGN-BRIEF.md): every colour, size and spacing below
 * is read out of the export's own markup, not from a screenshot.
 *
 * What lives here: the Saule tokens, the two faces and their stand-ins,
 * the base rules, the header with its menu and language switcher, the
 * buttons, the marketing sections, the footer, and the account area's
 * shared pieces (the form card, the app pages' layout, fields, badges,
 * the switch, the rail, the users table). Everything a page needs that
 * is not specific to that page. Page specific rules stay inline in the
 * page that uses them.
 *
 * The waitlist page, waitlist.html, does not use this file. It keeps its
 * own inline stylesheet and is frozen; see CLAUDE.md. The token and font
 * blocks below are copied from it exactly, not retyped.
 * ==================================================================== */

/* ------------------------------------------------------------------ *
 * Saule design tokens, plus the handful of colours the design adds:
 * a red for errors and a failed payment, an amber for a warning. They
 * come from the export and are listed in the report for Erlens.
 * ------------------------------------------------------------------ */
:root{
  --paper:#E8E3D6;
  --screen:#F7F3EA;
  --surface:#FFFFFF;
  --surface-2:#F1ECDF;
  --ink:#23211C;
  --muted:#736C5E;
  --faint:#A39C89;
  --line:#E0DACA;
  --line-2:#D3CCB9;
  --yellow:#FFC400;
  --yellow-deep:#D69A00;
  --yellow-soft:#FFEDAE;
  /* Two added in round 9 (DESIGN-ROUND-9-BRIEF.md, part 7, from the
     audit of 2026-09-18) for the contrast rule. --muted-paper is the
     grey for small text on --paper, where --muted reaches only 4.06:1
     against the 4.5 the rule asks: 4.51:1 on paper. --yellow-text is
     the yellow family dark enough for small text and rings on white,
     where --yellow-deep reaches 2.48:1: the same hue, 4.58:1 on white
     (the −15% on the pricing switcher, the FAQ's focus ring and its
     plus on hover). Neither is a fill colour. */
  --muted-paper:#6C6557;
  --yellow-text:#996E00;

  /* The red is for form errors and a failed payment, and since round 10
     (DESIGN-ROUND-10-BRIEF.md, part 6) for the danger zones on the
     account and billing pages, the card border and the word Bīstamā
     zona and the destructive buttons' text and border; nothing else.
     Measured on the white card: --red 5.13:1, --red-deep 8.24:1. */
  --red:#C4401A;
  --red-soft:#FBEDE8;
  --red-deep:#8F2D10;
  --red-ring:rgba(196,64,26,.14);
  --amber-soft:#FFF3C4;
  --amber-deep:#7A5200;

  --sans:'Archivo','Archivo stand-in',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Bricolage Grotesque','Bricolage stand-in',var(--sans);
  /* The design's small labels are IBM Plex Mono. It is not served from
     this site (two families over the wire, as before), so a machine that
     has it uses it and every other draws its own monospace. */
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  /* Distance from the page edge to the content, the design's
     clamp(20px,4vw,48px): 20px on a phone, 48px from 1200px. */
  --gutter:clamp(20px,4vw,48px);
  /* The header bar's height: its padding above and below the 47px row
     (44px items, and the button's 3px ledge, as on the waitlist's top
     row). 14px on a phone, 18px from 720px, and in the one screen
     bands the waitlist's top row offsets, 32px and 52px (see the
     header block). Not measured: it is what the row's rules add up to,
     and the home page pulls its hero up under the header by it. */
  --head-h:75px;
}

/* ------------------------------------------------------------------ *
 * The two faces, served from this site. Identical to waitlist.html,
 * which explains the whole arrangement: one file per family with the
 * Latvian letters in it, asked for in the head of every page before
 * anything else, and font-display:block so the text is drawn once, in
 * the real font, never in a system font first. The paths are relative
 * to this file, which sits next to the fonts folder. If a file is ever
 * replaced, rename it: vercel.json tells browsers to keep these for a
 * year.
 * ------------------------------------------------------------------ */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-display:block;
  src:url(fonts/archivo.woff2) format('woff2');
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:800;
  font-display:block;
  src:url(fonts/bricolage-grotesque.woff2) format('woff2');
}

/* ------------------------------------------------------------------ *
 * Stand-in faces. They download nothing: local() only ever uses a font
 * already on the machine. They re-cut the system font to the widths of
 * the face they stand in for, so the layout the browser builds while
 * the real faces are held is the one the text will have, and nothing
 * moves when it appears. They are also what shows if a font file never
 * arrives, and what draws every Russian word, since neither brand face
 * has Cyrillic. The percentages are measured, not guessed; do not
 * change them without measuring again.
 * ------------------------------------------------------------------ */
@font-face{
  font-family:'Archivo stand-in';
  src:local('Segoe UI'),local('Helvetica Neue'),local('Arial');
  size-adjust:91%;
}
@font-face{
  font-family:'Archivo stand-in';
  src:local('Segoe UI Bold'),local('SegoeUI-Bold'),local('Helvetica Neue Bold'),local('Arial Bold'),local('Arial-BoldMT');
  font-weight:500 700;
  size-adjust:93.5%;
}
@font-face{
  font-family:'Bricolage stand-in';
  src:local('Segoe UI Bold'),local('SegoeUI-Bold'),local('Helvetica Neue Bold'),local('Arial Bold'),local('Arial-BoldMT');
  font-weight:800;
  size-adjust:91.5%;
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* The design scrolls smoothly to a section link. A visitor with reduced
   motion turned on jumps instead, as everywhere on this site. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  background:var(--ink);
  color:var(--screen);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
/* On a light ground the focus ring turns ink. */
.on-light :focus-visible{outline-color:var(--ink)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* The small uppercase label the design puts above a block, in
   monospace: the section name, a column heading, a field group. */
.overline{
  margin:0;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ------------------------------------------------------------------ *
 * Buttons
 *
 * .btn is the primary action: solid yellow, ink text, radius 12 and the
 * hard 3px ledge underneath. The design draws it at several heights:
 * 44px in the header, 60px in the hero, 56px on forms and cards, 48px
 * for a small action on a card. .btn-secondary is the outlined kind:
 * white, one hairline, ink text, no ledge. .btn-text is the design's
 * plain underlined text button. .btn-ink is the one solid ink button
 * the design has, in the seats warning.
 * ------------------------------------------------------------------ */
.btn,.btn-secondary,.btn-text,.btn-ink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-family:var(--sans);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}
.btn{
  height:56px;
  padding:0 28px;
  border:0;
  background:var(--yellow);
  color:var(--ink);
  font-weight:700;
  font-size:16px;
  box-shadow:0 3px 0 0 var(--yellow-deep);
  margin-bottom:3px;
}
.btn:hover{background:var(--yellow-deep)}
.btn:focus-visible{outline-offset:3px}
.btn[disabled]{cursor:default;background:var(--line);color:var(--faint);box-shadow:none}
.btn-secondary{
  height:56px;
  padding:0 20px;
  border:1px solid var(--line-2);
  background:var(--surface);
  color:var(--ink);
  font-weight:600;
  font-size:15px;
}
.btn-secondary:hover{border-color:var(--ink)}
.btn-secondary[disabled]{cursor:default;color:var(--faint)}
.btn-text{
  height:44px;
  padding:0 12px;
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:600;
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:4px;
}
.btn-text:hover{color:var(--ink)}
.btn-ink{
  height:44px;
  padding:0 18px;
  border:0;
  background:var(--ink);
  color:var(--screen);
  font-weight:600;
  font-size:14px;
}
.btn-ink:hover{background:var(--muted)}
.btn-lg{height:60px;padding:0 36px;font-size:17px}
.btn-sm{height:48px;padding:0 20px;font-size:15px}
.btn-head{height:44px;padding:0 12px;font-size:14px}

/* A plain link on ink: cream, underlined, the hero's "Jau ir konts?"
   and the closing section's "Pieslēgties". Padded to a 44px tap box. */
.link-light{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--screen);
  font-size:16px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px;
}
.link-light:hover{color:var(--faint)}

/* ------------------------------------------------------------------ *
 * Header
 *
 * Ink, one muted hairline under it. The row holds the wordmark on the
 * left, the page's section links after it, and on the right the
 * language switcher, the plain Pieslēgties link and the compact
 * primary button. That is the design's row, and it is what a window
 * from 1100px up gets.
 *
 * Its size, since round 3 of the design (DESIGN-ROUND-3-BRIEF.md,
 * 2026-09-17), is the waitlist page's top row, and on the pages that
 * are ink under it (head-on-ink) it is drawn as the waitlist draws its
 * top row: no bar, no hairline, the row floating on the ink, until the
 * scroll lifts the island out of it. The wordmark is drawn
 * at exactly the waitlist's size at each width (88x22 on a phone,
 * 120x30 from 720px, 160x40 from 1240px, and in the one screen bands
 * 132x33, 146x37 and 160x40), and on a desktop the bar puts the row
 * where the waitlist puts its top row, 32px from the top of the
 * window, 52px in the tallest band, with the same air below it. The
 * bar's height, --head-h, is a plain value per width and band in :root
 * and never measured. The links, the switcher, Pieslēgties and the
 * button are 44px tall on one centre line, 8px apart, 12px beside every
 * word, and in the one screen bands their text is one step larger to
 * sit right beside the bigger wordmark.
 *
 * The scroll (round 2, redone in round 3). At the top of the page the
 * header is the full width bar. As the visitor scrolls the bar becomes
 * a floating island, over about 280px of scrolling, in three moves
 * that overlap a little and each start and end softly: first the bar
 * lifts off the page edges, its corners round, the hairline under it
 * closes around it and a soft shadow grows under it; then it narrows
 * into the centred island. The thin yellow outline is not there at the
 * top of the page: it fades in as soon as the page is scrolled at all
 * and fades out again at the top (round 7, 2026-09-17; round 6 had it
 * on the bar from the very top), and it follows the box's shape as it
 * lifts and narrows. Scrolling up plays it backwards.
 * kvedo.js turns the scroll position into two numbers on the header,
 * --L (lift) and --N (narrow), each 0 to 1, written at most once a
 * frame and only when they change, and one class, is-scrolled, on
 * while the page is scrolled at all; with reduced motion the numbers
 * jump between 0 and 1, and without the script they stay 0 and the
 * header is simply the bar, with no outline.
 *
 * How it is built so that nothing under it moves and nothing is laid
 * out per frame. .site-head is the sticky wrapper, transparent,
 * letting clicks through. .row inside it is full width and never
 * changes size with the scroll: it holds the items, laid out once,
 * and the wrapper is exactly as tall as it (--head-h says how tall
 * that is on a page where the row is one line). The bar
 * itself is the row's ::before, an ink box whose four edges move in
 * from the row's edges by the two numbers (a box with nothing inside
 * it, so moving its edges lays out nothing else); the hairline is its
 * shadow at --L 0 and the soft shadow its shadow at --L 1. The outline
 * is the row's ::after, the same box with a yellow border, always
 * whole, transparent until is-scrolled. The items follow the
 * island with transforms only: down by --cy (where the island's centre
 * line is against the bar's) and inward by --dx, the distance the
 * island's inside edge moves against the bar's, which kvedo.js works
 * out from the window's width and the row's padding on load and on
 * resize, never on scroll. The island is 1140px wide at most (1080
 * until 2026-09-19, see the wide layout below) with 24px
 * inside its edges, 44px plus --ip above and below, 12px down from the
 * top of the window. On a phone and at mid width it is the bar stood
 * in from the edges and moved down, and the items stay where they are.
 *
 * The design is desktop only. Below 1100px the section links, the
 * Pieslēgties link and the switcher fold into one plain list under the
 * row, behind a text button labelled Izvēlne, as the page did before:
 * no icon, no sliding panel, shown and hidden outright. The row keeps
 * the wordmark and the primary button, which at 360px in every language
 * leaves a few pixels to spare, so nothing else goes on it there. The
 * open list is part of the row, so the ink box and the outline grow
 * around it and it hangs under the island's bar inside the outline,
 * over the page, and the page moves down under it as it did before.
 * On the account pages a phone gets a second row (Konts, Abonements,
 * the switcher), and the wrapper is simply that much taller.
 *
 * With no script the list is simply open and the toggle is not drawn.
 * The small script in the head of each page adds the js class to <html>
 * before first paint; only then is the list folded away. On the wide
 * layout the list is always laid into the row (display:contents),
 * whatever the toggle says.
 *
 * The two logged in pages, /account and /billing, carry head-plain
 * since round 10 (DESIGN-ROUND-10-BRIEF.md, part 4): the header there
 * is the bar at the top of the page with the hairline under it and
 * nothing more, in the flow, scrolling away with everything else. No
 * sticky, no island, no lift, no narrowing, no outline; kvedo.js skips
 * those pages entirely, so the two numbers stay at 0 and the bar is
 * what the rules below draw at 0. Every other page keeps the scroll.
 * ------------------------------------------------------------------ */
.site-head{
  --L:0;
  --N:0;
  --dx:0px;
  /* The bar's padding above and below the 44px row, the island's own
     padding, and how far the island stands in from the page edge. */
  --padT:14px;
  --ip:14px;
  --isl:12px;
  /* Where the island's centre line is against the bar's: the island
     sits 12px down, so its centre is 12px plus its padding plus 22px
     from the top, and the bar's is its padding plus 23.5px, half the
     47px row. */
  --cy:calc(10.5px + var(--ip) - var(--padT));
  /* The column the row's contents are held to, and its side padding:
     the design's 1280px at the gutter; from 1240px the waitlist's
     column, 1440px at the waitlist's side padding, so the wordmark is
     where the waitlist's is. */
  --col:1280px;
  --side:var(--gutter);
  position:sticky;
  top:0;
  z-index:100;
  pointer-events:none;
}
.site-head.head-plain{position:static;z-index:auto}
.site-head .row{
  position:relative;
  isolation:isolate;
  /* Full width; the contents are held to the column by the padding,
     which is the side padding, or more when the window is wider than
     the column plus two paddings, so the row never changes size. */
  padding:var(--padT) max(var(--side),calc(50% - var(--col) / 2 + var(--side)));
  /* The waitlist's top row is 47px: 44px items and the button's 3px
     ledge, carried as a margin so the button and its ledge centre as
     one. The same here, and the same height on the account pages,
     which have no button. */
  min-height:calc(2 * var(--padT) + 47px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  pointer-events:none;
}
/* The bar and the island are one box: its edges move in by the two
   numbers. Top and bottom bring the row's height (its padding twice
   plus 47px) to the island's (44px plus twice --ip) 12px down from the
   top; the sides stand in by --isl and then by whatever more it takes
   to reach 1140px. */
.site-head .row::before,
.site-head .row::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:calc(12px * var(--L));
  bottom:calc((2 * var(--padT) - 9px - 2 * var(--ip)) * var(--L));
  left:calc(var(--isl) * var(--L) + max(0px,50% - 570px - var(--isl)) * var(--N));
  right:calc(var(--isl) * var(--L) + max(0px,50% - 570px - var(--isl)) * var(--N));
  border-radius:calc(18px * var(--L));
}
.site-head .row::before{
  pointer-events:auto;
  background:var(--ink);
  /* The hairline under the bar becomes the edge of the box as it
     lifts: the line under the bar fades out while the same muted line
     fades in all round, so on an ink page, where ink on ink and a dark
     shadow on ink would show nothing, the lift and the corners can be
     seen. The soft shadow under the island grows as it lifts. */
  border:1px solid rgba(115,108,94,var(--L));
  box-shadow:0 1px 0 rgba(115,108,94,calc(1 - var(--L))),
             0 24px 48px -16px rgba(35,33,28,calc(.45 * var(--L)));
}
/* On a page that is ink under the header (the home page, signup and
   login) there is no bar at the top at all: the row floats on the ink
   as the waitlist's top row does, with no hairline, and the box comes
   in with the lift, opaque within its first third so nothing scrolling
   under the header shows through it. Without this the home page's bar
   would cover the top of the headline in the tallest band, where the
   waitlist's row sits 52px down and its headline can start 125px down.
   The cream pages (account, billing, the policy) keep the solid bar
   and the hairline, or their header would float unreadable on cream. */
.head-on-ink .row::before{
  background:rgba(35,33,28,min(1,calc(3 * var(--L))));
  box-shadow:0 24px 48px -16px rgba(35,33,28,calc(.45 * var(--L)));
}
/* The outline: the same box with the yellow border, following the
   shape. Since round 7 (2026-09-17) it is not there at the top of the
   page: kvedo.js puts is-scrolled on the header as soon as the page
   is scrolled at all (scrollY above 0) and takes it off again at the
   top, and the outline fades in and out over a quarter of a second
   with it. Round 6 had drawn it from the very top of the page. */
.site-head .row::after{
  border:1px solid transparent;
  transition:border-color .25s ease-out;
}
.site-head.is-scrolled .row::after{border-color:var(--yellow)}
@media (prefers-reduced-motion:reduce){
  .site-head .row::after{transition:none}
}
/* The items follow the island by transform: every item on the row
   moves down by --cy as the bar lifts, and the ones that stand at the
   two ends move inward by --dx as it narrows (--s says which way; the
   wordmark and the links after it go right, everything on the right
   goes left). Below the wide layout --dx is 0. */
.site-head .row > *{
  --s:-1;
  pointer-events:auto;
  transform:translate(calc(var(--s) * var(--dx) * var(--N)),calc(var(--cy) * var(--L)));
}
.site-head .home,.site-head .menu-links,.site-head .app-links{--s:1}
.site-head .home{display:flex;align-items:center;flex:none;height:44px}
.wordmark{width:88px;height:22px}
/* The wordmark arrives from above once, as the page is drawn (round 8,
   DESIGN-ROUND-8-BRIEF.md, part 1): 14px down into its place and from
   nothing to full, together, over 450ms easing out, after an 80ms
   wait so it is not fighting the first paint. On the image itself and
   never on .home: every item on the row already carries the transform
   that follows the header's lift into the island (below), and a second
   transform on the link would break that; the image inside it is free.
   Only with script (the js class), so a page with none simply has the
   wordmark in place, and never with reduced motion. */
.js .site-head .home .wordmark{animation:wordmark-in .45s cubic-bezier(.22,.61,.36,1) .08s both}
@keyframes wordmark-in{
  from{transform:translateY(-14px);opacity:0}
  to{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .js .site-head .home .wordmark{animation:none}
}

.menu-toggle{
  display:none;
  flex:none;
  margin-left:auto;
  height:44px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--screen);
  font:600 14px var(--sans);
  cursor:pointer;
  white-space:nowrap;
}
.js .menu-toggle{display:inline-flex;align-items:center}
.menu-toggle:hover,.menu-toggle:focus-visible{color:var(--yellow)}
.menu-toggle[aria-expanded="true"]{
  text-decoration:underline;
  text-decoration-color:var(--yellow-deep);
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}
.site-head .btn-head{flex:none;order:5;margin-bottom:3px}

/* The folded list. It wraps onto its own row under the header row and
   holds the section links, then the Pieslēgties link, then the
   switcher, all left aligned with the wordmark. */
.menu{
  order:10;
  flex-basis:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin-top:6px;
  padding:8px 0 4px;
  border-top:1px solid var(--muted);
}
.js .menu:not(.is-open){display:none}
.menu-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.menu-links a,.menu-login{
  display:block;
  padding:11px 0;
  color:var(--screen);
  font-size:17px;
  font-weight:600;
  text-decoration:none;
}
.menu-login{order:1}
.menu .lang{order:2;margin:4px 0 0 -8px}

/* Language switcher: LV / EN / RU. Uppercase monospace; the active
   language in yellow, the other two faint, thin slashes between. Each
   entry is a 44px tall tap box. The design has no switcher, so this is
   the one the site already had, kept as it was. */
.lang{
  flex:none;
  display:flex;
  align-items:center;
  gap:2px;
  font-family:var(--mono);
  font-size:14px;
  font-weight:500;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}
/* Each entry is a 44px tall box and, since BRIEF-B-MOBILE-FIRST.md
   (part 6, 2026-09-19), 44px wide too: the words stand where they
   stood (8px in from the box they had), and the box reaches 5px over
   the slash on either side, so a tap on a slash lands on the entry
   beside it and nothing between the three is dead; the entries sit
   above the slashes for that. Measured at 360: the row is the same
   width and the words are in the same place. The waitlist page's own
   switcher is not this one. */
.lang a{
  position:relative;
  z-index:1;
  display:block;
  padding:15px 13px;
  margin:0 -5px;
  color:var(--faint);
  text-decoration:none;
}
.lang a[aria-current]{color:var(--yellow)}
.lang span{color:var(--muted);font-weight:300}

/* The account pages' header: the wordmark, then Konts and Abonements,
   then on the right the switcher, the visitor's name and Iziet. No
   primary button and no toggle. On a phone the wordmark and Iziet share
   the first row and the two links and the switcher take a second. */
.head-sub{
  order:10;
  flex-basis:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 8px;
  margin:2px 0 -6px -12px;
}
.app-links ul{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.app-links a{
  display:flex;
  align-items:center;
  height:44px;
  padding:0 12px;
  color:var(--faint);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
}
.app-links a[aria-current="page"]{color:var(--screen)}
.head-name{display:none;color:var(--faint);font-size:15px}
.head-link{
  display:inline-flex;
  align-items:center;
  height:44px;
  margin-left:auto;
  padding:0 12px;
  color:var(--screen);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
button.head-link{border:0;background:none;font-family:inherit;cursor:pointer}
button.head-link[disabled]{cursor:default;color:var(--faint)}

/* Every link in the header and in the footer turns yellow under the
   pointer and under keyboard focus (round 2; the footer's own rule is
   in its block). The one exception is the switcher's active entry,
   which is yellow already. */
.menu-links a:hover,.menu-links a:focus-visible,
.menu-login:hover,.menu-login:focus-visible,
.lang a:hover,.lang a:focus-visible,
.app-links a:hover,.app-links a:focus-visible,
.head-link:hover,.head-link:focus-visible{color:var(--yellow)}

/* ------------------------------------------------------------------ *
 * Marketing sections: full width bands of one colour, the content in
 * an 1100px column. The heading block is the overline and the h2.
 * ------------------------------------------------------------------ */
.section{padding:clamp(64px,8vw,120px) var(--gutter)}
.section-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
.section-head{display:flex;flex-direction:column;gap:12px;max-width:640px}
/* One size for every section heading on the home page (round 7,
   2026-09-17: Funkcijas, Kā tas strādā, Cenas and Jautājumi all
   the same, 64px from 1422px, 40px on a phone; until then the first
   two were 48px and the last two 56px at their widest). */
.section h2{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(40px,4.5vw,64px);
  line-height:1;
  letter-spacing:-.03em;
  text-wrap:balance;
}
/* A heading of two sentences is two spans (the home page's Funkcijas
   and Cenas headings since 2026-09-19, one key per sentence): each is
   an inline block, so the balanced break can only fall between them,
   at the full stop, and never mid-sentence. A sentence wider than the
   column still wraps inside its own block. An empty part (a language
   whose heading is one sentence) is not drawn, so it can never open
   an empty line. */
.section h2 .h2-part{display:inline-block}
.section h2 .h2-part:empty{display:none}
.bg-screen{background:var(--screen);color:var(--ink)}
.bg-paper{background:var(--paper);color:var(--ink)}
/* A section link lands under the sticky header with a little air above
   the heading: the island is 89px tall with its offset. */
.section[id]{scroll-margin-top:104px}

/* The white card the design uses on a light ground. */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(24px,3vw,36px);
}

/* ------------------------------------------------------------------ *
 * The contact block (BRIEF-KONTAKTFORMA.md, 2026-09-18; redrawn in
 * round 10, DESIGN-ROUND-10-BRIEF.md, part 8, and shared since part 9,
 * when the same block was put on the account page above its footer).
 * A section on the cream ground: the page's wavy lines behind the
 * whole of it, the offline block's curve in the same faint 1px --line-2
 * stroke, 24 units apart, one inline SVG filling the section at -1 in
 * the section's own stacking context, scaled to cover it without
 * stretching and cut by its edges; on the left, in an island the lines
 * stop behind (one solid cream box, the section's own colour, no
 * border, shadow or tint, its padding pulled out by the same negative
 * margin so the words stand where they would without it), the heading,
 * the line under it and the two contact rows, the address and the
 * number as real links with an envelope and a handset before them (the
 * app's own icons, lucide mail and phone; the whole row is the link and
 * 44px tall for the finger, the rows pulled 9px into each other's
 * margins so they still sit 10px apart; the icons say nothing to a
 * screen reader, and the link's label is the lead word and the address
 * or the number, written by the build and again by kvedo.js); on the
 * right the form, the serious thing on the block, a white card with the
 * hairline, 20px corners and generous padding (28px on a phone, 48 from
 * 1200px), the account area's labels, the consent line at the hint
 * size, and the send button the site's yellow ledge button across the
 * card's full width. One row from 900px, 5 to 7 like the FAQ panel;
 * stacked below that with the heading first. Below 720px, where the
 * island and the card fill the screen and the lines would only fringe
 * the card (which on the offline block read as a mistake,
 * BRIEF-NOTEIKUMI.md, part 4), the lines and the island go together and
 * the block is plain cream. The message box grows with what is typed,
 * from four rows to ten (kvedo.js), then scrolls. Each page sets the
 * section's own padding, its place in that page's rhythm.
 * ------------------------------------------------------------------ */
.faq-line{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;margin:-9px 0;
  color:var(--ink);font-weight:700;white-space:nowrap;
}
.faq-line svg{flex:none;width:18px;height:18px;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#kontakti{position:relative;isolation:isolate;overflow:hidden}
.cf-waves{display:none;position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.55}
.cf{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.cf-head{
  position:relative;
  align-self:start;
  max-width:none;
  gap:16px;
}
.cf-head h2{max-width:none}
.cf-head p{margin:0;max-width:440px;font-size:17px;line-height:1.5;color:var(--muted)}
.cf-lines{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:8px}
.cf-card{padding:clamp(28px,4vw,48px)}
.cf-form{display:flex;flex-direction:column;gap:20px}
.cf-body{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.cf-body .field{align-self:stretch}
.cf-body .btn{align-self:stretch;width:100%}
.cf-body .consent{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.cf-body .consent a{color:var(--ink)}
.cf-body textarea.input{resize:none}   /* it grows by itself; see kvedo.js */
/* A refused field is focused by the script; on the home page, where the
   header is sticky, that scroll lands it under the header's height and
   not under the header. */
.cf-body .input{scroll-margin-top:104px}
/* Spam trap: waitlist.html's .trap. Out of flow and clipped to nothing,
   so it adds no gap to the form; the markup carries aria-hidden and
   tabindex="-1", so it is hidden from readers and from the tab order. */
.trap{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
/* The lines and the island are drawn from 720px only (written phone
   first since BRIEF-B-MOBILE-FIRST.md, part 5, 2026-09-19; the same
   rule as a max-width block until then, the same result). */
@media (min-width:720px){
  .cf-waves{display:block}
  .cf-head{margin:-20px -24px;padding:20px 24px;background:var(--screen);border-radius:18px}
}
@media (min-width:900px){
  .cf{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:start}
}

/* ------------------------------------------------------------------ *
 * Footer. Since round 2 (DESIGN-ROUND-2-BRIEF.md, after the structure
 * of design-exports/footer-reference.png) it is a floating island: on
 * the cream ground, one ink rounded card standing in from the page
 * edges with a soft shadow under it, holding what the footer held
 * before: the wordmark with one line about the product, the link
 * columns with monospace headings, and the bottom row with the
 * copyright, the privacy policy link and the second language switcher.
 * Under the island the wordmark itself, huge, a little wider than the
 * island, its top just under the island and its lower part cut off by
 * the end of the page (round 6, DESIGN-ROUND-6-BRIEF.md, part 7, after
 * the reference; rounds 2 and 4 had it faint with its top tucked under
 * the island). It is the real wordmark used as a mask: the letters in
 * ink and the diamond in yellow, two layers of the same mask cut apart
 * where the letters end; decoration only, hidden from readers, not
 * selectable, and the footer clips it so nothing scrolls sideways.
 * Since round 7 (2026-09-17, part 9) the mask is assets/kvedo-logo.svg,
 * a vector of the wordmark built from the site's own Bricolage
 * Grotesque file and checked against the PNG (round 6 stretched the
 * 480px PNG to 1280px and it was soft), it sits closer under the
 * island (12px from 1200px, 8px on a phone, where it was 28 and 16)
 * and shows its top 65% instead of its top half.
 *
 * The island is ink, as the footer was, so the cream wordmark reads on
 * it and the links turn yellow under the pointer and under keyboard
 * focus like the header's. Links are padded to 44px tap boxes.
 * ------------------------------------------------------------------ */
.site-foot{
  position:relative;
  overflow:hidden;
  background:var(--screen);
  color:var(--muted);
  /* 16px above the island on a phone, 32px from 1280px (round 7 took
     it down from 24 and 48, with the closing block's own air under it,
     so the island stands a little closer under that block). */
  padding:clamp(16px,2.5vw,32px) var(--gutter) 0;
}
.site-foot .row{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(32px,5vw,56px) clamp(20px,4vw,56px) 24px;
  background:var(--ink);
  color:var(--faint);
  border-radius:28px;
  box-shadow:0 28px 56px -20px rgba(35,33,28,.5);
  display:flex;
  flex-direction:column;
  gap:40px;
}
/* The columns. On a phone (BRIEF-B-MOBILE-FIRST.md, part 4, 2026-09-19)
   the brand line takes the width and the three link groups sit in two
   columns under it, Produkts on the left over two rows and Konts and
   Kontakti stacked on the right, so the island is some 250px shorter
   than with the four stacked (measured at 360: the footer was 938px
   tall on every page, a whole screen and a quarter); a long entry
   (Gaidīšanas saraksts, Как это работает) takes two lines in its
   column, which is what a footer column does. From 720px the groups
   stand in a row as before. */
.foot-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px 20px;
}
.foot-brand{grid-column:1 / -1}
.foot-grid > nav:first-of-type{grid-row:span 2}
@media (min-width:720px){
  .foot-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px 40px}
  .foot-brand{grid-column:auto}
  .foot-grid > nav:first-of-type{grid-row:auto}
}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-brand .home{display:flex;align-items:center;min-height:44px;margin-top:-8px}
.foot-brand p{margin:0;max-width:260px;font-size:14px;line-height:1.5}
/* --faint, 5.88:1 on ink (round 9; --muted was 3.09). The three column
   labels (Produkts, Konts, Kontakti) were h2 until 2026-09-19
   (BRIEF-A-SEO-404.md, part 7): they name navigation groups, not
   sections of the page, so they are plain paragraphs now, drawn the
   same, and each nav carries the same word as its aria-label. */
.foot-col .foot-h{margin:0 0 1px;font-family:var(--mono);font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.foot-col a{
  display:inline-block;
  padding:11px 0;
  color:var(--screen);
  font-size:15px;
  line-height:1.45;
  text-decoration:none;
}
.foot-col a[href^="mailto:"],.foot-col a[href^="tel:"]{white-space:nowrap}
.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:8px 16px;
  padding-top:12px;
  border-top:1px solid var(--muted);
  font-size:13px;
}
.foot-bottom p{margin:0}
.foot-bottom-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.foot-privacy{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--faint);
  text-decoration:none;
}
.foot-bottom .lang{margin-right:-8px}
.site-foot .row :focus-visible{outline-color:var(--yellow)}
.foot-col a:hover,.foot-col a:focus-visible,
.foot-privacy:hover,.foot-privacy:focus-visible{color:var(--yellow)}
/* Seko mums (2026-09-25): the label and the network icons beside it,
   under the brand line, or in the bottom row where a footer has only
   that (android.html). Written by build.mjs from SOCIAL, and not at
   all when no address is set. The icons are line drawings in the
   links' cream, yellow under the pointer and under focus like every
   footer link, nothing behind them; each is a 44px tap box. */
.foot-social{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.foot-social-h{margin:0;font-size:14px;line-height:1.5;color:var(--faint)}
.foot-social ul{list-style:none;margin:0;padding:0;display:flex}
.foot-social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--screen)}
.foot-social svg{display:block;width:20px;height:20px}
.foot-social a:hover,.foot-social a:focus-visible{color:var(--yellow)}
.foot-bottom .foot-social-h{font-size:13px}

/* The wordmark under the island (round 6; the vector and the crop
   since round 7). The SVG's box is 480 by 120, the PNG's. The box is
   24px wider than the island (1280px at most), centred, and 65% as
   tall as the wordmark it holds, clipping it: the wordmark's top 65%
   shows under the island (the whole of the k and d ascenders, and the
   bowls of the v, e and o down past their middles) and the rest is
   cut by the end of the page; round 6 showed half. The letters are ink
   and the diamond is yellow: two layers masked by the same SVG, one
   clipped to the letters (they end at 88.5% of the image's width) and
   one to the diamond (it starts at 90.4%), cut apart at 89.5%. */
.foot-mark{
  position:relative;
  z-index:0;
  width:min(1280px,100% + 24px);
  aspect-ratio:400 / 65;
  margin:clamp(8px,1vw,12px) 0 0 calc(50% - min(640px,50% + 12px));
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}
.foot-mark::before,.foot-mark::after{
  content:"";
  position:absolute;
  left:0;top:0;
  width:100%;
  aspect-ratio:4 / 1;
  -webkit-mask:url(kvedo-logo.svg) center / 100% 100% no-repeat;
  mask:url(kvedo-logo.svg) center / 100% 100% no-repeat;
}
.foot-mark::before{background:var(--ink);clip-path:inset(0 10.5% 0 0)}
.foot-mark::after{background:var(--yellow);clip-path:inset(0 0 0 89.5%)}

/* ------------------------------------------------------------------ *
 * Mid width
 * ------------------------------------------------------------------ */
@media (min-width:720px){
  :root{--head-h:83px}
  .site-head{--padT:18px;--ip:16px;--isl:20px}
  .wordmark{width:120px;height:30px}   /* waitlist 720px up */
  .btn-head{padding:0 18px;font-size:15px}   /* the waitlist's button: 15px, 18px beside the words */
  .head-sub{display:contents}
  .site-head .head-sub > *{
    --s:-1;
    pointer-events:auto;
    transform:translate(calc(var(--s) * var(--dx) * var(--N)),calc(var(--cy) * var(--L)));
  }
  .site-head .app-links{--s:1}
  .app-links{margin:0 auto 0 12px}
  .head-name{display:inline}
  .head-link{margin-left:0}
  .site-foot .row{gap:48px}
}

/* ------------------------------------------------------------------ *
 * Wide: the header unfolds into the design's one row
 * ------------------------------------------------------------------ */
@media (min-width:1100px){
  .site-head{--isl:24px}
  .site-head .row{flex-wrap:nowrap}
  .menu-toggle,.js .menu-toggle{display:none}
  .menu,.js .menu:not(.is-open){display:contents}
  .site-head .menu > *{
    --s:-1;
    pointer-events:auto;
    transform:translate(calc(var(--s) * var(--dx) * var(--N)),calc(var(--cy) * var(--L)));
  }
  /* The links (four until 2026-09-19, five since: Kontakti) sit
     centred between the wordmark and the switcher
     (round 8, part 1): equal auto margins, so the air on their left,
     to the wordmark, is the air on their right, to the switcher, at
     every width; round 3 had them hugging the wordmark (a 12px left
     margin and the rest of the room on the right). They do not move
     sideways as the bar narrows into the island (--s 0): the wordmark
     comes in from the left by --dx and the right cluster from the
     right by the same, so the middle of the room between them stays
     where it is and the links stay centred in it; they still ride
     down with the island by --cy. Centring them on the bar itself
     instead is not possible without overlap: the right cluster is
     wider than the wordmark, and in the island (1140px at most) the
     room left between the two is only some 100px more than the links
     need, so the bar's centre line puts them under the switcher; and
     at 1100px the same is true of the bar. The words are further
     apart than they were: 4px between the links and 14px beside each
     word (8 and 12 until round 8), each link still 44px tall. */
  .site-head .menu-links{--s:0}
  .menu-links{margin:0 auto}
  .menu-links ul{flex-direction:row;gap:4px}
  .menu-links a{
    display:flex;
    align-items:center;
    height:44px;
    padding:0 14px;
    color:var(--faint);
    font-size:15px;
    font-weight:500;
  }
  .menu-login{
    order:0;
    display:flex;
    align-items:center;
    height:44px;
    padding:0 12px;
    font-size:15px;
  }
  .menu .lang{order:0;margin:0;padding:0 4px}
}

/* ------------------------------------------------------------------ *
 * Wide and the one screen bands: the waitlist's wordmark sizes and top
 * row offsets (round 3). From 1240px the wordmark is the waitlist's
 * 160x40; in the bands, which the waitlist switches at 700, 860 and
 * 1000px of height, it is 132x33, 146x37 and 160x40, the row sits 32px
 * from the top (52px in the tallest band) with the same below, and the
 * text on the row is one step larger. The footer's wordmark keeps the
 * plain width rule: 160x40 from 1240px.
 * ------------------------------------------------------------------ */
@media (min-width:1240px){
  .site-head{--col:1440px;--side:80px}
  .wordmark{width:160px;height:40px}
  /* Five links since 2026-09-19 (Kontakti joined the four). In an
     island 1080px wide, with the wordmark at 160 and the right cluster
     at up to 380, the room for the links was about 453px in Latvian
     and 479 in Russian, and five links at 14px beside each word and
     4px between need 496 and 520: the wordmark would have touched
     Funkcijas at 1920x1080 (measured: 14px of overlap in Latvian, 13
     in Russian, 6 at 1512x982). Erlens chose the wider island over
     tighter words on 2026-09-19: the island is 1140px (the box above,
     and --dx in kvedo.js), and the links keep round 8's 14 and 4 at
     every width. Measured in the island after the change, clear box
     between the wordmark and the first link: see HANDOFF.md, the
     entry of 2026-09-19. */
}
@media (min-width:1240px) and (min-height:700px){
  :root{--head-h:111px}
  .site-head{--padT:32px;--side:56px}
  .site-head .wordmark{width:132px;height:33px}
  .menu-links a,.menu-login,.app-links a,.head-name,.head-link{font-size:16px}
  .btn-head{font-size:16px;padding:0 20px}
}
@media (min-width:1240px) and (min-height:860px){
  .site-head{--side:64px}
  .site-head .wordmark{width:146px;height:37px}
}
@media (min-width:1240px) and (min-height:1000px){
  :root{--head-h:151px}
  .site-head{--padT:52px;--side:80px}
  .site-head .wordmark{width:160px;height:40px}
}

/* ==================================================================== *
 * The account area: the signup and login pages, and the account and
 * billing pages.
 *
 * The design draws the two form pages as one cream card on the ink
 * page, and the two logged in pages as a cream page with white cards
 * on it. The header and the footer stay the site's, on ink.
 *
 * The type on the two logged in pages, since round 10
 * (DESIGN-ROUND-10-BRIEF.md, part 1, 2026-09-18). Erlens found the
 * settings "low quality, empty, cold" and the small words "super AI
 * like", and the cause was the 12px letter-spaced uppercase monospace
 * labels (the house style of every generated dashboard) and three
 * small text sizes at once (12, 13, 14). So on /account and /billing,
 * and on the home page's contact form, four sizes and no more:
 *   labels    15px, weight 500, --muted, sentence case, the body face
 *             (.field label, .ro dt, the switch rows' labels, the users
 *             table's column headings, every other label);
 *   values    17px, weight 600, --ink (.ro dd and every read only
 *             value; the label is quiet and the value is loud, where
 *             it had been the other way round);
 *   hints     14px, --muted (.hint, .note, the switch rows' lines,
 *             the badges), at most one hint per section;
 *   group headings inside a card, and the inset forms' headings, 17px
 *             weight 600 in --ink (.group-h; they were .overline).
 * Nothing under 16px is uppercase, letter-spaced or monospace on those
 * pages any more. Monospace survives where the text is a code and not a
 * word: the invoice and quote prefixes, the IBAN (and the SWIFT beside
 * it), the two step login's secret, its recovery codes and its code
 * field. The signup and login pages were not in that round and keep the
 * form card's own label and hint sizes (.form-card, below); .overline
 * stays for the login page's two step heading.
 * ==================================================================== */

/* The form pages. One card, centred, cream on ink: 520px on signup,
   440px on login (the page sets .form-card-narrow). */
.form-main{
  background:var(--ink);
  padding:clamp(48px,8vw,112px) var(--gutter);
  display:flex;
  justify-content:center;
}
.form-card{
  width:min(520px,100%);
  background:var(--screen);
  color:var(--ink);
  border-radius:24px;
  padding:clamp(28px,4vw,40px);
  display:flex;
  flex-direction:column;
  gap:20px;
}
.form-card-narrow{width:min(440px,100%)}
.form-card h1{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  font-size:36px;
  line-height:1;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.form-card .card-head{display:flex;flex-direction:column;gap:8px}
.form-card .sub{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.form-card .sub a{color:var(--ink);font-weight:600}

/* The logged in pages: a cream page, the heading, then the content.
   The heading block, since round 10 (DESIGN-ROUND-10-BRIEF.md, part 5),
   says whose account it is: the page's word (Konts, Abonements) small
   above, at the label size, the company's name as the h1 in the
   display face, and under it one quiet line with the person's name and
   their role. The word and the name are one h1 (its name for a screen
   reader is "Konts Elektrodarbi SIA"), so the heading is never empty
   before the account has arrived; the name's line and the quiet line
   reserve their height, so nothing moves when the words land. A
   visitor who is not an administrator cannot read the company (the
   API has no call for it), so for them the h1 is their own name and
   the line under it their role. */
.app-main{
  background:var(--screen);
  color:var(--ink);
  padding:clamp(40px,6vw,72px) var(--gutter) clamp(64px,8vw,112px);
}
.app-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:36px}
.app-main h1{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(36px,4vw,48px);
  line-height:1;
  letter-spacing:-.03em;
}
.app-main .kicker{font:500 15px/1.35 var(--sans);letter-spacing:0;color:var(--muted)}
.app-main .h1-name{display:block;min-height:1em;overflow-wrap:anywhere}
.page-head{display:flex;flex-direction:column;gap:10px}
.page-head .whose{margin:0;min-height:24px;font-size:16px;line-height:1.5;color:var(--muted)}
.app-cols{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start}
.app-content{flex:999 1 480px;min-width:0;display:flex;flex-direction:column;gap:24px}
.card h2{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  font-size:26px;
  line-height:1.1;
  letter-spacing:-.02em;
}
.card-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* The line under a card's heading that says what the section is for
   (round 10, part 2): body size, muted. */
.card .lede{margin:0;font-size:16px;line-height:1.55;color:var(--muted);max-width:560px}
.app-msg{display:flex;flex-direction:column;align-items:flex-start;gap:16px}

/* The rail of sections on the account page. From 720px a column on the
   left, 200 to 240px wide. Since round 10 (DESIGN-ROUND-10-BRIEF.md,
   part 3) the rail is an island, one white card with the hairline
   round it holding all thirteen entries, and the ink behind the shown
   entry is one pill, .rail-pill, that glides from the entry it was on
   to the one pressed over 280ms, its height and width following the
   entry it lands on. The page's script measures the pressed entry
   inside a frame, never in the click handler (round 9, part 6), and
   again on resize and once the faces have arrived; until the first
   measurement, with reduced motion, and with no script, the shown
   entry simply carries the ink itself (has-pill is never set). The
   pill sits under the entries: the rail is its own stacking context
   and the pill is at -1 in it, over the card's white and under the
   words.

   On a phone (BRIEF-B-MOBILE-FIRST.md, part 2, 2026-09-19) the rail
   is a list and the section a screen of its own, the way a phone's
   settings app does it: the page shows the thirteen entries as full
   width rows in the white card, one under the other, each row the
   name and a chevron, and nothing else; a tap opens that section in
   place of the list, headed by a way back (.rail-back, the rail's own
   name, Konta sadaļas), and the way back brings the list. Until then
   the rail was the same pills wrapped into seven rows, 350px of the
   first screen, with the chosen section under all of them. Which of
   the two is shown is the is-detail class on .app-cols, set by the
   page's script from the address: a fragment naming a section is the
   section, anything else the list. The entries are real links to the
   fragments, so every section keeps its address, the phone's back
   button returns to the list, and with no script the list is what is
   drawn (the page needs the script for everything else). From 720px
   none of this applies: the rail and the content stand side by side
   and the way back is not drawn. No pill on a phone: the list marks no
   entry, and the rows do not move. */
.rail{
  position:relative;
  isolation:isolate;
  flex:1 1 100%;
  padding:4px 0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
}
.rail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rail li + li{border-top:1px solid var(--line)}
.rail a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:52px;
  padding:0 20px;
  color:var(--ink);
  font-size:16px;
  font-weight:500;
  line-height:1.3;
  text-decoration:none;
}
/* The chevron: a text glyph, as the auth pages' ← is, in the faint
   grey, so a row reads as a door and not as a label. */
.rail a::after{content:"\203A";flex:none;font-size:22px;line-height:1;color:var(--faint)}
.rail-pill{display:none}
.rail-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  min-height:44px;
  margin:-12px 0 -8px;   /* the content's 24px gaps either side, brought to 12 above and 16 below */
  color:var(--muted);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
}
.rail-back:hover,.rail-back:focus-visible{color:var(--ink)}
.app-cols.is-detail .rail{display:none}
.app-cols:not(.is-detail) .app-content{display:none}
/* The section's heading takes focus when the section opens (the
   script), so a screen reader continues at the section and not at the
   tapped row 700px above; no ring on it, the way the page draws no
   ring on a heading anywhere. */
.panel h2:focus{outline:none}
/* A page opened at a section's address on a phone: the browser scrolls
   to the section, and this leaves the way back (44px and the 16px
   under it) in view above it. */
.panel{scroll-margin-top:60px}
@media (min-width:720px){
  .panel{scroll-margin-top:0}
  .rail{padding:8px}
  .rail ul{gap:4px}
  .rail li + li{border-top:0}
  .rail a{
    justify-content:flex-start;
    gap:0;
    min-height:44px;
    padding:0 16px;
    border-radius:12px;
    color:var(--muted);
    font-size:15px;
    transition:color .28s cubic-bezier(.22,.61,.36,1);
  }
  .rail a::after{content:none}
  .rail a:hover{color:var(--ink)}
  .rail a[aria-current="true"]{background:var(--ink);color:var(--screen);font-weight:600}
  .rail.has-pill a[aria-current="true"]{background:transparent}
  .rail-pill{
    display:block;
    position:absolute;
    top:0;left:0;
    z-index:-1;
    width:0;height:0;
    border-radius:12px;
    background:var(--ink);
    opacity:0;
    pointer-events:none;
  }
  .rail.has-pill .rail-pill{
    opacity:1;
    transition:transform .28s cubic-bezier(.22,.61,.36,1),width .28s cubic-bezier(.22,.61,.36,1),height .28s cubic-bezier(.22,.61,.36,1);
  }
  .rail-back{display:none}
  .app-cols.is-detail .rail{display:block}
  .app-cols:not(.is-detail) .app-content{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .rail a,.rail.has-pill .rail-pill{transition:none}
}

/* Forms. The label above the field, the field 56px tall with a hairline
   border and a 12px radius, 16px text so a phone does not zoom in on
   focus. A focused field gets the ink border; a refused one the red
   border and its soft ring. The label is the round 10 label: 15px,
   weight 500, muted; the form card of the signup and login pages keeps
   the 14px ink label it was designed with. */
.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label,.field .label{font-size:15px;font-weight:500;line-height:1.35;color:var(--muted)}
.form-card .field label,.form-card .field .label{font-size:14px;font-weight:600;line-height:1.3;color:var(--ink)}
.opt{font-weight:400;color:var(--muted)}
.input{
  min-width:0;
  width:100%;
  height:56px;
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:0 18px;
  font:400 16px var(--sans);
  color:var(--ink);
  background:var(--surface);
}
.input::placeholder{color:var(--faint);opacity:1}
.input:focus{outline:none;border-color:var(--ink)}
.input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px var(--red-ring)}
.input[disabled]{color:var(--faint);background:var(--screen)}
select.input{padding:0 14px 0 18px}
textarea.input{height:auto;min-height:104px;padding:14px 18px;line-height:1.4;resize:vertical}
/* A field whose text is a code, not a word: the two number prefixes,
   the IBAN and the SWIFT (round 10, part 1, rule 6). */
.input-mono{font:500 16px var(--mono)}
.input-code{
  max-width:280px;
  height:68px;
  font:500 28px var(--mono);
  letter-spacing:.4em;
  text-align:center;
}
.hint{margin:0;font-size:14px;font-weight:400;line-height:1.5;color:var(--muted)}
.form-card .hint{font-size:13px}
/* A link inside a hint (Lietotāji, Uzņēmums on the billing page): the
   word as it is, in a tap box 44px tall, the padding taken back by the
   margin so the line does not grow (BRIEF-B-MOBILE-FIRST.md, part 6). */
.hint a{display:inline-block;padding:15px 0;margin:-15px 0;color:var(--ink)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.form .btn,.form-card .btn{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.actions .btn,.actions .btn-secondary{width:auto}
/* A group of fields under a hairline, headed by .group-h: the group's
   name in the body face, 17px, weight 600, ink (round 10; it was the
   12px monospace .overline). */
.fieldset{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:16px}
.group-h{margin:0;font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}

/* What a form says back. The live region holds one of these: an alert
   (the design's red box), a note (a calm grey line), or a notice (the
   design's white box). */
.form-msg:empty{display:none}
.alert{
  margin:0;
  border:1px solid var(--red);
  background:var(--red-soft);
  border-radius:12px;
  padding:14px 18px;
  font-size:15px;
  line-height:1.5;
  font-weight:500;
  color:var(--red-deep);
}
.alert a{color:inherit}
.note{margin:0;font-size:14px;line-height:1.5;font-weight:600;color:var(--muted)}
.note a{color:var(--ink)}
.notice{
  margin:0;
  border:1px solid var(--line-2);
  background:var(--surface);
  border-radius:12px;
  padding:18px 20px;
  font-size:16px;
  line-height:1.5;
  font-weight:500;
  color:var(--ink);
}
.notice a{color:var(--ink)}
/* The amber warning, for the plan's seats being full. */
.warn{
  border:1px solid var(--yellow-deep);
  background:var(--amber-soft);
  border-radius:16px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.warn-text{display:flex;flex-direction:column;gap:4px}
.warn-text strong{font-size:16px;font-weight:600;color:var(--ink)}
.warn-text span{font-size:14px;color:var(--muted)}

/* Under a form's button: the fine print, centred. */
.form-foot{display:flex;flex-direction:column;gap:12px;text-align:center}
.form-foot .fine{margin:0;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink)}
.form-foot .consent{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.form-foot .consent a{color:var(--ink)}

/* A read only row: the quiet label, then the loud value (round 10:
   15px muted and 17px ink; until then a 12px monospace uppercase label
   over a 16px value). On a phone the value sits under its label
   (BRIEF-B-MOBILE-FIRST.md, 2026-09-19): side by side the value had
   some 130px at 360, and an email address broke into three lines; from
   720px the label is a column of its own. */
.ro{margin:0;display:flex;flex-direction:column}
.ro > div{
  border-top:1px solid var(--line);
  padding:16px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px 24px;
}
.ro > div:last-child{border-bottom:1px solid var(--line)}
.ro dt{
  margin:0;
  padding-top:2px;
  font-size:15px;
  font-weight:500;
  line-height:1.35;
  color:var(--muted);
}
.ro dd{margin:0;min-height:24px;font-size:17px;font-weight:600;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
@media (min-width:720px){
  .ro > div{padding:18px 0;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:8px 24px}
}

/* A danger zone (round 10, part 6): the card's hairline turns red, a
   small heading in the deep red at the label size sits above the card's
   own heading, and the destructive button is the secondary button with
   the red for its text and border; never a filled red block, never the
   ledge, no icon. One treatment, used for the account's deletion and
   for the billing page's cancellation and card removal, nowhere else. */
.danger{border-color:var(--red)}
.danger-h{margin:0 0 -16px;font-size:15px;font-weight:500;line-height:1.35;color:var(--red-deep)}   /* 8px over the heading in a card with 24px between its pieces */
.btn-danger,.btn-danger:hover{color:var(--red);border-color:var(--red)}
.btn-danger:hover{color:var(--red-deep);border-color:var(--red-deep)}
.btn-danger[disabled],.btn-danger[disabled]:hover{color:var(--faint);border-color:var(--line-2)}

/* Badges: a small rounded label, 28px tall, 14px (round 10; 13 until
   then, a fourth small size). */
.badge{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 12px;
  border-radius:8px;
  font:600 14px var(--sans);
  white-space:nowrap;
}
.badge-ink{background:var(--ink);color:var(--screen)}
.badge-paper{background:var(--paper);color:var(--muted-paper)}   /* 4.51:1 on paper; --muted was 4.06 (round 10's check) */
.badge-active{background:var(--paper);color:var(--ink)}
.badge-yellow{background:var(--yellow);color:var(--ink)}
.badge-red{background:var(--red);color:var(--surface)}
.badge-muted{background:var(--muted);color:var(--screen)}
.badge-amber{background:var(--amber-soft);color:var(--amber-deep)}

/* The switch: a real checkbox drawn as the design's 56 by 32 toggle.
   Ink when on, the hairline grey when off; the knob white. It does not
   slide: nothing on this site animates. */
.switch{position:relative;flex:none;width:56px;height:32px}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:16px;background:var(--line-2);pointer-events:none}
.switch span::after{
  content:"";
  position:absolute;
  top:4px;left:4px;
  width:24px;height:24px;
  border-radius:12px;
  background:var(--surface);
}
.switch input:checked + span{background:var(--ink)}
.switch input:checked + span::after{left:28px}
.switch input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.switch-row .switch-text{display:flex;flex-direction:column;gap:4px}
.switch-row .switch-text label{font-size:15px;font-weight:500;line-height:1.35;color:var(--muted)}
.switch-row .switch-text span{font-size:14px;line-height:1.5;color:var(--muted)}

/* The users table: the column headings at the label size, one hairline
   per row. On a phone the rows stack their cells; from 720px it is the
   design's grid, scrolling inside its own box if the window is narrower
   than it. */
.table-wrap{overflow-x:auto}
.users{display:flex;flex-direction:column}
.users-head{display:none}
.users-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 12px;
  align-items:center;
  padding:16px 0;
  border-top:1px solid var(--line);
  font-size:15px;
}
.users-row > *{min-width:0}
.users-row .u-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.users-row .u-name{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.users-row .u-name span{font-weight:400;color:var(--muted)}
.users-row .u-email{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.users-row .u-user{font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.users-row .u-role{color:var(--ink)}
.users-row .u-edit{grid-column:2;grid-row:1 / span 4;justify-self:end}
.users-row .btn-secondary{height:44px;padding:0 16px;font-size:14px}

@media (min-width:720px){
  .rail{flex:1 1 200px;max-width:240px;align-self:flex-start}
  .rail ul{width:100%}
  .form .btn{width:auto}
  .form-card .btn{width:100%}
  .users{min-width:560px}
  .users-head,.users-row{
    display:grid;
    grid-template-columns:minmax(150px,1.4fr) minmax(110px,1fr) minmax(100px,.8fr) minmax(90px,.7fr) auto;
    gap:16px;
  }
  .users-head{
    padding:0 0 12px;
    font-size:15px;
    font-weight:500;
    line-height:1.35;
    color:var(--muted);
  }
  .users-row .u-edit{grid-column:auto;grid-row:auto}
  .users-row .u-edit:empty{min-width:1px}
}