/* SCORCH — clear glass (Raza, 21 Oct 2026: "I want a glass … the glass should not have any colour … like Apple …
   reflections … the blur is not seeing … make it much more premium"). Made the way Apple-style glass is made on the
   web (researched: buildmvpfast.com "Liquid Glass CSS recipes", dev.to "Liquid Glass on the web: 6 ways", web.dev
   backdrop-filter):
   - no tint in the middle of a pane: it shows the page behind, only a little light along the top like on a real pane
     (the old panes were 52–74 % white, so they looked like white cards);
   - a real frost: blur with saturate (blur alone drains colour into grey; saturation brings it back), written out in
     -webkit-backdrop-filter too — Safari ignores custom properties there;
   - a lit edge drawn with shadows inside the pane (bright along the top and the top-left corner, softer at the
     bottom-right, a faint glow round the rim), a hairline of shade outside it and a soft lift: the thickness of glass;
   - two reflection streaks that slide across each pane as it passes through the screen (scroll-driven, Chrome and
     Safari 26; never with Reduce Motion or "Pause motion");
   - in Chrome and Edge the panes over the moving pictures bend them at their rounded edge like thick glass (glass.js);
   - the floating bar turns to dark glass with light words over the dark cycling and gym bands (glass.js), like
     Apple's glass adapts to what is under it.
   The page stays white as before, with its own section colours and accents; the words, links and scroll motion are
   unchanged. Plain CSS only (no inline styles, no data: images): every page's Content-Security-Policy allows it. */

:root{--g-paper:#f3f1ed;--g-ink:#171b18;--g-r:28px;--g-r-sm:18px}
html{background:var(--g-paper)}
body.g-page{background:transparent}
/* Behind the paper only a whisper of light (the page reads white), so the glass has something soft to catch. */
body.g-page::before{content:"";position:fixed;inset:-12vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(42vmax 34vmax at 10% 8%,rgba(220,230,203,.5),transparent 70%),radial-gradient(36vmax 30vmax at 94% 90%,rgba(220,88,54,.08),transparent 66%),
    radial-gradient(50vmax 40vmax at 50% 46%,rgba(255,255,255,.75),transparent 70%),var(--g-paper)}

/* ===================================================================== clear glass on the white page */
.g-home .nav,.g-home .manifesto-grid,.g-home .convoy-title-row,.g-home .territory-layout,.g-home .privacy-section>*,
.g-home .join-grid,.g-home footer>*,.g-home .hero-copy::before,.g-home .chapter-copy::before,
.g-legal .legal-nav,.g-legal .legal-nav~main,.g-auth main{
  border:1px solid rgba(255,255,255,.55);
  background:
    linear-gradient(115deg,rgba(255,255,255,0) 31%,rgba(255,255,255,.34) 37%,rgba(255,255,255,.07) 42.5%,rgba(255,255,255,0) 44%,rgba(255,255,255,.42) 45.6%,rgba(255,255,255,0) 48%) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.03) 36%,rgba(255,255,255,0) 68%,rgba(255,255,255,.07)) padding-box;
  background-size:260% 100%,100% 100%;background-position:62% 0,0 0;background-repeat:no-repeat;
  -webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 1.5px 1.5px 1px -1px rgba(255,255,255,.95),
    inset -1.5px -1.5px 1px -1px rgba(255,255,255,.6),
    inset 0 0 16px rgba(255,255,255,.3),
    inset 0 -18px 26px -22px rgba(23,27,24,.12),
    0 0 0 1px rgba(23,27,24,.075),
    0 18px 38px -20px rgba(23,27,24,.24),
    0 3px 8px -4px rgba(23,27,24,.09)}
/* Over the moving pictures the frost is lighter, so the picture stays clear behind the glass. */
.g-home .hero-copy::before,.g-home .chapter-copy::before{-webkit-backdrop-filter:blur(8px) saturate(175%);backdrop-filter:blur(8px) saturate(175%)}
/* The floating bar: a little more frost, so its words stay readable over anything scrolling under it. */
.g-home .nav{
  background:
    linear-gradient(115deg,rgba(255,255,255,0) 31%,rgba(255,255,255,.34) 37%,rgba(255,255,255,.07) 42.5%,rgba(255,255,255,0) 44%,rgba(255,255,255,.42) 45.6%,rgba(255,255,255,0) 48%) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.2) 60%,rgba(255,255,255,.28)) padding-box;
  background-size:260% 100%,100% 100%;background-position:62% 0,0 0;background-repeat:no-repeat;
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)}
/* Over the dark bands (glass.js sets g-nav-dark): dark glass, light words. */
.g-home.g-nav-dark .nav{color:#f3f1ed;border-color:rgba(255,255,255,.16);
  background:
    linear-gradient(115deg,rgba(255,255,255,0) 31%,rgba(255,255,255,.1) 37%,rgba(255,255,255,.02) 42.5%,rgba(255,255,255,0) 44%,rgba(255,255,255,.13) 45.6%,rgba(255,255,255,0) 48%) padding-box,
    linear-gradient(180deg,rgba(28,33,29,.5),rgba(12,14,12,.38) 60%,rgba(20,24,21,.44)) padding-box;
  background-size:260% 100%,100% 100%;background-position:62% 0,0 0;background-repeat:no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 1.5px 1.5px 1px -1px rgba(255,255,255,.3),inset -1.5px -1.5px 1px -1px rgba(255,255,255,.12),
    inset 0 0 16px rgba(255,255,255,.04),0 0 0 1px rgba(0,0,0,.45),0 18px 40px -18px rgba(0,0,0,.7)}
.g-home.g-nav-dark .nav-links a:hover{color:#f0805f}

/* Small glass inside the panes: cards, fields, pills, the social links. */
.g-home .privacy-details details,.g-home .card,.g-home .card input,.g-home .selBtn,.g-home .phone-loop,.g-home .socials a,.g-home .nav-cta,.g-home .motion-toggle{
  border:1px solid rgba(255,255,255,.65);
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.12)) padding-box;
  -webkit-backdrop-filter:blur(8px) saturate(170%);backdrop-filter:blur(8px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 1px 1px 1px -.5px rgba(255,255,255,.8),inset 0 -10px 16px -14px rgba(23,27,24,.14),
    0 0 0 1px rgba(23,27,24,.08),0 6px 14px -8px rgba(23,27,24,.2)}
.g-home.g-nav-dark .nav-cta{color:#f3f1ed;border-color:rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04)) padding-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(0,0,0,.4),0 6px 14px -8px rgba(0,0,0,.6)}
.g-home .nav-cta:hover,.g-home.g-nav-dark .nav-cta:hover{background:var(--g-ink);color:var(--g-paper)}
/* Menus need their words sharp over anything: heavily frosted, almost solid (as Apple's menus are). */
.g-home .langmenu,.g-home .comboList{border:1px solid rgba(255,255,255,.75);background:rgba(250,249,246,.9);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(23,27,24,.08),0 26px 50px -22px rgba(23,27,24,.38)}
.g-home.g-nav-dark .langmenu{color:var(--g-ink)}

/* ===================================================================== clear glass on the dark bands (cycling, gym) */
.g-home .cycling-scene .chapter-copy::before,.g-home .gym-features article,.g-home .gym-clan,.g-home .gym-lift-footer .motion-toggle,.g-home .gym-lift-footer>a{
  border:1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(115deg,rgba(255,255,255,0) 31%,rgba(255,255,255,.1) 37%,rgba(255,255,255,.02) 42.5%,rgba(255,255,255,0) 44%,rgba(255,255,255,.13) 45.6%,rgba(255,255,255,0) 48%) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012) 38%,rgba(255,255,255,0) 68%,rgba(255,255,255,.03)) padding-box;
  background-size:260% 100%,100% 100%;background-position:62% 0,0 0;background-repeat:no-repeat;
  -webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 1.5px 1.5px 1px -1px rgba(255,255,255,.32),inset -1.5px -1.5px 1px -1px rgba(255,255,255,.13),
    inset 0 0 18px rgba(255,255,255,.035),inset 0 -20px 28px -24px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5),0 28px 56px -26px rgba(0,0,0,.75)}
