/* ==========================================================================
   Components
   ========================================================================== */

/* Buttons ---------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  background: var(--ocean);
  color: var(--white);
  border: 2px solid var(--ocean);
  border-radius: var(--radius-s);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.button:hover {
  background: var(--fjord);
  border-color: var(--fjord);
  color: var(--white);
}

.button:active {
  transform: translateY(1px);
}

.button--quiet {
  background: transparent;
  color: var(--tar);
  border-color: var(--tar);
}

.button--quiet:hover {
  background: var(--tar);
  border-color: var(--tar);
}

.button--small {
  min-height: 44px;
  padding: 0.45rem 1.1rem;
  font-size: var(--step--1);
}

.button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.link-button {
  padding: 0;
  background: none;
  border: 0;
  color: var(--fjord);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.link-button:hover {
  text-decoration-thickness: 2px;
}

/* Hero hull illustration -------------------------------------------------
   Only the bow is drawn; the planks run off to the left and fade out.
   The box has a FIXED aspect ratio, so on wide screens the ship grows
   as a whole instead of being stretched long and thin. The SVG uses
   preserveAspectRatio="xMaxYMax slice": the bow is always in view and
   only the (faded) plank ends are cropped. */
.hull {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 1.8 / 1;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 38%);
  mask-image: linear-gradient(to right, transparent, #000 38%);
}

.strake__lap {
  fill: none;
  stroke: rgb(0 0 0 / 0.38);
  stroke-width: 2;
}

/* Rivets: a dotted line made from zero-length dashes with round caps */
.strake__rivets {
  fill: none;
  stroke: var(--ochre);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 0 40;
  opacity: 0.85;
}

