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

/* Two platforms (27 Oct, the client: "a section on CT landing page describing that the trades are connected to the
   CTD platform ... receive projects from the CTD platform and CT platform"; the user: a simple title, the sites
   connected, not one membership, at the end): the last section before the form. The two platforms and whose projects
   each brings, beside an example of one member's leads from both, as a member sees a lead before connecting (the kind
   of client, the town and the postcode district, the band; never a name). Each kind of client wears its platform's
   colour: the homeowner Contractor Trade Direct's purple, the main contractor this green. */
.lp-both-sites { display: grid; gap: var(--s4); margin: var(--s6) 0 0; padding: 0; list-style: none; }
.lp-both-site {
  display: grid;
  gap: var(--s1);
  padding: var(--s5) var(--s6);
  background: var(--surface);
  border: var(--lp-bw) solid var(--border);
  border-radius: var(--r-lg);
}
.lp-both-logo { display: inline-flex; margin-bottom: var(--s3); }
.lp-both-site .brand-name { font-size: var(--fs-20); }
.lp-both-site strong { font-family: var(--display); font-size: var(--fs-18); font-weight: 700; }
.lp-both-text { color: var(--text-2); line-height: 1.55; }
/* Contractor Trade Direct's card is its link (the user: clicking it goes there), its address shown in its purple;
   on hover, the purple border and ground. */
a.lp-both-site { color: inherit; text-decoration: none; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
a.lp-both-site:hover, a.lp-both-site:focus-visible {
  border-color: var(--palette-purple-accent);
  background: color-mix(in srgb, var(--palette-purple-accent) 5%, var(--surface));
}
.lp-both-url { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-weight: 650; color: var(--palette-purple-accent); }
/* A lead's price range breaks before it, never inside it. */
#lp-both .lp-mock-stage small span { white-space: nowrap; }
.lp-by-home { background: var(--palette-purple-accent); color: var(--brand-on); }
.lp-by-main { background: var(--lp-vivid); color: var(--accent-on); }
@media (max-width: 640px) {
  .lp-both-site { padding: var(--s5); }
  #lp-both .lp-mock { flex: 1 1 auto; width: auto; max-width: none; margin-inline: calc(var(--s3) - var(--lp-panel-x)); }
  #lp-both .lp-mock-head,
  #lp-both .lp-mock-cols,
  #lp-both .lp-mock-row,
  #lp-both .lp-mock-foot { padding-inline: var(--s4); }
}
/* Contractor Trade Direct's logo on its card: its purple, and its Direct in Pacifico in black, a step smaller than the
   name, as on its own site (landing-page/ctd). Its font is loaded for these six letters only. */
.lp-logo-direct { --brand-text-b: var(--palette-purple-accent); }
.lp-logo-direct .brand-c {
  --brand-c-size: .7;
  margin-left: .3em;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

/* 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%; }

/* For main contractors (24 Oct, the user: their role and their price): the role in three numbered steps on the left,
   the plan on the right as a card, its price large; one column on a phone. Since 27 Oct the words are the client's
   (his steps' titles in his capitals), in this same layout (the user), the plan card a little wider than the words
   beside it, so his long points wrap less. */
.lp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s10); align-items: center; }
.lp-main-steps { list-style: none; counter-reset: step; display: grid; gap: var(--s5); margin: var(--s7) 0 0; padding: 0; }
.lp-main-steps li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s3); }
.lp-main-steps li::before {
  content: counter(step) '.';
  color: var(--accent-ink); font-family: var(--display); font-size: var(--fs-20); font-weight: 700; line-height: 1.35;
}
.lp-main-steps strong { display: block; font-family: var(--display); font-size: var(--fs-18); font-weight: 700; line-height: 1.35; }
.lp-main-steps span { color: var(--text-2); font-size: var(--fs-16); line-height: 1.55; }
.lp-plan { background: var(--surface); border: var(--lp-bw) solid var(--border); border-radius: var(--r-xl); padding: var(--s8); }
.lp-plan-name { font-size: var(--fs-14); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-ink); }
.lp-plan-price {
  margin-top: var(--s2);
  font-family: var(--display); font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
}
.lp-plan-price small { font-size: var(--fs-18); font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.lp-plan-note { margin-top: var(--s2); color: var(--text-2); }
.lp-plan .lp-ticks { margin: var(--s6) 0 var(--s7); }
/* His nine points in less height (27 Oct, the user): the long ones put shorter, their meaning kept, in the page's own
   type, the list a step closer. */
.lp-plan .lp-ticks { gap: var(--s2); }
.lp-plan .btn { width: 100%; justify-content: center; }
@media (max-width: 860px) {
  .lp-main { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .lp-plan { padding: var(--s6) var(--s5); }
}

/* 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; }
/* We qualify every HOMEOWNER, from Contractor Trade Direct (27 Oct, the client: "You can use the contractor trade
   direct"): the platform the homeowners post on, its logo under the title. */
.lp-check-from { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); font-size: var(--fs-14); font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.lp-check-from .brand-name { font-size: var(--fs-18); }
/* On the card's green, the words and the logo in white, as the logo is on any coloured ground. */
.lp-check-key .lp-check-from { color: color-mix(in srgb, var(--brand-on) 88%, transparent); }
.lp-check-key .lp-logo-direct { --brand-text-a: var(--brand-on); --brand-text-b: var(--brand-on); }
.lp-check-key .lp-logo-direct .brand-c { color: var(--brand-on); }
@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 fills its panel, reaching into the padding to 12px
   from either edge at every phone width (28 Oct: the example cards had sat left, with more room on their right), 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 { flex: 1 1 auto; width: auto; max-width: none; 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, where a plain link leads to Contractor Trade Direct
   for homeowners (27 Oct). 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 links in the copyright bar read 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; }
}