@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }

:root { color-scheme: only light;
  --paper: #F6F2EA;
  --paper-2: #EFE9DE;
  --card: #FFFDF9;
  --ink: #14181F;
  --muted: #4a4f58;
  --line: #ded6c8;
  --accent: #E4572E;      /* ytor och detaljer */
  --accent-ink: #B23D17;  /* text och knappar i accentfärg (kontrast ≥ 4.5:1 mot vitt) */
  --error: #A3261A;
  --radius: 14px;
  --gutter: clamp(16px, 5vw, 80px);
  --side: max(var(--gutter), calc((100% - 1240px) / 2)); /* innehållet högst 1240 px brett på stora skärmar */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--body); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
[hidden] { display: none !important; }

/* --- Knappar --- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent; font: 700 1rem var(--body); text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--accent-ink); color: #fff; }
.btn--primary:hover { background: #9c3313; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--small { min-height: 44px; padding: 8px 16px; font-size: 0.95rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* --- Sidhuvud: logon uppe till höger --- */
.site-header { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px var(--side); }
.site-header__phone { font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* Ordmärket ROTHMAN SOLUTIONS (inkorg 1235): platt SVG. På smala skärmar visas ROTHMAN utan SOLUTIONS, som annars
   blir för litet att läsa. */
.logo picture { display: block; }
.logo__mark { height: 46px; width: auto; display: block; }
.site-header__phone { white-space: nowrap; }
/* Mellanslaget efter ordet ligger i span:en, som är ett flex-barn; pre behåller det. */
.site-header__verb { white-space: pre; }
/* Smala telefoner: bara numret syns ("Ring"/"Call"/"Llamar" läses fortfarande upp), så att språkväljaren och loggan ryms. */
.site-header__icon { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
/* Telefoner: bara en telefonikon i sidhuvudet (numret läses fortfarande upp och finns i mobilknappen), så att
   språkväljaren och loggan alltid ryms. */
@media (max-width: 479px) {
  .site-header__phone { min-width: 44px; justify-content: center; }
  .site-header__icon { display: block; }
  .site-header__verb, .site-header__num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Språkväljaren (inkorg 0920): SV / EN / ES bredvid loggan, och högst upp till höger på de små sidorna. */
/* Logon ligger direkt i sidhuvudet (introts "Spela introt igen" sätts in före den), och språkväljaren knuffas till höger. */
.site-header > .langs { margin-left: auto; margin-right: calc(clamp(8px, 2vw, 18px) - 12px); } /* samma avstånd till logon som förut */
.langs { display: flex; gap: 2px; font: 700 0.8rem var(--body); letter-spacing: 0.04em; }
.langs a { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; border-radius: 999px; text-decoration: none; color: var(--muted); }
.langs a:hover { color: var(--accent-ink); }
.langs a[aria-current] { background: var(--ink); color: #fff; }
.page { position: relative; }
.langs--page { position: absolute; top: 12px; right: var(--gutter); }
.langs--footer { margin-top: 6px; }
.site-footer .langs a { color: inherit; }
.site-footer .langs a[aria-current] { background: currentColor; }
.site-footer .langs a[aria-current] span { color: var(--ink); }
@media (max-width: 599px) { .langs a { min-width: 36px; } }
@media (max-width: 599px) { .logo__mark { height: 19px; } }
.site-header .logo { flex-shrink: 0; }
.page__logo { display: inline-block; margin-bottom: 20px; }

/* --- Hero (ljus) --- */
.hero { position: relative; min-height: 100vh; display: grid; gap: 20px; align-content: start; padding: 84px var(--side) 48px; }
.hero__media img { display: block; width: 100%; border-radius: var(--radius); aspect-ratio: 780 / 440; object-fit: cover; }
.hero h1 { font-size: clamp(2.3rem, 6.2vw, 5rem); font-weight: 800; }
#hero-form, #kontakt { scroll-margin-top: 16px; }
.hero__sub { margin-top: 12px; max-width: 36rem; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--muted); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); column-gap: clamp(32px, 5vw, 80px); align-content: center; padding-top: 112px; }
  .hero__text { grid-column: 1; grid-row: 1; align-self: end; }
  .hero__media { grid-column: 1; grid-row: 2; }
  .hero__form { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* --- Formulär --- */
.lead-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; box-shadow: 0 1px 0 rgb(20 24 31 / 0.04); }
.lead-form__title { font-size: 1.5rem; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: 0.95rem; padding: 0; }
.optional { font-weight: 400; color: var(--muted); }
.field input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid #c9c0b1; border-radius: 10px; background: #fff; font: 400 1rem var(--body); color: var(--ink); }
.field input::placeholder { color: #7a7f87; }
.field input:focus { border-color: var(--accent-ink); outline: none; box-shadow: 0 0 0 3px rgb(178 61 23 / 0.35); } /* tydlig fokus, kontrast över 3:1 */
.field input[aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: 0.9rem; font-weight: 600; }
.need__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px; } /* fyra val sedan 0925: två och två */
.need__options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.need__options label { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1.5px solid #c9c0b1; border-radius: 10px; background: #fff; cursor: pointer; font-weight: 600; }
.need__options input:checked + label { background: var(--ink); border-color: var(--ink); color: #fff; }
.need__options input:focus-visible + label { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lead-form__consent { font-size: 0.85rem; color: var(--muted); }
.form-status:empty { display: none; }
.form-status { font-weight: 600; }
.form-status--error { color: var(--error); }
.form-status--done { font: 700 1.25rem/1.35 var(--display); }

/* --- Sektioner --- */
.section { padding: clamp(56px, 8vw, 104px) var(--side); }
.section--tint { background: var(--paper-2); }
.section__title { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; max-width: 22ch; }

.services { margin-top: 32px; display: grid; gap: 20px; }
@media (min-width: 900px) { .services { grid-template-columns: 1fr 1fr; } }
.service { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); display: grid; gap: 14px; align-content: start; }
.service h3 { font-size: 1.7rem; }
.service__facts { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.service .btn { justify-self: start; }

.chain, .steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: n; }
@media (min-width: 900px) { .chain, .steps { grid-template-columns: repeat(3, 1fr); } }
.chain li, .steps li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; counter-increment: n; }
.chain h3, .steps h3 { font-size: 1.3rem; margin-bottom: 6px; }
.chain li::before, .steps li::before { content: counter(n); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 0.95rem var(--display); margin-bottom: 12px; }
@media (min-width: 900px) { .chain li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translate(50%, -50%); font: 800 1.4rem var(--display); color: var(--accent-ink); } }
.promises { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; max-width: 46rem; }
.promises li { padding-left: 28px; position: relative; }
.promises li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--accent-ink); }
.facts { margin-top: 14px; font-weight: 600; color: var(--muted); }
.chain__outro, .steps__note { margin-top: 24px; font-size: 1.15rem; font-weight: 600; max-width: 46rem; }

/* --- Priser --- */
.jump { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.jump a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: 999px; text-decoration: none; font-weight: 600; }
.pricing { margin-top: 28px; display: grid; gap: 28px; }
@media (min-width: 1100px) { .pricing { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); align-items: start; } }
/* Marknadsföringskortet följer med medan man läser nivåerna: under remsan högst upp, och bara när hela kortet ryms
   på höjden (annars skulle knappen "Testa en månad" aldrig synas medan det står still). */
