/* ==========================================================================
   Contractor Trade, public.css
   The public-facing layer: the two landing sites, About, Find a Trade,
   professional profiles, ecosystem directories.

   Solid colour only: no gradients, no glassmorphism.
   ========================================================================== */

/* ==========================================================================
   Hero parts shared by both sites
   ========================================================================== */

/* --- The photograph stack --------------------------------------------------
   Three frames in three positions. The two behind are offset down and to the
   right and scaled back, which is what makes them read as a stack rather than
   as three pictures that failed to line up.

   The transform is on the frame itself and nothing animates but transform and
   opacity, so the browser can do the whole thing on the compositor.
   ------------------------------------------------------------------------- */
.frame-stack {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 56px;
  cursor: pointer;
}
.frame {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface-3);
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease-out),
              opacity var(--t-slow) var(--ease-out);
}
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.frame[data-pos="front"] { transform: none; opacity: 1; z-index: 3; box-shadow: var(--sh-2); }
.frame[data-pos="mid"]   { transform: translate(4.5%, 5.5%) scale(.94); opacity: 1; z-index: 2; }
.frame[data-pos="back"]  { transform: translate(9%, 11%) scale(.88); opacity: 1; z-index: 1; }

/* Only the front frame is readable, so only the front frame is labelled. */
.frame figcaption {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  max-width: calc(100% - var(--s6));
  padding: 4px var(--s3);
  border-radius: var(--r-btn);
  background: var(--brand);
  color: var(--brand-on);
  font-size: var(--fs-11);
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.frame[data-pos="front"] figcaption { opacity: 1; }

.frame-dots {
  position: absolute;
  right: 0;
  bottom: -60px;
  display: flex;
  gap: var(--s1);
  z-index: 4;
}
.frame-dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-full);
}
.frame-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--brand-on) 42%, transparent);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.frame-dot:hover::before { background: color-mix(in srgb, var(--brand-on) 72%, transparent); }
.frame-dot[aria-selected="true"]::before { background: var(--brand-on); transform: scale(1.2); }
.frame-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* Somebody who asked for less movement gets a stack that simply sits there.
   It still switches when they click it. */
:root[data-motion="reduced"] .frame { transition: none; }

/* On the dark hero the stack's dots are light. Once the columns fold, the
   stack follows the copy, with room under it for the dots. */
@media (max-width: 860px) {
  .lp-hero-media { margin-bottom: 0; }
  .frame-dots { right: 50%; transform: translateX(50%); }
}

/* ==========================================================================
   Trade category grid
   ========================================================================== */
.trade-grid {
  display: grid;
  /* 248px gave five columns on a full page, and five columns put almost
     every name on two lines. Four with room to read beats five that wrap. */
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: var(--s4);
}
.trade-tile {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5);
  border: var(--lp-bw) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.trade-tile:hover { border-color: var(--accent); background: var(--surface-2); }
/* A trade's drawn icon (10 Oct), the same drawing as on the homeowner
   page's tiles, a size down beside its name. */
.trade-tile-icon { flex: none; display: block; width: 44px; height: 44px; color: var(--text); }
.trade-tile-icon svg { display: block; width: 100%; height: 100%; }
.trade-tile .grow { min-width: 0; }

/* Two thirds of the trade names are two words joined by an ampersand
   "Windows, Doors & Glazing" needs about 175px at this size. Truncating them
   to "Windows, Doors &…" was the bug: a category list that hides the category.
   The name wraps to a second line instead, and the tile has a floor height so
   one-line and two-line tiles sit on the same rhythm. */
.trade-tile { min-height: 88px; }
.trade-tile-name {
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
}
.trade-tile-count { font-size: var(--fs-14); color: var(--text-3); margin-top: 2px; }

/* ==========================================================================
   Pricing (subscription bands)
   ========================================================================== */
.price-table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.price-cell {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
  background: var(--surface);
  text-align: center;
}
.price-cell[data-featured="true"] { border-color: var(--accent); background: var(--accent-soft); }
.price-band { font-size: var(--fs-14); color: var(--text-2); }
.price-amount {
  font-size: var(--fs-24);
  font-weight: 620;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.price-period { font-size: var(--fs-13); color: var(--text-3); }
@media (max-width: 860px) { .price-table { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Search results (Find a Trade)
   ========================================================================== */
.search-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
/* The filters stay in view and scroll on their own, however long the
   list of regions and areas grows. */
.search-filters {
  position: sticky;
  top: calc(76px + var(--s5));
  max-height: calc(100vh - 76px - var(--s5) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.filter-group { padding: var(--s4); border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: none; }
.filter-group h4 { margin-bottom: var(--s3); }
.filter-sub { font-size: var(--fs-13); font-weight: 600; color: var(--text-2); margin-bottom: var(--s2); }
.filters-toggle { display: none; }

/* Find a trade: a short head, then filters and results straight away. */
.find-page { padding-top: var(--s6); }
.find-head { margin-bottom: var(--s5); }
.find-head .crumbs { margin-bottom: var(--s2); }
.search-filters .filter-group { padding: var(--s5) var(--s5); }
.search-filters .filter-group h4 { font-size: var(--fs-15, .9375rem); margin-bottom: var(--s3); }
.search-filters .chip { height: 32px; padding: 0 var(--s3); gap: 6px; font-size: var(--fs-13); }
.search-filters .row.gap-2 { gap: var(--s2); }
.chip[aria-pressed="true"] .chip-count { color: inherit; opacity: .75; }
.tree { display: flex; flex-direction: column; gap: 2px; }
.tree-row { display: flex; align-items: center; gap: var(--s2); padding: 7px 0; font-size: var(--fs-14); color: var(--text); cursor: pointer; }
.tree-row.is-empty { color: var(--text-3); }
.tree-parent { display: flex; align-items: center; gap: 2px; margin-left: -5px; }
.tree-parent.is-empty .tree-label { color: var(--text-3); }
.tree-toggle { width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--r-toggle); background: none; color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.tree-toggle svg { transition: transform var(--t-fast) var(--ease); }
.tree-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.tree-toggle:hover { background: var(--surface-2); color: var(--text); }
.tree-label { display: flex; align-items: center; gap: var(--s2); flex: 1; min-width: 0; padding: 7px 0;
  font-size: var(--fs-14); font-weight: 500; color: var(--text); cursor: pointer; }
/* Rows pick like chips: no box, a tick when picked, a dash when a region
   is picked in part, a faint tick on hover. The box is still there for the
   keyboard and screen readers. */
.tree-row, .tree-label { position: relative; border-radius: var(--r-sm); padding-left: 6px; padding-right: 6px; }
.tree-row input, .tree-label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tick-mark { width: 14px; height: 14px; flex-shrink: 0; background: transparent; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.tree-row:hover, .tree-label:hover { background: var(--surface-2); }
.tree-row:hover .tick-mark, .tree-label:hover .tick-mark { background: var(--text-3); }
.tree-row:has(input:checked), .tree-label:has(input:checked) { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); font-weight: 600; }
.tree-row:has(input:checked) .tick-mark, .tree-label:has(input:checked) .tick-mark { background: var(--accent); }
.tree-label:has(input[data-partial]) { font-weight: 600; }
.tree-label:has(input[data-partial]) .tick-mark { background: var(--accent); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.tree-row:has(input:focus-visible), .tree-label:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--ring); }
.tree-children { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 var(--s2) 6px; padding-left: 18px; border-left: 1px solid var(--border); }
.tree-children[hidden] { display: none; }
.tree-code { font-size: var(--fs-12); color: var(--text-3); letter-spacing: .04em; margin-left: 2px; }

@media (max-width: 1100px) {
  .search-layout { grid-template-columns: minmax(0, 1fr); }
  .search-filters { position: static; max-height: none; display: none; }
  .search-filters.is-open { display: block; }
  .filters-toggle { display: inline-flex; }
}

/* --- Professional result card --------------------------------------------- */
.pro-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease);
}
.pro-card:hover { border-color: var(--border-strong); }
.pro-card-body { min-width: 0; }
.pro-card-name { font-size: var(--fs-16); font-weight: 600; letter-spacing: -.01em; }
.pro-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: 4px; }
.pro-card-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pro-card-meta .ico { opacity: .65; }
.pro-card-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
  text-align: right;
}
@media (max-width: 860px) {
  .pro-card { grid-template-columns: auto minmax(0, 1fr); padding: var(--s4); }
  .pro-card-aside {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding-top: var(--s3);
    border-top: 1px solid var(--border);
  }
}

