/* ═══════════════════════════════════════════════════════════════════════════
   WorkByte — design system
   One file, no framework, no external fonts. Everything is a custom property,
   so retheming the whole site means editing the :root block below.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* brand */
  --brand:      #6d5cff;
  --brand-2:    #22d3ee;
  --brand-3:    #f472b6;

  /* dark is the default surface */
  --bg:         #08090f;
  --bg-2:       #0d0f18;
  --surface:    rgba(255,255,255,.032);
  --surface-2:  rgba(255,255,255,.055);
  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.16);
  --ink:        #f2f3f8;
  --ink-2:      #a9adc2;
  --ink-3:      #6f7490;
  --glow:       .55;
  --code-bg:    #05060b;

  /* type */
  --sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code",
          Consolas, monospace;

  /* scale — fluid, so nothing needs a breakpoint to look right */
  --t-hero: clamp(2.6rem, 7.2vw, 5.4rem);
  --t-h2:   clamp(1.9rem, 3.9vw, 3.1rem);
  --t-h3:   clamp(1.15rem, 1.7vw, 1.4rem);
  --t-lead: clamp(1.06rem, 1.5vw, 1.3rem);
  --t-body: 1rem;

  /* rhythm */
  --wrap: 1180px;
  --gap:  clamp(1rem, 2.5vw, 1.75rem);
  --sy:   clamp(4.5rem, 11vh, 8.5rem);
  --r:    16px;
  --r-lg: 24px;

  --ease: cubic-bezier(.22,.68,.24,1);
}

:root[data-theme="light"] {
  --bg:        #fbfbfd;
  --bg-2:      #f2f3f8;
  --surface:   rgba(10,12,25,.028);
  --surface-2: rgba(10,12,25,.052);
  --line:      rgba(10,12,25,.10);
  --line-2:    rgba(10,12,25,.17);
  --ink:       #0d1020;
  --ink-2:     #4a5069;
  --ink-3:     #838aa3;
  --glow:      .30;
  --code-bg:   #f4f5fa;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: "cv02","cv03","cv04","ss01";
}

/* ambient field — the thing that makes it feel like a product, not a doc */
body::before {
  content: "";
  position: fixed; inset: -30% -10% auto -10%; height: 90vh;
  background:
    radial-gradient(46% 52% at 18% 10%, color-mix(in oklab, var(--brand) 60%, transparent), transparent 70%),
    radial-gradient(40% 46% at 82% 4%,  color-mix(in oklab, var(--brand-2) 46%, transparent), transparent 72%),
    radial-gradient(36% 40% at 55% 32%, color-mix(in oklab, var(--brand-3) 30%, transparent), transparent 70%);
  opacity: var(--glow);
  filter: blur(64px) saturate(125%);
  pointer-events: none; z-index: 0;
}

main { position: relative; z-index: 1; }

.wrap { width: min(var(--wrap), 100% - clamp(2rem, 7vw, 5rem)); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - clamp(2rem, 7vw, 5rem)); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--brand); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

/* ── type ─────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  line-height: 1.08;
  letter-spacing: -.028em;
  margin: 0 0 .6em;
  font-weight: 620;
  text-wrap: balance;
}
h2 { font-size: var(--t-h2); margin-top: 1.6em; }
h3 { font-size: var(--t-h3); letter-spacing: -.017em; margin-top: 2em; }
h4 { font-size: 1.02rem; }
.s > .wrap > :first-child, .s h2:first-child, .s h3:first-child { margin-top: 0; }

p { margin: 0 0 1.15em; color: var(--ink-2); }
p strong, li strong { color: var(--ink); font-weight: 600; }

a { color: inherit; text-decoration-color: color-mix(in oklab, var(--brand) 55%, transparent);
    text-underline-offset: 3px; transition: color .18s var(--ease); }
a:hover { color: var(--brand); }

ul, ol { margin: 0 0 1.3em; padding-left: 1.15em; color: var(--ink-2); }
li { margin-bottom: .58em; }
li::marker { color: color-mix(in oklab, var(--brand) 70%, var(--ink-3)); }

code {
  font-family: var(--mono); font-size: .875em;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: .14em .42em; border-radius: 6px; color: var(--ink);
}

pre.code {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.3rem;
  overflow-x: auto;
  margin: 0 0 1.6em;
  font-size: .855rem; line-height: 1.7;
}
pre.code code { background: none; border: 0; padding: 0; color: var(--ink-2); }

blockquote {
  margin: 0 0 1.5em; padding: .1em 0 .1em 1.25rem;
  border-left: 2px solid color-mix(in oklab, var(--brand) 65%, transparent);
  color: var(--ink-2); font-size: 1.02em;
}

hr.rule { border: 0; height: 1px; background: var(--line); margin: var(--gap) 0; }

.table-wrap { overflow-x: auto; margin: 0 0 1.7em; border: 1px solid var(--line);
              border-radius: var(--r); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .945rem; }
th, td { text-align: left; padding: .82rem 1.05rem; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--ink); font-size: .8rem; letter-spacing: .06em;
     text-transform: uppercase; background: var(--surface); }
td { color: var(--ink-2); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* ── nav ──────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px) saturate(150%);
  background: color-mix(in oklab, var(--bg) 76%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: var(--gap); height: 66px; }

.brand { display: flex; align-items: center; gap: .6rem; font-weight: 640;
         text-decoration: none; font-size: 1.06rem; }
/* The platform logo. Same asset the desktop app ships, transparent background so
   it sits on either theme without a plate behind it. */
