/* ===========================================================================
   sections.css — blocks that appear once or twice on the page
   ===========================================================================
   Elements used everywhere live in components.css. Here are the ones that
   belong to one specific page section.
   =========================================================================== */

/* ===========================================================================
   SECTION MARKER — overline on the left, number on the right, rule below
   ===========================================================================
   The numbering is information, not decoration: the page is a documented
   process from the first phone call to the report, and the number tells you
   where you are.
   =========================================================================== */
.section-marker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-7);
}

.section-marker__number {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   01 · HERO
   =========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-9), 8vw, var(--space-11)) var(--section-pad-y);
  border-bottom: 1px solid var(--color-border-subtle);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: start;
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--space-9);
    align-items: center;
  }

}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hero__title {
  font-size: var(--text-display-xl);
  /* A measure given in `ch` resolves against the element's OWN font size, so
     here it constrains the heading, not the body copy. An earlier version put
     this limit on the `.hero__text` container — there `ch` resolved against the
     17 px body text and the heading wrapped onto five lines. */
  max-width: 18ch;
}

/* The part of the heading carrying the claim — copper at the end of the
   sentence, not at the start, so the accent underlines the conclusion instead
   of shouting from the first word. */
.hero__title em {
  font-style: normal;
  color: var(--color-accent-text);
}

.hero__lead {
  max-width: 52ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

/* --- Proof column: conversation -> record ------------------------------ */
/* Instead of abstract artwork we show what the product actually does. */
.proof {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.proof__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.proof__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.proof__channel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.proof__timer {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Pulsing "call in progress" dot. */
.pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-ok);
  flex-shrink: 0;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--color-ok);
  opacity: 0;
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}

@keyframes pulse-ring {
  0% { opacity: 0.7; transform: scale(0.7); }
  70% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.5); }

}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after {
    animation: none;
  }

}

.proof__quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.proof__speaker {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.proof__line {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

/* Arrow between the conversation and the record — direction of data flow. */
.proof__arrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.proof__arrow::before,
.proof__arrow::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, var(--color-accent-border));
}

.proof__arrow::after {
  background: linear-gradient(to left, transparent, var(--color-accent-border));
}

.proof__fields {
  display: grid;
  gap: var(--space-2);
}

