:root {
  --paper: #F6F1E7;
  --card: #FFFDF8;
  --ink: #2B2620;
  --ink-soft: #4A4238;
  --muted: #6A6156;
  --line: #E5DCCB;
  --red: #A6243A;
  --red-dark: #7E1A2B;
  --green: #4F6649;
  --focus: #1A5FB4;
  --serif: 'Fraunces', Georgia, serif;
  --hand: 'Caveat', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
a { color: var(--red); }
a:hover { color: var(--red-dark); }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
h1, h2 { font-family: var(--serif); }
h1, h2, h3 { overflow-wrap: break-word; }
h1 { font-weight: 700; font-size: clamp(42px, 6vw, 68px); line-height: 1.04; letter-spacing: -0.01em; }
h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.1; }
[hidden] { display: none !important; }

/* Busnissen: Christmas. Snow-white paper, deep green, a candy-cane stripe along the top. */
.brand-nisse {
  --paper: #F8F5EE;
  --card: #FFFFFF;
  --ink: #1C2B22;
  --ink-soft: #3C4A41;
  --muted: #5C685F;
  --line: #E1DDD0;
  --red: #B3202A;
  --red-dark: #8A141D;
  --green: #1F5B3A;
  background-image: linear-gradient(#DDE8E0, var(--paper) 760px);
  background-repeat: no-repeat;
}
.brand-nisse::before { content: ""; display: block; height: 10px; background: repeating-linear-gradient(135deg, var(--red) 0 14px, #FFFFFF 14px 28px); }
.brand-nisse .card-front { background: repeating-linear-gradient(#FFFFFF 0 31px, #E3EAE4 31px 32px); }
.brand-nisse .chips span { background: #E8EFE9; }
.brand-nisse .week-dark, .brand-nisse .footer { background: #163F29; border-color: #163F29; }
.brand-nisse .footer { box-shadow: 0 1px 0 #163F29; }
.brand-nisse .bubble { color: var(--red); }

/* Father Christmas crosses the sky above the hero now and then; a tiny door stands at its foot. */
.brand-nisse { position: relative; }
.brand-nisse .nav, .brand-nisse .hero-text, .brand-nisse .hero-card { position: relative; z-index: 1; }
.sky { position: absolute; inset: 0 0 auto 0; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none; }
.sleigh { position: absolute; top: 15%; left: 0; width: 150px; height: auto; overflow: visible; opacity: 0.9; animation: sleigh-flight 80s linear infinite; }
@keyframes sleigh-flight {
  0% { transform: translate(-220px, 40px) rotate(-6deg); }
  42% { transform: translate(50vw, -18px) rotate(-2deg); }
  85%, 100% { transform: translate(calc(100vw + 220px), 26px) rotate(4deg); }
}
/* Snow: two tiled layers of flakes that slide down by exactly one tile, so the loop is seamless. */
.sky::before, .sky::after { content: ""; position: absolute; left: 0; right: 0; top: -400px; bottom: 0; }
.sky::before {
  background-image:
    radial-gradient(circle at 20px 30px, #FFFFFF 0 3px, transparent 4px),
    radial-gradient(circle at 170px 110px, #FFFFFF 0 4px, transparent 5px),
    radial-gradient(circle at 290px 220px, #FFFFFF 0 3px, transparent 4px),
    radial-gradient(circle at 90px 330px, #FFFFFF 0 4px, transparent 5px);
  background-size: 400px 400px;
  animation: snowfall 22s linear infinite;
}
.sky::after {
  background-image:
    radial-gradient(circle at 60px 80px, #FFFFFF 0 2px, transparent 3px),
    radial-gradient(circle at 230px 40px, #FFFFFF 0 2px, transparent 3px),
    radial-gradient(circle at 340px 180px, #FFFFFF 0 2px, transparent 3px),
    radial-gradient(circle at 140px 260px, #FFFFFF 0 2px, transparent 3px),
    radial-gradient(circle at 370px 350px, #FFFFFF 0 2px, transparent 3px);
  background-size: 400px 400px;
  opacity: 0.8;
  animation: snowfall 38s linear infinite;
}
@keyframes snowfall {
  from { transform: translate(0, 0); }
  to { transform: translate(-40px, 400px); }
}
.hero { position: relative; }
.elf-door { position: absolute; right: 24px; bottom: 0; width: 84px; line-height: 0; }
.elf-door svg { display: block; width: 100%; height: auto; overflow: visible; }
.elf-door-leaf { transform-box: fill-box; transform-origin: left center; transform: perspective(160px) rotateY(0deg); transition: transform 0.35s ease; }
.elf-door:hover .elf-door-leaf, .elf-door:focus-visible .elf-door-leaf { animation: none; transform: perspective(160px) rotateY(-24deg); }
/* The elf's head waits behind the door and leans out through the gap when it opens. */
.elf-door-elf { transform: translateX(-36px); transition: transform 0.35s ease; animation: elf-lean 18s ease-in-out infinite; }
.elf-door:hover .elf-door-elf, .elf-door:focus-visible .elf-door-elf { animation: none; transform: translateX(0); }
@keyframes elf-lean {
  0%, 63%, 92%, 100% { transform: translateX(-36px); }
  70%, 84% { transform: translateX(0); }
}
/* Now and then the elf opens the door a crack, looks out, and shuts it again. */
.elf-door-leaf { animation: door-peek 18s ease-in-out infinite; }
@keyframes door-peek {
  0%, 58%, 96%, 100% { transform: perspective(160px) rotateY(0deg); }
  66%, 88% { transform: perspective(160px) rotateY(-24deg); }
}
/* Nothing moves for people who have asked for reduced motion: the snow hangs still and the sleigh is parked. */
@media (prefers-reduced-motion: reduce) {
  .sleigh { animation: none; transform: translate(62vw, 0); }
  .sky::before, .sky::after { animation: none; }
  .elf-door-leaf, .elf-door-elf { transition: none; animation: none; }
  .frames img + img, .credits .credit { animation: none; }
  .elf-says-elf { transition: none; }
  html { scroll-behavior: auto; }
}

/* Busnissen's open antics as little Christmas cards instead of plain white boxes. */
.brand-nisse .open-list li { position: relative; overflow: hidden; border: none; padding: 30px 24px 24px; color: #FFFFFF; background-color: var(--green); background-image: radial-gradient(circle at 88% 22%, rgba(255, 255, 255, 0.5) 0 3px, transparent 4px), radial-gradient(circle at 72% 70%, rgba(255, 255, 255, 0.35) 0 2px, transparent 3px), radial-gradient(circle at 94% 82%, rgba(255, 255, 255, 0.4) 0 4px, transparent 5px); }
.brand-nisse .open-list li:nth-child(even) { background-color: var(--red); }
.brand-nisse .open-list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(135deg, #FFFFFF 0 10px, var(--red) 10px 20px); }
.brand-nisse .open-list li:nth-child(even)::before { background: repeating-linear-gradient(135deg, #FFFFFF 0 10px, var(--green) 10px 20px); }
.brand-nisse .open-list a { color: #FFFFFF; font-size: 24px; }
.brand-nisse .open-list a:hover { color: #FFE08A; }
.brand-nisse .open-list .week-label { color: #FFE08A; }
.brand-nisse .open-list .muted { color: rgba(255, 255, 255, 0.85); }

.ticks svg, .features svg { stroke: var(--green); }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.hand { font-family: var(--hand); line-height: 1; }
.small { font-size: 14px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.lead { font-size: 20px; max-width: 34rem; color: var(--ink-soft); }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  background: var(--red);
  color: #FFFFFF;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
}
.btn:hover { background: var(--red-dark); color: #FFFFFF; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-large { padding: 16px 28px; font-size: 18px; }
.btn-buy { font-size: 19px; padding: 18px 24px; min-height: 56px; }
.btn-small { font-size: 15px; min-height: 44px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* nav */
.nav { padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--serif); font-weight: 700; font-size: 22px; }
.brand:hover { color: var(--ink); }
.nav nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nav nav a { color: var(--ink); text-decoration: none; padding: 10px 12px; }
/* The language link: in the menu on wide screens; on phones in the top right corner beside the
   logo, so switching language never reflows the menu rows. */
.lang-top { display: none; color: var(--ink); text-decoration: none; padding: 10px 12px; min-height: 44px; align-items: center; }
@media (max-width: 720px) {
  .lang-top { display: inline-flex; margin-left: auto; }
  .nav nav { flex-basis: 100%; }
  .nav nav a.lang-inline { display: none; }
  /* The hero's own buy button is right below, so the menu does not repeat it on phones. */
  .nav nav a.pill { display: none; }
}
.nav nav a.pill { background: var(--red); color: #FFFFFF; padding: 10px 18px; border-radius: 999px; font-weight: 700; }
.nav nav a.pill:hover { background: var(--red-dark); }
/* On a phone the menu takes two rows, kept close so the page starts soon. */
@media (max-width: 560px) {
  .nav { gap: 8px; }
  .nav nav { gap: 0 4px; }
  .nav nav a { padding: 6px 12px; }
}

/* hero */
/* The hero fills what is left of the first screen under the header; the rest is a scroll away. */
.hero { min-height: calc(100vh - var(--header-height, 86px)); min-height: calc(100svh - var(--header-height, 86px)); padding-top: 32px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; align-content: center; }
/* The striped edge and the menu are a little over 96 pixels high together. The number here is
   a pixel less, so the first screen ends just below the window's bottom: a pixel more, and the
   next section's top line shows as a stripe along the bottom of the window. */
.brand-nisse { --header-height: 95px; }
.hero-text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
/* On a wide but low window, such as a laptop's, the first screen's parts follow the window's
   height, so the heading, the text and the buy button are all in view when the page opens. The
   English heading is a line longer than the Swedish one, and was the first to fall outside. */
@media (min-width: 901px) and (max-height: 980px) {
  .hero { padding-top: 12px; padding-bottom: 28px; }
  .hero-text { gap: clamp(10px, 2.4vh, 24px); }
  .hero h1 { font-size: clamp(34px, 6.2vh, 68px); }
  .hero .lead { font-size: clamp(16px, 2.3vh, 20px); }
  .elf-says-elf { width: clamp(64px, 12vh, 112px); }
}
.text-link { color: var(--ink); font-weight: 500; padding: 14px 6px; }
.ticks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; color: var(--ink-soft); }
.ticks li { display: flex; gap: 8px; align-items: center; }
.hero-new { font-size: 15px; color: var(--ink-soft); }
/* The game that comes with the purchase, as a ribbon like the buy card's: green, gold edges,
   a swallowtail end. */
.hero-bonus { align-self: flex-start; display: inline-flex; gap: 10px; align-items: center; max-width: 100%; margin: 0; padding: 9px 30px 9px 16px; font-size: 15px; line-height: 1.35; color: #E3ECDD; background: var(--green); border-top: 2px solid #E8B94A; border-bottom: 2px solid #E8B94A; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); }
.hero-bonus svg { flex: none; stroke: #E8B94A; }
.hero-bonus strong { color: #FFFFFF; }
.hero-bonus a { color: #F3D27B; font-weight: 700; }
.hero-bonus a:hover { color: #FFFFFF; }
.hero-new a { color: var(--ink); font-weight: 700; }

.elf-says { display: flex; align-items: center; gap: 16px; }
.elf-says-elf { flex: none; width: 112px; padding: 0; border: none; background: none; cursor: pointer; border-radius: 16px; transition: transform 0.15s ease; }
.elf-says-elf:hover { transform: rotate(-4deg) scale(1.04); }
.mascot { display: block; width: 100%; height: auto; }
.bubble {
  position: relative;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 14px 18px;
  font-size: 28px;
  color: var(--green);
  max-width: 26rem;
}
.bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--card);
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
}

.hero-card { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.scene { width: 100%; max-width: 440px; }
.card-stack { position: relative; width: 100%; }
.card-back { position: absolute; inset: 6px -4px -6px 4px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; transform: rotate(2.5deg); box-shadow: 0 14px 28px -12px rgba(43, 38, 32, 0.35); }
.card-front {
  position: relative;
  border-radius: 6px;
  padding: 32px 32px 28px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(43, 38, 32, 0.12);
  transform: rotate(-2deg);
  background: repeating-linear-gradient(#FFFDF8 0 31px, #E9E1D2 31px 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-title { font-size: 36px; color: var(--red); }
.card-tag { font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.card-lines { font-size: 24px; color: var(--ink-soft); line-height: 32px; }
.card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; font-size: 14px; color: var(--ink-soft); }
.card-sign { font-size: 26px; color: var(--ink); }

/* sections */
.band { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-top { border-bottom: none; }
.section { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 48px; }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 40rem; }
/* What is free, under the open pranks: the doors with a picture, and the letters. */
.free-box { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; padding: 24px 28px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.free-box img { display: block; width: 110px; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; }
.free-box > div { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.free-box h3 { font-size: 22px; }
.free-box p { color: var(--ink-soft); }
.free-links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 4px; }
.section-head p { color: var(--ink-soft); }

.steps { display: flex; flex-wrap: wrap; gap: 24px; }
/* Each step: the numeral to the left, centred against the text to its right. */
.step { flex: 1 1 280px; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 8px; align-content: center; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.step-num { grid-column: 1; grid-row: 1 / span 2; align-self: center; font-family: var(--serif); font-size: 64px; font-weight: 700; color: var(--red); line-height: 1; }
.step h3, .step p { grid-column: 2; }
.step h3 { font-size: 21px; }
.step p { color: var(--ink-soft); }

.weeks { display: flex; flex-wrap: wrap; gap: 16px; }
.week { flex: 1 1 200px; min-width: 0; padding: 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.week h3 { font-family: var(--serif); font-size: 22px; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.week p { font-size: 15px; color: var(--ink-soft); }
.week-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.week-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.week-dark .week-label { color: #F0B9C2; }
.week-dark p { color: #DCD3C4; }

.satiety { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; padding: 32px; border-radius: 16px; background: var(--card); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.satiety-text { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.satiety-text h3 { font-family: var(--serif); font-size: 28px; line-height: 1.15; }
.satiety-text p { color: var(--ink-soft); }
.satiety .features { flex: 1 1 340px; min-width: 0; }
.satiety-photo { flex: 1 1 100%; margin: 0; }
/* Two photos share one frame and slowly cross-fade. Without motion, the first one stays. */
.frames { position: relative; aspect-ratio: 3 / 2; max-height: 420px; width: 100%; overflow: hidden; border-radius: 10px; }
.frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frames img + img { opacity: 0; animation: photo-swap 18s ease-in-out infinite; }
@keyframes photo-swap {
  0%, 44% { opacity: 0; }
  50%, 94% { opacity: 1; }
  100% { opacity: 0; }
}
.satiety-photo figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
/* The two credits in one place, each shown while its photo is. */
.credits { display: grid; }
.credits .credit { grid-area: 1 / 1; }
.credits .credit + .credit { opacity: 0; animation: photo-swap 18s ease-in-out infinite; }
.credits .credit:first-child { animation: photo-swap-out 18s ease-in-out infinite; }
@keyframes photo-swap-out {
  0%, 44% { opacity: 1; }
  50%, 94% { opacity: 0; }
  100% { opacity: 1; }
}

/* sample */
.sample { background: var(--green); color: #FFFFFF; }
.sample-inner { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.sample-text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sample-text .eyebrow { color: #E3ECDD; }
.sample-intro { color: #F0F4EC; font-size: 18px; }
.sample-card { flex: 1 1 380px; min-width: 0; background: var(--card); color: var(--ink); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.sample-card h3 { font-size: 18px; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips span { display: inline-flex; align-items: center; gap: 6px; background: #EEE6D7; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.chips svg { flex: none; }
/* On the open page the chips sit straight on the page background, so they get a solid, outlined look. */
.prank-page .chips span { background: var(--card); border: 1.5px solid var(--ink); font-size: 15px; font-weight: 700; padding: 7px 14px; }
/* In Busnissen's taster the lone time chip goes in the box's top right corner, level with the heading. */
.sample-card-slim { position: relative; }
.sample-card-slim .chips { position: absolute; top: 28px; right: 28px; }
.sample-card-slim h3 { padding-right: 96px; }
.needs { padding-left: 20px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 4px; }

/* buy */
.buy { padding-top: 96px; padding-bottom: 96px; display: flex; justify-content: center; }
.buy-card { width: 100%; max-width: 560px; background: var(--card); border: 2px solid var(--ink); border-radius: 24px; padding: 40px; display: flex; flex-direction: column; gap: 24px; box-shadow: 8px 8px 0 var(--ink); }
.buy-card h2 { font-size: 36px; margin-top: 8px; }
/* A ribbon across the buy card's corner: the game comes with it. Only where the game exists (the
   Swedish texts); the list under the price says it in words for screen readers. */
.buy-card { position: relative; overflow: hidden; }
.buy-ribbon { position: absolute; top: 0; right: 0; width: 200px; height: 200px; overflow: hidden; pointer-events: none; }
.buy-ribbon span { position: absolute; top: 46px; right: -62px; width: 280px; padding: 9px 0; transform: rotate(45deg); text-align: center; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; background: var(--green); border-top: 2px solid #E8B94A; border-bottom: 2px solid #E8B94A; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18); }
/* A phone has no room for a corner across the text: the ribbon becomes a tag above it. */
@media (max-width: 560px) {
  .buy-ribbon { position: static; width: auto; height: auto; overflow: visible; margin-bottom: -10px; }
  .buy-ribbon span { position: static; display: inline-block; width: auto; padding: 6px 14px; transform: none; font-size: 12px; border: 2px solid #E8B94A; border-radius: 999px; box-shadow: none; }
}
.buy-tagline { font-size: 28px; color: var(--green); }
/* The price sits in its own panel, centred, with what kind of price it is underneath. */
.price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 10px; padding: 18px 20px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.price .small { flex-basis: 100%; text-align: center; margin-top: 6px; font-size: 15px; }
.price-num { font-family: var(--serif); font-size: 80px; font-weight: 700; line-height: 1; color: var(--red); }
.price-cur { font-size: 24px; font-weight: 700; }
.buy-includes { display: flex; flex-direction: column; gap: 12px; }
.features-title { font-size: 18px; }
/* On a wide screen the card is two columns, so that all of it, button too, fits on one screen:
   what to buy and the form on the left, what is included on the right, below the ribbon. The
   right panel starts level with the price and ends level with the button; the note on payment
   and delivery goes under both. */
.buy-main { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 961px) {
  .buy-card { max-width: 1120px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px 48px; align-content: start; }
  .buy-card > .buy-main { grid-column: 1; grid-row: 2; }
  .buy-card > .buy-includes { grid-column: 2; grid-row: 2; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
  .buy-includes .features { flex: 1; justify-content: space-around; }
  .buy-card > .buy-note { grid-column: 1 / -1; grid-row: 3; }
  .buy-card .price-num { font-size: 64px; }
}
.features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.features li { display: flex; gap: 12px; align-items: flex-start; }
.features svg { flex: none; margin-top: 2px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; font-weight: 500; }
/* The email address in the buy box, with a letter and a parcel inside the field. */
.field input[type="email"] { padding-left: 50px; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%231C2B22' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2.5' y='7' width='12' height='9' rx='1.4' fill='%23FFFDF7'/%3E%3Cpath d='M3 7.8 L8.5 12 L14 7.8' fill='none'/%3E%3Crect x='12' y='11.5' width='9.5' height='9' rx='1.2' fill='%23B3202A'/%3E%3Cpath d='M16.75 11.5v9' stroke='%231F5B3A' stroke-width='2'/%3E%3Cpath d='M12 15.5h9.5' stroke='%231F5B3A' stroke-width='2'/%3E%3C/svg%3E") no-repeat 16px center / 24px 24px; }
.field input, .field textarea, .field select { font: inherit; padding: 14px 16px; border: 1.5px solid #8C8171; border-radius: 12px; background: #FFFFFF; color: var(--ink); width: 100%; }
.accept { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); cursor: pointer; }
.accept input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { text-align: center; font-weight: 500; color: var(--red); }

/* A small fan of the three doors, leading to the page about elf doors. */
.door-peek { display: inline-flex; align-items: center; gap: 20px; color: var(--ink); font-weight: 700; text-decoration: none; }
.door-peek-fan { display: flex; align-items: center; flex: none; padding: 8px 0; }
.door-peek-fan img { display: block; width: 64px; height: auto; background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.4); }
.door-peek-fan img:nth-child(1) { transform: rotate(-7deg) translateY(4px); margin-right: -12px; }
.door-peek-fan img:nth-child(2) { position: relative; z-index: 1; }
.door-peek-fan img:nth-child(3) { transform: rotate(7deg) translateY(4px); margin-left: -12px; }
.door-peek-text { color: var(--red); text-decoration: underline; }
/* The two A4 letters, small, where a page tells about them. */
.letter-peek { display: flex; flex-wrap: wrap; gap: 28px; margin: 8px 0 28px; }
.letter-peek-item { display: flex; flex-direction: column; gap: 12px; width: 170px; color: var(--red); font-weight: 700; }
.letter-peek-item img { display: block; width: 100%; height: auto; transform: rotate(-2deg); transition: transform 0.2s ease; }
.letter-peek-item + .letter-peek-item img { transform: rotate(2deg); }
.letter-peek-item:hover img, .letter-peek-item:focus-visible img { transform: rotate(0) scale(1.03); }
@media (prefers-reduced-motion: reduce) { .letter-peek-item img { transition: none; } }
.door-peek:hover .door-peek-text, .door-peek:focus-visible .door-peek-text { text-decoration-thickness: 2px; }

/* faq */
.guide-faq { max-width: 820px; display: flex; flex-direction: column; gap: 16px; }
.faq { max-width: 820px; margin: 0 auto; padding: 88px 24px; display: flex; flex-direction: column; gap: 32px; }
.faq-item { padding: 22px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { font-size: 19px; }
.faq-item p { color: var(--ink-soft); }

/* footer */
/* The footer ends at the bottom of the window also when the page is shorter than the window:
   the page is a column as tall as the window, and the part between header and footer takes
   what is left. The column's parts keep their full width, which a centred one would otherwise
   lose. A page's height is seldom a whole number of pixels, and the shadow gives the last row
   the footer's colour instead of a thin light line. */
@media screen {
  body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  body > header, body > main, body > footer { flex: none; width: 100%; }
  body > main { flex: 1 0 auto; }
}
.footer { background: var(--ink); color: #DCD3C4; box-shadow: 0 1px 0 var(--ink); }
.footer-grid { padding-top: 64px; padding-bottom: 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px 40px; }
.footer-about { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-about p { max-width: 26rem; }
.footer-brand { font-family: var(--serif); font-weight: 700; font-size: 28px; line-height: 1.1; color: #FFFFFF; }
.footer nav { display: flex; flex-direction: column; align-items: flex-start; }
.footer nav h2 { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 8px; }
.footer nav a { color: #DCD3C4; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
.footer nav a:hover { color: #FFFFFF; }
.footer-bottom { padding-top: 20px; padding-bottom: 28px; border-top: 1px solid rgba(255, 255, 255, 0.22); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.link-button { font: inherit; color: #DCD3C4; background: none; border: none; padding: 0; min-height: 44px; text-decoration: underline; cursor: pointer; }
.link-button:hover { color: #FFFFFF; }
.brand-nisse .footer { border-top: 10px solid transparent; border-image: repeating-linear-gradient(135deg, var(--red) 0 14px, #FFFFFF 14px 28px) 10; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }

/* Keyboard users: a way past the menu, and a focus ring that shows on light and dark alike. */
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 20; background: var(--ink); color: #FFFFFF; padding: 12px 18px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 16px; color: #FFFFFF; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px #FFFFFF; border-radius: 4px; }
.btn:focus-visible, .pill:focus-visible { border-radius: 999px; }
main:focus { outline: none; box-shadow: none; }

/* Looping animations can be paused (the sleigh and the snow run for longer than five seconds).
   Top right, where the first screen is empty: at the bottom left it met the hero's last line. */
.motion-toggle { position: absolute; right: 24px; top: 12px; z-index: 1; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--muted); background: transparent; color: var(--ink-soft); cursor: pointer; }
.motion-toggle:hover { background: var(--card); color: var(--ink); border-color: var(--ink); }
.motion-toggle .icon-play, .motion-toggle[aria-pressed="true"] .icon-pause { display: none; }
.motion-toggle[aria-pressed="true"] .icon-play { display: block; }
.motion-off .sleigh, .motion-off .sky::before, .motion-off .sky::after, .motion-off .elf-door-leaf, .motion-off .elf-door-elf, .motion-off .frames img, .motion-off .credits .credit { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

/* The card from the elf, as it looks in print, shown in Busnissen's taster. */
.sample-preview { flex: 1 1 300px; min-width: 0; display: flex; justify-content: center; }
.elf-card { position: relative; overflow: hidden; width: 100%; max-width: 300px; aspect-ratio: 105 / 148; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 26px 38px; background: #FFFDF7; color: #1C2B22; border: 4px solid #B3202A; border-radius: 16px; transform: rotate(2deg); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); }
.elf-card::before { content: ""; position: absolute; inset: 5px; border: 1.5px solid #1F5B3A; border-radius: 10px; pointer-events: none; }
.elf-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(135deg, #B3202A 0 10px, #FFFFFF 10px 20px); }
.elf-card svg { width: 72px; height: auto; flex: none; }
.elf-card-letter { flex: 1; display: flex; align-items: center; padding-inline: 10px; font-family: var(--hand); font-size: 23px; line-height: 1.18; }
.elf-card-sign { align-self: flex-end; font-family: var(--hand); font-size: 26px; line-height: 1; color: #B3202A; }
.sample-card-slim { flex: 1 1 260px; }

/* the buyer's page */
/* The page after purchase opens on a full first screen; an arrow points to the content below. */
.purchase-head { position: relative; min-height: calc(100vh - var(--header-height, 86px)); min-height: calc(100svh - var(--header-height, 86px)); padding-top: 32px; padding-bottom: 112px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 24px; }
.purchase-head .hero-actions { justify-content: center; }
.purchase-head .lead { max-width: 38rem; }
.scroll-arrow { position: absolute; left: 50%; bottom: 28px; width: 56px; height: 56px; margin-left: -28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--red); color: #FFFFFF; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.45); animation: arrow-nudge 2.4s ease-in-out 2; }
.scroll-arrow:hover { background: var(--red-dark); color: #FFFFFF; }
@keyframes arrow-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.motion-off .scroll-arrow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .scroll-arrow { animation: none; } }
#content { scroll-margin-top: 8px; }
/* Who each part is for: the grown-up reads the antics, the children see only the cards. The tags
   are on this page and the cards page around the cards, never on a card itself. */
.for-whom { width: 100%; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; text-align: left; }
.for { background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--green); border-radius: 16px; padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; }
.for-child { border-top-color: var(--red); }
/* The party game that comes with the purchase (src/games.rs). */
.for-game { border-top-color: #C8962A; }
/* The game on a tablet held wide: the guide page's picture of round 1 in a dark bezel. */
.game-teaser-shot { flex: 0 1 300px; line-height: 0; }
.game-teaser-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 9px solid #1C2B22; border-radius: 18px; background: #1C2B22; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); }
.for h2 { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.for > p:not(.small) { color: var(--ink-soft); }
.for-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.for-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.for-actions .btn svg { flex: none; }
.for-adult .btn { background: var(--green); }
.for-adult .btn:hover { background: #163F29; }
.for-adult .btn-ghost, .for-child .btn-ghost { background: transparent; }
.for-adult .btn-ghost { color: var(--green); border-color: var(--green); }
.for-child .btn-ghost { color: var(--red); border-color: var(--red); }
.for-adult .btn-ghost:hover { background: var(--green); color: #FFFFFF; }
.for-child .btn-ghost:hover { background: var(--red); color: #FFFFFF; }
.for-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--green); color: #FFFFFF; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.for-child .for-tag, .prank-card .for-tag, .cards-for .for-tag:not(.for-tag-link) { background: var(--red); }
.for-tag-small { padding: 3px 10px; font-size: 12px; }
/* The other part as a link beside the tag, in its own colour: on the cards page, back to the
   antics for the grown-up. */
.for-tag-link { background: transparent; color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); text-decoration: none; }
.for-tag-link:hover { background: var(--green); color: #FFFFFF; }
.day-steps { width: 100%; max-width: 980px; text-align: left; }
.day-steps h2 { font-size: 18px; margin-bottom: 10px; }
.day-steps ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; counter-reset: day; }
.day-steps li { counter-increment: day; display: flex; gap: 10px; align-items: baseline; color: var(--ink-soft); }
.day-steps li::before { content: counter(day); flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 15px; }
.names { margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--line); scroll-margin-top: 16px; }
.names summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; cursor: pointer; list-style: none; padding: 4px 0; }
.names summary::-webkit-details-marker { display: none; }
.names summary::before { content: ""; flex: none; align-self: center; width: 8px; height: 8px; border-right: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red); transform: rotate(-45deg); transition: transform 0.2s ease; margin-right: 4px; }
.names[open] summary::before { transform: rotate(45deg); }
.names summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.names-title { font-weight: 700; font-size: 19px; }
.names-current { color: var(--green); font-size: 15px; font-weight: 700; }
.names-form { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
@media (prefers-reduced-motion: reduce) { .names summary::before { transition: none; } }
.names-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.names-fields label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 15px; }
.names-fields input { box-sizing: border-box; width: 100%; min-width: 0; font: inherit; font-weight: 400; padding: 10px 12px; border: 1.5px solid var(--ink-soft); border-radius: 10px; background: #FFFFFF; color: var(--ink); }
.names-fields input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
/* A small picture inside each field: two children, and the elf's hat. */
.names-fields .name-children, .names-fields .name-elf { padding-left: 44px; background-repeat: no-repeat; background-position: 11px center; background-size: 24px 24px; }
.names-fields .name-children { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%231C2B22' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M2.5 21v-2.5a5.5 5.5 0 0 1 11 0V21z' fill='%231F5B3A'/%3E%3Ccircle cx='8' cy='7.5' r='3.4' fill='%23F6D2B8'/%3E%3Cpath d='M13.8 21v-1.8a4 4 0 0 1 8 0V21z' fill='%23B3202A'/%3E%3Ccircle cx='17.8' cy='10.5' r='2.6' fill='%23F6D2B8'/%3E%3C/svg%3E"); }
.names-fields .name-elf { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%231C2B22' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M5.5 17.5 L13 3.5 L18.5 17.5 Z' fill='%23B3202A'/%3E%3Crect x='3.5' y='17' width='17' height='4' rx='2' fill='%23FFFFFF'/%3E%3Ccircle cx='13' cy='3.2' r='2' fill='%23F2C94C'/%3E%3C/svg%3E"); }
.names-save { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.names-save p { margin: 0; }
.answers { width: 100%; max-width: 980px; display: flex; flex-direction: column; gap: 20px; padding: 22px 26px; border: 1.5px dashed var(--line); border-radius: 16px; text-align: left; scroll-margin-top: 16px; }
.answer { display: flex; flex-direction: column; gap: 10px; }
.answer h2 { font-size: 19px; }
.answer-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { font: inherit; font-weight: 700; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; }
.choice:hover { background: var(--ink); color: var(--paper); }
.choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.answer-thanks { font-weight: 700; color: var(--green); }
.prank-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.prank-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-radius: 12px; background: var(--card); border: 1.5px dashed var(--red); }
.notice { padding-top: 96px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 24px; min-height: 50vh; }
.pranks { display: flex; flex-direction: column; gap: 24px; }
.prank { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.prank h3 { font-family: var(--serif); font-size: 26px; line-height: 1.15; }
.prank h4 { font-size: 17px; margin-bottom: 8px; }
.prank > p { color: var(--ink-soft); }
.prank-cols { display: flex; flex-wrap: wrap; gap: 24px 40px; }
.prank-cols > div:first-child { flex: 1 1 240px; min-width: 0; }
.prank-cols > div:last-child { flex: 2 1 340px; min-width: 0; }
.method { padding-left: 22px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 8px; }
.prank .prank-tip { font-size: 26px; color: var(--green); }

/* open pranks */
.open-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.open-list li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.open-list a { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--ink); }
.open-list a:hover { color: var(--red); }
.buy-after-list { padding-top: 8px; }
/* The game's box between the pranks and the buy card. After the pranks it sits 40px under the
   box of free doors, a pair of extras, with the section's air (88px) below it. */
.game-home { padding-top: 88px; padding-bottom: 88px; }
.section + .game-home { padding-top: 0; margin-top: -48px; }
.game-home .free-box { margin-top: 0; }
.game-home + .buy { padding-top: 0; }
.prank-page { padding-top: 40px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 32px; }
.prank-page-head { display: flex; flex-direction: column; gap: 20px; }
.prank-page h1 { font-size: clamp(34px, 5vw, 54px); }
.prank-page .lead { max-width: 44rem; }
.prank-page .prank { flex-direction: row; background: var(--card); }
.prank-page .prank h2 { font-size: 24px; margin-bottom: 12px; }
.prank-cta { gap: 28px; }

/* cookie banner */
.cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 560px;
  margin: 0 auto;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  z-index: 10;
}
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 520px) {
  .elf-says-elf { width: 84px; }
  .bubble { font-size: 23px; }  .buy-card { padding: 28px 22px; }
  .card-front { padding: 28px 22px 24px; }
}

/* Phones: the hero is taller than the screen anyway, so it keeps its natural height, and the
   decorations that need room (sleigh, door, the card's deep shadow) are left out. */
@media (max-width: 720px) {
  .hero { min-height: 0; padding-top: 16px; padding-bottom: 48px; gap: 36px; }
  .sleigh, .elf-door { display: none; }
  /* The pause button stays on the first screen: top right, beside the elf's speech bubble. */
  .motion-toggle { right: 16px; top: 16px; width: 40px; height: 40px; }
  .hero .elf-says { padding-right: 48px; }
  /* Straight on phones: a tilted card costs width the text needs. */
  .card-front { transform: none; }
  .card-back { transform: none; box-shadow: 0 8px 16px -10px rgba(43, 38, 32, 0.3); }
}

/* Long compound words in the taster's title ("Toapappersgranen") get a smaller size and may hyphenate. */
.sample-text h2 { hyphens: auto; }
.brand-nisse .sample-text h2 { font-size: clamp(28px, 3.2vw, 38px); }

/* The preview of the elf's card is landscape, like the default print format: elf to
   the left, the note to the right. Beside it, the taster's text with the "you need" box under. */
.elf-card { max-width: 460px; aspect-ratio: 148 / 105; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 18px; row-gap: 6px; align-items: center; padding: 26px 26px 38px; text-align: left; }
.elf-card svg { grid-column: 1; grid-row: 2 / 4; justify-self: center; width: 76px; }
.elf-card-letter { grid-column: 2; grid-row: 1 / -1; align-self: center; padding: 0 6px 24px; font-size: 26px; }
.elf-card-sign { grid-column: 2; grid-row: 4; align-self: end; justify-self: end; }
.sample-with-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-areas: "text need" "trio trio"; gap: 40px 56px; align-items: center; }
.sample-with-card .sample-text { grid-area: text; }
.sample-with-card .sample-card-slim { grid-area: need; }
/* Under the example, its letter three ways in one row: printed, on a tablet and on a phone. */
.sample-trio { grid-area: trio; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.sample-trio > p { color: #F0F4EC; font-size: 18px; }
.sample-trio > p a { color: #FFFFFF; font-weight: 700; }
/* The three are spaced alike: the tablet and the phone are items of the row itself, not a pair. */
.sample-trio-row { width: 100%; display: flex; align-items: center; justify-content: center; gap: 28px clamp(16px, 4vw, 48px); }
/* The printed card is the smallest of the three after the phone, as a card in the hand is next
   to a tablet; its parts follow its width. */
.sample-trio .sample-preview { flex: 0 1 320px; min-width: 0; }
.sample-trio .elf-card { max-width: 320px; container-type: inline-size; }
.sample-trio .elf-card-letter { font-size: clamp(16px, 5.6cqi, 26px); }
.sample-trio .devices { display: contents; }
.sample-trio .device-tablet { flex: 0 1 410px; width: auto; min-width: 0; }
.sample-trio .device-phone { flex: 0 1 100px; width: auto; min-width: 0; }
@media (min-width: 561px) {
  /* The card's own measures are in pixels: its width-relative unit only works on what is inside it. */
  .sample-trio .elf-card { grid-template-columns: 70px minmax(0, 1fr); column-gap: 12px; padding: 18px 18px 28px; }
  .sample-trio .elf-card svg { width: 18cqi; }
  .sample-trio .elf-card-letter { padding: 0 1cqi 5cqi; }
  .sample-trio .elf-card-sign { font-size: clamp(18px, 6cqi, 26px); }
}
@media (max-width: 900px) {
  .sample-with-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "need" "trio"; }
  .sample-with-card .sample-card-slim { max-width: none; }
  .elf-card { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; padding: 22px 22px 34px; transform: none; }
  .elf-card svg { width: 68px; }
  .elf-card-letter { font-size: 24px; padding-bottom: 22px; }
}

/* Terms, privacy and other plain reading pages. */
.legal { padding-top: 40px; padding-bottom: 80px; max-width: 46rem; display: flex; flex-direction: column; gap: 14px; }
.legal h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 10px; }
.legal h2 { font-size: 24px; margin-top: 18px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { padding: 8px 12px 8px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.legal th { color: var(--ink); }
.legal code { font-size: 14px; }
.legal ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal.prose { padding: 0; margin-top: 16px; }

/* The free letters page: the cards in a grid, flat (not tilted, lighter shadow). */
.letter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; }
.elf-card-flat { max-width: none; transform: none; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.3); }
/* The writing follows the card's width, so a letter fills a small card as it fills a large one.
   Below the smallest readable size the card grows taller instead (clip, unlike hidden, lets it). */
.elf-card-flat { container-type: inline-size; overflow: clip; }
.elf-card-flat .elf-card-letter { font-size: clamp(18px, 5.3cqi, 26px); padding-bottom: 1.3em; }
.elf-card-flat .elf-card-letter.long { font-size: clamp(16px, 4.6cqi, 23px); }
.elf-card-blank { color: var(--muted); font-family: var(--body, 'DM Sans', system-ui, sans-serif); font-size: 16px; }

/* Pictures of a letter shown on a tablet and on a phone, each in a frame like the device's. */
.devices { display: flex; align-items: flex-end; justify-content: center; gap: clamp(12px, 4vw, 32px); margin: 8px 0; }
.device { display: block; height: auto; background: #1F3D2B; border: solid #1C2B22; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.45); }
.device-tablet { width: min(66%, 520px); border-width: clamp(6px, 1.6vw, 12px); border-radius: clamp(12px, 3vw, 22px); }
/* The phone is clearly the smaller of the two: about two thirds of the tablet's height. */
.device-phone { width: min(16%, 112px); border-width: clamp(3px, 0.7vw, 5px); border-radius: clamp(8px, 2vw, 16px); }

/* On a phone the cards stand, like the standing print format: elf on top, the letter under it.
   The sizes follow the card's width in that format's proportions. */
@media (max-width: 560px) {
  .sample-trio-row { flex-wrap: wrap; }
  .sample-trio .sample-preview { flex-basis: 100%; }
  .sample-trio .device-tablet { flex-basis: 62%; }
  .sample-trio .device-phone { flex-basis: 16%; }
  .elf-card { container-type: inline-size; overflow: clip; max-width: 360px; margin-inline: auto; aspect-ratio: 105 / 148; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 26px 38px; text-align: center; }
  .elf-card-flat { max-width: none; }
  .elf-card svg { width: 25cqi; }
  .elf-card .elf-card-letter, .elf-card-flat .elf-card-letter { flex: 1; align-self: stretch; justify-content: center; padding: 0 8px; font-size: clamp(18px, 8.2cqi, 30px); }
  .elf-card .elf-card-letter.long, .elf-card-flat .elf-card-letter.long { font-size: clamp(16px, 6.6cqi, 25px); }
  .elf-card .elf-card-blank { font-size: 16px; }
  .elf-card-sign { align-self: flex-end; font-size: clamp(22px, 7.7cqi, 28px); }
}

/* The terms of sale as a dialog over the landing page: a soft card in the site's colours.
   The title stays put, the text scrolls under it, and the scrollbar is a thin rounded thumb
   in the accent colour with no visible track. */
.terms-dialog { width: min(44rem, calc(100vw - 32px)); max-height: min(82vh, 760px); padding: 0; border: none; border-radius: 28px; overflow: hidden; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 40px 90px -30px rgba(20, 24, 22, 0.55); }
.terms-dialog[open] { display: flex; flex-direction: column; animation: dialog-in 0.22s ease-out; }
.terms-dialog::backdrop { background: rgba(28, 36, 32, 0.45); backdrop-filter: blur(4px); }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.terms-dialog .legal { flex: 1; min-height: 0; max-width: none; overflow-y: auto; padding: 6px 32px 44px; gap: 10px; }
/* The scrollbar: only a rounded thumb. Browsers that draw their own scrollbar parts (Chrome,
   Edge, Safari) get them styled one by one, with the track and the arrow buttons removed.
   Setting scrollbar-color there would switch them back to the system look, so it is kept
   for the others (Firefox). */
.terms-dialog .legal::-webkit-scrollbar { width: 14px; }
.terms-dialog .legal::-webkit-scrollbar-track, .terms-dialog .legal::-webkit-scrollbar-corner { background: transparent; }
.terms-dialog .legal::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.terms-dialog .legal::-webkit-scrollbar-thumb { background: var(--green); background-clip: content-box; border: 4px solid transparent; border-radius: 999px; min-height: 48px; }
.terms-dialog .legal::-webkit-scrollbar-thumb:hover { background-color: var(--red); }
@supports not selector(::-webkit-scrollbar) {
  .terms-dialog .legal { scrollbar-width: thin; scrollbar-color: var(--green) transparent; }
}
.terms-dialog-head { flex: none; padding: 28px 32px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
.terms-dialog-head h2 { font-size: 32px; line-height: 1.1; color: var(--green); }
.terms-dialog .legal h2 { font-size: 20px; margin-top: 14px; }
.terms-dialog .legal h2:first-of-type { margin-top: 10px; }
.terms-dialog .legal p { font-size: 16px; }
.terms-dialog-close { display: flex; justify-content: flex-end; padding: 14px 24px 22px; background: linear-gradient(to bottom, transparent, var(--card) 40%); margin-top: -18px; position: relative; }
.terms-dialog-close .btn { min-height: 48px; padding: 12px 28px; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.5); }
.brand-nisse .terms-dialog::before { content: ""; flex: none; height: 8px; background: repeating-linear-gradient(135deg, var(--red) 0 12px, #FFFFFF 12px 24px); }
@media (prefers-reduced-motion: reduce) { .terms-dialog[open] { animation: none; } }
.terms-dialog .legal:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; box-shadow: none; border-radius: 0; }
/* While the dialog is open the page behind it does not scroll, and scrolling past either end
   of the terms text is not passed on to the page. The gutter is kept so nothing shifts. */
/* The scrollbar's place is always taken by a scrollbar, also on a page too short to scroll;
   kept empty, it showed as a light strip beside the footer in a window taller than the page. */
html { scrollbar-gutter: stable; overflow-y: scroll; }
html:has(.terms-dialog[open]) { overflow: hidden; }
.terms-dialog, .terms-dialog .legal { overscroll-behavior: contain; }
.terms-dialog .legal { margin-right: 4px; }
.more-open { padding-top: 0; padding-bottom: 72px; gap: 24px; }
.more-open h2 { font-size: 28px; }

/* the guides */
.guide-list strong { font-family: var(--serif); font-size: 20px; line-height: 1.2; color: var(--ink); }
.guide-tag { font-weight: 700; color: var(--green); }
.brand-nisse .guide-list strong { font-size: 24px; color: #FFFFFF; }
.brand-nisse .guide-list .guide-tag { color: #FFE08A; }
.prank-page > h2 { font-size: 28px; margin-top: 16px; }
/* The top of the page about elf doors: the heading and the buttons, with the three doors fanned
   out beside them, so a visitor sees what the page offers before scrolling. */
.door-top { display: flex; flex-wrap: wrap; gap: 28px 56px; align-items: center; }
.door-top-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.door-fan { flex: 0 1 440px; display: flex; justify-content: center; align-items: center; padding: 12px 0; }
.door-fan img { position: relative; display: block; width: 36%; max-width: 170px; height: auto; background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.4); }
.door-fan img:nth-child(1) { transform: rotate(-7deg) translateY(8px); margin-right: -7%; }
.door-fan img:nth-child(2) { z-index: 1; transform: translateY(-6px); }
.door-fan img:nth-child(3) { transform: rotate(7deg) translateY(8px); margin-left: -7%; }
/* On a phone the doors come straight after the heading, before the text and the buttons. */
@media (max-width: 700px) {
  .door-top { flex-direction: column; align-items: stretch; gap: 20px; }
  .door-top-text, .door-top .prank-page-head { display: contents; }
  .door-fan { order: 1; flex: none; }
  .door-top .lead { order: 2; }
  .door-top .hero-actions { order: 3; }
}
.door-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 24px; }
.door-grid li { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.door-grid img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; }
.door-grid strong { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
/* A door's name and picture lead to the chooser, to change it. */
.door-card-name { color: var(--ink); text-decoration: none; }
.door-card-name:hover { color: var(--red); text-decoration: underline; }
.door-card-picture { display: block; position: relative; }
/* The finished door, always on the card, like a photo laid on the sheet. */
.door-card-finished { position: absolute; right: -6px; bottom: -6px; width: 44%; padding: 4px 4px 2px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.5); transform: rotate(3deg); }
.door-grid .door-card-finished img { border: 0; border-radius: 3px; }
.door-card-finished span { display: block; padding-top: 2px; font-size: 11px; line-height: 1.2; text-align: center; color: var(--ink); }
.door-card-picture:hover img { border-color: var(--red); }
/* On a phone, two cards a row: 25 cards one under the other is a very long way to the accessories. */
@media (max-width: 560px) {
  .door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .door-grid li { padding: 10px; gap: 8px; }
  .door-grid strong { font-size: 16px; }
  .door-grid .door-get .btn { padding-left: 8px; padding-right: 8px; font-size: 15px; }
}
.name-pick-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.name-pick .bubble { min-width: min(100%, 17rem); }
.legal .name-list { list-style: none; padding: 0; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.name-list li { padding: 6px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-family: var(--hand); font-size: 24px; line-height: 1.1; color: var(--ink); }
/* Every name leads to the free cards with that name on them; the whole pill is the link. */
.name-list li:has(a) { padding: 0; }
.name-list a { display: block; padding: 6px 14px; border-radius: 999px; color: inherit; text-decoration: none; }
.name-list a:hover { background: var(--red); color: #FFFFFF; }
.name-list a:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* A switch: a checkbox, or a link that turns a setting on and off, drawn as a track with a knob,
   green when on. */
.switch { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink); text-decoration: none; cursor: pointer; }
.switch:hover { color: var(--ink); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; background: #C9C3B6; transition: background 0.15s ease; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease; }
.switch input:checked + .switch-track, .switch[aria-checked="true"] .switch-track { background: #1F5B3A; }
.switch input:checked + .switch-track::after, .switch[aria-checked="true"] .switch-track::after { transform: translateX(22px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::after { transition: none; } }
/* Read by screen readers, not shown. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.name-pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* The other guides, at the foot of each guide: pills that wrap. */
.guide-more-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.guide-more-list a { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 700; color: var(--ink); text-decoration: none; background: var(--card); }
.guide-more-list a:hover, .guide-more-list a:focus-visible { border-color: var(--red); color: var(--red); }