/**
 * The landing page's own layout.
 *
 * This file used to carry a whole second palette, scoped to .bb-lp, because the
 * product around it was still the old warm-neutral design and merging the two
 * would have half-migrated every other screen. That is no longer true:
 * tokens.css now holds this palette for the entire product, so what is left
 * here is only the layout the landing page does not share with anything else —
 * the hero, the search panel, the step row, the facility band, the proof strip.
 *
 * The --lp-* names are kept and aliased to the global tokens below. They are
 * referenced from home.php and the lp_* partials, and renaming them across
 * those files would have been churn with nothing to show for it. There is one
 * source of truth for every value: tokens.css.
 */

.bb-lp {
  /* Aliases, not definitions. Change a colour in tokens.css. */
  --lp-brand: var(--bb-brass);        --lp-brand-soft: var(--bb-brass-soft); --lp-brand-line: var(--bb-brass-line);
  --lp-brand-deep: var(--bb-brass-deep); --lp-brand-bright: var(--bb-brass-bright);
  --lp-blue:   var(--bb-blue);         --lp-blue-soft:   var(--bb-blue-soft);
  --lp-plum:   var(--bb-plum);         --lp-plum-soft:   var(--bb-plum-soft);
  --lp-amber:  var(--bb-amber);        --lp-amber-mid:   var(--bb-amber-mid);  --lp-amber-soft: var(--bb-amber-soft);
  --lp-coral:  var(--bb-alert);        --lp-coral-soft:  var(--bb-alert-soft); --lp-coral-line: var(--bb-alert-line);
  --lp-teal:   var(--bb-verify);       --lp-teal-soft:   var(--bb-verify-soft); --lp-teal-line: var(--bb-verify-line);

  --lp-ink: var(--bb-ink); --lp-body: var(--bb-ink-body); --lp-muted: var(--bb-ink-muted); --lp-faint: var(--bb-ink-faint);
  --lp-bg: var(--bb-paper); --lp-card: var(--bb-surface); --lp-line: var(--bb-line); --lp-line-soft: var(--bb-line-hair);

  --lp-disp: var(--bb-font-display);
  --lp-sans: var(--bb-font-ui);
  --lp-mono: var(--bb-font-mono);

  --lp-r-sm: var(--bb-radius-sm); --lp-r-md: var(--bb-radius-md); --lp-r-lg: var(--bb-radius-lg);
  --lp-sh-1: var(--bb-lift-1); --lp-sh-2: var(--bb-lift-2); --lp-sh-3: var(--bb-lift-3);

  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--lp-sans);
  font-size: var(--bb-size-body);
  line-height: var(--bb-leading-body);
}

.bb-body--lp { background: var(--bb-paper); }
.bb-lp h1, .bb-lp h2, .bb-lp h3 { margin: 0; font-family: var(--lp-disp); font-weight: 700; letter-spacing: -0.03em; }
.bb-lp p { margin: 0; text-wrap: pretty; }
.bb-lp a { color: var(--lp-brand); text-decoration: none; }
.bb-lp a:hover { color: var(--lp-ink); }
.bb-lp p a, .bb-lp li a { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------ the global chrome, restyled
   Only while the landing page is the page. Same markup, different clothes. */

.bb-body--lp .bb-logo { color: var(--bb-brass); }
.bb-body--lp .bb-nav a { border-bottom: 0; padding: 9px 13px; border-radius: var(--bb-radius-pill); }
.bb-body--lp .bb-nav a[aria-current="page"] { color: var(--bb-brass); background: var(--bb-brass-soft); font-weight: 600; }
/* This was --bb-alert, chosen only to be something other than the violet
   primary. Alert is now the red that means a clock is running out, and a sign-up
   button must not wear it. The logo orange does the standing-out instead, with
   the dark label it needs — white on it is 2.79:1. */
.bb-body--lp .bb-header__id .bb-btn--primary {
  background: var(--lp-brand-bright); border-color: var(--lp-brand-bright); color: var(--bb-ink-on-amber);
}
.bb-body--lp .bb-footer { margin-top: 0; }

/* ------------------------------------------------------------------ scaffold */
.lp-shell { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px)  { .lp-shell { padding: 0 26px; } }
@media (min-width: 1280px) { .lp-shell { padding: 0 40px; } }

.lp-stack { display: flex; flex-direction: column; }
.lp-row   { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp-spacer { flex-grow: 1; }

.lp-lbl { font-family: var(--lp-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-faint); }
.lp-meta { font-family: var(--lp-mono); font-size: 11px; color: var(--lp-muted); }
@media (min-width: 700px) { .lp-meta { font-size: 11.5px; } }
.lp-mono { font-family: var(--lp-mono); }
.lp-amt { font-family: var(--lp-disp); font-weight: 700; letter-spacing: -0.03em; color: var(--lp-brand); }

.lp-card { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg); overflow: hidden; box-shadow: var(--lp-sh-1); display: flex; flex-direction: column; }
a.lp-card { color: inherit; transition: box-shadow 140ms ease, transform 140ms ease; }
a.lp-card:hover { box-shadow: var(--lp-sh-2); transform: translateY(-2px); color: inherit; }

/* Every control clears the 44px floor. UI.md §8 survives the rebrand. */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--lp-r-sm); font-family: var(--lp-disp); font-size: 15px; font-weight: 700; text-align: center; box-shadow: var(--lp-sh-1); cursor: pointer; }
/* Scoped with .bb-lp so these outrank `.bb-lp a` above. Without the extra
   class these lose to it on specificity — (0,1,0) against (0,1,1) — and every
   button that is a link renders the brand colour as text, which on the brand
   fill is invisible. Found in a render, not by reading. */
