/* Variant B — BLUEPRINT
   Axis: structure made visible. One grotesque at two widths, a measured hairline
   grid, uppercase micro-labels and green used as a structural line and fill.
   No monospace: the technical read comes from the grid and the rules, not from
   dressing the type up as code.
   Signature moment: the rules draw themselves across as each system assembles. */

:root {
  --ground: #EDE3CE;
  --ground-deep: #E2D5B8;
  --ink: #1F1C17;
  --ink-soft: #534B3E;
  --rule: rgba(31, 28, 23, 0.22);
  --rule-strong: rgba(31, 28, 23, 0.42);

  --accent: #24503A;
  --accent-deep: #16331F;
  --accent-soft: #4C7A5E;
  /* The windmill logo's own green, sampled from assets/Logo (opaque-pixel median).
     The wordmark text uses it so the mark and the name are one colour. 9.0:1 on
     --ground. Not a replacement for --accent — the page's structure stays on that. */
  --brand: #054D2B;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --text-base: 1.06rem;

  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --dur: 320ms;
}

body { font-variation-settings: "wdth" 100; }

/* ------------------------------- nav ------------------------------- */
/* The bar carries a light veil and a blur from the first pixel, not only once it
   sticks. Fully transparent over the dot field it had no edge of its own and read
   as part of the artwork — the links looked like they had been dropped on the
   drawing. The blur is what separates it: the dots go soft behind the bar, so the
   bar reads as a layer in front rather than as more texture. It firms up on scroll
   rather than appearing from nothing. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem var(--gutter);
  /* At the top of the page the bar is barely there: a breath of ground, a 3px
     blur, and NO rule — just enough to keep the dots from running through the
     letters. The bar earns its weight on the first scroll, when it stops being
     part of the picture and starts being a fixed control. */
  background: color-mix(in srgb, var(--ground) 20%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-bottom: 1px solid transparent;
  transition: background 320ms var(--ease), border-color 320ms var(--ease),
              backdrop-filter 320ms var(--ease), -webkit-backdrop-filter 320ms var(--ease);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.06);
  backdrop-filter: blur(12px) saturate(1.06);
  border-bottom-color: var(--rule-strong);
}

/* ONE wordmark, nav and footer. The footer's set (700, tight -0.04em tracking,
   narrow width axis, mixed case) is the logo; the nav used to set it as an
   uppercase label with a green dot, which read as a different mark. Size is the
   only thing each placement sets. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variation-settings: "wdth" 86;
  line-height: 1;
  text-transform: none;
}
/* The windmill mark (assets/brand, cut from assets/Logo) sits before the wordmark.
   Sized in em so nav and footer scale it with their own type. */
.brand-mark { display: block; flex: none; height: 1.5em; width: auto; }
.footer__mark { display: flex; align-items: center; gap: 0.3em; color: var(--brand); }
.footer__mark .brand-mark { height: 1.3em; }
.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.9rem;
  color: var(--brand);
  text-decoration: none;
}
/* A phone has the CTA and the menu button on the same row — the full-size lockup
   would push them off it. */
@media (max-width: 520px) { .nav__mark { font-size: 1.55rem; gap: 0.35rem; } }

.nav__links {
  display: flex;
  justify-content: flex-end;
  gap: clamp(1rem, 2.2vw, 2rem);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav__links a {
  text-decoration: none;
  white-space: nowrap;   /* "WhatsApp asistents" breaking in two doubles the bar */
  color: var(--ink-soft);
  transition: color 90ms linear;
}
.nav__links a:hover { color: var(--accent); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  /* The CTA sits in an `auto` grid track, which grid is free to shrink below
     max-content once the bar is tight — the label then broke onto two lines and
     the whole bar grew to 92px. It never wraps. */
  white-space: nowrap;
  transition: background 90ms linear, color 90ms linear;
}
.nav__mark { white-space: nowrap; }
.nav__cta:hover { background: var(--accent); color: var(--ground); }
/* Without this the arrow renders at intrinsic SVG size and inflates the whole
   nav to ~146px tall on mobile. */
.nav__cta svg { width: 1em; height: 1em; flex: none; }

/* ------------------------------- hero ------------------------------- */
/* The falloff has to reach past the copy, not past the gutter. Insetting the
   headline by up to 190px pushed the lede's right end from ~55% of the width to
   ~65% — past the old 62% stop, where the veil was down to 22% and the worst pixel
   under --ink-soft measured 3.91:1. The stops now hold up to 68% and only release
   over the last third, which is where the windmill stands. */
/* The veil is DERIVED from where the copy ends, not set at a fixed percentage.

   A fixed ramp cannot serve both ends of the range: the copy ends at 64% of the
   width at 1024 and at 34% at 2560, while the windmill's axis sits at ~72% at
   every size (measured). A ramp strong enough for 1024 washes two thirds of the
   drawing out at 2560 — which is what "the hero is so pale" was.

   `--hero-copy-right` is the same expression the column's own cap uses, so the
   scrim holds full strength to exactly the end of the text and is gone within
   half a column after it. At 2560 that clears the right 62% of the frame
   completely; at 1024, where the copy runs closest to the machine, the windmill
   axis still only carries ~14%. Gradient stops take px, so this needs no JS. */
.hero {
  --hero-shift: 0px;
  --hero-copy-right: calc(
    var(--hero-shift) + min(46rem, var(--windmill-axis, 72%) - 3rem - var(--hero-shift)));
}
@media (min-width: 901px) {
  .hero { --hero-shift: clamp(0px, 8vw, 190px); }
}

/* The veil is a soft RECTANGLE around the copy, not a wash over the left half.
   A full-height horizontal gradient dimmed the whole left side of the frame — sky,
   clouds, field, all of it — to protect four lines of text sitting in the middle
   of it. The horizontal ramp still ends at --hero-copy-right; the mask now also
   ends it above and below the text, so everything outside the block is untouched
   artwork. That let the peak drop from 94% ground to 58%.
   90deg, not 94: a 4-degree tilt walks the stops sideways down the frame, which is
   the same asymmetry that made the cart train look oddly faded. */
.hero__scrim {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ground) 66%, transparent) 0%,
    color-mix(in srgb, var(--ground) 64%, transparent) calc(var(--hero-copy-right) - 3rem),
    color-mix(in srgb, var(--ground) 16%, transparent) calc(var(--hero-copy-right) + 3rem),
    transparent calc(var(--hero-copy-right) + 6rem));
  -webkit-mask-image: linear-gradient(to bottom,
    transparent calc(var(--hero-copy-top, 30%) - 7rem),
    #000 calc(var(--hero-copy-top, 30%) - 0.5rem),
    #000 calc(var(--hero-copy-bottom, 70%) + 0.5rem),
    transparent calc(var(--hero-copy-bottom, 70%) + 7rem));
  mask-image: linear-gradient(to bottom,
    transparent calc(var(--hero-copy-top, 30%) - 7rem),
    #000 calc(var(--hero-copy-top, 30%) - 0.5rem),
    #000 calc(var(--hero-copy-bottom, 70%) + 0.5rem),
    transparent calc(var(--hero-copy-bottom, 70%) + 7rem));
}

/* The copy is inset from the left edge rather than sitting on the gutter — hard
   against the edge it reads as an accident, not as a decision. The shift comes
   OUT of the cap (same construction as .wheel__panel), so moving the column right
   can never push it under the windmill; the geometric limit still wins. */
/* --hero-shift lives on .hero (above), so the scrim can derive its falloff from
   the same number the column is laid out with. */
.hero__copy {
  position: relative;
  z-index: 2;
  padding-inline: var(--gutter);
  margin-left: var(--hero-shift);
  max-width: min(46rem, var(--windmill-axis, 72%) - 3rem - var(--hero-shift));
  pointer-events: none;
}
.hero__copy a { pointer-events: auto; }

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* The deeper green, not --accent. This label is the one element on the page that
     fails against a MID-tone background rather than a dark one: it is small, it is
     the lightest ink used at that size, and it sits over the cloud linework at the
     top of the frame. Measured at the same veil: --accent 3.9:1, --accent-deep
     5.9:1. Letting it stay --accent would have meant a veil of ~84% ground over
     the copy — nearly the full-strength wash that was just removed. Same trade the
     reasons kickers already make over their fields. */
  color: var(--accent-deep);
}
.hero__kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 8rem;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.9vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-variation-settings: "wdth" 92;
  text-transform: none;
}

