/* ═══════════════════════════════════════════════════════════════════════════
   LAUNCH PAGE — surface layer + deploy sequence

   LAYERED over 1edge-launch.html, not a rewrite. Every existing id and class
   keeps working; this only restyles and adds the deploy overlay + launched
   popup. Same approach as the token page surface system.

   Tokens are the canonical ones from 1edge-community.html :root — the launch
   page was the last surface still on flat pure-grey with no card recipe.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --lx-card-grad:linear-gradient(168deg,#131318,#0b0b0e 64%);
  --lx-card-grad-h:linear-gradient(168deg,#15151b,#0c0c10 64%);
  --lx-border:rgba(255,255,255,.07);
  --lx-border-soft:rgba(255,255,255,.045);
  --lx-lift:0 12px 30px -12px rgba(0,0,0,.72),0 3px 8px -2px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  --lx-lift-h:0 26px 54px -16px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.09);
  --lx-r:13px; --lx-ri:8px;
  --lx-t1:#f0f0f0; --lx-t2:#a0a0a0; --lx-t3:#555;
}

/* ── sections become cards ───────────────────────────────────────────────── */
#screen1 .section,#screen2 .section{
  background:var(--lx-card-grad);
  border:1px solid var(--lx-border);
  border-radius:var(--lx-r);
  box-shadow:var(--lx-lift);
  padding:15px 16px 16px;
  margin-bottom:12px;
}
#screen1 .section-label,#screen2 .section-label{
  border-bottom:0 !important;
  padding-bottom:0 !important;
  margin-bottom:12px !important;
}
/* Orange was decorating "MEDIA." purely for rhythm against green on
   "IDENTITY." — but orange means EdgeTek on the very next screen. One channel,
   one meaning: section headings are neutral. */
#screen1 .section-label span[style*="--orange"]{color:var(--lx-t3) !important}

/* inputs sit on the card, not on the page */
#screen1 input[type=text],#screen1 input[type=url],#screen1 textarea,
#screen2 input[type=text],#screen2 input[type=number]{
  background:#08080a !important;
  border:1px solid var(--lx-border) !important;
  border-radius:var(--lx-ri) !important;
}
#screen1 input:focus,#screen1 textarea:focus,#screen2 input:focus{
  border-color:rgba(74,222,74,.45) !important;
}

/* ── deploy overlay ──────────────────────────────────────────────────────── */
#lxDeploy{
  position:fixed;inset:0;z-index:2000050;background:rgba(0,0,0,.86);
  backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:22px;
}
#lxDeploy.on{display:flex}
.lx-dbox{width:100%;max-width:400px;text-align:center}
.lx-stage{position:relative;width:150px;height:150px;margin:0 auto 22px}
/* ── the mark, and the head that paints it ────────────────────────────────
   Nine blocks, not twenty-five, matching the menu icon. Nothing flies in and
   nothing scales: one lit head runs the rim clockwise and each block it passes
   stops being a coloured square and becomes its slice of the token art.

   The reveal used to happen all at once, after the deploy, during the handover
   to the popup. Doing it under the head instead means the thing you watch while
   you wait IS the token arriving, and it buys the property that matters more:
   a stalled stage no longer freezes the mark. The head keeps circling; it
   simply stops leaving paint. A hung confirmation and a broken page used to
   look identical, and now they do not. */
