/* ============================================================
   /refer/ luxe pass (2026-09-23). Page CSS for index.html ONLY.
   Load order on the page: bex-kit-v2.css -> affiliate.css -> THIS -> bex-kit-lux-v1.css.
   affiliate.css is shared with /refer/me/, welcome.html and terms.html, so every
   rule here is scoped to an rl- class (or the v7 band's own lhf3-/lhf5- classes)
   and never restyles a shared selector on its own.
   Colors come from kit tokens (--paper, --tone, --ink, --primary, --secondary,
   --mint) and the lux layer's tokens (--lux-*). No new palette, no hex.
   Motion budget: the vibe marquee (existing), the v7 face band (two rows plus
   its one shimmer). Everything stops under prefers-reduced-motion.
   ============================================================ */

/* ---------- the dark-ground kicker ----------
   The kit's .eyebrow gets its color from .s-sig/.s-dark at two classes, which
   would beat .lux-kicker. This carries the eyebrow's shape with no color, so
   the lux kicker color applies. */
.rl-kicker{display:block;font-size:.9375rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;margin-bottom:18px;line-height:1.55}

/* =========================================================================
   1. HERO. The standing hero-portrait pattern (lux-hero, ruled 2026-09-23).
   a. Two columns inside the SAME container as the nav: copy 55, portrait 45.
      The portrait column's right edge is the container edge, never the viewport.
   b. The portrait is anchored to the panel's BOTTOM edge and fills the panel
      height less ~9% headroom; object-fit contain, bottom right. The panel
      (overflow hidden) crops her; the asset itself is cropped above anything
      that should not show (here: cropped at the waist, 479x606).
   c. Nothing overlaps the portrait column.
   d. Her eyes land near the headline's first line (measured, not guessed).
   e. Under 900px: single column, portrait and backdrop not downloaded.
   The panel owns no vertical padding; the copy column carries it, so the
   portrait cell always runs the full panel height.
   ========================================================================= */
.rl-hero.lux-panel{border-radius:0;box-shadow:none}
.lux-hero{position:relative;overflow:hidden;isolation:isolate;padding:0}
.lux-hero-grid{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,54fr) minmax(0,46fr);column-gap:clamp(24px,3vw,48px);align-items:stretch}
.lux-hero-copy{align-self:center;padding:clamp(64px,7vw,104px) 0 clamp(40px,3.4vw,52px)}
.lux-hero-portrait{position:relative;min-height:100%}
.lux-hero-figure{position:absolute;left:0;right:0;bottom:0;height:96%;display:block;pointer-events:none}
.lux-hero-figure img{display:block;width:100%;height:100%;object-fit:contain;object-position:right bottom;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.38))}
/* the backdrop: a real salon floor, faded into the panel behind the portrait,
   dissolving toward the copy and off every edge. Mood only. */
.lux-hero-bg{position:absolute;z-index:0;top:0;bottom:0;right:0;pointer-events:none;
  /* starts at the middle of the nav-width container, so it never sits under the copy */
  left:calc(max((100% - var(--max)) / 2, 0px) + min(100%, var(--max)) / 2)}
.lux-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;
  mix-blend-mode:luminosity;opacity:.22;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%,#000 85%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 22%,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 40%,#000 85%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 22%,#000 70%,transparent 100%);
  mask-composite:intersect}

.rl-hero-copy{text-align:left}
.rl-hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1.02;margin:0 0 22px}
.rl-hero h1 .lux-it{display:block}
.rl-hero .lead{margin:0 0 30px;font-size:clamp(1.06rem,1.4vw,1.2rem);color:var(--lux-paper);opacity:.9;max-width:46ch}
.rl-hero .faces{justify-content:flex-start;margin-top:34px}
.rl-hero .faces img{border-color:var(--lux-primary);box-shadow:0 4px 14px rgba(0,0,0,.28)}
.rl-hero .faces-note{margin:12px 0 0;font-size:.95rem;color:var(--lux-paper);opacity:.78;text-wrap:pretty}

