/* local-signup/public/signup.css: every signup and account page. The sales site's tokens and fonts
   come from vendor/brand/brand.css (loaded first); this file is the layout, phone first. AA contrast
   on white, visible focus, 44 px tap targets, no inline styles anywhere (the CSP forbids them). */
:root{--error:#b3261e;--ok:#1e6b3a;--ok-bg:#eef6f0;--focus:#0f1d33;--pad:16px;--col:40rem}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page-bg);color:var(--ink);font:1rem/1.55 var(--font-body)}
a{color:var(--brand-ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,iframe:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.ls-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Header: the sales site's dark bar and wordmark. */
.ls-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:10px var(--pad);background:var(--dark);color:var(--on-dark)}
.ls-brand{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:6px 0;color:var(--on-dark);text-decoration:none}
.ls-brand__a{font:900 1.6rem/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase}
.ls-brand__b{font-size:.75rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#c4c4c4}
.ls-lang{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:2px solid var(--on-dark);color:var(--on-dark);font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.ls-main{width:100%;max-width:var(--col);margin:0 auto;padding:24px var(--pad) 96px}
.ls-main--wide{max-width:64rem}

/* Type */
h1{margin:0 0 12px;font:900 clamp(2.2rem,8vw,3.4rem)/.95 var(--font-display);letter-spacing:.005em;text-transform:uppercase}
h2{margin:32px 0 12px;font:800 1.6rem/1.05 var(--font-display);text-transform:uppercase}
h3{margin:0 0 4px;font-size:1.05rem}
p{margin:0 0 12px}
.ls-kicker{margin:0 0 8px;color:var(--brand-ink);font-size:.8125rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.ls-lede{margin:0 0 24px;color:var(--muted);font-size:1.0625rem}
.ls-note{margin:12px 0 0;color:var(--muted);font-size:.9375rem}

/* Progress: "Step 2 of 7" and one segment per step. */
.ls-progress{margin:0 0 20px}
.ls-progress__text{margin:0 0 6px;font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)}
.ls-progress__bar{display:flex;gap:4px}
.ls-progress__seg{flex:1;height:6px;background:var(--line)}
.ls-progress__seg.is-done{background:var(--brand)}

/* Forms: one question group per screen, no nested boxes. */
.ls-form{display:grid;gap:20px}
.ls-group{margin:0;padding:0;border:0;min-width:0;display:grid;gap:12px}
.ls-group>legend{padding:0;margin:0 0 4px;font-weight:800;font-size:1.0625rem}
.ls-field{display:grid;gap:6px;min-width:0}
.ls-field label,.ls-label{font-weight:700}
.ls-field__hint{margin:0;color:var(--muted);font-size:.9375rem}
.ls-field__error{margin:0;color:var(--error);font-weight:700;font-size:.9375rem}
.ls-input,.ls-field input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),.ls-field select,.ls-field textarea{width:100%;max-width:100%;min-height:48px;padding:10px 12px;border:2px solid var(--field-line);border-radius:0;background:var(--surface);color:var(--ink);font:inherit}
.ls-field textarea{min-height:7rem}
.ls-field [aria-invalid=true]{border-color:var(--error)}
.ls-input-wrap{display:flex;align-items:stretch}
.ls-input-prefix{display:flex;align-items:center;padding:0 12px;border:2px solid var(--field-line);border-right:0;background:var(--band);font-weight:800}
.ls-input-wrap input{flex:1}
.ls-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}

/* Checkboxes and switches: the input is visually hidden but stays focusable and announced (Task 1
   fix round 1); the label is the full 44 px hit target and draws the visible box or track, like
   .ls-chip/.ls-card/.ls-swatch below. */
.ls-check{position:relative}
.ls-check input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0}
.ls-check label{position:relative;display:flex;align-items:center;width:100%;min-height:44px;padding:8px 0 8px 36px;font-weight:500;cursor:pointer}
.ls-check label::before{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);width:24px;height:24px;border:2px solid var(--field-line);border-radius:50%;background:var(--surface)}
.ls-check input[type=checkbox]+label::before{border-radius:0}
.ls-check input:checked+label::before{border-color:var(--brand);background:var(--brand)}
.ls-check input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.ls-switch label{padding-left:60px}
.ls-switch label::before{width:48px;height:28px;border-radius:14px}
.ls-switch label::after{content:"";position:absolute;top:50%;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transform:translateY(-50%)}
.ls-switch input:checked+label::after{left:23px;background:var(--on-brand)}

