/* The homeowners' pre-launch page's own few rules, on top of the demo's stylesheets (.agent/demos/assets/css, as the
   trade page's are): the header's section links, the welcome on a photograph, the trade icons as pickers for the form,
   the form at the foot of the page, and the footer with its link to Contractor Trade. The purple is the demo's Premium
   purple (data-theme="purple", tokens.css), every shade made from it; the soft ground is the homeowner site's own
   (data-site="residential"). */

/* 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 demo moves this header's links into a menu up to 1120px; this header has four short links and one button,
   which fit from 861px, so they stay. */
@media (min-width: 861px) and (max-width: 1120px) {
  body[data-site="residential"] .public-nav { display: flex; }
}

/* Direct in a script face, in black (25 Oct, the user: "a bit different font like pacifico or similar or more clear
   visible font"): Pacifico, its bold strokes the weight of the name's, in mixed case, a step smaller than the name (the
   user: "a bit smaller than the brand name text"), its tallest strokes just under the name's capitals, standing on the
   name's letters' line as DIRECT did (components.css), in the header, the footer and the 404 page alike. Its font is
   loaded for these six letters only (index.html). */
.public-shell .brand-public .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 hero (27 Oct, the client: "Try the back ground shadow picture for the top section this looks a lot better"):
   his welcome on his photograph of a homeowner couple greeting their trades, under the trade page's flat ink shade, so
   the words come first; the form is at the foot of the page (his: "Move the register section down towards the
   bottom"), reached by the one button. The welcome is white like the claim, never grey (25 Oct, the user), and the
   claim never takes the trade page's metal shade (the homeowner claim is plain). */
/* The shade a step darker again, for his words (27 Oct, the user: "a bit more visible text via dark filter"). */
.lp-hero-photo::before { background: color-mix(in srgb, var(--lp-ink) 84%, transparent); }
/* The photograph: the homeowner couple greeting two trades in a house being built (27 Oct, the user's rendering of the
   client's reference; the outdoor one was tried and the user kept this). No face or helmet cut by the edge (the user):
   its four people stand across its width, so each screen shape has its own crop (index.html, <picture>): a wide
   screen from 1200px the whole scene, from its top; a tablet, a smaller window or a square or tall screen both
   trades and the handshake, img/hero-welcome-mid.jpg (there the hero's words make it nearly as tall as it is wide,
   which would cut the people at the sides of the whole scene); a phone or small tablet one trade and the handshake,
   img/hero-welcome-tall.jpg. Each is aimed so its people's faces stay whole at every size between. On a wide screen
   the photograph spans the width, so it moves right (the user: "shift image a bit right", then "a bit more right if
   the right side trades men can cut a bit") by growing 15% from its top left corner: every face stays in view, the
   back of the right trade's helmet runs off the edge. The tablet crop is aimed further left the same way. */
.lp-hero-photo .lp-photo-img { object-position: 0% 0%; transform: scale(1.15); transform-origin: 0 0; }
@media (min-width: 761px) and (max-width: 1199px), (min-width: 761px) and (max-aspect-ratio: 3/2) {
  .lp-hero-photo .lp-photo-img { object-position: 45% 0%; transform: none; }
}
/* His words a step brighter than the demo's on the photograph (27 Oct, the user: "a bit more clear to read"). */
.lp-hero-photo .lp-lede { color: color-mix(in srgb, var(--brand-on) 95%, transparent); }
/* The three proof cards on the photograph too, as on the trade page: their row has no ground of its own. */
.lp-hero-photo .lp-strip.lp-strip-cards { background: transparent; }
.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-display-pre { display: block; font-size: .52em; letter-spacing: -.005em; margin-bottom: .16em; }
/* His words as he set them out (27 Oct, his email: "Please use these exact wordings"; the user: "do like he
   mentioned clearly ... just a bit our taste"), line for line and in his order; ours only the look: Register for free
   today in bold, Coming Very Soon as a quiet outlined label, his line for UK homeowners in white over his sentence,
   and Free for all homeowners beside the one button. */
.lp-hero-launch {
  margin-top: var(--s4);
  max-width: 36em;
  font-size: var(--fs-18);
  line-height: 1.55;
  color: color-mix(in srgb, var(--brand-on) 95%, transparent);
}
.lp-hero-launch strong { font-weight: 700; color: var(--brand-on); }
.lp-soon {
  display: inline-flex;
  margin-top: var(--s4);
  padding: 5px 14px;
  border: 1px solid color-mix(in srgb, var(--brand-on) 55%, transparent);
  border-radius: var(--r-full);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brand-on);
}
.lp-hero-for {
  margin-top: var(--s5);
  max-width: 40em;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: color-mix(in srgb, var(--brand-on) 90%, transparent);
}
.lp-hero-for strong { font-weight: 650; color: var(--brand-on); }
.lp-hero-photo .lp-hero-actions { align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s6); }
.lp-hero-photo .lp-cta-note { color: var(--brand-on); }
/* On a phone the hero is a tall, narrow box: the photograph is aimed at the handshake under a lighter shade, and the
   words keep their contrast with a soft dark shadow, as on the trade page. The note centres under the full-width
   button, as in the demo. */
