/*
 * Tovsta Kasa — the landing's layout (tovsta.casa): the l-* part of the landing canvas's layout.css
 * (the repo's copy: design/projects/landing/layout.css), from «The site» on, byte for byte. The canvas chrome (dv-*) above
 * it is never shipped. Linked after the design system's stylesheet (ds/styles.css); tokens only.
 * `npm run check:styles` fails when this tail and that copy disagree: change both in one commit, never
 * one side alone, and publish project/layout.css to the landing artifact after the merge.
 */

/* ── The site ──────────────────────────────────────────────────────────────────── */

/* The page root. Marketing body is one step up from the dashboard's 14 px. */
.l-site {
  container: site / inline-size;
  --body-size: var(--type-base);
  --body-lh: var(--type-base-lh);
  background: var(--background);
  color: var(--foreground);
  font-size: var(--body-size);
  line-height: var(--body-lh);
}
.l-wrap {
  width: 100%;
  max-width: calc(var(--space) * 300);
  margin-inline: auto;
  padding-inline: calc(var(--space) * 5);
}
@container site (min-width: 64rem) {
  .l-wrap {
    padding-inline: calc(var(--space) * 10);
  }
}

/* The lime marker: a highlighter stroke under a few words, never a surface. */
.l-mark {
  background: linear-gradient(to bottom, transparent 58%, var(--brand) 58%, var(--brand) 92%, transparent 92%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Text roles above the dashboard's scale. */
.l-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space) * 2);
  width: fit-content;
  padding: calc(var(--space) * 1) calc(var(--space) * 3);
  border: 1px solid var(--border);
  border-radius: var(--corner-full);
  background: var(--card);
}
.l-eyebrow-dot {
  width: calc(var(--space) * 2);
  height: calc(var(--space) * 2);
  border-radius: var(--corner-full);
  background: var(--brand);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 14%, transparent);
}
.l-h1 {
  font-size: var(--type-4xl);
  line-height: var(--type-4xl-lh);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-display);
  text-wrap: balance;
}
.l-h2 {
  font-size: var(--type-3xl);
  line-height: var(--type-3xl-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-display);
  text-wrap: balance;
}
.l-h3 {
  font-size: var(--type-lg);
  line-height: var(--type-lg-lh);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-tight);
}
.l-lead {
  color: var(--muted-foreground);
  font-size: var(--type-lg);
  line-height: var(--type-lg-lh);
  text-wrap: pretty;
}
.l-text {
  color: var(--muted-foreground);
  text-wrap: pretty;
}
@container site (min-width: 64rem) {
  .l-h1 {
    font-size: calc(var(--type-4xl) * 1.75);
    line-height: calc(var(--type-4xl-lh) * 1.6);
  }
  .l-h2 {
    font-size: var(--type-4xl);
    line-height: var(--type-4xl-lh);
  }
  .l-lead {
    font-size: var(--type-xl);
    line-height: var(--type-xl-lh);
  }
}

/* ── Header ────────────────────────────────────────────────────────────────────── */
.l-header {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--background);
}
.l-header-row {
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 6);
  min-height: calc(var(--space) * 16);
}
/* The brand is the design system's .wordmark (after kvitnyk.com); here only its size and colour. */
.l-brand {
  color: var(--foreground);
  font-size: var(--type-2xl);
}
.l-nav {
  display: none;
  gap: calc(var(--space) * 6);
  margin-inline-start: calc(var(--space) * 4);
  color: var(--muted-foreground);
  font-size: var(--type-sm);
  line-height: var(--type-sm-lh);
  font-weight: var(--weight-medium);
}
.l-nav a {
  color: inherit;
  text-decoration: none;
}
.l-nav a:hover {
  color: var(--foreground);
}
.l-header-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 2);
  margin-inline-start: auto;
}
.l-header-cta {
  display: none;
}
/* The phone menu: native <details>, so it opens with JavaScript off. */
.l-menu {
  position: relative;
}
.l-menu > summary {
  list-style: none;
  cursor: pointer;
}
.l-menu > summary::-webkit-details-marker {
  display: none;
}
.l-menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + calc(var(--space) * 2));
  display: grid;
  gap: calc(var(--space) * 1);
  min-width: calc(var(--space) * 56);
  padding: calc(var(--space) * 2);
  border: 1px solid var(--border);
  border-radius: var(--corner-lg);
  background: var(--card);
  box-shadow: var(--elevation-lg);
}
.l-menu-panel a:not(.btn) {
  padding: calc(var(--space) * 2.5) calc(var(--space) * 3);
  border-radius: var(--corner-md);
  color: var(--foreground);
  text-decoration: none;
}
.l-menu-panel a:not(.btn):hover {
  background: var(--accent);
}
@container site (min-width: 64rem) {
  .l-nav,
  .l-header-cta {
    display: flex;
  }
  .l-menu {
    display: none;
  }
}