/* Choice cards (markets, plans, themes, domain ideas): a real radio inside each, visually hidden. */
.ls-cards{display:grid;gap:12px}
.ls-cards--two{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.ls-card{position:relative}
.ls-card__input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0}
.ls-card__label{display:grid;gap:4px;min-height:64px;padding:16px 16px 16px 52px;border:2px solid var(--line);background:var(--surface);cursor:pointer;font-weight:500}
.ls-card__label::before{content:"";position:absolute;top:18px;left:16px;width:22px;height:22px;border:2px solid var(--field-line);border-radius:50%;background:var(--surface)}
.ls-card__input[type=checkbox]+.ls-card__label::before{border-radius:0}
.ls-card__input:checked+.ls-card__label{border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.ls-card__input:checked+.ls-card__label::before{border:7px solid var(--brand)}
.ls-card__input:focus-visible+.ls-card__label{outline:3px solid var(--focus);outline-offset:2px}
.ls-card__title{font:800 1.35rem/1.05 var(--font-display);text-transform:uppercase}
.ls-card__line{color:var(--muted);font-size:.9375rem}
.ls-card__tag{justify-self:start;padding:2px 8px;background:var(--accent);color:var(--on-accent);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ls-card__price{font:900 2rem/1 var(--font-display)}

/* Chips (service areas): checkboxes shaped as pills. */
.ls-chips{display:flex;flex-wrap:wrap;gap:8px}
.ls-chip{position:relative}
.ls-chip input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0}
.ls-chip label{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--field-line);border-radius:22px;background:var(--surface);cursor:pointer;font-weight:600}
.ls-chip input:checked+label{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}
.ls-chip input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}