/* Signature: content wipes in behind a hard edge rather than fading. */
.js .reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 460ms var(--ease), opacity 1ms linear;
  opacity: 1;
}
.js .reveal.is-in { clip-path: inset(0 0 0 0); }

/* Full-strength ink, not --ink-soft. The lede sits on an undimmed dot field, and
   --ink-soft is the lightest text token on the site — it measured 3.91:1 there.
   The wheel chapter and the reasons column already resolve this the same way: over
   artwork, the text gives up the soft ink rather than the artwork giving up its
   density. Size and weight still carry the step down from the headline. */
.hero__lede {
  margin: 1.6rem 0 0;
  max-width: 36rem;
  font-size: clamp(1.06rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
}

/* Both hero buttons are the SAME size. Left to their labels the WhatsApp one came
   out ~90px wider, which read as two different kinds of control rather than a
   choice between two.
   A fixed 21rem track is the whole mechanism: both buttons get exactly that width,
   and `auto-fit` puts them side by side when there is room for two and stacks them
   when there is not — still identical to each other either way.
   Sizing is measured, not guessed. The longer label is 327.6px at its natural
   width, so 21rem (336px) holds it on one line; the pair needs 684px and the PROSE
   column is only 608px at every desktop width, which is why `flex: 1 1 0` and a
   `max-content` grid both ended up wrapping both labels onto two lines. The row is
   therefore capped against the WINDMILL, not against the prose: it may run ~60px
   past the text and still stop ~130px short of the sail hub. */
.hero__actions {
  --actions-room: 100%;
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, min(21rem, 100%));
  justify-content: start;
  /* Deliberately NOT capped at 100%: the parent is the prose column (608px at
     every desktop width) and the pair needs 684. The row is allowed to run past
     the text — it is bounded by --actions-room, i.e. by the windmill, which is
     what the copy is really avoiding. Below 901 --actions-room IS 100%. */
  width: min(var(--actions-room), 42.75rem);
  gap: 0.75rem;
}
/* Room for the row: from the copy's own left edge (the shift plus the gutter) out
   to the sail hub, less the same 3rem of air the prose keeps. Below 901 the copy
   sits over the artwork at the foot of the screen, the axis is not a constraint
   there, and --actions-room stays 100%.
   This override must come AFTER the rule above, not up with the other
   `min-width: 901px` block — same specificity, and the later one wins (gotcha 27).
   Written into that block first, it lost silently and the pair stayed stacked. */
@media (min-width: 901px) {
  .hero__actions {
    /* Fallback in vw, NOT the 72% used elsewhere: --windmill-axis is a viewport
       coordinate, and a percentage here resolves against the prose column — 72% of
       608px collapsed the row to 136px and wrapped both labels onto three lines.
       72vw lands within ~8px of the published axis at every width, so the layout
       does not move when JS publishes the real value. The 21rem floor is the last
       guard: one button's width, never less. */
    --actions-room: max(21rem, calc(var(--windmill-axis, 72vw) - 3rem - var(--hero-shift, 0px) - var(--gutter)));
  }
}
.hero__actions .btn { justify-content: center; text-align: center; }

/* ----------------------------- controls ----------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ground);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 90ms linear, color 90ms linear;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn svg { width: 1em; height: 1em; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

/* A green light that runs around the outline. The ghost button carries the whole
   WhatsApp invitation but has no fill, so next to a solid accent button it read as
   secondary decoration; this gives it motion instead of weight, which is the one
   thing a flat border can have without breaking the Blueprint idiom.
   The ring is a conic gradient masked down to the border itself (paint the box,
   punch out the content box, keep the 1px frame). `--ang` is registered from JS —
   where it cannot be, `from var(--ang)` is invalid, the gradient drops out and the
   button is simply a normal ghost button. Nothing to detect, nothing to break. */
.btn--trace { position: relative; }
.btn--trace::after {
  content: "";
  position: absolute;
  inset: -1px;            /* sit over the button's own border, not inside it */
  padding: 2px;           /* = ring thickness; 1px was there and unnoticeable */
  pointer-events: none;
  /* A NARROW sector, ~44deg. The button is 336x55, so angle maps to perimeter very
     unevenly — the two long edges take ~161deg each and the short ends ~19deg — and
     a wide sector smears into a soft glow along a whole edge instead of reading as
     a light that travels. */
  background: conic-gradient(from var(--ang),
    transparent 0deg,
    transparent 316deg,
    color-mix(in srgb, var(--accent) 20%, transparent) 334deg,
    var(--accent) 352deg,
    color-mix(in srgb, var(--accent) 55%, transparent) 357deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.has-angle .btn--trace::after { animation: trace 3.6s linear infinite; }
@keyframes trace { to { --ang: 360deg; } }
/* Not "instant" under reduced motion — an animation forced to 0.01ms would park
   the arc on one side forever. It is removed. */
@media (prefers-reduced-motion: reduce) { .btn--trace::after { display: none; } }

/* ------------------------------ wheel ------------------------------ */
.wheel__scrim {
  background: linear-gradient(94deg,
    color-mix(in srgb, var(--ground) 95%, transparent) 0%,
    color-mix(in srgb, var(--ground) 80%, transparent) 36%,
    color-mix(in srgb, var(--ground) 24%, transparent) 62%,
    transparent 80%);
}

/* Cap against the wheel's left edge, not the shaft axis — the gear is ~600px
   wide, so the axis alone would let the column run under it. Set from JS. */
.wheel__panel {
  --panel-shift: 0px;
  padding-inline: var(--gutter);
  margin-left: var(--panel-shift);
  /* the shift comes out of the cap so the panel can never reach the wheel */
  max-width: min(52rem, var(--wheel-left, 62%) - 3rem - var(--panel-shift));
  --focus: 1;
}

/* The column's RIGHT edge is pinned by geometry (shift + width always resolves to
   --wheel-left - 3rem), so the empty band beside the copy was never the column —
   it was the inner caps: a 36rem lede inside a ~46rem column. Let the text use the
   column it already has. Still capped, at a measure that stays readable. */
.wheel__panel :is(.sec__lede, .sys__lede) { max-width: min(46rem, 100%); }
.wheel__panel .sys__list { max-width: 100%; }

/* Scroll focus — desktop only; stacked mobile panels gain nothing from it.
   Peaks at the middle of the viewport with a slight overshoot past laid-out
   size (1.06 from the left origin still clears the wheel's edge), recedes
   either side. The off-centre floor stays readable — it is a hand-off cue,
   not a hiding place. */
@media (min-width: 901px) {
  .wheel__panel {
    --panel-shift: clamp(0px, 9vw, 170px);  /* breathe off the left edge */
    transform: scale(calc(0.80 + 0.26 * var(--focus)));
    transform-origin: 0% 50%;
    opacity: calc(0.52 + 0.48 * var(--focus));
    will-change: transform, opacity;
  }
}

.sec__kicker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.sec__kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 6rem; }

.sec__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.042em;
  font-variation-settings: "wdth" 90;
}
.sec__lede {
  margin: 1.7rem 0 0;
  max-width: 36rem;
  font-size: clamp(1.12rem, 1.55vw, 1.35rem);
  line-height: 1.58;
  color: var(--ink-soft);
}

/* --------------------------- system entry --------------------------- */
/* A spec sheet, not a card: hairline rules and a measured two-column grid. */
.sys { position: relative; padding-top: 1.5rem; }
.sys::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 620ms var(--ease) 80ms;
}
.js .sys.is-in::before,
html:not(.js) .sys::before { transform: scaleX(1); }

/* GRID, not wrapping flex. As a flex row with flex-wrap, the number sat beside a
   short title ("Klientu piesaiste") and jumped ABOVE a long one ("CRM un klientu
   apkalpošana") — the wrap point depends on the title's length, so each entry was
   formatted differently and it read as sloppiness. A two-column grid puts the
   number in its own column at every length; the title simply wraps inside column
   two. `align-items: baseline` keeps the chip on the title's first baseline. */
.sys__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
}
.sys__index {
  justify-self: start;
  margin: 0;   /* it is a <p>: the default 1em block margin skewed the head */
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ground);
  background: var(--accent);
  padding: 0.32rem 0.5rem;
}
.sys__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 84;
  /* Latvian sets long single words ("AUTOMATIZĒJAM") and this is uppercase display
     type — in the narrower right-hand column one word can be wider than the line.
     A last-resort break is better than ink leaving the column. */
  overflow-wrap: break-word;
}

