/* =========================================================================
   Layout + components, after onbackup.co.uk (adopted 2026-09-24).

   The character of the reference, kept here: a warm Bone canvas, type that
   carries the hierarchy at weight 500 with tight tracking, uppercase mono
   labels led by a single accent dot, Paper cards on Stone hairlines with a
   quiet neutral shadow, a product mockup floated on the right of the hero,
   one full-bleed Ink band in the middle of the page and an Ink footer. No
   decorative wash anywhere: the reference has none, and a blurred gradient
   behind a product shot is the fastest way to make a page look generated.

   This file is byte identical in lima/ and saga/. The two sites differ only
   in the accent block at the end of tokens.css.
   ========================================================================= */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 24px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0; color: var(--ink); font-weight: 500;
  letter-spacing: var(--ls-heading); text-wrap: balance;
}
p  { margin: 0; color: var(--slate); text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
strong { font-weight: 600; color: var(--ink); }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-small); }

.wrap { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: 12px 20px;
  border-radius: 0 0 var(--r-button) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---- Type helpers -------------------------------------------------------- */
.display {
  font-size: clamp(40px, 5.2vw, var(--text-display)); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); font-weight: 500;
}
.h2   { font-size: clamp(27px, 2.9vw, var(--text-h2)); line-height: var(--lh-h2); font-weight: 500; }
.h3   { font-size: clamp(23px, 2.3vw, var(--text-h3)); line-height: var(--lh-h3); font-weight: 500; }
.h4   { font-size: var(--text-h4); line-height: var(--lh-h4); font-weight: 600; letter-spacing: -.02em; }
.lead { font-size: var(--text-lead); line-height: var(--lh-lead); font-weight: 400; color: var(--slate); }
.small   { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); }
.caption { font-size: var(--text-caption); line-height: var(--lh-caption); font-weight: 500; }
.ink { color: var(--ink); }

/* The section label. Mono, wide tracking, uppercase, led by one accent dot.
   It is the reference's most recognizable mark and the only place the accent
   appears above a headline. A label is Slate; the dot carries the color. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 400;
  letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.4;
  color: var(--slate);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* ---- Hero label ----------------------------------------------------------
   The hero carries the same label as every section rather than a filled
   pill, because in this system a filled shape is reserved for a control.
   The markup keeps its own dot element, so the pseudo dot is not added here
   and the dot element takes the accent instead.

   Inline block, not inline flex like .eyebrow. The Turkish Lima label marks
   "digital signage" with lang="en", so that uppercase renders SIGNAGE rather
   than the Turkish dotted form, and in a flex box that inner span and the
   two runs of text beside it each became a column of their own. */
.badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 400;
  letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.4;
  color: var(--slate);
}
.badge-dot {
  display: inline-block; vertical-align: .15em; margin-right: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: var(--text-body); font-weight: 500;
  line-height: 1.5; padding: 11px 22px; letter-spacing: -.01em;
  border-radius: var(--r-button); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-dark { background: var(--ink); }
.btn-dark:hover { background: var(--ink-2); }
/* Doubled class, so a descendant selector such as `.nav-links a` (0,1,1)
   cannot outrank it and leave dark text on a filled button. */
.btn.btn-primary, .btn.btn-dark { color: #fff; }
.btn-outline { background: var(--paper); color: var(--ink); border-color: var(--stone); }
.btn-outline:hover { border-color: var(--ink); background: var(--white); }
.btn-ghost { background: transparent; color: var(--ink); padding-inline: 8px; }
.btn-ghost:hover { color: var(--accent-text); }
.btn-sm { font-size: var(--text-body-sm); padding: 8px 16px; }
.btn-block { width: 100%; }

/* ---- Language strip -------------------------------------------------------
   Offered in place of an automatic redirect, removed 2026-09-03. The markup
   ships in the HTML and this rule keeps it hidden until the head script finds
   a browser language that does not match the page, so it paints with the
   first frame and costs no layout shift. It sits above the sticky nav and
   scrolls away with the page rather than following the reader down.
   Bone on Ink is 16.09:1.
   -------------------------------------------------------------------------- */
.langbar { display: none; background: var(--ink); color: var(--on-ink); }
.lang-hint .langbar { display: block; }
.langbar-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--sp-16);
  padding-block: 10px; font-size: var(--text-body-sm); line-height: 1.4;
}
.langbar a { color: var(--on-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.langbar a:hover { color: var(--on-ink); text-decoration: underline; }
.langbar-close {
  margin-left: auto; padding: 2px 6px; border: 0; background: none;
  color: var(--on-ink); font: inherit; opacity: .75; cursor: pointer;
}
.langbar-close:hover { opacity: 1; }

/* ---- Navigation (sticky) ------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-height);
  background: rgba(241, 239, 232, .88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
}
.nav-inner { display: flex; align-items: center; gap: var(--sp-16); height: var(--nav-height); }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 20px; color: var(--ink); letter-spacing: -.03em;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: var(--r-button); flex: none; }
/* The language switcher and the CTA sit outside .nav-links on purpose, so
   the descendant rule below can never reach them and repaint a filled
   button. */
.nav-links { display: flex; align-items: center; gap: var(--sp-24); margin-left: auto; }
.nav-links a { color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.nav-links a:hover { color: var(--accent-text); text-decoration: none; }
.nav-cta { flex: none; }

/* ---- Language switcher ----------------------------------------------------
   One link, not a pair of two letter codes. The pair set EN beside TR at
   caption size, which ran together into a single string rather than reading
   as two choices, and it left the visitor to work out which half was the
   page they were already on. This names the other language, written in that
   language, so the label says what following it does. The globe marks the
   control as a language choice rather than a fifth section link.
   -------------------------------------------------------------------------- */
.lang { display: inline-flex; flex: none; }
.lang a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid var(--stone);
  border-radius: var(--r-button); background: var(--paper);
  font-size: var(--text-body-sm); font-weight: 500;
  color: var(--slate); line-height: 1.4; white-space: nowrap;
}
.lang a:hover {
  color: var(--ink); background: var(--white);
  border-color: var(--ink); text-decoration: none;
}
.lang-globe { width: 15px; height: 15px; flex: none; }

/* ---- Sections ------------------------------------------------------------ */
.section { padding-block: var(--section-gap); }
.section-tight { padding-block: var(--sp-48); }
.section-head { max-width: 720px; display: grid; gap: var(--sp-16); margin-bottom: var(--sp-48); justify-items: start; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(48px, 6vw, 88px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: var(--sp-64); align-items: center;
}
.hero-copy { display: grid; gap: var(--sp-24); justify-items: start; }
.hero-copy .lead { max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { display: flex; flex-wrap: wrap; gap: var(--sp-16) var(--sp-24); }
.hero-note li { display: flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); color: var(--slate); }

/* The product visual. No wash behind it: see the head of this file. */
.visual { position: relative; }

/* The trailer, first in the Lima hero. 16:9 at the full content width, on
   Ink so the frame never flashes white before the poster arrives. Its two
   buttons sit on the film's lower left, on solid Ink so they read over any
   frame. Once the visitor turns the sound on, the browser's own controls
   take over and these two step aside. Saga carries the rules unused, because
   this file is byte-identical in both sites. */
.film {
  margin: 0 0 var(--sp-64); position: relative; aspect-ratio: 16 / 9; max-width: 100%;
  background: var(--ink); border-radius: var(--r-product); overflow: hidden;
  box-shadow: var(--shadow-float), var(--shadow-sm);
}
/* The hero padding is sized for a headline; over a film it reads as a gap. */
.hero:has(> .wrap > .film) { padding-top: clamp(24px, 4vw, 56px); }
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-controls { position: absolute; left: var(--sp-16); bottom: var(--sp-16); display: flex; gap: 8px; }
.film-pause { padding-inline: 10px; }
.film-pause svg { display: block; fill: currentColor; }
.film .i-play, .film:not(.is-playing) .i-pause { display: none; }
.film:not(.is-playing) .i-play { display: inline; }
.film.is-native .film-controls { display: none; }
.film-pause[hidden] { display: none; }   /* .btn sets display, which beats the attribute */

/* ---- Cards --------------------------------------------------------------- */
.card {
  background: var(--paper); border: 1px solid var(--stone);
  border-radius: var(--r-card); padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
}
.product-card {
  background: var(--white); border: 1px solid var(--stone);
  border-radius: var(--r-product); box-shadow: var(--shadow-float), var(--shadow-sm);
  overflow: hidden;
}

/* ---- Platform strip -------------------------------------------------------
   The reference's "backs up every layer" row: a mono label, then each item
   as a small bordered mono chip, on a Paper band between two hairlines. */
.trust { border-block: 1px solid var(--stone); background: var(--paper); }
.trust-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-block: var(--sp-24); }
.trust-label {
  flex-basis: 100%; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 400;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--slate);
}
.trust-item {
  font-family: var(--font-mono); font-size: var(--text-caption); font-weight: 400;
  color: var(--slate); line-height: 1.4;
  padding: 6px 10px; border: 1px solid var(--stone); border-radius: var(--r-small);
  background: var(--bone);
}

/* ---- Split sections (alternating) ---------------------------------------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-64); align-items: center;
}
.split + .split { margin-top: var(--sp-96); }
.split-copy { display: grid; gap: var(--sp-16); align-content: start; justify-items: start; }
.split-copy > p { max-width: 60ch; }
.split.reverse .split-copy { order: 2; }
.split.reverse .visual { order: 1; }

.checks { display: grid; gap: var(--sp-16); margin-top: var(--sp-8); }
.checks li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  font-size: var(--text-body); color: var(--slate);
}
.checks strong { color: var(--ink); font-weight: 600; }
.check-icon { width: 20px; height: 20px; margin-top: 3px; color: var(--accent); flex: none; }

/* ---- Numbered two-column list ----------------------------------------------
   Replaces the usual grid of icon-in-a-rounded-square cards, which reads as
   a template. The reference numbers its platform cards 01, 02, 03 in the mono
   face and that numbering is what is taken from it; the cards themselves are
   not. Each item stays a plain block under a Stone rule, and the number is
   drawn by a counter so the markup did not have to change. */
.plainlist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-64);
  counter-reset: item;
}
.plainlist > div { padding: var(--sp-24) 0; border-top: 1px solid var(--stone); counter-increment: item; }
.plainlist > div::before {
  content: counter(item, decimal-leading-zero);
  display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: .1em;
  color: var(--accent-text);
}
.plainlist h3 { font-size: var(--text-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 8px; }
.plainlist p { font-size: var(--text-body); line-height: var(--lh-body); }

/* Two columns of running prose, used where a term list was cut. It keeps the
   measure of the list it replaces, so the section does not turn into one long
   line of text the width of the page, and it carries the same rule above so
   the page still reads as one system. */
.afterword {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-64); row-gap: var(--sp-24);
  margin-top: var(--sp-64); padding-top: var(--sp-24);
  border-top: 1px solid var(--stone);
}
.afterword p { font-size: var(--text-body); line-height: var(--lh-body); }
/* Two paragraphs of comparable length, and nothing else. Three of them put a
   one line paragraph alone in the first cell and left the second row half
   empty; one on its own leaves the right column blank. Both happened here,
   both were introduced to move a metric rather than to say something, and
   both shipped because the page was measured and not looked at. A single
   child at least spans the full width now, but the content rule is the real
   guard and tools/check-layout.sh enforces it. */
