/* siteseconds.com — 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:'Inter',system-ui,sans-serif;letter-spacing:-.028em;line-height:1.08}
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 .wordmark{display:inline-block;white-space:nowrap}
.hm-brand .mark{
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  background:var(--brand-tile);color:#fff;box-shadow:var(--brand-tile-shadow);
}

/* 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(--accent);cursor:pointer;
  padding:.45rem .9rem;border-radius:100px;
  color: var(--white);
  font:600 .82rem/1 'Inter',sans-serif;
  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. */
/* The truncation lives on .hm-resume-url-t, not here. `text-overflow:ellipsis`
   does nothing to a bare text run inside a flex container — the anonymous flex
   item holding the address took its full nowrap width and pushed the page
   sideways on a phone (91px of horizontal scroll at 375px). The text needs to
   be a real element with min-width:0 before it can be told to shrink. */
.hm-resume-url{
  display:inline-flex;align-items:center;gap:.4rem;min-width:0;max-width:100%;
  font:700 .92rem 'Space Mono',monospace;color:var(--ok-deep);
  border-bottom:1px solid rgba(31,107,71,.3);padding-bottom:1px;
  overflow:hidden;white-space:nowrap;
  transition:color .15s,border-color .15s;
}
.hm-resume-url-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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.35rem 0 .2rem}
.hm-top h1{font-size:clamp(1.55rem,3.1vw,2.15rem);font-weight:800;max-width:26ch;line-height:1.12}
/* 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)}

/* TWO SLIM BARS. Each is one line at desktop widths and wraps to two on a
   phone. They are rows of facts, not cards: no borders, no boxes, nothing
   that competes with the brief box for attention — the eye should read them
   in passing on its way down. */
/* NOT .hm-bar — that is the site header, on this page and on every
   use-case page. These are the hero's two fact rows. */
.hm-facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.05rem;
  margin:.75rem 0 0;padding:0;
  font:500 .84rem/1.5 'Inter',system-ui,sans-serif;color:var(--slate);
}
.hm-facts>span{display:inline-flex;align-items:center;gap:.38rem}
.hm-facts b{color:var(--ink);font-weight:700}
.hm-facts i{color:var(--accent);font-size:.88rem}
/* The AI row sits a touch tighter under the first and carries the logos. */
.hm-facts-ai{gap:.3rem .5rem}
.hm-facts-lead{color:var(--slate);margin-right:.15rem}
.hm-ai{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.2rem .5rem;border-radius:100px;
  background:var(--white);border:1px solid var(--line);
  font:600 .8rem/1.4 'Inter',system-ui,sans-serif;color:var(--ink);
}
/* The real marks (static/brand/ai/), at full strength: these are brand
   colours, and dimming them just makes them look misprinted. */
.hm-ai img{width:16px;height:16px;display:block;flex:none;object-fit:contain}


@media(max-width:560px){
  .hm-facts{font-size:.78rem;gap:.25rem .8rem;margin-top:.6rem}
  .hm-facts-ai{gap:.28rem .4rem;margin-top:.4rem}
  .hm-ai{font-size:.75rem;padding:.16rem .42rem}
  .hm-ai img{width:13px;height:13px}
}

/* The brief-box pulse and the big copy button (.pb-copy-big) are shared
   components now — defined once in prompt.css so the homepage, /start and
   the editor's builder all breathe the same way. */

/* =========================================================================
   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}
/* The page tabs. They only exist when there is more than one page, and when
   they do exist they are the proof: three tabs across the top of the preview
   is what turns "the AI made me a page" into "I have a site". */