/* ── Sections ──────────────────────────────────────────────────────────────────── */
.l-section {
  padding-block: calc(var(--space) * 16);
  scroll-margin-top: calc(var(--space) * 16);
}
.l-section + .l-section {
  border-top: 1px solid var(--border-subtle);
}
.l-section-head {
  display: grid;
  gap: calc(var(--space) * 3);
  max-width: calc(var(--space) * 180);
  margin-bottom: calc(var(--space) * 10);
}
@container site (min-width: 64rem) {
  .l-section {
    padding-block: calc(var(--space) * 24);
  }
  .l-section-head {
    margin-bottom: calc(var(--space) * 14);
  }
}

/* ── Hero ──────────────────────────────────────────────────────────────────────── */
/* Graph paper behind the first screen (after kvitnyk.com): hairlines in --border-subtle every
   72 px, faded into the ground before the section ends. The fade is the first layer, so it is
   painted over the rules; the copy and the phone sit on top, untouched. Hero only. */
.l-hero {
  padding-block: calc(var(--space) * 10) calc(var(--space) * 2);
  background:
    linear-gradient(to bottom, transparent 40%, var(--background) 100%),
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-position: 0 0, center top, center top;
  background-size: 100% 100%, calc(var(--space) * 18) calc(var(--space) * 18), calc(var(--space) * 18) calc(var(--space) * 18);
}
.l-hero-grid {
  display: grid;
  gap: calc(var(--space) * 12);
}
.l-hero-copy {
  display: grid;
  align-content: start;
  gap: calc(var(--space) * 6);
}
.l-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--space) * 3);
}
.l-cta-mail {
  display: grid;
  gap: calc(var(--space) * 1);
}
.l-cta-mail a {
  width: fit-content;
}
.l-hero-visual {
  position: relative;
  display: grid;
  justify-items: center;
  padding-block: calc(var(--space) * 4) calc(var(--space) * 20);
}
@container site (min-width: 64rem) {
  .l-hero {
    padding-block: calc(var(--space) * 20) calc(var(--space) * 4);
  }
  .l-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: calc(var(--space) * 16);
  }
  .l-hero-copy {
    gap: calc(var(--space) * 7);
  }
  .l-hero-visual {
    padding-block: 0 calc(var(--space) * 14);
  }
}

/* A phone showing the payer page: the page's own markup, cropped to its first screen. A device,
   not a control, so its corners are a phone's (44 px), not the system's minimal ones; a thin
   bezel with a lighter edge, and the camera island above the page. */
.l-device {
  position: relative;
  width: min(100%, calc(var(--space) * 90));
  height: calc(var(--space) * 150);
  overflow: hidden;
  padding-top: calc(var(--space) * 8);
  border: calc(var(--space) * 2) solid var(--primary);
  border-radius: calc(var(--space) * 11);
  background: var(--background);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 55%, var(--background)), var(--elevation-lg);
}
.l-device::before {
  content: "";
  position: absolute;
  top: calc(var(--space) * 2);
  left: 50%;
  width: calc(var(--space) * 22);
  height: calc(var(--space) * 5.5);
  border-radius: var(--corner-full);
  background: var(--primary);
  translate: -50% 0;
}
.l-device::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: calc(var(--space) * 16);
  background: linear-gradient(to bottom, transparent, var(--background));
  pointer-events: none;
}
.l-device-short {
  height: calc(var(--space) * 120);
}

