/* Payman — säljsidan. Egen fil, laddas bara av /payman.
 *
 * Riktningen kommer ur research av tio svenska konkurrenter och fjorton
 * internationella, plus en genomgång av vad som får en sida att läsa som
 * maskinskriven. Tre saker styr allt nedan:
 *
 *   Ljust och varmt. Tio av tio svenska konkurrenter är ljusa. Papperet är
 *   #F7F4EE, aldrig rent vitt — det är billigaste sättet att inte se
 *   genererad ut.
 *
 *   En enda accent, och den ligger utanför turkos. Fyra av tio svenska
 *   sidor kör i praktiken samma turkos, och grönt äger Fortnox. Marinen
 *   ligger utanför båda och läser lugn och ordning snarare än varning.
 *
 *   Inga skuggor, inga gradienter, inga ikoner, inga bilder. Djupet byggs
 *   med varma neutraler och hårfina linjer, som Bokio och Caspeco gör det.
 *
 * Signaturdetaljen är ett 3 px marinblått streck som alltid betyder "här och
 * nu": nulinjen i kalendern, kanten på aktiv navlänk, fokusringen, och
 * ovankanten på det rekommenderade paketet. Ingenting annat på sidan är
 * 3 px. Bryt inte den regeln — den är det enda som håller ihop sidan.
 */

:root {
  --paper:      #F7F4EE; /* sidbakgrund. ALDRIG #FFFFFF */
  --vit:        #FFFFFF; /* bara inuti UI-paneler */
  --ink:        #181512; /* all text, och de mörka banden */
  --dim:        #5C5650; /* sekundärtext. Aldrig under 15px */
  --accent:     #1F3A5F; /* mörk marin. Accent, under 2 % av ytan */
  --accent-mork:#16293F; /* hover. Kontrasten ökar, aldrig minskar */
  --accent-ljus:#8FB4DC; /* accent PÅ mörkt band, där marinen saknar kontrast */
  --sand:       #EAE3D6; /* fyllning: chips, prisspalter, avslutsbandet */
  --linje:      #D6CEBF; /* alla hårfina linjer, 1px */
  --linje-mork: #3A332C; /* hårfina linjer på mörkt band */

  --display: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  --text:    'Schibsted Grotesk', system-ui, -apple-system, sans-serif;

  --bredd: 1120px;
  --gutter: 24px;
}
@media (min-width: 768px) { :root { --gutter: 40px; } }

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