.brand__mark { width: 26px; height: 26px; object-fit: contain; display: block; }
.brand__mark--lg { width: 34px; height: 34px; }

/* Uppercased in CSS rather than in the markup, so the accessible name, the page
   title and anything copied off the page all stay "WorkByte".
   Caps need positive tracking to stay legible -- the negative letter-spacing that
   suits mixed-case display type makes uppercase look cramped. */
.brand__t { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

.nav__links { display: flex; gap: clamp(.6rem, 1.6vw, 1.5rem); margin-left: auto;
              font-size: .93rem; }
.nav__links a { color: var(--ink-2); text-decoration: none; padding: .3rem 0; position: relative; }
.nav__links a:hover, .nav__links a.active { color: var(--ink); }
.nav__links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.nav__right { display: flex; align-items: center; gap: .6rem; margin-left: .4rem; }

.tglt {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); cursor: pointer; transition: all .2s var(--ease);
}
.tglt:hover { color: var(--ink); border-color: var(--line-2); }
.tglt svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
            stroke-width: 1.7; stroke-linecap: round; }
[data-theme="dark"] .tglt__sun, [data-theme="light"] .tglt__moon { display: none; }

.burger { display: none; width: 34px; height: 34px; border-radius: 10px;
          border: 1px solid var(--line); background: var(--surface); cursor: pointer;
          padding: 0; place-items: center; }
.burger span { display: block; width: 15px; height: 1.6px; background: var(--ink);
               margin: 3px auto; border-radius: 2px; transition: .22s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.6px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: grid; }
  .nav__links {
    position: fixed; inset: 66px 0 auto; flex-direction: column; gap: 0;
    background: color-mix(in oklab, var(--bg) 97%, transparent);
    border-bottom: 1px solid var(--line); padding: .6rem clamp(1rem, 7vw, 2.5rem) 1.2rem;
    transform: translateY(-140%); transition: transform .3s var(--ease);
    backdrop-filter: blur(20px);
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
}

/* ── buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.5rem; border-radius: 12px; font-weight: 560; font-size: .96rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn--sm { padding: .5rem 1rem; font-size: .88rem; border-radius: 10px; }
.btn--primary {
  background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand-2) 55%, var(--brand)));
  color: #fff;
  box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--brand) 85%, transparent);
}
.btn--primary:hover { transform: translateY(-2px); color: #fff;
  box-shadow: 0 18px 40px -14px color-mix(in oklab, var(--brand) 92%, transparent); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.btn--ghost:hover { border-color: var(--brand); color: var(--ink);
                    background: var(--surface-2); transform: translateY(-2px); }

/* ── sections ─────────────────────────────────────────────────────────────── */

.s { padding-block: var(--sy); position: relative; }
.s--prose + .s--prose { padding-top: 0; }
.s__intro { max-width: 660px; margin-bottom: calc(var(--gap) * 1.8); }

/* hero */
.s--hero { padding-top: clamp(3.5rem, 9vh, 6.5rem); padding-bottom: clamp(3rem, 7vh, 5rem); }
.hero__inner { max-width: 940px; }
.hero__h { font-size: var(--t-hero); font-weight: 640; letter-spacing: -.042em;
           margin-bottom: .32em;
           /* Solid colour FIRST so the headline is legible even if the gradient clip
              doesn't paint. `color: transparent` with a background that never renders
              means an invisible headline — the same failure class as the reveal bug. */
           color: var(--ink); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero__h {
    background: linear-gradient(175deg, var(--ink) 40%,
                color-mix(in oklab, var(--ink) 62%, var(--brand)) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;

    /* Descenders MUST have background box under them, or they vanish.
       `background-clip: text` paints the gradient only where it overlaps the
       element's background box. The display line-height of 1.08 is tighter than
       Inter's content area, so half-leading goes NEGATIVE (-10.8px at the largest
       hero size) and glyph ink falls 0.114em BELOW the box — with no gradient
       there, the descender renders transparent. The "g" in "handing" was sliced
       off mid-stroke on the live site.
       0.2em is deliberately more than the 0.114em measured for Inter, because the
       site ships no webfont: most visitors fall back to a system face whose
       descenders may sit deeper. Over-padding is free — the gradient is clipped to
       the glyphs, so the extra band paints nothing.
       margin-bottom drops by the same amount to keep spacing identical.
       Measured safe at the top even for accented capitals, so no padding-top. */
    padding-bottom: .2em;
    margin-bottom: .12em;
  }
}
.hero__lead { font-size: var(--t-lead); max-width: 660px; }
.hero__lead p { color: var(--ink-2); }
.hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2.1rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 580; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--surface);
  padding: .4rem .9rem; border-radius: 999px; margin-bottom: 1.6rem;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-2); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-2) 25%, transparent); }

