/* ══════════════════════════════════════════════════════════════════════════
   SexBabesVR — theme-level custom stylesheet
   Loaded from template/include_header_general.tpl AFTER main.css, so rules
   here win ties without touching main.css.

   ⚠ Keep every block in this file clearly delimited and ticket-tagged.
   ⚠ main.css is NOT to be edited for new components — add them here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   #200 PHASE 0 — DESIGN TOKENS (2026-08-23). The canon is _mockups/sbvr-style-canon.html
   (operator sign-off 8/23, all 7 lines YES) + _briefs/200-frontend-canon-drift-audit-2026-08-20.md.

   This block is the SINGLE source of raw values for the frontend from now on (canon §16.1:
   no hex / px radii / font sizes outside this block in new CSS). It is deliberately INVISIBLE:
     • --sbvr-*            canon tokens (colour, radii, type scale, spacing, motion, z-map)
     • --sbvr188-*         the #188 component aliases — same names, same values, now defined ONCE
                           here instead of four times on .sbvr-hub/.sbvr-post/.sbvr-freepage/
                           .sbvr-freesec/.sbvr-perks (those blocks keep only their own rules)
     • --bs-primary/blue   Bootstrap's primary (main.css) re-pointed from the legacy #01B3EF to the
                           ONE cyan #01B5F0 — canon sign-off line 1. Two points on the blue channel;
                           every var(--bs-primary) consumer follows without a selector change.
   Page phases (scene → home → listings → login → account) consume these tokens; nothing in this
   block changes layout. custom.css loads after main.css, so equal-specificity repeats below win.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
	/* colour */
	--sbvr-bg:          #131314;
	--sbvr-bg-2:        #0b0b0d;
	--sbvr-surface:     #16161c;
	--sbvr-surface-2:   #1c1c23;
	--sbvr-line:        rgba(255, 255, 255, .09);
	--sbvr-line-2:      rgba(255, 255, 255, .16);
	--sbvr-text:        #ffffff;
	--sbvr-text-2:      #b9b9c4;
	--sbvr-text-3:      #7c7c8a;
	--sbvr-pink:        #FF7DE0;
	--sbvr-cyan:        #01B5F0;
	--sbvr-mid:         #8B99E8;
	--sbvr-yellow:      #f3d235;   /* resolution badge (8K/7K) — the one non-brand accent, kept from main.css --bs-yellow */
	--sbvr-grad:        linear-gradient(135deg, #FF7DE0 0%, #01B5F0 100%);
	/* radii (canon §4): card 12 · thumb 8 · input 8 · utility button 8 · pill 999 */
	--sbvr-r-pill:      999px;
	--sbvr-r-card:      12px;
	--sbvr-r-thumb:     8px;
	--sbvr-r-input:     8px;
	--sbvr-r-util:      8px;
	/* type (canon §2): Roboto only */
	--sbvr-ff:          Roboto, "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--sbvr-fs-hero:     clamp(28px, 4.4vw, 44px);   /* hub / landing H1, weight 900 */
	--sbvr-fs-h1:       32px;                        /* page H1 (listing / scene / model / category), 900; 26px mobile */
	--sbvr-fs-h1-m:     26px;
	--sbvr-fs-h2:       24px;                        /* section H2, 900 */
	--sbvr-fs-h3:       18px;                        /* 800 */
	--sbvr-fs-body:     16px;
	--sbvr-fs-meta:     13.5px;
	--sbvr-fs-btn:      14.5px;
	--sbvr-lh-body:     1.6;
	--sbvr-lh-prose:    1.7;
	/* spacing scale (canon §7) + measures */
	--sbvr-s-1: 4px;  --sbvr-s-2: 8px;  --sbvr-s-3: 12px; --sbvr-s-4: 16px;
	--sbvr-s-5: 24px; --sbvr-s-6: 32px; --sbvr-s-7: 40px; --sbvr-s-8: 56px;
	--sbvr-measure:      1180px;   /* content */
	--sbvr-measure-grid: 1760px;   /* listing grids */
	--sbvr-measure-prose: 72ch;    /* .prose */
	/* motion (canon §8) */
	--sbvr-t-fast:  150ms;
	--sbvr-t-base:  200ms;
	--sbvr-t-slow:  350ms;
	--sbvr-ease:    cubic-bezier(.22, .8, .3, 1);
	/* z-map (canon §9) */
	--sbvr-z-chrome: 100; --sbvr-z-chips: 200; --sbvr-z-drawer: 300; --sbvr-z-modal: 400; --sbvr-z-toast: 500;

	/* feedback colors (canon 6: input error/success) */
	--sbvr-err:        #ff8f8f;
	--sbvr-err-border: rgba(255, 107, 107, .6);
	--sbvr-ok:         #7fe0af;
	--sbvr-ok-border:  rgba(60, 200, 120, .55);

	/* #188 component aliases — values identical to the former scoped blocks (invisible move) */
	--sbvr188-bg:         #0b0b0d;
	--sbvr188-bg-2:       #131318;
	--sbvr188-surface:    var(--sbvr-surface);
	--sbvr188-surface-2:  var(--sbvr-surface-2);
	--sbvr188-line:       var(--sbvr-line);
	--sbvr188-line-2:     var(--sbvr-line-2);
	--sbvr188-text:       var(--sbvr-text);
	--sbvr188-text-2:     var(--sbvr-text-2);
	--sbvr188-text-3:     var(--sbvr-text-3);
	--sbvr188-pink:       var(--sbvr-pink);
	--sbvr188-cyan:       var(--sbvr-cyan);
	--sbvr188-mid:        var(--sbvr-mid);
	--sbvr188-grad:       var(--sbvr-grad);
	--sbvr188-radius:     14px;   /* hub/post cards today; → var(--sbvr-r-card) in the listings phase */
	--sbvr188-radius-sm:  10px;
	--sbvr188-pill:       var(--sbvr-r-pill);
	--sbvr188-ff:         var(--sbvr-ff);

	/* Bootstrap primary (main.css :root) → the ONE cyan */
	--bs-blue:        #01B5F0;
	--bs-primary:     #01B5F0;
	--bs-primary-rgb: 1, 181, 240;
}

/* ── ONE CYAN (canon sign-off 1): every main.css rule that hard-codes the legacy #01B3EF,
      repeated at equal specificity with the canon cyan. Values only — no layout properties. ── */
a, a:hover { color: var(--sbvr-cyan); }   /* main.css has two a:hover colours; the effective (later) one is the plain cyan, so this is a pure hex swap. Canon hover (pink) lands per page phase. */
.link-primary { color: var(--sbvr-cyan); }
.border-primary { border-color: var(--sbvr-cyan) !important; }
.gallery-slider .subscribe-slide { border-color: var(--sbvr-cyan); }
.button.link { color: var(--sbvr-cyan); }
.button.blue, .button.mobile { background-color: var(--sbvr-cyan); }
form label.checkbox input:checked ~ .check { background-color: var(--sbvr-cyan); }
.pagination__button { border-color: var(--sbvr-cyan); }
.pagination__button.next { color: var(--sbvr-cyan); }
.forum__discussion--pinned:before { background-color: var(--sbvr-cyan); }
.avatar__badge { background-color: var(--sbvr-cyan); }
.avatar--premium > span:before { border-color: var(--sbvr-cyan); }
.badge { background-color: var(--sbvr-cyan); }
.badge-res { background-color: var(--sbvr-yellow); }   /* 8/23 fix: generic .badge override above had flattened the yellow 8K/7K badge */
.banner__name b { color: var(--sbvr-cyan); }
.offcanvas-download__item--content ul li:hover .left .title, .offcanvas-download__item--content ul li:hover .right a, .offcanvas-download__item--content ul li:hover button { color: var(--sbvr-cyan); }
.offcanvas-download__item--content ul li:hover button svg path { fill: var(--sbvr-cyan); }
.login__info .join { background: var(--sbvr-cyan); }
.login__info .column .country { color: var(--sbvr-cyan); }
.login__inputWrapper { border-color: var(--sbvr-cyan); }
.login__submit { background: var(--sbvr-cyan); }
.contact__input, .contact__textarea { border-color: var(--sbvr-cyan); }
.contact__submit { background-color: var(--sbvr-cyan); }
.landing__button { background: var(--sbvr-cyan); }
.blog-cookie .cc-btn { background-color: var(--sbvr-cyan); }
.badge-vr { background-color: var(--sbvr-cyan); }
.item.models-container .models-container__description span { background: var(--sbvr-cyan) !important; }

/* ── ONE MUTED GREY (canon sign-off 2): rgba(255,255,255,.78) → --sbvr-text-2 (#b9b9c4).
      Same rule list as main.css; colour only. ── */
.sbvr-cta-hero__blurb,
.sbvr-legal-page, .sbvr-legal-page p, .sbvr-legal-page ul, .sbvr-legal-page ol,
.sbvr-category-deck__intro, .sbvr-pornstars-deck__intro,
.sbvr-category-about__faq-list dd,
.sbvr-auth-marketing__chip,
.sbvr-md-sale__plan-features li,
.sbvr-prefooter-sale__text, .sbvr-hero-sale__sub,
.sbvr-hero__desc { color: var(--sbvr-text-2); }
.klaro .cm-modal .description, .klaro .cm-modal p { color: var(--sbvr-text-2) !important; }

/* -- #200 PHASE 1 -- SCENE PAGE (2026-08-24), per the signed-off canon strip
      (_mockups/sbvr-style-canon.html "Before - scene page" -> After):
      H1 24/700 -> 32/900 (26 mobile) . section headings 12/600 pink caps -> 18/800
      sentence case . download CTA 4px rect -> primary gradient pill (white text) .
      favorites -> 8px utility soft-rect. Scoped to body.view_video -- no other page
      type moves. The 4px radius came from .button:not(.plain):not(.link) (0,3,0),
      which outguns .sbvr-meta__download -- hence the triple-class selectors here.
      Genuine eyebrow labels (vr-bar, meta models) keep the canon eyebrow style. -- */
body.view_video .video-detail h1 {
	font-size: var(--sbvr-fs-h1);
	font-weight: 900;
	line-height: 1.2;
}
@media (max-width: 767.98px) {
	body.view_video .video-detail h1 { font-size: var(--sbvr-fs-h1-m); }
}
body.view_video .sbvr-scene-about__eyebrow,
body.view_video .sbvr-scene-gallery__eyebrow,
body.view_video .sbvr-scene-comments__eyebrow,
body.view_video .sbvr-scene-related__eyebrow {
	font-size: var(--sbvr-fs-h3);
	font-weight: 800;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sbvr-text);
	line-height: 1.3;
}
/* primary pill -- Join to Download / Download. The legacy radius comes from
   .button:not(.button.plain):not(.button.link) at (0,5,0) -- selectors here must
   outgun it. fs/color carry !important to beat main.css's own !importants. */
body.view_video .video-detail .sbvr-meta .button.sbvr-meta__download {
	border-radius: var(--sbvr-r-pill);
	font-size: var(--sbvr-fs-btn) !important;
}
/* white text only on the gradient primary; .sbvr-meta__upgrade keeps its pink ghost */
body.view_video .sbvr-meta .button.blue.sbvr-meta__download {
	color: var(--sbvr-text) !important;
}
/* favorites -> utility soft-rect role (8px, flat surface), BOTH states:
   .button.black = "Add to Favorites", .button.blue = active "Your favorite"
   (keeps its #106 cyan tint, radius unified). Border stays 1px (transparent)
   so the 43px height alignment with the download pill survives (#131). */
body.view_video .sbvr-meta__fav .button {
	border-radius: var(--sbvr-r-util) !important;
	gap: var(--sbvr-s-2);
}
body.view_video .sbvr-meta__fav .button.black {
	background: rgba(255, 255, 255, .06) !important;
	border-color: transparent !important;
	color: var(--sbvr-text-2) !important;
}
body.view_video .sbvr-meta__fav .button.black:before { display: none; }
body.view_video .sbvr-meta__fav .button.black:hover,
body.view_video .sbvr-meta__fav .button.black:focus-visible {
	background: rgba(255, 255, 255, .1) !important;
	border-color: transparent !important;
	color: var(--sbvr-text) !important;
}

