/* Unicorn Finder: palette, type and layout brought across from the original home page. */

:root {
  --color-primary: #5060a9;
  --color-accent: #dd9ec7;
  --color-accent-ink: #9c4f8b;
  --color-ink: #333333;
  --color-body: #6b6b6b;
  --color-muted: #6b6b6b;
  --color-rule: #e8e8e8;
  --color-on-primary: #ffffff;
  --color-surface: #ffffff;
  --font-heading: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --page-max: 1400px;
  --page-pad: clamp(16px, 4vw, 48px);
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
    animation: none !important;
  }
}

body {
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-surface);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-primary);
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* ---- page frame ---- */

.main {
  position: relative;
  overflow: hidden;
}

.wrapper,
.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--page-pad);
}

.wrapper > .wrap {
  padding-inline: 0;
}

.main__svg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: min(62vw, 1157px);
  height: auto;
}

.main__svg--small {
  display: none;
}

/* ---- header ---- */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 48px;
}

.header__logo {
  display: block;
  flex: none;
}

.header__logo img {
  display: block;
  width: clamp(130px, 22vw, 350px);
  height: auto;
}

.header-list {
  display: flex;
  flex: 2;
  gap: 8px 30px;
  flex-wrap: wrap;
}

.header-link {
  position: relative;
  padding-block: 8px;
  color: var(--color-primary);
  font-size: clamp(14px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.header-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--color-primary);
  transition: width 0.5s ease-out;
}

.header-link:hover::after,
.header-link:focus-visible::after {
  width: 100%;
}

.header__links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header__links-left {
  color: var(--color-on-primary);
  font-size: clamp(13px, 1.5vw, 21px);
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(40, 50, 100, 0.55);
}

.header__links-right {
  padding: clamp(10px, 1.2vw, 22px) clamp(20px, 3vw, 55px);
  border-radius: 5px;
  background: #ffffff;
  color: var(--color-primary);
  font-size: clamp(13px, 1.5vw, 21px);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}

.header__links-right:hover {
  background: var(--color-primary);
  color: #ffffff;
}

/* ---- buttons and titles ---- */

.btn-pink {
  display: inline-block;
  padding: 25px 90px;
  border-radius: 5px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}

.btn-pink:hover {
  background: var(--color-accent-ink);
}

.title {
  margin-bottom: 15px;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(34px, 5vw, 70px);
  font-weight: 600;
  line-height: 1.1;
}

/* ---- hero ---- */

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 50px 0 120px;
}

.section-text {
  flex: 1 1 0;
  max-width: 630px;
}

.section__subtitle {
  margin-bottom: 55px;
  color: var(--color-body);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.55;
}

.phones {
  flex: 0 1 600px;
  width: min(100%, 600px);
  height: auto;
}

/* ---- how it works ---- */

.gallery {
  padding-bottom: 80px;
}

.gallery__title {
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: 27px;
  text-align: center;
}

.gallery__subtitle {
  max-width: 1070px;
  margin: 0 auto 70px;
  color: var(--color-muted);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.55;
  text-align: center;
}

.gallery-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1500px;
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0 -1px 11px 3px rgba(34, 60, 80, 0.11);
}

.card__header {
  position: relative;
  aspect-ratio: 421 / 278;
  background: #e8e8e8;
  overflow: hidden;
}

