/* ── Onboarding block ─────────────────────────────────────────────────
   The extension's own first-run walkthrough (QgOnboarding.tsx and its
   siblings), rebuilt for the page with the same visual language: the
   #0d1117 card with the tiled doodle watermark, the shimmer progress bar,
   the "Thanks for installing" toast, the uppercase accent word with the
   drawn underline, the bordered bullet box and proof pill, the dark plan
   columns with the struck price and the sibling logos. Values are copied
   from the extension's stylesheet, not eyeballed.

   One stylesheet for every product page; each page supplies only its
   screens as JSON and onboarding-block.js renders them. The section opens
   and closes on white so it sits between the panel and the plans. ── */

body.mg-light .ob {
  position: relative;
  padding: clamp(56px, 6vw, 92px) 24px clamp(56px, 5.4vw, 88px);
  background: #fff;
  color: var(--ob-ink, #0d1117);
  --ob-ink: #0d1117;
  --ob-quiet: #6b7280;
  --ob-line: #e7eaf0;
  --ob-surface: #f7f8fa;
  --ob-red: #f40450;
  --ob-accent: var(--accent, #f40450);
  --ob-deep: color-mix(in srgb, var(--ob-accent) 72%, #000);
  --ob-soft: color-mix(in srgb, var(--ob-accent) 16%, transparent);
  --ob-glow: color-mix(in srgb, var(--ob-accent) 40%, transparent);
  --ob-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body.mg-light .ob-inner { max-width: 1140px; margin: 0 auto; }

body.mg-light .ob-head { max-width: 640px; margin: 0 auto clamp(30px, 3.4vw, 46px); text-align: center; }
body.mg-light .ob-eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-red); }
body.mg-light .ob-head h2 { margin: 0; font-size: clamp(27px, 3vw, 38px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; color: var(--ob-ink); }
body.mg-light .ob-lede { max-width: 56ch; margin: 12px auto 0; font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.6; color: var(--ob-quiet); }

body.mg-light .ob-grid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; }

/* ── the rail ── */
body.mg-light .ob-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; position: sticky; top: 92px; }
body.mg-light .ob-step {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start;
  width: 100%; padding: 14px 16px 16px; text-align: left;
  border: 1px solid var(--ob-line); border-radius: 16px; background: #fff;
  font: inherit; color: var(--ob-ink); cursor: pointer; overflow: hidden;
  transition: border-color 0.3s var(--ob-ease), background 0.3s var(--ob-ease), box-shadow 0.3s var(--ob-ease);
}
body.mg-light .ob-step:hover { border-color: #d7dce4; }
body.mg-light .ob-step:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
body.mg-light .ob-step.is-on { border-color: color-mix(in srgb, var(--ob-accent) 45%, #fff); background: color-mix(in srgb, var(--ob-accent) 5%, #fff); box-shadow: 0 1px 2px rgba(13,17,23,.04), 0 16px 34px -24px rgba(13,17,23,.25); }
body.mg-light .ob-step-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ob-surface); border: 1px solid var(--ob-line); font: 800 13px "Geist Mono", ui-monospace, Menlo, monospace; color: var(--ob-quiet); transition: background .3s, color .3s, border-color .3s; }
body.mg-light .ob-step.is-on .ob-step-n,
body.mg-light .ob-step.is-done .ob-step-n { background: var(--ob-accent); border-color: var(--ob-accent); color: #fff; }
body.mg-light .ob-step-t { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
body.mg-light .ob-step-s { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--ob-quiet); }
body.mg-light .ob-step-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--ob-accent) 18%, transparent); opacity: 0; }
body.mg-light .ob-step-bar::after { content: ""; position: absolute; inset: 0; background: var(--ob-accent); transform-origin: left; transform: scaleX(0); }
body.mg-light .ob-step.is-on .ob-step-bar { opacity: 1; }
body.mg-light .ob.is-playing .ob-step.is-on .ob-step-bar::after { animation: ob-fill var(--ob-dwell, 7s) linear forwards; }
@keyframes ob-fill { to { transform: none; } }