.bb-lp .lp-btn--pri { background: var(--lp-brand); color: #fff; }
.bb-lp .lp-btn--hot { background: var(--lp-coral); color: #fff; }
.bb-lp .lp-btn--amber { background: var(--lp-amber-mid); color: var(--bb-ink-on-amber); }
.bb-lp .lp-btn--out { background: var(--lp-card); color: var(--lp-ink); border-color: var(--lp-line); }
.bb-lp .lp-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.lp-btn:hover { box-shadow: var(--lp-sh-2); transform: translateY(-1px); }
.lp-btn:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 2px; }

.lp-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; }
/* Same reason as the buttons: category chips are links. */
.bb-lp .lp-chip--brand { background: var(--lp-brand-soft); color: var(--lp-brand); }
.bb-lp .lp-chip--blue   { background: var(--lp-blue-soft);   color: var(--lp-blue); }
.bb-lp .lp-chip--amber  { background: var(--lp-amber-soft);  color: var(--lp-amber); }
.bb-lp .lp-chip--plum   { background: var(--lp-plum-soft);   color: var(--lp-plum); }
.bb-lp .lp-chip--plain  { background: var(--lp-card); color: var(--lp-body); border: 1px solid var(--lp-line); }

.lp-tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 11px; font-family: var(--lp-mono); font-size: 10.5px; letter-spacing: 0.08em; font-weight: 500; white-space: nowrap; }
.lp-tag--brand { background: var(--lp-brand-soft); color: var(--lp-brand); }
.lp-tag--blue   { background: var(--lp-blue-soft);   color: var(--lp-blue); }
.lp-tag--amber  { background: var(--lp-amber-soft);  color: var(--lp-amber); }
.lp-tag--plum   { background: var(--lp-plum-soft);   color: var(--lp-plum); }
.lp-tag--plain  { background: var(--lp-bg); color: var(--lp-muted); border: 1px solid var(--lp-line); }
.lp-tag--feature{ background: var(--lp-amber-mid); color: var(--bb-ink-on-amber); }
.lp-tag--dark   { background: rgba(26,24,21,.86); color: #fff; }
.lp-tag--hot    { background: var(--lp-coral); color: #fff; }
.lp-tag--soon   { background: var(--lp-coral-soft); color: var(--lp-coral); border: 1px solid var(--lp-coral-line); }
/* The only teal thing on the page, and the only bordered tag. Both deliberate. */
.lp-tag--verified { background: var(--lp-teal-soft); color: var(--lp-teal); border: 1px solid var(--lp-teal-line); }

/* --------------------------------------------------------------------- hero */
/* Deep rather than --lp-brand: the band carries a lede and a row of mono stat
   labels, and the primary orange has exactly one legible tier of text on it.
   The washes are the logo's other colour and the gold — a cool one and a warm
   one, so a band this size has somewhere to go. */
.lp-hero { position: relative; background: var(--lp-brand-deep); color: #fff; overflow: hidden; padding: 34px 0 30px; }
.lp-hero::before { content: ""; position: absolute; inset: 0; background-image:
  radial-gradient(circle at 86% 12%, rgba(233,162,27,.26) 0, rgba(233,162,27,0) 48%),
  radial-gradient(circle at 4% 92%, rgba(6,49,102,.34) 0, rgba(6,49,102,0) 46%); }
.lp-hero::after { content: ""; position: absolute; inset: 0; background-image:
  repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 22px, rgba(255,255,255,0) 22px 44px); }
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
@media (min-width: 1024px) { .lp-hero { padding: 64px 0 60px; } .lp-hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 56px; } }
.lp-hero h1 { font-size: 35px; line-height: 1.04; letter-spacing: -0.035em; }
@media (min-width: 700px)  { .lp-hero h1 { font-size: 46px; } }
@media (min-width: 1280px) { .lp-hero h1 { font-size: 60px; letter-spacing: -0.04em; max-width: 15ch; } }
.lp-hero__lede { font-size: 15.5px; line-height: 1.6; color: var(--bb-ink-on-brand); max-width: 52ch; }
@media (min-width: 1024px) { .lp-hero__lede { font-size: 17px; } }
.lp-hero__stats { display: flex; gap: 22px; }
@media (min-width: 1024px) { .lp-hero__stats { gap: 34px; } }
.lp-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.lp-hero__stat b { font-family: var(--lp-disp); font-weight: 700; font-size: 27px; letter-spacing: -0.03em; color: var(--lp-amber-mid); }
@media (min-width: 1024px) { .lp-hero__stat b { font-size: 34px; } }
.lp-hero__stat span { font-family: var(--lp-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-ink-on-brand-muted); }
.lp-hero__rule { width: 1px; background: rgba(255,255,255,.22); }

/* ------------------------------------------------------------------- search */
.lp-search { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg); box-shadow: var(--lp-sh-3); padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 700px)  { .lp-search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lp-search__q { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .lp-search { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1.15fr) minmax(0, 1.15fr) auto; align-items: center; gap: 12px; } .lp-search__q { grid-column: auto; } }
/* The card sits inside the hero band, so its clearance from the hero grid is
   this padding alone. It used to be padding 26px against a -38px margin, which
   netted 12px *over* the stats row — "Open now / Provinces / To register" was
   printed underneath the search card at every width from 1024px up. Spacing
   lives here rather than inline on the wrap so the two halves cannot drift. */