.afterword > p:only-child { grid-column: 1 / -1; max-width: 68ch; }

/* ---- Stat row ------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-24); }
.stat { display: grid; gap: 4px; }
.stat b { font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -.04em; color: var(--ink); }
.stat span { font-size: var(--text-body-sm); color: var(--slate); }

/* ---- The Ink band ---------------------------------------------------------
   The reference's "how it works" section: one full-bleed dark band in the
   middle of the page. The markup holds it as a box inside the page measure,
   so the band is drawn by a spread shadow the width of the viewport and a
   clip that lets it reach the section's own padding above and below, and
   nothing further. The content stays on the page grid, no horizontal scroll
   is created, and no section markup had to change. */
.deploy {
  background: var(--ink); color: var(--on-ink);
  box-shadow: 0 0 0 100vmax var(--ink);
  clip-path: inset(calc(-1 * var(--section-gap)) -100vmax);
}
.deploy h2, .deploy h3 { color: var(--on-ink); }
.deploy p { color: var(--on-ink-muted); }
.deploy .eyebrow { color: var(--accent-on-ink); }
.deploy .eyebrow::before { background: var(--accent-on-ink); }
.deploy strong, .deploy .ink { color: var(--on-ink); }   /* a lead-in on the dark band, which plain .ink would paint ink on ink */
.deploy-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--sp-48); align-items: center;
}
.code {
  background: var(--ink-2); border: 1px solid rgba(241, 239, 232, .12);
  border-radius: var(--r-product); overflow: hidden;
}
.code-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px var(--sp-16); border-bottom: 1px solid rgba(241, 239, 232, .12);
  font-family: var(--font-mono); font-size: var(--text-caption); color: var(--on-ink-muted); font-weight: 400;
}
.code-dots { display: flex; gap: 6px; margin-right: 4px; }
.code-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(241, 239, 232, .18); }
.code pre {
  margin: 0; padding: var(--sp-16); overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #e4e2da;
}
.code .c { color: var(--on-ink-muted); }
.code .k { color: var(--accent-on-ink); }
.copy-btn {
  margin-left: auto; background: rgba(241, 239, 232, .08); color: var(--on-ink);
  border: 1px solid rgba(241, 239, 232, .16); border-radius: var(--r-small);
  font-family: inherit; font-size: var(--text-caption); font-weight: 500;
  padding: 4px 10px; cursor: pointer;
}
.copy-btn:hover { background: rgba(241, 239, 232, .16); }

