/* =============================================================================
   Fleevo — sales website
   Hand-written CSS. No framework, no build step, no external requests.

   ── THE STANDING RULE FOR PRODUCT SIMULATIONS ───────────────────────────────
   A LARGE STAGE IS NOT A STRETCHED UI. The page may give a simulation almost
   the whole viewport, but the application drawn inside it keeps the real
   application's geometry. Nothing in a mock is enlarged to consume marketing
   width; leftover room becomes whitespace, exactly as it does in the product.

   Centrála's numbers below are the UI Lab's own, read from
   prototype/fleevo2-ui-lab: `dashboardCardGeometry.ts` (card 285x148,
   row 164), `VehicleTimelineRow.tsx` (identity lane w-40 = 160, track gap-2,
   p-2), `DashboardCardShell.tsx` (header px-3 py-1.5, body px-3 py-2 gap-1),
   `MiniStopLine.tsx` (4x24 marker, 11px text, live status inline on the stop
   row) and `CentralaPage` (page max-width 1400, gutter 32). Zakázky follows
   `OrderListDesktopTable.tsx` / `StopCell.tsx`; the driver portal follows
   `CurrentStopCard.tsx` / `PrimaryActionBar.tsx`.

   Section order
     1  Tokens
     2  Reset + base
     3  Layout primitives
     4  Typography primitives
     5  Buttons, links, badges
     6  Motion / reveal
     7  Header + navigation
     8  Hero
     9  Showcase frame
    10  Product window chrome + application shell
    11  Centrála board
    12  Nová zakázka (objednávka → návrh)
    13  Zakázky list + order record
    14  Driver portal
    15  Argument band
    16  Workflow chain, supporting data, trust
    17  Versus
    18  Pricing + trial
    19  Start form
    20  FAQ
    21  Footer
    22  Responsive
    23  Reduced motion / print
   ========================================================================== */

/* -- 1  Tokens ------------------------------------------------------------ */
:root {
  --ink:        #0a0f1a;
  --ink-line:   rgba(255, 255, 255, .11);
  --ink-text:   #e8ecf4;
  --ink-text-2: #9fadc4;

  --paper:      #ffffff;
  --page:       #f7f8fb;

  --text:       #0f1520;
  --text-2:     #475569;
  --text-3:     #64748b;
  --text-4:     #94a3b8;

  --line:       #e3e7ee;
  --line-soft:  #eef1f6;

  --brand:      #2563eb;
  --brand-dark: #1d4ed8;
  --brand-soft: #eff6ff;
  --brand-ring: rgba(37, 99, 235, .30);

  --ok:         #047857;
  --ok-soft:    #ecfdf5;
  --ok-line:    #a7f3d0;
  --warn:       #b45309;
  --warn-soft:  #fffbeb;
  --warn-line:  #fde68a;
  --accent:     #6d28d9;
  --accent-soft:#f5f3ff;
  --accent-line:#ddd6fe;

  --r-control: 999px;
  --r-field:   10px;
  --r-surface: 16px;
  --r-panel:   22px;

  --sh-card:   0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .06);
  --sh-raised: 0 12px 32px rgba(15, 23, 42, .18), 0 4px 10px rgba(15, 23, 42, .10);
  --sh-window: 0 48px 96px -32px rgba(10, 15, 26, .40), 0 16px 36px -16px rgba(10, 15, 26, .22),
               0 0 0 1px rgba(15, 23, 42, .06);

  --font: "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, SFMono-Regular,
          Menlo, Consolas, monospace;

  /* The application's own page width (CentralaPage: max-w-[1400px]). The
     stage never exceeds it, so at any desktop viewport the simulation is the
     same size the real screen would be. */
  --app-canvas:  1400px;
  --shell:       1180px;
  --gutter:      clamp(1.25rem, 4vw, 2.75rem);
  --gutter-wide: clamp(1rem, 3vw, 2.75rem);
  --band-y: clamp(4.5rem, 8vw, 8rem);

  --header-h: 68px;
}

/* -- 2  Reset + base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure, fieldset, legend, table, dl { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--ink :focus-visible,
.showcase--driver :focus-visible,
.site-footer :focus-visible { outline-color: #7ea8ff; }

::selection { background: rgba(37, 99, 235, .18); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--paper);
  color: var(--text);
  font-weight: 600;
  font-size: .9rem;
  border-radius: var(--r-control);
  box-shadow: var(--sh-raised);
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 1rem; }

/* -- 3  Layout primitives ------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 820px; }
/* Content box resolves to exactly --app-canvas once the viewport allows it. */
.shell--wide {
  max-width: calc(var(--app-canvas) + 2 * var(--gutter-wide));
  padding-inline: var(--gutter-wide);
}

