/* ============================================================
   Gudrā pele — landing page

   The page is the product's own painted world. Every surface here is
   one of our gouache paintings: the meadow is the hero, the paper the
   bands, the night veil the privacy spread. Nothing decorative is
   invented for the landing that a child could not meet inside.

   Palette — sampled from the paintings
     paper   #fdf9f0  the page
     card    #fffdf7  raised paper
     ink     #3d2c1a  warm brown text
     soft    #8a715a  secondary text
     sun     #ffbe2e  actions (the painted pill carries it)
     sage    #6f9a63  "available" chips
     night   #232f4e  the privacy spread — the platform's night veil

   Type — the product's own faces
     Bricolage Grotesque 800 — display
     Nunito 500/700/800 — body

   Layout
     --wrap: min(1200px, 94vw). Section headers centre like a book
     spread; running text stays left and measure-capped.
   ============================================================ */

:root {
  --paper: #fdf9f0;
  --card: #fffdf7;
  --ink: #3d2c1a;
  --soft: #7d6146;
  --line: #e9dfcc;

  --sun: #ffbe2e;
  --sun-ink: #4a2f14;
  /* the flag and the folk signs share this red; the buttons now do too */
  --carmine: #9e3039;        /* the flag and the folk signs */
  --carmine-dark: #82262e;
  /* the buttons: the same red, faded the way the painted cloth is */
  --brick: #c25f56;
  --brick-dark: #ad4d46;
  --brick-ink: #4a2418;
  --sage: #6f9a63;
  --night: #232f4e;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  /* The band padding answers to the HEIGHT of the screen, not only its
     width. 112px top and bottom is right on a tall desktop monitor and
     is 224px of a laptop's 900 - a quarter of the screen spent on
     nothing, which is why a section 'almost' fits on a 16in MacBook and
     needs one more scroll. Between 64px and 112px, by viewport height. */
  --s9: clamp(64px, 9vh, 112px);

  --r: 16px; --r-lg: 24px; --r-pill: 999px;

  --display: 'Bricolage Grotesque', 'Nunito', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, sans-serif;

  --wrap: min(1200px, 94vw);
  --shadow: 0 14px 36px rgba(61, 44, 26, .14);
}

* { box-sizing: border-box; }
/* NOT smooth, and that is the fix rather than an oversight.
   A nav click on this page travels six to nine THOUSAND pixels. Animated,
   that takes seconds, and any wheel nudge, trackpad touch or second click
   during the flight cancels the scroll where it stands — which is the
   "anchor stuck midway, or in a random place" the owner reported, and it
   gets worse the larger the screen, because the distances get longer.
   An instant jump cannot be interrupted, so it lands exactly, every time,
   at every size. */
html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, dl, dd, ol, ul { margin: 0; padding: 0; }
li { list-style: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.028em;
  text-wrap: balance;
}

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

/* The allowance for the fixed bar is MEASURED, not guessed - see
   the script at the end of index.html which writes --head. The
   96px fallback only applies for the instant before it runs, and
   if scripting is off. */
/* Land on the section's first WORDS, not on the top of its box.
   Every section carries 112px of padding above its heading, so clearing
   only the bar left a screenful that began with a hundred and fifty pixels
   of nothing and read as "it stopped short". Most of that padding is
   swallowed here, leaving about 24px of air above the heading. */
/* Only the fallback for when the script above has not run. With it, the
   heading is measured and this is never used. */
/* The FAQ is not a section of its own — it lives inside the pricing
   band — but a parent goes looking for it by name, so it gets a
   target like one. */
section[id], #jautajumi { scroll-margin-top: calc(var(--head, 82px) + 14px); }
/* Except the top of the page, which has nothing above it to clear: the
   96px that keeps a mid-page heading out from under the floating bar
   would stop the hero 96px short of its own beginning. */
#sakums { scroll-margin-top: 0; }

/* ---------------------------------------------------------- type roles */
.eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--soft);
  display: flex; align-items: center; gap: 10px;
}
/* Sized to the line rather than towering over it: a 44px animal beside
   13px capitals reads as two things sitting near each other, not as one
   label. The row keeps a floor so nothing clips. */
.eyebrow { min-height: 34px; }
/* Nudged up two pixels. Geometrically they are already centred on the
   row - what the eye aligns to is not the middle of an animal but its
   HEAD, which sits above the middle, so a mathematically centred mouse
   reads as sitting low beside a line of capitals. This is the optical
   correction, applied to the poses and the flag alike. */
.eyebrow .pose { width: 34px; height: 34px; object-fit: contain; flex: none;
  transform: translateY(-2px); }
.lead {
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 600;
  color: var(--soft); max-width: 36em; margin-top: var(--s4);
}
.sub {
  font-size: 18px; font-weight: 600; color: var(--soft);
  max-width: 58ch; margin-top: var(--s4);
}
.muted { font-size: 14px; font-weight: 600; color: var(--soft); line-height: 1.55; }
.note { font-size: 14px; font-weight: 700; color: var(--soft); margin-top: var(--s6); }
.small { font-size: 12.5px; font-weight: 500; color: var(--soft); line-height: 1.7; max-width: 74ch; }

/* Section heads sit centred, like a chapter opening. */
.band .eyebrow, .privacy .eyebrow { justify-content: center; }
.band h2, .privacy h2 { text-align: center; margin-inline: auto; }
.band .sub { text-align: center; margin-inline: auto; }
.band h2 { font-size: clamp(32px, 4vw, 52px); margin-top: var(--s4); max-width: 24ch; }