.lx-g5{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.lx-g5 b{display:block;border-radius:2px;position:relative;overflow:hidden;
  background:var(--bg);opacity:.18;
  transition:opacity .45s ease-out,background-color .34s ease-out}
.lx-g5 b.painted{opacity:1}
/* Once a block carries the art its own colour has to go, or a token PNG with
   any transparency in it shows green or orange through the image. It crosses
   to the neutral the icon layer sits on, over the same 340ms the slice takes
   to arrive, so the two read as one change.
   Only when there IS art: with no icon uploaded the mark fills as itself and
   the block keeps its colour. */
.lx-g5[data-art="1"] b.painted{background:#16161c}
.lx-mark.lx-dissolve .lx-g5[data-art="1"] b{background:#16161c}
/* The head is an opacity and nothing else. It was briefly a
   brightness(1.75) saturate(1.08) so that it would still read while crossing
   blocks it had already painted — but a filter applies to the whole block
   INCLUDING its slice of the art, so what it actually did was sweep a bright
   saturated band across the finished token, over and over. The head does not
   cross painted blocks at all now, which is what D4 specifies, so it has
   nothing left to read against and needs no filter.

   The 450ms fall against a 250ms beat is what leaves a two-block tail. */
.lx-g5 b.head{opacity:1}
.lx-dt{font-family:var(--display),sans-serif;font-size:17px;font-weight:400;letter-spacing:.04em;
  text-transform:uppercase;color:var(--lx-t1)}
.lx-ds{font-family:var(--mono),monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lx-t3);margin-top:7px}
.lx-steps{max-width:290px;margin:18px auto 0;text-align:left;display:flex;flex-direction:column;gap:7px}
.lx-steps div{display:flex;gap:9px;font-family:var(--mono),monospace;font-size:10.5px;color:#3a3a3a}
.lx-steps div.ok{color:var(--lx-t2)}
.lx-steps div.ok b{color:#4ade4a;font-weight:400}
.lx-steps div.now{color:var(--lx-t1)}

/* the mark flying from the deploy stage into the popup's icon slot */
.lx-flier{position:fixed;z-index:2000060;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
  pointer-events:none;transition:transform .62s cubic-bezier(.5,0,.15,1),opacity .18s ease .5s}
.lx-flier b{display:block;border-radius:2px}

/* ── launched popup ──────────────────────────────────────────────────────── */
/* Full screen, the whole way through. The deploy overlay owns the screen, so
   handing over to a dialog floating on a scrim breaks the moment — the
   confirmation is the same surface, still full bleed. */
.success-screen{
  position:fixed !important;inset:0;z-index:2000040;background:#000;
  display:none;flex-direction:column;align-items:center;justify-content:center;padding:0;
  transition:transform .34s cubic-bezier(.5,0,.2,1),opacity .3s ease;
}
.success-screen.active{display:flex !important}
.success-screen.lx-dismissing{transform:translateY(100%);opacity:0}

.lx-pop{
  width:100%;max-width:430px;max-height:100vh;overflow-y:auto;
  background:none;border:0;border-radius:0;box-shadow:none;
  padding:0 20px;text-align:left;
  animation:lxPop .34s cubic-bezier(.16,.9,.3,1);
}
@keyframes lxPop{from{opacity:0}to{opacity:1}}

/* pull-down affordance + hint */
.lx-grab{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:38px;height:4px;
  border-radius:2px;background:rgba(255,255,255,.16)}
.lx-dismiss{position:absolute;bottom:22px;left:0;right:0;text-align:center;
  font-family:var(--mono),monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lx-t3);cursor:pointer;user-select:none}
.lx-dismiss b{display:block;font-size:13px;color:var(--lx-t2);margin-bottom:3px;font-weight:400}

.lx-pop-hd{padding:18px 18px 0;text-align:center}
.lx-pop-bd{padding:14px 18px 18px}

/* NO ring around the token image — it was a 3px green border before */
.lx-mark{width:66px;height:66px;margin:0 auto 12px;position:relative}
.lx-mark .lx-g5{gap:3px}
.lx-mark .lx-ic{position:absolute;inset:0;border-radius:14px;overflow:hidden;opacity:0;
  display:flex;align-items:center;justify-content:center;background:#16161c}
.lx-mark .lx-ic img{width:100%;height:100%;object-fit:cover;display:block}
/* ── the blocks ARE the token ────────────────────────────────────────────
   Nothing is revealed and nothing is swapped in. Each block carries its own
   slice of the art on ::after, and --pa is how much of it is showing. The head
   sets it to 1 on the block it is leaving; the gaps then close and the nine
   pieces are one image.

   This rule is no longer scoped to .lx-mark. It has to apply in the deploy
   overlay too, because that is where the painting now happens — the grid that
   fills is the same node that is later moved into the popup, so scoping the
   slices to their destination meant they could not be shown at their origin.

   --pa rather than an animation: the head paints one block at a time from JS,
   and a custom property can be set per element without a class per block or a
   keyframe fighting an inline style. */
.lx-g5 b::after{
  content:'';position:absolute;inset:0;opacity:var(--pa,0);
  background-image:var(--art,none);background-size:300% 300%;background-position:var(--bp);
  transition:opacity .34s ease-out;
}
.lx-mark .lx-g5 b{transition:border-radius .4s,opacity .45s ease-out}
/* The catch-up: anything the head never got to — reduced motion, a resumed
   launch, no stage matched — lands here, staggered on the diagonal. */
.lx-mark.lx-dissolve .lx-g5 b{--pa:1;opacity:1}
.lx-mark.lx-dissolve .lx-g5 b::after{transition-delay:var(--wd,0ms)}
/* pieces close up — the art is assembled, still a hard square */
.lx-mark.lx-sealed .lx-g5{gap:0}
.lx-mark.lx-sealed .lx-g5 b{border-radius:0}
/* The journey down is size ONLY. Animating the corner radius at the same time
   made the box look like it was changing shape rather than simply getting
   smaller — the radius is applied after it has landed, as a settle. */
.lx-mark .lx-g5{transition:gap .46s cubic-bezier(.65,0,.2,1)}
.lx-mark.lx-landed .lx-g5{border-radius:14px;overflow:hidden;transition:border-radius .22s ease}
/* the standalone icon layer is only a fallback when no art was uploaded */
.lx-mark.lx-sealed .lx-ic{opacity:0}
.lx-mark.lx-sealed .lx-g5[data-art=""] ~ .lx-ic{animation:lxIcon .4s ease-out forwards}
@keyframes lxIcon{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
#successIconFallback{font-size:30px;color:var(--lx-t3)}

.lx-t{font-family:var(--display),sans-serif;font-size:20px;font-weight:400;letter-spacing:.02em;
  text-transform:uppercase;color:#4ade4a}
.lx-s{font-family:var(--mono),monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--lx-t3);margin-top:5px}
#successModeIcon{display:none;align-items:center;justify-content:center;gap:7px;margin-top:9px}
/* sized here rather than inline, so the seated rule below can resize it
   without an !important fight */
#successModeIcon img{width:20px;height:20px}

.lx-bond{margin-bottom:13px}
.lx-bond .bh{display:flex;justify-content:space-between;font-family:var(--mono),monospace;font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lx-t3);margin-bottom:5px}
.lx-bond .bt{height:6px;background:#16191e;border-radius:3px;overflow:hidden}
.lx-bond .bt i{display:block;height:100%;background:linear-gradient(90deg,#4ade4a,#8ef08e);width:3%}
.lx-bond .bf{font-family:var(--mono),monospace;font-size:9.5px;color:var(--lx-t3);margin-top:6px;text-align:center}

/* share — EdgeSocial leads, using the real 5x5 mark asset */
.lx-share .lx-edge{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:linear-gradient(180deg,#5be25b,#3bc83b);color:#04140a;
  font-family:var(--display),sans-serif;font-size:11.5px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;padding:11px;border-radius:var(--lx-ri);cursor:pointer;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 #1e7a1e,0 8px 16px rgba(74,222,74,.22)}
.lx-share .lx-edge img{height:16px;width:auto;display:block}
.lx-share .lx-rest{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:7px}
.lx-share .lx-rest button{display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--lx-border);border-radius:var(--lx-ri);padding:9px 6px;background:#0d0d11;
  font-family:var(--mono),monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--lx-t2);cursor:pointer;transition:border-color .13s,color .13s}
.lx-share .lx-rest button:hover{border-color:rgba(255,255,255,.2);color:var(--lx-t1)}

.lx-ca{display:flex;align-items:center;gap:8px;background:#08080a;border:1px solid var(--lx-border);
  border-radius:var(--lx-ri);padding:9px 10px;margin-top:12px}
.lx-ca #successAddr{flex:1;font-family:var(--mono),monospace;font-size:10.5px;color:var(--lx-t2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.lx-ca button{font-family:var(--mono),monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#4ade4a;border:1px solid rgba(74,222,74,.35);border-radius:5px;padding:5px 8px;background:none;cursor:pointer}

.lx-disc{margin-top:11px;border-top:1px solid var(--lx-border-soft);padding-top:10px}
.lx-disc summary{list-style:none;cursor:pointer;font-family:var(--mono),monospace;font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--lx-t3);display:flex;align-items:center;gap:6px}
.lx-disc summary::-webkit-details-marker{display:none}
.lx-disc summary::after{content:'▾';margin-left:auto}
.lx-disc[open] summary::after{content:'▴'}
#successFees{display:block !important;margin:10px 0 0 !important;background:none !important;border:0 !important;padding:0 !important}

.lx-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
/* flex not grid: Save Names is hidden unless the routing-names POST failed, and
   a 2-col grid left "Launch Another" stranded at half width on every normal run */
.lx-actions .lx-pair{display:flex;gap:8px}
.lx-actions .lx-pair button{flex:1}
.lx-actions > button{width:100%}

/* the old .success-addr carried its own pill background and centring — inside
   the CA row it needs to be plain text so the row reads as one control */
.lx-ca .success-addr{
  background:none !important;border:0 !important;padding:0 !important;
  text-align:left !important;letter-spacing:0 !important;
}

@media (prefers-reduced-motion:reduce){
  .lx-g5 b,.lx-mark.landed .lx-ic,.lx-pop,.lx-flier{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRUCTURE — stepper, panes, docked preview, and the finer details inside
   the cards (mode options, Tek fee grid, toggles, dev buy, review table).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 4-step indicator ────────────────────────────────────────────────────── */
.steps.lx-steps4{display:flex;align-items:center;gap:0;margin:18px 0 20px}
.lx-step{display:flex;align-items:center;gap:8px;flex-shrink:0;cursor:pointer}
.lx-sn{width:23px;height:23px;border-radius:7px;border:1px solid var(--lx-border);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono),monospace;
  font-size:10px;color:var(--lx-t3);transition:border-color .15s,color .15s,background .15s}
.lx-sl{font-family:var(--mono),monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lx-t3)}
.lx-step.done .lx-sn{border-color:rgba(74,222,74,.5);color:#4ade4a}
.lx-step.on .lx-sn{background:#4ade4a;border-color:#4ade4a;color:#04140a;font-weight:700}
.lx-step.on .lx-sl{color:var(--lx-t1)}
.lx-sbar{flex:1;height:1px;background:var(--lx-border);margin:0 10px;min-width:10px}
@media (max-width:760px){ .lx-sl{display:none} .lx-sbar{margin:0 6px} }

/* ── panes ───────────────────────────────────────────────────────────────── */
.lx-pane{display:none}
.lx-pane.on{display:block;animation:lxPane .26s ease}
@keyframes lxPane{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lx-nav{display:flex;gap:9px;margin-top:14px}
.lx-nav .lx-next{flex:1;background:linear-gradient(180deg,#5be25b,#3bc83b);color:#04140a;border:0;
  font-family:var(--display),sans-serif;font-size:12px;font-weight:400;letter-spacing:.07em;
  text-transform:uppercase;padding:13px;border-radius:var(--lx-ri);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 #1e7a1e,0 8px 16px rgba(74,222,74,.2)}
.lx-nav .lx-back{padding:13px 20px;border:1px solid var(--lx-border);background:#0d0d11;
  border-radius:var(--lx-ri);font-family:var(--mono),monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lx-t2);cursor:pointer}
.lx-nav .lx-back:hover{border-color:rgba(255,255,255,.2);color:var(--lx-t1)}

/* ── desktop: content column + fixed dock rail ───────────────────────────
   The dock is appended to .page, not inside a screen, so a grid column on
   #screen2 would never reach it. Fixing it to the right and reserving the
   space on .page works regardless of where it sits in the DOM — and avoids
   overriding .screen{display:none}, which is what made both screens render
   at once when this was a grid. */
@media (min-width:1000px){
  /* .page is max-width:740px centred. Widen the band to 1092 and keep the
     content itself at 740 on the left, so the dock can sit on the band's right
     edge without squeezing the form — padding-right crushed it to ~390px. */
  .page{max-width:1092px}
  /* constrain the form column only — #successScreen is a fixed full-viewport
     overlay and a max-width here clamped it to 740px, which is why the
     launched popup sat left of centre instead of in the middle of the screen */
  .page > *:not(#successScreen):not(#lxDock){max-width:740px}
  #lxDock{position:fixed;top:78px;width:290px;right:max(24px,calc((100vw - 1092px) / 2))}
}

/* the dock lives outside the screens, so pull it into whichever is active */
#lxDock{background:var(--lx-card-grad);border:1px solid var(--lx-border);border-radius:var(--lx-r);
  box-shadow:var(--lx-lift);overflow:hidden}
#lxDock.tek{border-color:rgba(255,107,0,.28)}
.lx-dock-strip{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer}
.lx-dico{width:34px;height:34px;border-radius:9px;background:#16161c;border:1px solid rgba(74,222,74,.35);
  display:flex;align-items:center;justify-content:center;font-family:var(--display),sans-serif;
  font-size:11px;font-weight:400;color:var(--lx-t3);flex-shrink:0;overflow:hidden}
#lxDock.tek .lx-dico{border-color:rgba(255,107,0,.4)}
.lx-dico img{width:100%;height:100%;object-fit:cover;display:block}
.lx-dtxt{flex:1;min-width:0}
.lx-dn{font-family:var(--display),sans-serif;font-size:12.5px;font-weight:400;color:var(--lx-t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-ds2{font-family:var(--mono),monospace;font-size:9px;color:var(--lx-t3);margin-top:1px}
.lx-dcost{text-align:right;flex-shrink:0}
.lx-dcost b{display:block;font-family:var(--mono),monospace;font-size:13px;font-weight:800;color:#4ade4a}
#lxDock.tek .lx-dcost b{color:var(--orange)}
.lx-dcost span{font-family:var(--mono),monospace;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lx-t3)}
.lx-dchev{display:none;color:var(--lx-t3);font-size:10px;transition:transform .2s}
.lx-dock-body{padding:0 12px 12px}
.lx-dbond .lx-dbh{display:flex;justify-content:space-between;font-family:var(--mono),monospace;font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lx-t3);margin-bottom:5px}
.lx-dbt{height:5px;background:#16191e;border-radius:3px;overflow:hidden}
.lx-dbt i{display:block;height:100%;width:3%;background:linear-gradient(90deg,#4ade4a,#8ef08e)}
.lx-dbf{font-family:var(--mono),monospace;font-size:8.5px;color:var(--lx-t3);margin-top:6px}
.lx-dghost{font-family:var(--mono),monospace;font-size:8.5px;color:#2a2a2a;text-align:center;margin-top:9px}

/* mobile: pinned to the bottom, collapsed, tap to expand */
@media (max-width:999px){
  /* sticky under the nav, not pinned to the floor — see seatDock() */
  #lxDock{position:sticky;z-index:900;margin:0 0 12px;border-radius:var(--lx-r);
    box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
  .lx-dchev{display:block}
  #lxDock .lx-dock-body{display:none}
  #lxDock.open .lx-dock-body{display:block}
  #lxDock.open .lx-dchev{transform:rotate(180deg)}
}

/* ── mode options — the decision that is permanent ───────────────────────── */
#screen2 .mode-option{
  background:var(--lx-card-grad) !important;border:1px solid var(--lx-border) !important;
  border-radius:var(--lx-r) !important;box-shadow:var(--lx-lift);padding:14px 15px !important;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
#screen2 .mode-option:hover{background:var(--lx-card-grad-h) !important;box-shadow:var(--lx-lift-h)}
#screen2 .mode-option.selected-standard{border-color:rgba(74,222,74,.5) !important;box-shadow:var(--lx-lift-h)}
#screen2 .mode-option.selected-tek{border-color:rgba(255,107,0,.5) !important;box-shadow:var(--lx-lift-h)}
#screen2 .mode-feature{font-family:var(--mono),monospace;font-size:10px;color:var(--lx-t2);line-height:1.75}

/* ── Tek fee grid — keep the slider-as-toggle, restate the surfaces ──────── */
#screen2 .tek-cell{
  background:#08080a !important;border-radius:var(--lx-ri) !important;
  box-shadow:none !important;border-color:var(--lx-border) !important;padding:12px 13px 13px !important;
}
#screen2 .tek-cell:not(.tek-off){border-color:rgba(255,255,255,.13) !important}
#screen2 .tek-budget-bar{height:7px;border-radius:4px;background:#16191e}
#screen2 .tek-sub{font-size:10px;color:var(--lx-t3)}

/* ── toggles + dev buy + review ──────────────────────────────────────────── */
#screen2 .toggle-row,#screen2 .setting-row{
  background:#08080a;border:1px solid var(--lx-border);border-radius:var(--lx-ri);
  padding:11px 12px;margin-bottom:8px;
}
#screen2 .summary-row,#screen2 .review-row{border-bottom:1px solid var(--lx-border-soft) !important}
#screen2 .summary-row:last-child,#screen2 .review-row:last-child{border-bottom:0 !important}

/* deployment cost strip reads as the commitment it is */
#screen2 .cost-bar,#screen2 .total-cost{
  background:var(--lx-card-grad) !important;border:1px solid rgba(74,222,74,.28) !important;
  border-radius:var(--lx-r) !important;box-shadow:var(--lx-lift);
}

/* The wallet wait needs no special treatment any more. It used to breathe the
   filled rows, because a mark that had stopped moving during the longest wait
   in the flow looked broken — the head solves that for every stage at once by
   never stopping. The stage simply releases nothing, and the light keeps going. */
.lx-hint{max-width:300px;margin:14px auto 0;font-family:var(--body),sans-serif;font-size:11px;
  line-height:1.6;color:var(--lx-t3);text-align:center}

/* ── mode info: comparable fact strips, not paragraphs ───────────────────── */
.lx-modeinfo .lx-mi-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:11px}
@media (max-width:620px){.lx-modeinfo .lx-mi-facts{grid-template-columns:1fr;gap:7px}}
.lx-mi-f{background:#08080a;border:1px solid var(--lx-border);border-radius:var(--lx-ri);padding:9px 10px}
.lx-mi-f b{display:block;font-family:var(--mono),monospace;font-size:14px;font-weight:800;color:#4ade4a;letter-spacing:.02em}
.lx-modeinfo.tek .lx-mi-f b{color:var(--orange)}
.lx-mi-f span{display:block;font-family:var(--mono),monospace;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lx-t3);margin-top:3px;line-height:1.4}
.lx-modeinfo p{font-family:var(--body),sans-serif;font-size:12.5px;color:var(--lx-t2);line-height:1.65;max-width:60ch}

/* ── launched: the token card builds around the icon ─────────────────────── */
/* overflow MUST stay visible until the card has formed. The mark grows to
   150px inside this element while it is still 66px wide, so clipping here
   cropped a square down to a 66x150 strip for the whole of the reveal — the
   box was never changing shape, it was being cut. */
.lx-tokcard{
  background:transparent;border:1px solid transparent;border-radius:var(--lx-r);
  box-shadow:none;padding:0;max-width:66px;margin:0 auto;overflow:visible;
  transition:max-width .44s cubic-bezier(.16,.9,.3,1),padding .44s cubic-bezier(.16,.9,.3,1),
             background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
/* oversized child overflows evenly rather than to one side */
.lx-tokcard .lx-tc-row{justify-content:center}
.lx-tokcard.formed{overflow:hidden}
.lx-tokcard.formed .lx-tc-row{justify-content:flex-start}
.lx-tokcard.formed{
  background:var(--lx-card-grad);border-color:var(--lx-border);
  box-shadow:var(--lx-lift);padding:12px;max-width:100%;
}
.lx-tc-row{display:flex;align-items:center;gap:11px}
.lx-tokcard .lx-mark{margin:0;flex-shrink:0}
.lx-tc-txt{flex:1;min-width:0;text-align:left;opacity:0;transform:translateX(-8px);
  transition:opacity .34s ease .16s,transform .34s ease .16s}
.lx-tokcard.formed .lx-tc-txt{opacity:1;transform:none}
.lx-tc-n{font-family:var(--display),sans-serif;font-size:15px;font-weight:400;color:var(--lx-t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.lx-tc-s{font-family:var(--mono),monospace;font-size:9.5px;color:var(--lx-t3);margin-top:2px}
.lx-tc-bar{height:4px;background:#16191e;border-radius:2px;margin-top:11px;overflow:hidden;
  opacity:0;transition:opacity .3s ease .26s}
.lx-tc-bar i{display:block;height:100%;width:3%;background:linear-gradient(90deg,#4ade4a,#8ef08e)}
.lx-tc-meta{display:flex;justify-content:space-between;font-family:var(--mono),monospace;font-size:9px;
  color:var(--lx-t3);margin-top:6px;opacity:0;transition:opacity .3s ease .3s}
.lx-tokcard.formed .lx-tc-bar,.lx-tokcard.formed .lx-tc-meta{opacity:1}
.lx-tokcard #successModeIcon{margin-top:0 !important;flex-shrink:0}

/* ── the mode mark lands on the token ─────────────────────────────────────
   It used to sit in the row beside the name for the whole reveal and simply
   stay there, which left two objects on screen with nothing to say to each
   other. Now it behaves the way the grid does: one object the whole way. It
   parks off the token's right while the box is still assembling, is thrown
   into the socket at the bottom-right corner, and becomes the bubble — the
   same bubble the homepage cards wear.

   Same numbers as .card-mode (index.html:815), not an approximation of them:
   16px, bottom/right -4, #0b0b0e ground, double ring. That fits because the
   homepage avatar is 62px and this mark settles at 66 — near enough the same
   object that the bubble needs no rescaling to read as the same bubble.

   Reparented into .lx-mark by launch-fx.js, which is what makes left:100%
   track the mark through its own 66→150→66 and lets the seated bubble ride
   the token as the card builds leftward around it.                          */
.lx-mark #successModeIcon{
  position:absolute;left:100%;top:50%;margin:0 0 0 16px;z-index:3;
  width:20px;height:20px;border-radius:50%;
  transform:translate(0,-10px);transform-origin:top left;
  background:transparent;box-shadow:none;
  transition:background .16s ease,box-shadow .16s ease;
}
.lx-mark #successModeIcon .lxm-ic{width:100%;height:100%;display:block}
/* The word rides beside the box instead of inside it, so the box can be
   exactly the bubble it is about to become. */
.lx-mark #successModeIcon .lxm-cap{position:absolute;left:calc(100% + 7px);top:50%;
  transform:translateY(-50%);white-space:nowrap;transition:opacity .18s ease}
.lx-mark #successModeIcon.lxm-quiet .lxm-cap{opacity:0}

/* Thrown, not dropped: out and up first, over the top, then down into the
   corner past the socket by 3px and back. The mark is still shrinking under
   it while this runs, so the anchor slides inward and bends the path further. */
.lx-mark #successModeIcon.lxm-fly{animation:lxmFly .42s cubic-bezier(.3,.05,.2,1) forwards}
@keyframes lxmFly{
  0%   {transform:translate(0,-10px);   width:20px;height:20px}
  52%  {transform:translate(3px,-30px); width:18px;height:18px}
  88%  {transform:translate(-31px,24px);width:16px;height:16px}
  100% {transform:translate(-28px,21px);width:16px;height:16px}
}
/* the resting place, also the whole animation for anyone who skips it */
.lx-mark #successModeIcon.lxm-landed{transform:translate(-28px,21px);width:16px;height:16px}
.lx-mark #successModeIcon.lxm-seated{
  background:#0b0b0e;box-shadow:0 0 0 1.5px #0b0b0e,0 0 0 2.5px rgba(255,255,255,.08);
}
.lx-mark #successModeIcon.lxm-seated .lxm-cap{display:none}

@media (prefers-reduced-motion:reduce){
  .lx-mark #successModeIcon{animation:none !important;
    transform:translate(-28px,21px) !important;width:16px !important;height:16px !important;
    background:#0b0b0e;box-shadow:0 0 0 1.5px #0b0b0e,0 0 0 2.5px rgba(255,255,255,.08)}
  .lx-mark #successModeIcon .lxm-cap{display:none}
}

/* LAUNCHED lands after the card has built */
.lx-t{opacity:0;transform:translateY(6px);transition:opacity .32s ease,transform .32s ease}
.lx-pop-hd.said .lx-t{opacity:1;transform:none}
.lx-pop-bd{opacity:0;transition:opacity .34s ease}
.lx-pop-hd.said ~ .lx-pop-bd{opacity:1}

/* the dock would be a second copy of the same card — hide it while launched */
body.lx-launched #lxDock{display:none !important}

@media (prefers-reduced-motion:reduce){
  .lx-tokcard,.lx-tc-txt,.lx-tc-bar,.lx-tc-meta,.lx-t,.lx-pop-bd{transition:none !important}
  .lx-t,.lx-pop-bd,.lx-tc-txt,.lx-tc-bar,.lx-tc-meta{opacity:1 !important;transform:none !important}
  .lx-tokcard{max-width:100% !important;padding:12px !important;background:var(--lx-card-grad);border-color:var(--lx-border)}
}
.lx-grad{font-family:var(--mono),monospace;font-size:9.5px;letter-spacing:.06em;color:var(--lx-t3);
  text-align:center;margin-bottom:13px;line-height:1.6}
.lx-t{margin-top:14px}

/* ═══════════════════════════════════════════════════════════════════════════
   REFINEMENT PASS — typography, nested boxes, and the help affordance
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── type: match user-profile, which puts labels/names/tickers on the mono
      and reserved the display face for a single display name. It on every field label,
      tab and button was doing the opposite. ─────────────────────────────── */
#screen1 label,#screen2 label,
.section-label,.toggle-card-title,.slider-title,.devbuy-tab,
.summary-head,.deploy-cost-label,.tek-name,.s-card-title,.mode-name,
.lx-tc-n,.lx-nav .lx-next,.lx-nav .lx-back,
.lx-share .lx-edge,.popbtn,.lx-actions .btn,.lx-actions .btn-ghost{
  font-family:var(--mono) !important;
}
#screen1 label,#screen2 label{letter-spacing:.1em;font-weight:400;color:var(--lx-t3)}
.lx-tc-n{letter-spacing:.02em;font-weight:700}
.lx-t{font-family:var(--mono) !important;letter-spacing:.14em}
/* the page title keeps the display face — one display face, one job */

/* ── no boxes inside boxes ───────────────────────────────────────────────
   The sections are cards now, so a bordered .s-card nested inside one is a
   second frame around the same content — which nothing else on the site
   does. The inner panels keep their tint and lose their outline. */
/* The section IS the card. An .s-card inside one was a second frame around
   the same content, which is the nested-box look — it keeps its role as a
   grouping element but stops drawing itself. */
#screen1 .s-card,#screen2 .s-card{
  background:none !important;border:0 !important;
  box-shadow:none !important;padding:0 !important;margin-bottom:0 !important;
}

/* ── mode select: the surface IS the control ─────────────────────────────── */
#screen2 .mode-option{
  padding:16px 17px !important;
  background:#08080a !important;
  border:1px solid var(--lx-border) !important;
  box-shadow:none !important;
  border-radius:var(--lx-r) !important;
}
#screen2 .mode-option:hover{background:#0c0c11 !important;border-color:rgba(255,255,255,.16) !important}
#screen2 .mode-option.selected-standard{
  background:linear-gradient(168deg,rgba(74,222,74,.07),rgba(74,222,74,.02) 64%) !important;
  border-color:rgba(74,222,74,.55) !important;
}
#screen2 .mode-option.selected-tek{
  background:linear-gradient(168deg,rgba(255,107,0,.07),rgba(255,107,0,.02) 64%) !important;
  border-color:rgba(255,107,0,.55) !important;
}
#screen2 .mode-name{font-size:13px;letter-spacing:.08em}
#screen2 .mode-feature{font-size:10.5px;line-height:1.85;color:var(--lx-t2)}

/* ── toggles get real cards with room, not 1px-apart strips ──────────────── */
#screen2 .toggle-card{
  background:var(--lx-card-grad) !important;
  border:1px solid var(--lx-border) !important;
  border-radius:var(--lx-r) !important;
  padding:15px 16px !important;
  margin-bottom:10px !important;
  box-shadow:var(--lx-lift) !important;
  gap:16px;
}
#screen2 .toggle-card:last-child{margin-bottom:0 !important}
#screen2 .toggle-card:hover{background:var(--lx-card-grad-h) !important;border-color:rgba(255,255,255,.13) !important}
#screen2 .toggle-card-title{font-size:11.5px;letter-spacing:.09em;margin-bottom:5px}
#screen2 .toggle-card-desc{font-size:11.5px;line-height:1.6;color:var(--lx-t3)}

/* ── the help affordance ─────────────────────────────────────────────────
   Grey at rest, white on hover. A permanently white 'i' competes with the
   heading it sits beside, and green/orange are already spoken for. */
/* .tip::before is a masked SVG glyph tinted by background-color, so a colour
   override has to land there — `color` does nothing. Grey at rest, white on
   hover: a permanently white 'i' competes with the heading beside it, and
   green/orange already carry meaning elsewhere on this screen. */
#screen1 .tip,#screen2 .tip{opacity:1 !important;border:0 !important;margin-left:8px}
#screen1 .tip::before,#screen2 .tip::before{
  background-color:var(--lx-t3) !important;transition:background-color .15s;
}
#screen1 .tip:hover::before,#screen2 .tip:hover::before{background-color:var(--lx-t1) !important}
#screen2 .tip-box{background:#0d0d11;border:1px solid var(--lx-border);border-radius:var(--lx-ri);
  box-shadow:var(--lx-lift)}

/* ── socials: the placeholder should hint, not fill the field ────────────── */
@media (max-width:620px){
  #screen1 input::placeholder{font-size:11px}
}

/* The mode panel's leading glyph was carrying the "this is information" job.
   The fact strips do that now, and a green circle there reads as a status
   light on a screen where green already means Edge. */
#standardFees .s-card > div > svg,#tekFees .s-card > div > svg{display:none}
#standardFees .s-card > div,#tekFees .s-card > div{gap:0 !important}

/* ═══════════════════════════════════════════════════════════════════════════
   PASS 3 — mode as a swipeable pair, denser cards, SOL as its mark
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── mode cards: smaller type so both fit, and the features stop truncating ─ */
#screen2 .mode-name{font-size:12px !important;letter-spacing:.07em}
#screen2 .mode-feature{
  font-size:10px !important;font-weight:400 !important;line-height:1.8;
  white-space:normal !important;overflow:visible !important;text-overflow:clip !important;
}
#screen2 .mode-icon{width:15px;height:15px}

/* ── mobile: one mode at a time, swipe or arrow ──────────────────────────── */
@media (max-width:700px){
  #screen2 .mode-toggle{
    display:flex !important;grid-template-columns:none !important;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;
  }
  #screen2 .mode-toggle::-webkit-scrollbar{display:none}
  #screen2 .mode-toggle > .mode-option{
    flex:0 0 100%;scroll-snap-align:center;min-width:0;
  }
  /* the affordance: dots + a nudge arrow, so it is obviously not one card */
  .lx-modenav{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:10px}
  .lx-modenav .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .2s,width .2s}
  .lx-modenav .d.on{background:#4ade4a;width:16px;border-radius:3px}
  .lx-modenav .d.on.tek{background:var(--orange)}
  .lx-modenav button{background:#0d0d11;border:1px solid var(--lx-border);color:var(--lx-t2);
    width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:11px;line-height:1;padding:0}
  .lx-modenav button:hover{border-color:rgba(255,255,255,.22);color:var(--lx-t1)}
}
@media (min-width:701px){ .lx-modenav{display:none} }

/* ── dev buy tabs: no coloured underline, just a selected surface ────────── */
#screen2 .devbuy-tab{
  font-family:var(--mono) !important;font-size:10.5px !important;font-weight:400 !important;
  letter-spacing:.1em;border-radius:var(--lx-ri) !important;padding:10px 8px !important;
  background:#08080a !important;border:1px solid var(--lx-border) !important;
  color:var(--lx-t3) !important;
}
#screen2 .devbuy-tab:hover{border-color:rgba(255,255,255,.16) !important;color:var(--lx-t2) !important}
#screen2 .devbuy-tab.active{
  border-bottom:1px solid rgba(74,222,74,.5) !important;
  border-color:rgba(74,222,74,.5) !important;
  background:linear-gradient(168deg,rgba(74,222,74,.09),rgba(74,222,74,.03) 64%) !important;
  color:#4ade4a !important;
}
body.tek-mode #screen2 .devbuy-tab.active{
  border-color:rgba(255,107,0,.5) !important;
  background:linear-gradient(168deg,rgba(255,107,0,.09),rgba(255,107,0,.03) 64%) !important;
  color:var(--orange) !important;
}

/* ── the readout: a single strip of figures, not three boxes ─────────────── */
#screen2 .devbuy-equiv{
  grid-template-columns:repeat(3,1fr) !important;gap:0 !important;
  background:#08080a !important;border:1px solid var(--lx-border) !important;
  border-radius:var(--lx-ri) !important;overflow:hidden;margin-top:10px !important;
}
#screen2 .devbuy-eq-item{
  background:none !important;border:0 !important;border-radius:0 !important;
  border-left:1px solid var(--lx-border) !important;padding:11px 13px !important;
}
#screen2 .devbuy-eq-item:first-child{border-left:0 !important}
#screen2 .devbuy-eq-lbl{font-size:8.5px !important;letter-spacing:.13em;margin-bottom:4px !important;color:var(--lx-t3) !important}
#screen2 .devbuy-eq-val{font-size:14px !important;font-variant-numeric:tabular-nums}