@media (max-width: 760px) {
  .lp-hero-photo::before { background: color-mix(in srgb, var(--lp-ink) 80%, transparent); }
  .lp-hero-photo .lp-photo-img { object-position: 85% 0%; transform: none; }
  .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); }
}

/* The trade icons pick the work in the form (in the demo they open posting with that trade ticked): a button drawn as
   the demo's tile, its hover the accent border and the soft ground. */
button.lp-start-tile { width: 100%; font: inherit; cursor: pointer; }

/* YOU choose at its normal size on the house the demo's band has (27 Oct, the user: "just use house bg in that
   section"; house.jpg, free Unsplash photograph, its licence in .agent/demos/assets/img/README.md): no people, so no
   face is cut or hidden behind its cards. The building on the right, under the ink shade the trade page's bands have. */
#lp-steps::before { background: color-mix(in srgb, var(--lp-ink) 82%, transparent); }
#lp-steps .lp-steps p { color: color-mix(in srgb, var(--brand-on) 90%, transparent); }
#lp-steps .lp-photo-img { object-position: 72% 50%; }

/* The registration form at the foot of the page, as on the trade page: the words on the ink panel's left, the form on
   its right; one column on a phone, where the form keeps most of the width, reaching into the panel's padding, 12px
   from its edge. */
.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); } }
@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-register-card form { display: flex; flex-direction: column; gap: var(--s4); }
.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 select.input { cursor: pointer; }
.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); }

/* On a phone the example quote keeps most of the width, as on the trade page: it reaches into its panel's padding,
   12px from the panel's edge, and pads its rows a step less. */
@media (max-width: 640px) {
  #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); }
}

/* 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 .brand { margin-bottom: var(--s5); }

/* The demo hides its header's Join button below 700px, to keep Sign in and the menu; this header has only the logo
   and Register free, which fit. */
@media (max-width: 700px) {
  .public-header-actions .btn-primary { display: inline-flex; }
}
/* On a phone the logo keeps a size that reads, as on the trade page (24 Oct, the user: "the logo looks very small in
   mobile"), a step smaller here for Direct beside it, still leaving room for Register free. */
@media (max-width: 480px) {
  .public-shell .brand-public .brand-name { font-size: clamp(16px, 4.6vw, 21px); }
  .public-header-actions .btn-primary { white-space: nowrap; }
}
/* Under 340px the logo with Direct and "Register free" do not fit side by side: the button says Register. */
@media (max-width: 339px) {
  .public-header-actions .lp-free { display: none; }
}

/* The footer: the logo and its one line, then the copyright bar, where a plain link leads to Contractor Trade for
   trades and contractors (27 Oct). The demo's link columns are not here, so its four-column grid becomes one row. */
.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; }
}