.proof__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.proof__ticket {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

/* ===========================================================================
   02 · THESIS — "this is not a receptionist"
   ===========================================================================
   Two columns side by side: the typical bot vs our approach. The difference
   is the core of the offer, so it gets its own strong layout.
   =========================================================================== */
.thesis {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 56rem) {
  .thesis {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

}

.thesis__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* The "how it usually looks" column — muted, no accent. */
.thesis__col--common {
  background-color: transparent;
  border-style: dashed;
}

/* The "with us" column — set apart by a single, restrained signal. */
.thesis__col--ours {
  background-color: var(--color-surface);
  border-color: var(--color-accent-border);
  box-shadow: var(--shadow-md);
}

.thesis__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.thesis__col--common .thesis__label {
  color: var(--color-text-muted);
}

.thesis__col--ours .thesis__label {
  color: var(--color-accent-text);
}

.thesis__headline {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.thesis__col--common .thesis__headline {
  color: var(--color-text-secondary);
}

.thesis__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.thesis__point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.thesis__point-mark {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.5;
  flex-shrink: 0;
}

.thesis__col--common .thesis__point-mark {
  color: var(--color-text-muted);
}

.thesis__col--ours .thesis__point-mark {
  color: var(--color-accent-text);
}

/* Conclusion at the bottom of the "with us" column. */
.thesis__outcome {
  margin-top: auto;
  padding: var(--space-4);
  background-color: var(--color-accent-quiet);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

/* ===========================================================================
   03 · PRODUCT FAMILY
   =========================================================================== */
.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.product-card:hover {
  transform: translateY(-2px);
}

/* An available product gets a stronger border — the hierarchy is real. */
.product-card--live {
  border-color: var(--color-accent-border);
}

.product-card--live:hover {
  border-color: var(--color-accent);
}

.product-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.product-card__name {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.product-card__role {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-card__body {
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.product-card__foot {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent-text);
}

/* ===========================================================================
   04 · WHAT WE AUTOMATE — cards with a ladder of labels
   ===========================================================================
   The ladder answers the board's questions in their own order, so every card
   stands on its own for a sceptic.
   =========================================================================== */
.autocard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.autocard__title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.autocard__rung {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.autocard__rung-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.autocard__rung-text {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

/* The last rung — the "effect" — gets its own background, because it is the
   one that sells. */
.autocard__effect {
  margin-top: auto;
  padding: var(--space-4);
  background-color: var(--color-accent-quiet);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.autocard__effect .autocard__rung-text {
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

/* On phones the card drops its middle rungs — problem and effect remain. */
@media (max-width: 47.9375rem) {
  .autocard__rung--optional {
    display: none;
  }

}

/* ===========================================================================
   05 · CONVERSATION TIMELINE
   =========================================================================== */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  position: relative;
  padding-left: var(--space-7);
}

/* Vertical rail. */
.timeline::before {
  content: '';
  position: absolute;
  top: var(--space-2);
  bottom: var(--space-6);
  left: 5px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-accent-border),
    var(--color-border-subtle)
  );
}

.timeline__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Bead on the rail. */
.timeline__step::before {
  content: '';
  position: absolute;
  left: calc(var(--space-7) * -1);
  top: 0.4em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-canvas);
  border: 2px solid var(--color-accent);
}

.timeline__when {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.timeline__what {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

.timeline__detail {
  max-width: 62ch;
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ===========================================================================
   06 · CONVERSATION DEMO  (markup built by assets/js/demo.js)
   =========================================================================== */
.demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.demo__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.demo__tab {
  padding: var(--space-3) var(--space-4);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.demo__tab:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.demo__tab.is-selected {
  background-color: var(--color-accent-quiet);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.demo__summary {
  max-width: var(--width-prose);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.demo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 60rem) {
  .demo__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

}

.demo__panel {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.demo__panel--record {
  border-color: var(--color-accent-border);
}

.demo__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--color-surface-sunken);
}

.demo__panel-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.demo__live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ok-text);
}

.demo__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-ok);
}

.demo__counter {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

/* Both panels share the same height and scroll INSIDE themselves. */
.demo__transcript,
.demo__record {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  min-height: 380px;
  max-height: 460px;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.demo__record {
  gap: var(--space-2);
}

.demo__turn {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  animation: demo-in var(--duration-slow) var(--ease-out) both;
}

@keyframes demo-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }

}

@media (prefers-reduced-motion: reduce) {
  .demo__turn {
    animation: none;
  }

}

.demo__who {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.demo__bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
}

/* Assistant — brand accent on the left edge. */
.demo__turn--bot .demo__bubble {
  background-color: var(--color-surface-sunken);
  border-left: 2px solid var(--color-accent);
  color: var(--color-text-primary);
}

/* Resident — neutral, slightly indented. */
.demo__turn--caller .demo__bubble {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.demo__turn--caller {
  padding-left: var(--space-5);
}

.demo__note {
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border-subtle);
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.demo__record-empty {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.demo__field {
  animation: demo-in var(--duration-base) var(--ease-out) both;
}

.demo__outcome {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  animation: demo-in var(--duration-slow) var(--ease-out) both;
}

.demo__outcome--ticket {
  background-color: var(--color-ok-quiet);
  border: 1px solid color-mix(in srgb, var(--color-ok) 32%, transparent);
}

.demo__outcome--record {
  background-color: var(--color-info-quiet);
  border: 1px solid color-mix(in srgb, var(--color-info) 32%, transparent);
}

.demo__outcome-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.demo__outcome--ticket .demo__outcome-label {
  color: var(--color-ok-text);
}

.demo__outcome--record .demo__outcome-label {
  color: var(--color-info-text);
}

.demo__outcome-detail {
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.demo__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.demo__progress {
  flex: 1;
  min-width: 120px;
  height: 2px;
  background-color: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.demo__progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--color-accent);
  transition: width var(--duration-base) var(--ease-out);
}

/* ===========================================================================
   07 · PORTAL — vertical tabs
   =========================================================================== */
.panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 60rem) {
  .panels {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
  }

}

.panels__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.panels__tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background-color: transparent;
  border: 0;
  border-left: 2px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.panels__tab:hover {
  background-color: var(--color-surface);
}

.panels__tab.is-selected {
  background-color: var(--color-surface);
  border-left-color: var(--color-accent);
}

.panels__tab-name {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  color: var(--color-text-secondary);
}

.panels__tab.is-selected .panels__tab-name {
  color: var(--color-text-primary);
}

.panels__tab-hint {
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.panels__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.panels__body[hidden] {
  display: none;
}

.panels__body-title {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

/* ===========================================================================
   CASE FLOW — one repair, from the caller to the technician
   ===========================================================================
   This is deliberately built from the same restrained line language as the
   other illustrations. The static state already explains the process; the
   motion layer only gives the four steps a reading order.
   =========================================================================== */
.caseflow {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.caseflow__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border-subtle);
}

.caseflow__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.caseflow__status {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.caseflow__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.caseflow__step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.caseflow__scene {
  display: grid;
  place-items: center;
  min-width: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.caseflow__drawing {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-text-muted);
}

.caseflow__ink,
.caseflow__ground,
.caseflow__key {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.caseflow__ink {
  stroke: currentColor;
  stroke-width: 1.5;
}

.caseflow__ground {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.28;
}

.caseflow__key {
  stroke: var(--color-accent);
  stroke-width: 1.9;
}

.caseflow__copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  align-content: start;
  min-width: 0;
}

.caseflow__copy strong {
  align-self: center;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.caseflow__copy > span:last-child {
  grid-column: 1 / -1;
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.caseflow__number {
  display: inline-grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition: color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.caseflow__summary {
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border-subtle);
  /* Was --text-caption (14 px) — the only running text on the page at that
     size. A caption size is for a label under a figure, not for a sentence a
     reader is expected to get through. */
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.caseflow__step.is-active .caseflow__scene {
  background-color: var(--color-accent-quiet);
  border-color: var(--color-accent-border);
  box-shadow: var(--shadow-sm);
}

.caseflow__step.is-active .caseflow__number,
.caseflow__step.is-complete .caseflow__number {
  color: var(--color-text-on-accent);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

@media (min-width: 48rem) {
  .caseflow__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .caseflow__step {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .caseflow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: var(--space-9);
    left: 100%;
    width: var(--space-4);
    height: 1px;
    background: linear-gradient(to right, var(--color-accent), var(--color-border-strong));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-slow) var(--ease-out);
    z-index: 1;
  }

  .caseflow__step.is-complete::after {
    transform: scaleX(1);
  }

}

@media (max-width: 35rem) {
  .caseflow__head {
    align-items: flex-start;
    flex-direction: column;
  }

}

/* ===========================================================================
   08 · LIMITS — "what the assistant does not do"
   ===========================================================================
   This section exists on purpose. With a conservative decision-maker, stated
   limits build trust more strongly than another list of promises.
   =========================================================================== */
.limits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .limits {
    grid-template-columns: 1fr 1fr;
  }

}

.limit {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5);
  background-color: transparent;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.limit__mark {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.limit__title {
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

.limit__body {
  grid-column: 2;
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Disclaimer — we state outright what we are NOT claiming. */
.disclaimer {
  padding: var(--space-5);
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-info);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ===========================================================================
   CLOSING CTA
   =========================================================================== */
.cta-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
  padding: clamp(var(--space-6), 5vw, var(--space-9));
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-lg);
}

.cta-panel > :not(.accent-glow, .cta-orbit) {
  position: relative;
  z-index: 1;
}

.cta-orbit {
  position: absolute;
  top: 50%;
  right: calc(var(--space-9) * -1);
  width: calc(var(--space-12) * 2);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-pill);
  opacity: 0.65;
  pointer-events: none;
}

.cta-orbit::before,
.cta-orbit::after {
  content: '';
  position: absolute;
  border: 1px solid var(--color-border-strong);
  border-radius: inherit;
}

.cta-orbit::before {
  inset: var(--space-5);
}

.cta-orbit::after {
  inset: var(--space-8);
}

.cta-orbit span {
  position: absolute;
  z-index: 1;
  display: block;
  width: var(--space-3);
  height: var(--space-3);
  background-color: var(--color-accent);
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-accent);
}

.cta-orbit span:nth-child(1) { top: 11%; left: 27%; }
.cta-orbit span:nth-child(2) { top: 54%; left: -1%; }
.cta-orbit span:nth-child(3) { right: 16%; bottom: 9%; }

@media (max-width: 47.9375rem) {
  .cta-orbit {
    right: calc(var(--space-12) * -1);
    opacity: 0.35;
  }
}

.cta-panel__title {
  max-width: 26ch;
  font-size: var(--text-display-lg);
}

.cta-panel__lead {
  max-width: 58ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.cta-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ===========================================================================
   UPCOMING PRODUCT PAGES
   =========================================================================== */
.pagehead {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-8), 6vw, var(--space-10));
  border-bottom: 1px solid var(--color-border-subtle);
}

.pagehead__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 60ch;
}

.product-pagehead {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: center;
}

.product-pagehead__shot {
  position: relative;
  z-index: 1;
}

.product-pagehead__shot::before {
  content: '';
  position: absolute;
  inset: var(--space-5) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-5);
  z-index: -1;
  background-color: var(--color-accent-quiet);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-md);
}

@media (max-width: 58rem) {
  .product-pagehead {
    grid-template-columns: 1fr;
  }

  .product-pagehead__shot {
    max-inline-size: 46rem;
  }
}

.pagehead__title {
  font-size: var(--text-display-lg);
}

/* Breadcrumb trail */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-accent-text);
}

/* ===========================================================================
   HERO STATS
   ===========================================================================
   Three numbers that can actually be verified. No "−60% kosztow" or "wdrozenie
   w 14 dni" — with a conservative decision-maker, unverifiable numbers read as
   a sales pitch and lower trust.
   =========================================================================== */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--space-5);
  padding-top: var(--space-5);
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

/* Status badge in the product tab — aligned left under the name. */
.panels__tab .badge {
  align-self: flex-start;
  margin-top: var(--space-1);
}

/* Who performs this step — makes responsibility explicit. */
/* Shared with the flow diagram, which is now its only user — the horizontal
   step axis it was written for is gone. Both properties are needed because the
   parent is a GRID: `align-self` governs the block axis there, so without
   `justify-self` the badge stretches the full width of the card. */
.hstep__actor {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  justify-self: start;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hstep__actor--auto {
  border-color: var(--color-accent-border);
  color: var(--color-accent-text);
}

/* ===========================================================================
   SCREENSHOT PLACEHOLDER
   ===========================================================================
   A stand-in frame until real screenshots of the portal and the app exist.
   It looks INTENTIONAL, not like a broken image: it carries a caption saying
   what belongs here, plus the aspect ratio of the target shot.

   SWAPPING IN A REAL IMAGE — replace the whole block with:
     <figure class="shot">
       <img src="../assets/img/portal-lista-zgloszen.png"
            alt="Lista zgłoszeń w portalu z filtrami po kategorii i pilności"
            width="1600" height="1000" loading="lazy">
       <figcaption class="shot__caption">Lista zgłoszeń</figcaption>
     </figure>
   Recommended shot: 1600x1000 px (16:10 aspect ratio), PNG, no resident data.
   =========================================================================== */
.shot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.shot img {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.shot__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  aspect-ratio: 16 / 10;
  padding: var(--space-5);
  text-align: center;
  background-color: var(--color-surface-sunken);
  border: 1px dashed var(--color-border-control);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Subtle grid behind the frame — signals "an image goes here". */
.shot__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--color-hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-hairline) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.shot__label {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.shot__what {
  position: relative;
  max-width: 42ch;
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.shot__spec {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.shot__caption {
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.module-shot {
  max-inline-size: 42rem;
  margin-block-start: var(--space-5);
}

.module-shot--phone {
  max-inline-size: 19rem;
}

.flow-shot {
  max-inline-size: 34rem;
  margin-block-start: var(--space-4);
}

.flow-shot .shot__frame {
  aspect-ratio: 16 / 8;
  min-block-size: 11rem;
}

.flow-shot--phone {
  max-inline-size: 18rem;
}

.flow-shot--phone .shot__frame {
  aspect-ratio: 9 / 12;
}

.flow-shot--phone > img {
  max-inline-size: 18rem;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: top;
}

/* Narrow variant — for phone shots (the resident app). */
.shot--phone .shot__frame,
.shot--phone > img {
  aspect-ratio: 9 / 16;
  max-width: 300px;
  margin-inline: auto;
}

.shot--phone > img {
  object-fit: cover;
  object-position: top;
}

/* Wide variant — a portal panel spanning the full section width. */
.shot--wide .shot__frame,
.shot--wide > img {
  aspect-ratio: 21 / 9;
}

/* ===========================================================================
   TECHNICIAN NOTIFICATION CARD
   ===========================================================================
   Shows the CONTENT of the message the technician receives — because that is
   the proof that the diagnostics gathered during the call really does cut
   down their work.
   =========================================================================== */
.sms {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.sms__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sms__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--color-surface-sunken);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-xs);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.sms__line strong {
  color: var(--color-accent-text);
  font-weight: var(--weight-medium);
}

.sms__foot {
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ===========================================================================
   PLEDGE — a standing commitment, not another feature card
   ===========================================================================
   Used for the single statement the company wants remembered: an AI worker
   does NOT replace the people already employed. It gets its own treatment
   because a board member weighing "will this cost someone their job" reads
   that objection before reading any feature list — and a claim buried in a
   grid of cards would not answer it.

   Keep it to ONE per page. The moment there are two, neither is a pledge.
   =========================================================================== */
.pledge {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
}

@media (min-width: 60rem) {
  .pledge {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: var(--space-8);
    align-items: start;
  }

}

.pledge__title {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  text-wrap: balance;
}

.pledge__lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.pledge__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The concrete boundaries. Deliberately phrased as "does not" — the objection
   is answered by limits, not by promises. */
.pledge__limits {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
}

.pledge__limits-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ===========================================================================
   DIAGRAM PRZEPŁYWU — droga sprawy
   ===========================================================================
   Replaces the seven-step wizard. The wizard hid six of its seven steps
   behind a button, so the one thing worth showing — that the path is one
   unbroken chain and only a single link is manual — was invisible until you
   clicked. A diagram shows the whole chain at once.

   The spine is a real element, not a ::before on the list: the connectors
   have to start from it at each node, and a pseudo-element cannot be
   referenced by the nodes' own connectors.

   Sides alternate on wide screens; below the breakpoint everything collapses
   to one column with the spine on the left, because two 300px columns either
   side of a rule stop being readable long before the layout breaks.
   =========================================================================== */
.flow {
  position: relative;
  display: grid;
  gap: var(--space-6);
  margin-block-start: var(--space-8);
}

.flow__spine {
  position: absolute;
  inset-block: 1.6rem;
  inset-inline-start: 1.1rem;
  inline-size: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--color-accent-border) 8%,
    var(--color-accent-border) 92%,
    transparent
  );
  pointer-events: none;
}

.flow__node {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* The numbered dot sitting on the spine. */
.flow__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-text);
  background-color: var(--color-canvas);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-pill);
}

/* A node the client's own staff performs, not the assistant. Marked because
   "only one link in this chain is manual" is the point of the section. */
.flow__node--human .flow__dot {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  border-style: dashed;
}

/* COMPACT BY DEFAULT. The first version gave every step a 190 px picture in
   its own panel and alternated sides, so seven steps ran taller than the rest
   of the page put together. The drawing is a marker for the step, not an
   exhibit — at chip size it still tells you who is acting, and the chain
   becomes readable as a chain, which was the point of drawing it. */
.flow__card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.flow__body {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.flow__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: 1.25;
  text-wrap: balance;
}

.flow__line {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  line-height: 1.55;
}

/* Painted FIRST even though it comes second in the markup: the narrow column
   belongs to the marker, and the heading has to stay ahead of it in the source
   so the reading order and the heading outline are unaffected. Without this the
   body lands in the 4.5 rem column and the text is squeezed into a strip. */
.flow__art {
  order: -1;
  display: grid;
  place-items: center;
  padding: var(--space-2);
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
}

.flow__art .illus {
  max-inline-size: 3.25rem;
}

/* Wide screens: card splits into picture and words, and the picture changes
   side each step. That alternation is the whole rhythm of the section. */
@media (min-width: 60rem) {
  .flow {
    gap: var(--space-5);
  }

  /* Wide screens put the actor badge and the title on one line, so a step is
     two lines of text beside its marker instead of four. */
  .flow__body {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'actor title'
      'line  line';
    gap: var(--space-1) var(--space-4);
    align-items: baseline;
  }

  .flow__body > .hstep__actor {
    grid-area: actor;
  }

  .flow__title {
    grid-area: title;
  }

  .flow__line {
    grid-area: line;
  }

}

/* The closing note: what the whole chain adds up to. */
.flow__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-block-start: var(--space-6);
  margin-inline-start: 3.4rem;
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--color-accent-border);
  color: var(--color-text-secondary);
}

@media (max-width: 47.99rem) {
  .flow__sum {
    margin-inline-start: 0;
  }

}

/* Expanded evidence lives inside the relevant step, so the flow remains the
   main story instead of sending the reader to a duplicate section below it. */
.flow__details {
  grid-column: 1 / -1;
  margin-block-start: var(--space-1);
  border-block-start: 1px solid var(--color-border-subtle);
}

.flow__details summary {
  padding-block-start: var(--space-3);
  color: var(--color-accent-text);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.flow__details[open] summary {
  margin-block-end: var(--space-4);
}

.flow-detail-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  list-style: none;
}

.flow-detail-list li {
  position: relative;
  padding-inline-start: var(--space-5);
}

.flow-detail-list li::before {
  content: '↳';
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-accent-text);
  font-family: var(--font-mono);
}

.case-record {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background-color: var(--color-border-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.case-record > span {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  background-color: var(--color-surface-sunken);
}

.case-record small {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.case-record strong {
  color: var(--color-text-primary);
  font-size: var(--text-body-sm);
}

.sms--compact {
  gap: var(--space-3);
  padding: var(--space-4);
  box-shadow: none;
}

/* Scheduled communication is shown as a small agenda, because timing and
   recipient selection are the feature — another row of generic cards would
   hide that relationship. */
.communication-planner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-7);
  margin-block-start: var(--space-7);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-md);
}

.communication-planner--planned {
  border-style: dashed;
}

.communication-planner__intro {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.communication-planner__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* This particular split carries a long heading and three dense rows. It needs
   more room than the generic split before becoming two columns; otherwise the
   marked phrase can paint underneath the list at intermediate widths. */
.channels-layout,
.channels-layout > * {
  min-inline-size: 0;
}

@media (min-width: 62rem) and (max-width: 71.99rem) {
  .channels-layout {
    grid-template-columns: 1fr;
  }
}

.communication-planner__intro h3,
.report-mail__copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  line-height: var(--leading-snug);
}

.communication-planner__intro p,
.report-mail__copy > p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.communication-planner__schedule {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--color-border-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  list-style: none;
}

.communication-planner__schedule li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-surface);
}

