/* Mallar & guider (SEO + konvertering). REDAKTIONELLT formspråk, inte dokumentation:
   hårlinje i stället för kort, versal mikroetikett i stället för ikon, konturnumeral
   i stället för fylld sifferbricka. Den gamla ambitionen här var "färgade
   informationskort i klass med Stripe Docs och Notion", och det var precis den som
   gjorde att varje ny textbit blev en tonad ruta. Casper 2026-08-22 om
   offertmallen (då /mallar/offertmall-bygg, nu /mallar/offertmall): "ser väldigt
   AI-genererad ut, speciellt med de rutorna".
   Turkos #34E0A1 som accent, men bara som fylld yta på pillret.
   Artikelspråket ligger SIST i filen som .art. Generator-delen (.gen, .rutnat, .falt,
   .rad, .summa) delas av offertmallen och ROT-räknaren och rörs inte i onödan. */
:root {
  --ink:#0a1712; --ink2:#28322d; --mut:#69736c; --line:#e8ece9; --line2:#eef2ef;
  --accent:#34E0A1; --djup:#0c9c6e; --soft:#eafbf3; --paper:#fff;
  --tip:#0c9c6e; --tip-bg:#eafbf3; --tip-line:rgba(52,224,161,.4);
  --radius:16px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#f2f7f5; } /* samma botten som body: ingen blixt vid sidbyte */
/* naven bor i det delade sidhuvudet (delar/sidhuvud.html); padding-top ger luft under det fasta skalet.
   Grunden är #f2f7f5 på ALLA bredder, samma som startsidan och /priser (sidhuvudets solida
   läge räknar med den). Fram till 2026-08-27 var sidorna vita i mobilen och beige (#F6F4EF)
   från 900px; Casper: "fattar inte varför den sidan är beige". */
body { margin:0; padding-top:72px; background:#f2f7f5; color:var(--ink2); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.72; -webkit-font-smoothing:antialiased; }
.wrap { max-width:812px; margin:0 auto; padding:0 22px 96px; }

/* ============ CTA-piller ============
   Delas av alla fyra sidor ("Öppna verktyget", "Prova OffertProffset", "Till den gratis
   offertmallen"). Låg tidigare i topnav-blocket och försvann av misstag när naven flyttade
   till delar/sidhuvud.html 2026-08-24, då blev varje piller ren text. Hör hemma här. */
.btn-cta { display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:#03140d; font-weight:800; font-size:.86rem; padding:9px 17px; border-radius:999px; text-decoration:none; white-space:nowrap; box-shadow:0 8px 20px -10px rgba(17,182,121,.7); transition:transform .16s ease, box-shadow .16s ease; }
.btn-cta:hover { transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(17,182,121,.8); }

/* ============ brödsmulor + hero ============ */
.smulor { font-size:.82rem; color:var(--mut); padding:22px 0 0; display:flex; gap:7px; flex-wrap:wrap; }
.smulor a { color:var(--mut); text-decoration:none; }
.smulor a:hover { color:var(--djup); text-decoration:underline; }
.smulor .sep { color:#c2ccc6; }
.hero { padding:14px 0 6px; }
h1 { font-size:clamp(2.1rem, 5.5vw, 3rem); letter-spacing:-.032em; margin:0 0 14px; line-height:1.08; color:var(--ink); font-weight:800; }
.ingress { font-size:1.16rem; color:var(--ink2); margin:0 0 6px; line-height:1.6; max-width:44em; }

/* ============ text ============ */
h2 { font-size:clamp(1.4rem,3vw,1.7rem); letter-spacing:-.02em; margin:52px 0 12px; scroll-margin-top:78px; color:var(--ink); font-weight:800; line-height:1.2; }
h3 { font-size:1.12rem; margin:30px 0 8px; color:var(--ink); font-weight:700; letter-spacing:-.01em; }
p { margin:0 0 14px; }
ul, ol { padding-left:22px; margin:0 0 16px; }
li { margin-bottom:9px; }
a { color:var(--djup); text-decoration-color:rgba(52,224,161,.5); text-decoration-thickness:2px; text-underline-offset:3px; }
strong, b { font-weight:700; color:var(--ink); }
.mut { color:var(--mut); font-size:.92rem; }

/* ============ tabeller ============ */
table { width:100%; border-collapse:collapse; margin:20px 0; font-size:.96rem; }
thead th { background:#f6f8f7; }
th, td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); font-weight:800; }
tbody tr:last-child td { border-bottom:none; }
td.hoger, th.hoger { text-align:right; white-space:nowrap; }

/* ============ relaterade guider + footer ============ */
footer { margin-top:56px; padding-top:24px; border-top:1px solid var(--line); color:var(--mut); font-size:.88rem; }
footer a { color:var(--mut); }
footer a:hover { color:var(--djup); }

/* ---------- gratis offertbyggare (generator.js) ---------- */
.gen { border:1px solid var(--line); border-radius:20px; padding:24px; margin:26px 0; background:#fff; box-shadow:0 24px 50px -42px rgba(6,35,26,.55); }
.gen h2 { margin:0 0 4px; font-size:1.24rem; }
.gen > p.mut { margin:0 0 18px; }
.rutnat { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:620px){ .rutnat { grid-template-columns:1fr; } }
.falt { display:flex; flex-direction:column; gap:5px; }
.falt label { font-size:.8rem; font-weight:700; color:var(--mut); }
.falt input, .falt textarea, .falt select { font-family:inherit; font-size:.95rem; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:11px; padding:11px 13px; width:100%; }
.falt input:focus, .falt textarea:focus, .falt select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(52,224,161,.22); }
.falt textarea { resize:vertical; min-height:82px; line-height:1.6; }
.bred { grid-column:1 / -1; }
.rader { display:grid; gap:10px; }
.rad { display:grid; grid-template-columns:1fr 84px 74px 110px 38px; gap:8px; align-items:center; }
.rad input { font-family:inherit; font-size:.92rem; border:1px solid var(--line); border-radius:10px; padding:10px 11px; width:100%; background:#fff; color:var(--ink); }
.rad input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(52,224,161,.22); }
.rad .bort { border:1px solid var(--line); background:#fff; border-radius:10px; height:38px; cursor:pointer; color:var(--mut); font-size:1.1rem; line-height:1; }
.rad .bort:hover { border-color:#e0b4b4; color:#b44; }
.radhuvud { display:grid; grid-template-columns:1fr 84px 74px 110px 38px; gap:8px; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); font-weight:800; padding:0 2px; }
@media (max-width:620px){
  .rad { grid-template-columns:1fr 1fr; grid-template-areas:"n n" "m a" "s b"; }
  .rad :nth-child(1){ grid-area:n; } .rad :nth-child(2){ grid-area:m; } .rad :nth-child(3){ grid-area:a; }
  .rad :nth-child(4){ grid-area:s; } .rad :nth-child(5){ grid-area:b; }
  .radhuvud { display:none; }
  .rad { border:1px solid var(--line); border-radius:14px; padding:12px; }
  .rad .bort { justify-self:end; width:46px; }
}
.lagg { margin-top:12px; border:1px dashed rgba(52,224,161,.7); background:var(--soft); color:var(--djup); font-weight:700; font-family:inherit; font-size:.9rem; padding:11px 16px; border-radius:11px; cursor:pointer; width:100%; }
.lagg:hover { background:#dff7ec; }
.kryss { display:flex; gap:11px; align-items:flex-start; margin:16px 0 0; cursor:pointer; }
.kryss input { width:20px; height:20px; margin:2px 0 0; accent-color:var(--djup); flex:none; }
.kryss span { font-size:.93rem; }
.kryss small { display:block; color:var(--mut); font-size:.84rem; }
.summa { margin-top:24px; border-top:1px solid var(--line); padding-top:18px; }
.srad { display:flex; justify-content:space-between; gap:14px; font-size:.95rem; color:var(--mut); padding:5px 0; }
.srad b { color:var(--ink); font-weight:600; }
.srad.rot b { color:var(--djup); }
.stotal { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-top:12px; padding-top:14px; border-top:2px solid var(--accent); }
.stotal span { font-weight:800; font-size:.86rem; text-transform:uppercase; letter-spacing:.05em; color:var(--djup); }
.stotal b { font-size:1.7rem; letter-spacing:-.02em; color:var(--ink); }
.genknappar { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.knapp { font-family:inherit; font-weight:800; font-size:.96rem; padding:14px 26px; border-radius:999px; border:none; cursor:pointer; background:var(--accent); color:#03140d; }
.knapp:disabled { opacity:.55; cursor:default; }
.genfel { margin-top:12px; font-size:.9rem; color:#b4433a; min-height:1.2em; }
.genfel.ok { color:var(--djup); }

/* ============================================================================
   ARTIKELSPRÅKET ".art" (2026-08-22)
   Hubben /mallar fick sitt redaktionella uppslag i augusti. Artikelsidorna följde
   inte med utan ritades vidare i dokumentationsspråket ovanför: tonade kort, fyllda
   sifferbrickor, färgade kantrutor, två länkkort i botten. Casper tittade på
   offertmallen (då /mallar/offertmall-bygg) i mobilen och sa att den ser AI-genererad
   ut, "speciellt med de rutorna".
   Blocket nedan är hubbens vokabulär portad rakt av, inte ett fjärde formspråk.
   HUVUDREGELN: exakt TRE ytor får finnas på sidan. Papperssockeln runt
   offertbyggaren, det nattgröna slutbandet och mintpillret. Räknar du till en fjärde
   har du byggt ett kort igen.
   Radier är 0 eller stora (20 till 34px) eller 999px. Mellanradierna 12, 14 och 16px
   är kortspråket och förekommer inte här.
   Två brytpunkter, 700 och 900, samma som hubben. UNDER 700 FINNS INGEN ENDA PLATTA,
   bara typografi och hårlinjer, för det är i mobilen Casper tittade.
   Allt är scopat under .art. De två systersidorna står orörda tills de byggts om;
   då räcker det att lägga klassen art på deras .wrap.
   ============================================================================ */

/* ---- 1. skal och färgregister. Tokens deklareras på .art, inte på :root, så att
   ingenting läcker ut till systersidorna eller till topbaren. --paper rörs inte,
   den betyder fortfarande #fff för resten av filen. ---- */
.wrap.art { max-width:768px; padding:0 24px 96px; }   /* 768 - 48 = 720, hubbens textspalt */
.art {
  --forest:#173B2E;        /* all mörk typografi */
  --ink-soft:#5E7168;      /* ingress, metatext, etiketter */
  --accent-dark:#1E8A5C;   /* enda gröna interaktionsfärgen */
  --mint-deep:#CFE9DC;     /* mobilens små siffror */
  --hline:#DAE5DF;         /* en hårlinje för alla bredder, avstämd mot grunden #f2f7f5 */
  --p1:#EBF2EE; --p2:#DFE8E3;                          /* sockeln, ett steg mörkare än grunden */
  --n1:#071F17; --n2:#0C3F2D; --n3:#0F5A3F;            /* nattbandet */
  color:var(--forest); line-height:1.62;
}
.art p, .art li { font-size:17px; line-height:1.62; color:var(--forest); }
.art .smulor { font-size:13px; color:var(--ink-soft); padding:40px 0 0; }
.art a:focus-visible { outline:2px solid var(--accent-dark); outline-offset:2px; border-radius:3px; }

/* ---- 2. hero. Kontrasten görs med VIKT, inte med färgruta: 400 mot 800 i samma h1.
   Sökordet "Offertmall" står kvar ord för ord, det delas bara i två spans. ---- */
.art .hero { padding:14px 0 0; }
.art .eyebrow { font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-dark); margin:0 0 14px; }
.art h1 { font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1.05;
  color:var(--forest); margin:0 0 16px; }
.art h1 .h1a { font-weight:800; }
.art h1 .h1b { font-weight:400; }
.art .ingress { font-size:18px; font-weight:400; color:var(--ink-soft); line-height:1.6;
  max-width:60ch; margin:0; }
/* Folio-stämpeln ersätter den nakna raden "Uppdaterad 22 juli 2026". Tre SANNA fakta
   i stället för ett datum. Ingen påhittad blankettmetadata: en färskhetsstämpel utan
   avsändare är innehållsfarmens signatur, därav bylinen på raden under. */
.art .stamp { font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(23,59,46,.42); margin:26px 0 0; }
.art .byline { font-size:13px; font-weight:500; color:var(--ink-soft); margin:8px 0 0; }

/* ---- 3. sektionsetiketten. Ordet + linjen + räknaren. Etiketten är en DIV och tar
   aldrig över h2:ns roll, den ligger ovanför den, så rubrikhierarkin h1 > h2 > h3
   överlever. Linjen och räknaren är dekor och göms under 900px. ---- */
.art .lbl { display:flex; align-items:center; gap:16px; font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:72px 0 0; }
.art .lbl .ln, .art .lbl .lc { display:none; }

/* ---- 4. innehållsförteckningen. Ersätter rutan "Kort version". En TL;DR är en
   maskinvana, en innehållsförteckning är ett redaktionellt beslut. Posterna bär samma
   i18n-nycklar som rubrikerna de pekar på, så de kan aldrig glida isär. ---- */
.art .toc { list-style:none; margin:16px 0 0; padding:0; }
.art .toc li { margin:0; border-bottom:1px solid var(--hline); }
.art .toc li:first-child { border-top:1px solid var(--hline); }
.art .toc a { display:flex; align-items:baseline; gap:18px; padding:15px 0;
  text-decoration:none; color:var(--forest); }
.art .toc .nr { flex:none; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--mint-deep); }
.art .toc .tt { font-size:16px; font-weight:700; transition:color .15s ease; }
.art .toc a:hover .tt { color:var(--accent-dark); }

/* ---- 5. papperssockeln runt offertbyggaren. Under 700px är det bara hårlinjer:
   ingen platta, ingen skugga, ingen radie, för det är i mobilen rutorna stör. Från
   700px tänds sockeln, och först då finns spökordet och folion. ---- */
.art .plint { position:relative; margin-top:16px; padding:0;
  border-top:1px solid var(--hline); border-bottom:1px solid var(--hline); }
.art .ghost, .art .folio { display:none; }
/* Bildtexten. "Fig. 01" står bokstavligen i HTML utan i18n-nyckel: siffra och latinsk
   förkortning är samma på svenska och engelska, precis som på hubben. */
.art .fig { margin:18px 2px 0; font-size:12.5px; line-height:1.55; color:rgba(23,59,46,.62); }
.art .fig b { font-weight:800; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(23,59,46,.5); margin-right:8px; }

/* ---- 6. formuläret avklädd. Fältens id:n och logik är låsta, bara den yttre ramen
   byts: kortet med 1px kant, radie 20px och skugga var sidans största ruta. Fälten
   själva får behålla sin radie, en inmatningsruta ÄR en ruta.
   Offertmallen (2026-08-28) är ETT formulär utan sockel: grupperna är små h2:or med en
   hårlinje över, ingen numrering, ingen text mellan fälten. ROT-räknaren har kvar sin
   h2 som rubrik i sockeln, samma regel, ingen linje över den första. ---- */
.art .gen { border:0; border-radius:0; box-shadow:none; background:none; padding:26px 0 30px; margin:0; }
.art .gen h2 { margin:0 0 4px; font-size:22px; }
.art .gen > p.mut { margin:0 0 22px; font-size:15px; color:var(--ink-soft); }
.art .gen-enkel { padding:36px 0 0; }
.art .gen-enkel h2 { margin:36px 0 14px; padding-top:24px; border-top:1px solid var(--hline);
  font-size:18px; font-weight:800; letter-spacing:-.01em; line-height:1.2; color:var(--forest); }
.art .gen-enkel h2:first-child { margin-top:0; padding-top:0; border-top:0; }
/* EN etikettstil på hela sidan. Förut fanns fem versala mikroetiketter i fem
   storlekar (.tldr h2, th, .genrub, .radhuvud, .stotal span), vilket betyder att
   ingen bestämt hur en etikett ser ut. */
.art .radhuvud, .art .stotal span, .art thead th {
  font-size:10.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); }
.art .falt label { font-size:13px; font-weight:600; color:var(--ink-soft); }
.art .falt input, .art .falt textarea { border-radius:8px; border-color:var(--hline); }
/* Streckad mintram runt "Lägg till moment" var en ruta till. Nu en textknapp på linje. */
.art .lagg { border:0; border-top:1px solid var(--hline); border-radius:0; background:none;
  color:var(--accent-dark); font-weight:800; text-align:left; padding:14px 0 0; margin-top:14px; }
.art .lagg:hover { background:none; color:var(--forest); }
.art .summa { border-top:1px solid var(--hline); }
.art .srad b, .art .stotal b { font-variant-numeric:tabular-nums; }
.art .stotal { border-top:2px solid var(--forest); }
.art .stotal b { font-size:26px; }
.art .knapp { box-shadow:0 8px 20px -10px rgba(17,182,121,.7); }

/* ---- 7. checklistan. De tio fyllda 27x27px mintbrickorna var sidans tydligaste
   AI-signal. Nu: hårlinjerad rad, konturnumeral (fylld och liten på mobil, där en
   46px kontur inte får plats), och en RIKTIG kryssruta som gör listan till ett
   verktyg i stället för tio saker en maskin räknat upp. Kryssrutan är hårlinje, inte
   fylld färgruta: den fylls aldrig, den får bara en ritad bock när användaren själv
   agerat. Rutorna ligger utanför form#gen. ---- */
.art .lstinstr { font-size:14px; color:var(--ink-soft); margin:6px 0 0; }
.art .lst { list-style:none; margin:18px 0 0; padding:0; counter-reset:none; }
.art .lst li { margin:0; border-bottom:1px solid var(--hline); }
.art .lst li:first-child { border-top:1px solid var(--hline); }
.art .lst label { display:flex; align-items:flex-start; gap:12px; padding:16px 0; cursor:pointer; }
.art .lst .nr { flex:none; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--mint-deep); line-height:1.62; min-width:20px; }
.art .lst-k { flex:none; appearance:none; -webkit-appearance:none; margin:4px 0 0;
  width:18px; height:18px; border:1px solid var(--hline); border-radius:4px; background:#fff;
  cursor:pointer; position:relative; transition:border-color .15s ease; }
.art .lst-k:hover { border-color:var(--accent-dark); }
.art .lst-k:checked { border-color:var(--accent-dark); }
.art .lst-k:checked::after { content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid var(--accent-dark); border-width:0 2px 2px 0; transform:rotate(42deg); }
.art .lst-k:focus-visible { outline:2px solid var(--accent-dark); outline-offset:2px; }
.art .lst-k:checked ~ .tx { color:var(--ink-soft); }
.art .lst .tx { flex:1; min-width:0; transition:color .15s ease; }

/* ---- 8. brödtext, rubriker, brasklapp, tabell ---- */
.art h2 { font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.18;
  color:var(--forest); margin:18px 0 14px; scroll-margin-top:88px; }
.art h3 { font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--forest);
  margin:30px 0 8px; }
.art .plint, .art .lbl { scroll-margin-top:88px; }
/* Den gröna vänsterkantsrutan var dokumentationssajtens admonition, alltså den
   visuella översättningen av markdowns "> **Obs.**". Samma text, nu som ett stycke
   med hårlinje över och en indragning. */
.art .anm { border-top:1px solid var(--hline); margin:24px 0 0; padding:18px 0 0 18px;
  border-left:1px solid var(--hline); font-size:16px; color:var(--ink-soft); }
.art .anm b { color:var(--forest); }
.art table { margin:18px 0 0; font-size:16px; }
.art thead th { background:none; padding:0 0 10px; border-bottom:2px solid var(--forest); }
.art td { padding:12px 0; border-bottom:1px solid var(--hline); }
.art td.hoger { font-variant-numeric:tabular-nums; }
.art tbody tr:last-child td { border-bottom:0; }

/* ---- 9. steg för steg-guiden (/mallar/skriv-offert, 2026-08-28). Sju vanliga h2:or
   med en hårlinje över, ingen numrerad bricka, ingen innehållsförteckning: guiden ÄR
   listan. Slutet är en enda textlänk till offertmallen, inget band. ---- */
.art .steg { border-top:1px solid var(--hline); margin-top:40px; padding-top:28px; }
.art .hero + .steg { margin-top:48px; }
.art .steg h2 { margin:0 0 12px; }
.art .steg p { margin:0; }
.art .vidare { margin:56px 0 0; font-size:20px; font-weight:800; letter-spacing:-.01em; }
.art .vidare a { color:var(--accent-dark); text-decoration:none; }
.art .vidare a:hover { color:var(--forest); }

/* ---- 10. frågorna. h3 kvar som h3 för SEO, men varje par får en hårlinje över så
   att avsnittet ser redigerat ut i stället för staplat. ---- */
.art .qa { border-top:1px solid var(--hline); padding:22px 0 6px; }
.art .qa h3 { margin:0 0 6px; }
.art .qa p { margin:0; color:var(--ink-soft); }

/* ---- 11. läs vidare: hubbens .gl rakt av. Ersätter de två vita länkkorten. ---- */
.art .gl { list-style:none; margin:16px 0 0; padding:0; }
.art .gl li { margin:0; border-bottom:1px solid var(--hline); }
.art .gl li:first-child { border-top:1px solid var(--hline); }
.art .gl a { display:flex; align-items:baseline; gap:24px; padding:24px 0; text-decoration:none; }
.art .gl .nr { flex:none; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--mint-deep); }
.art .gl .gt { flex:1; min-width:0; }
.art .gl .gt b { display:block; font-size:20px; font-weight:700; color:var(--forest);
  transition:color .15s ease; }
.art .gl a:hover .gt b { color:var(--accent-dark); }
.art .gl .gt span { display:block; font-size:15px; color:var(--ink-soft); margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.art .gl .gm { flex:none; display:flex; align-items:center; gap:8px; font-size:13px;
  font-weight:500; color:var(--ink-soft); }
.art .gl .gm svg { transition:transform .15s ease; }
.art .gl a:hover .gm svg { transform:translateX(4px); }

/* Remsan är ren desktopdekor och finns inte i mobilen. */
.art .tick { display:none; }

/* ---- 12. slutbandet. Ersätter .cta-kortet. h2 står kvar som h2 av SEO-skäl men bär
   past-s-typografin, och frågan ovanför är ett stycke, ingen rubrik, så hierarkin
   håller. Finstilten ligger BREDVID pillret, inte under det. ---- */
.art .slut { border-top:1px solid var(--hline); margin-top:72px; padding-top:56px; }
.art .slut-q { font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-dark); margin:0 0 14px; }
.art .slut-s { font-size:26px; font-weight:700; line-height:1.22; letter-spacing:-.015em;
  color:var(--forest); margin:0 0 28px; max-width:22em; }
.art .slutrad { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.art .slut .fin { font-size:13px; font-weight:500; color:var(--ink-soft); }

/* ---- 13. foten. Enda skillnaden mot idag är mintunderstrykningen, billigaste
   vinsten på hela sidan. ---- */
.art footer { margin-top:96px; border-top:1px solid var(--hline); padding:24px 0 48px;
  font-size:13px; color:var(--ink-soft); }
.art footer a { color:var(--ink-soft); text-decoration-color:var(--mint-deep);
  text-decoration-thickness:1.5px; text-underline-offset:3px; }
.art footer a:hover { color:var(--accent-dark); text-decoration-color:var(--accent-dark); }

/* ============ smal telefon, 320 till 400px ============
   Testas i 320px INNAN något annat. Ingenting får orsaka horisontell scroll. */
@media (max-width:400px){
  .wrap.art { padding:0 16px 72px; }
  .art h1 { font-size:29px; }
  .art .ingress { font-size:16.5px; }
  .art p, .art li { font-size:16px; }
  .art h2 { font-size:23px; }
  .art .slut-s { font-size:23px; }
  .art .stotal b { font-size:22px; }
  .art .lst label { gap:10px; }
  .art .gl a { flex-wrap:wrap; gap:8px 16px; }
  .art .gl .gt { flex-basis:calc(100% - 32px); }
  .art .gl .gt span { white-space:normal; }
  .art .gl .gm { margin-left:30px; }
  .art .slutrad .btn-cta { width:100%; justify-content:center; }
  .art table { font-size:15px; }
}

/* ============ mobilens värsta ruta: momentraderna ============
   mallar.css rad 199-206 ger varje .rad egen ram och 14px radie under 620px. Då blir
   mobilvyn kort inuti kort inuti kort, och det är en stor del av det Casper såg.
   Här blir raden i stället en hårlinjerad post, som allt annat på sidan. */
@media (max-width:620px){
  .art .rad { border:0; border-radius:0; padding:14px 0; border-bottom:1px solid var(--hline); }
  .art .rader { gap:0; }
  .art .rad .bort { border:0; background:none; }
}

/* ============ från 700px: ytorna tänds ============
   Samma trappa som hubben. Först här får sidan sina två plattor. */
@media (min-width:700px){
  .art h1 { font-size:46px; letter-spacing:-.03em; line-height:1.0; }
  @supports ((-webkit-background-clip:text) or (background-clip:text)) {
    .art h1 .h1a { background:linear-gradient(115deg,#13BD7D,#0D6D4A 85%);
      -webkit-background-clip:text; background-clip:text;
      color:transparent; -webkit-text-fill-color:transparent; }
  }
  /* papperssockeln: sidans enda inramning av formuläret */
  .art .plint { border:1px solid rgba(23,59,46,.08); border-radius:30px; overflow:hidden;
    padding:clamp(52px,6vw,72px) clamp(24px,3.4vw,40px) clamp(24px,3vw,32px);
    background:
      radial-gradient(120% 90% at 88% 0%, rgba(52,224,161,.18), transparent 55%),
      repeating-linear-gradient(0deg, rgba(23,59,46,.022) 0 1px, transparent 1px 9px),
      linear-gradient(168deg,var(--p1),var(--p2));
    box-shadow:0 36px 80px -56px rgba(23,59,46,.5), inset 0 1px 0 rgba(255,255,255,.65); }
  /* Formuläret ligger på papper, så fälten behöver vit botten för att synas. */
  .art .plint .falt input, .art .plint .falt textarea, .art .plint .rad input { background:#fff; }
  .art .ghost { display:block; position:absolute; top:16px; left:26px;
    font-size:clamp(56px,6vw,78px); font-weight:900; letter-spacing:-.02em; line-height:1;
    white-space:nowrap; color:rgba(23,59,46,.05); user-select:none; }
  @supports (-webkit-text-stroke:1px black) {
    .art .ghost { color:transparent; -webkit-text-stroke:1px rgba(23,59,46,.17); }
  }
  .art .folio { display:block; position:absolute; top:50%; right:8px; transform:translateY(-50%);
    z-index:2; writing-mode:vertical-rl; font-size:10px; font-weight:800; letter-spacing:.34em;
    text-transform:uppercase; color:rgba(23,59,46,.32); white-space:nowrap; user-select:none; }
  .art .gen { position:relative; z-index:1; }
  /* slutbandet: nattgrönt, samma familj som hubbens .pastaende */
  /* artikelns avslut ar samma tysta rad pa bred skarm som i mobilen: ingen mork ruta (Casper 2026-08-28) */
}

/* ============ från 900px: konturnumeralerna, remsan ============ */
@media (min-width:900px){
  .art h1 { font-size:clamp(50px,5.4vw,58px); letter-spacing:-.03em; line-height:.98; }
  .art .ingress { font-size:19px; max-width:52ch; }
  /* etiketten får sin linje och sin räknare, alltså tidskriftens takt */
  .art .lbl { margin-top:84px; }
  .art .lbl .ln { display:block; flex:1; height:1px; background:var(--hline); }
  .art .lbl .lc { display:block; font-size:11px; font-weight:700; letter-spacing:.08em;
    font-variant-numeric:tabular-nums; color:rgba(23,59,46,.38); }
  /* konturnumeralen. Tio rader tål inte hubbens 46px, 32 är rätt mått här. */
  .art .lst .nr, .art .toc .nr, .art .gl .nr { font-size:32px; font-weight:800;
    letter-spacing:-.03em; line-height:1.1; min-width:52px; color:var(--mint-deep);
    transition:color .18s ease; }
  @supports (-webkit-text-stroke:1px black) {
    .art .lst .nr, .art .toc .nr, .art .gl .nr { color:transparent;
      -webkit-text-stroke:1.2px rgba(13,59,42,.25); transition:-webkit-text-stroke-color .18s ease; }
    .art .gl a:hover .nr, .art .toc a:hover .nr { color:transparent;
      -webkit-text-stroke-color:var(--accent-dark); }
  }
  .art .lst-k { margin-top:9px; }
  /* hoverplattan ritas bara medan musen är där, i stället för att ligga kvar som kort */
  .art .gl a, .art .toc a { position:relative; }
  .art .gl a::before, .art .toc a::before { content:""; position:absolute; inset:8px -28px;
    border-radius:20px; background:rgba(13,109,74,.055); opacity:0;
    transition:opacity .18s ease; pointer-events:none; }
  .art .gl a:hover::before, .art .toc a:hover::before { opacity:1; }
  .art .gl a > span, .art .toc a > span { position:relative; }
  .art .gl .gt span { white-space:normal; overflow:visible; text-overflow:clip; max-width:44ch; }
  /* mikrotyperemsan: PRODUKTORD, samma sort som hubbens. Sökordssoppa som dekoration
     (À-PRIS, GILTIGHETSTID, F-SKATT) är i sig en AI-signal. Rör sig inte, ingen
     animation: effekten kommer av att texten är för lång och tonas ut i kanterna. */
  .art .tick { display:block; margin-top:64px; padding:13px 0;
    border-top:1px solid var(--hline); border-bottom:1px solid var(--hline);
    font-size:10px; font-weight:800; letter-spacing:.28em; text-transform:uppercase;
    color:rgba(23,59,46,.32); white-space:nowrap; overflow:hidden; user-select:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent); }

  .art footer { margin-top:64px; }
}

/* ============ stillhet för den som bett om det ============
   Caspers iPhone kör reducerad rörelse, och "fungerar inte på telefonen" har en gång
   varit just den vägen. Ingenting släcks, bara rörelsen. */
@media (prefers-reduced-motion:reduce){
  .art .gl .gm svg, .art .gl .gt b, .art .gl a::before, .art .toc a::before,
  .art .toc .tt, .art .lst-k, .art .lst .tx, .art .gl .nr, .art .toc .nr { transition:none; }
}

/* ============ utskrift ============
   Sidans produkt är en A4-offert och den hade noll utskriftsstil. Nu kan man skriva
   ut checklistan och ta med den i bilen. Navigation, CTA och dekor stryks. */
@media print{
  .topbar, .art .smulor, .art .slut, .art .tick, .art .gl, .art .toc,
  .art .ghost, .art .folio, .art .genknappar, .art .lagg { display:none !important; }
  body { background:#fff !important; }
  .wrap.art { max-width:none; padding:0; }
  .art .plint { border:0; border-radius:0; padding:0; background:none; box-shadow:none; }
  .art .lst li, .art .steg, .art .qa, .art td { border-color:#ccc; }
  .art h2, .art h3 { break-after:avoid; }
  .art .lst li, .art .qa, .art table { break-inside:avoid; }
  .art .lbl { margin-top:28px; }
}