/* ── the card: the extension's own dialog ── */
body.mg-light .ob-stage { position: relative; min-width: 0; padding-top: 22px; }
body.mg-light .ob-device {
  position: relative; overflow: hidden;
  border-radius: 22px; background: #0d1117; color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
  font-family: Inter, "Geist", system-ui, sans-serif; line-height: 1.35;
}
/* the doodle watermark, tiled at 520px and screen-blended exactly as the extension does it */
body.mg-light .ob-art {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--ob-art-url) center top / 520px auto repeat;
  mix-blend-mode: screen; filter: brightness(1.75) contrast(1.05); opacity: .4;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,.22) 0%, #000 100%);
  mask-image: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,.22) 0%, #000 100%);
}
body.mg-light .ob-screen.is-plans ~ .ob-art,
body.mg-light .ob-device.is-wide .ob-art { opacity: .12; }
/* the toast that greets a fresh install */
body.mg-light .ob-toast {
  position: absolute; left: 50%; top: -22px; z-index: 5;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 10px 18px 10px 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), var(--ob-accent);
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: inset 0 -3px 0 var(--ob-deep), 0 14px 30px -14px var(--ob-glow), 0 2px 6px rgba(0,0,0,.25);
  transform: translate(-50%, 0); transition: opacity .35s, transform .45s var(--ob-ease);
}
body.mg-light .ob-toast i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.14); font-style: normal; }
body.mg-light .ob-toast svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
body.mg-light .ob-toast.is-hidden { opacity: 0; transform: translate(-50%, 10px) scale(.86); pointer-events: none; }
/* progress bar */
body.mg-light .ob-top { position: relative; z-index: 1; padding: 20px 18px 0; }
body.mg-light .ob-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); overflow: hidden; }
body.mg-light .ob-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 20%; border-radius: inherit;
  background: linear-gradient(90deg, var(--ob-deep), color-mix(in srgb, var(--ob-accent) 60%, #fff), var(--ob-accent), color-mix(in srgb, var(--ob-accent) 30%, #fff), var(--ob-accent), var(--ob-deep));
  background-size: 300% 100%; animation: ob-shimmer 2.8s linear infinite;
  transition: width .6s var(--ob-ease);
}
body.mg-light .ob-bar-fill::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-55deg, rgba(255,255,255,.22) 0 5px, transparent 5px 11px); }
@keyframes ob-shimmer { to { background-position: -300% 0; } }

