/* Augneblink's website. The colours and fonts are the brand's (brand/README.md). */

@font-face {
  font-family: 'Valley Sans';
  src: url('/skrift/ValleySans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url('/skrift/AtkinsonHyperlegibleNext-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url('/skrift/AtkinsonHyperlegibleNext-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  --papir: #faf8f3;
  --krem: #f1e9dc;
  --natt: #0f1a2b;
  --natt-2: #17253a;
  --tekst: #17253a;
  --dempet: #4b5568;
  --lys-tekst: #f2f4f7;
  --lys-dempet: #b4bfd0;
  --kornbla: #2b4fa6;
  --rose: #c0446a;
  --lysrose: #e7b6c5;
  --sjoglass: #2f7d8c;
  --bjork: #56602a;
  --rund: 22px;
  --tittel: 'Valley Sans', 'Atkinson', system-ui, sans-serif;
  --brod: 'Atkinson', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --myk: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--papir);
  color: var(--tekst);
  font-family: var(--brod);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3 {
  font-family: var(--tittel);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(34px, 6vw, 60px);
}
h3 {
  font-size: 22px;
  line-height: 1.15;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--lysrose);
  outline-offset: 3px;
  border-radius: 6px;
}
.tall {
  font-variant-numeric: tabular-nums;
}
.hopp {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 20;
  background: var(--papir);
  color: var(--tekst);
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 600;
}
.hopp:focus {
  top: 16px;
}
.bredde {
  width: min(1180px, 100% - 40px);
  margin-inline: auto;
}
.smal {
  width: min(780px, 100% - 40px);
}

/* The bar at the top: over the hero, and solid once the page moves. */
.topp {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px max(20px, calc((100% - 1180px) / 2));
  color: var(--lys-tekst);
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
}
.topp.flyttet {
  background: rgba(15, 26, 43, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  padding-block: 12px;
}
.topp-logo img {
  width: 150px;
  height: auto;
}
.topp-meny {
  display: none;
  gap: 26px;
  margin-left: auto;
  font-weight: 600;
  font-size: 16px;
}
.topp-meny a {
  text-decoration: none;
  opacity: 0.86;
}
.topp-meny a:hover {
  opacity: 1;
}
.topp-knapp {
  margin-left: auto;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
@media (min-width: 900px) {
  .topp-meny {
    display: flex;
  }
  /* Beside the menu, which already takes the free space. */
  .topp-knapp {
    margin-left: 0;
  }
}

/* The hero: the clay evening, and the wall of moments that sweeps over it. */
.helt {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--natt);
  color: var(--lys-tekst);
  display: flex;
  align-items: flex-end;
}
.helt-scene,
.helt-vegg {
  position: absolute;
  inset: 0;
}
/* The still and the living loop on top of it (HyperFrames), which stand still:
   the life is in the film. */
.helt-lag {
  position: absolute;
  inset: 0;
}
.helt-lag img,
.helt-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.helt-film {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.helt-film.spiller {
  opacity: 1;
}
.helt-vegg {
  background: var(--natt);
  clip-path: polygon(130% 0, 130% 0, 100% 100%, 100% 100%);
  transition: clip-path 1.6s cubic-bezier(0.7, 0, 0.2, 1);
}
.helt.vegg-vises .helt-vegg {
  clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%);
}
.vegg {
  --mellom: 10px;
  position: absolute;
  inset: -40% -30%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mellom);
  transform: perspective(1600px) rotateX(26deg) rotateZ(-15deg);
}
.vegg-kolonne {
  display: flex;
  flex-direction: column;
  gap: var(--mellom);
  animation: gli 70s linear infinite;
}
.vegg-kolonne:nth-child(n + 5) {
  display: none;
}
@media (min-width: 700px) {
  .vegg {
    --mellom: 18px;
    grid-template-columns: repeat(7, 1fr);
  }
  .vegg-kolonne:nth-child(n + 5) {
    display: flex;
  }
}
.vegg-kolonne:nth-child(even) {
  animation-direction: reverse;
  margin-top: -120px;
}
.vegg-kolonne img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
@keyframes gli {
  to {
    transform: translateY(-50%);
  }
}
/* Dark enough under the text, whichever picture is behind it. */
.helt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 26, 43, 0.55) 0%, rgba(15, 26, 43, 0) 22%, rgba(15, 26, 43, 0) 42%, rgba(15, 26, 43, 0.92) 78%, var(--natt) 100%);
  pointer-events: none;
}
.helt-tekst {
  position: relative;
  z-index: 2;
  width: min(1180px, 100% - 40px);
  margin: 0 auto;
  padding: 0 0 max(40px, env(safe-area-inset-bottom));
}
.helt h1 {
  font-size: clamp(40px, 10.6vw, 112px);
  line-height: 0.98;
}
.ingress {
  margin-top: 20px;
  max-width: 34rem;
  font-size: clamp(18px, 2.1vw, 21px);
  color: #e4e9f1;
}
.handlinger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 26px;
}
.butikk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--lys-tekst);
  color: var(--natt);
  font-weight: 600;
}

