/* THE SIX SIGN-UP STEPS, "Build your own report" (PRD-285 S3, D2, D30, D49) on
   report.typeamedia.net. The pixel truth is the frames on page "PRD-285 Free
   onboarding" of hP9WwD5Tpup3oa4fGn2EcI: the strip and its name from section
   851:2857 (step 1 desktop 851:5128, phone 851:5151), each step's body from the
   signed frames (step N desktop / phone: 1 687:1897 / 687:2345, 2 687:1979 /
   687:2427, 3 687:2087 / 687:2535, 4 687:2199 / 687:2647, 5 688:2395 / 688:2737,
   6 688:2511 / 688:2853). Spacing is the frames' own.

   It sits on leads.css (the top bar, the heading, the Field width) and uses only
   the sheet's tokens and controls: Button, Field, Tag, Checkbox. Where a frame
   drew a colour or size the sheet does not have, the nearest sheet token stands
   in (PRD-297 D31, build and review after; INVARIANTS #10): the frames' light
   mint is --color-primary-bg, and the phone heading is the sign-in pages' 24px
   (Ross chose the nearest sheet sizes on issue 6314, 2026-10-16).

   Every rule hangs off `.ls-`, so nothing here reaches another page. Light only,
   like the frames. The phone layout starts below 960px, as in leads.css. */

.ls-page{display:flex;flex-direction:column;align-items:center;gap:48px;padding:48px 0 96px}

/* THE STRIP (655:794 inside the step frames): its name, then the six boxes
   across the 1120 column. Done, current and still to come. */
.ls-strip{display:flex;flex-direction:column;gap:16px;width:min(1120px,calc(100% - 32px))}
.ls-strip-name{font-size:var(--font-size-lg);font-weight:600;line-height:25px;color:var(--color-text)}
.ls-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.ls-step{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-surface)}
.ls-step-top{display:flex;align-items:center;gap:10px}
.ls-step-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-border);color:var(--color-muted);font-size:var(--font-size-sm);font-weight:600;line-height:1}
.ls-step-icon{width:24px;height:24px;flex:none;color:var(--color-muted);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ls-step-label{font-size:var(--font-size-base);font-weight:600;line-height:22px;color:var(--color-muted)}
.ls-step a{color:inherit;text-decoration:none}
.ls-step a:hover{text-decoration:underline}
.ls-step a:focus-visible{border-radius:var(--radius-xs);box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus);outline:none}
.ls-step.is-done{border-color:var(--color-primary);background:var(--color-primary-bg)}
.ls-step.is-done .ls-step-num{background:var(--color-primary);color:var(--color-text)}
.ls-step.is-done .ls-step-icon{color:var(--status-primary-fg)}
.ls-step.is-done .ls-step-label{color:var(--color-text)}
.ls-step.is-now{border-color:var(--color-primary);background:var(--color-primary)}
.ls-step.is-now .ls-step-num{background:var(--color-bg);color:var(--color-text)}
.ls-step.is-now .ls-step-icon,.ls-step.is-now .ls-step-label{color:var(--color-text)}

/* The phone's compact strip (691:3001, 851:5154): "Step N of 6" muted, the
   step's label, and a 4px track of six segments with the first N green. */
.ls-compact{display:none}

.ls-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* The column (640): the heading (leads.css), the step's form, the footer. */
.ls-column{display:flex;flex-direction:column;gap:32px;width:min(640px,calc(100% - 32px))}

.ls-form{display:flex;flex-direction:column;gap:20px}
.ls-form-tight{gap:16px}
/* Step 6's hidden default button (S6 part 2): Enter in a field presses it, so
   the emailed link stays Enter's action with the doors drawn above the fields.
   Out of the flow, so the form's 20px rhythm is the frame's (688:2511). */
.ls-default-submit{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ls-form-roomy{gap:24px}
/* The frames' Field is 80 tall: label, input and the line its error takes. */
.ls-form .ui-field{max-width:none;min-height:80px}
.ls-form .ui-input-regular{font-size:var(--font-size-sm)}

/* Step 1's website and country (695:2765): 416 and 208 in the 640 column,
   16 between; stacked on a phone. */
.ls-domain-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}

/* A field with its Add button beside it (687:2042, 687:2321): the button sits on
   the input's line, under the 20px label and its 6px gap. */
.ls-add-row{display:flex;align-items:flex-start;gap:12px}
.ls-add-row .ui-field{flex:1 1 auto;min-width:0}
.ls-add-row > .ui-button{flex:none;margin-top:26px}

