:root { --dm-h: 44px; }
html.demo-rom body { padding-top: var(--dm-h); }
html.demo-rom.fr-full .fr { --top: var(--dm-h); }
.dm-bar { position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: var(--dm-h); display: flex; align-items: center; gap: 10px; padding: 0 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  background: var(--fr-bg, #FBFAFF); border-bottom: 1px solid var(--line, rgba(20, 16, 40, .1)); font: 600 13px/1.2 var(--sans, Figtree, system-ui, sans-serif); color: var(--ink, #17132b); box-sizing: border-box; }
html[data-theme="dark"] .dm-bar { background: #15121f; color: #f1eefb; border-bottom-color: rgba(255, 255, 255, .1); }
.dm-tag { flex: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: #e9e4ff; color: #3b2a99; }
html[data-theme="dark"] .dm-tag { background: #2e2556; color: #d9d1ff; }
.dm-pp { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #3b2a99; color: #fff; cursor: pointer; }
.dm-pp svg { width: 14px; height: 14px; fill: currentColor; }
.dm-track { position: relative; flex: 1 1 auto; height: 34px; cursor: pointer; min-width: 120px; }
.dm-track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 4px; background: rgba(59, 42, 153, .15); }
.dm-fill { position: absolute; left: 0; top: 8px; height: 4px; border-radius: 4px; background: #3b2a99; width: 0; transition: width .12s linear; }
html[data-theme="dark"] .dm-fill, html[data-theme="dark"] .dm-pp { background: #8f7dff; }
.dm-step { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; color: inherit; }
.dm-track:focus-visible { outline: 2px solid #8f7dff; outline-offset: 2px; border-radius: 6px; }
.dm-step i { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #fff; border: 2px solid rgba(59, 42, 153, .45); box-sizing: border-box; }
.dm-step.done i { background: #3b2a99; border-color: #3b2a99; }
.dm-step span { font-size: 10.5px; font-weight: 600; white-space: nowrap; opacity: .7; }
.dm-step.on span { opacity: 1; color: #3b2a99; }
html[data-theme="dark"] .dm-step.on span { color: #c8bdff; }
.dm-how, .dm-make { flex: none; font: inherit; font-size: 12.5px; border-radius: 999px; padding: 8px 12px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.dm-how { border: 1px solid rgba(59, 42, 153, .3); background: transparent; color: inherit; }
.dm-make { background: #17132b; color: #fff; border: 0; }
html[data-theme="dark"] .dm-make { background: #f1eefb; color: #17132b; }


.dm-ring { position: fixed; z-index: 58; pointer-events: none; border-radius: 14px; box-shadow: 0 0 0 3px #8f7dff, 0 0 0 9px rgba(143, 125, 255, .25); transition: all .25s ease; }
.dm-coach { position: fixed; z-index: 61; width: 300px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 16px 16px 14px; border-radius: 16px; background: #17132b; color: #fff; box-shadow: 0 18px 50px rgba(20, 10, 60, .35); font: 15px/1.45 var(--sans, Figtree, system-ui, sans-serif); }
.dm-coach h3 { margin: 2px 0 6px; font-size: 17px; line-height: 1.25; }
.dm-coach p { margin: 0; }
.dm-coach .dm-n { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; opacity: .65; margin-bottom: 2px; }
.dm-acts { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.dm-ok { border: 0; border-radius: 999px; padding: 10px 18px; min-height: 44px; font: 700 15px/1 var(--sans, Figtree, system-ui, sans-serif); background: #fff; color: #17132b; cursor: pointer; }
.dm-skip { border: 0; background: none; color: #d9d1ff; font: 600 14px/1 var(--sans, Figtree, system-ui, sans-serif); padding: 10px 6px; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dm-arrow { position: absolute; width: 14px; height: 14px; background: #17132b; transform: rotate(45deg); }
.dm-coach[data-pil="opp"] .dm-arrow { top: -7px; margin-left: -7px; }
.dm-coach[data-pil="ned"] .dm-arrow { bottom: -7px; margin-left: -7px; }
.dm-coach[data-pil="venstre"] .dm-arrow { left: -7px; top: 26px; }
.dm-coach[data-pil="hogre"] .dm-arrow { right: -7px; top: 26px; }
.dm-coach[data-pil="ingen"] .dm-arrow { display: none; }
.dm-coach.ark { left: 8px !important; right: 8px; width: auto; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }


.dm-end { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 12px; }
.dm-end .dm-kick { margin: 0; font-size: 13px; opacity: .75; }
.dm-end h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.dm-form { display: flex; gap: 8px; flex-wrap: wrap; }
.dm-form input { flex: 1 1 180px; min-width: 0; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(59, 42, 153, .35); background: #fff; color: #17132b; min-height: 48px; box-sizing: border-box; }
.dm-go { flex: none; border: 0; border-radius: 12px; padding: 0 18px; min-height: 48px; font: 700 16px/1 var(--sans, Figtree, system-ui, sans-serif); background: #3b2a99; color: #fff; cursor: pointer; }
.dm-small { margin: -4px 0 4px; font-size: 13px; opacity: .7; }
.dm-chamber { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgba(59, 42, 153, .25); color: inherit; text-decoration: none; }
.dm-chamber b { font-size: 15.5px; }
.dm-chamber span { font-size: 13.5px; opacity: .75; }
.dm-chamber:hover { border-color: #3b2a99; }
.dm-again { align-self: flex-start; border: 0; background: none; color: inherit; font: 600 14.5px/1 var(--sans, Figtree, system-ui, sans-serif); text-decoration: underline; text-underline-offset: 3px; padding: 12px 0; min-height: 44px; cursor: pointer; }
html.dm-slutt .dm-end { animation: dm-inn .5s ease both; }
@keyframes dm-inn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


@media (max-width: 720px) {
  :root { --dm-h: 48px; }
  .dm-bar { gap: 8px; padding: 0 10px; }
  .dm-tag, .dm-how { display: none; }
  .dm-step span { display: none; }
  .dm-step.on span { display: block; position: absolute; top: 19px; font-size: 10px; }
  .dm-make { padding: 9px 11px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .dm-ring, .dm-fill { transition: none; } html.dm-slutt .dm-end { animation: none; } }



@media (max-width: 720px) {
  .dm-step.on:first-of-type span { left: 0; }
  .dm-step.on:last-of-type span { right: 0; }
}

@media (max-width: 720px) {
  :root { --dm-h: 52px; }
  .dm-pp { width: 44px; height: 44px; }
  .dm-track { height: 44px; }
  .dm-track::before, .dm-fill { top: 13px; }

  .dm-step i { margin-top: 10px; }
  .dm-step.on span { top: 25px; }
  .dm-make { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
  html.demo-rom #fr-sound { min-width: 44px; }
  html.demo-rom #fr-details { min-height: 44px; }
  html.demo-rom .fr-title { font-size: 0 !important; }
  html.demo-rom .fr-title b { font-size: 16px; }
}


html.dm-reel .dm-step span { display: none; }
html.dm-reel .dm-step i { margin-top: 5px; }
.dm-steg, .dm-endcard { position: fixed; z-index: 61; box-sizing: border-box; padding: 22px 22px 18px; border-radius: 20px; background: #17132b; color: #fff;
  box-shadow: 0 24px 70px rgba(20, 10, 60, .28), 0 2px 8px rgba(20, 10, 60, .12); font: 15.5px/1.45 var(--sans, Figtree, system-ui, sans-serif);
  animation: dm-kort .42s cubic-bezier(.2, .8, .2, 1) both; transition: top .35s cubic-bezier(.2, .8, .2, 1), left .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes dm-kort { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.dm-steg h3 { margin: 0 0 6px; font-size: clamp(20px, 1.25vw + 10px, 28px); line-height: 1.15; letter-spacing: -.01em; }
.dm-steg .dm-kick { margin: 0 0 6px; font-size: 13.5px; letter-spacing: .02em; color: #c8bdff; }
.dm-steg .dm-sub { margin: 0 0 4px; opacity: .78; font-size: 14.5px; }
.dm-big { margin-top: 14px; width: 100%; min-height: 54px; border: 0; border-radius: 14px; background: #fff; color: #17132b; font: 700 18px/1 var(--sans, Figtree, system-ui, sans-serif); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 6px 18px rgba(255, 255, 255, .15); }
.dm-big:hover { transform: translateY(-1px); }
.dm-big:active { transform: scale(.98); }
.dm-val { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dm-val button { flex: 1 1 auto; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff;
  font: 600 15px/1.2 var(--sans, Figtree, system-ui, sans-serif); cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .15s ease; }
.dm-val button:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.dm-val button:active { transform: scale(.97); }
.dm-notar { flex-direction: column; }
.dm-notar button { text-align: left; border-radius: 14px; }
.dm-egen { display: flex; gap: 8px; margin-top: 10px; }
.dm-egen input { flex: 1 1 auto; min-width: 0; min-height: 48px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff; padding: 0 14px; font-size: 16px; }
.dm-egen input::placeholder { color: rgba(255, 255, 255, .6); }
.dm-egen button { min-height: 48px; padding: 0 16px; border-radius: 12px; border: 0; background: #fff; color: #17132b; font: 700 15px/1 var(--sans, Figtree, system-ui, sans-serif); cursor: pointer; }
.dm-skipp { display: block; margin: 12px 0 0 auto; min-height: 44px; padding: 0 6px; border: 0; background: none; color: #d9d1ff; font: 600 14px/1 var(--sans, Figtree, system-ui, sans-serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dm-steg.yay { background: linear-gradient(135deg, #3b2a99, #6b4fe0); }
.dm-yay { margin: 0; font: 700 clamp(20px, 1.2vw + 10px, 26px)/1.2 var(--sans, Figtree, system-ui, sans-serif); animation: dm-yay .6s cubic-bezier(.2, 1.4, .3, 1) both; }
@keyframes dm-yay { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.dm-crew { display: flex; gap: 6px; margin-top: 12px; }
.dm-crew i { width: 9px; height: 9px; border-radius: 50%; background: #c8bdff; animation: dm-puls 1s ease-in-out infinite; }
.dm-crew i:nth-child(2) { animation-delay: .15s; } .dm-crew i:nth-child(3) { animation-delay: .3s; }
@keyframes dm-puls { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

.dm-tapp { position: fixed; z-index: 57; cursor: crosshair; background: transparent; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(143, 125, 255, .55); animation: dm-lag 1.6s ease-in-out infinite; }
@keyframes dm-lag { 0%, 100% { box-shadow: inset 0 0 0 2px rgba(143, 125, 255, .35); } 50% { box-shadow: inset 0 0 0 3px rgba(143, 125, 255, .8); } }
.dm-prikk { position: fixed; z-index: 58; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 4px rgba(143, 125, 255, .6); animation: dm-prikk 1.4s ease-out infinite; transition: left .25s linear, top .25s linear; }
@keyframes dm-prikk { 0% { box-shadow: 0 0 0 0 rgba(143, 125, 255, .8); } 100% { box-shadow: 0 0 0 18px rgba(143, 125, 255, 0); } }
.dm-finger { position: fixed; z-index: 63; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none; border: 2px solid #fff; background: rgba(143, 125, 255, .35); animation: dm-finger .8s ease-out both; }
@keyframes dm-finger { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.dm-endcard { background: #fff; color: #17132b; display: flex; flex-direction: column; gap: 12px; }
.dm-endcard h2 { margin: 0; font-size: clamp(24px, 1.4vw + 12px, 34px); line-height: 1.1; letter-spacing: -.015em; }
.dm-endcard .dm-x { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 24px; cursor: pointer; color: inherit; }
.dm-end-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.dm-end-row a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 12px 0; }
html[data-theme="dark"] .dm-endcard { background: #1d1930; color: #f1eefb; }

.dm-sound { position: fixed; z-index: 62; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: #17132b; color: #fff; font: 600 14px/1 var(--sans, Figtree, system-ui, sans-serif); box-shadow: 0 8px 24px rgba(20, 10, 60, .25); cursor: pointer; animation: dm-kort .5s .6s both; }
.dm-sound .on { display: none; } .dm-sound.paa .on { display: inline; } .dm-sound.paa .off { display: none; }
@media (max-width: 720px) {
  .dm-steg, .dm-endcard { left: 8px !important; right: 8px !important; width: auto !important; padding: 18px 16px 14px; border-radius: 18px; }
  .dm-sound { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .dm-steg, .dm-endcard, .dm-yay, .dm-prikk, .dm-tapp, .dm-crew i, .dm-finger, .dm-sound { animation: none !important; transition: none !important; } }
.dm-sound.i-bar { position: static; animation: none; box-shadow: none; min-height: 34px; padding: 0 14px; font-size: 12.5px; background: #3b2a99; }
@media (max-width: 720px) { .dm-sound { right: auto; left: 12px; } }

html.dm-reel #fr-brand li:last-child { animation: dm-fly .6s cubic-bezier(.2, 1.35, .3, 1) both; }
html.dm-reel #fr-script li { animation: dm-fly .55s cubic-bezier(.2, 1.2, .3, 1) both; }
html.dm-reel #fr-script li:nth-child(2) { animation-delay: .08s; } html.dm-reel #fr-script li:nth-child(3) { animation-delay: .16s; }
html.dm-reel #fr-script li:nth-child(4) { animation-delay: .24s; } html.dm-reel #fr-script li:nth-child(5) { animation-delay: .32s; } html.dm-reel #fr-script li:nth-child(6) { animation-delay: .4s; }
html.dm-reel #fr-idea { animation: dm-fly .6s cubic-bezier(.2, 1.3, .3, 1) both; }
@keyframes dm-fly { from { opacity: 0; transform: translateY(26px) scale(.86) rotate(-2deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { html.dm-reel #fr-brand li, html.dm-reel #fr-script li, html.dm-reel #fr-idea { animation: none !important; } }

@media (max-width: 720px) {
  .dm-sound.i-bar { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 0; flex: none; position: relative; }
  .dm-sound.i-bar::before { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  .dm-sound.i-bar:not(.paa) { animation: dm-lyd 1.6s ease-in-out infinite; }
  @keyframes dm-lyd { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 125, 255, .6); } 50% { box-shadow: 0 0 0 6px rgba(143, 125, 255, 0); } }
  .dm-make { padding: 9px 10px; }
}

@media (max-width: 360px) {
  .dm-bar { gap: 6px; padding: 0 8px; }
  .dm-track { min-width: 0; }
  .dm-make { padding: 8px 9px; font-size: 12px; }
}
.dm-endcard h2, .dm-steg h3 { text-wrap: balance; }
.dm-sound.i-bar { left: auto !important; right: auto !important; bottom: auto !important; }


.dm-hl { position: fixed; z-index: 58; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; pointer-events: none; border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(143, 125, 255, .85), 0 0 30px rgba(143, 125, 255, .6); animation: dm-hl 1.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dm-hl { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.dm-igjen { margin-top: 14px; }
.dm-igjen .dm-vidare { background: #fff; color: #17132b; border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .dm-hl { animation: none; opacity: .9; } }



#fp .dm-dim { transition: opacity .35s ease, filter .35s ease; }

html.dm-fokus #fp .dm-dim { opacity: .55; }

html.demo-rom:not(.dm-reel) #fr-moments > li:nth-last-child(n+5) { display: none; }

.dm-opning { text-align: center; }
.dm-opning h3 { font-size: clamp(22px, 1.5vw + 10px, 32px); }