/* === 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 === */

/* Neurodivergent Dating -- site stylesheet. Seeded by page_brief.py --seed; the palette
   below was derived from the logo's inks and is a starting point to correct,
   never a decision already made. Everything else on this site builds on it. */

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

/* ---- tokens ---- */
:root {
  --color-bg: #f9fcfd;
  --color-surface: #ffffff;
  --color-surface-soft: #f0f9fb;
  --color-text: #23323c;
  --color-text-soft: #707a80;
  --color-heading: #17262c;
  --color-primary: #2ca3c4;
  --color-primary-dark: #217992;
  --color-scrim: #1a3842;
  --color-rule: #e1f2f7;
  --color-focus: #87341d;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;
  --container-max: 75rem;

  /* The dials are the brand's character: decide them, do not keep them. */
  --btn-radius: 8px;
  --card-radius: 14px;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px -12px rgba(0, 0, 0, .18);
  --card-border: 1px solid var(--color-rule);
  --chip-radius: 999px;
  --logo-height: 96px;

  --transition-fast: 120ms ease;
  --transition-slow: 320ms ease;

  --type-scale: 1;
}

/* ---- base type ---- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.61;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-display, 700);
  color: var(--color-heading);
  line-height: calc(1.15 * var(--heading-leading, 1));
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
}

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

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 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 {
  /* Inks. The ratios are measured, not intended. */
  /* on this brand's own --color-scrim: 12.44: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;
}
/* === pattern-tokens:end === */























/* === hubbi-draft tokens (button inks, contrast-checked locally) === */
:root {
  --btn-bg: #1e7289;
  --btn-ink: #ffffff;
  --color-primary-ink: #1e7289;
}
/* === hubbi-draft tokens end === */