/* ==========================================================================
   Professional profile page
   ========================================================================== */
/* Cover and identity are one card, clipped to the same corner as every other
   card on the page, with the gutter the rest of the layout uses. */
/* Same top inset and same gutter as .section-page, because arriving on a
   member profile and arriving on the trade list should not feel like two
   different products. */
.profile-top {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s7) var(--s7) 0;
}
.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.profile-cover .media { border-radius: 0; border: none; border-bottom: 1px solid var(--border); }
.profile-hero-inner {
  padding: var(--s6);
  display: flex;
  gap: var(--s6);
  align-items: flex-start;
  flex-wrap: wrap;
}
.profile-hero-inner .grow { min-width: 260px; }
.profile-cta { min-width: 200px; }
.profile-layout {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s5) var(--s7) var(--s9);
  display: grid;
  /* Same column width and same gutter as the in-app detail layout. They were
     328px/24px here and 320px/20px there, so the two pages that are otherwise
     the same shape did not line up. */
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  gap: var(--s5);
  align-items: start;
}
/* The gap between cards is the same in both columns and the same as the
   gutter between them. Three different values in one view is what reads as
   uneven, however carefully each one was chosen. */
.profile-aside {
  position: sticky;
  top: calc(var(--public-header-h) + var(--s5));
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
@media (max-width: 1100px) {
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .profile-aside { position: static; }
}
@media (max-width: 860px) {
  .profile-top { padding: var(--s5) var(--s4) 0; }
  .profile-hero-inner { padding: var(--s5); gap: var(--s5); }
  /* The 260px floor keeps the name and meta on one comfortable measure on a
     wide screen. On a 320px phone it is wider than the card it sits in, and
     a wrapped flex item still cannot shrink below its own minimum, so the
     floor comes off rather than pushing the page sideways. */
  .profile-hero-inner .grow { min-width: 0; }
  .profile-cta { min-width: 0; width: 100%; }
  .profile-layout { padding: var(--s4) var(--s4) var(--s9); }
}

/* ==========================================================================
   Portals
   ========================================================================== */
.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--s5);
  align-items: stretch;
}
.portal-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  min-width: 0;
}
.portal-card[data-current="true"] { border-color: var(--accent); background: var(--surface-brand); }
.portal-card-head { display: flex; align-items: flex-start; gap: var(--s4); }
.portal-card-head .grow { min-width: 0; }
.portal-modules {
  padding: var(--s5);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.portal-card[data-current="true"] .portal-modules { background: var(--surface); }
.portal-card-foot { margin-top: auto; padding-top: var(--s2); }

/* ==========================================================================
   Directory (suppliers, services, careers, trade exchange)
   ========================================================================== */
/* 288px gave four columns on a full-width page, and four columns gave every
   name two lines, every category line two lines and a description clamped
   mid-word. Three columns with room to read beats four that are full of
   wrapping. */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s4); }
.dir-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease);
}
.dir-card:hover { border-color: var(--border-strong); }
.dir-card-foot { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--border); }

/* ==========================================================================
   Advertising placement: a real product surface, labelled as advertising
   ========================================================================== */
.ad-slot {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
/* The disclosure and the advert share one horizontal inset. They were 12px
   and 16px, which is small enough to look like a mistake rather than a
   choice, and it is a mistake. */
.ad-slot-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ad-slot-media {
  aspect-ratio: 16 / 6;
  min-height: 96px;
  max-height: 180px;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.ad-slot-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-slot-body { padding: var(--s4); display: flex; gap: var(--s3); align-items: flex-start; }
.ad-slot-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.ad-slot-row .ad-slot-label { grid-column: 1 / -1; }
.ad-slot-row .ad-slot-media { aspect-ratio: auto; max-height: none; min-height: 160px; border-bottom: 0; border-right: 1px solid var(--border); }
.ad-slot-row .ad-slot-body { padding: var(--s5); }
@media (max-width: 640px) {
  .ad-slot-row { grid-template-columns: minmax(0, 1fr); }
  .ad-slot-row .ad-slot-media { min-height: 0; aspect-ratio: 16 / 7; border-right: 0; border-bottom: 1px solid var(--border); }
}
.ad-slot-name {
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .02em;
}

/* ==========================================================================
   Auth pages
   ========================================================================== */
.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s8) var(--s7);
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.auth-aside {
  background: var(--brand);
  color: var(--brand-on);
  /* The same two-tone wordmark and standalone mark inverted on ink. */
  --brand-text-a: var(--brand-on);
  --brand-text-b: var(--accent-on-dark);
  --brand-mark-accent: var(--accent-on-dark);
  padding: var(--s9) var(--s8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-aside .lede { color: color-mix(in srgb, var(--brand-on) 78%, transparent); }
.auth-aside .divider { background: color-mix(in srgb, var(--brand-on) 18%, transparent); }
.auth-quote { font-size: var(--fs-18); line-height: 1.5; letter-spacing: -.012em; }

.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
/* The four ways into the product. These were `.check`, a horizontal checkbox
   row: turned into a column card by four inline overrides, so the icon sat
   hard against the left edge above text on a different optical centre, and
   cards of unequal text length came out unequal heights. Their own class,
   centred, and stretched to the tallest in the row. */
.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s3);
  height: 100%;
  padding: var(--s5) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.role-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.role-card .check-title { display: block; }
.role-card .check-desc { display: block; margin-top: 2px; }
@media (max-width: 1100px) { .auth-layout { grid-template-columns: minmax(0, 1fr); } .auth-aside { display: none; } }
@media (max-width: 640px) { .auth-panel { padding: var(--s6) var(--s4); } .role-grid { grid-template-columns: minmax(0, 1fr); } }

/* Demo persona picker, the fastest route into each of the nine journeys. */
.persona-list { display: flex; flex-direction: column; gap: var(--s2); }
.persona-btn {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: left;
  min-height: var(--tap-min);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.persona-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.persona-btn .grow { min-width: 0; }
.persona-name { font-size: var(--fs-13); font-weight: 600; }
.persona-role { font-size: var(--fs-12); color: var(--text-2); }

/* ==========================================================================
   The two public sites, on the reviewer page
   ========================================================================== */
/* Side by side, because the arrangement only makes sense seen together: two
   addresses, two sets of words, one platform. */
.door-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.door-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.door-card-head .mono { color: var(--text-2); word-break: break-all; }
.door-card-body { padding: var(--s5); flex: 1 1 auto; }
.door-card-body .h2 { font-size: var(--fs-20); line-height: 1.25; }
.door-card .btn { margin: 0 var(--s5) var(--s5); width: calc(100% - var(--s5) * 2); }

/* Label above value, both left aligned. A definition list set as a row is
   the shape that wraps badly the moment either side is prose. */
.door-facts { display: grid; gap: var(--s3); margin: 0; }
.door-facts dt {
  font-size: var(--fs-11);
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.door-facts dd { margin: 2px 0 0; font-size: var(--fs-13); color: var(--text-2); }

@media (max-width: 860px) {
  .door-card-head { flex-direction: column; align-items: flex-start; gap: var(--s1); }
}

/* ==========================================================================
   Find a trade
   ========================================================================== */
/* The trail back up the page set. A category page is reachable directly from
   a search engine, so it has to say where it sits without you having come
   through the pages above it. */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-bottom: var(--s3);
  font-size: var(--fs-12);
  color: var(--text-3);
  flex-wrap: wrap;
}
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--accent); }
.crumbs svg { opacity: .5; flex-shrink: 0; }

/* A filter that is currently on, and the way to turn it off. Five filters in
   a sidebar tell you nothing at a glance, least of all when you arrived from
   a link that set three of them. */
.chip-removable {
  gap: var(--s1);
  padding-right: var(--s2);
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-ink);
}
.chip-removable svg { opacity: .7; }
.chip-removable:hover { background: var(--accent-soft-2); color: var(--accent-ink); }
.chip-removable:hover svg { opacity: 1; }

