/* ---------------------------------------------------------------------------
   The phone layout (9 Oct). The owner: «Det skal nesten være det samme som
   desktop, men bare mindre, og smooth.» So on a phone the page is the
   desktop design stacked and scaled down: the same sections in the same
   order, the menu still there, the plans all visible, the film compact
   enough to watch without scrolling past it.

   This file is linked with media="(max-width: 63.999rem)", so a desktop
   never applies it (nor waits for it), and it loads after lys.css so its
   rules win at equal specificity without !important. Kept apart from
   lys.css so the design branches that append to that file rebase cleanly.
   ------------------------------------------------------------------------- */

:root {
  --m-nav-t: .8125rem;                     /* 13 px: four menu words fit in one row at 360 */
  --m-tlf-b: 16.5rem;                      /* the film's phone, at the desktop's width before zoom */
  --m-tlf-zoom: .72;                       /* … and how far it is zoomed down */
  --m-phone-zoom: .8;                      /* the «Dette ser du» phone, below 48rem */
  --m-fast-h: 2.75rem;                     /* the fixed «Bli med» bar: a plain 44 px button */
  --m-pris: 1.75rem;                       /* 28: the two job-share cards' figures on a phone */
  --m-pris-valgt: 2.75rem;                 /* 44: the purple «0 kr» card's, the one the page lifts */
}

/* ---- the scale (10 Oct) ----
   The owner, on the first pass: «Telefonvisningen er jo dritt. Alt er for
   stort. Telefonvisningen skal være som vanlig, bare at alt er mindre.»
   At 390 the hero line was 42 px, its button 54 px with 18 px text, the
   plans' figures 42 px and every section 56 px apart: a zoomed-in desktop.
   So below 64rem the page's own size tokens are redefined as lines that run
   from a phone's size at 375 px to the desktop's own value at 1024 px,
   where this file stops applying. Nothing jumps at the breakpoint, every
   width in between is in proportion, and the rules that use the tokens are
   untouched. Each comment gives the value at 375 → 1024. */
:root {
  --s-hero-h1: clamp(1.75rem, .45rem + 6.1vw, 4.35rem);    /* 30 → 69, the front and trade pages' headline */
  --s-h1: clamp(1.625rem, .5rem + 4.2vw, 3.375rem);         /* 26 → 51 */
  --s-h2: clamp(1.3125rem, .82rem + 2.2vw, 2.25rem);        /* 22 → 36, section titles */
  /* 17 → 20, card titles: at 15 a card's bold title was smaller than the
     16 px text under it, and read as the lesser of the two (20 Oct) */
  --s-h3: clamp(1.0625rem, .92rem + .6vw, 1.25rem);
  --s-lead: clamp(1rem, .9rem + .5vw, 1.2rem);              /* 16 → 19.5: reading text never under 16 (16 Oct) */
  --s-section: clamp(2rem, .23rem + 7.55vw, 5rem);          /* 32 → 81 between sections */
  --s-price: clamp(2rem, .82rem + 5.55vw, 4.4rem);          /* 34 → 70 */
  --s-price-ny: clamp(1.75rem, 1.09rem + 3.33vw, 3.2rem);   /* 30 → 52, the plans' figures */
  --s-cta: clamp(2.75rem, 2.39rem + 1.54vw, 3.375rem);      /* 44 → 54, the hero's button */
  --l-t-lg: clamp(1rem, .816rem + .79vw, 1.32rem);          /* 16 → 21 */
  --l-t-title: clamp(1.1875rem, .94rem + 1.08vw, 1.625rem); /* 19 → 26 */
  --l-t-display: clamp(1.375rem, 1.03rem + 1.46vw, 2rem);   /* 22 → 31.5 */
  --l-t-md: clamp(.9375rem, .87rem + .3vw, 1rem);           /* 15 → 16, buttons and labels: the token's own floor (16 Oct) */
  --l-gap: clamp(.75rem, .5rem + 1.25vw, 1.5rem);           /* 12.7 → 21 between cards */
  --l-card-pad: clamp(.75rem, .5rem + 1.1vw, 1.5rem);       /* 12 → 19 inside a card */
  --l-inset: clamp(.875rem, .4rem + 2.2vw, 2.5rem);         /* 15 → 29 inside the frame and the plans */
  --l-control: var(--l-touch);                              /* 44: buttons are the tap target, no taller */
}
/* The hero's button: a 44 px button with button-sized text, as wide as its
   words, as on a desktop (it was a full-width 54 px bar). */
