/* Doorman — the shell: everything that is on every page.

   The wash and the grain, the progress bar, the nav, the footer, the shared
   type scale and buttons, the document layout the legal pages use, and the
   two motion default classes.

   Cascade rule for this split, learned the hard way: a file keeps its OWN
   media queries at its OWN bottom. shell.css loads before every page file, so
   a breakpoint override left in here for a selector defined in page-home.css
   would lose to that file's base rule and the mobile layout would die
   quietly. */
/* ---------- the wash: the colour the glass has something to frost over ----
   One fixed layer, stacked radial gradients. There is no CSS mesh gradient —
   the spec issue has been open since 2022 with nothing shipped — so this is
   the honest way to get the look without pulling in WebGL. ScrollTrigger
   tweens the three registered colours as the page moves. */
.atmos{position:fixed;inset:0;pointer-events:none;z-index:0}
.lamp{
  position:absolute;inset:-14%;
  /* A diagonal sweep rather than three corner blobs. Aero's glass sat on a
     lit desktop, so the colour has to run *under* the panes, not around them.
     Built with the deepest tone crossing exactly where the device sits. */
  background:
    /* Wider stops and longer falloffs than before. The blur was doing two
       jobs: softening the light, and hiding the edges where these stops met.
       Gradients that are gentle to begin with only need the first job, which
       is why 14px now looks like 24px did. */
    linear-gradient(146deg,
      transparent 0%,
      var(--wash-a) 22%,
      var(--wash-b) 52%,
      var(--wash-a) 78%,
      transparent 100%),
    radial-gradient(46% 42% at 76% 40%,var(--wash-b),transparent 78%),
    /* The warm one, sitting under the other two, in the corner the comment on
       .phone says the light comes from. It is also the only rule that reads
       --wash-c: the property was registered and tweened on every frame of the
       page while nothing painted it. */
    radial-gradient(54% 48% at 16% 10%,var(--wash-c),transparent 76%);
  /* 14px, not 24px. This blurs an element inset -14% on a fixed full-screen
     layer, so it is roughly 128vw by 128vh of continuous blur held for the
     life of the page - the most expensive single declaration on the site and
     the kind of cost a discrete GPU hides completely. The gradients underneath
     are already soft; the blur is polish on top of them, and past about 14px
     the difference is not visible while the cost keeps climbing. */
  filter:blur(14px);
  /* Bone is the ground and green is the light falling across it, not the
     field. Pulled well back so the paper still reads as paper. */
  opacity:.42;
}
/* Grain is not decoration on a light ground: an 8-bit gradient this large
   bands visibly without it. */
.grain{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.16;mix-blend-mode:multiply;
  /* A 128px WebP tile, 12KB, decoded once and repeated by the compositor.

     This was a full-viewport <svg> with feTurbulence numOctaves="4" - four
     octaves of Perlin noise per pixel across the screen, under a blend mode.
     It then became the same noise as an inline SVG data-URI tile, which is
     far cheaper but still asks the browser to rasterise SVG. A raster image
     skips that entirely: decode once, tile, done.

     The seed is fixed, so the texture is byte-identical on every build and a
     copy edit never changes the grain. */
  background-image:url("../img/grain.webp");
  background-size:128px 128px;
  background-repeat:repeat;
}
.atmos::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(20,35,28,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,35,28,.055) 1px,transparent 1px);
  background-size:84px 84px;
  opacity:.55;
  /* Inverted mask: the grid reads at the edges and clears the middle, so it
     gives the ground a surface without sitting behind the headline. */
  -webkit-mask-image:radial-gradient(58% 52% at 42% 44%,transparent,#000 88%);
  mask-image:radial-gradient(58% 52% at 42% 44%,transparent,#000 88%);
}

/* ---------- reading progress: compositor-resident, no JavaScript ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9;pointer-events:none}
.progress i{
  display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--accent-deep));
}
@supports (animation-timeline: scroll()){
  .progress i{
    animation:grow linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;transition:background-color .5s var(--ease)}
/* z-index 20, not 8. GSAP pins by fixing the element in place, and the pinned
   chamber ended up painting its devices over the sticky header. The nav has to
   outrank anything a scene can produce. */
.nav-inner{
  padding:20px 32px;display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;position:relative;
  transition:padding .5s var(--ease),background-color .5s var(--ease);
}
.nav::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--hairline-strong) 40%,var(--hairline-strong) 60%,transparent);
  transition:opacity .5s var(--ease);
}
/* Restyle the header once it sticks, with no scroll listener at all. The
   container is the sticky element; the query styles its child, because a
   container cannot restyle itself. */
