/* Fit With Riley: bone and ink, a dusty blue for every action, a warm taupe for the food beats.
   Fraunces for the headlines, Inter for everything else. Pairs with scroll-fx.css; transforms and opacity only. */
/* The two faces, on one set of tokens: the head script sets data-theme on <html> before the first paint, and these two
   blocks are the only place in this file where a colour is written. */
:root,:root[data-theme="light"]{
  --ink:#15171a;--bone:#f6f5f1;--stone:#646b79;--blue:#46627f;--blue-deep:#3a5370;--taupe:#8d7967;--ink2:#3d424a;--paper:#fbfaf8;--tint:#efede7;--tint2:#f1f3f5;--blue-tint:#e8edf2;--taupe-tint:#f0eae3;--line:rgba(21,23,26,.1);--line2:rgba(21,23,26,.18);--action:#46627f;--action-hover:#3a5370;--on-blue:#f6f5f1;--arc:#46627f;--arc-rim:#96acc3;--shade:#15171a;--bezel:#0d0e10;--bezel-edge:#2a2c30;--screen:#eef1f4;--photo:#0c0d0f;--on-photo:#f6f5f1;--err:#9a3c3c;--logo-ring:transparent;color-scheme:light}
:root[data-theme="dark"]{
  --ink:#ece9e2;--bone:#14161a;--stone:#9aa0a8;--blue:#8aa5c2;--blue-deep:#46627f;--taupe:#b9a48f;--ink2:#c9c5bd;--paper:#1c1f24;--tint:#1f2227;--tint2:#171a1e;--blue-tint:#1b2430;--taupe-tint:#26211c;--line:rgba(236,233,226,.1);--line2:rgba(236,233,226,.2);--action:#46627f;--action-hover:#53708f;--on-blue:#f6f5f1;--arc:#46627f;--arc-rim:#46627f;--shade:#000000;--bezel:#0d0e10;--bezel-edge:#2a2c30;--screen:#eef1f4;--photo:#0c0d0f;--on-photo:#f6f5f1;--err:#e8a1a1;--logo-ring:rgba(236,233,226,.22);color-scheme:dark}
/* the names the shared fragments read under [data-theme] (the consent bar), pointed at this site's tokens */
:root[data-theme]{--bg:var(--bone);--surface:var(--paper);--surface-2:var(--tint);--text:var(--ink);--muted:var(--stone);--hairline:var(--line);--accent:var(--blue);--accent-ink:var(--bone);--focus:var(--blue)}
:root{
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif;
  --bar:68px;--gut:clamp(20px,4vw,48px);--sec:clamp(96px,12vw,172px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--bar) + 12px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.rl-native{scroll-behavior:smooth}
/* a revealed element has stopped moving: give its layer back */
.rl .fx.in{will-change:auto}
body.rl{background:var(--bone);color:var(--ink);font:300 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
em{font-style:italic}
.rl-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rl-wrap{width:100%;max-width:1220px;margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* type */
.rl-eyebrow{font:500 .72rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.rl-h1{font:300 clamp(2.5rem,5.1vw,5.6rem)/1.04 var(--serif);letter-spacing:-.025em;font-optical-sizing:auto}
.rl-h1 .ln{display:block;text-wrap:balance}
.rl-h1 em{font-weight:300;color:var(--ink2)}
.rl-h2{font:300 clamp(2rem,4.1vw,3.55rem)/1.07 var(--serif);letter-spacing:-.02em;font-optical-sizing:auto;max-width:20ch}
.rl-h3{font:400 1.4rem/1.2 var(--serif);letter-spacing:-.01em}
.rl-lede{font-size:1.14rem;line-height:1.7;color:var(--ink2);max-width:56ch}
.rl-note{font-size:.88rem;color:var(--stone)}

/* buttons: the blue is the action, everywhere */
.rl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:1px solid var(--action);border-radius:999px;background:var(--action);color:var(--on-blue);font:500 .93rem/1 var(--sans);letter-spacing:.01em;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,transform .3s;white-space:nowrap}
.rl-btn:hover{background:var(--action-hover);border-color:var(--action-hover);transform:translateY(-1px)}
.rl-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.rl-btn.ghost:hover{border-color:var(--ink);background:transparent}
.rl-btn.sm{min-height:44px;padding:0 20px;font-size:.86rem}
.rl-btn[disabled]{opacity:.5;pointer-events:none}
.rl-btn svg{width:16px;height:16px;flex:none}
.rl-chip{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border:1px solid color-mix(in srgb,var(--blue) 28%,transparent);border-radius:999px;background:color-mix(in srgb,var(--blue) 8%,transparent);color:var(--blue);font:500 .86rem/1.3 var(--sans);cursor:default;user-select:none}
.rl-chip i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55;flex:none}

/* the bar */
.rl-bar{position:sticky;top:0;z-index:50;height:var(--bar);background:color-mix(in srgb,var(--bone) 84%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border-bottom:1px solid transparent;transition:border-color .4s}
.rl-bar.on{border-bottom-color:var(--line)}
.rl-bar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.rl-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px}
.rl-brand img{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 1px var(--logo-ring)}
.rl-brand span{font:400 1.12rem/1 var(--serif);letter-spacing:-.005em}
.rl-nav{display:flex;align-items:center;gap:clamp(18px,2.1vw,30px)}
.rl-nav a:not(.rl-btn){display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-size:.88rem;font-weight:400;color:var(--ink2);transition:color .25s}
.rl-nav a:not(.rl-btn):hover{color:var(--blue)}
@media (max-width:520px){.rl-bar.st .rl-brand span{display:none}.rl-bar.st .rl-nav{gap:10px}}   /* the status bar keeps Home, Sign out and the switch on a phone */
.rl-menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;font-size:.88rem;font-weight:400}
.rl-menu-btn i{position:relative;width:18px;height:1px;background:currentColor;display:block}
.rl-menu-btn i:before,.rl-menu-btn i:after{content:"";position:absolute;left:0;width:18px;height:1px;background:currentColor}
.rl-menu-btn i:before{top:-6px}.rl-menu-btn i:after{top:6px}
.rl-menu{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column;padding:calc(var(--bar) + 24px + env(safe-area-inset-top)) max(var(--gut),env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(var(--gut),env(safe-area-inset-left));opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .35s;overflow:auto;overscroll-behavior:contain}
.rl-menu[hidden]{display:none}
.rl-menu.open{opacity:1;transform:none}
.rl-menu-top{position:absolute;top:env(safe-area-inset-top);left:0;right:0;height:var(--bar);display:flex;align-items:center;justify-content:space-between;padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
.rl-menu-x{min-height:44px;min-width:44px;border:0;background:none;cursor:pointer;font-size:.88rem}
.rl-menu nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rl-menu nav a{font:300 clamp(1.7rem,7vw,2.2rem)/1.2 var(--serif);padding:16px 0;border-bottom:1px solid var(--line)}
.rl-menu .rl-btn{margin-top:28px;align-self:flex-start}
html.rl-lock,html.rl-lock body{overflow:hidden}
@media (max-width:980px){.rl-nav{display:none}.rl-menu-btn{display:inline-flex}}

/* the hero: type on bone, and one quiet arc of light rising behind it */
.rl-hero{position:relative;overflow:hidden;min-height:calc(100vh - var(--bar));min-height:calc(100svh - var(--bar));display:flex;align-items:center;padding:clamp(48px,7vh,100px) 0 clamp(64px,10vh,130px);isolation:isolate}
.rl-hero-in{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;transform:translate3d(0,calc(var(--hp,0) * -7vh),0);opacity:calc(1 - var(--hp,0) * 1.15);will-change:transform,opacity}
.rl-hero .rl-h1{margin:22px auto 0;max-width:16.5em;padding-inline:.08em}   /* room for an italic word's overhang at a line's end */
.rl-hero .rl-lede{margin:34px auto 0;max-width:58ch;font-size:clamp(1.02rem,1.25vw,1.16rem)}
.rl-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:40px}
.rl-hero .rl-note{margin-top:22px}
.rl-arc{--S:min(1560px,165vw);position:absolute;z-index:0;left:50%;width:var(--S);height:var(--S);bottom:calc(var(--S) * -.5 - 120px);margin-left:calc(var(--S) * -.5);pointer-events:none;transform:translate3d(0,calc(var(--hp,0) * 9vh),0)}
.rl-arc i{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(closest-side,transparent 58%,color-mix(in srgb,var(--arc) 8%,transparent) 63%,color-mix(in srgb,var(--arc) 24%,transparent) 66%,color-mix(in srgb,var(--arc-rim) 22%,transparent) 67.6%,color-mix(in srgb,var(--arc) 10%,transparent) 71%,transparent 79%),
    radial-gradient(closest-side,color-mix(in srgb,var(--arc) 18%,transparent) 0%,color-mix(in srgb,var(--arc) 12%,transparent) 40%,color-mix(in srgb,var(--arc) 5%,transparent) 60%,transparent 70%);
  transform:scale(.965);opacity:.72;animation:rl-breathe 12s ease-in-out infinite;will-change:transform,opacity}
@keyframes rl-breathe{0%,100%{transform:scale(.965);opacity:.72}50%{transform:scale(1.025);opacity:1}}
@media (max-width:720px){.rl-arc{--S:190vw;bottom:calc(var(--S) * -.5 + 40px)}}
/* the photograph path, when Riley's own pictures arrive (page.hero.image) */
.rl-hero.has-photo{color:var(--on-photo);background:var(--photo)}
.rl-hero-photo{position:absolute;inset:0;z-index:0}
.rl-hero-photo img{width:100%;height:100%;object-fit:cover}
.rl-hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--photo) 72%,transparent),color-mix(in srgb,var(--photo) 38%,transparent) 55%,color-mix(in srgb,var(--photo) 22%,transparent))}
.rl-hero.has-photo .rl-arc{display:none}
.rl-hero.has-photo .rl-eyebrow,.rl-hero.has-photo .rl-note{color:color-mix(in srgb,var(--on-photo) 72%,transparent)}
.rl-hero.has-photo .rl-h1 em,.rl-hero.has-photo .rl-lede{color:color-mix(in srgb,var(--on-photo) 90%,transparent)}
.rl-hero.has-photo .rl-btn.ghost{color:var(--on-photo);border-color:color-mix(in srgb,var(--on-photo) 45%,transparent)}
/* the headline arrives word by word */
.rl-h1 .wd{padding:.05em .07em .16em 0;margin:-.05em -.07em -.16em 0}
.rl-h1 .wd > span{transition-duration:1.25s}
.rl-hero .rl-up{opacity:0;transform:translate3d(0,16px,0);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--dl,0ms)}
.rl-hero.in .rl-up{opacity:1;transform:none}

