/* alternativ2.usenumera.se: lugn, redaktionell och säljande. Eget formspråk, ärver inget från site.css.
   Varmt papper, en enda accentfärg (blek turkos, 2026-11-05, tidigare djup grön), serif i rubrikerna, tunna linjer, mycket luft. Inga kort med ikoner,
   inga gradienter, inga skuggor. Sidan ska kännas som ett välskrivet brev, inte som en mall. */

:root {
  --paper: #F6F3EC;
  --paper-2: #EFEBE1;
  --card: #FCFAF5;
  --ink: #1B1A17;
  --ink-2: #514E47;
  --ink-3: #807B71;
  --line: #DDD8CC;
  --line-2: #CFC9BB;
  /* Blek turkos (Pontus 2026-11-05). Variablerna heter --green av historiska skäl.
     --pale är själva färgen (knappar, ytor, linjer), --green är en djupare turkos för text så att den går att läsa
     (4,5:1 mot papperet). Knappar i --pale har mörk text, aldrig vit. */
  --pale: #A8D8D1;
  --pale-2: #93CDC5;
  --pale-line: #7FC0B8;
  --green: #357A77;
  --green-2: #2B6461;
  --green-wash: #E3F2EF;
  --dark: #17282A;
  --dark-2: #1E3234;
  --dark-ink: #EDF3F2;
  --dark-ink-2: #B3C6C5;
  --serif: "New York", "Iowan Old Style", "Palatino", "Charter", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1120px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.2, 1.35, .35, 1);
  --red: #B8371F;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.wrap { width: min(var(--wrap), calc(100% - 2 * clamp(18px, 4vw, 40px))); margin: 0 auto; }
.wrap.narrow { width: min(760px, calc(100% - 2 * clamp(18px, 4vw, 40px))); }

/* ───── Typografi */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; margin: 0; }
h1 { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; }
h1 em { font-style: italic; color: var(--green); }
h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; margin-bottom: 18px; max-width: 18em; }
h3 { font-size: 22px; line-height: 1.25; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.lede.light { color: var(--dark-ink-2); }
.eyebrow { font: 500 13px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin: 0 0 18px; }
.eyebrow.light { color: var(--pale); }
.fine { font-size: 14px; color: var(--ink-3); margin: 0; }
.fine.center { text-align: center; margin-top: 28px; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }

/* ───── Knappar och länkar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-weight: 500; font-size: 16px; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn.solid { background: var(--pale); border-color: var(--pale-line); color: var(--ink); }
.btn.solid:hover { background: var(--pale-2); border-color: var(--green); transform: translateY(-1px); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.big { padding: 16px 28px; font-size: 17px; }
.btn.small { padding: 8px 16px; font-size: 14px; }
.link { font-weight: 500; border-bottom: 1px solid var(--line-2); padding-bottom: 1px; transition: border-color .2s; }
.link:hover { border-color: var(--ink); }
.link.big { font-size: 17px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 32px 0 16px; }
.cta-row.center { justify-content: center; }

/* ───── Topp */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.mark { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
.top nav { display: flex; gap: 22px; margin-left: 12px; font-size: 15px; color: var(--ink-2); }
.top nav a:hover { color: var(--ink); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; }
.top-actions .btn { padding: 9px 18px; font-size: 15px; }

/* ───── Hjälte */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 80px); align-items: center; padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 4vw, 48px); }
.hero-copy .lede { margin-top: 22px; }
.hero .cta-row { margin: 28px 0 14px; }
.hero-price { font-size: 17px; margin: 0 0 6px; }
.hero-price strong { font-weight: 500; }
.hero-price span { color: var(--ink-2); }
.hero .fine { margin-top: 0; }

/* ───── Prisremsan */
.price-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: 26px 32px; margin-bottom: clamp(56px, 8vw, 96px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.price-main { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.price { display: inline-flex; align-items: baseline; gap: 6px; }
.price strong { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4vw, 48px); line-height: 1; letter-spacing: -0.02em; }
.price span { font-size: 17px; color: var(--ink-2); }
.price-or { color: var(--ink-3); font-size: 16px; }
.price-side { display: grid; gap: 4px; text-align: right; }
/* Ingår också: e-faktura och kassasystem, direkt under priset. */
.price-strip.joined { margin-bottom: 0; }
.also { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: clamp(56px, 8vw, 96px); border-bottom: 1px solid var(--ink); }
.also-item { display: grid; gap: 6px; align-content: start; padding: 22px 32px; color: inherit; text-decoration: none; transition: background .2s; }
.also-item + .also-item { border-left: 1px solid var(--line-2); }
.also-item:hover { background: rgba(0, 0, 0, .03); }
.also-item strong { font-weight: 500; font-size: 18px; color: var(--green); }
.also-item strong::after { content: " →"; opacity: .55; }
.also-item span { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 760px) {
  .also { grid-template-columns: 1fr; }
  .also-item { padding: 18px 0; }
  .also-item + .also-item { border-left: 0; border-top: 1px solid var(--line-2); }
}
.price-free { font-weight: 500; font-size: 18px; color: var(--green); }
.price-sub { font-size: 14px; color: var(--ink-3); }
/* Priset exkl. moms, litet under priset (Pontus 2026-11-05). */
.ex-vat { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 400; margin-top: 4px; }
.hero-price .ex-vat { margin-top: 6px; }
.price-card .ex-vat { margin: -6px 0 0; transition: opacity .3s; }
.odo .sep { display: inline-block; width: .28em; }

/* ───── Varför */
.why { padding: clamp(24px, 4vw, 40px) 0 clamp(64px, 9vw, 120px); }
.why-text { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; color: var(--ink-2); }
.why-text p { margin-bottom: 1.1em; }
.why-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.why-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.why-list strong { font-family: var(--serif); font-weight: 500; font-size: 20px; }
.why-list span { color: var(--ink-2); }

/* ───── Så lätt är det */
.easy { padding-bottom: clamp(64px, 9vw, 120px); }
.hand { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 32px; }
.hand-item { display: grid; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.hand-item:nth-last-child(-n+2) { border-bottom: 0; }
.hand-item strong { font-weight: 500; }
.hand-item span { color: var(--ink-2); font-size: 16px; }

/* ───── AI */
.ai { background: var(--dark); color: var(--dark-ink); padding: clamp(64px, 9vw, 120px) 0; }
.ai h2 { color: #fff; }
.ai-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.ai-points { list-style: none; margin: 36px 0 0; padding: 0; display: grid; }
.ai-points li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); }
.ai-points strong { font-weight: 500; color: #fff; }
.ai-points span { color: var(--dark-ink-2); font-size: 16px; }
.ai-card { background: var(--dark-2); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 22px; position: sticky; top: 96px; }
.chat { display: grid; gap: 14px; }
.msg { padding: 14px 16px; border-radius: 12px; font-size: 15.5px; line-height: 1.5; display: grid; gap: 8px; }
.msg.you { background: var(--pale); color: var(--ink); justify-self: end; max-width: 80%; border-bottom-right-radius: 4px; }
.msg.ai { background: rgba(255,255,255,.06); border-bottom-left-radius: 4px; }
.ai-name { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pale); }
.chat-item { padding: 8px 12px; background: rgba(0,0,0,.25); border-radius: 8px; font-size: 14.5px; }
.chat-item b { font-weight: 500; color: #fff; margin-right: 6px; }

/* ───── Allt som ingår */
.all { padding: clamp(64px, 9vw, 120px) 0; }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); border-top: 1px solid var(--ink); }
.ledger-row { padding: 26px 0; border-bottom: 1px solid var(--line-2); }
.ledger-row h3 { font-size: 21px; margin-bottom: 8px; }
.ledger-row p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* ───── Skärmbilder */
.shots { padding-bottom: clamp(64px, 9vw, 120px); }
.shot { margin: 0; }
.shot img { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.shot figcaption { margin-top: 14px; font-size: 15px; color: var(--ink-2); max-width: 44em; }
.shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 4vw, 48px); }

/* ───── Pris */
.pricing { background: var(--paper-2); padding: clamp(64px, 9vw, 120px) 0; }
.pricing .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.pricing .section-head h2, .pricing .section-head .lede { margin-left: auto; margin-right: auto; }
.includes { list-style: none; margin: 40px auto 0; padding: 0; max-width: 860px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; }
.includes li { padding-left: 26px; position: relative; color: var(--ink-2); font-size: 16px; }
.includes li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }

/* ───── Säkerhet */
.trust { padding: clamp(64px, 9vw, 120px) 0; }
.trust-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); border-top: 1px solid var(--ink); padding-top: 36px; }
.trust-text { color: var(--ink-2); }

/* ───── Frågor */
.faq { padding-bottom: clamp(64px, 9vw, 120px); }
.faq-list { border-top: 1px solid var(--ink); max-width: 820px; }
details { border-bottom: 1px solid var(--line-2); }
summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-family: var(--serif); font-size: 21px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 26px; font-weight: 300; color: var(--ink-3); transition: transform .25s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 22px; color: var(--ink-2); max-width: 40em; }

