/* ============================================================
   BIX — Hemsida + /foretag. Marketing-styles ovanpå tokengrunden.
   TOKENS BOR I shared/theme.css — länkas FÖRE denna fil i varje sida.
   Inga :root-paletter här.
   ============================================================ */
/* legacy-block borttagen 2026-07-02 — tokens flyttade till theme.css */

/* ============================================================
   SEMANTIC ELEMENT BASE
   ============================================================ */
html {
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  letter-spacing: var(--body-track);
  line-height: var(--body-lh);
  margin: 0;
}

/* Display / hero typography ------------------------------- */
.bix-display, h1.bix {
  font-family: var(--font-sans);
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: var(--display-lh);
  color: var(--text-primary);
  margin: 0;
}
.bix-title, h2.bix {
  font-family: var(--font-sans);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-track);
  line-height: var(--title-lh);
  color: var(--text-primary);
  margin: 0;
}
.bix-heading, h3.bix {
  font-family: var(--font-sans);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-track);
  line-height: var(--heading-lh);
  color: var(--text-primary);
  margin: 0;
}
.bix-body, p.bix {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  letter-spacing: var(--body-track);
  line-height: var(--body-lh);
  color: var(--text-primary);
  margin: 0;
}
.bix-caption {
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  font-weight: var(--caption-weight);
  letter-spacing: var(--caption-track);
  line-height: var(--caption-lh);
  color: var(--text-secondary);
}
.bix-micro {
  font-family: var(--font-sans);
  font-size: var(--micro-size);
  font-weight: var(--micro-weight);
  letter-spacing: var(--micro-track);
  line-height: var(--micro-lh);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Wordmark — kurerad typografi. Får inte fejkas. */
.bix-wordmark {
  font-family: var(--font-sans);
  font-weight: var(--wordmark-weight);
  letter-spacing: var(--wordmark-tracking);
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
}

/* Tagline — enda italic-användningen i hela Bix-universum */
.bix-tagline {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0;
}
.bix-tagline em {
  font-style: italic;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Tabular nums för priser/tider/datum — alltid */
.bix-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Serif italic — endast för rotation-fraser i sök-hero */
.bix-rotation {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--text-primary);
}

/* ===== Marketing homepage styles (from the Claude Design handoff) ===== */
/* ============================================================
   BIX — Hemsida. Editorial marketing-system på designsystemets
   tokens. Varm mörker, Inter Tight, sage heligt försvarad.
   Aesop × Linear × Stripe. Handgjort, inte mall.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(123,175,150,0.22); color: var(--text-primary); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* film-grain — 2.8% fast textur */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
#ink { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* ── layout primitives ─────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 56px; }
.section { position: relative; z-index: 2; }
.rule { border: none; border-top: 1px solid var(--border); }
.rule-wrap { max-width: 1180px; margin: 0 auto; }

/* eyebrow — liten label med hårlinje + sage punkt */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-secondary);
}
.eyebrow::before {
  content: ''; width: 22px; height: 1px; background: var(--text-secondary); opacity: 0.7;
}
.eyebrow.sage { color: var(--sage); }
.eyebrow.sage::before { background: var(--sage); opacity: 0.6; }