.sys__lede {
  margin: 1.2rem 0 0;
  max-width: 36rem;
  font-size: clamp(1.1rem, 1.45vw, 1.28rem);
  line-height: 1.56;
  color: var(--ink-soft);
}

.sys__list {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  max-width: 42rem;
}
.sys__list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.85rem 1.1rem 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.12rem;
  line-height: 1.45;
}
.sys__list li svg { width: 0.9rem; height: 0.9rem; flex: none; margin-top: 0.3rem; color: var(--accent-soft); }

.sys__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 90ms linear, color 90ms linear;
}
.sys__more svg { width: 0.9em; height: 0.9em; }
.sys__more:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------- responsive ---------------------------- */
@media (max-width: 900px) {
  .wheel__panel, .hero__copy { max-width: 100%; margin-left: 0; }
  .wheel__panel { justify-content: flex-start; padding-top: 15vh; }

  /* The copy drops to the foot of the screen so the windmill is actually SEEN.
     Centred, it sat straight across the sails and the one drawing the hero is
     built around was the part you could not read past. At the bottom it stands on
     the grass, which is where a caption belongs anyway. */
  .hero { align-items: flex-end; }
  .hero__copy { padding-bottom: clamp(2.5rem, 9vh, 6rem); }
  /* Scrim flips with the copy: clear at the top so the machine reads, weighted at
     the foot so the text does — and the ramp sits exactly where the copy starts,
     from --hero-copy-top (published by dither-field.js). A fixed percentage cannot
     work here: the copy is bottom-aligned, so it begins at 13% of the screen on a
     360x640 phone and at 65% on an 820x1180 tablet. This keeps every pixel above
     the text at full strength, which is the most windmill any given screen can
     show. */
  .hero__scrim {
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--ground) 6%, transparent)
        max(0px, calc(var(--hero-copy-top, 40%) - 7rem)),
      color-mix(in srgb, var(--ground) 92%, transparent)
        max(0px, calc(var(--hero-copy-top, 40%) - 0.5rem)),
      color-mix(in srgb, var(--ground) 96%, transparent)
        calc(var(--hero-copy-top, 40%) + 4rem),
      color-mix(in srgb, var(--ground) 96%, transparent) 100%);
    /* No mask here: this gradient is already keyed to the copy and runs to the
       foot of the screen, which is where the copy ends. */
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* On a phone or tablet there is no room beside the wheel, so the copy sits ON
     it and the field becomes wallpaper: washed back far enough that it never
     competes with the text, even and untinted so it reads as one texture rather
     than a picture someone put a gradient over. Dimming the CANVAS rather than
     piling on more scrim is what keeps it even — a gradient veil strong enough
     to protect the text at the top would have erased the gear at the bottom.
     Contrast over the palest and densest parts is measured, not assumed. */
  /* Narrow screens are the ONE place the artwork is still dimmed, because there is
     no clear column — the copy sits directly on the drawing with nowhere else to
     go. Everywhere else the fields paint at full strength. */
  :root { --field-opacity: 0.3; }
  /* ...but not the hero, even here. Its copy has moved to the foot of the screen,
     so the windmill is no longer competing with anything above it and is drawn
     full strength; the heavy bottom of the scrim carries the text. */
  .hero { --field-opacity: 1; }
  .wheel__scrim {
    background: color-mix(in srgb, var(--ground) 34%, transparent);
  }

  /* Chapter layout for narrow screens lives with the chapter rules further down —
     it has to come AFTER them in source order to win, since the selectors match at
     equal specificity. */
  /* The lede gives up the soft ink here. --ink-soft is the page's lightest text
     token, and over the field it measured 4.66:1 — barely over the floor, and the
     exact "text blends into the background" complaint this site already had once.
     Full-strength ink on the same worst-case pixel measures 9.2:1. Dimming the
     artwork far enough to save --ink-soft would have meant a dot weight of ~0.08
     (measured), which is invisible; the text changes instead of the picture. */
  .wheel__panel .sys__lede { color: var(--ink); }
}

@media (max-width: 700px) {
  .sys__list { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero__kicker::after { display: none; }
  /* One column, full width — the paired track above is a desktop shape. */
  .hero__actions { grid-template-columns: 1fr; width: 100%; }
  .btn { justify-content: center; }
  /* the transparent ghost sits on a dense dot band here — back its label */
  .btn--ghost { background: color-mix(in srgb, var(--ground) 78%, transparent); }
}

/* ════════════════ SITE SECTIONS (03–13, subpages, footer) ════════════════
   Same world: hairline grid, uppercase micro-labels, green as line and fill.
   Namespaced .s-* to keep clear of the wheel section's .sec__* sizing. */

.s-sec { position: relative; border-top: 1px solid var(--rule); padding: clamp(4rem, 10vh, 7.5rem) var(--gutter); }
.s-inner { max-width: 72rem; margin-inline: auto; }

.s-kicker {
  display: flex; align-items: center; gap: 0.8rem;
  margin: 0 0 1.2rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.s-kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 6rem; }

.s-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  line-height: 1.03; letter-spacing: -0.035em;
  font-variation-settings: "wdth" 90;
  max-width: 46rem;
}
.s-lede { margin: 1.3rem 0 0; max-width: 40rem; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); }

/* ---- 03 marquee ---- */
.marquee { border-block: 1px solid var(--rule); padding-block: 0.95rem; overflow: clip; background: color-mix(in srgb, var(--ground-deep) 46%, transparent); }
.marquee__track { display: flex; gap: 2.8rem; width: max-content; animation: marquee 36s linear infinite; }
.marquee__track span { white-space: nowrap; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 2.8rem; }
.marquee__track span::after { content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---- 05 WhatsApp demo ---- */
/* The right column is the phone, so it is sized by the phone (20rem), not by a
   share of the grid — a fractional column would let the aspect-ratio box drive
   its own container width and fight the layout. */
.wa { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* --- the "try it now" panel: the only thing this section asks anyone to do --- */
.try {
  margin-top: 2.2rem;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--ground-deep) 55%, transparent);
  max-width: 38rem;
}
.try__steps {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--rule-strong);
}
.try__steps li {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.8rem 0.9rem;
  border-right: 1px solid var(--rule);
  font-size: 0.88rem; line-height: 1.3;
}
.try__steps li:last-child { border-right: 0; }
.try__steps b { color: var(--accent); font-weight: 700; letter-spacing: 0.08em; }
.try__on-mob { display: none; }

.try__act { display: flex; gap: 1.4rem; padding: 1.3rem 1.4rem; align-items: center; }
.try__qr { flex: none; width: 9.5rem; height: 9.5rem; border: 1px solid var(--rule-strong); background: var(--ground); padding: 0.35rem; }
.try__qr svg { display: block; width: 100%; height: 100%; }
.try__side { min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }

.btn--big { font-size: 0.98rem; padding: 0.9rem 1.4rem; }

.try__num { margin: 0; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-size: 1.12rem; font-weight: 700; letter-spacing: 0.03em; }
.try__copy {
  font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 1px solid var(--accent); color: var(--accent);
  padding: 0 0 1px; cursor: pointer;
}
.try__copy:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.try__note { margin: 0; font-size: 0.98rem; line-height: 1.45; color: var(--ink-soft); }