/* The App Store from 27.10, when Apple approved the app. */
a.butikk {
  text-decoration: none;
  transition: transform 0.15s ease;
}

a.butikk:hover {
  transform: translateY(-1px);
}

a.butikk:focus-visible {
  outline: 3px solid var(--lys-tekst);
  outline-offset: 3px;
}
/* The other way in: the web app, where buying is with Vipps (from 28.10). */
.butikk-omriss {
  background: transparent;
  color: var(--lys-tekst);
  box-shadow: inset 0 0 0 2px rgba(242, 244, 247, 0.55);
}
a.butikk-omriss:hover {
  box-shadow: inset 0 0 0 2px var(--lys-tekst);
}
.lenke-lys {
  font-weight: 600;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.helt-merknad {
  margin-top: 18px;
  max-width: 34rem;
  font-size: 15px;
  color: var(--lys-dempet);
}
@media (min-width: 700px) {
  .helt {
    align-items: center;
  }
  .helt::after {
    background: linear-gradient(90deg, rgba(15, 26, 43, 0.9) 0%, rgba(15, 26, 43, 0.72) 34%, rgba(15, 26, 43, 0.1) 62%, rgba(15, 26, 43, 0) 100%),
      linear-gradient(180deg, rgba(15, 26, 43, 0.5) 0%, rgba(15, 26, 43, 0) 20%);
  }
  .helt-tekst {
    padding: 120px 0 80px;
  }
}

/* The title rises letter by letter (Reiret's way), set up by forside.js,
   and waits for it so it does not show twice. */
.stige {
  opacity: 0;
}
.stige.klar {
  opacity: 1;
}
.stige .ord {
  display: inline-block;
  white-space: nowrap;
}
.stige .tegn {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.32em) scale(0.94);
  filter: blur(8px);
  animation: stig 1s var(--myk) forwards;
  animation-delay: calc(var(--i) * 34ms + 200ms);
}
@keyframes stig {
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* The parts of the page. */
.del {
  padding: clamp(80px, 12vw, 150px) 0;
}
.del-papir {
  background: var(--papir);
}
.del-krem {
  background: var(--krem);
}
.del-natt {
  background: var(--natt);
  color: var(--lys-tekst);
}
.del-hode {
  max-width: 760px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.del-hode p {
  margin-top: 20px;
  font-size: clamp(19px, 2vw, 22px);
  color: var(--dempet);
}
.del-natt .del-hode p,
.del-natt p {
  color: var(--lys-dempet);
}

/* The big screen in the room, with the moments changing places. */
.storskjerm {
  position: relative;
  margin: 0 0 clamp(56px, 8vw, 96px);
}
.storskjerm .storskjerm-telefon {
  display: none;
}
@media (min-width: 900px) {
  .storskjerm .storskjerm-telefon {
    --b: 13%;
    display: block;
    position: absolute;
    left: -3%;
    top: 30%;
    z-index: 2;
    transform: rotate(-5deg);
    transition: transform 1.1s var(--myk) 0.3s;
  }
  .storskjerm.vis:not(.synlig) .storskjerm-telefon {
    transform: translateY(30%) rotate(0deg);
  }
  .storskjerm .storskjerm-telefon::after {
    top: 1.2%;
    height: 3%;
    width: 30%;
  }
  .storskjerm .storskjerm-telefon,
  .storskjerm .storskjerm-telefon img {
    border-radius: 18px;
  }
}
.storskjerm-flate {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--natt);
  border-radius: clamp(16px, 2.4vw, 30px);
  box-shadow: 0 40px 80px -30px rgba(15, 26, 43, 0.55), 0 0 0 clamp(6px, 1vw, 12px) #1d2838;
  overflow: hidden;
}
/* The recording of the real screen fills the frame; the film fades in over its still. */
.storskjerm-plakat,
.storskjerm-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.storskjerm-film {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.storskjerm-film.spiller {
  opacity: 1;
}
.storskjerm figcaption {
  margin-top: 18px;
  color: var(--dempet);
  font-size: 17px;
}

/* Three steps. */
.steg {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 48px;
}
.steg img,
.side-om-side > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--rund);
}
.steg h3 {
  margin-top: 22px;
}
.steg p {
  margin-top: 8px;
  color: var(--dempet);
}
.bunke {
  position: relative;
  aspect-ratio: 1;
}
.bunke img {
  position: absolute;
  width: 68%;
  border: 8px solid #fff;
  border-bottom-width: 26px;
  border-radius: 6px;
  box-shadow: 0 20px 40px -14px rgba(15, 26, 43, 0.35);
}
.bunke img:nth-child(1) {
  left: 4%;
  top: 14%;
  transform: rotate(-9deg);
}
.bunke img:nth-child(2) {
  left: 28%;
  top: 4%;
  transform: rotate(6deg);
}
.bunke img:nth-child(3) {
  left: 16%;
  top: 24%;
  transform: rotate(-2deg);
}
@media (min-width: 900px) {
  .steg {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }
}

