:root{--bg:#f5f8fa;--card:#ffffff;--ink:#0d1f38;--muted:#566579;--faint:#9aa7b6;--hair:#e7ecf1;
    --brand:#6d28d9;--brand-deep:#5b21b6;--brand-wash:#f6f4fb;--purple:#7c3aed;--purple-deep:#6d28d9;--purple-wash:#f2ecfe;
    --lime:#c8f24a;--green:#16a34a;--red:#dc2626;--navy:#0f2038;--shadow:0 1px 2px rgba(13,31,56,.04),0 24px 60px -30px rgba(13,31,56,.35)}
  @media (prefers-color-scheme:dark){:root{--bg:#070e18;--card:#101b2a;--ink:#eef3f9;--muted:#9db0c6;--faint:#5d6f84;--hair:#1b2939;
    --brand:#a78bfa;--brand-deep:#c4b5fd;--brand-wash:#1d1636;--purple:#a78bfa;--purple-deep:#c4b5fd;--purple-wash:#1d1636;--lime:#bef264;--green:#22c55e;--red:#f87171;--navy:#0b1524;--shadow:0 1px 2px rgba(0,0,0,.4),0 24px 60px -30px rgba(0,0,0,.8)}}
  :root[data-theme="light"]{--bg:#f5f8fa;--card:#fff;--ink:#0d1f38;--muted:#566579;--faint:#9aa7b6;--hair:#e7ecf1;--brand:#6d28d9;--brand-deep:#5b21b6;--brand-wash:#f6f4fb;--purple:#7c3aed;--purple-deep:#6d28d9;--purple-wash:#f2ecfe;--lime:#c8f24a;--green:#16a34a;--red:#dc2626;--navy:#0f2038;--shadow:0 1px 2px rgba(13,31,56,.04),0 24px 60px -30px rgba(13,31,56,.35)}
  :root[data-theme="dark"]{--bg:#070e18;--card:#101b2a;--ink:#eef3f9;--muted:#9db0c6;--faint:#5d6f84;--hair:#1b2939;--brand:#a78bfa;--brand-deep:#c4b5fd;--brand-wash:#1d1636;--purple:#a78bfa;--purple-deep:#c4b5fd;--purple-wash:#1d1636;--lime:#bef264;--green:#22c55e;--red:#f87171;--navy:#0b1524;--shadow:0 1px 2px rgba(0,0,0,.4),0 24px 60px -30px rgba(0,0,0,.8)}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;line-height:1.5}
  h1,h2{margin:0;letter-spacing:-.03em;font-weight:600}

  /* top bar */
  .top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
  .brand{display:flex;align-items:center;gap:9px}.brand b{font-size:18px;font-weight:600;letter-spacing:-.03em}
  .topr{display:flex;align-items:center;gap:8px}
  .csel{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--muted);border:1px solid var(--hair);border-radius:999px;padding:6px 12px;background:var(--card);cursor:pointer}
  .csel select{border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;outline:none}
  .tt{width:34px;height:34px;border-radius:9px;border:1px solid var(--hair);background:var(--card);color:var(--muted);cursor:pointer;display:grid;place-items:center}

  /* progress */
  .prog{max-width:520px;margin:22px auto 0;padding:0 22px;display:flex;gap:6px}
  .prog .seg{height:5px;border-radius:5px;background:var(--hair);flex:1;overflow:hidden}
  .prog .seg i{display:block;height:100%;width:0;background:var(--brand);border-radius:5px;transition:width .4s}
  .prog .seg.done i{width:100%}.prog .seg.cur i{width:100%}

  /* card */
  .stage{max-width:560px;margin:30px auto 70px;padding:0 22px}
  .card{background:var(--card);border:1px solid var(--hair);border-radius:24px;box-shadow:var(--shadow);padding:44px 40px}
  @media(max-width:560px){.card{padding:32px 22px}}
  .eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-deep)}
  .card h1{font-size:clamp(27px,5vw,36px);margin-top:12px;line-height:1.1}
  .sub{color:var(--muted);font-size:16.5px;margin-top:13px;line-height:1.5}

  /* first-screen perks: two columns at every width, including phones — six ticks stacked in one
     column push the name fields off a small screen, and the form is the point of the page. */
  .perks{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 14px}
  .perks li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.35;color:var(--ink)}
  .perks svg{flex:none;margin-top:2px;color:var(--green)}
  .perknote{font-size:13px;color:var(--muted);margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);line-height:1.45}
  /* Terms/privacy consent under the sign-up actions (partials/legal-consent.blade.php) */
  .legalnote{font-size:12.5px;color:var(--faint);text-align:center;margin:16px 0 0;line-height:1.5}
  .legalnote a{color:var(--muted);font-weight:600;text-decoration:underline}
  .legalnote a:hover{color:var(--brand-deep)}
  @media(max-width:400px){.perks{gap:8px 10px}.perks li{font-size:12.5px}}

  .field{margin-top:26px}
  .field label{display:block;font-size:15.5px;font-weight:600;margin-bottom:10px}
  .in{width:100%;border:1.5px solid var(--hair);border-radius:14px;padding:17px 17px;font:inherit;font-size:17px;background:var(--card);color:var(--ink);outline:none}
  .in:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
  .in::placeholder{color:var(--faint);font-weight:400;font-size:14px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .hint{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.45}
  /* "(optional)" beside a label. Lighter and smaller than the label so it reads as permission to skip
     rather than part of the question — the whole value of an optional field is that it does not look
     like one more thing standing between them and their page. */
  .field label .opt{font-weight:500;font-size:13.5px;color:var(--muted)}
  textarea.in{resize:vertical;min-height:120px;line-height:1.5}
  .prefix{display:flex;align-items:stretch;border:1.5px solid var(--hair);border-radius:12px;overflow:hidden}
  .prefix:focus-within{border-color:var(--brand)}
  .prefix{border-radius:14px}
  .prefix .p{display:flex;align-items:center;padding:0 15px;background:var(--bg);color:var(--muted);font-weight:600;font-size:16.5px}
  .prefix .in{border:0;border-radius:0}
  .suffix .p{border-left:1px solid var(--hair);border-right:0}

  /* offerings */
  .item{display:grid;grid-template-columns:1fr 128px 34px;gap:9px;margin-top:10px;align-items:center}
  .item .del{width:34px;height:34px;border-radius:9px;border:1px solid var(--hair);background:var(--card);color:var(--faint);cursor:pointer;display:grid;place-items:center}
  .item .del:hover{color:var(--red);border-color:var(--red)}
  .additem{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--brand-deep);background:none;border:0;cursor:pointer;padding:6px 0}
  .cap{font-size:13px;color:var(--muted);margin-top:10px}
  /* offering cards */
  .oitem{border:1px solid var(--hair);border-radius:14px;padding:12px 12px 13px;margin-top:12px;background:var(--card)}
  .oitem .oname{display:flex;gap:9px;align-items:center}
  .oitem .oname .del{width:44px;height:44px;border-radius:9px;border:1px solid var(--hair);background:var(--card);color:var(--faint);cursor:pointer;display:grid;place-items:center;flex:none}
  .oitem .oname .del:hover{color:var(--red);border-color:var(--red)}
  .modes{display:flex;gap:6px;margin-top:10px}
  .mode{flex:1;text-align:center;border:1.5px solid var(--hair);border-radius:9px;padding:8px 4px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--muted);background:var(--card)}
  .mode.on{border-color:var(--brand);background:var(--brand-wash);color:var(--brand-deep)}
  .oprice{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
  .oprice .enq{grid-column:1/3;font-size:13px;color:var(--muted);background:var(--bg);border-radius:10px;padding:12px 13px;text-align:center}
  /* brand step */
  .drop{display:flex;align-items:center;justify-content:center;gap:13px;border:2px dashed var(--hair);border-radius:16px;min-height:112px;cursor:pointer;text-align:center;padding:16px;background:var(--card)}
  .drop:hover{border-color:var(--brand);background:var(--brand-wash)}
  .drop.has{border-style:solid;background:var(--card)}
  .dropi{width:46px;height:46px;border-radius:12px;background:var(--brand-wash);color:var(--brand-deep);display:grid;place-items:center;flex:none}
  .dropt{font-size:14.5px;color:var(--muted)}.dropt b{color:var(--ink)}.dropt small{color:var(--faint)}
  .logoimg{max-height:84px;max-width:80%;object-fit:contain}
  .hidden-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
  .dropzone{border:2px dashed var(--brand);border-radius:16px;background:var(--brand-wash);padding:24px 18px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;outline:none}
  .dropzone:hover,.dropzone:focus-visible{border-color:var(--brand-deep);background:var(--brand-wash)}
  .dropzone.drag{border-color:var(--brand);background:var(--brand-wash)}
  .dz-empty{display:flex;flex-direction:column;align-items:center;gap:7px}
  .dz-empty>svg{color:var(--brand-deep)}
  .dz-title{font-size:15px;font-weight:600;color:var(--ink)}
  .dz-sub{font-size:12.5px;color:var(--faint)}
  .dz-preview{display:flex;flex-direction:column;align-items:center;gap:11px}
  .dz-preview img{max-height:96px;max-width:72%;object-fit:contain;border-radius:10px}
  .dz-remove{font-size:13px;font-weight:600;color:var(--red);background:none;border:0;cursor:pointer;padding:4px 8px}
  .colors{display:flex;align-items:center;gap:16px}
  .cswatch{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
  .cswatch input[type=color]{width:60px;height:50px;border:1px solid var(--hair);border-radius:12px;background:none;cursor:pointer;padding:3px}
  .cprev{margin-left:auto;width:56px;height:50px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:19px;background:var(--cp);color:#fff;border:3px solid var(--cs)}
  .cgroup{display:flex;flex-direction:column;align-items:center;gap:6px}
  .cgroup input[type=color]{width:60px;height:50px;border:1px solid var(--hair);border-radius:12px;background:none;cursor:pointer;padding:3px}
  .hexin{width:80px;text-align:center;font-size:12.5px;border:1px solid var(--hair);border-radius:8px;padding:6px;background:var(--card);color:var(--ink);outline:none}
  .cgroup>span{font-size:13px;color:var(--muted)}
  .nologonote{display:flex;gap:9px;align-items:flex-start;background:var(--bg);border-radius:12px;padding:13px 14px;font-size:13.5px;color:var(--muted);line-height:1.45}
  .nologonote svg{flex:none;margin-top:1px;color:var(--brand-deep)}
  .itemlabel{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
  .oitem{margin-top:16px}
  .banner{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:13px 15px;font-size:13.5px;margin-top:18px;line-height:1.45;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
  .banner svg{flex:none;margin-top:1px}
  @media(prefers-color-scheme:dark){.banner{background:#12233f;border-color:#1e3a5f;color:#93c5fd}}
  :root[data-theme="light"] .banner{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
  :root[data-theme="dark"] .banner{background:#12233f;border-color:#1e3a5f;color:#93c5fd}

  /* category chips */
  .cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .cat{border:1.5px solid var(--hair);border-radius:999px;padding:9px 15px;font-size:14px;cursor:pointer;background:var(--card);color:var(--ink)}
  .cat.on{border-color:var(--brand);background:var(--brand-wash);color:var(--brand-deep);font-weight:600}

  /* buttons */
  .actions{margin-top:32px;display:flex;flex-direction:column;gap:11px}
  .btn{display:flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;padding:18px;font-size:17px;font-weight:600;cursor:pointer;border:1px solid transparent;width:100%;text-decoration:none}
  .btn.primary{background:#6d28d9;color:#c8f24a}.btn.primary:hover{filter:brightness(1.05)}
  .btn.lime{background:var(--lime);color:#2a1259}.btn.lime:hover{filter:brightness(1.04)}
  /* --hair is a HAIRLINE for long edges; on a button outline it is invisible, which made every ghost
   button read as bare text rather than a control. Same fault the OR rules had. 1.5px of color-mix keeps
   it clearly secondary to the solid primary above it while still being a button you can see, and works
   in both themes rather than hardcoding a grey that inverts wrongly in dark mode. */
.btn.ghost{background:none;border:1.5px solid color-mix(in srgb,var(--muted) 55%,transparent);color:var(--ink)}
.btn.ghost:hover{border-color:var(--muted)}
  .btn.link{background:none;border:0;color:var(--muted);font-weight:500;padding:8px}
  /* WEIGHT, not colour. This button had a 1.5px 55%-muted border above a solid purple one, so it read as
   an outline round some text rather than a control -- roughly 1 in 6 of the people who saw it pressed it,
   while every merchant who does skips the code screen that stranded 17 people today.
   A 2px ink border and a real shadow give it the presence of a button. It stays WHITE on purpose: the
   white-and-grey Google button is the shape people recognise across every site they have ever signed
   into, and painting it in our brand colours would trade that recognition for prominence -- and would
   put two heavy purple buttons on one screen with no hierarchy between them. */
.btn.google{background:var(--card);border:2px solid var(--ink);color:var(--ink);
  box-shadow:0 2px 0 rgba(17,37,63,.14)}
  .btn.google:hover{border-color:var(--ink);background:var(--bg)}
  .divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12.5px;margin:16px 0}
  /* The fork variant. The plain divider reads as a caption introducing the form beneath it; this one has
     to read as a choice between two things of equal standing, so the word is larger, darker and sits on
     the line rather than floating in it. */
  /* Short rules, not a full-bleed one. Stretched edge to edge it reads as a SECTION BREAK -- Google up
     there, the real form down here -- which is the exact impression the fork exists to remove. Held to a
     narrow span the word sits BETWEEN two buttons instead of dividing the screen, which is what "or"
     actually means here. */
  /* More air ABOVE than below: the gap between the Google button and the word is what separates the two
     choices, while the form beneath is the thing OR introduces, so an even margin made the word drift
     toward the fields it belongs above. */
  .divider.orfork{margin:30px 0 18px;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.06em;
    justify-content:center;gap:14px}
  /* --hair is a HAIRLINE, meant for long edges: 46px of #e7ecf1 on a white card is invisible, so
     shortening the rules quietly deleted them. The fork needs a line you can actually see at that
     length, and color-mix off --muted keeps it correct in both themes rather than hardcoding a grey
     that inverts wrongly in dark mode. */
  /* Full width, matching the buttons above and below rather than a 46px tick either side. Shortening
     them was meant to stop the rule reading as a section break, but the fix for that was the spacing --
     lines that stop short of the buttons just look like the divider failed to draw. Darker too: at 45%
     of --muted they were legible only if you already knew they were there. */
  .divider.orfork::before,.divider.orfork::after{flex:1;height:1px;
    background:color-mix(in srgb,var(--muted) 70%,transparent)}
  .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--hair)}

  /* code inputs */
  .code{display:flex;gap:9px;justify-content:center;margin-top:20px}
  .code input{width:48px;height:58px;text-align:center;font-size:24px;font-weight:600;border:1.5px solid var(--hair);border-radius:12px;background:var(--card);color:var(--ink);outline:none}
  .code input:focus{border-color:var(--brand)}
  .sentto{text-align:center;font-size:14px;color:var(--muted);margin-top:16px}.sentto b{color:var(--ink)}

  /* building / live */
  .center{text-align:center}
  .spinner{width:56px;height:56px;border-radius:50%;border:5px solid var(--hair);border-top-color:var(--brand);margin:6px auto 0;animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .buildsteps{margin:22px auto 0;max-width:280px;text-align:left;display:flex;flex-direction:column;gap:11px}
  .bs{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--faint)}
  .bs.done{color:var(--ink)}.bs .bd{width:22px;height:22px;border-radius:50%;border:2px solid var(--hair);flex:none;display:grid;place-items:center}
  .bs.done .bd{background:var(--green);border-color:var(--green);color:#fff}
  .livebadge{width:70px;height:70px;border-radius:50%;background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);display:grid;place-items:center;margin:0 auto 4px}
  .phone{width:210px;margin:20px auto 0;background:#0d1f38;border-radius:30px;padding:8px;box-shadow:var(--shadow)}
  .phone .pill{width:64px;height:4px;background:rgba(255,255,255,.4);border-radius:5px;margin:2px auto 6px}
  .phone .scr{background:var(--card);border-radius:23px;overflow:hidden}
  .pnav{font-size:9px;color:var(--muted);text-align:center;padding:6px;border-bottom:1px solid var(--hair);background:var(--bg)}
  .phero{background:linear-gradient(135deg,#ffd27a,#3ad6ad);padding:14px;min-height:64px;display:flex;flex-direction:column;justify-content:flex-end;color:#08201a}
  .phero h5{font-size:14px;font-weight:700}
  .pbody{padding:9px 11px}.prow{display:flex;justify-content:space-between;font-size:10px;padding:5px 0;border-bottom:1px solid var(--hair)}.prow b{font-weight:600}
  .pbuy{margin-top:8px;background:var(--purple);color:#fff;text-align:center;border-radius:7px;padding:7px;font-weight:600;font-size:10px}

  .hide{display:none}
  .stepwrap{animation:fade .35s ease}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* v2 onboarding — server-render utilities */
form{margin:0}
.err{color:var(--red);font-size:13px;margin-top:8px;font-weight:500}

/* submit spinner (steps that run moderation take a moment) */
.btn.loading{pointer-events:none;color:transparent!important;position:relative}
.btn.loading svg{opacity:0}
.btn.loading::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2.5px solid rgba(0,0,0,.22);border-top-color:#0b2a1e;border-radius:50%;animation:spin .7s linear infinite}

.in.locked,.in[readonly]{background:var(--bg);color:var(--muted);cursor:default}