.hull__stem {
  fill: none;
  stroke: var(--tar);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The sea: a fjord-blue swell behind, solid ocean in front and one light
   crest line. Each path repeats every 88 units, so sliding 88 loops cleanly. */
.hull__swell {
  fill: var(--fjord);
}

.hull__water {
  fill: var(--ocean);
}

.hull__wave {
  fill: none;
  stroke: rgb(233 238 236 / 0.3);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Cargo: screens with different kinds of websites, in the same flat style as
   the service illustrations */
.cargo__bezel {
  fill: var(--tar);
}
.cargo__neck {
  fill: var(--tar-soft);
}
.cargo__screen {
  fill: var(--white);
}
.cargo__home {
  fill: var(--tar-soft);
}
.cargo__nav {
  fill: var(--spray-dim);
}
.cargo__logo,
.cargo__headline,
.cargo__line-dark {
  fill: var(--tar);
}
.cargo__cta {
  fill: var(--ochre);
}
.cargo__img,
.cargo__hero {
  fill: var(--fjord);
}
.cargo__img--warm {
  fill: #e7c58a; /* light ochre */
}
.cargo__icon {
  fill: var(--ochre);
}
.cargo__head-light {
  fill: var(--spray);
}
.cargo__line {
  fill: #c7d0cc;
}

/* 1. When the ship comes into view it is built plank by plank, from the keel
      up (src/js/hero-ship.js holds it back until it is on screen).
   3. Then the ship rocks gently while the water flows past.
   All of it is switched off for prefers-reduced-motion (see base.css). */
.strake {
  animation: plank-in 1.1s var(--ease-out) both;
  animation-delay: calc(var(--i) * 140ms + 200ms);
}

.strake__rivets {
  animation: fade-in 0.5s ease both;
  animation-delay: calc(var(--i) * 140ms + 1100ms);
}

.hull__stem {
  animation: fade-in 0.6s ease both;
  animation-delay: 1100ms;
}

.hull__ship {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: rock 7s ease-in-out 2.8s infinite;
}

/* 2. The screens are lowered into the ship one by one, then switch on */
.cargo {
  animation: cargo-in 0.7s var(--ease-out) both;
  animation-delay: calc(var(--i) * 160ms + 1250ms);
}

.cargo__site {
  animation: fade-in 0.4s ease both;
  animation-delay: calc(var(--i) * 160ms + 1850ms);
}

.hull__water,
.hull__wave {
  animation: flow 9s linear infinite;
}

.hull__swell {
  animation: flow 13s linear infinite reverse;
}

.hull__wave {
  animation-duration: 15s;
}

@keyframes plank-in {
  from {
    opacity: 0;
    transform: translateX(-220px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes cargo-in {
  from {
    opacity: 0;
    transform: translateY(-46px);
  }
}

@keyframes rock {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(5px) rotate(0.3deg);
  }
}

@keyframes flow {
  to {
    transform: translateX(-88px);
  }
}

/* Services --------------------------------------------------------------- */

.services {
  display: grid;
  gap: 0 var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  align-content: start;
  padding: var(--space-m) 0 var(--space-l);
  border-top: 3px solid var(--tar);
}

.service h3 {
  font-size: var(--step-2);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.service__fit {
  color: var(--muted);
  font-size: var(--step--1);
}

/* Included --------------------------------------------------------------- */

.included {
  margin-top: var(--space-l);
  padding: var(--space-l) var(--space-m);
  background: var(--white);
  border-radius: var(--radius-m);
  border-left: 6px solid var(--ochre);
}

.included__title {
  margin-bottom: var(--space-m);
}

.included__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-m) var(--space-l);
  margin: 0;
}

@media (min-width: 72rem) {
  .included__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-m);
  }
}

.included__list dt {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.included__list dd {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

@media (min-width: 48rem) {
  .included {
    padding: var(--space-l);
  }
}

/* Prices ------------------------------------------------------------------
   Three packages side by side on wide screens, the recommended one in deep
   sea blue. Amounts are the biggest text in each card, and every price says
   whether it is paid once or every month. */

.packages {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.package {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l) var(--space-m);
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: inset 0 0 0 1px var(--spray-dim);
}

.package__name {
  font-size: var(--step-2);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.package__for {
  color: var(--muted);
}

.package__price {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: var(--space-xs);
}

.package__amount {
  font-size: clamp(2.1rem, 1.5rem + 1.6vw, 2.9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.package__unit {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.package__list {
  display: grid;
  gap: 0.55rem;
  margin: var(--space-xs) 0 0;
  padding: var(--space-s) 0 0;
  border-top: 1px solid var(--spray-dim);
  list-style: none;
}

.package__list li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.45;
}

/* A small check mark, drawn with two borders */
.package__list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.25em;
  width: 0.45rem;
  height: 0.8rem;
  border: solid var(--fjord);
  border-width: 0 3px 3px 0;
  transform: rotate(40deg);
}

.package__time {
  margin-top: auto; /* time and button line up at the bottom of every card */
  padding-top: var(--space-xs);
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
}

.package__cta {
  width: 100%;
}

/* The recommended package */
.package--featured {
  --focus: var(--ochre);
  position: relative;
  background: var(--ocean);
  color: var(--spray);
  box-shadow: none;
}

.package--featured .package__for,
.package--featured .package__unit,
.package--featured .package__time {
  color: #c9d1ce;
}

.package--featured .package__amount {
  color: var(--ochre);
}

.package--featured .package__list {
  border-top-color: rgb(143 196 207 / 0.3);
}

.package--featured .package__list li::before {
  border-color: #8fc4cf;
}

.package--featured .package__cta {
  background: var(--spray);
  border-color: var(--spray);
  color: var(--ocean);
}

.package--featured .package__cta:hover {
  background: var(--ochre);
  border-color: var(--ochre);
}

.package__badge {
  align-self: flex-start;
  margin-bottom: calc(var(--space-xs) * -1);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-s);
  background: var(--ochre);
  color: var(--tar);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Tablets: one card per row, with the price on the left and the contents on
   the right, so the cards don't turn into long empty strips */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .package {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "badge list"
      "name list"
      "for list"
      "price time"
      "price cta";
    column-gap: var(--space-l);
    align-content: start;
  }

  .package .package__badge {
    grid-area: badge;
    justify-self: start;
  }
  .package .package__name {
    grid-area: name;
  }
  .package .package__for {
    grid-area: for;
  }
  .package .package__price {
    grid-area: price;
    align-self: end;
  }
  .package .package__list {
    grid-area: list;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .package .package__time {
    grid-area: time;
    align-self: end;
  }
  .package .package__cta {
    grid-area: cta;
    align-self: end;
  }
}

@media (min-width: 64rem) {
  .packages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .package {
    padding: var(--space-l);
  }

  /* lift the recommended card a little above the other two */
  .package--featured {
    margin-block: calc(var(--space-s) * -1);
    padding-block: calc(var(--space-l) + var(--space-s));
  }
}

/* Monthly plan and add-ons */
.price-extras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  margin-top: var(--space-l);
}

@media (min-width: 56rem) {
  .price-extras {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-l);
  }
}

.monthly {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-l) var(--space-m);
  background: var(--white);
  border-radius: var(--radius-m);
  border-left: 6px solid var(--fjord);
}

.monthly__name,
.addons__title {
  font-size: var(--step-1);
  font-weight: 900;
}

.monthly .package__price {
  margin-top: 0;
}

.monthly__text {
  color: var(--muted);
}

.monthly .package__cta {
  width: auto;
}

.addons {
  padding-top: var(--space-m);
  border-top: 3px solid var(--tar);
}

.addons__list {
  margin: var(--space-s) 0 0;
}

/* Price list rows with a dotted leader between the item and the price */
.addons__list > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--spray-dim);
}