@media(max-width:899px){
  .lux-hero-grid{grid-template-columns:1fr}
  .lux-hero-portrait,.lux-hero-bg{display:none}
  .lux-hero-copy{padding:52px 0 56px}
  .rl-hero-copy{max-width:600px;margin:0 auto;text-align:center}
  .rl-hero .lead{margin-left:auto;margin-right:auto}
  .rl-hero .faces{justify-content:center}
  .rl-hero .faces-note{margin-left:auto;margin-right:auto;max-width:34ch}
}
@media(max-width:560px){
  .lux-hero-copy{padding:40px 0 48px}
  .rl-hero .btn{width:100%;max-width:360px}
}

/* =========================================================================
   2. THE MATH. Sits fully below the panel at every width, on the tan ground.
   ========================================================================= */
/* r3: the page's first tan section, and the start of one continuous tan run
   (math, how it works, the vibe, locations). The card carries the 100+ band's
   iridescent ground as a soft outer glow and a thin border. */
.rl-math{background:var(--sand);position:relative;z-index:3;display:flow-root;
  padding:clamp(36px,4vw,56px) 0 clamp(8px,1.5vw,16px)}
.rl-mathcard{position:relative;max-width:980px;margin:0 auto;
  border:2px solid transparent;border-radius:var(--lux-r-panel);
  background:linear-gradient(var(--tone),var(--tone)) padding-box,var(--lux-iridescent) border-box;
  box-shadow:var(--lux-sh-md);
  padding:clamp(30px,3.8vw,48px) clamp(20px,4vw,56px) clamp(28px,3.4vw,42px)}
/* the glow: the iridescent ground, blurred, behind the card (the section is the
   stacking context, so z-index:-1 paints between the tan and the card) */
.rl-mathcard::before{content:"";position:absolute;inset:-14px;z-index:-1;border-radius:inherit;
  background:var(--lux-iridescent);filter:blur(26px) saturate(1.5);opacity:.95;pointer-events:none}

.rl-math-h{text-align:center;color:var(--ink);font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1;margin:0 0 clamp(18px,2.4vw,28px)}
.rl-mathcard .mlab{color:var(--secondary);font-size:.82rem}
.rl-mathcard .mnum{color:var(--lux-deep);font-size:clamp(2.9rem,6.2vw,4.6rem);font-weight:500}
.rl-mathcard .msep{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.rl-mathcard .mathnote{color:var(--secondary);font-size:1rem;margin-top:20px}
@media(max-width:560px){
  .rl-mathcard .mathrow{display:grid;grid-template-columns:1fr;gap:4px}
  .rl-mathcard .mcell{flex-direction:row;justify-content:space-between;align-items:baseline;
    padding:12px 2px;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);min-width:0}
  .rl-mathcard .mcell:last-child{border-bottom:0}
  .rl-mathcard .mnum{font-size:2.6rem}
}

/* =========================================================================
   3. HOW IT WORKS. Lux cards, and the 1-2-3 discs carry the signature
   iridescent gradient at low strength: a quiet accent, no gloss, no sheen,
   a faint shadow. Static.
   ========================================================================= */
/* the tan run: sections flow into each other, so the padding between them tightens */
.rl-how{padding-top:clamp(48px,5vw,72px);padding-bottom:clamp(20px,2.5vw,36px)}
.rl-vibe.mqsec{padding-top:clamp(20px,2.5vw,36px);padding-bottom:clamp(8px,1.5vw,16px)}
.rl-where{padding-top:clamp(28px,3vw,44px)}
.rl-steps{gap:22px;max-width:1040px}
.rl-steps .step{background:var(--tone);border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  border-radius:var(--lux-r-card);box-shadow:var(--lux-sh-md);padding:30px 28px 28px}
.rl-steps .step h3{font-size:1.6rem}
.rl-steps .step p{font-size:1rem;line-height:1.6}
.rl-steps .no{width:52px;height:52px;margin-bottom:18px;
  background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),var(--lux-iridescent);
  color:var(--primary);font-family:var(--serif);font-weight:500;font-size:1.4rem;line-height:1;
  font-variant-numeric:lining-nums;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lux-deep) 10%,transparent),0 3px 10px color-mix(in srgb,var(--lux-deep) 8%,transparent)}
