// calc-shared.jsx — One-off Video Price Calculator (public /calculator page).
// LIGHT MyAvatar styling to match the public marketing site (white paper, charcoal
// ink, lime #8DC63F accent) — re-skinned from the original dark mockup 2026-06-22.
// Holds the REAL cost-plus price model — one clean price out, no margin exposed.

(function injectCalcStyles() {
  if (document.getElementById('calc-styles')) return;
  const s = document.createElement('style');
  s.id = 'calc-styles';
  s.textContent = `
  .calc-root {
    --lime: #8DC63F; --lime-bright: #a6e052; --lime-deep: #5a9c3c; --lime-ink: #d6efb0;
    --bg: #ffffff; --bg-2: #fafbf6; --bg-3: #f1f4ea;
    --panel: #ffffff; --panel-2: #fafbf6; --panel-hi: #f0f4e8;
    --line: rgba(141,198,63,.30); --line-soft: rgba(0,0,0,.08); --line-strong: rgba(141,198,63,.55);
    --text: #3C3C3C; --muted: #6A6A66; --faint: #9A9A92; --dim: #bcc1b3;
    --ink: #2A2A28; --gold: #b9892f; --danger: #d05a4a;
    --sans: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, monospace;
    background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6;
    min-height: 100%; width: 100%; text-align: left; -webkit-font-smoothing: antialiased;
  }
  .calc-root * { box-sizing: border-box; }
  .calc-root h1,.calc-root h2,.calc-root h3,.calc-root h4 { margin: 0; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); line-height: 1.12; }
  .calc-root p { margin: 0; }
  .calc-root a { text-decoration: none; color: inherit; }
  :where(.calc-root) button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  .calc-root ::selection { background: rgba(141,198,63,.3); }

  /* ── Nav ─────────────────────────────────────────────── */
  .calc-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
  .calc-nav-inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .calc-logo { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 1.16rem; color: var(--ink); }
  .calc-logo .mark { width: 26px; height: 26px; background: var(--lime); border-radius: 6px; position: relative; }
  .calc-logo .mark::after { content: ""; position: absolute; inset: 7px; background: var(--bg); border-radius: 2px; }
  .calc-nav-links { display: flex; gap: 26px; list-style: none; padding: 0; margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
  .calc-nav-links a:hover { color: var(--ink); }
  .calc-nav-links a.on { color: var(--lime); }
  .calc-nav-cta { display: flex; align-items: center; gap: 16px; }
  .calc-nav-cta .login { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
  .calc-nav-cta .login:hover { color: var(--ink); }

  /* ── Buttons ─────────────────────────────────────────── */
  .calc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 9px; font-weight: 800; font-family: var(--sans); border: 1px solid transparent; transition: 150ms ease-out; white-space: nowrap; }
  .calc-btn i { font-size: 1.05em; }
  .calc-btn-primary { background: var(--lime); color: #10150d; padding: 14px 26px; font-size: 1rem; box-shadow: 0 6px 20px rgba(141,198,63,.22); }
  .calc-btn-primary:hover { background: var(--lime-bright); box-shadow: 0 8px 28px rgba(141,198,63,.34); transform: translateY(-1px); }
  .calc-btn-lg { padding: 16px 32px; font-size: 1.08rem; }
  .calc-btn-ghost { background: rgba(0,0,0,.04); color: var(--text); border-color: var(--line-soft); padding: 13px 24px; font-size: 1rem; }
  .calc-btn-ghost:hover { border-color: var(--line-strong); background: rgba(141,198,63,.08); }
  .calc-btn-quiet { color: var(--muted); padding: 12px 16px; font-weight: 700; }
  .calc-btn-quiet:hover { color: var(--ink); }
  .calc-btn-sm { padding: 9px 16px; font-size: 0.88rem; border-radius: 8px; }
  .calc-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

  .calc-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; z-index: 0; }
  .calc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

  /* ── Hero / hook ─────────────────────────────────────── */
  .calc-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft);
    background: radial-gradient(120% 90% at 80% -10%, rgba(141,198,63,.14), transparent 60%), linear-gradient(180deg, #f3f6ec, var(--bg)); }
  .calc-hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: 76px 0 84px; }
  .calc-eyebrow { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 0.78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--lime); background: rgba(141,198,63,.1); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; margin-bottom: 22px; }
  .calc-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); margin-bottom: 20px; }
  .calc-hero h1 .accent { color: var(--lime); }
  .calc-hero .lede { font-size: 1.18rem; color: var(--muted); max-width: 46ch; margin-bottom: 30px; }
  .calc-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .calc-hero-trust { display: flex; gap: 22px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
  .calc-trust { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--muted); }
  .calc-trust i { color: var(--lime); font-size: 1.05rem; }
  .calc-trust b { color: var(--text); font-weight: 700; }
  .calc-hero-card { position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: 0 30px 80px rgba(40,50,30,.10); }
  .calc-hero-card .hc-label { font-size: 0.76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
  .calc-hero-card .hc-price { font-size: 3.4rem; font-weight: 900; color: var(--ink); line-height: 1; margin: 10px 0 4px; letter-spacing: -.03em; }
  .calc-hero-card .hc-price .vat { font-size: 0.95rem; font-weight: 700; color: var(--faint); letter-spacing: 0; }
  .calc-hero-card .hc-rows { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
  .calc-hcrow { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--muted); }
  .calc-hcrow i { color: var(--lime); font-size: 1rem; flex: 0 0 auto; }
  .calc-hero-card .hc-cta { margin-top: 22px; }
  .calc-hero-card .hc-glance { position: absolute; top: -13px; right: 22px; background: var(--lime); color: #10150d; font-size: 0.72rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }

  /* ── Quote flow layout ───────────────────────────────── */
  .calc-flow { padding: 56px 0 90px; position: relative; }
  .calc-flow-grid { display: grid; grid-template-columns: 1fr 384px; gap: 36px; align-items: start; }
  .calc-flow-head { margin-bottom: 30px; }
  .calc-flow-head .step-of { font-size: 0.8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lime); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
  .calc-flow-head .step-of .bar { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--panel-hi); overflow: hidden; max-width: 200px; }
  .calc-flow-head .step-of .bar > span { display: block; height: 100%; background: var(--lime); transition: width .35s ease; }
  .calc-flow-head h2 { font-size: 1.9rem; }
  .calc-flow-head p { color: var(--muted); margin-top: 8px; font-size: 1.02rem; }

  .calc-q { margin-bottom: 30px; }
  .calc-q-label { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: 13px; }
  .calc-q-label .qn { width: 24px; height: 24px; border-radius: 50%; background: var(--panel-hi); border: 1px solid var(--line); color: var(--lime); font-size: 0.78rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .calc-q-label .done { background: var(--lime); border-color: var(--lime); color: #10150d; }
  .calc-opts { display: grid; gap: 12px; }
  .calc-opts.two { grid-template-columns: 1fr 1fr; }
  .calc-opts.four { grid-template-columns: repeat(4, 1fr); }
  .calc-opt { text-align: left; background: var(--panel); border: 1.5px solid var(--line-soft); border-radius: 13px; padding: 15px 16px; cursor: pointer; transition: 140ms ease-out; position: relative; display: flex; flex-direction: column; gap: 4px; }
  .calc-opt:hover { border-color: var(--line-strong); background: var(--panel-2); transform: translateY(-1px); }
  .calc-opt.sel { border-color: var(--lime); background: rgba(141,198,63,.09); box-shadow: 0 0 0 3px rgba(141,198,63,.12); }
  .calc-opt .ot { display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 800; color: var(--ink); }
  .calc-opt .ot i { color: var(--lime); font-size: 1.1rem; }
  .calc-opt .od { font-size: 0.84rem; color: var(--muted); line-height: 1.4; }
  .calc-opt .oadd { font-size: 0.82rem; font-weight: 800; color: var(--lime); margin-top: 2px; }
  .calc-opt .oincl { font-size: 0.82rem; font-weight: 800; color: var(--faint); margin-top: 2px; }
  .calc-opt .tick { position: absolute; top: 13px; right: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: #10150d; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
  .calc-opt.lockedopt { opacity: .5; cursor: not-allowed; }
  .calc-opt.lockedopt:hover { transform: none; border-color: var(--line-soft); background: var(--panel); }
  .calc-opt .olock { font-size: 0.78rem; color: var(--gold); margin-top: 2px; display: flex; align-items: center; gap: 5px; }

  .calc-script { background: var(--panel); border: 1.5px solid var(--line-soft); border-radius: 13px; padding: 4px; }
  .calc-script textarea { width: 100%; background: transparent; border: none; outline: none; resize: vertical; min-height: 96px; color: var(--text); font-family: var(--sans); font-size: 0.98rem; line-height: 1.55; padding: 13px 14px; }
  .calc-script textarea::placeholder { color: var(--dim); }
  .calc-script-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--line-soft); }
  .calc-script-foot .cc { font-size: 0.8rem; color: var(--faint); font-variant-numeric: tabular-nums; }
  .calc-script-foot .assist { font-size: 0.82rem; font-weight: 700; color: var(--lime); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

  /* ── Live quote panel (sticky) ───────────────────────── */
  .calc-quote { position: sticky; top: 88px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 64px rgba(40,50,30,.08); }
  .calc-quote-glow { position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: var(--lime); opacity: .12; filter: blur(60px); border-radius: 50%; pointer-events: none; }
  .calc-quote-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--line-soft); position: relative; }
  .calc-quote-head .ql { font-size: 0.76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
  .calc-quote-price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
  .calc-quote-price .amt { font-size: 3.6rem; font-weight: 900; color: var(--ink); line-height: .95; letter-spacing: -.03em; transition: color .2s; }
  .calc-quote-price .vat { font-size: 0.9rem; font-weight: 700; color: var(--faint); }
  .calc-quote-onetime { margin-top: 10px; font-size: 0.84rem; color: var(--lime); display: inline-flex; align-items: center; gap: 7px; background: rgba(141,198,63,.1); border: 1px solid var(--line); padding: 6px 11px; border-radius: 8px; }
  .calc-quote-body { padding: 20px 24px 24px; }
  .calc-quote-incl-h { font-size: 0.78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
  .calc-incl { display: flex; flex-direction: column; gap: 12px; }
  .calc-incl-row { display: flex; align-items: flex-start; gap: 11px; font-size: 0.94rem; color: var(--text); line-height: 1.4; }
  .calc-incl-row i { color: var(--lime); font-size: 1.05rem; flex: 0 0 auto; margin-top: 1px; }
  .calc-incl-row b { font-weight: 800; color: var(--ink); }
  .calc-quote-cta { margin-top: 22px; }
  .calc-quote-cta .calc-btn { width: 100%; }
  .calc-quote-reassure { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
  .calc-reassure { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); }
  .calc-reassure i { color: var(--faint); font-size: 0.95rem; }
  .calc-quote-foot { padding: 14px 24px; background: rgba(0,0,0,.03); border-top: 1px solid var(--line-soft); font-size: 0.8rem; color: var(--faint); display: flex; align-items: center; gap: 8px; }
  .calc-quote-foot i { font-size: 0.95rem; }

  /* ── Modal scaffolding (gate / upsell) ───────────────── */
  .calc-modal-ov { position: fixed; inset: 0; background: rgba(40,42,38,.42); backdrop-filter: blur(6px); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 28px; }
  .calc-modal { width: 100%; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 40px 100px rgba(40,50,30,.14); position: relative; overflow: hidden; }
  .calc-modal-glow { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 280px; height: 180px; background: var(--lime); opacity: .14; filter: blur(80px); pointer-events: none; }
  .calc-modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.05); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; z-index: 2; }
  .calc-modal-close:hover { background: rgba(0,0,0,.10); color: var(--ink); }

  .calc-gate { max-width: 440px; padding: 38px 38px 34px; text-align: center; }
  .calc-gate .badge { width: 56px; height: 56px; border-radius: 16px; background: rgba(141,198,63,.12); border: 1px solid var(--line); color: var(--lime); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 18px; }
  .calc-gate h3 { font-size: 1.5rem; margin-bottom: 8px; }
  .calc-gate .gsub { color: var(--muted); font-size: 0.98rem; margin-bottom: 8px; }
  .calc-gate .gprice { display: inline-flex; align-items: baseline; gap: 6px; background: rgba(141,198,63,.08); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; margin: 6px 0 22px; }
  .calc-gate .gprice .a { font-size: 1.3rem; font-weight: 900; color: var(--ink); }
  .calc-gate .gprice .b { font-size: 0.82rem; color: var(--faint); }
  .calc-social { display: flex; flex-direction: column; gap: 11px; }
  .calc-social-btn { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 13px; border-radius: 10px; font-weight: 800; font-size: 0.96rem; border: 1px solid var(--line-soft); background: rgba(0,0,0,.04); color: var(--ink); transition: 140ms; }
  .calc-social-btn:hover { background: rgba(0,0,0,.10); border-color: var(--line-strong); }
  .calc-social-btn.g { background: #fff; color: #1f2937; border-color: var(--ink); }
  .calc-social-btn.g:hover { background: #f0f0f0; }
  .calc-divider { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--faint); font-size: 0.8rem; }
  .calc-divider::before, .calc-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
  .calc-input { width: 100%; background: var(--bg-2); border: 1.5px solid var(--line-soft); border-radius: 10px; padding: 13px 15px; color: var(--text); font-family: var(--sans); font-size: 0.96rem; outline: none; }
  .calc-input:focus { border-color: var(--lime); }
  .calc-input::placeholder { color: var(--dim); }
  .calc-gate-fine { margin-top: 16px; font-size: 0.76rem; color: var(--faint); line-height: 1.5; }
  .calc-gate-fine a { color: var(--muted); text-decoration: underline; }
  .calc-gate-why { margin-top: 18px; padding: 12px 14px; background: rgba(0,0,0,.03); border: 1px solid var(--line-soft); border-radius: 10px; font-size: 0.82rem; color: var(--muted); line-height: 1.5; display: flex; gap: 9px; text-align: left; }
  .calc-gate-why i { color: var(--lime); font-size: 1rem; flex: 0 0 auto; margin-top: 1px; }

  /* ── Upsell comparison ───────────────────────────────── */
  .calc-upsell { max-width: 760px; padding: 0; }
  .calc-upsell-top { padding: 34px 40px 26px; text-align: center; position: relative; }
  .calc-upsell-receipt { display: inline-flex; align-items: center; gap: 9px; font-size: 0.84rem; font-weight: 800; color: var(--lime); background: rgba(141,198,63,.1); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; margin-bottom: 18px; }
  .calc-upsell-top h3 { font-size: 1.7rem; margin-bottom: 10px; letter-spacing: -.02em; }
  .calc-upsell-top h3 .accent { color: var(--lime); }
  .calc-upsell-top p { color: var(--muted); font-size: 1.02rem; max-width: 52ch; margin: 0 auto; }
  .calc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 8px 40px 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
  .calc-compare-col { padding: 26px 26px 28px; }
  .calc-compare-col.now { background: rgba(0,0,0,.025); }
  .calc-compare-col.plan { background: linear-gradient(180deg, rgba(141,198,63,.1), rgba(141,198,63,.03)); border-left: 1px solid var(--line); position: relative; }
  .calc-compare-tag { font-size: 0.74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
  .calc-compare-col.plan .calc-compare-tag { color: var(--lime); }
  .calc-compare-big { font-size: 2.4rem; font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -.03em; }
  .calc-compare-big small { font-size: 0.95rem; font-weight: 700; color: var(--faint); }
  .calc-compare-sub { font-size: 0.9rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }
  .calc-compare-rate { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 0.92rem; color: var(--text); }
  .calc-compare-rate b { color: var(--ink); font-weight: 900; }
  .calc-compare-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
  .calc-compare-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.9rem; color: var(--text); }
  .calc-compare-list li i { color: var(--lime); font-size: 1rem; flex: 0 0 auto; margin-top: 2px; }
  .calc-compare-crown { position: absolute; top: -1px; right: 22px; background: var(--lime); color: #10150d; font-size: 0.7rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 0 0 8px 8px; }
  .calc-upsell-gap { margin: 22px 40px 0; padding: 16px 20px; background: rgba(141,198,63,.07); border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 13px; }
  .calc-upsell-gap i { color: var(--lime); font-size: 1.4rem; flex: 0 0 auto; }
  .calc-upsell-gap .t { font-size: 0.98rem; color: var(--text); line-height: 1.45; }
  .calc-upsell-gap .t b { color: var(--ink); font-weight: 900; }
  .calc-upsell-actions { padding: 24px 40px 34px; display: flex; align-items: center; gap: 14px; }
  .calc-upsell-actions .calc-btn-primary { flex: 1; }

  .calc-footer { border-top: 1px solid var(--line-soft); padding: 40px 0; margin-top: 40px; background: var(--bg-2); }
  .calc-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .calc-footer .fnote { font-size: 0.84rem; color: var(--faint); }
  .calc-footer .fnote b { color: var(--muted); }

  .calc-modetoggle { display: inline-flex; gap: 4px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 13px; padding: 4px; margin-bottom: 30px; }
  .calc-modetoggle button { padding: 11px 20px; border-radius: 9px; font-weight: 800; font-size: 0.95rem; white-space: nowrap; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; transition: 140ms; }
  .calc-modetoggle button i { font-size: 1.05rem; }
  .calc-modetoggle button.on { background: var(--lime); color: #10150d; }
  .calc-modetoggle button:not(.on):hover { color: var(--ink); }

  .calc-budget-big { font-size: 3.6rem; font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -.03em; margin: 4px 0 22px; display: flex; align-items: baseline; gap: 12px; }
  .calc-budget-big small { font-size: 1rem; font-weight: 700; color: var(--faint); letter-spacing: 0; }
  .calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; outline: none; cursor: pointer; }
  .calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); border: 4px solid var(--bg-2); box-shadow: 0 2px 12px rgba(40,50,30,.10); cursor: grab; }
  .calc-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--lime); border: 4px solid var(--bg-2); box-shadow: 0 2px 12px rgba(40,50,30,.10); cursor: grab; }
  .calc-range-scale { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--faint); margin-top: 9px; }
  .calc-bresult { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; margin-top: 28px; position: relative; overflow: hidden; }
  .calc-bresult .rtag { font-size: 0.76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--lime); margin-bottom: 12px; }
  .calc-bresult .rmain { font-size: 1.32rem; font-weight: 800; color: var(--ink); line-height: 1.45; letter-spacing: -.01em; }
  .calc-bresult .rmain b { color: var(--lime); }
  .calc-bchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .calc-bchip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 700; color: var(--text); background: rgba(0,0,0,.04); border: 1px solid var(--line-soft); border-radius: 999px; padding: 6px 13px; }
  .calc-bchip i { color: var(--lime); font-size: 0.95rem; }
  .calc-buse { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 0.94rem; color: var(--muted); display: flex; align-items: center; gap: 9px; }
  .calc-buse i { color: var(--lime); font-size: 1.05rem; flex: 0 0 auto; }
  .calc-buse b { color: var(--ink); font-weight: 800; }
  .calc-unlock { margin-top: 14px; padding: 13px 16px; background: rgba(141,198,63,.07); border: 1px dashed var(--line-strong); border-radius: 11px; font-size: 0.92rem; color: var(--text); display: flex; align-items: center; gap: 10px; }
  .calc-unlock i { color: var(--lime); font-size: 1.15rem; flex: 0 0 auto; }
  .calc-unlock b { color: var(--lime); font-weight: 800; }

  @media (max-width: 980px) {
    .calc-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .calc-flow-grid { grid-template-columns: 1fr; }
    .calc-quote { position: static; }
    .calc-compare { grid-template-columns: 1fr; }
  }

  .calc-root i.ti { display:inline-block; width:1em; height:1em; vertical-align:-.125em;
    background-color:currentColor; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
  `;
  const ICON = {
    'sparkles': "<path d='M12 3l1.6 5.4l5.4 1.6l-5.4 1.6l-1.6 5.4l-1.6 -5.4l-5.4 -1.6l5.4 -1.6z'/>",
    'check': "<path d='M5 12l5 5l10 -10'/>",
    'circle-check': "<path d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/><path d='M9 12l2 2l4 -4'/>",
    'arrow-right': "<path d='M5 12h14'/><path d='M13 18l6 -6'/><path d='M13 6l6 6'/>",
    'arrow-left': "<path d='M19 12h-14'/><path d='M11 18l-6 -6'/><path d='M11 6l-6 6'/>",
    'bolt': "<path d='M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11'/>",
    'user': "<path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/>",
    'user-plus': "<path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/><path d='M16 19h6'/><path d='M19 16v6'/><path d='M6 21v-2a4 4 0 0 1 4 -4h4'/>",
    'clock': "<path d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/><path d='M12 7v5l3 3'/>",
    'movie': "<path d='M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z'/><path d='M8 4l0 16'/><path d='M16 4l0 16'/><path d='M4 8l4 0'/><path d='M4 16l4 0'/><path d='M4 12l16 0'/><path d='M16 8l4 0'/><path d='M16 16l4 0'/>",
    'microphone': "<path d='M9 2m0 3a3 3 0 0 1 3 -3a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3a3 3 0 0 1 -3 -3z'/><path d='M5 10a7 7 0 0 0 14 0'/><path d='M8 21l8 0'/><path d='M12 17l0 4'/>",
    'music': "<path d='M6 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/><path d='M16 16a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/><path d='M9 17v-13h10v13'/><path d='M9 8h10'/>",
    'music-off': "<path d='M3 3l18 18'/><path d='M9 17a3 3 0 1 0 -6 0a3 3 0 0 0 6 0z'/><path d='M9 17v-9'/><path d='M12 5l3 -1v9'/>",
    'film': "<path d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/>",
    'wand': "<path d='M6 21l15 -15l-3 -3l-15 15l3 3'/><path d='M15 6l3 3'/>",
    'pencil': "<path d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4'/><path d='M13.5 6.5l4 4'/>",
    'play': "<path d='M7 4v16l13 -8z'/>",
    'mail': "<path d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z'/><path d='M3 7l9 6l9 -6'/>",
    'lock': "<path d='M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z'/><path d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0'/><path d='M8 11v-4a4 4 0 1 1 8 0v4'/>",
    'shield': "<path d='M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3'/>",
    'shield-check': "<path d='M11.46 3.51a2 2 0 0 1 1.08 0l6 1.8a2 2 0 0 1 1.46 1.92v4.77a8 8 0 0 1 -4.42 7.16l-2.7 1.35a1 1 0 0 1 -.76 0l-2.7 -1.35a8 8 0 0 1 -4.42 -7.16v-4.77a2 2 0 0 1 1.46 -1.92z'/><path d='M9 12l2 2l4 -4'/>",
    'credit-card': "<path d='M3 5m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z'/><path d='M3 10l18 0'/><path d='M7 15l.01 0'/><path d='M11 15l2 0'/>",
    'sparkle-up': "<path d='M3 17l6 -6l4 4l8 -8'/><path d='M14 7l7 0l0 7'/>",
    'crown': "<path d='M12 6l4 6l5 -4l-2 10h-14l-2 -10l5 4z'/>",
    'infinity': "<path d='M9.828 9.172a4 4 0 1 0 0 5.656a10 10 0 0 0 2.172 -2.828a10 10 0 0 1 2.172 -2.828a4 4 0 1 1 0 5.656a10 10 0 0 1 -2.172 -2.828a10 10 0 0 0 -2.172 -2.828'/>",
    'x': "<path d='M18 6l-12 12'/><path d='M6 6l12 12'/>",
    'chevron-right': "<path d='M9 6l6 6l-6 6'/>",
    'chevron-down': "<path d='M6 9l6 6l6 -6'/>",
    'star': "<path d='M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z'/>",
    'rocket': "<path d='M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3'/><path d='M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3'/>",
    'gift': "<path d='M3 8m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z'/><path d='M12 8l0 13'/><path d='M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7'/><path d='M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5'/>",
    'receipt': "<path d='M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2'/><path d='M9 7l6 0'/><path d='M9 11l6 0'/>",
    'trending': "<path d='M3 17l6 -6l4 4l8 -8'/><path d='M14 7l7 0l0 7'/>",
    'info': "<path d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/><path d='M12 9h.01'/><path d='M11 12h1v4h1'/>",
  };
  const svgFor = (inner) => "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>" + inner + "</svg>";
  let css = '';
  for (const k in ICON) {
    const u = 'url("data:image/svg+xml,' + encodeURIComponent(svgFor(ICON[k])) + '")';
    css += '.calc-root i.ti-' + k + '{-webkit-mask-image:' + u + ';mask-image:' + u + '}';
  }
  s.textContent += css;
  document.head.appendChild(s);
})();

