/* ===================================================================
   PERX TOOLS - dark-theme design system
   Brand: Perx by Covase. Indigo ground · Perx-green hero numbers.
   Card surfaces leaned to the indigo family (vs the legacy #1c2128)
   so they sit harmoniously on the #020029 blue-black ground.
   =================================================================== */

:root{
  /* brand */
  --indigo:#242254; --indigo-2:#4b2ebc; --indigo-mid:#301d7e;
  --bg:#020029;
  --green:#A7EB52; --green-ink:#0a1c03; --green-dim:#7fbf38;
  --violet:#726cff; --lavender:#ba38cc; --yellow:#ffd72e; --orange:#ff7650;

  /* surfaces (indigo-harmonious) */
  --card:#0c0b32; --card-2:#100e3c; --field:#15144a; --field-2:#1b1a57;
  --line:rgba(124,118,255,.16); --line-soft:rgba(124,118,255,.10);
  --glow:0 0 0 1px rgba(167,235,82,.0), 0 18px 50px -18px rgba(167,235,82,.45);

  /* ink */
  --ink:#ffffff; --text:#d9d9f2; --muted:#8e8ec4; --faint:#5d5d92;

  /* shape */
  --r:20px; --r-md:16px; --r-sm:12px; --pill:999px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.7);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,.8);

  --ui:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--ui); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.pt-num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
button{font-family:inherit; cursor:pointer}
::selection{background:rgba(167,235,82,.3); color:#fff}

/* --- app shell --------------------------------------------------- */
.pt-app{min-height:100vh; display:flex; flex-direction:column;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(75,46,188,.30), transparent 60%),
    radial-gradient(900px 600px at 6% 8%, rgba(114,108,255,.12), transparent 55%),
    var(--bg);
}

/* top nav */
.pt-nav{position:sticky; top:0; z-index:40; display:flex; align-items:center;
  gap:22px; padding:14px 26px; backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(2,0,41,.86), rgba(2,0,41,.55));
  border-bottom:1px solid var(--line-soft);}
.pt-tabs{display:flex; gap:6px; background:rgba(255,255,255,.04);
  padding:5px; border-radius:var(--pill); border:1px solid var(--line-soft)}
.pt-tab{border:0; background:transparent; color:var(--muted); font-weight:600;
  font-size:14px; padding:9px 18px; border-radius:var(--pill); white-space:nowrap;
  transition:.18s; display:flex; align-items:center; gap:8px}
.pt-tab:hover{color:var(--text)}
.pt-tab.on{background:var(--ink); color:#13123a; box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}
.pt-tab .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.6}
.pt-spacer{flex:1}

/* device toggle */
.pt-dev{display:flex; gap:4px; background:rgba(255,255,255,.04);
  padding:4px; border-radius:var(--pill); border:1px solid var(--line-soft)}
.pt-dev button{border:0; background:transparent; color:var(--muted); padding:7px 11px;
  border-radius:var(--pill); display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600}
.pt-dev button.on{background:rgba(167,235,82,.16); color:var(--green)}
.pt-dev svg{display:block}

/* stage */
.pt-stage{flex:1; padding:34px 26px 56px; display:flex; justify-content:center}
.pt-stage.is-mobile{padding:30px 18px 56px}
.pt-canvas{width:100%; max-width:1120px}

/* --- brand wordmark ---------------------------------------------- */
.wm{display:flex; align-items:center; gap:11px}
.wm-mk{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--green); color:var(--green-ink); font-weight:800; font-size:18px;
  box-shadow:0 6px 16px -6px rgba(167,235,82,.6)}
.wm-tx{display:flex; flex-direction:column; line-height:1}
.wm-nm{font-weight:800; font-size:19px; color:var(--ink); letter-spacing:-.01em}
.wm-sub{font-size:11px; color:var(--muted); font-weight:500; margin-top:3px; letter-spacing:.02em}

/* --- layout primitives ------------------------------------------- */
.tool-head{margin:2px 0 22px}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--green); margin-bottom:14px}
.eyebrow .pdot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 12px var(--green)}
.tool-h1{font-size:clamp(28px,4vw,42px); line-height:1.04; letter-spacing:-.025em;
  color:var(--ink); font-weight:800; margin:0; text-wrap:balance}