.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__title {
  margin-top: 33px;
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

.card__subtitle {
  margin-bottom: 10px;
  color: var(--color-accent-ink);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.card__desc {
  flex: 1;
  max-width: 335px;
  margin: 0 auto 40px;
  padding: 0 10px;
  color: var(--color-muted);
  line-height: 1.6;
  text-align: center;
}

.card__btn {
  align-self: center;
  width: min(225px, 85%);
  margin-bottom: 40px;
  padding: 20px;
  font-size: 16px;
}

/* ---- features ---- */

.features {
  position: relative;
  isolation: isolate;
  padding: clamp(220px, 24vw, 340px) 0 clamp(100px, 12vw, 200px);
}

.features__svg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.features-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.features__text {
  flex: 1 1 0;
  max-width: 640px;
}

.features__text {
  text-shadow: 0 1px 3px rgba(40, 30, 90, 0.45);
}

.features__text .btn-pink {
  text-shadow: none;
}

.features__title {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: clamp(34px, 5vw, 70px);
  font-weight: 700;
  line-height: 1.1;
}

.features__subtitle {
  margin-bottom: 60px;
  color: #ffffff;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.5;
}

.features-list {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-bottom: 40px;
}

.features-list__img {
  flex: none;
  width: 90px;
  height: 90px;
}

.features-list__title {
  color: #ffffff;
  font-size: clamp(18px, 1.8vw, 25px);
  font-weight: 500;
}

.features-list__subtitle {
  color: #ffffff;
  font-size: clamp(15px, 1.4vw, 19px);
}

.features__btn {
  margin-top: 0;
  background: #ffffff;
  color: var(--color-primary);
}

.features__btn:hover {
  background: var(--color-primary);
  color: #ffffff;
}

.features__img {
  flex: 0 1 450px;
  width: min(100%, 450px);
  height: auto;
}

/* ---- faqs ---- */

.faqs {
  padding: 40px 0 120px;
}

.faqs__title {
  text-align: center;
  margin-bottom: 60px;
}

.faqs__item {
  border-bottom: 3px solid var(--color-rule);
}

.faqs__accordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 18px;
  color: var(--color-primary);
  font-size: clamp(18px, 2.2vw, 33px);
  cursor: pointer;
  list-style: none;
}

.faqs__accordion::-webkit-details-marker {
  display: none;
}

.faqs__accordion::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-top: 3px solid var(--color-primary);
  border-right: 3px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.faqs__item[open] > .faqs__accordion::after {
  transform: rotate(135deg);
}

.faqs__panel {
  padding: 0 18px 32px;
  color: var(--color-primary);
}

.faqs__panel p {
  font-size: clamp(15px, 1.6vw, 25px);
}

/* ---- footer ---- */

.footer {
  position: relative;
  isolation: isolate;
  margin-top: 0;
}

.footer__svg {
  position: absolute;
  inset: 0 0 60px 0;
  z-index: -1;
  width: 100%;
  height: calc(100% - 60px);
}

.footer__text {
  max-width: 420px;
  margin: 0 auto;
  padding: clamp(120px, 16vw, 260px) var(--page-pad) 80px;
  text-align: center;
}

.footer__logo {
  display: block;
  margin: 0 auto;
}

.footer__logo img {
  width: clamp(120px, 16vw, 230px);
  height: auto;
  filter: brightness(0) invert(1);
}

.footer__desc {
  margin-top: 16px;
  color: #ffffff;
  line-height: 1.8;
}

.footer__policy {
  padding: 25px var(--page-pad);
  background: #ffffff;
  text-align: center;
}

.footer__policy__text {
  font-size: 14px;
  line-height: 1.8;
}

.footer__policy__text a {
  margin-inline: 4px;
  color: var(--color-accent-ink);
}

/* ---- tablet and phone ---- */

@media (max-width: 1100px) {
  .gallery-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .header-list {
    display: none;
  }

  .phones {
    flex: none;
    width: min(100%, 420px);
    height: auto;
  }

  .features__svg {
    display: none;
  }

  .features {
    background: linear-gradient(160deg, #5060a9 0%, #6c6aaf 55%, #8a6cac 100%);
    border-top-left-radius: 50% 80px;
    border-top-right-radius: 50% 80px;
    padding-top: 120px;
  }

  .hero {
    flex-direction: column-reverse;
    padding-bottom: 80px;
    text-align: center;
  }

  .section-text {
    max-width: 560px;
  }

  .btn-pink {
    padding: 18px 56px;
    font-size: 16px;
  }

  .features-content {
    flex-direction: column;
    text-align: center;
  }

  .features-list {
    flex-direction: column;
    gap: 12px;
  }

  .features__subtitle {
    margin-bottom: 40px;
  }
}

@media (max-width: 600px) {
  .gallery-cards {
    grid-template-columns: 1fr;
  }

  .main__svg {
    display: none;
  }

  .main__svg--small {
    display: block;
    width: 320px;
  }

  .header {
    margin-inline: calc(var(--page-pad) * -1);
    padding: 16px var(--page-pad);
    background: #ffffff;
  }

  .header__links {
    gap: 12px;
  }

  .header__links-left {
    color: var(--color-primary);
    text-shadow: none;
  }

  .header__links-right {
    background: var(--color-primary);
    color: #ffffff;
  }

  .gallery__subtitle {
    margin-bottom: 40px;
  }

  .footer__policy__text {
    font-size: 12px;
  }
}

/* === members strip tokens === */
:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #333333;
  --color-text-soft: #6b6b6b;
  --color-focus: #5060a9;
  --container-max: 1400px;
  --card-radius: 0.75rem;
  --card-border: 1px solid color-mix(in srgb, #333333 12%, transparent);
  --card-shadow: none;
  --chip-radius: 999px;
  --transition-fast: 150ms ease;
  --type-scale: 1;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
}
/* === /members strip tokens === */

/* === pattern member-grid@7 (library v299; appended by hand from the bundle -- adopt a newer version by replacing this block, never by adding a second) === */
/* 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;
}
/* === /pattern member-grid@7 === */

/* === pattern member-filter@2 (library v299; appended by hand from the bundle -- adopt a newer version by replacing this block, never by adding a second) === */
/* member-filter v2 - tokens only, selectors prefixed.
   The panels below are filled by member-grid, which owns their look. */
.member-filter {
  overflow-wrap: var(--long-words, break-word);
}
.member-filter :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .member-filter {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.member-filter {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.member-filter-legend {
  padding: 0;
  margin-bottom: var(--space-3);
  color: var(--color-text-soft);
  font-size: 0.8rem;
  font-weight: 700;
}
/* Off-screen but focusable, so the pill still takes the keyboard and the
   radio group is still announced. display:none would remove both. */
.member-filter-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.member-filter-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 var(--space-2) var(--space-5) 0;
  padding: var(--space-2) var(--space-5);
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  border-radius: var(--chip-radius);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.member-filter-tab:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.member-filter-radio:checked + .member-filter-tab {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.member-filter-radio:focus-visible + .member-filter-tab {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--chip-radius);
}
/* The switch. Later-sibling only, which is why the radios sit above the
   panels and why nothing may be wrapped around either. */
.member-filter-panel {
  display: none;
}
/* A panel holds whatever the page puts in it, so it may never be the reason
   the viewport scrolls sideways. */
.member-filter-panel img {
  max-width: 100%;
  height: auto;
}
.member-filter-radio--one:checked ~ .member-filter-panel--one,
.member-filter-radio--two:checked ~ .member-filter-panel--two,
.member-filter-radio--three:checked ~ .member-filter-panel--three {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .member-filter-tab {
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
  }
}
/* === /pattern member-filter@2 === */

/* === members section === */
.members {
  padding: 40px 0 100px;
}
.members__title {
  text-align: center;
  margin-bottom: 16px;
}
.members__intro {
  max-width: 760px;
  margin: 0 auto 40px;
  color: var(--color-muted);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.55;
  text-align: center;
}
.members .member-filter-legend {
  text-align: center;
}
.members .member-filter {
  text-align: center;
}
.members .member-filter-panel {
  text-align: left;
}
.members__note {
  margin-top: 24px;
  color: var(--color-muted);
  font-size: 14px;
  text-align: center;
}
/* === /members section === */

/* === community page === */
.hero--text {
  padding-bottom: 60px;
}

.hero--text .section-text {
  max-width: 700px;
}

.reviews {
  padding: 20px 0 120px;
}

.reviews__title {
  text-align: center;
  margin-bottom: 16px;
}

.reviews .member-filter {
  text-align: center;
}

.reviews__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
  text-align: left;
}

.rv {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 -1px 11px 3px rgba(34, 60, 80, 0.11);
}

.rv__text {
  color: var(--color-ink);
  font-size: 20px;
  line-height: 1.5;
}

.rv__who {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
}

#rv-couples:checked ~ .reviews__list .rv:not([data-type="couples"]),
#rv-female:checked ~ .reviews__list .rv:not([data-type="female"]),
#rv-male:checked ~ .reviews__list .rv:not([data-type="male"]) {
  display: none;
}

.reviews__cta {
  margin-top: 56px;
  text-align: center;
}

@media (max-width: 1100px) {
  .reviews__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .reviews__list {
    grid-template-columns: 1fr;
  }
}
/* === /community page === */



























































































/* === locations pages === */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 15px;
}

.crumbs__link {
  color: var(--color-primary);
}

.crumbs__sep {
  color: var(--color-muted);
}

.crumbs__current {
  color: var(--color-ink);
  font-weight: 600;
}

.loc-list {
  padding: 0 0 100px;
}

.loc-rows {
  list-style: none;
  border-top: 3px solid var(--color-rule);
}

.loc-row {
  border-bottom: 3px solid var(--color-rule);
}

.loc-row__link {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 8px 32px;
  align-items: baseline;
  padding: 28px 8px;
  text-decoration: none;
}

.loc-row__link:hover .loc-row__name {
  text-decoration: underline;
}

.loc-row__name {
  color: var(--color-primary);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
}

.loc-row__text {
  color: var(--color-body);
  font-size: clamp(16px, 1.4vw, 19px);
}

.loc-more {
  padding: 20px 0 100px;
}

.loc-more__title {
  margin-bottom: 20px;
  color: var(--color-primary);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
}

.loc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
}