function CalcNav({ onStart }) {
  return (
    <div className="calc-nav">
      <div className="calc-nav-inner">
        <div className="calc-logo"><span className="mark"></span>MyAvatar</div>
        <ul className="calc-nav-links">
          <li><a href="#">Product</a></li>
          <li><a href="#" className="on">Try one video</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Examples</a></li>
        </ul>
        <div className="calc-nav-cta">
          <a href="/pricing" className="calc-btn calc-btn-ghost calc-btn-sm">Subscribe</a>
          <button className="calc-btn calc-btn-primary calc-btn-sm" onClick={onStart}>Get a price</button>
        </div>
      </div>
    </div>
  );
}

/* REAL COST-PLUS PRICE MODEL — costs are MyAvatar's REAL cost; buyer sees one
   clean VAT-exclusive price. price = cost × MARGIN (3×). Shared with the backend
   /api/calculator/quote (budget_planner.quote_video) — same numbers. */
const COST = { twinSetup: 2.76, perSecStandard: 0.12, premiumMult: 2.0, music: 0.30, usdEur: 0.92 };
const MARGIN = 3;
const PRICE = {
  length: {
    '10s':  { label: '10 seconds', hint: 'Hook / ad bumper',  secs: 10 },
    '30s':  { label: '30 seconds', hint: 'Social post',       secs: 30 },
    '60s':  { label: '1 minute',   hint: 'Explainer / promo',  secs: 60 },
    'long': { label: 'Longer',     hint: '≈2 min · in-depth',  secs: 120 },
  },
};
const roundPrice = (x) => Math.max(1, Math.round(x));
const twinSetupPrice = (margin = MARGIN) => roundPrice(COST.twinSetup * margin);
const musicPrice = (margin = MARGIN) => Math.max(2, roundPrice(COST.music * margin));

