/* getashag.com site stylesheet (12 Nov 2026).
   Kept from the live Get A Shag page, not a lifestyle template: the old site's black ground, its neon frames (a pale pink
   #ffc4c4 line with a red #ff0800 glow round every photo and button), Raleway in heavy uppercase for section headings and
   regular weight for reading, and the neon sign line above each headline in a rounded face (Dosis, the nearest Google
   face to the old "CHOOSE YOUR SHAG" neon lettering). The logo is the old neon wordmark, so the header, the home hero and the footer are
   black and the logo glows on them as it always has. The old site's own photograph (the brunette in red from the
   "Choose your shag" row) sits in a neon frame on the home page; inner pages open on words.
   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. */

:root {
  --page: #0a0506;
  --panel: #150a0c;
  --panel-2: #1f0d11;
  --card: #170a0d;
  --card-2: #241015;
  --ink: #000000;
  --red: #d41a1a;
  --red-deep: #a81212;
  --red-band: #4d080d;
  --splash: #ff2d2d;
  --neon: #ffc4c4;
  --glow: rgba(255, 8, 0, 0.8);
  --glow-soft: rgba(255, 8, 0, 0.45);
  --white: #ffffff;
  --text: #f4ecec;
  --heading: #ffffff;
  --muted: #dcc7c7;
  --rule: #3d1a1f;
  --link: #ffc4c4;
  --link-hover: #ffffff;
  --wrap: 68rem;
  --prose: 44rem;
  --logo-height: 44px;
  --logo-height-phone: 34px;
  --logo-height-footer: 50px;
  /* the sticky header's real height, measured in WebKit (working/verify/header-height.txt): phones and desktops */
  --head-h: 58px;
  --head-h-wide: 72px;
  --heads: "Raleway", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --neon-face: "Dosis", "Raleway", "Arial Rounded MT Bold", Arial, sans-serif;
  --font: "Raleway", "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). */
.gs-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(--neon); 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.5em; overflow-wrap: break-word; }
h1 { font-size: clamp(2.05rem, 1.55rem + 2.3vw, 3.4rem); font-weight: 900; line-height: 1.06; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.25rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; }
h3 { font-size: 1.28rem; }
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-band); color: #fff; font-weight: 700; font-family: var(--font); border-bottom: 2px solid var(--neon); }
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 neon logo glows, Join always visible, the platform's menu; it stays at the top of the
   screen as the page scrolls (sticky), so in-page anchors land clear of it ---- */
html { scroll-padding-top: var(--head-h-wide); }
@media (max-width: 61.99rem) { html { scroll-padding-top: var(--head-h); } }
.gs-head { background: var(--ink); position: sticky; top: 0; z-index: 30; border-bottom: 2px solid var(--neon); box-shadow: 0 4px 16px -4px var(--glow); }
.gs-head-inner { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; min-height: 3.5rem; }
.gs-head-mark { flex: 0 1 auto; display: block; min-width: 0; }
/* The logo file is a 560x200 canvas with the neon lettering drawn from y 38 to 163 (working/logo-fit.json), so the box
   keeps the full width and crops to that band (aspect 560/126) at --logo-height; on a phone --logo-height-phone. */