.communication-planner__schedule time {
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.communication-planner__schedule span {
  display: grid;
  gap: var(--space-1);
}

.communication-planner__schedule small {
  color: var(--color-text-muted);
}

@media (min-width: 48rem) {
  .caseflow--standalone {
    margin-block-start: var(--space-7);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
  }

  .case-record {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===========================================================================
   OPERATIONS CENTER — one real working surface instead of a grid of feature
   cards. It demonstrates the relationship between queue, people, messages and
   reports while keeping the numbers explicitly marked as demo data.
   =========================================================================== */
.ops-center {
  margin-block-start: var(--space-7);
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.ops-center__topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-block-size: 3.5rem;
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-sunken);
  border-block-end: 1px solid var(--color-border-subtle);
  font-size: var(--text-caption);
}

.ops-center__brand,
.ops-center__tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ops-center__brand {
  color: var(--color-text-primary);
}

.ops-center__signal {
  inline-size: 0.55rem;
  block-size: 0.55rem;
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 0.28rem var(--color-accent-quiet);
}

.ops-center__demo {
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
}

.ops-center__tools {
  margin-inline-start: auto;
}

.ops-center__tools span {
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xs);
}

.ops-center__layout {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  min-width: 0;
}

.ops-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-3);
  background-color: var(--color-surface-sunken);
  border-inline-end: 1px solid var(--color-border-subtle);
}