.wa__points { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); max-width: 38rem; }
.wa__points li { padding: 0.95rem 1rem 0.95rem 0; border-bottom: 1px solid var(--rule); }
.wa__points b { display: flex; gap: 0.5rem; align-items: center; font-size: 0.88rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.wa__points b svg { width: 0.95rem; height: 0.95rem; flex: none; }
.wa__points p { margin: 0.4rem 0 0; font-size: 1.06rem; color: var(--ink-soft); }
.wa__fit { margin-top: 1.6rem; font-size: 1.06rem; color: var(--ink-soft); max-width: 38rem; }

/* --- the phone --- */
.phone { position: sticky; top: 5.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
/* Phone-proportioned, not a device mockup: the flat border and green header stay,
   only the shape changes. aspect-ratio owns the height, so the stream must flex
   inside it rather than carry its own min/max height. */
.chat {
  /* 20rem wide at 9:18.5 is 41.1rem tall, so the cap has to clear that or it
     silently overrides the ratio and the phone renders squarer than declared. */
  width: 100%; aspect-ratio: 9 / 18.5; max-height: 42rem;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--ground) 68%, #fff 10%);
  box-shadow: 0 18px 40px -22px rgba(31,28,23,0.4);
}
.chat__head { flex: none; display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule); background: var(--accent); color: var(--ground); }
.chat__avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--ground); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 0.88rem; flex: none; }
.chat__who { line-height: 1.15; min-width: 0; }
.chat__who b { display: block; font-size: 0.98rem; }
.chat__who span { font-size: 0.8rem; opacity: 0.75; display: flex; align-items: center; gap: 0.35rem; }
.chat__who span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7fce8f; }
.chat__tag { margin-left: auto; flex: none; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--ground) 50%, transparent); padding: 0.15rem 0.4rem; }
.chat__stream { flex: 1; min-height: 0; padding: 1rem; display: flex; flex-direction: column; gap: 0.55rem; overflow-y: auto; scrollbar-width: thin; }
.chat__msg { max-width: 85%; padding: 0.6rem 0.85rem; font-size: 1.06rem; line-height: 1.45; }
.chat__msg--client { align-self: flex-end; background: var(--accent); color: var(--ground); border-radius: 10px 10px 2px 10px; }
.chat__msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--rule); border-radius: 10px 10px 10px 2px; }
.chat__typing { display: flex; gap: 4px; padding: 0.75rem 0.9rem; }
.chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: tdot 1s infinite; }
.chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.chat__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tdot { 0%,60%,100% { opacity: 0.25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.chat__replay {
  font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--rule-strong); color: var(--ink-soft);
  padding: 0.5rem 0.9rem; cursor: pointer;
  transition: color 120ms linear, border-color 120ms linear;
}
.chat__replay svg { width: 0.9rem; height: 0.9rem; }
.chat__replay:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 900px) {
  .wa { grid-template-columns: 1fr; }
  .phone { position: static; width: min(20rem, 100%); margin-inline: auto; }
}
@media (max-width: 700px) {
  .try__steps { grid-template-columns: 1fr; }
  .try__steps li { border-right: 0; border-bottom: 1px solid var(--rule); padding: 0.6rem 0.9rem; }
  .try__steps li:last-child { border-bottom: 0; }
  /* Nobody scans a QR on the device the QR would open. */
  .try__qr { display: none; }
  .try__on-desk { display: none; }
  .try__on-mob { display: inline; }
  .try__act { padding: 1.1rem 1rem; }
  .try__side { width: 100%; }
  .try__side .btn--big { width: 100%; justify-content: center; }
}

/* ===================== "Kāpēc mēs" — clean ground (2026-10-05) =====================
   The grain and mill fields are gone at the user's request, and with them every
   constraint this section used to be designed around (clear columns, ink edges,
   veils). It is now a typographic section: the three figures as a large display
   band, the four reasons as a hairline-ruled 2x2 ledger, the CTA closing it.
   No decoration on the cards: no dot texture, no corner rules (removed at the
   user's request 2026-10-05). */
.reasons__head { max-width: 50rem; }

.reasons__figs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(2.6rem, 6vh, 4.2rem) 0 0;
  border-block: 1px solid var(--rule-strong);
}
.reasons__fig {
  position: relative;
  z-index: 1;
  padding: clamp(1.6rem, 4vh, 2.6rem) clamp(1rem, 2.6vw, 2.4rem);
  border-left: 1px solid var(--rule);
}
.reasons__fig:first-child { border-left: 0; padding-left: 0; }
.reasons__fig b {
  display: block;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7.4vw, 6.8rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--accent);
  font-variation-settings: "wdth" 84;
}
.reasons__fig b > span { display: block; transition: transform 720ms var(--ease); }
.js .reasons__figs.reveal:not(.is-in) b > span { transform: translateY(105%); }
.reasons__fig:nth-child(2) b > span { transition-delay: 110ms; }
.reasons__fig:nth-child(3) b > span { transition-delay: 220ms; }
.reasons__fig i {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.reasons__fig p { margin: 0.35rem 0 0; font-size: 1.06rem; color: var(--ink-soft); }

.reasons__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.6rem, 6vh, 4.2rem);
  background: var(--rule);
  border: 1px solid var(--rule);
}
.reasons__item {
  position: relative;
  background: var(--ground);
  padding: clamp(1.7rem, 3.2vw, 2.8rem);
  transition: background 260ms var(--ease);
}
.reasons__item:hover { background: color-mix(in srgb, var(--ground-deep) 42%, var(--ground)); }
.reasons__n {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variation-settings: "wdth" 86;
}
.reasons__item h3 {
  margin: 0;
  max-width: 26ch;
  font-size: 1.2rem;
  line-height: 1.22;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 86;
}
.reasons__item h3 + p { margin: 0.85rem 0 0; max-width: 34rem; font-size: 1.06rem; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 900px) {
  .reasons__figs { grid-template-columns: 1fr; }
  .reasons__fig { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .reasons__fig:first-child { border-top: 0; }
  .reasons__grid { grid-template-columns: 1fr; }
}

/* ===================== process — vertical, roomy (2026-10-05) =====================
   The horizontal track is gone: four columns of ~300px held four paragraphs each and
   read as cramped. One layout at every width now. On desktop the heading column
   (title, live stage counter, total) stays put while four tall steps scroll beside
   it, and the rail fills as you go — a pure function of scroll position, no easing
   (easing on scroll-linked motion reads as lag, gotcha 18). */
.proc__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: start;
}
/* The aside must STRETCH to the row: with the grid's align-items:start it was only
   as tall as its own content, so the sticky child had no room to travel and simply
   scrolled away. Sticky also needs no overflow:hidden on any ancestor (gotcha 1). */
.proc__aside { align-self: stretch; }
.proc__stick { position: sticky; top: clamp(5.5rem, 14vh, 9rem); }
.proc .s-title { max-width: 16ch; }
.proc__count {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: clamp(2rem, 6vh, 3.5rem) 0 0;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 84;
}
.proc__count b {
  display: block;
  min-width: 2ch;
  font-size: clamp(4.2rem, 8vw, 7.4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--accent);
}
.proc__count b.is-tick { animation: procTick 420ms var(--ease); }
@keyframes procTick { from { opacity: 0; transform: translateY(0.18em); } }
.proc__count span { font-size: 1.12rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-soft); }

.tl__total {
  margin: clamp(1.6rem, 4vh, 2.4rem) 0 0;
  padding-top: 1rem;
  max-width: 24rem;
  border-top: 1px solid var(--rule-strong);
  font-size: 0.88rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tl__total b { color: var(--accent); font-weight: 700; }

.tl-wrap { position: relative; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1.4rem, 3vw, 2.6rem);
  padding-block: clamp(2.4rem, 7vh, 4.2rem);
}
.tl__step:first-child { padding-top: 0.2rem; }
.tl__step:last-child { padding-bottom: 0; }
/* A hairline between steps, starting at the text column so it never crosses the rail. */
.tl__step + .tl__step::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  left: calc(1rem + clamp(1.4rem, 3vw, 2.6rem));
  height: 1px;
  background: var(--rule);
}

/* Square, not round — the Blueprint idiom has no rounded corners anywhere.
   display:block — it is a span, and width/height are inert without it (gotcha 63). */
.tl__node {
  grid-column: 1;
  position: relative;
  z-index: 1;
  display: block;
  width: 1rem; height: 1rem;
  margin-top: 0.5rem;
  border: 2px solid var(--rule-strong);
  background: var(--ground);
  transition: background 260ms var(--ease), border-color 260ms var(--ease);
}
.tl__node.is-on { background: var(--accent); border-color: var(--accent); }
.tl__body { grid-column: 2; min-width: 0; }
.tl__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
}
.tl__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.tl__dur {
  margin: 0;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule-strong);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color 260ms var(--ease), background 260ms var(--ease), color 260ms var(--ease);
}
.tl__step.is-on .tl__dur { border-color: var(--accent); background: var(--accent); color: var(--ground); }
.tl__t {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" 88;
}
.tl__p { margin: 0.9rem 0 0; max-width: 36rem; font-size: 1.06rem; line-height: 1.62; color: var(--ink-soft); }

/* The rail runs node 01 to node 04; JS writes its left/top/bottom from the real
   node boxes. The declared values are the no-JS fallback. */
.tl__rail {
  position: absolute;
  left: calc(0.5rem - 1px);
  top: 0.7rem;
  bottom: 0;
  width: 2px;
  background: var(--rule-strong);
}
.tl__rail > i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
}
/* Without JS, or under reduced motion, the controller never runs: draw the
   finished state rather than an unfinished graphic. */
