/* === pattern-tokens:font-import:start (generated) === */
/*
   The Sunny Side faces. A stack NAMES a family; it never
   fetches one - so without this the headings below render in
   the metric-matched fallback and look deliberate.

   A <link rel="stylesheet"> in the document head is faster:
   the browser finds it while parsing the head, where this is
   not discovered until global.css has itself arrived and been
   parsed - an extra round trip on the critical path. Write the
   <link> as well; this is the backstop that makes a forgotten
   one slow rather than wrong.

   Quoted, not a bare url() token: these URLs carry a semicolon
   inside the weight axis, and only a string ends where the URL
   ends.

   At the top of the file because @import is valid only before
   any other rule. Regenerated in place; edits here are lost. */
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400..700;1,400..700&family=Gabarito:wght@400..700&display=swap");
/* === pattern-tokens:font-import:end === */

:root {
  --bf-ink: #171a45;
  --bf-ink-2: #3b3f6b;
  --bf-pink: #c4015f;
  --bf-pink-dark: #9f004d;
  --bf-purple: #6d3a96;
  --bf-blue: #0038a8;
  --bf-bg: #fcf9fc;
  --bf-tint: #f2edf8;
  --bf-line: #dcd3e8;
  --bf-white: #ffffff;
  --bf-stripe: linear-gradient(90deg, #d60270 0 40%, #9b4f96 40% 60%, #0038a8 60% 100%);
  --logo-height: 46px;
  /* role tokens the pattern library reads */
  --color-bg: #fcf9fc;
  --color-surface: #ffffff;
  --color-surface-soft: #f2edf8;
  --color-text: #171a45;
  --color-text-soft: #3b3f6b;
  --color-primary: #c4015f;
  --color-primary-dark: #9f004d;
  --color-on-primary: #ffffff;
  --color-focus: #0038a8;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-12: 5rem;
  --container-max: 72rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bf-bg); color: var(--bf-ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.61; -webkit-text-size-adjust: 100%; }
.bf img { max-width: 100%; height: auto; display: block; }
.bf a { color: var(--bf-blue); text-underline-offset: 3px; }
.bf a:hover { color: var(--bf-pink-dark); }
.bf h1, .bf h2, .bf h3 { font-family: var(--font-heading); line-height: 1.13; letter-spacing: -0.01em; margin: 0 0 .5em; color: var(--bf-ink); }
.bf h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 700; }
.bf h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; }
.bf h3 { font-size: 1.2rem; font-weight: 700; }
.bf p { margin: 0 0 1em; }
.bf .wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.bf .narrow { width: min(760px, 100% - 2.5rem); margin-inline: auto; }
.bf .sr-skip { position: absolute; left: -999px; top: 0; background: var(--bf-ink); color: #fff; padding: .6rem 1rem; z-index: 50; }
.bf .sr-skip:focus { left: 0; }
.bf :focus-visible { outline: 3px solid var(--bf-blue); outline-offset: 2px; }

/* header */
.bf .stripe { height: 6px; background: var(--bf-stripe); }
.bf-header { background: var(--bf-white); border-bottom: 1px solid var(--bf-line); position: sticky; top: 0; z-index: 30; }
.bf-header .bar { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; }
.bf-header .logo { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.bf-header .logo img { height: var(--logo-height); width: auto; max-width: 100%; object-fit: contain; }
.bf-header .nav { display: flex; gap: 1.25rem; margin-left: auto; align-items: center; }
.bf-header .nav a { color: var(--bf-ink); text-decoration: none; font-weight: 700; font-size: .98rem; padding: .4rem 0; border-bottom: 2px solid transparent; }
.bf-header .nav a:hover { border-bottom-color: var(--bf-pink); color: var(--bf-ink); }
.bf-header .nav a[aria-current="page"] { border-bottom-color: var(--bf-purple); }
.bf-header .tools { display: flex; gap: .75rem; align-items: center; }
.bf-header .login { color: var(--bf-ink); font-weight: 700; text-decoration: none; padding: .5rem .25rem; }
.bf .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: 999px; font-weight: 700; font-family: var(--font-body); text-decoration: none; border: 2px solid transparent; cursor: pointer; min-height: 44px; line-height: 1.2; text-align: center; }
.bf .btn-primary { background: var(--bf-pink); color: #fff; }
.bf .btn-primary:hover { background: var(--bf-pink-dark); color: #fff; }
.bf .btn-ghost { background: transparent; color: var(--bf-ink); border-color: var(--bf-ink); }
.bf .btn-ghost:hover { background: var(--bf-ink); color: #fff; }
.bf .btn-big { padding: .9rem 1.7rem; font-size: 1.1rem; }
.bf-menu { display: none; margin-left: auto; }
.bf-menu summary { list-style: none; cursor: pointer; font-weight: 700; padding: .55rem .9rem; border: 2px solid var(--bf-ink); border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.bf-menu summary::-webkit-details-marker { display: none; }
.bf-menu .drawer { position: absolute; left: 0; right: 0; top: 100%; background: var(--bf-white); border-bottom: 1px solid var(--bf-line); padding: .5rem 1.25rem 1.25rem; box-shadow: 0 12px 24px rgba(23, 26, 69, .12); }
.bf-menu .drawer a { display: block; padding: .8rem 0; color: var(--bf-ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--bf-line); }
.bf-menu .drawer .btn { margin-top: 1rem; width: 100%; border-bottom: 2px solid transparent; color: #fff; }
.bf-header { position: sticky; }

/* hero */
.bf .hero { padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3.5rem); background: linear-gradient(180deg, var(--bf-tint) 0%, var(--bf-bg) 100%); }
.bf .hero .grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.bf .eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--bf-purple); margin-bottom: .8rem; }
.bf h1 em { font-style: normal; background: linear-gradient(transparent 62%, rgba(214, 2, 112, .22) 62%); }
.bf .lead { font-size: 1.2rem; color: var(--bf-ink-2); max-width: 36em; }
.bf .photo { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(23, 26, 69, .16); }
.bf .photo img { width: 100%; }
.bf .crumbs { font-size: .9rem; margin-bottom: 1rem; color: var(--bf-ink-2); }
.bf .crumbs a { color: var(--bf-ink-2); }

/* join tiles */
.bf .join { margin-top: 1.5rem; background: var(--bf-white); border: 1px solid var(--bf-line); border-radius: 18px; padding: 1.1rem 1.2rem 1rem; box-shadow: 0 6px 20px rgba(23, 26, 69, .06); }
.bf .join h2 { font-size: 1.15rem; margin-bottom: .2rem; }
.bf .join .helper { margin: 0 0 .8rem; color: var(--bf-ink-2); font-size: .95rem; }
.bf .join ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.bf .join li a { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: .6rem .8rem; border-radius: 12px; background: var(--bf-tint); border: 2px solid transparent; color: var(--bf-ink); text-decoration: none; font-weight: 700; }
.bf .join li a:hover { border-color: var(--bf-pink); color: var(--bf-ink); }
.bf .join li a span { font-weight: 500; font-size: .85rem; color: var(--bf-ink-2); line-height: 1.3; }
.bf .join .promise { margin: .8rem 0 0; font-size: .9rem; color: var(--bf-ink-2); }

/* blocks */
.bf .block { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.bf .block.alt { background: var(--bf-tint); }
.bf .intro { max-width: 46rem; margin-bottom: 2rem; }
.bf .cards { display: grid; gap: 1.25rem; }
.bf .cards.c4 { grid-template-columns: repeat(4, 1fr); }
.bf .cards.c3 { grid-template-columns: repeat(3, 1fr); }
.bf .cards.c2 { grid-template-columns: repeat(2, 1fr); }
.bf .seg { display: flex; flex-direction: column; background: var(--bf-white); border: 1px solid var(--bf-line); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--bf-ink); }
.bf .seg:hover { border-color: var(--bf-purple); color: var(--bf-ink); box-shadow: 0 10px 26px rgba(23, 26, 69, .12); }
.bf .seg img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.bf .seg .body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.bf .seg h3 { margin-bottom: .35rem; }
.bf .seg p { font-size: .98rem; margin-bottom: .8rem; color: var(--bf-ink-2); }
.bf .seg .go { margin-top: auto; font-weight: 700; color: var(--bf-pink-dark); }
.bf .seg.plain { border-top: 6px solid transparent; border-image: var(--bf-stripe) 1; }
.bf .card { background: var(--bf-white); border: 1px solid var(--bf-line); border-radius: 18px; padding: 1.2rem 1.3rem; }
.bf .card h3 { margin-bottom: .35rem; }
.bf .card p:last-child { margin-bottom: 0; }
.bf .steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.bf .steps li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: .9rem; align-items: start; }
.bf .steps li::before { content: counter(s); width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--bf-ink); color: #fff; font-family: var(--font-heading); font-weight: 700; display: grid; place-items: center; }
.bf .steps h3 { margin-bottom: .15rem; }
.bf .steps p { margin: 0; }
.bf .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.bf .split.flip .photo { order: 2; }
.bf .chips { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.bf .chips li { background: var(--bf-white); border: 1px solid var(--bf-line); border-radius: 999px; padding: .35rem .9rem; font-weight: 700; font-size: .95rem; }
.bf table.cmp { width: 100%; border-collapse: collapse; background: var(--bf-white); border: 1px solid var(--bf-line); border-radius: 14px; overflow: hidden; font-size: .98rem; }
.bf table.cmp th, .bf table.cmp td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--bf-line); vertical-align: top; }
.bf table.cmp thead th { background: var(--bf-ink); color: #fff; font-family: var(--font-heading); }
.bf table.cmp tbody th { font-weight: 700; width: 28%; }
.bf .tablewrap { overflow-x: auto; }
.bf .note { border-left: 5px solid var(--bf-purple); background: var(--bf-white); padding: 1rem 1.2rem; border-radius: 0 14px 14px 0; margin: 1.5rem 0; }
.bf .note.warn { border-left-color: var(--bf-pink); }
.bf .note p:last-child { margin-bottom: 0; }
.bf ul.ticks { padding-left: 1.2rem; margin: 0 0 1em; }
.bf ul.ticks li { margin-bottom: .45rem; }
.bf .toc { background: var(--bf-white); border: 1px solid var(--bf-line); border-radius: 14px; padding: 1rem 1.3rem; margin-bottom: 2rem; }
.bf .toc ol { margin: .4rem 0 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.bf .toc li { margin-bottom: .3rem; }
.bf details.q { background: var(--bf-white); border: 1px solid var(--bf-line); border-radius: 14px; margin-bottom: .7rem; }
.bf details.q summary { cursor: pointer; font-weight: 700; padding: 1rem 1.2rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; min-height: 44px; }
.bf details.q summary::-webkit-details-marker { display: none; }
.bf details.q summary::after { content: "+"; font-family: var(--font-heading); font-size: 1.4rem; line-height: 1; color: var(--bf-pink-dark); }
.bf details.q[open] summary::after { content: "\2212"; }
.bf details.q .a { padding: 0 1.2rem 1rem; }
.bf details.q .a p:last-child { margin-bottom: 0; }
.bf .closing { background: var(--bf-ink); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.bf .closing .wrap { text-align: center; }
.bf .closing .lead { margin-left: auto; margin-right: auto; }
.bf .closing h2, .bf .closing .lead { color: #fff; }
.bf .closing a:not(.btn) { color: #fff; }
.bf .closing .btn-primary { background: #fff; color: var(--bf-ink); }
.bf .closing .btn-primary:hover { background: var(--bf-tint); color: var(--bf-ink); }
.bf .closing .fine { font-size: .92rem; opacity: .9; }

/* footer */
.bf-footer { background: #0f1236; color: #dcdcf0; padding: 2.5rem 0 5rem; font-size: .95rem; }
.bf-footer a { color: #fff; text-decoration: none; margin-right: 1.1rem; display: inline-block; padding: .2rem 0; }
.bf-footer a:hover { text-decoration: underline; color: #fff; }
.bf-footer p { margin: 0 0 .7rem; }
.bf-footer .fbrand { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: #fff; margin-bottom: .8rem; }
.bf-footer .pnote { color: #bfc0e0; font-size: .88rem; max-width: 62rem; margin-top: 1rem; }

@media (max-width: 960px) {
  .bf .cards.c4 { grid-template-columns: repeat(2, 1fr); }
  .bf .cards.c3 { grid-template-columns: 1fr; }
  .bf .join ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .bf-header .nav { display: none; }
  .bf-menu { display: block; order: 2; margin-left: 0; }
  .bf-header .tools { margin-left: auto; order: 1; }
  .bf-header .bar { position: relative; }
  .bf .hero .grid, .bf .split { grid-template-columns: 1fr; }
  .bf .split.flip .photo { order: 0; }
  .bf .cards.c2 { grid-template-columns: 1fr; }
  .bf .toc ol { columns: 1; }
}
@media (max-width: 520px) {
  .bf .cards.c4 { grid-template-columns: 1fr; }
  .bf-header .logo img { height: 34px; }
  .bf-header .bar { gap: .6rem; }
  .bf-header .tools { gap: .35rem; }
  .bf-header .tools .btn { padding: .5rem .9rem; white-space: nowrap; }
  .bf-header .login { font-size: .92rem; padding: .5rem .2rem; }
  .bf-menu summary { padding: .5rem .75rem; }
  .bf .btn-big { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.bf .mt1 { margin-top: 1rem; }
.bf .narrow > h2 { margin-top: 2.2rem; }
.bf .narrow > .eyebrow + h2 { margin-top: .3rem; }

/* === pattern-tokens:start (generated - edit outside these markers) === */
/*
   Role tokens the design patterns require. A var() this
   sheet does not define is discarded at compute time, so
   the rule is lost rather than falling back to anything.
   Regenerated in place; anything you add here is replaced.
*/
/* Metric-matched fallback for Gabarito, on the heading. Arial,
   resized to match Gabarito, so the line boxes are already the size
   they will be once the webfont arrives and the page does not reflow
   under the reader when it does.

   One face PER WEIGHT. A real face gets wider at 700; a local one
   thickened synthetically does not, so a single face solved at 400
   leaves anything set at 700 too narrow and this block causes the
   shift it exists to stop. The descriptor is what picks the right
   solved number instead of synthesising a bold from the 400 face.

   The local() chain is ordered. The numbers are solved against Arial
   specifically, so a stand-in is a degradation rather than a match -
   but Linux and Android have no Arial, and there a face with nothing
   to load defines no family at all and the stack falls through in
   silence, which measured 34.7% off.

   BESIDE the :root rule, never inside it: an at-rule in a declaration
   block is dropped by the parser, and the stack would have survived
   naming a family nothing defines. */
@font-face {
  font-family: 'GabaritoFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 400;
  size-adjust: 98.6%;
  ascent-override: 94%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'GabaritoFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 700;
  size-adjust: 101.2%;
  ascent-override: 94%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* Metric-matched fallback for Figtree, on the body. Arial,
   resized to match Figtree, so the line boxes are already the size
   they will be once the webfont arrives and the page does not reflow
   under the reader when it does.

   One face PER WEIGHT. A real face gets wider at 700; a local one
   thickened synthetically does not, so a single face solved at 400
   leaves anything set at 700 too narrow and this block causes the
   shift it exists to stop. The descriptor is what picks the right
   solved number instead of synthesising a bold from the 400 face.

   The local() chain is ordered. The numbers are solved against Arial
   specifically, so a stand-in is a degradation rather than a match -
   but Linux and Android have no Arial, and there a face with nothing
   to load defines no family at all and the stack falls through in
   silence, which measured 34.7% off.

   BESIDE the :root rule, never inside it: an at-rule in a declaration
   block is dropped by the parser, and the stack would have survived
   naming a family nothing defines. */
@font-face {
  font-family: 'FigtreeFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 400;
  size-adjust: 101%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'FigtreeFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 700;
  size-adjust: 104.3%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* Shape: the brand's own scale, under the names the patterns use. */
  --card-radius: 0.75rem;
  --btn-radius: 0.5rem;
  --chip-radius: 999px;
  --card-shadow: none;
  --transition-slow: 400ms ease;
  --card-border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);

  /* Inks. The ratios are measured, not intended. */
  --color-heading: var(--color-text);
  --color-rule: color-mix(in srgb, var(--color-text) 18%, transparent);
  --color-scrim: #11161d;
  /* on the scrim: 18.16:1 */
  --color-on-scrim: #ffffff;

  /* Type: the Sunny Side pairing. Chosen, not derived. */
  --font-heading: 'Gabarito', 'GabaritoFallback', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Figtree', 'FigtreeFallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --heading-leading: 1.13;
  --heading-tracking: -0.01;

  /* 0.92 quieter, 1.15 louder. Display type only. */
  --type-scale: 1.05;
}
/* === pattern-tokens:end === */

/* extra components for the later pages */
.bf .hero .grid.one { grid-template-columns: 1fr; max-width: 52rem; }
.bf .pending { display: inline-block; background: #fff4d6; color: #5c4300; border: 1px solid #e0c36a; border-radius: 999px; padding: .25rem .85rem; font-size: .95rem; font-weight: 700; }
.bf .tier { display: flex; flex-direction: column; }
.bf .tier .price { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; margin: .2rem 0 .8rem; }
.bf .tier .btn { margin-top: auto; }
.bf .tier ul.ticks { margin-bottom: 1.2rem; }
.bf .sources { font-size: .92rem; color: var(--bf-ink-2); margin-top: 1rem; }
.bf .seg.plain .body { padding-top: 1.1rem; }
.bf .facts { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
.bf .members-wrap { margin-top: 1.5rem; }
.bf .members-wrap .member-grid { padding-inline: 0; }
.bf .linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.bf .linklist a { font-weight: 700; }
@media (max-width: 860px) { .bf .facts { grid-template-columns: 1fr; } }

/* === member-grid pattern (library v310, member-grid@7) === */
/* member-grid v1 - tokens only, selectors prefixed.
   Everything below .member-grid is markup the PLATFORM writes, so these class
   names are a contract with it, not ours to rename. */
.member-grid {
  overflow-wrap: var(--long-words, break-word);
}
.member-grid :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .member-grid {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.member-grid {
  display: block;
  padding-inline: var(--space-4);
}
.member-grid .lp-grid,
.member-grid .lp-members__empty {
  max-width: var(--container-max);
  margin-inline: auto;
}
.member-grid .lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin-block: 0;
  padding: 0;
}
.member-grid .mem-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  position: relative;
}
.member-grid .mem-card img,
.member-grid .mem-card__initial {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--card-radius);
  background: var(--color-surface);
}
.member-grid .mem-card__initial {
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: calc(2rem * var(--type-scale, 1));
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}
.member-grid .mem-card .badge {
  position: absolute;
  top: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: 0.15rem var(--space-2);
  border-radius: var(--chip-radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}
.member-grid .mem-card__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale, 1));
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.member-grid .mem-card__where,
.member-grid .mem-card__line {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-soft);
  overflow-wrap: anywhere;
}
/* Two lines and no more. A blurb is member-written and has no length limit,
   so without this one card sets the height of the whole row. */
.member-grid .mem-card__line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* 44px, not the 24px WCAG floor: on a phone this is the card's only control
   and it sits between two photographs. */
.member-grid .mem-card__cta {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.member-grid .mem-card__cta:hover {
  text-decoration: underline;
}
.member-grid .mem-card__cta:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--chip-radius);
}
/* The join tile is the platform's last li and carries no photograph, so it
   needs a body of its own or it collapses to a link on the baseline. A grid
   item stretches to its row, so the floor is for the row it lands in ALONE -
   it is the last of an unknown number, so it wraps by itself often. */
.member-grid .mem-card--join {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--space-4);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  text-align: center;
}
.member-grid .mem-card--join .mem-card__cta {
  justify-content: center;
  margin: 0;
}
.member-grid .lp-members__empty {
  margin-block: 0;
  padding: var(--space-5) var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* card: how much furniture sits around the photograph */
.member-grid--plain .mem-card {
  padding: 0;
}
.member-grid--framed .mem-card {
  padding: var(--space-3);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--card-shadow);
}
.member-grid--framed .mem-card .badge {
  top: var(--space-4);
  inset-inline-start: var(--space-4);
}
.member-grid--portrait .mem-card img,
.member-grid--portrait .mem-card__initial {
  aspect-ratio: 3 / 4;
}

/* flow: a wrapping grid, or one row the reader swipes. The rail never moves
   on its own - the visitor drives it, the same bargain gallery-scroll makes. */
.member-grid--grid .lp-grid {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
/* marquee is the rail plus a behaviour. With no behaviour library it IS the
   rail, so it takes every rail rule and adds nothing of its own. */
.member-grid--rail,
.member-grid--marquee {
  padding-inline: 0;
}
.member-grid--rail .lp-grid,
.member-grid--marquee .lp-grid {
  display: flex;
  padding-inline: var(--space-4);
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  scrollbar-width: none;
  padding-block: var(--space-2);
  max-width: none;
}
.member-grid--rail .lp-grid::-webkit-scrollbar,
.member-grid--marquee .lp-grid::-webkit-scrollbar {
  display: none;
}
.member-grid--rail .mem-card,
.member-grid--marquee .mem-card {
  flex: 0 0 auto;
  width: min(42vw, 11rem);
  scroll-snap-align: start;
}
.member-grid--rail .lp-grid:focus-visible,
.member-grid--marquee .lp-grid:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* The carousel's controls stay hidden while the marquee moves the row, and
   show once its stop control is pressed. */
.member-grid--marquee:has(.hub-marquee-running):not(:has(.hub-marquee-control[aria-pressed="true"])) .hub-carousel-controls {
  display: none;
}

/* controls: where the previous and next arrows sit, read by the behaviour
   library from these properties. phone: whether a phone shows them. */
.member-grid--top {
  --hub-carousel-controls: top;
  --hub-carousel-look: round;
}
.member-grid--edges {
  --hub-carousel-controls: edges;
  --hub-carousel-look: round;
}
.member-grid--arrows {
  --hub-carousel-phone: show;
}
.member-grid--swipe {
  --hub-carousel-phone: hide;
}
.member-grid--marquee {
  --hub-marquee-look: round;
}
/* The pair keeps to the column the heading above it sits in. */
.member-grid .hub-carousel-controls--top {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
/* Over a photograph the arrows need a ground of their own. */
.member-grid .hub-carousel-controls--edges .hub-carousel-control {
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--card-shadow);
}
/* The marquee's stop control shares the arrows' row, at its end. */
.member-grid--marquee {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.member-grid--marquee .lp-grid,
.member-grid--marquee .lp-members__empty {
  flex: 0 0 100%;
}
.member-grid--marquee .hub-carousel-controls--top {
  margin-inline: 0;
  padding-inline: 0 var(--space-2);
}
.member-grid--marquee .hub-marquee-control {
  margin: 0 var(--space-4) var(--space-3) 0;
}

@media (min-width: 48rem) {
  .member-grid .lp-grid {
    gap: var(--space-5);
  }
  .member-grid--grid .lp-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
  .member-grid--rail .mem-card,
  .member-grid--marquee .mem-card {
    width: 13rem;
  }
  .member-grid .mem-card--join {
    min-height: 11rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    scroll-behavior: smooth;
  }
  .member-grid .mem-card__cta {
    transition: color var(--transition-fast);
  }
}

/* With scripting off nothing can build the previous and next controls, and
   the hidden scroll bar would leave a mouse no way along the row, so both
   rows wrap like the grid rung. */
@media (scripting: none) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    overflow-x: visible;
    max-width: var(--container-max);
  }
  .member-grid--rail .mem-card,
  .member-grid--marquee .mem-card {
    width: auto;
  }
}
@media (scripting: none) and (min-width: 48rem) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
}
.member-grid:not(.member-grid--moving):not(.member-grid--marquee) {
  --hub-motion: none;
}

.bf .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bf-header .nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.bf-menu .drawer ul { list-style: none; margin: 0; padding: 0; }

.bf .hero.tight { padding-bottom: 1rem; }
.bf .cards.cfill { grid-template-columns: repeat(6, 1fr); }
.bf .cards.cfill > * { grid-column: span 2; }
.bf .cards.cfill > :nth-last-child(2):nth-child(3n+1), .bf .cards.cfill > :last-child:nth-child(3n+2) { grid-column: span 3; }
@media (max-width: 960px) { .bf .cards.cfill { grid-template-columns: 1fr; } .bf .cards.cfill > *, .bf .cards.cfill > :nth-last-child(2):nth-child(3n+1), .bf .cards.cfill > :last-child:nth-child(3n+2) { grid-column: auto; } }
.bf table.cmp td { text-align: center; }
.bf table.cmp thead th:not(:first-child) { text-align: center; }
@media (max-width: 520px) {
  .bf table.cmp { font-size: .9rem; }
  .bf table.cmp th, .bf table.cmp td { padding: .6rem .45rem; }
  .bf table.cmp tbody th { width: 46%; }
}

.bf-header .logo { flex: 0 0 auto; }
@media (max-width: 520px) { .bf-header .logo img { height: 28px; } }
@media (max-width: 440px) { .bf-header .hfree { display: none; } .bf-header .bar { gap: .45rem; } }
@media (max-width: 340px) { .bf-header .tools .login { display: none; } .bf-header .logo img { height: 24px; } }
@media (max-width: 400px) { .bf-header .logo img { height: 24px; } .bf-header .login { font-size: .85rem; padding: .5rem .1rem; } .bf-header .tools .btn { padding: .45rem .75rem; } .bf-menu summary { padding: .45rem .65rem; } .bf-header .bar { gap: .35rem; } }