.addons__list > div::after {
  content: "";
  order: 1;
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 2px dotted #9aa6a2;
  transform: translateY(-0.3em);
}

.addons__list dt {
  order: 0;
  font-weight: 700;
}

.addons__list dd {
  order: 2;
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}

/* "Fleksibelt underveis" and "Betaling", side by side on wider screens */
.price-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-l);
}

@media (min-width: 48rem) {
  .price-notes {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.price-note h3 {
  margin-bottom: var(--space-xs);
  font-size: var(--step-1);
  font-weight: 900;
}

.price-note p {
  max-width: var(--measure);
  color: var(--muted);
}

@media (min-width: 48rem) {
  .monthly {
    padding: var(--space-l);
  }
}

/* Live proof band -------------------------------------------------------- */

.proof {
  --focus: var(--ochre);
  background: var(--ocean);
  color: var(--spray);
}

.proof__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "gauge"
    "stats";
  gap: var(--space-l);
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter);
}

.proof__intro {
  grid-area: intro;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
  align-content: start;
}

.proof__intro p {
  color: #c9d1ce;
  max-width: 40ch;
}

.proof__stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-l) var(--space-m);
  margin: 0;
}

.proof__stats > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
  padding-top: var(--space-s);
  border-top: 2px solid rgb(143 196 207 / 0.3); /* light fjord rule */
}

.proof__stats dt {
  color: #c9d1ce;
  font-size: var(--step--1);
}

.proof__stats dd {
  margin: 0;
  color: var(--ochre);
  font-size: clamp(1.9rem, 1.3rem + 1.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

@media (min-width: 56rem) {
  .proof__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      "intro gauge"
      "stats gauge";
    column-gap: var(--space-xl);
    align-items: center;
  }

  .proof__intro {
    align-self: end;
  }

  .proof__stats {
    align-self: start;
  }
}

/* Speedometer ---------------------------------------------------------------
   One SVG. --turn (0 = 5 s, 1 = 0 s) is set by page-stats.js and drives both
   the needle and the ochre arc, so they always agree. */

.gauge {
  grid-area: gauge;
  --turn: 0;
  --sweep: 1.8s;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}

.gauge__dial {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font);
}

