/*
 * Thale marketing site. Built from the Figma frames "Thale – nettside v2" (desktop 101:1522,
 * mobile 108:775). Mobile first; the desktop frame takes over at 960px.
 * Spec: docs/05-build/slices/slice-11a-marketing-site.md
 */

/* Restated from design-system.md, which is the source of truth. The site may not import the
   app's tokens (arch-monorepo), so a change there has to be copied here by hand. */
:root {
  --bg-base: #f7f2e7;
  --bg-sunken: #ede6d6;
  --bg-raised: #fdfaf3;
  --bg-line: #dfd5c0;
  --text-primary: #241c17;
  --text-secondary: #5a4e44;
  --accent-rust: #a03526;
  --surface-moss: #808063;
  --surface-sage: #a9b688;
  --surface-amber: #d8a35c;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --thale-gradient:
    radial-gradient(50% 50% at 85% 25%, rgb(216 163 92 / 0.55), rgb(216 163 92 / 0)),
    linear-gradient(to bottom right, #a03526 16.667%, #ce6433 46.667%, #d8a35c 70%, #cfc497 83.333%);

  --gutter: 24px;
  --page: 608px;
}

/* Self-hosted so no visitor request reaches a third party. Latin subset only; the arrow lives
   in its own one-glyph file because Google's Latin subset leaves U+2192 out. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-arrow.woff2") format("woff2");
  unicode-range: U+2192;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol,
figure,
blockquote {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid var(--accent-rust);
  outline-offset: 3px;
  border-radius: 4px;
}

.skjult {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hopp {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 8px 14px;
  background: var(--bg-raised);
  border-radius: 999px;
}

.hopp:focus {
  top: 12px;
}

.innhold {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.bare-desktop {
  display: none;
}

/* Shared type */

.overtekst {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: normal;
  color: var(--accent-rust);
}

.tittel {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 42px;
  letter-spacing: -0.02em;
}

.ingress {
  font-size: 17px;
  line-height: 26px;
  color: var(--text-secondary);
}

.merknad {
  font-size: 14px;
  line-height: 19px;
  color: var(--text-secondary);
}

/* Logo */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: normal;
}

.logo img {
  width: 24px;
  height: 24px;
}

/* Buttons */

.knapp-kant {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--accent-rust);
  border-radius: 999px;
  color: var(--accent-rust);
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

.knapp-kant:hover {
  background: rgb(160 53 38 / 0.06);
}

/* The App Store link has no href until the app is listed (slice 11). */
.app-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  border-radius: 100px;
  background: var(--accent-rust);
  color: var(--bg-raised);
  text-decoration: none;
  line-height: normal;
  white-space: nowrap;
}

.app-store img {
  width: 25px;
  height: 29px;
}

.app-store span {
  display: flex;
  flex-direction: column;
}

.app-store small {
  font-size: 11px;
}

.app-store strong {
  font-size: 22px;
  font-weight: 500;
}

.app-store[href]:hover {
  background: #8e2e21;
}

/* Phone mock: bezel and shadow are CSS, the screen is an export from the Figma marketing kit.
   Everything scales with the phone's own width (417px in Figma), hence the container units. */
.telefon {
  container-type: inline-size;
}

.telefon-ramme {
  padding: calc(100cqw * 12 / 417);
  border-radius: calc(100cqw * 62 / 417);
  background: var(--text-primary);
  box-shadow: 0 calc(100cqw * 30 / 417) calc(100cqw * 60 / 417) calc(100cqw * -10 / 417)
    rgb(65 26 16 / 0.22);
}

.telefon-ramme img {
  width: 100%;
  height: auto;
  border-radius: calc(100cqw * 50 / 417);
}

/* Nav */

.nav .innhold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
}