/* scroll reveal — blur-up rise */
.reveal { opacity: 0; transform: translateY(34px); filter: blur(4px);
  transition: opacity 0.9s var(--press-spring), transform 0.9s var(--press-spring), filter 0.9s var(--press-spring); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
[data-d="1"] { transition-delay: 0.08s; }
[data-d="2"] { transition-delay: 0.16s; }
[data-d="3"] { transition-delay: 0.26s; }
[data-d="4"] { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: 68px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px;
  transition: background 0.4s var(--press-spring), border-color 0.4s, backdrop-filter 0.4s;
  background: rgba(21,19,17,0.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(46,42,38,0.22);
}
.nav.solid {
  background: rgba(21,19,17,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-color: rgba(46,42,38,0.55);
}
.nav-logo { font-size: 23px; font-weight: 700; letter-spacing: -0.04em; color: var(--text-primary); }
.nav-logo .dot { color: var(--text-primary); }
.nav-right { display: flex; align-items: center; gap: 34px; }
.nav-link { font-size: 13px; font-weight: 500; color: var(--text-tertiary); transition: color 0.2s; }
.nav-link:hover { color: var(--text-primary); }
.nav-btn {
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--accent-text);
  background: var(--accent); padding: 9px 20px; border-radius: var(--radius-full);
  transition: opacity 0.2s, transform 0.2s var(--press-spring);
}
.nav-btn:hover { opacity: 0.88; transform: scale(0.97) translate(var(--mx, 0px), var(--my, 0px)); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
.nav-toggle span { width: 22px; height: 1.5px; background: var(--text-primary); transition: transform 0.3s var(--press-spring), opacity 0.3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }
.nav-menu { position: fixed; inset: 0; z-index: 490; background: rgba(16,14,12,0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--press-spring), visibility 0.4s; }
.nav-menu.open { opacity: 1; visibility: visible; }
.nav-menu a { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--text-primary); padding: 13px 0; }
.nav-menu .nav-btn { font-size: 17px; margin-top: 16px; padding: 16px 34px; color: var(--accent-text); }

/* ════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════ */
.hero { position: relative; z-index: 2; height: 100svh; min-height: 720px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; background-image: url('/assets/web-hero.jpg');
  background-size: cover; background-position: center 4%;
  transform: scale(1.08); transition: transform 18s var(--press-spring); will-change: transform;
}
.hero-bg.loaded { transform: scale(1); }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(102deg, rgba(21,19,17,0.84) 0%, rgba(21,19,17,0.30) 50%, rgba(21,19,17,0.08) 100%),
    linear-gradient(to bottom, rgba(21,19,17,0.10) 0%, rgba(21,19,17,0.30) 46%, rgba(21,19,17,0.86) 84%, var(--bg) 100%);
}
.hero-grad-edge { position: absolute; inset: 0; background: radial-gradient(130% 120% at 40% 46%, rgba(21,19,17,0) 56%, rgba(9,8,6,0.6) 100%); }

/* brand-lockup: den LÅSTA BIX.-lockupen (Form A), nere i vänstra hörnet.
   Chrome-kalibrerad CSS ur BIX-LOCKUP-SPEC.md (faktorer 0,10213/-0,045/0,1504/1,5475). */
.hero-brand { position: absolute; left: 56px; bottom: 50px; z-index: 4; }
.lk { display: inline-block; width: calc(var(--s) * 1.5475); text-align: left; }
.lk .lk-m { display: block; line-height: 1; white-space: nowrap; font-weight: 700; color: var(--text-primary); font-size: var(--s); margin-left: calc(var(--s) * -0.045); }
.lk .lk-l2 { letter-spacing: -0.04em; }
.lk .lk-dot { display: inline-block; width: .087em; height: .087em; border-radius: 50%; background: currentColor; margin-left: .0298em; }
.lk .lk-t { display: block; line-height: 1; white-space: nowrap; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; font-size: calc(var(--s) * 0.10213); letter-spacing: .22em; margin-top: calc(var(--s) * 0.025 - var(--s) * 0.1504); }
.lk .lk-tdot { display: inline-block; width: .087em; height: .087em; border-radius: 50%; background: currentColor; }

.hero-content { position: absolute; left: 56px; right: 56px; bottom: 120px; z-index: 4; }
.hero h1 {
  font-size: clamp(46px, 12.5vw, 154px); font-weight: 800; letter-spacing: -0.058em;
  line-height: 0.86; color: var(--text-primary);
}
.hero h1 .accent {
  display: inline-flex; align-items: flex-end; gap: 0.18em;
}
.hero h1 em { font-style: italic; font-weight: 300; color: rgba(240,237,232,0.56); }
/* den levande punkten — andas i ivory efter att Samlingen landat */
.hero h1 .punkt { font-style: normal; color: var(--text-primary); display: inline-block; }
.hero h1 .punkt.breathe { animation: punktBreathe 5s var(--curve-ambient) infinite; }
@keyframes punktBreathe {
  0%, 100% { text-shadow: 0 0 0 rgba(240,237,232,0); }
  50% { text-shadow: 0 0 22px rgba(240,237,232,0.32); }
}
@media (prefers-reduced-motion: reduce) { .hero h1 .punkt.breathe { animation: none; } }

.hero-sub {
  margin-top: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.hero-desc { font-size: 19px; line-height: 1.62; color: var(--text-secondary); max-width: 440px; letter-spacing: -0.01em; }
.hero-ctas { display: flex; flex-direction: column; gap: 11px; align-items: flex-end; }
.hero-cta-row { display: flex; align-items: center; gap: 13px; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent-text);
  background: var(--accent); padding: 14px 26px; border-radius: var(--radius-lg); cursor: pointer; border: none;
  transition: opacity 0.18s, transform 0.2s var(--press-spring);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-2px) translate(var(--mx, 0px), var(--my, 0px)); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-secondary);
  background: transparent; padding: 14px 26px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.2s var(--press-spring);
}
.btn-secondary:hover { color: var(--text-primary); border-color: var(--text-tertiary); transform: translateY(-2px); }

/* inline företags-sök (ersätter Företag-knappen i heron) */
.biz-search { position: relative; display: inline-flex; align-items: center; }
.biz-search-input {
  width: 210px; height: 46px; padding: 0 48px 0 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text-primary); font-family: inherit; font-size: 14px; letter-spacing: -0.01em;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.biz-search-input::placeholder { color: var(--text-tertiary); }
.biz-search-input:focus { outline: none; border-color: var(--text-tertiary); box-shadow: 0 0 0 3px var(--accent-brand-subtle); }
.biz-search-go {
  position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-text); border: none; cursor: pointer;
  transition: opacity 0.18s, transform 0.2s var(--press-spring);
}
.biz-search-go:hover { opacity: 0.9; transform: translateX(1px); }
.biz-search-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 330px; max-width: 80vw; z-index: 40;
  background: rgba(26,23,21,0.97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 28px 64px rgba(0,0,0,0.55); text-align: left;
}
.biz-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.18s; }
.biz-result:last-child { border-bottom: none; }
.biz-result:hover { background: rgba(240,237,232,0.05); }
.biz-result-name { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.biz-result-name strong { font-weight: 700; }
.biz-result-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.biz-result-go { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); flex-shrink: 0; }
.biz-result-new { background: rgba(240,237,232,0.02); }
.biz-result-new .biz-result-name { color: var(--text-secondary); }
.biz-result-new .biz-result-name strong { color: var(--text-primary); }
/* större variant i botten-CTA:n (finale) */
.biz-search-lg { display: flex; width: 100%; max-width: 420px; }
.biz-search-lg .biz-search-input { width: 100%; height: 54px; font-size: 16px; padding: 0 56px 0 20px; }
.biz-search-lg .biz-search-go { right: 7px; top: 7px; width: 40px; height: 40px; }
.biz-search-lg .biz-search-panel { left: 0; right: auto; width: 100%; max-width: 420px; }