.gauge__zone {
  fill: none;
  stroke-width: 22;
}
.gauge__zone--slow {
  stroke: #3a5560;
}
.gauge__zone--ok {
  stroke: #7fa0a8;
}
.gauge__zone--fast {
  stroke: #8fc4cf;
}

.gauge__zone-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-anchor: middle;
  text-transform: uppercase;
}
.gauge__zone-label--slow {
  fill: var(--spray);
}
.gauge__zone-label--ok,
.gauge__zone-label--fast {
  fill: var(--ocean);
}

.gauge__track,
.gauge__value {
  fill: none;
  stroke-width: 12;
}

.gauge__track {
  stroke: rgb(233 238 236 / 0.12);
}

.gauge__value {
  stroke: var(--ochre);
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--turn) * 100);
  transition: stroke-dashoffset var(--sweep) var(--ease-out);
}

.gauge__ticks {
  fill: none;
  stroke: var(--spray);
  stroke-width: 3;
  stroke-linecap: round;
}

.gauge__num {
  fill: #c9d1ce;
  font-size: 21px;
  font-weight: 700;
  text-anchor: middle;
}

/* Drawn pointing straight up (2.5 s), then turned: -120deg is 5 s, +120deg is 0 s.
   The curve overshoots a touch, like a real needle. */
.gauge__needle,
.gauge__pointer {
  transform-box: view-box;
  transform-origin: 240px 216px;
}

.gauge__needle {
  transform: rotate(calc(-120deg + var(--turn) * 240deg));
  transition: transform var(--sweep) cubic-bezier(0.3, 1.3, 0.45, 1);
}

.gauge__pointer {
  fill: var(--ochre);
}

/* Once the needle has arrived, it keeps hovering around the reading, like an
   engine running at speed. Stops with "Stopp animasjoner". */
.gauge[data-live] .gauge__pointer {
  animation: needle-hover 1.8s ease-in-out var(--sweep) infinite;
}

@keyframes needle-hover {
  0%,
  100% {
    transform: rotate(0deg);
  }
  14% {
    transform: rotate(-2.2deg);
  }
  27% {
    transform: rotate(1.2deg);
  }
  41% {
    transform: rotate(-1deg);
  }
  55% {
    transform: rotate(-2.8deg);
  }
  68% {
    transform: rotate(0.8deg);
  }
  84% {
    transform: rotate(-1.6deg);
  }
}

.gauge__hub {
  fill: var(--ocean);
  stroke: var(--ochre);
  stroke-width: 5;
}

.gauge__readout {
  fill: var(--spray);
  font-size: 62px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-anchor: middle;
}

.gauge__unit {
  fill: #c9d1ce;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-anchor: middle;
  text-transform: uppercase;
}

/* Without JavaScript nothing is measured, so don't show a reading */
html:not(.js) .gauge__needle,
html:not(.js) .gauge__value {
  display: none;
}

.gauge figcaption {
  margin-top: var(--space-s);
  color: #c9d1ce;
  font-size: var(--step--1);
  text-align: center;
}

/* Process steps (a real sequence, so numbered) --------------------------- */

.steps {
  display: grid;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  align-content: start;
  padding-top: var(--space-m);
  border-top: 3px solid var(--tar);
}

.step::before {
  content: counter(step);
  font-size: var(--step-3);
  font-weight: 900;
  line-height: 1;
  color: var(--fjord);
  letter-spacing: -0.04em;
}

.step p {
  color: var(--muted);
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-m);
  }
}

/* About portrait placeholder -------------------------------------------- */

.about__portrait {
  max-width: 26rem;
}

.portrait-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  color: var(--tar);
  font-weight: 700;
  /* Clinker planks, overlapping */
  background: repeating-linear-gradient(180deg, var(--spray-dim) 0 46px, #c7d2ce 46px 50px);
}

.portrait-placeholder span {
  padding: 0.4rem 0.9rem;
  background: var(--spray);
  border-radius: var(--radius-s);
}