/* ---------------------------------------------------------- buttons */
/* The call to action, repainted (owner, 2026-08-26: the glossy yellow pill
   did not belong). It was a photographic texture under two inset highlights
   and a coloured glow — a different design language from the flat gouache
   world it sits in. It is one solid colour now: the same carmine as the flag
   in the picture above it and the folk signs beside it, with cream lettering,
   a card's corner radius rather than a lozenge, and a shadow in the page's
   own brown instead of a halo.

   This rule is the SOURCE of the recipe. The app copies it into the
   `--paint-*` tokens in `src/design/tokens.css` and paints its own primary
   buttons from there, so the two products look related. Change it here
   first, then carry the change over. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 14px; cursor: pointer; text-decoration: none;
  padding: 14px 28px; font-size: 15.5px; font-weight: 800; white-space: nowrap;
  font-family: var(--body);
  /* The painted texture survives — it is the same brush grain as the rest
     of the page — but it now carries the carmine instead of a photograph of
     yellow paint: the colour is laid under it and multiplied through, so the
     button looks mixed rather than printed. */
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--brick) 94%, transparent),
      color-mix(in srgb, var(--brick) 94%, transparent)),
    url('art/sakt-poga.webp') center / 200% auto;
  color: #fffaf2;
  box-shadow: 0 5px 14px rgba(61, 44, 26, .13);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover {
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--brick-dark) 94%, transparent),
      color-mix(in srgb, var(--brick-dark) 94%, transparent)),
    url('art/sakt-poga.webp') center / 200% auto;
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(61, 44, 26, .22);
}
.btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(61, 44, 26, .18); }
.btn-lg { padding: 17px 38px; font-size: 17px; border-radius: 16px; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* The quieter twin: same shape, no fill — for a second action beside
   the first, so two buttons never shout at each other. */
.btn-quiet {
  background: transparent; color: var(--brick-dark);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brick) 45%, transparent);
}
.btn-quiet:hover { background: color-mix(in srgb, var(--brick) 10%, transparent); color: var(--brick-dark); }
/* „Drīzumā" (owner, 2026-09-27: „gray out izmeginat button as drizuma"): while the test is closed a button into
   the app is greyed and goes nowhere — no brick, no lift, no hand (tools/lapu-dalas.mjs, `SLEGTS`). A tried game's
   „Drīzumā" (src/lapa/logs.ts) looks the same. */
.btn-drizuma, .btn-drizuma:hover, .sp-spelet[aria-disabled="true"], .sp-spelet[aria-disabled="true"]:hover {
  background: color-mix(in srgb, var(--ink) 12%, var(--card)); color: color-mix(in srgb, var(--ink) 55%, var(--card));
  box-shadow: none; transform: none; cursor: default;
}

.cta-row { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s6); }
.band .cta-row { justify-content: center; }

/* ---------------------------------------------------------- header */
.top {
  position: fixed; inset: 14px 0 auto; z-index: 30;
  pointer-events: none;
}
.top-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s6);
  padding: 10px 22px;
  background: rgba(253, 249, 240, .88);
  /* NO backdrop-filter here, and that is deliberate.
     It was blur(10px) on a FIXED, full-width bar, which makes the browser
     resample everything behind it on every scroll frame — and the cost
     scales with pixels, so a retina Mac pays four times what this machine
     does. The owner reported scrolling as "suuuuper glitchy" on an M1 with
     32GB, which is never the hardware. The background below is already
     nearly opaque, so the blur was buying a few pixels of translucency at
     the edges for a full-viewport resample sixty times a second. */
  background: rgba(253, 249, 240, .96);
  border: 1px solid rgba(233, 223, 204, .9);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 30px rgba(61, 44, 26, .12);
}
.brand {
  display: flex; align-items: center; gap: var(--s3); white-space: nowrap;
  font-family: var(--display); font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; text-decoration: none;
}
.topnav { display: flex; gap: var(--s6); margin-left: auto; }
.topnav a {
  font-size: 14.5px; font-weight: 700; color: var(--soft);
  text-decoration: none; transition: color .15s;
}
.topnav a:hover { color: var(--ink); }
.top .btn { padding: 10px 20px; font-size: 14px; }

/* ---------------------------------------------------------- hero */
/* The painted meadow, full height. The words sit on a sheet of the
   platform's own card paper, like a note left in the grass. */
/*
 * IT SCALES WITH THE SHORT SIDE, NOT ONLY THE WIDE ONE.
 *
 * Owner, 2026-09-22: „on smaller screens like macbook m1 13inch the landing
 * page hero does not fit in screen, properly scale it dowbn".
 *
 * Everything here was sized in `vw`, and a 13-inch MacBook is 1440 CSS pixels
 * WIDE — as wide as a large desktop — and only about 810 tall once the
 * browser's own chrome is off. So the page read the width, decided it had
 * plenty of room, and set the headline at its full 66px. Measured: the card
 * came out 969px tall in an 810px viewport, and the three promises at the
 * bottom of it were simply below the fold on the machine half this market
 * owns.
 *
 * The top padding follows the viewport too: 130px is right under a bar on a
 * tall screen and is a sixth of a short one.
 */