/* Cards that float over the hero phone: the dashboard row and the webhook that follow a payment. */
.l-float {
  position: absolute;
  display: grid;
  gap: calc(var(--space) * 2);
  width: calc(var(--space) * 72);
  padding: calc(var(--space) * 4);
  border: 1px solid var(--border);
  border-radius: var(--corner-xl);
  background: var(--card);
  box-shadow: var(--elevation-lg);
  font-size: var(--type-sm);
  line-height: var(--type-sm-lh);
}
/* Placed over the lower half of the QR, so the payer page's amount, state and button stay visible. */
.l-float-top {
  top: calc(var(--space) * 92);
  inset-inline-start: 0;
}
.l-float-bottom {
  bottom: 0;
  inset-inline-end: 0;
}
.l-float-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space) * 2);
}
.l-float-hook {
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 2);
  color: var(--muted-foreground);
  font-family: var(--typeface-mono);
  font-size: var(--type-xs);
  line-height: var(--type-xs-lh);
  font-variant-ligatures: none;
}
.l-dot {
  flex-shrink: 0;
  width: calc(var(--space) * 2);
  height: calc(var(--space) * 2);
  border-radius: var(--corner-full);
  background: var(--success);
}
@container site (min-width: 64rem) {
  .l-float-top {
    top: calc(var(--space) * 100);
    inset-inline-start: calc(var(--space) * -4);
  }
  .l-float-bottom {
    bottom: 0;
    inset-inline-end: calc(var(--space) * -4);
  }
}

/* The payer page inside a device: a copy of the payer project's p-* arrangement, renamed so the
   landing never depends on the app's classes. Primitives and partials keep their own classes. */
.l-pay {
  display: grid;
  gap: calc(var(--space) * 5);
  padding: calc(var(--space) * 6) calc(var(--space) * 5);
  font-size: var(--body-size);
  line-height: var(--body-lh);
}
.l-pay-head {
  display: grid;
  gap: calc(var(--space) * 1);
}
.l-pay-merchant {
  font-weight: var(--weight-semibold);
}
.l-pay-order {
  color: var(--muted-foreground);
}
.l-pay-amount {
  margin-top: calc(var(--space) * 2);
  font-size: var(--type-4xl);
  line-height: var(--type-4xl-lh);
}
.l-pay-state {
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 2.5);
  color: var(--muted-foreground);
}
.l-pay-state-mark {
  flex-shrink: 0;
  width: calc(var(--space) * 2.5);
  height: calc(var(--space) * 2.5);
  border-radius: var(--corner-full);
  background: var(--neutral);
}
.l-pay-primary {
  display: grid;
  gap: calc(var(--space) * 2);
  justify-items: center;
  text-align: center;
}
.l-pay-block {
  width: 100%;
}

/* ── Facts under the hero ──────────────────────────────────────────────────────── */
.l-facts {
  display: grid;
  gap: calc(var(--space) * 6);
  padding-block: calc(var(--space) * 8);
  border-top: 1px solid var(--border);
}
.l-fact {
  display: grid;
  gap: calc(var(--space) * 2);
}
@container site (min-width: 64rem) {
  .l-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--space) * 10);
    padding-block: calc(var(--space) * 10);
  }
}

/* ── How it works ──────────────────────────────────────────────────────────────── */
.l-steps {
  display: grid;
  gap: calc(var(--space) * 4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.l-step {
  display: grid;
  align-content: start;
  gap: calc(var(--space) * 3);
  padding: calc(var(--space) * 6);
}
.l-step-no {
  color: var(--muted-foreground);
  font-family: var(--typeface-mono);
  font-size: var(--type-sm);
  line-height: var(--type-sm-lh);
  font-weight: var(--weight-semibold);
  font-variant-ligatures: none;
}
@container site (min-width: 64rem) {
  .l-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* The purpose line with its code highlighted: the whole mechanism in one string. */
.l-purpose {
  display: grid;
  gap: calc(var(--space) * 4);
  margin-top: calc(var(--space) * 4);
  padding: calc(var(--space) * 6);
}
.l-purpose-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--space) * 3);
  font-family: var(--typeface-mono);
  font-size: var(--type-base);
  line-height: var(--type-base-lh);
  font-variant-ligatures: none;
}
.l-purpose-token {
  padding: calc(var(--space) * 0.5) calc(var(--space) * 2);
  border-radius: var(--corner-sm);
  background: var(--brand);
  color: var(--brand-foreground);
  font-weight: var(--weight-semibold);
}
.l-purpose-rest {
  color: var(--muted-foreground);
}
@container site (min-width: 64rem) {
  .l-purpose {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--space) * 10);
    padding: calc(var(--space) * 8) calc(var(--space) * 10);
  }
  .l-purpose-line {
    flex-wrap: nowrap;
    font-size: var(--type-xl);
    line-height: var(--type-xl-lh);
  }
}