html:not(.js) .tl__rail > i { transform: none; }
html:not(.js) .tl__node { background: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .tl__rail > i { transform: none !important; }
  .tl__node { background: var(--accent); border-color: var(--accent); }
}

@media (max-width: 900px) {
  .proc__grid { grid-template-columns: 1fr; }
  .proc__stick { position: static; }
  .proc__count { display: none; }
  .tl__total { max-width: none; margin-bottom: clamp(2.4rem, 6vh, 3.4rem); }
  .tl__step { column-gap: 1.1rem; }
  .tl__step + .tl__step::before { left: calc(1rem + 1.1rem); }
  .tl__top { flex-wrap: wrap; gap: 0.6rem; }
}

/* ===================== Mājaslapas — the dark offer band (2026-10-05) =====================
   The only inverted band on the page, so it reads as a distinct offer instead of a
   footnote — but compact: copy on the left, price + the two services on the right.
   The decorative browser frame was removed at the user's request. */
.webx {
  --wx-ink: var(--ground);
  --wx-soft: color-mix(in srgb, var(--ground) 80%, var(--accent-deep));
  --wx-rule: rgba(237, 227, 206, 0.2);
  --wx-rule-strong: rgba(237, 227, 206, 0.42);
  --wx-hi: #A9C9AF;
  background: var(--accent-deep);
  color: var(--wx-ink);
  border-top: 0;
  padding-block: clamp(3rem, 8vh, 5.5rem);
}
.webx .s-kicker { color: var(--wx-hi); }
.webx .s-kicker::after { background: var(--wx-rule-strong); }
.webx .s-title { color: var(--wx-ink); max-width: 18ch; }
.webx .s-lede { color: var(--wx-soft); }
.webx__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: clamp(2.4rem, 5vh, 3.4rem);
  align-items: end;
}
.webx__price {
  display: flex;
  align-items: flex-end;
  gap: 1.1rem;
  margin: 0;
  padding: 1.2rem 0 1.4rem;
}
.webx__price b {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 5.6vw, 4.8rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--wx-ink);
  font-variation-settings: "wdth" 84;
}
.webx__price span {
  padding-bottom: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wx-soft);
}
.webx__price .webx__from { align-self: flex-start; color: var(--wx-hi); }