.hm-stage-pages{display:inline-flex;align-items:center;gap:.2rem;min-width:0;overflow-x:auto;scrollbar-width:none}
.hm-stage-pages::-webkit-scrollbar{display:none}
.hm-stage-pages button{
  flex:none;border:1px solid transparent;background:none;cursor:pointer;
  font:600 .74rem 'Inter',sans-serif;color:var(--slate);
  padding:.3rem .62rem;border-radius:100px;line-height:1.3;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.hm-stage-pages button:hover{background:var(--white);color:var(--ink)}
.hm-stage-pages button.on{background:var(--lilac);border-color:#DCD6FA;color:var(--accent-deep)}
/* When the tabs are there the address is the thing that gives, not them. */
.hm-stage-bar:has(.hm-stage-pages:not([hidden])) .hm-stage-label{flex:0 1 auto;max-width:42%}
.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 'Inter',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{display:inline-block;font-family:'Space Mono',monospace;font-weight:700;color:var(--accent-deep);overflow-wrap:anywhere}

/* 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}
/* The only button here whose label is a sentence, and the only one that has to
   survive 320px at full width. .hm-btn's nowrap is right everywhere else. */
.hm-go{white-space:normal;line-height:1.25;text-align:center}
/* Not a flex container. A flex parent makes a separate item of every child,
   bare text nodes included — so this one sentence was three boxes either side
   of <b>claim it free</b>, each wrapping on its own. It fit one line on a
   desktop, which is why it went unseen; on a phone it came out as
   "No account. No card.  claim  to keep it / Live for 48 hours —  it free
   forever." That is the sentence that says why claiming is worth doing, sitting
   directly under the publish button, scrambled. */
.hm-fine{display:block;margin-top:.85rem;font:500 .8rem/1.5 'Inter',sans-serif;color:var(--slate);text-align:center}
.hm-fine i{color:var(--ok);margin-right:.35rem;vertical-align:-.05em}
.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)}