.hero {
  min-height: 100svh;
  display: grid; align-items: center;
  background: url('art/hero-banner.jpg') left 30% / cover no-repeat;
  padding-block: clamp(78px, 12svh, 130px) clamp(20px, 4svh, var(--s8));
}
/* The card's left edge shares a line with the menu bar's. Both are `.wrap`
   elements, but the BAR is the wrap itself — its pill edge sits on the
   wrap's border box — while the card sits INSIDE one and was therefore
   inset by the wrap's own padding. Measured: the bar's edge at 143 and the
   card's at 175, which is exactly the 32px of --s6 between them. Dropping
   the padding here (and only here) puts them on the same line. The mobile
   block below puts it back, where the padding is what keeps the card off
   the screen edge. */
.hero-inner { display: grid; padding-inline: 0; }
.hero-copy {
  max-width: 620px;
  padding: clamp(18px, min(3.5vw, 3.9svh), 44px);
  border-radius: var(--r-lg);
  background:
    linear-gradient(rgba(255, 253, 247, .78), rgba(255, 253, 247, .78)),
    url('art/kartes-fons.webp') center / cover no-repeat;
  box-shadow: 0 24px 60px rgba(35, 47, 78, .25);
  /* Straight, and squared to the bar above it (owner ruling 2026-08-26).
     It used to be tilted half a degree like the paintings are, and the
     paintings should stay tilted — but this card is not a photograph
     pinned to a page, it is the first block of TEXT, and it sits directly
     under a top bar whose edges are level. A half degree is invisible on
     its own and unmistakable against a straight edge right above it: the
     card read as crooked rather than as casual. The pictures keep the
     tilt precisely because nothing straight sits beside them. */
}
/* `min()` of the two is what makes a short wide screen behave: whichever
   dimension is scarcer decides. At 1440x810 that is the height, and the
   headline comes down from 66px to about 60 instead of staying at its
   desktop size in a viewport that cannot hold it. */
.hero h1 {
  font-size: clamp(32px, min(5.2vw, 6.9svh), 66px);
  margin-top: clamp(8px, 1.6svh, var(--s4));
  line-height: 1.04;
}
.hero-copy > p { font-size: clamp(14px, min(1.25vw, 2.0svh), 19px); line-height: 1.5; }

/* The three promises. They used to wear green tick icons, which read as a
   checklist of features - the visual language of a comparison table, not of
   a page about a child's computer. They are set as plain lines now, each
   opening on its promise in the ink colour with the qualifier trailing
   quietly after it, and separated by hairlines so the eye still counts
   three. */
.claims {
  display: grid; margin-top: clamp(12px, 2.4svh, var(--s6));
  font-size: clamp(13px, 1.8svh, 15px); color: var(--soft);
  border-top: 1px solid var(--line);
}
.claims li {
  padding: clamp(6px, 1.2svh, var(--s3)) 0;
  border-bottom: 1px solid var(--line);
}
.claims b { color: var(--ink); font-weight: 800; }

/* ---------------------------------------------------------- the demo */
.demo-band { padding-block: var(--s8) var(--s9); }
.demo { margin: var(--s7) auto 0; max-width: 880px; display: grid; gap: var(--s5); }

/* The little screen IS the real thing: actual screenshots of the
   product, a painted hand using them. */
.screen {
  position: relative; aspect-ratio: 1400 / 821; border-radius: var(--r-lg);
  overflow: hidden;
  background: #cfe6ef;
  box-shadow: var(--shadow);
}
.tape {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; cursor: pointer; display: block;
}
}

.switch {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: 0 4px 12px rgba(61, 44, 26, .08);
}
.switch button {
  border: 0; background: none; cursor: pointer; border-radius: var(--r-pill);
  padding: 9px 20px; font-family: var(--body); font-size: 14px; font-weight: 800;
  color: var(--soft); transition: background .18s, color .18s;
}
.switch button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

figcaption {
  display: grid; gap: var(--s3); justify-items: center; text-align: center;
}
figcaption .muted { max-width: 46ch; }

/* ---------------------------------------------------------- bands */
.band { padding-block: var(--s9); background: var(--paper); }
.band.paper2 {
  background:
    linear-gradient(rgba(253, 249, 240, .72), rgba(253, 249, 240, .72)),
    url('art/kartes-fons.webp') center / cover no-repeat;
}

/* Each chapter opens with its painted plate, mounted like a print. */
.band-art { margin: 0 0 var(--s7); }
.band-art img {
  width: min(720px, 100%); height: auto; display: block; margin: 0 auto;
  border-radius: 20px;
  padding: 10px; background: var(--card);
  box-shadow: var(--shadow);
  transform: rotate(-1.1deg);
}
.paper2 .band-art img, .privacy .band-art img { transform: rotate(1deg); }

/* Chapter heads: the plate and the words share the spread, sides
   alternating chapter to chapter. The night spread alone stays centred. */
.band-head {
  display: grid; grid-template-columns: 5fr 6fr;
  gap: clamp(28px, 4.5vw, 72px); align-items: center;
  margin-bottom: var(--s6);
}
.band-head.flip .band-art { order: 2; }
.band-head .band-art { margin: 0; }
.band-head .band-art img { width: 100%; }
.band-head .eyebrow { justify-content: flex-start; }
.band-head h2, .band-head .sub { text-align: left; margin-inline: 0; }