.nav-lenker {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-lenker a:not(.knapp-kant) {
  font-size: 15px;
  text-decoration: none;
}

.nav-lenker a:not(.knapp-kant):hover {
  color: var(--accent-rust);
}

.nav-lenker li:not(:last-child) {
  display: none;
}

/* Hero */

.hero .innhold {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-block: 24px 64px;
}

.hero-tekst {
  display: contents;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 56px;
  letter-spacing: -0.03em;
}

.hero h1 em {
  color: var(--accent-rust);
}

.handlinger {
  display: contents;
}

.dagkort {
  position: relative;
  width: 100%;
  aspect-ratio: 345 / 470;
  overflow: hidden;
  border-radius: 24px;
  background: var(--thale-gradient);
}

.dagkort .telefon {
  position: absolute;
  left: 50%;
  top: 7.66%;
  width: 74.94%;
  transform: translateX(-50%);
}

/* Launch countdown: its own band under the hero, on the brand gradient. display on the list is
   set only when not [hidden], or the attribute that hides the numbers without JavaScript loses. */

/* Rust, not the full brand gradient: the gradient's pale amber end leaves cream text below
   4.5:1, so the warmth comes from a glow kept away from the centred text. */
.nedtelling {
  background:
    radial-gradient(55% 140% at 100% 0%, rgb(216 163 92 / 0.45), rgb(216 163 92 / 0)),
    radial-gradient(45% 120% at 0% 100%, rgb(206 100 51 / 0.5), rgb(206 100 51 / 0)),
    var(--accent-rust);
  color: var(--bg-raised);
}

.nedtelling time {
  white-space: nowrap;
}

.nedtelling .innhold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: 56px;
  text-align: center;
}

.nedtelling .overtekst {
  color: var(--bg-raised);
  opacity: 0.85;
}

.nedtelling .tittel time {
  font-style: italic;
}

.nedtelling-tall:not([hidden]) {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 5vw, 48px);
  margin-top: 8px;
  padding: 0;
  list-style: none;
}

.nedtelling-tall li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2ch;
}

.nedtelling-tall span {
  font-family: var(--serif);
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.nedtelling-tall small {
  margin-top: 8px;
  font-size: 14px;
  line-height: normal;
  opacity: 0.85;
}

/* Løfter */

.lofter {
  background: var(--bg-sunken);
}

.lofter .innhold {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-block: 0;
  padding-block: 40px;
  list-style: none;
}

.lofter li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lofter h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
}

.lofter p {
  color: var(--text-secondary);
}

.lofter .merke {
  display: none;
  width: 22px;
  height: 22px;
}

/* Si det */

.si-det .innhold {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 64px;
}

.si-det-tekst {
  display: contents;
}

.si-det .telefon-boks {
  order: 1;
  display: flex;
  justify-content: center;
}

.si-det .telefon {
  width: 77.36%;
}

.steg {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Angre */

.angre {
  background: var(--bg-sunken);
}

.angre .innhold {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 64px;
}

.angre-topp {
  display: contents;
}

.kort-rad {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resultatkort {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
  padding: 18px;
  border: 1px solid var(--bg-line);
  border-radius: 16px;
  background: var(--bg-raised);
}

.resultatkort:not(.flyttet) {
  display: none;
}

.resultatkort-innhold {
  display: flex;
  gap: 14px;
}

.resultatkort-innhold::before {
  content: "";
  flex: 0 0 4px;
  height: 64px;
  border-radius: 2px;
  background: var(--stripe);
}

.lagt-inn {
  --stripe: var(--surface-sage);
}

.flyttet {
  --stripe: var(--surface-amber);
}

.fullfort {
  --stripe: var(--surface-moss);
}

.resultatkort-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.etikett {
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.resultatkort h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

/* Illustrations of the app's buttons, not buttons on this page. */
.piller {
  display: flex;
  gap: 8px;
}

.pille {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
}

.pille-endre {
  background: var(--bg-sunken);
}

.pille-angre {
  border: 1px solid var(--bg-line);
  color: var(--accent-rust);
}

/* Sitat */

.sitat .innhold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-block: 64px;
  text-align: center;
}

.sitat .merke {
  width: 40px;
  height: 40px;
}

.sitat blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
}

.sitat figcaption {
  display: none;
}

/* Grupper */

.grupper {
  background: var(--bg-raised);
}

.grupper .innhold {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 64px;
}

.grupper-tekst {
  display: contents;
}

.ledighet {
  display: none;
}

/* Prøv Thale */

.prov .innhold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-block: 64px;
  text-align: center;
}