.g-home .cycling-scene .chapter-copy::before{-webkit-backdrop-filter:blur(8px) saturate(170%);backdrop-filter:blur(8px) saturate(170%)}

/* The reflection streaks slide across each pane while it crosses the screen. */
@keyframes g-sheen{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .g-home .nav,.g-home .manifesto-grid,.g-home .convoy-title-row,.g-home .territory-layout,.g-home .privacy-section>*,.g-home .join-grid,.g-home footer>*,
  .g-home .hero-copy::before,.g-home .chapter-copy::before,.g-home .gym-features article,.g-home .gym-clan,.g-legal .legal-nav~main{
    animation:g-sheen auto linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .g-home .nav{animation-timeline:scroll(root block);animation-range:normal}
}}

/* Chrome and Edge (glass.js sets html.g-lens and gives each pane its own lens): the floating bar, the words over the
   moving pictures and the phone bend what is behind them at their rounded edge. */
.g-lens-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
html.g-lens .g-home .nav[data-lens]{backdrop-filter:blur(16px) var(--g-lens) saturate(180%)}
html.g-lens .g-home .phone-shell[data-lens]{backdrop-filter:blur(8px) var(--g-lens) saturate(170%)}
html.g-lens .g-home [data-lens=before]::before{backdrop-filter:blur(8px) var(--g-lens) saturate(175%)}

/* Reduce Transparency (where the browser tells): the same panes, nearly solid. */
@media (prefers-reduced-transparency:reduce){
  .g-home .nav,.g-home .manifesto-grid,.g-home .convoy-title-row,.g-home .territory-layout,.g-home .privacy-section>*,.g-home .join-grid,.g-home footer>*,
  .g-home .hero-copy::before,.g-home .chapter-copy::before,.g-legal .legal-nav,.g-legal .legal-nav~main,.g-auth main{background:rgba(250,249,246,.95) padding-box}
  .g-home .cycling-scene .chapter-copy::before,.g-home .gym-features article,.g-home .gym-clan,.g-home.g-nav-dark .nav{background:rgba(22,26,23,.95) padding-box}
}

