/* Plink's website. Calm and grown-up in its layout (lots of space, warm off-white, one deep plum band),
   playful in its details (the DynaPuff logo, the app's stickers, pinks and butter yellow).
   Colours are the app's own (src/design/tokens.ts in the app repo). */

@font-face { font-family: 'DynaPuff'; src: url('fonts/DynaPuff_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DynaPuff'; src: url('fonts/DynaPuff_700Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --ink: #4a3846;
  --ink-soft: #6b5a66;
  --plum: #3d1272;
  --plum-deep: #2a0b52;
  --purple-bright: #6a2bd9;
  --pink: #f58be4;
  --pink-title: #f7a8f0;
  --pink-bg: #fde4fb;
  --lavender: #efe8ff;
  --lavender-deep: #e2d6ff;
  --yellow: #fae073;
  --yellow-soft: #fdf4cf;
  --green: #a8e3a0;
  --paper: #ffffff;
  --white: #ffffff;
  --line: #e9e1ec;
  --radius: 28px;
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--purple-bright); }

/* DynaPuff only for the logo and the big "3": everything else in the phone's own font, so it reads calm. */
.logo { font-family: 'DynaPuff', -apple-system, sans-serif; }
h1, h2, h3 { color: var(--ink); font-weight: 800; letter-spacing: -0.025em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* The logo: pink letters, plum outline and a soft drop, as in the app. */
.logo {
  display: inline-block;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: var(--pink);
  -webkit-text-stroke: 3.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(74, 56, 70, 0.16);
  text-decoration: none;
}

/* Small label over a heading. */
.eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-bright);
  margin-bottom: 14px;
}

/* Buttons: the app's chunky press, quieter. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.btn.green { background: var(--green); }
.btn.ghost {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
  color: var(--purple-bright);
  padding-left: 6px;
  padding-right: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 17px;
}
.btn.ghost:hover { transform: none; text-decoration: underline; }

/* Store buttons: dark and calm, "coming soon" until the app is out. */
.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 16px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  min-width: 190px;
}
.store svg { width: 26px; height: 26px; flex: none; }
.store small { display: block; font-size: 12px; opacity: 0.75; line-height: 1.2; }
.store strong { display: block; font-size: 18px; line-height: 1.2; font-weight: 600; }

/* Top bar */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav ul a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; }
.nav ul a:hover { color: var(--purple-bright); }
.nav .btn { padding: 10px 18px; font-size: 14px; box-shadow: 0 3px 0 var(--ink); }

/* Hero */
.hero { padding: 56px 0 90px; overflow: hidden; background: var(--plum); }
.hero h1 { color: var(--white); }
.hero .btn.ghost { color: var(--pink-title); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(42px, 5.4vw, 66px); line-height: 1.04; margin: 0 0 34px; }
.hero p.lead { font-size: 21px; color: var(--ink-soft); margin: 0 0 34px; max-width: 520px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero .note { margin-top: 18px; font-size: 15px; color: var(--ink-soft); }

/* The hero picture: the phone on a soft lavender blob, a few stickers around it. */
.stage { position: relative; display: grid; place-items: center; min-height: 560px; }
.stage::before {
  content: '';
  position: absolute;
  inset: 4% 2% 2% 6%;
  border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%;
  background: radial-gradient(circle at 35% 30%, #6a3fb0 0%, #55249a 50%, #4a1a8a 100%);
}
.stage .phone { position: relative; width: 290px; transform: rotate(-3deg); background: #1d0738; }
.stage .sticker { position: absolute; filter: drop-shadow(0 6px 10px rgba(61, 18, 114, 0.12)); }
.stage .s-coins { width: 150px; left: 2%; bottom: 8%; }
.stage .s-star { width: 96px; right: 6%; top: 6%; transform: rotate(14deg); }
.stage .s-pig { width: 74px; right: 2%; bottom: 22%; transform: rotate(-8deg); }

/* A screenshot in a drawn phone. */
.phone { padding: 10px; border-radius: 48px; background: var(--ink); box-shadow: 0 30px 60px -20px rgba(61, 18, 114, 0.35); }
.phone img { display: block; width: 100%; height: auto; border-radius: 38px; }

/* The trust strip under the hero. */
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.facts ul { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px 28px; list-style: none; margin: 0; padding: 26px 0; }
.facts li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
.facts .tick {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--ink);
  font-size: 14px;
  line-height: 1;
}

/* Sections */
section.block { padding: 120px 0; }
.center { text-align: center; }
h2 { font-size: clamp(34px, 3.8vw, 48px); line-height: 1.08; margin: 0 0 18px; }
p.sub { font-size: 20px; color: var(--ink-soft); max-width: 640px; margin: 0 auto; }

/* Alternating picture and text, each on a full-width band of its own colour. */
#sa-funkar-det .intro { padding: 20px 28px 70px; }
#sa-funkar-det h2 { margin: 0; }
.tint { padding: 90px 0; }
.tint.white { background: var(--white); }
#sa-funkar-det .intro { max-width: none; margin: 0 auto; }
#sa-funkar-det .intro h2 { color: var(--pink-title); }
.tint.purple { background: var(--plum); }
.tint.purple h3 { color: var(--pink-title); }
.tint.purple p { color: #e6dcff; }
.tint.purple .phone { background: #1d0738; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.row.flip .pic { order: 2; }
.row .pic { position: relative; display: grid; place-items: center; }
.row .pic .phone { width: 260px; border-radius: 42px; padding: 9px; }
.row .pic .phone img { border-radius: 33px; }
.row .pic .sticker {
  position: absolute;
  width: 84px;
  top: -10px;
  right: 18%;
  transform: rotate(10deg);
  filter: drop-shadow(0 6px 10px rgba(61, 18, 114, 0.12));
}
.row h3 { font-size: clamp(28px, 3vw, 38px); line-height: 1.12; margin: 0 0 16px; }
.row p { color: var(--ink-soft); font-size: 19px; margin: 0 0 14px; }
.row ul { margin: 18px 0 0; padding: 0; list-style: none; }
.row li { position: relative; padding-left: 30px; margin: 10px 0; }
.row li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pink);
  border: 2px solid var(--ink);
}

/* "You are the bank": a full-width white section after the last purple band. */
.band { background: var(--white); padding: 110px 0; position: relative; overflow: hidden; }
.band .grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px; align-items: center; }
.band p { color: var(--ink-soft); font-size: 19px; }
.band .points { display: grid; gap: 14px; }
.band .point { background: var(--lavender); border-radius: 18px; padding: 18px 22px; }
.band .point strong { display: block; color: var(--ink); font-size: 18px; }
.band .s-coin { position: absolute; width: 110px; right: 4%; bottom: 30px; transform: rotate(-12deg); }

/* Grown-ups' features: white cards on a purple band. */
#for-foraldrar { background: var(--plum); }
#for-foraldrar h2 { color: var(--pink-title); }
#for-foraldrar .card { border-color: transparent; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 60px; }
.card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 30px 28px 32px; }
.card .icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 2px solid var(--ink);
  font-size: 24px;
  margin-bottom: 18px;
}
.card h3 { font-size: 21px; margin: 0 0 8px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 17px; }

