/* BIX visuell identitet för bixbooking.com (Marketing 25/10, Pelles godkännande).
   Facit: design-canvasen https://claude.ai/artifact/MyhRtanaDq45MG3xgaf3qi (ljus rad).
   Beställning: docs/marketing/bestallning-hemsida-ny-identitet-20261025.md.

   Typsnitt: allt självhostat (cookielagen, se web/shared/fonts.css). Inter Tight och
   Instrument Serif kursiv finns redan i /assets/fonts. Clash Grotesk Medium kopieras
   OFÖRÄNDRAD från docs/handover/typsnitt-clash-grotesk-20261024/woff2/ till
   /assets/fonts/ClashGrotesk-Medium.woff2 (ITF FFL 01 tillåter egen webbplats;
   ingen subsetting, ingen konvertering, inget namnbyte). Clash bara på rubriker
   med ord från 28 px. Siffror, tider, priser, knappar och brödtext i Inter Tight. */

@font-face {
  font-family: 'Clash Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ClashGrotesk-Medium.woff2) format('woff2');
}

:root {
  --bx-duk: #EEEBE5;
  --bx-panel: #FBFAF7;
  --bx-sub: #EEEBE5;
  --bx-mork: #0F0E0D;
  --bx-mork-falt: #1C1B19;
  --bx-text: #151412;
  --bx-text-2: #5C5852;
  --bx-dampad: #8E897F;          /* bara stor text och punkten efter rubriker */
  --bx-dampad-ljust: #6F6A61;    /* dämpad text på duk och panel, 4,5:1 mot #EEEBE5 (Marketing 25/10; #8E897F ger 2,9:1) */
  --bx-dampad-stor-ljust: #88837A; /* stor dämpad text och punkten efter rubriker på ljust, 3,2:1 (Marketing 25/10) */
  --bx-ljus: #F2EFEA;            /* text på mörkt */
  --bx-ljus-2: #CFCAC2;
  --bx-ljus-3: #A9A49C;
  --bx-salvia: #D5E4DA;
  --bx-salvia-text: #2F3833;
  --bx-salvia-etikett: #34413A;
  --bx-punkt: #4F8A6D;           /* på ljust; #7BAF96 på mörkt */
  --bx-punkt-mork: #7BAF96;
  --bx-sand: #EBE2D3;
  --bx-sand-text: #463F35;
  --bx-sand-etikett: #5A5145;
  --bx-linje: rgba(21, 20, 18, 0.10);
  --bx-linje-chip: rgba(21, 20, 18, 0.16);

  --bx-r-panel: 32px;
  --bx-r-kort: 24px;
  --bx-r-falt: 14px;
  --bx-r-piller: 999px;

  --bx-kant: 12px;               /* duken runt panelerna; 8px på mobil */
  --bx-max: 1240px;
  --bx-luft: clamp(120px, 12vw, 180px);  /* mellan delar */

  --bx-sans: 'Inter Tight', system-ui, sans-serif;
  --bx-rubrik: 'Clash Grotesk', 'Inter Tight', system-ui, sans-serif;
  --bx-serif-kursiv: 'Instrument Serif', Georgia, serif;
}

body.bx {
  margin: 0;
  background: var(--bx-duk);
  color: var(--bx-text);
  font-family: var(--bx-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.bx-sida { padding: var(--bx-kant); }
@media (max-width: 600px) { :root { --bx-kant: 8px; --bx-luft: 96px; } }
.bx a { color: inherit; text-decoration: none; }
.bx :focus-visible { outline: 2px solid var(--bx-punkt); outline-offset: 3px; border-radius: 8px; }

/* Rubriker */
.bx-h1, .bx-h2, .bx-h3 { margin: 0; font-family: var(--bx-rubrik); font-weight: 500; text-wrap: balance; }
.bx :is(p, li, dd, figcaption) { text-wrap: pretty; }  /* inget ensamt ord på sista raden i löptext (Marketing 25/10) */
.bx .hel { white-space: nowrap; }  /* håller ihop de sista orden där pretty inte räcker (ett långt sista ord) eller ett ord med bindestreck */
.bx-h1 { font-size: clamp(52px, 6.4vw, 104px); line-height: 0.96; letter-spacing: -0.035em; }
.bx-h2 { font-size: clamp(44px, 5vw, 76px); line-height: 1; letter-spacing: -0.035em; }
.bx-h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1.03; letter-spacing: -0.03em; }
.bx-punkt { color: var(--bx-dampad-stor-ljust); }  /* punkten efter rubriken; på mörkt --bx-dampad, se nedan */
.bx-overrad { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bx-text-2); }
.bx-tagline em { font-family: var(--bx-serif-kursiv); font-style: italic; font-weight: 400; }  /* bara ordet live */