/* The suggester's line above steps 3 and 4 (S4, D31). */
.ls-suggestions{font-size:var(--font-size-sm);line-height:20px;color:var(--color-muted)}
.ls-suggestions a{font-weight:500;color:var(--status-primary-fg);text-decoration:none}
.ls-suggestions a:hover{text-decoration:underline}

/* PRD-350 S21 (issue 8336): the suggester writing, made obvious (Ross,
   2026-10-21). The landing page's 72px ring (.fa-ring) and the step's words
   under it; the ring holds still for a reader who asks for less motion. */
.ls-writing{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;border:1px solid var(--color-border);border-radius:8px;text-align:center}
.ls-writing-ring{width:72px;height:72px;margin-bottom:8px;border:6px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:ls-writing-turn 1s linear infinite}
@keyframes ls-writing-turn{to{transform:rotate(360deg)}}
.ls-writing-title{font-size:var(--font-size-xl);font-weight:600;line-height:28px;color:var(--color-text)}
.ls-writing-note{font-size:var(--font-size-sm);line-height:20px;color:var(--color-muted)}
@media (prefers-reduced-motion:reduce){
  .ls-writing-ring{animation:none}
}

/* Step 2's chips (687:2054) and count. */
.ls-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ls-chips:not(:has(> *)){display:none}
.ls-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--color-primary);border-radius:16px;background:var(--color-primary-bg);font-size:var(--font-size-sm);font-weight:500;line-height:1.2;color:var(--color-text);overflow-wrap:anywhere}
.ls-chip-remove{all:unset;display:grid;place-items:center;cursor:pointer;color:var(--status-primary-fg);border-radius:var(--radius-xs)}
.ls-count{font-size:var(--font-size-sm);line-height:1.2;color:var(--color-muted)}

.ls-icon{display:block;flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* Step 3's buyer cards (687:2150) and the dashed Add a buyer (687:2183). */
.ls-buyers{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
/* :empty never matches: the ERB loop leaves whitespace inside the list. */
.ls-buyers:not(:has(> *)){display:none}
.ls-buyer{padding:20px;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg)}
.ls-buyer-view{display:flex;flex-direction:column;gap:10px}
.ls-buyer-view[hidden],.ls-buyer-edit[hidden]{display:none}
.ls-buyer-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ls-buyer-name{display:flex;align-items:center;gap:8px;min-width:0}
.ls-buyer-name h2{margin:0;font-size:var(--font-size-lg);font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.ls-buyer-actions{display:flex;gap:16px;flex:none}
.ls-buyer-view p{font-size:var(--font-size-card);line-height:22px;color:var(--color-text);overflow-wrap:anywhere}
.ls-buyer-view p > span:first-child{color:var(--color-muted)}
.ls-link{all:unset;cursor:pointer;font-size:var(--font-size-sm);font-weight:500;line-height:1.2;color:var(--status-primary-fg);border-radius:var(--radius-xs)}
.ls-link:hover{text-decoration:underline}
.ls-buyer-edit{display:flex;flex-direction:column;gap:16px}
.ls-buyer-edit .ui-field{max-width:none;min-height:0}
.ls-buyer-edit .ui-field-label{display:flex;flex-direction:column;gap:6px}
.ls-buyer-edit-foot{display:flex;justify-content:flex-end;gap:8px}
.ls-add-buyer{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:20px;border:1.5px dashed var(--color-primary);border-radius:var(--radius-ui);cursor:pointer;font-size:var(--font-size-card);font-weight:500;line-height:1.2;color:var(--status-primary-fg)}
.ls-add-buyer:hover{background:var(--color-primary-bg)}
.ls-add-buyer:disabled{opacity:.45;cursor:default;background:none}
.ls-add-buyer[hidden]{display:none}

/* Step 4's list header, questions box (687:2278) and footnote. */
.ls-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ls-list-head p{display:flex;align-items:baseline;gap:8px;line-height:1.2}
.ls-list-head strong{font-size:var(--font-size-base);font-weight:600}
.ls-list-head p > span{font-size:var(--font-size-sm);color:var(--color-muted)}
.ls-list-head .ui-button[hidden]{display:none}
.ls-list-head .ui-button .ls-icon{width:14px;height:14px}
.ls-questions{margin:0;padding:0;list-style:none;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);overflow:hidden}
.ls-question,.ls-question-empty{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--color-border);font-size:var(--font-size-card);line-height:22px}
.ls-questions > li:last-child{border-bottom:0}
.ls-question-empty{color:var(--color-muted)}
.ls-question-empty[hidden]{display:none}
.ls-question-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ls-question-tags{display:flex;flex:none;align-items:center;gap:8px}
.ls-question-remove{all:unset;display:grid;place-items:center;flex:none;cursor:pointer;color:var(--color-muted);border-radius:var(--radius-xs)}
.ls-note{font-size:var(--font-size-sm);line-height:20px;color:var(--color-muted)}