/* ==========================================================================
   Landing

   Two public sites using one design system. The demo can show the discarded
   one-site header switch for comparison; two separate sites is the default.

   Colour carries meaning, the same on both audiences:
     ink           structure
     light grey    the one light colour, used inside sections only
                   (panels, the switch track, chips) and for the footer.
                   Sections are white or ink, nothing else
     teal          action, and the ticks that go with it
     teal          checked: the checks section only, on a neutral grey
   The grey there is neutral on purpose. Colour
   lives in fills, never in text: text is white on dark and ink on light.
   Solid fills only, no gradients.
   ========================================================================== */
:root { --lp-rise: cubic-bezier(.2, .7, .2, 1); }
.public-shell { --display: var(--public-display); font-family: var(--public-font); }

.public-nav-trigger, .public-nav-link { white-space: nowrap; }
.public-menu-button { display: none; }

/* The public header gives the wordmark more room than the application
   rail: it is the logo on its own now, with no mark beside it (11 Oct). The
   sign-in page's dark panel shows it at the same size. */
.public-shell .brand-public .brand-name,
.auth-aside .brand-name { font-size: var(--fs-30); }
/* DIRECT is part of the homeowner site's name, not a small descriptor. Keep
   it clearly readable beside the shared wordmark at every public breakpoint. */
.public-shell .brand-public .brand-c {
  --brand-c-size: .64;
  margin-left: .42em;
  font-weight: 700;
  letter-spacing: .1em;
}
.public-site-menu {
  min-width: 248px;
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
/* The footer: the one light colour, no rule across the top, headings in
   ink rather than small grey capitals, and the bottom line aligned to the
   same gutter as everything else. */
.public-footer { background: var(--lp-tint); border-top: 0; }
.public-main:has(> .lp) + .public-footer { margin-top: 0; }
.public-footer-inner {
  padding-top: var(--s9);
  padding-bottom: var(--s8);
  column-gap: var(--s7);
  row-gap: var(--s7);
}
/* On a desktop the brand block is a little narrower, so each of the trade
   side's four groups has room for its longest link on one line. Narrower
   screens keep their own layouts. */
@media (min-width: 1101px) {
  .public-footer-inner { grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); }
}
/* Each group is a plain title with its links under it. A link carries a fine
   line under it in its own text colour; on hover the words and the line go
   to ink. No accent here (2 Oct, the user: "border bottom in links not
   headings ... on hover black, clean"). */
.public-footer h4 {
  font-size: var(--fs-15); font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--text); white-space: nowrap;
  margin-bottom: var(--s3);
}
.public-footer li { margin-bottom: 2px; }
/* A comfortable target for a thumb: the link fills the line it sits on. */
.public-footer li a {
  display: inline-block;
  padding: 6px 0;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}
.public-footer a {
  font-size: var(--fs-15); color: var(--text-2);
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.public-footer a:hover { color: var(--text); text-decoration: none; }
.public-footer li a:hover, .public-footer li a:focus-visible {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: currentColor;
}
/* The brand block keeps clear of the first group. */
.footer-brand { padding-right: var(--s6); }
.footer-lede { max-width: 28rem; font-size: var(--fs-14); line-height: 1.6; }
/* The platform motto, set as a quote: one teal opening mark hung in the
   margin, the words in ink at reading weight, nothing bold or boxed. */
.footer-motto {
  position: relative;
  max-width: 26rem;
  margin-top: var(--s4);
  padding-left: 1.6rem;
  font-size: var(--fs-16);
  font-weight: 550;
  line-height: 1.5;
  color: var(--text);
}
.footer-motto::before {
  content: '\201C';
  position: absolute; left: 0; top: -.2rem;
  font-size: 2.1rem; font-weight: 700; line-height: 1;
  color: var(--accent);
}
.footer-motto:empty { display: none; }

/* The line under the columns spans the content, not the gutters. */
.public-footer-base {
  width: calc(100% - 2 * var(--s7));
  max-width: calc(var(--page-max) - 2 * var(--s7));
  padding: var(--s5) 0 var(--s6);
  row-gap: var(--s2);
  font-size: var(--fs-14);
  line-height: 1.6;
}
/* The copyright line, then the note under it, each on a line of its own. */
.public-footer-base > span { flex: 1 0 100%; }
.public-footer-base > span:first-child { color: var(--text-2); }
@media (max-width: 640px) {
  .public-footer-base { width: calc(100% - 2 * var(--s4)); }
}

/* --- Frame ------------------------------------------------------------------ */
/* The landing's spacing, written once (3 Oct). Every section below reads
   these, so the gaps and the paddings are the same down the page and on
   every page built from these sections (both front pages, About, the
   homeowner's Pricing). The narrower screens step them down here too, so
   no section sets a figure of its own. */
.lp {
  color: var(--text);
  --lp-gap:      var(--s12);   /* between sections; top and bottom inside a band */
  --lp-head-gap: var(--s9);    /* a section's heading to what it heads */
  --lp-grid-gap: var(--s6);    /* between cards, and between a pair of panels */
  --lp-card-pad: var(--s7);    /* inside a card */
  --lp-check-pad: var(--s6);   /* inside a check card: a step tighter (8 Oct, the user) */
  --lp-panel-y:  var(--s10);   /* inside a panel: the two audiences, the feature, the closing */
  --lp-panel-x:  var(--s9);
  /* One scale for recurring section titles and one for the two deliberate
     feature statements. This prevents one-off headings drifting in size. */
  --lp-title-size: clamp(1.9rem, 2.8vw, 2.75rem);
  --lp-feature-title-size: clamp(2.25rem, 3.6vw, 3.5rem);
}
@media (max-width: 1100px) { .lp { --lp-gap: var(--s11); } }
@media (max-width: 860px)  { .lp { --lp-gap: var(--s10); --lp-card-pad: var(--s6); --lp-check-pad: var(--s5); --lp-panel-y: var(--s7); --lp-panel-x: var(--s6); } }
@media (max-width: 640px)  { .lp { --lp-head-gap: var(--s7); --lp-grid-gap: var(--s5); } }
/* The same width and gutter as the header, so the hero lines up under the
   logo rather than sitting inside it. */
.lp-wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--s7); }
.lp-section { padding: var(--lp-gap) 0; }
/* One gap between sections everywhere: two white sections in a row share
   it rather than stacking both paddings into twice the gap. A band change,
   white to ink or back, keeps both, since the colour itself divides them:
   one gap of white before the band, one gap inside it. The footer is a
   band too, so the last section keeps its gap above it. */