.band { padding-block: var(--band-y); }
.band--tight { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.band--paper { background: var(--paper); border-block: 1px solid var(--line-soft); }
.band--ink {
  background: var(--ink);
  color: var(--ink-text);
  background-image:
    radial-gradient(900px 420px at 12% -10%, rgba(37, 99, 235, .22), transparent 62%),
    radial-gradient(700px 380px at 92% 108%, rgba(124, 58, 237, .16), transparent 60%);
}

.section-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head__lead { margin-top: 1rem; }

/* -- 4  Typography primitives --------------------------------------------- */
.kicker {
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1rem;
}
.kicker--onink { color: #8bb2ff; }

.h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.028em;
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}
.h2--onink { color: #ffffff; }

.lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  line-height: 1.62;
  color: var(--text-2);
  text-wrap: pretty;
}
.lead--onink { color: var(--ink-text-2); }

/* -- 5  Buttons, links, badges -------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
              transform .16s ease, box-shadow .16s ease;
}
.btn--sm { padding: .5rem 1rem; font-size: .875rem; }
.btn--lg { padding: .95rem 1.7rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 8px 20px -10px rgba(37, 99, 235, .7);
}
.btn--primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

.btn--outline { background: var(--paper); color: var(--text); border-color: var(--line); }
.btn--outline:hover { border-color: var(--text-4); background: #fbfcfe; }

.btn--ghost { background: rgba(15, 23, 42, .035); color: var(--text); border-color: rgba(15, 23, 42, .10); }
.btn--ghost:hover { background: rgba(15, 23, 42, .06); }

.tick {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--ok); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.tick--lg { width: 20px; height: 20px; stroke-width: 2; }

/* Badge geometry is the Lab's `Badge` primitive: md = px-3 py-1 text-xs,
   sm = px-1.5 py-0.5 text-micro. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .75rem;
  border-radius: var(--r-control);
  border: 1px solid;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}
.badge--sm { padding: .125rem .375rem; font-size: .6875rem; }
.badge--neutral { background: #f8fafc; border-color: #e2e8f0; color: #334155; }
.badge--info    { background: var(--brand-soft); border-color: #bfdbfe; color: #1d4ed8; }
.badge--success { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.badge--warn    { background: var(--warn-soft); border-color: var(--warn-line); color: #92400e; }
.badge--accent  { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* -- 6  Motion / reveal --------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* -- 7  Header + navigation ----------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 12px rgba(15, 23, 42, .05); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--text); flex: none; }
.brand__mark { width: 22px; height: 22px; fill: var(--brand); flex: none; }
.brand__word { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; letter-spacing: -.022em; }
.brand--footer { color: #fff; }
.brand--footer .brand__mark { fill: #6f9dff; }

.site-nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: 1.5rem; }
.site-nav__list a { color: var(--text-2); text-decoration: none; font-size: .9375rem; font-weight: 500; transition: color .15s ease; }
.site-nav__list a:hover { color: var(--text); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; }
.nav-toggle__bars i { display: block; width: 17px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -- 8  Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 6vw, 6rem);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 620px at 50% -10%, rgba(37, 99, 235, .12), transparent 62%),
    radial-gradient(900px 500px at 12% 4%, rgba(124, 58, 237, .07), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, var(--page) 55%);
  pointer-events: none;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 400px at 50% 6%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(900px 400px at 50% 6%, #000 0%, transparent 76%);
}

.hero__copy { position: relative; max-width: 60rem; text-align: center; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.3rem;
  text-wrap: balance;
}
.hero__title-accent {
  background: linear-gradient(96deg, var(--brand) 8%, #6d3fe0 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead { max-width: 44rem; margin-inline: auto; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: 1.75rem; }

.assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem 1.5rem;
  font-size: .875rem;
  font-weight: 550;
  color: var(--text-2);
}
.assurances li { display: inline-flex; align-items: center; gap: .45rem; }

/* -- 9  Showcase frame ----------------------------------------------------
   A marketing statement, then a product proof at the application's own size,
   then a short row of notes underneath. The notes sit BELOW the window rather
   than beside it so the simulation never trades width for prose. */
.showcase { padding-block: clamp(4rem, 7vw, 7rem); }
.showcase--driver {
  background: var(--ink);
  color: var(--ink-text);
  background-image:
    radial-gradient(1000px 500px at 20% -10%, rgba(37, 99, 235, .26), transparent 62%),
    radial-gradient(800px 420px at 88% 110%, rgba(124, 58, 237, .18), transparent 60%);
}

.showcase__head { max-width: 760px; text-align: center; margin-bottom: clamp(2.25rem, 3.5vw, 3.25rem); }
.showcase__head .lead { margin-top: 1rem; }
.showcase__head--onink .lead { color: var(--ink-text-2); }
.showcase__stage { position: relative; }

.showcase__notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  margin-top: clamp(2rem, 3vw, 2.75rem);
}
.showcase__notes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.showcase__note h3 {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--text);
  padding-top: .8rem;
  border-top: 2px solid var(--text);
  margin-bottom: .45rem;
}
.showcase__note p { font-size: .9375rem; line-height: 1.6; color: var(--text-2); }

.showcase__bridge {
  margin: clamp(1.5rem, 2.5vw, 2.25rem) auto;
  max-width: 44rem;
  text-align: center;
  font-size: 1rem;
  color: var(--text-3);
}
.showcase__bridge::before {
  content: "";
  display: block;
  width: 1px;
  height: 2.25rem;
  margin: 0 auto .9rem;
  background: linear-gradient(180deg, transparent, var(--text-4));
}

/* -- 10  Product window chrome + application shell ------------------------ */
.window {
  margin: 0;
  width: 100%;
  border-radius: var(--r-panel);
  background: var(--paper);
  box-shadow: var(--sh-window);
  overflow: hidden;
  min-width: 0;
}
.window + .window { margin-top: 0; }