/* ── What the merchant gets: a bento grid of cards ────────────────────────────── */
.l-bento {
  display: grid;
  gap: calc(var(--space) * 4);
}
.l-feature {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 5);
  padding: calc(var(--space) * 6);
  overflow: hidden;
}
.l-feature-copy {
  display: grid;
  gap: calc(var(--space) * 2);
  max-width: calc(var(--space) * 130);
}
.l-feature-visual {
  flex: 1;
  display: grid;
  align-content: start;
  justify-items: center;
  margin-inline: calc(var(--space) * -6);
  margin-bottom: calc(var(--space) * -6);
  padding: calc(var(--space) * 6) calc(var(--space) * 6) 0;
  border-top: 1px solid var(--border-subtle);
  background: var(--muted);
}
.l-feature-visual-pad {
  padding-bottom: calc(var(--space) * 6);
}
@container site (min-width: 64rem) {
  .l-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: calc(var(--space) * 5);
  }
  .l-span-5 { grid-column: span 5; }
  .l-span-6 { grid-column: span 6; }
  .l-span-7 { grid-column: span 7; }
  .l-feature {
    padding: calc(var(--space) * 8);
  }
  .l-feature-visual {
    margin-inline: calc(var(--space) * -8);
    margin-bottom: calc(var(--space) * -8);
    padding: calc(var(--space) * 8) calc(var(--space) * 8) 0;
  }
  .l-feature-visual-pad {
    padding-bottom: calc(var(--space) * 8);
  }
}

/* A dashboard fragment: the shell's chrome, reduced, around the real tile and table markup. */
.l-app {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--corner-lg) var(--corner-lg) 0 0;
  background: var(--background);
  font-size: var(--type-sm);
  line-height: var(--type-sm-lh);
}
.l-app-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 3);
  padding: calc(var(--space) * 3) calc(var(--space) * 4);
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.l-app-body {
  display: grid;
  gap: calc(var(--space) * 4);
  padding: calc(var(--space) * 4);
}
.l-app .table td {
  white-space: nowrap;
}
.l-app .l-wide {
  display: none;
}
@container site (min-width: 64rem) {
  .l-app .l-wide {
    display: table-cell;
  }
}
.l-app-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--space) * 2);
}

/* Code on an ink ground: the API card. Lime on ink is the system's own inverted pattern. */
.l-code {
  display: block;
  width: 100%;
  margin: 0;
  padding: calc(var(--space) * 5);
  overflow-x: auto;
  border-radius: var(--corner-lg) var(--corner-lg) 0 0;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--typeface-mono);
  font-size: var(--type-xs);
  line-height: var(--type-sm-lh);
  font-variant-ligatures: none;
}
/* One block per line: a line break never depends on a whitespace-only text node, and the
   markup's own indentation between lines collapses. */
.l-code-line {
  display: block;
  white-space: pre;
}
.l-code-gap {
  height: var(--type-sm-lh);
}
.l-code-dim {
  color: color-mix(in oklab, var(--primary-foreground) 55%, transparent);
}
.l-code-hi {
  color: var(--attention-foreground);
}

/* The quittance check, as the merchant sees it (compare-pane markup, read-only). */
.l-compare {
  width: 100%;
  padding: calc(var(--space) * 4);
  overflow-x: auto;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--corner-lg) var(--corner-lg) 0 0;
  background: var(--card);
  font-size: var(--type-xs);
  line-height: var(--type-xs-lh);
}

/* The phone keeps two rows of four, so the three columns fit a 390 px screen. */
.l-compare .l-wide-row {
  display: none;
}
@container site (min-width: 64rem) {
  .l-compare .l-wide-row {
    display: table-row;
  }
  .l-compare {
    font-size: var(--type-sm);
    line-height: var(--type-sm-lh);
  }
}
.l-compare-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space) * 2);
  padding-top: calc(var(--space) * 4);
}