/* -- #200 PHASE 2 -- HOMEPAGE (2026-08-24), per the signed-off canon:
      de-Inter + heading scale + CTA roles. Finding logged on the board: 'Inter' was
      NEVER loaded as a webfont (no @font-face, no font link, no Inter file in
      static/fonts) -- the hero and sale components actually rendered in each OS's
      SYSTEM font (Segoe UI on Windows). So this is a visible fix, not a perf one.
      Hero title size/weight (clamp .. /900) and hero CTA gradient/999px were already
      canon -- only family, case, text color and the secondary's ghost-pill role move.
      Scoped body.index except: .sbvr-md-sale (sale-mode component, Roboto everywhere
      it appears) and .sbvr-cta-hero__headline (shared include_join component, max
      46->44 = canon hero clamp on every surface that renders it). -- */
body.index .sbvr-hero .sbvr-hero__slide { font-family: var(--sbvr-ff); }
.sbvr-md-sale,
.sbvr-md-sale__hero { font-family: var(--sbvr-ff); }
/* hero primary CTA -> canon primary pill values (13px/800 CAPS dark -> 14.5/700 title-case white) */
body.index .sbvr-hero__cta {
	font-size: var(--sbvr-fs-btn);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sbvr-text) !important;
}
/* hero secondary (12px CAPS text link) -> canon ghost pill */
body.index .sbvr-hero__cta-secondary {
	border: 1px solid var(--sbvr-line-2);
	border-radius: var(--sbvr-r-pill);
	padding: 12px 24px; /* 12+12+1px border x2 = the primary's 13px-padding 48px height */
	font-size: var(--sbvr-fs-btn);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sbvr-text-2);
	display: inline-flex;
	align-items: center;
	transition: color var(--sbvr-t-base) var(--sbvr-ease), border-color var(--sbvr-t-base) var(--sbvr-ease), transform var(--sbvr-t-base) var(--sbvr-ease);
}
body.index .sbvr-hero__cta-secondary:hover {
	border-color: var(--sbvr-cyan);
	color: var(--sbvr-text);
	transform: translateY(-2px);
}
/* Continue watching / More for you section titles 20/700 -> canon H2 24/900 (all widths,
   matching the free-section flat headline; overrides the 17px mobile media rule too) */
body.index .sbvr-cw__title {
	font-size: var(--sbvr-fs-h2);
	font-weight: 900;
}
/* shared join-CTA headline: clamp max 46 -> canon 44 */
.sbvr-cta-hero__headline { font-size: var(--sbvr-fs-hero); }

/* -- Listing SEO-text read-more fix (2026-08-24, operator report): the collapsed state
      clamps at 18 lines (main.css 17671) but the copy has shrunk to ~14 lines since the
      8/13 copy edits -- nothing was hidden and "Read More" appeared dead. 6 lines shows
      the lede; the toggle (index.build.js readMoreWrapper) now actually expands. Text
      stays in the DOM when clamped -- fully crawlable, no SEO impact. */
.readMoreWrapper.seo-text .list-of-categories__p.readMoreWrapper__textHidden {
	-webkit-line-clamp: 6 !important;
	line-clamp: 6 !important;
}

/* -- #200 PHASE 3 -- LISTINGS / CATEGORY / MODEL (2026-08-24), per the signed-off canon:
      H1s to 32/900 (26 mobile), section H2s to 24/900, thumbs to the real 8px clip.
      Component-scoped (each class is page-unique); thumb rules unscoped = canon thumbs
      sitewide (listing grids, related grids, homepage latest, model cards).
      Grid audit finding: latest 4 col / category 4 col / model scene grid 3 col --
      deliberate per-page-type, unchanged. DECIDED: the yellow 8K/7K .badge-res STAYS
      (operator 8/23) -- recorded as the one deliberate accent outside the pink/cyan
      pair; do not "fix" it to cyan in later passes. */
.sbvr-pornstars-deck__title,
.sbvr-category-deck__title,
h1.sbvr-pornstar-hero__name {
	font-size: var(--sbvr-fs-h1);
	font-weight: 900;
}
@media (max-width: 767.98px) {
	.sbvr-pornstars-deck__title,
	.sbvr-category-deck__title,
	h1.sbvr-pornstar-hero__name { font-size: var(--sbvr-fs-h1-m); }
}
/* model + category section H2s (18.4/700 and 20/700) -> canon 24/900 */
.sbvr-pornstar-about__title,
.sbvr-pornstar-videos__title,
.sbvr-pornstar-comments__title,
.sbvr-category-about__title {
	font-size: var(--sbvr-fs-h2);
	font-weight: 900;
}
/* fan-favorite card heading 16/600 -> card-level H3 role */
.sbvr-fan-fav__title {
	font-size: var(--sbvr-fs-h3);
	font-weight: 800;
}
/* thumbs: canon 8px actually clipped. .video-container__image already overflow:hidden;
   .models-container__image was overflow:visible -> clip added */
.video-container__image { border-radius: var(--sbvr-r-thumb); }
.models-container__image { border-radius: var(--sbvr-r-thumb); overflow: hidden; }

/* -- #200 PHASE 4 -- LOGIN (2026-08-24), per the signed-off canon strip
      ("Before - login page" -> After): the H1 was 16px/600/UPPERCASE (main.css forces all
      three with !important, so !important comes back here) while the marketing panel H2
      beside it was 40/800 -- hierarchy inverted. Now: H1 32/900 leads (text de-CAPSed in
      langs/default.lang login.title, same sentence case as the modal), panel title -> canon
      H2 24/900. Inputs: page 10px + wrapper 3px -> canon 8px (modal was already 8px).
      Submit + join de-uppercased at canon button size. Modal (the SECOND login form):
      submit 4px -> pill (selector outguns the (0,5,0) legacy :not rule), title 22/700 ->
      canon H2. Topbar search input (4px) = sitewide chrome, deferred to Phase 5. -- */
.login__h1, .reset-pass__h1 {
	font-size: var(--sbvr-fs-h1) !important;
	font-weight: 900 !important;
	text-transform: none !important;
}
@media (max-width: 767.98px) {
	.login__h1, .reset-pass__h1 { font-size: var(--sbvr-fs-h1-m) !important; }
}
.sbvr-auth-marketing__title {
	font-size: var(--sbvr-fs-h2);
	font-weight: 900;
}
.sbvr-auth-card .login__inputWrapper input.textfield,
.sbvr-auth-card .login__inputWrapper input[type="text"],
.sbvr-auth-card .login__inputWrapper input[type="password"] {
	border-radius: var(--sbvr-r-input) !important;
}
.login__inputWrapper { border-radius: var(--sbvr-r-input); }
.sbvr-auth-card input[type="submit"].login__submit,
.login__form .login__submit {
	text-transform: none !important;
	font-size: var(--sbvr-fs-btn) !important;
}
.sbvr-auth-card a.login__join,
.login__form .login__join {
	text-transform: none !important;
	font-size: var(--sbvr-fs-btn) !important;
}
.modal.modal-centered.modal-contact-form .modal_body .button.blue {
	border-radius: var(--sbvr-r-pill);
}
.modal-contact-form .modal_body .title {
	font-size: var(--sbvr-fs-h2);
	font-weight: 900;
}

/* -- #200 PHASE 5 -- ACCOUNT / LEGAL / SITEWIDE CHROME (2026-08-24), final phase.
      Legal pages (.sbvr-legal-page, #129 family): H1 25.6/800 -> 32/900, prose H2s
      17.6/700 -> 24/900 (same scale as guide articles; lp-eyebrow keeps the eyebrow
      style). Chrome: topbar search input 4px -> 8px, topbar + drawer Join/Login
      de-CAPSed, footer col headings -> 13.5/800 letter-spaced --text-3 (deep-pass
      spec; uppercase kept, eyebrow role). Scene comment-form submit rides the same
      (0,5,0)-beating pattern as Phase 1. Account: settings H1 19.2 -> 32/900. */
.sbvr-legal-page h1 {
	font-size: var(--sbvr-fs-h1);
	font-weight: 900;
}
.sbvr-legal-page h2,
.sbvr-legal-page.sbvr-legal--toc .sbvr-legal__content h2 {
	font-size: var(--sbvr-fs-h2);
	font-weight: 900;
}
.settings-page h1 {
	font-size: var(--sbvr-fs-h1);
	font-weight: 900;
}
@media (max-width: 767.98px) {
	.sbvr-legal-page h1,
	.settings-page h1 { font-size: var(--sbvr-fs-h1-m); }
}
/* chrome: search input to canon input radius */
.top-bar__search label.search input,
.top-bar__search input { border-radius: var(--sbvr-r-input); }
/* chrome: topbar + mobile-drawer buttons, title case (!important: the drawer login
   clone carries its own uppercase !important) */
.top-bar__buttons .button,
.top-bar .top-bar__buttons .button.plain,
.top-bar .top-bar__buttons .button.blue,
.top-bar .button.plain,
.side-bar .button,
.side-bar__main-nav .sbvr-mobile-login,
.side-bar__main-nav > a.button.blue,
.mobile > a.top-bar__buttons.button.mobile {
	text-transform: none !important;
}
/* chrome: footer column headings (12.48/700) -> 13.5/800, spaced, text-3 (eyebrow role, caps kept) */
.sbvr-footer h3 {
	font-size: var(--sbvr-fs-meta);
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--sbvr-text-3);
}
/* scene comment-form submit (members): 4px -> pill; selector outguns the (0,5,0) legacy rule */
body.view_video .comments input.button:not(.button.plain):not(.button.link) {
	border-radius: var(--sbvr-r-pill);
}

/* -- #200 PHASE 6 -- DEEP-PASS COMPONENTS (2026-08-24, operator catch: phases 0-5
      missed the section-4 component inventory). Sign-off lines 3-6 delivered here:
      pagination 8px/gradient-active, sort tabs as pills, search H1 (template/search.tpl),
      footer links, card badge chip skin, model-card names to meta scale, sitewide
      :focus-visible. Consciously left: section-rhythm standardization (56-60px) --
      layout-affecting, per-page work, operator decision pending. */

/* pagination: 4px cyan-bordered 36px boxes -> 40px 8px soft-rect util skin, gradient active */
.pagination .pagination__button {
	min-width: 40px;
	width: auto;
	height: 40px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sbvr-r-util);
	background: rgba(255, 255, 255, .06);
	border: 1px solid transparent;
	color: var(--sbvr-text-2);
	font-size: var(--sbvr-fs-btn);
	font-weight: 600;
}
.pagination .pagination__button:hover:not(.disabled):not(.active) {
	background: rgba(255, 255, 255, .1);
	color: var(--sbvr-text);
}
.pagination .pagination__button.active {
	background: var(--sbvr-grad);
	border-color: transparent;
	color: var(--sbvr-text);
	font-weight: 700;
}
.pagination .pagination__button.disabled { opacity: .35; }

/* sort tabs: plain 14/400 links -> pill family, gradient active */
.videos__top--order-item {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: var(--sbvr-r-pill);
	border: 1px solid var(--sbvr-line-2);
	color: var(--sbvr-text-2);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: color var(--sbvr-t-base) var(--sbvr-ease), border-color var(--sbvr-t-base) var(--sbvr-ease);
}
@media (hover: hover) {
	.videos__top--order-item:hover:not(.active) {
		border-color: var(--sbvr-cyan);
		color: var(--sbvr-text);
	}
}
.videos__top--order-item.active {
	background: var(--sbvr-grad);
	border-color: transparent;
	color: var(--sbvr-text);
}
/* the old moving-underline indicator is redundant under pill tabs */
.movingLine-container .order-line__active,
.movingLine-container .movingLine-active { display: none; }

/* card badges: one chip skin (11px stays); .badge-res yellow = the recorded exception */
.video-badges .badge {
	border-radius: var(--sbvr-r-pill);
	background: var(--sbvr-surface-2);
	border: 1px solid var(--sbvr-line-2);
	color: var(--sbvr-text);
}
.video-badges .badge-res {
	background: var(--sbvr-yellow);
	border-color: transparent;
	color: var(--sbvr-bg-2);
}
.video-duration {
	border-radius: var(--sbvr-r-pill);
	border: 1px solid var(--sbvr-line-2);
}

/* model links on video cards -> meta scale */
.video-container .verified {
	font-size: var(--sbvr-fs-meta);
	font-weight: 600;
}

/* footer column links: 16px legacy -> 14.5 text-2, hover pink */
.sbvr-footer__col a,
.sbvr-footer ul a {
	font-size: var(--sbvr-fs-btn);
	color: var(--sbvr-text-2) !important;
}
.sbvr-footer__col a:hover,
.sbvr-footer ul a:hover { color: var(--sbvr-pink) !important; }

