@import url("fonts.css");

:root {
  --paper: #eef0f1;
  --sheet: #fafbfb;
  --line: #cdd2d6;
  --text: #16191c;
  --muted: #5b636b;
  --green: #1c3a2a;
  --gold: #b8944a;
  --red: #b3261e;
  --dash: #8a939b;
  --max: 1240px;
  --desktop-margin: 48px;
  --mobile-margin: 20px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--text);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
}

body,
button,
input,
textarea {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
}

a {
  color: var(--green);
  text-decoration: none;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}

p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding-left: 1.2em;
}

li + li {
  margin-top: 0.35rem;
}

.site-header,
.site-footer,
main > section {
  padding-inline: var(--desktop-margin);
}

.wrap {
  width: min(100%, var(--max));
  margin-inline: auto;
}

.site-header {
  padding-block: 34px 28px;
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 34px;
  align-items: center;
  width: min(100%, var(--max));
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand img {
  width: 150px;
  height: auto;
  display: block;
}

.brand span {
  color: var(--muted);
  font-size: 0.95rem;
}

.nav {
  display: flex;
  justify-content: flex-end;
  gap: 26px;
}

.phone {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero {
  padding-block: 76px 120px;
}

.hero-grid,
.section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}

.hero-copy {
  grid-column: span 5;
  align-self: center;
}

.hero-sheet {
  grid-column: 6 / span 7;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

h1 {
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 700;
}

h2 {
  font-size: clamp(32px, 3vw, 40px);
  font-weight: 700;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.lead {
  margin-top: 28px;
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 34rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: center;
  margin-top: 36px;
}

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 4px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
}

.button:hover {
  text-decoration: none;
  background: #132c20;
}

.sheet {
  background: var(--sheet);
  border: 1px solid var(--line);
  padding: 26px;
}

.sheet-note,
.sheet-explain {
  color: var(--muted);
  font-size: 0.92rem;
}

.sheet-explain {
  margin-top: 18px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 13px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: 500;
  color: var(--muted);
}

td.amount,
th.amount,
td.account,
td.nr {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

td.amount,
th.amount {
  text-align: right;
  white-space: nowrap;
}

.status {
  width: 8.5rem;
  white-space: nowrap;
  font-size: 0.9rem;
}

.ok {
  color: var(--green);
}

.bad {
  color: var(--red);
}

tr.bad-row > * {
  border-left: 0;
}

tr.bad-row > :first-child {
  border-left: 5px solid var(--red);
  padding-left: 10px;
}

tr.correction > :first-child {
  border-left: 4px solid var(--red);
}

.section {
  border-top: 1px solid var(--line);
  padding-block: 120px;
}

.section-title {
  grid-column: span 4;
}

.section-body {
  grid-column: 6 / span 7;
}

.section-body p + p,
.section-body p + ul,
.section-body p + ol,
.section-body ul + p {
  margin-top: 20px;
}

.ledger-list {
  padding: 0;
  list-style: none;
}

.ledger-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: baseline;
}

.ledger-list li::after {
  content: "";
  border-bottom: 1px dotted var(--dash);
  transform: translateY(-0.25em);
}

.ledger-list span {
  grid-column: 3;
  color: var(--green);
  font-family: "IBM Plex Mono", monospace;
}

.steps {
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 20px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.35rem;
  color: var(--green);
}

.dashed {
  border-top: 1px solid var(--line);
  padding-block: 120px;
}

.dashed-box {
  border: 1px dashed var(--dash);
  padding: 32px;
}

.faq-list {
  border-top: 1px solid var(--line);
}

details {
  border-bottom: 1px solid var(--line);
}

summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 22px 0;
  font-weight: 700;
}

summary::after {
  content: "+";
  font-family: "IBM Plex Mono", monospace;
}

details[open] summary::after {
  content: "-";
}

details p {
  padding: 0 0 24px;
  color: var(--muted);
}

.contact-text {
  margin-bottom: 28px;
}

.contact-card {
  display: grid;
  gap: 8px;
}

.contact-name {
  font-weight: 700;
}

.contact-phone {
  font-family: "IBM Plex Mono", monospace;
  font-size: 40px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 34px;
  color: var(--muted);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, var(--max));
  margin-inline: auto;
}

@media (max-width: 900px) {
  html {
    font-size: 17px;
  }

  .site-header,
  .site-footer,
  main > section {
    padding-inline: var(--mobile-margin);
  }

  .header-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .brand {
    flex-wrap: wrap;
  }

  .brand img {
    width: 132px;
  }

  .nav {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 14px 20px;
  }

  .hero {
    padding-block: 48px 72px;
  }

  .hero-grid,
  .section-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-copy,
  .hero-sheet,
  .section-title,
  .section-body {
    grid-column: auto;
  }

  .section,
  .dashed {
    padding-block: 72px;
  }

  .sheet {
    padding: 20px;
  }

  .comparison thead {
    display: none;
  }

  .comparison tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    padding-block: 14px;
    border-bottom: 1px solid var(--line);
  }

  .comparison td {
    border-bottom: 0;
    padding: 3px 0;
  }

  .comparison td:first-child,
  .comparison .status {
    grid-column: 1 / -1;
  }

  .comparison td:first-child {
    font-weight: 700;
  }

  .comparison td.amount {
    text-align: left;
    white-space: normal;
  }

  .comparison td.amount::before {
    display: block;
    color: var(--muted);
    font-family: "Schibsted Grotesk", system-ui, sans-serif;
    font-size: 0.82rem;
  }

  .comparison td:nth-child(2)::before {
    content: "Gamla systemet";
  }

  .comparison td:nth-child(3)::before {
    content: "Veiqo";
  }

  .comparison tr.bad-row > :first-child {
    border-left: 5px solid var(--red);
    padding-left: 10px;
  }

  .responsibility,
  .correction-table {
    font-size: 0.9rem;
  }

  .responsibility th,
  .responsibility td,
  .correction-table th,
  .correction-table td {
    padding: 10px 6px;
  }

  .contact-phone {
    font-size: clamp(30px, 9vw, 40px);
  }

  .footer-inner {
    display: grid;
  }
}

