/* === 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=Rubik:ital,wght@0,400..700;1,400..700&family=Bitter:wght@500..800&display=swap");
/* === pattern-tokens:font-import:end === */

/* SML -- site stylesheet (seed structure from the SDS family, palette re-derived from this logo: navy ink, blush heart). 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: #fbf9f8;
  --color-surface: #ffffff;
  --color-surface-soft: #f4eeec;
  --color-text: #242424;
  --color-text-soft: #5e5e5e;
  --color-heading: #2b2b2b;
  --color-primary: #c62828;
  --color-primary-dark: #962020;
  --color-scrim: #2b2b2b;
  --color-rule: #e7e0de;
  --color-focus: #c62828;
  --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 Bitter, on the heading. Arial,
   resized to match Bitter, 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: 'BitterFallback';
  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: 'BitterFallback';
  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 Rubik, on the body. Arial,
   resized to match Rubik, 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: 'RubikFallback';
  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: 'RubikFallback';
  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: 16.54:1 */
  --color-on-scrim: #ffffff;

  /* Type: the Sunny Side pairing. Chosen, not derived. */
  --font-heading: 'Bitter', 'BitterFallback', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Rubik', 'RubikFallback', '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: #c62828;
  --btn-ink: #ffffff;
  --color-primary-ink: #a61f1f;
}
/* === 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; }
}
/* Mobile header: one row closed (logo left, burger top-right).
   Open menu is an absolute full-width drawer under the head-row so flex nowrap
   cannot reflow/overlap the logo (Claude Hubbi masthead pattern). */
@media (max-width: 1023px) {
  body .head-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    min-height: 56px;
    position: relative;
  }
  body .brand {
    margin-right: auto;
    min-width: 0;
    flex: 1 1 auto;
    padding: var(--space-2) 0;
    position: relative;
    z-index: 2;
  }
  body .logo {
    max-width: min(18rem, calc(100vw - 5.5rem));
  }
  body .nav-burger {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0;
    padding: var(--space-3);
    position: relative;
    z-index: 2;
  }
  body .head-actions {
    display: none !important;
  }
  body .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: auto;
    order: 4;
    flex: none;
    flex-basis: auto;
    background: var(--color-surface);
    border-bottom: var(--card-border);
    box-shadow: 0 10px 24px rgba(28, 15, 22, 0.12);
    padding: var(--space-3) 0 var(--space-4);
    z-index: 6;
    box-sizing: border-box;
  }
  body .nav-toggle:checked ~ .site-nav {
    display: block;
  }
  body .site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-5) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-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); }
/* 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-draft components end === */

/* === ofb fixes start === */
/* === Design 375 fixes 30 Oct 2026 (Hub): no-menu burger + menu contrast === */
/* No Primary menu exists yet. The platform expands {{menu.navigation}} to nothing when no
   menu is assigned, so hide the burger and the drawer until the nav actually holds links.
   Once the Primary menu is created and assigned, the burger comes back on its own. */