.lp-search__wrap { padding-top: 26px; position: relative; z-index: 2; }
@media (min-width: 1024px) { .lp-search__wrap { padding-top: 34px; } }
.lp-field { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; background: var(--lp-bg); border: 1px solid var(--lp-line); border-radius: var(--lp-r-sm); }
.lp-field svg { flex-shrink: 0; }
.lp-field input, .lp-field select { width: 100%; min-height: 48px; border: 0; background: transparent; font-family: var(--lp-sans); font-size: 15.5px; color: var(--lp-ink); appearance: none; }
.lp-field input::placeholder { color: var(--lp-muted); opacity: 1; }
.lp-field input:focus, .lp-field select:focus { outline: none; }
.lp-field:focus-within { border-color: var(--lp-brand); box-shadow: 0 0 0 2px var(--lp-brand-line); }

/* ------------------------------------------------------------------ sections */
.lp-section { padding-top: 34px; }
@media (min-width: 1024px) { .lp-section { padding-top: 52px; } }
.lp-section__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.lp-section__head h2 { font-size: 23px; }
@media (min-width: 700px) { .lp-section__head h2 { font-size: 28px; } }
.lp-section__sub { font-size: 14px; color: var(--lp-muted); }
.lp-plate { width: 42px; height: 42px; border-radius: var(--lp-r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 700px)  { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1024px) { .lp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Category chips scroll rather than wrapping into four rows on a phone. */
.lp-cats { display: flex; gap: 9px; overflow-x: auto; padding: 26px 16px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lp-cats::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .lp-cats { flex-wrap: wrap; overflow: visible; padding: 40px 40px 0; max-width: 1360px; margin: 0 auto; } }

/* --------------------------------------------------------------------- tile */
.lp-tile__photo { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--lp-brand-soft); }
.lp-tile__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-tile__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(26,24,21,.045) 0 16px, rgba(26,24,21,0) 16px 32px); }
.lp-tile__photo img ~ ::after, .lp-tile__photo:has(img)::after { background-image: none; }
.lp-tile__photo > .lp-tag, .lp-tile__ph { position: relative; z-index: 1; }
.lp-tile__ph { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 12px; }
.lp-tile__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex-grow: 1; }
.lp-tile__title { font-size: 18px; line-height: 1.22; }
@media (min-width: 1024px) { .lp-tile__title { font-size: 20px; } }
.lp-tile__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--lp-line-soft); margin-top: auto; }
.lp-tile__mark { width: 32px; height: 32px; border-radius: var(--lp-r-sm); display: flex; align-items: center; justify-content: center; font-family: var(--lp-disp); font-size: 11.5px; font-weight: 700; object-fit: contain; background: var(--lp-brand-soft); color: var(--lp-brand); }
.lp-tile__badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; z-index: 2; }

