/* PadLaunch's own site: the builder, the order page and the operator panel. The brand: volt lime (#DFFA3E) on brand
   black (#090A09, the mascot's own background, so his picture sits on the page without an edge) with warm off-white
   text (#F2F0EA); the saucer mark, the wordmark and the helmet mascot live in /brand/. Bricolage Grotesque for display
   and Inter for everything else (both OFL, served by the launcher from the engine's fonts). */
@font-face { font-family: 'PM Display'; src: url('/fonts/BricolageGrotesque-Bold.woff') format('woff'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'PM Sans'; src: url('/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'PM Mono'; src: url('/fonts/GeistMono-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PM Fredoka'; src: url('/fonts/Fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'PM Lilita'; src: url('/fonts/LilitaOne.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root {
  --bg: #090a09; --s1: #111211; --s2: #181a18; --s3: #212320; --line: #272a26; --line-2: #363a34; --text: #f2f0ea; --text-2: #cdcac2; --muted: #9a978e; --dim: #66645d;
  --ok: #34d399; --bad: #fb7185; --warn: #fbbf24;
  --lime: #dffa3e; --lime-hi: #ecff6e; --lime-ink: #0b0c08;
  --g1: var(--lime); --brand: var(--lime);
  --sans: 'PM Sans', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --display: 'PM Display', 'Bricolage Grotesque', var(--sans); --mono: 'PM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 14px; --r-lg: 22px; --gutter: 24px; color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--g1); outline-offset: 2px; }
.pm-wrap { width: min(1220px, 100% - 2 * var(--gutter)); margin: 0 auto; }
.pm-skip { position: absolute; left: -999px; top: 8px; padding: 8px 12px; background: var(--text); color: var(--bg); border-radius: 8px; z-index: 10; }
.pm-skip:focus { left: 8px; }

/* ---- Header and footer ---- */
.pm-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.pm-header .pm-wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.pm-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 22px/1 var(--display); letter-spacing: -.5px; }
.pm-brand img { display: block; width: auto; height: 28px; }
.pm-footer .pm-brand img { height: 22px; }
.pm-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pm-nav a { padding: 8px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-weight: 550; font-size: 14px; }
.pm-nav a:hover { background: var(--s2); color: var(--text); }
.pm-footer { border-top: 1px solid var(--line); margin-top: 80px; padding: 28px 0 40px; color: var(--muted); font-size: 13px; }
.pm-footer .pm-wrap { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.pm-footer a { color: var(--text-2); text-decoration: none; }
.pm-footer a:hover { color: var(--text); }
.pm-footer .pm-brand { font-size: 18px; margin-right: auto; }
@media (max-width: 700px) { .pm-nav a:not(.pm-cta-link) { display: none; } }

/* ---- Buttons and fields ---- */
.pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--s2); color: var(--text); font-weight: 650; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.pm-btn:hover:not(:disabled) { background: var(--s3); border-color: #464651; }
.pm-btn:active:not(:disabled) { transform: translateY(1px); }
.pm-btn:disabled { opacity: .45; cursor: not-allowed; }
.pm-btn.pm-primary { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.pm-btn.pm-primary:hover:not(:disabled) { background: var(--lime-hi); border-color: var(--lime-hi); }
.pm-btn.pm-big { min-height: 54px; padding: 0 28px; font-size: 16.5px; border-radius: 14px; }
.pm-btn.pm-ghost { background: transparent; }
.pm-btn.pm-small { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 10px; }
.pm-btn.pm-danger { color: var(--bad); }
.pm-field { display: grid; gap: 6px; margin: 0 0 16px; }
.pm-field > span:first-child, .pm-label { font-weight: 650; font-size: 14px; }
.pm-hint { color: var(--muted); font-size: 13px; margin: 0; }
.pm-input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--s1); outline: none; transition: border-color .15s, box-shadow .15s; }
.pm-input:focus { border-color: var(--g1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g1) 30%, transparent); }
.pm-input::placeholder { color: var(--dim); }
.pm-affix { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 12px; background: var(--s1); overflow: hidden; }
.pm-affix:focus-within { border-color: var(--g1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g1) 30%, transparent); }
.pm-affix .pm-input { border: 0; border-radius: 0; box-shadow: none; min-width: 0; }
.pm-affix span { display: inline-flex; align-items: center; padding: 0 14px; color: var(--muted); background: var(--s2); white-space: nowrap; font-size: 14px; }
.pm-status { font-size: 13px; min-height: 1.2em; margin: 0; }
.pm-status.is-ok { color: var(--ok); } .pm-status.is-bad { color: var(--bad); }
.pm-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.pm-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--g1); flex: 0 0 auto; }