.punkter {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  gap: 14px;
}
.punkter li {
  position: relative;
  padding-left: 30px;
}
.punkter li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rose);
}
.del-natt .punkter {
  max-width: 820px;
}
.del-natt .punkter li {
  color: #dfe5ee;
}

/* The four parts: a stack of cards, dealt out when it comes into view. */
.kortstokk {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kortstokk li {
  display: flex;
}
.kort {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  background: #fff;
  border-radius: var(--rund);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(23, 37, 58, 0.06), 0 22px 44px -28px rgba(15, 26, 43, 0.45);
  transition: transform 0.5s var(--myk), box-shadow 0.5s var(--myk);
}
.kort img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.kort-tittel {
  display: block;
  padding: 16px 16px 0;
  font-family: var(--tittel);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.1;
}
.kort-linje {
  display: block;
  padding: 6px 16px 18px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--dempet);
}
.kort:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 1px 0 rgba(23, 37, 58, 0.06), 0 30px 60px -28px rgba(15, 26, 43, 0.55);
}
@media (min-width: 900px) {
  .kortstokk {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .kort-tittel {
    padding: 20px 22px 0;
  }
  .kort-linje {
    padding: 8px 22px 24px;
    font-size: 16px;
  }
  .kortstokk.stokk-klar li {
    position: relative;
    z-index: calc(4 - var(--i));
    transition: transform 1.1s var(--myk), opacity 0.6s ease;
    transition-delay: calc(var(--i) * 90ms);
  }
  .kortstokk.stokk-klar:not(.delt) li {
    opacity: 0.001;
    transform: translateX(calc((1.5 - var(--i)) * (100% + 24px))) translateY(40px) rotate(var(--r));
  }
  .kortstokk.stokk-klar.samlet:not(.delt) li {
    opacity: 1;
  }
  .kortstokk li:nth-child(1) {
    --i: 0;
    --r: -9deg;
  }
  .kortstokk li:nth-child(2) {
    --i: 1;
    --r: -3deg;
  }
  .kortstokk li:nth-child(3) {
    --i: 2;
    --r: 3deg;
  }
  .kortstokk li:nth-child(4) {
    --i: 3;
    --r: 9deg;
  }
}

/* The app itself: real screenshots in a phone, and in a window on the PC. */
.telefon {
  --b: 240px;
  position: relative;
  display: block;
  width: var(--b);
  padding: calc(var(--b) * 0.034);
  border-radius: calc(var(--b) * 0.165);
  background: #0b111c;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.1), 0 34px 64px -26px rgba(5, 10, 20, 0.6), 0 14px 28px -16px rgba(5, 10, 20, 0.45);
}
.telefon img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--b) * 0.135);
}
.telefon::after {
  content: '';
  position: absolute;
  top: calc(var(--b) * 0.06);
  left: 50%;
  width: calc(var(--b) * 0.3);
  height: calc(var(--b) * 0.085);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}