body.pm {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(16.5px, 1vw, 17.5px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

.pm h1, .pm h2 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
  /* Rubriker som bryter hur som helst såg slarviga ut. Balance delar
     raderna jämnt, och maxbredden i tecken hindrar en ensam efterhängsen
     rad. Det här är inte kosmetik — det var det första som sågs. */
  text-wrap: balance;
}
.pm h1 {
  /* 52px och inte 60: rubriken nämner tre resurser och är lång med flit,
     och vid 60px bröt den till fyra ojämna rader med ett ensamt ord på den
     tredje. Vid 52px blir det tre jämna rader. Spalten sätter bredden, så
     ingen max-width behövs. */
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.018em;
}
.pm h2 {
  /* Spännvidden h1 till brödtext var 3x, h2 till brödtext bara 2,3x.
     Sidan kändes platt, och det är typografin som bär den när det varken
     finns bilder eller skuggor. */
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.pm h3 {
  margin: 0;
  font-family: var(--text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
/* Nollställningen ligger i :where() och väger därför ingenting. Skrivet
   som .pm p vägde den tyngre än klasserna nedan, och varje margin-top på
   ett stycke — ingressen, prisraden, hjälptexten — var utan verkan. Sidan
   såg ihoptryckt ut och orsaken syntes inte i regeln som var fel. */
.pm :where(p) { margin: 0; max-width: 62ch; }

.pm__inre { max-width: var(--bredd); margin: 0 auto; padding: 0 var(--gutter); }
.pm__dim { color: var(--dim); }
.pm__fot-text { font-size: 15px; color: var(--dim); }

/* Länkar bär aldrig information i färgen ensam.
   Not: regeln är medvetet snäv. En bredare selektor som .pm a vinner på
   specificitet över .pm__knapp och gjorde knapptexten osynlig — marinblå
   text på marinblå knapp. Det var inte synligt förrän någon tittade. */
.pm a:not([class]) { color: var(--accent); }
.pm__lank {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.pm__lank:hover { text-decoration-thickness: 3px; }
.pm :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ── Knappen ──────────────────────────────────────────────────────────── */

.pm__knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 22px;
  background: var(--accent); color: var(--vit);
  border: 0; border-radius: 4px;
  font-family: var(--text); font-size: 17px; font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background 120ms ease;
}
.pm__knapp,
.pm__knapp:hover,
.pm__knapp:visited { color: var(--vit); }
.pm__knapp:hover { background: var(--accent-mork); }
.pm__knapp--liten { min-height: 44px; font-size: 16px; padding: 0 18px; }

/* ── Sidhuvudet ───────────────────────────────────────────────────────── */

.pm__topp { border-bottom: 1px solid var(--linje); }
.pm__toppinre {
  max-width: var(--bredd); margin: 0 auto; padding: 0 var(--gutter);
  min-height: 68px;
  display: flex; align-items: center; gap: 28px;
}
.pm__mark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 20px;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}
.pm__nav { display: flex; gap: 22px; margin-left: 20px; }
.pm__nav a {
  color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500;
  /* Kanten finns alltid, genomskinlig. Att lägga till den vid hover hade
     flyttat texten i sidled, och en meny som hoppar känns billig. */
  padding-left: 9px; border-left: 3px solid transparent;
  transition: border-color 120ms ease;
}
.pm__nav a:hover { border-left-color: var(--accent); }
.pm__tel { margin-left: auto; font-size: 15px; color: var(--dim); }

/* Ett ankarhopp landar annars under det klistrade huvudet. Rubriken man
   just valde ska stå högst upp, inte gömd bakom menyraden. */
html { scroll-padding-top: 82px; }
[id] { scroll-margin-top: 82px; }

/* Huvudet följer med nedåt. Sidan är sexton skärmar i en telefon, och en
   meny man måste skrolla tillbaka till toppen för att nå är ingen meny. */
.pm__topp {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
}

/* Menyn är en <details>. Stängd är den en knapp, öppen en lista. Ingen
   javascript inblandad: laddar inget skript går menyn ändå att öppna. */
.pm__meny { display: none; position: relative; }
.pm__meny > summary {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 4px;
  color: var(--ink); font-size: 16px; font-weight: 500;
  cursor: pointer; list-style: none;
}
/* Tre skrivsätt för samma sak. Safari lyder bara ::-webkit-details-marker,
   och list-style ensamt räcker inte där — pilen stod kvar framför ordet
   Meny på en riktig telefon innan det här skrevs. */
.pm__meny > summary::marker { content: ""; }
.pm__meny > summary::-webkit-details-marker { display: none; }
.pm__meny[open] > summary .pm__menyord { color: var(--accent); }

.pm__menylucka {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 232px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px;
  background: var(--vit);
  border: 1px solid var(--linje);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
}
.pm__menylucka a:not(.pm__knapp) {
  padding: 13px 10px;
  color: var(--ink); text-decoration: none;
  font-size: 17px; font-weight: 500;
  border-left: 3px solid transparent;
}
.pm__menylucka a:not(.pm__knapp):hover { border-left-color: var(--accent); }
/* Menyn är nu hela sajtens, inte bara startsidans, och behöver därför
   en indelning. Rubrikerna är etiketter, inte länkar. */
.pm__menyrubrik {
  padding: 12px 10px 4px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
}
.pm__menyrubrik:first-child { padding-top: 4px; }
.pm__menylucka a:not(.pm__knapp) { padding: 11px 10px; font-size: 16px; }
.pm__menyknapp { margin-top: 10px; width: 100%; }
.pm__menytel {
  padding: 10px 10px 4px; font-size: 15px; color: var(--dim);
}

/* Vad som visas var. Ordningen är: utskrivna länkar så länge de får plats,
   sedan menyn; telefonnummret flyttar in i menyn i stället för att bara
   försvinna, och "Testa fritt" står alltid kvar — det är sidans ärende. */
@media (max-width: 860px) {
  .pm__nav { display: none; }
  .pm__meny { display: block; }
  .pm__tel { margin-left: auto; }
  .pm__toppin { display: none; }
}
/* Knapparna i huvudet får aldrig brytas över två rader. "Testa fritt"
   som blev "Testa / fritt" gjorde raden hög och rörig. */
.pm__toppinre .pm__knapp { white-space: nowrap; }

@media (max-width: 560px) {
  .pm__tel { display: none; }
  /* Tre saker på raden och inte fler: märket, ett ärende, en meny.
     Fyra fick inte plats utan att brytas. */
  .pm__toppinre { gap: 10px; min-height: 62px; padding: 0 16px; }
  .pm__mark { font-size: 18px; }
  .pm__toppcta { margin-left: auto; font-size: 15px; padding: 0 14px;
                 min-height: 40px; }
  .pm__meny > summary { padding: 0 2px; }
  .pm__menyord { position: absolute; width: 1px; height: 1px;
                 overflow: hidden; clip-path: inset(50%); }
  .pm__menylucka { min-width: 214px; }
}
@media (min-width: 861px) { .pm__toppcta { display: none; } }

/* ── Banden ───────────────────────────────────────────────────────────── */
/*
 * Sju unika vertikala avstånd, så att inget värde används överallt. Ett
 * band är högre än nästa när det är viktigare, och den ojämnheten är
 * meningen: ett rutnät av lika höga sektioner är just det som ropar mall.
 */
/* ── Underlaget ───────────────────────────────────────────────────────
 *
 * Sidan var för tom i ytorna. Accounted.se löser det med mjuka radiella
 * sken i sin varmbruna ton; vi gör något som hör till oss i stället för
 * att kopiera: linjerat papper.
 *
 * Linjerna ligger på 40 px, samma avstånd som raderna i kalendern och i
 * kvittot, och de går i --linje med låg alpha. På avstånd syns de knappt.
 * Nära läser de som en liggare, vilket är vad produkten handlar om.
 *
 * Det här är ett medvetet avsteg från "inga gradienter" i rubriken ovan.
 * Ett radiellt sken är en gradient. Avsteget gäller enbart bakgrunden,
 * aldrig en yta man ska läsa text på eller klicka på, och kontrasten är
 * under 3 % — det är djup, inte dekor. Knappar, paneler och kort är
 * fortfarande platta.
 */
.pm__band { padding: 72px 0; position: relative; }
.pm__band--papper-linjerat::before,
.pm__band--sand::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 39px,
      rgba(214, 206, 191, .22) 39px 40px);
  /* Masken hör hemma här, aldrig på bandet: den maskar hela elementet,
     alltså även texten, och då tonas rubrikerna ut i kanterna. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%,
                                      #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%,
                                      #000 82%, transparent);
}
.pm__band--sand::before {
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 39px,
      rgba(199, 188, 168, .26) 39px 40px);
}
/* Innehållet ligger över texturen. */
.pm__band > * { position: relative; z-index: 1; }

.pm__band--hjalte { padding: 72px 0 96px; }
.pm__band--stort  { padding: 112px 0; }
.pm__band--mork {
  background: var(--ink); color: var(--paper); padding: 96px 0;
  /* Ett svagt marint sken uppifrån. Bandet var helt platt svart, och det
     är det enda stället på sidan där en yta är så stor att plattheten
     syns som en brist snarare än som ett val. */
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 0%,
                    rgba(31, 58, 95, .38), transparent 70%);
}
.pm__band--sand   { background: var(--sand); padding: 112px 0; }
/* Chipsen ligger på sandbandet och måste byta fyllning, annars försvinner
   de i bakgrunden. */
.pm__band--sand .chip { background: var(--vit); border: 1px solid var(--linje); }
@media (min-width: 900px) {
  .pm__band { padding: 96px 0; }
  .pm__band--hjalte { padding: 88px 0 112px; }
  .pm__band--stort  { padding: 160px 0; }
  .pm__band--mork   { padding: 112px 0; }
  .pm__band--sand   { padding: 128px 0; }
}
.pm__band--mork h2, .pm__band--mork h3 { color: var(--paper); }
.pm__band--mork p { color: #C9C2B8; }
.pm__band--mork a { color: var(--accent-ljus); }
.pm__band--mork :focus-visible { outline-color: var(--accent-ljus); }

/* ── Hjälten ──────────────────────────────────────────────────────────── */

.pm__hjalte { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 900px) {
  .pm__hjalte {
    /* Rubriken behöver bredd för att bryta till tre jämna rader, men
       panelen behöver bredd för att bokningstexten ska rymmas. 1.2 är
       den punkt där båda går ihop — mätt, inte gissat. */
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 56px; align-items: start;
  }
}
/* Panelen får gå utanför spalten på stora skärmar. Det är sidans enda
   avsiktliga asymmetri, och den gör mer för intrycket än en skugga. */
@media (min-width: 1180px) { .pm__hjaltepanel { margin-right: -40px; } }


.pm__ingress {
  margin-top: 22px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45;
  max-width: 46ch;
}
.pm__prisrad { margin-top: 26px; font-size: 17px; font-weight: 500; }
.pm__cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.pm__under { margin-top: 10px; font-size: 15px; color: var(--dim); }
.pm__trygg {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--linje);
  font-size: 15px; color: var(--dim); max-width: 48ch;
}

/* ── Delraden ─────────────────────────────────────────────────────────── */
/* Sidans enda versalrad. Sektionsetiketter i småkapitäler ovanför varje
   rubrik är ett tell och finns inte här. */
.pm__delrad {
  border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje);
  padding: 18px 0; text-align: center;
  font-size: 13px; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--dim);
}
/* Flexraden med wrap, inte inline-text: i markupen står orden utan
   mellanslag mellan sig, och utan wrap blev hela raden en obrytbar
   sträng som stack ut 280 px utanför en telefonskärm. */
.pm__delrad .pm__inre {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 0 4px;
}
.pm__delrad span { white-space: nowrap; }
.pm__delrad i { font-style: normal; color: var(--linje); padding: 0 6px; }

/* ── Dagen: tidslinje plus paneler ────────────────────────────────────── */