/* ---------------------------------------------------------- steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin-top: var(--s7); }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s5); display: grid; gap: var(--s3); align-content: start;
  box-shadow: 0 8px 22px rgba(61, 44, 26, .07);
}
.step:not(.ready) { background: transparent; border-style: dashed; box-shadow: none; }
.step-state {
  justify-self: start; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--soft);
  padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(138, 113, 90, .12);
}
.step.ready .step-state { color: #fff; background: var(--sage); }
.step h3 { font-size: 21px; }
.step p { font-size: 15px; color: var(--soft); }
.band .note { text-align: center; }

/* ---------------------------------------------------------- subjects */
.subjects { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); margin-top: var(--s7); }
.subjects article {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s5);
  box-shadow: 0 8px 22px rgba(61, 44, 26, .07);
}
.subjects h4 { font-family: var(--display); font-size: 18px; font-weight: 800; margin-bottom: var(--s2); }
.subjects p { font-size: 14.5px; color: var(--soft); line-height: 1.7; }

.pull {
  margin: var(--s7) auto 0; padding: var(--s5) var(--s6);
  max-width: 720px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 8px 22px rgba(61, 44, 26, .07);
  font-size: 16px; color: var(--soft); text-align: left;
  display: flex; align-items: center; gap: var(--s5);
}
.pull-ic { flex: none; width: 46px; height: 46px; object-fit: contain; }
.pull b {
  display: block; font-family: var(--display); font-size: 18px;
  font-weight: 800; color: var(--ink); margin-bottom: var(--s1);
}

/* ---------------------------------------------------------- privacy: night */
/* The platform's night: the same indigo veil a child can pull over the
   meadow, with the same quiet stars. The one dark page in the book. */
.privacy {
  padding-block: var(--s9);
  background:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, .8), transparent 2px),
    radial-gradient(1.2px 1.2px at 31% 9%, rgba(255, 255, 255, .65), transparent 2px),
    radial-gradient(1.7px 1.7px at 54% 16%, rgba(255, 255, 255, .75), transparent 2px),
    radial-gradient(1.1px 1.1px at 72% 7%, rgba(255, 255, 255, .55), transparent 2px),
    radial-gradient(1.5px 1.5px at 88% 24%, rgba(255, 255, 255, .7), transparent 2px),
    radial-gradient(1.2px 1.2px at 42% 30%, rgba(255, 255, 255, .5), transparent 2px),
    linear-gradient(rgba(26, 31, 52, .74), rgba(30, 38, 62, .68)),
    url('art/fons.webp') center bottom / cover no-repeat;
  color: #f3efe6; text-align: center;
  position: relative;
}
.priv-moon {
  position: absolute; top: 60px; right: 7%;
  width: clamp(56px, 6vw, 92px);
  filter: drop-shadow(0 0 26px rgba(255, 236, 180, .45));
  pointer-events: none;
}
.privacy .eyebrow { color: rgba(243, 239, 230, .65); }
.privacy h2 { font-size: clamp(28px, 3.4vw, 44px); margin-top: var(--s4); }
.nothing {
  font-family: var(--display); font-weight: 800; color: #ffe9ad;
  font-size: clamp(80px, 14vw, 170px); line-height: .9;
  letter-spacing: -.05em; margin: var(--s5) 0 var(--s8);
  text-shadow: 0 0 60px rgba(255, 233, 173, .25);
}
.facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s6) var(--s5); text-align: left; margin-bottom: var(--s7);
  max-width: 1020px; margin-inline: auto;
}
.facts li { font-size: 15px; color: rgba(243, 239, 230, .78); padding-left: 26px; position: relative; }
.facts li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 50%; background: #ffe9ad;
}
.facts b { display: block; color: #fff; font-weight: 800; }
.privacy .muted { color: rgba(243, 239, 230, .6); max-width: 58ch; margin-inline: auto; }
.privacy .band-art img { padding: 10px; background: rgba(255, 253, 247, .92); }

/* ---------------------------------------------------------- prices */
.prices {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5);
  margin-top: var(--s7); max-width: 1020px; margin-inline: auto;
}
.price {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s5); display: grid; gap: 2px; align-content: start;
  box-shadow: 0 8px 22px rgba(61, 44, 26, .07);
}
.price:not(.ready) { background: transparent; border-style: dashed; box-shadow: none; }
.price b { font-family: var(--display); font-size: 17.5px; font-weight: 800; }
.price span {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--soft);
}
.price i {
  font-family: var(--display); font-style: normal; font-weight: 800;
  font-size: 40px; letter-spacing: -.03em; margin-top: var(--s3);
  font-variant-numeric: tabular-nums;
}
.price:not(.ready) i { color: var(--soft); }

.terms {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s6); margin-top: var(--s7); font-size: 15px; color: var(--soft);
  max-width: 1020px; margin-inline: auto;
}
.terms b {
  display: block; font-family: var(--display); font-size: 16px;
  font-weight: 800; color: var(--ink); margin-bottom: var(--s1);
}

/* ---------------------------------------------------------- faq */
.faq {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s8);
  margin-top: var(--s7); max-width: 1020px; margin-inline: auto;
}
.faq dt { font-family: var(--display); font-size: 18px; font-weight: 800; margin-bottom: var(--s2); }
.faq dd { font-size: 15px; color: var(--soft); }

/* ---------------------------------------------------------- footer */
/* The footer was four blocks stacked left in one column - name, origin,
   links, disclaimer - all the same weight, so it read as leftovers. It is
   two columns now: who this is on the left, where to read the terms on the
   right, and the disclaimer beneath them both behind a rule, which is
   where small print belongs. */