/* ── deployment cost: no accent rail ─────────────────────────────────────── */
#screen2 .deploy-cost,#screen2 .cost-bar,#screen2 .total-cost{
  border-left:1px solid var(--lx-border) !important;
  background:var(--lx-card-grad) !important;
  border:1px solid rgba(74,222,74,.22) !important;
  border-radius:var(--lx-r) !important;padding:16px 18px !important;
}

/* ── SOL rendered as its mark ────────────────────────────────────────────── */
.lx-sol{display:inline-block;height:.85em;width:auto;vertical-align:-.08em;margin-left:.28em;opacity:.9}

/* ── the preview card was still on the old display face ─────────────────── */
.lx-dn{font-family:var(--mono) !important;font-weight:700;letter-spacing:.02em}

/* ── mode features: a quiet marker instead of a dash, and room to read ───── */
#screen2 .mode-features{display:flex;flex-direction:column;gap:7px;margin-top:11px}
#screen2 .mode-feature{
  position:relative;padding-left:15px;color:var(--lx-t2) !important;
  letter-spacing:.01em !important;
}
#screen2 .mode-feature::before{
  content:'';position:absolute;left:0;top:.52em;width:5px;height:5px;border-radius:1px;
  background:rgba(255,255,255,.22);
}
#screen2 .mode-option.selected-standard .mode-feature::before{background:#4ade4a}
#screen2 .mode-option.selected-tek .mode-feature::before{background:var(--orange)}
#screen2 .mode-option.selected-standard .mode-feature,
#screen2 .mode-option.selected-tek .mode-feature{color:var(--lx-t1) !important}

