/* The pre-launch page's own few rules, on top of the demo's stylesheets: the header's section links, and the
   registration card, drawn as the quote card in the panel it replaces (.lp-mock). */

/* The green: the demo's #03A05E a step cooler, as bright and as readable (white words on it 3.4:1), less yellow
   (23 Oct, the user: "a bright cool looking color, not too much dark"). Every shade is made from it in tokens.css. */
:root { --palette-vivid-accent: #00a06c; }

/* A section reached from the header sits below the sticky header. */
.lp-section, .lp-hero { scroll-margin-top: calc(var(--public-header-h) + var(--s4)); }
@media (max-width: 860px) { .public-nav { display: none; } }

/* The client's remarks on the live page (23 Oct): his welcome on "a background picture in a dark background", and no
   picture sections. The hero is the page's one photograph: in its natural colour under a flat ink overlay, as the
   bands' photograph was (.lp-photo), so the words come first. */
.lp-hero-photo::before { background: color-mix(in srgb, var(--lp-ink) 76%, transparent); }
.lp-hero-photo .lp-photo-img { object-position: 62% 35%; }
/* The three proof cards on the photograph too: their row has no ground of its own here, so the picture runs behind
   them to the foot of the hero; the cards keep their raised shade. */
.lp-hero-photo .lp-strip.lp-strip-cards { background: transparent; }
/* On a phone the hero is a tall, narrow box that shows about a fifth of the wide photograph, and it showed a dark
   slice of scaffolding (24 Oct, the user: the background "not anything proper visible", and it stays a background).
   Up to 760px the photograph is aimed at the tradesman on the right under a lighter overlay; the words keep their
   contrast with a soft dark shadow, and the claim is plain white rather than the metal shade. */
@media (max-width: 760px) {
  .lp-hero-photo::before { background: color-mix(in srgb, var(--lp-ink) 62%, transparent); }
  .lp-hero-photo .lp-photo-img { object-position: 76% 50%; }
  .lp-hero-home.lp-hero-photo:not(.lp-hero-soft) .lp-display {
    background-image: none; -webkit-text-fill-color: currentColor; color: var(--brand-on);
  }
  .lp-hero-photo .lp-hero-copy h1,
  .lp-hero-photo .lp-hero-copy p { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 16px rgba(0, 0, 0, .45); }
}
.lp-display-pre { display: block; font-size: .52em; letter-spacing: -.005em; margin-bottom: .16em; }
.lp-hero-for {
  margin-top: var(--s4);
  max-width: 40em;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: color-mix(in srgb, var(--brand-on) 78%, transparent);
}
/* The four ways to register, two by two and the same width; one to a line below 760px, where two side by side
   no longer hold "Register as a subcontractor / trade". */
.lp-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 50rem; }
.lp-ways .btn { justify-content: space-between; gap: var(--s3); text-align: left; }
@media (max-width: 760px) { .lp-ways { grid-template-columns: minmax(0, 1fr); } }

/* His key benefits as bullets: two columns read downwards, a rule under each, as on his flyer. */
.lp-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  column-gap: var(--s9);
  row-gap: 0;
  margin: 0;
}
.lp-benefits li { padding: var(--s4) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-18); }
.lp-benefits svg { margin-top: 3px; }
.lp-benefits strong { font-weight: 700; }
@media (max-width: 860px) {
  .lp-benefits { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .lp-benefits li { font-size: var(--fs-16); }
}

/* On a narrow phone a panel's Register button takes the panel's width, its words wrapping if they must, so the
   longest ("Register as a subcontractor / trade") never runs past the edge. */
@media (max-width: 480px) {
  .lp-panel { padding-inline: var(--s5); }
  .lp-panel > .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; height: auto;
                     min-height: var(--tap-min); padding: var(--s3) var(--s4); line-height: 1.3; font-size: var(--fs-15); }
}

/* The statement without its drawing (the client: not a design for the platform): the words centred on the panel. */
.lp-statement-solo { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.lp-statement-solo h2, .lp-statement-solo p { margin-inline: auto; }

/* The bands on a dark photograph again (24 Oct, the user: "the house bg in some dark black panel like the bands
   section"): house.jpg, the building on the right behind the price cards, the plain sky behind the words, under the
   near-black overlay the bands always had (.lp-photo), a step lighter so the building reads. */
.lp-bands-photo::before { background: color-mix(in srgb, var(--lp-ink) 84%, transparent); }
.lp-bands-photo .lp-photo-img { object-position: 72% 62%; }

/* Contractor to contract (24 Oct, the client: where the drawing of a man was, "a background image in black"): the
   checks behind every contractor who posts, on a site photograph under the ink overlay. The words sit in the right
   half, so the two people show on the left; on a phone they take the width. White words, the ticks in the green. */
.lp-verified::before { background: color-mix(in srgb, var(--lp-ink) 82%, transparent); }
.lp-verified .lp-photo-img { object-position: 30% 28%; }
.lp-verified-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s10); }
.lp-verified-copy { grid-column: 2; }
.lp-verified .lp-ticks { margin-bottom: var(--s6); }
.lp-verified-close { max-width: 30em; font-size: var(--fs-18); font-weight: 650; line-height: 1.5; color: var(--brand-on); }
@media (max-width: 860px) {
  .lp-verified-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-verified-copy { grid-column: auto; }
}

/* The checks (24 Oct): the three member checks side by side, then the client check, in his longer words, as one wide
   card under them: its drawing, the title over its text, and the result. On a phone, a card like the others. */