function quotePrice(sel, margin = MARGIN) {
  const secs = PRICE.length[sel.length].secs;
  const perSec = COST.perSecStandard * (sel.style === 'cinematic' ? COST.premiumMult : 1);
  let render = roundPrice(perSec * secs * margin);
  if (sel.music) render += musicPrice(margin);
  const oneTime = sel.avatar === 'twin' ? twinSetupPrice(margin) : 0;
  return { render, oneTime, total: render + oneTime, perVideo: render, hasTwin: sel.avatar === 'twin' };
}

const BASE_SEL = { avatar: 'ready', length: '10s', style: 'talking', voice: 'stock', music: false };
const LADDER = [
  { label: '30 seconds',                           up: (s) => ({ ...s, length: '30s' }) },
  { label: 'a full minute',                        up: (s) => ({ ...s, length: '60s' }) },
  { label: 'your own digital twin + cloned voice', up: (s) => ({ ...s, avatar: 'twin', voice: 'cloned' }) },
  { label: 'cinematic style',                      up: (s) => ({ ...s, style: 'cinematic' }) },
  { label: 'a 2-minute video',                     up: (s) => ({ ...s, length: 'long' }) },
  { label: 'background music',                     up: (s) => ({ ...s, music: true }) },
];

function optimizeForBudget(budget, margin = MARGIN) {
  let sel = { ...BASE_SEL, script: '' };
  const applied = [];
  if (quotePrice(sel, margin).total > budget) {
    return { sel, affordable: false, price: quotePrice(sel, margin), applied };
  }
  for (let i = 0; i < LADDER.length; i++) {
    const next = LADDER[i].up(sel);
    if (quotePrice(next, margin).total <= budget) { sel = next; applied.push(i); }
  }
  return { sel, affordable: true, price: quotePrice(sel, margin), applied };
}