/* sections */
.rl-sec{padding-block:var(--sec)}
.rl-bleed{background:var(--tint)}
.rl-col{max-width:calc(62ch + var(--gut) * 2)}
.rl-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(40px,6vw,72px)}
.rl-head .rl-lede{max-width:40ch}

/* 2. this is you */
.rl-you{padding-block:var(--sec)}
.rl-beats{display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px)}
.rl-beat{font:300 clamp(1.55rem,3vw,2.5rem)/1.22 var(--serif);letter-spacing:-.015em;max-width:30ch}
.rl-beat.fx{transition-duration:1.3s;transition-delay:calc(var(--i,0) * 520ms)}
.rl-you .rl-body{margin-top:clamp(44px,6vw,72px);font-size:clamp(1.06rem,1.3vw,1.2rem);line-height:1.8;color:var(--ink2);max-width:60ch}
.rl-you .rl-body.fx{transition-delay:1.5s}

/* 3. what changes */
.rl-changes .rl-h2{margin-bottom:clamp(44px,6vw,76px)}
.rl-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.rl-card{grid-column:span 2;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:34px 30px 36px;display:flex;flex-direction:column;gap:14px}
.rl-card:nth-child(4),.rl-card:nth-child(5){grid-column:span 3}
.rl-card .n{font:italic 300 1.05rem/1 var(--serif);color:var(--blue)}
.rl-card[data-accent=taupe] .n{color:var(--taupe)}
.rl-card[data-accent=taupe]{background:linear-gradient(180deg,var(--taupe-tint),var(--paper) 70%)}
.rl-card h3{font:400 clamp(1.3rem,1.7vw,1.5rem)/1.2 var(--serif);letter-spacing:-.01em}
.rl-card p{color:var(--ink2);font-size:1rem;line-height:1.7}
@media (max-width:980px){.rl-cards{grid-template-columns:1fr 1fr}.rl-card,.rl-card:nth-child(4),.rl-card:nth-child(5){grid-column:span 1}.rl-card:nth-child(5){grid-column:1/-1}}
@media (max-width:640px){.rl-cards{grid-template-columns:1fr}.rl-card:nth-child(5){grid-column:auto}.rl-card{padding:28px 24px 30px}}

