*{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.35;
  letter-spacing:-0.01em;
  text-rendering:geometricPrecision;
}
.floater{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  background:var(--c);
  border-radius:28px;
  opacity:.50;
  filter:blur(60px);
  transform:translate3d(calc(var(--cx, 0) * -50%), 0, 0);
  will-change:transform;
}
.floater--mobile{display:none}

.top, main, .foot{position:relative}
main{z-index:1}
.foot{z-index:1}

.frame{
  width:min(var(--max), calc(100% - (var(--g2) * 2)));
  margin:0 auto;
}

.skip{
  position:absolute;
  left:-999px;
  top:16px;
  padding:10px 12px;
  background:var(--ink);
  color:var(--bg);
  text-decoration:none;
}
.skip:focus{left:16px; z-index:10}

.top{
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}



.top__frame{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--g2);
  padding:14px 0 12px;
}

.main-nav{
    margin-right: 0px;
    margin-left: auto;
}

.nav{
    overflow: hidden;
}


@media screen and (max-width: 768px) {
    .top__frame {
        flex-direction:column;
        align-items:center;
        gap:15px;
    }
    .main-nav{
        margin-right: auto;
        margin-left: auto;
    }

    .nav-scroll-hide{
        height: 0px;  
        display: none !important;
    }
    .nav-scroll-hide button{
        padding: 0px;
    }

    .top:has(.scroll-sleek){
        margin-bottom: 70px;
    }

    .scroll-sleek{
        flex-direction:row;
        align-items:end;
    }

    .scroll-sleek .main-nav{
        margin-right: 0px;
        margin-left: auto;
    }
}