/* Getting started: three numbered steps. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 60px; }
.step { position: relative; background: var(--white); border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 34px 28px 30px; }
.step .num {
  position: absolute;
  top: -22px;
  left: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  border: 2.5px solid var(--ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 19px;
}
.step h3 { font-size: 21px; margin: 6px 0 8px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 17px; }

/* FAQ */
.faq { max-width: 820px; margin: 56px auto 0; }
.faq details { border-bottom: 1.5px solid var(--line); padding: 6px 0; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  font-weight: 600;
  font-size: 19px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--pink-bg); }
.faq details p { margin: 0 0 20px; color: var(--ink-soft); max-width: 700px; }

/* Download: "Be one of the first", with a QR code per store. */
.final { text-align: center; background: var(--yellow-soft); border-radius: 48px; margin: 0 20px; padding: 90px 28px 96px; }
.final .confetti { width: 96px; margin-bottom: 8px; }
.qrs { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin-top: 46px; }
.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  width: 260px;
}
/* The QR code's place: an image when the store link exists (img/qr-app-store.png, img/qr-google-play.png),
   until then a dashed square saying it's coming. */
.qr {
  width: 180px;
  height: 180px;
  border-radius: 18px;
  display: grid;
  place-items: center;
}
.qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.qr.soon {
  border: 2.5px dashed #cbbfd0;
  background: repeating-linear-gradient(45deg, #fbf7fc, #fbf7fc 10px, #f6f0f8 10px, #f6f0f8 20px);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  padding: 18px;
}
.qr-card .store { min-width: 0; width: 100%; justify-content: center; }
.final .later { margin-top: 30px; font-size: 16px; color: var(--ink-soft); }

/* Footer */
footer { padding: 90px 0 50px; font-size: 16px; color: var(--ink-soft); }
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
footer h4 { margin: 0 0 14px; color: var(--ink); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin: 8px 0; }
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--purple-bright); text-decoration: underline; }
footer .about p { margin: 14px 0 0; max-width: 300px; }
footer .legal {
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
}

/* The privacy page: one readable column. */
.doc { max-width: 760px; margin: 40px auto 20px; }
.doc h1 { font-size: clamp(36px, 4vw, 52px); line-height: 1.08; margin: 0 0 10px; }
.doc h2 { font-size: 24px; margin: 44px 0 10px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc .updated { font-size: 15px; margin: 0 0 30px; }
.doc .summary { background: var(--lavender); border-radius: 24px; padding: 22px 26px; color: var(--ink); }

@media (max-width: 960px) {
  .nav ul { display: none; }
  .hero .wrap, .row, .band .grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding-top: 30px; text-align: center; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero .actions { justify-content: center; }
  .stage { min-height: 500px; }
  .tint { padding: 64px 0; }
  #sa-funkar-det .intro { padding: 80px 20px 44px; }
  .row .pic .sticker { right: 8%; }
  .row.flip .pic { order: 0; }
  .cards, .steps { grid-template-columns: 1fr; }
  .steps { gap: 40px; }
  section.block { padding: 80px 0; }
  .final { margin: 0 10px; border-radius: 36px; }
  .band { padding: 70px 0; }
  .band .s-coin { display: none; }
  footer .cols { grid-template-columns: 1fr 1fr; }
  footer .about { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 20px; }
  .stage { min-height: 440px; }
  .stage .phone { width: 230px; }
  .stage .s-coins { width: 110px; }
  .stage .s-star { width: 72px; }
  .stage .s-pig { width: 56px; }
  .row .pic .phone { width: 210px; }
  .facts ul { justify-content: flex-start; }
}

/* Why start young: the big "3", then the text. */
.early { padding: 110px 0; }
.early-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; align-items: center; }
.early .age {
  position: relative;
  aspect-ratio: 1;
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--pink-bg);
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 14%;
}
.early .big {
  font-family: 'DynaPuff', sans-serif;
  font-weight: 700;
  font-size: 200px;
  line-height: 1;
  color: var(--pink);
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 8px 0 rgba(74, 56, 70, 0.14);
}
.early .small { font-family: 'DynaPuff', sans-serif; font-weight: 700; font-size: 44px; margin-left: 10px; }
.early .age img { position: absolute; width: 80px; right: 6%; bottom: 10%; transform: rotate(-10deg); }
.early h2 { text-align: left; }
.early p { color: var(--ink-soft); font-size: 19px; margin: 0 0 14px; }
.early p.source { font-size: 15px; margin-top: 20px; }
@media (max-width: 960px) {
  .early { padding: 80px 0; }
  .early-grid { grid-template-columns: 1fr; gap: 40px; }
  .early .age { max-width: 280px; }
  .early .big { font-size: 150px; -webkit-text-stroke-width: 6px; }
}

/* "Pengars värde, genom lek": the app's drag, drawn without a phone. A finger presses a coin, carries it in
   an arc to the pig, the coin drops in and the pig hops; then it starts over. 3.6 s a round. */
.row > * { min-width: 0; }
.drag-demo { position: relative; width: 100%; max-width: 440px; aspect-ratio: 440 / 260; }
.drag-demo .pig { position: absolute; right: 0; bottom: 6%; width: 50%; transform-origin: 50% 100%; animation: pig-hop 3.6s ease-in-out infinite; }
.drag-demo .hand { position: absolute; z-index: 1; left: 2%; top: 44%; width: 22%; animation: carry 3.6s ease-in-out infinite; }
.drag-demo .coin { display: block; width: 100%; animation: drop 3.6s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(61, 18, 114, 0.15)); }
/* Fingertip on the coin's middle (the tip is at 16,3 in the drawing). */
.drag-demo .finger { position: absolute; left: 30%; top: 46%; width: 72%; animation: finger 3.6s ease-in-out infinite; }