/* search page H1 (rendered by template/search.tpl) */
.sbvr-search-h1 {
	font-size: var(--sbvr-fs-h1);
	font-weight: 900;
	margin: 0 0 16px;
}
@media (max-width: 767.98px) {
	.sbvr-search-h1 { font-size: var(--sbvr-fs-h1-m); }
}

/* keyboard focus everywhere (canon 4c) -- was only on new components */
a:focus-visible, button:focus-visible, .button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--sbvr-cyan);
	outline-offset: 3px;
}

/* -- #200 PHASE 7 -- SYSTEM PASS (2026-08-24): canon sections 6/9/10/13/14.
      Z-MAP NOTE (canon 9): full renumber DEFERRED -- topbar/sidebar sit at 1000,
      fancybox at ~99992, Klaro self-manages; renumbering blind risks overlay
      regressions and needs a session with every overlay open at once. The ladder
      tokens govern NEW components; only the join chip (90, was below everything)
      migrates today. Hover-guard retrofit of legacy main.css hovers = same
      migrate-on-touch rule. */

/* canon 14 -- ONE prose treatment for every long-form surface */
.prose,
.sbvr-scene-about__prose,
.sbvr-pornstar-about__prose,
.sbvr-category-about__body,
.sbvr-post__body,
.sbvr-legal-page:not(.sbvr-legal--toc),
.sbvr-legal-page.sbvr-legal--toc .sbvr-legal__content {
	max-width: var(--sbvr-measure-prose);
	font-size: var(--sbvr-fs-body);
	line-height: var(--sbvr-lh-prose);
	color: var(--sbvr-text-2);
}
.prose p, .sbvr-scene-about__prose p, .sbvr-pornstar-about__prose p,
.sbvr-category-about__body p, .sbvr-post__body p, .sbvr-legal-page p { margin: 0 0 16px; }
.prose h2, .sbvr-category-about__body h2, .sbvr-post__body h2, .sbvr-legal-page h2 {
	font-size: var(--sbvr-fs-h2); font-weight: 900; color: var(--sbvr-text); margin: 32px 0 12px;
}
.prose h2:first-child, .sbvr-post__body h2:first-child, .sbvr-legal-page h2:first-child { margin-top: 0; }
.prose h3, .sbvr-category-about__body h3, .sbvr-post__body h3, .sbvr-legal-page h3 {
	font-size: var(--sbvr-fs-h3); font-weight: 800; color: var(--sbvr-text); margin: 24px 0 10px;
}
.prose strong, .sbvr-scene-about__prose strong, .sbvr-pornstar-about__prose strong,
.sbvr-category-about__body strong, .sbvr-post__body strong, .sbvr-legal-page strong,
.sbvr-legal-page p strong, .sbvr-legal-page li strong {
	color: var(--sbvr-text); font-weight: 700;
}
.prose a, .sbvr-scene-about__prose a, .sbvr-pornstar-about__prose a,
.sbvr-category-about__body a, .sbvr-post__body a, .sbvr-legal-page p a { color: var(--sbvr-cyan); }
@media (hover: hover) {
	.prose a:hover, .sbvr-scene-about__prose a:hover, .sbvr-pornstar-about__prose a:hover,
	.sbvr-category-about__body a:hover, .sbvr-post__body a:hover, .sbvr-legal-page p a:hover {
		color: var(--sbvr-pink); text-decoration: underline;
	}
}
.prose ul, .sbvr-category-about__body ul, .sbvr-post__body ul, .sbvr-legal-page ul {
	padding-left: 16px; margin: 0 0 16px;
}
.prose ul li, .sbvr-category-about__body ul li, .sbvr-post__body ul li, .sbvr-legal-page ul li {
	margin-bottom: 6px;
}
.prose ul li::marker, .sbvr-category-about__body ul li::marker,
.sbvr-post__body ul li::marker, .sbvr-legal-page ul li::marker { color: var(--sbvr-cyan); }

/* canon 6 -- states, defined once */
.button:disabled, .button.disabled, .button[aria-disabled="true"],
input[type="submit"]:disabled, button:disabled {
	opacity: .45;
	pointer-events: none;
}
.sbvr-spin {
	width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--sbvr-text);
	display: inline-block; animation: sbvr-sp .7s linear infinite;
}
@keyframes sbvr-sp { to { transform: rotate(360deg); } }
input.sbvr-input--error, .sbvr-input--error input, form input.error {
	border-color: var(--sbvr-err-border) !important;
}
input.sbvr-input--success, .sbvr-input--success input {
	border-color: var(--sbvr-ok-border) !important;
}
.sbvr-field-msg--error { color: var(--sbvr-err); font-size: var(--sbvr-fs-meta); }
.sbvr-field-msg--success { color: var(--sbvr-ok); font-size: var(--sbvr-fs-meta); }

/* canon 8 -- reduced-motion law */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* canon 9 -- join chip onto the ladder (was 90, below in-page layers) */
.sbvr-join-chip { z-index: var(--sbvr-z-chips); }

/* canon 10 -- lock icon replaces the OS-dependent emoji on the free page */
.sbvr-ico-lock {
	width: 24px; height: 24px; display: inline-block;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center/contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center/contain no-repeat;
}
.sbvr-freepage__lock { color: var(--sbvr-text); }

/* canon 13 -- empty & edge states */
.empty-content {
	padding: 40px 16px;
	text-align: center;
	color: var(--sbvr-text-2);
	font-size: var(--sbvr-fs-body);
}
.sbvr-empty { padding: 40px 0 8px; }
.sbvr-empty__head { font-size: var(--sbvr-fs-h2); font-weight: 900; color: var(--sbvr-text); margin: 0 0 8px; }
.sbvr-empty__tip { color: var(--sbvr-text-2); margin: 0 0 20px; }
.sbvr-empty__cta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 24px; border-radius: var(--sbvr-r-pill);
	background: var(--sbvr-grad); color: var(--sbvr-text) !important;
	font-size: var(--sbvr-fs-btn); font-weight: 700; text-decoration: none;
}
/* the KVS generic empty line duplicates the designed state on the search page */
.search .main-container .empty-content { display: none; }
/* 404 onto canon: heading scale + primary pill */
.page-error .container h1 { font-size: var(--sbvr-fs-h1); font-weight: 900; margin-bottom: 16px; }
.page-error .container p { color: var(--sbvr-text-2); }
.page-error .button.sbvr-404-btn:not(.button.plain):not(.button.link) {
	border-radius: var(--sbvr-r-pill);
	background: var(--sbvr-grad);
	color: var(--sbvr-text) !important;
	font-size: var(--sbvr-fs-btn);
	font-weight: 700;
	text-transform: none;
}

/* -- #200 PHASE 7b -- OPERATOR REVIEW FIXES (2026-08-24 evening):
      1-3) the 72ch prose measure looked broken INSIDE boxed cards (pornstar about,
      scene about, category about) -- measure removed there (operator veto), kept on
      standalone editorial surfaces (legal pages, .prose, post bodies) where it reads
      right. 4) category deck: the original #138 zero-left-padding (text aligned to
      the grid edge) reads as a bug now that the deck is a visible card -- uniform
      padding + intro un-capped. 5) topbar Login/Join to 800 (operator: bolder).
      6) homepage free section at phone widths: one card per row, CTA becomes a
      deliberate full-width centered pill. */
.sbvr-scene-about__prose,
.sbvr-pornstar-about__prose,
.sbvr-category-about__body { max-width: none; }
.sbvr-category-deck { padding: 1.5rem; }
.sbvr-category-deck__intro { max-width: none; }
.top-bar .top-bar__buttons .button.plain,
.top-bar .top-bar__buttons .button.blue,
.side-bar__main-nav > a.button.blue,
.side-bar__main-nav .sbvr-mobile-login {
	font-weight: 800 !important;
}





/* ═══ #188 guides/blog section ═══════════════════════════════════════════════
   Ticket #188 — KVS Posts surfaces restyled to the approved mockup
   (_mockups/188-guides-section.html). Serves TWO post types:
     • guides — evergreen how-to articles  (/guides/)
     • blog   — editorial + scene-release gallery posts (/blog/)
   Templates:
     template/blocks/posts_list/list_posts_common_posts_list.tpl   (hub)
     template/blocks/view_post/post_view_post_view.tpl             (article)
   Self-contained: all tokens are scoped to .sbvr-hub / .sbvr-post so nothing
   leaks into the rest of the site. Dark theme only. Class prefix sbvr-.
   ⚠ .sbvr-chip is ALREADY TAKEN by the ops dashboard (main.css ~L25107) —
     the chips here are namespaced .sbvr-hub__chip / .sbvr-post__chip.
   ────────────────────────────────────────────────────────────────────────── */

.sbvr-hub,
.sbvr-post {

	font-family: var(--sbvr188-ff);
	color: var(--sbvr188-text);
}

.sbvr-hub *,
.sbvr-hub *::before,
.sbvr-hub *::after,
.sbvr-post *,
.sbvr-post *::before,
.sbvr-post *::after { box-sizing: border-box; }

.sbvr-hub a,
.sbvr-post a { text-decoration: none; }

/* --- shared bits ---------------------------------------------------------- */
.sbvr-hub__eyebrow,
.sbvr-post__eyebrow {
	display: inline-block;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sbvr188-text-2);
	line-height: 1.4;
}

.sbvr-hub__rule,
.sbvr-post__rule {
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--sbvr188-grad);
	margin: .55rem 0 0;
}

.sbvr-hub__chip,
.sbvr-post__chip {
	display: inline-flex;
	align-items: center;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: .36em .8em;
	border-radius: var(--sbvr188-pill);
	border: 1px solid currentColor;
	color: var(--sbvr188-text-3);
	line-height: 1.4;
	white-space: nowrap;
}
/* Nth-child tinting: categories are author-defined, so the accent rotates
   deterministically instead of being keyed to a hard-coded slug list. */