.pm__dag { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
@media (min-width: 980px) {
  .pm__dag { grid-template-columns: 0.55fr 0.45fr; gap: 56px; align-items: start; }
}
.tidslinje { border-top: 1px solid var(--linje); }
.tidslinje__rad {
  display: grid; grid-template-columns: 64px 1fr; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--linje);
}
.tidslinje__tid {
  font-size: 15px; color: var(--dim); font-variant-numeric: tabular-nums;
  padding-top: 1px;
}
.tidslinje__text { font-size: 17px; max-width: 46ch; }
/* Nulinjen. Samma 3 px som allt annat som betyder här och nu. */
/* color:inherit för att webbläsarens hr har grått som standard. Färgen
   syns aldrig, men den ska inte finnas på en sida med sju färger. */
.tidslinje__nu {
  height: 3px; background: var(--accent); border: 0; margin: 0;
  color: inherit;
}
/* Panelerna överlappar varandra i stället för att stå på rad. Det är så
   man bygger djup utan skuggor: två plan som skymmer varandra läser som
   två plan. Branschen har slutat med skuggor, men inte med djup. */
.pm__paneler { display: flex; flex-direction: column; }
.pm__paneler > :nth-child(2) {
  /* Överlappet ska täcka kant, inte text. Vid -28 px låg SMS-panelen
     över kvittots fotrad och klippte en mening på mitten. */
  margin-top: -14px; margin-left: -28px; margin-right: 28px;
  position: relative; z-index: 2;
}
@media (max-width: 980px) {
  .pm__paneler > :nth-child(2) { margin: 24px 0 0; }
}

/* ── Panelerna ────────────────────────────────────────────────────────── */
/*
 * Produkten visas som riktig HTML, inte som skärmbilder. Det är skarpt på
 * varje skärm, kostar ingenting i fotografi, och en panel med svenska
 * siffror som går jämnt ut går inte att generera fram.
 */
.panel {
  background: var(--vit); border: 1px solid var(--linje); border-radius: 4px;
  overflow: hidden;
}
.panel__topp {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--linje);
  font-size: 14.5px; font-weight: 500;
}
.panel__topp span { margin-left: auto; font-size: 13.5px; color: var(--dim); }
.panel__fot {
  padding: 12px 16px; border-top: 1px solid var(--linje);
  font-size: 13.5px; color: var(--dim);
}

/* Dagvyn */
/* position:relative behövs: nulinjen och bokningarna ligger absolut och
   måste mäta mot rutnätet. Utan den hamnade nulinjen tvärs över hela sidan,
   vilket syntes först när någon tittade på en skärmbild. */
.dagvy { display: grid; grid-template-columns: 52px repeat(3, 1fr);
         position: relative; }