.hero-scroll { position: absolute; right: 56px; bottom: 40px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-scroll .tick { width: 1px; height: 30px; background: linear-gradient(to bottom, transparent, var(--text-tertiary)); }
.hero-scroll .t { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-tertiary); writing-mode: vertical-rl; }

/* hero entrance — statiskt .in slut-state (överlever capture/print) */
.hero-brand, .h-l1, .h-l2, .h-l3, .hero-desc, .hero-ctas, .hero-scroll {
  opacity: 0; transform: translateY(24px); filter: blur(4px);
  transition: opacity 0.8s var(--press-spring), transform 0.8s var(--press-spring), filter 0.8s var(--press-spring);
}
.h-l1, .h-l2, .h-l3 { display: inline-block; }
.hero-brand { transition-delay: 0.1s; }
.h-l1 { transition-delay: 0.22s; }
.h-l2 { transition-delay: 0.34s; }
.h-l3 { transition-delay: 0.5s; }
.hero-desc { transition-delay: 0.66s; }
.hero-ctas { transition-delay: 0.78s; }
.hero-scroll { transition-delay: 0.95s; }
.hero.in .hero-brand, .hero.in .h-l1, .hero.in .h-l2, .hero.in .h-l3,
.hero.in .hero-desc, .hero.in .hero-ctas, .hero.in .hero-scroll {
  opacity: 1; transform: none; filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .hero-brand, .h-l1, .h-l2, .h-l3, .hero-desc, .hero-ctas, .hero-scroll { transition: none; opacity: 1; transform: none; filter: none; }
  .hero-bg { transition: none; transform: none; }
}

/* Hero: höger-justerad på desktop så fotots ansikten (vänster) hålls fria från rubriken */
@media (min-width: 821px) {
  .hero-content { text-align: right; right: 44px; }
  .hero-sub { flex-direction: column; align-items: flex-end; gap: 18px; }
  .hero-desc { text-align: right; margin-left: auto; }
  .hero-ctas { align-items: flex-end; }
  .hero-scroll { display: none; }
}

.problem-head .eyebrow { margin-bottom: 18px; }

/* ════════════════════════════════════════════════════════
   PROBLEM
   ════════════════════════════════════════════════════════ */