/* ───── Avslut */
.closing { text-align: center; padding: 0 0 clamp(72px, 10vw, 140px); }
.closing h2, .closing .lede { margin-left: auto; margin-right: auto; }

/* ───── Sidfot */
.foot { border-top: 1px solid var(--line-2); padding: 48px 0 56px; font-size: 15px; color: var(--ink-2); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
.foot .mark { display: inline-block; color: var(--ink); margin-bottom: 10px; }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; align-content: start; }
.foot-links a:hover { color: var(--ink); }

/* ───── Infasning vid scroll (stängs av med "minska rörelse") */
.in { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.in.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .in, .demo [data-step] { opacity: 1; transform: none; transition: none; }
  .demo-q .typed::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ───── Mindre skärmar */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 48px; }
  .how-grid, .price-grid { grid-template-columns: 1fr; }
  .how-sticky, .price-card { position: static; }
  .how-steps { padding-top: 24px; padding-bottom: 0; gap: 40px; }
  .st { opacity: 1; }
  .ai-grid, .trust-grid, .ledger, .foot .wrap { grid-template-columns: 1fr; }
  .ai-card { position: static; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .plans { grid-template-columns: minmax(0, 480px); }
  .hand { grid-template-columns: 1fr; }
  .hand-item:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .top nav { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .price-strip { padding: 22px 0; }
  .price-side { text-align: left; }
  .why-list li, .includes, .shot-pair { grid-template-columns: 1fr; }
  .top-actions .link { display: none; }
  .cta-row .btn { width: 100%; }
  summary { font-size: 19px; }
}

/* ───── Redigeringsläget (admin.<domän>/alternativ2): editor.css använder startsidans variabler och knappklasser. */
body.le-mode { --sheet: var(--card); --rule: var(--line-2); --ink2: var(--ink-2); --ink3: var(--ink-3); --ochre: #8A6A22; --moss: var(--green); --well: var(--paper-2); }
.le-mode .btn, .le-mode .btn[data-t][contenteditable="true"] { border-radius: 999px; }
.le-mode .btn.ink { background: var(--pale); border-color: var(--pale-line); color: var(--ink); }
.le-mode .btn.quiet { background: transparent; }
.le-mode .btn.underline { border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 4px 0; }
.le-mode .in { opacity: 1; transform: none; }


/* ═════════ Flyttat från alternativ3 och nya effekter (2026-11-05) ═════════ */

/* ───── Läsframsteg */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--pale-line); transform: scaleX(0); transform-origin: left; }

/* ───── Scenen: kvittot kommer in, läses, förstås, bokförs */
.scene-wrap { position: relative; }
.scene { position: relative; aspect-ratio: 5 / 6; perspective: 1400px; }
.desk { position: absolute; inset: 0; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(27, 26, 23, .35); overflow: hidden; }
.desk::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(27, 26, 23, .07) 27px 28px); }
.desk::after { content: ""; position: absolute; top: 0; bottom: 0; left: 9%; width: 1px; background: color-mix(in srgb, var(--red) 35%, transparent); }
.receipt {
  position: absolute; left: 5%; top: 6%; width: 40%; padding: 14px 12px 18px; background: #fff; color: var(--ink);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.45; letter-spacing: -0.01em;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 18px 40px -18px rgba(27, 26, 23, .45);
  transform-origin: 50% 0; will-change: transform; display: grid; gap: 3px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 96% 100%, 92% calc(100% - 6px), 88% 100%, 84% calc(100% - 6px), 80% 100%, 76% calc(100% - 6px), 72% 100%, 68% calc(100% - 6px), 64% 100%, 60% calc(100% - 6px), 56% 100%, 52% calc(100% - 6px), 48% 100%, 44% calc(100% - 6px), 40% 100%, 36% calc(100% - 6px), 32% 100%, 28% calc(100% - 6px), 24% 100%, 20% calc(100% - 6px), 16% 100%, 12% calc(100% - 6px), 8% 100%, 4% calc(100% - 6px), 0 100%);
}
.rc-shop { font-weight: 700; letter-spacing: .08em; text-align: center; font-size: 12px; }
.rc-meta { text-align: center; color: var(--ink-3); font-size: 10px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--line-2); }
.rc-row, .rc-total { display: flex; justify-content: space-between; gap: 8px; padding: 2px 4px; border-radius: 3px; transition: background .4s, color .4s; white-space: nowrap; }
.rc-row.read { background: var(--green-wash); color: var(--green-2); }
.rc-row.read.private { background: #F5E3DE; color: var(--red); }
.rc-row i, .rc-total i { font-style: normal; }
.rc-total { font-weight: 700; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line-2); }
.rc-vat { color: var(--ink-3); font-size: 10px; }
.rc-bar { height: 22px; margin-top: 10px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); opacity: .85; }
.scan { position: absolute; left: 5%; width: 42%; height: 2px; top: 8%; background: var(--pale-line); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--pale) 70%, transparent); opacity: 0; }
.notes { position: absolute; right: 4%; top: 6%; width: 48%; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.38; }
.notes-head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 40%, transparent); }
.notes.live .pulse { animation: pulse 1.4s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px transparent; } }
.note { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--out), transform .5s var(--out); color: var(--ink-2); }
.note.on { opacity: 1; transform: none; }
.note-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-2); margin-top: 3px; position: relative; transition: border-color .3s, background .3s; }
.note.done .note-dot { border-color: var(--pale-line); background: var(--pale-line); }
.note.done .note-dot::after { content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 4px; height: 7px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
.note-text { display: block; }
.voucher {
  position: absolute; right: 4%; bottom: 4%; width: 72%; padding: 12px 14px 10px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 24px 50px -30px rgba(27, 26, 23, .45); font-size: 12.5px; display: grid;
  opacity: 0; transform: translateY(16px); transition: opacity .6s var(--out), transform .6s var(--out);
}
.voucher.on { opacity: 1; transform: none; }
.v-head { display: flex; align-items: baseline; gap: 10px; padding-right: 100px; white-space: nowrap; padding-bottom: 8px; border-bottom: 1px solid var(--ink); margin-bottom: 4px; }
.v-tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.v-title { font-family: var(--serif); font-size: 14px; }
.v-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px 62px; gap: 6px; padding: 4px 0; font-size: 12px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-8px); transition: opacity .45s var(--out), transform .45s var(--out); white-space: nowrap; }
.v-row.on { opacity: 1; transform: none; }
.v-row > span { overflow: hidden; text-overflow: ellipsis; }
/* 2026-11-05: kolumnerna fick inte plats (1930-raden sköts utanför kortet när beloppet räknades upp). */
.v-row b { font-family: var(--mono); font-weight: 500; color: var(--green); margin-right: 4px; font-size: 11.5px; }
.v-row i { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.v-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; }
.v-note { color: var(--ink-3); font-size: 11.5px; }
.v-btn { background: var(--pale); color: var(--ink); padding: 6px 12px; border-radius: 999px; font-weight: 500; font-size: 12px; transition: transform .2s var(--spring), background .2s; }
.v-btn.pressed { transform: scale(.94); background: var(--pale-2); }
.stamp { position: absolute; right: 14px; top: 9px; padding: 4px 10px; border: 2px solid var(--red); color: var(--red); border-radius: 4px; font: 700 13px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-10deg) scale(2.4); opacity: 0; mix-blend-mode: multiply; }
.stamp.on { animation: slam .5s var(--spring) forwards; }
@keyframes slam { 60% { opacity: 1; transform: rotate(-10deg) scale(.96); } 100% { opacity: .95; transform: rotate(-10deg) scale(1); } }
.scene.shake { animation: shake .3s ease-out; }
@keyframes shake { 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 0); } }
.scene-caption { margin: 14px 0 0; font-size: 14px; color: var(--ink-3); max-width: 40em; }