.btn--light { background: var(--ground); border-color: var(--ground); color: var(--accent-deep); }
.btn--light:hover { background: #F7F0E1; border-color: #F7F0E1; color: var(--accent-deep); }
.btn--light:focus-visible { outline: 2px solid var(--wx-hi, var(--ground)); outline-offset: 3px; }

/* The offer: price on top, the two services as hairline-separated rows under it. */
.webx__offer { border-top: 1px solid var(--wx-rule-strong); }
.webx__list { margin: 0; padding: 0; list-style: none; }
.webx__list li { padding: 1.1rem 0; border-top: 1px solid var(--wx-rule); }
.webx__list h3 { margin: 0; font-size: 1.12rem; text-transform: uppercase; letter-spacing: 0.03em; font-variation-settings: "wdth" 86; color: var(--wx-ink); }
.webx__list p { margin: 0.4rem 0 0; font-size: 1.06rem; line-height: 1.55; color: var(--wx-soft); }

@media (max-width: 900px) {
  .webx__grid { grid-template-columns: 1fr; }
}

/* ---------------------- the wallpaper fallback ----------------------
   Width is not the only way to run out of room. The wheel scales to the HEIGHT, so
   a short wide window grows it sideways until the clear column is narrower than a
   phone's — and no media query can see that, because the trigger is the drawn
   geometry. dither-field.js measures the column and sets `.is-wallpaper`: field
   dimmed to a texture, copy full width over it. Must sit after the desktop rules. */
.wheel.is-wallpaper .wheel__panel {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}
.is-wallpaper { --field-opacity: 0.3; }
.wheel.is-wallpaper .wheel__scrim { background: color-mix(in srgb, var(--ground) 34%, transparent); }
/* Over a dimmed field --ink-soft measures 4.66:1; full ink instead. */
.wheel.is-wallpaper .sys__lede { color: var(--ink); }

/* ---- 06 kāpēc mēs ---- */
.nums { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-block: 1px solid var(--rule); margin: 2.4rem 0; }
.nums > div { padding: 1.5rem 1.2rem; border-right: 1px solid var(--rule); }
.nums > div:last-child { border-right: 0; }
.nums b { display: block; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -0.03em; color: var(--accent); font-variation-settings: "wdth" 88; }
.nums i { display: block; font-style: normal; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.3rem; }
.nums p { margin: 0.45rem 0 0; font-size: 1.06rem; color: var(--ink-soft); }
.why { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.why > article { background: var(--ground); padding: 1.7rem; }
.why h3 { margin: 0; font-size: 1.12rem; letter-spacing: 0.02em; text-transform: uppercase; font-variation-settings: "wdth" 86; }
.why h3::before { content: ""; display: block; width: 2rem; height: 2px; background: var(--accent); margin-bottom: 0.85rem; }
.why p { margin: 0.8rem 0 0; font-size: 1.06rem; line-height: 1.58; color: var(--ink-soft); }

/* ---- 07 process ---- */
.steps { counter-reset: step; margin: 2.6rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1.2rem, 2.5vw, 2.4rem); }
.steps li { border-top: 2px solid var(--accent); padding-top: 1.1rem; position: relative; }
.steps b { display: block; font-size: 0.8rem; letter-spacing: 0.16em; color: var(--accent); }
.steps h3 { margin: 0.5rem 0 0; font-size: 1.12rem; text-transform: uppercase; letter-spacing: 0.02em; font-variation-settings: "wdth" 86; }
.steps p { margin: 0.7rem 0 0; font-size: 1.06rem; line-height: 1.55; color: var(--ink-soft); }

/* ---- 08 risinājumi ---- */
.sol { margin-top: 2.4rem; border-top: 1px solid var(--rule-strong); }
.sol details { border-bottom: 1px solid var(--rule-strong); }
.sol summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.4rem 0.2rem; }
.sol summary::-webkit-details-marker { display: none; }
.sol summary h3 { margin: 0; flex: 1; font-size: clamp(1.15rem, 2.2vw, 1.6rem); text-transform: uppercase; letter-spacing: 0.01em; font-variation-settings: "wdth" 86; }
.sol summary .sol__mark { flex: none; width: 2.1rem; height: 2.1rem; border: 1px solid var(--rule-strong); display: grid; place-items: center; transition: background 120ms linear, color 120ms linear; }
.sol summary .sol__mark svg { width: 0.9rem; height: 0.9rem; transition: transform 200ms var(--ease); }
.sol details[open] .sol__mark { background: var(--accent); color: var(--ground); border-color: var(--accent); }
.sol details[open] .sol__mark svg { transform: rotate(45deg); }
.sol__body { padding: 0 0.2rem 1.8rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.2rem, 3vw, 3rem); }
.sol__body h4 { margin: 0 0 0.4rem; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.sol__body p { margin: 0 0 1.1rem; font-size: 1.06rem; line-height: 1.58; color: var(--ink-soft); }
.sol__body ul { margin: 0; padding: 0; list-style: none; }
.sol__body ul li { display: flex; gap: 0.6rem; padding: 0.45rem 0; font-size: 1.06rem; border-bottom: 1px solid var(--rule); }
.sol__body ul li::before { content: ""; flex: none; width: 0.85rem; height: 1px; background: var(--accent); margin-top: 0.7em; }
.s-after { margin-top: 2.2rem; }

/* ---- 09 mājaslapu bloks ---- */
.web { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.web__cards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.web__cards article { background: var(--ground); padding: 1.4rem 1.5rem; }
.web__cards h3 { margin: 0; font-size: 1.12rem; text-transform: uppercase; letter-spacing: 0.03em; font-variation-settings: "wdth" 86; }
.web__cards p { margin: 0.55rem 0 0; font-size: 1.06rem; color: var(--ink-soft); }

/* ---- 10 cenas ---- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; margin-top: 2.6rem; align-items: stretch; }
.plan { border: 1px solid var(--rule-strong); padding: 1.7rem 1.6rem; display: flex; flex-direction: column; position: relative; }
.plan--star { border-color: var(--accent); border-width: 2px; }
.plan__flag { position: absolute; top: -1px; right: -1px; background: var(--accent); color: var(--ground); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.4rem 0.7rem; }
.plan h3 { margin: 0; font-size: 0.98rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.plan__price { margin: 0.9rem 0 0.2rem; font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; font-variation-settings: "wdth" 88; }
.plan__sub { margin: 0 0 1rem; font-size: 1.06rem; color: var(--ink-soft); }
.plan ul { margin: 0 0 1.4rem; padding: 0; list-style: none; flex: 1; }
.plan ul li { display: flex; gap: 0.55rem; padding: 0.42rem 0; font-size: 1.06rem; border-bottom: 1px solid var(--rule); }
.plan ul li svg { width: 0.85rem; height: 0.85rem; flex: none; margin-top: 0.25rem; color: var(--accent-soft); }
.plan__bonus { margin: -0.6rem 0 1.2rem; font-size: 0.98rem; color: var(--accent); }
.plans__note { margin-top: 1.8rem; padding: 1.1rem 1.3rem; border: 1px dashed var(--rule-strong); font-size: 1.06rem; color: var(--ink-soft); max-width: 52rem; }

/* ---- 11 BUJ ---- */
.faq { margin-top: 2.2rem; border-top: 1px solid var(--rule-strong); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 1.05rem 2.4rem 1.05rem 0.1rem; font-weight: 600; font-size: 1.12rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 1.3rem; font-weight: 400; transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq div { padding: 0 0.1rem 1.2rem; font-size: 1.06rem; line-height: 1.6; color: var(--ink-soft); max-width: 46rem; }

/* ---- 12 blogs ---- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; margin-top: 2.4rem; }
.post { border: 1px solid var(--rule-strong); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; text-decoration: none; color: inherit; transition: border-color 120ms linear; }
a.post:hover { border-color: var(--accent); }
.post--soon { opacity: 0.62; }
.post b.cat { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.post h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; }
.post p { margin: 0; font-size: 1.06rem; line-height: 1.55; color: var(--ink-soft); flex: 1; }
.post .meta { font-size: 0.88rem; color: var(--ink-soft); letter-spacing: 0.06em; }

/* ---- 13 kontakti ---- */
.contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: start; margin-top: 2.4rem; }
.form { display: grid; gap: 0.9rem; }
.form label { display: grid; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.form input, .form textarea { border: 1px solid var(--rule-strong); background: color-mix(in srgb, #fff 26%, transparent); padding: 0.8rem 0.9rem; font: inherit; font-size: 1.12rem; color: var(--ink); }
/* The focus ring is drawn INSIDE the field, and that is the whole point.

   The bug: the ring appeared above and below the field but never down its left and
   right sides. The fields are stretched grid items (`.form` is a grid, and each
   `label` is a grid too), so a field's box exactly fills its grid area — and
   anything painted OUTSIDE that box in the inline axis is clipped away. It is not
   an outline quirk: an `outline`, and then a spread `box-shadow`, were both cut at
   the same two edges. Measured on pixels — 3px of accent above the top edge, 1px
   (the border alone) beside the left edge. Narrowing the field to 90% brought both
   sides straight back, which is what identified it.

   An inset shadow is painted within the element's own box, so there is nothing to
   clip: the field's edge simply thickens to accent on all four sides. The
   transparent outline stays for forced-colors / high-contrast modes, where shadows
   are dropped and an outline is the only focus indicator left. */
.form input:focus, .form textarea:focus {
  outline: 2px solid transparent;
  outline-offset: -2px;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
/* Same trap, same fix: the submit button is a direct grid item of .form. */
.form .btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 2px var(--ground);
}
.form__gdpr input:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--accent);
}
.form textarea { min-height: 7.5rem; resize: vertical; }
.form .hp { position: absolute; left: -9999px; }
.form__gdpr { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.98rem; color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-weight: 400; }
.form__gdpr input { width: 1rem; height: 1rem; margin-top: 0.15rem; }
.form__status { margin: 0; font-size: 0.98rem; color: var(--accent); min-height: 1.2em; }
.form__proof { margin: 0.8rem 0 0; font-size: 0.98rem; color: var(--ink-soft); border-left: 2px solid var(--accent); padding-left: 0.9rem; }
.aside-cards { display: grid; gap: 1.1rem; }
.aside-card { border: 1px solid var(--rule-strong); padding: 1.5rem; }
.aside-card h3 { margin: 0 0 0.5rem; font-size: 0.98rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.aside-card p { margin: 0 0 1rem; font-size: 1.06rem; color: var(--ink-soft); }
.aside-card .row { display: flex; flex-direction: column; gap: 0.45rem; font-size: 1.06rem; }
.aside-card .row a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); width: fit-content; }
.aside-card .row a:hover { border-color: var(--accent); color: var(--accent); }

/* ---- closing band + footer ---- */
.close-cta { text-align: left; }
.close-cta .s-title { max-width: 40rem; }
.footer { border-top: 1px solid var(--rule-strong); padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) 2rem; }
.footer__grid { max-width: 72rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap: 2rem; }
.footer__mark { font-size: clamp(2rem, 5vw, 3.4rem); }
.footer__tag { margin: 0.6rem 0 0; color: var(--ink-soft); font-size: 1.06rem; }
.footer h4 { margin: 0 0 0.8rem; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; font-size: 1.06rem; }
.footer a { text-decoration: none; color: var(--ink-soft); }
.footer a:hover { color: var(--accent); }
.footer__base { max-width: 72rem; margin: 2.5rem auto 0; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: 0.88rem; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---- subpage hero ---- */
.page-hero { padding: clamp(7rem, 16vh, 10rem) var(--gutter) clamp(2.5rem, 6vh, 4rem); }
.page-hero .s-title { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.anchor-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.anchor-nav a { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ink); border: 1px solid var(--rule-strong); padding: 0.5rem 0.85rem; }
.anchor-nav a:hover { border-color: var(--accent); color: var(--accent); }
.block { scroll-margin-top: 6rem; }
.block__aim { font-size: 1.06rem; color: var(--accent); margin: 0.6rem 0 0; }
.timeline { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; max-width: 40rem; }
.timeline li { display: flex; gap: 0.9rem; font-size: 1.06rem; line-height: 1.5; }
.timeline b { flex: none; color: var(--accent); font-size: 0.88rem; letter-spacing: 0.1em; padding-top: 0.15em; }
.launch { margin-top: 1.3rem; font-size: 0.98rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.launch b { color: var(--accent); }

/* ===================== automatizacijas.html (rebuilt 2026-10-05) =====================
   Four identical blocks of headed paragraphs, held together by inline style
   overrides, became one consistent spec sheet per system: an identity row (big
   index, title, who it is for, launch time), the problem as a pull-quote, the
   flow as four connected steps, then what is included next to the call to act.
   Blocks alternate ground so the eye can tell where one system ends. */
.auto-hero .s-title { max-width: 18ch; }
.auto-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.4rem, 6vh, 3.6rem);
  background: var(--rule);
  border: 1px solid var(--rule);
}
.auto-index__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem 1.3rem 3.2rem;
  background: var(--ground);
  color: var(--ink);
  text-decoration: none;
  transition: background 220ms var(--ease);
}
.auto-index__card b {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variation-settings: "wdth" 86;
}
.auto-index__name { font-size: 1.12rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-variation-settings: "wdth" 86; }
.auto-index__aim { font-size: 0.98rem; line-height: 1.5; color: var(--ink-soft); }
.auto-index__card svg {
  position: absolute;
  left: 1.3rem; bottom: 1.2rem;
  width: 1rem; height: 1rem;
  color: var(--accent);
  transform: rotate(90deg);
  transition: transform 220ms var(--ease);
}
.auto-index__card:hover { background: color-mix(in srgb, var(--ground-deep) 45%, var(--ground)); }
.auto-index__card:hover svg { transform: rotate(90deg) translateX(3px); }

/* Sticky section switcher. Sits under the fixed bar; when the bar retreats on a
   downward scroll the switcher rises into its place (top is written from JS as
   the bar's live height — see reveal.js [data-subnav]). */