/* 4. clients: the interview reels, Instagram's own player only when asked for */
/* a card is never narrower than Instagram's player (326 px) nor wider than the covers' true size (360 px) */
.rl-reels{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(18px,2.4vw,30px)}
.rl-reel{flex:1 1 326px;min-width:0;max-width:360px}
.rl-reel-face{display:block;width:100%;text-align:left;border:0;background:var(--paper);border-radius:20px;overflow:hidden;cursor:pointer;box-shadow:0 1px 0 var(--line),0 24px 50px -36px color-mix(in srgb,var(--shade) 40%,transparent);transform-style:preserve-3d}
.rl-reel-media{position:relative;display:block;aspect-ratio:16/9;background:var(--tint);overflow:hidden}
.rl-reel-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.rl-reel-face:hover .rl-reel-media img{transform:scale(1.03)}
.rl-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:color-mix(in srgb,var(--paper) 92%,transparent);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--shade) 45%,transparent);display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .3s}
.rl-play:after{content:"";margin-left:4px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--blue)}
.rl-reel-face:hover .rl-play{transform:scale(1.07);background:var(--paper)}
.rl-reel-txt{display:block;padding:22px 24px 26px;transform:translateZ(20px)}
@media (min-width:721px){.rl-reel-face .rl-reel-txt{min-height:156px}}
.rl-reel-t{display:block;font:400 1.2rem/1.32 var(--serif);letter-spacing:-.01em}
.rl-reel-l{display:block;margin-top:10px;font-size:.86rem;color:var(--stone)}
.rl-reel-embed{background:var(--paper);border-radius:20px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 24px 50px -36px color-mix(in srgb,var(--shade) 40%,transparent)}
.rl-reel-embed iframe{display:block;width:100%;height:var(--embed-h,440px);border:0;background:var(--paper);transition:height .4s}
.rl-reel-embed .rl-reel-txt{transform:none;padding:18px 22px 22px}