/* ───── Så lätt är det: fast panel + stegen */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; border-top: 1px solid var(--ink); padding-top: 32px; }
.how-sticky { position: sticky; top: 100px; }
.how-stage { position: relative; aspect-ratio: 4 / 3; }
.step-panel { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .7s var(--out), transform .7s var(--out); }
.step-panel.on { opacity: 1; transform: none; }
.ph { position: absolute; inset: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; display: grid; align-content: center; gap: 12px; box-shadow: 0 40px 80px -50px rgba(27, 26, 23, .35); }
.ph-bar { display: block; height: 4px; width: 100%; background: var(--line); border-radius: 2px; overflow: hidden; }
.ph-bar span { display: block; height: 100%; width: 33%; background: var(--pale-line); transition: width .6s var(--out); }
.step-panel[data-panel="2"] .ph-bar span { width: 66%; }
.step-panel[data-panel="3"] .ph-bar span { width: 100%; }
.ph-title { font-family: var(--serif); font-size: 26px; margin-top: 6px; }
.ph-drop { display: grid; place-items: center; gap: 8px; padding: 36px 20px; border: 1.5px dashed var(--line-2); border-radius: 12px; text-align: center; color: var(--ink-2); font-size: 15px; }
.ph-plus { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--green); }
.step-panel.on .ph-plus { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.ph-hint { color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.ph-input { display: block; font-size: 19px; min-height: 1.6em; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; }
.typed::after { content: ""; display: inline-block; width: 1px; height: 1.1em; background: var(--ink); vertical-align: -0.2em; margin-left: 2px; animation: blink 1s steps(2) infinite; }
.ph-row { display: flex; align-items: baseline; gap: 8px; font-size: 16px; padding: 8px 0 2px; border-top: 1px solid var(--line); }
.ph-row b { font-family: var(--mono); font-weight: 500; color: var(--green); }
.ph-row i { font-style: normal; margin-left: auto; }
.ph-why { font-size: 14px; color: var(--ink-2); background: var(--green-wash); padding: 8px 12px; border-radius: 8px; line-height: 1.45; }
.ph-ok { justify-self: end; background: var(--pale); color: var(--ink); padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; margin-top: 6px; }
.how-steps { list-style: none; margin: 0; padding: 10vh 0 20vh; display: grid; gap: clamp(60px, 10vw, 140px); }
.st { opacity: .35; transition: opacity .5s; }
.st.on { opacity: 1; }
.st h3 { margin-bottom: 10px; }
.st p { color: var(--ink-2); font-size: 16px; max-width: 30em; }

/* ───── Priset: toggel och odometer */
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 5vw, 72px); align-items: start; justify-content: center; max-width: 980px; margin: 0 auto; }
.price-grid .includes { grid-template-columns: 1fr; margin: 0; gap: 14px; padding-top: 8px; }
.price-card { background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; padding: 28px; display: grid; gap: 18px; position: relative; }
.toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); border-radius: 999px; padding: 4px; isolation: isolate; }
.toggle button { position: relative; z-index: 1; border: 0; background: transparent; padding: 10px; border-radius: 999px; font: 500 15px var(--sans); color: var(--ink-2); cursor: pointer; transition: color .3s; }
.toggle button[aria-selected="true"] { color: var(--ink); }
.toggle-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: transform .5s var(--spring); }
.toggle.year .toggle-pill { transform: translateX(100%); }
.price-big { display: flex; align-items: baseline; gap: 10px; }
.odo { display: inline-flex; font-family: var(--serif); font-weight: 500; font-size: clamp(64px, 7vw, 96px); line-height: 1; letter-spacing: -0.04em; }
.odo .d { display: inline-block; height: 1em; overflow: hidden; }
.odo .d span { display: block; transition: transform .7s var(--out); }
.odo .d i { display: block; font-style: normal; height: 1em; }
.pb-unit { display: grid; gap: 2px; }
.pb-unit b { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1; }
.pb-unit span { color: var(--ink-2); font-size: 15px; }
.price-line { color: var(--ink-2); margin: 0; min-height: 2.6em; transition: opacity .3s; }
.btn.wide { width: 100%; }

/* ───── Textinfasning ord för ord (Text Effect) */
.fx-words .w { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(.3em); transition: opacity .7s var(--out), filter .7s var(--out), transform .7s var(--out); }
.fx-words.on .w { opacity: 1; filter: blur(0); transform: none; }

/* ───── Textloop i kickern */
.loop { display: inline-grid; position: relative; vertical-align: bottom; height: 1.4em; overflow: hidden; }
.loop > span { grid-area: 1 / 1; display: block; transition: transform .6s var(--out), opacity .6s var(--out); }
.loop > span.out { transform: translateY(-110%); opacity: 0; }
.loop > span.in-next { transform: translateY(110%); opacity: 0; transition: none; }

/* ───── Magnetisk knapp och tryck */
.btn:active { transform: scale(.96); }

/* ───── Tilt */
.tilt { transform-style: preserve-3d; transition: transform .5s var(--out); will-change: transform; }

/* ───── Border trail på priskortet */
.trail::before { content: ""; position: absolute; inset: -1px; border-radius: 21px; padding: 1.5px; background: conic-gradient(from var(--angle, 0deg), transparent 0 70%, var(--pale-line) 85%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: spin 5s linear infinite; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --angle: 360deg; } }

/* ───── Spotlight på raderna i Allt som ingår */
.ledger-row { position: relative; }
.ledger-row::before { content: ""; position: absolute; inset: 0 -16px; border-radius: 10px; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--green) 10%, transparent), transparent 70%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.ledger-row:hover::before { opacity: 1; }

/* ───── Bockar som ritas (ingår-listan) */
.includes li::before { transition: width .35s var(--out) .1s, height .35s var(--out); width: 0; height: 0; border-color: transparent; }
.includes li.on::before { width: 12px; height: 7px; border-color: var(--green); }
.includes li { opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--out), transform .5s var(--out); }
.includes li.on { opacity: 1; transform: none; }

/* ───── Fjädrande FAQ */
details p { overflow: hidden; }
details.anim p { animation: open .45s var(--out); }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .note, .voucher, .v-row, .step-panel, .st, .fx-words .w, .includes li { opacity: 1; transform: none; filter: none; transition: none; }
  .includes li::before { width: 12px; height: 7px; border-color: var(--green); }
  .trail::before, .step-panel.on .ph-plus, .notes.live .pulse, .typed::after { animation: none; }
  .loop > span.out, .loop > span.in-next { transition: none; }
}

/* ───── Redigeringsläget */
.le-mode .note, .le-mode .voucher, .le-mode .v-row, .le-mode .step-panel, .le-mode .st, .le-mode .fx-words .w, .le-mode .includes li { opacity: 1; transform: none; filter: none; }
.le-mode .includes li::before { width: 12px; height: 7px; border-color: var(--green); }
.le-mode .step-panel { position: relative; margin-bottom: 16px; }
.le-mode .how-stage { aspect-ratio: auto; }
.le-mode .ph { position: relative; }

@media (max-width: 640px) {
  .scene { aspect-ratio: 10 / 21; }
  .receipt { left: 5%; top: 4%; width: 58%; font-size: 10px; padding: 12px 10px 14px; }
  .scan { left: 4%; width: 60%; }
  .notes { left: 5%; right: auto; top: 37%; width: 90%; font-size: 12px; gap: 5px; }
  .voucher { width: 90%; left: 5%; right: auto; bottom: 3%; font-size: 11.5px; padding: 12px 12px 10px; }
  .v-row { grid-template-columns: minmax(0, 1fr) 58px 58px; }
  .v-title { font-size: 13px; }
  .ph { padding: 20px; }
  .ph-row { font-size: 14px; white-space: nowrap; }
}

/* ───── Byt till Numera (2026-11-05): programmens namn som ordmärken i vår egen typografi (inga loggor),
   och en filimport som spelas upp med det program som pekas på. */
.switch { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); }
.brands { list-style: none; margin: 0 0 clamp(32px, 4vw, 48px); padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.brands li { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 24px); padding: 8px 18px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); cursor: default; transition: background .3s var(--ease), border-color .3s, color .3s, transform .35s var(--spring); }
.brands li[data-brand="other"] { font-style: italic; border-style: dashed; }
.brands li.active { background: var(--pale); border-color: var(--pale-line); color: var(--ink); transform: translateY(-2px); }
.switch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: 28px; }
.switch-steps { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-2); }
.switch-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
.switch-steps b { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1; color: var(--green); }