.lp-section:not(.lp-dark):not(.lp-tint-section) +
.lp-section:not(.lp-dark):not(.lp-tint-section) { padding-top: 0; }
.lp-dark { background: var(--lp-ink); color: var(--brand-on); }
.lp-tint-section { background: var(--lp-tint); }

.lp-eyebrow {
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-on) 62%, transparent);
  margin-bottom: var(--s4);
}
.lp-dark .lp-eyebrow, .lp-hero .lp-eyebrow { color: color-mix(in srgb, var(--brand-on) 74%, transparent); }

.lp-display {
  font-family: var(--display);
  font-size: clamp(2.55rem, 4.5vw, 4rem);
  line-height: 1.07;
  letter-spacing: -.012em;
  word-spacing: .035em;
  font-weight: 700;
  text-wrap: balance;
  /* The grey shade (1 Oct): the first line sits back, in grey; the
     claim comes forward, in white. Emphasis by brightness, not colour. */
  color: color-mix(in srgb, var(--brand-on) 60%, transparent);
}
.lp-display em { font-style: normal; color: var(--brand-on); }
/* Contractor Trade's hero claim in a metal shade (11 Oct, the user), where
   the browser can clip a background to the letters; elsewhere it stays the
   plain white above. It is set on the headline's own box, so it is one
   sweep over both lines. The homeowner hero's claim is plain ink (11 Oct:
   "like before, no gradient"). The shade is in tokens.css. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lp-hero-home:not(.lp-hero-soft) .lp-display {
    background-image: var(--lp-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  @media (forced-colors: active) {
    .lp-hero-home:not(.lp-hero-soft) .lp-display { background-image: none; -webkit-text-fill-color: currentColor; }
  }
}
/* The titles bolder (8 Oct, the user, twice: "a bit bolder", then "a bit
   bold more"), so the capital words in them are the heaviest weight. */
.lp-display strong, .lp-h2 strong, .lp-h4 strong, .lp-statement strong,
.lp-strip strong { font-weight: 800; }
/* A capital word in running text lands by weight alone. */
.lp-lede strong, .lp-check p strong, .lp-ticks strong, .lp-sub strong { font-weight: 650; color: inherit; }
.lp-h2 {
  font-family: var(--display);
  font-size: var(--lp-title-size);
  line-height: 1.1;
  letter-spacing: -.012em;
  word-spacing: .035em;
  font-weight: 700;
  text-wrap: balance;
}
.lp-h3 { font-family: var(--display); font-size: var(--fs-24); font-weight: 700; letter-spacing: -.01em; }
.lp-h4 { font-size: var(--fs-18); font-weight: 750; letter-spacing: -.012em; }
.lp-sub { font-size: var(--fs-18); color: var(--text-2); margin-top: var(--s4); line-height: 1.6; }
.lp-dark .lp-sub { color: color-mix(in srgb, var(--brand-on) 78%, transparent); }

.lp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s7);
  flex-wrap: wrap;
  margin-bottom: var(--lp-head-gap);
}

/* --- Hero ----------------------------------------------------------------------- */
.lp-hero { background: var(--lp-ink); color: var(--brand-on); padding: clamp(40px, 8vh, 80px) 0 clamp(48px, 10vh, 104px); }
/* The landing hero, including its three proof statements, occupies the first
   screen under the header. Inner pages keep the short hero. */
.lp-hero-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - var(--public-header-h));
  min-height: calc(100svh - var(--public-header-h));
  display: flex;
  flex-direction: column;
  padding: 0;
}
.lp-hero-geometry, .lp-feature-geometry {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* The hero's lines lighter (8 Oct, the user: "make those geometric shapes a
   bit lighter", then "a bit more lighter"), so they sit well back behind
   the copy. */
.lp-geo-line {
  fill: none;
  stroke: color-mix(in srgb, var(--brand-on) 6.5%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.lp-hero-stage, .lp-strip { position: relative; z-index: 1; }
.lp-hero-stage {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  padding: clamp(32px, 6vh, 64px) 0;
}
.lp-hero-stage > .lp-wrap { width: 100%; }
@media (max-width: 860px) {
  .lp-hero-home { min-height: 0; }
  .lp-hero-geometry { opacity: .72; }
}
.lp-hero-short { padding: var(--s10) 0; }
.lp-hero-short .lp-display { font-size: clamp(2.1rem, 3.8vw, 3.25rem); }
/* The trade Pricing page: a price's period in the reading weight, and the two
   columns under the bands each their own height, so neither is stretched. */
.tier-per { font-weight: 400; }
.pricing-more { align-items: start; }
/* More air between the band cards on the public page; the panel's own
   Subscription grid keeps its spacing. */
.tier-grid.pricing-bands { gap: var(--s5); }
.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: var(--s10);
  align-items: center;
}
.lp-hero-copy { min-width: 0; }
.lp-lede {
  text-wrap: pretty;
  font-size: clamp(var(--fs-18), 1.35vw, var(--fs-20));
  line-height: 1.55;
  color: color-mix(in srgb, var(--brand-on) 88%, transparent);
  max-width: 34em;
  margin-top: var(--s5);
}
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }
.lp-btn-light { background: var(--brand-on); color: var(--lp-ink); border: 1px solid var(--brand-on); }
.lp-btn-light:hover { background: color-mix(in srgb, var(--brand-on) 88%, transparent); border-color: transparent; }
.lp-btn-secondary { background: color-mix(in srgb, var(--brand-on) 8%, transparent); color: var(--brand-on); border: 1px solid color-mix(in srgb, var(--brand-on) 38%, transparent); }
.lp-btn-secondary:hover { border-color: var(--brand-on); background: color-mix(in srgb, var(--brand-on) 16%, transparent); }
.lp-hero-media { min-width: 0; padding-right: var(--s4); }

/* --- Strip ------------------------------------------------------------------ */
/* Three short proof points, read as editorial notes rather than feature
   badges. The numbering creates a steady scan across the band. */
.lp-strip { background: var(--lp-ink-2); color: var(--brand-on); border-top: 1px solid var(--lp-line); }
.lp-strip ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: var(--s5);
  padding-bottom: var(--s5);
  list-style: none;
}
.lp-strip li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: var(--s3);
  padding: 0 var(--s6);
  border-left: 1px solid var(--lp-line);
}
.lp-strip li:first-child { padding-left: 0; border-left: 0; }
.lp-strip li:last-child { padding-right: 0; }
/* The number is set like the title it numbers (7 Oct: "1. 2. 3."), so
   the two read as one line. */