.foot { padding-block: var(--s8) var(--s7); background: var(--paper); border-top: 1px solid var(--line); }
.foot .wrap {
  display: grid; gap: var(--s5) var(--s7);
  grid-template-columns: 1fr auto; align-items: start;
}
.foot .brand { grid-column: 1; }
.made-in { grid-column: 1; margin-top: calc(var(--s4) * -1); }
/* Our three networks: round brown buttons under „Veidots Latvijā", in the footer's own colours, not the brands'. */
.socials { grid-column: 1; display: flex; gap: var(--s3); margin-top: calc(var(--s2) * -1); }
.socials a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: var(--soft); background: var(--card); border: 1px solid var(--line);
  transition: color .15s, border-color .15s, transform .15s;
}
.socials a:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); transform: translateY(-2px); }
.socials a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.socials svg { width: 20px; height: 20px; }
.footnav {
  grid-column: 2; grid-row: 1 / span 3;
  display: grid; gap: var(--s3); justify-items: end; text-align: right;
}
.footnav a { font-size: 13.5px; font-weight: 700; color: var(--soft); text-decoration: none; }
.footnav a:hover { color: var(--ink); text-decoration: underline; }
.foot .small {
  grid-column: 1 / -1; padding-top: var(--s5);
  border-top: 1px solid var(--line); max-width: 76ch;
}
@media (max-width: 760px) {
  .foot .wrap { grid-template-columns: 1fr; justify-items: start; }
  .footnav { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; }
  .foot .small { padding-top: var(--s4); }
}

/* ---------------------------------------------------------- motion */
.rise {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .8, .3, 1);
  transition-delay: var(--d, 0ms);
}
.rise.up { opacity: 1; transform: none; }
.rise.uzreiz { transition: none; }

/* No cross-fade between the site's pages (GP-660). One was tried on 2026-09-27 and removed the same day: its first
   frame laid both pages over each other at full strength, washing the screen almost white, and the landing page's
   hero then showed through the new page for a fifth of a second — the owner saw it as the hero flashing. Without it
   the browser keeps the old page until the new one is ready and swaps them in one frame. */

@keyframes hero-in {
  /* No rotation here either, or the entrance animation would put the tilt
     straight back on at the end of its run and undo the rule above. */
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-copy { animation: hero-in .8s cubic-bezier(.22, .8, .3, 1) both; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .steps, .subjects, .prices, .terms, .facts, .faq { grid-template-columns: repeat(2, 1fr); }
  .band-head { grid-template-columns: 1fr; gap: var(--s6); }
  .band-head.flip .band-art { order: 0; }
  .band-head .eyebrow { justify-content: center; }
  .band-head h2, .band-head .sub { text-align: center; margin-inline: auto; }
  .topnav { display: none; }
  .hero { padding-block: 110px var(--s7); }
}

@media (max-width: 620px) {
  .wrap { padding-inline: var(--s4); }
  .top { inset: 10px 0 auto; }
  .top-inner { padding: 8px 14px; gap: var(--s4); }
  .brand { font-size: 15.5px; }
  .brand img { width: 30px; height: 30px; }
  .top .btn { margin-left: auto; padding: 8px 14px; font-size: 12.5px; }
  .steps, .subjects, .prices, .terms, .facts, .faq { grid-template-columns: 1fr; }
  /* NO top padding once the picture band exists.
     The band is drawn by .hero::before below and is meant to run to the top
     of the screen and behind the floating bar. Ninety-six pixels of padding
     above it left the bar sitting on bare background, and pushed everything
     down by a bar's height for nothing. */
  .hero { padding-block: 0 var(--s6); }
  .hero-copy { transform: none; padding: var(--s5); }
  .hero-copy { animation-name: none; }
  .band, .privacy { padding-block: var(--s8); }
  .screen { padding: var(--s4); }
  .screen-icons { gap: var(--s3); }
  .screen-bubble { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1 !important; transform: none !important; }
  .hero-copy { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* Latvia, in the product's own hand: the flag is the painted one the app
   teaches a child to recognise, not a rectangle drawn here. The ornament
   above the band is an auseklis — the eight-pointed star — kept thin and
   quiet so it reads as a woven border, not a decoration competing with
   the words. */
/* The eyebrow is a flex row, so the flag aligns by the row, not by
   baseline nudging — sized to sit with the mouse poses (44px) rather than
   below them. */
.eyebrow .flag { width: 32px; height: 32px; object-fit: contain; flex: none;
  transform: translateY(-2px); }
/* The band breathes like the others now. Its parts were sitting on one
   flat gap, so the picture, the heading, the paragraph and the sign row
   read as a single crowded stack instead of the layered rhythm every other
   band has: picture, then air, then heading tight to its own paragraph,
   then air again before the row of signs. */
.lv-band { padding: var(--s9) 0; background: var(--paper2, #f7f2e8); }
.lv-inner { display: grid; justify-items: center; gap: var(--s7); text-align: center; }
.lv-copy { display: grid; gap: var(--s4); max-width: 62ch; }
.lv-copy h2 { margin-bottom: var(--s1); }
.lv-signs { margin-top: var(--s3); }
.lv-marks {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s6); margin-top: var(--s5); list-style: none; padding: 0;
}
.lv-marks li { display: grid; justify-items: center; gap: 6px; width: 92px; }
.lv-marks img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(61, 44, 26, .16)); }
.lv-marks span { font-size: 13px; font-weight: 700; color: var(--soft); }
.made-in {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--soft); margin: 0;
}
.made-in img { width: 20px; height: 20px; object-fit: contain; }

/* The Latvia band's own painting: the farmstead under its flag. Sits above
   the ornament, matted like the other band pictures. */
.lv-art { margin: 0; }
.lv-art img {
  width: min(640px, 100%); height: auto; display: block; margin: 0 auto;
  border-radius: 20px; padding: 10px; background: var(--card);
  box-shadow: var(--shadow); transform: rotate(-0.8deg);
}

/* The ornament: painted band when it exists, drawn one until then. The
   image hides itself if it cannot load (set by the landing script), which
   is what keeps a missing file from leaving a broken icon on the page. */




.privacy { position: relative; }
.privacy::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px;
  background: url('./art/raksti-josla.webp') repeat-x center / auto 26px;
  opacity: .34; filter: brightness(0) invert(1); pointer-events: none;
}