.sbvr-hub__card:nth-child(4n+1) .sbvr-hub__chip { color: var(--sbvr188-pink); background: rgba(255, 125, 224, .08); }
.sbvr-hub__card:nth-child(4n+2) .sbvr-hub__chip { color: var(--sbvr188-cyan); background: rgba(1, 181, 240, .08); }
.sbvr-hub__card:nth-child(4n+3) .sbvr-hub__chip { color: var(--sbvr188-mid);  background: rgba(139, 153, 232, .10); }
.sbvr-hub__card:nth-child(4n+4) .sbvr-hub__chip { color: #d7d7e2;             background: rgba(255, 255, 255, .05); }
.sbvr-post__chip { color: var(--sbvr188-pink); background: rgba(255, 125, 224, .08); }

/* Measure cap. Scoped to containers INSIDE these components only — never a
   bare `body.X .container` rule, which would shift the topbar hamburger
   (see reference_kvs_topbar_container_pitfall). Checked at 1920 and 3440. */
.sbvr-hub > .container,
.sbvr-post > .container { max-width: 1180px; }

/* ─── HUB (posts list) ───────────────────────────────────────────────────── */
.sbvr-hub { display: block; padding: 26px 0 56px; }

.sbvr-hub__hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--sbvr188-line);
	background: var(--sbvr188-bg-2);
	border-radius: var(--sbvr188-radius);
	padding: 64px 34px 56px;
	margin-bottom: 46px;
}
.sbvr-hub__hero::before,
.sbvr-hub__hero::after {
	content: "";
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .28;
}
.sbvr-hub__hero::before {
	width: 520px; height: 520px; left: -160px; top: -220px;
	background: radial-gradient(circle, #FF7DE0 0%, rgba(255, 125, 224, 0) 68%);
}
.sbvr-hub__hero::after {
	width: 600px; height: 600px; right: -200px; bottom: -320px;
	background: radial-gradient(circle, #01B5F0 0%, rgba(1, 181, 240, 0) 68%);
}
.sbvr-hub__hero-inner { position: relative; z-index: 1; }

.sbvr-hub__title {
	font-size: clamp(2rem, 5.2vw, 3.4rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 1.25rem 0 0;
	color: var(--sbvr188-text);
}
.sbvr-hub__sub {
	margin: 1.1rem 0 0;
	max-width: 62ch;
	font-size: clamp(1rem, 2.1vw, 1.12rem);
	line-height: 1.65;
	color: var(--sbvr188-text-2);
}

.sbvr-hub__head { margin-bottom: 34px; }
.sbvr-hub__head-title {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: .55rem 0 0;
	color: var(--sbvr188-text);
}

.sbvr-hub__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
@media (min-width: 1500px) { .sbvr-hub__grid { gap: 22px; } }

.sbvr-hub__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--sbvr188-surface);
	border: 1px solid var(--sbvr188-line);
	border-radius: var(--sbvr188-radius);
	padding: 24px 24px 22px;
	overflow: hidden;
	color: var(--sbvr188-text);
	transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.sbvr-hub__card::before {
	z-index: 1; /* #188b: stays above the cover photo */
	content: "";
	position: absolute; left: 0; top: 0; height: 2px;
	width: 34px;
	background: var(--sbvr188-grad);
	border-radius: 0 2px 2px 0;
	transition: width .28s cubic-bezier(.22, .8, .3, 1);
}
.sbvr-hub__card:hover {
	border-color: var(--sbvr188-line-2);
	background: var(--sbvr188-surface-2);
	transform: translateY(-2px);
}
.sbvr-hub__card:hover::before { width: 100%; }

/* #188b (2026-08-23): release-gallery cover photo on blog hub cards — bleeds to the card
   edges (padding-aware via --sbvr-hub-pad-*), 3:2 like the 600x400 pipeline thumbs, card
   radius clips the top corners (card has overflow:hidden). Guides cards stay text-only. */
.sbvr-hub__card { --sbvr-hub-pad-x: 24px; --sbvr-hub-pad-t: 24px; }
.sbvr-hub__cover {
	display: block;
	width: calc(100% + 2 * var(--sbvr-hub-pad-x));
	max-width: none;
	margin: calc(-1 * var(--sbvr-hub-pad-t)) calc(-1 * var(--sbvr-hub-pad-x)) 16px;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	background: var(--sbvr188-surface-2);
	border-bottom: 1px solid var(--sbvr188-line);
	transition: transform .35s cubic-bezier(.22, .8, .3, 1);
}
@media (hover: hover) {
	.sbvr-hub__card:hover .sbvr-hub__cover { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
	.sbvr-hub__cover { transition: none; }
	.sbvr-hub__card:hover .sbvr-hub__cover { transform: none; }
}
.sbvr-hub__card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	min-height: 22px;
}
.sbvr-hub__num {
	font-family: ui-monospace, "Consolas", monospace;
	font-size: .72rem;
	color: var(--sbvr188-text-3);
	letter-spacing: .08em;
}
.sbvr-hub__card-title {
	font-size: 1.14rem;
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -.02em;
	margin: 0 0 .55rem;
	color: var(--sbvr188-text);
}
.sbvr-hub__card-title a { color: inherit; }
.sbvr-hub__card:hover .sbvr-hub__card-title,
.sbvr-hub__card:hover .sbvr-hub__card-title a {
	background: var(--sbvr188-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sbvr-hub__desc {
	color: var(--sbvr188-text-2);
	font-size: .925rem;
	line-height: 1.6;
	margin: 0 0 16px;
}
.sbvr-hub__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sbvr188-text-3);
	padding-top: 14px;
	border-top: 1px solid var(--sbvr188-line);
}
.sbvr-hub__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sbvr188-text-3); flex: none; }
.sbvr-hub__arrow { margin-left: auto; color: var(--sbvr188-text-2); font-size: 1rem; letter-spacing: 0; }
.sbvr-hub__card:hover .sbvr-hub__arrow { color: var(--sbvr188-pink); }

.sbvr-hub__empty {
	border: 1px solid var(--sbvr188-line);
	border-radius: var(--sbvr188-radius);
	background: var(--sbvr188-surface);
	padding: 48px 24px;
	text-align: center;
	color: var(--sbvr188-text-2);
}
.sbvr-hub__pager { margin-top: 34px; }

/* ─── ARTICLE (post view) ────────────────────────────────────────────────── */
.sbvr-post { display: block; padding: 0 0 56px; }
.sbvr-post__wrap { max-width: 940px; margin: 0 auto; }

.sbvr-post__crumbs {
	padding: 20px 0 0;
	font-size: .8rem;
	color: var(--sbvr188-text-3);
}
.sbvr-post__crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .45em;
}
.sbvr-post__crumbs li::after { content: "\203A"; margin-left: .45em; color: var(--sbvr188-text-3); }
.sbvr-post__crumbs li:last-child::after { content: ""; }
.sbvr-post__crumbs a { color: var(--sbvr188-text-2); }
.sbvr-post__crumbs a:hover { color: var(--sbvr188-pink); }
.sbvr-post__crumbs [aria-current] { color: var(--sbvr188-text-3); }

.sbvr-post__head {
	padding: 26px 0 34px;
	border-bottom: 1px solid var(--sbvr188-line);
}
.sbvr-post__title {
	font-size: clamp(1.85rem, 4.4vw, 2.85rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 1.1rem 0 1.05rem;
	color: var(--sbvr188-text);
}
.sbvr-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: .82rem;
	color: var(--sbvr188-text-3);
	font-weight: 600;
	letter-spacing: .04em;
}
.sbvr-post__sep { color: var(--sbvr188-line-2); }

.sbvr-post__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	padding: 44px 0 20px;
	align-items: start;
}
/* Two-column only once the TOC actually has entries. The TOC is built by the
   inline script in the article template; when it finds fewer than two headings
   it leaves the list empty and this rule never fires — no orphan column. */
.sbvr-post__layout:has(.sbvr-post__toc li) {
	grid-template-columns: 250px minmax(0, 1fr);
}
@media (max-width: 960px) {
	.sbvr-post__layout,
	.sbvr-post__layout:has(.sbvr-post__toc li) {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-top: 30px;
	}
}
.sbvr-post__aside:empty { display: none; }

.sbvr-post__toc {
	position: sticky;
	top: 24px;
	background: var(--sbvr188-surface);
	border: 1px solid var(--sbvr188-line);
	border-radius: var(--sbvr188-radius);
	padding: 20px 20px 18px;
}
.sbvr-post__toc:not(:has(li)) { display: none; }
.sbvr-post__toc-title {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sbvr188-text-3);
	margin: 0 0 14px;
}
.sbvr-post__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: sbvr188toc; }
.sbvr-post__toc li { counter-increment: sbvr188toc; margin-bottom: .55rem; }
.sbvr-post__toc li:last-child { margin-bottom: 0; }
.sbvr-post__toc a {
	display: flex;
	gap: .6em;
	font-size: .87rem;
	line-height: 1.4;
	color: var(--sbvr188-text-2);
	border-left: 2px solid transparent;
	padding-left: .7em;
	margin-left: -.7em;
	transition: color .18s ease, border-color .18s ease;
}
.sbvr-post__toc a::before {
	content: counter(sbvr188toc, decimal-leading-zero);
	font-family: ui-monospace, "Consolas", monospace;
	font-size: .72rem;
	color: var(--sbvr188-text-3);
	flex: none;
	padding-top: .15em;
}
.sbvr-post__toc a:hover { color: #fff; border-left-color: var(--sbvr188-pink); }
@media (max-width: 960px) { .sbvr-post__toc { position: static; } }

/* --- article body (prose) ------------------------------------------------- */
/* 2026-08-17 operator: full width after the TOC column (was 72ch). */
.sbvr-post__body {
	font-size: 1.03rem;
	line-height: 1.78;
	color: var(--sbvr188-text-2);
}
.sbvr-post__body > *:first-child { margin-top: 0; }
.sbvr-post__body p { margin: 0 0 1.05em; }
.sbvr-post__body h2 {
	font-size: clamp(1.3rem, 3vw, 1.65rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--sbvr188-text);
	margin: 2.4rem 0 .9rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid var(--sbvr188-line);
	scroll-margin-top: 24px;
	position: relative;
}
/* the gradient rule from the mockup, without asking the author for extra markup */
.sbvr-post__body h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--sbvr188-grad);
}
.sbvr-post__body h3 {
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--sbvr188-text);
	margin: 1.9rem 0 .6rem;
}
.sbvr-post__body strong,
.sbvr-post__body b { color: var(--sbvr188-text); font-weight: 700; }
.sbvr-post__body a {
	color: var(--sbvr188-cyan);
	border-bottom: 1px solid rgba(1, 181, 240, .35);
}
.sbvr-post__body a:hover { color: var(--sbvr188-pink); border-bottom-color: rgba(255, 125, 224, .5); }
/* main.css strips list markers site-wide — put them back inside the prose. */
.sbvr-post__body ul { list-style: disc; }
.sbvr-post__body ol { list-style: decimal; }
.sbvr-post__body ul,
.sbvr-post__body ol { margin: 0 0 1.15em; padding-left: 1.25em; }
.sbvr-post__body li { margin-bottom: .45em; }
.sbvr-post__body ul li::marker { color: var(--sbvr188-pink); }
.sbvr-post__body blockquote {
	margin: 1.6rem 0;
	padding: 0 0 0 1.1rem;
	border-left: 3px solid var(--sbvr188-line-2);
	color: var(--sbvr188-text-2);
	font-style: italic;
}
.sbvr-post__body hr { border: 0; border-top: 1px solid var(--sbvr188-line); margin: 2.2rem 0; }
.sbvr-post__body table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .95rem; }
.sbvr-post__body th,
.sbvr-post__body td { padding: .6em .8em; border: 1px solid var(--sbvr188-line); text-align: left; }
.sbvr-post__body th { color: var(--sbvr188-text); background: var(--sbvr188-surface); }

/* numbered steps — authors add class="sbvr-steps" to an <ol> in the body */
.sbvr-post__body ol.sbvr-steps {
	list-style: none;
	counter-reset: sbvr188step;
	margin: 1.5rem 0 1.8rem;
	padding: 0;
}
.sbvr-post__body ol.sbvr-steps > li {
	counter-increment: sbvr188step;
	position: relative;
	padding: 0 0 1.15rem 3.3rem;
	margin: 0;
}
.sbvr-post__body ol.sbvr-steps > li:last-child { padding-bottom: 0; }
.sbvr-post__body ol.sbvr-steps > li::before {
	content: counter(sbvr188step);
	position: absolute;
	left: 0;
	top: .05rem;
	width: 2.15rem;
	height: 2.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--sbvr188-grad);
	color: #0b0b0d;
	font-size: .9rem;
	font-weight: 900;
}
.sbvr-post__body ol.sbvr-steps > li::after {
	content: "";
	position: absolute;
	left: 1.07rem;
	top: 2.4rem;
	bottom: .35rem;
	width: 1px;
	background: var(--sbvr188-line-2);
}
.sbvr-post__body ol.sbvr-steps > li:last-child::after { display: none; }
.sbvr-post__body ol.sbvr-steps b { display: block; color: var(--sbvr188-text); font-weight: 700; margin-bottom: .15rem; }

/* tip callout — authors add class="sbvr-callout" to a <div>/<aside> in the body */
.sbvr-post__body .sbvr-callout {
	position: relative;
	background: var(--sbvr188-surface);
	border: 1px solid var(--sbvr188-line);
	border-radius: var(--sbvr188-radius-sm);
	padding: 20px 22px 18px;
	margin: 1.8rem 0;
	overflow: hidden;
}
.sbvr-post__body .sbvr-callout::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--sbvr188-grad);
}
.sbvr-post__body .sbvr-callout__label {
	display: block;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin-bottom: .5rem;
	background: var(--sbvr188-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sbvr-post__body .sbvr-callout p { font-size: .95rem; color: var(--sbvr188-text-2); }
.sbvr-post__body .sbvr-callout p:last-child { margin-bottom: 0; }

/* FAQ — any native <details> in the body picks this up, no extra classes needed */
.sbvr-post__body details {
	background: var(--sbvr188-surface);
	border: 1px solid var(--sbvr188-line);
	border-radius: var(--sbvr188-radius-sm);
	margin-bottom: 10px;
	overflow: hidden;
}
.sbvr-post__body details[open] { border-color: var(--sbvr188-line-2); background: var(--sbvr188-surface-2); }
.sbvr-post__body summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 52px 16px 20px;
	position: relative;
	font-size: 1rem;
	font-weight: 700;
	color: var(--sbvr188-text);
	line-height: 1.45;
}
.sbvr-post__body summary::-webkit-details-marker { display: none; }
.sbvr-post__body summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -7px;
	border-right: 2px solid var(--sbvr188-pink);
	border-bottom: 2px solid var(--sbvr188-cyan);
	transform: rotate(45deg);
	transition: transform .22s ease;
}
.sbvr-post__body details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.sbvr-post__body details > *:not(summary) {
	padding: 0 20px 18px;
	color: var(--sbvr188-text-2);
	font-size: .95rem;
	line-height: 1.7;
}