body .site-head:not(:has(.site-nav li a)) .nav-burger,
body .site-head:not(:has(.site-nav li a)) .site-nav { display: none !important; }
/* Menu on the dark band: everything in the drawer is white (16.5:1 on --color-scrim), never grey */
body .site-head .site-nav,
body .site-head .site-nav a,
body .site-head .site-nav a:visited,
body .site-head .site-nav a:hover,
body .site-head .site-nav a:focus-visible { color: #ffffff; }
body .site-head .site-nav a { font-weight: 700; text-decoration: none; }
body .site-head .site-nav a:hover { text-decoration: underline; text-underline-offset: .2em; }
body .site-head .site-nav a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
body .site-head .site-nav li + li { border-top: 1px solid rgba(255, 255, 255, .18); }
@media (max-width: 1023px) {
  body .site-head .site-nav { border-bottom: 0; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
}
body .site-head .nav-toggle:focus-visible + .nav-burger { outline-color: #ffffff; }
/* === Design 375 fixes 30 Oct 2026 end === */

/* === Design 375 fix 30 Oct 2026 (Hub): empty members slot (CDE/DFD 27 Oct pattern) ===
   The heading/note sit inside .members-slot, so the whole block hides when no member cards render. */
body .members { min-height: 0; }
body .members:empty { display: none; margin: 0; }
body .members-slot:not(:has(.mem-card)) { display: none; }
/* hidden slot as first child must not push the next heading down */
body .prose > .members-slot:first-child:not(:has(.mem-card)) + h2 { margin-top: 0; }
/* === empty members slot end === */

/* === Design 375 fix 31 Oct 2026 (Grok/Hub): stacked comparison tables (SFUK/CDE pattern) === */
body .table-wrap.table-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
  margin: var(--space-5) 0;
  border: 1px solid var(--color-rule);
  border-radius: var(--card-radius);
  background: var(--color-surface);
}
body .table-wrap.table-scroll > table {
  margin: 0;
  min-width: 36rem;
  width: max-content;
  max-width: none;
  border-collapse: separate;
  border-spacing: 0;
}
body .table-wrap.table-scroll caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  padding: var(--space-3) var(--space-3) var(--space-2);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
body .table-wrap.table-scroll th,
body .table-wrap.table-scroll td {
  min-width: 7.5rem;
  white-space: normal;
}
body .table-wrap.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-soft);
  box-shadow: inset 0 -1px 0 var(--color-rule);
}
body .table-scroll-hint {
  display: none;
  font-size: .85rem;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-2);
}
@media (max-width: 480px) {
  body .table-scroll-hint { display: block; }
  /* Stack each brand/tier as its own card — no clipped columns */
  body .table-wrap.table-scroll {
    border: 0;
    background: transparent;
    overflow: visible;
  }
  body .table-wrap.table-scroll > table {
    min-width: 0;
    width: 100%;
    display: block;
  }
  body .table-wrap.table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body .table-wrap.table-scroll tbody { display: block; }
  body .table-wrap.table-scroll tr {
    display: block;
    background: var(--color-surface);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-4);
    margin: 0 0 var(--space-4);
  }
  body .table-wrap.table-scroll th[scope="row"] {
    display: block;
    border: 0;
    padding: 0 0 var(--space-3);
    font-size: 1.05rem;
    color: var(--color-heading);
  }
  body .table-wrap.table-scroll td {
    display: block;
    border: 0;
    border-top: 1px solid var(--color-rule);
    padding: var(--space-3) 0 0;
    margin-top: var(--space-3);
    min-width: 0;
  }
  body .table-wrap.table-scroll td::before {
    content: attr(data-label);
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: .25rem;
  }
  body .table-scroll-hint { display: none; } /* cards — no swipe needed */
}
@media (max-width: 480px) {
  /* stacked: caption full width above the cards, no white slab behind them */
  body .table-wrap.table-scroll > table { background: transparent; }
  body .table-wrap.table-scroll caption { display: block; width: auto; padding: 0 0 var(--space-3); }
}
/* === stacked comparison tables end === */
/* === Design 375 fixes 31 Oct 2026 (Grok/Hub): one-row header + stacked caption === */
/* Phones (<=480px): header is one row. Logo left (max 170x32), Join + burger right,
   burger flush to the right edge, header Login hidden (Login lives in the menu).
   Open menu is an absolute full-width drawer under the row so nowrap can't reflow it. */