@media (min-width: 1100px) and (min-height: 1160px) { #priser-marknadsforing { position: sticky; top: 44px; } }
.pricing__title { font-size: 1.8rem; }
.pricing__sub { color: var(--muted); margin: 6px 0 18px; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; align-content: start; }
.tier--slim { margin-bottom: 16px; gap: 14px; }
/* Gratis genomgång (inkorg 0925): samma smala rad som ombyggnaden, med streckad kant eftersom det inte är en nivå. */
.review { margin-bottom: 16px; display: grid; gap: 14px; padding: 22px; border: 1.5px dashed var(--accent-ink); border-radius: var(--radius); background: var(--card); }
@media (min-width: 700px) { .review { grid-template-columns: 1fr auto; align-items: end; } }
.review .tier__price { font-size: 1.5rem; margin-left: 8px; color: var(--accent-ink); }
.review p { margin-top: 6px; max-width: 40rem; }
.review .btn { justify-self: start; }
.review.is-picked { box-shadow: 0 0 0 3px var(--accent); }
.field-help { margin: 6px 0 0; font-size: 0.9rem; color: var(--muted); }
.steps__review { margin-top: 10px; max-width: 46rem; }
@media (min-width: 700px) { .tier--slim { grid-template-columns: 1fr auto; align-items: end; } }
.tier__level { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.tier__name { font-size: 1.5rem; }
.tier__price { font: 800 1.9rem var(--display); }
.tier--slim .tier__price { font-size: 1.5rem; margin-left: 8px; color: var(--accent-ink); }
.tier__rebuild { margin-top: 6px; max-width: 40rem; }
/* Rabatter (inkorg 0915): lugnt band överst i prislistan och priset efter rabatt under varje nivås pris. Inget
   överstruket och ingen nedräkning; slutdatumet står i texten. */
.firar { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: #FBE3D9; color: #4a1b0a; border-left: 4px solid var(--accent); }
.firar__name { font: 800 0.8rem var(--display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-ink); }
.deals { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.95rem; color: var(--muted); }
.deals strong { color: var(--accent-ink); white-space: nowrap; }
.tier--slim .deals { margin-top: 6px; }
[data-discount-terms] { margin: 16px 0 0; }
.deal { margin: 0; font-size: 0.95rem; padding: 8px 12px; border-radius: 10px; background: #FBE3D9; color: #4a1b0a; }
.tier__list { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: #2b3038; }
.tier .btn { justify-self: start; margin-top: 6px; }
.tiers { display: grid; gap: 16px; }
@media (min-width: 700px) { .tiers { grid-template-columns: 1fr 1fr; } }
.addon { margin-top: 16px; background: var(--card); border: 1px dashed #b9ae9c; border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; }
.addon__sub { color: var(--muted); }

/* Exempelkort: lika stora i ett rutnät (en kolumn i smala kort, flera i tilläggsrutan), alltid en bild i rätt format. */
.examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); align-items: stretch; }
.example { margin: 0; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 12px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.example__shot { display: block; overflow: hidden; border-radius: 8px; }
.example__shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; transition: transform 0.4s ease; }
.example figcaption { display: grid; gap: 4px; font-size: 0.9rem; }
.example .btn { align-self: flex-start; margin-top: auto; gap: 6px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .example:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgb(20 24 31 / 0.45); }
  .example:hover .example__shot img { transform: scale(1.03); }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* "Så här kan din sida kännas" (0910): rubrik över exemplen; linjen ovanför flyttas från raden till rubriken. */
.examples__title { font: 700 1rem var(--display); margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.examples__title + .examples { margin-top: 0; padding-top: 0; border-top: 0; }

.offer { background: var(--ink); color: #f3efe7; border-radius: var(--radius); padding: clamp(22px, 3vw, 30px); display: grid; gap: 14px; border-top: 6px solid var(--accent); }
.offer h3 { font-size: 1.6rem; color: #fff; }
.offer__kicker { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #f2a283; }
.offer__label { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #c9c3b8; margin-bottom: 2px; }
.offer s { color: #c9c3b8; }
.offer__price { display: block; font: 800 2rem var(--display); color: #fff; }
/* Resultatavgift och annonsbudget lika stora bredvid varandra (inkorg 0955/1115), så att "från 0 kr" aldrig kan
   läsas som att annonserna är gratis. */
.offer__prices { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 0; }
/* Etikett, pris och text i varsin rad som delas av båda rutorna (subgrid), så att priserna alltid står i samma höjd. */
.offer__prices > p { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 4px; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.14); border-radius: 12px; padding: 12px 14px; }
.offer__prices .offer__price { font-size: 1.6rem; line-height: 1.1; }
.offer__prices .offer__label { align-self: end; margin: 0; }
.offer__note { font-size: 0.9rem; color: #e9e4da; }
@media (max-width: 379px) { .offer__prices { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 12px; } .offer__prices > p { grid-row: auto; grid-template-rows: none; } }
.offer__vat { color: #c9c3b8; font-size: 0.9rem; }
.offer__binding { font-weight: 700; }
.offer__package [data-firar] { color: #fff; }
.offer .btn--primary { background: var(--accent); color: #14181F; }
.offer .btn--primary:hover { background: #f06a43; }
.terms { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.terms summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.terms ul { margin: 10px 0 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 0.95rem; }

/* --- Vanliga frågor --- */
.faq { margin-top: 28px; display: grid; gap: 10px; max-width: 52rem; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.faq summary { cursor: pointer; font: 700 1.15rem var(--display); min-height: 32px; }
.faq p { margin-top: 10px; }

/* --- Kontakt och sidfot --- */
.contact { display: grid; gap: 28px; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr minmax(360px, 0.8fr); align-items: start; } }
.contact__alt { margin-top: 14px; color: var(--muted); }
.site-footer { display: grid; gap: 16px; padding: 40px var(--side) 96px; background: var(--ink); color: #e9e4da; }
@media (min-width: 700px) { .site-footer { grid-template-columns: repeat(3, 1fr); padding-bottom: 40px; } }
.site-footer a { color: #fff; }
.site-footer__name { font: 700 1.1rem var(--display); }

/* --- Fast knapp längst ner på mobil --- */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgb(246 242 234 / 0.96); border-top: 1px solid var(--line); }
.mobile-cta .btn { flex: 1; }
.mobile-cta__call { min-width: 72px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; text-decoration: none; }
@media (min-width: 900px) { .mobile-cta { display: none !important; } }

/* --- Samtyckesruta: två lika knappar --- */
.consent { position: fixed; z-index: 30; left: 16px; right: 16px; bottom: 16px; max-width: 30rem; margin-left: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 10px; box-shadow: 0 10px 30px rgb(20 24 31 / 0.18); font-size: 0.95rem; }
.consent__title { font: 700 1.1rem var(--display); }
.consent__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* --- Enkla undersidor --- */
.page { max-width: 46rem; margin: 0 auto; padding: 48px var(--gutter) 80px; }
.page h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 24px 0 16px; }
.page h2 { font-size: 1.3rem; margin: 28px 0 8px; }
.page p, .page li { margin-bottom: 8px; }

/* --- 3D-intro (spec 5) --- */
.intro { position: relative; z-index: 10; height: 400vh; }
.intro__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #030303; }
.intro__stage canvas { display: block; width: 100%; height: 100%; }
.intro--done, .intro--done .intro__stage { pointer-events: none; }
/* Kopian av sidans första skärm som ligger på laptopens skärm i scen 6 (match cut, ingen toning). */
.intro__screen { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 0 0; overflow: hidden; pointer-events: none; visibility: hidden; background: var(--paper); backface-visibility: hidden; }
.intro__screen > .hero { margin: 0; }
.intro__glare { position: absolute; inset: 0; background: linear-gradient(115deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 38%); pointer-events: none; }
.intro__top, .intro__cta { opacity: var(--ui, 1); position: absolute; z-index: 2; left: clamp(16px, 3vw, 40px); }
.intro__top { top: 22px; display: flex; gap: 10px; }
.intro__skip, .intro__cta { text-decoration: none; font: 600 0.95rem var(--body); padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; }
.intro__skip { color: #f3efe7; border: 1px solid rgb(255 255 255 / 0.35); background: rgb(0 0 0 / 0.25); cursor: pointer; }
.intro__cta { bottom: 28px; background: var(--accent); color: #14181F; font-weight: 700; }
.intro__skip:focus-visible, .intro__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Introts sista skärm ligger ovanpå heron, så att inåkningen landar exakt i sidan. */
html[data-hero-mode="full"] main { margin-top: -100vh; }
/* Lägen för att rendera stillbilder och logo (bara lokalt, ?intro=still|logo). */
.intro[data-render] .intro__top, .intro[data-render] .intro__cta { display: none; }
.intro[data-render="logo"] .intro__stage { background: transparent; }
.intro[data-render] .intro__screen { display: none; }

/* Lätta rörelser vid skroll (uppdrag 5, assets/js/reveal.js): tonar in och glider upp en bit. Bara transform och
   opacity, så inget i layouten flyttas (CLS 0). Läggs bara på det som är under första skärmen. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease var(--reveal-delay, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
.annons:not(.annons--3d) .ad-offer.reveal:nth-child(odd) { transform: translateX(-26px); }
.annons:not(.annons--3d) .ad-offer.reveal:nth-child(even) { transform: translateX(26px); }
.annons:not(.annons--3d) .ad-offer.reveal.is-in { transform: none; }
.annons:not(.annons--3d) { overflow-x: clip; } /* korten som glider in från sidan ger ingen sidledsskroll */

/* Så kan din annons se ut (spec 4.3b). Grundläget (mobil, lätt läge): telefonen med videon och korten under. */
.annons__stage { display: grid; gap: 28px; }
.annons__sub { margin-top: 12px; max-width: 34rem; color: var(--muted); }
.annons__phone { position: relative; justify-self: center; display: grid; justify-items: center; gap: 10px; }
.annons__label { background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.phone { position: relative; width: min(64vw, 270px); aspect-ratio: 270 / 464; border-radius: 38px; padding: 10px; background: linear-gradient(145deg, #b4603a, #6c2a12 55%, #a4532f); box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 24px 48px -20px rgb(20 24 31 / 0.45); }
.phone::before { content: ""; position: absolute; inset: 6px; border-radius: 33px; background: #050506; }
.phone__poster, .phone__video { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; border-radius: 29px; background: #111; }
.phone__video { opacity: 0; transition: opacity 0.3s; }
.phone__video[data-playing] { opacity: 1; }
.annons__canvas { display: none; }
.ad-offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ad-offer { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; font-size: 1rem; line-height: 1.4; box-shadow: 0 10px 30px -18px rgb(20 24 31 / 0.35); }
.ad-offer__big { display: block; font: 800 1.35rem/1.15 var(--display); color: var(--ink); }
.ad-offer--cta { background: none; border: 0; box-shadow: none; padding: 4px 0 0; }
.annons__note { font-size: 0.85rem; color: var(--muted); }
@media (min-width: 700px) {
  .annons__stage { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(28px, 5vw, 64px); align-items: center; }
  .annons__head, .annons__note { grid-column: 1 / -1; }
  .ad-offers { grid-template-columns: 1fr 1fr; }
  .ad-offer--cta { grid-column: 1 / -1; }
}

/* Dator i fullt läge: avsnittet blir en skrollscen. Telefonen är 3D i mitten och erbjudandena flyger in från
   sidorna och lägger sig runt den. Texten är fortfarande samma HTML. */
.annons--3d { padding: 0; height: 280vh; }
.annons--3d .annons__stage { position: sticky; top: 0; height: 100vh; padding: clamp(28px, 4vw, 56px) var(--side); box-sizing: border-box; overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: clamp(20px, 3vw, 48px); align-items: center; }
.annons--3d .annons__head { grid-column: 1 / -1; text-align: center; justify-self: center; }
.annons--3d .annons__head .section__title { max-width: none; }
.annons--3d .annons__sub { margin-inline: auto; }
.annons--3d .annons__phone { grid-column: 2; grid-row: 2; align-self: stretch; width: 100%; }
.annons--3d .phone { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.annons--3d .annons__label { position: relative; z-index: 1; align-self: start; transform: translateY(-10px); }
.annons--3d .annons__canvas { display: block; position: absolute; inset: -6% -40%; width: 180%; height: 112%; }
.annons--3d .ad-offers { display: contents; }
.annons--3d .ad-offer { grid-row: 2; align-self: center; max-width: 300px; transform-origin: 50% 50%; will-change: transform, opacity; transition: none;
  opacity: var(--in, 0); transform: translate3d(calc((1 - var(--in, 0)) * var(--from, -60vw)), calc((1 - var(--in, 0)) * 12vh), 0) rotateY(calc((1 - var(--in, 0)) * var(--turn, 35deg))) rotateZ(calc((1 - var(--in, 0)) * var(--roll, -6deg))); }
.annons--3d .ad-offer:nth-child(1) { grid-column: 1; justify-self: end; margin-bottom: 34vh; --from: -55vw; --turn: 40deg; --roll: -8deg; }
.annons--3d .ad-offer:nth-child(2) { grid-column: 3; justify-self: start; margin-bottom: 30vh; --from: 55vw; --turn: -40deg; --roll: 7deg; }
.annons--3d .ad-offer:nth-child(3) { grid-column: 1; justify-self: end; margin-top: 22vh; --from: -60vw; --turn: 32deg; --roll: 5deg; }
.annons--3d .ad-offer:nth-child(4) { grid-column: 3; justify-self: start; margin-top: 26vh; --from: 60vw; --turn: -32deg; --roll: -6deg; }
.annons--3d .ad-offer--cta { grid-column: 2; grid-row: 3; justify-self: center; --from: 0px; --turn: 0deg; --roll: 0deg; }
.annons--3d .annons__note { grid-column: 1 / -1; grid-row: 4; text-align: center; margin: 0; }
.annons--3d .annons__stage { perspective: 1200px; }

/* Belopp bryts aldrig mitt i ("6 000 / kr"). Rutnätens kolumner får krympa, så att inget sticker ut på 360 px. */
.pricing > *, .tiers > *, .examples > * { min-width: 0; }
.tier__price, .tier__rebuild strong, .addon strong { white-space: nowrap; }

/* Meddelanden efter inskick utan JavaScript (uppdrag 6). */
.form-banner { display: none; margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; background: #fbe4dc; color: var(--error); font-weight: 600; scroll-margin-top: 24px; }
.form-banner:target { display: block; }

/* 404-sidan (uppdrag 7). */
.page--404 { display: grid; gap: 14px; justify-items: start; }
.lang-block { display: contents; }
.page__code { margin: 18px 0 0; font: 800 clamp(4rem, 14vw, 8rem)/0.9 var(--display); color: transparent; -webkit-text-stroke: 2px var(--ink); letter-spacing: -0.03em; }
.page__actions { display: flex; flex-wrap: wrap; gap: 10px; }
a[href^="tel:"] { white-space: nowrap; } /* telefonnumret bryts aldrig mitt i */

/* Hoppa till formuläret (uppdrag 8): första länken på sidan, syns bara när den får fokus med tangentbordet. */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Mobil (uppdrag 10): exemplen i priserna ligger i en rad man sveper i sidled, i stället för staplade på höjden.
   Nästa kort sticker fram i kanten, så att det syns att det finns fler. Ett ensamt kort tar hela bredden. */
@media (max-width: 699px) {
  .examples { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 10px; scrollbar-width: thin; }
  .examples:not(:has(> .example:not([hidden]) ~ .example:not([hidden]))) { grid-auto-columns: 100%; }
  .example { scroll-snap-align: start; }
}
.example { position: relative; } /* skärmläsartexten "(öppnas i ny flik)" stannar i kortet */

/* Bilen i "Så hänger det ihop" (uppdrag 11): handritad stil, kör längs vägen under stegen. */
.road { position: relative; height: 92px; margin: 18px 0 4px; --road-l: 8%; --road-r: 92%; }
@media (min-width: 900px) { .road { --road-l: calc(100% / 6); --road-r: calc(500% / 6); } }
.road__line { position: absolute; left: 0; right: 0; bottom: 6px; width: 100%; height: 40px; overflow: visible; }
.road__line path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 14 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.road__line .road__edge { stroke-width: 1.2; stroke-dasharray: none; opacity: 0.35; }
.road__stop { position: absolute; bottom: 0; left: calc(var(--road-l) + (var(--road-r) - var(--road-l)) * var(--at)); transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--ink); display: grid; place-items: center; font: 800 0.8rem var(--display); }
.car { position: absolute; left: 0; bottom: 18px; width: 120px; height: 60px; overflow: visible; transform: translateX(var(--car-x, 0px)); will-change: transform; }
@media (max-width: 599px) { .car { width: 88px; height: 44px; bottom: 20px; } }
.car__paint { fill: #f6c3ad; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.car__sketch { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.45; }
.car__glass { fill: #fffdf9; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.car__line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.car__light { fill: #fff3b0; stroke: var(--ink); stroke-width: 1.2; }
.car__shadow { fill: rgb(20 24 31 / 0.18); }
.car__body { transform: translateY(var(--car-bob, 0px)); }
.car__wheel { transform-box: view-box; transform-origin: var(--cx) 52px; transform: rotate(var(--car-turn, 0deg)); }
.car__wheel circle:first-child { fill: var(--ink); }
.car__hub { fill: #c9c3b8; }
.car__wheel path { stroke: #c9c3b8; stroke-width: 1.4; }
.car__puffs circle { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: var(--car-puff, 0); }
.chain li { transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; }
.chain li.is-here { border-color: var(--accent-ink); box-shadow: 0 12px 28px -18px rgb(178 61 23 / 0.6); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .chain li { transition: none; } .chain li.is-here { transform: none; } }

/* Musen (uppdrag 11, assets/js/tilt.js): korten lutar sig mot pekaren med en svag ljusreflex; knapparna är magnetiska. */
.has-tilt .service, .has-tilt .tier, .has-tilt .addon, .has-tilt .offer, .has-tilt .steps li, .has-tilt .chain li, .has-tilt .ad-offer {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s ease var(--reveal-delay, 0ms), box-shadow 0.3s, border-color 0.3s;
}
.has-tilt .is-tilting { transition: transform 0.12s ease-out, opacity 0.6s ease, box-shadow 0.3s, border-color 0.3s; box-shadow: 0 18px 36px -24px rgb(20 24 31 / 0.45); }
/* Ljusreflexen (inte på stegen, där ::after är pilen mellan korten). */
.has-tilt .is-tilting:is(.service, .tier, .addon, .offer, .ad-offer)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.5), transparent 60%); mix-blend-mode: soft-light; }
.has-tilt .service, .has-tilt .tier, .has-tilt .addon, .has-tilt .offer, .has-tilt .ad-offer { position: relative; }
.has-tilt .chain li.is-here { --lift: -3px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift)); }
.has-tilt .btn--primary, .has-tilt .btn--dark { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s; }
.has-tilt .is-magnet { transform: translate(var(--bx, 0px), var(--by, 0px)); }
/* I annonsscenen på dator och när ett kort tonar in styr de rörelserna själva. */
.has-tilt .annons--3d .ad-offer { transition: none; }
.has-tilt .reveal:not(.is-in) { transform: translateY(22px); }

/* Resan högst upp (uppdrag 11, assets/js/trip.js): en streckad väg och en liten bil som visar hur långt ner man är. */
.trip { position: fixed; top: 0; left: 0; right: 0; height: 24px; z-index: 40; pointer-events: none; opacity: 0; transition: opacity 0.4s; background: rgb(246 242 234 / 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 1px 0 rgb(20 24 31 / 0.08); }
.trip.is-on { opacity: 1; }
.trip::after { content: ""; position: absolute; left: 0; right: 0; top: 20px; border-top: 1.5px dashed rgb(20 24 31 / 0.45); }
.trip__car { position: absolute; left: 0; top: 2px; width: 38px; height: 19px; transform: translateX(var(--trip-x, 0px)) scaleX(var(--trip-dir, 1)); transition: transform 0.12s linear; overflow: visible; }
.trip__car .car__paint { stroke-width: 4; }
.trip__car .car__glass { stroke-width: 3; }
.trip__wheel { fill: var(--ink); }
@media (prefers-reduced-motion: reduce) { .trip { display: none; } }

/* Vilken nivå passar dig? (uppdrag 11, assets/js/picker.js) */
.picker { margin: 0 0 18px; padding: 18px 20px; background: var(--card); border: 1px dashed #b9ae9c; border-radius: var(--radius); display: grid; gap: 12px; }
.picker__title { margin: 0; font: 800 1.2rem var(--display); }
.picker fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.picker legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 0.95rem; }
.picker__options { display: flex; flex-wrap: wrap; gap: 8px; }
.picker__options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.picker__options label { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 14px; border: 1.5px solid #c9c0b1; border-radius: 999px; background: #fff; font-size: 0.95rem; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.picker__options input:checked + label { background: var(--ink); border-color: var(--ink); color: #fff; }
.picker__options input:focus-visible + label { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.picker__result { margin: 4px 0 0; font-weight: 600; }
.picker__result a { color: var(--accent-ink); }
.tier.is-picked { border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgb(178 61 23 / 0.25); }
.tier.is-picked::before { content: "Passar dig"; position: absolute; top: -12px; right: 16px; background: var(--accent-ink); color: #fff; font: 700 0.8rem var(--body); padding: 3px 10px; border-radius: 999px; }
.tier { position: relative; scroll-margin-top: 64px; } /* under remsan högst upp */
.nowrap { white-space: nowrap; }

/* --- Frågor som glider upp och ihop (uppdrag 11) ---
   Rent CSS: webbläsare med ::details-content och interpolate-size (Chromium) får mjuk höjd, övriga öppnar direkt som
   förut. Plustecknet vrids till ett kryss när svaret är öppet. */
.faq summary, .terms summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker, .terms summary::-webkit-details-marker { display: none; }
.faq summary::after, .terms summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
  border: 1.5px solid var(--line); transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.faq details[open] > summary::after, .terms[open] > summary::after { transform: rotate(135deg); color: var(--accent-ink); border-color: var(--accent-ink); }
.faq summary:hover::after, .terms summary:hover::after { border-color: var(--accent-ink); color: var(--accent-ink); }
.faq details { transition: opacity 0.6s ease var(--reveal-delay, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms), border-color 0.25s, box-shadow 0.25s; }
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 10px 30px -18px rgba(20, 24, 31, .35); }
@supports (interpolate-size: allow-keywords) {
  .faq details, .terms { interpolate-size: allow-keywords; }
  .faq details::details-content, .terms::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size 0.4s cubic-bezier(.2, .7, .2, 1), opacity 0.3s, content-visibility 0.4s allow-discrete;
  }
  .faq details[open]::details-content, .terms[open]::details-content { block-size: auto; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content, .terms::details-content, .faq summary::after, .terms summary::after { transition: none; }
}

/* --- Demon byggs (uppdrag 11, assets/js/build.js) ---
   Utan JavaScript och vid minskad rörelse är --t 1 och --turn 0: den färdiga demon, rakt fönster. */
.steps-wrap { display: grid; gap: 28px; margin-top: 32px; align-items: center; }
.steps-wrap .steps { margin-top: 0; }
@media (min-width: 900px) {
  .steps-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; }
  .steps-wrap .steps { grid-template-columns: none; }
}
.steps li { transition: border-color 0.3s, box-shadow 0.3s; }
.steps li.is-here { border-color: var(--accent-ink); box-shadow: 0 12px 28px -18px rgb(178 61 23 / 0.6); }
.build { perspective: 1400px; max-width: 620px; width: 100%; justify-self: center; }
.build__window {
  --turn: 0; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 50px 80px -50px rgb(20 24 31 / 0.55), 0 1px 2px rgb(20 24 31 / 0.06);
  transform: rotateX(calc(var(--turn) * 16deg)) rotateY(calc(var(--turn) * -20deg)) scale(calc(1 - var(--turn) * 0.06));
  transform-origin: 50% 60%;
}
.build__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #efe9de; border-bottom: 1px solid var(--line); }
.build__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d6cdbd; }
.build__bar i:first-child { background: #e98b6d; }
.build__url { margin-left: 10px; flex: 1; max-width: 200px; min-width: 0; font: 600 0.72rem/1 var(--body, system-ui); color: #6b6459; background: #fff; border-radius: 6px; padding: 5px 10px; }
.build__page {
  perspective: 900px; position: relative; aspect-ratio: 16 / 10; padding: 5% 6%;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 4%; row-gap: 7%;
}
.bb {
  display: block; border-radius: 6px; opacity: var(--t, 1);
  transform: translate3d(calc(var(--x, 0px) * (1 - var(--t, 1))), calc(var(--y, 0px) * (1 - var(--t, 1))), calc(-280px * (1 - var(--t, 1))))
    rotate(calc(var(--r, 0deg) * (1 - var(--t, 1))));
}
.bb--logo { grid-column: 1 / 3; grid-row: 1; width: 70%; height: 12px; background: var(--ink); align-self: center; }
.bb--menu { grid-column: 4 / 7; grid-row: 1; justify-self: end; align-self: center; width: 90%; height: 8px; background: linear-gradient(90deg, #cfc6b6 0 22%, transparent 22% 30%, #cfc6b6 30% 52%, transparent 52% 60%, #cfc6b6 60% 76%, transparent 76% 80%, var(--accent) 80%); border-radius: 4px; }
.bb--h1, .bb--txt, .bb--btn { grid-column: 1 / 4; grid-row: 2; }
.bb--h1 { height: 16px; width: 92%; background: var(--ink); align-self: start; margin-top: 6%; }
.bb--h1b { width: 66%; margin-top: calc(6% + 26px); }
.bb--txt { height: 22px; width: 84%; align-self: start; margin-top: calc(6% + 62px); background: repeating-linear-gradient(#d9d1c3 0 5px, transparent 5px 9px); border-radius: 2px; }
.bb--btn { width: 38%; height: 20px; border-radius: 999px; background: var(--accent); align-self: start; margin-top: calc(6% + 100px); }
.bb--img { grid-column: 4 / 7; grid-row: 2; position: relative; overflow: hidden; border-radius: 10px; background: linear-gradient(160deg, #f7d9b9, #e9a77f 60%, #c9714d); min-height: 90px; }
.bb__sun { position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #fff3dc; right: 16%; top: 16%; }
.bb__hill { position: absolute; inset: 55% -10% -20% -10%; border-radius: 50% 50% 0 0; background: #8f4a32; }
.bb--card { grid-row: 3; height: 54px; border: 1px solid var(--line); background: #faf7f1; border-radius: 8px; }
.bb--card:nth-of-type(8) { grid-column: 1 / 3; }
.bb--card:nth-of-type(9) { grid-column: 3 / 5; }
.bb--card:nth-of-type(10) { grid-column: 5 / 7; }
.build__done {
  position: absolute; right: 10px; top: 5px; padding: 4px 11px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 700 0.78rem/1.25 var(--display); white-space: nowrap; opacity: 0; transform: translateY(-6px) scale(0.85);
  transition: opacity 0.35s, transform 0.45s cubic-bezier(.2, 1.4, .4, 1);
}
.build__window.is-done .build__done { opacity: 1; transform: none; }
@media (max-width: 699px) {
  /* Mobil: lättare, bitarna glider in utan djup och fönstret står rakt. */
  .build__page { perspective: none; }
  .build__url { max-width: 42%; }
  .build__window { transform: rotateX(calc(var(--turn) * 14deg)) scale(calc(1 - var(--turn) * 0.05)); transform-origin: 50% 100%; } /* lättare 3D än på dator */
  .bb--txt { margin-top: calc(6% + 52px); }
  .bb--btn { margin-top: calc(6% + 84px); height: 16px; }
  .bb--h1 { height: 12px; } .bb--h1b { margin-top: calc(6% + 22px); }
}
@media (prefers-reduced-motion: reduce) { .build__done, .steps li { transition: none; } }

/* --- Kvittot när formuläret har skickats (uppdrag 11, lead-form.js) --- */
.sent { display: block; position: relative; height: 60px; margin-bottom: 10px; }
.sent svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sent__check { width: 56px; height: 56px; stroke: var(--accent-ink); stroke-width: 3; }
.sent__check circle { stroke-dasharray: 158; stroke-dashoffset: 158; animation: sent-draw 0.55s 0.5s cubic-bezier(.4, 0, .2, 1) forwards; }
.sent__check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: sent-draw 0.35s 0.9s ease-out forwards; }
.sent__plane { position: absolute; left: 6px; top: 10px; width: 40px; height: 40px; stroke: var(--ink); stroke-width: 2.2; fill: #fff; opacity: 0;
  animation: sent-fly 1.1s cubic-bezier(.45, 0, .55, 1) forwards; }
.sent__plane path:last-child { fill: none; }
@keyframes sent-draw { to { stroke-dashoffset: 0; } }
@keyframes sent-fly {
  0% { opacity: 0; transform: translate(0, 16px) rotate(12deg) scale(0.8); }
  15% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  60% { opacity: 1; transform: translate(130px, -6px) rotate(-6deg) scale(1); }
  100% { opacity: 0; transform: translate(min(64vw, 420px), -14px) rotate(-14deg) scale(0.9); }
}
.form-status--done { animation: sent-rise 0.5s 0.6s both cubic-bezier(.2, .7, .2, 1); }
@keyframes sent-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .sent__plane { display: none; }
  .sent__check circle, .sent__check path { animation: none; stroke-dashoffset: 0; }
  .form-status--done { animation: none; }
}

/* --- Små teckningar i tjänstekorten (uppdrag 11) ---
   Ritas upp när kortet glider in (reveal.js sätter .reveal och .is-in). Utan JavaScript och vid minskad rörelse står
   de färdiga. Hemsida: muspekaren klickar på knappen. Marknadsföring: ett hjärta och en bokning poppar upp. */
.service { position: relative; grid-template-columns: minmax(0, 1fr) auto; }
.service > * { grid-column: 1 / -1; }
.service > h3 { grid-column: 1; grid-row: 1; align-self: end; }
.service__ill { grid-column: 2; grid-row: 1; width: clamp(64px, 7vw, 92px); height: auto; overflow: visible; margin: -4px -4px 0 0; }
.ill { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ill__dot { fill: #d6cdbd; stroke: none; }
.ill__btn { fill: var(--accent); stroke: none; }
.ill__cursor { fill: #fff; stroke-width: 1.5; transform: translate(31px, 53px); }
.ill__ripple { stroke: var(--accent); stroke-width: 1.8; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ill__heart { fill: var(--accent); stroke: none; }
.ill__cal rect { fill: #fff; }
.ill__btn, .ill__pop, .ill__dot { transform-box: fill-box; transform-origin: center; }
.reveal .ill__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal.is-in .ill__line { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s cubic-bezier(.4, 0, .2, 1) calc(var(--reveal-delay, 0ms) + 0.15s); }
.reveal :is(.ill__btn, .ill__pop, .ill__dot) { opacity: 0; transform: scale(0.3); }
.reveal.is-in :is(.ill__btn, .ill__pop, .ill__dot) { opacity: 1; transform: none; transition: opacity 0.25s, transform 0.45s cubic-bezier(.2, 1.6, .4, 1); transition-delay: calc(var(--reveal-delay, 0ms) + 0.85s); }
.reveal.is-in .ill__heart { transition-delay: calc(var(--reveal-delay, 0ms) + 1.15s); }
.reveal.is-in .ill__cal { transition-delay: calc(var(--reveal-delay, 0ms) + 1.45s); }
.reveal .ill__cursor { opacity: 0; transform: translate(84px, 74px); }
.reveal.is-in .ill__cursor { animation: ill-cursor 1.1s calc(var(--reveal-delay, 0ms) + 1s) both cubic-bezier(.45, 0, .3, 1); }
.reveal.is-in .ill__ripple { animation: ill-ripple 0.6s calc(var(--reveal-delay, 0ms) + 1.85s) both ease-out; }
@keyframes ill-cursor {
  0% { opacity: 0; transform: translate(84px, 74px); }
  20% { opacity: 1; }
  70% { opacity: 1; transform: translate(31px, 53px); }
  80% { transform: translate(31px, 53px) scale(0.82); }
  100% { opacity: 1; transform: translate(31px, 53px); }
}
@keyframes ill-ripple { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(1.7); } }

/* --- Krom-RS i kontaktavsnittet (uppdrag 11) ---
   Bara på dator (på mobil ska formuläret komma direkt). Svävar sakta, vänder sig mot musen (tilt.js sätter --rx/--ry
   och --sheen) och en ljusreflex glider över bokstäverna. Vid minskad rörelse står den still. */
.sign { display: none; }
@media (min-width: 900px) {
  .sign { display: block; position: relative; margin-top: clamp(32px, 5vw, 64px); max-width: 400px; perspective: 900px; }
  .sign__float { animation: sign-float 6s ease-in-out infinite; }
  .sign__obj {
    position: relative; /* platt ordmärke sedan 1235: ingen lutning i 3D */
  }
  .sign__img { display: block; width: 100%; height: auto; opacity: 0.22; transition: opacity 1.4s ease 0.6s; }
  /* Ordmärket tänds som i introt (Ultron 13:15): svagt ljus, sedan sveper ett ljus över bokstäverna och ordmärket
     blir fullt synligt när man skrollar dit (.is-lit sätts i main.js). Platt, ingen 3D. */
  .sign.is-lit .sign__img { opacity: 1; }
  .sign__sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0;
    -webkit-mask: url(/assets/img/logo/rothman-ordmarke.svg) center / 100% 100% no-repeat; mask: url(/assets/img/logo/rothman-ordmarke.svg) center / 100% 100% no-repeat;
    background: linear-gradient(100deg, transparent 35%, rgb(255 222 196 / 0.95) 48%, rgb(255 255 255 / 0.9) 52%, transparent 65%) 120% 0 / 300% 100% no-repeat; }
  .sign.is-lit .sign__sweep { animation: sign-light 1.8s 0.2s cubic-bezier(.4, 0, .2, 1) both; }
  @keyframes sign-light { 0% { opacity: 1; background-position: 120% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -20% 0; } }
  .sign__shadow { display: block; width: 72%; height: 26px; margin: 10px auto 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(20 24 31 / 0.26), transparent); animation: sign-shadow 6s ease-in-out infinite; }
}
@keyframes sign-float { 50% { transform: translateY(-10px); } }
@keyframes sign-shadow { 50% { transform: scale(0.86); opacity: 0.7; } }
@keyframes sign-sweep { 0%, 100% { background-position: 95% 0; } 50% { background-position: 5% 0; } }
@media (prefers-reduced-motion: reduce) { .sign__float, .sign__shadow, .sign__sweep { animation: none; } .sign__obj { transition: none; } .sign__img { opacity: 1; transition: none; } }

/* --- Handritad linje under "Fler kunder" (uppdrag 11) ---
   En penseldragslinje (SVG som bakgrund på ::after, så att rubrikens text är orörd) som ritas fram från vänster en gång
   när sidan öppnas. I fullt läge står den färdig från början: kopian på laptopen är en klon av heron, så linjen syns
   redan där och inget ritas in efter bytet (inkorg 1415). Vid minskad rörelse står den också färdig. */
.mark { position: relative; white-space: nowrap; }
.mark::after {
  content: ""; position: absolute; left: -1%; width: 102%; bottom: -0.05em; height: 0.2em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C48 4 118 2 197 6' fill='none' stroke='%23E4572E' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); animation: mark-draw 0.9s 0.35s cubic-bezier(.6, 0, .2, 1) forwards;
}
html[data-hero-mode="loading"] .mark::after { animation: none; clip-path: inset(0 100% 0 0); }
html[data-hero-mode="full"] .mark::after { animation: none; clip-path: none; }
@keyframes mark-draw { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .mark::after { animation: none; clip-path: none; } }

/* Målflaggan längst till höger på resan (uppdrag 11): vajar när bilen är framme vid formuläret. */
.trip__flag { position: absolute; right: 8px; top: 0; width: 18px; height: 22px; overflow: visible; }
.trip__pole { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.trip__cloth { fill: var(--accent); transform-box: fill-box; transform-origin: 0 50%; transition: transform 0.4s cubic-bezier(.2, 1.6, .4, 1); transform: scaleX(0.75); }
.trip.is-there .trip__cloth { transform: none; animation: trip-wave 1.4s 0.3s ease-in-out infinite; }
@keyframes trip-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-8deg) scaleX(0.9); } }

/* --- Avsnitten som prickar längs högerkanten (uppdrag 11, assets/js/toc.js) ---
   Bara på breda skärmar med mus, där det finns plats bredvid innehållet (som är högst 1240 px). */
.toc { display: none; }
@media (min-width: 1400px) and (hover: hover) {
  .toc { position: fixed; right: 22px; top: 50%; z-index: 30; display: grid; gap: 16px; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 0.4s; }
  .toc.is-on { opacity: 1; pointer-events: auto; }
  .toc::before { content: ""; position: absolute; right: 5px; top: 6px; bottom: 6px; border-right: 1.5px dashed rgb(20 24 31 / 0.25); }
  .toc a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 14px; color: var(--ink); text-decoration: none; }
  .toc a::after { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 1.5px solid rgb(20 24 31 / 0.45); transition: transform 0.3s cubic-bezier(.2, 1.6, .4, 1), background-color 0.3s, border-color 0.3s; }
  .toc a:hover::after { border-color: var(--accent-ink); }
  .toc a.is-here::after { background: var(--accent); border-color: var(--accent-ink); transform: scale(1.35); }
  .toc span { font: 600 0.8rem/1 var(--body, system-ui); white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 18px -10px rgb(20 24 31 / 0.4);
    opacity: 0; transform: translateX(8px); transition: opacity 0.2s, transform 0.25s; pointer-events: none; }
  .toc a:hover span, .toc a:focus-visible span { opacity: 1; transform: none; }
  .toc:focus-within { opacity: 1; pointer-events: auto; }
  .toc a:focus-visible { border-radius: 999px; }
}
@media (prefers-reduced-motion: reduce) { .toc, .toc a::after, .toc span { transition: none; } }

/* Annonsavsnittet i 3D (uppdrag 11): pekarlinjer från erbjudandena till telefonen och en mjuk skugga under den. */
.annons__lines { display: none; }
.annons--3d .annons__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.annons__lines path { fill: none; stroke: rgb(20 24 31 / 0.4); stroke-width: 1.5; stroke-dasharray: 4 5; stroke-linecap: round; }
.annons__lines circle { fill: var(--accent); }
.annons--3d .annons__phone { position: relative; }
.annons--3d .annons__phone::after {
  content: ""; position: absolute; left: 50%; bottom: 3%; width: min(260px, 70%); height: 34px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(20 24 31 / 0.3), transparent); pointer-events: none; z-index: -1;
}

/* Vald nivå i formuläret (uppdrag 11): poppar in när man trycker "Välj Premium" osv. i prislistan. */
.chosen { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 6px 6px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 9%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.chosen[hidden] { display: none; }
.chosen.is-new { animation: chosen-pop 0.5s cubic-bezier(.2, 1.5, .4, 1); }
.chosen__clear { flex: none; white-space: nowrap; min-height: 36px; padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--accent-ink); font: 600 0.9rem var(--body); text-decoration: underline; cursor: pointer; }
.chosen__clear:hover { background: rgb(178 61 23 / 0.08); }
@keyframes chosen-pop { from { opacity: 0; transform: translateY(-8px) scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .chosen.is-new { animation: none; } }

/* --- Djup och ljus (uppdrag 11) ---
   1) Bilden i heron sjunker in lite i djupet när man skrollar förbi den. Ren CSS med skrollstyrd animation, bara i
      webbläsare som stöder det och aldrig vid minskad rörelse. Påverkar inte bytet i introt (bilden lämnar inte
      skärmen då).
   2) Det mörka marknadsföringskortet får en glödande kant som följer musen (dator, tilt.js sätter --mx/--my). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media { display: block; overflow: clip; border-radius: var(--radius); } /* clip, inte hidden: annars blir ramen själv skrollbehållaren för view() */
    .hero__media img { transform-origin: 50% 35%; animation: hero-depth linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes hero-depth { to { transform: scale(1.14) translateY(7%); } }
.has-tilt .offer::before {
  content: ""; position: absolute; inset: -6px 0 0; border-radius: inherit; padding: 3px; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), #ffe6da, #f06a43 40%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.has-tilt .offer.is-tilting::before { opacity: 1; }

/* Pappersflygplanet i skicka-knappen (uppdrag 11): lyfter lite när man pekar på knappen och flyger iväg när
   förfrågan skickas; kvittot tar sedan över med samma flygplan. */
.btn__plane { flex: none; width: 18px; height: 18px; margin-left: 10px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; transition: transform 0.3s cubic-bezier(.2, 1.4, .4, 1); }
.btn:hover .btn__plane, .btn:focus-visible .btn__plane { transform: translate(3px, -3px) rotate(-8deg); }
.is-sending .btn__plane { animation: btn-plane-off 0.7s cubic-bezier(.5, 0, .7, .4) forwards; }
@keyframes btn-plane-off { to { transform: translate(70px, -46px) rotate(-22deg) scale(0.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .btn__plane { transition: none; } .btn:hover .btn__plane { transform: none; } .is-sending .btn__plane { animation: none; } }

/* Mobil (uppdrag 11): prickar under exemplen man sveper i sidled (swipe.js), och mobilknappen glider upp med ett
   ljussvep över "Fyll i formuläret" när den visas. */
.swipe-dots { display: none; }
@media (max-width: 699px) {
  .swipe-dots { display: flex; justify-content: center; gap: 7px; margin-top: 8px; }
  .swipe-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgb(20 24 31 / 0.22); transition: width 0.3s cubic-bezier(.2, .7, .2, 1), background-color 0.3s; }
  .swipe-dots i.is-here { width: 20px; background: var(--accent-ink); }
}
.mobile-cta:not([hidden]) { animation: cta-up 0.35s cubic-bezier(.2, .7, .2, 1); }
.mobile-cta .btn--primary { position: relative; overflow: hidden; }
.mobile-cta:not([hidden]) .btn--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.4) 50%, transparent 70%);
  animation: cta-shine 1.2s 0.45s ease-in-out;
}
@keyframes cta-up { from { transform: translateY(100%); } }
@keyframes cta-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .mobile-cta:not([hidden]), .mobile-cta:not([hidden]) .btn--primary::after { animation: none; } .swipe-dots i { transition: none; } }
.mobile-cta { background: rgb(246 242 234 / 0.9); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }

/* --- 404: bilen har kört vilse (uppdrag 11) ---
   Kör till vägens slut, stannar och undrar ("?"), backar tillbaka. Vid minskad rörelse står den vid vägens slut. */
.lost { position: relative; width: 100%; max-width: 520px; height: 84px; margin: 4px 0 6px; }
.lost__road { position: absolute; left: 0; right: 44px; bottom: 14px; border-top: 2px dashed rgb(20 24 31 / 0.45); }
.lost__end { position: absolute; right: 8px; bottom: 4px; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 6px; background: #fff3b0; font: 800 1.1rem/1 var(--display); transform: rotate(8deg); }
.lost__drive { position: absolute; bottom: 4px; left: 0; width: 96px; height: 48px; animation: lost-drive 6.5s cubic-bezier(.45, 0, .4, 1) infinite; }
.lost .car { position: static; display: block; width: 96px; height: 48px; transform: none; }
.lost .car__wheel { animation: lost-wheel 6.5s cubic-bezier(.45, 0, .4, 1) infinite; }
.lost__q { position: absolute; left: 62px; top: -26px; font: 800 1.4rem/1 var(--display); color: var(--accent-ink); opacity: 0; transform: scale(0.4); animation: lost-q 6.5s ease-out infinite; }
@keyframes lost-drive { 0% { left: 0; } 42%, 70% { left: calc(100% - 96px - 52px); } 100% { left: 0; } }
@keyframes lost-wheel { 0% { transform: rotate(0deg); } 42%, 70% { transform: rotate(900deg); } 100% { transform: rotate(0deg); } }
@keyframes lost-q { 0%, 44% { opacity: 0; transform: scale(0.4); } 50%, 66% { opacity: 1; transform: scale(1) rotate(-8deg); } 72%, 100% { opacity: 0; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) {
  .lost__drive { animation: none; left: calc(100% - 96px - 52px); }
  .lost .car__wheel { animation: none; }
  .lost__q { animation: none; opacity: 1; transform: none; }
}
.page--tack .sent { margin-bottom: 18px; }

/* Mobilens film ur 3D-scenen (uppdrag 11, hero-film.js): ligger exakt över stillbilden och tonar in när den spelar. */
.hero__media { position: relative; display: block; }
.hero__media picture { display: block; }
/* "Ny förfrågan!" vid laptopen i heron (inkorg 1038): bara dekoration, poppar upp en gång när sidan visas. */
.hero__ping { position: absolute; left: 58%; top: 46%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; background: #fff; color: var(--ink);
  font: 700 0.85rem var(--body); box-shadow: 0 12px 28px -14px rgb(20 24 31 / 0.55); pointer-events: none; animation: hero-ping 0.6s 1.2s cubic-bezier(.2, 1.4, .4, 1) both; }
.hero__ping::after { content: ""; position: absolute; left: 22px; bottom: -5px; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); }
.hero__ping svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hero-ping { from { opacity: 0; transform: translateY(8px) scale(0.85); } }
@media (max-width: 599px) { .hero__ping { font-size: 0.75rem; padding: 4px 10px 4px 7px; } }
@media (prefers-reduced-motion: reduce) { .hero__ping { animation: none; } }
/* Mål för länkar inom sidan får fokus (main.js) men ingen ram runt hela avsnittet. */
:is(section, article, div)[tabindex="-1"]:focus { outline: none; }

/* Typografi (uppdrag 11): jämna radbrytningar i rubriker och inga ensamma ord sist i stycken. Inte i heron, som måste
   vara identisk med skärmbilden på laptopen i introt. */
.section :is(h2, h3, h4) { text-wrap: balance; }
.section :is(p, li) { text-wrap: pretty; }
.keep { display: inline-block; } /* håller ihop en fras på egen rad om den får plats */

/* Mobil och lätt läge (uppdrag 11): telefonen i annonsavsnittet vrider sig in från sidan och rätar upp sig när man
   skrollar fram till den, med en kantglans som följer vridningen. Ren CSS, bara där skrollstyrda animationer finns,
   aldrig vid minskad rörelse. Datorn i fullt läge har 3D-telefonen i WebGL i stället. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .annons:not(.annons--3d) .annons__phone { perspective: 900px; }
    .annons:not(.annons--3d) .phone { transform-origin: 50% 60%; animation: phone-turn linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  }
}
@keyframes phone-turn {
  from { transform: rotateY(-32deg) rotateX(12deg) rotateZ(-4deg) scale(0.9); box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 30px 40px 50px -24px rgb(20 24 31 / 0.5); }
  to { transform: none; }
}

/* Prislistan på mobil (uppdrag 11, fold.js): de tre första punkterna syns, resten fälls ut med knappen. */
.tier__list.is-folded > li:nth-child(n + 4) { display: none; }
.tier__list.is-folded { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.fold { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: -4px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 0.92rem var(--body); cursor: pointer; }
.fold::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s; }
.fold[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.fold:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .fold::after { transition: none; } }

/* "Skrolla" i introts första scen (uppdrag 11): talar om hur introt spelas, tonar bort när man börjat skrolla. */
.intro__hint { position: absolute; z-index: 2; left: 50%; bottom: 30px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px;
  color: rgb(243 239 231 / 0.8); font: 600 0.8rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; opacity: var(--hint, 1); pointer-events: none;
  transition: opacity 0.3s; }
.intro__hint i { width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: 12px; position: relative; }
.intro__hint i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: hint-wheel 1.6s ease-in-out infinite; }
@keyframes hint-wheel { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 70% { opacity: 0; transform: translateY(9px); } 100% { opacity: 0; } }
.intro[data-render] .intro__hint { display: none; }
@media (prefers-reduced-motion: reduce) { .intro__hint i::after { animation: none; } }

/* Bock i rätt ifyllda fält (uppdrag 11, lead-form.js): glider in från höger när man lämnat fältet. */
.field input { background: #fff no-repeat right -24px center / 18px; transition: background-position 0.35s cubic-bezier(.2, 1.4, .4, 1), border-color 0.2s; }
.field.is-ok input { padding-right: 40px; background-position: right 13px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%232e7d4f'/%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .field input { transition: none; } }

/* "Spela introt igen" för återkommande besökare (uppdrag 11, intro.js). */
.replay { margin-left: auto; margin-right: 16px; min-height: 36px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 0.85rem var(--body); cursor: pointer; animation: replay-in 0.5s 0.6s both cubic-bezier(.2, .7, .2, 1); }
.replay:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
@keyframes replay-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .replay { animation: none; } }

/* "Kopiera" bredvid mejladressen (uppdrag 11). */
.copy { margin-left: 8px; min-height: 32px; padding: 3px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 0.85rem var(--body); cursor: pointer; vertical-align: middle; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.copy:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.copy.is-done { background: #2e7d4f; border-color: #2e7d4f; color: #fff; animation: chosen-pop 0.4s cubic-bezier(.2, 1.5, .4, 1); }
@media (prefers-reduced-motion: reduce) { .copy.is-done { animation: none; } }

/* Efter vanliga frågor (uppdrag 11): ring eller sms:a om svaret saknas. */
.faq__more { margin-top: 22px; max-width: 52rem; display: grid; gap: 10px; padding: 18px 20px; border: 1.5px dashed rgb(20 24 31 / 0.25); border-radius: var(--radius); }
.faq__more p { margin: 0; }
.faq__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* "Prova: dra i kuben" (uppdrag 11, cube.js): kub i CSS-3D i tillägget 3D och rörelse. */
.try { display: flex; align-items: center; gap: 22px; margin: 10px 0 12px; padding-left: 16px; }
.try[hidden] { display: none; }
.try__hint { margin: 0; font-size: 0.95rem; max-width: 26rem; }
.cube { --s: 80px; flex: none; width: var(--s); height: var(--s); perspective: 700px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.cube.is-dragging { cursor: grabbing; }
.cube__body { position: relative; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: rotateX(-18deg) rotateY(32deg); will-change: transform; }
.cube__f { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; border: 2px solid var(--ink); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  font: 800 1.5rem/1 var(--display); color: var(--ink); background: #fffdf9; }
.cube__f img { width: 80%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.cube__f--front { transform: translateZ(calc(var(--s) / 2)); }
.cube__f--back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); background: var(--accent); color: #fff; }
.cube__f--right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background: var(--ink); color: #fff; font-size: 1.1rem; }
.cube__f--left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); background: #f6c3ad; }
.cube__f--top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: repeating-linear-gradient(45deg, #efe9de 0 8px, #fffdf9 8px 16px); }
.cube__f--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: var(--ink); }
@media (max-width: 420px) { .cube { --s: 72px; } .try { gap: 14px; } }

/* "Ny förfrågan!" när bilen är framme vid steg 3 (uppdrag 11, road.js). */
.road__ping { position: absolute; left: var(--road-r); bottom: 74px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 700 0.85rem/1 var(--body); white-space: nowrap; transform: translateX(-50%) translateY(8px) scale(0.6); opacity: 0;
  transition: opacity 0.25s, transform 0.45s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; }
.road__ping::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.road__ping svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.road.is-arrived .road__ping { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.road.is-arrived .road__ping svg { animation: ping-bell 0.8s 0.2s ease-in-out 2; transform-origin: 50% 10%; }
@keyframes ping-bell { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@media (max-width: 599px) { .road__ping { left: auto; right: 0; transform: translateY(8px) scale(0.6); } .road.is-arrived .road__ping { transform: none; } .road__ping::after { left: auto; right: 18px; transform: rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .road__ping { transition: none; } .road.is-arrived .road__ping svg { animation: none; } }

/* Små ikoner i "Vad behöver du?" (uppdrag 11), samma streckstil som teckningarna. */
.need__options label { gap: 7px; }
.need__icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.need__options input:checked + label .need__icon { stroke: var(--accent); }
@media (max-width: 359px) { .need__icon { display: none; } }
/* "Till toppen" i sidfoten (uppdrag 11): till heron med formuläret, inte tillbaka genom introt. */
.site-footer__top { display: inline-flex; align-items: center; min-height: 32px; }

/* Ökad kontrast (uppdrag 11): "Öka kontrast" på iPhone/Mac och motsvarande. Tydligare kanter och mörkare grå text. */
@media (prefers-contrast: more) {
  :root { --line: #6f665a; --muted: #3a3f47; }
  .field input, .need__options label, .fold, .copy, .replay { border-color: var(--ink); }
  .tier__list.is-folded { -webkit-mask-image: none; mask-image: none; }
  .annons__lines path { stroke: rgb(20 24 31 / 0.8); }
}

/* --- Ljudknappen på hela sidan (sound.js) ---
   Fast högst upp till vänster på dator (inkorg 1015), direkt efter "Hoppa över intro" och telefonnumret (sound.js
   räknar ut --sound-left), syns både över introt och sidan. Vågorna rör sig när ljudet är på. */
.sound-toggle { position: fixed; left: var(--sound-left, 240px); top: 20px; z-index: 60; transition: top 0.3s; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 11px;
  border: 1.5px solid rgb(20 24 31 / 0.18); border-radius: 999px; background: rgb(255 253 249 / 0.88); color: var(--ink); font: 600 0.85rem var(--body); cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px -14px rgb(20 24 31 / 0.5); }
.sound-toggle[hidden] { display: none; }
.sound-toggle:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.sound-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle__box { fill: currentColor; }
.sound-toggle__wave { display: none; }
.sound-toggle[aria-pressed="true"] { border-color: var(--accent-ink); }
.sound-toggle[aria-pressed="true"] .sound-toggle__off { display: none; }
.sound-toggle[aria-pressed="true"] .sound-toggle__wave { display: inline; stroke: var(--accent-ink); animation: sound-wave 1.6s ease-in-out infinite; transform-origin: 30% 50%; }
@keyframes sound-wave { 50% { opacity: 0.45; } }
.trip.is-on ~ .sound-toggle { top: 32px; } .trip.is-on ~ .sound-tip { top: 38px; } /* under bilvägen högst upp */
/* Tipset första gången: en liten pratbubbla bredvid knappen och en mjuk puls, borta efter sju sekunder eller vid klick. */
.sound-tip { position: fixed; top: 26px; z-index: 60; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 600 0.8rem var(--body); pointer-events: none; transition: opacity 0.4s, top 0.3s; animation: tip-in 0.5s 0.6s both; }
.sound-tip.is-gone { opacity: 0; }
@keyframes tip-in { from { opacity: 0; transform: translateX(-6px); } }
.sound-toggle.is-hinting { animation: sound-pulse 1.8s ease-in-out 3; }
@keyframes sound-pulse { 50% { box-shadow: 0 0 0 7px rgb(228 87 46 / 0.22), 0 8px 24px -14px rgb(20 24 31 / 0.5); } }
@media (prefers-reduced-motion: reduce) { .sound-toggle, .sound-tip { transition: none; animation: none; } .sound-toggle.is-hinting { animation: none; border-color: var(--accent-ink); } }
@media (max-width: 899px) { .sound-toggle, .sound-tip { display: none !important; } }