/* ---- Landing ---- */
.pm-hero { padding: 72px 0 36px; }
.pm-hero .pm-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.pm-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--s1); color: var(--text-2); font-size: 12.5px; font-weight: 650; letter-spacing: .04em; }
.pm-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.pm-hero h1 { margin: 18px 0 16px; font: 800 clamp(40px, 6vw, 70px)/1.0 var(--display); letter-spacing: -2px; }
.pm-gradient { color: var(--lime); }
.pm-hero p.pm-lede { margin: 0 0 26px; font-size: 18.5px; color: var(--text-2); max-width: 560px; }
.pm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pm-hero-note { color: var(--muted); font-size: 13.5px; }
/* The brand banner: black on the left, the lime panel with the mascot bleeding off the right edge. The picture carries
   its own diagonal and black corner (the page's black), and the box behind it is the panel's lime, so it joins the page
   on the left and runs to the edge on the right at any width. */
.pm-hero { position: relative; overflow: hidden; }
.pm-hero .pm-wrap { display: block; }
.pm-hero-text { position: relative; z-index: 1; max-width: min(640px, 100%); }
.pm-hero-art { position: absolute; top: 0; bottom: 0; right: 0; width: 46vw; background: #e9fa3d; overflow: hidden; }
.pm-hero-art img { display: block; height: 100%; width: auto; max-width: none; }
@media (min-width: 1001px) { .pm-hero-text { max-width: min(640px, calc(54vw - (100vw - min(1220px, 100vw - 2 * var(--gutter))) / 2 - 28px)); } .pm-hero { min-height: 560px; display: flex; align-items: center; } .pm-hero > .pm-wrap { width: min(1220px, 100% - 2 * var(--gutter)); } }
/* Narrower screens: the banner sits under the words, full width, its lime edge on the right edge of the screen. */
@media (max-width: 1000px) { .pm-hero { padding-bottom: 0; } .pm-hero-art { position: relative; width: auto; height: clamp(260px, 83vw, 440px); margin-top: 34px; background: var(--bg); } .pm-hero-art img { margin-left: auto; } }
/* Three launchpads made here, side by side (a swipeable row on phones). */
.pm-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 26px 0 0; }
.pm-showcase figure { margin: 0; display: grid; gap: 10px; }
.pm-showcase figcaption { color: var(--muted); font-size: 13px; }
.pm-showcase figcaption b { color: var(--text); font-weight: 650; }
@media (max-width: 900px) { .pm-showcase { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 380px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } .pm-showcase figure { scroll-snap-align: start; } }
.pm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; counter-reset: step; }
.pm-steps li { padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--s1); }
.pm-steps li::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: var(--s3); font-weight: 750; }
.pm-steps strong { display: block; font-size: 16px; margin-bottom: 4px; }
.pm-steps p { margin: 0; color: var(--muted); font-size: 14px; }
.pm-section { padding: 56px 0 0; }
.pm-section > .pm-wrap > h2, .pm-h2 { margin: 0 0 8px; font: 750 34px/1.1 var(--display); letter-spacing: -1px; }
.pm-section > .pm-wrap > p.pm-lede { margin: 0 0 24px; color: var(--muted); font-size: 16px; }
@media (max-width: 900px) { .pm-steps { grid-template-columns: 1fr; } .pm-hero { padding-top: 40px; } }