/* The folk signs have ONE home: the band about Latvia. Named, because they
   are things with names rather than wallpaper — and because a child will
   meet them by name inside the product later. Sprinkled through the page
   they only competed with the mouse and with the bands' own colour changes.
   One sign stands washed-out behind the band, big and quiet, as texture. */
.lv-band { position: relative; overflow: hidden; }
.lv-band::before {
  content: ""; position: absolute; right: -60px; top: 50%;
  width: 340px; height: 340px; transform: translateY(-50%);
  background: url('./art/raksti/auseklis.webp') no-repeat center / contain;
  opacity: .05; pointer-events: none;
}
.lv-signs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s6); list-style: none; padding: 0; margin: 0;
}
.lv-signs li { display: grid; justify-items: center; gap: 7px; width: 92px; }
.lv-signs img { width: 40px; height: 40px; object-fit: contain; opacity: .9; }
.lv-signs span {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--soft);
}

/* Folk signs washed into the paper, the way the Latvia band already wears
   one. Each band gets ONE, at its own size, side and tilt, so the page
   reads as hand-laid rather than tiled — and every one is faint enough to
   be felt rather than seen. They sit behind everything and catch no
   clicks; `overflow: hidden` keeps a big mark from widening the page. */
#programma, #macas, #milulis, #telefons, #cena, #ekrans,
#sakums, #privatums { position: relative; overflow: hidden; }
#programma::after, #macas::after, #milulis::after, #telefons::after,
#cena::after, #ekrans::after, #sakums::after, #privatums::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  background-repeat: no-repeat; background-size: contain;
  opacity: .045;
}
#programma > *, #macas > *, #milulis > *, #telefons > *, #cena > *, #ekrans > *,
#sakums > *, #privatums > * { position: relative; z-index: 1; }

#ekrans::after {
  background-image: url('./art/raksti/zvaigzne.webp');
  width: 200px; height: 200px; right: 5%; top: 60px; transform: rotate(-8deg);
}
#programma::after {
  background-image: url('./art/raksti/austras-koks.webp');
  width: 300px; height: 300px; left: 4%; top: 140px; transform: rotate(6deg);
}
#macas::after {
  background-image: url('./art/raksti/saule.webp');
  width: 260px; height: 260px; right: 6%; bottom: 90px; transform: rotate(-4deg);
}
#milulis::after {
  background-image: url('./art/raksti/jumis.webp');
  width: 320px; height: 320px; left: 3%; bottom: 60px; transform: rotate(-10deg);
}
#telefons::after {
  background-image: url('./art/raksti/zalktis.webp');
  width: 280px; height: 280px; right: 4%; top: 120px; transform: rotate(9deg);
}
#cena::after {
  background-image: url('./art/raksti/meness.webp');
  width: 240px; height: 240px; left: 5%; top: 100px; transform: rotate(-6deg);
}
/* The two that had none. Both signs are chosen rather than picked off the
   end of the list: the AUSEKLIS is the morning star and this section is
   called Sākums; the LAIMAS ZĪME is Laima's, who looks after what is small
   and new, over the section that promises a child's data is never taken.
   The hero already carries the strongest imagery on the page, so its mark
   sits high in the corner behind the banner and stays the faintest here. */
#sakums::after {
  background-image: url('./art/raksti/auseklis.webp');
  width: 260px; height: 260px; right: 6%; top: 40px; transform: rotate(7deg);
  opacity: .032;
}
#privatums::after {
  background-image: url('./art/raksti/laimas-zime.webp');
  width: 250px; height: 250px; right: 5%; bottom: 70px; transform: rotate(-7deg);
}
/* ON A PHONE THEY STAY, SMALLER.
 *
 * They used to be `display: none` here, so the whole page lost its folk
 * marks on exactly the screen most parents will open it on — the one place
 * the product's Latvianness had to carry itself, and it was blank. Owner
 * ruling 2026-08-28: scatter them on every section on the phone too.
 *
 * Not the desktop rule unhidden: a 320px mark on a 360px screen is not a
 * watermark, it is a background image. Each is cut to roughly half, pulled
 * to the margin it already favours and allowed to bleed off that edge, so a
 * narrow column still reads as hand-laid rather than centred and tiled.
 * `overflow: hidden` on the sections (above) keeps the bleed from widening
 * the page.
 *
 * Opacity drops a little too. On a phone the text sits closer to the mark
 * and is read in worse light, and legibility wins over decoration. */
@media (max-width: 760px) {
  #programma::after, #macas::after, #milulis::after,
  #telefons::after, #cena::after, #ekrans::after,
  #privatums::after { opacity: .045; }
  #sakums::after { opacity: .035; }

  #sakums::after { width: 220px; height: 220px; right: -70px; top: 16px; }
  #privatums::after { width: 244px; height: 244px; right: -78px; bottom: 44px; }

  #ekrans::after { width: 208px; height: 208px; right: -66px; top: 30px; }
  #programma::after { width: 268px; height: 268px; left: -86px; top: 78px; }
  #macas::after { width: 240px; height: 240px; right: -76px; bottom: 54px; }
  #milulis::after { width: 276px; height: 276px; left: -90px; bottom: 40px; }
  #telefons::after { width: 250px; height: 250px; right: -80px; top: 66px; }
  #cena::after { width: 226px; height: 226px; left: -72px; top: 58px; }
}