/* The row of landing pages above the footer: quiet, but real links. */
.hm-foot-cases{display:flex;align-items:center;gap:.35rem .5rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--slate)}
.hm-foot-cases-l{font-weight:600;color:var(--ink);margin-right:.2rem}
.hm-foot-cases a{color:var(--slate);text-decoration:none;padding:.25rem .55rem;border:1px solid var(--line);border-radius:100px;background:#fff;transition:color .15s,border-color .15s}
.hm-foot-cases a:hover{color:var(--accent);border-color:var(--accent)}
.hm-foot{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem;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 / .hm-modal / .hm-modal-x / .hm-modal-eyebrow / .hm-modal-wide /
   .hm-flow-step (the numbered 2-step layout) / #hmModalDropSlot .pb-drop /
   the hmPop and hmDotPulse keyframes all live in prompt.css now — shared
   with start.css instead of drifting as two copies. Everything below is
   specific to the publish-success modal, which only exists here. */

/* The seconds on the eyebrow: the one number this product is named after. */
.hm-modal-eyebrow .hm-took{font-family:'Space Mono',monospace;font-weight:700;color:var(--accent-deep)}

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

/* =========================================================================
   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-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;
  }
  /* width:100% rather than relying on the parent's align-items:stretch. A
     stretched flex item still refuses to go below its own max-content width,
     so the address sized the column instead of the column sizing the address,
     and .hm-resume-url's max-width:100% had nothing definite to resolve
     against. An explicit width is what lets the ellipsis actually fire. */
  .hm-resume-main{flex-direction:column;align-items:flex-start;gap:.35rem;width:100%}
  .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-resume-status .dot,.hm-addr.is-live .hm-addr-state::before{animation:none}
  .hm-modal,.hm-resume.is-fresh{animation:none}
  .hm-btn,.hm-frame{transition:none}
  .hm-btn:hover{transform:none}
}
/* =========================================================================
   WHY THIS AND NOT A TEMPLATE BUILDER — four facts under the builder.
   Same tile language as .hm-after-grid (lilac icon tile, bold, one line),
   so the two sections read as one page. Quiet heading: this is for the
   people who scrolled past the box, not a hero.
   ========================================================================= */
.hm-why{ margin:2.4rem 0 .5rem; }
.hm-why h2{
  margin:0 0 .9rem;
  font:600 .84rem 'Inter',system-ui,sans-serif; color:var(--slate);
  letter-spacing:.01em;
}
.hm-why-grid{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.7rem;margin:0;padding:0;
}
.hm-why-grid li{
  display:flex;flex-direction:column;gap:.25rem;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:.95rem 1rem;box-shadow:var(--shadow-sm);
}
.hm-why-grid i{
  width:30px;height:30px;flex:none;margin-bottom:.45rem;
  border-radius:9px;display:grid;place-items:center;
  background:var(--lilac);color:var(--accent-deep);font-size:.95rem;
}
.hm-why-grid b{font:700 .9rem 'Inter',sans-serif;color:var(--ink);letter-spacing:-.01em}
.hm-why-grid span{font:400 .8rem/1.5 'Inter',sans-serif;color:var(--slate)}
.hm-why-grid span em{font-style:normal;color:var(--ink-soft);font-weight:600}

/* THE MARK (templates/_mark.html) is an inline SVG, not an icon font, so it
   takes its size from the tile rather than from font-size. 58% leaves the
   ring clear of the tile's corners at every size we draw it. */
/* ===========================================================================
   THE BRAND TILE AND THE MARK
   ---------------------------------------------------------------------------
   `.mark` is the rounded tile, `.mark-glyph` the bolt inside it
   (templates/_mark.html). Only the SIZE belongs to each context — a 30px
   header tile, a 36px sidebar one; everything that makes it the logo lives
   here, so the mark is the same object at every size on every page.

   The radius is a percentage, not pixels, because the artwork's corner is
   56 of 256 and that ratio has to survive a 30px tile as well as a 512px
   PNG. The gradient is the artwork's: violet at the top-left corner,
   indigo through the middle, blue at the bottom-right.

   The glyph is 100% of the tile and does its own sizing inside the viewBox,
   again so the proportions come from the artwork rather than from a
   percentage somebody guessed here.

   This block is repeated verbatim in editor.css, home.css, index.css,
   privacy.css, shell.css and terms.css, because those six stylesheets are
   standalone — no shared import to hang it on. Change one, change all six.
   =========================================================================== */
.mark{
  --brand-tile:linear-gradient(141deg,#8B5CF6 0%,#6366F1 50%,#3B82F6 100%);
  --brand-tile-shadow:0 5px 14px -7px rgba(79,70,229,.75);
  border-radius:22%;
}
.mark-glyph{width:100%;height:100%;display:block}

/* WHAT ACTUALLY WENT LIVE.
   Drawn only when the build came back as a site rather than a page. Three
   addresses that open is the difference between "I made a page" and "I made
   a website", and this is the thirty seconds in which somebody decides which
   of those they are holding. */
.hm-pages{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  margin:.7rem 0 0;padding:.6rem .7rem;
  background:var(--paper-2,#F6F5FC);border:1px solid var(--line);border-radius:12px;
}
.hm-pages-l{
  display:inline-flex;align-items:center;gap:.35rem;margin-right:.15rem;
  font:700 .72rem 'Inter',sans-serif;color:var(--accent-deep,#3B2FB0);white-space:nowrap;
}
.hm-page{
  display:inline-flex;align-items:center;gap:.25rem;
  background:var(--white,#fff);border:1px solid var(--line);border-radius:100px;
  padding:.24rem .6rem;text-decoration:none;
  font:600 .76rem 'Inter',sans-serif;color:var(--ink);
  transition:border-color .15s,color .15s,transform .12s;
}
.hm-page i{font-size:.7rem;opacity:.5}
.hm-page:hover{border-color:var(--accent,#5B4BE8);color:var(--accent-deep,#3B2FB0);transform:translateY(-1px)}
.hm-page:hover i{opacity:1}
/* The two buttons under the address sit on one row on a laptop and stack on
   a phone, where a half-width primary button is a missed tap. */
.hm-modal-acts-lead{display:flex;gap:.5rem;align-items:stretch;margin-top:.9rem}
.hm-modal-acts-lead .hm-modal-go{flex:1;margin-top:0}
@media (max-width:560px){ .hm-modal-acts-lead{flex-direction:column} }