.loc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 22px;
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.loc-chip:hover {
  background: var(--color-primary);
  color: #ffffff;
}

.loc-more__all {
  margin-top: 24px;
}

@media (max-width: 700px) {
  .loc-row__link {
    grid-template-columns: 1fr;
  }
}
.hero--text .section-text {
  max-width: min(700px, 54%);
}

@media (max-width: 900px) {
  .hero--text .section-text {
    max-width: 560px;
  }
}

.loc-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
}

.loc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  padding: 28px;
  border-radius: 16px;
  background: linear-gradient(145deg, #5060a9 0%, #6c63ab 55%, #7f66a6 100%);
  color: #ffffff;
  box-shadow: 0 -1px 11px 3px rgba(34, 60, 80, 0.11);
  transition: transform 0.2s;
}

.loc-tile:hover {
  transform: translateY(-3px);
}

.loc-tile__name {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.1;
}

.loc-tile__link {
  color: #ffffff;
  text-decoration: none;
}

.loc-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.loc-tile__link:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 6px;
}

.loc-tile__text {
  color: #ffffff;
  font-size: 17px;
}

.loc-tile__more {
  margin-top: auto;
  color: #ffffff;
  font-weight: 600;
}

.loc-tile__faces {
  margin-top: 4px;
}

.loc-tile__faces .lp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.loc-tile__faces .mem-card {
  padding: 0;
  border: 0;
  background: none;
}