.lp-strip-no {
  color: var(--accent-on-dark);
  font-family: var(--display);
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 1.35;
}
.lp-strip-title {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-18);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}
.lp-strip-title strong { display: inline; font-size: inherit; }
.lp-strip small {
  display: block;
  margin-top: 6px;
  color: color-mix(in srgb, var(--brand-on) 72%, transparent);
  font-size: var(--fs-16);
  line-height: 1.5;
}

/* The recurring message beat (4 Oct): one direct statement and its
   clarifying line on the left, the drawing on the right, centred on each
   other, on a panel in the page's one light tint, as wide as the page's
   content and padded like the other panels, so the space round the words
   has a shape. No label over it and no rules. The drawing's disc is the
   page's white on the tint. On a phone the drawing leads and both are
   centred. */
.lp-statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s10);
  align-items: center;
  padding: var(--lp-panel-y) var(--lp-panel-x);
  border-radius: var(--r-xl);
  background: var(--lp-tint);
  --art-disc: var(--surface);
}
.lp-statement-art {
  display: block;
  width: clamp(190px, 16vw, 240px); height: auto;
  aspect-ratio: 1 / 1;
}
.lp-statement h2 {
  max-width: 18ch;
  font-family: var(--display);
  font-size: var(--lp-feature-title-size);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.05;
  text-wrap: balance;
}
.lp-statement p {
  max-width: 50em;
  margin-top: var(--s5);
  color: var(--text-2);
  font-size: var(--fs-18);
  line-height: 1.55;
}
.lp-section-kicker {
  font-size: var(--fs-14);
  font-weight: 650;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s3);
}

/* --- Two audiences, on the contractor side --------------------------------------- */
.lp-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-grid-gap); }
.lp-panel {
  border-radius: var(--r-xl);
  padding: var(--lp-panel-y) var(--lp-panel-x);
  background: var(--lp-tint);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}
/* A pair of panels is one accent, one ink. */
.lp-panel-blue { background: var(--lp-vivid); color: var(--accent-on); }
.lp-panel-ink  { background: var(--lp-ink);   color: var(--brand-on); }
.lp-panel-ink .lp-eyebrow { color: color-mix(in srgb, var(--brand-on) 70%, transparent); }
.lp-panel-ink .lp-sub { color: color-mix(in srgb, var(--brand-on) 80%, transparent); }
.lp-panel-blue .lp-eyebrow { color: color-mix(in srgb, var(--accent-on) 68%, transparent); }
.lp-panel-blue .lp-sub { color: color-mix(in srgb, var(--accent-on) 78%, transparent); }
.lp-panel-blue .lp-btn-light { color: var(--accent-ink); }
.lp-panel > .btn { margin-top: auto; }
.lp-panel-go {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s5);
  font-weight: 650;
}
.lp-panel-go svg { transition: transform var(--t-med) var(--ease); }
.lp-panel-link:hover .lp-panel-go svg { transform: translateX(4px); }

/* --- What happens before a lead reaches a member ----------------------------------
   One purposeful home for the client's member monologues. The statements
   read as an editorial list, with the product proof directly beneath each. */
.lp-qualification {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--s12);
  align-items: start;
}
.lp-qualification-intro { max-width: 34rem; }
.lp-monologues { list-style: none; counter-reset: monologue; border-top: 1px solid var(--lp-ink); }
.lp-monologues li {
  counter-increment: monologue;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--lp-ink);
}
/* The number in the heading's own type, on the heading's line. */
.lp-monologues li::before {
  content: counter(monologue) '.';
  color: var(--accent-ink);
  font-family: var(--display);
  font-size: var(--fs-24);
  font-weight: 700;
  letter-spacing: -.01em;
}
.lp-monologues p { margin-top: var(--s2); color: var(--text-2); font-size: var(--fs-16); line-height: 1.55; }

.lp-ticks { display: flex; flex-direction: column; gap: var(--s3); margin: var(--s5) 0 var(--s7); }
.lp-ticks li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-16); line-height: 1.55; }
.lp-ticks svg {
  flex-shrink: 0;
  width: 22px; height: 22px;
  padding: 4px;
  margin-top: 1px;
  border-radius: var(--r-full);
  background: var(--lp-vivid);
  color: var(--accent-on);
}
.lp-ticks-light li { color: color-mix(in srgb, var(--brand-on) 94%, transparent); }
.lp-ticks-light svg { background: var(--brand-on); color: var(--lp-ink); }
.lp-panel-blue .lp-ticks-light li { color: color-mix(in srgb, var(--accent-on) 90%, transparent); }
.lp-panel-blue .lp-ticks-light svg { color: var(--accent-ink); }
.lp-dark .lp-ticks-light svg { background: var(--lp-vivid); color: var(--accent-on); }

/* --- Steps, on ink -------------------------------------------------------------------- */
.lp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lp-grid-gap); counter-reset: none; }
/* A dark band on a photograph (8 Oct, the user: "add a background image, in
   black, clearly", then "don't make it black and white, keep natural" and
   "more dark, a bit on the black side, so the text is more visible"): the
   picture in its natural colour, set well back under a flat ink overlay, so
   the band stays black and its words come first; the cards on it stay
   solid. The steps on the homeowner page and the bands on the trade page. */
.lp-photo { position: relative; isolation: isolate; overflow: hidden; }
.lp-photo-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.lp-photo::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--lp-ink) 88%, transparent);
}
.lp-steps li {
  background: var(--lp-ink-2);
  border: var(--lp-bw) solid var(--lp-line-2);
  border-radius: var(--r-lg);
  padding: var(--lp-card-pad);
  text-align: center;
}
/* A step's icon in the centre of its card, the words centred under it, and
   no number (3 Oct). */
.lp-step-icon { display: block; width: 56px; height: 56px; margin: 0 auto var(--s5); color: var(--brand-on); }
.lp-steps p {
  font-size: var(--fs-16); color: color-mix(in srgb, var(--brand-on) 80%, transparent);
  margin-top: var(--s2); line-height: 1.55;
  text-wrap: balance;
}

/* --- Why it is different --------------------------------------------------------------
   Contractor Trade uses the dark alternating panel. DIRECT keeps the lighter
   homeowner treatment. The product preview remains white on both. The dark
   panel carries the hero's lines, at the hero's strength (8 Oct, the user:
   "add a bit geometric like we have in hero, to not look too plain black"):
   two large arcs beside the words, a ring in the lower corner and the
   hero's tilted rounded square behind the quote, drawn in the quote's
   column and a little wider than it, so it follows the quote as the panel
   narrows. Where the panel stacks, the words and the quote fill it and the
   lines are left out. */
.lp-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: var(--s10);
  align-items: center;
  padding: var(--lp-panel-y) var(--lp-panel-x);
  border-radius: var(--r-xl);
  background: var(--lp-tint);
}
.lp-feature-copy { display: flex; flex-direction: column; justify-content: center; padding-right: var(--s5); }
.lp-feature-dark {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--lp-ink); color: var(--brand-on);
}
.lp-feature-dark .lp-feature-media { position: relative; }
.lp-feature-frame {
  position: absolute; z-index: -1;
  top: 50%; left: 50%;
  width: 116%; max-width: none; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}
