/* m²soft-animationer (E1-E3), delt mellem frankston.io/kobermaegler og m2soft.io.
   Farverne går gennem --m2-teal og --m2-red. På frankston.io er de ikke sat, så
   fallback-værdierne giver præcis de gamle farver (petrol og --accent).
   m2soft.css sætter dem til D1-paletten. */

/* ============ E1: bybillede, data-pakker glider fra ejendommene ind i platformen ============ */
.m2-hero-anim .pk-teal { fill: var(--m2-teal, #3e5e63); }
.m2-hero-anim .pk-red  { fill: var(--m2-red, var(--accent)); }
.m2-hero-anim .emit      { fill: none; stroke: var(--m2-teal, #3e5e63); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.m2-hero-anim .recv      { fill: none; stroke: var(--m2-red, var(--accent)); stroke-width: 2.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.m2-hero-anim .recv-core { fill: var(--m2-red, var(--accent)); }
@media (prefers-reduced-motion: no-preference) {
  .m2-hero-anim .emit      { animation: m2emit 3.6s ease-out infinite; animation-delay: var(--d, 0s); }
  .m2-hero-anim .recv      { animation: m2recv 2s ease-out infinite; }
  .m2-hero-anim .recv-core { animation: m2core 2s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .m2-hero-anim .pk { display: none; } }
@keyframes m2emit { 0% { transform: scale(.5); opacity: .5; } 60% { opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes m2recv { 0% { transform: scale(.6); opacity: 0; } 30% { opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes m2core { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ============ E2: sagsforløb, sagen (dokumentet) vandrer sekventielt gennem de 4 trin ============ */
.m2-flow-anim { display: block; width: 100%; height: auto; margin: 8px 0 4px; }
.m2-flow-anim .fl-base { stroke: var(--rule); stroke-width: 1.5; fill: none; }
.m2-flow-anim .fl-progress { stroke: var(--m2-teal, #3e5e63); stroke-width: 2; fill: none; }
.m2-flow-anim .fl-node { fill: var(--bg); stroke: var(--rule-strong); stroke-width: 1.5; }
.m2-flow-anim .fl-core { fill: var(--m2-red, var(--accent)); }
.m2-flow-anim .fl-ring { fill: none; stroke: var(--m2-red, var(--accent)); stroke-width: 2; }
.m2-flow-anim .fl-doc rect { fill: var(--bg); stroke: var(--m2-teal, #3e5e63); stroke-width: 2; }
.m2-flow-anim .fl-doc line { stroke: var(--m2-teal, #3e5e63); stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) {
  .m2-flow-anim .fl-live { display: none; }
  .m2-flow-anim .fl-core { opacity: 1 !important; }
}
@media (max-width: 1100px) { .m2-flow-anim { display: none; } }

/* ============ E3: fra ejendom til underskrift (ejendom, sag, tidslinje, underskrift) ============
   Bygger på .hero-scene-systemet fra ft-editorial.css. Reglerne E3 bruger er kopieret hertil
   og scoped under .m2-forloeb, så illustrationen også virker på m2soft.io uden ft-editorial.css.
   På frankston.io vinder disse (højere specificitet) med samme værdier som ft-editorial.css. */
.m2-forloeb .hero-scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  --fig-teal: var(--m2-teal, #3e5e63);
}
.m2-forloeb .hero-scene .fig-shadow    { fill: #1a1a1a; opacity: .06; }
.m2-forloeb .hero-scene .blk-teal      { fill: var(--fig-teal); opacity: .92; }
.m2-forloeb .hero-scene .blk-teal2     { fill: var(--fig-teal); opacity: .72; }
.m2-forloeb .hero-scene .blk-ink       { fill: var(--ink); opacity: .92; }
.m2-forloeb .hero-scene .blk-teal-tint { fill: var(--fig-teal); opacity: .16; }
.m2-forloeb .hero-scene .blk-warm      { fill: var(--bg-3); opacity: .85; }
.m2-forloeb .hero-scene .panel-bg      { fill: var(--bg); stroke: var(--rule); stroke-width: 1; filter: url(#figShadow); }
.m2-forloeb .hero-scene .panel-ink-sq  { fill: var(--ink); }
.m2-forloeb .hero-scene .panel-teal-sq { fill: var(--fig-teal); }
.m2-forloeb .hero-scene .panel-dot     { fill: var(--fig-teal); }
.m2-forloeb .hero-scene .tline {
  fill: var(--ink-3); opacity: .45;
  transform-box: fill-box; transform-origin: left center;
}
.m2-forloeb .hero-scene .wire       { fill: none; stroke: var(--rule-strong); stroke-width: 1.3; opacity: .95; }
.m2-forloeb .hero-scene .wire-pulse {
  fill: none; stroke: var(--m2-red, var(--accent)); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 10 90; stroke-dashoffset: 100; opacity: 0;
}
.m2-forloeb .hero-scene .dot        { fill: var(--ink); }
.m2-forloeb .hero-scene .dot-accent { fill: var(--m2-red, var(--accent)); }
.m2-forloeb .hero-scene .ring       { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.m2-forloeb .hero-scene .focus-ring { fill: none; stroke: var(--rule-strong); stroke-width: 1.4; }
.m2-forloeb .hero-scene .ripple {
  fill: none; stroke: var(--m2-red, var(--accent)); stroke-width: 1.5; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}

/* E3-specifikke klasser */
.m2-forloeb .hero-scene .house-fill { fill: var(--bg); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.m2-forloeb .hero-scene .house-ink  { fill: var(--ink); }
.m2-forloeb .hero-scene .house-line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.m2-forloeb .hero-scene .dot-teal   { fill: var(--m2-teal, #3e5e63); opacity: .95; }
.m2-forloeb .hero-scene .node-check { fill: var(--pos, #0a5c4a); }
.m2-forloeb .hero-scene .sign-line  { fill: none; stroke: var(--m2-red, var(--accent)); stroke-width: 2; stroke-linecap: round; opacity: .85; }
.m2-forloeb .hero-scene .check      { fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  .m2-forloeb .hero-scene .tline      { animation: m2tlineFill 7s ease-in-out infinite; animation-delay: var(--td, 0s); }
  .m2-forloeb .hero-scene .wire-pulse { animation: m2wireFlow var(--flow, 3s) cubic-bezier(.45,0,.55,1) infinite; animation-delay: var(--fd, 0s); }
  .m2-forloeb .hero-scene .ripple     { animation: m2nodeRipple 3.2s ease-out infinite; }
  .m2-forloeb .hero-scene .focus-ring { animation: m2focusPulse 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .m2-forloeb .hero-scene .sign-path  { stroke-dasharray: 220; stroke-dashoffset: 220; animation: m2signWrite 7s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .m2-forloeb .hero-scene .tline,
  .m2-forloeb .hero-scene .wire-pulse,
  .m2-forloeb .hero-scene .ripple,
  .m2-forloeb .hero-scene .focus-ring,
  .m2-forloeb .hero-scene .sign-path { animation: none; }
}
@keyframes m2tlineFill {
  0%   { transform: scaleX(0); opacity: .12; }
  10%  { opacity: .45; }
  40%  { transform: scaleX(1); }
  82%  { transform: scaleX(1); opacity: .45; }
  93%  { opacity: .12; }
  100% { transform: scaleX(0); opacity: .12; }
}
@keyframes m2wireFlow {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes m2nodeRipple {
  0%   { transform: scale(.6); opacity: .5; }
  70%  { opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes m2focusPulse {
  0%, 100% { opacity: .9; }
  50%      { opacity: .4; }
}
@keyframes m2signWrite { 0% { stroke-dashoffset: 220; } 55% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 220; } }

/* ============ N1-N5: kun m2soft.io ============
   Overført fra den godkendte mockup (animationer-v2.html) med D1-tokens fra m2soft.css.
   Alt er scoped under komponentens rodklasse og m2n-præfiks, fordi filen også indlæses på
   frankston.io/kobermaegler. Startbilledet sættes med animation-fill-mode: backwards i stedet
   for en grundværdi, så elementerne står i slutbilledet, når animationen ikke kører.
   Hver animation har sin egen reduce-blok, der sætter slutbilledet eksplicit. */
.m2n-stage {
  position: relative;
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: 22px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.m2-koebsaftale, .m2-ejendomsdata, .m2-tjekliste { padding-top: 44px; }
.m2n-eks { position: absolute; top: 12px; right: 14px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: 2px 7px; }

/* ============ N1: købsaftalen læser sig selv ============ */
.m2-koebsaftale .m2n-parse { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; width: 100%; max-width: 470px; }
.m2-koebsaftale .m2n-pdf { position: relative; background: var(--bg); border: 1px solid var(--rule-strong); border-radius: 12px; padding: 14px 14px 18px; height: 196px; overflow: hidden; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--ink) 25%, transparent); }
.m2-koebsaftale .m2n-ttl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 10px; white-space: nowrap; }
.m2-koebsaftale .m2n-pdf i { display: block; height: 5px; border-radius: 3px; background: var(--bg-3); margin: 0 0 8px; }
.m2-koebsaftale .m2n-pdf i.s { width: 62%; }
.m2-koebsaftale .m2n-pdf i.m { width: 84%; }
.m2-koebsaftale .m2n-scan { position: absolute; left: 0; right: 0; top: 0; height: 34px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 0%, transparent) 0%, color-mix(in srgb, var(--accent) 16%, transparent) 70%, color-mix(in srgb, var(--accent) 55%, transparent) 100%); border-bottom: 2px solid var(--accent); opacity: 0; }
.m2-koebsaftale .m2n-fields { display: flex; flex-direction: column; gap: 8px; }
.m2-koebsaftale .m2n-fld { background: var(--bg); border: 1px solid var(--rule); border-radius: 10px; padding: 7px 11px; }
.m2-koebsaftale .m2n-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.m2-koebsaftale .m2n-v { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; display: block; min-height: 20px; }
.m2-koebsaftale .m2n-done { margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--accent); }
.m2-koebsaftale .m2n-done svg { width: 16px; height: 16px; flex: none; }
.m2-koebsaftale .m2n-done circle { fill: var(--accent); }
.m2-koebsaftale .m2n-done path { fill: none; stroke: var(--on-accent, #fff); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@container (max-width: 440px) {
  .m2-koebsaftale .m2n-parse { grid-template-columns: 104px 1fr; gap: 14px; }
  .m2-koebsaftale .m2n-pdf { padding-left: 10px; padding-right: 10px; }
  .m2-koebsaftale .m2n-ttl { font-size: 8px; letter-spacing: .04em; }
  .m2-koebsaftale .m2n-v { white-space: normal; }
}
@media (prefers-reduced-motion: no-preference) {
  .m2-koebsaftale .m2n-scan { animation: m2nScan 8s ease-in-out infinite; }
  .m2-koebsaftale .m2n-v    { animation: m2nReveal 8s steps(18, end) var(--d, 0s) infinite backwards; }
  .m2-koebsaftale .m2n-done { animation: m2nPopin 8s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .m2-koebsaftale .m2n-scan { animation: none; display: none; }
  .m2-koebsaftale .m2n-v    { animation: none; clip-path: none; }
  .m2-koebsaftale .m2n-done { animation: none; opacity: 1; transform: none; }
}
@keyframes m2nScan { 0% { transform: translateY(-40px); opacity: 0; } 5% { opacity: 1; } 45% { transform: translateY(190px); opacity: 1; } 52%, 100% { transform: translateY(190px); opacity: 0; } }
@keyframes m2nReveal { 0% { clip-path: inset(0 100% 0 0); } 9% { clip-path: inset(0 0 0 0); } 80% { clip-path: inset(0 0 0 0); } 86%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes m2nPopin { 0%, 56% { opacity: 0; transform: translateY(4px); } 62%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* ============ N2: ejendomsdata på et øjeblik ============ */
.m2-ejendomsdata .m2n-prop { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 10px; }
.m2-ejendomsdata .m2n-search { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--rule-strong); border-radius: 12px; padding: 11px 14px; font-size: 14px; }
.m2-ejendomsdata .m2n-search svg { width: 16px; height: 16px; flex: none; }
.m2-ejendomsdata .m2n-search circle,
.m2-ejendomsdata .m2n-search path { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; }
.m2-ejendomsdata .m2n-typed { white-space: nowrap; overflow: hidden; border-right: 2px solid var(--accent); padding-right: 2px; }
.m2-ejendomsdata .m2n-pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m2-ejendomsdata .m2n-pc { background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 11px; }
.m2-ejendomsdata .m2n-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.m2-ejendomsdata .m2n-pc b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 17px; margin-top: 2px; }
.m2-ejendomsdata .m2n-pc span { font-size: 11.5px; color: var(--ink-3); }
@container (max-width: 420px) {
  .m2-ejendomsdata .m2n-pcards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .m2-ejendomsdata .m2n-typed { animation: m2nType 8s steps(26, end) infinite, m2nCaret .8s step-end infinite; }
  .m2-ejendomsdata .m2n-pc    { animation: m2nCardin 8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) infinite backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .m2-ejendomsdata .m2n-typed { animation: none; border-right: 0; max-width: none; }
  .m2-ejendomsdata .m2n-pc    { animation: none; opacity: 1; transform: none; }
}
@keyframes m2nType { 0% { max-width: 0; } 22% { max-width: 260px; } 88% { max-width: 260px; } 94%, 100% { max-width: 0; } }
@keyframes m2nCaret { 50% { border-color: transparent; } }
@keyframes m2nCardin { 0%, 24% { opacity: 0; transform: translateY(14px); } 32%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-6px); } }

/* ============ N3: tjeklisten bliver krydset af ============ */
.m2-tjekliste .m2n-tasks { width: 100%; max-width: 430px; background: var(--bg); border: 1px solid var(--rule); border-radius: 16px; padding: 14px 16px 10px; }
.m2-tjekliste .m2n-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.m2-tjekliste .m2n-hd span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-3); }
.m2-tjekliste .m2n-bar { height: 6px; border-radius: 6px; background: var(--bg-3); overflow: hidden; margin-bottom: 10px; }
.m2-tjekliste .m2n-bar i { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 6px; transform-origin: left; }
.m2-tjekliste .m2n-task { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.m2-tjekliste .m2n-box { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--rule-strong); flex: none; display: grid; place-items: center; }
.m2-tjekliste .m2n-box svg { width: 12px; height: 12px; }
.m2-tjekliste .m2n-box path { fill: none; stroke: var(--on-accent, #fff); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 0; }
.m2-tjekliste .m2n-due { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .m2-tjekliste .m2n-bar i      { animation: m2nBar 9s ease-in-out infinite; }
  .m2-tjekliste .m2n-box        { animation: m2nTick 9s ease-out var(--d, 0s) infinite backwards; }
  .m2-tjekliste .m2n-box path   { animation: m2nDraw 9s ease-out var(--d, 0s) infinite backwards; }
  .m2-tjekliste .m2n-t          { animation: m2nDim 9s ease-out var(--d, 0s) infinite backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .m2-tjekliste .m2n-bar i    { animation: none; transform: none; }
  .m2-tjekliste .m2n-box      { animation: none; background: var(--accent); border-color: var(--accent); }
  .m2-tjekliste .m2n-box path { animation: none; stroke-dashoffset: 0; }
  .m2-tjekliste .m2n-t        { animation: none; color: var(--ink-3); }
}
@keyframes m2nBar { 0%, 8% { transform: scaleX(0); } 70%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes m2nTick { 0%, 6% { background: transparent; border-color: var(--rule-strong); } 9%, 88% { background: var(--accent); border-color: var(--accent); } 94%, 100% { background: transparent; border-color: var(--rule-strong); } }
@keyframes m2nDraw { 0%, 7% { stroke-dashoffset: 20; } 12%, 88% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 20; } }
@keyframes m2nDim { 0%, 8% { color: var(--ink); } 12%, 88% { color: var(--ink-3); } 94%, 100% { color: var(--ink); } }

/* ============ N4: de gratis sager ============
   Ti lige brede felter og et bredere "Sag 11". Under 420px brydes de ti i to rækker à fem,
   og "Sag 11" står til højre over begge rækker, så intet løber ud over kanten på 375px. */
.m2-gratis .m2n-counter { width: 100%; max-width: 470px; }
.m2-gratis .m2n-tiles { display: grid; grid-template-columns: repeat(var(--m2n-gratis, 10), 1fr) 2.2fr; gap: 5px; }
.m2-gratis .m2n-tile { min-width: 0; height: 54px; border-radius: 9px; border: 1px solid var(--rule-strong); background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); white-space: nowrap; }
.m2-gratis .m2n-tile b { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.1; }
.m2-gratis .m2n-paid { border-style: dashed; }
.m2-gratis .m2n-paid b { color: inherit; }
.m2-gratis .m2n-cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; }
.m2-gratis .m2n-cap b { font-family: var(--font-display); font-weight: 500; font-size: 20px; }
.m2-gratis .m2n-free b { color: var(--accent); }
.m2-gratis .m2n-then { text-align: right; }
@container (max-width: 420px) {
  .m2-gratis .m2n-tiles { grid-template-columns: repeat(5, 1fr) 1.6fr; }
  .m2-gratis .m2n-paid { grid-column: 6; grid-row: 1 / span 2; height: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .m2-gratis .m2n-tile { animation: m2nTilefree 9s ease-out var(--d, 0s) infinite backwards; }
  .m2-gratis .m2n-paid { animation-name: m2nTilepaid; }
}
@media (prefers-reduced-motion: reduce) {
  .m2-gratis .m2n-tile { animation: none; background: var(--accent-soft); border-color: var(--accent); }
  .m2-gratis .m2n-paid { animation: none; background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); border-style: solid; }
}
@keyframes m2nTilefree { 0%, 4% { background: var(--bg); border-color: var(--rule-strong); } 7%, 86% { background: var(--accent-soft); border-color: var(--accent); } 92%, 100% { background: var(--bg); border-color: var(--rule-strong); } }
@keyframes m2nTilepaid { 0%, 4% { background: var(--bg); } 8%, 86% { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); border-style: solid; } 92%, 100% { background: var(--bg); } }

/* ============ N5: kom i gang på tre trin ============ */
.m2-kom-i-gang .m2n-start { width: 100%; max-width: 480px; position: relative; padding: 8px 0 4px; }
.m2-kom-i-gang .m2n-line { position: absolute; left: 16%; right: 16%; top: 31px; height: 2px; background: var(--rule-strong); border-radius: 2px; overflow: hidden; }
.m2-kom-i-gang .m2n-line i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.m2-kom-i-gang .m2n-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; }
.m2-kom-i-gang .m2n-st { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.m2-kom-i-gang .m2n-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--rule-strong); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); position: relative; }
.m2-kom-i-gang .m2n-nm { font-size: 13.5px; font-weight: 500; }
.m2-kom-i-gang .m2n-sb { font-size: 11.5px; color: var(--ink-3); margin-top: -6px; }
.m2-kom-i-gang .m2n-ready { margin: 18px auto 0; display: flex; justify-content: center; }
.m2-kom-i-gang .m2n-ready span { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--on-accent, #fff); border-radius: var(--r-btn); padding: 10px 16px; font-size: 13.5px; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .m2-kom-i-gang .m2n-line i     { animation: m2nLine3 7s ease-in-out infinite; }
  .m2-kom-i-gang .m2n-dot        { animation: m2nDot3 7s ease-out var(--d, 0s) infinite backwards; }
  .m2-kom-i-gang .m2n-ready span { animation: m2nReady 7s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .m2-kom-i-gang .m2n-line i     { animation: none; transform: none; }
  .m2-kom-i-gang .m2n-dot        { animation: none; background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
  .m2-kom-i-gang .m2n-ready span { animation: none; opacity: 1; transform: none; }
}
@keyframes m2nLine3 { 0%, 8% { transform: scaleX(0); } 60%, 88% { transform: scaleX(1); } 94%, 100% { transform: scaleX(0); } }
@keyframes m2nDot3 { 0%, 4% { background: var(--bg); color: var(--ink-3); border-color: var(--rule-strong); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 8% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 15%, transparent); } 12%, 86% { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 92%, 100% { background: var(--bg); color: var(--ink-3); border-color: var(--rule-strong); } }
@keyframes m2nReady { 0%, 64% { opacity: 0; transform: translateY(6px) scale(.97); } 70%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }