/* Recomp Coach - shared site stylesheet (2026-08-20).
   One file for every marketing page so the nav, footer, cards, tables and the
   CTA band are the same object on /features, /compare, /compounds, the tools
   and the home page, rather than five hand copies that drift. Tokens match the
   app's Green theme (constants/theme.ts). Pages add a small inline <style>
   for anything unique to them. Served from /static with a long cache;
   `style-src 'self' 'unsafe-inline'` on every page that links it. */

/* ---------- tokens ---------- */
:root{
  --bg:#0E1113; --bg-2:#0B0E0D; --surface:#151A18; --surface-2:#1B211E; --surface-3:#222A26;
  --line:rgba(169,180,174,.14); --line-2:rgba(169,180,174,.26);
  --text:#E9ECEA; --muted:#A9B4AE; --dim:#8A948F;
  --accent:#4CCB52; --accent-2:#5EE86A; --on-accent:#0A1509; --glow:rgba(76,203,82,.28);
  --warn:#E8A33D; --bad:#E5484D; --info:#6FB3FF;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --r-lg:22px; --r-md:16px; --r-sm:12px; --pad:20px; --max:1120px; --max-prose:860px;
}
@media (min-width:720px){:root{--pad:32px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
code{font-family:var(--mono);font-size:.86em;color:var(--text);background:rgba(233,236,234,.07);padding:2px 6px;border-radius:6px}
.wrap{width:min(100% - 2*var(--pad),var(--max));margin-inline:auto}
.wrap.narrow{max-width:var(--max-prose)}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--accent);border-radius:2px}
.h1{font-size:clamp(2.2rem,8vw,4rem)}
.h2{font-size:clamp(1.9rem,6.4vw,3rem)}
.h3{font-size:clamp(1.25rem,4vw,1.6rem)}
.lead{font-size:clamp(1.02rem,3.6vw,1.2rem);color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.small{font-size:.9rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.sec{padding:clamp(56px,11vw,110px) 0;position:relative}
.sec.tight{padding:clamp(36px,7vw,64px) 0}
.sec.flush{padding-top:0}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(26px,6vw,46px)}
.sec-head.center{text-align:center;justify-items:center}
.sec-head.center .lead{margin-inline:auto}
.page-head{padding:clamp(36px,8vw,84px) 0 clamp(22px,5vw,40px)}
.page-head h1{font-size:clamp(2.1rem,7.2vw,3.6rem);margin-top:14px;max-width:18ch}
.page-head .lead{margin-top:16px}
.page-head .actions{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:24px}
.divider{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;padding:calc(10px + env(safe-area-inset-top)) 0 10px;background:rgba(14,17,19,.72);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--line)}
.nav.over{position:fixed;inset:0 0 auto 0;background:linear-gradient(180deg,rgba(14,17,19,.72),rgba(14,17,19,0));border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .35s var(--ease),border-color .35s var(--ease)}
.nav.over:not(.solid) .nav-links a{color:var(--text);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.nav.over.solid{background:rgba(14,17,19,.72);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:800;letter-spacing:-.02em;font-size:1.05rem;white-space:nowrap}
.brand:hover{text-decoration:none}
.mark{width:32px;height:32px;flex:none}
.nav-links{display:none;align-items:center;gap:4px;margin-left:auto}
.nav-links a{color:var(--muted);font-weight:650;font-size:.92rem;padding:8px 12px;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--text);background:rgba(233,236,234,.06);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--text);background:rgba(76,203,82,.1)}
.nav-right{display:flex;align-items:center;gap:10px;flex:none}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.92rem;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 6px 24px -6px var(--glow);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.pill:hover{transform:translateY(-1px);box-shadow:0 10px 30px -6px var(--glow);background:var(--accent-2);text-decoration:none}
.pill:active{transform:translateY(0) scale(.98)}
.pill svg{width:14px;height:14px}
/* Mobile menu: a <details>, so it works with no script and is one focus stop. */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);display:grid;place-items:center;color:var(--text)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:18px;height:18px}
.menu summary .x{display:none}
.menu[open] summary .bars{display:none}
.menu[open] summary .x{display:block}
/* `max-width` because the panel is anchored to the button (right:0) rather than
   to the viewport, and carries a 230px min-width: on a narrow phone a longer
   item could push its left edge off screen, where `overflow-x:hidden` on body
   makes it unreachable rather than scrollable. It fits today at 320px with room
   to spare; this stops that being luck (2026-08-20). */