/* Menyrad */
.bx-meny {
  position: sticky; top: var(--bx-kant); z-index: 10;
  max-width: 1180px; margin: 0 auto; padding: 8px 8px 8px 24px;
  border-radius: var(--bx-r-piller); background: rgba(15, 14, 13, 0.94); color: var(--bx-ljus);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.35);
  /* 94 % täcker inte ljus text som rullar förbi (Pelles fynd 25/10: chattens bubblor syntes genom raden): oskärpan gör det som ligger bakom oläsligt. */
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.bx-meny .bx-ordmarke { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.bx-meny nav { display: flex; gap: 28px; font-size: 15px; color: var(--bx-ljus-2); }
@media (max-width: 900px) { .bx-meny nav { display: none; } }

/* Paneler och kort */
.bx-panel { border-radius: var(--bx-r-panel); background: var(--bx-panel); }
.bx-panel--mork { background: var(--bx-mork); color: var(--bx-ljus); }
.bx-panel--salvia { background: var(--bx-salvia); color: var(--bx-text); }
.bx-panel--sand { background: var(--bx-sand); color: var(--bx-text); }
.bx-hjalte { margin-top: -68px; overflow: hidden; }   /* börjar under menyraden */
.bx-kort { border-radius: var(--bx-r-kort); background: var(--bx-panel); padding: 26px; }
.bx-lyft { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.bx-lyft:hover { transform: translateY(-4px); }
.bx-inre { max-width: var(--bx-max); margin: 0 auto; padding: var(--bx-luft) clamp(12px, 3vw, 44px) 0; }

/* Rutnät */
.bx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.bx-span2 { grid-column: span 2; }
@media (max-width: 760px) { .bx-span2 { grid-column: auto; } }

/* Knappar och piller (minst 44 px) */
.bx-knapp { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: var(--bx-r-piller); font-weight: 600; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.bx .bx-knapp--primar { background: var(--bx-mork); color: var(--bx-ljus); }
.bx .bx-panel--mork .bx-knapp--primar, .bx .bx-meny .bx-knapp--primar { background: var(--bx-ljus); color: var(--bx-mork); }
.bx-knapp--sekundar { background: transparent; border: 1px solid var(--bx-linje-chip); color: inherit; font-weight: 500; }
.bx-panel--mork .bx-knapp--sekundar { border-color: rgba(242, 239, 234, 0.3); }
.bx-piller { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--bx-r-piller); font-size: 15px; }
.bx-panel--mork .bx-piller { background: var(--bx-mork-falt); color: var(--bx-ljus-2); }

/* Sökfält (i mörk panel) */
.bx-sok { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border-radius: 22px; background: var(--bx-mork-falt); border: 1px solid rgba(242, 239, 234, 0.10); max-width: 680px; }
.bx-sok label { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: var(--bx-r-falt); border: 1px solid transparent; }
.bx-sok label:focus-within { border-color: rgba(242, 239, 234, 0.6); }
.bx-sok label span { font-size: 13px; color: var(--bx-ljus-3); }
.bx-sok input { background: transparent; border: 0; padding: 0; color: var(--bx-ljus); font: inherit; font-size: 17px; }
.bx-sok input:focus { outline: none; }
.bx-sok input::placeholder { color: #8C877F; }
.bx-sok button { min-height: 60px; padding: 0 30px; border: 0; border-radius: var(--bx-r-falt); background: var(--bx-ljus); color: var(--bx-mork); font: inherit; font-weight: 600; cursor: pointer; }

/* Rullande band med taglinen */
.bx-band { overflow: hidden; padding: clamp(44px, 6vw, 88px) 0; }
.bx-band__spar { display: flex; width: max-content; white-space: nowrap; animation: bx-band 40s linear infinite; }
.bx-band__spar > span { font-size: clamp(64px, 9vw, 140px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; padding-right: 0.6em; }
@keyframes bx-band { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bx-band__spar { animation: none; } .bx-lyft:hover { transform: none; } }

/* Telefonram för riktiga skärmar */
.bx-telefon { box-sizing: border-box; padding: 9px; border-radius: 48px; background: #262421; border: 1px solid rgba(242, 239, 234, 0.14); }
.bx-telefon img { width: 100%; height: 100%; object-fit: cover; border-radius: 39px; display: block; }


/* Går att boka nu: reserven när Ledigt idag har färre än två tider (ledigt-idag.js), Hitta-canvasens kort. */
.bx-tider.bx-platser { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.bx-plats { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 240px; box-sizing: border-box; padding: 28px; border-radius: 28px; background: var(--bx-panel); }
.bx-plats__topp, .bx-plats__fot { display: flex; justify-content: space-between; gap: 16px; }
.bx-plats__topp { align-items: flex-start; }
.bx-plats__fot { align-items: flex-end; gap: 12px; }
.bx-plats__namn { display: block; font-family: var(--bx-rubrik); font-weight: 500; font-size: 30px; letter-spacing: -0.025em; line-height: 1.1; }
.bx-plats__ort { display: block; font-size: 15px; color: var(--bx-text-2); }
.bx-plats__init { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--bx-sub); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.bx-plats__nar { display: flex; flex-direction: column; }
.bx-plats__nar span { font-size: 13px; color: var(--bx-text-2); }
.bx-plats__nar b { font-weight: 600; font-size: 20px; }
.bx-plats__knapp { display: inline-flex; align-items: center; min-height: 48px; box-sizing: border-box; padding: 0 20px; border-radius: var(--bx-r-piller); background: var(--bx-mork); color: var(--bx-ljus); border: 1px solid var(--bx-mork); font-weight: 600; font-size: 15px; white-space: nowrap; }
.bx-plats__knapp--fraga { background: transparent; color: var(--bx-text); }

/* Butiksmärkena, Apples och Googles egna filer. Googles PNG har luft ovan och under märket
   (synlig höjd 192 av 250 px), så den görs högre och dras ihop: synlig höjd = Apples. */
.bx-marken { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; --mh: 60px; }
.bx-marken a { display: inline-flex; border-radius: 10px; }
.bx-marken img { display: block; width: auto; }
.bx-marken .bx-marke--ios { height: var(--mh); }
.bx-marken .bx-marke--android { height: calc(var(--mh) * 250 / 192); margin: calc(var(--mh) * -29 / 192) 0; }
.bx-mobil-cta__text { display: none !important; }

/* Fot */
.bx-fot { max-width: var(--bx-max); margin: 0 auto; padding: 72px clamp(12px, 3vw, 44px) 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; font-size: 15px; }
.bx-fot a, .bx-fot span { color: var(--bx-text-2); }

/* ── Skalet på sajten (WEBB 25/10, push 1: / och /foretag) ─────────────────────────────────
   Allt nedan bygger på tokens och komponenter ovan. Måtten är canvasens (ljus rad);
   mobil = canvasens 390-utförande, från 600 px och nedåt. */

.bx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bx-skip { position: fixed; top: -120px; left: 16px; z-index: 60; padding: 13px 22px; border-radius: 12px; background: var(--bx-ljus); color: var(--bx-mork); font-weight: 600; transition: top .25s; }
.bx-skip:focus { top: 16px; }

/* Menyrad: ordmärke, länkar, knappar. Under 900 px tar menyknappen länkarnas plats. */
.bx-meny { border: 1px solid transparent; }
.bx-meny__vanster { display: flex; align-items: baseline; gap: 10px; }
.bx-meny__under { font-size: 14px; color: var(--bx-ljus-3); }
.bx-meny nav a { min-height: 44px; display: inline-flex; align-items: center; }
.bx-meny nav a:hover, .bx-fot a:hover { color: var(--bx-ljus); }
.bx-meny__knappar { display: flex; gap: 8px; }
.bx-meny .bx-knapp { min-height: 44px; padding: 0 20px; font-size: 15px; gap: 0; }
.bx-meny .bx-knapp--sekundar { padding: 0 18px; border-color: rgba(242, 239, 234, 0.25); }
.bx-meny__oppna { display: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(242, 239, 234, 0.25); background: transparent; color: var(--bx-ljus); align-items: center; justify-content: center; cursor: pointer; }
.bx-meny .bx-meny__lista { display: none; }  /* .bx-meny nav ovan visar annars listan på sidor utan theme.css ([hidden]-regeln) */
@media (max-width: 900px) {
  .bx-meny__oppna { display: inline-flex; }
  .bx-meny__dold-sm { display: none; }
  .bx-meny .bx-meny__lista:not([hidden]) { display: flex; flex-direction: column; flex-basis: 100%; padding: 8px 16px 12px 0; font-size: 17px; color: var(--bx-ljus-2); }
  .bx-meny__lista a { min-height: 48px; display: flex; align-items: center; border-top: 1px solid rgba(242, 239, 234, 0.10); }
  .bx-meny:has(.bx-meny__lista:not([hidden])) { border-radius: 28px; background: var(--bx-mork); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5); }
}

/* Hjälten börjar under menyraden (68 px = menyns höjd + kant). */
.bx-hjalte { border-radius: var(--bx-r-panel); }
.bx-hjalte__inre { max-width: 980px; margin: 0 auto; padding: clamp(150px, 13vw, 190px) clamp(24px, 4vw, 56px) 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; }
.bx-hjalte .bx-punkt, .bx-panel--mork .bx-punkt { color: var(--bx-dampad); }
.bx-sok { width: 100%; box-sizing: border-box; text-align: left; position: relative; }
.bx-sok label { flex: 2 1 220px; }
.bx-sok label + label { flex: 1 1 140px; }
.bx-sok button { flex: 0 0 auto; padding: 0 32px; }
.bx-piller-rad { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Produkten i hjälten: telefonen med riktig skärm, kortet och två ritade lappar. */
.bx-scen { position: relative; height: 560px; margin-top: 72px; display: flex; justify-content: center; }
.bx-scen__telefon { width: 320px; height: 640px; box-sizing: border-box; padding: 10px 10px 0; border-radius: 52px 52px 0 0; background: #262421; border: 1px solid rgba(242, 239, 234, 0.14); border-bottom: 0; overflow: hidden; box-shadow: 0 -30px 120px -40px rgba(213, 228, 218, 0.25); }
.bx-scen__telefon img { width: 100%; height: auto; display: block; border-radius: 42px 42px 0 0; }  /* hela skärmen i ramens bredd, toppen först */
.bx-scen .bx-idkort { position: absolute; left: max(0px, calc(50% - 420px)); bottom: 24px; --k: 1; transform: rotate(-8deg); }  /* bara telefonens nedre tredjedel */
.bx-lapp { position: absolute; padding: 16px 18px; border-radius: 18px; background: var(--bx-ljus); color: var(--bx-text); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; gap: 2px; text-align: left; }
.bx-lapp__liten { font-size: 13px; color: var(--bx-text-2); }
.bx-lapp b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bx-lapp--salvia { background: var(--bx-salvia); flex-direction: row; align-items: center; gap: 10px; padding: 14px 16px; }
.bx-prick { width: 8px; height: 8px; border-radius: 50%; background: var(--bx-punkt); display: inline-block; flex: none; }

/* bixID-kortet, appens kort (docs/design/bixid-vand-kortet-20261022/). Storleken styrs av --k (1 = 320 px brett). */
.bx-idkort { --k: 0.97; position: relative; width: calc(var(--k) * 320px); max-width: 100%; aspect-ratio: 1.586 / 1; border-radius: 14px; overflow: hidden; border: 1px solid #3A3A3A; background: linear-gradient(150deg, #222222 0%, #181818 55%, #141414 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 40px 80px -24px rgba(0, 0, 0, 0.8); color: #F0EDE8; line-height: 1; }
.bx-idkort__glans { position: absolute; inset: 0; background: conic-gradient(from 210deg at 62% 48%, rgba(255,255,255,0) 0deg, rgba(255,255,255,0.07) 40deg, rgba(255,255,255,0) 90deg, rgba(255,255,255,0.05) 170deg, rgba(255,255,255,0) 230deg, rgba(255,255,255,0.07) 300deg, rgba(255,255,255,0) 360deg); }
.bx-idkort__vattenmarke { position: absolute; left: -2%; bottom: -18%; font-size: calc(var(--k) * 136px); font-weight: 600; letter-spacing: -0.05em; color: rgba(240, 237, 232, 0.045); white-space: nowrap; }
.bx-idkort__logo { position: absolute; left: calc(var(--k) * 20px); top: calc(var(--k) * 18px); font-size: calc(var(--k) * 20px); font-weight: 600; letter-spacing: -0.03em; }
.bx-idkort__logo span { font-weight: 400; color: #9A9790; }
.bx-idkort__namn, .bx-idkort__nr { position: absolute; font-size: max(8px, calc(var(--k) * 10px)); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.bx-idkort__namn { right: calc(var(--k) * 20px); top: calc(var(--k) * 24px); color: #CFCCC6; }
.bx-idkort__nr { left: calc(var(--k) * 20px); bottom: calc(var(--k) * 18px); color: #9A9790; }

/* Delar och rubrikrader */
.bx-del { max-width: var(--bx-max); margin: 0 auto; padding: var(--bx-luft) clamp(12px, 3vw, 44px) 0; }
.bx-del--tat { padding-top: 96px; }
.bx-del--smal { max-width: 1100px; }
.bx-del__rubrik { margin: 0 0 48px; text-align: center; }
.bx-del__rad { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; }
.bx-del__rad .bx-h2 { font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -0.03em; }
.bx-live { display: flex; align-items: center; gap: 12px; }
.bx-live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--bx-punkt); flex: none; }
.bx-lank { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; }
.bx-pastaende { margin: 0; font-family: var(--bx-rubrik); font-weight: 500; font-size: clamp(34px, 4vw, 58px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.bx-pastaende span { color: var(--bx-dampad-ljust); }

/* Ledigt idag: riktiga tider (ledigt-idag.js). Delen är dold tills det finns minst en. */
.bx-tider { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.bx-tid { display: flex; flex-direction: column; gap: 22px; padding: 26px; border-radius: var(--bx-r-kort); background: var(--bx-panel); }
.bx-tid__klocka { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bx-tid__vad { display: flex; flex-direction: column; }
.bx-tid__vad span:first-child { font-weight: 500; }
.bx-tid__vad span + span { font-size: 15px; color: var(--bx-text-2); }
.bx-tid__knapp, .bx-mini-knapp { display: inline-flex; align-self: flex-start; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--bx-r-piller); background: var(--bx-mork); color: var(--bx-ljus); font-weight: 600; font-size: 15px; white-space: nowrap; }

/* Bento-korten */
.bx-ruta { min-height: 420px; box-sizing: border-box; border-radius: var(--bx-r-panel); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; overflow: hidden; }
.bx-ruta--hog { min-height: 460px; }
.bx-ruta--rad { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 32px; padding: clamp(28px, 3vw, 44px); }
.bx-ruta__text { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
.bx-ruta__text p { margin: 0; }
.bx-panel--mork .bx-ruta__text p, .bx-panel--mork .bx-overrad { color: var(--bx-ljus-2); }
.bx-panel--mork .bx-overrad { color: var(--bx-ljus-3); }
.bx-panel--salvia .bx-overrad { color: var(--bx-salvia-etikett); }
.bx-panel--salvia p { color: var(--bx-salvia-text); }
.bx-panel--sand .bx-overrad { color: var(--bx-sand-etikett); }
.bx-panel--sand p { color: var(--bx-sand-text); }
.bx-notis { width: min(100%, 400px); box-sizing: border-box; padding: 18px 20px; border-radius: 24px; background: rgba(251, 250, 247, 0.94); box-shadow: 0 30px 60px -24px rgba(35, 60, 45, 0.45); display: flex; gap: 14px; align-items: flex-start; }
.bx-notis__ikon { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--bx-mork); color: var(--bx-ljus); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.bx-notis__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bx-notis__topp { display: flex; justify-content: space-between; gap: 12px; }
.bx-notis__topp b { font-weight: 600; }
.bx-notis__topp span { font-size: 13px; color: var(--bx-text-2); }
.bx-notis__text > span { font-size: 15px; line-height: 1.45; color: #34312D; }
.bx-knacka { border-radius: 20px; background: var(--bx-panel); padding: 16px 16px 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bx-knacka span span { display: block; line-height: 1.35; }
.bx-knacka span span:first-child { font-weight: 600; }
.bx-knacka span span + span { font-size: 14px; color: var(--bx-text-2); }
.bx-knacka .bx-mini-knapp { align-self: center; }
.bx-pillerlista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bx-pillerlista li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--bx-r-piller); border: 1px solid var(--bx-linje-chip); font-weight: 500; }
.bx-panel--sand .bx-pillerlista li { border: 0; background: var(--bx-panel); min-height: 48px; padding: 0 20px; }

/* Citaten */
.bx-citat { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.bx-citat figure { margin: 0; border-radius: var(--bx-r-panel); background: var(--bx-panel); padding: 12px; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 24px; align-items: center; }
.bx-citat img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; display: block; }
.bx-citat figcaption { display: flex; flex-direction: column; gap: 18px; padding: 8px 16px 8px 0; }
.bx-citat blockquote { margin: 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; letter-spacing: -0.01em; }
.bx-citat figcaption > span { font-size: 15px; color: var(--bx-text-2); }
.bx-citat strong { font-weight: 600; color: var(--bx-text); }

/* Så bokar du: tre riktiga skärmar */
.bx-steg-panel { padding: clamp(36px, 5vw, 72px); display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.bx-steg { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.bx-steg li { display: flex; flex-direction: column; gap: 22px; }
.bx-steg__bild { border-radius: var(--bx-r-kort); background: var(--bx-sub); padding: 28px 0 0; display: flex; justify-content: center; overflow: hidden; height: 390px; }
.bx-steg__telefon { width: 220px; aspect-ratio: 1080 / 2400; box-sizing: border-box; padding: 7px; border-radius: 36px; background: var(--bx-mork); align-self: flex-start; }
.bx-steg__telefon img { width: 100%; height: 100%; object-fit: cover; border-radius: 29px; display: block; }
.bx-steg__text { display: flex; gap: 14px; align-items: baseline; }
.bx-steg__text > span:first-child { font-size: 15px; color: var(--bx-text-2); font-variant-numeric: tabular-nums; }
.bx-steg__text b { display: block; font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.bx-steg__text span span { display: block; font-size: 16px; color: var(--bx-text-2); }

/* Hitta: kategorierna */
.bx-kategorier { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.bx-kategori { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 120px; padding: 0 30px; border-radius: var(--bx-r-kort); background: var(--bx-panel); }
.bx-kategori__namn { display: block; font-family: var(--bx-rubrik); font-weight: 500; font-size: 32px; letter-spacing: -0.025em; line-height: 1.1; }
.bx-kategori__not { display: block; font-size: 15px; color: var(--bx-text-2); }
.bx-pil { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--bx-sub); display: inline-flex; align-items: center; justify-content: center; }

/* Mörk delning med en telefon (startsidans företagsdel) */
.bx-delning { padding: clamp(40px, 5vw, 80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(40px, 5vw, 80px); align-items: center; overflow: hidden; }
.bx-delning__text { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.bx-delning__text p { margin: 0; color: var(--bx-ljus-2); max-width: 34ch; }
.bx-delning__telefon { display: flex; justify-content: center; margin-bottom: -120px; }
.bx-telefon--280 { width: 280px; aspect-ratio: 644 / 1400; border-radius: 46px; }
.bx-telefon--280 img { border-radius: 37px; }
.bx-knapp--stor { min-height: 60px; padding: 0 30px; }

/* Bandet och Ladda ner */
.bx-band { border-radius: var(--bx-r-panel); }
.bx-band__spar em { font-family: var(--bx-serif-kursiv); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.bx-panel--mork .bx-band__spar em { color: #E6DCCD; }
.bx-ladda { padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; }
.bx-ladda .bx-h2 { font-size: clamp(44px, 6vw, 92px); line-height: 0.98; max-width: 13ch; }
.bx-ladda .bx-punkt { color: #5F7A6B; }

/* Fot */
.bx-fot { list-style: none; }
.bx-fot__kol { display: flex; flex-direction: column; gap: 12px; }
.bx-fot__kol > b { font-weight: 600; color: var(--bx-text); }
.bx-fot__marke { font-weight: 700; font-size: 22px; color: var(--bx-text) !important; }
.bx-fot .bx-tagline em { font-size: 17px; }
.bx-fot a:hover { color: var(--bx-text); }
.bx-fot__branscher { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 8px; border-top: 1px solid var(--bx-linje); font-size: 14px; }
.bx-fot__branscher a { min-height: 32px; display: inline-flex; align-items: center; }

/* Fast knapp längst ned på mobil */
.bx-mobil-cta { display: none; }


/* Sökförslagen under startsidans sökruta (dygn-search.js, oförändrad logik) i den nya stilen. */
.bx .dygn-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; box-sizing: border-box; padding: 8px; border-radius: 22px; text-align: left; background: #1C1B19; border: 1px solid rgba(242, 239, 234, 0.14); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); max-height: min(340px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.bx .dygn-suggest[hidden] { display: none; }
.bx .dygn-suggest.up { top: auto; bottom: calc(100% + 8px); }
.bx .dygn-suggest-head { padding: 10px 14px 6px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bx-ljus-3); }
.bx .dygn-suggest-hint { padding: 12px 14px; font-size: 15px; line-height: 1.45; color: var(--bx-ljus-2); }
.bx .dygn-suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px 14px; border-radius: 14px; color: var(--bx-ljus); }
.bx .dygn-suggest-row:hover, .bx .dygn-suggest-row:focus-visible { background: rgba(242, 239, 234, .08); outline: none; }
.bx .dygn-suggest-row:focus-visible { box-shadow: inset 0 0 0 2px rgba(242, 239, 234, .55); }
.bx .dygn-suggest-name { display: block; font-size: 16px; font-weight: 600; }
.bx .dygn-suggest-sub { display: block; margin-top: 2px; font-size: 14px; color: var(--bx-ljus-3); }
.bx .dygn-suggest-tag { flex: none; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.bx .dygn-suggest-tag.book { background: var(--bx-ljus); color: var(--bx-mork); }
.bx .dygn-suggest-tag.knock { border: 1px solid rgba(242, 239, 234, .35); color: var(--bx-ljus); }
.bx .dygn-suggest-go { flex: none; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bx-ljus-3); }

/* ── /foretag ── */
.bx-hjalte--delad .bx-hjalte__inre { max-width: 1240px; padding-bottom: clamp(72px, 7vw, 112px); display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: clamp(56px, 6vw, 96px); align-items: center; text-align: left; }
.bx-hjalte--delad .bx-h1 { font-size: clamp(56px, 7vw, 112px); line-height: 0.94; }
.bx-hjalte__vanster { display: flex; flex-direction: column; gap: 32px; }
.bx-ingress { margin: 0; max-width: 34ch; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; color: var(--bx-ljus-2); text-wrap: pretty; }  /* inget ensamt ord på sista raden (Marketing 25/10) */
.bx .bx-understruken { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; color: var(--bx-ljus-2); text-decoration: underline !important; text-underline-offset: 4px; text-decoration-color: rgba(242, 239, 234, 0.35) !important; }
.bx-scen--foretag { height: auto; min-height: 600px; margin: 0; align-items: center; }
.bx-telefon--290 { width: 290px; aspect-ratio: 644 / 1400; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.9); }
.bx-scen--foretag .bx-lapp { left: max(0px, calc(50% - 300px)); top: 130px; padding: 14px 18px; }  /* mellan Idag-rubriken och IDAG-raden i skärmen (Marketing 25/10) */
.bx-lapp--pris { left: auto !important; top: auto !important; right: max(0px, calc(50% - 300px)); bottom: 80px; background: var(--bx-salvia); padding: 16px 20px !important; gap: 0; }
.bx-lapp--pris b { font-size: 32px; letter-spacing: -0.03em; line-height: 1; }
.bx-lapp--pris span { font-size: 14px; color: var(--bx-salvia-text); }

/* Anspråket i hjälten: foretag-chat.js monterat i hjältevariant. Frågeläget är sökrutan,
   samtalsläget blir det ljusa kortet (.f-card i foretag.css). */
.bx-claim:not(.is-chat) { background: transparent; max-width: 600px; padding: 0; }
.bx-claim .bx-sok { max-width: 600px; }
.bx-claim .bx-sok label { flex: 1 1 240px; }
.bx-claim .bx-sok button { padding: 0 28px; }
.bx-claim .f-ask { display: flex; flex-direction: column; gap: 16px; }
.bx-claim .f-ask-loading { right: 190px; color: var(--bx-ljus-3); }
.bx-claim .f-suggest { top: calc(100% + 8px); background: #1C1B19; border: 1px solid rgba(242, 239, 234, 0.14); border-radius: 22px; padding: 8px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.bx-claim .f-suggest li { color: var(--bx-ljus); border-radius: 14px; }
.bx-claim .f-suggest li:hover, .bx-claim .f-suggest li[aria-selected="true"] { background: rgba(242, 239, 234, 0.08); }
.bx-claim .f-suggest span { color: var(--bx-ljus-3); }
.bx-claim, .bx-claim * { box-sizing: border-box; }
.bx-claim.is-chat { position: relative; width: 100%; max-width: 560px; padding: 22px; gap: 14px; border-radius: var(--bx-r-kort); color: var(--bx-text); text-align: left; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.bx-claim.is-chat a:not(.ac-btn) { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.bx-claim.is-chat a.ac-btn { color: var(--accent-text); }

.bx-villkor { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bx-villkor > div { border-radius: var(--bx-r-kort); background: var(--bx-panel); padding: 30px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; box-sizing: border-box; justify-content: space-between; }
.bx-villkor b { font-size: clamp(44px, 4.4vw, 60px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bx-villkor span { font-size: 16px; color: var(--bx-text-2); }
.bx-del--tight { padding-top: 12px; }
.bx-ruta--funktion { min-height: 560px; padding-bottom: 0; justify-content: flex-start; }
.bx-ruta--funktion .bx-h3, .bx-ruta--bosse .bx-h3 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.04; }
.bx-ruta__text--kort { gap: 12px; }
.bx-skarmklipp { display: flex; justify-content: center; margin-top: auto; }
.bx-skarmklipp div { width: 240px; height: 380px; box-sizing: border-box; padding: 8px 8px 0; border-radius: 40px 40px 0 0; background: var(--bx-mork); overflow: hidden; }
.bx-skarmklipp img { width: 100%; height: auto; display: block; border-radius: 32px 32px 0 0; }
.bx-ruta--bosse { min-height: 560px; }
.bx-bosse { display: flex; flex-direction: column; gap: 10px; }
.bx-bosse__du { align-self: flex-end; max-width: 80%; padding: 12px 16px; border-radius: 18px 18px 6px 18px; background: var(--bx-ljus); color: var(--bx-mork); }
.bx-bosse__svar { align-self: flex-start; max-width: 90%; padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: var(--bx-mork-falt); border: 1px solid rgba(242, 239, 234, 0.12); display: flex; flex-direction: column; gap: 8px; }
.bx-bosse__svar b { font-weight: 600; }
.bx-bosse__svar > span { color: var(--bx-ljus-2); font-size: 15px; }
.bx-bosse__svar .bx-mini-knapp { min-height: 40px; padding: 0 16px; font-size: 14px; background: var(--bx-ljus); color: var(--bx-mork); }
.bx-ruta--bred { min-height: 0; justify-content: space-between; }
.bx-ruta--bred .bx-ruta__text { max-width: 380px; gap: 12px; }
.bx-ruta--bred .bx-pillerlista { max-width: 460px; }
.bx-ingar { min-height: 0; justify-content: flex-start; gap: 4px; }
.bx-ingar .bx-overrad { padding-bottom: 12px; }
.bx-tabell { margin: 0; }
.bx-tabell div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bx-linje); }
.bx-tabell dt { font-weight: 600; }
.bx-tabell dd { margin: 0; font-size: 15px; color: var(--bx-text-2); text-align: right; }

.bx-tvadelad { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; }
.bx-tvadelad__vanster { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.bx-stegrader { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bx-stegrader li { display: flex; gap: 24px; align-items: flex-start; padding: 28px 30px; border-radius: var(--bx-r-kort); background: var(--bx-panel); }
.bx-stegrader__nr { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--bx-mork); color: var(--bx-ljus); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.bx-stegrader b { display: block; font-weight: 600; font-size: 22px; letter-spacing: -0.01em; line-height: 1.25; }
.bx-stegrader span span { display: block; color: var(--bx-text-2); }

.bx-pris__huvud { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; padding-bottom: 48px; }
.bx-pris__huvud p { margin: 0; color: var(--bx-text-2); max-width: 46ch; }
.bx-pris { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; max-width: 980px; margin: 0 auto; }
.bx-pris > div { border-radius: var(--bx-r-panel); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 20px; }
.bx-pris__namn { font-weight: 600; font-size: 20px; }
.bx-pris__namn--bix { font-weight: 700; }
.bx-pris__belopp { font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bx-pris__belopp small { font-size: 18px; font-weight: 500; }
.bx-pris__belopp--tomt { color: var(--bx-dampad-ljust); }
.bx-panel--mork .bx-pris__belopp small { color: var(--bx-ljus-3); }
.bx-pris__rader { margin: 0; }
.bx-pris__rader div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--bx-linje); }
.bx-panel--mork .bx-pris__rader div { border-top-color: rgba(242, 239, 234, 0.12); }
.bx-pris__rader dt { color: var(--bx-text-2); }
.bx-panel--mork .bx-pris__rader dt { color: var(--bx-ljus-2); }
.bx-pris__rader dd { margin: 0; font-weight: 600; }
.bx-pris__fyll { width: 90px; height: 16px; border-bottom: 1px dashed rgba(21, 20, 18, 0.3); }
.bx-pris__satser { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--bx-ljus-2); padding-top: 4px; }
.bx-pris__satser b { color: var(--bx-ljus); font-weight: 600; }
.bx-pris .bx-knapp { min-height: 58px; margin-top: 8px; }

.bx-fragor { padding: clamp(32px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 80px); }
.bx-fragor__lista { border-top: 1px solid var(--bx-linje); }
.bx-fragor details { border-bottom: 1px solid var(--bx-linje); }
.bx-fragor summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 76px; font-weight: 600; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.01em; }
.bx-fragor summary::-webkit-details-marker { display: none; }
.bx-plus { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--bx-sub); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 400; transition: transform .3s ease; }
.bx-fragor details[open] .bx-plus { transform: rotate(45deg); }
.bx-fragor p { margin: 0 0 24px; max-width: 60ch; color: var(--bx-text-2); }
.bx-avslut { padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.bx-avslut .bx-h2 { font-size: clamp(44px, 6vw, 92px); line-height: 0.98; max-width: 13ch; }
.bx-avslut > span { color: var(--bx-ljus-3); font-size: 15px; }

@media (min-width: 761px) { .bx-span2-stor { grid-column: span 2; } }
@media (max-width: 600px) { .bx-dold-mobil { display: none !important; } }
/* Under 380 px ryms inte båda märkena i den fasta knappen: då står Ladda ner appen till /hamta. */
@media (max-width: 379px) { .bx-mobil-cta .bx-marken { display: none; } .bx-mobil-cta .bx-mobil-cta__text { display: flex !important; } }

/* ── Mobil (canvasens 390-utförande) ── */
@media (max-width: 600px) {
  .bx-meny { padding: 6px 6px 6px 20px; }
  .bx-meny .bx-ordmarke { font-size: 19px; }
  .bx-meny__under { font-size: 13px; }
  .bx-hjalte { margin-top: -56px; border-radius: 28px; }
  .bx-hjalte__inre { padding: 104px 20px 0; align-items: stretch; text-align: left; gap: 24px; }
  .bx-piller-rad { justify-content: flex-start; margin-top: -8px; }
  .bx-h1 { font-size: 44px; line-height: 0.98; }
  .bx-h2 { font-size: 40px; }
  .bx-h3 { font-size: 32px; line-height: 1.04; }
  .bx-sok { flex-direction: column; gap: 6px; padding: 6px; border-radius: 20px; }
  .bx-sok label { flex: none; padding: 10px 14px; }
  .bx-sok label + label { flex: none; border-top: 1px solid rgba(242, 239, 234, 0.10); border-radius: 0; }
  .bx-sok button { flex: none; min-height: 56px; }
  .bx-scen { height: 380px; margin-top: 16px; }
  .bx-scen__telefon { width: 220px; height: 420px; padding: 7px 7px 0; border-radius: 38px 38px 0 0; box-shadow: none; }
  .bx-scen__telefon img { border-radius: 31px 31px 0 0; }
  .bx-scen .bx-idkort { --k: 0.5625; left: 0; bottom: 16px; border-radius: 10px; }  /* ca 180 px, nere till vänster */
  .bx-del { padding: 96px 0 0; }
  .bx-del--tat { padding-top: 64px; }
  .bx-del__rubrik, .bx-del > .bx-h2 { text-align: left; margin: 0 0 20px; padding: 0 12px; }
  .bx-del__rad { padding: 0 12px 16px; }
  .bx-del__rad .bx-h2 { font-size: 32px; }
  .bx-del__rad .bx-lank { display: none; }
  .bx-pastaende { font-size: 30px; line-height: 1.12; padding: 0 12px; }
  .bx-tider { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .bx-tid { flex: 0 0 210px; scroll-snap-align: start; gap: 16px; padding: 22px; border-radius: 22px; }
  .bx-tid__klocka { font-size: 36px; }
  .bx-grid { gap: 8px; }
  .bx-ruta, .bx-ruta--hog { min-height: 0; border-radius: 28px; padding: 28px 22px; gap: 22px; justify-content: flex-start; }
  .bx-ruta--rad { flex-direction: column; align-items: stretch; }
  .bx-notis { width: 100%; padding: 16px; border-radius: 20px; box-shadow: none; }
  .bx-ruta .bx-idkort { width: calc(100% - 12px); margin: 8px 6px; }
  .bx-citat { gap: 8px; }
  .bx-citat figure { grid-template-columns: 1fr; border-radius: 28px; padding: 10px 10px 22px; gap: 18px; }
  .bx-citat img { aspect-ratio: 1; object-position: 50% 30%; border-radius: 20px; }
  .bx-citat figcaption { padding: 0 12px; gap: 14px; }
  .bx-citat blockquote { font-size: 19px; }
  .bx-steg-panel { border-radius: 28px; padding: 32px 0 28px; gap: 24px; }
  .bx-steg-panel .bx-del__rad { padding: 0 22px; }
  .bx-steg-panel .bx-del__rad .bx-knapp { display: none; }
  .bx-steg-panel .bx-h2 { font-size: 40px; }
  .bx-steg { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 22px 4px; }
  .bx-steg li { flex: 0 0 230px; scroll-snap-align: start; gap: 16px; }
  .bx-steg__bild { border-radius: 20px; padding-top: 22px; height: 320px; }
  .bx-steg__telefon { width: 180px; padding: 6px; border-radius: 30px; }
  .bx-steg__telefon img { border-radius: 24px; }
  .bx-steg__text b { font-size: 20px; }
  .bx-steg__text span span { display: none; }
  .bx-kategorier { grid-template-columns: 1fr; gap: 8px; }
  .bx-kategori { min-height: 84px; padding: 0 16px 0 22px; border-radius: 22px; }
  .bx-kategori__namn { font-size: 28px; letter-spacing: -0.02em; }
  .bx-kategori__not { font-size: 14px; }
  .bx-delning { border-radius: 28px; padding: 32px 22px; gap: 20px; }
  .bx-delning .bx-h2 { font-size: 38px; }
  .bx-delning__telefon { display: none; }
  .bx-delning .bx-knapp, .bx-avslut .bx-knapp { width: 100%; min-height: 56px; }
  .bx-band { border-radius: 28px; padding: 44px 0; }
  .bx-band__spar > span { font-size: 64px; }
  .bx-band__spar { animation-duration: 30s; }
  .bx-ladda { border-radius: 28px; padding: 44px 22px; gap: 24px; }
  .bx-ladda .bx-h2 { font-size: 40px; line-height: 1; }
  .bx-fot { padding: 48px 14px 120px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .bx-fot > .bx-fot__kol:first-child, .bx-fot__kontakt { grid-column: 1 / -1; }
  .bx-fot__kol { gap: 0; }
  .bx-fot__kol > b { padding-bottom: 6px; }
  .bx-fot__kol a { min-height: 44px; display: flex; align-items: center; }
  .bx-fot__kol:first-child { gap: 6px; }
  .bx-mobil-cta { display: block; position: sticky; bottom: 8px; z-index: 9; padding: 0 4px; }
  .bx-mobil-cta .bx-marken { --mh: 56px; gap: 8px; flex-wrap: nowrap; }
  .bx-mobil-cta .bx-marken a { box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45); }
  .bx-ladda .bx-marken { --mh: 56px; }
  .bx-plats { min-height: 0; gap: 20px; padding: 22px; border-radius: 24px; }
  .bx-plats__namn { font-size: 28px; letter-spacing: -0.02em; line-height: 1.25; }
  .bx-plats__init { width: 46px; height: 46px; font-size: 15px; }
  .bx-plats__nar b { font-size: 17px; }
  .bx-plats__knapp { min-height: 44px; padding: 0 16px; }
  .bx-tider.bx-platser { display: flex; flex-direction: column; overflow: visible; gap: 8px; }
  .bx-mobil-cta > a { display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: var(--bx-r-piller); background: var(--bx-mork); color: var(--bx-ljus); font-weight: 600; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45); }

  /* /foretag */
  .bx-hjalte--delad .bx-hjalte__inre { display: flex; padding-bottom: 0; gap: 22px; }
  .bx-hjalte--delad .bx-h1 { font-size: 52px; line-height: 0.95; }
  .bx-hjalte__vanster { gap: 22px; }
  .bx-ingress { font-size: 18px; }
  .bx-claim .bx-sok label { flex: none; }
  .bx-claim .f-ask-loading { right: 20px; top: 34px; }
  .bx-scen--foretag { min-height: 0; height: 360px; margin-top: 8px; align-items: flex-start; }
  .bx-scen--foretag .bx-telefon { width: 230px; height: 400px; aspect-ratio: auto; padding: 7px 7px 0; border-radius: 38px 38px 0 0; border-bottom: 0; box-shadow: none; }
  .bx-scen--foretag .bx-telefon img { height: auto; border-radius: 31px 31px 0 0; }
  .bx-scen--foretag .bx-lapp:not(.bx-lapp--pris) { display: none; }
  .bx-lapp--pris { right: 0; bottom: auto !important; top: 40px !important; padding: 12px 16px !important; border-radius: 16px; line-height: 1.2; }
  .bx-lapp--pris b { font-size: 26px; }
  .bx-lapp--pris span { font-size: 13px; }
  .bx-del--tight { padding-top: 8px; }
  .bx-villkor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bx-villkor > div { border-radius: 22px; padding: 20px; min-height: 120px; gap: 8px; }
  .bx-villkor b { font-size: 34px; }
  .bx-villkor span { font-size: 14px; line-height: 1.35; }
  .bx-ruta--funktion { padding-bottom: 0; }
  .bx-skarmklipp div { width: 220px; height: 340px; padding: 7px 7px 0; border-radius: 36px 36px 0 0; }
  .bx-ingar { padding: 26px 22px; gap: 0; }
  .bx-ingar .bx-overrad { padding-bottom: 10px; }
  .bx-tabell div { flex-direction: column; gap: 0; line-height: 1.4; }
  .bx-tabell dd { text-align: left; }
  .bx-tvadelad { gap: 20px; }
  .bx-tvadelad__vanster { padding: 0 12px; }
  .bx-tvadelad__vanster .bx-knapp { display: none; }
  .bx-stegrader { gap: 8px; }
  .bx-stegrader li { gap: 16px; padding: 22px 20px; border-radius: 22px; }
  .bx-stegrader__nr { width: 40px; height: 40px; }
  .bx-stegrader b { font-size: 20px; }
  .bx-stegrader span span { font-size: 15px; }
  .bx-pris__huvud { text-align: left; align-items: flex-start; padding: 0 12px 12px; gap: 12px; }
  .bx-pris { gap: 8px; }
  .bx-pris > div { border-radius: 28px; padding: 26px 22px; gap: 16px; }
  .bx-pris > .bx-panel--mork { order: -1; }
  .bx-pris__belopp { font-size: 48px; }
  .bx-pris > div:not(.bx-panel--mork) .bx-pris__belopp { display: none; }
  .bx-pris__rader div { padding: 11px 0; font-size: 15px; }
  .bx-pris__fyll { width: 80px; height: 14px; }
  .bx-pris__satser { font-size: 14px; gap: 2px; }
  .bx-fragor { border-radius: 28px; padding: 28px 22px 12px; gap: 12px; }
  .bx-fragor__lista { border-top: 0; }
  .bx-fragor details { border-bottom: 0; border-top: 1px solid var(--bx-linje); }
  .bx-fragor summary { min-height: 70px; padding: 8px 0; gap: 14px; font-size: 18px; line-height: 1.25; }
  .bx-plus { width: 36px; height: 36px; }
  .bx-fragor p { margin-bottom: 20px; font-size: 16px; }
  .bx-avslut { border-radius: 28px; padding: 40px 22px; gap: 20px; }
  .bx-avslut .bx-h2 { font-size: 40px; line-height: 1; }
}