.dagvy__huvud {
  padding: 10px 6px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--linje); text-align: center;
}
.dagvy__tidkol { border-right: 1px solid var(--linje); }
.dagvy__tid {
  height: 44px; padding: 2px 8px 0 0; text-align: right;
  font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums;
}
.dagvy__kol { border-right: 1px solid var(--linje); position: relative; }
.dagvy__kol:last-child { border-right: 0; }
.dagvy__rut { height: 44px; border-bottom: 1px solid #EFEAE0; }
/* Höjden motsvarar klockslag och får inte ändras för textens skull. Därför
   är radavstånd och innerkant satta så att två rader ryms i den kortaste
   rutan, en bokning på 45 minuter. Mätt, inte gissat. */
.dagvy__bok {
  position: absolute; left: 4px; right: 4px;
  background: var(--sand); border-radius: 4px; padding: 5px 8px;
  line-height: 1.25; overflow: hidden;
}
.dagvy__bok b { display: block; font-weight: 500; font-size: 13px; line-height: 1.25; }
.dagvy__bok span { display: block; color: var(--dim); font-size: 12.5px;
                   line-height: 1.25; }
/* Den uthyrda stolen får en strimma i stället för en färg till. Det är
   sidans enda gradient, och den finns för att säga "inte din tid". */
.dagvy__uthyrd {
  background: repeating-linear-gradient(135deg,
              var(--sand) 0 6px, #E2DACB 6px 12px);
}
/* Den lediga luckan är en riktig knapp: klickbar, nåbar med tangentbord,
   och utan skript blir den bara en ruta som inte gör något. Det är sidans
   enda interaktion, och den visar produktens kärna — en lucka blir en
   bokning blir en påminnelse. */
.dagvy__ledig {
  position: absolute; left: 4px; right: 4px;
  border: 1px solid var(--accent); border-radius: 4px;
  padding: 6px 8px; font-size: 13px; color: var(--accent);
  background: transparent; font-family: var(--text); text-align: left;
  cursor: pointer; line-height: 1.25;
  transition: background 120ms ease, color 120ms ease;
}
.dagvy__ledig:hover { background: var(--accent); color: var(--vit); }
.dagvy__ledig:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Efter klicket är luckan en bokning som alla andra. */
.dagvy__ledig[aria-pressed="true"] {
  background: var(--sand); border-color: var(--linje); color: var(--ink);
  cursor: pointer;
}
.dagvy__ledig b { display: block; font-weight: 500; font-size: 13px; }
.dagvy__ledig span { display: block; font-size: 12.5px; color: var(--dim); }
.dagvy__ledig[aria-pressed="true"]:hover { background: #E2DACB; color: var(--ink); }

/* Raden som säger vad som hände. Bara efter ett klick. */
.panel__svar {
  padding: 10px 16px; border-top: 1px solid var(--linje);
  background: var(--sand); font-size: 13.5px;
}
/* Nulinjen börjar efter tidskolumnen, som i en riktig kalender. Går den
   över klockslagen ser det ut som ett fel, inte som en tid. */
.dagvy__nu {
  position: absolute; left: 52px; right: 0; height: 3px;
  background: var(--accent); z-index: 2;
}

/* På telefon är kolumnerna en tredjedel så breda och texten hann inte få
   plats i rutan. Rutorna har fasta höjder eftersom de motsvarar klockslag,
   så det är texten som ska krympa, inte rutan. */
@media (max-width: 760px) {
  .dagvy { grid-template-columns: 34px repeat(3, 1fr); }
  .dagvy__nu { left: 34px; }
  .dagvy__huvud { font-size: 12px; padding: 8px 2px; }
  .dagvy__tid { font-size: 11px; padding-right: 5px; }
  .dagvy__bok, .dagvy__ledig { left: 2px; right: 2px; padding: 4px 5px; }
  .dagvy__bok b { font-size: 11.5px; }
  .dagvy__bok span, .dagvy__ledig { font-size: 11px; line-height: 1.25; }
  .panel__topp, .panel__fot { font-size: 13px; }
}

/* Kvittot */
.kvittopanel { font-variant-numeric: tabular-nums; }
.kvittopanel__rad {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid #EFEAE0; font-size: 14.5px;
}
.kvittopanel__rad small { display: block; color: var(--dim); font-size: 13px; }
.kvittopanel__summa {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--linje);
  font-weight: 700; font-size: 18px;
}

/* SMS:et */
.smspanel { padding: 16px; }
.smspanel__bubbla {
  background: var(--sand); border-radius: 4px; padding: 12px 14px;
  font-size: 14.5px; line-height: 1.45; max-width: 100%;
}
.smspanel__meta { margin-top: 10px; font-size: 13.5px; color: var(--dim); }

/* ── Platser, på mörkt band ───────────────────────────────────────────── */

.platser { margin-top: 40px; border-top: 1px solid var(--linje-mork); }
.platsrad {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 28px 0; border-bottom: 1px solid var(--linje-mork);
}
@media (min-width: 760px) {
  .platsrad { grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; }
}
.platsrad__namn { font-size: 20px; font-weight: 700; color: var(--accent-ljus); }
.platsrad__text { font-size: 17px; }
.pm__branscher { margin-top: 48px; font-size: 15px; max-width: 74ch; }

/* ── Chips ────────────────────────────────────────────────────────────── */

.chips { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
@media (min-width: 720px) { .chips { grid-template-columns: repeat(2, 1fr); } }
.chip { background: var(--sand); border-radius: 4px; padding: 14px 16px; }
.chip b { display: block; font-size: 20px; font-weight: 700; line-height: 1.25; }
.chip span { display: block; margin-top: 3px; font-size: 15px; color: var(--dim); }

/* ── Priset ───────────────────────────────────────────────────────────── */

.priser { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
@media (min-width: 860px) { .priser { grid-template-columns: repeat(3, 1fr); } }
.prisspalt {
  background: var(--vit); border: 1px solid var(--linje); border-radius: 4px;
  padding: 28px 24px; display: flex; flex-direction: column;
}
/* Det rekommenderade paketet får 3 px i ovankant. Ingen förstoring, ingen
   skugga, ingen glöd — samma streck som betyder här och nu överallt annars. */
/* Det rekommenderade paketet får både kanten och en ton. Enbart en kant
   syntes inte på håll, och det var en del av det platta. */
.prisspalt--vald {
  border-top: 3px solid var(--accent);
  background: var(--sand); border-color: var(--linje);
}
.prisspalt__flagga {
  font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 6px;
}
.prisspalt h3 { margin-bottom: 4px; }
.prisspalt__for { font-size: 15px; color: var(--dim); min-height: 3em; }
.prisspalt__tal {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 3.4vw, 42px); line-height: 1;
  font-variant-numeric: tabular-nums; margin: 20px 0 2px;
}
.prisspalt__moms { font-size: 15px; color: var(--dim); }
.prisspalt ul {
  list-style: none; margin: 20px 0 24px; padding: 0; flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 9px; font-size: 15.5px;
}
.prisspalt li { padding-left: 16px; position: relative; }
.prisspalt li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 7px; height: 1px; background: var(--ink);
}
.pm__prisfot { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; }

/* ── Två spalter på mörkt band ────────────────────────────────────────── */

.tvaspalt { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
@media (min-width: 840px) { .tvaspalt { grid-template-columns: 1fr 1fr; gap: 64px; } }
.tvaspalt ul { list-style: none; margin: 18px 0 0; padding: 0;
               display: flex; flex-direction: column; gap: 12px; font-size: 17px; }
.tvaspalt li { padding-left: 18px; position: relative; color: #C9C2B8; }
/* Fästet: två eller tre ord i ljusare ton som säger vad punkten gäller.
   Utan det blev listan fem stycken brödtext på rad i en telefon. */
.tvaspalt li b { color: var(--vit); font-weight: 600; }
.tvaspalt li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 8px; height: 1px; background: var(--accent-ljus);
}

/* ── Vanliga frågor ───────────────────────────────────────────────────── */

.fragor { margin-top: 36px; border-top: 1px solid var(--linje); }
.fragor details { border-bottom: 1px solid var(--linje); }
.fragor summary {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 22px 0; font-size: 20px; font-weight: 700; line-height: 1.3;
  list-style: none;
}
.fragor summary::-webkit-details-marker { display: none; }
.fragor summary svg { flex: 0 0 12px; transition: transform 140ms ease; }
.fragor details[open] summary svg { transform: rotate(45deg); }
.fragor p { padding: 0 0 22px 26px; }

/* ── Avslutet och foten ───────────────────────────────────────────────── */

.pm__slut { text-align: center; max-width: 520px; margin: 0 auto; }
.pm__slut h2 { margin: 0 auto; max-width: 18ch; }
.pm__slut p { margin: 16px auto 28px; }

.pm__fotter { border-top: 1px solid var(--linje); padding: 48px 0; }
.pm__fotgrid {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  font-size: 15px; color: var(--dim);
}
@media (min-width: 720px) { .pm__fotgrid { grid-template-columns: 1.4fr 1fr 1fr; } }
.pm__fotgrid a { color: var(--dim); text-decoration: underline;
                 text-underline-offset: 3px; }
.pm__fotgrid a:hover { color: var(--ink); }
.pm__fotlista { display: flex; flex-direction: column; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .pm *, .pm *::before { transition: none !important; }
}


/* Linjerat papper är dekor. Den som bett om mindre får det bort. */
@media (prefers-contrast: more) {
  .pm__band--papper-linjerat::before, .pm__band--sand::before { display: none; }
  .pm__band--mork { background-image: none; }
}

/* ── Pennmärkena ──────────────────────────────────────────────────────
 *
 * Accounted.se har små handritade klotter som driver i bakgrunden, och
 * Oskar ville ha något liknande. Vi gör det på vårt sätt: inga bilder och
 * inga ikoner, bara streck i samma bläck som texten, ritade som märken
 * någon gjort i en liggare. En bock, en understrykning, ett gem, en pil,
 * en inringning, ett kryss och en krumelur.
 *
 * Reglerna är hårda, för det här är den sortens detalj som lätt tippar
 * över i pynt:
 *
 *   Opaciteten ligger under 0,14. Märkena ska upptäckas, inte läsas.
 *   De ligger utanför textspalten och aldrig bakom en knapp.
 *   De rör sig långsamt, i tiotals sekunder, aldrig i sekunder.
 *   pointer-events: none och aria-hidden. De finns inte för den som
 *   navigerar med tangentbord eller skärmläsare.
 *   prefers-reduced-motion stänger av rörelsen helt, inte delvis.
 */
.pm__klotter {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  color: var(--ink);
}
.pm__klott {
  position: absolute;
  opacity: .13;
  will-change: transform;
  animation: pm-driva 34s ease-in-out infinite alternate;
}
/* Placeringen är räknad så att inget märke hamnar bakom textspalten på
   stor skärm. På telefon göms de flesta helt, se längst ner. */
.pm__klott--1 { top: 9%;  left: 4%;   width: 34px; animation-duration: 29s; }
.pm__klott--2 { top: 74%; left: 2%;   width: 92px; animation-duration: 41s;
               animation-delay: -6s; }
.pm__klott--3 { top: 20%; right: 3%;  width: 30px; animation-duration: 37s;
               animation-delay: -12s; }
.pm__klott--4 { top: 62%; right: 6%;  width: 48px; animation-duration: 33s;
               animation-delay: -3s; }
.pm__klott--5 { top: 86%; right: 22%; width: 62px; animation-duration: 45s;
               animation-delay: -18s; }
.pm__klott--6 { top: 40%; left: 1.5%; width: 24px; animation-duration: 26s;
               animation-delay: -9s; }
.pm__klott--7 { top: 5%;  right: 34%; width: 40px; animation-duration: 39s;
               animation-delay: -21s; }

@keyframes pm-driva {
  from { transform: translate3d(0, 0, 0) rotate(-4deg); }
  to   { transform: translate3d(10px, -14px, 0) rotate(5deg); }
}

/* På en liten skärm finns ingen marginal att ligga i. Då stannar bara de
   två som hamnar i över- och underkant, resten tas bort. */
@media (max-width: 899px) {
  .pm__klott--2, .pm__klott--3, .pm__klott--5, .pm__klott--6, .pm__klott--7 {
    display: none;
  }
  /* Låg tidigare på 2 % och hamnade då bredvid rubriken, där en bock i
     tretton procents opacitet läser som ett skräptecken och inte som
     dekor. Flyttad ner i marginalen bredvid knappen, där den är just
     det den ska vara: något i ögonvrån. */
  .pm__klott--1 { top: 30%; left: 2%; }
  .pm__klott--4 { top: 96%; right: 3%; }
}

@media (prefers-reduced-motion: reduce) {
  .pm__klott { animation: none; }
}
@media (prefers-contrast: more) {
  .pm__klotter { display: none; }
}

/* ── Registreringen ───────────────────────────────────────────────────
 *
 * Två spalter på skärm: texten till vänster, formuläret i en panel till
 * höger. Under 900 px hamnar formuläret först — den som klickat sig hit
 * från en knapp har redan bestämt sig och ska inte behöva skrolla förbi
 * argumenten en gång till.
 */
/* En spalt på telefon, två på skärm. Ordningen är olika med flit: på en
   telefon ska rubriken stå först, så att den som landar här vet vad sidan
   är innan formuläret dyker upp, och punkterna sist. På skärm står texten
   till vänster och formuläret i en panel till höger. */
.regg { display: grid; grid-template-columns: 1fr; gap: 28px; }
.regg__rubrik { order: 1; }
.regg__panel { order: 2; padding: 28px; }
.regg__text { order: 3; }
@media (min-width: 900px) {
  .regg {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    /* Panelen spänner båda raderna och är högre än texten. Utan
       min-content på första raden fördelas panelens höjd över båda, och
       då glider punkterna nedåt med ett par hundra pixlar tomrum över
       sig. Första raden ska vara precis så hög som rubriken. */
    grid-template-rows: min-content 1fr;
    column-gap: 64px; row-gap: 28px; align-items: start;
  }
  .regg__rubrik { grid-column: 1; grid-row: 1; align-self: start; }
  /* Panelen är högre än texten och sträcker rad två. Utan align-self
     hamnar punkterna mitt i den tomma ytan i stället för direkt under
     ingressen. */
  .regg__text   { grid-column: 1; grid-row: 2; align-self: start; }
  .regg__panel  { grid-column: 2; grid-row: 1 / span 2; }
}
/* Rubriken är en rad här, till skillnad från startsidans tre, och då
   räcker inte ingressens vanliga 22 px. */
.regg h1 { font-size: clamp(30px, 3.6vw, 44px); }
.regg .pm__ingress { margin-top: 16px; }
.regg__punkter {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
}
.regg__punkter li {
  position: relative; padding-left: 20px; color: var(--dim);
  max-width: 48ch; text-wrap: pretty;
}
/* Samma streck som signaturen, i miniatyr. Ingen bock, ingen ikon. */
.regg__punkter li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; background: var(--accent);
}

.regg__form { display: grid; gap: 18px; }
.regg__falt { display: grid; gap: 6px; }
.regg__falt label {
  font-size: 15px; font-weight: 500; color: var(--ink);
}
.regg__falt input, .regg__falt select {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 16px; /* under 16px zoomar iOS in vid fokus */
  color: var(--ink); background: var(--vit);
  border: 1px solid var(--linje); border-radius: 6px;
  padding: 11px 12px; min-height: 44px;
  appearance: none; -webkit-appearance: none;
}
/* Pilen på select, ritad i CSS så att den följer bläckfärgen. */
.regg__falt select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--dim) 50%),
    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.regg__falt input:focus-visible, .regg__falt select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 1px;
  border-color: var(--accent);
}
.regg__hjalp { font-size: 14px; color: var(--dim); }
.regg__knapp { width: 100%; margin-top: 6px; text-align: center; }
.regg__under {
  margin: 0; font-size: 14px; color: var(--dim); text-wrap: pretty;
}
.regg__fel {
  margin: 0; padding: 12px 14px; border-radius: 6px;
  background: var(--sand); border-left: 3px solid var(--accent);
  color: var(--ink); font-size: 15px; text-wrap: pretty;
}