@supports (container-type: scroll-state){
  .nav{container-type:scroll-state}
  @container scroll-state(stuck: top){
    /* Full-bleed, or the blur draws a seam down the page at the container
       edge. Learned by screenshotting it. */
    .nav{background:var(--glass);backdrop-filter:var(--glass-filter);box-shadow:var(--lift-1)}
    .nav-inner{padding-block:13px}
    .nav::after{opacity:1}
  }
}
.brand{display:flex;align-items:center;gap:11px}

/* ---------- the menu ----------
   A <details>, not a button and a script. Above 980px the disclosure is
   dissolved by CSS into a plain row of links and the summary is hidden; below
   it, the same markup is a tap-to-open panel. Same DOM at every width, so it
   works with JavaScript off, is keyboard-operable for free, and — because
   nothing is injected after paint — it cannot shift the layout. */
.nav-links{display:flex;gap:26px;align-items:center;margin-left:auto;margin-right:26px}
.nav-links a{
  font-size:14px;color:var(--muted);position:relative;padding-block:4px;
  transition:color .4s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);background:var(--hairline-strong)}

.mark{width:26px;height:33px;display:block}
.mark.small{width:15px;height:19px}
.wordmark{font-family:'Clash Display',sans-serif;font-weight:600;font-size:19px;letter-spacing:-.015em}
.ghost-btn{
  font-size:13px;font-weight:500;color:var(--ink);
  border:1px solid var(--hairline-strong);padding:9px 18px;border-radius:100px;
  background:var(--glass);
  transition:color .4s var(--ease),border-color .4s var(--ease),background-color .4s var(--ease);
}
.ghost-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--paper)}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 22px;font-weight:500;
}
h1{
  /* A longer headline takes a smaller size. Held at 84px this one broke into
     four lines and ate the fold. */
  font-size:clamp(40px,4.6vw,66px);line-height:1.04;letter-spacing:-.03em;
  /* Negative tracking at display size eats the word space along with the
     letter space. This gives the space back without loosening the letters. */
  word-spacing:.09em;
}
.section-h{font-size:clamp(30px,3.4vw,50px);letter-spacing:-.028em;line-height:1.1;max-width:17ch;word-spacing:.06em}
.section-sub{color:var(--muted);margin:18px 0 0;font-size:17px;max-width:52ch}
.section-sub.center{margin-inline:auto;text-align:center}
.lede{font-size:clamp(17px,1.35vw,19.5px);color:var(--muted);max-width:44ch;margin:26px 0 34px}
.micro{font-size:13px;color:var(--dim);margin-top:26px;letter-spacing:.005em}
.micro.center{text-align:center;margin-top:22px}

.btn{
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  color:#FFFFFF;font-weight:700;font-size:15px;
  padding:14px 28px;border-radius:100px;display:inline-block;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,var(--lift-2);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.28) inset,var(--lift-3)}