.lp-checks-keyrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-checks-keyrow .lp-check-key {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "art title status" "art text status";
  column-gap: var(--s6);
  align-items: center;
}
.lp-checks-keyrow .lp-check-key .lp-check-art { grid-area: art; align-self: start; margin-bottom: 0; }
.lp-checks-keyrow .lp-check-key h3 { grid-area: title; }
.lp-checks-keyrow .lp-check-key p { grid-area: text; max-width: 60em; margin-bottom: 0; }
.lp-checks-keyrow .lp-check-key .lp-check-status { grid-area: status; }
@media (max-width: 860px) {
  .lp-checks-keyrow { grid-template-columns: minmax(0, 1fr); }
  .lp-checks-keyrow .lp-check-key { display: flex; align-items: stretch; }
  .lp-checks-keyrow .lp-check-key .lp-check-art { margin-bottom: var(--s5); }
  .lp-checks-keyrow .lp-check-key p { margin-bottom: var(--s5); }
}

.lp-register-card {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-lg);
  border: var(--lp-bw) solid var(--border);
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  padding: var(--s6);
}
@media (max-width: 860px) { .lp-register-card { margin-left: 0; max-width: none; padding: var(--s5); } }
/* On a phone the form and the example quote keep most of the width (24 Oct, the user: "its width is very small in
   mobile", and "that QUOTE section panel the same"): each card reaches into its dark panel's padding, 12px from the
   panel's edge, and pads its own content a step less; the panels' words keep their padding. */
@media (max-width: 640px) {
  #register .lp-register-card { width: auto; margin-inline: calc(var(--s3) - var(--lp-panel-x)); padding: var(--s5) var(--s4); }
  #lp-different .lp-mock { width: auto; margin-inline: calc(var(--s3) - var(--lp-panel-x)); }
  #lp-different .lp-mock-head,
  #lp-different .lp-mock-cols,
  #lp-different .lp-mock-row,
  #lp-different .lp-mock-foot { padding-inline: var(--s4); }
}
.lp-register-card form { display: flex; flex-direction: column; gap: var(--s4); }

.lp-register-as { border: 0; margin: 0; padding: 0; min-width: 0; }
.lp-register-as legend { padding: 0; margin-bottom: 7px; }
/* The four ways to register, one to a line, so none wraps inside its box. */
.lp-register-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.lp-register-options .check { align-items: center; min-height: 44px; }

.lp-register-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 520px) { .lp-register-pair { grid-template-columns: minmax(0, 1fr); } }

.lp-register-card .input { min-height: 48px; font-size: var(--fs-16); }
.lp-register-card .input[aria-invalid="true"] { border-color: var(--critical); }
.lp-register-consent { align-items: flex-start; }
.lp-register-consent .check-desc { font-size: var(--fs-14); }
.lp-register-submit { width: 100%; justify-content: center; }
.lp-register-status { margin: 0; font-size: var(--fs-14); font-weight: 600; color: var(--critical-ink); }
.lp-register-status:empty { display: none; }

/* Left empty by people; a bot that fills every field is ignored. */
.lp-register-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.lp-register-done { text-align: center; padding: var(--s5) 0; }
.lp-register-done:focus { outline: none; }
.lp-register-done-icon {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: var(--accent-on, #fff);
}
.lp-register-done-icon svg { width: 26px; height: 26px; }
.lp-register-done h3 { margin-top: var(--s4); }
.lp-register-done p { margin: var(--s2) auto var(--s5); max-width: 34ch; color: var(--text-2); }

/* The trade tiles are names, not links, before launch. On hover only the green border and the light ground, without
   the demo's ink outline round the card (24 Oct, the user: "remove outline black effect cleanly"), both easing in. */
.trade-grid .trade-tile { cursor: default; }
.lp .trade-tile { transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.lp .trade-tile:hover, .lp .trade-tile:focus-visible { outline-color: transparent; outline-offset: 0; }

/* The 404 page. */
.lp-missing { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: var(--s5); padding: var(--s8) var(--s4); text-align: center; }
.lp-missing img { width: 208px; height: auto; margin-bottom: var(--s5); }

/* The demo hides its header's Join button below 700px, to keep Sign in, the menu and DIRECT; this header has only
   the logo and Register, which fit. */
@media (max-width: 700px) {
  .public-header-actions .btn-primary { display: inline-flex; }
}
/* On a phone the demo shrinks the logo to 18px type, to make room for Sign in and the menu; this header has neither,
   so the logo keeps a size that reads (24 Oct, the user: "the logo looks very small in mobile"), growing with the
   screen and still leaving room for Register at 320px. The footer's logo follows. */
@media (max-width: 480px) {
  .public-shell .brand-public .brand-name { font-size: clamp(22px, 6.6vw, 28px); }
}

/* On a phone the four choices are plain radios, one to a line, so "Subcontractor / trade" stays on one line. */
@media (max-width: 480px) {
  .lp-register-options { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-register-options .check,
  .lp-register-options .check:hover,
  .lp-register-options .check:has(input:checked) { border: 0; background: none; padding: var(--s2) 0; gap: var(--s2); min-height: var(--tap-min); }
}

/* The footer: the logo and its one line, then the copyright bar. The demo's link columns are not here, so its
   five-column grid becomes one row (it left the brand in the first column and the rest empty). */
.lp-footer { display: block; padding-top: var(--s8); padding-bottom: var(--s7); }
.lp-footer .footer-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s8); padding-right: 0; }
.lp-footer .footer-lede { margin: 0; max-width: 48rem; color: var(--text-2); text-align: right; }
/* The email in the copyright bar reads at the bar's own size. */
.public-footer-base a { font-size: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .lp-footer { padding-top: var(--s7); padding-bottom: var(--s5); }
  .lp-footer .footer-lede { text-align: left; }
}