.tool-sub{font-size:16px; color:var(--muted); margin:14px 0 0; max-width:60ch; line-height:1.5}

.grid2{display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start}
.is-mobile .grid2{grid-template-columns:1fr}

.card{background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-pad{padding:26px}
.sticky{position:sticky; top:92px}
.is-mobile .sticky{position:static}

.card-title{font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px; display:flex; align-items:center; gap:10px}
.card-title .n{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:rgba(114,108,255,.18); color:var(--violet); font-size:12px; font-weight:800}

/* --- mode toggle (gradient) -------------------------------------- */
.mode-toggle{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0;
  padding:5px; border-radius:var(--pill); background:rgba(255,255,255,.05);
  border:1px solid var(--line); margin-bottom:22px}
.mode-toggle .knob{position:absolute; top:5px; bottom:5px; width:calc(50% - 5px);
  border-radius:var(--pill); background:linear-gradient(120deg,var(--indigo-2),var(--violet));
  box-shadow:0 10px 26px -10px rgba(114,108,255,.8); transition:transform .32s cubic-bezier(.5,1.4,.5,1)}
.mode-toggle.r .knob{transform:translateX(100%)}
.mode-toggle button{position:relative; z-index:2; border:0; background:transparent;
  color:var(--muted); font-weight:700; font-size:15px; padding:12px 8px; border-radius:var(--pill);
  transition:.2s; display:flex; align-items:center; justify-content:center; gap:9px}
.mode-toggle button.on{color:#fff}

/* --- segmented control ------------------------------------------- */
.field{margin-bottom:20px}
.field:last-child{margin-bottom:0}
.flabel{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px}
.flabel b{font-size:14.5px; color:var(--text); font-weight:600}
.flabel .hint{font-size:12px; color:var(--faint)}
.flabel .val{font-family:var(--mono); font-size:14px; color:var(--green); font-weight:600}

.seg{display:flex; gap:6px; background:rgba(0,0,0,.25); padding:5px; border-radius:var(--r-sm);
  border:1px solid var(--line-soft)}
.seg button{flex:1; border:0; background:transparent; color:var(--muted); font-weight:600;
  font-size:13.5px; padding:11px 8px; border-radius:9px; transition:.16s; line-height:1.2}
.seg button small{display:block; font-weight:500; font-size:11px; opacity:.7; margin-top:3px}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--field-2); color:#fff; box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}
.seg.green button.on{background:rgba(167,235,82,.16); color:var(--green); box-shadow:none}

/* product multi-select */
.prodgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.prodgrid.k2{grid-template-columns:repeat(2,1fr)}
.prodchip{position:relative; border:1.5px solid var(--line); background:var(--field);
  border-radius:var(--r-sm); padding:16px 12px 14px; text-align:left; transition:.18s;
  display:flex; flex-direction:column; gap:10px; min-height:108px}
.prodchip:hover{border-color:rgba(124,118,255,.4)}
.prodchip .ico{height:42px; display:flex; align-items:flex-end}
.prodchip .pname{font-weight:700; font-size:14px; color:var(--text)}
.prodchip .pcost{font-family:var(--mono); font-size:12px; color:var(--muted)}
.prodchip .chk{position:absolute; top:11px; right:11px; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--line); display:grid; place-items:center; transition:.18s; color:transparent}
.prodchip.on{border-color:var(--green); background:rgba(167,235,82,.10); box-shadow:0 0 0 1px var(--green) inset, 0 14px 30px -16px rgba(167,235,82,.5)}
.prodchip.on .pcost{color:var(--green)}
.prodchip.on .chk{background:var(--green); border-color:var(--green); color:var(--green-ink)}

/* --- inputs ------------------------------------------------------ */
.inp, .sel{width:100%; background:var(--field); border:1px solid var(--line); color:var(--ink);
  font-family:var(--ui); font-size:15px; padding:13px 14px; border-radius:var(--r-sm);
  transition:.16s; appearance:none; -webkit-appearance:none}
.inp::placeholder{color:var(--faint)}
.inp:focus, .sel:focus{outline:0; border-color:var(--violet); box-shadow:0 0 0 4px rgba(114,108,255,.18)}
.sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238e8ec4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:42px; cursor:pointer}
.sel option{background:#15144a; color:#fff}
.inp-money{position:relative}
.inp-money .cur{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted);
  font-family:var(--mono); font-size:15px; pointer-events:none}