@keyframes carry {
  0%, 18% { transform: translate(0, 0); }
  38% { transform: translate(150%, -175%); }
  54% { transform: translate(293%, -128%); }
  100% { transform: translate(293%, -128%); }
}
/* Over the slot, the coin sinks into it and is gone. */
@keyframes drop {
  0%, 56% { transform: translateY(0) scale(1); opacity: 1; }
  66% { transform: translateY(42%) scale(0.45, 0.2); opacity: 0; }
  100% { transform: translateY(42%) scale(0.45, 0.2); opacity: 0; }
}
@keyframes finger {
  0% { transform: translate(-30%, 60%); opacity: 0; }
  10% { transform: translate(-30%, 60%); opacity: 1; }
  18%, 54% { transform: translate(0, 0); opacity: 1; }
  62%, 100% { transform: translate(0, -10%); opacity: 0; }
}
@keyframes pig-hop {
  0%, 62% { transform: translateY(0) scale(1); }
  68% { transform: translateY(-8%) scale(1.04, 0.97); }
  74% { transform: translateY(0) scale(0.98, 1.03); }
  80%, 100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .drag-demo .pig, .drag-demo .hand, .drag-demo .coin, .drag-demo .finger { animation: none; }
  .drag-demo .hand { transform: translate(120%, -40%); }
}

/* The download row right after the hero: the heading on the left, the two QR cards on the right. */
.qr-strip { padding: 64px 0; background: var(--white); }
.qr-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.qr-strip h2 { margin: 0 0 6px; font-size: clamp(30px, 3vw, 40px); }
.qr-strip p { margin: 0; color: var(--ink-soft); font-size: 19px; }
.qr-strip .qrs { margin: 0; gap: 20px; }
.qr-strip .qr-card { width: 220px; padding: 20px 20px 18px; gap: 14px; }
.qr-strip .qr { width: 150px; height: 150px; }
@media (max-width: 960px) {
  .qr-strip .wrap { flex-direction: column; text-align: center; }
  .qr-strip .qr-card { width: 170px; padding: 16px; }
  .qr-strip .qr { width: 120px; height: 120px; font-size: 13px; }
  .qr-strip .store { min-width: 0; padding: 8px 10px; }
  .qr-strip .store strong { font-size: 15px; }
}

/* On a phone a QR code can't be scanned (it's the phone you'd scan with): just the two store buttons. */
@media (max-width: 600px) {
  .qr { display: none !important; }
  .qrs { flex-wrap: nowrap; gap: 10px !important; }
  .qr-card, .qr-strip .qr-card { width: auto; flex: 1; border: 0; padding: 0; background: transparent; }
  .qr-card .store { padding: 10px 12px; gap: 8px; }
  .qr-card .store svg { width: 22px; height: 22px; }
  .qr-card .store strong { font-size: 15px; }
  .qr-card .store small { font-size: 11px; }
}

/* Trust bar icons: the app's own line icons, each on a soft colour. */
.facts .ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.facts .ic svg { width: 22px; height: 22px; }

/* "Anpassad för de minsta": four short points, two by two. */
.made-for { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.made-for li { display: flex; align-items: center; gap: 12px; background: var(--lavender); border-radius: 16px; padding: 14px 16px; font-weight: 600; font-size: 17px; }
.made-for .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); flex: none; }
.made-for .ic svg { width: 19px; height: 19px; }
@media (max-width: 480px) { .made-for { grid-template-columns: 1fr; } }

.facts .ic img { width: 24px; height: auto; }

/* The top QR cards sit half on the purple hero, half on the white below. */
.hero { padding-bottom: 170px; }
.qr-strip { padding: 0 0 56px; position: relative; z-index: 2; }
.qr-strip .wrap { justify-content: center; }
.qr-strip .qrs { margin-top: -140px; }
.qr-strip .qr-card { box-shadow: 0 24px 40px -18px rgba(29, 7, 56, 0.45); }
@media (max-width: 600px) {
  .hero { padding-bottom: 90px; }
  .qr-strip .qrs { margin-top: -34px; width: 100%; }
  .qr-strip .qr-card { box-shadow: none; }
  .qr-strip { padding-bottom: 40px; }
}

/* Fewer colours: purple and white bands, one lavender for every small fill, pink only as an accent,
   green only on the main buttons. */