/* ── Claude-granskning 2026-09-16 ─────────────────────────────── */
.hero { padding-block: 64px 88px; }
.section, .dashed { padding-block: 84px; }
th.amount { font-family: "Schibsted Grotesk", system-ui, sans-serif; }
.ledger-list li { grid-template-columns: auto 1fr auto; padding-block: 6px; }
.ledger-list li:not(:has(span))::after { content: none; }
.ledger-list li:not(:has(span))::before { content: "✓"; color: var(--green); margin-right: 12px; font-weight: 700; }
.ledger-list li:not(:has(span)) { display: flex; }
.ledger-list span { font-family: "Schibsted Grotesk", system-ui, sans-serif; color: var(--muted); }
.section-body > p + .ledger-list { margin-top: 20px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 72px; }
.pair h2 { margin-bottom: 22px; }
.dashed-box h2 { margin-bottom: 18px; }
.dashed-box ul { margin-top: 16px; }
.correction-table, .responsibility { table-layout: fixed; }
.correction-table td, .responsibility td, .responsibility th { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .pair { grid-template-columns: 1fr; }
  .section, .dashed { padding-block: 60px; }
  .correction-table th:first-child, .correction-table td:first-child { width: 3rem; }
  .ledger-list li { grid-template-columns: 1fr; }
  .ledger-list li::after { content: none; }
  .ledger-list span { grid-column: 1; font-size: .9rem; }
}
.correction-table td.account { font-family: "Schibsted Grotesk", system-ui, sans-serif; }
.correction-table td, .correction-table th { overflow-wrap: normal; }
.correction-table th:nth-child(1), .correction-table td:nth-child(1) { width: 3.6rem; }
.correction-table th:nth-child(4), .correction-table td:nth-child(4) { width: 7.5rem; }
@media (max-width: 900px) {
  .correction-table { font-size: .85rem; }
  .correction-table th:nth-child(1), .correction-table td:nth-child(1) { width: 2.6rem; }
  .correction-table th:nth-child(4), .correction-table td:nth-child(4) { width: 5.2rem; }
  .correction-table td { hyphens: auto; }
}

