/* Advesign – Tjänster och priser (tjanster.hbs), ovanpå css/k-page.css. Laddas bara där.
   Byggd ur Open Design-projektet "Tjänster och priser sida" (runda 1). */

.svc-hero h1 { max-width: 15ch; }
.svc-hero .lede { max-width: 40ch; }
.stairs-figure { margin: 0; display: grid; gap: var(--s-3); justify-self: center; width: min(100%, 560px); }
.stairs { display: block; width: 100%; height: auto; overflow: visible; }
.stairs text { font-family: var(--font-body); }
.stairs .ground { stroke: var(--c-lilac); stroke-width: 2; stroke-linecap: round; }
.stairs .prof { fill: none; stroke: var(--c-lilac); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.stairs .stair-1 .prof { stroke: var(--c-lime); }
.stairs .hatch { fill: url(#stair-hatch); }
.stairs .hatch-line { stroke: rgba(217, 194, 255, 0.3); stroke-width: 1.2; }
.stairs .dimln { fill: none; stroke: rgba(217, 194, 255, 0.6); stroke-width: 1; }
.stairs .dimtxt { fill: rgba(255, 255, 255, 0.76); font-size: 11px; }
.stairs .title-txt { fill: var(--c-lilac); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; }
.stairs .s-kicker { fill: var(--c-lilac); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; }
.stairs .s-name { fill: var(--c-white); font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.stairs .s-price { fill: var(--c-lime); font-size: 13px; font-weight: 700; }
.stairs .s-pill { fill: none; stroke: var(--c-lime); stroke-width: 1.2; }
.stairs .s-pill-txt { fill: var(--c-lime); font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; }
.stairs .hit { fill: transparent; stroke: transparent; stroke-width: 2; stroke-dasharray: 4 4; }
.stairs .stair { cursor: pointer; outline: none; }
.stairs .stair:focus-visible .hit { stroke: var(--c-lime); }
@media (hover: hover) {
  .stairs .stair:hover .s-name { fill: var(--c-lime); }
}
.stairs .prof { transition: stroke-dashoffset 360ms var(--ease-out) calc(var(--i, 0) * 300ms); }
.stairs .hatch, .stairs .s-lbl { transition: opacity 300ms var(--ease-out) calc(var(--i, 0) * 300ms + 220ms); }
.js .stairs .prof { stroke-dasharray: 100; stroke-dashoffset: 100; }
.js .stairs .hatch, .js .stairs .s-lbl { opacity: 0; }
.js .stairs.is-drawn .prof { stroke-dashoffset: 0; }
.js .stairs.is-drawn .hatch, .js .stairs.is-drawn .s-lbl { opacity: 1; }
.stairs-caption { font-size: var(--fs-small); color: var(--fg-muted); }
.picker { align-items: stretch; }
.q-list { list-style: none; margin: 0; padding: 0; display: grid; }
.q { margin: 0; padding: var(--s-4) 0; border: 0; border-top: 1px solid var(--c-border); display: grid; gap: var(--s-3); min-width: 0; }
.q-list > li:first-child .q { border-top: 0; padding-top: 0; }
.q-legend { padding: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-2); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--c-ink); }
.q-num { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--c-accent); padding-top: 4px; }
.yn { display: flex; gap: var(--s-2); padding-left: 40px; }
.yn label { position: relative; display: block; }
.yn input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.yn-face { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-width: 96px; min-height: 48px; padding: 0 var(--s-5); border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: var(--c-surface); color: var(--c-ink); font-weight: 700; letter-spacing: 0.02em; transition: background-color var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro); }
.yn-face .od-icon { --od-icon-size: 16px; display: none; }
.yn input:checked + .yn-face { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.yn input:checked + .yn-face .od-icon { display: block; color: var(--c-lime); }
.yn input:focus-visible + .yn-face { outline: 3px solid var(--c-accent); outline-offset: 2px; }
@media (hover: hover) {
  .yn input:not(:checked):hover + .yn-face { border-color: var(--c-accent); color: var(--c-accent); }
}
.pick-out { min-height: 300px; }
.pick-progress { font-size: var(--fs-small); font-weight: 700; color: var(--c-ink); }
.pick-result { display: grid; gap: var(--s-4); align-content: start; }
.pick-kicker { font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); }
.pick-name { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1.05; letter-spacing: -0.035em; }
.pick-price { font-weight: 700; white-space: nowrap; }
.pick-why { font-size: 1.0625rem; color: var(--c-ink); }
.pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.pick-actions .link-arrow { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; color: var(--c-ink); cursor: pointer; }
.pick-note { font-size: var(--fs-small); color: var(--c-muted-strong); }
.js .pick-result.is-fresh { animation: pickIn 300ms var(--ease-out) 1; }
@keyframes pickIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pkg-rail { --od-gap: 16px; --od-rail-pad: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: var(--s-2) var(--gutter) var(--s-3); scroll-padding-inline: var(--gutter); }
.pkg-rail > .pkg { width: min(86vw, 380px); }
.pkg { position: relative; scroll-margin-top: calc(var(--header-h) + var(--s-4)); transition: border-color var(--dur-micro), box-shadow var(--dur-micro); }
.pkg:focus { outline: none; }
.pkg:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.pkg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 28px; }
.pkg-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
.badge { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 28px; padding: 0 var(--s-3); border: 1px solid var(--c-accent); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); white-space: nowrap; }
.badge .od-icon { --od-icon-size: 12px; }
.badge-pick { background: var(--c-accent); color: var(--c-white); }
.pkg.is-recommended { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent), 0 24px 48px -28px rgba(128, 81, 213, 0.55); }
.pkg-price { display: grid; gap: 2px; }
.pkg-price > * { display: block; }
.pkg-price-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; }
.pkg-price-note { font-size: var(--fs-small); color: var(--c-muted); }
.pkg-list-title, .pkg-meta-title { font-size: var(--fs-small); font-weight: 700; color: var(--c-muted); }
.pkg-block { display: grid; gap: var(--s-2); }
.pkg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pkg-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-2); font-size: 0.9375rem; line-height: 1.45; }
.pkg-list .od-icon { --od-icon-size: 16px; margin-top: 3px; color: var(--c-accent); }
.pkg-list li.is-base { font-weight: 700; }
.pkg-meta { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.pkg-meta p { font-size: 0.9375rem; line-height: 1.45; }
.pkg-cta { margin-top: var(--s-2); }
.pkg-cta .btn { width: 100%; }
.rail-hint { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--c-muted); }
@media (min-width: 1024px) {
  .pkg-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); overflow: visible; margin-inline: 0; padding: 0; }
  .pkg-rail > .pkg { width: auto; }
  .pkg-rail > :last-child { margin-inline-end: 0; }
  .rail-hint { display: none; }
}
.pkg .mm { gap: var(--s-2); }
.mm-fill { display: block; height: 100%; width: calc(var(--w, 1) * 100%); border-radius: inherit; background: rgba(116, 107, 132, 0.6); transform-origin: left center; }
.job-row.is-loss .mm-fill { background: var(--c-neg-on-light); }
.job-row-bar { overflow: hidden; }
.mm-funnel .job-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
.mm-funnel .is-won .mm-fill { background: var(--c-accent); }
.mm-funnel .is-won .job-row-name { font-weight: 700; color: var(--c-accent); }
.mm-alarm { display: flex; align-items: center; gap: var(--s-2); max-width: none; padding: var(--s-2) var(--s-3); border-radius: 10px; background: rgba(194, 51, 77, 0.08); color: var(--c-neg-on-light); font-size: 0.8125rem; font-weight: 700; line-height: 1.35; }
.mm-alarm .od-icon { --od-icon-size: 16px; flex: none; }
.qplan { display: grid; grid-template-columns: 92px repeat(3, minmax(0, 1fr)); align-items: center; row-gap: var(--s-2); font-size: 0.8125rem; }
.qplan-h { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--c-muted-strong); text-align: center; padding-bottom: var(--s-1); border-bottom: 1px solid rgba(116, 107, 132, 0.2); }
.qplan-h:first-child { text-align: left; }
.qplan-name { grid-column: 1; line-height: 1.3; }
.qplan-bar { display: block; height: 8px; border-radius: 4px; background: rgba(116, 107, 132, 0.6); transform-origin: left center; margin-inline: 2px; }
.qplan-bar.is-accent { background: var(--c-accent); }
.qplan-ms { display: block; justify-self: end; width: 10px; height: 10px; margin-right: 4px; background: var(--c-accent); transform: rotate(45deg); }
.mm .mm-fill, .mm .qplan-bar { transition: transform 400ms var(--ease-out) calc(var(--i, 0) * 80ms + 120ms); }
.mm .mm-alarm, .mm .qplan-ms { transition: opacity 300ms var(--ease-out) 560ms, transform 300ms var(--ease-out) 560ms; }
.js .mm .mm-fill, .js .mm .qplan-bar { transform: scaleX(0); }
.js .mm .mm-alarm { opacity: 0; transform: translateY(6px); }
.js .mm .qplan-ms { opacity: 0; }
.js .mm.is-in .mm-fill, .js .mm.is-in .qplan-bar { transform: scaleX(1); }
.js .mm.is-in .mm-alarm { opacity: 1; transform: none; }
.js .mm.is-in .qplan-ms { opacity: 1; transform: rotate(45deg); }
.get-grid { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 1024px) {
  .get-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-8); }
}
.dash-fig { margin: 0; display: grid; gap: var(--s-3); }
.dash { border-radius: var(--radius-card); background: var(--c-white); color: var(--c-ink); overflow: hidden; box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.6); }
.dash-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.dash-title { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; }
.dash-body { display: grid; gap: var(--s-5); padding: var(--s-5); }
@media (min-width: 768px) {
  .dash-body { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--s-4); }
}
.anno { display: grid; grid-template-rows: auto auto 1fr; align-content: start; }
.callout { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-2); align-items: start; color: var(--c-accent); }
.callout-id { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 50%; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; }
.callout-text { display: grid; gap: 2px; }
.callout-text > * { display: block; }
.callout-name { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.callout-desc { font-size: 0.8125rem; line-height: 1.4; color: var(--c-ink); }
.leader { display: block; position: relative; width: 1.5px; height: 28px; margin-left: 11px; background: var(--c-accent); transform-origin: top center; }
.leader::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--c-accent); }
.dash-panel { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-white); }
.panel-title { display: flex; justify-content: space-between; gap: var(--s-2); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0; color: var(--c-muted-strong); }
.dash .job-rows .job-row:first-child { border-top: 0; }
.dash .job-row { grid-template-columns: minmax(0, 1fr) 64px auto; }
.cash { display: block; width: 100%; height: auto; overflow: visible; }
.cash .grid-ln { stroke: var(--c-border); stroke-width: 1; }
.cash .actual { fill: none; stroke: var(--c-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cash .forecast { fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; }
.cash .now { stroke: var(--c-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.cash text { font-family: var(--font-body); font-size: 10px; fill: var(--c-muted-strong); }
.cash-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: 0.75rem; color: var(--c-muted-strong); }
.cash-legend span { display: inline-flex; align-items: center; gap: var(--s-1); }
.cash-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--c-ink); }
.cash-legend i.is-dash { border-top: 2px dashed var(--c-accent); }
.alarm-list { list-style: none; margin: 0; padding: 0; display: grid; }
.alarm-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--c-border); font-size: 0.8125rem; line-height: 1.35; }
.alarm-list li:first-child { border-top: 0; }
.alarm-list .od-icon { --od-icon-size: 16px; margin-top: 1px; color: var(--c-neg-on-light); }
.alarm-list strong { display: block; }
.dash-note { font-size: var(--fs-small); color: var(--fg-muted); }
.anno .leader { transition: transform 320ms var(--ease-out) calc(var(--i, 0) * 260ms); }
.anno .callout { transition: opacity 260ms var(--ease-out) calc(var(--i, 0) * 260ms + 200ms); }
.dash .cash .actual { transition: stroke-dashoffset 400ms var(--ease-out) 200ms; }
.js .dash-fig .leader { transform: scaleY(0); }
.js .dash-fig .callout { opacity: 0; }
.js .dash-fig .cash .actual { stroke-dasharray: 100; stroke-dashoffset: 100; }
.js .dash-fig.is-in .leader { transform: scaleY(1); }
.js .dash-fig.is-in .callout { opacity: 1; }
.js .dash-fig.is-in .cash .actual { stroke-dashoffset: 0; }
.phone-fig { margin: 0; display: grid; gap: var(--s-3); justify-items: center; }
.phone { width: min(100%, 300px); padding: 10px; border: 1px solid var(--c-rule-dark); border-radius: 44px; background: var(--c-ink); box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.7); }
.phone-screen { display: grid; align-content: start; gap: var(--s-3); min-height: 480px; padding: var(--s-3) var(--s-3) var(--s-6); border-radius: 34px; background: var(--c-surface); color: var(--c-ink); }
.phone-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 2px var(--s-3) 0; font-size: 0.75rem; font-weight: 700; }
.phone-island { width: 84px; height: 24px; border-radius: var(--radius-pill); background: var(--c-ink); }
.phone-icons { justify-self: end; display: flex; gap: 4px; }
.phone-icons .od-icon { --od-icon-size: 14px; }
.phone-clock { display: grid; justify-items: center; gap: 0; padding: var(--s-4) 0 var(--s-2); }
.phone-clock > * { display: block; }
.phone-time { font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.phone-day { font-size: 0.8125rem; color: var(--c-muted-strong); }
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.alert { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3); border-radius: 16px; background: var(--c-white); box-shadow: 0 6px 16px -10px rgba(32, 22, 58, 0.4); }
.alert-app { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--c-deep); color: var(--c-white); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; }
.alert-text { display: grid; gap: 1px; }
.alert-text > * { display: block; }
.alert-meta { display: flex; justify-content: space-between; gap: var(--s-2); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--c-muted-strong); }
.alert-title { font-size: 0.875rem; font-weight: 700; line-height: 1.3; }
.alert-body { font-size: 0.8125rem; line-height: 1.35; }
.phone-caption { font-size: var(--fs-small); color: var(--fg-muted); text-align: center; }
.alert { transition: opacity 300ms var(--ease-out) calc(var(--i, 0) * 420ms + 300ms), transform 300ms var(--ease-out) calc(var(--i, 0) * 420ms + 300ms); }
.js .phone-fig .alert { opacity: 0; transform: translateY(-16px); }
.js .phone-fig.is-in .alert { opacity: 1; transform: none; }
.calc-form { display: grid; gap: var(--s-5); align-content: start; }
.field-label .opt { font-weight: 500; color: var(--c-muted); }
.input-wrap { position: relative; display: block; }
.input-wrap .input { padding-right: 64px; }
.input-unit { position: absolute; right: var(--s-5); top: 50%; transform: translateY(-50%); font-size: 0.9375rem; font-weight: 700; color: var(--c-muted-strong); pointer-events: none; }
.calc-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.calc-out { min-height: 380px; }
.calc-formula { margin: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: 12px; background: var(--c-white); font-size: 0.9375rem; line-height: 1.5; color: var(--c-ink); max-width: none; }
.calc-formula strong { font-family: var(--font-display); }
.calc-result { display: grid; gap: var(--s-5); align-content: start; }
.calc-big-wrap { display: grid; gap: 2px; }
.calc-big-wrap > * { display: block; }
.calc-big-label { font-size: var(--fs-small); font-weight: 700; color: var(--c-muted-strong); }
.calc-big { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-share { font-size: 0.9375rem; color: var(--c-muted-strong); }
.cbars { display: grid; gap: var(--s-4); }
.cbar-row { display: grid; gap: var(--s-1); }
.cbar-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-3); font-size: 0.875rem; }
.cbar-label strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cbar { display: block; height: 14px; border-radius: var(--radius-pill); background: var(--c-border); overflow: hidden; }
.cbar-fill { display: block; height: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--k, 0)); transition: transform 400ms var(--ease-out); }
.cbar-loss .cbar-fill { background: var(--c-neg-on-light); }
.cbar-kontroll .cbar-fill { background: var(--c-accent); }
.calc-verdict { font-weight: 700; color: var(--c-ink); }
.calc-fine { font-size: var(--fs-small); color: var(--c-muted-strong); }
.cmp-switch-wrap { display: none; margin-bottom: var(--s-4); }
.seg-light { border-color: var(--c-border); background: var(--c-white); }
.seg-light button { color: var(--c-ink); min-height: 44px; }
.seg-light button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-white); }
@media (hover: hover) {
  .seg-light button[aria-pressed="false"]:hover { color: var(--c-accent); }
}
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-white); overflow: hidden; }
.cmp th, .cmp td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: middle; font-size: 0.9375rem; line-height: 1.4; }
.cmp tbody:last-child tr:last-child > * { border-bottom: 0; }
.cmp thead th { vertical-align: bottom; padding-block: var(--s-5) var(--s-4); }
.cmp-plan { width: 17%; text-align: center !important; }
.cmp-plan-name { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.cmp-plan-price { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--c-muted); white-space: nowrap; }
.cmp-corner { font-size: var(--fs-small); font-weight: 700; color: var(--c-muted); }
.cmp-group th { padding-block: var(--s-4) var(--s-3); background: var(--c-surface); }
.cmp-group-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.cmp-group-name { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.tool-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--c-white); border: 1px solid var(--c-border); color: var(--c-accent); }
.tool-icon .od-icon { --od-icon-size: 20px; }
.cmp-group .link-arrow { min-height: 44px; font-size: 0.875rem; color: var(--c-accent); }
.cmp tbody th[scope="row"] { font-weight: 500; }
.cmp td { text-align: center; }
.tick { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(128, 81, 213, 0.12); color: var(--c-accent); }
.tick .od-icon { --od-icon-size: 16px; stroke-width: 2.2; }
.no { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--c-muted); }
.no .od-icon { --od-icon-size: 16px; }
.cmp-foot { font-size: var(--fs-small); color: var(--c-muted-strong); margin-top: var(--s-3); }
.cmp .tick { transition: transform 240ms var(--ease-out) calc(var(--r, 0) * 50ms), opacity 240ms var(--ease-out) calc(var(--r, 0) * 50ms); }
.js .cmp .tick { opacity: 0; transform: scale(0.4); }
.js .cmp.is-in .tick { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .cmp-switch-wrap { display: block; }
  .cmp th, .cmp td { padding-inline: var(--s-3); }
  .cmp-plan { width: 30%; }
  .cmp[data-show="kontroll"] [data-col]:not([data-col="kontroll"]), .cmp[data-show="tillvaxt"] [data-col]:not([data-col="tillvaxt"]), .cmp[data-show="partner"] [data-col]:not([data-col="partner"]) { display: none; }
}
.gantt { display: grid; padding: var(--s-2) var(--s-5) var(--s-3); border: 1px solid var(--c-rule-dark); border-radius: var(--radius-card); background: var(--panel); }
.g-row { display: grid; gap: var(--s-3) var(--s-6); padding: var(--s-4) 0; border-top: 1px solid var(--c-rule-dark); }
.g-head { border-top: 0; padding-block: var(--s-3); }
@media (min-width: 768px) {
  .g-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
.g-label { display: grid; gap: 2px; }
.g-label > * { display: block; }
.g-when { font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-lilac); }
.g-what { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.g-note { font-size: 0.875rem; line-height: 1.45; color: var(--fg-muted); }
.g-tag { display: inline-flex; align-self: start; justify-self: start; margin-top: var(--s-1); padding: 1px var(--s-2); border: 1px solid var(--c-lime); border-radius: var(--radius-pill); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-lime); }
.g-track { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; min-height: 32px; background-image: linear-gradient(90deg, var(--c-rule-dark) 1px, transparent 1px); background-size: calc(100% / 6) 100%; border-right: 1px solid var(--c-rule-dark); }
.g-cols { min-height: 0; background: none; border-right: 0; }
.g-col { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--c-lilac); white-space: nowrap; }
.g-head .g-label { visibility: hidden; }
@media (max-width: 767px) {
  .g-head .g-label { display: none; }
}
.g-bar { grid-column: var(--from) / var(--to); display: block; height: 14px; margin-inline: 3px; border-radius: var(--radius-pill); background: var(--c-lilac); transform-origin: left center; }
.g-bar.is-lime { background: var(--c-lime); }
.g-ms { grid-column: var(--at); justify-self: end; display: block; width: 12px; height: 12px; margin-right: -6px; background: var(--c-lime); transform: rotate(45deg); z-index: 1; }
/* Allt i ett spår ligger på samma rad: en milstolpe i samma kolumn som en stapel ska hamna i stapelns ände, inte under den. */
.g-track > * { grid-row: 1; }
.g-loop { grid-column: 6 / 7; position: relative; display: block; height: 14px; margin-inline: 3px; border-radius: var(--radius-pill); background: rgba(217, 194, 255, 0.28); overflow: hidden; transform-origin: left center; }
.g-loop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c-lilac); transform-origin: left center; transform: scaleX(1); }
.g-quarters { grid-column: 6 / 7; display: flex; justify-content: space-evenly; align-items: center; }
.g-quarters span { display: block; width: 11px; height: 11px; border: 2px solid var(--c-lime); transform: rotate(45deg); }
.effort { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border: 1px solid var(--c-rule-dark); border-radius: var(--radius-card); font-size: 1.0625rem; line-height: 1.5; max-width: none; }
.effort .od-icon { --od-icon-size: 22px; flex: none; margin-top: 2px; color: var(--c-lime); }
.g-bar, .g-loop { transition: transform 400ms var(--ease-out); }
.g-ms, .g-quarters span { transition: opacity 240ms var(--ease-out) 300ms; }
.js .gantt .g-bar, .js .gantt .g-loop { transform: scaleX(0); }
.js .gantt .g-ms, .js .gantt .g-quarters span { opacity: 0; }
.js .gantt .g-row.is-in .g-bar, .js .gantt .g-row.is-in .g-loop { transform: scaleX(1); }
.js .gantt .g-row.is-in .g-ms, .js .gantt .g-row.is-in .g-quarters span { opacity: 1; }
.js .gantt .g-row.is-looping .g-loop::after { animation: monthLoop 2400ms var(--ease-out) infinite; }
@keyframes monthLoop { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 85%, 100% { transform: scaleX(1); opacity: 0; } }
.terms { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 600px) {
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .terms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.term { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-surface); font-weight: 700; line-height: 1.35; }
.term-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-white); color: var(--c-accent); }
.term-icon .od-icon { --od-icon-size: 22px; }
/* Garantin: en egen rad under de fyra villkoren, i accentfärg. */
.term--guarantee { grid-column: 1 / -1; border-color: var(--c-accent); background: var(--c-white); }
.term--guarantee .term-icon { background: var(--c-accent); color: var(--c-white); }
.band-surface .faq-a p { color: var(--c-muted-strong); }
.band-surface .faq-icon { background: var(--c-white); }
.final-copy .muted { max-width: 44ch; }
.final .booking { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .stairs .prof { stroke-dashoffset: 0; }
  .js .stairs .hatch, .js .stairs .s-lbl { opacity: 1; }
  .js .mm .mm-fill, .js .mm .qplan-bar { transform: scaleX(1); }
  .js .mm .mm-alarm { opacity: 1; transform: none; }
  .js .mm .qplan-ms { opacity: 1; transform: rotate(45deg); }
  .js .dash-fig .leader { transform: scaleY(1); }
  .js .dash-fig .callout { opacity: 1; }
  .js .dash-fig .cash .actual { stroke-dashoffset: 0; }
  .js .phone-fig .alert { opacity: 1; transform: none; }
  .js .cmp .tick { opacity: 1; transform: none; }
  .js .gantt .g-bar, .js .gantt .g-loop { transform: scaleX(1); }
  .js .gantt .g-ms, .js .gantt .g-quarters span { opacity: 1; }
  .js .gantt .g-row.is-looping .g-loop::after { animation: none; }
  .js .pick-result.is-fresh { animation: none; }
}