.menu .panel{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;max-width:calc(100vw - 24px);padding:8px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line-2);box-shadow:0 24px 60px -20px rgba(0,0,0,.8);display:grid;gap:2px;animation:menuIn .25s var(--ease)}
.menu .panel a{display:block;padding:11px 12px;border-radius:10px;color:var(--text);font-weight:650}
.menu .panel a:hover{background:rgba(233,236,234,.06);text-decoration:none}
.menu .panel a[aria-current="page"]{color:var(--accent);background:rgba(76,203,82,.1)}
.menu .panel .grp{padding:10px 12px 4px;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (min-width:900px){.nav-links{display:flex}.menu{display:none}}
/* Narrow phones: the menu button is the only route to the rest of the site, so
   it is the last thing allowed to lose room. See the note in the repo history.
   Raised from 379.98px on 2026-08-20, after measuring rather than reasoning.
   The nav row is brand 159 + gap 14 + nav-right 188 = 361, and `.nav-right` is
   `flex:0 0 auto`, so it overruns the wrap's 20px gutter and its right edge
   lands at x=381 whatever the viewport is. At vw=380 that clipped 1px off the
   42px menu button; at 381 and up nothing is clipped and the only residue is an
   asymmetric right gutter. So the hole this closes is one pixel wide, and the
   breakpoint moves just past it - NOT to 401px, which would have hidden the
   "Get the app" label on every 390 and 393px iPhone to fix a 380px problem. */
@media (max-width:381.98px){
  .nav .wrap{gap:8px}
  .brand{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font-size:1rem}
  .pill{padding:10px 12px}
  .pill .label{display:none}
}

/* ---------- buttons / cta ---------- */
.badge{display:inline-block;height:54px;border-radius:9px;transition:transform .25s var(--ease),filter .25s}
.badge img{height:100%;width:auto}
.badge:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid var(--line-2);color:var(--text);font-weight:700;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.btn-line:hover{border-color:var(--accent);background:rgba(76,203,82,.08);transform:translateY(-1px);text-decoration:none}
.btn-line svg{width:16px;height:16px}
.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:800;transition:background .2s,transform .25s var(--ease)}
.btn:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:.86rem;font-weight:600}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust svg{width:14px;height:14px;color:var(--accent);flex:none}
.band{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid rgba(76,203,82,.28);background:linear-gradient(135deg,rgba(76,203,82,.14),rgba(21,26,24,1) 55%);padding:clamp(26px,5vw,44px);display:grid;gap:18px;box-shadow:0 40px 100px -50px var(--glow)}
.band::after{content:"";position:absolute;right:-20%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(76,203,82,.18),transparent 70%);pointer-events:none}
.band h2{font-size:clamp(1.6rem,5.4vw,2.4rem);max-width:18ch}
.band p{color:var(--muted);max-width:56ch}
.band .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
@media (min-width:900px){.band{grid-template-columns:1.2fr 1fr;align-items:center}.band .cta{justify-content:flex-end}}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:12px}
@media (min-width:720px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.card{padding:22px 20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .5s var(--ease)}
.card.lift:hover{transform:translateY(-3px);border-color:var(--line-2)}
.card.lift::after{content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(76,203,82,.13),transparent 70%);opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.card.lift:hover::after{opacity:1}
.card h3{font-size:1.08rem;margin-bottom:6px}
.card p{color:var(--muted);font-size:.95rem}
.card p+p{margin-top:8px}
.card.pad-lg{padding:clamp(22px,4vw,32px)}
.ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(76,203,82,.1);border:1px solid rgba(76,203,82,.22);color:var(--accent);margin-bottom:14px;flex:none}
.ic svg{width:20px;height:20px}
.tag{display:inline-flex;align-items:center;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:rgba(76,203,82,.14);color:var(--accent);border:1px solid rgba(76,203,82,.3)}
.tag.neutral{background:rgba(169,180,174,.1);color:var(--muted);border-color:var(--line-2)}
.tag.warn{background:rgba(232,163,61,.12);color:var(--warn);border-color:rgba(232,163,61,.35)}
.card .tag.corner{position:absolute;top:16px;right:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);font-size:.86rem;font-weight:600;background:rgba(27,33,30,.6)}
.chip b{color:var(--text);font-weight:700}
.chip.btn-chip{appearance:none;cursor:pointer;background:var(--surface-2);color:var(--text);padding:10px 15px;font-size:.94rem;font-weight:650;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.chip.btn-chip:hover{background:var(--surface-3)}
.chip.btn-chip[aria-pressed="true"]{border-color:var(--accent);background:rgba(76,203,82,.12);color:var(--accent)}

/* ---------- stats ---------- */
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:720px){.nums{grid-template-columns:repeat(4,1fr)}}
.num{padding:18px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.num b{display:block;font-size:clamp(1.8rem,7vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.num b em{font-style:normal;color:var(--accent)}
.num span{display:block;margin-top:6px;color:var(--muted);font-size:.9rem}

/* ---------- split rows (text beside a screenshot) ---------- */
.split{display:grid;gap:22px;align-items:center}
.split .txt{display:grid;gap:12px}
.split .txt h3{font-size:clamp(1.35rem,4.6vw,1.9rem)}
.split .txt p{color:var(--muted)}
.split .txt ul{list-style:none;display:grid;gap:8px}
.split .txt li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.96rem}
.split .txt li svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--accent)}
.split .txt li b{color:var(--text);font-weight:600}
.split .shot{justify-self:center;width:min(100%,300px);position:relative}
.split .shot::before{content:"";position:absolute;inset:6% -12% -6%;border-radius:50%;background:radial-gradient(closest-side,rgba(76,203,82,.22),transparent 72%);z-index:-1}
.split .shot img{width:100%;height:auto;aspect-ratio:640/1348;border-radius:34px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:48px}.split.flip .txt{order:2}.split.flip .shot{order:1}.split .shot{width:min(100%,340px)}}
.split+.split{margin-top:clamp(48px,9vw,88px)}