/* Small visuals inside the two narrow cards. */
.l-csv {
  width: 100%;
  padding: calc(var(--space) * 4);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--corner-lg);
  background: var(--card);
  color: var(--muted-foreground);
  font-family: var(--typeface-mono);
  font-size: var(--type-xs);
  line-height: var(--type-sm-lh);
  font-variant-ligatures: none;
  white-space: nowrap;
  mask-image: linear-gradient(to right, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent);
}
.l-csv b {
  color: var(--foreground);
  font-weight: var(--weight-semibold);
}
.l-testmode {
  display: grid;
  gap: calc(var(--space) * 3);
  width: 100%;
  padding: calc(var(--space) * 4);
  border: 1px solid var(--border);
  border-radius: var(--corner-lg);
  background: var(--card);
  font-size: var(--type-sm);
  line-height: var(--type-sm-lh);
}
.l-testmode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space) * 3);
}

/* ── Comparison with card acquiring ───────────────────────────────────────────── */
.l-compare-grid {
  display: grid;
  gap: calc(var(--space) * 4);
}
/* On a phone each row stacks, and each cell carries its column name from data-label; from
   64rem it is an ordinary three-column table. */
.l-vs {
  padding: 0;
  overflow: hidden;
}
.l-vs table,
.l-vs tbody,
.l-vs tr,
.l-vs th,
.l-vs td {
  display: block;
}
.l-vs thead {
  display: none;
}
.l-vs table {
  width: 100%;
  border-collapse: collapse;
}
.l-vs tr {
  padding: calc(var(--space) * 4) calc(var(--space) * 5);
  border-bottom: 1px solid var(--border-subtle);
}
.l-vs tr:last-child {
  border-bottom: 0;
}
.l-vs tbody th {
  margin-bottom: calc(var(--space) * 2);
  font-weight: var(--weight-semibold);
  text-align: start;
}
.l-vs td {
  display: grid;
  grid-template-columns: calc(var(--space) * 28) minmax(0, 1fr);
  gap: calc(var(--space) * 3);
  padding-block: calc(var(--space) * 1);
}
.l-vs td::before {
  content: attr(data-label);
  color: var(--muted-foreground);
  font-family: var(--typeface-mono);
  font-size: var(--type-micro);
  line-height: var(--type-sm-lh);
  letter-spacing: var(--letter-caps);
  text-transform: uppercase;
}
.l-vs-ours {
  font-weight: var(--weight-semibold);
}
@container site (min-width: 64rem) {
  .l-vs table {
    display: table;
  }
  .l-vs thead {
    display: table-header-group;
  }
  .l-vs tbody {
    display: table-row-group;
  }
  .l-vs tr {
    display: table-row;
    padding: 0;
  }
  .l-vs th,
  .l-vs td {
    display: table-cell;
    padding: calc(var(--space) * 4) calc(var(--space) * 5);
    border-bottom: 1px solid var(--border-subtle);
    text-align: start;
    vertical-align: top;
  }
  .l-vs td::before {
    content: none;
  }
  .l-vs tr:last-child > * {
    border-bottom: 0;
  }
  .l-vs thead th {
    background: var(--muted);
  }
  .l-vs tbody th {
    width: 30%;
    margin: 0;
    color: var(--muted-foreground);
    font-weight: var(--weight-regular);
  }
  .l-vs-ours {
    background: var(--brand-soft);
  }
}
.l-example {
  display: grid;
  align-content: start;
  gap: calc(var(--space) * 5);
  padding: calc(var(--space) * 6);
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.l-example .caps {
  color: color-mix(in oklab, var(--primary-foreground) 65%, transparent);
}
.l-example-figures {
  display: grid;
  gap: calc(var(--space) * 4);
}
.l-example-figure {
  display: grid;
  gap: calc(var(--space) * 1);
}
.l-example-value {
  font-size: var(--type-4xl);
  line-height: var(--type-4xl-lh);
}
.l-example-value.is-ours {
  color: var(--attention-foreground);
}
.l-example-note {
  color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
  font-size: var(--type-sm);
  line-height: var(--type-sm-lh);
}
/* The savings calculator (M1) inside the example card. Without the script the controls stay
   hidden and the card is the example it always was, for its default turnover and rate; the script
   shows them and recomputes the figures. The rate chips are radios, the turnover a range. */
.l-calc-controls {
  display: grid;
  gap: calc(var(--space) * 5);
}
.l-calc-controls[hidden],
.l-calc [data-calc-static][hidden] {
  display: none;
}
.l-calc-turnover {
  display: grid;
  gap: calc(var(--space) * 2);
}
.l-calc-turnover-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--space) * 2);
}
.l-calc-turnover-value {
  font-size: var(--type-xl);
  line-height: var(--type-xl-lh);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.l-calc-range {
  width: 100%;
  height: calc(var(--space) * 6);
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.l-calc-ends {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--space) * 2);
}
.l-calc-rates {
  display: grid;
  gap: calc(var(--space) * 2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.l-calc-rates legend {
  padding: 0;
}
.l-calc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space) * 2);
}
.l-calc-chip {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--space) * 8);
  padding-inline: calc(var(--space) * 3);
  border: 1px solid color-mix(in oklab, var(--primary-foreground) 28%, transparent);
  border-radius: var(--corner-sm);
  font-family: var(--typeface-mono);
  font-size: var(--type-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--duration) var(--easing), border-color var(--duration) var(--easing);
}
.l-calc-chip:has(:checked) {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--primary);
}
.l-calc-chip:has(:focus-visible) {
  outline: var(--focus-width) solid var(--brand);
  outline-offset: 2px;
}
.l-calc-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space) * 40), 1fr));
  align-items: end;
  gap: calc(var(--space) * 4);
}
.l-calc-pair .l-example-value {
  font-size: var(--type-2xl);
  line-height: var(--type-2xl-lh);
}
.l-calc-year {
  color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
  font-variant-numeric: tabular-nums;
}
@container site (min-width: 64rem) {
  .l-compare-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: calc(var(--space) * 5);
  }
  .l-example {
    padding: calc(var(--space) * 8);
  }
}