.loc-tile__faces .mem-card img,
.loc-tile__faces .mem-card__initial {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

.loc-tile__faces .mem-card--join {
  display: none;
}

.loc-tile__faces .mem-card > :not(img):not(.mem-card__initial) {
  display: none;
}

.loc-cta {
  padding: 20px 0 110px;
  text-align: center;
}

.loc-cta__title {
  color: var(--color-primary);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 700;
}

.loc-cta__text {
  margin: 12px auto 28px;
  max-width: 560px;
  font-size: clamp(16px, 1.4vw, 19px);
}

.loc-cta__more {
  margin-top: 20px;
}

@media (max-width: 1000px) {
  .loc-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .loc-tiles {
    grid-template-columns: 1fr;
  }
}

.members__states {
  margin: 24px 0 8px;
  padding: 0;
  justify-content: center;
}

.local {
  padding: 48px 0 8px;
}

.local__title {
  margin-bottom: 16px;
}

.local p {
  max-width: 760px;
  margin: 0 0 16px;
  color: var(--color-body);
  line-height: 1.6;
}

.local__sub {
  margin: 24px 0 8px;
  font-size: 1.1rem;
  color: var(--color-ink);
}

.local__list {
  max-width: 760px;
  margin: 0 0 8px;
  padding-left: 20px;
  color: var(--color-body);
  line-height: 1.7;
}

.local .local__note {
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* === /locations pages === */

/* === signup card tokens === */
:root {
  --btn-radius: 0.5rem;
  --color-primary-dark: #3b4a87;
  --color-surface-soft: #f6f6fa;
  --color-heading: #5060a9;
  --color-scrim: #11161d;
  --color-on-scrim: #ffffff;
  --heading-leading: 1.1;
  --heading-tracking: 0;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-12: 4rem;
  --weight-display: 700;
}
/* === /signup card tokens === */

/* === pattern signup-card@8 (library v299; appended by hand from the bundle -- adopt a newer version by replacing this block, never by adding a second) === */
/* signup-card v8 - tokens only, selectors prefixed */
/* The card sits in an opener's call-to-action place: it takes a width of its
   own and leaves the page's layout to the opener. */
.signup-card {
  /* Answer rows: over the 44px floor, sized for a thumb. */
  --signup-card-target: 56px;
  width: 100%;
  max-width: 24rem;
  text-align: left;
}
.signup-card-form {
  min-width: 0;
  margin: 0;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
/* --color-text, not --color-heading: a heading on a card is not on the page ground. */
.signup-card-title,
.signup-card-q {
  margin: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-display, 700);
  line-height: calc(1.2 * var(--heading-leading, 1));
  letter-spacing: calc(-0.005em + var(--heading-tracking, 0) * 1em);
  color: var(--color-text);
}
@supports (line-height: 1cap) {
  .signup-card-title,
  .signup-card-q {
    line-height: calc(max(1.2em, 1.45cap) * var(--heading-leading, 1));
  }
}
.signup-card-title {
  font-size: calc(clamp(1.375rem, 1.2rem + .8vw, 1.75rem) * var(--type-scale, 1));
}
.signup-card-q {
  margin-bottom: var(--space-3);
  font-size: calc(1.1875rem * var(--type-scale, 1));
}
/* A new step's question takes focus for screen readers; it is not a control,
so it draws no ring. */
.signup-card-q:focus {
  outline: none;
}
.signup-card-step {
  min-width: 0;
  margin: var(--space-6) 0 0;
  padding: 0;
  border: 0;
}
.signup-card-title + .signup-card-step {
  margin-top: var(--space-4);
}
.signup-card-help {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: .9375rem;
  color: var(--color-text-soft);
}
/* Answers: the input is inside its label, so the whole row is the target. */
.signup-card-opts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Two "I am" answers side by side while both fit; an answer whose longest
   word is wider than half the card takes the whole row, and so does the
   other. width: 100% is not the width: it caps the automatic minimum at the
   row, so a word wider than the row breaks inside its tile. Each half gives
   up half the gap and 1px, or two halves rounded up wrap. */
.signup-card-opts--two {
  display: flex;
  flex-wrap: wrap;
}
.signup-card-opt {
  min-width: 0;
}
.signup-card-opts--two > .signup-card-opt {
  flex: 1 1 calc(50% - var(--space-3) / 2 - 1px);
  width: 100%;
  min-width: auto;
}
.signup-card-opts--two .signup-card-opt-face {
  gap: var(--space-2);
}
.signup-card-opt label {
  position: relative;
  display: block;
  cursor: pointer;
}
/* Off-screen but focusable, so the row takes the keyboard and the group is
still announced. display: none would remove both. */
.signup-card-opt input,
.signup-card-other input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.signup-card-opt-face {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--signup-card-target);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  /* The border is the only thing marking this as a control. */
  border: 2px solid color-mix(in srgb, var(--color-text) 22%, var(--color-surface));
  border-radius: var(--btn-radius);
  font-weight: 700;
  line-height: 1.25;
}
/* A word wider than a whole row breaks rather than leave its tile. */
.signup-card-opt-face > span:first-child {
  min-width: 0;
  overflow-wrap: break-word;
}
.signup-card-opt:hover .signup-card-opt-face {
  border-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-surface));
}
.signup-card-opt input:checked + .signup-card-opt-face {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
}
.signup-card-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--color-text) 35%, var(--color-surface));
  border-radius: 50%;
}
.signup-card-opt input:checked + .signup-card-opt-face .signup-card-tick {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.signup-card-opt input:checked + .signup-card-opt-face .signup-card-tick::before,
.signup-card-other input:checked + span .signup-card-tick::before {
  content: "";
  width: 5px;
  height: 10px;
  margin-top: -2px;
  border: solid currentColor;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
/* The third answer to "who are you": a real choice, drawn small. */
.signup-card-other {
  position: relative;
  display: inline-flex;
  margin-top: var(--space-2);
  cursor: pointer;
}
.signup-card-other > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.signup-card-other .signup-card-tick {
  display: none;
}
.signup-card-other input:checked + span {
  text-decoration: none;
}
.signup-card-other input:checked + span .signup-card-tick {
  display: grid;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
/* Fields. 16px text, or iOS zooms the page on focus. */
.signup-card-dob {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: var(--space-2);
  /* A label that wraps must not push its box out of line with the others. */
  align-items: end;
}
.signup-card-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.signup-card-field > span {
  font-size: .9375rem;
  font-weight: 700;
}
.signup-card-field input,
.signup-card-field select {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid color-mix(in srgb, var(--color-text) 30%, var(--color-surface));
  border-radius: var(--btn-radius);
}
.signup-card-consent {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: start;
  margin-top: var(--space-4);
  font-size: .875rem;
}
.signup-card-consent input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--color-primary);
}
.signup-card-consent a,
.signup-card-foot a {
  color: var(--color-text);
  font-weight: 700;
  text-underline-offset: 2px;
}
.signup-card-actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.signup-card-submit {
  width: 100%;
  min-height: var(--signup-card-target);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}
.signup-card-submit:hover {
  background: var(--color-primary-dark);
}
.signup-card-note {
  margin: 0;
  text-align: center;
  font-size: .875rem;
  color: var(--color-text-soft);
}
.signup-card-foot {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  text-align: center;
  font-size: .9375rem;
  color: var(--color-text-soft);
}
.signup-card-opt input:focus-visible + .signup-card-opt-face,
.signup-card-other input:focus-visible + span,
.signup-card-field input:focus-visible,
.signup-card-field select:focus-visible,
.signup-card-consent input:focus-visible,
.signup-card-submit:focus-visible,
.signup-card-consent a:focus-visible,
.signup-card-foot a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
/* Built by the behaviour. Nothing below is in the authored page; the
behaviour adds it, and these rules draw it. */
.signup-card-form {
  scroll-margin-top: var(--space-2);
}
.signup-card-top {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}
.signup-card-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: calc(-1 * var(--space-2));
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--btn-radius);
  color: var(--color-text);
  cursor: pointer;
}
.signup-card-back::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 4px;
  border: solid currentColor;
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(45deg);
}
.signup-card-bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-1);
}
.signup-card-seg {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: var(--chip-radius);
  background: color-mix(in srgb, var(--color-text) 14%, var(--color-surface));
}
.signup-card-seg::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--color-primary);
}
.signup-card-seg[data-hub-signup-done]::before {
  width: 100%;
}
.signup-card-seg[data-hub-signup-now]::before {
  width: 35%;
}
.signup-card-seg::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-surface) 70%, transparent), transparent);
}
.signup-card-count {
  font-size: .875rem;
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The members: faces in the card on a phone, a row beside it when wide. */
.signup-card-members {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--chip-radius);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}
.signup-card-faces {
  display: flex;
  flex: none;
  padding-left: var(--space-2);
}
.signup-card-face {
  width: 2.25rem;
  height: 2.25rem;
  margin-left: calc(-1 * var(--space-2));
  overflow: hidden;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-surface-soft);
}
.signup-card-face img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.signup-card-members p {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.35;
}
.signup-card-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: .875rem;
  color: var(--color-text-soft);
}
.signup-card-summary::before {
  content: "";
  flex: none;
  width: 5px;
  height: 9px;
  margin: 0 var(--space-1) 2px;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Several answers to "looking for": a square tick, not a round one. */
.signup-card-opt input[type="checkbox"] + .signup-card-opt-face .signup-card-tick {
  border-radius: min(var(--btn-radius), 6px);
}
/* Interests. */
.signup-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.signup-card-chip label {
  position: relative;
  display: block;
  cursor: pointer;
}
.signup-card-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.signup-card-chip span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 2px solid color-mix(in srgb, var(--color-text) 22%, var(--color-surface));
  border-radius: var(--chip-radius);
  font-size: .9375rem;
  font-weight: 600;
}
.signup-card-chip span::before {
  content: "+";
  font-weight: 400;
  color: var(--color-text-soft);
}
.signup-card-chip input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.signup-card-chip input:checked + span::before {
  content: "";
  width: 5px;
  height: 9px;
  margin-right: 2px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}
.signup-card-chip input:disabled + span {
  cursor: not-allowed;
  border-style: dashed;
  color: var(--color-text-soft);
}
.signup-card-more {
  min-height: 44px;
  margin-top: var(--space-2);
  padding: 0 var(--space-1);
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.signup-card-tally {
  margin: var(--space-3) 0 0;
  font-size: .875rem;
  color: var(--color-text-soft);
}
/* The date of birth: the reward, and the wheel where a page asks for one. */
.signup-card-reward {
  display: inline-flex;
  margin: var(--space-3) 0 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--chip-radius);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  font-size: .9375rem;
  font-weight: 700;
}
.signup-card-wheels {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.3fr;
  gap: var(--space-2);
}
.signup-card-wheel-col {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.signup-card-wheel-label {
  font-size: .9375rem;
  font-weight: 700;
  text-align: center;
}
/* The band is the background, so it stays put while the rows scroll. Five
44px rows show, two of them spacers above and below: keep the band's 88px
and 132px in step with that. */
.signup-card-wheel {
  height: 220px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  list-style: none;
  border-radius: var(--btn-radius);
  background: linear-gradient(transparent 88px, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) 88px 132px, transparent 132px);
  mask-image: linear-gradient(to bottom, transparent, var(--color-text) 30%, var(--color-text) 70%, transparent);
}
.signup-card-wheel::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.signup-card-wheel li {
  display: grid;
  place-items: center;
  height: 44px;
  scroll-snap-align: center;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-soft);
  cursor: pointer;
}
.signup-card-wheel li[aria-selected="true"] {
  color: var(--color-text);
  font-weight: 700;
}
/* Errors say what is missing; a dashed edge marks where, never colour alone. */
.signup-card-error {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-text);
  background: var(--color-surface-soft);
  font-size: .9375rem;
  font-weight: 600;
}
.signup-card-opt input[aria-invalid] + .signup-card-opt-face,
/* Where the visitor lives: country, postal code or region, town. One rhythm
   between them, wide enough that a focus ring never meets the next label. */