.facts .ic, .cards .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lavender); border: 0; flex: none; }
.facts .ic svg, .cards .ic svg { width: 22px; height: 22px; }
.cards .ic { margin-bottom: 18px; }
.made-for .ic { border: 0; }
.made-for.one { grid-template-columns: 1fr; margin: 0; }
.early .age { background: var(--lavender); }
.final { background: var(--plum); border-radius: 0; margin: 0; padding: 110px 28px; }
.final h2 { color: var(--pink-title); }
.final p.sub, .final .later { color: #e6dcff; }
.final .later a { color: var(--pink-title); }
.final .qr-card { border-color: transparent; }
.row .pic .drag-demo { margin: 0 auto; }

/* A soft gradient on every band: purple drifts a little lighter toward the bottom right, white toward a
   whisper of lavender. Gentle enough that the bands still read as purple and white. */
:root {
  --grad-purple: linear-gradient(160deg, #36106a 0%, #3d1272 45%, #4d1d8e 100%);
  --grad-white: linear-gradient(170deg, #ffffff 0%, #ffffff 40%, #f7f3ff 100%);
}
.hero, .tint.purple, #for-foraldrar, .final { background: var(--grad-purple); }
.tint.white, .band, .early, #fragor, .qr-strip, .facts { background: var(--grad-white); }
.facts { background: #fff; }

/* Phones lean toward their text. */
.stage .phone { transform: rotate(6deg); }
.row .pic .phone { transform: rotate(-6deg); }
.row.flip .pic .phone { transform: rotate(6deg); }
@media (max-width: 960px) {
  .row .pic .phone, .row.flip .pic .phone { transform: rotate(3deg); }
  .stage .phone { transform: rotate(4deg); }
}

/* The menu: the app's dark purple (its tab bar) as frosted glass. */
.nav {
  background: rgba(42, 11, 82, 0.9);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  border-bottom: 1px solid rgba(247, 168, 240, 0.14);
}
.nav ul a { color: #efe6ff; }
.nav ul a:hover { color: var(--pink-title); }
.nav .logo { -webkit-text-stroke-color: #1d0738; text-shadow: none; }
.nav .btn { box-shadow: 0 3px 0 #1d0738; border-color: #1d0738; }

/* No green on the site: on purple, the main buttons are white with the app's purple text. */
.btn.green { background: var(--white); color: var(--plum); border-color: #1d0738; box-shadow: 0 4px 0 #1d0738; }
.btn.green:hover { box-shadow: 0 2px 0 #1d0738; }

/* "Anpassad för de minsta": a scrapbook page. The photo as a sticker (white edge), tilted, with the pig's
   heart and star eyes stuck around it and a round "3 år" sticker. */
.scrap { position: relative; max-width: 440px; width: 100%; margin: 0 auto; }
.scrap .photo { display: block; width: 100%; height: auto; transform: rotate(-3deg); filter: drop-shadow(0 18px 24px rgba(61, 18, 114, 0.18)); }
.scrap .st { position: absolute; filter: drop-shadow(0 4px 6px rgba(61, 18, 114, 0.18)); }
.scrap .h1 { width: 74px; top: 4%; left: 2%; transform: rotate(-14deg); }
.scrap .h2 { width: 46px; top: 22%; left: -4%; transform: rotate(12deg); }
.scrap .s1 { width: 70px; top: -2%; right: 4%; transform: rotate(10deg); }
.scrap .s2 { width: 42px; bottom: 16%; right: -3%; transform: rotate(-8deg); }
.scrap .badge {
  position: absolute;
  left: -2%;
  bottom: 6%;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 7px var(--white), 0 10px 18px rgba(61, 18, 114, 0.2);
  display: grid;
  place-items: center;
  align-content: center;
  transform: rotate(-10deg);
  font-family: 'DynaPuff', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}
.scrap .badge b {
  display: block;
  font-size: 50px;
  color: var(--pink);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}
@media (max-width: 960px) {
  .scrap { max-width: 340px; }
  .scrap .badge { width: 84px; height: 84px; font-size: 18px; }
  .scrap .badge b { font-size: 40px; }
}

/* Wobbly section edges, like the app's hand-drawn cards: each purple band is cut along an uneven line at
   its top and bottom (a mask, so the gradient runs right up to the edge). The hero only at the bottom:
   its top is under the menu. */
.tint.purple, #for-foraldrar, .final {
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C 90 9, 170 21, 260 15 S 430 6, 540 13 S 720 22, 830 14 S 1010 7, 1100 15 S 1170 18, 1200 12 V28 H0 Z'/%3E%3C/svg%3E") top / 100% 28px no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 54px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 12 C 110 20, 200 7, 320 14 S 490 22, 600 13 S 780 6, 900 15 S 1080 21, 1200 11 V0 H0 Z'/%3E%3C/svg%3E") bottom / 100% 28px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C 90 9, 170 21, 260 15 S 430 6, 540 13 S 720 22, 830 14 S 1010 7, 1100 15 S 1170 18, 1200 12 V28 H0 Z'/%3E%3C/svg%3E") top / 100% 28px no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 54px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 12 C 110 20, 200 7, 320 14 S 490 22, 600 13 S 780 6, 900 15 S 1080 21, 1200 11 V0 H0 Z'/%3E%3C/svg%3E") bottom / 100% 28px no-repeat;
}
/* The bands overlap a little, so the white shows only where the wobble dips. */
.tint.purple, #for-foraldrar, .final { margin-top: -14px; margin-bottom: -14px; position: relative; z-index: 1; }
.hero {
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 27px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 13 C 120 21, 230 8, 350 15 S 520 22, 640 12 S 820 6, 940 14 S 1100 20, 1200 12 V0 H0 Z'/%3E%3C/svg%3E") bottom / 100% 28px no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 27px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 13 C 120 21, 230 8, 350 15 S 520 22, 640 12 S 820 6, 940 14 S 1100 20, 1200 12 V0 H0 Z'/%3E%3C/svg%3E") bottom / 100% 28px no-repeat;
}

/* The photo mirrored, so the mother looks toward the text; the stickers swap sides with her. */
.scrap .photo { transform: scaleX(-1) rotate(-3deg); }
.scrap .h1 { left: auto; right: 2%; }
.scrap .h2 { left: auto; right: -4%; }
.scrap .s1 { right: auto; left: 4%; }
.scrap .s2 { right: auto; left: -3%; bottom: 34%; }
.scrap .badge { left: auto; right: -2%; }
.scrap .badge { right: auto; left: -4%; bottom: 4%; }

/* The photo stands on the section's bottom edge, its lower part hidden behind the purple band below,
   as if peeking up from it. */
.early { padding-bottom: 0; overflow: hidden; }
.early-grid { align-items: end; }
.early-grid > div:last-child { align-self: center; padding-bottom: 110px; }
.scrap { margin-bottom: -70px; }
.scrap .photo { transform: scaleX(-1); }
.scrap .badge { left: -4%; bottom: auto; top: 46%; }
.scrap .s2 { bottom: auto; top: 30%; left: auto; right: -2%; }
@media (max-width: 960px) {
  .early-grid > div:last-child { order: -1; padding-bottom: 0; }
  .scrap { margin-bottom: -50px; }
}

/* Bigger, and sunk deeper: none of the photo's bottom edge shows. */
.early-grid { grid-template-columns: 1fr 1fr; }
.scrap { max-width: 560px; margin-bottom: -170px; }
@media (max-width: 960px) {
  .scrap { max-width: 420px; margin-bottom: -120px; }
}
@media (max-width: 960px) {
  .early-grid { grid-template-columns: 1fr; }
}

/* Back to the whole photo (background and all): a rounded photo with a white print edge, the stickers
   stuck on top of it. Still standing on the section's bottom edge. */
.scrap .photo {
  transform: scaleX(-1);
  border-radius: 28px;
  border: 10px solid var(--white);
  box-shadow: 0 20px 40px -14px rgba(61, 18, 114, 0.3);
  filter: none;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
}
.scrap .h1 { top: 6%; right: -3%; }
.scrap .h2 { top: 20%; right: -6%; }
.scrap .s1 { top: -3%; left: -4%; }
.scrap .s2 { top: 30%; right: -5%; }
.scrap .badge { top: 40%; left: -6%; width: 116px; height: 116px; gap: 2px; }
.scrap .badge small { font-size: 16px; font-weight: 700; }
.scrap .badge b { font-size: 46px; }
@media (max-width: 960px) {
  .scrap .badge { width: 92px; height: 92px; left: -3%; }
  .scrap .badge small { font-size: 13px; }
  .scrap .badge b { font-size: 36px; }
  .scrap .h1, .scrap .h2, .scrap .s2 { right: -1%; }
  .scrap .s1 { left: -1%; }
}
/* Show the girl's hands and the phone; the bottom edge still hides behind the purple band. */
.scrap { margin-bottom: -40px; }
.scrap .photo { object-position: 50% 62%; }
@media (max-width: 960px) { .scrap { margin-bottom: -36px; } }

/* The photo fills the section's whole left half, edge to edge and top to bottom; the text sits in the
   right half. The purple band's wobble cuts its bottom. */
.early { position: relative; padding: 130px 0 150px; overflow: hidden; }
.early-grid { grid-template-columns: 1fr 1fr; align-items: center; }
.early-grid > div:last-child { grid-column: 2; padding: 0 0 0 30px; align-self: center; }
.scrap { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; max-width: none; margin: 0; }
.scrap .photo {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  object-position: 50% 58%;
}
.scrap .s1 { top: 9%; left: 7%; width: 74px; }
.scrap .h1 { top: 8%; right: 8%; left: auto; width: 76px; }
.scrap .h2 { top: 21%; right: 5%; left: auto; width: 46px; }
.scrap .s2 { top: 31%; right: 10%; left: auto; width: 42px; }
.scrap .badge { top: auto; bottom: 16%; left: 7%; }
@media (max-width: 960px) {
  .early { padding: 80px 0 0; }
  .early-grid { grid-template-columns: 1fr; }
  .early-grid > div:last-child { grid-column: 1; padding: 0; }
  .scrap { position: relative; width: auto; height: 440px; margin: 40px -20px 0; }
  .scrap .badge { bottom: 14%; }
}

/* The purple bands overlap their neighbours by the wobble's full height (28px), so where the wobble dips
   you see the section next to it (the photo, the white), never a gap. */
.tint.purple, #for-foraldrar, .final { margin-top: -28px; margin-bottom: -28px; }
.early, .tint.white, .band, #fragor, footer { position: relative; }

/* "Lär sig räkna": the app's intro, in CSS. The pig walks in from the right in four hops (waddling one way,
   then the other), settles, a coin is tossed up and falls, spinning, into its slot (behind the pig, so it
   disappears inside), and the pig squashes as it takes it. 5 s loop; still under reduced motion. */
.walk-demo { position: relative; width: 100%; max-width: 440px; aspect-ratio: 440 / 320; margin: 0 auto; }
.walker { position: absolute; left: 22%; bottom: 8%; width: 56%; aspect-ratio: 368 / 292; animation: walk 5s infinite; }
.walker .bob { position: relative; z-index: 1; transform-origin: 50% 100%; animation: bob 5s infinite; }
.walker .bob img { display: block; width: 100%; }
/* The slot is at 57% across, 9% down the pig. */
.walker .coin { position: absolute; z-index: 0; left: 46%; top: 7%; width: 22%; opacity: 0; animation: coin-in 5s infinite; filter: drop-shadow(0 6px 8px rgba(61, 18, 114, 0.15)); }
.walker .shade { position: absolute; left: 12%; right: 12%; bottom: -5%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(61, 18, 114, 0.22), transparent); animation: shade 5s infinite; }

@keyframes walk {
  0% { transform: translateX(80%); opacity: 0; }
  4% { opacity: 1; }
  6% { transform: translateX(80%); animation-timing-function: ease-in-out; }
  14% { transform: translateX(60%); animation-timing-function: ease-in-out; }
  22% { transform: translateX(40%); animation-timing-function: ease-in-out; }
  30% { transform: translateX(20%); animation-timing-function: ease-in-out; }
  38%, 88% { transform: translateX(0); opacity: 1; }
  96%, 100% { transform: translateX(0); opacity: 0; }
}
/* A hop on each step (crouch, up, land squashed), leaning left, right, left, right; then a little settle
   bob, and the big squash as the coin goes in (at 64%). */
@keyframes bob {
  0%, 6% { transform: none; }
  8% { transform: translateY(-14%) rotate(-5deg) scale(0.96, 1.05); }
  12% { transform: translateY(2%) scale(1.06, 0.94); }
  14% { transform: none; }
  16% { transform: translateY(-14%) rotate(5deg) scale(0.96, 1.05); }
  20% { transform: translateY(2%) scale(1.06, 0.94); }
  22% { transform: none; }
  24% { transform: translateY(-14%) rotate(-5deg) scale(0.96, 1.05); }
  28% { transform: translateY(2%) scale(1.06, 0.94); }
  30% { transform: none; }
  32% { transform: translateY(-14%) rotate(5deg) scale(0.96, 1.05); }
  36% { transform: translateY(2%) scale(1.06, 0.94); }
  38% { transform: none; }
  41% { transform: translateY(-6%) scale(0.98, 1.02); }
  44%, 63% { transform: none; }
  65% { transform: translateY(2%) scale(1.12, 0.88); }
  69% { transform: translateY(-2%) scale(0.95, 1.06); }
  73% { transform: scale(1.03, 0.97); }
  77%, 100% { transform: none; }
}
/* The shadow on the ground: paler and wider while the pig is in the air. */
@keyframes shade {
  0%, 6%, 12%, 14%, 20%, 22%, 28%, 30%, 36%, 38%, 100% { transform: none; opacity: 1; }
  8%, 16%, 24%, 32% { transform: scaleX(0.8); opacity: 0.5; }
}
/* Tossed up, then falling faster and faster, two turns on the way, into the slot (64%). */
@keyframes coin-in {
  0%, 46% { transform: translateY(-260%) scaleX(1); opacity: 0; }
  48% { transform: translateY(-260%) scaleX(1); opacity: 1; animation-timing-function: ease-out; }
  53% { transform: translateY(-340%) scaleX(0.15); opacity: 1; animation-timing-function: ease-in; }
  58% { transform: translateY(-170%) scaleX(1); opacity: 1; animation-timing-function: ease-in; }
  61% { transform: translateY(-60%) scaleX(0.15); opacity: 1; animation-timing-function: ease-in; }
  64% { transform: translateY(40%) scaleX(1); opacity: 1; }
  65%, 100% { transform: translateY(40%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .walker, .walker .bob, .walker .coin, .walker .shade { animation: none; }
}
/* It walks in from just inside the box (no sideways scroll on phones), a shorter way, as in the app. */
.walk-demo { overflow: hidden; }
.walker .coin { left: 44%; width: 26%; }
@keyframes walk {
  0% { transform: translateX(36%); opacity: 0; }
  5% { opacity: 1; }
  6% { transform: translateX(36%); animation-timing-function: ease-in-out; }
  14% { transform: translateX(27%); animation-timing-function: ease-in-out; }
  22% { transform: translateX(18%); animation-timing-function: ease-in-out; }
  30% { transform: translateX(9%); animation-timing-function: ease-in-out; }
  38%, 88% { transform: translateX(0); opacity: 1; }
  96%, 100% { transform: translateX(0); opacity: 0; }
}

/* "Appen som pratar": the boy fills the section's right half, edge to edge, the stickers on top (a speech
   bubble: the app saying the money's name). The text in the left half. */
.talk { position: relative; overflow: hidden; padding: 150px 0; }
.talk .row { grid-template-columns: 1fr 1fr; }
.talk .row > div { padding-right: 40px; }
.scrap.boy { position: absolute; top: 0; bottom: 0; right: 0; left: 50%; width: auto; max-width: none; margin: 0; }
.scrap.boy .photo { width: 100%; height: 100%; transform: none; border: 0; border-radius: 0; box-shadow: none; filter: none; aspect-ratio: auto; object-fit: cover; object-position: 62% 40%; }
.scrap.boy .s1 { top: 12%; left: 8%; right: auto; width: 70px; transform: rotate(-10deg); }
.scrap.boy .h1 { top: 14%; right: 9%; left: auto; width: 72px; transform: rotate(12deg); }
.scrap.boy .s2 { top: auto; bottom: 18%; right: 7%; left: auto; width: 46px; }
.scrap .bubble {
  position: absolute;
  left: 7%;
  top: 44%;
  padding: 14px 22px;
  border-radius: 26px;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 7px var(--white), 0 10px 18px rgba(61, 18, 114, 0.2);
  transform: rotate(-6deg);
  font-family: 'DynaPuff', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--ink);
  white-space: nowrap;
}
/* Its tail, pointing at the phone. */
.scrap .bubble::after {
  content: '';
  position: absolute;
  right: -14px;
  bottom: 12px;
  width: 22px;
  height: 22px;
  background: var(--white);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg);
}
@media (max-width: 960px) {
  .talk { padding: 80px 0 0; }
  .talk .row { grid-template-columns: 1fr; }
  .talk .row > div { padding: 0; }
  .scrap.boy { position: relative; left: auto; height: 380px; margin-top: 40px; }
  .talk { display: flex; flex-direction: column-reverse; }
  .scrap .bubble { font-size: 19px; padding: 10px 16px; }
}
@media (max-width: 960px) { .talk > .wrap { width: 100%; box-sizing: border-box; } }

/* "En mobil eller fler": the onboarding drawing alone (its frame and speech bubbles), as a sticker. */
.row .pic .phones { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; transform: rotate(-2deg); filter: drop-shadow(0 18px 28px rgba(16, 4, 34, 0.35)); }
/* "Appen som pratar": taller, so the photo has room. */
.talk { padding: 0; min-height: 640px; display: flex; align-items: center; }
.talk > .wrap { width: 100%; }
@media (max-width: 960px) {
  .talk { min-height: 0; display: flex; flex-direction: column-reverse; align-items: stretch; padding-top: 80px; }
  .scrap.boy { height: 460px; }
}

/* "En mobil eller fler": the onboarding's two phones, drawn as in the app (sizes in the app's units,
   scaled with the box: --u is one unit). */
.two-phones { container-type: inline-size; width: 100%; max-width: 460px; margin: 0 auto; }
.tp { --u: calc(100cqw / 440); position: relative; height: calc(350 * var(--u)); font-size: calc(17 * var(--u) * 1.3); }
.tp-frame { position: absolute; left: calc(30 * var(--u)); top: calc(34 * var(--u)); width: calc(380 * var(--u)); height: calc(290 * var(--u)); overflow: visible; }
.tp-phone { position: absolute; top: calc(90 * var(--u)); width: calc(78 * 1.35 * var(--u)); height: calc(132 * 1.35 * var(--u)); }
.tp-phone.p1 { left: calc(86 * var(--u)); }
.tp-phone.p2 { left: calc(250 * var(--u)); }
.tp-phone .body { position: absolute; inset: 0; width: 100%; height: 100%; }
.tp-phone .screen { position: absolute; inset: 22% 12% 16%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--u)); }
.tp .av { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; background: #fff; border: calc(2.4 * var(--u)) solid #4a3846; box-sizing: border-box; padding: calc(2 * var(--u)); }
.tp .av.small { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.tp-pig { width: calc(62 * var(--u)); height: auto; }
.tp-or { position: absolute; left: 0; right: 0; top: calc(168 * var(--u)); width: max-content; margin: 0 auto; transform: translateX(calc(4 * var(--u))); font-family: 'DynaPuff', sans-serif; font-weight: 700; text-transform: uppercase; color: #5c4a57; font-size: calc(15 * var(--u) * 1.15); }
.tp-bubble { position: absolute; padding: calc(8 * var(--u)) calc(16 * var(--u)); background: #fff; border: calc(2.4 * var(--u)) solid #4a3846; border-radius: calc(24 * var(--u)); font-weight: 700; color: #4a3846; font-size: calc(18 * var(--u)); white-space: nowrap; }
.tp-bubble.b1 { left: calc(6 * var(--u)); top: calc(8 * var(--u)); border-bottom-right-radius: calc(4 * var(--u)); }
.tp-bubble.b2 { right: calc(6 * var(--u)); bottom: calc(10 * var(--u)); border-top-left-radius: calc(4 * var(--u)); }

/* The entrance: the frame pops in, the phones rise one after the other, "eller", the pictures pop onto
   their screens, the pig wiggles, and the speech bubbles land last. */
.two-phones .tp-frame, .two-phones .tp-phone, .two-phones .tp-or, .two-phones .av, .two-phones .tp-pig, .two-phones .tp-bubble {
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.two-phones .tp-frame { transform: scale(0.9); }
.two-phones .tp-phone { transform: translateY(calc(40 * var(--u))) rotate(-4deg); }
.two-phones .tp-phone.p2 { transform: translateY(calc(40 * var(--u))) rotate(4deg); }
.two-phones .tp-or { transform: translateX(calc(4 * var(--u))) scale(0.4); }
.two-phones .av, .two-phones .tp-pig { transform: scale(0.3); }
.two-phones .tp-bubble.b1 { transform: translateY(calc(-24 * var(--u))) rotate(-10deg) scale(0.8); }
.two-phones .tp-bubble.b2 { transform: translateY(calc(24 * var(--u))) rotate(10deg) scale(0.8); }
.two-phones.in .tp-frame, .two-phones.in .tp-phone, .two-phones.in .tp-or, .two-phones.in .av, .two-phones.in .tp-pig, .two-phones.in .tp-bubble { opacity: 1; }
.two-phones.in .tp-frame { transform: none; transition-delay: 0s; }
.two-phones.in .tp-phone.p1 { transform: none; transition-delay: 0.2s; }
.two-phones.in .tp-phone.p2 { transform: none; transition-delay: 0.35s; }
.two-phones.in .tp-or { transform: translateX(calc(4 * var(--u))); transition-delay: 0.55s; }
.two-phones.in .av.a1 { transform: none; transition-delay: 0.7s; }
.two-phones.in .av.a2 { transform: none; transition-delay: 0.8s; }
.two-phones.in .av.a3 { transform: none; transition-delay: 0.9s; }
.two-phones.in .tp-pig { transform: none; transition-delay: 1s; animation: tp-wiggle 0.6s ease-in-out 1.45s; }
.two-phones.in .tp-bubble { transform: none; }
.two-phones.in .tp-bubble.b1 { transition-delay: 1.2s; }
.two-phones.in .tp-bubble.b2 { transition-delay: 1.35s; }
@keyframes tp-wiggle {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -8deg; }
  50% { rotate: 6deg; }
  75% { rotate: -3deg; }
}
@media (prefers-reduced-motion: reduce) {
  .two-phones * { transition: none !important; animation: none !important; }
}

/* "Sysslor för varje ålder": four cards, each an age and three chores with the app's stickers. */
.chores .center p { margin-top: 10px; }
.age-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.age-card { background: var(--grad-white); border: 2px solid #ece6ff; border-radius: 26px; padding: 22px 18px 18px; box-shadow: 0 14px 30px -18px rgba(61, 18, 114, 0.35); }
.age-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #3d1272; color: #fff; font-family: 'DynaPuff', sans-serif; font-weight: 700; font-size: 17px; }
.age-card ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.age-card li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink); font-size: 16px; line-height: 1.25; }
.age-card li img { width: 54px; height: 54px; flex: none; filter: drop-shadow(0 3px 4px rgba(61, 18, 114, 0.15)); }
.age-card:nth-child(odd) { transform: rotate(-1deg); }
.age-card:nth-child(even) { transform: rotate(1deg); }
@media (max-width: 960px) { .age-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .age-cards { grid-template-columns: 1fr; } .age-card { transform: none !important; } }

/* The two phones' frame: no fill, just its wobbly line, light on the purple. */
.tp-frame path { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 2.6; }
.tp-or { color: #efe6ff; }

/* Three age groups now; the sources under them, small. */
.age-cards { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; }
.chores .sources { margin: 28px auto 0; text-align: center; font-size: 14px; color: var(--ink-soft, #5c4a57); }
.chores .sources a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 960px) { .age-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .age-cards { grid-template-columns: 1fr; } }

/* "En mobil eller fler": no frame, the picture bigger. */
.tp-frame { display: none; }
.two-phones { max-width: 600px; }
.row .pic:has(.two-phones) { justify-self: stretch; }
/* The picture gets the wider column; the bubbles sit by the phones now there's no frame. */
.row:has(.two-phones) { grid-template-columns: 1.35fr 1fr; }
.tp { height: calc(330 * var(--u)); }
.tp-phone { top: calc(70 * var(--u)); }
.tp-or { top: calc(148 * var(--u)); }
.tp-bubble.b1 { left: calc(34 * var(--u)); top: calc(30 * var(--u)); }
.tp-bubble.b2 { right: calc(28 * var(--u)); bottom: calc(14 * var(--u)); }
@media (max-width: 960px) { .row:has(.two-phones) { grid-template-columns: 1fr; } }
/* Bigger phones (and what's on their screens). */
.tp { height: calc(370 * var(--u)); }
.tp-phone { top: calc(62 * var(--u)); width: calc(78 * 1.75 * var(--u)); height: calc(132 * 1.75 * var(--u)); }
.tp-phone.p1 { left: calc(48 * var(--u)); }
.tp-phone.p2 { left: calc(256 * var(--u)); }
.tp-or { top: calc(166 * var(--u)); }
.tp .av { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
.tp .av.small { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
.tp-pig { width: calc(82 * var(--u)); }
.tp-bubble.b1 { left: calc(4 * var(--u)); top: calc(18 * var(--u)); }
.tp-bubble.b2 { right: calc(0 * var(--u)); bottom: calc(8 * var(--u)); }

/* "Veckopeng och sysslor": a purple band, three white cards with the app's stickers, a tip and sources. */
.allowance { padding: 110px 0; color: #fff; }
.allowance h2 { color: var(--pink-title); }
.allow-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 900px; margin: 40px auto 0; }
.allow-card { background: #fff; border-radius: 26px; padding: 22px 22px 24px; color: var(--ink); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), 0 18px 30px -16px rgba(16, 4, 34, 0.5); }
.allow-card img { width: 64px; height: 64px; display: block; filter: drop-shadow(0 3px 4px rgba(61, 18, 114, 0.15)); }
.allow-card h3 { margin: 10px 0 6px; font-size: 20px; color: var(--ink); }
.allow-card p { margin: 0; font-size: 16px; line-height: 1.45; color: #5c4a57; }
.allow-card:nth-child(1) { transform: rotate(-1deg); }
.allow-card:nth-child(3) { transform: rotate(1deg); }
.allow-tip { max-width: 620px; margin: 34px auto 0; text-align: center; font-size: 17px; color: #efe6ff; }
.allowance .sources { margin: 14px auto 0; text-align: center; font-size: 14px; color: rgba(239, 230, 255, 0.75); }
.allowance .sources a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) { .allow-cards { grid-template-columns: 1fr; max-width: 460px; } .allow-card { transform: none !important; } .allowance { padding: 80px 0; } }
/* The cards keep their own dark text inside the purple band. */
.allowance .allow-card h3 { color: var(--ink); }
.allowance .allow-card p { color: #5c4a57; }

/* Chores: two age groups (Plink is for 3–8), each chore with its amount. */
.age-cards { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.age-card li span { flex: 1; }
.age-card .kr { flex: none; padding: 4px 10px; border-radius: 999px; background: #fae073; border: 2px solid var(--ink); font-family: 'DynaPuff', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); }
@media (max-width: 560px) { .age-cards { grid-template-columns: 1fr; } }

/* "Varför ett sparmål?": one wide card under the three, the pig beside the words. */
.goal-card { display: flex; align-items: center; gap: 26px; max-width: 900px; margin: 18px auto 0; background: #fff; border-radius: 26px; padding: 22px 30px; color: var(--ink); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), 0 18px 30px -16px rgba(16, 4, 34, 0.5); }
.goal-card img { width: 120px; height: auto; flex: none; }
.allowance .goal-card h3 { margin: 0 0 6px; font-size: 20px; color: var(--ink); }
.allowance .goal-card p { margin: 0; font-size: 16px; line-height: 1.45; color: #5c4a57; }
.allowance .sources { margin-top: 26px; }
@media (max-width: 860px) { .goal-card { max-width: 460px; flex-direction: column; text-align: center; } }

/* Hero: the pig's heart and star eyes stuck by the phone, instead of the coin pile. */
.stage .s-heart { width: 92px; left: 6%; bottom: 14%; transform: rotate(-14deg); }
.stage .s-heart2 { width: 52px; left: 1%; bottom: 33%; transform: rotate(12deg); }
.stage .s-spark { width: 58px; right: 3%; top: 30%; transform: rotate(10deg); }
@media (max-width: 960px) {
  .stage .s-heart { width: 66px; }
  .stage .s-heart2 { width: 40px; }
  .stage .s-spark { width: 44px; }
}
/* Three age groups again: Plink is for children from 3 until they get a real bank account. */
.age-cards { grid-template-columns: repeat(3, 1fr); max-width: 1080px; }
@media (max-width: 960px) { .age-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .age-cards { grid-template-columns: 1fr; } }

/* "från 3 år" stuck beside the headline (on the photo it got lost). */
.title-sticker { display: flex; align-items: center; gap: 22px; }
.title-sticker h2 { margin: 0; }
.title-sticker .badge {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 7px var(--white), 0 10px 18px rgba(61, 18, 114, 0.2);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  transform: rotate(-10deg);
  font-family: 'DynaPuff', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
}
.title-sticker .badge small { font-size: 14px; font-weight: 700; }
.title-sticker .badge b { font-size: 40px; color: var(--pink); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.early .title-sticker + p { margin-top: 14px; }
@media (max-width: 560px) { .title-sticker .badge { width: 78px; height: 78px; } .title-sticker .badge b { font-size: 32px; } }

/* The drag demo, in the app's units (its help stage is 240 × 100; 44 more on top for the "+10 kr" and the
   floating hearts): --u is one unit. Moved frame by frame by js/drag-demo.js. */
.dd { container-type: inline-size; width: 100%; max-width: 460px; margin: 0 auto; }
.dd-stage { --u: calc(100cqw / 240); position: relative; height: calc(144 * var(--u)); }
.dd-pig { position: absolute; left: calc(160 * var(--u)); top: calc(62 * var(--u)); width: calc(80 * var(--u)); height: calc(80 * 1240 / 1584 * var(--u)); }
.dd-hop { position: absolute; inset: 0; will-change: transform; }
.dd-hop > img, .dd-hop > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* The eye's looks grow from the eye (418, 436 in the drawing). */
.dd-calm, .dd-look { transform-origin: 26.39% 35.16%; }
.dd-look { opacity: 0; transform: scale(0); }
.dd-float { opacity: 0; }
.dd-coin { position: absolute; left: calc(16 * var(--u)); top: calc(78 * var(--u)); width: calc(36 * 214 / 244 * var(--u)); height: auto; z-index: 1; will-change: transform, opacity; filter: drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(16, 4, 34, 0.25)); }
/* Fingertip (16, 3 in its drawing) on the coin's middle. */
.dd-finger { position: absolute; left: calc(25 * var(--u)); top: calc(92 * var(--u)); width: calc(40 * var(--u)); height: calc(46 * var(--u)); z-index: 2; transform-origin: 40% 7%; will-change: transform, opacity; }
.dd-finger svg { width: 100%; height: 100%; display: block; }
.dd-gain { position: absolute; left: calc(200 * var(--u)); top: calc(70 * var(--u)); width: 0; display: flex; justify-content: center; z-index: 3; opacity: 0; white-space: nowrap; font-family: 'DynaPuff', sans-serif; font-weight: 700; font-size: calc(20 * var(--u)); color: #17823a; -webkit-text-stroke: calc(4 * var(--u)) #fff; paint-order: stroke fill; will-change: transform, opacity; }
/* The badge beside "Anpassad för de minsta" sits right after the words. */
.title-sticker { justify-content: flex-start; }
.title-sticker h2 { flex: 0 1 auto; }
/* A bigger pig than the help's (110 instead of 80), so its heart eyes show on a web page; the "+10 kr" over its head. */
.dd-pig { left: calc(128 * var(--u)); top: calc(38 * var(--u)); width: calc(110 * var(--u)); height: calc(110 * 1240 / 1584 * var(--u)); }
.dd-gain { left: calc(183 * var(--u)); top: calc(30 * var(--u)); font-size: calc(17 * var(--u)); -webkit-text-stroke: calc(3.5 * var(--u)) #fff; }
/* The pig over the falling coin (the coin drops behind its back, into the slot); the finger above all. */
.dd-pig { z-index: 1; }
.dd-finger { z-index: 4; }
.dd-gain { z-index: 5; }
/* 32 more on top, so the coin's arc over the pig stays inside. */
.dd-stage { height: calc(176 * var(--u)); }
.dd-pig { top: calc(70 * var(--u)); }
.dd-coin { top: calc(110 * var(--u)); }
.dd-finger { top: calc(124 * var(--u)); }
.dd-gain { top: calc(62 * var(--u)); }