.lp-feature-dark .lp-section-kicker,
.lp-feature-dark .lp-sub { color: var(--brand-on); }
.lp-feature-media {
  display: flex;
  align-items: center;
}
.lp-feature .lp-ticks { margin-bottom: 0; }

.lp-mock {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-lg);
  border: var(--lp-bw) solid var(--border);
  box-shadow: none;
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
}
.lp-mock-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
}
.lp-mock-title { font-size: var(--fs-16); font-weight: 650; }
.lp-mock-sub { font-size: var(--fs-12); color: var(--text-3); margin-top: 2px; }
.lp-mock-badge {
  font-size: var(--fs-11); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-btn);
  padding: 0;
  background: transparent;
  color: var(--accent-ink);
}
.lp-mock-cols, .lp-mock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s3) var(--s5);
}
.lp-mock-cols {
  /* Keep the product preview white against the section's grey ground;
     hairlines provide the structure without repeating that grey inside. */
  background: var(--surface);
  font-size: var(--fs-11); font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3);
}
.lp-mock-row + .lp-mock-row { border-top: 1px solid var(--border); }
.lp-mock-stage { min-width: 0; font-size: var(--fs-14); font-weight: 550; }
.lp-mock-stage small { display: block; font-size: var(--fs-12); font-weight: 400; color: var(--text-3); margin-top: 1px; }
.lp-mock-by { font-size: var(--fs-12); font-weight: 600; padding: 4px 10px; border-radius: var(--r-btn); white-space: nowrap; }
.lp-by-contractor { background: var(--lp-ink);   color: var(--brand-on); }
.lp-by-client     { background: var(--lp-vivid); color: var(--accent-on); }
.lp-by-both       { background: var(--lp-tint);   color: var(--text); }
.lp-mock-foot {
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3) var(--s5);
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: var(--fs-12);
  color: var(--text-2);
}

/* --- Membership, on ink ------------------------------------------------------------ */
.lp-pricing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s10); align-items: center; }
.lp-pricing-title {
  max-width: 14ch;
  font-size: var(--lp-feature-title-size);
  line-height: 1.06;
}
.lp-dark .price-cell {
  background: var(--lp-ink-2);
  /* A firmer edge, so each band stands out on the photograph (8 Oct, the
     user: "make borders of those band cards a bit more thicker"): 2px and
     a step lighter, the padding 1px less so the card keeps its size. */
  border: var(--lp-bw) solid var(--lp-line-2);
  padding: calc(var(--s4) - 1px);
  color: var(--brand-on);
  /* The count at the foot of every cell, level across the row however the
     range above it wraps. */
  display: flex; flex-direction: column;
}
.lp-dark .price-cell .price-live { margin-top: auto; }
.lp-dark .price-cell .price-period { margin-bottom: var(--s3); }
.lp-dark .price-band   { color: color-mix(in srgb, var(--brand-on) 66%, transparent); }
.lp-dark .price-period { color: color-mix(in srgb, var(--brand-on) 50%, transparent); }
.lp-dark .price-cell[data-featured="true"] { background: var(--lp-vivid); border-color: var(--lp-vivid); color: var(--accent-on); }
.lp-dark .price-cell[data-featured="true"] .price-band,
.lp-dark .price-cell[data-featured="true"] .price-period { color: color-mix(in srgb, var(--accent-on) 70%, transparent); }
.price-band strong, .price-band span { display: block; }
.price-band strong { color: inherit; font-size: var(--fs-16); margin-bottom: 2px; }
.price-live {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--lp-line);
  color: color-mix(in srgb, var(--brand-on) 82%, transparent);
  font-size: var(--fs-14);
  font-weight: 550;
}
.price-live strong { color: var(--brand-on); font-size: var(--fs-18); }
.lp-dark .price-cell[data-featured="true"] .price-live {
  border-color: color-mix(in srgb, var(--accent-on) 28%, transparent);
  color: color-mix(in srgb, var(--accent-on) 82%, transparent);
}
.lp-dark .price-cell[data-featured="true"] .price-live strong { color: var(--accent-on); }
.public-main .tier-live {
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: var(--r-btn);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--fs-14);
  font-weight: 600;
}
.public-main .tier-live strong { font-size: var(--fs-16); }
/* The pricing page's small print, a size up for reading on a phone (1 Oct). */
.public-main .tier .eyebrow { font-size: var(--fs-13); }
.public-main .tier-foot p { font-size: var(--fs-14); line-height: 1.5; }
.lp-note-light { margin-top: var(--s5); font-size: var(--fs-16); line-height: 1.6; color: color-mix(in srgb, var(--brand-on) 76%, transparent); text-align: center; }
.lp-note-start { text-align: left; }

/* --- Cards on grey: checks and reviews -------------------------------------------------- */
.lp-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-grid-gap); }
.lp-checks-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-check, .lp-review {
  background: var(--surface);
  border: var(--lp-bw) solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--lp-card-pad);
}
.lp-check { padding: var(--lp-check-pad); }
.lp-check-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--lp-check-soft);
  color: var(--lp-check);
  margin-bottom: var(--s5);
}
/* The customer-side check is the one no competitor does, so it is the card
   in full colour. */
.lp-check-key { background: var(--lp-vivid); border-color: var(--lp-vivid); color: var(--accent-on); }
.lp-check-key .lp-check-icon { background: var(--brand-on); color: var(--accent-ink); }
.lp-check { display: flex; flex-direction: column; }
.lp-check p { font-size: var(--fs-16); color: var(--text-2); margin: var(--s2) 0 var(--s5); line-height: 1.55; }
/* What the check says on a real profile, read from the data. */
.lp-check-status {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px;
  border-radius: var(--r-btn);
  background: var(--lp-check-soft);
  /* Small text on the pale wash takes the accent's deeper ink. */
  color: var(--accent-ink);
  font-size: var(--fs-13);
  font-weight: 650;
}
.lp-check-key .lp-check-status { background: color-mix(in srgb, var(--accent-on) 10%, transparent); color: var(--accent-on); }
.lp-check-key p { color: color-mix(in srgb, var(--accent-on) 82%, transparent); }

.lp-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-grid-gap); }
.lp-review { display: flex; flex-direction: column; margin: 0; }
.lp-review blockquote { font-size: var(--fs-16); line-height: 1.6; color: var(--text); margin: var(--s4) 0 var(--s5); }
.lp-review figcaption { margin-top: auto; }
.lp-review figcaption b { display: block; font-size: var(--fs-15); }
.lp-review figcaption span { display: block; font-size: var(--fs-14); color: var(--text-3); margin-top: 2px; }
/* The trade tiles, on a front page, sit the same gap apart as its cards. */
.lp .trade-grid { gap: var(--lp-grid-gap); }

/* Hover, on the landing: only on things that can be clicked, and always the
   same: an ink line drawn a few pixels outside the card, so the card gets a
   second border rather than a lift and a shadow. Keyboard focus gets the
   same, since it means the same thing. */
.lp .trade-tile, .lp-panel-link {
  outline: 1.5px solid transparent;
  outline-offset: 0;
  transition: outline-color var(--t-med) var(--ease), outline-offset var(--t-med) var(--ease);
}
.lp .trade-tile:hover, .lp-panel-link:hover,
.lp .trade-tile:focus-visible, .lp-panel-link:focus-visible {
  outline-color: var(--lp-ink);
  outline-offset: 4px;
}

