/* clickto.app — home / anonymous builder
   ---------------------------------------------------------------------------
   Loads AFTER prompt.css, which owns the numbered step rail (.pb-step, .pb-n,
   the connecting line, the kind picker, the style cards, the prompt block, the
   .pb-drop paste tray). Everything here is either a token prompt.css expects, a
   component it doesn't provide (buttons, modal, toast), or a .hm-* element
   unique to this page.

   THE SHAPE OF THE PAGE
   There is no hero. A hero is a page asking to be read; this page wants to be
   used, and every pixel above step 1 is a pixel between somebody and a live
   site. So: one bar, one headline, one strip of proof, then step 1, inside the
   first screen on a laptop.

   THE SIGNATURE is .hm-addr in the bar: the web address you're about to own,
   greyed out, filling in as you type a name. Publishing becomes finishing
   something rather than starting something.
   --------------------------------------------------------------------------- */

/* prompt.css paints the prompt box and the paste box with these. /editor gets
   them from editor.css; this page doesn't load that, so without them both
   boxes fall back to browser defaults: white on black, unreadable. */
:root{
  --ink:#151823; --ink-soft:#2A2E3D; --paper:#FBFAF7; --paper-2:#F3F1EB;
  --accent:#5B4BE8; --accent-deep:#4536C4; --lilac:#EEEBFC; --slate:#5A5E6B;
  --line:#E6E3DA; --white:#FFFFFF;
  --ok:#2E9E6B; --ok-deep:#1F6B47; --warn:#C77700; --err:#D2503B;
  --code-bg:#1B1E2B; --code-bg-2:#161927; --code-line:#2A2E42; --code-fg:#E6E7EF;

  --shadow-sm:0 1px 2px rgba(21,24,35,.06),0 2px 8px rgba(21,24,35,.05);
  --shadow-md:0 8px 24px rgba(21,24,35,.08),0 2px 6px rgba(21,24,35,.05);
  --shadow-lg:0 30px 60px -20px rgba(21,24,35,.28),0 12px 28px -12px rgba(21,24,35,.16);
  --r:14px; --r-lg:22px;
  --bar-h:58px;
  --pad-x:1.25rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 14px)}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;line-height:1.06}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* LONGHANDS, deliberately.
   This used to be `padding:0 1.25rem`, and the responsive block at the bottom
   of the file re-declared it the same way. A shorthand sets all four sides, so
   at 760px it silently zeroed the vertical padding of every element that also
   carries .hm-wrap: the returning-visitor card lost its top and bottom padding
   on exactly the screens where it needed them most. Sides only, from here on. */
.hm-wrap{max-width:900px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x);width:100%}

.hm-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-size:.85rem;font-weight:600}
.hm-skip:focus{left:0}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.hm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;font-size:.94rem;line-height:1;
  padding:.8rem 1.3rem;border-radius:100px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .16s,box-shadow .16s,background .16s,border-color .16s,color .16s;
}
.hm-btn-sm{padding:.52rem .9rem;font-size:.83rem}
.hm-btn-lg{padding:1rem 1.7rem;font-size:1.02rem}
.hm-btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px -8px rgba(91,75,232,.62)}
.hm-btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(91,75,232,.7)}
.hm-btn-ghost{background:var(--white);color:var(--ink);border-color:var(--line)}
.hm-btn-ghost:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--lilac)}
.hm-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}

.spin{display:inline-block;width:15px;height:15px;flex:none;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:hmRot .7s linear infinite}
@keyframes hmRot{to{transform:rotate(360deg)}}

/* =========================================================================
   THE BAR — logo, the five steps, the address you're about to own
   ========================================================================= */
.hm-bar{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,247,.9);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.hm-bar-inner{
  max-width:1140px;margin:0 auto;padding:0 var(--pad-x);
  min-height:var(--bar-h);display:flex;align-items:center;gap:1.25rem;
}

/* Identical to the editor's .ed-title .mark and the sidebar's .sb-brand:
   30px, 8px radius, indigo, the cursor glyph. One logo everywhere. */
.hm-brand{display:inline-flex;align-items:center;gap:.55rem;flex:none;font-weight:700;font-size:1rem;letter-spacing:-.02em}
.hm-brand b{font-weight:700;color:var(--accent)}
.hm-brand .mark{
  width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:.85rem;
  box-shadow:0 6px 14px -6px rgba(91,75,232,.75);
}