/* ── Pricing: everything free (H1), the services by agreement (H3) ───────────── */
/* Two tiles side by side from 64rem: the free plan on the left, everything else — why it's free,
   services by agreement, the terms-change promise — gathered into one card on the right, so the
   section reads as one decision (free vs. agreed work) instead of five stacked blocks. */
.l-pricing-grid {
  display: grid;
  gap: calc(var(--space) * 5);
  align-items: stretch;
}
.l-plan {
  display: grid;
  align-content: start;
  gap: calc(var(--space) * 5);
  padding: calc(var(--space) * 7);
}
.l-plan-head {
  display: grid;
  align-content: start;
  gap: calc(var(--space) * 3);
}
.l-plan-rate {
  font-size: calc(var(--type-4xl) * 2);
  line-height: calc(var(--type-4xl-lh) * 1.8);
}
.l-plan-rate small {
  margin-inline-start: calc(var(--space) * 1);
  font-size: var(--type-4xl);
}
.l-plan-list {
  display: grid;
  gap: calc(var(--space) * 3);
  margin: 0;
  padding: calc(var(--space) * 5) 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}
.l-plan-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--space) * 3);
}
.l-check {
  display: inline-grid;
  place-items: center;
  width: calc(var(--space) * 5);
  height: calc(var(--space) * 5);
  margin-top: calc(var(--space) * 0.5);
  border-radius: var(--corner-full);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: var(--type-xs);
  line-height: 1;
  font-weight: var(--weight-bold);
}
.l-plan-featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--elevation-sm);
}
.l-plan-foot {
  margin: calc(var(--space) * 6) 0 0;
  color: var(--muted-foreground);
  text-align: center;
}
/* The second tile: a short why-it's-free line, the services as a compact list (not six cards), one CTA. */
.l-services-card {
  display: grid;
  align-content: start;
  gap: calc(var(--space) * 5);
  padding: calc(var(--space) * 7);
}
.l-services-compact {
  display: grid;
  gap: calc(var(--space) * 3);
  margin: 0;
  padding: calc(var(--space) * 5) 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}
.l-services-compact li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: calc(var(--space) * 3);
}
.l-services-compact .caps {
  white-space: nowrap;
  color: var(--muted-foreground);
}
.l-services-card .btn {
  justify-self: start;
}
@container site (min-width: 64rem) {
  .l-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .l-plan,
  .l-services-card {
    padding: calc(var(--space) * 10);
  }
}