/* The narrowest phones give a mark less room still, and the two widest are
   pulled in further so they never crowd a heading. */
@media (max-width: 420px) {
  #programma::after { width: 254px; height: 254px; left: -104px; }
  #milulis::after { width: 262px; height: 262px; left: -108px; }
  #telefons::after { width: 238px; height: 238px; right: -98px; }
  #macas::after { width: 228px; height: 228px; right: -94px; }
  #cena::after { width: 214px; height: 214px; left: -88px; }
  #ekrans::after { width: 198px; height: 198px; right: -84px; }
  #sakums::after { width: 208px; height: 208px; right: -88px; }
  #privatums::after { width: 232px; height: 232px; right: -96px; }
}

/* The free column reads as an offer, not as an afterthought: same card, one
   shade warmer, so the eye lands on it first and then moves right through
   the two paid ones. */

/* The Latvia band carries its signs the way the rest of the page does -
   washed into the paper rather than sitting beside the words. Three of
   them, unevenly placed, at their own sizes and angles. */
.lv-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    url('./art/raksti/jumis.webp'),
    url('./art/raksti/austras-koks.webp'),
    url('./art/raksti/zalktis.webp');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 7% 22%, 91% 74%, 16% 86%;
  background-size: 190px, 150px, 120px;
  opacity: .05;
}
.lv-inner { position: relative; z-index: 1; }
/* The Latvia band keeps its marks on a phone too — two of the three, since
   three at readable size crowd a column this narrow, and the middle one was
   always the quietest. */
@media (max-width: 760px) {
  .lv-band::after {
    background-image:
      url('./art/raksti/jumis.webp'),
      url('./art/raksti/zalktis.webp');
    background-repeat: no-repeat, no-repeat;
    background-position: -14% 6%, 108% 80%;
    background-size: 208px, 168px;
    opacity: .05;
  }
}

/* No text cursor on this page. Nothing here is typed into - there is not a
   single input, textarea or editable element - so a blinking caret can only
   come from the browser's own caret browsing (F7), where it serves no
   purpose on a page with nothing to type. Hidden rather than explained,
   because the owner should not have to explain a browser setting to every
   parent who lands here. Selection itself still works: text can be
   highlighted and copied exactly as before. */
body, .wrap, .hero, .band, .privacy, .lv-band, footer { caret-color: transparent; }

/* ------------------------------------------------------------- the phone
   The page was laid out for a desktop and then squeezed. On a phone the
   hero card covered the whole painting - a parent met a wall of text with
   a hidden picture behind it - and two pixels of overflow put a sideways
   scrollbar under everything. Below 760px the page is rebuilt rather than
   shrunk: the painting gets its own band above the words, the card sits
   flat on the paper beneath it, and the card grids become swipeable rows
   the way a phone expects. */
