/* 2cool2date.com site stylesheet (12 Nov 2026).
   The look is the brand's own: the registered logo's crimson lettering and silver 2s, made for a dark ground, on the black
   the old 2cool2date site (2010 to 2018) was drawn on, with crimson buttons and bands. Headings are set in Cinzel, a
   Roman-capital serif close to the logo's own lettering; body text in Roboto. The live home page's own photograph (a woman
   in black studded leather in a dim corridor) sits in a black home hero, so photo and page run into each other. Inner
   pages open on words, on crimson. Started from the mycosplaysecret.com build's tested stylesheet of the same day.
   Generated by working/tools/build_site.py from this template: edit the template, never site/global.css.
   Plain CSS, no script; the only inline styles in pages are custom properties for photo crops.
   No sticky or fixed Join bar anywhere (Hub 12 Nov 2026, CTA rule); the site header is the only sticky element,
   with each long table's head row sticking under it. */

:root {
  --page: #0d0d0d;
  --panel: #191919;
  --panel-2: #242424;
  --card: #1c1c1c;
  --card-2: #2a2a2a;
  --ink: #050505;
  --red: #a8121a;
  --red-deep: #840c12;
  --red-hover: #c0161f;
  --splash: #f05056;
  --silver: #c8c8c8;
  --cream: #ececec;
  --white: #ffffff;
  --text: #f2f2f2;
  --heading: #ffffff;
  --muted: #c9c9c9;
  --rule: #343434;
  --link: #ff9c9c;
  --link-hover: #ffffff;
  --on-white: #141414;
  --on-white-muted: #4a4a4a;
  --wrap: 68rem;
  --prose: 44rem;
  --logo-height: 56px;
  --logo-height-footer: 44px;
  --head-h: 61.59px;
  --head-h-wide: 77.59px;
  --heads: "Cinzel", Georgia, "Times New Roman", serif;
  --font: "Roboto", "Helvetica Neue", Arial, sans-serif;
}
/* The platform drops every attribute of <body>, so the site class sits on a wrapper div (afrikaanssingles.co.za go-live,
   14 Oct 2026). */
.tc-site { background: var(--page); color: var(--text); }