@media (max-width: 480px) {
  body .head-row {
    flex-wrap: nowrap;
    min-height: 56px;
    gap: var(--space-3);
    position: relative;
  }
  body .brand {
    margin-right: auto;
    min-width: 0;
    flex: 0 1 auto;
    padding: var(--space-2) 0;
  }
  body .logo {
    width: auto;
    height: auto;
    max-height: 32px;
    max-width: min(170px, 100%);
  }
  body .site-head .head-actions .login { display: none; }
  body .head-actions {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    gap: 0;
  }
  body .head-actions .btn { padding: .6em 1em; }
  body .nav-burger {
    order: 3;
    flex: 0 0 auto;
    margin: 0 calc(-1 * var(--space-3)) 0 0; /* icon flush with the right content edge */
  }
  body .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    order: 4;
    flex: none;
    background: var(--color-scrim);
    padding: var(--space-2) var(--space-5) var(--space-3);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    box-sizing: border-box;
    z-index: 6;
  }
}
/* Login menu item only needed where the header Login is hidden */
@media (min-width: 481px) {
  body .site-nav li:has(> a[href*="/s/login/"]) { display: none; }
}
/* Stacked tables: caption spans the full card width instead of a narrow column */
@media (max-width: 480px) {
  body .table-wrap.table-scroll caption {
    display: block;
    width: 100%;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
}
/* === Design 375 fixes 31 Oct 2026 end === */

/* === Hero photo (home, 31 Oct 2026; Singles Fifty UK pattern) === */
body .hero-photo { display: block; margin: 0; }
body .hero-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
@media (max-width: 767px) {
  body .hero-home.hero-has-photo { padding-top: 0; padding-bottom: var(--space-8); }
  /* Full-bleed: cancel the .wrap side padding so the photo runs edge to edge */
  body .hero-has-photo .hero-photo { margin: 0 calc(-1 * var(--space-5)) var(--space-5); width: calc(100% + 2 * var(--space-5)); max-width: none; }
  body .hero-has-photo .hero-photo img { aspect-ratio: 1100 / 636; object-position: center 25%; }
  body .hero-has-photo .hero-actions { margin-top: var(--space-5); }
}
@media (min-width: 768px) {
  body .hero-has-photo .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
  body .hero-has-photo .hero-photo { grid-column: 2; grid-row: 1; }
  body .hero-has-photo .hero-copy { grid-column: 1; grid-row: 1; }
  body .hero-has-photo .hero-photo img { max-height: 520px; object-position: top; border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
}
/* === end hero photo === */

/* ofb: keep header Join visible on mobile (MILFs override; header-one-row hides head-actions) */
@media (max-width: 1023px) {
  body .site-head .head-actions { display: flex !important; order: 2; margin-left: auto; }
}

/* ofb: desktop header on a light surface (2 Nov). design-375.css paints nav links white for the dark mobile drawer;
   on desktop the nav sits inline on the white header, so the links were invisible and pushed Login/Join onto a 2nd row. */
@media (min-width: 1024px) {
  body .head-row { flex-wrap: nowrap; }
  body .site-head .site-nav, body .site-head .site-nav a, body .site-head .site-nav a:visited, body .site-head .site-nav a:hover { color: var(--color-heading); }
  body .site-head .site-nav a:focus-visible { outline-color: var(--color-focus); }
  body .site-head .site-nav li + li { border-top: 0; }
  body .site-head .site-nav ul { gap: var(--space-4); }
  body .site-head .site-nav a { white-space: nowrap; font-size: .95rem; }
  body .site-head .head-actions { flex: 0 0 auto; white-space: nowrap; }
}

/* === hubbi defaults 2 Nov 2026 start === */

/* === MBS header Join 375 fix 2 Nov 2026 (Hub) ===
   header-one-row.css hides .head-actions below 1024px, so mobile had no Join and no Login,
   and the 400x75 logo filled the row at 287x64. Below 1024px: one row = logo (capped) + Join + burger.
   At <=480px Login leaves the row and shows as the first line of the open drawer (CSS only, no markup change).
   Desktop (>=1024px) is untouched. */
@media (max-width: 1023px) {
  body .site-head .head-row { gap: var(--space-2); min-height: 56px; }
  body .site-head .brand { flex: 0 1 auto; min-width: 0; }
  body .site-head .logo { width: min(180px, calc(100vw - 3rem - 128px)); height: auto; max-height: 40px; max-width: none; }
  body .site-head .head-actions { display: flex !important; order: 2; margin-left: auto; flex: 0 0 auto; gap: var(--space-3); }
  body .site-head .head-actions .btn { padding: .55em 1em; min-height: 44px; display: inline-flex; align-items: center; }
  body .site-head .nav-burger { padding: 10px; margin-right: -10px; }
}
@media (max-width: 480px) {
  body .site-head .head-actions .login { display: none; }
  body .site-head .nav-toggle:checked ~ .head-actions .login {
    display: block; position: absolute; left: var(--space-5); right: var(--space-5); top: 100%; z-index: 7;
    padding: var(--space-3) 0 var(--space-2); color: #ffffff; font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
  }
  body .site-head .nav-toggle:checked ~ .site-nav { padding-top: calc(var(--space-3) + 2.75rem); }
}
/* === MBS header Join 375 fix end === */
/* === Design 375 fix 2 Nov 2026: two-column term tables wrap inside 375px === */
/* Design's rule, scoped to non-stacked tables so the 3+ column card stacking (.table-wrap.table-scroll) is untouched.
   min-width:0 is needed too: brand global.css sets `body table { min-width: 34rem }`, which beats width:100%. */
@media (max-width: 480px) {
  body table:not(.table-scroll > table) { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; }
  body table:not(.table-scroll > table) td,
  body table:not(.table-scroll > table) th { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  body table:not(.table-scroll > table) td:first-child,
  body table:not(.table-scroll > table) th:first-child { width: 32%; padding-left: .4rem; padding-right: .4rem; hyphens: auto; }
  /* tighter side padding in the 32% column so single words such as "Protection" or "Medication" fit without a mid-word split */
}
/* === two-column term tables end === */
/* defaults: burger flush right, Join directly left of it (375 rule) */
@media (max-width: 1023px) {
  body .site-head .head-row { flex-wrap: nowrap; }
  body .site-head .brand { order: 1; flex: 1 1 auto; min-width: 0; }
  body .site-head .brand .logo { max-width: 100%; }
  body .site-head .head-actions { order: 2; }
  body .site-head .nav-burger { order: 3; }
}
@media (max-width: 480px) {
  /* Login line and menu items share one left edge in the open drawer */
  body .site-head .site-nav ul { padding-left: 0; padding-right: 0; }
}
/* === hubbi defaults 2 Nov 2026 end === */