/* Advesign – sidsystemet för de omgjorda sidorna (startsidan, Tjänster och priser …).
   Regler som Open Design-sidorna har gemensamt: band, måttlinjer, knappar, verktyg,
   FAQ, avslutning, bokning. Sidans egna komponenter ligger i css/<sida>.css.
   Allt är avgränsat till .kp (wrappern i varje mall), så att reglerna inte når
   sidhuvudet, sidfoten eller de gamla sidorna. Tokens (--c-*, --s-*, --fs-* …)
   kommer från advesign-components.css.
   GENERERAD UR designfilerna av en engångsdelning; redigera sedan för hand. */

/* ---------- Bandtema, ljust som standard ---------- */
.kp {
  --bg: var(--c-white);
  --fg: var(--c-ink);
  --fg-muted: var(--c-muted);
  --eyebrow: var(--c-accent);
  --line: var(--c-border);
  --grid: rgba(128, 81, 213, 0.07);
  --dim-color: var(--c-accent);
  --focus: var(--c-accent);
  --pos: var(--c-pos-on-light);
  --neg: var(--c-neg-on-light);
  --ph-fill: rgba(116, 107, 132, 0.28);
  --ph-line: rgba(116, 107, 132, 0.6);
  --panel: var(--c-white);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem);
  overflow-x: clip;
  color: var(--c-ink);
}
@media (min-width: 768px) { .kp { --gutter: 24px; } }

/* ---------- Bas ----------
   :where() håller specificiteten på samma nivå som i designens globala regler
   (h2, p, a …), så att komponentklasserna (.btn, .eyebrow …) fortfarande vinner. */
:where(.kp) :is(img, svg) { max-width: 100%; }
:where(.kp) :where(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; }
:where(.kp) h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.045em; max-width: 14ch; }
:where(.kp) h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.035em; max-width: 20ch; }
:where(.kp) h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; }
:where(.kp) p { margin: 0; max-width: 65ch; text-wrap: pretty; }
:where(.kp) a { color: inherit; }
:where(.kp) :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
:where(.kp) .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