/* --- What we will not do -------------------------------------------------------------- */
.lp-nots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-grid-gap); }
.lp-nots li {
  display: flex; gap: var(--s4); align-items: flex-start;
  background: var(--surface);
  border: var(--lp-bw) solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--lp-card-pad);
}
.lp-not-x {
  display: grid; place-items: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: var(--r-full);
  background: var(--lp-ink); color: var(--brand-on);
}
.lp-nots b { font-size: var(--fs-18); }
.lp-nots p { font-size: var(--fs-16); color: var(--text-2); margin-top: var(--s1); line-height: 1.55; }

/* --- Closing: on a photograph ----------------------------------------------------------- */
.lp-closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s8);
  align-items: center;
  background: var(--lp-ink);
  color: var(--brand-on);
  border-radius: var(--r-xl);
  padding: var(--lp-panel-y) var(--lp-panel-x);
}
.lp-closing-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--lp-rise);
}
.lp-closing::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--image-overlay);
}
.lp-closing:hover .lp-closing-img { transform: scale(1.03); }
.lp-closing .lp-h2 { color: var(--brand-on); }
.lp-btn-secondary svg { transition: transform var(--t-med) var(--ease); }
.lp-btn-secondary:hover svg { transform: translateX(4px); }

/* --- What it costs (homeowners) ---------------------------------------------- */
.lp-costs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-grid-gap); }
.lp-cost { padding: var(--lp-card-pad); border: var(--lp-bw) solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.lp-cost-label { margin-top: var(--s4); font-size: var(--fs-15); color: var(--text-2); }
.lp-cost-value { margin-top: var(--s1); font-size: var(--fs-24); font-weight: 650; letter-spacing: -.01em; }
.lp-cost p { margin-top: var(--s2); font-size: var(--fs-16); line-height: 1.55; color: var(--text-2); }
@media (max-width: 860px) { .lp-costs { grid-template-columns: minmax(0, 1fr); } }

/* --- Motion ---------------------------------------------------------------------------
   Two things move. The hero settles in when the page is drawn, which is also
   what you see when the switch changes audience: the ink band stays put and
   only the words and the photograph change. Sections further down rise into
   place as they are reached. Both are short, and neither happens for anyone
   who has asked for less motion. */
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.lp-hero-copy > *, .lp-hero-media { animation: lp-rise 520ms var(--lp-rise) both; }
.lp-hero-copy > :nth-child(2) { animation-delay: 40ms; }
.lp-hero-copy > :nth-child(3) { animation-delay: 80ms; }
.lp-hero-copy > :nth-child(4) { animation-delay: 120ms; }
.lp-hero-copy > :nth-child(n+5) { animation-delay: 160ms; }
.lp-hero-media { animation-delay: 100ms; }

.lp[data-reveal] .lp-section > .lp-wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--lp-rise), transform 600ms var(--lp-rise);
}
.lp[data-reveal] .lp-section > .lp-wrap[data-in] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-hero-copy > *, .lp-hero-media { animation: none; }
}
:root[data-motion="reduced"] .lp-hero-copy > *,
:root[data-motion="reduced"] .lp-hero-media { animation: none; }
@media print {
  .lp[data-reveal] .lp-section > .lp-wrap { opacity: 1; transform: none; }
}

/* --- Narrower ---------------------------------------------------------------------------- */
/* The header holds the logo, the menus and the account actions on one
   line. On the trade side, below 1300px, the About link goes (it is in the
   footer). */
@media (max-width: 1380px) {
  .public-header-inner { gap: var(--s6); }
}
@media (max-width: 1300px) {
  body[data-site="commercial"] [data-nav-about] { display: none; }
}
@media (max-width: 1100px) {
  .lp-feature, .lp-pricing, .lp-closing { grid-template-columns: minmax(0, 1fr); }
  .lp-feature-geometry, .lp-feature-frame { display: none; }
  .lp-hero-grid { gap: var(--s8); }
  .lp-mock { margin-left: 0; }
  .lp-steps, .lp-checks-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The hero keeps the photographs beside the claim down to a small tablet;
   below that they run the full width under it, as on a phone. */
@media (max-width: 900px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .public-header-inner { min-height: var(--topbar-h); }
  .public-menu-button { display: inline-flex; }
  .lp-hero { padding: var(--s9) 0 var(--s10); }
  .lp-hero-home { padding: 0; }
  .lp-hero-stage { display: block; padding: var(--s9) 0 var(--s10); }
  .lp-duo, .lp-qualification, .lp-checks, .lp-nots, .lp-reviews { grid-template-columns: minmax(0, 1fr); }
  .lp-qualification { gap: var(--s8); }
  .lp-strip ol { grid-template-columns: minmax(0, 1fr); }
  .lp-strip li, .lp-strip li:first-child, .lp-strip li:last-child {
    padding: var(--s4) 0;
    border-left: 0;
    border-top: 1px solid var(--lp-line);
  }
  .lp-strip li:first-child { border-top: 0; }
  /* One centred moment: the drawing, then the statement. */
  .lp-statement { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: var(--s7); }
  .lp-statement-figure { order: -1; }
  .lp-statement-art { width: 180px; }
  .lp-statement h2, .lp-statement p { margin-inline: auto; }
  .lp-feature, .lp-pricing { gap: var(--s8); }
  .lp-feature-copy { padding-right: 0; }
  .lp-feature-media { padding: 0; }
}
/* The trade-side navigation has two long menu labels, so it moves into the
   same mobile menu a little earlier than the homeowner header: up to 1080px,
   where the labels and the account buttons no longer fit beside the name
   (8 Oct: at 940 to 980px they ran past the edge). */
@media (min-width: 861px) and (max-width: 1080px) {
  body[data-site="commercial"] .public-nav { display: none; }
  body[data-site="commercial"] .public-menu-button { display: inline-flex; }
}
@media (min-width: 861px) and (max-width: 940px) {
  .public-shell .brand-public .brand-name { font-size: var(--fs-20); }
  .public-header-inner { gap: var(--s4); }
}
@media (max-width: 640px) {
  .lp-wrap { padding: 0 var(--s4); }
  .lp-steps, .lp-checks-4 { grid-template-columns: minmax(0, 1fr); }
  /* Supporting copy stays comfortably readable near the end of a long page. */
  .lp-strip small,
  .lp-note-light,
  .lp-review figcaption span,
  .lp-cost-label { font-size: var(--fs-16); }
  .footer-lede,
  .public-footer-base { font-size: var(--fs-15); }
  .lp-hero-actions { flex-direction: column; }
  .lp-hero-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 580px) {
  .public-sign-in { display: none; }
}
@media (max-width: 480px) {
  .public-shell .brand-public .brand-name { font-size: var(--fs-18); }
  .public-shell .brand-public .brand-c { margin-left: .36em; }
  .public-menu-button { width: var(--tap-min); padding-inline: 0; }
  .public-menu-button span { display: none; }
}
/* The hero carries the join action; keeping the full company name in the
   header comes first on a small screen, so Join free leaves the header up to
   700px (8 Oct: from 500 to 660px it ran past the edge). Sign in and the
   menu stay. */
@media (max-width: 700px) {
  .public-header-actions .btn-primary { display: none; }
}
/* ==========================================================================
   The homeowner site: softer and brighter (10 Oct)
   Email, 9 Oct: "Softer look. Brighter colours. More icons to easy identify.
   Easy to navigate", with the top half of the page laid out again and the
   bottom half kept. One colour family for both sites (the user: no
   different colour for Direct). Where the trade site has ink and the warm
   grey tint, Contractor Trade Direct has the soft ground, the accent mixed
   into white (tokens.css), round icons a size up, and the accent itself on
   its one statement. The trade site is as it was.
   ========================================================================== */
body[data-site="residential"] .public-shell { --lp-tint: var(--lp-soft); }
/* A section a link goes to stops clear of the header. */
.lp > section { scroll-margin-top: calc(var(--public-header-h) + var(--s2)); }

/* --- The hero: light, the one action with a head start ---------------------- */
/* The same ground on this site's inner pages (Pricing, and About when it
   is read from here), so the site is one look from page to page. */
.lp-hero-soft,
body[data-site="residential"] .lp-hero-short { background: var(--lp-soft); color: var(--text); }
/* The name still sits back in grey and the claim comes forward, now in ink. */
.lp-hero-soft .lp-display,
body[data-site="residential"] .lp-hero-short .lp-display { color: var(--text-3); }
.lp-hero-soft .lp-display em,
body[data-site="residential"] .lp-hero-short .lp-display em { color: var(--text); }
.lp-hero-soft .lp-lede,
body[data-site="residential"] .lp-hero-short .lp-lede { color: var(--text-2); }
body[data-site="residential"] .lp-hero-short .lp-eyebrow { color: var(--accent-ink); }
/* The line round the photographs and the photograph slider are the trade
   hero's own, untouched: the same shape, size and place. Only their colours
   differ here (10 Oct, the user: "just make like how in Contractor Trade's,
   just colours different"): the line in a light accent, the dots in ink
   and the accent. */
.lp-hero-soft .lp-geo-line { stroke: color-mix(in srgb, var(--accent) 20%, transparent); }
.lp-hero-soft .frame-dot::before { background: color-mix(in srgb, var(--text) 24%, transparent); }
.lp-hero-soft .frame-dot:hover::before { background: color-mix(in srgb, var(--text) 50%, transparent); }
.lp-hero-soft .frame-dot[aria-selected="true"]::before { background: var(--accent); }

/* Its action is the accent itself, with what it costs beside it. */
.lp-hero-soft .lp-hero-actions { align-items: center; gap: var(--s3) var(--s5); }
.lp-cta-note {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--text-2);
  font-size: var(--fs-16);
  font-weight: 600;
}
.lp-cta-note svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-on);
}