.problem { padding-top: 148px; padding-bottom: 128px; }
.problem-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 80px; align-items: end; margin-bottom: 88px; }
.problem-head h2 {
  font-size: clamp(34px, 5.5vw, 64px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--text-primary);
}
.problem-head h2 em { font-style: italic; font-weight: 300; color: var(--text-secondary); }
.problem-head .lead { font-size: 17px; line-height: 1.7; color: var(--text-secondary); letter-spacing: -0.01em; align-self: end; }
.problem-head .lead strong { color: var(--text-primary); font-weight: 500; }
/* problem-banners — långsmala bransch-banners (foto + problemtext) */
.problem-banners { display: flex; flex-direction: column; gap: 8px; }
.pbanner { position: relative; height: 164px; border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 820px) { .pbanner { height: 136px; } }
.pbanner img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  filter: saturate(0.96) brightness(0.92); transform: scale(1.03);
  transition: filter 0.6s;
}
.pbanner:hover img { filter: saturate(1) brightness(1); }
.pbanner-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,12,10,0.95) 0%, rgba(16,14,12,0.72) 40%, rgba(21,19,17,0.28) 74%, rgba(21,19,17,0.06) 100%); }
.pbanner-row { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 34px; }
.pbanner-n { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: #A09B92; font-variant-numeric: tabular-nums; }
.pbanner-name { font-size: clamp(24px, 3.6vw, 34px); font-weight: 600; letter-spacing: -0.03em; color: #F0EDE8; line-height: 1; margin-top: 4px; }
.pbanner-problem { font-size: 15px; color: #C9C4BB; letter-spacing: -0.01em; margin-top: 6px; }

/* ════════════════════════════════════════════════════════
   USP PRIVAT — editorial numbered
   ════════════════════════════════════════════════════════ */
.usps { padding-top: 156px; padding-bottom: 156px; }
.usps-head { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; align-items: end; margin-bottom: 92px; }
.usps-head h2 { font-size: clamp(40px, 7vw, 88px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.96; color: var(--text-primary); margin-top: 22px; }
.usps-head h2 em { font-style: italic; font-weight: 300; color: var(--text-secondary); }
.usps-head p { font-size: 16px; line-height: 1.7; color: var(--text-secondary); letter-spacing: -0.01em; align-self: end; }
.usp-list { border-top: 1px solid var(--border); }
.usp-row { display: grid; grid-template-columns: 84px 1.1fr 1.3fr; gap: 0 24px; padding: 56px 0; border-bottom: 1px solid var(--border); transition: background 0.25s; align-items: baseline; }
.usp-row:hover { background: var(--row-hover); }
.usp-row .num { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.usp-row .name { font-size: clamp(22px, 2.8vw, 32px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.12; color: var(--text-primary); padding-right: 40px; }
.usp-row .desc { font-size: 15px; line-height: 1.7; color: var(--text-secondary); letter-spacing: -0.005em; }

/* ════════════════════════════════════════════════════════
   FÖRETAG
   ════════════════════════════════════════════════════════ */
.biz-band { position: relative; height: 460px; overflow: hidden; display: flex; align-items: center; }
.biz-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.biz-band .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(21,19,17,0.7) 38%, rgba(21,19,17,0.25) 100%); }
.biz-band .scrim2 { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg), transparent 22%, transparent 78%, var(--bg)); }
.biz-band-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 56px; width: 100%; }
.biz-band-inner h2 { font-size: clamp(38px, 6vw, 76px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; color: var(--text-primary); }
.biz-band-inner h2 em { font-style: italic; font-weight: 300; color: var(--text-secondary); }

.biz { padding-top: 140px; padding-bottom: 148px; }
/* Helskärmsläget — produktvisning (triptyk) */
.biz-show { text-align: center; margin-bottom: 128px; }
.biz-show .eyebrow { margin-bottom: 22px; }
.biz-show h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--text-primary); }
.biz-show h2 em { font-style: italic; font-weight: 300; color: var(--text-secondary); }
.biz-show p { font-size: 18px; line-height: 1.65; color: var(--text-secondary); letter-spacing: -0.01em; max-width: 520px; margin: 24px auto 0; }
.biz-screens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 56px auto 0; text-align: left; }
.biz-screen .shot { padding: 7px; border: 1px solid #323231; border-radius: 38px; overflow: hidden; background: linear-gradient(155deg, #1d1d1b, #060605); box-shadow: 0 32px 66px rgba(0,0,0,0.55), inset 0 1px 0 rgba(240,237,232,0.05); transition: transform 0.35s var(--press-spring), border-color 0.35s; }
.biz-screen:hover .shot { transform: translateY(-6px); border-color: #4c4c49; }
.biz-screen .shot img { display: block; width: 100%; height: auto; border-radius: 31px; }
.biz-screen figcaption { margin-top: 20px; padding-right: 6px; }
.biz-screen .n { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; margin-bottom: 9px; }
.biz-screen .t { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); }
.biz-screen .d { display: block; font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin-top: 6px; letter-spacing: -0.005em; }
.pricing {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 56px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 64px 0; margin-bottom: 120px;
}
.pricing-pct { font-size: clamp(64px, 10vw, 116px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.9; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pricing-mid { border-left: 1px solid var(--border); padding-left: 56px; }
.pricing-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 14px; }
.pricing-line { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-secondary); letter-spacing: -0.01em; padding: 4px 0; }
.pricing-line strong { color: var(--text-primary); font-weight: 600; min-width: 46px; font-variant-numeric: tabular-nums; }
.pricing-line .d { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.pricing-promise { text-align: right; }
.pricing-tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage); background: var(--sage-subtle); border: 1px solid rgba(123,175,150,0.22); border-radius: var(--radius-full); padding: 7px 15px; margin-bottom: 14px;
}
.pricing-tag .d { width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }
.pricing-promise p { font-size: 14px; color: var(--text-tertiary); line-height: 1.6; letter-spacing: -0.01em; max-width: 230px; margin-left: auto; }

.biz-usps { border-top: 1px solid var(--border); margin-bottom: 110px; }
.biz-usp { display: grid; grid-template-columns: 84px 1fr; gap: 0 24px; padding: 52px 0; border-bottom: 1px solid var(--border); transition: background 0.25s; }
.biz-usp:hover { background: var(--row-hover); }
.biz-usp .num { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.biz-usp .title { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; letter-spacing: -0.035em; color: var(--text-primary); margin-bottom: 12px; }
.biz-usp .desc { font-size: 15px; line-height: 1.7; color: var(--text-secondary); letter-spacing: -0.005em; max-width: 620px; }

/* guide */
.guide { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.guide-h { padding: 30px 40px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.guide-h .t { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); }
.guide-h .s { font-size: 13px; color: var(--text-tertiary); letter-spacing: -0.005em; }
.guide-step { display: grid; grid-template-columns: 84px 1fr; border-bottom: 1px solid var(--border); transition: background 0.2s; }
.guide-step:last-child { border-bottom: none; }
.guide-step:hover { background: var(--row-hover); }
.guide-step .gn { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); }
.guide-step .circle { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.guide-step .gb { padding: 26px 32px; }
.guide-step .gt { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 5px; }
.guide-step .gd { font-size: 14px; line-height: 1.6; color: var(--text-secondary); letter-spacing: -0.005em; }

/* ════════════════════════════════════════════════════════
   FINALE
   ════════════════════════════════════════════════════════ */
.finale { padding-top: 156px; padding-bottom: 160px; }
.finale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.finale-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 56px 52px; display: flex; flex-direction: column; transition: border-color 0.25s; }
.finale-card:hover { border-color: var(--text-tertiary); }
.finale-card.elevated { background: var(--surface-elevated); }
.finale-card .tag { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 22px; }
.finale-card h3 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.06; color: var(--text-primary); margin-bottom: 18px; }
.finale-card p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); letter-spacing: -0.005em; margin-bottom: 36px; }
.finale-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; flex: 1; }
.finale-item { display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: var(--text-secondary); line-height: 1.5; letter-spacing: -0.005em; }
.finale-item .d { width: 4px; height: 4px; border-radius: 50%; background: var(--text-tertiary); flex-shrink: 0; transform: translateY(-2px); }
.finale-card .btn-primary { width: 100%; justify-content: center; height: 54px; font-size: 16px; }
.finale-card .biz-search-lg { max-width: none; }
/* andas i ivory, samma idiom som hero-punkten — signalerar att detta är slutmålet */
.finale-cta { animation: ctaBreathe 4.5s var(--curve-ambient) infinite; }
@keyframes ctaBreathe {
  0%, 100% { box-shadow: var(--shadow-glow-accent); }
  50% { box-shadow: 0 0 30px rgba(240,237,232,0.28); }
}
.finale-cta:hover { animation-play-state: paused; }
.finale-card .finale-cta-note { font-size: 12.5px; color: var(--text-tertiary); text-align: center; letter-spacing: -0.005em; margin-top: 14px; margin-bottom: 0; }
.finale-card .finale-search-cta { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .finale-cta { animation: none; } }