.signup-card-lists {
  display: grid;
  gap: var(--space-4);
}
.signup-card-step > .signup-card-field + .signup-card-field,
.signup-card-step > .signup-card-field + .signup-card-postal,
.signup-card-step > .signup-card-field + .signup-card-lists,
.signup-card-step > .signup-card-postal + .signup-card-lists {
  margin-top: var(--space-4);
}
/* The towns offered as the visitor types: a raised list over the card, under
   the field, so the card keeps its height. */
.signup-card-place {
  position: relative;
}
.signup-card-places {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 3;
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--btn-radius);
  box-shadow: var(--card-shadow);
}
/* How many towns there are, and that the list goes on. */
.signup-card-places-count {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  font-size: .8125rem;
  color: var(--color-text-soft);
}
/* Four and a half rows: the cut row says the list scrolls. */
.signup-card-places-list {
  max-height: calc(4.5 * 44px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.signup-card-places li {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--btn-radius);
  cursor: pointer;
}
.signup-card-places li:hover,
.signup-card-places li[aria-selected="true"] {
  background: var(--color-surface-soft);
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.signup-card-field input[aria-invalid],
.signup-card-field select[aria-invalid] {
  border-style: dashed;
  border-color: var(--color-text);
}
.signup-card-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--signup-card-target);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}
.signup-card-next::after {
  content: "";
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 2.5px 2.5px 0 0;
  transform: rotate(45deg);
}
.signup-card-next:hover {
  background: var(--color-primary-dark);
}
/* The encouraging line after an answer, under the summary of answers so far. */
.signup-card-cheer {
  margin: var(--space-2) 0 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
}
/* A line under a location field: the place a postal code was read as, or a
   warning, set apart from the field rather than tucked under it. */
