/* ==========================================================================
   Propertybuyer, base layer. Shared by every page in this repository.
   --------------------------------------------------------------------------
   The reset, the base typography, the two type utilities, and the button and
   pill components. Every page family needs all of it, so it sits here rather
   than being copied into each design layer.

   REQUIRES assets/css/tokens.css, loaded first. Declares no tokens and holds
   no raw values.

   Split out of styles.css on 21 August 2026, unchanged. Treat a change here
   the way you would treat a change to tokens.css: it lands on every page,
   including pages someone else is building on another branch.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--family-text);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: 1.6;
  letter-spacing: var(--tracking-body);
  overflow-x: hidden;
}

/* height: auto is what makes the width and height attributes on an img safe.
   The attributes arrive as presentational hints, so on any image the design
   layer sizes by width alone the height hint would otherwise be taken
   literally and the picture would stretch. With this it is the ratio that
   survives, which is the whole point of carrying the attributes: the box is
   reserved at the right shape before the file lands. Added 28 Aug 2026 with
   the buyer page's dimensions. */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; }
a { color: var(--text-link); }

/* Proyale, display headings only, one weight, never bolded. */
h1, h2 {
  font-family: var(--family-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h1 { font-size: var(--type-stat); line-height: 1.1; }
h2 { font-size: var(--type-display); line-height: 1.25; color: var(--text-heading); }

h3 {
  font-family: var(--family-text);
  font-size: var(--type-h3-card);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
  text-wrap: balance;
}

/* Focus ring is always rendered and is never removed. On dark bands the
   border/focus token is invisible, so dark bands swap to white, the
   fallback DESIGN.md records for this known token gap. */
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--text-on-brand); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg-page);
  color: var(--text-link);
  padding: 12px 20px;
  z-index: 100;
}
.skip:focus-visible { left: 0; }

/* Available to screen readers and crawlers, absent from the layout. Used for
   the award list behind the decorative badge marquees. clip-path rather than
   display:none, which would remove it from the accessibility tree too. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.section { padding-block: var(--band-y); }

/* --- Type utilities matched to the Paper text styles ---------------------- */

.lede {
  font-size: var(--type-h3-card);
  font-weight: var(--weight-body);
  line-height: 1.4;
  letter-spacing: var(--tracking-body);
}
.micro {
  font-size: var(--type-micro);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 16px;
  color: var(--text-heading);
}
.muted { color: var(--text-muted); }

/* --- Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-card);
  font-family: var(--family-text);
  font-size: var(--type-button);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: var(--tracking-button);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 280ms ease-out, border-color 280ms ease-out, color 280ms ease-out, transform 280ms ease-out, box-shadow 280ms ease-out;
}
.btn--primary { background: var(--action-primary); color: var(--text-on-brand); box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: var(--action-primary-hover); transform: translateY(-1px); }
.btn--primary:active { background: var(--action-primary-pressed); transform: translateY(0); }
.btn--outline {
  background: transparent;
  color: var(--text-on-brand);
  border: 2px solid var(--action-primary);
  font-weight: var(--weight-regular);
}
.btn--outline:hover { background: var(--action-primary); }
.btn--ghost {
  background: transparent;
  color: var(--text-on-brand);
  border: 2px solid var(--border-default);
}
.btn--ghost:hover { background: var(--bg-frost); }
.btn--prestige { background: var(--action-prestige); color: var(--bg-prestige); padding-inline: 24px; }
.btn--prestige:hover { background: var(--action-prestige-hover); }
.btn--prestige:active { background: var(--action-prestige-pressed); }

.btn-note {
  font-size: var(--type-micro);
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-muted);
}

/* --- Pills ------------------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  width: fit-content;
  font-size: var(--type-micro);
  line-height: 16px;
  white-space: nowrap;
}
.pill--dark { background: var(--grad-pill-dark); color: var(--text-on-brand); filter: var(--shadow-pill-dark); font-weight: var(--weight-regular); }
.pill--light { height: 36px; background: var(--grad-pill-light); color: var(--text-body); filter: var(--shadow-pill-light); font-weight: var(--weight-regular); }
.pill--light.pill--step { font-size: var(--type-body); font-weight: var(--weight-medium); }
.pill .laurel { flex-shrink: 0; }
/* Info pill, added 27 August 2026 for the developer confidentiality notice.
   The other two modifiers are single-line eyebrows, so the base rule fixes a
   40px height and sets white-space: nowrap. This one carries a sentence, so it
   has to undo both or it runs off the side of a 390 viewport. Everything else
   about the component is inherited. */
.pill--info {
  height: auto;
  min-height: 40px;
  max-width: 100%;
  padding: 10px 20px;
  background: var(--bg-info-subtle);
  border: 1px solid var(--border-info);
  color: var(--text-info);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  white-space: normal;
  text-align: left;
}