/* ---------- steps ---------- */
.steps{display:grid;gap:14px;counter-reset:step}
.step{position:relative;padding:22px 20px 22px 66px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:20px;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(76,203,82,.12);color:var(--accent);font-weight:800;font-size:.95rem;border:1px solid rgba(76,203,82,.25)}
.step h3{font-size:1.15rem;margin-bottom:6px}
.step p{color:var(--muted);font-size:.98rem}
@media (min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}.step{padding:70px 22px 26px 22px}.step::before{left:20px;top:20px}}

/* ---------- comparison table ---------- */
.cmp{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);overflow:hidden}
.cmp-scroll{overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.cmp th,.cmp td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.cmp tr:last-child td{border-bottom:0}
.cmp th{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700;background:rgba(27,33,30,.6);position:sticky;top:0}
.cmp th.us,.cmp td.us{background:rgba(76,203,82,.06);color:var(--text)}
.cmp th.us{color:var(--accent)}
.cmp td:first-child{color:var(--text);font-weight:600;min-width:150px}
.cmp td.o{color:var(--dim)}
.cmp .y{color:var(--accent);font-weight:700}
.cmp .n{color:var(--dim)}
.cmp .p{color:var(--warn);font-weight:600}
@media (max-width:420px){.cmp th,.cmp td{padding:12px 10px;font-size:.82rem}}

/* ---------- forms (tools) ---------- */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.field{display:grid;gap:6px}
.field>span{font-size:.8rem;color:var(--dim);font-weight:600}
input[type=number],input[type=text],input[type=search],select{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 14px;font-size:1.05rem;font-variant-numeric:tabular-nums;width:100%;color:var(--text)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input:focus,select:focus{border-color:var(--accent);outline:none}
input::placeholder{color:var(--dim)}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);gap:2px}
.seg button{appearance:none;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:.9rem;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.hint{font-size:.85rem;color:var(--dim);margin-top:8px}
.note{margin-top:18px;padding:14px 16px;background:rgba(232,163,61,.09);border-left:3px solid var(--warn);border-radius:var(--r-sm);font-size:.93rem;color:var(--muted)}
.note b{color:var(--text)}
.note.ok{background:rgba(76,203,82,.08);border-left-color:var(--accent)}
.note.info{background:rgba(111,179,255,.08);border-left-color:var(--info)}
.big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px}
.kcal{font-size:clamp(2.6rem,10vw,4rem);font-weight:850;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent)}
.kcal-u{font-size:1rem;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.kv{list-style:none;display:grid}
.kv li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.kv li:last-child{border-bottom:0}
.kv .k{color:var(--muted);font-size:.95rem}
.kv .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:650;flex:0 0 auto}
.kv li.tot{border-top:2px solid var(--line-2);border-bottom:0;margin-top:4px;padding-top:13px}
.kv li.tot .k{color:var(--text);font-weight:750}
.kv li.tot .v{color:var(--accent)}
.bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .6s var(--ease)}