/* ---- Contact / CTA ------------------------------------------------------- */
.cta-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-64); align-items: start;
  box-shadow: var(--shadow-md); padding: var(--sp-48);
}
/* The closing call to action on a use-case page. It sends the reader to the
   form on the home page rather than repeating the form, so there is one
   consent line to keep right, not one per page. */
.cta-plain {
  display: grid; gap: var(--sp-16); justify-items: start;
  box-shadow: var(--shadow-md); padding: var(--sp-48);
}
.cta-plain p { max-width: 60ch; }
.form { display: grid; gap: var(--sp-16); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--text-body-sm); font-weight: 500; color: var(--ink); }
/* The resting ring is Field Line, not Stone. A control has to be seen before
   it is focused, and Stone is 1.53:1 on white; Field Line is 3.37:1. */
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: var(--text-body); color: var(--ink);
  background: var(--white); border: 1px solid var(--field-line);
  border-radius: var(--r-input); padding: 12px 14px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  font-size: var(--text-body-sm); color: var(--slate);
}
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.form-msg { font-size: var(--text-body-sm); border-radius: var(--r-button); padding: 12px 14px; display: none; }
.form-msg.show { display: block; }
.form-msg.ok  { background: var(--accent-soft); color: var(--accent-ink); }
.form-msg.err { background: #fbe9e9; color: #8f1a1f; }

/* ---- Footer (Ink) -------------------------------------------------------- */
.footer { background: var(--ink); padding-block: var(--sp-48); }
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--sp-24); align-items: center; justify-content: space-between; }
.footer p, .footer a { font-size: var(--text-body-sm); }
.footer p { color: var(--on-ink-muted); }
.footer a { color: var(--on-ink); }
.footer a:hover { color: var(--on-ink); text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-24); }
/* The two notices have their own row at the foot of the page, under a
   hairline, rather than trailing the end of a sentence about the product.
   That is where a visitor looks for them, and it keeps a legal document out
   of a list that otherwise only jumps between sections of this page. */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24);
  margin-top: var(--sp-32); padding-top: var(--sp-24);
  border-top: 1px solid rgba(241, 239, 232, .14);
}
.footer-legal a { color: var(--on-ink-muted); }
/* The use-case pages, listed on every page of the site. A page that nothing
   links to is found late by a crawler and weighted as unimportant when it is,
   so every scenario page is one click from every other page, including the
   home page, without adding to the primary navigation. */