/* ════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
footer { position: relative; z-index: 2; border-top: 1px solid var(--border); padding: 40px 0; }
.footer-in { max-width: 1180px; margin: 0 auto; padding: 0 56px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-logo { font-size: 18px; font-weight: 700; letter-spacing: -0.04em; color: var(--text-primary); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.footer-links a { font-size: 13px; color: var(--text-tertiary); transition: color 0.2s; }
.footer-links a:hover { color: var(--text-secondary); }
.footer-copy { font-size: 13px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════
   CONSUMER-SKÄRMAR — statiskt rutnät (ingen scroll-animation)
   ════════════════════════════════════════════════════════ */
.cshow-head { text-align: center; margin-bottom: 8px; }
.cshow-head .eyebrow { justify-content: center; margin-bottom: 22px; }
.cshow-head h2 { font-size: clamp(36px, 5.5vw, 64px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.0; color: var(--text-primary); }
.cshow-head h2 em { font-style: italic; font-weight: 300; color: var(--text-secondary); }
.cshow-head p { font-size: 18px; line-height: 1.6; color: var(--text-secondary); letter-spacing: -0.01em; max-width: 540px; margin: 22px auto 0; }
/* CONSUMER-GALLERI — coverflow (en skärm i mitten, två blurrade på sidorna) */
.gallery { margin-top: 8px; }
.gallery-stage { position: relative; height: clamp(446px, calc(50vw - 21px), 590px); margin-top: 52px; overflow: hidden; }
.gslide { position: absolute; top: 50%; left: 50%; width: clamp(214px, 23vw, 280px); margin: 0; transform: translate(-50%, -50%); transition: transform 0.6s cubic-bezier(0.4, 0, 0.1, 1), opacity 0.6s ease, filter 0.6s ease; will-change: transform, opacity, filter; cursor: pointer; }
.gslide.is-active { cursor: default; }
.gslide .shot { padding: 8px; border: 1px solid #323231; border-radius: 42px; background: linear-gradient(155deg, #1d1d1b, #060605); box-shadow: 0 36px 74px rgba(0,0,0,0.62), inset 0 1px 0 rgba(240,237,232,0.05); }
.gslide .shot img { display: block; width: 100%; height: auto; border-radius: 34px; }
.gallery-caption { text-align: center; margin-top: 14px; min-height: 140px; }
.gallery-caption .g-count, .gallery-caption .g-title, .gallery-caption .g-desc { transition: opacity 0.25s ease; }
.gallery-caption.swap .g-count, .gallery-caption.swap .g-title, .gallery-caption.swap .g-desc { opacity: 0; }
.g-count { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.g-count .g-now { color: var(--text-primary); }
.g-title { font-size: clamp(22px, 3vw, 28px); font-weight: 600; letter-spacing: -0.025em; color: var(--text-primary); margin-top: 14px; }
.g-desc { font-size: 16px; line-height: 1.5; color: var(--text-secondary); letter-spacing: -0.01em; max-width: 460px; margin: 10px auto 0; }
.gallery-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 20px; }
.g-arrow { width: 50px; height: 50px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s var(--press-spring); }
.g-arrow:hover { color: var(--text-primary); border-color: var(--text-tertiary); background: var(--surface-elevated); }
.g-arrow:active { transform: scale(0.94); }
.g-arrow:disabled { opacity: 0.32; cursor: default; }
.g-arrow:disabled:hover { color: var(--text-secondary); border-color: var(--border); background: var(--surface); }
.g-dots { display: flex; align-items: center; gap: 10px; }
.g-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 999px; background: var(--border); cursor: pointer; transition: background 0.3s, transform 0.3s var(--press-spring); }
.g-dot.on { background: var(--text-primary); transform: scale(1.4); }
@media (prefers-reduced-motion: reduce) { .gslide { transition: none; } }
@media (max-width: 560px) {
  .gallery-stage { height: clamp(390px, calc(121.7vw - 21px), 502px); }
  .gslide { width: clamp(188px, 56vw, 240px); }
  .gallery-caption { min-height: 172px; }
}

/* ════════════════════════════════════════════════════════
   JÄMFÖRELSE — Bix vs typisk abonnemangsmodell
   ════════════════════════════════════════════════════════ */
.compare { margin: 4px 0 120px; }
.compare-head { text-align: center; margin-bottom: 60px; }
.compare-head .eyebrow { justify-content: center; margin-bottom: 20px; }
.compare-head h2 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--text-primary); }
.compare-head h2 em { font-style: italic; font-weight: 300; color: var(--text-secondary); }
.compare-head p { font-size: 16px; color: var(--text-secondary); margin-top: 16px; letter-spacing: -0.01em; }
.compare-table { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; max-width: 960px; margin: 0 auto; }
.compare-row { display: grid; grid-template-columns: 1.05fr 1fr 1.15fr; border-bottom: 1px solid var(--border); }
.compare-row:last-child { border-bottom: none; }
.compare-row > div { padding: 20px 26px; font-size: 16px; letter-spacing: -0.01em; display: flex; align-items: center; }
.compare-row .crit { color: var(--text-tertiary); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.compare-row .old { color: var(--text-secondary); border-left: 1px solid var(--border); }
.compare-row .bixv { color: var(--text-primary); font-weight: 500; border-left: 1px solid var(--border); background: var(--cell-emphasis); }
.compare-row.chead .old { font-weight: 500; }
.compare-row.chead .bixv { font-weight: 700; letter-spacing: -0.03em; font-size: 20px; gap: 9px; }
.compare-row.chead .sage-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 10px rgba(123,175,150,0.5); }
.compare-group { max-width: 960px; margin: 0 auto; }
.compare-group + .compare-group { margin-top: 36px; }
.compare-grouplabel { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 16px 4px; }
.compare-foot { text-align: center; font-size: 13px; color: var(--text-tertiary); margin: 22px auto 0; max-width: 720px; line-height: 1.5; letter-spacing: -0.005em; }
@media (max-width: 640px) {
  .compare-row { grid-template-columns: 1fr 1fr; }
  .compare-row .crit { grid-column: 1 / -1; padding: 18px 22px 2px; }
  .compare-row .old { border-left: none; padding: 6px 22px 18px; align-items: flex-start; }
  .compare-row .bixv { padding: 6px 22px 18px; align-items: flex-start; }
  .compare-row.chead .crit { display: none; }
}