/* ---------- accordion ---------- */
details.acc{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;transition:border-color .3s}
details.acc[open]{border-color:var(--line-2)}
details.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;font-weight:700;font-size:1rem}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary .chev{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:transform .4s var(--ease),background .3s,border-color .3s}
details.acc summary .chev svg{width:12px;height:12px}
details.acc[open] summary .chev{transform:rotate(45deg);background:rgba(76,203,82,.12);border-color:rgba(76,203,82,.4);color:var(--accent)}
details.acc .ans{padding:0 20px 20px;color:var(--muted);font-size:.96rem;animation:fadeIn .5s var(--ease)}
details.acc .ans p+p{margin-top:8px}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.accs{display:grid;gap:10px}

/* ---------- prose ---------- */
.prose{color:var(--muted);font-size:1rem;max-width:68ch}
.prose p+p{margin-top:12px}
.prose strong{color:var(--text)}
.prose ul{padding-left:1.1em;display:grid;gap:6px}
.prose h2,.prose h3{color:var(--text);margin-top:28px;margin-bottom:10px}
.prose h2{font-size:1.5rem}
.prose h3{font-size:1.15rem}
.callout{padding:18px 20px;border-radius:var(--r-lg);border:1px solid rgba(76,203,82,.22);background:linear-gradient(135deg,rgba(76,203,82,.08),rgba(76,203,82,.02))}
.callout h3{font-size:1.1rem;margin-bottom:8px}
.callout p{color:var(--muted);font-size:.95rem}

/* ---------- footer ---------- */
footer{padding:36px 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--dim);font-size:.86rem;background:var(--bg-2)}
footer .wrap{display:grid;gap:18px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}
footer nav a{color:var(--muted);font-weight:600}
footer nav a:hover{color:var(--text)}
footer .fine{font-size:.78rem;line-height:1.6;max-width:70ch}
@media (min-width:720px){footer .wrap{grid-template-columns:1fr auto;align-items:start}footer .fine{grid-column:1/-1}}

/* ---------- reveal-on-scroll (site.js adds .js to <html>, .in to elements) ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}