.utstilling {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 10px 0 20px;
}
.utstilling .telefon {
  transition: transform 1s var(--myk);
}
.utstilling .foran {
  --b: min(50vw, 268px);
  z-index: 2;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(3deg);
}
.utstilling .bak {
  --b: min(42vw, 236px);
  margin-right: -12%;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5%) rotate(-6deg);
  transition-delay: 0.2s;
}
/* The phone behind slides out from behind the one in front, once. */
.utstilling.vis:not(.synlig) .bak {
  transform: translateX(60%) translateY(4%) rotate(2deg);
}
.del-natt .telefon {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), 0 34px 70px -26px rgba(0, 0, 0, 0.8);
}
.pc-og-telefon {
  display: block;
  padding: 0 6% 12% 0;
}
.pc {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 37, 58, 0.1), 0 40px 70px -34px rgba(15, 26, 43, 0.55);
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 1s var(--myk);
}
.pc img {
  display: block;
  width: 100%;
  height: auto;
}
.pc-linje {
  display: flex;
  gap: 6px;
  padding: 9px 12px;
  background: #eceae4;
}
.pc-linje i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cfcbc2;
}
.pc-og-telefon .foran {
  --b: min(28vw, 168px);
  position: absolute;
  right: 0;
  bottom: 0;
}
.pc-og-telefon.vis:not(.synlig) .foran {
  transform: translateY(18%) rotate(0deg);
}
.kjokken {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  margin-top: clamp(48px, 7vw, 88px);
  padding: clamp(14px, 2vw, 20px);
  border-radius: var(--rund);
  background: var(--natt-2);
}
.kjokken img {
  flex: none;
  width: clamp(96px, 16vw, 180px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
}
.kjokken p {
  max-width: 44rem;
  color: var(--lys-dempet);
}
.kjokken strong {
  color: var(--lys-tekst);
}

/* A picture beside the text. */
.side-om-side {
  display: grid;
  gap: 40px;
  align-items: center;
}
.side-om-side > * {
  min-width: 0;
}
.side-om-side p {
  margin-top: 20px;
  font-size: 19px;
  color: var(--dempet);
}
.del-natt .side-om-side p {
  color: var(--lys-dempet);
}
@media (min-width: 900px) {
  .side-om-side {
    grid-template-columns: 1fr 1fr;
    gap: 72px;
  }
  .side-om-side.snudd > img {
    order: 2;
  }
}

/* Everything that is in it. */
.alt {
  columns: 3 300px;
  column-gap: 20px;
}
.alt-gruppe {
  break-inside: avoid;
  margin: 0 0 20px;
  padding: 24px 24px 26px;
  border-radius: var(--rund);
  background: #fff;
  border: 1px solid rgba(23, 37, 58, 0.08);
}
.alt-gruppe h3 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.alt-gruppe svg {
  flex: none;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.alt-gruppe ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.alt-gruppe li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.45;
}
.alt-gruppe li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.38em;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--sjoglass);
  border-bottom: 2.5px solid var(--sjoglass);
  transform: rotate(-45deg);
}