/* -------------------------------------------------------------------- steps */
.lp-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 700px)  { .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1024px) { .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .lp-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } }
.lp-step { display: flex; gap: 14px; }
@media (min-width: 1280px) { .lp-step { flex-direction: column; gap: 12px; } }
.lp-step__plate { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--lp-r-md); display: flex; align-items: center; justify-content: center; }
@media (min-width: 1280px) { .lp-step__plate { width: 100%; height: 84px; } }
.lp-step h3 { font-size: 15.5px; line-height: 1.25; }
.lp-step p { font-size: 13.5px; line-height: 1.55; color: var(--lp-muted); }
.lp-band { background: var(--lp-card); border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); margin-top: 40px; padding: 40px 0; }
@media (min-width: 1024px) { .lp-band { margin-top: 60px; padding: 62px 0; } }

/* ----------------------------------------------------------------- facility */
.lp-facility { border-radius: 20px; background: var(--lp-ink); color: #fff; padding: 26px 22px; position: relative; overflow: hidden; box-shadow: var(--lp-sh-3); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
/* The big wash was rgba(91,33,182) — the old violet primary, written as
   channels and so invisible to a grep for the hex. It survived the rebrand by
   about four hours. This band is the facility side of the product, so it leads
   with the gold that side is coloured in, over the logo navy for depth. */
.lp-facility::before { content: ""; position: absolute; inset: 0; background-image:
  radial-gradient(circle at 88% 10%, rgba(233,162,27,.30) 0, rgba(233,162,27,0) 54%),
  radial-gradient(circle at 2% 94%, rgba(6,49,102,.62) 0, rgba(6,49,102,0) 50%); }
.lp-facility > * { position: relative; z-index: 1; }
@media (min-width: 1024px) { .lp-facility { border-radius: 24px; padding: 48px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; } }
.lp-facility h2 { font-size: 29px; line-height: 1.06; }
@media (min-width: 1024px) { .lp-facility h2 { font-size: 40px; } }
.lp-facility__lede { font-size: 15px; line-height: 1.6; color: var(--bb-ink-on-dark-muted); max-width: 54ch; }
@media (min-width: 1024px) { .lp-facility__lede { font-size: 16.5px; } }
.lp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lp-stat { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: var(--lp-r-md); padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.lp-stat b { font-family: var(--lp-disp); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: var(--lp-amber-mid); }
@media (min-width: 1024px) { .lp-stat { padding: 16px 18px; } .lp-stat b { font-size: 29px; } }
.lp-stat span { font-family: var(--lp-mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bb-ink-on-dark-muted); }
.lp-aside { background: var(--lp-card); color: var(--lp-ink); border-radius: var(--lp-r-lg); padding: 22px; display: flex; flex-direction: column; gap: 13px; box-shadow: var(--lp-sh-3); }
.lp-costline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--lp-body); }
.lp-costline--total { border-top: 1px solid var(--lp-line-soft); padding-top: 9px; font-weight: 600; color: var(--lp-ink); }

/* -------------------------------------------------------------------- proof */
.lp-proof { border-radius: var(--lp-r-lg); background: var(--lp-brand-soft); border: 1px solid var(--lp-brand-line); padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 700px)  { .lp-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; padding: 24px 30px; } }
@media (min-width: 1280px) { .lp-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-proof div { display: flex; align-items: center; gap: 12px; font-size: 13.5px; line-height: 1.45; color: var(--lp-body); }
.lp-proof svg { flex-shrink: 0; }

.lp-tail { padding-bottom: 44px; }

/* ------------------------------------------------------------------- guides */
.lp-article__photo { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: var(--lp-brand-soft); overflow: hidden; }
.lp-article__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-prose { max-width: 72ch; }
.lp-prose p { font-size: 16px; line-height: 1.7; color: var(--lp-body); margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
  .bb-lp *, a.lp-card:hover, .lp-btn:hover { transform: none !important; }
}