/* Five dots and five words. A real sequence, so numbering it is honest. */
.hm-steps{display:flex;align-items:center;gap:1rem;list-style:none;margin:0 auto}
.hm-steps li{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font:600 .78rem 'Inter',sans-serif;color:#B7B2C6;transition:color .2s;
}
.hm-steps li span{
  width:9px;height:9px;border-radius:50%;flex:none;
  border:1.5px solid #D6D2E4;background:transparent;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.hm-steps li.on{color:var(--accent-deep)}
.hm-steps li.on span{background:var(--accent);border-color:var(--accent)}
.hm-steps li.now{color:var(--ink)}
.hm-steps li.now span{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,75,232,.16)}

.hm-bar-right{display:flex;align-items:center;gap:.85rem;flex:none;margin-left:auto}

/* Hidden until there is something to show. An empty placeholder from the first
   frame made the bar read as a form with three jobs; appearing the moment a
   name exists makes it read as something the person just earned. */
.hm-addr{display:none}
.hm-addr.is-named,.hm-addr.is-live{
  display:inline-flex;align-items:center;gap:.5rem;min-width:0;
  text-decoration:none;
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:.4rem .8rem;box-shadow:var(--shadow-sm);
}
.hm-addr>i{font-size:.82rem;color:#B7B2C6;flex:none;transition:color .2s}
/* Now a real hostname rather than a path under ours, so the NAME is the
   emphasised half and the apex is the quiet one. */
.hm-addr-url{
  font:400 .8rem 'Space Mono',monospace;color:#B7B2C6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30ch;
  transition:color .2s;
}
.hm-addr-url b{font-weight:700;color:#9E99AE;transition:color .2s}
.hm-addr-state{font:600 .7rem 'Inter',sans-serif;color:var(--slate);white-space:nowrap;padding-left:.5rem;border-left:1px solid var(--line)}

/* named but not published yet: the address is real, it just isn't on yet */
.hm-addr.is-named .hm-addr-url{color:var(--ink-soft)}
.hm-addr.is-named .hm-addr-url b{color:var(--accent-deep)}
.hm-addr.is-named>i{color:var(--accent)}

/* live */
.hm-addr.is-live{border-color:#BFE4D2;background:#F2FAF6}
.hm-addr.is-live>i,.hm-addr.is-live .hm-addr-url,.hm-addr.is-live .hm-addr-url b{color:var(--ok-deep)}
.hm-addr.is-live .hm-addr-state{color:var(--ok-deep);border-left-color:#BFE4D2;display:inline-flex;align-items:center;gap:.35rem}
.hm-addr.is-live .hm-addr-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:hmPulse 2.4s ease-out infinite}
/* Only clickable once it goes somewhere, and it says so. */
.hm-addr.is-live{cursor:pointer}
.hm-addr.is-live:hover{border-color:var(--ok);background:#EAF7F0}
@keyframes hmPulse{0%{box-shadow:0 0 0 0 rgba(46,158,107,.45)}70%,100%{box-shadow:0 0 0 8px rgba(46,158,107,0)}}

.hm-signin{
  flex:none;border:1px solid var(--line);background:var(--white);cursor:pointer;
  padding:.45rem .9rem;border-radius:100px;
  font:600 .82rem/1 'Inter',sans-serif;color:var(--ink-soft);
  transition:border-color .15s,color .15s,background .15s;
}
.hm-signin:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--lilac)}

/* =========================================================================
   RETURNING VISITOR

   Whoever sees this already built something, which makes them the likeliest
   person on the site to sign up. It gets to be a card rather than a strip: the
   address is big and clickable, opening it is one tap, and the claim is the
   only filled button on the screen.

   Every rule below is written as .hm-resume .hm-resume-* rather than
   .hm-resume-* alone. Two classes beat the single .hm-wrap class no matter
   which one the cascade sees last, so the card's own padding can never be
   flattened by a responsive re-declaration of the wrapper again.
   ========================================================================= */
.hm-resume{background:#F2FAF6;border-bottom:1px solid #CDEADB}
/* Injected by home.js the moment a publish succeeds, rather than waiting for
   the next page load. It slides rather than appears: something arriving at the
   top of a page with no motion reads as a layout bug. */
.hm-resume.is-fresh{animation:hmResumeIn .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes hmResumeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.hm-resume.is-expired{background:#FFF8EC;border-bottom-color:#F3DFB8}

.hm-resume .hm-resume-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  padding-top:.9rem;padding-bottom:.55rem;
}
.hm-resume-main{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;min-width:0}

.hm-resume-status{display:inline-flex;align-items:center;gap:.45rem;flex:none}
.hm-resume-status .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;animation:hmPulse 2.4s ease-out infinite}
.hm-resume-status b{font:600 .82rem 'Inter',sans-serif;color:var(--ok-deep);white-space:nowrap}
.hm-resume.is-expired .hm-resume-status .dot{background:var(--warn);animation:none}
.hm-resume.is-expired .hm-resume-status b{color:#6E4200}

/* The URL is the point. Big, monospace, and it opens the thing. */
.hm-resume-url{
  display:inline-flex;align-items:center;gap:.4rem;min-width:0;
  font:700 .92rem 'Space Mono',monospace;color:var(--ok-deep);
  border-bottom:1px solid rgba(31,107,71,.3);padding-bottom:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .15s,border-color .15s;
}
.hm-resume-url i{font-size:.78rem;flex:none;opacity:.7}
.hm-resume-url:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}
.hm-resume-url.is-dead{
  color:#8A5200;border-bottom:1px dashed rgba(138,82,0,.35);
  text-decoration:line-through;text-decoration-color:rgba(138,82,0,.4);
}
.hm-resume-name{
  font:400 .8rem 'Inter',sans-serif;color:#3E7A5D;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch;
}
.hm-resume.is-expired .hm-resume-name{color:#8A5200}

.hm-resume-acts{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.hm-resume .hm-resume-foot{
  padding-bottom:.9rem;font:400 .79rem/1.5 'Inter',sans-serif;color:#3E7A5D;
}
.hm-resume.is-expired .hm-resume-foot{color:#8A5200}
.hm-resume-foot b{font-weight:600;color:var(--accent-deep)}

/* =========================================================================
   PICKING UP A DRAFT

   Offered, never performed. See the note in home.js: a page that scrolls
   itself the moment you arrive is a page that took the wheel off you. It also
   never appears alongside a live site, because there is nothing to continue
   towards while publishing is walled.
   ========================================================================= */
.hm-continue{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin-bottom:1.4rem;padding:.8rem .95rem;
  background:var(--white);border:1px solid #E2DEF8;border-radius:16px;
  box-shadow:var(--shadow-sm);
  display: none;
}
.hm-continue-ico{
  width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--lilac);color:var(--accent-deep);font-size:.95rem;
}
.hm-continue-t{flex:1;min-width:0}
.hm-continue-t b{display:block;font:600 .89rem 'Inter',sans-serif;color:var(--ink)}
.hm-continue-t span{display:block;margin-top:.12rem;font:400 .79rem/1.4 'Inter',sans-serif;color:var(--slate)}
.hm-continue .hm-btn{flex:none}
.hm-continue-drop{
  background:none;border:0;cursor:pointer;flex:none;
  font:500 .78rem 'Inter',sans-serif;color:var(--slate);padding:.3rem .5rem;border-radius:8px;
}
.hm-continue-drop:hover{color:var(--ink);background:var(--paper-2)}

/* =========================================================================
   THE TOP — one headline, one line of explanation, one strip of proof
   ========================================================================= */
.hm-top{padding:1.7rem 0 .3rem}
.hm-top h1{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;max-width:24ch}
/* The gradient half sits on its own line at desktop widths without a <br>,
   which would break badly on a phone. */
.hm-grad{display:inline-block}
.hm-grad{
  background:linear-gradient(100deg,var(--accent) 0%,#8A5BE8 48%,#0EA5A4 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hm-sub{margin-top:.55rem;max-width:62ch;font-size:.94rem;line-height:1.55;color:var(--slate)}

/* One slim row, ~38px tall. The old version stacked a screenshot above a
   caption and ate 130px of the most valuable space on the page, and the
   marquee clone was landing outside the track, so it wrapped to a second row
   and looked broken. Chips can't wrap: the track is inline-flex inside an
   overflow-hidden viewport with its own line-height. */
.hm-rail{
  display:flex;align-items:center;gap:.7rem;
  margin-top:1.05rem;min-width:0;
}
.hm-rail-l{
  flex:none;font:700 .66rem 'Space Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);white-space:nowrap;
}
.hm-rail-vp{
  position:relative;flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
  mask-image:linear-gradient(90deg,#000 88%,transparent);
}
.hm-rail-track{
  display:flex;flex-wrap:nowrap;gap:.45rem;width:max-content;
  animation:hmSlide 52s linear infinite;
}
.hm-rail-vp:hover .hm-rail-track,
.hm-rail-vp:focus-within .hm-rail-track,
.hm-rail.paused .hm-rail-track{animation-play-state:paused}
@keyframes hmSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hm-chip{
  flex:none;display:inline-flex;align-items:center;gap:.42rem;
  padding:.44rem .8rem;cursor:pointer;white-space:nowrap;
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  font:500 .82rem/1 'Inter',sans-serif;color:var(--ink-soft);
  transition:border-color .15s,color .15s,background .15s,transform .15s;
}
.hm-chip i{font-size:.9rem;color:var(--accent);transition:color .15s}
.hm-chip:hover{border-color:var(--accent);background:var(--lilac);color:var(--accent-deep);transform:translateY(-1px)}
.hm-chip:hover i{color:var(--accent-deep)}

/* =========================================================================
   THE BUILDER
   ========================================================================= */
.hm-build{padding:1.6rem 0 2.5rem}
/* The builder column is narrower than the bar above it: the step rail reads
   better at ~820px than at the full content width. */
.hm-build-wrap{max-width:840px}
.hm-flow.pb-flow{max-width:none;padding:0;margin:0}

/* ---- preview ---- */
.hm-stage{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white);box-shadow:var(--shadow-md)}
.hm-stage-bar{display:flex;align-items:center;gap:.7rem;padding:.5rem .75rem;background:var(--paper-2);border-bottom:1px solid var(--line)}
.hm-stage-label{flex:1;min-width:0;font:400 .76rem 'Space Mono',monospace;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-stage-devices{display:inline-flex;gap:.15rem;background:var(--white);border:1px solid var(--line);border-radius:100px;padding:.2rem}
.hm-stage-devices button{border:0;background:none;cursor:pointer;color:var(--slate);padding:.28rem .55rem;border-radius:100px;font-size:.86rem;line-height:1;transition:background .15s,color .15s}
.hm-stage-devices button.on{background:var(--lilac);color:var(--accent-deep)}
.hm-stage-reload{border:0;background:none;cursor:pointer;color:var(--slate);padding:.34rem;border-radius:8px;font-size:.92rem;line-height:1;transition:background .15s,color .15s}
.hm-stage-reload:hover{background:var(--white);color:var(--ink)}
.hm-stage-body{position:relative;height:430px;display:flex;justify-content:center;background:var(--paper-2)}
.hm-frame{width:100%;height:100%;border:0;background:#fff;transition:max-width .25s ease}
.hm-stage-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;text-align:center;padding:2rem;background:var(--paper-2);color:var(--slate);
}
.hm-stage-empty i{font-size:1.8rem;color:#C6C1E4}
.hm-stage-empty b{font:700 1rem 'Bricolage Grotesque',sans-serif;color:var(--ink-soft)}
.hm-stage-empty span{font-size:.85rem;line-height:1.5;max-width:40ch}

/* ---- name + publish ---- */
.hm-publish{
  margin-top:1rem;padding:1.2rem 1.25rem;
  background:linear-gradient(160deg,#fff 0%,var(--lilac) 155%);
  border:1px solid #E2DEF8;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.hm-name{display:flex;align-items:center;gap:.7rem}
.hm-name-l{font:700 .68rem 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);flex:none}
.hm-name input{
  flex:1;min-width:0;width:100%;
  font:600 1rem 'Space Mono',monospace;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:.75rem .85rem;transition:border-color .15s,box-shadow .15s;
}
.hm-name input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,75,232,.14)}
.hm-name-url{margin:.55rem 0 0;font:400 .8rem 'Inter',sans-serif;color:var(--slate)}
.hm-name-url b{font-family:'Space Mono',monospace;font-weight:700;color:var(--accent-deep);word-break:break-all}

/* Availability, the same way the editor checks a subdomain. Advisory only:
   it never disables the publish button, because the server resolves a
   collision with a suffix anyway. */
.hm-name-hint{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin-top:.4rem;font:500 .78rem 'Inter',sans-serif;color:var(--slate);
}
.hm-name-hint b{font-family:'Space Mono',monospace}
.hm-name-hint.is-ok{color:var(--ok-deep)}
.hm-name-hint.is-bad{color:#8E3625}
.hm-name-hint.is-wait{color:var(--slate);opacity:.75}
.hm-name-hint button{
  background:var(--white);border:1px solid #F2CDC5;border-radius:100px;cursor:pointer;
  padding:.24rem .6rem;font:500 .76rem 'Inter',sans-serif;color:#8E3625;
  transition:border-color .15s,background .15s,color .15s;
}
.hm-name-hint button:hover{border-color:var(--accent);background:var(--lilac);color:var(--accent-deep)}

/* ---- the wall, where the publish button would be ----
   Shown when the visitor already has a site on the internet. It is not an
   error state and it must not look like one: they have something working and
   they are about to have two. ---- */
.hm-wall{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.hm-wall-eyebrow{
  display:inline-flex;align-items:center;gap:.42rem;
  font:700 .66rem 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ok-deep);background:#EAF7F0;border-radius:100px;padding:.3rem .6rem;
}
.hm-wall-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:hmPulse 2.4s ease-out infinite}
.hm-wall-url{
  display:inline-flex;align-items:center;gap:.4rem;max-width:100%;
  font:700 .95rem 'Space Mono',monospace;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .15s,border-color .15s;
}
.hm-wall-url i{font-size:.78rem;opacity:.6;flex:none}
.hm-wall-url:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}
.hm-wall p{margin:.25rem 0 .3rem;font:400 .87rem/1.55 'Inter',sans-serif;color:var(--slate);max-width:56ch}
.hm-wall .hm-btn{width:100%;justify-content:center}
.hm-wall-fine{font:500 .78rem 'Inter',sans-serif;color:var(--slate);align-self:center}

.hm-go{width:100%;margin-top:1rem}
.hm-fine{display:flex;align-items:flex-start;justify-content:center;gap:.45rem;margin-top:.85rem;font:500 .8rem/1.5 'Inter',sans-serif;color:var(--slate);text-align:center}
.hm-fine i{color:var(--ok);margin-top:.15rem;flex:none}
.hm-fine b{color:var(--ink-soft)}

.hm-err{margin-top:.85rem;padding:.75rem .9rem;border-radius:12px;background:#FDF0ED;border:1px solid #F2CDC5;color:#8E3625;font:500 .84rem/1.5 'Inter',sans-serif}
.hm-err a{color:var(--accent-deep);font-weight:600;text-decoration:underline}

/* =========================================================================
   WHAT AN ACCOUNT ADDS

   Six things somebody can't do yet, in the order they actually run into them.

   Rebuilt as a proper panel rather than a tinted box with a button loose at
   the bottom. Three regions, each with its own surface: a white head, a grid
   of cards on paper, and a lilac footer band that runs edge to edge. The band
   is what makes the CTA read as the conclusion of the panel instead of an
   afterthought floating in whitespace.

   The grid is auto-fit, so it steps 3 to 2 to 1 as the column narrows. The old
   fixed three-column rule snapped straight from three to one at 760px, which
   wasted most of a tablet.
   ========================================================================= */
.hm-after{
  margin-top:2.2rem;padding:0;overflow:hidden;
  background:var(--white);
  border:1px solid #E2DEF8;border-radius:var(--r-lg);box-shadow:var(--shadow-md);
}
.hm-after-head{max-width:56ch;padding:1.5rem 1.4rem 0}
.hm-after-tag{
  display:inline-block;margin-bottom:.6rem;
  font:700 .66rem 'Space Mono',monospace;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-deep);background:var(--lilac);border:1px solid #DCD6F7;
  border-radius:100px;padding:.3rem .65rem;
}
.hm-after-head h2{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:800}
.hm-after-head p{margin-top:.5rem;font:400 .89rem/1.55 'Inter',sans-serif;color:var(--slate)}

.hm-after-grid{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(198px,1fr));
  gap:.7rem;margin:1.3rem 0 0;padding:0 1.4rem;
}
.hm-after-grid li{
  display:flex;flex-direction:column;gap:.22rem;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:.9rem .95rem;
}
/* The icon gets the same lilac tile as .hm-continue-ico and the brand mark.
   A bare glyph floating over text was the one place the panel stopped looking
   like the rest of the product. */
.hm-after-grid i{
  width:28px;height:28px;flex:none;margin-bottom:.4rem;
  border-radius:9px;display:grid;place-items:center;
  background:var(--lilac);color:var(--accent-deep);font-size:.9rem;
}
.hm-after-grid b{font:700 .88rem 'Inter',sans-serif;color:var(--ink)}
.hm-after-grid span{font:400 .79rem/1.45 'Inter',sans-serif;color:var(--slate)}

.hm-after-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:.9rem;flex-wrap:wrap;
  margin-top:1.4rem;padding:1.05rem 1.4rem;
  background:linear-gradient(135deg,var(--lilac) 0%,#F7F5FE 100%);
  border-top:1px solid #E2DEF8;
}
.hm-after-foot span{font:500 .79rem 'Inter',sans-serif;color:var(--slate)}

.hm-foot{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--slate)}
.hm-foot a:hover{color:var(--accent)}
.hm-foot a b{color:var(--accent)}
.hm-foot-link{background:none;border:0;cursor:pointer;font:inherit;color:inherit;padding:0}
.hm-foot-link:hover{color:var(--accent)}
.hm-foot-clear{margin-left:auto;background:none;border:0;cursor:pointer;font:500 .8rem 'Inter',sans-serif;color:var(--slate);border-bottom:1px solid transparent}
.hm-foot-clear:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* =========================================================================
   MODAL — the one moment worth interrupting for

   It had eight stacked blocks and no hierarchy, which is why it read as a
   wall. It is now: what happened, the link, ONE action, and the ask in a card
   of its own. Everything else is a text button.
   ========================================================================= */
.hm-overlay{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:1.25rem;background:rgba(21,24,35,.58);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow-y:auto;
}
.hm-modal{
  position:relative;width:100%;max-width:430px;background:var(--white);border-radius:22px;
  box-shadow:var(--shadow-lg);padding:1.6rem 1.5rem 1.4rem;text-align:left;
  animation:hmPop .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes hmPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.hm-modal-x{
  position:absolute;top:.9rem;right:.9rem;border:0;background:none;cursor:pointer;
  color:#B7B2C6;font-size:.95rem;padding:.3rem;border-radius:8px;line-height:1;
}
.hm-modal-x:hover{color:var(--ink);background:var(--paper-2)}

/* A live dot instead of a big tick in a circle. Says the same thing in a
   sixth of the space, and it's the same signal the address bar is showing. */
.hm-modal-eyebrow{
  display:inline-flex;align-items:center;gap:.42rem;
  font:700 .66rem 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ok-deep);background:#EAF7F0;border-radius:100px;padding:.3rem .6rem;
}
.hm-modal-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:hmPulse 2.4s ease-out infinite}
.hm-modal h2{margin-top:.75rem;font-size:1.45rem;font-weight:800}
.hm-modal>p{margin-top:.35rem;font-size:.88rem;line-height:1.55;color:var(--slate)}

/* ---- the link ---- */
.hm-url{
  display:flex;align-items:center;gap:.4rem;margin:1rem 0 0;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:.45rem .45rem .45rem .8rem;
}
.hm-url-t{
  flex:1;min-width:0;font:700 .85rem 'Space Mono',monospace;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hm-url-btn{
  flex:none;border:1px solid var(--line);background:var(--white);border-radius:9px;
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  color:var(--slate);font-size:.88rem;transition:color .15s,border-color .15s,background .15s;
}
.hm-url-btn:hover{color:var(--accent-deep);border-color:var(--accent);background:var(--lilac)}
.hm-url-btn.done{color:var(--ok);border-color:#BFE4D2;background:#F2FAF6}

/* ---- the one action ---- */
.hm-modal-go{width:100%;margin-top:.7rem}

/* ---- the ask, in a card of its own ---- */
.hm-claim{
  margin-top:1.1rem;padding:.9rem 1rem 1rem;
  background:linear-gradient(160deg,#fff 0%,var(--lilac) 170%);
  border:1px solid #E2DEF8;border-radius:16px;
}
.hm-claim-time{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#FFF6E6;border:1px solid #F3DFB8;border-radius:100px;padding:.28rem .65rem;
  font:600 .74rem 'Inter',sans-serif;color:#6E4200;
}
.hm-claim-time i{color:var(--warn);font-size:.8rem}
.hm-claim p{margin:.55rem 0 .8rem;font:400 .82rem/1.5 'Inter',sans-serif;color:var(--slate)}
.hm-claim .hm-btn{width:100%}
.hm-btn-claim{
  background:var(--white);color:var(--accent-deep);border-color:#CFC8F3;
  font-size:.88rem;padding:.7rem 1.1rem;
}
.hm-btn-claim:hover{background:var(--accent);color:#fff;border-color:transparent;transform:translateY(-1px)}
/* The address claiming would give them. Monospace, because it is a thing you
   type, and it should look identical everywhere it is promised. */
.hm-addr-new{font-family:'Space Mono',monospace;font-weight:700;color:var(--accent-deep);word-break:break-all}
.hm-claim-fine{display:block;margin-top:.55rem;text-align:center;font:500 .72rem 'Inter',sans-serif;color:var(--slate)}

/* the version where the ask leads: it gets the room and the emphasis */
.hm-claim-lead{padding:1.1rem 1.1rem 1.2rem}
.hm-claim-lead p{font-size:.86rem}

.hm-modal-acts{display:flex;gap:.5rem;margin-top:.85rem}
.hm-modal-acts .hm-btn{flex:1 1 0;min-width:0;font-size:.85rem;padding:.65rem .8rem}

/* Buttons in the modal are allowed to wrap. .hm-btn is nowrap everywhere else
   because a nav button that wraps looks broken, but a 320px phone with a
   two-word label and an icon has nowhere else to put the text, and an
   overflowing pill looks far worse than a two-line one. */
.hm-modal .hm-btn{white-space:normal;line-height:1.25;text-align:center}
.hm-modal-note{margin-top:.85rem;font:400 .77rem/1.5 'Inter',sans-serif;color:var(--slate)}
.hm-modal-quiet{
  display:block;width:100%;margin-top:.9rem;background:none;border:0;cursor:pointer;
  font:500 .8rem 'Inter',sans-serif;color:var(--slate);padding:.3rem;
}
.hm-modal-quiet:hover{color:var(--ink)}

/* =========================================================================
   TOAST — same component as the editor and /projects
   ========================================================================= */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:.85rem 1.3rem;border-radius:12px;
  font-size:.9rem;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:600;display:flex;align-items:center;gap:.6rem;
  max-width:calc(100vw - 32px);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--err)}

/* =========================================================================
   prompt.css CORRECTIONS — the same block start.css carries
   ========================================================================= */
.pb-colour{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .6rem}
.pb-sw{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.pb-sw button{align-self:center}
.pb-custom{display:inline-flex;align-items:center;gap:.4rem;align-self:center}

.pb-sw .hm-clr-auto{
  width:auto;min-width:0;height:34px;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:.38rem;padding:0 .8rem;margin-right:.15rem;
  border:1.5px solid #E1DDF6;border-radius:999px;background:#fff;
  color:#4A4570;font:600 .82rem/1 'Inter',system-ui,sans-serif;
  white-space:nowrap;cursor:pointer;
  transition:transform .12s ease,border-color .18s ease,color .18s ease;
}
.pb-sw .hm-clr-auto:hover{border-color:#C6BCF3;color:#2A2550;transform:translateY(-1px)}
.pb-sw .hm-clr-auto .hm-clr-spark{
  font-size:.92em;line-height:1;color:var(--accent);
  background:linear-gradient(120deg,#5B4BE8,#9333EA 55%,#0EA5A4);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.pb-sw .hm-clr-auto.active{
  border-color:transparent;color:#fff;
  background:linear-gradient(120deg,#5B4BE8,#7A3FE4 55%,#0EA5A4);
  box-shadow:0 2px 10px rgba(91,75,232,.35);
}
.pb-sw .hm-clr-auto.active .hm-clr-spark{color:#fff;background:none;-webkit-text-fill-color:#fff}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:1000px){
  /* The address chip is the first thing to go. It reappears under the name
     field in step 5, where it is doing real work rather than promising. */
  .hm-addr,.hm-addr.is-named,.hm-addr.is-live{display:none}
  .hm-steps{margin:0 0 0 auto}
}
@media(max-width:760px){
  /* Sides only. A shorthand here is what flattened the resume card's vertical
     padding on every phone. */
  :root{--pad-x:1rem}
  .hm-bar-inner{gap:.75rem}
  /* Labels off, dots on. Five words don't fit; five dots still tell you
     exactly where you are. */
  .hm-steps{gap:.5rem}
  .hm-steps li{gap:0;font-size:0}
  .hm-signin{font-size:.8rem}
  .hm-top{padding:1.4rem 0 .2rem}
  .hm-stage-body{height:340px}

  .hm-after{margin-top:1.7rem}
  .hm-after-head{padding:1.15rem 1rem 0}
  .hm-after-grid{grid-template-columns:1fr;gap:.5rem;margin-top:1rem;padding:0 1rem}
  .hm-after-grid li{
    /* One column of six stacked cards is a tall wall of nothing. On a phone
       the icon moves beside the title and the card becomes a row. */
    display:grid;grid-template-columns:28px 1fr;column-gap:.7rem;row-gap:.1rem;
    padding:.75rem .8rem;
  }
  .hm-after-grid i{grid-row:1/3;align-self:start;margin-bottom:0}
  .hm-after-foot{margin-top:1.1rem;padding:.95rem 1rem;flex-direction:column;align-items:stretch;text-align:center}
  .hm-after-foot .hm-btn{width:100%;justify-content:center}

  .hm-rail-l{display:none}
  .hm-name{flex-direction:column;align-items:stretch;gap:.4rem}
  .hm-name-l{font-size:.64rem}

  /* The card stacks properly: status on its own line, the URL at full width
     because it is the thing they came back for, then the actions as a real
     two-column grid with the claim spanning the row. Three pills sharing one
     flex row at 340px gave every button about 90px and clipped the labels. */
  .hm-resume .hm-resume-inner{
    flex-direction:column;align-items:stretch;gap:.6rem;
    padding-top:.85rem;padding-bottom:.6rem;
  }
  .hm-resume-main{flex-direction:column;align-items:flex-start;gap:.35rem}
  .hm-resume-name{display:none}
  .hm-resume-url{font-size:.88rem;max-width:100%}
  /* One column. Every button is full width, the same width as the claim.
     Two-up looked tidier in a mockup and worse in a hand: it gave Open and
     Edit about 90px each with an icon inside, which is a squeeze at the exact
     moment somebody is one-thumbed and half-interested. Three stacked pills
     read as three offers rather than one offer and two footnotes, and the
     claim keeps the emphasis by being filled rather than by being wider.
     44px is the Apple/Android minimum touch target; nothing here goes under. */
  .hm-resume-acts{
    width:100%;display:flex;flex-direction:column;align-items:stretch;gap:.4rem;
  }
  .hm-resume-acts .hm-btn{
    width:100%;min-width:0;min-height:44px;justify-content:center;
    padding:.6rem .8rem;font-size:.88rem;gap:.45rem;
  }
  .hm-resume-acts .hm-btn i{flex:none}
  /* Ordered by what they came back to do, not by markup order: open it, keep
     it, change it. `order` costs nothing and beats duplicating the template. */
  .hm-resume-acts .hm-btn-primary{order:2;min-height:48px;font-size:.92rem}
  .hm-resume-acts .hm-btn-ghost{order:1}
  .hm-resume-acts .hm-btn-ghost + .hm-btn-ghost{order:3}
  .hm-resume .hm-resume-foot{padding-bottom:.9rem;font-size:.78rem}

  .hm-continue{padding:.7rem .8rem}
  .hm-continue .hm-btn{width:100%;justify-content:center}
}
@media(max-width:400px){
  /* Full-width buttons have room to spare at this size, so nothing shrinks
     except the supporting text. */
  .hm-resume-acts .hm-btn{font-size:.85rem}
  .hm-resume .hm-resume-foot{font-size:.75rem;line-height:1.45}
}
@media(max-width:520px){
  .hm-publish{padding:1rem}

  .hm-modal{padding:1.3rem 1rem 1.15rem;border-radius:18px}
  .hm-modal h2{font-size:1.3rem}
  .hm-modal-acts{flex-direction:column}
  .hm-modal-acts .hm-btn{width:100%}
  .hm-claim{padding:.85rem .85rem .95rem}
  .hm-url{padding-left:.65rem}
  .hm-url-t{font-size:.79rem}
  .hm-btn-lg{padding:.9rem 1.1rem;font-size:.95rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hm-rail-track{animation:none}
  .hm-resume-status .dot,.hm-addr.is-live .hm-addr-state::before{animation:none}
  .hm-modal,.hm-resume.is-fresh{animation:none}
  .hm-btn,.hm-chip,.hm-frame{transition:none}
  .hm-btn:hover,.hm-chip:hover{transform:none}
}