.prov .overtekst {
  display: none;
}

/* Bunntekst */

.bunntekst {
  border-top: 1px solid var(--bg-line);
  background: var(--thale-gradient);
  color: var(--bg-base);
}

.bunntekst .innhold {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-block: 32px 30px;
}

.signatur {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bunntekst .logo {
  gap: 0;
  font-size: 34px;
  letter-spacing: -0.04em;
}

.bunntekst .logo img {
  width: 46px;
  height: 46px;
}

.bunntekst .slagord {
  display: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
}

.fotlenker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.fotlenker a {
  text-decoration: none;
  text-underline-offset: 3px;
}

.fotlenker a[href]:hover,
.fotlenker a[aria-current] {
  text-decoration: underline;
}

.opphavsrett {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.bunntekst a:focus-visible {
  outline-color: var(--bg-base);
}

/* Desktop: the 1440px frame. Fixed Figma widths become clamps so 960–1440 still fits. */
@media (min-width: 960px) {
  :root {
    --gutter: 80px;
    --page: 1440px;
  }

  .bare-mobil {
    display: none;
  }

  .bare-desktop {
    display: revert;
  }

  .overtekst {
    font-size: 18px;
  }

  .tittel {
    font-size: 56px;
    line-height: 60px;
  }

  .ingress {
    font-size: 18px;
    line-height: 28px;
  }

  .nav .innhold {
    padding-block: 28px;
  }

  .logo {
    gap: 10px;
    font-size: 28px;
  }

  .logo img {
    width: 30px;
    height: 30px;
  }

  .knapp-kant {
    padding: 10px 18px;
    font-size: 15px;
  }

  .nav-lenker li:not(:last-child) {
    display: list-item;
  }

  .hero .innhold {
    flex-direction: row;
    align-items: center;
    gap: 64px;
    padding-block: 40px 96px;
  }

  .hero-tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    flex: 1 1 0;
    min-width: 0;
  }

  .hero .overtekst {
    font-size: 20px;
  }

  .hero h1 {
    font-size: clamp(64px, 6.67vw, 96px);
    line-height: 1.02;
  }

  .hero .ingress {
    max-width: 500px;
    font-size: 19px;
    line-height: 29px;
  }

  .handlinger {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .dagkort {
    flex: 0 0 auto;
    width: clamp(400px, 38.9vw, 560px);
    aspect-ratio: 560 / 720;
    border-radius: 32px;
  }

  .dagkort .telefon {
    top: 7.78%;
    width: 55.1%;
  }

  .lofter .innhold {
    flex-direction: row;
    gap: 48px;
  }

  .lofter li {
    flex: 1 1 0;
    gap: 8px;
  }

  .lofter .merke {
    display: block;
  }

  .lofter h2 {
    font-size: 24px;
    line-height: 30px;
  }

  .lofter p {
    max-width: 360px;
  }

  .si-det .innhold {
    flex-direction: row;
    align-items: center;
    gap: clamp(48px, 6.67vw, 96px);
    padding-block: 120px;
  }

  .si-det .telefon-boks {
    order: 0;
    flex: 0 0 auto;
    width: clamp(320px, 33.3vw, 480px);
    aspect-ratio: 480 / 700;
    align-items: flex-start;
  }

  .si-det .telefon {
    width: 67.76%;
  }

  .si-det-tekst {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 0;
    min-width: 0;
  }

  .si-det .ingress {
    max-width: 520px;
  }

  .steg {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .steg li {
    display: flex;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--bg-line);
  }

  .steg-nummer {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    line-height: normal;
    color: var(--accent-rust);
  }

  .steg h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
  }

  .steg p {
    margin-top: 4px;
    color: var(--text-secondary);
  }

  .angre .innhold {
    align-items: center;
    gap: 48px;
    padding-block: 112px;
  }

  .angre-topp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .angre .ingress {
    max-width: 620px;
  }

  .kort-rad {
    width: 100%;
    justify-content: center;
  }

  .resultatkort,
  .resultatkort:not(.flyttet) {
    display: flex;
    max-width: 360px;
    padding: 20px;
  }

  .sitat .innhold {
    gap: 28px;
    padding-block: 120px;
  }

  .sitat .merke {
    width: 56px;
    height: 56px;
  }

  .sitat blockquote p {
    max-width: 980px;
    font-size: 36px;
    line-height: 48px;
  }

  .sitat figcaption {
    display: block;
  }

  .grupper .innhold {
    flex-direction: row;
    align-items: center;
    gap: clamp(48px, 6.67vw, 96px);
    padding-block: 112px;
  }

  .grupper-tekst {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 0;
    min-width: 0;
  }

  .grupper .tittel {
    max-width: 540px;
  }

  .grupper .ingress {
    max-width: 500px;
  }

  .ledighet {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 0 0 auto;
    width: clamp(400px, 37.5vw, 540px);
    padding: 28px;
    border: 1px solid var(--bg-line);
    border-radius: 16px;
    background: var(--bg-base);
  }

  .prov .innhold {
    gap: 24px;
    padding-block: 120px;
  }

  .prov .overtekst {
    display: block;
  }

  .prov .tittel {
    font-size: 64px;
    line-height: 68px;
  }

  .prov .merknad {
    font-size: 18px;
    line-height: 28px;
  }

  .bunntekst .innhold {
    padding-inline: 120px;
  }

  .bunntekst .slagord {
    display: block;
  }

}

/* Availability chart (desktop only). Bars are placed as a share of 08:00–20:00. */
.ledighet-etikett {
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--text-secondary);
}