/* grid of cards */
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid[data-cols="2"] { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid[data-cols="4"] { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  position: relative; padding: 1.7rem 1.6rem 1.5rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), transparent 65%);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in oklab, var(--brand) 13%, transparent), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card:hover::after { opacity: 1; }
.card__n { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
           color: var(--brand-2); opacity: .8; }
.card__t { font-size: 1.14rem; margin: .6rem 0 .55rem; letter-spacing: -.02em; }
.card__b p:last-child, .card__b ul:last-child { margin-bottom: 0; }
.card__b { font-size: .95rem; }

/* split with media */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.75rem, 5vw, 4.5rem);
         align-items: center; }
.split--rev .split__text { order: 2; }
.split__text > :first-child { margin-top: 0; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split--rev .split__text { order: 0; }
}

/* media slots — placeholder now, real asset later, same box either way */
.media { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
         background: var(--bg-2); position: relative;
         box-shadow: 0 30px 70px -40px rgba(0,0,0,.8); }
.media > img, .media > video { display: block; width: 100%; aspect-ratio: var(--ratio, 16/9);
                               object-fit: cover; }
.media figcaption { padding: .7rem 1rem; font-size: .82rem; color: var(--ink-3);
                    border-top: 1px solid var(--line); background: var(--surface); }
.media--empty .media__ph {
  display: grid; place-content: center; justify-items: center; gap: .5rem;
  aspect-ratio: var(--ratio, 16/9); text-align: center; padding: 1.5rem;
  background:
    linear-gradient(color-mix(in oklab, var(--surface) 90%, transparent), transparent),
    repeating-linear-gradient(-45deg, transparent 0 11px, var(--surface) 11px 22px);
}
.media__icon { font-size: 1.5rem; color: var(--brand-2); opacity: .75; }
.media__label { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
                text-transform: uppercase; color: var(--ink-3); }
.media__cap { font-size: .9rem; color: var(--ink-2); max-width: 34ch; }

/* steps */
.steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.5rem; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.15rem; align-items: start;
        color: var(--ink-2); margin: 0; }
.step__n {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  font-family: var(--mono); font-size: .92rem; font-weight: 600; color: var(--ink);
  border: 1px solid var(--line-2); background: var(--surface-2);
}
.step__b { padding-top: .35rem; }

/* faq */
.faq { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
       margin-bottom: .7rem; overflow: hidden; transition: border-color .25s var(--ease); }
.faq:hover { border-color: var(--line-2); }
.faq summary {
  cursor: pointer; padding: 1.15rem 1.35rem; font-weight: 560; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--ink-3); font-weight: 400;
                      transition: transform .25s var(--ease); line-height: 1; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq[open] summary { color: var(--brand); }
.faq__a { padding: 0 1.35rem 1.25rem; font-size: .96rem; }
.faq__a > :last-child { margin-bottom: 0; }

/* cta */
.cta {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(2.2rem, 6vw, 4rem); text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(80% 130% at 50% 0%, color-mix(in oklab, var(--brand) 17%, transparent), transparent 68%),
    var(--surface);
}
.cta h2 { margin-top: 0; }
.cta > :last-child { margin-bottom: 0; }
.cta p { max-width: 52ch; margin-inline: auto; }

/* ── footer ───────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); margin-top: var(--sy);
        background: color-mix(in oklab, var(--bg-2) 55%, transparent); position: relative; z-index: 1; }
.foot__in { display: grid; grid-template-columns: 1.4fr 2fr; gap: var(--gap);
            padding-block: clamp(2.5rem, 6vh, 4rem); }
.foot__tag { margin: .9rem 0 0; color: var(--ink-3); max-width: 24ch; font-size: .95rem; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.foot__cols h4 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
                 color: var(--ink-3); margin-bottom: 1rem; font-weight: 600; }
.foot__cols a { display: block; color: var(--ink-2); text-decoration: none;
                font-size: .93rem; margin-bottom: .6rem; }
.foot__cols a:hover { color: var(--brand); }
.foot__base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
              padding-block: 1.3rem; border-top: 1px solid var(--line); }
.foot__base p { margin: 0; font-size: .86rem; color: var(--ink-3); }
@media (max-width: 760px) {
  .foot__in { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ── reveal on scroll ─────────────────────────────────────────────────────── */

/* Reveal-on-scroll is an ENHANCEMENT and must never be able to hide content.
   The hidden state applies only when the inline head script has set .js on <html>,
   so with JavaScript blocked or broken every section renders normally. main.js also
   carries a timeout that reveals everything if the observer never fires. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none;
             transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in:nth-child(2) { transition-delay: .06s; }
.reveal.in:nth-child(3) { transition-delay: .12s; }
.reveal.in:nth-child(4) { transition-delay: .18s; }
.reveal.in:nth-child(5) { transition-delay: .24s; }
.reveal.in:nth-child(6) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

::selection { background: color-mix(in oklab, var(--brand) 45%, transparent); color: var(--ink); }

:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 6px; }