/* --- The start: a trade's tile opens the brief with that trade ticked ------- */
.lp-start {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-start li { display: flex; }
.lp-start-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s6) var(--s2) var(--s5);
  border: var(--lp-bw) solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lp-start-tile:hover { border-color: var(--accent); background: var(--lp-soft); }
.lp-start-tile:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.lp-start-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--text);
}
/* The tile is its icon, so it is a size up from the cards' (56). */
.lp-start-icon svg { display: block; width: 100%; height: 100%; }
.lp-start-name { font-size: var(--fs-15); font-weight: 650; line-height: 1.3; text-wrap: balance; }

/* The three proof points as cards on both heroes: the number, the word, one
   line (10 Oct: first here, then on Contractor Trade, the user: "like how
   in the direct one, more visible"). The row keeps the hero's own ground
   behind it, so the rings stop at it. On ink the cards are the raised
   shade with the firmer line; on the soft ground, white. */
.lp-strip.lp-strip-cards { padding-bottom: var(--s9); border-top: 0; background: var(--lp-ink); }
.lp-strip.lp-strip-cards ol { gap: var(--lp-grid-gap); padding-top: 0; padding-bottom: 0; }
.lp-strip.lp-strip-cards li,
.lp-strip.lp-strip-cards li:first-child,
.lp-strip.lp-strip-cards li:last-child {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s3);
  align-items: start;
  padding: var(--s5) var(--s6);
  border: var(--lp-bw) solid var(--lp-line-2);
  border-radius: var(--r-lg);
  background: var(--lp-ink-2);
}
.lp-strip-cards small { margin-top: 2px; color: color-mix(in srgb, var(--brand-on) 82%, transparent); }
.lp-hero-soft .lp-strip.lp-strip-cards { background: var(--lp-soft); color: var(--text); }
.lp-hero-soft .lp-strip.lp-strip-cards li { border-color: var(--lp-soft-2); background: var(--surface); }
.lp-hero-soft .lp-strip-cards .lp-strip-no { color: var(--accent-ink); }
.lp-hero-soft .lp-strip-cards small { color: var(--text-2); }

/* --- The statement in the full accent --------------------------------------- */
/* The figure's hat and badge turn white on it, and its disc a lighter
   accent, so the hat still rises out of the disc and reads against both. */
.lp-statement-bright {
  background: var(--lp-vivid);
  color: var(--accent-on);
  --art-disc: color-mix(in srgb, var(--accent-on) 22%, var(--lp-vivid));
}
.lp-statement-bright p { color: var(--accent-on); font-size: var(--fs-20); font-weight: 600; }
.lp-statement-bright .lp-statement-art { --accent: var(--accent-on); }

/* --- Icons a size up, and round --------------------------------------------- */
body[data-site="residential"] .lp-check-icon { width: 52px; height: 52px; border-radius: var(--r-full); }
body[data-site="residential"] .lp-check-icon svg { width: 24px; height: 24px; }
/* The drawn icon of a check or a cost card: shown at its own 56 grid, so
   every line falls on a pixel. On the card in full colour its lines are
   white and its filled part a lighter accent. */
.lp-check-art { display: block; width: 56px; height: 56px; margin-bottom: var(--s5); color: var(--text); }
.lp-check-art svg { display: block; width: 100%; height: 100%; }
.lp-check-key .lp-check-art { color: var(--accent-on); --accent: color-mix(in srgb, var(--accent-on) 34%, transparent); }

/* The trade a brief starts with, said on the page before the brief. */
.post-start {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s3) var(--s5) var(--s3) var(--s3);
  border-radius: var(--r-btn);
  background: var(--accent-soft);
  color: var(--text);
  font-size: var(--fs-16);
  line-height: 1.4;
}
.post-start svg {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-on);
}

/* The homeowner header has Find a trade and four links since 10 Oct, so it
   moves into the menu where they no longer fit beside the name and the two
   buttons. */
@media (min-width: 861px) and (max-width: 1120px) {
  body[data-site="residential"] .public-nav { display: none; }
  body[data-site="residential"] .public-menu-button { display: inline-flex; }
}
@media (max-width: 1100px) {
  .lp-start { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lp-hero-soft .lp-hero-stage { padding: var(--s8) 0 var(--s9); }
  .lp-strip.lp-strip-cards { padding-bottom: var(--s8); }
  .lp-strip.lp-strip-cards ol { gap: var(--s3); }
}
@media (max-width: 640px) {
  .lp-cta-note { justify-content: center; }
  /* Two to a row, the icon beside the name, each a full finger tall. */
  .lp-start { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .lp-start-tile { flex-direction: row; gap: var(--s3); min-height: 64px; padding: var(--s2) var(--s3); text-align: left; }
  .lp-start-icon { width: 44px; height: 44px; }
}