/* Light sections (captain 2026-10-16, after lusion.co: "you can have a lot of different sort of light
   mode dark mode things happening and it helps make the whole thing feel much cleaner"). A section
   marked .is-light turns to a light ground with dark type, so the dark section after it hits harder.
   The colour tokens are remapped inside the section, so most of it follows on its own; the rules below
   cover what is drawn in fixed colours. Pieces that stand for the app itself (the phone, its floating
   cards) stay dark, as the app is. */
.is-light{--bg:#f2f3f5;--ink:#0d1014;--body:#3f474f;--muted:#6c747c;--brand:#3d6f96;--surface:#ffffff;--surface-raised:#ffffff;
  --hairline:rgb(13 16 20 / .08);--glass:rgb(255 255 255 / .6);color:var(--ink);background:var(--bg);color-scheme:light}
/* the title in our own gradient on white (captain 2026-10-16: "make it in our gradient"): the steel
   ramp the hero shader is drawn from (tokens.css --steel-*), blue to blue (captain 2026-10-15: not black
   to blue), slate blue first so it reads on white */
/* blue to light blue, never from the near-black slate (captain 2026-10-18: "I don't like how it looks like it's
   coming from black ... it should feel more bluesque") */
.is-light .lt-grad{background:linear-gradient(90deg,var(--steel-5),#7699b1 50%,var(--steel-6));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Approach (How Tora works) */
#process.is-light .sec-title{color:var(--ink)}
#process.is-light .how-step{background:#fff!important;box-shadow:0 1px 0 rgb(255 255 255),0 .75rem 2rem -1rem rgb(13 16 20 / .18)}
#process.is-light .how-step:not(.on){background:rgb(255 255 255 / .55)!important;box-shadow:none}
#process.is-light .how-step h3{color:rgb(13 16 20 / .45)}
#process.is-light .how-step.on h3,#process.is-light .how-step:has(.how-go:focus-visible) h3{color:var(--ink)!important}
#process.is-light .how-step:not(.on):hover{background:rgb(255 255 255 / .85)!important}
#process.is-light .how-step .n{color:var(--muted)}
#process.is-light .how-step.on .n{color:var(--brand)}
/* Steel glass over the phone: the blur keeps its content quiet behind the card's numbers. No shadows (captain
   2026-10-30, on "Your sleep need": "no drop shadow needed here"): the words carry none, and the cut corners clip any
   around the card. The glass stays see-through (captain 2026-10-31, after a denser try: "I would like the glass to
   stay a little bit more see-through, not so tinted"). */
#process.is-light .chip-glass{background:linear-gradient(140deg,rgb(236 243 248 / .1),transparent 55%),
  linear-gradient(140deg,rgb(30 36 42 / .72),rgb(18 22 26 / .8));box-shadow:none}
#process.is-light .chip-glass :is(small,em,b){text-shadow:none}
#process.is-light .how-floor{opacity:.35}

/* Privacy (captain 2026-10-16: "try the privacy thing being a light mode transition into dark mode
   into the questions"): the lede and the link read in the light ground's own tones */
#privacy.is-light .lede{color:var(--body)!important}
#privacy.is-light .p2-copy a,#privacy.is-light .p2-copy a *{color:var(--brand)!important}

/* The floating nav over a light section (captain 2026-10-16: "only in the light mode ... this button has a
   shadow ... weird looking"): the pill's long black shadow and the button's dark drop, made for the dark page,
   smudged grey on white. Over light they are short, soft and cool, like the cards on the light sections. */
html.nav-light.nav-scrolled #siteHeader .header-inner{box-shadow:0 .75rem 2rem -1rem rgb(13 16 20 / .35)!important;transition:box-shadow .35s ease}
html.nav-light #siteHeader .nav-join{box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1px 0 rgb(0 0 0 / .08),0 .25rem .625rem -.375rem rgb(13 16 20 / .35)!important}

/* The founding section and the footer on the light ground (captain 2026-10-16: "let's make it light mode, but
   we don't need to make the first athlete shape what comes next ... being white ... that container in its own
   is already like a container ... keep it as it was before. Make everything surrounding it light"). The
   founding card keeps its dark shader exactly as before; the section around it and the footer are light, and the chrome tora wordmark keeps its metal, which reads on white. */
#founding.is-light,footer.is-light{background:var(--bg)}
/* the founding section is a centred container; its light ground runs out to both screen edges (captain
   2026-10-18, 06.png: "why is the outer edges of it like black?"). A border-image fill painted outward only
   sideways: no layout change, and nothing inside is clipped */
#founding.is-light{border-image:linear-gradient(var(--bg),var(--bg)) fill 0 / 0 / 0 100vw}
/* the light runs on below the footer when the page is pulled past its end, without touching the page's own
   dark ground (2026-10-17: setting the html/body background light showed through the hero's top) */
footer.is-light{box-shadow:0 100vh 0 100vh var(--bg)}
#founding.is-light .cta-card{--bg:#141414;--ink:#eef3f6;--body:#b4bcc3;--muted:#7d8790;--brand:#8fb3cb;color-scheme:dark}
footer.is-light .foot-brand p,footer.is-light .foot-col a,footer.is-light .foot-credits,footer.is-light .foot-credits a,footer.is-light .foot-made{color:var(--body)!important}
footer.is-light h5{color:var(--ink)!important}
footer.is-light .foot-made img{filter:invert(1) brightness(.35)}