/* ---------- Tillägg i Ghost-temat ---------- */
/* Paketkorten under den klistrade headern när man hoppar till dem (#pkg-…, Se paketet) */
.pkg { scroll-margin-top: 96px; }

/* Exempel-kassan: nollinjen, luckan om tre veckor och värdet i rött (datafärg) */
.panel-title .is-neg { color: var(--c-neg-on-light); white-space: nowrap; }
.cash .zero { stroke: var(--c-neg-on-light); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
.cash .dip { fill: var(--c-neg-on-light); }

/* Smala skärmar (320 px): jobbnamnet behåller sin bredd och stapeln krymper,
   tidplanens kolumnrubriker och kvartalsmarkeringar får plats. */
@media (max-width: 400px) {
  .kp .job-row { grid-template-columns: max-content minmax(24px, 1fr) auto; }
  .g-col { letter-spacing: 0.06em; }
}
/* Mobil: varje rad har sitt eget spår under texten. "Sedan" får dubbel bredd, så att
   månadsstapeln och kvartalsmarkeringarna inte trängs mot kanten. Stödlinjerna följer
   kolumnerna (fem smala och en bred, alltså sjundedelar). */
@media (max-width: 767px) {
  .g-track { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 2fr); background-image: repeating-linear-gradient(90deg, var(--c-rule-dark) 0 1px, transparent 1px 20%); background-size: calc(500% / 7 + 1px) 100%; background-repeat: no-repeat; }
  .g-cols { background: none; }
  .g-loop { margin-inline: 8px; }
  .g-quarters { padding-inline: 4px; }
}