.btn.big{padding:17px 40px;font-size:16px;margin-top:26px}
.link-btn{font-size:15px;color:var(--muted);border-bottom:1px solid var(--hairline);padding-bottom:3px;transition:color .4s var(--ease),border-color .4s var(--ease)}
.link-btn:hover{color:var(--accent);border-color:var(--accent)}
.cta-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* ---------- footer ---------- */
.foot{
  position:relative;z-index:1;border-top:1px solid var(--hairline);
  max-width:var(--maxw);margin:0 auto;padding:54px 32px 64px;
  display:grid;grid-template-columns:1fr auto;gap:48px;
  font-size:13.5px;color:var(--dim);
}
.foot-brand{display:flex;align-items:center;gap:9px;flex-wrap:wrap;align-content:flex-start}
.foot-brand>span{font-family:'Clash Display',sans-serif;font-weight:600;font-size:16px;color:var(--ink)}
.foot-note{color:var(--dim);width:100%;font-size:12.5px;margin:12px 0 0;max-width:26ch;line-height:1.5}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.foot-cols h2{
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:0 0 14px;
}
.foot-cols a{
  display:block;color:var(--muted);margin-bottom:9px;width:fit-content;
  border-bottom:1px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease);
}
.foot-cols a:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- legal pages ---------- */
.doc{max-width:760px;margin:0 auto;padding:60px 32px 110px;position:relative;z-index:1}
.doc h1{font-size:clamp(34px,4vw,52px);letter-spacing:-.03em;margin-bottom:10px}
.doc .updated{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 44px}
.doc h2{font-size:22px;letter-spacing:-.018em;margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--hairline)}
.doc h3{font-size:16.5px;letter-spacing:-.012em;margin:26px 0 8px;color:var(--accent-deep)}
.doc p,.doc li{color:var(--muted);font-size:15.5px;line-height:1.72}
.doc ul{padding-left:20px}
.doc li{margin-bottom:8px}
.doc strong{color:var(--ink);font-weight:500}
.doc a{color:var(--accent-deep);border-bottom:1px solid rgba(47,107,79,.4)}
.doc .lead{font-size:18px;color:var(--ink);line-height:1.62}
.doc .note{
  border:1px solid var(--hairline);border-left:2px solid var(--accent);
  border-radius:12px;padding:18px 20px;background:var(--paper);margin:26px 0;
}
.doc .note p{margin:0;font-size:14.5px}
.back{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:inline-block;margin-bottom:34px}
.back:hover{color:var(--accent)}

/* ---------- motion defaults ---------- */
/* Reveals are masked, not faded. A fading element on a light ground spends a
   long time as low-contrast grey; a mask keeps every frame fully rendered and
   just uncovers it. */
.js .reveal{
  opacity:0;transform:translateY(18px) scale(.985);
  -webkit-mask-image:linear-gradient(180deg,#000 0 0);
  mask-image:linear-gradient(180deg,#000 0 0);
}
.js .split{visibility:hidden}

/* ---------- responsive: shell only ---------- */
@media (max-width:980px){
  /* Stacked: brand and CTA keep the first row, the links get their own
     underneath. They scroll sideways rather than wrapping to a third row,
     because a header that changes height as you resize is a header that shifts
     the page under the reader. The scrollbar is hidden; the fade on the right
     edge is what says there is more. */
  .nav-inner{flex-wrap:wrap;row-gap:2px;padding-bottom:10px}
  .nav-links{
    order:3;width:100%;margin:0;gap:20px;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    padding-block:6px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{font-size:13.5px;white-space:nowrap}

  .foot{grid-template-columns:1fr;gap:38px;padding:44px 24px 56px}
  .foot-cols{gap:26px}
  .lede,.section-sub{margin-inline:auto}
  .cta-row{justify-content:center}
  .section-h{max-width:none}
  .nav-inner{padding:18px 24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1 !important;transform:none !important;mask-image:none !important}
  .js .split{visibility:visible}
}

/* ---------------------------------------------------------------------------
   Pages held back until launch.

   `how-it-works` is the mechanism and `about` is the review research behind
   it. Both are the thesis, and publishing a thesis while nobody can sign up
   spends the advantage for no conversion. site/_redirects sends the URLs to
   the home page so nothing 404s for anyone holding a link.

   Hidden here rather than by editing the markup: the two appear 46 times
   across ten pages, and every one would have to be put back at launch. This
   is one rule, deleted in one line, and it means a visitor never clicks a nav
   item that bounces them to the home page for no stated reason.

   Delete this block and the two lines in _redirects to publish them.
   --------------------------------------------------------------------------- */
a[href="/how-it-works"],
a[href="/about"] {
  /* !important because page-home.css loads after this file and sets display on
     the same links at equal specificity, so ordinary cascade order loses. A
     temporary hold that silently fails to hold is worse than no hold. */
  display: none !important;
}