/* ── 3:12-kalkylatorn ─────────────────────────────────────────────────
 * Formuläret till vänster, svaret till höger. Före första räkningen står
 * reglerna där svaret sedan hamnar — sidan ska svara på frågan även för
 * den som aldrig fyller i något, för det är de flesta som kommer via en
 * sökning.
 */
.tolv { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) {
  .tolv {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    column-gap: 56px; align-items: start;
  }
}
.tolv__panel { padding: 28px; }
.tolv__resultat { padding: 28px; }
.tolv__etikett {
  margin: 0; font-size: 14px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim);
}
.tolv__tal {
  margin: 6px 0 22px; font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 4vw, 48px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tolv__tabell { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.tolv__tabell th {
  text-align: left; font-weight: 400; padding: 12px 0;
  border-top: 1px solid var(--linje); vertical-align: top;
}
.tolv__tabell td {
  text-align: right; padding: 12px 0; white-space: nowrap;
  border-top: 1px solid var(--linje);
  vertical-align: top;
}
/* tabular-nums ger Schibsted Grotesk ett kommatecken lika brett som en
   siffra, och "30 000 , 00" ser ut som ett fel. Kolumnen är högerställd,
   och det räcker för att beloppen ska radas upp. */
.tolv__forklaring {
  display: block; font-size: 14px; color: var(--dim); margin-top: 2px;
}
.tolv__summa th, .tolv__summa td {
  font-weight: 700; border-top: 3px solid var(--accent);
}
.tolv__spar { margin: 0 0 12px; color: var(--dim); }
.tolv__varning {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 6px;
  background: var(--sand); border-left: 3px solid var(--accent);
  font-size: 15px; text-wrap: pretty;
}
.tolv__regler h2 { margin-bottom: 14px; }
.tolv__regler .regg__punkter { margin-top: 20px; }
.tolv__regler .regg__punkter li { color: var(--ink); }
.tolv__ansvar { max-width: 72ch; text-wrap: pretty; }

/* Bokföringstillägget under prisspalterna. En bred rad och inte ett fjärde
   kort: det är ett tillägg till paketen, inte ett val bland dem, och den
   skillnaden ska synas på formen. */
.pm__tillagg {
  margin-top: 28px; padding: 28px;
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center;
}
@media (min-width: 760px) {
  .pm__tillagg { grid-template-columns: 1fr auto; gap: 40px; }
}
.pm__tillagg h3 { margin: 0 0 8px; font-size: 21px; }
.pm__tillagg p { margin: 0 0 6px; color: var(--dim); max-width: 62ch;
                 text-wrap: pretty; }
.pm__tillagg p:last-child { margin-bottom: 0; }

/* 3:12-sidan har bara två band och inget att skrolla förbi. Hjälten och
   räknaren ska sitta ihop, inte separeras av ett tomt fält. */
.pm__band--tolvtopp { padding: 64px 0 28px; }
.pm__band--tolvraknare { padding: 0 0 72px; }
@media (min-width: 900px) {
  .pm__band--tolvtopp { padding: 80px 0 36px; }
  .pm__band--tolvraknare { padding: 0 0 96px; }
}
.pm__band--tolvtopp .pm__ingress { max-width: 62ch; margin-top: 18px; }
.tolv__siffror { margin-top: 18px; }
/* Avslutsbandet på 3:12-sidan har en kortare rubrik än startsidans och
   bröt till tre stubbiga rader mitt på sidan. */
.pm__band--sand .pm__slut h2 { max-width: 22ch; margin-inline: auto; }

/* ── Undersidorna ─────────────────────────────────────────────────────
 * En sida per sak vi gör. Samma band och samma typografi som startsidan;
 * det enda egna är listorna.
 */
.modsida__svar { max-width: 60ch; }
.modsida__ingress {
  margin-top: 18px; color: var(--dim); max-width: 60ch; text-wrap: pretty;
}
.modsida__inte-ingress { color: #C9C2B8; }
.modsida__lista {
  display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 32px;
}
@media (min-width: 700px) {
  .modsida__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .modsida__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.modsida__punkt h3 { margin: 0 0 6px; font-size: 18px; }
.modsida__punkt p { margin: 0; color: var(--dim); text-wrap: pretty; }
/* Strecket före rubriken är samma signatur som resten av sidan. */
.modsida__punkt {
  padding-top: 14px; border-top: 3px solid var(--accent);
}

.modsida__inte-ingress { max-width: 62ch; margin-top: 12px; }
.modsida__inte {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 18px; max-width: 76ch;
}
.modsida__inte li {
  position: relative; padding-left: 22px; text-wrap: pretty;
}
.modsida__inte li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 12px; height: 2px; background: var(--accent-ljus);
}

.modsida__kort {
  display: block; padding: 24px; text-decoration: none; color: inherit;
}
.modsida__kort h3 { margin: 0 0 8px; font-size: 19px; }
.modsida__kort p { margin: 0; color: var(--dim); text-wrap: pretty; }
.modsida__pris {
  display: block; margin-top: 12px; font-weight: 600; color: var(--accent);
}
.modsida__kort:hover { border-color: var(--accent); }

/* ── Redaktionen ──────────────────────────────────────────────────────
 * Listsidan och ett inlägg. Brödtexten är det enda stället på hela
 * sajten där långa stycken ska läsas i följd, så måttet är satt efter
 * det: 66 tecken per rad och gott om radavstånd.
 */
.inlist { display: grid; gap: 0; }
.inlist__rad {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 22px 0; border-top: 1px solid var(--linje);
  text-decoration: none; color: inherit;
}
.inlist__rad:last-child { border-bottom: 1px solid var(--linje); }
@media (min-width: 720px) {
  .inlist__rad { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; }
}
.inlist__datum { color: var(--dim); font-size: 15px; }

/* En guide visar inget datum, och da ska den inte ha en tom
   hundrafemtiopixelsspalt heller — det laser som att datumet fallit
   bort. Raden kollapsar till en spalt i stallet. */
.inlist__datum--tom { display: none; }
@media (min-width: 720px) {
  .inlist__rad:has(.inlist__datum--tom) { grid-template-columns: minmax(0, 1fr); }
}
.inlist__rubrik {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 21px; letter-spacing: -0.2px; text-wrap: balance;
}
.inlist__om {
  display: block; margin-top: 4px; color: var(--dim); max-width: 62ch;
  text-wrap: pretty;
}
.inlist__rad:hover .inlist__rubrik { color: var(--accent); }

.inmeta { margin: 0 0 14px; color: var(--dim); font-size: 15px; }
.inmeta a { color: var(--accent); }
.inmeta--slut { margin: 28px 0 0; }

.intext { max-width: 66ch; font-size: 18px; line-height: 1.7; }
.intext h2 {
  font-size: clamp(23px, 2.4vw, 28px); margin: 40px 0 12px;
  text-wrap: balance;
}
.intext h3 { font-size: 20px; margin: 30px 0 8px; text-wrap: balance; }
.intext h2:first-child, .intext h3:first-child { margin-top: 0; }
.intext p { margin: 0 0 18px; text-wrap: pretty; }
.intext ul, .intext ol { margin: 0 0 18px; padding-left: 22px; }
.intext li { margin-bottom: 8px; }
.intext a { color: var(--accent); }
.intext blockquote {
  margin: 24px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent); color: var(--dim);
}
.intext blockquote p { margin: 0; }
.intext code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; background: var(--sand); padding: 1px 5px;
  border-radius: 4px;
}

/* Sex prisspalter i stället för tre. Tre i bredd ger två jämna rader. */
@media (min-width: 900px) {
  .priser--moduler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pm__genvagar { list-style: none; margin: 14px 0 0; padding: 0;
                display: grid; gap: 10px; }
.pm__genvagar li { text-wrap: pretty; }
.pm__genvagar .pm__fot-text { display: block; }

/* Bilder i ett inlägg. Figcaption är bildtexten och alt samtidigt — samma
   mening tjänar både den som ser och den som inte gör det. */
.intext figure { margin: 28px 0; }
.intext figure img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  border: 1px solid var(--linje);
}
.intext figcaption {
  margin-top: 8px; font-size: 15px; color: var(--dim); text-wrap: pretty;
}

/* ── Luften på en telefon ─────────────────────────────────────────────
 *
 * På bredd står listor och paneler sida vid sida, och ögat får vila i
 * marginalerna. I en telefon staplas allt i en enda spalt: sexton skärmar
 * text efter varandra med nio pixlar mellan punkterna. Mätt, inte tyckt —
 * och det var det första som sades om sidan i en riktig telefon.
 *
 * Bara avstånd ändras här. Inga storlekar, inga färger, ingenting som
 * gör att sidan ser annorlunda ut — bara mindre tätt.
 */
@media (max-width: 720px) {
  .prisspalt ul { gap: 15px; margin: 22px 0 26px; }
  /* På en telefon står punkterna under varandra utan något att vila
     ögat på. Fästet får bli en egen rad, och luften mellan punkterna
     dubbleras — då läser listan som en lista och inte som ett stycke. */
  .tvaspalt ul { gap: 24px; margin-top: 22px; }
  .tvaspalt li b { display: block; margin-bottom: 3px; }
  .regg__punkter { gap: 20px; }
  .pm__genvagar { gap: 16px; }
  .intext li { margin-bottom: 13px; }

  /* En underrubrik som klistrar i sin brödtext läser som ett enda stycke. */
  .pm h3 + p { margin-top: 10px; }

  /* Raderna blir korta i en telefon, och korta rader tål — behöver — mer
     luft mellan sig än långa. */
  .pm__ingress { line-height: 1.5; }
  .pm__under, .pm__trygg, .pm__fot-text { line-height: 1.55; }
}

/* ── Hjälten i en telefon ─────────────────────────────────────────────
 *
 * Mätt på en riktig skärm innan något ändrades: rubriken tog fyra rader,
 * ingressen fyra och prisraden tre. Elva rader text före knappen, som
 * hamnade på 530 px — under vikningen på en iPhone SE och nätt och jämnt
 * ovanför på en iPhone 14.
 *
 * Praxis, och det Nielsen Norman visat: uppmärksamheten ligger ovanför
 * vikningen, rubriken bör inte gå över två rader på en telefon, och
 * ordningen är rubrik, EN stödjande rad, handling. Bilden kommer efter
 * texten på mobil — på en liten skärm är texten ovanför vikningen värd
 * mer än en bild.
 *
 * Rubriken är avsiktligt lång: den namnger tre yrken och det är sidans
 * starkaste grepp. Den får därför bli mindre i stället för kortare, och
 * landa på tre rader. Att komma till två kräver färre ord, och det är
 * ett beslut om varumärket och inte om CSS.
 */
@media (max-width: 720px) {
  .pm__band--hjalte { padding-top: 40px; }

  .pm h1 {
    font-size: 27px;
    line-height: 1.12;
    letter-spacing: -0.015em;
  }

  .pm__ingress {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.45;
    max-width: none;
  }

  /* Knappen full bredd och tummen når den. Länken under, inte bredvid:
     två saker i bredd på en telefon blir två halva knappar. */
  .pm__cta {
    margin-top: 20px;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 14px;
  }
  .pm__cta .pm__knapp { width: 100%; min-height: 56px; font-size: 18px; }
  .pm__cta .pm__lank { text-align: center; }

  .pm__under { margin-top: 12px; text-align: center; }

  /* Tryggheten döljs i hjälten på telefon. Fem rader grå text mellan
     knappen och produkten är precis den textvägg som gjorde att sidan
     inte dög, och varje påstående i den står redan längre ner på samma
     sida: momsen under "Byggt för svenska regler", Z-rapporten och
     SIE-filen i modullistorna. Ingenting går förlorat, varken för
     läsaren eller för Google.

     Att flytta den under panelen gick inte — den ligger i textspalten
     och panelen är dess syskon, alltså skilda flexkontext. Att bryta ut
     den ur spalten hade ändrat hur sidan ser ut på bredd, och det är
     inte vad som behövde lagas. */
  .pm__trygg { display: none; }

}

/* ── Prisräknaren ─────────────────────────────────────────────────────
 *
 * En rad per modul: kryssruta, namn, pris. Hela raden är etiketten, så
 * det går att träffa med tummen utan att sikta på en 16 px kvadrat.
 */
.prisval { border: 0; padding: 0; margin: 0; }
.prisval > legend { padding: 0; margin-bottom: var(--space-3, 12px); }
/* Rutnät och inte flex: beskrivningen ska spänna över hela raden och
   inte klämmas av priskolumnen. Med flex blev "Tider och platser, och en
   sida dit kunden bokar själv" tre rader i en smal spalt medan halva
   bredden stod tom bredvid priset. */
.prisval__rad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 12px; row-gap: 3px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--linje);
  cursor: pointer;
}
.prisval__rad:last-child { border-bottom: 0; }
.prisval__rad input {
  grid-column: 1; width: 20px; height: 20px;
  accent-color: var(--accent); cursor: pointer;
  /* Baslinjen på en kryssruta ligger inte där texten står. */
  align-self: center;
}
.prisval__namn { grid-column: 2; font-weight: 500; }
.prisval__tal {
  grid-column: 3; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.prisval__for {
  grid-column: 2 / 4;
  font-size: 15px; color: var(--dim); text-wrap: pretty;
}

/* Den vanliga tvåspalten ligger på mörkt band. Här står den på sand, och
   då måste texten byta färg tillbaka. */
.tvaspalt--ljus li { color: var(--ink); }
.tvaspalt--ljus li b { color: var(--ink); font-weight: 600; }
.tvaspalt--ljus li::before { background: var(--accent); }

/* ── Omröstningen ─────────────────────────────────────────────────────
 *
 * Ett arbetsredskap för tre personer, i Paymans form så det inte känns
 * som ett främmande verktyg. Varje alternativ är en knapp som täcker
 * hela raden — man ska kunna rösta med tummen utan att sikta.
 */
.besl { padding: 22px; margin-top: 22px; }
.besl__topp {
  display: flex; gap: 12px; align-items: baseline;
  flex-wrap: wrap; justify-content: space-between;
}
.besl__rubrik { font-size: clamp(20px, 3.4vw, 26px); max-width: 28ch; }
.besl__klar {
  font-size: 14px; font-weight: 600; color: var(--accent);
  border: 1px solid var(--accent-line, var(--linje)); border-radius: 999px;
  padding: 3px 12px;
}
.besl__bakgrund { margin-top: 12px; color: var(--dim); max-width: 60ch; }

.besl__val { display: flex; flex-direction: column; gap: 10px;
             margin-top: 18px; }

.besl__knapp {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%; text-align: left;
  padding: 14px 16px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--linje); border-left: 3px solid transparent;
  border-radius: 4px;
  font-family: inherit; font-size: 17px; font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.besl__knapp:hover:not(:disabled) { border-left-color: var(--accent); }
.besl__knapp:disabled { cursor: default; opacity: .75; }

/* Det man själv röstat på. Signaturstrecket betyder "här och nu" på hela
   sajten, och det gör det här också. */
.besl__knapp--min {
  border-left-color: var(--accent);
  background: var(--vit);
}

.besl__text { flex: 1 1 auto; }
.besl__foljd {
  display: block; margin-top: 4px;
  font-size: 15px; font-weight: 400; color: var(--dim);
  text-wrap: pretty;
}
.besl__vem { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; }
.besl__bricka {
  font-size: 13px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--sand); color: var(--ink);
}
.besl__bricka--jag { background: var(--accent); color: var(--vit); }