/* Color swatches and theme color chips: fixed classes, one per color (tests keep them in step). */
.ls-swatches{display:flex;flex-wrap:wrap;gap:10px}
.ls-swatch{position:relative}
.ls-swatch input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0}
.ls-swatch label{display:block;width:48px;height:48px;border:2px solid var(--field-line);cursor:pointer}
.ls-swatch input:checked+label{outline:3px solid var(--ink);outline-offset:3px}
.ls-swatch input:focus-visible+label{outline:3px solid var(--focus);outline-offset:3px}
.ls-swatch--custom label{display:flex;align-items:center;justify-content:center;width:auto;padding:0 12px;background:var(--surface);font-weight:700}
.ls-custom-color{display:flex;align-items:center;gap:12px}
.ls-custom-color input[type=color]{width:64px;height:48px;padding:2px;border:2px solid var(--field-line);background:var(--surface)}
.ls-tchips{display:flex;gap:4px}
.ls-tchip{width:20px;height:20px;border:1px solid var(--ink)}
.ls-color--0e6e6b{background-color:#0e6e6b}.ls-color--cf3b26{background-color:#cf3b26}.ls-color--1f4fd1{background-color:#1f4fd1}.ls-color--0f1d33{background-color:#0f1d33}
.ls-color--7a2e8f{background-color:#7a2e8f}.ls-color--1a7a4a{background-color:#1a7a4a}.ls-color--b8336a{background-color:#b8336a}.ls-color--e04b1a{background-color:#e04b1a}
.ls-color--ffffff{background-color:#ffffff}.ls-color--111111{background-color:#111111}.ls-color--ffd23f{background-color:#ffd23f}.ls-color--f7c8b6{background-color:#f7c8b6}
.ls-color--0c0c10{background-color:#0c0c10}.ls-color--f2f2f2{background-color:#f2f2f2}.ls-color--ff4fa3{background-color:#ff4fa3}.ls-color--2b2226{background-color:#2b2226}
.ls-color--f6d8a8{background-color:#f6d8a8}.ls-color--1b1a19{background-color:#1b1a19}.ls-color--e8d9c4{background-color:#e8d9c4}

/* The single live preview. */
.ls-preview{margin:0 0 8px;border:2px solid var(--ink);background:var(--band)}
.ls-preview__frame{display:block;width:100%;height:min(70vh,34rem);border:0;background:var(--band)}
/* Final review M8: shorter on a phone, so the theme cards under it show. */
@media (max-width:640px){.ls-preview__frame{height:min(50vh,34rem)}}

/* Buttons: the sales site's style. One primary action per screen; Back is a quiet text link. */
.ls-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:2px solid var(--brand);border-radius:0;background:var(--brand);color:var(--on-brand);font:700 .875rem/1.15 var(--font-body);letter-spacing:.1em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer}
.ls-button:disabled{opacity:.75;cursor:progress}
.ls-button--ghost{background:var(--surface);color:var(--brand-ink)}
.ls-button--small{min-height:44px;padding:8px 14px}
.ls-back{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--brand-ink);font-weight:700}
.ls-actionbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:8px}
.ls-actionbar__next{font-size:.9375rem;color:var(--muted);flex-basis:100%;margin:0}
@media (max-width:640px){
  .ls-actionbar{position:sticky;bottom:0;z-index:2;margin:8px calc(-1 * var(--pad)) 0;padding:12px var(--pad);border-top:2px solid var(--line);background:var(--page-bg)}
  .ls-actionbar .ls-button{flex:1}
}
.ls-iconbutton{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border:2px solid var(--field-line);background:var(--surface);color:var(--ink);font:700 .9375rem/1 var(--font-body);cursor:pointer}

/* Messages and errors. */
.ls-summary{margin:0 0 20px;padding:16px;border:3px solid var(--error);background:var(--surface)}
.ls-summary h2{margin:0 0 8px;font:800 1.1rem/1.2 var(--font-body);text-transform:none;color:var(--error)}
.ls-summary ul{margin:0;padding-left:20px}
.ls-summary a{color:var(--error);font-weight:700}
.ls-notice{margin:0 0 20px;padding:12px 16px;border-left:6px solid var(--ok);background:var(--ok-bg)}
.ls-notice--warn{border-left-color:var(--error);background:var(--surface)}

/* Plan points and the full agreement. */
.ls-points{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ls-points li{padding-left:18px;border-left:4px solid var(--brand)}
.ls-disclosure summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700;color:var(--brand-ink)}
.ls-agreement{max-height:24rem;overflow:auto;padding:0 12px;border:2px solid var(--line)}

/* Setup: item and stop cards, hours rows. */
.ls-stack{display:grid;gap:16px}
.ls-item{display:grid;gap:12px;padding:16px 0 0;border-top:4px solid var(--brand)}
.ls-item__head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ls-item__head h3{margin:0}
.ls-day{display:grid;gap:8px;padding:12px 0;border-top:2px solid var(--line)}
.ls-day__head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ls-day__name{font-weight:800}
.ls-day:has([data-closed]:checked) .ls-row{display:none}

/* Photos */
.ls-drop{display:grid;gap:8px;justify-items:start;padding:20px;border:3px dashed var(--field-line);background:var(--band)}
.ls-drop.is-over{border-color:var(--brand);background:var(--tint)}
.ls-thumbs{margin:0;padding:0;list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.ls-thumb{display:grid;gap:6px;min-width:0;padding:6px;border:2px solid var(--line);background:var(--surface)}
.ls-thumb.is-dragging{opacity:.5}
.ls-thumb img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.ls-thumb__cover{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink)}
.ls-thumb__actions{display:flex;flex-wrap:wrap;gap:4px}
.ls-logo{display:flex;align-items:center;gap:12px}
.ls-logo img{max-width:160px;max-height:64px}

/* Review */
.ls-review{display:grid;gap:4px}
.ls-review__section{padding:16px 0;border-top:2px solid var(--line)}
.ls-review__head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ls-review__head h2{margin:0;font-size:1.3rem}
.ls-review dl{margin:8px 0 0;display:grid;gap:4px}
.ls-review dt{font-weight:700}
.ls-review dd{margin:0 0 8px;color:var(--muted);overflow-wrap:anywhere}

/* Account home: the timeline, then a quieter "Plan and billing". */
.ls-timeline{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:0}
.ls-timeline li{position:relative;padding:8px 0 8px 36px;color:var(--muted)}
.ls-timeline li::before{content:"";position:absolute;left:6px;top:14px;width:14px;height:14px;border:2px solid var(--field-line);border-radius:50%;background:var(--surface)}
.ls-timeline li.is-done{color:var(--ink)}
.ls-timeline li.is-done::before{border-color:var(--brand);background:var(--brand)}
.ls-timeline li.is-current{color:var(--ink);font-weight:800}
.ls-timeline li.is-current::before{border:4px solid var(--brand)}
.ls-actions{display:grid;gap:24px}
.ls-actions form{display:grid;gap:8px}
.ls-billing{margin-top:40px;padding-top:8px;border-top:2px solid var(--line)}
.ls-billing .ls-actions{gap:28px}
/* Important 3 (Task 11 review): a plain text link (Plan and billing from a setup screen or the
   review; View your site and the export link on the account page) is still a full 44 px target. */
.ls-note a,.ls-actions a:not(.ls-button){display:inline-flex;align-items:center;min-height:44px}