.inp-money .inp{padding-left:32px; font-family:var(--mono)}

/* range slider */
input[type=range]{-webkit-appearance:none; width:100%; height:6px; border-radius:6px; margin:8px 0 2px;
  background:linear-gradient(90deg,var(--green) var(--p,40%), rgba(255,255,255,.10) var(--p,40%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:4px solid var(--green); box-shadow:0 4px 14px -3px rgba(0,0,0,.6); cursor:grab}
input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:#fff;
  border:4px solid var(--green); cursor:grab}
.ticks{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:8px}

/* --- hero result ------------------------------------------------- */
.hero{position:relative; overflow:hidden; padding:30px 28px 26px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(75,46,188,.45), transparent 55%),
    linear-gradient(180deg,#13123f,#0a0930);
  border:1px solid rgba(167,235,82,.22); border-radius:var(--r); box-shadow:var(--shadow-lg)}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 60% at 50% 120%, rgba(167,235,82,.10), transparent 70%)}
.hero-kick{font-size:13px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:9px; position:relative; z-index:2}
.hero-num{font-family:var(--mono); font-weight:700; color:var(--green); line-height:.92;
  font-size:clamp(54px,9vw,82px); letter-spacing:-.04em; margin:14px 0 2px; position:relative; z-index:2;
  text-shadow:0 0 50px rgba(167,235,82,.35)}
.hero-num .per{font-size:.38em; color:var(--muted); font-weight:600; letter-spacing:0; margin-left:6px}
.hero-cap{font-size:15px; color:var(--text); position:relative; z-index:2; line-height:1.45; max-width:42ch}
.hero-cap b{color:#fff}

.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:24px;
  background:var(--line-soft); border-radius:var(--r-sm); overflow:hidden; position:relative; z-index:2}
.metrics.k2{grid-template-columns:repeat(2,1fr)}
.metric{background:rgba(8,6,40,.6); padding:15px 14px}
.metric .ml{font-size:11.5px; color:var(--muted); font-weight:500; line-height:1.3}
.metric .mv{font-family:var(--mono); font-size:20px; color:var(--ink); font-weight:600; margin-top:6px; letter-spacing:-.02em}
.metric .mv.g{color:var(--green)}
.metric .mv.dim{color:var(--muted); font-size:17px}

/* breakdown table */
.bd{margin-top:6px}
.bd-row{display:flex; justify-content:space-between; align-items:center; padding:13px 0;
  border-bottom:1px solid var(--line-soft); font-size:14.5px}