.nav{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.nav__link{
  color:inherit;
  text-decoration:none;
  font-size:14px;
  letter-spacing:0.01em;
  padding:6px 0;
  border-bottom:1px solid transparent;
}
.nav__link:hover{border-bottom-color:var(--ink)}
.nav__link.is-active{border-bottom-color:var(--danger)}

main{position:relative}
.section{position:relative; padding:var(--g4) 0}
.section--tight{padding:var(--g3) 0}
.section--rule{border-top:1px solid var(--rule)}

.lede{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:var(--g4);
  padding:var(--g4) 0;
}
.lede__title{
  margin:0;
  font-family:var(--serif);
  font-weight:800;
  letter-spacing:-0.06em;
  line-height:1.2;
  font-size:clamp(54px, 6vw, 72px);
}
.lede__title .zap{
  background:
    linear-gradient(0deg, transparent 0%, transparent 8%, var(--accent) 8%, var(--accent) 92%, transparent 92%);
  padding:0 10px 4px;
}
.lede__aside{padding-top:10px}
.lede__sub{
  margin:0 0 18px;
  font-size:16px;
  color:var(--muted);
}
.lede__cta{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cta{
  display:inline-block;
  width:max-content;
  text-decoration:none;
  color:inherit;
  padding:10px 0;
  border-bottom:2px solid var(--ink);
  font-weight:650;
  letter-spacing:0.01em;
}
.cta:hover{border-bottom-color:var(--danger)}
.cta--alt{border-bottom-color:color-mix(in oklab, var(--ink) 35%, transparent)}

.kicker{
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--g4);
}

.h2{
  margin:0 0 12px;
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:-0.04em;
  font-size:clamp(26px, 2.4vw, 40px);
  line-height:1.05;
}
.p{margin:0 0 14px; color:var(--muted); font-size:16px; max-width:68ch}
.p strong{color:var(--ink)}

.ruleline{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:13px;
}
.ruleline:before{
  content:"";
  height:1px;
  flex:1;
  background:var(--rule);
}

.proof{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:var(--g3);
}
.proof__item{
  padding:0;
  border-top:1px solid var(--rule);
  padding-top:14px;
}
.proof__num{
  font-family:var(--serif);
  font-weight:850;
  letter-spacing:-0.04em;
  font-size:clamp(34px, 3.2vw, 56px);
  line-height:1;
  margin:0 0 6px;
}
.proof__text{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.steps{counter-reset:step}
.step{
  display:grid;
  grid-template-columns: 40px 1fr;
  gap:14px;
  padding:18px 0;
  border-top:1px solid var(--rule);
}

.step:first-child{border-top:0}
.step:nth-child(2){border-top:0}
.step:before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  font-family:var(--serif);
  font-weight:700;
  color:var(--danger);
  letter-spacing:-0.02em;
}
.step__title{margin:0 0 6px; font-size:16px; font-weight:650}
.step__body{margin:0; color:var(--muted); font-size:15px; max-width:72ch}

.figure{
  margin:0;
  padding:24px 0;
  border-top:1px solid var(--rule);
}
.figure__cap{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  padding: 0px 18px;
}
.figure__cap strong{color:var(--ink); font-weight:650}

.chart{
  width:100%;
  height:auto;
  display:block;
}

.table{
  width:100%;
  border-collapse:collapse;
  margin-top:18px;
  font-size:14px;
}
.table th,.table td{
  text-align:left;
  padding:10px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.table th{font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); font-weight:650}
.table td{color:var(--muted)}
.table td strong{color:var(--ink)}

.note{
  margin:18px 0 0;
  color:var(--muted);
  font-size:13px;
  max-width:80ch;
}
.note a{color:inherit}
.note a:hover{color:var(--ink)}

.list{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top:18px;
}
.example{
  border-top:1px solid var(--rule);
  padding-top:18px;
}
.example__title{margin:0 0 10px; font-family:var(--serif); font-weight:700; letter-spacing:-0.03em; font-size:22px}
.example__meta{margin:0 0 10px; color:var(--muted); font-size:14px; max-width:80ch}
.example__path{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;
  color:color-mix(in oklab, var(--muted) 70%, transparent);
}

.form{
  margin-top:18px;
  padding-top:18px;
  display:grid;
  gap:14px;
  max-width:560px;
}
.field{display:grid; gap:8px}
.label{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted)}
input,textarea{
  width:100%;
  padding:12px 0;
  border:0;
  border-bottom:1px solid var(--rule);
  background:transparent;
  font:inherit;
  color:inherit;
}
input:focus,textarea:focus{outline:none; border-bottom-color:var(--danger)}
textarea{min-height:120px; resize:vertical}
.submit{
  justify-self:start;
  background:transparent;
  border:0;
  padding:10px 0;
  border-bottom:2px solid var(--ink);
  font:inherit;
  font-weight:650;
  cursor:pointer;
}
.submit:hover{border-bottom-color:var(--danger)}

.foot{
  border-top:1px solid var(--rule);
  padding:var(--g3) 0;
}
.foot__frame{
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:var(--g4);
  align-items:end;
}
.foot__title{
  font-family:var(--serif);
  font-weight:800;
  letter-spacing:-0.04em;
  font-size:24px;
}
.foot__sub{color:var(--muted); margin-top:8px; max-width:55ch}
.foot__right{display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.foot__link{
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
}
.foot__link:hover{border-bottom-color:var(--ink)}
.foot__meta{color:var(--muted); font-size:13px}

[data-reveal]{opacity:1; transform:none}
html.js [data-reveal]{
  opacity:0;
  transform:translateY(10px);
  transition:opacity 700ms cubic-bezier(.2,.85,.2,1), transform 900ms cubic-bezier(.2,.85,.2,1);
}
html.js [data-reveal].is-in{opacity:1; transform:translateY(0)}

@media (max-width: 860px){
  .lede{grid-template-columns:1fr; gap:var(--g3)}
  .grid2{grid-template-columns:1fr; gap:var(--g3)}
  .proof{grid-template-columns:1fr; gap:var(--g2)}
  .foot__frame{grid-template-columns:1fr; gap:var(--g3)}
  .foot__right{align-items:flex-start}
  body.is-home .floater{display:none}
  body.is-home .floater--mobile{display:block; border-radius:36px; opacity:.72; filter:blur(18px)}
}