/* Shared design tokens and compact Vault presentation. */
:root{font-family:Inter,sans-serif}body{font-family:Inter,sans-serif}
.experience-hero{padding-block:54px 42px;background:#020617}
.experience-hero .container{width:min(1400px,calc(100% - 64px))}
.experience-hero-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:38px;align-items:center}
.experience-hero h1{font-size:clamp(38px,4.3vw,62px);font-weight:900;line-height:1.06;letter-spacing:-.045em;margin:0 0 26px;max-width:650px}
.experience-hero .ramp-hero-lead{font-size:17px;line-height:1.85;color:#cbd5e1;margin-bottom:26px}
.experience-hero .ramp-profile-links{margin:22px 0 0}
.experience-demo{--dv-bg:#020617;--dv-panel:#0f172a;--dv-border:#334155;--dv-soft:#cbd5e1;--dv-muted:#a8b7cc;margin:0;min-width:0;color:#f8fafc;font-family:Inter,sans-serif}
.experience-demo>figcaption{font-size:12px;line-height:1.6;color:#cbd5e1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0 0 12px}
.experience-demo>figcaption>span{font-size:10px;color:#a8b7cc}
.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid #334155;border-bottom:0;border-radius:16px 16px 0 0;background:#0f172a;min-height:66px}
.demo-controls>div:first-child{min-width:0;display:grid;gap:4px}.demo-controls strong{font-size:12px;line-height:1.4;font-weight:700}.demo-controls [data-demo-count]{font-size:10px;letter-spacing:.1em;color:#a5b4fc}
.demo-control-buttons{display:flex;gap:4px;flex-shrink:0}.demo-control-buttons button{min-height:36px;min-width:34px;border:1px solid #475569;background:#020617;border-radius:8px;color:#f8fafc;padding:6px;font:700 11px Inter,sans-serif;cursor:pointer}.demo-control-buttons [data-demo-toggle]{min-width:68px}
.experience-demo button:focus-visible{outline:3px solid #67e8f9;outline-offset:3px}.experience-demo button:hover{filter:brightness(1.2)}
.demo-screen{background:#020617;border-inline:1px solid #334155;overflow:hidden}
.demo-app-header{display:flex;align-items:center;gap:8px;border-bottom:1px solid #334155;padding:13px 16px;font-size:14px;font-weight:900;letter-spacing:-.025em}
.demo-app-header img{object-fit:contain}.demo-app-context{margin-left:auto;color:#a8b7cc;font-size:11px;font-weight:700;letter-spacing:0}
.demo-stage{position:relative;min-height:635px;isolation:isolate}.demo-scene{padding:14px;animation:demo-appear .65s ease both}.demo-scene[hidden]{display:none!important}.experience-demo[data-playing=false] .demo-scene,.experience-demo[data-playing=false] .demo-target{animation-play-state:paused}
@keyframes demo-appear{from{opacity:.15;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.demo-vault{display:grid;gap:10px}.vault-summary{display:flex;justify-content:space-between;gap:10px;border:1px solid #22d3ee33;background:#020617;padding:12px;border-radius:12px}.vault-section-title{display:flex;align-items:center;gap:5px;color:#67e8f9;margin-bottom:6px}.vault-section-title h3{font-size:10px;font-weight:900;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;margin:0;color:#f8fafc}.vault-summary>div>span{display:block;color:#cbd5e1;font-size:11px;font-weight:600}.vault-total{display:block;font-size:24px;font-weight:900;line-height:1.3;color:#f8fafc;margin-top:2px;letter-spacing:-.03em}.vault-summary .vault-wpu{margin-top:8px;font-size:10px;letter-spacing:.08em}.vault-wpu b{display:block;font-size:14px;color:#34d399;letter-spacing:0;margin-top:3px}.vault-summary-tools{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;gap:5px;max-width:130px}.vault-summary-tools>span{display:grid!important;place-items:center;padding:6px;border:1px solid #334155;border-radius:8px;height:32px;min-width:32px;background:#0f172a}.vault-summary-tools small{width:100%;text-align:right;font-size:10px;color:#a8b7cc;margin-top:6px}
.vault-networks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.vault-network{padding:8px;border:1px solid #334155;border-radius:12px;background:#020617b3;min-width:0}.vault-network>h3{font-size:10px;font-weight:900;letter-spacing:.08em;margin:0 0 8px;line-height:1.4}.vault-network>h3>span{color:#a8b7cc}
.vault-row{display:grid;grid-template-columns:minmax(40px,.8fr) minmax(60px,1.2fr) auto auto;align-items:center;gap:6px;padding:8px 6px;border:1px solid #334155;border-radius:8px;background:#0f172a99;margin-top:6px;min-width:0}.vault-row>div{min-width:0}.vault-row strong{display:block;font-size:11px;font-weight:900;line-height:1.3;letter-spacing:-.02em}.vault-row span{display:block;font-size:10px;font-weight:600;color:#cbd5e1;line-height:1.5}.vault-row .vault-amount{text-align:right}.vault-amount>strong{color:#34d399}.vault-amount>span{font-size:9px}.vault-row>div:first-child>span{font-size:9px}.vault-receive,.vault-send{display:flex;align-items:center;justify-content:center;gap:3px;padding:5px;border:1px solid #6ee7b740;background:#10b9811a;border-radius:8px;color:#34d399;min-width:28px;min-height:32px;cursor:pointer}.vault-send{border-color:#bfdbfe99;background:#3b82f640;color:#f8fafc;min-height:28px}.vault-row button>span{font-size:8px;font-weight:900;text-transform:uppercase;color:inherit;letter-spacing:.02em}.vault-row button>svg{width:13px;height:13px;flex-shrink:0}
.vault-network .vault-row button>span{display:none}.vault-network .vault-row button{width:28px}.vault-network .vault-row button>svg{width:14px;height:14px}
.vault-ramps{margin-top:8px;padding:10px;border:1px solid #8b5cf64d;border-radius:8px;background:#8b5cf610;display:grid;gap:10px}.vault-ramps>div{display:flex;gap:6px;align-items:center}.vault-ramps strong{font-size:9px;font-weight:900;letter-spacing:.06em}.vault-ramps .demo-primary{font-size:10px;min-height:34px;padding:8px 6px;margin:0;width:100%}
.demo-target{animation:demo-target 2s ease-in-out infinite}@keyframes demo-target{50%{box-shadow:0 0 0 3px #67e8f944;border-color:#67e8f9}}
.demo-accounts{display:grid;gap:2px}.demo-accounts .vault-section-title{margin:2px 0 2px}.vault-account{grid-template-columns:minmax(75px,1fr) minmax(90px,1.4fr) auto auto}.vault-account .vault-amount strong{font-size:10px;color:#cbd5e1}.vault-account .vault-receive{min-width:72px}.vault-account .vault-send{min-width:66px}
.experience-demo p.demo-settlement{font-size:10px;line-height:1.6;color:#a8b7cc;margin:8px 0 0}.demo-vault-caption{border-top:1px solid #334155;margin:12px 4px 0;padding-top:18px}.demo-vault-caption>strong{font-size:13px}.demo-vault-caption>p{font-size:12px;line-height:1.7;color:#a8b7cc;margin:8px 0}
.demo-panel{border:1px solid #334155;background:#0f172a;border-radius:12px;padding:20px;max-width:460px;margin:6px auto;color:#f8fafc}.demo-panel>h3{font-size:22px;font-weight:900;letter-spacing:-.035em;line-height:1.2;margin:8px 0 20px}.demo-panel p.demo-kicker{font-size:10px;color:#a5b4fc;text-transform:uppercase;letter-spacing:.09em;font-weight:800;margin:0}.demo-detail{display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:1.6;padding:10px 0;border-bottom:1px solid #334155}.demo-detail>span{color:#a8b7cc}.demo-detail>strong{max-width:65%;text-align:right;font-weight:700}.demo-primary{display:flex;justify-content:center;align-items:center;background:#7c3aed;border:1px solid #a78bfa66;border-radius:8px;padding:12px 16px;font:800 12px Inter,sans-serif;color:white;min-height:44px;cursor:pointer;margin-top:16px;width:100%}.demo-note{color:#a8b7cc!important;font-size:11px!important;line-height:1.7!important;margin:14px 0 0!important}.demo-currency{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900;color:#67e8f9;border:1px solid #22d3ee33;background:#22d3ee0c;padding:12px;border-radius:8px}.demo-currency>span{font-size:12px;color:#cbd5e1;font-weight:600}.demo-steps{display:grid;gap:20px}.demo-steps>div{display:flex;gap:12px;font-size:12px;line-height:1.7;color:#a8b7cc}.demo-steps>div>b{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:8px;background:#8b5cf626;color:#c4b5fd}.demo-steps strong{display:block;color:#f8fafc;margin-bottom:4px;font-weight:700}.demo-tabs{display:flex;border:1px solid #334155;border-radius:8px;padding:4px;gap:4px;margin-bottom:12px}.demo-tabs button{flex:1;border:0;background:transparent;color:#cbd5e1;padding:10px 5px;border-radius:6px;font:700 12px Inter,sans-serif;cursor:pointer}.demo-tabs .is-selected{background:#7c3aed;color:#fff}.demo-tokens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-block:10px}.demo-tokens>span{border:1px solid #475569;border-radius:8px;padding:9px 7px;display:grid;gap:4px;font-size:12px}.demo-tokens small{font-size:9px;color:#cbd5e1;line-height:1.4}.demo-tokens .is-selected{border-color:#22d3ee;background:#22d3ee0f}.demo-panel .demo-field-label{font-size:11px;margin:16px 0 0;color:#cbd5e1}.demo-result{display:grid;gap:5px;background:#10b9810d;border:1px solid #34d39940;border-radius:8px;padding:14px;margin-top:16px}.demo-result>span{font-size:11px;color:#cbd5e1}.demo-result>strong{font-size:26px;letter-spacing:-.04em;font-weight:900;color:#34d399}
.demo-track{height:3px;background:#334155;overflow:hidden;border-radius:0 0 12px 12px}.demo-track>span{display:block;height:100%;background:#67e8f9;transform:scaleX(0);transform-origin:left}.experience-demo .demo-footnote{font-size:10px;line-height:1.6;margin:8px 0 0;color:#a8b7cc}
.service-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.service-category{background:#0f172a;border:1px solid #334155;border-radius:16px;padding:28px}.service-category h3{font-size:26px;font-weight:900;margin:10px 0 16px;letter-spacing:-.035em}.service-category p{font-size:15px;line-height:1.8}.service-category details{font-size:13px;margin-top:18px}.service-category summary{cursor:pointer;color:#67e8f9;padding-block:10px}.service-category details p{font-size:13px}.service-example{border-left:2px solid #8b5cf6;padding-left:16px;margin-top:20px;color:#cbd5e1}.service-number{color:#a5b4fc;font-size:12px;font-weight:800;letter-spacing:.1em}
.intake-categories>p{font-size:13px;color:#a8b7cc;margin-top:-12px}.intake-categories>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.intake-categories label{display:flex;align-items:center;gap:10px;border:1px solid #475569;border-radius:8px;padding:14px;font-size:13px;cursor:pointer}.intake-categories input{width:18px;height:18px;accent-color:#8b5cf6;flex-shrink:0}.intake-categories input:focus-visible{outline:3px solid #67e8f9;outline-offset:3px}
@media(min-width:1251px){.experience-hero .container{max-width:1400px}.vault-network .vault-row button>span{display:block}.vault-network .vault-row button{width:auto;min-width:54px}}
@media(max-width:1100px){.experience-hero-grid{grid-template-columns:1fr;gap:36px}.experience-hero-copy{max-width:780px}.experience-hero h1{font-size:56px;max-width:780px}.experience-demo{width:100%;max-width:780px;margin:auto}.vault-network .vault-row button>span{display:block}.vault-network .vault-row button{width:auto;min-width:54px}}
@media(max-width:640px){.experience-hero .container{width:calc(100% - 40px)}.experience-hero{padding-block:36px}.experience-hero h1{font-size:clamp(34px,9vw,48px);line-height:1.08}.experience-hero .ramp-hero-lead{font-size:16px}.experience-hero-grid{gap:30px}.demo-controls{padding:10px}.demo-controls strong{font-size:11px}.demo-controls [data-demo-count]{font-size:9px}.demo-stage{min-height:865px}.demo-scene{padding:10px}.vault-networks{grid-template-columns:1fr}.vault-row{grid-template-columns:minmax(62px,.9fr) minmax(73px,1.1fr) auto auto}.vault-network .vault-row button>span{display:block;font-size:8px}.vault-network .vault-row button{min-width:55px;padding:4px;gap:3px}.vault-account{grid-template-columns:minmax(60px,.9fr) minmax(76px,1.1fr) auto auto}.vault-account .vault-receive,.vault-account .vault-send{min-width:55px;padding:4px;gap:2px}.vault-account .vault-amount strong{font-size:9px}.vault-row button>svg{width:11px;height:11px}.vault-ramps{grid-template-columns:1fr 1.5fr;align-items:center}.vault-ramps .demo-primary{font-size:10px}.vault-total{font-size:23px}.demo-panel{padding:16px;margin:8px 0}.demo-panel>h3{font-size:23px}.demo-detail{font-size:12px;padding:13px 0}.demo-note{font-size:12px!important}.demo-result>strong{font-size:28px}.demo-tokens small{font-size:10px}.demo-steps>div{font-size:13px}.demo-steps{gap:26px}.demo-controls .demo-control-buttons{gap:3px}.demo-control-buttons button{min-width:28px}.demo-control-buttons [data-demo-toggle]{min-width:62px}.service-categories{grid-template-columns:1fr}.service-category{padding:24px}.intake-categories>div{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.demo-scene,.demo-target{animation:none!important}}
@media print{.demo-controls,.demo-track{display:none}.demo-scene{animation:none!important}}
.demo-account-prelude{position:absolute;inset:14px;transition:opacity .5s}.demo-account-result{opacity:0;visibility:hidden;transition:opacity .5s}.is-revealed .demo-account-prelude{opacity:0;visibility:hidden;pointer-events:none}.is-revealed .demo-account-result{opacity:1;visibility:visible}.demo-pick-receive .vault-account:first-of-type .vault-receive,.demo-pick-send .vault-account:first-of-type .vault-send{box-shadow:0 0 0 3px #67e8f955;border-color:#67e8f9}.demo-return{animation:demo-appear .65s ease both}
@media(prefers-reduced-motion:reduce){.demo-account-prelude{display:none}.demo-account-result{opacity:1;visibility:visible;transition:none}}
.vault-total{white-space:nowrap}.vault-total small{font-size:13px;font-weight:700}.demo-scene{position:absolute;top:0;left:0;right:0}.demo-stage.is-measuring .demo-scene{animation:none!important}.demo-controls{position:sticky;top:82px;z-index:3}
@media(max-width:360px){.vault-row,.vault-account{grid-template-columns:minmax(38px,.85fr) minmax(54px,1.15fr) auto auto;gap:4px}.vault-network .vault-row button,.vault-account .vault-receive,.vault-account .vault-send{min-width:44px;width:44px;padding:4px 2px}.vault-row button>svg{display:none}.vault-row button>span,.vault-network .vault-row button>span{font-size:8px}.vault-network .vault-amount strong{font-size:10px}.vault-ramps{grid-template-columns:1fr}.vault-ramps .demo-primary{min-height:36px}}

/* Mobile player: a stable viewport budget, with unscaled touch controls. */
@media (max-width:640px) {
  .experience-demo {
    height:65vh;
    height:65svh;
    display:grid;
    grid-template-rows:auto var(--demo-controls-height,54px) minmax(0,1fr) 3px auto;
    scroll-margin-block:12px;
  }
  .experience-demo>figcaption { font-size:10px;line-height:1.2;gap:2px 8px;margin-bottom:4px; }
  .experience-demo>figcaption>span { font-size:9px; }
  .experience-demo .demo-footnote { font-size:9px;line-height:1.2;margin-top:4px; }
  .experience-demo .demo-controls { position:static;min-height:0;padding:4px;gap:6px; }
  .experience-demo .demo-controls>div:first-child { display:block;font-size:10px;line-height:12px; }
  .experience-demo .demo-controls strong { display:inline;font-size:10px;line-height:12px; }
  .experience-demo .demo-controls [data-demo-count] { display:inline-block;margin-right:4px;font-size:9px;line-height:11px; }
  .experience-demo .demo-control-buttons { gap:4px; }
  .experience-demo .demo-control-buttons button { min-width:44px;min-height:44px;padding:6px; }
  .experience-demo .demo-control-buttons [data-demo-toggle] { min-width:64px; }
  .experience-demo .demo-screen { position:relative;min-height:0;overflow:clip; }
  .experience-demo .demo-canvas {
    position:absolute;width:400px;left:var(--demo-left,0px);top:var(--demo-top,0px);
    font-size:12px;line-height:1.2;
    transform:scale(var(--demo-scale,.65));transform-origin:top left;
  }
  .experience-demo .demo-app-header { padding:3px 8px;font-size:14px;gap:6px; }
  .experience-demo .demo-app-header img { width:20px;height:20px; }
  .experience-demo .demo-stage { min-height:0; }
  .experience-demo .demo-scene { padding:6px; }
  .experience-demo .demo-account-prelude { inset:6px; }
  .experience-demo .demo-vault { gap:6px; }
  .experience-demo .vault-summary { padding:4px 6px; }
  .experience-demo .vault-section-title { margin-bottom:2px; }
  .experience-demo .vault-summary>div:first-child { display:grid;grid-template-columns:auto auto;column-gap:20px; }
  .experience-demo .vault-summary .vault-section-title { grid-column:1 / -1; }
  .experience-demo .vault-total { grid-row:3;font-size:20px;line-height:1.1;margin-top:0; }
  .experience-demo .vault-summary .vault-wpu { grid-column:2;grid-row:2 / 4;margin:0;align-self:center; }
  .experience-demo .vault-wpu b { margin-top:0; }
  .experience-demo .vault-summary-tools { gap:4px; }
  .experience-demo .vault-summary-tools>span { min-width:26px;height:26px;padding:3px; }
  .experience-demo .vault-summary-tools small { margin-top:0; }
  .experience-demo .vault-networks { grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }
  .experience-demo .vault-network { padding:4px; }
  .experience-demo .vault-network>h3 { margin-bottom:2px;line-height:1.2; }
  .experience-demo .vault-row { grid-template-columns:minmax(55px,.9fr) minmax(64px,1.1fr) auto auto;gap:2px;padding:2px;margin-top:2px; }
  .experience-demo .vault-row strong { font-size:10px;line-height:1.1; }
  .experience-demo .vault-row span { line-height:1.1; }
  .experience-demo .vault-row>div:first-child>span { font-size:8px; }
  .experience-demo .vault-network .vault-row button { min-width:20px;width:20px;min-height:20px;padding:2px; }
  .experience-demo .vault-network .vault-row button>span { display:none; }
  .experience-demo .vault-row button>svg { display:block;width:12px;height:12px; }
  .experience-demo .vault-ramps { grid-template-columns:1fr;gap:3px;margin-top:4px;padding:3px; }
  .experience-demo .vault-ramps>div { gap:4px; }
  .experience-demo .vault-ramps img { width:16px;height:16px; }
  .experience-demo .vault-ramps .demo-primary { min-height:24px;font-size:11px;padding:3px;margin:0; }
  .experience-demo .vault-account { grid-template-columns:minmax(75px,1fr) minmax(90px,1.4fr) auto auto; }
  .experience-demo .vault-account .vault-receive,.experience-demo .vault-account .vault-send { min-width:56px;width:auto;min-height:20px;padding:2px;gap:2px; }
  .experience-demo .vault-account .vault-amount strong { font-size:10px; }
  .experience-demo .vault-account button>span { font-size:8px; }
  .experience-demo p.demo-settlement { margin-top:2px;font-size:10px;line-height:1.2; }
  .experience-demo .demo-vault-caption { padding-top:6px;margin:4px 2px 0; }
  .experience-demo .demo-vault-caption>strong { font-size:12px; }
  .experience-demo .demo-vault-caption>p { font-size:11px;line-height:1.5;margin:4px 0; }
  .experience-demo .demo-panel { padding:8px;margin:0; }
  .experience-demo .demo-panel>h3 { font-size:20px;margin:3px 0 6px; }
  .experience-demo .demo-detail { font-size:12px;padding:3px 0;gap:8px;line-height:1.2; }
  .experience-demo .demo-primary { min-height:28px;padding:5px 8px;margin-top:6px; }
  .experience-demo .demo-note { font-size:11px!important;line-height:1.25!important;margin-top:6px!important; }
  .experience-demo .demo-currency { padding:6px 8px; }
  .experience-demo .demo-steps { gap:10px; }
  .experience-demo .demo-steps>div { font-size:12px;line-height:1.5;gap:8px; }
  .experience-demo .demo-steps strong { margin-bottom:2px; }
  .experience-demo .demo-tabs { margin-bottom:4px;padding:2px; }
  .experience-demo .demo-tabs button { padding:4px; }
  .experience-demo .demo-tokens { margin-block:4px; }
  .experience-demo .demo-tokens>span { padding:3px 5px;gap:0; }
  .experience-demo .demo-tokens small { font-size:10px; }
  .experience-demo .demo-panel .demo-field-label { margin-top:8px; }
  .experience-demo .demo-result { padding:5px 8px;margin-top:6px;gap:1px; }
  .experience-demo .demo-result>strong { font-size:24px;line-height:1.1; }
}