/* www.xxxdirect.com site stylesheet (12 Nov 2026), one look for the whole site and its two sections
   (join.xxxdirect.com, the UK section; join-mature.xxxdirect.com, the mature South Africa section).
   Kept from the live XXX Direct page, not a lifestyle template: near-black plum grounds, the logo's purple (#7360c4) and
   the favicon's deeper violet (#5a43bb), the live page's sky-blue buttons (#87ceeb with near-black text), the outlined
   condensed headline (Big Shoulders Inline Text) and Montserrat for everything else. The one photograph per home is a
   suggestive couple in low warm light; inner pages open on words.
   Generated per host by working/tools/build_site.py from this template: edit the template, never a host's copy.
   Plain CSS, no script; the only inline styles in pages are custom properties for photo crops. */

:root {
  --page: #13101b;
  --panel: #1b1626;
  --panel-2: #231c33;
  --card: #241d36;
  --card-2: #2c2442;
  --text: #e9e5f2;
  --heading: #ffffff;
  --muted: #bcb3d0;
  --rule: #3a3150;
  --purple: #7360c4;
  --violet: #5a43bb;
  --lilac: #b7a8f0;
  --sky: #87ceeb;
  --sky-hover: #a9def3;
  --sky-ink: #07212c;
  --teal: #186c8e;
  --link: #a9def3;
  --link-hover: #ffffff;
  --head-bg: #0e0b15;
  --foot-bg: #0e0b15;
  --wrap: 68rem;
  --prose: 44rem;
  --logo-height: 68px;
  --logo-height-footer: 74px;
  --display: "Big Shoulders Inline Text", "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --heads: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
/* The platform drops every attribute of <body>, so the host class sits on a wrapper div (afrikaanssingles.co.za
   go-live, 14 Oct 2026). The sections keep the one look; only the eyebrow tint differs. */
.xd-host-main, .xd-host-uk, .xd-host-mature { background: var(--page); color: var(--text); }
.xd-host-mature { --eyebrow: #c7d9ef; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--page); }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.7; color: var(--text); background: var(--page); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--heads); font-weight: 800; color: var(--heading); line-height: 1.12; margin: 0 0 0.55em; overflow-wrap: break-word; letter-spacing: 0.005em; }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); color: var(--sky); line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.4rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25rem; }
li { margin: 0 0 0.45em; }
li::marker { color: var(--sky); }
strong { color: var(--heading); font-weight: 700; }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; background: var(--card); color: var(--text); }
th, td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
thead th, thead td { background: var(--violet); color: #fff; font-weight: 700; font-family: var(--font); }
tbody th { font-weight: 700; color: var(--heading); }
caption { caption-side: bottom; text-align: left; font-size: 0.82rem; color: var(--muted); padding: 0.5rem 0.75rem; background: var(--panel); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---- header: dark like the live page, the logo, Join always visible, the platform's menu ---- */
.xd-head { background: var(--head-bg); position: sticky; top: 0; z-index: 30; border-bottom: 3px solid var(--purple); }
.xd-head-inner { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.75rem; min-height: 3.6rem; }
.xd-head-mark { flex: 0 1 auto; display: block; min-width: 0; }
/* XXX Direct's file is a 320x71 wordmark; the sections' files are 560x200 canvases with the wordmark in the middle band
   (ink from y 15 to y 186), so those are cropped to that band. On a phone the width decides. */
.xd-head-logo { display: block; width: min(44vw, 11.5rem); height: auto; }
.xd-host-uk .xd-head-logo, .xd-host-mature .xd-head-logo { aspect-ratio: 5 / 3; width: auto; height: 3.6rem; object-fit: cover; object-position: 50% 50%; }
.xd-head-join {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.3rem 1.05rem;
  background: var(--sky); color: var(--sky-ink); border-radius: 8px; font-family: var(--font); font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
}
.xd-head-join:hover { background: var(--sky-hover); color: var(--sky-ink); }
.xd-menu { flex: 0 0 auto; }
.xd-menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; cursor: pointer; list-style: none; border-radius: 8px; }
.xd-menu-toggle::-webkit-details-marker { display: none; }
.xd-menu-bars, .xd-menu-bars::before, .xd-menu-bars::after { display: block; width: 1.55rem; height: 0.2rem; background: var(--sky); border-radius: 2px; }
.xd-menu-bars { position: relative; }
.xd-menu-bars::before, .xd-menu-bars::after { content: ""; position: absolute; left: 0; }
.xd-menu-bars::before { top: -0.48rem; }
.xd-menu-bars::after { top: 0.48rem; }
.xd-menu[open] .xd-menu-bars { background: transparent; }
.xd-menu[open] .xd-menu-bars::before { top: 0; transform: rotate(45deg); }
.xd-menu[open] .xd-menu-bars::after { top: 0; transform: rotate(-45deg); }
.xd-menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border-top: 2px solid var(--purple); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5); padding: 0.4rem 1rem 1rem; }
.xd-menu-nav ul { list-style: none; margin: 0; padding: 0; }
.xd-menu-nav li { margin: 0; }
.xd-menu-nav a { display: flex; align-items: center; min-height: 2.9rem; padding: 0.35rem 0.2rem; border-bottom: 1px solid var(--rule); color: #fff; font-weight: 600; text-decoration: none; }
.xd-menu-nav a:hover { color: var(--sky); }
.xd-menu-nav li:has(> ul) > a:not([href]) { cursor: default; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.xd-menu-nav ul ul { padding-left: 0.9rem; }
.xd-menu-controls { display: flex; gap: 0.75rem; padding-top: 0.75rem; }
.xd-menu-login { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border: 2px solid var(--sky); border-radius: 8px; color: var(--sky); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
@media (min-width: 62rem) {
  .xd-head-inner { padding: 0.55rem 1.5rem; gap: 1.2rem; min-height: 4.5rem; }
  /* --logo-height is the logo file's box as scripts/logo_fit.py measured it (working/logo-fit.json); the section
     lockups are cropped to their ink band at the same scale, so the drawn height is the same box. */
  .xd-head-logo { width: auto; height: var(--logo-height); }
  .xd-host-uk .xd-head-logo, .xd-host-mature .xd-head-logo { width: auto; height: var(--logo-height); }
  .xd-head-join { order: 3; margin-left: 0; font-size: 0.95rem; padding: 0.4rem 1.3rem; }
  .xd-menu { order: 2; margin-left: auto; }
  .xd-menu-toggle { display: none; }
  .xd-menu::details-content { content-visibility: visible; block-size: auto; }
  .xd-menu-panel { display: flex; align-items: center; gap: 1.3rem; position: static; border: 0; box-shadow: none; padding: 0; background: none; }
  .xd-menu-nav > ul, .xd-menu-nav nav > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.1rem; }
  .xd-menu-nav a { min-height: 2.75rem; border: 0; padding: 0; font-size: 0.9rem; color: #fff; }
  .xd-menu-nav li { position: relative; }
  .xd-menu-nav ul ul { display: none; position: absolute; top: 100%; left: -0.75rem; min-width: 14rem; background: var(--panel); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); border-top: 2px solid var(--purple); padding: 0.4rem 0.75rem; z-index: 40; }
  .xd-menu-nav ul ul a { border-bottom: 1px solid var(--rule); }
  .xd-menu-nav li:hover > ul, .xd-menu-nav li:focus-within > ul { display: block; }
  .xd-menu-controls { padding: 0; }
  .xd-menu-login { min-height: 2.6rem; padding: 0 0.95rem; }
}

/* ---- breadcrumbs ---- */
.crumb-trail { max-width: var(--wrap); margin: 0 auto; padding: 0.75rem 1rem 0; font-size: 0.8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.3rem; }
.crumb-trail-link { color: var(--muted); }
.crumb-trail-current { color: var(--muted); }

/* ---- the join button (the fold gate measures .hero-stated-btn) ---- */
.hero-stated-btn.xd-join {
  display: block; text-align: center; background: var(--sky); color: var(--sky-ink); text-decoration: none; border-radius: 8px;
  font-family: var(--font); font-weight: 700; font-size: 1.1rem; line-height: 1.2; padding: 0.9rem 1.2rem; letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(135, 206, 235, 0.22);
}
.hero-stated-btn.xd-join:hover { background: var(--sky-hover); color: var(--sky-ink); }
@media (min-width: 48rem) { .hero-stated-btn.xd-join { display: inline-block; padding: 0.95rem 3rem; } }

/* ---- home opener: the photograph as a band on a phone with the headline card over its foot; full bleed on a desktop ---- */
.xd-hero { background: var(--page); padding-bottom: 0.4rem; }
.xd-hero-stage { position: relative; max-width: 100rem; margin: 0 auto; }
.xd-hero-photo { width: 100%; height: clamp(8.75rem, 25svh, 12.5rem); object-fit: cover; object-position: var(--pos-m, 60% 35%); }
.xd-hero-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(8.75rem, 25svh, 12.5rem); background: linear-gradient(180deg, rgba(19, 16, 27, 0) 55%, rgba(19, 16, 27, 0.85)); pointer-events: none; }
.xd-hero-card { position: relative; z-index: 2; margin: -1.6rem 0.6rem 0; padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; background: rgba(27, 22, 38, 0.97); border-radius: 12px; border: 1px solid var(--rule); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.xd-eyebrow { order: 0; margin: 0 0 0.3rem; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--eyebrow, var(--lilac)); }
.xd-hero-title { order: 1; margin: 0 0 0.75rem; }
.xd-hero-card .hero-stated-btn { order: 2; }
.xd-hero-sub { order: 3; margin: 0.75rem 0 0; font-size: 0.98rem; color: var(--text); }
.xd-trust { order: 4; margin: 0.45rem 0 0; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.xd-adult { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--lilac); }
.xd-adult::before { content: "18+"; display: grid; place-items: center; min-width: 2.1rem; height: 1.35rem; padding: 0 0.3rem; border-radius: 4px; background: var(--violet); color: #fff; font-size: 0.72rem; }
/* Desktop: the words on the left over the dark ground, the photograph filling the right 58%, faded into the ground at
   its left edge, so the headline never sits on a face. */
@media (min-width: 62rem) {
  .xd-hero { padding-bottom: 0; }
  .xd-hero-stage { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); min-height: clamp(26rem, 62vh, 36rem); }
  .xd-hero-photo { grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: clamp(26rem, 62vh, 36rem); object-position: var(--pos-d, 60% 35%); }
  .xd-hero-stage::after { left: calc(42% - 2px); right: auto; width: calc(16% + 2px); top: 0; height: 100%; background: linear-gradient(90deg, var(--page), rgba(19, 16, 27, 0)); }
  .xd-hero-card { grid-column: 1; grid-row: 1; align-self: center; margin: 0 1.5rem 0 max(1.5rem, calc(50vw - 33rem)); padding: 1.5rem 0; background: none; border: 0; box-shadow: none; }
}

/* ---- inner openers: the page's own words, then the action ---- */
.xd-opener { background: var(--panel); border-bottom: 1px solid var(--rule); }
.xd-opener--ink { background: var(--head-bg); }
.xd-opener--plum { background: linear-gradient(160deg, #241a3c 0%, #16111f 70%); }
.xd-opener-inner { max-width: var(--wrap); margin: 0 auto; padding: 0.8rem 1rem 1.15rem; display: flex; flex-direction: column; }
.xd-opener .xd-eyebrow { order: 0; }
.xd-opener-title { order: 1; margin: 0 0 0.7rem; font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem); }
.xd-opener-cta { order: 2; }
.xd-opener-sub { order: 3; margin: 0.75rem 0 0; max-width: var(--prose); color: var(--text); }
.xd-opener .xd-trust { order: 4; }
@media (min-width: 62rem) {
  .xd-opener-inner { padding: 2.2rem 1.5rem 2rem; }
  .xd-opener-inner > * { max-width: 46rem; }
}

/* ---- content sections: bands that alternate ---- */
.xd-section { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1rem; }
.xd-section + .xd-section { padding-top: 0.7rem; }
.xd-section--panel, .xd-section--plum, .xd-section--ink { max-width: none; }
.xd-section--panel { background: var(--panel); }
.xd-section--plum { background: linear-gradient(170deg, #241a3c, #1a1428); }
.xd-section--ink { background: var(--head-bg); }
.xd-section--panel + .xd-section, .xd-section--plum + .xd-section, .xd-section--ink + .xd-section { padding-top: 2rem; }
.xd-section + .xd-section--panel, .xd-section + .xd-section--plum, .xd-section + .xd-section--ink { padding-top: 2rem; }
.xd-section-inner { max-width: var(--wrap); margin: 0 auto; }
.prose-column { max-width: var(--prose); }
.xd-section-inner.prose-column { max-width: var(--wrap); }
.xd-section-inner.prose-column > * { max-width: var(--prose); }
.xd-section h2::after, .link-cluster-title::after, .faq-details-title::after, .listing-rows h2::after { content: ""; display: block; width: 3.2rem; height: 4px; margin-top: 0.5rem; border-radius: 2px; background: linear-gradient(90deg, var(--purple) 50%, var(--sky) 50%); }
.xd-centre { text-align: center; }
.xd-centre h2::after { margin-left: auto; margin-right: auto; }
.xd-centre .prose-column { margin-left: auto; margin-right: auto; text-align: left; }
.xd-centre .xd-section-inner.prose-column > * { margin-left: auto; margin-right: auto; }
.xd-lede { font-size: 1.1rem; color: var(--heading); }
.xd-note { font-size: 0.92rem; color: var(--muted); border-left: 4px solid var(--purple); padding: 0.2rem 0 0.2rem 0.85rem; margin-top: 1rem; }
.xd-chips { list-style: none; margin: 0.4rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.xd-chips li { margin: 0; padding: 0.28rem 0.85rem; border: 1px solid var(--purple); border-radius: 999px; font-weight: 600; font-size: 0.88rem; color: #fff; background: var(--panel-2); }
.xd-rules dt { font-weight: 700; color: var(--sky); margin-top: 0.9rem; }
.xd-rules dd { margin: 0.15rem 0 0; }
.xd-steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 0; }
.xd-steps li { counter-increment: step; position: relative; padding: 0.1rem 0 0.95rem 3rem; margin: 0; }
.xd-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: #fff; font-family: var(--heads); font-size: 1.15rem; }
.xd-steps li:nth-child(even)::before { background: var(--sky); color: var(--sky-ink); }
.xd-table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); margin: 1rem 0; }
.xd-table-wrap table { min-width: 0; }
@media (max-width: 47.99em) {
  .xd-table-wrap:not(.xd-table-wrap--scroll) { overflow-x: visible; }
  .xd-table-wrap:not(.xd-table-wrap--scroll) table { table-layout: fixed; font-size: 0.84rem; }
  .xd-table-wrap th, .xd-table-wrap td { padding: 0.5rem 0.4rem; overflow-wrap: normal; word-break: normal; hyphens: auto; }
  .xd-table-wrap tbody th { width: 34%; }
  .xd-price { white-space: nowrap; }
}

/* Design 375 (12 Nov 2026): no mid-word breaks in tables. Pages already carry lang (en-GB / en-ZA). */
td, th { overflow-wrap: normal; word-break: normal; hyphens: auto; }

/* Sticky column headers. Parent .xd-table-wrap has overflow-x: auto, which would pin thead to the wrap.
   Regular tables fit at the compact breakpoint, so overflow is visible there and thead can stick under the header
   (61px on the main host, 73px on the taller UK and mature-SA headers). Background stays #5a43bb with white text.
   The 6-column .xd-table-wrap--scroll is a 70vh scroll box so its thead can stick inside the wrapper (top: 0),
   not to the page (the 61px / 73px offsets would hide the labels). */
.xd-table-wrap thead th { position: sticky; top: 61px; z-index: 2; background: #5a43bb; color: #fff; }
.xd-host-uk .xd-table-wrap thead th,
.xd-host-mature .xd-table-wrap thead th { top: 73px; }

.xd-table-wrap--scroll { max-height: 70vh; overflow: auto; -webkit-overflow-scrolling: touch; }
.xd-table-wrap--scroll table { min-width: 640px; table-layout: auto; }
.xd-table-wrap--scroll thead th,
.xd-host-uk .xd-table-wrap--scroll thead th,
.xd-host-mature .xd-table-wrap--scroll thead th {
  position: sticky; top: 0; z-index: 2; background: #5a43bb; color: #fff;
}
.xd-table-wrap--scroll tbody th:first-child,
.xd-table-wrap--scroll tbody td:first-child,
.xd-table-wrap--scroll td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--card);
}
.xd-table-wrap--scroll thead th:first-child,
.xd-host-uk .xd-table-wrap--scroll thead th:first-child,
.xd-host-mature .xd-table-wrap--scroll thead th:first-child {
  position: sticky; left: 0; top: 0; z-index: 3; background: #5a43bb; color: #fff;
}
.xd-price { font-weight: 700; color: var(--heading); }
.xd-two { display: grid; gap: 1.4rem; }
@media (min-width: 52rem) { .xd-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem; } }

/* ---- tiles with icons: chat, people, phone, shield, lock, pin, flame, mask (never a heart on this site) ---- */
.xd-tiles { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
.xd-tile { margin: 0; background: var(--card); padding: 1.25rem 1.1rem 1.1rem; text-align: center; border-radius: 12px; border: 1px solid var(--rule); }
.xd-tile::before { content: ""; display: block; width: 3.1rem; height: 3.1rem; margin: 0 auto 0.75rem; border-radius: 50%; background: var(--violet) center / 54% no-repeat; background-image: var(--icon); }
.xd-tile:nth-child(even)::before { background-color: var(--teal); }
.xd-tile h3 { font-size: 1.35rem; margin: 0 0 0.35rem; }
@media (max-width: 47.99em) {
  .xd-tile { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); column-gap: 0.9rem; align-items: start; text-align: left; padding: 1rem; }
  .xd-tile::before { margin: 0; grid-row: 1 / span 2; }
}
.xd-tile p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.xd-tile:nth-child(8n+1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E"); }
.xd-tile:nth-child(8n+2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E"); }
.xd-tile:nth-child(8n+3) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17 1.01 7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E"); }
.xd-tile:nth-child(8n+4) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E"); }
.xd-tile:nth-child(8n+5) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M2 8c0-1.7 3.6-3 10-3s10 1.3 10 3c0 3.5-1.6 7-4.6 7-2.2 0-3.1-2.2-5.4-2.2S8.8 15 6.6 15C3.6 15 2 11.5 2 8zm5.2 0.6c-1 0-1.8.6-1.8 1.3s.8 1.3 1.8 1.3S9 10.6 9 9.9s-.8-1.3-1.8-1.3zm9.6 0c-1 0-1.8.6-1.8 1.3s.8 1.3 1.8 1.3 1.8-.6 1.8-1.3-.8-1.3-1.8-1.3z'/%3E%3C/svg%3E"); }
.xd-tile:nth-child(8n+6) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E"); }
.xd-tile:nth-child(8n+7) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); }
.xd-tile:nth-child(8n) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }

/* ---- the site's three doors (main, UK, mature South Africa) as cards ---- */
.xd-cards { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 52rem) { .xd-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xd-card { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; border-top: 4px solid var(--purple); }
.xd-card:nth-child(2) { border-top-color: var(--sky); }
.xd-card:nth-child(3) { border-top-color: var(--lilac); }
.xd-card-body { padding: 1rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.xd-card-name { margin: 0; font-size: 1.55rem; }
.xd-card-who { margin: 0; font-weight: 700; color: var(--heading); font-size: 0.93rem; }
.xd-card-text { margin: 0; color: var(--muted); font-size: 0.95rem; }
.xd-card-go { margin: auto 0 0; padding-top: 0.6rem; }
.xd-card-go a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.35rem 1.2rem; background: var(--sky); color: var(--sky-ink); border-radius: 8px; font-weight: 700; text-decoration: none; }
.xd-card-go a:hover { background: var(--sky-hover); }

/* ---- plans: Free, VIP and VIP+ side by side ---- */
.xd-plans { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 56rem) { .xd-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xd-plan { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1.15rem 1.1rem 1.1rem; display: flex; flex-direction: column; }
.xd-plan--vip { border-top: 4px solid var(--sky); }
.xd-plan--plus { border-top: 4px solid var(--lilac); background: var(--card-2); }
.xd-plan--free { border-top: 4px solid var(--purple); }
.xd-plan h3 { font-size: 1.7rem; margin: 0 0 0.2rem; }
.xd-plan-tag { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.92rem; }
.xd-plan ul { margin: 0 0 0.4rem; }
.xd-currency { margin: 0.8rem 0 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); }
.xd-currency > summary { cursor: pointer; padding: 0.8rem 1rem; font-weight: 700; color: #fff; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 2.75rem; }
.xd-currency > summary::-webkit-details-marker { display: none; }
.xd-currency > summary::after { content: "+"; color: var(--sky); font-size: 1.3rem; line-height: 1; }
.xd-currency[open] > summary::after { content: "\2212"; }
.xd-currency > .xd-table-wrap { margin: 0 0.6rem 0.8rem; }

/* ---- link lists ---- */
.link-cluster { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1rem; }
.link-cluster--panel { background: var(--panel); max-width: none; }
.link-cluster--panel > .link-cluster-inner { max-width: var(--wrap); margin: 0 auto; }
.link-cluster-inner { max-width: var(--wrap); margin: 0 auto; }
.link-cluster-intro { color: var(--muted); max-width: var(--prose); }
.link-cluster-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem 0.9rem; grid-template-columns: 1fr; }
.link-cluster-list + p { margin-top: 1rem; }
.link-cluster-item { margin: 0; }
.link-cluster-link { display: flex; align-items: center; min-height: 2.8rem; height: 100%; padding: 0.4rem 0.9rem; background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--sky); border-radius: 8px; color: #fff; font-weight: 600; text-decoration: none; }
.link-cluster-link:hover { background: var(--card-2); color: #fff; }
@media (min-width: 40rem) {
  .link-cluster-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .link-cluster-list:has(> li:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.listing-rows { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1rem; }
.listing-rows-inner { max-width: 54rem; }
.listing-rows-intro { color: var(--muted); }
.listing-rows-list { list-style: none; margin: 1rem 0 0; padding: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.listing-rows-item { margin: 0; padding: 0.95rem 1rem; border-bottom: 1px solid var(--rule); border-left: 4px solid var(--purple); }
.listing-rows-item:nth-child(even) { border-left-color: var(--sky); }
.listing-rows-item:last-child { border-bottom: 0; }
.listing-rows-link { font-family: var(--heads); font-weight: 800; font-size: 1.3rem; text-decoration: none; color: #fff; }
.listing-rows-link::after { content: " \203A"; color: var(--sky); }
.listing-rows-summary { margin: 0.25rem 0 0; color: var(--muted); }

/* ---- calls to action ---- */
.cta-band { background: linear-gradient(160deg, #2a1f47, #120e1a); color: var(--text); padding: 2.4rem 1rem; text-align: center; border-top: 3px solid var(--purple); }
.cta-band-inner { max-width: 46rem; margin: 0 auto; }
.cta-band-title { color: #fff; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
.cta-band-lead { margin: 0 auto 1.1rem; }
.cta-band-btn { display: inline-block; min-width: 14rem; padding: 0.95rem 2rem; background: var(--sky); color: var(--sky-ink); border-radius: 8px; font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.cta-band-btn:hover { background: var(--sky-hover); color: var(--sky-ink); }

/* ---- questions ---- */
.faq-details { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1rem; }
.faq-details-inner { max-width: 48rem; }
.faq-details-item { border-bottom: 1px solid var(--rule); background: var(--card); }
.faq-details-title + .faq-details-item, .faq-details-item:first-of-type { border-top: 1px solid var(--rule); }
.faq-details-summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.95rem 0.9rem; cursor: pointer; list-style: none; font-weight: 700; color: #fff; }
.faq-details-summary::-webkit-details-marker { display: none; }
.faq-details-icon { flex: 0 0 1.2rem; height: 1.2rem; position: relative; }
.faq-details-icon::before, .faq-details-icon::after { content: ""; position: absolute; left: 0.1rem; right: 0.1rem; top: 0.5rem; height: 0.18rem; border-radius: 2px; background: var(--sky); }
.faq-details-icon::after { transform: rotate(90deg); }
.faq-details-item[open] .faq-details-icon::after { transform: none; }
.faq-details-answer { padding: 0 0.9rem 1rem; color: var(--text); }

/* ---- safety: what a member controls ---- */
.safety-protections { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1rem; }
.safety-protections-inner { max-width: var(--wrap); margin: 0 auto; }
.safety-protections-intro { color: var(--muted); max-width: var(--prose); }
.safety-protections-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.safety-protections-item { margin: 0; background: var(--card); padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--rule); border-top: 4px solid var(--purple); border-radius: 12px; }
.safety-protections-item:nth-child(even) { border-top-color: var(--sky); }
.safety-protections-name { font-size: 1.35rem; margin: 0 0 0.35rem; }
.safety-protections-what { margin: 0 0 0.6rem; }
.safety-protections-effect { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* ---- key points in an article ---- */
.key-takeaways { max-width: var(--wrap); margin: 0 auto; padding: 1.4rem 1rem 0; }
.key-takeaways-inner { max-width: var(--prose); background: var(--panel-2); border-left: 6px solid var(--sky); border-radius: 0 12px 12px 0; padding: 1.05rem 1.25rem 0.6rem; }
.key-takeaways-title { font-size: 1.4rem; }
.key-takeaways-list { margin: 0 0 0.6rem; }

/* ---- live members: the platform writes the cards into this block when it renders the page ---- */
.member-grid { display: block; max-width: var(--wrap); margin: 0 auto; padding: 0; }
.member-grid .lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.9rem; list-style: none; margin: 0; padding: 0; }
.member-grid .mem-card { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; position: relative; margin: 0; background: var(--card); padding: 0 0 0.4rem; overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; color: var(--text); }
.member-grid .mem-card img, .member-grid .mem-card__initial { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--panel); }
.member-grid .mem-card__initial { display: grid; place-items: center; font-size: 2rem; font-weight: 700; color: var(--sky); background: var(--panel-2); }
.member-grid .mem-card .badge { display: none; }
.member-grid .mem-card__name { margin: 0.4rem 0.6rem 0; font-weight: 700; font-size: 0.96rem; color: #fff; overflow-wrap: anywhere; }
.member-grid .mem-card__where, .member-grid .mem-card__line { margin: 0 0.6rem; font-size: 0.82rem; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.member-grid .mem-card__line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.member-grid .mem-card__cta { display: flex; align-items: center; min-height: 2.75rem; margin: auto 0.6rem 0; color: var(--sky); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.member-grid .mem-card--join { display: grid; place-items: center; min-height: 8.5rem; padding: 1rem; background: var(--violet); text-align: center; }
.member-grid .mem-card--join .mem-card__cta { justify-content: center; margin: 0; color: #fff; font-size: 1rem; }
.member-grid .lp-members__empty { margin: 0; padding: 1.2rem 1rem; background: var(--card); border: 2px dashed var(--purple); border-radius: 12px; color: var(--muted); text-align: center; font-weight: 700; }

/* ---- footer: the logo, the three doors, the platform's footer menu, the legal links, 18+ ---- */
.xd-foot { background: var(--foot-bg); color: var(--muted); padding: 1.8rem 1rem 6rem; font-size: 0.9rem; border-top: 3px solid var(--purple); }
.xd-foot-inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 1.15rem; }
.xd-foot a { color: #fff; }
.xd-foot-mark { display: inline-block; justify-self: start; }
.xd-foot-logo { display: block; width: auto; height: var(--logo-height-footer); max-width: 100%; object-fit: contain; object-position: left center; }
.xd-host-uk .xd-foot-logo, .xd-host-mature .xd-foot-logo { aspect-ratio: 5 / 3; width: auto; height: var(--logo-height-footer); object-fit: cover; }
.xd-foot-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.5rem; }
.xd-foot-sections a { display: flex; align-items: center; min-height: 2.75rem; padding: 0.3rem 0.1rem 0.2rem; border-top: 2px solid var(--purple); color: #fff; text-decoration: none; font-weight: 700; }
.xd-foot-sections a:hover { color: var(--sky); }
.xd-foot-menu ul, .xd-foot-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.2rem; }
.xd-foot-menu li, .xd-foot-legal li { margin: 0; }
.xd-foot-menu a, .xd-foot-legal a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.xd-foot-menu ul ul { display: contents; }
.xd-foot-legal a { color: var(--muted); font-size: 0.84rem; }
.xd-foot-copy { margin: 0; color: var(--muted); font-size: 0.84rem; text-align: center; }

@media (min-width: 62rem) { .xd-foot { padding-bottom: 2.2rem; } }

/* a protections band on the panel ground runs full width, its cards stay on the reading grid */
.safety-protections.xd-section--panel { max-width: none; }
.xd-week { font-size: 0.8rem; color: var(--muted); }
.listing-rows.xd-section--panel { max-width: none; }
.listing-rows.xd-section--panel > .listing-rows-inner { max-width: var(--wrap); margin: 0 auto; }
.listing-rows.xd-section--panel .listing-rows-list, .listing-rows.xd-section--panel h2 { max-width: 54rem; }

/* a hyphenated word in a headline stays on one line (the build wraps it) */
.xd-nw { white-space: nowrap; }

/* === soft inline join box (12 Nov 2026 tag rule; same shape as Design-passed Get A Shag) === */
.hp-join-box { max-width: 40rem; margin: 1.1rem 0 1.4rem; padding: 1rem 1.1rem 1.1rem; background: var(--color-surface-soft, var(--panel-2, var(--cream, var(--color-surface, #f6f3ee)))); color: var(--color-heading, var(--on-white, var(--color-text, inherit))); border: 2px solid var(--color-primary, var(--neon, var(--red, var(--color-focus, currentColor)))); border-radius: var(--btn-radius, 10px); box-shadow: 0 0 0 0 transparent; }
.hp-join-box p { margin: 0 0 0.75rem; font-weight: 600; color: inherit; }
.hp-join-box-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.6rem 1.6rem; background: var(--color-primary, var(--red, #1b6a92)); color: var(--color-on-primary, var(--hero-stated-btn-ink, #fff)); border-radius: var(--btn-radius, 6px); font-weight: 800; font-size: 1rem; line-height: 1.2; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; }
.hp-join-box-btn:hover { background: var(--color-primary-dark, var(--red-deep, var(--red-hover, var(--color-primary, #124a67)))); color: var(--color-on-primary, #fff); }

/* === Three-currency /pricing, 13 Nov 2026 (queue id x-direct-pricing): appended block, no rule above it changed.
   Everything below is scoped to main.xd-pricing or to the currency switch, so no other page changes. === */
/* --xdp-pin is the sticky site header's height on the main host, measured in WebKit: 60.6px below 62rem (its 3.6rem
   minimum and 3px rule), 88.6px from 62rem (the 68px logo, 1.1rem of padding and the rule). Every table on /pricing
   pins its head row at it. */
main.xd-pricing { --xdp-pin: calc(3.6rem + 3px); }
@media (min-width: 62rem) { main.xd-pricing { --xdp-pin: calc(var(--logo-height) + 1.1rem + 3px); } }
/* 16px between the hero Join and the line under it (Design, 13 Nov 2026) */
main.xd-pricing .xd-opener-sub { margin-top: 1rem; }
/* --- pattern currency-switch@1 (pattern library v332, as shipped) --- */
/* currency-switch v1 - tokens only, selectors prefixed */
.currency-switch {
  overflow-wrap: var(--long-words, break-word);
}
.currency-switch :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .currency-switch {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.currency-switch {
  /* The touch-target floor. Every option is at least this tall and wide. */
  --currency-switch-target: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
}
.currency-switch-label {
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--color-text);
  font-weight: 700;
}
.currency-switch-option {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--currency-switch-target);
  min-width: var(--currency-switch-target);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  /* The border is what marks an unpicked option as a control. */
  border: 2px solid color-mix(in srgb, var(--color-primary) 75%, var(--color-surface));
  border-radius: var(--chip-radius);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
/* The radio covers its label and is not drawn: the label is the control. */
.currency-switch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: none;
  border: 0;
  font-size: 1rem;
  cursor: pointer;
}
/* Every currency side by side: a page with no switch, and a browser that
   cannot switch. \20, because a space straight after an escape is part of it. */
.currency-switch-price > span + span::before {
  content: " \b7\20";
}
@supports not selector(:has(*)) {
  /* The choices would do nothing here, so they are not drawn. */
  .currency-switch {
    display: none;
  }
}
@supports selector(:has(*)) {
  /* The picked state commits to both halves of the guaranteed pair. */
  .currency-switch-option:has(.currency-switch-input:checked) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
  }
  .currency-switch-option:has(.currency-switch-input:focus-visible) {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }
  body:has(.currency-switch) .currency-switch-price > span + span::before {
    content: none;
  }
  /* The option's place in the group is the price's place in its wrapper,
     which is why both are written in one order. With nothing picked the page
     shows its first currency. */
  body:has(.currency-switch):not(:has(.currency-switch-input:checked)) .currency-switch-price > span:not(:nth-child(1)),
  body:has(.currency-switch-option:nth-of-type(1) > .currency-switch-input:checked) .currency-switch-price > span:not(:nth-child(1)),
  body:has(.currency-switch-option:nth-of-type(2) > .currency-switch-input:checked) .currency-switch-price > span:not(:nth-child(2)),
  body:has(.currency-switch-option:nth-of-type(3) > .currency-switch-input:checked) .currency-switch-price > span:not(:nth-child(3)),
  body:has(.currency-switch-option:nth-of-type(4) > .currency-switch-input:checked) .currency-switch-price > span:not(:nth-child(4)),
  body:has(.currency-switch-option:nth-of-type(5) > .currency-switch-input:checked) .currency-switch-price > span:not(:nth-child(5)),
  body:has(.currency-switch-option:nth-of-type(6) > .currency-switch-input:checked) .currency-switch-price > span:not(:nth-child(6)) {
    display: none;
  }
}
/* --- the switch in this site's colours: the picked option is the site's sky button (#07212c on #87ceeb, 10.4:1);
   unpicked options are light text on the card ground --- */
main.xd-pricing .currency-switch { --color-primary: var(--sky); --color-on-primary: var(--sky-ink); --color-surface: var(--card);
  --color-text: var(--text); --color-focus: var(--sky); --chip-radius: 8px; --space-2: 0.5rem; --space-4: 1rem; --space-5: 1.25rem;
  margin: 0.2rem 0 1.1rem; }
main.xd-pricing .currency-switch-label { width: 100%; font-size: 0.95rem; color: var(--heading); }
main.xd-pricing .currency-switch-option { font-size: 0.95rem; }
/* --- tables: both stay tables at every width and pin their head row under the sticky header; no box of their own
   to scroll, nothing sideways, no word split or hyphenated. No currency is ever a column. --- */
main.xd-pricing .xd-table-wrap { overflow: visible; }
main.xd-pricing .xd-table-wrap table { table-layout: fixed; width: 100%; }
main.xd-pricing .xd-table-wrap thead th { position: sticky; top: var(--xdp-pin); z-index: 2; }
main.xd-pricing .xd-table-wrap th,
main.xd-pricing .xd-table-wrap td { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }
main.xd-pricing .xd-pricing-prices thead th:first-child { width: 30%; }
main.xd-pricing .xd-pricing-prices td { font-size: 0.86rem; line-height: 1.5; }
main.xd-pricing .xd-pricing-prices .xd-price { font-size: 1.05rem; white-space: nowrap; }
main.xd-pricing .xd-pricing-prices .xd-week { white-space: nowrap; }
main.xd-pricing .xd-pricing-features thead th:first-child { width: 37%; }
main.xd-pricing .xd-pricing-features .xd-feature-group th { background: var(--panel-2); color: var(--lilac); font-size: 0.78rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 47.99em) {
  main.xd-pricing .xd-pricing-prices thead th:first-child { width: 27%; }
  main.xd-pricing .xd-pricing-prices th,
  main.xd-pricing .xd-pricing-prices td { padding: 0.5rem 0.35rem; }
  main.xd-pricing .xd-pricing-prices td { font-size: 0.8rem; }
  main.xd-pricing .xd-pricing-prices .xd-price { font-size: 0.95rem; }
  main.xd-pricing .xd-pricing-prices .xd-week { font-size: 0.76rem; }
  main.xd-pricing .xd-pricing-features thead th:first-child { width: 31%; }
  main.xd-pricing .xd-pricing-features table { font-size: 0.74rem; line-height: 1.4; }
  main.xd-pricing .xd-pricing-features th,
  main.xd-pricing .xd-pricing-features td { padding: 0.45rem 0.25rem; }
  main.xd-pricing .xd-pricing-features .xd-feature-group th { font-size: 0.7rem; letter-spacing: 0.04em; }
}
@media (max-width: 359.98px) {
  main.xd-pricing .xd-pricing-prices th,
  main.xd-pricing .xd-pricing-prices td { padding: 0.45rem 0.25rem; }
  main.xd-pricing .xd-pricing-prices .xd-price { font-size: 0.9rem; }
  main.xd-pricing .xd-pricing-prices .xd-week { font-size: 0.72rem; }
  main.xd-pricing .xd-pricing-features thead th:first-child { width: 30%; }
  main.xd-pricing .xd-pricing-features table { font-size: 0.68rem; }
  main.xd-pricing .xd-pricing-features th,
  main.xd-pricing .xd-pricing-features td { padding: 0.4rem 0.2rem; }
}
/* --- small print under the prices and the features, the mid Join, the foot of the page --- */
main.xd-pricing .xd-pricing-small { max-width: var(--prose); margin: 0.9rem 0 0; }
main.xd-pricing .xd-pricing-small p { margin: 0 0 0.45rem; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
main.xd-pricing .xd-pricing-mid { margin: 1.4rem 0 0.2rem; }
main.xd-pricing .xd-pricing-foot { max-width: var(--wrap); margin: 0 auto; padding: 1.1rem 1rem 0.4rem; }
main.xd-pricing .xd-pricing-foot p { margin: 0; font-size: 0.86rem; color: var(--muted); }
/* === Three-currency /pricing end === */
/* === Phone header fix (Design 375 FAIL, 13 Nov 2026): appended, no rule above changed. While the menu is closed,
   Chromium lays the <details> content out in a box as wide as the 44px toggle, so the unpainted panel's Login measured
   335 to 417px at 375 wide. The closed panel is anchored to the toggle's right edge and opens leftwards instead; it is
   still not painted, and the open menu keeps its full-width panel. === */
@media (max-width: 61.99rem) { .xd-menu:not([open]) .xd-menu-panel { left: auto; right: 0; width: 15rem; } }