.footer-uses {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8) var(--sp-24);
  margin-top: var(--sp-32);
}
.footer-uses-label {
  flex-basis: 100%;
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--on-ink-muted);
}

/* =========================================================================
   Product mockups - hand-built, no screenshots
   ========================================================================= */
.mock { font-size: var(--text-body-sm); }
.mock-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px var(--sp-16); border-bottom: 1px solid var(--stone);
  background: var(--white);
}
.mock-bar b { font-size: var(--text-body-sm); font-weight: 600; color: var(--ink); }
.mock-bar .caption { color: var(--slate); margin-left: auto; }
/* One column that may shrink below its content. The terminal lines are
   nowrap and end in an ellipsis, which only happens when the column may be
   narrower than the line; the implicit auto column grew past the card
   instead, and the card clipped the chips beside it on a phone. */
.mock-body { padding: var(--sp-16); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mock-row {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--stone); border-radius: var(--r-button);
}
.mock-row.is-quiet { background: var(--paper); }
/* Both sit inside an inline <span> wrapper, so they must be blockified to
   stack instead of running together on one line. */
.mock-row-title { display: block; font-weight: 600; color: var(--ink); line-height: 1.3; }
.mock-row-sub { display: block; font-size: var(--text-caption); color: var(--slate); line-height: 1.45; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-on   { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .14); }
.dot-off  { background: var(--mist); }
.dot-warn { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .14); }
.tag {
  font-size: var(--text-caption); font-weight: 500; padding: 3px 8px;
  border-radius: var(--r-pill); background: var(--sand); color: var(--slate);
}
.tag-accent { background: var(--accent-soft); color: var(--accent-ink); }

.meter { height: 6px; border-radius: var(--r-pill); background: var(--sand); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: var(--text-caption); font-weight: 500; color: var(--slate);
  border: 1px solid var(--stone); border-radius: var(--r-button);
  padding: 6px 10px; background: var(--white);
}
.chip-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }

.term {
  background: var(--ink-2); border-radius: var(--r-button); padding: 12px var(--sp-16);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.9; color: #e4e2da;
}
.term span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term .t { color: var(--on-ink-muted); }
.term .ok { color: #86efac; }

/* Bar chart */
.chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 120px; }
.chart i { display: block; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; }
.chart i:nth-child(even) { opacity: .55; }
.chart-x { display: flex; justify-content: space-between; margin-top: 8px; }

/* Zone / layout editor */
.zones {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr auto;
  gap: 8px; height: 220px;
}
.zone {
  border: 1.5px dashed var(--stone); border-radius: var(--r-small);
  display: grid; place-items: center; text-align: center;
  font-size: var(--text-caption); font-weight: 500; color: var(--slate);
  background: var(--paper);
}
.zone-main {
  grid-row: 1 / 3; background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent-ink); border-style: solid;
}
.zone-ticker { grid-column: 1 / 3; background: var(--sand); }

