/* ============================================================
   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.jpg') 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.jpg') 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); }

.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. */
.hero {
  min-height: 100svh;
  display: grid; align-items: center;
  background: url('art/hero-banner.webp') left 30% / cover no-repeat;
  padding-block: 130px 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(24px, 3.5vw, 44px);
  border-radius: var(--r-lg);
  background:
    linear-gradient(rgba(255, 253, 247, .78), rgba(255, 253, 247, .78)),
    url('art/kartes-fons.jpg') 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. */
}
.hero h1 { font-size: clamp(40px, 5.2vw, 66px); margin-top: var(--s4); }

/* 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: var(--s6); font-size: 15px; color: var(--soft);
  border-top: 1px solid var(--line);
}
.claims li {
  padding: 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.jpg') 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: 11px; 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.jpg') 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: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--soft);
}
.price.ready span { color: var(--sage); }
.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); }
.footnav {
  grid-column: 2; grid-row: 1 / span 2;
  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; }

@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; }
  .hero { padding-block: 96px 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; }
}

/* The pet band: each card is one thing a child actually does with the
   animal, and the icons above it are the very pictures the app shows —
   food he can drag, hats he can buy, the rooms that open as he grows. */
.pet-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s5); margin-top: var(--s7);
}
.pet-card {
  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);
}
/* One row, always. The card with five pictures used to wrap onto a second
   line, which pushed its heading 66px below every other card's - six cards
   that should read as a set instead read as a ragged column. The strip has
   a fixed height and never wraps, so every heading and every sentence
   starts on the same line across the grid. */
.pet-icons {
  display: flex; flex-wrap: nowrap; gap: var(--s3); align-items: center;
  height: 52px;
}
.pet-icons img {
  width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(61, 44, 26, .16));
}
.pet-card h3 { min-height: 2.4em; display: flex; align-items: flex-end; }
.pet-card h3 { font-size: 20px; }
.pet-card p { font-size: 15px; color: var(--soft); }
@media (max-width: 900px) {
  .pet-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .pet-grid { grid-template-columns: 1fr; }
}

/* The living-room fox: the app's own faces, played as a silent film inside
   the band's picture. Never interactive — pointer events stay off so the
   page behaves like a page. The scene copies the picture's own tilt (and
   its 10px mat) so the fox stands IN the room rather than beside it, and
   every rule here out-specifies `.band-art img`, which would otherwise
   stretch a fox face to the full width of the wall. */
.fox-stage { position: relative; }
.fox-scene {
  position: absolute; inset: 10px; pointer-events: none;
  transform: rotate(1deg);
  border-radius: 14px; overflow: hidden;
}
.paper2 .fox-scene { transform: rotate(1deg); }
.fox-scene img.fox-face {
  position: absolute; left: 57%; bottom: 6%;
  width: 30%; height: auto; aspect-ratio: 1; object-fit: contain;
  margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0;
  transform: translateX(-50%);
  animation: fox-bob 3.4s ease-in-out infinite;
  filter: drop-shadow(0 10px 16px rgba(61, 44, 26, .25));
}
.fox-scene img.fox-prop {
  position: absolute; bottom: 10%; width: 13%; height: auto; aspect-ratio: 1;
  object-fit: contain; opacity: 0; transition: opacity .45s ease;
  margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0;
  transform: none;
  filter: drop-shadow(0 6px 10px rgba(61, 44, 26, .22));
}
.fox-scene img.fox-prop-left { left: 30%; }
.fox-scene img.fox-prop-right { right: 16%; }
@keyframes fox-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-2.2%); }
}
.fox-fx { position: absolute; left: 57%; bottom: 34%; width: 0; height: 0; }
.fox-mark {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  opacity: 0; animation: fox-rise 1.3s ease-out forwards;
}
.fox-mark-crumb { background: #c98a4b; width: 7px; height: 7px; }
.fox-mark-bubble { background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(120, 160, 200, .5); }
.fox-mark-heart { background: #ef7f80; border-radius: 50% 50% 0 50%; transform: rotate(45deg); }
@keyframes fox-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fox-scene img.fox-face { animation: none; }
  .fox-mark { display: none; }
}

/* The wish, in the app's own painted cloud. The chip's placement inside it
   is not guessed: these are the numbers measured off pet-burbulis-doma.png
   for the product itself (apps.css, .maj-doma) — 50% / 53%, 44% wide, the
   centre of the cloud BODY with its two tail dots excluded. One picture,
   one placement, page and product alike. */
.fox-bub {
  /* Up and to the left of the head, the side the painted cloud's own tail
     hangs from — the same relation the desktop corner uses. */
  position: absolute; left: 36%; bottom: 42%;
  width: 21%; aspect-ratio: 1;
  background: url('./art/icons/pet-burbulis-doma.png') center / contain no-repeat;
  filter: drop-shadow(0 6px 12px rgba(61, 44, 26, .28));
  opacity: 0; transform: translateY(6px) scale(.9);
  transition: opacity .45s ease, transform .45s ease;
}
.fox-bub.on { opacity: 1; transform: translateY(0) scale(1); }
.fox-scene .fox-bub > img {
  position: absolute; left: 50%; top: 53%; width: 44%; height: 44%;
  transform: translate(-50%, -50%); object-fit: contain;
  margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
  .fox-bub { transition: none; }
}

/* 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.png') 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: 11.5px; 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 { position: relative; overflow: hidden; }
#programma::after, #macas::after, #milulis::after, #telefons::after,
#cena::after, #ekrans::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 > * { 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.png');
  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.png');
  width: 240px; height: 240px; left: 5%; top: 100px; transform: rotate(-6deg);
}
@media (max-width: 760px) {
  #programma::after, #macas::after, #milulis::after,
  #telefons::after, #cena::after, #ekrans::after { display: none; }
}

/* 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. */
.price.free { background: color-mix(in srgb, var(--sun) 10%, var(--card)); }
.price.free i { color: var(--ink); }

/* 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.png'),
    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; }
@media (max-width: 760px) { .lv-band::after { display: none; } }

/* 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) {
  html, body { overflow-x: hidden; }

  /* the hero: picture first, words under it */
  .hero {
    min-height: 0; background: none; padding-block: 92px 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 {
    content: ""; display: block; height: 42vh; min-height: 240px;
    margin: 0 calc(var(--s4) * -1) var(--s5);
    background: url('art/hero-banner.webp') 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); }
  .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 */
  .pet-grid, .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;
  }
  .pet-grid::-webkit-scrollbar, .subjects::-webkit-scrollbar,
  .steps::-webkit-scrollbar, .prices::-webkit-scrollbar,
  .terms::-webkit-scrollbar { display: none; }
  .pet-grid > *, .subjects > *, .steps > *, .prices > *, .terms > * {
    scroll-snap-align: center;
  }
  .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) {
  .pet-grid::after, .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) {
  .pet-grid, .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%);
  }
  .pet-grid:has(> :last-child:focus-within), .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; }