/* 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))}
.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}}
.menuItem{display:block;width:100%;text-align:left;padding:11px 12px;border-radius:12px;transition:background .14s}
.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}

/* 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}}