/* The website's page styles - the landing composition the home page and
   the error pages share, and the site footer. Deliberately small: the
   marketing site's real design arrives with the brand skill (spec D9) */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--po-bg);
  color: var(--po-text);
  font-family: var(--po-font);
  font-size: 17px;
  line-height: 1.6;
}

.landing {
  flex: 1;
  max-width: 44rem;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.landing__eyebrow,
.landing__code {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--po-primary);
}

.landing h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--po-ink);
  text-wrap: balance;
}

.landing p {
  margin: 0;
  max-width: 34rem;
}

.landing__ref code {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--po-border);
  border-radius: var(--po-radius);
  background: var(--po-surface);
}

.landing__actions {
  padding-top: 1rem;
}

.button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: var(--po-radius);
  background: var(--po-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--po-shadow);
}

.button:hover,
.button:focus-visible {
  background: var(--po-ink);
  outline: 2px solid var(--po-accent);
  outline-offset: 2px;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--po-border);
  font-size: 0.9rem;
  color: var(--po-text-muted);
}

.site-footer nav {
  display: flex;
  gap: 1.25rem;
}

.site-footer a {
  color: inherit;
}

/* The landing page's centred variant - the home page's whole
   composition. The base .landing is a reading column pinned to the top
   for the error pages, which carry prose; this one centres the mark on
   both axes, which is what flex:1 on the base rule makes possible */
.landing--centred {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2rem;
  padding-block: 2rem;
}

.landing--centred .landing__actions {
  padding-top: 0;
}

/* The mark. max-width keeps it inside a narrow viewport even though the
   partial states a pixel size - an SVG with width and height attributes
   ignores the box otherwise */
.logo {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The masthead every page but the landing carries */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--po-border);
}

.site-header__mark {
  display: flex;
  line-height: 0;
}

/* A button that recedes - the masthead action, where the page's own
   call to action has not happened yet */
.button--quiet {
  background: transparent;
  color: var(--po-primary);
  box-shadow: none;
  border: 1px solid var(--po-border);
}

.button--quiet:hover,
.button--quiet:focus-visible {
  background: var(--po-primary);
  color: #fff;
}

/* The redesigned chrome (card AZ49tR0J; spec A6, B19) - the header,
   menu sheet and footer from the home page design, and the base type
   every page on it shares. Scoped to body.po, the class layout/_head
   sets, so the landing and error pages above keep their own look -
   and scoped through :where(), which adds no specificity, so a base
   rule such as h3 { margin: 0 } stays as weak as the design's own
   element rule and never overrides a class like .hc-t.
   Ported from the design's stylesheet onto the --po- tokens */

:where(.po),
:where(.po) * {
  box-sizing: border-box;
}