.hero--kort .hero__start { font-size: var(--l-t-md); }
.hero--midt .hero__start { width: auto; padding-inline: var(--l-s-7); }
/* The wordmark, a size down with the rest. */
.logo__ordmerke { height: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); }
.hero--midt .hero__copy { gap: var(--l-s-4); }
.hero--midt { padding-top: var(--l-s-6); }
/* «Hør samtalen»: the same 44 px pill, smaller text. */
.samtale__lyd { font-size: var(--l-t-sm); }
@media (max-width: 47.999rem) {
  /* «Dette ser du»: the desktop's phone drawing, zoomed as the film's is. */
  .showcase .phone { zoom: var(--m-phone-zoom); }
}

/* ---- header: the desktop menu, as one compact row under the logo ----
   lys.css hides it below 48rem so the hero button stays above the fold; a
   single 44 px row costs little and gives a phone the same four ways in as
   a desktop. If the row is ever wider than the screen it scrolls on its
   own, never the page. */
@media (max-width: 47.999rem) {
  .top { padding-block: var(--l-s-4) var(--l-s-2); row-gap: var(--l-s-2); }
  .top--kort .nav {
    display: flex; flex-wrap: nowrap; justify-content: safe center; gap: var(--l-s-1);
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .top--kort .top__cta { justify-self: end; }
  .top--kort .nav::-webkit-scrollbar { display: none; }
  /* Plain words, as the desktop's menu reads at a glance; the 44 px row
     stays the tap target, the grey pills behind each word are gone. */
  .top--kort .nav a { flex: none; justify-content: center; min-width: var(--l-touch); gap: var(--l-s-1); padding-inline: var(--l-s-2); background: none; font-size: var(--m-nav-t); white-space: nowrap; }
  .top--kort .nav svg { display: none; }
}

/* ---- the fixed «Bli med» bar ----
   It was a dark pill around the button, which read as a navy block over
   the page (the owner's rule: no navy blocks). Now the purple button
   stands alone with a soft white halo, a little lower. */
@media (max-width: 47.999rem) {
  .fastknapp { padding: 0; background: none; box-shadow: none; }
  .fastknapp__start { min-height: var(--m-fast-h); box-shadow: 0 0 0 .3rem rgba(255, 255, 255, .85), var(--l-sh-pop); }
  .fastknapp__ring { min-height: var(--m-fast-h); box-shadow: 0 0 0 .3rem rgba(255, 255, 255, .85), var(--l-sh-pop); }
}

/* ---- the plans: stacked, like the desktop's three cards in a column ----
   They were a sideways row the thumb had to swipe, so a phone saw Liten and
   the edge of Standard, and never Stor, the plan the page lifts. */
.pakker {
  grid-auto-flow: row; grid-auto-columns: auto; overflow: visible;
  scroll-snap-type: none; padding-bottom: 0;
}

/* ---- /nettverk-demo/: the same scale on its own cards ----
   Its hero sat 48 px down and its cards kept the desktop's 20–24 px
   padding; on a phone they take the page's smaller steps. */
.nd-hero { padding-top: var(--l-s-6); }
.nd-steg__kort { padding: var(--l-card-pad); }
.nd-loft li, .nd-sant li { padding: var(--l-s-3) var(--l-card-pad); }
.nd-demo { padding: var(--l-card-pad); }

/* ---- the phone's page, pruned and shrunk (10 Oct, the owner) ----
   12 200 px tall at 390 wide, against 7 200 for Cluely's, which the owner
   named as the model: one idea to a screen, a picture and a few words, and
   everything a phone does not need left out. So below 48 rem: the live demo
   card, the desktop dashboard under the film, the network's walk-through
   and its four promises, the third row of the plans' lists, the extra
   questions, the «Dette skjer etterpå» card, the trade links and the
   handwritten notes are gone; the four boxes of «Hva får du med Pling?»
   are 10 rem rows with a zoomed-down picture, and the two network cards
   stand side by side as a title and a face. */
@media (max-width: 47.999rem) {
  .pakke-nettverk, .price__fordel { display: none; }
  .nettverk .section__head { margin-bottom: var(--l-s-4); }

  /* the plans: the first four lines of each list */
  .price ul li:nth-child(n+5) { display: none; }
  /* the calculator: the sliders and the sum */
  .regn__par, .regn__jobber, .regn__merk { display: none; }
  /* the urgent card without its examples (the questions are five since
     24 Oct, so none needs hiding) */
  .urgent__examples { display: none; }
  /* the closing card: the offer, not the steps or the picture */
  .contact .next, .hello__art { display: none; }
}

/* ---- the phone's page, a second pass: crop more, show what it is (10 Oct) ----
   «Ganske grei», said the owner, then: fewer questions, and crop things so
   they are smaller and more of the page is seen at once. The film's phone is
   cut off at the bottom like the pictures in the boxes (its home bar and
   side buttons go with the cut), the plans show three lines each, the
   questions are three and the urgent card three lines, the calculator loses
   its explanation (the sliders explain themselves), the setup card its
   footnote, and the section heads sit a little closer to what follows. */
@media (max-width: 47.999rem) {
  .section__head { margin-bottom: var(--l-s-4); }
  .section__head p:not(.pill) { font-size: var(--s-lead); }
  /* the plans: three lines, no tagline */
  .price ul li:nth-child(n+4) { display: none; }
  .price { padding: var(--l-s-5); gap: var(--l-s-2); }
  .price__min { font-size: var(--l-t-xs); }
  /* the calculator and the setup, shorter */
  #regnestykke .section__head p:not(.pill) { display: none; }
  .regn__lite { display: none; }
  /* the urgent card in three lines. The questions were cut to three here;
     since 24 Oct the list itself is five short ones (the owner: «korte ned
     FAQ mye mer»), all of them collapsed, so a phone shows the five. */
  .urgent p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* the boxes a little lower still */
  .hva__kort { height: 9.5rem; }
  /* the closing card */
  .contact .hello__copy p { display: none; }
}

/* ---- one style down the whole phone page (10 Oct, the owner) ----
   He liked the film with the Mac and the phone small and side by side, but
   further down things were large and stacked. So the other rows of boxes
   take the same style: «Hva får du med Pling?» is a 2 by 2 grid, the setup
   is three side-by-side steps and the three plans stand in a row, each
   with its name, its price and its button; their lists, which the desktop
   shows, are left to the desktop. */
@media (max-width: 47.999rem) {
  .hva { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--l-s-2); }
  .hva__kort {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; height: 13rem; padding: var(--l-s-3) var(--l-s-2) 0;
    text-align: center; justify-items: center; row-gap: var(--l-s-1); column-gap: 0;
  }
  .hva__kort h3 { grid-column: 1; grid-row: 1; align-self: start; padding: 0; font-size: var(--l-t-sm); }
  .hva__kort p { grid-column: 1; grid-row: 2; align-self: start; font-size: var(--l-t-xs); line-height: var(--l-lh-snug); }
  .hva__bilde { grid-column: 1; grid-row: 3; margin-top: var(--l-s-2); }
  .hva__kort--anrop .hva__bilde img { width: 4.6rem; margin-top: 0; }
  .hva__kort--pc, .hva__kort--nett { padding-inline: var(--l-s-2); }
  .hva__kort--pc .hva__bilde { justify-content: center; }
  .hva__kort--pc .hva__bilde img { width: 11rem; max-width: none; margin: 0; }
  .hva__nett2 { zoom: .55; }
  .hva__loggbilde { zoom: .36; }
  /* «Kommer» at 8 px was unreadable; at the 12 px floor it no longer fits
     in the corner beside the drawing's «Booket» badge, so it stands above
     the title as each section's own «Kommer» pill does. */
  .hva__kort--nett { grid-template-rows: auto auto auto 1fr; }
  .hva__kort > .pill { position: static; grid-column: 1; grid-row: 1; justify-self: center; padding: 0 var(--l-s-2); font-size: var(--l-t-xs); }
  .hva__kort--nett h3 { grid-row: 2; }
  .hva__kort--nett p { grid-row: 3; }
  .hva__kort--nett .hva__bilde { grid-row: 4; }
  /* The price cards, one under the other with the purple one first and
     largest. Until 18 Oct 2026 these were three plans with Stor lifted
     (13 Oct, the owner: «den store litt større … litt psykologi»), and the
     first two were reordered under it. Now the purple card is «0 kr» and is
     already first in the markup, so the cards keep the page's own order:
     what it costs to use Pling, then the two shares of a job. */
  .pakker { grid-template-columns: minmax(0, 1fr); gap: var(--l-s-3); }
  .pakker > .price { margin-inline: var(--l-s-4); padding: var(--l-s-4); }
  .pakker > .price--valgt { order: -1; margin-inline: 0; padding: var(--l-s-6) var(--l-s-4); gap: var(--l-s-2); }
  .pakker .price__num b { font-size: var(--m-pris); }
  .pakker .price--valgt .price__num b { font-size: var(--m-pris-valgt); }
  .pakker .price__num span, .pakker .price__min, .pakker .price__omtrent { font-size: var(--l-t-sm); }
  .pakker .price--valgt .price__topp h3 { font-size: var(--l-t-title); }
  .pakker .price--valgt .price__topp .pill { font-size: var(--l-t-xs); padding: var(--l-s-1) var(--l-s-3); }
  .pakker .price__omtrent { display: block; margin: 0; font-size: var(--l-t-sm); font-weight: var(--l-w-semi); color: var(--l-ink-2); }
  .pakker .price--valgt .price__omtrent { color: var(--l-on-fill); font-size: var(--l-t-md); }
  .pakker .price--valgt .price__fordel { display: block; font-size: var(--l-t-sm); }
  /* White, with only a thin edge, so the purple one is the one that pulls the eye. */
  .pakker > .price:not(.price--valgt) { background: var(--l-frame); box-shadow: inset 0 0 0 1px var(--l-line-2); }
  .pakker > .price:not(.price--valgt) .btn { background: var(--l-purple-soft); color: var(--l-purple-ink); border-color: transparent; }
  .pakker .price .btn { font-size: var(--l-t-md); }
  .price { padding: var(--l-s-3) var(--l-s-2); gap: var(--l-s-1); text-align: center; align-items: center; translate: none; scale: none; rotate: none; }
  .price__topp { flex-direction: column; gap: var(--l-s-1); }
  .price__topp h3 { font-size: var(--l-t-md); }
  .price__topp .pill { padding: var(--l-s-1) var(--l-s-2); font-size: var(--l-t-xs); text-align: center; }
  .price__num { flex-direction: column; align-items: center; gap: 0; }
  .price__num b { font-size: var(--m-pris); }
  .price__num span, .price__min { font-size: var(--l-t-xs); }
  .price__hva, .price ul { display: none; }
  .price .btn { width: 100%; justify-content: center; padding: var(--l-s-2) var(--l-s-1); min-height: var(--l-touch); font-size: var(--l-t-sm); white-space: normal; text-align: center; }
  .price .btn svg { display: none; }
  .price::after { display: none; }
  .pakke-fakta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--l-s-2); }
  .pakke-fakta li { flex-direction: column; justify-content: flex-start; text-align: center; gap: var(--l-s-1); padding: var(--l-s-3) var(--l-s-2); font-size: var(--l-t-xs); line-height: var(--l-lh-snug); }
  .pakke-fakta svg.tegnet { width: 1.6rem; height: 1.6rem; }
  .nn__sentral { display: none; }
}