.timer,
.person {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 16px;
  align-items: center;
}

.timer-skala {
  position: relative;
  grid-column: 2;
  height: 16px;
  font-size: 12px;
  line-height: normal;
  color: var(--text-secondary);
}

.timer-skala span {
  position: absolute;
  top: 0;
}

/* Classes rather than inline styles: the CSP allows stylesheets from 'self' only. */
.timer-skala span:nth-child(1) {
  left: 0;
}

.timer-skala span:nth-child(2) {
  left: calc(33.33% - 6px);
}

.timer-skala span:nth-child(3) {
  left: calc(66.67% - 6px);
}

.timer-skala span:nth-child(4) {
  right: 0;
}

.fra-0 { left: 0; }
.fra-15 { left: 15%; }
.fra-45 { left: 45%; }
.fra-48 { left: 48%; }
.fra-50 { left: 50%; }
.lengde-20 { width: 20%; }
.lengde-25 { width: 25%; }
.lengde-32 { width: 32%; }
.lengde-40 { width: 40%; }
.lengde-50 { width: 50%; }
.lengde-55 { width: 55%; }

.personer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.person {
  font-size: 14px;
  line-height: 19px;
}

.spor {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--bg-sunken);
}

.spor span {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 7px;
  background: var(--surface-moss);
}

.felles-ledig {
  position: absolute;
  inset: -3.5px 0 -3.5px 72px;
  pointer-events: none;
}

.felles-ledig::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 16.667%;
  border: 1.5px solid var(--accent-rust);
  border-radius: 8px;
}

.thale-linje {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 24px;
  color: var(--text-secondary);
}

