/* =====================================================================================================================
   THE LOBBY'S PARTS (2026-10-07, PROPOSED). Source of truth: Code/lobby/assets/css/lobby.css (manual: Code/lobby/README.md).
   Hayden: "I want our site to look like SexLikeReal, at least the structure, and the lobby design. Entice people."
   SexLikeReal's STRUCTURE, LustLit's LOOK. Shared by the lobby (the US age-check states) and the home page in the same
   structure. Loads after ll-ui.css (the rows, tiles, buttons and pills are LL-UI's, unchanged) and head.css (the shared
   tokens: --ll-ease-settle, --ll-dur, --ll-radius-*, --ll-hairline, --ll-glass-*). Only .lll-* lives here.
   THE RULES IT KEEPS (design-system.md, site-art.md): dark; #ef4444 the accent and the only red type; #c41e3a only as a
   fill or a border; every number white; a glow is filter: drop-shadow(), never box-shadow; display type 800 at -0.035em;
   no eyebrows; every picture whole at its own shape (--ar), never scaled on hover, nothing over or fading its bottom-right
   corner (the mark); reduced motion: no rises, no lifts.
   ================================================================================================================== */

.lll { background: var(--ll-black, #0a0a0a); color: #fff; }
.ll-lobby { background: var(--ll-black, #0a0a0a); }
.lll-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lll-anchor { position: relative; top: -16px; }

/* ---- THE LOBBY'S OWN BAR: the wordmark and "Adults only", nothing that leads anywhere ------------------------------ */
.lll-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 4px; background: #fff; color: #0a0a0a; font-weight: 700; }
.lll-skip:focus { top: 12px; }
.lll-bar { position: absolute; z-index: 20; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: calc(18px + env(safe-area-inset-top, 0px)) var(--llui-gutter, 16px) 18px; pointer-events: none; }
.lll-bar__mark { display: block; height: 24px; line-height: 0; }
.lll-bar__mark svg { height: 100%; width: auto; display: block; }
/* the 18 gate's own header (Code/gate/, live 2026-10-07): the wordmark at 24 px over a 64 px seam */
.lll-bar__brand { display: flex; flex-direction: column; align-items: flex-start; }
.lll-bar__brand::after { content: ""; display: block; width: 64px; height: 2px; margin: 12px 0 0;
    background: var(--ll-neon-line, linear-gradient(90deg, transparent, #ef4444 50%, transparent)); filter: var(--ll-neon-glow, drop-shadow(0 0 2px rgba(239, 68, 68, 1))); }
.lll-bar__word { font: 800 1.35rem/1 var(--font-heading, 'Plus Jakarta Sans', sans-serif); letter-spacing: -.035em; color: #fff; }
.lll-bar__adults { padding: 7px 11px; border-radius: var(--ll-radius-pill, 999px); border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(10, 10, 10, .45); font: 700 .6875rem/1 var(--font-body, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #fff; }

/* =====================================================================================================================
   1. THE HERO: one woman, full bleed. Her cut-out stands on the right, whole and bottom-anchored (nothing fades or covers
   her bottom-right corner, where the mark is); the backdrop is drawn from her colour, never from the picture.
   ================================================================================================================== */
.lll-hero { --lll-hero-h: clamp(560px, 92svh, 920px);
    position: relative; isolation: isolate; overflow: hidden; min-height: var(--lll-hero-h);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: clamp(16px, 3vw, 48px);
    padding: 0 var(--llui-gutter, 16px); background: #0a0a0a; }
.lll-hero__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(52% 70% at 74% 66%, color-mix(in srgb, var(--c) 46%, #0a0a0a) 0%, color-mix(in srgb, var(--c) 16%, #0a0a0a) 42%, rgba(10, 10, 10, 0) 74%),
        radial-gradient(90% 60% at 20% 110%, color-mix(in srgb, var(--c) 10%, #0a0a0a) 0%, rgba(10, 10, 10, 0) 70%),
        linear-gradient(180deg, #0a0a0a 0%, rgba(10, 10, 10, 0) 26%),
        #0a0a0a; }
/* the floor: the house seam where she stands */
.lll-hero::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(72%, 980px); height: 2px; transform: translateX(-50%);
    background: var(--ll-neon-line, linear-gradient(90deg, transparent, #ef4444 50%, transparent)); filter: var(--ll-neon-glow-lg, drop-shadow(0 0 3px rgba(239, 68, 68, 1)) drop-shadow(0 0 9px rgba(239, 68, 68, .7))); }
.lll-hero__art { order: 2; margin: 0; align-self: end; height: calc(var(--lll-hero-h) - var(--llui-bar, 56px) - 8px); max-height: 980px;
    aspect-ratio: var(--ar); width: auto; max-width: 52vw; animation: lll-rise 900ms var(--ll-ease-settle, cubic-bezier(.2, .8, .2, 1)) both; }
.lll-hero__art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.lll-hero__body { order: 1; align-self: center; max-width: 640px; padding: calc(var(--llui-bar, 56px) + 56px) 0 72px; }
.lll-hero__title { margin: 0; color: #fff; font: 800 clamp(2.6rem, 5.4vw, 5rem)/.98 var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    letter-spacing: -.035em; text-wrap: balance; }
.lll-hero__title::after { content: ""; display: block; width: 104px; height: 2px; margin: 26px 0 0;
    background: var(--ll-neon-line, linear-gradient(90deg, transparent, #ef4444 50%, transparent)); filter: var(--ll-neon-glow-lg, drop-shadow(0 0 3px rgba(239, 68, 68, 1))); }
.lll-hero__line { margin: 22px 0 0; max-width: 46ch; color: rgba(255, 255, 255, .84); font: 400 clamp(1.05rem, 1.3vw, 1.25rem)/1.6 var(--font-body, sans-serif); }
.lll-hero__pills { margin-top: 18px; }
.lll-hero__aside { margin-top: 26px; }
.lll-hero__actions { margin-top: 30px; }
.lll-hero__note, .lll-hero__caption { margin: 18px 0 0; color: rgba(255, 255, 255, .6); font: 600 .8125rem/1.4 var(--font-body, sans-serif); letter-spacing: .02em; }
.lll-hero__caption { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .72); }
.lll-hero__caption a { color: #fff; text-decoration: underline; text-decoration-color: rgba(239, 68, 68, .8); text-underline-offset: 3px; }
.lll-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #ef4444); filter: drop-shadow(0 0 5px var(--c, #ef4444)); flex: none; }
.lll-hero--words { grid-template-columns: minmax(0, 1fr); }
@keyframes lll-rise { from { transform: translateY(18px); } to { transform: none; } }   /* a rise only: never an opacity that could hold her invisible */

/* a quiet text call beside a button: white, the red underline (design-system: links never in blood red) */
.lll-textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px; color: #fff; font: 600 .9375rem/1.3 var(--font-body, sans-serif);
    text-decoration: underline; text-decoration-color: rgba(239, 68, 68, .85); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.lll-textlink:hover { color: #fff; text-decoration-color: #ef4444; }
.lll-textlink svg, .llui-btn svg { width: 18px; height: 18px; flex: none; }
.lll-textlink:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
.is-preview { opacity: .6; cursor: not-allowed; }

/* =====================================================================================================================
   SECTION HEADS: a display title with the seam, one line under it (no eyebrow). Rows keep LL-UI's head, sized the same.
   ================================================================================================================== */
.lll-head { padding: 0 var(--llui-gutter, 16px); margin: 0 0 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.lll-head__title, .lll-row .llui-row__title { margin: 0; color: #fff; font: 800 clamp(1.7rem, 2.6vw, 2.4rem)/1.08 var(--font-heading, sans-serif); letter-spacing: -.035em; }
.lll-head__title::after { content: ""; display: block; width: 72px; height: 2px; margin: 14px 0 0;
    background: var(--ll-neon-line, linear-gradient(90deg, transparent, #ef4444 50%, transparent)); filter: var(--ll-neon-glow, drop-shadow(0 0 2px rgba(239, 68, 68, 1))); }
.lll-row .llui-row__title::after { content: ""; display: block; width: 72px; height: 2px; margin: 14px 0 0;
    background: var(--ll-neon-line, linear-gradient(90deg, transparent, #ef4444 50%, transparent)); filter: var(--ll-neon-glow, drop-shadow(0 0 2px rgba(239, 68, 68, 1))); }
.lll-head__line, .lll-row__line { margin: 12px 0 0; max-width: 62ch; color: rgba(255, 255, 255, .66); font-size: 1rem; line-height: 1.55; }

/* ---- 2. THE WOMEN: LL-UI's row, centred in the page's column from 1024 px as the home's rows are --------------------- */
.lll-row { margin: clamp(56px, 7vw, 96px) 0; }
.lll-row--women { --llui-row-h: clamp(260px, 25vw, 380px); }
.lll-row .llui-tile__kicker { color: rgba(255, 255, 255, .7); }
.lll-row .llui-tile__name { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; }
div.llui-tile { cursor: default; }
@media (min-width: 1024px) {
    .lll-row .llui-row__viewport { margin-inline: var(--llui-gutter); }
    .lll-row .llui-row__rail { padding-inline: 0; scroll-padding-inline: 0; }
    .lll-row .llui-row__btn--prev { left: max(calc(8px - var(--llui-gutter)), -60px); }
    .lll-row .llui-row__btn--next { right: max(calc(8px - var(--llui-gutter)), -60px); }
}

/* =====================================================================================================================
   3. THE MOSAIC: SexLikeReal's wall, as a masonry of WHOLE pictures (columns: each keeps its own shape; nothing cropped)
   ================================================================================================================== */
.lll-mosaic { margin: clamp(56px, 7vw, 96px) 0; }
.lll-mosaic__cast { padding: 0 var(--llui-gutter, 16px); margin: 0 0 22px; }
.lll-mosaic__grid { list-style: none; margin: 0 var(--llui-gutter, 16px); padding: 0; columns: 2; column-gap: 10px; }
.lll-mosaic__item { break-inside: avoid; margin: 0 0 10px; position: relative; border-radius: var(--ll-radius-poster, 8px); overflow: hidden;
    background: #141416; outline: 1px solid var(--ll-hairline, rgba(255, 255, 255, .1)); outline-offset: -1px;
    transition: transform var(--ll-dur, 240ms) var(--ll-ease-settle, ease); }
.lll-mosaic__item img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); }
.lll-mosaic__link { display: block; color: inherit; }
.lll-mosaic__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* her colour, as a hairline seam under the picture on hover (never over it) */
.lll-mosaic__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c, #ef4444);
    transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ll-ease-settle, ease); }
@media (hover: hover) and (pointer: fine) {
    .lll-mosaic__item:hover { transform: translateY(-3px); }
    .lll-mosaic__item:hover::after { transform: scaleX(1); }
}
.lll-mosaic__foot { padding: 26px var(--llui-gutter, 16px) 0; display: flex; justify-content: center; }
@media (min-width: 700px) { .lll-mosaic__grid { columns: 3; column-gap: 14px; } .lll-mosaic__item { margin-bottom: 14px; } }
@media (min-width: 1024px) {
    .lll-mosaic__grid { columns: 4; column-gap: 16px; margin-inline: var(--llui-gutter); }
    .lll-mosaic__item { margin-bottom: 16px; }
}

/* =====================================================================================================================
   4. THE NUMBERS: counted, never typed. White numbers over a short seam (SexLikeReal's laurels would claim awards we
   don't have; the seam is ours).
   ================================================================================================================== */
.lll-numbers { margin: clamp(56px, 7vw, 96px) var(--llui-gutter, 16px); padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--ll-hairline, rgba(255, 255, 255, .1));
    border-bottom: 1px solid var(--ll-hairline, rgba(255, 255, 255, .1)); }
.lll-numbers__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; text-align: center; }
.lll-numbers__n { display: block; color: #fff; font: 800 clamp(2.4rem, 5vw, 4.2rem)/1 var(--font-heading, sans-serif); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.lll-numbers__n::after { content: ""; display: block; width: 56px; height: 2px; margin: 14px auto 0;
    background: var(--ll-neon-line, linear-gradient(90deg, transparent, #ef4444 50%, transparent)); filter: var(--ll-neon-glow, drop-shadow(0 0 2px rgba(239, 68, 68, 1))); }
.lll-numbers__label { display: block; margin-top: 12px; color: rgba(255, 255, 255, .7); font: 700 .75rem/1.2 var(--font-body, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.lll-numbers__line { margin: 26px 0 0; text-align: center; color: rgba(255, 255, 255, .6); font-size: .9375rem; }
@media (min-width: 700px) {
    .lll-numbers__list { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
    .lll-numbers__n { font-size: clamp(2rem, 4.2vw, 4.2rem); }
}

/* =====================================================================================================================
   5. THE WORLDS: the painting whole beside the words (a band would crop it, and its mark with it)
   ================================================================================================================== */
.lll-worlds { margin: clamp(56px, 7vw, 96px) 0; }
.lll-worlds__list { list-style: none; margin: 0 var(--llui-gutter, 16px); padding: 0; display: grid; gap: 20px; }
.lll-world { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 14px; border-radius: 12px;
    background: #16161a; border: 1px solid rgba(255, 255, 255, .08); }
.lll-world__art { margin: 0; border-radius: var(--ll-radius-tile, 6px); overflow: hidden; aspect-ratio: var(--ar); background: #141416; }
.lll-world__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lll-world__text { align-self: center; padding: 4px 6px 10px; }
.lll-world__name { margin: 0; color: #fff; font: 800 clamp(2.2rem, 4vw, 3.6rem)/1 var(--font-heading, sans-serif); letter-spacing: -.035em; }
.lll-world__name::after { content: ""; display: block; width: 104px; height: 2px; margin: 18px 0 0;
    background: var(--ll-neon-line, linear-gradient(90deg, transparent, #ef4444 50%, transparent)); filter: var(--ll-neon-glow-lg, drop-shadow(0 0 3px rgba(239, 68, 68, 1))); }
.lll-world__line { margin: 18px 0 0; max-width: 46ch; color: rgba(255, 255, 255, .8); font-size: 1.0625rem; line-height: 1.6; }
.lll-world__counts { margin: 16px 0 0; color: rgba(255, 255, 255, .6); font: 700 .8rem/1.3 var(--font-body, sans-serif); letter-spacing: .08em; text-transform: uppercase; }
.lll-world__counts b { color: #fff; }
.lll-world .llui-actions { margin-top: 22px; }
@media (min-width: 800px) {
    .lll-world { grid-template-columns: minmax(260px, 44%) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: 18px; }
    .lll-world__art { max-width: 560px; }
}

/* =====================================================================================================================
   6. THE WHY (the lobby): short, warm, honest
   ================================================================================================================== */
/* the home's own "next issue" call, centred as live (home.css centres the text; LL-UI's actions are a flex row) */
.llh-next .llui-actions { justify-content: center; }

.lll-why { margin: clamp(56px, 7vw, 96px) 0 0; padding: clamp(48px, 7vw, 88px) var(--llui-gutter, 16px);
    background: radial-gradient(ellipse 75% 50% at 50% -5%, rgba(196, 30, 58, .30), transparent 70%), #0a0a0a; }
/* the 18 gate's card (Code/gate/lustlit-age-gate-look.php): #16161a, a .08 hairline, 12 px corners */
.lll-why__inner { max-width: 560px; margin: 0 auto; padding: clamp(28px, 4vw, 40px) clamp(20px, 4vw, 36px); text-align: center;
    background: #16161a; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; }
.lll-why__title { margin: 0; color: #fff; font: 800 clamp(1.9rem, 3.4vw, 2.9rem)/1.06 var(--font-heading, sans-serif); letter-spacing: -.035em; text-wrap: balance; }
.lll-why__title::after { content: ""; display: block; width: 104px; height: 2px; margin: 20px auto 0;
    background: var(--ll-neon-line, linear-gradient(90deg, transparent, #ef4444 50%, transparent)); filter: var(--ll-neon-glow-lg, drop-shadow(0 0 3px rgba(239, 68, 68, 1))); }
.lll-why__p { margin: 18px auto 0; max-width: 56ch; color: #b0b0b0; font-size: 1rem; line-height: 1.6; }
.lll-why__actions { justify-content: center; margin-top: 28px; }
.lll-why__form { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lll-field { display: inline-flex; align-items: center; min-height: 48px; min-width: min(280px, 100%); padding: 0 16px; border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .45); font-size: .9375rem; }
.lll-why__small { flex-basis: 100%; margin: 6px 0 0; color: #808080; font-size: .75rem; }

.lll--plain .lll-why { margin-top: 0; min-height: 80svh; padding-top: calc(var(--llui-bar, 56px) + 72px); }

/* ---- THE LOBBY'S FOOT ------------------------------------------------------------------------------------------- */
.lll-foot { padding: 28px var(--llui-gutter, 16px) calc(36px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .08);
    text-align: center; color: #808080; font-size: .8125rem; line-height: 1.6; background: #0a0a0a; }
.lll-foot__line { margin: 0; }
.lll-foot__links { margin: 12px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.lll-foot__links a { color: #ef4444; text-decoration: underline; text-underline-offset: 2px; }
.lll-foot__links a:hover { color: #f0f0f0; }

/* =====================================================================================================================
   THE WAY IN (the home): two plans on the ramp the design system keeps. Free's border is grey; Premium's is the metallic
   sheen (padding-box/border-box), its darkest stop at #c41e3a or above. No fill, no wash, no box-shadow on either.
   ================================================================================================================== */
.lll-join { margin: clamp(56px, 7vw, 96px) 0; }
.lll-join__plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0 var(--llui-gutter, 16px); }
.lll-plan { position: relative; padding: clamp(22px, 3vw, 32px); border-radius: var(--ll-radius-card, 12px); background: #0d090b;
    border: 1px solid rgba(255, 255, 255, .14); display: flex; flex-direction: column; }
.lll-plan--premium { border: 1.5px solid transparent;
    background: linear-gradient(#0d090b, #0d090b) padding-box,
                linear-gradient(135deg, #ef4444 0%, #c41e3a 30%, #f87171 52%, #c41e3a 74%, #ef4444 100%) border-box; }
.lll-plan__title { margin: 0; color: #fff; font: 800 1.5rem/1.1 var(--font-heading, sans-serif); letter-spacing: -.03em; }
.lll-plan__tag { margin-top: 16px; }
.lll-plan__line { margin: 12px 0 0; color: rgba(255, 255, 255, .72); line-height: 1.55; }
.lll-plan__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.lll-plan__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; color: rgba(255, 255, 255, .78); line-height: 1.5; }
.lll-plan__item svg { width: 22px; height: 22px; color: #ef4444; margin-top: 1px; }
.lll-plan__item strong { color: #fff; font-weight: 700; }
.lll-plan__item b { color: #fff; }
.lll-plan__founder { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ll-hairline, rgba(255, 255, 255, .1)); color: rgba(255, 255, 255, .78); font-size: .9375rem; line-height: 1.55; }
.lll-plan__actions { margin-top: auto; padding-top: 24px; }
.lll-plan__actions .llui-btn { width: 100%; }
/* a long call wraps centred (LL-UI's button is one line by design; "Get Instant Access · $9.99/mo" isn't on a phone) */
.lll .llui-btn { text-align: center; line-height: 1.25; padding-block: 8px; }
/* a call that carries the price reads as the live card writes it ("Get Instant Access · $9.99/mo"): "/MO" never shouts */
.lll .llui-btn.lll-btn--price { text-transform: none; letter-spacing: .01em; font-weight: 800; font-size: .9375rem; }
.lll .lll-offer__cta .llui-btn.lll-btn--price { font-size: 1.0625rem; }
@media (min-width: 860px) { .lll-join__plans { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; } }

/* ---- THE TRUST ROW: only what is true (README) ------------------------------------------------------------------ */
.lll-trust { list-style: none; margin: 22px var(--llui-gutter, 16px) 0; padding: 18px 0 0; border-top: 1px solid var(--ll-hairline, rgba(255, 255, 255, .1));
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lll-trust__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; color: rgba(255, 255, 255, .66); font-size: .875rem; line-height: 1.45; }
.lll-trust__item svg { width: 24px; height: 24px; color: #ef4444; }
.lll-trust__item strong { color: #fff; font-weight: 700; }
@media (min-width: 700px) { .lll-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lll-trust { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* =====================================================================================================================
   ROUND 2 (THE-SHIFT.md: free is a tour, Premium the one offer)
   ================================================================================================================== */

/* ---- THE OPENINGS: a rail of story cards; the picture whole on top, the first lines fading into "keep reading" ---- */
.lll-openings .llui-row__item { width: min(340px, 82vw); }
.lll-open { height: 100%; display: flex; flex-direction: column; border-radius: var(--ll-radius-card, 12px); overflow: hidden;
    background: #16161a; border: 1px solid rgba(255, 255, 255, .08); transition: transform var(--ll-dur, 240ms) var(--ll-ease-settle, ease); }
.lll-open__pic { margin: 0; aspect-ratio: var(--ar); max-height: 380px; background: #141416; display: flex; justify-content: center; }
.lll-open__pic img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.lll-open__body { flex: 1; display: flex; flex-direction: column; padding: 18px 18px 16px; }
.lll-open__who { display: flex; align-items: center; gap: 8px; margin: 0; color: rgba(255, 255, 255, .72); font: 700 .6875rem/1.2 var(--font-body, sans-serif);
    letter-spacing: .1em; text-transform: uppercase; }
.lll-open__who .lll-dot { background: var(--c); filter: drop-shadow(0 0 5px var(--c)); }
.lll-open__tag { margin-left: auto; padding: 4px 8px; border-radius: var(--ll-radius-pill, 999px); border: 1px solid rgba(239, 68, 68, .6);
    color: #fff; font-size: .625rem; letter-spacing: .08em; }
.lll-open__title { margin: 10px 0 0; color: #fff; font: 800 1.25rem/1.2 var(--font-heading, sans-serif); letter-spacing: -.02em; }
/* the opening's first lines, fading out: the TEXT fades, never a picture */
.lll-open__text { position: relative; margin: 10px 0 0; max-height: calc(1.6em * 6); overflow: hidden; color: rgba(255, 255, 255, .78); font-size: .9375rem; line-height: 1.6;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.lll-open__more { margin-top: 10px; }
.lll-open__more .lll-textlink { min-height: 40px; }
.lll-open__meta { margin: 6px 0 0; color: rgba(255, 255, 255, .5); font: 600 .75rem/1.3 var(--font-body, sans-serif); }
.lll-open__meta b { color: #fff; }
@media (hover: hover) and (pointer: fine) { .lll-open:hover { transform: translateY(-4px); } }

/* ---- THE ONE OFFER (round 3, 2026-10-07): the live Premium card's words at SexLikeReal's strength ------------------
   The card is the ramp's top rung (design-system.md, "The tier ramp"): opaque #0d090b, the metallic sheen at 1.5px (its
   darkest stop #c41e3a), no wash inside it, no box-shadow on it. The live card's ember particles drift up around it
   (the house's embers: the same gradient, glow and timings as .hp-tier-gold .hp-tier-particles i; change both or
   neither). The best-offer flag runs across its top on the sale tag's own red; the tag is early-access/'s own, only drawn
   bigger (the struck price large); ONE call; what's inside counted, a drawn icon on each line. The home's card is wide
   (the call on the left, what's inside on the right); the join page's is one column with her beside it. */
.lll-offer { position: relative; isolation: isolate; overflow-x: clip; margin: clamp(56px, 7vw, 96px) 0; }   /* clip: the embers never widen a phone's page */
.lll-offer > .lll-head { justify-content: center; text-align: center; }
.lll-offer > .lll-head .lll-head__title::after { margin-left: auto; margin-right: auto; }
.lll-offer > .lll-head .lll-head__line { margin-left: auto; margin-right: auto; }
.lll-offer__wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0 var(--llui-gutter, 16px); align-items: center; justify-items: center; }
.lll-offer__card { position: relative; width: 100%; max-width: 560px; border-radius: var(--ll-radius-card, 12px); border: 1.5px solid transparent;
    background: linear-gradient(#0d090b, #0d090b) padding-box,
                linear-gradient(135deg, #ef4444 0%, #c41e3a 30%, #f87171 52%, #c41e3a 74%, #ef4444 100%) border-box; }
/* the embers: behind the card (the section is their stacking context), seen only drifting up its sides */
.lll-offer__embers { position: absolute; inset: -56px -24px -10px -24px; z-index: -1; pointer-events: none; overflow: visible; }
.lll-offer__embers i { position: absolute; bottom: 0; width: 5px; height: 5px; border-radius: 50%;
    background: radial-gradient(circle, #ffd7de 0%, #ef4444 45%, rgba(239, 68, 68, 0) 100%);
    box-shadow: 0 0 7px 1px rgba(239, 68, 68, 0.75);
    opacity: 0; animation: lll-ember 7s ease-in infinite; }
.lll-offer__embers i:nth-child(1)  { left: 2%;  width: 4px; height: 4px; animation-duration: 7.5s; animation-delay: 0s; }
.lll-offer__embers i:nth-child(2)  { left: 5%;  animation-duration: 6.2s; animation-delay: 2.1s; }
.lll-offer__embers i:nth-child(3)  { left: 4%;  width: 3px; height: 3px; animation-duration: 8.1s; animation-delay: 3.6s; }
.lll-offer__embers i:nth-child(4)  { left: 1%;  width: 3px; height: 3px; animation-duration: 7s;   animation-delay: 5s; }
.lll-offer__embers i:nth-child(5)  { left: 50%; width: 3px; height: 3px; animation-duration: 7.8s; animation-delay: 1.2s; }
.lll-offer__embers i:nth-child(6)  { left: 96%; animation-duration: 6.8s; animation-delay: 0.6s; }
.lll-offer__embers i:nth-child(7)  { left: 98%; width: 4px; height: 4px; animation-duration: 7.7s; animation-delay: 2.8s; }
.lll-offer__embers i:nth-child(8)  { left: 95%; width: 3px; height: 3px; animation-duration: 6.5s; animation-delay: 4.3s; }
.lll-offer__embers i:nth-child(9)  { left: 99%; animation-duration: 8.4s; animation-delay: 5.5s; }
.lll-offer__embers i:nth-child(10) { left: 97%; width: 3px; height: 3px; animation-duration: 8s;   animation-delay: 1.7s; }
@keyframes lll-ember {
    0%   { transform: translateY(10px) translateX(0); opacity: 0; }
    12%  { opacity: 1; }
    85%  { opacity: 0.75; }
    100% { transform: translateY(-200px) translateX(6px); opacity: 0; }
}
/* the best-offer flag: white on the sale tag's own red (a fill: #c41e3a's job), across the card's top */
.lll-offer__flag { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; padding: 13px 16px;
    border-radius: calc(var(--ll-radius-card, 12px) - 1.5px) calc(var(--ll-radius-card, 12px) - 1.5px) 0 0;
    background: linear-gradient(180deg, #c41e3a 0%, #8b1528 100%); color: #fff;
    font: 800 .8125rem/1 var(--font-body, 'Plus Jakarta Sans', sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.lll-offer__flag svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.lll-offer__inner { padding: clamp(24px, 3vw, 34px) clamp(20px, 3vw, 36px) clamp(24px, 3vw, 32px); }
.lll-offer__buy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lll-offer__kick { margin: 0 0 14px; color: #ef4444; font: 700 .75rem/1 var(--font-body, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
.lll-offer__kick span { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(239, 68, 68, .5); }
.lll-offer__tag { display: flex; justify-content: center; margin: 0; }
/* the house sale tag, big: its own classes and colours (early-access/), only its size changes here */
.lll-offer__tag .ll-ea--lg { border-radius: 5px; }
.lll-offer__tag .ll-ea--lg .ll-ea-pct { font-size: clamp(2.5rem, 6vw, 3.6rem); }
.lll-offer__tag .ll-ea--lg .ll-ea-prices { font-size: 1.25rem; }
.lll-offer__tag .ll-ea--lg .ll-ea-was { font-size: clamp(1.1rem, 2.4vw, 1.45rem); }
.lll-offer__tag .ll-ea--lg .ll-ea-was::after { border-top-width: 2.5px; }
.lll-offer__tag .ll-ea--lg .ll-ea-now { font-size: clamp(2.05rem, 5vw, 3rem); }
.lll-offer__name { margin: 16px 0 0; color: #fff; font: 700 .875rem/1.2 var(--font-body, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
/* the sentence that must sit beside the struck price (early-access/README.md, "The legal line") */
.lll-offer__underprice { margin: 10px auto 0; max-width: 44ch; color: rgba(255, 255, 255, .72); font-size: .875rem; line-height: 1.55; }
.lll-offer__underprice b { color: #fff; }
.lll-offer__cta { width: 100%; margin-top: 22px; }
.lll-offer__cta .llui-btn { width: 100%; min-height: 60px; font-size: 1.0625rem; font-weight: 800; letter-spacing: .01em; text-transform: none; }
.lll-offer__after { margin: 12px 0 0; color: rgba(255, 255, 255, .6); font-size: .875rem; line-height: 1.45; }
/* what's inside, counted: a drawn icon in a hairline square, the head white, every count white */
.lll-offer__list { list-style: none; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--ll-hairline, rgba(255, 255, 255, .1));
    display: grid; gap: 16px; text-align: left; }
.lll-offer__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.lll-offer__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(239, 68, 68, .45); color: #ef4444; }
.lll-offer__icon svg { width: 22px; height: 22px; }
.lll-offer__itext { padding-top: 1px; color: rgba(255, 255, 255, .7); font-size: .9375rem; line-height: 1.5; }
.lll-offer__itext strong, .lll-offer__itext b { color: #fff; font-weight: 800; }
.lll-offer__art { margin: 0; justify-self: center; height: clamp(360px, 48vw, 620px); aspect-ratio: var(--ar);
    background: radial-gradient(60% 55% at 50% 70%, color-mix(in srgb, var(--c) 42%, #0a0a0a), rgba(10, 10, 10, 0) 72%); }
.lll-offer__art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
/* the trust row under the card, as wide as the card and her */
.lll-offer > .lll-trust { max-width: 1120px; margin: 30px var(--llui-gutter, 16px) 0; }
@media (min-width: 1152px) {
    .lll-offer > .lll-trust { margin-left: auto; margin-right: auto; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (min-width: 860px) {
    .lll-offer--art .lll-offer__wrap { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); justify-content: center; align-items: start; }
    /* she stays beside the card while what's inside scrolls by */
    .lll-offer--art .lll-offer__art { position: sticky; top: calc(var(--llui-bar, 64px) + 24px); }
}
@media (min-width: 900px) {
    .lll-offer--wide .lll-offer__card { max-width: 1000px; }
    .lll-offer--wide .lll-offer__inner { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 0 44px; align-items: center; padding: 36px 40px; }
    .lll-offer--wide .lll-offer__list { margin: 0; padding: 4px 0 4px 44px; border-top: 0; border-left: 1px solid var(--ll-hairline, rgba(255, 255, 255, .1)); }
}

/* ---- THE JOIN PAGE ---------------------------------------------------------------------------------------------- */
.lll--join { padding-bottom: 24px; }
.lll-joinhead { padding: calc(var(--ll-hero-pad-top, 88px) + 8px) var(--llui-gutter, 16px) 8px; text-align: center; }
.lll-joinhead__title { margin: 0; color: #fff; font: 800 clamp(2.15rem, 5.4vw, 3.5rem)/1.02 var(--font-heading, sans-serif); letter-spacing: -.035em; }
.lll-joinhead__title::after { content: ""; display: block; width: 104px; height: 2px; margin: 18px auto 0;
    background: var(--ll-neon-line, linear-gradient(90deg, transparent, #ef4444 50%, transparent)); filter: var(--ll-neon-glow-lg, drop-shadow(0 0 3px rgba(239, 68, 68, 1))); }
.lll-joinhead__line { margin: 18px auto 0; max-width: 56ch; color: rgba(255, 255, 255, .78); font-size: 1.0625rem; line-height: 1.6; }
.lll--join .lll-offer { margin-top: 40px; }
.lll-features { margin: clamp(56px, 7vw, 96px) 0; }
.lll-features__grid { list-style: none; margin: 0 var(--llui-gutter, 16px); padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.lll-feature { padding: 20px; border-radius: 12px; background: #16161a; border: 1px solid rgba(255, 255, 255, .08); }
.lll-feature svg { width: 28px; height: 28px; color: #ef4444; }
.lll-feature__title { margin: 12px 0 0; color: #fff; font: 800 1.125rem/1.25 var(--font-heading, sans-serif); letter-spacing: -.02em; }
.lll-feature__text { margin: 8px 0 0; color: rgba(255, 255, 255, .7); font-size: .9375rem; line-height: 1.55; }
.lll-feature__text b { color: #fff; }
@media (min-width: 700px) { .lll-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lll-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lll-faq { margin: clamp(56px, 7vw, 96px) 0; }
.lll-faq__list { margin: 0 var(--llui-gutter, 16px); max-width: 760px; border-top: 1px solid rgba(255, 255, 255, .08); }
.lll-faq__item { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lll-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; list-style: none;
    color: #fff; font: 700 1rem/1.4 var(--font-body, sans-serif); }
.lll-faq__item summary::-webkit-details-marker { display: none; }
.lll-faq__item summary svg { width: 18px; height: 18px; flex: none; color: #ef4444; transition: transform var(--ll-dur-fast, 150ms) ease; }
.lll-faq__item[open] summary svg { transform: rotate(180deg); }
.lll-faq__item summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
.lll-faq__item p { margin: 0 0 18px; color: rgba(255, 255, 255, .75); line-height: 1.6; }
.lll-joinfoot { margin: 40px var(--llui-gutter, 16px) 56px; text-align: center; color: rgba(255, 255, 255, .7); }
.lll-last { margin: clamp(56px, 7vw, 96px) var(--llui-gutter, 16px) 64px; padding: clamp(36px, 5vw, 56px) 20px; text-align: center; border-radius: 12px;
    background: radial-gradient(ellipse 75% 60% at 50% -10%, rgba(196, 30, 58, .30), transparent 70%), #16161a; border: 1px solid rgba(255, 255, 255, .08); }
.lll-last__title { margin: 0; color: #fff; font: 800 clamp(1.9rem, 3.4vw, 2.9rem)/1.06 var(--font-heading, sans-serif); letter-spacing: -.035em; }
.lll-last__title::after { content: ""; display: block; width: 104px; height: 2px; margin: 18px auto 0;
    background: var(--ll-neon-line, linear-gradient(90deg, transparent, #ef4444 50%, transparent)); filter: var(--ll-neon-glow-lg, drop-shadow(0 0 3px rgba(239, 68, 68, 1))); }
.lll-last__line { margin: 18px auto 0; max-width: 52ch; color: #b0b0b0; font-size: 1.0625rem; line-height: 1.6; }
.lll-last__actions { justify-content: center; margin-top: 26px; }
.lll-hero__note b { color: #fff; }

/* =====================================================================================================================
   PHONES (LL-UI's own break, 700 px): she stands on top, whole; the words under her, never over her
   ================================================================================================================== */
@media (max-width: 699px) {
    .lll-hero { --lll-hero-h: auto; grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: calc(var(--llui-bar, 56px) + 8px); }
    /* she stands on top, whole; the headline, the line and the call still fit the first screen of a 375 x 812 phone */
    .lll-hero__art { order: 1; justify-self: center; height: min(50svh, 470px); max-width: 100%; }
    .lll-hero__body { order: 2; padding: 22px 0 40px; }
    .lll-hero__title { font-size: clamp(2.1rem, 9.6vw, 2.7rem); }
    .lll-hero__title::after { margin-top: 16px; }
    .lll-hero__line { margin-top: 16px; font-size: 1rem; line-height: 1.55; }
    .lll-hero__aside { margin-top: 18px; }
    .lll-hero__actions { margin-top: 20px; }
    .lll-hero::after { width: 86%; bottom: auto; top: calc(var(--llui-bar, 56px) + 8px + min(50svh, 470px)); }
    .lll-head { flex-direction: column; align-items: flex-start; }
    .lll-row .llui-row__head { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .lll-row--women { --llui-row-h: 64vw; }
    .lll-offer__art { height: 92vw; max-height: 460px; }
    .lll-numbers__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .lll-offer__embers { left: -10px; right: -10px; }
    .lll .lll-offer__cta .llui-btn, .lll .lll-offer__cta .llui-btn.lll-btn--price { padding-inline: 12px; font-size: .9375rem; }
    .lll-bar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
}

/* ---- REDUCED MOTION: nothing rises, lifts or sweeps ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .lll-hero__art { animation: none; }
    .lll-mosaic__item, .lll-mosaic__item::after { transition: none !important; }
    .lll-mosaic__item:hover { transform: none !important; }
    .lll-offer__embers { display: none; }
}

/* ---- The proof's own strip (admin only; never on a live page) --------------------------------------------------- */
.lll-proofbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #2a2a2a; background: #0b0b0c; color: #b0b0b0; font-size: 13px; }
.lll-proofbar i { font-style: normal; color: #808080; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-right: 4px; }
.lll-proofbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; margin: 0 4px; }
.lll-proofbar b { color: #ef4444; margin: 0 4px; }