/* Knappen till guiden /byt-till-numera bredvid rubriken (2026-11-11): till höger på bred skärm, under texten i mobilen. */
.switch-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(36px, 5vw, 56px); }
.switch-head .section-head { margin-bottom: 0; }
.switch-cta { flex: none; white-space: nowrap; }
.switch-cta span[aria-hidden] { display: inline-block; transition: transform .35s var(--spring); }
.switch-cta:hover span[aria-hidden] { transform: translateX(4px); }
@media (max-width: 900px) { .switch-head { flex-direction: column; align-items: flex-start; } }
.import-demo { position: relative; min-height: 300px; }
.id-file { position: absolute; left: 0; top: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 30px -22px rgba(27,26,23,.5); font-size: 13px; z-index: 2; }
.id-ext { font: 600 10px/1 var(--mono); letter-spacing: .08em; padding: 6px 5px; border-radius: 4px; background: var(--pale); color: var(--ink); }
.id-name { font-family: var(--mono); font-size: 12.5px; }
.id-card { margin-left: 18%; margin-top: 64px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 16px; display: grid; gap: 2px; font-size: 14px; }
.id-head { display: flex; justify-content: space-between; gap: 10px; font-family: var(--serif); font-size: 17px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 4px; }
.id-from { font-family: var(--sans); font-size: 12.5px; color: var(--green); align-self: center; }
.id-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.id-row i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink); }
.id-ok { color: var(--green-2) !important; }
.id-bar { height: 4px; border-radius: 4px; background: var(--paper-2); overflow: hidden; margin-top: 12px; }
.id-bar span { display: block; height: 100%; width: 100%; background: var(--pale-line); transform-origin: left; }
.id-done { justify-self: end; margin-top: 10px; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--pale); color: var(--ink); }
/* Uppspelningen (alt2.js lägger till klasserna). Utan JS och med "minska rörelse" syns slutläget. */
.import-demo.play .id-file { animation: id-drop 1.1s var(--out) both; }
.import-demo.play .id-row { animation: id-row .5s var(--out) both; }
.import-demo.play .id-row:nth-of-type(2) { animation-delay: .9s; } .import-demo.play .id-row:nth-of-type(3) { animation-delay: 1.05s; }
.import-demo.play .id-row:nth-of-type(4) { animation-delay: 1.2s; } .import-demo.play .id-row:nth-of-type(5) { animation-delay: 1.35s; }
.import-demo.play .id-bar span { animation: id-bar 1.4s var(--ease) .9s both; }
.import-demo.play .id-done { animation: id-done .5s var(--spring) 2.4s both; }
@keyframes id-drop { 0% { transform: translate(-30px, -40px) rotate(-8deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; } }
@keyframes id-row { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes id-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes id-done { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .switch-grid { grid-template-columns: 1fr; }
  .id-card { margin-left: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .import-demo.play .id-file, .import-demo.play .id-row, .import-demo.play .id-bar span, .import-demo.play .id-done { animation: none; }
}
.le-mode .import-demo .id-file, .le-mode .import-demo .id-row, .le-mode .import-demo .id-bar span, .le-mode .import-demo .id-done { animation: none !important; }

/* ═════════ 2026-11-05: årspriset som månadskostnad, Gör klart juni, telefonen, Läs mer, nedladdning ═════════ */

/* ───── Priset: kortet byter inte storlek. Båda texterna ligger i samma rutnätscell och den som inte gäller tonas bort. */
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.swap[data-period="month"] > [data-for="year"], .swap[data-period="year"] > [data-for="month"] { opacity: 0; transform: translateY(4px); pointer-events: none; }
.price-card .price-line { min-height: 0; }
.price-card .swap .ex-vat { margin: 0; }
/* Siffran ändrar bara bredd, aldrig höjd, och kortets bredd styrs av rutnätet: storleken står still. */
.price-big { min-height: 1em; }
.odo .comma { display: inline-block; width: .26em; text-align: center; }
.price-why { justify-self: end; font-size: 13.5px; color: var(--green); border-color: var(--pale-line); margin-top: 2px; }
.why25 { max-width: 760px; margin: clamp(36px, 5vw, 56px) auto 0; padding: 24px 28px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; scroll-margin-top: 90px; }
.why25 h3 { font-size: 21px; margin-bottom: 8px; }
.why25 p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 640px) { .price-why { justify-self: start; } }

/* ───── Allt som ingår: Läs mer */
.all-more { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 36px; }

/* ───── Frågor: supportens adress */
.faq-mail { margin: -12px 0 22px !important; }

/* ───── Gör klart juni (ny design 2026-11-11): text och chatt till vänster utan kort, månaden till höger.
   Sammanfattningen ligger under raderna i stället för ovanpå dem. */
.june { padding: clamp(64px, 9vw, 120px) 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.june-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 28px clamp(28px, 5vw, 72px); align-items: center; }
.june-side { display: grid; gap: 28px; align-content: start; }
.june-side .section-head { margin: 0; }
.june-chat { display: grid; gap: 14px; max-width: 460px; }
.jc-you { justify-self: start; background: var(--dark); color: var(--dark-ink); padding: 12px 18px; border-radius: 16px 16px 16px 4px; font-size: 17px; box-shadow: 0 18px 36px -24px rgba(23, 40, 42, .6); }
.jc-typed { white-space: pre-wrap; }
.june.typing .jc-typed::after { content: ""; display: inline-block; width: 1px; height: 1.05em; background: currentColor; vertical-align: -.18em; margin-left: 2px; animation: blink 1s steps(2) infinite; }
.jc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 14.5px; border-top: 1px solid var(--line-2); }
.jc-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); transition: opacity .45s var(--out), transform .45s var(--out); }
.jc-steps li span { color: var(--ink); }
.jc-steps li em { font-style: normal; color: var(--ink-3); font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jc-steps li i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--green); background: var(--green); position: relative; }
.jc-steps li i::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); }
.jc-answer { display: grid; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; padding: 14px 16px; font-size: 15.5px; line-height: 1.5; transition: opacity .6s var(--out), transform .6s var(--out); }
.jc-name { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.jc-name .ic { width: 15px; height: 15px; }
.june-ledger { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 24px 20px; box-shadow: 0 50px 90px -60px rgba(27, 26, 23, .45); }
.jl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; }
.jl-title { font-family: var(--serif); font-size: 24px; }
.jl-progress { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.jl-progress b { font-weight: 600; color: var(--ink); }
.jl-bar { height: 4px; border-radius: 4px; background: var(--paper-2); overflow: hidden; margin-bottom: 6px; }
.jl-bar span { display: block; height: 100%; width: 100%; background: var(--pale-line); transform-origin: left; transition: transform .45s var(--out); }
.jl-rows { list-style: none; margin: 0; padding: 0; }
.jl-rows li { display: grid; grid-template-columns: 34px 46px minmax(0, 1fr) auto 70px; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 14px; border-radius: 6px; transition: background .5s var(--ease); }
.jl-ref { font-family: var(--mono); font-size: 12px; color: var(--green); font-weight: 500; transition: opacity .35s; }
.jl-date { color: var(--ink-3); font-size: 12.5px; }
.jl-text { min-width: 0; display: grid; overflow: hidden; }
.jl-text, .jl-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jl-text small { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.jl-text small b { font-family: var(--mono); font-weight: 500; color: var(--green); margin-right: 5px; }
.jl-amt { text-align: right; font-variant-numeric: tabular-nums; }
.jl-pill { justify-self: end; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--pale); color: var(--ink); transition: background .3s, color .3s; }
.jl-done-card { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 16px; align-items: center; margin-top: 16px; padding: 14px 16px; background: var(--dark); color: var(--dark-ink); border-radius: 12px; transition: opacity .6s var(--out), transform .6s var(--spring); }
.jl-stamp { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; background: var(--pale); color: var(--ink); font: 600 13px/1.2 var(--sans); white-space: nowrap; }
.jl-stamp .ic { width: 16px; height: 16px; }
.jl-stat { display: grid; font-size: 12.5px; color: var(--dark-ink-2); line-height: 1.3; }
.jl-stat b { font-family: var(--serif); font-weight: 500; font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.june-fine { grid-column: 1 / -1; margin: 4px 0 0; max-width: 46em; }

/* Uppspelningen: alt2.js sätter .play på #june och steg för steg klasser. Utan JS och med "minska rörelse" syns slutläget. */
.june-stage.play .jc-steps li { opacity: .35; }
.june-stage.play .jc-steps li i { background: transparent; border-color: var(--line-2); }
.june-stage.play .jc-steps li i::after { display: none; }
.june-stage.play .jc-steps li em { opacity: 0; }
.june-stage.play .jc-steps li.on { opacity: 1; }
.june-stage.play .jc-steps li.on em { opacity: .55; transition: opacity .3s; }
.june-stage.play .jc-steps li.on:not(.done) i { animation: jspin .9s linear infinite; border-color: var(--green) transparent var(--green) var(--green); }
.june-stage.play .jc-steps li.done i { background: var(--green); border-color: var(--green); }
.june-stage.play .jc-steps li.done i::after { display: block; }
.june-stage.play .jc-steps li.done em { opacity: 1; }
@keyframes jspin { to { transform: rotate(360deg); } }
.june-stage.play .jc-answer { opacity: 0; transform: translateY(8px); }
.june-stage.play.answered .jc-answer { opacity: 1; transform: none; }
.june-stage.play .jl-rows li .jl-ref { opacity: 0; }
.june-stage.play .jl-rows li .jl-pill { background: var(--paper-2); color: var(--ink-3); font-size: 0; }
.june-stage.play .jl-rows li .jl-pill::before { content: "Utkast"; font-size: 11.5px; }
.june-stage.play .jl-rows li.booked .jl-ref { opacity: 1; }
.june-stage.play .jl-rows li.booked .jl-pill { background: var(--pale); color: var(--ink); font-size: 11.5px; }
.june-stage.play .jl-rows li.booked .jl-pill::before { content: none; }
.june-stage.play .jl-rows li.flash { background: var(--green-wash); }
.june-stage.play .jl-rows li.reading { background: color-mix(in srgb, var(--pale) 30%, transparent); }
.june-stage.play .jl-done-card { opacity: .25; transform: none; filter: saturate(0); }
.june-stage.play.finished .jl-done-card { opacity: 1; filter: none; transition: opacity .6s var(--out), filter .6s; }
.june-stage.play.finished .jl-stamp { animation: slam .5s var(--spring) .15s both; }
@media (prefers-reduced-motion: reduce) {
  .june-stage.play .jc-steps li, .june-stage.play .jc-answer, .june-stage.play .jl-done-card { opacity: 1; transform: none; }
}
.le-mode .june-stage .jc-steps li, .le-mode .june-stage .jc-answer, .le-mode .june-stage .jl-done-card { opacity: 1 !important; transform: none !important; }
@media (max-width: 980px) {
  .june-stage { grid-template-columns: 1fr; }
  .june-chat { max-width: none; }
}
@media (max-width: 640px) {
  .jl-rows li { grid-template-columns: 30px minmax(0, 1fr) auto; font-size: 13px; }
  .jl-date, .jl-pill { display: none; }
  .june-ledger { padding: 16px; }
  .jl-done-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jl-stamp { grid-column: 1 / -1; justify-self: start; }
}

/* ───── Ikoner (symboler överst i sidan, 2026-11-11) */
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ───── Regler och Numera AI: namnen med en linje mellan, så att de två inte blandas ihop */
.rules-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); align-items: center; margin: 8px 0 18px; }
.rn-name { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; white-space: nowrap; }
.rn-name .ic { width: 44px; height: 44px; padding: 9px; border-radius: 13px; background: var(--green-wash); color: var(--green); }
.rn-name.rn-ai .ic { background: var(--dark); color: var(--pale); }
.rn-name:first-child::after { content: ""; flex: 1; height: 2px; margin: 0 calc(-1 * clamp(20px, 3vw, 36px)) 0 10px; background: repeating-linear-gradient(90deg, var(--line-2) 0 10px, transparent 10px 16px); }
.rules .rule-top { justify-content: flex-end; }
.rules .rule-tag { display: none; }
@media (max-width: 860px) {
  .rules-names { display: none; }
  .rules .rule-top { justify-content: space-between; }
  .rules .rule-tag { display: inline; }
}