/* === hubbi-draft components (added locally for the draft build; review with the direction) === */
body .wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); }
body .skip { position: absolute; left: -999px; } body .skip:focus { left: var(--space-4); top: var(--space-4); background: var(--color-surface); padding: var(--space-2) var(--space-4); z-index: 10; }
body .site-head { background: var(--color-surface); border-bottom: var(--card-border); position: sticky; top: 0; z-index: 5; }
body .head-row { display: flex; align-items: center; gap: var(--space-4); min-height: 72px; flex-wrap: wrap; }
body .logo { height: min(var(--logo-height), 64px); width: auto; max-width: min(20rem, 55vw); object-fit: contain; object-position: left center; }
body .brand { margin-right: auto; display: flex; align-items: center; padding: var(--space-2) 0; }
body .nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
body .nav-burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: var(--space-3); order: 3; }
body .nav-burger span { display: block; width: 24px; height: 3px; background: var(--color-heading); border-radius: 2px; }
body .nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--color-focus); }
body .site-nav { display: none; order: 4; flex-basis: 100%; }
body .nav-toggle:checked ~ .site-nav { display: block; }
body .site-nav ul { list-style: none; margin: 0; padding: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
body .site-nav a { color: var(--color-heading); text-decoration: none; font-weight: 600; padding: var(--space-2) 0; display: inline-block; }
body .head-actions { display: flex; align-items: center; gap: var(--space-3); order: 2; }
body .login { color: var(--color-heading); font-weight: 600; text-decoration: none; }
@media (min-width: 1024px) {
  body .nav-burger { display: none; }
  body .site-nav { display: block; order: 1; flex-basis: auto; }
  body .site-nav ul { flex-direction: row; padding: 0; gap: var(--space-5); }
  body .head-actions { order: 2; }
}
body .btn { display: inline-block; background: var(--btn-bg); color: var(--btn-ink); padding: .7em 1.2em; border-radius: var(--btn-radius); font-weight: 700; text-decoration: none; line-height: 1.2; min-height: 44px; box-sizing: border-box; }
body .btn:hover { filter: brightness(.94); }
body .btn-lg { font-size: 1.125rem; padding: .85em 1.6em; }
body .hero { background: var(--color-surface-soft); padding: var(--space-9) 0 var(--space-8); border-bottom: var(--card-border); }
body .hero-home { padding: var(--space-10) 0 var(--space-9); }
body .hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); max-width: 22ch; margin: var(--space-3) 0 var(--space-4); }
body .lede { font-size: 1.2rem; max-width: 60ch; color: var(--color-text); }
body .hero-actions { margin-top: var(--space-6); }
body .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .85rem; color: var(--color-primary-ink); }
body .trust { margin-top: var(--space-4); color: var(--color-text-soft); font-size: .95rem; }
body .crumbs { font-size: .9rem; display: flex; gap: var(--space-2); flex-wrap: wrap; color: var(--color-text-soft); }
body .crumbs a { color: var(--color-text-soft); }
body .prose { padding-top: var(--space-8); padding-bottom: var(--space-9); }
body .prose > h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: var(--space-9) 0 var(--space-4); max-width: 30ch; }
body .prose > h2:first-child { margin-top: 0; }
body .prose > h3 { font-size: 1.25rem; margin: var(--space-6) 0 var(--space-3); }
body .prose > p, body .prose > ul, body .prose > .note { max-width: 68ch; margin-bottom: var(--space-4); }
body .prose a { color: var(--color-primary-ink); }
body .note { color: var(--color-text-soft); font-size: .95rem; }
body .ticks { padding-left: 1.2em; } body .ticks li { margin-bottom: var(--space-2); }
body .steps { list-style: none; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: s; margin: var(--space-5) 0; }
body .steps li { background: var(--color-surface); border: var(--card-border); border-radius: var(--card-radius); padding: var(--space-5); counter-increment: s; }
body .steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; margin-bottom: var(--space-3); }
body .steps h3, body .card h3 { font-size: 1.15rem; margin-bottom: var(--space-2); }
body .cards { list-style: none; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: var(--space-5) 0; }
body .card { background: var(--color-surface); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--space-5); }
body .card h3 a { color: var(--color-heading); }
body .table-wrap { overflow-x: auto; margin: var(--space-5) 0; }
body table { border-collapse: collapse; width: 100%; min-width: 34rem; background: var(--color-surface); }
body caption { text-align: left; font-weight: 700; padding-bottom: var(--space-3); }
body th, body td { border: 1px solid var(--color-rule); padding: var(--space-3); text-align: left; vertical-align: top; }
body thead th { background: var(--color-surface-soft); }
body .price-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin: var(--space-5) 0; }
body .price-card { background: var(--color-surface); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--space-6); }
body .plans { list-style: none; padding: 0; margin: var(--space-4) 0; }
body .plans li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-rule); }
body .plans small { grid-column: 1 / -1; color: var(--color-text-soft); }
body .members { margin: var(--space-6) 0; min-height: 4rem; }
body .members > * { list-style: none; }
body .cta-band { background: var(--color-scrim); color: var(--color-on-scrim); border-radius: var(--card-radius); padding: var(--space-8) var(--space-6); margin: var(--space-9) 0 var(--space-6); text-align: center; }
body .cta-band h2 { color: var(--color-on-scrim); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-3); }
body .cta-band p { margin: 0 auto var(--space-5); max-width: 55ch; }
body .byline { font-weight: 600; color: var(--color-text-soft); margin: 0 0 var(--space-3); }
body .author-note, body .source-note { border-top: var(--card-border); margin-top: var(--space-7); padding-top: var(--space-4); font-size: .95rem; color: var(--color-text-soft); }
body .source-note ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }
body .source-title { font-weight: 700; margin: 0; color: var(--color-heading); }
body .prose a.btn, body .cta-band a.btn { color: var(--btn-ink); text-decoration: none; }
body .faq { margin-top: var(--space-9); max-width: 72ch; }
body .faq h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-4); }
body .faq details { border-bottom: 1px solid var(--color-rule); padding: var(--space-4) 0; }
body .faq summary { font-weight: 700; cursor: pointer; color: var(--color-heading); }
body .faq details p { margin-top: var(--space-3); }
body .site-foot { background: var(--color-surface); border-top: var(--card-border); padding: var(--space-8) 0; font-size: .95rem; }
body .foot-links, body .legal { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
body .foot-links a { color: var(--color-heading); font-weight: 600; }
body .legal a, body .copy { color: var(--color-text-soft); }
/* === hubbi-draft components end === */

/* members block (platform markup: .lp-grid/.mem-card), from library member-grid v1 */
body .members {
  display: block;
}
body .members .lp-grid,
body .members .lp-members__empty {
  max-width: var(--container-max);
  margin-inline: auto;
}
body .members .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;
}
body .members .mem-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  position: relative;
}
body .members .mem-card img,
body .members .mem-card__initial {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--card-radius);
  background: var(--color-surface);
}
body .members .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));
}
body .members .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(--btn-ink);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}
body .members .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;
}
body .members .mem-card__where,
body .members .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. */
body .members .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. */
body .members .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;
}
body .members .mem-card__cta:hover {
  text-decoration: underline;
}
body .members .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. */
body .members .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;
}
body .members .mem-card--join .mem-card__cta {
  justify-content: center;
  margin: 0;
}
body .members .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;
}
@media (min-width: 48rem) {
  body .members .lp-grid {
    gap: var(--space-5);
  }
  body .members .lp-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
  body .members .mem-card--join {
    min-height: 11rem;
  }
}

/* === hubbi mobile header (one row <=640px) — optional brand-wide version of the homepage fix; append to global.css === */
@media (max-width: 640px) {
  body .wrap { padding: 0 var(--space-4); }
  body .head-row { flex-wrap: nowrap; min-height: 56px; gap: var(--space-2); }
  body .brand { flex: 0 1 auto; min-width: 0; padding: 0; }
  body .logo { height: 38px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
  body .head-actions { gap: var(--space-2); flex: 0 0 auto; }
  body .login { padding: var(--space-2) var(--space-1); font-size: .95rem; }
  body .head-actions .btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9em; font-size: .95rem; }
  body .nav-burger { padding: var(--space-2); margin-right: calc(-1 * var(--space-2)); flex: 0 0 auto; }
  body .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border-bottom: var(--card-border); padding: 0 var(--space-4); }
  body .nav-toggle:checked ~ .site-nav:empty { display: none; }
}

/* === hubbi header 1024-1199px: keep the menu behind the burger until 8 links + Login/Join fit on one row (21 Oct 2026) === */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  body .nav-burger { display: flex; }
  body .site-nav { display: none; order: 4; flex-basis: 100%; }
  body .nav-toggle:checked ~ .site-nav { display: block; }
  body .site-nav ul { flex-direction: column; padding: 0 0 var(--space-4); gap: var(--space-2); }
}