.ops-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--color-text-muted);
  border-radius: var(--radius-xs);
  font-size: var(--text-body-sm);
}

.ops-nav__item span {
  font-family: var(--font-mono);
  font-size: var(--text-label);
}

.ops-nav__item.is-active {
  color: var(--color-accent-text);
  background-color: var(--color-accent-quiet);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.ops-workspace {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
}

.ops-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.ops-kpi {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.ops-kpi > span,
.ops-kpi small {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.ops-kpi strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--text-display-md);
}

.ops-kpi--urgent {
  border-color: color-mix(in srgb, var(--color-warn) 45%, transparent);
}

.ops-grid,
.ops-insights {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(15rem, 0.85fr);
  gap: var(--space-4);
}

.ops-board,
.ops-activity,
.ops-chart,
.ops-actions {
  min-width: 0;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.ops-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.ops-block-head h3 {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-body);
}

.ops-filter {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

.ops-ticket {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto 3.2rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-block-start: 1px solid var(--color-border-subtle);
}

.ops-ticket > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.ops-ticket > div span,
.ops-ticket > small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-ticket__priority,
.ops-ticket__assign,
.ops-ticket__owner {
  display: inline-grid;
  place-items: center;
  min-block-size: 1.75rem;
  padding-inline: var(--space-2);
  color: var(--color-accent-text);
  background-color: var(--color-accent-quiet);
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
}

.ops-ticket--urgent .ops-ticket__priority {
  color: var(--color-warn-text);
  background-color: var(--color-warn-quiet);
}

.ops-ticket__priority--wait {
  color: var(--color-text-secondary);
  background-color: var(--color-surface-sunken);
}

.ops-ticket__assign {
  border: 1px solid var(--color-accent-border);
}

.ops-ticket__owner {
  inline-size: 1.75rem;
  padding: 0;
  color: var(--color-text-primary);
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
}

.ops-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-accent-quiet);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.ops-note p {
  margin: 0;
}

.ops-note__avatar {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--color-text-on-accent);
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-label);
}