*, *::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: 1.0625rem; 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(--splash); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--heads); font-weight: 700; color: var(--heading); line-height: 1.12; margin: 0 0 0.5em; overflow-wrap: break-word; letter-spacing: 0.01em; }
h1 { font-size: clamp(2.05rem, 1.55rem + 2.3vw, 3.4rem); line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25rem; }
li { margin: 0 0 0.45em; }
li::marker { color: var(--splash); }
strong { color: var(--heading); font-weight: 700; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; 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(--red); 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.84rem; 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: black so the crimson letters of the logo read, Join always visible, the platform's menu ---- */
.tc-head { background: var(--ink); position: sticky; top: 0; z-index: 30; border-bottom: 4px solid var(--red); }
.tc-head-inner { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; min-height: 3.6rem; }
.tc-head-mark { flex: 0 1 auto; display: block; min-width: 0; }
/* The registered logo is a 560x200 canvas whose ink runs only in rows 68 to 135 and columns 6 to 554 (measured with
   Pillow, working/logo-fit.json): two thirds of it is transparent margin. So the logo is drawn in a 560/84 box with
   object-fit: cover, which trims only the empty top and bottom margins (the lettering is never cut) and centres the
   ink (object-position 50% 50.75%). On a phone it is sized by width so Join and the menu still fit beside it; from
   desktop widths it is drawn at --logo-height. The file and {{logo.src}} are unchanged. */
.tc-head-logo { display: block; aspect-ratio: 560 / 84; width: min(50vw, 13rem); height: auto; object-fit: cover; object-position: 50% 50.75%; }
.tc-head-join {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.3rem 1.1rem;
  background: var(--red); color: #fff; border-radius: 999px; font-family: var(--font); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
}
.tc-head-join:hover { background: var(--red-deep); color: #fff; }
.tc-menu { flex: 0 0 auto; }
.tc-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; }
.tc-menu-toggle::-webkit-details-marker { display: none; }
.tc-menu-bars, .tc-menu-bars::before, .tc-menu-bars::after { display: block; width: 1.55rem; height: 0.2rem; background: #fff; border-radius: 2px; }
.tc-menu-bars { position: relative; }
.tc-menu-bars::before, .tc-menu-bars::after { content: ""; position: absolute; left: 0; }
.tc-menu-bars::before { top: -0.48rem; }
.tc-menu-bars::after { top: 0.48rem; }
.tc-menu[open] .tc-menu-bars { background: transparent; }
.tc-menu[open] .tc-menu-bars::before { top: 0; transform: rotate(45deg); }
.tc-menu[open] .tc-menu-bars::after { top: 0; transform: rotate(-45deg); }
.tc-menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-top: 3px solid var(--red); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5); padding: 0.4rem 1rem 1rem; }
.tc-menu-nav ul { list-style: none; margin: 0; padding: 0; }
.tc-menu-nav li { margin: 0; }
.tc-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: 500; text-decoration: none; }
.tc-menu-nav a:hover { color: var(--link); }
.tc-menu-nav li:has(> ul) > a:not([href]) { cursor: default; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tc-menu-nav ul ul { padding-left: 0.9rem; }
.tc-menu-controls { display: flex; gap: 0.75rem; padding-top: 0.75rem; }
.tc-menu-login { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border: 2px solid var(--silver); border-radius: 999px; color: #fff; font-weight: 700; font-size: 0.92rem; text-decoration: none; }
@media (min-width: 62rem) {
  .tc-head-inner { padding: 0.45rem 1.5rem; gap: 1.2rem; min-height: 4.6rem; }
  .tc-head-logo { width: auto; height: var(--logo-height); }
  .tc-head-join { order: 3; margin-left: 0; font-size: 0.98rem; padding: 0.4rem 1.4rem; }
  .tc-menu { order: 2; margin-left: auto; }
  .tc-menu-toggle { display: none; }
  .tc-menu::details-content { content-visibility: visible; block-size: auto; }
  .tc-menu-panel { display: flex; align-items: center; gap: 1.3rem; position: static; border: 0; box-shadow: none; padding: 0; background: none; }
  .tc-menu-nav > ul, .tc-menu-nav nav > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.15rem; }
  .tc-menu-nav a { min-height: 2.75rem; border: 0; padding: 0; font-size: 0.95rem; color: #fff; font-weight: 500; }
  .tc-menu-nav a:hover { color: var(--link); }
  .tc-menu-nav li { position: relative; }
  .tc-menu-nav ul ul { display: none; position: absolute; top: 100%; left: -0.75rem; min-width: 14rem; background: var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); border-top: 3px solid var(--red); padding: 0.4rem 0.75rem; z-index: 40; }
  .tc-menu-nav ul ul a { border-bottom: 1px solid var(--rule); }
  .tc-menu-nav li:hover > ul, .tc-menu-nav li:focus-within > ul { display: block; }
  .tc-menu-controls { padding: 0; }
  .tc-menu-login { min-height: 2.6rem; padding: 0 1rem; border-color: var(--silver); color: #fff; }
  .tc-menu-login:hover { background: var(--red); color: #fff; }
}

/* ---- breadcrumbs (on the red opener ground that follows) ---- */
.crumb-trail { background: var(--red); padding: 0.7rem 1rem 0; font-size: 0.82rem; color: #ffe0e0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.crumb-trail > * { max-width: var(--wrap); }
.crumb-trail-link { color: #fff; }
.crumb-trail-current { color: #ffe0e0; }
.crumb-trail:has(+ main > .tc-opener--ink:first-child) { background: var(--ink); }
.crumb-trail:has(+ main > .tc-opener--smoke:first-child) { background: #1f1f1f; }
@media (min-width: 62rem) { .crumb-trail { padding-left: max(1.5rem, calc(50vw - 32.5rem)); padding-right: max(1.5rem, calc(50vw - 32.5rem)); } }

/* ---- the join button (the fold gate measures .hero-stated-btn) ---- */
.hero-stated-btn.tc-join {
  display: block; text-align: center; background: var(--white); color: var(--red); text-decoration: none; border-radius: 999px;
  font-family: var(--font); font-weight: 700; font-size: 1.12rem; line-height: 1.2; padding: 0.9rem 1.2rem; letter-spacing: 0.02em;
  text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); border: 3px solid var(--white);
}
.hero-stated-btn.tc-join:hover { background: var(--silver); border-color: var(--silver); color: var(--ink); }
.tc-hero .hero-stated-btn.tc-join { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 6px 18px rgba(186, 0, 2, 0.28); }
.tc-hero .hero-stated-btn.tc-join:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
@media (min-width: 48rem) { .hero-stated-btn.tc-join { display: inline-block; padding: 0.95rem 3rem; } }

/* ---- home opener: black, the old site's photograph as a band on a phone, the right half on a desktop ---- */
/* #000 is the photograph's own ground (sampled at its edges and its whole left half), so photo and hero meet without a seam. */
.tc-hero { background: #000; color: #fff; border-bottom: 6px solid var(--red); }
.tc-hero-stage { position: relative; max-width: 80rem; margin: 0 auto; }
.tc-hero-picture { display: block; }
.tc-hero-photo { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: var(--pos-m, 50% 40%); }
/* On a short phone screen (an iPhone SE in Safari is about 375x553 once the bars are drawn) the photo band gives up a
   little height so the headline and Join still fit on the first screen with the cookie banner showing. */
@media (max-width: 47.99em) and (max-height: 600px) { .tc-hero-photo { aspect-ratio: 5 / 2; } }
.tc-hero-card { position: relative; z-index: 2; padding: 0.55rem 1rem 1.1rem; display: flex; flex-direction: column; }
.tc-eyebrow { order: 0; margin: 0 0 0.3rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--eyebrow, #ffd6d6); }
.tc-hero .tc-eyebrow { color: #ff8f8f; }
.tc-hero-title { order: 1; margin: 0 0 0.8rem; color: #fff; }
/* Phones and tablets: Cinzel's wide capitals put a 58-character headline on five lines at the shared H1 size, which
   pushed Join below the fold at 375x560 (foldcheck, 12 Nov). The hero headline alone is set a little smaller there. */
@media (max-width: 61.99rem) { .tc-hero-title { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.6rem); } }
/* The home headline is balanced at every width: its head term ("Alternative Dating:") and its last two words are tied
   with no-break spaces in the page, so balancing can only even out the middle ("Meet Goths, / Emos, Punks") and never
   leaves one word alone on a line. */
.tc-hero-title { text-wrap: balance; }
.tc-hero-card .hero-stated-btn { order: 2; }
.tc-hero-sub { order: 3; margin: 0.8rem 0 0; font-size: 1rem; color: #fff; }
.tc-trust { order: 4; margin: 0.5rem 0 0; font-size: 0.82rem; font-weight: 500; color: var(--muted); }
.tc-adult { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 0.4rem; font-size: 0.82rem; font-weight: 700; color: #ffd6d6; }
.tc-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(--red); color: #fff; font-size: 0.72rem; }
/* Desktop: the words on the left on black, the photograph (black ground) filling the right half; the two blacks meet, so
   there is no seam and the headline never sits on her face. */
@media (min-width: 62rem) {
  .tc-hero-stage { display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); align-items: stretch; min-height: clamp(26rem, 60vh, 34rem); max-width: none; }
  .tc-hero-title { font-size: clamp(2.6rem, 1.4rem + 2.2vw, 3.2rem); }
  .tc-hero-picture { grid-column: 2; grid-row: 1; }
  .tc-hero-photo { aspect-ratio: auto; width: 100%; height: 100%; min-height: clamp(26rem, 60vh, 34rem); object-position: var(--pos-d, 60% 30%); }
  .tc-hero-card { grid-column: 1; grid-row: 1; align-self: center; padding: 2rem 1.5rem 2rem max(1.5rem, calc(50vw - 33rem)); }
  .tc-hero-sub { font-size: 1.08rem; max-width: 30rem; }
}

/* ---- inner openers: the page's own words on the old red, then the action ---- */
.tc-opener { background: var(--red); color: #fff; }
.tc-opener--ink { background: var(--ink); }
.tc-opener--smoke { background: linear-gradient(165deg, #2a2a2a 0%, #0d0d0d 75%); }
.tc-opener-inner { max-width: var(--wrap); margin: 0 auto; padding: 0.6rem 1rem 1.2rem; display: flex; flex-direction: column; }
.tc-opener .tc-eyebrow { order: 0; color: #ffe0e0; }
.tc-opener-title { order: 1; margin: 0 0 0.75rem; font-size: clamp(2.1rem, 1.55rem + 2.2vw, 3.3rem); color: #fff; }
.tc-opener-cta { order: 2; }
.tc-opener-sub { order: 3; margin: 0.8rem 0 0; max-width: var(--prose); color: #fff; }
.tc-opener .tc-trust { order: 4; color: #ffe0e0; }
.tc-opener--ink .tc-eyebrow, .tc-opener--smoke .tc-eyebrow { color: var(--silver); }
@media (min-width: 62rem) {
  .tc-opener-inner { padding: 1.6rem 1.5rem 2.1rem; }
  .tc-opener-inner > * { max-width: 46rem; }
}

/* ---- content sections: bands that alternate ---- */
.tc-section { max-width: var(--wrap); margin: 0 auto; padding: 2.1rem 1rem; }
.tc-section + .tc-section { padding-top: 0.6rem; }
.tc-section--panel, .tc-section--red, .tc-section--ink, .tc-section--cream { max-width: none; }
.tc-section--panel { background: var(--panel); }
.tc-section--red { background: var(--red); }
.tc-section--ink { background: var(--ink); }
.tc-section--cream { background: var(--cream); color: var(--on-white); }
.tc-section--cream h2, .tc-section--cream h3, .tc-section--cream strong { color: var(--red); }
.tc-section--cream a { color: var(--red-deep); }
.tc-section--cream .tc-lede { color: var(--on-white); }
.tc-section--panel + .tc-section, .tc-section--red + .tc-section, .tc-section--ink + .tc-section, .tc-section--cream + .tc-section { padding-top: 2.1rem; }
.tc-section + .tc-section--panel, .tc-section + .tc-section--red, .tc-section + .tc-section--ink, .tc-section + .tc-section--cream { padding-top: 2.1rem; }
.tc-section-inner { max-width: var(--wrap); margin: 0 auto; }
.prose-column { max-width: var(--prose); }
.tc-section-inner.prose-column { max-width: var(--wrap); }
.tc-section-inner.prose-column > * { max-width: var(--prose); }
.tc-section h2::after, .link-cluster-title::after, .faq-details-title::after, .listing-rows h2::after { content: ""; display: block; width: 3.4rem; height: 4px; margin-top: 0.5rem; border-radius: 2px; background: linear-gradient(90deg, var(--splash) 50%, var(--silver) 50%); }
.tc-section--red h2::after { background: linear-gradient(90deg, #fff 50%, var(--silver) 50%); }
.tc-centre { text-align: center; }
.tc-centre h2::after { margin-left: auto; margin-right: auto; }
.tc-centre .tc-section-inner.prose-column > * { margin-left: auto; margin-right: auto; }
.tc-lede { font-size: 1.14rem; color: var(--heading); }
.tc-note { font-size: 0.93rem; color: var(--muted); border-left: 4px solid var(--splash); padding: 0.2rem 0 0.2rem 0.85rem; margin-top: 1rem; }
.tc-section--cream .tc-note { color: var(--on-white-muted); }
.tc-chips { list-style: none; margin: 0.4rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tc-chips li { margin: 0; padding: 0.3rem 0.9rem; border: 1px solid var(--silver); border-radius: 999px; font-weight: 500; font-size: 0.9rem; color: #fff; background: var(--panel-2); }
.tc-rules dt { font-weight: 700; color: var(--link); margin-top: 0.9rem; }
/* On the light grey bands, --link (#ff9c9c) on --cream (#ececec) is too faint; the brand crimson #a8121a is 6.9:1. Leave --link on dark sections. */
.tc-section--cream .tc-rules dt { color: var(--red); }
.tc-rules dd { margin: 0.15rem 0 0; }
.tc-steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 0; }
.tc-steps li { counter-increment: step; position: relative; padding: 0.1rem 0 0.95rem 3rem; margin: 0; }
.tc-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(--red); color: #fff; font-family: var(--heads); font-size: 1.2rem; font-weight: 700; border: 2px solid var(--silver); }
.tc-table-wrap { overflow-x: visible; max-width: 100%; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); margin: 1rem 0; }
/* The site header is sticky, so a long table's head row sticks just under it. --head-h is the header's real rendered
   height at 375 wide (measured in WebKit on the built pages, working/verify/header-height.txt), --head-h-wide the same
   from 62rem. White on the brand crimson is 7.6:1. */
.tc-table-wrap thead th {
  position: sticky;
  top: var(--head-h);
  z-index: 2;
  background: var(--red);
  color: #fff;
}
@media (min-width: 62rem) {
  .tc-table-wrap thead th { top: var(--head-h-wide); }
}
.tc-table-wrap table { min-width: 0; }
@media (max-width: 47.99em) {
  .tc-table-wrap table { table-layout: fixed; font-size: 0.86rem; }
  .tc-table-wrap th, .tc-table-wrap td { padding: 0.5rem 0.4rem; overflow-wrap: anywhere; }
  .tc-table-wrap tbody th { width: 34%; }
  .tc-price { white-space: nowrap; }
}
.tc-price { font-weight: 700; color: var(--heading); }
.tc-two { display: grid; gap: 1.4rem; }
@media (min-width: 52rem) { .tc-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem; } }

/* ---- tiles with icons: chat, flame, phone, shield, mask, lock, pin, people (never a heart on this site) ---- */
.tc-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)); }
.tc-tile { margin: 0; background: var(--card); padding: 1.25rem 1.1rem 1.1rem; text-align: center; border-radius: 12px; border: 1px solid var(--rule); }
.tc-tile::before { content: ""; display: block; width: 3.1rem; height: 3.1rem; margin: 0 auto 0.75rem; border-radius: 50%; background: var(--red) center / 54% no-repeat; background-image: var(--icon); border: 2px solid var(--silver); }
.tc-tile h3 { font-size: 1.4rem; margin: 0 0 0.35rem; }
@media (max-width: 47.99em) {
  .tc-tile { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); column-gap: 0.9rem; align-items: start; text-align: left; padding: 1rem; }
  .tc-tile::before { margin: 0; grid-row: 1 / span 2; }
}
.tc-tile p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.tc-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"); }
.tc-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"); }
.tc-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"); }
.tc-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"); }
.tc-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"); }
.tc-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"); }
.tc-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"); }
.tc-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 old site's four reasons to join, as a row of silver-ringed marks ---- */
.tc-reasons { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 52rem) { .tc-reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tc-reason { margin: 0; text-align: center; padding: 1rem 0.6rem; border-radius: 12px; background: rgba(0, 0, 0, 0.18); }
.tc-reason::before { content: ""; display: block; width: 3.4rem; height: 3.4rem; margin: 0 auto 0.6rem; border-radius: 50%; border: 3px solid var(--silver); background: var(--ink) center / 52% no-repeat; background-image: var(--icon); }
.tc-reason h3 { margin: 0; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.03em; }
.tc-reason:nth-child(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='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); }
.tc-reason:nth-child(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='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"); }
.tc-reason:nth-child(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='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E"); }
.tc-reason:nth-child(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='M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z'/%3E%3C/svg%3E"); }

/* ---- plans: Free, VIP and VIP+ side by side ---- */
.tc-plans { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 56rem) { .tc-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tc-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; }
.tc-plan--free { border-top: 4px solid var(--silver); }
.tc-plan--vip { border-top: 4px solid var(--splash); }
.tc-plan--plus { border-top: 4px solid #fff; background: var(--card-2); }
.tc-plan h3 { font-size: 1.8rem; margin: 0 0 0.2rem; }
.tc-plan-tag { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.94rem; }
.tc-plan ul { margin: 0 0 0.4rem; }

/* ---- 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(--splash); border-radius: 8px; color: #fff; font-weight: 500; 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(--splash); }
.listing-rows-item:nth-child(even) { border-left-color: var(--silver); }
.listing-rows-item:last-child { border-bottom: 0; }
.listing-rows-link { font-family: var(--heads); font-weight: 700; font-size: 1.35rem; text-decoration: none; color: #fff; }
.listing-rows-link::after { content: " \203A"; color: var(--splash); }
.listing-rows-summary { margin: 0.25rem 0 0; color: var(--muted); }
.listing-rows.tc-section--panel { max-width: none; }
.listing-rows.tc-section--panel > .listing-rows-inner { max-width: var(--wrap); margin: 0 auto; }
.listing-rows.tc-section--panel .listing-rows-list, .listing-rows.tc-section--panel h2 { max-width: 54rem; }

/* ---- calls to action ---- */

/* Soft inline join box, after the first intro paragraph. Not sticky, not a popup, never above the H1 or hero. */
.tc-join-box { margin: 1.15rem 0 0; padding: 1.05rem 1.15rem 1.15rem; background: var(--cream); color: var(--on-white); border-radius: 12px; border: 1px solid var(--silver); }
.tc-join-box p { margin: 0 0 0.75rem; color: var(--on-white); }
.tc-join-box-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.7rem 1.5rem;
  background: var(--red); color: #fff; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; border: 0;
}
.tc-join-box-btn:hover { background: var(--red-hover); color: #fff; }
.tc-section--cream .tc-join-box { background: #fff; border-color: var(--red); }

.cta-band { background: var(--red); color: #fff; padding: 2.5rem 1rem; text-align: center; border-top: 4px solid var(--silver); }
.cta-band-inner { max-width: 46rem; margin: 0 auto; }
.cta-band-title { color: #fff; font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.7rem); }
.cta-band-lead { margin: 0 auto 1.15rem; }
.cta-band-btn { display: inline-block; min-width: 14rem; padding: 0.95rem 2rem; background: var(--white); color: var(--red); border-radius: 999px; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; border: 3px solid var(--white); }
.cta-band-btn:hover { background: var(--silver); border-color: var(--silver); color: var(--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(--splash); }
.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.tc-section--panel { max-width: none; }
.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(--splash); border-radius: 12px; }
.safety-protections-item:nth-child(even) { border-top-color: var(--silver); }
.safety-protections-name { font-size: 1.4rem; margin: 0 0 0.35rem; }
.safety-protections-what { margin: 0 0 0.6rem; }
.safety-protections-effect { margin: 0; font-size: 0.93rem; 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(--splash); border-radius: 0 12px 12px 0; padding: 1.05rem 1.25rem 0.6rem; }
.key-takeaways-title { font-size: 1.45rem; }
.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(--splash); 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.97rem; color: #fff; overflow-wrap: anywhere; }
.member-grid .mem-card__where, .member-grid .mem-card__line { margin: 0 0.6rem; font-size: 0.84rem; 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(--link); font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.member-grid .mem-card--join { display: grid; place-items: center; min-height: 8.5rem; padding: 1rem; background: var(--red); 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(--silver); border-radius: 12px; color: var(--muted); text-align: center; font-weight: 700; }

/* ---- footer: the logo on black, the platform's footer menu, the legal links, 18+ ---- */
.tc-foot { background: var(--ink); color: var(--muted); padding: 1.9rem 1rem 2.2rem; font-size: 0.92rem; border-top: 4px solid var(--red); }
.tc-foot-inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 1.15rem; }
.tc-foot a { color: #fff; }
.tc-foot-mark { display: inline-block; justify-self: start; }
.tc-foot-logo { display: block; aspect-ratio: 560 / 84; width: auto; height: var(--logo-height-footer); max-width: 100%; object-fit: cover; object-position: 50% 50.75%; }
.tc-foot-menu ul, .tc-foot-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.2rem; }
.tc-foot-menu li, .tc-foot-legal li { margin: 0; }
.tc-foot-menu a, .tc-foot-legal a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.tc-foot-menu ul ul { display: contents; }
.tc-foot-legal a { color: var(--muted); font-size: 0.86rem; }
.tc-foot-network { margin: 0; font-size: 0.84rem; color: var(--muted); max-width: 52rem; }
.tc-foot-copy { margin: 0; color: var(--muted); font-size: 0.86rem; text-align: center; }


/* a hyphenated word in a headline stays on one line (the build wraps it) */
.tc-nw { white-space: nowrap; }
.tc-week { font-size: 0.82rem; color: var(--muted); }

/* ---- visual QA fixes (12 Nov 2026, working/verify/visual-qa.md; each tested in WebKit on all 22 pages at three
   widths before adoption: contrast failures 21 to 0, lone last words in headings 211 to 4, split words 3 to 0) ---- */
/* M1 links on the red bands: #ff9c9c on #a8121a is about 3:1; white is 7.6:1 */
.tc-section--red a:not([class]), .tc-opener a:not([class]), .cta-band-lead a { color: #fff; text-decoration-thickness: 2px; }
.tc-section--red a:not([class]):hover, .tc-opener a:not([class]):hover, .cta-band-lead a:hover { color: #ffe0e0; }

/* M2 the inline join box, and the tile grids, sit flush (0px) on the paragraph under them */
.tc-join-box { margin-bottom: 1.25rem; }
.tc-tiles { margin-bottom: 1.2rem; }

/* M3 a four-column table cut words in half on a phone in the Dominatrix Dating build. CSS-only fix kept: let any
   four-column table size its columns by content on phones (no split words, no sideways scroll there at 390 and 375). */
@media (max-width: 47.99em) {
  .tc-table-wrap:has(thead th:nth-child(4)) table { table-layout: auto; }
  .tc-table-wrap:has(thead th:nth-child(4)) :is(th, td) { overflow-wrap: break-word; padding-left: 0.35rem; padding-right: 0.35rem; }
  .tc-table-wrap:has(thead th:nth-child(4)) tbody th { width: auto; }
}

/* M4 is fragment-only (two non-breaking spaces in two H1s): nothing here. */

/* S1 headings: no lone last word. Balance on H2/H3 at every width. On the H1 only for inner openers and only from 48em
   (on a phone, balance can split a head term such as "Cosplay Dating:" across two lines). */
h2, h3, .cta-band-title { text-wrap: balance; }
@media (min-width: 48rem) { .tc-opener-title { text-wrap: balance; } }
.faq-details-question, .link-cluster-link, .listing-rows-link { text-wrap: pretty; }

/* S2 desktop: one left edge (the header's, 163px at 1366) for hero, openers, bands, lists, FAQ and footer;
   six tiles as 3 + 3 rather than 4 + 2; the home hero button a pill like every inner page */
@media (min-width: 62rem) {
  .tc-hero-card { padding-left: max(1.5rem, min(7.5rem, calc(50vw - 32.5rem))); }
  .tc-section, .link-cluster, .faq-details, .listing-rows, .safety-protections, .key-takeaways, .tc-foot { padding-left: 1.5rem; padding-right: 1.5rem; }
  .tc-section--panel > .tc-section-inner, .tc-section--red > .tc-section-inner, .tc-section--ink > .tc-section-inner,
  .tc-section--cream > .tc-section-inner, .link-cluster--panel > .link-cluster-inner,
  .listing-rows.tc-section--panel > .listing-rows-inner, .safety-protections.tc-section--panel > .safety-protections-inner,
  .tc-foot-inner { max-width: calc(var(--wrap) - 3rem); }
  .tc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tc-tiles:has(> li:nth-child(4):last-child), .tc-tiles:has(> li:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 48rem) { .tc-hero-card .hero-stated-btn { align-self: flex-start; } }
/* a link grid's last card, when it would sit alone on its row (home: 3 + 3 + 1), spans the row */
@media (min-width: 40rem) {
  .link-cluster-list:has(> li:nth-child(6)) > li:last-child:nth-child(3n+1),
  .link-cluster-list:not(:has(> li:nth-child(6))) > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* S3 desktop tables: the row-header column is squeezed to 89 to 118px, so "Where / you use / it" runs to three lines */
@media (min-width: 48rem) { .tc-table-wrap tbody th { width: 11rem; } }

/* S4 table header: square red corners inside the rounded wrapper, and hairline gaps between the sticky header cells */
.tc-table-wrap thead th:first-child { border-top-left-radius: 9px; }
.tc-table-wrap thead th:last-child { border-top-right-radius: 9px; }
.tc-table-wrap thead th { box-shadow: 1px 0 0 var(--red); }

/* S5 smoke opener: start the gradient on the breadcrumb strip's own colour, so there is no step under "Home > ..." */
.tc-opener--smoke { background: linear-gradient(180deg, #1f1f1f 0%, #0d0d0d 100%); }

/* S6 the home member block: if the platform leaves the empty state, take the whole section (and its "Some of Our
   Users" heading) away rather than show a dashed placeholder under a line promising members */
.tc-section:has(.member-grid .lp-members__empty) { display: none; }

/* S7 small things: the copyright line is the only centred line in a left-aligned footer; the phone hero on a short
   screen keeps her face in the band */
.tc-foot-copy { text-align: left; }
@media (max-width: 47.99em) and (max-height: 600px) { .tc-hero-photo { object-position: 50% 22%; } }

/* S8 tablet (30em to 62em): the logo can be drawn by height once there is room beside Join and the menu */
@media (min-width: 30rem) and (max-width: 61.99rem) { .tc-head-logo { width: auto; height: 2.5rem; } }

/* ---- the old home page's own photograph: drawn round with a silver ring, floated beside the words so they wrap it on a
   phone ---- */
.tc-spot-img { float: right; width: 7.25rem; height: 7.25rem; margin: 0.15rem 0 0.7rem 1rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--silver); shape-outside: circle(50%); }
@media (min-width: 48rem) { .tc-spot-img { width: 11rem; height: 11rem; margin-left: 1.75rem; } }
.tc-section-inner::after { content: ""; display: block; clear: both; }
.tc-join-box { clear: both; }
.tc-section--red .tc-spot-img { border-color: #fff; }

/* Phones and tablets: a closed menu's panel is taken out of layout entirely. Without this, WebKit lays the closed
   panel out as a 44px box at the toggle, so its Log in link measured 335 to 401 at 375 wide (invisible, but the
   overlap audit counted it, working/verify/overlap.txt). Desktop keeps the inline nav through ::details-content. */
@media (max-width: 61.99rem) { .tc-menu:not([open]) > .tc-menu-panel { display: none; } }

/* The stacked option table (the question article): each option's title spans the row on a lifted band with the accent
   rule above it, and on phones the label column takes a third of the width, as in the other tables (with fixed table
   layout the head row sets the widths, so the 34% goes on its first cell). White on #242424 is 15:1. */
.tc-table-wrap th[scope="rowgroup"] { background: var(--panel-2); color: #fff; font-family: var(--heads); font-size: 1.2rem; letter-spacing: 0.01em; border-top: 2px solid var(--splash); }
@media (max-width: 47.99em) { .tc-table-wrap thead th:first-child { width: 34%; } }

/* ---- 13 Nov 2026 (Design 375 rules, the three-currency /pricing and the five new guides) ---- */
/* Every hero Join under the H1 keeps 16px clear below it, so it never touches the line after it (Design, 13 Nov 2026).
   The space belongs to the Join itself, whatever follows it (the sub-line today, a byline tomorrow). */
.tc-opener-cta { margin-bottom: 1rem; }
.tc-opener-cta + * { margin-top: 0; }
.tc-hero-card .hero-stated-btn { margin-bottom: 1rem; }
.tc-hero-card .hero-stated-btn + * { margin-top: 0; }
/* /pricing in GBP, USD and AUD: one table per currency, never a currency per column (Design 375). From 48em each stays a
   table whose head row is pinned under the site header (the rules above); below 48em each plan length becomes a card,
   the VIP and VIP+ cells labelled from data-label, so nothing scrolls sideways on a phone. */
@media (max-width: 47.99em) {
  .tc-table-wrap.tc-cards { border: 0; background: none; border-radius: 0; }
  .tc-table-wrap.tc-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tc-table-wrap.tc-cards table, .tc-table-wrap.tc-cards tbody, .tc-table-wrap.tc-cards tr { display: block; width: 100%; }
  .tc-table-wrap.tc-cards table { table-layout: auto; background: none; font-size: 0.97rem; }
  .tc-table-wrap.tc-cards caption { display: block; border-radius: 8px; margin: 0 0 0.6rem; }
  .tc-table-wrap.tc-cards tr { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--splash); border-radius: 12px; margin: 0 0 0.75rem; padding: 0.45rem 0.1rem; }
  .tc-table-wrap.tc-cards :is(th, td) { display: block; width: auto; border: 0; padding: 0.3rem 0.85rem; overflow-wrap: normal; }
  .tc-table-wrap.tc-cards tbody th { font-family: var(--heads); font-size: 1.25rem; color: var(--heading); width: auto; }
  .tc-table-wrap.tc-cards td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
  .tc-table-wrap.tc-cards .tc-price { white-space: normal; }
}
.tc-ccy { margin: 1.7rem 0 0.2rem; font-size: 1.35rem; }
.tc-price-notes { margin-top: 1.3rem; font-size: 0.95rem; color: var(--muted); }
.tc-price-notes p { margin: 0 0 0.55rem; }
.tc-plan-lead { margin: 0 0 0.3rem; font-weight: 700; color: var(--heading); }
.tc-plan-limits { margin: 0.3rem 0 0; font-size: 0.95rem; color: var(--muted); }
/* the second soft join box part-way down a long guide (utm_content=mid): the same box, a little more air above it */
.tc-join-box--mid { margin-top: 1.6rem; }