/* ── Who it is for · trust ─────────────────────────────────────────────────────── */
.l-two {
  display: grid;
  gap: calc(var(--space) * 4);
}
.l-panel {
  display: grid;
  align-content: start;
  gap: calc(var(--space) * 5);
  padding: calc(var(--space) * 7);
}
.l-list {
  display: grid;
  gap: calc(var(--space) * 4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.l-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--space) * 3);
}
.l-list-no {
  display: inline-grid;
  place-items: center;
  width: calc(var(--space) * 7);
  height: calc(var(--space) * 7);
  border-radius: var(--corner-full);
  background: var(--muted);
  font-family: var(--typeface-mono);
  font-size: var(--type-xs);
  line-height: 1;
  font-weight: var(--weight-semibold);
}
.l-trust {
  display: grid;
  gap: calc(var(--space) * 4);
}
.l-trust-item {
  display: grid;
  align-content: start;
  gap: calc(var(--space) * 3);
  padding: calc(var(--space) * 6);
}
@container site (min-width: 64rem) {
  .l-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--space) * 5);
  }
  .l-panel {
    padding: calc(var(--space) * 10);
  }
  .l-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--space) * 5);
  }
}

/* ── FAQ: native <details>, open with JavaScript off ──────────────────────────── */
.l-faq {
  display: grid;
  border-top: 1px solid var(--border);
}
.l-faq details {
  border-bottom: 1px solid var(--border);
}
.l-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space) * 4);
  padding-block: calc(var(--space) * 5);
  font-size: var(--type-lg);
  line-height: var(--type-lg-lh);
  font-weight: var(--weight-semibold);
  list-style: none;
  cursor: pointer;
}
.l-faq summary::-webkit-details-marker {
  display: none;
}
.l-faq summary::after {
  content: "+";
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: calc(var(--space) * 8);
  height: calc(var(--space) * 8);
  border: 1px solid var(--border);
  border-radius: var(--corner-full);
  background: var(--card);
  color: var(--muted-foreground);
  font-family: var(--typeface-mono);
  font-weight: var(--weight-regular);
}
.l-faq details[open] summary::after {
  content: "−";
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-foreground);
}
.l-faq-answer {
  max-width: calc(var(--space) * 170);
  padding-bottom: calc(var(--space) * 6);
  color: var(--muted-foreground);
  text-wrap: pretty;
}
@container site (min-width: 64rem) {
  .l-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    gap: calc(var(--space) * 16);
    align-items: start;
  }
  .l-faq-grid .l-section-head {
    margin-bottom: 0;
  }
}

/* ── Final call to action: the one ink band ───────────────────────────────────── */
.l-band {
  padding-block: calc(var(--space) * 16);
  background: var(--primary);
  color: var(--primary-foreground);
}
.l-band-grid {
  display: grid;
  gap: calc(var(--space) * 8);
}
.l-band .l-h2 {
  color: var(--primary-foreground);
}
.l-band .l-lead {
  color: color-mix(in oklab, var(--primary-foreground) 72%, transparent);
}
.l-band-mail {
  color: var(--attention-foreground);
  font-family: var(--typeface-mono);
  font-size: var(--type-lg);
  line-height: var(--type-lg-lh);
  font-variant-ligatures: none;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--attention-foreground) 45%, transparent);
  text-underline-offset: 0.25em;
}
.l-band-actions {
  display: grid;
  align-content: center;
  gap: calc(var(--space) * 4);
  justify-items: start;
}
.l-band-note {
  color: color-mix(in oklab, var(--primary-foreground) 60%, transparent);
  font-size: var(--type-sm);
  line-height: var(--type-sm-lh);
}
@container site (min-width: 64rem) {
  .l-band {
    padding-block: calc(var(--space) * 24);
  }
  .l-band-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--space) * 16);
  }
}