.besl__min {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--linje);
  font-size: 15px; color: var(--dim); text-wrap: pretty;
}
.besl__min strong { color: var(--ink); }

@media (max-width: 560px) {
  .besl { padding: 18px; }
  .besl__knapp { flex-direction: column; gap: 8px; }
  .besl__vem { width: 100%; }
}

/* ── Bevisbandet: riktiga skärmbilder ────────────────────────────────────
   Resten av sidan är ritad för hand i HTML. Panelerna är sanna om
   funktionerna men de är inte systemet, och en besökare som har blivit
   lurad förr vet skillnaden. Här ligger fotografier av det som körs.

   Bilderna kommer ur skarmbilder.py och skrivs över varje gång utseendet
   ändras, så de kan inte glida isär från produkten. Saknas filen visar
   mallen ingenting alls — hellre ett band utan bild än en trasig ikon. */

.pm__bevis { margin-top: 48px; display: grid; gap: 56px; }

.pm__skarm { margin: 0; }

/* Ramen: bilden ligger på vitt med en hårfin linje, som ett papper på
   bordet. Ingen skugga större än 1 px — sidan har inga andra skuggor. */
.pm__skarm img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linje);
  border-radius: 6px;
  background: var(--vit);
}

.pm__skarm figcaption {
  margin-top: 14px;
  color: var(--dim);
  font-size: 15.5px;
  line-height: 1.5;
  max-width: 62ch;
}