.signup-card-place-note {
  margin: var(--space-2) 0 0;
  font-size: .9375rem;
  color: var(--color-text-soft);
}
.signup-card-lists > .signup-card-place-note {
  margin-top: calc(-1 * var(--space-2));
}
.signup-card-place-note[data-hub-signup-warn] {
  color: var(--color-text);
  font-weight: 600;
}
/* The link between a postal code and the region and town lists. */
.signup-card-switch {
  display: block;
  min-height: 44px;
  margin-top: var(--space-2);
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
  font-size: .9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.signup-card-skip {
  justify-self: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.signup-card-finish {
  padding: var(--space-8) var(--space-2);
  text-align: center;
}
.signup-card-finish svg {
  display: block;
  margin: 0 auto;
  color: var(--color-primary);
}
.signup-card-finish p {
  margin: var(--space-4) 0 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.signup-card-finish small {
  display: block;
  margin-top: var(--space-2);
  font-size: .9375rem;
  color: var(--color-text-soft);
}
.signup-card-back:focus-visible,
.signup-card-next:focus-visible,
.signup-card-skip:focus-visible,
.signup-card-switch:focus-visible,
.signup-card-more:focus-visible,
.signup-card-wheel:focus-visible,
.signup-card-chip input:focus-visible + span {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
/* A short phone: the same card, tighter, so Next stays in view. */
@media (max-width: 59.99rem) and (max-height: 760px) {
  .signup-card {
    --signup-card-target: 48px;
  }
  .signup-card-form {
    padding-top: var(--space-3);
  }
  .signup-card-step {
    margin-top: var(--space-4);
  }
  .signup-card-opts {
    gap: var(--space-2);
  }
  .signup-card-actions {
    margin-top: var(--space-4);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .signup-card-opt-face,
  .signup-card-field input,
  .signup-card-chip span {
    transition: border-color var(--transition-fast) ease-out, background-color var(--transition-fast) ease-out, transform var(--transition-fast) ease-out;
  }
  .signup-card-opt:active .signup-card-opt-face,
  .signup-card-chip:active span {
    transform: scale(.97);
  }
  .signup-card-opt input:checked + .signup-card-opt-face .signup-card-tick,
  .signup-card-chip input:checked + span {
    animation: signup-card-pop .34s cubic-bezier(.3, 1.6, .5, 1);
  }
  .signup-card-seg::before {
    transition: width .5s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes signup-card-pop {
    from {
      transform: scale(.6);
    }
  }
}
/* Wide: a tighter card, so a first step and its button sit above the fold. */
@media (min-width: 60rem) {
  .signup-card {
    --signup-card-target: 48px;
  }
  .signup-card-form {
    padding: var(--space-5);
  }
  .signup-card-q {
    font-size: calc(1.125rem * var(--type-scale, 1));
  }
  .signup-card-opts {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .signup-card-opt-face {
    padding: var(--space-2) var(--space-3);
    font-size: .9375rem;
  }
  /* A tighter card beside the words, so a first step and its button sit above
  the fold on a laptop. */
  .signup-card-top {
    min-height: 36px;
  }
  .signup-card-members {
    min-height: 44px;
    margin-top: var(--space-2);
    padding-block: var(--space-1);
  }
  .signup-card-step {
    margin-top: var(--space-4);
  }
  .signup-card-step[data-hub-signup-part="seeking"] {
    margin-top: var(--space-4);
  }
  .signup-card-q {
    margin-bottom: var(--space-2);
  }
  .signup-card-help {
    margin-bottom: var(--space-2);
  }
  .signup-card-other {
    margin-top: 0;
  }
  .signup-card-actions {
    margin-top: var(--space-4);
  }
  .signup-card-foot {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
  }
}
/* Before the behaviour library takes the card over, the card is drawn at
   its first step where scripts run, so the page does not jump when it does.
   The animations move nothing: each holds a state for 3s, and if the library
   has not come by then every question shows. */
@media (scripting: enabled) {
  .signup-card:not(.hub-signup-live) :is(.signup-card-title, .signup-card-note, fieldset.signup-card-step:not(:first-of-type)) {
    animation: signup-card-wait 0s 3s backwards;
  }
  /* The row the progress bar takes. */
  .signup-card:not(.hub-signup-live) .signup-card-form::before {
    content: "";
    display: block;
    animation: signup-card-bar 0s 3s backwards;
  }
  /* "Looking for" first: its help line, and no summed answer. */
  .signup-card:not(.hub-signup-live) [data-hub-signup-part="seeking"]:first-of-type::before {
    content: "";
    display: block;
    font-size: .9375rem;
    animation: signup-card-help 0s 3s backwards;
  }
  .signup-card:not(.hub-signup-live) [data-hub-signup-part="seeking"]:first-of-type .signup-card-opt:has(input[name="lf"]:is([value="3"], [value="5"], [value="6"], [value="7"], [value="17"], [value="18"], [value="19"], [value="20"], [value="21"], [value="22"], [value="23"])) {
    animation: signup-card-wait 0s 3s backwards;
  }
}
/* From 60rem "I am" and "looking for" are the first step together. */
@media (scripting: enabled) and (min-width: 60rem) {
  .signup-card:not(.hub-signup-live) [data-hub-signup-part="iam"]:first-of-type + [data-hub-signup-part="seeking"] {
    animation: none;
  }
  .signup-card:not(.hub-signup-live) :is([data-hub-signup-part="seeking"]:first-of-type, [data-hub-signup-part="iam"]:first-of-type + [data-hub-signup-part="seeking"])::before {
    content: "";
    display: block;
    font-size: .9375rem;
    animation: signup-card-help-wide 0s 3s backwards;
  }
  .signup-card:not(.hub-signup-live) [data-hub-signup-part="iam"]:first-of-type + [data-hub-signup-part="seeking"] .signup-card-opt:has(input[name="lf"]:is([value="3"], [value="5"], [value="6"], [value="7"], [value="17"], [value="18"], [value="19"], [value="20"], [value="21"], [value="22"], [value="23"])) {
    animation: signup-card-wait 0s 3s backwards;
  }
}
@keyframes signup-card-wait {
  from {
    display: none;
  }
}
@keyframes signup-card-bar {
  from {
    min-height: 44px;
  }
}
@keyframes signup-card-help {
  from {
    content: "\a0";
    margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  }
}
@keyframes signup-card-help-wide {
  from {
    content: "\a0";
    margin: calc(-1 * var(--space-2)) 0 var(--space-2);
  }
}
/* === /pattern signup-card@8 === */

/* === pattern hero-stated@7 (library v299; appended by hand from the bundle -- adopt a newer version by replacing this block, never by adding a second) === */
/* hero-stated v1 - tokens only, selectors prefixed */
.hero-stated {
  overflow-wrap: var(--long-words, break-word);
}
.hero-stated :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .hero-stated {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
/* Each ground names its own ink, and every rule below reads the pair rather
   than a token, so nothing here knows which ground it is on. */
.hero-stated--plain {
  --hero-stated-ground: var(--color-bg);
  --hero-stated-ink: var(--color-text-soft);
  --hero-stated-title-ink: var(--color-heading);
  --hero-stated-btn-face: var(--color-primary);
  --hero-stated-btn-ink: var(--color-on-primary);
  --hero-stated-ring: var(--color-focus);
}
.hero-stated--brand {
  --hero-stated-ground: var(--color-primary);
  --hero-stated-ink: var(--color-on-primary);
  --hero-stated-title-ink: var(--color-on-primary);
  --hero-stated-btn-face: var(--color-on-primary);
  --hero-stated-btn-ink: var(--color-primary);
  --hero-stated-ring: var(--color-on-primary);
}
.hero-stated--deep {
  --hero-stated-ground: var(--color-scrim);
  --hero-stated-ink: var(--color-on-scrim);
  --hero-stated-title-ink: var(--color-on-scrim);
  --hero-stated-btn-face: var(--color-primary);
  --hero-stated-btn-ink: var(--color-on-primary);
  --hero-stated-ring: var(--color-on-scrim);
}
.hero-stated {
  padding-block: var(--space-12);
  padding-inline: var(--space-4);
  background: var(--hero-stated-ground);
  color: var(--hero-stated-ink);
}
.hero-stated-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.hero-stated-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.hero-stated-title {
  font-family: var(--font-heading);
  /* On the plain ground this is --color-heading, which the contract promises
   at the large-text bar against --color-bg; the clamp floor is 40px. On the
   other two grounds it is that ground's own ink. */
  color: var(--hero-stated-title-ink);
  font-size: calc(clamp(2.5rem, 7vw, 4.5rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.03em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.02 * var(--heading-leading, 1));
  max-width: 10.75em;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .hero-stated-title {
    line-height: calc(max(1.02em, 1.45cap) * var(--heading-leading, 1));
  }
}
.hero-stated-sub {
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 var(--space-6);
}
.hero-stated-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 52px: on a page whose opener carries no image, this is what the eye
   lands on after the words. */
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--btn-radius);
  background: var(--hero-stated-btn-face);
  color: var(--hero-stated-btn-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.hero-stated-btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The ring is the ground's own, so one rule is right on all three. */
.hero-stated-btn:focus-visible {
  outline: 3px solid var(--hero-stated-ring);
  outline-offset: 4px;
}
.hero-stated--centred .hero-stated-inner {
  text-align: center;
}
.hero-stated--centred .hero-stated-title,
.hero-stated--centred .hero-stated-sub {
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .hero-stated {
    padding-inline: var(--space-8);
  }
}

/* Holding a signup-card in place of the join button. */
.hero-stated--centred .signup-card {
  margin-inline: auto;
}
/* Wide: the words on the left, the card on the right, and the first step
   above the fold. */
@media (min-width: 60rem) {
  .hero-stated:has(.signup-card) {
    padding-block: var(--space-6) var(--space-8);
  }
  .hero-stated-inner:has(.signup-card) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    column-gap: var(--space-8);
    align-items: start;
  }
  .hero-stated-inner:has(.signup-card) > :not(.hero-stated-cta) {
    grid-column: 1;
  }
  .hero-stated-inner:has(.signup-card) > .hero-stated-cta {
    grid-column: 2;
    grid-row: 1 / span 6;
  }
}
/* === /pattern hero-stated@7 === */

/* === signup card placement === */
.hero-stated--plain {
  --hero-stated-ground: transparent;
}

.hero-stated-title {
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  overflow-wrap: normal;
  hyphens: manual;
  max-width: 12em;
}
@media (max-width: 900px) {
  .hero-stated--plain {
    --hero-stated-ground: #ffffff;
  }
}

@media (max-width: 600px) {
  .hero-stated {
    margin-inline: calc(var(--page-pad) * -1);
    padding-inline: 0;
  }

  .hero-stated-title,
  .hero-stated-sub {
    padding-inline: var(--page-pad);
  }

  .signup-card-form {
    padding-inline: 14px;
  }
}
/* === /signup card placement === */

































/* === comparisons pages === */
.cmp-head {
  max-width: min(640px, 60vw);
  padding: 24px 0 8px;
}

.cmp-eyebrow {
  margin: 0 0 12px;
  color: var(--color-accent-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.cmp-head__title {
  margin: 0 0 12px;
  text-align: left;
}

.cmp-head__meta {
  margin: 0 0 16px;
  color: var(--color-muted);
  font-size: 14px;
}

.cmp-head__text {
  margin: 0;
  color: var(--color-body);
  font-size: 18px;
  line-height: 1.6;
}

.cmp-list {
  padding: 24px 0 32px;
}

.cmp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cmp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: 16px;
  background: #f3effa;
  transition: transform 0.2s, box-shadow 0.2s;
}

.cmp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(80, 96, 169, 0.18);
}

.cmp-card__tag {
  margin: 0;
  color: var(--color-accent-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.cmp-card__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.cmp-card__link {
  color: var(--color-ink);
  text-decoration: none;
}

.cmp-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.cmp-card__text {
  margin: 0;
  color: var(--color-body);
  font-size: 15px;
  line-height: 1.55;
}

.cmp-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto 0 0;
  padding-top: 8px;
  color: var(--color-muted);
  font-size: 14px;
}

.cmp-card__arrow {
  color: var(--color-accent-ink);
  font-size: 20px;
}

.cmp-verdict {
  padding: 16px 0 24px;
}

.cmp-verdict .wrap {
  padding-top: 24px;
  padding-bottom: 24px;
  border-radius: 16px;
  background: #f3effa;
}

.cmp-verdict__title {
  margin: 0 0 8px;
  color: var(--color-primary);
  font-size: 22px;
}

.cmp-verdict p {
  max-width: 820px;
  margin: 0;
  color: #444444;
  line-height: 1.6;
}

.cmp-section {
  padding: 24px 0;
}

.cmp-section__title {
  margin-bottom: 16px;
  text-align: left;
}

.cmp-section__sub {
  margin: 0 0 12px;
  color: var(--color-primary);
  font-size: 22px;
}

.cmp-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}

.cmp-table th,
.cmp-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-rule);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  color: var(--color-body);
}

.cmp-table thead th {
  border-bottom: 2px solid var(--color-accent-ink);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cmp-table thead th.cmp-table__us {
  color: var(--color-accent-ink);
}

.cmp-table tbody th {
  width: 22%;
  color: var(--color-muted);
  font-weight: 500;
}

.cmp-table td.cmp-table__us {
  color: var(--color-ink);
  font-weight: 600;
}

.cmp-prose .wrap {
  max-width: 820px;
}

.cmp-prose p {
  margin: 0 0 16px;
  color: var(--color-body);
  line-height: 1.7;
}

.cmp-prose .cmp-section__sub {
  margin-top: 32px;
}

.cmp-prose a {
  color: var(--color-primary);
}

.cmp-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.cmp-list-plain {
  margin: 0;
  padding-left: 20px;
  color: var(--color-body);
  line-height: 1.7;
}

.cmp-note {
  padding: 8px 0 48px;
}

.cmp-note p {
  max-width: 820px;
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .cmp-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .cmp-head {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .cmp-cards {
    grid-template-columns: 1fr;
  }

  .cmp-two {
    grid-template-columns: 1fr;
  }

  .cmp-head__text {
    font-size: 16px;
  }

  .cmp-table {
    font-size: 14px;
  }

  .cmp-table th,
  .cmp-table td {
    padding: 10px 8px;
  }

  .cmp-table tbody th {
    width: 26%;
  }

  .cmp-table thead th {
    font-size: 11px;
    letter-spacing: 0.05em;
  }
}
/* === /comparisons pages === */



















/* === pricing page === */
.plans {
  padding: 24px 0 8px;
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 -1px 11px 3px rgba(34, 60, 80, 0.11);
}

.plan-card--top {
  background: #f3effa;
  box-shadow: 0 0 0 2px var(--color-primary), 0 6px 18px rgba(80, 96, 169, 0.18);
}

.plan-card__name {
  margin: 0;
  color: var(--color-accent-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan-card__price {
  margin: 0;
  color: var(--color-ink);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}

.plan-card__price span {
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 500;
}

.plan-card__lead {
  margin: 0;
  color: var(--color-body);
  line-height: 1.5;
}

.plan-list {
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
  color: var(--color-body);
  line-height: 1.5;
}

.plan-list li {
  position: relative;
  padding: 4px 0 4px 26px;
}

.plan-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-accent-ink);
  font-weight: 700;
}

.plan-prices {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.plan-prices th,
.plan-prices td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--color-rule);
  text-align: left;
  color: var(--color-body);
}

.plan-prices thead th {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-prices tbody th {
  color: var(--color-ink);
  font-weight: 600;
}

.plan-prices td:nth-child(2) {
  color: var(--color-ink);
  font-weight: 600;
}

.plan-card__btn {
  align-self: stretch;
  margin-top: 8px;
  text-align: center;
}

.plan-note {
  max-width: 820px;
  margin: 20px 0 0;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.6;
}

.plan-currencies {
  margin-top: 16px;
}

.plan-currencies summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 600;
}

.plan-currencies__scroll {
  margin-top: 12px;
  overflow-x: auto;
}

.plan-prices--wide {
  min-width: 560px;
}

.plan-assure {
  padding: 24px 0;
}

.plan-assure__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.plan-assure__list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #f3effa;
}

.plan-assure__list strong {
  color: var(--color-ink);
}

.plan-assure__list span {
  color: var(--color-body);
  font-size: 14px;
  line-height: 1.4;
}

.plan-faqs {
  max-width: 820px;
}

.plan-faq {
  border-bottom: 1px solid var(--color-rule);
  padding: 14px 0;
}

.plan-faq summary {
  cursor: pointer;
  color: var(--color-ink);
  font-weight: 600;
}

.plan-faq p {
  margin: 10px 0 0;
  color: var(--color-body);
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .plan-cards {
    grid-template-columns: 1fr;
  }

  .plan-assure__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .plan-assure__list {
    grid-template-columns: 1fr;
  }

  .plan-card {
    padding: 22px;
  }
}
/* === /pricing page === */


















/* === articles page === */
.art-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 421px);
  gap: 32px;
  align-items: center;
}

.art-head .cmp-head {
  max-width: none;
}

.art-figure {
  margin: 24px 0 0;
}

.art-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(34, 60, 80, 0.18);
}

@media (max-width: 1000px) {
  .art-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .art-figure img {
    max-width: 421px;
  }
}
/* === /articles page === */

/* === site nav === */
.header-list {
  position: relative;
  flex: 2;
}

.header-list__links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px clamp(16px, 2vw, 30px);
  white-space: nowrap;
}

.header-list__links ul {
  display: contents;
  list-style: none;
}

.header-list__links li {
  list-style: none;
}

.header-list__links li a {
  position: relative;
  padding-block: 8px;
  color: var(--color-primary);
  font-size: clamp(14px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.header-list__links li a:hover,
.header-list__links li a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.nav-toggle {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.nav-button {
  display: none;
}

.nav-login {
  display: none;
}

.header__links,
.header__links a {
  white-space: nowrap;
}

:root {
  --logo-w: clamp(160px, 22vw, 350px);
}

.header__logo img {
  width: var(--logo-w);
  max-width: 100%;
}

/* the page's outer wrapper must not be a scroll container, or a sticky header cannot stick */
.main {
  overflow: visible;
  overflow-x: clip;
}

/* contrast: Log in is a bordered pill with blue text, never white on the shape */
.header__links-left {
  padding: 6px 12px;
  border: 1.5px solid var(--color-primary);
  border-radius: 5px;
  background: #ffffff;
  color: var(--color-primary);
  font-size: clamp(12px, 1.1vw, 16px);
  text-shadow: none;
}

.header__links-right {
  padding: 8px 18px;
  font-size: clamp(12px, 1.1vw, 16px);
  margin-left: 0;
}

.header__links {
  gap: 12px;
}

.header-list__links {
  gap: 8px clamp(14px, 1.6vw, 26px);
}

.header-link,
.header-list__links li a {
  font-size: clamp(14px, 1.3vw, 19px);
}

/* contrast: the footer's pink end is deepened so white text clears 4.5:1 */
.footer__svg stop:last-child {
  stop-color: #85669f;
}

/* pages with a short opener get a smaller shape so it stays behind the opener */
.main--compact .main__svg:not(.main__svg--small) {
  width: min(34vw, 480px);
}

.main--compact .hero--text {
  padding-bottom: 110px;
}

/* phones and tablets: the same soft corner shape the Features and About pages use,
   kept clear of the text (small, half strength, tucked into the top-right corner) */
@media (max-width: 900px) {
  .main--compact .main__svg:not(.main__svg--small) {
    display: none;
  }

  .main--compact .main__svg--small {
    display: block;
    top: 40px;
    right: -50px;
    width: 150px;
    opacity: 0.5;
  }

  .main--compact .hero--text {
    padding-top: 84px;
    padding-bottom: 60px;
  }
}

.member-filter-legend {
  color: #4a4a4a;
  font-size: 14px;
}

@media (max-width: 1200px) {
  .header__links-left {
    display: none;
  }

  .header-list__links .nav-login {
    display: block;
    margin-top: 4px;
    border-top: 1px solid var(--color-rule);
    padding-top: 16px;
    font-weight: 600;
  }

  .header-list {
    display: block;
    flex: none;
    order: 3;
  }

  .nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--color-primary);
    border-radius: 12px;
    color: var(--color-primary);
    cursor: pointer;
  }

  .nav-toggle:checked + .nav-button {
    background: var(--color-primary);
    color: #ffffff;
  }

  .nav-toggle:focus-visible + .nav-button {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
  }

  .header-list__links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 220px;
    padding: 12px 8px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(34, 60, 80, 0.2);
  }

  .nav-toggle:checked ~ .header-list__links {
    display: flex;
  }

  .header-list__links ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .header-list__links .header-link,
  .header-list__links li a {
    display: block;
    padding: 12px 16px;
    font-size: 18px;
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-wrap: nowrap;
    gap: 12px;
    margin-inline: calc(var(--page-pad) * -1);
    padding: 12px var(--page-pad);
    background: #ffffff;
  }

  #gallery,
  #members,
  #features,
  #faqs,
  #reviews {
    scroll-margin-top: 96px;
  }

  .header__logo {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 0;
  }

  .header__links {
    order: 2;
    margin-left: auto;
    gap: 14px;
  }
}

@media (max-width: 600px) {
  :root {
    --logo-w: clamp(140px, 48vw, 200px);
  }

  .header__links {
    gap: 6px;
  }

  .nav-button {
    width: 40px;
    height: 40px;
  }

  .header__links-left {
    padding: 5px 8px;
    font-size: 11px;
  }

  .header__links-right {
    padding: 8px 14px;
    font-size: 12px;
    margin-left: 0;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* === /site nav === */

/* === sticky header === */
@keyframes header-shrink {
  to {
    padding-block: 6px;
    box-shadow: 0 2px 12px rgba(34, 60, 80, 0.18);
  }
}

@keyframes logo-shrink {
  to {
    width: calc(var(--logo-w) * 0.78);
  }
}

@supports (animation-timeline: scroll()) {
  @media (max-width: 1200px) and (prefers-reduced-motion: no-preference) {
    .header {
      animation: header-shrink linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120px;
    }

    .header__logo img {
      animation: logo-shrink linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120px;
    }
  }
}
/* === /sticky header === */

/* === more menu === */
/* wide screens: the first three menu items show in the bar, the rest sit under "More" */
.header-list__links > ul li:nth-child(n + 4) {
  display: none;
}

.more-panel ul li:nth-child(-n + 3) {
  display: none;
}

.more {
  position: relative;
}

.more-toggle {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.more-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 8px;
  color: var(--color-primary);
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.more-button:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.more-icon {
  transition: transform 0.2s;
}

.more-toggle:checked + .more-button .more-icon {
  transform: rotate(180deg);
}

.more-toggle:focus-visible + .more-button {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 6px;
}

.more-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: -12px;
  z-index: 30;
  min-width: 200px;
  padding: 8px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(34, 60, 80, 0.2);
}

.more-toggle:checked ~ .more-panel {
  display: block;
  z-index: 31;
}

/* while the dropdown is open, a click anywhere else closes it: the label's pseudo-element
   covers the page and toggles the same checkbox, and the links stay on top of it */
.more-toggle:checked + .more-button::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 25;
  cursor: default;
}

.header:has(.more-toggle:checked) .header-list__links a,
.header:has(.more-toggle:checked) .header__links a {
  position: relative;
  z-index: 31;
}

.more-panel ul {
  display: block;
  margin: 0;
  padding: 0;
}

.more-panel li a {
  display: block;
  padding: 10px 14px;
  white-space: nowrap;
}

/* phones and tablets: one list in the hamburger menu, with no "More" */
@media (max-width: 1200px) {
  .more {
    display: none;
  }

  .header-list__links > ul li:nth-child(n + 4) {
    display: list-item;
  }
}
/* === /more menu === */