.auto-subnav {
  position: sticky;
  top: var(--subnav-top, 0px);
  z-index: 5;
  border-block: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: top 320ms var(--ease);
}
.auto-subnav__in {
  display: flex;
  gap: clamp(0.4rem, 2vw, 2rem);
  /* the measure PLUS its gutters, so the first link lines up with the content */
  max-width: calc(72rem + 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.auto-subnav__in::-webkit-scrollbar { display: none; }
.auto-subnav a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.95rem 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color 200ms var(--ease);
}
.auto-subnav a b { color: var(--accent); letter-spacing: 0.1em; }
.auto-subnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.auto-subnav a:hover,
.auto-subnav a.is-current { color: var(--ink); }
.auto-subnav a.is-current::after { transform: scaleX(1); }

.auto-block { scroll-margin-top: 7.5rem; }
.auto-block--alt { background: color-mix(in srgb, var(--ground-deep) 40%, var(--ground)); }
.auto-block__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: clamp(1.4rem, 3.5vw, 3rem);
  align-items: start;
  padding-bottom: clamp(1.6rem, 4vh, 2.4rem);
  border-bottom: 1px solid var(--rule-strong);
}
.auto-block__n {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-variation-settings: "wdth" 84;
}
.auto-block .s-title { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.auto-block__aim { margin: 0.8rem 0 0; max-width: 38rem; font-size: 1.12rem; line-height: 1.5; color: var(--ink-soft); }
.auto-block__launch {
  display: grid;
  gap: 0.25rem;
  margin: 0.3rem 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--accent);
  text-align: left;
  white-space: nowrap;
}
.auto-block__launch span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.auto-block__launch b { font-size: 1.2rem; letter-spacing: -0.01em; color: var(--accent); }

/* Section labels inside a block share one micro-label style. */
.auto-block h3 {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.auto-block__problem {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-left: clamp(1.1rem, 2.5vw, 1.8rem);
  border-left: 3px solid var(--accent);
}
.auto-block__problem p {
  margin: 0;
  max-width: 48rem;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* The flow: four steps on one connecting line. The line runs through the number
   squares, so the steps read as a sequence rather than as four cards. */
.auto-flow { margin-top: clamp(2.4rem, 6vh, 3.4rem); }
.auto-flow ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.auto-flow ol::before {
  content: "";
  position: absolute;
  top: 1.2rem; left: 1.2rem; right: 0;
  height: 1px;
  background: var(--rule-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease) 200ms;
}
.js .auto-flow.reveal.is-in ol::before,
html:not(.js) .auto-flow ol::before { transform: none; }
.auto-flow li { position: relative; }
.auto-flow li b {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--accent);
  background: var(--ground);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.auto-block--alt .auto-flow li b { background: color-mix(in srgb, var(--ground-deep) 40%, var(--ground)); }
.auto-flow li p { margin: 1rem 0 0; font-size: 1.06rem; line-height: 1.55; color: var(--ink); }

.auto-block__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 1.6rem;
  align-items: end;
  margin-top: clamp(2.4rem, 6vh, 3.4rem);
  padding-top: clamp(1.6rem, 4vh, 2.4rem);
  border-top: 1px solid var(--rule);
}
.auto-incl ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.4rem, 3vw, 2.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.auto-incl li {
  display: flex;
  gap: 0.65rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.06rem;
  line-height: 1.45;
}
.auto-incl li svg { width: 0.95rem; height: 0.95rem; flex: none; margin-top: 0.25rem; color: var(--accent); }
.auto-block__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: flex-end; }

/* Closing band: the same inverted ground as the homepage's websites offer. */
.auto-cta {
  background: var(--accent-deep);
  color: var(--ground);
  border-top: 0;
}
.auto-cta .s-kicker { color: #A9C9AF; }
.auto-cta .s-kicker::after { background: rgba(237, 227, 206, 0.42); }
.auto-cta .s-title { color: var(--ground); }
.auto-cta .s-lede { color: color-mix(in srgb, var(--ground) 80%, var(--accent-deep)); }
.auto-cta__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 2rem;
  align-items: end;
}

@media (max-width: 1000px) {
  .auto-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auto-flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .auto-flow ol::before { display: none; }
  .auto-block__foot { grid-template-columns: 1fr; }
  .auto-block__cta { justify-content: flex-start; }
}
@media (max-width: 700px) {
  .auto-index { grid-template-columns: 1fr; }
  .auto-index__card { padding-bottom: 1.4rem; padding-right: 3rem; }
  .auto-index__card svg { left: auto; right: 1.2rem; bottom: auto; top: 1.6rem; }
  .auto-block__head { grid-template-columns: 1fr; row-gap: 1rem; }
  .auto-block__n { font-size: 3.2rem; }
  .auto-block__launch { justify-self: start; }
  .auto-flow ol { grid-template-columns: 1fr; row-gap: 1.1rem; }
  /* number beside the sentence, not above it — four short rows instead of four stacks */
  .auto-flow li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
  .auto-flow li p { margin: 0.35rem 0 0; }
  .auto-incl ul { grid-template-columns: 1fr; }
  .auto-cta__in { grid-template-columns: 1fr; }
}

/* ---- article ---- */
.article { max-width: 44rem; margin-inline: auto; padding: clamp(7rem, 15vh, 9rem) var(--gutter) 4rem; }
.article h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.05; letter-spacing: -0.03em; font-variation-settings: "wdth" 90; margin: 0.8rem 0 1rem; }
.article .meta { font-size: 0.98rem; color: var(--ink-soft); letter-spacing: 0.06em; }
.article h2 { font-size: 1.45rem; margin: 2.4rem 0 0.7rem; letter-spacing: -0.02em; }
.article p, .article li { font-size: 1.12rem; line-height: 1.7; color: var(--ink-soft); }
.article p strong { color: var(--ink); }
.article-cta { border: 2px solid var(--accent); padding: 1.8rem; margin-top: 3rem; }
.article-cta h2 { margin: 0 0 0.5rem; }

/* ---- mobile menu + responsive for new sections ----
   The narrow nav was a 2-column grid holding THREE visible items (mark, burger,
   CTA), so the burger and the CTA were pushed onto a second row and the bar came
   out ~170px tall with the controls scattered — the "weirdly placed buttons".
   It is now one row of three columns, and the burger takes over at 900px rather
   than 620px, which is where the link row actually stops fitting: between 621 and
   ~990 the links and the CTA were still both laid out and the CTA ran off-screen. */
.nav__burger { display: none; }

/* The nav keeps its OWN breakpoint, deliberately not the 900px layout one.
   The six uppercase links plus the mark and the CTA need about 1020px; below that
   the CTA ran off the right edge. Tying the burger to 900 fixed the phone and left
   901–1000 broken in exactly the old way, which is how it was found. */
/* Just above the burger threshold the six links still need every pixel. Tracking
   and gap tighten there and relax again once there is room, so the bar is one row
   at every width instead of doubling in height between 1101 and ~1260. */
@media (min-width: 1121px) and (max-width: 1400px) {
  .nav { gap: 1rem; }
  .nav__links { gap: clamp(0.85rem, 1.6vw, 1.5rem); letter-spacing: 0.1em; }
}

@media (max-width: 1120px) {
  .nav {
    grid-template-columns: 1fr auto auto;
    gap: 0.7rem;
    /* At these widths the mark and the CTA sit directly over the densest part of
       the drawing — the sails — so the resting tint is heavier here than on
       desktop. Still no rule until the bar is stuck. */
    background: color-mix(in srgb, var(--ground) 58%, transparent);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  .nav__links { display: none; }
  .nav__cta { white-space: nowrap; padding: 0.5rem 0.85rem; }
  /* The menu control is the LAST thing in the bar at every narrow width. It sits
     under the thumb on a phone and it is the item that opens the rest of the site,
     so the CTA yields the right edge to it. Visual order only — the DOM keeps the
     button before the CTA, which is also the order they should be tabbed in. */
  .nav__cta { order: 2; }
  .nav__burger { order: 3; }
  /* A hamburger, not a label, from the first width where the links disappear.
     Spelling out "Atvērt izvēlni" on a tablet put two uppercase words next to the
     CTA and read as a second button competing with it; the drawn icon is the
     universal mark for exactly this control and costs ~120px less. The text stays
     for screen readers (site.js swaps it between "Atvērt" and "Aizvērt"), and the
     bars cross into an X while the menu is open, so the control says what it does. */
  .nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    width: 2.75rem; height: 2.5rem; padding: 0; gap: 0;
    background: none; border: 1px solid var(--rule-strong);
    color: var(--ink); cursor: pointer;
  }
  .nav__burger > span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .nav__burger::before,
  .nav__burger::after {
    content: "";
    position: absolute; left: 50%;
    width: 1.05rem; height: 2px;
    background: var(--ink);
    transition: transform 240ms var(--ease);
  }
  .nav__burger::before { top: calc(50% - 5px); transform: translateX(-50%); }
  .nav__burger::after  { top: calc(50% + 3px); transform: translateX(-50%); }
  .menu-open .nav__burger::before { transform: translateX(-50%) translateY(4px) rotate(45deg); }
  .menu-open .nav__burger::after  { transform: translateX(-50%) translateY(-4px) rotate(-45deg); }
  /* Absolute inside the fixed bar, so the panel tracks the bar's real height
     instead of a hardcoded 66px that goes stale the moment the bar changes.
     Centred: the panel is the full width of the screen and the links are short,
     so flush-left left them clinging to one edge of an otherwise empty sheet. */
  .menu-open .nav__links {
    display: grid; position: absolute; inset: 100% 0 auto 0;
    /* Solid, not 97%: the sheet lands over the hero copy on a phone and 3% of the
       kicker still showed through the last link. A menu is a sheet, not a veil. */
    background: var(--ground);
    border-bottom: 1px solid var(--rule-strong);
    padding: 1.2rem var(--gutter) 1.6rem; gap: 1rem;
    font-size: 0.98rem; z-index: 9;
    justify-items: center; justify-content: center; text-align: center;
  }
}