.kp .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Gemensamt för sidorna ---------- */
.band { position: relative; padding-block: var(--s-12); background-color: var(--bg); color: var(--fg); scroll-margin-top: var(--header-h); }
@media (min-width: 1024px) {
  .band { padding-block: var(--s-15); }
}
.band-white { --bg: var(--c-white); }
.band-paper { --bg: var(--c-white); }
.band-surface { --bg: var(--c-surface); --fg-muted: var(--c-muted-strong); }
.band-dark { --bg: var(--c-deep); --fg: var(--c-white); --fg-muted: rgba(255, 255, 255, 0.76); --eyebrow: var(--c-lilac); --line: var(--c-rule-dark); --grid: rgba(217, 194, 255, 0.07); --dim-color: var(--c-lilac); --focus: var(--c-lime); --pos: var(--c-pos-on-dark); --neg: var(--c-neg-on-dark); --ph-fill: rgba(217, 194, 255, 0.26); --ph-line: rgba(217, 194, 255, 0.5); --panel: #1d1342; }
.blueprint { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; }
.band-gradient { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), radial-gradient(circle at 85% 15%, rgba(102, 54, 161, 0.55), transparent 55%), linear-gradient(135deg, var(--c-deep-2), var(--c-deep)); background-size: 32px 32px, 32px 32px, auto, auto; }
.eyebrow { display: block; margin: 0 0 var(--s-4); font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eyebrow); }
.section-head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.section-head p:not(.eyebrow) { color: var(--fg-muted); }
.section-head .eyebrow { margin: 0; }
@media (min-width: 1024px) {
  .section-head { margin-bottom: var(--s-12); }
}
.muted { color: var(--fg-muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 54px; padding: 0 var(--s-6); border: 0; border-radius: var(--radius-pill); background: var(--c-lime); color: var(--c-deep); font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -10px rgba(201, 255, 77, 0.6); }
}
.btn:active { transform: translateY(0); }
.btn-sm { min-height: 42px; padding: 0 var(--s-5); font-size: 0.9375rem; }
.btn-block { width: 100%; }
.btn-ink { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 54px; padding: 0 var(--s-6); border: 0; border-radius: var(--radius-pill); background: var(--c-ink); color: var(--c-white); font-family: var(--font-body); font-size: 1rem; font-weight: 700; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro); }
@media (hover: hover) {
  .btn-ink:hover { transform: translateY(-2px); background: var(--c-deep-2); }
}
.btn-ink:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.btn-ink:disabled { background: var(--c-border); color: var(--c-muted-strong); cursor: not-allowed; transform: none; }
.link-arrow { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--fg); text-decoration: none; text-underline-offset: 4px; }
@media (hover: hover) {
  .link-arrow:hover { text-decoration: underline; }
  .band-dark .link-arrow:hover { color: var(--c-lime); }
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.od-icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ph-box { position: relative; border: 1.5px dashed var(--ph-line); border-radius: var(--radius-card); padding: var(--s-8) var(--s-4) var(--s-4); }
.ph-tag { position: absolute; top: var(--s-3); left: var(--s-4); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--fg-muted); }
.todo { font-weight: 700; color: var(--c-accent); }
.band-dark .todo { color: var(--c-lilac); }
.tag-example { display: inline-block; padding: 2px var(--s-2); border: 1px solid currentColor; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); }
.slot { display: grid; place-items: center; gap: var(--s-2); aspect-ratio: 16 / 9; border: 1.5px dashed var(--ph-line); border-radius: var(--radius-card); padding: var(--s-5); text-align: center; color: var(--fg-muted); }
.slot-inner { display: grid; justify-items: center; gap: var(--s-2); }
.slot .od-icon { --od-icon-size: 32px; color: var(--fg); }
.slot-title { font-weight: 700; color: var(--fg); }
.slot-meta { font-size: var(--fs-small); }
.dim { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-8); color: var(--dim-color); }
.dim-tick { flex: none; width: 1px; height: 16px; background: currentColor; }
.dim-seg { position: relative; flex: 1 1 0; height: 1px; background: currentColor; transform: scaleX(0); transition: transform 380ms var(--ease-out); }
.dim-seg-l { transform-origin: right center; }
.dim-seg-r { transform-origin: left center; }
.dim-seg-l::before, .dim-seg-r::after { content: ""; position: absolute; top: -4px; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.dim-seg-l::before { left: 0; border-right: 8px solid currentColor; }
.dim-seg-r::after { right: 0; border-left: 8px solid currentColor; }
.dim-label { flex: none; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dim.is-in .dim-seg { transform: scaleX(1); }
.hero { padding-block: var(--s-7) var(--s-12); }
@media (min-width: 1024px) {
  .hero { padding-block: var(--s-14); }
}
.hero-grid { display: grid; gap: var(--s-8); align-items: center; }
.hero-copy { display: grid; gap: var(--s-5); justify-items: start; }
.hero-copy .eyebrow { margin: 0; }
.hero h1 .tint { color: var(--c-lilac); }
.hero .lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--fg-muted); max-width: 36ch; }
.hero-copy .cta-row { margin-top: var(--s-2); }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); }
}
.tool { display: grid; gap: var(--s-5); padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-white); box-shadow: 0 1px 0 var(--c-border), 0 24px 48px -32px rgba(32, 22, 58, 0.25); }
@media (min-width: 768px) {
  .tool { padding: var(--s-8); }
}
@media (min-width: 1024px) {
  .tool { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
}
.tool-form { display: grid; gap: var(--s-5); align-content: start; }
.field { display: grid; gap: var(--s-2); }
.field > * { display: block; }
.field-label { font-weight: 700; font-size: 0.9375rem; }
.field-help { font-size: var(--fs-small); color: var(--c-muted); }
.select, .input { width: 100%; min-height: 54px; 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: inherit; font-size: 1rem; }
.select { appearance: none; padding-right: var(--s-10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320163a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; background-size: 18px; cursor: pointer; }
.select:focus-visible, .input:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.is-invalid .select, .is-invalid .input { border-color: var(--c-neg-on-light); }
.field-error { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-small); font-weight: 500; color: var(--c-neg-on-light); }
.field-error .od-icon { --od-icon-size: 18px; margin-top: 2px; }
.tool-output { min-height: 340px; display: grid; border-radius: var(--radius-card); background: var(--c-surface); padding: var(--s-5); --fg-muted: var(--c-muted-strong); }
@media (min-width: 768px) {
  .tool-output { padding: var(--s-6); }
}
.tool-empty, .tool-loading { display: grid; place-items: center; align-content: center; gap: var(--s-4); text-align: center; color: var(--c-muted-strong); }
.tool-empty .od-icon { --od-icon-size: 40px; color: var(--c-accent); }
.tool-empty p { max-width: 30ch; }
.section-end { display: grid; gap: var(--s-5); justify-items: start; margin-top: var(--s-10); padding-top: var(--s-8); border-top: 1px solid var(--line); }
.section-end-line { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.15; letter-spacing: -0.03em; max-width: 24ch; }
@media (min-width: 768px) {
  .section-end { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.seg-control { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--c-rule-dark); border-radius: var(--radius-pill); justify-self: start; }
.seg-control button { min-height: 38px; min-width: 44px; padding: 0 var(--s-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--fg); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: background-color var(--dur-micro), color var(--dur-micro); }
.seg-control button[aria-pressed="true"] { background: var(--c-lilac); color: var(--c-deep); }
.mini-dash { width: min(340px, 90%); display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-white); box-shadow: 0 24px 48px -24px rgba(32, 22, 58, 0.35); }
.mini-dash-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.mini-dash-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.2; }
.mini-dash-sub { font-size: 0.8125rem; color: var(--c-muted); }
.job-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.job-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--c-border); font-size: 0.875rem; }
.job-row-name { display: block; }
.job-row-bar { display: block; height: 6px; border-radius: 3px; background: var(--ph-fill); }
.job-row-val { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.job-row.is-loss { color: var(--c-neg-on-light); }
.job-row.is-loss .job-row-bar { background: rgba(194, 51, 77, 0.35); }
.job-row.is-loss .job-row-name { display: flex; align-items: center; gap: var(--s-1); font-weight: 700; }
.job-row.is-loss .od-icon { --od-icon-size: 14px; }
.job-row.pulse { animation: lossPulse 380ms var(--ease-out) 1; }
@keyframes lossPulse { 0% { background-color: rgba(194, 51, 77, 0); } 50% { background-color: rgba(194, 51, 77, 0.12); } 100% { background-color: rgba(194, 51, 77, 0); } }
.ghost-btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--fg); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: border-color var(--dur-micro), color var(--dur-micro); }
.ghost-btn .od-icon { --od-icon-size: 16px; }
@media (hover: hover) {
  .ghost-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
  .band-dark .ghost-btn:hover { border-color: var(--c-lime); color: var(--c-lime); }
}
.packages { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) {
  .packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pkg { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6) var(--s-5); border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-white); }