/* ── Footer ────────────────────────────────────────────────────────────────────── */
.l-footer {
  padding-block: calc(var(--space) * 10);
  color: var(--muted-foreground);
  font-size: var(--type-sm);
  line-height: var(--type-sm-lh);
}
.l-footer-grid {
  display: grid;
  gap: calc(var(--space) * 6);
}
.l-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space) * 2) calc(var(--space) * 6);
}
.l-footer-links a {
  color: var(--foreground);
}
.l-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--space) * 3);
  padding-top: calc(var(--space) * 6);
  border-top: 1px solid var(--border);
}
@container site (min-width: 64rem) {
  .l-footer-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

/* ── The оферта page ───────────────────────────────────────────────────────────── */
.l-doc {
  display: grid;
  gap: calc(var(--space) * 8);
  padding-block: calc(var(--space) * 10) calc(var(--space) * 16);
}
.l-doc-head {
  display: grid;
  gap: calc(var(--space) * 3);
  padding-bottom: calc(var(--space) * 8);
  border-bottom: 1px solid var(--border);
}
.l-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space) * 2);
}
.l-toc {
  display: grid;
  gap: calc(var(--space) * 1);
  align-content: start;
}
.l-toc ol {
  display: grid;
  gap: calc(var(--space) * 0.5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.l-toc li {
  counter-increment: toc;
}
.l-toc a {
  display: grid;
  grid-template-columns: calc(var(--space) * 7) minmax(0, 1fr);
  padding: calc(var(--space) * 1.5) calc(var(--space) * 2);
  border-radius: var(--corner-md);
  color: var(--muted-foreground);
  font-size: var(--type-sm);
  line-height: var(--type-sm-lh);
  text-decoration: none;
}
.l-toc a::before {
  content: counter(toc) ".";
  font-family: var(--typeface-mono);
  font-variant-ligatures: none;
}
.l-toc a:hover,
.l-toc a[aria-current="true"] {
  background: var(--accent);
  color: var(--foreground);
}
.l-toc-mobile {
  border: 1px solid var(--border);
  border-radius: var(--corner-lg);
  background: var(--card);
}
.l-toc-mobile > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--control-lg);
  padding-inline: calc(var(--space) * 4);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.l-toc-mobile .l-toc {
  padding: 0 calc(var(--space) * 2) calc(var(--space) * 3);
}
.l-toc-desktop {
  display: none;
}
.l-doc-body {
  display: grid;
  gap: calc(var(--space) * 10);
  max-width: calc(var(--space) * 180);
}
.l-clause {
  display: grid;
  gap: calc(var(--space) * 4);
  scroll-margin-top: calc(var(--space) * 20);
}
.l-clause-title {
  display: flex;
  gap: calc(var(--space) * 3);
  font-size: var(--type-xl);
  line-height: var(--type-xl-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-tight);
}
.l-clause-no {
  color: var(--muted-foreground);
  font-family: var(--typeface-mono);
  font-variant-ligatures: none;
}
/* The founders' text goes here; the canvas draws its measure, not its words. */
.l-slot {
  display: grid;
  gap: calc(var(--space) * 2.5);
  padding: calc(var(--space) * 5);
  border: 1px dashed var(--input);
  border-radius: var(--corner-lg);
}
.l-slot-line {
  height: calc(var(--space) * 2.5);
  border-radius: var(--corner-full);
  background: var(--muted);
}
.l-slot-line:nth-child(3n) {
  width: 72%;
}
.l-slot-line:nth-child(4n + 1) {
  width: 94%;
}
.l-slot-label {
  color: var(--muted-foreground);
  font-size: var(--type-sm);
  line-height: var(--type-sm-lh);
}
@container site (min-width: 64rem) {
  .l-doc {
    grid-template-columns: calc(var(--space) * 72) minmax(0, 1fr);
    gap: calc(var(--space) * 16);
    padding-block: calc(var(--space) * 16) calc(var(--space) * 24);
  }
  .l-doc-head {
    grid-column: 1 / -1;
  }
  .l-toc-desktop {
    display: grid;
    position: sticky;
    top: calc(var(--space) * 22);
  }
  .l-toc-mobile {
    display: none;
  }
}

/* ── 404 ───────────────────────────────────────────────────────────────────────── */
.l-lost {
  display: grid;
  gap: calc(var(--space) * 8);
  padding-block: calc(var(--space) * 16) calc(var(--space) * 20);
}
.l-lost-code {
  font-family: var(--typeface-mono);
  font-size: calc(var(--type-4xl) * 2.5);
  line-height: calc(var(--type-4xl-lh) * 2.2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-display);
  font-variant-ligatures: none;
}
.l-lost-copy {
  display: grid;
  gap: calc(var(--space) * 4);
  max-width: calc(var(--space) * 150);
}
.l-lost-hint {
  display: grid;
  gap: calc(var(--space) * 2);
  max-width: calc(var(--space) * 150);
  padding: calc(var(--space) * 5);
}
@container site (min-width: 64rem) {
  .l-lost {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: calc(var(--space) * 16);
    padding-block: calc(var(--space) * 28) calc(var(--space) * 32);
  }
  .l-lost-code {
    font-size: calc(var(--type-4xl) * 4.5);
    line-height: calc(var(--type-4xl-lh) * 3.9);
  }
}