/* Contact form ----------------------------------------------------------- */

.contact__direct {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center; /* labels line up with the 44px-tall links */
  gap: 0 var(--space-m);
  margin: var(--space-s) 0 0;
}

.contact__direct dt {
  font-weight: 700;
}

.contact__direct dd {
  margin: 0;
}

.contact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  padding: var(--space-l) var(--space-m);
  background: var(--white);
  border-radius: var(--radius-m);
}

@media (min-width: 48rem) {
  .contact-form {
    padding: var(--space-l);
  }
}

.field {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.field label,
.field legend {
  font-weight: 700;
  padding: 0;
}

.field__optional {
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  background: var(--white);
  border: 2px solid #8a958f;
  border-radius: var(--radius-s);
  transition: border-color 0.15s ease;
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.field input:hover,
.field textarea:hover {
  border-color: var(--tar-soft);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--fjord);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.field__error {
  color: var(--error);
  font-size: var(--step--1);
  font-weight: 700;
}

.choices__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.choice {
  position: relative;
  font-weight: 400 !important;
}

.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.choice span {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border: 2px solid #8a958f;
  border-radius: 999px;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.choice input:hover + span {
  border-color: var(--tar-soft);
}

.choice input:checked + span {
  background: var(--tar);
  border-color: var(--tar);
  color: var(--white);
}

.choice input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.contact-form__privacy {
  font-size: var(--step--1);
  color: var(--muted);
}

.contact-form__submit {
  justify-self: start;
}

.contact-form__status:empty {
  display: none;
}

.contact-form__status {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-s);
  background: var(--spray);
  border-left: 4px solid var(--fjord);
  font-weight: 700;
}

.contact-form__status[data-state="error"] {
  border-left-color: var(--error);
  color: var(--error);
}

/* Privacy dialog --------------------------------------------------------- */

.privacy {
  width: min(42rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem); /* browsers without dvh */
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--white);
  color: var(--tar);
}

.privacy::backdrop {
  background: rgb(43 33 27 / 0.6);
}

/* Without JavaScript the policy can't open as a dialog, so it is shown as an
   ordinary section at the bottom of the page instead */
html:not(.js) .privacy {
  display: block;
  position: static;
  width: auto;
  max-width: var(--max);
  max-height: none;
  margin: 0 auto var(--space-xl);
  border-radius: 0;
  background: none;
}

html:not(.js) .privacy form {
  display: none;
}

.privacy__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
  padding: var(--space-l) var(--space-m);
  font-size: var(--step--1);
}

@media (min-width: 40rem) {
  .privacy__inner {
    padding: var(--space-l);
  }
}

.privacy ul {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding-left: 1.2rem;
}

.privacy h2:focus {
  outline: none; /* focused on open so screen readers start at the title */
}

.privacy h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.25rem);
  margin-bottom: var(--space-xs);
}

.privacy h3 {
  font-size: var(--step-0);
  margin-top: var(--space-xs);
}

.privacy form {
  margin-top: var(--space-s);
}

/* Service illustrations ---------------------------------------------------
   Browser windows whose title bars are tarred planks with ochre rivets. */

.illo {
  width: 12rem;
  height: auto;
  margin-bottom: var(--space-s);
  overflow: visible;
}

