/* Startsidans showreels (templates/public/partials/showreel.html, static/js/showreel.js).
   Desktop 16:9 och mobil 9:16 – var sin scen, samma motor. Storlekar i cqw så att allt skalar med ramen.
   Bara transform/opacity animeras. Belopp med tabular-nums så att rullande siffror inte hoppar i sidled. */
.sr { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sr-stage {
  --sr-ink: #13241c;
  --sr-muted: #56645b;
  --sr-green: #0f4a37;
  --sr-line: rgb(19 36 28 / 10%);
  position: relative;
  container-type: inline-size;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgb(19 36 28 / 8%);
  border-radius: 28px;
  background: radial-gradient(ellipse 70% 60% at 70% 30%, rgb(2 138 81 / 8%), transparent 70%), #f6f7f2;
  color: var(--sr-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
}
.sr-stage--desktop { aspect-ratio: 16 / 9; }
.sr-stage--mobile { aspect-ratio: 9 / 16; border-radius: 26px; }
.sr-grid {
  position: absolute; inset: 0; opacity: 0.55;
  background-image: linear-gradient(rgb(19 36 28 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(19 36 28 / 5%) 1px, transparent 1px);
  background-size: 4cqw 4cqw;
}
.sr-stage--mobile .sr-grid { background-size: 9cqw 9cqw; }
.sr-stage :is([data-d-composer], [data-d-orb], [data-d-result], [data-d-phone], [data-d-end], .sr-hook p, [data-d-bp], [data-d-tag],
  [data-d-env], [data-d-streak], [data-d-flash], [data-d-glow], [data-d-ripple], [data-d-approved], [data-m-orb], [data-m-sheet],
  [data-m-note], [data-m-end], [data-m-bp], [data-m-tag], [data-m-env], [data-m-streak], [data-m-flash], [data-m-ripple],
  [data-m-approved], .sr-end__cta, .sr-ring, .sr-chip) { opacity: 0; visibility: hidden; }
.sr-stage b, .sr-stage dd, .sr-stage small { font-variant-numeric: tabular-nums; }

/* Delat: kort, rader, summor, knappar, orben, loggan. */
.sr-card {
  position: absolute; inset: 0; margin: auto; width: 46cqw; height: fit-content; padding: 2.4cqw 2.6cqw;
  border: 1px solid var(--sr-line); border-radius: 2cqw; background: #fff;
  box-shadow: 0 1px 2px rgb(19 36 28 / 5%), 0 24px 48px -30px rgb(19 36 28 / 30%);
}
.sr-card__title { margin: 0; font-size: 1.8cqw; font-weight: 500; }
.sr-badge { padding: 0.5cqw 1.2cqw; border-radius: 999px; background: #e8f5ec; color: #0b6b43; font-size: 1.25cqw; }
.sr-row { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 1cqw 0; border-top: 1px solid var(--sr-line); font-size: 1.7cqw; }
.sr-row small { margin-left: 0.4em; color: var(--sr-muted); }
.sr-row b { font-weight: 500; }
.sr-totals { display: grid; margin: 0 0 1.6cqw; padding-top: 0.8cqw; border-top: 1px solid var(--sr-line); font-size: 1.45cqw; }
.sr-totals div { display: flex; justify-content: space-between; padding: 0.4cqw 0; }
.sr-totals dt { color: var(--sr-muted); }
.sr-totals dd { margin: 0; }
.sr-totals .is-rot dd { color: #0b6b43; }
.sr-totals .is-pay { align-items: baseline; }
.sr-totals .is-pay dt { color: var(--sr-ink); }
.sr-totals .is-pay dd { font-size: 2.6cqw; font-weight: 500; }
.sr-send, .sr-approve {
  position: relative; display: grid; place-items: center; min-height: 4.4cqw; overflow: hidden;
  border-radius: 999px; background: var(--sr-green); color: #fff; font-size: 1.55cqw;
}
.sr-send > span, .sr-approve > span { grid-area: 1 / 1; display: inline-flex; gap: 0.45em; align-items: center; }
.sr-send__done, .sr-approve__done { opacity: 0; }
.sr-send .material-symbols-outlined, .sr-approve .material-symbols-outlined { font-size: 1.3em; }
.sr-note { display: flex; gap: 1cqw; align-items: center; margin: 0; padding: 1.1cqw 1.3cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 10px 22px -16px rgb(19 36 28 / 45%); font-size: 1.2cqw; }
.sr-note .material-symbols-outlined { color: #0f7a4c; font-size: 2.2cqw; }
.sr-note b { display: block; font-weight: 500; }
.sr-note small { color: var(--sr-muted); }

/* AI-orben: den riktiga (includes/zimla_ai_orb.html) med app.css-proportioner i --o. */
/* Centrering med inset + margin: auto – GSAP äger transform och skulle nollställa en CSS-translate. */
.sr-orb { --o: 11cqw; position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: fit-content; height: fit-content; }
.sr-orb .zimla-dock-orb { width: var(--o); height: var(--o); outline-width: calc(var(--o) * 0.0364); box-shadow: 0 calc(var(--o) * 0.2) calc(var(--o) * 0.4) calc(var(--o) * -0.22) rgb(5 99 68 / 70%); }
.sr-orb .zimla-dock-orb__gaze { width: calc(var(--o) * 0.6545); height: calc(var(--o) * 0.4364); }
.sr-orb .zimla-dock-orb__eyes { gap: calc(var(--o) * 0.1127); }
.sr-orb .zimla-dock-orb__eye { width: calc(var(--o) * 0.1964); height: calc(var(--o) * 0.3127); }
/* GSAP äger orbens transform – appens övergångar skulle släpa efter. */
.sr-orb :is(.zimla-dock-orb, .zimla-dock-orb__gaze, .zimla-dock-orb__eyes) { transition: none; }
.sr-orb .zimla-dock-orb { position: relative; z-index: 1; }
.sr-ring { position: absolute; inset: 0; margin: auto; width: var(--o); height: var(--o); border: calc(var(--o) * 0.03) solid #10b981; border-radius: 50%; }

/* AI-scenen: nyckelorden som flyger in i orben, planritningen orben ritar. */
.sr-chip { position: absolute; z-index: 3; padding: 0 0.12em; border-radius: 0.3em; background: #dcf1e3; color: #0b6b43; white-space: nowrap; }
.sr-bp { position: absolute; inset: 0; margin: auto; width: 50cqw; height: auto; overflow: visible; }
.sr-bp path { fill: none; stroke: #0f7a4c; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 100; }
.sr-bp .sr-bp__door { stroke-width: 1.6; stroke: #3fbf7f; }
.sr-bp__tag { position: absolute; top: 50%; margin-top: -1.6cqw; padding: 0.5cqw 1.1cqw; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px -10px rgb(19 36 28 / 45%); font-size: 1.5cqw; white-space: nowrap; }
.sr-bp__tag b { color: #0b6b43; font-weight: 500; }
.sr-bp__tag--a { left: 30cqw; }
.sr-bp__tag--b { left: 58cqw; }

/* Beloppen: en siffertrumma per siffra (0–9 två varv), baslinjen följer första raden. */
[data-sr-odo] { display: inline-flex; align-items: flex-start; height: 1.2em; overflow: hidden; line-height: 1.2; vertical-align: baseline; }
[data-sr-odo] > span { white-space: pre; }
.sr-odo__col { display: block; }
.sr-totals .is-pay { margin: 0.2cqw -0.8cqw 0; padding: 0.5cqw 0.8cqw; border-radius: 1cqw; }

/* Skickad: kuvertet, ljusstrimman och tidsstämpeln. */
.sr-envelope { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 1.6cqw; background: var(--sr-green); color: #fff; box-shadow: 0 16px 30px -14px rgb(15 74 55 / 70%); }
.sr-envelope .material-symbols-outlined { font-size: 3.4cqw; }
.sr-streak { position: absolute; left: 50%; top: 50%; width: 46cqw; height: 0.35cqw; margin-top: -0.175cqw; border-radius: 999px; background: linear-gradient(90deg, rgb(16 185 129 / 0%), #10b981); }
.sr-flash { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 6cqw; letter-spacing: -0.02em; }

/* Godkänd: grön våg ur knappen, bocken ritas. */
.sr-ripple { position: absolute; left: 0; top: 0; z-index: 3; width: 10cqw; height: 10cqw; border-radius: 50%; background: #0f7a4c; }
.sr-approved { position: absolute; inset: 0; z-index: 4; display: grid; gap: 1.2cqw; place-content: center; justify-items: center; color: #fff; font-size: 2.2cqw; font-weight: 500; }
.sr-approved svg { width: 9cqw; height: 9cqw; }
.sr-approved :is(circle, path) { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.sr-end__cta { display: inline-flex; gap: 0.5em; align-items: center; margin-top: 0.6cqw; padding: 1cqw 2.2cqw; border-radius: 999px; background: var(--sr-green); color: #fff; font-size: 1.6cqw; }
.sr-end__cta .material-symbols-outlined { font-size: 1.2em; }
.sr-roll { display: inline-grid; overflow: hidden; vertical-align: top; }
.sr-roll > span { grid-area: 1 / 1; }

/* Loggan: 2×2 – svart vänsterkolumn, grön högerkolumn (som .public-home__brand-mark). */
.sr-end { position: absolute; inset: 0; display: grid; gap: 2cqw; place-content: center; justify-items: center; text-align: center; }
.sr-end p { margin: 0; color: var(--sr-muted); font-family: Newsreader, ui-serif, Georgia, serif; font-size: 2.6cqw; }
.sr-logo { display: flex; gap: 1.8cqw; align-items: center; }
.sr-dots { display: grid; grid-template-columns: repeat(2, 2.6cqw); gap: 0.7cqw; }
.sr-dots i { width: 2.6cqw; height: 2.6cqw; border-radius: 45% 55% 52% 48%; background: var(--sr-ink); }
.sr-dots i:nth-child(even) { background: #10b981; }
.sr-logo__word { font-size: 7.4cqw; font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.sr-logo__word span { color: #10b981; }

/* ── Desktop "21:47" ─────────────────────────────────────────────────────────────────────────── */
.sr-night { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 45%, #1c3a2c, #0b1510 70%); opacity: 0; }
.sr-clock { position: absolute; left: 3.6cqw; top: 3cqw; z-index: 2; margin: 0; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 3.4cqw; font-variant-numeric: tabular-nums; line-height: 1; opacity: 0; }
.sr-clock [data-d-clock="b"] { transform: translateY(100%); }
.sr-cam { position: absolute; inset: 0; }
.sr-hook { position: absolute; inset: 0; display: grid; gap: 1.4cqw; place-content: center; justify-items: center; }
.sr-hook p { margin: 0; }
.sr-hook__time { font-family: Newsreader, ui-serif, Georgia, serif; font-size: 13cqw; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; }
.sr-hook__line { color: var(--sr-muted); font-size: 2.4cqw; }
.sr-composer__text mark { margin: 0 -0.08em; padding: 0 0.08em; border-radius: 0.3em; background: transparent; color: inherit; transition: background-color 200ms, color 200ms; }
.sr-composer__text mark.is-on { background: #dcf1e3; color: #0b6b43; }
.sr-phone-glow { position: absolute; inset: 0; margin: auto; width: 62cqw; height: 62cqw; border-radius: 50%; background: radial-gradient(circle, rgb(16 185 129 / 38%), transparent 65%); }
.sr-composer {
  position: absolute; inset: 0; margin: auto; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.2cqw;
  width: 70cqw; height: fit-content; min-height: 6.4cqw; padding: 1cqw 1.2cqw 1cqw 1.8cqw;
  border: 1px solid rgb(19 36 28 / 9%); border-radius: 3.4cqw; background: #fff;
  box-shadow: 0 2px 4px rgb(19 36 28 / 4%), 0 30px 60px -34px rgb(19 36 28 / 45%);
}
.sr-composer__plus { color: var(--sr-muted); font-size: 2.2cqw; }
.sr-composer__field { position: relative; margin: 0; font-size: 1.9cqw; line-height: 1.35; }
.sr-composer__placeholder { position: absolute; inset: 0 auto auto 0; color: #7a857e; white-space: nowrap; }
.sr-caret { display: inline-block; width: 0.12em; height: 1.1em; margin-left: 0.06em; vertical-align: -0.18em; background: #0f7a4c; }
.sr-composer__mic, .sr-composer__send { display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; font-size: 2.2cqw; }
.sr-composer__mic { background: #e8f1ea; color: var(--sr-green); }
.sr-composer__send { background: #b9c3bc; color: #fff; }
.sr-result__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2cqw; }
.sr-phone {
  position: absolute; inset: 0; margin: auto; display: grid; align-content: start; gap: 1.2cqw; width: 25cqw; height: fit-content; min-height: 46cqw; padding: 3cqw 1.6cqw;
  overflow: hidden; border: 0.7cqw solid #0a120e; border-radius: 4cqw;
  background: linear-gradient(180deg, #2a4a3b, #13261d); color: #f2f5f1; box-shadow: 0 40px 70px -30px rgb(0 0 0 / 70%);
}
.sr-phone__time { margin: 0; font-size: 6.2cqw; font-weight: 300; letter-spacing: -0.03em; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.sr-phone__date { margin: -0.4cqw 0 1cqw; color: rgb(242 245 241 / 78%); font-size: 1.2cqw; text-align: center; }
.sr-phone .sr-note { color: var(--sr-ink); }
.sr-phone__offer { padding: 1.5cqw; border-radius: 1.6cqw; background: #fff; color: var(--sr-ink); }
.sr-phone__hello { margin: 0 0 1cqw; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 1.9cqw; line-height: 1.15; }
.sr-phone__pay { display: grid; margin: 0 0 1.4cqw; }
.sr-phone__pay small { color: var(--sr-muted); font-size: 1.05cqw; }
.sr-phone__pay b { font-size: 2.6cqw; font-weight: 500; }
.sr-approve { min-height: 3.6cqw; font-size: 1.25cqw; }

/* ── Mobil "På plats" (9:16): scenen är telefonens skärm. Brödtext ≥ 4cqw, metatext ≥ 3,3cqw. ─── */
.sr-m-status { position: absolute; inset: 3cqw 5cqw auto; display: flex; justify-content: space-between; align-items: center; font-size: 3.8cqw; font-weight: 600; }
.sr-m-time { font-variant-numeric: tabular-nums; }
.sr-m-time [data-m-time="b"], .sr-m-time [data-m-time="c"] { transform: translateY(100%); }
.sr-m-icons { display: flex; gap: 1.2cqw; align-items: flex-end; }
.sr-m-icons i { width: 1cqw; height: 2cqw; border-radius: 0.3cqw; background: var(--sr-ink); }
.sr-m-icons i + i { height: 2.8cqw; }
.sr-m-icons b { width: 5.4cqw; height: 2.6cqw; border: 0.45cqw solid var(--sr-ink); border-radius: 0.8cqw; }
.sr-m-where { position: absolute; left: 6cqw; top: 13cqw; display: flex; gap: 1cqw; align-items: center; margin: 0; padding: 1.4cqw 3cqw 1.4cqw 2.2cqw; border-radius: 999px; background: #e8f5ec; color: #0b6b43; font-size: 3.6cqw; }
.sr-m-where .material-symbols-outlined { font-size: 4.6cqw; }
.sr-m-title { position: absolute; inset: 26cqw 6cqw auto; margin: 0; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 9cqw; letter-spacing: -0.02em; line-height: 1.05; }
.sr-m-words { position: absolute; inset: auto 7cqw 58cqw; margin: 0; font-size: 6cqw; line-height: 1.3; }
.sr-m-words span { display: inline-block; opacity: 0; }
.sr-bp--m { inset: 0 0 14% 0; width: 84cqw; }
.sr-bp__tag--ma, .sr-bp__tag--mb { top: 72cqw; margin: 0; padding: 1.2cqw 2.6cqw; font-size: 3.6cqw; }
.sr-bp__tag--ma { left: 14cqw; }
.sr-bp__tag--mb { left: 58cqw; }
.sr-envelope--m { inset: auto 0 22cqw; width: 15cqw; height: 15cqw; border-radius: 3.6cqw; }
.sr-envelope--m .material-symbols-outlined { font-size: 7cqw; }
.sr-streak--m { top: auto; bottom: 29.5cqw; width: 80cqw; height: 0.8cqw; }
.sr-flash--m { font-size: 12cqw; }
.sr-ripple--m { width: 12cqw; height: 12cqw; }
.sr-approved--m { gap: 3cqw; font-size: 6cqw; }
.sr-approved--m svg { width: 26cqw; height: 26cqw; }
.sr-stage--mobile .sr-end__cta { margin-top: 2cqw; padding: 2.6cqw 5cqw; font-size: 4.2cqw; }
.sr-orb--m { --o: 26cqw; inset: 0 0 14% 0; }
.sr-m-composer {
  position: absolute; inset: auto 5cqw 5cqw; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 15cqw; padding: 0 2cqw 0 4.4cqw;
  border: 1px solid rgb(19 36 28 / 10%); border-radius: 7.5cqw; background: #fff; box-shadow: 0 20px 40px -28px rgb(19 36 28 / 50%);
}
.sr-m-composer__idle { display: flex; gap: 2cqw; align-items: center; color: #7a857e; font-size: 4.2cqw; }
.sr-m-composer__idle .material-symbols-outlined { font-size: 5.4cqw; }
.sr-m-composer__mic { display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%; background: #e8f1ea; color: var(--sr-green); font-size: 5.6cqw; }
.sr-m-wave { position: absolute; inset: 1.5cqw 16cqw 1.5cqw 4cqw; width: calc(100% - 20cqw); height: calc(100% - 3cqw); opacity: 0; overflow: visible; }
.sr-m-wave path { fill: none; stroke-width: 3.2; stroke-linecap: round; transform-origin: center; transform-box: fill-box; }
.sr-m-wave path:nth-child(1) { stroke: #0f7a4c; }
.sr-m-wave path:nth-child(2) { stroke: #3fbf7f; opacity: 0.8; }
.sr-m-wave path:nth-child(3) { stroke: #8fdcad; opacity: 0.7; }
.sr-m-hint { position: absolute; inset: auto 0 23cqw; width: fit-content; margin: 0 auto; padding: 1.6cqw 3.4cqw; border-radius: 999px; background: #13241c; color: #fff; font-size: 3.6cqw; white-space: nowrap; opacity: 0; }
.sr-touch { position: absolute; right: 7.5cqw; bottom: 7cqw; width: 11cqw; height: 11cqw; border-radius: 50%; background: rgb(19 36 28 / 18%); box-shadow: 0 0 0 1.4cqw rgb(19 36 28 / 8%); opacity: 0; }
.sr-m-sheet {
  position: absolute; inset: auto 0 0; padding: 6cqw 6cqw 7cqw; border-radius: 7cqw 7cqw 0 0; background: #fff;
  box-shadow: 0 -20px 50px -30px rgb(19 36 28 / 45%);
}
.sr-m-sheet__title { margin: 0 0 2cqw; font-size: 4.8cqw; font-weight: 500; }
.sr-m-sheet .sr-row { padding: 2.4cqw 0; font-size: 4.4cqw; }
.sr-m-sheet .sr-totals { margin-bottom: 4cqw; padding-top: 1.6cqw; font-size: 4cqw; }
.sr-m-sheet .sr-totals div { padding: 1cqw 0; }
.sr-m-sheet .sr-totals .is-pay dd { font-size: 6.4cqw; }
.sr-m-sheet .sr-send { min-height: 12cqw; font-size: 4.4cqw; }
.sr-note--m { position: absolute; inset: 12cqw 5cqw auto; padding: 3cqw 3.6cqw; border-radius: 4.4cqw; font-size: 3.6cqw; gap: 3cqw; }
.sr-note--m b { font-size: 4.2cqw; }
.sr-note--m .material-symbols-outlined { font-size: 7cqw; }
.sr-stage--mobile .sr-end { gap: 4cqw; }
.sr-stage--mobile .sr-end p { font-size: 5.6cqw; }
.sr-stage--mobile .sr-logo { gap: 3.6cqw; }
.sr-stage--mobile .sr-dots { grid-template-columns: repeat(2, 5.4cqw); gap: 1.4cqw; }
.sr-stage--mobile .sr-dots i { width: 5.4cqw; height: 5.4cqw; }
.sr-stage--mobile .sr-logo__word { font-size: 15cqw; }

/* Kontroller: utanför det som animeras. 44 px tumträff. */
.sr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px auto 0; }
.sr-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(19 36 28 / 12%);
  border-radius: 50%; background: #fff; color: #13241c; cursor: pointer;
}
.sr-btn:hover { border-color: rgb(2 138 81 / 40%); }
.sr-btn:focus-visible, .sr-cta:focus-visible { outline: 2px solid #028a51; outline-offset: 2px; }
.sr-btn .material-symbols-outlined { font-size: 22px; }
.sr-progress { display: flex; gap: 4px; flex: 1 1 8rem; margin: 0; padding: 0; list-style: none; }
.sr-progress li { flex: 1; height: 4px; overflow: hidden; border-radius: 999px; background: rgb(19 36 28 / 10%); }
.sr-progress li i { display: block; height: 100%; background: #0f7a4c; transform: scaleX(0); transform-origin: left center; }
.sr-status { min-width: 7.5rem; margin: 0; color: #4f5c54; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sr-cta {
  display: inline-flex; gap: 6px; align-items: center; min-height: 44px; margin-left: auto; padding: 0 18px;
  border-radius: 999px; background: #0f4a37; color: #fff; font-size: 0.92rem; font-weight: 500; text-decoration: none;
}
.sr-cta .material-symbols-outlined { font-size: 18px; }
.sr--mobile .sr-controls { gap: 8px; }
.sr--mobile .sr-progress { order: 10; flex-basis: 100%; }
.sr--mobile .sr-status { display: none; }
.sr--mobile .sr-cta { flex: 1; justify-content: center; margin-left: 0; padding: 0 12px; font-size: 0.86rem; white-space: nowrap; }

/* ── Startsidan: kortet under heron (desktop) och dialogen ────────────────────────────────────────
   Kortet ligger utanför heron (egen stapling + halvtonsmask ovanpå) i en docka utan höjd. */
.ph-reel-dock { position: relative; z-index: 3; height: 0; }
.ph-reel-card {
  position: absolute; left: 50%; bottom: 24px; display: none; align-items: center; gap: 16px;
  width: min(450px, calc(100vw - 48px)); padding: 10px 22px 10px 10px;
  border: 1px solid rgb(255 255 255 / 72%); border-radius: 20px;
  background: linear-gradient(135deg, rgb(255 255 255 / 88%), rgb(248 252 247 / 72%));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 20px 44px -26px rgb(15 40 28 / 55%);
  color: #13241c; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transform: translateX(-50%);
}
.ph-reel-card:focus-visible { outline: 2px solid #028a51; outline-offset: 3px; }
.ph-reel-card__thumb { position: relative; flex: none; display: grid; place-items: center; width: 260px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #f6f7f2; }
.ph-reel-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.ph-reel-card__play {
  position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #0f4a37; color: #fff; font-size: 26px; box-shadow: 0 10px 22px -10px rgb(15 74 55 / 80%);
}
.ph-reel-card:hover .ph-reel-card__thumb img { transform: scale(1.03); }
.ph-reel-card__text { display: grid; gap: 4px; min-width: 0; }
.ph-reel-card__text b { font-size: 0.95rem; font-weight: 500; line-height: 1.25; }
.ph-reel-card__text small { color: #56645b; font-size: 0.82rem; line-height: 1.35; }
@media (min-width: 768px) {
  .ph-reel-card { display: flex; opacity: 0; }
  .public-home.is-logo-settled .ph-reel-card { animation: ph-reel-in 640ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
}
/* Korta skärmar: tumnageln krymper hellre än att kortet kryper upp i knappens planritning (~34 px under den). */
@media (min-width: 768px) and (max-height: 820px) {
  .ph-reel-card { bottom: 16px; }
  .ph-reel-card__thumb { width: 180px; }
}
@media (min-width: 768px) and (max-height: 740px) {
  .ph-reel-card { bottom: 12px; gap: 12px; padding: 8px 18px 8px 8px; }
  .ph-reel-card__thumb { width: 150px; }
  .ph-reel-card__play { width: 36px; height: 36px; font-size: 22px; }
}
@keyframes ph-reel-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) {
  .public-home.is-logo-settled .ph-reel-card, .ph-reel-card { animation: none; opacity: 1; }
}

/* Dialogen: helskärm, egen bakgrund (blur + mörkare) som kan tonas; ramen i mitten. */
html.is-reel-open { overflow: hidden; scrollbar-gutter: stable; }
.sr-dialog {
  position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0;
  overflow: hidden; border: 0; background: transparent; color: inherit;
}
.sr-dialog::backdrop { background: transparent; }
.sr-dialog__backdrop {
  position: fixed; inset: 0; background: rgb(10 20 15 / 45%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sr-dialog__panel { position: relative; display: grid; place-items: center; min-height: 100%; padding: 72px 24px 24px; }
.sr-dialog__frame { position: relative; width: min(1120px, calc(100vw - 48px), calc((100dvh - 190px) * 16 / 9)); }
/* Mobilversionen: stående 9:16 som fyller höjden, kontrollerna i tumzonen under. */
.sr-dialog[data-variant="mobile"] .sr-dialog__frame { width: min(calc(100vw - 24px), calc((100dvh - 190px) * 9 / 16)); }
.sr-dialog[data-variant="mobile"] .sr-dialog__poster { display: none; }
.sr-dialog__poster {
  position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 28px; pointer-events: none; opacity: 0;
}
.sr-dialog__close {
  position: absolute; top: -56px; right: 0; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / 92%); color: #13241c; cursor: pointer;
}
.sr-dialog__close:focus-visible { outline: 2px solid #8fdcad; outline-offset: 2px; }
.sr-dialog .sr-controls { padding: 6px; border-radius: 999px; background: rgb(255 255 255 / 94%); }
.sr-dialog .sr-stage { box-shadow: 0 40px 90px -40px rgb(0 0 0 / 55%); }
@media (max-width: 699px) {
  .sr-dialog__backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .sr-dialog__panel { padding: max(60px, calc(env(safe-area-inset-top) + 56px)) 12px max(12px, env(safe-area-inset-bottom)); }
  .sr-dialog__close { top: -52px; }
  .sr-dialog .sr-controls { border-radius: 22px; }
}