/* My Cupid Dates -- site stylesheet. Seeded 13 Nov 2026 on Hub's box. Palette from the teal wordmark. */

*, *::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; }

:root {
  --color-bg: #f6f3ec;
  --color-surface: #ffffff;
  --color-surface-soft: #e7eef1;
  --color-text: #24353d;
  --color-text-soft: #5a6d75;
  --color-heading: #14384a;
  --color-primary: #1e6a86;
  --color-primary-dark: #15506a;
  --color-scrim: #14384a;
  --color-rule: #d5e0e4;
  --color-focus: #9a4a2a;
  --color-accent: #b8893a;
  --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: 72rem;
  --btn-radius: 999px;
  --card-radius: 12px;
  --card-shadow: 0 1px 2px rgba(20, 56, 74, .06), 0 10px 24px -14px rgba(20, 56, 74, .18);
  --card-border: 1px solid var(--color-rule);
  --chip-radius: 999px;
  --logo-height: 32px;
  --transition-fast: 120ms ease;
  --transition-slow: 320ms ease;
  --type-scale: 1;
  --font-heading: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-body: "Figtree", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
h1, h2, h3, h4, .cta-band h2, .join-box p {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 600;
  line-height: 1.2;
}
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

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

/* === hubbi-draft tokens (button inks, contrast-checked locally) === */
:root {
  --btn-bg: #1e6a86;
  --btn-ink: #ffffff;
  --color-primary-ink: #15506a;
}
/* === 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 === */

/* === hubbi-draft brand (brand-specific overrides) === */
body .site-head { background: #14384a; border-bottom: 0; }
body .site-head .login, body .site-head .site-nav a, body .site-head .site-nav a:visited { color: #f6f3ec; }
body .site-head .nav-burger span { background: #f6f3ec; }
body .site-head .site-nav { background: #14384a; }
body .site-head .logo { max-height: 32px; width: auto; max-width: 170px; height: auto; }
body .join-box { margin: 1.15rem 0 0; padding: 1.05rem 1.15rem 1.15rem; background: #fff; color: var(--color-text); border-radius: 12px; border: 1px solid var(--color-rule); box-shadow: var(--card-shadow); }
body .join-box p { margin: 0 0 0.75rem; font-family: var(--font-body); font-size: 1.05rem; color: var(--color-heading); }
body .join-box-btn, body .cta-band .btn, body .cta-band-btn {
  display: inline-block; padding: 0.75rem 1.25rem; background: var(--btn-bg); color: var(--btn-ink) !important;
  border-radius: var(--btn-radius); font-weight: 700; text-decoration: none; font-family: var(--font-body);
}
body .join-box-btn:hover, body .cta-band .btn:hover, body .cta-band-btn:hover { background: var(--color-primary-dark); color: #fff !important; }
body .cta-sticky, .cta-sticky { display: none !important; }
@media (min-width: 1024px) {
  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: #f6f3ec; }
}

/* === hubbi-draft brand end === */

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

/* mcd: 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; }
}

/* mcd: desktop header (2 Nov). The header is dark, so inline nav links keep the light ink; one row, no wrap. */
@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: #f6f3ec; }
  body .site-head .site-nav a:focus-visible { outline-color: #f6f3ec; }
  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; }
}
body .site-head { background: #14384a; border-bottom: 0; }
body .site-head .login, body .site-head .site-nav a, body .site-head .site-nav a:visited { color: #f6f3ec; }
body .site-head .nav-burger span { background: #f6f3ec; }
body .site-head .site-nav { background: #14384a; }
body .site-head .logo { max-height: 32px; width: auto; max-width: 170px; height: auto; }
body .join-box { margin: 1.15rem 0 0; padding: 1.05rem 1.15rem 1.15rem; background: #fff; color: var(--color-text); border-radius: 12px; border: 1px solid var(--color-rule); box-shadow: var(--card-shadow); }
body .join-box p { margin: 0 0 0.75rem; font-family: var(--font-body); font-size: 1.05rem; color: var(--color-heading); }
body .join-box-btn, body .cta-band .btn, body .cta-band-btn {
  display: inline-block; padding: 0.75rem 1.25rem; background: var(--btn-bg); color: var(--btn-ink) !important;
  border-radius: var(--btn-radius); font-weight: 700; text-decoration: none; font-family: var(--font-body);
}
body .join-box-btn:hover, body .cta-band .btn:hover, body .cta-band-btn:hover { background: var(--color-primary-dark); color: #fff !important; }
body .cta-sticky, .cta-sticky { display: none !important; }
@media (min-width: 1024px) {
  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: #f6f3ec; }
}
/* === hubbi defaults 2 Nov 2026 end === */

/* Design 375 contrast fix, 13 Nov 2026 (preview only).
   1. Header logo is the light wordmark, capped at 32px (overrides the inherited 40px max-height).
   2. Join band text was unreadable because --color-on-scrim was never set, so the heading
      fell through to #14384a and the body inherited #24353d, both on the #14384a band. */
:root { --color-on-scrim: #dbe7ec; }
body .site-head .logo,
body .site-head .brand .logo,
body .logo {
  max-height: 32px;
  height: auto;
  width: auto;
}
@media (max-width: 1023px) {
  body .site-head .logo,
  body .site-head .brand .logo,
  body .logo {
    max-height: 32px;
    height: auto;
    width: auto;
  }
}
body .cta-band h2 { color: #fff; }
body .cta-band p { color: #dbe7ec; }

/* ---- 13 Nov 2026 pricing-v2 (ported from the Design-passed preview <style>) ---- */
body .hero-actions{margin-bottom:16px}body .mcd-ccy{margin-top:var(--space-6)}body .mcd-price-wrap{margin:var(--space-3) 0 var(--space-5)}body .mcd-price-wrap>table.mcd-price{min-width:0;width:100%;max-width:100%;table-layout:auto;border-collapse:separate;border-spacing:0}body .mcd-price-wrap>table.mcd-price caption{caption-side:top;text-align:left;font-weight:700;padding:0 0 var(--space-3)}body .mcd-price-wrap>table.mcd-price .mcd-amt{display:block;font-size:1.15rem;color:var(--color-heading)}body .mcd-price-wrap>table.mcd-price .mcd-week{display:block;margin-top:var(--space-1);font-weight:600}@media (max-width:47.99em){body .mcd-price-wrap>table.mcd-price,body .mcd-price-wrap>table.mcd-price tbody,body .mcd-price-wrap>table.mcd-price tr,body .mcd-price-wrap>table.mcd-price th,body .mcd-price-wrap>table.mcd-price td{display:block;width:auto}body .mcd-price-wrap>table.mcd-price caption{display:block}body .mcd-price-wrap>table.mcd-price thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}body .mcd-price-wrap>table.mcd-price{background:transparent}body .mcd-price-wrap>table.mcd-price tr{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 .mcd-price-wrap>table.mcd-price th[scope=row]{border:0;padding:0 0 var(--space-2);font-size:1.05rem;color:var(--color-heading)}body .mcd-price-wrap>table.mcd-price td{border:0;border-top:1px solid var(--color-rule);padding:var(--space-3) 0 0;margin-top:var(--space-3)}body .mcd-price-wrap>table.mcd-price 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}}@media (min-width:48em){body .mcd-price-wrap>table.mcd-price thead th{position:sticky;top:56px;z-index:2;background:var(--color-surface-soft);box-shadow:inset 0 -1px 0 var(--color-rule)}body .mcd-price-wrap>table.mcd-price th[scope=row]{width:22%}}@media (min-width:1024px){body .mcd-price-wrap>table.mcd-price thead th{top:72px}}