/* Step 5: the four fields two by two (310 each), the measure chips, the notes. */
.ls-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ls-measures{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0;min-width:0}
.ls-measures legend{padding:0;margin-bottom:10px;font-size:var(--font-size-sm);font-weight:500;line-height:1.2}
.ls-measure-chips{display:flex;flex-wrap:wrap;gap:8px}
.ls-measure{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--color-border);border-radius:16px;background:var(--color-bg);cursor:pointer;font-size:var(--font-size-sm);font-weight:500;line-height:1.2}
.ls-measure input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.ls-measure .ls-icon{display:none;color:var(--status-primary-fg)}
.ls-measure:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-bg)}
.ls-measure:has(input:checked) .ls-icon{display:block}
.ls-measure:has(input:focus-visible){box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}
.ls-notes{display:flex;flex-direction:column;gap:8px}
.ls-notes label{font-size:var(--font-size-sm);line-height:20px}
.ls-notes label strong{font-weight:500}
.ls-notes label span{color:var(--color-muted)}
.ls-textarea{box-sizing:border-box;width:100%;height:120px;padding:10px 12px;border:1px solid var(--color-control-border);border-radius:var(--radius-ui);background:var(--color-bg);color:var(--color-text);font:var(--fw-regular) var(--font-size-sm)/20px var(--font-sans);resize:vertical}
.ls-textarea::placeholder{color:var(--color-muted)}
.ls-textarea:focus-visible{outline:none;border:1.5px solid var(--color-focus)}
.ls-textarea[aria-invalid="true"]{border-color:var(--color-danger)}

/* Step 6: the consent tick and the terms line. */
.ls-consent{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--font-size-card);line-height:22px}
.ls-consent .ui-checkbox{margin-top:2px}

/* The bot check, and the footer's Back and Next. */
.ls-bot-check{display:flex;flex-direction:column;gap:6px}
.ls-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:24px;border-top:1px solid var(--color-border)}
.ls-foot-first{justify-content:flex-end}
.ls-foot .ui-button-form{margin:0}

.ls-chip-remove:focus-visible,.ls-question-remove:focus-visible,.ls-link:focus-visible,.ls-add-buyer:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}

/* THE PHONE (851:5151; 687:2345 ... 688:2853): the strip's name and the compact
   strip in place of the six boxes, one column with 16px gutters, Next filling
   the footer beside Back. */