.pm__skarm figcaption b {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
}

/* Två i bredd först när det finns plats för att läsa dem. Under 900 px
   blir en skärmbild i halv spaltbredd en grå rektangel. */
@media (min-width: 900px) {
  .pm__bevis { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .pm__skarm--bred { grid-column: 1 / -1; }
}

/* ── Brevet: om oss, kontakt, villkor, integritetspolicy ─────────────────
   En spalt, inget annat. De här sidorna läses för att kontrollera något,
   inte för att bli övertygad, och då är en läsbar textspalt rätt form.

   Radlängden är kapad till 68 tecken. Över det tappar ögat raden på
   vägen tillbaka, och just de här texterna läses av någon som redan är
   misstänksam. */

.brev { max-width: 68ch; }

.brev h1 { margin-bottom: 8px; }

.brev__stycke { margin-top: 44px; }

.brev__stycke h2 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 12px;
}

.brev__stycke p { margin-top: 14px; }
.brev__stycke p:first-of-type { margin-top: 0; }

/* Utkastsrutan. Sand och inte rött: det är inte ett fel, det är en
   upplysning om att texten inte är påskriven än. */
.brev__utkast {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--sand);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
}

.brev__utkast b { color: var(--ink); }

.brev__fot {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--linje);
  color: var(--dim);
}

