/* DesXapp — one screen, one question, one big box.
   Everything that is not "tell me what to build" folds into the top right.

   DEVICE RULES (learned the hard way — a dropdown anchored to a button walked
   off the left edge of a phone):
     * nothing is given a fixed width that its container cannot honour;
     * popovers are measured against the PAGE, never against the control;
     * heights use dvh so mobile browser chrome cannot crop the layout;
     * the notch is paid for with env(safe-area-inset-*);
     * capability, not width, decides behaviour — (pointer:coarse) gets bigger
       targets, (hover:none) never hides anything behind a hover.
*/

:root{
  --ink:#0d0d0f;
  --ink2:#5c5c66;
  --ink3:#9a9aa4;
  --line:#ececed;
  --paper:#fff;
  --g1:#ff8fb1; --g2:#ffb26b; --g3:#a78bfa; --g4:#7dd3fc;
  --tap:44px;                       /* minimum comfortable touch target */
  --gutter:clamp(14px,4vw,34px);
}

*{box-sizing:border-box}
/* [hidden] is only a UA display:none, so ANY author display rule beats it.
   `.sheet{display:grid}` once painted an empty overlay over the whole site and
   swallowed every tap. Nothing marked hidden may ever paint. */
[hidden]{display:none!important}

html,body{max-width:100%;overflow-x:clip}
body{
  margin:0;background:#f2f1ef;color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;      /* stop iOS inflating text on rotate */
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}