/* ---- The builder ---- */
.pm-builder { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; align-items: start; }
.pm-panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--s1); }
.pm-stepper { display: flex; gap: 6px; padding: 16px 18px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pm-stepper button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer; }
.pm-stepper button b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--s3); font-size: 12px; }
.pm-stepper button[aria-current="step"] { background: var(--s2); color: var(--text); }
.pm-stepper button[aria-current="step"] b { background: var(--lime); color: var(--lime-ink); }
.pm-stepper button.is-done b { background: var(--ok); color: #04130c; }
.pm-step { padding: 24px 24px 8px; }
.pm-step[hidden] { display: none; }
.pm-step h3 { margin: 0 0 4px; font: 700 22px/1.2 var(--display); }
.pm-step > p.pm-hint { margin: 0 0 20px; }
.pm-step-actions { display: flex; justify-content: space-between; gap: 12px; padding: 16px 24px 24px; }
.pm-choices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin: 0 0 18px; }
.pm-choice { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--s2); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.pm-choice:hover { border-color: #4a4a55; }
.pm-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pm-choice:has(input:checked) { border-color: var(--lime); background: var(--s3); box-shadow: 0 0 0 1px var(--lime) inset; }
.pm-choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.pm-choice:has(input:focus-visible) { outline: 2px solid var(--g1); outline-offset: 2px; }
.pm-choice strong { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pm-choice strong img { width: 20px; height: 20px; border-radius: 50%; }
.pm-choice small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.pm-choice .pm-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pm-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line-2); color: var(--text-2); font-size: 11px; font-weight: 650; }
.pm-tick { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.pm-choice:has(input:checked) .pm-tick { background: var(--lime); border-color: var(--lime); box-shadow: inset 0 0 0 4px var(--s3); }
.pm-layout-art { height: 92px; border-radius: 10px; border: 1px solid var(--line); background: var(--s1); padding: 8px; display: grid; gap: 5px; }
.pm-layout-art i { display: block; border-radius: 3px; background: var(--s3); }
.pm-layout-art.is-terminal { grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 12px 1fr 1fr; }
.pm-layout-art.is-terminal i:first-child { grid-column: 1 / -1; }
.pm-layout-art.is-rack { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 14px 34px 1fr; }
.pm-layout-art.is-rack i { border-radius: 9px; }
.pm-layout-art.is-rack i:first-child { grid-column: 1 / -1; border-radius: 999px; }
.pm-layout-art.is-rack i:nth-child(2) { background: linear-gradient(135deg, var(--lime), #8be04e); }
.pm-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.pm-swatch { position: relative; display: grid; justify-items: center; gap: 6px; width: 74px; cursor: pointer; font-size: 12px; color: var(--text-2); }
.pm-swatch input { position: absolute; opacity: 0; }
.pm-swatch i { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--s1); box-shadow: 0 0 0 1px var(--line-2); }
.pm-swatch:has(input:checked) i { box-shadow: 0 0 0 2px var(--lime); }
.pm-swatch:has(input:focus-visible) i { outline: 2px solid var(--g1); outline-offset: 3px; }
.pm-segment { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line-2); margin: 0 0 18px; }
.pm-segment label { position: relative; padding: 8px 16px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); }
.pm-segment input { position: absolute; opacity: 0; }
.pm-segment label:has(input:checked) { background: var(--lime); color: var(--lime-ink); }
.pm-logo { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 16px; border: 1px dashed var(--line-2); background: var(--s2); margin: 0 0 18px; }
.pm-logo img { width: 72px; height: 72px; border-radius: 18px; background: var(--s3); object-fit: cover; flex: 0 0 auto; }
.pm-logo.is-drag { border-color: var(--g1); }
.pm-logo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pm-modes { display: grid; gap: 8px; margin: 0 0 18px; }
.pm-mode { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--s2); cursor: pointer; }
.pm-mode:has(input:checked) { border-color: var(--line-2); background: var(--s3); }
.pm-mode:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.pm-mode input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--g1); }
.pm-mode strong { font-size: 14.5px; }
.pm-mode small { display: block; color: var(--muted); font-size: 13px; }
.pm-mode .pm-tags { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.pm-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--s2); margin: 0 0 18px; }
.pm-switch[hidden], [data-starts-wrap][hidden] { display: none; }
/* Starts per venue (Raydium, Meteora): $20K and/or $4K. */
.pm-label-hint { margin: -2px 0 10px; }
.pm-starts { display: grid; gap: 10px; margin: 0 0 18px; }
.pm-start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--s2); }
.pm-start-row > strong { display: inline-flex; align-items: center; gap: 8px; min-width: 110px; font-size: 14.5px; }
.pm-start-row > strong img { width: 20px; height: 20px; border-radius: 50%; }
.pm-start-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-start { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--s1); cursor: pointer; }
.pm-start:has(input:checked) { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime) inset; }
.pm-start input { width: 16px; height: 16px; margin: 0; accent-color: var(--lime); flex: 0 0 auto; }
.pm-start span { display: grid; line-height: 1.25; }
.pm-start b { font-size: 13.5px; }
.pm-start small { color: var(--muted); font-size: 11.5px; }
.pm-switch input { width: 44px; height: 24px; accent-color: var(--g1); }
.pm-summary { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.pm-summary li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.pm-summary li span:first-child { color: var(--muted); }
.pm-summary li span:last-child { text-align: right; }
.pm-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; border-radius: 14px; background: var(--s2); border: 1px solid var(--line-2); margin: 0 0 16px; }
.pm-total strong { font: 750 28px/1 var(--display); }
.pm-error { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--bad) 12%, var(--s1)); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); color: #ffd3da; font-size: 14px; margin: 0 24px 0; }
.pm-error[hidden] { display: none; }
.pm-side { position: sticky; top: 84px; display: grid; gap: 14px; }
.pm-side-title { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.pm-price-card { padding: 16px 18px; }
.pm-price-card p { margin: 0; color: var(--text-2); font-size: 14px; }
.pm-price-card strong { font-size: 20px; }
@media (max-width: 1060px) { .pm-builder { grid-template-columns: minmax(0, 1fr); } .pm-side { position: static; order: -1; min-width: 0; } }

/* ---- The live preview: a launchpad in miniature (colours come from the preset as custom properties) ---- */
.pv { --pv-bg: #000; --pv-s1: #0b0b0c; --pv-s2: #121214; --pv-line: #1f1f23; --pv-text: #f4f4f5; --pv-muted: #9a9aa3; --pv-acc: #8b5cff; --pv-end: #b388ff; --pv-ink: #121214; --pv-r: 6px; --pv-font: var(--sans); --pv-display: var(--display);
  border-radius: 16px; border: 1px solid var(--line-2); background: var(--pv-bg); color: var(--pv-text); overflow: hidden; font-family: var(--pv-font); font-size: 12px; box-shadow: 0 30px 70px -40px #000; }
.pv.is-rack { --pv-r: 14px; --pv-font: 'PM Fredoka', 'Fredoka', ui-rounded, var(--sans); --pv-display: 'PM Lilita', 'Lilita One', var(--pv-font); }
.pv-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--pv-line); background: var(--pv-bg); }
.pv-top img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.pv.is-rack .pv-top img { border-radius: 50%; }
.pv-mark { display: inline-grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--pv-acc), var(--pv-end)); color: var(--pv-ink); font: 800 12px/1 var(--pv-display); }
.pv.is-rack .pv-mark { border-radius: 50%; }
.pv-name { font: 750 14px/1 var(--pv-display); letter-spacing: -.2px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv.is-rack .pv-name { font-weight: 400; letter-spacing: .3px; font-size: 15px; }
.pv-nav { display: flex; gap: 4px; margin-left: 6px; }
.pv-nav span { padding: 4px 7px; border-radius: var(--pv-r); color: var(--pv-muted); font-size: 10.5px; white-space: nowrap; }
/* A narrow preview (phones, the hero's tilted cards) keeps one row: the name shortens and Docs steps out first. */
.pv { container-type: inline-size; }
@container (max-width: 380px) { .pv-nav span:nth-child(3) { display: none; } .pv-name { max-width: 96px; } }
@container (max-width: 300px) { .pv-nav span:nth-child(2) { display: none; } }
.pv-nav span:first-child { background: var(--pv-s2); color: var(--pv-text); }
.pv-launch { margin-left: auto; padding: 5px 10px; border-radius: var(--pv-r); background: var(--pv-acc); color: var(--pv-ink); font-weight: 700; font-size: 10.5px; white-space: nowrap; }
.pv-body { padding: 12px; display: grid; gap: 10px; }
.pv-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.pv-tile { border-radius: var(--pv-r); border: 1px solid var(--pv-line); background: var(--pv-s1); padding: 10px; min-height: 64px; display: flex; flex-direction: column; justify-content: space-between; }
.pv-tile.is-hero { background: linear-gradient(135deg, var(--pv-acc), var(--pv-end)); color: var(--pv-ink); border-color: transparent; }
.pv-tile small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; font-weight: 700; }
.pv-tile b { font: 400 16px/1.05 var(--pv-display); }
.pv:not(.is-rack) .pv-tile b { font-weight: 750; letter-spacing: -.3px; }
.pv-venues { display: flex; gap: 4px; flex-wrap: wrap; }
.pv-venues span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 999px; background: var(--pv-s2); font-size: 9.5px; color: var(--pv-text); }
.pv-venues img { width: 11px; height: 11px; border-radius: 50%; }
.pv-tabs { display: flex; gap: 10px; border-bottom: 1px solid var(--pv-line); padding-bottom: 6px; font-size: 10.5px; color: var(--pv-muted); }
.pv-tabs span:first-child { color: var(--pv-text); box-shadow: 0 7px 0 -5px var(--pv-acc); }
.pv-coins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pv-coin { border-radius: var(--pv-r); border: 1px solid var(--pv-line); background: var(--pv-s1); padding: 8px; display: grid; gap: 5px; }
.pv-coin i { display: block; width: 26px; height: 26px; border-radius: 50%; }
.pv-coin b { font-size: 11px; }
.pv-coin span { color: var(--pv-muted); font-size: 9.5px; }
.pv-bar { height: 4px; border-radius: 4px; background: var(--pv-s2); overflow: hidden; }
.pv-bar u { display: block; height: 100%; background: var(--pv-acc); }
.pv-foot { display: flex; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--pv-line); color: var(--pv-muted); font-size: 9.5px; }
.pv-foot b { color: var(--pv-text); }
.pv.is-rack .pv-dock { display: flex; justify-content: space-around; margin: 0 10px 10px; padding: 7px; border-radius: 14px; border: 1px solid var(--pv-line); background: var(--pv-s1); color: var(--pv-muted); font-size: 9px; }
.pv-dock { display: none; }
.pv-dock span:first-child { color: var(--pv-acc); }