.po {
  display: block;
  min-height: 0;
  margin: 0;
  background: #fff;
  font-family: var(--po-font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--po-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

:where(.po) h1,
:where(.po) h2,
:where(.po) h3,
:where(.po) h4 {
  margin: 0;
  font-family: var(--po-font-ui);
  color: var(--po-ink-soft);
  font-weight: 600;
  letter-spacing: var(--po-ls-tight);
  line-height: 1.2;
}

:where(.po) a {
  color: var(--po-brand-2);
  text-decoration: none;
}

:where(.po) a:hover {
  color: var(--po-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(.po) img {
  max-width: 100%;
}

.wrap {
  max-width: var(--po-max);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

/* "Pardon our dust" on the practice search and a listing's page (card
   6TaNKOF9; views/html/practice/_dust.php): a caution-tinted note,
   derived from the tokens so it follows the palette */
.dust {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid var(--po-caution);
  border-radius: var(--po-radius);
  background: color-mix(in srgb, var(--po-caution) 12%, var(--po-surface));
  color: var(--po-ink-soft);
  font-size: var(--po-fs-lg);
  line-height: 1.5;
  text-align: left;
}

.dust svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.dust p {
  margin: 0;
}

.eyebrow {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xs);
  font-weight: 600;
  letter-spacing: var(--po-ls-caps);
  text-transform: uppercase;
  color: var(--po-muted);
}

.num {
  font-variant-numeric: tabular-nums;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 18px;
  border-radius: 7px;
  border: 1px solid var(--po-line-2);
  background: #fff;
  color: var(--po-ink-2);
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-lg);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 130ms, border-color 130ms, color 130ms;
}

.btn:hover {
  background: var(--po-bg-2);
  border-color: #cfd5da;
  color: var(--po-ink-soft);
  text-decoration: none;
}

.btn.pri {
  background: var(--po-cta);
  border-color: var(--po-cta);
  color: #fff;
}

.btn.pri:hover {
  background: var(--po-cta-hover);
  border-color: var(--po-cta-hover);
  color: #fff;
}

.btn.sm {
  height: 36px;
  padding: 0 14px;
  font-size: var(--po-fs-base);
}

.btn.dark {
  background: #3f4a53;
  border-color: #3f4a53;
  color: #fff;
}

/* A keyboard user's way past a pinned scroll story (home, Brokers,
   Buyers), whose step buttons take many tabs (WCAG 2.4.1). Clipped away
   until it has focus, then a chip where it stands, at the top of the
   story's frame: absolute with no offsets keeps it there whatever the
   frame. Mouse and touch never see it; the stories are short enough to
   scroll past (Khoi, 2 Oct, after Preston's review) */
.skip-past {
  position: absolute;
  z-index: 30;
  margin: var(--po-sp-3) 0 0 var(--po-sp-4);
  padding: var(--po-sp-2) var(--po-sp-3);
  border-radius: 6px;
  background: var(--po-brand-ink);
  color: #fff;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 600;
  white-space: nowrap;
  clip-path: inset(50%);
}

.skip-past:focus {
  clip-path: none;
  color: #fff;
}

.btn.dark:hover {
  background: #2f383f;
  border-color: #2f383f;
  color: #fff;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--po-line-2);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--po-ink-2);
}

.icon-btn:hover {
  background: var(--po-bg-2);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

.hdr {
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--po-line);
}

.hdr-in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 70px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.brand:hover {
  text-decoration: none;
}

.brand .logo {
  height: 29px;
  width: auto;
  display: block;
}

.brand span {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--po-brand-ink);
}

.brand:hover span {
  color: #255a7d;
}

/* The nav reads as the page's main controls rather than a footnote to
   the wordmark (Cannon's review): a step up the scale, a shade darker,
   and spaced so each link is its own target */
.nav {
  display: flex;
  align-items: center;
  gap: var(--po-sp-2);
  margin-left: var(--po-sp-6);
}

.nav-item {
  position: relative;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--po-ink-2);
  font-family: inherit;
  font-size: var(--po-fs-xl);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
}

.nav-btn:hover {
  color: var(--po-ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--po-line-2);
}

.nav-item.open .nav-btn {
  color: var(--po-ink-soft);
}

/* The audience whose page this is: underlined in the brand, not on
   hover alone */
.nav-btn[aria-current="page"],
.msheet a[aria-current="page"] {
  color: var(--po-ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--po-brand-2);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* The menus' caret - a solid triangle, a size up from the design's so
   it reads at a glance; the search dropdowns' in search.css match it */
.caret {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentcolor;
  opacity: 0.6;
  flex: 0 0 auto;
  transition: transform 160ms;
}

.nav-item.open .caret {
  transform: rotate(180deg);
  opacity: 0.85;
}

.menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 236px;
  background: #fff;
  border: 1px solid var(--po-line);
  border-radius: 6px;
  padding: 5px;
  box-shadow: var(--po-sh-3);
  display: none;
  flex-direction: column;
  gap: 1px;
}

.nav-item.open .menu {
  display: flex;
  animation: drop 140ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu a {
  padding: 8px 11px;
  border-radius: 4px;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 500;
  color: var(--po-body);
  white-space: nowrap;
}

.menu a:hover {
  background: #f6f7f8;
  color: var(--po-ink-soft);
  text-decoration: none;
}

/* "All resources", the menu's lead entry (card psrzoBCw) */
.menu a.m-all {
  font-weight: 700;
  color: var(--po-brand);
}

.m-lbl {
  padding: 8px 11px 2px;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xs);
  font-weight: 600;
  letter-spacing: var(--po-ls-caps);
  text-transform: uppercase;
  color: var(--po-muted);
}

.m-sep {
  height: 1px;
  background: var(--po-line);
  margin: 4px 3px;
}

.hdr-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hdr-right .btn {
  height: 34px;
  padding: 0 13px;
  font-size: var(--po-fs-base);
  background: transparent;
  border-color: var(--po-line-2);
}

.hdr-right .btn:hover {
  background: #f6f7f8;
  border-color: #cfd5da;
}

.burger {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--po-ink-soft);
}

/* The icon carries its own size: an SVG flex item with only a viewBox
   collapses to nothing in iOS WebKit, so the menu was invisible on an
   iPhone (UAT round 1, A5) */
.burger svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.burger:hover {
  background: #f6f7f8;
}

.msheet {
  display: none;
  position: fixed;
  inset: 70px 0 0;
  z-index: 80;
  background: rgba(15, 20, 24, 0.32);
}

.msheet.open {
  display: block;
}

.msheet-in {
  background: #fff;
  padding: 8px 8px 16px;
  max-height: 100%;
  overflow-y: auto;
  box-shadow: var(--po-sh-3);
}

.msheet a {
  display: block;
  padding: 12px 15px;
  border-radius: 7px;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xl);
  font-weight: 500;
  color: var(--po-ink-2);
}

.msheet a:hover {
  background: var(--po-bg-2);
  text-decoration: none;
}

/* One line: the copyright, the links, then the social icons pushed to
   the right; it wraps on a narrow screen */
.ftr {
  padding: 24px 0 28px;
  border-top: 1px solid var(--po-line);
}

.ftr-in {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
}

.ftr-links,
.ftr-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 500;
}

.ftr-social {
  margin-left: auto;
}

.ftr-links a,
.ftr-social a {
  color: var(--po-body);
}

.ftr-copy {
  font-size: var(--po-fs-md);
  color: var(--po-muted);
}

@media (max-width:1240px) {
  .nav {
    display: none;
  }
  .burger {
    display: inline-flex;
  }
}

@media (max-width:760px) {
  .wrap {
    padding: 0 22px;
  }
  .brand span {
    display: none;
  }
}

/* A visible keyboard focus wherever a control has none of its own. As
   weak as the base rules above, so a control that draws its own focus
   state - the search box's ring - keeps it without a second outline */
:where(.po) :focus-visible {
  outline: 2px solid var(--po-brand-2);
  outline-offset: 2px;
}

/* The social accounts are icons alone; each names itself in its alt
   text and its tooltip */
.ftr-social a {
  display: inline-flex;
  align-items: center;
  opacity: 0.75;
}

.ftr-social a:hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .po *,
  .po *::before,
  .po *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* The arrow a link ends with (layout/_arrow.php), sized to the text */
.arw {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.2em;
}