/* ---------- shell ---------- */
.frame{
  min-height:100svh;                 /* svh: the SMALL viewport, so the frame
                                        never jumps as browser chrome hides */
  padding:
    calc(clamp(8px,1.6vw,18px) + env(safe-area-inset-top))
    calc(clamp(8px,1.6vw,18px) + env(safe-area-inset-right))
    calc(clamp(8px,1.6vw,18px) + env(safe-area-inset-bottom))
    calc(clamp(8px,1.6vw,18px) + env(safe-area-inset-left));
  background:linear-gradient(135deg,var(--g1),var(--g2) 33%,var(--g3) 67%,var(--g4));
}
.page{
  min-height:calc(100svh - clamp(16px,3.2vw,36px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  background:var(--paper);border-radius:clamp(18px,2.4vw,30px);
  display:flex;flex-direction:column;
  padding:clamp(14px,2.4vw,26px) var(--gutter) clamp(12px,2vw,22px);
  position:relative;
}

/* ---------- top ---------- */
.top{display:flex;align-items:center;gap:10px;position:relative;min-width:0}
.brand{display:flex;align-items:center;gap:9px;min-height:var(--tap);font-weight:800;font-size:clamp(15px,3.6vw,16.5px);letter-spacing:-.02em;min-width:0}
.brandDot{width:19px;height:19px;flex:none;border-radius:50%;background:conic-gradient(from 210deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g1))}
.brandMark{width:30px;height:30px;flex:none;display:block}
.brandMark svg{width:100%;height:100%;display:block}
.brandName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topRight{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}

.menuWrap{position:static}            /* panel anchors to .top, not to me */
.menuBtn{
  display:flex;align-items:center;gap:6px;
  min-height:var(--tap);padding:0 14px;border-radius:999px;
  border:1.5px solid var(--line);
  font-size:14.5px;font-weight:600;color:var(--ink2);transition:.18s;white-space:nowrap;
}
.menuBtn svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
.menuBtn[aria-expanded="true"] svg{transform:rotate(180deg)}

.menuPanel{
  position:absolute;top:calc(100% + 9px);right:0;z-index:40;
  /* Measured against the header, so it can never exceed the page width. */
  width:min(310px,100%);max-width:100%;
  background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:7px;box-shadow:0 26px 60px -24px rgba(20,16,40,.34);
  animation:drop .18s ease;
  max-height:min(70svh,540px);overflow-y:auto;overscroll-behavior:contain;
}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Both <button> and <a> live in this panel, so neutralise the anchor defaults. */
.menuItem{display:block;width:100%;text-align:left;padding:11px 12px;border-radius:12px;transition:background .14s;text-decoration:none;color:inherit}
.menuItem b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.menuItem s{display:block;text-decoration:none;font-size:12.5px;color:var(--ink3);margin-top:2px}
.menuSplit{height:1px;background:var(--line);margin:6px 10px}

.topPhone{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  min-height:var(--tap);padding:0 16px;border-radius:999px;
  background:var(--ink);color:#fff;font-weight:700;font-size:14.5px;transition:.18s;
}
.topPhone svg{width:15px;height:15px;flex:none;fill:currentColor}


/* Client sign-in pill. Sits beside Explore on a roomy screen; sheds its label
   at 560px and disappears entirely at 470px, where the header is already
   fighting for room. It stays reachable the whole way down because it is also
   an item inside the Explore panel. */
.topClient{
  display:flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;
  min-height:var(--tap);padding:0 15px;border-radius:999px;
  border:1.5px solid var(--line);color:var(--ink);font-weight:700;font-size:14.5px;transition:.18s;
}
.topClient svg{width:16px;height:16px;flex:none;fill:currentColor}
@media (hover:hover){.topClient:hover{border-color:#c9c9d1}}
@media (max-width:560px){.topClientLabel{display:none}.topClient{padding:0;width:var(--tap);justify-content:center}}
@media (max-width:470px){.topClient{display:none}}
/* Narrow phones. Measured, not guessed: at 320px the header needs ~305px for
   brand + Explore + the phone pill but only has ~276px, so the phone number —
   the most valuable thing on the page — was being cut off the right edge.
   Shed the least valuable things first: the Explore word, then the wordmark
   in the header (it is already enormous in the hero directly below). */
@media (max-width:430px){
  .topPhone{padding:0 14px;font-size:13.5px}
  .menuBtn{padding:0 12px}
  .top{gap:8px}
}
@media (max-width:400px){
  .menuBtnLabel{display:none}
  .menuBtn{padding:0;width:var(--tap);justify-content:center}
}
@media (max-width:380px){
  .brandName{display:none}          /* the gradient dot still marks the brand */
  .topPhone{padding:0 13px;font-size:13px;gap:6px}
}

/* ---------- stage ---------- */
.stage{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(12px,3vh,34px) 0;text-align:center;width:100%;min-width:0;
}
.faceHold{position:relative;margin-bottom:14px}
.face{width:clamp(70px,9.5vw,104px);height:auto;display:block;overflow:visible}
.skull{fill:#101012}
.eye{fill:#fff}
.mouth{fill:none;stroke:#fff;stroke-width:5.5;stroke-linecap:round;opacity:.96}
.status{
  position:absolute;left:50%;bottom:-9px;transform:translate(-50%,50%);
  background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;
  padding:4px 12px;border-radius:999px;white-space:nowrap;animation:drop .2s ease;
}

.wordmark{margin:0;font-size:clamp(34px,9vw,62px);font-weight:800;letter-spacing:-.045em;line-height:1}
.line{margin:12px 0 24px;color:var(--ink2);font-size:clamp(14.5px,4vw,18px);max-width:34ch}

/* ---------- the big box ---------- */
.box{
  width:min(680px,100%);
  border:1.5px solid #e4e4e6;border-radius:clamp(20px,5vw,26px);background:#fff;
  box-shadow:0 20px 50px -34px rgba(20,16,40,.4);
  overflow:hidden;transition:border-color .2s, box-shadow .2s;
}
.box:focus-within{border-color:#d2d2d8;box-shadow:0 0 0 4px rgba(167,139,250,.14),0 20px 50px -34px rgba(20,16,40,.4)}
.box.talking{text-align:left}

.thread{
  padding:18px clamp(14px,4vw,22px);display:flex;flex-direction:column;gap:12px;
  max-height:min(46svh,380px);overflow-y:auto;overscroll-behavior:contain;
  text-align:left;border-bottom:1px solid var(--line);
}
.msg{max-width:88%;padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;animation:rise .26s ease}
.msg.bot{background:#f5f5f6;border-bottom-left-radius:6px;align-self:flex-start}
.msg.me{background:var(--ink);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.entry{display:flex;align-items:flex-end;gap:10px;padding:12px 12px 12px clamp(14px,4vw,22px)}
.entry textarea{
  flex:1;border:0;outline:0;resize:none;background:none;
  font:inherit;font-size:16px;         /* 16px: anything smaller makes iOS zoom */
  line-height:1.5;color:var(--ink);
  padding:10px 0;max-height:132px;min-width:0;
}
.entry textarea::placeholder{color:var(--ink3)}
.send{
  flex:none;width:var(--tap);height:var(--tap);border-radius:50%;background:var(--ink);
  display:grid;place-items:center;transition:.16s;
}
.send:disabled{opacity:.3;cursor:default}
.send svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

.quick{display:flex;flex-wrap:wrap;gap:7px;padding:0 clamp(12px,3.5vw,16px) 16px}
.quick button,.ghostChip{
  border:1.5px solid var(--line);border-radius:999px;
  min-height:38px;padding:0 15px;font-size:13.5px;color:var(--ink2);transition:.16s;
}
.under{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;width:100%}
.ghostChip{color:var(--ink3)}

/* A tel: link people are meant to tap needs a real target, not a text line. */
.callout{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;margin-top:14px;color:var(--ink3);font-size:clamp(13.5px,3.6vw,14.5px)}
.callout strong{color:var(--ink);font-weight:700}
.foot{text-align:center;color:var(--ink3);font-size:clamp(11.5px,3vw,12.5px);padding-top:10px;line-height:1.5}

/* ---------- overlay sheet ---------- */
.sheet{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:rgba(14,12,20,.42);backdrop-filter:blur(4px);
  padding:calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
          calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  animation:drop .2s ease;
}
.sheetCard{
  position:relative;background:#fff;border-radius:clamp(18px,4vw,26px);
  padding:clamp(26px,6vw,34px) clamp(18px,5vw,40px);
  width:min(760px,100%);max-height:86svh;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 40px 90px -30px rgba(10,6,25,.6);
}
.sheetClose{
  position:absolute;top:8px;right:10px;
  width:var(--tap);height:var(--tap);border-radius:50%;
  font-size:26px;line-height:1;color:var(--ink3);display:grid;place-items:center;
}
.sheetCard h2{margin:0 0 6px;font-size:clamp(21px,5.5vw,30px);letter-spacing:-.03em;padding-right:38px}
.sheetCard .sub{color:var(--ink2);margin:0 0 24px;font-size:clamp(14px,3.8vw,15px)}
.workGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:13px}
.work{border:1.5px solid var(--line);border-radius:18px;overflow:hidden;text-align:left;transition:.2s;width:100%;min-width:0}
.workShot{display:block;aspect-ratio:16/10;background:#f4f4f5 center/cover no-repeat}
.workBody{display:block;padding:15px 17px 18px}
.work b{display:block;font-size:15px;margin-bottom:5px;letter-spacing:-.012em}
.work s{display:block;text-decoration:none;color:var(--ink2);font-size:13.5px;line-height:1.5}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:13px;text-align:left}
.step{border:1.5px solid var(--line);border-radius:18px;padding:20px 18px;min-width:0}
.step i{
  display:grid;place-items:center;width:27px;height:27px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:13px;font-weight:700;font-style:normal;margin-bottom:11px;
}
.step b{display:block;font-size:15px;margin-bottom:5px}
.step s{display:block;text-decoration:none;color:var(--ink2);font-size:13.5px;line-height:1.5}

/* ---------- capability, not width ---------- */

/* A real pointer: hover affordances are worth having. */
@media (hover:hover) and (pointer:fine){
  .menuBtn:hover,.menuBtn[aria-expanded="true"]{border-color:var(--ink);color:var(--ink)}
  .menuItem:hover{background:#f6f6f7}
  .topPhone:hover{transform:translateY(-1px);opacity:.92}
  .send:hover:not(:disabled){transform:scale(1.06)}
  .quick button:hover,.ghostChip:hover{border-color:var(--ink);color:var(--ink)}
  .work:hover{border-color:var(--ink);transform:translateY(-2px)}
  .sheetClose:hover{color:var(--ink)}
}

/* Touch: no hover to rely on, so give feedback on press and grow the targets. */
@media (pointer:coarse){
  .menuItem{padding:13px 12px}
  .quick button,.ghostChip{min-height:var(--tap);padding:0 17px;font-size:14px}
  .menuItem:active,.quick button:active,.ghostChip:active,.work:active{background:#f2f2f4}
  .topPhone:active,.send:active{transform:scale(.97)}
  .menuBtn:active{border-color:var(--ink)}
}

/* Short landscape (a phone on its side): claw back vertical space. */
@media (max-height:520px) and (orientation:landscape){
  .stage{padding:8px 0;justify-content:flex-start}
  .faceHold{margin-bottom:6px}
  .face{width:clamp(46px,7vh,64px)}
  .wordmark{font-size:clamp(24px,5vh,34px)}
  .line{margin:6px 0 12px;font-size:14px}
  .under,.foot{display:none}          /* the box and the phone number matter more */
  .callout{margin-top:12px}
  .thread{max-height:38svh}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= MOCK-UP PANEL =================
   A pull tab on the right that slides a rough drawing of their idea into view.
   Labelled as a mock-up in three places on purpose: the tab, the header, and a
   warning block above the drawing. The goal is notes, not applause. */

.mkTab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;align-items:center;gap:9px;
  background:var(--ink);color:#fff;
  padding:14px 16px 14px 14px;border-radius:16px 0 0 16px;
  font-size:14px;font-weight:650;white-space:nowrap;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.55);
  animation:tabIn .45s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes tabIn{from{transform:translate(100%,-50%)}to{transform:translate(0,-50%)}}
.mkTabDot{width:9px;height:9px;border-radius:50%;background:#6ee7b7;flex:none;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:560px){
  .mkTab{top:auto;bottom:16px;transform:none;right:14px;border-radius:999px;animation:none}
  .mkTabText{font-size:13.5px}
}

.mkPanel{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(420px,100%);background:#fff;
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px -30px rgba(10,6,25,.5);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(16px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  animation:slideIn .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.mkPanelHead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.mkPanelHead b{display:block;font-size:16.5px;letter-spacing:-.02em}
.mkPanelHead s{display:block;text-decoration:none;font-size:12.5px;color:var(--ink3);margin-top:2px}
.mkClose{margin-left:auto;width:var(--tap);height:var(--tap);border-radius:50%;font-size:26px;line-height:1;color:var(--ink3);display:grid;place-items:center;flex:none}

.mkWarn{
  background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;
  padding:12px 14px;font-size:13px;line-height:1.5;color:#7c2d12;margin-bottom:16px;
}
.mkWarn b{display:block;font-size:13.5px;margin-bottom:3px}

.mkStage{display:flex;justify-content:center;margin-bottom:18px}

/* the drawn phone */
.mkFrame{
  position:relative;width:250px;background:#101012;border-radius:26px;padding:10px;
  box-shadow:0 18px 44px -20px rgba(10,6,25,.55);
}
.mkFrame.mkWeb{width:100%;max-width:340px;border-radius:14px;padding:8px}
.mkScreen{background:#fff;border-radius:18px;padding:14px;min-height:330px}
.mkFrame.mkWeb .mkScreen{border-radius:8px;min-height:250px}
.mkStamp{
  position:absolute;top:14px;right:-8px;z-index:2;
  background:#f59e0b;color:#3b2005;font-size:10px;font-weight:800;
  letter-spacing:.1em;padding:4px 9px;border-radius:4px;transform:rotate(3deg);
  box-shadow:0 4px 12px -3px rgba(0,0,0,.4);
}

.mkHead{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.mkDot{width:26px;height:26px;border-radius:8px;flex:none}
.mkHead b{display:block;font-size:13px;letter-spacing:-.01em}
.mkHead s{display:block;text-decoration:none;font-size:11px;color:#9a9aa4}
.mkRow{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #f1f1f3;font-size:12px}
.mkRow b{font-weight:650}
.mkRow s{margin-left:auto;text-decoration:none;color:#9a9aa4}
.mkChip{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.mkSlots{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}
.mkSlot{border:1.5px solid #ececed;border-radius:9px;padding:9px 0;text-align:center;font-size:12px;color:#5c5c66}
.mkSlot.on{color:#fff;font-weight:700}
.mkCta{color:#fff;text-align:center;padding:11px;border-radius:11px;font-size:12.5px;font-weight:700;margin-top:12px}
.mkNote{text-align:center;font-size:10.5px;color:#9a9aa4;margin-top:9px}
.mkSearch{border:1.5px solid #ececed;border-radius:9px;padding:9px 11px;font-size:11.5px;color:#9a9aa4;margin-bottom:10px}
.mkPost{border:1px solid #f1f1f3;border-radius:11px;overflow:hidden;margin-bottom:10px}
.mkPostImg{height:96px}
.mkPostBody{padding:9px 11px}
.mkPostBody b{display:block;font-size:12px}
.mkPostBody s{display:block;text-decoration:none;font-size:11px;color:#5c5c66;margin-top:2px;line-height:1.45}
.mkComment{display:flex;gap:8px;background:#f7f7f8;border-radius:10px;padding:9px 11px}
.mkComment i{width:20px;height:20px;border-radius:50%;flex:none}
.mkComment b{display:block;font-size:11px}
.mkComment s{display:block;text-decoration:none;font-size:10.5px;color:#5c5c66;margin-top:2px;line-height:1.45}
.mkGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}
.mkGrid3{grid-template-columns:repeat(3,1fr)}
.mkTile{display:block;aspect-ratio:1;border-radius:9px}
.mkStats{display:flex;gap:9px;margin-bottom:12px}
.mkStats div{flex:1;background:#fafafb;border:1px solid #f1f1f3;border-radius:10px;padding:10px}
.mkStats b{display:block;font-size:15px;letter-spacing:-.02em}
.mkStats s{display:block;text-decoration:none;font-size:10px;color:#9a9aa4;margin-top:2px}
.mkChart{display:flex;align-items:flex-end;gap:5px;height:76px;padding-top:6px}
.mkChart i{flex:1;border-radius:4px 4px 0 0}
.mkBar{display:flex;align-items:center;gap:5px;background:#f4f4f6;border-radius:7px;padding:6px 9px;margin-bottom:11px}
.mkBar i{width:7px;height:7px;border-radius:50%;background:#d6d6da}
.mkBar span{margin-left:8px;font-size:10px;color:#9a9aa4}
.mkHero{text-align:center;padding:18px 6px}
.mkHero b{display:block;font-size:19px;letter-spacing:-.03em}
.mkHero s{display:block;text-decoration:none;font-size:11.5px;color:#5c5c66;margin-top:5px}

.mkAsk{border-top:1px solid var(--line);padding-top:16px}
.mkAsk label{display:block;font-size:14px;font-weight:700;margin-bottom:7px}
.mkAsk textarea{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;
  font:inherit;font-size:16px;line-height:1.5;resize:vertical;outline:0;
}
.mkAsk textarea:focus{border-color:#d2d2d8}
.mkSend{
  width:100%;margin-top:9px;min-height:var(--tap);border-radius:999px;
  background:#fff;border:1.5px solid var(--ink);color:var(--ink);font-weight:650;font-size:14.5px;
}
.mkSent{margin-top:9px;font-size:13.5px;color:#16a34a;font-weight:600;text-align:center}

.mkPay{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.mkPayText{font-size:13.5px;line-height:1.55;color:var(--ink2);margin-bottom:11px}
.mkPayBtn{width:100%;min-height:var(--tap);border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:15px}
.mkCall{display:block;text-align:center;margin-top:10px;font-size:13px;color:var(--ink3)}

@media (hover:hover) and (pointer:fine){
  .mkTab:hover{padding-right:20px}
  .mkSend:hover,.mkPayBtn:hover{transform:translateY(-1px)}
  .mkClose:hover{color:var(--ink)}
}

/* ================= CLOSE-OUT =================
   Where Stripe returns them after the deposit clears. This is the moment they
   decide whether they trust the purchase, so it states plainly what happens
   next and keeps the phone number one tap away. */
.done{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--g1),var(--g2) 33%,var(--g3) 67%,var(--g4));
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.doneCard{
  background:#fff;border-radius:26px;padding:clamp(28px,6vw,44px) clamp(20px,5vw,40px);
  width:min(520px,100%);text-align:center;box-shadow:0 40px 90px -30px rgba(10,6,25,.5);
  animation:rise .4s cubic-bezier(.2,.9,.3,1.1);
}
.doneTick{display:grid;place-items:center;margin-bottom:18px}
.doneTick svg{width:64px;height:64px;fill:none;stroke:#16a34a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.doneTick circle{opacity:.22}
.doneCard h2{margin:0 0 8px;font-size:clamp(22px,5.5vw,30px);letter-spacing:-.03em}
.doneLead{margin:0 0 24px;color:var(--ink2);font-size:clamp(14.5px,3.8vw,16px)}
.doneSteps{list-style:none;margin:0 0 22px;padding:0;text-align:left;counter-reset:d}
.doneSteps li{
  counter-increment:d;position:relative;padding:0 0 16px 40px;
}
.doneSteps li:before{
  content:counter(d);position:absolute;left:0;top:0;
  width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;
}
.doneSteps b{display:block;font-size:15px;margin-bottom:3px}
.doneSteps s{display:block;text-decoration:none;color:var(--ink2);font-size:13.5px;line-height:1.5}
.donePhone{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);border-radius:999px;background:var(--ink);color:#fff;
  font-weight:650;font-size:14.5px;padding:0 18px;
}
.donePhone svg{width:15px;height:15px;flex:none;fill:currentColor}
.doneFoot{margin-top:16px;font-size:12.5px;color:var(--ink3)}
.doneBack{margin-top:14px;font-size:13.5px;color:var(--ink3);text-decoration:underline;min-height:var(--tap)}
@media (hover:hover) and (pointer:fine){
  .donePhone:hover{transform:translateY(-1px)}
  .doneBack:hover{color:var(--ink)}
}

/* Brand edge on the face. The artwork reads as a dark rounded square lit from
   its rim, so: a blurred gradient stroke bleeding outward, the solid skull on
   top of it, then a crisp gradient rim. Kept light on purpose — it is a hue,
   not a neon sign. */
.skullGlow{fill:none;stroke:url(#faceEdge);stroke-width:5.5;opacity:.5}
.skullEdge{fill:none;stroke:url(#faceEdge);stroke-width:2.1;opacity:.92}
@media (prefers-reduced-motion:no-preference){
  .skullGlow{animation:faceBreathe 4.6s ease-in-out infinite}
}
@keyframes faceBreathe{0%,100%{opacity:.38}50%{opacity:.62}}

/* ---------- checkout, in a phone over their mock-up ---------- */
/* The point of the phone shape is honesty about what is happening: this is a
   real card form, on a real device-looking surface, and their sketch is still
   behind it. The scrim is light so the mock-up stays readable. */
.payWrap{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px}
.payScrim{position:absolute;inset:0;background:rgba(12,10,20,.42);backdrop-filter:blur(2px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

.phone{
  position:relative;width:min(390px,100%);max-height:min(760px,88svh);
  background:#0b0b0d;border-radius:38px;padding:9px;
  box-shadow:0 40px 90px -30px rgba(10,6,30,.7),0 0 0 1.5px rgba(255,255,255,.08);
  display:flex;flex-direction:column;animation:phoneIn .32s cubic-bezier(.2,.9,.3,1);
}
@keyframes phoneIn{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.phone{animation:none}.payScrim{animation:none}}
.phoneNotch{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:86px;height:5px;border-radius:99px;background:#26262c;z-index:2}
.phoneScreen{background:#fff;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;min-height:0;flex:1}

.phoneTop{display:flex;align-items:center;gap:10px;padding:24px 16px 12px;border-bottom:1px solid var(--line)}
.phoneMark{width:30px;height:30px;flex:none}
.phoneMark svg{width:100%;height:100%;display:block}
.phoneTitle{flex:1;min-width:0;line-height:1.25}
.phoneTitle b{display:block;font-size:14.5px;font-weight:750;letter-spacing:-.01em}
.phoneTitle s{display:block;text-decoration:none;font-size:11.5px;color:var(--ink3)}
.phoneClose{width:32px;height:32px;border-radius:50%;flex:none;font-size:21px;line-height:1;color:var(--ink2);background:#f4f4f5}

.phoneLine{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;background:#fafafa;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink2)}
.phoneLine b{font-size:17px;color:var(--ink);letter-spacing:-.02em}

.phoneBody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 0}
.phoneLoad{display:flex;align-items:center;justify-content:center;gap:9px;padding:40px 18px;color:var(--ink3);font-size:14px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid #e2e2e6;border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.phoneErr{padding:20px 18px;color:#b91c1c;font-size:14px;font-weight:600;line-height:1.5}

.phoneFoot{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 16px calc(13px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:11.5px;color:var(--ink3);background:#fafafa}
.phoneFoot svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.phoneFoot b{color:var(--ink2)}

.payHint{position:relative;color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.5);text-align:center}

/* On a roomy screen the phone sits to one side so the mock-up panel it came
   from is still genuinely visible, not merely behind a scrim. */
@media (min-width:900px){
  .payWrap{align-items:flex-end;justify-content:center;padding-right:clamp(20px,5vw,64px)}
  .payWrap.withPanel{justify-content:flex-start;padding-left:clamp(20px,5vw,64px);align-items:center}
}
@media (max-width:420px){
  .phone{border-radius:30px;padding:7px}
  .phoneScreen{border-radius:24px}
}

/* ---------- build-queue close-out ---------- */
/* Four cards across on a desktop, stacked on a phone, with a chevron between
   them so the order reads as a journey rather than a list. */
.doneMark{width:74px;height:74px;margin:0 auto 16px}
.doneMark svg{width:100%;height:100%;display:block;overflow:visible}

.doneFlow{list-style:none;margin:26px 0 22px;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));text-align:left}
.doneFlow li{position:relative;border:1.5px solid var(--line);border-radius:18px;padding:20px 16px 16px}
.stepNo{position:absolute;top:-11px;left:16px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#ff8a3d,#ff5f9e 45%,#a78bfa)}
.stepIcon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f5f5f6;margin-bottom:12px}
.stepIcon svg{width:21px;height:21px;fill:none;stroke:var(--ink2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.doneFlow b{display:block;font-size:15px;font-weight:750;letter-spacing:-.015em;margin-bottom:5px}
.doneFlow s{display:block;text-decoration:none;font-size:13.5px;line-height:1.55;color:var(--ink2)}

/* the chevron between cards, drawn only where two cards actually sit side by side */
@media (min-width:900px){
  .doneFlow li + li::before{
    content:"";position:absolute;left:-11px;top:50%;width:9px;height:9px;
    border-right:2px solid #d3d3d9;border-top:2px solid #d3d3d9;
    transform:translateY(-50%) rotate(45deg);
  }
}

/* ---------- the gradient X ---------- */
/* background-clip:text needs a painted background and a transparent fill. The
   solid colour underneath is the fallback: if a browser cannot clip to text,
   the X stays legible ink rather than disappearing. */
.xGrad{
  color:#ff5f9e;
  background:linear-gradient(135deg,#ff8a3d,#ff5f9e 38%,#a78bfa 72%,#6ea8fe);
  -webkit-background-clip:text;background-clip:text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .xGrad{-webkit-text-fill-color:transparent;color:transparent}
}

/* ---------- what we build ---------- */
.cards{
  width:min(1120px,100%);margin:26px auto 0;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.fCard{
  display:flex;align-items:flex-start;gap:13px;text-align:left;
  padding:16px 14px;border-radius:16px;border:1.5px solid transparent;
  transition:border-color .16s,background .16s;min-height:var(--tap);
}
@media (hover:hover){.fCard:hover{border-color:var(--line);background:#fbfbfc}}
.fCard:focus-visible{outline:2px solid #c9c9d1;outline-offset:2px}
.fIcon{
  width:46px;height:46px;flex:none;border-radius:14px;
  border:1.5px solid var(--line);display:grid;place-items:center;background:#fff;
}
.fIcon svg{width:22px;height:22px;fill:none;stroke:url(#fGrad);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fText{min-width:0}
.fText b{display:block;font-size:14.5px;font-weight:750;letter-spacing:-.015em;line-height:1.3}
.fText s{display:block;text-decoration:none;font-size:13px;line-height:1.5;color:var(--ink2);margin-top:3px}

@media (max-width:640px){
  .cards{gap:6px;margin-top:18px}
  .fCard{padding:12px 10px;gap:11px}
  .fIcon{width:40px;height:40px;border-radius:12px}
  .fIcon svg{width:19px;height:19px}
}

/* ---------- splash ---------- */
.splash{
  position:fixed;inset:0;z-index:200;background:#000;
  display:grid;place-items:center;animation:fade .18s ease;
}
.splash.out{animation:splashOut .45s ease forwards;pointer-events:none}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
.splash video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.splashSkip{
  position:absolute;right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  min-height:var(--tap);padding:0 18px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:700;
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);
}
@media (hover:hover){.splashSkip:hover{background:rgba(255,255,255,.24)}}
@media (prefers-reduced-motion:reduce){.splash{display:none!important}}