/* The prices. */
.pakker {
  display: grid;
  gap: 20px;
}
.pakke {
  background: #fff;
  border: 1px solid rgba(23, 37, 58, 0.1);
  border-radius: var(--rund);
  padding: 30px 28px 32px;
}
.pakke-komplett {
  background: var(--natt);
  color: var(--lys-tekst);
  border-color: var(--natt);
}
.pris {
  margin-top: 10px;
  font-family: var(--tittel);
  font-size: 54px;
  line-height: 1;
}
.pakke ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 10px;
}
.pakke li {
  padding-left: 26px;
  position: relative;
}
.pakke li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.35em;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--sjoglass);
  border-bottom: 2.5px solid var(--sjoglass);
  transform: rotate(-45deg);
}
.pakke-komplett li::before {
  border-color: var(--lysrose);
}
.priser-merknad {
  margin-top: 26px;
  color: var(--dempet);
}
@media (min-width: 900px) {
  .pakker {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* What the name means, as in a dictionary. */
.ordbok {
  display: flex;
  gap: clamp(18px, 3vw, 32px);
  align-items: flex-start;
  max-width: 760px;
  margin-bottom: clamp(48px, 7vw, 80px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--rund);
  background: var(--natt-2);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ordbok img {
  flex: none;
  width: clamp(44px, 6vw, 64px);
  height: auto;
  margin-top: 6px;
}
.ordbok-tekst {
  display: grid;
  gap: 10px;
}
.ordbok-ord {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.ordbok dfn {
  font-family: var(--tittel);
  font-style: normal;
  font-size: clamp(30px, 4.6vw, 42px);
  line-height: 1;
  color: var(--lys-tekst);
}
.ordbok i {
  color: var(--lysrose);
  font-size: 18px;
}
.del-natt .ordbok .ordbok-betydning {
  font-size: clamp(19px, 2.2vw, 22px);
  color: var(--lys-tekst);
}
@media (max-width: 599px) {
  .ordbok {
    flex-direction: column;
    gap: 14px;
  }
  .ordbok img {
    width: 40px;
    margin-top: 0;
  }
}

/* Trust. */
.tillit {
  display: grid;
  gap: 36px;
}
.tillit h3 {
  color: var(--lys-tekst);
}
.tillit p {
  margin-top: 10px;
}
@media (min-width: 900px) {
  .tillit {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}

/* Questions. */
.sporsmal {
  margin-top: 40px;
  border-top: 1px solid rgba(23, 37, 58, 0.14);
}
.sporsmal details {
  border-bottom: 1px solid rgba(23, 37, 58, 0.14);
}
.sporsmal summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  font-weight: 600;
  font-size: 20px;
  position: relative;
  min-height: 44px;
}
.sporsmal summary::-webkit-details-marker {
  display: none;
}
.sporsmal summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid var(--kornbla);
  border-bottom: 2.5px solid var(--kornbla);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--myk);
}
.sporsmal details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
.sporsmal details p {
  padding: 0 0 24px;
  color: var(--dempet);
}

/* The close: the couple on the dance floor. */
.avslutning {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex;
  align-items: flex-end;
  color: var(--lys-tekst);
  overflow: hidden;
  background: var(--natt);
}
.avslutning picture,
.avslutning img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
.avslutning::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 26, 43, 0) 35%, rgba(15, 26, 43, 0.9) 85%, var(--natt) 100%);
}
.avslutning-tekst {
  position: relative;
  z-index: 1;
  width: min(1180px, 100% - 40px);
  margin: 0 auto;
  padding-bottom: clamp(48px, 8vw, 96px);
}
.avslutning-tekst h2 {
  font-size: clamp(40px, 8vw, 88px);
  max-width: 14ch;
}
.avslutning-tekst p {
  margin: 14px 0 26px;
  font-size: 21px;
  color: #e4e9f1;
}