/* ───── Allt som ingår: fyra områden med ikon, resten på /funktioner */
.all-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.all-card { display: grid; gap: 10px; align-content: start; padding: 24px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; color: inherit; text-decoration: none; transition: border-color .25s, transform .3s var(--out), box-shadow .3s; }
.all-card:hover { border-color: var(--pale-line); transform: translateY(-3px); box-shadow: 0 30px 50px -40px rgba(27, 26, 23, .5); }
.all-card h3 { font-size: 21px; margin: 6px 0 0; }
.all-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.all-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--green-wash); color: var(--green); }
.all-ic .ic { width: 24px; height: 24px; }
@media (max-width: 980px) { .all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .all-grid { grid-template-columns: 1fr; } }

/* ───── Datorn och telefonen */
.devices { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 22%, 250px); gap: clamp(20px, 3vw, 40px); align-items: end; }
.desk-shot img { border-radius: 12px; box-shadow: 0 40px 80px -50px rgba(27, 26, 23, .45); }
.phone { margin: 0; }
.phone-body { position: relative; padding: 9px; background: #121414; border-radius: 40px; box-shadow: 0 0 0 1.5px #3a3f3f inset, 0 40px 70px -40px rgba(27, 26, 23, .6); }
.phone-screen { display: block; border-radius: 31px; overflow: hidden; background: #F7F6F1; padding-top: 34px; }
.phone-body img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; }
.phone-island { position: absolute; top: 19px; left: 50%; width: 30%; height: 18px; transform: translateX(-50%); background: #121414; border-radius: 999px; z-index: 1; }
.shot-caption { margin-top: 18px; font-size: 15px; color: var(--ink-2); max-width: 46em; }
.get-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--ink); }
.get-it h3 { margin-bottom: 6px; }
.get-it p { margin: 0; color: var(--ink-2); }
.get-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }
.small-link { font-size: 13.5px; color: var(--ink-2); flex-basis: 100%; text-align: right; }
@media (max-width: 860px) {
  .devices { grid-template-columns: minmax(0, 1fr) 34%; }
  .get-it { grid-template-columns: 1fr; }
  .get-links { justify-content: flex-start; }
  .small-link { text-align: left; }
}
@media (max-width: 560px) {
  .devices { grid-template-columns: 1fr; }
  .phone { width: 62%; margin: -18% 0 0 auto; position: relative; }
}

@keyframes blink { 50% { opacity: 0; } }

/* ───── Allt Numera kan (funktioner.html) */
.feat-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 48px); max-width: 820px; margin-left: max(clamp(18px, 4vw, 40px), calc((100% - var(--wrap)) / 2)); }
.feat-hero .back { display: inline-block; font-size: 15px; margin-bottom: 28px; }
.feat-hero .lede { margin-top: 18px; }
/* Alla funktioner (ny ordning 2026-11-11): rutor med ikon överst, sedan sidomeny och områden i tre grupper.
   Antalet funktioner per område räknas av alt2.js, så att siffran aldrig blir fel när en funktion läggs till. */
.feat-index { display: grid; gap: 22px; margin-bottom: clamp(48px, 7vw, 88px); }
.fi-title, .feat-group-title, .fs-group { font: 500 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin: 0 0 10px; }
.fi-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.fi-tile { display: grid; gap: 4px; align-content: start; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .25s, transform .3s var(--out), box-shadow .3s; }
.fi-tile:hover { border-color: var(--pale-line); transform: translateY(-2px); box-shadow: 0 24px 40px -32px rgba(27, 26, 23, .5); }
.fi-ic, .feat-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--green-wash); color: var(--green); margin-bottom: 6px; }
.fi-tile[href="#ai"] .fi-ic, #ai .feat-ic { background: var(--dark); color: var(--pale); }
.fi-name { font-weight: 500; font-size: 15.5px; line-height: 1.3; }
.fi-count, .feat-count { font-size: 13px; color: var(--ink-3); }
.feat-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; margin-bottom: clamp(64px, 9vw, 120px); }
.feat-side { position: sticky; top: 92px; }
.feat-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.feat-side .fs-group { margin: 18px 0 6px; padding-left: 10px; }
.feat-side .fs-group:first-child { margin-top: 0; }
.feat-side a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-size: 15px; transition: background .2s, color .2s; }
.feat-side a .ic { width: 18px; height: 18px; color: var(--ink-3); transition: color .2s; }
.feat-side a:hover { background: var(--paper-2); color: var(--ink); }
.feat-side a.on { background: var(--green-wash); color: var(--ink); }
.feat-side a.on .ic { color: var(--green); }
.feat-groups { display: grid; gap: 0; }
.feat-group-title { margin: 48px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.feat-group-title:first-child { margin-top: 0; }
.feat { padding: 30px 0 34px; border-bottom: 1px solid var(--line-2); scroll-margin-top: 84px; }
.feat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.feat-head .feat-ic { margin: 0; width: 44px; height: 44px; }
.feat-head h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 0; flex: 1; max-width: none; }
.feat ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.feat li { padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.feat li b { color: var(--ink); font-weight: 600; }
.feat-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
@media (max-width: 1080px) { .fi-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .feat-layout { grid-template-columns: 1fr; } .feat-side { display: none; } }
@media (max-width: 700px) { .fi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feat ul { grid-template-columns: 1fr; } }

/* ═════════ 2026-11-05 (sen kväll): klickbara exempel, regler eller AI, Utvecklad i Norrland ═════════ */

/* ───── AI-kortet: klickbara exempel och verifikationen som byggs */
.chat-picks { display: grid; gap: 6px; }
button.chat-item { all: unset; box-sizing: border-box; display: block; cursor: pointer; padding: 8px 12px; background: rgba(0,0,0,.25); border-radius: 8px; font-size: 14.5px; color: var(--dark-ink); border: 1px solid transparent; transition: background .25s, border-color .25s, transform .25s var(--spring); }
button.chat-item:hover { background: rgba(255,255,255,.08); }
button.chat-item.on { border-color: var(--pale-line); background: rgba(168,216,209,.14); transform: translateX(3px); }
button.chat-item:focus-visible { outline: 2px solid var(--pale); outline-offset: 2px; }
.ex-card { margin-top: 14px; background: var(--card); color: var(--ink); border-radius: 12px; padding: 16px 18px 14px; display: grid; gap: 8px; }
.ex-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.ex-ref { font: 600 11px/1 var(--mono); color: var(--green); }
.ex-title { font-family: var(--serif); font-size: 17px; }
.ex-sum { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 14px; }
.ex-why { margin: 0; font-size: 13.5px; color: var(--ink-2); background: var(--green-wash); padding: 8px 10px; border-radius: 8px; line-height: 1.45; }
.ex-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ex-rows li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 70px 70px; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; transition: opacity .4s var(--out), transform .4s var(--out); }
.ex-rows li b { font: 500 12px var(--mono); color: var(--green); }
.ex-rows li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-rows li i { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.ex-note { margin: 0; font-size: 12px; color: var(--ink-3); }
.ex-card.swap-out .ex-rows li, .ex-card.swap-out .ex-why { opacity: 0; transform: translateX(-8px); }
.ex-card .ex-rows li.wait { opacity: 0; transform: translateX(-8px); }

/* ───── Regler eller AI */
.rules { padding: clamp(64px, 9vw, 120px) 0; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.rule-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: grid; gap: 12px; align-content: start; }
.rule-card.ai-side { background: var(--dark); color: var(--dark-ink); border-color: var(--dark); }
.rule-card.ai-side h3 { color: #fff; }
.rule-card.ai-side p, .rule-card.ai-side li { color: var(--dark-ink-2); }
.rule-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rule-tag { font: 500 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.ai-side .rule-tag { color: var(--pale); }
.rule-count { display: grid; justify-items: end; text-align: right; }
.rule-count b { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4vw, 52px); line-height: 1; font-variant-numeric: tabular-nums; }
.rule-count span { font-size: 12.5px; color: var(--ink-3); }
.ai-side .rule-count span { color: var(--dark-ink-2); }
.rule-card h3 { font-size: 23px; }
.rule-card p { margin: 0; color: var(--ink-2); font-size: 16px; }
.rule-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.rule-list li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-2); }
.rule-list li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 10px; height: 5px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.ai-side .rule-list li::before { border-color: var(--pale); }
/* Strömmen av underlag som aldrig tar slut */
.rule-stream { display: flex; gap: 8px; margin-top: 10px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.rule-stream .track { display: flex; gap: 8px; flex: none; animation: stream 14s linear infinite; }
.rule-stream span { flex: none; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--green-wash); color: var(--green-2); }
@keyframes stream { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 4px)); } }
.ai-meter-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 10px; }
.ai-meter-bar span { display: block; height: 100%; width: 100%; background: var(--pale); transform-origin: left; transition: transform .6s var(--out); }
@media (max-width: 860px) { .rules-grid { grid-template-columns: 1fr; } }