/* ==========================================================================
   Brand furniture, promoted from landing.css on 21 August 2026
   --------------------------------------------------------------------------
   The site header, the site footer and the lead capture component. Promoted
   rather than copied, per the standing rule in locations/README.md.

   The evidence for the header and footer: they are byte identical across all
   three built paid pages, which is exactly what the split's open promotion
   was waiting for. The capture component moves with them because it is
   contractual with assets/js/page.js (the two-step logic, the hidden-step
   validation anchoring, the opacity-0 chip radios that reportValidity can
   focus) and carries the settled chip selected state: border and weight,
   no fill. Both page families load this file, so a change here lands on
   every page, including pages in flight on other branches.

   Two notes from the move, both behaviour preserving. landing.css carried
   two conflicting mobile header rules from different rounds; the later
   alignment-pass set won the cascade, so only that winner is carried here.
   And the lead card's hero sizing stayed behind in landing.css on a
   .hero .lead-card selector, because a fixed 460px width is hero
   composition, not part of the component.

   Recorded in shared/segments.json under openDecisions.baseCssPromotion.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

.site-header { background: var(--bg-brand); padding-top: var(--gap-sm); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 76px;
  padding-block: 14px;
}
.site-header .logo { flex-shrink: 0; display: inline-flex; align-items: center; min-height: var(--tap-min); }
.header-right { display: flex; align-items: center; gap: var(--gap); }
.header-tag {
  font-size: var(--type-small);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-caps);
  line-height: 18px;
  color: var(--text-on-brand-muted);
}

/* --- Header call action, mobile only -------------------------------------- */

.header-call {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  border: 2px solid var(--action-primary);
  background: var(--action-primary);
  color: var(--text-on-brand);
  flex-shrink: 0;
  transition: background-color 280ms ease-out, border-color 280ms ease-out;
}
.header-call:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}
.header-call:active { background: var(--action-primary-pressed); border-color: var(--action-primary-pressed); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--bg-brand-deep); color: var(--text-on-brand); padding-block: 48px; }
.site-footer .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--gap-sm); text-align: center; }
.site-footer .footer-logo { width: 274px; height: 75px; object-fit: contain; }
.site-footer .site-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--type-small);
  font-weight: var(--weight-regular);
  line-height: 18px;
  color: var(--text-on-brand);
}
.site-footer .blurb {
  font-size: var(--type-micro);
  line-height: 16px;
  max-width: 368px;
  color: var(--text-on-brand-muted);
}
.legal-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--border-on-brand);
  flex-wrap: wrap;
}
.legal-row span {
  font-size: var(--type-small);
  font-weight: var(--weight-body);
  line-height: 18px;
  color: var(--text-on-brand-muted);
}

.lead-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: 28px;
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  color: var(--text-body);
}
.lead-card__mark { display: flex; justify-content: center; }
.lead-card__title {
  font-size: var(--type-h3-card);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: 1;
  text-align: center;
  color: var(--text-heading);
  padding-top: var(--space-gutter);
  padding-bottom: 16px;
}
.lead-card__rule { border: 0; border-top: 1px solid var(--border-default); width: 100%; margin: 0; }
.lead-card .field { display: flex; flex-direction: column; gap: var(--gap-sm); padding-bottom: 14px; }
/* Fieldsets ignore flex layout and legends escape it entirely, which
   collapsed the 12px label-to-chips gap the Paper design specifies. Lay the
   fieldset out as a block and give the legend the gap as a margin. */
fieldset.field { display: block; }
fieldset.field legend { margin-bottom: var(--gap-sm); padding: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-muted);
  font-size: var(--type-small);
  font-weight: var(--weight-regular);
  line-height: 18px;
  color: var(--text-body);
  cursor: pointer;
  transition: border-color 260ms ease-out, background-color 260ms ease-out;
}
.chip:hover span { border-color: var(--border-brand); }
.chip input:checked + span {
  padding: 9px 17px;
  background: var(--bg-info-subtle);
  border: 2px solid var(--border-brand);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.chip input:focus-visible + span { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.input, .select-wrap select {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: 10px 14px;
  border-radius: var(--radius-card);
  background: var(--bg-page);
  border: 1px solid var(--border-muted);
  font-family: var(--family-text);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: 20px;
  color: var(--text-body);
  transition: border-color 260ms ease-out;
}
.input::placeholder { color: var(--text-muted); opacity: 1; }
.input:hover, .select-wrap:hover select { border-color: var(--border-brand); }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; cursor: pointer; }
.select-wrap select:invalid { color: var(--text-muted); }
.select-wrap svg { position: absolute; right: 14px; top: 50%; translate: 0 -50%; pointer-events: none; }

.lead-card .btn--primary { width: 100%; }
.lead-card__privacy {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  font-size: var(--type-micro);
  line-height: 1.6;
  color: var(--text-muted);
}
.lead-card__privacy strong { font-weight: var(--weight-semibold); }

/* --- Lead form steps ------------------------------------------------------ */

.lead-step { display: flex; flex-direction: column; gap: var(--gap-sm); }
/* display:flex on the step beats the UA [hidden] rule, which is display:
   none at lower precedence, so step two showed on load. Restate it. */
.lead-step[hidden] { display: none; }
.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--family-text);
  font-size: var(--type-small);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-body);
  color: var(--text-muted);
  text-decoration: underline 1px;
  text-underline-offset: 4px;
}
.btn-back:hover { color: var(--text-heading); }

@media (max-width: 767px) {
  /* Header on small screens: smaller logo left, call icon right, tagline
     gone. Carried from the 18 Aug 2026 alignment pass. */
  .site-header .wrap { flex-wrap: nowrap; justify-content: space-between; gap: var(--gap-sm); }
  .logo { min-width: 0; }
  .logo svg { width: min(62vw, 232px); height: auto; }
  .header-right { flex-wrap: nowrap; }
  .header-tag { display: none; }
  .header-right .btn--outline { display: none; }
  .header-call { display: inline-flex; }

  /* Footer legal row stacks. Carried with the footer. */
  .legal-row { flex-direction: column; gap: var(--gap-xs); }
}