/* 5. the first 30 days: a line that draws as you scroll, five stops lighting in turn */
.rl-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,110px);align-items:start}
.rl-split-h{position:sticky;top:calc(var(--bar) + 48px)}
.rl-tl{position:relative;padding-left:64px}
.rl-tl-line{position:absolute;left:17px;top:18px;bottom:18px;width:2px;height:calc(100% - 36px);overflow:visible}
.rl-tl-track{position:absolute;left:17px;top:18px;bottom:18px;width:1px;background:var(--line2)}
.rl-tl-line line{stroke:var(--blue);stroke-width:2}
.rl-tl ol{list-style:none;display:flex;flex-direction:column;gap:clamp(44px,6vw,72px)}
.rl-stop{position:relative}
.rl-dot{position:absolute;left:-64px;top:-2px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:var(--bone);display:flex;align-items:center;justify-content:center;font:500 .8rem/1 var(--sans);color:var(--stone);transition:background-color .5s,border-color .5s,color .5s,box-shadow .8s}
.rl-stop h3{font:400 clamp(1.4rem,2vw,1.75rem)/1.2 var(--serif);letter-spacing:-.01em;color:var(--stone);transition:color .6s}
.rl-stop p{margin-top:10px;color:var(--stone);max-width:46ch;transition:color .6s}
.rl-stop.lit .rl-dot{background:var(--action);border-color:var(--blue);color:var(--on-blue);box-shadow:0 0 0 7px color-mix(in srgb,var(--blue) 14%,transparent)}
.rl-stop.lit h3{color:var(--ink)}
.rl-stop.lit p{color:var(--ink2)}
.no-fx .rl-tl-line line{stroke-dashoffset:0}
@media (max-width:860px){.rl-split{grid-template-columns:1fr}.rl-split-h{position:static}}
@media (max-width:640px){.rl-tl{padding-left:54px}.rl-dot{left:-54px;width:32px;height:32px}.rl-tl-line,.rl-tl-track{left:15px;top:16px}}