/* ── Grok + Claude, finputs 2026-09-16 ─────────────────────────── */
.hero { min-height: calc(100dvh - 108px); padding-block: 32px 40px; display: grid; align-items: center; }
h1 { font-size: clamp(44px, 4.4vw, 72px); line-height: .96; }
h2 { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; }
.lead { font-size: 18px; color: #3a4148; margin-top: 20px; }
.sheet { background: #fff; padding: 28px 32px 24px; border: 1px solid #b6bdc3; border-top: 3px solid var(--green); }
.sheet-note { font-size: 13px; }
th { font-size: 13px; }
td.amount { font-size: 17px; font-weight: 500; }
th.amount:nth-child(3) { color: #8a6a2c; font-weight: 700; }
tr.bad-row > * { background: #f6ebe9; }
tr.bad-row td.amount:nth-child(3) { color: var(--red); }
.button { min-height: 56px; padding: 0 28px; border-radius: 2px; font-size: 18px; }
.actions > a:not(.button) { display: inline-flex; align-items: center; min-height: 56px; padding: 0 20px; border: 1px solid var(--green); border-radius: 2px; color: var(--green); font-weight: 500; }
.actions > a:not(.button):hover { background: #e3e8e5; text-decoration: none; }
.section, .dashed { padding-block: 72px; }
.section:has(.pair) { background: #e4e8ea; padding-block: 88px; border-top: 0; }
.dashed-box { background: #e7ece9; border: 1px solid var(--green); padding: 40px 48px; }
#kontakt.section { background: var(--green); color: #eef0f1; border-top: 0; padding-block: 88px; }
#kontakt h2, #kontakt .contact-name { color: #fafbfb; }
#kontakt .contact-phone { color: #fafbfb; font-size: 52px; }
#kontakt a { color: #e0c07a; }
#kontakt .contact-text { color: #d6dfda; }
#kontakt a:focus-visible { outline-color: #e0c07a; }
.site-footer { border-top: 0; }
@media (max-width: 900px) {
  .header-inner { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .nav { grid-column: 1 / -1; grid-row: 2; }
  .phone { grid-column: 2; grid-row: 1; align-self: center; }
  .hero { min-height: 0; padding-block: 24px 40px; }
  .actions .button, .actions > a:not(.button) { width: 100%; justify-content: center; }
  .comparison tr { padding-block: 8px; }
  .comparison td.amount { white-space: nowrap; font-size: 15px; }
  .dashed-box { padding: 28px 22px; }
  #kontakt .contact-phone { font-size: clamp(30px, 9vw, 44px); }
}
h1 { line-height: 1.04; }
th.status { font-size: 13px; }
.comparison td.amount:nth-child(3), .comparison th.amount:nth-child(3) { padding-left: 28px; }
.ledger-list li { align-items: center; }
.ledger-list li:has(span)::after { content: ""; height: 0; border-bottom: 1px dotted #6d757c; transform: none; align-self: center; }
.responsibility td, .responsibility th { overflow-wrap: normal; hyphens: auto; }
.section:has(.pair) { background: #e2e7e9; border-block: 1px solid var(--line); }
.comparison td.status, .comparison th.status { padding-left: 20px; }

/* ── AI-heron 2026-09-16 ───────────────────────────────────────── */
.hero-sheet:not(.sheet) { align-self: center; }
.ai-card { padding: 30px 34px 28px; }
.ai-kvitto { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: baseline; padding: 16px 0 18px; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 500; margin-top: 8px; }
.ai-kvitto .amount { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.ai-kvitto span:nth-child(2) { color: var(--muted); font-size: 16px; font-weight: 400; }
.ai-forslag { margin: 0; }
.ai-forslag > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ai-forslag dt { color: var(--muted); font-size: 15px; }
.ai-forslag dd { margin: 0; font-size: 20px; font-weight: 500; }
.ai-forslag .kontonr { font-family: "IBM Plex Mono", monospace; color: var(--muted); font-size: 16px; margin-left: 8px; }
.ai-darfor dd { font-size: 17px; font-weight: 400; color: #3a4148; }
.ai-knappar { display: flex; gap: 12px; margin-top: 22px; }
.ai-knapp { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border: 1px solid var(--green); border-radius: 2px; color: var(--green); font-weight: 600; }
.ai-knapp-ja { background: var(--green); color: #fff; }
.ai-idag { background: #fff; border-top: 1px solid var(--line); }
.ai-idag .ledger-list li { font-size: 20px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.flytt-bevis h2 { font-size: clamp(32px, 3vw, 44px); }
@media (max-width: 900px) {
  .ai-kvitto { grid-template-columns: 1fr auto; font-size: 17px; }
  .ai-kvitto span:nth-child(2) { grid-row: 2; }
  .ai-forslag > div { grid-template-columns: 1fr; gap: 2px; }
  .ai-forslag dd { font-size: 18px; }
  .ai-idag .ledger-list li { font-size: 17px; }
}
.hero .hero-copy { grid-column: span 6; }
.hero .hero-sheet { grid-column: 7 / span 6; }
.hero h1 { font-size: clamp(44px, 4vw, 68px); }

/* ── veiqo.se:s palett (Daniel 2026-09-16) (cream/forest/gold) ─────────────────── */
:root { --paper: #F2EDE4; --sheet: #FBF9F5; --line: #DDD7CA; --text: #1A1915; --muted: #6A665A; --dash: #B8AE9C; }
html { background: #F2EDE4; }
.sheet { background: #FBF9F5; border-color: #D6CFC0; border-top-color: #1C3A2A; }
.ai-idag { background: #FBF9F5; }
.section:has(.pair) { background: #EAE4D9; }
.dashed-box { background: #EAE4D9; }
tr.bad-row > * { background: #F3E3DC; }
.lead, .ai-darfor dd { color: #3D3A32; }
.ai-kvitto .amount, th.amount:nth-child(3) { color: #1A1915; }
th.amount:nth-child(3) { color: #8C6E33; }
.brand span { color: #8C6E33; }


/* ── Levande: föremål, mörkt band, bockar (Daniel: «vår blir stel») ── */
.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; }
.ai-idag { background: #1C3A2A !important; color: #F2EDE4; border-top: 0; }
.ai-idag h2 { color: #F2EDE4; }
.ai-idag .ledger-list li { border-bottom-color: rgba(242,237,228,.18); color: #F2EDE4; }
.ai-idag .ledger-list li:not(:has(span))::before { color: #D4AA60; }
.comparison.bocka tbody tr td.status { opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .35s ease; }
.comparison.bocka.syns tbody tr td.status { opacity: 1; transform: none; }
.comparison.bocka.syns tbody tr:nth-child(1) td.status { transition-delay: 0.25s; }
.comparison.bocka.syns tbody tr:nth-child(2) td.status { transition-delay: 0.50s; }
.comparison.bocka.syns tbody tr:nth-child(3) td.status { transition-delay: 0.75s; }
.comparison.bocka.syns tbody tr:nth-child(4) td.status { transition-delay: 1.00s; }
.comparison.bocka.syns tbody tr:nth-child(5) td.status { transition-delay: 1.25s; }
.comparison.bocka.syns tbody tr:nth-child(6) td.status { transition-delay: 1.50s; }
.comparison.bocka.syns tbody tr:nth-child(7) td.status { transition-delay: 1.75s; }

@media (max-width: 900px) {
}
@media (prefers-reduced-motion: reduce) {
  .comparison.bocka tbody tr td.status { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .hero .hero-copy, .hero .hero-sheet, .flytt-bevis .hero-copy, .flytt-bevis .hero-sheet { grid-column: auto; }
}

/* ── Hero: Veiqo läser kvittot (2026-09-16 kväll, ersätter föremålsbilderna) ── */
.hero-sheet.las { position: relative; display: grid; grid-template-columns: 214px 1fr; align-items: start; padding-block: 12px 28px; }
.kvitto {
  grid-column: 1 / 3; grid-row: 1; width: 222px; margin-top: 40px; position: relative; z-index: 1;
  background: #FFFEFA; color: #2A2823; padding: 22px 20px 34px;
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums;
  transform: rotate(-3deg); transform-origin: top left;
  box-shadow: 0 1px 0 #E4DDCF, 0 18px 40px -18px rgba(26,25,21,.35);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
}
.kvitto p { margin: 0; }
.kv-rad { display: flex; justify-content: space-between; gap: 10px; padding: 1px 6px; margin-inline: -6px; border-radius: 2px; transition: background-color .35s ease, box-shadow .35s ease; }
.kv-rad span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv-namn { justify-content: center; font-weight: 500; font-size: 17px; letter-spacing: .18em; margin-bottom: 4px; }
.kv-liten { color: #77726A; font-size: 11.5px; }
.kv-summa { font-weight: 500; font-size: 14px; }
.kv-streck { border-top: 1px dashed #B9B1A2; margin: 9px 0 !important; }
.kv-rad.lyser { background: rgba(184,148,74,.26); box-shadow: inset 3px 0 0 #B8944A; }

.hero-sheet.las .ai-card { grid-column: 2; grid-row: 1; position: relative; z-index: 2; margin-left: 26px; padding: 26px 28px 24px; box-shadow: 0 24px 50px -30px rgba(26,25,21,.35); }
.las .ai-kvitto { grid-template-columns: 1fr auto; gap: 2px 16px; margin-top: 0; padding: 0 0 16px; font-size: 19px; }
.las .ai-kvitto span:nth-child(2) { grid-row: 2; font-size: 15px; }
.las .ai-kvitto .amount { grid-row: 1 / 3; align-self: center; font-size: 19px; }
.las .ai-forslag > div { grid-template-columns: 1fr; gap: 3px; padding: 13px 0; }
.las .ai-forslag dt { font-size: 14px; }
.las .ai-forslag dd { font-size: 19px; }
.las .ai-darfor dd { font-size: 16px; line-height: 1.45; }
.las .ai-knappar { margin-top: 20px; }
.las .ai-knapp { min-height: 46px; transition: opacity .3s ease, transform .15s ease, filter .15s ease; }
.las .ai-knapp-ja { display: inline-grid; }
.las .ai-knapp-ja > span { grid-area: 1 / 1; transition: opacity .3s ease; }
.las .knapp-efter { opacity: 0; }

/* rörelsen — bara med JS och utan reduced motion; utan JS syns slutbilden */
.js .las.spelar .kvitto { animation: kvitto-in .6s cubic-bezier(.2,.8,.2,1) both; }
.js .las.spelar .ai-card [data-steg] { opacity: .0; }
.js .las.spelar .ai-card [data-steg].syns { opacity: 1; transition: opacity .3s ease; }
.js .las.spelar .ai-card [data-steg] dd { clip-path: inset(0 100% 0 0); }
.js .las.spelar .ai-card [data-steg].syns dd { clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.3,.7,.2,1) .1s; }
.js .las.spelar .ai-card [data-steg].syns { box-shadow: inset 3px 0 0 transparent; }
.js .las.spelar .ai-knappar { opacity: 0; }
.js .las.spelar.knappar .ai-knappar { opacity: 1; transition: opacity .35s ease; }
.js .las.trycker .ai-knapp-ja { transform: scale(.96); filter: brightness(.8); }
.js .las.bokfort .knapp-fore { opacity: 0; }
.js .las.bokfort .knapp-efter { opacity: 1; }
.js .las.bokfort .ai-knapp-andra { opacity: 0; }
@keyframes kvitto-in { from { opacity: 0; transform: translateY(14px) rotate(-5deg); } to { opacity: 1; transform: rotate(-3deg); } }

@media (max-width: 900px) {
  .hero-sheet.las { grid-template-columns: 1fr; padding-top: 8px; }
  .kvitto { grid-column: 1; width: min(280px, 82%); margin: 0 0 0 4px; }
  .hero-sheet.las .ai-card { grid-column: 1; grid-row: 2; margin: -28px 0 0 10%; }
}
.las .ai-knapp { white-space: nowrap; }
.js .las.bokfort .ai-knapp-andra { display: none; }
.kv-rad { gap: 8px; }
.kvitto { font-size: 12px; padding-inline: 18px; }

/* ── Sidfot: kontakt + bolag i ett block (2026-09-16 kväll) ── */
.brand img { width: 128px; }
.fot { background: #1C3A2A; color: #F2EDE4; padding: 96px var(--desktop-margin) 40px; }
.fot-inner { width: min(100%, var(--max)); margin-inline: auto; }
.fot-topp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; padding-bottom: 72px; }
.fot-text { grid-column: 1 / span 6; }
.fot-text h2 { color: #F2EDE4; font-size: clamp(36px, 3.4vw, 52px); line-height: 1.02; }
.fot-text p { margin: 20px 0 0; max-width: 30rem; color: #CFD6CF; font-size: 18px; line-height: 1.55; }
.fot-kontakt { grid-column: 8 / span 5; align-self: end; display: grid; gap: 6px; justify-items: start; }
.fot-namn { margin: 0 0 4px; color: #CFD6CF; font-size: 16px; }
.fot a { color: #F2EDE4; }
.fot a:hover { text-decoration: none; color: #E0C07A; }
.fot a:focus-visible { outline: 2px solid #E0C07A; outline-offset: 4px; }
.fot-tel { font-size: clamp(30px, 2.6vw, 40px); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.fot-mejl { font-size: 18px; text-decoration: underline; text-decoration-color: rgba(242,237,228,.35); text-underline-offset: .25em; }
.fot-botten { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding-top: 28px; border-top: 1px solid rgba(242,237,228,.16); }
.fot-logga img { display: block; width: 104px; height: auto; }
.fot-nav { display: flex; gap: 28px; justify-content: center; }
.fot-nav a { font-size: 15px; color: #CFD6CF; }
.fot-bolag { margin: 0; color: #A9B4AC; font-size: 14px; }
@media (max-width: 900px) {
  .fot { padding: 64px var(--mobile-margin) 32px; }
  .fot-topp { grid-template-columns: 1fr; gap: 36px; padding-bottom: 48px; }
  .fot-text, .fot-kontakt { grid-column: 1; }
  .fot-botten { grid-template-columns: 1fr; gap: 18px; justify-items: start; }
  .fot-nav { justify-content: flex-start; }
}
#kontakt.fot a { color: #F2EDE4; }
#kontakt.fot .fot-nav a { color: #CFD6CF; }
#kontakt.fot .fot-tel { color: #E0C07A; }
#kontakt.fot a:hover { color: #E0C07A; }
.fot-logga img { width: 120px; }

/* ── Sidfot v2: kolumner + golv ── */
.fot { padding: 0; }
.fot > .fot-inner { width: min(calc(100% - 2 * var(--desktop-margin)), var(--max)); padding-top: 96px; }
.fot-topp { padding-bottom: 88px; }
.fot-golv { background: #152D20; padding: 64px var(--desktop-margin) 28px; }
.fot-kolumner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; padding-bottom: 56px; }
.fot-marke { grid-column: 1 / span 4; }
.fot-marke p { margin: 18px 0 0; max-width: 17rem; color: #A9B4AC; font-size: 15px; line-height: 1.5; }
.fot-logga img { width: 148px; }
.fot-kol { grid-column: span 2; }
.fot-kol:first-of-type { grid-column: 6 / span 3; }
.fot-kolumner > .fot-kol:nth-of-type(2) { grid-column: 9 / span 2; }
.fot-kolumner > .fot-kol:nth-of-type(3) { grid-column: 11 / span 2; }
.fot-kol h3 { margin: 0 0 16px; color: #F2EDE4; font-size: 15px; font-weight: 700; letter-spacing: 0; }
.fot-kol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fot-kol li { color: #A9B4AC; font-size: 15px; line-height: 1.4; }
#kontakt.fot .fot-kol a { color: #CFD6CF; }
#kontakt.fot .fot-kol a:hover { color: #E0C07A; }
.fot-rad { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(242,237,228,.12); color: #8A8C8E; font-size: 13px; }
@media (max-width: 900px) {
  .fot > .fot-inner { width: calc(100% - 2 * var(--mobile-margin)); padding-top: 64px; }
  .fot-topp { padding-bottom: 56px; }
  .fot-golv { padding: 48px var(--mobile-margin) 24px; }
  .fot-kolumner { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-bottom: 40px; }
  .fot-marke { grid-column: 1 / -1; }
  .fot-kol:first-of-type, .fot-kolumner > .fot-kol:nth-of-type(2), .fot-kolumner > .fot-kol:nth-of-type(3) { grid-column: auto; }
  .fot-rad { flex-direction: column; gap: 6px; }
}

/* ── Hero: kolumnpapper i bakgrunden (Daniel 2026-09-16) ── */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  --kant-v: max(20px, calc(50% - 620px - 30px));
  --kant-h: min(calc(100% - 20px), calc(50% + 620px + 30px));
  background:
    /* dubbel marginallinje vänster */
    linear-gradient(90deg, transparent calc(var(--kant-v) - 1px), rgba(28,58,42,.13) calc(var(--kant-v) - 1px) var(--kant-v), transparent var(--kant-v) calc(var(--kant-v) + 4px), rgba(28,58,42,.13) calc(var(--kant-v) + 4px) calc(var(--kant-v) + 5px), transparent calc(var(--kant-v) + 5px)),
    /* dubbel kolumnlinje höger */
    linear-gradient(90deg, transparent calc(var(--kant-h) - 5px), rgba(28,58,42,.13) calc(var(--kant-h) - 5px) calc(var(--kant-h) - 4px), transparent calc(var(--kant-h) - 4px) var(--kant-h), rgba(28,58,42,.13) var(--kant-h) calc(var(--kant-h) + 1px), transparent calc(var(--kant-h) + 1px)),
    /* raderna */
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(28,58,42,.07) 35px 36px);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
}
@media (max-width: 900px) {
  .hero::before { background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(28,58,42,.06) 31px 32px); }
}

/* ── Logga in (app.veiqo.se) ── */
.header-inner { grid-template-columns: auto 1fr auto auto; }
.logga-in { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--green); border-radius: 2px; color: var(--green); font-weight: 600; white-space: nowrap; }
.logga-in:hover { background: var(--green); color: #F2EDE4; text-decoration: none; }
.logga-in:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
@media (max-width: 900px) {
  .header-inner { grid-template-columns: 1fr auto auto; }
  .phone { grid-column: 2; grid-row: 1; }
  .logga-in { grid-column: 3; grid-row: 1; min-height: 38px; padding: 0 12px; font-size: 15px; }
  .nav { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 420px) { .phone { display: none; } }

/* ── Chrome: dyrare list, inte billig ram-knapp (2026-09-17) ── */
html { -webkit-font-smoothing: antialiased; }
.site-header {
  padding-block: 14px 14px;
  border-bottom: 1px solid rgba(28, 58, 42, 0.12);
  background: #F2EDE4;
}
.header-inner { gap: 28px 36px; }
.brand { gap: 0; }
.brand span { display: none; }
.brand img { width: 118px; }
.nav { gap: 28px; }
.nav a {
  color: #3D3A32;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nav a:hover { color: var(--green); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--green); }
.phone {
  color: #6A665A;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 400;
}
.phone:hover { color: var(--green); text-decoration: none; }
.logga-in {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: var(--green);
  color: #F2EDE4;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
}
.logga-in:hover { background: #152D20; color: #F2EDE4; text-decoration: none; }
.button {
  min-height: 52px;
  padding: 0 26px;
  border-radius: 0;
  letter-spacing: 0.04em;
  font-size: 16px;
  font-weight: 600;
}
.actions > a:not(.button) {
  border-radius: 0;
  letter-spacing: 0.02em;
  font-weight: 500;
}
@media (max-width: 900px) {
  .site-header { padding-block: 12px; }
  .brand img { width: 108px; }
  .logga-in { min-height: 36px; padding: 0 12px; letter-spacing: 0.04em; }
}

/* ── Sälj: bevisrad, räkning, flyttdörrar (2026-09-17 localhost) ── */
.hero h1 { line-height: 1.1; font-size: clamp(40px, 4.2vw, 64px); }
.bevis {
  background: #1C3A2A;
  color: #F2EDE4;
  padding-block: 28px;
  border-top: 0;
}
.bevis-rad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
}
.bevis-rad p {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: #CFD6CF;
  padding-top: 12px;
  border-top: 2px solid #B8944A;
}
.bevis-rad strong {
  display: block;
  color: #F2EDE4;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
.rakning .sheet { padding-top: 22px; }
.rakning-lista {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.rakning-lista li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}
.rakning-lista li span:last-child {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rakning-lista .rakning-summa {
  border-bottom: 0;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 2px solid var(--green);
  font-weight: 700;
}
.rakning-lista .rakning-summa span:last-child { color: var(--green); }

/* ── Grafit + papper. Guld bort (2026-09-17) ── */
:root {
  --paper: #F2EDE4;
  --sheet: #F7F4EE;
  --line: #D4CFC6;
  --text: #1A1C1E;
  --muted: #5C5E61;
  --green: #1A1C1E;
  --gold: #1A1C1E;
  --dash: #A8A69F;
}
html { background: #F2EDE4; color: #1A1C1E; }
.sheet { background: #F7F4EE; border-color: #D4CFC6; border-top-color: #1A1C1E; }
.ai-idag { background: #1A1C1E !important; color: #F2EDE4; }
.ai-idag h2, .ai-idag .ledger-list li { color: #F2EDE4; }
.ai-idag .ledger-list li { border-bottom-color: rgba(242, 237, 228, 0.16); }
.ai-idag .ledger-list li:not(:has(span))::before { color: #F2EDE4; }
.bevis { background: #1A1C1E; color: #F2EDE4; }
.bevis-rad p { border-top-color: rgba(242, 237, 228, 0.28); color: #C4C2BC; }
.bevis-rad strong { color: #F2EDE4; }
.fot { background: #1A1C1E; color: #F2EDE4; }
.fot-golv { background: #121314; }
.fot a:hover,
#kontakt.fot a:hover,
#kontakt.fot .fot-kol a:hover { color: #F2EDE4; }
#kontakt.fot .fot-tel { color: #F2EDE4; }
.fot a:focus-visible { outline-color: #F2EDE4; }
.kv-rad.lyser { background: rgba(26, 28, 30, 0.1); box-shadow: inset 3px 0 0 #1A1C1E; }
th.amount:nth-child(3) { color: #1A1C1E; }
.logga-in:hover { background: #121314; }
.site-header { background: #F2EDE4; border-bottom-color: rgba(26, 28, 30, 0.12); }
.nav a { color: #3A3D40; }
.phone { color: #5C5E61; }
.section:has(.pair) { background: #EBE7DF; }
.dashed-box { background: #EBE7DF; border-color: #1A1C1E; }
.hero::before {
  background:
    linear-gradient(90deg, transparent calc(var(--kant-v) - 1px), rgba(26,28,30,.1) calc(var(--kant-v) - 1px) var(--kant-v), transparent var(--kant-v) calc(var(--kant-v) + 4px), rgba(26,28,30,.1) calc(var(--kant-v) + 4px) calc(var(--kant-v) + 5px), transparent calc(var(--kant-v) + 5px)),
    linear-gradient(90deg, transparent calc(var(--kant-h) - 5px), rgba(26,28,30,.1) calc(var(--kant-h) - 5px) calc(var(--kant-h) - 4px), transparent calc(var(--kant-h) - 4px) var(--kant-h), rgba(26,28,30,.1) var(--kant-h) calc(var(--kant-h) + 1px), transparent calc(var(--kant-h) + 1px)),
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(26,28,30,.06) 35px 36px);
}
.dorrar-rubrik { margin-bottom: 28px; }
.dorrar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.dorrar > div {
  padding: 28px 32px 8px 0;
  border-right: 1px solid var(--line);
}
.dorrar > div:last-child { border-right: 0; padding-right: 0; }
.dorrar h3 { font-size: 22px; margin-bottom: 12px; }
.dorrar p { color: #3D3A32; font-size: 17px; max-width: 22rem; }
.dorrar-fot { margin-top: 28px; color: var(--muted); font-size: 16px; }
@media (max-width: 900px) {
  .bevis { padding-block: 22px; }
  .bevis-rad { grid-template-columns: 1fr; gap: 18px; }
  .dorrar { grid-template-columns: 1fr; }
  .dorrar > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 0; }
  .dorrar > div:last-child { border-bottom: 0; }
}

/* ── DualEntry-teal + Imagine-hero (2026-09-17) ── */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --teal: #0C4E56;
}
body.mork-topp .site-header {
  background: transparent;
  border-bottom-color: transparent;
  padding-block: 16px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 5;
}
body.mork-topp .nav a { color: rgba(255, 255, 255, 0.82); }
body.mork-topp .nav a:hover,
body.mork-topp .nav a[aria-current="page"] { color: #fff; }
body.mork-topp .phone { color: rgba(255, 255, 255, 0.55); }
body.mork-topp .phone:hover { color: #fff; }
body.mork-topp .logga-in {
  background: #fff;
  color: #0C4E56;
  border-radius: 8px;
  transition: background 180ms var(--ease-out), transform 140ms var(--ease-out);
}
body.mork-topp .logga-in:hover { background: #F4F8F8; color: #0C4E56; }
body.mork-topp .logga-in:active { transform: scale(0.97); }
.hero-produkt {
  display: block;
  position: relative;
  background: var(--teal);
  color: #fff;
  overflow: hidden;
  padding-block: 0;
  min-height: 100dvh;
}
.hero-produkt::before { display: none; }
.hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 0;
  pointer-events: none;
}
.hero-produkt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, #F4F8F8);
  z-index: 1;
  pointer-events: none;
}
.hero-produkt .hero-grid {
  position: relative;
  z-index: 2;
  align-items: center;
  min-height: 100dvh;
  padding-block: 96px 88px;
}
.hero-produkt .hero-copy {
  grid-column: 1 / span 5;
  padding: 0;
  animation: hero-in 720ms var(--ease-out) both;
}
.hero-produkt .hero-copy h1 {
  color: #fff;
  font-size: clamp(42px, 4.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.hero-produkt .lead {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  max-width: 28rem;
  margin-top: 22px;
  line-height: 1.5;
}
.hero-produkt .button {
  background: #fff;
  color: #0C4E56;
  border-radius: 8px;
  transition: background 180ms var(--ease-out), transform 140ms var(--ease-out);
}
.hero-produkt .button:hover { background: #F4F8F8; text-decoration: none; }
.hero-produkt .button:active { transform: scale(0.97); }
.hero-produkt .actions > a:not(.button) {
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  min-height: 52px;
  padding: 0;
  letter-spacing: 0.02em;
}
.hero-produkt .actions > a:not(.button):hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.28em;
}
.hero-produkt .hero-devices {
  grid-column: 6 / span 7;
  position: relative;
  width: 108%;
  min-height: 560px;
  align-self: end;
  margin-top: 4vh;
  margin-bottom: -28px;
  animation: hero-in 820ms var(--ease-out) 70ms both;
}
.hero-ljus {
  position: absolute;
  inset: -8% -18% 10% -8%;
  background: radial-gradient(ellipse 70% 60% at 58% 42%, rgba(242, 237, 228, 0.16), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.laptop {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0 84%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0 84%, transparent 100%);
}
.laptop-lid {
  background: #0E1012;
  border-radius: 16px 16px 10px 10px;
  padding: 11px 11px 9px;
  box-shadow:
    0 0 0 1px rgba(242, 237, 228, 0.1),
    0 50px 90px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(242, 237, 228, 0.06);
}
.laptop-kamera {
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: #2C2F32;
  box-shadow: inset 0 0 0 1.5px #1A1C1E;
}
.laptop-skarm {
  background: #F2EDE4;
  border-radius: 4px;
  overflow: hidden;
  min-height: 420px;
  height: 440px;
}
.laptop-bas {
  height: 18px;
  margin: 0 -14px;
  background: linear-gradient(180deg, #2A2D30, #0E1012);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}
.laptop-haka {
  display: block;
  width: 72px;
  height: 5px;
  margin: 0 auto;
  background: #0A0B0C;
  border-radius: 0 0 3px 3px;
}
.app {
  display: grid;
  grid-template-columns: 128px 1fr;
  height: 100%;
  font-size: 12px;
  line-height: 1.35;
}
.app-side {
  background: #1A1C1E;
  color: #8A8C8E;
  padding: 16px 14px;
}
.app-marke { color: #F2EDE4; font-weight: 700; font-size: 13px; margin: 0 0 22px; letter-spacing: -0.02em; }
.app-nav { margin: 0 0 11px; font-size: 12px; }
.app-nav.on { color: #F2EDE4; }
.app-nav span {
  display: inline-block;
  margin-left: 6px;
  background: #F2EDE4;
  color: #1A1C1E;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
}
.app-main { padding: 16px 18px 18px; color: #1A1C1E; background: #F2EDE4; }
.app-topp { margin: 0 0 14px; color: #6A665A; font-size: 11px; letter-spacing: 0.06em; }
.app-kort {
  background: #FFFEFA;
  border: 1px solid #E4DFD4;
  border-top: 2px solid #1A1C1E;
  padding: 16px 16px 14px;
}
.app-kort-in { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; }
.app-kvitto {
  background: #F7F4EE;
  border: 1px dashed #D4CFC6;
  padding: 10px 8px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  line-height: 1.5;
  color: #6A665A;
}
.app-kvitto p { margin: 0; }
.app-kvitto p:first-child { font-weight: 500; color: #1A1C1E; letter-spacing: 0.1em; margin-bottom: 8px; }
.app-kvitto p:last-child { margin-top: 8px; padding-top: 6px; border-top: 1px solid #D4CFC6; color: #1A1C1E; }
.app-bok { min-width: 0; }
.app-rad { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.app-lev { margin: 0; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.app-datum { margin: 3px 0 0; color: #6A665A; font-size: 11px; }
.app-belopp { margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-falt { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid #E8E4DC; font-size: 12px; }
.app-falt span { display: block; color: #6A665A; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
.app-cta {
  margin: 14px 0 0;
  background: #1A1C1E;
  color: #F2EDE4;
  text-align: center;
  padding: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 13px;
}
.telefon {
  position: absolute;
  right: 2%;
  bottom: 4%;
  width: 176px;
  background: #0E1012;
  border-radius: 26px;
  padding: 12px 8px 10px;
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(242, 237, 228, 0.12);
  z-index: 2;
}
.telefon-notch {
  display: block;
  width: 52px;
  height: 5px;
  margin: 0 auto 8px;
  background: #1A1C1E;
  border-radius: 4px;
}
.telefon-skarm {
  background: #F2EDE4;
  border-radius: 16px;
  padding: 18px 12px 14px;
  color: #1A1C1E;
}
.telefon-streck {
  display: block;
  width: 36%;
  height: 3px;
  margin: 10px auto 2px;
  background: #2A2D30;
  border-radius: 2px;
}
.tel-lev { margin: 0; font-weight: 700; font-size: 13px; }
.tel-belopp { margin: 6px 0 0; font-family: "IBM Plex Mono", monospace; font-size: 17px; font-variant-numeric: tabular-nums; }
.tel-meta { margin: 8px 0 14px; color: #6A665A; font-size: 10px; letter-spacing: 0.04em; }
.tel-cta {
  margin: 0;
  background: #1A1C1E;
  color: #F2EDE4;
  text-align: center;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
body.mork-topp .bevis {
  background: #F4F8F8;
  color: #1A1C1E;
  padding-block: 36px 48px;
  position: relative;
  z-index: 2;
}
body.mork-topp .bevis-rad p {
  border-top: 1px solid rgba(26, 28, 30, 0.18);
  color: #5C5E61;
}
body.mork-topp .bevis-rad strong { color: #1A1C1E; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-produkt .hero-copy,
  .hero-produkt .hero-devices { animation: none; }
}
@media (max-width: 900px) {
  body.mork-topp .site-header {
    position: relative;
    background: var(--teal);
  }
  .hero-produkt {
    min-height: 0;
    padding-block: 8px 0;
    padding-inline: 0;
    background: var(--teal);
  }
  .hero-produkt::after { height: 72px; }
  .hero-produkt .hero-grid { min-height: 0; padding: 12px var(--mobile-margin) 16px; }
  .hero-produkt .hero-copy,
  .hero-produkt .hero-devices { grid-column: auto; width: auto; align-self: auto; }
  .hero-produkt .hero-copy { padding-top: 8px; padding-bottom: 0; }
  .hero-produkt .hero-copy h1 { font-weight: 500; }
  .hero-foto {
    position: relative;
    inset: auto;
    height: 64vw;
    min-height: 280px;
    object-position: 72% center;
  }
  .hero-devices {
    min-height: 0;
    width: 100%;
    margin-top: 28px;
    margin-bottom: 0;
  }
  .laptop {
    -webkit-mask-image: linear-gradient(180deg, #000 0 92%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0 92%, transparent 100%);
  }
  .laptop-skarm { height: auto; min-height: 320px; }
  .laptop-bas { margin: 0 -8px; }
  .app-kort-in { grid-template-columns: 1fr; }
  .app-kvitto { display: none; }
  .app-rad { flex-direction: column; align-items: flex-start; gap: 2px; }
  .app-belopp { font-size: 14px; }
  .telefon { position: relative; right: auto; bottom: auto; margin: 18px auto 0; }
}

/* ── Kvittot från live-Veiqo, under heron (v=43-layout) ── */
.kvitto-scen {
  background: #F2EDE4;
  color: #1A1915;
  padding-block: 72px 88px;
}
.kvitto-scen-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: center;
}
.kvitto-scen-copy { grid-column: 1 / span 5; }
.kvitto-scen-copy h2 {
  color: #1A1915;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.kvitto-scen .lead { color: #3D3A32; margin-top: 16px; }
.kvitto-scen .hero-sheet.las { grid-column: 6 / span 7; }
.kvitto-scen .sheet { border-top-color: #0C4E56; overflow: visible; }
.kvitto-scen .ai-darfor dd { overflow-wrap: break-word; white-space: normal; }
.kvitto-scen .kv-rad.lyser {
  background: rgba(12, 78, 86, 0.12);
  box-shadow: inset 3px 0 0 #0C4E56;
}
.kvitto-scen .ai-knapp {
  border-color: #0C4E56;
  color: #0C4E56;
  border-radius: 8px;
}
.kvitto-scen .ai-knapp-ja {
  background: #0C4E56;
  color: #fff;
  border-color: #0C4E56;
}
@media (max-width: 900px) {
  .kvitto-scen { padding-block: 48px 56px; }
  .kvitto-scen-copy,
  .kvitto-scen .hero-sheet.las { grid-column: 1 / -1; }
}