/* ===========================================================================
   The bottom of the page: the plans, the questions, the closing card and the
   footer (16 Oct 2026). Loaded after lys.css and mobil.css so it is the last
   word on these four blocks without editing the many earlier layers in
   place, each of which records an owner's decision that is still true.

   What changed and why:
   - The three plans stood tilted, and Stor was scaled to 104 % and pushed
     up, so on a 1440 px screen it ran past the right edge of the section and
     no two cards had their price, their lines or their button at the same
     height. The cards are now one subgrid: every row (name, price, pling,
     extra pling, tagline, list, button) lines up across all three. Stor is
     still the one that is purple and tagged, just without the scale or lift.
   - The questions were two columns, so opening one left a hole beside it.
     They are one column at reading width now, and open with a fade and a
     glide of the cards below (site.js), never a jump.
   - The footer had its parts scattered along one line. It is three columns
     on a desktop (brand, trades, Pling's own links) and a short stack on a
     phone, with the legal line at the bottom.
   Only tokens from lys-tokens.css; no raw colours.
   =========================================================================== */

/* ---- the plans ---- */
#pris .section__head { justify-items: center; text-align: center; }
/* The note that paying through Pling is not open yet. mobil.css hides the
   lavender note on a phone (it was a «Kommer» aside about the network), but
   this one is what keeps «3,5 %» from reading as something that is charged
   today, so a phone shows it too. */
@media (max-width: 47.999rem) { #pris .pakke-nettverk { display: flex; } }

/* ---- the questions: one column at reading width ---- */
#sporsmal .faq { grid-template-columns: minmax(0, 1fr); gap: var(--l-s-3); max-width: 48rem; margin-inline: auto; }
#sporsmal .urgent { grid-column: auto; }
/* the answer starts under the question's words, not under its icon */
#sporsmal .q > p {
  padding-inline: calc(var(--l-card-pad) + var(--l-avatar) + var(--l-s-3)) var(--l-card-pad);
  color: var(--l-ink-2); max-width: none;
}
#sporsmal .q > p + p { margin-top: calc(-1 * var(--l-s-2)); }
/* site.js moves the answer in; the older keyframe would play on top of it */
#sporsmal .q[open] > p { animation: none; }
/* lys.css tints the round button on hover with the «background» shorthand,
   which also wiped the two bars drawn into it: an open question under the
   pointer showed an empty purple dot. The hover states are drawn whole. */
@media (hover: hover) {
  #sporsmal .q:hover summary::after {
    --q-bar: var(--l-purple-ink);
    background:
      linear-gradient(var(--q-bar), var(--q-bar)) center / var(--s-q-plus) var(--s-q-strek) no-repeat,
      linear-gradient(var(--q-bar), var(--q-bar)) center / var(--s-q-strek) var(--s-q-plus) no-repeat,
      var(--l-purple-soft);
  }
  #sporsmal .q[open]:hover summary::after {
    --q-bar: var(--l-on-fill);
    background: linear-gradient(var(--q-bar), var(--q-bar)) center / var(--s-q-plus) var(--s-q-strek) no-repeat, var(--l-purple-deep);
  }
}
@media (max-width: 47.999rem) {
  #sporsmal .q > p { padding-inline: var(--l-card-pad); }
}

/* ---- the closing card: lavender, so it reads as the end of the page ---- */
#kontakt .hello { background: var(--l-tint-lavender); border-color: transparent; }
#kontakt .hello h2 { text-wrap: balance; }
/* On a tablet too the figure stands beside the words, as on a desktop:
   under them it filled the lower half of the card on its own (20 Oct). */
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .hello { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 0; }
  .hello__copy { padding-bottom: var(--l-inset); }
  .hello__art { align-self: end; }
}
#kontakt .hello .btn { justify-self: start; }
@media (max-width: 47.999rem) {
  #kontakt .hello .btn { justify-self: stretch; justify-content: center; }
}

/* ---- the footer: one compact band (24 Oct, the owner: «så mye greier
   her på bunnen») — the mark and its line left, four plain links right, the
   business line small under both; stacked on a phone. ---- */
.foot { grid-template-columns: minmax(0, 1fr); gap: var(--l-s-3); padding-top: var(--l-s-6); }
/* The wordmark stands right on the foot's line, sinking behind it (.foot__ord above). */
.foot__ord + .foot { margin-top: 0; }
.foot__merke { display: flex; flex-wrap: wrap; align-items: center; gap: var(--l-s-2) var(--l-s-4); }
.foot__merke p { margin: 0; color: var(--l-ink-2); }
.foot nav.foot__lenker ul { display: flex; flex-wrap: wrap; gap: 0 var(--l-s-5); margin: 0; padding: 0; list-style: none; }
/* plain words here, not the header's pills: four of them read as one line */
.foot .foot__lenker a {
  min-height: var(--l-touch); padding-inline: 0; background: none; box-shadow: none;
  font-weight: var(--l-w-semi); color: var(--l-ink-2);
}
.foot .foot__lenker a:hover { background: none; box-shadow: none; color: var(--l-ink); }
/* the one pill among them: «Last ned for Mac» keeps the filled purple .btn (lys.css .mac-knapp) */
.foot .foot__lenker a.mac-knapp { padding-inline: var(--l-s-5); background: var(--l-purple); color: var(--l-on-fill); }
.foot .foot__lenker a.mac-knapp:hover { background: var(--l-purple-deep); box-shadow: var(--l-sh-soft); color: var(--l-on-fill); }
/* what ehandelsloven § 8 asks for: it must stay, so it is kept small and
   quiet instead (30 Oct, the owner), never under 11 px */
.foot__juss { display: block; margin: 0; font-size: max(.6875rem, 11px); color: color-mix(in srgb, var(--l-mute) 80%, transparent); }
/* the e-mail in the business line: a link inside the sentence, not a pill (inline links are exempt from the touch-size rule) */
.foot__juss a { display: inline; min-height: 0; min-width: 0; color: inherit; text-underline-offset: .2em; }
@media (min-width: 48rem) {
  .foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--l-s-6); row-gap: var(--l-s-2); }
  .foot__juss { grid-column: 1 / -1; }
}

/* ---- the big word (3 Nov 2026, the owner, after daymaker) ----
   The logo itself, so the colours are its own («ikke finne opp en farge»), but see-through
   and fading out towards the foot («litt gjennomsiktig og litt skjult»), so it reads as
   the page's ground and not as a second logo. Wider than the page's text, and before
   everything in the footer. It rises a little as it comes into view, where the browser
   can tie that to the scroll. */
.foot__ord {
  /* Sunk behind the foot's line, the top 80 % showing (3 Nov, the owner: «ikke 100 % synlig»,
     then, at 70 %, «litt høyere opp»): the rest is clipped, and taken back from the margin
     so the foot follows right under it. .1023 is 20 % of the height at the logo's 1150 × 588. */
  --foot-ord-b: clamp(18rem, 72vw, 60rem);
  display: block; width: var(--foot-ord-b); height: auto; margin: var(--l-s-9) auto calc(var(--foot-ord-b) * -.1023);
  clip-path: inset(0 0 20% 0);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .14) 62%, transparent);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .14) 62%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Done by the time it is all in view: it stands near the page's end, and short of its
       place at the very bottom it would hang past the foot's line. */
    .foot__ord { animation: foot-ord linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes foot-ord { from { opacity: .3; translate: 0 10%; } }
  }
}