/* ── Branschtemat ────────────────────────────────────────────────────────
   Branschens egna platser, ritade som kalendern ritar dem.

   Varför det här och inte en bild: femton branschsidor utan något som
   skiljer dem åt visuellt ser ut som samma sida femton gånger, och ett
   stockfoto på en glad människa bevisar ingenting. Det som skiljer
   branscherna åt på riktigt är vad de bokar — stolar, banor, lyftar,
   stallplatser — och det är precis vad systemet gör som de andra inte
   gör. Alltså ritar vi det.

   Färgerna kommer ur tokens.css, alltså exakt de toner en riktig
   kalender använder. Ingen egen palett uppfanns: femton branschfärger
   hade slagit sönder profilen, och den som loggar in ska känna igen sig. */

.bransch__hjalte { display: grid; gap: 40px; }

@media (min-width: 900px) {
  .bransch__hjalte {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: 56px;
  }
}

.btema {
  margin: 0;
  background: var(--vit);
  border: 1px solid var(--linje);
  border-radius: 6px;
  padding: 16px;
}

.btema__rubrik {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 14px;
}

.btema__rutnat {
  display: grid;
  /* --spalter sätts inline i branschsida.html, en per plats.
     Fallbacken finns för att rutnätet inte ska kollapsa till en
     spalt om attributet någon gång försvinner. */
  grid-template-columns: repeat(var(--spalter, 3), minmax(0, 1fr));
  gap: 6px;
}

.btema__namn {
  display: block;
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ytan är fast hög så att blocken kan sitta i procent. 232 px rymmer en
   arbetsdag utan att figuren tar över hjälten. */
.btema__yta {
  position: relative;
  height: 232px;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 28px,
      var(--linje) 28px 29px);
  border-radius: 3px;
}

.btema__block {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  color: var(--ink);
}

/* En uthyrd plats får strimma i stället för fyllning, precis som i
   kalendern. Det är sidans enda gradient och den betyder "inte din tid". */
.btema__block--uthyrd {
  background-image: repeating-linear-gradient(135deg,
    rgba(24, 21, 18, .10) 0 5px, transparent 5px 10px);
  border: 1px dashed currentColor;
}

/* Platsfärgerna. Samma toner som systemets kalender. */
.btema__spalt--1 .btema__block { background: #E8EEF5; box-shadow: inset 3px 0 0 #1F3A5F; }
.btema__spalt--2 .btema__block { background: #E7F0EB; box-shadow: inset 3px 0 0 #1C5D4B; }
.btema__spalt--3 .btema__block { background: #F5EDDF; box-shadow: inset 3px 0 0 #8A5A12; }
.btema__spalt--4 .btema__block { background: #F1E9F2; box-shadow: inset 3px 0 0 #6B3B6E; }
.btema__spalt--5 .btema__block { background: #E5F0F1; box-shadow: inset 3px 0 0 #1F5E63; }
.btema__spalt--6 .btema__block { background: #F3EAE3; box-shadow: inset 3px 0 0 #7A4A2C; }

/* ── Kvittotemat: kiosken och caféet bokar ingenting ──────────────────── */

.btema__kvitto { font-size: 14px; }

.btema__rad {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--linje);
}

.btema__rad:last-child { border-bottom: 0; }

.btema__sats {
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.btema__pris { font-variant-numeric: tabular-nums; }

/* ── Sidan som inte finns ────────────────────────────────────────────────
   Samma hand som klottret i hjälten, samma bläck som texten. Ingen egen
   färg och ingen bild: en 404 som skriker är en 404 som gör besökaren
   mer vilsen, inte mindre. */

.fyra__kryss {
  /* Samma proportion som viewBox 132x40, annars trycks märket ihop. */
  width: 132px;
  height: 40px;
  color: var(--ink);
  opacity: .22;
  margin-bottom: 20px;
}

.fyra__adress {
  color: var(--dim);
  font-size: 15px;
}

.fyra__adress code {
  font-family: var(--mono, ui-monospace, monospace);
  background: var(--sand);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Länklistan. Det här är sidans egentliga innehåll — resten är bara
   förklaringen till varför man läser den. */
.fyra__lista {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--linje);
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .fyra__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .fyra__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}

.fyra__lista h2 {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 12px;
}

.fyra__lista a {
  display: block;
  padding: 3px 0;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  width: fit-content;
}

.fyra__lista a:hover { border-bottom-color: var(--ink); }

.fyra__fot {
  margin-top: 40px;
  color: var(--dim);
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Inloggningen
   ═══════════════════════════════════════════════════════════════════════
   Låg tidigare på tolv rader i bas.html och ärvde den gamla stilmallen.
   Den som registrerat sig på /kom-igang möttes av en annan sajt vid första
   inloggningen. Sidan bygger nu på samma delar som registreringen —
   .panel, .regg__form, .regg__falt — så att en ändring i formulärstilen
   slår igenom på båda.
   ═══════════════════════════════════════════════════════════════════════ */

.loggin {
  display: grid;
  justify-items: center;
  gap: 18px;
  /* En inloggningsruta ska inte vara bred. Ögat ska hitta två fält och en
     knapp utan att vandra. */
  max-width: 420px;
  margin: 0 auto;
  padding: 48px 0 64px;
}

.loggin__panel {
  width: 100%;
  padding: 32px;
  box-sizing: border-box;
}

.loggin__rubrik {
  margin: 0 0 20px;
  font-size: 26px;
  letter-spacing: -0.4px;
}

.loggin__under {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--dim);
}

.loggin__byt {
  margin: 0;
  font-size: 15px;
  color: var(--dim);
  text-align: center;
}

@media (max-width: 560px) {
  /* Sidomarginal, annars ligger kortet kant i kant med skärmen. Rutan ska
     se ut som ett kort på ett papper, inte som en sida i sig. */
  .loggin { padding: 28px 16px 40px; }
  .loggin__panel { padding: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Kommer snart
   ═══════════════════════════════════════════════════════════════════════
   Kassan går inte att beställa än. Raden står kvar med sitt pris — den som
   planerar vill veta vad det kommer kosta — men kryssrutan är avstängd och
   raden dämpad, och skälet står under listan.
   ═══════════════════════════════════════════════════════════════════════ */

.marke {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  /* --sand, inte en uträknad ton. Slutprovet kontrollerar varje ritad färg
     mot paletten, och color-mix räknas ut till color(srgb ...) som inte står
     i listan. Provet fällde den, och det gjorde rätt.
     Storleken är 13 px av samma skäl: ingen text i produkten går under
     12,5 px, och 12 föll. */
  background: var(--sand);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  vertical-align: 1px;
  white-space: nowrap;
}

.prisval__rad--snart,
.raknare__kryss--snart {
  opacity: 0.62;
  cursor: default;
}
.prisval__rad--snart input,
.raknare__kryss--snart input { cursor: not-allowed; }

.prisval__snartnot {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dim);
}

.prisspalt--snart { opacity: 0.72; }
.prisspalt__snartnot {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dim);
}