/* ───── Utvecklad i Norrland */
.north { position: relative; background: linear-gradient(180deg, #0D1817 0%, #12201F 55%); color: var(--dark-ink); padding: 0 0 clamp(56px, 8vw, 96px); overflow: hidden; }
.north-scene { position: relative; height: clamp(260px, 34vw, 420px); }
.north-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.north .stars circle { fill: #EDF3F2; opacity: .55; animation: twinkle 3.6s ease-in-out infinite; }
.north .stars circle:nth-child(2n) { animation-delay: 1.2s; } .north .stars circle:nth-child(3n) { animation-delay: 2.1s; }
@keyframes twinkle { 50% { opacity: .15; } }
.north .aur { transform-origin: center; animation: aurora 14s ease-in-out infinite alternate; opacity: .9; }
.north .aur.a2 { animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes aurora { 0% { transform: translateX(-4%) scaleY(.9); opacity: .6; } 50% { opacity: 1; } 100% { transform: translateX(4%) scaleY(1.15); opacity: .75; } }
.north .ridge { stroke-linejoin: round; }
.north .ridge.far { fill: #1B3130; stroke: #2E4A48; stroke-width: 1.5; }
.north .ridge.near { fill: #142625; stroke: #3B5C59; stroke-width: 1.5; }
.north .river { fill: none; stroke: var(--pale-line); stroke-width: 2; opacity: .7; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.north .trees path { fill: #0E1B1A; stroke: #3B5C59; stroke-width: 1; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.north-scene.on .river { transition: stroke-dashoffset 2.6s var(--out) .4s; stroke-dashoffset: 0; }
.north-scene.on .trees path { transition: transform .7s var(--spring); transform: scaleY(1); }
.north-scene.on .trees path:nth-child(1) { transition-delay: .5s; } .north-scene.on .trees path:nth-child(2) { transition-delay: .6s; }
.north-scene.on .trees path:nth-child(3) { transition-delay: .7s; } .north-scene.on .trees path:nth-child(4) { transition-delay: .8s; }
.north-scene.on .trees path:nth-child(5) { transition-delay: .9s; } .north-scene.on .trees path:nth-child(6) { transition-delay: 1s; }
.north-scene.on .trees path:nth-child(7) { transition-delay: 1.1s; } .north-scene.on .trees path:nth-child(8) { transition-delay: 1.2s; }
.north-scene.on .trees path:nth-child(9) { transition-delay: 1.3s; } .north-scene.on .trees path:nth-child(10) { transition-delay: 1.4s; }
.north-scene.on .trees path:nth-child(11) { transition-delay: 1.5s; } .north-scene.on .trees path:nth-child(12) { transition-delay: 1.6s; }
.north-coord { position: absolute; left: max(clamp(18px, 4vw, 40px), calc((100% - var(--wrap)) / 2)); bottom: 18px; font: 12px var(--mono); letter-spacing: .06em; color: var(--dark-ink-2); }
.north-coord b { font-weight: 500; color: var(--pale); }
.north-copy { position: relative; margin-top: -10px; }
.north-copy h2 { color: #fff; }
.north-copy .eyebrow { color: var(--pale); }
.north-copy .lede { color: var(--dark-ink-2); }
@media (prefers-reduced-motion: reduce) {
  .north .aur, .north .stars circle, .rule-stream .track { animation: none; }
  .north .river { stroke-dashoffset: 0; } .north .trees path { transform: none; }
}
.le-mode .north .river { stroke-dashoffset: 0; } .le-mode .north .trees path { transform: none; }
/* Stenstaden mellan stadsbergen (2026-11-05): lagren glider i olika takt när man scrollar (--np sätts av alt2.js, -1 till 1),
   takprofilen ritas som en linje, fönstren tänds ett i taget, vågor och en ångbåt rör sig långsamt. */
.north .px { will-change: transform; }
.north .px-sky  { transform: translateY(calc(var(--np, 0) * -14px)); }
.north .px-far  { transform: translateY(calc(var(--np, 0) * 16px)); }
.north .px-near { transform: translateY(calc(var(--np, 0) * 9px)); }
.north .px-city { transform: translateY(calc(var(--np, 0) * 4px)); }
.north .px-far .ridge { animation: drift 26s ease-in-out infinite alternate; }
.north .px-near .ridge { animation: drift 34s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
.north .city { fill: #10201F; stroke: var(--pale); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.north .spires path { stroke: var(--pale); stroke-width: 1.4; stroke-linecap: round; opacity: 0; }
.north-scene.on .city { transition: stroke-dashoffset 3.2s var(--out) .3s, fill-opacity 1.4s ease 2.6s; stroke-dashoffset: 0; fill-opacity: 1; }
.north-scene.on .spires path { transition: opacity .6s ease 3s; opacity: .9; }
.north .wins rect { fill: #F2E2A8; opacity: 0; }
.north-scene.on .wins rect { animation: win 11s ease-in-out infinite; }
@keyframes win { 0%, 8% { opacity: 0; } 14%, 70% { opacity: .9; } 74% { opacity: .35; } 78%, 88% { opacity: .85; } 100% { opacity: 0; } }
.north-scene.on .wins rect:nth-child(1) { animation-delay: 3.4s; } .north-scene.on .wins rect:nth-child(2) { animation-delay: 5.1s; }
.north-scene.on .wins rect:nth-child(3) { animation-delay: 4.2s; } .north-scene.on .wins rect:nth-child(4) { animation-delay: 3.6s; animation-duration: 14s; }
.north-scene.on .wins rect:nth-child(5) { animation-delay: 6.3s; } .north-scene.on .wins rect:nth-child(6) { animation-delay: 4.7s; animation-duration: 9s; }
.north-scene.on .wins rect:nth-child(7) { animation-delay: 7.2s; } .north-scene.on .wins rect:nth-child(8) { animation-delay: 3.9s; animation-duration: 13s; }
.north-scene.on .wins rect:nth-child(9) { animation-delay: 5.6s; } .north-scene.on .wins rect:nth-child(10) { animation-delay: 8.1s; }
.north-scene.on .wins rect:nth-child(11) { animation-delay: 3.5s; animation-duration: 15s; } .north-scene.on .wins rect:nth-child(12) { animation-delay: 6.8s; }
.north-scene.on .wins rect:nth-child(13) { animation-delay: 4.4s; animation-duration: 10s; } .north-scene.on .wins rect:nth-child(14) { animation-delay: 7.7s; }
.north-scene.on .wins rect:nth-child(15) { animation-delay: 5.3s; } .north-scene.on .wins rect:nth-child(16) { animation-delay: 3.8s; animation-duration: 16s; }
.north-scene.on .wins rect:nth-child(17) { animation-delay: 6.0s; } .north-scene.on .wins rect:nth-child(18) { animation-delay: 8.6s; animation-duration: 12s; }
.north-scene.on .wins rect:nth-child(19) { animation-delay: 4.9s; } .north-scene.on .wins rect:nth-child(20) { animation-delay: 7.0s; animation-duration: 9.5s; }
.north .river { stroke-width: 1.2; }
.north .city-reflect { stroke: var(--pale); stroke-width: 1; stroke-dasharray: 3 7; opacity: 0; fill: none; }
.north-scene.on .city-reflect { transition: opacity 1.2s ease 3s; opacity: .35; animation: shimmer 6s linear infinite; }
.north .waves path { fill: none; stroke: var(--pale); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 14 22; opacity: .18; animation: shimmer 9s linear infinite; }
.north .waves path:nth-child(2n) { animation-duration: 13s; animation-direction: reverse; opacity: .12; }
@keyframes shimmer { to { stroke-dashoffset: -72; } }
.north .boat { transform: translate(-80px, 368px); animation: boat 70s linear infinite; }
.north .boat path { fill: #10201F; stroke: var(--pale); stroke-width: 1.2; stroke-linejoin: round; }
.north .boat .puff { fill: var(--pale); opacity: .25; animation: puff 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes boat { from { transform: translate(-80px, 368px); } to { transform: translate(1260px, 368px); } }
@keyframes puff { from { transform: translate(0, 4px) scale(.4); opacity: .35; } to { transform: translate(-14px, -10px) scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .north .px { transform: none; }
  .north .ridge, .north .waves path, .north .city-reflect, .north .boat .puff, .north-scene.on .wins rect { animation: none; }
  .north .city { stroke-dashoffset: 0; fill-opacity: 1; } .north .spires path { opacity: .9; }
  .north .wins rect:nth-child(3n) { opacity: .85; } .north .city-reflect { opacity: .35; }
  .north .boat { animation: none; transform: translate(880px, 368px); }
}
.le-mode .north .px { transform: none; }
.le-mode .north .city { stroke-dashoffset: 0; fill-opacity: 1; } .le-mode .north .spires path { opacity: .9; }

/* ───── /ladda-ner: Microsoft Store eller direkt från Numera (2026-11-05) */
.dl-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 4vw, 40px); max-width: 860px; margin-left: max(clamp(18px, 4vw, 40px), calc((100% - var(--wrap)) / 2)); }
.dl-hero .lede { margin-top: 18px; }
.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-bottom: clamp(48px, 7vw, 88px); }
.dl-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: grid; gap: 12px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.dl-card h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0; }
.dl-card p { margin: 0; color: var(--ink-2); }
.dl-tag { justify-self: start; font: 500 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--green); background: var(--green-wash); padding: 4px 10px; border-radius: 999px; }
.dl-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.dl-list li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15.5px; }
.dl-list li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 10px; height: 5px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.dl-actions { display: grid; gap: 10px; margin-top: 8px; }
.dl-actions .btn small { font-size: 12.5px; color: var(--ink-2); font-weight: 400; margin-left: 6px; }
.dl-actions .btn { white-space: normal; text-align: center; }
.dl-actions .small-link { text-align: left; flex-basis: auto; }
.btn.disabled { cursor: default; color: var(--ink-3); border-color: var(--line-2); }
.btn.disabled:hover { background: transparent; color: var(--ink-3); }
.dl-note { margin-top: 4px; }
.dl-more { margin-bottom: clamp(64px, 9vw, 120px); }
.dl-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.dl-jump a { font: 500 14.5px/1 var(--sans); color: var(--ink); text-decoration: none; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .55); transition: border-color .2s, background .2s; }
@media (hover: hover) { .dl-jump a:hover { border-color: var(--green); background: #fff; } }
.dl-sub { padding-top: 0; }
.dl-sub h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 0; }
#mac, #iphone, #windows { scroll-margin-top: 90px; }
@media (max-width: 860px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } }

/* ═════════ 2026-11-05 morgon: kontonamn i juni, kortare och mörk 25-ruta, Norrland fortsätter ═════════ */
.jl-rows li { grid-template-columns: 34px 46px minmax(0, 1fr) 84px 72px; }
.jl-text { display: grid; gap: 1px; white-space: normal; }
.jl-text > :first-child, .jl-text { overflow: hidden; text-overflow: ellipsis; }
.jl-text small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jl-text small b { font: 500 11px var(--mono); color: var(--green); margin-right: 3px; }
@media (max-width: 640px) { .jl-rows li { grid-template-columns: 30px minmax(0, 1fr) 70px 62px; } }

.why25 { background: var(--dark); border-color: var(--dark); color: var(--dark-ink); max-width: 620px; padding: 20px 24px; }
.why25 h3 { color: #fff; font-size: 19px; margin-bottom: 6px; }
.why25 p { color: var(--dark-ink-2); font-size: 15px; }

.north { padding-bottom: 0; }
.north-copy { padding-bottom: clamp(48px, 7vw, 80px); }
.north-next { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: var(--dark-ink); font-size: 15px; transition: background .25s, border-color .25s; }
.north-next:hover { background: rgba(255,255,255,.08); border-color: var(--pale); }
.north-next .chev { display: inline-block; color: var(--pale); animation: chev 1.8s ease-in-out infinite; }
@keyframes chev { 50% { transform: translateY(4px); } }
/* Övergången tillbaka till papperet visar att sidan fortsätter. */
.north-fade { height: clamp(56px, 8vw, 96px); background: linear-gradient(180deg, #12201F 0%, var(--paper) 100%); }
@media (prefers-reduced-motion: reduce) { .north-next .chev { animation: none; } }

/* ───── Skalningsfixar (Pontus 2026-11-05) */
.price-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 40px; }
.price-main { min-width: 0; }
.price-side { justify-items: end; max-width: 300px; }
.how-steps { padding: 6vh 0 12vh; gap: clamp(48px, 7vw, 96px); }
.get-it { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
.get-links .small-link { flex-basis: 100%; }
@media (max-width: 980px) {
  .get-it { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .price-strip { grid-template-columns: 1fr; }
  .price-side { justify-items: start; max-width: none; }
  .get-links .btn { width: 100%; justify-content: center; }
}
.north-copy { margin-top: 0; padding-top: clamp(28px, 4vw, 48px); }
.jl-text small { white-space: normal; overflow: visible; }
.jl-text { text-overflow: clip; }
.jl-text small { overflow-wrap: anywhere; hyphens: auto; }

/* Byt till Numera (/byt-till-numera, 2026-11-05): tre kort i bredd, numrerade steg */
.switch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.switch-grid .dl-card h2 { font-size: 1.15rem; }
.switch-steps { list-style: decimal; padding-left: 1.2em; }
.switch-steps li { padding-left: 4px; }
.switch-steps li::before { content: none; }
.switch-page .dl-more { margin-bottom: clamp(28px, 4vw, 48px); }
@media (max-width: 1080px) { .switch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .switch-grid { grid-template-columns: 1fr; } }

/* ───── 2026-11-10: produkten direkt under hjälten. Film ur den riktiga appen, plattformsraden och fyra bilder. */
.shots { padding-top: clamp(40px, 6vw, 80px); }
.desk-shot { position: relative; }

.platforms { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.platforms a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .55); color: var(--ink); text-decoration: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s, background .2s, box-shadow .2s; }
@media (hover: hover) { .platforms a:hover { transform: translateY(-2px); border-color: var(--green); background: #fff; box-shadow: 0 14px 30px -22px rgba(27, 26, 23, .5); }
.platforms svg { flex: none; color: var(--green); transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); }
.platforms a:hover svg { transform: scale(1.12); } }
.platforms li { display: flex; }
.platforms a { flex: 1; min-width: 0; }
.platforms span { display: grid; gap: 2px; min-width: 0; }
.platforms b { font-weight: 600; font-size: 16px; }
.platforms i { font-style: normal; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.platforms-note { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.platforms.in li { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.platforms.in.on li { opacity: 1; transform: none; }
.platforms.in.on li:nth-child(2) { transition-delay: .07s; } .platforms.in.on li:nth-child(3) { transition-delay: .14s; } .platforms.in.on li:nth-child(4) { transition-delay: .21s; }
@media (max-width: 860px) { .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .platforms a { padding: 13px 12px; gap: 10px; } .platforms b { font-size: 15px; } }

/* Allt som ingår: de sex viktigaste syns, resten fälls ut. */
.ledger-more { border-bottom: 1px solid var(--line-2); }
.ledger-more > summary { font-size: 19px; }
.ledger-more > summary:hover { color: var(--green); }
.ledger-more .ledger { border-top: 1px solid var(--line-2); }
.ledger-more .ledger-row:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 860px) { .ledger-more .ledger-row:nth-last-child(2) { border-bottom: 1px solid var(--line-2); } }
@media (prefers-reduced-motion: reduce) { .platforms a, .platforms svg, .platforms.in li { transition: none; } }

/* ───── Så lätt är det i mobilen (2026-11-10). Grundregeln för .how-grid stod efter brytpunkten och vann, så
   panelen och stegen hamnade bredvid varandra och panelen flöt ut över texten. Här: en kolumn, panelen (förslaget)
   överst och lika hög som sitt innehåll, stegen under. */
@media (max-width: 980px) {
  .how-grid, .price-grid { grid-template-columns: minmax(0, 1fr); }
  .how-grid { gap: 8px; }
  .how-sticky { position: static; }
  .how-stage { aspect-ratio: auto; display: grid; transform: none !important; }
  .how-stage .step-panel { position: relative; inset: auto; grid-area: 1 / 1; }
  .how-stage .step-panel:not(.on) { visibility: hidden; }
  .how-stage .ph { position: relative; inset: auto; }
}
@media (max-width: 640px) {
  .ph-row { white-space: normal; flex-wrap: wrap; }
  .ph-row i { white-space: nowrap; }
}

/* ───── Filmen under plattformsraden (2026-11-10). Startar själv, utan ljud, i en loop. */
.film { margin: clamp(28px, 4vw, 48px) 0 0; }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 16px; background: #0D1817; box-shadow: 0 40px 80px -55px rgba(27, 26, 23, .45); }
.film figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 760px) {
  .film-video { aspect-ratio: 4 / 5; border-radius: 14px; }
}

/* ───── Mobilen: mindre information (Pontus 2026-11-10). På en telefon visas rubrikerna, en bild eller demo per
   avsnitt och det man behöver för att bestämma sig. Fördjupningen finns kvar på datorn och under Alla funktioner.
   Allt här är bara dolt med CSS, så texterna går fortfarande att redigera i admin. */
@media (max-width: 640px) {
  section, .why, .switch, .ai, .june, .pricing, .trust, .faq { scroll-margin-top: 70px; }
  .shots, .easy, .all, .faq, .trust, .rules { padding-bottom: 56px; }
  .why, .switch, .ai, .june, .pricing { padding-top: 56px; padding-bottom: 56px; }
  h1 { font-size: 40px; }
  h2 { font-size: 29px; }
  .lede { font-size: 17px; }

  /* Hjälten: text, knappar och pris. Kvittoscenen visas redan i demon och filmen längre ner. */
  .hero .scene-wrap, .hero .ex-vat, .hero .fine { display: none; }
  .price-strip, .also { display: none; }

  /* Så ser det ut */
  .shot-caption, .platforms-note, .film figcaption { display: none; }

  /* Varför Numera finns: rubriken och tre korta påståenden. */
  .why-text, .why-list li span { display: none; }

  /* Byt till Numera: programmen och tre steg, utan importfilmen och det finstilta. */
  .switch .lede, .import-demo, .switch .fine { display: none; }

  /* Så lätt är det: stegen räcker, filmen visar resten. */
  .easy .lede, .how-sticky, .hand { display: none; }
  .how-grid { border-top: 0; padding-top: 0; }
  .how-steps { padding: 0; gap: 26px; }

  /* AI: texten och chatten, utan exempelverifikationen. */
  .ex-card, .ai-points { display: none; }
  .rules .lede, .rule-list, .rule-stream, .rule-card p { display: none; }
  .june .lede, .june-ledger, .june-fine { display: none; }

  /* Allt som ingår: bara rubrikerna, som en lista. */
  .ledger-row p { display: none; }
  .ledger-row { padding: 14px 0; }
  .ledger-row h3 { margin: 0; font-size: 19px; }

  /* Pris: kortet först, listan över vad som ingår finns i Allt som ingår. */
  .pricing .lede, .price-grid .includes, .why25 { display: none; }

  /* Säkerhet: första stycket räcker. */
  .trust-text p + p { display: none; }
}

/* ═════════ 2026-11-11 (Pontus): filmen i hjälten bredvid rubriken, kvittoscenen borta. Kortare mobilsida. ═════════ */
.hero { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.hero-film { margin: 0; }
.hero-film .film-video { border-radius: 18px; box-shadow: 0 50px 90px -60px rgba(27, 26, 23, .55); }
.hero-film figcaption { font-size: 14px; }
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-film { max-width: 760px; }
}

/* Webbplatsens egna sidor: Hjälp och kontakt (/hjalp) och Dataskydd (/dataskydd). */
.doc { padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 9vw, 112px); }
.doc h1 { margin: 6px 0 0; }
.doc .lede { margin-top: 16px; }
.doc h2 { font-size: clamp(24px, 2.4vw, 30px); margin: clamp(36px, 5vw, 52px) 0 12px; }
.doc p { color: var(--ink-2); line-height: 1.6; margin: 0 0 12px; }
.doc code { font: 500 .88em var(--mono); background: var(--paper-2); padding: 1px 6px; border-radius: 6px; color: var(--ink); }
.doc-box { margin: 26px 0 0; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.doc-box p { margin: 0; }
.doc-box.contact { display: grid; gap: 14px; justify-items: start; }
.doc-list, .doc-links { margin: 0 0 12px; padding-left: 1.2em; color: var(--ink-2); line-height: 1.6; display: grid; gap: 6px; }
.doc-q { border-bottom: 1px solid var(--line-2); }
.doc-q:first-of-type { border-top: 1px solid var(--line-2); }
.doc-q summary { cursor: pointer; list-style: none; padding: 15px 30px 15px 0; position: relative; font: 400 19px/1.35 var(--serif); color: var(--ink); }
.doc-q summary::-webkit-details-marker { display: none; }
.doc-q summary::after { content: "+"; position: absolute; right: 2px; top: 13px; font: 300 22px var(--sans); color: var(--ink-3); transition: transform .25s; }
.doc-q[open] summary::after { transform: rotate(45deg); }
.doc-q p { padding-bottom: 6px; }
.doc h2 + .doc-q { border-top: 1px solid var(--line-2); }

/* Byt till Numera (/byt-till-numera): guiden lånade klassnamnen .switch-grid och .switch-steps från startsidans
   byt-avsnitt, där varje li är ett rutnät med en smal sifferkolumn. Därför bröts texten ett ord per rad. Här gäller
   vanliga numrerade listor och korten börjar uppe i raden. */
.switch-page .switch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(16px, 2vw, 24px); margin-bottom: clamp(40px, 6vw, 72px); }
.switch-page .switch-grid .dl-card { padding: 22px 22px 20px; gap: 10px; }
.switch-page .switch-grid .dl-card h2 { font-size: 1.2rem; line-height: 1.25; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.switch-page .switch-steps { display: block; list-style: decimal; margin: 0; padding: 0 0 0 1.25em; border: 0; }
.switch-page .switch-steps li { display: list-item; padding: 0 0 8px 4px; border: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.switch-page .switch-steps li::marker { color: var(--green); font-weight: 600; }
.switch-page .dl-more .switch-steps li { font-size: 16.5px; padding-bottom: 12px; }
.switch-page .dl-more h2 { margin-bottom: 10px; }
.switch-page .dl-hero { padding-bottom: 8px; }
@media (max-width: 1080px) { .switch-page .switch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .switch-page .switch-grid { grid-template-columns: 1fr; } }

/* Mobilen, ännu kortare (2026-11-11). Filmen i hjälten och demon visar hur det fungerar, så avsnitten som förklarar
   samma sak med text och animationer döljs. Allt finns kvar på datorn och under Alla funktioner. */
@media (max-width: 640px) {
  .hero { padding-top: 28px; padding-bottom: 8px; gap: 24px; }
  .hero .cta-row { margin: 22px 0 12px; }
  .hero-film .film-video { max-height: 70vh; width: auto; max-width: 100%; margin: 0 auto; }
  .easy, .rules, .june { display: none; }
  .north-scene, .north-next, .north-fade { display: none; }
  .north-copy { padding-top: 0; padding-bottom: 0; }
  .north { padding: 48px 0; }
  .faq-list details:nth-of-type(n+7) { display: none; }
  .shots { padding-top: 32px; }
  .toggle button { font-size: 13.5px; padding: 10px 6px; white-space: nowrap; }
  .why-list li { padding: 12px 0; }
  .closing { padding-top: 40px; }
}
/* Stegen 1 till 3 i samma vänsterkant som rubriken och korten. */
.switch-page .dl-more.narrow { width: min(var(--wrap), calc(100% - 2 * clamp(18px, 4vw, 40px))); }
.switch-page .dl-more > * { max-width: 760px; }

/* ───── Knappen för ljust eller mörkt läge (2026-11-11): byter till den mörka sidan, se sites/shared/theme.js */
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.theme-toggle:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-3); }
.le-mode .theme-toggle { display: none; }