/* --- gallery (blog scene-release posts) ----------------------------------- */
/* Every image in a post body is responsive by default. */
.sbvr-post__body img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--sbvr188-radius-sm);
	border: 1px solid var(--sbvr188-line);
}
.sbvr-post__body figure { margin: 1.8rem 0; }
.sbvr-post__body figcaption {
	margin-top: .6rem;
	font-size: .82rem;
	color: var(--sbvr188-text-3);
}
/* Authors wrap a run of screenshots in <div class="sbvr-post-gallery"> …
   (TinyMCE source view). No JS — pure grid, square-ish auto-fill tiles. */
.sbvr-post-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin: 1.8rem 0;
	padding: 0;
	list-style: none;
}
.sbvr-post-gallery > * { margin: 0; min-width: 0; }
.sbvr-post-gallery a { display: block; border-bottom: 0; }
.sbvr-post-gallery img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .2s ease, border-color .2s ease;
}
.sbvr-post-gallery a:hover img { transform: translateY(-2px); border-color: var(--sbvr188-line-2); }
/* Blog posts are gallery-heavy: give the body a wider measure so the grid
   is not squeezed into the 72ch prose column. */
.sbvr-post__body--gallery { max-width: none; }
@media (max-width: 600px) {
	.sbvr-post-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
}

/* 2026-08-17 operator: blog gallery posts match the /gallery-samples/ look —
   no TOC, single full-width column, 4-across rounded 3:2 tiles with zoom hover. */