.window__chrome {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1rem;
  background: #f2f4f8;
  border-bottom: 1px solid var(--line);
}
.window__dots { display: flex; gap: 7px; }
.window__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d4d9e2; }
.window__dots i:first-child { background: #e6b3b3; }
.window__url {
  flex: 1;
  min-width: 0;
  padding: .22rem .8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--text-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.window__caption {
  padding: .6rem 1rem .75rem;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
  font-size: .75rem;
  color: var(--text-4);
  text-align: right;
}

/* The application shell — AppShell's own numbers: 64px bar, 32px gutter. */
.app { background: #f8fafc; --ui-pad: 2rem; line-height: 1.4; }
.app__header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4rem;
  padding-inline: var(--ui-pad);
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.app__brand { font-size: 1.125rem; font-weight: 600; color: #1e293b; letter-spacing: -.01em; }
.app__nav { display: flex; gap: .25rem; min-width: 0; overflow: hidden; }
.app__navlink {
  padding: .5rem .875rem;
  border-radius: var(--r-control);
  font-size: .875rem;
  color: var(--text-3);
  white-space: nowrap;
}
.app__navlink.is-active { background: #f1f5f9; color: #1e293b; font-weight: 600; }
.app__user { margin-left: auto; text-align: right; line-height: 1.3; flex: none; }
.app__email { display: block; font-size: .875rem; color: #475569; }
.app__tenant { display: block; font-family: var(--font-mono); font-size: .6875rem; color: var(--text-4); }

.app__main { padding: var(--ui-pad); }

.app__pagehead { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.app__title { font-size: 1.25rem; font-weight: 600; color: #1e293b; letter-spacing: -.015em; }
.app__date { font-size: .875rem; color: var(--text-3); }
.app__btn {
  margin-left: auto;
  padding: .4rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: #fff;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.app__btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.app__btn--tiny { margin-left: 0; padding: .25rem .7rem; font-size: .75rem; }

.app__toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.app__search {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
  height: 2.5rem;
  padding-inline: .875rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  font-size: .875rem;
  color: #334155;
}
.app__searchicon { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--text-4); stroke-width: 1.7; stroke-linecap: round; }
.app__placeholder { color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__filter {
  flex: none;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  padding-inline: .875rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  font-size: .8125rem;
  color: var(--text-2);
  white-space: nowrap;
}

.app__panel {
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: #fff;
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.app__panel--pad { padding: 1rem 1.25rem; }

/* -- 11  Centrála board ---------------------------------------------------
   Every number below is the UI Lab's. Cards are FIXED at 285x148 and never
   flex: when the stage is wider than the board needs, the surplus stays as
   empty track — which is precisely what the real screen shows on a wide
   monitor. */
.board { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }

.vrow {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-surface);
  background: #fff;
  box-shadow: var(--sh-card);
}
.vrow__stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1; }
.vrow__stripe--go   { background: #10b981; }
.vrow__stripe--free { background: #f59e0b; }
.vrow__stripe--warn { background: #f59e0b; }

.vrow__id {
  flex: none;
  width: 10rem;                       /* w-40 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .75rem .75rem .75rem 1rem; /* p-3 pl-4 */
  border-right: 1px solid #e2e8f0;
  background: #f8fafc;
  min-width: 0;
}
.vrow__plate {
  display: block;
  margin-bottom: .125rem;
  font-size: 1.125rem;                /* text-lg */
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vrow__driver { display: block; font-size: .75rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow__type { display: block; margin-top: .5rem; font-size: .875rem; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow__team {
  margin-top: .5rem;
  width: fit-content;
  padding: .25rem .5rem;
  border-radius: var(--r-control);
  background: rgba(37, 99, 235, .125);
  color: #2563eb;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
}
.vrow__team--alt { background: rgba(124, 58, 237, .125); color: #7c3aed; }

.vrow__track {
  display: flex;
  align-items: stretch;
  gap: .5rem;                         /* gap-2 */
  flex: 1;
  min-width: 0;
  padding: .5rem;                     /* p-2 */
  height: 164px;                      /* ROW_TRACK_HEIGHT_CLASS */
  overflow-x: auto;
  scrollbar-width: none;
}
.vrow__track::-webkit-scrollbar { display: none; }

.arrow { align-self: center; flex: none; display: inline-flex; }
.arrow svg { width: 16px; height: 16px; fill: none; stroke: #cbd5e1; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* CARD_SIZE_CLASS — w-[285px] h-[148px] shrink-0 */
.slot {
  flex: none;
  width: 285px;
  height: 148px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 12px;                /* rounded-xl */
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.slot--past { background: #f8fafc; opacity: .8; }
.slot--current { background: #ecfdf5; border-color: #6ee7b7; }
.slot--service { background: #fffbeb; border-color: #fde68a; }

.slot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .375rem .75rem;            /* px-3 py-1.5 */
  font-size: .6875rem;                /* text-micro */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
}
.slot--current .slot__head { color: var(--ok); }
.slot--service .slot__head { color: var(--warn); }
.slot__kind { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
.slot__icon { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.slot--service .slot__icon { fill: currentColor; stroke: none; }
.slot__count {
  margin-left: .125rem;
  padding: 0 .25rem;
  border-radius: 4px;
  background: rgba(148, 163, 184, .22);
  font-size: .5625rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #64748b;
}
.slot__hmeta { display: inline-flex; align-items: center; gap: .5rem; flex: none; }
.slot__price { font-size: .6875rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: #334155; }
.slot__link { font-size: .6875rem; font-weight: 700; letter-spacing: .03em; color: var(--text-4); }

.slot__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .25rem;                        /* gap-1 */
  overflow: hidden;
  padding: .5rem .75rem;              /* px-3 py-2 */
  line-height: 1.25;
}
.slot__customer {
  font-size: .8125rem;                /* text-[13px] */
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot__sub { font-size: .6875rem; color: #64748b; }
.slot__foot { margin-top: auto; font-size: .6875rem; color: #64748b; }
.slot__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  font-size: .6875rem;
  color: var(--text-4);
}
.slot__more svg { width: 11px; height: 11px; fill: currentColor; }

.slot__onboard { margin-top: auto; display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; padding-top: .125rem; font-size: .75rem; }
.slot__onboardlabel { flex: none; font-size: .6875rem; font-weight: 600; text-transform: uppercase; color: var(--text-4); }
.slot__lanes { flex: none; display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: #1e293b; }
.slot__lanes span { display: inline-flex; align-items: center; gap: .125rem; }
.slot__dot { width: 6px; height: 6px; border-radius: 50%; }
.slot__dot--a { background: #3b82f6; }
.slot__dot--b { background: #8b5cf6; }
.slot__statuses { display: inline-flex; min-width: 0; flex: 1; justify-content: flex-end; gap: .25rem; overflow: hidden; }
.slot__statuses .badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: inline-block; }

/* EmptySlotCard — same size, dashed, centred micro text. */
.slot--empty {
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding-inline: .75rem;
  border: 1px dashed #e2e8f0;
  border-radius: var(--r-surface);
  background: rgba(248, 250, 252, .5);
  box-shadow: none;
  text-align: center;
}
.slot--empty > span { font-size: .6875rem; font-weight: 500; line-height: 1.35; color: var(--text-4); }
.slot--free { border-color: #fde68a; background: #fffdf5; }
.slot--free > span { color: #a16207; }
.slot--free b { display: block; margin-bottom: .25rem; font-size: .8125rem; font-weight: 700; color: #92400e; }

/* MiniStopLine — 4x24 marker, 11px text, live status inline on the row. */
.stopline { display: flex; align-items: flex-start; gap: .375rem; min-width: 0; }
.stopline__bar { flex: none; width: 4px; height: 1.5rem; margin-top: .125rem; border-radius: 999px; background: #94a3b8; }
.stopline__bar--tall { height: 2rem; }
.stopline__bar--load { background: #10b981; }
.stopline__bar--unload { background: #f43f5e; }
.stopline__text { min-width: 0; flex: 1; font-size: .6875rem; line-height: 1.25; }
.stopline__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.stopline__when { display: inline-flex; align-items: center; gap: .25rem; color: var(--text-4); white-space: nowrap; }
.stopline__when b:not(.fix) { font-weight: 700; color: #334155; }
.stopline__live { flex: none; font-weight: 600; }
.stopline__live--load { color: var(--ok); }
.stopline__live--unload { color: #be123c; }
.stopline__place { display: block; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fix {
  display: inline-block;
  padding: 0 .25rem;
  border-radius: 4px;
  background: #ef4444;
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.2;
}

/* SectionHeader + the three-column unassigned grid. */
.unassigned { margin-top: .5rem; }
.unassigned__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.unassigned__title { font-size: .75rem; font-weight: 500; text-transform: uppercase; color: #64748b; }
.unassigned__rule { flex: 1; height: 1px; background: #e2e8f0; }
/* Three equal columns, as the Lab renders them — expressed as flex so the
   assigned card can collapse OUT of the row instead of leaving a hole. */
.unassigned__list { display: flex; gap: .5rem; align-items: stretch; }
.unassigned__list > * { flex: 1 1 0; min-width: 0; }

.uacard { padding: .75rem; border: 1px solid #e2e8f0; border-radius: var(--r-field); background: #f8fafc; }
.uacard--urgent { border-color: var(--warn-line); background: var(--warn-soft); }
.uacard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.uacard__main { min-width: 0; }
.uacard__name { display: block; font-size: .8125rem; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uacard__where { display: block; font-size: .6875rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uacard__when {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  border-radius: var(--r-control);
  background: #f1f5f9;
  color: #475569;
  font-size: .6875rem;
  font-weight: 700;
  white-space: nowrap;
}
.uacard__when svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.uacard__when--urgent { background: #f59e0b; color: #fff; }
.uacard__foot { margin-top: .5rem; display: flex; justify-content: flex-end; }

/* The one animated beat: an unassigned order lands on a truck. Both states
   occupy the same fixed 285x148 box, so nothing on the page moves. */
.slot--target .slot__filled { display: none; }
.slot--target .slot__empty { display: flex; flex: 1; align-items: center; justify-content: center; }
.board.is-assigned .slot--target {
  background: #fff;
  border-style: solid;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}
.board.is-assigned .slot--target .slot__empty { display: none; }
.board.is-assigned .slot--target .slot__filled { display: flex; flex: 1; flex-direction: column; overflow: hidden; }
.slot--target { transition: box-shadow .4s ease, border-color .4s ease, background-color .4s ease; }

#hero-uacard {
  overflow: hidden;
  transition: opacity .25s ease, transform .3s ease,
              flex-grow .35s ease .05s, max-width .35s ease .05s,
              padding .35s ease .05s, margin .35s ease .05s, border-width .35s ease .05s;
  max-width: 100%;
}
.board.is-assigned #hero-uacard {
  opacity: 0;
  transform: translateY(-6px);
  flex-grow: 0;
  max-width: 0;
  padding-inline: 0;
  margin-right: -0.5rem;
  border-width: 0;
}

/* -- 12  Nová zakázka (objednávka → návrh) ------------------------------- */
.import { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 1rem; }
.import__doc { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.doc {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--sh-card);
}
.doc__brand { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.doc__title { font-size: .875rem; font-weight: 700; color: #1e293b; margin-bottom: .25rem; }
.doc__line { height: 6px; border-radius: 3px; background: #eef1f6; }
.doc__line--w50 { width: 50%; } .doc__line--w60 { width: 60%; }
.doc__line--w70 { width: 70%; } .doc__line--w80 { width: 80%; } .doc__line--w90 { width: 90%; }
.doc__hl {
  padding: .3rem .5rem;
  border-radius: 5px;
  background: rgba(37, 99, 235, .10);
  box-shadow: inset 3px 0 0 var(--brand);
  font-size: .75rem;
  font-weight: 600;
  color: #1d4ed8;
  line-height: 1.4;
}
.import__docname { font-family: var(--font-mono); font-size: .6875rem; color: var(--text-4); text-align: center; }

.import__form { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.ai-note {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .875rem;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: var(--brand-soft);
  font-size: .8125rem;
  color: #1d4ed8;
}
.frow { display: flex; gap: .75rem; }
.app__field { display: grid; gap: .25rem; flex: 1; min-width: 0; }
.app__field--narrow { flex: 0 0 9rem; }
.app__fieldlabel { font-size: .75rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.app__input {
  display: block;
  height: 2.5rem;
  line-height: 2.375rem;
  padding-inline: .75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  font-size: .875rem;
  color: #1e293b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app__input--wide { width: 100%; }

.fstop { display: grid; gap: .4rem; padding: .75rem .875rem; border: 1px solid var(--line); border-radius: var(--r-field); background: #fcfdfe; }
.fstop__head { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 700; color: var(--text-2); }
.fstop__head .stopline__bar { height: 1.125rem; margin-top: 0; }
.fstop__foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fstop__hint { font-size: .75rem; color: var(--text-4); }

/* -- 13  Zakázky list + order record --------------------------------------
   OrderListDesktopTable's geometry: py-4 rows, pl-6 first cell, pr-8 last,
   w-28 / w-80 / w-40 / 22% / 22% / w-44 / w-32 columns. */
.zlist { width: 100%; border-collapse: collapse; table-layout: fixed; line-height: 1.35; }
.zlist th {
  padding: .75rem 0 .75rem 1rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.zlist th:first-child { padding-left: 1.5rem; }
.zlist th:last-child { padding-right: 2rem; text-align: right; }
.zlist__c-veh   { width: 7rem; }
.zlist__c-cust  { width: 20rem; }
.zlist__c-ref   { width: 10rem; }
.zlist__c-stop  { width: 22%; }
.zlist__c-state { width: 11rem; }
.zlist__c-price { width: 8rem; }

.zlist td { padding: 1rem 0 1rem 1rem; border-top: 1px solid #f1f5f9; vertical-align: middle; }
.zlist td:first-child { padding-left: 1.5rem; }
.zlist td:last-child { padding-right: 2rem; }
.zlist tbody tr:hover { background: #f8fafc; }

.zlist__plate { display: block; font-family: var(--font-mono); font-size: .75rem; font-weight: 600; color: #1e293b; }
.zlist__sub { display: block; font-size: .75rem; color: var(--text-4); }
.zlist__ref { display: block; font-size: .75rem; color: #64748b; }
.zlist__name { display: block; font-size: .875rem; font-weight: 500; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zlist__unassigned { font-size: .75rem; color: var(--text-4); }
.zlist__connector { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--text-4); }
col.zlist__c-price, .zlist td.zlist__c-price, .zlist th.zlist__c-price { text-align: right; }
.zlist td.zlist__c-price { font-family: var(--font-mono); font-size: .875rem; font-weight: 600; color: #1e293b; }

/* SberkaGroupHeader: one continuous 3px rail, flat two-level tint, no
   hairline inside the group. */
.zlist__group td { background: rgba(239, 246, 255, .7); border-top: 2px solid #60a5fa; padding-block: .75rem; }
.zlist__group td:first-child { box-shadow: inset 3px 0 0 #60a5fa; }
.zlist__child td { background: rgba(239, 246, 255, .35); border-top: 0; }
.zlist__child td:first-child { box-shadow: inset 3px 0 0 #60a5fa; }
.zlist__sberka {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-right: .5rem;
  padding: .375rem .75rem;
  border-radius: var(--r-control);
  background: var(--brand);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.zlist__sberka svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.zlist__alert td { background: var(--warn-soft); }
.zlist__alert td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.zlist__done { opacity: .65; }

/* StopCell — 4x32 marker, 12px text, place on its own line. */
.zstop { display: flex; align-items: flex-start; gap: .5rem; }
.zstop > span { min-width: 0; font-size: .75rem; line-height: 1.25; }
.zstop__meta { display: flex; align-items: center; gap: .375rem; color: #64748b; }
.zstop__place { display: block; margin-top: .125rem; font-weight: 500; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zstop__place b { font-weight: 600; }
.zstop__extra { font-style: normal; font-size: .625rem; font-weight: 800; color: #d97706; }
.zstop .fix { font-size: .5625rem; padding: 0 .375rem; }

.otimeline { display: flex; align-items: flex-start; gap: .25rem; }
.ostep {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  position: relative;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-4);
  text-align: center;
}
.ostep::before {
  content: "";
  position: absolute;
  left: -50%; right: 50%;
  top: 7px;
  height: 2px;
  background: #e2e8f0;
}
.ostep:first-child::before { display: none; }
.ostep__dot { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #cbd5e1; background: #fff; z-index: 1; }
.ostep.is-done { color: var(--ok); }
.ostep.is-done::before { background: #6ee7b7; }
.ostep.is-done .ostep__dot { border-color: #10b981; background: #10b981; }
.ostep.is-now { color: var(--brand-dark); font-weight: 700; }
.ostep.is-now::before { background: #6ee7b7; }
.ostep.is-now .ostep__dot { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(37, 99, 235, .18); }
.otimeline__note { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line-soft); font-size: .8125rem; color: var(--text-3); }

.ograve { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1rem; margin-top: 1rem; }
.ocol { display: grid; gap: 1rem; align-content: start; }
.opanel__title { font-size: .75rem; font-weight: 500; text-transform: uppercase; color: #64748b; margin-bottom: .6rem; }
.opanel__title--sep { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line-soft); }

.ostop { display: flex; align-items: flex-start; gap: .625rem; padding: .5rem 0; }
.ostop + .ostop { border-top: 1px solid var(--line-soft); }
.ostop__place { display: block; font-size: .875rem; font-weight: 500; color: #1e293b; }
.ostop__place b { font-weight: 600; }
.ostop__meta { display: block; margin-top: .125rem; font-size: .75rem; color: #64748b; }
.ostop.is-done .ostop__meta { color: var(--ok); }
.odoc { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: #64748b; padding: .2rem 0; }

.okv { display: flex; align-items: baseline; gap: .5rem; font-size: .875rem; color: #1e293b; }
.okv b { margin-left: auto; font-weight: 600; }
.okv--muted { color: #64748b; font-size: .75rem; margin-top: .3rem; }
.risk {
  margin-top: .6rem;
  padding: .45rem .625rem;
  border-radius: var(--r-field);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  font-size: .75rem;
  font-weight: 500;
  color: #92400e;
}
.softwarn {
  margin: .6rem 0;
  padding: .5rem .625rem;
  border-radius: var(--r-field);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  font-size: .75rem;
  line-height: 1.45;
  color: #92400e;
}
.softwarn b { display: block; font-weight: 600; color: var(--warn); }
.oaudit { font-size: .75rem; color: #64748b; padding: .3rem 0; line-height: 1.45; }
.oaudit + .oaudit { border-top: 1px solid var(--line-soft); }
.oaudit b { color: #1e293b; font-weight: 600; }

/* -- 14  Driver portal ----------------------------------------------------
   A 390px logical phone, drawn at the portal's real type scale: the city is
   28px because a driver reads it at a gate, and the primary action is a 56px
   bar because that is the control the whole screen exists to offer. The
   section gives the phone prominence through composition, never by inflating
   its controls. */
.driverbay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.driverbay__phones { display: flex; gap: clamp(1rem, 2vw, 1.75rem); flex: none; }

.phone {
  width: 390px;
  flex: none;
  border: 10px solid #05080f;
  border-radius: 38px;
  background: #05080f;
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .09);
  overflow: hidden;
}
.phone--back { transform: translateY(2rem) scale(.955); opacity: .95; }
.phone__screen { display: flex; flex-direction: column; height: 33rem; background: #f1f5f9; }
.phone__body { flex: 1; overflow: hidden; padding: 1rem; }

.dstop { border: 1px solid #e2e8f0; border-left: 4px solid #f43f5e; border-radius: var(--r-surface); background: #fff; box-shadow: var(--sh-card); padding: 1rem; }
.dstop__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.kindchip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .875rem;
  border-radius: var(--r-control);
  border: 1px solid;
  font-size: .875rem;
  font-weight: 600;
}
.kindchip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kindchip--unload { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.dstop__counter { flex: none; font-size: .75rem; font-weight: 500; color: #64748b; }
.dstop__city { font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #0f172a; }
.dstop__city span { margin-left: .5rem; font-size: .875rem; font-weight: 600; color: var(--text-4); vertical-align: middle; }
.dstop__site { margin-top: .25rem; font-size: 1rem; font-weight: 500; color: #334155; }
.dstop__facts { margin-top: 1rem; display: grid; gap: .75rem; font-size: .875rem; color: #334155; }
.dstop__facts > div { display: flex; gap: .625rem; align-items: flex-start; }
.dstop__ico { flex: none; width: 1rem; color: var(--text-4); }

.dbar { border-top: 1px solid #e2e8f0; background: #f1f5f9; padding: .75rem 1rem; }
.dbar__hint { display: block; margin-bottom: .5rem; text-align: center; font-size: .75rem; color: #64748b; }
.dbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;                     /* h-14 */
  border-radius: var(--r-control);
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
}
.dnav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 4rem;                       /* the portal's bottom bar */
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
.dnav span { display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 500; color: var(--text-4); }
.dnav .is-on { color: var(--brand); font-weight: 700; box-shadow: inset 0 2px 0 var(--brand); }

.dhead { font-size: 1.25rem; font-weight: 700; color: #0f172a; }
.dctx { margin-top: .25rem; margin-bottom: 1rem; font-size: .875rem; color: #64748b; }
.ddoc {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-field);
  background: #fff;
  font-size: .8125rem;
  color: #64748b;
}
.ddoc + .ddoc { margin-top: .5rem; }
.dcapture {
  margin-top: .75rem;
  display: grid;
  justify-items: center;
  gap: .25rem;
  padding: 1.5rem 1rem;
  border: 2px dashed #cbd5e1;
  border-radius: var(--r-surface);
  background: #fff;
}
.dcapture__ico { font-size: 1.5rem; color: var(--text-4); line-height: 1; }
.dcapture__title { font-size: .9375rem; font-weight: 700; color: #334155; }
.dcapture__hint { font-size: .75rem; color: var(--text-4); text-align: center; }

.driverbay__notes { display: grid; gap: .75rem; align-content: center; }
.driverbay__notes li {
  padding: .95rem 1.15rem;
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-text-2);
}
.driverbay__notes b { display: block; font-size: 1rem; color: #fff; margin-bottom: .15rem; }

/* -- 15  Argument band ----------------------------------------------------- */
.argument { max-width: 820px; }
.argument__body { margin-top: 1.5rem; display: grid; gap: 1.1rem; }
.argument__body p {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-text-2);
  text-wrap: pretty;
}

/* -- 16  Workflow chain, supporting data, trust --------------------------- */
.flow {
  --flow-gap: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--flow-gap);
}
.flow__step { position: relative; padding-top: 2.9rem; }
.flow__step::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: calc(-1 * var(--flow-gap));
  top: 1.1rem;
  height: 2px;
  background: var(--line);
}
.flow__step:last-child::before { display: none; }
.flow__num {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  box-shadow: 0 0 0 5px var(--paper);
}
.flow__title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em; margin-bottom: .45rem; }
.flow__text { font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
.flow__note {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text-3);
  max-width: 52rem;
}

.support {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.support__item { background: var(--paper); padding: clamp(1.35rem, 2.2vw, 1.9rem); }
.support__item h3 { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .5rem; }
.support__item h3::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: .55rem;
  border-radius: 2px;
  background: var(--brand);
  vertical-align: middle;
}
.support__item p { font-size: .875rem; line-height: 1.6; color: var(--text-2); }

.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.trust__item h3 {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.015em;
  margin-bottom: .5rem;
  padding-top: .85rem;
  border-top: 2px solid var(--text);
}
.trust__item p { font-size: .9375rem; line-height: 1.6; color: var(--text-2); }

/* -- 17  Versus ----------------------------------------------------------- */
.versus { display: grid; gap: 1px; background: var(--ink-line); border-block: 1px solid var(--ink-line); }
.versus__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  padding: 1.15rem .25rem;
  background: var(--ink);
}
.versus__old { color: #7c8aa3; font-size: 1rem; text-decoration: line-through; text-decoration-color: rgba(124, 138, 163, .5); }
.versus__arrow { color: #6f9dff; text-align: center; font-size: 1.05rem; }
.versus__new { color: #fff; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; text-wrap: pretty; }

/* -- 18  Pricing + trial -------------------------------------------------- */
.pricing__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.segmented { border: 0; }
.segmented__legend {
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .6rem;
  text-align: center;
  width: 100%;
}
.segmented__options { display: inline-flex; gap: .25rem; padding: .3rem; background: #eef1f6; border-radius: var(--r-control); }
.segmented__opt { display: contents; }
.segmented input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.segmented label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  padding: .5rem 1rem;
  border-radius: var(--r-control);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.segmented label:hover { color: var(--text); }
.segmented input:checked + label { background: var(--paper); color: var(--text); box-shadow: var(--sh-card); }
.segmented input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 2px; }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.tier.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.tier--feature { border-color: #cdd9f5; box-shadow: var(--sh-card); }
.tier__flag {
  position: absolute;
  top: -.75rem;
  left: clamp(1.5rem, 2.5vw, 2rem);
  padding: .22rem .7rem;
  border-radius: var(--r-control);
  background: var(--brand);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tier__name { font-size: 1rem; font-weight: 650; color: var(--text-2); letter-spacing: -.01em; }
.tier__price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-block: .4rem .3rem; }
.tier__amount {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.5rem + 1.8vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tier__amount--text { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.6rem); letter-spacing: -.02em; }
.tier__period { font-size: .9375rem; color: var(--text-3); }
.tier__vat { display: block; font-size: .75rem; color: var(--text-4); }

/* The trial terms sit above the cards so the offer reads in one glance,
   without scrolling on to the panel that spells them out. */
.pricing__promise {
  max-width: 46rem;
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
  padding: .9rem 1.25rem;
  border: 1px solid var(--ok-line);
  border-radius: var(--r-control);
  background: var(--ok-soft);
  text-align: center;
  font-size: .9375rem;
  line-height: 1.55;
  color: #065f46;
}
.pricing__promise strong { color: var(--ok); font-weight: 700; }

.tier__note { font-size: .9375rem; line-height: 1.55; color: var(--text-2); margin-bottom: 1.4rem; flex: 1; }

.pricing__fineprint { margin-top: 1.5rem; max-width: 52rem; margin-inline: auto; text-align: center; font-size: .875rem; color: var(--text-3); }
.pricing__fineprint strong { color: var(--text-2); }

.trial {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: radial-gradient(700px 300px at 88% -30%, rgba(37, 99, 235, .07), transparent 60%), #fbfcfe;
}
.trial__head { max-width: 40rem; margin-bottom: 1.75rem; }
.trial__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -.024em;
  margin-bottom: .5rem;
}
.trial__lead { color: var(--text-3); font-size: .9375rem; }
.trial__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem); }
.trial__facts li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: .3rem .75rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-2);
}
.trial__facts .tick { grid-row: 1 / 3; margin-top: .18rem; }
.trial__facts strong { color: var(--text); font-weight: 650; }

/* -- 19  Start form ------------------------------------------------------- */
.start { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.start__copy { max-width: 30rem; }
.start__copy .lead { margin-top: 1.25rem; }
.start__aside {
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  border-left: 2px solid #6f9dff;
  background: rgba(255, 255, 255, .04);
  border-radius: 0 var(--r-field) var(--r-field) 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-text-2);
}

.start__formwrap { position: relative; }
/* -- 20  FAQ -------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem .25rem;
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--text);
  transition: color .15s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  margin-left: auto;
  margin-top: .45rem;
  width: 11px; height: 11px;
  border-right: 2px solid var(--text-4);
  border-bottom: 2px solid var(--text-4);
  transform: rotate(45deg);
  transition: transform .22s ease, border-color .22s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); border-color: var(--brand); }
.faq__q:hover { color: var(--brand); }
.faq__a { padding: 0 3rem 1.4rem .25rem; }
.faq__a p { color: var(--text-2); line-height: 1.68; text-wrap: pretty; }

/* -- 21  Footer ----------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--ink-text-2); padding-block: clamp(3rem, 5vw, 4.5rem) 2.25rem; }
.site-footer__inner { display: grid; gap: 2.5rem; }
.site-footer__tag { margin-top: .85rem; font-size: .9375rem; max-width: 22rem; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.site-footer__title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1rem;
}
.site-footer__cols ul { display: grid; gap: .55rem; }
.site-footer a { color: var(--ink-text-2); text-decoration: none; font-size: .9375rem; transition: color .15s ease; }
.site-footer a:hover { color: #fff; }
.site-footer__address { font-size: .9375rem; line-height: 1.75; }
.site-footer__address strong { color: #fff; font-weight: 600; }
.site-footer__ico { font-family: var(--font-mono); font-size: .8125rem; }
.site-footer__legal {
  padding-top: 1.75rem;
  border-top: 1px solid var(--ink-line);
  font-size: .8125rem;
  line-height: 1.7;
  color: #7c8aa3;
  max-width: 62rem;
}

/* -- 22  Responsive -------------------------------------------------------
   The simulation is NOT scaled down. Below the application's own breakpoint
   it RECOMPOSES, exactly as the application does: the board becomes one card
   per vehicle, the order table becomes a stack of records. Type keeps its
   real sizes throughout — a dispatcher's 13px card title is 13px here too. */
@media (max-width: 1150px) {
  .app { --ui-pad: 1.25rem; }
  .showcase__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .driverbay { grid-template-columns: 1fr; justify-items: center; gap: 3rem; }
  .driverbay__notes { max-width: 44rem; }
}

@media (max-width: 1040px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__step::before { display: none; }
  .support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start { grid-template-columns: 1fr; }
  .start__copy { max-width: 46rem; }
  .ograve { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; }
  .tier--feature { order: -1; }
  .tier__flag { top: -.7rem; }
  .trial__facts { grid-template-columns: 1fr; }
  .showcase__notes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unassigned__list { flex-direction: column; }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    padding: 1rem var(--gutter) 1.4rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .4);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list a { display: block; padding: .8rem .25rem; font-size: 1rem; border-bottom: 1px solid var(--line-soft); }
}

@media (max-width: 1023px) {
  .app { --ui-pad: .75rem; }
  .app__nav, .app__user { display: none; }
  .app__header { height: 3rem; }
  .app__title { font-size: 1.125rem; }
  .app__date { font-size: .8125rem; }

  /* The board recomposes: the identity becomes a header line and only the
     CURRENT job stays. Past and next are context a phone cannot read at this
     width — the same judgement the application makes at its own breakpoint. */
  .vrow { flex-direction: column; }
  .vrow__id {
    width: auto;
    flex-direction: row;
    align-items: baseline;
    gap: .5rem;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
    padding: .5rem .75rem .5rem 1rem;
  }
  .vrow__plate { font-size: 1rem; margin-bottom: 0; }
  .vrow__type, .vrow__team { margin-top: 0; }
  .vrow__driver { margin-left: auto; }
  .vrow__track { height: auto; padding: .5rem; overflow: hidden; }
  /* Position, not modifier: the track is always past, arrow, CURRENT,
     arrow, next — so the third child is the only one that stays, whatever
     kind of card happens to be in it. */
  .vrow__track > *:nth-child(-n + 2),
  .vrow__track > *:nth-child(n + 4) { display: none; }
  .slot { width: auto; flex: 1; height: auto; min-height: 132px; }
  .slot__statuses { flex-wrap: wrap; justify-content: flex-start; }
  .slot__onboard { flex-wrap: wrap; }

  .import { grid-template-columns: 1fr; }
  .import__doc { order: 2; }
  .frow { flex-wrap: wrap; }
  .app__field--narrow { flex: 1 1 8rem; }

  /* Six states do not fit one phone line, and a horizontally scrolling
     timeline hides half of them behind a gesture nobody discovers. */
  .otimeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem .4rem; }
  .ostep::before { display: none; }

  /* The order list stops being a table and becomes a stack of records.
     Nothing is dropped: vehicle + state, then customer, then both stops,
     then the price. */
  .zlist thead { display: none; }
  .zlist, .zlist tbody { display: block; }
  .zlist tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .1rem .7rem;
    padding: .75rem .9rem;
    border-top: 1px solid #f1f5f9;
  }
  .zlist tbody tr:first-child { border-top: 0; }
  .zlist colgroup { display: none; }
  .zlist td, .zlist td:first-child, .zlist td:last-child { display: block; width: auto; padding: .1rem 0; border-top: 0; }
  .zlist td.zlist__c-ref { grid-column: 2; grid-row: 2; text-align: right; }
  .zlist__c-stop { grid-column: 1 / -1; margin-top: .35rem; }
  .zlist__c-price { grid-column: 1; margin-top: .4rem; text-align: left; }
  .zlist__c-state { grid-column: 2; grid-row: 1; justify-self: end; }
  .zlist__group { background: rgba(239, 246, 255, .7); border-top: 2px solid #60a5fa; box-shadow: inset 3px 0 0 #60a5fa; }
  .zlist__group td { background: none; border-top: 0; box-shadow: none; padding-block: .1rem; }
  .zlist__child { background: rgba(239, 246, 255, .35); border-top: 0; box-shadow: inset 3px 0 0 #60a5fa; }
  .zlist__child td { background: none; box-shadow: none; }
  .zlist__alert { background: var(--warn-soft); box-shadow: inset 3px 0 0 #f59e0b; }
  .zlist__alert td { background: none; box-shadow: none; }

  .versus__row { grid-template-columns: 1fr; gap: .35rem; padding: 1.1rem .25rem; }
  .versus__arrow { display: none; }
  .versus__old { font-size: .9375rem; }

  .driverbay__phones { flex-direction: column; align-items: center; }
  .phone--back { display: none; }
}

@media (max-width: 620px) {
  :root { --header-h: 62px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .assurances { gap: .45rem 1rem; font-size: .8125rem; justify-content: flex-start; }
  .hero__copy { text-align: left; }
  .hero__lead { margin-inline: 0; }
  .showcase__head { text-align: left; }
  .showcase__notes, .showcase__notes--3 { grid-template-columns: 1fr; gap: 1.5rem; }
  .flow { grid-template-columns: 1fr; gap: 1.5rem; }
  .support { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .faq__q { font-size: 1rem; padding-block: 1.1rem; }
  .faq__a { padding-right: 2rem; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 2.25rem; }
  .window__caption { text-align: left; }
  /* A phone is drawn at its own logical width; below that it is the frame
     that gives way, never the interface inside it. */
  .phone { width: 100%; max-width: 390px; border-width: 8px; border-radius: 32px; }
  .phone__screen { height: 30rem; }
}

@media (max-width: 400px) {
  .segmented label { min-width: 3.6rem; padding-inline: .75rem; }
  .vrow__type { display: none; }
}

/* -- 23  Reduced motion / print ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn--primary:hover { transform: none; }
}

@media print {
  .site-header, .nav-toggle, .hero__bg { display: none; }
  .band--ink, .showcase--driver, .site-footer { background: #fff !important; color: #000 !important; }
  .h2--onink, .versus__new, .site-footer__address strong { color: #000 !important; }
}

/* ==========================================================================
   26  RELEASE-COPY RESPONSIVE FIXES
   Not present in the approved source (7622b886). Cause-level fixes for the
   layout defect reported on a Samsung Galaxy S24 Ultra. Each block states the
   mechanism it repairs; none of them hide a symptom behind overflow:hidden.
   ========================================================================== */

/* 1  GRID ITEMS MUST BE ABLE TO SHRINK.
   A single-column `grid-template-columns: 1fr` resolves to minmax(auto, 1fr),
   and that `auto` floor is the item's MIN-CONTENT width. With Android font
   metrics or a user font-scale setting, the min-content width of a price card
   and of the start column grew past the viewport and pushed the WHOLE PAGE
   into horizontal scrolling. A zero floor lets them reflow instead. */
.tiers > *, .start > *, .import > *, .flow > *, .support > *, .trust > *,
.showcase__notes > *, .site-footer__cols > *, .ograve > *, .driverbay > *,
.pricing__controls > *, .versus__row > * { min-width: 0; }

/* 2  THE DRIVER PHONE MUST NOT CUT ITS OWN CONTENT.
   `.phone__screen` had a FIXED height and `.phone__body { overflow: hidden }`,
   so every reflow — narrower column, Roboto metrics, larger user font — silently
   cut the bottom off the route. The height becomes a floor, never a ceiling. */
.phone__screen { height: auto; min-height: 33rem; }

/* 3  TAP TARGETS.
   Inline links inside body copy sat under the 24px comfortable-touch floor. */
@media (max-width: 1023px) {
  /* .faq__q must stay flex — it lays out the label against its chevron. */
  .site-footer__col ul a { display: block; min-height: 44px; padding-block: .5rem; }
  .faq__q { min-height: 44px; }
  .segmented label { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}

/* 4  THE MOCKUP BOARD RECOMPOSES WITHOUT MASKING.
   The recomposed track previously carried `overflow: hidden`, which turned any
   remaining overflow into invisible data loss. With one card at auto height
   there is nothing to clip, so the mask comes off and problems stay visible. */
@media (max-width: 1023px) {
  .vrow__track { overflow: visible; }
  .slot { overflow: visible; }
  .slot__customer, .stopline__place, .vrow__driver, .vrow__type {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* 5  THE URGENT UNASSIGNED CARD COLLAPSES ON THE WRONG AXIS.
   On desktop it animates OUT of a flex ROW (flex-grow and max-width to 0).
   Below 900px `.unassigned__list` becomes a COLUMN, where collapsing max-width
   leaves the card at full height while `overflow: hidden` cuts its content —
   this is the clipped card seen on the phone. Collapse vertically instead. */
@media (max-width: 900px) {
  .unassigned__list > * { flex: 0 0 auto; }
  #hero-uacard {
    max-width: none;
    max-height: 24rem;
    transition: opacity .25s ease, max-height .35s ease .05s,
                padding .35s ease .05s, margin .35s ease .05s,
                border-width .35s ease .05s;
  }
  .board.is-assigned #hero-uacard {
    max-width: none;
    max-height: 0;
    padding-block: 0;
    margin-right: 0;
    margin-bottom: -.5rem;
  }
}

/* 6  START PANEL (replaces the former inquiry form). */
.startcard {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-raised);
}
.startcard__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.startcard__text {
  margin: .5rem 0 1.1rem;
  color: var(--text-2);
  font-size: .9375rem;
  line-height: 1.6;
}
.startcard__rule {
  height: 1px;
  margin: 1.6rem 0;
  border: 0;
  background: var(--line);
}
.startcard__links { display: flex; flex-wrap: wrap; gap: .6rem; }
.startcard__links .btn { flex: 1 1 10rem; }

/* 7  LAST-MILE WRAPPING AT EXTREME USER FONT SCALING.
   At 360px with a 130% font-scale the recomposed vehicle-identity line and the
   driver stop header were a few pixels wider than their rounded, clipped
   parents. Let both wrap rather than lose their last characters. */
@media (max-width: 1023px) {
  .vrow__id { flex-wrap: wrap; }
  .vrow__driver { min-width: 0; margin-left: auto; }
  .dstop__top { flex-wrap: wrap; }
  .phone__body > *, .dstop > *, .vrow__id > * { min-width: 0; }
}

/* 8  THE RECOMPOSED CARD ITSELF MUST BE ABLE TO SHRINK.
   `.slot` is `flex: 1` but a flex item's default `min-width: auto` floors it at
   its MIN-CONTENT width — 276px inside a 271px row at 360px/130%, so the card
   pushed 16px past the clipped `.vrow`. Same root cause as fix 1, one level in. */
@media (max-width: 1023px) {
  .vrow__track, .slot, .slot > *, .slot__body > *, .slot__head > * { min-width: 0; }
}

/* 9  HEADER NAV TAP TARGETS ON LANDSCAPE PHONES.
   Between 861px and 1023px the horizontal desktop nav is shown on what is
   still a touch device, where its inline links were under 24px tall. */
@media (min-width: 861px) and (max-width: 1023px) {
  .site-nav__list a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* 10  *** THE REPORTED OVERLAP *** — form fields inside the order mockup.
   `.app__field` is `flex: 1`, i.e. flex-basis 0, competing in the same row with
   two `.app__field--narrow` siblings that carry a real basis. On a phone the
   zero-basis customer field won the smallest share and collapsed to a few
   pixels wide, while its uppercase label — which had no overflow handling —
   kept its full width and painted straight over the next field's label
   ("ZÁKAZNÍK" on top of "Č. ZÁKAZNÍKA"). That is the overlap seen on the
   S24 Ultra.
   Fix: give the wide field a full-width basis so it takes its own line, let the
   narrow fields pair up two per row, and make a label physically incapable of
   painting outside its own field again. */
@media (max-width: 1023px) {
  .app__field { flex: 1 1 100%; }
  .app__field--narrow { flex: 1 1 7rem; }
  .app__fieldlabel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app__input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 11  CARD HEADER MUST WRAP.
   `.slot__head` is a space-between row (kind + count on the left, Detail/Mapa
   on the right). At 320-360px with a 130% font-scale the two groups met in the
   middle and overlapped. Let the row wrap instead of colliding. */
@media (max-width: 1023px) {
  .slot__head { flex-wrap: wrap; row-gap: .25rem; }
}

/* 12  LOGIN STAYS VISIBLE ON PHONES.
   The "Přihlásit se" CTA now lives in the header bar itself rather than inside
   the collapsible nav, so an existing user never has to open the hamburger to
   find it. On desktop the natural DOM order already reads brand · nav · login;
   below the nav breakpoint the bar is reordered to brand · login · hamburger. */
.site-nav__cta { flex: none; }

@media (max-width: 860px) {
  .nav-toggle { order: 3; margin-left: .5rem; }
  .site-nav__cta { order: 2; margin-left: auto; }
  .site-header__inner { gap: .75rem; }
}

@media (max-width: 360px) {
  .site-nav__cta { padding-inline: .8rem; font-size: .8125rem; }
  .site-header__inner { gap: .5rem; }
}