.ops-feed {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ops-feed li {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding-inline-start: var(--space-5);
  font-size: var(--text-body-sm);
}

.ops-feed li:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-block-start: 1rem;
  inset-block-end: calc(-1 * var(--space-4));
  inset-inline-start: 0.28rem;
  inline-size: 1px;
  background-color: var(--color-border-subtle);
}

.ops-feed__dot {
  position: absolute;
  inset-block-start: 0.35rem;
  inset-inline-start: 0;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  background-color: var(--color-accent);
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--color-accent-border);
}

.ops-feed small {
  color: var(--color-text-muted);
}

.ops-bars {
  display: grid;
  gap: var(--space-3);
}

.ops-bars > span {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: var(--space-3);
}

.ops-bars small {
  color: var(--color-text-secondary);
}

.ops-bars i {
  position: relative;
  display: block;
  block-size: 0.45rem;
  overflow: hidden;
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
}

.ops-bars i::after {
  content: '';
  position: absolute;
  inset: 0;
  inline-size: var(--bar);
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  border-radius: inherit;
}

.ops-bars strong {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  text-align: end;
}

.ops-action-row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.ops-action-row strong {
  color: var(--color-accent-text);
  font-size: var(--text-caption);
}


.report-mail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.8fr);
  gap: var(--space-8);
  align-items: center;
  margin-block-start: var(--space-9);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.report-mail.report-mail--planned {
  border-style: dashed;
}