@media(max-width:760px){.rl-steps{gap:16px}.rl-steps .step{padding:26px 22px 24px}}

/* =========================================================================
   4. THE VIBE marquee stays; its tiles take the lux radius and depth.
   ========================================================================= */
.rl-vibe .lg-tile{border-radius:var(--lux-r-card);box-shadow:var(--sh-sm)}
.rl-vibe .marquee{padding:6px 0 26px}
.rl-vibe .lg-tile span{font-size:.9375rem;letter-spacing:.01em;text-transform:none;padding:6px 12px;left:10px;bottom:10px}
.rl-vibe .lg-tile.p{width:170px}
@media(max-width:560px){.rl-vibe .lg-tile.p{width:140px}}
@media(prefers-reduced-motion:reduce){.rl-vibe .mq-track{animation:none}}

/* =========================================================================
   5. WHERE YOU CAN EARN. Lux cards on sand.
   ========================================================================= */
.rl-locs{gap:22px}
.rl-locs .loc-card{background:var(--tone);border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  border-radius:var(--lux-r-card);box-shadow:var(--lux-sh-md);padding:28px 28px 26px}
.rl-locs .loc-card h3{font-size:1.7rem}
.rl-locs .loc-card p{font-size:1rem}
.rl-locs .tag{display:inline-flex;align-items:center;gap:8px}
.rl-locs .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary)}
.rl-more{margin-top:26px;font-size:1rem}

/* =========================================================================
   6. SIGN UP. A real salon floor blended into the deep panel, light type,
   the form card sitting on top and staying light.
   ========================================================================= */
.rl-signup.lux-panel{border-radius:0;box-shadow:none}
.rl-signup{position:relative;overflow:hidden;isolation:isolate;color:var(--lux-paper);
  padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(72px,8vw,120px)}
.rl-su-photo{position:absolute;inset:0;z-index:-2}
.rl-su-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  mix-blend-mode:luminosity;opacity:.5}
/* the scrim: deepest behind the headline, lifting toward the photo on the right */
.rl-signup::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,color-mix(in srgb,var(--lux-deep) 90%,transparent) 0%,color-mix(in srgb,var(--lux-deep) 72%,transparent) 48%,color-mix(in srgb,var(--lux-primary) 55%,transparent) 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--lux-deep) 30%,transparent) 0%,transparent 40%,color-mix(in srgb,var(--lux-deep) 60%,transparent) 100%)}
.rl-su-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(40px,6vw,96px);align-items:center}
.rl-su-head h2{color:var(--tone);font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.06;margin:0 0 18px}
.rl-su-head .rl-br{display:block}
.rl-su-head .lead{color:var(--lux-paper);opacity:.9;margin:0;max-width:40ch}
.rl-signup .card{background:var(--tone);border:0;border-radius:var(--lux-r-panel);
  box-shadow:0 30px 70px rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.18);padding:34px 32px 28px;color:var(--ink)}
.rl-signup .fnote{font-size:.95rem}
.rl-signup .alreadytxt{margin-top:20px;font-size:1rem;color:var(--lux-paper)}
.rl-signup .alreadytxt a{color:var(--lux-iris);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding:10px 2px;margin:-10px 0}
@media(max-width:959px){
  .rl-su-grid{grid-template-columns:1fr;gap:32px;max-width:620px}
  .rl-su-head{text-align:center}
  .rl-su-head .lead{margin:0 auto}
  .rl-su-photo img{object-position:center 30%}
  .rl-signup::before{background:linear-gradient(180deg,color-mix(in srgb,var(--lux-deep) 88%,transparent) 0%,color-mix(in srgb,var(--lux-deep) 74%,transparent) 45%,color-mix(in srgb,var(--lux-deep) 86%,transparent) 100%)}
}
@media(max-width:560px){.rl-signup .card{padding:26px 20px 22px}}