/* section labels are neutral now — colour on a heading competes with the
   colour that means Edge or Tek two elements below it */
#screen1 .section-label,#screen2 .section-label,
#screen1 .section-label span,#screen2 .section-label span{color:var(--lx-t1) !important}
#screen2 .section-label .tip::before{background-color:var(--lx-t3) !important}

/* ═══════════════════════════════════════════════════════════════════════════
   PASS 5 — launched card copy/type, review fee split, big-then-settle reveal
   ═══════════════════════════════════════════════════════════════════════════ */

/* the box holds deploy size while the blocks fall, then settles into the slot */
.lx-mark{transition:width .5s cubic-bezier(.5,0,.15,1),height .5s cubic-bezier(.5,0,.15,1)}
.lx-mark.lx-big{width:150px;height:150px}
.lx-mark.lx-big .lx-g5{gap:4px}
.lx-mark.lx-big .lx-ic{border-radius:20px}

/* LAUNCHED and the token name are neutral; nothing here is on the display face */
.lx-t{color:var(--lx-t1) !important;font-size:16px;letter-spacing:.2em}
.lx-tc-n{font-family:var(--mono) !important;font-size:14px}

/* share: a label and a row of marks, not a branded primary button */
.lx-sharelab{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lx-t3);margin-bottom:7px}
.lx-share .lx-rest{grid-template-columns:repeat(4,1fr) !important}
.lx-share .lx-rest button{
  font-family:var(--mono) !important;font-size:13px;padding:11px 6px !important;
  background:#08080a !important;color:var(--lx-t2) !important;
}
.lx-share .lx-rest button img{height:15px;width:auto;display:block;opacity:.92}
.lx-share .lx-rest button:hover{border-color:rgba(255,255,255,.22) !important;background:#0d0d11 !important}

/* every action in the popup off the display face */
.lx-actions .btn,.lx-actions .btn-ghost,.lx-actions button{
  font-family:var(--mono) !important;letter-spacing:.1em;font-weight:400 !important;
}

/* review: the fee split as one bar */
.lx-feebar{margin-top:13px;padding-top:13px;border-top:1px solid var(--lx-border-soft)}
.lx-fb-l{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lx-t3);margin-bottom:7px}
.lx-fb-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#16191e}
.lx-fb-bar i{display:block;height:100%}
.lx-fb-k{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.lx-fb-k span{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;color:var(--lx-t3)}
.lx-fb-k b{width:7px;height:7px;border-radius:2px;display:block}

/* deployment cost wording/format is set in JS; keep the figure calm */
#screen2 .deploy-cost-label{letter-spacing:.09em}

/* the dock sits above the mobile bottom nav, and the page clears both */
@media (max-width:999px){
  /* only the mobile nav bar needs clearing now that the dock is at the top */
  .screen.active{padding-bottom:calc(24px + var(--lx-botbar, 0px))}
}

/* share marks: real icons, sized alike, so the row reads as one set */
.lx-share .lx-rest button svg{width:14px;height:14px;display:block}
.lx-share .lx-rest button{color:var(--lx-t2)}
.lx-share .lx-rest button:hover{color:var(--lx-t1) !important}

/* deploy checklist centres on narrow screens — it was left-aligned in a
   centred column, which reads as misalignment rather than as a list */
@media (max-width:600px){
  #lxDeploy .lx-steps{align-items:center}
  #lxDeploy .lx-steps div{width:max-content;max-width:100%}
}

/* ── mobile: the mode slides run nearly full height and pass under the nav ──
   Tall enough that one mode is the whole screen, stopping just below the top
   bar. The bar keeps its own stacking context above the page, so the cards
   scroll beneath it rather than over it — they read as sliding out from the
   nav rather than floating on top of the page. */
@media (max-width:700px){
  #screen2 .mode-toggle > .mode-option{
    /* No forced height. It was calc'd to near-full-screen when the dock was at
       the bottom and the cards were meant to grow; with the dock now taking a
       band at the top and the content unchanged, that left ~314px of slack in
       a 448px card — which is the stretched look. The card ends where its
       content ends, and the swipe still gives one mode per screen width. */
    padding:18px 17px 20px !important;
    display:flex;flex-direction:column;
  }
  /* Neither centred nor distributed. space-evenly spread four short lines
     across 500px of card, which is the stretching — the lines have a fixed
     rhythm and the card simply ends where the content ends plus air. */
  #screen2 .mode-toggle > .mode-option .mode-features{
    flex:0 0 auto;justify-content:flex-start;gap:15px;padding:6px 0 0;
  }
  #screen2 .mode-toggle > .mode-option .mode-feature{font-size:11.5px !important}
  #screen2 .mode-name{font-size:14px !important}
  /* nav sits above everything in the page flow */
  nav,.topbar{z-index:1000 !important}
  #screen2 .mode-toggle,#screen2 .mode-option{z-index:auto !important;position:relative}
}

/* ── leaving the launched screen ─────────────────────────────────────────
   Desktop closes with an X; dragging a page down with a mouse is not a
   gesture anyone reaches for. Touch keeps the pull-down. */
.lx-close{position:absolute;top:16px;right:18px;width:34px;height:34px;border-radius:50%;
  background:#0d0d11;border:1px solid var(--lx-border);color:var(--lx-t2);
  display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:border-color .15s,color .15s,background .15s}
.lx-close svg{width:15px;height:15px;display:block}
.lx-close:hover{border-color:rgba(255,255,255,.22);color:var(--lx-t1);background:#14141a}
@media (min-width:701px){
  .lx-close{display:flex}
  .lx-grab,.lx-dismiss{display:none}
}