/* ---- Pricing, FAQ ---- */
.pm-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pm-price { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--s1); }
.pm-price h3 { margin: 0 0 6px; font-size: 15px; color: var(--text-2); font-weight: 650; }
.pm-price strong { display: block; font: 800 38px/1.05 var(--display); letter-spacing: -1px; margin-bottom: 8px; color: var(--lime); }
.pm-price p { margin: 0; color: var(--muted); font-size: 14px; }
.pm-faq { display: grid; gap: 10px; }
.pm-faq details { border: 1px solid var(--line); border-radius: 16px; background: var(--s1); padding: 0 18px; }
.pm-faq summary { cursor: pointer; padding: 16px 0; font-weight: 650; list-style: none; }
.pm-faq summary::-webkit-details-marker { display: none; }
.pm-faq summary::after { content: '+'; float: right; color: var(--muted); }
.pm-faq details[open] summary::after { content: '–'; }
.pm-faq p { margin: 0 0 16px; color: var(--text-2); }
@media (max-width: 900px) { .pm-prices { grid-template-columns: 1fr; } }

/* ---- Order page ---- */
.pm-order { max-width: 760px; margin: 40px auto 0; }
.pm-order-card { padding: 26px; }
.pm-order h1 { margin: 0 0 6px; font: 800 36px/1.08 var(--display); letter-spacing: -1px; }
.pm-order .pm-lede { margin: 0 0 22px; color: var(--text-2); font-size: 16px; }
.pm-pay { display: grid; gap: 12px; margin: 0 0 20px; }
.pm-wallets { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-progress { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.pm-progress li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.pm-progress li i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); flex: 0 0 auto; display: grid; place-items: center; font-style: normal; font-size: 12px; }
.pm-progress li.is-done { color: var(--text); } .pm-progress li.is-done i { background: var(--ok); border-color: var(--ok); color: #04130c; }
.pm-progress li.is-now { color: var(--text); } .pm-progress li.is-now i { border-color: var(--lime); border-top-color: transparent; animation: pm-spin .9s linear infinite; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pm-progress li.is-now i { animation: none; } html { scroll-behavior: auto; } }
.pm-next { margin: 0 0 22px; padding-left: 22px; display: grid; gap: 10px; color: var(--text-2); }
.pm-next strong { color: var(--text); }
.pm-live-link { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--lime) 8%, var(--s2)); border: 1px solid color-mix(in srgb, var(--lime) 55%, transparent); margin: 0 0 22px; text-decoration: none; }
.pm-live-link:hover { border-color: var(--lime); }
.pm-live-link b { color: var(--lime); }
.pm-live-link b { font-size: 17px; display: block; }
.pm-live-link span { color: var(--muted); font-size: 14px; word-break: break-all; }
.pm-mono { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.pm-nowrap { white-space: nowrap; word-break: normal; }
/* The sticky header (64px) never covers the step bar or a section heading after a jump. */
#builder, .pm-section { scroll-margin-top: 80px; }
.pm-note { padding: 12px 14px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line); color: var(--text-2); font-size: 14px; margin: 0 0 16px; }