@media (max-width: 760px) {
  /* `clip`, never `hidden`: overflow-x hidden on html+body silently makes
     BODY the page's scroller in WebKit, and every in-app browser (the
     WhatsApp complaint, 2026-09-01) then glitches — the fixed top bar
     detaches mid-scroll, the page opens part-scrolled, and the burger's
     anchor jumps compensate against a window that never scrolls. `clip`
     forbids the sideways bleed identically but creates NO scroll
     container. The `hidden` line stays first as the fallback for engines
     too old to know `clip` — they keep exactly the behaviour they had. */
  html, body { overflow-x: hidden; overflow-x: clip; }

  /* the hero: picture first, words under it */
  .hero {
    /* NO padding above the picture band.
       This 92px was here from before the band existed, when the hero was
       words on a plain background and needed clearing the floating bar. Now
       ::before draws a picture that is meant to run to the very top and
       behind the bar, and the padding held it 92px down — leaving the bar
       floating over bare background and pushing the headline off the first
       screenful. */
    min-height: 0; background: none; padding-block: 0 var(--s7);
    display: block;
  }
  /* The padding the desktop rule drops comes back on a phone: there it is
     not an alignment against a bar, it is the only thing keeping the card
     off the edge of the screen. */
  .hero-inner { display: block; padding-inline: var(--s4); }
  .hero::before {
    /* 30vh, not 42.
       At 42vh the headline landed 529px down an 844px screen: a parent
       opening the page on a phone saw a picture and had to scroll before
       reading what the thing IS. The picture is worth having and worth
       having first — it is just not worth half the screen. */
    content: ""; display: block;
    /* svh, not vh.
       `vh` resolves against the LARGE viewport — the screen as it is once
       the phone's address bar and toolbar have scrolled away. At page load
       those bars are still showing, so about a hundred pixels of what `vh`
       counted is not actually on screen, and the button below the headline
       sat under the fold. `svh` is the small viewport: the screen as it
       really is at the moment the page opens. */
    /* The band takes WHAT IS LEFT, not a fixed share of the screen.
       A fraction is always wrong on some phone: 42vh buried the button,
       26svh left a third of the screen empty above it. The copy beneath —
       eyebrow, headline, paragraph and BUTTON — measures about 395px, so
       the picture takes the rest and the button is the LAST thing on the
       first screen. The note under it falls below the fold on purpose: a
       half-line of text peeking over the bottom edge reads as broken, while
       a button sitting on the fold reads as an invitation to scroll. */
    height: calc(100vh - 400px);
    height: calc(100svh - 400px);
    /* The ceiling has to be high enough that the rule above still holds on
       a tall phone. At 360px a 800px screen clamped the band, the copy rose
       with it, and the note crept back over the fold. */
    min-height: 130px; max-height: 560px;
    margin: 0 calc(var(--s4) * -1) var(--s5);
    background: url('art/hero-banner.jpg') center 35% / cover no-repeat;
    border-radius: 0 0 26px 26px;
  }
  .hero-copy {
    max-width: none; transform: none; box-shadow: none;
    background: none; padding: 0;
  }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  /* Tighter tracking on a phone: at .18em it adds two and a half pixels to
     every character. The label may wrap, balanced, rather than run off the
     screen: „Latviski un angliski · …" did (2026-09-27), before the owner
     had it replaced with „Veidots Latvijā" the same day. */
  .hero .eyebrow {
    font-size: 12px; letter-spacing: .1em; gap: 7px;
    text-wrap: balance;
  }
  .lead { font-size: 16.5px; }

  /* one swipeable row instead of a tall stack - the phone's own gesture,
     with the cards snapping so a thumb always lands on a whole one */
  .subjects, .steps, .prices, .terms {
    /* the desktop template has to be switched OFF, or its three fixed
       columns keep laying the first three cards out and only the extras
       become carousel width */
    display: grid; grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--s4);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 2px var(--s4) var(--s4);
    margin-inline: calc(var(--s4) * -1);
    scrollbar-width: none;
  }
  .subjects::-webkit-scrollbar,
  .steps::-webkit-scrollbar, .prices::-webkit-scrollbar,
  .terms::-webkit-scrollbar { display: none; }
  .subjects > *, .steps > *, .prices > *, .terms > * {
    scroll-snap-align: center;
    /* ONE CARD PER SWIPE.
       `scroll-snap-type: mandatory` only says where the scroll may COME TO
       REST; a hard flick still carries its momentum past a card or two and
       settles on whichever it reaches. `scroll-snap-stop: always` makes each
       card a wall the scroll cannot pass in one gesture, however hard the
       thumb pushes — which is what a carousel of nine cards needs, because
       skipping two of nine means never knowing what was missed. */
    scroll-snap-stop: always;
  }
  .terms > div { background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r); padding: var(--s4); }

  /* the band pictures stop being postcards and become full-width */
  .band-art img, .lv-art img { width: 100%; transform: none; padding: 6px; }
  .band-head, .band-head.flip { display: block; }
  .band-head .band-art { margin-bottom: var(--s5); }

  .lv-signs { gap: var(--s5); }
  .lv-signs li { width: 72px; }
  .claims { font-size: 14.5px; }
  .cta-row { gap: var(--s4); }
  .btn-lg { width: 100%; }
}

/* A hint that a row can be swiped: the last card is nudged in from the edge
   so a sliver of the next one always shows. */
@media (max-width: 760px) {
  .subjects::after, .steps::after,
  .prices::after, .terms::after { content: ""; width: 1px; }
}

/* ---- the phone's menu ---------------------------------------------------
   Three lines that become a panel. Hidden entirely on a desktop, where the
   nav lays itself out across the bar as before. */
.burger { display: none; }
/* 960px, the SAME width at which .topnav hides.
   These were 900 and 960, and between the two the desktop nav was already
   display:none while the burger had not yet appeared — sixty pixels of
   window with no navigation at all, on a page whose only way around is the
   nav. Two breakpoints that were always meant to be one number. */
@media (max-width: 960px) {
  .burger {
    display: grid; gap: 5px; align-content: center; justify-items: stretch;
    width: 44px; height: 44px; padding: 11px 10px; margin-left: auto;
    border: 0; border-radius: 12px; background: transparent; cursor: pointer;
    pointer-events: auto;
  }
  .burger span {
    height: 2.5px; border-radius: 2px; background: var(--ink);
    transition: transform .18s ease, opacity .18s ease;
  }
  body.nav-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.nav-open .burger span:nth-child(2) { opacity: 0; }
  body.nav-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .topnav {
    position: absolute; left: 10px; right: 10px; top: calc(100% + 8px);
    display: grid; gap: 2px; padding: var(--s3);
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: 0 18px 44px rgba(35, 47, 78, .22);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: auto;
  }
  body.nav-open .topnav { opacity: 1; visibility: visible; transform: none; }
  .topnav a { padding: var(--s3) var(--s4); border-radius: 12px; font-size: 16px; }
  .topnav a:hover { background: color-mix(in srgb, var(--brick) 8%, transparent); }
  .top-inner > .btn { display: none; }
}

/* ---- the swipe hint ----------------------------------------------------
   A row that scrolls has to say so. The last card is held back from the
   edge so a sliver of the next one always shows, and a soft fade at the
   right edge tells the eye the row continues past the screen. */
@media (max-width: 760px) {
  .subjects, .steps, .prices, .terms {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 82%, transparent 100%);
  }
  .subjects:has(> :last-child:focus-within) {
    -webkit-mask-image: none; mask-image: none;
  }
  /* and a line of dots under each row, one per card */
  .swipe-note {
    display: flex; justify-content: center; gap: 7px;
    margin: calc(var(--s3) * -1) 0 0; padding: 0; list-style: none;
  }
  .swipe-note i {
    width: 6px; height: 6px; border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 22%, transparent);
  }
}
.swipe-note { display: none; }