body.mg-light .ob-screens { position: relative; z-index: 1; overflow: hidden; transition: height .45s var(--ob-ease); }
body.mg-light .ob-screen {
  position: absolute; left: 0; right: 0; top: 0; padding: 22px 24px 20px;
  opacity: 0; visibility: hidden; transform: translateX(14px);
  transition: opacity .32s var(--ob-ease), transform .32s var(--ob-ease), visibility 0s linear .32s;
}
body.mg-light .ob-screen.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
body.mg-light .ob-two { margin-top: 18px; }
body.mg-light .ob-bullets { margin-top: 16px; }
body.mg-light .ob-screen-k { margin: 0 0 12px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-accent); }
body.mg-light .ob-screen h3 { margin: 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; text-align: center; text-wrap: balance; color: #fff; }
body.mg-light .ob-screen.is-first h3 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -.035em; }
/* "instant": uppercase, accent, hand-drawn underline */
body.mg-light .ob-ul { position: relative; display: inline-block; text-transform: uppercase; color: var(--ob-accent); }
body.mg-light .ob-ul svg { position: absolute; left: -2%; right: -2%; bottom: -.3em; width: 104%; height: .3em; overflow: visible; pointer-events: none; }
body.mg-light .ob-ul svg path { fill: none; stroke: var(--ob-accent); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; }
body.mg-light .ob-screen.is-on .ob-ul svg path { animation: ob-draw .7s cubic-bezier(.3,.8,.3,1) .4s forwards; }
@keyframes ob-draw { to { stroke-dashoffset: 0; } }
/* "lights up": the accent swipe behind a phrase */
body.mg-light .ob-hl { position: relative; z-index: 0; display: inline-block; padding: 0 .12em; color: #fff; white-space: nowrap; }
body.mg-light .ob-hl::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: .08em; bottom: .02em; border-radius: .18em; background: var(--ob-accent); transform: scaleX(0); transform-origin: 0 50%; }
body.mg-light .ob-hl.is-green::before { background: #16a34a; }
body.mg-light .ob-screen.is-on .ob-hl::before { animation: ob-swipe .55s cubic-bezier(.2,.8,.2,1) .45s forwards; }
@keyframes ob-swipe { to { transform: scaleX(1); } }
body.mg-light .ob-screen-sub { margin: 14px auto 0; max-width: 440px; font-size: 15px; line-height: 1.5; color: #b3b9c4; text-align: center; text-wrap: pretty; }
body.mg-light .ob-chip-ult { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 8px; border-radius: 6px; background: var(--ob-soft); color: color-mix(in srgb, var(--ob-accent) 60%, #fff); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* the two-column layout screens 2+ use in the wide card */
body.mg-light .ob-two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; margin-top: 22px; align-items: start; }
body.mg-light .ob-two > * { min-width: 0; }

/* bullet box */
body.mg-light .ob-bullets { list-style: none; margin: 20px 0 0; padding: 14px 16px; display: grid; gap: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.025); }
body.mg-light .ob-bullets li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: #f3f4f6; }
body.mg-light .ob-bullets li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background-color: var(--ob-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3 3L17 9'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
body.mg-light .ob-bullets li strong { color: #fff; font-weight: 700; }
body.mg-light .ob-bullets li small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #b3b9c4; line-height: 1.45; }
/* proof pill */
body.mg-light .ob-proof { margin: 12px 0 0; padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.025); font-size: 14.5px; font-weight: 500; color: #f3f4f6; }
body.mg-light .ob-proof strong { color: var(--ob-accent); font-weight: 800; }
body.mg-light .ob-proof svg { width: 16px; height: 16px; fill: none; stroke: var(--ob-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── media: the product's own screen-two art ── */
body.mg-light .ob-media { position: relative; margin-top: 22px; }
body.mg-light .ob-two .ob-media { margin-top: 0; }
body.mg-light .ob-rec { position: absolute; right: 12px; top: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(17,24,39,.78); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
body.mg-light .ob-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: ob-pulse 1.2s ease-in-out infinite; }
@keyframes ob-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* a quiz round: question on top, tiles below, the right one lit green */
body.mg-light .ob-round { position: relative; padding: 16px; border-radius: 16px; background: radial-gradient(120% 90% at 20% 0%, #1d1c5a 0%, #0f0e3f 55%, #0a092d 100%); }
body.mg-light .ob-round-q { height: 72px; display: grid; place-items: center; padding: 0 14px; border-radius: 12px; background: #fff; color: #282e3e; font-size: 20px; font-weight: 800; letter-spacing: -.01em; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
body.mg-light .ob-round-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
body.mg-light .ob-round-tile { position: relative; min-height: 56px; display: flex; align-items: center; padding: 10px 12px; border-radius: 10px; background: #fff; color: #282e3e; font-size: 13.5px; font-weight: 600; line-height: 1.3; border: 2px solid #d9dde8; }
body.mg-light .ob-round-tile.is-pick { outline: 3px solid #22c55e; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(34,197,94,.18); background: #dcfce7; border-color: #22c55e; }
body.mg-light .ob-round-tile.is-pick::after { content: "\2713"; position: absolute; top: -10px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: #22c55e; color: #fff; font: 900 14px/24px system-ui, sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
body.mg-light .ob-ok { position: absolute; left: 12px; top: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; background: #22c55e; color: #fff; font-size: 12px; font-weight: 800; }
body.mg-light .ob-ok i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-style: normal; font-size: 10px; }
/* a problem card (DeltaMath / IXL / Edpuzzle): the site's own question, an answer box, the solve button */
body.mg-light .ob-prob { position: relative; padding: 16px; border-radius: 16px; background: #fff; color: #1f2937; font-family: Inter, system-ui, sans-serif; }
body.mg-light .ob-prob-h { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; }
body.mg-light .ob-prob-q { margin-top: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: #111827; }
body.mg-light .ob-prob-math { margin-top: 8px; font: 500 15px/1.8 "Geist Mono", ui-monospace, Menlo, monospace; color: #111827; }
body.mg-light .ob-prob-ans { margin-top: 12px; padding: 10px 12px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 14px; color: #111827; background: #f9fafb; display: flex; align-items: center; gap: 10px; }
body.mg-light .ob-prob-ans b { color: #15803d; font-weight: 700; }
body.mg-light .ob-prob-ans .ob-caret { width: 2px; height: 16px; background: #15803d; animation: ob-pulse 1s steps(2) infinite; }
body.mg-light .ob-prob-opts { display: grid; gap: 8px; margin-top: 10px; }
body.mg-light .ob-prob-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1.5px solid #d1d5db; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: #111827; }
body.mg-light .ob-prob-opt i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #9ca3af; flex: none; }
body.mg-light .ob-prob-opt.is-pick { border-color: #22c55e; background: #dcfce7; }
body.mg-light .ob-prob-opt.is-pick i { border-color: #22c55e; background: #22c55e; box-shadow: inset 0 0 0 3px #fff; }
body.mg-light .ob-prob-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
body.mg-light .ob-prob-btn { padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; background: #e5e7eb; color: #374151; }
body.mg-light .ob-prob-btn.is-solve { background: var(--ob-accent); color: #fff; box-shadow: 0 6px 14px -6px var(--ob-glow); }
/* a plain image (MemGenie's teacher view, quiz view) */
body.mg-light .ob-img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); }
/* the roadmap (EdGenie): step pictures in a row */
body.mg-light .ob-steps-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
body.mg-light .ob-steps-row > div { padding: 12px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.03); text-align: center; }
body.mg-light .ob-steps-row img { height: 44px; width: auto; max-width: 100%; object-fit: contain; }
body.mg-light .ob-steps-row b { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #fff; }
body.mg-light .ob-steps-row small { display: block; margin-top: 2px; font-size: 11.5px; color: #b3b9c4; line-height: 1.35; }
body.mg-light .ob-steps-row .ob-step-ic { width: 44px; height: 44px; margin: 0 auto; border-radius: 12px; display: grid; place-items: center; background: var(--ob-soft); color: var(--ob-accent); font-size: 18px; font-weight: 900; }
/* the mini panel beside the round */
body.mg-light .ob-mini { width: 100%; max-width: 236px; margin: 0 auto; background: #fff; border: 1px solid #eceef1; border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(16,24,40,.45); padding: 10px 12px 12px; color: #111827; font-family: Inter, system-ui, sans-serif; }
body.mg-light .ob-mini img { height: 22px; width: auto; display: block; }
body.mg-light .ob-mini-stat { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11px; font-weight: 700; color: #111827; }
body.mg-light .ob-mini-stat i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: ob-pulse 1.6s ease-in-out infinite; }
body.mg-light .ob-mini-row { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid #e7eaef; background: linear-gradient(180deg,#f2f4f7,#f8f9fb); box-shadow: inset 0 2px 4px rgba(16,24,40,.09); font-size: 10px; font-weight: 700; color: #374151; }
body.mg-light .ob-mini-row em { font-style: normal; padding: 2px 6px; border-radius: 5px; background: var(--ob-soft); color: var(--ob-deep); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
body.mg-light .ob-mini-row i { flex: none; width: 28px; height: 16px; border-radius: 999px; background: #d7dbe0; padding: 2px; display: block; }
body.mg-light .ob-mini-row i::after { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.35); }
body.mg-light .ob-mini-row.is-on i { background: var(--ob-accent); }
body.mg-light .ob-mini-row.is-on i::after { transform: translateX(12px); }
body.mg-light .ob-side-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: #b3b9c4; text-align: center; }
body.mg-light .ob-side-note b { color: #fff; }
body.mg-light .ob-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #b3b9c4; }
body.mg-light .ob-note b { color: #fff; }

/* ── plan columns ── */
body.mg-light .ob-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 0; align-items: stretch; }
body.mg-light .ob-col { position: relative; display: flex; flex-direction: column; padding: 24px 22px 20px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: #171c24; box-shadow: 0 20px 50px -30px rgba(0,0,0,.9); }
body.mg-light .ob-col.is-ultra { border-color: color-mix(in srgb, var(--ob-accent) 80%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--ob-accent) 22%, #0d1117), color-mix(in srgb, var(--ob-accent) 10%, #0a0c14)); box-shadow: 0 0 0 1px var(--ob-glow), 0 0 40px -6px var(--ob-glow), 0 24px 60px -30px rgba(0,0,0,.9); }
body.mg-light .ob-col-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: var(--ob-accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 16px -6px var(--ob-glow); white-space: nowrap; }
body.mg-light .ob-col-name { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #d5dae2; }
body.mg-light .ob-col-price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; line-height: 1; flex-wrap: wrap; }
body.mg-light .ob-col-price b { font-size: 40px; font-weight: 900; letter-spacing: -.04em; color: #fff; }
body.mg-light .ob-col.is-ultra .ob-col-price b { color: color-mix(in srgb, var(--ob-accent) 25%, #fff); text-shadow: 0 0 24px var(--ob-glow); }
body.mg-light .ob-col-price small { font-size: 13px; font-weight: 600; color: #c9cfd8; }
body.mg-light .ob-col-price s { position: relative; font-size: 22px; font-weight: 700; color: #8b93a0; text-decoration: none; }
body.mg-light .ob-col-price s::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 3px; border-radius: 2px; background: var(--ob-accent); transform: scaleX(0); transform-origin: 0 50%; }
body.mg-light .ob-screen.is-on .ob-col-price s::after { animation: ob-swipe .4s cubic-bezier(.2,.8,.2,1) .8s forwards; }
body.mg-light .ob-col-sub { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #c9cfd8; text-wrap: pretty; }
body.mg-light .ob-col ul { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 10px; flex: 1 1 auto; }
body.mg-light .ob-col li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: #f3f4f6; }
body.mg-light .ob-col li.is-off { color: #9aa3b0; }
body.mg-light .ob-col li i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 900; background: var(--ob-soft); color: color-mix(in srgb, var(--ob-accent) 55%, #fff); }
body.mg-light .ob-col li.is-off i { background: rgba(255,255,255,.09); color: #a3abb8; }
body.mg-light .ob-col li em { font-style: normal; margin-left: auto; font-size: 12px; font-weight: 700; color: #d5dae2; }
body.mg-light .ob-logos { display: inline-flex; gap: 3px; margin-left: auto; }
body.mg-light .ob-logos img { width: 18px; height: 18px; border-radius: 5px; background: #fff; object-fit: contain; }
body.mg-light .ob-col-btn { margin-top: 18px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 62%), var(--ob-accent); box-shadow: inset 0 -4px 0 var(--ob-deep), 0 10px 24px -12px var(--ob-glow); }
body.mg-light .ob-col-btn.is-ghost { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #e5e7eb; }
body.mg-light .ob-col.is-ultra .ob-col-btn { text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
body.mg-light .ob-col-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
body.mg-light .ob-fine { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: #c9cfd8; }

/* ── the dialog footer: back arrow + the big accent button ── */
body.mg-light .ob-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 16px 18px 18px; border-top: 1px solid rgba(255,255,255,.09); background: #0b0e13; }
body.mg-light .ob-back { flex: none; width: 50px; height: 50px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; display: grid; place-items: center; cursor: pointer; font: inherit; }
body.mg-light .ob-back:disabled { opacity: .35; cursor: default; }
body.mg-light .ob-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body.mg-light .ob-btn {
  flex: 1 1 auto; height: 50px; border: 0; border-radius: 14px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 17px Inter, system-ui, sans-serif; color: #fff; letter-spacing: -.01em;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 62%), var(--ob-accent);
  box-shadow: inset 0 -4px 0 var(--ob-deep), 0 10px 24px -12px var(--ob-glow);
  transition: transform .12s ease, filter .15s ease;
}
body.mg-light .ob-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
body.mg-light .ob-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
body.mg-light .ob-foot-note { margin-left: auto; font-size: 12.5px; color: #c9cfd8; }
body.mg-light .ob-dots { position: absolute; right: 18px; top: -26px; display: inline-flex; gap: 5px; }
body.mg-light .ob-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .3s, width .3s; }
body.mg-light .ob-dots i.is-on { width: 16px; border-radius: 3px; background: var(--ob-accent); }

/* ── responsive ── */
@media (max-width: 900px) {
  body.mg-light .ob-grid { grid-template-columns: 1fr; gap: 16px; }
  body.mg-light .ob-rail { position: static; grid-template-columns: repeat(var(--ob-n, 3), minmax(0, 1fr)); gap: 6px; }
  body.mg-light .ob-step { grid-template-columns: 1fr; gap: 6px; padding: 10px 8px 12px; border-radius: 12px; }
  body.mg-light .ob-step-n { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
  body.mg-light .ob-step-t { font-size: 12.5px; }
  body.mg-light .ob-step-s { display: none; }
  body.mg-light .ob-two { grid-template-columns: 1fr; }
  body.mg-light .ob-steps-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body.mg-light .ob { padding-left: 16px; padding-right: 16px; }
  body.mg-light .ob-screen { padding: 22px 16px 18px; }
  body.mg-light .ob-cmp { grid-template-columns: 1fr; }
  body.mg-light .ob-device { border-radius: 18px; }
  body.mg-light .ob-toast { font-size: 12.5px; padding: 8px 14px 8px 10px; }
  body.mg-light .ob-round-q { font-size: 16px; height: 60px; }
  body.mg-light .ob-foot { padding: 12px; }
  body.mg-light .ob-btn { font-size: 15px; height: 46px; }
  body.mg-light .ob-back { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  body.mg-light .ob-screen { transition: none; transform: none; }
  body.mg-light .ob-screens { transition: none; }
  body.mg-light .ob-step-bar::after, body.mg-light .ob-bar-fill, body.mg-light .ob-rec i, body.mg-light .ob-mini-stat i, body.mg-light .ob-caret { animation: none !important; }
  body.mg-light .ob-ul svg path { stroke-dashoffset: 0; animation: none !important; }
  body.mg-light .ob-hl::before, body.mg-light .ob-col-price s::after { transform: none; animation: none !important; }
}