.sbvr-post__layout:has(.sbvr-post__body--gallery .sbvr-post-gallery),
.sbvr-post__layout:has(.sbvr-post__body--gallery) { grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
.sbvr-post__layout:has(.sbvr-post__body--gallery) .sbvr-post__toc { display: none; }
.sbvr-post__body--gallery .sbvr-post-gallery {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.sbvr-post__body--gallery .sbvr-post-gallery a {
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}
.sbvr-post__body--gallery .sbvr-post-gallery img {
	aspect-ratio: 3 / 2;
	border-radius: 8px;
	transition: transform .25s ease;
}
.sbvr-post__body--gallery .sbvr-post-gallery a:hover img { transform: scale(1.04); }
@media (max-width: 760px) {
	.sbvr-post__body--gallery .sbvr-post-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 2026-08-17 operator: gallery-post bottom matches /gallery-samples/ —
   gradient scene CTA pill, model card with stat pills, category pills. */
.sbvr-post__body .sbvr-gcta {
	display: block;
	text-align: center;
	margin: 2rem auto;
	max-width: 520px;
	background: linear-gradient(135deg, #FF7DE0 0%, #01B5F0 100%);
	color: #fff !important;
	font-weight: 800;
	font-size: 1.06rem;
	padding: 16px 28px;
	border-radius: 999px;
	border-bottom: 0;
	box-shadow: 0 6px 24px rgba(255, 125, 224, .25);
}
.sbvr-post__body .sbvr-gcta:hover { color: #fff; border-bottom: 0; filter: brightness(1.06); }
.sbvr-post__body .sbvr-gcta small {
	display: block;
	font-weight: 400;
	font-size: .78rem;
	opacity: .92;
	margin-top: 3px;
}
.sbvr-post__body .sbvr-modelcard {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	flex-wrap: wrap;
	background: var(--sbvr188-surface, #16181f);
	border: 1px solid var(--sbvr188-line, #262a35);
	border-radius: 12px;
	padding: 20px;
	margin: 2rem 0;
}
.sbvr-post__body .sbvr-modelcard > a { border-bottom: 0; flex: 0 0 auto; }
.sbvr-post__body .sbvr-modelcard img {
	width: 150px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 10px;
	background: #000;
	margin: 0;
}
.sbvr-post__body .sbvr-modelcard > div { flex: 1 1 300px; min-width: 0; }
.sbvr-post__body .sbvr-modelcard h3 { margin: 0 0 .4rem; font-size: 1.25rem; }
.sbvr-post__body .sbvr-modelcard h3::after { display: none; }
.sbvr-post__body .sbvr-modelcard p { margin: 0; font-size: .95rem; }
.sbvr-post__body .sbvr-modelcard .sbvr-statpills { margin: 0 0 .7rem; }
.sbvr-post__body .sbvr-statpill,
.sbvr-post__body .sbvr-statpills span {
	display: inline-block;
	background: var(--sbvr188-surface-2, #1c1f28);
	border: 1px solid var(--sbvr188-line, #262a35);
	border-radius: 6px;
	padding: 3px 10px;
	font-size: .78rem;
	color: var(--sbvr188-text-3, #9aa0ae);
	margin: 0 6px 6px 0;
}
.sbvr-post__body .sbvr-catpills { margin: 1rem 0 0; }
.sbvr-post__body .sbvr-catpills a {
	display: inline-block;
	background: var(--sbvr188-surface-2, #1c1f28);
	border: 1px solid var(--sbvr188-line, #262a35);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: .9rem;
	color: var(--sbvr188-text, #e8eaf0);
	border-bottom-width: 1px;
	margin: 0 8px 10px 0;
}
.sbvr-post__body .sbvr-catpills a:hover { border-color: #FF7DE0; color: #fff; }
.sbvr-post__body .sbvr-friends-note { font-style: italic; color: var(--sbvr188-text-3, #9aa0ae); }

/* --- CTA ------------------------------------------------------------------ */
/* Canonical component is .sbvr-cta-trail (main.css). This is a SKIN modifier
   only — gradient frame from the mockup, no structural overrides. */
/* The gradient FRAME lives on the wrapper, the inner fill on the component —
   the mockup's .cta / .cta__inner pair. Deliberately NO pseudo-element: the
   base .sbvr-cta-trail is position:static, so an absolutely-positioned ::after
   resolved against the wrong ancestor and blanketed the whole article
   (caught in Docker 2026-08-15). Two real boxes cannot do that. */
.sbvr-post__cta {
	margin: 56px 0 10px;
	border-radius: 20px;
	padding: 2px;
	background: linear-gradient(135deg, #FF7DE0 0%, #01B5F0 100%);
}
.sbvr-cta-trail--post,
.sbvr-cta-trail--post:hover {
	margin: 0;
	border: 0;
	border-radius: 18px;
	padding: 30px 32px;
	background: linear-gradient(135deg, rgba(255, 125, 224, .10) 0%, rgba(1, 181, 240, .10) 100%), #101015;
}
@media (max-width: 600px) {
	.sbvr-cta-trail--post,
	.sbvr-cta-trail--post:hover { padding: 24px 20px; }
}

/* --- related / keep reading ----------------------------------------------- */
.sbvr-post__related {
	padding: 56px 0 10px;
	border-top: 1px solid var(--sbvr188-line);
	margin-top: 56px;
}
.sbvr-post__related-title {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: .9rem 0 0;
	color: var(--sbvr188-text);
}
.sbvr-post__related-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 26px;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
	.sbvr-post__related-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
	.sbvr-hub__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.sbvr-hub__hero { padding: 44px 20px 40px; margin-bottom: 34px; }
	.sbvr-hub__card { padding: 20px 18px 18px; --sbvr-hub-pad-x: 18px; --sbvr-hub-pad-t: 20px; }
	.sbvr-post__title { max-width: none; }
}

/* --- a11y / motion -------------------------------------------------------- */
.sbvr-hub a:focus-visible,
.sbvr-post a:focus-visible,
.sbvr-post summary:focus-visible {
	outline: 2px solid var(--sbvr188-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
	.sbvr-hub *,
	.sbvr-post * { transition: none !important; animation: none !important; }
}
/* ═══ end #188 guides/blog section ═══════════════════════════════════════ */

/* ═══ #196 free-vr-porn page (2026-08-18, redesigned same day per operator
   feedback: calmer type, more air, slimmer CTAs, spacing matched to the #188
   hub/post pages — same tokens, same 1180px measure, same hero treatment). */
.sbvr-freepage {
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	color: var(--sbvr188-text);
	display: block;
	padding: 26px 0 56px;
}
.sbvr-freepage *,
.sbvr-freepage *::before,
.sbvr-freepage *::after { box-sizing: border-box; }
.sbvr-freepage a { text-decoration: none; }
/* Measure cap — same 1180px as .sbvr-hub/.sbvr-post, scoped INSIDE the page
   element (never bare body.X .container — topbar hamburger pitfall). */
.sbvr-freepage > .container { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* ── hero (mirrors .sbvr-hub__hero) ─────────────────────────────────── */
.sbvr-freepage__hero {
	position: relative;
	overflow: hidden;
	background: var(--sbvr188-bg-2);
	border: 1px solid var(--sbvr188-line);
	border-radius: var(--sbvr188-radius);
	padding: 52px 36px 48px;
	margin: 0 0 46px;
	max-width: none;
}
.sbvr-freepage__hero::before,
.sbvr-freepage__hero::after {
	content: "";
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .26;
}
.sbvr-freepage__hero::before { width: 480px; height: 480px; left: -150px; top: -210px; background: radial-gradient(circle, #FF7DE0 0%, rgba(255,125,224,0) 68%); }
.sbvr-freepage__hero::after  { width: 560px; height: 560px; right: -190px; bottom: -300px; background: radial-gradient(circle, #01B5F0 0%, rgba(1,181,240,0) 68%); }
.sbvr-freepage__eyebrow {
	position: relative; z-index: 1;
	display: inline-block;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sbvr188-text-2);
}
.sbvr-freepage__hero h1 {
	position: relative; z-index: 1;
	font-size: clamp(1.7rem, 3.2vw, 2.45rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.02em;
	margin: .9rem 0 0;
}
.sbvr-freepage__sub {
	position: relative; z-index: 1;
	color: var(--sbvr188-text-2);
	font-size: clamp(.95rem, 1.6vw, 1.05rem);
	line-height: 1.7;
	max-width: 68ch;
	margin: 1rem 0 0;
}

.sbvr-freepage__notice {
	background: var(--sbvr188-surface);
	border: 1px solid var(--sbvr188-line);
	border-left: 3px solid #01B5F0;
	border-radius: 10px;
	padding: 16px 20px;
	margin: 0 0 32px;
	line-height: 1.6;
}
.sbvr-freepage__notice--ok { border-left-color: #46d17f; }

/* section heading shared with the gated wrap */
.sbvr-freepage__secthead {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0 0 18px;
}

/* ── flagship ───────────────────────────────────────────────────────── */
.sbvr-freepage__flagship {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 32px;
	background: var(--sbvr188-surface);
	border: 1px solid var(--sbvr188-line);
	border-radius: var(--sbvr188-radius);
	padding: 28px;
	margin: 0 0 56px;
}
/* Player container = the scene page's working recipe (main.css
   .video-detail__video--container): 16/10 reserved space, position relative,
   and NO positioning rules on dl8-video itself — DL8 sizes its own layout,
   and forcing absolute/inset on it zeroed its height and broke the renderer
   init (the raw-SBS fallback seen at first launch 2026-08-19). */
.sbvr-freepage__player {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
	text-align: center;
	cursor: pointer;
	align-self: start;
}
.sbvr-freepage__flaginfo { padding: 6px 4px 0 0; }
.sbvr-freepage__flaginfo h2,
.sbvr-freepage__flaginfo h3 {
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 0;
}
.sbvr-freepage__model {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	color: var(--sbvr188-text-3);
	margin: 6px 0 0;
}
.sbvr-freepage__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.sbvr-freepage__flaginfo > p { color: var(--sbvr188-text-2); font-size: .92rem; line-height: 1.65; margin: 18px 0 0; }
.sbvr-freepage__hint { font-size: .8rem; color: var(--sbvr188-text-3); line-height: 1.65; margin: 16px 0 0; }
.sbvr-freepage__hint a { color: #01B5F0; }
.sbvr-freepage__hint a:hover { color: #FF7DE0; }

/* download buttons — slim pills, quiet by default, gradient only on the hero */
.sbvr-freepage__dlrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; }
.sbvr-freepage__dlbtn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 8px 18px;
	border-radius: var(--sbvr188-pill);
	border: 1px solid var(--sbvr188-line-2);
	background: var(--sbvr188-surface-2);
	color: var(--sbvr188-text);
	font-weight: 700;
	font-size: .82rem;
	line-height: 1.35;
	text-align: center;
	transition: border-color .18s ease, transform .18s ease;
}
.sbvr-freepage__dlbtn small { font-weight: 500; font-size: .66rem; color: var(--sbvr188-text-3); }
.sbvr-freepage__dlbtn,
.sbvr-freepage__dlbtn:hover { color: #fff !important; }
.sbvr-freepage__dlbtn:hover { border-color: #FF7DE0; transform: translateY(-1px); }
.sbvr-freepage__dlbtn:active { transform: translateY(0); }
/* hero CTA = canonical #109b liquid-rise (white on gradient, cyan ::after
   rises on hover, 2px lift, pink→cyan glow — the topbar JOIN NOW pattern) */
.sbvr-freepage__dlbtn--hero {
	position: relative;
	overflow: hidden;
	z-index: 0;
	background: var(--sbvr188-grad);
	color: #fff !important;
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(255, 125, 224, .3) !important;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbvr-freepage__dlbtn--hero small { color: rgba(255, 255, 255, .78); }
.sbvr-freepage__dlbtn--hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 100%;
	background: #01B5F0;
	transform: translateY(100%);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
	z-index: -1;
	border-radius: inherit;
}
.sbvr-freepage__dlbtn--hero:hover { transform: translateY(-2px); border-color: transparent; box-shadow: 0 8px 24px rgba(1, 181, 240, .45) !important; }
.sbvr-freepage__dlbtn--hero:hover::after { transform: translateY(0); }
.sbvr-freepage__dlbtn--hero:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(1, 181, 240, .4) !important; }

/* ── gated grid ─────────────────────────────────────────────────────── */
.sbvr-freepage__gatedwrap { margin: 0 0 56px; }
.sbvr-freepage__gatedwrap h2 {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0 0 12px;
}
.sbvr-freepage__gatedsub { color: var(--sbvr188-text-2); font-size: .95rem; line-height: 1.65; margin: 0 0 26px; }
.sbvr-freepage__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sbvr-freepage__card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--sbvr188-surface);
	border: 1px solid var(--sbvr188-line);
	border-radius: var(--sbvr188-radius);
	padding: 16px 16px 18px;
	transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
/* hub-card hover signature (#188): gradient hairline grows across the top */
.sbvr-freepage__card::before {
	content: "";
	position: absolute; left: 0; top: 0; height: 2px;
	width: 34px;
	background: var(--sbvr188-grad);
	border-radius: 0 2px 2px 0;
	transition: width .28s cubic-bezier(.22, .8, .3, 1);
	z-index: 1;
}
.sbvr-freepage__card:hover { border-color: var(--sbvr188-line-2); background: var(--sbvr188-surface-2); transform: translateY(-2px); }
.sbvr-freepage__card:hover::before { width: 100%; }
.sbvr-freepage__card .sbvr-freepage__thumb img { transition: filter .25s ease, transform .3s ease; }
.sbvr-freepage__card:hover .sbvr-freepage__thumb img { transform: scale(1.03); }
.sbvr-freepage__card.is-locked:hover .sbvr-freepage__thumb img { filter: brightness(.62) saturate(.95); }
.sbvr-freepage__card h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; margin: 14px 0 0; }
.sbvr-freepage__card .sbvr-freepage__model { font-size: .8rem; margin: 3px 0 0; }
.sbvr-freepage__card .sbvr-freepage__pills { margin: 12px 0 14px; }
.sbvr-freepage__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; }
.sbvr-freepage__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbvr-freepage__card.is-locked .sbvr-freepage__thumb img { filter: brightness(.5) saturate(.85); }
.sbvr-freepage__lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.sbvr-freepage__unlockbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	z-index: 0;
	margin-top: auto;
	padding: 9px 18px;
	border-radius: var(--sbvr188-pill);
	background: var(--sbvr188-grad);
	color: #fff !important;
	font-weight: 700;
	font-size: .82rem;
	box-shadow: 0 4px 14px rgba(255, 125, 224, .3) !important;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbvr-freepage__unlockbtn::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 100%;
	background: #01B5F0;
	transform: translateY(100%);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
	z-index: -1;
	border-radius: inherit;
}
.sbvr-freepage__unlockbtn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(1, 181, 240, .45) !important; }
.sbvr-freepage__unlockbtn:hover::after { transform: translateY(0); }
.sbvr-freepage__unlockbtn:active { transform: translateY(0); }
.sbvr-freepage__card .sbvr-freepage__dlrow { margin-top: auto; gap: 8px; }
.sbvr-freepage__card .sbvr-freepage__dlbtn { flex: 1; padding: 7px 10px; font-size: .78rem; }

/* ── the gate (mirrors the hero card) ───────────────────────────────── */
.sbvr-freepage__gate {
	/* anchor-jump landing offset: the section title must stop clear of the
	   topbar (site scrolls .main-content, so the JS uses scrollIntoView,
	   which honors this) */
	scroll-margin-top: 96px;
	position: relative;
	overflow: hidden;
	background: var(--sbvr188-bg-2);
	border: 1px solid var(--sbvr188-line);
	border-radius: var(--sbvr188-radius);
	padding: 48px 36px 44px;
	margin: 0 0 56px;
	text-align: center;
}
.sbvr-freepage__gate::before {
	content: "";
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .22;
	width: 520px; height: 520px; left: 50%; top: -300px; transform: translateX(-50%);
	background: radial-gradient(circle, #FF7DE0 0%, rgba(255,125,224,0) 68%);
}
.sbvr-freepage__gate > * { position: relative; z-index: 1; }
.sbvr-freepage__gate h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.sbvr-freepage__gate > p { color: var(--sbvr188-text-2); font-size: .95rem; line-height: 1.65; max-width: 54ch; margin: 0 auto 26px; }
.sbvr-freepage__form { display: flex; gap: 12px; max-width: 520px; margin: 0 auto; }
.sbvr-freepage__form input[type=email] {
	flex: 1;
	min-width: 0;
	background: rgba(0, 0, 0, .45);
	color: var(--sbvr188-text);
	border: 1px solid var(--sbvr188-line-2);
	border-radius: var(--sbvr188-pill);
	padding: 12px 20px;
	font-size: .95rem;
	font-family: inherit;
	outline: none;
	transition: border-color .18s ease;
}
.sbvr-freepage__form input[type=email]:focus { border-color: #FF7DE0; }
.sbvr-freepage__form button {
	position: relative;
	overflow: hidden;
	z-index: 0;
	border: 0;
	border-radius: var(--sbvr188-pill);
	padding: 12px 24px;
	font-size: .9rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	background: var(--sbvr188-grad);
	color: #fff;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(255, 125, 224, .3) !important;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbvr-freepage__form button::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 100%;
	background: #01B5F0;
	transform: translateY(100%);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
	z-index: -1;
	border-radius: inherit;
}
.sbvr-freepage__form button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(1, 181, 240, .45) !important; }
.sbvr-freepage__form button:hover::after { transform: translateY(0); }
.sbvr-freepage__form button:active { transform: translateY(0); }
.sbvr-freepage__hp { position: absolute; left: -9999px; top: -9999px; }
.sbvr-freepage__consent { font-size: .74rem; color: var(--sbvr188-text-3); line-height: 1.7; max-width: 60ch; margin: 18px auto 0; }
.sbvr-freepage__consent a { color: #01B5F0; }
.sbvr-freepage__consent a:hover { color: #FF7DE0; }
.sbvr-freepage__formok { margin: 18px auto 0; max-width: 54ch; line-height: 1.6; }

/* ── join CTA + FAQ ─────────────────────────────────────────────────── */
/* join CTA — gradient frame (the #188 --post treatment) + de-blue the
   canonical component's inner bits (the base .sbvr-cta-trail in main.css
   still carries the pre-rebrand #0084ff family). */
.sbvr-freepage__join {
	margin: 0 0 56px;
	border-radius: 20px;
	padding: 2px;
	background: var(--sbvr188-grad);
}
.sbvr-freepage__join .sbvr-cta-trail,
.sbvr-freepage__join .sbvr-cta-trail:hover {
	margin: 0;
	border: 0;
	border-radius: 18px;
	padding: 30px 32px;
	background: linear-gradient(135deg, rgba(255, 125, 224, .10) 0%, rgba(1, 181, 240, .10) 100%), #101015;
}
.sbvr-freepage__join .sbvr-cta-trail__icon { background: rgba(255, 125, 224, .12); color: #FF7DE0; }
.sbvr-freepage__join .sbvr-cta-trail__count { color: #01B5F0; }
.sbvr-freepage__join .sbvr-cta-trail__btn { border-color: rgba(1, 181, 240, .55); color: #01B5F0; }
.sbvr-freepage__join .sbvr-cta-trail__btn:hover { background: #01B5F0; color: #0b0b0c; }
@media (max-width: 600px) {
	.sbvr-freepage__join .sbvr-cta-trail,
	.sbvr-freepage__join .sbvr-cta-trail:hover { padding: 24px 20px; }
}
.sbvr-freepage__faq h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; }
.sbvr-freepage__faq details {
	background: var(--sbvr188-surface);
	border: 1px solid var(--sbvr188-line);
	border-radius: 10px;
	margin: 0 0 10px;
	transition: border-color .2s ease;
}
.sbvr-freepage__faq details:hover { border-color: var(--sbvr188-line-2); }
.sbvr-freepage__faq details[open] { border-color: var(--sbvr188-line-2); background: var(--sbvr188-surface-2); }
.sbvr-freepage__faq summary {
	position: relative;
	cursor: pointer;
	font-weight: 700;
	font-size: 1rem;
	padding: 16px 52px 16px 20px;
	list-style: none;
}
.sbvr-freepage__faq summary::-webkit-details-marker { display: none; }
.sbvr-freepage__faq summary::after {
	content: "";
	position: absolute;
	right: 20px; top: 50%;
	width: 9px; height: 9px;
	border-right: 2px solid #01B5F0;
	border-bottom: 2px solid #FF7DE0;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .25s ease;
}
.sbvr-freepage__faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.sbvr-freepage__faq details > div { padding: 0 20px 18px; color: var(--sbvr188-text-2); font-size: .95rem; line-height: 1.7; }
.sbvr-freepage__faq details a { color: #01B5F0; }
.sbvr-freepage__faq details a:hover { color: #FF7DE0; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.sbvr-freepage__flagship { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.sbvr-freepage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbvr-freepage__hero { padding: 40px 24px 36px; }
	.sbvr-freepage__gate { padding: 38px 24px 34px; }
}
@media (max-width: 600px) {
	.sbvr-freepage__hero { padding: 44px 20px 40px; margin-bottom: 34px; }
	.sbvr-freepage__card { padding: 14px 14px 16px; }
	.sbvr-freepage__flagship,
	.sbvr-freepage__gatedwrap,
	.sbvr-freepage__gate,
	.sbvr-freepage__join { margin-bottom: 44px; }
}
@media (max-width: 560px) {
	.sbvr-freepage__grid { grid-template-columns: minmax(0, 1fr); }
	.sbvr-freepage__form { flex-direction: column; }
	.sbvr-freepage__flagship { padding: 18px; }
	.sbvr-freepage__gate { padding: 30px 18px 28px; }
}
.sbvr-freepage a:focus-visible,
.sbvr-freepage summary:focus-visible,
.sbvr-freepage button:focus-visible {
	outline: 2px solid #01B5F0;
	outline-offset: 3px;
	border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
	.sbvr-freepage * { transition: none !important; animation: none !important; }
}
/* ═══ end #196 free-vr-porn page ═════════════════════════════════════════ */

/* ═══ #196b free-page discovery surfaces (2026-08-19, v2 same day per
   operator feedback: match the sibling homepage sections exactly).
   Anatomy per the audited spec: section carries 60px vertical margins
   (like .models = 3.75rem 0); .container gives only gutters; the headline
   row + grid each carry the site-wide 1760px cap; headline = flat h2
   1.5rem/900 in a flex row (the .videos__top pattern); UNBOXED (siblings
   have no card chrome); grid wraps ALL cards at every width (site rule:
   never hide cards — auto-fit ladder mirrors the models strip). */
.sbvr-freesec {
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	color: var(--sbvr188-text);
	display: block;
	margin: 3.75rem 0;
	position: relative;
}
.sbvr-freesec *,
.sbvr-freesec *::before,
.sbvr-freesec *::after { box-sizing: border-box; }
.sbvr-freesec a { text-decoration: none; }

/* headline row — the .videos__top pattern (flex, space-between, mb 1.5rem),
   with the sub-line eating into that gap so the total stays on rhythm */
.sbvr-freesec__top {
	max-width: 1760px;
	margin: 0 auto 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px 20px;
}
.sbvr-freesec__top h2 {
	font-size: 1.5rem;
	font-weight: 900;
	color: #fff;
	margin: 0;
	line-height: 1.2;
}
.sbvr-freesec__sub {
	max-width: 1760px;
	margin: 0 auto 1.5rem;
	color: var(--sbvr188-text-2);
	font-size: .95rem;
	line-height: 1.6;
}
.sbvr-freesec__btn {
	position: relative;
	overflow: hidden;
	z-index: 0;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: var(--sbvr188-pill);
	background: var(--sbvr188-grad);
	color: #fff !important;
	font-weight: 700;
	font-size: .9rem;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(255, 125, 224, .3) !important;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbvr-freesec__btn::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 100%;
	background: #01B5F0;
	transform: translateY(100%);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
	z-index: -1;
	border-radius: inherit;
}
.sbvr-freesec__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(1, 181, 240, .45) !important; }
.sbvr-freesec__btn:hover::after { transform: translateY(0); }
.sbvr-freesec__btn:focus-visible { outline: 2px solid #01B5F0; outline-offset: 3px; }

/* grid — models-strip ladder (auto-fit wraps ALL 5 cards, none hidden) */
.sbvr-freesec__grid {
	max-width: 1760px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
	gap: 1rem;
}
.sbvr-freesec__card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--sbvr188-surface);
	border: 1px solid var(--sbvr188-line);
	border-radius: 12px;
	padding: 10px 10px 12px;
	color: var(--sbvr188-text);
	transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.sbvr-freesec__card:hover { border-color: var(--sbvr188-line-2); background: var(--sbvr188-surface-2); transform: translateY(-2px); }
.sbvr-freesec__card:focus-visible { outline: 2px solid #01B5F0; outline-offset: 3px; }
.sbvr-freesec__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	margin: 0 0 8px;
}
.sbvr-freesec__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.sbvr-freesec__card:hover .sbvr-freesec__thumb img { transform: scale(1.04); }
.sbvr-freesec__badge {
	display: inline-block;
	align-self: flex-start;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .3em .8em;
	border-radius: var(--sbvr188-pill);
	background: var(--sbvr188-grad);
	color: #fff;
}
.sbvr-freesec__badge--mail { background: var(--sbvr188-surface-2); border: 1px solid var(--sbvr188-line-2); color: var(--sbvr188-text-2); }
.sbvr-freesec__name { font-size: .92rem; font-weight: 700; line-height: 1.3; margin-top: 4px; }
.sbvr-freesec__model { font-size: .76rem; color: var(--sbvr188-text-3); }

/* responsive — aligned to the site ladders (trail stacks at 640; models
   grid tightens at 575.98; all cards always visible) */
@media (max-width: 640px) {
	.sbvr-freesec { margin: 2.25rem 0; }
	.sbvr-freesec__top { flex-direction: column; align-items: flex-start; gap: 10px; }
	.sbvr-freesec__btn { align-self: stretch; justify-content: center; }
	.sbvr-freesec__sub { margin-bottom: 1.25rem; }
}
@media (max-width: 575.98px) {
	.sbvr-freesec__grid { grid-template-columns: 1fr; gap: .75rem; }
	.sbvr-freesec__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.sbvr-freesec * { transition: none !important; animation: none !important; }
}

/* /vr-porn-videos/ mid-grid free card — rides .sbvr-cta-hero. Vertical
   breathing room: the base hero's 40px margin sat asymmetrically in the
   thumb grid (~92px above vs ~60px below on desktop); the variant evens it
   out, and steps down with the base at ≤768 (operator item 5, 8/19). */
.sbvr-cta-hero--free { margin: 40px auto 72px; }
.sbvr-cta-hero--free .sbvr-cta-hero__alt {
	margin: 16px 0 0;
	font-size: .85rem;
	color: rgba(255, 255, 255, .55);
}
.sbvr-cta-hero--free .sbvr-cta-hero__alt a { color: #01B5F0; text-decoration: none; }
.sbvr-cta-hero--free .sbvr-cta-hero__alt a:hover { color: #FF7DE0; }
@media (max-width: 768px) {
	.sbvr-cta-hero--free { margin: 28px auto 56px; }
	.sbvr-cta-hero--free .sbvr-cta-hero__alt { font-size: .8rem; }
}
/* ═══ end #196b ══════════════════════════════════════════════════════════ */
/* ═══ #197 Member Perks (2026-08-20) — /member-perks/ page (mockup V1: equal
   card grid) + placement A (sidebar link) + placement B2 (account gradient
   strip). Design language per §3.2b: sbvr188 tokens, 1180 measure, hub hero
   with blurred brand glows, slim pill CTAs w/ liquid-rise, 56px rhythm.
   Page is members-only + noindex; cards render a graceful "pending" state
   until partner URLs are filled in member_perks_body.tpl. */
.sbvr-perks {
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	color: var(--sbvr188-text);
	display: block;
	padding: 0 0 56px;
}
.sbvr-perks *, .sbvr-perks *::before, .sbvr-perks *::after { box-sizing: border-box; }
.sbvr-perks .container { max-width: calc(1180px + 48px); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sbvr-perks a { text-decoration: none; }

/* hero */
/* 2026-09-11: aligned with the canonical hub hero (.sbvr-hub__hero) — the glows clip at the box edge, so
   without a radius + margins the hero read as a hard panel glued to the header and the guest wall / grid. */
.sbvr-perks__hero { position: relative; padding: 64px 34px 56px; margin: 28px 0 46px; overflow: hidden; background: var(--sbvr188-bg-2); border-radius: var(--sbvr188-radius); border-bottom: 1px solid var(--sbvr188-line); }
.sbvr-perks__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .15; pointer-events: none; }
.sbvr-perks__glow--p { width: 380px; height: 380px; background: var(--sbvr-pink); top: -140px; left: 4%; }
.sbvr-perks__glow--c { width: 340px; height: 340px; background: var(--sbvr-cyan); top: -90px; right: 6%; }
.sbvr-perks__eyebrow {
	display: inline-block;
	font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	background: var(--sbvr188-grad);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	margin: 0 0 12px;
}
.sbvr-perks__hero h1 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 900; line-height: 1.12; margin: 0 0 14px; color: #fff; }
.sbvr-perks__sub { color: var(--sbvr188-text-2); font-size: 16px; line-height: 1.6; max-width: 640px; margin: 0; }

/* CTA pill (liquid-rise per #109b; white label survives sitewide a:hover) */
.sbvr-perks__btn {
	position: relative; overflow: hidden; z-index: 0;
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	padding: 11px 24px; border-radius: var(--sbvr188-pill);
	background: var(--sbvr188-grad);
	color: #fff !important; font-weight: 700; font-size: var(--sbvr-fs-btn); white-space: nowrap;
	box-shadow: 0 4px 14px rgba(255, 125, 224, .3) !important;
	transition: transform .2s ease, box-shadow .2s ease;
	margin-top: 6px;
}
.sbvr-perks__btn::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
	background: var(--sbvr-cyan); transform: translateY(100%);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
	z-index: -1; border-radius: inherit;
}
.sbvr-perks__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(1, 181, 240, .45) !important; }
.sbvr-perks__btn:hover::after { transform: translateY(0); }
.sbvr-perks__btn:focus-visible { outline: 2px solid var(--sbvr-cyan); outline-offset: 3px; }
.sbvr-perks__btn--pending {
	background: none; border: 1px solid var(--sbvr188-line-2);
	color: var(--sbvr188-text-3) !important; box-shadow: none !important;
	cursor: default; pointer-events: none;
}
.sbvr-perks__btn--pending::after { display: none; }

/* tenant grid (V1) */
.sbvr-perks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.sbvr-perks__card {
	display: flex; flex-direction: column;
	background: var(--sbvr188-surface); border: 1px solid var(--sbvr188-line);
	border-radius: var(--sbvr-r-card); overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
}
.sbvr-perks__card:hover { border-color: var(--sbvr188-line-2); transform: translateY(-3px); }
.sbvr-perks__card--soon { opacity: .75; }
.sbvr-perks__card--soon:hover { transform: none; }
.sbvr-perks__art { position: relative; height: 160px; overflow: hidden; }
.sbvr-perks__art--cams { background: radial-gradient(120% 140% at 20% 0%, rgba(255, 125, 224, .28), transparent 55%), radial-gradient(120% 140% at 85% 100%, rgba(1, 181, 240, .30), transparent 55%), var(--sbvr-bg-2); }
.sbvr-perks__art--toys { background: radial-gradient(120% 140% at 80% 0%, rgba(1, 181, 240, .26), transparent 55%), radial-gradient(120% 140% at 10% 100%, rgba(255, 125, 224, .22), transparent 55%), var(--sbvr-bg-2); }
.sbvr-perks__art--ai   { background: radial-gradient(120% 140% at 50% -20%, rgba(139, 153, 232, .25), transparent 60%), var(--sbvr-bg-2); }
.sbvr-perks__svg { width: 100%; height: 100%; display: block; transition: transform .35s ease; }
.sbvr-perks__card:hover .sbvr-perks__svg { transform: scale(1.05); }
.sbvr-perks__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sbvr-perks__body h2 { margin: 2px 0 0; font-size: var(--sbvr-fs-h3); font-weight: 800; color: #fff; text-shadow: none; }
.sbvr-perks__body p { margin: 0; color: var(--sbvr188-text-2); font-size: 14px; line-height: 1.6; flex: 1; }
.sbvr-perks__meta { color: var(--sbvr188-text-3); font-size: 12.5px; }
.sbvr-perks__tag {
	display: inline-block; align-self: flex-start;
	font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	padding: .32em .85em; border-radius: var(--sbvr188-pill);
	background: var(--sbvr188-grad); color: #fff;
}
.sbvr-perks__tag--soft { background: var(--sbvr188-surface-2); border: 1px solid var(--sbvr188-line-2); color: var(--sbvr188-text-2); }
.sbvr-perks__tag--soon { background: none; border: 1px dashed var(--sbvr188-line-2); color: var(--sbvr188-text-3); }
.sbvr-perks__brands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sbvr-perks__brand {
	display: inline-flex; align-items: center;
	padding: 8px 18px; border-radius: var(--sbvr188-pill);
	border: 1px solid var(--sbvr188-line-2);
	color: var(--sbvr188-text-2) !important; font-weight: 700; font-size: 13.5px;
	transition: border-color .2s ease, color .2s ease;
}
.sbvr-perks__brand:hover { border-color: var(--sbvr-cyan); color: #fff !important; }
.sbvr-perks__brand:focus-visible { outline: 2px solid var(--sbvr-cyan); outline-offset: 3px; }
.sbvr-perks__brand--pending { border-style: dashed; color: var(--sbvr188-text-3) !important; cursor: default; }

.sbvr-perks__disclosure { color: var(--sbvr188-text-3); font-size: 12.5px; line-height: 1.65; margin: 40px 0 0; }

/* guest wall — no partner names, no join pressure */
.sbvr-perks__guestwall {
	max-width: 560px; margin: 0 auto; text-align: center;
	background: var(--sbvr188-surface); border: 1px solid var(--sbvr188-line);
	border-radius: var(--sbvr-r-card); padding: 44px 32px 40px;
	display: flex; flex-direction: column; align-items: center;
}
.sbvr-perks__lock {
	width: 58px; height: 58px; margin: 0 0 16px; border-radius: 50%;
	background: linear-gradient(135deg, rgba(255, 125, 224, .2), rgba(1, 181, 240, .2));
	display: flex; align-items: center; justify-content: center;
	color: var(--sbvr-text);
}
.sbvr-perks__guestwall h2 { margin: 0 0 8px; font-size: var(--sbvr-fs-h2); font-weight: 900; color: #fff; text-shadow: none; }
.sbvr-perks__guestwall p { margin: 0 0 20px; color: var(--sbvr188-text-2); font-size: 14.5px; }
.sbvr-perks__guestwall .sbvr-perks__btn { align-self: center; }

@media (max-width: 640px) {
	.sbvr-perks__hero { padding: 44px 20px 40px; margin: 16px 0 34px; }
	.sbvr-perks { padding-bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.sbvr-perks * { transition: none !important; animation: none !important; }
}

/* placement A — sidebar "Member Perks" item (include_sidebar_member_links) */
.sbvr-perks-navgroup li a { color: #fff; font-weight: 600; }
.sbvr-perks-navgroup .icon-star { color: var(--sbvr-pink); }
.sbvr-perks-navnew {
	display: inline-block; margin-left: 8px; vertical-align: 1px;
	font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	padding: .25em .7em; border-radius: var(--sbvr-r-pill);
	background: var(--sbvr-grad); color: #fff;
}

/* placement B2 — account-page gradient-framed strip (member_profile_my,
   profile page only, below the F-series banners) */
.sbvr-perks-strip {
	display: block; position: relative;
	border-radius: calc(var(--sbvr-r-card) + 2px); padding: 2px;
	background: var(--sbvr-grad);
	margin: 0 0 24px; text-decoration: none;
	transition: box-shadow .2s ease;
}
.sbvr-perks-strip:hover { box-shadow: 0 6px 22px rgba(1, 181, 240, .25); }
.sbvr-perks-strip:focus-visible { outline: 2px solid var(--sbvr-cyan); outline-offset: 3px; }
.sbvr-perks-strip__in {
	display: flex; align-items: center; gap: 16px;
	background: #131318; border-radius: var(--sbvr-r-card); padding: 16px 22px;
}
.sbvr-perks-strip__ico {
	flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
	background: linear-gradient(135deg, rgba(255, 125, 224, .22), rgba(1, 181, 240, .22));
	display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.sbvr-perks-strip__tx { flex: 1; min-width: 0; }
.sbvr-perks-strip__tx b { display: block; color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.sbvr-perks-strip__tx > span { color: var(--sbvr-text-2); font-size: 13px; line-height: 1.5; }
.sbvr-perks-strip__btn {
	flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 20px; border-radius: var(--sbvr-r-pill);
	background: var(--sbvr-grad);
	color: #fff; font-weight: 700; font-size: 13.5px; white-space: nowrap;
}
@media (max-width: 700px) {
	.sbvr-perks-strip__in { flex-wrap: wrap; }
	.sbvr-perks-strip__btn { width: 100%; justify-content: center; }
}

/* #197 exposure round (2026-08-25): strip reuse on welcome page + homepage */
.sbvr-perks-strip--welcome { margin: 28px 0 0; text-align: left; }
/* homepage member perks section (operator pick 8/25, replaced the slim
   ribbon): the full card grid shared with /member-perks/, capped at the grid
   measure like its trail-CTA/free-section siblings; header row follows the
   freesec top pattern */
.sbvr-home-perks { max-width: var(--sbvr-measure-grid); margin: 56px auto 0; }
.sbvr-home-perks__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 0 0 4px; }
.sbvr-home-perks__top h2 { font-size: var(--sbvr-fs-h2); font-weight: 900; color: var(--sbvr-text); margin: 0; line-height: 1.2; }
.sbvr-home-perks__all { color: var(--sbvr-cyan); font-weight: 700; font-size: var(--sbvr-fs-btn); text-decoration: none; transition: color .2s ease; }
.sbvr-home-perks__all:hover { color: var(--sbvr-text); }
.sbvr-home-perks__sub { color: var(--sbvr-text-3); font-size: var(--sbvr-fs-meta); margin: 0 0 18px; }
/* listing-page expired trail CTAs reuse --scene (its #109e 1200px cap is for
   scene pages) — on the 1760 listing grids they align with the grid instead */
.sbvr-cta-trail.sbvr-cta-trail--pornstars, .sbvr-cta-trail.sbvr-cta-trail--categories { max-width: var(--sbvr-measure-grid); }
/* canon fix-on-touch: welcome CTAs were still uppercase (missed in #200 —
   main.css .sbvr-welcome__cta; same specificity, this file loads later) */
.sbvr-welcome__cta { text-transform: none; letter-spacing: normal; font-size: var(--sbvr-fs-btn); }
/* ═══ end #197 ═══════════════════════════════════════════════════════════ */
/* ═══ #185b annual-upgrade card (2026-08-20) — /account/subscription/ only.
   Brand gradient-frame family (matches the #197 perks strip); fail-safe
   hidden when NATS data is missing (template gate). */
.sbvr-annual-card {
	position: relative;
	max-width: 720px; /* 2026-09-22: same cap as .sbvr-renewal-card (main.css) - the card now renders inside the content column, directly under that panel, and must not outgrow it (was 1057px @1440, 1304px @3440) */
	border-radius: 14px;
	padding: 2px;
	background: linear-gradient(135deg, #FF7DE0 0%, #01B5F0 100%);
	margin: 24px 0;
}
.sbvr-annual-card > * { position: relative; }
.sbvr-annual-card::before {
	content: "";
	position: absolute; inset: 2px;
	background: #131318;
	border-radius: 12px;
}
.sbvr-annual-card {
	display: flex; align-items: center; gap: 22px;
}
.sbvr-annual-card__body { flex: 1; min-width: 0; padding: 18px 0 18px 22px; }
.sbvr-annual-card__tag {
	display: inline-block;
	font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	padding: .3em .85em; border-radius: 999px;
	background: linear-gradient(135deg, #FF7DE0 0%, #01B5F0 100%);
	color: #fff; margin: 0 0 8px;
}
.sbvr-annual-card__title { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: #fff; text-shadow: none; }
.sbvr-annual-card__blurb { margin: 0; color: #b9b9c4; font-size: 13.5px; line-height: 1.6; }
.sbvr-annual-card__actions {
	flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 18px 22px 18px 0;
}
.sbvr-annual-card__btn {
	position: relative; overflow: hidden; z-index: 0;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 24px; border-radius: 999px;
	background: linear-gradient(135deg, #FF7DE0 0%, #01B5F0 100%);
	color: #fff !important; font-weight: 700; font-size: 14.5px; white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(255, 125, 224, .3) !important;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbvr-annual-card__btn::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
	background: #01B5F0; transform: translateY(100%);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
	z-index: -1; border-radius: inherit;
}
.sbvr-annual-card__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(1, 181, 240, .45) !important; }
.sbvr-annual-card__btn:hover::after { transform: translateY(0); }
.sbvr-annual-card__btn:focus-visible { outline: 2px solid #01B5F0; outline-offset: 3px; }
.sbvr-annual-card__fine { color: #7c7c8a; font-size: 11.5px; text-align: center; }
.sbvr-annual-note {
	border-radius: 10px; padding: 12px 18px; margin: 18px 0;
	font-size: 14px; color: #b9b9c4;
	background: #1c1c23; border: 1px solid rgba(255, 255, 255, .16);
}
.sbvr-annual-note--ok { border-color: rgba(60, 200, 120, .5); color: #cfe9db; }
.sbvr-annual-note--err { border-color: rgba(255, 170, 90, .5); }
@media (max-width: 700px) {
	.sbvr-annual-card { flex-direction: column; align-items: stretch; gap: 0; }
	.sbvr-annual-card__body { padding: 18px 20px 4px; }
	.sbvr-annual-card__actions { padding: 12px 20px 18px; }
	.sbvr-annual-card__btn { width: 100%; justify-content: center; }
}
/* ═══ end #185b ══════════════════════════════════════════════════════════ */

/* Legacy .landing rule in main.css (~:18017) requests a BG.jpg that 404s
   sitewide — kill the request (operator-approved rider, 2026-08-24). */
.landing { background-image: none; }

/* ═══ #197b — /member-perks/ai/ AI Playground sub-page (2026-08-26) ═══
   Reuses the #197 .sbvr-perks__* system; only sub-page-specific bits here. */
.sbvr-perksai-crumb { font-size: var(--sbvr188-fs-meta, 13.5px); font-weight: 500; color: var(--sbvr188-text-2); margin: 0 0 14px; }
.sbvr-perksai-crumb a { color: var(--sbvr-cyan); text-decoration: none; }
.sbvr-perksai-crumb a:hover { text-decoration: underline; }
.sbvr-perksai-grad { background: var(--sbvr-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sbvr-perks__grid--ai { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .sbvr-perks__grid--ai { grid-template-columns: 1fr; } }
.sbvr-perksai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.sbvr-perksai-chip { font-size: 12.5px; font-weight: 700; color: var(--sbvr188-text-2); border: 1px solid var(--sbvr188-line-2); border-radius: var(--sbvr188-r-pill, 999px); padding: 3px 12px; background: var(--sbvr188-surface-2); }
.sbvr-perksai-ctarow { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.sbvr-perksai-free { font-size: 13px; font-weight: 700; color: var(--sbvr-cyan); white-space: nowrap; }
/* ═══ end #197b ═══ */
/* #197b photo art panels (operator-directed 8/26): partner landing-page
   captures as card art. Bottom fade keeps the card text separation. */
.sbvr-perksai-photo { position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; }
.sbvr-perksai-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 18, .18) 0%, rgba(13, 13, 18, 0) 28%, rgba(13, 13, 18, .28) 62%, rgba(13, 13, 18, .82) 100%); }
.sbvr-perksai-photo--angels { background-image: url(/static/images/perks/aiangels-panel.jpg); }
.sbvr-perksai-photo--create { background-image: url(/static/images/perks/createporn-panel.jpg); }
.sbvr-perksai-photo--aipx { background-image: url(/static/images/perks/aipornx-panel.jpg); }
.sbvr-perksai-photo--candy { background-image: url(/static/images/perks/candyai-panel.jpg); }

/* ============================================================
   SEO Phase B — homepage LCP decoupled from Swiper init (PoC 2026-09-07).
   Trace fact (Docker + live, mobile emulation): the LCP element is the
   first hero slide's .sbvr-hero__bg-blur, hidden by main.css until
   .swiper-initialized — i.e. until the 3 MB index.build.js at the end of
   the body has parsed and run (render delay 3.0-3.8 s lab, 1.7 s CrUX p75).
   The June-12 CLS fix hid the blur because the PRE-init slide collapses
   (.swiper-slide has no width). Fix the geometry instead: pre-init, the
   first slide is laid out at full width, siblings hidden, blur visible.
   After init the :not() rules stop matching; Swiper's loop shows the same
   first slide, so no visual shift (CLS measured 0.00 in the PoC trace).
   ============================================================ */
.sbvr-hero:not(.swiper-initialized) .swiper-wrapper { display: flex; }
.sbvr-hero:not(.swiper-initialized) .sbvr-hero__slide { flex: 0 0 100%; width: 100%; }
.sbvr-hero:not(.swiper-initialized) .sbvr-hero__slide:not(:first-child) { visibility: hidden; } /* stay in the flex row: the TALLEST slide sets the hero height post-init too — display:none pre-init = a 141px shift at init (measured) */
/* The in-slide blur stays hidden until init (loop prepend = 1-frame 412px shift, CLS 0.36 measured).
   The stand-in .sbvr-hero__lcp (template, outside .swiper-wrapper) is the pre-init LCP paint. */
.sbvr-hero__lcp { position: absolute; inset: -30px; background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(28px); opacity: 0.55; z-index: 0; pointer-events: none; }
.sbvr-hero.swiper-initialized .sbvr-hero__lcp { visibility: hidden; }
/* 2026-09-20 tablet fixes (operator, Redmi Pad 2).
   (a) Model page photo is now a <picture>: the wrapper must not become a box of its own, or the img's height:100% has nothing to resolve against. */
.sbvr-pornstar-hero__img-wrap picture { display: contents; }
/* (b) Homepage hero, 1101-1290px wide (tablets landscape, 1280 laptops): the hero is 21:8 of the width (400-500px tall) but the 2x3 tile
   grid was only capped by WIDTH (530px → 459px tall), so it outgrew the hero and the top/bottom rows were clipped by overflow:hidden.
   Grid height = 0.84375 x width + 11.6px (three 16:9 rows + two 10px gaps) → cap the width from the hero height, keeping 16px of air
   above and below. 37.6vw ~ the hero height incl. a scrollbar. At >=1290px the old 530px cap is the smaller one again: no change there. */
@media (min-width: 1101px) {
	.sbvr-hero__grid { max-width: min(530px, calc((clamp(400px, 37.6vw, 500px) - 44px) / 0.84375)); }
}