.report-mail__copy {
  display: grid;
  gap: var(--space-4);
}

.report-mail__preview {
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.report-mail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  background-color: var(--color-accent-quiet);
  border-block-end: 1px solid var(--color-accent-border);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.report-mail__subject {
  margin: 0;
  padding: var(--space-4);
  color: var(--color-text-primary);
  border-block-end: 1px solid var(--color-border-subtle);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
}

.report-mail__preview dl {
  display: grid;
  margin: 0;
  padding: 0 var(--space-4);
}

.report-mail__preview dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border-subtle);
}

.report-mail__preview dt {
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.report-mail__preview dd {
  margin: 0;
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}

.report-mail__link {
  display: block;
  margin: var(--space-4);
  padding: var(--space-3);
  color: var(--color-text-on-accent);
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  text-align: center;
}

.portal-value {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border-subtle);
}

.portal-value p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
}

@media (max-width: 60rem) {
  .ops-center__layout {
    grid-template-columns: 1fr;
  }

  .ops-nav {
    flex-direction: row;
    overflow-x: auto;
    border-inline-end: 0;
    border-block-end: 1px solid var(--color-border-subtle);
  }

  .ops-nav__item {
    flex: 0 0 auto;
  }

  .ops-grid,
  .ops-insights,
  .communication-planner,
  .report-mail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 42rem) {
  .ops-center__topbar,
  .ops-center__tools,
  .ops-kpis,
  .portal-value {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ops-center__tools {
    grid-column: 1 / -1;
    margin-inline-start: 0;
  }

  .ops-center__demo {
    justify-self: end;
  }

  .ops-workspace {
    padding: var(--space-3);
  }

  .ops-ticket {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  }

  .ops-ticket > small {
    display: none;
  }

  .ops-note {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ops-note > span:last-child {
    display: none;
  }

}

@media (max-width: 30rem) {
  .ops-kpis,
  .portal-value,
  .case-record {
    grid-template-columns: 1fr;
  }

  .ops-ticket {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }

  .ops-ticket__assign,
  .ops-ticket__owner {
    display: none;
  }

  .ops-bars > span {
    grid-template-columns: 5.5rem minmax(0, 1fr) 1.75rem;
  }
}

/* ===========================================================================
   ZAKŁADKI MODUŁÓW
   ===========================================================================
   The product's four modules as tabs rather than four cards side by side.
   Four cards showed everything at once and the section competed with itself;
   folded away, three of them leave room for the screenshot that actually
   sells the fourth.

   Without JavaScript the first panel is visible and the rest carry `hidden`,
   so the content is still in the page for search engines and screen readers.
   =========================================================================== */
.module-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: var(--space-5);
  overflow: hidden;
  background-color: var(--color-border-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.module-points > span {
  display: grid;
  gap: var(--space-2);
  min-block-size: 6.5rem;
  align-content: center;
  padding: var(--space-4);
  background-color: var(--color-surface-sunken);
}

.module-points strong {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: var(--text-title);
}

.module-points small {
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
}

@media (max-width: 38rem) {
  .module-points {
    grid-template-columns: 1fr;
  }

  .module-points > span {
    min-block-size: 0;
  }
}

.panels--modules .panels__tab {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-areas:
    'icon name'
    'icon hint';
  gap: 0 var(--space-3);
  align-items: center;
}

.panels--modules .panels__tab-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
}

/* The selected tab's chip picks up the accent, so the tab list and the panel
   beside it read as one selection rather than two independent states. */
.panels--modules .panels__tab.is-selected .panels__tab-icon {
  color: var(--color-accent-text);
}

.panels--modules .panels__tab-name {
  grid-area: name;
}

.panels--modules .panels__tab-hint {
  grid-area: hint;
}

/* A panel holds one line of copy and one screenshot frame; the frame should
   not stretch to the full width of a wide panel or the crop stops matching
   what the caption promises. */
.panels--modules .shot {
  margin-block-start: var(--space-5);
}

.panels--modules .shot:not(.shot--wide) .shot__frame {
  max-inline-size: 560px;
}

/* ===========================================================================
   „PO PAŃSTWA STRONIE" — KOSZT WYSIŁKU PRZY KAŻDYM KROKU
   ===========================================================================
   The objection that stops a sale is rarely price; it is "how much of MY time
   will this eat". Every step of the rollout therefore states what the client
   has to do, in their own hours, right next to what we do. Set apart from the
   description so it can be skimmed down the column on its own.
   =========================================================================== */
.timeline__cost {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent-quiet);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-xs);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.timeline__cost strong {
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* ===========================================================================
   PANEL W PANELU — NA TELEFONIE BEZ DRUGIEGO MARGINESU BOCZNEGO
   ===========================================================================
   Responsive spacing tokens fixed most of the nested-inset problem, but not
   the last layer: where a panel sits inside another panel, both still add a
   horizontal inset, and the outer one has already separated the content from
   the screen edge. On a 390 px screen that second inset is pure loss — it cost
   the worst paragraph 32 px of the 130 px it had left to give.

   Only the HORIZONTAL inset goes. Vertical padding stays, because that is what
   separates the nested block from what sits above and below it; removing it
   would merge the two panels into one grey mass.

   Above this breakpoint nothing changes: on a wide screen the double inset is
   what makes a nested panel legible as a separate object.

   LIVES IN sections.css, NOT layout.css: these components set `padding` with
   the shorthand in this very file, and layout.css is loaded earlier — the same
   rule placed there lost the cascade and silently did nothing.
   =========================================================================== */
@media (max-width: 40rem) {
  .pledge__limits,
  .thesis__column,
  .autocard__effect,
  .caseflow__summary,
  .demo__panel,
  .panels__body {
    padding-inline: 0;
  }

  /* The bullet marker's own offset is all the indent a list needs here. */
  .feature-list__item {
    padding-inline-start: calc(10px + var(--space-2));
  }
}

/* ===========================================================================
   MIARA WIERSZA DLA TEKSTU CIĄGŁEGO
   ===========================================================================
   Nine paragraphs measured over 80 characters on a 1440 px screen, the worst
   at 133. A column that wide costs comprehension: the eye finishes a line and
   has to hunt for the start of the next one.

   Applied to the running-text classes rather than to `main p`, because a good
   number of paragraphs here are deliberately narrow cells inside a grid, data
   values or captions, and capping those would do nothing but confuse a future
   reader of this file about which rule is in charge.

   `ch` rather than `rem`: the measure should follow the font, and the font
   itself now scales with the viewport.
   =========================================================================== */
.section-lead,
.card__body,
.disclaimer,
.timeline__detail,
.timeline__cost,
.caseflow__summary,
.pledge__lead,
.cta-panel__lead,
.thesis__outcome,
.demo__summary,
.hero__lead {
  max-inline-size: var(--width-text);
}

/* A centred block keeps its measure centred; left-aligned copy stays put. */
.cta-panel__lead {
  margin-inline: auto;
}

/* ===========================================================================
   DOKUMENT PRAWNY
   ===========================================================================
   The policy page put `max-width: 72ch` on the .container itself. A container
   centres its own box, so the narrow measure drifted to the middle of the
   viewport while the page heading above stayed on the page grid — 212 px apart,
   which is what made the page look broken rather than merely plain.

   The measure now sits on the CONTENT. The container keeps its full width and
   its usual gutters, so the text starts on the same line as the title.

   Headings also inherited the display scale: a numbered section heading came
   out at 48 px, exactly the size of the page title, against 17 px body copy.
   A legal document needs the opposite — quiet headings and readable text.
   =========================================================================== */
.legal {
  max-inline-size: 72ch;
}

.legal h2 {
  margin-block: var(--space-8) var(--space-4);
  font-size: var(--text-display-md);
  line-height: 1.2;
  text-wrap: balance;
}

.legal > *:first-child h2,
.legal > div:first-child h2 {
  margin-block-start: 0;
}

.legal h3 {
  margin-block: var(--space-5) var(--space-3);
  font-size: var(--text-title);
}

/* Paragraphs carried no spacing of their own and the stack gap did not reach
   them, so consecutive paragraphs ran together into one block of grey. */
.legal p {
  margin-block: 0 var(--space-4);
  max-inline-size: var(--width-text);
  color: var(--color-text-secondary);
}

.legal p:last-child {
  margin-block-end: 0;
}

.legal ul,
.legal ol {
  margin-block: 0 var(--space-4);
  padding-inline-start: var(--space-6);
  color: var(--color-text-secondary);
}

.legal li {
  margin-block-end: var(--space-2);
}

.legal li::marker {
  color: var(--color-accent);
}

.legal strong {
  color: var(--color-text-primary);
}

/* The registration block reads as data, so it is set as data. */
.legal address {
  margin-block: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  font-style: normal;
  font-size: var(--text-body-sm);
  line-height: 1.7;
}

/* ===========================================================================
   UKŁAD DOKUMENTU PRAWNEGO ZE SPISEM TREŚCI
   ===========================================================================
   The policy looked narrower than the rest of the site, but the measurement
   said the opposite: its text column is 720 px and 68 characters per line,
   WIDER than any other page here (486-600 px, 44-55 characters). What actually
   differed was the 472 px of container sitting empty beside it, where every
   other page has a drawing or a second column.

   So the text was left alone — widening it to the full container would give
   roughly 118 characters per line, which is unreadable — and the empty half
   was given something to do. A seven-section legal document needs a way to
   navigate it anyway.

   The list comes SECOND in the markup on narrow screens (order below) but is
   painted first on wide ones, because a reader on a phone wants the document,
   not its index.
   =========================================================================== */
.legal-layout {
  display: grid;
  gap: var(--space-7);
}

.legal-toc {
  align-self: start;
}

.legal-toc__label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.legal-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.legal-toc__list li {
  counter-increment: toc;
  margin-block-end: var(--space-1);
}

.legal-toc__list a {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  line-height: 1.4;
  text-decoration: none;
}

.legal-toc__list a::before {
  content: counter(toc) '.';
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.legal-toc__list a:hover {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

@media (min-width: 62rem) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: var(--space-9);
    align-items: start;
  }

  /* Document first in the source, index first on the page. */
  .legal-toc {
    order: 2;
    position: sticky;
    /* Clears the fixed navigation bar, otherwise the top entry hides behind it. */
    top: calc(var(--nav-height) + var(--space-5));
  }

  .legal {
    order: 1;
  }
}

/* An anchored heading must not land under the fixed nav bar. */
.legal h2[id] {
  scroll-margin-top: calc(var(--nav-height) + var(--space-5));
}