/* 6. the app: the real screens, in a plain frame */
.rl-app{overflow:hidden;background:linear-gradient(180deg,var(--blue-tint),var(--tint2))}
.rl-app-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
.rl-app .rl-lede{margin-top:22px}
.rl-app-lines{list-style:none;margin-top:38px;border-top:1px solid color-mix(in srgb,var(--blue) 18%,transparent)}
.rl-app-lines li{padding:16px 0 16px 28px;border-bottom:1px solid color-mix(in srgb,var(--blue) 18%,transparent);position:relative;color:var(--ink2)}
.rl-app-lines li:before{content:"";position:absolute;left:2px;top:27px;width:12px;height:1px;background:var(--blue)}
.rl-app-lines li.food:before{background:var(--taupe)}
.rl-app-get{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.rl-app .rl-note{margin-top:16px;max-width:44ch}
.rl-phones{position:relative;height:clamp(520px,50vw,660px);transform-origin:50% 60%}
.rl-phone{position:absolute;left:50%;top:50%;padding:9px;border-radius:46px;background:var(--bezel);box-shadow:inset 0 0 0 1.5px var(--bezel-edge),0 50px 80px -40px color-mix(in srgb,var(--shade) 55%,transparent),0 20px 30px -24px color-mix(in srgb,var(--shade) 40%,transparent)}
.rl-phone img{width:100%;height:auto;border-radius:37px;background:var(--screen)}
.rl-phone.mid{z-index:3;width:clamp(220px,20vw,272px);transform:translate(-50%,-50%)}
.rl-phone.side{z-index:2;width:clamp(178px,16vw,220px)}
.rl-phone.side.l{transform:translate(calc(-50% - clamp(112px,10.6vw,150px)),-46%) rotate(-7deg)}
.rl-phone.side.r{transform:translate(calc(-50% + clamp(112px,10.6vw,150px)),-46%) rotate(7deg)}
.rl-phone.side img{opacity:.97}
@media (max-width:980px){.rl-app-in{grid-template-columns:1fr}.rl-phones{height:clamp(460px,110vw,560px)}}
/* phones: the three frames fan inside the screen's width, the middle one in front, nothing past the edges */
@media (max-width:520px){.rl-phones{height:min(122vw,500px)}.rl-phone{padding:6px;border-radius:30px}.rl-phone img{border-radius:25px}.rl-phone.mid{width:min(47vw,200px)}.rl-phone.side{width:min(36vw,154px)}.rl-phone.side.l{transform:translate(calc(-50% - 23vw),-46%) rotate(-6deg)}.rl-phone.side.r{transform:translate(calc(-50% + 23vw),-46%) rotate(6deg)}}

/* 7. Riley, the guide */
.rl-riley-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,7vw,110px);align-items:start}
.rl-portrait{aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--tint);display:flex;align-items:center;justify-content:center}
.rl-portrait img.logo{width:58%;max-width:240px;height:auto}
.rl-portrait img.photo{width:100%;height:100%;object-fit:cover}
.rl-facts{margin-top:26px;font-size:1.02rem;line-height:1.75;color:var(--ink2);max-width:58ch}
.rl-voice{margin-top:34px;padding-left:26px;border-left:1px solid var(--blue)}
.rl-voice p{font:300 clamp(1.25rem,1.9vw,1.6rem)/1.5 var(--serif);letter-spacing:-.01em;max-width:44ch}
.rl-honest{margin-top:30px;font-size:1.02rem;color:var(--ink2);max-width:52ch}
@media (max-width:860px){.rl-riley-in{grid-template-columns:1fr}.rl-portrait{max-width:340px;width:100%}}