.pkg-num { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; color: var(--c-accent); }
.pkg h3 { font-size: 1.75rem; letter-spacing: -0.03em; }
.pkg-for { font-size: 1rem; }
.pkg-for strong { display: block; font-size: var(--fs-small); color: var(--c-muted); font-weight: 700; }
.pkg-outcome { font-size: 1rem; color: var(--c-ink); }
.pkg .mini-dash { width: 100%; box-shadow: none; background: var(--c-surface); border-color: var(--c-border); padding: var(--s-4); }
.pkg .job-row { border-top-color: rgba(116, 107, 132, 0.2); }
.spark { display: block; width: 100%; height: 48px; overflow: visible; }
.spark-line { fill: none; stroke: rgba(116, 107, 132, 0.7); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 380ms var(--ease-out); }
.spark-base { stroke: var(--c-border); stroke-width: 1; }
.pkg.is-in .spark-line { stroke-dashoffset: 0; }
.price { display: flex; align-items: baseline; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.price-from { font-size: var(--fs-small); color: var(--c-muted); }
.price-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; white-space: nowrap; }
.packages-cta { display: grid; gap: var(--s-4); justify-items: start; margin-top: var(--s-8); }
@media (min-width: 768px) {
  .packages-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.faq { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%; min-height: 72px; padding: var(--s-4) 0; border: 0; background: transparent; color: var(--c-ink); font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; text-align: left; cursor: pointer; }
@media (hover: hover) {
  .faq-q:hover { color: var(--c-accent); }
}
.faq-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--c-border); border-radius: 50%; }
.faq-icon svg { --od-icon-size: 20px; }
.faq-icon .v { transform-origin: 12px 12px; transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro); }
.faq-q[aria-expanded="true"] .faq-icon .v { transform: rotate(90deg); opacity: 0; }
.faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 300ms var(--ease-out), visibility 0s linear 300ms; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: var(--s-5); color: var(--c-muted); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 300ms var(--ease-out), visibility 0s; }
.final-grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 1024px) {
  .final-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-12); }
}
.final-copy { display: grid; gap: var(--s-5); justify-items: start; }
.final .eyebrow { color: var(--c-lime); margin: 0; }
.final h2 { max-width: 18ch; }
.final .flow-figure { width: min(100%, 380px); }
.booking { margin-top: var(--s-10); display: grid; gap: var(--s-4); }
.toast { position: fixed; left: 50%; bottom: calc(var(--sticky-h) + var(--s-4)); z-index: 60; width: min(92vw, 440px); padding: var(--s-3) var(--s-4); border-radius: 12px; background: var(--c-ink); color: var(--c-white); font-size: var(--fs-small); line-height: 1.45; box-shadow: 0 16px 32px -16px rgba(21, 13, 50, 0.6); transform: translateX(-50%); }
@media (min-width: 768px) {
  .toast { bottom: var(--s-6); }
}
@media (prefers-reduced-motion: reduce) {
  .kp *, .kp *::before, .kp *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .dim-seg { transform: scaleX(1); }
}