.illo__frame {
  fill: var(--white);
}
.illo__frame--old {
  fill: var(--spray-dim);
}
.illo__outline {
  fill: none;
  stroke: var(--tar);
  stroke-width: 2.5;
}
.illo__bar {
  fill: var(--tar);
}
.illo__rivet {
  fill: var(--ochre);
}
.illo__block {
  fill: var(--fjord);
}
.illo__head {
  fill: var(--tar);
}
.illo__accent {
  fill: var(--ochre);
}
.illo__text {
  fill: #c7d0cc;
}
.illo__old {
  opacity: 0.85;
}
.illo__old .illo__outline {
  stroke: #8a958f;
  stroke-dasharray: 5 4;
}
.illo__old .illo__bar {
  fill: #8a958f;
}
.illo__old .illo__rivet {
  fill: var(--spray);
}
.illo__badge {
  fill: var(--ochre);
  stroke: var(--tar);
  stroke-width: 2.5;
}
.illo__mark {
  fill: var(--ochre);
  stroke: var(--tar);
  stroke-width: 2.5;
}
.illo__mark-inner {
  fill: var(--tar);
}
.illo__type {
  fill: var(--tar);
  font-family: var(--font);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.illo__swatch {
  stroke: var(--tar);
  stroke-width: 2;
}
.illo__swatch--a {
  fill: var(--ochre);
}
.illo__swatch--b {
  fill: var(--fjord);
}
.illo__swatch--c {
  fill: var(--tar);
}
.illo__nib {
  fill: var(--white);
  stroke: var(--tar);
  stroke-width: 2;
  stroke-linejoin: round;
}
.illo__nib-hole {
  fill: var(--tar);
}
.illo__nib-slit {
  stroke: var(--tar);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.illo__pill {
  fill: var(--spray-dim);
}
.illo__lock {
  fill: none;
  stroke: var(--ochre);
  stroke-width: 1.8;
}
.illo__lock-body {
  fill: var(--ochre);
}
.illo__link {
  fill: none;
  stroke: var(--tar);
  stroke-width: 2.5;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
}

/* Terminal in the about section ------------------------------------------- */

.about__terminal {
  margin-top: var(--space-m);
}

/* Terminal with the runic inscription ------------------------------------
   Drawn like the terminal in the logo: a dark rounded box with an ochre band
   and three dark dots on top, a ">" prompt and a light block cursor. Only the
   three logo colours. Text scales with the box (cqi), so lines always fit. */
.jarl-term {
  container-type: inline-size;
  overflow: hidden;
  border-radius: 18px;
  background: var(--tar);
}

.jarl-term__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 18px;
  background: var(--ochre);
}

.jarl-term__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tar);
}

.jarl-term__body {
  margin: 0;
  padding: 16px 16px 20px; /* browsers without container units */
  padding: clamp(14px, 5cqi, 26px) clamp(14px, 5.5cqi, 28px) clamp(18px, 6cqi, 30px);
  overflow-x: auto;
  color: var(--spray);
  /* Runes are not in the code font, so the browser falls through to Noto Sans Runic */
  font-family:
    Consolas, "Cascadia Mono", ui-monospace, "SF Mono", Menlo, monospace, "Noto Sans Runic";
  font-size: 12.5px; /* browsers without container units */
  font-size: clamp(12.5px, 3.45cqi, 15.5px);
  line-height: 1.7;
  tab-size: 2;
  scrollbar-width: thin;
  scrollbar-color: var(--tar-soft) transparent;
}

.jt-line {
  display: block;
  min-height: 1.7em;
  white-space: pre;
}

/* Like the <viking/> wordmark: punctuation ochre, text light */
.jt-a {
  color: var(--ochre);
}
.jt-cmd {
  color: rgb(233 238 236 / 0.7);
}

.jt-rune {
  font-size: 1.3em;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

/* The light cursor bar from the logo's ">_" */
.jt-caret {
  display: inline-block;
  width: 1.1em;
  height: 0.32em;
  border-radius: 1px;
  background: var(--spray);
  animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

.about__terminal figcaption {
  margin-top: var(--space-s);
  max-width: 42ch;
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.55;
}

/* Touch targets ------------------------------------------------------------
   Standalone text links get a 44px-tall tap area without looking bigger. */
.contact__direct a,
.site-footer a,
.link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-logo {
  transition: 0.3s ease;
}

.footer-logo:hover {
  opacity: 30%;
  cursor: pointer;
}

/* Links inside running text: extend the tap area with padding, and cancel it
   with an equal negative margin so the line spacing stays the same */
.privacy p a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}