function nextUnlock(budget, margin = MARGIN) {
  const opt = optimizeForBudget(budget, margin);
  if (!opt.affordable) return null;
  let best = null;
  for (let i = 0; i < LADDER.length; i++) {
    if (opt.applied.includes(i)) continue;
    const need = quotePrice(LADDER[i].up(opt.sel), margin).total;
    if (need > budget && (!best || need < best.at)) best = { label: LADDER[i].label, at: need };
  }
  return best;
}

function included(sel) {
  const L = PRICE.length[sel.length].label.toLowerCase();
  const items = [];
  items.push({ icon: sel.avatar === 'twin' ? 'user-plus' : 'user',
    text: sel.avatar === 'twin' ? <span>Your <b>own digital twin</b> — set up once, reuse forever</span> : <span>A <b>ready-made avatar</b> — included, no setup</span> });
  items.push({ icon: 'clock', text: <span>A <b>{L === 'longer' ? '≈2-minute' : L}</b> {sel.style === 'cinematic' ? 'cinematic' : 'talking-head'} video</span> });
  items.push({ icon: 'microphone', text: sel.voice === 'cloned' ? <span>Narrated in <b>your cloned voice</b></span> : <span>A natural <b>stock voice</b></span> });
  if (sel.music) items.push({ icon: 'music', text: <span>Background <b>music track</b></span> });
  items.push({ icon: 'bolt', text: <span>Rendered and <b>ready in minutes</b></span> });
  return items;
}

const PLANS = {
  starter: { name: 'Starter', price: 29, videos: 10, blurb: '10 avatar videos / month', extras: ['25 AI images', '50,000 voiceover characters', 'Monthly growth analysis'] },
  pro:     { name: 'Pro',     price: 79, videos: 30, blurb: '30 avatar videos / month', extras: ['Cinema-grade AI video', '100 AI images', 'Priority rendering'] },
};
function fmt(n) { return '€' + n; }

Object.assign(window, { CalcNav, COST, MARGIN, PRICE, quotePrice, twinSetupPrice, musicPrice, roundPrice, optimizeForBudget, nextUnlock, BASE_SEL, LADDER, included, PLANS, fmt });