/* 8. the Men's Wellness Group: a quiet taupe band */
.rl-group{background:var(--taupe-tint);padding-block:clamp(72px,9vw,120px)}
.rl-group-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.rl-group-img{width:200px;height:200px;border-radius:50%;object-fit:cover}
.rl-group .rl-h2{font-size:clamp(1.75rem,3vw,2.6rem)}
.rl-group p{margin-top:16px;color:var(--ink2);max-width:56ch}
.rl-group .rl-btn{margin-top:28px}
@media (max-width:640px){.rl-group-in{grid-template-columns:1fr}.rl-group-img{width:132px;height:132px}}

/* 9. Instagram */
.rl-ig-in{display:grid;grid-template-columns:minmax(min(100%,340px),1fr) minmax(0,604px);gap:clamp(40px,6vw,96px);align-items:center}
.rl-ig .rl-h2{overflow-wrap:anywhere}
.rl-ig-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.rl-ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:604px}
.rl-ig-grid a{display:block;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--tint)}
.rl-ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(.9)}
.rl-ig-grid a:hover img{transform:scale(1.04);filter:saturate(1)}
@media (max-width:1000px){.rl-ig-in{grid-template-columns:minmax(0,1fr)}}

/* 10. closing */
.rl-close{position:relative;overflow:hidden;text-align:center;padding-block:clamp(120px,15vw,200px);isolation:isolate}
.rl-close .rl-arc{--S:min(1200px,150vw);bottom:calc(var(--S) * -.5 - 60px);opacity:.85}
.rl-close .rl-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.rl-close .rl-h2{font-size:clamp(2.3rem,5vw,4.4rem);max-width:17ch;margin-inline:auto}
.rl-close p{margin-top:24px;color:var(--ink2)}
.rl-close .rl-btn{margin-top:36px}

/* footer */
.rl-foot{border-top:1px solid var(--line);padding:40px 0 calc(48px + env(safe-area-inset-bottom));font-size:.88rem;color:var(--stone)}
.rl-foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 36px}
.rl-foot-brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink2);min-height:44px}
.rl-foot-brand img{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px var(--logo-ring)}
.rl-foot nav{display:flex;flex-wrap:wrap;gap:4px 26px}
.rl-foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink2);transition:color .25s}
.rl-foot nav a:hover{color:var(--blue)}
.rl-drafttag{position:fixed;left:14px;bottom:14px;z-index:30;background:var(--ink);color:var(--bone);font:400 .7rem/1 var(--sans);letter-spacing:.08em;padding:8px 12px;border-radius:999px;opacity:.55;pointer-events:none}
@media (max-width:640px){.rl-drafttag{left:calc(8px + env(safe-area-inset-left));bottom:calc(8px + env(safe-area-inset-bottom));font-size:.6rem;padding:6px 9px;opacity:.45}}