/* ════════════════════════════════════════════════════════
   FINALE-MANIFEST
   ════════════════════════════════════════════════════════ */
.finale-manifest { text-align: center; max-width: 820px; margin: 0 auto 92px; }
.finale-manifest .eyebrow { justify-content: center; margin-bottom: 22px; }
.finale-manifest h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.04; color: var(--text-primary); }
.finale-manifest h2 em { font-style: italic; font-weight: 300; color: var(--text-secondary); }
.finale-manifest p { font-size: 18px; line-height: 1.6; color: var(--text-secondary); letter-spacing: -0.01em; max-width: 600px; margin: 22px auto 0; }

/* ════════════════════════════════════════════════════════
   STATS — verkligheten för företagare (problemet)
   ════════════════════════════════════════════════════════ */
.stats { padding: 148px 0; }
.stats-head { max-width: 760px; margin-bottom: 76px; }
.stats-head .eyebrow { margin-bottom: 20px; }
.stats-head h2 { font-size: clamp(34px, 5.5vw, 64px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--text-primary); }
.stats-head h2 em { font-style: italic; font-weight: 300; color: var(--text-secondary); }
.stats-head p { font-size: 18px; line-height: 1.6; color: var(--text-secondary); margin-top: 20px; letter-spacing: -0.01em; max-width: 560px; }
.stats-list { border-top: 1px solid var(--border); }
.stat-row { display: grid; grid-template-columns: minmax(240px, 0.82fr) 1.18fr; gap: 16px 48px; align-items: center; padding: 46px 4px; border-bottom: 1px solid var(--border); transition: background 0.25s; }
.stat-row:hover { background: var(--row-hover); }
.stat-n { font-size: clamp(46px, 7.5vw, 88px); font-weight: 700; letter-spacing: -0.045em; line-height: 0.92; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat-n.lg { font-size: clamp(28px, 3.8vw, 50px); white-space: nowrap; }
.stat-n span { font-size: 0.46em; font-weight: 600; margin-left: 0.14em; color: var(--text-secondary); letter-spacing: -0.02em; }
.stat-b { font-size: clamp(18px, 2.1vw, 23px); line-height: 1.42; color: var(--text-secondary); letter-spacing: -0.01em; }
.stat-b .src { display: block; font-size: 13px; color: var(--text-tertiary); margin-top: 13px; letter-spacing: 0.04em; }
.stats-bridge { font-size: clamp(22px, 3vw, 32px); font-weight: 500; letter-spacing: -0.025em; color: var(--text-primary); margin-top: 50px; }

@media (max-width: 760px) {
  .stat-row { grid-template-columns: 1fr; gap: 8px; padding: 30px 4px; }
  .stat-n { font-size: clamp(40px, 13vw, 60px); }
  .stat-n.lg { font-size: clamp(30px, 9vw, 46px); }
}

/* ════════════════════════════════════════════════════════
   TILLGÄNGLIGHET + PRESTANDA
   ════════════════════════════════════════════════════════ */
/* :focus-visible-ringen kommer nu från theme.css (textPrimary, laddas av alla sidor) —
   den gamla lokala sage-varianten här var appens enda 6:e sage-plats utöver DEL 2.4:s
   5 sanktionerade (fokusringar finns inte i den listan), borttagen för konsekvens. */
.skip { position: fixed; top: -120px; left: 16px; z-index: 600; background: var(--text-primary); color: var(--accent-text); padding: 13px 22px; border-radius: 12px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; transition: top 0.25s var(--press-spring); }
.skip:focus { top: 16px; }
/* reservera höjd för lata bilder — undvik layouthopp (CLS) */
.biz-screen .shot img { aspect-ratio: 1320 / 2868; }
/* editorial typografi — balansera rubriker, undvik ensamt ord på sista raden */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .wrap, .biz-band-inner, .footer-in { padding-left: 40px; padding-right: 40px; }
  .nav { padding: 0 40px; }
  .biz-screens { grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
}
@media (max-width: 820px) {
  .nav { padding: 0 24px; height: 60px; }
  .nav-right { display: none; }
  .nav-toggle { display: flex; }
  .wrap, .biz-band-inner, .footer-in { padding-left: 24px; padding-right: 24px; }
  .hero-brand { display: none; } /* mobil: nav-BIX. räcker, dubbel lockup crowdar hörnet */
  .hero-content { left: 24px; right: 24px; bottom: 92px; }
  .hero-sub { flex-direction: column; align-items: flex-start; }
  .hero-ctas { align-items: flex-start; }
  .hero-cta-row { flex-wrap: wrap; row-gap: 10px; }
  .btn-primary { white-space: nowrap; }
  .hero-scroll { display: none; }
  /* mobil: kortare hero-band så 5:4-fotot inte croppas till en remsa; 18% x-position
     håller både barberarens och pojkens huvuden hela i kanten (inte avskurna).
     min-height-golv: iOS Safari svh = lilla viewporten (med adressfält), så 66svh
     blir för kort på riktiga telefoner och rubriken krockar med eyebrow:en. */
  .hero { min-height: 560px; height: 66svh; }
  .hero-bg { background-position: 18% 14%; }
  .hero-content { bottom: 60px; }
  /* desktopens diagonala skrim (mörk vänster/ljus höger) förutsätter att texten
     står till höger om ansiktena. På mobil ligger texten över hela bredden och
     rakt över pappans/pojkens ansikten i det kortare 66svh-beskurna fotot, så
     mobilen får en egen lodrät skrim som mörknar tidigare uppifrån. */
  .hero-scrim {
    background: linear-gradient(180deg, rgba(21,19,17,0.68) 0%, rgba(21,19,17,0.74) 18%, rgba(21,19,17,0.88) 42%, rgba(21,19,17,0.95) 65%, var(--bg) 100%);
  }
  .problem-head, .usps-head { grid-template-columns: 1fr; gap: 28px; }
  .problem, .usps, .biz, .finale { padding-top: 88px; padding-bottom: 88px; }
  .usp-row { grid-template-columns: 52px 1fr; }
  .usp-row .desc { grid-column: 2; margin-top: 12px; }
  .pricing { grid-template-columns: 1fr; gap: 32px; }
  .pricing-mid { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 28px; }
  .pricing-promise { text-align: left; } .pricing-promise p { margin-left: 0; }
  .finale-grid { grid-template-columns: 1fr; }
  /* 52px sidopadding lämnade bara ~220px åt sökfältet, texten klipptes mot pilknappen */
  .finale-card { padding: 40px 28px; }
  .biz-search-lg .biz-search-input { font-size: 15px; padding: 0 50px 0 16px; }
  .biz-band { height: 360px; }
  .biz-show { margin-bottom: 64px; }
  .biz-screens { margin-top: 40px; gap: 30px; }
}
@media (max-width: 560px) {
  .biz-screens { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
  .biz-usp, .guide-step { grid-template-columns: 56px 1fr; }
}

/* ════════════════════════════════════════════════════════
   TRE-KANVAS — nya tillägg 2026-07-02
   ════════════════════════════════════════════════════════ */
/* hero: sekundär företagsväg bredvid primär-CTA:n */
/* Sekundär CTA = ghost-pill (par till ivory-primären). Tydligt klickbar business-väg
   utan andra stark färg — ivory-toner, ram + pil-affordance. Stannar sekundär. */
.hero-biz-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radius-full);
  border: 1px solid rgba(240, 237, 232, 0.20); background: rgba(240, 237, 232, 0.045);
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--text-secondary); transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.hero-biz-link strong { color: var(--text-primary); font-weight: 600; }
.hero-biz-link::after { content: "→"; font-weight: 600; color: var(--text-secondary); transition: transform 0.2s, color 0.2s; }
.hero-biz-link:hover { border-color: rgba(240, 237, 232, 0.34); background: rgba(240, 237, 232, 0.08); transform: translateY(-1px); }
.hero-biz-link:hover::after { transform: translateX(3px); color: var(--text-primary); }