.bunn {
  background: var(--natt);
  color: var(--lys-dempet);
  padding: 40px 0 max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.bunn-innhold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.bunn-lenker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 16px;
}
.bunn-lenker a {
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.bunn-lenker a:hover {
  color: var(--lys-tekst);
}

/* What comes into view rises a little, once. */
.vis {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--myk), transform 0.9s var(--myk);
}
.vis.synlig {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .vegg-kolonne {
    animation: none;
  }
  .utstilling .telefon,
  .pc,
  .storskjerm-telefon {
    transition: none;
  }
  .stige {
    opacity: 1;
  }
  .stige .tegn {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .vis {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .helt-vegg {
    display: none;
  }
}

/* /hjelp/: the same text as the help in the app, on a light page. */
.hjelpeside {
  padding: clamp(110px, 14vw, 150px) 0 clamp(64px, 9vw, 110px);
}
.hjelpeside h1 {
  font-size: clamp(40px, 7vw, 64px);
}
.hjelp-ingress {
  margin-top: 14px;
  font-size: 20px;
  color: var(--dempet);
}
.hjelp-kategorier {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.hjelp-kategorier a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(23, 37, 58, 0.12);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.hjelp-kategori {
  margin-top: clamp(40px, 6vw, 64px);
  scroll-margin-top: 90px;
}
.hjelp-kategori h2 {
  font-size: clamp(28px, 4vw, 38px);
  scroll-margin-top: 90px;
}
.hjelp-om {
  margin-top: 8px;
  color: var(--dempet);
}
.hjelp-kategori .sporsmal {
  margin-top: 20px;
}
.hjelp-kategori details {
  scroll-margin-top: 90px;
}
.hjelp-artikkel {
  padding: 0 0 24px;
  display: grid;
  gap: 12px;
}
.hjelp-artikkel p,
.hjelp-artikkel li {
  color: var(--tekst);
}
.hjelpeside .sporsmal details .hjelp-artikkel p {
  padding: 0;
}
.hjelp-artikkel .hjelp-kort {
  color: var(--dempet);
}
.hjelp-artikkel h3 {
  margin-top: 8px;
  font-size: 20px;
}
.hjelp-artikkel ul,
.hjelp-artikkel ol {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 6px;
}
.hjelp-artikkel a,
.hjelp-kategori p a {
  color: var(--kornbla);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* /artikler/: the guides from Toastmasteren, on a light page like the help. */
.artikkelside {
  padding: clamp(110px, 14vw, 150px) 0 clamp(64px, 9vw, 110px);
}
.artikkelside h1 {
  font-size: clamp(36px, 6.5vw, 58px);
}
.smuler {
  margin-bottom: 14px;
  font-size: 16px;
}
.smuler a {
  color: var(--kornbla);
  font-weight: 600;
  text-underline-offset: 3px;
}
.artikkel-ingress {
  margin-top: 16px;
  font-size: 20px;
  color: var(--dempet);
}
.artikkel-meta {
  margin-top: 12px;
  font-size: 16px;
  color: var(--dempet);
}
.artikkel-bilde {
  width: 100%;
  margin-top: 28px;
  border-radius: var(--rund);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.toc {
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: var(--rund);
  background: var(--krem);
}
.toc-tittel {
  font-weight: 600;
}
.toc ol {
  margin: 8px 0 0;
  padding-left: 22px;
  display: grid;
  gap: 4px;
}
.toc a {
  color: var(--tekst);
  text-underline-offset: 3px;
}
.artikkel {
  margin-top: 28px;
}
.artikkel > * + * {
  margin-top: 16px;
}
.artikkel h2 {
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;
  margin-top: 48px;
  scroll-margin-top: 90px;
}
.artikkel h3 {
  font-size: 22px;
  margin-top: 32px;
  scroll-margin-top: 90px;
}
.artikkel h2 + *,
.artikkel h3 + * {
  margin-top: 12px;
}
.artikkel ul,
.artikkel ol {
  margin-bottom: 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}
.artikkel a {
  color: var(--kornbla);
  font-weight: 600;
  text-underline-offset: 3px;
}
.artikkel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  display: block;
  overflow-x: auto;
}
.artikkel th,
.artikkel td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(23, 37, 58, 0.12);
  vertical-align: top;
}
.artikkel th {
  font-weight: 600;
}
.artikkel .tips,
.artikkel .varsel,
.artikkel .sjekkliste {
  padding: 18px 22px;
  border-radius: var(--rund);
  background: #fff;
  border: 1px solid rgba(23, 37, 58, 0.1);
  display: grid;
  gap: 8px;
}
.artikkel .tips {
  border-left: 6px solid var(--sjoglass);
}
.artikkel .varsel {
  border-left: 6px solid var(--rose);
}
.artikkel .boks-tittel {
  font-weight: 600;
}
.artikkel .sjekkliste ul,
.artikkel .avkrysning {
  list-style: none;
  padding-left: 0;
}
.artikkel .sjekkliste li,
.artikkel .avkrysning li {
  position: relative;
  padding-left: 30px;
}
.artikkel .sjekkliste li::before,
.artikkel .avkrysning li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid var(--kornbla);
}
.artikkel .sitat {
  margin: 32px 0;
  padding: 20px 0;
  border-block: 1px solid rgba(23, 37, 58, 0.14);
}
.artikkel .sitat blockquote {
  margin: 0;
  font-family: var(--tittel);
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
}
.artikkel .sitat figcaption {
  margin-top: 10px;
  color: var(--dempet);
  font-size: 16px;
}
.artikkel .talltavle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 28px 0;
}
.artikkel .talltavle div {
  background: #fff;
  border-radius: var(--rund);
  padding: 16px 18px;
  border: 1px solid rgba(23, 37, 58, 0.1);
}
.artikkel .talltavle dt {
  font-family: var(--tittel);
  font-size: 30px;
  color: var(--kornbla);
  font-variant-numeric: tabular-nums;
}
.artikkel .talltavle dd {
  margin: 4px 0 0;
  font-size: 16px;
  color: var(--dempet);
}
.artikkel .cta {
  margin-top: 28px;
}
.artikkel .cta a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--natt);
  color: var(--lys-tekst);
  text-decoration: none;
}
.artikkel .sporsmal {
  margin-top: 12px;
}
.relaterte {
  margin-top: clamp(56px, 8vw, 96px);
}
.relaterte h2 {
  font-size: clamp(28px, 4vw, 38px);
}
.artikkelkort {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.artikkelkort a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--rund);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(23, 37, 58, 0.1);
  text-decoration: none;
  color: var(--tekst);
  transition: transform 0.3s var(--myk);
}
.artikkelkort a:hover {
  transform: translateY(-2px);
}
.artikkelkort img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.kort-tekst {
  display: grid;
  gap: 6px;
  padding: 16px 18px 20px;
}
.kort-tekst strong {
  font-family: var(--tittel);
  font-size: 21px;
  line-height: 1.15;
}
.kort-tekst span {
  color: var(--dempet);
  font-size: 16px;
}
.kort-tekst .kort-meta {
  font-size: 15px;
}
@media (prefers-reduced-motion: reduce) {
  .artikkelkort a {
    transition: none;
  }
  .artikkelkort a:hover {
    transform: none;
  }
}