/* ---- Operator ---- */
.pm-op { margin-top: 32px; }
.pm-op h1 { font: 800 32px/1.1 var(--display); margin: 0 0 18px; }
.pm-op > .pm-h2 { margin-top: 36px; }
.pm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0 0 24px; }
.pm-stat { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--s1); }
.pm-stat span { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 4px; }
.pm-stat strong { font: 750 22px/1.1 var(--display); }
.pm-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; margin: 0 0 28px; }
.pm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pm-table th, .pm-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.pm-table th { color: var(--muted); font-weight: 600; font-size: 12px; background: var(--s1); }
.pm-table tr:last-child td { border-bottom: 0; }
.pm-table td .pm-btn { margin: 0 4px 4px 0; }
.pm-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--s3); font-size: 12px; font-weight: 650; }
.pm-pill.is-ok { background: color-mix(in srgb, var(--ok) 20%, var(--s2)); color: #b8f5da; }
.pm-pill.is-bad { background: color-mix(in srgb, var(--bad) 20%, var(--s2)); color: #ffd3da; }
.pm-pill.is-warn { background: color-mix(in srgb, var(--warn) 20%, var(--s2)); color: #ffe7ad; }
.pm-log { max-height: 60vh; overflow: auto; padding: 14px; border-radius: 12px; background: #000; border: 1px solid var(--line); font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
dialog.pm-dialog { width: min(960px, 100% - 32px); border: 1px solid var(--line-2); border-radius: 18px; background: var(--s1); color: var(--text); padding: 20px; }
dialog.pm-dialog::backdrop { background: #000a; }
.pm-login { max-width: 420px; margin: 80px auto 0; padding: 26px; }

/* ---- Legal pages ---- */
.pm-doc { max-width: 780px; margin: 40px auto 0; }
.pm-doc h1 { font: 800 38px/1.1 var(--display); margin: 0 0 8px; letter-spacing: -1px; }
.pm-doc h2 { font: 700 21px/1.25 var(--display); margin: 28px 0 8px; }
.pm-doc p, .pm-doc li { color: var(--text-2); }
@media (max-width: 640px) { :root { --gutter: 16px; } .pm-step, .pm-step-actions { padding-left: 16px; padding-right: 16px; } .pm-order-card { padding: 18px; } .pm-error { margin: 0 16px; } }