/* ivory-mittbandet — kanvasbyte med lugna sömmar */
.canvas-ivory { position: relative; z-index: 2; }
.canvas-ivory .g-arrow:hover { background: var(--surface-elevated); }
.canvas-ivory .gslide .shot,
.canvas-ivory .biz-screen .shot { box-shadow: 0 28px 60px rgba(23, 19, 14, 0.28), inset 0 1px 0 rgba(240, 237, 232, 0.05); }

/* finale: textväg vidare till /foretag — starkare (secondary + vikt 600) + pil, stannar sekundär */
.finale-more {
  display: block; margin-top: 16px; text-align: center;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--text-secondary); transition: color 0.2s;
}
.finale-more::after { content: " →"; transition: color 0.2s; }
.finale-more:hover { color: var(--text-primary); }

/* ════════════════════════════════════════════════════════
   FÖRETAGS-HERO — /foretag
   ════════════════════════════════════════════════════════ */
.biz-hero { position: relative; overflow: hidden; min-height: 640px; padding: 176px 0 88px; display: flex; align-items: flex-end; }
.biz-hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.biz-hero .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,19,17,0.92) 0%, rgba(21,19,17,0.55) 55%, rgba(21,19,17,0.18) 100%); }
.biz-hero .scrim2 { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(21,19,17,0.55) 0%, rgba(21,19,17,0.15) 30%, rgba(21,19,17,0.62) 74%, var(--bg) 100%); }
.biz-hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 56px; width: 100%; }
.biz-hero .eyebrow { margin-bottom: 22px; }
.biz-hero h1 { font-size: clamp(42px, 7vw, 92px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.96; color: var(--text-primary); }
.biz-hero h1 em { font-style: italic; font-weight: 300; color: var(--text-secondary); }
.biz-hero .sub { font-size: 18px; line-height: 1.65; color: var(--text-secondary); max-width: 520px; margin-top: 24px; letter-spacing: -0.01em; }
.biz-hero .hero-search { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.biz-hero .hero-search .note { font-size: 12.5px; color: var(--text-tertiary); letter-spacing: -0.005em; }
@media (max-width: 820px) {
  .biz-hero { min-height: 540px; padding: 132px 0 56px; }
  .biz-hero-inner { padding: 0 24px; }
}

/* finale med ett ensamt kort (/foretag) */
.finale-grid.single { grid-template-columns: minmax(0, 620px); justify-content: center; }

/* ════════════════════════════════════════════════════════
   RÖRELSE-PASS 2026-07-02 — BixCurve, alltid reduced-motion-gated
   ════════════════════════════════════════════════════════ */
/* pbanner-parallax: fotot driver långsamt uppåt medan raden passerar */
.pbanner img { transform: scale(1.06) translateY(var(--par, 0px)); }
/* per-foto crop: bandet ska träffa bildens berättelse, inte en godtycklig remsa */
.problem-banners .pbanner:nth-child(1) img { object-position: center 50%; }  /* saxen och händerna */
.problem-banners .pbanner:nth-child(2) img { object-position: center 57%; }  /* händerna på ryggen */
.problem-banners .pbanner:nth-child(3) img { object-position: center 48%; }  /* silhuetten över motorn */
.problem-banners .pbanner:nth-child(4) img { object-position: center 48%; }  /* glaset och handen */

/* hero-kort — en bokning materialiseras i rummet (produkt-artefakt) */
.hero-card {
  position: absolute; left: 56px; bottom: 208px; z-index: 4;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 236px; padding: 18px 22px 16px;
  background: rgba(26, 23, 21, 0.72);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(240, 237, 232, 0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(240, 237, 232, 0.06);
}
.hero-card .hc-when { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.hero-card .hc-what { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); }
.hero-card .hc-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--sage); }
.hero-card .hc-state .d { width: 5px; height: 5px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 8px rgba(123, 175, 150, 0.5); }
/* entré: materialize efter texten, sedan stilla svävning (ambient) */
.hero-card { opacity: 0; transform: translateY(26px) scale(0.97); filter: blur(4px);
  transition: opacity 0.9s var(--curve-materialize) 1.35s, transform 0.9s var(--curve-materialize) 1.35s, filter 0.9s var(--curve-materialize) 1.35s; }
.hero.in .hero-card { opacity: 1; transform: none; filter: blur(0); }
.hero.in .hero-card.settled { animation: heroCardFloat 7s var(--curve-ambient) 2.6s infinite; }
@keyframes heroCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (max-width: 820px) { .hero-card { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-card { transition: none; opacity: 1; transform: none; filter: none; }
  .hero.in .hero-card.settled { animation: none; }
  .pbanner img { transform: scale(1.03); }
}

/* /foretag: 1-2-3 mikro-steg under hero-sökfältet */
.hero-search .steps { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.hero-search .steps .st { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-tertiary); letter-spacing: -0.005em; }
.hero-search .steps .st b { font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hero-search .steps .sep { width: 14px; height: 1px; background: var(--border); }
@media (max-width: 560px) { .hero-search .steps { flex-wrap: wrap; gap: 8px 12px; } .hero-search .steps .sep { display: none; } }

/* ════════════════════════════════════════════════════════
   ALLT SOM INGÅR — hairline-grid (/foretag)
   ════════════════════════════════════════════════════════ */
.included { margin-bottom: 110px; }
.included-head { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; align-items: end; margin-bottom: 56px; }
.included-head h2 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--text-primary); margin-top: 20px; }
.included-head h2 em { font-style: italic; font-weight: 300; color: var(--text-secondary); }
.included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 1px solid var(--border); }
.included-item { display: flex; align-items: baseline; gap: 14px; padding: 22px 4px; border-bottom: 1px solid var(--border); font-size: 15.5px; line-height: 1.55; color: var(--text-secondary); letter-spacing: -0.005em; }
.included-item .d { width: 4px; height: 4px; border-radius: 50%; background: var(--text-tertiary); flex-shrink: 0; transform: translateY(-3px); }
@media (max-width: 820px) {
  .included { margin-bottom: 72px; }
  .included-head { grid-template-columns: 1fr; margin-bottom: 36px; }
  .included-grid { grid-template-columns: 1fr; }
}

/* tyst breddrad under problembannrarna */
.problem-more { font-size: 13.5px; color: var(--text-tertiary); letter-spacing: -0.005em; line-height: 1.6; margin-top: 18px; padding-left: 4px; }