@media (max-width:959.98px){
  .ls-page{gap:0;padding:0 0 56px}
  .ls-strip{gap:0;width:100%;padding:16px}
  .ls-strip-name{font-size:var(--font-size-base);line-height:20px;margin-bottom:16px}
  .ls-steps{display:none}
  .ls-compact{display:flex;flex-direction:column;gap:10px}
  .ls-compact p{display:flex;align-items:baseline;gap:8px;min-width:0;line-height:1.2;white-space:nowrap}
  .ls-compact span{font-size:var(--font-size-sm-minus);color:var(--color-muted)}
  .ls-compact strong{overflow:hidden;text-overflow:ellipsis;font-size:var(--font-size-card);font-weight:600;color:var(--color-text)}
  .ls-compact-track{display:flex;height:4px;overflow:hidden;border-radius:2px;background:var(--color-border)}
  .ls-compact-track i{flex:1 1 0;background:var(--color-border)}
  .ls-compact-track i.is-on{background:var(--color-primary)}

  .ls-column{gap:28px;margin-top:24px;width:calc(100% - 32px)}
  .ls-fields,.ls-domain-row{grid-template-columns:minmax(0,1fr)}
  .ls-domain-row{gap:20px}
  .ls-buyer-head{display:contents}
  .ls-buyer-view{display:flex}
  .ls-buyer-name{order:1}
  .ls-buyer-view p{order:2}
  .ls-buyer-actions{order:3}
  /* A question's tags go under its text, the remove button stays top right. */
  .ls-question{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .ls-question-text{grid-column:1}
  .ls-question-tags{grid-column:1;grid-row:2;flex-wrap:wrap}
  .ls-question-remove{grid-column:2;grid-row:1}
  .ls-foot .ui-button:last-child,.ls-foot .ui-button-form:last-child{flex:1 1 auto}
  .ls-foot-first .ui-button{width:100%}
}

/* The end pages after step 6 (688:2604): the heading and its line centred, the
   email in the frame's weight. */
.ls-done{text-align:center}
.ls-done strong{font-weight:500;color:var(--color-text);overflow-wrap:anywhere}

/* The refusal page's "email us" (D27). */
.ls-not-a-fit a{font-weight:500;color:var(--status-primary-fg);text-decoration:none}
.ls-not-a-fit a:hover{text-decoration:underline}

/* PRD-350 S24 (S23-D3): the live progress page, as Figma section 1081:4626 lays
   it out. The heading, the words and the stages are 32px apart under the
   strip; each stage is a bordered row, its state icon, label and count above
   a 6px bar. Done is a filled teal circle with a tick, running a turning
   ring, waiting a grey outline with grey words. */
.ls-calculating{align-items:center;padding-top:16px}
.ls-calculating-title{font-size:var(--font-size-page-title);font-weight:600;line-height:40px;letter-spacing:-0.32px}
.ls-calculating-body{font-size:var(--font-size-base);line-height:24px;color:var(--color-muted);overflow-wrap:anywhere}
.ls-calculating-body a{font-weight:500;color:var(--status-primary-fg);text-decoration:none}
.ls-calculating-body a:hover{text-decoration:underline}
.ls-stages{display:flex;flex-direction:column;gap:12px;width:100%;margin:0;padding:0;list-style:none;text-align:left}
.ls-stage{display:flex;flex-direction:column;gap:12px;padding:16px 20px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-bg)}
.ls-stage-top{display:flex;align-items:center;gap:12px}
.ls-stage-icon{position:relative;flex:none;width:20px;height:20px;border-radius:50%;box-sizing:border-box}
.ls-stage-label{flex:1 1 auto;min-width:0;font-size:var(--font-size-base);font-weight:500;line-height:24px;color:var(--color-text)}
.ls-stage-count{flex:none;font-size:var(--font-size-sm);line-height:20px;color:var(--color-muted);font-variant-numeric:tabular-nums}
/* A native <progress>, so the page carries no inline width (the sheet gate). */
.ls-stage-bar{-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;border:0;border-radius:3px;background:var(--color-border);overflow:hidden}
.ls-stage-bar::-webkit-progress-bar{background:var(--color-border);border-radius:3px}
.ls-stage-bar::-webkit-progress-value{background:var(--color-primary);border-radius:3px;transition:width .4s ease}
.ls-stage-bar::-moz-progress-bar{background:var(--color-primary);border-radius:3px}
.ls-stage-done .ls-stage-icon{background:var(--color-primary)}
.ls-stage-done .ls-stage-icon::after{content:"";position:absolute;left:7px;top:4px;width:4px;height:8px;border:solid var(--color-bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ls-stage-running .ls-stage-icon{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-right-color:var(--color-primary);animation:ls-writing-turn 1s linear infinite}
/* A running stage's track carries a moving sheen, so the page visibly works
   between counts, even at 0 (Ross, 2026-10-22). The element's own background
   is the track; WebKit's track pseudo-element steps aside for it. */
.ls-stage-running .ls-stage-bar{background:linear-gradient(90deg,var(--color-border) 0%,color-mix(in srgb,var(--color-primary) 40%,var(--color-border)) 50%,var(--color-border) 100%) 0 0/200% 100% var(--color-border);animation:ls-stage-sheen 1.6s linear infinite}
.ls-stage-running .ls-stage-bar::-webkit-progress-bar{background:transparent}
@keyframes ls-stage-sheen{from{background-position:100% 0}to{background-position:-100% 0}}
.ls-stage-waiting .ls-stage-icon{border:2px solid var(--color-border)}
.ls-stage-waiting .ls-stage-label{color:var(--color-muted)}
@media (max-width:959.98px){
  .ls-calculating-title{font-size:var(--font-size-2xl);line-height:32px;letter-spacing:-0.24px}
  .ls-stages{gap:8px}
  .ls-stage{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .ls-stage-running .ls-stage-icon,.ls-stage-running .ls-stage-bar{animation:none}
  .ls-stage-bar::-webkit-progress-value{transition:none}
}