.thale-linje img {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

/* Scroll animation. Only under html.anim, which animasjon.js sets, so a page without the
   script shows everything. The script skips itself under reduced motion. */
.anim [data-vis] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.anim [data-vis="skala"] {
  transform: scale(0.94);
}

.anim [data-vis="venstre"] {
  transform: translateX(-40px);
}

.anim [data-vis="hoyre"] {
  transform: translateX(40px);
}

.anim [data-vis].vist {
  opacity: 1;
  transform: none;
}

.anim [data-vis-delay="1"] {
  transition-delay: 0.1s;
}

.anim [data-vis-delay="2"] {
  transition-delay: 0.2s;
}

.anim [data-vis-delay="3"] {
  transition-delay: 0.3s;
}

.anim [data-vis-delay="4"] {
  transition-delay: 0.4s;
}

/* The availability bars fill in from 08:00, then the shared slot is marked. */
.anim .ledighet .spor span {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s;
}

.anim .ledighet.vist .spor span {
  transform: none;
}

.anim .ledighet .felles-ledig,
.anim .ledighet .thale-linje {
  opacity: 0;
  transition: opacity 0.6s ease 1.2s;
}

.anim .ledighet.vist .felles-ledig,
.anim .ledighet.vist .thale-linje {
  opacity: 1;
}

/* Where the browser supports scroll-driven animation, the hero phone drifts up as the page
   scrolls. Others keep it still, which is the design as drawn. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dagkort .telefon-ramme,
    .si-det .telefon-ramme {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes drift {
  from {
    transform: translateY(6%);
  }

  to {
    transform: translateY(-6%);
  }
}

/* Inner pages. No Figma frames exist for these; they reuse the homepage's parts: a hero
   with a gradient card, full-width bands in base / sunken / raised, the serif titles, the
   result cards, and the "La Thale finne tiden" close. */

.side-hero .innhold {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 24px 64px;
}

.side-hero-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.side-tittel {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -0.03em;
}

.side-tittel em {
  color: var(--accent-rust);
}

.visualkort {
  position: relative;
  width: 100%;
  aspect-ratio: 345 / 400;
  overflow: hidden;
  border-radius: 24px;
  background: var(--thale-gradient);
}

.visualkort .telefon {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 70%;
  transform: translateX(-50%);
}

.visualkort-merke {
  position: absolute;
  right: -12%;
  bottom: -18%;
  width: 78%;
  height: auto;
  opacity: 0.9;
}

/* A conversation shown on the gradient card: the user's line, then Thale's answer. */
.samtale {
  position: absolute;
  inset: 12% 8% auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.boble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 21px;
  box-shadow: 0 12px 30px -12px rgb(65 26 16 / 0.35);
}

.boble-du {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--bg-sunken);
}

.boble-thale {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom-left-radius: 6px;
  background: var(--bg-raised);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 22px;
}

.boble-thale .avsender {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
}

.boble-thale .avsender img {
  width: 18px;
  height: 18px;
}

.band .innhold {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 64px;
}

.band-senket {
  background: var(--bg-sunken);
}

.band-hevet {
  background: var(--bg-raised);
}

.band-topp {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.band-topp.midt {
  align-items: center;
  text-align: center;
}

.band-topp .ingress {
  max-width: 620px;
}

.kortnett {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.infokort {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--bg-line);
  border-radius: 16px;
  background: var(--bg-raised);
}

.band-hevet .infokort {
  background: var(--bg-base);
}

.infokort .merke {
  width: 22px;
  height: 22px;
}

.infokort h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
}

.infokort p {
  color: var(--text-secondary);
}

.infokort-nummer {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--accent-rust);
}

a.infokort {
  height: 100%;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

a.infokort:hover {
  border-color: var(--accent-rust);
  transform: translateY(-2px);
}

.infokort .lenkepil {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent-rust);
}

.plassholder {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px;
  border: 1px dashed var(--bg-line);
  border-radius: 16px;
  background: var(--bg-raised);
  color: var(--text-secondary);
}

.plassholder img {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

/* Big centred statement, the quote section's sibling. */
.utsagn .innhold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-block: 64px;
  text-align: center;
}

.utsagn .merke {
  width: 40px;
  height: 40px;
}

.utsagn p {
  max-width: 900px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: -0.01em;
}

/* FAQ */

.faq-oppsett {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq-meny {
  display: none;
}

.faq-grupper {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.faq-gruppe {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 24px;
}

.faq-gruppe h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 32px;
}

.faq {
  display: flex;
  flex-direction: column;
  padding-inline: 20px;
  border: 1px solid var(--bg-line);
  border-radius: 16px;
  background: var(--bg-raised);
}

.faq details + details {
  border-top: 1px solid var(--bg-line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: 0 0 28px;
  height: 28px;
  border-radius: 999px;
  background:
    linear-gradient(var(--accent-rust), var(--accent-rust)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--accent-rust), var(--accent-rust)) center / 1.5px 12px no-repeat,
    var(--bg-sunken);
  transition: transform 0.25s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover {
  color: var(--accent-rust);
}

.faq summary:focus-visible {
  outline: 2px solid var(--accent-rust);
  outline-offset: 2px;
  border-radius: 6px;
}

.faq details > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  padding-bottom: 20px;
  color: var(--text-secondary);
}

.faq a,
.band a:not(.infokort, .app-store, .knapp-kant),
.dokument-tekst a,
.side-hero .ingress a {
  color: var(--accent-rust);
  text-underline-offset: 3px;
}

/* Last ned: four steps on a line */

.trinnrad {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: trinn;
}

.trinnrad li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-line);
  counter-increment: trinn;
}