@media (max-width: 900px) {
  .wa, .web, .contact, .sol__body { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; }
  .nums { grid-template-columns: 1fr; }
  .nums > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .wa__points { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* At 360 — the narrowest phone still worth supporting — mark + burger + CTA came
   to 3.8px more than the bar, so the CTA hung off the right edge. Padding, tracking
   and the arrow give that back; the type does NOT shrink, because 0.8rem is already
   the floor the type pass set. */
@media (max-width: 400px) {
  .nav { gap: 0.45rem; padding-inline: 0.9rem; }
  .nav__cta { padding: 0.5rem 0.6rem; letter-spacing: 0.08em; gap: 0; }
  .nav__cta svg { display: none; }
  .nav__burger { width: 2.6rem; }
}
/* 320 is the narrowest width still worth supporting (Fold cover screens, SE 1).
   Mark + burger + CTA came to 14px more than the bar; tracking and padding cover
   it without touching the 0.8rem type floor. */
@media (max-width: 350px) {
  .nav { gap: 0.35rem; padding-inline: 0.75rem; }
  .nav__cta { padding: 0.5rem 0.5rem; letter-spacing: 0.03em; }
  .nav__burger { width: 2.4rem; }
}

/* ════════════════ MOTION PASS ════════════════
   One language per content type: text sets in behind the wipe (the variant's
   signature), blocks rise, and structural rules draw themselves across —
   never the same entrance for everything. */

/* blocks: rise + settle (overrides the base wipe; text re-earns it below) */
.js .reveal {
  clip-path: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* text: the wipe */
.js :is(.s-kicker, .sec__kicker, .hero__kicker, .s-title, .sec__title, .hero__title,
       .s-lede, .sec__lede, .hero__lede, .hero__actions).reveal {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  transition: clip-path 520ms var(--ease);
}
.js :is(.s-kicker, .sec__kicker, .hero__kicker, .s-title, .sec__title, .hero__title,
       .s-lede, .sec__lede, .hero__lede, .hero__actions).reveal.is-in {
  clip-path: inset(0 0 0 0);
}

/* kicker rules draw across after the label lands */
.js :is(.s-kicker, .sec__kicker, .hero__kicker).reveal::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease) 260ms;
}
.js :is(.s-kicker, .sec__kicker, .hero__kicker).reveal.is-in::after { transform: scaleX(1); }

/* process steps: the top rule draws in, left to right, staggered */
.steps li { border-top: 0; }
.steps li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 640ms var(--ease);
}
.js .steps li.reveal.is-in::before,
html:not(.js) .steps li::before { transform: scaleX(1); }
.steps li:nth-child(2)::before { transition-delay: 110ms; }
.steps li:nth-child(3)::before { transition-delay: 220ms; }
.steps li:nth-child(4)::before { transition-delay: 330ms; }

/* stat numbers: masked slide-up, staggered */
.nums b { display: block; overflow: hidden; }
/* Hidden ONLY when the strip will actually be revealed. The hidden state used to apply
   to every .nums, and the Mājaslapas page's strip carried no .reveal class — so its
   three figures sat below their own clip box forever and the strip read as empty. */
.nums b > span { display: block; transition: transform 640ms var(--ease); }
.js .nums.reveal:not(.is-in) b > span { transform: translateY(110%); }
.nums > div:nth-child(2) b > span { transition-delay: 100ms; }
.nums > div:nth-child(3) b > span { transition-delay: 200ms; }
html:not(.js) .nums b > span { transform: none; }

/* details (risinājumi + BUJ): animated open where supported, snap elsewhere */
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
.sol details::details-content,
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 380ms var(--ease), content-visibility 380ms allow-discrete;
}
.sol details[open]::details-content,
.faq details[open]::details-content { block-size: auto; }

/* buttons: press feedback + arrow nudge */
.btn { transition: background 90ms linear, color 90ms linear, border-color 90ms linear, transform 120ms var(--ease); }
.btn:active { transform: scale(0.975); }
.btn svg { transition: transform 200ms var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.nav__cta svg { transition: transform 200ms var(--ease); }
.nav__cta:hover svg { transform: translateX(3px); }

/* nav links: rule grows under the hovered link */
.nav__links a { position: relative; padding-bottom: 0.2rem; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }

/* nav retreats when reading down, returns on the first scroll up */
.nav {
  transition: background 320ms var(--ease), border-color 320ms var(--ease),
              backdrop-filter 320ms var(--ease), -webkit-backdrop-filter 320ms var(--ease),
              transform 320ms var(--ease), opacity 300ms var(--ease);
}
.nav.is-hidden { transform: translateY(-101%); }

/* ---- the first second ----
   On a refresh the bar used to be fully drawn and razor sharp while the hero below
   it was still empty parchment — the page arrived in the wrong order, chrome
   first and content second. Now nothing is committed until the first frame of the
   drawing is on the canvas; then the artwork dissolves in, the copy wipes in over
   it on its existing stagger, and the bar settles down last. `is-booting` is set
   by reveal.js before first paint and cleared by it, with a hard timeout — a
   script failure leaves .js off entirely and everything is simply visible.
   A one-shot ANIMATION, not a transition-delay: the bar's transition list is also
   what carries is-stuck and is-hidden later, and a lingering delay there would
   make every scroll response feel a quarter-second late. */
.js.is-booting .nav,
.js.is-booting .marquee,
.js.is-booting .auto-subnav { opacity: 0; }
.js.is-booting .nav { transform: translateY(-40%); }
.js.is-booted .nav { animation: bootNav 620ms var(--ease) 240ms backwards; }
.js.is-booted .marquee { animation: bootFade 700ms var(--ease) 380ms backwards; }
/* The section switcher arrives with the bar, not before everything else — it was
   the only thing on screen for the first second of automatizacijas.html. */
.js.is-booted .auto-subnav { animation: bootFade 520ms var(--ease) 300ms backwards; }
@keyframes bootNav { from { opacity: 0; transform: translateY(-40%); } }
@keyframes bootFade { from { opacity: 0; } }

/* cards: lift with a real shadow (offset + blur) */
.plan, .post { transition: border-color 140ms linear, transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.plan:hover, a.post:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -20px rgba(31, 28, 23, 0.4), 0 3px 8px -4px rgba(31, 28, 23, 0.18);
}
.why > article { transition: box-shadow 220ms var(--ease); }
.why > article:hover { box-shadow: inset 0 -2px 0 0 var(--accent); }
.aside-card { transition: border-color 140ms linear; }
.aside-card:hover { border-color: var(--accent); }

/* form fields: border eases to accent on focus */
.form input, .form textarea { transition: border-color 160ms linear, box-shadow 160ms linear; }
.form input:hover, .form textarea:hover { border-color: var(--accent-soft); }

/* marquee: pause while the pointer reads it */
.marquee:hover .marquee__track { animation-play-state: paused; }

/* chat bubbles: pop in from their tail corner */
.chat__msg { animation: msgin 240ms var(--ease); transform-origin: bottom left; }
.chat__msg--client { transform-origin: bottom right; }
@keyframes msgin { from { opacity: 0; transform: translateY(8px) scale(0.96); } }

/* hero scroll cue: a rule that keeps drawing itself downward */
/* The hero scroll cue was removed at the user's request — the page is obviously
   scrollable and the ticking line competed with the artwork. */