/* The trade pages' sayings: two on a phone, so the hero stays short. */
@media (max-width: 47.999rem) { .hero__sprak li:nth-child(n + 3) { display: none; } }

/* ---- 16 Oct, night pass: the middle of the page at 390 px ---- */
@media (max-width: 47.999rem) {
  /* «Hør samtalen»: the speaker no longer outweighs its words */
  .samtale__lyd svg.tegnet { width: 1.75rem; height: 1.75rem; }
  /* the «Ny booking» toast was wider than its box and cut off at both ends */
  .hva__toast { top: var(--l-s-1); left: var(--l-s-1); right: var(--l-s-1); justify-content: center; padding: .25rem .4rem; font-size: .56rem; gap: .25rem; }
  .hva__toast svg { width: .7rem; height: .7rem; }
}
/* ---- one rhythm, one corner (16 Oct, the size audit) ----
   Measured at 360–1023 px in WebKit and Chromium. Every section on a phone
   starts --s-section (33 px at 390) below the one before, except two: the
   band round «Hva får du med Pling?» kept a 24 px margin and a 24 px
   padding, and the calculator a fixed 48 px, so those two gaps were half
   again as tall as the rest and the page read as uneven. On a desktop the
   two were pulled closer on purpose (10 Oct, 160 px of nothing); on a
   phone the shared rhythm is already shorter than either. */
@media (max-width: 63.999rem) {
  #oversikt { margin-top: 0; padding-top: var(--s-section); }
  #regnestykke { padding-top: var(--s-section); }
}
/* Sentences a visitor is meant to read were set at the 13 px meta size:
   the trade pages' note under the services, and /nettverk-demo/'s two
   notes. On a phone held at reading distance they take the body size;
   labels, prices' small print and the footer stay at 13. */
@media (max-width: 47.999rem) {
  .note, .nd-merk, .nd-liten { font-size: var(--l-t-body); }
}

/* the link in the central's card stays on a phone, where the card's text is hidden */

/* Touch targets (found by the phone check, 17 Oct): two links were 16 and 21 px high,
   under the 44 px a thumb needs. They keep their look and get a taller hit area. */
@media (max-width: 47.999rem) {
  .nd-demo a[href^="tel:"] { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
}

/* The closing card is centred on a phone, like everything else on the page (17 Oct):
   the headline, the button and the line under it share one centre line. */
@media (max-width: 47.999rem) {
  .hello, .hello__copy { text-align: center; justify-items: center; }
  .hello h2, .hello p { margin-inline: auto; }
  .hello .btn { justify-self: center; }
}