/* =========================================================================
   7. THE PROOF BAND, ported from /liberty-hill/founding/v7/ (lhf4.css +
   v7.css, net values after v7d). Same markup, same copy, same sizes. One
   deliberate difference: no .rise entrance (this page has no rise script,
   so the head stays lit). The rows never pause (stopped only under reduced motion).
   ========================================================================= */
.lhf5-sigband{background:var(--lux-iridescent);background-size:200% 200%;
  animation:luxshimmer 16s var(--lux-ease) infinite;position:relative;overflow:hidden;
  padding:clamp(44px,5vw,68px) 0 clamp(60px,6.5vw,88px)}
.lhf7-head{max-width:min(1100px,92%);margin-left:auto;margin-right:auto;text-align:center}
.lhf3-prohead{margin-bottom:clamp(30px,3.4vw,44px)}
.lhf3-h2{font-family:var(--serif);font-weight:300;line-height:1.04;letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}
.lhf5-sigband .lhf3-prohead .lhf3-h2{font-size:clamp(1.65rem,3.4vw,3.6rem);color:var(--lux-deep);max-width:none;margin-left:auto;margin-right:auto}
.lhf5-sigband .lhf3-sub{font-family:var(--sans);font-size:1.3125rem;line-height:1.5;margin:0 auto;max-width:80ch;text-wrap:balance;color:rgba(33,31,30,.76)}
.lhf5-sigband sup{font-size:max(15px,.58em);line-height:0;vertical-align:.42em}
.lhf3-mqrow{overflow:hidden;padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
.lhf3-mqrow+.lhf3-mqrow{margin-top:16px}
.lhf3-mqtrack{display:flex;gap:16px;width:max-content;will-change:transform}
.lhf3-mqrow-1 .lhf3-mqtrack{animation:lhf3slide 82s linear infinite}
.lhf3-mqrow-2 .lhf3-mqtrack{animation:lhf3slide 98s linear infinite reverse}
@keyframes lhf3slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lhf3-face{width:82px;height:82px;border-radius:50%;overflow:hidden;flex:none;position:relative;background:transparent}
.lhf3-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;border-radius:50%}
@media(max-width:860px){
  .lhf3-face{width:64px;height:64px}
  /* Centered on phones too, like every other section head on this page. */
  .lhf7-head{text-align:center;max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .lhf5-sigband{animation:none;background-position:0% 50%}
  .lhf3-mqrow .lhf3-mqtrack,.lhf3-mqrow-1 .lhf3-mqtrack,.lhf3-mqrow-2 .lhf3-mqtrack{animation:none}
}

/* =========================================================================
   8. TYPE FLOOR. Nothing on this page renders under 15px except the kit's own
   button labels (kept as the kit ships them). Same floor and kicker size as
   the v7 page (its --f7, .9375rem, .16em tracking).
   ========================================================================= */
main .eyebrow{font-size:.9375rem;letter-spacing:.16em}
.rl-mathcard .mlab{font-size:.9375rem;letter-spacing:.12em}
.rl-locs .tag{font-size:.9375rem;letter-spacing:.1em;padding:6px 14px}
.rl-signup .fl{font-size:.9375rem;letter-spacing:.01em;text-transform:none;color:var(--ink);margin-bottom:8px}
/* the terms link sits inside a 44px label row; give the link itself the same reach */
.rl-signup .checkline a{display:inline-block;padding:12px 0;margin:-12px 0}

/* section heads hold one line on desktop (design standard 13.1): the shared
   .sec-head caps at 640px, which wrapped "Send them somewhere..." at 1440 */
.rl-how .sec-head,.rl-where .sec-head{max-width:min(1100px,100%)}
.rl-how .sec-head h2,.rl-where .sec-head h2{font-size:clamp(2rem,3.6vw,3rem)}