.gs-head-logo { display: block; aspect-ratio: 560 / 126; width: auto; height: var(--logo-height-phone); max-width: 100%; object-fit: cover; object-position: 50% 50%; }
.gs-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(--red); color: #fff; border: 2px solid var(--neon); border-radius: 6px; font-family: var(--font); font-size: 0.92rem;
  font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 12px var(--glow-soft), inset 0 0 10px rgba(255, 8, 0, 0.35);
}
.gs-head-join:hover { background: var(--red-deep); color: #fff; box-shadow: 0 0 18px var(--glow), inset 0 0 12px var(--glow); }
.gs-menu { flex: 0 0 auto; }
.gs-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: 6px; }
.gs-menu-toggle::-webkit-details-marker { display: none; }
.gs-menu-bars, .gs-menu-bars::before, .gs-menu-bars::after { display: block; width: 1.55rem; height: 0.18rem; background: var(--neon); border-radius: 2px; box-shadow: 0 0 6px var(--glow); }
.gs-menu-bars { position: relative; }
.gs-menu-bars::before, .gs-menu-bars::after { content: ""; position: absolute; left: 0; }
.gs-menu-bars::before { top: -0.48rem; }
.gs-menu-bars::after { top: 0.48rem; }
.gs-menu[open] .gs-menu-bars { background: transparent; box-shadow: none; }
.gs-menu[open] .gs-menu-bars::before { top: 0; transform: rotate(45deg); }
.gs-menu[open] .gs-menu-bars::after { top: 0; transform: rotate(-45deg); }
.gs-menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-top: 2px solid var(--neon); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6); padding: 0.4rem 1rem 1rem; }
.gs-menu-nav ul { list-style: none; margin: 0; padding: 0; }
.gs-menu-nav li { margin: 0; }
.gs-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; }
.gs-menu-nav a:hover { color: var(--neon); }
.gs-menu-nav li:has(> ul) > a:not([href]) { cursor: default; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.gs-menu-nav ul ul { padding-left: 0.9rem; }
.gs-menu-controls { display: flex; gap: 0.75rem; padding-top: 0.75rem; }
.gs-menu-login { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border: 2px solid var(--neon); border-radius: 6px; color: var(--neon); font-weight: 700; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; box-shadow: 0 0 10px var(--glow-soft), inset 0 0 10px var(--glow-soft); }
@media (min-width: 62rem) {
  .gs-head-inner { padding: 0.5rem 1.5rem; gap: 1.2rem; min-height: 4.4rem; }
  .gs-head-logo { height: var(--logo-height); }
  .gs-head-join { order: 3; margin-left: 0; font-size: 0.95rem; padding: 0.4rem 1.4rem; }
  .gs-menu { order: 2; margin-left: auto; }
  .gs-menu-toggle { display: none; }
  .gs-menu::details-content { content-visibility: visible; block-size: auto; }
  .gs-menu-panel { display: flex; align-items: center; gap: 1.3rem; position: static; border: 0; box-shadow: none; padding: 0; background: none; }
  .gs-menu-nav > ul, .gs-menu-nav nav > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.15rem; }
  .gs-menu-nav a { min-height: 2.75rem; border: 0; padding: 0; font-size: 0.95rem; color: #fff; font-weight: 600; }
  .gs-menu-nav a:hover { color: var(--neon); text-shadow: 0 0 8px var(--glow); }
  .gs-menu-nav li { position: relative; }
  .gs-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: 2px solid var(--neon); padding: 0.4rem 0.75rem; z-index: 40; }
  .gs-menu-nav ul ul a { border-bottom: 1px solid var(--rule); }
  .gs-menu-nav li:hover > ul, .gs-menu-nav li:focus-within > ul { display: block; }
  .gs-menu-controls { padding: 0; }
  .gs-menu-login { min-height: 2.6rem; padding: 0 1rem; }
  .gs-menu-login:hover { color: #fff; box-shadow: 0 0 16px var(--glow), inset 0 0 14px var(--glow); }
}

/* ---- breadcrumbs (on the opener ground that follows) ---- */
.crumb-trail { background: #0d0507; padding: 0.7rem 1rem 0; font-size: 0.82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.3rem; }
.crumb-trail > * { max-width: var(--wrap); }
.crumb-trail-link { color: var(--neon); }
.crumb-trail-current { color: var(--muted); }
.crumb-trail:has(+ main > .gs-opener--ink:first-child) { background: var(--ink); }
.crumb-trail:has(+ main > .gs-opener--red:first-child) { background: #2a0408; }
@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): the old site's neon button, filled red ---- */
.hero-stated-btn.gs-join {
  display: block; text-align: center; background: var(--red); color: #fff; text-decoration: none; border-radius: 6px;
  font-family: var(--font); font-weight: 800; font-size: 1.1rem; line-height: 1.2; padding: 0.9rem 1.2rem; letter-spacing: 0.06em;
  text-transform: uppercase; border: 2px solid var(--neon); box-shadow: 0 0 18px var(--glow), inset 0 0 14px rgba(255, 8, 0, 0.5);
}
.hero-stated-btn.gs-join:hover { background: var(--red-deep); color: #fff; box-shadow: 0 0 26px var(--glow), inset 0 0 18px var(--glow); }
@media (min-width: 48rem) { .hero-stated-btn.gs-join { display: inline-block; padding: 0.95rem 3rem; } .gs-hero-card .hero-stated-btn.gs-join { align-self: flex-start; } }

/* ---- the neon sign line above a headline, as the old site drew "CHOOSE YOUR SHAG" ---- */
.gs-eyebrow { order: 0; margin: 0 0 0.3rem; font-family: var(--neon-face); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--neon); text-shadow: 0 0 6px var(--glow), 0 0 14px var(--glow-soft); }

/* ---- home opener: black, the old site's photograph in a neon frame (a band on a phone, the right column on a desktop) ---- */
.gs-hero { background: radial-gradient(120% 70% at 50% 0%, #2a0609 0%, #0a0506 60%) var(--page); color: var(--text); border-bottom: 2px solid var(--neon); box-shadow: 0 6px 18px -8px var(--glow); }
.gs-hero-stage { position: relative; max-width: 80rem; margin: 0 auto; }
.gs-hero-picture { display: block; margin: 0.6rem 0.75rem 0; border: 2px solid var(--neon); border-radius: 10px; overflow: hidden; box-shadow: 0 0 14px var(--glow), inset 0 0 14px var(--glow); background: #000; }
.gs-hero-photo { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: var(--pos-m, 50% 30%); }
.gs-hero-card { position: relative; z-index: 2; padding: 0.65rem 1rem 1.2rem; display: flex; flex-direction: column; }
.gs-hero-title { order: 1; margin: 0 0 0.8rem; color: #fff; text-shadow: 0 0 18px rgba(255, 8, 0, 0.35); }
.gs-hero-card .hero-stated-btn { order: 2; }
.gs-hero-sub { order: 3; margin: 0.8rem 0 0; font-size: 1rem; color: var(--text); }
.gs-trust { order: 4; margin: 0.5rem 0 0; font-size: 0.84rem; font-weight: 600; color: var(--muted); }
.gs-adult { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 0.4rem; font-size: 0.84rem; font-weight: 700; color: var(--neon); }
.gs-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; border: 1px solid var(--neon); }
@media (min-width: 62rem) {
  .gs-hero-stage { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); align-items: center; gap: 2rem; padding: 2rem max(1.5rem, calc(50vw - 33rem)); }
  .gs-hero-picture { grid-column: 2; grid-row: 1; margin: 0; justify-self: end; width: min(100%, 25rem); }
  .gs-hero-photo { aspect-ratio: 3 / 4; object-position: var(--pos-d, 50% 20%); }
  .gs-hero-card { grid-column: 1; grid-row: 1; padding: 0; }
  .gs-hero-sub { font-size: 1.08rem; max-width: 32rem; }
}

/* ---- inner openers: the page's own words on black with a neon edge, then the action ---- */
.gs-opener { background: radial-gradient(110% 80% at 0% 0%, #26070b 0%, #0d0507 65%) #0d0507; color: #fff; border-bottom: 2px solid var(--neon); box-shadow: 0 6px 18px -8px var(--glow); }
.gs-opener--ink { background: var(--ink); }
.gs-opener--red { background: linear-gradient(160deg, #5c0a10 0%, #2a0408 75%); }
.gs-opener-inner { max-width: var(--wrap); margin: 0 auto; padding: 0.6rem 1rem 1.25rem; display: flex; flex-direction: column; }
.gs-opener-title { order: 1; margin: 0 0 0.75rem; font-size: clamp(1.95rem, 1.5rem + 2vw, 3rem); color: #fff; }
.gs-opener-cta { order: 2; }
.gs-opener-sub { order: 3; margin: 0.8rem 0 0; max-width: var(--prose); color: var(--text); }
.gs-opener .gs-trust { order: 4; }
@media (min-width: 62rem) {
  .gs-opener-inner { padding: 1.6rem 1.5rem 2.1rem; }
  .gs-opener-inner > * { max-width: 46rem; }
}

/* ---- content sections: bands that alternate ---- */
.gs-section { max-width: var(--wrap); margin: 0 auto; padding: 2.1rem 1rem; }
.gs-section + .gs-section { padding-top: 0.6rem; }
.gs-section--panel, .gs-section--red, .gs-section--ink, .gs-section--glow { max-width: none; }
.gs-section--panel { background: var(--panel); }
.gs-section--red { background: linear-gradient(160deg, #5c0a10 0%, #33060a 100%); }
.gs-section--ink { background: var(--ink); }
.gs-section--glow { background: #110608; border-top: 2px solid var(--neon); border-bottom: 2px solid var(--neon); box-shadow: inset 0 10px 22px -14px var(--glow), inset 0 -10px 22px -14px var(--glow); }
.gs-section--glow h2, .gs-section--glow h3 { color: var(--neon); text-shadow: 0 0 10px var(--glow-soft); }
.gs-section--panel + .gs-section, .gs-section--red + .gs-section, .gs-section--ink + .gs-section, .gs-section--glow + .gs-section { padding-top: 2.1rem; }
.gs-section + .gs-section--panel, .gs-section + .gs-section--red, .gs-section + .gs-section--ink, .gs-section + .gs-section--glow { padding-top: 2.1rem; }
.gs-section-inner { max-width: var(--wrap); margin: 0 auto; }
.prose-column { max-width: var(--prose); }
.gs-section-inner.prose-column { max-width: var(--wrap); }
.gs-section-inner.prose-column > * { max-width: var(--prose); }
.gs-section h2::after, .link-cluster-title::after, .faq-details-title::after, .listing-rows h2::after { content: ""; display: block; width: 3.4rem; height: 3px; margin-top: 0.55rem; border-radius: 2px; background: var(--neon); box-shadow: 0 0 8px var(--glow), 0 0 2px var(--glow); }
.gs-centre { text-align: center; }
.gs-centre h2::after { margin-left: auto; margin-right: auto; }
.gs-centre .gs-section-inner.prose-column > * { margin-left: auto; margin-right: auto; }
.gs-lede { font-size: 1.14rem; color: var(--heading); }
.gs-note { font-size: 0.93rem; color: var(--muted); border-left: 3px solid var(--neon); padding: 0.2rem 0 0.2rem 0.85rem; margin-top: 1rem; }
.gs-chips { list-style: none; margin: 0.4rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.gs-chips li { margin: 0; padding: 0.3rem 0.9rem; border: 1px solid var(--neon); border-radius: 6px; font-weight: 600; font-size: 0.9rem; color: #fff; background: var(--panel-2); box-shadow: 0 0 8px var(--glow-soft); }
.gs-rules dt { font-weight: 700; color: var(--link); margin-top: 0.9rem; }
.gs-rules dd { margin: 0.15rem 0 0; }
.gs-steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 0; }
.gs-steps li { counter-increment: step; position: relative; padding: 0.1rem 0 0.95rem 3rem; margin: 0; }
.gs-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: 6px; background: var(--red); color: #fff; font-family: var(--neon-face); font-size: 1.15rem; font-weight: 700; border: 2px solid var(--neon); box-shadow: 0 0 10px var(--glow-soft); }
.gs-table-wrap { overflow: visible; max-width: 100%; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); margin: 1rem 0; }
/* The header row sticks just under the sticky site header (its measured height), white on the brand red (5.3:1). */
.gs-table-wrap thead th { position: sticky; top: var(--head-h); z-index: 2; background: var(--red); color: #fff; }
@media (min-width: 62rem) { .gs-table-wrap thead th { top: var(--head-h-wide); } }
.gs-table-wrap thead th:first-child { border-top-left-radius: 9px; }
.gs-table-wrap thead th:last-child { border-top-right-radius: 9px; }
.gs-table-wrap table { min-width: 0; }
@media (max-width: 47.99em) {
  .gs-table-wrap table { table-layout: fixed; font-size: 0.86rem; }
  .gs-table-wrap th, .gs-table-wrap td { padding: 0.5rem 0.4rem; overflow-wrap: anywhere; }
  .gs-table-wrap tbody th { width: 34%; }
  .gs-price { white-space: nowrap; }
}
.gs-price { font-weight: 700; color: var(--heading); }
.gs-two { display: grid; gap: 1.4rem; }
@media (min-width: 52rem) { .gs-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem; } }

/* ---- tiles with neon icons: chat, flame, phone, shield, mask, lock, pin, people (never a heart on this site) ---- */
.gs-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)); }
.gs-tile { margin: 0; background: var(--card); padding: 1.25rem 1.1rem 1.1rem; text-align: center; border-radius: 10px; border: 1px solid var(--rule); }
.gs-tile::before { content: ""; display: block; width: 3.1rem; height: 3.1rem; margin: 0 auto 0.75rem; border-radius: 8px; background: var(--red) center / 54% no-repeat; background-image: var(--icon); border: 2px solid var(--neon); box-shadow: 0 0 12px var(--glow-soft), inset 0 0 8px var(--glow-soft); }
.gs-tile h3 { font-size: 1.15rem; margin: 0 0 0.35rem; text-transform: uppercase; letter-spacing: 0.02em; }
@media (max-width: 47.99em) {
  .gs-tile { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); column-gap: 0.9rem; align-items: start; text-align: left; padding: 1rem; }
  .gs-tile::before { margin: 0; grid-row: 1 / span 2; }
}
.gs-tile p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.gs-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"); }
.gs-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"); }
.gs-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"); }
.gs-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"); }
.gs-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"); }
.gs-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"); }
.gs-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"); }
.gs-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 six reasons to join, in neon-framed pods ---- */
.gs-reasons { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.gs-reason { margin: 0; padding: 1.1rem 1rem 1rem; border-radius: 10px; background: var(--card); border: 2px solid var(--neon); box-shadow: 0 0 14px var(--glow-soft), inset 0 0 12px rgba(255, 8, 0, 0.25); }
.gs-reason h3 { margin: 0 0 0.35rem; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.03em; }
.gs-reason p { margin: 0; color: var(--muted); font-size: 0.97rem; }

/* ---- plans: Free, VIP and VIP+ side by side ---- */
.gs-plans { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 56rem) { .gs-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gs-plan { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 1.15rem 1.1rem 1.1rem; display: flex; flex-direction: column; }
.gs-plan--free { border-top: 3px solid var(--muted); }
.gs-plan--vip { border-top: 3px solid var(--splash); }
.gs-plan--plus { border: 2px solid var(--neon); box-shadow: 0 0 14px var(--glow-soft); background: var(--card-2); }
.gs-plan h3 { font-size: 1.6rem; margin: 0 0 0.2rem; font-weight: 900; }
.gs-plan-tag { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.94rem; }
.gs-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: 3px solid var(--neon); border-radius: 8px; color: #fff; font-weight: 600; text-decoration: none; }
.link-cluster-link:hover { background: var(--card-2); color: #fff; box-shadow: 0 0 12px var(--glow-soft); }
@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: 10px; overflow: hidden; }
.listing-rows-item { margin: 0; padding: 0.95rem 1rem; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--neon); }
.listing-rows-item:nth-child(even) { border-left-color: var(--splash); }
.listing-rows-item:last-child { border-bottom: 0; }
.listing-rows-link { font-family: var(--heads); font-weight: 800; font-size: 1.18rem; text-decoration: none; color: #fff; }
.listing-rows-link::after { content: " \203A"; color: var(--neon); }
.listing-rows-summary { margin: 0.25rem 0 0; color: var(--muted); }
.listing-rows.gs-section--panel { max-width: none; }
.listing-rows.gs-section--panel > .listing-rows-inner { max-width: var(--wrap); margin: 0 auto; }
.listing-rows.gs-section--panel .listing-rows-list, .listing-rows.gs-section--panel h2 { max-width: 54rem; }

/* ---- calls to action ---- */
/* The soft join box after a page's first intro paragraph: in the flow of the page, never sticky, never a popup, never
   above the H1 or the hero. The button is at least 44px tall. */
.gs-join-box { max-width: 40rem; margin: 1.1rem 0 1.4rem; padding: 1rem 1.1rem 1.1rem; background: var(--panel-2); border: 2px solid var(--neon); border-radius: 10px; box-shadow: 0 0 14px var(--glow-soft), inset 0 0 10px rgba(255, 8, 0, 0.2); }
.gs-join-box p { margin: 0 0 0.75rem; color: #fff; font-weight: 600; }
.gs-join-box-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.6rem 1.6rem; background: var(--red); color: #fff; border: 2px solid var(--neon); border-radius: 6px; font-family: var(--font); font-weight: 800; font-size: 1rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; box-shadow: 0 0 12px var(--glow-soft), inset 0 0 10px rgba(255, 8, 0, 0.35); }
.gs-join-box-btn:hover { background: var(--red-deep); color: #fff; }
.gs-centre .gs-join-box { margin-left: auto; margin-right: auto; }
.cta-band { background: radial-gradient(90% 120% at 50% 0%, #3a060b 0%, #0a0506 75%); color: #fff; padding: 2.6rem 1rem; text-align: center; border-top: 2px solid var(--neon); box-shadow: inset 0 12px 24px -16px var(--glow); }
.cta-band-inner { max-width: 46rem; margin: 0 auto; }
.cta-band-title { color: #fff; font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem); text-transform: uppercase; }
.cta-band-title::before { content: ""; }
.cta-band-lead { margin: 0 auto 1.15rem; }
.cta-band-btn { display: inline-block; min-width: 14rem; padding: 0.95rem 2rem; background: var(--red); color: #fff; border-radius: 6px; font-weight: 800; font-size: 1.08rem; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border: 2px solid var(--neon); box-shadow: 0 0 18px var(--glow), inset 0 0 14px rgba(255, 8, 0, 0.5); }
.cta-band-btn:hover { background: var(--red-deep); color: #fff; box-shadow: 0 0 26px var(--glow), inset 0 0 18px var(--glow); }

/* ---- 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.16rem; border-radius: 2px; background: var(--neon); box-shadow: 0 0 6px var(--glow); }
.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.gs-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: 3px solid var(--neon); border-radius: 10px; }
.safety-protections-item:nth-child(even) { border-top-color: var(--splash); }
.safety-protections-name { font-size: 1.2rem; 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: 4px solid var(--neon); border-radius: 0 10px 10px 0; padding: 1.05rem 1.25rem 0.6rem; box-shadow: -4px 0 14px -6px var(--glow); }
.key-takeaways-title { font-size: 1.25rem; text-transform: uppercase; }
.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: 2px solid var(--neon); border-radius: 10px; color: var(--text); box-shadow: 0 0 10px var(--glow-soft); }
.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(--neon); 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(--neon); border-radius: 10px; color: var(--muted); text-align: center; font-weight: 700; }

/* ---- footer: the neon logo on black, the platform's footer menu, the legal links, 18+ ---- */
.gs-foot { background: var(--ink); color: var(--muted); padding: 1.9rem 1rem 6rem; font-size: 0.92rem; border-top: 2px solid var(--neon); box-shadow: inset 0 10px 20px -14px var(--glow); }
.gs-foot-inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 1.15rem; }
.gs-foot a { color: var(--neon); }
.gs-foot-mark { display: inline-block; justify-self: start; }
.gs-foot-logo { display: block; aspect-ratio: 560 / 126; width: auto; height: var(--logo-height-footer); max-width: 100%; object-fit: cover; object-position: 50% 50%; }
.gs-foot-menu ul, .gs-foot-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.2rem; }
.gs-foot-menu li, .gs-foot-legal li { margin: 0; }
.gs-foot-menu a, .gs-foot-legal a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.gs-foot-menu a { color: #fff; }
.gs-foot-menu ul ul { display: contents; }
.gs-foot-legal a { color: var(--neon); font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.04em; }
.gs-foot-network { margin: 0; font-size: 0.84rem; color: var(--muted); max-width: 52rem; }
.gs-foot-copy { margin: 0; color: var(--muted); font-size: 0.86rem; text-align: center; }

/* ---- the sticky join bar on a phone ---- */
.cta-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, 0.95); border-top: 2px solid var(--neon); box-shadow: 0 -4px 14px -4px var(--glow); }
.cta-sticky-btn { display: block; text-align: center; padding: 0.72rem 1rem; background: var(--red); color: #fff; border: 2px solid var(--neon); border-radius: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; }
.cta-sticky-btn:hover { background: var(--red-deep); color: #fff; }
/* The hero's own button covers the first screen, so the bar slides in once the visitor scrolls past it (where the
   browser supports scroll-linked animation; elsewhere it simply shows). */
@supports (animation-timeline: scroll()) {
  .cta-sticky { animation: gs-sticky-in linear both; animation-timeline: scroll(root); animation-range: 0 420px; }
  @keyframes gs-sticky-in {
    0%, 70% { opacity: 0; transform: translateY(110%); visibility: hidden; }
    100% { opacity: 1; transform: none; visibility: visible; }
  }
}
@media (min-width: 62rem) { .cta-sticky { display: none; } .gs-foot { padding-bottom: 2.2rem; } }

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