/* the forms: apply, sign in, status */
/* a form page fills the screen, so the footer starts below the fold and nothing jumps when the status arrives */
.rl-page{padding-block:clamp(56px,8vw,112px) clamp(80px,10vw,140px);min-height:calc(100vh - var(--bar));min-height:calc(100svh - var(--bar))}
.rl-form-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.rl-form-grid .rl-h1,.rl-page .rl-h1{font-size:clamp(2.2rem,4.2vw,3.7rem);max-width:14ch}
.rl-page .rl-lede{margin-top:22px}
.rl-form label{display:block;margin:26px 0 9px;font:500 .74rem/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.rl-form label:first-child{margin-top:0}
.rl-form input,.rl-form textarea,.rl-form select{width:100%;min-height:52px;padding:14px 16px;border:1px solid var(--line2);border-radius:14px;background:var(--paper);color:var(--ink);font:300 1rem/1.5 var(--sans);outline:none;transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.rl-form select{background-image:linear-gradient(45deg,transparent 50%,var(--stone) 50%),linear-gradient(135deg,var(--stone) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.rl-form textarea{min-height:110px;resize:vertical}
.rl-form input:focus,.rl-form textarea:focus,.rl-form select:focus{border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent)}
.rl-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.rl-row > div > label{margin-top:0}
.rl-form .err{min-height:1.4em;margin-top:16px;color:var(--err);font-size:.92rem}
.rl-form .go{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.rl-form .go a{font-size:.9rem;color:var(--stone);padding:12px 0}
.rl-form .go a:hover{color:var(--blue)}
.rl-small{font-size:.86rem;color:var(--stone);margin-top:18px}
.rl-invite{margin-top:34px;padding:26px 26px 28px;border-radius:20px;background:var(--blue-tint);border:1px solid color-mix(in srgb,var(--blue) 22%,transparent)}
.rl-invite p{color:var(--ink);max-width:52ch}
.rl-invite code{font:500 1.05rem/1 var(--sans);letter-spacing:.08em;background:var(--paper);border:1px solid color-mix(in srgb,var(--blue) 28%,transparent);border-radius:8px;padding:4px 8px;white-space:nowrap}
.rl-invite .rl-btn{margin-top:20px}
.rl-table{width:100%;border-collapse:collapse;margin-top:30px;font-size:.95rem}
.rl-table th,.rl-table td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.rl-table th{font:500 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.rl-pill{display:inline-block;padding:3px 10px;border:1px solid var(--line2);border-radius:999px;font-size:.78rem}
.rl-pill.confirmed{border-color:var(--blue);color:var(--blue)}
@media (max-width:860px){.rl-form-grid{grid-template-columns:1fr}.rl-row{grid-template-columns:1fr}.rl-row > div + div > label{margin-top:26px}}

/* the appearance switch: the system's compact sun and moon (the markup and the script are shared; this is its look here).
   The pill is a blue tint sliding behind the face that is on; the icons are stone, the one that is on is ink. */
.rl .nv-theme{--i:0;--n:3;position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch;flex:none;margin:0;padding:0;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line2);isolation:isolate;vertical-align:middle;-webkit-tap-highlight-color:transparent;user-select:none}
.rl .nv-theme-c{--n:2}
.rl .nv-theme-pill{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc(100% / var(--n) - 6px);border-radius:999px;background:color-mix(in srgb,var(--blue) 22%,var(--paper));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 45%,transparent);pointer-events:none;transform:translateX(calc(var(--i) * (100% + 6px)));transition:transform .24s cubic-bezier(.3,.7,.2,1)}
.rl .nv-theme button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-width:44px;width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--stone);font:inherit;cursor:pointer;transition:color .24s ease;-webkit-appearance:none;appearance:none}
.rl .nv-theme svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rl .nv-theme button:hover{color:var(--ink)}
.rl .nv-theme button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[data-theme="dark"] .rl .nv-theme-c{--i:1}
[data-theme="light"] .rl .nv-theme-c [data-mode="light"],[data-theme="dark"] .rl .nv-theme-c [data-mode="dark"]{color:var(--ink)}
.rl-menu .rl-ap{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.rl-menu .rl-ap + .rl-btn{margin-top:24px}

@media (prefers-reduced-motion:reduce){
  .rl-arc i{animation:none;transform:none;opacity:.9}
  .rl-hero .rl-up{opacity:1;transform:none;transition:none}
  .rl-hero-in,.rl-arc{transform:none!important;opacity:1}
  .rl-reel-media img,.rl-ig-grid img{transition:none}
  .rl-menu{transition:none}
  .rl .nv-theme-pill,.rl .nv-theme button{transition:none}
}