.bd-row:last-child{border-bottom:0}
.bd-row .l{color:var(--muted)}
.bd-row .l small{display:block; color:var(--faint); font-size:11.5px; margin-top:2px}
.bd-row .v{font-family:var(--mono); color:var(--text); font-weight:500}
.bd-row .v.pos{color:var(--green)}
.bd-row .v.neg{color:var(--orange)}
.bd-row.tot{border-top:1.5px solid var(--line); margin-top:4px; padding-top:15px}
.bd-row.tot .l{color:#fff; font-weight:700; font-size:15px}
.bd-row.tot .v{color:var(--green); font-size:17px; font-weight:700}

/* --- CTA --------------------------------------------------------- */
.cta{display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0;
  background:var(--green); color:var(--green-ink); font-weight:700; font-size:15.5px;
  padding:15px 24px; border-radius:var(--pill); transition:.18s; width:100%;
  box-shadow:0 16px 34px -14px rgba(167,235,82,.7)}
.cta:hover{transform:translateY(-1px); box-shadow:0 20px 40px -14px rgba(167,235,82,.85)}
.cta.ghost{background:transparent; color:var(--text); border:1px solid var(--line); box-shadow:none}
.cta.ghost:hover{border-color:var(--violet); color:#fff; transform:none}
.cta.violet{background:linear-gradient(120deg,var(--indigo-2),var(--violet)); color:#fff;
  box-shadow:0 16px 34px -14px rgba(114,108,255,.7)}
.cta-arrow{display:grid; place-items:center}

/* --- email gate -------------------------------------------------- */
.gate-wrap{position:relative}
.gate-blur{filter:blur(7px) saturate(.7); opacity:.5; pointer-events:none; user-select:none}
.gate-over{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:24px; gap:14px;
  background:radial-gradient(120% 90% at 50% 50%, rgba(10,9,48,.55), rgba(10,9,48,.86))}
.gate-lock{width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(167,235,82,.14); color:var(--green); border:1px solid rgba(167,235,82,.3)}
.gate-over h4{margin:0; color:#fff; font-size:19px; font-weight:700; letter-spacing:-.01em}
.gate-over p{margin:0; color:var(--muted); font-size:14px; max-width:34ch; line-height:1.45}
.gate-form{display:flex; gap:9px; width:100%; max-width:380px; margin-top:4px}
.gate-form .inp{flex:1}
.gate-form .cta{width:auto; padding:13px 20px; white-space:nowrap}
.gate-fine{font-size:11.5px; color:var(--faint); margin-top:2px}
.gate-err{font-size:12px; color:var(--orange); margin-top:2px}

/* --- trust strip ------------------------------------------------- */
.trust{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:26px;
  padding-top:22px; border-top:1px solid var(--line-soft)}
.trust .ti{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted)}
.trust .ti b{color:var(--text); font-weight:600}
.trust .badge{font-family:var(--mono); font-size:11px; padding:4px 9px; border-radius:7px;
  background:rgba(114,108,255,.14); color:var(--violet); border:1px solid rgba(114,108,255,.24); font-weight:600}
.trust .sep{width:1px; height:16px; background:var(--line)}

/* chips / pills */
.pill-row{display:flex; flex-wrap:wrap; gap:9px; margin-top:2px}
.pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  padding:7px 12px; border-radius:var(--pill); background:rgba(255,255,255,.05);
  border:1px solid var(--line-soft); color:var(--text)}
.pill .pd{width:7px;height:7px;border-radius:50%}
.tag-bik{background:rgba(167,235,82,.12); border-color:rgba(167,235,82,.3); color:var(--green); font-family:var(--mono)}

/* rising-BIK schedule strip */
.bik-sched{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:14px; position:relative; z-index:2}
.bik-sched .bsl{font-size:11.5px; color:var(--muted); width:100%; margin-bottom:2px}
.bik-sched .bsp{font-family:var(--mono); font-size:11px; color:var(--muted); padding:4px 8px; border-radius:7px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft)}
.bik-sched .bsp.on{background:rgba(167,235,82,.14); border-color:rgba(167,235,82,.3); color:var(--green)}

/* --- share modal ------------------------------------------------- */
.modal-bk{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:24px;
  background:rgba(2,0,25,.74); backdrop-filter:blur(8px); animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.share{width:100%; max-width:430px; animation:pop .28s cubic-bezier(.5,1.5,.5,1)}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.97)}to{opacity:1; transform:none}}
.share-card{position:relative; overflow:hidden; border-radius:24px; padding:30px 28px 26px;
  background:radial-gradient(130% 100% at 100% 0%, rgba(75,46,188,.6), transparent 55%), linear-gradient(165deg,#16154a,#080727);
  border:1px solid rgba(167,235,82,.3); box-shadow:0 50px 120px -30px #000}
.share-card .glow{position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(167,235,82,.22), transparent 70%); pointer-events:none}
.share-eyebrow{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green)}
.share-big{font-family:var(--mono); font-weight:700; color:#fff; font-size:clamp(34px,8vw,46px);
  line-height:1.0; letter-spacing:-.03em; margin:16px 0 8px}
.share-big em{color:var(--green); font-style:normal}
.share-sub{font-size:14.5px; color:var(--text); line-height:1.45; margin:0; max-width:32ch}
.share-url{display:flex; align-items:center; gap:10px; margin-top:22px; padding:11px 12px 11px 14px;
  background:rgba(0,0,0,.34); border:1px solid var(--line); border-radius:12px}