/* Floating secondary card, offset over the main product card.

   It used to be absolutely positioned against .visual at right -24px and
   bottom -32px. That anchored its bottom edge and let its own height decide
   how far up into the card it reached, which came to 147px on Lima and 138px
   on Saga. Both hero mockups are shorter than that, so the card landed over
   the status tags of the last two rows: Distribution center and Meeting room
   B on Lima, modules 2 and 3 on Saga. The overlap is meant to break the
   corner of the product card and it read as breakage instead.

   The card is in flow now and is pulled up by a fixed 32px rather than by
   whatever is left after its own height. The overlap is the same 32px
   whatever the mockup above it holds, so no row can be covered by it again,
   and the mockup body under it carries enough bottom padding that the 32px
   lands on the card surface. The 24px hang past the right edge is smaller
   than the narrowest gutter above 900px, so the card never reaches past the
   viewport edge. */
.float {
  position: relative; z-index: 2; background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--r-product); box-shadow: var(--shadow-lg);
  padding: var(--sp-16); display: grid; gap: 10px; width: 260px;
  margin-top: -32px;
}
.float-br { margin-left: auto; margin-right: -24px; }
.float-bl { margin-right: auto; margin-left: -24px; }

/* The two hero mockups are the only ones a floating card sits on, so they are
   the only ones that need room under the last row for it. 48px against the
   32px the card overlaps leaves 16px of clear surface between the two. */
.hero-grid .mock-body { padding-bottom: var(--sp-48); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1040px) {
  .deploy-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
}
@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr. A bare 1fr cannot shrink below the widest
     unbreakable line inside it, and the terminal lines in the mockups are
     nowrap, so the single column grew past a 360px screen and cut off the
     running text beside the mockup. That was live before this stylesheet
     was rewritten on 2026-09-24 and is fixed here. */
  .hero-grid, .split, .cta-card { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); }
  .split.reverse .split-copy, .split.reverse .visual { order: 0; }
  .split + .split { margin-top: var(--sp-64); }
  .nav-links { display: none; }
  .nav-inner { gap: var(--sp-16); justify-content: space-between; }
  .lang { margin-left: auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-card { padding: var(--sp-32); }
  .plainlist { grid-template-columns: 1fr; column-gap: 0; }
  .afterword { grid-template-columns: 1fr; column-gap: 0; }
  /* Under 900px the card stops floating and stacks under the mockup, so the
     negative margins and the auto side margin are reset together. Nothing
     overlaps the hero mockup here either, so it goes back to the same bottom
     padding every other mockup on the page has. */
  .float { width: auto; margin: var(--sp-16) 0 0; }
  .hero-grid .mock-body { padding-bottom: var(--sp-16); }
  .film { margin-bottom: var(--sp-40); }
}
@media (max-width: 560px) {
  .plainlist { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  /* the film is about 185px tall here; full-size buttons would cover a third of it */
  .film-controls { left: 8px; bottom: 8px; gap: 6px; }
  .film-controls .btn { font-size: 13px; padding: 4px 10px; }
  .film-controls .film-pause { padding-inline: 6px; }
  .cta-card, .cta-plain { padding: var(--sp-24); }
}
/* The header button is dropped on the narrowest phones. Brand, switcher and
   button fit at 390px with nothing to spare, and at 360px the button loses
   its last word off the right edge. 420px keeps a margin over that. Nothing
   is lost by dropping it: the same call to action is in the hero at full
   width, within the first screen. With the Lima trailer off the page since
   2026-10-14, the hero buttons start at about 600px in English and 640px in
   Turkish in a 360x780 frame; while the trailer opened the hero they sat
   just under the fold, at 790 and 855. Measured in a 360px frame, because headless Chrome will not open a window below about 500px and
   a screenshot taken at a smaller size is a crop of a 500px page, not a phone. */
@media (max-width: 420px) {
  .nav-cta { display: none; }
}