.trinnrad li::before {
  content: "0" counter(trinn);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--accent-rust);
}

.trinnrad h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
}

.trinnrad p {
  color: var(--text-secondary);
}

.app-store-snart {
  opacity: 0.92;
}

.to-kolonner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.to-kolonner > * {
  flex: 1 1 0;
  min-width: 0;
}

/* Documents: privacy and terms */

.dokument-hero {
  background: var(--bg-sunken);
}

.dokument-hero .innhold {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 40px 48px;
}

/* "Personvernerklæring" is one long word and does not fit a 393 px screen at the hero size. */
.dokument-hero .side-tittel {
  font-size: 36px;
  line-height: 42px;
}

.dokument-hero .merknad {
  margin-top: 4px;
}

.dokument-tekst {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 720px;
  padding-block: 48px 96px;
}

.dokument-tekst h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
}

.dokument-tekst ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
}

/* 404 */

.feil .innhold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-block: 64px 112px;
  text-align: center;
}

.feil-tall {
  font-family: var(--serif);
  font-style: italic;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-rust);
}

.feil .merke {
  width: 56px;
  height: 56px;
}

.knapperad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.knapp-fylt {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent-rust);
  color: var(--bg-raised);
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
}

.knapp-fylt:hover {
  background: #8e2e21;
}

@media (min-width: 960px) {
  .fotlenker {
    gap: 12px 28px;
  }

  .side-hero .innhold {
    flex-direction: row;
    align-items: center;
    gap: 64px;
    padding-block: 40px 96px;
  }

  .side-hero-tekst {
    flex: 1 1 0;
    min-width: 0;
    gap: 28px;
  }

  .side-hero .overtekst {
    font-size: 20px;
  }

  .side-tittel {
    font-size: clamp(56px, 5.6vw, 80px);
    line-height: 1.04;
  }

  .side-hero .ingress {
    max-width: 520px;
    font-size: 19px;
    line-height: 29px;
  }

  .visualkort {
    flex: 0 0 auto;
    width: clamp(360px, 33vw, 480px);
    aspect-ratio: 480 / 540;
    border-radius: 32px;
  }

  .band .innhold {
    gap: 48px;
    padding-block: 112px;
  }

  .kortnett {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .kortnett.to {
    grid-template-columns: repeat(2, 1fr);
  }

  .utsagn .innhold {
    gap: 28px;
    padding-block: 120px;
  }

  .utsagn .merke {
    width: 56px;
    height: 56px;
  }

  .utsagn p {
    font-size: 36px;
    line-height: 48px;
  }

  /* Outranks .band .innhold, which would keep this a column. */
  .band .faq-oppsett {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 64px;
    align-items: start;
  }

  .faq-meny {
    position: sticky;
    top: 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .faq-meny a {
    display: block;
    padding: 8px 0 8px 16px;
    border-left: 2px solid var(--bg-line);
    color: var(--text-secondary);
    text-decoration: none;
  }

  .faq-meny a:hover {
    border-left-color: var(--accent-rust);
    color: var(--text-primary);
  }

  .faq-grupper {
    gap: 48px;
  }

  .faq {
    padding-inline: 28px;
  }

  .faq summary {
    padding-block: 22px;
    font-size: 18px;
  }

  .trinnrad {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .trinnrad.tre {
    grid-template-columns: repeat(3, 1fr);
  }

  .to-kolonner {
    flex-direction: row;
    align-items: center;
    gap: 96px;
  }

  .dokument-hero .innhold {
    padding-block: 72px 80px;
  }

  .dokument-hero .side-tittel {
    font-size: 64px;
    line-height: 1.05;
  }

  .dokument-tekst {
    padding-block: 72px 120px;
  }

  .feil-tall {
    font-size: 200px;
  }
}