.share-url .u{flex:1; font-family:var(--mono); font-size:13px; color:var(--text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.share-url button{border:0; background:var(--green); color:var(--green-ink); font-weight:700; font-size:12.5px;
  padding:8px 13px; border-radius:8px; white-space:nowrap}
.share-foot{display:flex; align-items:center; justify-content:space-between; margin-top:20px}
.chans{display:flex; gap:10px}
.chan{width:46px; height:46px; border-radius:13px; border:1px solid var(--line); background:rgba(255,255,255,.05);
  display:grid; place-items:center; transition:.16s; color:#fff}
.chan:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.3)}
.chan.wa:hover{background:rgba(37,211,102,.18)} .chan.li:hover{background:rgba(10,102,194,.22)}
.chan.rd:hover{background:rgba(255,69,0,.18)} .chan.cp:hover{background:rgba(167,235,82,.16)}
.modal-x{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:0;
  background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; z-index:3}
.modal-x:hover{background:rgba(255,255,255,.16)}
.share-note{text-align:center; font-size:12.5px; color:var(--muted); margin-top:16px}

/* --- phone frame ------------------------------------------------- */
.phone{width:392px; margin:0 auto; border-radius:52px; padding:13px; background:linear-gradient(160deg,#1c1b3e,#070620);
  box-shadow:0 0 0 2px rgba(124,118,255,.16), var(--shadow-lg); position:relative}
.phone-screen{border-radius:40px; overflow:hidden; background:var(--bg); position:relative; height:812px;
  overflow-y:auto; scrollbar-width:none}
.phone-screen::-webkit-scrollbar{display:none}
.phone-notch{position:absolute; top:0; left:50%; transform:translateX(-50%); width:150px; height:30px;
  background:#070620; border-radius:0 0 18px 18px; z-index:20}
.statusbar{position:sticky; top:0; z-index:15; display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px 8px; font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(180deg,var(--bg),rgba(2,0,41,.0))}
.statusbar .icons{display:flex; gap:6px; align-items:center}

/* mobile content paddings + single-column inside the phone */
.mscreen{padding:8px 16px 30px}
.mscreen .tool-h1{font-size:25px}
.mscreen .tool-sub{font-size:14.5px}
.mscreen .hero-num{font-size:clamp(46px,15vw,64px)}
.mscreen .grid2{grid-template-columns:1fr; gap:16px}
.mscreen .sticky{position:static}
.mscreen .mode-toggle{max-width:none}
.mscreen .mode-toggle button{font-size:13px; padding:11px 6px}
.mscreen .card-pad{padding:20px}
.mscreen .metrics, .mscreen .metrics.k2{grid-template-columns:1fr 1fr}
.mscreen .embed{max-width:none}

/* embed showcase split collapses narrow */
@media (max-width:760px){ .embed-split{grid-template-columns:1fr!important} }

/* bare embed (iframe payload): just the widget, light, centred, no chrome */
.pt-embed-bare{display:flex; justify-content:center; padding:16px; background:transparent}
.pt-embed-bare .embed{margin:0}

/* --- responsive (replaces the old desktop/mobile device toggle) --- */
@media (max-width:860px){
  .pt-nav{flex-wrap:wrap; gap:12px; padding:12px 16px}
  .pt-tabs{order:3; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .pt-tab{padding:9px 14px; font-size:13px}
  .pt-stage{padding:22px 16px 48px}
  .grid2{grid-template-columns:1fr; gap:16px}     /* inputs above result */
  .sticky{position:static}                         /* don't pin result on mobile */
  .tool-h1{font-size:26px}
  .tool-sub{font-size:14.5px}
  .hero-num{font-size:clamp(44px,13vw,64px)}
  .card-pad{padding:20px}
  .metrics, .metrics.k2{grid-template-columns:1fr 1fr}
  .embed-context{padding:22px}
}
@media (max-width:460px){
  .pt-tab .dot{display:none}                       /* tighten tabs on small phones */
  .metrics, .metrics.k2{grid-template-columns:1fr}
  .gate-form{flex-direction:column}
  .gate-form .cta{width:100%}
}

/* --- compliance caveat ------------------------------------------- */
.caveat{font-size:11.5px; line-height:1.5; color:var(--faint); margin:16px 0 0;
  padding-top:14px; border-top:1px dashed var(--line-soft)}
.caveat.light{color:#8a90a3; border-top-color:#e3e6ee}

/* --- embed widget (LIGHT - sits on a white partner site) --------- */
.embed-context{background:#fff; border-radius:var(--r); padding:38px; box-shadow:var(--shadow);
  border:1px solid #e7e9f0}
.embed-fakehead{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.embed-fakehead .lg{width:36px;height:36px;border-radius:9px;background:#1f2a44;color:#fff;display:grid;place-items:center;font-weight:800}
.embed-fakehead .ft{font-weight:800; color:#1f2a44; font-size:17px; line-height:1.1}
.embed-fakehead .fs{font-size:12px; color:#8a90a3}
.embed-fake-copy{color:#5a6072; font-size:14px; line-height:1.6; max-width:54ch; margin:18px 0 24px}
.embed-fake-copy h3{color:#1f2a44; font-size:21px; margin:0 0 8px; letter-spacing:-.01em}
.embed-fake-nav{display:flex; gap:22px; padding-bottom:18px; border-bottom:1px solid #eceef4; margin-bottom:4px}
.embed-fake-nav span{font-size:13px; color:#8a90a3; font-weight:600}
.embed-fake-nav span:first-child{color:#1f2a44}

.embed{max-width:440px; border-radius:18px; overflow:hidden; border:1px solid #e6e8f0;
  background:#fff; box-shadow:0 24px 50px -28px rgba(20,30,60,.35)}
.embed-top{padding:16px 20px; border-bottom:1px solid #eef0f6; display:flex; align-items:center; justify-content:space-between}
.embed-top .wm-nm{color:#16183a; font-size:17px}
.embed-top .wm-sub{color:#9aa0b4}
.embed-top .wm-mk{box-shadow:none}
.embed-tag{font-family:var(--mono); font-size:10.5px; font-weight:600; color:#6b5bd6;
  background:#efedfb; border:1px solid #e0dcf7; padding:4px 8px; border-radius:6px}
.embed-body{padding:20px}
.embed-lab{font-size:12.5px; font-weight:600; color:#5a6072; margin:0 0 9px; display:block}
.embed-sel{width:100%; background:#f7f8fb; border:1px solid #e2e5ee; color:#16183a; font-family:var(--ui);
  font-size:14.5px; padding:12px 13px; border-radius:11px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a90a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:40px; margin-bottom:14px}
.embed-sel:focus{outline:0; border-color:var(--violet); box-shadow:0 0 0 3px rgba(114,108,255,.16)}
.embed-segl{display:flex; gap:6px; background:#f1f2f7; padding:4px; border-radius:11px; margin-bottom:4px}
.embed-segl button{flex:1; border:0; background:transparent; color:#6a7088; font-weight:600; font-size:13px;
  padding:9px 6px; border-radius:8px; transition:.15s}
.embed-segl button.on{background:#fff; color:#16183a; box-shadow:0 2px 6px -2px rgba(20,30,60,.25)}
.embed-result{padding:22px 20px; background:linear-gradient(180deg,#0c0b32,#0a0930); color:#fff; text-align:center}
.embed-result .erk{font-size:12.5px; color:#aeb0d6; font-weight:500}
.embed-result .ern{font-family:var(--mono); font-weight:700; color:var(--green); font-size:46px;
  line-height:1; letter-spacing:-.03em; margin:8px 0 4px; text-shadow:0 0 36px rgba(167,235,82,.4)}
.embed-result .erc{font-size:13px; color:#d9d9f2}
.embed-result .erbik{display:inline-block; font-family:var(--mono); font-size:11px; color:var(--green);
  background:rgba(167,235,82,.14); border:1px solid rgba(167,235,82,.3); padding:3px 9px; border-radius:6px; margin-top:12px}
.embed-cta{display:block; width:100%; text-align:center; background:var(--green); color:var(--green-ink);
  font-weight:700; font-size:14.5px; padding:13px; border:0; border-radius:11px; margin-top:16px; text-decoration:none}
.embed-cta:hover{filter:brightness(1.04)}
.embed-foot{padding:12px 20px; display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:#9aa0b4; border-top:1px solid #eef0f6; background:#fafbfd}
.embed-foot .pw{display:flex; align-items:center; gap:7px; font-weight:600; color:#6a7088}
.embed-caveat{font-size:10.5px; line-height:1.45; color:#a2a8ba; padding:0 20px 16px; background:#fafbfd}

/* misc */
.note{font-size:12px; color:var(--faint); line-height:1.5; margin-top:14px}
.divider{height:1px; background:var(--line-soft); margin:22px 0}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(10,28,3,.3); border-top-color:var(--green-ink); animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
[hidden]{display:none!important}
/* transform-only: a paused/0%-frame animation must never hide content */
.fade-in{animation:fi .4s ease}
@keyframes fi{from{transform:translateY(8px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){ .fade-in{animation:none} }