/* ===================================================================== the home page: where the glass sits */
.g-home .editorial-hero,.g-home .manifesto,.g-home .convoy-scene,.g-home .territory-story,.g-home .privacy-section,.g-home footer{background:transparent}
.g-home .site-header{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.g-home .nav{height:calc(100% - 20px);margin:10px max(12px,calc((100% - 1320px)/2));padding:0 clamp(16px,2.4vw,30px);border-radius:999px}
.g-home .nav-cta{border-radius:999px}
.g-home .langmenu{border-radius:var(--g-r-sm);padding:8px}
.g-home .langmenu button{border-radius:12px}
.g-home .langmenu button:hover,.g-home .langmenu button[aria-current=true]{background:rgba(23,27,24,.07)}
/* The panes behind the words over the pictures: drawn behind the words, a little larger, so nothing moves. */
.g-home .hero-copy::before,.g-home .chapter-copy::before{content:"";position:absolute;z-index:-1;inset:-30px -34px;border-radius:34px;pointer-events:none}
.g-home .hero-copy p,.g-home .chapter-copy p{text-shadow:0 1px 0 rgba(255,255,255,.55)}
.g-home .cycling-scene .chapter-copy p{text-shadow:none}
.g-home .manifesto-grid,.g-home .territory-layout,.g-home .join-grid{padding:clamp(26px,4vw,60px);margin-top:28px;border-radius:var(--g-r)}
.g-home .convoy-title-row{padding:clamp(24px,3.5vw,52px);margin-top:28px;border-radius:var(--g-r);position:relative;z-index:1}
.g-home .privacy-section{gap:clamp(18px,3vw,40px)}
.g-home .privacy-section>*{padding:clamp(24px,3.5vw,48px);border-radius:var(--g-r)}
.g-home .privacy-details{padding-top:clamp(24px,3.5vw,48px)}
.g-home .privacy-details details{margin-top:10px;padding:0 18px;border-radius:var(--g-r-sm)}
.g-home .privacy-details summary{border:0}
.g-home .gym-features{gap:clamp(14px,2vw,24px)}
.g-home .gym-features article{padding:clamp(22px,2.4vw,32px);border-radius:var(--g-r)}
.g-home .gym-clan{border-radius:var(--g-r)}
.g-home .card{padding:clamp(22px,3vw,36px);border-radius:var(--g-r)}
.g-home .card input,.g-home .selBtn{border-radius:14px;padding:15px 16px;margin-top:10px}
.g-home .card input:focus{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 2px var(--g-ink)}
.g-home .comboList{border-radius:var(--g-r-sm)}
.g-home .comboList li{border-radius:10px}
.g-home footer>*{padding:20px clamp(18px,2.5vw,32px);border-radius:var(--g-r)}
.g-home .footer-line{margin-top:12px}
/* The main buttons keep the site's ink, glossy like polished stone; the store buttons too. */
.g-home .hero-access,.g-home #go,.g-home .store{background:linear-gradient(180deg,#323a34,#171b18 55%,#0f120f);border-color:#0f120f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.4),0 14px 30px -14px rgba(23,27,24,.6)}
.g-home .hero-access,.g-home #go{border-radius:999px}
.g-home .store{border-radius:var(--g-r-sm)}
.g-home .hero-access:hover,.g-home #go:hover{background:linear-gradient(180deg,#3d463f,#1f2420 55%,#141814)}
/* The phone: a clear glass frame round its screen. */
.g-home .phone-shell{border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(150deg,rgba(255,255,255,.4),rgba(255,255,255,.06) 32%,rgba(255,255,255,.02) 68%,rgba(255,255,255,.2)) padding-box;
  -webkit-backdrop-filter:blur(8px) saturate(170%);backdrop-filter:blur(8px) saturate(170%);
  box-shadow:inset 0 1px 0 #fff,inset 1.5px 1.5px 1px -1px #fff,inset -1.5px -1.5px 1px -1px rgba(255,255,255,.7),inset 0 0 14px rgba(255,255,255,.35),
    0 0 0 1px rgba(23,27,24,.14),0 44px 80px -28px rgba(23,27,24,.4)}

@media(max-width:650px){
  .g-home .nav{margin:8px 10px;height:calc(100% - 16px)}
  .g-home .hero-copy::before,.g-home .chapter-copy::before{inset:-20px -16px;border-radius:26px}
  .g-home .manifesto-grid,.g-home .territory-layout,.g-home .join-grid,.g-home .convoy-title-row{padding:24px 20px;margin-top:20px;border-radius:24px}
  .g-home .privacy-section>*{padding:22px 18px;border-radius:24px}
  .g-home .gym-features article{border-radius:22px}
  .g-home .card{padding:20px 16px}
}

/* ===================================================================== the policy pages, the invite page, the "back to Scorch" page */
.g-legal .legal-nav{position:sticky;top:10px;z-index:10;height:66px;margin:10px max(12px,calc((100% - 1200px)/2));padding:0 clamp(18px,2.5vw,30px);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.2) 60%,rgba(255,255,255,.28)) padding-box;
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)}
.g-legal .legal-nav~main{margin:28px auto 40px;max-width:880px;padding:clamp(28px,5vw,64px);border-radius:var(--g-r)}
.g-legal .table-scroll{background:rgba(255,255,255,.4)}
@media(max-width:550px){.g-legal .legal-nav{height:58px;margin:8px 10px}.g-legal .legal-nav~main{margin:18px 10px 28px;padding:26px 20px;border-radius:24px}}
/* The invite card is already glass in invite.css (light and dark); it gets the lit edge and lift. */
.g-invite .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 1.5px 1.5px 1px -1px rgba(255,255,255,.9),0 30px 80px rgba(23,27,24,.14),0 0 0 1px rgba(23,27,24,.05)}
.g-auth main{margin:28px auto;max-width:640px;border-radius:var(--g-r)}
.g-auth .button{background:linear-gradient(180deg,#323a34,#171b18 55%,#0f120f);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 30px -14px rgba(23,27,24,.55)}
@media(max-width:380px){.g-auth main{margin:14px 10px}}